anentrypoint-design 0.0.384 → 0.0.385

package/src/components/freddie/pages-infra.js

@@ -0,0 +1,120 @@
+// Freddie infrastructure pages: `gateway` (messaging platform status),
+// `chains` (acptoapi fallback chain CRUD), `machines` (persisted xstate
+// census), and `health` (system + provider checks).
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { makePage, api, loadingState, errorState, emptyState, refreshError } from './runtime.js';
+import { Row, Table, PageHeader, TextField } from '../content.js';
+import { Chip, Btn } from '../shell.js';
+import { section, noteAlert, truncJson } from './shared.js';
+
+const h = webjsx.createElement;
+
+export const gateway = makePage((ctx) => {
+    async function load() { try { ctx.set({ loading: false, data: await api('/api/gateway'), error: null }); } catch (e) { ctx.set({ loading: false, error: e }); } }
+    load(); ctx.interval(load, 10000);
+    return () => {
+        const s = ctx.state;
+        if (s.loading) return loadingState('loading gateway…');
+        if (s.error && !s.data) return errorState(s.error, load);
+        const d = s.data || {};
+        const platforms = d.platforms || d;
+        const rows = Object.entries(platforms).map(([k, v]) => [k, typeof v === 'object' ? (v.running || v.up ? Chip({ tone: 'ok', children: 'up' }) : Chip({ tone: 'miss', children: 'down' })) : String(v)]);
+        return [
+            PageHeader({ title: 'gateway', lede: 'messaging platform status' }),
+            s.error && s.data ? refreshError(s.error) : null,
+            section('platforms', rows.length ? Table({ headers: ['platform', 'status'], rows }) : emptyState('no platforms configured')),
+        ].filter(Boolean);
+    };
+});
+
+export const chains = makePage((ctx) => {
+    Object.assign(ctx.state, { name: '', links: '', busy: false, note: null });
+    async function load() {
+        try {
+            const [health, list, cfg] = await Promise.all([
+                api('/api/acptoapi/health').catch(() => null),
+                api('/api/acptoapi/chains').catch(() => null),
+                api('/api/acptoapi/config').catch(() => null),
+            ]);
+            ctx.set({ loading: false, health, list, cfg, error: null });
+        } catch (e) { ctx.set({ loading: false, error: e }); }
+    }
+    async function create() {
+        const name = (ctx.state.name || '').trim();
+        const links = (ctx.state.links || '').split(',').map(x => x.trim()).filter(Boolean);
+        if (!name || !links.length) { ctx.set({ note: { kind: 'warn', msg: 'name and comma-separated links required' } }); return; }
+        ctx.set({ busy: true, note: null });
+        try { await api('/api/acptoapi/chains', { method: 'POST', body: { name, links } }); ctx.state.name = ''; ctx.state.links = ''; await load(); }
+        catch (e) { ctx.set({ note: { kind: 'error', msg: String(e.message || e) } }); }
+        ctx.set({ busy: false });
+    }
+    async function del(name) { ctx.set({ busy: true }); try { await api('/api/acptoapi/chains/' + encodeURIComponent(name), { method: 'DELETE' }); await load(); } catch (e) { ctx.set({ note: { kind: 'error', msg: String(e.message || e) } }); } ctx.set({ busy: false }); }
+    load();
+    return () => {
+        const s = ctx.state;
+        if (s.loading) return loadingState('loading chains…');
+        if (s.error && !s.cfg && !s.health) return errorState(s.error, load);
+        const chainsList = s.list?.chains || s.list || [];
+        const up = s.health && (s.health.ok || s.health.status === 'ok' || s.health.healthy);
+        return [
+            PageHeader({ title: 'chains', lede: 'acptoapi fallback chains', right: up ? Chip({ tone: 'ok', children: 'acptoapi up' }) : Chip({ tone: 'miss', children: 'acptoapi down' }) }),
+            noteAlert(s.note),
+            section('chains', Array.isArray(chainsList) && chainsList.length ? chainsList.map((c, i) => Row({
+                key: i, title: c.name || c, sub: Array.isArray(c.links) ? c.links.join(' -> ') : '',
+                trailing: Btn({ variant: 'danger', children: 'delete', onClick: () => del(c.name || c) }),
+            })) : emptyState('no chains defined')),
+            section('new chain',
+                TextField({ label: 'name', value: s.name, onInput: (v) => { s.name = v; } }),
+                TextField({ label: 'links (comma-separated models)', value: s.links, onInput: (v) => { s.links = v; }, placeholder: 'mistral/large, openrouter/auto' }),
+                Btn({ variant: 'primary', disabled: s.busy, children: s.busy ? 'working…' : 'create chain', onClick: create })),
+            s.cfg ? section('config', h('pre', { class: 'fd-pre' }, JSON.stringify(s.cfg, null, 2))) : null,
+        ].filter(Boolean);
+    };
+});
+
+export const machines = makePage((ctx) => {
+    async function load() { try { ctx.set({ loading: false, data: await api('/api/machines'), error: null }); } catch (e) { ctx.set({ loading: false, error: e }); } }
+    load(); ctx.interval(load, 8000);
+    return () => {
+        const s = ctx.state;
+        if (s.loading) return loadingState('loading machines…');
+        if (s.error && !s.data) return errorState(s.error, load);
+        const d = s.data || {};
+        const list = Array.isArray(d) ? d : (d.machines || Object.entries(d).map(([kind, v]) => ({ kind, ...(typeof v === 'object' ? v : { value: v }) })));
+        return [
+            PageHeader({ title: 'machines', lede: 'persisted xstate machine census' }),
+            s.error && s.data ? refreshError(s.error) : null,
+            section('machines', list.length ? Table({
+                headers: ['kind', 'key', 'state'],
+                rows: list.map(m => [m.kind || '—', m.key || m.machine_id || '—', m.state || m.value || truncJson(m)]),
+            }) : emptyState('no live machines')),
+        ].filter(Boolean);
+    };
+});
+
+export const health = makePage((ctx) => {
+    async function load() {
+        try {
+            const [health, providers] = await Promise.all([
+                api('/api/health').catch(() => null),
+                api('/api/providers').catch(() => null),
+            ]);
+            ctx.set({ loading: false, health, providers, error: null });
+        } catch (e) { ctx.set({ loading: false, error: e }); }
+    }
+    load(); ctx.interval(load, 15000);
+    return () => {
+        const s = ctx.state;
+        if (s.loading) return loadingState('loading health…');
+        if (s.error && !s.health && !s.providers) return errorState(s.error, load);
+        const hd = s.health || {};
+        const provs = Array.isArray(s.providers) ? s.providers : (s.providers?.providers || []);
+        return [
+            PageHeader({ title: 'health', lede: 'system & provider health', right: hd.ok ? Chip({ tone: 'ok', children: 'healthy' }) : Chip({ tone: 'miss', children: 'degraded' }) }),
+            s.error && (s.health || s.providers) ? refreshError(s.error) : null,
+            section('checks', Object.keys(hd).length ? Table({ headers: ['check', 'status'], rows: Object.entries(hd).map(([k, v]) => [k, typeof v === 'object' ? truncJson(v) : (v === true ? Chip({ tone: 'ok', children: 'ok' }) : v === false ? Chip({ tone: 'miss', children: 'no' }) : String(v))]) }) : emptyState('no health data')),
+            provs.length ? section('providers', Table({ headers: ['provider', 'status'], rows: provs.map(p => { const n = typeof p === 'string' ? p : p.name || p.id; const ok = typeof p === 'object' ? (p.ok ?? p.available) : null; return [n, ok == null ? '—' : (ok ? Chip({ tone: 'ok', children: 'up' }) : Chip({ tone: 'miss', children: 'down' }))]; }) })) : null,
+        ].filter(Boolean);
+    };
+});

