anentrypoint-design 0.0.121 → 0.0.124

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

@@ -1,101 +1,101 @@
-import * as webjsx from '../../../vendor/webjsx/index.js';
-import * as components from '../../components.js';
-import { ROUTES, OS_ROUTE_DEFS } from './freddie/routes.js';
-import { makeCorePages } from './freddie/pages-core.js';
-import { makeChatPage } from './freddie/pages-chat.js';
-import { makeToolsPages } from './freddie/pages-tools.js';
-import { makeOsPages } from './freddie/pages-os.js';
-
-const { AppShell, Topbar, Side, Crumb, Status, Panel, Chip, EmptyState } = components;
-
-function pre(obj) {
-    return webjsx.createElement('pre', { class: 'fd-pre' }, typeof obj === 'string' ? obj : JSON.stringify(obj, null, 2));
-}
-
-export function createFreddieDashboard({ instance, bootHost, osSurfaces }) {
-    const root = document.createElement('div');
-    root.className = 'app-fd ds-247420 fd-root';
-
-    const state = { active: 'home', ts: new Date().toLocaleTimeString(), body: null, error: null };
-    let host = instance.host || null;
-    const allRoutes = osSurfaces ? [...ROUTES, ...OS_ROUTE_DEFS] : ROUTES;
-
-    async function ensureHost() {
-        if (host) return host;
-        if (typeof bootHost !== 'function') throw new Error('createFreddieDashboard: instance.host or bootHost required');
-        host = instance.host = await bootHost({ fs: instance.fs });
-        return host;
-    }
-
-    function setActive(p) { state.active = p; rerender(); }
-    if (typeof window !== 'undefined') window.__fd_nav = setActive;
-
-    function rerender() { webjsx.applyDiff(root, view()); loadActive(); }
-
-    const ctx = { instance, osSurfaces, root, state, rerender, get host() { return host; } };
-    const PAGES = {
-        ...makeCorePages(ctx),
-        chat: makeChatPage(ctx),
-        ...makeToolsPages(ctx),
-        ...(osSurfaces ? makeOsPages(ctx) : {}),
-    };
-
-    function buildSide() {
-        const sections = [{
-            group: 'FREDDIE',
-            items: ROUTES.map(r => ({
-                glyph: r.glyph, label: r.label, href: '#fd-' + r.path,
-                active: state.active === r.path,
-                onClick: (ev) => { ev.preventDefault(); setActive(r.path); },
-            })),
-        }];
-        if (osSurfaces) sections.push({
-            group: 'OS',
-            items: OS_ROUTE_DEFS.map(r => ({
-                glyph: r.glyph, label: r.label, href: '#fd-' + r.path,
-                active: state.active === r.path,
-                onClick: (ev) => { ev.preventDefault(); setActive(r.path); },
-            })),
-        });
-        return Side({ sections });
-    }
-
-    function view() {
-        const route = allRoutes.find(r => r.path === state.active) || ROUTES[1];
-        return AppShell({
-            topbar: Topbar({ brand: 'freddie', leaf: 'dashboard', items: [], active: '' }),
-            crumb: Crumb({ trail: ['freddie', instance.id], leaf: route.path, right: state.error ? Chip({ tone: 'miss', children: 'error' }) : Chip({ tone: 'ok', children: 'live' }) }),
-            side: buildSide(),
-            main: state.body || EmptyState({ text: 'loading…', glyph: '◌' }),
-            status: Status({ left: ['ds-247420 · webjsx · ' + allRoutes.length + ' routes', 'instance=' + instance.id], right: [state.ts] }),
-        });
-    }
-
-    async function loadActive() {
-        try {
-            const h0 = await ensureHost();
-            const page = PAGES[state.active] || PAGES.home;
-            state.body = await page(h0, instance);
-            state.error = null;
-        } catch (e) {
-            state.error = String(e && e.stack || e);
-            state.body = Panel({ title: 'error', children: pre(state.error) });
-        }
-        state.ts = new Date().toLocaleTimeString();
-        webjsx.applyDiff(root, view());
-    }
-
-    rerender();
-
-    if (typeof window !== 'undefined') {
-        window.__debug = window.__debug || {};
-        window.__debug.instances = window.__debug.instances || {};
-        window.__debug.instances[instance.id] = window.__debug.instances[instance.id] || {};
-        window.__debug.instances[instance.id].dashboard = {
-            root, routes: allRoutes.map(r => r.path), setActive,
-            get active() { return state.active; },
-        };
-    }
-
-    return { node: root, dispose() {} };
-}
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import * as components from '../../components.js';
+import { ROUTES, OS_ROUTE_DEFS } from './freddie/routes.js';
+import { makeCorePages } from './freddie/pages-core.js';
+import { makeChatPage } from './freddie/pages-chat.js';
+import { makeToolsPages } from './freddie/pages-tools.js';
+import { makeOsPages } from './freddie/pages-os.js';
+
+const { AppShell, Topbar, Side, Crumb, Status, Panel, Chip, EmptyState } = components;
+
+function pre(obj) {
+    return webjsx.createElement('pre', { class: 'fd-pre' }, typeof obj === 'string' ? obj : JSON.stringify(obj, null, 2));
+}
+
+export function createFreddieDashboard({ instance, bootHost, osSurfaces }) {
+    const root = document.createElement('div');
+    root.className = 'app-fd ds-247420 fd-root';
+
+    const state = { active: 'home', ts: new Date().toLocaleTimeString(), body: null, error: null };
+    let host = instance.host || null;
+    const allRoutes = osSurfaces ? [...ROUTES, ...OS_ROUTE_DEFS] : ROUTES;
+
+    async function ensureHost() {
+        if (host) return host;
+        if (typeof bootHost !== 'function') throw new Error('createFreddieDashboard: instance.host or bootHost required');
+        host = instance.host = await bootHost({ fs: instance.fs });
+        return host;
+    }
+
+    function setActive(p) { state.active = p; rerender(); }
+    if (typeof window !== 'undefined') window.__fd_nav = setActive;
+
+    function rerender() { webjsx.applyDiff(root, view()); loadActive(); }
+
+    const ctx = { instance, osSurfaces, root, state, rerender, get host() { return host; } };
+    const PAGES = {
+        ...makeCorePages(ctx),
+        chat: makeChatPage(ctx),
+        ...makeToolsPages(ctx),
+        ...(osSurfaces ? makeOsPages(ctx) : {}),
+    };
+
+    function buildSide() {
+        const sections = [{
+            group: 'FREDDIE',
+            items: ROUTES.map(r => ({
+                glyph: r.glyph, label: r.label, href: '#fd-' + r.path,
+                active: state.active === r.path,
+                onClick: (ev) => { ev.preventDefault(); setActive(r.path); },
+            })),
+        }];
+        if (osSurfaces) sections.push({
+            group: 'OS',
+            items: OS_ROUTE_DEFS.map(r => ({
+                glyph: r.glyph, label: r.label, href: '#fd-' + r.path,
+                active: state.active === r.path,
+                onClick: (ev) => { ev.preventDefault(); setActive(r.path); },
+            })),
+        });
+        return Side({ sections });
+    }
+
+    function view() {
+        const route = allRoutes.find(r => r.path === state.active) || ROUTES[1];
+        return AppShell({
+            topbar: Topbar({ brand: 'freddie', leaf: 'dashboard', items: [], active: '' }),
+            crumb: Crumb({ trail: ['freddie', instance.id], leaf: route.path, right: state.error ? Chip({ tone: 'miss', children: 'error' }) : Chip({ tone: 'ok', children: 'live' }) }),
+            side: buildSide(),
+            main: state.body || EmptyState({ text: 'loading…', glyph: '◌' }),
+            status: Status({ left: ['ds-247420 · webjsx · ' + allRoutes.length + ' routes', 'instance=' + instance.id], right: [state.ts] }),
+        });
+    }
+
+    async function loadActive() {
+        try {
+            const h0 = await ensureHost();
+            const page = PAGES[state.active] || PAGES.home;
+            state.body = await page(h0, instance);
+            state.error = null;
+        } catch (e) {
+            state.error = String(e && e.stack || e);
+            state.body = Panel({ title: 'error', children: pre(state.error) });
+        }
+        state.ts = new Date().toLocaleTimeString();
+        webjsx.applyDiff(root, view());
+    }
+
+    rerender();
+
+    if (typeof window !== 'undefined') {
+        window.__debug = window.__debug || {};
+        window.__debug.instances = window.__debug.instances || {};
+        window.__debug.instances[instance.id] = window.__debug.instances[instance.id] || {};
+        window.__debug.instances[instance.id].dashboard = {
+            root, routes: allRoutes.map(r => r.path), setActive,
+            get active() { return state.active; },
+        };
+    }
+
+    return { node: root, dispose() {} };
+}

