anentrypoint-design 0.0.87 → 0.0.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.87",
+  "version": "0.0.89",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

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

@@ -1,5 +1,5 @@
 import * as webjsx from '../../../vendor/webjsx/index.js';
-import { Panel, Row, Hero, Receipt, Kpi, Table, Form } from '../content.js';
+import { Panel, Hero, Receipt, Kpi, Table, Form } from '../content.js';
 import { Chip } from '../shell.js';
 import { EmptyState } from '../files.js';
 import { skillLabel } from './helpers.js';
@@ -24,7 +24,10 @@ export async function models(h0) {
         const ms = Array.isArray(probeState[p.name]) ? probeState[p.name] : p.models;
         const loading = probeState[p.name] === 'loading';
         if (loading) probedPanels.push(Panel({ title: p.name + ' ⏳', children: h('span', { class: 'fd-muted' }, 'probing…') }));
-        else if (ms && ms.length > 0) probedPanels.push(Panel({ title: p.name + (p.available ? ' ●' : ' ○'), count: ms.length, children: Table({ headers: ['model id'], rows: ms.map(m => [m]) }) }));
+        else if (ms && ms.length > 0) probedPanels.push(Panel({ title: p.name + (p.available ? ' ●' : ' ○'), count: ms.length, children: h('div', { class: 'fd-list fd-list-compact' }, ...ms.map((m, i) => h('div', { key: m, class: 'fd-list-row', 'data-cat': 'preview' },
+            h('span', { class: 'fd-list-code' }, String(i+1).padStart(2,'0')),
+            h('div', { class: 'fd-list-main' }, h('div', { class: 'fd-list-title fd-mono' }, m))
+        ))) }));
         else unprobedRows.push([p.name, p.available ? 'available' : 'unavailable', p.modelsError ? 'error: '+p.modelsError : '—']);
     }
     const modelPanels = [
@@ -64,7 +67,16 @@ export async function cron(h0) {
             ['weekdays 18:00', '0 18 * * 1-5'],
             ['every 15 min', '*/15 * * * *']
         ] }) }),
-        Panel({ title: 'jobs', count: list.length, children: list.length === 0 ? EmptyState({ text: 'no cron jobs — add one with the form above', glyph: '◷' }) : Table({ headers: ['id','cron','prompt','enabled'], rows: list.map(j => [j.id, j.cron, (j.prompt||'').slice(0,40), j.enabled ? 'yes' : 'no']) }) })
+        Panel({ title: 'jobs', count: list.length, children: list.length === 0
+            ? EmptyState({ text: 'no cron jobs — add one with the form above', glyph: '◷' })
+            : h('div', { class: 'fd-list' }, ...list.map(j => h('div', { key: j.id, class: 'fd-list-row', 'data-cat': j.enabled ? 'kit' : 'external' },
+                h('span', { class: 'fd-list-code' }, j.enabled ? '●' : '○'),
+                h('div', { class: 'fd-list-main' },
+                    h('div', { class: 'fd-list-title' }, (j.prompt||'(no prompt)').slice(0,80)),
+                    h('div', { class: 'fd-list-sub' }, j.cron + ' · ' + j.id)
+                ),
+                h('div', { class: 'fd-list-meta' }, h('span', { class: 'fd-list-meta-mono' }, j.enabled ? 'enabled' : 'disabled'))
+            ))) })
     ];
 }
 
@@ -75,7 +87,13 @@ export async function skills(h0) {
         Hero({ title: 'skills', body: 'SKILL.md bundles loaded from ~/.freddie/skills + plugins.', accent: list.length+' loaded' }),
         Kpi({ items: [[list.length,'skills'],[Object.keys(byCat).length,'categories']] }),
         list.length === 0 ? EmptyState({ text: 'no skills — add SKILL.md files to ~/.freddie/skills/', glyph: '◈' }) : null,
-        ...Object.entries(byCat).map(([cat, ss]) => Panel({ title: cat, count: ss.length, children: Table({ headers: ['name','description'], rows: ss.map(s => [skillLabel(s), (s.description||'').slice(0,120)]) }) }))
+        ...Object.entries(byCat).map(([cat, ss]) => Panel({ title: cat, count: ss.length, children: h('div', { class: 'fd-list' }, ...ss.map((s, i) => h('div', { key: s.name, class: 'fd-list-row', 'data-cat': cat === 'creative' ? 'preview' : cat === 'software-development' ? 'kit' : cat === 'planning' ? 'doc' : cat === 'ops' ? 'external' : 'doc' },
+            h('span', { class: 'fd-list-code' }, String(i+1).padStart(2,'0')),
+            h('div', { class: 'fd-list-main' },
+                h('div', { class: 'fd-list-title' }, skillLabel(s)),
+                s.description ? h('div', { class: 'fd-list-sub' }, (s.description||'').slice(0,140)) : null
+            )
+        ))) }))
     ].filter(Boolean);
 }
 