package/src/components/freddie/pages-overview.js

@@ -0,0 +1,107 @@
+// Freddie overview pages: the dashboard `home` KPI roll-up, `agents` live
+// activity, and `analytics` provider/sampler health. All read-only polling
+// pages over /api/health, /api/agents, /api/sessions and /api/models/*.
+
+import { makePage, api, loadingState, errorState, emptyState, refreshError } from './runtime.js';
+import { Table, Kpi, PageHeader } from '../content.js';
+import { fmtAgo } from '../sessions.js';
+import { section, truncSpan, truncJson, TRUNC_TITLE } from './shared.js';
+
+export const home = makePage((ctx) => {
+    async function load() {
+        try {
+            // tools/skills counts come from the host when injected; otherwise
+            // fall back to the same /api/* endpoints the tools/skills pages use
+            // so the home KPIs never render an em-dash placeholder.
+            const needTools = ctx.host?.pi?.tools?.size == null;
+            const needSkills = ctx.host?.pi?.skills?.size == null;
+            const [health, agents, sessions, toolsList, skillsList] = await Promise.all([
+                api('/api/health').catch(() => null),
+                api('/api/agents').catch(() => null),
+                api('/api/sessions').catch((e) => ({ _err: e })),
+                needTools ? api('/api/tools').catch(() => null) : Promise.resolve(null),
+                needSkills ? api('/api/skills').catch(() => null) : Promise.resolve(null),
+            ]);
+            const toolsCount = needTools ? (Array.isArray(toolsList) ? toolsList.length : (toolsList?.tools?.length ?? null)) : null;
+            const skillsCount = needSkills ? (Array.isArray(skillsList) ? skillsList.length : (skillsList?.skills?.length ?? null)) : null;
+            const sessFailed = sessions && sessions._err;
+            ctx.set({ loading: false, health, agents, sessions: Array.isArray(sessions) ? sessions : [], sessFailed, toolsCount, skillsCount, error: null });
+        } catch (e) { ctx.set({ loading: false, error: e }); }
+    }
+    load();
+    ctx.interval(load, 15000);
+    return () => {
+        const s = ctx.state;
+        if (s.loading) return loadingState('loading dashboard…');
+        if (s.error) return errorState(s.error, load);
+        const sessions = s.sessions || [];
+        const agents = s.agents || {};
+        const tools = ctx.host?.pi?.tools?.size ?? s.toolsCount ?? '—';
+        const skills = ctx.host?.pi?.skills?.size ?? s.skillsCount ?? '—';
+        return [
+            PageHeader({ title: 'dashboard', lede: 'agent harness · live overview' }),
+            Kpi({ items: [
+                [tools, 'tools'],
+                [skills, 'skills'],
+                [sessions.length, 'sessions'],
+                [agents.count ?? 0, 'active agents'],
+            ] }),
+            section('recent sessions',
+                s.sessFailed
+                    ? errorState(new Error('could not load sessions'))
+                    : sessions.length
+                        ? Table({
+                            headers: ['session', 'platform', 'updated'],
+                            rows: sessions.slice(0, 8).map(x => [truncSpan(x.title || x.id, TRUNC_TITLE), x.platform || '—', fmtAgo(x.updated_at)]),
+                        })
+                        : emptyState('no sessions yet')),
+            section('health',
+                s.health ? Table({ headers: ['check', 'status'], rows: Object.entries(s.health).map(([k, v]) => [k, typeof v === 'object' ? truncJson(v) : String(v)]) })
+                    : emptyState('health endpoint unavailable')),
+        ];
+    };
+});
+
+export const agents = makePage((ctx) => {
+    async function load() { try { ctx.set({ loading: false, data: await api('/api/agents'), error: null }); } catch (e) { ctx.set({ loading: false, error: e }); } }
+    load(); ctx.interval(load, 5000);
+    return () => {
+        const s = ctx.state;
+        if (s.loading) return loadingState('loading agents…');
+        if (s.error && !s.data) return errorState(s.error, load);
+        const d = s.data || {};
+        return [
+            PageHeader({ title: 'agents', lede: 'live agent activity' }),
+            s.error && s.data ? refreshError(s.error) : null,
+            Kpi({ items: [[d.count ?? 0, 'active'], [d.turns ?? 0, 'total turns'], [d.last_activity ? fmtAgo(d.last_activity) : '—', 'last activity']] }),
+            section('detail', Table({ headers: ['field', 'value'], rows: Object.entries(d).map(([k, v]) => [k, String(v)]) })),
+        ].filter(Boolean);
+    };
+});
+
+export const analytics = makePage((ctx) => {
+    async function load() {
+        try {
+            const [sampler, avail] = await Promise.all([
+                api('/api/models/sampler').catch(() => null),
+                api('/api/models/availability/summary').catch(() => null),
+            ]);
+            ctx.set({ loading: false, sampler, avail, error: null });
+        } catch (e) { ctx.set({ loading: false, error: e }); }
+    }
+    load(); ctx.interval(load, 15000);
+    return () => {
+        const s = ctx.state;
+        if (s.loading) return loadingState('loading analytics…');
+        if (s.error && !s.sampler && !s.avail) return errorState(s.error, load);
+        const samp = s.sampler?.status ? Object.values(s.sampler.status) : [];
+        const ok = samp.filter(x => x && x.available !== false).length;
+        const sum = s.avail?.summary || {};
+        return [
+            PageHeader({ title: 'analytics', lede: 'provider availability & sampler health' }),
+            s.error && (s.sampler || s.avail) ? refreshError(s.error) : null,
+            Kpi({ items: [[ok + '/' + samp.length, 'providers up'], [sum.total_models ?? '—', 'models'], [sum.usable_in_any_mode ?? '—', 'usable']] }),
+            section('sampler', samp.length ? Table({ headers: ['provider', 'available', 'fails'], rows: Object.entries(s.sampler.status).map(([k, v]) => [k, v.available === false ? 'no' : 'yes', String(v.failCount ?? 0)]) }) : emptyState('no sampler data')),
+        ].filter(Boolean);
+    };
+});

