@vpxa/aikit 0.1.157 → 0.1.158

package/scaffold/dist/definitions/skills/present.mjs

@@ -1,603 +1 @@
-function e({blockDocs:e}={}){return[{file:`SKILL.md`,content:`---
-name: present
-description: "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, timeline, kanban, tree, diff-view, dashboard). Load this skill before calling the present tool to ensure professional output."
-metadata:
-  category: cross-cutting
-  domain: general
-  applicability: always
-  inputs: [data, analysis]
-  outputs: [dashboards, charts, reports]
-  requires: [aikit]
-argument-hint: "Content to present — data, analysis results, status report, comparison, or interactive MCP App"
----
-
-# Present Tool — Rich Interactive Dashboards
-
-## Quick Reference
-
-**Transport rule:**
-- No \`actions\` array — renders inline as an MCP App surface in the host client.
-- \`actions\` array present — switches to browser transport and opens the system browser.
-
-**Content blocks** (pass as \`blocks\` array of \`{ type, title?, value }\`):
-| Type | Value shape | Use for |
-|------|-------------|---------|
-| \`markdown\` | string | Prose, headings, code — **never tables** |
-| \`table\` | \`Record[]\` or \`{headers,rows}\` | **All tabular data** (NEVER put tables in markdown blocks) |
-| \`chart\` | \`{chartType,data,xKey,yKeys}\` | Bar, line, area, pie, radar, scatter |
-| \`metrics\` | \`[{label,value,trend?,status?}]\` | KPI cards |
-| \`cards\` | \`[{title,body?,badge?,status?}]\` | Info cards |
-| \`mermaid\` | string | Diagrams |
-| \`tree\` | \`{name,children?}\` | Hierarchical data |
-| \`timeline\` | \`[{title,description?,timestamp?,status?}]\` | Event sequences |
-| \`checklist\` | \`[{label,checked}]\` | Todo/check lists |
-| \`code\` | string | Code blocks |
-
-**Actions** (interactive buttons/selects; adding them switches transport to browser):
-\`\`\`json
-{ "actions": [{ "type": "button", "id": "approve", "label": "Approve", "variant": "primary" }] }
-\`\`\`
-
-**Anti-patterns:**
-- ❌ Tables inside \`markdown\` blocks → renders as raw pipe text
-- ❌ Assuming a \`format\` field exists → transport is inferred from \`actions\`
-- ❌ Unicode escapes in \`title\` param (\`\\u2014\`) → literal text (use actual — character)
-- ❌ Chart.js format (\`{labels,datasets}\`) → use \`{chartType,data,xKey,yKeys}\`
-
-The \`present\` tool renders structured content as a professional dark-themed dashboard. Transport is determined automatically:
-
-- **Inline MCP App transport** — No \`actions\`. Best for display-only content rendered inline in the host client.
-- **Browser transport** — \`actions\` present. Best when you need user interaction or full-page rendering outside the chat surface.
-
-## Transport Selection Rules (MUST FOLLOW)
-
-| Situation | Include \`actions\`? | Transport | Why |
-|-----------|----------------------|-----------|-----|
-| Display-only content (tables, charts, reports, status boards) | **No** | **Inline MCP App** | No interaction needed — render inline in the host client |
-| Need user input back (confirmations, selections, form data) | **Yes** | **Browser** | Actions trigger browser transport and return structured results |
-| Rich visual dashboards without interaction | **No** | **Inline MCP App** | Keep the result in-chat when no response is needed |
-| User explicitly asks for browser | **Yes** | **Browser** | Add at least one action to force browser transport |
-| **Running in CLI mode** and need a full visual surface | **Yes** | **Browser** | Inline MCP App rendering is IDE-hosted; add a minimal action so the browser opens |
-
-**Rule: Omit \`actions\` for inline rendering. Add \`actions\` when you need browser transport or interaction back from the user.**
-
-> **⚠️ CLI Note:** CLI environments do not host inline MCP App surfaces. If you need a full visual dashboard from CLI, include a minimal \`actions\` array such as an \`Acknowledge\` button so the tool uses browser transport.
-
----
-
-## Browser Transport Workflow (IMPORTANT — read carefully)
-
-When \`actions\` is present, the tool uses browser transport and opens the system browser. The selected action is returned to the model as structured data.
-
-### Steps:
-1. Call \`present\` with \`actions\` and your \`blocks\`
-2. Let the tool open the browser transport automatically
-3. Wait for the user's action result before continuing
-
-\`\`\`
-result = present({
-  schemaVersion: 1,
-  title: "Review Dashboard",
-  blocks: [...],
-  actions: [{ id: "ack", type: "button", label: "Acknowledge" }]
-})
-\`\`\`
-
-> **Important:** Do not document or call a separate \`browser({ action: 'open' })\` step for a \`present\` surface. Browser transport is selected by \`actions\`, not by a \`format\` parameter.
-
----
-
-## Content Architecture
-
-Content is an array of **typed blocks**. Each block has \`{ type, title?, value }\`. All blocks compose into a single unified page — use multiple blocks for sections.
-
-${e?.bySkill?.present||``}
-
----
-
-## Actions
-
-Actions are interactive buttons/selects. In \`browser\` mode, they render as clickable elements and the tool blocks until the user clicks, returning the selection.
-
-\`\`\`json
-{
-  "actions": [
-    { "type": "button", "id": "approve", "label": "Approve", "variant": "primary" },
-    { "type": "button", "id": "reject", "label": "Reject", "variant": "danger" },
-    { "type": "select", "id": "priority", "label": "Priority", "options": ["Low", "Medium", "High"] }
-  ]
-}
-\`\`\`
-
-**Variants:** \`primary\` (indigo), \`danger\` (red), \`default\` (neutral)
-
----
-
-## Composition Pattern
-
-Compose a full dashboard by combining multiple blocks in the \`blocks\` array:
-
-\`\`\`json
-{
-  "schemaVersion": 1,
-  "title": "Sprint Review",
-  "blocks": [
-    { "type": "metrics", "title": "Key Metrics", "value": [...] },
-    { "type": "chart", "title": "Velocity", "value": { "chartType": "area", ... } },
-    { "type": "timeline", "title": "Milestones", "value": { "items": [...] } },
-    { "type": "status-board", "title": "Service Health", "value": { "items": [...] } },
-    { "type": "table", "title": "Tasks", "value": [...] },
-    { "type": "markdown", "value": "## Notes\n\nAdditional context..." }
-  ],
-  "actions": [
-    { "type": "button", "id": "next-sprint", "label": "Plan Next Sprint", "variant": "primary" }
-  ]
-}
-\`\`\`
-
----
-
-## Design System
-
-The dashboard uses a professional dark theme:
-- **Font:** Plus Jakarta Sans (body), JetBrains Mono (code)
-- **Colors:** Deep navy background (\`#182030\`), indigo primary (\`#818cf8\`), no gradients
-- **12 chart colors** for multi-series data
-- **Status colors:** green (success), amber (warning), red (error), sky (info)
-- Clean borders, subtle hover states, no visual noise
-
----
-
-## Architecture Diagrams
-
-> **Behavioral rule:** When asked to present, visualize, or display system architecture, infrastructure, or service topology — **always load the \`c4-architecture\` skill** and use its HTML/SVG approach (Method 2 below) for rich visual output via \`present\`. The Mermaid method (Method 1) is acceptable only for quick inline previews or when the user explicitly asks for Mermaid. Default to HTML/SVG for all architecture presentations.
-
-The \`present\` tool can render C4-style architecture diagrams in either transport. Omit \`actions\` for inline rendering, or add \`actions\` when you need browser transport. The visual design system is centralized in the \`c4-architecture\` skill's reference file — load that skill for the full type registry, color palette, and template.
-
-**Design system source:** \`c4-architecture/references/html-design-system.md\` (single source of truth for all architecture diagram styling)
-
-### When to Use (Auto-Trigger)
-
-Load the \`c4-architecture\` skill and use the HTML/SVG approach when the user:
-- Asks to "show architecture", "present the system design", "visualize infrastructure"
-- Wants to display service topology, deployment layout, or component relationships
-- Requests architecture review output, system overview dashboards, or technical presentations
-- Uses words like "architecture diagram", "system diagram", "infrastructure diagram"
-
-### Rendering Methods
-
-| Method | Block Type | Transport | When to Use |
-|--------|-----------|-----------|-------------|
-| Mermaid C4 | \`mermaid\` | Inline by default, browser if \`actions\` are present | Quick diagrams, developer-focused, version-controlled |
-| HTML/SVG | \`markdown\` | Inline by default, browser if \`actions\` are present | Rich visual presentations, stakeholder reviews, dark-themed dashboards |
-
-### Method 1: Mermaid C4 Diagrams
-
-Use a \`mermaid\` content block with standard C4 Mermaid syntax:
-
-present({
-  schemaVersion: 1,
-  title: "System Architecture",
-  blocks: [
-    {
-      type: "mermaid",
-      title: "C4 Container Diagram",
-      value: \`C4Container
-  title Container Diagram - Payment System
-
-  Person(user, "Customer", "Places orders")
-
-  Container_Boundary(app, "Payment Platform") {
-
----
-
-## Rendering Troubleshooting
-
-### Why inline MCP App rendering sometimes shows raw text
-
-Without \`actions\`, the surface renders inline through the MCP App host in the client. The chat text fallback is intentionally minimal. When the inline host fails to load, the user may see only the title or raw JSON instead of the rendered dashboard.
-
-**Common causes of UIResource rendering failure:**
-1. **MCP Apps not enabled** — The host client must support MCP Apps (e.g., \`chat.mcp.apps.enabled\` in VS Code)
-2. **Companion app build missing** — The \`packages/present\` companion app must be built (\`npm run build\`)
-3. **Content too large** — Very large content arrays (20+ blocks or tables with 50+ rows) may cause the companion iframe to fail silently
-4. **Iframe loading error** — Network issues, CSP restrictions, or extension conflicts can prevent the iframe from loading
-
-### When to use browser transport instead of inline rendering
-
-Add \`actions\` to force browser transport when:
-- Content has **10+ blocks** or tables with **20+ rows** (large payloads are often easier to review in a full page)
-- The output must be **guaranteed visible outside the IDE chat panel**
-- You need **charts + tables + markdown** in the same view and inline rendering is failing
-- The user reports that the inline surface "didn't show anything" or only showed fallback text
-
-> **Reliability rule:** If content is complex (5+ blocks of mixed types) or the inline surface is failing, add a minimal \`actions\` array to force browser transport. Otherwise keep \`actions\` absent for inline rendering.
-
-### Content formatting tips to avoid rendering issues
-
-1. **Use \`table\` block type** instead of markdown tables inside \`markdown\` blocks — \`table\` blocks render natively; markdown pipe-tables may show as raw text in fallback
-2. **Use \`cards\` and \`metrics\`** for summary data instead of embedding it in markdown text
-3. **Keep \`markdown\` blocks for narrative text only** — don't embed HTML, tables, or complex formatting
-4. **Split large content** into multiple smaller \`present\` calls rather than one massive \`blocks\` array
-5. **For charts:** Always use ChartValue format (\`chartType\`, \`data\`, \`xKey\`, \`yKeys\`) — NOT Chart.js format (\`labels\`, \`datasets\`)
-
----
-
-    Container(api, "API Gateway", "Kong", "Routes requests")
-    Container(svc, "Payment Service", "Node.js", "Processes payments")
-    ContainerDb(db, "Payment DB", "PostgreSQL", "Transaction records")
-  }
-
-  System_Ext(stripe, "Stripe", "Payment processor")
-
-  Rel(user, api, "HTTPS")
-  Rel(api, svc, "gRPC")
-  Rel(svc, db, "SQL")
-  Rel(svc, stripe, "REST")\`
-    }
-  ]
-})
-\`\`\`
-
-### Method 2: HTML/SVG Architecture Diagrams
-
-For rich visual output, embed the full HTML/SVG diagram in a \`markdown\` block. Compose with \`metrics\` and \`cards\` blocks for a complete dashboard.
-
-**This approach works inline by default. Add \`actions\` only when you need browser transport.**
-
-\`\`\`js
-present({
-  schemaVersion: 1,
-  title: "System Architecture",
-  blocks: [
-    {
-      type: "metrics",
-      title: "Overview",
-      value: [
-        { label: "Services", value: "6" },
-        { label: "Data Stores", value: "2" },
-        { label: "External Systems", value: "3" }
-      ]
-    },
-    {
-      type: "markdown",
-      title: "Architecture Diagram",
-      value: "<div class='arch-diagram'><style>/* design system CSS from c4-architecture/references/html-design-system.md */</style><svg viewBox='0 0 1000 680'><!-- SVG components using category colors --></svg></div>"
-    },
-    {
-      type: "cards",
-      title: "Component Summary",
-      value: [
-        { title: "Frontend", body: "React SPA + CDN delivery" },
-        { title: "Backend", body: "3 microservices, gRPC mesh" },
-        { title: "Data", body: "PostgreSQL + Redis cache" }
-      ]
-    }
-  ]
-})
-\`\`\`
-
-### Component Categories (Quick Reference)
-
-The full type registry with sub-types and icon slots is in \`c4-architecture/references/html-design-system.md\`. Here is the category summary:
-
-| Category | Stroke | CSS Class | Use For |
-|----------|--------|-----------|---------|
-| Frontend | \`#22d3ee\` | \`.cyan\` | SPAs, mobile apps, static sites, PWAs |
-| Backend | \`#34d399\` | \`.emerald\` | API services, workers, microservices, serverless |
-| Data | \`#a78bfa\` | \`.violet\` | Databases, caches, search engines, warehouses |
-| Infrastructure | \`#fbbf24\` | \`.amber\` | CDNs, load balancers, DNS, storage |
-| Messaging | \`#fb923c\` | \`.orange\` | Queues, event buses, streams, pub/sub |
-| Security | \`#fb7185\` | \`.rose\` | Auth, API gateways, WAF, secret managers |
-| External | \`#94a3b8\` | \`.slate\` | Third-party APIs, SaaS, legacy systems |
-| Monitoring | \`#38bdf8\` | \`.sky\` | Logging, metrics, tracing, alerting |
-
-> **Centralization note:** Do not duplicate colors or type definitions here. The \`c4-architecture\` skill's design system is the single source of truth. When categories or colors change, they are updated in one place.
-
----
-
-## Best Practices
-
-1. **Use inline rendering by default** for display-only charts, tables, and dashboards. Add \`actions\` when you need browser transport, or when CLI requires a full visual surface.
-2. **Combine block types** — metrics + charts + tables in one page
-3. **Add titles** to every block for clear section headings
-4. **Use actions** when you need user decisions — the tool returns the selection
-5. **Keep markdown blocks** for narrative context between data sections
-6. **Chart tips:**
-   - Use \`area\` for trends over time
-   - Use \`bar\` for comparisons between categories
-   - Use \`donut\` for proportions/distributions
-   - Use \`sparkline\` inline with metrics for mini trends
-7. **Table auto-features:** Tables with 5+ rows get automatic search/filter. Columns are sortable by click.
-
----
-
-## Rendering Troubleshooting
-
-### Why inline MCP App rendering sometimes shows raw text
-
-Without \`actions\`, the surface renders inline through the MCP App host in the client. The chat text fallback is intentionally minimal. When the inline host fails to load, the user may see only the title or raw JSON instead of the rendered dashboard.
-
-**Common causes of UIResource rendering failure:**
-1. **MCP Apps not enabled** — The host client must support MCP Apps (e.g., \`chat.mcp.apps.enabled\` in VS Code)
-2. **Companion app build missing** — The \`packages/present\` companion app must be built (\`npm run build\`)
-3. **Content too large** — Very large content arrays (20+ blocks or tables with 50+ rows) may cause the companion iframe to fail silently
-4. **Iframe loading error** — Network issues, CSP restrictions, or extension conflicts can prevent the iframe from loading
-
-### When to use browser transport instead of inline rendering
-
-Add \`actions\` to force browser transport when:
-- Content has **10+ blocks** or tables with **20+ rows** (large payloads are often easier to review in a full page)
-- The output must be **guaranteed visible outside the IDE chat panel**
-- You need **charts + tables + markdown** in the same view and inline rendering is failing
-- The user reports that the inline surface "didn't show anything" or only showed fallback text
-
-> **Reliability rule:** If content is complex (5+ blocks of mixed types) or the inline surface is failing, add a minimal \`actions\` array to force browser transport. Otherwise keep \`actions\` absent for inline rendering.
-
-### Content formatting tips to avoid rendering issues
-
-1. **Use \`table\` block type** instead of markdown tables inside \`markdown\` blocks — \`table\` blocks render natively; markdown pipe-tables may show as raw text in fallback
-2. **Use \`cards\` and \`metrics\`** for summary data instead of embedding it in markdown text
-3. **Keep \`markdown\` blocks for narrative text only** — don't embed HTML, tables, or complex formatting
-4. **Split large content** into multiple smaller \`present\` calls rather than one massive \`blocks\` array
-5. **For charts:** Always use ChartValue format (\`chartType\`, \`data\`, \`xKey\`, \`yKeys\`) — NOT Chart.js format (\`labels\`, \`datasets\`)
-
----
-
-## MCP Apps Templates
-
-When the host client supports MCP Apps, the \`present\` tool can render **interactive widgets directly in the chat panel** using the \`template\` parameter. These are distinct from block-based surfaces rendered inline or in the browser.
-
-**Key difference:** Templates use \`template\` + object \`data\` (not a \`blocks\` array). No \`format\` parameter exists. Templates render inline in the host client unless a separate \`actions\` array is added at the top level.
-
-### When to use MCP Apps vs Browser Dashboard
-
-| Use Case | Mode | Why |
-|----------|------|-----|
-| Quick user input (pick items, reorder, fill form) | **MCP App template** | Inline in chat, no context switch |
-| Rich multi-section dashboard with charts | **Browser transport** | Add \`actions\` for a full page layout |
-| Simple confirmation or selection | **Actions-enabled surface** | Adding \`actions\` switches transport to browser |
-
-### Template: \`list-sort\`
-
-Drag-and-drop reorderable list. Use for priority ordering, task sequencing, or ranked preferences.
-
-\`\`\`json
-{
-  "template": "list-sort",
-  "title": "Priority Order",
-  "data": {
-    "items": [
-      { "id": "task-1", "label": "Fix authentication bug" },
-      { "id": "task-2", "label": "Add search feature" },
-      { "id": "task-3", "label": "Update documentation" }
-    ]
-  }
-}
-\`\`\`
-
-**Content schema:** \`{ items: Array<{ id: string, label: string }> }\`
-**Returns:** Reordered array of items after user drags to reorder and submits.
-
-### Template: \`data-table\`
-
-Filterable, sortable table with optional summary stat cards. Use for structured data review, change summaries, or audit results.
-
-\`\`\`json
-{
-  "template": "data-table",
-  "title": "File Changes",
-  "data": {
-    "columns": [
-      { "key": "file", "label": "File" },
-      { "key": "change", "label": "Change" },
-      { "key": "lines", "label": "Lines" }
-    ],
-    "rows": [
-      { "file": "auth.ts", "change": "Added guard", "lines": 5 },
-      { "file": "cache.ts", "change": "Fixed bug", "lines": 12 }
-    ],
-    "stats": [
-      { "label": "Files Changed", "value": "2" },
-      { "label": "Total Lines", "value": "17" }
-    ]
-  }
-}
-\`\`\`
-
-**Content schema:** \`{ columns: Array<{ key: string, label: string }>, rows: Array<Record<string, unknown>>, stats?: Array<{ label: string, value: string }> }\`
-**Returns:** Selected row(s) data when user interacts and submits.
-
-### Template: \`picker\`
-
-Multi-select with categories and tag-based search. Use for component selection, feature toggles, or module picking.
-
-\`\`\`json
-{
-  "template": "picker",
-  "title": "Select Modules",
-  "data": {
-    "categories": [
-      { "id": "core", "label": "Core" },
-      { "id": "plugins", "label": "Plugins" }
-    ],
-    "items": [
-      { "id": "auth", "label": "Authentication", "category": "core", "tags": ["security"] },
-      { "id": "cache", "label": "Cache Layer", "category": "core", "tags": ["performance"] },
-      { "id": "sentry", "label": "Sentry Plugin", "category": "plugins", "tags": ["monitoring"] }
-    ]
-  }
-}
-\`\`\`
-
-**Content schema:** \`{ categories: Array<{ id: string, label: string }>, items: Array<{ id: string, label: string, category: string, tags?: string[] }> }\`
-**Returns:** Array of selected item IDs after user checks items and submits.
-
-### Template: \`flame-graph\`
-
-Hierarchical zoomable visualization. Use for codebase structure, performance profiles, dependency trees, or budget breakdowns.
-
-\`\`\`json
-{
-  "template": "flame-graph",
-  "title": "Module Hierarchy",
-  "data": {
-    "profile": {
-      "name": "root",
-      "total": 100,
-      "children": [
-        {
-          "name": "packages/tools",
-          "total": 60,
-          "children": [
-            { "name": "search.ts", "total": 35 },
-            { "name": "compact.ts", "total": 25 }
-          ]
-        },
-        { "name": "packages/server", "total": 40 }
-      ]
-    }
-  }
-}
-\`\`\`
-
-**Content schema:** \`{ profile: { name: string, total: number, children?: Array<(recursive)> } }\`
-**Returns:** Clicked node information when user interacts.
-
-### Template: \`form\`
-
-Input fields with text inputs, selects, and checkboxes. Use for configuration, parameter collection, or setup wizards.
-
-\`\`\`json
-{
-  "template": "form",
-  "title": "Project Configuration",
-  "data": {
-    "fields": [
-      { "name": "projectName", "label": "Project Name", "type": "text", "value": "my-app" },
-      { "name": "framework", "label": "Framework", "type": "select", "options": ["React", "Vue", "Svelte"], "value": "React" },
-      { "name": "typescript", "label": "Use TypeScript", "type": "checkbox", "value": true },
-      { "name": "description", "label": "Description", "type": "text", "value": "" }
-    ]
-  }
-}
-\`\`\`
-
-**Content schema:** \`{ fields: Array<{ name: string, label: string, type: "text" | "select" | "checkbox", value?: string | boolean, options?: string[] }> }\`
-**Returns:** Object with field name-value pairs after user fills out and submits.
-
-### MCP Apps Best Practices
-
-1. **Use meaningful \`id\` values** — they are returned in responses and used for programmatic handling.
-2. **Keep list-sort items under 15** — longer lists become unwieldy for drag-and-drop.
-3. **Always provide \`value\` defaults** in forms — pre-fill with sensible defaults to reduce user effort.
-4. **Use \`tags\` in picker** — they power the search/filter functionality.
-5. **Flame-graph \`total\` values** should be consistent — parent total should equal sum of children.
-6. **Data-table \`stats\`** are optional — use them for KPI summary cards above the table.
-7. **Combine with LLM logic** — use returned values to drive next steps (e.g., form → generate config, picker → scope analysis).
-
-#### 6. \`timeline\` — Vertical Event Timeline (display only)
-
-\`\`\`json
-{
-  "events": [
-    {"title": "v1.0 Release", "description": "Initial release with core features", "timestamp": "2025-01", "status": "complete"},
-    {"title": "v2.0 Beta", "description": "MCP Apps support", "timestamp": "2025-07", "status": "active"},
-    {"title": "v3.0 Planning", "status": "pending"}
-  ]
-}
-\`\`\`
-
-Fields: \`title\` (required), \`description?\`, \`timestamp?\`, \`status?\` (\`'complete'|'active'|'pending'|'error'\`), \`icon?\`, \`category?\`
-
-#### 7. \`kanban\` — Drag-Drop Board (interactive — emits on card move)
-
-\`\`\`json
-{
-  "columns": [
-    {"id": "todo", "label": "To Do"},
-    {"id": "in-progress", "label": "In Progress", "color": "#3b82f6"},
-    {"id": "done", "label": "Done", "color": "#22c55e"}
-  ],
-  "cards": [
-    {"id": "c1", "title": "Fix auth bug", "column": "todo", "tags": ["bugfix"], "priority": "high"},
-    {"id": "c2", "title": "Add search", "column": "in-progress", "tags": ["feature"], "priority": "medium"}
-  ]
-}
-\`\`\`
-
-Returns \`{cardId, fromColumn, toColumn}\` when a card is dragged between columns.
-
-#### 8. \`tree\` — Collapsible Tree View (display only)
-
-\`\`\`json
-{
-  "root": {
-    "label": "packages/",
-    "children": [
-      {"label": "server/", "children": [{"label": "index.ts"}, {"label": "tools/", "children": [{"label": "present.ts"}]}]},
-      {"label": "present/", "children": [{"label": "present-app.ts"}]}
-    ]
-  }
-}
-\`\`\`
-
-Fields: \`label\` (required), \`id?\`, \`icon?\`, \`children?: TreeNode[]\`, \`metadata?: Record<string,string>\`. Accepts \`root\` as single node or array of nodes.
-
-#### 9. \`diff-view\` — Side-by-Side Code Diff (display only)
-
-\`\`\`json
-{
-  "files": [{
-    "path": "auth.ts",
-    "status": "modified",
-    "additions": 12,
-    "deletions": 3,
-    "hunks": [{
-      "header": "@@ -10,5 +10,14 @@",
-      "changes": [
-        {"type": "context", "content": "const auth = {};"},
-        {"type": "delete", "content": "// old validation"},
-        {"type": "add", "content": "// new JWT validation"},
-        {"type": "add", "content": "const token = verify(jwt);"}
-      ]
-    }]
-  }],
-  "stats": {"additions": 12, "deletions": 3, "filesChanged": 1}
-}
-\`\`\`
-
-Status values: \`'added'|'modified'|'deleted'|'renamed'\`. Change types: \`'add'|'delete'|'context'\`.
-
-#### 10. \`dashboard\` — Metric Cards Grid (display only)
-
-\`\`\`json
-{
-  "metrics": [
-    {"label": "Uptime", "value": "99.9%", "status": "success", "trend": {"value": "+0.1%", "direction": "up"}},
-    {"label": "Build Time", "value": "4.2s", "type": "progress", "progress": 42, "status": "warning"},
-    {"label": "Top Endpoints", "type": "list", "value": "3", "items": [
-      {"label": "/api/search", "value": "1.2k/day"},
-      {"label": "/api/present", "value": "890/day"}
-    ]}
-  ]
-}
-\`\`\`
-
-Metric types: \`'stat'\` (default), \`'progress'\` (with bar), \`'list'\` (sub-items). Status: \`'success'|'warning'|'error'|'info'\`.
-
-### Interaction Summary (All 10 Templates)
-
-| Template | Trigger | Data Returned to LLM |
-|----------|---------|---------------------|
-| list-sort | Auto on drag-drop | Reordered ID array |
-| data-table | Export button | Current filtered rows |
-| picker | Apply Selection button | Selected ID array |
-| flame-graph | Auto on node click | Clicked node object |
-| form | Submit button | Field values object |
-| kanban | Auto on card drag | \`{cardId, fromColumn, toColumn}\` |
-| timeline | Display only | — |
-| tree | Display only | — |
-| diff-view | Display only | — |
-| dashboard | Display only | — |
-`}]}export{e as default};
+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, timeline, kanban, tree, diff-view, dashboard). 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- 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.\n- Any `actions` array means browser transport and opens the system browser.\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| `markdown` | string | Prose, headings, code snippets |\n| `table` | `Record[]` or `{ headers, rows }` | Tabular data |\n| `chart` | `{ chartType, data, xKey?, yKeys? }` | Bar, line, area, pie, radar, scatter |\n| `metrics` | `[{ label, value, trend?, status? }]` | KPI cards |\n| `cards` | `[{ title, body?, badge?, status? }]` | Summary cards |\n| `mermaid` | string | Diagrams authored as Mermaid |\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\n> Anti-patterns:\n> - No tables in `markdown`; use a `table` block.\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\n- Types: `button` | `select` | `multi-select` | `form-submit` | `text-submit` | `confirm` | `custom`\n- Variants: `primary` (indigo) | `danger` (red) | `default` (neutral)\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| `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\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\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\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" }] }`\n\n`tour`: `{ "steps": [{ "id": "overview", "title": "Overview", "file": "src/index.ts", "explanation": "Entry point", "code?": "...", "line?": 1 }] }`\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- 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.\n- For large or mixed-content surfaces, browser transport is usually easier to review and more reliable.\n'}]}export{e as default};