anentrypoint-design 0.0.206 → 0.0.207

package/package.json

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

@@ -252,7 +252,11 @@ export function AgentChat(props = {}) {
     return ChatMessage({
       key: m.id || String(i),
       who: isAssistant ? 'them' : 'you',
-      aicat: isAssistant,
+      // 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.
+      flat: true,
+      aicat: false,
       // A stable per-agent product mark (host passes a small line-SVG via
       // `avatar`) instead of a per-agent letter initial that shifts identity.
       avatar: isAssistant ? (m.avatar != null ? m.avatar : avatar) : undefined,

package/src/components/chat.js

@@ -128,6 +128,18 @@ export function injectCodeCopy(container) {
         shell.className = 'chat-code-block';
         pre.parentNode.insertBefore(shell, pre);
         shell.appendChild(pre);
+        // Surface the fenced language as a small header tab (claude.ai/code
+        // shows the language on every block, not just the structured CodeNode).
+        // The highlighter sets language-xx / lang-xx on the inner <code>.
+        const codeEl = pre.querySelector('code');
+        const langCls = codeEl && (codeEl.className || '').match(/(?:language|lang)-([a-z0-9+#]+)/i);
+        if (langCls && langCls[1]) {
+            const lang = document.createElement('span');
+            lang.className = 'chat-code-lang';
+            lang.setAttribute('aria-hidden', 'true');
+            lang.textContent = langCls[1];
+            shell.appendChild(lang);
+        }
         const btn = document.createElement('button');
         btn.type = 'button';
         btn.className = 'chat-code-copy';
@@ -289,7 +301,7 @@ function renderPart(p, key) {
     return node;
 }
 
-export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typing, key, aicat, reactions, receipt, name, streaming, actions, incomplete, stopped }) {
+export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typing, key, aicat, reactions, receipt, name, streaming, actions, incomplete, stopped, flat }) {
     _stats.messages += 1;
     // Support legacy 'who' prop, prefer 'role' with mapping:
     //   'user'      -> 'you'   (right-aligned, accent bubble)
@@ -304,7 +316,11 @@ export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typ
             : role)
         : who;
     const isCentered = resolvedWho === 'system' || resolvedWho === 'tool' || resolvedWho === 'thinking';
-    const cls = 'chat-msg ' + resolvedWho + (aicat && resolvedWho === 'them' ? ' aicat' : '') + (isCentered ? ' centered' : '');
+    // Flat layout (Claude-Code-web): full-width, avatar-less turns with a role
+    // label above the content and a faint assistant background, instead of the
+    // messenger avatar-disc + colored-bubble layout (kept for the chat demo).
+    const isFlat = flat && !isCentered;
+    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() || '?' : '?'));
@@ -355,11 +371,18 @@ export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typ
             }, a.icon ? Icon(a.icon, { size: 14 }) : null,
                a.label ? h('span', { class: 'chat-msg-action-label' }, a.label) : null)))
         : null;
-    const stack = h('div', { class: 'chat-stack' }, ...bodyNodes, reactionRow, actionRow, meta);
+    // Flat layout leads the turn with a small role label (You / agent name)
+    // above the content, the way claude.ai/code titles each turn.
+    const roleLabel = isFlat
+        ? h('div', { class: 'chat-role', key: '_role' }, resolvedWho === 'you' ? 'You' : (name || 'Assistant'))
+        : null;
+    const stack = h('div', { class: 'chat-stack' }, roleLabel, ...bodyNodes, reactionRow, actionRow, meta);
     // Centered roles (system/tool/thinking) skip the avatar column entirely so
     // the bubble owns the full row — the chrome reads as out-of-band signal,
     // not a participant turn.
     if (isCentered) return h('div', { key, class: cls }, stack);
+    // Flat turns drop the avatar column entirely (full-width content).
+    if (isFlat) return h('div', { key, class: cls }, stack);
     return h('div', { key, class: cls }, resolvedWho === 'you' ? stack : av, resolvedWho === 'you' ? av : stack);
 }
 

package/src/components/files-modals.js

