anentrypoint-design 0.0.121 → 0.0.124

package/src/kits/os/freddie/pages-chat.js

@@ -1,143 +1,143 @@
-// Chat page — its own module because of SSE plumbing weight.
-import * as webjsx from '../../../../vendor/webjsx/index.js';
-import * as components from '../../../components.js';
-import { getRecentPaths, saveRecentPath, skillLabel, renderChatMessages } from './helpers.js';
-
-const h = webjsx.createElement;
-const { Panel, Receipt, Chip } = components;
-
-function parseSseEvents(text) {
-    const events = [];
-    let curEvent = null, curData = '';
-    for (const line of text.split('\n')) {
-        if (line.startsWith('event: ')) { curEvent = line.slice(7).trim(); }
-        else if (line.startsWith('data: ')) { curData = line.slice(6).trim(); }
-        else if (line === '' && curEvent) {
-            try { events.push({ event: curEvent, data: JSON.parse(curData) }); } catch {}
-            curEvent = null; curData = '';
-        }
-    }
-    return events;
-}
-
-export function makeChatPage(ctx) {
-    return async function chat(h0) {
-        const root = ctx.root;
-        const skills = [...h0.pi.skills.values()];
-        const providers = await fetch('/api/providers').then(r => r.json()).catch(() => []);
-        const configuredProviders = providers.filter(p => p.configured);
-
-        const chatState = window.__fd_chatState = window.__fd_chatState || {
-            cwd: '', skill: '', provider: '', model: '', messages: [], busy: false, sessionId: null,
-        };
-        if (!chatState.cwd) chatState.cwd = (getRecentPaths()[0] || '');
-
-        const getMsgsContainer = () => root.querySelector('#fd-chat-msgs');
-
-        const newSession = () => {
-            if (chatState.busy) return;
-            chatState.messages = [];
-            chatState.sessionId = null;
-            renderChatMessages(getMsgsContainer(), chatState.messages);
-        };
-
-        const sendChat = async (ev) => {
-            ev.preventDefault();
-            if (chatState.busy) return;
-            const promptEl = ev.target.elements.prompt;
-            const prompt = promptEl.value.trim();
-            if (!prompt) return;
-            chatState.messages.push({ role: 'user', content: prompt });
-            promptEl.value = '';
-            promptEl.style.height = 'auto';
-            chatState.busy = true;
-            saveRecentPath(chatState.cwd);
-            renderChatMessages(getMsgsContainer(), chatState.messages);
-            try {
-                const body = { prompt, cwd: chatState.cwd || undefined, skill: chatState.skill || undefined, provider: chatState.provider || undefined, model: chatState.model || undefined, sessionId: chatState.sessionId || undefined };
-                const resp = await fetch('/api/chat', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) });
-                const text = await resp.text();
-                const events = parseSseEvents(text);
-                let assistantContent = '';
-                for (const { event, data } of events) {
-                    if (event === 'start' && data.sessionId) chatState.sessionId = data.sessionId;
-                    if (event === 'done' && data.sessionId) chatState.sessionId = data.sessionId;
-                    if (event === 'message') {
-                        const role = data.role;
-                        if (role === 'assistant') {
-                            const content = Array.isArray(data.content) ? data.content : [{ type: 'text', text: String(data.content || '') }];
-                            for (const block of content) {
-                                if (block.type === 'text') assistantContent += block.text;
-                                if (block.type === 'tool_use') {
-                                    if (assistantContent) { chatState.messages.push({ role: 'assistant', content: assistantContent }); assistantContent = ''; }
-                                    const argsSummary = JSON.stringify(block.input || {}).slice(0, 60);
-                                    chatState.messages.push({ role: 'tool', name: block.name, argsSummary, content: JSON.stringify(block.input || {}, null, 2) });
-                                }
-                            }
-                        } else if (role === 'tool') {
-                            const tc = Array.isArray(data.content) ? data.content[0] : data;
-                            chatState.messages.push({ role: 'tool', name: 'result', argsSummary: '', content: String(tc?.content || tc?.text || JSON.stringify(tc)) });
-                        }
-                    }
-                    if (event === 'done' && data.result) { if (!assistantContent) assistantContent = data.result; }
-                    if (event === 'error') assistantContent = 'error: ' + (data.error || 'unknown');
-                }
-                if (assistantContent) chatState.messages.push({ role: 'assistant', content: assistantContent });
-                if (!events.length) chatState.messages.push({ role: 'assistant', content: '(no response)' });
-            } catch (e) {
-                chatState.messages.push({ role: 'assistant', content: 'error: ' + e.message });
-            }
-            chatState.busy = false;
-            renderChatMessages(getMsgsContainer(), chatState.messages);
-        };
-
-        const recentPaths = getRecentPaths();
-        const datalistId = 'fd-cwd-list';
-        const byCat = skills.reduce((a, s) => { const c = s.category || 'other'; (a[c] = a[c] || []).push(s); return a; }, {});
-
-        setTimeout(() => renderChatMessages(getMsgsContainer(), chatState.messages), 50);
-
-        const selSkill = h('select', { name: 'skill', onchange: (ev) => { chatState.skill = ev.target.value; } },
-            h('option', { value: '' }, '— no skill —'),
-            ...Object.entries(byCat).map(([cat, ss]) =>
-                h('optgroup', { label: cat },
-                    ...ss.map(s => h('option', { value: s.name, selected: chatState.skill === s.name ? 'true' : null, title: s.description || s.name }, skillLabel(s)))
-                )));
-
-        const selProv = h('select', { name: 'provider', onchange: (ev) => { chatState.provider = ev.target.value; } },
-            h('option', { value: '' }, configuredProviders.length ? '— auto —' : '— no providers configured —'),
-            ...configuredProviders.map(p => h('option', { value: p.name, selected: chatState.provider === p.name ? 'true' : null }, (p.available ? '● ' : '○ ') + p.name)));
-
-        return [
-            Panel({
-                title: 'chat',
-                right: h('button', { class: 'btn-primary fd-btn-mini', onclick: (ev) => { ev.preventDefault(); newSession(); }, disabled: chatState.busy ? 'true' : null }, '+ new session'),
-                children: [
-                    h('datalist', { id: datalistId }, ...recentPaths.map(p => h('option', { value: p }))),
-                    h('form', { class: 'row-form fd-chat-form', onsubmit: sendChat },
-                        h('div', { class: 'fd-chat-field' },
-                            h('label', {}, 'working directory'),
-                            h('input', { name: 'cwd', type: 'text', placeholder: 'e.g. C:/dev/myproject or /home/user/project', value: chatState.cwd, list: datalistId, oninput: (ev) => { chatState.cwd = ev.target.value; } })),
-                        h('div', { class: 'fd-chat-row' },
-                            h('div', { class: 'fd-chat-field fd-chat-field-grow' }, h('label', {}, 'skill'), selSkill),
-                            h('div', { class: 'fd-chat-field fd-chat-field-grow' }, h('label', {}, 'provider'), selProv),
-                            h('div', { class: 'fd-chat-field fd-chat-field-grow' }, h('label', {}, 'model (optional)'),
-                                h('input', { name: 'model', type: 'text', placeholder: configuredProviders.find(p => p.name === chatState.provider)?.defaultModel || 'default', value: chatState.model, oninput: (ev) => { chatState.model = ev.target.value; } }))),
-                        h('div', { class: 'fd-chat-submit' },
-                            h('textarea', { name: 'prompt', placeholder: 'describe what you want to do in the working directory…', rows: 4,
-                                oninput: (ev) => { ev.target.style.height = 'auto'; ev.target.style.height = Math.min(ev.target.scrollHeight, 240) + 'px'; } }),
-                            h('button', { type: 'submit', class: 'btn-primary', disabled: chatState.busy ? 'true' : null }, chatState.busy ? '…' : 'send'))),
-                    h('div', { id: 'fd-chat-msgs', class: 'fd-chatlog' }),
-                ],
-            }),
-            configuredProviders.length === 0
-                ? Panel({ title: 'no providers configured', children: Receipt({ rows: [
-                    ['set API key', 'go to keys tab, click a provider chip to set its key'],
-                    ['then reload', 'refresh this page to see providers here'],
-                    ['or use acptoapi', 'run acptoapi server on localhost:4800 for local LLMs'],
-                ] }) })
-                : Panel({ title: 'configured providers', children: h('div', { class: 'fd-chip-wrap' },
-                    ...providers.map(p => Chip({ tone: p.configured ? (p.available ? 'ok' : 'warn') : 'miss', children: p.name + (p.configured ? (p.available ? ' ●' : ' ○') : '') }))) }),
-        ];
-    };
-}
+// Chat page — its own module because of SSE plumbing weight.
+import * as webjsx from '../../../../vendor/webjsx/index.js';
+import * as components from '../../../components.js';
+import { getRecentPaths, saveRecentPath, skillLabel, renderChatMessages } from './helpers.js';
+
+const h = webjsx.createElement;
+const { Panel, Receipt, Chip } = components;
+
+function parseSseEvents(text) {
+    const events = [];
+    let curEvent = null, curData = '';
+    for (const line of text.split('\n')) {
+        if (line.startsWith('event: ')) { curEvent = line.slice(7).trim(); }
+        else if (line.startsWith('data: ')) { curData = line.slice(6).trim(); }
+        else if (line === '' && curEvent) {
+            try { events.push({ event: curEvent, data: JSON.parse(curData) }); } catch {}
+            curEvent = null; curData = '';
+        }
+    }
+    return events;
+}
+
+export function makeChatPage(ctx) {
+    return async function chat(h0) {
+        const root = ctx.root;
+        const skills = [...h0.pi.skills.values()];
+        const providers = await fetch('/api/providers').then(r => r.json()).catch(() => []);
+        const configuredProviders = providers.filter(p => p.configured);
+
+        const chatState = window.__fd_chatState = window.__fd_chatState || {
+            cwd: '', skill: '', provider: '', model: '', messages: [], busy: false, sessionId: null,
+        };
+        if (!chatState.cwd) chatState.cwd = (getRecentPaths()[0] || '');
+
+        const getMsgsContainer = () => root.querySelector('#fd-chat-msgs');
+
+        const newSession = () => {
+            if (chatState.busy) return;
+            chatState.messages = [];
+            chatState.sessionId = null;
+            renderChatMessages(getMsgsContainer(), chatState.messages);
+        };
+
+        const sendChat = async (ev) => {
+            ev.preventDefault();
+            if (chatState.busy) return;
+            const promptEl = ev.target.elements.prompt;
+            const prompt = promptEl.value.trim();
+            if (!prompt) return;
+            chatState.messages.push({ role: 'user', content: prompt });
+            promptEl.value = '';
+            promptEl.style.height = 'auto';
+            chatState.busy = true;
+            saveRecentPath(chatState.cwd);
+            renderChatMessages(getMsgsContainer(), chatState.messages);
+            try {
+                const body = { prompt, cwd: chatState.cwd || undefined, skill: chatState.skill || undefined, provider: chatState.provider || undefined, model: chatState.model || undefined, sessionId: chatState.sessionId || undefined };
+                const resp = await fetch('/api/chat', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) });
+                const text = await resp.text();
+                const events = parseSseEvents(text);
+                let assistantContent = '';
+                for (const { event, data } of events) {
+                    if (event === 'start' && data.sessionId) chatState.sessionId = data.sessionId;
+                    if (event === 'done' && data.sessionId) chatState.sessionId = data.sessionId;
+                    if (event === 'message') {
+                        const role = data.role;
+                        if (role === 'assistant') {
+                            const content = Array.isArray(data.content) ? data.content : [{ type: 'text', text: String(data.content || '') }];
+                            for (const block of content) {
+                                if (block.type === 'text') assistantContent += block.text;
+                                if (block.type === 'tool_use') {
+                                    if (assistantContent) { chatState.messages.push({ role: 'assistant', content: assistantContent }); assistantContent = ''; }
+                                    const argsSummary = JSON.stringify(block.input || {}).slice(0, 60);
+                                    chatState.messages.push({ role: 'tool', name: block.name, argsSummary, content: JSON.stringify(block.input || {}, null, 2) });
+                                }
+                            }
+                        } else if (role === 'tool') {
+                            const tc = Array.isArray(data.content) ? data.content[0] : data;
+                            chatState.messages.push({ role: 'tool', name: 'result', argsSummary: '', content: String(tc?.content || tc?.text || JSON.stringify(tc)) });
+                        }
+                    }
+                    if (event === 'done' && data.result) { if (!assistantContent) assistantContent = data.result; }
+                    if (event === 'error') assistantContent = 'error: ' + (data.error || 'unknown');
+                }
+                if (assistantContent) chatState.messages.push({ role: 'assistant', content: assistantContent });
+                if (!events.length) chatState.messages.push({ role: 'assistant', content: '(no response)' });
+            } catch (e) {
+                chatState.messages.push({ role: 'assistant', content: 'error: ' + e.message });
+            }
+            chatState.busy = false;
+            renderChatMessages(getMsgsContainer(), chatState.messages);
+        };
+
+        const recentPaths = getRecentPaths();
+        const datalistId = 'fd-cwd-list';
+        const byCat = skills.reduce((a, s) => { const c = s.category || 'other'; (a[c] = a[c] || []).push(s); return a; }, {});
+
+        setTimeout(() => renderChatMessages(getMsgsContainer(), chatState.messages), 50);
+
+        const selSkill = h('select', { name: 'skill', onchange: (ev) => { chatState.skill = ev.target.value; } },
+            h('option', { value: '' }, '— no skill —'),
+            ...Object.entries(byCat).map(([cat, ss]) =>
+                h('optgroup', { label: cat },
+                    ...ss.map(s => h('option', { value: s.name, selected: chatState.skill === s.name ? 'true' : null, title: s.description || s.name }, skillLabel(s)))
+                )));
+
+        const selProv = h('select', { name: 'provider', onchange: (ev) => { chatState.provider = ev.target.value; } },
+            h('option', { value: '' }, configuredProviders.length ? '— auto —' : '— no providers configured —'),
+            ...configuredProviders.map(p => h('option', { value: p.name, selected: chatState.provider === p.name ? 'true' : null }, (p.available ? '● ' : '○ ') + p.name)));
+
+        return [
+            Panel({
+                title: 'chat',
+                right: h('button', { class: 'btn-primary fd-btn-mini', onclick: (ev) => { ev.preventDefault(); newSession(); }, disabled: chatState.busy ? 'true' : null }, '+ new session'),
+                children: [
+                    h('datalist', { id: datalistId }, ...recentPaths.map(p => h('option', { value: p }))),
+                    h('form', { class: 'row-form fd-chat-form', onsubmit: sendChat },
+                        h('div', { class: 'fd-chat-field' },
+                            h('label', {}, 'working directory'),
+                            h('input', { name: 'cwd', type: 'text', placeholder: 'e.g. C:/dev/myproject or /home/user/project', value: chatState.cwd, list: datalistId, oninput: (ev) => { chatState.cwd = ev.target.value; } })),
+                        h('div', { class: 'fd-chat-row' },
+                            h('div', { class: 'fd-chat-field fd-chat-field-grow' }, h('label', {}, 'skill'), selSkill),
+                            h('div', { class: 'fd-chat-field fd-chat-field-grow' }, h('label', {}, 'provider'), selProv),
+                            h('div', { class: 'fd-chat-field fd-chat-field-grow' }, h('label', {}, 'model (optional)'),
+                                h('input', { name: 'model', type: 'text', placeholder: configuredProviders.find(p => p.name === chatState.provider)?.defaultModel || 'default', value: chatState.model, oninput: (ev) => { chatState.model = ev.target.value; } }))),
+                        h('div', { class: 'fd-chat-submit' },
+                            h('textarea', { name: 'prompt', placeholder: 'describe what you want to do in the working directory…', rows: 4,
+                                oninput: (ev) => { ev.target.style.height = 'auto'; ev.target.style.height = Math.min(ev.target.scrollHeight, 240) + 'px'; } }),
+                            h('button', { type: 'submit', class: 'btn-primary', disabled: chatState.busy ? 'true' : null }, chatState.busy ? '…' : 'send'))),
+                    h('div', { id: 'fd-chat-msgs', class: 'fd-chatlog' }),
+                ],
+            }),
+            configuredProviders.length === 0
+                ? Panel({ title: 'no providers configured', children: Receipt({ rows: [
+                    ['set API key', 'go to keys tab, click a provider chip to set its key'],
+                    ['then reload', 'refresh this page to see providers here'],
+                    ['or use acptoapi', 'run acptoapi server on localhost:4800 for local LLMs'],
+                ] }) })
+                : Panel({ title: 'configured providers', children: h('div', { class: 'fd-chip-wrap' },
+                    ...providers.map(p => Chip({ tone: p.configured ? (p.available ? 'ok' : 'warn') : 'miss', children: p.name + (p.configured ? (p.available ? ' ●' : ' ○') : '') }))) }),
+        ];
+    };
+}