@@ -114,62 +132,20 @@ export async function tools(h0) {
         Hero({ title: 'tools', body: 'every tool the agent can call. param count + required env per row.', accent: list.length+' tools' }),
         Kpi({ items: [[list.length,'tools'],[filtered.length,'shown'],[Object.keys(bySet).length,'toolsets']] }),
         Panel({ title: 'filter', right: search, children: filtered.length === 0 ? EmptyState({ text: 'no matches for "'+f.q+'"', glyph: '⌕' }) : h('span', { class: 'fd-muted' }, filtered.length+' / '+list.length+' tools shown') }),
-        ...Object.entries(bySet).map(([ts, items]) => Panel({ title: 'toolset · '+ts, count: items.length, children: items.map(t => {
+        ...Object.entries(bySet).map(([ts, items]) => Panel({ title: 'toolset · '+ts, count: items.length, children: h('div', { class: 'fd-list' }, ...items.map(t => {
             const params = t.schema?.parameters?.properties ? Object.keys(t.schema.parameters.properties).length : 0;
             const reqEnv = Array.isArray(t.requiresEnv) ? t.requiresEnv : [];
-            const meta = h('span', { class: 'fd-tool-meta' },
-                params > 0 ? Chip({ tone: 'neutral', children: params+' params' }) : null,
-                ...reqEnv.map(k => Chip({ tone: envIsSet(k) ? 'ok' : 'miss', children: k }))
-            );
-            return Row({ key: t.name, code: '⚒', title: t.name, sub: (t.description || (t.schema && t.schema.description) || '').slice(0,80), meta });
-        }) }))
+            return h('div', { key: t.name, class: 'fd-list-row', 'data-cat': 'kit' },
+                h('span', { class: 'fd-list-code' }, '⚒'),
+                h('div', { class: 'fd-list-main' },
+                    h('div', { class: 'fd-list-title fd-mono' }, t.name),
+                    h('div', { class: 'fd-list-sub' }, (t.description || (t.schema && t.schema.description) || '').slice(0,120))
+                ),
+                h('div', { class: 'fd-list-meta' },
+                    params > 0 ? Chip({ tone: 'neutral', children: params+' params' }) : null,
+                    ...reqEnv.map(k => Chip({ tone: envIsSet(k) ? 'ok' : 'miss', children: k }))
+                ));
+        })) }))
     ];
 }
 