@@ -3,6 +3,7 @@
 import * as webjsx from '../../vendor/webjsx/index.js';
 import { Btn, Icon } from './shell.js';
 import { fileGlyph, fmtFileSize } from './files.js';
+import { highlightAllUnder } from '../highlight.js';
 const h = webjsx.createElement;
 
 // Monotonic id source for aria-labelledby wiring between a modal and its head.
@@ -205,7 +206,29 @@ export function PromptDialog({ title = 'name', value = '', placeholder = '', con
 }
 
 export function FilePreviewMedia({ src, type = 'other', name } = {}) {
-    if (type === 'image') return h('img', { class: 'ds-preview-media', src, alt: name || '' });
+    if (type === 'image') {
+        // Fit-to-pane (default) vs actual-size (1:1) toggle + a checkerboard so
+        // transparency reads. The toggle flips a class on the img in-place and
+        // reports the natural pixel dimensions into its own caption on load.
+        const onToggle = (e) => {
+            const wrap = e.currentTarget.closest('.ds-preview-media-wrap');
+            const img = wrap && wrap.querySelector('.ds-preview-media');
+            if (!img) return;
+            const actual = img.classList.toggle('is-actual');
+            e.currentTarget.textContent = actual ? 'fit to pane' : 'actual size';
+        };
+        const onLoad = (e) => {
+            const img = e.currentTarget;
+            const cap = img.closest('.ds-preview-media-wrap');
+            const dim = cap && cap.querySelector('.ds-preview-media-dim');
+            if (dim && img.naturalWidth) dim.textContent = img.naturalWidth + ' x ' + img.naturalHeight + ' px';
+        };
+        return h('div', { class: 'ds-preview-media-wrap' },
+            h('img', { class: 'ds-preview-media ds-preview-media-alpha', src, alt: name || '', onload: onLoad }),
+            h('div', { class: 'ds-preview-media-controls' },
+                h('span', { class: 'ds-preview-media-dim', 'aria-live': 'polite' }, ''),
+                h('button', { type: 'button', class: 'chat-code-copy', onclick: onToggle }, 'actual size')));
+    }
     if (type === 'video') return h('video', { class: 'ds-preview-media', src, controls: true });
     if (type === 'audio') return h('audio', { class: 'ds-preview-audio', src, controls: true });
     return h('div', { class: 'ds-preview-fallback' },
@@ -230,11 +253,30 @@ export function FilePreviewCode({ content = '', lang, filename } = {}) {
             filename ? h('span', { class: 'name' }, filename) : null,
             h('span', { class: 'spread' }),
             h('button', { type: 'button', class: 'chat-code-copy chat-code-copy-head', 'aria-label': 'copy code', onclick: onCopy }, 'copy')),
-        h('pre', { class: 'ds-preview-code' + (lang ? ' lang-' + lang : '') },
-            h('code', { class: lang ? 'language-' + lang : '' }, content))
+        codeBody({ content, lang })
     );
 }
 
+// The code body: a non-selectable line-number gutter + the highlighted code.
+// A ref triggers Prism over the <code> after mount (the bundle only auto-runs
+// Prism in the chat path), so the file preview is token-colored like Claude
+// Code's file pane. lineNumbers defaults on for code, off for plaintext.
+function codeBody({ content = '', lang } = {}) {
+    const wantGutter = !!lang;
+    const lineCount = content ? content.split('\n').length : 1;
+    const gutter = wantGutter
+        ? h('div', { class: 'ds-preview-gutter', 'aria-hidden': 'true' },
+            Array.from({ length: lineCount }, (_, i) => String(i + 1)).join('\n'))
+        : null;
+    const highlightRef = (el) => {
+        if (!el) return;
+        try { highlightAllUnder(el); } catch {}
+    };
+    return h('pre', { class: 'ds-preview-code' + (lang ? ' lang-' + lang : '') + (wantGutter ? ' has-gutter' : ''), ref: highlightRef },
+        gutter,
+        h('code', { class: lang ? 'language-' + lang : '' }, content));
+}
+
 export function FilePreviewText({ content = '', truncated } = {}) {
     return h('pre', { class: 'ds-preview-text' },
         h('code', {}, content),

package/src/components/files.js

@@ -10,8 +10,8 @@ const FILE_GRID_MIN_COL = '240px';
 
 const FILE_TYPES = ['dir', 'image', 'video', 'audio', 'code', 'text', 'archive', 'document', 'symlink', 'other'];
 const TYPE_ICON = {
-    dir: 'file', image: 'file', video: 'file-video', audio: 'file-audio', code: 'file-code',
-    text: 'file-text', archive: 'file-zip', document: 'file-text', symlink: 'file', other: 'file'
+    dir: 'folder', image: 'file-image', video: 'file-video', audio: 'file-audio', code: 'file-code',
+    text: 'file-text', archive: 'file-zip', document: 'file-text', symlink: 'link', other: 'file'
 };
 
 const TYPE_LABELS = {

package/src/components/sessions.js

@@ -69,7 +69,13 @@ export function ConversationList({ sessions = [], selected, groups, search, capt
   // are uniformly keyed; non-row states render a single unkeyed status line.
   let inner;
   if (loading) {
-    inner = [h('div', { key: 'st', class: 'ds-session-state', role: 'status', 'aria-live': 'polite' }, loadingText)];
+    // Shape-matched skeleton rows during the cold ccsniff index walk (the rail
+    // showed a bare line before) - Claude-Desktop skeletons its sidebar on load.
+    inner = [
+      h('div', { key: 'st', class: 'ds-session-state', role: 'status', 'aria-live': 'polite' }, loadingText),
+      ...Array.from({ length: 5 }, (_, i) => h('div', { key: 'sk' + i, class: 'ds-session-row-skeleton', 'aria-hidden': 'true' },
+        h('div', { class: 'ds-skel ds-skel-title' }), h('div', { class: 'ds-skel ds-skel-meta' }))),
+    ];
   } else if (error) {
     inner = [h('div', { key: 'st', class: 'ds-session-state ds-session-state-error', role: 'status' }, String(error))];
   } else if (!sessions.length) {
@@ -161,41 +167,51 @@ export function SessionCard({ session = {}, onStop, onOpen, onView, active = fal
   // last-activity time and the current tool so a card shows MOTION, not just a
   // start offset. Both are middot-joined (kept product separator).
   const elapsedText = s.elapsedMs != null ? fmtDuration(s.elapsedMs) : (s.elapsed != null ? s.elapsed : null);
-  const statBits = [elapsedText, s.counter != null ? s.counter : null].filter((x) => x != null && x !== '');
+  // At-a-glance cost/usage (the prompt's named command-center signal). Null-safe:
+  // sessions with no cost source (external tally rows) simply omit the segment.
+  const tokText = s.tokens != null ? (typeof s.tokens === 'number' ? s.tokens.toLocaleString() : s.tokens) + ' tok' : null;
+  const costText = s.cost != null ? (typeof s.cost === 'number' ? '$' + s.cost.toFixed(4) : String(s.cost)) : null;
+  const statBits = [elapsedText, s.counter != null ? s.counter : null, tokText, costText].filter((x) => x != null && x !== '');
   const activityBits = [
     s.currentTool ? 'running: ' + s.currentTool : null,
     s.lastActivity ? 'last ' + s.lastActivity : null,
   ].filter(Boolean);
-  const cls = 'ds-dash-card is-' + st + (active ? ' is-active' : '') + (selected ? ' is-selected' : '') + (s.external ? ' is-external' : '');
+  const cls = 'ds-dash-card is-' + st + (active ? ' is-active' : '') + (selected ? ' is-selected' : '') + (s.external ? ' is-external' : '') + (s.isNew ? ' is-new' : '');
+  // EVERY children array is filter(Boolean)'d: webjsx applyDiff crashes
+  // (reading 'key') on a bare null among VElement siblings, so a null cwd /
+  // model / external flag must never reach a positional child slot.
+  const head = h('div', { class: 'ds-dash-card-head' }, ...[
+    selectable ? h('button', {
+      type: 'button', class: 'ds-dash-select', role: 'checkbox',
+      'aria-checked': selected ? 'true' : 'false',
+      'aria-label': (selected ? 'deselect' : 'select') + ' session ' + (s.title || s.agent || s.sid),
+      onclick: () => onToggleSelect && onToggleSelect(s),
+    }, selected ? '[x]' : '[ ]') : null,
+    h('span', { class: 'status-dot-disc ' + STATUS_DISC[st], 'aria-hidden': 'true' }),
+    h('span', { class: 'ds-dash-status is-' + st }, STATUS_WORD[st]),
+    s.external ? h('span', { class: 'ds-dash-external' }, 'external') : null,
+    h('span', { class: 'ds-dash-agent', title: s.agent || null }, s.agent || 'agent'),
+    s.model ? h('span', { class: 'ds-dash-model', title: s.model }, s.model) : null,
+  ].filter(Boolean));
+  const meta = h('div', { class: 'ds-dash-meta' }, ...[
+    s.cwd ? h('span', { class: 'ds-dash-cwd', title: s.cwd }, s.cwd) : null,
+    statBits.length ? h('span', { class: 'ds-dash-stat' }, statBits.join(' · ')) : null,
+    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),
+      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',
+      onClick: () => !s.stopping && onStop(s),
+      children: [Icon('square', { size: 14 }), h('span', {}, s.stopping ? 'stopping…' : 'stop')] }) : null,
+  ].filter(Boolean));
   return h('div', { class: cls, role: 'group', 'aria-label': 'session ' + (s.title || s.agent || s.sid), 'aria-current': active ? 'true' : null },
-    // Shared session identity: the same title the conversation rails show.
-    s.title ? h('div', { class: 'ds-dash-title', title: s.title }, s.title) : null,
-    h('div', { class: 'ds-dash-card-head' },
-      selectable ? h('button', {
-        type: 'button', class: 'ds-dash-select', role: 'checkbox',
-        'aria-checked': selected ? 'true' : 'false',
-        'aria-label': (selected ? 'deselect' : 'select') + ' session ' + (s.title || s.agent || s.sid),
-        onclick: () => onToggleSelect && onToggleSelect(s),
-      }, selected ? '[x]' : '[ ]') : null,
-      h('span', { class: 'status-dot-disc ' + STATUS_DISC[st], 'aria-hidden': 'true' }),
-      // Status is words + the disc, never colour alone (WCAG 1.4.1): the disc is
-      // aria-hidden, so the visible/AT status word carries the state.
-      h('span', { class: 'ds-dash-status is-' + st }, STATUS_WORD[st]),
-      s.external ? h('span', { class: 'ds-dash-external' }, 'external') : null,
-      h('span', { class: 'ds-dash-agent', title: s.agent || null }, s.agent || 'agent'),
-      s.model ? h('span', { class: 'ds-dash-model', title: s.model }, s.model) : null),
-    h('div', { class: 'ds-dash-meta' },
-      s.cwd ? h('span', { class: 'ds-dash-cwd', title: s.cwd }, s.cwd) : null,
-      statBits.length ? h('span', { class: 'ds-dash-stat' }, statBits.join(' · ')) : null,
-      activityBits.length ? h('span', { class: 'ds-dash-activity' }, activityBits.join(' · ')) : null),
-    h('div', { class: 'ds-dash-actions', role: 'group', 'aria-label': 'session actions' },
-      // open and resume collapsed into one 'open' action (they both just reopen
-      // the session in chat); 'events' kept for the read-only event view.
-      onOpen ? Btn({ key: 'open', onClick: () => onOpen(s), children: 'open' }) : null,
-      onView ? Btn({ key: 'view', onClick: () => onView(s), children: s.external ? 'open in history' : 'events' }) : null,
-      // External sessions get no stop control: we own no process to kill.
-      (onStop && !s.external) ? Btn({ key: 'stop', danger: true, disabled: !!s.stopping,
-        onClick: () => !s.stopping && onStop(s), children: s.stopping ? 'stopping…' : 'stop' }) : null));
+    ...[
+      s.title ? h('div', { class: 'ds-dash-title', title: s.title }, s.title) : null,
+      head, meta, actions,
+    ].filter(Boolean));
 }
 
 // SessionDashboard — grid of SessionCards for ALL live sessions, managed at once.
@@ -226,7 +242,7 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
                                    confirmingStopAll = false, confirmingStopSelected = false,
                                    onArmStopAll, onArmStopSelected,
                                    sort, filter, errorsOnly = false, onErrorsOnly,
-                                   selectable = false, selected, onToggleSelect,
+                                   selectable = false, selected, onToggleSelect, onSelectAll, onClearSelection,
                                    activeSid, streamState,
                                    emptyText = 'No live sessions', offline = false } = {}) {
   if (offline) {
@@ -239,11 +255,37 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
   const stoppingCount = sessions.filter((s) => s.stopping).length;
   // The stream-state line always renders (even with zero sessions) so a
   // connected-but-idle dashboard reads differently from an offline one.
+  // The stream line leads with a status disc so a connected dashboard visibly
+  // PULSES that it is listening (the command-center heartbeat), connecting/offline
+  // show a static disc. The disc is aria-hidden; the word carries the state.
+  const streamDisc = streamState
+    ? 'status-dot-disc ' + (streamState === 'connected' ? 'status-dot-live'
+        : streamState === 'connecting' ? 'status-dot-connecting' : 'status-dot-error')
+    : null;
   const streamLine = streamState
-    ? h('span', { class: 'ds-dash-stream is-' + streamState, role: 'status', 'aria-live': 'polite' }, STREAM_WORD[streamState] || streamState)
+    ? h('span', { key: 'stream', class: 'ds-dash-stream-disc' },
+        h('span', { class: streamDisc, 'aria-hidden': 'true' }),
+        h('span', { class: 'ds-dash-stream is-' + streamState, role: 'status', 'aria-live': 'polite' }, STREAM_WORD[streamState] || streamState))
+    : null;
+  // At-a-glance status breakdown for the command-center header.
+  const counts = sessions.reduce((a, s) => {
+    const k = s.status === 'error' ? 'error' : (s.status === 'stale' ? 'idle' : 'running');
+    a[k] = (a[k] || 0) + 1; return a;
+  }, {});
+  const breakdownSegs = [
+    counts.running ? { k: 'running', t: counts.running + ' running' } : null,
+    counts.idle ? { k: 'idle', t: counts.idle + ' idle' } : null,
+    counts.error ? { k: 'error', t: counts.error + ' error' + (counts.error === 1 ? '' : 's') } : null,
+  ].filter(Boolean);
+  const breakdown = breakdownSegs.length
+    ? h('span', { key: 'bd', class: 'ds-dash-breakdown', role: 'status', 'aria-live': 'polite' },
+        ...breakdownSegs.flatMap((seg, i) => [
+          i ? h('span', { key: 'bsep' + i, class: 'ds-dash-breakdown-sep', 'aria-hidden': 'true' }, ' · ') : null,
+          h('span', { key: 'bseg' + i, class: 'seg is-' + seg.k }, seg.t),
+        ].filter(Boolean)))
     : null;
   const toolbar = (sort || filter || onErrorsOnly)
-    ? h('div', { class: 'ds-dash-toolbar', role: 'group', 'aria-label': 'sort and filter sessions' },
+    ? h('div', { key: 'tb', class: 'ds-dash-toolbar', role: 'group', 'aria-label': 'sort and filter sessions' },
         filter ? SearchInput({ key: 'filt', value: filter.value || '', label: filter.placeholder || 'Filter sessions', placeholder: filter.placeholder || 'Filter sessions', onInput: (v) => filter.onInput && filter.onInput(v) }) : null,
         sort ? Select({ key: 'sort', value: sort.value || 'status', title: 'Sort sessions',
           options: [
@@ -258,31 +300,70 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
   if (!sessions.length) {
     return h('div', { class: 'ds-dash' },
       h('div', { class: 'ds-dash-header', role: 'group', 'aria-label': 'live session controls' },
-        h('span', { class: 'ds-dash-count', role: 'status', 'aria-live': 'polite' }, '0 running'), streamLine),
+        ...[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));
   }
-  const header = h('div', { class: 'ds-dash-header', role: 'group', 'aria-label': 'live session controls' },
-    h('span', { class: 'ds-dash-count', role: 'status', 'aria-live': 'polite' },
-      selectable && selCount ? selCount + ' selected' : sessions.length + ' running'),
-    streamLine,
-    h('span', { class: 'spread' }),
-    stoppingCount > 0 && (onStopSelected || onStopAll)
+  // 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;
+  const allState = selOfVisible === 0 ? 'false' : (selOfVisible === selectableSids.length ? 'true' : 'mixed');
+  const selectAllCtl = (selectable && onSelectAll && selectableSids.length)
+    ? h('button', { key: 'selall', type: 'button', class: 'ds-dash-selectall', role: 'checkbox',
+        'aria-checked': allState, 'aria-label': allState === 'true' ? 'clear selection' : 'select all sessions',
+        onclick: () => (allState === 'true' && onClearSelection) ? onClearSelection() : onSelectAll(selectableSids) },
+        h('span', { 'aria-hidden': 'true' }, allState === 'true' ? '[x]' : allState === 'mixed' ? '[-]' : '[ ]'),
+        h('span', {}, 'all'))
+    : null;
+  const clearCtl = (selectable && selCount && onClearSelection)
+    ? 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 + '…' })
       : (selectable && selCount && onStopSelected
       ? (onArmStopSelected && !confirmingStopSelected
           ? Btn({ key: 'stopsel', danger: true, onClick: () => onArmStopSelected([...selSet]), children: 'stop selected' })
-          : Btn({ key: 'stopsel', danger: true, onClick: () => onStopSelected([...selSet]),
+          : Btn({ key: 'stopsel', danger: true, 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, onClick: () => onStopAll(sessions),
+              : Btn({ key: 'stopall', danger: true, className: confirmingStopAll ? 'is-armed' : null, onClick: () => onStopAll(sessions),
                       children: confirmingStopAll ? 'stop ' + sessions.length + ' sessions - press again' : 'stop all' }))
-          : null)),
-    toolbar);
-  const grid = h('div', { class: 'ds-dash-grid', role: 'list', 'aria-label': 'live sessions' },
-    ...sessions.map((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 }))));
-  return h('div', { class: 'ds-dash' }, header, grid);
+          : null));
+  // Build header children as a filtered array: webjsx applyDiff crashes
+  // (reading 'key') when a bare null sits among keyed siblings, so never pass
+  // a conditional child positionally - filter it out first.
+  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')),
+    selectAllCtl, clearCtl, streamLine,
+    h('span', { key: 'spread', class: 'spread' }),
+    stopBtn, 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
+  // grid renders labelled sections (Errored / Running / Idle / External) so a
+  // pile of sessions reads as scannable groups. Other sorts collapse to one
+  // flat grid (the sort already orders them).
+  const grouped = !sort || !sort.value || sort.value === 'status';
+  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) {
+    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)))));
+  } else {
+    body = h('div', { class: 'ds-dash-grid', role: 'list', 'aria-label': 'live sessions' }, ...sessions.map(cardOf));
+  }
+  return h('div', { class: 'ds-dash' }, header, body);
 }

