anentrypoint-design 0.0.199 → 0.0.201

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.199",
+  "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,6 +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';
@@ -164,7 +178,16 @@ export function AgentChat(props = {}) {
         // container shape (.chat-md padding/spacing) the settled markdown will
         // use — only the inner content swaps on settle, so the bubble box does
         // not reflow/jump when the turn finishes and renders real markdown.
-        if (isStreaming && part.kind === 'md') parts.push({ kind: 'text', text: part.text, mdShell: true });
+        if (isStreaming && part.kind === 'md') {
+          // If the streaming prose contains a code fence, the inline renderer
+          // (which has no triple-backtick handling) would show it as run-on text
+          // with literal ``` and no monospace, then snap into a styled <pre> on
+          // settle (a visible reflow during the most-watched moment). Detect a
+          // fence and render the bubble as a cheap monospaced <pre> shell instead
+          // (no Prism mid-stream, so no O(n^2)) so it does not reflow on settle.
+          if (part.text && part.text.indexOf('```') !== -1) parts.push({ kind: 'text', text: part.text, mdShell: true, preShell: true });
+          else parts.push({ kind: 'text', text: part.text, mdShell: true });
+        }
         else parts.push(part);
       }
     }
@@ -181,15 +204,21 @@ export function AgentChat(props = {}) {
     let actions;
     if (!isStreaming && msgHasBody(m)) {
       const built = [];
-      if (onCopyMessage) built.push({ label: 'copy', icon: 'page', title: 'copy message', onClick: () => onCopyMessage(m) });
+      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({
       key: m.id || String(i),
       who: isAssistant ? 'them' : 'you',
       aicat: isAssistant,
+      // A stable per-agent product mark (host passes a small line-SVG via
+      // `avatar`) instead of a per-agent letter initial that shifts identity.
+      avatar: isAssistant ? (m.avatar != null ? m.avatar : avatar) : undefined,
       name: isAssistant ? name : 'you',
       time: m.time || '',
       typing: emptyStreaming,
@@ -210,8 +239,21 @@ export function AgentChat(props = {}) {
     onInput: (v) => onInput && onInput(v),
     onSend: (v) => onSend && onSend(v),
     onCancel: busy && onStop ? () => onStop() : undefined,
+    // The active target (agent / model / cwd-basename) at the point of typing.
+    context: composerContext,
   });
 
+  // Contextual follow-up chips below the last SETTLED assistant turn (claude.ai/
+  // code / cowork surface these after a turn, not only on an empty thread). Shown
+  // only when not busy and the last message is an assistant turn with body.
+  const followupRow = (!busy && followups && followups.length && lastMsg && lastMsg.role === 'assistant' && msgHasBody(lastMsg))
+    ? h('div', { class: 'agentchat-followups', role: 'group', 'aria-label': 'suggested follow-ups' },
+        ...followups.map((s, i) => h('button', {
+          key: 'fu' + i, type: 'button', class: 'agentchat-empty-suggestion agentchat-followup',
+          onclick: () => { const t = typeof s === 'string' ? s : (s.prompt || s.text || ''); if (onFollowupClick) onFollowupClick(t); else if (onSuggestionClick) onSuggestionClick(t); },
+        }, typeof s === 'string' ? s : (s.label || s.text || s.prompt))))
+    : null;
+
   // Empty state: a fresh thread is a void without this. Mirrors the kit's Chat
   // empty surface (title, sub, optional starter prompts) so AgentChat opens to
   // an invitation, not a blank panel.
@@ -226,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),
@@ -250,7 +320,8 @@ export function AgentChat(props = {}) {
           ? h('div', { key: '_working', class: 'agentchat-working', role: 'status', 'aria-live': 'polite' },
               h('span', { class: 'chat-thinking-dots', 'aria-hidden': 'true' }, h('span'), h('span'), h('span')),
               h('span', { class: 'agentchat-working-text' }, 'working…'))
-          : null),
+          : null,
+        followupRow),
       // Jump-to-latest: hidden until the scroll listener adds .show (user scrolled
       // up). Clicking returns to the live edge. Pure-DOM, like the kit's other
       // stateless chrome, so the host needn't thread scroll state through state.

package/src/components/chat.js

@@ -100,12 +100,44 @@ export function makeThreadAutoScroll(getCount) {
     };
 }
 
