anentrypoint-design 0.0.208 → 0.0.209

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.208",
+  "version": "0.0.209",
   "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",
@@ -67,7 +67,9 @@
   ],
   "scripts": {
     "lint:tokens": "node scripts/lint-tokens.mjs",
-    "build": "node scripts/build.mjs"
+    "build": "node scripts/build.mjs",
+    "lint:null-children": "node scripts/lint-null-children.mjs",
+    "lint:classes": "node scripts/lint-classes.mjs"
   },
   "repository": {
     "type": "git",

package/src/components/agent-chat.js

@@ -14,6 +14,7 @@ import * as webjsx from '../../vendor/webjsx/index.js';
 import { ChatComposer, ChatMessage, makeThreadAutoScroll } from './chat.js';
 import { Select } from './content.js';
 import { Btn, Icon } from './shell.js';
+import { initializeCachesEagerly } from '../markdown-cache.js';
 
 const h = webjsx.createElement;
 
@@ -119,7 +120,7 @@ function CwdBar({ cwd, editing, draft, onEdit, onSave, onCancel, onClear, onDraf
         'aria-describedby': hint ? 'agentchat-cwd-hint' : null,
         'aria-invalid': error ? 'true' : null,
         oninput: (e) => onDraft && onDraft(e.target.value) }),
-      Btn({ key: 'save', primary: true, disabled: !!(error || checking), onClick: () => onSave && onSave(), children: 'save' }),
+      Btn({ key: 'save', variant: 'primary', disabled: !!(error || checking), onClick: () => onSave && onSave(), children: 'save' }),
       Btn({ key: 'cancel', onClick: () => onCancel && onCancel(), children: 'cancel' }),
       hint ? h('span', { key: 'hint', id: 'agentchat-cwd-hint', role: 'status', 'aria-live': 'polite',
         class: 'agentchat-cwd-hint' + (error ? ' is-error' : ' is-checking') }, hint) : null);
@@ -158,6 +159,11 @@ export function AgentChat(props = {}) {
     shownMessages, onShowEarlier,
   } = props;
 
+  // Warm the markdown/Prism stack the moment the surface mounts so the CDN
+  // round-trip never starts mid-first-response. Self-idempotent (internal
+  // _initPromise), so the per-render call is free after the first.
+  initializeCachesEagerly().catch((err) => console.warn('[247420] cache init error:', err));
+
   const name = agentName || (agents.find((a) => a.id === selectedAgent)?.name) || selectedAgent || 'agent';
   const lastIdx = messages.length - 1;
   const lastMsg = messages[lastIdx];
