anentrypoint-design 0.0.170 → 0.0.172

package/src/components/overlay-primitives.js

@@ -4,6 +4,7 @@
 // .ds-247420 (see editor-primitives.css).
 
 import * as webjsx from '../../vendor/webjsx/index.js';
+import { Icon } from './shell.js';
 const h = webjsx.createElement;
 const kids = (c) => c == null ? [] : (Array.isArray(c) ? c : [c]);
 const FOCUSABLE_SEL = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
@@ -65,6 +66,12 @@ function _hideTip() {
     if (_tipFloat) { _tipFloat.dispose(); _tipFloat = null; }
     if (_tipEl) { _tipEl.hidden = true; _tipEl.className = 'ds-tooltip'; }
 }
+// One module-scope scroll listener hides the shared bubble on any scroll —
+// registered once, never per-trigger (per-trigger leaked a listener per element).
+if (typeof window !== 'undefined' && !window.__dsTipScrollBound) {
+    window.__dsTipScrollBound = true;
+    window.addEventListener('scroll', _hideTip, true);
+}
 function _showTip(trigger, label, placement, kind) {
     if (typeof document === 'undefined') return;
     if (!_tipEl || !document.body.contains(_tipEl)) {
@@ -95,7 +102,6 @@ export function Tooltip({ children, label, placement = 'top', delay = 350, kind
         el.addEventListener('focus', show);
         el.addEventListener('blur', _hideTip);
         el.addEventListener('keydown', (e) => { if (e.key === 'Escape') _hideTip(); });
-        window.addEventListener('scroll', _hideTip, true);
         useLongPress(el, show, { ms: 500 });
     };
     const prevRef = child.props && child.props.ref;
@@ -343,7 +349,8 @@ export function EmojiPicker({ open, anchorX = 0, anchorY = 0, onSelect, onClose
         tabindex: '-1',
         onkeydown: (e) => { if (e.key === 'Escape') { e.preventDefault(); close(); } },
         ref: (el) => {
-            if (!el || el._ovEmoji) return; el._ovEmoji = true; rootEl = el;
+            if (!el) { if (rootEl && rootEl._ovEmojiCleanup) rootEl._ovEmojiCleanup(); return; }
+            if (el._ovEmoji) return; el._ovEmoji = true; rootEl = el;
             const place = () => {
                 const r = el.getBoundingClientRect();
                 const { left, top } = _clampToViewport(anchorX, anchorY, r.width || 260, r.height || 240);
@@ -381,7 +388,7 @@ export function BootOverlay({ progress = 0, phase = '', errored = false, visible
     return h('div', { class: 'ov-boot' + (errored ? ' is-error' : ''), role: errored ? 'alert' : 'status', 'aria-live': 'polite' },
         h('div', { class: 'ov-boot-inner' },
             errored
-                ? h('div', { class: 'ov-boot-mark ov-boot-mark-error', 'aria-hidden': 'true' }, '⚠')
+                ? h('div', { class: 'ov-boot-mark ov-boot-mark-error', 'aria-hidden': 'true' }, Icon('warn'))
                 : h('div', { class: 'ov-boot-spinner', 'aria-hidden': 'true' }),
             !errored ? h('div', { class: 'ov-boot-bar', role: 'progressbar',
                 'aria-valuenow': String(Math.round(pct)), 'aria-valuemin': '0', 'aria-valuemax': '100' },

package/src/components/shell.js

@@ -95,7 +95,39 @@ const ICON_PATHS = {
     megaphone: '<path d="M3 11v2a1 1 0 0 0 1 1h2l5 4V6L6 10H4a1 1 0 0 0-1 1z"/><path d="M15 8a4 4 0 0 1 0 8M18 5a8 8 0 0 1 0 14"/>',
     forum: '<path d="M4 5h13a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H9l-4 3v-3H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"/>',
     page: '<path d="M6 3h8l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5M8 13h8M8 17h6"/>',
-    thread: '<path d="M5 6h14M5 11h14M5 16h8"/><circle cx="17" cy="17" r="3"/>'
+    thread: '<path d="M5 6h14M5 11h14M5 16h8"/><circle cx="17" cy="17" r="3"/>',
+    // status / control icons (replace decorative text glyphs at the source)
+    check: '<path d="M20 6 9 17l-5-5"/>',
+    'check-check': '<path d="M18 6 7 17l-3-3"/><path d="m22 10-7.5 7.5L13 16"/>',
+    'chevron-right': '<path d="m9 6 6 6-6 6"/>',
+    'chevron-down': '<path d="m6 9 6 6 6-6"/>',
+    'arrow-down': '<path d="M12 5v14M5 12l7 7 7-7"/>',
+    'arrow-right': '<path d="M5 12h14M12 5l7 7-7 7"/>',
+    x: '<path d="M18 6 6 18M6 6l12 12"/>',
+    play: '<path d="M6 4v16l14-8z"/>',
+    pause: '<path d="M8 5v14M16 5v14"/>',
+    refresh: '<path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/>',
+    circle: '<circle cx="12" cy="12" r="9"/>',
+    'circle-dot': '<circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3" fill="currentColor"/>',
+    dot: '<circle cx="12" cy="12" r="4" fill="currentColor"/>',
+    square: '<rect x="4" y="4" width="16" height="16" rx="2"/>',
+    activity: '<path d="M3 12h4l3 8 4-16 3 8h4"/>',
+    info: '<circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/>',
+    warn: '<path d="M10.3 4 2.7 17a2 2 0 0 0 1.7 3h15.2a2 2 0 0 0 1.7-3L13.7 4a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h.01"/>',
+    // file-type icons (replace the FILE_GLYPHS unicode set)
+    'file-pdf': '<path d="M6 3h8l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5"/><path d="M9 13h6M9 17h6"/>',
+    'file-zip': '<path d="M6 3h8l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5"/><path d="M11 4v3M11 9v3M11 14v3"/>',
+    'file-video': '<path d="M6 3h8l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5"/><path d="m10 12 4 2.5L10 17z"/>',
+    'file-audio': '<path d="M6 3h8l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5"/><path d="M9 17v-3l4-1v3"/><circle cx="8" cy="17" r="1"/><circle cx="12" cy="16" r="1"/>',
+    'file-sheet': '<path d="M6 3h8l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5"/><path d="M8 13h8M8 17h8M12 11v8"/>',
+    'file-code': '<path d="M6 3h8l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5"/><path d="m10 12-2 2 2 2M14 12l2 2-2 2"/>',
+    'file-text': '<path d="M6 3h8l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5"/><path d="M8 13h8M8 17h6"/>',
+    file: '<path d="M6 3h8l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5"/>',
+    pencil: '<path d="M4 20h4L19 9a2 2 0 0 0-3-3L5 17z"/><path d="M14 6l3 3"/>',
+    'skip-forward': '<path d="M5 5v14l9-7z"/><path d="M19 5v14"/>',
+    'chevron-left': '<path d="m15 6-6 6 6 6"/>',
+    trash: '<path d="M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13"/>',
+    'external-link': '<path d="M14 4h6v6M20 4l-9 9M19 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h6"/>'
 };
 export function Icon(name, { size = 16 } = {}) {
     const inner = ICON_PATHS[name];
@@ -175,7 +207,7 @@ export function Side({ sections = [] } = {}) {
 export function Status({ left = [], right = [] } = {}) {
     return h('footer', { class: 'app-status', role: 'contentinfo' },
         ...left.map((t, i) => h('span', { key: 'l' + i, class: 'item' }, t)),
-        h('span', { class: 'spread', 'aria-hidden': 'true' }),
+        h('span', { key: 'spread', class: 'spread', 'aria-hidden': 'true' }),
         ...right.map((t, i) => h('span', { key: 'r' + i, class: 'item' }, t))
     );
 }
@@ -229,9 +261,10 @@ export function Lede({ children }) {
 
 export function Dot({ tone = 'on' }) {
     const isOn = tone === 'on' || tone === 'live';
-    const cls = isOn ? 'ds-dot-on' : 'ds-dot-off';
+    const cls = 'ds-dot ' + (isOn ? 'ds-dot-on' : 'ds-dot-off');
     const statusLabel = isOn ? 'on status indicator' : 'off status indicator';
-    return h('span', { class: cls, role: 'img', 'aria-label': statusLabel }, isOn ? '●' : '○');
+    // Drawn as a CSS circle (.ds-dot) — no decorative text glyph.
+    return h('span', { class: cls, role: 'img', 'aria-label': statusLabel });
 }
 
 export function Rail({ tone = 'green' }) {

package/src/components/voice.js

@@ -33,7 +33,7 @@ export function PttButton({ state = 'idle', mode = 'ptt', onHoldStart, onHoldEnd
         ontouchend: (e) => { e.preventDefault(); end(e); }
     },
         h('span', { class: 'vx-ptt-glow', 'aria-hidden': 'true' }),
-        h('span', { class: 'vx-ptt-icon', 'aria-hidden': 'true' }, state === 'idle' ? Icon('mic') : '●'),
+        h('span', { class: 'vx-ptt-icon', 'aria-hidden': 'true' }, state === 'idle' ? Icon('mic') : h('span', { class: 'ds-dot ds-dot-on', 'aria-hidden': 'true' })),
         h('span', { class: 'vx-ptt-label' }, label)
     );
 }
@@ -229,11 +229,11 @@ export function AudioQueue({ segments = [], currentSegmentId = null, paused = fa
                 type: 'button', class: 'vx-queue-btn',
                 'aria-label': paused ? 'resume' : 'pause',
                 onclick: () => paused ? (onResume && onResume()) : (onPause && onPause())
-            }, paused ? '▶' : '⏸'),
+            }, paused ? Icon('play') : Icon('pause')),
             h('button', {
                 type: 'button', class: 'vx-queue-btn',
                 'aria-label': 'skip', onclick: () => onSkip && onSkip()
-            }, '⏭')
+            }, Icon('skip-forward'))
         ),
         h('div', { class: 'vx-queue-strip' },
             ...segments.map(s => h('button', {

package/src/index.js

@@ -77,6 +77,7 @@ export const applyDiff = webjsx.applyDiff;
 // spoint kit paint surfaces (loading screen, HUD, editor chrome).
 export { renderLoadingScreen } from './kits/spoint/loading-screen.js';
 export { renderGameHud } from './kits/spoint/game-hud.js';
+export { renderHostJoinLobby } from './kits/spoint/host-join-lobby.js';
 
 // Re-export freddie helpers so consumers can `import { FREDDIE_PAGES } from
 // 'anentrypoint-design'` directly.

package/src/kits/os/freddie/helpers.js

@@ -41,7 +41,7 @@ export function renderChatMessages(container, messages) {
             det.className = 'fd-chatlog-tool';
             const sum = document.createElement('summary');
             sum.className = 'fd-chatlog-tool-sum';
-            sum.textContent = '⚒ ' + m.name + (m.argsSummary ? ' ' + m.argsSummary : '');
+            sum.textContent = '[tool] ' + m.name + (m.argsSummary ? ' ' + m.argsSummary : '');
             det.appendChild(sum);
             const body = document.createElement('pre');
             body.className = 'fd-chatlog-tool-body';
@@ -51,7 +51,7 @@ export function renderChatMessages(container, messages) {
         } else {
             const el = document.createElement('div');
             el.className = 'fd-chatlog-msg fd-chatlog-' + (m.role === 'assistant' ? 'assistant' : 'user');
-            el.textContent = (m.role === 'assistant' ? '◈ ' : '▷ ') + (m.content || '');
+            el.textContent = (m.role === 'assistant' ? 'assistant: ' : 'user: ') + (m.content || '');
             container.appendChild(el);
         }
     }

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

@@ -4,7 +4,7 @@ import * as components from '../../../components.js';
 import { getRecentPaths, saveRecentPath, skillLabel, renderChatMessages } from './helpers.js';
 
 const h = webjsx.createElement;
-const { Panel, Receipt, Chip } = components;
+const { Panel, Receipt, Chip, Icon } = components;
 
 function parseSseEvents(text) {
     const events = [];
@@ -106,7 +106,7 @@ export function makeChatPage(ctx) {
 
         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)));
+            ...configuredProviders.map(p => h('option', { value: p.name, selected: chatState.provider === p.name ? 'true' : null }, (p.available ? '(on) ' : '(off) ') + p.name)));
 
         return [
             Panel({
@@ -137,7 +137,7 @@ export function makeChatPage(ctx) {
                     ['or use a gateway', 'run a gateway 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 ? ' ●' : ' ○') : '') }))) }),
+                    ...providers.map(p => Chip({ tone: p.configured ? (p.available ? 'ok' : 'warn') : 'miss', children: p.configured ? [p.name, ' ', p.available ? Icon('circle-dot') : Icon('circle')] : p.name }))) }),
         ];
     };
 }

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

@@ -4,7 +4,7 @@ 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;
+const { Panel, Row, Hero, Receipt, Kpi, Table, EmptyState, Icon } = components;
 
 export function makeCorePages(ctx) {
     return {
@@ -13,7 +13,7 @@ export function makeCorePages(ctx) {
             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 ? '●' : '○',
+                code: p.name === activeProj?.name ? Icon('circle-dot') : Icon('circle'),
                 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); } },
@@ -26,7 +26,7 @@ export function makeCorePages(ctx) {
                     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: 'all projects', count: list.length, children: rows.length ? rows : EmptyState({ text: 'no projects', glyph: Icon('square') }) }),
                 Panel({ title: 'how encapsulation works', children: Receipt({ rows: [
                     ['sessions db', '<project>/sessions.db'],
                     ['config', '<project>/config.json'],
@@ -78,7 +78,7 @@ export function makeCorePages(ctx) {
             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: '✉' })
+                    ? EmptyState({ text: 'no sessions yet — open chat and send a message', glyph: Icon('thread') })
                     : Table({ headers: ['id', 'title', 'platform', 'model', 'cwd', 'skill', ''], rows }) }),
             ];
         },

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

@@ -2,7 +2,7 @@
 import * as components from '../../../components.js';
 import { pre } from './helpers.js';
 
-const { Panel, Kpi, Table, EmptyState } = components;
+const { Panel, Kpi, Table, EmptyState, Icon } = components;
 
 export function makeOsPages(ctx) {
     const { osSurfaces, instance } = ctx;
@@ -13,9 +13,9 @@ export function makeOsPages(ctx) {
             return [
                 Kpi({ items: [[list.length, 'instances'], [activeId || '—', 'active']] }),
                 Panel({ title: 'instances', count: list.length, children: list.length === 0
-                    ? EmptyState({ text: 'no instances', glyph: '◫' })
+                    ? EmptyState({ text: 'no instances', glyph: Icon('square') })
                     : Table({ headers: ['id', 'active', 'shells', 'windows'],
-                        rows: list.map(i => [i.id, i.id === activeId ? '●' : '', String((i.shells || []).length), String((i.windows || []).length)]) }) }),
+                        rows: list.map(i => [i.id, i.id === activeId ? Icon('circle') : '', String((i.shells || []).length), String((i.windows || []).length)]) }) }),
             ];
         },
         async ['os-windows']() {
@@ -24,15 +24,15 @@ export function makeOsPages(ctx) {
             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: '▭' })
+                    ? EmptyState({ text: 'no windows open', glyph: Icon('square') })
                     : Table({ headers: ['id', 'title', 'min', 'max', 'pos'],
-                        rows: wins.map(w => [w.id || '?', w.title || '', w.min ? '●' : '', w.max ? '●' : '',
+                        rows: wins.map(w => [w.id || '?', w.title || '', w.min ? Icon('circle') : '', w.max ? Icon('circle') : '',
                             (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: '✕' }) })];
+            if (!x) return [Panel({ title: 'x-server', children: EmptyState({ text: 'x-server not running in this instance', glyph: Icon('x') }) })];
             return [
                 Kpi({ items: [[x.windows, 'windows'], [x.pixmaps, 'pixmaps'], [x.gcs, 'gcs'], [x.atoms, 'atoms'], [x.cursors, 'cursors']] }),
                 Panel({ title: 'display', children: pre(x) }),
@@ -43,7 +43,7 @@ export function makeOsPages(ctx) {
             return [
                 Kpi({ items: [[list.length, 'paths'], [instance.id, 'instance']] }),
                 Panel({ title: 'paths', count: list.length, children: list.length === 0
-                    ? EmptyState({ text: 'empty fs', glyph: '◫' })
+                    ? EmptyState({ text: 'empty fs', glyph: Icon('square') })
                     : pre(list.join('\n')) }),
             ];
         },

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

@@ -4,7 +4,7 @@ import * as components from '../../../components.js';
 import { pre, form, skillLabel } from './helpers.js';
 
 const h = webjsx.createElement;
-const { Panel, Row, Receipt, Kpi, Table, Section, EmptyState, Chip } = components;
+const { Panel, Row, Receipt, Kpi, Table, Section, EmptyState, Chip, Icon } = components;
 
 export function makeToolsPages(ctx) {
     const { rerender } = ctx;
@@ -18,10 +18,10 @@ export function makeToolsPages(ctx) {
             return [
                 Kpi({ items: [[list.length, 'sessions'], [tools.length, 'tools']] }),
                 Panel({ title: 'sessions by platform', children: Object.keys(byPlatform).length === 0
-                    ? EmptyState({ text: 'no data', glyph: '◉' })
+                    ? EmptyState({ text: 'no data', glyph: Icon('activity') })
                     : Table({ headers: ['platform', 'count'], rows: Object.entries(byPlatform).sort((a, b) => b[1] - a[1]) }) }),
                 Panel({ title: 'sessions by model', children: Object.keys(byModel).length === 0
-                    ? EmptyState({ text: 'no data', glyph: '◎' })
+                    ? EmptyState({ text: 'no data', glyph: Icon('circle-dot') })
                     : Table({ headers: ['model', 'count'], rows: Object.entries(byModel).sort((a, b) => b[1] - a[1]) }) }),
                 Panel({ title: 'tool distribution', children: Table({ headers: ['toolset', 'count', 'tools'],
                     rows: Object.entries(byToolset).map(([k, v]) => [k, v.length, v.slice(0, 4).join(', ') + (v.length > 4 ? '…' : '')]) }) }),
@@ -50,7 +50,7 @@ export function makeToolsPages(ctx) {
                     },
                 }) }),
                 Panel({ title: 'provider availability', 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 ? ' ●' : ' ○') : ' ·') }))
+                    ...providers.map(p => Chip({ tone: p.configured ? (p.available ? 'ok' : 'warn') : 'miss', children: [p.name, ' ', p.configured ? (p.available ? Icon('circle-dot') : Icon('circle')) : Icon('dot')] }))
                 ) }),
             ];
         },
@@ -64,7 +64,7 @@ export function makeToolsPages(ctx) {
                     onSubmit: async (ev) => { try { await h0.pi.cron.create({ cron: ev.target.elements.cron.value, prompt: ev.target.elements.prompt.value }); rerender(); } catch (e) { alert(e.message); } },
                 }) }),
                 Panel({ title: 'scheduled jobs', count: list.length, children: list.length === 0
-                    ? EmptyState({ text: 'no cron jobs — add one above', glyph: '◷' })
+                    ? EmptyState({ text: 'no cron jobs — add one above', glyph: Icon('circle') })
                     : Table({ headers: ['id', 'cron', 'prompt', 'enabled'],
                         rows: list.map(j => [j.id, j.cron, (j.prompt || '').slice(0, 40), j.enabled ? 'yes' : 'no']) }) }),
             ];
