feat(realism-ui): synthetic files browser

New /synthetic-files page sits next to Persona Generation and Canary
Tokens under the Automation nav group. Operators get a paginated
inventory of files realism has grown across the fleet (decky, path,
persona, content_class, last_modified, edit_count, hash) with filters
on decky / persona / content_class.

Decky filter is a dropdown sourced from /deckies — never free text.
Row click opens a drawer with the body preview; the drawer surfaces a
TRUNCATED chip when the stored body is at the 64KB cap.

decnet_web/src/App.tsx

@@ -25,6 +25,7 @@ const Campaigns     = lazy(() => import('./components/Campaigns'));
 const CampaignDetail = lazy(() => import('./components/CampaignDetail'));
 const Orchestrator   = lazy(() => import('./components/Orchestrator'));
 const PersonaGeneration = lazy(() => import('./components/PersonaGeneration'));
+const SyntheticFiles = lazy(() => import('./components/SyntheticFiles/SyntheticFiles'));
 const CanaryTokens   = lazy(() => import('./components/CanaryTokens'));
 const TopologyPersonaGeneration = lazy(() =>
   import('./components/PersonaGeneration').then((m) => ({ default: m.TopologyPersonaGeneration })),
@@ -129,6 +130,7 @@ const AuthedShell: React.FC<AuthedShellProps> = ({ onLogout, onSearch, searchQue
             <Route path="/campaigns/:id" element={<CampaignDetail />} />
             <Route path="/orchestrator" element={<Orchestrator />} />
             <Route path="/persona-generation" element={<PersonaGeneration />} />
+            <Route path="/synthetic-files" element={<SyntheticFiles />} />
             <Route path="/canary-tokens" element={<CanaryTokens />} />
             <Route path="/topologies/:id/personas" element={<TopologyPersonaGeneration />} />
             <Route path="/config" element={<Config />} />

decnet_web/src/components/Layout.tsx

@@ -4,7 +4,7 @@ import {
   Menu, X, Search, Activity, LayoutDashboard, Terminal, Settings, LogOut,
   Server, Archive, Package, Network, ChevronDown, ChevronRight, HardDrive,
   ShieldAlert, Bell, Webhook, Lock, Crosshair, Fingerprint, Zap, Cpu, Mail,
-  Target,
+  Target, FileText,
 } from '../icons';
 import { prefetchRoute } from '../routePrefetch';
 import './Layout.css';
@@ -36,6 +36,7 @@ const ROUTE_LABELS: Record<string, string> = {
   '/campaigns': 'CAMPAIGNS',
   '/orchestrator': 'ORCHESTRATOR',
   '/persona-generation': 'PERSONA GENERATION',
+  '/synthetic-files': 'SYNTHETIC FILES',
   '/canary-tokens': 'CANARY TOKENS',
   '/config': 'CONFIG',
   '/swarm-updates': 'REMOTE UPDATES',
@@ -142,6 +143,7 @@ const Layout: React.FC<LayoutProps> = ({
           <NavGroup label="AUTOMATION" icon={<Zap size={20} />} open={sidebarOpen}>
             <NavItem to="/orchestrator" icon={<Cpu size={18} />} label="Orchestrator" open={sidebarOpen} indent />
             <NavItem to="/persona-generation" icon={<Mail size={18} />} label="Persona Generation" open={sidebarOpen} indent />
+            <NavItem to="/synthetic-files" icon={<FileText size={18} />} label="Synthetic Files" open={sidebarOpen} indent />
             <NavItem to="/canary-tokens" icon={<Target size={18} />} label="Canary Tokens" open={sidebarOpen} indent />
           </NavGroup>
           <NavGroup label="SWARM" icon={<Network size={20} />} open={sidebarOpen}>

decnet_web/src/components/SyntheticFiles/SyntheticFiles.tsx

@@ -0,0 +1,358 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import api from '../../utils/api';
+import { useEscapeKey } from '../../hooks/useEscapeKey';
+import { useFocusTrap } from '../../hooks/useFocusTrap';
+import { X, FileText } from '../../icons';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface SyntheticFileRow {
+  uuid: string;
+  decky_uuid: string;
+  path: string;
+  persona: string;
+  content_class: string;
+  created_at: string;
+  last_modified: string;
+  edit_count: number;
+  content_hash: string;
+}
+
+interface SyntheticFileDetail extends SyntheticFileRow {
+  last_body: string;
+  truncated: boolean;
+}
+
+interface PaginatedResponse {
+  total: number;
+  limit: number;
+  offset: number;
+  data: SyntheticFileRow[];
+}
+
+interface DeckyOption {
+  uuid: string;
+  name: string;
+}
+
+const PAGE_SIZE = 50;
+
+// Fixed list of content_class values mirroring decnet/realism/taxonomy.py.
+// A static dropdown beats free-text — the operator sees what's actually
+// available without a typo path failing silently.
+const CONTENT_CLASSES = [
+  'note', 'todo', 'draft', 'script',
+  'log_cron', 'log_daemon',
+  'cache_tmp', 'config_local',
+  'canary_aws_creds', 'canary_env_file', 'canary_git_config',
+  'canary_ssh_key', 'canary_honeydoc', 'canary_honeydoc_docx',
+  'canary_honeydoc_pdf', 'canary_mysql_dump',
+] as const;
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function fmt(iso: string): string {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+function deckyLabel(uuid: string, deckies: DeckyOption[]): string {
+  const d = deckies.find((d) => d.uuid === uuid);
+  return d ? d.name : `${uuid.slice(0, 8)}…`;
+}
+
+// ─── Drawer ──────────────────────────────────────────────────────────────────
+
+interface DrawerProps {
+  uuid: string;
+  deckies: DeckyOption[];
+  onClose: () => void;
+}
+
+const SyntheticFileDrawer: React.FC<DrawerProps> = ({ uuid, deckies, onClose }) => {
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  useEscapeKey(onClose, true);
+  useFocusTrap(panelRef, true);
+  useEffect(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => { document.body.style.overflow = prev; };
+  }, []);
+
+  const [row, setRow] = useState<SyntheticFileDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    api.get<SyntheticFileDetail>(`/realism/synthetic-files/${encodeURIComponent(uuid)}`)
+      .then((res) => { if (!cancelled) setRow(res.data); })
+      .catch((err: any) => {
+        if (cancelled) return;
+        setError(err?.response?.status === 404 ? 'File no longer exists.' : 'Load failed.');
+      })
+      .finally(() => { if (!cancelled) setLoading(false); });
+    return () => { cancelled = true; };
+  }, [uuid]);
+
+  return (
+    <div
+      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+      style={{
+        position: 'fixed', inset: 0,
+        backgroundColor: 'rgba(0,0,0,0.6)',
+        display: 'flex', justifyContent: 'flex-end',
+        zIndex: 1000,
+      }}
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        style={{
+          width: 'min(720px, 100%)', height: '100%',
+          backgroundColor: 'var(--bg-color, #0d1117)',
+          borderLeft: '1px solid var(--border-color, #30363d)',
+          padding: '24px', overflowY: 'auto',
+          color: 'var(--text-color)',
+        }}
+      >
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
+          <div>
+            <div style={{ fontSize: '0.7rem', color: 'var(--dim-color)', letterSpacing: '0.1em' }}>
+              SYNTHETIC FILE {row ? `· ${deckyLabel(row.decky_uuid, deckies)}` : ''}
+            </div>
+            <div className="mono" style={{ fontSize: '0.95rem', fontWeight: 'bold', marginTop: '4px', wordBreak: 'break-all' }}>
+              {row?.path ?? uuid}
+            </div>
+          </div>
+          <button onClick={onClose} aria-label="Close" style={{ background: 'none', border: 'none', color: 'var(--text-color)', cursor: 'pointer' }}>
+            <X size={18} />
+          </button>
+        </div>
+
+        {loading && <div style={{ opacity: 0.6 }}>Loading…</div>}
+        {error && <div style={{ color: '#ff5555' }}>{error}</div>}
+
+        {row && (
+          <>
+            <div style={{ display: 'grid', gridTemplateColumns: '140px 1fr', rowGap: '6px', fontSize: '0.85rem', marginBottom: '16px' }}>
+              <div style={{ color: 'var(--dim-color)' }}>PERSONA</div><div>{row.persona}</div>
+              <div style={{ color: 'var(--dim-color)' }}>CONTENT CLASS</div><div className="mono">{row.content_class}</div>
+              <div style={{ color: 'var(--dim-color)' }}>EDIT COUNT</div><div>{row.edit_count}</div>
+              <div style={{ color: 'var(--dim-color)' }}>CREATED</div><div>{fmt(row.created_at)}</div>
+              <div style={{ color: 'var(--dim-color)' }}>LAST MODIFIED</div><div>{fmt(row.last_modified)}</div>
+              <div style={{ color: 'var(--dim-color)' }}>CONTENT HASH</div>
+              <div className="mono" style={{ wordBreak: 'break-all' }}>{row.content_hash}</div>
+            </div>
+
+            <div style={{ borderTop: '1px solid rgba(255,255,255,0.05)', paddingTop: '12px' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
+                <span style={{ fontSize: '0.7rem', color: 'var(--dim-color)', letterSpacing: '0.1em' }}>
+                  BODY PREVIEW ({(row.last_body?.length ?? 0).toLocaleString()} bytes)
+                </span>
+                {row.truncated && (
+                  <span
+                    className="chip dim-chip"
+                    title="Body is at the 64KB cap; the decky filesystem holds the canonical bytes."
+                  >
+                    TRUNCATED
+                  </span>
+                )}
+              </div>
+              <pre className="mono" style={{
+                whiteSpace: 'pre-wrap', wordBreak: 'break-word',
+                backgroundColor: 'rgba(255,255,255,0.03)',
+                border: '1px solid rgba(255,255,255,0.05)',
+                padding: '12px', fontSize: '0.78rem',
+                maxHeight: '60vh', overflowY: 'auto',
+              }}>
+                {row.last_body || <span style={{ opacity: 0.4 }}>—</span>}
+              </pre>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// ─── Page ────────────────────────────────────────────────────────────────────
+
+const SyntheticFiles: React.FC = () => {
+  const [rows, setRows] = useState<SyntheticFileRow[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const [deckies, setDeckies] = useState<DeckyOption[]>([]);
+  const [deckyFilter, setDeckyFilter] = useState<string>('');     // '' = all
+  const [personaFilter, setPersonaFilter] = useState<string>('');
+  const [classFilter, setClassFilter] = useState<string>('');
+
+  const [selectedUuid, setSelectedUuid] = useState<string | null>(null);
+
+  useEffect(() => {
+    api.get<DeckyOption[]>('/deckies')
+      .then((res) => setDeckies(Array.isArray(res.data) ? res.data : []))
+      .catch(() => setDeckies([]));
+  }, []);
+
+  const personaOptions = useMemo(() => {
+    const set = new Set<string>();
+    rows.forEach((r) => set.add(r.persona));
+    return Array.from(set).sort();
+  }, [rows]);
+
+  const fetchRows = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const params = new URLSearchParams();
+      params.set('limit', String(PAGE_SIZE));
+      params.set('offset', String(page * PAGE_SIZE));
+      if (deckyFilter) params.set('decky_uuid', deckyFilter);
+      if (personaFilter) params.set('persona', personaFilter);
+      if (classFilter) params.set('content_class', classFilter);
+      const res = await api.get<PaginatedResponse>(
+        `/realism/synthetic-files?${params.toString()}`,
+      );
+      setRows(res.data.data);
+      setTotal(res.data.total);
+    } catch (err: any) {
+      setError(err?.response?.status === 401 ? 'Authentication required.' : 'Load failed.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { fetchRows(); /* eslint-disable-next-line react-hooks/exhaustive-deps */ }, [
+    page, deckyFilter, personaFilter, classFilter,
+  ]);
+
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+
+  return (
+    <div style={{ padding: '24px', color: 'var(--text-color)' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '16px' }}>
+        <FileText size={18} />
+        <h2 style={{ margin: 0, fontSize: '1.1rem', letterSpacing: '0.05em' }}>SYNTHETIC FILES</h2>
+        <span style={{ marginLeft: 'auto', color: 'var(--dim-color)', fontSize: '0.8rem' }}>
+          {total} total
+        </span>
+      </div>
+
+      <div style={{ display: 'flex', gap: '12px', marginBottom: '16px', flexWrap: 'wrap' }}>
+        <label style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.8rem' }}>
+          <span style={{ color: 'var(--dim-color)' }}>Decky:</span>
+          <select
+            value={deckyFilter}
+            onChange={(e) => { setDeckyFilter(e.target.value); setPage(0); }}
+          >
+            <option value="">All</option>
+            {deckies.map((d) => (
+              <option key={d.uuid} value={d.uuid}>{d.name}</option>
+            ))}
+          </select>
+        </label>
+
+        <label style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.8rem' }}>
+          <span style={{ color: 'var(--dim-color)' }}>Persona:</span>
+          <select
+            value={personaFilter}
+            onChange={(e) => { setPersonaFilter(e.target.value); setPage(0); }}
+          >
+            <option value="">All</option>
+            {personaOptions.map((p) => (
+              <option key={p} value={p}>{p}</option>
+            ))}
+          </select>
+        </label>
+
+        <label style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.8rem' }}>
+          <span style={{ color: 'var(--dim-color)' }}>Class:</span>
+          <select
+            value={classFilter}
+            onChange={(e) => { setClassFilter(e.target.value); setPage(0); }}
+          >
+            <option value="">All</option>
+            {CONTENT_CLASSES.map((c) => (
+              <option key={c} value={c}>{c}</option>
+            ))}
+          </select>
+        </label>
+      </div>
+
+      {error && <div style={{ color: '#ff5555', marginBottom: '12px' }}>{error}</div>}
+
+      <div style={{ overflowX: 'auto', border: '1px solid rgba(255,255,255,0.05)' }}>
+        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.85rem' }}>
+          <thead>
+            <tr style={{ textAlign: 'left', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
+              <th style={{ padding: '8px 12px', color: 'var(--dim-color)', fontSize: '0.7rem', letterSpacing: '0.1em' }}>DECKY</th>
+              <th style={{ padding: '8px 12px', color: 'var(--dim-color)', fontSize: '0.7rem', letterSpacing: '0.1em' }}>PATH</th>
+              <th style={{ padding: '8px 12px', color: 'var(--dim-color)', fontSize: '0.7rem', letterSpacing: '0.1em' }}>PERSONA</th>
+              <th style={{ padding: '8px 12px', color: 'var(--dim-color)', fontSize: '0.7rem', letterSpacing: '0.1em' }}>CLASS</th>
+              <th style={{ padding: '8px 12px', color: 'var(--dim-color)', fontSize: '0.7rem', letterSpacing: '0.1em' }}>LAST MODIFIED</th>
+              <th style={{ padding: '8px 12px', color: 'var(--dim-color)', fontSize: '0.7rem', letterSpacing: '0.1em' }}>EDITS</th>
+              <th style={{ padding: '8px 12px', color: 'var(--dim-color)', fontSize: '0.7rem', letterSpacing: '0.1em' }}>HASH</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading && (
+              <tr><td colSpan={7} style={{ padding: '20px', textAlign: 'center', opacity: 0.6 }}>Loading…</td></tr>
+            )}
+            {!loading && rows.length === 0 && (
+              <tr><td colSpan={7} style={{ padding: '20px', textAlign: 'center', opacity: 0.6 }}>
+                No files match the current filters.
+              </td></tr>
+            )}
+            {!loading && rows.map((r) => (
+              <tr
+                key={r.uuid}
+                className="clickable"
+                onClick={() => setSelectedUuid(r.uuid)}
+                style={{ cursor: 'pointer', borderBottom: '1px solid rgba(255,255,255,0.03)' }}
+              >
+                <td style={{ padding: '8px 12px' }}>{deckyLabel(r.decky_uuid, deckies)}</td>
+                <td className="mono" style={{ padding: '8px 12px', wordBreak: 'break-all' }}>{r.path}</td>
+                <td style={{ padding: '8px 12px' }}>{r.persona}</td>
+                <td className="mono" style={{ padding: '8px 12px' }}>{r.content_class}</td>
+                <td style={{ padding: '8px 12px' }}>{fmt(r.last_modified)}</td>
+                <td style={{ padding: '8px 12px' }}>{r.edit_count}</td>
+                <td className="mono" style={{ padding: '8px 12px', opacity: 0.7 }}>{r.content_hash.slice(0, 12)}…</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <div style={{ display: 'flex', gap: '8px', marginTop: '12px', alignItems: 'center' }}>
+        <button onClick={() => setPage((p) => Math.max(0, p - 1))} disabled={page === 0}>
+          ← Prev
+        </button>
+        <span style={{ fontSize: '0.8rem', color: 'var(--dim-color)' }}>
+          Page {page + 1} / {totalPages}
+        </span>
+        <button onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))} disabled={page >= totalPages - 1}>
+          Next →
+        </button>
+      </div>
+
+      {selectedUuid && (
+        <SyntheticFileDrawer
+          uuid={selectedUuid}
+          deckies={deckies}
+          onClose={() => setSelectedUuid(null)}
+        />
+      )}
+    </div>
+  );
+};
+
+export default SyntheticFiles;