anentrypoint-design 0.0.78 → 0.0.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "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",
@@ -26,6 +26,9 @@
     "./desktop/shell.js": "./src/desktop/shell.js",
     "./desktop/freddie-dashboard.js": "./src/desktop/freddie-dashboard.js",
     "./desktop/freddie-dashboard.css": "./src/desktop/freddie-dashboard.css",
+    "./desktop/files-app.js": "./src/desktop/files-app.js",
+    "./desktop/monitor-app.js": "./src/desktop/monitor-app.js",
+    "./desktop/about-app.js": "./src/desktop/about-app.js",
     "./colors_and_type.css": "./colors_and_type.css",
     "./app-shell.css": "./app-shell.css",
     "./page-html": {

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

@@ -1,6 +1,5 @@
 import * as webjsx from '../../../vendor/webjsx/index.js';
 import { Panel, Hero, Receipt } from '../content.js';
-import { Chip } from '../shell.js';
 import { skillLabel, getRecentPaths, saveRecentPath, renderChatMessages } from './helpers.js';
 const h = webjsx.createElement;
 
@@ -105,6 +104,6 @@ export async function chat(h0) {
         ] }),
         configured.length === 0
             ? Panel({ title: 'no providers configured', children: Receipt({ rows: [['set API key', 'keys tab → click chip'], ['or use acptoapi', 'run acptoapi server on localhost:4800']] }) })
-            : Panel({ title: 'providers', children: h('div', { class: 'fd-chips' }, ...providers.map(p => Chip({ tone: p.configured ? (p.available ? 'ok' : 'warn') : 'miss', children: p.name + (p.configured ? (p.available ? ' ●' : ' ○') : '') }))) })
+            : null
     ];
 }

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

