@vpxa/aikit 0.1.168 → 0.1.169
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function e(){return[{file:`SKILL.md`,content:'---\nname: present\ndescription: "Use the AI Kit `present` tool to display rich interactive dashboards, charts, timelines, status boards, and data visualizations in the browser or in-chat. Covers all block types, chart types, actions, composition patterns, and MCP Apps templates (list-sort, data-table, picker, flame-graph, form, checklist, document, report, error, timeline, kanban, tree, diff-view, dashboard, status-board). Load this skill before calling the present tool to ensure professional output."\nmetadata:\n category: cross-cutting\n domain: general\n applicability: always\n inputs: [data, analysis]\n outputs: [dashboards, charts, reports]\n requires: [aikit]\nargument-hint: "Content to present — data, analysis results, status report, comparison, or interactive MCP App"\n---\n\n# Present Tool — Rich Interactive Dashboards\n\n## 1. API Shape\n\n- `schemaVersion: 1` is always required.\n- `title: string` is always required; do not use unicode escapes like `\\u2014`, use the actual character.\n- Optional layout fields: `layout?: { maxWidth?: string, padding?: string, columns?: number }`.\n- Optional appearance field: `colorScheme?: z.enum([\'light\', \'dark\', \'auto\'])`.\n- Interactive surfaces can also include `response?: { timeout?: number, required?: boolean }`.\n- Mode 1: block surface with `blocks: [{ type, title?, value }]`.\n- Mode 2: MCP App template with `template` + `data`.\n- Mode 3: viewer template with `template` + `data` for richer diagrams or flows.\n- No `actions` array means inline MCP App transport in the host client (except browser-only templates which auto-route to browser).\n- Any `actions` array means browser transport and opens the system browser. Valid action types: `button | select | multi-select | form-submit | text-submit | confirm | custom`.\n- CLI has no inline host; add a minimal action if you need the browser to open.\n\n```json\n{ "schemaVersion": 1, "title": "Release Review", "blocks": [{ "type": "metrics", "value": [] }] }\n```\n\n## 2. Content Blocks\n\nPass content as a `blocks` array of `{ type, title?, value }` objects.\n\n| Type | Value shape | Use for |\n|------|-------------|---------|\n| `prompt` | string | Prompt or callout text |\n| `text` | string | Plain text without markdown parsing |\n| `heading` | string | Standalone section headings |\n| `paragraph` | string | Standalone paragraph copy |\n| `markdown` | string | Prose, headings, code snippets |\n| `table` | `Record[]` or `{ headers, rows }` | Tabular data |\n| `chart` | `{ chartType, data, xKey?, yKeys? }` | `line | area | bar | horizontal-bar | pie | donut | sparkline | heatmap` |\n| `metrics` | `[{ label, value, trend?, status? }]` | KPI cards |\n| `cards` | `[{ title, body?, badge?, status? }]` | Summary cards |\n| `mermaid` | string | Diagrams (works in both mcp-app and browser) |\n| `tree` | `{ name, children? }` | Hierarchies |\n| `timeline` | `[{ title, description?, timestamp?, status? }]` | Event sequences |\n| `checklist` | `[{ label, checked }]` | Task lists |\n| `code` | string | Code or diff excerpts |\n| `comparison` | `[{title, items}]` or `{columns: [{title, items}]}` | Side-by-side option comparisons |\n| `status-board` | `[{category, items}]` or `{items: [{category, items}]}` | Service health boards |\n| `progress` | `{label, value, max?}` or `{items: [{label, value, max?, color?}]}` | Progress bars |\n| `graph` | `{ nodes: [{id, label?}], edges: [{from, to, label?}] }` | Network graphs |\n| `docs-browser` | `{ files: [{path, title?, content?, status?}], title? }` | Documentation indexes |\n| `actions` | `[{ type, id, label, variant?, options? }]` | Inline action group using the same action enum as top-level `actions` |\n| `separator` | none | Visual divider between block groups |\n\n> Anti-patterns:\n> - Prefer `table` blocks for tabular data (pipe tables in `markdown` are auto-normalized, but explicit table blocks are clearer and more efficient).\n> - Use `{ chartType, data, xKey, yKeys }`, not Chart.js `{ labels, datasets }`.\n> - Keep `markdown` for prose, headings, and code, not UI structure.\n\n## 3. Actions\n\nAction shape: `{ type, id, label, variant?, options? }`\n\nValid action types: `button | select | multi-select | form-submit | text-submit | confirm | custom`\n\n\n```json\n{ "actions": [{ "type": "button", "id": "ack", "label": "Acknowledge", "variant": "primary" }] }\n```\n\n## 4. MCP App Templates\n\nUse templates for structured interactive widgets. They take `template` + `data`; returns depend on the widget.\n\n| Template | Purpose | Data shape | Returns |\n|----------|---------|------------|---------|\n| `list-sort` | Reorder a ranked list | `{ items: [{ id, label }] }` | Reordered items or IDs |\n| `data-table` | Inspect structured rows | `{ columns, rows, stats? }` | Current selection or filtered rows |\n| `picker` | Choose items from categories | `{ categories, items }` | Selected item IDs |\n| `flame-graph` | Explore hierarchical totals | `{ profile }` | Clicked node |\n| `form` | Collect field values | `{ fields }` | Submitted field map |\n| `checklist` | Run an interactive checklist | Template-specific object | Checked state or submission payload |\n| `document` | Present structured long-form content | Template-specific object | Display only |\n| `report` | Present synthesized report content | Template-specific object | Display only |\n| `error` | Show structured error states and recovery actions | Template-specific object | Display only |\n| `kanban` | Move cards across columns | `{ columns, cards }` | Card move payload |\n| `timeline` | Show ordered milestones | `{ events }` | Display only |\n| `tree` | Browse nested nodes | `{ root }` | Display only |\n| `diff-view` | Show file diffs | `{ files, stats? }` | Display only |\n| `dashboard` | Show metric cards | `{ metrics }` | Display only |\n| `status-board` | Show grouped status or health views | Template-specific object | Display only |\n\n> **Auto-routing:** Browser-only templates (form, kanban, flame-graph, picker, list-sort) auto-route to browser transport even without explicit `actions`. No need to add a dummy action — the tool handles it.\n\n### `list-sort`\n`data`: `{ "items": [{ "id": "task-1", "label": "Fix auth bug" }] }`\n\n### `data-table`\n`data`: `{ "columns": [{ "key": "file", "label": "File" }], "rows": [{ "file": "auth.ts" }], "stats": [{ "label": "Files", "value": "1" }] }`\n\n### `picker`\n`data`: `{ "categories": [{ "id": "core", "label": "Core" }], "items": [{ "id": "auth", "label": "Auth", "category": "core", "tags": ["security"] }] }`\n\n### `flame-graph`\n`data`: `{ "profile": { "name": "root", "total": 100, "children": [{ "name": "packages/server", "total": 60 }] } }`\n\n### `form`\n`data`: `{ "fields": [{ "name": "projectName", "label": "Project Name", "type": "text", "value": "my-app" }] }`\n\n### `kanban`\n`data`: `{ "columns": [{ "id": "todo", "label": "To Do" }], "cards": [{ "id": "c1", "title": "Fix auth bug", "column": "todo" }] }`\n\n### `timeline`\n`data`: `{ "events": [{ "title": "v1.0 Release", "timestamp": "2026-05", "status": "complete" }] }`\n\nThe timeline template also accepts `entries` or `items` as the array field name (all three are equivalent).\n\n### `tree`\n`data`: `{ "root": { "label": "packages/", "children": [{ "label": "server/" }] } }`\n\n### `diff-view`\n`data`: `{ "files": [{ "path": "auth.ts", "status": "modified", "hunks": [{ "header": "@@ -1 +1 @@", "changes": [{ "type": "add", "content": "const ok = true;" }] }] }], "stats": { "filesChanged": 1 } }`\n\n### `dashboard`\n`data`: `{ "metrics": [{ "label": "Uptime", "value": "99.9%", "status": "success" }] }`\n\n## 5. Viewer Templates\n\nViewer templates render richer visual surfaces from `template` + `data`.\n\n| Template | Transport | Purpose |\n|----------|-----------|---------|\n| `c4-static@1` | mcp-app | Static architecture diagram |\n| `c4@1` | browser | Interactive architecture diagram |\n| `process-flow-static@1` | mcp-app | Static process flow |\n| `process-flow@1` | browser | Interactive process flow |\n| `tour@1` | browser | Guided walkthrough or code tour |\n| `task-plan-static@1` | mcp-app | Static task execution plan with phases, batches, agent assignments |\n| `task-plan@1` | browser | Interactive task plan with ReactFlow — drag/zoom/pan, dependency edges, ELK layout |\n\n`c4`: `{ "nodes": [{ "id": "web", "type": "container", "label": "Web App", "technology?": "React" }], "edges": [{ "source": "web", "target": "api", "label": "HTTPS" }] }`\n\n`process-flow`: `{ "nodes": [{ "id": "start", "label": "Start", "type": "start-end" }], "edges": [{ "source": "start", "target": "review", "type?": "standard" }] }`\n\nNode types: `start-end` | `manual` | `automated` | `integration` | `decision` | `prerequisite`. Default: `manual`.\nEdge types: `standard` | `loop-back` | `exception`. Default: `standard`. `loop-back` and `exception` edges animate.\n\n`tour`: `{ "steps": [{ "id": "overview", "title": "Overview", "file": "src/index.ts", "explanation": "Entry point", "code?": "...", "line?": 1 }] }`\n\n`task-plan`: `{ "title": "Feature Name", "description?": "Optional", "phases": [{ "id": "p1", "label": "Phase 1", "outcome?": "...", "batches": [{ "id": "b1", "order": 1, "parallel": true, "label?": "Parallel Research", "tasks": [{ "id": "t1", "title": "Research auth", "agent": "Researcher-Alpha", "files?": ["src/auth/"], "status?": "done", "description?": "...", "dependsOn?": [] }] }] }] }`\n\nTask status values: `pending` | `in-progress` | `done` | `blocked`. Default: `pending`.\n\nGotcha: edges use `source` and `target`, not `from` and `to`.\n\nDecision tree:\n- Architecture, systems, containers, deployments: load the `c4-architecture` skill and use `c4@1` or `c4-static@1`.\n- Stateful workflows, approvals, or branching processes: use `process-flow@1` or `process-flow-static@1`.\n- Agent task decomposition, execution plans, or parallel batch visualization: use `task-plan@1` or `task-plan-static@1`.\n- Ordered walkthroughs, onboarding, or narrated analysis: use `tour@1`.\n\n## 6. Rules\n\n- Pick transport once: no `actions` for inline, any `actions` for browser.\n- Combine block types in one `blocks` array; metrics + chart + table + markdown is the normal composition pattern.\n- Use concise schemas in docs; do not expand to full `present()` calls unless behavior depends on them.\n- Use `table`, `comparison`, and `status-board` for structured data instead of formatting it inside markdown.\n- Architecture requests are delegated: load the `c4-architecture` skill for diagram guidance and data contracts.\n- If inline rendering only shows a title, raw JSON, or fallback text, switch to browser transport with a minimal action. (Browser-only templates now auto-route, so this mainly applies to custom block surfaces.)\n- For large or mixed-content surfaces, browser transport is usually easier to review and more reliable.\n- For custom HTML demos or visual prototypes, do NOT use the "html" block type (renders as raw text inline). Instead, write an HTML file, serve it locally (e.g. "npx serve" or "python -m http.server"), then open with the AI Kit "browser" tool: browser({ action: "open", url: "http://localhost:PORT/file.html", mode: "ui" }). This gives a controlled Chromium instance the LLM can read/interact with. Avoid "Start-Process" (opens uncontrolled system browser).\n'}]}export{e as default};
|
|
1
|
+
function e(){return[{file:`SKILL.md`,content:'---\nname: present\ndescription: "Use the AI Kit `present` tool to display rich interactive dashboards, charts, timelines, status boards, and data visualizations in the browser or in-chat. Covers all block types, chart types, actions, composition patterns, and MCP Apps templates (list-sort, data-table, picker, flame-graph, form, checklist, document, report, error, timeline, kanban, tree, diff-view, dashboard, status-board). Load this skill before calling the present tool to ensure professional output."\nmetadata:\n category: cross-cutting\n domain: general\n applicability: always\n inputs: [data, analysis]\n outputs: [dashboards, charts, reports]\n requires: [aikit]\nargument-hint: "Content to present — data, analysis results, status report, comparison, or interactive MCP App"\n---\n\n# Present Tool — Rich Interactive Dashboards\n\n## 1. API Shape\n\n- `schemaVersion: 1` is always required.\n- `title: string` is always required; do not use unicode escapes like `\\u2014`, use the actual character.\n- Optional layout fields: `layout?: { maxWidth?: string, padding?: string, columns?: number }`.\n- Optional appearance field: `colorScheme?: z.enum([\'light\', \'dark\', \'auto\'])`.\n- Interactive surfaces can also include `response?: { timeout?: number, required?: boolean }`.\n- Mode 1: block surface with `blocks: [{ type, title?, value }]`.\n- Mode 2: MCP App template with `template` + `data`.\n- Mode 3: viewer template with `template` + `data` for richer diagrams or flows.\n- No `actions` array means inline MCP App transport in the host client (except browser-only templates which auto-route to browser).\n- Any `actions` array means browser transport and opens the system browser. Valid action types: `button | select | multi-select | form-submit | text-submit | confirm | custom`.\n- CLI has no inline host; add a minimal action if you need the browser to open.\n\n```json\n{ "schemaVersion": 1, "title": "Release Review", "blocks": [{ "type": "metrics", "value": [] }] }\n```\n\n## 2. Content Blocks\n\nPass content as a `blocks` array of `{ type, title?, value }` objects.\n\n| Type | Value shape | Use for |\n|------|-------------|---------|\n| `prompt` | string | Prompt or callout text |\n| `text` | string | Plain text without markdown parsing |\n| `heading` | string | Standalone section headings |\n| `paragraph` | string | Standalone paragraph copy |\n| `markdown` | string | Prose, headings, code snippets |\n| `table` | `Record[]` or `{ headers, rows }` | Tabular data |\n| `chart` | `{ chartType, data, xKey?, yKeys? }` | `line | area | bar | horizontal-bar | pie | donut | sparkline | heatmap` |\n| `metrics` | `[{ label, value, trend?, status? }]` | KPI cards |\n| `cards` | `[{ title, body?, badge?, status? }]` | Summary cards |\n| `mermaid` | string | Diagrams (works in both mcp-app and browser) |\n| `tree` | `{ name, children? }` | Hierarchies |\n| `timeline` | `[{ title, description?, timestamp?, status? }]` | Event sequences |\n| `checklist` | `[{ label, checked }]` | Task lists |\n| `code` | string | Code or diff excerpts |\n| `comparison` | `[{title, items}]` or `{columns: [{title, items}]}` | Side-by-side option comparisons |\n| `status-board` | `[{category, items}]` or `{items: [{category, items}]}` | Service health boards |\n| `progress` | `{label, value, max?}` or `{items: [{label, value, max?, color?}]}` | Progress bars |\n| `graph` | `{ nodes: [{id, label?}], edges: [{from, to, label?}] }` | Network graphs |\n| `docs-browser` | `{ files: [{path, title?, content?, status?}], title? }` | Documentation indexes |\n| `actions` | `[{ type, id, label, variant?, options? }]` | Inline action group using the same action enum as top-level `actions` |\n| `separator` | none | Visual divider between block groups |\n\n> Anti-patterns:\n> - Prefer `table` blocks for tabular data (pipe tables in `markdown` are auto-normalized, but explicit table blocks are clearer and more efficient).\n> - Use `{ chartType, data, xKey, yKeys }`, not Chart.js `{ labels, datasets }`.\n> - Keep `markdown` for prose, headings, and code, not UI structure.\n> - **NEVER use `code` block for structured data** (arrays, objects, decisions, lists). Use `list`, `table`, `kv`, or `checklist` instead.\n> - **NEVER JSON.stringify() data into a `code` or `markdown` block** — use the typed block that matches your data shape.\n\n### Data → Block Type Quick Reference\n\n| Your data looks like... | Use this block type | NOT this |\n|---|---|---|\n| Array of strings (decisions, findings, steps) | `list` | ~~`code` with JSON array~~ |\n| Key-value pairs (status, config, metadata) | `kv` | ~~`code` with JSON object~~ |\n| Rows × columns (comparisons, components) | `table` | ~~`markdown` with pipe table~~ |\n| Items with done/not-done state | `checklist` | ~~`list` with checkmark prefixes~~ |\n| Hierarchical items (file tree, org chart) | `tree` | ~~`code` with indentation~~ |\n| Numeric KPIs with labels | `metrics` | ~~`kv` or `markdown`~~ |\n| Before/after or option A vs B | `comparison` | ~~two `code` blocks~~ |\n\n## 3. Actions\n\nAction shape: `{ type, id, label, variant?, options? }`\n\nValid action types: `button | select | multi-select | form-submit | text-submit | confirm | custom`\n\n\n```json\n{ "actions": [{ "type": "button", "id": "ack", "label": "Acknowledge", "variant": "primary" }] }\n```\n\n## 4. MCP App Templates\n\nUse templates for structured interactive widgets. They take `template` + `data`; returns depend on the widget.\n\n| Template | Purpose | Data shape | Returns |\n|----------|---------|------------|---------|\n| `list-sort` | Reorder a ranked list | `{ items: [{ id, label }] }` | Reordered items or IDs |\n| `data-table` | Inspect structured rows | `{ columns, rows, stats? }` | Current selection or filtered rows |\n| `picker` | Choose items from categories | `{ categories, items }` | Selected item IDs |\n| `flame-graph` | Explore hierarchical totals | `{ profile }` | Clicked node |\n| `form` | Collect field values | `{ fields }` | Submitted field map |\n| `checklist` | Run an interactive checklist | Template-specific object | Checked state or submission payload |\n| `document` | Present structured long-form content | Template-specific object | Display only |\n| `report` | Present synthesized report content | Template-specific object | Display only |\n| `error` | Show structured error states and recovery actions | Template-specific object | Display only |\n| `kanban` | Move cards across columns | `{ columns, cards }` | Card move payload |\n| `timeline` | Show ordered milestones | `{ events }` | Display only |\n| `tree` | Browse nested nodes | `{ root }` | Display only |\n| `diff-view` | Show file diffs | `{ files, stats? }` | Display only |\n| `dashboard` | Show metric cards | `{ metrics }` | Display only |\n| `status-board` | Show grouped status or health views | Template-specific object | Display only |\n\n> **Auto-routing:** Browser-only templates (form, kanban, flame-graph, picker, list-sort) auto-route to browser transport even without explicit `actions`. No need to add a dummy action — the tool handles it.\n\n### `list-sort`\n`data`: `{ "items": [{ "id": "task-1", "label": "Fix auth bug" }] }`\n\n### `data-table`\n`data`: `{ "columns": [{ "key": "file", "label": "File" }], "rows": [{ "file": "auth.ts" }], "stats": [{ "label": "Files", "value": "1" }] }`\n\n### `picker`\n`data`: `{ "categories": [{ "id": "core", "label": "Core" }], "items": [{ "id": "auth", "label": "Auth", "category": "core", "tags": ["security"] }] }`\n\n### `flame-graph`\n`data`: `{ "profile": { "name": "root", "total": 100, "children": [{ "name": "packages/server", "total": 60 }] } }`\n\n### `form`\n`data`: `{ "fields": [{ "name": "projectName", "label": "Project Name", "type": "text", "value": "my-app" }] }`\n\n### `kanban`\n`data`: `{ "columns": [{ "id": "todo", "label": "To Do" }], "cards": [{ "id": "c1", "title": "Fix auth bug", "column": "todo" }] }`\n\n### `timeline`\n`data`: `{ "events": [{ "title": "v1.0 Release", "timestamp": "2026-05", "status": "complete" }] }`\n\nThe timeline template also accepts `entries` or `items` as the array field name (all three are equivalent).\n\n### `tree`\n`data`: `{ "root": { "label": "packages/", "children": [{ "label": "server/" }] } }`\n\n### `diff-view`\n`data`: `{ "files": [{ "path": "auth.ts", "status": "modified", "hunks": [{ "header": "@@ -1 +1 @@", "changes": [{ "type": "add", "content": "const ok = true;" }] }] }], "stats": { "filesChanged": 1 } }`\n\n### `dashboard`\n`data`: `{ "metrics": [{ "label": "Uptime", "value": "99.9%", "status": "success" }] }`\n\n## 5. Viewer Templates\n\nViewer templates render richer visual surfaces from `template` + `data`.\n\n| Template | Transport | Purpose |\n|----------|-----------|---------|\n| `c4-static@1` | mcp-app | Static architecture diagram |\n| `c4@1` | browser | Interactive architecture diagram |\n| `process-flow-static@1` | mcp-app | Static process flow |\n| `process-flow@1` | browser | Interactive process flow |\n| `tour@1` | browser | Guided walkthrough or code tour |\n| `task-plan-static@1` | mcp-app | Static task execution plan with phases, batches, agent assignments |\n| `task-plan@1` | browser | Interactive task plan with ReactFlow — drag/zoom/pan, dependency edges, ELK layout |\n\n`c4`: `{ "nodes": [{ "id": "web", "type": "container", "label": "Web App", "technology?": "React" }], "edges": [{ "source": "web", "target": "api", "label": "HTTPS" }] }`\n\n`process-flow`: `{ "nodes": [{ "id": "start", "label": "Start", "type": "start-end" }], "edges": [{ "source": "start", "target": "review", "type?": "standard" }] }`\n\nNode types: `start-end` | `manual` | `automated` | `integration` | `decision` | `prerequisite`. Default: `manual`.\nEdge types: `standard` | `loop-back` | `exception`. Default: `standard`. `loop-back` and `exception` edges animate.\n\n`tour`: `{ "steps": [{ "id": "overview", "title": "Overview", "file": "src/index.ts", "explanation": "Entry point", "code?": "...", "line?": 1 }] }`\n\n`task-plan`: `{ "title": "Feature Name", "description?": "Optional", "phases": [{ "id": "p1", "label": "Phase 1", "outcome?": "...", "batches": [{ "id": "b1", "order": 1, "parallel": true, "label?": "Parallel Research", "tasks": [{ "id": "t1", "title": "Research auth", "agent": "Researcher-Alpha", "files?": ["src/auth/"], "status?": "done", "description?": "...", "dependsOn?": [] }] }] }] }`\n\nTask status values: `pending` | `in-progress` | `done` | `blocked`. Default: `pending`.\n\nGotcha: edges use `source` and `target`, not `from` and `to`.\n\nDecision tree:\n- Architecture, systems, containers, deployments: load the `c4-architecture` skill and use `c4@1` or `c4-static@1`.\n- Stateful workflows, approvals, or branching processes: use `process-flow@1` or `process-flow-static@1`.\n- Agent task decomposition, execution plans, or parallel batch visualization: use `task-plan@1` or `task-plan-static@1`.\n- Ordered walkthroughs, onboarding, or narrated analysis: use `tour@1`.\n\n## 6. Rules\n\n- Pick transport once: no `actions` for inline, any `actions` for browser.\n- Combine block types in one `blocks` array; metrics + chart + table + markdown is the normal composition pattern.\n- Use concise schemas in docs; do not expand to full `present()` calls unless behavior depends on them.\n- Use `table`, `comparison`, and `status-board` for structured data instead of formatting it inside markdown.\n- Architecture requests are delegated: load the `c4-architecture` skill for diagram guidance and data contracts.\n- If inline rendering only shows a title, raw JSON, or fallback text, switch to browser transport with a minimal action. (Browser-only templates now auto-route, so this mainly applies to custom block surfaces.)\n- For large or mixed-content surfaces, browser transport is usually easier to review and more reliable.\n- For custom HTML demos or visual prototypes, do NOT use the "html" block type (renders as raw text inline). Instead, write an HTML file, serve it locally (e.g. "npx serve" or "python -m http.server"), then open with the AI Kit "browser" tool: browser({ action: "open", url: "http://localhost:PORT/file.html", mode: "ui" }). This gives a controlled Chromium instance the LLM can read/interact with. Avoid "Start-Process" (opens uncontrolled system browser).\n'}]}export{e as default};
|