@vpxa/aikit 0.1.155 → 0.1.157

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.
@@ -7,6 +7,8 @@ const e=()=>"**`AGENTS.md` is already in your context** — do NOT re-read it. J
7
7
  3. Read \`aikit\` skill, check \`AGENTS.md\` (decision protocol and FORGE protocol are inlined below)
8
8
  4. Read \`multi-agents-development\` skill — **REQUIRED before any delegation**
9
9
 
10
+ > **HARD RULE (Orchestrator):** When gathering context yourself (not via subagent), follow AI Kit Tool Discipline — use \`search\`/\`file_summary\`/\`compact\`/\`digest\`, NOT \`read_file\`/\`grep_search\`. Use \`check({})\`/\`test_run({})\`, NOT \`run_in_terminal\` for tsc/lint/test.
11
+
10
12
  ## Agent Arsenal
11
13
 
12
14
  ${e}
@@ -378,6 +380,8 @@ The Planner is typically activated by the Orchestrator as part of a flow step (e
378
380
  | \`repo-access\` | When the plan involves accessing private, enterprise, or self-hosted repositories |
379
381
  | \`browser-use\` | When the plan involves browser-based auth recovery, web scraping, or interacting with web applications that require login |`,Implementer:`${e()}
380
382
 
383
+ > **HARD RULE:** NEVER use \`read_file\` to understand code. Use \`file_summary\`/\`compact\`/\`digest\`. \`read_file\` is ONLY for exact edit lines. NEVER use \`run_in_terminal\` for tsc/lint/test — use \`check({})\`/\`test_run({})\`.
384
+
381
385
  ## Implementation Protocol
382
386
 
383
387
  1. **Understand scope** — Read the phase objective, identify target files
@@ -431,6 +435,8 @@ Every implementation response MUST end with a structured status block:
431
435
  - Description of blocker
432
436
  \`\`\``,Frontend:`${e()}
433
437
 
438
+ > **HARD RULE:** NEVER use \`read_file\` to understand code. Use \`file_summary\`/\`compact\`/\`digest\`. \`read_file\` is ONLY for exact edit lines. NEVER use \`run_in_terminal\` for tsc/lint/test — use \`check({})\`/\`test_run({})\`.
439
+
434
440
  ## Frontend Protocol
435
441
 
436
442
  0. **Check for DESIGN.md** — Look for \`DESIGN.md\` in the workspace root or \`docs/\` directory. If found, read it first — it defines the project's design system, tokens, colors, typography, spacing, and component conventions. Follow it as the authoritative design reference.
@@ -478,6 +484,8 @@ Every implementation response MUST end with a structured status block:
478
484
  If the pre-flight dev server cannot be started (e.g. sandbox), fall back to
479
485
  \`compact\` inspection of the component source + describe expected visual behavior.`,Debugger:`${e()}
480
486
 
487
+ > **HARD RULE:** NEVER use \`read_file\` to understand code. Use \`file_summary\`/\`compact\`/\`digest\`. \`read_file\` is ONLY for exact edit lines. NEVER use \`run_in_terminal\` for tsc/lint/test — use \`check({})\`/\`test_run({})\`.
488
+
481
489
  ## Debugging Protocol
482
490
 
483
491
  ### Phase 1: Build the Right Feedback Loop
@@ -553,6 +561,8 @@ When debugging tool invocation issues, use the replay audit trail with traceId:
553
561
  - Server middleware context (\`ctx.requestId\`)
554
562
  4. Filter by traceId: search replay.jsonl for the specific UUID to trace the full invocation lifecycle`,Refactor:`${e()}
555
563
 
564
+ > **HARD RULE:** NEVER use \`read_file\` to understand code. Use \`file_summary\`/\`compact\`/\`digest\`. \`read_file\` is ONLY for exact edit lines. NEVER use \`run_in_terminal\` for tsc/lint/test — use \`check({})\`/\`test_run({})\`.
565
+
556
566
  ## Refactoring Protocol
557
567
 
558
568
  1. **AI Kit Recall** — Search for established patterns and conventions
@@ -27,13 +27,13 @@ ${e===`<PROFILE>`?`**Profile:** Check your role → implementer | documenter | r
27
27
  You may be invoked in two modes:
