anentrypoint-design 0.0.188 → 0.0.191

package/package.json

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

@@ -92,21 +92,52 @@ export function AgentChat(props = {}) {
     onSelectAgent, onSelectModel, onSend, onStop, onNewChat, onInput,
     onCwdEdit, onCwdSave, onCwdCancel, onCwdClear, onCwdDraft,
     canSend = true,
+    suggestions = [], onSuggestionClick,
   } = props;
 
   const name = agentName || (agents.find((a) => a.id === selectedAgent)?.name) || selectedAgent || 'agent';
   const lastIdx = messages.length - 1;
+  const lastMsg = messages[lastIdx];
+  // 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.
+  // A message carries content (text/parts) when it has a non-empty content
+  // string OR at least one part. Used for the empty-shell skip + working tail
+  // 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 isAssistant = m.role === 'assistant';
     const isStreaming = busy && i === lastIdx && isAssistant;
     const hasParts = Array.isArray(m.parts) && m.parts.length > 0;
-    const emptyStreaming = isStreaming && !m.content && !hasParts;
+    const emptyStreaming = isStreaming && !msgHasBody(m);
     // A finished assistant message with no content and no parts is an empty
     // shell (e.g. an aborted turn) — render nothing rather than a blank bubble.
-    if (!isStreaming && isAssistant && !m.content && !hasParts) return null;
+    if (!isStreaming && isAssistant && !msgHasBody(m)) return null;
+    // Render order follows m.parts so text and tool cards INTERLEAVE in arrival
+    // order (text -> tool -> text -> tool). A message's parts may be bare
+    // strings (legacy) OR structured {kind,...} objects (md/tool/tool_result/
+    // code/...) passed straight through to ChatMessage.renderPart — this is what
+    // lets an orchestration host render the kit's collapsible ToolCallNode
+    // inline instead of flattening tools to the end of the turn.
     const parts = [];
-    if (m.content) parts.push({ kind: isAssistant ? 'md' : 'text', text: m.content });
-    if (hasParts) for (const p of m.parts) parts.push({ kind: 'text', text: p });
+    if (hasParts) {
+      for (const p of m.parts) {
+        const part = (p && typeof p === 'object' && p.kind) ? p : { kind: 'text', text: String(p) };
+        // While a turn is still streaming, render its prose as cheap inline text
+        // rather than full markdown: MdNode re-parses + re-sanitizes the WHOLE
+        // accumulated source and swaps the entire bubble innerHTML on every frame
+        // (O(n^2) over the turn, with a visible reflow). Downgrade md -> text
+        // mid-stream; the settled turn below renders real markdown once.
+        if (isStreaming && part.kind === 'md') parts.push({ kind: 'text', text: part.text });
+        else parts.push(part);
+      }
+    }
+    // m.content is the legacy/simple path (user messages, hosts that don't build
+    // interleaved parts). Only prepend it when the parts array doesn't already
+    // carry prose, so a parts-driven turn isn't double-rendered.
+    const partsHaveProse = parts.some(p => p.kind === 'md' || p.kind === 'text');
+    if (m.content && !partsHaveProse) parts.unshift({ kind: isAssistant ? 'md' : 'text', text: m.content });
     return ChatMessage({
       key: m.id || String(i),
       who: isAssistant ? 'them' : 'you',
@@ -118,14 +149,36 @@ export function AgentChat(props = {}) {
     });
   });
 
+  // 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
+  // already are, not only from the controls cluster up top.
   const composer = ChatComposer({
     value: draft,
     disabled: !canSend,
+    busy,
     placeholder: placeholder || (selectedAgent ? 'message…' : 'choose an agent first'),
     onInput: (v) => onInput && onInput(v),
     onSend: (v) => onSend && onSend(v),
+    onCancel: busy && onStop ? () => onStop() : undefined,
   });
 