@@ -25,7 +25,7 @@ export async function models(h0) {
         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 unprobedRows.push([p.name, p.available ? 'available' : 'unavailable', p.modelsError ? 'error: '+p.modelsError : 'click "probe all"']);
+        else unprobedRows.push([p.name, p.available ? 'available' : 'unavailable', p.modelsError ? 'error: '+p.modelsError : '—']);
     }
     const modelPanels = [
         ...probedPanels,
@@ -33,7 +33,7 @@ export async function models(h0) {
     ].filter(Boolean);
     return [
         Hero({ title: 'models', body: 'pick a provider, pick a model. probe to list available models.', accent: configured.length+' configured' }),
-        Kpi({ items: [[configured.length,'configured'],[providers.filter(p => p.available).length,'available']] }),
+        Kpi({ items: [[configured.length,'configured'],[probedPanels.length,'probed'],[providers.length-configured.length,'unconfigured']] }),
         Panel({ title: 'change active model', children: Form({ fields: [
             { name: 'provider', placeholder: 'provider', value: cfg.agent?.provider || '' },
             { name: 'model', placeholder: 'model id', value: cfg.agent?.model || '' }
@@ -52,12 +52,19 @@ export async function cron(h0) {
     const list = await h0.pi.cron.list();
     return [
         Hero({ title: 'cron', body: 'scheduled prompts. cron syntax, fired by freddie.', accent: list.length+' jobs' }),
-        Kpi({ items: [[list.length,'jobs']] }),
+        Kpi({ items: [[list.length,'jobs'],[list.filter(j => j.enabled).length,'enabled']] }),
         Panel({ title: 'add job', children: Form({ fields: [
-            { name: 'cron', placeholder: '* * * * *', required: true },
-            { name: 'prompt', placeholder: 'prompt', required: true }
-        ], submit: 'create', onSubmit: async ev => { await h0.pi.cron.create({ cron: ev.target.elements.cron.value, prompt: ev.target.elements.prompt.value }); } }) }),
-        Panel({ title: 'jobs', count: list.length, children: list.length === 0 ? EmptyState({ text: 'no cron jobs', glyph: '◷' }) : Table({ headers: ['id','cron','prompt','enabled'], rows: list.map(j => [j.id, j.cron, (j.prompt||'').slice(0,40), j.enabled ? 'yes' : 'no']) }) })
+            { name: 'cron', placeholder: '0 * * * *  (m h dom mon dow)', required: true },
+            { name: 'prompt', placeholder: 'prompt to run', required: true }
+        ], submit: 'create', onSubmit: async ev => { await h0.pi.cron.create({ cron: ev.target.elements.cron.value, prompt: ev.target.elements.prompt.value }); if (typeof window.__fd_nav === 'function') window.__fd_nav('cron'); } }) }),
+        Panel({ title: 'cron syntax', children: Receipt({ rows: [
+            ['every minute', '* * * * *'],
+            ['every hour (top)', '0 * * * *'],
+            ['daily 09:00', '0 9 * * *'],
+            ['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']) }) })
     ];
 }
 
@@ -117,10 +124,15 @@ export async function env(h0) {
 export async function tools(h0) {
     const list = [...h0.pi.tools.values()];
     const envIsSet = k => typeof h0.pi.env?.isSet === 'function' ? h0.pi.env.isSet(k) : false;
-    const bySet = list.reduce((a, t) => { (a[t.toolset||'core'] = a[t.toolset||'core'] || []).push(t); return a; }, {});
+    const f = window.__fd_toolFilter = window.__fd_toolFilter || { q: '' };
+    const q = (f.q || '').toLowerCase();
+    const filtered = q ? list.filter(t => (t.name||'').toLowerCase().includes(q) || (t.description||'').toLowerCase().includes(q) || (t.toolset||'').toLowerCase().includes(q)) : list;
+    const bySet = filtered.reduce((a, t) => { (a[t.toolset||'core'] = a[t.toolset||'core'] || []).push(t); return a; }, {});
+    const search = h('input', { type: 'search', placeholder: 'filter tools…', value: f.q, oninput: ev => { f.q = ev.target.value; if (typeof window.__fd_nav === 'function') window.__fd_nav('tools'); }, class: 'fd-search' });
     return [
         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'],[Object.keys(bySet).length,'toolsets']] }),
+        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 => {
             const params = t.schema?.parameters?.properties ? Object.keys(t.schema.parameters.properties).length : 0;
             const reqEnv = Array.isArray(t.requiresEnv) ? t.requiresEnv : [];

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

@@ -7,6 +7,11 @@ const h = webjsx.createElement;
 export async function home(h0) {
     const sessions = await h0.pi.sessions.list();
     const health = h0.pi.health();
+    const fmt = (k, v) => {
+        if (k === 'ts' && typeof v === 'number') { const d = new Date(v); return d.toISOString().replace('T', ' ').slice(0, 19) + ' UTC'; }
+        if (typeof v === 'boolean') return v ? '✓' : '✗';
+        return String(v);
+    };
     return [
         Hero({ title: 'freddie', body: 'open js agent harness.', accent: h0.version || 'web' }),
         Kpi({ items: [[sessions.length,'sessions'],[h0.pi.tools.size,'tools'],[h0.pi.skills.size,'skills']] }),
@@ -16,13 +21,16 @@ export async function home(h0) {
             ['set api key','keys tab → click chip'],
             ['add cron','cron tab → form']
         ] }) }),
-        Panel({ title: 'host', children: Receipt({ rows: Object.entries(health).map(([k,v]) => [k, String(v)]) }) })
+        Panel({ title: 'system status', children: Receipt({ rows: Object.entries(health).map(([k,v]) => [k, fmt(k, v)]) }) })
     ];
 }
 
 export async function sessions(h0) {
     const list = await h0.pi.sessions.list();
-    const rows = list.map(s => {
+    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: '' };
@@ -34,10 +42,11 @@ export async function sessions(h0) {
         } }, '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 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' });
     return [
         Hero({ title: 'sessions', body: 'every chat turn lives here.', accent: list.length+' total' }),
-        Kpi({ items: [[list.length,'sessions']] }),
-        Panel({ title: 'sessions', count: list.length, children: list.length === 0 ? EmptyState({ text: 'no sessions yet', glyph: '✉' }) : Table({ headers: ['id','title','platform','model','cwd','skill',''], rows }) })
+        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 }) })
     ];
 }
 
