@polderlabs/bizar 9.0.0 → 10.0.7

package/bizar-dash/src/web/v8/views/History/HistoryView.tsx

@@ -0,0 +1,227 @@
+/**
+ * v8/views/History/HistoryView.tsx — Sprint S40, v9.3.0.
+ *
+ * Cross-project timeline surface. Pulls from /api/history and shows
+ * a list of recent events grouped per project. Filter chips along
+ * the top let the user narrow by kind. Live updates on the
+ * `history:new` WS event the server broadcasts.
+ */
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { History, RefreshCcw } from 'lucide-react';
+import { Stack } from '../../ui/primitives/Stack.js';
+import { Inline } from '../../ui/primitives/Inline.js';
+import { ViewHeader } from '../../ui/data/ViewHeader.js';
+import { Card, CardBody } from '../../ui/data/Card.js';
+import { Button } from '../../ui/controls/Button.js';
+import { Skeleton } from '../../ui/feedback/Skeleton.js';
+import { EmptyState } from '../../ui/feedback/EmptyState.js';
+import { ErrorState } from '../../ui/feedback/ErrorState.js';
+import { Badge } from '../../ui/data/Badge.js';
+import { useFetch } from '../../data/useFetch.js';
+import { useWsMessage } from '../../data/useWebSocket.js';
+
+interface HistoryProject {
+  id: string;
+  name?: string;
+  path?: string;
+  active?: boolean;
+  tasks?: { total: number; done: number; doing: number; blocked: number; queued: number };
+  plans?: number;
+}
+
+interface HistoryEventRow {
+  id?: string;
+  ts?: string;
+  kind?: string;
+  project?: string;
+  agent?: string;
+  title?: string;
+  description?: string;
+}
+
+interface HistoryPayload {
+  events: HistoryEventRow[];
+  projects: HistoryProject[];
+  stats?: Record<string, unknown>;
+  generatedAt?: string;
+}
+
+function fmtRel(ts: string | undefined): string {
+  if (!ts) return '';
+  const t = new Date(ts).getTime();
+  if (!Number.isFinite(t)) return '';
+  const delta = Math.max(0, Date.now() - t);
+  if (delta < 60_000) return 'just now';
+  if (delta < 3_600_000) return `${Math.round(delta / 60_000)}m ago`;
+  if (delta < 86_400_000) return `${Math.round(delta / 3_600_000)}h ago`;
+  return new Date(t).toLocaleString();
+}
+
+export function HistoryView(): JSX.Element {
+  const payload = useFetch<HistoryPayload>('/api/history');
+  const [kindFilter, setKindFilter] = useState<string | null>(null);
+  const [projectFilter, setProjectFilter] = useState<string | null>(null);
+
+  const refresh = useCallback(() => { void payload.refetch(); }, [payload]);
+  useWsMessage('history:new', refresh);
+
+  const events = useMemo(() => payload.data?.events ?? [], [payload.data]);
+  const projects = useMemo(() => payload.data?.projects ?? [], [payload.data]);
+  const kinds = useMemo(() => {
+    const set = new Set<string>();
+    for (const e of events) if (e.kind) set.add(e.kind);
+    return Array.from(set).sort();
+  }, [events]);
+
+  useEffect(() => {
+    if (kindFilter !== null && !kinds.includes(kindFilter)) setKindFilter(null);
+  }, [kinds, kindFilter]);
+
+  const filtered = useMemo(() => {
+    return events.filter((e) => {
+      if (kindFilter !== null && e.kind !== kindFilter) return false;
+      if (projectFilter !== null && e.project !== projectFilter) return false;
+      return true;
+    });
+  }, [events, kindFilter, projectFilter]);
+
+  return (
+    <Stack gap={4} data-testid="history-view">
+      <ViewHeader
+        title="History"
+        description="Cross-project activity timeline. Filter by kind or project. Live updates on new events."
+        actions={
+          <Button variant="ghost" onClick={() => void refresh()} data-testid="history-refresh">
+            <RefreshCcw size={14} aria-hidden /> Refresh
+          </Button>
+        }
+      />
+
+      <Inline gap={2} wrap>
+        <FilterChip
+          label="All kinds"
+          active={kindFilter === null}
+          onClick={() => setKindFilter(null)}
+          testid="history-filter-kind-all"
+        />
+        {kinds.map((k) => (
+          <FilterChip
+            key={k}
+            label={k}
+            active={kindFilter === k}
+            onClick={() => setKindFilter((cur) => (cur === k ? null : k))}
+            testid={`history-filter-kind-${k}`}
+          />
+        ))}
+        {projects.length > 0 && (
+          <>
+            <span style={{ width: 1, alignSelf: 'stretch', background: 'var(--border)' }} aria-hidden />
+            <FilterChip
+              label="All projects"
+              active={projectFilter === null}
+              onClick={() => setProjectFilter(null)}
+              testid="history-filter-project-all"
+            />
+            {projects.map((p) => (
+              <FilterChip
+                key={p.id}
+                label={p.name || p.id}
+                active={projectFilter === p.id}
+                onClick={() => setProjectFilter((cur) => (cur === p.id ? null : p.id))}
+                testid={`history-filter-project-${p.id}`}
+              />
+            ))}
+          </>
+        )}
+      </Inline>
+
+      <Card variant="default">
+        <CardBody>
+          {payload.loading && events.length === 0 ? (
+            <Stack gap={2}>
+              <Skeleton style={{ height: 36 }} />
+              <Skeleton style={{ height: 36 }} />
+              <Skeleton style={{ height: 36 }} />
+            </Stack>
+          ) : payload.error && events.length === 0 ? (
+            <ErrorState
+              block
+              title="Couldn't load history"
+              description="The timeline endpoint failed. Retry to refetch."
+              error={payload.error}
+              onRetry={refresh}
+              testid="history-error"
+            />
+          ) : filtered.length === 0 ? (
+            <EmptyState
+              icon={<History size={28} aria-hidden />}
+              title="No events"
+              description={kindFilter || projectFilter ? 'No events match the current filter.' : 'No activity yet.'}
+            />
+          ) : (
+            <Stack gap={1}>
+              {filtered.map((e, idx) => (
+                <div
+                  key={e.id ?? `${e.ts}-${idx}`}
+                  data-testid={`history-row-${idx}`}
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: '120px 1fr',
+                    gap: 'var(--space-3)',
+                    padding: 'var(--space-2)',
+                    borderBottom: '1px solid var(--border)',
+                  }}
+                >
+                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+                    {fmtRel(e.ts)}
+                  </span>
+                  <Inline align="center" gap={2} wrap>
+                    {e.kind && <Badge tone="info" size="sm">{e.kind}</Badge>}
+                    <span>{e.title || e.description || e.id || 'event'}</span>
+                    {e.project && (
+                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+                        · {e.project}
+                      </span>
+                    )}
+                  </Inline>
+                </div>
+              ))}
+            </Stack>
+          )}
+        </CardBody>
+      </Card>
+    </Stack>
+  );
+}
+
+function FilterChip({
+  label,
+  active,
+  onClick,
+  testid,
+}: {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+  testid: string;
+}): JSX.Element {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      data-testid={testid}
+      style={{
+        padding: 'var(--space-1) var(--space-3)',
+        borderRadius: 'var(--radius-pill)',
+        border: '1px solid var(--border)',
+        background: active ? 'color-mix(in oklch, var(--accent) 18%, transparent)' : 'var(--surface-0)',
+        color: active ? 'var(--accent)' : 'var(--fg-muted)',
+        fontSize: 'var(--fs-12)',
+        cursor: 'pointer',
+      }}
+    >
+      {label}
+    </button>
+  );
+}

