anentrypoint-design 0.0.369 → 0.0.371

package/src/components/models-config.js

@@ -0,0 +1,229 @@
+// ModelsConfig — provider/model availability panel, ported from pi-web's
+// ModelsConfig.tsx UX (left tree of providers -> models, right detail pane,
+// status chips, refresh action) but rebound to freddie's REAL backend shape:
+// GET /api/models/availability, not pi-web's editable ~/.pi/agent/models.json.
+//
+// freddie's schema (see AGENTS.md "Model availability matrix"):
+//   {
+//     timestamp, config, daemons,
+//     providers: [{ id, key_present, discovery_error,
+//                    models: [{ id, discovered_via, modes: {<mode>: {ok,
+//                      latency_ms, excerpt?, error?, skipped?, reason?}},
+//                      usable_in_any_mode }] }],
+//     sampler: [{ provider, ok, failCount, nextCheckIn }],
+//     summary: { total_providers, total_models, usable_in_any_mode, per_mode_counts },
+//   }
+// This is a read-only witness of provider reachability, not an editable
+// provider-config form — so unlike pi-web's modal editor (add/rename/delete
+// provider, edit models.json, save/cancel), this component is a plain
+// non-modal panel: pick a provider in the left tree, see its models + mode
+// grid + sampler backoff state on the right. No local edit state at all.
+//
+// Usage (host owns fetch/poll, this component is pure render + callbacks):
+//   ModelsConfig({ data, loading, error, selectedProviderId, onSelectProvider,
+//                  selectedModel, onSelectModel, onRefresh, rebuilding, onRebuild })
+//
+// Props:
+//   data                : the raw GET /api/models/availability JSON, or null/undefined
+//   loading             : true while the initial fetch is in flight
+//   error               : { error, hint } from a 404 (file absent) or other fetch failure, or a string
+//   selectedProviderId  : id of the provider shown in the detail pane (defaults to first)
+//   onSelectProvider    : callback(providerId) fired when a provider row is clicked
+//   selectedModel       : { providerId, modelId } OPTIONAL - lets a host (e.g. chat
+//                          panel) drive model selection off the same list
+//   onSelectModel       : OPTIONAL callback({ providerId, modelId }) fired on model row click
+//   onRefresh           : OPTIONAL callback() - re-fetch GET /api/models/availability
+//   onRebuild           : OPTIONAL callback() - POST /api/models/availability/rebuild
+//   rebuilding          : true while a rebuild job is known in flight (202 seen, not yet settled)
+//   rebuildError        : OPTIONAL string - surfaced on a 409 (rebuild already in flight) or other failure
+//
+// No decorative glyphs — the kit's Icon SVGs + status words only.
+
+import * as webjsx from '../../vendor/webjsx/index.js';
+import { Panel, Row } from './content.js';
+import { Btn, Icon } from './shell.js';
+
+const h = webjsx.createElement;
+
+const MODES = [
+    'direct_api', 'acptoapi_passthrough', 'freddie_v1',
+    'kilo_acp', 'opencode_acp', 'claude_cli', 'freddie_agent_loop',
+];
+
+const MODE_LABEL = {
+    direct_api: 'direct',
+    acptoapi_passthrough: 'acptoapi',
+    freddie_v1: 'freddie v1',
+    kilo_acp: 'kilo acp',
+    opencode_acp: 'opencode acp',
+    claude_cli: 'claude cli',
+    freddie_agent_loop: 'agent loop',
+};
+
+function fmtAgo(iso) {
+    if (!iso) return null;
+    const t = Date.parse(iso);
+    if (Number.isNaN(t)) return String(iso);
+    const s = Math.max(0, Math.floor((Date.now() - t) / 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';
+}
+
+// One cell of the mode-availability grid — a compact chip whose tone/label
+// covers all four states a matrix cell can carry: ok, fail, skipped, unknown
+// (the model/mode combination is simply absent from `modes`).
+function ModeChip({ mode, cell }) {
+    const label = MODE_LABEL[mode] || mode;
+    if (!cell) {
+        return h('span', { class: 'ds-mc-chip tone-unknown', title: label + ': not probed' }, label);
+    }
+    if (cell.skipped) {
+        const reason = cell.reason || 'skipped';
+        return h('span', { class: 'ds-mc-chip tone-skip', title: label + ': ' + reason }, label);
+    }
+    if (cell.ok) {
+        const lat = cell.latency_ms != null ? ' ' + cell.latency_ms + 'ms' : '';
+        return h('span', { class: 'ds-mc-chip tone-ok', title: label + ': ok' + lat }, label);
+    }
+    const err = cell.error || 'failed';
+    return h('span', { class: 'ds-mc-chip tone-fail', title: label + ': ' + err }, label);
+}
+
+function SamplerBadge({ sampler }) {
+    if (!sampler) return null;
+    const tone = sampler.ok ? 'ok' : 'fail';
+    const text = sampler.ok
+        ? 'sampler ok'
+        : 'sampler backoff' + (sampler.failCount != null ? ' x' + sampler.failCount : '') +
+          (sampler.nextCheckIn != null ? ' (retry in ' + sampler.nextCheckIn + ')' : '');
+    return h('span', { class: 'ds-mc-sampler tone-' + tone }, text);
+}
+
+// Left tree: provider rows (key-present / missing-key / discovery-error state)
+// each expanding into its model rows when selected.
+function ProviderTree({ providers, samplerById, selectedProviderId, onSelectProvider }) {
+    return h('div', { class: 'ds-mc-tree', role: 'listbox', 'aria-label': 'providers' },
+        ...providers.map((p) => {
+            const isSelected = p.id === selectedProviderId;
+            const usableCount = (p.models || []).filter((m) => m.usable_in_any_mode).length;
+            const rail = p.discovery_error ? 'flame' : (!p.key_present ? null : (usableCount > 0 ? 'green' : null));
+            return h('div', { key: p.id, class: 'ds-mc-tree-group' },
+                Row({
+                    title: p.id,
+                    sub: p.discovery_error
+                        ? p.discovery_error
+                        : (usableCount + '/' + (p.models || []).length + ' models usable'),
+                    meta: h('span', { class: 'ds-mc-key-chip' + (p.key_present ? ' tone-ok' : ' tone-fail') },
+                        p.key_present ? 'key set' : 'no key'),
+                    rail,
+                    selected: isSelected,
+                    onClick: () => onSelectProvider && onSelectProvider(p.id),
+                }),
+                isSelected ? SamplerBadge({ sampler: samplerById.get(p.id) }) : null,
+            );
+        }));
+}
+
+// Right detail: the selected provider's models, each with its mode-grid and
+// (optionally) a model-select affordance for a host driving chat model choice.
+function ProviderDetail({ provider, samplerById, selectedModel, onSelectModel }) {
+    if (!provider) {
+        return h('div', { class: 'ds-mc-detail-empty' }, 'select a provider');
+    }
+    const models = provider.models || [];
+    return h('div', { class: 'ds-mc-detail' },
+        h('div', { class: 'ds-mc-detail-head' },
+            h('span', { class: 'ds-mc-detail-title' }, provider.id),
+            SamplerBadge({ sampler: samplerById.get(provider.id) })),
+        provider.discovery_error
+            ? h('div', { class: 'ds-mc-discovery-error' },
+                h('span', { 'aria-hidden': 'true' }, Icon('warn', { size: 14 })),
+                h('span', {}, provider.discovery_error))
+            : null,
+        !models.length
+            ? h('div', { class: 'ds-mc-detail-empty' }, 'no models discovered for this provider')
+            : h('div', { class: 'ds-mc-model-list' }, ...models.map((m) => {
+                const isSelModel = selectedModel && selectedModel.providerId === provider.id && selectedModel.modelId === m.id;
+                return h('div', { key: m.id, class: 'ds-mc-model-row' + (isSelModel ? ' active' : '') },
+                    h('div', { class: 'ds-mc-model-head' },
+                        h('span', { class: 'ds-mc-model-id' }, m.id),
+                        h('span', { class: 'ds-mc-model-via' }, m.discovered_via ? 'via ' + m.discovered_via : null),
+                        h('span', {
+                            class: 'ds-mc-usable-chip' + (m.usable_in_any_mode ? ' tone-ok' : ' tone-fail'),
+                        }, m.usable_in_any_mode ? 'usable' : 'unusable'),
+                        onSelectModel ? Btn({
+                            size: 'sm',
+                            variant: isSelModel ? 'default' : 'ghost',
+                            children: isSelModel ? 'selected' : 'select',
+                            onClick: () => onSelectModel({ providerId: provider.id, modelId: m.id }),
+                        }) : null),
+                    h('div', { class: 'ds-mc-mode-grid' },
+                        ...MODES.map((mode) => ModeChip({ mode, cell: m.modes && m.modes[mode] }))));
+            })));
+}
+
+function SummaryBar({ summary, timestamp, onRefresh, onRebuild, rebuilding, rebuildError }) {
+    return h('div', { class: 'ds-mc-summary' },
+        h('div', { class: 'ds-mc-summary-facts' },
+            summary ? h('span', {}, (summary.usable_in_any_mode ?? 0) + '/' + (summary.total_models ?? 0) + ' models usable') : null,
+            summary ? h('span', {}, summary.total_providers + ' providers') : null,
+            timestamp ? h('span', { class: 'ds-mc-summary-ts' }, 'checked ' + fmtAgo(timestamp)) : null),
+        h('div', { class: 'ds-mc-summary-actions' },
+            rebuildError ? h('span', { class: 'ds-mc-rebuild-error' }, rebuildError) : null,
+            onRefresh ? Btn({ size: 'sm', variant: 'ghost', onClick: onRefresh, children: 'refresh' }) : null,
+            onRebuild ? Btn({
+                size: 'sm',
+                disabled: !!rebuilding,
+                onClick: onRebuild,
+                children: rebuilding ? 'rebuilding…' : 'rebuild',
+            }) : null));
+}
+
+export function ModelsConfig({
+    data, loading, error,
+    selectedProviderId, onSelectProvider,
+    selectedModel, onSelectModel,
+    onRefresh, onRebuild, rebuilding, rebuildError,
+} = {}) {
+    if (loading && !data) {
+        return h('div', { class: 'ds-mc' }, h('div', { class: 'ds-mc-loading', role: 'status' }, 'loading model availability…'));
+    }
+    // 404 (file absent) per freddie AGENTS.md: {error, hint}. A generic string
+    // error is also accepted so a host can pass a plain fetch-failure message.
+    if (error) {
+        const msg = typeof error === 'string' ? error : (error.error || 'failed to load model availability');
+        const hint = typeof error === 'object' ? error.hint : null;
+        return h('div', { class: 'ds-mc' },
+            h('div', { class: 'ds-mc-empty', role: 'status' },
+                h('span', { 'aria-hidden': 'true' }, Icon('circle-dot', { size: 22 })),
+                h('span', {}, msg),
+                hint ? h('span', { class: 'ds-mc-empty-hint' }, hint) : null,
+                onRebuild ? Btn({ size: 'sm', onClick: onRebuild, disabled: !!rebuilding, children: rebuilding ? 'rebuilding…' : 'build availability matrix' }) : null));
+    }
+    const providers = (data && data.providers) || [];
+    if (!providers.length) {
+        return h('div', { class: 'ds-mc' },
+            h('div', { class: 'ds-mc-empty', role: 'status' },
+                h('span', { 'aria-hidden': 'true' }, Icon('circle-dot', { size: 22 })),
+                h('span', {}, 'no providers discovered'),
+                onRefresh ? Btn({ size: 'sm', variant: 'ghost', onClick: onRefresh, children: 'refresh' }) : null));
+    }
+    const samplerById = new Map((data.sampler || []).map((s) => [s.provider, s]));
+    const activeId = selectedProviderId || providers[0].id;
+    const activeProvider = providers.find((p) => p.id === activeId) || providers[0];
+    return h('div', { class: 'ds-mc' },
+        SummaryBar({ summary: data.summary, timestamp: data.timestamp, onRefresh, onRebuild, rebuilding, rebuildError }),
+        h('div', { class: 'ds-mc-body' },
+            Panel({
+                title: 'providers',
+                class: 'ds-mc-tree-panel',
+                children: [ProviderTree({ providers, samplerById, selectedProviderId: activeId, onSelectProvider })],
+            }),
+            Panel({
+                title: 'models',
+                class: 'ds-mc-detail-panel',
+                children: [ProviderDetail({ provider: activeProvider, samplerById, selectedModel, onSelectModel })],
+            })));
+}

package/src/components/plugins-config.js

@@ -0,0 +1,154 @@
+// PluginsConfig — plugin/extension list + detail panel, ported from pi-web's
+// PluginsConfig.tsx UX (modal, sidebar list grouped by scope, detail pane with
+// enable/disable toggle, add-plugin flow, diagnostics footer) but rebuilt over
+// freddie's real plugin contract, not pi-web's npm-package model:
+//
+//   { name, version?, surfaces: 'pi'|'gui'|'both', requires?: [...names], source? }
+//
+// (see freddie's AGENTS.md "Plugin architecture" — `src/host/contract.js`).
+// There is no install/remove/update here: freddie plugins are local-filesystem
+// discovery only (`plugins/<name>/plugin.js`, `~/.freddie/plugins/`), so the
+// only host-facing actions are enable/disable and reload. `requires` renders
+// as a dependency list (freddie's cycle-checked `requires` array) in place of
+// pi-web's package version/resource breakdown.
+//
+// Usage (consumer wires its own state/fetch, this is presentation-only):
+//   PluginsConfig({ plugins, selected, onSelect, onToggle, onReload, onClose })
+//
+// Props:
+//   plugins   : [{ name, version?, surfaces, requires?, source?, enabled, status? }]
+//               status is an optional free-text chip ('loaded'|'error'|...);
+//               enabled drives the toggle and the sidebar status dot.
+//   selected  : name of the currently-selected plugin, or null
+//   loading   : bool — sidebar shows a loading row instead of the list
+//   error     : string|null — sidebar shows this instead of the list
+//   busyName  : name of the plugin currently mid-toggle/reload, or null
+//   onSelect  : (name) => void
+//   onToggle  : (plugin) => void — fired with the full plugin row to flip enabled
+//   onReload  : () => void — optional, re-run host discovery
+//   onClose   : () => void
+//
+// No decorative glyphs beyond the kit's Icon SVGs — status communicated by a
+// tone dot + text label, never color alone.
+
+import * as webjsx from '../../vendor/webjsx/index.js';
+import { Icon } from './shell.js';
+const h = webjsx.createElement;
+
+function statusTone(plugin) {
+    if (!plugin.enabled) return 'neutral';
+    if (plugin.status === 'error') return 'delete';
+    return 'add';
+}
+
+function statusLabel(plugin) {
+    if (!plugin.enabled) return 'disabled';
+    if (plugin.status) return plugin.status;
+    return 'enabled';
+}
+
+function surfacesText(surfaces) {
+    if (!surfaces) return '—';
+    return surfaces;
+}
+
+function PluginSidebarRow({ plugin, active, busy, onSelect }) {
+    return h('button', {
+        type: 'button',
+        class: 'ds-plugins-row' + (active ? ' active' : ''),
+        onclick: () => onSelect(plugin.name),
+        'aria-pressed': active ? 'true' : 'false',
+        'aria-label': plugin.name + ': ' + statusLabel(plugin),
+    },
+        h('span', { class: 'ds-plugins-dot tone-' + statusTone(plugin), 'aria-hidden': 'true' }),
+        h('span', { class: 'ds-plugins-row-body' },
+            h('span', { class: 'ds-plugins-row-name' }, plugin.name),
+            h('span', { class: 'ds-plugins-row-meta' },
+                surfacesText(plugin.surfaces),
+                plugin.requires && plugin.requires.length ? ' · ' + plugin.requires.length + ' req' : '')),
+        busy ? h('span', { class: 'ds-plugins-row-busy' }, '…') : null);
+}
+
+function PluginDetail({ plugin, busy, onToggle, onReload }) {
+    if (!plugin) {
+        return h('div', { class: 'ds-plugins-empty', role: 'status' },
+            h('span', { 'aria-hidden': 'true' }, Icon('circle-dot', { size: 22 })),
+            h('span', {}, 'Select a plugin'));
+    }
+    const requires = Array.isArray(plugin.requires) ? plugin.requires : [];
+    return h('div', { class: 'ds-plugins-detail' },
+        h('div', { class: 'ds-plugins-detail-head' },
+            h('div', { class: 'ds-plugins-detail-title' },
+                h('span', { class: 'ds-plugins-dot tone-' + statusTone(plugin), 'aria-hidden': 'true' }),
+                h('span', { class: 'name' }, plugin.name),
+                plugin.version ? h('span', { class: 'ds-plugins-version' }, 'v' + plugin.version) : null),
+            h('button', {
+                type: 'button',
+                class: 'ds-plugins-toggle' + (plugin.enabled ? ' on' : ''),
+                disabled: busy ? true : null,
+                onclick: () => onToggle && onToggle(plugin),
+                'aria-pressed': plugin.enabled ? 'true' : 'false',
+                'aria-label': plugin.enabled ? 'Disable plugin' : 'Enable plugin',
+            }, h('span', { class: 'ds-plugins-toggle-knob' }))),
+        h('div', { class: 'ds-plugins-fact-grid' },
+            h('div', { class: 'ds-plugins-fact-label' }, 'status'),
+            h('div', { class: 'ds-plugins-fact-value tone-text-' + statusTone(plugin) }, statusLabel(plugin)),
+            h('div', { class: 'ds-plugins-fact-label' }, 'surfaces'),
+            h('div', { class: 'ds-plugins-fact-value' }, surfacesText(plugin.surfaces)),
+            plugin.source ? h('div', { class: 'ds-plugins-fact-label' }, 'source') : null,
+            plugin.source ? h('div', { class: 'ds-plugins-fact-value ds-plugins-mono' }, plugin.source) : null),
+        h('div', { class: 'ds-plugins-requires' },
+            h('div', { class: 'ds-plugins-group-label' }, 'requires'),
+            requires.length
+                ? h('div', { class: 'ds-plugins-requires-list' },
+                    ...requires.map((r) => h('span', { key: r, class: 'ds-plugins-chip' }, r)))
+                : h('div', { class: 'ds-plugins-requires-empty' }, 'no dependencies')),
+        onReload
+            ? h('div', { class: 'ds-plugins-detail-actions' },
+                h('button', {
+                    type: 'button',
+                    class: 'ds-plugins-btn',
+                    disabled: busy ? true : null,
+                    onclick: onReload,
+                }, busy ? 'Reloading…' : 'Reload plugins'))
+            : null);
+}
+
+export function PluginsConfig({
+    plugins = [],
+    selected = null,
+    loading = false,
+    error = null,
+    busyName = null,
+    onSelect,
+    onToggle,
+    onReload,
+    onClose,
+} = {}) {
+    const selectedPlugin = plugins.find((p) => p.name === selected) || null;
+    return h('div', { class: 'ds-plugins-overlay', onclick: (e) => { if (e.target === e.currentTarget && onClose) onClose(); } },
+        h('div', { class: 'ds-plugins-modal', role: 'dialog', 'aria-label': 'Plugins' },
+            h('div', { class: 'ds-plugins-header' },
+                h('span', { class: 'ds-plugins-title' }, 'Plugins'),
+                onClose ? h('button', { type: 'button', class: 'ds-plugins-close', onclick: onClose, 'aria-label': 'Close' }, '×') : null),
+            h('div', { class: 'ds-plugins-body' },
+                h('div', { class: 'ds-plugins-sidebar' },
+                    loading
+                        ? h('div', { class: 'ds-plugins-sidebar-status' }, 'Loading…')
+                        : error
+                            ? h('div', { class: 'ds-plugins-sidebar-status ds-plugins-status-error' }, error)
+                            : plugins.length === 0
+                                ? h('div', { class: 'ds-plugins-sidebar-status' }, 'No plugins registered')
+                                : h('div', { class: 'ds-plugins-list', role: 'listbox', 'aria-label': 'plugin list' },
+                                    ...plugins.map((p) => PluginSidebarRow({
+                                        key: p.name,
+                                        plugin: p,
+                                        active: selected === p.name,
+                                        busy: busyName === p.name,
+                                        onSelect,
+                                    })))),
+                h('div', { class: 'ds-plugins-main' },
+                    PluginDetail({ plugin: selectedPlugin, busy: busyName === (selectedPlugin && selectedPlugin.name), onToggle, onReload }))),
+            h('div', { class: 'ds-plugins-footer' },
+                h('span', { class: 'ds-plugins-footer-count' }, plugins.length + ' plugin' + (plugins.length === 1 ? '' : 's')))));
+}

package/src/components/sessions.js

@@ -44,7 +44,7 @@ export function fmtDuration(ms) {
  * conversation.
  *
  * @param {Object} [props]
- * @param {Array<{sid:*, title?:string, project?:string, agent?:string, time?:string, running?:boolean, unread?:boolean, rail?:string}>} [props.sessions=[]]
+ * @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).
@@ -53,6 +53,26 @@ export function fmtDuration(ms) {
  * @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,
@@ -68,41 +88,114 @@ export function ConversationList({ sessions = [], selected, groups, search, capt
                                    // 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 } = {}) {
-  const rowFor = (s, i) => 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 : ''),
-    'aria-selected': s.sid === selected ? 'true' : 'false',
-    onclick: () => onSelect && onSelect(s),
-    onkeydown: (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelect && onSelect(s); } },
-  },
-    // Positional children must NOT mix keyed VElements with null/strings (webjsx
-    // applyDiff crashes "reading 'key'"). Keep these unkeyed and filter nulls so
-    // each h() call gets a clean, consistent child list.
-    h('span', { class: 'ds-session-main' }, [
-      // Two-sided truncation: the CSS ellipsis is paired with a title= carrying
-      // the full string, so a long title/project is recoverable on hover.
-      h('span', { class: 'ds-session-title', title: s.title || s.project || s.sid || null }, s.title || s.project || s.sid || ''),
-      (s.project || s.time) ? h('span', { class: 'ds-session-sub', title: s.project || null },
-        [s.project, s.time].filter(Boolean).join(' · ')) : null,
-    ].filter(Boolean)),
-    h('span', { class: 'ds-session-meta' }, [
-      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)));
+                                   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)
@@ -126,9 +219,16 @@ export function ConversationList({ sessions = [], selected, groups, search, capt
     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).map(rowFor))));
+      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.map(rowFor);
+    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