Initial commit

skills/skill-adapter/assets/README.md

@@ -0,0 +1,7 @@
+# Assets
+
+Bundled resources for api-monitoring-dashboard skill
+
+- [ ] dashboard_template.json: JSON template for creating a basic API monitoring dashboard.
+- [ ] example_dashboard_config.yaml: Example configuration file for defining API endpoints, metrics, and alerting rules.
+- [ ] visualization_examples.md: Examples of different visualizations (e.g., line charts, bar graphs) for displaying API metrics.

skills/skill-adapter/assets/config-template.json

@@ -0,0 +1,32 @@
+{
+  "skill": {
+    "name": "skill-name",
+    "version": "1.0.0",
+    "enabled": true,
+    "settings": {
+      "verbose": false,
+      "autoActivate": true,
+      "toolRestrictions": true
+    }
+  },
+  "triggers": {
+    "keywords": [
+      "example-trigger-1",
+      "example-trigger-2"
+    ],
+    "patterns": []
+  },
+  "tools": {
+    "allowed": [
+      "Read",
+      "Grep",
+      "Bash"
+    ],
+    "restricted": []
+  },
+  "metadata": {
+    "author": "Plugin Author",
+    "category": "general",
+    "tags": []
+  }
+}

skills/skill-adapter/assets/dashboard_template.json

@@ -0,0 +1,90 @@
+{
+  "_comment": "Template for creating an API monitoring dashboard.  This JSON defines the basic structure and sample data for visualizing API health, metrics, and alerts.",
+  "dashboard_name": "API Performance Dashboard",
+  "description": "A comprehensive dashboard for monitoring the health and performance of your APIs.",
+  "data_source": "Prometheus",
+  "refresh_interval": "5m",
+  "panels": [
+    {
+      "panel_id": 1,
+      "title": "API Request Rate",
+      "type": "timeseries",
+      "_comment": "Visualizes the number of API requests over time.",
+      "query": "rate(http_requests_total[5m])",
+      "legend": "{{method}} {{path}}",
+      "unit": "req/s",
+      "axis_format": "short"
+    },
+    {
+      "panel_id": 2,
+      "title": "API Error Rate (5xx)",
+      "type": "timeseries",
+      "_comment": "Displays the error rate of API requests resulting in 5xx errors.",
+      "query": "rate(http_requests_total{status=~'5.*'}[5m])",
+      "legend": "{{method}} {{path}}",
+      "unit": "%",
+      "axis_format": "percent",
+      "transform": "multiply_by_100"
+    },
+    {
+      "panel_id": 3,
+      "title": "Average API Response Time",
+      "type": "timeseries",
+      "_comment": "Tracks the average response time of API requests.",
+      "query": "avg(http_request_duration_seconds_sum) / avg(http_request_duration_seconds_count)",
+      "legend": "{{method}} {{path}}",
+      "unit": "ms",
+      "axis_format": "short",
+      "transform": "multiply_by_1000"
+    },
+    {
+      "panel_id": 4,
+      "title": "API Latency (P95)",
+      "type": "timeseries",
+      "_comment": "Shows the 95th percentile latency of API requests.",
+      "query": "histogram_quantile(0.95, sum(rate(http_request_duration_seconds_bucket[5m])) by (le))",
+      "legend": "{{method}} {{path}}",
+      "unit": "ms",
+      "axis_format": "short",
+      "transform": "multiply_by_1000"
+    },
+    {
+      "panel_id": 5,
+      "title": "API Status Codes",
+      "type": "stat",
+      "_comment": "Displays the distribution of API status codes.",
+      "query": "sum(http_requests_total) by (status)",
+      "unit": "total",
+      "color_thresholds": [
+        { "value": 0, "color": "green" },
+        { "value": 1000, "color": "yellow" },
+        { "value": 5000, "color": "red" }
+      ]
+    },
+    {
+      "panel_id": 6,
+      "title": "Alerts",
+      "type": "table",
+      "_comment": "Displays active alerts related to API performance.",
+      "query": "ALERTS{}",
+      "columns": ["alertname", "severity", "description", "value"]
+    }
+  ],
+  "variables": [
+    {
+      "name": "namespace",
+      "label": "Namespace",
+      "query": "label_values(namespace)",
+      "multi": true,
+      "includeAll": true
+    },
+    {
+      "name": "service",
+      "label": "Service",
+      "query": "label_values(service, namespace='$namespace')",
+      "multi": true,
+      "includeAll": true
+    }
+  ],
+  "tags": ["api", "monitoring", "performance", "health"]
+}

