anentrypoint-design 0.0.229 → 0.0.231

package/package.json

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

@@ -234,6 +234,7 @@ export function AgentChat(props = {}) {
           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 if (!isStreaming && part.kind === 'thinking') parts.push({ kind: 'thinking', settled: true, text: part.text });
         else parts.push(part);
       }
     }
@@ -245,6 +246,15 @@ export function AgentChat(props = {}) {
     // The streaming caret rides the live assistant turn once it has body (the
     // empty-shell turn already shows the inline typing dots).
     const streaming = isStreaming && msgHasBody(m);
+    // Place the caret inline inside the last text/md part rather than as a
+    // sibling span (which renders as a block below the last bubble). Tag the
+    // last text part so PART_RENDERERS.text can append it as an inline child.
+    if (streaming && parts.length) {
+      const lastPart = parts[parts.length - 1];
+      if (lastPart && (lastPart.kind === 'text' || lastPart.kind === 'md')) {
+        parts[parts.length - 1] = { ...lastPart, streamingCaret: true };
+      }
+    }
     // Per-message actions: the host supplies onCopyMessage / onRetryMessage; we
     // build the action row only for SETTLED messages (no actions mid-stream).
     let actions;
@@ -252,6 +262,7 @@ 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 && onRetryMessage && i === lastIdx) built.push({ label: 'retry', icon: 'refresh', title: 'retry', onClick: () => onRetryMessage(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',
@@ -317,7 +328,7 @@ export function AgentChat(props = {}) {
   // 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' },
+    ? h('div', { class: 'agentchat-followups', role: 'group', 'aria-label': 'suggested follow-ups', 'aria-hidden': 'true' },
         ...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); },
@@ -376,8 +387,8 @@ export function AgentChat(props = {}) {
              onEdit: onCwdEdit, onSave: onCwdSave, onCancel: onCwdCancel, onClear: onCwdClear, onDraft: onCwdDraft }),
     ...(banners || []).filter(Boolean),
     h('div', { class: 'agentchat-head' },
-      h('h2', { class: 'agentchat-title' }, name + (selectedModel ? ' · ' + selectedModel : '')),
-      h('span', { class: 'agentchat-sub', 'aria-live': 'polite' },
+      h('h1', { class: 'agentchat-title' }, name + (selectedModel ? ' · ' + selectedModel : '')),
+      h('span', { class: 'agentchat-sub', 'aria-hidden': busy ? 'true' : null },
         // Derive the busy label from the same status prop the controls use, so a
         // reconnecting-while-streaming state reads one word everywhere instead of
         // the head saying "streaming…" while the controls say "reconnecting…".

package/src/components/chat.js

@@ -8,6 +8,12 @@ import { isDegraded as isMarkdownDegraded } from '../markdown.js';
 import { register } from '../debug.js';
 import { Icon } from './shell.js';
 import { fmtFileSize } from './files.js';
+import { EmojiPicker } from './overlay-primitives.js';
+
+// Matches a trailing `:keyword` at the end of the composer draft (optionally
+// preceded by whitespace/start-of-string) so typing `:smile` opens an inline
+// filtered EmojiPicker without requiring the toolbar button or Ctrl+;.
+const EMOJI_TRIGGER_RE = /(?:^|\s)(:([a-zA-Z0-9_+-]{0,24}))$/;
 
 const h = webjsx.createElement;
 let _stats = { messages: 0, lastKindCounts: {} };
@@ -256,6 +262,12 @@ function ToolCallNode(p) {
 }
 
 function ThinkingNode(p) {
+    if (p.settled) {
+        return h('details', { class: 'chat-bubble chat-thinking-settled' },
+            h('summary', {}, 'View thinking'),
+            h('div', { class: 'chat-thinking-body' }, p.text)
+        );
+    }
     return h('div', { class: 'chat-bubble chat-thinking', role: 'status', 'aria-live': 'polite' },
         h('span', { class: 'chat-thinking-dots', 'aria-hidden': 'true' }, h('span'), h('span'), h('span')),
         h('span', { class: 'chat-thinking-text' }, p.text || 'thinking…')
@@ -271,8 +283,11 @@ const PART_RENDERERS = {
         // 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 || '')),
+               h('pre', { key: 'pre' }, h('code', {}, p.text || '')),
+               p.streamingCaret ? h('span', { key: '_caret', class: 'chat-stream-caret', 'aria-hidden': 'true' }) : null].filter(Boolean))
+        : h('div', { class: 'chat-bubble' + (p.mdShell ? ' chat-md' : '') },
+            ...renderInline(p.text || ''),
+            p.streamingCaret ? h('span', { key: '_caret', class: 'chat-stream-caret', 'aria-hidden': 'true' }) : null),
     md:    (p) => MdNode(p),
     code:  (p) => CodeNode(p),
     tool:        (p) => ToolCallNode(p),
@@ -354,7 +369,10 @@ export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typ
     // AND already shows content (so the inline typing dots have stopped), append
     // 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' })];
+    // Only append the caret as a sibling if the last part did not already embed
+    // it inline (streamingCaret flag on the last text/md part in parts array).
+    const lastPartHasCaret = parts && parts.length && parts[parts.length - 1] && parts[parts.length - 1].streamingCaret;
+    if (streaming && !typing && !lastPartHasCaret) 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.
@@ -424,7 +442,7 @@ function flashComposerNote(composerEl, text) {
     note._dsNoteTimer = setTimeout(() => { note.remove(); }, 2600);
 }
 
-export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu, onCancel, busy, placeholder = 'message…', disabled, context, onPasteFiles, onDropFiles }) {
+export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu, onCancel, busy, placeholder = 'message…', disabled, disabledReason, label, 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
@@ -435,6 +453,24 @@ export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu
         if (!v || disabled) return;
         if (onSend) onSend(v);
     };
+    const triggerMatch = EMOJI_TRIGGER_RE.exec(value || '');
+    // taEl is only assigned by taRef during DOM diffing, which happens AFTER
+    // this render function returns — so on first paint of a trigger it is
+    // still null here. Fall back to the live DOM textarea from the previous
+    // paint (same composer, content patched in place) so the picker anchors
+    // near the input instead of the viewport origin.
+    const anchorEl = taEl || (typeof document !== 'undefined' ? document.querySelector('.chat-composer textarea') : null);
+    const insertEmoji = (ch) => {
+        const v = (taEl && taEl.value) || value || '';
+        const m = EMOJI_TRIGGER_RE.exec(v);
+        const next = m ? (v.slice(0, m.index) + (m[0].startsWith(':') ? '' : v[m.index]) + ch + ' ') : (v + ch);
+        if (onInput) onInput(next);
+        if (taEl) {
+            taEl.value = next;
+            taEl.focus();
+            taEl.selectionStart = taEl.selectionEnd = next.length;
+        }
+    };
     let autoGrowScheduled = false;
     const autoGrow = (e) => {
         const ta = e.target;
@@ -495,7 +531,7 @@ export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu
             }, b.text));
             else kids.push(h('span', { key: 'cbit' + i, class: 'chat-composer-context-text' }, b.text));
         });
