total-recall-brain 3.18.2 → 3.19.0

package/frontend/src/pages/RulesPage.spec.tsx

@@ -1,23 +1,54 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
 import RulesPage from './RulesPage';
 
-// Mock simple API and context if needed
+const apiFetch = vi.fn();
+const getApiBase = vi.fn().mockReturnValue('');
+
 vi.mock('../api', () => ({
-  apiFetch: vi.fn().mockResolvedValue({ json: () => Promise.resolve({ rules: [] }) }),
-  getApiBase: vi.fn().mockReturnValue(''),
+  apiFetch: (...args: unknown[]) => apiFetch(...args),
+  getApiBase: () => getApiBase(),
 }));
 
 describe('RulesPage Component', () => {
-  it('renders the RulesPage title', () => {
-    // In a real test, we would wrap with Router/Context providers if needed
-    // Assuming RulesPage is isolated enough or we mock context
-    try {
-      render(<RulesPage activeBrainId="test-brain" />);
-      // We expect the page to render without crashing
-      expect(true).toBe(true);
-    } catch (e) {
-      // Ignored for basic mount check
-    }
+  beforeEach(() => {
+    vi.clearAllMocks();
+    apiFetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        rules: [
+          {
+            slug: 'test-inv',
+            category: 'invariants',
+            title: 'Always test',
+            status: 'active',
+            importance: 4,
+            body: 'Run tests.',
+            scope: 'global',
+          },
+        ],
+        count: 1,
+      }),
+    });
+  });
+
+  it('renders the Agent Rules title and rule cards', async () => {
+    render(<RulesPage activeBrainId="test-brain" />);
+    expect(await screen.findByText('Agent Rules')).toBeTruthy();
+    await waitFor(() => {
+      expect(screen.getByText('Always test')).toBeTruthy();
+    });
+    expect(screen.getByTestId('rule-card')).toBeTruthy();
+  });
+
+  it('shows error state when API fails', async () => {
+    apiFetch.mockResolvedValueOnce({
+      ok: false,
+      status: 500,
+      json: async () => ({ error: 'Failed to load agent rules' }),
+    });
+    render(<RulesPage activeBrainId="test-brain" />);
+    expect(await screen.findByTestId('rules-error')).toBeTruthy();
+    expect(screen.getByText(/Failed to load agent rules/i)).toBeTruthy();
   });
 });

package/frontend/src/pages/RulesPage.tsx

