anentrypoint-design 0.0.385 → 0.0.387

package/src/components/sessions.js

@@ -2,584 +2,21 @@
 // live multi-session dashboard. Pure factories: props in, webjsx vnode out, all
 // interaction via host callbacks. Styling lives in chat.css (.ds-session*,
 // .ds-dash*) using kit tokens; no transport, no decorative glyphs.
-
-import * as webjsx from '../../vendor/webjsx/index.js';
-import { Btn, Icon } from './shell.js';
-import { Select, SearchInput } from './content.js';
-import { formatDateTime, formatNumber } from '../locale.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'.
-// ONE absolute-time / relative-time formatter for every surface that shows a
-// timestamp (freddie pages, chat transcripts). fmtTime -> localized
-// date+time string; fmtAgo -> coarse relative ('Ns/Nm/Nh/Nd ago').
-export function fmtTime(t) {
-  try { return formatDateTime(t); } catch { return String(t || ''); }
-}
-export function fmtAgo(t) {
-  if (!t) return '';
-  const s = Math.floor((Date.now() - new Date(t).getTime()) / 1000);
-  if (s < 60) return s + 's ago';
-  if (s < 3600) return Math.floor(s / 60) + 'm ago';
-  if (s < 86400) return Math.floor(s / 3600) + 'h ago';
-  return Math.floor(s / 86400) + 'd ago';
-}
-
-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';
-}
-
-/**
- * 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 active
- * conversation.
- *
- * @param {Object} [props]
- * @param {Array<{sid:*, title?:string, project?:string, agent?:string, time?:string, running?:boolean, unread?:boolean, rail?:string, parentSid?:*}>} [props.sessions=[]]
- * @param {*} [props.selected] - the active sid.
- * @param {Array<{label:string, sids:Array<*>}>} [props.groups] - OPTIONAL buckets for the rows; else one flat list.
- * @param {{value:string, onInput:Function, placeholder?:string}} [props.search] - inline filter (optional).
- * @param {Function} [props.onSelect] - onSelect(session).
- * @param {Function} [props.onNew] - onNew().
- * @param {string} [props.emptyText='No conversations yet']
- * @param {boolean} [props.loading=false]
- * @param {*} [props.error=null]
- * @param {boolean} [props.tree=false] - OPTIONAL: nest rows whose `parentSid` matches
- *   another row's `sid` under that row (fork/branch tree), with an indent guide,
- *   a branch glyph, and a per-node collapse toggle. Ignored when `groups` is set
- *   (grouping and tree-nesting are mutually exclusive row layouts). `expanded`/
- *   `onToggleExpand` are host-driven (kit stays stateless): a `sid` NOT present
- *   in the `expanded` Set renders collapsed once it has children.
- * @param {Set<*>|Array<*>} [props.expanded] - sids whose children are shown, when `tree`.
- * @param {Function} [props.onToggleExpand] - onToggleExpand(sid), when `tree`.
- * @param {Function} [props.onRename] - onRename(session, newTitle). Presence enables the
- *   hover-revealed rename action (row becomes an inline text input while active).
- * @param {*} [props.renaming] - sid of the row currently in rename-edit mode (host-driven).
- * @param {Function} [props.onStartRename] - onStartRename(session) - fired by the rename
- *   button click, before `onRename` commits; host flips `renaming` to this sid.
- * @param {Function} [props.onCancelRename] - onCancelRename() - Escape / blur-without-change.
- * @param {Function} [props.onDelete] - onDelete(session). Presence enables the hover-revealed
- *   delete action; clicking it arms an inline two-button confirm row (same height, no modal),
- *   mirroring SessionDashboard's arm-then-confirm stop control.
- * @param {*} [props.confirmingDelete] - sid currently showing the armed delete-confirm state.
- * @param {Function} [props.onArmDelete] - onArmDelete(session) - first delete click.
- * @param {Function} [props.onCancelDelete] - onCancelDelete() - confirm-row Cancel click.
- * @returns {*} webjsx vnode
- */
-export function ConversationList({ sessions = [], selected, groups, search, caption,
-                                   onSelect, onNew, newLabel = 'New chat',
-                                   emptyText = 'No conversations yet', loading = false, error = null,
-                                   loadingText = 'Loading conversations…',
-                                   // hasMore/onLoadMore: the rail's host truncates the underlying
-                                   // session list at some limit (a 200+ conversation user would
-                                   // otherwise never reach older sessions) - mirrors the History
-                                   // tab's existing "load N older" EventList pattern.
-                                   hasMore = false, onLoadMore, loadMoreLabel = 'load more conversations',
-                                   // resultCount: forwarded straight through to the inner SearchInput's
-                                   // aria-live region, so a real "N results" string (computed by the
-                                   // host from its filtered session list) reaches AT users instead of
-                                   // the region sitting permanently empty.
-                                   resultCount,
-                                   // Fork/branch tree nesting (parentSid-driven), inline rename,
-                                   // inline delete — all host-driven, kit stays stateless.
-                                   tree = false, expanded, onToggleExpand,
-                                   onRename, renaming, onStartRename, onCancelRename,
-                                   onDelete, confirmingDelete, onArmDelete, onCancelDelete } = {}) {
-  const expSet = expanded instanceof Set ? expanded : new Set(expanded || []);
-  // childrenBySid: only consulted when `tree` is on - a flat caller pays nothing.
-  const childrenBySid = new Map();
-  if (tree) {
-    for (const s of sessions) {
-      if (s.parentSid == null) continue;
-      if (!childrenBySid.has(s.parentSid)) childrenBySid.set(s.parentSid, []);
-      childrenBySid.get(s.parentSid).push(s);
-    }
-  }
-  const isRenaming = (s) => renaming != null && s.sid === renaming;
-  const isConfirmingDelete = (s) => confirmingDelete != null && s.sid === confirmingDelete;
-
-  const rowFor = (s, i, depth = 0) => {
-    const hasKids = tree && childrenBySid.has(s.sid) && childrenBySid.get(s.sid).length > 0;
-    const kidsOpen = hasKids && expSet.has(s.sid);
-    const renamingThis = onRename && isRenaming(s);
-    const confirmingThis = onDelete && isConfirmingDelete(s);
-    let content;
-    if (confirmingThis) {
-      // Inline confirm: same row height, no modal - mirrors SessionDashboard's
-      // arm-then-confirm bulk-stop control so delete has one consistent shape
-      // across the kit.
-      content = [
-        h('span', { key: 'cd-msg', class: 'ds-session-confirm-msg' }, 'Delete "' + (s.title || s.project || s.sid || '') + '"?'),
-        h('span', { key: 'cd-acts', class: 'ds-session-confirm-actions' }, [
-          h('button', { key: 'cd-yes', type: 'button', class: 'ds-session-confirm-delete',
-            onclick: (e) => { e.stopPropagation(); onDelete(s); } }, 'delete'),
-          h('button', { key: 'cd-no', type: 'button', class: 'ds-session-confirm-cancel',
-            onclick: (e) => { e.stopPropagation(); onCancelDelete && onCancelDelete(); } }, 'cancel'),
-        ]),
-      ];
-    } else if (renamingThis) {
-      content = [
-        h('input', {
-          key: 'rn-input', class: 'ds-session-rename-input', type: 'text',
-          value: s.title || '', autofocus: true,
-          onclick: (e) => e.stopPropagation(),
-          onkeydown: (e) => {
-            if (e.key === 'Enter') { e.preventDefault(); onRename(s, e.target.value); }
-            if (e.key === 'Escape') { e.preventDefault(); onCancelRename && onCancelRename(); }
-          },
-          onblur: (e) => onRename(s, e.target.value),
-        }),
-      ];
-    } else {
-      content = [
-        hasKids ? h('button', {
-          key: 'tog', type: 'button', class: 'ds-session-tree-toggle' + (kidsOpen ? ' open' : ''),
-          'aria-label': (kidsOpen ? 'collapse' : 'expand') + ' forks', 'aria-expanded': kidsOpen ? 'true' : 'false',
-          onclick: (e) => { e.stopPropagation(); onToggleExpand && onToggleExpand(s.sid); },
-        }, Icon('chevron-right', { size: 10 })) : null,
-        depth > 0 ? h('span', { key: 'fork', class: 'ds-session-fork-icon', 'aria-hidden': 'true' }, Icon('corner-up-left', { size: 10 })) : null,
-        h('span', { key: 'main', class: 'ds-session-main' }, [
-          // 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', { key: 'meta', class: 'ds-session-meta' }, [
-          s.agent ? h('span', { class: 'ds-session-agent' }, s.agent) : null,
-          // Optional richer status ('error'|'stale'|'running'|'stopping') mirrors the
-          // SessionCard STATUS_DISC mapping used on the Live dashboard, so a session
-          // pinned to a "Running" rail group reads the same stuck-vs-busy signal it
-          // does there rather than only a boolean live dot. Falls back to the plain
-          // running dot when no status is supplied (existing callers unaffected).
-          s.status
-            ? h('span', { class: 'status-dot-disc ' + (STATUS_DISC[s.status] || 'status-dot-live'), 'aria-label': STATUS_WORD[s.status] || s.status, role: 'img' })
-            : s.running
-            ? h('span', { class: 'status-dot-disc status-dot-live', 'aria-label': 'running', role: 'img' })
-            : (s.unread ? h('span', { class: 'ds-session-unread', 'aria-label': 'new activity', role: 'img' }) : null),
-        ].filter(Boolean)),
-        (onRename || onDelete) ? h('span', { key: 'row-actions', class: 'ds-session-row-actions' }, [
-          onRename ? h('button', { key: 'ra-rn', type: 'button', class: 'ds-session-row-action', 'aria-label': 'rename',
-            onclick: (e) => { e.stopPropagation(); onStartRename ? onStartRename(s) : onRename(s, s.title); } }, Icon('pencil', { size: 12 })) : null,
-          onDelete ? h('button', { key: 'ra-del', type: 'button', class: 'ds-session-row-action ds-session-row-action-danger', 'aria-label': 'delete',
-            onclick: (e) => { e.stopPropagation(); onArmDelete ? onArmDelete(s) : onDelete(s); } }, Icon('trash', { size: 12 })) : null,
-        ].filter(Boolean)) : null,
-      ].filter(Boolean);
-    }
-    const row = h('div', {
-      // Stable key: prefer sid, else position - a missing/duplicate sid would make
-      // key undefined and crash webjsx applyDiff ("reading 'key'" of undefined).
-      key: 'cs-' + (s.sid != null ? s.sid : 'i' + i),
-      role: 'option',
-      tabindex: s.sid === selected ? '0' : '-1',
-      class: 'ds-session-row' + (s.sid === selected ? ' active' : '') + (s.rail ? ' rail-' + s.rail : '') +
-        (depth > 0 ? ' ds-session-row-nested' : ''),
-      style: depth > 0 ? ('padding-left: calc(var(--space-2) + ' + (depth * 16) + 'px)') : null,
-      'aria-selected': s.sid === selected ? 'true' : 'false',
-      onclick: (renamingThis || confirmingThis) ? null : () => onSelect && onSelect(s),
-      onkeydown: (renamingThis || confirmingThis) ? null : (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelect && onSelect(s); } },
-    }, ...content);
-    if (!hasKids || !kidsOpen) return [row];
-    // Depth-first flatten of open children keeps the caller-facing return shape
-    // (an array of rows) identical whether tree nesting is on or off.
-    const kidRows = childrenBySid.get(s.sid)
-      .slice().sort((a, b) => (b.time || '').localeCompare(a.time || ''))
-      .flatMap((k, ki) => rowFor(k, ki, depth + 1));
-    return [row, ...kidRows];
-  };
-
-  // The body is ALWAYS a single keyed wrapper element of the same tag, so webjsx
-  // diffs its children across state transitions (loading -> empty -> populated)
-  // instead of swapping the container type - the swap is what triggered the
-  // applyDiff "reading 'key'" crash on the first populated mount. Row children
-  // are uniformly keyed; non-row states render a single unkeyed status line.
-  let inner;
-  if (loading && !sessions.length) {
-    // Shape-matched skeleton rows during the cold ccsniff index walk (the rail
-    // showed a bare line before) - Claude-Desktop skeletons its sidebar on load.
-    inner = [
-      h('div', { key: 'st', class: 'ds-session-state', role: 'status', 'aria-live': 'polite' }, loadingText),
-      ...Array.from({ length: 5 }, (_, i) => h('div', { key: 'sk' + i, class: 'ds-session-row-skeleton', 'aria-hidden': 'true' },
-        h('div', { class: 'ds-skel ds-skel-title' }), h('div', { class: 'ds-skel ds-skel-meta' }))),
-    ];
-  } else if (error) {
-    inner = [h('div', { key: 'st', class: 'ds-session-state ds-session-state-error', role: 'status' }, String(error))];
-  } else if (!sessions.length) {
-    inner = [h('div', { key: 'st', class: 'ds-session-state', role: 'status' }, emptyText)];
-  } else if (groups && groups.length) {
-    const bySid = new Map(sessions.map((s) => [s.sid, s]));
-    inner = groups.map((g) => h('div', { key: 'g-' + g.label, class: 'ds-session-group', role: 'group', 'aria-label': g.label },
-      h('div', { key: 'gl', class: 'ds-session-group-label' }, g.label),
-      h('div', { key: 'gr', class: 'ds-session-group-rows', role: 'listbox', 'aria-label': g.label }, ...g.sids.map((sid) => bySid.get(sid)).filter(Boolean).flatMap((s, i) => rowFor(s, i)))));
-  } else if (tree) {
-    // Roots = rows with no parentSid, or whose parentSid isn't present in this
-    // list (an orphaned fork - the ancestor was deleted/filtered out) - each
-    // root's flatMap already walks its open descendants via rowFor's recursion.
-    const sidSet = new Set(sessions.map((s) => s.sid));
-    const roots = sessions.filter((s) => s.parentSid == null || !sidSet.has(s.parentSid));
-    inner = roots.flatMap((s, i) => rowFor(s, i, 0));
-  } else {
-    inner = sessions.flatMap((s, i) => rowFor(s, i));
-  }
-  // The load-more row sits INSIDE the scrollable list body (not the outer
-  // .ds-sessions shell) so it scrolls with the rows it extends, matching
-  // where a user's eye already is after scrolling to the bottom of the rail.
-  const loadMoreRow = (hasMore && onLoadMore && sessions.length)
-    ? h('button', { key: 'loadmore', type: 'button', class: 'ds-session-loadmore', onclick: onLoadMore }, loadMoreLabel)
-    : null;
-  const body = h('div', { key: 'body', class: 'ds-session-list', role: 'listbox', 'aria-label': caption || 'Conversations' },
-    ...inner, loadMoreRow);
-
-  return h('div', { class: 'ds-sessions' },
-    h('div', { key: 'head', class: 'ds-session-head' },
-      onNew ? h('button', { key: 'new', type: 'button', class: 'ds-session-new', onclick: onNew, 'aria-label': newLabel },
-        Icon('pencil'), h('span', { key: 'l' }, newLabel)) : null,
-      search ? SearchInput({
-        key: 'search', value: search.value || '',
-        label: search.placeholder || 'Search conversations',
-        placeholder: search.placeholder || 'Search conversations',
-        onInput: (v) => search.onInput && search.onInput(v),
-        resultCount,
-      }) : 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,
-        // Generic secondary action (e.g. a directory row's "use as chat cwd")
-        // - kept distinct from onCopy since a fact can want a non-copy action,
-        // or (rare) both.
-        it.onAction ? h('button', {
-          key: 'a', type: 'button', class: 'ds-session-meta-action',
-          onclick: () => it.onAction(it.value),
-        }, it.actionLabel || 'use') : null,
-      ].filter(Boolean))));
-}
-
-// AgentListSkeleton — placeholder shimmer rows shown while the agent picker's
-// list is loading, so it doesn't flash from a bare spinner to a full list
-// (same predictable-perceived-perf pattern as FileSkeleton). `rows` controls
-// how many ghost rows render; each mimics a Row's icon+title+meta footprint.
-export function AgentListSkeleton({ rows = 5 } = {}) {
-  return h('div', { class: 'ds-agent-list-skeleton', 'aria-hidden': 'true' },
-    ...Array.from({ length: Math.max(1, rows) }, (_, i) => h('div', { key: 'ags' + i, class: 'ds-agent-row-skeleton' },
-      h('span', { class: 'ds-skel ds-skel-icon' }),
-      h('span', { class: 'ds-skel ds-skel-title' }),
-      h('span', { class: 'ds-skel ds-skel-meta' }))),
-    h('span', { key: 'st', class: 'ds-agent-list-skeleton-status', role: 'status', 'aria-live': 'polite' }, 'loading agents…'));
-}
-
-// 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.
 //