@@ -251,7 +257,7 @@ export function AgentChat(props = {}) {
     }
     return ChatMessage({
       key: m.id || String(i),
-      who: isAssistant ? 'them' : 'you',
+      role: isAssistant ? 'assistant' : 'user',
       // Claude-Code-web layout: flat full-width turns (no avatar disc, no colored
       // bubble), distinguished by a role label + a faint assistant background.
       // aicat is left OFF so the mascot tint never reaches the agent surface.

package/src/components/chat.js

@@ -164,6 +164,11 @@ function MdNode(p) {
         const srcKey = (isMarkdownDegraded() ? '~degraded~' : '') + (p.text || '');
         if (el.dataset.mdSrc === srcKey) return;
         el.dataset.mdSrc = srcKey;
+        // Markdown stack still loading (or down): paint the raw text
+        // synchronously so streamed tokens are visible the same frame they
+        // arrive (an empty bubble until the CDN import resolves reads as a
+        // hang); the resolved render swaps in sanitized markdown in place.
+        if (isMarkdownDegraded()) el.textContent = p.text || '';
         renderMarkdownCached(p.text || '').then((html) => { el.innerHTML = html; injectCodeCopy(el); });
     };
     return h('div', { class: 'chat-bubble chat-md', ref: refSink });
@@ -446,25 +451,37 @@ export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu
     // segment routes to the cwd editor WITHOUT making the whole line one giant
     // click target. Legacy whole-line context.onClick is honored only when no
     // bit carries its own handler. All children are keyed VElements.
-    const ctxBits = (context && context.bits) ? context.bits.filter(Boolean) : [];
-    const hasBitClicks = ctxBits.some((b) => b && typeof b === 'object' && b.onClick);
+    // Normalize FIRST (a bit may carry `text` or `label`), then drop empties -
+    // separators must only ever sit between bits that actually render. An
+    // object bit whose text resolved empty used to leave a dangling trailing
+    // middot AND an invisible zero-width button.
+    const ctxBits = ((context && context.bits) ? context.bits : [])
+        .map((b) => {
+            if (b == null) return null;
+            if (typeof b === 'object') {
+                const text = b.text || b.label || '';
+                return text ? { text, onClick: b.onClick, title: b.title } : null;
+            }
+            const text = String(b);
+            return text ? { text } : null;
+        })
+        .filter(Boolean);
+    const hasBitClicks = ctxBits.some((b) => b.onClick);
     let contextLine = null;
     if (ctxBits.length && hasBitClicks) {
         const kids = [];
         ctxBits.forEach((b, i) => {
             if (i) kids.push(h('span', { key: 'csep' + i, class: 'chat-composer-context-sep', 'aria-hidden': 'true' }, ' · '));
-            const isObj = b && typeof b === 'object';
-            const text = isObj ? (b.text || '') : String(b);
-            if (isObj && b.onClick) kids.push(h('button', {
+            if (b.onClick) kids.push(h('button', {
                 key: 'cbit' + i, type: 'button', class: 'chat-composer-context-bit',
-                title: b.title || null, 'aria-label': b.title || text,
+                title: b.title || null, 'aria-label': b.title || b.text,
                 onclick: (e) => { e.preventDefault(); b.onClick(e); },
-            }, text));
-            else kids.push(h('span', { key: 'cbit' + i, class: 'chat-composer-context-text' }, text));
+            }, b.text));
+            else kids.push(h('span', { key: 'cbit' + i, class: 'chat-composer-context-text' }, b.text));
         });
         contextLine = h('div', { class: 'chat-composer-context' }, ...kids);
     } else if (ctxBits.length) {
-        const joined = ctxBits.map((b) => (b && typeof b === 'object') ? (b.text || '') : String(b)).filter(Boolean).join(' · ');
+        const joined = ctxBits.map((b) => b.text).join(' · ');
         contextLine = h(context.onClick ? 'button' : 'div', {
             class: 'chat-composer-context', type: context.onClick ? 'button' : null,
             'aria-label': context.onClick ? ('change target: ' + joined) : null,

package/src/components/content.js

@@ -183,7 +183,7 @@ export function WorksList({ works = [], openedIndex = -1, onToggle }) {
                         h('p', { class: 'ds-work-body' }, w.body)
                     ),
                     h('div', { class: 'ds-work-actions' },
-                        Btn({ primary: true, href: w.href || '#', children: 'open ->' }),
+                        Btn({ variant: 'primary', href: w.href || '#', children: 'open ->' }),
                         Btn({ href: w.source || '#', children: 'source' })
                     )
                 ) : null
@@ -302,11 +302,24 @@ export function ProjectView({ project = {}, copied, onCopy } = {}) {
     ].filter(Boolean).flat();
 }
 
-export function PageHeader({ title, lede, eyebrow, right, compact, id }) {
+export function PageHeader({ title, lede, eyebrow, right, compact, dense, id }) {
     // `compact` drops the large leading/trailing section margins so a PageHeader
     // used as a page's first element top-aligns cleanly without the consumer
     // having to !important-override the .ds-section margin. `id` lands on the
     // outermost section so the header can serve as a deep-link anchor.
+    // `dense` is the content-first working-surface form: one row - a small
+    // heading with the lede beside it, clamped to a single muted line - instead
+    // of a display H1 over a paragraph. App surfaces (files, dashboards,
+    // settings) should not spend 150px of fold on an intro.
+    if (dense) {
+        return h('section', { class: 'ds-section ds-section-compact ds-page-header-dense', id: id || null },
+            h('div', { class: 'ds-page-header-dense-row' },
+                ...[
+                    title != null ? h('h1', { key: 'dh' }, title) : null,
+                    lede != null ? h('span', { key: 'dl', class: 'ds-page-header-dense-lede', title: typeof lede === 'string' ? lede : null }, lede) : null,
+                    right != null ? h('div', { key: 'dr', class: 'ds-page-header-right' }, ...(Array.isArray(right) ? right : [right])) : null,
+                ].filter(Boolean)));
+    }
     return h('section', { class: 'ds-section' + (compact ? ' ds-section-compact' : ''), id: id || null },
         eyebrow ? h('span', { class: 'eyebrow' }, eyebrow) : null,
         title != null ? h('h1', {}, title) : null,
@@ -379,8 +392,20 @@ export function Select({ label, value = '', options = [], onChange, name, key, p
     );
 }
 
-export function EventList({ items, events, emptyText = 'no events', rankPad = 3 }) {
+export function EventList({ items, events, emptyText = 'no events', rankPad = 3, loading = false, loadingText = 'loading events…' }) {
     const list = items || events || [];
+    // Shape-matched skeleton rows for the slow first events fetch (the ccsniff
+    // cold walk can take 30-90s) - a lone spinner collapses the whole pane.
+    // Keying discipline mirrors ConversationList: a single keyed wrapper with
+    // all-keyed siblings (webjsx applyDiff crashes on mixed keyed/unkeyed).
+    if (loading && !list.length) {
+        return h('section', { class: 'ds-section ds-event-list' },
+            h('div', { key: 'st', role: 'status', 'aria-live': 'polite', class: 'ds-event-state lede' }, loadingText),
+            ...Array.from({ length: 7 }, (_, i) => h('div', { key: 'sk' + i, class: 'ds-event-row-skeleton', 'aria-hidden': 'true' },
+                h('span', { key: 'r', class: 'ds-skel ds-skel-rank' }),
+                h('span', { key: 't', class: 'ds-skel ds-skel-title' }),
+                h('span', { key: 'm', class: 'ds-skel ds-skel-meta' }))));
+    }
     if (!list.length) return h('p', { class: 'lede' }, emptyText);
     return h('section', { class: 'ds-section ds-event-list' },
         ...list.map((it, i) => Row({

package/src/components/context-pane.js

@@ -59,6 +59,10 @@ export function ContextPane({ agent, model, cwd, toolCount = 0, usage, session,
                     // Use the rail tone consistently with the GUI-wide semantics:
                     // green = active/ok. A default cwd carries no rail (neutral).
                     rail: cwd ? 'green' : null,
+                    // The change-cwd affordance belongs ON the working-dir fact,
+                    // not as a button floating under the panels.
+                    onClick: onSetCwd || undefined,
+                    meta: onSetCwd ? 'change' : undefined,
                 }),
                 Row({
                     title: 'running tools',
@@ -69,8 +73,9 @@ export function ContextPane({ agent, model, cwd, toolCount = 0, usage, session,
         }),
     ];
     // Conversation block: whole-session totals (turn count + accumulated cost)
-    // between the context panel and the per-turn usage panel.
-    if (hasSession) {
+    // between the context panel and the per-turn usage panel. All-zero totals
+    // are noise, not context - hide the block until there is a conversation.
+    if (hasSession && (Number(session.turns) > 0 || Number(session.cost) > 0)) {
         const sesRows = [];
         if (session.turns != null) sesRows.push(Row({ title: 'turns', meta: String(session.turns) }));
         if (session.cost != null) sesRows.push(Row({ title: 'total cost', meta: '$' + Number(session.cost).toFixed(4) }));
@@ -88,11 +93,6 @@ export function ContextPane({ agent, model, cwd, toolCount = 0, usage, session,
         if (usage.durationMs != null) tokRows.push(Row({ title: 'duration', meta: fmtDuration(usage.durationMs) }));
         panels.push(Panel({ title: 'last turn', children: tokRows }));
     }
-    return h('div', { class: 'ds-context' },
-        ...panels,
-        onSetCwd
-            ? h('div', { class: 'ds-context-actions' },
-                Btn({ onClick: onSetCwd, children: 'set working dir' }))
-            : null,
-    );
+    // The cwd action lives on the working-dir row above; no floating footer button.
+    return h('div', { class: 'ds-context' }, ...panels);
 }

package/src/components/files-modals.js

@@ -151,7 +151,7 @@ function modalError(error) {
 // `error` renders inside .ds-modal-body (role=alert, error tone). `busy`
 // disables both action buttons AND the Escape/backdrop close paths; the confirm
 // label flips to `busyLabel` (default 'working…') so the in-flight state reads.
-export function ConfirmDialog({ title = 'confirm', message, confirmLabel = 'confirm', cancelLabel = 'cancel', destructive, onConfirm, onCancel, error, busy = false, busyLabel = 'working…' } = {}) {
+export function ConfirmDialog({ title = 'Are you sure?', message, confirmLabel = 'confirm', cancelLabel = 'cancel', destructive, onConfirm, onCancel, error, busy = false, busyLabel = 'working…' } = {}) {
     return Modal({
         onClose: onCancel,
         kind: 'small',
@@ -160,12 +160,12 @@ export function ConfirmDialog({ title = 'confirm', message, confirmLabel = 'conf
         body: [message || '', modalError(error)].filter(Boolean),
         actions: [
             Btn({ onClick: onCancel, disabled: busy, children: cancelLabel }),
-            Btn({ primary: true, danger: !!destructive, disabled: busy, onClick: onConfirm, children: busy ? busyLabel : confirmLabel })
+            Btn({ variant: 'primary', disabled: busy, onClick: onConfirm, children: busy ? busyLabel : confirmLabel })
         ]
     });
 }
 
-export function PromptDialog({ title = 'name', value = '', placeholder = '', confirmLabel = 'ok', cancelLabel = 'cancel', onConfirm, onCancel, onInput, error, busy = false, busyLabel = 'working…' } = {}) {
+export function PromptDialog({ title = 'Enter a name', value = '', placeholder = '', confirmLabel = 'ok', cancelLabel = 'cancel', onConfirm, onCancel, onInput, error, busy = false, busyLabel = 'working…' } = {}) {
     return Modal({
         onClose: onCancel,
         kind: 'small',

package/src/components/files.js

@@ -180,10 +180,20 @@ const FILE_GRID_CAP = 200;
 export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'No files here yet',
                           columns = 'auto', sort, filter, loading = false,
                           shown, onShowMore, actions, busy,
-                          selectable = false, marked, onMark, onSelectAll, onClearSelection,
+                          // Canonical multi-select contract (shared with
+                          // SessionDashboard): selected/onToggleSelect.
+                          // marked/onMark are accepted FileGrid aliases.
+                          selectable = false, selected, onToggleSelect,
+                          marked = selected, onMark = onToggleSelect,
+                          onSelectAll, onClearSelection,
                           density = 'list', onDensity, thumbUrl } = {}) {
-    if (loading) return FileSkeleton({});
+    // Skeleton ONLY for a cold load. A refresh of a populated grid (rename /
+    // delete / upload round-trip) keeps the rows on screen and dims them -
+    // flashing the whole directory to shimmer rows on every mutation reads as
+    // data loss.
+    if (loading && !files.length) return FileSkeleton({});
     if (!files.length) return EmptyState({ text: emptyText });
+    const refreshing = loading && files.length > 0;
     // Cap the rendered rows. `shown` (host-controlled) overrides the default cap
     // so "show more" can grow it; otherwise default to FILE_GRID_CAP.
     const limit = shown != null ? shown : FILE_GRID_CAP;
@@ -264,8 +274,9 @@ export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'No f
     // listbox/option semantics are invalid (an option can't host interactive
     // children). Keyboard nav still works via roving focus over the open buttons.
     const grid = h('div', {
-        class: 'ds-file-grid' + (isThumb ? ' ds-file-grid-thumb' : ''),
+        class: 'ds-file-grid' + (isThumb ? ' ds-file-grid-thumb' : '') + (refreshing ? ' is-refreshing' : ''),
         role: 'group', 'aria-label': 'files', tabindex: '0',
+        'aria-busy': refreshing ? 'true' : 'false',
         // Always concrete (webjsx's attribute diff can leave a null-valued
         // attribute unset when toggling away from the default).
         'data-density': density || 'list',
@@ -401,8 +412,13 @@ export function RootsPicker({ roots = [], selected, onSelect, label = 'roots' }
 }
 
 export function DropZone({ children, dragover, onDrop, onDragOver, onDragLeave, label = 'drop files here', onPick } = {}) {
+    // With children the zone is a passive WRAPPER: content renders normally and
+    // the dashed affordance appears only while a drag is over it (real file
+    // managers never burn a permanent band on a maybe-drop). Without children
+    // it keeps the explicit picker-block look.
+    const kids = Array.isArray(children) ? children : children ? [children] : [];
     return h('div', {
-        class: 'ds-dropzone' + (dragover ? ' dragover' : ''),
+        class: 'ds-dropzone' + (kids.length ? ' ds-dropzone--wrap' : '') + (dragover ? ' dragover' : ''),
         ondragover: (e) => { e.preventDefault(); onDragOver && onDragOver(e); },
         ondragleave: (e) => { onDragLeave && onDragLeave(e); },
         ondrop: (e) => { e.preventDefault(); onDrop && onDrop(e.dataTransfer.files); }
@@ -412,7 +428,7 @@ export function DropZone({ children, dragover, onDrop, onDragOver, onDragLeave,
             h('span', { class: 'ds-dropzone-label' }, label),
             onPick ? Btn({ onClick: onPick, children: 'pick files' }) : null
         ),
-        ...(Array.isArray(children) ? children : children ? [children] : [])
+        ...kids
     );
 }
 

package/src/components/freddie.js

@@ -211,7 +211,7 @@ export const sessions = makePage((ctx) => {
                 s.msgLoading ? loadingState('loading messages…')
                     : (s.messages || []).length ? (s.messages).map((m, i) => ChatMessage({ role: m.role, text: m.content || m.text || '', time: m.ts ? fmtTime(m.ts) : '', key: i }))
                         : emptyState('no messages')) : null,
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -249,13 +249,13 @@ export const projects = makePage((ctx) => {
                     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' }),
-                        p.name !== 'default' ? Btn({ danger: true, children: 'delete', onClick: () => del(p.name) }) : null),
+                        p.name !== 'default' ? Btn({ variant: 'danger', children: 'delete', onClick: () => del(p.name) }) : null),
                 })) : emptyState('no projects')),
             section('new project',
                 TextField({ label: 'name', value: s.newName, onInput: (v) => { s.newName = v; }, placeholder: 'my-project' }),
                 TextField({ label: 'path (optional)', value: s.newPath, onInput: (v) => { s.newPath = v; }, placeholder: 'C:/path/to/dir' }),
-                Btn({ primary: true, disabled: s.busy, children: s.busy ? 'working…' : 'create', onClick: create })),
-        ];
+                Btn({ variant: 'primary', disabled: s.busy, children: s.busy ? 'working…' : 'create', onClick: create })),
+        ].filter(Boolean);
     };
 });
 
@@ -274,7 +274,7 @@ export const agents = makePage((ctx) => {
             s.error && s.data ? refreshError(s.error) : null,
             Kpi({ items: [[d.count ?? 0, 'active'], [d.turns ?? 0, 'total turns'], [d.last_activity ? fmtAgo(d.last_activity) : '—', 'last activity']] }),
             section('detail', Table({ headers: ['field', 'value'], rows: Object.entries(d).map(([k, v]) => [k, String(v)]) })),
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -303,7 +303,7 @@ export const analytics = makePage((ctx) => {
             s.error && (s.sampler || s.avail) ? refreshError(s.error) : null,
             Kpi({ items: [[ok + '/' + samp.length, 'providers up'], [sum.total_models ?? '—', 'models'], [sum.usable_in_any_mode ?? '—', 'usable']] }),
             section('sampler', samp.length ? Table({ headers: ['provider', 'available', 'fails'], rows: Object.entries(s.sampler.status).map(([k, v]) => [k, v.available === false ? 'no' : 'yes', String(v.failCount ?? 0)]) }) : emptyState('no sampler data')),
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -337,7 +337,7 @@ export const models = makePage((ctx) => {
         const cached = s.cached || {};
         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 }) }),
+            PageHeader({ eyebrow: 'freddie', title: 'models', lede: providers.length + ' providers', right: Btn({ variant: 'primary', 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'],
@@ -377,12 +377,12 @@ export const cron = makePage((ctx) => {
             noteAlert(s.note),
             section('jobs', list.length ? list.map((j, i) => Row({
                 key: i, code: j.enabled ? Icon('play') : Icon('pause'), title: j.cron, sub: trunc(j.prompt, TRUNC_SUB).text,
-                trailing: Btn({ danger: true, children: 'delete', onClick: () => del(j.id) }),
+                trailing: Btn({ variant: 'danger', children: 'delete', onClick: () => del(j.id) }),
             })) : emptyState('no cron jobs')),
             section('new job',
                 TextField({ label: 'cron expression', value: s.expr, onInput: (v) => { s.expr = v; }, placeholder: '0 9 * * *' }),
                 TextField({ label: 'prompt', value: s.prompt, multiline: true, onInput: (v) => { s.prompt = v; }, placeholder: 'what to run…' }),
-                Btn({ primary: true, disabled: s.busy, children: s.busy ? 'working…' : 'add job', onClick: add })),
+                Btn({ variant: 'primary', disabled: s.busy, children: s.busy ? 'working…' : 'add job', onClick: add })),
         ];
     };
 });
@@ -405,7 +405,7 @@ export const skills = makePage((ctx) => {
                     onClick: () => ctx.set({ open: s.open === i ? null : i }), active: s.open === i }),
                 s.open === i ? h('pre', { class: 'fd-pre fd-skill-body' }, sk.body || sk.content || '(no body)') : null,
             )) : emptyState('no skills')),
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -456,8 +456,8 @@ export const config = makePage((ctx) => {
             ) : emptyState('no scalar config keys')),
             section('raw', h('pre', { class: 'fd-pre' }, JSON.stringify(cfg, null, 2))),
             section('actions',
-                Btn({ primary: true, disabled: s.busy || !Object.keys(s.edited).length, children: s.busy ? 'saving…' : 'save changes', onClick: save })),
-        ];
+                Btn({ variant: 'primary', disabled: s.busy || !Object.keys(s.edited).length, children: s.busy ? 'saving…' : 'save changes', onClick: save })),
+        ].filter(Boolean);
     };
 });
 
@@ -506,11 +506,11 @@ export const env = makePage((ctx) => {
                     trailing: h('span', { class: 'fd-row-actions' },
                         a.set ? Chip({ tone: 'ok', children: 'set' }) : Chip({ tone: 'neutral', children: 'unset' }),
                         TextField({ type: 'password', value: s.draft[a.provider] || '', onInput: (v) => { s.draft[a.provider] = v; }, placeholder: 'paste key', 'aria-label': 'key for ' + a.provider }),
-                        Btn({ primary: true, disabled: s.busy === a.provider, children: s.busy === a.provider ? '…' : 'save', onClick: () => setKey(a.provider) }),
-                        (a.set && a.source === 'stored') ? Btn({ danger: true, disabled: s.busy === a.provider, children: 'remove', onClick: () => removeKey(a.provider) }) : null),
+                        Btn({ variant: 'primary', disabled: s.busy === a.provider, children: s.busy === a.provider ? '…' : 'save', onClick: () => setKey(a.provider) }),
+                        (a.set && a.source === 'stored') ? Btn({ variant: 'danger', disabled: s.busy === a.provider, children: 'remove', onClick: () => removeKey(a.provider) }) : null),
                 })) : emptyState('no providers')),
             otherRows.length ? section('other environment', Table({ headers: ['key', 'status'], rows: otherRows })) : null,
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -536,7 +536,7 @@ export const tools = makePage((ctx) => {
                 ctx.state.open === t.name ? h('pre', { class: 'fd-pre' }, JSON.stringify(t.schema || t, null, 2)) : null,
             )))),
             list.length ? null : emptyState('no tools match'),
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -560,7 +560,7 @@ export const batch = makePage((ctx) => {
             section('prompts',
                 TextField({ label: 'prompts (one per line)', value: s.prompts, multiline: true, rows: 6, onInput: (v) => { s.prompts = v; } }),
                 TextField({ label: 'concurrency', type: 'number', min: 1, 'aria-label': 'batch concurrency', value: String(s.concurrency), onInput: (v) => { s.concurrency = v; } }),
-                Btn({ primary: true, disabled: s.busy, children: s.busy ? 'running…' : 'run batch', onClick: run })),
+                Btn({ variant: 'primary', disabled: s.busy, children: s.busy ? 'running…' : 'run batch', onClick: run })),
             s.result ? section('result', (() => {
                 const r = s.result;
                 const items = Array.isArray(r.results) ? r.results : (Array.isArray(r) ? r : null);
@@ -572,7 +572,7 @@ export const batch = makePage((ctx) => {
                     }) }),
                 ];
             })()) : null,
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -592,7 +592,7 @@ export const gateway = makePage((ctx) => {
             PageHeader({ eyebrow: 'freddie', title: 'gateway', lede: 'messaging platform status' }),
             s.error && s.data ? refreshError(s.error) : null,
             section('platforms', rows.length ? Table({ headers: ['platform', 'status'], rows }) : emptyState('no platforms configured')),
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -632,14 +632,14 @@ export const chains = makePage((ctx) => {
             noteAlert(s.note),
             section('chains', Array.isArray(chainsList) && chainsList.length ? chainsList.map((c, i) => Row({
                 key: i, title: c.name || c, sub: Array.isArray(c.links) ? c.links.join(' -> ') : '',
-                trailing: Btn({ danger: true, children: 'delete', onClick: () => del(c.name || c) }),
+                trailing: Btn({ variant: 'danger', children: 'delete', onClick: () => del(c.name || c) }),
             })) : emptyState('no chains defined')),
             section('new chain',
                 TextField({ label: 'name', value: s.name, onInput: (v) => { s.name = v; } }),
                 TextField({ label: 'links (comma-separated models)', value: s.links, onInput: (v) => { s.links = v; }, placeholder: 'mistral/large, openrouter/auto' }),
-                Btn({ primary: true, disabled: s.busy, children: s.busy ? 'working…' : 'create chain', onClick: create })),
+                Btn({ variant: 'primary', disabled: s.busy, children: s.busy ? 'working…' : 'create chain', onClick: create })),
             s.cfg ? section('config', h('pre', { class: 'fd-pre' }, JSON.stringify(s.cfg, null, 2))) : null,
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -661,7 +661,7 @@ export const machines = makePage((ctx) => {
                 headers: ['kind', 'key', 'state'],
                 rows: list.map(m => [m.kind || '—', m.key || m.machine_id || '—', m.state || m.value || truncJson(m)]),
             }) : emptyState('no live machines')),
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -689,7 +689,7 @@ export const health = makePage((ctx) => {
             s.error && (s.health || s.providers) ? refreshError(s.error) : null,
             section('checks', Object.keys(hd).length ? Table({ headers: ['check', 'status'], rows: Object.entries(hd).map(([k, v]) => [k, typeof v === 'object' ? truncJson(v) : (v === true ? Chip({ tone: 'ok', children: 'ok' }) : v === false ? Chip({ tone: 'miss', children: 'no' }) : String(v))]) }) : emptyState('no health data')),
             provs.length ? section('providers', Table({ headers: ['provider', 'status'], rows: provs.map(p => { const n = typeof p === 'string' ? p : p.name || p.id; const ok = typeof p === 'object' ? (p.ok ?? p.available) : null; return [n, ok == null ? '—' : (ok ? Chip({ tone: 'ok', children: 'up' }) : Chip({ tone: 'miss', children: 'down' }))]; }) })) : null,
-        ];
+        ].filter(Boolean);
     };
 });
 
@@ -716,7 +716,7 @@ export const debug = makePage((ctx) => {
                 key: i, title: name, onClick: () => loadLogs(name), active: s.sub === name,
             })) : emptyState('no debug subsystems')),
             s.sub ? section('logs · ' + s.sub, h('pre', { class: 'fd-pre' }, JSON.stringify(s.logs, null, 2))) : null,
-        ];
+        ].filter(Boolean);
     };
 });
 