-export async function batch(h0) {
-    const results = window.__fd_batchResults = window.__fd_batchResults || [];
-    const status = window.__fd_batchStatus = window.__fd_batchStatus || { running: false, error: null };
-    const onSubmit = async ev => {
-        const prompts = ev.target.elements.prompts.value.split('\n').map(s => s.trim()).filter(Boolean);
-        if (!prompts.length) return;
-        status.running = true; status.error = null; window.__fd_batchResults = [];
-        if (typeof window.__fd_nav === 'function') window.__fd_nav('batch');
-        try {
-            const r = await h0.pi.batch.run(prompts, Number(ev.target.elements.concurrency.value) || 4);
-            const arr = Array.isArray(r) ? r : (r && typeof r === 'object' ? Object.entries(r).map(([k, v]) => ({ prompt: k, result: v })) : []);
-            window.__fd_batchResults = arr;
-        } catch (e) { status.error = e.message || String(e); }
-        status.running = false;
-        if (typeof window.__fd_nav === 'function') window.__fd_nav('batch');
-    };
-    const resPanel = status.running ? Panel({ title: 'results', children: h('span', {}, 'running…') })
-        : status.error ? Panel({ title: 'results', children: h('span', { class: 'fd-muted' }, 'error: '+status.error) })
-        : results.length === 0 ? Panel({ title: 'results', children: EmptyState({ text: 'no results yet', glyph: '⊞' }) })
-        : Panel({ title: 'results', count: results.length, children: Table({ headers: ['#','prompt','result','status'], rows: results.map((it, i) => [String(i+1), (it.prompt||'').slice(0,60), (it.result||it.error||'').slice(0,120), it.error ? 'error' : 'ok']) }) });
-    return [
-        Hero({ title: 'batch', body: 'run many prompts in parallel. one per line.', accent: results.length ? results.length+' results' : 'idle' }),
-        Panel({ title: 'run batch', children: Form({ fields: [
-            { name: 'prompts', kind: 'textarea', placeholder: 'one prompt per line', rows: 6 },
-            { name: 'concurrency', type: 'number', value: '4' }
-        ], submit: 'run', onSubmit }) }),
-        resPanel
-    ];
-}
-
-export async function gateway(h0) {
-    const platforms = typeof h0.pi.gateway?.platforms === 'function' ? h0.pi.gateway.platforms() : [];
-    const active = platforms.filter(p => p.enabled);
-    const envIsSet = k => typeof h0.pi.env?.isSet === 'function' ? h0.pi.env.isSet(k) : false;
-    return [
-        Hero({ title: 'gateway', body: 'webhook + bot platforms. each adapter declares required env keys.', accent: active.length+' / '+platforms.length+' active' }),
-        Kpi({ items: [[platforms.length,'platforms'],[active.length,'active']] }),
-        Panel({ title: 'platforms', count: platforms.length, right: active.length > 0 ? Chip({ tone: 'ok', children: active.length+' active' }) : Chip({ tone: 'miss', children: 'none active' }),
-            children: platforms.length === 0 ? EmptyState({ text: 'no platforms registered', glyph: '⇌' }) : platforms.map(p => {
-                const reqEnv = Array.isArray(p.requiresEnv) ? p.requiresEnv : [];
-                const setN = reqEnv.filter(envIsSet).length;
-                const envSummary = reqEnv.length === 0 ? '' : setN === reqEnv.length ? '✓ env ready' : 'missing '+(reqEnv.length-setN)+' / '+reqEnv.length;
-                return Row({ key: p.name, code: p.enabled ? '●' : '○', title: p.name, sub: p.note || '', meta: [p.enabled ? 'enabled' : '', envSummary].filter(Boolean).join(' · ') });
-            })
-        })
-    ];
-}

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

@@ -1,5 +1,6 @@
 import * as webjsx from '../../../vendor/webjsx/index.js';
-import { Panel, Row, Hero, Receipt, Kpi, Table } from '../content.js';
+import { Panel, Hero, Receipt, Kpi } from '../content.js';
+import { Chip } from '../shell.js';
 import { EmptyState } from '../files.js';
 import { skillLabel } from './helpers.js';
 const h = webjsx.createElement;
@@ -25,40 +26,77 @@ export async function home(h0) {
     ];
 }
 