@@ -67,16 +76,19 @@ export async function agents(h0) {
     const a = typeof h0.pi.agents === 'function' ? await h0.pi.agents() : { count: 0, turns: 0, active: null };
     const sList = await h0.pi.sessions.list();
     const recent = sList.slice(0, 10);
+    const idle = !a.count;
     return [
-        Hero({ title: 'agents', body: 'agent state machine snapshot. one xstate per turn.', accent: (a.count||0)+' active' }),
-        Kpi({ items: [[a.count||0,'active'],[a.turns||0,'turns'],[sList.length,'total sessions']] }),
-        Panel({ title: 'current agent', children: Receipt({ rows: [
-            ['active session', a.active || '(none)'],
-            ['total turns', String(a.turns || 0)],
-            ['count', String(a.count || 0)]
-        ] }) }),
+        Hero({ title: 'agents', body: 'agent state machine snapshot. one xstate per turn.', accent: idle ? 'idle' : (a.count+' active') }),
+        Kpi({ items: [[a.count||0,'active'],[a.turns||0,'turns total'],[sList.length,'sessions in store']] }),
+        idle
+            ? Panel({ title: 'no agent running', children: EmptyState({ text: 'start an agent by sending a prompt in /chat', glyph: '◌' }) })
+            : Panel({ title: 'current agent', children: Receipt({ rows: [
+                ['active session', a.active || '(none)'],
+                ['total turns', String(a.turns || 0)],
+                ['last activity', a.last_activity ? new Date(a.last_activity).toISOString().replace('T',' ').slice(0,19)+' UTC' : '—']
+            ] }) }),
         Panel({ title: 'recent sessions', count: recent.length, children: recent.length === 0
-            ? EmptyState({ text: 'no recent sessions', glyph: '◈' })
+            ? 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 ?? '—')]) })
         })
     ];
@@ -86,8 +98,8 @@ export async function analytics(h0) {
     const list = await h0.pi.sessions.list();
     const tools = [...h0.pi.tools.values()];
     const skills = [...h0.pi.skills.values()];
-    const byPlat = list.reduce((a,s) => { const k = s.platform||'?'; a[k] = (a[k]||0)+1; return a; }, {});
-    const byModel = list.reduce((a,s) => { const k = s.model||'?'; a[k] = (a[k]||0)+1; return a; }, {});
+    const byPlat = list.reduce((a,s) => { const k = s.platform||'(unset)'; a[k] = (a[k]||0)+1; return a; }, {});
+    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)]);

package/src/desktop/about-app.js

@@ -0,0 +1,52 @@
+// About-app paint surface — static info card, bible classes.
+// renderAboutApp({brand, tagline, bullets, links}) -> {node, dispose}.
+// Consumer provides content; module owns layout + classes.
+
+export function renderAboutApp(opts = {}) {
+    const {
+        brand = 'thebird / web os',
+        tagline = 'browser-native web OS. multi-instance, per-instance fs / worker / shell / browser. no server.',
+        bullets = [
+            'POSIX terminal · IndexedDB filesystem',
+            'OffscreenCanvas worker per instance',
+            'CDP-shaped browser pane',
+            'libsql via sql.js · freddie host',
+            'responsive: phone / tablet / desktop',
+        ],
+        footer = 'open <code>validator</code> to run isolation harness · click apps menu for more.',
+        links = [
+            { href: 'https://github.com/AnEntrypoint/thebird', text: 'source' },
+            { href: './validate.html', text: 'validate' },
+        ],
+    } = opts;
+
+    const node = document.createElement('div');
+    node.className = 'app-pane';
+    node.dataset.component = 'about-app';
+
+    const h2 = document.createElement('h2');
+    h2.textContent = brand;
+    const p = document.createElement('p');
+    p.textContent = tagline;
+    const ul = document.createElement('ul');
+    for (const b of bullets) {
+        const li = document.createElement('li');
+        li.textContent = b;
+        ul.appendChild(li);
+    }
+    const foot = document.createElement('p');
+    foot.innerHTML = footer;
+    const meta = document.createElement('p');
+    meta.className = 'meta';
+    links.forEach((l, i) => {
+        const a = document.createElement('a');
+        a.href = l.href;
+        a.textContent = l.text;
+        meta.appendChild(a);
+        if (i < links.length - 1) meta.appendChild(document.createTextNode(' · '));
+    });
+
+    node.append(h2, p, ul, foot, meta);
+
+    return { node, dispose() {} };
+}