-        contextLine = h('div', { class: 'chat-composer-context' }, ...kids);
+        contextLine = h('div', { class: 'chat-composer-context', role: 'group', 'aria-label': 'active session: ' + ctxBits.map((b) => b.text).join(', ') }, ...kids);
     } else if (ctxBits.length) {
         const joined = ctxBits.map((b) => b.text).join(' · ');
         contextLine = h(context.onClick ? 'button' : 'div', {
@@ -505,8 +541,16 @@ export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu
         }, joined);
     }
     const hasDraft = !!(value && value.trim());
+    const triggerPicker = triggerMatch ? EmojiPicker({
+        open: true,
+        anchorX: (anchorEl && anchorEl.getBoundingClientRect) ? anchorEl.getBoundingClientRect().left : 0,
+        anchorY: (anchorEl && anchorEl.getBoundingClientRect) ? anchorEl.getBoundingClientRect().top : 0,
+        query: triggerMatch[2] || '',
+        onSelect: (ch) => insertEmoji(ch),
+        onClose: () => { if (taEl) { const v = taEl.value.replace(EMOJI_TRIGGER_RE, (full, tail) => full.slice(0, full.length - tail.length)); if (onInput) onInput(v); taEl.value = v; taEl.focus(); } },
+    }) : null;
     return h('div', {
-        class: 'chat-composer' + (hasDraft ? ' has-draft' : ''),
+        class: 'chat-composer' + (hasDraft ? ' has-draft' : '') + (disabled ? ' is-disabled' : ''),
         // 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.
@@ -523,23 +567,27 @@ export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu
         },
     },
         contextLine,