+// Inject a per-block copy button into every <pre> inside a rendered-markdown
+// container. claude.ai/code and Claude Desktop give EVERY fenced block a hover
+// copy affordance; the chat surface had only a whole-message copy. Idempotent:
+// marks each <pre> with data-copy-wired so re-renders don't stack buttons. The
+// button reveals on .chat-code-block:hover/:focus-within (CSS) and flips its
+// label copy -> copied for ~1.6s. Drawn with a real icon + word, no glyph.
+export function injectCodeCopy(container) {
+    if (!container) return;
+    container.querySelectorAll('pre').forEach((pre) => {
+        if (pre.dataset.copyWired === '1') return;
+        pre.dataset.copyWired = '1';
+        // Wrap the <pre> in a position:relative shell so the button can sit
+        // top-right without disturbing code layout.
+        const shell = document.createElement('div');
+        shell.className = 'chat-code-block';
+        pre.parentNode.insertBefore(shell, pre);
+        shell.appendChild(pre);
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'chat-code-copy';
+        btn.setAttribute('aria-label', 'copy code');
+        btn.textContent = 'copy';
+        btn.addEventListener('click', () => {
+            const code = pre.innerText;
+            const done = () => { btn.textContent = 'copied'; btn.classList.add('is-copied'); setTimeout(() => { btn.textContent = 'copy'; btn.classList.remove('is-copied'); }, 1600); };
+            if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(code).then(done).catch(() => {});
+            else { try { const t = document.createElement('textarea'); t.value = code; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t); done(); } catch {} }
+        });
+        shell.appendChild(btn);
+    });
+}
+
 function MdNode(p) {
     const refSink = (el) => {
         if (!el) return;
         if (el.dataset.mdSrc === p.text) return;
         el.dataset.mdSrc = p.text || '';
-        renderMarkdownCached(p.text || '').then((html) => { el.innerHTML = html; });
+        renderMarkdownCached(p.text || '').then((html) => { el.innerHTML = html; injectCodeCopy(el); });
     };
     return h('div', { class: 'chat-bubble chat-md', ref: refSink });
 }
@@ -121,10 +153,20 @@ function CodeNode(p) {
         el.dataset.codeKey = codeKey;
         highlightCodeBlockCached(el);
     };
+    // Copy the raw code (not the highlighted DOM) for the structured CodeNode.
+    const onCopy = (e) => {
+        const btn = e.currentTarget;
+        const code = p.code || '';
+        const done = () => { btn.textContent = 'copied'; btn.classList.add('is-copied'); setTimeout(() => { btn.textContent = 'copy'; btn.classList.remove('is-copied'); }, 1600); };
+        if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(code).then(done).catch(() => {});
+        else { try { const t = document.createElement('textarea'); t.value = code; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t); done(); } catch {} }
+    };
     return h('div', { class: 'chat-bubble chat-code', ref: refSink },
         h('div', { class: 'chat-code-head' },
             h('span', { class: 'lang' }, p.lang || 'code'),
-            p.filename ? h('span', { class: 'name' }, p.filename) : null
+            p.filename ? h('span', { class: 'name' }, p.filename) : null,
+            h('span', { class: 'spread' }),
+            h('button', { type: 'button', class: 'chat-code-copy chat-code-copy-head', 'aria-label': 'copy code', onclick: onCopy }, 'copy')
         ),
         h('pre', {}, h('code', { class: p.lang ? 'lang-' + p.lang + ' language-' + p.lang : '' }, p.code || ''))
     );
@@ -173,7 +215,12 @@ function ThinkingNode(p) {
 }
 
 const PART_RENDERERS = {
-    text:  (p) => h('div', { class: 'chat-bubble' + (p.mdShell ? ' chat-md' : '') }, ...renderInline(p.text || '')),
+    text:  (p) => p.preShell
+        // Streaming prose that already contains a code fence renders as a plain
+        // monospaced <pre> so it does not reflow from prose to a styled block on
+        // settle (no Prism mid-stream). The settled turn renders real markdown.
+        ? h('div', { class: 'chat-bubble chat-md chat-stream-pre' }, h('pre', {}, h('code', {}, p.text || '')))
+        : h('div', { class: 'chat-bubble' + (p.mdShell ? ' chat-md' : '') }, ...renderInline(p.text || '')),
     md:    (p) => MdNode(p),
     code:  (p) => CodeNode(p),
     tool:        (p) => ToolCallNode(p),
@@ -275,7 +322,8 @@ export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typ
                 key: 'ma' + i, type: 'button', class: 'chat-msg-action',
                 title: a.title || a.label, 'aria-label': a.label || a.title,
                 onclick: (e) => { e.preventDefault(); a.onClick && a.onClick(e); },
-            }, a.icon ? Icon(a.icon, { size: 14 }) : (a.label || ''))))
+            }, a.icon ? Icon(a.icon, { size: 14 }) : null,
+               a.label ? h('span', { class: 'chat-msg-action-label' }, a.label) : null)))
         : null;
     const stack = h('div', { class: 'chat-stack' }, ...bodyNodes, reactionRow, actionRow, meta);
     // Centered roles (system/tool/thinking) skip the avatar column entirely so
