anentrypoint-design 0.0.201 → 0.0.203

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.201",
+  "version": "0.0.203",
   "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

@@ -28,6 +28,14 @@ const baseAutoScroll = (msgCount) => makeThreadAutoScroll(() => msgCount);
 // the bottom (the IntersectionObserver gate), so reading back-history is no
 // longer fought; the button is the explicit way back to the live edge.
 const NEAR_BOTTOM_PX = 80;
+
+// Thread window: how many trailing turns render by default (hosts override via
+// shownMessages; grow with onShowEarlier).
+export const MESSAGE_CAP = 100;
+// A single streaming message beyond this many chars renders only a tail window
+// per frame (O(tail), not O(turn)); the settled turn renders full markdown once.
+const STREAM_TAIL_THRESHOLD = 20000;
+const STREAM_TAIL_WINDOW = 4000;
 const threadRef = (msgCount) => {
   const auto = baseAutoScroll(msgCount);
   return (el) => {
@@ -99,14 +107,22 @@ function AgentControls({ agents, selectedAgent, models, selectedModel, busy, sta
 }
 
 // A working-directory bar: shows where the agent will run, editable + clearable.
-function CwdBar({ cwd, editing, draft, onEdit, onSave, onCancel, onClear, onDraft }) {
+// `error`/`checking` give inline validation feedback while typing/blur (the host
+// debounces its /api/stat probe and sets these): a plain-language line renders
+// under the input (aria-describedby) and save stays disabled while either is set.
+function CwdBar({ cwd, editing, draft, onEdit, onSave, onCancel, onClear, onDraft, error, checking }) {
   if (editing) {
+    const hint = checking ? 'checking…' : (error || null);
     return h('div', { class: 'agentchat-cwd agentchat-cwd-editing', role: 'group', 'aria-label': 'Set working directory' },
       h('input', { class: 'agentchat-cwd-input', type: 'text', value: draft ?? cwd ?? '',
         placeholder: 'absolute path (blank = server default)',
+        'aria-describedby': hint ? 'agentchat-cwd-hint' : null,
+        'aria-invalid': error ? 'true' : null,
         oninput: (e) => onDraft && onDraft(e.target.value) }),
-      Btn({ key: 'save', primary: true, onClick: () => onSave && onSave(), children: 'save' }),
-      Btn({ key: 'cancel', onClick: () => onCancel && onCancel(), children: 'cancel' }));
+      Btn({ key: 'save', primary: true, disabled: !!(error || checking), onClick: () => onSave && onSave(), children: 'save' }),
+      Btn({ key: 'cancel', onClick: () => onCancel && onCancel(), children: 'cancel' }),
+      hint ? h('span', { key: 'hint', id: 'agentchat-cwd-hint', role: 'status', 'aria-live': 'polite',
+        class: 'agentchat-cwd-hint' + (error ? ' is-error' : ' is-checking') }, hint) : null);
   }
   return h('div', { class: 'agentchat-cwd', role: 'group', 'aria-label': 'Working directory' },
     h('span', { class: 'agentchat-cwd-text', title: cwd || 'server default working directory' },
@@ -127,7 +143,7 @@ export function AgentChat(props = {}) {
   const {
     agents = [], selectedAgent = '', models = [], selectedModel = '', modelsLoading = false,
     messages = [], busy = false, draft = '', status, banners = [],
-    cwd = '', cwdEditing = false, cwdDraft,
+    cwd = '', cwdEditing = false, cwdDraft, cwdError, cwdChecking = false,
     agentName, placeholder,
     onSelectAgent, onSelectModel, onSend, onStop, onNewChat, onInput,
     onCwdEdit, onCwdSave, onCwdCancel, onCwdClear, onCwdDraft,
@@ -138,11 +154,20 @@ export function AgentChat(props = {}) {
     avatar, composerContext,
     followups = [], onFollowupClick,
     installHint, exportActions = [],
+    onPasteFiles, onDropFiles,
+    shownMessages, onShowEarlier,
   } = props;
 
   const name = agentName || (agents.find((a) => a.id === selectedAgent)?.name) || selectedAgent || 'agent';
   const lastIdx = messages.length - 1;
   const lastMsg = messages[lastIdx];
+  // Windowed thread render (mirrors FileGrid's cap): only the last `limit`
+  // turns build vnodes each frame; a keyed 'show N earlier turns' row at the
+  // top grows the window via onShowEarlier (host keeps state.chat.shownMessages
+  // and resets it on newChat/loadSession). A 500-turn conversation no longer
+  // rebuilds 500 ChatMessage vnodes per streaming rAF tick.
+  const msgLimit = shownMessages != null ? shownMessages : MESSAGE_CAP;
+  const msgStart = Math.max(0, messages.length - msgLimit);
   // True when streaming but the live assistant turn already shows content/parts,
   // so its inline typing dots have stopped — a long silent tool call would
   // otherwise read as frozen. We append a standalone "working" indicator below.
@@ -151,7 +176,8 @@ export function AgentChat(props = {}) {
   // so an interleaved turn (parts-only, no m.content) is not treated as empty.
   const msgHasBody = (m) => !!(m.content || (Array.isArray(m.parts) && m.parts.length));
   const showWorkingTail = busy && lastMsg && lastMsg.role === 'assistant' && msgHasBody(lastMsg);
-  const rows = messages.map((m, i) => {
+  const rows = messages.slice(msgStart).map((m, wi) => {
+    const i = wi + msgStart; // absolute index — streaming/caret/actions logic keys off the real lastIdx
     const isAssistant = m.role === 'assistant';
     const isStreaming = busy && i === lastIdx && isAssistant;
     const hasParts = Array.isArray(m.parts) && m.parts.length > 0;
@@ -179,6 +205,17 @@ export function AgentChat(props = {}) {
         // 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') {
+          const txt = part.text || '';
+          // Giant streamed block: re-rendering the whole accumulated string per
+          // rAF is O(n^2) across the turn. Past the threshold, render a preShell
+          // bubble with a 'streaming · N KB so far' head plus only the last
+          // STREAM_TAIL_WINDOW chars; full markdown renders once on settle.
+          if (txt.length > STREAM_TAIL_THRESHOLD) {
+            parts.push({ kind: 'text', mdShell: true, preShell: true,
+              text: txt.slice(-STREAM_TAIL_WINDOW),
+              streamHead: 'streaming · ' + Math.round(txt.length / 1024) + ' KB so far' });
+            continue;
+          }
           // 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
@@ -224,9 +261,24 @@ export function AgentChat(props = {}) {
       typing: emptyStreaming,
       streaming,
       actions,
+      // Out-of-band notices (plain copy, neutral tone): m.stopped marks a
+      // cancelled turn; m.incomplete marks a turn whose stream dropped without
+      // replay. Retry rides the existing actions row.
+      stopped: m.stopped,
+      incomplete: m.incomplete,
       parts: emptyStreaming ? undefined : (parts.length ? parts : [{ kind: 'text', text: '' }]),
     });
   });
+  // Keyed 'show N earlier turns' control at the top of the window. A keyed
+  // VElement like every row sibling (webjsx keying discipline).
+  const earlierRow = msgStart > 0
+    ? h('div', { key: '_earlier', class: 'agentchat-earlier' },
+        h('span', { class: 'agentchat-earlier-count', role: 'status', 'aria-live': 'polite' },
+          'showing ' + (messages.length - msgStart) + ' of ' + messages.length + ' turns'),
+        onShowEarlier ? h('button', { type: 'button', class: 'agentchat-earlier-btn',
+          onclick: () => onShowEarlier(Math.min(messages.length, msgLimit + MESSAGE_CAP)) },
+          'show ' + Math.min(MESSAGE_CAP, msgStart) + ' earlier turns') : null)
+    : null;
 
   // While streaming, the composer's send button becomes an inline stop button
   // (busy + onCancel) so the user can halt the turn from where their hands
@@ -241,6 +293,11 @@ export function AgentChat(props = {}) {
     onCancel: busy && onStop ? () => onStop() : undefined,
     // The active target (agent / model / cwd-basename) at the point of typing.
     context: composerContext,
+    // Paste/drop file intents (image paste, file drop) — host-wired; the
+    // composer itself always preventDefaults the drop so the browser never
+    // navigates away from a live session.
+    onPasteFiles,
+    onDropFiles,
   });
 
   // Contextual follow-up chips below the last SETTLED assistant turn (claude.ai/
@@ -302,7 +359,7 @@ export function AgentChat(props = {}) {
   return h('div', { class: 'agentchat' },
     AgentControls({ agents, selectedAgent, models, selectedModel, busy, status, modelsLoading,
                     onSelectAgent, onSelectModel, onNewChat, onStop, exportActions }),
-    CwdBar({ cwd, editing: cwdEditing, draft: cwdDraft,
+    CwdBar({ cwd, editing: cwdEditing, draft: cwdDraft, error: cwdError, checking: cwdChecking,
              onEdit: onCwdEdit, onSave: onCwdSave, onCancel: onCwdCancel, onClear: onCwdClear, onDraft: onCwdDraft }),
     ...(banners || []).filter(Boolean),
     h('div', { class: 'agentchat-head', role: 'banner' },
@@ -315,6 +372,7 @@ export function AgentChat(props = {}) {
     h('div', { class: 'agentchat-thread-wrap' },
       h('div', { class: 'agentchat-thread', ref: threadRef(messages.length), role: 'log', 'aria-label': 'conversation' },
         emptyState,
+        earlierRow,
         ...rows.filter(Boolean),
         showWorkingTail
           ? h('div', { key: '_working', class: 'agentchat-working', role: 'status', 'aria-live': 'polite' },

package/src/components/chat.js

@@ -4,20 +4,19 @@
 
 import * as webjsx from '../../vendor/webjsx/index.js';
 import { renderMarkdownCached, highlightCodeBlockCached, initializeCachesEagerly, getCacheStats } from '../markdown-cache.js';
+import { isDegraded as isMarkdownDegraded } from '../markdown.js';
 import { register } from '../debug.js';
 import { Icon } from './shell.js';
+import { fmtFileSize } from './files.js';
 
 const h = webjsx.createElement;
 let _stats = { messages: 0, lastKindCounts: {} };
 let _cacheInitialized = false;
 
-export function fmtBytes(n) {
-    if (n == null) return '';
-    if (n < 1024) return n + ' B';
-    if (n < 1024 * 1024) return (n / 1024).toFixed(1) + ' KB';
-    if (n < 1024 * 1024 * 1024) return (n / (1024 * 1024)).toFixed(1) + ' MB';
-    return (n / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
-}
+// ONE byte format across the kit: fmtFileSize (files.js) is canonical; the old
+// divergent fmtBytes ('0.0 KB' for zero, no B tier) is gone — this alias keeps
+// existing imports working while rendering the same string as the Files grid.
+export const fmtBytes = fmtFileSize;
 
 // Reject dangerous URL schemes (javascript:, data:, vbscript:, file:) so an
 // inline markdown link or an image src built from untrusted text can't smuggle a
@@ -73,10 +72,21 @@ function ensureCachesInit() {
     initializeCachesEagerly().catch((err) => console.warn('[247420] cache init error:', err));
 }
 
+// True when the user has a non-collapsed text selection anchored inside `el`.
+// Used to pause auto-scroll (and by hosts to pause streaming re-renders) so
+// select-and-copy from a still-streaming message is not wiped every frame.
+export function hasSelectionInside(el) {
+    const sel = typeof document !== 'undefined' && document.getSelection ? document.getSelection() : null;
+    return !!(sel && !sel.isCollapsed && sel.anchorNode && el && el.contains(sel.anchorNode));
+}
+
 // Build a ref callback that keeps a scroll container pinned to the bottom when
 // new messages arrive AND the user is already at the bottom (sentinel visible).
 // `getCount` returns the current message count so the observer compares against
 // live state. Shared by Chat, AICat, and AgentChat.
+// CONTRACT: auto-scroll pauses while the user holds a non-collapsed selection
+// inside the thread (hasSelectionInside) — the same guard hosts apply to their
+// streaming re-render pass — and resumes once the selection collapses.
 export function makeThreadAutoScroll(getCount) {
     return (el) => {
         if (!el) return;
@@ -88,6 +98,7 @@ export function makeThreadAutoScroll(getCount) {
             el.appendChild(sentinel);
         }
         const obs = new IntersectionObserver((entries) => {
+            if (hasSelectionInside(el)) return; // don't fight an active selection
             const count = String(getCount());
             if (entries[0]?.isIntersecting && el.dataset.msgCount !== count) {
                 el.scrollTop = el.scrollHeight - el.clientHeight;
@@ -135,8 +146,12 @@ export function injectCodeCopy(container) {
 function MdNode(p) {
     const refSink = (el) => {
         if (!el) return;
-        if (el.dataset.mdSrc === p.text) return;
-        el.dataset.mdSrc = p.text || '';
+        // Version the per-element source key with a degraded marker: a bubble
+        // rendered while the markdown loader was down re-renders (real markdown)
+        // once the loader recovers, instead of staying plain-escaped forever.
+        const srcKey = (isMarkdownDegraded() ? '~degraded~' : '') + (p.text || '');
+        if (el.dataset.mdSrc === srcKey) return;
+        el.dataset.mdSrc = srcKey;
         renderMarkdownCached(p.text || '').then((html) => { el.innerHTML = html; injectCodeCopy(el); });
     };
     return h('div', { class: 'chat-bubble chat-md', ref: refSink });
@@ -216,10 +231,14 @@ function ThinkingNode(p) {
 
 const PART_RENDERERS = {
     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 || '')))
+        // Streaming prose that already contains a code fence (or a huge tail
+        // window) 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. `streamHead` is an optional head line for
+        // the tail-window path ('streaming · N KB so far').
+        ? h('div', { class: 'chat-bubble chat-md chat-stream-pre' },
+            ...[p.streamHead ? h('div', { key: 'sh', class: 'chat-stream-head', role: 'status', 'aria-live': 'polite' }, p.streamHead) : null,
+               h('pre', { key: 'pre' }, h('code', {}, p.text || ''))].filter(Boolean))
         : h('div', { class: 'chat-bubble' + (p.mdShell ? ' chat-md' : '') }, ...renderInline(p.text || '')),
     md:    (p) => MdNode(p),
     code:  (p) => CodeNode(p),
@@ -270,7 +289,7 @@ function renderPart(p, key) {
     return node;
 }
 
-export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typing, key, aicat, reactions, receipt, name, streaming, actions }) {
+export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typing, key, aicat, reactions, receipt, name, streaming, actions, incomplete, stopped }) {
     _stats.messages += 1;
     // Support legacy 'who' prop, prefer 'role' with mapping:
     //   'user'      -> 'you'   (right-aligned, accent bubble)
@@ -299,6 +318,17 @@ export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typ
     // a thin caret so the live edge reads as "still writing", not "done". Drawn as
     // a CSS element, not a glyph character.
     if (streaming && !typing) bodyNodes = [...bodyNodes, h('span', { key: '_caret', class: 'chat-stream-caret', 'aria-hidden': 'true' })];
+    // Out-of-band turn notices, plain copy in a NEUTRAL tone (not error red):
+    //   stopped    — the turn was cancelled (locally or remotely); truncated
+    //                output must not read as a finished answer.
+    //   incomplete — the connection dropped mid-turn and events were not
+    //                replayed; the response may be missing content.
+    // Pass true for the default copy or a string to override it. Retry rides
+    // the existing per-message actions row.
+    if (stopped) bodyNodes = [...bodyNodes, h('div', { key: '_stopped', class: 'chat-msg-notice is-stopped', role: 'status' },
+        typeof stopped === 'string' ? stopped : 'stopped — this turn was cancelled before it finished')];
+    if (incomplete) bodyNodes = [...bodyNodes, h('div', { key: '_incomplete', class: 'chat-msg-notice is-incomplete', role: 'status' },
+        typeof incomplete === 'string' ? incomplete : 'connection dropped mid-turn — the response may be incomplete')];
     const reactionRow = reactions && reactions.length
         ? h('div', { class: 'chat-reactions' },
             ...reactions.map((r, i) => h('span', { class: 'rxn' + (r.you ? ' you' : ''), key: 'r' + i, 'aria-label': `${r.emoji} reaction (${String(r.count)} ${String(r.count) === '1' ? 'reaction' : 'reactions'})${r.you ? ' - you reacted' : ''}` },
@@ -333,7 +363,24 @@ 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, context }) {
+// Transient, non-blocking composer note (aria-live polite): e.g. a pasted image
+// when no onPasteFiles handler is wired. Pure-DOM, auto-clears.
+function flashComposerNote(composerEl, text) {
+    if (!composerEl) return;
+    let note = composerEl.querySelector('.chat-composer-note');
+    if (!note) {
+        note = document.createElement('div');
+        note.className = 'chat-composer-note';
+        note.setAttribute('role', 'status');
+        note.setAttribute('aria-live', 'polite');
+        composerEl.appendChild(note);
+    }
+    note.textContent = text;
+    clearTimeout(note._dsNoteTimer);
+    note._dsNoteTimer = setTimeout(() => { note.remove(); }, 2600);
+}
+
+export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu, onCancel, busy, placeholder = 'message…', disabled, context, onPasteFiles, onDropFiles }) {
     // 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
@@ -370,23 +417,81 @@ export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu
     };
     // 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', {
+    // `context` is { bits:[...], onClick? }. Bits may be plain strings (inert
+    // text) or { text, onClick, title } objects — a bit with its own onClick
+    // renders as an inline button (.chat-composer-context-bit) so e.g. the cwd
+    // segment routes to the cwd editor WITHOUT making the whole line one giant
+    // click target. Legacy whole-line context.onClick is honored only when no
+    // bit carries its own handler. All children are keyed VElements.
+    const ctxBits = (context && context.bits) ? context.bits.filter(Boolean) : [];
+    const hasBitClicks = ctxBits.some((b) => b && typeof b === 'object' && b.onClick);
+    let contextLine = null;
+    if (ctxBits.length && hasBitClicks) {
+        const kids = [];
+        ctxBits.forEach((b, i) => {
+            if (i) kids.push(h('span', { key: 'csep' + i, class: 'chat-composer-context-sep', 'aria-hidden': 'true' }, ' · '));
+            const isObj = b && typeof b === 'object';
+            const text = isObj ? (b.text || '') : String(b);
+            if (isObj && b.onClick) kids.push(h('button', {
+                key: 'cbit' + i, type: 'button', class: 'chat-composer-context-bit',
+                title: b.title || null, 'aria-label': b.title || text,
+                onclick: (e) => { e.preventDefault(); b.onClick(e); },
+            }, text));
+            else kids.push(h('span', { key: 'cbit' + i, class: 'chat-composer-context-text' }, text));
+        });
+        contextLine = h('div', { class: 'chat-composer-context' }, ...kids);
+    } else if (ctxBits.length) {
+        const joined = ctxBits.map((b) => (b && typeof b === 'object') ? (b.text || '') : String(b)).filter(Boolean).join(' · ');
+        contextLine = h(context.onClick ? 'button' : 'div', {
             class: 'chat-composer-context', type: context.onClick ? 'button' : null,
-            'aria-label': context.onClick ? ('change target: ' + context.bits.join(' · ')) : null,
+            'aria-label': context.onClick ? ('change target: ' + joined) : null,
             onclick: context.onClick ? (e) => { e.preventDefault(); context.onClick(e); } : null,
-          }, context.bits.filter(Boolean).join(' · '))
-        : null;
-    return h('div', { class: 'chat-composer' },
+        }, joined);
+    }
+    const hasDraft = !!(value && value.trim());
+    return h('div', {
+        class: 'chat-composer' + (hasDraft ? ' has-draft' : ''),
+        // A drop on the composer must NEVER navigate the browser away from the
+        // live session: preventDefault on both dragover and drop, route files to
+        // the optional onDropFiles handler, ring via .dragover.
+        ondragover: (e) => { e.preventDefault(); e.currentTarget.classList.add('dragover'); },
+        ondragleave: (e) => { e.currentTarget.classList.remove('dragover'); },
+        ondrop: (e) => {
+            e.preventDefault();
+            e.currentTarget.classList.remove('dragover');
+            const files = e.dataTransfer && e.dataTransfer.files;
+            if (files && files.length) {
+                if (onDropFiles) onDropFiles(files);
+                else flashComposerNote(e.currentTarget, 'dropped files are not supported here yet');
+            }
+        },
+    },
         contextLine,
         h('textarea', { ref: taRef, placeholder, rows: 1, 'aria-label': 'message input',
             oninput: autoGrow,
+            onpaste: (e) => {
+                const cd = e.clipboardData;
+                // Image/file clipboard data with no accompanying text: never
+                // silently dropped — route to onPasteFiles or tell the user.
+                if (cd && cd.files && cd.files.length && !cd.getData('text')) {
+                    e.preventDefault();
+                    if (onPasteFiles) onPasteFiles(cd.files);
+                    else flashComposerNote(e.currentTarget.closest('.chat-composer'), 'images are not supported yet');
+                }
+            },
             onkeydown: (e) => {
-                if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
+                // Escape stops generation (the stop button's "(Esc)" title is
+                // now truthful) before falling through to any host blur handling.
+                if (e.key === 'Escape' && busy && onCancel) { e.preventDefault(); onCancel(e); return; }
+                // IME guard: the Enter that commits a CJK composition must never
+                // send (isComposing; keyCode 229 covers older engines).
+                if (e.key === 'Enter' && !e.shiftKey && !e.isComposing && e.keyCode !== 229) { e.preventDefault(); send(); }
                 if (e.key === ';' && e.ctrlKey) { e.preventDefault(); onEmoji && onEmoji(e); }
             } }),
+        // Enter-to-send affordance (Claude-Desktop style): a muted hint visible
+        // while the composer is focused or carries a draft; hidden under 420px
+        // (CSS) to save rows. Middot is kept product typography.
+        h('div', { class: 'chat-composer-hint', 'aria-hidden': 'true' }, 'Enter to send · Shift+Enter for a new line'),
         h('div', { class: 'chat-composer-toolbar' },
             onAttach ? h('button', { type: 'button', class: 'composer-btn', onclick: (e) => { e.preventDefault(); onAttach(e); }, 'aria-label': 'attach file', title: 'attach file' }, Icon('paperclip')) : null,
             onEmoji ? h('button', { type: 'button', class: 'composer-btn', onclick: (e) => { e.preventDefault(); onEmoji(e); }, 'aria-label': 'emoji picker', title: 'emoji picker (Ctrl+;)' }, Icon('smile')) : null,

package/src/components/content.js

@@ -321,7 +321,8 @@ export function SearchInput({ value = '', placeholder = 'search…', onInput, on
         'aria-label': label || placeholder,
         value,
         oninput: onInput ? (e) => onInput(e.target.value, e) : null,
-        onkeydown: onSubmit ? (e) => { if (e.key === 'Enter') onSubmit(e.target.value, e); } : null
+        // IME guard: the Enter that commits a CJK composition must not submit.
+        onkeydown: onSubmit ? (e) => { if (e.key === 'Enter' && !e.isComposing && e.keyCode !== 229) onSubmit(e.target.value, e); } : null
     });
 }
 

package/src/components/context-pane.js

@@ -21,6 +21,7 @@
 import * as webjsx from '../../vendor/webjsx/index.js';
 import { Panel, Row } from './content.js';
 import { Btn } from './shell.js';
+import { fmtDuration } from './sessions.js';
 
 const h = webjsx.createElement;
 
@@ -83,7 +84,8 @@ export function ContextPane({ agent, model, cwd, toolCount = 0, usage, session,
         if (usage.outputTokens != null) tokRows.push(Row({ title: 'output', meta: fmtTok(usage.outputTokens) + ' tok' }));
         if (usage.costUsd != null) tokRows.push(Row({ title: 'cost', meta: '$' + usage.costUsd.toFixed(4) }));
         if (usage.turns != null) tokRows.push(Row({ title: 'turns', meta: String(usage.turns) }));
-        if (usage.durationMs != null) tokRows.push(Row({ title: 'duration', meta: (usage.durationMs / 1000).toFixed(1) + 's' }));
+        // One duration vocabulary kit-wide: shared fmtDuration (s -> m -> h).
+        if (usage.durationMs != null) tokRows.push(Row({ title: 'duration', meta: fmtDuration(usage.durationMs) }));
         panels.push(Panel({ title: 'last turn', children: tokRows }));
     }
     return h('div', { class: 'ds-context' },

package/src/components/files-modals.js

@@ -8,7 +8,7 @@ const h = webjsx.createElement;
 // Monotonic id source for aria-labelledby wiring between a modal and its head.
 let _modalSeq = 0;
 
-function Backdrop({ onClose, children, kind = '', labelledBy } = {}) {
+function Backdrop({ onClose, children, kind = '', labelledBy, busy = false } = {}) {
     // webjsx invokes a ref callback with the element on mount and with null on
     // unmount. We stash the per-element keydown teardown on the node itself so
     // the null branch can run it — otherwise the document/element listener leaks
@@ -26,9 +26,12 @@ function Backdrop({ onClose, children, kind = '', labelledBy } = {}) {
         const lastFocusable = focusables[focusables.length - 1];
 
         const handleKeydown = (e) => {
-            // Escape closes the modal
+            // Escape closes the modal — unless a mutation is in flight (the live
+            // busy state is read off the data-busy attribute, which re-renders;
+            // this handler's closure is bound once at mount).
             if (e.key === 'Escape') {
                 e.preventDefault();
+                if (el.dataset.busy === '1') return;
                 if (onClose) onClose();
                 return;
             }
@@ -52,22 +55,61 @@ function Backdrop({ onClose, children, kind = '', labelledBy } = {}) {
             }
         };
 
-        el.addEventListener('keydown', handleKeydown);
-        el._dsModalTeardown = () => el.removeEventListener('keydown', handleKeydown);
-        // Auto-focus on open — always, not only when focus sits on <body>.
-        // Prefer an element explicitly marked [autofocus].
-        const preferred = modal.querySelector('[autofocus]') || firstFocusable;
-        if (preferred) preferred.focus();
+        // Escape must close the modal no matter where focus sits (re-renders
+        // can bounce focus out of the dialog), so listen at document level
+        // for the modal's lifetime.
+        document.addEventListener('keydown', handleKeydown, true);
+        // Record the invoker BEFORE the modal steals focus, so close (confirm,
+        // cancel, Escape, backdrop click) restores keyboard/AT focus to where
+        // the user was (e.g. the FileGrid row button) instead of <body>.
+        // Re-mounts mid-lifetime (every app render re-runs this ref) keep the
+        // ORIGINAL invoker and never re-steal focus from the user.
+        const invoker = el.contains(document.activeElement) ? (Backdrop._invoker || document.activeElement) : document.activeElement;
+        if (!Backdrop._invoker) Backdrop._invoker = invoker;
+        el._dsModalTeardown = (removed) => {
+            document.removeEventListener('keydown', handleKeydown, true);
+            // Only restore focus when the modal is genuinely going away (not a
+            // re-render remount) and focus is not already somewhere useful.
+            if (removed && Backdrop._invoker && Backdrop._invoker.focus && Backdrop._invoker.isConnected) {
+                try { Backdrop._invoker.focus(); } catch {}
+            }
+            if (removed) Backdrop._invoker = null;
+        };
+        // Auto-focus on open - only when focus is not already inside the modal
+        // (re-renders must not yank the caret around).
+        if (!el.contains(document.activeElement)) {
+            const preferred = modal.querySelector('[autofocus]') || firstFocusable;
+            if (preferred) preferred.focus();
+        }
     };
 
     return h('div', {
         class: 'ds-modal-backdrop',
+        // Live busy flag read by the mount-bound Escape handler + backdrop click.
+        'data-busy': busy ? '1' : '0',
         ref: (el) => {
-            if (el) backdropRef(el);
-            else if (Backdrop._last && Backdrop._last._dsModalTeardown) { Backdrop._last._dsModalTeardown(); Backdrop._last = null; }
-            if (el) Backdrop._last = el;
+            if (el) {
+                // A remount in the same tick (render churn) is not a close:
+                // cancel the pending removal teardown before re-binding.
+                Backdrop._pendingRemoval = false;
+                backdropRef(el);
+                Backdrop._last = el;
+            } else if (Backdrop._last && Backdrop._last._dsModalTeardown) {
+                const t = Backdrop._last._dsModalTeardown;
+                Backdrop._last = null;
+                Backdrop._pendingRemoval = true;
+                t(false); // always unhook the document listener now
+                queueMicrotask(() => {
+                    // Still gone next microtask -> genuine close: restore focus.
+                    if (Backdrop._pendingRemoval) { t(true); Backdrop._pendingRemoval = false; }
+                });
+            }
         },
-        onclick: (e) => { if (e.target === e.currentTarget && onClose) onClose(); }
+        onclick: (e) => {
+            if (e.target !== e.currentTarget) return;
+            if (e.currentTarget.dataset.busy === '1') return; // no mid-flight close
+            if (onClose) onClose();
+        }
     },
         h('div', {
             class: 'ds-modal' + (kind ? ' ds-modal-' + kind : ''),
@@ -81,13 +123,14 @@ function Backdrop({ onClose, children, kind = '', labelledBy } = {}) {
 // FileViewer all funnel through this so the ds-modal markup is authored once.
 // `actions` is an array of vnodes (already using the Btn primitive). Any of the
 // slots may be omitted.
-function Modal({ onClose, kind = '', head, headClass = '', headAttrs = {}, body, bodyClass = 'ds-modal-body', bodyAttrs = {}, actions } = {}) {
+function Modal({ onClose, kind = '', head, headClass = '', headAttrs = {}, body, bodyClass = 'ds-modal-body', bodyAttrs = {}, actions, busy = false } = {}) {
     // Give the head a stable id so the dialog can point aria-labelledby at it,
     // exposing the title as the dialog's accessible name to screen readers.
     const headId = head != null ? ('ds-modal-head-' + (++_modalSeq)) : null;
     return Backdrop({
         onClose,
         kind,
+        busy,
         labelledBy: headId,
         children: [
             head != null ? h('div', { id: headId, class: ('ds-modal-head' + (headClass ? ' ' + headClass : '')), ...headAttrs }, ...(Array.isArray(head) ? head : [head])) : null,
@@ -97,40 +140,56 @@ function Modal({ onClose, kind = '', head, headClass = '', headAttrs = {}, body,
     });
 }
 
-export function ConfirmDialog({ title = 'confirm', message, confirmLabel = 'confirm', cancelLabel = 'cancel', destructive, onConfirm, onCancel } = {}) {
+// A role=alert error line rendered INSIDE the modal body (so a 409/403 from a
+// mutation is visible at the point of action, inside the focus trap — not a
+// sibling stuck in page flow behind the fixed backdrop).
+function modalError(error) {
+    return error ? h('p', { class: 'ds-modal-error field-error', role: 'alert' }, String(error)) : null;
+}
+
+// `error` renders inside .ds-modal-body (role=alert, error tone). `busy`
+// disables both action buttons AND the Escape/backdrop close paths; the confirm
+// label flips to `busyLabel` (default 'working…') so the in-flight state reads.
+export function ConfirmDialog({ title = 'confirm', message, confirmLabel = 'confirm', cancelLabel = 'cancel', destructive, onConfirm, onCancel, error, busy = false, busyLabel = 'working…' } = {}) {
     return Modal({
         onClose: onCancel,
         kind: 'small',
+        busy,
         head: title,
-        body: message || '',
+        body: [message || '', modalError(error)].filter(Boolean),
         actions: [
-            Btn({ onClick: onCancel, children: cancelLabel }),
-            Btn({ primary: true, danger: !!destructive, onClick: onConfirm, children: confirmLabel })
+            Btn({ onClick: onCancel, disabled: busy, children: cancelLabel }),
+            Btn({ primary: true, danger: !!destructive, disabled: busy, onClick: onConfirm, children: busy ? busyLabel : confirmLabel })
         ]
     });
 }
 
-export function PromptDialog({ title = 'name', value = '', placeholder = '', confirmLabel = 'ok', cancelLabel = 'cancel', onConfirm, onCancel, onInput } = {}) {
+export function PromptDialog({ title = 'name', value = '', placeholder = '', confirmLabel = 'ok', cancelLabel = 'cancel', onConfirm, onCancel, onInput, error, busy = false, busyLabel = 'working…' } = {}) {
     return Modal({
         onClose: onCancel,
         kind: 'small',
+        busy,
         head: title,
-        body: h('input', {
+        body: [h('input', {
             class: 'input ds-modal-input',
             type: 'text',
             value,
             placeholder,
             autofocus: true,
+            disabled: busy ? true : null,
+            'aria-invalid': error ? 'true' : null,
             oninput: (e) => onInput && onInput(e.target.value),
             onkeydown: (e) => {
-                if (e.key === 'Enter') { e.preventDefault(); onConfirm && onConfirm(e.target.value); }
-                if (e.key === 'Escape') { e.preventDefault(); onCancel && onCancel(); }
+                // IME guard: the Enter that commits a CJK composition must not confirm.
+                if (e.key === 'Enter' && !e.isComposing && e.keyCode !== 229) { e.preventDefault(); if (!busy) onConfirm && onConfirm(e.target.value); }
+                if (e.key === 'Escape') { e.preventDefault(); if (!busy) onCancel && onCancel(); }
             }
-        }),
+        }), modalError(error)].filter(Boolean),
         actions: [
-            Btn({ onClick: onCancel, children: cancelLabel }),
+            Btn({ onClick: onCancel, disabled: busy, children: cancelLabel }),
             Btn({
                 primary: true,
+                disabled: busy,
                 // Read the live input value, not the closed-over `value` prop:
                 // consumers update their state in oninput without re-rendering
                 // (to avoid caret jump), so the prop is stale at click time.
@@ -139,7 +198,7 @@ export function PromptDialog({ title = 'name', value = '', placeholder = '', con
                     const inp = e.currentTarget.closest('.ds-modal')?.querySelector('.ds-modal-input');
                     onConfirm(inp ? inp.value : value);
                 },
-                children: confirmLabel
+                children: busy ? busyLabel : confirmLabel
             })
         ]
     });