+function relTime(ts) {
+    if (!ts) return '';
+    const t = typeof ts === 'string' ? Date.parse(ts) : Number(ts);
+    if (!Number.isFinite(t)) return '';
+    const diff = (Date.now() - t) / 1000;
+    if (diff < 60) return Math.floor(diff)+'s ago';
+    if (diff < 3600) return Math.floor(diff/60)+'m ago';
+    if (diff < 86400) return Math.floor(diff/3600)+'h ago';
+    if (diff < 86400*30) return Math.floor(diff/86400)+'d ago';
+    return new Date(t).toISOString().slice(0,10);
+}
+
+const PLATFORM_CAT = { web: 'kit', cli: 'doc', telegram: 'preview', slack: 'preview', discord: 'preview', api_server: 'external', webhook: 'external' };
+
 export async function sessions(h0) {
     const list = await h0.pi.sessions.list();
     const f = window.__fd_sessFilter = window.__fd_sessFilter || { q: '' };
     const q = (f.q || '').toLowerCase();
     const filtered = q ? list.filter(s => (s.title||'').toLowerCase().includes(q) || (s.id||'').includes(q) || (s.platform||'').toLowerCase().includes(q) || (s.cwd||'').toLowerCase().includes(q)) : list;
-    const rows = filtered.map(s => {
-        const cont = h('button', { class: 'btn-primary', 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];
+    const openSession = async s => {
+        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');
+    };
+    const items = filtered.map(s => {
+        const cat = PLATFORM_CAT[s.platform] || 'doc';
+        const subParts = [s.platform || '—', s.model || '—', s.skill ? skillLabel({name:s.skill}) : null].filter(Boolean);
+        const cwdMeta = s.cwd ? '…'+s.cwd.slice(-28) : '';
+        const tsMeta = relTime(s.updated_at || s.created_at || s.ts);
+        return h('div', { key: s.id, class: 'fd-list-row', 'data-cat': cat, role: 'button', tabindex: '0', onclick: () => openSession(s), onkeydown: ev => { if (ev.key === 'Enter' || ev.key === ' ') { ev.preventDefault(); openSession(s); } } },
+            h('span', { class: 'fd-list-code' }, (s.id||'').slice(0,8)),
+            h('div', { class: 'fd-list-main' },
+                h('div', { class: 'fd-list-title' }, s.title || '(untitled)'),
+                h('div', { class: 'fd-list-sub' }, subParts.join(' · '))
+            ),
+            h('div', { class: 'fd-list-meta' },
+                cwdMeta ? h('span', { class: 'fd-list-meta-mono' }, cwdMeta) : null,
+                tsMeta ? h('span', { class: 'fd-list-meta-rel' }, tsMeta) : null
+            )
+        );
     });
-    const search = h('input', { type: 'search', placeholder: 'filter by title / id / platform / cwd…', value: f.q, oninput: ev => { f.q = ev.target.value; if (typeof window.__fd_nav === 'function') window.__fd_nav('sessions'); }, class: 'fd-search' });
+    const search = h('input', { type: 'search', 'aria-label': 'filter sessions', placeholder: 'filter by title / id / platform / cwd…', value: f.q, oninput: ev => { f.q = ev.target.value; if (typeof window.__fd_nav === 'function') window.__fd_nav('sessions'); }, class: 'fd-search' });
+    const body = list.length === 0
+        ? EmptyState({ text: 'no sessions yet — start one in /chat', glyph: '✉' })
+        : filtered.length === 0
+            ? EmptyState({ text: 'no matches for "'+f.q+'"', glyph: '⌕' })
+            : h('div', { class: 'fd-list' }, ...items);
     return [
-        Hero({ title: 'sessions', body: 'every chat turn lives here.', accent: list.length+' total' }),
+        Hero({ title: 'sessions', body: 'every chat turn lives here. click a row to continue.', accent: list.length+' total' }),
         Kpi({ items: [[list.length,'sessions'],[filtered.length,'shown']] }),
-        Panel({ title: 'sessions', count: filtered.length, right: search, children: list.length === 0 ? EmptyState({ text: 'no sessions yet — start one in /chat', glyph: '✉' }) : filtered.length === 0 ? EmptyState({ text: 'no matches for "'+f.q+'"', glyph: '⌕' }) : Table({ headers: ['id','title','platform','model','cwd','skill',''], rows }) })
+        Panel({ title: 'sessions', count: filtered.length, right: search, children: body })
     ];
 }
 
 export async function projects(h0) {
     const list = h0.pi.projects.list();
     const active = h0.pi.projects.active();
-    const rows = list.map(p => Row({
-        key: p.name,
-        code: p.name === active?.name ? '●' : '○',
-        title: p.name + (p.name === active?.name ? '  (active)' : ''),
-        meta: p.path,
-        onClick: () => { if (p.name !== active?.name) h0.pi.projects.setActive(p.name); }
+    const rows = h('div', { class: 'fd-list' }, ...list.map(p => {
+        const isActive = p.name === active?.name;
+        return h('div', { key: p.name, class: 'fd-list-row', 'data-cat': isActive ? 'kit' : 'doc', role: 'button', tabindex: '0',
+            onclick: () => { if (!isActive) h0.pi.projects.setActive(p.name); },
+            onkeydown: ev => { if ((ev.key === 'Enter' || ev.key === ' ') && !isActive) { ev.preventDefault(); h0.pi.projects.setActive(p.name); } } },
+            h('span', { class: 'fd-list-code' }, isActive ? '●' : '○'),
+            h('div', { class: 'fd-list-main' },
+                h('div', { class: 'fd-list-title' }, p.name + (isActive ? '  (active)' : '')),
+                h('div', { class: 'fd-list-sub' }, p.path)
+            ));
     }));
     return [
         Hero({ title: 'projects', body: 'each project is its own ~/.freddie home.', accent: active ? 'active · '+active.name : 'no active project' }),
@@ -68,7 +106,7 @@ export async function projects(h0) {
             h('input', { name: 'path', placeholder: '/abs/path' }),
             h('button', { type: 'submit', class: 'btn-primary' }, 'add')
         ) }),
-        Panel({ title: 'all projects', count: list.length, children: rows.length ? rows : EmptyState({ text: 'no projects', glyph: '◆' }) })
+        Panel({ title: 'all projects', count: list.length, children: list.length ? rows : EmptyState({ text: 'no projects', glyph: '◆' }) })
     ];
 }
 
@@ -89,7 +127,16 @@ export async function agents(h0) {
             ] }) }),
         Panel({ title: 'recent sessions', count: recent.length, children: recent.length === 0
             ? EmptyState({ text: 'no recent sessions', glyph: '✉' })
-            : Table({ headers: ['id','title','platform','turns'], rows: recent.map(s => [(s.id||'').slice(0,8), s.title||'—', s.platform||'—', String(s.turns ?? s.message_count ?? '—')]) })
+            : h('div', { class: 'fd-list' }, ...recent.map(s => h('div', { key: s.id, class: 'fd-list-row', 'data-cat': PLATFORM_CAT[s.platform] || 'doc' },
+                h('span', { class: 'fd-list-code' }, (s.id||'').slice(0,8)),
+                h('div', { class: 'fd-list-main' },
+                    h('div', { class: 'fd-list-title' }, s.title || '(untitled)'),
+                    h('div', { class: 'fd-list-sub' }, [s.platform||'—', s.model||'—'].join(' · '))
+                ),
+                h('div', { class: 'fd-list-meta' },
+                    h('span', { class: 'fd-list-meta-mono' }, String(s.turns ?? s.message_count ?? 0)+' turns')
+                )
+            )))
         })
     ];
 }