package/src/kits/os/icons.js

@@ -1,17 +1,17 @@
-export const icons = {
-    terminal: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9l3 3-3 3M13 15h4"/></svg>',
-    browser: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/></svg>',
-    canvas: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="14" rx="2"/><path d="M3 17l6-5 4 3 5-4 3 2"/></svg>',
-    files: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6a2 2 0 012-2h4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>',
-    monitor: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12l4-8 4 14 4-10 4 8 2-3"/></svg>',
-    validator: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4L19 6"/></svg>',
-    about: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v.01M11 12h1v5h1"/></svg>',
-    apps: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>',
-    plus: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>',
-    home: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 12h16M4 18h16"/></svg>',
-    xdisplay: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="13" rx="1.5"/><path d="M8 21h8M12 17v4M9 9l6 4M15 9l-6 4"/></svg>',
-    close: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6l-12 12"/></svg>',
-    chat: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v11H8l-4 4z"/><path d="M8 9h8M8 12h6"/></svg>',
-    tools: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 7l3-3 3 3-3 3-3-3zM7 14l3 3-7 7-3-3 7-7zM5 7l3-3M14 14l6 6"/></svg>',
-    freddie: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2M8 12a4 4 0 008 0"/></svg>',
-};
+export const icons = {
+    terminal: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9l3 3-3 3M13 15h4"/></svg>',
+    browser: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/></svg>',
+    canvas: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="14" rx="2"/><path d="M3 17l6-5 4 3 5-4 3 2"/></svg>',
+    files: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6a2 2 0 012-2h4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>',
+    monitor: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12l4-8 4 14 4-10 4 8 2-3"/></svg>',
+    validator: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4L19 6"/></svg>',
+    about: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v.01M11 12h1v5h1"/></svg>',
+    apps: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>',
+    plus: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>',
+    home: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 12h16M4 18h16"/></svg>',
+    xdisplay: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="13" rx="1.5"/><path d="M8 21h8M12 17v4M9 9l6 4M15 9l-6 4"/></svg>',
+    close: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6l-12 12"/></svg>',
+    chat: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v11H8l-4 4z"/><path d="M8 9h8M8 12h6"/></svg>',
+    tools: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 7l3-3 3 3-3 3-3-3zM7 14l3 3-7 7-3-3 7-7zM5 7l3-3M14 14l6 6"/></svg>',
+    freddie: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2M8 12a4 4 0 008 0"/></svg>',
+};