@@ -74,9 +74,9 @@ export function makeToolsPages(ctx) {
             const byCat = list.reduce((a, s) => { (a[s.category || 'other'] = a[s.category || 'other'] || []).push(s); return a; }, {});
             return [
                 Kpi({ items: [[list.length, 'skills'], [Object.keys(byCat).length, 'categories']] }),
-                list.length === 0 ? EmptyState({ text: 'no skills loaded — add SKILL.md files to ~/.freddie/skills/', glyph: '◈' }) : null,
+                list.length === 0 ? EmptyState({ text: 'no skills loaded — add SKILL.md files to ~/.freddie/skills/', glyph: Icon('square') }) : null,
                 ...Object.entries(byCat).map(([cat, ss]) => Panel({ title: cat, count: ss.length,
-                    children: ss.length === 0 ? EmptyState({ text: 'none', glyph: '◈' })
+                    children: ss.length === 0 ? EmptyState({ text: 'none', glyph: Icon('square') })
                         : Table({ headers: ['name', 'description'], rows: ss.map(s => [skillLabel(s), (s.description || '').slice(0, 120)]) }) })),
             ].filter(Boolean);
         },
@@ -132,7 +132,7 @@ export function makeToolsPages(ctx) {
             return [
                 Kpi({ items: [[list.length, 'tools'], [Object.keys(byToolset).length, 'toolsets']] }),
                 ...Object.entries(byToolset).map(([ts, items]) => Panel({ title: 'toolset · ' + ts, count: items.length,
-                    children: items.map(t => Row({ key: t.name, code: '⚒', title: t.name, sub: (t.description || (t.schema && t.schema.description) || '').slice(0, 80) })) })),
+                    children: items.map(t => Row({ key: t.name, code: Icon('settings'), title: t.name, sub: (t.description || (t.schema && t.schema.description) || '').slice(0, 80) })) })),
             ];
         },
         async batch(h0) {
@@ -170,8 +170,8 @@ export function makeToolsPages(ctx) {
                 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 => Row({ key: p.name, code: p.enabled ? '●' : '○', title: p.name, sub: p.note || '', meta: p.enabled ? 'enabled' : '' })) }),