package/src/desktop/files-app.js

@@ -0,0 +1,44 @@
+// Files-app paint surface — bible classes, pure DOM. Consumer provides callbacks.
+// renderFilesApp({list, readFile}) -> {node, refresh, dispose}.
+// list() -> Promise<string[]>; readFile(path) -> Promise<string|Uint8Array>.
+// Header text comes from {label} (consumer assembles "<id> — N files").
+
+export function renderFilesApp(opts = {}) {
+    const { list, readFile, label = '', pollMs = 2000 } = opts;
+    const node = document.createElement('div');
+    node.className = 'app-pane mono';
+    node.dataset.component = 'files-app';
+
+    let preview = null;
+    async function refresh() {
+        const items = await list();
+        node.innerHTML = '';
+        const head = document.createElement('div');
+        head.className = 'head';
+        head.textContent = (label ? label + ' — ' : '') + items.length + ' files';
+        node.appendChild(head);
+        for (const p of items) {
+            const row = document.createElement('div');
+            row.className = 'row';
+            row.textContent = p;
+            row.addEventListener('click', async () => {
+                const body = await readFile(p);
+                if (preview) preview.remove();
+                preview = document.createElement('pre');
+                preview.textContent = String(body);
+                node.appendChild(preview);
+            });
+            node.appendChild(row);
+        }
+    }
+
+    let timer = null;
+    refresh().catch(() => {});
+    if (pollMs > 0) timer = setInterval(() => refresh().catch(() => {}), pollMs);
+
+    return {
+        node,
+        refresh,
+        dispose() { if (timer) clearInterval(timer); },
+    };
+}

package/src/desktop/monitor-app.js

@@ -0,0 +1,34 @@
+// Monitor-app paint surface — bible classes, pure DOM. Consumer supplies getStats().
+// getStats() -> Promise<{instanceId, frames, shells, windows, appsRegistered, jsHeapMb, jsHeapLimitMb, time}>.
+// Field names map directly to displayed lines so consumer controls labels by value, not template.
+
+export function renderMonitorApp(opts = {}) {
+    const { getStats, pollMs = 1000 } = opts;
+    const node = document.createElement('div');
+    node.className = 'app-pane mono';
+    node.dataset.component = 'monitor-app';
+
+    async function tick() {
+        const s = (await Promise.resolve(getStats())) || {};
+        const heap = (s.jsHeapMb != null && s.jsHeapLimitMb != null)
+            ? `js heap: ${Number(s.jsHeapMb).toFixed(1)} MB / ${Number(s.jsHeapLimitMb).toFixed(0)} MB`
+            : 'js heap: n/a';
+        node.textContent = [
+            `instance: ${s.instanceId ?? ''}`,
+            `worker frames: ${s.frames ?? 0}`,
+            `shells: ${s.shells ?? 0}`,
+            `windows: ${s.windows ?? 0}`,
+            `apps registered: ${s.appsRegistered ?? 0}`,
+            heap,
+            `now: ${s.time ?? new Date().toLocaleTimeString()}`,
+        ].join('\n');
+    }
+
+    tick().catch(() => {});
+    const timer = setInterval(() => tick().catch(() => {}), pollMs);
+    return {
+        node,
+        tick,
+        dispose() { clearInterval(timer); },
+    };
+}