@sleep2agi/agent-network-dashboard 0.4.6-preview.4 → 0.4.6-preview.405

package/app/components/ServersDrawer.tsx

@@ -0,0 +1,382 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import useSWR from 'swr';
+
+/** Issue #119 — server-side panel listing the hub's hosts + CPU/RAM bars.
+ *
+ * Steps 1+2 (SDK马 host telemetry + CommHub aggregation) shipped with
+ * commhub-server v0.8.1-preview.2. Step 3 (this file, Round 20 of the
+ * dashboard /loop) swaps the original mock seed for a SWR fetch of
+ * `/api/hub/servers` (which proxies to the hub's `/api/servers`).
+ *
+ * Collapsed by default to a thin vertical icon strip so it never competes
+ * with the topology graph for horizontal real-estate. State persists to
+ * localStorage just like the other dashboard drawers.
+ *
+ * Backward-compat: if the upstream hub predates v0.8.1-preview.2 the
+ * proxy returns `{ servers: [], unavailable: true }`. The drawer
+ * surfaces a friendly "not yet available" hint instead of an empty list,
+ * so old hubs don't read as "something broke".
+ */
+
+interface ServerAgent {
+  alias: string;
+  runtime: string | null;
+  status: 'working' | 'idle' | 'offline';
+  last_seen_at?: string | null;
+  progress?: number | null;  // 0..1
+}
+
+interface ServerCard {
+  hostname: string;
+  ip?: string | null;
+  cpu_load_1min: number | null;
+  cpu_cores: number;
+  mem_used_gb: number | null;
+  mem_total_gb: number | null;
+  /** Hero 1 v0.10.0: disk usage. Optional — older hubs don't report. */
+  disk_used_gb?: number | null;
+  disk_total_gb?: number | null;
+  /** Hero 1 v0.10.0: short history for sparklines (5-min sliding window).
+   *  Each is the rolling 1-min average sampled at ~30s cadence (so ~10
+   *  data points for 5-min). Optional — older hubs don't report. */
+  cpu_history?: number[];
+  mem_history?: number[];
+  /** Hero 2 v0.10.0: per-server agent rollup. Optional — older hubs
+   *  send only aggregate agent_count. */
+  agents?: ServerAgent[];
+  agent_count: number;
+  status: 'online' | 'offline';
+  note?: string;
+}
+
+interface ServersResponse {
+  servers: ServerCard[];
+  unavailable?: boolean;
+}
+
+const fetcher = async (url: string): Promise<ServersResponse> => {
+  const res = await fetch(url);
+  if (res.status === 401) {
+    if (typeof window !== 'undefined') window.location.assign('/login');
+    throw new Error('unauthorized');
+  }
+  if (!res.ok) throw new Error(`hub ${res.status}`);
+  return res.json();
+};
+
+// Bar tint by usage — green ≤60%, amber 60–85%, red >85%. Keeps the eye
+// going to whichever box is actually about to tip over.
+function barTint(pct: number) {
+  if (pct >= 85) return { fill: '#ef4444', track: 'rgb(239 68 68 / 0.16)' };
+  if (pct >= 60) return { fill: '#f59e0b', track: 'rgb(245 158 11 / 0.16)' };
+  return { fill: '#10b981', track: 'rgb(16 185 129 / 0.16)' };
+}
+
+function Bar({ pct, label }: { pct: number; label: string }) {
+  const t = barTint(pct);
+  const clamped = Math.max(0, Math.min(100, pct));
+  return (
+    <div className="space-y-0.5">
+      <div className="flex justify-between text-[10px] text-[var(--fg-muted)] font-mono">
+        <span>{label}</span>
+        <span className="tabular-nums">{Math.round(clamped)}%</span>
+      </div>
+      <div className="h-1.5 rounded-full overflow-hidden" style={{ background: t.track }}>
+        <div
+          className="h-full transition-[width] duration-300 ease-out"
+          style={{ width: `${clamped}%`, background: t.fill }}
+        />
+      </div>
+    </div>
+  );
+}
+
+/** Hero 1 v0.10.0 — inline SVG sparkline for 5-min rolling history.
+ *  Zero-dep (no recharts). Renders a stroked polyline + filled area.
+ *  Values are percentages (0..100); clamps inside. */
+function Sparkline({ values, tint, label }: { values: number[]; tint: string; label: string }) {
+  if (!values || values.length < 2) return null;
+  const w = 100, h = 18;
+  const max = 100;
+  const stride = w / Math.max(1, values.length - 1);
+  const pts = values.map((v, i) => {
+    const x = i * stride;
+    const y = h - (Math.max(0, Math.min(max, v)) / max) * h;
+    return `${x.toFixed(1)},${y.toFixed(1)}`;
+  });
+  const polyline = pts.join(' ');
+  const area = `M0,${h} L${pts.join(' L')} L${w},${h} Z`;
+  return (
+    <svg
+      width="100%" height={h} viewBox={`0 0 ${w} ${h}`}
+      preserveAspectRatio="none" aria-label={`${label} 5-min history`}
+      data-server-sparkline={label}
+    >
+      <path d={area} fill={tint} opacity="0.18" />
+      <polyline points={polyline} fill="none" stroke={tint} strokeWidth="1.2" />
+    </svg>
+  );
+}
+
+/** Hero 1 v0.10.0 — single health badge derived from the worst of
+ *  CPU / Mem / Disk percentages. Green ≤60%, amber 60-85%, red >85%
+ *  (same thresholds as Bar). Returns null when no percentages available
+ *  (e.g. offline server) so the card layout reads "n/a · offline" instead. */
+function HealthBadge({ cpu, mem, disk }: { cpu: number | null; mem: number | null; disk: number | null }) {
+  const vals = [cpu, mem, disk].filter((v): v is number => typeof v === 'number');
+  if (vals.length === 0) return null;
+  const worst = Math.max(...vals);
+  const t = barTint(worst);
+  const status = worst >= 85 ? 'red' : worst >= 60 ? 'amber' : 'green';
+  return (
+    <span
+      className="inline-block w-2 h-2 rounded-full shrink-0"
+      style={{ background: t.fill, boxShadow: `0 0 0 2px ${t.track}` }}
+      data-server-health-badge={status}
+      title={`worst: ${Math.round(worst)}%`}
+    />
+  );
+}
+
+/** Hero 2 v0.10.0 — per-server expandable agent list. Renders compact
+ *  rows: alias · runtime · status chip · last_seen relative. progress
+ *  bar appears when an agent reports progress (0..1). When the upstream
+ *  hub doesn't report agents[], the row falls through to a small
+ *  "agent list pending hub upgrade" hint. */
+function AgentList({ agents }: { agents?: ServerAgent[] }) {
+  if (!agents || agents.length === 0) {
+    return (
+      <div className="text-[9px] text-[var(--fg-dim)] font-mono italic px-1 py-1">
+        agent rollup pending hub ≥ 0.8.2-preview
+      </div>
+    );
+  }
+  return (
+    <ul className="space-y-1" data-server-agent-list>
+      {agents.map(a => {
+        const statusColor =
+          a.status === 'working' ? '#10b981' :
+          a.status === 'idle'    ? '#06b6d4' : '#6b7280';
+        return (
+          <li
+            key={a.alias}
+            className="flex items-center gap-1.5 text-[10px] font-mono"
+            data-server-agent={a.alias}
+          >
+            <span className="w-1.5 h-1.5 rounded-full shrink-0" style={{ background: statusColor }} />
+            <span className="font-semibold truncate" style={{ color: 'var(--fg)' }}>{a.alias}</span>
+            {a.runtime && (
+              <span className="text-[9px] text-[var(--fg-dim)] shrink-0">· {a.runtime}</span>
+            )}
+            {typeof a.progress === 'number' && a.progress > 0 && (
+              <span className="ml-auto text-[9px] tabular-nums text-[var(--fg-muted)]">
+                {Math.round(a.progress * 100)}%
+              </span>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export function ServersDrawer() {
+  const [open, setOpen] = useState(false);
+  /** v0.10.0 Hero 1+2 — per-server expanded state for detail card
+   *  (sparklines + disk bar + agent rollup). Stored as a Set of
+   *  hostnames; persists in localStorage so the user's last selection
+   *  survives reload. Independent of the drawer's open/close state. */
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  // Drawer state is per-user-machine — persist like the other dashboard
+  // sticky toggles (`anet-topo-layout`, `anet-topo-view`, etc.).
+  useEffect(() => {
+    try { if (localStorage.getItem('anet-servers-drawer') === '1') setOpen(true); } catch {}
+    try {
+      const raw = localStorage.getItem('anet-servers-drawer-expanded');
+      if (raw) setExpanded(new Set(JSON.parse(raw)));
+    } catch {}
+  }, []);
+  const toggle = () => setOpen(prev => {
+    const next = !prev;
+    try { localStorage.setItem('anet-servers-drawer', next ? '1' : '0'); } catch {}
+    return next;
+  });
+  const toggleExpanded = (hostname: string) => setExpanded(prev => {
+    const next = new Set(prev);
+    if (next.has(hostname)) next.delete(hostname); else next.add(hostname);
+    try { localStorage.setItem('anet-servers-drawer-expanded', JSON.stringify([...next])); } catch {}
+    return next;
+  });
+
+  // Round 20 / #119 step 3 final delivery — real SWR fetch. 5s refresh
+  // matches the other live drawers (HealthBanner, Sidebar) so an operator
+  // sees host telemetry update in roughly the same beat as session state.
+  // Only poll while expanded — collapsed icon strip doesn't need fresh data.
+  const { data, error } = useSWR<ServersResponse>(
+    open ? '/api/hub/servers' : null,
+    fetcher,
+    { refreshInterval: 5000, dedupingInterval: 3000 },
+  );
+  const servers = data?.servers ?? [];
+  const unavailable = data?.unavailable === true;
+  const onlineCount = servers.filter(s => s.status === 'online').length;
+  const loading = open && !data && !error;
+
+  return (
+    <aside
+      className="fixed right-0 top-20 z-40 hidden lg:flex flex-col rounded-l-xl border border-r-0 shadow-xl shadow-black/30 anet-fade-in"
+      style={{
+        background: 'var(--bg-secondary)',
+        borderColor: 'var(--border)',
+        width: open ? 296 : 40,
+        maxHeight: 'calc(100vh - 6rem)',
+        transition: 'width 200ms ease-out',
+      }}
+      aria-label="Servers panel"
+    >
+      <button
+        onClick={toggle}
+        aria-expanded={open}
+        aria-label={open ? 'Collapse servers panel' : 'Expand servers panel'}
+        className="flex items-center gap-2 px-2.5 py-2 border-b text-[11px] font-semibold tracking-wide select-none"
+        style={{ color: 'var(--fg)', borderColor: 'var(--border)' }}
+      >
+        <svg className="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+          <rect x="3" y="4" width="18" height="6" rx="1.5" />
+          <rect x="3" y="14" width="18" height="6" rx="1.5" />
+          <circle cx="7" cy="7" r="0.7" fill="currentColor" />
+          <circle cx="7" cy="17" r="0.7" fill="currentColor" />
+        </svg>
+        {open && (
+          <>
+            <span className="flex-1 text-left">Servers</span>
+            <span className="text-[10px] text-[var(--fg-muted)] font-mono">{onlineCount}/{servers.length}</span>
+          </>
+        )}
+      </button>
+
+      {open && (
+        <div className="flex-1 min-h-0 overflow-y-auto px-2 py-2 space-y-2" data-servers-body>
+          {loading && (
+            <div className="text-[10px] text-[var(--fg-muted)] font-mono text-center py-4">
+              loading servers…
+            </div>
+          )}
+          {error && !data && (
+            <div className="rounded-md border px-2.5 py-2 text-[10px] font-mono"
+              style={{ background: 'rgb(239 68 68 / 0.06)', borderColor: 'rgb(239 68 68 / 0.25)', color: '#ef4444' }}>
+              hub unreachable · retrying every 5s
+            </div>
+          )}
+          {unavailable && (
+            <div className="text-[10px] text-[var(--fg-muted)] font-mono text-center py-3 leading-relaxed">
+              host telemetry not available<br/>
+              <span className="text-[var(--fg-dim)]">upgrade commhub-server ≥ 0.8.1-preview.2</span>
+            </div>
+          )}
+          {!loading && !error && !unavailable && servers.length === 0 && (
+            <div className="text-[10px] text-[var(--fg-muted)] font-mono text-center py-4">
+              no servers reporting yet
+            </div>
+          )}
+          {servers.map(s => {
+            const offline = s.status === 'offline';
+            const cpuPct = s.cpu_load_1min != null && s.cpu_cores > 0 ? (s.cpu_load_1min / s.cpu_cores) * 100 : null;
+            const memPct = s.mem_used_gb != null && s.mem_total_gb != null && s.mem_total_gb > 0 ? (s.mem_used_gb / s.mem_total_gb) * 100 : null;
+            const diskPct = s.disk_used_gb != null && s.disk_total_gb != null && s.disk_total_gb > 0 ? (s.disk_used_gb / s.disk_total_gb) * 100 : null;
+            const isExpanded = expanded.has(s.hostname);
+            return (
+              <div
+                key={s.hostname}
+                className="rounded-lg border px-2.5 py-2 space-y-1.5"
+                style={{
+                  background: 'var(--bg)',
+                  borderColor: 'var(--border)',
+                  opacity: offline ? 0.55 : 1,
+                }}
+                data-server-card={s.hostname}
+                data-server-expanded={isExpanded ? 'true' : 'false'}
+                title={s.ip ? `${s.hostname} · ${s.ip}` : s.hostname}
+              >
+                {/* v0.10.0 Hero 1+2: header row — click toggles expanded
+                    detail view (sparklines + disk + agent rollup). */}
+                <button
+                  type="button"
+                  onClick={() => toggleExpanded(s.hostname)}
+                  aria-expanded={isExpanded}
+                  className="w-full flex items-center justify-between gap-2 text-left"
+                  data-server-card-toggle={s.hostname}
+                >
+                  <div className="min-w-0 flex items-center gap-1.5">
+                    {/* Hero 1 health badge — worst-of CPU/Mem/Disk */}
+                    {!offline && <HealthBadge cpu={cpuPct} mem={memPct} disk={diskPct} />}
+                    <span className="font-mono text-[12px] font-semibold truncate" style={{ color: 'var(--fg)' }}>{s.hostname}</span>
+                    {s.note && <span className="text-[9px] text-[var(--fg-dim)]">({s.note})</span>}
+                  </div>
+                  <span className="flex items-center gap-1 shrink-0">
+                    <span className="text-[10px] text-[var(--fg-muted)] font-mono tabular-nums">
+                      {s.agent_count}&nbsp;agent{s.agent_count === 1 ? '' : 's'}
+                    </span>
+                    {/* Chevron — rotates 90° on expanded */}
+                    <svg
+                      width="10" height="10" viewBox="0 0 10 10"
+                      style={{ transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)', transition: 'transform 150ms ease-out' }}
+                      aria-hidden
+                    >
+                      <path d="M3 1.5L7 5L3 8.5" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
+                  </span>
+                </button>
+                {!offline && cpuPct != null && (
+                  <Bar pct={cpuPct} label={`CPU ${s.cpu_load_1min!.toFixed(2)}/${s.cpu_cores}`} />
+                )}
+                {!offline && memPct != null && (
+                  <Bar pct={memPct} label={`RAM ${s.mem_used_gb!.toFixed(1)}/${s.mem_total_gb!.toFixed(1)}G`} />
+                )}
+                {offline && (
+                  <div className="text-[10px] text-[var(--fg-dim)] font-mono italic">CPU n/a · RAM n/a · offline</div>
+                )}
+                {/* v0.10.0 Hero 1+2: expanded detail — disk bar +
+                    5-min sparklines + agent rollup. Visible only when
+                    the user clicks the card. Renders gracefully when
+                    upstream hub hasn't shipped optional fields. */}
+                {isExpanded && !offline && (
+                  <div className="pt-1 mt-1 border-t space-y-1.5" style={{ borderColor: 'var(--border)' }}>
+                    {diskPct != null ? (
+                      <Bar pct={diskPct} label={`DISK ${s.disk_used_gb!.toFixed(1)}/${s.disk_total_gb!.toFixed(1)}G`} />
+                    ) : (
+                      <div className="text-[9px] text-[var(--fg-dim)] font-mono italic">disk metric pending hub ≥ 0.8.2-preview</div>
+                    )}
+                    {s.cpu_history && s.cpu_history.length >= 2 && (
+                      <div className="space-y-0.5">
+                        <div className="text-[9px] text-[var(--fg-muted)] font-mono">CPU · 5-min</div>
+                        <Sparkline values={s.cpu_history} tint="#10b981" label="CPU" />
+                      </div>
+                    )}
+                    {s.mem_history && s.mem_history.length >= 2 && (
+                      <div className="space-y-0.5">
+                        <div className="text-[9px] text-[var(--fg-muted)] font-mono">RAM · 5-min</div>
+                        <Sparkline values={s.mem_history} tint="#06b6d4" label="MEM" />
+                      </div>
+                    )}
+                    <div className="pt-1">
+                      <div className="text-[9px] text-[var(--fg-muted)] font-mono mb-0.5">agents</div>
+                      <AgentList agents={s.agents} />
+                    </div>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+          {servers.length > 0 && (
+            <div className="pt-1 text-[9px] text-[var(--fg-dim)] font-mono text-center">
+              live · refreshing every 5s
+            </div>
+          )}
+        </div>
+      )}
+    </aside>
+  );
+}

package/app/components/TaskChatPanel.tsx

@@ -29,19 +29,19 @@ function StatusBar({ status }: { status: string }) {
       {STATUS_STEPS.map((s, i) => (
         <div key={s} className="flex items-center gap-1">
           <div className={`w-2 h-2 rounded-full transition-all duration-700 ${
-            isFailed ? (i === 0 ? 'bg-red-400' : 'bg-gray-700')
-            : i <= idx ? (STATUS_COLORS[s] || 'bg-gray-600') : 'bg-gray-700'
+            isFailed ? (i === 0 ? 'bg-red-400' : 'bg-[var(--border)]')
+            : i <= idx ? (STATUS_COLORS[s] || 'bg-gray-600') : 'bg-[var(--border)]'
           }`} />
           {i < STATUS_STEPS.length - 1 && (
             <div className={`w-4 h-px transition-colors duration-700 ${
-              isFailed ? 'bg-red-800' : i < idx ? 'bg-gray-500' : 'bg-gray-800'
+              isFailed ? 'bg-red-800' : i < idx ? 'bg-gray-500' : 'bg-[var(--border)]'
             }`} />
           )}
         </div>
       ))}
       <span className={`text-[10px] ml-1.5 font-medium ${
         isFailed ? 'text-red-400' : status === 'replied' ? 'text-purple-400'
-        : status === 'running' ? 'text-green-400' : 'text-gray-500'
+        : status === 'running' ? 'text-green-400' : 'text-[var(--fg-muted)]'
       }`}>{status}</span>
       {(status === 'running' || status === 'delivered') && (
         <span className="ml-1">
@@ -62,34 +62,34 @@ import remarkGfm from 'remark-gfm';
 import { useSSE } from '../lib/useSSE';
 
 function MarkdownContent({ text }: { text: string }) {
-  if (!text) return <span className="text-gray-600 italic">No content</span>;
+  if (!text) return <span className="text-[var(--fg-dim)] italic">No content</span>;
   return (
     <div className="break-words leading-relaxed">
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         components={{
-          h1: ({ children }) => <h1 className="text-base font-semibold text-white mt-2 mb-1">{children}</h1>,
-          h2: ({ children }) => <h2 className="text-sm font-semibold text-white mt-2 mb-1">{children}</h2>,
+          h1: ({ children }) => <h1 className="text-base font-semibold text-[var(--fg)] mt-2 mb-1">{children}</h1>,
+          h2: ({ children }) => <h2 className="text-sm font-semibold text-[var(--fg)] mt-2 mb-1">{children}</h2>,
           h3: ({ children }) => <h3 className="text-sm font-semibold text-cyan-300 mt-1.5 mb-0.5">{children}</h3>,
           p: ({ children }) => <p className="my-1">{children}</p>,
-          strong: ({ children }) => <strong className="text-white font-semibold">{children}</strong>,
-          em: ({ children }) => <em className="italic text-gray-300">{children}</em>,
+          strong: ({ children }) => <strong className="text-[var(--fg)] font-semibold">{children}</strong>,
+          em: ({ children }) => <em className="italic text-[var(--fg-muted)]">{children}</em>,
           ul: ({ children }) => <ul className="list-disc pl-5 my-1 space-y-0.5">{children}</ul>,
           ol: ({ children }) => <ol className="list-decimal pl-5 my-1 space-y-0.5">{children}</ol>,
           li: ({ children }) => <li>{children}</li>,
           a: ({ href, children }) => <a href={href} target="_blank" rel="noreferrer" className="text-cyan-300 underline">{children}</a>,
-          blockquote: ({ children }) => <blockquote className="border-l-2 border-cyan-500/30 pl-3 my-1 text-gray-400 italic">{children}</blockquote>,
-          hr: () => <hr className="border-t border-[#1a1a2a] my-2" />,
+          blockquote: ({ children }) => <blockquote className="border-l-2 border-cyan-500/30 pl-3 my-1 text-[var(--fg-muted)] italic">{children}</blockquote>,
+          hr: () => <hr className="border-t border-[var(--border)] my-2" />,
           code: ({ className, children }) => {
             const inline = !className?.startsWith('language-');
             if (inline) {
-              return <code className="bg-[#0a0a15] rounded px-1.5 py-0.5 text-cyan-300 text-[11px] border border-[#1a1a2a]">{children}</code>;
+              return <code className="bg-[var(--code-bg)] rounded px-1.5 py-0.5 text-cyan-300 text-[11px] border border-[var(--border)]">{children}</code>;
             }
             const lang = className?.replace(/^language-/, '') || '';
             return (
-              <div className="my-2 rounded-lg overflow-hidden border border-[#1a1a2a]">
-                {lang && <div className="bg-[#0a0a15] px-3 py-1 text-[10px] text-gray-500 border-b border-[#1a1a2a]">{lang}</div>}
-                <pre className="bg-[#050510] px-3 py-2 text-[11px] text-green-300 overflow-x-auto"><code>{children}</code></pre>
+              <div className="my-2 rounded-lg overflow-hidden border border-[var(--border)]">
+                {lang && <div className="bg-[var(--code-bg)] px-3 py-1 text-[10px] text-[var(--fg-muted)] border-b border-[var(--border)]">{lang}</div>}
+                <pre className="bg-[var(--code-bg)] px-3 py-2 text-[11px] text-green-300 overflow-x-auto"><code>{children}</code></pre>
               </div>
             );
           },
@@ -98,11 +98,11 @@ function MarkdownContent({ text }: { text: string }) {
               <table className="w-full text-[12px] border-collapse">{children}</table>
             </div>
           ),
-          thead: ({ children }) => <thead className="bg-[#0a0a15]">{children}</thead>,
+          thead: ({ children }) => <thead className="bg-[var(--code-bg)]">{children}</thead>,
           tbody: ({ children }) => <tbody>{children}</tbody>,
-          tr: ({ children }) => <tr className="border-b border-[#1a1a2a]">{children}</tr>,
-          th: ({ children }) => <th className="text-left text-cyan-300 font-semibold px-2 py-1 border border-[#1a1a2a]">{children}</th>,
-          td: ({ children }) => <td className="px-2 py-1 border border-[#1a1a2a] align-top">{children}</td>,
+          tr: ({ children }) => <tr className="border-b border-[var(--border)]">{children}</tr>,
+          th: ({ children }) => <th className="text-left text-cyan-300 font-semibold px-2 py-1 border border-[var(--border)]">{children}</th>,
+          td: ({ children }) => <td className="px-2 py-1 border border-[var(--border)] align-top">{children}</td>,
         }}
       >
         {text}
@@ -348,8 +348,8 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
           {historyLoaded && messages.length === 0 && (
             <div className="text-center py-12">
               <div className="text-3xl mb-3">💬</div>
-              <div className="text-gray-500 text-sm">Start a conversation</div>
-              <div className="text-gray-600 text-xs mt-1">Send a task to {alias}</div>
+              <div className="text-[var(--fg-muted)] text-sm">Start a conversation</div>
+              <div className="text-[var(--fg-dim)] text-xs mt-1">Send a task to {alias}</div>
             </div>
           )}
 
@@ -368,16 +368,16 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
                 <div className="max-w-[85%] bg-cyan-500/8 border border-cyan-500/15 rounded-2xl rounded-br-md px-4 py-2.5 shadow-sm">
                   <div className="flex items-center gap-2 mb-1">
                     <span className={`text-[10px] font-medium ${fromUser ? 'text-cyan-400' : 'text-purple-300'}`}>{senderLabel}</span>
-                    {!fromUser && <span className="text-[9px] text-gray-600">forwarded to {m.to_name}</span>}
+                    {!fromUser && <span className="text-[9px] text-[var(--fg-dim)]">forwarded to {m.to_name}</span>}
                   </div>
-                  <div className="text-[13px] text-gray-200">
+                  <div className="text-[13px] text-[var(--fg)]">
                     <MarkdownContent text={m.content} />
                   </div>
                   <div className="flex items-center justify-between mt-1.5 gap-3">
                     <StatusBar status={m.status} />
                     <div className="flex items-center gap-2 shrink-0">
                       {senderBadge}
-                      <span className="text-[9px] text-gray-600">{timeAgo(m.created_at)}</span>
+                      <span className="text-[9px] text-[var(--fg-dim)]">{timeAgo(m.created_at)}</span>
                     </div>
                   </div>
                 </div>
@@ -389,9 +389,9 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
                   <div className="max-w-[85%] bg-green-500/8 border border-green-500/15 rounded-2xl rounded-bl-md px-4 py-2.5 shadow-sm">
                     <div className="flex items-center gap-1.5 mb-1.5">
                       {m.to_name && <AliasAvatar alias={m.to_name} size={14} />}
-                      <span className="text-[10px] text-gray-200 font-medium">{m.to_name}</span>
+                      <span className="text-[10px] text-[var(--fg)] font-medium">{m.to_name}</span>
                     </div>
-                    <div className="text-[13px] text-gray-200">
+                    <div className="text-[13px] text-[var(--fg)]">
                       <MarkdownContent text={m.result} />
                     </div>
                   </div>
@@ -401,7 +401,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
               {/* Typing indicator when running */}
               {m.status === 'running' && !m.result && (
                 <div className="flex justify-start">
-                  <div className="bg-[#111128] border border-[#2a2a4a] rounded-2xl rounded-bl-md px-4 py-3">
+                  <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-2xl rounded-bl-md px-4 py-3">
                     <div className="flex gap-1">
                       <span className="w-2 h-2 rounded-full bg-gray-500 animate-bounce" style={{ animationDelay: '0s' }} />
                       <span className="w-2 h-2 rounded-full bg-gray-500 animate-bounce" style={{ animationDelay: '0.15s' }} />
@@ -417,17 +417,17 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
         </div>
 
         {/* Input area */}
-        <div className="border-t border-[#2a2a4a] bg-[#0d0d1a] px-4 py-3">
+        <div className="border-t border-[var(--border)] bg-[var(--bg-secondary)] px-4 py-3">
           <div className="flex items-end gap-2">
             <div className="flex-1 relative">
               {/* @ mention dropdown */}
               {showMentions && filteredMentions.length > 0 && (
-                <div className="absolute bottom-full left-0 right-0 mb-1 bg-[#111128] border border-[#2a2a4a] rounded-lg shadow-xl shadow-black/50 overflow-hidden z-10 max-h-48 overflow-y-auto">
+                <div className="absolute bottom-full left-0 right-0 mb-1 bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg shadow-xl shadow-black/50 overflow-hidden z-10 max-h-48 overflow-y-auto">
                   {filteredMentions.map(node => (
                     <button key={node} onClick={() => insertMention(node)}
                       className="w-full flex items-center gap-2 px-3 py-2 text-xs text-left hover:bg-cyan-500/10 transition-colors">
                       <AliasAvatar alias={node} size={16} />
-                      <span className="text-gray-300">{node}</span>
+                      <span className="text-[var(--fg-muted)]">{node}</span>
                     </button>
                   ))}
                 </div>
@@ -439,11 +439,11 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
                 onKeyDown={handleKeyDown}
                 placeholder={`Message ${alias}...`}
                 rows={1}
-                className="w-full bg-[#111128] border border-[#2a2a4a] rounded-xl px-4 py-2.5 pr-16 text-sm text-white placeholder-gray-600 focus:border-cyan-500/40 focus:outline-none resize-none transition-colors"
+                className="w-full bg-[var(--bg-secondary)] border border-[var(--border)] rounded-xl px-4 py-2.5 pr-16 text-sm text-[var(--fg)] placeholder-[var(--fg-dim)] focus:border-cyan-500/40 focus:outline-none resize-none transition-colors"
               />
               <div className="absolute right-2 bottom-1.5 flex items-center gap-1">
                 <select value={priority} onChange={e => setPriority(e.target.value)}
-                  className="bg-transparent text-[9px] text-gray-600 focus:outline-none cursor-pointer">
+                  className="bg-transparent text-[9px] text-[var(--fg-dim)] focus:outline-none cursor-pointer">
                   <option value="normal">N</option>
                   <option value="high">H</option>
                   <option value="low">L</option>
@@ -451,7 +451,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
               </div>
             </div>
             <button onClick={send} disabled={sending || !input.trim()}
-              className="p-2.5 bg-cyan-600 hover:bg-cyan-500 disabled:bg-gray-800 disabled:text-gray-600 text-white rounded-xl transition-all shrink-0 active:scale-95">
+              className="p-2.5 bg-cyan-600 hover:bg-cyan-500 disabled:bg-[var(--border)] disabled:text-[var(--fg-dim)] text-[var(--fg)] rounded-xl transition-all shrink-0 active:scale-95">
               {sending ? (
                 <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
               ) : (
@@ -461,7 +461,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
               )}
             </button>
           </div>
-          <div className="flex justify-between text-[9px] text-gray-700 mt-1.5">
+          <div className="flex justify-between text-[9px] text-[var(--fg-dim)] mt-1.5">
             <span>{input.includes('@') ? `Sending to: ${targetAlias}` : `Type @ to mention another node`}</span>
             <span>Enter to send · Shift+Enter for newline</span>
           </div>
@@ -476,17 +476,17 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
   return (
     <>
       <div className="fixed inset-0 bg-black/30 z-40 lg:hidden anet-fade-in" onClick={onClose} />
-      <div className="fixed top-0 right-0 h-full w-full lg:w-[500px] bg-[#0a0a1a] border-l border-[#2a2a4a] z-50 flex flex-col shadow-2xl shadow-black/60 animate-slide-in">
+      <div className="fixed top-0 right-0 h-full w-full lg:w-[500px] bg-[var(--bg)] border-l border-[var(--border)] z-50 flex flex-col shadow-2xl shadow-black/60 animate-slide-in">
         {/* Header */}
-        <div className="flex items-center justify-between px-4 py-3 border-b border-[#2a2a4a] bg-[#0d0d1a]">
+        <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--border)] bg-[var(--bg-secondary)]">
           <div className="flex items-center gap-3">
             <AliasAvatar alias={alias} size={32} />
             <div>
-              <div className="text-sm font-semibold text-white">{alias}</div>
-              <div className="text-[10px] text-gray-500">{pollingIds.size > 0 ? 'Processing...' : 'Ready'}</div>
+              <div className="text-sm font-semibold text-[var(--fg)]">{alias}</div>
+              <div className="text-[10px] text-[var(--fg-muted)]">{pollingIds.size > 0 ? 'Processing...' : 'Ready'}</div>
             </div>
           </div>
-          <button onClick={onClose} className="text-gray-500 hover:text-white p-1.5 rounded-lg hover:bg-[#1a1a2a]">
+          <button onClick={onClose} className="text-[var(--fg-muted)] hover:text-[var(--fg)] p-1.5 rounded-lg hover:bg-[var(--bg-elevated)]">
             <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>