package/src/kits/os/freddie/pages-core.js

@@ -1,101 +1,101 @@
-// Core freddie pages: projects, home, sessions, agents, logs.
-import * as webjsx from '../../../../vendor/webjsx/index.js';
-import * as components from '../../../components.js';
-import { pre, form, skillLabel } from './helpers.js';
-
-const h = webjsx.createElement;
-const { Panel, Row, Hero, Receipt, Kpi, Table, EmptyState } = components;
-
-export function makeCorePages(ctx) {
-    return {
-        async projects(h0) {
-            const list = h0.pi.projects.list();
-            const activeProj = (typeof h0.pi.projects.active === 'function') ? h0.pi.projects.active() : null;
-            const rows = list.map(p => Row({
-                key: p.name,
-                code: p.name === activeProj?.name ? '●' : '○',
-                title: p.name + (p.name === activeProj?.name ? '  (active)' : ''),
-                meta: p.path,
-                onClick: () => { if (p.name !== activeProj?.name) try { h0.pi.projects.setActive(p.name); ctx.rerender(); } catch (e) { alert(e.message); } },
-            }));
-            return [
-                Hero({ title: 'projects', body: 'each project is its own ~/.freddie home: separate sessions, agents, skills, config, env, cron, batches.', accent: activeProj ? 'active · ' + activeProj.name : 'no active project' }),
-                Kpi({ items: [[list.length, 'projects'], [activeProj?.name || '—', 'active'], [activeProj?.path?.length > 30 ? '…' + activeProj.path.slice(-28) : (activeProj?.path || '—'), 'path']] }),
-                Panel({ title: 'add a project', children: form({
-                    fields: [{ name: 'name', placeholder: 'project name', required: true }, { name: 'path', placeholder: '/abs/path' }],
-                    submit: 'add',
-                    onSubmit: (ev) => { try { h0.pi.projects.create({ name: ev.target.elements.name.value, path: ev.target.elements.path.value }); ctx.rerender(); } catch (e) { alert(e.message); } },
-                }) }),
-                Panel({ title: 'all projects', count: list.length, children: rows.length ? rows : EmptyState({ text: 'no projects', glyph: '◆' }) }),
-                Panel({ title: 'how encapsulation works', children: Receipt({ rows: [
-                    ['sessions db', '<project>/sessions.db'],
-                    ['config', '<project>/config.json'],
-                    ['skills', '<project>/skills/'],
-                    ['plugins', '<project>/plugins/'],
-                    ['cron', '<project>/cron.db'],
-                    ['batches', '<project>/batches/'],
-                    ['logs', '<project>/logs/'],
-                    ['auth', '<project>/auth.json'],
-                ] }) }),
-            ];
-        },
-        async home(h0) {
-            const sessions = await h0.pi.sessions.list();
-            const tools = h0.pi.tools.size;
-            const skills = h0.pi.skills.size;
-            const health = (typeof h0.pi.health === 'function') ? h0.pi.health() : { ok: true };
-            return [
-                Hero({ title: 'freddie', body: 'open js agent harness — pi-mono · xstate · floosie · anentrypoint-design.', accent: h0.version || 'web' }),
-                Kpi({ items: [[sessions.length, 'sessions'], [tools, 'tools'], [skills, 'skills']] }),
-                Panel({ title: 'quick start', children: Receipt({ rows: [
-                    ['open chat',   "click 'chat' in sidebar — set a working directory and pick a skill"],
-                    ['pick skill',  "software dev, research, planning — shown with descriptions"],
-                    ['pick model',  "select a configured provider + model in the chat bar"],
-                    ['list tools',  '/tools in chat → tools tab'],
-                    ['set api key', 'keys tab → click chip to set value'],
-                    ['add cron',    'cron tab → form'],
-                ] }) }),
-                Panel({ title: 'host', children: Receipt({ rows: Object.entries(health).map(([k, v]) => [k, String(v)]) }) }),
-            ];
-        },
-        async sessions(h0) {
-            const list = await h0.pi.sessions.list();
-            const rows = list.map(s => {
-                const cont = h('button', {
-                    class: 'btn-primary fd-btn-mini',
-                    onclick: async () => {
-                        const msgs = await h0.pi.sessions.getMessages(s.id);
-                        const cs = window.__fd_chatState = window.__fd_chatState || { messages: [], busy: false, sessionId: null, cwd: '', skill: '', provider: '', model: '' };
-                        cs.sessionId = s.id;
-                        cs.messages = msgs.map(m => ({ role: m.role, content: String(m.content || '') }));
-                        if (s.cwd) cs.cwd = s.cwd;
-                        if (s.skill) cs.skill = s.skill;
-                        if (typeof window.__fd_nav === 'function') window.__fd_nav('chat');
-                    },
-                }, 'continue');
-                return [(s.id || '').slice(0, 8), s.title || '—', s.platform || '—', s.model || '—', s.cwd ? s.cwd.slice(-30) : '—', s.skill ? skillLabel({ name: s.skill }) : '—', cont];
-            });
-            return [
-                Kpi({ items: [[list.length, 'sessions']] }),
-                Panel({ title: 'recent sessions', count: list.length, children: list.length === 0
-                    ? EmptyState({ text: 'no sessions yet — open chat and send a message', glyph: '✉' })
-                    : Table({ headers: ['id', 'title', 'platform', 'model', 'cwd', 'skill', ''], rows }) }),
-            ];
-        },
-        async agents(h0) {
-            const a = (typeof h0.pi.agents === 'function') ? await h0.pi.agents() : { count: 0, turns: 0, active: null };
-            return [
-                Kpi({ items: [[a.count || 0, 'active'], [a.turns || 0, 'turns']] }),
-                Panel({ title: 'agent overview', children: Receipt({ rows: [
-                    ['total turns', String(a.turns || 0)],
-                    ['active session', a.active || '(none)'],
-                    ['last activity', a.last_activity ? new Date(a.last_activity).toLocaleString() : '—'],
-                ] }) }),
-            ];
-        },
-        async logs(h0) {
-            const dbg = (typeof h0.pi.debug === 'function') ? h0.pi.debug() : { note: 'no debug surface' };
-            return [Panel({ title: 'host debug snapshot', children: pre(dbg) })];
-        },
-    };
-}
+// Core freddie pages: projects, home, sessions, agents, logs.
+import * as webjsx from '../../../../vendor/webjsx/index.js';
+import * as components from '../../../components.js';
+import { pre, form, skillLabel } from './helpers.js';
+
+const h = webjsx.createElement;
+const { Panel, Row, Hero, Receipt, Kpi, Table, EmptyState } = components;
+
+export function makeCorePages(ctx) {
+    return {
+        async projects(h0) {
+            const list = h0.pi.projects.list();
+            const activeProj = (typeof h0.pi.projects.active === 'function') ? h0.pi.projects.active() : null;
+            const rows = list.map(p => Row({
+                key: p.name,
+                code: p.name === activeProj?.name ? '●' : '○',
+                title: p.name + (p.name === activeProj?.name ? '  (active)' : ''),
+                meta: p.path,
+                onClick: () => { if (p.name !== activeProj?.name) try { h0.pi.projects.setActive(p.name); ctx.rerender(); } catch (e) { alert(e.message); } },
+            }));
+            return [
+                Hero({ title: 'projects', body: 'each project is its own ~/.freddie home: separate sessions, agents, skills, config, env, cron, batches.', accent: activeProj ? 'active · ' + activeProj.name : 'no active project' }),
+                Kpi({ items: [[list.length, 'projects'], [activeProj?.name || '—', 'active'], [activeProj?.path?.length > 30 ? '…' + activeProj.path.slice(-28) : (activeProj?.path || '—'), 'path']] }),
+                Panel({ title: 'add a project', children: form({
+                    fields: [{ name: 'name', placeholder: 'project name', required: true }, { name: 'path', placeholder: '/abs/path' }],
+                    submit: 'add',
+                    onSubmit: (ev) => { try { h0.pi.projects.create({ name: ev.target.elements.name.value, path: ev.target.elements.path.value }); ctx.rerender(); } catch (e) { alert(e.message); } },
+                }) }),
+                Panel({ title: 'all projects', count: list.length, children: rows.length ? rows : EmptyState({ text: 'no projects', glyph: '◆' }) }),
+                Panel({ title: 'how encapsulation works', children: Receipt({ rows: [
+                    ['sessions db', '<project>/sessions.db'],
+                    ['config', '<project>/config.json'],
+                    ['skills', '<project>/skills/'],
+                    ['plugins', '<project>/plugins/'],
+                    ['cron', '<project>/cron.db'],
+                    ['batches', '<project>/batches/'],
+                    ['logs', '<project>/logs/'],
+                    ['auth', '<project>/auth.json'],
+                ] }) }),
+            ];
+        },
+        async home(h0) {
+            const sessions = await h0.pi.sessions.list();
+            const tools = h0.pi.tools.size;
+            const skills = h0.pi.skills.size;
+            const health = (typeof h0.pi.health === 'function') ? h0.pi.health() : { ok: true };
+            return [
+                Hero({ title: 'freddie', body: 'open js agent harness — pi-mono · xstate · floosie · anentrypoint-design.', accent: h0.version || 'web' }),
+                Kpi({ items: [[sessions.length, 'sessions'], [tools, 'tools'], [skills, 'skills']] }),
+                Panel({ title: 'quick start', children: Receipt({ rows: [
+                    ['open chat',   "click 'chat' in sidebar — set a working directory and pick a skill"],
+                    ['pick skill',  "software dev, research, planning — shown with descriptions"],
+                    ['pick model',  "select a configured provider + model in the chat bar"],
+                    ['list tools',  '/tools in chat → tools tab'],
+                    ['set api key', 'keys tab → click chip to set value'],
+                    ['add cron',    'cron tab → form'],
+                ] }) }),
+                Panel({ title: 'host', children: Receipt({ rows: Object.entries(health).map(([k, v]) => [k, String(v)]) }) }),
+            ];
+        },
+        async sessions(h0) {
+            const list = await h0.pi.sessions.list();
+            const rows = list.map(s => {
+                const cont = h('button', {
+                    class: 'btn-primary fd-btn-mini',
+                    onclick: async () => {
+                        const msgs = await h0.pi.sessions.getMessages(s.id);
+                        const cs = window.__fd_chatState = window.__fd_chatState || { messages: [], busy: false, sessionId: null, cwd: '', skill: '', provider: '', model: '' };
+                        cs.sessionId = s.id;
+                        cs.messages = msgs.map(m => ({ role: m.role, content: String(m.content || '') }));
+                        if (s.cwd) cs.cwd = s.cwd;
+                        if (s.skill) cs.skill = s.skill;
+                        if (typeof window.__fd_nav === 'function') window.__fd_nav('chat');
+                    },
+                }, 'continue');
+                return [(s.id || '').slice(0, 8), s.title || '—', s.platform || '—', s.model || '—', s.cwd ? s.cwd.slice(-30) : '—', s.skill ? skillLabel({ name: s.skill }) : '—', cont];
+            });
+            return [
+                Kpi({ items: [[list.length, 'sessions']] }),
+                Panel({ title: 'recent sessions', count: list.length, children: list.length === 0
+                    ? EmptyState({ text: 'no sessions yet — open chat and send a message', glyph: '✉' })
+                    : Table({ headers: ['id', 'title', 'platform', 'model', 'cwd', 'skill', ''], rows }) }),
+            ];
+        },
+        async agents(h0) {
+            const a = (typeof h0.pi.agents === 'function') ? await h0.pi.agents() : { count: 0, turns: 0, active: null };
+            return [
+                Kpi({ items: [[a.count || 0, 'active'], [a.turns || 0, 'turns']] }),
+                Panel({ title: 'agent overview', children: Receipt({ rows: [
+                    ['total turns', String(a.turns || 0)],
+                    ['active session', a.active || '(none)'],
+                    ['last activity', a.last_activity ? new Date(a.last_activity).toLocaleString() : '—'],
+                ] }) }),
+            ];
+        },
+        async logs(h0) {
+            const dbg = (typeof h0.pi.debug === 'function') ? h0.pi.debug() : { note: 'no debug surface' };
+            return [Panel({ title: 'host debug snapshot', children: pre(dbg) })];
+        },
+    };
+}