@@ -102,10 +149,15 @@ export async function analytics(h0) {
     const byModel = list.reduce((a,s) => { const k = s.model||'(unset)'; a[k] = (a[k]||0)+1; return a; }, {});
     const byToolset = tools.reduce((a,t) => { const k = t.toolset||'core'; a[k] = (a[k]||0)+1; return a; }, {});
     const bySkillCat = skills.reduce((a,s) => { const k = s.category||'other'; a[k] = (a[k]||0)+1; return a; }, {});
-    const sortDesc = obj => Object.entries(obj).sort((a,b) => b[1]-a[1]).map(([k,v]) => [k, String(v)]);
+    const sortDesc = obj => Object.entries(obj).sort((a,b) => b[1]-a[1]);
+    const CAT_BY_TITLE = { 'by platform': 'kit', 'by model': 'preview', 'by toolset': 'doc', 'by skill category': 'external' };
     const mkPanel = (title, obj, glyph) => Panel({ title, count: Object.keys(obj).length, children: Object.keys(obj).length === 0
         ? EmptyState({ text: 'no data', glyph })
-        : Table({ headers: ['name','count'], rows: sortDesc(obj) })
+        : h('div', { class: 'fd-list fd-list-compact' }, ...sortDesc(obj).map(([k, n], i) => h('div', { key: k, class: 'fd-list-row', 'data-cat': CAT_BY_TITLE[title] || 'doc' },
+            h('span', { class: 'fd-list-code' }, String(i+1).padStart(2,'0')),
+            h('div', { class: 'fd-list-main' }, h('div', { class: 'fd-list-title' }, k)),
+            h('div', { class: 'fd-list-meta' }, h('span', { class: 'fd-list-meta-mono' }, String(n)))
+        )))
     });
     return [
         Hero({ title: 'analytics', body: 'shape of work — what platforms, what models, what tools.' }),

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

@@ -0,0 +1,69 @@
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { Panel, Hero, Kpi, Form } from '../content.js';
+import { Chip } from '../shell.js';
+import { EmptyState } from '../files.js';
+const h = webjsx.createElement;
+
+export async function batch(h0) {
+    const results = window.__fd_batchResults = window.__fd_batchResults || [];
+    const status = window.__fd_batchStatus = window.__fd_batchStatus || { running: false, error: null };
+    const onSubmit = async ev => {
+        const prompts = ev.target.elements.prompts.value.split('\n').map(s => s.trim()).filter(Boolean);
+        if (!prompts.length) return;
+        status.running = true; status.error = null; window.__fd_batchResults = [];
+        if (typeof window.__fd_nav === 'function') window.__fd_nav('batch');
+        try {
+            const r = await h0.pi.batch.run(prompts, Number(ev.target.elements.concurrency.value) || 4);
+            const arr = Array.isArray(r) ? r : (r && typeof r === 'object' ? Object.entries(r).map(([k, v]) => ({ prompt: k, result: v })) : []);
+            window.__fd_batchResults = arr;
+        } catch (e) { status.error = e.message || String(e); }
+        status.running = false;
+        if (typeof window.__fd_nav === 'function') window.__fd_nav('batch');
+    };
+    const resPanel = status.running ? Panel({ title: 'results', children: h('span', {}, 'running…') })
+        : status.error ? Panel({ title: 'results', children: h('span', { class: 'fd-muted' }, 'error: '+status.error) })
+        : results.length === 0 ? Panel({ title: 'results', children: EmptyState({ text: 'no results yet', glyph: '⊞' }) })
+        : Panel({ title: 'results', count: results.length, children: h('div', { class: 'fd-list' }, ...results.map((it, i) => h('div', { key: i, class: 'fd-list-row', 'data-cat': it.error ? 'external' : 'kit' },
+            h('span', { class: 'fd-list-code' }, String(i+1).padStart(2,'0')),
+            h('div', { class: 'fd-list-main' },
+                h('div', { class: 'fd-list-title' }, (it.prompt||'').slice(0,80)),
+                h('div', { class: 'fd-list-sub' }, (it.result||it.error||'').slice(0,160))
+            ),
+            h('div', { class: 'fd-list-meta' }, h('span', { class: 'fd-list-meta-mono' }, it.error ? 'error' : 'ok'))
+        ))) });
+    return [
+        Hero({ title: 'batch', body: 'run many prompts in parallel. one per line.', accent: results.length ? results.length+' results' : 'idle' }),
+        Panel({ title: 'run batch', children: Form({ fields: [
+            { name: 'prompts', kind: 'textarea', placeholder: 'one prompt per line', rows: 6 },
+            { name: 'concurrency', type: 'number', value: '4' }
+        ], submit: 'run', onSubmit }) }),
+        resPanel
+    ];
+}
+
+export async function gateway(h0) {
+    const platforms = typeof h0.pi.gateway?.platforms === 'function' ? h0.pi.gateway.platforms() : [];
+    const active = platforms.filter(p => p.enabled);
+    const envIsSet = k => typeof h0.pi.env?.isSet === 'function' ? h0.pi.env.isSet(k) : false;
+    return [
+        Hero({ title: 'gateway', body: 'webhook + bot platforms. each adapter declares required env keys.', accent: active.length+' / '+platforms.length+' active' }),
+        Kpi({ items: [[platforms.length,'platforms'],[active.length,'active']] }),
+        Panel({ title: 'platforms', count: platforms.length, right: active.length > 0 ? Chip({ tone: 'ok', children: active.length+' active' }) : Chip({ tone: 'miss', children: 'none active' }),
+            children: platforms.length === 0 ? EmptyState({ text: 'no platforms registered', glyph: '⇌' }) : h('div', { class: 'fd-list' }, ...platforms.map(p => {
+                const reqEnv = Array.isArray(p.requiresEnv) ? p.requiresEnv : [];
+                const setN = reqEnv.filter(envIsSet).length;
+                const envSummary = reqEnv.length === 0 ? '' : setN === reqEnv.length ? '✓ env ready' : 'missing '+(reqEnv.length-setN)+' / '+reqEnv.length;
+                return h('div', { key: p.name, class: 'fd-list-row', 'data-cat': p.enabled ? 'kit' : 'external' },
+                    h('span', { class: 'fd-list-code' }, p.enabled ? '●' : '○'),
+                    h('div', { class: 'fd-list-main' },
+                        h('div', { class: 'fd-list-title' }, p.name),
+                        h('div', { class: 'fd-list-sub' }, p.note || '—')
+                    ),
+                    h('div', { class: 'fd-list-meta' },
+                        h('span', { class: 'fd-list-meta-mono' }, p.enabled ? 'enabled' : 'disabled'),
+                        envSummary ? h('span', { class: 'fd-list-meta-rel' }, envSummary) : null
+                    ));
+            }))
+        })
+    ];
+}

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

@@ -76,10 +76,11 @@ export async function voice(h0) {
                 ),
                 lines.length === 0 && !s.partial
                     ? EmptyState({ text: s.listening ? 'listening — speak into your mic' : 'press start to capture speech', glyph: '◌' })
-                    : h('div', { class: 'fd-voice-log', role: 'log', 'aria-live': 'polite' },
-                        ...lines.map((it, i) => h('div', { key: i, class: 'fd-voice-line' },
-                            h('span', { class: 'fd-voice-ts' }, new Date(it.ts).toLocaleTimeString()),
-                            h('span', { class: 'fd-voice-text' }, it.text))))
+                    : h('div', { class: 'fd-list', role: 'log', 'aria-live': 'polite' },
+                        ...lines.map((it, i) => h('div', { key: i, class: 'fd-list-row', 'data-cat': 'doc' },
+                            h('span', { class: 'fd-list-code' }, new Date(it.ts).toLocaleTimeString().slice(0,8)),
+                            h('div', { class: 'fd-list-main' }, h('div', { class: 'fd-list-title' }, it.text))
+                        )))
             ] });
 
     const ttsPanel = !ttsSupported

