@geminilight/mindos 0.5.22 → 0.5.23

package/app/components/panels/PanelHeader.tsx

@@ -0,0 +1,35 @@
+import { Maximize2, Minimize2 } from 'lucide-react';
+
+/**
+ * Shared header bar for side panels (Files, Search, Plugins, etc.)
+ * Keeps the uppercase label + optional right content pattern consistent.
+ */
+export default function PanelHeader({
+  title,
+  children,
+  maximized,
+  onMaximize,
+}: {
+  title: string;
+  children?: React.ReactNode;
+  maximized?: boolean;
+  onMaximize?: () => void;
+}) {
+  return (
+    <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
+      <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider font-display">{title}</span>
+      <div className="flex items-center gap-1">
+        {children}
+        {onMaximize && (
+          <button
+            onClick={onMaximize}
+            className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+            aria-label={maximized ? 'Restore panel' : 'Maximize panel'}
+          >
+            {maximized ? <Minimize2 size={13} /> : <Maximize2 size={13} />}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/app/components/panels/PluginsPanel.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { getAllRenderers, isRendererEnabled, setRendererEnabled, loadDisabledState } from '@/lib/renderers/registry';
+import { Toggle } from '../settings/Primitives';
+import PanelHeader from './PanelHeader';
+
+interface PluginsPanelProps {
+  active: boolean;
+  maximized?: boolean;
+  onMaximize?: () => void;
+}
+
+export default function PluginsPanel({ active, maximized, onMaximize }: PluginsPanelProps) {
+  const [mounted, setMounted] = useState(false);
+  const [, forceUpdate] = useState(0);
+  const router = useRouter();
+
+  // Defer renderer reads to client only — avoids hydration mismatch
+  useEffect(() => {
+    loadDisabledState();
+    setMounted(true);
+  }, []);
+
+  const renderers = mounted ? getAllRenderers() : [];
+  const enabledCount = mounted ? renderers.filter(r => isRendererEnabled(r.id)).length : 0;
+
+  const handleToggle = (id: string, enabled: boolean) => {
+    setRendererEnabled(id, enabled);
+    forceUpdate(n => n + 1);
+    window.dispatchEvent(new Event('renderer-state-changed'));
+  };
+
+  return (
+    <div className={`flex flex-col h-full ${active ? '' : 'hidden'}`}>
+      {/* Header */}
+      <PanelHeader title="Plugins" maximized={maximized} onMaximize={onMaximize}>
+        <span className="text-2xs text-muted-foreground">{enabledCount}/{renderers.length} active</span>
+      </PanelHeader>
+
+      {/* Plugin list */}
+      <div className="flex-1 overflow-y-auto min-h-0">
+        {mounted && renderers.length === 0 && (
+          <p className="px-4 py-8 text-sm text-muted-foreground text-center">No plugins registered</p>
+        )}
+        {renderers.map(r => {
+          const enabled = isRendererEnabled(r.id);
+          return (
+            <div
+              key={r.id}
+              className="px-4 py-3 border-b border-border/50 hover:bg-muted/30 transition-colors"
+            >
+              {/* Top row: icon + name + toggle */}
+              <div className="flex items-center justify-between gap-2">
+                <div className="flex items-center gap-2.5 min-w-0">
+                  <span className="text-base shrink-0">{r.icon}</span>
+                  <span className="text-sm font-medium text-foreground truncate">{r.name}</span>
+                  {r.core && (
+                    <span className="text-2xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground shrink-0">Core</span>
+                  )}
+                </div>
+                <Toggle
+                  checked={enabled}
+                  onChange={(v) => handleToggle(r.id, v)}
+                  size="sm"
+                  disabled={r.core}
+                  title={r.core ? 'Core plugin — cannot be disabled' : undefined}
+                />
+              </div>
+
+              {/* Description */}
+              <p className="mt-1 text-xs text-muted-foreground leading-relaxed pl-[30px]">
+                {r.description}
+              </p>
+
+              {/* Tags + entry path */}
+              <div className="mt-1.5 flex items-center gap-1.5 pl-[30px] flex-wrap">
+                {r.tags.slice(0, 3).map(tag => (
+                  <span key={tag} className="text-2xs px-1.5 py-0.5 rounded-full bg-muted/60 text-muted-foreground">
+                    {tag}
+                  </span>
+                ))}
+                {r.entryPath && enabled && (
+                  <button
+                    onClick={() => router.push(`/view/${r.entryPath!.split('/').map(encodeURIComponent).join('/')}`)}
+                    className="text-2xs px-1.5 py-0.5 rounded-full text-[var(--amber)] hover:bg-[var(--amber-dim)] transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+                  >
+                    → {r.entryPath}
+                  </button>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Footer info */}
+      <div className="px-4 py-2 border-t border-border shrink-0">
+        <p className="text-2xs text-muted-foreground">
+          Plugins customize how files render. Core plugins cannot be disabled.
+        </p>
+      </div>
+    </div>
+  );
+}

package/app/components/panels/SearchPanel.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { Search, X, FileText, Table } from 'lucide-react';
+import { SearchResult } from '@/lib/types';
+import { encodePath } from '@/lib/utils';
+import { apiFetch } from '@/lib/api';
+import { useLocale } from '@/lib/LocaleContext';
+import PanelHeader from './PanelHeader';
+
+/** Highlight matched text fragments in a snippet based on the query */
+function highlightSnippet(snippet: string, query: string): React.ReactNode {
+  if (!query.trim()) return snippet;
+  const words = query.trim().split(/\s+/).filter(Boolean);
+  const escaped = words.map(w => w.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+  const pattern = new RegExp(`(${escaped.join('|')})`, 'gi');
+  const parts = snippet.split(pattern);
+  return parts.map((part, i) =>
+    pattern.test(part) ? <mark key={i} className="bg-yellow-300/40 text-foreground rounded-sm px-0.5">{part}</mark> : part
+  );
+}
+
+interface SearchPanelProps {
+  /** When true the panel is visible — triggers focus & reset */
+  active: boolean;
+  /** Called when user navigates to a result (panel host may want to close) */
+  onNavigate?: () => void;
+  maximized?: boolean;
+  onMaximize?: () => void;
+}
+
+export default function SearchPanel({ active, onNavigate, maximized, onMaximize }: SearchPanelProps) {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const router = useRouter();
+  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const { t } = useLocale();
+
+  // Focus input when panel becomes active
+  useEffect(() => {
+    if (active) {
+      setTimeout(() => inputRef.current?.focus(), 50);
+    }
+  }, [active]);
+
+  // Debounced search
+  const doSearch = useCallback((q: string) => {
+    if (debounceTimer.current) clearTimeout(debounceTimer.current);
+    if (!q.trim()) {
+      setResults([]);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    debounceTimer.current = setTimeout(async () => {
+      try {
+        const data = await apiFetch<SearchResult[]>(`/api/search?q=${encodeURIComponent(q)}`);
+        setResults(Array.isArray(data) ? data : []);
+        setSelectedIndex(0);
+      } catch {
+        setResults([]);
+      } finally {
+        setLoading(false);
+      }
+    }, 300);
+  }, []);
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    setQuery(val);
+    doSearch(val);
+  }, [doSearch]);
+
+  const navigate = useCallback((result: SearchResult) => {
+    router.push(`/view/${encodePath(result.path)}`);
+    onNavigate?.();
+  }, [router, onNavigate]);
+
+  // Keyboard navigation within the panel
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setSelectedIndex(i => Math.min(i + 1, results.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setSelectedIndex(i => Math.max(i - 1, 0));
+    } else if (e.key === 'Enter') {
+      if (results[selectedIndex]) navigate(results[selectedIndex]);
+    }
+  }, [results, selectedIndex, navigate]);
+
+  return (
+    <>
+      {/* Header */}
+      <PanelHeader title="Search" maximized={maximized} onMaximize={onMaximize} />
+
+      {/* Search input */}
+      <div className="flex items-center gap-3 px-4 py-2.5 border-b border-border shrink-0">
+        <Search size={14} className="text-muted-foreground shrink-0" />
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          placeholder={t.search.placeholder}
+          className="flex-1 bg-transparent text-foreground placeholder:text-muted-foreground text-sm outline-none"
+        />
+        {loading && (
+          <div className="w-3.5 h-3.5 border-2 border-muted-foreground/40 border-t-foreground rounded-full animate-spin shrink-0" />
+        )}
+        {!loading && query && (
+          <button onClick={() => { setQuery(''); setResults([]); inputRef.current?.focus(); }}>
+            <X size={13} className="text-muted-foreground hover:text-foreground" />
+          </button>
+        )}
+      </div>
+
+      {/* Results */}
+      <div className="flex-1 overflow-y-auto min-h-0">
+        {results.length === 0 && query && !loading && (
+          <div className="px-4 py-8 text-center text-sm text-muted-foreground">{t.search.noResults}</div>
+        )}
+        {results.length === 0 && !query && (
+          <div className="px-4 py-8 text-center text-sm text-muted-foreground/60">{t.search.prompt}</div>
+        )}
+        {results.map((result, i) => {
+          const ext = result.path.endsWith('.csv') ? '.csv' : '.md';
+          const parts = result.path.split('/');
+          const fileName = parts[parts.length - 1];
+          const dirPath = parts.slice(0, -1).join('/');
+          return (
+            <button
+              key={result.path}
+              onClick={() => navigate(result)}
+              onMouseEnter={() => setSelectedIndex(i)}
+              className={`
+                w-full px-4 py-2.5 flex items-start gap-3 text-left transition-colors duration-75
+                ${i === selectedIndex ? 'bg-muted' : 'hover:bg-muted/50'}
+                ${i < results.length - 1 ? 'border-b border-border' : ''}
+              `}
+            >
+              {ext === '.csv'
+                ? <Table size={13} className="text-success shrink-0 mt-0.5" />
+                : <FileText size={13} className="text-muted-foreground shrink-0 mt-0.5" />
+              }
+              <div className="min-w-0 flex-1">
+                <div className="flex items-baseline gap-2 flex-wrap">
+                  <span className="text-sm text-foreground font-medium truncate">{fileName}</span>
+                  {dirPath && (
+                    <span className="text-xs text-muted-foreground truncate">{dirPath}</span>
+                  )}
+                </div>
+                {result.snippet && (
+                  <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2 leading-relaxed">
+                    {highlightSnippet(result.snippet, query)}
+                  </p>
+                )}
+              </div>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Footer hints */}
+      {results.length > 0 && (
+        <div className="px-4 py-2 border-t border-border flex items-center gap-3 text-xs text-muted-foreground/50 shrink-0">
+          <span><kbd className="font-mono">↑↓</kbd> {t.search.navigate}</span>
+          <span><kbd className="font-mono">↵</kbd> {t.search.open}</span>
+        </div>
+      )}
+    </>
+  );
+}

package/app/components/panels/SyncPopover.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { RefreshCw, CheckCircle2, XCircle, X } from 'lucide-react';
+import { DOT_COLORS, getStatusLevel, getSyncLabel, useSyncAction } from '../SyncStatusBar';
+import type { SyncStatus } from '../settings/SyncTab';
+import { PrimaryButton } from '../settings/Primitives';
+
+interface SyncPopoverProps {
+  open: boolean;
+  onClose: () => void;
+  anchorRect: DOMRect | null;
+  railWidth: number;
+  onOpenSyncSettings: () => void;
+  syncStatus: SyncStatus | null;
+  onSyncStatusRefresh: () => Promise<void>;
+}
+
+export default function SyncPopover({ open, onClose, anchorRect, railWidth, onOpenSyncSettings, syncStatus, onSyncStatusRefresh }: SyncPopoverProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const { syncing, syncResult, syncNow } = useSyncAction(onSyncStatusRefresh);
+
+  // Close on ESC
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); onCloseRef.current(); }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [open]);
+
+  // Close on click outside
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onCloseRef.current();
+    };
+    const id = setTimeout(() => window.addEventListener('mousedown', handler), 0);
+    return () => { clearTimeout(id); window.removeEventListener('mousedown', handler); };
+  }, [open]);
+
+  if (!open || !anchorRect) return null;
+
+  const level = getStatusLevel(syncStatus, syncing);
+  const { label: statusText } = getSyncLabel(level, syncStatus);
+
+  // Position: anchor near the button, avoid going off-screen top
+  const popoverTop = Math.max(8, anchorRect.bottom - 180);
+
+  return (
+    <div
+      ref={ref}
+      className="fixed z-40 w-[240px] border rounded-lg bg-card shadow-lg border-border animate-in fade-in slide-in-from-left-2 duration-150"
+      style={{
+        top: popoverTop,
+        left: railWidth,
+      }}
+    >
+      <div className="flex items-center justify-between px-3 py-2 border-b border-border">
+        <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Sync</span>
+        <button
+          onClick={onClose}
+          className="p-0.5 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+          aria-label="Close"
+        >
+          <X size={14} />
+        </button>
+      </div>
+      <div className="p-3 space-y-3">
+        {/* Status */}
+        <div className="flex items-center gap-2">
+          <span className={`w-2.5 h-2.5 rounded-full shrink-0 ${DOT_COLORS[level]} ${
+            level === 'syncing' || level === 'conflicts' || level === 'error' ? 'animate-pulse' : ''
+          }`} />
+          <span className="text-sm text-foreground">{statusText}</span>
+          {syncResult === 'success' && <CheckCircle2 size={14} className="text-success shrink-0" />}
+          {syncResult === 'error' && <XCircle size={14} className="text-error shrink-0" />}
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center gap-2">
+          {level !== 'off' && (
+            <PrimaryButton
+              onClick={syncNow}
+              disabled={syncing}
+              className="text-xs px-3 py-1.5 flex items-center gap-1.5"
+            >
+              <RefreshCw size={12} className={syncing ? 'animate-spin' : ''} />
+              Sync Now
+            </PrimaryButton>
+          )}
+          <button
+            onClick={() => { onOpenSyncSettings(); onClose(); }}
+            className="text-xs text-muted-foreground hover:text-foreground transition-colors rounded px-1 py-0.5 focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            Settings →
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/app/components/renderers/csv/TableView.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useMemo, useEffect } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { ChevronUp, ChevronDown, Plus, Trash2 } from 'lucide-react';
 import type { TableConfig } from './types';
 import { serializeCSV } from './types';
@@ -102,8 +102,8 @@ export function TableView({ headers, rows, cfg, saveAction }: {
             </tr>
           </thead>
           <tbody>
-            {sections.map(section => (
-              <>
+            {sections.map((section, si) => (
+              <React.Fragment key={section.key ?? `section-${si}`}>
                 {section.key !== null && (
                   <tr key={`grp-${section.key}`}>
                     <td colSpan={visibleIndices.length + 1} className="px-4 py-1.5"
@@ -137,7 +137,7 @@ export function TableView({ headers, rows, cfg, saveAction }: {
                     </tr>
                   );
                 })}
-              </>
+              </React.Fragment>
             ))}
             {showAdd && (
               <AddRowTr headers={headers} visibleIndices={visibleIndices} onAdd={addRow} onCancel={() => setShowAdd(false)} />

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>
   );
 }