anentrypoint-design 0.0.198 → 0.0.200

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.198",
+  "version": "0.0.200",
   "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

@@ -124,6 +124,8 @@ export function AgentChat(props = {}) {
     canSend = true,
     suggestions = [], onSuggestionClick,
     onCopyMessage, onRetryMessage, onEditMessage,
+    avatar, composerContext,
+    followups = [], onFollowupClick,
   } = props;
 
   const name = agentName || (agents.find((a) => a.id === selectedAgent)?.name) || selectedAgent || 'agent';
@@ -164,7 +166,16 @@ export function AgentChat(props = {}) {
         // container shape (.chat-md padding/spacing) the settled markdown will
         // use — only the inner content swaps on settle, so the bubble box does
         // not reflow/jump when the turn finishes and renders real markdown.
-        if (isStreaming && part.kind === 'md') parts.push({ kind: 'text', text: part.text, mdShell: true });
+        if (isStreaming && part.kind === 'md') {
+          // If the streaming prose contains a code fence, the inline renderer
+          // (which has no triple-backtick handling) would show it as run-on text
+          // with literal ``` and no monospace, then snap into a styled <pre> on
+          // settle (a visible reflow during the most-watched moment). Detect a
+          // fence and render the bubble as a cheap monospaced <pre> shell instead
+          // (no Prism mid-stream, so no O(n^2)) so it does not reflow on settle.
+          if (part.text && part.text.indexOf('```') !== -1) parts.push({ kind: 'text', text: part.text, mdShell: true, preShell: true });
+          else parts.push({ kind: 'text', text: part.text, mdShell: true });
+        }
         else parts.push(part);
       }
     }
@@ -181,7 +192,7 @@ export function AgentChat(props = {}) {
     let actions;
     if (!isStreaming && msgHasBody(m)) {
       const built = [];
-      if (onCopyMessage) built.push({ label: 'copy', icon: 'page', title: 'copy message', onClick: () => onCopyMessage(m) });
+      if (onCopyMessage) built.push({ label: 'copy', icon: 'copy', title: 'copy message', onClick: () => onCopyMessage(m) });
       if (isAssistant && onRetryMessage && i === lastIdx) built.push({ label: 'retry', icon: 'refresh', title: 'retry this turn', onClick: () => onRetryMessage(m) });
       if (!isAssistant && onEditMessage) built.push({ label: 'edit', icon: 'pencil', title: 'edit and resend', onClick: () => onEditMessage(m) });
       if (built.length) actions = built;
@@ -190,6 +201,9 @@ export function AgentChat(props = {}) {
       key: m.id || String(i),
       who: isAssistant ? 'them' : 'you',
       aicat: isAssistant,
+      // 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,
       name: isAssistant ? name : 'you',
       time: m.time || '',
       typing: emptyStreaming,
@@ -210,8 +224,21 @@ export function AgentChat(props = {}) {
     onInput: (v) => onInput && onInput(v),
     onSend: (v) => onSend && onSend(v),
     onCancel: busy && onStop ? () => onStop() : undefined,
+    // The active target (agent / model / cwd-basename) at the point of typing.
+    context: composerContext,
   });
 
+  // Contextual follow-up chips below the last SETTLED assistant turn (claude.ai/
+  // code / cowork surface these after a turn, not only on an empty thread). Shown
+  // only when not busy and the last message is an assistant turn with body.
+  const followupRow = (!busy && followups && followups.length && lastMsg && lastMsg.role === 'assistant' && msgHasBody(lastMsg))
+    ? h('div', { class: 'agentchat-followups', role: 'group', 'aria-label': 'suggested follow-ups' },
+        ...followups.map((s, i) => h('button', {
+          key: 'fu' + i, type: 'button', class: 'agentchat-empty-suggestion agentchat-followup',
+          onclick: () => { const t = typeof s === 'string' ? s : (s.prompt || s.text || ''); if (onFollowupClick) onFollowupClick(t); else if (onSuggestionClick) onSuggestionClick(t); },
+        }, typeof s === 'string' ? s : (s.label || s.text || s.prompt))))
+    : null;
+
   // Empty state: a fresh thread is a void without this. Mirrors the kit's Chat
   // empty surface (title, sub, optional starter prompts) so AgentChat opens to
   // an invitation, not a blank panel.
@@ -250,7 +277,8 @@ export function AgentChat(props = {}) {
           ? h('div', { key: '_working', class: 'agentchat-working', role: 'status', 'aria-live': 'polite' },
               h('span', { class: 'chat-thinking-dots', 'aria-hidden': 'true' }, h('span'), h('span'), h('span')),
               h('span', { class: 'agentchat-working-text' }, 'working…'))
-          : null),
+          : null,
+        followupRow),
       // Jump-to-latest: hidden until the scroll listener adds .show (user scrolled
       // up). Clicking returns to the live edge. Pure-DOM, like the kit's other
       // stateless chrome, so the host needn't thread scroll state through state.

package/src/components/chat.js

@@ -100,12 +100,44 @@ export function makeThreadAutoScroll(getCount) {
     };
 }
 
