fix: progressive widget MCP — only register when conversation needs widgets

The codepilot-widget MCP server (added in 0.38) registers an in-process
tool for loading detailed design specs. SDK tool discovery during init
adds overhead to every request, even plain text conversations.

Change to progressive loading: detect widget intent via keywords in the
user prompt, conversation history (show-widget fences), or system prompt.
Only register the MCP server when the conversation likely involves widget
generation.

- Plain text conversations: no MCP server, no overhead (same as v0.37)
- Widget conversations: MCP server registered, full design specs available
- Keywords: 可视化/图表/流程图/visualize/diagram/chart/flowchart etc.
- Conversation history check: existing show-widget output triggers it

Also reverts the WIDGET_SYSTEM_PROMPT_HINT experiment — keeps the full
WIDGET_SYSTEM_PROMPT in system prompt (same as v0.37) since prompt token
count is not the bottleneck.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: 7418

src/__tests__/unit/widget-system.test.ts

@@ -27,7 +27,7 @@ import {
 } from '../../components/chat/MessageItem';
 
 import { WIDGET_CSS_BRIDGE } from '../../lib/widget-css-bridge';
-import { WIDGET_SYSTEM_PROMPT, WIDGET_SYSTEM_PROMPT_HINT, getGuidelines, createWidgetMcpServer } from '../../lib/widget-guidelines';
+import { WIDGET_SYSTEM_PROMPT, getGuidelines, createWidgetMcpServer } from '../../lib/widget-guidelines';
 
 // ── Sanitization ────────────────────────────────────────────────────────
 
@@ -297,23 +297,7 @@ describe('WIDGET_CSS_BRIDGE', () => {
   });
 });
 