package/src/kits/os/index.js

@@ -1,17 +1,17 @@
-export { icons } from './icons.js';
-export { createDesktopShell } from './shell.js';
-export { renderWindow } from './wm.js';
-export { renderDock } from './launcher.js';
-
-// App modules — surfaced through the kit entry point so consumers can use a
-// single import site. Each module also remains importable from its own path
-// for tree-shaking and back-compat.
-export { renderAboutApp } from './about-app.js';
-export { renderBrowserPane } from './browser-app.js';
-export { renderFilesApp } from './files-app.js';
-export { renderMonitorApp } from './monitor-app.js';
-export { renderTerminal } from './terminal-app.js';
-export { renderValidator } from './validator-app.js';
-export { createFreddieDashboard } from './freddie-dashboard.js';
-
-export const themeUrl = new URL('./theme.css', import.meta.url).href;
+export { icons } from './icons.js';
+export { createDesktopShell } from './shell.js';
+export { renderWindow } from './wm.js';
+export { renderDock } from './launcher.js';
+
+// App modules — surfaced through the kit entry point so consumers can use a
+// single import site. Each module also remains importable from its own path
+// for tree-shaking and back-compat.
+export { renderAboutApp } from './about-app.js';
+export { renderBrowserPane } from './browser-app.js';
+export { renderFilesApp } from './files-app.js';
+export { renderMonitorApp } from './monitor-app.js';
+export { renderTerminal } from './terminal-app.js';
+export { renderValidator } from './validator-app.js';
+export { createFreddieDashboard } from './freddie-dashboard.js';
+
+export const themeUrl = new URL('./theme.css', import.meta.url).href;