-//   session : { sid, agent, model, cwd, elapsed, counter, lastActivity, currentTool, status }
-//   actions : { onStop, onOpen, onResume, onView } (any subset)
-// `counter` carries the live activity tally (e.g. "12 ev · 3 tools"); `lastActivity`
-// 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).
-// `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).
-// `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.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 elapsedText = s.elapsedMs != null ? fmtDuration(s.elapsedMs) : (s.elapsed != null ? s.elapsed : null);
-  // At-a-glance cost/usage (the prompt's named command-center signal). Null-safe:
-  // sessions with no cost source (external tally rows) simply omit the segment.
-  const tokText = s.tokens != null ? (typeof s.tokens === 'number' ? formatNumber(s.tokens) : s.tokens) + ' tok' : null;
-  const costText = s.cost != null ? (typeof s.cost === 'number' ? '$' + s.cost.toFixed(4) : String(s.cost)) : null;
-  // Cost is rendered as its own emphasized segment (not buried in the mono run)
-  // so the command-center cost-at-a-glance signal is scannable.
-  const statBits = [elapsedText, s.counter != null ? s.counter : null, tokText].filter((x) => x != null && x !== '');
-  const activityBits = [
-    s.currentTool ? 'running: ' + s.currentTool : null,
-    s.lastActivity ? 'last ' + s.lastActivity : null,
-  ].filter(Boolean);
-  const cls = 'ds-dash-card is-' + st + (active ? ' is-active' : '') + (selected ? ' is-selected' : '') + (s.external ? ' is-external' : '') + (s.isNew ? ' is-new' : '');
-  // EVERY children array is filter(Boolean)'d: webjsx applyDiff crashes
-  // (reading 'key') on a bare null among VElement siblings, so a null cwd /
-  // model / external flag must never reach a positional child slot.
-  const head = h('div', { class: 'ds-dash-card-head' }, ...[
-    selectable ? h('button', {
-      type: 'button', class: 'ds-dash-select', role: 'checkbox',
-      'aria-checked': selected ? 'true' : 'false',
-      'aria-label': (selected ? 'deselect' : 'select') + ' session ' + (s.title || s.agent || s.sid),
-      onclick: () => onToggleSelect && onToggleSelect(s),
-    }, h('span', { class: 'ds-check-box', 'aria-hidden': 'true' })) : null,
-    h('span', { class: 'status-dot-disc ' + STATUS_DISC[st], 'aria-hidden': 'true' }),
-    h('span', { class: 'ds-dash-status is-' + st }, STATUS_WORD[st]),
-    s.external ? h('span', { class: 'ds-dash-external' }, 'external') : null,
-    h('span', { class: 'ds-dash-agent', title: s.agent || null }, s.agent || 'agent'),
-    s.model ? h('span', { class: 'ds-dash-model', title: s.model }, s.model) : null,
-  ].filter(Boolean));
-  const meta = h('div', { class: 'ds-dash-meta' }, ...[
-    s.cwd ? h('span', { class: 'ds-dash-cwd', title: s.cwd }, s.cwd) : null,
-    (statBits.length || costText) ? h('span', { class: 'ds-dash-stat' },
-      ...[
-        statBits.length ? statBits.join(' · ') : null,
-        (statBits.length && costText) ? ' · ' : null,
-        costText ? h('span', { class: 'ds-dash-stat-cost' }, costText) : null,
-      ].filter(Boolean)
-    ) : null,
-    activityBits.length ? h('span', { class: 'ds-dash-activity' }, activityBits.join(' · ')) : null,
-  ].filter(Boolean));
-  const actions = h('div', { class: 'ds-dash-actions', role: 'group', 'aria-label': 'session actions' }, ...[
-    onOpen ? Btn({ key: 'open', variant: 'primary', 'aria-label': 'open session', onClick: () => onOpen(s),
-      children: [Icon('external-link', { size: 14 }), h('span', {}, 'open')] }) : null,
-    onView ? Btn({ key: 'view', 'aria-label': s.external ? 'open in history' : 'view events', onClick: () => onView(s),
-      children: [Icon('file-text', { size: 14 }), h('span', {}, s.external ? 'history' : 'events')] }) : null,
-    (onStop && !s.external) ? Btn({ key: 'stop', variant: 'danger', disabled: !!s.stopping, 'aria-label': 'stop session',
-      onClick: () => !s.stopping && onStop(s),
-      children: [Icon('square', { size: 14 }), h('span', {}, s.stopping ? 'stopping…' : 'stop')] }) : null,
-  ].filter(Boolean));
-  return h('div', { class: cls, role: 'group', 'aria-label': 'session ' + (s.title || s.agent || s.sid), 'aria-current': active ? 'true' : null },
-    ...[
-      s.title ? h('div', { class: 'ds-dash-title', title: s.title }, s.title) : null,
-      head, meta, actions,
-    ].filter(Boolean));
-}
-
-// SessionDashboard — grid of SessionCards for ALL live sessions, managed at once.
-//   sessions : [{ sid, agent, model, cwd, elapsed, counter, lastActivity, currentTool, status }]
-//   actions  : { onStop, onOpen, onResume, onView } passed to each card
-//   onStopAll : OPTIONAL bulk control - stop every running session at once
-//   emptyText, offline : explicit states
-// 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.
-// Streamstate words: the live-stream health signal so "connected, zero running"
-// still tells the user the dashboard is listening (vs a dropped stream).
-// 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…',
+// This module is a barrel: every component lives in a single-responsibility
+// submodule under ./sessions/, and the public export surface here is unchanged
+// — no consumer import needs to move.
+
+import { fmtTime, fmtAgo, fmtDuration } from './sessions/format.js';
+import { ConversationList } from './sessions/conversation-list.js';
+import { SessionMeta, AgentListSkeleton } from './sessions/detail-bits.js';
+import { SessionCard } from './sessions/session-card.js';
+import { SessionDashboard } from './sessions/dashboard.js';
+
+export {
+    fmtTime, fmtAgo, fmtDuration,
+    ConversationList,
+    SessionMeta, AgentListSkeleton,
+    SessionCard,
+    SessionDashboard,
 };