package/src/components/freddie/pages-runners.js

@@ -0,0 +1,102 @@
+// Freddie execution-surface pages: `cron` (scheduled prompt jobs), `tools`
+// (grouped tool catalogue with schema drill-down), and `batch` (parallel
+// prompt runner + result roll-up).
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { makePage, api, loadingState, errorState, emptyState } from './runtime.js';
+import { Row, Table, Kpi, PageHeader, SearchInput, TextField } from '../content.js';
+import { Chip, Btn, Icon } from '../shell.js';
+import { section, noteAlert, trunc, truncSpan, TRUNC_SUB, TRUNC_OUTPUT, TRUNC_DESC, TRUNC_PROMPT } from './shared.js';
+
+const h = webjsx.createElement;
+
+export const cron = makePage((ctx) => {
+    Object.assign(ctx.state, { expr: '', prompt: '', busy: false, note: null });
+    async function load() { try { ctx.set({ loading: false, list: await api('/api/cron'), error: null }); } catch (e) { ctx.set({ loading: false, error: e }); } }
+    async function add() {
+        const expr = (ctx.state.expr || '').trim(); const prompt = (ctx.state.prompt || '').trim();
+        if (!expr || !prompt) { ctx.set({ note: { kind: 'warn', msg: 'cron expression and prompt required' } }); return; }
+        ctx.set({ busy: true, note: null });
+        try { await api('/api/cron', { method: 'POST', body: { cron: expr, prompt } }); ctx.state.expr = ''; ctx.state.prompt = ''; await load(); }
+        catch (e) { ctx.set({ note: { kind: 'error', msg: String(e.message || e) } }); }
+        ctx.set({ busy: false });
+    }
+    async function del(id) { ctx.set({ busy: true }); try { await api('/api/cron/' + id, { method: 'DELETE' }); await load(); } catch (e) { ctx.set({ note: { kind: 'error', msg: String(e.message || e) } }); } ctx.set({ busy: false }); }
+    load();
+    return () => {
+        const s = ctx.state;
+        if (s.loading) return loadingState('loading cron jobs…');
+        if (s.error && !s.list) return errorState(s.error, load);
+        const list = Array.isArray(s.list) ? s.list : [];
+        return [
+            PageHeader({ title: 'cron', lede: list.length + ' scheduled jobs' }),
+            noteAlert(s.note),
+            section('jobs', list.length ? list.map((j, i) => Row({
+                key: i, code: j.enabled ? Icon('play') : Icon('pause'), title: j.cron, sub: trunc(j.prompt, TRUNC_SUB).text,
+                trailing: Btn({ variant: 'danger', children: 'delete', onClick: () => del(j.id) }),
+            })) : emptyState('no cron jobs')),
+            section('new job',
+                TextField({ label: 'cron expression', value: s.expr, onInput: (v) => { s.expr = v; }, placeholder: '0 9 * * *' }),
+                TextField({ label: 'prompt', value: s.prompt, multiline: true, onInput: (v) => { s.prompt = v; }, placeholder: 'what to run…' }),
+                Btn({ variant: 'primary', disabled: s.busy, children: s.busy ? 'working…' : 'add job', onClick: add })),
+        ];
+    };
+});
+
+export const tools = makePage((ctx) => {
+    Object.assign(ctx.state, { open: null, q: '' });
+    async function load() { try { ctx.set({ loading: false, list: await api('/api/tools'), error: null }); } catch (e) { ctx.set({ loading: false, error: e }); } }
+    load();
+    return () => {
+        const s = ctx.state;
+        if (s.loading) return loadingState('loading tools…');
+        if (s.error) return errorState(s.error, load);
+        let list = Array.isArray(s.list) ? s.list : (s.list?.tools || []);
+        if (s.q) list = list.filter(t => (t.name || '').includes(s.q));
+        const groups = {};
+        for (const t of list) { const g = t.toolset || 'core'; (groups[g] = groups[g] || []).push(t); }
+        return [
+            PageHeader({ title: 'tools', lede: list.length + ' tools' }),
+            SearchInput({ value: s.q, label: 'filter tools', placeholder: 'filter tools…', onInput: (v) => ctx.set({ q: v }) }),
+            ...Object.entries(groups).map(([g, ts]) => section(g + ' · ' + ts.length, ts.map((t, i) => h('div', { key: i },
+                Row({ title: t.name, sub: trunc(t.schema?.description || t.description, TRUNC_DESC).text, onClick: () => ctx.set({ open: ctx.state.open === t.name ? null : t.name }), active: ctx.state.open === t.name }),
+                ctx.state.open === t.name ? h('pre', { class: 'fd-pre' }, JSON.stringify(t.schema || t, null, 2)) : null,
+            )))),
+            list.length ? null : emptyState('no tools match'),
+        ].filter(Boolean);
+    };
+});
+
+export const batch = makePage((ctx) => {
+    Object.assign(ctx.state, { loading: false, prompts: '', concurrency: 4, busy: false, result: null, note: null });
+    async function run() {
+        const prompts = (ctx.state.prompts || '').split('\n').map(x => x.trim()).filter(Boolean);
+        if (!prompts.length) { ctx.set({ note: { kind: 'warn', msg: 'enter at least one prompt (one per line)' } }); return; }
+        ctx.set({ busy: true, note: null, result: null });
+        try { const r = await api('/api/batch', { method: 'POST', body: { prompts, concurrency: Number(ctx.state.concurrency) || 4 } }); ctx.set({ result: r }); }
+        catch (e) { ctx.set({ note: { kind: 'error', msg: String(e.message || e) } }); }
+        ctx.set({ busy: false });
+    }
+    return () => {
+        const s = ctx.state;
+        return [
+            PageHeader({ title: 'batch', lede: 'parallel prompt runner' }),
+            noteAlert(s.note),
+            section('prompts',
+                TextField({ label: 'prompts (one per line)', value: s.prompts, multiline: true, rows: 6, onInput: (v) => { s.prompts = v; } }),
+                TextField({ label: 'concurrency', type: 'number', min: 1, 'aria-label': 'batch concurrency', value: String(s.concurrency), onInput: (v) => { s.concurrency = v; } }),
+                Btn({ variant: 'primary', disabled: s.busy, children: s.busy ? 'running…' : 'run batch', onClick: run })),
+            s.result ? section('result', (() => {
+                const r = s.result;
+                const items = Array.isArray(r.results) ? r.results : (Array.isArray(r) ? r : null);
+                if (!items) return h('pre', { class: 'fd-pre' }, JSON.stringify(r, null, 2));
+                return [
+                    Kpi({ items: [[items.length, 'prompts'], [items.filter(x => !x.error).length, 'ok'], [items.filter(x => x.error).length, 'errors']] }),
+                    Table({ headers: ['#', 'prompt', 'status', 'output'], rows: items.map((x, i) => {
+                        return [String(i + 1), truncSpan(x.prompt || x.input || '', TRUNC_PROMPT), x.error ? Chip({ tone: 'miss', children: 'error' }) : Chip({ tone: 'ok', children: 'ok' }), truncSpan(x.error || x.result || x.content || x.output || '', TRUNC_OUTPUT)];
+                    }) }),
+                ];
+            })()) : null,
+        ].filter(Boolean);
+    };
+});