package/src/kits/os/launcher.css

@@ -1,61 +1,61 @@
-/* ============================================================
-   Launcher dock — paired with createLauncher() (validation harness path)
-   Bible: tonal step from canvas, no borders, pill controls, lowercase.
-   ============================================================ */
-
-.launcher-dock {
-    position: fixed;
-    left: 0; top: 0; bottom: 0;
-    width: 56px;
-    background: var(--os-bg-2);
-    border: none;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 8px 0;
-    gap: 8px;
-    z-index: 10000;
-    pointer-events: auto;
-    font: 11px var(--os-mono);
-    color: var(--os-fg);
-}
-
-.launcher-btn {
-    width: 40px; height: 40px;
-    background: transparent;
-    color: inherit;
-    cursor: pointer;
-    border-radius: var(--os-radius-sm);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    font: inherit;
-    transition: background 80ms ease, color 80ms ease, box-shadow 80ms ease;
-}
-.launcher-btn:hover { background: var(--panel-hover, var(--os-bg-1)); color: var(--os-fg); }
-.launcher-btn.active {
-    background: var(--panel-select, var(--os-accent-soft));
-    color: var(--os-fg);
-    box-shadow: inset 4px 0 0 var(--os-accent);
-}
-.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; }
+/* ============================================================
+   Launcher dock — paired with createLauncher() (validation harness path)
+   Bible: tonal step from canvas, no borders, pill controls, lowercase.
+   ============================================================ */
+
+.launcher-dock {
+    position: fixed;
+    left: 0; top: 0; bottom: 0;
+    width: 56px;
+    background: var(--os-bg-2);
+    border: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 8px 0;
+    gap: 8px;
+    z-index: 10000;
+    pointer-events: auto;
+    font: 11px var(--os-mono);
+    color: var(--os-fg);
+}
+
+.launcher-btn {
+    width: 40px; height: 40px;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    border-radius: var(--os-radius-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    font: inherit;
+    transition: background 80ms ease, color 80ms ease, box-shadow 80ms ease;
+}
+.launcher-btn:hover { background: var(--panel-hover, var(--os-bg-1)); color: var(--os-fg); }
+.launcher-btn.active {
+    background: var(--panel-select, var(--os-accent-soft));
+    color: var(--os-fg);
+    box-shadow: inset 4px 0 0 var(--os-accent);
+}
+.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/kits/os/launcher.js

@@ -1,79 +1,79 @@
-// Launcher dock paint surface — pure DOM rendering, no lifecycle.
-// Consumer (thebird) owns instance creation, fs/worker/shell wiring, teardown.
-// renderDock returns a handle whose setInstances/setActive are called from
-// lifecycle code. Visuals are bible-aligned: panel-select bg + accent inset
-// rail for active, tonal hover, lowercase mono labels.
-
-export function renderDock(opts = {}) {
-    const { root = document.body, callbacks = {} } = opts;
-
-    const el = document.createElement('div');
-    el.className = 'launcher-dock';
-
-    const addBtn = document.createElement('button');
-    addBtn.className = 'launcher-btn launcher-add';
-    addBtn.textContent = '+';
-    addBtn.title = 'new instance';
-    addBtn.addEventListener('click', () => callbacks.onNewInstance && callbacks.onNewInstance());
-    el.appendChild(addBtn);
-
-    const instancesHost = document.createElement('div');
-    instancesHost.className = 'launcher-instances';
-    el.appendChild(instancesHost);
-
-    root.appendChild(el);
-
-    let activeId = null;
-    const buttons = new Map();
-
-    function clear() {
-        while (instancesHost.firstChild) instancesHost.removeChild(instancesHost.firstChild);
-        buttons.clear();
-    }
-
-    function setInstances(list) {
-        clear();
-        for (const inst of list) {
-            const row = document.createElement('div');
-            row.className = 'launcher-row';
-            row.dataset.instanceId = inst.id;
-
-            const selBtn = document.createElement('button');
-            selBtn.className = 'launcher-btn';
-            selBtn.textContent = inst.label || inst.id;
-            selBtn.title = 'instance ' + inst.id;
-            selBtn.dataset.role = 'select';
-            selBtn.dataset.instanceId = inst.id;
-            if (inst.active || inst.id === activeId) selBtn.classList.add('active');
-            selBtn.addEventListener('click', () => callbacks.onSelectInstance && callbacks.onSelectInstance(inst.id));
-
-            const closeBtn = document.createElement('button');
-            closeBtn.className = 'launcher-btn launcher-close';
-            closeBtn.textContent = 'x';
-            closeBtn.title = 'close ' + inst.id;
-            closeBtn.dataset.role = 'close';
-            closeBtn.dataset.instanceId = inst.id;
-            closeBtn.addEventListener('click', e => {
-                e.stopPropagation();
-                callbacks.onCloseInstance && callbacks.onCloseInstance(inst.id);
-            });
-
-            row.append(selBtn, closeBtn);
-            instancesHost.appendChild(row);
-            buttons.set(inst.id, { selBtn, closeBtn, row });
-        }
-        if (activeId && !buttons.has(activeId)) activeId = null;
-    }
-
-    function setActive(id) {
-        activeId = id;
-        for (const [iid, b] of buttons) b.selBtn.classList.toggle('active', iid === id);
-    }
-
-    function dispose() {
-        el.remove();
-        buttons.clear();
-    }
-
-    return { el, setInstances, setActive, dispose };
-}
+// Launcher dock paint surface — pure DOM rendering, no lifecycle.
+// Consumer (thebird) owns instance creation, fs/worker/shell wiring, teardown.
+// renderDock returns a handle whose setInstances/setActive are called from
+// lifecycle code. Visuals are bible-aligned: panel-select bg + accent inset
+// rail for active, tonal hover, lowercase mono labels.
+
+export function renderDock(opts = {}) {
+    const { root = document.body, callbacks = {} } = opts;
+
+    const el = document.createElement('div');
+    el.className = 'launcher-dock';
+
+    const addBtn = document.createElement('button');
+    addBtn.className = 'launcher-btn launcher-add';
+    addBtn.textContent = '+';
+    addBtn.title = 'new instance';
+    addBtn.addEventListener('click', () => callbacks.onNewInstance && callbacks.onNewInstance());
+    el.appendChild(addBtn);
+
+    const instancesHost = document.createElement('div');
+    instancesHost.className = 'launcher-instances';
+    el.appendChild(instancesHost);
+
+    root.appendChild(el);
+
+    let activeId = null;
+    const buttons = new Map();
+
+    function clear() {
+        while (instancesHost.firstChild) instancesHost.removeChild(instancesHost.firstChild);
+        buttons.clear();
+    }
+
+    function setInstances(list) {
+        clear();
+        for (const inst of list) {
+            const row = document.createElement('div');
+            row.className = 'launcher-row';
+            row.dataset.instanceId = inst.id;
+
+            const selBtn = document.createElement('button');
+            selBtn.className = 'launcher-btn';
+            selBtn.textContent = inst.label || inst.id;
+            selBtn.title = 'instance ' + inst.id;
+            selBtn.dataset.role = 'select';
+            selBtn.dataset.instanceId = inst.id;
+            if (inst.active || inst.id === activeId) selBtn.classList.add('active');
+            selBtn.addEventListener('click', () => callbacks.onSelectInstance && callbacks.onSelectInstance(inst.id));
+
+            const closeBtn = document.createElement('button');
+            closeBtn.className = 'launcher-btn launcher-close';
+            closeBtn.textContent = 'x';
+            closeBtn.title = 'close ' + inst.id;
+            closeBtn.dataset.role = 'close';
+            closeBtn.dataset.instanceId = inst.id;
+            closeBtn.addEventListener('click', e => {
+                e.stopPropagation();
+                callbacks.onCloseInstance && callbacks.onCloseInstance(inst.id);
+            });
+
+            row.append(selBtn, closeBtn);
+            instancesHost.appendChild(row);
+            buttons.set(inst.id, { selBtn, closeBtn, row });
+        }
+        if (activeId && !buttons.has(activeId)) activeId = null;
+    }
+
+    function setActive(id) {
+        activeId = id;
+        for (const [iid, b] of buttons) b.selBtn.classList.toggle('active', iid === id);
+    }
+
+    function dispose() {
+        el.remove();
+        buttons.clear();
+    }
+
+    return { el, setInstances, setActive, dispose };
+}

package/src/kits/os/monitor-app.js

@@ -1,34 +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); },
-    };
-}
+// 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); },
+    };
+}