@geminilight/mindos 0.5.19 → 0.5.21

package/app/app/api/file/route.ts

@@ -1,5 +1,6 @@
 export const dynamic = 'force-dynamic';
 import { NextRequest, NextResponse } from 'next/server';
+import { revalidatePath } from 'next/cache';
 import {
   getFileContent,
   saveFileContent,
@@ -37,6 +38,9 @@ export async function GET(req: NextRequest) {
   }
 }
 
+// Ops that change file tree structure (sidebar needs refresh)
+const TREE_CHANGING_OPS = new Set(['create_file', 'delete_file', 'rename_file', 'move_file']);
+
 // POST /api/file  body: { op, path, ...params }
 export async function POST(req: NextRequest) {
   let body: Record<string, unknown>;
@@ -47,20 +51,24 @@ export async function POST(req: NextRequest) {
   if (!filePath || typeof filePath !== 'string') return err('missing path');
 
   try {
+    let resp: NextResponse;
+
     switch (op) {
 
       case 'save_file': {
         const { content } = params as { content: string };
         if (typeof content !== 'string') return err('missing content');
         saveFileContent(filePath, content);
-        return NextResponse.json({ ok: true });
+        resp = NextResponse.json({ ok: true });
+        break;
       }
 
       case 'append_to_file': {
         const { content } = params as { content: string };
         if (typeof content !== 'string') return err('missing content');
         appendToFile(filePath, content);
-        return NextResponse.json({ ok: true });
+        resp = NextResponse.json({ ok: true });
+        break;
       }
 
       case 'insert_lines': {
@@ -68,7 +76,8 @@ export async function POST(req: NextRequest) {
         if (typeof after_index !== 'number') return err('missing after_index');
         if (!Array.isArray(lines)) return err('lines must be array');
         insertLines(filePath, after_index, lines);
-        return NextResponse.json({ ok: true });
+        resp = NextResponse.json({ ok: true });
+        break;
       }
 
       case 'update_lines': {
@@ -78,7 +87,8 @@ export async function POST(req: NextRequest) {
         if (start < 0 || end < 0) return err('start/end must be >= 0');
         if (start > end) return err('start must be <= end');
         updateLines(filePath, start, end, lines);
-        return NextResponse.json({ ok: true });
+        resp = NextResponse.json({ ok: true });
+        break;
       }
 
       case 'insert_after_heading': {
@@ -86,7 +96,8 @@ export async function POST(req: NextRequest) {
         if (typeof heading !== 'string') return err('missing heading');
         if (typeof content !== 'string') return err('missing content');
         insertAfterHeading(filePath, heading, content);
-        return NextResponse.json({ ok: true });
+        resp = NextResponse.json({ ok: true });
+        break;
       }
 
       case 'update_section': {
@@ -94,44 +105,57 @@ export async function POST(req: NextRequest) {
         if (typeof heading !== 'string') return err('missing heading');
         if (typeof content !== 'string') return err('missing content');
         updateSection(filePath, heading, content);
-        return NextResponse.json({ ok: true });
+        resp = NextResponse.json({ ok: true });
+        break;
       }
 
       case 'delete_file': {
         deleteFile(filePath);
-        return NextResponse.json({ ok: true });
+        resp = NextResponse.json({ ok: true });
+        break;
       }
 
       case 'rename_file': {
         const { new_name } = params as { new_name: string };
         if (typeof new_name !== 'string' || !new_name) return err('missing new_name');
         const newPath = renameFile(filePath, new_name);
-        return NextResponse.json({ ok: true, newPath });
+        resp = NextResponse.json({ ok: true, newPath });
+        break;
       }
 
       case 'create_file': {
         const { content } = params as { content?: string };
         createFile(filePath, typeof content === 'string' ? content : '');
-        return NextResponse.json({ ok: true });
+        resp = NextResponse.json({ ok: true });
+        break;
       }
 
       case 'move_file': {
         const { to_path } = params as { to_path: string };
         if (typeof to_path !== 'string' || !to_path) return err('missing to_path');
         const result = moveFile(filePath, to_path);
-        return NextResponse.json({ ok: true, ...result });
+        resp = NextResponse.json({ ok: true, ...result });
+        break;
       }
 
       case 'append_csv': {
         const { row } = params as { row: string[] };
         if (!Array.isArray(row) || row.length === 0) return err('row must be non-empty array');
         const result = appendCsvRow(filePath, row);
-        return NextResponse.json({ ok: true, ...result });
+        resp = NextResponse.json({ ok: true, ...result });
+        break;
       }
 
       default:
         return err(`unknown op: ${op}`);
     }
+
+    // Invalidate Next.js router cache so sidebar file tree updates
+    if (TREE_CHANGING_OPS.has(op)) {
+      try { revalidatePath('/', 'layout'); } catch { /* noop in test env */ }
+    }
+
+    return resp;
   } catch (e) {
     return err((e as Error).message, 500);
   }

package/app/app/api/skills/route.ts

@@ -129,7 +129,7 @@ export async function POST(req: NextRequest) {
   try {
     const body = await req.json();
     const { action, name, description, content, enabled } = body as {
-      action: 'create' | 'update' | 'delete' | 'toggle';
+      action: 'create' | 'update' | 'delete' | 'toggle' | 'read';
       name?: string;
       description?: string;
       content?: string;
@@ -172,8 +172,11 @@ export async function POST(req: NextRequest) {
           return NextResponse.json({ error: 'A skill with this name already exists' }, { status: 409 });
         }
         fs.mkdirSync(skillDir, { recursive: true });
-        const frontmatter = `---\nname: ${name}\ndescription: ${description || name}\n---\n\n${content || ''}`;
-        fs.writeFileSync(path.join(skillDir, 'SKILL.md'), frontmatter, 'utf-8');
+        // If content already has frontmatter, use it as-is; otherwise build frontmatter
+        const fileContent = content && content.trimStart().startsWith('---')
+          ? content
+          : `---\nname: ${name}\ndescription: ${description || name}\n---\n\n${content || ''}`;
+        fs.writeFileSync(path.join(skillDir, 'SKILL.md'), fileContent, 'utf-8');
         return NextResponse.json({ ok: true });
       }
 
@@ -199,6 +202,22 @@ export async function POST(req: NextRequest) {
         return NextResponse.json({ ok: true });
       }
 
+      case 'read': {
+        if (!name) return NextResponse.json({ error: 'name required' }, { status: 400 });
+        const dirs = [
+          path.join(PROJECT_ROOT, 'app', 'data', 'skills', name),
+          path.join(PROJECT_ROOT, 'skills', name),
+          path.join(userSkillsDir, name),
+        ];
+        for (const dir of dirs) {
+          const file = path.join(dir, 'SKILL.md');
+          if (fs.existsSync(file)) {
+            return NextResponse.json({ content: fs.readFileSync(file, 'utf-8') });
+          }
+        }
+        return NextResponse.json({ error: 'Skill not found' }, { status: 404 });
+      }
+
       default:
         return NextResponse.json({ error: `Unknown action: ${action}` }, { status: 400 });
     }

package/app/components/SettingsModal.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useEffect, useState, useCallback } from 'react';
-import { X, Settings, Save, Loader2, AlertCircle, CheckCircle2, RotateCcw } from 'lucide-react';
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { X, Settings, Loader2, AlertCircle, CheckCircle2, RotateCcw, Sparkles, Palette, Database, RefreshCw, Plug, Puzzle } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
 import { getAllRenderers, loadDisabledState, isRendererEnabled } from '@/lib/renderers/registry';
 import { apiFetch } from '@/lib/api';
@@ -12,7 +12,6 @@ import { AiTab } from './settings/AiTab';
 import { AppearanceTab } from './settings/AppearanceTab';
 import { KnowledgeTab } from './settings/KnowledgeTab';
 import { PluginsTab } from './settings/PluginsTab';
-import { ShortcutsTab } from './settings/ShortcutsTab';
 import { SyncTab } from './settings/SyncTab';
 import { McpTab } from './settings/McpTab';
 
@@ -28,6 +27,8 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
   const [saving, setSaving] = useState(false);
   const [status, setStatus] = useState<'idle' | 'saved' | 'error' | 'load-error'>('idle');
   const { t, locale, setLocale } = useLocale();
+  const saveTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const dataLoaded = useRef(false);
 
   // Appearance state (localStorage-based)
   const [font, setFont] = useState('lora');
@@ -37,8 +38,8 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
   const [pluginStates, setPluginStates] = useState<Record<string, boolean>>({});
 
   useEffect(() => {
-    if (!open) return;
-    apiFetch<SettingsData>('/api/settings').then(setData).catch(() => setStatus('load-error'));
+    if (!open) { dataLoaded.current = false; return; }
+    apiFetch<SettingsData>('/api/settings').then(d => { setData(d); dataLoaded.current = true; }).catch(() => setStatus('load-error'));
     setFont(localStorage.getItem('prose-font') ?? 'lora');
     setContentWidth(localStorage.getItem('content-width') ?? '780px');
     const stored = localStorage.getItem('theme');
@@ -81,14 +82,14 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
     return () => window.removeEventListener('keydown', handler);
   }, [open, onClose]);
 
-  const handleSave = useCallback(async () => {
-    if (!data) return;
+  // Auto-save with debounce when data changes
+  const doSave = useCallback(async (d: SettingsData) => {
     setSaving(true);
     try {
       await apiFetch('/api/settings', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ai: data.ai, agent: data.agent, mindRoot: data.mindRoot, webPassword: data.webPassword, authToken: data.authToken }),
+        body: JSON.stringify({ ai: d.ai, agent: d.agent, mindRoot: d.mindRoot, webPassword: d.webPassword, authToken: d.authToken }),
       });
       setStatus('saved');
       setTimeout(() => setStatus('idle'), 2500);
@@ -98,7 +99,14 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
     } finally {
       setSaving(false);
     }
-  }, [data]);
+  }, []);
+
+  useEffect(() => {
+    if (!data || !dataLoaded.current) return;
+    clearTimeout(saveTimer.current);
+    saveTimer.current = setTimeout(() => doSave(data), 800);
+    return () => clearTimeout(saveTimer.current);
+  }, [data, doSave]);
 
   const updateAi = useCallback((patch: Partial<AiSettings>) => {
     setData(d => d ? { ...d, ai: { ...d.ai, ...patch } } : d);
@@ -117,36 +125,28 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
         openai:    { apiKey: '', model: '', baseUrl: '' },
       },
     };
+    // Set defaults — auto-save will persist them
     setData(d => d ? { ...d, ai: defaults } : d);
-    setSaving(true);
-    try {
-      await apiFetch('/api/settings', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ai: defaults, mindRoot: data.mindRoot }),
-      });
-      setStatus('saved');
-    } catch {
-      setStatus('error');
-    } finally {
-      setSaving(false);
-    }
-    apiFetch<SettingsData>('/api/settings').then(setData).catch(() => setStatus('error'));
-    setTimeout(() => setStatus('idle'), 2500);
+    // 🟢 MINOR #4: Refetch after auto-save completes (800ms debounce + 500ms save operation)
+    // Rather than magic 1200ms, wait for save to finish before refetching env-resolved values
+    const DEBOUNCE_DELAY = 800;
+    const SAVE_OPERATION_TIME = 500;
+    setTimeout(() => {
+      apiFetch<SettingsData>('/api/settings').then(d => { setData(d); }).catch(() => setStatus('error'));
+    }, DEBOUNCE_DELAY + SAVE_OPERATION_TIME);
   }, [data]);
 
   if (!open) return null;
 
   const env = data?.envOverrides ?? {};
 
