anentrypoint-design 0.0.365 → 0.0.367

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.365",
+  "version": "0.0.367",
   "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/chat.js

@@ -10,6 +10,7 @@ import { fmtFileSize } from './files.js';
 import { EmojiPicker } from './overlay-primitives.js';
 import { t } from '../i18n.js';
 import { renderMessagePart as sharedRenderMessagePart, safeUrl as sharedSafeUrl, renderInline as sharedRenderInline, injectCodeCopy as sharedInjectCodeCopy } from './chat-message-parts.js';
+import { avatarInitial } from './content.js';
 
 // Matches a trailing `:keyword` at the end of the composer draft (optionally
 // preceded by whitespace/start-of-string) so typing `:smile` opens an inline
@@ -119,7 +120,7 @@ export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typ
     const cls = 'chat-msg ' + resolvedWho + (aicat && resolvedWho === 'them' ? ' aicat' : '') + (isCentered ? ' centered' : '') + (isFlat ? ' chat-msg-flat' : '');
     const fallbackAvatar = avatar != null
         ? avatar
-        : (resolvedWho === 'you' ? 'u' : (name ? String(name).trim().charAt(0).toUpperCase() || '?' : '?'));
+        : (resolvedWho === 'you' ? 'u' : avatarInitial(name));
     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')))];

package/src/components/community.js

@@ -2,6 +2,7 @@
 
 import * as webjsx from '../../vendor/webjsx/index.js';
 import { Icon } from './shell.js';
+import { Avatar, avatarInitial } from './content.js';
 import { sanitizeHtml } from '../markdown.js';
 const h = webjsx.createElement;
 
@@ -10,7 +11,6 @@ const h = webjsx.createElement;
 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', {
         class: 'cm-server-icon' + (active ? ' active' : ''),
         onclick: onClick,
@@ -27,7 +27,7 @@ export function ServerIcon({ id, name, icon, active, badge, onClick } = {}) {
         }
     },
         h('span', { class: 'cm-server-pill' }),
-        icon ? h('img', { src: icon, alt: name }) : h('span', {}, initials),
+        icon ? h('img', { src: icon, alt: name }) : Avatar({ name, shape: 'square', initialsCount: 2 }),
         badge ? h('span', { class: 'cm-server-badge' }, badge > 99 ? '99+' : String(badge)) : null
     );
 }
