@geminilight/mindos 0.6.73 → 0.6.74

package/_standalone/components/settings/KnowledgeTab.tsx

@@ -1,719 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback, useSyncExternalStore, useRef } from 'react';
-import { Copy, Check, RefreshCw, Trash2, Sparkles, ChevronDown, ChevronRight, Loader2, Cpu, Zap, Database as DatabaseIcon, HardDrive, RotateCcw, FlaskConical, Search, Download } from 'lucide-react';
-import { toast } from '@/lib/toast';
-import type { KnowledgeTabProps } from './types';
-import { Field, Input, EnvBadge, SectionLabel, Toggle, SettingCard, SettingRow, PasswordInput } from './Primitives';
-import { ConfirmDialog } from '@/components/agents/AgentsPrimitives';
-import { apiFetch } from '@/lib/api';
-import { copyToClipboard } from '@/lib/clipboard';
-import { formatBytes, formatUptime } from '@/lib/format';
-import { setShowHiddenFiles } from '@/components/FileTree';
-import { scanExampleFilesAction, cleanupExamplesAction } from '@/lib/actions';
-
-export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
-  const env = data.envOverrides ?? {};
-  const k = t.settings.knowledge;
-  const a = t.settings.appearance;
-
-  // Labs feature flags
-  const [labsEcho, setLabsEcho] = useState(() =>
-    typeof window !== 'undefined' ? localStorage.getItem('mindos:labs-echo') === '1' : false
-  );
-  const [labsWorkflows, setLabsWorkflows] = useState(() =>
-    typeof window !== 'undefined' ? localStorage.getItem('mindos:labs-workflows') === '1' : false
-  );
-
-  // Hidden files toggle
-  const [showHidden, setShowHidden] = useState(() =>
-    typeof window !== 'undefined' && localStorage.getItem('show-hidden-files') === 'true'
-  );
-
-  // Example files cleanup
-  const [exampleCount, setExampleCount] = useState<number | null>(null);
-  const [cleaningUp, setCleaningUp] = useState(false);
-  const [cleanupResult, setCleanupResult] = useState<number | null>(null);
-
-  useEffect(() => {
-    scanExampleFilesAction().then(r => setExampleCount(r.files.length)).catch((err) => { console.warn("[KnowledgeTab] scanExampleFilesAction failed:", err); });
-  }, []);
-
-  // Guide state toggle
-  const [guideActive, setGuideActive] = useState<boolean | null>(null);
-  const [guideDismissed, setGuideDismissed] = useState(false);
-
-  useEffect(() => {
-    // 🟢 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) {
-          setGuideActive(gs.active);
-          setGuideDismissed(!!gs.dismissed);
-        }
-      })
-      .catch(err => {
-        console.error('Failed to fetch guide state:', err);
-      });
-  }, []);
-
-  const handleGuideToggle = useCallback(() => {
-    const newDismissed = !guideDismissed;
-    setGuideDismissed(newDismissed);
-    // If re-enabling, also ensure active is true
-    const patch: Record<string, boolean> = { dismissed: newDismissed };
-    if (!newDismissed) patch.active = true;
-    apiFetch('/api/setup', {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ guideState: patch }),
-    })
-      .then(() => window.dispatchEvent(new Event('guide-state-updated')))
-      .catch(err => {
-        console.error('Failed to update guide state:', err);
-        setGuideDismissed(!newDismissed); // rollback on failure
-      });
-  }, [guideDismissed]);
-
-  const handleRestartWalkthrough = useCallback(() => {
-    apiFetch('/api/setup', {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        guideState: {
-          active: true,
-          dismissed: false,
-          walkthroughStep: 0,
-          walkthroughDismissed: false,
-        },
-      }),
-    })
-      .then(() => {
-        setGuideActive(true);
-        setGuideDismissed(false);
-        window.dispatchEvent(new Event('guide-state-updated'));
-      })
-      .catch(err => console.error('Failed to restart walkthrough:', err));
-  }, []);
-
-  // Embedding config
-  const embeddingData = data.embedding ?? { enabled: false, provider: 'local' as const, baseUrl: '', apiKey: '', model: '' };
-  const embeddingStatus = data.embeddingStatus ?? { enabled: false, ready: false, building: false, docCount: 0 };
-  const embeddingProvider = embeddingData.provider || 'local';
-
-  const [localModelDownloaded, setLocalModelDownloaded] = useState<boolean | null>(null);
-  const [downloading, setDownloading] = useState(false);
-
-  // Check local model status when Local mode is selected
-  useEffect(() => {
-    if (embeddingData.enabled && embeddingProvider === 'local') {
-      apiFetch<{ downloaded: boolean }>('/api/embedding')
-        .then(d => setLocalModelDownloaded(d.downloaded))
-        .catch(() => setLocalModelDownloaded(false));
-    }
-  }, [embeddingData.enabled, embeddingProvider]);
-
-  // Poll download status
-  useEffect(() => {
-    if (!downloading) return;
-    const id = setInterval(() => {
-      apiFetch<{ downloading: boolean; downloaded: boolean; error: string | null }>('/api/embedding', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ action: 'status' }),
-      }).then(d => {
-        if (d.downloaded) {
-          setLocalModelDownloaded(true);
-          setDownloading(false);
-          toast.success?.('Model downloaded successfully') ?? toast('Model downloaded');
-        }
-        if (d.error) {
-          setDownloading(false);
-          toast.error?.(d.error) ?? toast(d.error);
-        }
-      }).catch(() => {});
-    }, 3000);
-    return () => clearInterval(id);
-  }, [downloading]);
-
-  const handleDownloadModel = useCallback(() => {
-    setDownloading(true);
-    apiFetch('/api/embedding', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'download', model: embeddingData.model || undefined }),
-    }).catch(() => setDownloading(false));
-  }, [embeddingData.model]);
-
-  const API_PRESETS = [
-    { label: 'OpenAI', baseUrl: 'https://api.openai.com/v1', model: 'text-embedding-3-small' },
-    { label: 'DeepSeek', baseUrl: 'https://api.deepseek.com/v1', model: 'deepseek-embed' },
-    { label: 'Ollama', baseUrl: 'http://localhost:11434/v1', model: 'nomic-embed-text' },
-  ];
-
-  const LOCAL_MODELS = [
-    { id: 'Xenova/bge-small-zh-v1.5', label: 'BGE Small ZH (33MB)', desc: 'Chinese + English' },
-    { id: 'Xenova/all-MiniLM-L6-v2', label: 'MiniLM L6 (23MB)', desc: 'English only' },
-    { id: 'Xenova/bge-small-en-v1.5', label: 'BGE Small EN (33MB)', desc: 'English only' },
-  ];
-
-  const origin = useSyncExternalStore(
-    () => () => {},
-    () => `${window.location.protocol}//${window.location.hostname}`,
-    () => 'http://localhost',
-  );
-
-  const [resetting, setResetting] = useState(false);
-  // revealed holds the plaintext token after regenerate, until user navigates away
-  const [revealedToken, setRevealedToken] = useState<string | null>(null);
-  const [showResetConfirm, setShowResetConfirm] = useState(false);
-  const [showCleanupConfirm, setShowCleanupConfirm] = useState(false);
-
-  const hasToken = !!(data.authToken);
-  const displayToken = revealedToken ?? data.authToken ?? '';
-
-  function handleResetToken() {
-    setShowResetConfirm(true);
-  }
-
-  async function doResetToken() {
-    setResetting(true);
-    try {
-      const res = await apiFetch<{ ok: boolean; token: string }>('/api/settings/reset-token', { method: 'POST' });
-      setRevealedToken(res.token);
-      setData(d => d ? { ...d, authToken: res.token } : d);
-    } finally {
-      setResetting(false);
-    }
-  }
-
-  async function handleClearToken() {
-    setData(d => d ? { ...d, authToken: '' } : d);
-    setRevealedToken(null);
-  }
-
-  function handleCopy() {
-    const text = revealedToken ?? data.authToken ?? '';
-    if (!text) return;
-    copyToClipboard(text).then((ok) => {
-      if (ok) toast.copy();
-    });
-  }
-
-  return (
-    <div className="space-y-4">
-      {/* ── Card 1: Knowledge Base ── */}
-      <SettingCard
-        icon={<DatabaseIcon size={15} />}
-        title={k.cardTitle ?? 'Knowledge Base'}
-        description={k.mindRootHint}
-      >
-        <Field
-          label={<>{k.mindRoot} <EnvBadge overridden={env.MIND_ROOT} /></>}
-          hint={env.MIND_ROOT ? k.envNote : k.mindRootHint}
-        >
-          <Input
-            value={data.mindRoot}
-            onChange={e => setData(d => d ? { ...d, mindRoot: e.target.value } : d)}
-            placeholder="/path/to/your/notes"
-          />
-        </Field>
-
-        <SettingRow label={k.showHiddenFiles} hint={k.showHiddenFilesHint}>
-          <Toggle checked={showHidden} onChange={() => {
-            const next = !showHidden;
-            setShowHidden(next);
-            setShowHiddenFiles(next);
-          }} />
-        </SettingRow>
-
-        {exampleCount !== null && exampleCount > 0 && cleanupResult === null && (
-          <SettingRow label={k.cleanupExamples} hint={k.cleanupExamplesHint}>
-            <button
-              onClick={() => setShowCleanupConfirm(true)}
-              disabled={cleaningUp}
-              title={cleaningUp ? t.hints.cleanupInProgress : undefined}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0 disabled:opacity-50"
-            >
-              {cleaningUp ? <Loader2 size={12} className="animate-spin" /> : <Trash2 size={12} />}
-              {k.cleanupExamplesButton}
-              <span className="ml-1 tabular-nums text-2xs opacity-70">{exampleCount}</span>
-            </button>
-          </SettingRow>
-        )}
-        {cleanupResult !== null && (
-          <div className="flex items-center gap-2 text-xs text-success">
-            <Check size={14} />
-            {k.cleanupExamplesDone(cleanupResult)}
-          </div>
-        )}
-      </SettingCard>
-
-      {/* ── Card 2: Security ── */}
-      <SettingCard
-        icon={<HardDrive size={15} />}
-        title={k.securityTitle ?? 'Security'}
-      >
-        <Field label={k.webPassword} hint={k.webPasswordHint}>
-          <PasswordInput
-            value={data.webPassword ?? ''}
-            onChange={v => setData(d => d ? { ...d, webPassword: v } : d)}
-            placeholder={k.passwordPlaceholder ?? 'Leave empty to disable'}
-          />
-        </Field>
-
-        <Field
-          label={k.authToken}
-          hint={hasToken ? k.authTokenHint : k.authTokenNone}
-        >
-          <div className="space-y-2">
-            {/* Token display */}
-            <div className="flex items-center gap-2 px-3 py-2 bg-background border border-border rounded-lg min-h-[38px]">
-              <code className="flex-1 text-xs font-mono text-foreground break-all select-all">
-                {displayToken || <span className="text-muted-foreground italic">{k.tokenNotSet ?? '— not set —'}</span>}
-              </code>
-              {displayToken && (
-                <button
-                  type="button"
-                  onClick={handleCopy}
-                  className="shrink-0 p-1 rounded text-muted-foreground hover:text-foreground transition-colors"
-                  title={k.authTokenCopy}
-                >
-                  <Copy size={13} />
-                </button>
-              )}
-            </div>
-            {/* MCP port info */}
-            {data.mcpPort && (
-              <p className="text-xs text-muted-foreground">
-                {k.authTokenMcpPort}: <code className="font-mono">{data.mcpPort}</code>
-                {displayToken && (
-                  <> &nbsp;·&nbsp; {k.mcpUrl ?? 'MCP URL'}: <code className="font-mono select-all">
-                    {`${origin}:${data.mcpPort}/mcp`}
-                  </code></>
-                )}
-              </p>
-            )}
-            {/* Action buttons */}
-            <div className="flex gap-2">
-              <button
-                type="button"
-                onClick={handleResetToken}
-                disabled={resetting}
-                title={resetting ? t.hints.tokenResetInProgress : undefined}
-                className="flex items-center gap-1.5 px-3 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"
-              >
-                <RefreshCw size={14} className={resetting ? 'animate-spin' : ''} />
-                {k.authTokenReset}
-              </button>
-              {hasToken && (
-                <button
-                  type="button"
-                  onClick={handleClearToken}
-                  className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg border border-border text-muted-foreground hover:text-destructive hover:border-destructive/50 transition-colors"
-                >
-                  <Trash2 size={14} />
-                  {k.authTokenClear}
-                </button>
-              )}
-            </div>
-            {revealedToken && (
-              <p className="text-xs text-[var(--amber-text)]">
-                {k.tokenGenerated}
-              </p>
-            )}
-          </div>
-        </Field>
-      </SettingCard>
-
-      {/* ── Card 3: Getting Started ── */}
-      {guideActive !== null && (
-        <SettingCard
-          icon={<Sparkles size={15} />}
-          title={t.guide?.title ?? 'Getting Started'}
-        >
-          <SettingRow label={t.guide?.showGuide ?? 'Show getting started guide'}>
-            <Toggle checked={!guideDismissed} onChange={() => handleGuideToggle()} />
-          </SettingRow>
-          <button
-            onClick={handleRestartWalkthrough}
-            className="flex items-center gap-1.5 mt-2 px-3 py-1.5 text-sm rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-          >
-            <RotateCcw size={14} />
-            {k.restartWalkthrough ?? 'Restart walkthrough'}
-          </button>
-        </SettingCard>
-      )}
-
-      {/* ── Card: Embedding Search (optional RAG) ── */}
-      <SettingCard
-        icon={<Search size={15} />}
-        title="Embedding Search"
-        description="Enable semantic search with vector embeddings. Finds notes by meaning, not just exact words."
-      >
-        <SettingRow label="Enable embedding search" hint="Combines keyword matching (BM25) with semantic similarity.">
-          <Toggle
-            checked={embeddingData.enabled}
-            onChange={() => {
-              setData(d => d ? { ...d, embedding: { ...embeddingData, enabled: !embeddingData.enabled } } : d);
-            }}
-          />
-        </SettingRow>
-
-        {embeddingData.enabled && (
-          <>
-            {/* Provider toggle: Local vs API */}
-            <div className="flex gap-2">
-              <button
-                type="button"
-                onClick={() => setData(d => d ? { ...d, embedding: { ...embeddingData, provider: 'local', model: embeddingData.model || 'Xenova/bge-small-zh-v1.5' } } : d)}
-                className={`flex-1 px-3 py-2 text-sm rounded-lg border transition-colors text-center ${
-                  embeddingProvider === 'local'
-                    ? 'border-[var(--amber)] text-[var(--amber)] bg-[var(--amber)]/10'
-                    : 'border-border text-muted-foreground hover:text-foreground hover:bg-muted'
-                }`}
-              >
-                <span className="font-medium">Local (Free)</span>
-                <span className="block text-xs opacity-70 mt-0.5">Runs on your machine, no API key needed</span>
-              </button>
-              <button
-                type="button"
-                onClick={() => setData(d => d ? { ...d, embedding: { ...embeddingData, provider: 'api', model: embeddingData.model || 'text-embedding-3-small' } } : d)}
-                className={`flex-1 px-3 py-2 text-sm rounded-lg border transition-colors text-center ${
-                  embeddingProvider === 'api'
-                    ? 'border-[var(--amber)] text-[var(--amber)] bg-[var(--amber)]/10'
-                    : 'border-border text-muted-foreground hover:text-foreground hover:bg-muted'
-                }`}
-              >
-                <span className="font-medium">API</span>
-                <span className="block text-xs opacity-70 mt-0.5">OpenAI, DeepSeek, Ollama, etc.</span>
-              </button>
-            </div>
-
-            {/* ── Local provider UI ── */}
-            {embeddingProvider === 'local' && (
-              <>
-                {/* Model selector */}
-                <Field label="Model" hint="Choose a model. Smaller models are faster.">
-                  <div className="space-y-1.5">
-                    {LOCAL_MODELS.map(m => (
-                      <label
-                        key={m.id}
-                        className={`flex items-center gap-3 px-3 py-2 rounded-lg border cursor-pointer transition-colors ${
-                          embeddingData.model === m.id
-                            ? 'border-[var(--amber)] bg-[var(--amber)]/5'
-                            : 'border-border hover:bg-muted'
-                        }`}
-                      >
-                        <input
-                          type="radio"
-                          name="local-model"
-                          checked={embeddingData.model === m.id}
-                          onChange={() => setData(d => d ? { ...d, embedding: { ...embeddingData, model: m.id } } : d)}
-                          className="accent-[var(--amber)]"
-                        />
-                        <div className="flex-1 min-w-0">
-                          <span className="text-sm font-medium text-foreground">{m.label}</span>
-                          <span className="ml-2 text-xs text-muted-foreground">{m.desc}</span>
-                        </div>
-                      </label>
-                    ))}
-                  </div>
-                </Field>
-
-                {/* Download button */}
-                {localModelDownloaded === false && !downloading && (
-                  <button
-                    type="button"
-                    onClick={handleDownloadModel}
-                    className="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg bg-[var(--amber)] text-[var(--amber-foreground)] hover:opacity-90 transition-opacity"
-                  >
-                    <Download size={14} />
-                    Download Model
-                  </button>
-                )}
-                {downloading && (
-                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                    <Loader2 size={14} className="animate-spin" />
-                    <span>Downloading model... This may take a minute.</span>
-                  </div>
-                )}
-                {localModelDownloaded === true && (
-                  <div className="flex items-center gap-2 text-xs text-success">
-                    <Check size={12} />
-                    <span>Model ready</span>
-                  </div>
-                )}
-              </>
-            )}
-
-            {/* ── API provider UI ── */}
-            {embeddingProvider === 'api' && (
-              <>
-                {/* Preset buttons */}
-                <div className="flex gap-2 flex-wrap">
-                  {API_PRESETS.map(p => (
-                    <button
-                      key={p.label}
-                      type="button"
-                      onClick={() => {
-                        setData(d => d ? { ...d, embedding: { ...embeddingData, baseUrl: p.baseUrl, model: p.model } } : d);
-                      }}
-                      className={`px-2.5 py-1 text-xs rounded-md border transition-colors ${
-                        embeddingData.baseUrl === p.baseUrl
-                          ? 'border-[var(--amber)] text-[var(--amber)] bg-[var(--amber)]/10'
-                          : 'border-border text-muted-foreground hover:text-foreground hover:bg-muted'
-                      }`}
-                    >
-                      {p.label}
-                    </button>
-                  ))}
-                </div>
-
-                <Field label="Base URL" hint="OpenAI-compatible embedding endpoint">
-                  <Input
-                    value={embeddingData.baseUrl}
-                    onChange={e => setData(d => d ? { ...d, embedding: { ...embeddingData, baseUrl: e.target.value } } : d)}
-                    placeholder="https://api.openai.com/v1"
-                  />
-                </Field>
-
-                <Field label="API Key" hint="Leave empty for local providers (e.g., Ollama)">
-                  <PasswordInput
-                    value={embeddingData.apiKey}
-                    onChange={v => setData(d => d ? { ...d, embedding: { ...embeddingData, apiKey: v } } : d)}
-                    placeholder="sk-..."
-                  />
-                </Field>
-
-                <Field label="Model" hint="Embedding model name">
-                  <Input
-                    value={embeddingData.model}
-                    onChange={e => setData(d => d ? { ...d, embedding: { ...embeddingData, model: e.target.value } } : d)}
-                    placeholder="text-embedding-3-small"
-                  />
-                </Field>
-              </>
-            )}
-
-            {/* Index status */}
-            <div className="flex items-center gap-2 text-xs text-muted-foreground pt-1">
-              {embeddingStatus.building ? (
-                <>
-                  <Loader2 size={12} className="animate-spin" />
-                  <span>Building embedding index...</span>
-                </>
-              ) : embeddingStatus.ready ? (
-                <>
-                  <Check size={12} className="text-success" />
-                  <span>{embeddingStatus.docCount} documents indexed</span>
-                </>
-              ) : (
-                <span>Index will be built on first search</span>
-              )}
-            </div>
-          </>
-        )}
-      </SettingCard>
-
-      {/* ── Card 4: Labs — experimental features ── */}
-      <SettingCard icon={<FlaskConical size={15} />} title={a.labsTitle ?? 'Labs'} description={a.labsDesc ?? 'Experimental features that are still in development.'}>
-        <div className="space-y-3">
-          <LabsToggle
-            label={a.labsEcho ?? 'Echo'}
-            description={a.labsEchoDesc ?? 'Reflective journaling powered by your notes.'}
-            checked={labsEcho}
-            onChange={v => {
-              setLabsEcho(v);
-              localStorage.setItem('mindos:labs-echo', v ? '1' : '0');
-              window.dispatchEvent(new Event('mindos:labs-changed'));
-            }}
-          />
-          <LabsToggle
-            label={a.labsWorkflows ?? 'Flows'}
-            description={a.labsWorkflowsDesc ?? 'Visual workflow automation for agents.'}
-            checked={labsWorkflows}
-            onChange={v => {
-              setLabsWorkflows(v);
-              localStorage.setItem('mindos:labs-workflows', v ? '1' : '0');
-              window.dispatchEvent(new Event('mindos:labs-changed'));
-            }}
-          />
-        </div>
-      </SettingCard>
-
-      {/* System Monitoring — collapsible */}
-      <MonitoringSection k={k} />
-
-      <ConfirmDialog
-        open={showResetConfirm}
-        title={k.authTokenReset ?? 'Regenerate Token'}
-        message={k.authTokenResetConfirm}
-        confirmLabel={k.authTokenReset ?? 'Regenerate'}
-        cancelLabel={k.cancel ?? 'Cancel'}
-        onConfirm={() => { setShowResetConfirm(false); doResetToken(); }}
-        onCancel={() => setShowResetConfirm(false)}
-      />
-      <ConfirmDialog
-        open={showCleanupConfirm}
-        title={k.cleanupExamples ?? 'Cleanup Examples'}
-        message={exampleCount !== null ? k.cleanupExamplesConfirm(exampleCount) : ''}
-        confirmLabel={k.cleanupExamplesButton ?? 'Clean up'}
-        cancelLabel={k.cancel ?? 'Cancel'}
-        variant="destructive"
-        onConfirm={async () => {
-          setShowCleanupConfirm(false);
-          setCleaningUp(true);
-          const r = await cleanupExamplesAction();
-          setCleaningUp(false);
-          if (r.success) {
-            setCleanupResult(r.deleted);
-            setExampleCount(0);
-          }
-        }}
-        onCancel={() => setShowCleanupConfirm(false)}
-      />
-    </div>
-  );
-}
-
-/* ── Labs Toggle ── */
-function LabsToggle({ label, description, checked, onChange }: {
-  label: string;
-  description: string;
-  checked: boolean;
-  onChange: (v: boolean) => void;
-}) {
-  return (
-    <label className="flex items-center gap-3 cursor-pointer group">
-      <div className="flex-1 min-w-0">
-        <span className="text-sm font-medium text-foreground block">{label}</span>
-        <span className="text-xs text-muted-foreground">{description}</span>
-      </div>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={checked}
-        onClick={() => onChange(!checked)}
-        className={`relative w-9 h-5 rounded-full transition-colors shrink-0 ${
-          checked ? 'bg-[var(--amber)]' : 'bg-muted-foreground/20'
-        }`}
-      >
-        <span className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-transform ${
-          checked ? 'translate-x-4' : 'translate-x-0'
-        }`} />
-      </button>
-    </label>
-  );
-}
-
-/* ── Inline Monitoring Section ── */
-
-interface MonitoringData {
-  system: {
-    uptimeMs: number;
-    memory: { heapUsed: number; heapTotal: number; rss: number };
-    nodeVersion: string;
-  };
-  application: {
-    agentRequests: number;
-    toolExecutions: number;
-    totalTokens: { input: number; output: number };
-    avgResponseTimeMs: number;
-    errors: number;
-  };
-  knowledgeBase: {
-    root: string;
-    fileCount: number;
-    totalSizeBytes: number;
-  };
-  mcp: { running: boolean; port: number };
-}
-
-function MonitoringSection({ k }: { k: Record<string, unknown> }) {
-  const [expanded, setExpanded] = useState(false);
-  const [data, setData] = useState<MonitoringData | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  const fetchData = useCallback(async () => {
-    setLoading(true);
-    try {
-      const d = await apiFetch<MonitoringData>('/api/monitoring', { timeout: 5000 });
-      setData(d);
-    } catch { /* ignore */ }
-    setLoading(false);
-  }, []);
-
-  // Fetch on first expand, then refresh every 10s while expanded
-  const hasFetched = useRef(false);
-  useEffect(() => {
-    if (!expanded) { hasFetched.current = false; return; }
-    if (!hasFetched.current) { fetchData(); hasFetched.current = true; }
-    const id = setInterval(fetchData, 10_000);
-    return () => clearInterval(id);
-  }, [expanded, fetchData]);
-
-  return (
-    <div className="border-t border-border pt-5">
-      <button
-        onClick={() => setExpanded(v => !v)}
-        className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors w-full"
-      >
-        {expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-        <Cpu size={12} />
-        {(k.monitoringTitle as string) ?? 'System Monitoring'}
-        {loading && <Loader2 size={10} className="animate-spin ml-1" />}
-      </button>
-
-      {expanded && data && (
-        <div className="mt-3 grid grid-cols-2 gap-x-6 gap-y-2 text-xs">
-          <div>
-            <span className="text-muted-foreground">{(k.monitorHeap as string) ?? 'Heap'}</span>
-            <span className="ml-2 tabular-nums">{formatBytes(data.system.memory.heapUsed)} / {formatBytes(data.system.memory.heapTotal)}</span>
-          </div>
-          <div>
-            <span className="text-muted-foreground">{(k.monitorRss as string) ?? 'RSS'}</span>
-            <span className="ml-2 tabular-nums">{formatBytes(data.system.memory.rss)}</span>
-          </div>
-          <div>
-            <span className="text-muted-foreground">{(k.monitorUptime as string) ?? 'Uptime'}</span>
-            <span className="ml-2 tabular-nums">{formatUptime(data.system.uptimeMs)}</span>
-          </div>
-          <div>
-            <span className="text-muted-foreground">{(k.monitorNode as string) ?? 'Node'}</span>
-            <span className="ml-2">{data.system.nodeVersion}</span>
-          </div>
-          <div>
-            <span className="text-muted-foreground">{(k.monitorRequests as string) ?? 'Requests'}</span>
-            <span className="ml-2 tabular-nums">{data.application.agentRequests}</span>
-          </div>
-          <div>
-            <span className="text-muted-foreground">{(k.monitorToolCalls as string) ?? 'Tool Calls'}</span>
-            <span className="ml-2 tabular-nums">{data.application.toolExecutions}</span>
-          </div>
-          <div>
-            <span className="text-muted-foreground">{(k.monitorTokens as string) ?? 'Tokens'}</span>
-            <span className="ml-2 tabular-nums">{(data.application.totalTokens.input + data.application.totalTokens.output).toLocaleString()}</span>
-          </div>
-          <div>
-            <span className="text-muted-foreground">{(k.monitorFiles as string) ?? 'Files'}</span>
-            <span className="ml-2 tabular-nums">{data.knowledgeBase.fileCount} ({formatBytes(data.knowledgeBase.totalSizeBytes)})</span>
-          </div>
-          <div>
-            <span className="text-muted-foreground">MCP</span>
-            <span className="ml-2">{data.mcp.running ? ((k.monitorMcpRunning as (p: number) => string)?.(data.mcp.port) ?? `Running :${data.mcp.port}`) : ((k.monitorMcpStopped as string) ?? 'Stopped')}</span>
-          </div>
-          <div>
-            <span className="text-muted-foreground">{(k.monitorErrors as string) ?? 'Errors'}</span>
-            <span className="ml-2 tabular-nums">{data.application.errors}</span>
-          </div>
-        </div>
-      )}
-
-      {expanded && !data && !loading && (
-        <p className="mt-2 text-xs text-muted-foreground">{(k.monitoringFailed as string) ?? 'Failed to load monitoring data'}</p>
-      )}
-    </div>
-  );
-}