anentrypoint-design 0.0.200 → 0.0.202

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.200",
+  "version": "0.0.202",
   "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) => {
@@ -55,7 +63,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,18 +93,36 @@ 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))
+      : []),
   );
 }
 
 // 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' },
@@ -117,20 +143,31 @@ 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,
     canSend = true,
     suggestions = [], onSuggestionClick,
     onCopyMessage, onRetryMessage, onEditMessage,
+    confirmEdit = false, onArmEdit,
     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.
@@ -139,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;
@@ -167,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
@@ -194,7 +243,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({
@@ -209,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
@@ -226,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/
@@ -253,13 +325,41 @@ 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 }),
-    CwdBar({ cwd, editing: cwdEditing, draft: cwdDraft,
+                    onSelectAgent, onSelectModel, onNewChat, onStop, exportActions }),
+    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' },
@@ -272,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

@@ -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,
@@ -275,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
     });
 }
 
@@ -409,6 +456,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;