+// Inject a per-block copy button into every <pre> inside a rendered-markdown
+// container. claude.ai/code and Claude Desktop give EVERY fenced block a hover
+// copy affordance; the chat surface had only a whole-message copy. Idempotent:
+// marks each <pre> with data-copy-wired so re-renders don't stack buttons. The
+// button reveals on .chat-code-block:hover/:focus-within (CSS) and flips its
+// label copy -> copied for ~1.6s. Drawn with a real icon + word, no glyph.
+export function injectCodeCopy(container) {
+    if (!container) return;
+    container.querySelectorAll('pre').forEach((pre) => {
+        if (pre.dataset.copyWired === '1') return;
+        pre.dataset.copyWired = '1';
+        // Wrap the <pre> in a position:relative shell so the button can sit
+        // top-right without disturbing code layout.
+        const shell = document.createElement('div');
+        shell.className = 'chat-code-block';
+        pre.parentNode.insertBefore(shell, pre);
+        shell.appendChild(pre);
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'chat-code-copy';
+        btn.setAttribute('aria-label', 'copy code');
+        btn.textContent = 'copy';
+        btn.addEventListener('click', () => {
+            const code = pre.innerText;
+            const done = () => { btn.textContent = 'copied'; btn.classList.add('is-copied'); setTimeout(() => { btn.textContent = 'copy'; btn.classList.remove('is-copied'); }, 1600); };
+            if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(code).then(done).catch(() => {});
+            else { try { const t = document.createElement('textarea'); t.value = code; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t); done(); } catch {} }
+        });
+        shell.appendChild(btn);
+    });
+}
+
 function MdNode(p) {
     const refSink = (el) => {
         if (!el) return;
         if (el.dataset.mdSrc === p.text) return;
         el.dataset.mdSrc = p.text || '';
-        renderMarkdownCached(p.text || '').then((html) => { el.innerHTML = html; });
+        renderMarkdownCached(p.text || '').then((html) => { el.innerHTML = html; injectCodeCopy(el); });
     };
     return h('div', { class: 'chat-bubble chat-md', ref: refSink });
 }
@@ -121,10 +153,20 @@ function CodeNode(p) {
         el.dataset.codeKey = codeKey;
         highlightCodeBlockCached(el);
     };
+    // Copy the raw code (not the highlighted DOM) for the structured CodeNode.
+    const onCopy = (e) => {
+        const btn = e.currentTarget;
+        const code = p.code || '';
+        const done = () => { btn.textContent = 'copied'; btn.classList.add('is-copied'); setTimeout(() => { btn.textContent = 'copy'; btn.classList.remove('is-copied'); }, 1600); };
+        if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(code).then(done).catch(() => {});
+        else { try { const t = document.createElement('textarea'); t.value = code; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t); done(); } catch {} }
+    };
     return h('div', { class: 'chat-bubble chat-code', ref: refSink },
         h('div', { class: 'chat-code-head' },
             h('span', { class: 'lang' }, p.lang || 'code'),
-            p.filename ? h('span', { class: 'name' }, p.filename) : null
+            p.filename ? h('span', { class: 'name' }, p.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', {}, h('code', { class: p.lang ? 'lang-' + p.lang + ' language-' + p.lang : '' }, p.code || ''))
     );
@@ -173,7 +215,12 @@ function ThinkingNode(p) {
 }
 
 const PART_RENDERERS = {
-    text:  (p) => h('div', { class: 'chat-bubble' + (p.mdShell ? ' chat-md' : '') }, ...renderInline(p.text || '')),
+    text:  (p) => p.preShell
+        // Streaming prose that already contains a code fence renders as a plain
+        // monospaced <pre> so it does not reflow from prose to a styled block on
+        // settle (no Prism mid-stream). The settled turn renders real markdown.
+        ? h('div', { class: 'chat-bubble chat-md chat-stream-pre' }, h('pre', {}, h('code', {}, p.text || '')))
+        : h('div', { class: 'chat-bubble' + (p.mdShell ? ' chat-md' : '') }, ...renderInline(p.text || '')),
     md:    (p) => MdNode(p),
     code:  (p) => CodeNode(p),
     tool:        (p) => ToolCallNode(p),
@@ -275,7 +322,8 @@ export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typ
                 key: 'ma' + i, type: 'button', class: 'chat-msg-action',
                 title: a.title || a.label, 'aria-label': a.label || a.title,
                 onclick: (e) => { e.preventDefault(); a.onClick && a.onClick(e); },
-            }, a.icon ? Icon(a.icon, { size: 14 }) : (a.label || ''))))
+            }, 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);
     // Centered roles (system/tool/thinking) skip the avatar column entirely so
