anentrypoint-design 0.0.148 → 0.0.151

package/package.json

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

package/src/components/community.js

@@ -1,6 +1,7 @@
 // Community surface — matches upstream signatures.
 
 import * as webjsx from '../../vendor/webjsx/index.js';
+import { Icon } from './shell.js';
 const h = webjsx.createElement;
 
 export function ServerIcon({ id, name, icon, active, badge, onClick } = {}) {
@@ -143,9 +144,9 @@ export function UserPanel({ name, tag, color, muted, deafened, onMute, onDeafen,
             tag ? h('div', { class: 'cm-user-tag' }, tag) : null
         ),
         h('div', { class: 'cm-user-controls' },
-            h('button', { class: 'cm-user-btn' + (muted ? ' muted' : ''), onclick: onMute, 'aria-label': muted ? 'Unmute microphone' : 'Mute microphone', 'aria-pressed': muted ? 'true' : 'false' }, muted ? '🔇' : '🎤'),
-            h('button', { class: 'cm-user-btn' + (deafened ? ' deafened' : ''), onclick: onDeafen, 'aria-label': deafened ? 'Undeafen' : 'Deafen', 'aria-pressed': deafened ? 'true' : 'false' }, deafened ? '🔕' : '🎧'),
-            h('button', { class: 'cm-user-btn', onclick: handleSettings, 'aria-label': 'Audio settings', title: 'Open audio settings' }, '⚙')
+            h('button', { class: 'cm-user-btn' + (muted ? ' muted' : ''), onclick: onMute, 'aria-label': muted ? 'Unmute microphone' : 'Mute microphone', 'aria-pressed': muted ? 'true' : 'false' }, Icon(muted ? 'mic-off' : 'mic')),
+            h('button', { class: 'cm-user-btn' + (deafened ? ' deafened' : ''), onclick: onDeafen, 'aria-label': deafened ? 'Undeafen' : 'Deafen', 'aria-pressed': deafened ? 'true' : 'false' }, Icon(deafened ? 'speaker-off' : 'speaker')),
+            h('button', { class: 'cm-user-btn', onclick: handleSettings, 'aria-label': 'Audio settings', title: 'Open audio settings' }, Icon('settings'))
         )
     );
 }
@@ -215,7 +216,7 @@ export function ChatHeader({ icon = '#', name, topic, toolbar = [] } = {}) {
 export function VoiceStrip({ channelName, status, muted, deafened, onMute, onDeafen, onLeave, open } = {}) {
     return h('div', { class: 'cm-voice-strip' + (open ? ' open' : ''), role: 'region', 'aria-label': 'voice controls' },
         h('div', { class: 'cm-vs-label' },
-            h('span', { class: 'cm-vs-channel' }, '🔊 ' + (channelName || 'voice')),
+            h('span', { class: 'cm-vs-channel' }, Icon('speaker'), ' ' + (channelName || 'voice')),
             h('span', { class: 'cm-vs-status' }, status || 'connected')
         ),
         h('button', {
@@ -223,13 +224,13 @@ export function VoiceStrip({ channelName, status, muted, deafened, onMute, onDea
             title: muted ? 'Unmute' : 'Mute',
             'aria-label': muted ? 'unmute microphone' : 'mute microphone',
             'aria-pressed': muted ? 'true' : 'false'
-        }, muted ? '🔇' : '🎤'),
+        }, Icon(muted ? 'mic-off' : 'mic')),
         h('button', {
             class: 'cm-vs-btn', type: 'button', onclick: onDeafen,
             title: deafened ? 'Undeafen' : 'Deafen',
             'aria-label': deafened ? 'undeafen' : 'deafen',
             'aria-pressed': deafened ? 'true' : 'false'
-        }, deafened ? '🔕' : '🎧'),
+        }, Icon(deafened ? 'speaker-off' : 'speaker')),
         h('button', {
             class: 'cm-vs-btn danger', type: 'button', onclick: onLeave,
             title: 'Leave voice', 'aria-label': 'leave voice channel'
@@ -242,12 +243,12 @@ export function MobileHeader({ title, onMenu, onMembers } = {}) {
         h('button', {
             class: 'cm-mh-btn', type: 'button', onclick: onMenu,
             title: 'Menu', 'aria-label': 'open navigation menu'
-        }, '☰'),
+        }, Icon('menu')),
         h('span', { class: 'cm-mh-title' }, title || ''),
         h('button', {
             class: 'cm-mh-btn', type: 'button', onclick: onMembers,
             title: 'Members', 'aria-label': 'show members'
-        }, '👥')
+        }, Icon('members'))
     );
 }
 

