@polderlabs/bizar 4.5.2 → 4.7.1

package/bizar-dash/src/web/views/Settings.tsx

@@ -1,52 +1,27 @@
-// src/views/Settings.tsx — v3 settings: theme colors, UI layout, defaults, Tailscale, service.
-import React, { useEffect, useState, useCallback } from 'react';
-import {
-  Sliders,
-  Save,
-  RefreshCw,
-  Sun,
-  Moon,
-  Monitor,
-  Info,
-  Globe,
-  Palette,
-  Layout as LayoutIcon,
-  Server as ServerIcon,
-  RotateCcw,
-  Plug,
-  Download,
-  AlertTriangle,
-  QrCode,
-  Smartphone,
-  CheckCircle,
-  AlertCircle,
-  Shield,
-  Copy,
-  KeyRound,
-  Activity,
-  EyeOff,
-  Eye,
-  Trash2,
-  Search,
-  Sparkles,
-} from 'lucide-react';
-import { QRCodeSVG } from 'qrcode.react';
+// src/views/Settings.tsx — v4 settings shell: routes to focused sub-components.
+import React, { useEffect, useState } from 'react';
+import { Sliders, Save, RefreshCw, RotateCcw } from 'lucide-react';
 import { Button } from '../components/Button';
-import { Card, CardTitle, CardMeta } from '../components/Card';
 import { useToast } from '../components/Toast';
 import { api } from '../lib/api';
 import { cn } from '../lib/utils';