package/src/components/shell.js

@@ -15,11 +15,12 @@ export function Chip({ tone = '', children }) {
     return h('span', { class: 'chip' + (tone ? ' tone-' + tone : '') }, children);
 }
 
-export function Btn({ href, variant = 'default', children, onClick, 'aria-label': ariaLabel, primary, ghost, danger, disabled }) {
+export function Btn({ href, variant = 'default', children, onClick, 'aria-label': ariaLabel, primary, ghost, danger, disabled, className }) {
     // Support legacy primary/ghost props for backward compatibility, but prefer variant
     const resolvedVariant = variant !== 'default' ? variant : (primary ? 'primary' : (ghost ? 'ghost' : (danger ? 'danger' : 'default')));
     const cls = (resolvedVariant === 'primary' ? 'btn-primary' : (resolvedVariant === 'ghost' ? 'btn-ghost' : (resolvedVariant === 'danger' ? 'btn-primary danger' : 'btn')))
-        + (disabled ? ' is-disabled' : '');
+        + (disabled ? ' is-disabled' : '')
+        + (className ? ' ' + className : '');
     const onclick = (e) => {
         if (disabled) { e.preventDefault(); return; }
         if (onClick) onClick(e);
@@ -29,6 +30,10 @@ export function Btn({ href, variant = 'default', children, onClick, 'aria-label'
     // A real navigational href renders an anchor; everything else is an action
     // button and renders a native <button> (correct semantics + keyboard
     // activation for free, no role=button / href="#" scroll-jump hack).
+    // children may be a string OR an array of vnodes (e.g. icon + label); spread
+    // arrays so each vnode is a real child - passing the array as a single child
+    // produces a nested array webjsx applyDiff cannot key-diff (reading 'key').
+    const kids = Array.isArray(children) ? children : [children];
     const isLink = href != null && href !== '' && href !== '#';
     if (isLink) {
         return h('a', {
@@ -37,14 +42,14 @@ export function Btn({ href, variant = 'default', children, onClick, 'aria-label'
             'aria-disabled': disabled ? 'true' : null,
             tabindex: disabled ? '-1' : null,
             onclick
-        }, children);
+        }, ...kids);
     }
     return h('button', {
         type: 'button', class: cls,
         disabled: disabled ? true : null,
         'aria-label': ariaName,
         onclick
-    }, children);
+    }, ...kids);
 }
 
 export function IconButton({ icon, onClick, title, size = 'base', variant = 'ghost', disabled = false }) {
@@ -138,6 +143,9 @@ const ICON_PATHS = {
     contrast: '<circle cx="12" cy="12" r="9"/><path d="M12 3v18a9 9 0 0 0 0-18z" fill="currentColor"/>',
     // file-browser icons (replace folder/file emoji + arrow glyphs in fs apps)
     folder: '<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
+    'folder-open': '<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2H5l-2 9z"/><path d="M3 18l2-9h17l-2 9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
+    'file-image': '<path d="M6 3h8l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5"/><circle cx="9.5" cy="12.5" r="1.5"/><path d="M18 19l-4-4-3 3-2-2-3 3"/>',
+    link: '<path d="M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1"/>',
     upload: '<path d="M12 16V4M7 9l5-5 5 5"/><path d="M5 20h14"/>',
     download: '<path d="M12 4v12M7 11l5 5 5-5"/><path d="M5 20h14"/>',
     'corner-up-left': '<path d="M9 14 4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 5 5v6"/>',
@@ -363,7 +371,7 @@ function wsCollapsed(which, fallback) {
 export function WorkspaceShell({ rail, sessions, main, pane, crumb, status, narrow,
                                  railCollapsed = false, paneCollapsed = false,
                                  railLabel = 'workspace navigation',
-                                 paneLabel = 'context', stableFrame = false } = {}) {
+                                 paneLabel = 'context', stableFrame = false, mainFlush = false } = {}) {
     const hasSessions = Boolean(sessions);
     const hasPane = Boolean(pane);
     // Stable frame: keep the pane grid TRACK present even when this tab has no
@@ -423,7 +431,7 @@ export function WorkspaceShell({ rail, sessions, main, pane, crumb, status, narr
                         onclick: () => toggleWsDrawer('pane'),
                     }, Icon('page')) : null)
                 : null,
-            h('main', { class: 'ws-main' + (narrow ? ' narrow' : ''), id: 'ws-main', tabindex: '-1' },
+            h('main', { class: 'ws-main' + (narrow ? ' narrow' : '') + (mainFlush ? ' ws-main--flush' : ''), id: 'ws-main', tabindex: '-1' },
                 ...(Array.isArray(main) ? main : [main])),
             status || null),
         // Optional right context pane with its own collapse toggle.