package/src/components/sessions.js

@@ -199,11 +199,11 @@ export function SessionCard({ session = {}, onStop, onOpen, onView, active = fal
     activityBits.length ? h('span', { class: 'ds-dash-activity' }, activityBits.join(' · ')) : null,
   ].filter(Boolean));
   const actions = h('div', { class: 'ds-dash-actions', role: 'group', 'aria-label': 'session actions' }, ...[
-    onOpen ? Btn({ key: 'open', primary: true, 'aria-label': 'open session', onClick: () => onOpen(s),
+    onOpen ? Btn({ key: 'open', variant: 'primary', 'aria-label': 'open session', onClick: () => onOpen(s),
       children: [Icon('external-link', { size: 14 }), h('span', {}, 'open')] }) : null,
     onView ? Btn({ key: 'view', 'aria-label': s.external ? 'open in history' : 'view events', onClick: () => onView(s),
       children: [Icon('file-text', { size: 14 }), h('span', {}, s.external ? 'history' : 'events')] }) : null,
-    (onStop && !s.external) ? Btn({ key: 'stop', danger: true, disabled: !!s.stopping, 'aria-label': 'stop session',
+    (onStop && !s.external) ? Btn({ key: 'stop', variant: 'danger', disabled: !!s.stopping, 'aria-label': 'stop session',
       onClick: () => !s.stopping && onStop(s),
       children: [Icon('square', { size: 14 }), h('span', {}, s.stopping ? 'stopping…' : 'stop')] }) : null,
   ].filter(Boolean));
@@ -244,7 +244,7 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
                                    sort, filter, errorsOnly = false, onErrorsOnly,
                                    selectable = false, selected, onToggleSelect, onSelectAll, onClearSelection,
                                    activeSid, streamState,
-                                   emptyText = 'No live sessions', offline = false } = {}) {
+                                   emptyText = 'No live sessions', emptyAction, offline = false } = {}) {
   if (offline) {
     return h('div', { class: 'ds-dash-state ds-dash-state-error', role: 'status' }, 'Backend offline — live sessions unavailable');
   }
@@ -297,12 +297,11 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
         onErrorsOnly ? h('button', { key: 'eo', type: 'button', class: 'ds-dash-errors-toggle' + (errorsOnly ? ' active' : ''),
           'aria-pressed': errorsOnly ? 'true' : 'false', onclick: () => onErrorsOnly(!errorsOnly) }, 'errors only') : null)
     : null;
-  if (!sessions.length) {
-    return h('div', { class: 'ds-dash' },
-      h('div', { class: 'ds-dash-header', role: 'group', 'aria-label': 'live session controls' },
-        ...[h('span', { key: 'cnt', class: 'ds-dash-count', role: 'status', 'aria-live': 'polite' }, '0 running'), streamLine].filter(Boolean)),
-      h('div', { class: 'ds-dash-state', role: 'status' }, emptyText));
-  }
+  // NOTE: no separate empty-branch return. The empty state renders as a KEYED
+  // child of the same stable body wrapper the populated states use - swapping
+  // an unkeyed .ds-dash-state for keyed group children used to crash webjsx
+  // applyDiff (reading 'key') the moment the first session appeared, leaving a
+  // half-applied DOM ('1 running' header over 'No live sessions' body).
   // Tri-state select-all over the selectable (non-external) sessions.
   const selectableSids = sessions.filter((s) => !s.external).map((s) => s.sid);
   const selOfVisible = selectableSids.filter((sid) => selSet.has(sid)).length;
@@ -318,16 +317,16 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
     ? h('button', { key: 'selclr', type: 'button', class: 'ds-dash-clear', onclick: () => onClearSelection() }, 'clear')
     : null;
   const stopBtn = stoppingCount > 0 && (onStopSelected || onStopAll)
-      ? Btn({ key: 'stopbusy', danger: true, disabled: true, children: 'stopping ' + stoppingCount + '…' })
+      ? Btn({ key: 'stopbusy', variant: 'danger', disabled: true, children: 'stopping ' + stoppingCount + '…' })
       : (selectable && selCount && onStopSelected
       ? (onArmStopSelected && !confirmingStopSelected
-          ? Btn({ key: 'stopsel', danger: true, onClick: () => onArmStopSelected([...selSet]), children: 'stop selected' })
-          : Btn({ key: 'stopsel', danger: true, className: confirmingStopSelected ? 'is-armed' : null, onClick: () => onStopSelected([...selSet]),
+          ? Btn({ key: 'stopsel', variant: 'danger', onClick: () => onArmStopSelected([...selSet]), children: 'stop selected' })
+          : Btn({ key: 'stopsel', variant: 'danger', className: confirmingStopSelected ? 'is-armed' : null, onClick: () => onStopSelected([...selSet]),
                   children: confirmingStopSelected ? 'stop ' + selCount + ' sessions - press again' : 'stop selected' }))
       : (onStopAll
           ? (onArmStopAll && !confirmingStopAll
-              ? Btn({ key: 'stopall', danger: true, onClick: () => onArmStopAll(sessions), children: 'stop all' })
-              : Btn({ key: 'stopall', danger: true, className: confirmingStopAll ? 'is-armed' : null, onClick: () => onStopAll(sessions),
+              ? Btn({ key: 'stopall', variant: 'danger', onClick: () => onArmStopAll(sessions), children: 'stop all' })
+              : Btn({ key: 'stopall', variant: 'danger', className: confirmingStopAll ? 'is-armed' : null, onClick: () => onStopAll(sessions),
                       children: confirmingStopAll ? 'stop ' + sessions.length + ' sessions - press again' : 'stop all' }))
           : null));
   // Build header children as a filtered array: webjsx applyDiff crashes
@@ -336,10 +335,14 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
   const headerKids = [
     selectable && selCount
       ? h('span', { key: 'cnt', class: 'ds-dash-count', role: 'status', 'aria-live': 'polite' }, selCount + ' selected')
-      : (breakdown || h('span', { key: 'cnt', class: 'ds-dash-count', role: 'status', 'aria-live': 'polite' }, sessions.length + ' running')),
+      : (breakdown || h('span', { key: 'cnt', class: 'ds-dash-count', role: 'status', 'aria-live': 'polite' },
+          sessions.length ? sessions.length + ' running' : '0 running')),
     selectAllCtl, clearCtl, streamLine,
     h('span', { key: 'spread', class: 'spread' }),
-    stopBtn, toolbar,
+    // No stop control without a session to stop; the empty dashboard keeps
+    // only the count, heartbeat, and (when wired) filter/sort chrome.
+    sessions.length ? stopBtn : null,
+    toolbar,
   ].filter(Boolean);
   const header = h('div', { class: 'ds-dash-header', role: 'group', 'aria-label': 'live session controls' }, ...headerKids);
   // Status-bucketed command center: when sorting by status (the default), the
@@ -350,20 +353,31 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
   const cardOf = (s) => h('div', { key: s.sid, role: 'listitem' },
     SessionCard({ session: s, onStop, onOpen, onView, active: s.sid === activeSid,
                   selectable, selected: selSet.has(s.sid), onToggleSelect }));
-  let body;
-  if (grouped) {
+  // ONE stable body wrapper across every state (empty / grouped / flat), with
+  // KEYED children - the ConversationList stable-keyed-body rule. Diffing
+  // happens on the children, never by swapping the container's shape.
+  let bodyKids;
+  if (!sessions.length) {
+    bodyKids = [h('div', { key: 'empty', class: 'ds-dash-state', role: 'status' },
+      ...[
+        h('span', { key: 'et' }, emptyText),
+        (emptyAction && emptyAction.onClick)
+          ? Btn({ key: 'ea', onClick: emptyAction.onClick, children: emptyAction.label || 'start a chat' })
+          : null,
+      ].filter(Boolean))];
+  } else if (grouped) {
     const buckets = [
       { key: 'error', label: 'Errored', rows: sessions.filter((s) => !s.external && s.status === 'error') },
       { key: 'running', label: 'Running', rows: sessions.filter((s) => !s.external && s.status !== 'error' && s.status !== 'stale') },
       { key: 'idle', label: 'Idle', rows: sessions.filter((s) => !s.external && s.status === 'stale') },
       { key: 'external', label: 'External', rows: sessions.filter((s) => s.external) },
     ].filter((b) => b.rows.length);
-    body = h('div', { class: 'ds-dash-groups' },
-      ...buckets.map((b) => h('div', { key: 'grp' + b.key, class: 'ds-dash-group', role: 'group', 'aria-label': b.label + ' sessions' },
-        h('div', { class: 'ds-dash-group-label' }, b.label + ' · ' + b.rows.length),
-        h('div', { class: 'ds-dash-grid', role: 'list', 'aria-label': b.label + ' sessions' }, ...b.rows.map(cardOf)))));
+    bodyKids = buckets.map((b) => h('div', { key: 'grp' + b.key, class: 'ds-dash-group', role: 'group', 'aria-label': b.label + ' sessions' },
+      h('div', { key: 'gl', class: 'ds-dash-group-label' }, b.label + ' · ' + b.rows.length),
+      h('div', { key: 'gg', class: 'ds-dash-grid', role: 'list', 'aria-label': b.label + ' sessions' }, ...b.rows.map(cardOf))));
   } else {
-    body = h('div', { class: 'ds-dash-grid', role: 'list', 'aria-label': 'live sessions' }, ...sessions.map(cardOf));
+    bodyKids = [h('div', { key: 'flat', class: 'ds-dash-grid', role: 'list', 'aria-label': 'live sessions' }, ...sessions.map(cardOf))];
   }
+  const body = h('div', { key: 'body', class: 'ds-dash-groups' }, ...bodyKids);
   return h('div', { class: 'ds-dash' }, header, body);
 }