package/src/kits/os/freddie/pages-os.js

@@ -1,51 +1,51 @@
-// OS-overlay freddie pages, only mounted when osSurfaces is provided.
-import * as components from '../../../components.js';
-import { pre } from './helpers.js';
-
-const { Panel, Kpi, Table, EmptyState } = components;
-
-export function makeOsPages(ctx) {
-    const { osSurfaces, instance } = ctx;
-    return {
-        async ['os-instances']() {
-            const list = (osSurfaces && osSurfaces.instances && osSurfaces.instances()) || [];
-            const activeId = osSurfaces && osSurfaces.activeInstanceId && osSurfaces.activeInstanceId();
-            return [
-                Kpi({ items: [[list.length, 'instances'], [activeId || '—', 'active']] }),
-                Panel({ title: 'instances', count: list.length, children: list.length === 0
-                    ? EmptyState({ text: 'no instances', glyph: '◫' })
-                    : Table({ headers: ['id', 'active', 'shells', 'windows'],
-                        rows: list.map(i => [i.id, i.id === activeId ? '●' : '', String((i.shells || []).length), String((i.windows || []).length)]) }) }),
-            ];
-        },
-        async ['os-windows']() {
-            const wins = (osSurfaces && osSurfaces.wm && osSurfaces.wm.list && osSurfaces.wm.list()) || [];
-            const focused = osSurfaces && osSurfaces.wm && osSurfaces.wm.focused;
-            return [
-                Kpi({ items: [[wins.length, 'windows'], [focused ? (focused.id || focused.title || '?') : '—', 'focused']] }),
-                Panel({ title: 'windows', count: wins.length, children: wins.length === 0
-                    ? EmptyState({ text: 'no windows open', glyph: '▭' })
-                    : Table({ headers: ['id', 'title', 'min', 'max', 'pos'],
-                        rows: wins.map(w => [w.id || '?', w.title || '', w.min ? '●' : '', w.max ? '●' : '',
-                            (w.el ? `${w.el.offsetLeft},${w.el.offsetTop} ${w.el.offsetWidth}×${w.el.offsetHeight}` : '')]) }) }),
-            ];
-        },
-        async ['os-x']() {
-            const x = osSurfaces && osSurfaces.xServer && osSurfaces.xServer();
-            if (!x) return [Panel({ title: 'x-server', children: EmptyState({ text: 'x-server not running in this instance', glyph: '✕' }) })];
-            return [
-                Kpi({ items: [[x.windows, 'windows'], [x.pixmaps, 'pixmaps'], [x.gcs, 'gcs'], [x.atoms, 'atoms'], [x.cursors, 'cursors']] }),
-                Panel({ title: 'display', children: pre(x) }),
-            ];
-        },
-        async ['os-fs']() {
-            const list = await instance.fs.list('/');
-            return [
-                Kpi({ items: [[list.length, 'paths'], [instance.id, 'instance']] }),
-                Panel({ title: 'paths', count: list.length, children: list.length === 0
-                    ? EmptyState({ text: 'empty fs', glyph: '📁' })
-                    : pre(list.join('\n')) }),
-            ];
-        },
-    };
-}
+// OS-overlay freddie pages, only mounted when osSurfaces is provided.
+import * as components from '../../../components.js';
+import { pre } from './helpers.js';
+
+const { Panel, Kpi, Table, EmptyState } = components;
+
+export function makeOsPages(ctx) {
+    const { osSurfaces, instance } = ctx;
+    return {
+        async ['os-instances']() {
+            const list = (osSurfaces && osSurfaces.instances && osSurfaces.instances()) || [];
+            const activeId = osSurfaces && osSurfaces.activeInstanceId && osSurfaces.activeInstanceId();
+            return [
+                Kpi({ items: [[list.length, 'instances'], [activeId || '—', 'active']] }),
+                Panel({ title: 'instances', count: list.length, children: list.length === 0
+                    ? EmptyState({ text: 'no instances', glyph: '◫' })
+                    : Table({ headers: ['id', 'active', 'shells', 'windows'],
+                        rows: list.map(i => [i.id, i.id === activeId ? '●' : '', String((i.shells || []).length), String((i.windows || []).length)]) }) }),
+            ];
+        },
+        async ['os-windows']() {
+            const wins = (osSurfaces && osSurfaces.wm && osSurfaces.wm.list && osSurfaces.wm.list()) || [];
+            const focused = osSurfaces && osSurfaces.wm && osSurfaces.wm.focused;
+            return [
+                Kpi({ items: [[wins.length, 'windows'], [focused ? (focused.id || focused.title || '?') : '—', 'focused']] }),
+                Panel({ title: 'windows', count: wins.length, children: wins.length === 0
+                    ? EmptyState({ text: 'no windows open', glyph: '▭' })
+                    : Table({ headers: ['id', 'title', 'min', 'max', 'pos'],
+                        rows: wins.map(w => [w.id || '?', w.title || '', w.min ? '●' : '', w.max ? '●' : '',
+                            (w.el ? `${w.el.offsetLeft},${w.el.offsetTop} ${w.el.offsetWidth}×${w.el.offsetHeight}` : '')]) }) }),
+            ];
+        },
+        async ['os-x']() {
+            const x = osSurfaces && osSurfaces.xServer && osSurfaces.xServer();
+            if (!x) return [Panel({ title: 'x-server', children: EmptyState({ text: 'x-server not running in this instance', glyph: '✕' }) })];
+            return [
+                Kpi({ items: [[x.windows, 'windows'], [x.pixmaps, 'pixmaps'], [x.gcs, 'gcs'], [x.atoms, 'atoms'], [x.cursors, 'cursors']] }),
+                Panel({ title: 'display', children: pre(x) }),
+            ];
+        },
+        async ['os-fs']() {
+            const list = await instance.fs.list('/');
+            return [
+                Kpi({ items: [[list.length, 'paths'], [instance.id, 'instance']] }),
+                Panel({ title: 'paths', count: list.length, children: list.length === 0
+                    ? EmptyState({ text: 'empty fs', glyph: '📁' })
+                    : pre(list.join('\n')) }),
+            ];
+        },
+    };
+}