-
-/**
- * The live multi-session command center ("Live" dashboard).
- *
- * 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.
- *
- * @param {Object} [props]
- * @param {Array<Object>} [props.sessions=[]] - session shape: `{ sid, realSid, title, agent, model, cwd, elapsedMs, counter, lastActivity, currentTool, status, stopping, external, isNew, cost, tokens }`.
- * @param {Function} [props.onStop] - onStop(session).
- * @param {Function} [props.onOpen] - onOpen(session).
- * @param {Function} [props.onView] - onView(session).
- * @param {Function} [props.onStopAll]
- * @param {Function} [props.onStopSelected]
- * @param {boolean} [props.confirmingStopAll=false]
- * @param {boolean} [props.confirmingStopSelected=false]
- * @param {'connected'|'connecting'|'lost'|'offline'} [props.streamState]
- * @returns {*} webjsx vnode
- */
-export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStopAll, onStopSelected,
-                                   confirmingStopAll = false, confirmingStopSelected = false,
-                                   onArmStopAll, onArmStopSelected,
-                                   sort, filter, errorsOnly = false, onErrorsOnly,
-                                   selectable = false, selected, onToggleSelect, onSelectAll, onClearSelection,
-                                   activeSid, streamState,
-                                   emptyText = 'No live sessions', emptyAction, offline = false } = {}) {
-  if (offline) {
-    return h('div', { class: 'ds-dash-state ds-dash-state-error', role: 'status' }, 'Backend offline — live sessions unavailable');
-  }
-  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.
-  // The stream line leads with a status disc so a connected dashboard visibly
-  // PULSES that it is listening (the command-center heartbeat), connecting/offline
-  // show a static disc. The disc is aria-hidden; the word carries the state.
-  const streamDisc = streamState
-    ? 'status-dot-disc ' + (streamState === 'connected' ? 'status-dot-live'
-        : streamState === 'connecting' ? 'status-dot-connecting' : 'status-dot-error')
-    : null;
-  const streamLine = streamState
-    ? h('span', { key: 'stream', class: 'ds-dash-stream-disc' },
-        h('span', { class: streamDisc, 'aria-hidden': 'true' }),
-        h('span', { class: 'ds-dash-stream is-' + streamState, role: 'status', 'aria-live': 'polite' }, STREAM_WORD[streamState] || streamState))
-    : null;
-  // At-a-glance status breakdown for the command-center header.
-  const counts = sessions.reduce((a, s) => {
-    const k = s.status === 'error' ? 'error' : (s.status === 'stale' ? 'idle' : 'running');
-    a[k] = (a[k] || 0) + 1; return a;
-  }, {});
-  const breakdownSegs = [
-    counts.running ? { k: 'running', t: counts.running + ' running' } : null,
-    counts.idle ? { k: 'idle', t: counts.idle + ' idle' } : null,
-    counts.error ? { k: 'error', t: counts.error + ' error' + (counts.error === 1 ? '' : 's') } : null,
-  ].filter(Boolean);
-  const breakdown = breakdownSegs.length
-    ? h('span', { key: 'bd', class: 'ds-dash-breakdown', role: 'status', 'aria-live': 'polite' },
-        ...breakdownSegs.flatMap((seg, i) => [
-          i ? h('span', { key: 'bsep' + i, class: 'ds-dash-breakdown-sep', 'aria-hidden': 'true' }, ' · ') : null,
-          h('span', { key: 'bseg' + i, class: 'seg is-' + seg.k }, seg.t),
-        ].filter(Boolean)))
-    : null;
-  const toolbar = (sort || filter || onErrorsOnly)
-    ? h('div', { key: 'tb', class: 'ds-dash-toolbar', role: 'group', 'aria-label': 'sort and filter sessions' },
-        filter ? SearchInput({
-          key: 'filt', value: filter.value || '', label: filter.placeholder || 'Filter sessions', placeholder: filter.placeholder || 'Filter sessions',
-          onInput: (v) => filter.onInput && filter.onInput(v),
-          // `sessions` here is already the filtered/errors-only list, so its
-          // length IS the live result count - forward it to SearchInput's
-          // aria-live region whenever a filter is actually active, matching
-          // the same wiring ConversationList/history search already has.
-          resultCount: filter.value ? (sessions.length + ' result' + (sessions.length === 1 ? '' : 's')) : undefined,
-        }) : 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;
-  // NOTE: no separate empty-branch return. The empty state renders as a KEYED
-  // child of the same stable body wrapper the populated states use - swapping
-  // an unkeyed .ds-dash-state for keyed group children used to crash webjsx
-  // applyDiff (reading 'key') the moment the first session appeared, leaving a
-  // half-applied DOM ('1 running' header over 'No live sessions' body).
-  // Tri-state select-all over the selectable (non-external) sessions.
-  const selectableSids = sessions.filter((s) => !s.external).map((s) => s.sid);
-  const selOfVisible = selectableSids.filter((sid) => selSet.has(sid)).length;
-  const allState = selOfVisible === 0 ? 'false' : (selOfVisible === selectableSids.length ? 'true' : 'mixed');
-  const selectAllCtl = (selectable && onSelectAll && selectableSids.length)
-    ? h('button', { key: 'selall', type: 'button', class: 'ds-dash-selectall', role: 'checkbox',
-        'aria-checked': allState, 'aria-label': allState === 'true' ? 'clear selection' : 'select all sessions',
-        onclick: () => (allState === 'true' && onClearSelection) ? onClearSelection() : onSelectAll(selectableSids) },
-        h('span', { class: 'ds-check-box', 'aria-hidden': 'true' }),
-        h('span', {}, 'all'))
-    : null;
-  const clearCtl = (selectable && selCount && onClearSelection)
-    ? h('button', { key: 'selclr', type: 'button', class: 'ds-dash-clear', onclick: () => onClearSelection() }, 'clear')
-    : null;
-  const stopBtn = stoppingCount > 0 && (onStopSelected || onStopAll)
-      ? Btn({ key: 'stopbusy', variant: 'danger', disabled: true, children: 'stopping ' + stoppingCount + '…' })
-      : (selectable && selCount && onStopSelected
-      ? (onArmStopSelected && !confirmingStopSelected
-          ? Btn({ key: 'stopsel', variant: 'danger', onClick: () => onArmStopSelected([...selSet]), children: 'stop selected' })
-          : Btn({ key: 'stopsel', variant: 'danger', class: confirmingStopSelected ? 'is-armed' : null, onClick: () => onStopSelected([...selSet]),
-                  children: confirmingStopSelected ? 'stop ' + selCount + ' sessions - press again' : 'stop selected' }))
-      : (onStopAll
-          ? (onArmStopAll && !confirmingStopAll
-              ? Btn({ key: 'stopall', variant: 'danger', onClick: () => onArmStopAll(sessions), children: 'stop all' })
-              : Btn({ key: 'stopall', variant: 'danger', class: confirmingStopAll ? 'is-armed' : null, onClick: () => onStopAll(sessions),
-                      children: confirmingStopAll ? 'stop ' + sessions.length + ' sessions - press again' : 'stop all' }))
-          : null));
-  // Build header children as a filtered array: webjsx applyDiff crashes
-  // (reading 'key') when a bare null sits among keyed siblings, so never pass
-  // a conditional child positionally - filter it out first.
-  const headerKids = [
-    selectable && selCount
-      ? h('span', { key: 'cnt', class: 'ds-dash-count', role: 'status', 'aria-live': 'polite' }, selCount + ' selected')
-      : (breakdown || h('span', { key: 'cnt', class: 'ds-dash-count', role: 'status', 'aria-live': 'polite' },
-          sessions.length ? sessions.length + ' running' : '0 running')),
-    selectAllCtl, clearCtl, streamLine,
-    h('span', { key: 'spread', class: 'spread' }),
-    // No stop control without a session to stop; the empty dashboard keeps
-    // only the count, heartbeat, and (when wired) filter/sort chrome.
-    sessions.length ? stopBtn : null,
-    toolbar,
-  ].filter(Boolean);
-  const header = h('div', { class: 'ds-dash-header', role: 'group', 'aria-label': 'live session controls' }, ...headerKids);
-  // Status-bucketed command center: when sorting by status (the default), the
-  // grid renders labelled sections (Errored / Running / Idle / External) so a
-  // pile of sessions reads as scannable groups. Other sorts collapse to one
-  // flat grid (the sort already orders them).
-  const grouped = !sort || !sort.value || sort.value === 'status';
-  const cardOf = (s) => h('div', { key: s.sid, role: 'listitem' },
-    SessionCard({ session: s, onStop, onOpen, onView, active: s.sid === activeSid,
-                  selectable, selected: selSet.has(s.sid), onToggleSelect }));
-  // ONE stable body wrapper across every state (empty / grouped / flat), with
-  // KEYED children - the ConversationList stable-keyed-body rule. Diffing
-  // happens on the children, never by swapping the container's shape.
-  let bodyKids;
-  if (!sessions.length) {
-    bodyKids = [h('div', { key: 'empty', class: 'ds-dash-state', role: 'status' },
-      ...[
-        h('span', { key: 'et' }, emptyText),
-        (emptyAction && emptyAction.onClick)
-          ? Btn({ key: 'ea', onClick: emptyAction.onClick, children: emptyAction.label || 'start a chat' })
-          : null,
-      ].filter(Boolean))];
-  } else if (grouped) {
-    const buckets = [
-      { key: 'error', label: 'Errored', rows: sessions.filter((s) => !s.external && s.status === 'error') },
-      { key: 'running', label: 'Running', rows: sessions.filter((s) => !s.external && s.status !== 'error' && s.status !== 'stale') },
-      { key: 'idle', label: 'Idle', rows: sessions.filter((s) => !s.external && s.status === 'stale') },
-      { key: 'external', label: 'External', rows: sessions.filter((s) => s.external) },
-    ].filter((b) => b.rows.length);
-    bodyKids = buckets.map((b) => h('div', { key: 'grp' + b.key, class: 'ds-dash-group', role: 'group', 'aria-label': b.label + ' sessions' },
-      h('div', { key: 'gl', class: 'ds-dash-group-label' }, b.label + ' · ' + b.rows.length),
-      h('div', { key: 'gg', class: 'ds-dash-grid', role: 'list', 'aria-label': b.label + ' sessions' }, ...b.rows.map(cardOf))));
-  } else {
-    bodyKids = [h('div', { key: 'flat', class: 'ds-dash-grid', role: 'list', 'aria-label': 'live sessions' }, ...sessions.map(cardOf))];
-  }
-  const body = h('div', { key: 'body', class: 'ds-dash-groups' }, ...bodyKids);
-  return h('div', { class: 'ds-dash' }, header, body);
-}