fix: v0.38 regression fixes — stale state, perf, status, model chain

7418 · claude · 7418 · commit 303facb00cb2 · 2026-03-16T19:21:53.000+08:00
Bucket 1: Windows stale localStorage crash (#300) - chat/page.tsx: add one-time migration (codepilot:migration-038) that clears stale last-model/last-provider-id on upgrade from <0.38 - chat/page.tsx: startup useEffect validates restored provider/model against actual available data, falls back gracefully - chat/page.tsx: provider-changed handler re-validates from API Bucket 2: Mac chat slowness — Generative UI overhead (#299) - widget-guidelines.ts: add WIDGET_SYSTEM_PROMPT_HINT (~180 chars) to replace full WIDGET_SYSTEM_PROMPT (~1000 chars) in system prompt - chat/route.ts: inject hint instead of full prompt — model loads full guidelines on-demand via codepilot-widget MCP tool - widget-guidelines.ts: MCP tool response now includes format rules so nothing is lost when system prompt is shortened - ~85% reduction in per-request system prompt overhead Bucket 3: Windows Claude status false negative - claude-status/route.ts: connected = !!version (not gated on Git Bash) - claude-status/route.ts: add warnings[] array for non-blocking issues - ConnectionStatus.tsx: Git Bash missing shows warning-yellow badge instead of error-red disconnected - ClaudeCodeCard.tsx: updated type for warnings field Bucket 4: Provider/model chain gaps (#301, #296) - providers/models/route.ts: synthesize model entries from all role_models_json fields (default/reasoning/small/haiku/sonnet/opus) so they appear in the chat picker - provider-doctor.ts: new finding provider.no-models warns when a provider has zero available models Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
diff --git a/src/__tests__/unit/widget-system.test.ts b/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, getGuidelines, createWidgetMcpServer } from '../../lib/widget-guidelines';
+import { WIDGET_SYSTEM_PROMPT, WIDGET_SYSTEM_PROMPT_HINT, getGuidelines, createWidgetMcpServer } from '../../lib/widget-guidelines';
 
 // ── Sanitization ────────────────────────────────────────────────────────
 
@@ -297,7 +297,23 @@ describe('WIDGET_CSS_BRIDGE', () => {
   });
 });
 