-        h('textarea', { ref: taRef, placeholder, rows: 1, 'aria-label': 'message input',
+        triggerPicker,
+        h('textarea', { ref: taRef, placeholder, rows: 1,
+            'aria-label': label || (disabled && disabledReason ? 'message input — ' + disabledReason : 'message input'),
             disabled: !!disabled, 'aria-disabled': disabled ? 'true' : null,
             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')) {
+                // If the clipboard contains files, always route them — even when
+                // text is also present (some apps attach a filename as text).
+                if (cd && cd.files && cd.files.length) {
                     e.preventDefault();
                     if (onPasteFiles) onPasteFiles(cd.files);
                     else flashComposerNote(e.currentTarget.closest('.chat-composer'), 'images are not supported yet');
                 }
             },
             onkeydown: (e) => {
-                // 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; }
+                // Escape blurs the textarea when idle; stops generation when busy.
+                if (e.key === 'Escape') {
+                    if (!busy) { e.currentTarget.blur(); return; }
+                    if (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(); }
@@ -555,7 +603,9 @@ export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu
             onMenu ? h('button', { type: 'button', class: 'composer-btn', onclick: (e) => { e.preventDefault(); onMenu(e); }, 'aria-label': 'composer menu', title: 'more options' }, Icon('more-horizontal')) : null,
             busy && onCancel
                 ? h('button', { type: 'button', class: 'send cancel', onclick: (e) => { e.preventDefault(); onCancel(e); }, 'aria-label': 'stop generating', title: 'stop generating (Esc)' }, Icon('square'))
-                : h('button', { type: 'button', class: 'send', disabled: disabled || !(value && value.trim()), onclick: send, 'aria-label': 'send message', title: 'send message (Enter)' }, Icon('arrow-up'))
+                : h('button', { type: 'button', class: 'send', disabled: disabled || !(value && value.trim()), onclick: send,
+                    'aria-label': disabled && disabledReason ? 'send message (' + disabledReason + ')' : 'send message',
+                    title: disabled && disabledReason ? 'send message (' + disabledReason + ')' : 'send message (Enter)' }, Icon('arrow-up'))
         )
     );
 }

package/src/components/context-pane.js

@@ -8,13 +8,17 @@
 //   ContextPane({ agent, model, cwd, toolCount, onSetCwd })
 //
 // Props:
-//   agent     : display name of the active agent (string) or falsy for "none"
-//   model     : model id/name (string) or falsy
-//   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 whole-conversation totals { turns, cost } shown as a block
-//   onSetCwd  : optional callback for the "set working directory" affordance
+//   agent      : display name of the active agent (string) or falsy for "none"
+//   model      : model id/name (string) or falsy
+//   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 whole-conversation totals { turns, cost } shown as a block
+//   recentFiles: OPTIONAL [{ path, time }] files touched by tool calls this
+//                session (most-recent first), rendered as a compact panel -
+//                Claude Desktop's context surfaces recently-touched files.
+//   onSetCwd   : optional callback for the "set working directory" affordance
+//   onOpenFile : optional callback(path) for clicking a recent-files row
 //
 // No decorative glyphs — words + the kit's Icon SVGs only.
 
@@ -32,7 +36,7 @@ function fmtTok(n) {
     return (n / 1000000).toFixed(1) + 'M';
 }
 
-export function ContextPane({ agent, model, cwd, toolCount = 0, usage, session, onSetCwd } = {}) {
+export function ContextPane({ agent, model, cwd, toolCount = 0, usage, session, recentFiles, onSetCwd, onOpenFile } = {}) {
     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);
@@ -93,6 +97,17 @@ export function ContextPane({ agent, model, cwd, toolCount = 0, usage, session,
         if (usage.durationMs != null) tokRows.push(Row({ title: 'duration', meta: fmtDuration(usage.durationMs) }));
         panels.push(Panel({ title: 'last turn', children: tokRows }));
     }
+    // Recent files: files touched by tool calls this session, most-recent
+    // first, capped to 5 rows so the panel stays a glance not a log.
+    if (Array.isArray(recentFiles) && recentFiles.length) {
+        const fileRows = recentFiles.slice(0, 5).map((f) => Row({
+            title: f.path.split(/[/\\]/).filter(Boolean).pop() || f.path,
+            sub: f.path,
+            meta: f.time || undefined,
+            onClick: onOpenFile ? () => onOpenFile(f.path) : undefined,
+        }));
+        panels.push(Panel({ title: 'recent files', children: fileRows }));
+    }
     // The cwd action lives on the working-dir row above; no floating footer button.
     return h('div', { class: 'ds-context' }, ...panels);
 }

package/src/components/files-modals.js

@@ -6,7 +6,14 @@ import { fileGlyph, fmtFileSize } from './files.js';
 import { highlightAllUnder } from '../highlight.js';
 const h = webjsx.createElement;
 
-// Monotonic id source for aria-labelledby wiring between a modal and its head.
+// Stable per-call-site id source for aria-labelledby: we want one fixed id per
+// logical dialog instance (rename, confirm, prompt, preview), NOT a monotonic
+// counter that advances on every render and leaves the old aria-labelledby
+// reference dangling. A WeakMap keyed on the options object would not survive
+// re-renders, so we use a short random suffix minted ONCE per Modal() call
+// inside the function body — the closure keeps it stable for that render tree.
+// _modalSeq is retained only for external callers that may import it; it is no
+// longer used internally.
 let _modalSeq = 0;
 
 function Backdrop({ onClose, children, kind = '', labelledBy, busy = false } = {}) {
@@ -19,13 +26,6 @@ function Backdrop({ onClose, children, kind = '', labelledBy, busy = false } = {
         const modal = el.querySelector('.ds-modal');
         if (!modal) return;
 
-        // Focus trap: handle Tab key to cycle focus within modal
-        const focusables = modal.querySelectorAll(
-            'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
-        );
-        const firstFocusable = focusables[0];
-        const lastFocusable = focusables[focusables.length - 1];
-
         const handleKeydown = (e) => {
             // Escape closes the modal — unless a mutation is in flight (the live
             // busy state is read off the data-busy attribute, which re-renders;
@@ -36,12 +36,19 @@ function Backdrop({ onClose, children, kind = '', labelledBy, busy = false } = {
                 if (onClose) onClose();
                 return;
             }
-            // Tab trapping
+            // Focus trap: re-query focusables on each Tab press so that buttons
+            // disabled mid-flight (busy state) are excluded from the cycle and
+            // do not break tab navigation.
             if (e.key === 'Tab') {
+                const focusables = modal.querySelectorAll(
+                    'button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+                );
                 if (focusables.length === 0) {
                     e.preventDefault();
                     return;
                 }
+                const firstFocusable = focusables[0];
+                const lastFocusable = focusables[focusables.length - 1];
                 if (e.shiftKey) {
                     if (document.activeElement === firstFocusable) {
                         e.preventDefault();
@@ -127,7 +134,11 @@ function Backdrop({ onClose, children, kind = '', labelledBy, busy = false } = {
 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;
+    // The id is minted once per Modal() call with a short random suffix so it
+    // stays constant across re-renders of the same dialog instance — an
+    // incrementing counter advances on every render, leaving the previous
+    // aria-labelledby reference pointing at a now-absent element.
+    const headId = head != null ? ('ds-modal-head-' + Math.random().toString(36).slice(2, 8)) : null;
     return Backdrop({
         onClose,
         kind,

package/src/components/files.js

@@ -462,7 +462,7 @@ export function DropZone({ children, dragover, onDrop, onDragOver, onDragLeave,
     return h('div', {
         class: 'ds-dropzone' + (kids.length ? ' ds-dropzone--wrap' : '') + (dragover ? ' dragover' : ''),
         ondragover: (e) => { e.preventDefault(); onDragOver && onDragOver(e); },
-        ondragleave: (e) => { onDragLeave && onDragLeave(e); },
+        ondragleave: (e) => { if (!e.currentTarget.contains(e.relatedTarget)) { onDragLeave && onDragLeave(e); } },
         ondrop: (e) => { e.preventDefault(); onDrop && onDrop(e.dataTransfer.files); }
     },
         h('div', { class: 'ds-dropzone-inner' },
@@ -498,12 +498,9 @@ export function UploadProgress({ items = [], onDismiss } = {}) {
             return h('div', {
                 key: it.name + i,
                 class: 'ds-upload-item' + (it.done ? ' done' : '') + (it.error ? ' error' : ''),
-                role: 'progressbar',
-                'aria-valuenow': String(Math.max(0, Math.min(100, it.pct || 0))),
-                'aria-valuemin': '0',
-                'aria-valuemax': '100',
+                role: 'status',
                 'aria-label': `${it.name}: ${status}`,
-                'aria-busy': it.done || it.error ? 'false' : 'true'
+                'aria-live': 'polite'
             },
                 h('span', { class: 'ds-upload-name' }, it.name),
                 h('span', { class: 'ds-upload-bar' },

package/src/components/overlay-primitives.js

@@ -132,6 +132,7 @@ export function Popover({ open, anchorEl, onClose, placement = 'bottom-start', c
     const el = document.createElement('div');
     el.className = 'ds-popover';
     el.setAttribute('role', 'dialog');
+    el.setAttribute('aria-modal', 'true');
     if (ariaLabel) el.setAttribute('aria-label', ariaLabel);
     el.tabIndex = -1;
     document.body.appendChild(el);
@@ -246,7 +247,7 @@ function _clampToViewport(x, y, w, h, margin = CLAMP_MARGIN) {
 
 // Tab focus trap for a dialog root — keeps Tab/Shift+Tab cycling inside `el`.
 // Call from an onkeydown handler; returns true if it handled the event.
-function _trapTab(el, e) {
+export function trapTab(el, e) {
     if (e.key !== 'Tab') return false;
     const nodes = el.querySelectorAll(FOCUSABLE_SEL);
     if (!nodes.length) { e.preventDefault(); return true; }
@@ -299,6 +300,7 @@ export function CommandPalette({ open, items = [], onSelect, onClose } = {}) {
             const hint = it.hint != null ? it.hint : (it.shortcut != null ? it.shortcut : null);
             out.push(h('button', {
                 type: 'button', role: 'option',
+                id: 'ov-cmd-item-' + idx,
                 'data-idx': String(idx),
                 'aria-selected': idx === active ? 'true' : 'false',
                 class: 'ov-cmd-item' + (idx === active ? ' is-active' : ''),
@@ -330,6 +332,7 @@ export function CommandPalette({ open, items = [], onSelect, onClose } = {}) {
             filtered.length ? rowsFor(filtered) : h('div', { class: 'ov-cmd-empty' }, 'No results')));
         const sel = listEl.querySelector('.ov-cmd-item.is-active');
         if (sel && sel.scrollIntoView) sel.scrollIntoView({ block: 'nearest' });
+        if (inputEl) inputEl.setAttribute('aria-activedescendant', filtered.length ? 'ov-cmd-item-' + active : '');
     };
 
     const onKey = (e) => {
@@ -349,11 +352,15 @@ export function CommandPalette({ open, items = [], onSelect, onClose } = {}) {
             });
         },
     },
-        h('div', { class: 'ov-cmd-panel', role: 'dialog', 'aria-label': 'Command palette', onkeydown: onKey },
+        h('div', { class: 'ov-cmd-panel', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Command palette', onkeydown: onKey },
             h('input', {
                 type: 'text', class: 'ov-cmd-input', placeholder: 'Type a command…',
                 'aria-label': 'command search',
+                role: 'combobox',
+                'aria-autocomplete': 'list',
+                'aria-expanded': 'true',
                 'aria-controls': 'ov-cmd-list',
+                'aria-activedescendant': '',
                 oninput: (e) => { filterText = e.target.value; active = 0; renderInner(); },
                 ref: (el) => { if (!el || el._ovCmdIn) return; el._ovCmdIn = true; inputEl = el; queueMicrotask(() => el.focus()); },
             }),
@@ -368,14 +375,38 @@ export function CommandPalette({ open, items = [], onSelect, onClose } = {}) {
 // per-emoji <button> labels below. This is intentional product content, not
 // decorative chrome.
 const EMOJI_CATEGORIES = [
-    { id: 'smileys', label: '😀', emoji: ['😀','😁','😂','🤣','😊','😍','😘','😎','🤔','😅','😉','🙂','😇','🥳','😴','🤩','😜','😢','😭','😡','😱','🥺','😤','😬'] },
-    { id: 'gestures', label: '👍', emoji: ['👍','👎','👌','✌️','🤞','🙏','👏','🙌','💪','👀','🤝','✋','🤙','👋','🤟','☝️'] },
-    { id: 'hearts', label: '❤️', emoji: ['❤️','🧡','💛','💚','💙','💜','🖤','🤍','💔','💕','💖','💗'] },
-    { id: 'symbols', label: '✅', emoji: ['🔥','💯','✅','❌','⭐','🎉','🎊','✨','💡','⚡','💢','💀','🚀','🏆'] },
+    { id: 'smileys', label: '😀', emoji: [
+        ['😀', 'grinning smile'], ['😁', 'grinning smile happy'], ['😂', 'joy tears laugh'], ['🤣', 'rofl laugh'],
+        ['😊', 'smile blush happy'], ['😍', 'heart eyes love'], ['😘', 'kiss'], ['😎', 'cool sunglasses'],
+        ['🤔', 'thinking'], ['😅', 'sweat smile'], ['😉', 'wink'], ['🙂', 'smile slight'],
+        ['😇', 'angel innocent'], ['🥳', 'party'], ['😴', 'sleep'], ['🤩', 'starstruck'],
+        ['😜', 'wink tongue'], ['😢', 'cry sad'], ['😭', 'sob cry'], ['😡', 'angry mad'],
+        ['😱', 'scream shock'], ['🥺', 'pleading'], ['😤', 'huff'], ['😬', 'grimace'],
+    ] },
+    { id: 'gestures', label: '👍', emoji: [
+        ['👍', 'thumbsup yes good'], ['👎', 'thumbsdown no bad'], ['👌', 'ok'], ['✌️', 'peace'],
+        ['🤞', 'fingers crossed'], ['🙏', 'pray thanks'], ['👏', 'clap'], ['🙌', 'raised hands'],
+        ['💪', 'muscle strong'], ['👀', 'eyes look'], ['🤝', 'handshake'], ['✋', 'hand stop'],
+        ['🤙', 'call'], ['👋', 'wave hi bye'], ['🤟', 'love you'], ['☝️', 'point up'],
+    ] },
+    { id: 'hearts', label: '❤️', emoji: [
+        ['❤️', 'heart love red'], ['🧡', 'heart orange'], ['💛', 'heart yellow'], ['💚', 'heart green'],
+        ['💙', 'heart blue'], ['💜', 'heart purple'], ['🖤', 'heart black'], ['🤍', 'heart white'],
+        ['💔', 'broken heart'], ['💕', 'hearts'], ['💖', 'sparkling heart'], ['💗', 'growing heart'],
+    ] },
+    { id: 'symbols', label: '✅', emoji: [
+        ['🔥', 'fire lit'], ['💯', 'hundred'], ['✅', 'check yes done'], ['❌', 'cross no'],
+        ['⭐', 'star'], ['🎉', 'party tada'], ['🎊', 'confetti'], ['✨', 'sparkles'],
+        ['💡', 'idea lightbulb'], ['⚡', 'zap lightning'], ['💢', 'anger'], ['💀', 'skull dead'],
+        ['🚀', 'rocket launch'], ['🏆', 'trophy win'],
+    ] },
 ];
+const ALL_EMOJI = EMOJI_CATEGORIES.flatMap((c) => c.emoji);
 
 // EmojiPicker — fixed popover near (anchorX, anchorY) with category tabs + grid.
-export function EmojiPicker({ open, anchorX = 0, anchorY = 0, onSelect, onClose } = {}) {
+// `query`, when non-empty, filters across all categories by name/keyword
+// substring match (case-insensitive) instead of showing the active tab.
+export function EmojiPicker({ open, anchorX = 0, anchorY = 0, onSelect, onClose, query = '' } = {}) {
     if (!open) return null;
     let cat = EMOJI_CATEGORIES[0].id;
     let rootEl = null, gridEl = null;
@@ -383,28 +414,44 @@ export function EmojiPicker({ open, anchorX = 0, anchorY = 0, onSelect, onClose
 
     const renderGrid = () => {
         if (!gridEl) return;
-        const c = EMOJI_CATEGORIES.find(x => x.id === cat) || EMOJI_CATEGORIES[0];
+        const q = (query || '').trim().toLowerCase();
+        const cells = q
+            ? ALL_EMOJI.filter(([, name]) => name.toLowerCase().includes(q))
+            : (EMOJI_CATEGORIES.find(x => x.id === cat) || EMOJI_CATEGORIES[0]).emoji;
         webjsx.applyDiff(gridEl, h('div', { class: 'ov-emoji-grid-inner' },
-            ...c.emoji.map((ch) => h('button', {
-                type: 'button', class: 'ov-emoji-cell', 'aria-label': ch,
+            cells.length ? cells.map(([ch, name]) => h('button', {
+                type: 'button', class: 'ov-emoji-cell', 'aria-label': name || ch, title: name || ch,
                 onclick: () => { if (onSelect) onSelect(ch); },
-            }, ch))));
+            }, ch)) : h('div', { class: 'ov-emoji-empty' }, 'no emoji found')));
+    };
+
+    const tabNavKey = (e) => {
+        if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+        const tabs = rootEl ? [...rootEl.querySelectorAll('.ov-emoji-tab')] : [];
+        if (!tabs.length) return;
+        const idx = tabs.indexOf(document.activeElement);
+        if (idx < 0) return;
+        e.preventDefault();
+        const next = e.key === 'ArrowRight' ? (idx + 1) % tabs.length : (idx - 1 + tabs.length) % tabs.length;
+        tabs[next].focus();
+        tabs[next].click();
     };
 
     return h('div', {
-        class: 'ov-emoji-root', role: 'dialog', 'aria-label': 'Emoji picker',
+        class: 'ov-emoji-root', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Emoji picker',
         tabindex: '-1',
-        onkeydown: (e) => { if (e.key === 'Escape') { e.preventDefault(); close(); return; } if (rootEl) _trapTab(rootEl, e); },
+        onkeydown: (e) => { if (e.key === 'Escape') { e.preventDefault(); close(); return; } tabNavKey(e); if (rootEl) trapTab(rootEl, e); },
         ref: (el) => {
             if (!el) { if (rootEl && rootEl._ovEmojiCleanup) rootEl._ovEmojiCleanup(); return; }
             if (el._ovEmoji) return; el._ovEmoji = true; rootEl = el;
             el._ovEmojiCleanup = _anchoredOverlayLifecycle(el, { anchorX, anchorY, fallbackW: 260, fallbackH: 240, close });
         },
     },
-        h('div', { class: 'ov-emoji-tabs', role: 'tablist' },
+        (query || '').trim() ? null : h('div', { class: 'ov-emoji-tabs', role: 'tablist' },
             ...EMOJI_CATEGORIES.map((c) => h('button', {
                 type: 'button', class: 'ov-emoji-tab', role: 'tab',
                 'aria-selected': c.id === cat ? 'true' : 'false',
+                'aria-controls': 'ov-emoji-panel',
                 onclick: (e) => {
                     cat = c.id;
                     const tabs = rootEl.querySelectorAll('.ov-emoji-tab');
@@ -413,7 +460,9 @@ export function EmojiPicker({ open, anchorX = 0, anchorY = 0, onSelect, onClose
                     renderGrid();
                 },
             }, c.label))),
-        h('div', { class: 'ov-emoji-grid',
+        h('div', {
+            class: 'ov-emoji-grid', id: 'ov-emoji-panel', role: 'tabpanel',
+            'aria-label': EMOJI_CATEGORIES.find(c => c.id === cat)?.label || EMOJI_CATEGORIES[0].label,
             ref: (el) => { if (!el) return; gridEl = el; queueMicrotask(renderGrid); } })
     );
 }
@@ -495,8 +544,8 @@ export function SettingsPopover({ title = 'Settings', open, anchorX = 0, anchorY
     };
 
     return h('div', {
-        class: 'ov-set-root', role: 'dialog', 'aria-label': String(title), tabindex: '-1',
-        onkeydown: (e) => { if (e.key === 'Escape') { e.preventDefault(); close(); return; } if (rootEl) _trapTab(rootEl, e); },
+        class: 'ov-set-root', role: 'dialog', 'aria-modal': 'true', 'aria-label': String(title), tabindex: '-1',
+        onkeydown: (e) => { if (e.key === 'Escape') { e.preventDefault(); close(); return; } if (rootEl) trapTab(rootEl, e); },
         ref: (el) => {
             if (!el) { if (rootEl && rootEl._ovSetCleanup) rootEl._ovSetCleanup(); return; }
             if (el._ovSet) return; el._ovSet = true; rootEl = el;
@@ -570,15 +619,31 @@ export function AuthModal({ mode = 'extension', error = '', busy = false, open =
                 h('h2', { class: 'ov-auth-title' }, 'Sign in'),
                 h('button', { type: 'button', class: 'ov-auth-x', 'aria-label': 'close', onclick: close }, Icon('x'))
             ),
-            h('div', { class: 'ov-auth-tabs', role: 'tablist' },
+            h('div', { class: 'ov-auth-tabs', role: 'tablist',
+                onkeydown: (e) => {
+                    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+                    const panel = e.currentTarget.closest('.ov-auth-panel');
+                    const tabs = panel ? [...panel.querySelectorAll('.ov-auth-tab')] : [];
+                    if (!tabs.length) return;
+                    const idx = tabs.indexOf(document.activeElement);
+                    if (idx < 0) return;
+                    e.preventDefault();
+                    const next = e.key === 'ArrowRight' ? (idx + 1) % tabs.length : (idx - 1 + tabs.length) % tabs.length;
+                    tabs[next].focus();
+                    onModeChange && onModeChange(modes[next].id);
+                },
+            },
                 ...modes.map(m => h('button', {
                     type: 'button', role: 'tab', key: 'am-' + m.id,
+                    id: 'ov-auth-tab-' + m.id,
                     class: 'ov-auth-tab' + (m.id === mode ? ' is-active' : ''),
                     'aria-selected': m.id === mode ? 'true' : 'false',
+                    'aria-controls': 'ov-auth-panel',
                     onclick: () => onModeChange && onModeChange(m.id),
                 }, m.label))
             ),
-            h('div', { class: 'ov-auth-body' }, ...body()),
+            h('div', { class: 'ov-auth-body', id: 'ov-auth-panel', role: 'tabpanel',
+                'aria-labelledby': 'ov-auth-tab-' + mode }, ...body()),
             error ? h('div', { class: 'ov-auth-error', role: 'alert' }, String(error)) : null
         )
     );

package/src/components/sessions.js

@@ -36,14 +36,16 @@ export function ConversationList({ sessions = [], selected, groups, search, capt
                                    onSelect, onNew, newLabel = 'New chat',
                                    emptyText = 'No conversations yet', loading = false, error = null,
                                    loadingText = 'Loading conversations…' } = {}) {
-  const rowFor = (s, i) => h('button', {
+  const rowFor = (s, i) => h('div', {
     // Stable key: prefer sid, else position - a missing/duplicate sid would make
     // key undefined and crash webjsx applyDiff ("reading 'key'" of undefined).
     key: 'cs-' + (s.sid != null ? s.sid : 'i' + i),
-    type: 'button',
+    role: 'option',
+    tabindex: s.sid === selected ? '0' : '-1',
     class: 'ds-session-row' + (s.sid === selected ? ' active' : '') + (s.rail ? ' rail-' + s.rail : ''),
-    'aria-current': s.sid === selected ? 'true' : null,
+    'aria-selected': s.sid === selected ? 'true' : 'false',
     onclick: () => onSelect && onSelect(s),
+    onkeydown: (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelect && onSelect(s); } },
   },
     // Positional children must NOT mix keyed VElements with null/strings (webjsx
     // applyDiff crashes "reading 'key'"). Keep these unkeyed and filter nulls so
@@ -57,7 +59,14 @@ export function ConversationList({ sessions = [], selected, groups, search, capt
     ].filter(Boolean)),
     h('span', { class: 'ds-session-meta' }, [
       s.agent ? h('span', { class: 'ds-session-agent' }, s.agent) : null,
-      s.running
+      // Optional richer status ('error'|'stale'|'running'|'stopping') mirrors the
+      // SessionCard STATUS_DISC mapping used on the Live dashboard, so a session
+      // pinned to a "Running" rail group reads the same stuck-vs-busy signal it
+      // does there rather than only a boolean live dot. Falls back to the plain
+      // running dot when no status is supplied (existing callers unaffected).
+      s.status
+        ? h('span', { class: 'status-dot-disc ' + (STATUS_DISC[s.status] || 'status-dot-live'), 'aria-label': STATUS_WORD[s.status] || s.status, role: 'img' })
+        : s.running
         ? h('span', { class: 'status-dot-disc status-dot-live', 'aria-label': 'running', role: 'img' })
         : (s.unread ? h('span', { class: 'ds-session-unread', 'aria-label': 'new activity', role: 'img' }) : null),
     ].filter(Boolean)));
@@ -84,11 +93,11 @@ export function ConversationList({ sessions = [], selected, groups, search, capt
     const bySid = new Map(sessions.map((s) => [s.sid, s]));
     inner = groups.map((g) => h('div', { key: 'g-' + g.label, class: 'ds-session-group', role: 'group', 'aria-label': g.label },
       h('div', { key: 'gl', class: 'ds-session-group-label' }, g.label),
-      h('div', { key: 'gr', class: 'ds-session-group-rows', role: 'list' }, ...g.sids.map((sid) => bySid.get(sid)).filter(Boolean).map(rowFor))));
+      h('div', { key: 'gr', class: 'ds-session-group-rows', role: 'listbox', 'aria-label': g.label }, ...g.sids.map((sid) => bySid.get(sid)).filter(Boolean).map(rowFor))));
   } else {
     inner = sessions.map(rowFor);
   }
-  const body = h('div', { key: 'body', class: 'ds-session-list', role: 'list' }, ...inner);
+  const body = h('div', { key: 'body', class: 'ds-session-list', role: 'listbox', 'aria-label': caption || 'Conversations' }, ...inner);
 
   return h('div', { class: 'ds-sessions' },
     h('div', { key: 'head', class: 'ds-session-head' },