skills/skill-adapter/assets/example_dashboard_config.yaml

@@ -0,0 +1,113 @@
+# Configuration file for API Monitoring Dashboard Plugin
+
+# API Endpoints to Monitor
+api_endpoints:
+  # Each entry defines an API endpoint to be monitored.
+  - name: "User Service API" # Descriptive name for the API
+    url: "https://api.example.com/users" # The actual API endpoint URL
+    method: "GET" # HTTP method (GET, POST, PUT, DELETE, etc.)
+    expected_status_code: 200 # Expected HTTP status code for a successful response
+    timeout: 5 # Timeout in seconds for the API request
+    headers: # Optional headers to include in the API request
+      Content-Type: "application/json"
+      Authorization: "Bearer REPLACE_ME"
+  - name: "Product Service API"
+    url: "https://api.example.com/products"
+    method: "GET"
+    expected_status_code: 200
+    timeout: 5
+  - name: "Order Service API (POST)"
+    url: "https://api.example.com/orders"
+    method: "POST"
+    expected_status_code: 201
+    timeout: 10
+    data: # Example data for POST requests (can be a placeholder)
+      item_id: 123
+      quantity: 2
+  - name: "Authentication API"
+    url: "https://auth.example.com/login"
+    method: "POST"
+    expected_status_code: 200
+    timeout: 5
+    data:
+      username: "YOUR_USERNAME"
+      password: "YOUR_PASSWORD"
+
+# Metrics to Collect and Display
+metrics:
+  # Each entry defines a metric to be collected from the API response.
+  - name: "Response Time (ms)" # Descriptive name for the metric
+    endpoint: "User Service API" # The API endpoint to collect the metric from (must match an entry in api_endpoints)
+    json_path: "response_time" # JSON path to extract the metric value from the response (if applicable)
+    unit: "ms" # Unit of measurement for the metric
+    type: "number" # Data type of the metric (number, string, boolean)
+  - name: "Data Size (KB)"
+    endpoint: "Product Service API"
+    json_path: "data_size"
+    unit: "KB"
+    type: "number"
+  - name: "Error Count"
+    endpoint: "Order Service API (POST)"
+    json_path: "error_count"
+    unit: "count"
+    type: "number"
+  - name: "Login Success Rate"
+    endpoint: "Authentication API"
+    json_path: "success_rate"
+    unit: "%"
+    type: "number"
+
+# Alerting Rules
+alerts:
+  # Each entry defines an alerting rule.
+  - name: "High Response Time" # Descriptive name for the alert
+    metric: "Response Time (ms)" # The metric to monitor (must match an entry in metrics)
+    threshold: 200 # Threshold value for the alert
+    operator: ">" # Operator to compare the metric value with the threshold (>, <, >=, <=, ==, !=)
+    severity: "critical" # Severity of the alert (critical, warning, info)
+    notification_channels: # List of notification channels to send the alert to
+      - "email"
+      - "slack"
+  - name: "Low Data Size"
+    metric: "Data Size (KB)"
+    threshold: 10
+    operator: "<"
+    severity: "warning"
+    notification_channels:
+      - "email"
+  - name: "High Error Count"
+    metric: "Error Count"
+    threshold: 5
+    operator: ">="
+    severity: "critical"
+    notification_channels:
+      - "slack"
+  - name: "Low Login Success Rate"
+    metric: "Login Success Rate"
+    threshold: 90
+    operator: "<"
+    severity: "warning"
+    notification_channels:
+      - "email"
+
+# Notification Channel Configurations (REPLACE_ME)
+notification_channels_config:
+  email:
+    smtp_server: "smtp.example.com"
+    smtp_port: 587
+    sender_email: "monitoring@example.com"
+    recipient_email: "alerts@example.com"
+    smtp_username: "YOUR_SMTP_USERNAME"
+    smtp_password: "YOUR_SMTP_PASSWORD"
+  slack:
+    slack_webhook_url: "YOUR_SLACK_WEBHOOK_URL"
+
+# Dashboard Configuration
+dashboard:
+  title: "API Monitoring Dashboard"
+  refresh_interval: 60 # Refresh interval in seconds
+  layout: # Define the layout of the dashboard (example only)
+    - "User Service API": ["Response Time (ms)"]
+    - "Product Service API": ["Data Size (KB)"]
+    - "Order Service API (POST)": ["Error Count"]
+    - "Authentication API": ["Login Success Rate"]

