anentrypoint-design 0.0.200 → 0.0.202

package/src/components/context-pane.js

@@ -13,7 +13,7 @@
 //   cwd       : the chat working directory (string) or falsy for server default
 //   toolCount : number of tool calls running in the current live turn (>=0)
 //   usage     : OPTIONAL last-turn usage { inputTokens, outputTokens, costUsd, turns, durationMs }
-//   session   : OPTIONAL session metadata { id, messages, startedAt } shown as a block
+//   session   : OPTIONAL whole-conversation totals { turns, cost } shown as a block
 //   onSetCwd  : optional callback for the "set working directory" affordance
 //
 // No decorative glyphs — words + the kit's Icon SVGs only.
@@ -21,6 +21,7 @@
 import * as webjsx from '../../vendor/webjsx/index.js';
 import { Panel, Row } from './content.js';
 import { Btn } from './shell.js';
+import { fmtDuration } from './sessions.js';
 
 const h = webjsx.createElement;
 
@@ -34,10 +35,11 @@ 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);
+    const hasSession = session && (session.turns != null || session.cost != 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) {
+    if (!agent && !hasUsage && !hasSession && !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'),
@@ -66,6 +68,14 @@ 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) {
+        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) }));
+        panels.push(Panel({ title: 'conversation', children: sesRows }));
+    }
     // Usage block: surface the last turn's token/cost/turn/duration so the
     // result event is no longer silently dropped.
     if (hasUsage) {
@@ -74,7 +84,8 @@ export function ContextPane({ agent, model, cwd, toolCount = 0, usage, session,
         if (usage.outputTokens != null) tokRows.push(Row({ title: 'output', meta: fmtTok(usage.outputTokens) + ' tok' }));
         if (usage.costUsd != null) tokRows.push(Row({ title: 'cost', meta: '$' + usage.costUsd.toFixed(4) }));
         if (usage.turns != null) tokRows.push(Row({ title: 'turns', meta: String(usage.turns) }));
-        if (usage.durationMs != null) tokRows.push(Row({ title: 'duration', meta: (usage.durationMs / 1000).toFixed(1) + 's' }));
+        // One duration vocabulary kit-wide: shared fmtDuration (s -> m -> h).
+        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' },

package/src/components/files-modals.js

@@ -8,7 +8,7 @@ const h = webjsx.createElement;
 // Monotonic id source for aria-labelledby wiring between a modal and its head.
 let _modalSeq = 0;
 
-function Backdrop({ onClose, children, kind = '', labelledBy } = {}) {
+function Backdrop({ onClose, children, kind = '', labelledBy, busy = false } = {}) {
     // webjsx invokes a ref callback with the element on mount and with null on
     // unmount. We stash the per-element keydown teardown on the node itself so
     // the null branch can run it — otherwise the document/element listener leaks
@@ -26,9 +26,12 @@ function Backdrop({ onClose, children, kind = '', labelledBy } = {}) {
         const lastFocusable = focusables[focusables.length - 1];
 
         const handleKeydown = (e) => {
-            // Escape closes the modal
+            // Escape closes the modal — unless a mutation is in flight (the live
+            // busy state is read off the data-busy attribute, which re-renders;
+            // this handler's closure is bound once at mount).
             if (e.key === 'Escape') {
                 e.preventDefault();
+                if (el.dataset.busy === '1') return;
                 if (onClose) onClose();
                 return;
             }
@@ -52,22 +55,61 @@ function Backdrop({ onClose, children, kind = '', labelledBy } = {}) {
             }
         };
 
-        el.addEventListener('keydown', handleKeydown);
-        el._dsModalTeardown = () => el.removeEventListener('keydown', handleKeydown);
-        // Auto-focus on open — always, not only when focus sits on <body>.
-        // Prefer an element explicitly marked [autofocus].
-        const preferred = modal.querySelector('[autofocus]') || firstFocusable;
-        if (preferred) preferred.focus();
+        // Escape must close the modal no matter where focus sits (re-renders
+        // can bounce focus out of the dialog), so listen at document level
+        // for the modal's lifetime.
+        document.addEventListener('keydown', handleKeydown, true);
+        // Record the invoker BEFORE the modal steals focus, so close (confirm,
+        // cancel, Escape, backdrop click) restores keyboard/AT focus to where
+        // the user was (e.g. the FileGrid row button) instead of <body>.
+        // Re-mounts mid-lifetime (every app render re-runs this ref) keep the
+        // ORIGINAL invoker and never re-steal focus from the user.
+        const invoker = el.contains(document.activeElement) ? (Backdrop._invoker || document.activeElement) : document.activeElement;
+        if (!Backdrop._invoker) Backdrop._invoker = invoker;
+        el._dsModalTeardown = (removed) => {
+            document.removeEventListener('keydown', handleKeydown, true);
+            // Only restore focus when the modal is genuinely going away (not a
+            // re-render remount) and focus is not already somewhere useful.
+            if (removed && Backdrop._invoker && Backdrop._invoker.focus && Backdrop._invoker.isConnected) {
+                try { Backdrop._invoker.focus(); } catch {}
+            }
+            if (removed) Backdrop._invoker = null;
+        };
+        // Auto-focus on open - only when focus is not already inside the modal
+        // (re-renders must not yank the caret around).
+        if (!el.contains(document.activeElement)) {
+            const preferred = modal.querySelector('[autofocus]') || firstFocusable;
+            if (preferred) preferred.focus();
+        }
     };
 
     return h('div', {
         class: 'ds-modal-backdrop',
+        // Live busy flag read by the mount-bound Escape handler + backdrop click.
+        'data-busy': busy ? '1' : '0',
         ref: (el) => {
-            if (el) backdropRef(el);
-            else if (Backdrop._last && Backdrop._last._dsModalTeardown) { Backdrop._last._dsModalTeardown(); Backdrop._last = null; }
-            if (el) Backdrop._last = el;
+            if (el) {
+                // A remount in the same tick (render churn) is not a close:
+                // cancel the pending removal teardown before re-binding.
+                Backdrop._pendingRemoval = false;
+                backdropRef(el);
+                Backdrop._last = el;
+            } else if (Backdrop._last && Backdrop._last._dsModalTeardown) {
+                const t = Backdrop._last._dsModalTeardown;
+                Backdrop._last = null;
+                Backdrop._pendingRemoval = true;
+                t(false); // always unhook the document listener now
+                queueMicrotask(() => {
+                    // Still gone next microtask -> genuine close: restore focus.
+                    if (Backdrop._pendingRemoval) { t(true); Backdrop._pendingRemoval = false; }
+                });
+            }
         },
-        onclick: (e) => { if (e.target === e.currentTarget && onClose) onClose(); }
+        onclick: (e) => {
+            if (e.target !== e.currentTarget) return;
+            if (e.currentTarget.dataset.busy === '1') return; // no mid-flight close
+            if (onClose) onClose();
+        }
     },
         h('div', {
             class: 'ds-modal' + (kind ? ' ds-modal-' + kind : ''),
@@ -81,13 +123,14 @@ function Backdrop({ onClose, children, kind = '', labelledBy } = {}) {
 // FileViewer all funnel through this so the ds-modal markup is authored once.
 // `actions` is an array of vnodes (already using the Btn primitive). Any of the
 // slots may be omitted.
-function Modal({ onClose, kind = '', head, headClass = '', headAttrs = {}, body, bodyClass = 'ds-modal-body', bodyAttrs = {}, actions } = {}) {
+function Modal({ onClose, kind = '', head, headClass = '', headAttrs = {}, body, bodyClass = 'ds-modal-body', bodyAttrs = {}, actions, busy = false } = {}) {
     // Give the head a stable id so the dialog can point aria-labelledby at it,
     // exposing the title as the dialog's accessible name to screen readers.
     const headId = head != null ? ('ds-modal-head-' + (++_modalSeq)) : null;
     return Backdrop({
         onClose,
         kind,
+        busy,
         labelledBy: headId,
         children: [
             head != null ? h('div', { id: headId, class: ('ds-modal-head' + (headClass ? ' ' + headClass : '')), ...headAttrs }, ...(Array.isArray(head) ? head : [head])) : null,
@@ -97,40 +140,56 @@ function Modal({ onClose, kind = '', head, headClass = '', headAttrs = {}, body,
     });
 }
 
-export function ConfirmDialog({ title = 'confirm', message, confirmLabel = 'confirm', cancelLabel = 'cancel', destructive, onConfirm, onCancel } = {}) {
+// A role=alert error line rendered INSIDE the modal body (so a 409/403 from a
+// mutation is visible at the point of action, inside the focus trap — not a
+// sibling stuck in page flow behind the fixed backdrop).
+function modalError(error) {
+    return error ? h('p', { class: 'ds-modal-error field-error', role: 'alert' }, String(error)) : null;
+}
+
+// `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…' } = {}) {
     return Modal({
         onClose: onCancel,
         kind: 'small',
+        busy,
         head: title,
-        body: message || '',
+        body: [message || '', modalError(error)].filter(Boolean),
         actions: [
-            Btn({ onClick: onCancel, children: cancelLabel }),
-            Btn({ primary: true, danger: !!destructive, onClick: onConfirm, children: confirmLabel })
+            Btn({ onClick: onCancel, disabled: busy, children: cancelLabel }),
+            Btn({ primary: true, danger: !!destructive, disabled: busy, onClick: onConfirm, children: busy ? busyLabel : confirmLabel })
         ]
     });
 }
 
-export function PromptDialog({ title = 'name', value = '', placeholder = '', confirmLabel = 'ok', cancelLabel = 'cancel', onConfirm, onCancel, onInput } = {}) {
+export function PromptDialog({ title = 'name', value = '', placeholder = '', confirmLabel = 'ok', cancelLabel = 'cancel', onConfirm, onCancel, onInput, error, busy = false, busyLabel = 'working…' } = {}) {
     return Modal({
         onClose: onCancel,
         kind: 'small',
+        busy,
         head: title,
-        body: h('input', {
+        body: [h('input', {
             class: 'input ds-modal-input',
             type: 'text',
             value,
             placeholder,
             autofocus: true,
+            disabled: busy ? true : null,
+            'aria-invalid': error ? 'true' : null,
             oninput: (e) => onInput && onInput(e.target.value),
             onkeydown: (e) => {
-                if (e.key === 'Enter') { e.preventDefault(); onConfirm && onConfirm(e.target.value); }
-                if (e.key === 'Escape') { e.preventDefault(); onCancel && onCancel(); }
+                // IME guard: the Enter that commits a CJK composition must not confirm.
+                if (e.key === 'Enter' && !e.isComposing && e.keyCode !== 229) { e.preventDefault(); if (!busy) onConfirm && onConfirm(e.target.value); }
+                if (e.key === 'Escape') { e.preventDefault(); if (!busy) onCancel && onCancel(); }
             }
-        }),
+        }), modalError(error)].filter(Boolean),
         actions: [
-            Btn({ onClick: onCancel, children: cancelLabel }),
+            Btn({ onClick: onCancel, disabled: busy, children: cancelLabel }),
             Btn({
                 primary: true,
+                disabled: busy,
                 // Read the live input value, not the closed-over `value` prop:
                 // consumers update their state in oninput without re-rendering
                 // (to avoid caret jump), so the prop is stale at click time.
@@ -139,7 +198,7 @@ export function PromptDialog({ title = 'name', value = '', placeholder = '', con
                     const inp = e.currentTarget.closest('.ds-modal')?.querySelector('.ds-modal-input');
                     onConfirm(inp ? inp.value : value);
                 },
-                children: confirmLabel
+                children: busy ? busyLabel : confirmLabel
             })
         ]
     });

package/src/components/files.js

@@ -31,8 +31,11 @@ export function fileGlyph(type) {
     return TYPE_ICON[type] || TYPE_ICON.other;
 }
 
+// The canonical kit byte formatter (chat.js re-exports it as fmtBytes). One
+// format everywhere: '0 B' for zero; the em-dash means unknown/null ONLY.
 export function fmtFileSize(bytes) {
-    if (bytes == null || bytes === 0) return '—';
+    if (bytes == null) return '—';
+    if (bytes === 0) return '0 B';
     const u = ['B', 'KB', 'MB', 'GB', 'TB'];
     let i = 0, n = bytes;
     while (n >= 1024 && i < u.length - 1) { n /= 1024; i++; }
@@ -43,7 +46,12 @@ 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, permissions, locked } = {}) {
+// Default action set for FileRow. A host without mutation endpoints passes a
+// narrower `actions` list (e.g. ['download']) so the row renders no dead controls.
+const FILE_ROW_ACTIONS = ['download', 'rename', 'delete'];
+
+export function FileRow({ name, type = 'other', size, modified, code, onOpen, onAction, active, key, permissions, locked,
+                          actions = FILE_ROW_ACTIONS, busy = false } = {}) {
     // 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
@@ -54,7 +62,29 @@ export function FileRow({ name, type = 'other', size, modified, code, onOpen, on
     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;
+    const canOpen = onOpen && !noAccess && !busy;
+    // Mutation actions on a read-only/no-access row render disabled (with a
+    // 'read-only' title) instead of vanishing, so the affordance reads honestly.
+    // `busy` (in-flight mutation) disables every control on the row.
+    const mutateDisabled = busy || readOnly || noAccess;
+    const actBtn = (act, title, ariaLabel, icon, warn) => h('button', {
+        key: 'act-' + act,
+        type: 'button',
+        class: 'ds-file-act' + (warn ? ' ds-file-act-warn' : ''),
+        title: mutateDisabled && act !== 'download' ? 'read-only' : title,
+        'aria-label': ariaLabel,
+        disabled: (act === 'download' ? busy : mutateDisabled) ? true : null,
+        'aria-disabled': (act === 'download' ? busy : mutateDisabled) ? 'true' : null,
+        onclick: () => onAction(act),
+    }, Icon(icon));
+    const actionBtns = onAction ? [
+        actions.indexOf('download') !== -1 && type !== 'dir'
+            ? actBtn('download', 'download', `download ${name}`, 'arrow-down', false) : null,
+        actions.indexOf('rename') !== -1
+            ? actBtn('rename', 'rename', `rename ${name}`, 'pencil', false) : null,
+        actions.indexOf('delete') !== -1
+            ? actBtn('delete', 'delete', `delete ${name}`, 'x', true) : null,
+    ].filter(Boolean) : [];
     // 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 +
@@ -63,6 +93,7 @@ export function FileRow({ name, type = 'other', size, modified, code, onOpen, on
         key,
         class: 'ds-file-row row' + (active ? ' active' : '') + (noAccess ? ' is-locked' : ''),
         'data-file-type': type,
+        'aria-busy': busy ? 'true' : null,
     },
         h('button', {
             type: 'button',
@@ -77,10 +108,8 @@ export function FileRow({ name, type = 'other', size, modified, code, onOpen, on
             h('span', { class: 'title' }, name),
             h('span', { class: 'ds-file-meta meta', 'aria-label': meta ? `metadata: ${meta}` : null }, meta || '—')
         ),
-        onAction ? h('span', { class: 'ds-file-actions', role: 'group', 'aria-label': `actions for ${name}` },
-            h('button', { class: 'ds-file-act', title: 'download', 'aria-label': `download ${name}`, onclick: () => onAction('download') }, Icon('arrow-down')),
-            h('button', { class: 'ds-file-act', title: 'rename', 'aria-label': `rename ${name}`, onclick: () => onAction('rename') }, Icon('pencil')),
-            h('button', { class: 'ds-file-act ds-file-act-warn', title: 'delete', 'aria-label': `delete ${name}`, onclick: () => onAction('delete') }, Icon('x'))
+        actionBtns.length ? h('span', { class: 'ds-file-actions', role: 'group', 'aria-label': `actions for ${name}` },
+            ...actionBtns
         ) : null
     );
 }
@@ -133,7 +162,7 @@ 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 } = {}) {
+                          shown, onShowMore, actions, busy } = {}) {
     if (loading) return FileSkeleton({});
     if (!files.length) return EmptyState({ text: emptyText });
     // Cap the rendered rows. `shown` (host-controlled) overrides the default cap
@@ -179,6 +208,8 @@ export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'No f
             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,
+            actions: actions != null ? actions : undefined,
+            busy: busy != null ? !!busy : !!f.busy,
             onOpen: onOpen ? () => onOpen(f) : null,
             onAction: onAction ? (act) => onAction(act, f) : null
         }))
@@ -250,11 +281,27 @@ export function DropZone({ children, dragover, onDrop, onDragOver, onDragLeave,
     );
 }
 
-export function UploadProgress({ items = [] } = {}) {
+// UploadProgress — per-file upload rows. Error rows are recoverable, not dead
+// ends: each item may carry `actions` ([{ label, onClick }], e.g. 'replace' on
+// a 409 collision) and the host may wire `onDismiss(item, index)` so error rows
+// can be cleared without waiting for the next successful batch.
+export function UploadProgress({ items = [], onDismiss } = {}) {
     if (!items.length) return null;
     return h('div', { class: 'ds-upload-progress' },
         ...items.map((it, i) => {
             const status = it.error ? 'error' : (it.done ? 'complete' : `uploading ${it.pct || 0}%`);
+            const rowActions = [
+                ...((it.actions || []).map((a, ai) => h('button', {
+                    key: 'ua' + ai, type: 'button', class: 'ds-upload-act',
+                    'aria-label': `${a.label} ${it.name}`,
+                    onclick: () => a.onClick && a.onClick(it, i),
+                }, a.label))),
+                (it.error && onDismiss) ? h('button', {
+                    key: 'ud', type: 'button', class: 'ds-upload-act',
+                    'aria-label': `dismiss ${it.name}`,
+                    onclick: () => onDismiss(it, i),
+                }, 'dismiss') : null,
+            ].filter(Boolean);
             return h('div', {
                 key: it.name + i,
                 class: 'ds-upload-item' + (it.done ? ' done' : '') + (it.error ? ' error' : ''),
@@ -269,7 +316,8 @@ export function UploadProgress({ items = [] } = {}) {
                 h('span', { class: 'ds-upload-bar' },
                     h('span', { class: 'ds-upload-fill', 'data-pct': String(Math.max(0, Math.min(100, it.pct || 0))), 'aria-hidden': 'true' })
                 ),
-                h('span', { class: 'ds-upload-pct', 'aria-hidden': 'true' }, (it.error ? 'err' : (it.done ? 'ok' : (it.pct || 0) + '%')))
+                h('span', { class: 'ds-upload-pct', 'aria-hidden': 'true' }, (it.error ? 'err' : (it.done ? 'ok' : (it.pct || 0) + '%'))),
+                rowActions.length ? h('span', { class: 'ds-upload-actions', role: 'group', 'aria-label': `actions for ${it.name}` }, ...rowActions) : null
             );
         })
     );

package/src/components/sessions.js

@@ -8,6 +8,19 @@ import { Btn, Icon } from './shell.js';
 import { Select, SearchInput } from './content.js';
 const h = webjsx.createElement;
 
+// ONE duration format for every surface (live cards, running panel, session
+// meta, context pane): <60s -> 'Ns', <1h -> 'Nm Ss', else 'Nh Nm'. Durations
+// roll s -> m -> h instead of an hour-long run reading '3712s'.
+export function fmtDuration(ms) {
+  if (ms == null || !isFinite(ms) || ms < 0) return '';
+  const s = Math.round(ms / 1000);
+  if (s < 60) return s + 's';
+  const m = Math.floor(s / 60);
+  if (m < 60) return m + 'm ' + (s % 60) + 's';
+  const hrs = Math.floor(m / 60);
+  return hrs + 'h ' + (m % 60) + 'm';
+}
+
 // ConversationList — the Claude-Desktop "Chats" column. Sessions grouped by a
 // caller-supplied group label, each row showing title/project, relative time,
 // agent badge, and a running/new-event indicator. Selecting a row switches the
@@ -21,7 +34,8 @@ const h = webjsx.createElement;
 //   emptyText, loading, error  : explicit states
 export function ConversationList({ sessions = [], selected, groups, search, caption,
                                    onSelect, onNew, newLabel = 'New chat',
-                                   emptyText = 'No conversations yet', loading = false, error = null } = {}) {
+                                   emptyText = 'No conversations yet', loading = false, error = null,
+                                   loadingText = 'Loading conversations…' } = {}) {
   const rowFor = (s, i) => h('button', {
     // Stable key: prefer sid, else position - a missing/duplicate sid would make
     // key undefined and crash webjsx applyDiff ("reading 'key'" of undefined).
@@ -35,8 +49,10 @@ export function ConversationList({ sessions = [], selected, groups, search, capt
     // applyDiff crashes "reading 'key'"). Keep these unkeyed and filter nulls so
     // each h() call gets a clean, consistent child list.
     h('span', { class: 'ds-session-main' }, [
-      h('span', { class: 'ds-session-title' }, s.title || s.project || s.sid || ''),
-      (s.project || s.time) ? h('span', { class: 'ds-session-sub' },
+      // Two-sided truncation: the CSS ellipsis is paired with a title= carrying
+      // the full string, so a long title/project is recoverable on hover.
+      h('span', { class: 'ds-session-title', title: s.title || s.project || s.sid || null }, s.title || s.project || s.sid || ''),
+      (s.project || s.time) ? h('span', { class: 'ds-session-sub', title: s.project || null },
         [s.project, s.time].filter(Boolean).join(' · ')) : null,
     ].filter(Boolean)),
     h('span', { class: 'ds-session-meta' }, [
@@ -53,7 +69,7 @@ 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' }, 'Loading conversations…')];
+    inner = [h('div', { key: 'st', class: 'ds-session-state', role: 'status', 'aria-live': 'polite' }, loadingText)];
   } else if (error) {
     inner = [h('div', { key: 'st', class: 'ds-session-state ds-session-state-error', role: 'status' }, String(error))];
   } else if (!sessions.length) {
@@ -85,6 +101,30 @@ export function ConversationList({ sessions = [], selected, groups, search, capt
     body);
 }
 
+// SessionMeta — a middot-separated metadata strip for a session detail surface.
+//   items : [{ label, value, title, onCopy }]
+// Each item is a span (label dimmed, value mono) with an optional per-item copy
+// button; the strip flex-wraps at narrow widths. Class is .ds-session-meta-strip
+// (the bare .ds-session-meta is already taken by ConversationList row meta).
+export function SessionMeta({ items = [] } = {}) {
+  if (!items.length) return null;
+  return h('div', { class: 'ds-session-meta-strip', role: 'group', 'aria-label': 'session metadata' },
+    ...items.map((it, i) => h('span', {
+      key: 'sm-' + (it.label != null ? it.label : i),
+      class: 'ds-session-meta-item',
+      title: it.title || null,
+    },
+      [
+        it.label != null ? h('span', { key: 'l', class: 'ds-session-meta-label' }, it.label) : null,
+        h('span', { key: 'v', class: 'ds-session-meta-value' }, it.value != null ? String(it.value) : ''),
+        it.onCopy ? h('button', {
+          key: 'c', type: 'button', class: 'ds-session-meta-copy',
+          'aria-label': 'copy ' + (it.title || it.label || 'value'),
+          onclick: () => it.onCopy(it.value),
+        }, 'copy') : null,
+      ].filter(Boolean))));
+}
+
 // SessionCard — one running session in the live dashboard. Status dot, agent /
 // model / cwd, elapsed, live counter, last activity, and per-session controls
 // that each act on this session's id independently.
@@ -100,36 +140,50 @@ export function ConversationList({ sessions = [], selected, groups, search, capt
 // 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' };
+// `session.stopping` is the in-flight cancel state: the stop button disables
+// with label 'stopping…' and the status word flips to 'stopping', so the click
+// visibly took and cannot re-fire while the host waits for the active poll.
+// `session.external` marks a session we observe (ccsniff stream) but do not own
+// (no process to kill): the stop button is suppressed, an 'external' tag renders
+// in the head, and the host wires onView to open it in history instead.
+// `session.title` is the SAME string the conversation rails use, rendered as
+// the card heading so the rail row and its dashboard card share one identity.
+// `session.elapsedMs` (raw ms) is formatted internally via fmtDuration; the
+// pre-formatted `elapsed` string remains as a legacy fallback.
+const STATUS_WORD = { error: 'error', stale: 'idle', running: 'running', stopping: 'stopping' };
+const STATUS_DISC = { error: 'status-dot-error', stale: 'status-dot-stale', running: 'status-dot-live', stopping: 'status-dot-connecting' };
 
 export function SessionCard({ session = {}, onStop, onOpen, onView, active = false,
                              selectable = false, selected = false, onToggleSelect } = {}) {
   const s = session;
-  const st = s.status === 'error' ? 'error' : (s.status === 'stale' ? 'stale' : 'running');
+  const st = s.stopping ? 'stopping' : (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).
-  const statBits = [s.elapsed != null ? s.elapsed : null, s.counter != null ? s.counter : null].filter((x) => x != null && x !== '');
+  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 !== '');
   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' : '');
-  return h('div', { class: cls, role: 'group', 'aria-label': 'session ' + (s.agent || s.sid), 'aria-current': active ? 'true' : null },
+  const cls = 'ds-dash-card is-' + st + (active ? ' is-active' : '') + (selected ? ' is-selected' : '') + (s.external ? ' is-external' : '');
+  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.agent || s.sid),
+        '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]),
-      h('span', { class: 'ds-dash-agent' }, s.agent || 'agent'),
-      s.model ? h('span', { class: 'ds-dash-model' }, s.model) : null),
+      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,
@@ -138,8 +192,10 @@ export function SessionCard({ session = {}, onStop, onOpen, onView, active = fal
       // 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: 'events' }) : null,
-      onStop ? Btn({ key: 'stop', danger: true, onClick: () => onStop(s), children: 'stop' }) : 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));
 }
 
 // SessionDashboard — grid of SessionCards for ALL live sessions, managed at once.
@@ -152,9 +208,23 @@ export function SessionCard({ session = {}, onStop, onOpen, onView, active = fal
 // card's stop. Rendered only when there are sessions AND onStopAll is wired.
 // 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…' };
+// One connection vocabulary across the crumb, settings chip, and the dashboard
+// stream line: connected / connecting / offline ('lost' kept as a legacy alias).
+const STREAM_WORD = {
+  connected: 'listening for activity',
+  connecting: 'connecting to live stream…',
+  offline: 'live stream offline — retrying…',
+  lost: 'live stream offline — retrying…',
+};
 
+// The stop-all / stop-selected danger buttons are two-step (host-driven, the kit
+// is stateless): the first click fires onArmStop* so the host flips confirming*
+// true and re-renders; the armed button reads 'stop N sessions - press again'
+// and only THAT click fires the real onStopAll/onStopSelected. Hosts that wire
+// no onArmStop* keep the old single-click behavior.
 export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStopAll, onStopSelected,
+                                   confirmingStopAll = false, confirmingStopSelected = false,
+                                   onArmStopAll, onArmStopSelected,
                                    sort, filter, errorsOnly = false, onErrorsOnly,
                                    selectable = false, selected, onToggleSelect,
                                    activeSid, streamState,
@@ -164,6 +234,9 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
   }
   const selSet = selected instanceof Set ? selected : new Set(selected || []);
   const selCount = selSet.size;
+  // While any session is mid-cancel the bulk control reads disabled
+  // 'stopping N…' so a bulk stop visibly takes instead of staying re-firable.
+  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.
   const streamLine = streamState
@@ -193,9 +266,19 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
       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),
+    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]),
+                  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),
+                      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' },

package/src/components.js

@@ -16,19 +16,19 @@ export {
     WorksList, WritingList, Manifesto, Section, PageHeader,
     Kpi, Table, SearchInput, TextField, Select, EventList,
     HomeView, ProjectView, Form,
-    Spinner, Skeleton, Alert
+    Spinner, Skeleton, Alert, FilterPills
 } from './components/content.js';
 
 export {
-    fmtBytes, renderInline,
+    fmtBytes, renderInline, hasSelectionInside,
     ChatMessage, ChatComposer, Chat,
     AICAT_FACE, AICatPortrait, AICat
 } from './components/chat.js';
 
-export { AgentChat } from './components/agent-chat.js';
+export { AgentChat, MESSAGE_CAP } from './components/agent-chat.js';
 
 export {
-    ConversationList, SessionCard, SessionDashboard
+    ConversationList, SessionCard, SessionDashboard, SessionMeta, fmtDuration
 } from './components/sessions.js';
 
 export { ContextPane } from './components/context-pane.js';