-import { HeadroomSettingsCard } from '../components/HeadroomSettings';
-import { Ws } from '../lib/ws';
-import {
-  applyTheme,
-  applyThemeTokens,
-  type Settings,
-  type SettingsResponse,
-  type Snapshot,
-  type ThemeName,
-  type TailscaleStatus,
-} from '../lib/types';
+import { applyTheme, applyThemeTokens, type Settings, type SettingsResponse, type Snapshot, type TailscaleStatus } from '../lib/types';
+
+import { ThemeSection } from './settings/ThemeSection';
+import { UpdatesSection } from './settings/UpdatesSection';
+import { GeneralSection } from './settings/GeneralSection';
+import { NetworkSection } from './settings/NetworkSection';
+import { NotificationsSection } from './settings/NotificationsSection';
+import { AuthSection } from './settings/AuthSection';
+import { AgentSection } from './settings/AgentSection';
+import { SystemLlmSection } from './settings/SystemLlmSection';
+import { HeadroomSection } from './settings/HeadroomSection';
+import { ActivitySection } from './settings/ActivitySection';
+import { EnvVarsSection } from './settings/EnvVarsSection';
+import { ProvidersSection } from './settings/ProvidersSection';
+import { MemorySection } from './settings/MemorySection';
+import { SkillsSection } from './settings/SkillsSection';
+import { BackupSection } from './settings/BackupSection';
 
 type Props = {
   snapshot: Snapshot;
@@ -56,435 +31,28 @@ type Props = {
   refreshSnapshot: () => Promise<void>;
 };
 
-const THEMES: { id: ThemeName; label: string; Icon: typeof Sun }[] = [
-  { id: 'dark', label: 'Dark', Icon: Moon },
-  { id: 'light', label: 'Light', Icon: Sun },
-  { id: 'system', label: 'System', Icon: Monitor },
-];
-
-// v3.3.1 — One-click accent color presets.
-const PRESET_THEMES = [
-  { name: 'Purple', accent: '#8b5cf6' },
-  { name: 'Blue', accent: '#3b82f6' },
-  { name: 'Green', accent: '#10b981' },
-  { name: 'Orange', accent: '#f97316' },
-  { name: 'Red', accent: '#ef4444' },
-  { name: 'Pink', accent: '#ec4899' },
-  { name: 'Cyan', accent: '#06b6d4' },
-  { name: 'Mono', accent: '#6b7280' },
-];
-
-// v5.0.0 — Headroom default settings
-const DEFAULT_HEADROOM_SETTINGS = {
-  enabled: true,
-  autoInstall: true,
-  port: 8787,
-  host: '127.0.0.1',
-  outputShaper: false,
-  telemetry: false,
-  budget: 0,
-  backend: 'anthropic',
-  autoStart: true,
-  autoWrap: true,
-  routeAllProviders: true,
-};
-
-const FONT_FAMILIES = [
-  'Inter',
-  'system-ui',
-  'Segoe UI',
-  'Roboto',
-  'JetBrains Mono',
-  'SF Mono',
-  'Cascadia Code',
-];
-
-// v3.5.2 — Pair-with-mobile companion card.
-type PairSession = {
-  token: string;
-  qrPayload: string;
-  publicUrl: string;
-  expiresAt: number;
-};
-
-function formatCountdown(ms: number): string {
-  if (ms <= 0) return 'expired';
-  const s = Math.floor(ms / 1000);
-  const m = Math.floor(s / 60);
-  const r = s % 60;
-  return `${m}:${String(r).padStart(2, '0')}`;
-}
-
-function PairDeviceCard() {
-  const toast = useToast();
-  const [pair, setPair] = useState<PairSession | null>(null);
-  const [pairing, setPairing] = useState(false);
-  const [pairError, setPairError] = useState<string | null>(null);
-  const [now, setNow] = useState(Date.now());
-
-  const start = useCallback(async () => {
-    setPairing(true);
-    setPairError(null);
-    try {
-      const res = await api.post<PairSession>('/pair/start');
-      setPair(res);
-    } catch (err) {
-      setPairError((err as Error)?.message || 'Failed to start pairing');
-      toast.error('Pairing failed.');
-    } finally {
-      setPairing(false);
-    }
-  }, [toast]);
-
-  useEffect(() => {
-    if (!pair) return;
-    const t = setInterval(() => setNow(Date.now()), 1000);
-    return () => clearInterval(t);
-  }, [pair]);
-
-  const remaining = pair ? pair.expiresAt - now : 0;
-  const expired = pair != null && remaining <= 0;
-
-  return (
-    <Card id="settings-updates" data-section="updates">
-      <CardTitle>
-        <Smartphone size={14} /> Companion App
-      </CardTitle>
-      <CardMeta>
-        Scan the QR with <a href="https://github.com/DrB0rk/BizarHarness" target="_blank" rel="noopener noreferrer">Bizar Companion</a> to pair.
-        Tokens expire after 5 minutes.
-      </CardMeta>
-
-      <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start', flexWrap: 'wrap' }}>
-        <div style={{ flex: '0 0 auto' }}>
-          {pair && !expired ? (
-            <div style={{ background: '#fff', padding: 12, borderRadius: 12 }}>
-              <QRCodeSVG value={pair.qrPayload} size={192} level="M" includeMargin={false} />
-            </div>
-          ) : (
-            <div
-              style={{
-                width: 216,
-                height: 216,
-                borderRadius: 12,
-                background: 'var(--surface-2, #161b22)',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                color: 'var(--text-muted, #8b949e)',
-                fontSize: 12,
-                textAlign: 'center',
-                padding: 16,
-                border: '1px dashed var(--border, #30363d)',
-              }}
-            >
-              {pair && expired ? 'QR expired' : 'No QR generated yet'}
-            </div>
-          )}
-        </div>
-
-        <div style={{ flex: '1 1 240px', minWidth: 220 }}>
-          {!pair && (
-            <Button variant="primary" onClick={start} disabled={pairing}>
-              <QrCode size={14} /> {pairing ? 'Generating…' : 'Generate QR Code'}
-            </Button>
-          )}
-
-          {pair && !expired && (
-            <>
-              <div style={{ marginBottom: 10 }}>
-                <strong>Expires in</strong> <span className="mono">{formatCountdown(remaining)}</span>
-              </div>
-              <div style={{ marginBottom: 6 }}>
-                <strong>URL:</strong> <span className="mono" style={{ wordBreak: 'break-all' }}>{pair.publicUrl}</span>
-              </div>
-              <div style={{ marginBottom: 12 }}>
-                <strong>Token:</strong>{' '}
-                <span className="mono" style={{ wordBreak: 'break-all', fontSize: 12 }}>
-                  {pair.token.slice(0, 16)}…{pair.token.slice(-6)}
-                </span>
-              </div>
-              <Button variant="secondary" onClick={start} disabled={pairing}>
-                <RefreshCw size={14} /> Regenerate
-              </Button>
-            </>
-          )}
-
-          {pair && expired && (
-            <>
-              <div style={{ marginBottom: 12, color: 'var(--error, #f85149)' }}>
-                Token expired — generate a fresh QR to pair again.
-              </div>
-              <Button variant="primary" onClick={() => { setPair(null); start(); }}>
-                <RefreshCw size={14} /> Generate new QR
-              </Button>
-            </>
-          )}
-
-          {pairError && (
-            <div style={{ marginTop: 10, color: 'var(--error, #f85149)', fontSize: 12 }}>
-              {pairError}
-            </div>
-          )}
-        </div>
-      </div>
-    </Card>
-  );
-}
-
-const LAYOUTS = [
-  { id: 'topnav', label: 'Top nav' },
-  { id: 'sidebar', label: 'Sidebar' },
-  { id: 'both', label: 'Both' },
+const SECTION_LINKS = [
+  { id: 'theme', label: 'Theme' },
+  { id: 'updates', label: 'Updates' },
+  { id: 'layout', label: 'Layout' },
+  { id: 'general', label: 'General' },
+  { id: 'network', label: 'Network' },
+  { id: 'notifications', label: 'Notifications' },
+  { id: 'auth', label: 'Auth' },
+  { id: 'agents', label: 'Agents' },
+  { id: 'dashboard', label: 'Dashboard' },
+  { id: 'background', label: 'Background' },
+  { id: 'system-llm', label: 'System LLM' },
+  { id: 'headroom', label: 'Headroom' },
+  { id: 'activity-log', label: 'Activity' },
+  { id: 'about', label: 'About' },
+  { id: 'env-vars', label: 'Env Vars' },
+  { id: 'providers', label: 'Providers' },
+  { id: 'memory', label: 'Memory' },
+  { id: 'skills', label: 'Skills' },
+  { id: 'backup', label: 'Backup' },
 ] as const;
 
-// v3.5.3 — Updates card with per-package selection, live progress, and auto-restart
-type PkgStatus = {
-  status: 'idle' | 'starting' | 'installing' | 'done' | 'error';
-  error?: string;
-  newVersion?: string;
-  logs: string[];
-};
-
-function UpdatesCard() {
-  const toast = useToast();
-  const [status, setStatus] = useState<{
-    current: Record<string, string | null>;
-    latest: Record<string, string | null> | null;
-    checking: boolean;
-    updating: boolean;
-    hasUpdates: boolean;
-    requiresRestart: boolean;
-    perPackage: Record<string, PkgStatus>;
-    error?: string;
-  }>({
-    current: {},
-    latest: null,
-    checking: false,
-    updating: false,
-    hasUpdates: false,
-    requiresRestart: false,
-    perPackage: {},
-  });
-
-  // WebSocket subscription for live update progress (auto-reconnect via Ws class)
-  useEffect(() => {
-    const ws = new Ws();
-    ws.on((msg: Record<string, unknown>) => {
-      if (msg.type === 'update:progress' || msg.type === 'update:log' || msg.type === 'update:complete') {
-        setStatus((s) => {
-          if (msg.type === 'update:complete') {
-            return {
-              ...s,
-              updating: false,
-              requiresRestart: Boolean((msg as { requiresRestart?: boolean }).requiresRestart),
-            };
-          }
-          if (msg.type === 'update:log') {
-            const m = msg as { pkg: string; line: string };
-            const existing = s.perPackage[m.pkg] || { logs: [] };
-            return {
-              ...s,
-              perPackage: {
-                ...s.perPackage,
-                [m.pkg]: {
-                  ...existing,
-                  logs: [...(existing.logs || []).slice(-50), m.line],
-                },
-              },
-            };
-          }
-          // update:progress
-          const m = msg as { pkg: string; status: PkgStatus['status']; error?: string; newVersion?: string };
-          return {
-            ...s,
-            perPackage: {
-              ...s.perPackage,
-              [m.pkg]: {
-                ...s.perPackage[m.pkg],
-                status: m.status,
-                error: m.error,
-                newVersion: m.newVersion,
-              },
-            },
-          };
-        });
-      }
-    });
-    return () => ws.close();
-  }, []);
-
-  // Load current versions on mount
-  useEffect(() => {
-    api.get<{ current: Record<string, string | null> }>('/updates/status')
-      .then((r) => setStatus((s) => ({ ...s, current: r.current })))
-      .catch((e) => setStatus((s) => ({ ...s, error: e.message })));
-  }, []);
-
-  const check = async () => {
-    setStatus((s) => ({ ...s, checking: true, error: undefined }));
-    try {
-      const r = await api.get<{
-        current: Record<string, string | null>;
-        latest: Record<string, string | null>;
-        hasUpdates: boolean;
-      }>('/updates/check');
-      setStatus((s) => ({
-        ...s,
-        checking: false,
-        current: r.current,
-        latest: r.latest,
-        hasUpdates: r.hasUpdates,
-      }));
-    } catch (err) {
-      setStatus((s) => ({ ...s, checking: false, error: (err as Error).message }));
-    }
-  };
-
-  const applyUpdate = async () => {
-    if (!confirm('Update Bizar packages? The dashboard will restart automatically.')) return;
-    setStatus((s) => ({
-      ...s,
-      updating: true,
-      requiresRestart: false,
-      perPackage: {},
-      error: undefined,
-    }));
-    try {
-      await api.post('/updates/apply', { packages: ['bizar', 'bizar-dash', 'bizar-plugin'] });
-      // Progress streams via WebSocket
-    } catch (err) {
-      setStatus((s) => ({ ...s, updating: false, error: (err as Error).message }));
-    }
-  };
-
-  const restart = async () => {
-    if (!confirm('Restart the dashboard? You will be disconnected briefly.')) return;
-    try {
-      await api.post('/restart');
-      toast.info('Restarting…', 3000);
-      setTimeout(() => window.location.reload(), 3000);
-    } catch {
-      toast.error('Restart failed');
-    }
-  };
-
-  const packages = [
-    { id: 'bizar', name: 'Bizar CLI' },
-    { id: 'bizar-dash', name: 'Dashboard' },
-    { id: 'bizar-plugin', name: 'Opencode Plugin' },
-  ];
-
-  const isBusy = status.checking || status.updating;
-
-  return (
-    <Card id="settings-updates" data-section="updates">
-      <CardTitle><Download size={14} /> Updates</CardTitle>
-      <CardMeta>Check installed Bizar packages and apply dashboard updates.</CardMeta>
-      {/* Current versions */}
-      <div className="updates-current">
-        <h4>Installed versions</h4>
-        <ul>
-          {packages.map((p) => (
-            <li key={p.id}>
-              <span>{p.name}</span>
-              <code className="mono">{status.current[p.id] || '—'}</code>
-            </li>
-          ))}
-        </ul>
-      </div>
-
-      {/* Latest + per-package status */}
-      {status.latest && (
-        <div className="updates-latest">
-          <h4>Latest available</h4>
-          <ul>
-            {packages.map((p) => {
-              const cur = status.current[p.id];
-              const lat = status.latest?.[p.id];
-              const isOutdated = cur && lat && cur !== lat;
-              return (
-                <li key={p.id} className={isOutdated ? 'updates-outdated' : 'updates-current-version'}>
-                  <span>{p.name}</span>
-                  <code className="mono">
-                    {lat || '—'}
-                    {isOutdated && <span className="updates-badge">update available</span>}
-                  </code>
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-      )}
-
-      {/* Per-package progress rows (shown while updating) */}
-      {status.updating && (
-        <div className="updates-progress-rows">
-          {packages.map((p) => {
-            const pkgStatus = status.perPackage[p.id] || { status: 'idle', logs: [] as string[] };
-            return (
-              <div key={p.id} className="updates-pkg-row">
-                <div className="updates-pkg-row-header">
-                  <span className="updates-pkg-name">{p.name}</span>
-                  <div className="updates-pkg-status">
-                    {pkgStatus.status === 'starting' && <span className="btn-spinner" />}
-                    {pkgStatus.status === 'installing' && <span className="btn-spinner" />}
-                    {pkgStatus.status === 'done' && <CheckCircle size={14} className="icon-success" />}
-                    {pkgStatus.status === 'error' && <AlertCircle size={14} className="icon-error" />}
-                    <span>{pkgStatus.status}</span>
-                    {pkgStatus.newVersion && (
-                      <code className="mono" style={{ fontSize: 11 }}>→ {pkgStatus.newVersion}</code>
-                    )}
-                  </div>
-                </div>
-                {pkgStatus.logs.length > 0 && (
-                  <details className="updates-pkg-logs">
-                    <summary>npm output ({pkgStatus.logs.length} lines)</summary>
-                    <pre>{pkgStatus.logs.join('\n')}</pre>
-                  </details>
-                )}
-                {pkgStatus.status === 'error' && pkgStatus.error && (
-                  <div className="updates-pkg-error">
-                    <AlertTriangle size={12} /> {pkgStatus.error}
-                  </div>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      )}
-
-      {/* Actions */}
-      <div className="updates-actions">
-        <Button onClick={check} disabled={isBusy}>
-          {status.checking ? <span className="btn-spinner" /> : <RefreshCw size={14} />}
-          Check for updates
-        </Button>
-        <Button
-          variant="primary"
-          onClick={applyUpdate}
-          disabled={!status.hasUpdates || status.updating}
-        >
-          {status.updating ? <span className="btn-spinner" /> : <Download size={14} />}
-          {status.updating ? 'Updating…' : (status.hasUpdates ? 'Update now' : 'Up to date')}
-        </Button>
-        {status.requiresRestart && (
-          <Button variant="danger" onClick={restart}>
-            <RefreshCw size={14} /> Restart Dashboard
-          </Button>
-        )}
-      </div>
-
-      {status.error && (
-        <div className="updates-error">
-          <AlertTriangle size={14} />
-          <span>{status.error}</span>
-        </div>
-      )}
-    </Card>
-  );
-}
-
 function SettingsViewInner({ settings: initial, refreshSnapshot }: Props) {
   const toast = useToast();
   const [settings, setSettings] = useState<Settings>(initial);
@@ -492,1333 +60,117 @@ function SettingsViewInner({ settings: initial, refreshSnapshot }: Props) {
   const [saving, setSaving] = useState(false);
   const [tailscale, setTailscale] = useState<TailscaleStatus | null>(null);
   const [tailscaleDraft, setTailscaleDraft] = useState({ port: 4321, https: true, hostname: '' });
-  const [pluginOptions, setPluginOptions] = useState<Record<string, number>>({});
-
-  useEffect(() => {
-    setSettings(initial);
-    setDirty(false);
-    if (initial.theme) applyThemeTokens(initial.theme);
-  }, [initial]);
-
-  useEffect(() => {
-    if (!tailscale) return;
-    setTailscaleDraft({
-      port: tailscale.settings.port,
-      https: tailscale.settings.https !== false,
-      hostname: tailscale.settings.hostname || '',
-    });
-  }, [tailscale]);
-
-  useEffect(() => {
-    api.get<TailscaleStatus>('/tailscale/status').then(setTailscale).catch(() => undefined);
-  }, []);
-
-  useEffect(() => {
-    api.get<Record<string, number>>('/settings/plugin-options')
-      .then(setPluginOptions)
-      .catch(() => { /* not persisted yet — use defaults */ });
-  }, []);
-
-  const patchTheme = (patch: Partial<Settings['theme']>) => {
-    setSettings((cur) => {
-      const next = { ...cur, theme: { ...cur.theme, ...patch } };
-      applyThemeTokens(next.theme);
-      return next;
-    });
-    setDirty(true);
-  };
-
-  const patchUi = (patch: Partial<Settings['ui']>) => {
-    setSettings((cur) => ({ ...cur, ui: { ...cur.ui, ...patch } }));
-    setDirty(true);
-  };
+  const [authStatus, setAuthStatus] = useState<{ required: boolean; loopback: boolean; peer: string } | null>(null);
 
-  const patchTop = <K extends keyof Settings>(key: K, value: Settings[K]) => {
-    setSettings((cur) => ({ ...cur, [key]: value }));
-    setDirty(true);
-  };
+  useEffect(() => { setSettings(initial); setDirty(false); if (initial.theme) applyThemeTokens(initial.theme); }, [initial]);
+  useEffect(() => { if (!tailscale) return; setTailscaleDraft({ port: tailscale.settings.port, https: tailscale.settings.https !== false, hostname: tailscale.settings.hostname || '' }); }, [tailscale]);
+  useEffect(() => { api.get<TailscaleStatus>('/tailscale/status').then(setTailscale).catch(() => undefined); }, []);
 
-  const patchNotifications = (patch: Partial<Settings['notifications']>) => {
-    setSettings((cur) => ({ ...cur, notifications: { ...cur.notifications, ...patch } }));
-    setDirty(true);
-  };
-
-  const patchAgents = (patch: Partial<Settings['agents']>) => {
-    setSettings((cur) => ({ ...cur, agents: { ...cur.agents, ...patch } }));
-    setDirty(true);
-  };
+  const patchTheme = (patch: Partial<Settings['theme']>) => { setSettings((cur) => { const next = { ...cur, theme: { ...cur.theme, ...patch } }; applyThemeTokens(next.theme); return next; }); setDirty(true); };
+  const patchUi = (patch: Partial<Settings['ui']>) => { setSettings((cur) => ({ ...cur, ui: { ...cur.ui, ...patch } })); setDirty(true); };
+  const patchTop = <K extends keyof Settings>(key: K, value: Settings[K]) => { setSettings((cur) => ({ ...cur, [key]: value })); setDirty(true); };
+  const patchNotifications = (patch: Partial<Settings['notifications']>) => { setSettings((cur) => ({ ...cur, notifications: { ...cur.notifications, ...patch } })); setDirty(true); };
+  const patchAgents = (patch: Partial<Settings['agents']>) => { setSettings((cur) => ({ ...cur, agents: { ...cur.agents, ...patch } })); setDirty(true); };
+  const patchDashboard = (patch: Partial<Settings['dashboard']>) => { setSettings((cur) => ({ ...cur, dashboard: { ...cur.dashboard, ...patch } })); setDirty(true); };
 
-  // v3.17.0 — Settings subnav as a filter (not just scroll-to).
-  // Clicking a subnav button shows ONLY that section; clicking "All"
-  // restores the full layout. Anchors still work for deep-links but
-  // the visible content is filtered, not just scrolled.
-  //
-  // v3.18.0 — IDs use the section NAME (not the `settings-X` element id)
-  // because the inline-style wrap compares against the section name, not
-  // the prefixed DOM id.
-  const SECTION_LINKS: Array<{ id: string; label: string }> = [
-    { id: 'theme', label: 'Theme' },
-    { id: 'layout', label: 'Layout' },
-    { id: 'general', label: 'General' },
-    { id: 'service', label: 'Service' },
-    { id: 'tailscale', label: 'Tailscale' },
-    { id: 'notifications', label: 'Notifications' },
-    { id: 'auth', label: 'Auth' },
-    { id: 'agents', label: 'Agents' },
-    { id: 'dashboard', label: 'Dashboard' },
-    { id: 'background', label: 'Background' },
-    { id: 'system-llm', label: 'System LLM' },
-    { id: 'headroom', label: 'Headroom' },
-    { id: 'updates', label: 'Updates' },
-    { id: 'activity-log', label: 'Activity' },
-    { id: 'about', label: 'About' },
-  ];
   const [activeSection, setActiveSection] = useState<string | null>(() => {
-    // Honour #settings-... deep-link on initial mount, otherwise null = All.
     if (typeof window === 'undefined') return null;
     const hash = window.location.hash.replace(/^#settings-/, '');
     return SECTION_LINKS.some((s) => s.id === hash) ? hash : null;
   });
+
   const onJumpSection = (id: string | null) => {
     setActiveSection(id);
     try {
-      const url = id ? `#settings-${id}` : window.location.pathname;
-      history.replaceState(null, '', url);
-      if (id) {
-        const el = document.getElementById(`settings-${id}`);
-        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      } else {
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-      }
+      history.replaceState(null, '', id ? `#settings-${id}` : window.location.pathname);
+      if (id) { const el = document.getElementById(`settings-${id}`); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
+      else window.scrollTo({ top: 0, behavior: 'smooth' });
     } catch { /* ignore */ }
   };
-  // The user picks a section via the subnav; their choice is respected.
-  // (v3.18.0 — Removed auto-scroll-based detection; with the inline-style
-  // filter approach, hidden sections still report bounding rects, so the
-  // detector would race the user's explicit selection and switch tabs back.)
 
-  const patchDashboard = (patch: Partial<Settings['dashboard']>) => {
-    setSettings((cur) => ({ ...cur, dashboard: { ...cur.dashboard, ...patch } }));
-    setDirty(true);
+  const onTailscaleToggle = async () => {
+    try {
+      if (tailscale?.settings.enabled) { await api.post('/tailscale/disable'); toast.success('Tailscale serve disabled.'); }
+      else { await api.post('/tailscale/enable', { port: tailscaleDraft.port || 4321, https: tailscaleDraft.https, hostname: tailscaleDraft.hostname || '' }); toast.success('Tailscale serve enabled.'); }
+      setTailscale(await api.get<TailscaleStatus>('/tailscale/status'));
+    } catch (err) { toast.error(`Tailscale failed: ${(err as Error).message}`); }
   };
 
   const onSave = async () => {
     setSaving(true);
     try {
       const r = await api.put<SettingsResponse>('/settings', settings);
-      setSettings(r.data);
-      setDirty(false);
-      applyTheme(r.data.theme);
-      applyThemeTokens(r.data.theme);
-      toast.success('Settings saved.');
-      await refreshSnapshot();
-    } catch (err) {
-      toast.error(`Save failed: ${(err as Error).message}`);
-    } finally {
-      setSaving(false);
-    }
+      setSettings(r.data); setDirty(false); applyTheme(r.data.theme); applyThemeTokens(r.data.theme);
+      toast.success('Settings saved.'); await refreshSnapshot();
+    } catch (err) { toast.error(`Save failed: ${(err as Error).message}`); }
+    finally { setSaving(false); }
   };
 
   const onReload = async () => {
     try {
       const r = await api.get<SettingsResponse>('/settings');
-      setSettings(r.data);
-      setDirty(false);
-      applyTheme(r.data.theme);
-      applyThemeTokens(r.data.theme);
+      setSettings(r.data); setDirty(false); applyTheme(r.data.theme); applyThemeTokens(r.data.theme);
       toast.info('Settings reloaded.', 1500);
-    } catch (err) {
-      toast.error(`Reload failed: ${(err as Error).message}`);
-    }
+    } catch (err) { toast.error(`Reload failed: ${(err as Error).message}`); }
   };
 
   const onReset = async () => {
     if (!confirm('Reset all settings to defaults?')) return;
     try {
       const r = await api.post<SettingsResponse>('/settings/reset');
-      setSettings(r.data);
-      setDirty(false);
-      applyTheme(r.data.theme);
-      applyThemeTokens(r.data.theme);
-      toast.success('Settings reset.');
-      await refreshSnapshot();
-    } catch (err) {
-      toast.error(`Reset failed: ${(err as Error).message}`);
-    }
+      setSettings(r.data); setDirty(false); applyTheme(r.data.theme); applyThemeTokens(r.data.theme);
+      toast.success('Settings reset.'); await refreshSnapshot();
+    } catch (err) { toast.error(`Reset failed: ${(err as Error).message}`); }
   };
 
-  const onTailscaleToggle = async () => {
-    try {
-      if (tailscale?.settings.enabled) {
-        await api.post('/tailscale/disable');
-        toast.success('Tailscale serve disabled.');
-      } else {
-        await api.post('/tailscale/enable', {
-          port: tailscaleDraft.port || 4321,
-          https: tailscaleDraft.https,
-          hostname: tailscaleDraft.hostname || '',
-        });
-        toast.success('Tailscale serve enabled.');
-      }
-      const r = await api.get<TailscaleStatus>('/tailscale/status');
-      setTailscale(r);
-    } catch (err) {
-      toast.error(`Tailscale failed: ${(err as Error).message}`);
-    }
-  };
-
-  const about = settings.about || {
-    version: '3.0.4',
-    homepage: 'https://github.com/DrB0rk/BizarHarness',
-    license: 'MIT',
-  };
-
-  // v3.6.0 — Auth token UI state. The Settings tab is the only place
-  // the operator can read the token back out. We default the input
-  // to whatever's already in localStorage so a page reload doesn't
-  // wipe the entry.
-  const [authToken, setAuthToken] = useState<string>(api.getToken());
-  const [authStatus, setAuthStatus] = useState<{ required: boolean; loopback: boolean; peer: string } | null>(null);
-  const [revealedToken, setRevealedToken] = useState<string>('');
+  const sp = { settings, patchTheme, patchUi, patchTop, patchNotifications, patchAgents, patchDashboard };
+  const about = settings.about || { version: '3.0.4', homepage: 'https://github.com/DrB0rk/BizarHarness', license: 'MIT' };
 
-  // Probe the server once on mount so we can show "auth required" vs
-  // "auth off" in the UI. If /api/auth/status itself 401s, the token
-  // we're using is bad — surface that distinctly.
-  useEffect(() => {
-    let cancelled = false;
-    (async () => {
-      try {
-        const r = await api.probeAuthStatus();
-        if (!cancelled) setAuthStatus(r);
-      } catch {
-        if (!cancelled) {
-          setAuthStatus({ required: true, loopback: false, peer: '' });
-          // Don't toast — the toast spam would be annoying on every
-          // Settings tab open. The Copy/Regenerate buttons themselves
-          // surface the real error if it happens there.
-        }
-      }
-    })();
-    return () => { cancelled = true; };
-  }, []);
-
-  const onCopyToken = async () => {
-    try {
-      const r = await api.get<{ token: string }>('/auth/reveal');
-      setRevealedToken(r.token);
-      setAuthToken(r.token);
-      api.setToken(r.token);
-      try {
-        await navigator.clipboard.writeText(r.token);
-        toast.success('Token copied to clipboard.');
-      } catch {
-        toast.success('Token revealed — copy from the field below.');
-      }
-    } catch (err) {
-      toast.error(`Reveal failed: ${(err as Error).message}`);
-    }
-  };
-
-  const onRegenerateToken = async () => {
-    if (!confirm('Regenerate the auth token? Anything still using the old token will start getting 401 errors immediately.')) {
-      return;
-    }
-    try {
-      const r = await api.post<{ token: string }>('/auth/regenerate');
-      setRevealedToken(r.token);
-      setAuthToken(r.token);
-      api.setToken(r.token);
-      try {
-        await navigator.clipboard.writeText(r.token);
-        toast.success('New token generated and copied to clipboard.');
-      } catch {
-        toast.success('New token generated — copy from the field below. Old token is now invalid.');
-      }
-    } catch (err) {
-      toast.error(`Regenerate failed: ${(err as Error).message}`);
-    }
-  };
-
-  const onSaveToken = () => {
-    api.setToken(authToken.trim());
-    toast.success('Token saved. The dashboard will use it on the next request.');
-  };
+  const showAll = activeSection === null;
+  const sectionOf = (id: string) => activeSection === id;
 
   return (
     <div className="view view-settings">
       <header className="view-header">
         <div className="view-header-text">
-          <h2 className="view-title">
-            <Sliders size={18} /> Settings
-          </h2>
-          <p className="view-subtitle">
-            Personal preferences. Changes are saved to{' '}
-            <code>~/.config/bizar/settings.json</code>.
-          </p>
+          <h2 className="view-title"><Sliders size={18} /> Settings</h2>
+          <p className="view-subtitle">Personal preferences. Changes are saved to <code>~/.config/bizar/settings.json</code>.</p>
         </div>
         <div className="view-actions">
-          <Button variant="ghost" size="sm" onClick={onReset}>
-            <RotateCcw size={14} /> Reset
-          </Button>
-          <Button variant="secondary" size="sm" onClick={onReload}>
-            <RefreshCw size={14} /> Reload
-          </Button>
-          <Button
-            variant="primary"
-            size="sm"
-            disabled={!dirty || saving}
-            onClick={onSave}
-          >
-            {saving ? <span className="btn-spinner" /> : <Save size={14} />}
-            {saving ? 'Saving…' : 'Save'}
+          <Button variant="ghost" size="sm" onClick={onReset}><RotateCcw size={14} /> Reset</Button>
+          <Button variant="secondary" size="sm" onClick={onReload}><RefreshCw size={14} /> Reload</Button>
+          <Button variant="primary" size="sm" disabled={!dirty || saving} onClick={onSave}>
+            {saving ? <span className="btn-spinner" /> : <Save size={14} />}{saving ? 'Saving…' : 'Save'}
           </Button>
         </div>
       </header>
 
       <nav className="settings-subnav" aria-label="Settings sections">
-        <button
-          type="button"
-          className={cn('settings-subnav-button', 'settings-subnav-button-all', activeSection === null && 'settings-subnav-button-active')}
-          onClick={() => onJumpSection(null)}
-          title="Show all settings sections"
-        >
-          All
-        </button>
+        <button type="button" className={cn('settings-subnav-button', 'settings-subnav-button-all', showAll && 'settings-subnav-button-active')} onClick={() => onJumpSection(null)} title="Show all settings sections">All</button>
         {SECTION_LINKS.map((s) => (
-          <button
-            key={s.id}
-            type="button"
-            className={cn('settings-subnav-button', activeSection === s.id && 'settings-subnav-button-active')}
-            onClick={() => onJumpSection(s.id)}
-          >
-            {s.label}
-          </button>
+          <button key={s.id} type="button" className={cn('settings-subnav-button', activeSection === s.id && 'settings-subnav-button-active')} onClick={() => onJumpSection(s.id)}>{s.label}</button>
         ))}
       </nav>
 
-      <div
-        className={cn('settings-grid', activeSection && 'settings-grid-filtered')}
-        data-active-section={activeSection || undefined}
-      >
-        {/* When a section is active, render a banner above the grid so
-            the user knows they're seeing a filtered view. */}
-        {activeSection && (
-          <div className="settings-filter-banner">
-            <span>
-              Showing only <strong>{SECTION_LINKS.find((s) => s.id === activeSection)?.label}</strong>.
-            </span>
-            <button
-              type="button"
-              className="settings-filter-clear"
-              onClick={() => onJumpSection(null)}
-            >
-              Show all sections
-            </button>
-          </div>
-        )}
-        <div data-section="theme" style={{display: (activeSection === null || activeSection === 'theme') ? 'block' : 'none'}}>
-<Card id="settings-theme" data-section="theme">
-          <CardTitle><Palette size={14} /> Theme</CardTitle>
-          <CardMeta>Mode, accent, and colors. Live preview as you tweak.</CardMeta>
-
-          {/* v3.3.1 — Accent color presets */}
-          <div className="field" data-setting-id="theme.presets">
-            <label className="field-label">Accent presets</label>
-            <div className="theme-presets">
-              {PRESET_THEMES.map((t) => (
-                <button
-                  key={t.name}
-                  type="button"
-                  className={cn(
-                    'theme-preset',
-                    settings.theme.accent === t.accent && 'theme-preset-active',
-                  )}
-                  onClick={() => patchTheme({ accent: t.accent })}
-                  title={t.name}
-                >
-                  <span
-                    className="theme-preset-swatch"
-                    style={{ background: t.accent }}
-                  />
-                  <span className="theme-preset-name">{t.name}</span>
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div className="field" data-setting-id="theme.mode">
-            <label className="field-label">Mode</label>
-            <div className="theme-row">
-              {THEMES.map(({ id, label, Icon }) => {
-                const active = settings.theme.mode === id;
-                return (
-                  <button
-                    key={id}
-                    type="button"
-                    className={cn('theme-card', active && 'theme-card-active')}
-                    onClick={() => patchTheme({ mode: id })}
-                  >
-                    <Icon size={16} />
-                    <span className="theme-card-label">{label}</span>
-                    <span
-                      className={cn(
-                        'theme-card-swatch',
-                        `theme-card-swatch-${id}`,
-                      )}
-                    />
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-
-          <div className="theme-colors">
-            <div className="field" data-setting-id="theme.accent">
-              <label className="field-label">Accent</label>
-              <div className="color-row">
-                <input
-                  type="color"
-                  className="input color-input"
-                  value={settings.theme.accent}
-                  onChange={(e) => patchTheme({ accent: e.target.value })}
-                  aria-label="Accent color"
-                />
-                <input
-                  type="text"
-                  className="input"
-                  value={settings.theme.accent}
-                  onChange={(e) => patchTheme({ accent: e.target.value })}
-                />
-              </div>
-            </div>
-            <div className="field" data-setting-id="theme.success">
-              <label className="field-label">Success</label>
-              <div className="color-row">
-                <input
-                  type="color"
-                  className="input color-input"
-                  value={settings.theme.success}
-                  onChange={(e) => patchTheme({ success: e.target.value })}
-                  aria-label="Success color"
-                />
-                <input
-                  type="text"
-                  className="input"
-                  value={settings.theme.success}
-                  onChange={(e) => patchTheme({ success: e.target.value })}
-                />
-              </div>
-            </div>
-            <div className="field" data-setting-id="theme.warning">
-              <label className="field-label">Warning</label>
-              <div className="color-row">
-                <input
-                  type="color"
-                  className="input color-input"
-                  value={settings.theme.warning}
-                  onChange={(e) => patchTheme({ warning: e.target.value })}
-                  aria-label="Warning color"
-                />
-                <input
-                  type="text"
-                  className="input"
-                  value={settings.theme.warning}
-                  onChange={(e) => patchTheme({ warning: e.target.value })}
-                />
-              </div>
-            </div>
-            <div className="field" data-setting-id="theme.error">
-              <label className="field-label">Error</label>
-              <div className="color-row">
-                <input
-                  type="color"
-                  className="input color-input"
-                  value={settings.theme.error}
-                  onChange={(e) => patchTheme({ error: e.target.value })}
-                  aria-label="Error color"
-                />
-                <input
-                  type="text"
-                  className="input"
-                  value={settings.theme.error}
-                  onChange={(e) => patchTheme({ error: e.target.value })}
-                />
-              </div>
-            </div>
-            <div className="field" data-setting-id="theme.info">
-              <label className="field-label">Info</label>
-              <div className="color-row">
-                <input
-                  type="color"
-                  className="input color-input"
-                  value={settings.theme.info}
-                  onChange={(e) => patchTheme({ info: e.target.value })}
-                  aria-label="Info color"
-                />
-                <input
-                  type="text"
-                  className="input"
-                  value={settings.theme.info}
-                  onChange={(e) => patchTheme({ info: e.target.value })}
-                />
-              </div>
-            </div>
-          </div>
-
-          <div className="field" data-setting-id="theme.fontFamily">
-            <label className="field-label">Font family</label>
-            <select
-              className="select"
-              value={settings.theme.fontFamily}
-              onChange={(e) => patchTheme({ fontFamily: e.target.value })}
-            >
-              {FONT_FAMILIES.map((f) => (
-                <option key={f} value={f}>{f}</option>
-              ))}
-            </select>
-          </div>
-          <div className="field" data-setting-id="theme.fontSize">
-            <label className="field-label">Font size: {settings.theme.fontSize}px</label>
-            <input
-              type="range"
-              min={12}
-              max={20}
-              value={settings.theme.fontSize}
-              onChange={(e) => patchTheme({ fontSize: Number(e.target.value) })}
-            />
-          </div>
-          <label className="checkbox-row" data-setting-id="theme.compactMode">
-            <input
-              type="checkbox"
-              checked={settings.theme.compactMode}
-              onChange={(e) => patchTheme({ compactMode: e.target.checked })}
-            />
-            <span>Compact mode (denser UI)</span>
-          </label>
-          <label className="checkbox-row" data-setting-id="theme.animations">
-            <input
-              type="checkbox"
-              checked={settings.theme.animations}
-              onChange={(e) => patchTheme({ animations: e.target.checked })}
-            />
-            <span>Enable animations</span>
-          </label>
-        </Card>
-</div>
-
-        <div data-section="updates" style={{display: (activeSection === null || activeSection === 'updates') ? 'block' : 'none'}}>
-          <UpdatesCard />
-        </div>
-
-        <div data-section="layout" style={{display: (activeSection === null || activeSection === 'layout') ? 'block' : 'none'}}>
-<Card id="settings-layout" data-section="layout">
-          <CardTitle><LayoutIcon size={14} /> UI layout</CardTitle>
-          <CardMeta>Choose how the dashboard's navigation is presented.</CardMeta>
-          <div className="layout-row" data-setting-id="ui.layout">
-            {LAYOUTS.map((l) => (
-              <button
-                key={l.id}
-                type="button"
-                className={cn('layout-card', settings.ui.layout === l.id && 'layout-card-active')}
-                onClick={() => patchUi({ layout: l.id })}
-              >
-                <span className="layout-card-label">{l.label}</span>
-              </button>
-            ))}
-          </div>
-          <label className="checkbox-row" data-setting-id="ui.showHeader">
-            <input
-              type="checkbox"
-              checked={settings.ui.showHeader}
-              onChange={(e) => patchUi({ showHeader: e.target.checked })}
-            />
-            <span>Show header</span>
-          </label>
-          <label className="checkbox-row" data-setting-id="ui.showStatusBar">
-            <input
-              type="checkbox"
-              checked={settings.ui.showStatusBar}
-              onChange={(e) => patchUi({ showStatusBar: e.target.checked })}
-            />
-            <span>Show status bar</span>
-          </label>
-          <div className="field" data-setting-id="ui.defaultTab">
-            <label className="field-label">Default tab</label>
-            <select
-              className="select"
-              value={settings.ui.defaultTab}
-              onChange={(e) => patchUi({ defaultTab: e.target.value })}
-            >
-              <option value="overview">Overview</option>
-              <option value="chat">Chat</option>
-              <option value="agents">Agents</option>
-              <option value="artifacts">Plans</option>
-              <option value="projects">Projects</option>
-              <option value="tasks">Tasks</option>
-              <option value="config">Config</option>
-              <option value="settings">Settings</option>
-              <option value="mods">Mods</option>
-              <option value="schedules">Schedules</option>
-            </select>
-          </div>
-        </Card>
-</div>
-
-        <div data-section="general" style={{display: (activeSection === null || activeSection === 'general') ? 'block' : 'none'}}>
-<Card id="settings-general" data-section="general">
-          <CardTitle>General</CardTitle>
-          <CardMeta>Default agent + model override.</CardMeta>
-          <div className="field" data-setting-id="defaultAgent">
-            <label className="field-label" htmlFor="set-default-agent">Default agent</label>
-            <input
-              id="set-default-agent"
-              className="input"
-              type="text"
-              placeholder="e.g. odin"
-              value={settings.defaultAgent || ''}
-              onChange={(e) => patchTop('defaultAgent', e.target.value)}
-            />
-          </div>
-          <div className="field" data-setting-id="defaultModel">
-            <label className="field-label" htmlFor="set-default-model">Model override</label>
-            <input
-              id="set-default-model"
-              className="input"
-              type="text"
-              placeholder="(leave empty for provider default)"
-              value={settings.defaultModel || ''}
-              onChange={(e) => patchTop('defaultModel', e.target.value)}
-            />
-          </div>
-        </Card>
-</div>
-
-        <div data-section="service" style={{display: (activeSection === null || activeSection === 'service') ? 'block' : 'none'}}>
-<Card id="settings-service" data-section="service">
-          <CardTitle><ServerIcon size={14} /> Service</CardTitle>
-          <CardMeta>Background daemon that runs schedules.</CardMeta>
-          <div data-setting-id="service.enabled">
-            {tailscale ? (
-              <div className="service-card">
-                <p>
-                  Status: <strong>{tailscale?.settings.enabled ? 'enabled' : 'disabled'}</strong>
-                  {' '}· Tailscale installed: <strong>{tailscale.installed ? 'yes' : 'no'}</strong>
-                  {' '}· authenticated: <strong>{tailscale.authenticated ? 'yes' : 'no'}</strong>
-                </p>
-                <p className="muted">
-                  Use <code>bizar service start</code> / <code>bizar service stop</code> in
-                  your terminal to control the daemon.
-                </p>
-              </div>
-            ) : (
-              <p className="muted">Loading service status…</p>
-            )}
-          </div>
-        </Card>
-</div>
-
-        <div data-section="tailscale" style={{display: (activeSection === null || activeSection === 'tailscale') ? 'block' : 'none'}}>
-<Card id="settings-tailscale" data-section="tailscale">
-          <CardTitle><Plug size={14} /> Tailscale serve</CardTitle>
-          <CardMeta>Expose the dashboard over your Tailscale network.</CardMeta>
-          {tailscale ? (
-            <>
-              <p>
-                Installed: <strong>{tailscale.installed ? 'yes' : 'no'}</strong>{' '}
-                {tailscale.version && <span className="muted">({tailscale.version})</span>}
-              </p>
-              <p>
-                Authenticated: <strong>{tailscale.authenticated ? 'yes' : 'no'}</strong>
-              </p>
-              <p>
-                Serve enabled: <strong>{tailscale.settings.enabled ? 'yes' : 'no'}</strong>
-              </p>
-              <div className="task-form-row">
-                <div className="task-form-field">
-                  <label className="field-label">Port</label>
-                  <input
-                    type="number"
-                    className="input"
-                    value={tailscaleDraft.port}
-                    onChange={(e) => setTailscaleDraft((cur) => ({ ...cur, port: Number(e.target.value) || 4321 }))}
-                  />
-                </div>
-                <div className="task-form-field">
-                  <label className="field-label">Use HTTPS</label>
-                  <input
-                    type="checkbox"
-                    checked={tailscaleDraft.https}
-                    onChange={(e) => setTailscaleDraft((cur) => ({ ...cur, https: e.target.checked }))}
-                  />
-                </div>
-              </div>
-              <Button variant="primary" onClick={onTailscaleToggle}>
-                {tailscale.settings.enabled ? 'Disable serve' : 'Enable serve'}
-              </Button>
-            </>
-          ) : (
-            <p className="muted">Loading Tailscale status…</p>
-          )}
-        </Card>
-</div>
-
-        <div data-section="notifications" style={{display: (activeSection === null || activeSection === 'notifications') ? 'block' : 'none'}}>
-<Card id="settings-notifications" data-section="notifications">
-          <CardTitle>Notifications</CardTitle>
-          <CardMeta>Toast triggers inside the dashboard.</CardMeta>
-          <label className="checkbox-row" data-setting-id="notifications.onAgentComplete">
-            <input
-              type="checkbox"
-              checked={!!settings.notifications.onAgentComplete}
-              onChange={(e) => patchNotifications({ onAgentComplete: e.target.checked })}
-            />
-            <span>Notify when an agent invocation completes</span>
-          </label>
-          <label className="checkbox-row" data-setting-id="notifications.onPlanApproval">
-            <input
-              type="checkbox"
-              checked={!!settings.notifications.onPlanApproval}
-              onChange={(e) => patchNotifications({ onPlanApproval: e.target.checked })}
-            />
-            <span>Notify when a plan needs approval</span>
-          </label>
-        </Card>
-</div>
-
-        {/* v3.6.0 — Auth token management. The Settings tab is the
-            only place a human can read the token. The input + Save
-            button lets the operator paste a token they got from
-            server stderr or from another machine. Copy / Regenerate
-            buttons act via the authed /api/auth/* endpoints. */}
-        <div data-section="auth" style={{display: (activeSection === null || activeSection === 'auth') ? 'block' : 'none'}}>
-<Card id="settings-auth" data-section="auth">
-          <CardTitle><Shield size={14} /> Authentication</CardTitle>
-          <CardMeta>
-            Localhost and Tailscale browser access are auto-trusted via loopback.
-            A bearer token is still available for non-loopback clients and
-            forced-auth mode.
-          </CardMeta>
-          <div className="field" data-setting-id="auth.status">
-            <label className="field-label">Server status</label>
-            <p style={{ margin: '4px 0' }}>
-              Auth required:{' '}
-              <strong>{authStatus ? (authStatus.required ? 'yes' : 'no') : 'probing…'}</strong>
-            </p>
-            <p style={{ margin: '4px 0' }}>
-              Connection:{' '}
-              <strong>
-                {authStatus
-                  ? (authStatus.loopback ? 'loopback (auto-trusted)' : 'remote')
-                  : 'probing…'}
-              </strong>
-            </p>
-            <p style={{ margin: '4px 0' }}>
-              Peer address:{' '}
-              {authStatus?.peer ? <code>{authStatus.peer}</code> : <span className="muted">probing…</span>}
-            </p>
-            <p className="muted" style={{ fontSize: 12, margin: '4px 0' }}>
-              Localhost and Tailscale browser access are auto-trusted because the
-              dashboard sees a loopback peer. Paste a token only for non-loopback
-              API clients/scripts, or if you force auth for every connection with{' '}
-              <code>BIZAR_DASHBOARD_REQUIRE_AUTH=1</code>.
-            </p>
-            <p className="muted" style={{ fontSize: 12, margin: '4px 0' }}>
-              Dashboard tokens are generated on first boot and saved to{' '}
-              <code>~/.config/bizar/dashboard-secret</code> (mode 0600).
-            </p>
-            {/* v3.6.2 */}
-            <p className="muted" style={{ fontSize: 12, margin: '4px 0' }}>
-              For Tailscale Serve or any reverse-proxy access, paste this token
-              once via the boot screen — it is saved per-origin and works for all
-              subsequent visits.
-            </p>
-          </div>
-          <div className="field" data-setting-id="auth.token">
-            <label className="field-label">Token (this browser)</label>
-            <input
-              type="password"
-              className="input mono"
-              value={authToken}
-              onChange={(e) => setAuthToken(e.target.value)}
-              placeholder="Paste token from server stderr or another browser"
-              spellCheck={false}
-              autoComplete="off"
-            />
-            <div className="task-form-row" style={{ marginTop: 8 }}>
-              <Button variant="secondary" size="sm" onClick={onSaveToken}>
-                <KeyRound size={14} /> Save token
-              </Button>
-              <Button variant="ghost" size="sm" onClick={onCopyToken}>
-                <Copy size={14} /> Reveal &amp; copy server token
-              </Button>
-              <Button variant="ghost" size="sm" onClick={onRegenerateToken}>
-                <RotateCcw size={14} /> Regenerate
-              </Button>
-            </div>
-            {revealedToken ? (
-              <p className="muted" style={{ fontSize: 12, marginTop: 8 }}>
-                Last revealed token (one-time): <code className="mono">{revealedToken}</code>
-              </p>
-            ) : null}
-            <p className="muted" style={{ fontSize: 12, marginTop: 8 }}>
-              Regenerating invalidates the current token immediately. Anything
-              still using the old token will see 401 until it's updated.
-            </p>
-          </div>
-        </Card>
-</div>
-
-        <div data-section="agents" style={{display: (activeSection === null || activeSection === 'agents') ? 'block' : 'none'}}>
-<Card id="settings-agents" data-section="agents">
-          <CardTitle><ServerIcon size={14} /> Agent Behavior</CardTitle>
-          <CardMeta>Limits and timeouts for background agent dispatch.</CardMeta>
-          <div className="form-row">
-            <label htmlFor="agents-maxParallel">
-              Max parallel agents
-              <span className="meta-badge">default: 6</span>
-            </label>
-            <input
-              id="agents-maxParallel"
-              type="number"
-              min={1}
-              max={20}
-              value={settings.agents?.maxParallel ?? 6}
-              onChange={(e) => patchAgents({ maxParallel: Math.max(1, Math.min(20, parseInt(e.target.value, 10) || 6)) })}
-            />
-          </div>
-          <div className="form-row">
-            <label htmlFor="agents-stuckThresholdMs">
-              Stuck threshold (ms)
-              <span className="meta-badge">default: 600000 (10 min)</span>
-            </label>
-            <input
-              id="agents-stuckThresholdMs"
-              type="number"
-              min={60000}
-              max={3600000}
-              step={60000}
-              value={settings.agents?.stuckThresholdMs ?? 600000}
-              onChange={(e) => patchAgents({ stuckThresholdMs: Math.max(60000, Math.min(3600000, parseInt(e.target.value, 10) || 600000)) })}
-            />
-          </div>
-          <label className="checkbox-row" data-setting-id="agents.autoRestart">
-            <input
-              type="checkbox"
-              checked={!!settings.agents?.autoRestart}
-              onChange={(e) => patchAgents({ autoRestart: e.target.checked })}
-            />
-            <span>Auto-restart stuck agents</span>
-          </label>
-        </Card>
-</div>
-
-        <div data-section="dashboard" style={{display: (activeSection === null || activeSection === 'dashboard') ? 'block' : 'none'}}>
-<Card id="settings-dashboard" data-section="dashboard">
-          <CardTitle><Globe size={14} /> Dashboard</CardTitle>
-          <CardMeta>Controls how <code>bizar</code> starts up.</CardMeta>
-          <label className="checkbox-row" data-setting-id="dashboard.autoLaunchWeb">
-            <input
-              type="checkbox"
-              checked={settings.dashboard.autoLaunchWeb !== false}
-              onChange={(e) => patchDashboard({ autoLaunchWeb: e.target.checked })}
-            />
-            <span>Auto-launch web UI alongside TUI</span>
-          </label>
-
-          <div className="field" data-setting-id="dashboard.projectsDirectory" style={{ marginTop: 'var(--space-4)' }}>
-            <label className="field-label" htmlFor="set-projects-directory">Projects directory</label>
-            <input
-              id="set-projects-directory"
-              className="input"
-              type="text"
-              placeholder="/home/user/projects"
-              value={settings.dashboard.projectsDirectory ?? ''}
-              onChange={(e) => patchDashboard({ projectsDirectory: e.target.value })}
-            />
-            <p className="field-help">
-              New projects created via the dashboard will land here, and existing project
-              directories inside this folder are auto-recognized on startup.
-            </p>
-            {settings.dashboard.projectsDirectory && (
-              <>
-                {!/^\/|^[A-Za-z]:/.test(settings.dashboard.projectsDirectory) && (
-                  <p style={{ color: 'var(--warning)', fontSize: 11, marginTop: 4 }}>
-                    Path should be absolute (start with / on Linux/Mac, or a drive letter on Windows).
-                  </p>
-                )}
-                {settings.dashboard.projectsDirectory.includes('..') && (
-                  <p style={{ color: 'var(--error)', fontSize: 11, marginTop: 4 }}>
-                    Path traversal not allowed — this will be rejected server-side.
-                  </p>
-                )}
-              </>
-            )}
-          </div>
-
-          {/* allowedRoots textarea */}
-          <div className="field" data-setting-id="dashboard.allowedRoots" style={{ marginTop: 'var(--space-4)' }}>
-            <label className="field-label" htmlFor="set-allowed-roots">
-              Additional allowed roots <span className="muted">(advanced)</span>
-            </label>
-            <textarea
-              id="set-allowed-roots"
-              className="textarea"
-              rows={4}
-              placeholder="/workspace&#10;/srv/projects"
-              value={(settings.dashboard.allowedRoots ?? []).join('\n')}
-              onChange={(e) => {
-                const lines = e.target.value
-                  .split('\n')
-                  .map((l) => l.trim())
-                  .filter(Boolean);
-                patchDashboard({ allowedRoots: lines });
-              }}
-            />
-            <p className="field-help">
-              Optional. Add filesystem roots beyond your home directory that the file
-              browser and project scanner can access. Each path must be inside your
-              home directory. One per line.
-            </p>
-            {(() => {
-              const rawLines = (settings.dashboard.allowedRoots ?? []).join('\n').split('\n');
-              const warnings: { key: string; msg: React.ReactNode }[] = [];
-              rawLines.forEach((line, i) => {
-                if (!line.trim()) return;
-                if (!/^\/|^[A-Za-z]:/.test(line)) {
-                  warnings.push({
-                    key: `noabs-${i}`,
-                    msg: (
-                      <p style={{ color: 'var(--warning)', fontSize: 11, marginTop: 2 }}>
-                        Line {i + 1}: "{line}" — should be absolute (start with / or a drive letter).
-                      </p>
-                    ),
-                  });
-                }
-                if (line.includes('..')) {
-                  warnings.push({
-                    key: `dots-${i}`,
-                    msg: (
-                      <p style={{ color: 'var(--error)', fontSize: 11, marginTop: 2 }}>
-                        Line {i + 1}: "{line}" — contains '..' (server will reject this).
-                      </p>
-                    ),
-                  });
-                }
-              });
-              return warnings.map((w) => w.msg);
-            })()}
-          </div>
-        </Card>
-</div>
-
-        <div data-section="background" style={{display: (activeSection === null || activeSection === 'background') ? 'block' : 'none'}}>
-<Card id="settings-background" data-section="background">
-          <CardTitle><ServerIcon size={14} /> Background Agents</CardTitle>
-          <CardMeta>Tune plugin options. Changes take effect on next plugin restart.</CardMeta>
-
-          <div className="form-row">
-            <label htmlFor="bg-maxConcurrent">
-              Max concurrent instances
-              <span className="meta-badge">default: 8</span>
-            </label>
-            <input
-              id="bg-maxConcurrent"
-              type="number"
-              min={1}
-              max={32}
-              value={pluginOptions.maxConcurrentInstances ?? 8}
-              onChange={(e) => setPluginOptions((cur) => ({ ...cur, maxConcurrentInstances: Math.max(1, Math.min(32, parseInt(e.target.value, 10) || 8)) }))}
-            />
-            <small className="muted">Plugin option: <code>maxConcurrentInstances</code></small>
-          </div>
-
-          <div className="form-row">
-            <label htmlFor="bg-toolCallCap">
-              Tool-call cap
-              <span className="meta-badge">default: 500</span>
-            </label>
-            <input
-              id="bg-toolCallCap"
-              type="number"
-              min={1}
-              max={5000}
-              value={pluginOptions.backgroundToolCallCap ?? 500}
-              onChange={(e) => setPluginOptions((cur) => ({ ...cur, backgroundToolCallCap: Math.max(1, Math.min(5000, parseInt(e.target.value, 10) || 500)) }))}
-            />
-            <small className="muted">Plugin option: <code>backgroundToolCallCap</code></small>
-          </div>
-
-          <div className="form-row">
-            <label htmlFor="bg-stallTimeout">
-              Stall timeout (ms)
-              <span className="meta-badge">default: 180000</span>
-            </label>
-            <input
-              id="bg-stallTimeout"
-              type="number"
-              min={10000}
-              max={600000}
-              step={1000}
-              value={pluginOptions.backgroundStallTimeoutMs ?? 180000}
-              onChange={(e) => setPluginOptions((cur) => ({ ...cur, backgroundStallTimeoutMs: Math.max(10000, Math.min(600000, parseInt(e.target.value, 10) || 180000)) }))}
-            />
-            <small className="muted">Plugin option: <code>backgroundStallTimeoutMs</code></small>
-          </div>
-
-          <div className="form-row">
-            <label htmlFor="bg-thinkingLoopTimeout">
-              Thinking-loop timeout (ms)
-              <span className="meta-badge">default: 300000</span>
-            </label>
-            <input
-              id="bg-thinkingLoopTimeout"
-              type="number"
-              min={30000}
-              max={900000}
-              step={1000}
-              value={pluginOptions.backgroundThinkingLoopTimeoutMs ?? 300000}
-              onChange={(e) => setPluginOptions((cur) => ({ ...cur, backgroundThinkingLoopTimeoutMs: Math.max(30000, Math.min(900000, parseInt(e.target.value, 10) || 300000)) }))}
-            />
-            <small className="muted">Plugin option: <code>backgroundThinkingLoopTimeoutMs</code></small>
-          </div>
-
-          <div className="form-row">
-            <label htmlFor="bg-maxInterventions">
-              Max interventions
-              <span className="meta-badge">default: 1</span>
-            </label>
-            <input
-              id="bg-maxInterventions"
-              type="number"
-              min={1}
-              max={3}
-              value={pluginOptions.backgroundMaxInterventions ?? 1}
-              onChange={(e) => setPluginOptions((cur) => ({ ...cur, backgroundMaxInterventions: Math.max(1, Math.min(3, parseInt(e.target.value, 10) || 1)) }))}
-            />
-            <small className="muted">Plugin option: <code>backgroundMaxInterventions</code></small>
-          </div>
-
-          <div className="form-row">
-            <Button variant="secondary" size="sm" onClick={async () => {
-              try {
-                await api.put('/settings/plugin-options', pluginOptions);
-                toast.success('Saved — restart opencode for changes to take effect.');
-              } catch (err) {
-                toast.error(`Save failed: ${(err as Error).message}`);
-              }
-            }}>
-              <Save size={14} /> Save plugin options
-            </Button>
-
-            <Button variant="secondary" size="sm" onClick={async () => {
-              try {
-                const r = await fetch('/api/background/cleanup', {
-                  method: 'POST',
-                  headers: { 'Content-Type': 'application/json' },
-                  body: JSON.stringify({ maxAgeDays: 7 }),
-                });
-                const result = await r.json();
-                toast.success(`Cleaned up ${result.deleted} old instances.`);
-              } catch (err) {
-                toast.error(`Cleanup failed: ${(err as Error).message}`);
-              }
-            }}>
-              Cleanup old instances (&gt;7 days)
-            </Button>
-          </div>
-
-          <div className="form-row">
-            <small>Plugin options are read at startup. Save changes and run <code>bizar update</code> to apply.</small>
-          </div>
-        </Card>
-</div>
+      <div className={cn('settings-grid', activeSection && 'settings-grid-filtered')} data-active-section={activeSection || undefined}>
+        {(showAll || sectionOf('theme')) && <ThemeSection {...sp} />}
+        {(showAll || sectionOf('updates')) && <UpdatesSection />}
+        {(showAll || sectionOf('layout') || sectionOf('general')) && <GeneralSection {...sp} />}
+        {(showAll || sectionOf('network') || sectionOf('service') || sectionOf('tailscale')) && <NetworkSection tailscale={tailscale} tailscaleDraft={tailscaleDraft} setTailscaleDraft={setTailscaleDraft} onTailscaleToggle={onTailscaleToggle} />}
+        {(showAll || sectionOf('notifications')) && <NotificationsSection {...sp} />}
+        {(showAll || sectionOf('auth')) && <AuthSection settings={settings} authStatus={authStatus} setAuthStatus={setAuthStatus} />}
+        {(showAll || sectionOf('agents') || sectionOf('dashboard') || sectionOf('background')) && <AgentSection {...sp} />}
+        {(showAll || sectionOf('system-llm')) && <SystemLlmSection {...sp} />}
+        {(showAll || sectionOf('headroom')) && <HeadroomSection settings={settings} setSettings={setSettings} setDirty={setDirty} />}
+        {(showAll || sectionOf('activity-log') || sectionOf('about')) && <ActivitySection about={about} />}
+        {(showAll || sectionOf('env-vars')) && <EnvVarsSection />}
+        {(showAll || sectionOf('providers')) && <ProvidersSection />}
+        {(showAll || sectionOf('memory')) && <MemorySection />}
+        {(showAll || sectionOf('skills')) && <SkillsSection />}
+        {(showAll || sectionOf('backup')) && <BackupSection />}
       </div>
-
-        <div data-section="system-llm" style={{display: (activeSection === null || activeSection === 'system-llm') ? 'block' : 'none'}}>
-<Card id="settings-system-llm" data-section="system-llm">
-          <CardTitle><Sparkles size={14} /> System LLM API</CardTitle>
-          <CardMeta>
-            Configures the LLM used for automatic title generation, prompt enhancement,
-            summarization, and other system-level calls.
-          </CardMeta>
-
-          <label className="checkbox-row" data-setting-id="systemLlm.enabled">
-            <input
-              type="checkbox"
-              checked={!!settings.systemLlm?.enabled}
-              onChange={(e) => {
-                const cur = settings.systemLlm || { enabled: true, provider: 'opencode', model: 'opencode/deepseek-v4-flash-free' };
-                patchTop('systemLlm', { ...cur, enabled: e.target.checked });
-              }}
-            />
-            <span>Enable system LLM calls</span>
-          </label>
-
-          <div className="field" data-setting-id="systemLlm.provider" style={{ marginTop: 'var(--space-3)' }}>
-            <label className="field-label" htmlFor="set-system-llm-provider">Provider</label>
-            <select
-              id="set-system-llm-provider"
-              className="select"
-              value={settings.systemLlm?.provider || 'opencode'}
-              onChange={(e) => {
-                const cur = settings.systemLlm || { enabled: true, provider: 'opencode', model: 'opencode/deepseek-v4-flash-free' };
-                patchTop('systemLlm', { ...cur, provider: e.target.value });
-              }}
-            >
-              <option value="opencode">Opencode</option>
-              <option value="openrouter">OpenRouter</option>
-              <option value="minimax">MiniMax</option>
-            </select>
-          </div>
-
-          <div className="field" data-setting-id="systemLlm.model">
-            <label className="field-label" htmlFor="set-system-llm-model">Model</label>
-            <input
-              id="set-system-llm-model"
-              className="input mono"
-              type="text"
-              placeholder="opencode/deepseek-v4-flash-free"
-              value={settings.systemLlm?.model || 'opencode/deepseek-v4-flash-free'}
-              onChange={(e) => {
-                const cur = settings.systemLlm || { enabled: true, provider: 'opencode', model: 'opencode/deepseek-v4-flash-free' };
-                patchTop('systemLlm', { ...cur, model: e.target.value });
-              }}
-            />
-            <p className="field-help">
-              The API key is read from <code>auth.json</code> for the selected provider.
-              Leave the default model for best results.
-            </p>
-          </div>
-
-          <div style={{ marginTop: 'var(--space-4)' }}>
-            <h4 style={{ margin: '0 0 var(--space-2)' }}>Features using this API</h4>
-            <ul className="settings-feature-list" style={{ margin: 0, paddingLeft: 'var(--space-4)', lineHeight: 1.8 }}>
-              <li>Auto-title generation for new chat sessions</li>
-              <li>Auto-title generation for new tasks</li>
-              <li>"Enhance prompt" button in the task input</li>
-              <li>"Enhance prompt" button in the chat composer</li>
-              <li className="muted" style={{ fontSize: 12 }}>Future: summarization, name generation, and more</li>
-            </ul>
-          </div>
-        </Card>
-</div>
-
-        <div data-section="headroom" style={{display: (activeSection === null || activeSection === 'headroom') ? 'block' : 'none'}}>
-          <HeadroomSettingsCard
-            settings={settings.headroom || DEFAULT_HEADROOM_SETTINGS}
-            onPatch={(patch) => {
-              setSettings((cur) => ({
-                ...cur,
-                headroom: { ...(cur.headroom || DEFAULT_HEADROOM_SETTINGS), ...patch },
-              }));
-              setDirty(true);
-            }}
-          />
-        </div>
-
-      <PairDeviceCard />
-
-      <div style={{display: (activeSection === null || activeSection === 'activity-log') ? 'block' : 'none'}}>
-      <div data-section="activity-log" style={{display: (activeSection === null || activeSection === 'activity-log') ? 'block' : 'none'}}>
-      <section id="settings-activity-log" data-section="activity-log" className="settings-section-wrap">
-                    <ActivityLogCard />
-                  </section>
-</div>
-</div>
-
-      <div style={{display: (activeSection === null || activeSection === 'about') ? 'block' : 'none'}}>
-      <div data-section="about" style={{display: (activeSection === null || activeSection === 'about') ? 'block' : 'none'}}>
-      <Card id="settings-about" data-section="about">
-                    <CardTitle><Info size={14} /> About</CardTitle>
-                    <CardMeta>Build metadata.</CardMeta>
-                    <dl className="about-table">
-                      <dt>Version</dt>
-                      <dd className="mono">{about.version}</dd>
-                      <dt>Homepage</dt>
-                      <dd>
-                        <a href={about.homepage} target="_blank" rel="noopener noreferrer">
-                          {about.homepage}
-                        </a>
-                      </dd>
-                      <dt>License</dt>
-                      <dd>{about.license}</dd>
-                    </dl>
-                  </Card>
-</div>
-</div>
     </div>
   );
 }
 
-/**
- * v3.15.0 — Full activity log + hidden set management.
- *
- * Two sources of truth:
- *   - GET /activity — the full unfiltered log (incl. hidden entries)
- *   - GET /activity/hidden — the list of keys the user chose to hide
- *
- * Hiding is non-destructive: hidden items still appear here so the
- * user can review / restore them.
- */
-function ActivityLogCard() {
-  const toast = useToast();
-  const [items, setItems] = useState<Array<{ kind?: string; ts?: string; slug?: string; message?: string }>>([]);
-  const [hidden, setHidden] = useState<Set<string>>(new Set());
-  const [loading, setLoading] = useState(true);
-  const [filter, setFilter] = useState('');
-  const [showHidden, setShowHidden] = useState(true);
-
-  const refresh = useCallback(async () => {
-    setLoading(true);
-    try {
-      const [log, hid] = await Promise.all([
-        api.get<{ items: Array<{ kind?: string; ts?: string; slug?: string; message?: string }> }>('/activity'),
-        api.get<{ hidden: string[] }>('/activity/hidden'),
-      ]);
-      setItems(Array.isArray(log.items) ? log.items : []);
-      setHidden(new Set(hid.hidden || []));
-    } catch (err) {
-      toast.error(`Load failed: ${(err as Error).message}`);
-    } finally {
-      setLoading(false);
-    }
-  }, [toast]);
-
-  useEffect(() => { refresh(); }, [refresh]);
-
-  const keyOf = (it: { kind?: string; ts?: string; slug?: string }, idx: number) => {
-    const k = `${it.kind || ''}|${it.ts || ''}|${it.slug || ''}|${idx}`;
-    let h = 0;
-    for (let i = 0; i < k.length; i++) h = ((h << 5) - h + k.charCodeAt(i)) | 0;
-    return Math.abs(h).toString(16).padStart(8, '0').slice(0, 16);
-  };
-
-  const onRestoreAll = async () => {
-    try {
-      await api.del('/activity/hide');
-      setHidden(new Set());
-      toast.success('All hidden activity restored.');
-    } catch (err) {
-      toast.error(`Restore failed: ${(err as Error).message}`);
-    }
-  };
-
-  const onRestoreOne = async (key: string) => {
-    try {
-      await api.del(`/activity/hide/${encodeURIComponent(key)}`);
-      const next = new Set(hidden);
-      next.delete(key);
-      setHidden(next);
-    } catch (err) {
-      toast.error(`Restore failed: ${(err as Error).message}`);
-    }
-  };
-
-  const filtered = items.filter((it, idx) => {
-    const k = keyOf(it, idx);
-    if (!showHidden && hidden.has(k)) return false;
-    if (!filter) return true;
-    const q = filter.toLowerCase();
-    return [it.kind, it.slug, it.message].some((v) => typeof v === 'string' && v.toLowerCase().includes(q));
-  });
-
-  return (
-    <Card id="settings-diagnostics" data-section="diagnostics">
-      <CardTitle>
-        <Activity size={14} /> Activity log
-        <span className="muted" style={{ fontWeight: 400, marginLeft: 8, fontSize: 12 }}>
-          {items.length} total · {hidden.size} hidden
-        </span>
-        <Button variant="ghost" size="sm" style={{ marginLeft: 'auto' }} onClick={refresh} title="Reload">
-          <RefreshCw size={12} />
-        </Button>
-      </CardTitle>
-      <CardMeta>
-        Full history from <code>~/.bizar/activity.log</code>. Hiding an item in the Overview only hides it there — the entry stays here.
-      </CardMeta>
-
-      <div className="activity-log-toolbar">
-        <div className="activity-log-search">
-          <Search size={12} />
-          <input
-            type="text"
-            className="input"
-            placeholder="Filter by kind, slug, or message…"
-            value={filter}
-            onChange={(e) => setFilter(e.target.value)}
-          />
-        </div>
-        <label className="activity-log-toggle">
-          <input
-            type="checkbox"
-            checked={showHidden}
-            onChange={(e) => setShowHidden(e.target.checked)}
-          />
-          Show hidden
-        </label>
-        <Button
-          variant="ghost"
-          size="sm"
-          disabled={hidden.size === 0}
-          onClick={onRestoreAll}
-          title="Restore all hidden items to the Overview"
-        >
-          <Eye size={12} /> Restore all
-        </Button>
-      </div>
-
-      {loading ? (
-        <div className="muted" style={{ padding: '12px 0', fontSize: 12 }}>Loading…</div>
-      ) : filtered.length === 0 ? (
-        <div className="muted" style={{ padding: '12px 0', fontSize: 12 }}>
-          {items.length === 0 ? 'No activity yet.' : 'No items match the current filter.'}
-        </div>
-      ) : (
-        <div className="activity-log-table-wrap">
-          <table className="activity-log-table">
-            <thead>
-              <tr>
-                <th>Kind</th>
-                <th>Detail</th>
-                <th>Time</th>
-                <th></th>
-              </tr>
-            </thead>
-            <tbody>
-              {filtered.slice(0, 200).map((it, idx) => {
-                const k = keyOf(it, idx);
-                const isHidden = hidden.has(k);
-                return (
-                  <tr key={`${it.ts}-${idx}`} className={cn(isHidden && 'activity-log-row-hidden')}>
-                    <td className="activity-log-kind">{it.kind || 'activity'}</td>
-                    <td className="activity-log-detail">
-                      {it.message || it.slug || '—'}
-                    </td>
-                    <td className="activity-log-time mono">
-                      {it.ts ? new Date(it.ts).toLocaleString() : '—'}
-                    </td>
-                    <td>
-                      {isHidden ? (
-                        <Button variant="ghost" size="sm" onClick={() => onRestoreOne(k)} title="Restore to Overview">
-                          <Eye size={12} />
-                        </Button>
-                      ) : (
-                        <span className="activity-log-state-tag">shown</span>
-                      )}
-                    </td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
-          {filtered.length > 200 && (
-            <div className="muted" style={{ fontSize: 11, padding: '8px 0' }}>
-              Showing first 200 of {filtered.length}.
-            </div>
-          )}
-        </div>
-      )}
-    </Card>
-  );
-}
 export const SettingsView = React.memo(SettingsViewInner);