skills/skill-adapter/assets/skill-schema.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Claude Skill Configuration",
+  "type": "object",
+  "required": ["name", "description"],
+  "properties": {
+    "name": {
+      "type": "string",
+      "pattern": "^[a-z0-9-]+$",
+      "maxLength": 64,
+      "description": "Skill identifier (lowercase, hyphens only)"
+    },
+    "description": {
+      "type": "string",
+      "maxLength": 1024,
+      "description": "What the skill does and when to use it"
+    },
+    "allowed-tools": {
+      "type": "string",
+      "description": "Comma-separated list of allowed tools"
+    },
+    "version": {
+      "type": "string",
+      "pattern": "^\\d+\\.\\d+\\.\\d+$",
+      "description": "Semantic version (x.y.z)"
+    }
+  }
+}

skills/skill-adapter/assets/test-data.json

@@ -0,0 +1,27 @@
+{
+  "testCases": [
+    {
+      "name": "Basic activation test",
+      "input": "trigger phrase example",
+      "expected": {
+        "activated": true,
+        "toolsUsed": ["Read", "Grep"],
+        "success": true
+      }
+    },
+    {
+      "name": "Complex workflow test",
+      "input": "multi-step trigger example",
+      "expected": {
+        "activated": true,
+        "steps": 3,
+        "toolsUsed": ["Read", "Write", "Bash"],
+        "success": true
+      }
+    }
+  ],
+  "fixtures": {
+    "sampleInput": "example data",
+    "expectedOutput": "processed result"
+  }
+}

skills/skill-adapter/assets/visualization_examples.md

