@geminilight/mindos 0.5.21 → 0.5.23

package/app/components/settings/AgentsTab.tsx

@@ -0,0 +1,240 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Loader2, RefreshCw, ChevronDown, ChevronRight, ExternalLink } from 'lucide-react';
+import { apiFetch } from '@/lib/api';
+import type { McpStatus, AgentInfo } from './types';
+import type { Messages } from '@/lib/i18n';
+
+interface AgentsTabProps {
+  t: Messages;
+}
+
+export function AgentsTab({ t }: AgentsTabProps) {
+  const [agents, setAgents] = useState<AgentInfo[]>([]);
+  const [mcpStatus, setMcpStatus] = useState<McpStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [showNotDetected, setShowNotDetected] = useState(false);
+  const intervalRef = useRef<ReturnType<typeof setInterval>>(undefined);
+
+  const a = t.settings?.agents as Record<string, unknown> | undefined;
+
+  // i18n helpers with fallbacks
+  const txt = (key: string, fallback: string) => (a?.[key] as string) ?? fallback;
+  const txtFn = <T,>(key: string, fallback: (v: T) => string) =>
+    (a?.[key] as ((v: T) => string) | undefined) ?? fallback;
+
+  const fetchAll = useCallback(async (silent = false) => {
+    if (!silent) setError(false);
+    try {
+      const [statusData, agentsData] = await Promise.all([
+        apiFetch<McpStatus>('/api/mcp/status'),
+        apiFetch<{ agents: AgentInfo[] }>('/api/mcp/agents'),
+      ]);
+      setMcpStatus(statusData);
+      setAgents(agentsData.agents);
+      setError(false);
+    } catch {
+      if (!silent) setError(true);
+    }
+    setLoading(false);
+    setRefreshing(false);
+  }, []);
+
+  // Initial fetch + 30s auto-refresh
+  useEffect(() => {
+    fetchAll();
+    intervalRef.current = setInterval(() => fetchAll(true), 30_000);
+    return () => clearInterval(intervalRef.current);
+  }, [fetchAll]);
+
+  const handleRefresh = () => {
+    setRefreshing(true);
+    fetchAll();
+  };
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-8">
+        <Loader2 size={18} className="animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (error && agents.length === 0) {
+    return (
+      <div className="flex flex-col items-center gap-3 py-8 text-center">
+        <p className="text-sm text-destructive">{txt('fetchError', 'Failed to load agent data')}</p>
+        <button
+          onClick={handleRefresh}
+          className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+        >
+          <RefreshCw size={12} />
+          {txt('refresh', 'Refresh')}
+        </button>
+      </div>
+    );
+  }
+
+  // Group agents
+  const connected = agents.filter(a => a.present && a.installed);
+  const detected = agents.filter(a => a.present && !a.installed);
+  const notFound = agents.filter(a => !a.present);
+
+  return (
+    <div className="space-y-5">
+      {/* MCP Server Status */}
+      <div className="rounded-xl border border-border bg-card p-4 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <span className="text-sm font-medium text-foreground">{txt('mcpServer', 'MCP Server')}</span>
+          {mcpStatus?.running ? (
+            <span className="flex items-center gap-1.5 text-xs">
+              <span className="w-2 h-2 rounded-full bg-emerald-500 inline-block" />
+              <span className="text-emerald-600 dark:text-emerald-400">
+                {txt('running', 'Running')} {txtFn<number>('onPort', (p) => `on :${p}`)(mcpStatus.port)}
+              </span>
+            </span>
+          ) : (
+            <span className="flex items-center gap-1.5 text-xs">
+              <span className="w-2 h-2 rounded-full bg-zinc-400 inline-block" />
+              <span className="text-muted-foreground">{txt('stopped', 'Not running')}</span>
+            </span>
+          )}
+        </div>
+        <button
+          onClick={handleRefresh}
+          disabled={refreshing}
+          className="flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-50 transition-colors"
+        >
+          <RefreshCw size={12} className={refreshing ? 'animate-spin' : ''} />
+          {refreshing ? txt('refreshing', 'Refreshing...') : txt('refresh', 'Refresh')}
+        </button>
+      </div>
+
+      {/* Connected Agents */}
+      {connected.length > 0 && (
+        <section>
+          <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">
+            {txtFn<number>('connectedCount', (n) => `Connected (${n})`)(connected.length)}
+          </h3>
+          <div className="space-y-2">
+            {connected.map(agent => (
+              <AgentCard key={agent.key} agent={agent} status="connected" />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Detected but not configured */}
+      {detected.length > 0 && (
+        <section>
+          <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">
+            {txtFn<number>('detectedCount', (n) => `Detected but not configured (${n})`)(detected.length)}
+          </h3>
+          <div className="space-y-2">
+            {detected.map(agent => (
+              <AgentCard
+                key={agent.key}
+                agent={agent}
+                status="detected"
+                connectLabel={txt('connect', 'Connect')}
+              />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Not Detected */}
+      {notFound.length > 0 && (
+        <section>
+          <button
+            onClick={() => setShowNotDetected(!showNotDetected)}
+            className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3 hover:text-foreground transition-colors"
+          >
+            {showNotDetected ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+            {txtFn<number>('notDetectedCount', (n) => `Not Detected (${n})`)(notFound.length)}
+          </button>
+          {showNotDetected && (
+            <div className="space-y-2">
+              {notFound.map(agent => (
+                <AgentCard key={agent.key} agent={agent} status="notFound" />
+              ))}
+            </div>
+          )}
+        </section>
+      )}
+
+      {/* Empty state */}
+      {agents.length === 0 && (
+        <p className="text-sm text-muted-foreground text-center py-4">
+          {txt('noAgents', 'No agents detected on this machine.')}
+        </p>
+      )}
+
+      {/* Auto-refresh hint */}
+      <p className="text-[10px] text-muted-foreground/60 text-center">
+        {txt('autoRefresh', 'Auto-refresh every 30s')}
+      </p>
+    </div>
+  );
+}
+
+/* ── Agent Card ──────────────────────────────────────────────── */
+
+function AgentCard({
+  agent,
+  status,
+  connectLabel,
+}: {
+  agent: AgentInfo;
+  status: 'connected' | 'detected' | 'notFound';
+  connectLabel?: string;
+}) {
+  const dot =
+    status === 'connected' ? 'bg-emerald-500' :
+    status === 'detected' ? 'bg-amber-500' :
+    'bg-zinc-400';
+
+  return (
+    <div className="rounded-lg border border-border bg-card/50 px-4 py-3 flex items-center justify-between gap-3">
+      <div className="flex items-center gap-3 min-w-0">
+        <span className={`w-2 h-2 rounded-full shrink-0 ${dot}`} />
+        <span className="text-sm font-medium text-foreground truncate">{agent.name}</span>
+        {status === 'connected' && (
+          <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+            <span className="px-1.5 py-0.5 rounded bg-muted">{agent.transport}</span>
+            <span className="px-1.5 py-0.5 rounded bg-muted">{agent.scope}</span>
+            {agent.configPath && (
+              <span className="truncate max-w-[200px]" title={agent.configPath}>
+                {agent.configPath.replace(/^.*[/\\]/, '')}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+      {status === 'detected' && (
+        <a
+          href="#"
+          onClick={(e) => {
+            e.preventDefault();
+            // Navigate to MCP tab by dispatching a custom event
+            const settingsModal = document.querySelector('[role="dialog"][aria-label="Settings"]');
+            if (settingsModal) {
+              const mcpBtn = settingsModal.querySelectorAll('button');
+              for (const btn of mcpBtn) {
+                if (btn.textContent?.trim() === 'MCP') {
+                  btn.click();
+                  break;
+                }
+              }
+            }
+          }}
+          className="flex items-center gap-1 px-2.5 py-1 text-xs rounded-lg bg-amber-500/10 text-amber-600 dark:text-amber-400 hover:bg-amber-500/20 transition-colors shrink-0"
+        >
+          {connectLabel ?? 'Connect'}
+          <ExternalLink size={11} />
+        </a>
+      )}
+    </div>
+  );
+}

package/app/components/settings/AiTab.tsx

@@ -3,7 +3,7 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { AlertCircle, Loader2 } from 'lucide-react';
 import type { AiSettings, AgentSettings, ProviderConfig, SettingsData, AiTabProps } from './types';
-import { Field, Select, Input, EnvBadge, ApiKeyInput, Toggle } from './Primitives';
+import { Field, Select, Input, EnvBadge, ApiKeyInput, Toggle, SectionLabel } from './Primitives';
 
 type TestState = 'idle' | 'testing' | 'ok' | 'error';
 type ErrorCode = 'auth_error' | 'model_not_found' | 'rate_limited' | 'network_error' | 'unknown';
@@ -277,6 +277,44 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
           )}
         </div>
       </div>
+
+      {/* Ask AI Display Mode */}
+      <AskDisplayMode />
+    </div>
+  );
+}
+
+/* ── Ask AI Display Mode (localStorage-based, no server roundtrip) ── */
+
+function AskDisplayMode() {
+  const [mode, setMode] = useState<'panel' | 'popup'>('panel');
+
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem('ask-mode');
+      if (stored === 'popup') setMode('popup');
+    } catch {}
+  }, []);
+
+  const handleChange = (value: string) => {
+    const next = value as 'panel' | 'popup';
+    setMode(next);
+    try { localStorage.setItem('ask-mode', next); } catch {}
+    // Notify SidebarLayout to pick up the change
+    window.dispatchEvent(new StorageEvent('storage', { key: 'ask-mode', newValue: next }));
+  };
+
+  return (
+    <div className="pt-3 border-t border-border">
+      <SectionLabel>MindOS Agent</SectionLabel>
+      <div className="space-y-4">
+        <Field label="Display Mode" hint="Side panel stays docked on the right. Popup opens a floating dialog.">
+          <Select value={mode} onChange={e => handleChange(e.target.value)}>
+            <option value="panel">Side Panel</option>
+            <option value="popup">Popup</option>
+          </Select>
+        </Field>
+      </div>
     </div>
   );
 }

package/app/components/settings/KnowledgeTab.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import { useState, useEffect, useCallback, useSyncExternalStore } from 'react';
-import { Copy, Check, RefreshCw, Trash2, Sparkles } from 'lucide-react';
+import { useState, useEffect, useCallback, useSyncExternalStore, useRef } from 'react';
+import { Copy, Check, RefreshCw, Trash2, Sparkles, ChevronDown, ChevronRight, Loader2, Cpu, Zap, Database as DatabaseIcon, HardDrive } from 'lucide-react';
 import type { KnowledgeTabProps } from './types';
 import { Field, Input, EnvBadge, SectionLabel, Toggle } from './Primitives';
 import { apiFetch } from '@/lib/api';
+import { formatBytes, formatUptime } from '@/lib/format';
 
 export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
   const env = data.envOverrides ?? {};
@@ -205,6 +206,119 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
           </div>
         </div>
       )}
+
+      {/* System Monitoring — collapsible */}
+      <MonitoringSection />
+    </div>
+  );
+}
+
+/* ── 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() {
+  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-xs font-medium text-muted-foreground hover:text-foreground transition-colors w-full"
+      >
+        {expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+        <Cpu size={12} />
+        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">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">RSS</span>
+            <span className="ml-2 tabular-nums">{formatBytes(data.system.memory.rss)}</span>
+          </div>
+          <div>
+            <span className="text-muted-foreground">Uptime</span>
+            <span className="ml-2 tabular-nums">{formatUptime(data.system.uptimeMs)}</span>
+          </div>
+          <div>
+            <span className="text-muted-foreground">Node</span>
+            <span className="ml-2">{data.system.nodeVersion}</span>
+          </div>
+          <div>
+            <span className="text-muted-foreground">Requests</span>
+            <span className="ml-2 tabular-nums">{data.application.agentRequests}</span>
+          </div>
+          <div>
+            <span className="text-muted-foreground">Tool Calls</span>
+            <span className="ml-2 tabular-nums">{data.application.toolExecutions}</span>
+          </div>
+          <div>
+            <span className="text-muted-foreground">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">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 ? `Running :${data.mcp.port}` : 'Stopped'}</span>
+          </div>
+          <div>
+            <span className="text-muted-foreground">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">Failed to load monitoring data</p>
+      )}
     </div>
   );
 }

package/app/components/settings/McpTab.tsx

@@ -47,17 +47,17 @@ export function McpTab({ t }: McpTabProps) {
         <ServerStatus status={mcpStatus} agents={agents} t={t} />
       </div>
 
-      {/* Agent Configuration */}
-      <div>
-        <h3 className="text-sm font-medium text-foreground mb-3">{m?.agentsTitle ?? 'Agent Configuration'}</h3>
-        <AgentInstall agents={agents} t={t} onRefresh={fetchAll} />
-      </div>
-
       {/* Skills */}
       <div>
         <h3 className="text-sm font-medium text-foreground mb-3">{m?.skillsTitle ?? 'Skills'}</h3>
         <SkillsSection t={t} />
       </div>