package/src/components/freddie.js

@@ -1,13 +1,15 @@
 export { skillLabel, getRecentPaths, saveRecentPath, renderChatMessages } from './freddie/helpers.js';
 export { home, sessions, projects, agents, analytics } from './freddie/pages-core.js';
 export { chat } from './freddie/pages-chat.js';
-export { models, cron, skills, env, tools, batch, gateway } from './freddie/pages-config.js';
+export { models, cron, skills, env, tools } from './freddie/pages-config.js';
+export { batch, gateway } from './freddie/pages-runtime.js';
 export { config } from './freddie/pages-config-edit.js';
 export { voice } from './freddie/pages-voice.js';
 
 import { home, sessions, projects, agents, analytics } from './freddie/pages-core.js';
 import { chat } from './freddie/pages-chat.js';
-import { models, cron, skills, env, tools, batch, gateway } from './freddie/pages-config.js';
+import { models, cron, skills, env, tools } from './freddie/pages-config.js';
+import { batch, gateway } from './freddie/pages-runtime.js';
 import { config } from './freddie/pages-config-edit.js';
 import { voice } from './freddie/pages-voice.js';
 export const FREDDIE_PAGES = { home, chat, voice, sessions, projects, agents, analytics, models, cron, skills, config, env, tools, batch, gateway };