@@ -0,0 +1,122 @@
+# API Monitoring Dashboard: Visualization Examples
+
+This document provides examples of different visualizations you can use in your API monitoring dashboards, created with the `api-monitoring-dashboard` plugin.  Use these examples as inspiration and adapt them to your specific API and monitoring needs.
+
+## 1. Line Charts: Time-Series Data
+
+Line charts are excellent for visualizing trends over time.  They are particularly useful for showing API response times, request rates, and error rates.
+
+**Example:** API Response Time over the Past 24 Hours
+
+*   **Metric:** Average API Response Time (milliseconds)
+*   **Time Range:** Past 24 hours
+*   **Granularity:** 1 hour
+*   **Visualization:** Line Chart
+*   **Data Source:** [Placeholder: Your API Monitoring Data Source (e.g., Prometheus, Datadog, New Relic)]
+
+**Instructions:**
+
+1.  Configure your data source to collect API response time data.
+2.  Specify the time range and granularity for the chart.  Shorter granularities (e.g., 5 minutes) are useful for identifying short-term spikes, while longer granularities (e.g., 1 hour) are better for identifying long-term trends.
+3.  Ensure your data source returns data in a format compatible with the charting library used by the `api-monitoring-dashboard` plugin.
+
+**Placeholder for Chart Image (Optional):**
+
+[Insert Image of API Response Time Line Chart Here]
+
+## 2. Bar Graphs: Categorical Data
+
+Bar graphs are useful for comparing different categories of data, such as API endpoints, HTTP status codes, or geographic regions.
+
+**Example:** API Request Count by Endpoint
+
+*   **Metric:** Number of API Requests
+*   **Category:** API Endpoint (e.g., `/users`, `/products`, `/orders`)
+*   **Time Range:** Past 7 days
+*   **Visualization:** Bar Graph
+*   **Data Source:** [Placeholder: Your API Monitoring Data Source]
+
+**Instructions:**
+
+1.  Configure your data source to track API requests by endpoint.
+2.  Specify the time range for the chart.
+3.  Consider using different colors to represent different API endpoints.
+
+**Placeholder for Chart Image (Optional):**
+
+[Insert Image of API Request Count Bar Graph Here]
+
+## 3. Gauge Charts: Single Value Performance
+
+Gauge charts are effective for displaying a single, critical performance metric and its current status relative to a threshold.
+
+**Example:** CPU Utilization of API Server
+
+*   **Metric:** CPU Utilization (%)
+*   **Threshold:** 80% (Warning), 95% (Critical)
+*   **Visualization:** Gauge Chart
+*   **Data Source:** [Placeholder: Your Server Monitoring Data Source]
+
+**Instructions:**
+
+1.  Configure your server monitoring data source to collect CPU utilization data.
+2.  Define appropriate thresholds for warning and critical levels.  These thresholds should be based on your API's performance requirements and resource constraints.
+3.  The gauge chart should visually indicate when the metric exceeds the warning or critical thresholds.
+
+**Placeholder for Chart Image (Optional):**
+
+[Insert Image of CPU Utilization Gauge Chart Here]
+
+## 4. Heatmaps: Correlation and Density
+
+Heatmaps are useful for visualizing correlations between different metrics or the density of events over time.
+
+**Example:** Latency Distribution by API Endpoint and Time of Day
+
+*   **Metric:** API Latency (milliseconds)
+*   **X-Axis:** API Endpoint
+*   **Y-Axis:** Time of Day
+*   **Visualization:** Heatmap
+*   **Data Source:** [Placeholder: Your API Monitoring Data Source]
+
+**Instructions:**
+
+1.  Configure your data source to track API latency by endpoint and time of day.
+2.  Choose a color palette that effectively represents the range of latency values.
+3.  Consider using a logarithmic scale for the latency values to better visualize variations in the data.
+
+**Placeholder for Chart Image (Optional):**
+
+[Insert Image of Latency Distribution Heatmap Here]
+
+## 5. Tables: Detailed Data
+
+Tables are useful for displaying detailed data and allowing users to sort and filter the data.
+
+**Example:** Recent API Errors
+
+*   **Columns:** Timestamp, API Endpoint, HTTP Status Code, Error Message, Client IP Address
+*   **Data Source:** [Placeholder: Your API Error Logs]
+*   **Visualization:** Table
+
+**Instructions:**
+
+1.  Configure your data source to collect detailed API error logs.
+2.  Include relevant columns in the table, such as timestamp, API endpoint, HTTP status code, error message, and client IP address.
+3.  Allow users to sort and filter the data by different columns.
+
+**Placeholder for Table Data (Example):**
+
+| Timestamp | API Endpoint | HTTP Status Code | Error Message | Client IP Address |
+|---|---|---|---|---|
+| 2023-10-27 10:00:00 | /users | 500 | Internal Server Error | 192.168.1.100 |
+| 2023-10-27 10:01:00 | /products | 404 | Not Found | 192.168.1.101 |
+| 2023-10-27 10:02:00 | /orders | 503 | Service Unavailable | 192.168.1.102 |
+
+## Important Considerations
+
+*   **Data Source Integration:**  Ensure the `api-monitoring-dashboard` plugin can seamlessly integrate with your existing monitoring data sources.  Provide clear instructions on how to configure these integrations.
+*   **Customization:** Allow users to customize the appearance and behavior of the visualizations, such as color palettes, axis labels, and threshold values.
+*   **Alerting:** Integrate alerts with the visualizations to notify users when critical performance metrics exceed predefined thresholds.
+*   **Accessibility:** Ensure the visualizations are accessible to users with disabilities, following WCAG guidelines.
+*   **Performance:** Optimize the visualizations for performance, especially when dealing with large datasets.