-// ── System prompt hint (injected into system prompt) ────────────────────
-
-describe('WIDGET_SYSTEM_PROMPT_HINT', () => {
-  it('references the codepilot_load_widget_guidelines tool', () => {
-    assert.ok(WIDGET_SYSTEM_PROMPT_HINT.includes('codepilot_load_widget_guidelines'));
-  });
-
-  it('is ultra-minimal to reduce per-request token overhead', () => {
-    assert.ok(WIDGET_SYSTEM_PROMPT_HINT.length < 250, `hint should be <250 chars, got ${WIDGET_SYSTEM_PROMPT_HINT.length}`);
-  });
-
-  it('mentions widget capability', () => {
-    assert.ok(WIDGET_SYSTEM_PROMPT_HINT.includes('widget-capability'));
-  });
-});
-
-// ── Full system prompt (loaded on demand via MCP tool) ──────────────────
+// ── System prompt ───────────────────────────────────────────────────────
 
 describe('WIDGET_SYSTEM_PROMPT', () => {
   it('includes show-widget fence format', () => {

src/app/api/chat/route.ts

@@ -330,15 +330,13 @@ Start by greeting the user and asking the first question.
       // CLI tools context injection failed — don't block chat
     }
 
-    // Generative UI: gated by user setting (default: enabled).
-    // Only a short hint is injected into the system prompt — full guidelines
-    // are loaded on-demand via the codepilot-widget MCP tool to save tokens.
+    // Inject widget (generative UI) system prompt — gated by user setting (default: enabled)
     const generativeUISetting = getSetting('generative_ui_enabled');
     const generativeUIEnabled = generativeUISetting !== 'false';
     if (generativeUIEnabled) {
       try {
-        const { WIDGET_SYSTEM_PROMPT_HINT } = await import('@/lib/widget-guidelines');
-        finalSystemPrompt = (finalSystemPrompt || '') + '\n\n' + WIDGET_SYSTEM_PROMPT_HINT;
+        const { WIDGET_SYSTEM_PROMPT } = await import('@/lib/widget-guidelines');
+        finalSystemPrompt = (finalSystemPrompt || '') + '\n\n' + WIDGET_SYSTEM_PROMPT;
       } catch {
         // Widget prompt injection failed — don't block chat
       }

src/lib/claude-client.ts

@@ -445,6 +445,7 @@ export function streamClaude(options: ClaudeStreamOptions): ReadableStream<strin
           console.warn('[claude-client] No API key found: no active provider, no legacy settings, and no ANTHROPIC_API_KEY/ANTHROPIC_AUTH_TOKEN in environment');
         }
 
+
         // Check if dangerously_skip_permissions is enabled globally or per-session
         const globalSkip = getSetting('dangerously_skip_permissions') === 'true';
         const skipPermissions = globalSkip || !!sessionBypassPermissions;
@@ -509,15 +510,32 @@ export function streamClaude(options: ClaudeStreamOptions): ReadableStream<strin
           queryOptions.mcpServers = toSdkMcpConfig(mcpServers);
         }
 
-        // Widget guidelines: in-process MCP server for on-demand loading.
-        // Model calls codepilot_load_widget_guidelines before generating widgets.
+        // Widget guidelines: progressive loading strategy.
+        // The system prompt always includes WIDGET_SYSTEM_PROMPT with format rules.
+        // The MCP server (detailed design specs) is only registered when the
+        // conversation likely involves widget generation — detected by keywords in
+        // the user's prompt or existing show-widget output in conversation history.
+        // This avoids SDK tool discovery overhead (~1s) on plain text conversations.
         if (generativeUI !== false) {
-          const { createWidgetMcpServer } = await import('@/lib/widget-guidelines');
-          const widgetServer = createWidgetMcpServer();
-          queryOptions.mcpServers = {
-            ...(queryOptions.mcpServers || {}),
-            'codepilot-widget': widgetServer,
-          };
+          const needsWidgetSpecs = (() => {
+            const widgetKeywords = /可视化|图表|流程图|时间线|架构图|对比|visualiz|diagram|chart|flowchart|timeline|infographic|interactive|widget|show-widget|hierarchy|dashboard/i;
+            // Check current prompt
+            if (widgetKeywords.test(prompt)) return true;
+            // Check if conversation already has widgets (resume context)
+            if (conversationHistory?.some(m => m.content.includes('show-widget'))) return true;
+            // Check system prompt for image/widget agent mode
+            if (systemPrompt && widgetKeywords.test(systemPrompt)) return true;
+            return false;
+          })();
+
+          if (needsWidgetSpecs) {
+            const { createWidgetMcpServer } = await import('@/lib/widget-guidelines');
+            const widgetServer = createWidgetMcpServer();
+            queryOptions.mcpServers = {
+              ...(queryOptions.mcpServers || {}),
+              'codepilot-widget': widgetServer,
+            };
+          }
         }
 
         // Pass through SDK-specific options from ClaudeStreamOptions
@@ -806,7 +824,6 @@ export function streamClaude(options: ClaudeStreamOptions): ReadableStream<strin
         let tokenUsage: TokenUsage | null = null;
         // Track pending TodoWrite tool_use_ids so we can sync after successful execution
         const pendingTodoWrites = new Map<string, Array<{ content: string; status: string; activeForm?: string }>>();
-
         for await (const message of conversation) {
           if (abortController?.signal.aborted) {
             break;

src/lib/widget-guidelines.ts

@@ -4,23 +4,15 @@
  * Based on Anthropic's actual generative UI guidelines extracted from claude.ai,
  * adapted for CodePilot's code-fence trigger mechanism and CSS variable bridge.
  *
- * WIDGET_SYSTEM_PROMPT_HINT is a tiny capability declaration (~30 tokens),
- * always injected into the system prompt when generative UI is enabled.
- * The full WIDGET_SYSTEM_PROMPT (format + rules) and detailed module guidelines
- * are loaded on demand via the `codepilot_load_widget_guidelines` MCP tool,
- * saving ~90% system prompt tokens on conversations that don't involve widgets.
+ * The WIDGET_SYSTEM_PROMPT is a minimal capability declaration (~150 tokens),
+ * always injected into the system prompt. Full module guidelines are loaded
+ * on demand via the `codepilot_load_widget_guidelines` in-process MCP tool.
  */
 
 import { createSdkMcpServer, tool } from '@anthropic-ai/claude-agent-sdk';
 import { z } from 'zod';
 
-// ── System prompt hint (always injected — ultra-minimal) ────────────────────
-
-export const WIDGET_SYSTEM_PROMPT_HINT = `<widget-capability>
-You can create interactive visualizations. Call \`codepilot_load_widget_guidelines\` before generating your first widget to load the required format and design specs.
-</widget-capability>`;
-
-// ── Full widget rules (loaded on demand via MCP tool) ───────────────────────
+// ── System prompt (always injected — minimal version) ───────────────────────
 
 export const WIDGET_SYSTEM_PROMPT = `<widget-capability>
 You can create interactive visualizations using the \`show-widget\` code fence.
@@ -263,7 +255,7 @@ export function createWidgetMcpServer() {
         'Load detailed design guidelines for generating visual widgets. Call this before generating your first widget. Available modules: interactive (HTML controls), chart (Chart.js), mockup (UI mockups), art (SVG illustrations), diagram (flowcharts/timelines/hierarchies).',
         { modules: z.array(z.enum(['interactive', 'chart', 'mockup', 'art', 'diagram'])) },
         async ({ modules }) => ({
-          content: [{ type: 'text' as const, text: WIDGET_SYSTEM_PROMPT + '\n\n' + getGuidelines(modules) }],
+          content: [{ type: 'text' as const, text: getGuidelines(modules) }],
         }),
       ),
     ],