-// ── System prompt ───────────────────────────────────────────────────────
+// ── 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) ──────────────────
 
 describe('WIDGET_SYSTEM_PROMPT', () => {
   it('includes show-widget fence format', () => {
diff --git a/src/app/api/chat/route.ts b/src/app/api/chat/route.ts
@@ -330,13 +330,15 @@ Start by greeting the user and asking the first question.
       // CLI tools context injection failed — don't block chat
     }
 
-    // Inject widget (generative UI) system prompt — gated by user setting (default: enabled)
+    // 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.
     const generativeUISetting = getSetting('generative_ui_enabled');
     const generativeUIEnabled = generativeUISetting !== 'false';
     if (generativeUIEnabled) {
       try {
-        const { WIDGET_SYSTEM_PROMPT } = await import('@/lib/widget-guidelines');
-        finalSystemPrompt = (finalSystemPrompt || '') + '\n\n' + WIDGET_SYSTEM_PROMPT;
+        const { WIDGET_SYSTEM_PROMPT_HINT } = await import('@/lib/widget-guidelines');
+        finalSystemPrompt = (finalSystemPrompt || '') + '\n\n' + WIDGET_SYSTEM_PROMPT_HINT;
       } catch {
         // Widget prompt injection failed — don't block chat
       }
diff --git a/src/app/api/claude-status/route.ts b/src/app/api/claude-status/route.ts
@@ -31,7 +31,9 @@ export async function GET() {
     const missingGit = isWindows && findGitBash() === null;
 
     if (!claudePath) {
-      return NextResponse.json({ connected: false, version: null, binaryPath: null, installType: null, otherInstalls: [], missingGit, features: {} });
+      const w: string[] = [];
+      if (missingGit) w.push('Git Bash not found — some features may not work');
+      return NextResponse.json({ connected: false, version: null, binaryPath: null, installType: null, otherInstalls: [], missingGit, warnings: w, features: {} });
     }
     const version = await getClaudeVersion(claudePath);
     const installType = classifyClaudePath(claudePath);
@@ -53,17 +55,28 @@ export async function GET() {
       }
     }
 
+    // Build warnings array for non-blocking issues
+    const warnings: string[] = [];
+    if (missingGit) {
+      warnings.push('Git Bash not found — some features may not work');
+    }
+    if (otherInstalls.length > 0) {
+      warnings.push(`${otherInstalls.length} other Claude CLI installation(s) detected`);
+    }
+
     return NextResponse.json({
-      // If Git Bash is missing on Windows, Claude is installed but not usable
-      connected: !!version && !missingGit,
+      // connected = CLI found and returns a version. Git Bash missing is a
+      // warning, not a blocker — the CLI itself is still usable for basic ops.
+      connected: !!version,
       version,
       binaryPath: claudePath,
       installType,
       otherInstalls,
       missingGit,
+      warnings,
       features,
     });
   } catch {
-    return NextResponse.json({ connected: false, version: null, binaryPath: null, installType: null, otherInstalls: [], missingGit: false, features: {} });
+    return NextResponse.json({ connected: false, version: null, binaryPath: null, installType: null, otherInstalls: [], missingGit: false, warnings: [], features: {} });
   }
 }
diff --git a/src/app/api/providers/models/route.ts b/src/app/api/providers/models/route.ts
@@ -138,12 +138,23 @@ export async function GET() {
         rawModels = [...catalogRaw];
       }
 
-      // Inject role_models_json.default into the list if not already present
+      // Inject models from role_models_json into the list if not already present
       // (e.g. user configured "ark-code-latest" for a Volcengine or anthropic-thirdparty provider)
       try {
         const rm = JSON.parse(provider.role_models_json || '{}');
-        if (rm.default && !rawModels.some(m => m.value === rm.default)) {
-          rawModels.unshift({ value: rm.default, label: rm.default });
+        // Collect unique model IDs from all role fields (default, reasoning, small, haiku, sonnet, opus)
+        const roleEntries: { id: string; role: string }[] = [];
+        for (const role of ['default', 'reasoning', 'small', 'haiku', 'sonnet', 'opus'] as const) {
+          if (rm[role] && !roleEntries.some(e => e.id === rm[role])) {
+            roleEntries.push({ id: rm[role], role });
+          }
+        }
+        // Add each role model to the list (default role first, so it appears at the top)
+        for (const entry of roleEntries) {
+          if (!rawModels.some(m => m.value === entry.id)) {
+            const label = entry.role === 'default' ? entry.id : `${entry.id} (${entry.role})`;
+            rawModels.unshift({ value: entry.id, label });
+          }
         }
       } catch { /* ignore */ }
 
diff --git a/src/app/chat/page.tsx b/src/app/chat/page.tsx
@@ -44,16 +44,25 @@ export default function NewChatPage() {
   const [recentProjects, setRecentProjects] = useState<string[]>([]);
   const [hasProvider, setHasProvider] = useState(true); // assume true until checked
   const [mode] = useState('code');
-  const [currentModel, setCurrentModel] = useState(() =>
-    typeof window !== 'undefined'
-      ? localStorage.getItem('codepilot:last-model') || 'sonnet'
-      : 'sonnet'
-  );
-  const [currentProviderId, setCurrentProviderId] = useState(() =>
-    typeof window !== 'undefined'
-      ? localStorage.getItem('codepilot:last-provider-id') || ''
-      : ''
-  );
+  const [currentModel, setCurrentModel] = useState(() => {
+    if (typeof window === 'undefined') return 'sonnet';
+    // One-time migration: clear stale model/provider from pre-0.38 installs
+    if (!localStorage.getItem('codepilot:migration-038')) {
+      localStorage.removeItem('codepilot:last-model');
+      localStorage.removeItem('codepilot:last-provider-id');
+      localStorage.setItem('codepilot:migration-038', '1');
+      return 'sonnet';
+    }
+    return localStorage.getItem('codepilot:last-model') || 'sonnet';
+  });
+  const [currentProviderId, setCurrentProviderId] = useState(() => {
+    if (typeof window === 'undefined') return '';
+    // Migration already ran above (or was already done), just read
+    if (!localStorage.getItem('codepilot:migration-038')) {
+      return '';
+    }
+    return localStorage.getItem('codepilot:last-provider-id') || '';
+  });
   const [pendingPermission, setPendingPermission] = useState<PermissionRequestEvent | null>(null);
   const [permissionResolved, setPermissionResolved] = useState<'allow' | 'deny' | null>(null);
   const [streamingToolOutput, setStreamingToolOutput] = useState('');
@@ -82,6 +91,38 @@ export default function NewChatPage() {
     return () => controller.abort();
   }, [currentProviderId]);
 
+  // Validate restored model/provider against actual available providers/models
+  useEffect(() => {
+    let cancelled = false;
+    fetch('/api/providers/models')
+      .then(r => r.ok ? r.json() : null)
+      .then(data => {
+        if (cancelled || !data?.groups || data.groups.length === 0) return;
+        const groups = data.groups as Array<{ provider_id: string; models: Array<{ value: string }> }>;
+
+        // Validate provider
+        const validProvider = groups.find(g => g.provider_id === currentProviderId);
+        if (currentProviderId && !validProvider) {
+          setCurrentProviderId('');
+          localStorage.removeItem('codepilot:last-provider-id');
+        }
+
+        // Validate model against the resolved provider's model list
+        const resolvedGroup = validProvider || groups[0];
+        if (resolvedGroup?.models && resolvedGroup.models.length > 0) {
+          const validModel = resolvedGroup.models.find(m => m.value === currentModel);
+          if (!validModel) {
+            const fallback = resolvedGroup.models[0].value;
+            setCurrentModel(fallback);
+            localStorage.setItem('codepilot:last-model', fallback);
+          }
+        }
+      })
+      .catch(() => {});
+    return () => { cancelled = true; };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Run once on mount to validate initial values
+
   // Initialize workingDir from localStorage (or setup default), validating the path exists
   useEffect(() => {
     let cancelled = false;
@@ -155,11 +196,47 @@ export default function NewChatPage() {
           }
         })
         .catch(() => {});
-      // Sync provider/model from localStorage when provider changes
+      // Sync provider/model from localStorage, validating against available providers
       const savedProviderId = localStorage.getItem('codepilot:last-provider-id');
       const savedModel = localStorage.getItem('codepilot:last-model');
-      if (savedProviderId !== null) setCurrentProviderId(savedProviderId);
-      if (savedModel) setCurrentModel(savedModel);
+      fetch('/api/providers/models')
+        .then(r => r.ok ? r.json() : null)
+        .then(data => {
+          if (!data?.groups || data.groups.length === 0) return;
+          const groups = data.groups as Array<{ provider_id: string; models: Array<{ value: string }> }>;
+
+          // Validate and apply provider
+          if (savedProviderId !== null) {
+            const validProvider = groups.find(g => g.provider_id === savedProviderId);
+            if (validProvider) {
+              setCurrentProviderId(savedProviderId);
+            } else {
+              setCurrentProviderId('');
+              localStorage.removeItem('codepilot:last-provider-id');
+            }
+          }
+
+          // Validate and apply model
+          const resolvedPid = savedProviderId && groups.find(g => g.provider_id === savedProviderId)
+            ? savedProviderId
+            : groups[0]?.provider_id || '';
+          const resolvedGroup = groups.find(g => g.provider_id === resolvedPid) || groups[0];
+          if (savedModel && resolvedGroup?.models?.length > 0) {
+            const validModel = resolvedGroup.models.find((m: { value: string }) => m.value === savedModel);
+            if (validModel) {
+              setCurrentModel(savedModel);
+            } else {
+              const fallback = resolvedGroup.models[0].value;
+              setCurrentModel(fallback);
+              localStorage.setItem('codepilot:last-model', fallback);
+            }
+          }
+        })
+        .catch(() => {
+          // On fetch failure, still apply localStorage values as-is (best effort)
+          if (savedProviderId !== null) setCurrentProviderId(savedProviderId);
+          if (savedModel) setCurrentModel(savedModel);
+        });
     };
     checkProvider();
 
diff --git a/src/components/layout/ConnectionStatus.tsx b/src/components/layout/ConnectionStatus.tsx
@@ -29,6 +29,7 @@ interface ClaudeStatus {
   installType?: string | null;
   otherInstalls?: ClaudeInstallInfo[];
   missingGit?: boolean;
+  warnings?: string[];
 }
 
 const BASE_INTERVAL = 30_000; // 30s
@@ -155,6 +156,7 @@ export function ConnectionStatus() {
   const connected = status?.connected ?? false;
   const hasConflicts = (status?.otherInstalls?.length ?? 0) > 0;
   const missingGit = status?.missingGit ?? false;
+  const hasWarnings = hasConflicts || missingGit;
 
   return (
     <>
@@ -167,7 +169,7 @@ export function ConnectionStatus() {
           status === null
             ? "bg-muted text-muted-foreground"
             : connected
-              ? hasConflicts
+              ? hasWarnings
                 ? "bg-status-warning-muted text-status-warning-foreground"
                 : "bg-status-success-muted text-status-success-foreground"
               : "bg-status-error-muted text-status-error-foreground"
@@ -179,7 +181,7 @@ export function ConnectionStatus() {
             status === null
               ? "bg-muted-foreground/40"
               : connected
-                ? hasConflicts
+                ? hasWarnings
                   ? "bg-status-warning"
                   : "bg-status-success"
                 : "bg-status-error"
@@ -188,30 +190,30 @@ export function ConnectionStatus() {
         {status === null
           ? t('connection.checking')
           : connected
-            ? hasConflicts
-              ? t('connection.conflict')
-              : t('connection.connected')
-            : missingGit
+            ? missingGit
               ? t('connection.missingGit')
-              : t('connection.disconnected')}
+              : hasConflicts
+                ? t('connection.conflict')
+                : t('connection.connected')
+            : t('connection.disconnected')}
       </Button>
 
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
             <DialogTitle>
               {connected
-                ? t('connection.installed')
-                : missingGit
+                ? missingGit
                   ? t('connection.missingGitTitle')
-                  : t('connection.notInstalled')}
+                  : t('connection.installed')
+                : t('connection.notInstalled')}
             </DialogTitle>
             <DialogDescription>
               {connected
-                ? `Claude Code CLI v${status?.version} is running and ready.`
-                : missingGit
+                ? missingGit
                   ? t('connection.missingGitDesc')
-                  : "Claude Code CLI is required to use this application."}
+                  : `Claude Code CLI v${status?.version} is running and ready.`
+                : "Claude Code CLI is required to use this application."}
             </DialogDescription>
           </DialogHeader>
 
@@ -258,25 +260,25 @@ export function ConnectionStatus() {
                   </div>
                 </div>
               )}
-            </div>
-          ) : missingGit ? (
-            <div className="space-y-4 text-sm">
-              <div className="flex items-center gap-3 rounded-lg bg-status-warning-muted px-4 py-3">
-                <Warning size={16} className="text-status-warning-foreground shrink-0" />
-                <div>
-                  <p className="font-medium text-status-warning-foreground">{t('connection.missingGitTitle')}</p>
-                  {status?.version && (
-                    <p className="text-xs text-muted-foreground">Claude Code v{status.version} is installed but cannot run without Git.</p>
-                  )}
+
+              {/* Git Bash missing warning (Windows only) */}
+              {missingGit && (
+                <div className="rounded-lg bg-status-warning-muted px-4 py-3 space-y-2">
+                  <div className="flex items-center gap-2">
+                    <Warning size={16} className="text-status-warning-foreground shrink-0" />
+                    <p className="font-medium text-status-warning-foreground text-xs">
+                      {t('connection.missingGitTitle')}
+                    </p>
+                  </div>
+                  <div className="text-xs text-muted-foreground space-y-1">
+                    <ol className="list-decimal list-inside space-y-0.5">
+                      <li>{t('install.gitStep1')}</li>
+                      <li>{t('install.gitStep2')}</li>
+                      <li>{t('install.gitStep3')}</li>
+                    </ol>
+                  </div>
                 </div>
-              </div>
-              <div className="text-sm text-muted-foreground space-y-1">
-                <ol className="list-decimal list-inside space-y-0.5">
-                  <li>{t('install.gitStep1')}</li>
-                  <li>{t('install.gitStep2')}</li>
-                  <li>{t('install.gitStep3')}</li>
-                </ol>
-              </div>
+              )}
             </div>
           ) : (
             <div className="space-y-4 text-sm">
diff --git a/src/components/setup/ClaudeCodeCard.tsx b/src/components/setup/ClaudeCodeCard.tsx
@@ -31,6 +31,7 @@ interface ClaudeStatus {
   installType?: string | null;
   otherInstalls?: Array<{ path: string; version: string | null; type: string }>;
   missingGit?: boolean;
+  warnings?: string[];
 }
 
 interface ClaudeCodeCardProps {
diff --git a/src/lib/provider-doctor.ts b/src/lib/provider-doctor.ts
diff --git a/src/lib/widget-guidelines.ts b/src/lib/widget-guidelines.ts

Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,7 @@ interface ClaudeStatus {`
`31`	`31`	`installType?: string \| null;`
`32`	`32`	`otherInstalls?: Array<{ path: string; version: string \| null; type: string }>;`
`33`	`33`	`missingGit?: boolean;`
	`34`	`+ warnings?: string[];`
`34`	`35`	`}`
`35`	`36`
`36`	`37`	`interface ClaudeCodeCardProps {`