anentrypoint-design 0.0.199 → 0.0.201

package/src/components/files.js

@@ -43,36 +43,70 @@ 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(' · ');
+// 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
+    // 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 && !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 +
     // 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,
+        'aria-busy': busy ? 'true' : null,
     },
         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 }),
             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
     );
 }
@@ -117,10 +151,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, actions, busy } = {}) {
     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 +197,32 @@ 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,
+            actions: actions != null ? actions : undefined,
+            busy: busy != null ? !!busy : !!f.busy,
             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 +247,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/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,9 +19,10 @@ 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 } = {}) {
+                                   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).
@@ -52,7 +54,7 @@ export function ConversationList({ sessions = [], selected, groups, search,
   // 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) {
@@ -77,9 +79,37 @@ 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);
 }
 
+// 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.
@@ -90,9 +120,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 +140,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 +160,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 +175,71 @@ 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…' };
+
+// 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,
                                    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
+      ? (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' },
-      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);
 }

package/src/components/shell.js

@@ -140,7 +140,11 @@ const ICON_PATHS = {
     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"/>',
     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"/>'
+    'corner-up-left': '<path d="M9 14 4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 5 5v6"/>',
+    // clipboard/copy — for the per-block code copy + message copy action, so the
+    // copy affordance reads as copy, not the lined-document `page` glyph.
+    copy: '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h8"/>',
+    clipboard: '<rect x="8" y="4" width="8" height="4" rx="1"/><path d="M8 6H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-2"/>'
 };
 // Raw-DOM consumers (no webjsx render in scope) need the SVG as a markup string
 // rather than an h() vnode. Same path table, same viewBox/stroke contract as
@@ -355,15 +359,21 @@ function wsCollapsed(which, fallback) {
 export function WorkspaceShell({ rail, sessions, main, pane, crumb, status, narrow,
                                  railCollapsed = false, paneCollapsed = false,
                                  railLabel = 'workspace navigation',
-                                 paneLabel = 'context' } = {}) {
+                                 paneLabel = 'context', stableFrame = false } = {}) {
     const hasSessions = Boolean(sessions);
     const hasPane = Boolean(pane);
+    // Stable frame: keep the pane grid TRACK present even when this tab has no
+    // pane, so the shell does not re-flow its column count (4/3/2) on every tab
+    // switch - the loudest "separate pages" tell. The track collapses to width 0
+    // (ws-pane-collapsed) instead of being removed (ws-no-pane), so chat/history/
+    // files/live/settings all keep the same column geometry.
+    const keepPaneTrack = stableFrame && !hasPane;
     const railIsCollapsed = wsCollapsed('rail', railCollapsed);
     const paneIsCollapsed = hasPane ? wsCollapsed('pane', paneCollapsed) : true;
     const shellCls = 'ws-shell'
         + (railIsCollapsed ? ' ws-rail-collapsed' : '')
-        + (hasPane ? '' : ' ws-no-pane')
-        + (hasPane && paneIsCollapsed ? ' ws-pane-collapsed' : '')
+        + ((hasPane || keepPaneTrack) ? '' : ' ws-no-pane')
+        + (((hasPane && paneIsCollapsed) || keepPaneTrack) ? ' ws-pane-collapsed' : '')
         + (hasSessions ? '' : ' ws-no-sessions')
         + (narrow ? ' narrow' : '');
     return h('div', { class: shellCls },

package/src/components.js

@@ -16,7 +16,7 @@ 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 {
@@ -28,20 +28,20 @@ export {
 export { AgentChat } from './components/agent-chat.js';
 
 export {
-    ConversationList, SessionCard, SessionDashboard
+    ConversationList, SessionCard, SessionDashboard, SessionMeta
 } from './components/sessions.js';
 
 export { ContextPane } from './components/context-pane.js';
 
 export {
     fileGlyph, fmtFileSize,
-    FileIcon, FileRow, FileGrid, FileSkeleton, sortFiles, FileToolbar,
+    FileIcon, FileRow, FileGrid, FileSkeleton, sortFiles, FileToolbar, RootsPicker,
     DropZone, UploadProgress, EmptyState, BreadcrumbPath
 } from './components/files.js';
 
 export {
     ConfirmDialog, PromptDialog,
-    FilePreviewMedia, FilePreviewCode, FilePreviewText, FileViewer
+    FilePreviewMedia, FilePreviewCode, FilePreviewText, FileViewer, FilePreviewPane
 } from './components/files-modals.js';
 
 export {