package/src/components/freddie/pages-telemetry.js

@@ -0,0 +1,126 @@
+// Freddie telemetry pages: `logs` (live WebSocket JSONL tail with
+// subsystem/severity/message filtering and auto-reconnect) and `debug`
+// (per-subsystem snapshot + log drill-down).
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { makePage, api, loadingState, errorState, emptyState, refreshError } from './runtime.js';
+import { Row, Table, PageHeader, SearchInput, Select } from '../content.js';
+import { Chip } from '../shell.js';
+import { formatTime } from '../../locale.js';
+import { register as registerDebug, unregister as unregisterDebug } from '../../debug.js';
+import { section, truncSpan, TRUNC_DESC } from './shared.js';
+
+const h = webjsx.createElement;
+
+const LOG_SEVERITY_TONE = { error: 'error', warning: 'warning', info: 'accent', debug: 'muted' };
+
+export const logs = makePage((ctx) => {
+    Object.assign(ctx.state, { lines: [], subsystems: [], activeSubsystem: '', activeSeverity: '', q: '', connected: false, wsError: null });
+    const MAX_LINES = 500;
+
+    async function loadSubsystems() {
+        try { ctx.set({ subsystems: await api('/api/logs') }); }
+        catch (e) { /* swallow: non-fatal, subsystem list is a filter convenience, not required for the stream */ }
+    }
+
+    let unmounted = false;
+    let reconnectTimer = null;
+    function connect() {
+        if (unmounted) return;
+        if (typeof WebSocket === 'undefined') { ctx.set({ wsError: new Error('WebSocket not available in this environment') }); return }
+        const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const ws = new WebSocket(proto + '//' + location.host + '/api/logs/stream');
+        ws.onopen = () => ctx.set({ connected: true, wsError: null });
+        ws.onerror = () => ctx.set({ connected: false, wsError: new Error('log stream connection error') });
+        ws.onclose = () => { ctx.set({ connected: false }); if (!unmounted) reconnectTimer = setTimeout(connect, 3000); };
+        ws.onmessage = (ev) => {
+            let rec; try { rec = JSON.parse(ev.data); } catch { return; }
+            const next = [rec, ...ctx.state.lines].slice(0, MAX_LINES);
+            ctx.set({ lines: next });
+        };
+        currentWs = ws;
+    }
+    let currentWs = null;
+
+    loadSubsystems();
+    connect();
+    registerDebug('logs', () => ({ connected: ctx.state.connected, lineCount: ctx.state.lines.length, activeSubsystem: ctx.state.activeSubsystem, activeSeverity: ctx.state.activeSeverity }));
+    ctx.onCleanup(() => {
+        unmounted = true;
+        if (reconnectTimer) clearTimeout(reconnectTimer);
+        try { currentWs?.close(); } catch { /* swallow: teardown-only close, socket may already be closed/closing */ }
+        unregisterDebug('logs');
+    });
+
+    function filtered() {
+        const s = ctx.state;
+        return s.lines.filter((l) => {
+            if (s.activeSubsystem && l.subsystem !== s.activeSubsystem) return false;
+            if (s.activeSeverity && l.severity !== s.activeSeverity) return false;
+            if (s.q && !String(l.msg || '').toLowerCase().includes(s.q.toLowerCase())) return false;
+            return true;
+        });
+    }
+
+    return () => {
+        const s = ctx.state;
+        const rows = filtered();
+        const severities = ['error', 'warning', 'info', 'debug'];
+        return [
+            PageHeader({
+                title: 'logs', lede: 'live JSONL log tail — /api/logs/stream',
+                right: s.connected ? Chip({ tone: 'ok', children: 'live' }) : Chip({ tone: 'miss', children: 'reconnecting…' }),
+            }),
+            s.wsError ? refreshError(s.wsError) : null,
+            h('div', { class: 'ds-toolbar' },
+                SearchInput({ value: s.q, placeholder: 'filter by message…', onInput: (v) => ctx.set({ q: v }), resultCount: rows.length }),
+                Select({
+                    label: 'subsystem', value: s.activeSubsystem, placeholder: 'all subsystems',
+                    options: (s.subsystems || []).map((name) => ({ value: name, label: name })),
+                    onChange: (v) => ctx.set({ activeSubsystem: v }),
+                }),
+                Select({
+                    label: 'severity', value: s.activeSeverity, placeholder: 'all severities',
+                    options: severities.map((sv) => ({ value: sv, label: sv })),
+                    onChange: (v) => ctx.set({ activeSeverity: v }),
+                }),
+            ),
+            rows.length ? section('lines · ' + rows.length,
+                Table({
+                    headers: ['time', 'subsystem', 'severity', 'message'],
+                    rows: rows.map((l) => [
+                        formatTime(l.ts ? Date.parse(l.ts) : Date.now()),
+                        l.subsystem || '—',
+                        Chip({ tone: LOG_SEVERITY_TONE[l.severity] || 'dim', children: l.severity || 'info' }),
+                        truncSpan(l.msg, TRUNC_DESC),
+                    ]),
+                }),
+            ) : emptyState(s.connected ? 'no log lines yet — waiting for activity' : 'connecting to log stream…'),
+        ].filter(Boolean);
+    };
+});
+
+export const debug = makePage((ctx) => {
+    Object.assign(ctx.state, { sub: null, logs: null });
+    async function load() { try { ctx.set({ loading: false, data: await api('/api/debug'), error: null }); } catch (e) { ctx.set({ loading: false, error: e }); } }
+    async function loadLogs(name) {
+        ctx.set({ sub: name });
+        try { ctx.set({ logs: await api('/api/logs/' + encodeURIComponent(name)) }); }
+        catch (e) { ctx.set({ logs: { error: String(e.message || e) } }); }
+    }
+    load();
+    return () => {
+        const s = ctx.state;
+        if (s.loading) return loadingState('loading debug snapshots…');
+        if (s.error) return errorState(s.error, load);
+        const d = s.data || {};
+        const subsystems = d.subsystems || Object.keys(d);
+        return [
+            PageHeader({ title: 'debug', lede: 'subsystem snapshots & logs' }),
+            section('subsystems', subsystems.length ? subsystems.map((name, i) => Row({
+                key: i, title: name, onClick: () => loadLogs(name), active: s.sub === name,
+            })) : emptyState('no debug subsystems')),
+            s.sub ? section('logs · ' + s.sub, h('pre', { class: 'fd-pre' }, JSON.stringify(s.logs, null, 2))) : null,
+        ].filter(Boolean);
+    };
+});

