anentrypoint-design 0.0.200 → 0.0.201

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.200",
+  "version": "0.0.201",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/components/agent-chat.js

@@ -55,7 +55,7 @@ function scrollThreadToBottom(btn) {
 // The agent picker: agent-then-model, not a flat model list. Unavailable agents
 // are disabled (unless installable via npx). Ordering is the host's concern.
 function AgentControls({ agents, selectedAgent, models, selectedModel, busy, status, modelsLoading,
-                         onSelectAgent, onSelectModel, onNewChat, onStop }) {
+                         onSelectAgent, onSelectModel, onNewChat, onStop, exportActions }) {
   const agentOptions = (agents || []).map((a) => ({
     value: a.id,
     label: a.name + (a.available === false ? (a.npxInstallable ? ' (via npx)' : ' (not installed)') : ''),
@@ -85,6 +85,16 @@ function AgentControls({ agents, selectedAgent, models, selectedModel, busy, sta
     h('span', { key: 'st', class: 'agentchat-status', role: 'status', 'aria-live': 'polite' },
       h('span', { class: 'status-dot-disc ' + (busy ? 'status-dot-live' : ''), 'aria-hidden': 'true' }),
       h('span', {}, status || (busy ? 'streaming…' : 'ready'))),
+    // Host-supplied transcript actions (copy-all / export-md / export-json):
+    // small text-labeled buttons riding the same controls row. All siblings in
+    // this h(...) call are keyed VElements or null — never bare strings.
+    ...(exportActions && exportActions.length
+      ? exportActions.map((a, i) => h('button', {
+          key: 'exp' + i, type: 'button', class: 'agentchat-export-act',
+          title: a.title || a.label,
+          onclick: () => a.onClick && a.onClick(),
+        }, a.label))
+      : []),
   );
 }
 
@@ -124,8 +134,10 @@ export function AgentChat(props = {}) {
     canSend = true,
     suggestions = [], onSuggestionClick,
     onCopyMessage, onRetryMessage, onEditMessage,
+    confirmEdit = false, onArmEdit,
     avatar, composerContext,
     followups = [], onFollowupClick,
+    installHint, exportActions = [],
   } = props;
 
   const name = agentName || (agents.find((a) => a.id === selectedAgent)?.name) || selectedAgent || 'agent';
@@ -194,7 +206,10 @@ export function AgentChat(props = {}) {
       const built = [];
       if (onCopyMessage) built.push({ label: 'copy', icon: 'copy', title: 'copy message', onClick: () => onCopyMessage(m) });
       if (isAssistant && onRetryMessage && i === lastIdx) built.push({ label: 'retry', icon: 'refresh', title: 'retry this turn', onClick: () => onRetryMessage(m) });
-      if (!isAssistant && onEditMessage) built.push({ label: 'edit', icon: 'pencil', title: 'edit and resend', onClick: () => onEditMessage(m) });
+      // With confirmEdit the host arms its own confirm affordance (onArmEdit)
+      // instead of resending immediately; the kit stays stateless either way.
+      if (!isAssistant && onEditMessage) built.push({ label: 'edit', icon: 'pencil', title: 'edit and resend',
+        onClick: () => (confirmEdit && onArmEdit) ? onArmEdit(m) : onEditMessage(m) });
       if (built.length) actions = built;
     }
     return ChatMessage({
@@ -253,12 +268,40 @@ export function AgentChat(props = {}) {
                 key: 'sug' + i, type: 'button', class: 'agentchat-empty-suggestion',
                 onclick: () => { const t = typeof s === 'string' ? s : (s.prompt || s.text || ''); if (onSuggestionClick) onSuggestionClick(t); },
               }, typeof s === 'string' ? s : (s.label || s.text || s.prompt))))
+          : null,
+        // Guided install path for a brand-new user with zero installed agents:
+        // a plain copy line, a monospaced command per row (each with its own
+        // copy button, pure-DOM label flip like the code-block copy), and a
+        // recheck button so the user needn't reload after installing.
+        installHint
+          ? h('div', { class: 'agentchat-install', role: 'group', 'aria-label': 'install an agent' },
+              installHint.text ? h('p', { class: 'agentchat-install-text' }, installHint.text) : null,
+              (installHint.commands && installHint.commands.length)
+                ? h('ul', { class: 'agentchat-install-list' },
+                    ...installHint.commands.map((c, i) => h('li', { key: 'inst' + i, class: 'agentchat-install-row' },
+                      h('span', { class: 'agentchat-install-agent' }, c.agent),
+                      h('code', { class: 'agentchat-install-cmd' }, c.command),
+                      h('button', {
+                        type: 'button', class: 'agentchat-install-copy',
+                        'aria-label': 'copy install command for ' + c.agent, title: 'copy command',
+                        onclick: (e) => {
+                          const btn = e.currentTarget;
+                          navigator.clipboard && navigator.clipboard.writeText(c.command);
+                          btn.textContent = 'copied';
+                          setTimeout(() => { btn.textContent = 'copy'; }, 1200);
+                        },
+                      }, 'copy'))))
+                : null,
+              installHint.onRecheck
+                ? h('div', { class: 'agentchat-install-actions' },
+                    Btn({ onClick: () => installHint.onRecheck(), children: 'recheck agents', title: 'Re-check installed agents' }))
+                : null)
           : null)
     : null;
 
   return h('div', { class: 'agentchat' },
     AgentControls({ agents, selectedAgent, models, selectedModel, busy, status, modelsLoading,
-                    onSelectAgent, onSelectModel, onNewChat, onStop }),
+                    onSelectAgent, onSelectModel, onNewChat, onStop, exportActions }),
     CwdBar({ cwd, editing: cwdEditing, draft: cwdDraft,
              onEdit: onCwdEdit, onSave: onCwdSave, onCancel: onCwdCancel, onClear: onCwdClear, onDraft: onCwdDraft }),
     ...(banners || []).filter(Boolean),

package/src/components/content.js

@@ -6,9 +6,9 @@ import * as webjsx from '../../vendor/webjsx/index.js';
 import { Btn, Heading, Lede, Dot, Icon } from './shell.js';
 const h = webjsx.createElement;
 
-export function Panel({ title, count, right, style = '', children, kind }) {
+export function Panel({ title, count, right, style = '', children, kind, id }) {
     const cls = 'panel' + (kind ? ' panel-' + kind : '');
-    return h('div', { class: cls, style },
+    return h('div', { class: cls, style, id: id || null },
         title != null ? h('div', { class: 'panel-head' },
             h('span', {}, title),
             right != null ? right : (count != null ? h('span', {}, String(count)) : null)
@@ -20,7 +20,30 @@ export function Panel({ title, count, right, style = '', children, kind }) {
 // Card — semantic alias of Panel; behaves identically.
 export const Card = Panel;
 
-export function Row({ code, rank, title, sub, meta, active, state = 'default', onClick, key, style, href, kind, cols, leading, trailing, target, selected, rail, expanded }) {
+// Split a title string around case-insensitive matches of `highlight`, wrapping
+// hits in <mark class="ds-hl">. Every segment is a keyed span so the children
+// array never mixes keyed VElements with bare strings (webjsx applyDiff crashes
+// on mixed keying).
+function highlightTitle(title, highlight) {
+    const text = String(title);
+    const needle = String(highlight).toLowerCase();
+    if (!needle) return text;
+    const lower = text.toLowerCase();
+    const segs = [];
+    let pos = 0, n = 0;
+    while (pos <= text.length) {
+        const hit = lower.indexOf(needle, pos);
+        if (hit === -1) break;
+        if (hit > pos) segs.push(h('span', { key: 'hs' + n++ }, text.slice(pos, hit)));
+        segs.push(h('mark', { key: 'hs' + n++, class: 'ds-hl' }, text.slice(hit, hit + needle.length)));
+        pos = hit + needle.length;
+    }
+    if (!segs.length) return text;
+    if (pos < text.length) segs.push(h('span', { key: 'hs' + n++ }, text.slice(pos)));
+    return segs;
+}
+
+export function Row({ code, rank, title, sub, meta, active, state = 'default', onClick, key, style, href, kind, cols, leading, trailing, target, selected, rail, expanded, highlight, actions }) {
     // `rank` is an alias for `code` (the leading monospace index); callers use
     // either name. `rail` renders a thin colour bar at the row's leading edge as
     // a status indicator (tone: green | purple | flame | <any token>).
@@ -52,10 +75,32 @@ export function Row({ code, rank, title, sub, meta, active, state = 'default', o
     }
     if (isDisabled) props['aria-disabled'] = 'true';
     if (isActive && (isLink || isButton)) props['aria-current'] = isActive ? 'page' : null;
+    // `highlight` wraps case-insensitive matches in the title in <mark class="ds-hl">.
+    // The segments live inside a single wrapper span so the title's child list
+    // never mixes keyed and unkeyed siblings.
+    const titleNode = (highlight && typeof title === 'string')
+        ? h('span', {}, ...[].concat(highlightTitle(title, highlight)))
+        : title;
+    // `actions` render ONLY when the row is expanded, as a sibling action strip
+    // inside the row container; each button stops propagation so it never fires
+    // the row onClick.
+    const actionRow = (expanded === true && Array.isArray(actions) && actions.length)
+        ? h('span', { class: 'row-actions', role: 'group', 'aria-label': 'row actions' },
+            ...actions.map((a, i) => h('button', {
+                key: 'ract' + i,
+                type: 'button',
+                class: 'row-act',
+                title: a.title || a.label,
+                'aria-label': a.title || a.label,
+                onclick: (e) => { e.stopPropagation(); a.onClick && a.onClick(e); },
+                onkeydown: (e) => { e.stopPropagation(); },
+            }, a.label)))
+        : null;
     return h(isLink ? 'a' : 'div', props,
         leading != null ? leading : (codeVal != null ? h('span', { class: 'code' }, codeVal) : null),
-        h('span', { class: 'title' }, title, sub ? h('span', { class: 'sub' }, sub) : null),
-        trailing != null ? trailing : (meta != null ? h('span', { class: 'meta' }, meta) : null));
+        h('span', { class: 'title' }, titleNode, sub ? h('span', { class: 'sub' }, sub) : null),
+        trailing != null ? trailing : (meta != null ? h('span', { class: 'meta' }, meta) : null),
+        actionRow);
 }
 
 export function RowLink({ code, title, sub, meta, href = '#', key, target }) {
@@ -253,11 +298,12 @@ export function ProjectView({ project = {}, copied, onCopy } = {}) {
     ].filter(Boolean).flat();
 }
 
-export function PageHeader({ title, lede, eyebrow, right, compact }) {
+export function PageHeader({ title, lede, eyebrow, right, compact, id }) {
     // `compact` drops the large leading/trailing section margins so a PageHeader
     // used as a page's first element top-aligns cleanly without the consumer
-    // having to !important-override the .ds-section margin.
-    return h('section', { class: 'ds-section' + (compact ? ' ds-section-compact' : '') },
+    // having to !important-override the .ds-section margin. `id` lands on the
+    // outermost section so the header can serve as a deep-link anchor.
+    return h('section', { class: 'ds-section' + (compact ? ' ds-section-compact' : ''), id: id || null },
         eyebrow ? h('span', { class: 'eyebrow' }, eyebrow) : null,
         title != null ? h('h1', {}, title) : null,
         lede != null ? h('p', { class: 'lede' }, lede) : null,
@@ -409,6 +455,21 @@ export function Skeleton({ height = '1em', width = '100%', count = 1, label = 'l
     );
 }
 
+// FilterPills — a role=group of pill toggle buttons for quick category filters.
+// `options` is [{ id, label }]; `selected` the active id; clicking a pill calls
+// onSelect(id). Pressed state is announced via aria-pressed.
+export function FilterPills({ options = [], selected, onSelect, label = 'filters' } = {}) {
+    if (!options.length) return null;
+    return h('div', { class: 'ds-filter-pills', role: 'group', 'aria-label': label },
+        ...options.map((o) => h('button', {
+            key: 'fp-' + o.id,
+            type: 'button',
+            class: 'ds-filter-pill' + (o.id === selected ? ' active' : ''),
+            'aria-pressed': o.id === selected ? 'true' : 'false',
+            onclick: () => onSelect && onSelect(o.id),
+        }, o.label != null ? o.label : o.id)));
+}
+
 export function Alert({ kind = 'info', children, onDismiss, title, key } = {}) {
     const icons = { info: 'info', success: 'check', warn: 'warn', error: 'x' };
     const cls = 'ds-alert ds-alert-' + kind;

package/src/components/context-pane.js

@@ -13,7 +13,7 @@
 //   cwd       : the chat working directory (string) or falsy for server default
 //   toolCount : number of tool calls running in the current live turn (>=0)
 //   usage     : OPTIONAL last-turn usage { inputTokens, outputTokens, costUsd, turns, durationMs }
-//   session   : OPTIONAL session metadata { id, messages, startedAt } shown as a block
+//   session   : OPTIONAL whole-conversation totals { turns, cost } shown as a block
 //   onSetCwd  : optional callback for the "set working directory" affordance
 //
 // No decorative glyphs — words + the kit's Icon SVGs only.
@@ -34,10 +34,11 @@ function fmtTok(n) {
 export function ContextPane({ agent, model, cwd, toolCount = 0, usage, session, onSetCwd } = {}) {
     const running = Number(toolCount) > 0;
     const hasUsage = usage && (usage.inputTokens != null || usage.outputTokens != null || usage.costUsd != null);
+    const hasSession = session && (session.turns != null || session.cost != null);
     // Empty state: before an agent is picked AND with no usage/session, four
     // placeholder rows (agent: none / model: dash / ...) read as a dead panel.
     // Show one honest line instead.
-    if (!agent && !hasUsage && !session && !cwd) {
+    if (!agent && !hasUsage && !hasSession && !cwd) {
         return h('div', { class: 'ds-context' },
             h('div', { class: 'ds-context-empty', role: 'status' },
                 'No active conversation — start a chat to see context here'),
@@ -66,6 +67,14 @@ export function ContextPane({ agent, model, cwd, toolCount = 0, usage, session,
             ],
         }),
     ];
+    // Conversation block: whole-session totals (turn count + accumulated cost)
+    // between the context panel and the per-turn usage panel.
+    if (hasSession) {
+        const sesRows = [];
+        if (session.turns != null) sesRows.push(Row({ title: 'turns', meta: String(session.turns) }));
+        if (session.cost != null) sesRows.push(Row({ title: 'total cost', meta: '$' + Number(session.cost).toFixed(4) }));
+        panels.push(Panel({ title: 'conversation', children: sesRows }));
+    }
     // Usage block: surface the last turn's token/cost/turn/duration so the
     // result event is no longer silently dropped.
     if (hasUsage) {

package/src/components/files.js

@@ -43,7 +43,12 @@ export function FileIcon({ type = 'other' } = {}) {
     return h('span', { class: 'ds-file-icon', 'data-file-type': type, 'aria-label': TYPE_LABELS[type] || 'file', role: 'img' }, Icon(fileGlyph(type)));
 }
 
-export function FileRow({ name, type = 'other', size, modified, code, onOpen, onAction, active, key, permissions, locked } = {}) {
+// Default action set for FileRow. A host without mutation endpoints passes a
+// narrower `actions` list (e.g. ['download']) so the row renders no dead controls.
+const FILE_ROW_ACTIONS = ['download', 'rename', 'delete'];
+
+export function FileRow({ name, type = 'other', size, modified, code, onOpen, onAction, active, key, permissions, locked,
+                          actions = FILE_ROW_ACTIONS, busy = false } = {}) {
     // permissions: ['read','write'] | ['read'] | 'EACCES'. A no-access entry can
     // be listed (the dir stat saw it) but not opened — show an ASCII tag and
     // disable the open button so the row reads honestly instead of silently
@@ -54,7 +59,29 @@ export function FileRow({ name, type = 'other', size, modified, code, onOpen, on
     const meta = [type === 'dir' ? null : fmtFileSize(size), modified || null, permTag].filter(Boolean).join(' · ');
     const typeLabel = TYPE_LABELS[type] || 'file';
     const accessibleLabel = `${typeLabel}: ${name}${meta ? ` (${meta})` : ''}`;
-    const canOpen = onOpen && !noAccess;
+    const canOpen = onOpen && !noAccess && !busy;
+    // Mutation actions on a read-only/no-access row render disabled (with a
+    // 'read-only' title) instead of vanishing, so the affordance reads honestly.
+    // `busy` (in-flight mutation) disables every control on the row.
+    const mutateDisabled = busy || readOnly || noAccess;
+    const actBtn = (act, title, ariaLabel, icon, warn) => h('button', {
+        key: 'act-' + act,
+        type: 'button',
+        class: 'ds-file-act' + (warn ? ' ds-file-act-warn' : ''),
+        title: mutateDisabled && act !== 'download' ? 'read-only' : title,
+        'aria-label': ariaLabel,
+        disabled: (act === 'download' ? busy : mutateDisabled) ? true : null,
+        'aria-disabled': (act === 'download' ? busy : mutateDisabled) ? 'true' : null,
+        onclick: () => onAction(act),
+    }, Icon(icon));
+    const actionBtns = onAction ? [
+        actions.indexOf('download') !== -1 && type !== 'dir'
+            ? actBtn('download', 'download', `download ${name}`, 'arrow-down', false) : null,
+        actions.indexOf('rename') !== -1
+            ? actBtn('rename', 'rename', `rename ${name}`, 'pencil', false) : null,
+        actions.indexOf('delete') !== -1
+            ? actBtn('delete', 'delete', `delete ${name}`, 'x', true) : null,
+    ].filter(Boolean) : [];
     // A role=button row containing real <button> action controls is invalid
     // HTML (interactive nesting). Instead the row is a plain container and the
     // primary "open" affordance is itself a real <button> (native keyboard +
@@ -63,6 +90,7 @@ export function FileRow({ name, type = 'other', size, modified, code, onOpen, on
         key,
         class: 'ds-file-row row' + (active ? ' active' : '') + (noAccess ? ' is-locked' : ''),
         'data-file-type': type,
+        'aria-busy': busy ? 'true' : null,
     },
         h('button', {
             type: 'button',
@@ -77,10 +105,8 @@ export function FileRow({ name, type = 'other', size, modified, code, onOpen, on
             h('span', { class: 'title' }, name),
             h('span', { class: 'ds-file-meta meta', 'aria-label': meta ? `metadata: ${meta}` : null }, meta || '—')
         ),
-        onAction ? h('span', { class: 'ds-file-actions', role: 'group', 'aria-label': `actions for ${name}` },
-            h('button', { class: 'ds-file-act', title: 'download', 'aria-label': `download ${name}`, onclick: () => onAction('download') }, Icon('arrow-down')),
-            h('button', { class: 'ds-file-act', title: 'rename', 'aria-label': `rename ${name}`, onclick: () => onAction('rename') }, Icon('pencil')),
-            h('button', { class: 'ds-file-act ds-file-act-warn', title: 'delete', 'aria-label': `delete ${name}`, onclick: () => onAction('delete') }, Icon('x'))
+        actionBtns.length ? h('span', { class: 'ds-file-actions', role: 'group', 'aria-label': `actions for ${name}` },
+            ...actionBtns
         ) : null
     );
 }
@@ -133,7 +159,7 @@ const FILE_GRID_CAP = 200;
 
 export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'No files here yet',
                           columns = 'auto', sort, filter, loading = false,
-                          shown, onShowMore } = {}) {
+                          shown, onShowMore, actions, busy } = {}) {
     if (loading) return FileSkeleton({});
     if (!files.length) return EmptyState({ text: emptyText });
     // Cap the rendered rows. `shown` (host-controlled) overrides the default cap
@@ -179,6 +205,8 @@ export function FileGrid({ files = [], onOpen, onAction, onUp, emptyText = 'No f
             key: f.path || f.name + i,
             name: f.name, type: f.type, size: f.size, modified: f.modified, code: f.code, active: f.active,
             permissions: f.permissions, locked: f.locked,
+            actions: actions != null ? actions : undefined,
+            busy: busy != null ? !!busy : !!f.busy,
             onOpen: onOpen ? () => onOpen(f) : null,
             onAction: onAction ? (act) => onAction(act, f) : null
         }))

package/src/components/sessions.js

@@ -21,7 +21,8 @@ const h = webjsx.createElement;
 //   emptyText, loading, error  : explicit states
 export function ConversationList({ sessions = [], selected, groups, search, caption,
                                    onSelect, onNew, newLabel = 'New chat',
-                                   emptyText = 'No conversations yet', loading = false, error = null } = {}) {
+                                   emptyText = 'No conversations yet', loading = false, error = null,
+                                   loadingText = 'Loading conversations…' } = {}) {
   const rowFor = (s, i) => h('button', {
     // Stable key: prefer sid, else position - a missing/duplicate sid would make
     // key undefined and crash webjsx applyDiff ("reading 'key'" of undefined).
@@ -53,7 +54,7 @@ export function ConversationList({ sessions = [], selected, groups, search, capt
   // are uniformly keyed; non-row states render a single unkeyed status line.
   let inner;
   if (loading) {
-    inner = [h('div', { key: 'st', class: 'ds-session-state', role: 'status', 'aria-live': 'polite' }, 'Loading conversations…')];
+    inner = [h('div', { key: 'st', class: 'ds-session-state', role: 'status', 'aria-live': 'polite' }, loadingText)];
   } else if (error) {
     inner = [h('div', { key: 'st', class: 'ds-session-state ds-session-state-error', role: 'status' }, String(error))];
   } else if (!sessions.length) {
@@ -85,6 +86,30 @@ export function ConversationList({ sessions = [], selected, groups, search, capt
     body);
 }
 
+// SessionMeta — a middot-separated metadata strip for a session detail surface.
+//   items : [{ label, value, title, onCopy }]
+// Each item is a span (label dimmed, value mono) with an optional per-item copy
+// button; the strip flex-wraps at narrow widths. Class is .ds-session-meta-strip
+// (the bare .ds-session-meta is already taken by ConversationList row meta).
+export function SessionMeta({ items = [] } = {}) {
+  if (!items.length) return null;
+  return h('div', { class: 'ds-session-meta-strip', role: 'group', 'aria-label': 'session metadata' },
+    ...items.map((it, i) => h('span', {
+      key: 'sm-' + (it.label != null ? it.label : i),
+      class: 'ds-session-meta-item',
+      title: it.title || null,
+    },
+      [
+        it.label != null ? h('span', { key: 'l', class: 'ds-session-meta-label' }, it.label) : null,
+        h('span', { key: 'v', class: 'ds-session-meta-value' }, it.value != null ? String(it.value) : ''),
+        it.onCopy ? h('button', {
+          key: 'c', type: 'button', class: 'ds-session-meta-copy',
+          'aria-label': 'copy ' + (it.title || it.label || 'value'),
+          onclick: () => it.onCopy(it.value),
+        }, 'copy') : null,
+      ].filter(Boolean))));
+}
+
 // SessionCard — one running session in the live dashboard. Status dot, agent /
 // model / cwd, elapsed, live counter, last activity, and per-session controls
 // that each act on this session's id independently.
@@ -154,7 +179,14 @@ export function SessionCard({ session = {}, onStop, onOpen, onView, active = fal
 // still tells the user the dashboard is listening (vs a dropped stream).
 const STREAM_WORD = { connected: 'listening for activity', connecting: 'connecting to live stream…', lost: 'live stream lost — retrying…' };
 
+// The stop-all / stop-selected danger buttons are two-step (host-driven, the kit
+// is stateless): the first click fires onArmStop* so the host flips confirming*
+// true and re-renders; the armed button reads 'stop N sessions - press again'
+// and only THAT click fires the real onStopAll/onStopSelected. Hosts that wire
+// no onArmStop* keep the old single-click behavior.
 export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStopAll, onStopSelected,
+                                   confirmingStopAll = false, confirmingStopSelected = false,
+                                   onArmStopAll, onArmStopSelected,
                                    sort, filter, errorsOnly = false, onErrorsOnly,
                                    selectable = false, selected, onToggleSelect,
                                    activeSid, streamState,
@@ -194,8 +226,16 @@ export function SessionDashboard({ sessions = [], onStop, onOpen, onView, onStop
     streamLine,
     h('span', { class: 'spread' }),
     selectable && selCount && onStopSelected
-      ? Btn({ key: 'stopsel', danger: true, onClick: () => onStopSelected([...selSet]), children: 'stop selected' })
-      : (onStopAll ? Btn({ key: 'stopall', danger: true, onClick: () => onStopAll(sessions), children: 'stop all' }) : null),
+      ? (onArmStopSelected && !confirmingStopSelected
+          ? Btn({ key: 'stopsel', danger: true, onClick: () => onArmStopSelected([...selSet]), children: 'stop selected' })
+          : Btn({ key: 'stopsel', danger: true, onClick: () => onStopSelected([...selSet]),
+                  children: confirmingStopSelected ? 'stop ' + selCount + ' sessions - press again' : 'stop selected' }))
+      : (onStopAll
+          ? (onArmStopAll && !confirmingStopAll
+              ? Btn({ key: 'stopall', danger: true, onClick: () => onArmStopAll(sessions), children: 'stop all' })
+              : Btn({ key: 'stopall', danger: true, onClick: () => onStopAll(sessions),
+                      children: confirmingStopAll ? 'stop ' + sessions.length + ' sessions - press again' : 'stop all' }))
+          : null),
     toolbar);
   const grid = h('div', { class: 'ds-dash-grid', role: 'list', 'aria-label': 'live sessions' },
     ...sessions.map((s) => h('div', { key: s.sid, role: 'listitem' },

package/src/components.js

@@ -16,7 +16,7 @@ export {
     WorksList, WritingList, Manifesto, Section, PageHeader,
     Kpi, Table, SearchInput, TextField, Select, EventList,
     HomeView, ProjectView, Form,
-    Spinner, Skeleton, Alert
+    Spinner, Skeleton, Alert, FilterPills
 } from './components/content.js';
 
 export {
@@ -28,7 +28,7 @@ export {
 export { AgentChat } from './components/agent-chat.js';
 
 export {
-    ConversationList, SessionCard, SessionDashboard
+    ConversationList, SessionCard, SessionDashboard, SessionMeta
 } from './components/sessions.js';
 
 export { ContextPane } from './components/context-pane.js';