@vpxa/aikit 0.1.74 → 0.1.75

package/scaffold/_preview/skills/present/SKILL.md

@@ -1,616 +0,0 @@
----
-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
-
-The `present` tool renders structured content as a professional dark-themed dashboard. It supports two output modes:
-
-- **`html`** — Renders an embedded UIResource for MCP-UI hosts (in-chat). Best for display-only content.
-- **`browser`** — Serves a themed dashboard on a local URL. Best when you need **user interaction** (buttons, selections, form input). The tool blocks until the user clicks an action, then returns their selection.
-
-## Format Selection Rules (MUST FOLLOW)
-
-| Situation | Format | Why |
-|-----------|--------|-----|
-| Display-only content (tables, charts, reports, status boards) | **`html`** | No interaction needed — render in-chat |
-| Need user input back (confirmations, selections, form data) | **`browser`** | Browser supports blocking actions that return data |
-| Rich visual dashboards without interaction | **`html`** | Prefer in-chat when no response is needed |
-| User explicitly asks for browser | **`browser`** | Respect explicit preference |
-| **Running in CLI mode** (no VS Code chat panel) | **`browser`** | `html` UIResource is invisible in CLI — only plain markdown renders. Use `browser` so the system browser opens automatically with full rich visualization. |
-
-**Rule: If no user interaction is needed, use `format: "html"`. If you need user interaction, use `format: "browser"`.**
-
-> **⚠️ CLI Mode Override:** When running in CLI mode (terminal, not VS Code chat), **always use `format: "browser"`** regardless of whether interaction is needed. The `html` format relies on UIResource rendering in VS Code's MCP Apps panel — in CLI, only the markdown fallback text is shown, losing all rich visualizations (charts, tables, dashboards). The `browser` format starts a local HTTP server and auto-opens the system browser after 8 seconds, which works reliably in CLI.
-
----
-
-## Browser Workflow (IMPORTANT — read carefully)
-
-When using `format: "browser"`, the tool starts a local HTTP server and returns a URL. **You MUST open the URL** so the user can see and interact with the dashboard.
-
-### Steps:
-1. Call `present` with `format: "browser"` and `actions` — it returns text containing `🌐 **Dashboard opened in browser:** http://127.0.0.1:{port}`
-2. **Extract the URL from the response**
-3. **Call `openBrowserPage({ url: "http://127.0.0.1:{port}" })` - PlayWright MCP to open it in VS Code's Simple Browser**
-
-```
-// Step 1: Call present
-result = present({ format: "browser", title: "...", content: [...], actions: [...] })
-
-// Step 2: MUST open in VS Code Simple Browser
-openBrowserPage({ url: "http://127.0.0.1:{port}" }) // PlayWright MCP API to open URL in VS Code's Simple Browser
-```
-
-> **Fallback**: The server also auto-opens the system browser as a safety net. But you should ALWAYS call `openBrowserPage` - PlayWright MCP yourself so the user sees it inside VS Code.
-
-**Note:** The HTTP server auto-closes after 5 minutes. Open the page promptly after receiving the URL.
-
----
-
-## 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.
-
-### Core Block Types
-
-| Type | Value Shape | Renders As |
-|------|------------|------------|
-| `markdown` | `string` (markdown text) | Rendered HTML with full GFM support |
-| `code` | `string` (source code) | Syntax-highlighted code block |
-| `mermaid` | `string` (mermaid syntax) | Interactive diagram |
-| `table` | `Array<Record<string, unknown>>` | Sortable/filterable table |
-| `metrics` | `Array<{ label, value }>` | KPI metric cards grid |
-| `cards` | `Array<{ title, body, badge? }>` | Card grid layout |
-| `tree` | `Record<string, unknown>` | Expandable tree view |
-| `graph` | `{ nodes: [], edges: [] }` | Mermaid graph diagram |
-
-### Chart Block
-
-```json
-{
-  "type": "chart",
-  "title": "Revenue Trend",
-  "value": {
-    "chartType": "line",
-    "data": [{"month": "Jan", "revenue": 1200}, {"month": "Feb", "revenue": 1800}],
-    "xKey": "month",
-    "yKeys": ["revenue"],
-    "showLegend": true,
-    "showGrid": true,
-    "height": 300
-  }
-}
-```
-
-**Chart types:** `line`, `area`, `bar`, `horizontal-bar`, `pie`, `donut`, `sparkline`, `heatmap`
-
-> **⚠️ Chart Format**: Always use the ChartValue format shown above (`chartType`, `data`, `xKey`, `yKeys`). Do **NOT** use Chart.js format (`labels`, `datasets`) — while it will be auto-converted, the native ChartValue format is required for reliable rendering.
-
-### New Block Types
-
-| Type | Value Shape | Renders As |
-|------|------------|------------|
-| `timeline` | `{ items: [{ phase?, title, description?, status? }] }` | Vertical timeline with status dots (done/active/pending/error) |
-| `checklist` | `{ items: [{ label, checked?, note? }] }` | Interactive checklist with checkmarks |
-| `comparison` | `{ columns: [{ title, items: [string] }] }` | Side-by-side comparison grid |
-| `status-board` | `{ items: [{ label, status, detail? }] }` | Status indicator rows (success/warning/error/info/pending) |
-| `prompt` | `{ question, context?, placeholder? }` | Highlighted question/prompt block |
-| `progress` | `{ items: [{ label, value, max? }] }` | Progress bars with percentages |
-
----
-
-## 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 `content` array:
-
-```json
-{
-  "format": "browser",
-  "title": "Sprint Review",
-  "content": [
-    { "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 format (Method 2 below) for rich visual output via `present`. The Mermaid method (Method 1) is acceptable only for quick in-chat 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 both `html` and `browser` formats. 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 HTML/SVG format 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 | Format | When to Use |
-|--------|-----------|--------|-------------|
-| Mermaid C4 | `mermaid` | html / browser | Quick diagrams, developer-focused, version-controlled |
-| HTML/SVG | `markdown` | html / browser | Rich visual presentations, stakeholder reviews, dark-themed dashboards |
-
-### Method 1: Mermaid C4 Diagrams
-
-Use a `mermaid` content block with standard C4 Mermaid syntax:
-
-present({
-  format: "html",  // or "browser"
-  title: "System Architecture",
-  content: [
-    {
-      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 `html` format sometimes shows raw text
-
-The `html` format renders content inside an MCP Apps companion iframe (UIResource). The chat text fallback is intentionally minimal (just the title). When the UIResource fails to load, the user sees only the title or raw JSON — NOT the rendered dashboard.
-
-**Common causes of UIResource rendering failure:**
-1. **MCP Apps not enabled** — The setting `chat.mcp.apps.enabled` must be `true` in VS Code settings
-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 prefer `browser` over `html`
-
-Use `format: "browser"` instead of `html` when:
-- Content has **10+ blocks** or tables with **20+ rows** (large payloads are more reliable in browser)
-- The output must be **guaranteed visible** (browser format always opens, no silent failures)
-- You need **charts + tables + markdown** in the same view (browser renders all block types reliably)
-- The user reports that `html` format "didn't show anything" or "showed raw text"
-
-> **Reliability rule:** If content is complex (5+ blocks of mixed types), prefer `format: "browser"` for guaranteed rendering. The `html` format is best for simple, single-block content.
-
-### 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 content 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.
-
-**Both `format: "html"` and `format: "browser"` work with this approach.**
-
-```js
-present({
-  format: "html",  // or "browser"
-  title: "System Architecture",
-  content: [
-    {
-      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 `browser` format** for data-rich content — charts, tables, dashboards. **Always use `browser` in CLI mode** (the `html` UIResource doesn't render in terminal environments).
-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 `html` format sometimes shows raw text
-
-The `html` format renders content inside an MCP Apps companion iframe (UIResource). The chat text fallback is intentionally minimal (just the title). When the UIResource fails to load, the user sees only the title or raw JSON — NOT the rendered dashboard.
-
-**Common causes of UIResource rendering failure:**
-1. **MCP Apps not enabled** — The setting `chat.mcp.apps.enabled` must be `true` in VS Code settings
-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 prefer `browser` over `html`
-
-Use `format: "browser"` instead of `html` when:
-- Content has **10+ blocks** or tables with **20+ rows** (large payloads are more reliable in browser)
-- The output must be **guaranteed visible** (browser format always opens, no silent failures)
-- You need **charts + tables + markdown** in the same view (browser renders all block types reliably)
-- The user reports that `html` format "didn't show anything" or "showed raw text"
-
-> **Reliability rule:** If content is complex (5+ blocks of mixed types), prefer `format: "browser"` for guaranteed rendering. The `html` format is best for simple, single-block content.
-
-### 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 content array
-5. **For charts:** Always use ChartValue format (`chartType`, `data`, `xKey`, `yKeys`) — NOT Chart.js format (`labels`, `datasets`)
-
----
-
-## MCP Apps Templates (VS Code Chat Widgets)
-
-When `chat.mcp.apps.enabled` is true in VS Code settings, the `present` tool can render **interactive widgets directly in the chat panel** using the `template` parameter. These are distinct from the browser/html dashboard modes.
-
-**Key difference:** Templates use `template` + object `content` (not array of blocks). No `format` parameter needed. The widget renders inline in VS Code chat. User interactions (reorder, select, submit) are returned to the LLM as structured data.
-
-### 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** | Full page layout with all block types |
-| Simple confirmation or selection | **Actions** (browser/html) | Buttons/selects in dashboard |
-
-### Template: `list-sort`
-
-Drag-and-drop reorderable list. Use for priority ordering, task sequencing, or ranked preferences.
-
-```json
-{
-  "template": "list-sort",
-  "title": "Priority Order",
-  "content": {
-    "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",
-  "content": {
-    "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",
-  "content": {
-    "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",
-  "content": {
-    "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",
-  "content": {
-    "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 | — |