package/src/components/freddie/pages-workspace.js

@@ -0,0 +1,176 @@
+// Freddie workspace pages: `sessions` (searchable transcript browser),
+// `projects` (isolated-workspace CRUD + activation), and `git` (status /
+// diff / log / worktree management for the active project's cwd).
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { makePage, api, loadingState, errorState, emptyState, refreshError } from './runtime.js';
+import { Row, Table, PageHeader, SearchInput, TextField } from '../content.js';
+import { Chip, Btn } from '../shell.js';
+import { ChatMessage } from '../chat.js';
+import { fmtTime, fmtAgo } from '../sessions.js';
+import { GitStatusPanel, GitDiffView } from '../git-status.js';
+import { WorktreeSwitcher } from '../worktree-switcher.js';
+import { section, noteAlert, refreshBtn, truncSpan, TRUNC_TITLE, TRUNC_SUB } from './shared.js';
+
+const h = webjsx.createElement;
+
+export const sessions = makePage((ctx) => {
+    Object.assign(ctx.state, { q: '', selected: null, messages: [], msgLoading: false });
+    async function load() {
+        try { ctx.set({ loading: false, list: await api('/api/sessions'), error: null }); }
+        catch (e) { ctx.set({ loading: false, error: e }); }
+    }
+    async function search(q) {
+        if (!q) return load();
+        try { ctx.set({ loading: false, list: await api('/api/search?q=' + encodeURIComponent(q)), error: null }); }
+        catch (e) { ctx.set({ loading: false, error: e }); }
+    }
+    async function refresh() { ctx.set({ refreshing: true }); try { ctx.set({ list: await api('/api/sessions'), error: null }); } catch (e) { ctx.set({ error: e }); } ctx.set({ refreshing: false }); }
+    async function open(id) {
+        ctx.set({ selected: id, msgLoading: true });
+        try { ctx.set({ messages: await api('/api/sessions/' + encodeURIComponent(id) + '/messages'), msgLoading: false }); }
+        catch (e) { ctx.set({ messages: [], msgLoading: false, error: e }); }
+    }
+    load();
+    return () => {
+        const s = ctx.state;
+        if (s.loading) return loadingState('loading sessions…');
+        if (s.error && !s.list) return errorState(s.error, load);
+        const list = Array.isArray(s.list) ? s.list : [];
+        return [
+            PageHeader({ title: 'sessions', lede: list.length + ' sessions', right: refreshBtn(refresh, s.refreshing) }),
+            s.error && s.list ? refreshError(s.error) : null,
+            SearchInput({ value: s.q, label: 'search sessions', placeholder: 'search messages…', onInput: (v) => { s.q = v; }, onSubmit: (v) => search(v) }),
+            section('sessions',
+                list.length
+                    ? Table({ headers: ['session', 'platform', 'updated'], onRowClick: (i) => open(list[i].id),
+                        rowLabels: list.map(x => x.title || x.id),
+                        rows: list.map(x => [truncSpan(x.title || x.id, TRUNC_TITLE), x.platform || '—', fmtAgo(x.updated_at)]) })
+                    : emptyState('no sessions match')),
+            s.selected ? section('messages · ' + s.selected,
+                s.msgLoading ? loadingState('loading messages…')
+                    : (s.messages || []).length ? (s.messages).map((m, i) => ChatMessage({ role: m.role, text: m.content || m.text || '', time: m.ts ? fmtTime(m.ts) : '', key: i }))
+                        : emptyState('no messages')) : null,
+        ].filter(Boolean);
+    };
+});
+
+export const projects = makePage((ctx) => {
+    Object.assign(ctx.state, { newName: '', newPath: '', busy: false, note: null });
+    async function load() {
+        try { ctx.set({ loading: false, data: await api('/api/projects'), error: null }); }
+        catch (e) { ctx.set({ loading: false, error: e }); }
+    }
+    async function create() {
+        const name = (ctx.state.newName || '').trim();
+        if (!name) { ctx.set({ note: { kind: 'warn', msg: 'name required' } }); return; }
+        ctx.set({ busy: true, note: null });
+        try { await api('/api/projects', { method: 'POST', body: { name, path: ctx.state.newPath || undefined } }); ctx.state.newName = ''; ctx.state.newPath = ''; await load(); }
+        catch (e) { ctx.set({ note: { kind: 'error', msg: String(e.message || e) } }); }
+        ctx.set({ busy: false });
+    }
+    async function activate(name) { ctx.set({ busy: true }); try { await api('/api/projects/active', { method: 'POST', body: { name } }); await load(); } catch (e) { ctx.set({ note: { kind: 'error', msg: String(e.message || e) } }); } ctx.set({ busy: false }); }
+    async function del(name) { ctx.set({ busy: true }); try { await api('/api/projects/' + encodeURIComponent(name), { method: 'DELETE' }); await load(); } catch (e) { ctx.set({ note: { kind: 'error', msg: String(e.message || e) } }); } ctx.set({ busy: false }); }
+    load();
+    return () => {
+        const s = ctx.state;
+        if (s.loading) return loadingState('loading projects…');
+        if (s.error && !s.data) return errorState(s.error, load);
+        const d = s.data || {}; const list = d.projects || [];
+        const activeName = (d.active && d.active.name) || d.active || 'default';
+        return [
+            PageHeader({ title: 'projects', lede: 'isolated workspaces · active: ' + activeName }),
+            noteAlert(s.note),
+            section('projects',
+                list.length ? list.map((p, i) => Row({
+                    key: i, code: h('span', { class: 'ds-dot ' + (p.name === activeName ? 'ds-dot-on' : 'ds-dot-off'), 'aria-hidden': 'true' }), title: p.name, sub: p.path || '',
+                    active: p.name === activeName,
+                    trailing: h('span', { class: 'fd-row-actions' },
+                        p.name !== activeName ? Btn({ children: 'activate', onClick: () => activate(p.name) }) : Chip({ tone: 'ok', children: 'active' }),
+                        p.name !== 'default' ? Btn({ variant: 'danger', children: 'delete', onClick: () => del(p.name) }) : null),
+                })) : emptyState('no projects')),
+            section('new project',
+                TextField({ label: 'name', value: s.newName, onInput: (v) => { s.newName = v; }, placeholder: 'my-project' }),
+                TextField({ label: 'path (optional)', value: s.newPath, onInput: (v) => { s.newPath = v; }, placeholder: 'C:/path/to/dir' }),
+                Btn({ variant: 'primary', disabled: s.busy, children: s.busy ? 'working…' : 'create', onClick: create })),
+        ].filter(Boolean);
+    };
+});
+
+export const git = makePage((ctx) => {
+    Object.assign(ctx.state, { cwd: null, status: null, log: null, worktrees: null, diff: null, activeFile: null, diffLoading: false, note: null });
+    async function load() {
+        try {
+            const proj = await api('/api/projects').catch(() => null);
+            const active = proj && proj.active;
+            const cwd = (active && typeof active === 'object' ? active.path : null) || ctx.state.cwd || '';
+            const qs = '?cwd=' + encodeURIComponent(cwd);
+            const [status, log, worktrees] = await Promise.all([
+                api('/api/git/status' + qs).catch((e) => ({ _err: e })),
+                api('/api/git/log' + qs + '&limit=20').catch((e) => ({ _err: e })),
+                api('/api/worktree' + qs).catch((e) => ({ _err: e })),
+            ]);
+            ctx.set({ loading: false, cwd, status, log, worktrees, error: null });
+        } catch (e) { ctx.set({ loading: false, error: e }); }
+    }
+    async function openDiff(file) {
+        ctx.set({ activeFile: file.path, diffLoading: true, diff: null });
+        try {
+            const qs = '?cwd=' + encodeURIComponent(ctx.state.cwd || '') + '&file=' + encodeURIComponent(file.path);
+            const res = await api('/api/git/diff' + qs);
+            ctx.set({ diff: res, diffLoading: false });
+        } catch (e) { ctx.set({ note: { kind: 'error', msg: String(e.message || e) }, diffLoading: false }); }
+    }
+    async function createWorktree() {
+        const path = (ctx.state.newWtPath || '').trim();
+        const branch = (ctx.state.newWtBranch || '').trim();
+        if (!path) { ctx.set({ note: { kind: 'warn', msg: 'path required' } }); return; }
+        ctx.set({ busy: true, note: null });
+        try {
+            await api('/api/worktree', { method: 'POST', body: { cwd: ctx.state.cwd || '', path, branch: branch || undefined } });
+            ctx.state.newWtPath = ''; ctx.state.newWtBranch = '';
+            await load();
+        } catch (e) { ctx.set({ note: { kind: 'error', msg: String(e.message || e) } }); }
+        ctx.set({ busy: false });
+    }
+    load();
+    return () => {
+        const s = ctx.state;
+        if (s.loading) return loadingState('loading git status…');
+        if (s.error && !s.status) return errorState(s.error, load);
+        const statusFailed = s.status && s.status._err;
+        const logFailed = s.log && s.log._err;
+        const wtFailed = s.worktrees && s.worktrees._err;
+        const files = statusFailed ? [] : (s.status && s.status.files) || [];
+        const commits = logFailed ? [] : (s.log && s.log.commits) || s.log || [];
+        const worktrees = wtFailed ? [] : (s.worktrees && s.worktrees.worktrees) || s.worktrees || [];
+        const current = Array.isArray(worktrees) ? (worktrees.find(w => w.path === s.cwd) || {}).path : undefined;
+        return [
+            PageHeader({ title: 'git', lede: s.cwd || 'active project' }),
+            noteAlert(s.note),
+            statusFailed ? refreshError(statusFailed) : null,
+            section('worktrees',
+                WorktreeSwitcher({
+                    worktrees: Array.isArray(worktrees) ? worktrees : [],
+                    current,
+                    onSwitch: () => {},
+                    onCreate: () => ctx.set({ showWtForm: !s.showWtForm }),
+                }),
+                s.showWtForm ? h('div', { class: 'fd-row-actions' },
+                    TextField({ label: 'path', value: s.newWtPath, onInput: (v) => { s.newWtPath = v; }, placeholder: '/path/to/worktree' }),
+                    TextField({ label: 'branch (optional)', value: s.newWtBranch, onInput: (v) => { s.newWtBranch = v; }, placeholder: 'feature/x' }),
+                    Btn({ variant: 'primary', disabled: s.busy, children: s.busy ? 'working…' : 'create', onClick: createWorktree })) : null),
+            section('changed files',
+                statusFailed ? errorState(statusFailed) : GitStatusPanel({ files, onFileClick: openDiff, active: s.activeFile })),
+            section('diff' + (s.activeFile ? ' · ' + s.activeFile : ''),
+                s.diffLoading ? loadingState('loading diff…')
+                    : s.diff ? GitDiffView({ diff: s.diff.diff || s.diff, filename: s.activeFile })
+                        : emptyState('select a file to view its diff')),
+            section('log',
+                logFailed ? errorState(logFailed)
+                    : commits.length
+                        ? Table({ headers: ['sha', 'message', 'author', 'date'], rows: commits.slice(0, 20).map(c => [String(c.sha || c.hash || '').slice(0, 8), truncSpan(c.message || c.subject, TRUNC_SUB), c.author || '', c.date ? fmtAgo(c.date) : ''])})
+                        : emptyState('no commits')),
+        ].filter(Boolean);
+    };
+});