-  const TABS: { id: Tab; label: string }[] = [
-    { id: 'ai', label: t.settings.tabs.ai },
-    { id: 'appearance', label: t.settings.tabs.appearance },
-    { id: 'knowledge', label: t.settings.tabs.knowledge },
-    { id: 'sync', label: t.settings.tabs.sync ?? 'Sync' },
-    { id: 'mcp', label: t.settings.tabs.mcp ?? 'MCP' },
-    { id: 'plugins', label: t.settings.tabs.plugins },
-    { id: 'shortcuts', label: t.settings.tabs.shortcuts },
+  const TABS: { id: Tab; label: string; icon: React.ReactNode }[] = [
+    { id: 'ai', label: t.settings.tabs.ai, icon: <Sparkles size={13} /> },
+    { id: 'appearance', label: t.settings.tabs.appearance, icon: <Palette size={13} /> },
+    { id: 'knowledge', label: t.settings.tabs.knowledge, icon: <Database size={13} /> },
+    { id: 'sync', label: t.settings.tabs.sync ?? 'Sync', icon: <RefreshCw size={13} /> },
+    { id: 'mcp', label: t.settings.tabs.mcp ?? 'MCP', icon: <Plug size={13} /> },
+    { id: 'plugins', label: t.settings.tabs.plugins, icon: <Puzzle size={13} /> },
   ];
 
   return (
@@ -177,12 +177,13 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
             <button
               key={t.id}
               onClick={() => setTab(t.id)}
-              className={`px-3 py-2.5 text-xs font-medium transition-colors border-b-2 -mb-px whitespace-nowrap ${
+              className={`flex items-center gap-1.5 px-3 py-2.5 text-xs font-medium transition-colors border-b-2 -mb-px whitespace-nowrap ${
                 tab === t.id
                   ? 'border-amber-500 text-foreground'
                   : 'border-transparent text-muted-foreground hover:text-foreground'
               }`}
             >
+              {t.icon}
               {t.label}
             </button>
           ))}
@@ -196,7 +197,7 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
               <p className="text-sm text-destructive font-medium">Failed to load settings</p>
               <p className="text-xs text-muted-foreground">Check that the server is running and AUTH_TOKEN is configured correctly.</p>
             </div>
-          ) : !data && tab !== 'shortcuts' && tab !== 'appearance' && tab !== 'mcp' && tab !== 'sync' ? (
+          ) : !data && tab !== 'appearance' && tab !== 'mcp' && tab !== 'sync' ? (
             <div className="flex justify-center py-8">
               <Loader2 size={18} className="animate-spin text-muted-foreground" />
             </div>
@@ -206,54 +207,47 @@ export default function SettingsModal({ open, onClose, initialTab }: SettingsMod
               {tab === 'appearance' && <AppearanceTab font={font} setFont={setFont} contentWidth={contentWidth} setContentWidth={setContentWidth} dark={dark} setDark={setDark} locale={locale} setLocale={setLocale} t={t} />}
               {tab === 'knowledge' && data && <KnowledgeTab data={data} setData={setData} t={t} />}
               {tab === 'plugins' && <PluginsTab pluginStates={pluginStates} setPluginStates={setPluginStates} t={t} />}
-              {tab === 'shortcuts' && <ShortcutsTab t={t} />}
               {tab === 'sync' && <SyncTab t={t} />}
               {tab === 'mcp' && <McpTab t={t} />}
             </>
           )}
         </div>
 
-        {/* Footer */}
+        {/* Footer — status bar + contextual actions */}
         {(tab === 'ai' || tab === 'knowledge') && (
-          <div className="px-5 py-3 border-t border-border shrink-0 flex items-center justify-between">
+          <div className="px-5 py-2.5 border-t border-border shrink-0 flex items-center justify-between">
             <div className="flex items-center gap-3">
               {tab === 'ai' && Object.values(env).some(Boolean) && (
                 <button
                   onClick={restoreFromEnv}
                   disabled={saving || !data}
-                  className="flex items-center gap-1.5 px-4 py-1.5 text-sm rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                  className="flex items-center gap-1.5 px-3 py-1 text-xs rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                 >
-                  <RotateCcw size={13} />
+                  <RotateCcw size={12} />
                   {t.settings.ai.restoreFromEnv}
                 </button>
               )}
               {tab === 'knowledge' && (
                 <a
                   href="/setup?force=1"
-                  className="flex items-center gap-1.5 px-4 py-1.5 text-sm rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                  className="flex items-center gap-1.5 px-3 py-1 text-xs rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
                 >
-                  <RotateCcw size={13} />
+                  <RotateCcw size={12} />
                   {t.settings.reconfigure}
                 </a>
               )}
-              <div className="flex items-center gap-1.5 text-xs">
-                {status === 'saved' && (
-                  <><CheckCircle2 size={13} className="text-success" /><span className="text-success">{t.settings.saved}</span></>
-                )}
-                {status === 'error' && (
-                  <><AlertCircle size={13} className="text-destructive" /><span className="text-destructive">{t.settings.saveFailed}</span></>
-                )}
-              </div>
             </div>
-            <button
-              onClick={handleSave}
-              disabled={saving || !data}
-              className="flex items-center gap-1.5 px-4 py-1.5 text-sm rounded-lg disabled:opacity-40 disabled:cursor-not-allowed transition-opacity"
-              style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
-            >
-              {saving ? <Loader2 size={13} className="animate-spin" /> : <Save size={13} />}
-              {t.settings.save}
-            </button>
+            <div className="flex items-center gap-1.5 text-xs" role="status" aria-live="polite">
+              {saving && (
+                <><Loader2 size={12} className="animate-spin text-muted-foreground" /><span className="text-muted-foreground">{t.settings.save}...</span></>
+              )}
+              {status === 'saved' && (
+                <><CheckCircle2 size={12} className="text-success" /><span className="text-success">{t.settings.saved}</span></>
+              )}
+              {status === 'error' && (
+                <><AlertCircle size={12} className="text-destructive" /><span className="text-destructive">{t.settings.saveFailed}</span></>
+              )}
+            </div>
           </div>
         )}
       </div>

package/app/components/Sidebar.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
+import { useRouter, usePathname } from 'next/navigation';
 import { Search, PanelLeftClose, PanelLeftOpen, Menu, X, Settings } from 'lucide-react';
 import FileTree from './FileTree';
 import SearchModal from './SearchModal';
@@ -45,6 +45,7 @@ export default function Sidebar({ fileTree, collapsed = false, onCollapse, onExp
   const [settingsTab, setSettingsTab] = useState<Tab | undefined>(undefined);
   const [mobileOpen, setMobileOpen] = useState(false);
   const { t } = useLocale();
+  const router = useRouter();
 
   // Shared sync status for collapsed dot & mobile dot
   const { status: syncStatus } = useSyncStatus();
@@ -54,6 +55,25 @@ export default function Sidebar({ fileTree, collapsed = false, onCollapse, onExp
     ? pathname.slice('/view/'.length).split('/').map(decodeURIComponent).join('/')
     : undefined;
 
+  // Refresh file tree when tab becomes visible (catches external changes from
+  // MCP agents, CLI edits, or other browser tabs) and periodically while visible.
+  useEffect(() => {
+    const onVisible = () => {
+      if (document.visibilityState === 'visible') router.refresh();
+    };
+    document.addEventListener('visibilitychange', onVisible);
+
+    // Light periodic refresh every 30s while tab is visible
+    const interval = setInterval(() => {
+      if (document.visibilityState === 'visible') router.refresh();
+    }, 30_000);
+
+    return () => {
+      document.removeEventListener('visibilitychange', onVisible);
+      clearInterval(interval);
+    };
+  }, [router]);
+
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
       if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); setSearchOpen(v => !v); }

package/app/components/settings/AiTab.tsx

@@ -2,8 +2,8 @@
 
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { AlertCircle, Loader2 } from 'lucide-react';
-import type { AiSettings, AgentSettings, ProviderConfig, SettingsData } from './types';
-import { Field, Select, Input, EnvBadge, ApiKeyInput } from './Primitives';
+import type { AiSettings, AgentSettings, ProviderConfig, SettingsData, AiTabProps } from './types';
+import { Field, Select, Input, EnvBadge, ApiKeyInput, Toggle } from './Primitives';
 
 type TestState = 'idle' | 'testing' | 'ok' | 'error';
 type ErrorCode = 'auth_error' | 'model_not_found' | 'rate_limited' | 'network_error' | 'unknown';
@@ -15,7 +15,7 @@ interface TestResult {
   code?: ErrorCode;
 }
 
-function errorMessage(t: any, code?: ErrorCode): string {
+function errorMessage(t: AiTabProps['t'], code?: ErrorCode): string {
   switch (code) {
     case 'auth_error': return t.settings.ai.testKeyAuthError;
     case 'model_not_found': return t.settings.ai.testKeyModelNotFound;
@@ -25,13 +25,6 @@ function errorMessage(t: any, code?: ErrorCode): string {
   }
 }
 
-interface AiTabProps {
-  data: SettingsData;
-  updateAi: (patch: Partial<AiSettings>) => void;
-  updateAgent: (patch: Partial<AgentSettings>) => void;
-  t: any;
-}
-
 export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
   const env = data.envOverrides ?? {};
   const envVal = data.envValues ?? {};
@@ -262,21 +255,7 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
                   <div className="text-sm text-foreground">{t.settings.agent.thinking}</div>
                   <div className="text-xs text-muted-foreground mt-0.5">{t.settings.agent.thinkingHint}</div>
                 </div>
-                <button
-                  type="button"
-                  role="switch"
-                  aria-checked={data.agent?.enableThinking ?? false}
-                  onClick={() => updateAgent({ enableThinking: !(data.agent?.enableThinking ?? false) })}
-                  className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
-                    data.agent?.enableThinking ? 'bg-amber-500' : 'bg-muted'
-                  }`}
-                >
-                  <span
-                    className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${
-                      data.agent?.enableThinking ? 'translate-x-4' : 'translate-x-0'
-                    }`}
-                  />
-                </button>
+                <Toggle checked={data.agent?.enableThinking ?? false} onChange={() => updateAgent({ enableThinking: !(data.agent?.enableThinking ?? false) })} />
               </div>
 
               {data.agent?.enableThinking && (

package/app/components/settings/AppearanceTab.tsx

@@ -1,22 +1,14 @@
 'use client';
 
+import { useState } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
 import { Locale } from '@/lib/i18n';
-import { CONTENT_WIDTHS, FONTS } from './types';
+import { CONTENT_WIDTHS, FONTS, AppearanceTabProps } from './types';
 import { Field, Select } from './Primitives';
 
-interface AppearanceTabProps {
-  font: string;
-  setFont: (v: string) => void;
-  contentWidth: string;
-  setContentWidth: (v: string) => void;
-  dark: boolean;
-  setDark: (v: boolean) => void;
-  locale: Locale;
-  setLocale: (v: Locale) => void;
-  t: any;
-}
-
 export function AppearanceTab({ font, setFont, contentWidth, setContentWidth, dark, setDark, locale, setLocale, t }: AppearanceTabProps) {
+  const [showShortcuts, setShowShortcuts] = useState(false);
+
   return (
     <div className="space-y-5">
       <Field label={t.settings.appearance.readingFont}>
@@ -96,6 +88,32 @@ export function AppearanceTab({ font, setFont, contentWidth, setContentWidth, da
       </Field>
 
       <p className="text-xs text-muted-foreground">{t.settings.appearance.browserNote}</p>
+
+      {/* Keyboard Shortcuts */}
+      <div className="border-t border-border pt-4">
+        <button
+          type="button"
+          onClick={() => setShowShortcuts(!showShortcuts)}
+          className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground uppercase tracking-wider hover:text-foreground transition-colors"
+        >
+          {showShortcuts ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+          {t.settings.tabs.shortcuts}
+        </button>
+        {showShortcuts && (
+          <div className="mt-3 space-y-1">
+            {t.shortcuts.map((s: { readonly description: string; readonly keys: readonly string[] }, i: number) => (
+              <div key={i} className="flex items-center justify-between py-2 border-b border-border last:border-0">
+                <span className="text-sm text-foreground">{s.description}</span>
+                <div className="flex items-center gap-1">
+                  {s.keys.map((k: string, j: number) => (
+                    <kbd key={j} className="px-2 py-0.5 text-xs font-mono bg-muted border border-border rounded text-foreground">{k}</kbd>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
     </div>
   );
 }

package/app/components/settings/KnowledgeTab.tsx

@@ -2,16 +2,10 @@
 
 import { useState, useEffect, useCallback, useSyncExternalStore } from 'react';
 import { Copy, Check, RefreshCw, Trash2, Sparkles } from 'lucide-react';
-import type { SettingsData } from './types';
-import { Field, Input, EnvBadge, SectionLabel } from './Primitives';
+import type { KnowledgeTabProps } from './types';
+import { Field, Input, EnvBadge, SectionLabel, Toggle } from './Primitives';
 import { apiFetch } from '@/lib/api';
 
-interface KnowledgeTabProps {
-  data: SettingsData;
-  setData: React.Dispatch<React.SetStateAction<SettingsData | null>>;
-  t: any;
-}
-
 export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
   const env = data.envOverrides ?? {};
   const k = t.settings.knowledge;
@@ -21,8 +15,8 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
   const [guideDismissed, setGuideDismissed] = useState(false);
 
   useEffect(() => {
-    fetch('/api/setup')
-      .then(r => r.json())
+    // 🟢 MINOR #5: Use apiFetch instead of raw fetch for consistency
+    apiFetch<{ guideState?: { active: boolean; dismissed: boolean } }>('/api/setup')
       .then(d => {
         const gs = d.guideState;
         if (gs) {
@@ -30,7 +24,9 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
           setGuideDismissed(!!gs.dismissed);
         }
       })
-      .catch(() => {});
+      .catch(err => {
+        console.error('Failed to fetch guide state:', err);
+      });
   }, []);
 
   const handleGuideToggle = useCallback(() => {
@@ -39,13 +35,16 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
     // If re-enabling, also ensure active is true
     const patch: Record<string, boolean> = { dismissed: newDismissed };
     if (!newDismissed) patch.active = true;
-    fetch('/api/setup', {
+    apiFetch('/api/setup', {
       method: 'PATCH',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ guideState: patch }),
     })
       .then(() => window.dispatchEvent(new Event('guide-state-updated')))
-      .catch(() => setGuideDismissed(!newDismissed)); // rollback on failure
+      .catch(err => {
+        console.error('Failed to update guide state:', err);
+        setGuideDismissed(!newDismissed); // rollback on failure
+      });
   }, [guideDismissed]);
 
   const origin = useSyncExternalStore(
@@ -202,21 +201,7 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
                 <div className="text-sm text-foreground">{t.guide?.showGuide ?? 'Show getting started guide'}</div>
               </div>
             </div>
-            <button
-              type="button"
-              role="switch"
-              aria-checked={!guideDismissed}
-              onClick={handleGuideToggle}
-              className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
-                !guideDismissed ? 'bg-amber-500' : 'bg-muted'
-              }`}
-            >
-              <span
-                className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${
-                  !guideDismissed ? 'translate-x-4' : 'translate-x-0'
-                }`}
-              />
-            </button>
+            <Toggle checked={!guideDismissed} onChange={() => handleGuideToggle()} />
           </div>
         </div>
       )}