@@ -14,6 +14,7 @@ interface RuleNode {
 export default function RulesPage({ activeBrainId }: { activeBrainId: string }) {
   const [rules, setRules] = useState<RuleNode[]>([]);
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     fetchRules();
@@ -21,14 +22,19 @@ export default function RulesPage({ activeBrainId }: { activeBrainId: string })
 
   const fetchRules = async () => {
     setLoading(true);
+    setError(null);
     try {
       const res = await apiFetch(getApiBase() + '/api/rules');
-      const data = await res.json();
-      if (data.rules) {
-        setRules(data.rules);
+      if (!res.ok) {
+        const errBody = await res.json().catch(() => ({}));
+        throw new Error(errBody.error || errBody.message || `HTTP ${res.status}`);
       }
+      const data = await res.json();
+      setRules(Array.isArray(data.rules) ? data.rules : []);
     } catch (err) {
       console.error('Failed to fetch rules:', err);
+      setError(err instanceof Error ? err.message : 'Failed to fetch rules');
+      setRules([]);
     } finally {
       setLoading(false);
     }
@@ -69,9 +75,11 @@ export default function RulesPage({ activeBrainId }: { activeBrainId: string })
 
   const renderRuleCard = (rule: RuleNode, colorCode: string) => {
     const isArchived = rule.status === 'archived';
+    const stars = Math.min(5, Math.max(0, Number(rule.importance) || 0));
     return (
       <div
-        key={rule.slug}
+        key={`${rule.scope}:${rule.slug}`}
+        data-testid="rule-card"
         style={{
           border: `1px solid ${isArchived ? 'var(--border)' : colorCode}`,
           opacity: isArchived ? 0.6 : 1,
@@ -90,13 +98,13 @@ export default function RulesPage({ activeBrainId }: { activeBrainId: string })
             <span style={{ fontSize: 12, color: 'var(--text-tertiary)', background: 'var(--bg-primary)', padding: '2px 6px', borderRadius: 4 }}>
               {rule.scope} brain
             </span>
-            <span style={{ fontSize: 12, color: 'gold' }}>
-              {'★'.repeat(rule.importance) + '☆'.repeat(5 - rule.importance)}
+            <span style={{ fontSize: 12, color: 'gold' }} aria-label={`Importance ${stars} of 5`}>
+              {'★'.repeat(stars) + '☆'.repeat(5 - stars)}
             </span>
           </div>
         </div>
         <div style={{ fontSize: 14, color: 'var(--text-secondary)', whiteSpace: 'pre-wrap' }}>
-          {rule.body}
+          {rule.body || '(no body)'}
         </div>
         <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 8 }}>
           {isArchived ? (
@@ -120,11 +128,11 @@ export default function RulesPage({ activeBrainId }: { activeBrainId: string })
   };
 
   if (loading) {
-    return <div style={{ padding: 20 }}>Loading rules...</div>;
+    return <div style={{ padding: 20 }} data-testid="rules-loading">Loading rules...</div>;
   }
 
   return (
-    <div style={{ padding: 40, maxWidth: 1000, margin: '0 auto', height: '100%', overflowY: 'auto' }}>
+    <div style={{ padding: 40, maxWidth: 1000, margin: '0 auto', height: '100%', overflowY: 'auto' }} data-testid="rules-page">
       <header style={{ marginBottom: 40 }}>
         <h1 style={{ margin: '0 0 8px 0', fontSize: 28, color: 'var(--text-primary)' }}>Agent Rules</h1>
         <p style={{ margin: 0, color: 'var(--text-secondary)', fontSize: 16 }}>
@@ -132,6 +140,30 @@ export default function RulesPage({ activeBrainId }: { activeBrainId: string })
         </p>
       </header>
 
+      {error && (
+        <div
+          data-testid="rules-error"
+          role="alert"
+          style={{
+            marginBottom: 24,
+            padding: 12,
+            borderRadius: 8,
+            border: '1px solid #ef4444',
+            background: 'rgba(239, 68, 68, 0.08)',
+            color: '#ef4444',
+          }}
+        >
+          Failed to load rules: {error}
+          <button
+            type="button"
+            onClick={() => fetchRules()}
+            style={{ marginLeft: 12, padding: '2px 8px', cursor: 'pointer' }}
+          >
+            Retry
+          </button>
+        </div>
+      )}
+
       <section style={{ marginBottom: 40 }}>
         <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
           <h2 style={{ margin: 0, color: '#ef4444' }}>Invariants</h2>

package/frontend/src/pages/SecretsPage.tsx

@@ -32,6 +32,7 @@ import {
   addSecret,
   triggerSync,
   getSyncStatus,
+  runAccountSync,
   type SyncNodeStatus
 } from '../api'
 import type { ConfigJson, GeminiModelInfo } from '../types'
@@ -55,6 +56,8 @@ type MetaEdit = {
   auto_rotate: boolean
   notes: string
   project_path: string
+  tracking_exempt: boolean
+  shared_value_ok: boolean
 }
 
 function metaForm(k: SecretCatalogKey): MetaEdit {
@@ -71,6 +74,8 @@ function metaForm(k: SecretCatalogKey): MetaEdit {
     auto_rotate: !!k.auto_rotate,
     notes: k.notes || '',
     project_path: k.project_path || '',
+    tracking_exempt: !!k.tracking_exempt,
+    shared_value_ok: !!k.shared_value_ok,
   }
 }
 
@@ -179,7 +184,10 @@ export default function SecretsPage() {
     auto_rotate: false,
     notes: '',
     project_path: '',
+    tracking_exempt: false,
+    shared_value_ok: false,
   })
+  const [accountSyncBusy, setAccountSyncBusy] = useState(false)
   const [rotateVal, setRotateVal] = useState('')
   const [saving, setSaving] = useState(false)
   const [status, setStatus] = useState('')
@@ -513,7 +521,7 @@ export default function SecretsPage() {
         setSaving(false)
         return
       }
-      const patch = {
+      const patch: Record<string, unknown> = {
         label: edit.label.trim() || null,
         provider: edit.provider.trim() || null,
         repos: reposList,
@@ -527,7 +535,10 @@ export default function SecretsPage() {
         auto_rotate: !!edit.auto_rotate,
         notes: edit.notes.trim() || null,
         project_path: edit.project_path.trim() || null,
+        tracking_exempt: !!edit.tracking_exempt,
+        shared_value_ok: !!edit.shared_value_ok,
       }
+      if (edit.tracking_exempt) patch.tracking_status = 'exempt'
       await updateSecretMeta(selected.key, patch)
       setStatus('Metadata saved')
       await loadCatalog()
@@ -705,6 +716,37 @@ export default function SecretsPage() {
           <button type="button" className="btn btn-ghost btn-sm" onClick={() => void runScan()}>
             Migrate import
           </button>
+          <button
+            type="button"
+            className="btn btn-ghost btn-sm"
+            disabled={accountSyncBusy}
+            onClick={async () => {
+              setAccountSyncBusy(true)
+              setError(null)
+              try {
+                const r = (await runAccountSync({ strict: true })) as {
+                  healthy?: boolean
+                  ok?: number
+                  errors?: number
+                  message?: string
+                  total?: number
+                }
+                setStatus(
+                  r.healthy
+                    ? `Account sync OK — ${r.ok ?? 0}/${r.total ?? 0} tracked`
+                    : `Account sync: ${r.errors ?? '?'} tracking error(s) — ${r.message || 'see catalog'}`,
+                )
+                if (!r.healthy) setError(r.message || 'Tracking errors remain after account-sync')
+                await loadCatalog()
+              } catch (e: unknown) {
+                setError((e as Error).message)
+              } finally {
+                setAccountSyncBusy(false)
+              }
+            }}
+          >
+            {accountSyncBusy ? 'Syncing accounts…' : 'Sync provider accounts'}
+          </button>
           <button type="button" className="btn btn-ghost btn-sm" onClick={() => void loadCatalog()}>
             Refresh
           </button>
@@ -741,6 +783,14 @@ export default function SecretsPage() {
             <li>
               <strong>import-env</strong> = one-time migrate. <strong>PATs</strong> = brain API tokens only.
             </li>
+            <li>
+              <strong>Account tracking</strong> — every billable key must have live account/usage/subscription data
+              or an explicit tracking exempt + monthly cost.
+            </li>
+            <li>
+              <strong>Shared values</strong> — same credential material under multiple key names/apps is an error;
+              issue a unique API key per app, then rotate each secret name.
+            </li>
           </ul>
         </div>
       )}
@@ -809,6 +859,16 @@ export default function SecretsPage() {
             value={String(summary.multi_repo_violations || 0)}
             accent={summary.multi_repo_violations ? '#f87171' : '#64748b'}
           />
+          <SummaryCard
+            label="Shared keys"
+            value={String(summary.shared_value_groups || 0)}
+            accent={summary.shared_value_healthy === false ? '#f87171' : '#64748b'}
+          />
+          <SummaryCard
+            label="Tracking errors"
+            value={String(summary.tracking_errors || 0)}
+            accent={summary.tracking_healthy === false ? '#f87171' : '#34d399'}
+          />
           <SummaryCard
             label="Developer"
             value={String(summary.developer_keys || 0)}
@@ -839,6 +899,84 @@ export default function SecretsPage() {
         </div>
       )}
 
+      {summary?.shared_value_healthy === false && (
+        <div
+          className="card"
+          style={{
+            marginBottom: 16,
+            padding: 14,
+            borderColor: 'rgba(251,146,60,0.55)',
+            background: 'rgba(251,146,60,0.1)',
+            fontSize: 13,
+            lineHeight: 1.5,
+          }}
+        >
+          <strong style={{ color: '#fb923c' }}>
+            Shared credential values — {summary.shared_value_groups || 0} group(s) ·{' '}
+            {summary.shared_value_keys || 0} key(s)
+          </strong>
+          <p style={{ margin: '6px 0 8px', color: 'var(--text-secondary)' }}>
+            The same API key material is stored under multiple secret names and/or apps. Issue a{' '}
+            <strong>unique key per app</strong> in the vendor console, then rotate each secret name.
+            CLI: <code>npx total-recall secret shared</code>
+          </p>
+          {(summary.shared_value_errors || []).slice(0, 8).map((g) => (
+            <div
+              key={g.fingerprint || (g.keys || []).join(',')}
+              style={{
+                fontSize: 11,
+                fontFamily: 'ui-monospace, monospace',
+                marginBottom: 6,
+                color: 'var(--text-secondary)',
+              }}
+            >
+              <span style={{ color: '#fb923c' }}>fp {g.fingerprint || '—'}</span>
+              {' · apps ['}
+              {(g.apps || []).join(', ')}
+              {'] · '}
+              {(g.keys || []).join(', ')}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {summary?.tracking_healthy === false && (
+        <div
+          className="card"
+          style={{
+            marginBottom: 16,
+            padding: 14,
+            borderColor: 'rgba(248,113,113,0.5)',
+            background: 'rgba(248,113,113,0.08)',
+            fontSize: 13,
+            lineHeight: 1.5,
+          }}
+        >
+          <strong style={{ color: '#f87171' }}>
+            Account / usage tracking errors — {summary.tracking_errors || 0}
+          </strong>
+          <p style={{ margin: '6px 0 8px', color: 'var(--text-secondary)' }}>
+            Every set credential must be tracked (live provider account/usage API) or explicitly exempt
+            with a monthly cost. Run <strong>Sync provider accounts</strong> or CLI{' '}
+            <code>npx total-recall secret account-sync</code>.
+          </p>
+          {(summary.tracking_error_keys || []).slice(0, 10).map((e) => (
+            <div
+              key={e.key}
+              style={{
+                fontSize: 11,
+                fontFamily: 'ui-monospace, monospace',
+                marginBottom: 4,
+                color: 'var(--text-secondary)',
+              }}
+            >
+              <span style={{ color: '#f87171' }}>{e.key}</span>
+              {e.provider ? ` (${e.provider})` : ''}: {(e.error || '').slice(0, 120)}
+            </div>
+          ))}
+        </div>
+      )}
+
       {catalog?.by_provider && catalog.by_provider.length > 0 && (
         <>
           <button
@@ -992,7 +1130,9 @@ export default function SecretsPage() {
                   rotate_every_days: '',
                   auto_rotate: false,
                   notes: '',
-                  project_path: ''
+                  project_path: '',
+                  tracking_exempt: false,
+                  shared_value_ok: false,
                 })
                 setNewSecretKeyName('')
                 setNewSecretVal('')
@@ -1594,6 +1734,130 @@ export default function SecretsPage() {
                 )}
               </PanelSection>
 
+              <PanelSection
+                title="Tracking & shared-key health"
+                hint="Billable keys need live account/usage APIs; shared values across apps must be unique per app"
+              >
+                <div style={{ fontSize: 12, marginBottom: 10, lineHeight: 1.45 }}>
+                  <div>
+                    Tracking:{' '}
+                    <strong
+                      style={{
+                        color:
+                          selected.tracking_status === 'ok' || selected.tracking_exempt
+                            ? '#34d399'
+                            : selected.tracking_status === 'exempt'
+                              ? '#fbbf24'
+                              : '#f87171',
+                      }}
+                    >
+                      {selected.tracking_exempt
+                        ? 'exempt'
+                        : selected.tracking_status || 'never synced'}
+                    </strong>
+                    {selected.key_valid != null && (
+                      <span style={{ color: 'var(--text-tertiary)' }}>
+                        {' '}
+                        · key {selected.key_valid ? 'valid' : 'invalid'}
+                      </span>
+                    )}
+                  </div>
+                  {selected.tracking_error && (
+                    <div style={{ color: '#f87171', fontSize: 11, marginTop: 4 }}>
+                      {selected.tracking_error}
+                    </div>
+                  )}
+                  {selected.tracking_usage != null && (
+                    <pre
+                      style={{
+                        fontSize: 10,
+                        marginTop: 6,
+                        padding: 8,
+                        borderRadius: 6,
+                        background: 'rgba(0,0,0,0.25)',
+                        overflow: 'auto',
+                        maxHeight: 100,
+                      }}
+                    >
+                      {JSON.stringify(selected.tracking_usage, null, 2)}
+                    </pre>
+                  )}
+                  <div style={{ marginTop: 8 }}>
+                    Shared value:{' '}
+                    <strong
+                      style={{
+                        color:
+                          selected.shared_value && selected.shared_value_severity === 'error'
+                            ? '#fb923c'
+                            : selected.shared_value
+                              ? '#fbbf24'
+                              : '#34d399',
+                      }}
+                    >
+                      {selected.shared_value
+                        ? selected.shared_value_severity === 'error'
+                          ? 'ERROR — same material in multiple keys/apps'
+                          : 'shared (waived)'
+                        : 'unique'}
+                    </strong>
+                  </div>
+                  {selected.shared_with && selected.shared_with.length > 0 && (
+                    <div style={{ fontSize: 11, marginTop: 4, color: 'var(--text-secondary)' }}>
+                      Same value as:{' '}
+                      {selected.shared_with
+                        .map((s) => `${s.key} (${s.app})`)
+                        .join(', ')}
+                    </div>
+                  )}
+                  {selected.shared_value_error && (
+                    <div style={{ color: '#fb923c', fontSize: 11, marginTop: 4 }}>
+                      {selected.shared_value_error}
+                    </div>
+                  )}
+                </div>
+                <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, marginBottom: 8 }}>
+                  <input
+                    type="checkbox"
+                    checked={!!edit.tracking_exempt}
+                    onChange={(e) => setEdit({ ...edit, tracking_exempt: e.target.checked })}
+                  />
+                  Tracking exempt (no vendor account API — set monthly cost)
+                </label>
+                <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, marginBottom: 8 }}>
+                  <input
+                    type="checkbox"
+                    checked={!!edit.shared_value_ok}
+                    onChange={(e) => setEdit({ ...edit, shared_value_ok: e.target.checked })}
+                  />
+                  Shared value OK (intentional mirror — prefer unique keys per app)
+                </label>
+                <button
+                  type="button"
+                  className="btn btn-ghost btn-sm"
+                  disabled={accountSyncBusy}
+                  style={{ marginTop: 4 }}
+                  onClick={async () => {
+                    setAccountSyncBusy(true)
+                    try {
+                      const r = (await runAccountSync({ key: selected.key, strict: true })) as {
+                        tracking_status?: string
+                        error?: string
+                      }
+                      setStatus(
+                        `Synced ${selected.key}: ${r.tracking_status || '?'}${r.error ? ` — ${r.error.slice(0, 80)}` : ''}`,
+                      )
+                      await loadCatalog()
+                    } catch (e: unknown) {
+                      setError((e as Error).message)
+                    } finally {
+                      setAccountSyncBusy(false)
+                    }
+                  }}
+                >
+                  Re-probe this key
+                </button>
+              </PanelSection>
+
               <PanelSection title="Docs & rotation">
                 {edit.provider.trim().toLowerCase() === 'headscale' && (
                   <Field
@@ -2203,6 +2467,8 @@ export default function SecretsPage() {
 
 const DEVELOPER_ID = '__developer__'
 const MULTI_ERROR_ID = '__multi_repo_error__'
+const SHARED_ERROR_ID = '__shared_value_error__'
+const TRACKING_ERROR_ID = '__tracking_error__'
 
 function groupKeysByRepo(keys: SecretCatalogKey[]): {
   id: string
@@ -2213,8 +2479,21 @@ function groupKeysByRepo(keys: SecretCatalogKey[]): {
   const map = new Map<string, SecretCatalogKey[]>()
   const developer: SecretCatalogKey[] = []
   const multiError: SecretCatalogKey[] = []
+  const sharedError: SecretCatalogKey[] = []
+  const trackingError: SecretCatalogKey[] = []
 
   for (const k of keys) {
+    if (k.shared_value && k.shared_value_severity === 'error') {
+      sharedError.push(k)
+    }
+    if (
+      k.set &&
+      k.tracking_status !== 'ok' &&
+      k.tracking_status !== 'exempt' &&
+      !k.tracking_exempt
+    ) {
+      trackingError.push(k)
+    }
     const repos = (k.repos || []).map((r) => r.trim()).filter(Boolean)
     if (repos.length > 1 || k.multi_repo_error) {
       multiError.push(k)
@@ -2238,6 +2517,22 @@ function groupKeysByRepo(keys: SecretCatalogKey[]): {
   }[] = []
 
   // Errors first so they are impossible to miss
+  if (sharedError.length) {
+    sections.push({
+      id: SHARED_ERROR_ID,
+      label: 'Needs fix — shared key across apps',
+      keys: sharedError.slice().sort((a, b) => a.key.localeCompare(b.key)),
+      kind: 'error',
+    })
+  }
+  if (trackingError.length) {
+    sections.push({
+      id: TRACKING_ERROR_ID,
+      label: 'Needs fix — account/usage not tracked',
+      keys: trackingError.slice().sort((a, b) => a.key.localeCompare(b.key)),
+      kind: 'error',
+    })
+  }
   if (multiError.length) {
     sections.push({
       id: MULTI_ERROR_ID,
@@ -2298,7 +2593,10 @@ function SecretKeyRow({
         border: `1px solid ${selected ? 'var(--border-accent)' : 'transparent'}`,
         background: selected
           ? 'rgba(59,130,246,0.14)'
-          : k.multi_repo_error || k.rotation_overdue
+          : k.multi_repo_error ||
+              k.rotation_overdue ||
+              (k.shared_value && k.shared_value_severity === 'error') ||
+              (k.tracking_status && k.tracking_status !== 'ok' && k.tracking_status !== 'exempt' && !k.tracking_exempt)
             ? 'rgba(248,113,113,0.06)'
             : 'rgba(148,163,184,0.04)',
         color: 'inherit',
@@ -2318,6 +2616,18 @@ function SecretKeyRow({
           }}
         >
           {k.key}
+          {k.shared_value && k.shared_value_severity === 'error' && (
+            <span style={{ marginLeft: 6, fontSize: 9, color: '#fb923c' }}>SHARED</span>
+          )}
+          {k.tracking_status &&
+            k.tracking_status !== 'ok' &&
+            k.tracking_status !== 'exempt' &&
+            !k.tracking_exempt && (
+              <span style={{ marginLeft: 6, fontSize: 9, color: '#f87171' }}>TRACK</span>
+            )}
+          {k.tracking_status === 'ok' && (
+            <span style={{ marginLeft: 6, fontSize: 9, color: '#34d399' }}>OK</span>
+          )}
           {k.multi_repo_error && (
             <span style={{ marginLeft: 6, fontSize: 9, color: '#f87171' }}>MULTI</span>
           )}
@@ -2337,6 +2647,9 @@ function SecretKeyRow({
           {groupBy === 'api' 
             ? (k.repos?.length ? k.repos.join(', ') : 'Developer') 
             : (k.provider_name || k.provider || '—')} · {k.masked || '••••'}
+          {k.shared_value && k.shared_apps?.length
+            ? ` · apps: ${k.shared_apps.join(', ')}`
+            : ''}
           {k.multi_repo_error ? ` · ${k.repos.join(', ')}` : ''}
         </div>
       </div>

package/frontend/src/pages/SettingsPage.spec.tsx

@@ -10,18 +10,26 @@ describe('SettingsPage', () => {
     vi.resetAllMocks();
   });
 
-  it('renders without crashing', async () => {
+  it('renders System Settings when config loads', async () => {
     vi.spyOn(console, 'error').mockImplementation(() => {});
-    
+
     vi.mocked(api.fetchConfigJson).mockResolvedValue({
       security: { bind: {}, network: {}, rate_limits: {}, sandbox: {}, dashboard: {}, api: {} },
       budget: { budget: {} },
       brain: {},
-      secrets: {}
+      secrets: {},
     } as any);
-    vi.mocked(api.fetchHealth).mockResolvedValue({ status: 'healthy', version: '1.0.0' } as any);
-    vi.mocked(api.checkUpdate).mockResolvedValue({ updateAvailable: false } as any);
-    vi.mocked(api.fetchBrains).mockResolvedValue([]);
+    vi.mocked(api.fetchHealth).mockResolvedValue({
+      status: 'healthy',
+      version: '1.0.0',
+      cli_agents: ['claude'],
+    } as any);
+    vi.mocked(api.checkUpdate).mockResolvedValue({
+      updateAvailable: false,
+      currentVersion: '1.0.0',
+      latestVersion: '1.0.0',
+    } as any);
+    vi.mocked(api.triggerRecompile).mockResolvedValue({ success: true, message: 'ok' } as any);
 
     await act(async () => {
       render(<SettingsPage />);
@@ -29,5 +37,21 @@ describe('SettingsPage', () => {
 
     const systemSettings = await screen.findByText(/System Settings/i, {}, { timeout: 4000 });
     expect(systemSettings).toBeInTheDocument();
+    expect(screen.getByTestId('settings-page')).toBeInTheDocument();
+  }, 10000);
+
+  it('shows error + retry when config fails', async () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+    vi.mocked(api.fetchConfigJson).mockRejectedValue(new Error('Config JSON API error: 500'));
+    vi.mocked(api.fetchHealth).mockResolvedValue({ status: 'healthy' } as any);
+    vi.mocked(api.checkUpdate).mockResolvedValue({ updateAvailable: false } as any);
+    vi.mocked(api.fetchBrains).mockResolvedValue([]);
+
+    await act(async () => {
+      render(<SettingsPage />);
+    });
+
+    expect(await screen.findByTestId('settings-error')).toBeInTheDocument();
+    expect(screen.getByText(/Config JSON API error: 500/i)).toBeInTheDocument();
   }, 10000);
 });