+
+      {/* Agent Configuration */}
+      <div>
+        <h3 className="text-sm font-medium text-foreground mb-3">{m?.agentsTitle ?? 'Agent Configuration'}</h3>
+        <AgentInstall agents={agents} t={t} onRefresh={fetchAll} />
+      </div>
     </div>
   );
 }

package/app/components/settings/MonitoringTab.tsx

@@ -0,0 +1,202 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { Activity, Cpu, Database, HardDrive, Loader2, RefreshCw, Zap } from 'lucide-react';
+import { apiFetch } from '@/lib/api';
+import type { Messages } from '@/lib/i18n';
+
+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 formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}
+
+function formatUptime(ms: number): string {
+  const s = Math.floor(ms / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ${s % 60}s`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ${m % 60}m`;
+  const d = Math.floor(h / 24);
+  return `${d}d ${h % 24}h`;
+}
+
+function ProgressBar({ value, max, className }: { value: number; max: number; className?: string }) {
+  const pct = max > 0 ? Math.min(100, (value / max) * 100) : 0;
+  return (
+    <div className={`h-2 w-full rounded-full bg-muted ${className ?? ''}`}>
+      <div
+        className={`h-full rounded-full transition-all duration-300 ${pct > 85 ? 'bg-destructive' : 'bg-amber-500'}`}
+        style={{ width: `${pct}%` }}
+      />
+    </div>
+  );
+}
+
+function StatCard({ label, value, sub }: { label: string; value: string | number; sub?: string }) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <span className="text-xs text-muted-foreground">{label}</span>
+      <span className="text-sm font-medium tabular-nums">{value}</span>
+      {sub && <span className="text-[10px] text-muted-foreground">{sub}</span>}
+    </div>
+  );
+}
+
+export interface MonitoringTabProps {
+  t: Messages;
+}
+
+export function MonitoringTab({ t }: MonitoringTabProps) {
+  const [data, setData] = useState<MonitoringData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  const mon = t.settings.monitoring;
+
+  const fetchData = useCallback(async () => {
+    try {
+      const d = await apiFetch<MonitoringData>('/api/monitoring', { timeout: 5000 });
+      setData(d);
+      setError(false);
+    } catch {
+      setError(true);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+    const id = setInterval(fetchData, 5000);
+    return () => clearInterval(id);
+  }, [fetchData]);
+
+  if (loading && !data) {
+    return (
+      <div className="flex justify-center py-8">
+        <Loader2 size={18} className="animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (error && !data) {
+    return (
+      <div className="text-center py-8 text-sm text-muted-foreground">
+        {mon.fetchError || 'Failed to load monitoring data'}
+      </div>
+    );
+  }
+
+  if (!data) return null;
+
+  const { system, application, knowledgeBase, mcp } = data;
+  const heapPct = system.memory.heapTotal > 0
+    ? Math.round((system.memory.heapUsed / system.memory.heapTotal) * 100)
+    : 0;
+
+  return (
+    <div className="space-y-6">
+      {/* System */}
+      <section>
+        <h3 className="flex items-center gap-1.5 text-xs font-semibold text-foreground mb-3">
+          <Cpu size={13} className="text-muted-foreground" />
+          {mon.system || 'System'}
+        </h3>
+        <div className="space-y-3">
+          <div>
+            <div className="flex justify-between text-xs mb-1">
+              <span className="text-muted-foreground">{mon.heapMemory || 'Heap Memory'}</span>
+              <span className="tabular-nums">{formatBytes(system.memory.heapUsed)} / {formatBytes(system.memory.heapTotal)} ({heapPct}%)</span>
+            </div>
+            <ProgressBar value={system.memory.heapUsed} max={system.memory.heapTotal} />
+          </div>
+          <div className="grid grid-cols-3 gap-4">
+            <StatCard label={mon.rss || 'RSS'} value={formatBytes(system.memory.rss)} />
+            <StatCard label={mon.uptime || 'Uptime'} value={formatUptime(system.uptimeMs)} />
+            <StatCard label={mon.nodeVersion || 'Node'} value={system.nodeVersion} />
+          </div>
+        </div>
+      </section>
+
+      {/* Application */}
+      <section>
+        <h3 className="flex items-center gap-1.5 text-xs font-semibold text-foreground mb-3">
+          <Zap size={13} className="text-muted-foreground" />
+          {mon.application || 'Application'}
+        </h3>
+        <div className="grid grid-cols-3 gap-4">
+          <StatCard label={mon.requests || 'Requests'} value={application.agentRequests} />
+          <StatCard label={mon.toolCalls || 'Tool Calls'} value={application.toolExecutions} />
+          <StatCard label={mon.avgResponse || 'Avg Response'} value={application.avgResponseTimeMs > 0 ? `${application.avgResponseTimeMs}ms` : '—'} />
+          <StatCard
+            label={mon.tokens || 'Tokens'}
+            value={`${(application.totalTokens.input + application.totalTokens.output).toLocaleString()}`}
+            sub={`↑${application.totalTokens.input.toLocaleString()} ↓${application.totalTokens.output.toLocaleString()}`}
+          />
+          <StatCard label={mon.errors || 'Errors'} value={application.errors} />
+        </div>
+      </section>
+
+      {/* Knowledge Base */}
+      <section>
+        <h3 className="flex items-center gap-1.5 text-xs font-semibold text-foreground mb-3">
+          <Database size={13} className="text-muted-foreground" />
+          {mon.knowledgeBase || 'Knowledge Base'}
+        </h3>
+        <div className="grid grid-cols-3 gap-4">
+          <StatCard label={mon.files || 'Files'} value={knowledgeBase.fileCount} />
+          <StatCard label={mon.totalSize || 'Total Size'} value={formatBytes(knowledgeBase.totalSizeBytes)} />
+          <StatCard label={mon.rootPath || 'Root'} value={knowledgeBase.root.split('/').pop() ?? knowledgeBase.root} sub={knowledgeBase.root} />
+        </div>
+      </section>
+
+      {/* MCP */}
+      <section>
+        <h3 className="flex items-center gap-1.5 text-xs font-semibold text-foreground mb-3">
+          <HardDrive size={13} className="text-muted-foreground" />
+          MCP
+        </h3>
+        <div className="grid grid-cols-3 gap-4">
+          <StatCard
+            label={mon.mcpStatus || 'Status'}
+            value={mcp.running ? (mon.mcpRunning || 'Running') : (mon.mcpStopped || 'Stopped')}
+          />
+          <StatCard label={mon.mcpPort || 'Port'} value={mcp.port} />
+        </div>
+      </section>
+
+      {/* Refresh indicator */}
+      <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground">
+        <RefreshCw size={10} className={loading ? 'animate-spin' : ''} />
+        {mon.autoRefresh || 'Auto-refresh every 5s'}
+      </div>
+    </div>
+  );
+}