@@ -285,7 +333,7 @@ export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typ
     return h('div', { key, class: cls }, resolvedWho === 'you' ? stack : av, resolvedWho === 'you' ? av : stack);
 }
 
-export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu, onCancel, busy, placeholder = 'message…', disabled }) {
+export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu, onCancel, busy, placeholder = 'message…', disabled, context }) {
     // Keep a handle to the live textarea so send() reads the actual DOM value
     // (not the possibly-lagging `value` prop) and so we can sync the DOM value
     // only when it genuinely differs — re-applying `value` on every parent
@@ -320,7 +368,19 @@ export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu
         el.style.height = 'auto';
         el.style.height = Math.min(el.scrollHeight, 200) + 'px';
     };
+    // Optional context line shown above the textarea: agent / model / cwd at the
+    // point of typing (the way Claude-Desktop surfaces the active target inline).
+    // `context` is { bits:[...strings], onClick? }; bits are middot-joined (kept
+    // product separator). Clickable when onClick is wired (opens the picker).
+    const contextLine = (context && context.bits && context.bits.length)
+        ? h(context.onClick ? 'button' : 'div', {
+            class: 'chat-composer-context', type: context.onClick ? 'button' : null,
+            'aria-label': context.onClick ? ('change target: ' + context.bits.join(' · ')) : null,
+            onclick: context.onClick ? (e) => { e.preventDefault(); context.onClick(e); } : null,
+          }, context.bits.filter(Boolean).join(' · '))
+        : null;
     return h('div', { class: 'chat-composer' },
+        contextLine,
         h('textarea', { ref: taRef, placeholder, rows: 1, 'aria-label': 'message input',
             oninput: autoGrow,
             onkeydown: (e) => {

package/src/components/context-pane.js

@@ -33,6 +33,16 @@ function fmtTok(n) {
 
 export function ContextPane({ agent, model, cwd, toolCount = 0, usage, session, onSetCwd } = {}) {
     const running = Number(toolCount) > 0;
+    const hasUsage = usage && (usage.inputTokens != null || usage.outputTokens != null || usage.costUsd != null);
+    // Empty state: before an agent is picked AND with no usage/session, four
+    // placeholder rows (agent: none / model: dash / ...) read as a dead panel.
+    // Show one honest line instead.
+    if (!agent && !hasUsage && !session && !cwd) {
+        return h('div', { class: 'ds-context' },
+            h('div', { class: 'ds-context-empty', role: 'status' },
+                'No active conversation — start a chat to see context here'),
+            onSetCwd ? h('div', { class: 'ds-context-actions' }, Btn({ onClick: onSetCwd, children: 'set working dir' })) : null);
+    }
     // Each Panel's children array is all-unkeyed (no key prop on any sibling),
     // so webjsx never sees a mixed keyed/unkeyed array here.
     const panels = [
@@ -58,7 +68,7 @@ export function ContextPane({ agent, model, cwd, toolCount = 0, usage, session,
     ];
     // Usage block: surface the last turn's token/cost/turn/duration so the
     // result event is no longer silently dropped.
-    if (usage && (usage.inputTokens != null || usage.outputTokens != null || usage.costUsd != null)) {
+    if (hasUsage) {
         const tokRows = [];
         if (usage.inputTokens != null) tokRows.push(Row({ title: 'input', meta: fmtTok(usage.inputTokens) + ' tok' }));
         if (usage.outputTokens != null) tokRows.push(Row({ title: 'output', meta: fmtTok(usage.outputTokens) + ' tok' }));

package/src/components/files-modals.js

@@ -155,9 +155,24 @@ export function FilePreviewMedia({ src, type = 'other', name } = {}) {
     );
 }
 
-export function FilePreviewCode({ content = '', lang } = {}) {
-    return h('pre', { class: 'ds-preview-code' + (lang ? ' lang-' + lang : '') },
-        h('code', { class: lang ? 'language-' + lang : '' }, content)
+export function FilePreviewCode({ content = '', lang, filename } = {}) {
+    // A filename/lang header matching the chat CodeNode's .chat-code-head, plus
+    // the same copy control (chat A1/A2 ship this run, so preview matches for
+    // full cross-surface consistency).
+    const onCopy = (e) => {
+        const btn = e.currentTarget;
+        const done = () => { btn.textContent = 'copied'; btn.classList.add('is-copied'); setTimeout(() => { btn.textContent = 'copy'; btn.classList.remove('is-copied'); }, 1600); };
+        if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(content).then(done).catch(() => {});
+        else { try { const t = document.createElement('textarea'); t.value = content; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t); done(); } catch {} }
+    };
+    return h('div', { class: 'ds-preview-code-wrap' },
+        h('div', { class: 'chat-code-head ds-preview-code-head' },
+            h('span', { class: 'lang' }, lang || 'text'),
+            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))
     );
 }
 
@@ -168,25 +183,62 @@ export function FilePreviewText({ content = '', truncated } = {}) {
     );
 }
 
-export function FileViewer({ file, body, onClose, onAction } = {}) {
-    if (!file) return null;
+// Shared preview-head children for both the modal FileViewer and the inline
+// FilePreviewPane: name + meta + prev/next stepper + download + close. ASCII
+// prev/next words (no glyph arrows). onPrev/onNext are omitted when there is no
+// previewable neighbour in that direction.
+function previewHead({ file, onClose, onAction, onPrev, onNext } = {}) {
     const meta = [file.type, file.size != null ? fmtFileSize(file.size) : null, file.modified || null]
         .filter(Boolean).join(' · ');
+    return [
+        h('span', { class: 'ds-preview-name', title: file.path || file.name || '' }, file.name || ''),
+        h('span', { class: 'ds-preview-meta' }, meta),
+        h('span', { class: 'ds-preview-actions' },
+            (onPrev || onNext) ? h('span', { class: 'ds-preview-step', role: 'group', 'aria-label': 'step files' },
+                h('button', { class: 'ds-file-act', title: 'previous file', 'aria-label': 'previous file', disabled: onPrev ? null : true, onclick: () => onPrev && onPrev() }, 'prev'),
+                h('button', { class: 'ds-file-act', title: 'next file', 'aria-label': 'next file', disabled: onNext ? null : true, onclick: () => onNext && onNext() }, 'next')) : null,
+            onAction ? h('button', { class: 'ds-file-act', title: 'download', 'aria-label': 'download', onclick: () => onAction('download') }, Icon('arrow-down')) : null,
+            onClose ? h('button', { class: 'ds-file-act', title: 'close', 'aria-label': 'close', onclick: onClose }, Icon('x')) : null
+        )
+    ];
+}
+
+// ArrowLeft/Right step the preview when focus is inside it (both pane + modal).
+function previewKeyNav(onPrev, onNext) {
+    return (e) => {
+        if (e.key === 'ArrowLeft' && onPrev) { e.preventDefault(); onPrev(); }
+        else if (e.key === 'ArrowRight' && onNext) { e.preventDefault(); onNext(); }
+    };
+}
+
+export function FileViewer({ file, body, onClose, onAction, onPrev, onNext } = {}) {
+    if (!file) return null;
     return Modal({
         onClose,
         kind: 'preview',
         headClass: 'ds-preview-head',
-        headAttrs: { 'data-file-type': file.type || 'other' },
-        head: [
-            h('span', { class: 'ds-preview-name' }, file.name || ''),
-            h('span', { class: 'ds-preview-meta' }, meta),
-            h('span', { class: 'ds-preview-actions' },
-                onAction ? h('button', { class: 'ds-file-act', title: 'download', 'aria-label': 'download', onclick: () => onAction('download') }, Icon('arrow-down')) : null,
-                h('button', { class: 'ds-file-act', title: 'close', 'aria-label': 'close', onclick: onClose }, Icon('x'))
-            )
-        ],
+        headAttrs: { 'data-file-type': file.type || 'other', onkeydown: previewKeyNav(onPrev, onNext) },
+        head: previewHead({ file, onClose, onAction, onPrev, onNext }),
         bodyClass: 'ds-preview-body',
         bodyAttrs: { 'data-file-type': file.type || 'other' },
         body: Array.isArray(body) ? body : [body],
     });
 }
+
+// FilePreviewPane — the SAME preview, but as a persistent, non-modal side pane
+// for the WorkspaceShell's pane slot (the split-view, claude-Desktop file-pane
+// feel). Distinct from the overlay FileViewer (kept as the <900px fallback).
+// Not focus-trapped (it is not modal); ArrowLeft/Right step files when focused.
+export function FilePreviewPane({ file, body, onClose, onAction, onPrev, onNext } = {}) {
+    if (!file) {
+        return h('div', { class: 'ds-preview-pane ds-preview-pane-empty', role: 'status' },
+            h('span', {}, 'Select a file to preview'));
+    }
+    return h('div', { class: 'ds-preview-pane', role: 'region', 'aria-label': 'file preview: ' + (file.name || ''),
+                      tabindex: '0', onkeydown: previewKeyNav(onPrev, onNext) },
+        h('div', { class: 'ds-preview-head', 'data-file-type': file.type || 'other' },
+            ...previewHead({ file, onClose, onAction, onPrev, onNext })),
+        h('div', { class: 'ds-preview-body', 'data-file-type': file.type || 'other' },
+            ...(Array.isArray(body) ? body : [body]))
+    );
+}

package/src/components/files.js

@@ -43,26 +43,34 @@ export function FileIcon({ type = 'other' } = {}) {
     return h('span', { class: 'ds-file-icon', 'data-file-type': type, 'aria-label': TYPE_LABELS[type] || 'file', role: 'img' }, Icon(fileGlyph(type)));
 }
 
-export function FileRow({ name, type = 'other', size, modified, code, onOpen, onAction, active, key } = {}) {
-    const meta = [type === 'dir' ? null : fmtFileSize(size), modified || null].filter(Boolean).join(' · ');
+export function FileRow({ name, type = 'other', size, modified, code, onOpen, onAction, active, key, permissions, locked } = {}) {
+    // permissions: ['read','write'] | ['read'] | 'EACCES'. A no-access entry can
+    // be listed (the dir stat saw it) but not opened — show an ASCII tag and
+    // disable the open button so the row reads honestly instead of silently
+    // failing on click.
+    const noAccess = locked || permissions === 'EACCES' || (Array.isArray(permissions) && permissions.length === 0);
+    const readOnly = !noAccess && Array.isArray(permissions) && permissions.indexOf('write') === -1 && permissions.indexOf('read') !== -1;
+    const permTag = noAccess ? 'no access' : (readOnly ? 'read-only' : null);
+    const meta = [type === 'dir' ? null : fmtFileSize(size), modified || null, permTag].filter(Boolean).join(' · ');
     const typeLabel = TYPE_LABELS[type] || 'file';
     const accessibleLabel = `${typeLabel}: ${name}${meta ? ` (${meta})` : ''}`;
+    const canOpen = onOpen && !noAccess;
     // A role=button row containing real <button> action controls is invalid
     // HTML (interactive nesting). Instead the row is a plain container and the
     // primary "open" affordance is itself a real <button> (native keyboard +
     // semantics); the per-file action buttons sit alongside it as siblings.
     return h('div', {
         key,
-        class: 'ds-file-row row' + (active ? ' active' : ''),
+        class: 'ds-file-row row' + (active ? ' active' : '') + (noAccess ? ' is-locked' : ''),
         'data-file-type': type,
     },
         h('button', {
             type: 'button',
             class: 'ds-file-open',
-            onclick: onOpen || null,
-            'aria-label': accessibleLabel,
+            onclick: canOpen ? onOpen : null,
+            'aria-label': accessibleLabel + (noAccess ? ' (no access)' : ''),
             'aria-pressed': active ? 'true' : 'false',
-            disabled: onOpen ? null : true,
+            disabled: canOpen ? null : true,
         },
             code != null ? h('span', { class: 'code', 'aria-label': `code: ${code}` }, code) : null,
             FileIcon({ type }),
@@ -117,10 +125,22 @@ export function sortFiles(files = [], sort = 'name', dir = 'asc') {
 // Keyboard nav: the grid is a focusable listbox - ArrowUp/Down move the active
 // row, Enter opens it, Backspace asks the host to go up (onUp). The host keeps no
 // focus state; the grid tracks it on the DOM via roving tabindex.
-export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'no files here yet',
-                          columns = 'auto', sort, filter, loading = false } = {}) {
+// How many rows to render before the "show more" cap kicks in. A node_modules-
+// scale directory would otherwise flood the DOM with thousands of rows (and make
+// the roving-tabindex querySelectorAll scan O(n) per keypress). Render the first
+// CAP and a "show N more" row, mirroring the History tab's "load N older".
+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 } = {}) {
     if (loading) return FileSkeleton({});
     if (!files.length) return EmptyState({ text: emptyText });
+    // 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;
+    const capped = files.length > limit;
+    const visible = capped ? files.slice(0, limit) : files;
     const gridAttrs = {};
     if (columns !== 'auto' && columns > 0) {
         const col = Math.max(1, Math.min(4, Math.floor(columns)));
@@ -151,16 +171,30 @@ export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'no f
             'aria-label': filter.placeholder || 'Filter files in this directory',
             oninput: (e) => filter.onInput && filter.onInput(e.target.value),
         })) : null;
-    const grid = h('div', { class: 'ds-file-grid', role: 'listbox', 'aria-label': 'files', tabindex: '0', onkeydown: onKeyDown, ...gridAttrs },
-        ...files.map((f, i) => FileRow({
+    // role=group not listbox: the rows contain real <button> action controls, so
+    // 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', role: 'group', 'aria-label': 'files', tabindex: '0', onkeydown: onKeyDown, ...gridAttrs },
+        ...visible.map((f, i) => FileRow({
             key: f.path || f.name + i,
             name: f.name, type: f.type, size: f.size, modified: f.modified, code: f.code, active: f.active,
+            permissions: f.permissions, locked: f.locked,
             onOpen: onOpen ? () => onOpen(f) : null,
             onAction: onAction ? (act) => onAction(act, f) : null
         }))
     );
-    return (head || filterBar)
-        ? h('div', { class: 'ds-file-listing' }, filterBar, head, grid)
+    // A count + "show more" affordance so a capped large dir reads as "more
+    // exist", not "this is everything". aria-live announces the shown/total.
+    const more = capped
+        ? h('div', { class: 'ds-file-more' },
+            h('span', { class: 'ds-file-more-count', role: 'status', 'aria-live': 'polite' },
+                'showing ' + visible.length + ' of ' + files.length),
+            onShowMore ? h('button', { type: 'button', class: 'ds-file-more-btn',
+                onclick: () => onShowMore(Math.min(files.length, limit + FILE_GRID_CAP)) },
+                'show ' + Math.min(FILE_GRID_CAP, files.length - limit) + ' more') : null)
+        : null;
+    return (head || filterBar || more)
+        ? h('div', { class: 'ds-file-listing' }, filterBar, head, grid, more)
         : grid;
 }
 
@@ -185,6 +219,21 @@ export function FileToolbar({ left = [], right = [] } = {}) {
     );
 }
 
+// RootsPicker — a segmented control for choosing among multiple allowed FS roots
+// (so the app stops borrowing the history-tab .pill markup). Each root is
+// { id, label }; `selected` is the active id. role=tablist for AT navigation.
+export function RootsPicker({ roots = [], selected, onSelect, label = 'roots' } = {}) {
+    if (!roots.length) return null;
+    return h('div', { class: 'ds-roots-picker', role: 'tablist', 'aria-label': label },
+        ...roots.map((r) => h('button', {
+            key: 'root-' + (r.id != null ? r.id : r.label),
+            type: 'button', role: 'tab',
+            class: 'ds-roots-tab' + ((r.id != null ? r.id : r.label) === selected ? ' active' : ''),
+            'aria-selected': (r.id != null ? r.id : r.label) === selected ? 'true' : 'false',
+            onclick: () => onSelect && onSelect(r.id != null ? r.id : r.label),
+        }, r.label || r.id)));
+}
+
 export function DropZone({ children, dragover, onDrop, onDragOver, onDragLeave, label = 'drop files here', onPick } = {}) {
     return h('div', {
         class: 'ds-dropzone' + (dragover ? ' dragover' : ''),

package/src/components/interaction-primitives.js

@@ -330,7 +330,10 @@ export function ShortcutHelpDialog({ open = false, onClose, registry } = {}) {
             ...Object.entries(groups).map(([scope, rows]) =>
                 h('section', { class: 'ds-kbd-group' },
                     h('h3', null, scope),
-                    h('ul', null, ...rows.map(r => h('li', null, h(ShortcutHint, { combo: r.combo }))))
+                    h('ul', null, ...rows.map(r => h('li', { class: 'ds-kbd-row' },
+                        h(ShortcutHint, { combo: r.combo }),
+                        (r.label || r.description) ? h('span', { class: 'ds-kbd-label' }, r.label || r.description) : null
+                    )))
                 )
             )
         )

package/src/components/sessions.js

@@ -5,6 +5,7 @@
 
 import * as webjsx from '../../vendor/webjsx/index.js';
 import { Btn, Icon } from './shell.js';
+import { Select, SearchInput } from './content.js';
 const h = webjsx.createElement;
 
 // ConversationList — the Claude-Desktop "Chats" column. Sessions grouped by a
@@ -18,7 +19,7 @@ const h = webjsx.createElement;
 //   search   : { value, onInput, placeholder } inline filter (optional)
 //   onSelect(session), onNew() : intents
 //   emptyText, loading, error  : explicit states
-export function ConversationList({ sessions = [], selected, groups, search,
+export function ConversationList({ sessions = [], selected, groups, search, caption,
                                    onSelect, onNew, newLabel = 'New chat',
                                    emptyText = 'No conversations yet', loading = false, error = null } = {}) {
   const rowFor = (s, i) => h('button', {
@@ -77,6 +78,10 @@ export function ConversationList({ sessions = [], selected, groups, search,
         'aria-label': search.placeholder || 'Search conversations',
         oninput: (e) => search.onInput && search.onInput(e.target.value),
       }) : null),
+    // Per-tab caption telling the user what selecting a row does on this surface
+    // (chat = resume the conversation, history = browse its events) so visually
+    // identical rows are disambiguated.
+    caption ? h('div', { key: 'cap', class: 'ds-session-caption' }, caption) : null,
     body);
 }
 
@@ -90,9 +95,18 @@ export function ConversationList({ sessions = [], selected, groups, search,
 // the relative time of the most-recent event ("4s ago"); `currentTool` the tool
 // name a still-running turn is executing - together they distinguish a busy
 // session from a stuck one (a frozen elapsed alone reads identically for both).
-export function SessionCard({ session = {}, onStop, onOpen, onResume, onView } = {}) {
+// `status` is one of: 'error' | 'stale' | 'running'. A 'stale' session is one
+// the host has determined is alive but not making progress (no recent activity,
+// no current tool) — it reads as `idle` with a NON-pulsing disc so a stuck agent
+// is visually distinct from a busy one (a frozen elapsed alone reads identically
+// for both, which is the high-severity oversight gap this closes).
+const STATUS_WORD = { error: 'error', stale: 'idle', running: 'running' };
+const STATUS_DISC = { error: 'status-dot-error', stale: 'status-dot-stale', running: 'status-dot-live' };
+
+export function SessionCard({ session = {}, onStop, onOpen, onView, active = false,
+                             selectable = false, selected = false, onToggleSelect } = {}) {
   const s = session;
-  const statusTone = s.status === 'error' ? 'flame' : 'live';
+  const st = s.status === 'error' ? 'error' : (s.status === 'stale' ? 'stale' : 'running');
   // The stat line composes elapsed + live counter; the activity line carries the
   // last-activity time and the current tool so a card shows MOTION, not just a
   // start offset. Both are middot-joined (kept product separator).
@@ -101,12 +115,19 @@ export function SessionCard({ session = {}, onStop, onOpen, onResume, onView } =
     s.currentTool ? 'running: ' + s.currentTool : null,
     s.lastActivity ? 'last ' + s.lastActivity : null,
   ].filter(Boolean);
-  return h('div', { class: 'ds-dash-card' + (s.status === 'error' ? ' is-error' : ''), role: 'group', 'aria-label': 'session ' + (s.agent || s.sid) },
+  const cls = 'ds-dash-card is-' + st + (active ? ' is-active' : '') + (selected ? ' is-selected' : '');
+  return h('div', { class: cls, role: 'group', 'aria-label': 'session ' + (s.agent || s.sid), 'aria-current': active ? 'true' : null },
     h('div', { class: 'ds-dash-card-head' },
-      h('span', { class: 'status-dot-disc ' + (statusTone === 'live' ? 'status-dot-live' : 'status-dot-error'), 'aria-hidden': 'true' }),
+      selectable ? h('button', {
+        type: 'button', class: 'ds-dash-select', role: 'checkbox',
+        'aria-checked': selected ? 'true' : 'false',
+        'aria-label': (selected ? 'deselect' : 'select') + ' session ' + (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 ' + (s.status === 'error' ? 'is-error' : 'is-running') }, s.status === 'error' ? 'error' : 'running'),
+      h('span', { class: 'ds-dash-status is-' + st }, STATUS_WORD[st]),
       h('span', { class: 'ds-dash-agent' }, s.agent || 'agent'),
       s.model ? h('span', { class: 'ds-dash-model' }, s.model) : null),
     h('div', { class: 'ds-dash-meta' },
@@ -114,8 +135,9 @@ export function SessionCard({ session = {}, onStop, onOpen, onResume, onView } =
       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,
-      onResume ? Btn({ key: 'resume', onClick: () => onResume(s), children: 'resume' }) : null,
       onView ? Btn({ key: 'view', onClick: () => onView(s), children: 'events' }) : null,
       onStop ? Btn({ key: 'stop', danger: true, onClick: () => onStop(s), children: 'stop' }) : null));
 }
@@ -128,20 +150,56 @@ export function SessionCard({ session = {}, onStop, onOpen, onResume, onView } =
 // The bulk header is the "manage many at once" affordance: a live count plus a
 // stop-all button, so a user running several agents does not have to hunt each
 // card's stop. Rendered only when there are sessions AND onStopAll is wired.
-export function SessionDashboard({ sessions = [], onStop, onOpen, onResume, onView, onStopAll,
+// Streamstate words: the live-stream health signal so "connected, zero running"
+// still tells the user the dashboard is listening (vs a dropped stream).
+const STREAM_WORD = { connected: 'listening for activity', connecting: 'connecting to live stream…', lost: 'live stream lost — retrying…' };
+
+export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStopAll, onStopSelected,
+                                   sort, filter, errorsOnly = false, onErrorsOnly,
+                                   selectable = false, selected, onToggleSelect,
+                                   activeSid, streamState,
                                    emptyText = 'No live sessions', offline = false } = {}) {
   if (offline) {
     return h('div', { class: 'ds-dash-state ds-dash-state-error', role: 'status' }, 'Backend offline — live sessions unavailable');
   }
+  const selSet = selected instanceof Set ? selected : new Set(selected || []);
+  const selCount = selSet.size;
+  // The stream-state line always renders (even with zero sessions) so a
+  // connected-but-idle dashboard reads differently from an offline one.
+  const streamLine = streamState
+    ? h('span', { class: 'ds-dash-stream is-' + streamState, role: 'status', 'aria-live': 'polite' }, STREAM_WORD[streamState] || streamState)
+    : null;
+  const toolbar = (sort || filter || onErrorsOnly)
+    ? h('div', { 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: [
+            { value: 'status', label: 'sort: status' },
+            { value: 'elapsed', label: 'sort: elapsed' },
+            { value: 'activity', label: 'sort: last activity' },
+            { value: 'errors', label: 'sort: errors first' },
+          ], onChange: (v) => sort.onChange && sort.onChange(v) }) : null,
+        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-state', role: 'status' }, emptyText);
+    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('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' },
-      sessions.length + ' running'),
-    onStopAll ? Btn({ key: 'stopall', danger: true, onClick: () => onStopAll(sessions), children: 'stop all' }) : null);
+      selectable && selCount ? selCount + ' selected' : sessions.length + ' running'),
+    streamLine,
+    h('span', { class: 'spread' }),
+    selectable && selCount && onStopSelected
+      ? Btn({ key: 'stopsel', danger: true, onClick: () => onStopSelected([...selSet]), children: 'stop selected' })
+      : (onStopAll ? Btn({ key: 'stopall', danger: true, onClick: () => onStopAll(sessions), children: '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, onResume, onView }))));
+      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);
 }