+  // Empty state: a fresh thread is a void without this. Mirrors the kit's Chat
+  // empty surface (title, sub, optional starter prompts) so AgentChat opens to
+  // an invitation, not a blank panel.
+  const emptyState = (messages.length === 0)
+    ? h('div', { class: 'agentchat-empty', role: 'status' },
+        h('p', { class: 'agentchat-empty-title' }, selectedAgent ? 'Start a conversation with ' + name : 'Choose an agent to begin'),
+        h('p', { class: 'agentchat-empty-sub' },
+          selectedAgent ? 'Type a message below. The agent can read files, run tools, and search.' : 'Pick an agent from the selector above, then send a message.'),
+        (suggestions && suggestions.length)
+          ? h('div', { class: 'agentchat-empty-suggestions' },
+              ...suggestions.map((s, i) => h('button', {
+                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)
+    : null;
+
   return h('div', { class: 'agentchat' },
     AgentControls({ agents, selectedAgent, models, selectedModel, busy, status, modelsLoading,
                     onSelectAgent, onSelectModel, onNewChat, onStop }),
@@ -135,9 +188,18 @@ export function AgentChat(props = {}) {
     h('div', { class: 'agentchat-head', role: 'banner' },
       h('h2', { class: 'agentchat-title' }, name + (selectedModel ? ' · ' + selectedModel : '')),
       h('span', { class: 'agentchat-sub', 'aria-live': 'polite' },
-        busy ? 'streaming…' : (messages.length ? messages.length + (messages.length === 1 ? ' message' : ' messages') : ''))),
+        // 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…".
+        busy ? (status || 'streaming…') : (messages.length ? messages.length + (messages.length === 1 ? ' message' : ' messages') : ''))),
     h('div', { class: 'agentchat-thread', ref: threadRef(messages.length), role: 'log', 'aria-label': 'conversation' },
-      ...rows.filter(Boolean)),
+      emptyState,
+      ...rows.filter(Boolean),
+      showWorkingTail
+        ? h('div', { key: '_working', class: 'agentchat-working', role: 'status', 'aria-live': 'polite' },
+            h('span', { class: 'chat-thinking-dots', 'aria-hidden': 'true' }, h('span'), h('span'), h('span')),
+            h('span', { class: 'agentchat-working-text' }, 'working…'))
+        : null),
     composer,
   );
 }

package/src/components/chat.js

@@ -92,8 +92,12 @@ function MdNode(p) {
 function CodeNode(p) {
     const refSink = (el) => {
         if (!el) return;
-        if (el.dataset.codeKey === (p.lang || '') + '|' + (p.code || '').length) return;
-        el.dataset.codeKey = (p.lang || '') + '|' + (p.code || '').length;
+        // Key on the full code, not its length: two different blocks of the same
+        // length (e.g. an edit that swaps a line) would otherwise share a key and
+        // skip re-highlighting, leaving stale syntax coloring.
+        const codeKey = (p.lang || '') + '|' + (p.code || '');
+        if (el.dataset.codeKey === codeKey) return;
+        el.dataset.codeKey = codeKey;
         highlightCodeBlockCached(el);
     };
     return h('div', { class: 'chat-bubble chat-code', ref: refSink },

package/src/components/content.js

@@ -20,7 +20,7 @@ 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 }) {
+export function Row({ code, rank, title, sub, meta, active, state = 'default', onClick, key, style, href, kind, cols, leading, trailing, target, selected, rail, expanded }) {
     // `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>).
@@ -45,6 +45,10 @@ export function Row({ code, rank, title, sub, meta, active, state = 'default', o
         props.onkeydown = (e) => {
             if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(e); }
         };
+        // When the row is a disclosure toggle (host passes a boolean `expanded`),
+        // announce its open/closed state so AT users hear "expanded/collapsed".
+        // Omitted entirely for plain action buttons (expanded === undefined).
+        if (expanded === true || expanded === false) props['aria-expanded'] = expanded ? 'true' : 'false';
     }
     if (isDisabled) props['aria-disabled'] = 'true';
     if (isActive && (isLink || isButton)) props['aria-current'] = isActive ? 'page' : null;
@@ -332,7 +336,11 @@ export function EventList({ items, events, emptyText = 'no events', rankPad = 3
             sub: it.sub || '',
             active: it.active,
             onClick: it.onClick,
-            kind: it.kind
+            kind: it.kind,
+            rail: it.rail,
+            // Forward a disclosure state when the host marks the row as a toggle,
+            // so a clickable event row announces aria-expanded.
+            expanded: it.expanded
         }))
     );
 }

package/src/components/shell.js

@@ -249,7 +249,9 @@ export function AppShell({ topbar, crumb, side, main, status, narrow } = {}) {
         h('div', { class: 'app-body' + (hasSide ? '' : ' no-side') },
             h('div', { class: 'app-side-scrim', 'aria-hidden': 'true', onclick: () => toggleSide(false) }),
             h('div', { class: 'app-side-shell', onclick: (e) => { if (e.target.closest('a')) toggleSide(false); } }, sideNode),
-            h('main', { class: 'app-main' + (narrow ? ' narrow' : ''), id: 'app-main' }, ...(Array.isArray(main) ? main : [main]))
+            // tabindex=-1 so the skip-link (href="#app-main") actually moves
+            // keyboard focus into the main region, not just scroll to it.
+            h('main', { class: 'app-main' + (narrow ? ' narrow' : ''), id: 'app-main', tabindex: '-1' }, ...(Array.isArray(main) ? main : [main]))
         ),
         status || null
     );

package/src/kits/os/app-panes.css

@@ -1,7 +1,7 @@
 /* App-pane chrome for kit components rendered inside .wm-win bodies.
    Bible tokens only — no hardcoded color, font, or radius. Focus = inset rail; no shadows, no gradients. */
 
-/* ── terminal-app ───────────────────────────────────────────────────── */
+/* --- terminal-app --- */
 .terminal-app {
     display: flex;
     flex-direction: column;
@@ -48,7 +48,7 @@
 }
 .terminal-app-slot > * { width: 100%; height: 100%; }
 
-/* ── browser-app ────────────────────────────────────────────────────── */
+/* --- browser-app --- */
 .browser-app {
     display: flex;
     flex-direction: column;
@@ -111,7 +111,7 @@
     min-height: 18px;
 }
 
-/* ── validator-app ──────────────────────────────────────────────────── */
+/* --- validator-app --- */
 .validator-app {
     display: flex;
     flex-direction: column;