@@ -285,7 +333,7 @@ export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typ
     return h('div', { key, class: cls }, resolvedWho === 'you' ? stack : av, resolvedWho === 'you' ? av : stack);
 }
 
-export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu, onCancel, busy, placeholder = 'message…', disabled }) {
+export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu, onCancel, busy, placeholder = 'message…', disabled, context }) {
     // Keep a handle to the live textarea so send() reads the actual DOM value
     // (not the possibly-lagging `value` prop) and so we can sync the DOM value
     // only when it genuinely differs — re-applying `value` on every parent
@@ -320,7 +368,19 @@ export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu
         el.style.height = 'auto';
         el.style.height = Math.min(el.scrollHeight, 200) + 'px';
     };
+    // Optional context line shown above the textarea: agent / model / cwd at the
+    // point of typing (the way Claude-Desktop surfaces the active target inline).
+    // `context` is { bits:[...strings], onClick? }; bits are middot-joined (kept
+    // product separator). Clickable when onClick is wired (opens the picker).
+    const contextLine = (context && context.bits && context.bits.length)
+        ? h(context.onClick ? 'button' : 'div', {
+            class: 'chat-composer-context', type: context.onClick ? 'button' : null,
+            'aria-label': context.onClick ? ('change target: ' + context.bits.join(' · ')) : null,
+            onclick: context.onClick ? (e) => { e.preventDefault(); context.onClick(e); } : null,
+          }, context.bits.filter(Boolean).join(' · '))
+        : null;
     return h('div', { class: 'chat-composer' },
+        contextLine,
         h('textarea', { ref: taRef, placeholder, rows: 1, 'aria-label': 'message input',
             oninput: autoGrow,
             onkeydown: (e) => {

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.
@@ -33,6 +33,17 @@ 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 && !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'),
+            onSetCwd ? h('div', { class: 'ds-context-actions' }, Btn({ onClick: onSetCwd, children: 'set working dir' })) : null);
+    }
     // Each Panel's children array is all-unkeyed (no key prop on any sibling),
     // so webjsx never sees a mixed keyed/unkeyed array here.
     const panels = [
@@ -56,9 +67,17 @@ 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 (usage && (usage.inputTokens != null || usage.outputTokens != null || usage.costUsd != null)) {
+    if (hasUsage) {
         const tokRows = [];
         if (usage.inputTokens != null) tokRows.push(Row({ title: 'input', meta: fmtTok(usage.inputTokens) + ' tok' }));
         if (usage.outputTokens != null) tokRows.push(Row({ title: 'output', meta: fmtTok(usage.outputTokens) + ' tok' }));

package/src/components/files-modals.js

@@ -155,9 +155,24 @@ export function FilePreviewMedia({ src, type = 'other', name } = {}) {
     );
 }
 
-export function FilePreviewCode({ content = '', lang } = {}) {
-    return h('pre', { class: 'ds-preview-code' + (lang ? ' lang-' + lang : '') },
-        h('code', { class: lang ? 'language-' + lang : '' }, content)
+export function FilePreviewCode({ content = '', lang, filename } = {}) {
+    // A filename/lang header matching the chat CodeNode's .chat-code-head, plus
+    // the same copy control (chat A1/A2 ship this run, so preview matches for
+    // full cross-surface consistency).
+    const onCopy = (e) => {
+        const btn = e.currentTarget;
+        const done = () => { btn.textContent = 'copied'; btn.classList.add('is-copied'); setTimeout(() => { btn.textContent = 'copy'; btn.classList.remove('is-copied'); }, 1600); };
+        if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(content).then(done).catch(() => {});
+        else { try { const t = document.createElement('textarea'); t.value = content; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t); done(); } catch {} }
+    };
+    return h('div', { class: 'ds-preview-code-wrap' },
+        h('div', { class: 'chat-code-head ds-preview-code-head' },
+            h('span', { class: 'lang' }, lang || 'text'),
+            filename ? h('span', { class: 'name' }, filename) : null,
+            h('span', { class: 'spread' }),
+            h('button', { type: 'button', class: 'chat-code-copy chat-code-copy-head', 'aria-label': 'copy code', onclick: onCopy }, 'copy')),
+        h('pre', { class: 'ds-preview-code' + (lang ? ' lang-' + lang : '') },
+            h('code', { class: lang ? 'language-' + lang : '' }, content))
     );
 }
 
@@ -168,25 +183,62 @@ export function FilePreviewText({ content = '', truncated } = {}) {
     );
 }
 
-export function FileViewer({ file, body, onClose, onAction } = {}) {
-    if (!file) return null;
+// Shared preview-head children for both the modal FileViewer and the inline
+// FilePreviewPane: name + meta + prev/next stepper + download + close. ASCII
+// prev/next words (no glyph arrows). onPrev/onNext are omitted when there is no
+// previewable neighbour in that direction.
+function previewHead({ file, onClose, onAction, onPrev, onNext } = {}) {
     const meta = [file.type, file.size != null ? fmtFileSize(file.size) : null, file.modified || null]
         .filter(Boolean).join(' · ');
+    return [
+        h('span', { class: 'ds-preview-name', title: file.path || file.name || '' }, file.name || ''),
+        h('span', { class: 'ds-preview-meta' }, meta),
+        h('span', { class: 'ds-preview-actions' },
+            (onPrev || onNext) ? h('span', { class: 'ds-preview-step', role: 'group', 'aria-label': 'step files' },
+                h('button', { class: 'ds-file-act', title: 'previous file', 'aria-label': 'previous file', disabled: onPrev ? null : true, onclick: () => onPrev && onPrev() }, 'prev'),
+                h('button', { class: 'ds-file-act', title: 'next file', 'aria-label': 'next file', disabled: onNext ? null : true, onclick: () => onNext && onNext() }, 'next')) : null,
+            onAction ? h('button', { class: 'ds-file-act', title: 'download', 'aria-label': 'download', onclick: () => onAction('download') }, Icon('arrow-down')) : null,
+            onClose ? h('button', { class: 'ds-file-act', title: 'close', 'aria-label': 'close', onclick: onClose }, Icon('x')) : null
+        )
+    ];
+}
+
+// ArrowLeft/Right step the preview when focus is inside it (both pane + modal).
+function previewKeyNav(onPrev, onNext) {
+    return (e) => {
+        if (e.key === 'ArrowLeft' && onPrev) { e.preventDefault(); onPrev(); }
+        else if (e.key === 'ArrowRight' && onNext) { e.preventDefault(); onNext(); }
+    };
+}
+
+export function FileViewer({ file, body, onClose, onAction, onPrev, onNext } = {}) {
+    if (!file) return null;
     return Modal({
         onClose,
         kind: 'preview',
         headClass: 'ds-preview-head',
-        headAttrs: { 'data-file-type': file.type || 'other' },
-        head: [
-            h('span', { class: 'ds-preview-name' }, file.name || ''),
-            h('span', { class: 'ds-preview-meta' }, meta),
-            h('span', { class: 'ds-preview-actions' },
-                onAction ? h('button', { class: 'ds-file-act', title: 'download', 'aria-label': 'download', onclick: () => onAction('download') }, Icon('arrow-down')) : null,
-                h('button', { class: 'ds-file-act', title: 'close', 'aria-label': 'close', onclick: onClose }, Icon('x'))
-            )
-        ],
+        headAttrs: { 'data-file-type': file.type || 'other', onkeydown: previewKeyNav(onPrev, onNext) },
+        head: previewHead({ file, onClose, onAction, onPrev, onNext }),
         bodyClass: 'ds-preview-body',
         bodyAttrs: { 'data-file-type': file.type || 'other' },
         body: Array.isArray(body) ? body : [body],
     });
 }
+
+// FilePreviewPane — the SAME preview, but as a persistent, non-modal side pane
+// for the WorkspaceShell's pane slot (the split-view, claude-Desktop file-pane
+// feel). Distinct from the overlay FileViewer (kept as the <900px fallback).
+// Not focus-trapped (it is not modal); ArrowLeft/Right step files when focused.
+export function FilePreviewPane({ file, body, onClose, onAction, onPrev, onNext } = {}) {
+    if (!file) {
+        return h('div', { class: 'ds-preview-pane ds-preview-pane-empty', role: 'status' },
+            h('span', {}, 'Select a file to preview'));
+    }
+    return h('div', { class: 'ds-preview-pane', role: 'region', 'aria-label': 'file preview: ' + (file.name || ''),
+                      tabindex: '0', onkeydown: previewKeyNav(onPrev, onNext) },
+        h('div', { class: 'ds-preview-head', 'data-file-type': file.type || 'other' },
+            ...previewHead({ file, onClose, onAction, onPrev, onNext })),
+        h('div', { class: 'ds-preview-body', 'data-file-type': file.type || 'other' },
+            ...(Array.isArray(body) ? body : [body]))
+    );
+}