+                    children: platforms.length === 0 ? EmptyState({ text: 'no platforms registered', glyph: Icon('arrow-right') })
+                        : platforms.map(p => Row({ key: p.name, code: p.enabled ? Icon('circle-dot') : Icon('circle'), title: p.name, sub: p.note || '', meta: p.enabled ? 'enabled' : '' })) }),
                 Panel({ title: 'start gateway', children: Receipt({ rows: [
                     ['webhook + api_server', 'freddie gateway --port 3000'],
                     ['specific platform', 'TELEGRAM_BOT_TOKEN=… freddie gateway'],

package/src/kits/os/freddie/routes.js

@@ -1,24 +1,26 @@
+import { Icon } from '../../../components/shell.js';
+
 export const ROUTES = [
-    { path: 'projects',  label: 'projects',  glyph: '◆' },
-    { path: 'home',      label: 'home',      glyph: '⌂' },
-    { path: 'chat',      label: 'chat',      glyph: '⌨' },
-    { path: 'sessions',  label: 'sessions',  glyph: '✉' },
-    { path: 'agents',    label: 'agents',    glyph: '◈' },
-    { path: 'analytics', label: 'analytics', glyph: '◉' },
-    { path: 'models',    label: 'models',    glyph: '◎' },
-    { path: 'logs',      label: 'logs',      glyph: '☰' },
-    { path: 'cron',      label: 'cron',      glyph: '◷' },
-    { path: 'skills',    label: 'skills',    glyph: '◈' },
-    { path: 'config',    label: 'config',    glyph: '⚙' },
-    { path: 'env',       label: 'keys',      glyph: '⚿' },
-    { path: 'tools',     label: 'tools',     glyph: '⚒' },
-    { path: 'batch',     label: 'batch',     glyph: '⊞' },
-    { path: 'gateway',   label: 'gateway',   glyph: '⇌' },
+    { path: 'projects',  label: 'projects',  glyph: Icon('square') },
+    { path: 'home',      label: 'home',      glyph: Icon('page') },
+    { path: 'chat',      label: 'chat',      glyph: Icon('forum') },
+    { path: 'sessions',  label: 'sessions',  glyph: Icon('thread') },
+    { path: 'agents',    label: 'agents',    glyph: Icon('members') },
+    { path: 'analytics', label: 'analytics', glyph: Icon('activity') },
+    { path: 'models',    label: 'models',    glyph: Icon('circle-dot') },
+    { path: 'logs',      label: 'logs',      glyph: Icon('menu') },
+    { path: 'cron',      label: 'cron',      glyph: Icon('circle') },
+    { path: 'skills',    label: 'skills',    glyph: Icon('check') },
+    { path: 'config',    label: 'config',    glyph: Icon('settings') },
+    { path: 'env',       label: 'keys',      glyph: Icon('hash') },
+    { path: 'tools',     label: 'tools',     glyph: Icon('more-horizontal') },
+    { path: 'batch',     label: 'batch',     glyph: Icon('square') },
+    { path: 'gateway',   label: 'gateway',   glyph: Icon('arrow-right') },
 ];
 
 export const OS_ROUTE_DEFS = [
-    { path: 'os-instances', label: 'instances', glyph: '◫' },
-    { path: 'os-windows',   label: 'windows',   glyph: '▭' },
-    { path: 'os-x',         label: 'x-server',  glyph: '✕' },
-    { path: 'os-fs',        label: 'fs',        glyph: '◫' },
+    { path: 'os-instances', label: 'instances', glyph: Icon('square') },
+    { path: 'os-windows',   label: 'windows',   glyph: Icon('screen') },
+    { path: 'os-x',         label: 'x-server',  glyph: Icon('x') },
+    { path: 'os-fs',        label: 'fs',        glyph: Icon('page') },
 ];

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

@@ -6,7 +6,7 @@ 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;
+const { AppShell, Topbar, Side, Crumb, Status, Panel, Chip, EmptyState, Icon } = components;
 
 function pre(obj) {
     return webjsx.createElement('pre', { class: 'fd-pre' }, typeof obj === 'string' ? obj : JSON.stringify(obj, null, 2));
@@ -66,7 +66,7 @@ export function createFreddieDashboard({ instance, bootHost, osSurfaces, loading
             topbar: Topbar({ brand: 'assistant', leaf: 'dashboard', items: [], active: '' }),
             crumb: Crumb({ trail: ['assistant', 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: loadingText || 'loading…', glyph: '◌' }),
+            main: state.body || EmptyState({ text: loadingText || 'loading…', glyph: Icon('circle') }),
             status: Status({ left: ['ds-247420 · webjsx · ' + allRoutes.length + ' routes', 'instance=' + instance.id], right: [state.ts] }),
         });
     }

package/src/kits/spoint/host-join-lobby.css

@@ -0,0 +1,89 @@
+/* Host/join lobby kit styles. Scoped under .ds-247420 at build time.
+   Token-only colors (no raw literals) per the token-lint gate. */
+.sp-lobby {
+  position: fixed;
+  inset: 0;
+  z-index: 9500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--bg) 70%, transparent);
+  font-family: var(--ff-mono);
+}
+.sp-lobby-card {
+  position: relative;
+  width: min(360px, 88vw);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 24px;
+  background: var(--bg-2);
+  border: 1px solid var(--bw-rule, var(--rule));
+  border-radius: var(--r-2, 10px);
+  color: var(--fg);
+}
+.sp-lobby-title {
+  margin: 0;
+  font-family: var(--ff-display);
+  font-size: var(--fs-h3);
+}
+.sp-lobby-sub {
+  margin: 0;
+  color: var(--fg-3);
+  font-size: var(--fs-small, 12px);
+}
+.sp-lobby-btn {
+  appearance: none;
+  border: 1px solid var(--bw-rule, var(--rule));
+  background: var(--bg-3);
+  color: var(--fg);
+  font-family: var(--ff-mono);
+  font-size: var(--fs-body);
+  padding: 10px 14px;
+  border-radius: var(--r-1, 6px);
+  cursor: pointer;
+}
+.sp-lobby-btn:hover { background: var(--bg-2); }
+.sp-lobby-btn:disabled { opacity: 0.6; cursor: default; }
+.sp-lobby-btn-primary {
+  background: var(--accent);
+  color: var(--accent-fg);
+  border-color: var(--accent);
+}
+.sp-lobby-join { display: flex; gap: 8px; }
+.sp-lobby-input {
+  flex: 1;
+  min-width: 0;
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid var(--bw-rule, var(--rule));
+  border-radius: var(--r-1, 6px);
+  padding: 8px 10px;
+  font: var(--fs-body) var(--ff-mono);
+  outline: none;
+}
+.sp-lobby-input:focus { border-color: var(--accent); }
+.sp-lobby-link { font-size: var(--fs-small, 11px); }
+.sp-lobby-code {
+  font-family: var(--ff-display);
+  font-size: var(--fs-h2);
+  letter-spacing: 0.12em;
+  text-align: center;
+  color: var(--accent);
+  padding: 8px;
+  background: var(--bg);
+  border-radius: var(--r-1, 6px);
+}
+.sp-lobby-err { min-height: 16px; color: var(--danger); font-size: var(--fs-small, 11px); }
+.sp-lobby-close {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  appearance: none;
+  background: none;
+  border: none;
+  color: var(--fg-3);
+  font-size: 16px;
+  cursor: pointer;
+  line-height: 1;
+}

package/src/kits/spoint/host-join-lobby.js

@@ -0,0 +1,81 @@
+// Host/join lobby paint surface for the spoint multiplayer setup.
+// renderHostJoinLobby({ onHost, onJoin, onClose }) -> { node, showHosting,
+// showError, dispose }. The consumer owns transport/navigation; this module
+// owns layout + classes. Two actions: Host (start a room, then showHosting
+// surfaces the code + copyable join link) and Join (enter a code or paste a
+// join link). onHost() -> Promise|void; onJoin(rawCodeOrLink) -> void.
+
+export function renderHostJoinLobby(opts = {}) {
+  const { onHost, onJoin, onClose } = opts
+
+  const node = document.createElement('div')
+  node.className = 'sp-lobby ds-247420'
+  node.dataset.component = 'host-join-lobby'
+
+  const card = document.createElement('div')
+  card.className = 'sp-lobby-card'
+  node.appendChild(card)
+
+  const mk = (tag, cls, text) => { const el = document.createElement(tag); if (cls) el.className = cls; if (text != null) el.textContent = text; return el }
+
+  function _idle() {
+    card.replaceChildren()
+    card.append(
+      mk('h2', 'sp-lobby-title', 'Multiplayer'),
+      mk('p', 'sp-lobby-sub', 'Host a match others can join, or join with a code.')
+    )
+    const hostBtn = mk('button', 'sp-lobby-btn sp-lobby-btn-primary', 'Host a Game')
+    hostBtn.addEventListener('click', () => { hostBtn.disabled = true; hostBtn.textContent = 'Starting...'; onHost?.() })
+    card.appendChild(hostBtn)
+
+    const joinRow = mk('div', 'sp-lobby-join')
+    const input = mk('input', 'sp-lobby-input')
+    input.type = 'text'
+    input.placeholder = 'Enter room code or link'
+    input.autocapitalize = 'characters'
+    const joinBtn = mk('button', 'sp-lobby-btn', 'Join')
+    const submit = () => { const v = (input.value || '').trim(); if (!v) { showError('Enter a code'); return } onJoin?.(v) }
+    joinBtn.addEventListener('click', submit)
+    input.addEventListener('keydown', e => { if (e.key === 'Enter') submit() })
+    joinRow.append(input, joinBtn)
+    card.appendChild(joinRow)
+
+    const err = mk('div', 'sp-lobby-err'); err.id = 'sp-lobby-err'
+    card.appendChild(err)
+
+    if (onClose) {
+      const close = mk('button', 'sp-lobby-close', 'x')
+      close.addEventListener('click', () => onClose())
+      card.appendChild(close)
+    }
+  }
+
+  function showHosting(code, link) {
+    card.replaceChildren()
+    card.append(
+      mk('h2', 'sp-lobby-title', 'Hosting'),
+      mk('p', 'sp-lobby-sub', 'Share this so others can join:'),
+      mk('div', 'sp-lobby-code', code)
+    )
+    const linkField = mk('input', 'sp-lobby-input sp-lobby-link')
+    linkField.type = 'text'; linkField.readOnly = true; linkField.value = link
+    card.appendChild(linkField)
+    const copyBtn = mk('button', 'sp-lobby-btn sp-lobby-btn-primary', 'Copy Join Link')
+    copyBtn.addEventListener('click', async () => {
+      try { await navigator.clipboard.writeText(link) } catch (_) { linkField.select(); document.execCommand && document.execCommand('copy') }
+      copyBtn.textContent = 'Copied'
+      setTimeout(() => { copyBtn.textContent = 'Copy Join Link' }, 1600)
+    })
+    card.appendChild(copyBtn)
+    card.appendChild(mk('p', 'sp-lobby-sub', 'Waiting for players...'))
+  }
+
+  function showError(msg) {
+    const err = card.querySelector('#sp-lobby-err')
+    if (err) err.textContent = msg
+  }
+
+  _idle()
+
+  return { node, showHosting, showError, dispose: () => node.remove() }
+}

package/src/kits/spoint/index.js

@@ -5,6 +5,8 @@
 
 export { renderLoadingScreen } from './loading-screen.js';
 export { renderGameHud } from './game-hud.js';
+export { renderHostJoinLobby } from './host-join-lobby.js';
 
 export const themeUrl = new URL('./loading-screen.css', import.meta.url).href;
 export const gameHudCssUrl = new URL('./game-hud.css', import.meta.url).href;
+export const lobbyCssUrl = new URL('./host-join-lobby.css', import.meta.url).href;

package/src/markdown-cache.js

@@ -4,6 +4,7 @@
 
 import { renderMarkdown, ensureReady as ensureMarkdownReady } from './markdown.js';
 import { highlightAllUnder, ensurePrism } from './highlight.js';
+import { register } from './debug.js';
 
 // Simple content-based hash for memoization (FNV-1a 32-bit)
 function simpleHash(str) {
@@ -153,6 +154,9 @@ export function getCacheStats() {
     };
 }
 
+// Observability: expose markdown/prism cache stats live via window.__debug.
+register('markdown-cache', () => getCacheStats());
+
 /**
  * Reset cache state (for testing only).
  */