package/src/desktop/launcher.css

@@ -41,4 +41,21 @@
 }
 .launcher-add { font-size: 20px; }
 
+.launcher-instances {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+}
+
+.launcher-row {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+}
+
+.launcher-close { font-size: 11px; opacity: 0.7; width: 20px; height: 20px; }
+.launcher-close:hover { opacity: 1; }
+
 .launcher-dock + .wm-root { left: 56px !important; }

package/src/desktop/launcher.js

@@ -19,10 +19,6 @@ export function renderDock(opts = {}) {
 
     const instancesHost = document.createElement('div');
     instancesHost.className = 'launcher-instances';
-    instancesHost.style.display = 'flex';
-    instancesHost.style.flexDirection = 'column';
-    instancesHost.style.gap = '8px';
-    instancesHost.style.alignItems = 'center';
     el.appendChild(instancesHost);
 
     root.appendChild(el);
@@ -41,10 +37,6 @@ export function renderDock(opts = {}) {
             const row = document.createElement('div');
             row.className = 'launcher-row';
             row.dataset.instanceId = inst.id;
-            row.style.display = 'flex';
-            row.style.flexDirection = 'column';
-            row.style.gap = '2px';
-            row.style.alignItems = 'center';
 
             const selBtn = document.createElement('button');
             selBtn.className = 'launcher-btn';