28
28
  1. **Direct** — you have full AI Kit tool access. Follow the **Information Lookup Order** below.
29
29
  2. **Sub-agent** (via Orchestrator) — you may have limited MCP tool access.
30
- The Orchestrator provides context under "## Prior AI Kit Context" in your prompt.
30
+ The Orchestrator provides context under "## Prior AI Kit Context" or "### Current Code Context" in your prompt.
31
31
  If present, skip AI Kit Recall and use the provided context instead.
32
32
  **Visual Output:** When running as a sub-agent, do NOT use the \`present\` tool (output won't reach the user).
33
33
  Instead, include structured data (tables, findings, metrics) as formatted text in your final response.
34
34
  The Orchestrator will re-present relevant content to the user.
35
35
 
36
- **Detection:** If your prompt contains "## Prior AI Kit Context", you are in sub-agent mode.
36
+ **Detection:** If your prompt contains "## Prior AI Kit Context" OR "### Current Code Context" OR was dispatched via \`runSubagent\`, you are in sub-agent mode. When in sub-agent mode, use provided context — do NOT re-read files already given in your prompt.
37
37
 
38
38
  ---
39
39
 
@@ -54,6 +54,61 @@ You may be invoked in two modes:
54
54
 
55
55
  ---
56
56
 
57
+ ## AI Kit Tool Discipline
58
+
59
+ Use AI Kit retrieval and compression tools first. Prefer reusable compressed context over raw reads, and only drop to native tools when precision for an edit or tool fallback requires it.
60
+
61
+ | NEVER use this | USE THIS instead | Why |
62
+ |---|---|---|
63
+ | \`read_file\` to understand a file | \`file_summary({ path })\` | Structure, exports, imports — 10x fewer tokens |
64
+ | \`read_file\` to find specific code | \`compact({ path, query })\` | Server-side read + semantic extract — 5-20x reduction |
65
+ | Multiple \`read_file\` calls | \`digest({ sources })\` | Compresses multiple files into token-budgeted summary |
66
+ | \`grep_search\` / \`semantic_search\` | \`search({ query })\` | Hybrid search across all indexed + curated content |
67
+ | \`grep_search\` for a symbol name | \`symbol({ name })\` | Definition + references with scope and call context |
68
+ | \`run_in_terminal\` for tsc/lint | \`check({})\` | Typecheck + lint combined, summary output |
69
+ | \`run_in_terminal\` for test | \`test_run({})\` | Run tests with structured output |
70
+ | Editing without reading | \`file_summary\` then targeted \`read_file\` | Prevents wrong-position edits |
71
+
72
+ **\`read_file\` is ONLY acceptable when you need exact line content FOR EDITING (before \`replace_string_in_file\`).**
73
+
74
+ For edits, first understand structure with \`file_summary\` or \`compact\`, then use targeted \`read_file\` only for the exact region.
75
+ Never patch from search snippets or assumptions alone.
76
+
77
+ ## compact() Failure Recovery
78
+
79
+ If \`compact()\` returns <200 bytes or empty content, the file is NOT indexed. Follow this fallback:
80
+
81
+ 1. **Do NOT retry** compact on the same file — it will fail again
82
+ 2. **Use \`read_file\`** with a LARGE range (e.g., \`startLine: 1, endLine: 9999\`) — NEVER chunk into small ranges
83
+ 3. **Use \`stash()\`** to cache findings from unindexed files — context pressure causes re-reads
84
+ 4. **Check \`status()\`** to see which paths are indexed before calling compact
85
+
86
+ **Anti-patterns to avoid:**
87
+ - Retrying compact 3x on same unindexed file (wastes 3 tool calls)
88
+ - Falling back to read_file in small chunks (10-50 lines) — each chunk costs ~3K prompt tokens in overhead
89
+ - Re-reading the same file later because you forgot the content — use stash() to cache
90
+
91
+ *Why:* these tools reduce token cost, shrink duplicate reads, and lower the odds of wrong-file or wrong-position edits while preserving reusable context.
92
+
93
+ ---
94
+
95
+ ## Context Caching (MANDATORY for multi-step tasks)
96
+
97
+ After your first \`file_summary\` or \`compact\` call on a file, cache the result:
98
+ \`\`\`
99
+ stash({ action: 'set', key: 'ctx:<filename>', value: '<summary result>' })
100
+ \`\`\`
101
+
102
+ Before reading the same file again, check the cache:
103
+ \`\`\`
104
+ stash({ action: 'get', key: 'ctx:<filename>' })
105
+ \`\`\`
106
+
107
+ If cached → use it. If not → call \`file_summary\`/\`compact\` and cache.
108
+ **NEVER \`read_file\` the same file twice** without checking stash first.
109
+
110
+ ---
111
+
57
112
 
58
113
  ## Domain Skills
59
114
 
@@ -262,44 +317,6 @@ For outdated AI Kit entries → \`knowledge({ action: "update", path, content, r
262
317
 
263
318
  ---
264
319
 
265
- ## AI Kit Tool Discipline
266
-
267
- Use AI Kit retrieval and compression tools first. Prefer reusable compressed context over raw reads, and only drop to native tools when precision for an edit or tool fallback requires it.
268
-
269
- | NEVER use this | USE THIS instead | Why |
270
- |---|---|---|
271
- | \`read_file\` to understand a file | \`file_summary({ path })\` | Structure, exports, imports — 10x fewer tokens |
272
- | \`read_file\` to find specific code | \`compact({ path, query })\` | Server-side read + semantic extract — 5-20x reduction |
273
- | Multiple \`read_file\` calls | \`digest({ sources })\` | Compresses multiple files into token-budgeted summary |
274
- | \`grep_search\` / \`semantic_search\` | \`search({ query })\` | Hybrid search across all indexed + curated content |
275
- | \`grep_search\` for a symbol name | \`symbol({ name })\` | Definition + references with scope and call context |
276
- | \`run_in_terminal\` for tsc/lint | \`check({})\` | Typecheck + lint combined, summary output |
277
- | \`run_in_terminal\` for test | \`test_run({})\` | Run tests with structured output |
278
- | Editing without reading | \`file_summary\` then targeted \`read_file\` | Prevents wrong-position edits |
279
-
280
- **\`read_file\` is ONLY acceptable when you need exact line content FOR EDITING (before \`replace_string_in_file\`).**
281
-
282
- For edits, first understand structure with \`file_summary\` or \`compact\`, then use targeted \`read_file\` only for the exact region.
283
- Never patch from search snippets or assumptions alone.
284
-
285
- ## compact() Failure Recovery
286
-
287
- If \`compact()\` returns <200 bytes or empty content, the file is NOT indexed. Follow this fallback:
288
-
289
- 1. **Do NOT retry** compact on the same file — it will fail again
290
- 2. **Use \`read_file\`** with a LARGE range (e.g., \`startLine: 1, endLine: 9999\`) — NEVER chunk into small ranges
291
- 3. **Use \`stash()\`** to cache findings from unindexed files — context pressure causes re-reads
292
- 4. **Check \`status()\`** to see which paths are indexed before calling compact
293
-
294
- **Anti-patterns to avoid:**
295
- - Retrying compact 3x on same unindexed file (wastes 3 tool calls)
296
- - Falling back to read_file in small chunks (10-50 lines) — each chunk costs ~3K prompt tokens in overhead
297
- - Re-reading the same file later because you forgot the content — use stash() to cache
298
-
299
- *Why:* these tools reduce token cost, shrink duplicate reads, and lower the odds of wrong-file or wrong-position edits while preserving reusable context.
300
-
301
- ---
302
-
303
320
  ## Guidelines
304
321
 
305
322
  Behavioral guidelines to reduce common LLM coding mistakes. Apply when writing, reviewing, or refactoring code.
@@ -15,11 +15,11 @@ argument-hint: "Content to present — data, analysis results, status report, co
15
15
 
16
16
  ## Quick Reference
17
17
 
18
- **Two formats:**
19
- - \`html\` — in-chat UIResource (display-only: tables, charts, reports). DEFAULT choice.
20
- - \`browser\` local URL in system browser (when you need user interaction back, or in CLI mode).
18
+ **Transport rule:**
19
+ - No \`actions\` array renders inline as an MCP App surface in the host client.
20
+ - \`actions\` array present switches to browser transport and opens the system browser.
21
21
 
22
- **Content blocks** (pass as \`content\` array of \`{ type, title?, value }\`):
22
+ **Content blocks** (pass as \`blocks\` array of \`{ type, title?, value }\`):
23
23
  | Type | Value shape | Use for |
24
24
  |------|-------------|---------|
25
25
  | \`markdown\` | string | Prose, headings, code — **never tables** |
@@ -33,58 +33,57 @@ argument-hint: "Content to present — data, analysis results, status report, co
33
33
  | \`checklist\` | \`[{label,checked}]\` | Todo/check lists |
34
34
  | \`code\` | string | Code blocks |
35
35
 
36
- **Actions** (interactive buttons/selects, mainly for \`browser\` mode):
36
+ **Actions** (interactive buttons/selects; adding them switches transport to browser):
37
37
  \`\`\`json
38
38
  { "actions": [{ "type": "button", "id": "approve", "label": "Approve", "variant": "primary" }] }
39
39
  \`\`\`
40
40
 
41
41
  **Anti-patterns:**
42
42
  - ❌ Tables inside \`markdown\` blocks → renders as raw pipe text
43
- - ❌ \`html\` format in CLI mode invisible (use \`browser\`)
43
+ - ❌ Assuming a \`format\` field exists transport is inferred from \`actions\`
44
44
  - ❌ Unicode escapes in \`title\` param (\`\\u2014\`) → literal text (use actual — character)
45
45
  - ❌ Chart.js format (\`{labels,datasets}\`) → use \`{chartType,data,xKey,yKeys}\`
46
46
 
47
- The \`present\` tool renders structured content as a professional dark-themed dashboard. It supports two output modes:
47
+ The \`present\` tool renders structured content as a professional dark-themed dashboard. Transport is determined automatically:
48
48
 
49
- - **\`html\`** Renders an embedded UIResource for MCP-UI hosts (in-chat). Best for display-only content.
50
- - **\`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.
49
+ - **Inline MCP App transport** No \`actions\`. Best for display-only content rendered inline in the host client.
50
+ - **Browser transport** \`actions\` present. Best when you need user interaction or full-page rendering outside the chat surface.
51
51
 
52
- ## Format Selection Rules (MUST FOLLOW)
52
+ ## Transport Selection Rules (MUST FOLLOW)
53
53
 
54
- | Situation | Format | Why |
55
- |-----------|--------|-----|
56
- | Display-only content (tables, charts, reports, status boards) | **\`html\`** | No interaction needed — render in-chat |
57
- | Need user input back (confirmations, selections, form data) | **\`browser\`** | Browser supports blocking actions that return data |
58
- | Rich visual dashboards without interaction | **\`html\`** | Prefer in-chat when no response is needed |
59
- | User explicitly asks for browser | **\`browser\`** | Respect explicit preference |
60
- | **Running in CLI mode** (no IDE 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. |
54
+ | Situation | Include \`actions\`? | Transport | Why |
55
+ |-----------|----------------------|-----------|-----|
56
+ | Display-only content (tables, charts, reports, status boards) | **No** | **Inline MCP App** | No interaction needed — render inline in the host client |
57
+ | Need user input back (confirmations, selections, form data) | **Yes** | **Browser** | Actions trigger browser transport and return structured results |
58
+ | Rich visual dashboards without interaction | **No** | **Inline MCP App** | Keep the result in-chat when no response is needed |
59
+ | User explicitly asks for browser | **Yes** | **Browser** | Add at least one action to force browser transport |
60
+ | **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 |
61
61
 
62
- **Rule: If no user interaction is needed, use \`format: "html"\`. If you need user interaction, use \`format: "browser"\`.**
62
+ **Rule: Omit \`actions\` for inline rendering. Add \`actions\` when you need browser transport or interaction back from the user.**
63
63
 
64
- > **⚠️ CLI Mode Override:** When running in CLI mode (terminal, not IDE chat), **always use \`format: "browser"\`** regardless of whether interaction is needed. The \`html\` format relies on UIResource rendering in the IDE's chat 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 any environment.
64
+ > **⚠️ 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.
65
65
 
66
66
  ---
67
67
 
68
- ## Browser Workflow (IMPORTANT — read carefully)
68
+ ## Browser Transport Workflow (IMPORTANT — read carefully)
69
69
 
70
- 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.
70
+ 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.
71
71
 
72
72
  ### Steps:
73
- 1. Call \`present\` with \`format: "browser"\` and \`actions\` — it returns text containing \`🌐 **Dashboard opened in browser:** http://127.0.0.1:{port}\`
74
- 2. **Extract the URL from the response**
75
- 3. **Call \`browser({ action: 'open', url: 'http://127.0.0.1:{port}', mode: 'ui' })\` - AI Kit browser tool to open it in the integrated browser**
73
+ 1. Call \`present\` with \`actions\` and your \`blocks\`
74
+ 2. Let the tool open the browser transport automatically
75
+ 3. Wait for the user's action result before continuing
76
76
 
77
77
  \`\`\`
78
- // Step 1: Call present
79
- result = present({ format: "browser", title: "...", content: [...], actions: [...] })
80
-
81
- // Step 2: MUST open in integrated browser
82
- browser({ action: 'open', url: 'http://127.0.0.1:{port}', mode: 'ui' }) // AI Kit browser tool - opens URL in the integrated browser
78
+ result = present({
79
+ schemaVersion: 1,
80
+ title: "Review Dashboard",
81
+ blocks: [...],
82
+ actions: [{ id: "ack", type: "button", label: "Acknowledge" }]
83
+ })
83
84
  \`\`\`
84
85
 
85
- > **Fallback**: The server also auto-opens the system browser as a safety net. But you should ALWAYS call \`browser({ action: 'open' })\` via the AI Kit browser tool yourself so the user sees it in their environment.
86
-
87
- **Note:** The HTTP server auto-closes after 5 minutes. Open the page promptly after receiving the URL.
86
+ > **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.
88
87
 
89
88
  ---
90
89
 
@@ -116,13 +115,13 @@ Actions are interactive buttons/selects. In \`browser\` mode, they render as cli
116
115
 
117
116
  ## Composition Pattern
118
117
 
119
- Compose a full dashboard by combining multiple blocks in the \`content\` array:
118
+ Compose a full dashboard by combining multiple blocks in the \`blocks\` array:
120
119
 
121
120
  \`\`\`json
122
121
  {
123
- "format": "browser",
122
+ "schemaVersion": 1,
124
123
  "title": "Sprint Review",
125
- "content": [
124
+ "blocks": [
126
125
  { "type": "metrics", "title": "Key Metrics", "value": [...] },
127
126
  { "type": "chart", "title": "Velocity", "value": { "chartType": "area", ... } },
128
127
  { "type": "timeline", "title": "Milestones", "value": { "items": [...] } },
@@ -151,15 +150,15 @@ The dashboard uses a professional dark theme:
151
150
 
152
151
  ## Architecture Diagrams
153
152
 
154
- > **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.
153
+ > **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.
155
154
 
156
- 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.
155
+ 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.
157
156
 
158
157
  **Design system source:** \`c4-architecture/references/html-design-system.md\` (single source of truth for all architecture diagram styling)
159
158
 
160
159
  ### When to Use (Auto-Trigger)
161
160
 
162
- Load the \`c4-architecture\` skill and use HTML/SVG format when the user:
161
+ Load the \`c4-architecture\` skill and use the HTML/SVG approach when the user:
163
162
  - Asks to "show architecture", "present the system design", "visualize infrastructure"
164
163
  - Wants to display service topology, deployment layout, or component relationships
165
164
  - Requests architecture review output, system overview dashboards, or technical presentations
@@ -167,19 +166,19 @@ Load the \`c4-architecture\` skill and use HTML/SVG format when the user:
167
166
 
168
167
  ### Rendering Methods
169
168
 
170
- | Method | Block Type | Format | When to Use |
171
- |--------|-----------|--------|-------------|
172
- | Mermaid C4 | \`mermaid\` | html / browser | Quick diagrams, developer-focused, version-controlled |
173
- | HTML/SVG | \`markdown\` | html / browser | Rich visual presentations, stakeholder reviews, dark-themed dashboards |
169
+ | Method | Block Type | Transport | When to Use |
170
+ |--------|-----------|-----------|-------------|
171
+ | Mermaid C4 | \`mermaid\` | Inline by default, browser if \`actions\` are present | Quick diagrams, developer-focused, version-controlled |
172
+ | HTML/SVG | \`markdown\` | Inline by default, browser if \`actions\` are present | Rich visual presentations, stakeholder reviews, dark-themed dashboards |
174
173
 
175
174
  ### Method 1: Mermaid C4 Diagrams
176
175
 
177
176
  Use a \`mermaid\` content block with standard C4 Mermaid syntax:
178
177
 
179
178
  present({
180
- format: "html", // or "browser"
179
+ schemaVersion: 1,
181
180
  title: "System Architecture",
182
- content: [
181
+ blocks: [
183
182
  {
184
183
  type: "mermaid",
185
184
  title: "C4 Container Diagram",
@@ -194,32 +193,32 @@ present({
194
193
 
195
194
  ## Rendering Troubleshooting
196
195
 
197
- ### Why \`html\` format sometimes shows raw text
196
+ ### Why inline MCP App rendering sometimes shows raw text
198
197
 
199
- 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.
198
+ 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.
200
199
 
201
200
  **Common causes of UIResource rendering failure:**
202
- 1. **MCP Apps not enabled** — The setting \`chat.mcp.apps.enabled\` must be \`true\` in VS Code settings
201
+ 1. **MCP Apps not enabled** — The host client must support MCP Apps (e.g., \`chat.mcp.apps.enabled\` in VS Code)
203
202
  2. **Companion app build missing** — The \`packages/present\` companion app must be built (\`npm run build\`)
204
203
  3. **Content too large** — Very large content arrays (20+ blocks or tables with 50+ rows) may cause the companion iframe to fail silently
205
204
  4. **Iframe loading error** — Network issues, CSP restrictions, or extension conflicts can prevent the iframe from loading
206
205
 
207
- ### When to prefer \`browser\` over \`html\`
206
+ ### When to use browser transport instead of inline rendering
208
207
 
209
- Use \`format: "browser"\` instead of \`html\` when:
210
- - Content has **10+ blocks** or tables with **20+ rows** (large payloads are more reliable in browser)
211
- - The output must be **guaranteed visible** (browser format always opens, no silent failures)
212
- - You need **charts + tables + markdown** in the same view (browser renders all block types reliably)
213
- - The user reports that \`html\` format "didn't show anything" or "showed raw text"
208
+ Add \`actions\` to force browser transport when:
209
+ - Content has **10+ blocks** or tables with **20+ rows** (large payloads are often easier to review in a full page)
210
+ - The output must be **guaranteed visible outside the IDE chat panel**
211
+ - You need **charts + tables + markdown** in the same view and inline rendering is failing
212
+ - The user reports that the inline surface "didn't show anything" or only showed fallback text
214
213
 
215
- > **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.
214
+ > **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.
216
215
 
217
216
  ### Content formatting tips to avoid rendering issues
218
217
 
219
218
  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
220
219
  2. **Use \`cards\` and \`metrics\`** for summary data instead of embedding it in markdown text
221
220
  3. **Keep \`markdown\` blocks for narrative text only** — don't embed HTML, tables, or complex formatting
222
- 4. **Split large content** into multiple smaller \`present\` calls rather than one massive content array
221
+ 4. **Split large content** into multiple smaller \`present\` calls rather than one massive \`blocks\` array
223
222
  5. **For charts:** Always use ChartValue format (\`chartType\`, \`data\`, \`xKey\`, \`yKeys\`) — NOT Chart.js format (\`labels\`, \`datasets\`)
224
223
 
225
224
  ---
@@ -244,13 +243,13 @@ Use \`format: "browser"\` instead of \`html\` when:
244
243
 
245
244
  For rich visual output, embed the full HTML/SVG diagram in a \`markdown\` block. Compose with \`metrics\` and \`cards\` blocks for a complete dashboard.
246
245
 
247
- **Both \`format: "html"\` and \`format: "browser"\` work with this approach.**
246
+ **This approach works inline by default. Add \`actions\` only when you need browser transport.**
248
247
 
249
248
  \`\`\`js
250
249
  present({
251
- format: "html", // or "browser"
250
+ schemaVersion: 1,
252
251
  title: "System Architecture",
253
- content: [
252
+ blocks: [
254
253
  {
255
254
  type: "metrics",
256
255
  title: "Overview",
@@ -299,7 +298,7 @@ The full type registry with sub-types and icon slots is in \`c4-architecture/ref
299
298
 
300
299
  ## Best Practices
301
300
 
302
- 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).
301
+ 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.
303
302
  2. **Combine block types** — metrics + charts + tables in one page
304
303
  3. **Add titles** to every block for clear section headings
305
304
  4. **Use actions** when you need user decisions — the tool returns the selection
@@ -315,49 +314,49 @@ The full type registry with sub-types and icon slots is in \`c4-architecture/ref
315
314
 
316
315
  ## Rendering Troubleshooting
317
316
 
318
- ### Why \`html\` format sometimes shows raw text
317
+ ### Why inline MCP App rendering sometimes shows raw text
319
318
 
320
- 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.
319
+ 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.
321
320
 
322
321
  **Common causes of UIResource rendering failure:**
323
- 1. **MCP Apps not enabled** — The setting \`chat.mcp.apps.enabled\` must be \`true\` in VS Code settings
322
+ 1. **MCP Apps not enabled** — The host client must support MCP Apps (e.g., \`chat.mcp.apps.enabled\` in VS Code)
324
323
  2. **Companion app build missing** — The \`packages/present\` companion app must be built (\`npm run build\`)
325
324
  3. **Content too large** — Very large content arrays (20+ blocks or tables with 50+ rows) may cause the companion iframe to fail silently
326
325
  4. **Iframe loading error** — Network issues, CSP restrictions, or extension conflicts can prevent the iframe from loading
327
326
 
328
- ### When to prefer \`browser\` over \`html\`
327
+ ### When to use browser transport instead of inline rendering
329
328
 
330
- Use \`format: "browser"\` instead of \`html\` when:
331
- - Content has **10+ blocks** or tables with **20+ rows** (large payloads are more reliable in browser)
332
- - The output must be **guaranteed visible** (browser format always opens, no silent failures)
333
- - You need **charts + tables + markdown** in the same view (browser renders all block types reliably)
334
- - The user reports that \`html\` format "didn't show anything" or "showed raw text"
329
+ Add \`actions\` to force browser transport when:
330
+ - Content has **10+ blocks** or tables with **20+ rows** (large payloads are often easier to review in a full page)
331
+ - The output must be **guaranteed visible outside the IDE chat panel**
332
+ - You need **charts + tables + markdown** in the same view and inline rendering is failing
333
+ - The user reports that the inline surface "didn't show anything" or only showed fallback text
335
334
 
336
- > **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.
335
+ > **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.
337
336
 
338
337
  ### Content formatting tips to avoid rendering issues
339
338
 
340
339
  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
341
340
  2. **Use \`cards\` and \`metrics\`** for summary data instead of embedding it in markdown text
342
341
  3. **Keep \`markdown\` blocks for narrative text only** — don't embed HTML, tables, or complex formatting
343
- 4. **Split large content** into multiple smaller \`present\` calls rather than one massive content array
342
+ 4. **Split large content** into multiple smaller \`present\` calls rather than one massive \`blocks\` array
344
343
  5. **For charts:** Always use ChartValue format (\`chartType\`, \`data\`, \`xKey\`, \`yKeys\`) — NOT Chart.js format (\`labels\`, \`datasets\`)
345
344
 
346
345
  ---
347
346
 
348
- ## MCP Apps Templates (VS Code Chat Widgets)
347
+ ## MCP Apps Templates
349
348
 
350
- 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.
349
+ 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.
351
350
 
352
- **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.
351
+ **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.
353
352
 
354
353
  ### When to use MCP Apps vs Browser Dashboard
355
354
 
356
355
  | Use Case | Mode | Why |
357
356
  |----------|------|-----|
358
357
  | Quick user input (pick items, reorder, fill form) | **MCP App template** | Inline in chat, no context switch |
359
- | Rich multi-section dashboard with charts | **browser** | Full page layout with all block types |
360
- | Simple confirmation or selection | **Actions** (browser/html) | Buttons/selects in dashboard |
358
+ | Rich multi-section dashboard with charts | **Browser transport** | Add \`actions\` for a full page layout |
359
+ | Simple confirmation or selection | **Actions-enabled surface** | Adding \`actions\` switches transport to browser |
361
360
 
362
361
  ### Template: \`list-sort\`
363
362
 
@@ -367,7 +366,7 @@ Drag-and-drop reorderable list. Use for priority ordering, task sequencing, or r
367
366
  {
368
367
  "template": "list-sort",
369
368
  "title": "Priority Order",
370
- "content": {
369
+ "data": {
371
370
  "items": [
372
371
  { "id": "task-1", "label": "Fix authentication bug" },
373
372
  { "id": "task-2", "label": "Add search feature" },
@@ -388,7 +387,7 @@ Filterable, sortable table with optional summary stat cards. Use for structured
388
387
  {
389
388
  "template": "data-table",
390
389
  "title": "File Changes",
391
- "content": {
390
+ "data": {
392
391
  "columns": [
393
392
  { "key": "file", "label": "File" },
394
393
  { "key": "change", "label": "Change" },
@@ -417,7 +416,7 @@ Multi-select with categories and tag-based search. Use for component selection,
417
416
  {
418
417
  "template": "picker",
419
418
  "title": "Select Modules",
420
- "content": {
419
+ "data": {
421
420
  "categories": [
422
421
  { "id": "core", "label": "Core" },
423
422
  { "id": "plugins", "label": "Plugins" }
@@ -442,7 +441,7 @@ Hierarchical zoomable visualization. Use for codebase structure, performance pro
442
441
  {
443
442
  "template": "flame-graph",
444
443
  "title": "Module Hierarchy",
445
- "content": {
444
+ "data": {
446
445
  "profile": {
447
446
  "name": "root",
448
447
  "total": 100,
@@ -473,7 +472,7 @@ Input fields with text inputs, selects, and checkboxes. Use for configuration, p
473
472
  {
474
473
  "template": "form",
475
474
  "title": "Project Configuration",
476
- "content": {
475
+ "data": {
477
476
  "fields": [
478
477
  { "name": "projectName", "label": "Project Name", "type": "text", "value": "my-app" },
479
478
  { "name": "framework", "label": "Framework", "type": "select", "options": ["React", "Vue", "Svelte"], "value": "React" },