anentrypoint-design 0.0.170 → 0.0.172

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.170",
+  "version": "0.0.172",
   "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",
@@ -19,6 +19,8 @@
     "./kits/spoint/loading-screen.css": "./src/kits/spoint/loading-screen.css",
     "./kits/spoint/game-hud.js": "./src/kits/spoint/game-hud.js",
     "./kits/spoint/game-hud.css": "./src/kits/spoint/game-hud.css",
+    "./kits/spoint/host-join-lobby.js": "./src/kits/spoint/host-join-lobby.js",
+    "./kits/spoint/host-join-lobby.css": "./src/kits/spoint/host-join-lobby.css",
     "./kits/os": {
       "import": "./src/kits/os/index.js",
       "default": "./src/kits/os/index.js"

package/src/community-app.js

@@ -29,6 +29,7 @@
 
 import * as webjsx from '../vendor/webjsx/index.js';
 import { Icon } from './components/shell.js';
+import { register } from './debug.js';
 import { Chat, ChatComposer } from './components/chat.js';
 import {
     ServerRail, ChannelItem, MemberList, MobileHeader,
@@ -85,11 +86,11 @@ export function mountCommunityApp(root, adapter = {}) {
     const railPill = (c, cur, isVoice, s) => {
         const active = cur.id === c.id;
         const inVoice = isVoice && s.voiceConnected && s.voiceChannelName === c.name;
-        const glyph = inVoice ? h('span', { class: 'glyph' }, '●')
-            : (c.type === 'threaded' ? h('span', { class: 'glyph' }, '◉')
-                : h('span', { class: 'glyph' }, Icon(CHANNEL_ICON[c.type] || 'hash', { size: 15 })));
+        const glyph = inVoice ? h('span', { class: 'glyph', 'aria-hidden': 'true' }, h('span', { class: 'ds-dot ds-dot-live' }))
+            : (c.type === 'threaded' ? h('span', { class: 'glyph', 'aria-hidden': 'true' }, Icon('circle-dot', { size: 15 }))
+                : h('span', { class: 'glyph', 'aria-hidden': 'true' }, Icon(CHANNEL_ICON[c.type] || 'hash', { size: 15 })));
         return h('a', {
-            href: '#', class: active ? 'active' : '',
+            href: '#', class: active ? 'active' : '', 'aria-label': (c.name || c.id) + (inVoice ? ' (in voice)' : ''),
             onclick: (e) => { e.preventDefault(); A.switchChannel && A.switchChannel(c); },
             oncontextmenu: (e) => { e.preventDefault(); A.channelContext && A.channelContext(c.id, e.clientX, e.clientY); },
         }, glyph, h('span', {}, c.name || c.id),
@@ -99,10 +100,10 @@ export function mountCommunityApp(root, adapter = {}) {
     const railServerPill = (sv, s) => {
         const active = sv._home ? s.homeMode : (!s.homeMode && s.currentServerId === sv.id);
         return h('a', {
-            href: '#', class: active ? 'active' : '',
+            href: '#', class: active ? 'active' : '', 'aria-label': sv._home ? 'home' : (sv.name || sv.id),
             onclick: (e) => { e.preventDefault(); sv._home ? (A.goHome && A.goHome()) : (A.switchServer && A.switchServer(sv.id)); },
             oncontextmenu: sv._home ? null : (e) => { e.preventDefault(); A.serverContext && A.serverContext(sv.id, e.clientX, e.clientY); },
-        }, h('span', { class: 'glyph' }, sv._home ? '◆' : (sv.name || '?').slice(0, 1).toUpperCase()),
+        }, h('span', { class: 'glyph', 'aria-hidden': 'true' }, sv._home ? Icon('square', { size: 15 }) : (sv.name || '?').slice(0, 1).toUpperCase()),
             h('span', {}, sv.name || sv.id),
             sv.unreadCount ? h('span', { class: 'count' }, sv.unreadCount > 99 ? '99+' : String(sv.unreadCount)) : null);
     };
@@ -228,6 +229,21 @@ export function mountCommunityApp(root, adapter = {}) {
 
     let unsub = null;
     if (typeof adapter.subscribe === 'function') unsub = adapter.subscribe(render);
+
+    // Observability: expose live overlay + snapshot state for in-browser inspection.
+    register('community-app', () => {
+        const s = get() || {};
+        return {
+            overlays: { context: ctx.open, emoji: emoji.open, palette: palette.open },
+            channels: (s.channels || []).length,
+            servers: (s.servers || []).length,
+            messages: (s.messages || []).length,
+            currentChannel: (s.currentChannel || {}).name || null,
+            voiceConnected: !!s.voiceConnected,
+            homeMode: !!s.homeMode,
+        };
+    });
+
     render();
     return { render, api, destroy: () => { if (unsub) try { unsub(); } catch (_) {} } };
 }

package/src/components/agent-chat.js

@@ -11,36 +11,16 @@
 // The host owns state; AgentChat renders it and calls back on intent.
 
 import * as webjsx from '../../vendor/webjsx/index.js';
-import { ChatComposer, ChatMessage } from './chat.js';
+import { ChatComposer, ChatMessage, makeThreadAutoScroll } from './chat.js';
 import { Select } from './content.js';
 import { Btn } from './shell.js';
 
 const h = webjsx.createElement;
 
-// Auto-scroll a thread to the bottom while the user is already near the bottom,
-// via an IntersectionObserver on a sentinel — the AICat scroll behaviour, lifted
-// so it works for any message list without a per-frame scrollTop write.
-function threadRef(msgCount) {
-  return (el) => {
-    if (!el) return;
-    let sentinel = el.querySelector('[data-scroll-sentinel]');
-    if (!sentinel) {
-      sentinel = document.createElement('div');
-      sentinel.setAttribute('data-scroll-sentinel', '');
-      sentinel.style.height = '1px';
-      el.appendChild(sentinel);
-    }
-    const obs = new IntersectionObserver((entries) => {
-      if (entries[0]?.isIntersecting && el.dataset.msgCount !== String(msgCount)) {
-        el.scrollTop = el.scrollHeight - el.clientHeight;
-        el.dataset.msgCount = String(msgCount);
-      }
-    }, { root: el, threshold: 0 });
-    obs.observe(sentinel);
-    el.dataset.msgCount = String(msgCount);
-    return () => obs.disconnect();
-  };
-}
+// Auto-scroll behaviour is the shared chat helper; bind it to this thread's
+// live message count. (`makeThreadAutoScroll` takes a getter so the observer
+// always compares against current state, not a value captured at mount.)
+const threadRef = (msgCount) => makeThreadAutoScroll(() => msgCount);
 
 // The agent picker: agent-then-model, not a flat model list. Unavailable agents
 // are disabled (unless installable via npx). Ordering is the host's concern.

package/src/components/chat.js

@@ -38,10 +38,45 @@ export function renderInline(text) {
     return out;
 }
 
-const FILE_GLYPHS = { pdf: '▤', zip: '▦', tar: '▦', gz: '▦', mp4: '▶', mp3: '♪', wav: '♪', csv: '⊞', json: '{}', md: '§', txt: '§', default: '◫' };
-function fileGlyph(name) {
+// Map file extension -> line-icon name (drawn SVG, not a decorative glyph).
+const FILE_ICONS = { pdf: 'file-pdf', zip: 'file-zip', tar: 'file-zip', gz: 'file-zip', mp4: 'file-video', mov: 'file-video', mp3: 'file-audio', wav: 'file-audio', csv: 'file-sheet', json: 'file-code', js: 'file-code', ts: 'file-code', md: 'file-text', txt: 'file-text' };
+function fileIconName(name) {
     const ext = String(name || '').split('.').pop().toLowerCase();
-    return FILE_GLYPHS[ext] || FILE_GLYPHS.default;
+    return FILE_ICONS[ext] || 'file';
+}
+
+// Eagerly warm the markdown + Prism caches on first chat-surface mount, once.
+function ensureCachesInit() {
+    if (_cacheInitialized) return;
+    _cacheInitialized = true;
+    initializeCachesEagerly().catch((err) => console.warn('[247420] cache init error:', err));
+}
+
+// Build a ref callback that keeps a scroll container pinned to the bottom when
+// new messages arrive AND the user is already at the bottom (sentinel visible).
+// `getCount` returns the current message count so the observer compares against
+// live state. Shared by Chat, AICat, and AgentChat.
+export function makeThreadAutoScroll(getCount) {
+    return (el) => {
+        if (!el) return;
+        let sentinel = el.querySelector('[data-scroll-sentinel]');
+        if (!sentinel) {
+            sentinel = document.createElement('div');
+            sentinel.setAttribute('data-scroll-sentinel', '');
+            sentinel.style.height = '1px';
+            el.appendChild(sentinel);
+        }
+        const obs = new IntersectionObserver((entries) => {
+            const count = String(getCount());
+            if (entries[0]?.isIntersecting && el.dataset.msgCount !== count) {
+                el.scrollTop = el.scrollHeight - el.clientHeight;
+                el.dataset.msgCount = count;
+            }
+        }, { root: el, threshold: 0 });
+        obs.observe(sentinel);
+        el.dataset.msgCount = String(getCount());
+        return () => obs.disconnect();
+    };
 }
 
 function MdNode(p) {
@@ -79,19 +114,19 @@ const PART_RENDERERS = {
         p.caption ? h('span', { class: 'cap' }, p.caption) : null),
     pdf:   (p) => h('div', { class: 'chat-pdf' },
         h('div', { class: 'chat-pdf-head' },
-            h('span', { class: 'glyph', 'aria-hidden': 'true' }, '▤'),
+            h('span', { class: 'glyph', 'aria-hidden': 'true' }, Icon('file-pdf', { size: 18 })),
             h('span', { class: 'name' }, p.name || 'document.pdf'),
             p.size != null ? h('span', { class: 'size' }, fmtBytes(p.size)) : null,
             h('a', { class: 'open', href: p.src, target: '_blank', rel: 'noopener', 'aria-label': `open PDF: ${p.name || 'document.pdf'}` }, 'open ->')
         ),
         h('embed', { src: p.src, type: 'application/pdf', 'aria-label': `PDF document: ${p.name || 'document.pdf'}` })),
     file:  (p) => h('a', { class: 'chat-file', href: p.src, target: '_blank', rel: 'noopener', download: p.name || true, 'aria-label': `download file: ${p.name || 'attachment'} (${p.kindLabel || (p.name || '').split('.').pop().toUpperCase()})` },
-        h('span', { class: 'glyph', 'aria-hidden': 'true' }, fileGlyph(p.name)),
+        h('span', { class: 'glyph', 'aria-hidden': 'true' }, Icon(fileIconName(p.name), { size: 22 })),
         h('span', { class: 'meta' },
             h('span', { class: 'name' }, p.name || 'attachment'),
             h('span', { class: 'size' }, [p.kindLabel || (p.name || '').split('.').pop().toUpperCase(), p.size != null ? fmtBytes(p.size) : null].filter(Boolean).join(' · '))
         ),
-        h('span', { class: 'go', 'aria-hidden': 'true' }, '↓')),
+        h('span', { class: 'go', 'aria-hidden': 'true' }, Icon('arrow-down'))),
     link:  (p) => h('a', { class: 'chat-link', href: p.href, target: '_blank', rel: 'noopener', 'aria-label': `link: ${p.title || p.href}` },
         p.thumb ? h('img', { class: 'thumb', src: p.thumb, alt: `preview for ${p.title || p.href}` }) : null,
         h('span', { class: 'meta' },
@@ -116,7 +151,7 @@ export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typ
     const cls = 'chat-msg ' + resolvedWho + (aicat && resolvedWho === 'them' ? ' aicat' : '');
     const fallbackAvatar = avatar != null
         ? avatar
-        : (resolvedWho === 'you' ? 'u' : (name ? String(name).trim().charAt(0).toUpperCase() || '◔' : '◔'));
+        : (resolvedWho === 'you' ? 'u' : (name ? String(name).trim().charAt(0).toUpperCase() || '?' : '?'));
     const av = h('span', { class: 'chat-avatar' }, fallbackAvatar);
     let bodyNodes;
     if (typing) bodyNodes = [h('div', { class: 'chat-bubble', key: 'typb' }, h('span', { class: 'chat-typing' }, h('span'), h('span'), h('span')))];
@@ -128,7 +163,7 @@ export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typ
                 h('span', { class: 'e', 'aria-hidden': 'true' }, r.emoji), h('span', { class: 'n', 'aria-hidden': 'true' }, String(r.count)))))
         : null;
     const tickNode = resolvedWho === 'you' && receipt
-        ? h('span', { class: 'tick' + (receipt === 'read' ? ' read' : ''), 'aria-label': receipt === 'read' ? 'message read' : 'message sent' }, receipt === 'read' ? '✓✓' : '✓')
+        ? h('span', { class: 'tick' + (receipt === 'read' ? ' read' : ''), role: 'img', 'aria-label': receipt === 'read' ? 'message read' : 'message sent' }, Icon(receipt === 'read' ? 'check-check' : 'check', { size: 14 }))
         : null;
     const metaItems = [];
     if (name && resolvedWho === 'them') metaItems.push(h('span', { class: 'who', key: 'w' }, name));
@@ -191,40 +226,9 @@ export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu
 }
 
 export function Chat({ title = 'chat', sub, messages = [], composer, header } = {}) {
-    // Eagerly initialize markdown and Prism caches on first Chat component mount.
-    // This parallelizes library loading, avoiding per-message delays.
-    if (!_cacheInitialized) {
-        _cacheInitialized = true;
-        initializeCachesEagerly().catch((err) => console.warn('[247420] cache init error:', err));
-    }
-
-    const threadRef = (el) => {
-        if (!el) return;
-        const sentinel = el.querySelector('[data-scroll-sentinel]') || (() => {
-            const s = h('div', { 'data-scroll-sentinel': true });
-            const vnode = { props: s.props };
-            const sentinelEl = document.createElement('div');
-            sentinelEl.setAttribute('data-scroll-sentinel', '');
-            sentinelEl.style.height = '1px';
-            el.appendChild(sentinelEl);
-            return sentinelEl;
-        })();
-
-        // Use IntersectionObserver to detect if user is at bottom
-        const obs = new IntersectionObserver(
-            (entries) => {
-                if (entries[0]?.isIntersecting && el.dataset.msgCount !== String(messages.length)) {
-                    el.scrollTop = el.scrollHeight - el.clientHeight;
-                    el.dataset.msgCount = String(messages.length);
-                }
-            },
-            { root: el, threshold: 0 }
-        );
-
-        obs.observe(sentinel);
-        el.dataset.msgCount = String(messages.length);
-        return () => obs.disconnect();
-    };
+    // Warm markdown/Prism caches once so library loading parallelizes.
+    ensureCachesInit();
+    const threadRef = makeThreadAutoScroll(() => messages.length);
     const msgCount = messages.length;
     return h('div', { class: 'chat' },
         header || h('div', { class: 'chat-head', role: 'banner' },
@@ -255,47 +259,19 @@ export function AICatPortrait({ name = 'aicat', status = 'idle', face } = {}) {
         h('pre', { class: 'aicat-face', 'aria-label': `${name} portrait` }, face || AICAT_FACE),
         h('div', { class: 'aicat-meta' },
             h('span', { class: 'name' }, name),
-            h('span', { class: 'status', 'aria-label': `status: ${status}` }, h('span', { class: 'dot', 'aria-hidden': 'true' }, '● '), status)
+            h('span', { class: 'status', 'aria-label': `status: ${status}` }, h('span', { class: 'dot ds-dot ds-dot-on', 'aria-hidden': 'true' }), ' ', status)
         )
     );
 }
 
 export function AICat({ name = 'aicat', messages = [], thinking, composer, status = 'online · purring' } = {}) {
-    // Eagerly initialize markdown and Prism caches on first AICat component mount.
-    if (!_cacheInitialized) {
-        _cacheInitialized = true;
-        initializeCachesEagerly().catch((err) => console.warn('[247420] cache init error:', err));
-    }
-
+    ensureCachesInit();
     const annotated = messages.map((m) =>
         m.who === 'them' ? { ...m, aicat: true, avatar: m.avatar || '=^.^=' } : m);
     const all = thinking
         ? [...annotated, { who: 'them', aicat: true, avatar: '=^.^=', typing: true, key: '_thinking' }]
         : annotated;
-    const threadRef = (el) => {
-        if (!el) return;
-        const sentinel = el.querySelector('[data-scroll-sentinel]') || (() => {
-            const sentinelEl = document.createElement('div');
-            sentinelEl.setAttribute('data-scroll-sentinel', '');
-            sentinelEl.style.height = '1px';
-            el.appendChild(sentinelEl);
-            return sentinelEl;
-        })();
-
-        const obs = new IntersectionObserver(
-            (entries) => {
-                if (entries[0]?.isIntersecting && el.dataset.msgCount !== String(all.length)) {
-                    el.scrollTop = el.scrollHeight - el.clientHeight;
-                    el.dataset.msgCount = String(all.length);
-                }
-            },
-            { root: el, threshold: 0 }
-        );
-
-        obs.observe(sentinel);
-        el.dataset.msgCount = String(all.length);
-        return () => obs.disconnect();
-    };
+    const threadRef = makeThreadAutoScroll(() => all.length);
     return h('div', { class: 'chat' },
         h('div', { class: 'chat-head', role: 'banner' },
             h('span', { class: 'dot', 'aria-hidden': 'true' }),

package/src/components/community.js

@@ -4,6 +4,10 @@ import * as webjsx from '../../vendor/webjsx/index.js';
 import { Icon } from './shell.js';
 const h = webjsx.createElement;
 
+// Clamp a count to a compact badge string (matches the rail's 99+ convention),
+// so a runaway number never blows out a fixed-width badge or item row.
+const clampCount = (n) => { const v = Number(n) || 0; return v > 99 ? '99+' : String(v); };
+
 export function ServerIcon({ id, name, icon, active, badge, onClick } = {}) {
     const initials = (name || '?').slice(0, 2).toUpperCase();
     return h('div', {
@@ -29,7 +33,7 @@ export function ServerIcon({ id, name, icon, active, badge, onClick } = {}) {
 
 export function ServerRail({ servers = [], activeId, onSelect, onAdd } = {}) {
     return h('div', { class: 'cm-server-rail', role: 'navigation', 'aria-label': 'servers' },
-        h('a', { class: 'cm-server-back', href: '../', title: 'Back', 'aria-label': 'back' }, '◰'),
+        h('a', { class: 'cm-server-back', href: '../', title: 'Back', 'aria-label': 'back' }, Icon('chevron-left')),
         h('div', { class: 'cm-server-sep', 'aria-hidden': 'true' }),
         ...servers.map(s => ServerIcon({ ...s, active: s.id === activeId, onClick: () => onSelect && onSelect(s.id) })),
         onAdd ? h('button', { class: 'cm-server-add', type: 'button', onclick: onAdd, title: 'Add server', 'aria-label': 'add server' }, '+') : null
@@ -161,6 +165,9 @@ export function ChannelSidebar({ serverName, channels = [], categories = [], act
             h('span', { class: 'cm-server-header-name' }, serverName || 'Server'),
         ),
         h('div', { class: 'cm-channel-list' },
+            (sorted.length === 0 && uncategorized.length === 0)
+                ? h('div', { class: 'cm-channel-empty' }, 'no channels yet')
+                : null,
             ...sorted.map(cat => ChannelCategory({
                 id: cat.id,
                 name: cat.name,
@@ -197,7 +204,11 @@ export function MemberItem({ identity, name, color, status = 'online' } = {}) {
 }
 
 export function MemberList({ categories = [], open } = {}) {
+    const total = categories.reduce((n, cat) => n + (cat.members ? cat.members.length : 0), 0);
     return h('div', { class: 'cm-member-list' + (open ? ' open' : '') },
+        total === 0
+            ? h('div', { key: '_empty', class: 'cm-member-empty' }, 'no members')
+            : null,
         ...categories.flatMap(cat => [
             h('div', { class: 'cm-member-category', key: cat.label }, `${cat.label} — ${cat.members.length}`),
             ...cat.members.map((m, i) => MemberItem({ ...m, key: m.identity || i }))
@@ -235,7 +246,7 @@ export function VoiceStrip({ channelName, status, muted, deafened, onMute, onDea
         h('button', {
             class: 'cm-vs-btn danger', type: 'button', onclick: onLeave,
             title: 'Leave voice', 'aria-label': 'leave voice channel'
-        }, '✕')
+        }, Icon('x'))
     );
 }
 
@@ -266,7 +277,7 @@ export function ReplyBar({ quotedMessage, quotedAuthor, onCancel } = {}) {
         h('button', {
             class: 'cm-rb-cancel', type: 'button', onclick: onCancel,
             title: 'Cancel reply', 'aria-label': 'cancel reply'
-        }, '✕')
+        }, Icon('x'))
     );
 }
 
@@ -305,7 +316,7 @@ export function ThreadPanel({ threads = [], activeId = null, title = 'Threads',
             h('span', { class: 'cm-tp-title' }, title),
             h('div', { class: 'cm-tp-head-actions' },
                 onCreate ? h('button', { type: 'button', class: 'cm-tp-new', 'aria-label': 'new thread', title: 'New thread', onclick: onCreate }, '+') : null,
-                onClose ? h('button', { type: 'button', class: 'cm-tp-close', 'aria-label': 'close', title: 'Close', onclick: onClose }, '✕') : null
+                onClose ? h('button', { type: 'button', class: 'cm-tp-close', 'aria-label': 'close', title: 'Close', onclick: onClose }, Icon('x')) : null
             )
         ),
         h('div', { class: 'cm-tp-list' },
@@ -355,7 +366,7 @@ export function ForumView({ posts = [], onSearch, onSort, onSelect, onNewPost }
                 },
                     h('div', { class: 'cm-forum-item-head' },
                         h('span', { class: 'cm-forum-item-title' }, p.title || '(untitled)'),
-                        h('span', { class: 'cm-forum-item-replies' }, (Number(p.replyCount) || 0) + ' ▸')
+                        h('span', { class: 'cm-forum-item-replies' }, clampCount(p.replyCount), Icon('chevron-right', { size: 13 }))
                     ),
                     p.snippet ? h('div', { class: 'cm-forum-item-snippet' }, p.snippet) : null,
                     h('div', { class: 'cm-forum-item-meta' },

package/src/components/content.js

@@ -3,7 +3,7 @@
 // ProjectView, Form. Pure factories.
 
 import * as webjsx from '../../vendor/webjsx/index.js';
-import { Btn, Heading, Lede, Dot } from './shell.js';
+import { Btn, Heading, Lede, Dot, Icon } from './shell.js';
 const h = webjsx.createElement;
 
 export function Panel({ title, count, right, style = '', children, kind }) {
@@ -351,14 +351,14 @@ export function Skeleton({ height = '1em', width = '100%', count = 1, label = 'l
 }
 
 export function Alert({ kind = 'info', children, onDismiss, title, key } = {}) {
-    const icons = { info: 'ℹ', success: '✓', warn: '⚠', error: '✕' };
+    const icons = { info: 'info', success: 'check', warn: 'warn', error: 'x' };
     const cls = 'ds-alert ds-alert-' + kind;
     return h('div', { key, class: cls, role: 'alert' },
-        h('span', { key: 'icon', class: 'ds-alert-icon' }, icons[kind]),
+        h('span', { key: 'icon', class: 'ds-alert-icon' }, Icon(icons[kind] || 'info')),
         h('div', { key: 'content', class: 'ds-alert-content' },
             title ? h('div', { key: 'title', class: 'ds-alert-title' }, title) : null,
             h('div', { key: 'msg', class: 'ds-alert-message' }, ...(Array.isArray(children) ? children : [children]))
         ),
-        onDismiss ? h('button', { key: 'dismiss', class: 'ds-alert-dismiss', onclick: onDismiss }, '✕') : null
+        onDismiss ? h('button', { key: 'dismiss', class: 'ds-alert-dismiss', 'aria-label': 'dismiss', onclick: onDismiss }, Icon('x')) : null
     );
 }

package/src/components/editor-primitives.js

@@ -5,6 +5,7 @@
 // via the kit's data-theme attribute on the .ds-247420 scope root.
 
 import * as webjsx from '../../vendor/webjsx/index.js';
+import { Icon } from './shell.js';
 const h = webjsx.createElement;
 
 function kids(c) { return c == null ? [] : (Array.isArray(c) ? c : [c]); }
@@ -122,7 +123,7 @@ export function TreeItem({ label, glyph, tag, depth = 0, selected = false, expan
                 class: 'ds-ep-tree-twist' + (expanded ? ' open' : ''),
                 'aria-hidden': 'true',
                 onclick: (e) => { e.stopPropagation(); if (hasKids && onToggle) onToggle(); }
-            }, hasKids ? '▸' : ''),
+            }, hasKids ? Icon('chevron-right') : ''),
             glyph != null ? h('span', { class: 'ds-ep-tree-glyph', 'aria-hidden': 'true' }, glyph) : null,
             h('span', { class: 'ds-ep-tree-label' }, label),
             tag != null ? h('span', { class: 'ds-ep-tree-tag' }, tag) : null

package/src/components/files-modals.js

@@ -1,7 +1,7 @@
 // File modals — matches upstream signatures + class names.
 
 import * as webjsx from '../../vendor/webjsx/index.js';
-import { Btn } from './shell.js';
+import { Btn, Icon } from './shell.js';
 import { fileGlyph, fmtFileSize } from './files.js';
 const h = webjsx.createElement;
 
@@ -154,8 +154,8 @@ export function FileViewer({ file, body, onClose, onAction } = {}) {
                 h('span', { class: 'ds-preview-name' }, file.name || ''),
                 h('span', { class: 'ds-preview-meta' }, meta),
                 h('span', { class: 'ds-preview-actions' },
-                    onAction ? h('button', { class: 'ds-file-act', title: 'download', onclick: () => onAction('download') }, '↓') : null,
-                    h('button', { class: 'ds-file-act', title: 'close', onclick: onClose }, '✕')
+                    onAction ? h('button', { class: 'ds-file-act', title: 'download', 'aria-label': 'download', onclick: () => onAction('download') }, Icon('arrow-down')) : null,
+                    h('button', { class: 'ds-file-act', title: 'close', 'aria-label': 'close', onclick: onClose }, Icon('x'))
                 )
             ),
             h('div', { class: 'ds-preview-body', 'data-file-type': file.type || 'other' },

package/src/components/files.js

@@ -1,13 +1,13 @@
 // File primitives — matches upstream signatures.
 
 import * as webjsx from '../../vendor/webjsx/index.js';
-import { Btn } from './shell.js';
+import { Btn, Icon } from './shell.js';
 const h = webjsx.createElement;
 
 const FILE_TYPES = ['dir', 'image', 'video', 'audio', 'code', 'text', 'archive', 'document', 'symlink', 'other'];
-const TYPE_GLYPH = {
-    dir: '◫', image: '◰', video: '▰', audio: '◎', code: '⌘',
-    text: '§', archive: '◐', document: '▢', symlink: '↗', other: '◌'
+const TYPE_ICON = {
+    dir: 'file', image: 'file', video: 'file-video', audio: 'file-audio', code: 'file-code',
+    text: 'file-text', archive: 'file-zip', document: 'file-text', symlink: 'file', other: 'file'
 };
 
 const TYPE_LABELS = {
@@ -24,7 +24,7 @@ const TYPE_LABELS = {
 };
 
 export function fileGlyph(type) {
-    return TYPE_GLYPH[type] || TYPE_GLYPH.other;
+    return TYPE_ICON[type] || TYPE_ICON.other;
 }
 
 export function fmtFileSize(bytes) {
@@ -36,7 +36,7 @@ export function fmtFileSize(bytes) {
 }
 
 export function FileIcon({ type = 'other' } = {}) {
-    return h('span', { class: 'ds-file-icon', 'data-file-type': type, 'aria-label': TYPE_LABELS[type] || 'file', role: 'img' }, fileGlyph(type));
+    return h('span', { class: 'ds-file-icon', 'data-file-type': type, 'aria-label': TYPE_LABELS[type] || 'file', role: 'img' }, Icon(fileGlyph(type)));
 }
 
 export function FileRow({ name, type = 'other', size, modified, code, onOpen, onAction, active, key } = {}) {
@@ -64,9 +64,9 @@ export function FileRow({ name, type = 'other', size, modified, code, onOpen, on
         h('span', { class: 'title' }, name),
         h('span', { class: 'ds-file-meta meta', 'aria-label': meta ? `metadata: ${meta}` : null }, meta || '—'),
         onAction ? h('span', { class: 'ds-file-actions', onclick: (e) => e.stopPropagation(), role: 'group', 'aria-label': `actions for ${name}` },
-            h('button', { class: 'ds-file-act', title: 'download', 'aria-label': `download ${name}`, onclick: () => onAction('download') }, '↓'),
-            h('button', { class: 'ds-file-act', title: 'rename', 'aria-label': `rename ${name}`, onclick: () => onAction('rename') }, '✎'),
-            h('button', { class: 'ds-file-act ds-file-act-warn', title: 'delete', 'aria-label': `delete ${name}`, onclick: () => onAction('delete') }, '✕')
+            h('button', { class: 'ds-file-act', title: 'download', 'aria-label': `download ${name}`, onclick: () => onAction('download') }, Icon('arrow-down')),
+            h('button', { class: 'ds-file-act', title: 'rename', 'aria-label': `rename ${name}`, onclick: () => onAction('rename') }, Icon('pencil')),
+            h('button', { class: 'ds-file-act ds-file-act-warn', title: 'delete', 'aria-label': `delete ${name}`, onclick: () => onAction('delete') }, Icon('x'))
         ) : null
     );
 }
@@ -141,7 +141,7 @@ export function UploadProgress({ items = [] } = {}) {
     );
 }
 
-export function EmptyState({ text = 'nothing here', glyph = '◌' } = {}) {
+export function EmptyState({ text = 'nothing here', glyph = Icon('circle') } = {}) {
     return h('div', { class: 'ds-file-empty' },
         h('span', { class: 'ds-file-empty-glyph' }, glyph),
         h('span', { class: 'ds-file-empty-text' }, text)
@@ -151,7 +151,7 @@ export function EmptyState({ text = 'nothing here', glyph = '◌' } = {}) {
 export function BreadcrumbPath({ segments = [], onNav, root = 'root' } = {}) {
     const parts = [h('button', { key: 'root', class: 'ds-crumb-seg', onclick: () => onNav && onNav(0) }, root)];
     segments.forEach((seg, i) => {
-        parts.push(h('span', { key: 'sep' + i, class: 'ds-crumb-sep' }, '›'));
+        parts.push(h('span', { key: 'sep' + i, class: 'ds-crumb-sep', 'aria-hidden': 'true' }, Icon('chevron-right', { size: 13 })));
         parts.push(h('button', {
             key: 'seg' + i,
             class: 'ds-crumb-seg' + (i === segments.length - 1 ? ' leaf' : ''),

package/src/components/freddie/runtime.js

@@ -5,6 +5,7 @@
 // a ref callback that uses the SDK's own applyDiff.
 
 import * as webjsx from '../../../vendor/webjsx/index.js';
+import { Icon } from '../shell.js';
 const h = webjsx.createElement;
 const applyDiff = webjsx.applyDiff;
 
@@ -57,7 +58,7 @@ export function makePage(setup, { initial = {} } = {}) {
             try { body = render(); }
             catch (e) {
                 body = h('div', { class: 'ds-alert ds-alert-error', role: 'alert' },
-                    h('span', { class: 'ds-alert-icon' }, '✕'),
+                    h('span', { class: 'ds-alert-icon' }, Icon('x')),
                     h('div', { class: 'ds-alert-content' },
                         h('div', { class: 'ds-alert-title' }, 'page render error'),
                         h('pre', { class: 'fd-pre' }, String(e && e.stack || e))));
@@ -70,7 +71,14 @@ export function makePage(setup, { initial = {} } = {}) {
             elRef = el;
             const r = setup(ctx);
             if (typeof r === 'function') render = r;
+            // Paint immediately, then again on the next microtask. Pages whose
+            // setup only seeds state synchronously (chat, batch) get a single
+            // ref-time paint; if that paint lands before the node is fully live
+            // in the document the diff can no-op, leaving an empty page-root.
+            // The deferred second paint guarantees content regardless of attach
+            // timing. Pages that also load() async are unaffected (idempotent).
             ctx.rerender();
+            Promise.resolve().then(() => ctx.rerender());
         };
         return h('div', { class: 'fd-page-root', ref });
     };
@@ -87,14 +95,14 @@ export function loadingState(label = 'loading…') {
 export function errorState(err, onRetry) {
     const msg = String(err && err.message || err);
     return h('div', { class: 'ds-alert ds-alert-error', role: 'alert' },
-        h('span', { class: 'ds-alert-icon' }, '✕'),
+        h('span', { class: 'ds-alert-icon' }, Icon('x')),
         h('div', { class: 'ds-alert-content' },
             h('div', { class: 'ds-alert-title' }, 'failed to load'),
             h('div', { class: 'ds-alert-message' }, msg),
-            onRetry ? h('button', { class: 'btn', onclick: onRetry, style: 'margin-top:8px' }, 'retry') : null));
+            onRetry ? h('button', { class: 'btn ds-alert-retry', onclick: onRetry }, 'retry') : null));
 }
 
-export function emptyState(text = 'nothing here yet', glyph = '◌') {
+export function emptyState(text = 'nothing here yet', glyph = Icon('circle')) {
     return h('div', { class: 'fd-empty', role: 'status' },
         h('div', { class: 'fd-empty-glyph', 'aria-hidden': 'true' }, glyph),
         h('div', { class: 'dim' }, text));

package/src/components/freddie.js

@@ -8,7 +8,7 @@ import * as webjsx from '../../vendor/webjsx/index.js';
 import { makePage, api, loadingState, errorState, emptyState } from './freddie/runtime.js';
 import { getRecentPaths, saveRecentPath, skillLabel, renderChatMessages } from './freddie/helpers.js';
 import { Panel, Row, Table, Kpi, PageHeader, SearchInput, TextField, Select } from './content.js';
-import { Chip, Btn } from './shell.js';
+import { Chip, Btn, Icon } from './shell.js';
 import { ChatMessage, ChatComposer } from './chat.js';
 
 const h = webjsx.createElement;
@@ -29,7 +29,7 @@ const noteAlert = (note) => note ? h('div', { class: 'ds-alert ds-alert-' + note
     h('span', { class: 'ds-alert-icon' }, '!'),
     h('div', { class: 'ds-alert-content' }, note.msg)) : null;
 // Manual refresh button for non-polling pages — parity with auto-refreshing ones.
-const refreshBtn = (onClick, busy) => Btn({ children: busy ? 'refreshing…' : '↻ refresh', disabled: !!busy, onClick, 'aria-label': 'refresh' });
+const refreshBtn = (onClick, busy) => Btn({ children: busy ? 'refreshing…' : [Icon('refresh'), ' refresh'], disabled: !!busy, onClick, 'aria-label': 'refresh' });
 // Non-blocking refresh-error banner: keep last-good content, surface the failure.
 const refreshError = (err) => err ? h('div', { class: 'ds-alert ds-alert-warn', role: 'status', 'aria-live': 'polite' },
     h('span', { class: 'ds-alert-icon' }, '!'),
@@ -104,7 +104,7 @@ export const chat = makePage((ctx) => {
             const reply = r.result || r.content || r.message || (r.messages && r.messages.at(-1)?.content) || JSON.stringify(r);
             ctx.state.messages.push({ role: 'assistant', text: String(reply), time: new Date().toLocaleTimeString() });
         } catch (e) {
-            ctx.state.messages.push({ role: 'assistant', text: '⚠ ' + String(e.message || e), time: new Date().toLocaleTimeString() });
+            ctx.state.messages.push({ role: 'assistant', text: 'Error: ' + String(e.message || e), time: new Date().toLocaleTimeString() });
         }
         ctx.set({ sending: false });
     }
@@ -116,7 +116,7 @@ export const chat = makePage((ctx) => {
             h('div', { class: 'chat-thread fd-chat-thread', role: 'log', 'aria-label': 'chat messages',
                 ref: stickyScroll },
                 s.messages.length ? s.messages.map((m, i) => ChatMessage({ ...m, key: i }))
-                    : emptyState('send a prompt to start', '✎'),
+                    : emptyState('send a prompt to start', Icon('forum')),
                 s.sending ? ChatMessage({ role: 'assistant', typing: true, key: '_typing' }) : null),
             ChatComposer({
                 value: s.draft,
@@ -225,7 +225,7 @@ export const projects = makePage((ctx) => {
             noteAlert(s.note),
             section('projects',
                 list.length ? list.map((p, i) => Row({
-                    key: i, code: p.name === activeName ? '●' : '○', title: p.name, sub: p.path || '',
+                    key: i, code: h('span', { class: 'ds-dot ' + (p.name === activeName ? 'ds-dot-on' : 'ds-dot-off'), 'aria-hidden': 'true' }), title: p.name, sub: p.path || '',
                     active: p.name === activeName,
                     trailing: h('span', { class: 'fd-row-actions' },
                         p.name !== activeName ? Btn({ children: 'activate', onClick: () => activate(p.name) }) : Chip({ tone: 'ok', children: 'active' }),
@@ -354,7 +354,7 @@ export const cron = makePage((ctx) => {
             PageHeader({ eyebrow: 'freddie', title: 'cron', lede: list.length + ' scheduled jobs' }),
             noteAlert(s.note),
             section('jobs', list.length ? list.map((j, i) => Row({
-                key: i, code: j.enabled ? '▶' : '⏸', title: j.cron, sub: (j.prompt || '').slice(0, 80),
+                key: i, code: j.enabled ? Icon('play') : Icon('pause'), title: j.cron, sub: (j.prompt || '').slice(0, 80),
                 trailing: Btn({ danger: true, children: 'delete', onClick: () => del(j.id) }),
             })) : emptyState('no cron jobs')),
             section('new job',