anentrypoint-design 0.0.385 → 0.0.387

package/src/components/interaction-primitives.js

@@ -1,390 +1,18 @@
 // Interaction primitives — pointer drag/drop + keyboard shortcuts.
 // Pointer Events only (touch+mouse). Visuals via editor-primitives.css.
-import * as webjsx from '../../vendor/webjsx/index.js';
-import { Icon } from './shell.js';
-const h = webjsx.createElement;
-const DRAG_THRESHOLD = 5;
-const IS_MAC = (typeof navigator !== 'undefined') && /Mac|iPhone|iPad/.test(navigator.platform || '');
-const SHORTCUT_REGISTRY = new Set();
-function dispatchDrag(el, detail) {
-    el.dispatchEvent(new CustomEvent('ds-drag', { detail, bubbles: true, composed: true }));
-}
-
-export function useDraggable(el, { data, kind, onDragStart, onDragEnd } = {}) {
-    if (!el) return { destroy() {} };
-    let startX = 0, startY = 0, active = false, started = false, pid = null;
-    let kbMode = false, kbTargets = [], kbIdx = 0;
-
-    const onMove = (e) => {
-        if (!active) return;
-        if (!started) {
-            const dx = e.clientX - startX, dy = e.clientY - startY;
-            if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
-            started = true;
-            el.setAttribute('data-dragging', 'true');
-            if (onDragStart) onDragStart({ data, kind, pointerEvent: e });
-        }
-        const hit = document.elementFromPoint(e.clientX, e.clientY);
-        const target = hit && hit.closest('[data-drop-target]');
-        dispatchDrag(el, { phase: 'move', data, kind, pointerEvent: e, target });
-    };
-    const onUp = (e) => {
-        if (!active) return;
-        const wasStarted = started;
-        active = false; started = false;
-        try { if (pid != null) el.releasePointerCapture(pid); } catch { /* swallow: pointer capture may already be released, drag end still proceeds */ }
-        pid = null;
-        el.removeAttribute('data-dragging');
-        const hit = document.elementFromPoint(e.clientX, e.clientY);
-        const target = hit && hit.closest('[data-drop-target]');
-        dispatchDrag(el, { phase: 'end', data, kind, pointerEvent: e, target });
-        window.removeEventListener('pointermove', onMove);
-        window.removeEventListener('pointerup', onUp);
-        window.removeEventListener('pointercancel', onUp);
-        if (wasStarted && onDragEnd) onDragEnd({ drop: target, data, kind });
-    };
-    const onDown = (e) => {
-        if (e.button != null && e.button !== 0) return;
-        active = true; started = false;
-        startX = e.clientX; startY = e.clientY; pid = e.pointerId;
-        try { el.setPointerCapture(e.pointerId); } catch { /* swallow: pointer capture unsupported/denied, drag still tracks via listeners */ }
-        window.addEventListener('pointermove', onMove);
-        window.addEventListener('pointerup', onUp);
-        window.addEventListener('pointercancel', onUp);
-    };
-    const clearActive = () => kbTargets.forEach(n => n.removeAttribute('data-drop-target-active'));
-    const onKey = (e) => {
-        if (e.key === ' ' || e.code === 'Space') {
-            e.preventDefault();
-            if (!kbMode) {
-                kbMode = true; kbIdx = 0;
-                kbTargets = Array.from(document.querySelectorAll('[data-drop-target]'));
-                el.setAttribute('data-dragging', 'true');
-                if (onDragStart) onDragStart({ data, kind, pointerEvent: null });
-                if (kbTargets[0]) kbTargets[0].setAttribute('data-drop-target-active', 'true');
-            } else {
-                const t = kbTargets[kbIdx];
-                kbMode = false; el.removeAttribute('data-dragging'); clearActive();
-                if (t) dispatchDrag(el, { phase: 'end', data, kind, pointerEvent: null, target: t });
-                if (onDragEnd) onDragEnd({ drop: t, data, kind });
-            }
-        } else if (kbMode && /^Arrow/.test(e.key)) {
-            e.preventDefault();
-            const dir = (e.key === 'ArrowDown' || e.key === 'ArrowRight') ? 1 : -1;
-            clearActive();
-            kbIdx = (kbIdx + dir + kbTargets.length) % kbTargets.length;
-            if (kbTargets[kbIdx]) kbTargets[kbIdx].setAttribute('data-drop-target-active', 'true');
-        } else if (kbMode && e.key === 'Escape') {
-            e.preventDefault(); kbMode = false; el.removeAttribute('data-dragging'); clearActive();
-        }
-    };
-    el.addEventListener('pointerdown', onDown);
-    el.addEventListener('keydown', onKey);
-    return { destroy() {
-        el.removeEventListener('pointerdown', onDown);
-        el.removeEventListener('keydown', onKey);
-        window.removeEventListener('pointermove', onMove);
-        window.removeEventListener('pointerup', onUp);
-        window.removeEventListener('pointercancel', onUp);
-    }};
-}
-
-// useNumberScrub — pointer-event horizontal drag-to-scrub on a numeric input.
-// Pointer Events (mouse+touch+pen+XR), touch-action:none so a vertical page
-// scroll never steals the gesture. Click-to-edit is preserved: a press that
-// does not cross SCRUB_THRESHOLD leaves the input focusable for typing.
-export function useNumberScrub(el, { getValue, onChange, step = 0.01, threshold = 3 } = {}) {
-    if (!el) return { destroy() {} };
-    el.style.touchAction = 'none';
-    let pid = null, startX = 0, startV = 0, moved = false;
-    const onMove = (e) => {
-        if (pid == null) return;
-        const dx = e.clientX - startX;
-        if (!moved) {
-            if (Math.abs(dx) < threshold) return;
-            moved = true;
-            el.setAttribute('data-scrubbing', 'true');
-            if (document.activeElement === el) el.blur();
-        }
-        const v = startV + dx * step;
-        if (onChange) onChange(v);
-    };
-    const onUp = () => {
-        if (pid == null) return;
-        try { el.releasePointerCapture(pid); } catch { /* swallow: pointer capture may already be released, drag end still proceeds */ }
-        pid = null;
-        el.removeAttribute('data-scrubbing');
-        window.removeEventListener('pointermove', onMove);
-        window.removeEventListener('pointerup', onUp);
-        window.removeEventListener('pointercancel', onUp);
-    };
-    const onDown = (e) => {
-        if (e.button != null && e.button !== 0) return;
-        // Let a focused input handle caret placement / text selection instead.
-        if (document.activeElement === el) return;
-        pid = e.pointerId; startX = e.clientX; moved = false;
-        const cur = getValue ? getValue() : parseFloat(el.value);
-        startV = Number.isFinite(cur) ? cur : 0;
-        try { el.setPointerCapture(pid); } catch { /* swallow: pointer capture unsupported/denied, drag still tracks via listeners */ }
-        window.addEventListener('pointermove', onMove);
-        window.addEventListener('pointerup', onUp);
-        window.addEventListener('pointercancel', onUp);
-    };
-    el.addEventListener('pointerdown', onDown);
-    return { destroy() {
-        el.removeEventListener('pointerdown', onDown);
-        window.removeEventListener('pointermove', onMove);
-        window.removeEventListener('pointerup', onUp);
-        window.removeEventListener('pointercancel', onUp);
-    }};
-}
-
-// usePointerDrag — free 2D pointer drag with caller-supplied onMove, for surfaces
-// that need raw pointer coordinates each frame (a 3D viewport gizmo, a canvas
-// handle) rather than the data-transfer DnD model of useDraggable. Pointer Events
-// only, so mouse+touch+pen+XR-controller all drive it. The primary pointer is
-// captured on the element (drag keeps tracking when it leaves the element or
-// crosses a panel) and released on pointerup/pointercancel; a non-primary pointer
-// (second finger) is ignored mid-drag so multi-touch never makes the drag jump.
-// onStart returns false to decline the drag (e.g. a miss in the gizmo raycast),
-// leaving the pointerdown to propagate to other handlers.
-export function usePointerDrag(el, { onStart, onMove, onEnd, button = 0 } = {}) {
-    if (!el) return { destroy() {} };
-    let pid = null;
-    const onMoveEv = (e) => {
-        if (pid == null || e.pointerId !== pid) return;
-        if (onMove) onMove(e);
-    };
-    const finish = (e, cancelled) => {
-        if (pid == null) return;
-        try { el.releasePointerCapture(pid); } catch { /* swallow: pointer capture may already be released, drag end still proceeds */ }
-        pid = null;
-        el.removeAttribute('data-pointer-dragging');
-        window.removeEventListener('pointermove', onMoveEv);
-        window.removeEventListener('pointerup', onUpEv);
-        window.removeEventListener('pointercancel', onCancelEv);
-        if (onEnd) onEnd(e, cancelled);
-    };
-    const onUpEv = (e) => { if (e.pointerId === pid) finish(e, false); };
-    const onCancelEv = (e) => { if (e.pointerId === pid) finish(e, true); };
-    const onDown = (e) => {
-        if (button != null && e.button != null && e.button !== button) return;
-        if (pid != null) return; // already dragging with the primary pointer
-        if (onStart && onStart(e) === false) return; // caller declined (e.g. raycast miss)
-        pid = e.pointerId;
-        el.setAttribute('data-pointer-dragging', 'true');
-        try { el.setPointerCapture(pid); } catch { /* swallow: pointer capture unsupported/denied, drag still tracks via listeners */ }
-        window.addEventListener('pointermove', onMoveEv);
-        window.addEventListener('pointerup', onUpEv);
-        window.addEventListener('pointercancel', onCancelEv);
-    };
-    el.addEventListener('pointerdown', onDown);
-    return { destroy() {
-        el.removeEventListener('pointerdown', onDown);
-        window.removeEventListener('pointermove', onMoveEv);
-        window.removeEventListener('pointerup', onUpEv);
-        window.removeEventListener('pointercancel', onCancelEv);
-    }, get dragging() { return pid != null; } };
-}
-
-export function useDropTarget(el, { accepts = [], onDrop, onDragOver } = {}) {
-    if (!el) return { destroy() {} };
-    el.setAttribute('data-drop-target', '');
-    const handler = (e) => {
-        const d = e.detail; if (!d) return;
-        if (accepts.length && !accepts.includes(d.kind)) return;
-        if (d.target !== el) {
-            el.removeAttribute('data-drop-target-active');
-            return;
-        }
-        if (d.phase === 'move') {
-            el.setAttribute('data-drop-target-active', 'true');
-            if (onDragOver) onDragOver({ data: d.data, kind: d.kind, pointerEvent: d.pointerEvent });
-        } else if (d.phase === 'end') {
-            el.removeAttribute('data-drop-target-active');
-            if (onDrop) onDrop({ data: d.data, kind: d.kind, pointerEvent: d.pointerEvent });
-        }
-    };
-    document.addEventListener('ds-drag', handler, true);
-    return { destroy() {
-        document.removeEventListener('ds-drag', handler, true);
-        el.removeAttribute('data-drop-target');
-        el.removeAttribute('data-drop-target-active');
-    }};
-}
-
-export function Reorderable({ items = [], getKey, renderItem, onReorder, axis = 'vertical', kind = 'reorder' } = {}) {
-    const order = items.map((_, i) => i);
-    const cls = 'ds-reorderable ds-reorderable-' + axis;
-    return h('div', { class: cls, role: 'list' },
-        ...items.map((item, i) => {
-            const key = getKey ? getKey(item, i) : i;
-            const onRef = (el) => {
-                if (!el || el._dsReorder) return;
-                el._dsReorder = true;
-                const handle = el.querySelector('.ds-reorder-handle') || el;
-                const drag = useDraggable(handle, {
-                    data: { index: i }, kind,
-                    onDragEnd: ({ drop }) => {
-                        if (!drop) return;
-                        const toIdx = Number(drop.getAttribute('data-reorder-index'));
-                        if (Number.isNaN(toIdx) || toIdx === i) return;
-                        const next = order.slice();
-                        const [m] = next.splice(i, 1);
-                        next.splice(toIdx, 0, m);
-                        if (onReorder) onReorder(next);
-                    },
-                });
-                const drop = useDropTarget(el, { accepts: [kind] });
-                el._dsReorderDestroy = () => { drag.destroy(); drop.destroy(); };
-            };
-            return h('div', {
-                key, ref: onRef, class: 'ds-reorder-item',
-                'data-reorder-index': String(i), role: 'listitem',
-            },
-                h('button', {
-                    type: 'button', class: 'ds-reorder-handle',
-                    'aria-label': 'Reorder', tabindex: '0',
-                }, Icon('more-horizontal')),
-                renderItem ? renderItem(item, i) : null
-            );
-        })
-    );
-}
-
-function parseCombo(combo) {
-    const parts = combo.split('+').map(s => s.trim());
-    const key = parts.pop();
-    const mods = new Set(parts.map(s => s.toLowerCase()));
-    return { key: key.length === 1 ? key.toLowerCase() : key, mod: mods.has('mod'), shift: mods.has('shift'), alt: mods.has('alt'), ctrl: mods.has('ctrl') };
-}
-function matchEvent(e, spec) {
-    const k = e.key.length === 1 ? e.key.toLowerCase() : e.key;
-    if (k !== spec.key) return false;
-    const modOk = spec.mod ? (IS_MAC ? e.metaKey : e.ctrlKey) : true;
-    if (!modOk) return false;
-    if (spec.shift !== !!e.shiftKey) return false;
-    if (spec.alt !== !!e.altKey) return false;
-    if (spec.ctrl && !e.ctrlKey) return false;
-    return true;
-}
-
-export function formatShortcut(combo) {
-    const s = parseCombo(combo);
-    const mod = s.mod ? (IS_MAC ? 'Cmd+' : 'Ctrl+') : '';
-    const shift = s.shift ? 'Shift+' : '';
-    const alt = s.alt ? 'Alt+' : '';
-    const key = s.key.length === 1 ? s.key.toUpperCase() : s.key;
-    return mod + alt + shift + key;
-}
-
-export function useKeyboardShortcut(map = {}, { scope = 'global', enabled = true } = {}) {
-    if (!enabled) return { destroy() {}, trigger() {} };
-    const target = scope === 'global' ? (typeof document !== 'undefined' ? document : null) : scope;
-    if (!target) return { destroy() {}, trigger() {} };
-    const specs = Object.entries(map).map(([combo, fn]) => ({ combo, spec: parseCombo(combo), fn }));
-    specs.forEach(s => SHORTCUT_REGISTRY.add({ combo: s.combo, scope: scope === 'global' ? 'global' : 'local' }));
-    const onKey = (e) => {
-        for (const s of specs) if (matchEvent(e, s.spec)) { e.preventDefault(); s.fn(e); return; }
-    };
-    target.addEventListener('keydown', onKey);
-    return {
-        destroy() { target.removeEventListener('keydown', onKey); },
-        trigger(combo) { const s = specs.find(x => x.combo === combo); if (s) s.fn(); },
-    };
-}
-
-export function ShortcutHint({ combo, kind = 'kbd' } = {}) { return h('kbd', { class: 'ds-kbd ds-kbd-' + kind }, formatShortcut(combo || '')); }
-
-function shortcutCaps(keys) {
-    const caps = [];
-    let n = 0;
-    const alts = String(keys || '').split(' / ');
-    alts.forEach((alt, ai) => {
-        if (ai > 0) caps.push(h('span', { key: 'sep-alt-' + (n++), class: 'ds-kbd-sep' }, ' / '));
-        const steps = alt.split(' then ');
-        steps.forEach((step, si) => {
-            if (si > 0) caps.push(h('span', { key: 'sep-then-' + (n++), class: 'ds-kbd-sep' }, ' then '));
-            caps.push(h('kbd', { key: 'cap-' + (n++), class: 'ds-kbd' }, step));
-        });
-    });
-    return caps;
-}
-
-export function ShortcutList({ shortcuts = [] } = {}) {
-    return h('div', { class: 'ds-shortcuts-hint' },
-        ...shortcuts.map(s => h('div', { class: 'ds-shortcut-row' },
-            h('span', { class: 'ds-kbd-caps' }, ...shortcutCaps(s.keys || s.combo || '')),
-            h('span', { class: 'ds-kbd-label' }, s.desc || s.description || s.label || ''))));
-}
-
-// ---------------------------------------------------------------------------
-// Mobile-breakpoint detection — subscribe-style (webjsx has no hooks/
-// useSyncExternalStore equivalent; consumers re-render on the callback).
-// Builds on editor-primitives.js's BP_SM (480px) rather than pi-web's
-// hardcoded 640px so it stays one source of truth with the Grid/GridItem
-// breakpoint tiers already in this design system.
-// ---------------------------------------------------------------------------
-const MOBILE_QUERY = '(max-width: 480px)';
-
-export function isMobileNow() {
-    if (typeof window === 'undefined' || !window.matchMedia) return false;
-    return window.matchMedia(MOBILE_QUERY).matches;
-}
-
-// Returns an unsubscribe function, mirroring theme.js's onThemeChange shape.
-export function onMobileChange(cb) {
-    if (typeof window === 'undefined' || !window.matchMedia) return () => {};
-    const mql = window.matchMedia(MOBILE_QUERY);
-    const handler = () => cb(mql.matches);
-    if (mql.addEventListener) mql.addEventListener('change', handler);
-    else mql.addListener(handler);
-    return () => {
-        if (mql.removeEventListener) mql.removeEventListener('change', handler);
-        else mql.removeListener(handler);
-    };
-}
-
-export function useKeyboardShortcutHelp() { return { registry: Array.from(SHORTCUT_REGISTRY) }; }
-export function ShortcutHelpDialog({ open = false, onClose, registry } = {}) {
-    if (!open) return null;
-    const list = registry || Array.from(SHORTCUT_REGISTRY);
-    const groups = {};
-    list.forEach(r => { (groups[r.scope] = groups[r.scope] || []).push(r); });
-    // Escape-to-close, Tab focus trap, and autofocus on open — wired through a
-    // ref so teardown runs on the webjsx ref(null) unmount branch.
-    const dialogRef = (el) => {
-        if (!el) { if (ShortcutHelpDialog._teardown) { ShortcutHelpDialog._teardown(); ShortcutHelpDialog._teardown = null; } return; }
-        const focusables = () => el.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])');
-        const onKey = (e) => {
-            if (e.key === 'Escape') { e.preventDefault(); if (onClose) onClose(); return; }
-            if (e.key === 'Tab') {
-                const f = focusables();
-                if (!f.length) { e.preventDefault(); return; }
-                const first = f[0], last = f[f.length - 1];
-                if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
-                else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
-            }
-        };
-        el.addEventListener('keydown', onKey);
-        ShortcutHelpDialog._teardown = () => el.removeEventListener('keydown', onKey);
-        // The dialog itself is focusable (tabindex=-1) so it always has a home
-        // for focus even when it contains no interactive controls.
-        const f = focusables();
-        (f[0] || el).focus();
-    };
-    return h('div', { class: 'ds-ep-dialog-backdrop', onmousedown: (e) => { if (e.target === e.currentTarget && onClose) onClose(); } },
-        h('div', { class: 'ds-ep-dialog', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Keyboard shortcuts', tabindex: '-1', ref: dialogRef },
-            h('h2', null, 'Keyboard shortcuts'),
-            ...Object.entries(groups).map(([scope, rows]) =>
-                h('section', { class: 'ds-kbd-group' },
-                    h('h3', null, scope),
-                    h('ul', null, ...rows.map(r => h('li', { class: 'ds-kbd-row' },
-                        h(ShortcutHint, { combo: r.combo }),
-                        (r.label || r.description) ? h('span', { class: 'ds-kbd-label' }, r.label || r.description) : null
-                    )))
-                )
-            )
-        )
-    );
-}
+//
+// This module is a barrel: every primitive lives in a single-responsibility
+// submodule under ./interaction-primitives/, and the public export surface here
+// is unchanged — no consumer import needs to move.
+
+import { useDraggable, useNumberScrub, usePointerDrag, useDropTarget } from './interaction-primitives/pointer.js';
+import { Reorderable } from './interaction-primitives/reorderable.js';
+import { formatShortcut, useKeyboardShortcut, ShortcutHint, ShortcutList, useKeyboardShortcutHelp, ShortcutHelpDialog } from './interaction-primitives/shortcuts.js';
+import { isMobileNow, onMobileChange } from './interaction-primitives/mobile.js';
+
+export {
+    useDraggable, useNumberScrub, usePointerDrag, useDropTarget,
+    Reorderable,
+    formatShortcut, useKeyboardShortcut, ShortcutHint, ShortcutList, useKeyboardShortcutHelp, ShortcutHelpDialog,
+    isMobileNow, onMobileChange,
+};

package/src/components/sessions/conversation-list.js

@@ -0,0 +1,230 @@
+// ConversationList — the persistent left-rail "Chats" column: grouped, flat,
+// or parentSid-nested fork-tree rows, with inline rename, arm-then-confirm
+// delete, search, and a load-more tail. Host-driven throughout (the kit stays
+// stateless); styling lives in chat.css (.ds-session*).
+
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { Icon } from '../shell.js';
+import { SearchInput } from '../content.js';
+import { STATUS_WORD, STATUS_DISC } from './format.js';
+const h = webjsx.createElement;
+
+/**
+ * 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);
+}