@vpxa/aikit 0.1.128 → 0.1.130

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

@@ -1,4 +1,4 @@
-var e=[{file:`SKILL.md`,content:`---
+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:
@@ -61,51 +61,7 @@ openBrowserPage({ url: "http://127.0.0.1:{port}" }) // Playwright MCP - opens UR
 
 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 |
+${e?.bySkill?.present||``}
 
 ---
 
@@ -614,4 +570,4 @@ Metric types: \`'stat'\` (default), \`'progress'\` (with bar), \`'list'\` (sub-i
 | tree | Display only | — |
 | diff-view | Display only | — |
 | dashboard | Display only | — |
-`}];export{e as default};
+`}]}export{e as default};

package/scaffold/dist/generated/block-docs.mjs

@@ -0,0 +1,81 @@
+const e="| Type | Description | Value Shape |\n|------|-------------|-------------|\n| `markdown` | Markdown content rendered with the marked parser. | `string` |\n| `code` | Formatted code block rendered inside pre/code tags. | `string` |\n| `mermaid` | Mermaid diagram source rendered in a mermaid pre block. | `string` |\n| `table` | Tabular data rendered from records or explicit headers and rows. | `Record<string, unknown>[] | { headers: string[]; rows: unknown[][] }` |\n| `metrics` | Metric cards showing label/value pairs with optional trend and status. | `Array<{ label: string; value: string | number; trend?: string | number; status?: string }>` |\n| `cards` | Card grid for titled items with optional body, badge, and status. | `Array<{ title: string; body?: string; badge?: string; status?: string; description?: string }>` |\n| `tree` | Hierarchical object or name/children tree rendered recursively. | `{ name: string; children?: unknown[] } | Record<string, unknown>` |\n| `graph` | Node and edge graph rendered as a Mermaid flow graph in HTML mode. | `{ nodes: Array<{ id: string; label?: string }>; edges: Array<{ from: string; to: string; label?: string }> }` |\n| `chart` | Structured chart definition rendered as SVG. | `{ chartType: string; data: Record<string, unknown>[]; xKey: string; yKeys: string[] }` |\n| `timeline` | Timeline entries rendered as a vertical sequence of events. | `Array<{ title: string; description?: string; timestamp?: string; status?: string }>` |\n| `checklist` | Checklist items with boolean checked state. | `Array<{label, checked}> | {items: Array<{label, checked}>}` |\n| `comparison` | Side-by-side comparison columns with titled item lists. | `Array<{title, items}> | {columns: Array<{title, items}>}` |\n| `status-board` | Status categories containing labeled status items. | `Array<{category, items}> | {items: Array<{category, items}>}` |\n| `prompt` | Prompt payload rendered through the prompt display helper. | `unknown` |\n| `progress` | Progress bar with current value and optional maximum. | `{label, value, max?} | {items: Array<{label, value, max?, color?}>}` |\n| `viewer-link` | Styled card linking to a standalone interactive viewer. | `{ viewerType: string; label: string; description?: string; url?: string; icon?: string }` |\n| `docs-browser` | Collapsible file tree with markdown content for documentation browsing. | `{ files: Array<{ path: string; title?: string; content?: string; status?: \"current\" | \"stale\" | \"missing\" }>; title?: string }` |\n| `text` | Plain text content rendered through the markdown parser. | `string` |\n| `heading` | Single heading with configurable level from h1 to h6. | `string` |\n| `paragraph` | Single paragraph rendered inside a p tag. | `string` |\n| `separator` | Horizontal rule used to separate adjacent blocks. | `undefined` |\n| `actions` | Action bar containing button and select action definitions. | `Array<{ type: string; id: string; label: string; variant?: string; options?: Array<string | { label: string; value: string }> }>` |\n\n### Usage Examples\n\n#### `viewer-link`\n\n```typescript\n{\n  type: 'viewer-link',\n  value: {\n    viewerType: 'c4',\n    label: 'Open Interactive C4 Diagram',\n    description: 'Drag, zoom, and pan with ELK auto-layout',\n    icon: '🏗️',\n  },\n}\n```\n\n#### `docs-browser`\n\n```typescript\n{\n  type: 'docs-browser',\n  value: {\n    title: 'Project Docs',\n    files: [\n      { path: 'docs/README.md', title: 'Overview', status: 'current' },\n      { path: 'docs/api.md', title: 'API Reference', status: 'stale' },\n    ],\n  },\n}\n```",t=`  - type:"markdown" → value: string
+  - type:"code" → value: string
+  - type:"mermaid" → value: string
+  - type:"table" → value: Record<string, unknown>[] | { headers: string[]; rows: unknown[][] }
+  - type:"metrics" → value: Array<{ label: string; value: string | number; trend?: string | number; status?: string }>
+  - type:"cards" → value: Array<{ title: string; body?: string; badge?: string; status?: string; description?: string }>
+  - type:"tree" → value: { name: string; children?: unknown[] } | Record<string, unknown>
+  - type:"graph" → value: { nodes: Array<{ id: string; label?: string }>; edges: Array<{ from: string; to: string; label?: string }> }
+  - type:"chart" → value: { chartType: string; data: Record<string, unknown>[]; xKey: string; yKeys: string[] }
+  - type:"timeline" → value: Array<{ title: string; description?: string; timestamp?: string; status?: string }>
+  - type:"checklist" → value: Array<{label, checked}> | {items: Array<{label, checked}>}
+  - type:"comparison" → value: Array<{title, items}> | {columns: Array<{title, items}>}
+  - type:"status-board" → value: Array<{category, items}> | {items: Array<{category, items}>}
+  - type:"prompt" → value: unknown
+  - type:"progress" → value: {label, value, max?} | {items: Array<{label, value, max?, color?}>}
+  - type:"viewer-link" → value: { viewerType: string; label: string; description?: string; url?: string; icon?: string }
+  - type:"docs-browser" → value: { files: Array<{ path: string; title?: string; content?: string; status?: "current" | "stale" | "missing" }>; title?: string }
+  - type:"text" → value: string
+  - type:"heading" → value: string
+  - type:"paragraph" → value: string
+  - type:"separator" → value: undefined
+  - type:"actions" → value: Array<{ type: string; id: string; label: string; variant?: string; options?: Array<string | { label: string; value: string }> }>`,n={present:"| Type | Description | Value Shape |\n|------|-------------|-------------|\n| `markdown` | Markdown content rendered with the marked parser. | `string` |\n| `code` | Formatted code block rendered inside pre/code tags. | `string` |\n| `mermaid` | Mermaid diagram source rendered in a mermaid pre block. | `string` |\n| `table` | Tabular data rendered from records or explicit headers and rows. | `Record<string, unknown>[] | { headers: string[]; rows: unknown[][] }` |\n| `metrics` | Metric cards showing label/value pairs with optional trend and status. | `Array<{ label: string; value: string | number; trend?: string | number; status?: string }>` |\n| `cards` | Card grid for titled items with optional body, badge, and status. | `Array<{ title: string; body?: string; badge?: string; status?: string; description?: string }>` |\n| `tree` | Hierarchical object or name/children tree rendered recursively. | `{ name: string; children?: unknown[] } | Record<string, unknown>` |\n| `graph` | Node and edge graph rendered as a Mermaid flow graph in HTML mode. | `{ nodes: Array<{ id: string; label?: string }>; edges: Array<{ from: string; to: string; label?: string }> }` |\n| `chart` | Structured chart definition rendered as SVG. | `{ chartType: string; data: Record<string, unknown>[]; xKey: string; yKeys: string[] }` |\n| `timeline` | Timeline entries rendered as a vertical sequence of events. | `Array<{ title: string; description?: string; timestamp?: string; status?: string }>` |\n| `checklist` | Checklist items with boolean checked state. | `Array<{label, checked}> | {items: Array<{label, checked}>}` |\n| `comparison` | Side-by-side comparison columns with titled item lists. | `Array<{title, items}> | {columns: Array<{title, items}>}` |\n| `status-board` | Status categories containing labeled status items. | `Array<{category, items}> | {items: Array<{category, items}>}` |\n| `prompt` | Prompt payload rendered through the prompt display helper. | `unknown` |\n| `progress` | Progress bar with current value and optional maximum. | `{label, value, max?} | {items: Array<{label, value, max?, color?}>}` |\n| `viewer-link` | Styled card linking to a standalone interactive viewer. | `{ viewerType: string; label: string; description?: string; url?: string; icon?: string }` |\n| `docs-browser` | Collapsible file tree with markdown content for documentation browsing. | `{ files: Array<{ path: string; title?: string; content?: string; status?: \"current\" | \"stale\" | \"missing\" }>; title?: string }` |\n\n### Usage Examples\n\n#### `viewer-link`\n\n```typescript\n{\n  type: 'viewer-link',\n  value: {\n    viewerType: 'c4',\n    label: 'Open Interactive C4 Diagram',\n    description: 'Drag, zoom, and pan with ELK auto-layout',\n    icon: '🏗️',\n  },\n}\n```\n\n#### `docs-browser`\n\n```typescript\n{\n  type: 'docs-browser',\n  value: {\n    title: 'Project Docs',\n    files: [\n      { path: 'docs/README.md', title: 'Overview', status: 'current' },\n      { path: 'docs/api.md', title: 'API Reference', status: 'stale' },\n    ],\n  },\n}\n```",docs:`| Type | Description | Value Shape |
+|------|-------------|-------------|
+| \`markdown\` | Markdown content rendered with the marked parser. | \`string\` |
+| \`code\` | Formatted code block rendered inside pre/code tags. | \`string\` |
+| \`mermaid\` | Mermaid diagram source rendered in a mermaid pre block. | \`string\` |
+| \`table\` | Tabular data rendered from records or explicit headers and rows. | \`Record<string, unknown>[] | { headers: string[]; rows: unknown[][] }\` |
+| \`cards\` | Card grid for titled items with optional body, badge, and status. | \`Array<{ title: string; body?: string; badge?: string; status?: string; description?: string }>\` |
+| \`viewer-link\` | Styled card linking to a standalone interactive viewer. | \`{ viewerType: string; label: string; description?: string; url?: string; icon?: string }\` |
+| \`docs-browser\` | Collapsible file tree with markdown content for documentation browsing. | \`{ files: Array<{ path: string; title?: string; content?: string; status?: "current" | "stale" | "missing" }>; title?: string }\` |
+
+### Usage Examples
+
+#### \`viewer-link\`
+
+\`\`\`typescript
+{
+  type: 'viewer-link',
+  value: {
+    viewerType: 'c4',
+    label: 'Open Interactive C4 Diagram',
+    description: 'Drag, zoom, and pan with ELK auto-layout',
+    icon: '🏗️',
+  },
+}
+\`\`\`
+
+#### \`docs-browser\`
+
+\`\`\`typescript
+{
+  type: 'docs-browser',
+  value: {
+    title: 'Project Docs',
+    files: [
+      { path: 'docs/README.md', title: 'Overview', status: 'current' },
+      { path: 'docs/api.md', title: 'API Reference', status: 'stale' },
+    ],
+  },
+}
+\`\`\``,"c4-architecture":`| Type | Description | Value Shape |
+|------|-------------|-------------|
+| \`mermaid\` | Mermaid diagram source rendered in a mermaid pre block. | \`string\` |
+| \`graph\` | Node and edge graph rendered as a Mermaid flow graph in HTML mode. | \`{ nodes: Array<{ id: string; label?: string }>; edges: Array<{ from: string; to: string; label?: string }> }\` |
+| \`viewer-link\` | Styled card linking to a standalone interactive viewer. | \`{ viewerType: string; label: string; description?: string; url?: string; icon?: string }\` |
+
+### Usage Examples
+
+#### \`viewer-link\`
+
+\`\`\`typescript
+{
+  type: 'viewer-link',
+  value: {
+    viewerType: 'c4',
+    label: 'Open Interactive C4 Diagram',
+    description: 'Drag, zoom, and pan with ELK auto-layout',
+    icon: '🏗️',
+  },
+}
+\`\`\``};export{e as ALL_BLOCK_DOCS,n as BLOCK_DOCS_BY_SKILL,t as BLOCK_TYPE_LIST};

package/scaffold/generated/block-docs.mjs

@@ -0,0 +1,13 @@
+// AUTO-GENERATED - do not edit manually.
+// Source: packages/server/src/tools/present/block-registry.ts
+// Generated at: 2026-05-10T12:09:40.613Z
+
+export const ALL_BLOCK_DOCS = "| Type | Description | Value Shape |\n|------|-------------|-------------|\n| `markdown` | Markdown content rendered with the marked parser. | `string` |\n| `code` | Formatted code block rendered inside pre/code tags. | `string` |\n| `mermaid` | Mermaid diagram source rendered in a mermaid pre block. | `string` |\n| `table` | Tabular data rendered from records or explicit headers and rows. | `Record<string, unknown>[] | { headers: string[]; rows: unknown[][] }` |\n| `metrics` | Metric cards showing label/value pairs with optional trend and status. | `Array<{ label: string; value: string | number; trend?: string | number; status?: string }>` |\n| `cards` | Card grid for titled items with optional body, badge, and status. | `Array<{ title: string; body?: string; badge?: string; status?: string; description?: string }>` |\n| `tree` | Hierarchical object or name/children tree rendered recursively. | `{ name: string; children?: unknown[] } | Record<string, unknown>` |\n| `graph` | Node and edge graph rendered as a Mermaid flow graph in HTML mode. | `{ nodes: Array<{ id: string; label?: string }>; edges: Array<{ from: string; to: string; label?: string }> }` |\n| `chart` | Structured chart definition rendered as SVG. | `{ chartType: string; data: Record<string, unknown>[]; xKey: string; yKeys: string[] }` |\n| `timeline` | Timeline entries rendered as a vertical sequence of events. | `Array<{ title: string; description?: string; timestamp?: string; status?: string }>` |\n| `checklist` | Checklist items with boolean checked state. | `Array<{label, checked}> | {items: Array<{label, checked}>}` |\n| `comparison` | Side-by-side comparison columns with titled item lists. | `Array<{title, items}> | {columns: Array<{title, items}>}` |\n| `status-board` | Status categories containing labeled status items. | `Array<{category, items}> | {items: Array<{category, items}>}` |\n| `prompt` | Prompt payload rendered through the prompt display helper. | `unknown` |\n| `progress` | Progress bar with current value and optional maximum. | `{label, value, max?} | {items: Array<{label, value, max?, color?}>}` |\n| `viewer-link` | Styled card linking to a standalone interactive viewer. | `{ viewerType: string; label: string; description?: string; url?: string; icon?: string }` |\n| `docs-browser` | Collapsible file tree with markdown content for documentation browsing. | `{ files: Array<{ path: string; title?: string; content?: string; status?: \"current\" | \"stale\" | \"missing\" }>; title?: string }` |\n| `text` | Plain text content rendered through the markdown parser. | `string` |\n| `heading` | Single heading with configurable level from h1 to h6. | `string` |\n| `paragraph` | Single paragraph rendered inside a p tag. | `string` |\n| `separator` | Horizontal rule used to separate adjacent blocks. | `undefined` |\n| `actions` | Action bar containing button and select action definitions. | `Array<{ type: string; id: string; label: string; variant?: string; options?: Array<string | { label: string; value: string }> }>` |\n\n### Usage Examples\n\n#### `viewer-link`\n\n```typescript\n{\n  type: 'viewer-link',\n  value: {\n    viewerType: 'c4',\n    label: 'Open Interactive C4 Diagram',\n    description: 'Drag, zoom, and pan with ELK auto-layout',\n    icon: '🏗️',\n  },\n}\n```\n\n#### `docs-browser`\n\n```typescript\n{\n  type: 'docs-browser',\n  value: {\n    title: 'Project Docs',\n    files: [\n      { path: 'docs/README.md', title: 'Overview', status: 'current' },\n      { path: 'docs/api.md', title: 'API Reference', status: 'stale' },\n    ],\n  },\n}\n```";
+
+export const BLOCK_TYPE_LIST = "  - type:\"markdown\" → value: string\n  - type:\"code\" → value: string\n  - type:\"mermaid\" → value: string\n  - type:\"table\" → value: Record<string, unknown>[] | { headers: string[]; rows: unknown[][] }\n  - type:\"metrics\" → value: Array<{ label: string; value: string | number; trend?: string | number; status?: string }>\n  - type:\"cards\" → value: Array<{ title: string; body?: string; badge?: string; status?: string; description?: string }>\n  - type:\"tree\" → value: { name: string; children?: unknown[] } | Record<string, unknown>\n  - type:\"graph\" → value: { nodes: Array<{ id: string; label?: string }>; edges: Array<{ from: string; to: string; label?: string }> }\n  - type:\"chart\" → value: { chartType: string; data: Record<string, unknown>[]; xKey: string; yKeys: string[] }\n  - type:\"timeline\" → value: Array<{ title: string; description?: string; timestamp?: string; status?: string }>\n  - type:\"checklist\" → value: Array<{label, checked}> | {items: Array<{label, checked}>}\n  - type:\"comparison\" → value: Array<{title, items}> | {columns: Array<{title, items}>}\n  - type:\"status-board\" → value: Array<{category, items}> | {items: Array<{category, items}>}\n  - type:\"prompt\" → value: unknown\n  - type:\"progress\" → value: {label, value, max?} | {items: Array<{label, value, max?, color?}>}\n  - type:\"viewer-link\" → value: { viewerType: string; label: string; description?: string; url?: string; icon?: string }\n  - type:\"docs-browser\" → value: { files: Array<{ path: string; title?: string; content?: string; status?: \"current\" | \"stale\" | \"missing\" }>; title?: string }\n  - type:\"text\" → value: string\n  - type:\"heading\" → value: string\n  - type:\"paragraph\" → value: string\n  - type:\"separator\" → value: undefined\n  - type:\"actions\" → value: Array<{ type: string; id: string; label: string; variant?: string; options?: Array<string | { label: string; value: string }> }>";
+
+export const BLOCK_DOCS_BY_SKILL = {
+  "present": "| Type | Description | Value Shape |\n|------|-------------|-------------|\n| `markdown` | Markdown content rendered with the marked parser. | `string` |\n| `code` | Formatted code block rendered inside pre/code tags. | `string` |\n| `mermaid` | Mermaid diagram source rendered in a mermaid pre block. | `string` |\n| `table` | Tabular data rendered from records or explicit headers and rows. | `Record<string, unknown>[] | { headers: string[]; rows: unknown[][] }` |\n| `metrics` | Metric cards showing label/value pairs with optional trend and status. | `Array<{ label: string; value: string | number; trend?: string | number; status?: string }>` |\n| `cards` | Card grid for titled items with optional body, badge, and status. | `Array<{ title: string; body?: string; badge?: string; status?: string; description?: string }>` |\n| `tree` | Hierarchical object or name/children tree rendered recursively. | `{ name: string; children?: unknown[] } | Record<string, unknown>` |\n| `graph` | Node and edge graph rendered as a Mermaid flow graph in HTML mode. | `{ nodes: Array<{ id: string; label?: string }>; edges: Array<{ from: string; to: string; label?: string }> }` |\n| `chart` | Structured chart definition rendered as SVG. | `{ chartType: string; data: Record<string, unknown>[]; xKey: string; yKeys: string[] }` |\n| `timeline` | Timeline entries rendered as a vertical sequence of events. | `Array<{ title: string; description?: string; timestamp?: string; status?: string }>` |\n| `checklist` | Checklist items with boolean checked state. | `Array<{label, checked}> | {items: Array<{label, checked}>}` |\n| `comparison` | Side-by-side comparison columns with titled item lists. | `Array<{title, items}> | {columns: Array<{title, items}>}` |\n| `status-board` | Status categories containing labeled status items. | `Array<{category, items}> | {items: Array<{category, items}>}` |\n| `prompt` | Prompt payload rendered through the prompt display helper. | `unknown` |\n| `progress` | Progress bar with current value and optional maximum. | `{label, value, max?} | {items: Array<{label, value, max?, color?}>}` |\n| `viewer-link` | Styled card linking to a standalone interactive viewer. | `{ viewerType: string; label: string; description?: string; url?: string; icon?: string }` |\n| `docs-browser` | Collapsible file tree with markdown content for documentation browsing. | `{ files: Array<{ path: string; title?: string; content?: string; status?: \"current\" | \"stale\" | \"missing\" }>; title?: string }` |\n\n### Usage Examples\n\n#### `viewer-link`\n\n```typescript\n{\n  type: 'viewer-link',\n  value: {\n    viewerType: 'c4',\n    label: 'Open Interactive C4 Diagram',\n    description: 'Drag, zoom, and pan with ELK auto-layout',\n    icon: '🏗️',\n  },\n}\n```\n\n#### `docs-browser`\n\n```typescript\n{\n  type: 'docs-browser',\n  value: {\n    title: 'Project Docs',\n    files: [\n      { path: 'docs/README.md', title: 'Overview', status: 'current' },\n      { path: 'docs/api.md', title: 'API Reference', status: 'stale' },\n    ],\n  },\n}\n```",
+  "docs": "| Type | Description | Value Shape |\n|------|-------------|-------------|\n| `markdown` | Markdown content rendered with the marked parser. | `string` |\n| `code` | Formatted code block rendered inside pre/code tags. | `string` |\n| `mermaid` | Mermaid diagram source rendered in a mermaid pre block. | `string` |\n| `table` | Tabular data rendered from records or explicit headers and rows. | `Record<string, unknown>[] | { headers: string[]; rows: unknown[][] }` |\n| `cards` | Card grid for titled items with optional body, badge, and status. | `Array<{ title: string; body?: string; badge?: string; status?: string; description?: string }>` |\n| `viewer-link` | Styled card linking to a standalone interactive viewer. | `{ viewerType: string; label: string; description?: string; url?: string; icon?: string }` |\n| `docs-browser` | Collapsible file tree with markdown content for documentation browsing. | `{ files: Array<{ path: string; title?: string; content?: string; status?: \"current\" | \"stale\" | \"missing\" }>; title?: string }` |\n\n### Usage Examples\n\n#### `viewer-link`\n\n```typescript\n{\n  type: 'viewer-link',\n  value: {\n    viewerType: 'c4',\n    label: 'Open Interactive C4 Diagram',\n    description: 'Drag, zoom, and pan with ELK auto-layout',\n    icon: '🏗️',\n  },\n}\n```\n\n#### `docs-browser`\n\n```typescript\n{\n  type: 'docs-browser',\n  value: {\n    title: 'Project Docs',\n    files: [\n      { path: 'docs/README.md', title: 'Overview', status: 'current' },\n      { path: 'docs/api.md', title: 'API Reference', status: 'stale' },\n    ],\n  },\n}\n```",
+  "c4-architecture": "| Type | Description | Value Shape |\n|------|-------------|-------------|\n| `mermaid` | Mermaid diagram source rendered in a mermaid pre block. | `string` |\n| `graph` | Node and edge graph rendered as a Mermaid flow graph in HTML mode. | `{ nodes: Array<{ id: string; label?: string }>; edges: Array<{ from: string; to: string; label?: string }> }` |\n| `viewer-link` | Styled card linking to a standalone interactive viewer. | `{ viewerType: string; label: string; description?: string; url?: string; icon?: string }` |\n\n### Usage Examples\n\n#### `viewer-link`\n\n```typescript\n{\n  type: 'viewer-link',\n  value: {\n    viewerType: 'c4',\n    label: 'Open Interactive C4 Diagram',\n    description: 'Drag, zoom, and pan with ELK auto-layout',\n    icon: '🏗️',\n  },\n}\n```"
+};