package/bizar-dash/src/web/v8/views/Libraries/LibrariesView.tsx

@@ -4,6 +4,7 @@ import { ViewHeader } from '../../ui/data/ViewHeader.js';
 import { LibraryGrid, LibraryItem, type LibraryItemProps, type LibraryStatus } from '../../ui/index.js';
 import { Skeleton } from '../../ui/feedback/Skeleton.js';
 import { EmptyState } from '../../ui/feedback/EmptyState.js';
+import { ErrorState } from '../../ui/feedback/ErrorState.js';
 import { useFetch } from '../../data/useFetch.js';
 import { useWsMessage } from '../../data/useWebSocket.js';
 import type { LibraryItem as LibItem } from '../../data/types.js';
@@ -39,11 +40,11 @@ const ENDPOINT: Record<LibraryKind, string> = {
 const CHANGE_EVENTS: Record<LibraryKind, readonly string[]> = {
   skills: ['skills:change', 'agents:change'] as const,
   mcps: ['mcps:change', 'agents:change'] as const,
-  hooks: ['agents:change', 'agents:change'] as const,
+  hooks: ['hooks:change', 'agents:change'] as const,
 };
 // Stable hook count: always register listeners for all possible events,
 // filter inside the handler so kind navigation never changes hook order.
-const ALL_EVENTS = ['skills:change', 'mcps:change', 'agents:change'] as const;
+const ALL_EVENTS = ['skills:change', 'mcps:change', 'hooks:change', 'agents:change'] as const;
 
 function mapItem(it: LibItem): LibraryItemProps {
   const status: LibraryStatus =
@@ -86,10 +87,19 @@ export function LibrariesView(props: LibrariesViewProps): JSX.Element {
   const items: LibraryItemProps[] = (res.data?.skills || res.data?.items || []).map(mapItem);
 
   return (
-    <Stack gap={5}>
+    <Stack gap={5} data-testid={`${kind}-view`}>
       <ViewHeader title={KIND_LABEL[kind]} description={KIND_DESCRIPTION[kind]} />
       {res.loading ? (
         <Skeleton style={{ height: 240 }} />
+      ) : res.error && items.length === 0 ? (
+        <ErrorState
+          block
+          title={`Couldn't load ${KIND_LABEL[kind].toLowerCase()}`}
+          description="The library endpoint failed. Retry to refetch."
+          error={res.error}
+          onRetry={() => void res.refetch()}
+          testid={`libraries-${kind}-error`}
+        />
       ) : items.length === 0 ? (
         <EmptyState
           icon={<span>📚</span>}

package/bizar-dash/src/web/v8/views/LightRAG/LightRAGView.tsx

@@ -0,0 +1,183 @@
+/**
+ * v8/views/LightRAG/LightRAGView.tsx — Sprint S43, v9.3.0.
+ *
+ * Defaults override form (GET/PUT /api/lightrag/defaults), runtime
+ * status (GET /api/lightrag/status: running, pid, host:port, log
+ * tail), and an Autostart trigger (POST /api/lightrag/autostart).
+ */
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Database, RefreshCcw, Save, PlayCircle, Circle } from 'lucide-react';
+import { Stack } from '../../ui/primitives/Stack.js';
+import { Inline } from '../../ui/primitives/Inline.js';
+import { ViewHeader } from '../../ui/data/ViewHeader.js';
+import { Card, CardBody } from '../../ui/data/Card.js';
+import { Button } from '../../ui/controls/Button.js';
+import { Input } from '../../ui/controls/Input.js';
+import { Skeleton } from '../../ui/feedback/Skeleton.js';
+import { useFetch } from '../../data/useFetch.js';
+import { fetchJson, FetchError } from '../../data/fetcher.js';
+
+interface Defaults {
+  llm: string;
+  embedding: string;
+  source?: string;
+  llmSource?: string;
+  embeddingSource?: string;
+  builtin?: { llm: string; embedding: string };
+  envVars?: { BIZAR_LIGHTRAG_LLM: string | null; BIZAR_LIGHTRAG_EMBEDDING: string | null };
+}
+
+interface Status {
+  running: boolean;
+  pid: number | null;
+  host?: string;
+  port?: number;
+  llmBinding?: string;
+  embeddingBinding?: string;
+  llmModel?: string;
+  embeddingModel?: string;
+  logSize?: number;
+  logTail?: string[];
+}
+
+export function LightRAGView(): JSX.Element {
+  const defaultsPayload = useFetch<Defaults>('/api/lightrag/defaults');
+  const statusPayload = useFetch<Status>('/api/lightrag/status');
+  const [llm, setLlm] = useState<string>('');
+  const [embedding, setEmbedding] = useState<string>('');
+  const [busy, setBusy] = useState<boolean>(false);
+  const [saved, setSaved] = useState<boolean>(false);
+  const [autostarting, setAutostarting] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (defaultsPayload.data) {
+      setLlm(defaultsPayload.data.llm ?? '');
+      setEmbedding(defaultsPayload.data.embedding ?? '');
+    }
+  }, [defaultsPayload.data]);
+
+  const refresh = useCallback(() => { void defaultsPayload.refetch(); void statusPayload.refetch(); }, [defaultsPayload, statusPayload]);
+
+  const save = async (): Promise<void> => {
+    setBusy(true);
+    setError(null);
+    setSaved(false);
+    try {
+      await fetchJson('/api/lightrag/defaults', { method: 'PUT', body: { llm, embedding } });
+      setSaved(true);
+      refresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const autostart = async (): Promise<void> => {
+    setAutostarting(true);
+    setError(null);
+    try {
+      await fetchJson('/api/lightrag/autostart', { method: 'POST' });
+      refresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    } finally {
+      setAutostarting(false);
+    }
+  };
+
+  const status = statusPayload.data;
+
+  return (
+    <Stack gap={4} data-testid="lightrag-view">
+      <ViewHeader
+        title="LightRAG"
+        description="LightRAG defaults + runtime status + autostart."
+        actions={
+          <Inline align="center" gap={2}>
+            {error !== null && (
+              <span role="alert" data-testid="lightrag-error" style={{ color: 'var(--danger)', fontSize: 'var(--fs-12)' }}>{error}</span>
+            )}
+            <Button variant="ghost" onClick={() => void refresh()} data-testid="lightrag-refresh">
+              <RefreshCcw size={14} aria-hidden /> Refresh
+            </Button>
+            <Button variant="primary" onClick={() => void save()} disabled={busy} data-testid="lightrag-save">
+              <Save size={14} aria-hidden /> {busy ? 'Saving…' : 'Save'}
+            </Button>
+          </Inline>
+        }
+      />
+
+      <Card variant="default">
+        <CardBody>
+          <strong style={{ fontSize: 'var(--fs-13)' }}>Defaults</strong>
+          {defaultsPayload.loading && defaultsPayload.data === null ? (
+            <Skeleton style={{ height: 100, marginTop: 'var(--space-2)' }} />
+          ) : (
+            <Stack gap={2} style={{ marginTop: 'var(--space-2)' }}>
+              <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+                <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>LLM binding</span>
+                <Input value={llm} onChange={(e) => setLlm((e.target as HTMLInputElement).value)} data-testid="lightrag-llm" />
+              </label>
+              <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+                <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Embedding binding</span>
+                <Input value={embedding} onChange={(e) => setEmbedding((e.target as HTMLInputElement).value)} data-testid="lightrag-embedding" />
+              </label>
+              {defaultsPayload.data?.builtin && (
+                <Inline gap={2} style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-subtle)' }}>
+                  <span>built-in:</span>
+                  <code>{defaultsPayload.data.builtin.llm}</code> /
+                  <code>{defaultsPayload.data.builtin.embedding}</code>
+                </Inline>
+              )}
+              {saved && <span data-testid="lightrag-saved" style={{ color: 'var(--success)', fontSize: 'var(--fs-12)' }}>Saved</span>}
+            </Stack>
+          )}
+        </CardBody>
+      </Card>
+
+      <Card variant="default">
+        <CardBody>
+          <Inline align="center" justify="between" gap={2}>
+            <strong style={{ fontSize: 'var(--fs-13)' }}>Status</strong>
+            <Inline align="center" gap={2}>
+              {status === null || status === undefined ? (
+                <Skeleton style={{ width: 80, height: 14 }} />
+              ) : status.running ? (
+                <Inline align="center" gap={1} data-testid="lightrag-running">
+                  <Circle size={10} aria-hidden style={{ color: 'var(--success)', fill: 'var(--success)' }} />
+                  <span style={{ fontSize: 'var(--fs-12)', color: 'var(--success)' }}>running · pid {status.pid}</span>
+                </Inline>
+              ) : (
+                <Inline align="center" gap={1} data-testid="lightrag-stopped">
+                  <Circle size={10} aria-hidden style={{ color: 'var(--fg-muted)', fill: 'var(--fg-muted)' }} />
+                  <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>stopped</span>
+                </Inline>
+              )}
+              <Button variant="ghost" onClick={() => void autostart()} disabled={autostarting} data-testid="lightrag-autostart">
+                <PlayCircle size={14} aria-hidden /> {autostarting ? 'Starting…' : 'Autostart'}
+              </Button>
+            </Inline>
+          </Inline>
+          {status && (
+            <Stack gap={1} style={{ marginTop: 'var(--space-2)', fontSize: 'var(--fs-12)' }}>
+              <Inline gap={2}>
+                <Database size={12} aria-hidden style={{ color: 'var(--fg-muted)' }} />
+                <code>{status.host}:{status.port}</code>
+                {status.llmBinding && <span style={{ color: 'var(--fg-muted)' }}>· llm: <code>{status.llmBinding}</code></span>}
+                {status.embeddingBinding && <span style={{ color: 'var(--fg-muted)' }}>· embedding: <code>{status.embeddingBinding}</code></span>}
+              </Inline>
+              {status.logTail && status.logTail.length > 0 && (
+                <div data-testid="lightrag-log" style={{ background: 'var(--surface-1)', borderRadius: 'var(--radius-sm)', padding: 'var(--space-2)', fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-11)', maxHeight: 160, overflow: 'auto' }}>
+                  {status.logTail.filter(Boolean).slice(-10).map((l, i) => (<div key={i}>{l}</div>))}
+                </div>
+              )}
+            </Stack>
+          )}
+        </CardBody>
+      </Card>
+    </Stack>
+  );
+}

package/bizar-dash/src/web/v8/views/Memory/MemoryView.tsx

@@ -1,5 +1,5 @@
-import { useMemo, useState } from 'react';
-import { Plus } from 'lucide-react';
+import { useMemo, useState, useCallback } from 'react';
+import { Plus, Download } from 'lucide-react';
 import { Stack } from '../../ui/primitives/Stack.js';
 import { Inline } from '../../ui/primitives/Inline.js';
 import { ViewHeader } from '../../ui/data/ViewHeader.js';
@@ -12,7 +12,9 @@ import { Button } from '../../ui/controls/Button.js';
 import { Sheet, SheetContent } from '../../ui/feedback/Sheet.js';
 import { Textarea } from '../../ui/controls/Textarea.js';
 import { useFetch } from '../../data/useFetch.js';
+import { useWsMessage } from '../../data/useWebSocket.js';
 import { fetchJson, FetchError } from '../../data/fetcher.js';
+import type { WsMessage } from '../../data/types.js';
 
 /**
  * MemoryView — Sprint S10 + S15b. Pulls `/api/memory`, lets the user
@@ -69,6 +71,26 @@ export function MemoryView(): JSX.Element {
 
   const refresh = (): void => { void mem.refetch(); };
 
+  const onMemoryChange = useCallback((msg: WsMessage) => {
+    const m = msg as { type?: string };
+    if (m.type === 'memory:change' || m.type === 'memory:new' || m.type === 'memory:removed') {
+      refresh();
+    }
+  }, [mem]);
+  useWsMessage(['memory:change', 'memory:new', 'memory:removed'], onMemoryChange);
+
+  const exportNotes = (): void => {
+    const blob = new Blob([JSON.stringify(entries, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `bizar-memory-${new Date().toISOString().slice(0, 10)}.json`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  };
+
   const saveDraft = async (): Promise<void> => {
     if (!draft || !draft.content.trim()) return;
     setBusy(true);
@@ -110,10 +132,15 @@ export function MemoryView(): JSX.Element {
   };
 
   return (
-    <Stack gap={5}>
+    <Stack gap={5} data-testid="memory-view">
       <ViewHeader
         title="Memory"
         description="Cross-session notes. Project memos live in the repo; global memos live on the user."
+        actions={
+          <Button variant="secondary" onClick={exportNotes} disabled={entries.length === 0}>
+            <Download size={12} aria-hidden /> Export JSON
+          </Button>
+        }
       />
       <Inline align="center" justify="between" gap={2} wrap>
         <Inline gap={2}>

package/bizar-dash/src/web/v8/views/Misc/MiscView.tsx

@@ -0,0 +1,159 @@
+/**
+ * v8/views/Misc/MiscView.tsx — Sprint S43, v9.3.0.
+ *
+ * The "doesn't fit anywhere else" surface: global fuzzy search
+ * (GET /api/search) + Tailscale card (GET /api/tailscale/status,
+ * POST /api/tailscale/{enable,disable}).
+ */
+
+import { useCallback, useMemo, useState } from 'react';
+import { Search, Network, Power, PowerOff, RefreshCcw, FileText, CheckSquare, Bot, Folder } from 'lucide-react';
+import { Stack } from '../../ui/primitives/Stack.js';
+import { Inline } from '../../ui/primitives/Inline.js';
+import { ViewHeader } from '../../ui/data/ViewHeader.js';
+import { Card, CardBody } from '../../ui/data/Card.js';
+import { Button } from '../../ui/controls/Button.js';
+import { Input } from '../../ui/controls/Input.js';
+import { Skeleton } from '../../ui/feedback/Skeleton.js';
+import { EmptyState } from '../../ui/feedback/EmptyState.js';
+import { useFetch } from '../../data/useFetch.js';
+import { fetchJson, FetchError } from '../../data/fetcher.js';
+
+interface SearchResult {
+  kind?: string;
+  id?: string;
+  title?: string;
+  projectId?: string;
+  score?: number;
+  snippet?: string;
+}
+
+interface SearchResponse {
+  query?: string;
+  results?: SearchResult[];
+  total?: number;
+}
+
+interface TailscaleStatus {
+  enabled?: boolean;
+  running?: boolean;
+  hostname?: string;
+  url?: string;
+  error?: string;
+}
+
+export function MiscView(): JSX.Element {
+  return (
+    <Stack gap={4} data-testid="misc-view">
+      <ViewHeader title="Misc" description="Global search + Tailscale." />
+      <SearchPanel />
+      <TailscalePanel />
+    </Stack>
+  );
+}
+
+function SearchPanel(): JSX.Element {
+  const [q, setQ] = useState<string>('');
+  const payload = useFetch<SearchResponse>(`/api/search?q=${encodeURIComponent(q)}`);
+
+  return (
+    <Card variant="default">
+      <CardBody>
+        <strong style={{ fontSize: 'var(--fs-13)' }}>Search</strong>
+        <Inline gap={2} align="center" style={{ marginTop: 'var(--space-2)' }}>
+          <Search size={14} aria-hidden style={{ color: 'var(--fg-muted)' }} />
+          <Input value={q} onChange={(e) => setQ((e.target as HTMLInputElement).value)} placeholder="Search projects / tasks / artifacts / agents…" data-testid="misc-search-input" />
+        </Inline>
+        {q.trim() === '' ? (
+          <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-subtle)' }}>Type a query to search.</span>
+        ) : payload.loading && !payload.data ? (
+          <Stack gap={1} style={{ marginTop: 'var(--space-2)' }}>
+            <Skeleton style={{ height: 24 }} />
+            <Skeleton style={{ height: 24 }} />
+          </Stack>
+        ) : (payload.data?.results?.length ?? 0) === 0 ? (
+          <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-subtle)' }}>No results.</span>
+        ) : (
+          <Stack gap={1} style={{ marginTop: 'var(--space-2)' }}>
+            {(payload.data?.results ?? []).slice(0, 30).map((r, i) => (
+              <div key={i} data-testid={`misc-search-result-${i}`} style={{ padding: 'var(--space-2)', border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)' }}>
+                <Inline align="center" gap={2}>
+                  <KindIcon kind={r.kind} />
+                  <strong style={{ fontSize: 'var(--fs-13)' }}>{r.title || r.id}</strong>
+                  <code style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-subtle)' }}>{r.kind}</code>
+                  {r.projectId && <span style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-muted)' }}>· {r.projectId}</span>}
+                </Inline>
+                {r.snippet && <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>{r.snippet}</span>}
+              </div>
+            ))}
+          </Stack>
+        )}
+      </CardBody>
+    </Card>
+  );
+}
+
+function KindIcon({ kind }: { kind?: string }): JSX.Element {
+  const Icon = (kind === 'task' ? CheckSquare : kind === 'agent' ? Bot : kind === 'project' ? Folder : FileText) as typeof Folder;
+  return <Icon size={12} aria-hidden style={{ color: 'var(--fg-muted)' }} />;
+}
+
+function TailscalePanel(): JSX.Element {
+  const payload = useFetch<TailscaleStatus>('/api/tailscale/status');
+  const [busy, setBusy] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const refresh = useCallback(() => { void payload.refetch(); }, [payload]);
+
+  const toggle = async (enable: boolean): Promise<void> => {
+    setBusy(true);
+    setError(null);
+    try {
+      await fetchJson(enable ? '/api/tailscale/enable' : '/api/tailscale/disable', { method: 'POST' });
+      refresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Card variant="default">
+      <CardBody>
+        <Inline align="center" justify="between" gap={2}>
+          <Inline align="center" gap={2}>
+            <Network size={16} aria-hidden style={{ color: 'var(--accent)' }} />
+            <strong style={{ fontSize: 'var(--fs-13)' }}>Tailscale</strong>
+            {payload.data && (
+              <span data-testid="misc-tailscale-state" style={{ fontSize: 'var(--fs-12)', color: payload.data.running ? 'var(--success)' : 'var(--fg-muted)' }}>
+                {payload.data.running ? `running · ${payload.data.hostname ?? '?'}` : 'stopped'}
+              </span>
+            )}
+          </Inline>
+          <Inline gap={1}>
+            {error !== null && (
+              <span role="alert" data-testid="misc-tailscale-error" style={{ color: 'var(--danger)', fontSize: 'var(--fs-12)' }}>{error}</span>
+            )}
+            <Button variant="ghost" onClick={() => void refresh()} data-testid="misc-tailscale-refresh">
+              <RefreshCcw size={14} aria-hidden /> Refresh
+            </Button>
+            <Button variant="ghost" onClick={() => void toggle(true)} disabled={busy} data-testid="misc-tailscale-enable">
+              <Power size={14} aria-hidden /> Enable
+            </Button>
+            <Button variant="ghost" onClick={() => void toggle(false)} disabled={busy} data-testid="misc-tailscale-disable">
+              <PowerOff size={14} aria-hidden /> Disable
+            </Button>
+          </Inline>
+        </Inline>
+        {payload.data?.url && (
+          <div style={{ marginTop: 'var(--space-2)' }}>
+            <a href={payload.data.url} target="_blank" rel="noreferrer" style={{ fontSize: 'var(--fs-12)', color: 'var(--accent)' }}>{payload.data.url}</a>
+          </div>
+        )}
+        {payload.data?.error && (
+          <span role="alert" style={{ fontSize: 'var(--fs-12)', color: 'var(--danger)' }}>{payload.data.error}</span>
+        )}
+      </CardBody>
+    </Card>
+  );
+}