@@ -88,7 +88,7 @@ export function ChannelItem({ id, name, type = 'text', active, voiceActive, voic
         ),
         voiceActive && participants.length ? h('div', { class: 'cm-ch-voice-users' },
             ...participants.map(p => h('div', { class: 'cm-ch-voice-user' + (p.speaking ? ' speaking' : '') },
-                h('div', { class: 'cm-ch-voice-user-avatar', style: p.color ? `--avatar-bg:${p.color}` : null }, (p.identity || '?').slice(0, 1).toUpperCase()),
+                h('div', { class: 'cm-ch-voice-user-avatar', style: p.color ? `--avatar-bg:${p.color}` : null }, avatarInitial(p.identity)),
                 h('span', { class: 'cm-ch-voice-user-name' }, p.identity)
             ))
         ) : null
@@ -120,7 +120,7 @@ export function ChannelCategory({ id, name, channels = [], collapsed, activeId,
 }
 
 export function VoiceUser({ identity, speaking, color } = {}) {
-    const initial = (identity || '?').slice(0, 1).toUpperCase();
+    const initial = avatarInitial(identity);
     return h('div', { class: 'cm-voice-user' + (speaking ? ' speaking' : '') },
         h('div', { class: 'cm-voice-user-avatar', style: color ? `--avatar-bg:${color}` : null }, initial),
         h('span', { class: 'cm-voice-user-name' }, identity)
@@ -128,7 +128,7 @@ export function VoiceUser({ identity, speaking, color } = {}) {
 }
 
 export function UserPanel({ name, tag, color, muted, deafened, onMute, onDeafen, onSettings } = {}) {
-    const initial = (name || '?').slice(0, 1).toUpperCase();
+    const initial = avatarInitial(name);
     const handleSettings = (e) => {
         e.preventDefault();
         if (onSettings) {
@@ -204,7 +204,7 @@ export function ChannelSidebar({ serverName, channels = [], categories = [], act
 }
 
 export function MemberItem({ identity, name, color, status = 'online' } = {}) {
-    const initial = (name || identity || '?').slice(0, 1).toUpperCase();
+    const initial = avatarInitial(name || identity);
     return h('div', { class: 'cm-member-item' },
         h('div', { class: 'cm-member-avatar', style: color ? `--avatar-bg:${color}` : null },
             h('span', { class: 'cm-member-status' + (status === 'online' ? ' online' : '') }),

package/src/components/content.js

@@ -3,17 +3,33 @@
 // ProjectView, Form. Pure factories.
 
 import * as webjsx from '../../vendor/webjsx/index.js';
-import { Btn, Heading, Lede, Dot, Icon } from './shell.js';
+import { Btn, Heading, Lede, Dot, Icon, Chip } from './shell.js';
 const h = webjsx.createElement;
 
 // Avatar — generic identity disc: an image when `src` resolves, else a
 // letter fallback derived from `name`/`fallback`. Kit previously only had
 // scoped one-offs (chat.js `.chat-avatar`, community.js `.cm-user-avatar`)
 // duplicating this same letter-fallback logic; this is the reusable version.
-export function Avatar({ name, src, fallback, size = 'md', key } = {}) {
-    const letter = fallback != null ? fallback
-        : (name ? String(name).trim().charAt(0).toUpperCase() || '?' : '?');
-    const cls = 'ds-avatar ds-avatar-' + size;
+// avatarInitial — the single shared letter-fallback computation behind
+// Avatar and every custom-colored avatar wrapper (community.js's voice/user/
+// member rows use their own `--avatar-bg` CSS-variable styling and can't
+// drop in the Avatar element directly, but still want the SAME fallback
+// text, not their own independently-drifting .slice(0,n).toUpperCase()).
+// Empty-guards to '?' identically everywhere it's used.
+export function avatarInitial(name, count = 1) {
+    return name ? String(name).trim().slice(0, count).toUpperCase() || '?' : '?';
+}
+
+// Avatar — the single letter-fallback/image avatar primitive. `initialsCount`
+// (default 1) controls how many leading characters of `name` become the
+// fallback letters when no `src`/`fallback` is given (community.js's
+// pill-shaped ServerIcon wants 2); `shape` ('circle' default, or 'square')
+// covers non-circular consumers without each hand-rolling its own
+// .slice(0,n).toUpperCase() (previously duplicated across 5+ call sites in
+// community.js and chat.js with drifting char-counts/empty-guards).
+export function Avatar({ name, src, fallback, size = 'md', shape = 'circle', initialsCount = 1, key } = {}) {
+    const letter = fallback != null ? fallback : avatarInitial(name, initialsCount);
+    const cls = 'ds-avatar ds-avatar-' + size + (shape === 'square' ? ' ds-avatar-square' : '');
     if (src) return h('img', { key, class: cls, src, alt: name || '', loading: 'lazy' });
     return h('span', { key, class: cls, 'aria-hidden': !!name, role: name ? 'img' : undefined, 'aria-label': name || undefined }, letter);
 }
@@ -474,6 +490,52 @@ export function Table({ headers = [], rows = [], onRowClick, emptyText = 'nothin
         }, ...row.map((c, j) => h('td', { key: j }, c == null ? '' : (typeof c === 'object' ? c : String(c)))))))));
 }
 
+// HealthTable — generic health-check table: given an arbitrary
+// `{checkName: value}` object, infers a Chip tone per row from the value's
+// own type (boolean true/false -> ok/miss Chip, object -> truncated JSON
+// string, else the raw value stringified) so a new backend health check
+// appears with zero per-check hardcoding at the call site. Ported from
+// freddie's health page (src/components/freddie.js's `health` page), which
+// hand-rolled this exact inference inline; promoted here as a reusable
+// primitive for any dashboard/monitoring surface with a health-check map
+// (agentgui's Live tab included). `okLabel`/`missLabel` let a caller
+// localize the two Chip strings; `jsonTruncate` caps the JSON.stringify
+// length for object-shaped values (matches freddie's own truncation width).
+export function HealthTable({ checks = {}, emptyText = 'no health data', okLabel = 'ok', missLabel = 'no', jsonTruncate = 60 } = {}) {
+    const entries = Object.entries(checks);
+    if (!entries.length) return h('div', { class: 'empty' }, emptyText);
+    const rows = entries.map(([name, v]) => {
+        let cell;
+        if (typeof v === 'object' && v !== null) {
+            const s = JSON.stringify(v);
+            cell = h('span', { title: s.length > jsonTruncate ? s : null }, s.length > jsonTruncate ? s.slice(0, jsonTruncate) + '…' : s);
+        } else if (v === true) cell = Chip({ tone: 'ok', children: okLabel });
+        else if (v === false) cell = Chip({ tone: 'miss', children: missLabel });
+        else cell = String(v);
+        return [name, cell];
+    });
+    return Table({ headers: ['check', 'status'], rows });
+}
+
+// ProcessRegistryTable — generic long-lived-process registry table: given a
+// list of `{kind, key, state}`-shaped rows (any in-flight process the host
+// tracks — an xstate machine, an ACP/direct-runner session, a background
+// job), renders a uniform table. Ported from freddie's `machines` page
+// (src/components/freddie.js), which used this exact shape for its xstate
+// machine census; generalized here since the shape (kind/key/state) applies
+// equally to agentgui's Live tab listing in-flight agent runner processes.
+// `extraColumns` lets a caller append columns beyond the base three (e.g. a
+// stop-action button) without forking the whole table.
+export function ProcessRegistryTable({ processes = [], emptyText = 'no live processes', extraColumns = [] } = {}) {
+    if (!processes.length) return h('div', { class: 'empty' }, emptyText);
+    const headers = ['kind', 'key', 'state', ...extraColumns.map(c => c.header)];
+    const rows = processes.map(p => [
+        p.kind || '—', p.key || '—', p.state || '—',
+        ...extraColumns.map(c => c.render(p))
+    ]);
+    return Table({ headers, rows });
+}
+
 export function HomeView({ state = {}, onNav, onToggleWork, works = [], posts = [], manifesto = [], currentlyShipping } = {}) {
     return [
         Hero({

package/src/components/freddie/runtime.js

@@ -117,3 +117,20 @@ export function emptyState(text = 'nothing here yet', glyph = Icon('circle')) {
         h('div', { class: 'fd-empty-glyph', 'aria-hidden': 'true' }, glyph),
         h('div', { class: 'dim' }, text));
 }
+
+// refreshError — the never-blank-on-refresh-error convention: a monitoring
+// page whose poll fails AFTER already having last-good data keeps that data
+// visible and shows this non-blocking banner instead of falling back to
+// errorState's full-page replacement. errorState (above) is still correct
+// for the FIRST failed poll (no last-good data exists yet to keep showing) -
+// callers gate on `err && !data` -> errorState, `err && data` -> refreshError
+// alongside the still-rendered data, exactly as every freddie.js page does.
+// Previously a private per-file const; promoted here so any monitoring
+// surface (agentgui's Live tab included) can reuse the same convention
+// instead of re-deriving its own banner markup.
+export function refreshError(err) {
+    if (!err) return null;
+    return 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)));
+}

package/src/components/freddie.js

@@ -5,7 +5,7 @@
 // the single maintenance point for freddie GUI per the dynamic-stack contract.
 
 import * as webjsx from '../../vendor/webjsx/index.js';
-import { makePage, api, loadingState, errorState, emptyState } from './freddie/runtime.js';
+import { makePage, api, loadingState, errorState, emptyState, refreshError } 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, Icon } from './shell.js';
@@ -28,10 +28,6 @@ const noteAlert = (note) => note ? h('div', { class: 'ds-alert ds-alert-' + note
     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…' : [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' }, '!'),
-    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.

package/src/components/overlay-primitives.js

@@ -189,11 +189,25 @@ export function Popover({ open, anchorEl, onClose, placement = 'bottom-start', c
     return null;
 }
 
-// Dropdown — button trigger + portaled menu.
-export function Dropdown({ trigger, items = [], onSelect, placement = 'bottom-start', ariaLabel } = {}) {
+// useRovingMenu — the shared open/close/outside-click/roving-nav/typeahead
+// state machine behind Dropdown, PermissionMenu, and MenuButton. All three
+// previously reimplemented an identical ~70-line skeleton (byte-identical
+// close() teardown, near-identical onMenuKey); this factors it into one
+// place so a fix/feature (e.g. typeahead) lands for every consumer instead
+// of drifting per-copy. `itemSelector` picks the live focusable items inside
+// the rendered menu (each consumer uses a different role: menuitem /
+// menuitemcheckbox / menuitemradio); `getLabel(item)` + `items` enable
+// typeahead when `typeahead` is true (Dropdown/MenuButton have it,
+// PermissionMenu's categories aren't typically typeahead-searched so it
+// defaults off but can opt in). Returns { refFn, onTrigClick, onTrigKey,
+// openMenu, close, focusItem, isOpen } — the caller still owns rendering the
+// menu's DOM/CSS (role/class per consumer stays distinct) and wires
+// `menuEl.addEventListener('keydown', onMenuKey)` itself via the returned
+// `onMenuKey`, since only the caller knows when its menuEl exists.
+export function useRovingMenu({ itemSelector, items = [], getLabel = (it) => it.label, typeahead = false, placement = 'bottom-start', onOpenChange } = {}) {
     let triggerEl = null, open = false, menuEl = null, floating = null, typeBuf = '', typeTimer = null;
-    const liveBtns = () => menuEl ? [...menuEl.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')] : [];
-    const focusItem = (idx) => { const b = liveBtns(); if (!b.length) return; b[((idx % b.length) + b.length) % b.length].focus(); };
+    const liveItems = () => menuEl ? [...menuEl.querySelectorAll(itemSelector)] : [];
+    const focusItem = (idx) => { const b = liveItems(); if (!b.length) return; b[((idx % b.length) + b.length) % b.length].focus(); };
     const onDown = (e) => { if (menuEl && menuEl.contains(e.target)) return; if (triggerEl && triggerEl.contains(e.target)) return; close(false); };
     const close = (restore = true) => {
         if (!open) return; open = false;
@@ -203,32 +217,58 @@ export function Dropdown({ trigger, items = [], onSelect, placement = 'bottom-st
         document.removeEventListener('mousedown', onDown, true);
         if (triggerEl) triggerEl.setAttribute('aria-expanded', 'false');
         if (restore && triggerEl) triggerEl.focus();
+        if (onOpenChange) onOpenChange(false);
     };
-    const select = (it) => { if (it.disabled || it.separator) return; if (onSelect) onSelect(it.id, it); close(); };
     const onMenuKey = (e) => {
-        const b = liveBtns(), idx = b.indexOf(document.activeElement);
+        const b = liveItems(), idx = b.indexOf(document.activeElement);
         if (e.key === 'Escape') { e.preventDefault(); close(); }
         else if (e.key === 'ArrowDown') { e.preventDefault(); focusItem(idx + 1); }
         else if (e.key === 'ArrowUp') { e.preventDefault(); focusItem(idx - 1); }
         else if (e.key === 'Home') { e.preventDefault(); focusItem(0); }
         else if (e.key === 'End') { e.preventDefault(); focusItem(b.length - 1); }
         else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (idx >= 0) b[idx].click(); }
-        else if (e.key.length === 1 && /\S/.test(e.key)) {
+        else if (typeahead && e.key.length === 1 && /\S/.test(e.key)) {
             typeBuf += e.key.toLowerCase();
             if (typeTimer) clearTimeout(typeTimer);
             typeTimer = setTimeout(() => { typeBuf = ''; }, 600);
-            const m = items.findIndex(it => !it.separator && !it.disabled && (it.label || '').toLowerCase().startsWith(typeBuf));
-            if (m >= 0) focusItem(items.slice(0, m).filter(it => !it.separator && !it.disabled).length);
+            const selectable = items.filter(it => !it.separator && !it.disabled && !it.unavailable);
+            const m = selectable.findIndex(it => (getLabel(it) || '').toLowerCase().startsWith(typeBuf));
+            if (m >= 0) focusItem(m);
         }
     };
-    const openMenu = (focusFirst = true) => {
+    const openMenu = (buildMenuEl, focusFirst = true) => {
         if (open || !triggerEl) return;
         open = true;
-        menuEl = document.createElement('div');
-        menuEl.className = 'ds-popover ds-dropdown-menu';
-        menuEl.setAttribute('role', 'menu');
-        if (ariaLabel) menuEl.setAttribute('aria-label', ariaLabel);
+        menuEl = buildMenuEl();
         menuEl.tabIndex = -1;
+        document.body.appendChild(menuEl);
+        menuEl.addEventListener('keydown', onMenuKey);
+        floating = useFloating(triggerEl, menuEl, { placement, offset: FLOAT_OFFSET_DROPDOWN });
+        document.addEventListener('mousedown', onDown, true);
+        triggerEl.setAttribute('aria-expanded', 'true');
+        if (focusFirst && liveItems().length) queueMicrotask(() => focusItem(0));
+        if (onOpenChange) onOpenChange(true);
+    };
+    const onTrigClick = (buildMenuEl) => { if (open) close(false); else openMenu(buildMenuEl, true); };
+    const onTrigKey = (e, buildMenuEl) => { if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (!open) openMenu(buildMenuEl, true); else focusItem(0); } };
+    const refFn = (dsFlag) => (el) => {
+        if (!el || el[dsFlag]) return;
+        el[dsFlag] = true; triggerEl = el;
+        el.setAttribute('aria-haspopup', 'menu');
+        el.setAttribute('aria-expanded', 'false');
+    };
+    return { refFn, onTrigClick, onTrigKey, openMenu, close, focusItem, isOpen: () => open };
+}
+
+// Dropdown — button trigger + portaled menu.
+export function Dropdown({ trigger, items = [], onSelect, placement = 'bottom-start', ariaLabel } = {}) {
+    const menu = useRovingMenu({ itemSelector: '[role="menuitem"]:not([aria-disabled="true"])', items, typeahead: true, placement });
+    const select = (it) => { if (it.disabled || it.separator) return; if (onSelect) onSelect(it.id, it); menu.close(); };
+    const buildMenuEl = () => {
+        const el = document.createElement('div');
+        el.className = 'ds-popover ds-dropdown-menu';
+        el.setAttribute('role', 'menu');
+        if (ariaLabel) el.setAttribute('aria-label', ariaLabel);
         const tree = h('div', { class: 'ds-dropdown-list' },
             ...items.map((it, i) => it.separator
                 ? h('div', { key: 'sep' + i, class: 'ds-dropdown-separator', role: 'separator' })
@@ -241,28 +281,17 @@ export function Dropdown({ trigger, items = [], onSelect, placement = 'bottom-st
                     it.glyph != null ? h('span', { class: 'ds-dropdown-glyph', 'aria-hidden': 'true' }, it.glyph) : null,
                     h('span', { class: 'ds-dropdown-label' }, it.label)
                 )));
-        webjsx.applyDiff(menuEl, tree);
-        document.body.appendChild(menuEl);
-        menuEl.addEventListener('keydown', onMenuKey);
-        floating = useFloating(triggerEl, menuEl, { placement, offset: FLOAT_OFFSET_DROPDOWN });
-        document.addEventListener('mousedown', onDown, true);
-        triggerEl.setAttribute('aria-expanded', 'true');
-        if (focusFirst) queueMicrotask(() => focusItem(0));
-    };
-    const onTrigClick = () => { if (open) close(false); else openMenu(true); };
-    const onTrigKey = (e) => { if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (!open) openMenu(true); else focusItem(0); } };
-    const refFn = (el) => {
-        if (!el || el._dsDropdown) return;
-        el._dsDropdown = true; triggerEl = el;
-        el.addEventListener('click', onTrigClick);
-        el.addEventListener('keydown', onTrigKey);
-        el.setAttribute('aria-haspopup', 'menu');
-        el.setAttribute('aria-expanded', 'false');
+        webjsx.applyDiff(el, tree);
+        return el;
     };
+    const onTrigClick = () => menu.onTrigClick(buildMenuEl);
+    const onTrigKey = (e) => menu.onTrigKey(e, buildMenuEl);
+    const refFn = menu.refFn('_dsDropdown');
     const child = (typeof trigger === 'function') ? trigger() : trigger;
+    const wireRef = (el) => { refFn(el); if (el) { el.addEventListener('click', onTrigClick); el.addEventListener('keydown', onTrigKey); } };
     return (child && child.type)
-        ? webjsx.createElement(child.type, { ...(child.props || {}), ref: refFn }, ...(child.children || []))
-        : h('button', { type: 'button', class: 'ds-dropdown-trigger', ref: refFn }, child || 'Menu');
+        ? webjsx.createElement(child.type, { ...(child.props || {}), ref: wireRef }, ...(child.children || []))
+        : h('button', { type: 'button', class: 'ds-dropdown-trigger', ref: wireRef }, child || 'Menu');
 }
 
 // PermissionMenu — a role=menu of role=menuitemcheckbox rows, one per
@@ -272,31 +301,14 @@ export function Dropdown({ trigger, items = [], onSelect, placement = 'bottom-st
 // element, a document-level mousedown listener, focus restored to the
 // trigger on close) rather than reimplementing that plumbing.
 export function PermissionMenu({ trigger, categories = [], approved = [], onToggle, onToggleAll, placement = 'bottom-start', ariaLabel = 'Permissions' } = {}) {
-    let triggerEl = null, open = false, menuEl = null, floating = null;
     const isApproved = (id) => approved.indexOf(id) !== -1;
-    const liveItems = () => menuEl ? [...menuEl.querySelectorAll('[role="menuitemcheckbox"]')] : [];
-    const focusItem = (idx) => { const items = liveItems(); if (!items.length) return; items[((idx % items.length) + items.length) % items.length].focus(); };
-    const onDown = (e) => { if (menuEl && menuEl.contains(e.target)) return; if (triggerEl && triggerEl.contains(e.target)) return; close(false); };
-    const close = (restore = true) => {
-        if (!open) return; open = false;
-        if (floating) { floating.dispose(); floating = null; }
-        if (menuEl && menuEl.parentNode) menuEl.parentNode.removeChild(menuEl);
-        menuEl = null;
-        document.removeEventListener('mousedown', onDown, true);
-        if (triggerEl) triggerEl.setAttribute('aria-expanded', 'false');
-        if (restore && triggerEl) triggerEl.focus();
-    };
+    const menu = useRovingMenu({ itemSelector: '[role="menuitemcheckbox"]', items: categories, getLabel: (cat) => cat.label || cat.id, typeahead: true, placement });
     const toggle = (cat) => { if (onToggle) onToggle(cat.id, !isApproved(cat.id)); };
-    const onMenuKey = (e) => {
-        const items = liveItems(), idx = items.indexOf(document.activeElement);
-        if (e.key === 'Escape') { e.preventDefault(); close(); }
-        else if (e.key === 'ArrowDown') { e.preventDefault(); focusItem(idx + 1); }
-        else if (e.key === 'ArrowUp') { e.preventDefault(); focusItem(idx - 1); }
-        else if (e.key === 'Home') { e.preventDefault(); focusItem(0); }
-        else if (e.key === 'End') { e.preventDefault(); focusItem(items.length - 1); }
-        else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (idx >= 0) items[idx].click(); }
-    };
-    const renderMenu = () => {
+    const buildMenuEl = () => {
+        const el = document.createElement('div');
+        el.className = 'ds-popover ov-perm-menu';
+        el.setAttribute('role', 'menu');
+        el.setAttribute('aria-label', ariaLabel);
         const rows = categories.map((cat, i) => h('button', {
             key: cat.id || i, type: 'button', role: 'menuitemcheckbox',
             'aria-checked': isApproved(cat.id) ? 'true' : 'false',
@@ -307,38 +319,17 @@ export function PermissionMenu({ trigger, categories = [], approved = [], onTogg
         const actionsRow = h('div', { class: 'ov-perm-actions' },
             h('button', { type: 'button', class: 'ov-perm-action', onclick: () => onToggleAll && onToggleAll(true) }, 'Approve all'),
             h('button', { type: 'button', class: 'ov-perm-action', onclick: () => onToggleAll && onToggleAll(false) }, 'Revoke all'));
-        return h('div', { class: 'ov-perm-list' }, ...rows, actionsRow);
-    };
-    const openMenu = (focusFirst = true) => {
-        if (open || !triggerEl) return;
-        open = true;
-        menuEl = document.createElement('div');
-        menuEl.className = 'ds-popover ov-perm-menu';
-        menuEl.setAttribute('role', 'menu');
-        menuEl.setAttribute('aria-label', ariaLabel);
-        menuEl.tabIndex = -1;
-        webjsx.applyDiff(menuEl, renderMenu());
-        document.body.appendChild(menuEl);
-        menuEl.addEventListener('keydown', onMenuKey);
-        floating = useFloating(triggerEl, menuEl, { placement, offset: FLOAT_OFFSET_DROPDOWN });
-        document.addEventListener('mousedown', onDown, true);
-        triggerEl.setAttribute('aria-expanded', 'true');
-        if (focusFirst) queueMicrotask(() => focusItem(0));
-    };
-    const onTrigClick = () => { if (open) close(false); else openMenu(true); };
-    const onTrigKey = (e) => { if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (!open) openMenu(true); else focusItem(0); } };
-    const refFn = (el) => {
-        if (!el || el._dsPermMenu) return;
-        el._dsPermMenu = true; triggerEl = el;
-        el.addEventListener('click', onTrigClick);
-        el.addEventListener('keydown', onTrigKey);
-        el.setAttribute('aria-haspopup', 'menu');
-        el.setAttribute('aria-expanded', 'false');
+        webjsx.applyDiff(el, h('div', { class: 'ov-perm-list' }, ...rows, actionsRow));
+        return el;
     };
+    const onTrigClick = () => menu.onTrigClick(buildMenuEl);
+    const onTrigKey = (e) => menu.onTrigKey(e, buildMenuEl);
+    const refFn = menu.refFn('_dsPermMenu');
     const child = (typeof trigger === 'function') ? trigger() : trigger;
+    const wireRef = (el) => { refFn(el); if (el) { el.addEventListener('click', onTrigClick); el.addEventListener('keydown', onTrigKey); } };
     return (child && child.type)
-        ? webjsx.createElement(child.type, { ...(child.props || {}), ref: refFn }, ...(child.children || []))
-        : h('button', { type: 'button', class: 'ov-perm-trigger', ref: refFn }, child || 'Permissions');
+        ? webjsx.createElement(child.type, { ...(child.props || {}), ref: wireRef }, ...(child.children || []))
+        : h('button', { type: 'button', class: 'ov-perm-trigger', ref: wireRef }, child || 'Permissions');
 }
 
 // ApprovalPrompt — an inline, in-thread tool-permission card (as opposed to
@@ -800,44 +791,13 @@ export function AuthModal({ mode = 'extension', error = '', busy = false, open =
 // nothing focusable); roving nav on a single-option list simply refocuses
 // the same item on every Arrow press (wrap-to-self), never throws.
 export function MenuButton({ trigger, items = [], selected, onSelect, onRetry, placement = 'bottom-start', ariaLabel = 'Menu', emptyText = 'No options available' } = {}) {
-    let triggerEl = null, open = false, menuEl = null, floating = null, typeBuf = '', typeTimer = null;
-    const liveBtns = () => menuEl ? [...menuEl.querySelectorAll('[role="menuitemradio"]:not([aria-disabled="true"])')] : [];
-    const focusItem = (idx) => { const b = liveBtns(); if (!b.length) return; b[((idx % b.length) + b.length) % b.length].focus(); };
-    const onDown = (e) => { if (menuEl && menuEl.contains(e.target)) return; if (triggerEl && triggerEl.contains(e.target)) return; close(false); };
-    const close = (restore = true) => {
-        if (!open) return; open = false;
-        if (floating) { floating.dispose(); floating = null; }
-        if (menuEl && menuEl.parentNode) menuEl.parentNode.removeChild(menuEl);
-        menuEl = null;
-        document.removeEventListener('mousedown', onDown, true);
-        if (triggerEl) triggerEl.setAttribute('aria-expanded', 'false');
-        if (restore && triggerEl) triggerEl.focus();
-    };
-    const select = (it) => { if (it.disabled || it.unavailable) return; if (onSelect) onSelect(it.id, it); close(); };
-    const onMenuKey = (e) => {
-        const b = liveBtns(), idx = b.indexOf(document.activeElement);
-        if (e.key === 'Escape') { e.preventDefault(); close(); }
-        else if (e.key === 'ArrowDown') { e.preventDefault(); focusItem(idx + 1); }
-        else if (e.key === 'ArrowUp') { e.preventDefault(); focusItem(idx - 1); }
-        else if (e.key === 'Home') { e.preventDefault(); focusItem(0); }
-        else if (e.key === 'End') { e.preventDefault(); focusItem(b.length - 1); }
-        else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (idx >= 0) b[idx].click(); }
-        else if (e.key.length === 1 && /\S/.test(e.key)) {
-            typeBuf += e.key.toLowerCase();
-            if (typeTimer) clearTimeout(typeTimer);
-            typeTimer = setTimeout(() => { typeBuf = ''; }, 600);
-            const m = items.findIndex(it => !it.disabled && !it.unavailable && (it.label || '').toLowerCase().startsWith(typeBuf));
-            if (m >= 0) focusItem(items.slice(0, m).filter(it => !it.disabled && !it.unavailable).length);
-        }
-    };
-    const openMenu = (focusFirst = true) => {
-        if (open || !triggerEl) return;
-        open = true;
-        menuEl = document.createElement('div');
-        menuEl.className = 'ds-popover ov-menubutton-menu';
-        menuEl.setAttribute('role', 'menu');
-        menuEl.setAttribute('aria-label', ariaLabel);
-        menuEl.tabIndex = -1;
+    const menu = useRovingMenu({ itemSelector: '[role="menuitemradio"]:not([aria-disabled="true"])', items, typeahead: true, placement });
+    const select = (it) => { if (it.disabled || it.unavailable) return; if (onSelect) onSelect(it.id, it); menu.close(); };
+    const buildMenuEl = () => {
+        const el = document.createElement('div');
+        el.className = 'ds-popover ov-menubutton-menu';
+        el.setAttribute('role', 'menu');
+        el.setAttribute('aria-label', ariaLabel);
         const tree = items.length
             ? h('div', { class: 'ov-menubutton-list' },
                 ...items.map((it, i) => it.unavailable
@@ -856,28 +816,17 @@ export function MenuButton({ trigger, items = [], selected, onSelect, onRetry, p
                         h('span', { class: 'ov-menubutton-label' }, it.label)
                     )))
             : h('div', { class: 'ov-menubutton-empty' }, emptyText);
-        webjsx.applyDiff(menuEl, tree);
-        document.body.appendChild(menuEl);
-        menuEl.addEventListener('keydown', onMenuKey);
-        floating = useFloating(triggerEl, menuEl, { placement, offset: FLOAT_OFFSET_DROPDOWN });
-        document.addEventListener('mousedown', onDown, true);
-        triggerEl.setAttribute('aria-expanded', 'true');
-        if (focusFirst && items.length) queueMicrotask(() => focusItem(0));
-    };
-    const onTrigClick = () => { if (open) close(false); else openMenu(true); };
-    const onTrigKey = (e) => { if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (!open) openMenu(true); else focusItem(0); } };
-    const refFn = (el) => {
-        if (!el || el._ovMenuButton) return;
-        el._ovMenuButton = true; triggerEl = el;
-        el.addEventListener('click', onTrigClick);
-        el.addEventListener('keydown', onTrigKey);
-        el.setAttribute('aria-haspopup', 'menu');
-        el.setAttribute('aria-expanded', 'false');
+        webjsx.applyDiff(el, tree);
+        return el;
     };
+    const onTrigClick = () => menu.onTrigClick(buildMenuEl);
+    const onTrigKey = (e) => menu.onTrigKey(e, buildMenuEl);
+    const refFn = menu.refFn('_ovMenuButton');
     const child = (typeof trigger === 'function') ? trigger() : trigger;
+    const wireRef = (el) => { refFn(el); if (el) { el.addEventListener('click', onTrigClick); el.addEventListener('keydown', onTrigKey); } };
     return (child && child.type)
-        ? webjsx.createElement(child.type, { ...(child.props || {}), ref: refFn }, ...(child.children || []))
-        : h('button', { type: 'button', class: 'ov-menubutton-trigger', ref: refFn }, child || 'Select');
+        ? webjsx.createElement(child.type, { ...(child.props || {}), ref: wireRef }, ...(child.children || []))
+        : h('button', { type: 'button', class: 'ov-menubutton-trigger', ref: wireRef }, child || 'Select');
 }
 
 // VideoLightbox — fullscreen video player overlay with backdrop dismiss.

package/src/components.js

@@ -14,9 +14,9 @@ export {
     Panel, Card, Row, RowLink, PanelFromItems,
     Hero, HeroFromPageData, Marquee, Install, CliBlock, Receipt, Changelog,
     WorksList, WritingList, Manifesto, Section, PageHeader,
-    Kpi, Sparkline, BarChart, Table, SearchInput, TextField, Select, EventList,
+    Kpi, Sparkline, BarChart, Table, HealthTable, ProcessRegistryTable, SearchInput, TextField, Select, EventList,
     HomeView, ProjectView, Form,
-    Spinner, Skeleton, Alert, FilterPills, Avatar
+    Spinner, Skeleton, Alert, FilterPills, Avatar, avatarInitial
 } from './components/content.js';
 
 export {
@@ -114,4 +114,8 @@ export {
     skillLabel, getRecentPaths, saveRecentPath, renderChatMessages
 } from './components/freddie.js';
 
+export {
+    makePage, api, loadingState, errorState, emptyState, refreshError
+} from './components/freddie/runtime.js';
+
 export { mountCommunityApp } from './community-app.js';

package/src/css/app-shell/kits-appended.css

@@ -385,6 +385,7 @@
 .ds-avatar-sm { width: 24px; height: 24px; font-size: 10px; }
 .ds-avatar-md { width: 36px; height: 36px; font-size: 12px; }
 .ds-avatar-lg { width: 48px; height: 48px; font-size: 15px; }
+.ds-avatar-square { border-radius: var(--r-2, 6px); }
 
 /* SpreadsheetPreview — tabbed inline spreadsheet/CSV viewer (docstudio
    xls-preview.js port). Tabs reuse the same neutral-at-rest pattern as