package/src/components/content.js

@@ -154,8 +154,15 @@ export function Kpi({ items = [] }) {
             h('div', { class: 'lbl' }, l))));
 }
 
-export function Table({ headers = [], rows = [], onRowClick, emptyText = 'nothing here yet' }) {
+export function Table({ headers = [], rows = [], onRowClick, emptyText = 'nothing here yet', rowLabels }) {
     if (!rows || rows.length === 0) return h('div', { class: 'empty' }, emptyText);
+    // rowLabels lets callers supply a plain-text label per row when the first
+    // cell is a vnode (so the aria-label is meaningful, not the literal 'row').
+    const labelFor = (row, i) => {
+        if (Array.isArray(rowLabels) && rowLabels[i] != null) return String(rowLabels[i]);
+        const c = row[0];
+        return c == null ? 'row' : (typeof c === 'object' ? 'row' : String(c));
+    };
     return h('table', { role: 'table' },
         h('thead', {}, h('tr', { role: 'row' }, ...headers.map((hd, i) => h('th', { key: i, scope: 'col', role: 'columnheader' }, hd)))),
         h('tbody', {}, ...rows.map((row, i) => h('tr', {
@@ -163,7 +170,7 @@ export function Table({ headers = [], rows = [], onRowClick, emptyText = 'nothin
             class: onRowClick ? 'clickable' : '',
             role: 'row',
             onclick: onRowClick ? () => onRowClick(i) : null,
-            ...(onRowClick ? { tabindex: '0', onkeydown: (e) => { if (e.key === 'Enter') onRowClick(i); } } : {})
+            ...(onRowClick ? { tabindex: '0', 'aria-label': 'open ' + labelFor(row, i), onkeydown: (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onRowClick(i); } } } : {})
         }, ...row.map((c, j) => h('td', { key: j, role: 'cell' }, c == null ? '' : (typeof c === 'object' ? c : String(c))))))));
 }
 
@@ -235,13 +242,14 @@ export function PageHeader({ title, lede, eyebrow, right }) {
     );
 }
 
-export function SearchInput({ value = '', placeholder = 'search…', onInput, onSubmit, name = 'q', key }) {
+export function SearchInput({ value = '', placeholder = 'search…', onInput, onSubmit, name = 'q', key, label }) {
     return h('input', {
         key,
         type: 'search',
         name,
         class: 'ds-search-input',
         placeholder,
+        'aria-label': label || placeholder,
         value,
         oninput: onInput ? (e) => onInput(e.target.value, e) : null,
         onkeydown: onSubmit ? (e) => { if (e.key === 'Enter') onSubmit(e.target.value, e); } : null

package/src/components/freddie.js

@@ -28,6 +28,19 @@ const section = (title, ...children) => Panel({ title, children: children.flat()
 const noteAlert = (note) => note ? h('div', { class: 'ds-alert ds-alert-' + note.kind, role: 'alert' },
     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' });
+// 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' }, '!'),
+    h('div', { class: 'ds-alert-content' }, 'refresh failed: ' + String(err.message || err))) : null;
+// Polite live region announcing async busy/done state to screen readers.
+const liveRegion = (msg) => h('div', { class: 'fd-sr-live', role: 'status', 'aria-live': 'polite' }, msg || '');
+// Truncate with a title tooltip carrying the full text.
+const trunc = (s, n = 90) => { const str = String(s || ''); return str.length > n ? { text: str.slice(0, n) + '…', title: str } : { text: str, title: null }; };
+// Autoscroll a thread only when the user is already near the bottom, so
+// scrolling up to read history is not yanked back down on the next render.
+const stickyScroll = (el) => { if (!el) return; const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 80; if (nearBottom) el.scrollTop = el.scrollHeight; };
 
 // ---- home ------------------------------------------------------------------
 
@@ -37,9 +50,10 @@ export const home = makePage((ctx) => {
             const [health, agents, sessions] = await Promise.all([
                 api('/api/health').catch(() => null),
                 api('/api/agents').catch(() => null),
-                api('/api/sessions').catch(() => []),
+                api('/api/sessions').catch((e) => ({ _err: e })),
             ]);
-            ctx.set({ loading: false, health, agents, sessions: Array.isArray(sessions) ? sessions : [], error: null });
+            const sessFailed = sessions && sessions._err;
+            ctx.set({ loading: false, health, agents, sessions: Array.isArray(sessions) ? sessions : [], sessFailed, error: null });
         } catch (e) { ctx.set({ loading: false, error: e }); }
     }
     load();
@@ -61,12 +75,14 @@ export const home = makePage((ctx) => {
                 [agents.count ?? 0, 'active agents'],
             ] }),
             section('recent sessions',
-                sessions.length
-                    ? Table({
-                        headers: ['session', 'platform', 'updated'],
-                        rows: sessions.slice(0, 8).map(x => [x.title || x.id, x.platform || '—', fmtAgo(x.updated_at)]),
-                    })
-                    : emptyState('no sessions yet')),
+                s.sessFailed
+                    ? errorState(new Error('could not load sessions'))
+                    : sessions.length
+                        ? Table({
+                            headers: ['session', 'platform', 'updated'],
+                            rows: sessions.slice(0, 8).map(x => { const t = trunc(x.title || x.id, 60); return [h('span', { title: t.title }, t.text), x.platform || '—', fmtAgo(x.updated_at)]; }),
+                        })
+                        : emptyState('no sessions yet')),
             section('health',
                 s.health ? Table({ headers: ['check', 'status'], rows: Object.entries(s.health).map(([k, v]) => [k, typeof v === 'object' ? JSON.stringify(v) : String(v)]) })
                     : emptyState('health endpoint unavailable')),
@@ -96,8 +112,9 @@ export const chat = makePage((ctx) => {
         const s = ctx.state;
         return h('div', { class: 'fd-chat' },
             PageHeader({ eyebrow: 'freddie', title: 'chat', lede: 'one-shot agent turns · POST /api/chat' }),
+            liveRegion(s.sending ? 'waiting for assistant reply' : ''),
             h('div', { class: 'chat-thread fd-chat-thread', role: 'log', 'aria-label': 'chat messages',
-                ref: (el) => { if (el) el.scrollTop = el.scrollHeight; } },
+                ref: stickyScroll },
                 s.messages.length ? s.messages.map((m, i) => ChatMessage({ ...m, key: i }))
                     : emptyState('send a prompt to start', '✎'),
                 s.sending ? ChatMessage({ role: 'assistant', typing: true, key: '_typing' }) : null),
@@ -114,11 +131,25 @@ export const chat = makePage((ctx) => {
 // ---- voice -----------------------------------------------------------------
 
 export const voice = makePage((ctx) => {
-    Object.assign(ctx.state, { loading: false });
-    return () => [
-        PageHeader({ eyebrow: 'freddie', title: 'voice', lede: 'voice surfaces' }),
-        section('status', emptyState('no voice backend wired in this build. configure a transcription/tts plugin to enable.', '🎙')),
-    ];
+    async function load() {
+        // Probe for a voice backend; the endpoint is optional, so a 404/!ok
+        // means "not wired" rather than an error to surface.
+        try { const v = await api('/api/voice').catch(() => null); ctx.set({ loading: false, voice: v, error: null }); }
+        catch (e) { ctx.set({ loading: false, error: e }); }
+    }
+    load();
+    return () => {
+        const s = ctx.state;
+        if (s.loading) return loadingState();
+        const v = s.voice;
+        const enabled = v && (v.enabled || v.transcription || v.tts);
+        return [
+            PageHeader({ eyebrow: 'freddie', title: 'voice', lede: 'voice surfaces', right: enabled ? Chip({ tone: 'ok', children: 'enabled' }) : Chip({ tone: 'neutral', children: 'not configured' }) }),
+            enabled
+                ? section('backends', Table({ headers: ['capability', 'status'], rows: [['transcription', v.transcription ? Chip({ tone: 'ok', children: 'on' }) : Chip({ tone: 'neutral', children: 'off' })], ['tts', v.tts ? Chip({ tone: 'ok', children: 'on' }) : Chip({ tone: 'neutral', children: 'off' })]] }))
+                : section('status', emptyState('no voice backend wired in this build. configure a transcription/tts plugin to enable.', '🎙')),
+        ];
+    };
 });
 
 // ---- sessions --------------------------------------------------------------
@@ -134,6 +165,7 @@ export const sessions = makePage((ctx) => {
         try { ctx.set({ loading: false, list: await api('/api/search?q=' + encodeURIComponent(q)), error: null }); }
         catch (e) { ctx.set({ loading: false, error: e }); }
     }
+    async function refresh() { ctx.set({ refreshing: true }); try { ctx.set({ list: await api('/api/sessions'), error: null }); } catch (e) { ctx.set({ error: e }); } ctx.set({ refreshing: false }); }
     async function open(id) {
         ctx.set({ selected: id, msgLoading: true });
         try { ctx.set({ messages: await api('/api/sessions/' + encodeURIComponent(id) + '/messages'), msgLoading: false }); }
@@ -146,12 +178,14 @@ export const sessions = makePage((ctx) => {
         if (s.error && !s.list) return errorState(s.error, load);
         const list = Array.isArray(s.list) ? s.list : [];
         return [
-            PageHeader({ eyebrow: 'freddie', title: 'sessions', lede: list.length + ' sessions' }),
-            SearchInput({ value: s.q, placeholder: 'search messages…', onInput: (v) => { s.q = v; }, onSubmit: (v) => search(v) }),
+            PageHeader({ eyebrow: 'freddie', title: 'sessions', lede: list.length + ' sessions', right: refreshBtn(refresh, s.refreshing) }),
+            s.error && s.list ? refreshError(s.error) : null,
+            SearchInput({ value: s.q, label: 'search sessions', placeholder: 'search messages…', onInput: (v) => { s.q = v; }, onSubmit: (v) => search(v) }),
             section('sessions',
                 list.length
                     ? Table({ headers: ['session', 'platform', 'updated'], onRowClick: (i) => open(list[i].id),
-                        rows: list.map(x => [x.title || x.id, x.platform || '—', fmtAgo(x.updated_at)]) })
+                        rowLabels: list.map(x => x.title || x.id),
+                        rows: list.map(x => { const t = trunc(x.title || x.id, 60); return [h('span', { title: t.title }, t.text), x.platform || '—', fmtAgo(x.updated_at)]; }) })
                     : emptyState('no sessions match')),
             s.selected ? section('messages · ' + s.selected,
                 s.msgLoading ? loadingState()
@@ -282,6 +316,7 @@ export const models = makePage((ctx) => {
         const status = s.sampler?.status || {};
         return [
             PageHeader({ eyebrow: 'freddie', title: 'models', lede: providers.length + ' providers', right: Btn({ primary: true, disabled: s.discovering, children: s.discovering ? 'discovering…' : 'discover', onClick: discover }) }),
+            liveRegion(s.discovering ? 'discovering models' : ''),
             section('providers', providers.length ? Table({
                 headers: ['provider', 'sampler', 'cached models'],
                 rows: providers.map(p => {
@@ -381,11 +416,16 @@ export const config = makePage((ctx) => {
         if (s.error) return errorState(s.error, load);
         const cfg = s.cfg || {};
         const flat = Object.entries(cfg).filter(([, v]) => typeof v !== 'object' || v === null);
+        const nested = Object.entries(cfg).filter(([, v]) => typeof v === 'object' && v !== null);
         const skinList = Array.isArray(s.skins) ? s.skins : (s.skins?.skins || s.skins?.available || []);
         const activeSkin = cfg.skin || s.skins?.active || '';
         return [
             PageHeader({ eyebrow: 'freddie', title: 'config', lede: 'runtime configuration' }),
             noteAlert(s.note),
+            liveRegion(s.busy ? 'saving configuration' : ''),
+            nested.length ? h('div', { class: 'ds-alert ds-alert-info', role: 'note' },
+                h('span', { class: 'ds-alert-icon' }, 'i'),
+                h('div', { class: 'ds-alert-content' }, nested.length + ' nested config ' + (nested.length === 1 ? 'object is' : 'objects are') + ' read-only here (' + nested.map(([k]) => k).join(', ') + ') — edit via the config file or raw view below.')) : null,
             skinList.length ? section('skin',
                 Select({ label: 'active skin', value: activeSkin, options: skinList, onChange: (v) => setSkin(v) })
             ) : null,
@@ -463,7 +503,19 @@ export const batch = makePage((ctx) => {
                 TextField({ label: 'prompts (one per line)', value: s.prompts, multiline: true, rows: 6, onInput: (v) => { s.prompts = v; } }),
                 TextField({ label: 'concurrency', type: 'number', value: String(s.concurrency), onInput: (v) => { s.concurrency = v; } }),
                 Btn({ primary: true, disabled: s.busy, children: s.busy ? 'running…' : 'run batch', onClick: run })),
-            s.result ? section('result', h('pre', { class: 'fd-pre' }, JSON.stringify(s.result, null, 2))) : null,
+            s.result ? section('result', (() => {
+                const r = s.result;
+                const items = Array.isArray(r.results) ? r.results : (Array.isArray(r) ? r : null);
+                if (!items) return h('pre', { class: 'fd-pre' }, JSON.stringify(r, null, 2));
+                return [
+                    Kpi({ items: [[items.length, 'prompts'], [items.filter(x => !x.error).length, 'ok'], [items.filter(x => x.error).length, 'errors']] }),
+                    Table({ headers: ['#', 'prompt', 'status', 'output'], rows: items.map((x, i) => {
+                        const p = trunc(x.prompt || x.input || '', 50);
+                        const out = trunc(x.error || x.result || x.content || x.output || '', 70);
+                        return [String(i + 1), h('span', { title: p.title }, p.text), x.error ? Chip({ tone: 'miss', children: 'error' }) : Chip({ tone: 'ok', children: 'ok' }), h('span', { title: out.title }, out.text)];
+                    }) }),
+                ];
+            })()) : null,
         ];
     };
 });

package/src/components/shell.js

@@ -65,6 +65,32 @@ export function Glyph({ children, color, size = 'base' }) {
     return h('span', { class: 'glyph', style }, children);
 }
 
+// Monochrome inline-SVG icons (stroke=currentColor) so chrome reads as one
+// coherent line-icon set instead of multicolor OS emoji. 16px box, 1.6 stroke.
+const ICON_PATHS = {
+    mic: '<path d="M12 3a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3z"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/>',
+    'mic-off': '<path d="M9 9v2a3 3 0 0 0 4.5 2.6M15 11V6a3 3 0 0 0-5.9-.8"/><path d="M5 11a7 7 0 0 0 11.5 5.4M12 18v3"/><path d="m4 4 16 16"/>',
+    speaker: '<path d="M11 5 6 9H3v6h3l5 4z"/><path d="M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13"/>',
+    'speaker-off': '<path d="M11 5 6 9H3v6h3l5 4z"/><path d="m17 9 4 6M21 9l-4 6"/>',
+    camera: '<rect x="3" y="6" width="13" height="12" rx="2"/><path d="m16 10 5-3v10l-5-3z"/>',
+    screen: '<rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/>',
+    phone: '<path d="M5 4h3l2 5-2 1a11 11 0 0 0 5 5l1-2 5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/>',
+    members: '<circle cx="9" cy="8" r="3"/><path d="M3 20a6 6 0 0 1 12 0M16 6a3 3 0 0 1 0 6M21 20a6 6 0 0 0-4-5.7"/>',
+    menu: '<path d="M4 6h16M4 12h16M4 18h16"/>',
+    settings: '<circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1 7 17M17 7l2.1-2.1"/>'
+};
+export function Icon(name, { size = 16 } = {}) {
+    const inner = ICON_PATHS[name];
+    if (!inner) return h('span', { class: 'glyph', 'aria-hidden': 'true' }, '');
+    return h('svg', {
+        class: 'ds-icon ds-icon-' + name,
+        width: String(size), height: String(size), viewBox: '0 0 24 24',
+        fill: 'none', stroke: 'currentColor', 'stroke-width': '1.6',
+        'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'aria-hidden': 'true',
+        dangerouslySetInnerHTML: { __html: inner }
+    });
+}
+
 export function Topbar({ brand = '247420', leaf = '', items = [], active = '', onNav, search } = {}) {
     return h('header', { class: 'app-topbar', role: 'banner' },
         Brand({ name: brand, leaf }),
@@ -151,7 +177,7 @@ export function AppShell({ topbar, crumb, side, main, status, narrow } = {}) {
             class: 'app-side-toggle', type: 'button',
             'aria-label': 'toggle navigation', 'aria-expanded': 'false', 'aria-controls': 'app-main',
             onclick: () => toggleSide(),
-        }, '☰') : null,
+        }, Icon('menu')) : null,
         topbar || null,
         crumb || null,
         h('div', { class: 'app-body' + (hasSide ? '' : ' no-side') },

package/src/components/voice.js

@@ -2,6 +2,7 @@
 // Pure factories returning webjsx vnodes. Class prefix: vx-*.
 
 import * as webjsx from '../../vendor/webjsx/index.js';
+import { Icon } from './shell.js';
 const h = webjsx.createElement;
 
 function fmtDur(s) {
@@ -32,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' ? '🎙' : '●'),
+        h('span', { class: 'vx-ptt-icon', 'aria-hidden': 'true' }, state === 'idle' ? Icon('mic') : '●'),
         h('span', { class: 'vx-ptt-label' }, label)
     );
 }
@@ -74,7 +75,7 @@ export function WebcamPreview({ videoStream = null, resolution = '640x480', fps
         h('div', { class: 'vx-cam-stage' },
             enabled
                 ? h('video', { class: 'vx-cam-video', ref: videoRef, autoplay: true, muted: true, playsinline: true })
-                : h('div', { class: 'vx-cam-placeholder' }, h('span', {}, '📷'), h('span', {}, 'Camera off'))
+                : h('div', { class: 'vx-cam-placeholder' }, h('span', {}, Icon('camera')), h('span', {}, 'Camera off'))
         ),
         h('div', { class: 'vx-cam-controls' },
             h('select', {
@@ -205,15 +206,15 @@ export function VoiceControls({ muted = false, deafened = false, cameraOn = fals
         h('span', { class: 'vx-vc-glyph', 'aria-hidden': 'true' }, glyph)
     );
     return h('div', { class: 'vx-vc', role: 'toolbar', 'aria-label': 'voice controls' },
-        btn('vx-vc-mic', !muted, muted ? 'Unmute' : 'Mute', muted ? '🔇' : '🎙', onMic),
-        btn('vx-vc-deafen', !deafened, deafened ? 'Undeafen' : 'Deafen', deafened ? '🔕' : '🔊', onDeafen),
-        btn('vx-vc-camera', cameraOn, cameraOn ? 'Stop camera' : 'Start camera', '📷', onCamera),
-        btn('vx-vc-screen', screenShareOn, screenShareOn ? 'Stop sharing' : 'Share screen', '🖥', onScreenShare),
-        btn('vx-vc-settings', false, 'Voice settings', '⚙', onSettings),
+        btn('vx-vc-mic', !muted, muted ? 'Unmute' : 'Mute', Icon(muted ? 'mic-off' : 'mic'), onMic),
+        btn('vx-vc-deafen', !deafened, deafened ? 'Undeafen' : 'Deafen', Icon(deafened ? 'speaker-off' : 'speaker'), onDeafen),
+        btn('vx-vc-camera', cameraOn, cameraOn ? 'Stop camera' : 'Start camera', Icon('camera'), onCamera),
+        btn('vx-vc-screen', screenShareOn, screenShareOn ? 'Stop sharing' : 'Share screen', Icon('screen'), onScreenShare),
+        btn('vx-vc-settings', false, 'Voice settings', Icon('settings'), onSettings),
         h('button', {
             type: 'button', class: 'vx-vc-btn vx-vc-leave', 'aria-label': 'Leave voice', title: 'Leave voice',
             onclick: onLeave ? (e) => onLeave(e) : null
-        }, h('span', { class: 'vx-vc-glyph', 'aria-hidden': 'true' }, '📞'))
+        }, h('span', { class: 'vx-vc-glyph', 'aria-hidden': 'true' }, Icon('phone')))
     );
 }
 

package/src/components.js

@@ -4,7 +4,7 @@ import * as webjsx from '../vendor/webjsx/index.js';
 export const h = webjsx.createElement;
 
 export {
-    Brand, Chip, Btn, Glyph, IconButton, Badge,
+    Brand, Chip, Btn, Glyph, Icon, IconButton, Badge,
     Topbar, Crumb, Side, Status, AppShell,
     Heading, Lede, Dot, Rail
 } from './components/shell.js';

package/src/kits/os/theme.css

@@ -55,6 +55,11 @@ html, body {
 .os-menubar > *, .os-taskbar > * { flex-shrink: 0; }
 .os-menubar .os-spacer { flex: 1 1 auto; min-width: 0; }
 .os-menubar .os-tray { margin-left: auto; }
+/* Many open windows must scroll within the bar, not overflow it. Mobile
+   already had this; promote it to all widths so a crowded desktop taskbar
+   scrolls horizontally instead of pushing buttons off-screen. */
+.os-taskbar { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
+.os-taskbar::-webkit-scrollbar { display: none; }
 
 .os-brand {
     color: var(--os-fg);
@@ -738,3 +743,26 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .tb-sessions-card-actions button:hover { background: color-mix(in oklab, var(--fg, #1a1a1a) 6%, transparent); }
 .ds-247420 .tb-sessions-card-actions button.danger:hover { background: #d33; color: #fff; border-color: #d33; }
 .ds-247420 .tb-sessions-empty-mid { padding: 40px; text-align: center; opacity: 0.6; font-size: 13px; }
+
+/* ---- prefers-contrast: more — strengthen borders + focus so the translucent
+   chrome stays legible under forced/high-contrast user settings. ---- */
+@media (prefers-contrast: more) {
+  .ds-247420 .wm-win { border-color: var(--fg, #1a1a1a); }
+  .ds-247420 .wm-bar { border-bottom: 1px solid var(--fg, #1a1a1a); }
+  .ds-247420 .os-menubar,
+  .ds-247420 .os-taskbar { border-color: var(--fg, #1a1a1a); }
+  .ds-247420 .tb-sess-chip,
+  .ds-247420 .tb-sessions-card,
+  .ds-247420 .tb-sessions-btn { border-color: var(--fg, #1a1a1a); }
+  .ds-247420 :focus-visible { outline: 2px solid var(--fg, #1a1a1a); outline-offset: 2px; }
+}
+
+/* ---- print: a web-OS desktop has no meaningful print form. Suppress the
+   live chrome so a Ctrl+P does not waste pages on translucent panels. ---- */
+@media print {
+  .os-menubar, .os-taskbar, .wm-snap-preview,
+  .tb-sess-overlay, .tb-switching, .wm-switcher { display: none !important; }
+  .wm-root, .wm-canvas { position: static !important; transform: none !important; overflow: visible !important; }
+  .wm-win { position: static !important; box-shadow: none !important; border: 1px solid #000 !important; page-break-inside: avoid; margin: 0 0 12px; width: auto !important; height: auto !important; }
+  .wm-win.wm-min { display: none !important; }
+}

package/src/kits/os/wm.css

@@ -25,6 +25,12 @@
     overflow: hidden;
 }
 .wm-win.wm-focused { box-shadow: inset 4px 0 0 var(--os-accent); }
+/* Promote to a compositor layer only for the duration of a drag/resize so the
+   per-frame left/top/width/height writes don't force a main-thread layout each
+   pointermove. Released on pointerup (class removed) to avoid the permanent
+   will-change memory/perf anti-pattern. */
+.wm-win.wm-dragging { will-change: left, top; }
+.wm-win.wm-resizing { will-change: width, height; }
 
 .wm-bar {
     display: flex;