@syntrologie/adapt-chatbot 2.28.0 → 2.29.0

package/dist/{chunk-UC4XU6GH.js → chunk-VZIUXXAM.js}

@@ -223,8 +223,8 @@ var _createTrustedTypesPolicy = function _createTrustedTypesPolicy2(trustedTypes
   const policyName = "dompurify" + (suffix ? "#" + suffix : "");
   try {
     return trustedTypes.createPolicy(policyName, {
-      createHTML(html8) {
-        return html8;
+      createHTML(html9) {
+        return html9;
       },
       createScriptURL(scriptUrl) {
         return scriptUrl;
@@ -2238,12 +2238,102 @@ var en = x.lex;
 import { html as html22 } from "lit";
 import { html as html3, nothing as nothing2 } from "lit";
 import { html as html5 } from "lit";
+import { html as html8, LitElement as LitElement2 } from "lit";
+function getCtor() {
+  if (typeof window === "undefined") return void 0;
+  const w2 = window;
+  return w2.SpeechRecognition ?? w2.webkitSpeechRecognition;
+}
+function isDictationSupported() {
+  return getCtor() !== void 0;
+}
+function mapError(engineCode) {
+  switch (engineCode) {
+    case "not-allowed":
+    case "service-not-allowed":
+      return "not-allowed";
+    case "no-speech":
+      return "no-speech";
+    case "aborted":
+      return "aborted";
+    case "network":
+      return "network";
+    default:
+      return "other";
+  }
+}
+var MAX_SESSION_MS = 6e4;
+function createDictation(opts) {
+  let rec = null;
+  let listening = false;
+  let capTimer = null;
+  const finish = () => {
+    if (capTimer !== null) {
+      clearTimeout(capTimer);
+      capTimer = null;
+    }
+    if (!listening) return;
+    listening = false;
+    rec = null;
+    opts.onEnd();
+  };
+  return {
+    get listening() {
+      return listening;
+    },
+    start() {
+      if (listening) return;
+      const Ctor = getCtor();
+      if (!Ctor) return;
+      rec = new Ctor();
+      rec.lang = opts.lang ?? (document.documentElement.lang || "en-US");
+      rec.continuous = true;
+      rec.interimResults = true;
+      rec.onresult = (e) => {
+        if (!listening) return;
+        const parts = [];
+        let allFinal = true;
+        for (let i = 0; i < e.results.length; i++) {
+          const result = e.results[i];
+          const seg = result[0]?.transcript.trim() ?? "";
+          if (!result.isFinal) allFinal = false;
+          if (seg && seg !== parts[parts.length - 1]) parts.push(seg);
+        }
+        opts.onTranscript(parts.join(" "), allFinal);
+      };
+      rec.onerror = (e) => {
+        const code = mapError(e.error);
+        console.debug(`chat.dictation:error ${e.error} -> ${code}`);
+        listening = false;
+        rec = null;
+        opts.onError(code);
+      };
+      rec.onend = finish;
+      listening = true;
+      capTimer = setTimeout(() => {
+        console.debug("chat.dictation:cap 60s session limit reached \u2014 stopping");
+        const active = rec;
+        finish();
+        active?.stop();
+      }, MAX_SESSION_MS);
+      rec.start();
+    },
+    stop() {
+      const active = rec;
+      finish();
+      active?.stop();
+    }
+  };
+}
 var sendIcon = html2`<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 14V2M8 2L3 7M8 2L13 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
 var stopIcon = html2`<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1" y="1" width="12" height="12" rx="2" fill="currentColor"/></svg>`;
+var micIcon = html2`<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="6" y="1.5" width="4" height="8" rx="2" stroke="currentColor" stroke-width="1.6"/><path d="M3.5 7.5a4.5 4.5 0 0 0 9 0M8 12v2.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>`;
 function autoResize(e) {
   const el = e.target;
   el.style.height = "auto";
-  el.style.height = `${Math.min(el.scrollHeight, 150)}px`;
+  const capped = Math.min(el.scrollHeight, 150);
+  el.style.height = `${capped}px`;
+  el.style.overflowY = capped >= 150 ? "auto" : "hidden";
 }
 function renderChatInput(props) {
   const canSend = props.value.trim().length > 0 && !props.isStreaming;
@@ -2273,6 +2363,15 @@ function renderChatInput(props) {
         aria-label="Message input"
       ></textarea>
       ${props.inputActionsSlot ?? nothing}
+      ${props.showMic ? html2`<button
+            data-sc-mic-btn
+            data-listening=${props.micListening ? "true" : "false"}
+            ?disabled=${props.micDisabled ?? false}
+            @click=${props.onMicClick}
+            aria-pressed=${props.micListening ? "true" : "false"}
+            aria-label=${props.micListening ? "Stop dictation" : "Start dictation"}
+            title=${props.micDisabled ? "Microphone blocked" : props.micListening ? "Stop dictation" : "Dictate"}
+          >${micIcon}</button>` : nothing}
       <button
         data-sc-send-btn
         ?disabled=${!canSend && !props.isStreaming}
@@ -2283,7 +2382,18 @@ function renderChatInput(props) {
   `;
 }
 function fingerprint(msg) {
-  const tcIds = msg.toolCalls?.map((tc) => `${tc.id}:${tc.status}`).join(",") ?? "";
+  const tcIds = msg.toolCalls?.map((tc) => {
+    let resultKey = "-";
+    if (tc.result !== void 0) {
+      try {
+        const json = JSON.stringify(tc.result);
+        resultKey = json === void 0 ? "u" : String(json.length);
+      } catch {
+        resultKey = String(String(tc.result).length);
+      }
+    }
+    return `${tc.id}:${tc.status}:${tc.interruptId ?? ""}:${resultKey}:${tc.error ?? ""}`;
+  }).join(",") ?? "";
   return `${msg.id}:${msg.role}:${msg.content.length}:${msg.status}:${tcIds}`;
 }
 var marked = new B({ async: false, gfm: true, breaks: true });
@@ -2343,16 +2453,50 @@ function statusIcon(status) {
       return toolIcon;
   }
 }
+var STATUS_TEXT = {
+  "args-streaming": "Running\u2026",
+  running: "Running\u2026",
+  pending: "Needs approval",
+  done: "Done",
+  error: "Failed",
+  cancelled: "Cancelled"
+};
+function humanizeToolName(name) {
+  const words = name.replace(/[_-]+/g, " ").trim();
+  return words ? words.charAt(0).toUpperCase() + words.slice(1) : name;
+}
+var ARGS_SUMMARY_MAX = 90;
+var ARG_VALUE_MAX = 48;
+function summarizeArgs(args) {
+  if (!args) return "";
+  const bits = [];
+  for (const [key, value] of Object.entries(args)) {
+    if (value === null || value === void 0) continue;
+    const t = typeof value;
+    if (t !== "string" && t !== "number" && t !== "boolean") continue;
+    let rendered = String(value);
+    if (rendered.length > ARG_VALUE_MAX) rendered = `${rendered.slice(0, ARG_VALUE_MAX)}\u2026`;
+    bits.push(`${key}: ${rendered}`);
+    if (bits.join(" \xB7 ").length >= ARGS_SUMMARY_MAX) break;
+  }
+  let summary = bits.join(" \xB7 ");
+  if (summary.length > ARGS_SUMMARY_MAX) summary = `${summary.slice(0, ARGS_SUMMARY_MAX)}\u2026`;
+  return summary;
+}
 function renderToolCallCard(props) {
   const { toolCall, toolLabel, approve, deny } = props;
-  const displayName = toolLabel ?? toolCall.name;
+  const displayName = toolLabel ?? humanizeToolName(toolCall.name);
   const isActive = toolCall.status === "args-streaming" || toolCall.status === "running";
+  const statusText = STATUS_TEXT[toolCall.status] ?? "";
+  const argsSummary = summarizeArgs(toolCall.args);
   return html3`
-    <div data-sc-tool-card ?data-sc-active=${isActive}>
+    <div data-sc-tool-card ?data-sc-active=${isActive} data-sc-tool-phase=${toolCall.status}>
       <div data-sc-tool-header>
         <span data-sc-tool-icon data-sc-status=${toolCall.status}>${statusIcon(toolCall.status)}</span>
         <span data-sc-tool-name>${displayName}</span>
+        ${statusText ? html3`<span data-sc-tool-status-text data-sc-status=${toolCall.status}>${statusText}</span>` : nothing2}
       </div>
+      ${argsSummary ? html3`<div data-sc-tool-args>${argsSummary}</div>` : nothing2}
       ${toolCall.status === "error" && toolCall.error ? html3`<div data-sc-tool-error>${toolCall.error}</div>` : nothing2}
       ${toolCall.status === "pending" ? html3`<div data-sc-tool-actions>
             <button data-sc-approve @click=${approve} aria-label="Approve ${displayName}">Approve</button>
@@ -2369,18 +2513,20 @@ function renderBubbleContent(message) {
   return html4`<div data-sc-msg-assistant>${unsafeHTML(renderMarkdown(message.content))}</div>`;
 }
 function renderMessageBubble(props) {
-  const { message, toolLabels, toolRenderers, defaultToolRenderer } = props;
+  const { message, toolLabels, toolRenderers, toolContext, defaultToolRenderer } = props;
   const isUser = message.role === "user";
   const toolCards = message.toolCalls?.map((tc) => {
-    const approve = () => props.onToolApprove(tc.id);
+    const approve = (payload) => props.onToolApprove(tc.id, payload);
     const deny = () => props.onToolDeny(tc.id);
+    const context = toolContext?.[tc.name];
     const customRenderer = toolRenderers?.[tc.name];
     if (customRenderer) {
       return customRenderer.render({
         toolCall: tc,
         phase: tc.status,
         approve,
-        deny
+        deny,
+        context
       });
     }
     if (defaultToolRenderer) {
@@ -2388,22 +2534,23 @@ function renderMessageBubble(props) {
         toolCall: tc,
         phase: tc.status,
         approve,
-        deny
+        deny,
+        context
       });
     }
     return renderToolCallCard({
       toolCall: tc,
       toolLabel: toolLabels?.[tc.name],
-      approve,
+      approve: () => approve(),
       deny
     });
   });
   return html4`
-    <div data-sc-msg-row data-sc-role=${message.role}>
+    <div data-sc-msg-row data-sc-role=${message.role} data-sc-msg-id=${message.id}>
       ${!isUser ? assistantIcon : nothing3}
       <div data-sc-msg-content>
         ${renderBubbleContent(message)}
-        ${message.status === "error" ? html4`<div data-sc-msg-error>Failed to send</div>` : nothing3}
+        ${message.status === "error" ? html4`<div data-sc-msg-error>${isUser ? "Failed to send" : "Response interrupted"}</div>` : nothing3}
         ${toolCards ?? nothing3}
         ${renderActionBar({
     messageId: message.id,
@@ -2435,11 +2582,12 @@ function renderMessageList(props) {
     props.messages,
     (msg) => msg.id,
     (msg) => guard(
-      [fingerprint(msg)],
+      [fingerprint(msg), props.toolContext],
       () => renderMessageBubble({
         message: msg,
         toolLabels: props.toolLabels,
         toolRenderers: props.toolRenderers,
+        toolContext: props.toolContext,
         defaultToolRenderer: props.defaultToolRenderer,
         onCopy: props.onCopy,
         onRegenerate: props.onRegenerate,
@@ -2655,7 +2803,11 @@ var STYLE_RULES = `
   border-radius: var(--sc-chat-textarea-radius, 14px);
   padding: var(--sc-chat-textarea-padding, 10px 16px);
   font-family: inherit;
-  font-size: var(--sc-chat-textarea-font-size, 0.9rem);
+  /* >= 16px: iOS Safari auto-zooms a focused input < 16px and never zooms back
+     out (same class as the vela AdaptiveChatBar composer fix). 0.9rem was 14.4px
+     \u2192 zoom-on-focus + stuck-zoomed on the native <syntro-chat> mobile surfaces.
+     A workspace can still override the token, but must keep it >= 16px on mobile. */
+  font-size: var(--sc-chat-textarea-font-size, 1rem);
   resize: none;
   outline: none;
   background: var(--sc-chat-input-bg, #ffffff);
@@ -2664,7 +2816,7 @@ var STYLE_RULES = `
   max-height: 150px;
   line-height: 1.4;
   transition: border-color 0.2s, box-shadow 0.2s;
-  overflow-y: auto;
+  overflow-y: hidden;
 }
 
 [data-sc-chat] [data-sc-chat-input] textarea:focus {
@@ -2706,6 +2858,60 @@ var STYLE_RULES = `
   display: block;
 }
 
+[data-sc-chat] [data-sc-mic-btn] {
+  background: transparent;
+  color: var(--sc-content-text-secondary-color, #87919f);
+  border: none;
+  border-radius: 50%;
+  width: var(--sc-chat-send-btn-size, 38px);
+  height: var(--sc-chat-send-btn-size, 38px);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: color 0.2s, transform 0.15s, opacity 0.2s;
+}
+
+[data-sc-chat] [data-sc-mic-btn]:hover:not(:disabled) {
+  color: var(--sc-color-primary, #6a59ce);
+}
+
+[data-sc-chat] [data-sc-mic-btn]:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+[data-sc-chat] [data-sc-mic-btn][data-listening='true'] {
+  background: var(--sc-color-primary, #6a59ce);
+  color: var(--sc-color-primary-text, #ffffff);
+  animation: sc-mic-ring 1.5s ease-out infinite;
+}
+
+@keyframes sc-mic-ring {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--sc-color-primary, #6a59ce) 45%, transparent);
+    transform: scale(1);
+  }
+  50% { transform: scale(1.08); }
+  70% { box-shadow: 0 0 0 12px transparent; }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-sc-chat] [data-sc-mic-btn][data-listening='true'] {
+    animation: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-color-primary, #6a59ce) 35%, transparent);
+  }
+}
+
+[data-sc-chat] [data-sc-mic-btn] svg {
+  display: block;
+}
+
 /* \u2500\u2500 Typing indicator (compact: three bouncing dots) \u2500\u2500 */
 [data-sc-chat] [data-sc-typing] {
   display: flex;
@@ -2832,7 +3038,50 @@ var STYLE_RULES = `
 }
 
 [data-sc-chat] [data-sc-tool-name] {
+  font-weight: 600;
+}
+
+[data-sc-chat] [data-sc-tool-status-text] {
+  margin-left: auto;
+  font-size: 0.72rem;
   font-weight: 500;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--sc-content-text-secondary-color, #6b6b80);
+  white-space: nowrap;
+}
+
+[data-sc-chat] [data-sc-tool-status-text][data-sc-status="done"] {
+  color: #22c55e;
+}
+
+[data-sc-chat] [data-sc-tool-status-text][data-sc-status="error"] {
+  color: #ef4444;
+}
+
+[data-sc-chat] [data-sc-tool-status-text][data-sc-status="running"],
+[data-sc-chat] [data-sc-tool-status-text][data-sc-status="args-streaming"] {
+  color: #3b82f6;
+}
+
+[data-sc-chat] [data-sc-tool-status-text][data-sc-status="cancelled"] {
+  color: var(--sc-content-text-secondary-color, #6b6b80);
+  text-decoration: line-through;
+}
+
+[data-sc-chat] [data-sc-tool-args] {
+  margin-top: 6px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.76rem;
+  color: var(--sc-content-text-secondary-color, #6b6b80);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-sc-chat] [data-sc-tool-card][data-sc-tool-phase="cancelled"] {
+  opacity: 0.65;
+  border-left-color: var(--sc-content-border-color, #e8e8ee);
 }
 
 [data-sc-chat] [data-sc-tool-error] {
@@ -2892,7 +3141,7 @@ var STYLE_RULES = `
   margin-top: 4px;
 }
 
-/* \u2500\u2500 Scroll-to-bottom button \u2500\u2500 */
+/* \u2500\u2500 "Scroll to most recent" pill \u2500\u2500 */
 [data-sc-chat] [data-sc-scroll-btn] {
   position: absolute;
   bottom: 80px;
@@ -2901,12 +3150,17 @@ var STYLE_RULES = `
   background: var(--sc-chat-assistant-bubble-bg, #f4f4f8);
   color: var(--sc-content-text-color, #1a1a2e);
   border: 1px solid var(--sc-content-border-color, #e8e8ee);
-  border-radius: 50%;
-  width: 36px;
-  height: 36px;
+  border-radius: 9999px;
+  height: 28px;
+  padding: 0 10px;
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
   cursor: pointer;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   z-index: 1;
@@ -2935,34 +3189,50 @@ function injectChatStyles(root = typeof document === "undefined" ? void 0 : docu
   }
   root.insertBefore(style, root.firstChild ?? null);
 }
-var SyntroChat = class extends LitElement {
+var _SyntroChat = class _SyntroChat2 extends LitElement {
   constructor() {
     super(...arguments);
+    this.voiceInput = false;
     this._messages = [];
+    this._micListening = false;
+    this._micDisabled = false;
+    this._micBase = "";
+    this._micNetworkErrors = 0;
+    this._dictation = null;
     this._isTyping = false;
-    this._isConnected = false;
-    this._sessionId = null;
     this._inputValue = "";
     this._isComposing = false;
     this._isStreaming = false;
     this._unsubscribe = null;
     this._scrollContainer = null;
-    this._userScrolledUp = false;
     this._errorMessage = null;
+    this._stickToBottom = true;
+    this._messagesBelow = 0;
+    this._lastUserScrollIntentTs = 0;
+    this._markUserScrollIntent = () => {
+      this._lastUserScrollIntentTs = Date.now();
+    };
     this._handleScroll = () => {
       if (!this._scrollContainer) return;
-      const { scrollTop, scrollHeight, clientHeight } = this._scrollContainer;
-      this._userScrolledUp = scrollHeight - scrollTop - clientHeight > 50;
+      const atBottom = this._isAtBottom();
+      this._messagesBelow = atBottom ? 0 : this._countMessagesBelow();
+      const isUserDriven = Date.now() - this._lastUserScrollIntentTs < _SyntroChat2._USER_SCROLL_INTENT_WINDOW_MS;
+      if (isUserDriven) {
+        this._stickToBottom = atBottom;
+      }
+    };
+    this._resumeFollowing = () => {
+      this._stickToBottom = true;
+      this._scrollToBottom();
     };
     this._handleEvent = (event) => {
       switch (event.type) {
         case "session-ready":
-          this._sessionId = event.sessionId;
-          this._isConnected = true;
           break;
         case "messages-snapshot":
           this._messages = [...event.messages];
           this._isStreaming = event.messages.some((m2) => m2.status === "streaming");
+          this._stickToBottom = true;
           this._scrollToBottom();
           break;
         case "message-append":
@@ -2970,13 +3240,17 @@ var SyntroChat = class extends LitElement {
             this._messages = [...this._messages, event.message];
           }
           this._isStreaming = event.message.status === "streaming";
-          this._scrollToBottom();
+          if (event.message.role === "user") {
+            this._anchorToMessage(event.message.id);
+          } else {
+            this._onContentGrowth();
+          }
           break;
         case "message-delta": {
           this._messages = this._messages.map(
             (m2) => m2.id === event.messageId ? { ...m2, content: m2.content + event.delta } : m2
           );
-          this._scrollToBottom();
+          this._onContentGrowth();
           break;
         }
         case "message-complete":
@@ -2987,9 +3261,22 @@ var SyntroChat = class extends LitElement {
           break;
         case "typing":
           this._isTyping = event.isTyping;
-          if (event.isTyping) this._scrollToBottom();
+          if (event.isTyping) this._onContentGrowth();
           break;
         case "tool-call": {
+          const hasParent = this._messages.some((m2) => m2.id === event.messageId);
+          if (!hasParent) {
+            this._messages = [
+              ...this._messages,
+              {
+                id: event.messageId,
+                role: "assistant",
+                content: "",
+                timestamp: Date.now(),
+                status: "streaming"
+              }
+            ];
+          }
           this._messages = this._messages.map((m2) => {
             if (m2.id !== event.messageId) return m2;
             const existing = (m2.toolCalls ?? []).findIndex((tc) => tc.id === event.toolCall.id);
@@ -3038,17 +3325,125 @@ var SyntroChat = class extends LitElement {
           });
           break;
         }
-        case "error":
-          this._errorMessage = event.message;
+        case "tool-call-deferred": {
+          this._messages = this._messages.map((m2) => {
+            if (!m2.toolCalls) return m2;
+            const toolCalls = m2.toolCalls.map(
+              (tc) => tc.id === event.toolCallId ? { ...tc, interruptId: event.interruptId, status: "pending" } : tc
+            );
+            return { ...m2, toolCalls };
+          });
+          break;
+        }
+        case "tool-call-cancelled": {
+          this._messages = this._messages.map((m2) => {
+            if (!m2.toolCalls) return m2;
+            const toolCalls = m2.toolCalls.map(
+              (tc) => tc.id === event.toolCallId ? { ...tc, status: "cancelled" } : tc
+            );
+            return { ...m2, toolCalls };
+          });
+          break;
+        }
+        case "tool-call-result": {
+          let foundToolName;
+          let lastIdx = -1;
+          for (let i = this._messages.length - 1; i >= 0; i--) {
+            if (this._messages[i].toolCalls?.some((tc) => tc.id === event.toolCallId)) {
+              lastIdx = i;
+              break;
+            }
+          }
+          this._messages = this._messages.map((m2, idx) => {
+            if (idx !== lastIdx || !m2.toolCalls) return m2;
+            const toolCalls = m2.toolCalls.map((tc) => {
+              if (tc.id !== event.toolCallId) return tc;
+              foundToolName = tc.name;
+              const status = tc.status === "cancelled" ? "cancelled" : "done";
+              return { ...tc, result: event.result, status };
+            });
+            return { ...m2, toolCalls };
+          });
+          this.dispatchEvent(
+            new CustomEvent("tool-result-received", {
+              detail: {
+                toolCallId: event.toolCallId,
+                toolName: foundToolName,
+                result: event.result
+              },
+              bubbles: true,
+              composed: true
+            })
+          );
+          break;
+        }
+        case "error": {
+          const isSoftTurnEnd = event.code === "USAGE_LIMIT";
+          this._isStreaming = false;
+          this._messages = this._messages.map((m2) => {
+            const wasStreaming = m2.status === "streaming";
+            const hasLiveTool = m2.toolCalls?.some(
+              (tc) => tc.status === "args-streaming" || tc.status === "running"
+            );
+            if (!wasStreaming && !hasLiveTool) return m2;
+            const toolCalls = hasLiveTool ? m2.toolCalls?.map((tc) => {
+              if (tc.status !== "args-streaming" && tc.status !== "running") return tc;
+              return isSoftTurnEnd ? { ...tc, status: "cancelled" } : { ...tc, status: "error", error: tc.error ?? event.message };
+            }) : m2.toolCalls;
+            const nextStatus = wasStreaming ? isSoftTurnEnd ? "complete" : "error" : m2.status;
+            return { ...m2, status: nextStatus, toolCalls };
+          });
+          if (isSoftTurnEnd) {
+            const id = `usage-limit-${this._messages.length}-${event.message.length}`;
+            this._messages = [
+              ...this._messages,
+              {
+                id,
+                role: "assistant",
+                content: event.message,
+                timestamp: Date.now(),
+                status: "complete"
+              }
+            ];
+          } else {
+            console.warn("[syntro-chat] run error:", event.message);
+            this._errorMessage = "Hmm, that didn't go through. Please try again.";
+          }
           break;
+        }
         case "a2ui":
           break;
       }
     };
     this._onInput = (e) => {
+      if (this._micListening) this._dictation?.stop();
       this._inputValue = e.target.value;
     };
+    this._onMicClick = () => {
+      if (this._micListening) {
+        this._dictation?.stop();
+        return;
+      }
+      this._micBase = this._inputValue;
+      this._dictation = createDictation({
+        onTranscript: (text2) => {
+          this._micNetworkErrors = 0;
+          this._inputValue = this._micBase + (this._micBase ? " " : "") + text2;
+        },
+        onEnd: () => {
+          this._micListening = false;
+        },
+        onError: (code) => {
+          this._micListening = false;
+          if (code === "not-allowed") this._micDisabled = true;
+          if (code === "network" && ++this._micNetworkErrors >= 2) this._micDisabled = true;
+        }
+      });
+      this._dictation.start();
+      this._micListening = this._dictation.listening;
+    };
     this._onSend = () => {
+      if (this._micListening) this._dictation?.stop();
       const text2 = this._inputValue.trim();
       if (!text2) return;
       this._appendUserMessage(text2);
@@ -3074,17 +3469,66 @@ var SyntroChat = class extends LitElement {
     this._onRegenerate = (messageId) => {
       this.transport.send({ type: "regenerate", messageId });
     };
-    this._onToolApprove = (toolCallId) => {
+    this._onToolApprove = (toolCallId, payload, _retryCount = 0) => {
+      const interruptId = this._findInterruptId(toolCallId);
+      if (interruptId) {
+        this._markToolDone(toolCallId);
+        this.transport.send({
+          type: "deferred-tool-resume",
+          interruptId,
+          decision: "approve",
+          ...payload?.editedArgs ? { editedArgs: payload.editedArgs } : {}
+        });
+        return;
+      }
+      if (this._isPendingClientTool(toolCallId)) {
+        this._markToolDone(toolCallId);
+        this.transport.send({
+          type: "tool-result",
+          toolCallId,
+          result: payload?.editedArgs ?? null,
+          approved: true
+        });
+        return;
+      }
+      if (_retryCount < 10) {
+        setTimeout(() => this._onToolApprove(toolCallId, payload, _retryCount + 1), 200);
+        return;
+      }
       this._markToolDone(toolCallId);
       this.transport.send({
         type: "tool-result",
         toolCallId,
-        result: null,
+        result: payload?.editedArgs ?? null,
         approved: true
       });
     };
-    this._onToolDeny = (toolCallId) => {
-      this._markToolDone(toolCallId);
+    this._onToolDeny = (toolCallId, _retryCount = 0) => {
+      const interruptId = this._findInterruptId(toolCallId);
+      if (interruptId) {
+        this._markToolCancelled(toolCallId);
+        this.transport.send({
+          type: "deferred-tool-resume",
+          interruptId,
+          decision: "deny"
+        });
+        return;
+      }
+      if (this._isPendingClientTool(toolCallId)) {
+        this._markToolCancelled(toolCallId);
+        this.transport.send({
+          type: "tool-result",
+          toolCallId,
+          result: null,
+          approved: false
+        });
+        return;
+      }
+      if (_retryCount < 10) {
+        setTimeout(() => this._onToolDeny(toolCallId, _retryCount + 1), 200);
+        return;
+      }
+      this._markToolCancelled(toolCallId);
       this.transport.send({
         type: "tool-result",
         toolCallId,
@@ -3102,6 +3546,58 @@ var SyntroChat = class extends LitElement {
       this.sendUserMessage(text2);
     };
   }
+  // ── Public API: thread navigation ──────────────────────────────────
+  //
+  // Composing elements (the per-surface wrappers like
+  // <ap-action-plan-chat>) call these to load past threads and start
+  // new ones. The chat element doesn't own the thread index — that's
+  // the consumer's job (typically a sibling <syntro-chat-thread-list>
+  // + the consumer's REST endpoint). This element just owns the
+  // visible message state.
+  /**
+   * Replace the chat's message history wholesale. Used by the host
+   * shell when switching threads (after fetching the new thread's
+   * messages from persistence) or when restoring a session.
+   *
+   * Emits `chat-messages-replaced` so dependent UI (overlay cards,
+   * action plan sidebar) can react.
+   */
+  replaceMessages(messages) {
+    this._messages = [...messages];
+    this._isStreaming = messages.some((m2) => m2.status === "streaming");
+    this._stickToBottom = true;
+    requestAnimationFrame(() => this._scrollToBottom());
+    this.dispatchEvent(
+      new CustomEvent("chat-messages-replaced", {
+        detail: { messageCount: messages.length },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /**
+   * Clear the chat for a fresh conversation. Equivalent to
+   * `replaceMessages([])` plus a state reset.
+   */
+  reset() {
+    this._messages = [];
+    this._isStreaming = false;
+    this._isTyping = false;
+    this._inputValue = "";
+    this._stickToBottom = true;
+    this._messagesBelow = 0;
+    this._errorMessage = null;
+  }
+  /**
+   * Externally drive the typing indicator. Used by the surface's
+   * run-state restore (BUG-1781288061): a remounted thread whose durable
+   * producer run is still in flight shows the indicator and polls — the
+   * transport's own 'typing' events only exist while the SSE stream lives.
+   */
+  setTyping(isTyping) {
+    this._isTyping = isTyping;
+    if (isTyping) this._scrollToBottom();
+  }
   createRenderRoot() {
     return this;
   }
@@ -3118,11 +3614,29 @@ var SyntroChat = class extends LitElement {
     this._unsubscribe?.();
     this._unsubscribe = null;
     this.transport?.disconnect();
+    this._scrollContainer?.removeEventListener("scroll", this._handleScroll);
+    this._scrollContainer?.removeEventListener("wheel", this._markUserScrollIntent);
+    this._scrollContainer?.removeEventListener("touchmove", this._markUserScrollIntent);
+    this._scrollContainer = null;
   }
   firstUpdated() {
     this._ensureStylesInRoot();
+    this._attachScrollListener();
+  }
+  /** Attach the scroll listener if not already attached. Called from both
+   * firstUpdated (initial mount) and updated (re-mounts — Lit never
+   * re-fires firstUpdated for the same element instance, and
+   * disconnectedCallback tears the listener down). */
+  _attachScrollListener() {
+    if (this._scrollContainer) return;
     this._scrollContainer = this.querySelector("[data-sc-scroll-area]");
     this._scrollContainer?.addEventListener("scroll", this._handleScroll);
+    this._scrollContainer?.addEventListener("wheel", this._markUserScrollIntent, {
+      passive: true
+    });
+    this._scrollContainer?.addEventListener("touchmove", this._markUserScrollIntent, {
+      passive: true
+    });
   }
   /**
    * Resolve the *effective* rendering root for this chat instance.
@@ -3157,6 +3671,7 @@ var SyntroChat = class extends LitElement {
     injectChatStyles(this._resolveStyleRoot());
   }
   updated() {
+    this._attachScrollListener();
     this._injectCodeCopyButtons();
   }
   _injectCodeCopyButtons() {
@@ -3176,8 +3691,32 @@ var SyntroChat = class extends LitElement {
       block.appendChild(btn);
     }
   }
+  _isAtBottom() {
+    if (!this._scrollContainer) return true;
+    const { scrollTop, scrollHeight, clientHeight } = this._scrollContainer;
+    return scrollHeight - scrollTop - clientHeight <= _SyntroChat2._BOTTOM_EPSILON_PX;
+  }
+  /** Count messages whose bottom edge hasn't entered the viewport yet.
+   * At the bottom this is 0 (pill hidden); it decrements one-by-one as the
+   * visitor scrolls down past each message. */
+  _countMessagesBelow() {
+    const container = this._scrollContainer;
+    if (!container) return 0;
+    if (this._isAtBottom()) return 0;
+    const viewportBottom = container.getBoundingClientRect().top + container.clientHeight;
+    let count = 0;
+    for (const row of this.querySelectorAll("[data-sc-msg-row]")) {
+      if (row.getBoundingClientRect().bottom > viewportBottom + 4) count += 1;
+    }
+    return count > 0 ? count : 1;
+  }
+  /** Recompute `_messagesBelow` from live geometry. Called on scroll AND on
+   * content growth (deltas grow scrollHeight without a scroll event). */
+  _syncScrollState() {
+    this._messagesBelow = this._isAtBottom() ? 0 : this._countMessagesBelow();
+  }
   _scrollToBottom() {
-    if (this._userScrolledUp) return;
+    if (!this._stickToBottom) return;
     requestAnimationFrame(() => {
       if (this._scrollContainer?.scrollTo) {
         this._scrollContainer.scrollTo({
@@ -3185,8 +3724,35 @@ var SyntroChat = class extends LitElement {
           behavior: "smooth"
         });
       }
+      this._syncScrollState();
     });
   }
+  /**
+   * Anchor the view so the given (just-sent) user message sits at the TOP of
+   * the scroll area: the visitor sees their message, then reads the reply
+   * top-down instead of chasing an auto-scrolling tail.
+   */
+  _anchorToMessage(messageId) {
+    this._stickToBottom = false;
+    requestAnimationFrame(() => {
+      const container = this._scrollContainer;
+      if (!container?.scrollTo) return;
+      const row = this.querySelector(`[data-sc-msg-id="${messageId}"]`);
+      if (!row) return;
+      const top = row.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop;
+      container.scrollTo({ top, behavior: "smooth" });
+      this._syncScrollState();
+    });
+  }
+  /** Content grew (delta/typing/append while anchored): don't move the
+   * view, but re-evaluate whether the pill should show. */
+  _onContentGrowth() {
+    if (this._stickToBottom) {
+      this._scrollToBottom();
+      return;
+    }
+    requestAnimationFrame(() => this._syncScrollState());
+  }
   _appendUserMessage(text2) {
     const msg = {
       id: `user-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
@@ -3196,14 +3762,34 @@ var SyntroChat = class extends LitElement {
       status: "complete"
     };
     this._messages = [...this._messages, msg];
-    this._scrollToBottom();
+    this._anchorToMessage(msg.id);
+  }
+  _isPendingClientTool(toolCallId) {
+    for (const m2 of this._messages) {
+      const tc = m2.toolCalls?.find((t) => t.id === toolCallId);
+      if (tc) return tc.status === "pending" && !tc.interruptId;
+    }
+    return false;
+  }
+  _findInterruptId(toolCallId) {
+    for (const m2 of this._messages) {
+      const tc = m2.toolCalls?.find((t) => t.id === toolCallId);
+      if (tc?.interruptId) return tc.interruptId;
+    }
+    return void 0;
   }
   _markToolDone(toolCallId) {
+    this._markToolStatus(toolCallId, "done");
+  }
+  /** Deny paths mark 'cancelled' — the frozen card must READ as rejected
+   * ("Rejected" label), never as the done-phase "Approved". */
+  _markToolCancelled(toolCallId) {
+    this._markToolStatus(toolCallId, "cancelled");
+  }
+  _markToolStatus(toolCallId, status) {
     this._messages = this._messages.map((m2) => {
       if (!m2.toolCalls) return m2;
-      const toolCalls = m2.toolCalls.map(
-        (tc) => tc.id === toolCallId ? { ...tc, status: "done" } : tc
-      );
+      const toolCalls = m2.toolCalls.map((tc) => tc.id === toolCallId ? { ...tc, status } : tc);
       return { ...m2, toolCalls };
     });
   }
@@ -3216,6 +3802,7 @@ var SyntroChat = class extends LitElement {
    * duplicating logic.
    */
   sendUserMessage(text2) {
+    if (this._micListening) this._dictation?.stop();
     const trimmed = text2.trim();
     if (!trimmed) return;
     this._appendUserMessage(trimmed);
@@ -3237,6 +3824,7 @@ var SyntroChat = class extends LitElement {
       isTyping: this._isTyping,
       toolLabels: this.toolLabels,
       toolRenderers: this.toolRenderers,
+      toolContext: this.toolContext,
       defaultToolRenderer: this.defaultToolRenderer,
       onCopy: this._onCopy,
       onRegenerate: this._onRegenerate,
@@ -3246,10 +3834,7 @@ var SyntroChat = class extends LitElement {
       typingIndicatorSlot: this.slots?.typingIndicator
     })}
         </div>
-        ${this._userScrolledUp ? html7`<button data-sc-scroll-btn @click=${() => {
-      this._userScrolledUp = false;
-      this._scrollToBottom();
-    }} aria-label="Scroll to bottom"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>` : nothing5}
+        ${this._messagesBelow > 0 ? html7`<button data-sc-scroll-btn @click=${this._resumeFollowing} aria-label="Scroll to most recent — ${this._messagesBelow} ${this._messagesBelow === 1 ? "message" : "messages"} below"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>${this._messagesBelow} ${this._messagesBelow === 1 ? "message" : "messages"}</span></button>` : nothing5}
         ${this._errorMessage ? html7`<div data-sc-error role="alert">${this._errorMessage}</div>` : nothing5}
         ${renderChatInput({
       value: this._inputValue,
@@ -3265,37 +3850,161 @@ var SyntroChat = class extends LitElement {
       onSuggestion: this._onSuggestion,
       inputActionsSlot: this.slots?.inputActions,
       beforeInputSlot: this.slots?.beforeInput,
-      placeholder: this.placeholder
+      // Listening is a mode the visitor must be able to see AND exit:
+      // the placeholder doubles as the tap-to-stop instruction.
+      placeholder: this._micListening ? "Listening \u2014 tap the mic to stop" : this.placeholder,
+      showMic: this.voiceInput && isDictationSupported(),
+      micListening: this._micListening,
+      micDisabled: this._micDisabled,
+      onMicClick: this._onMicClick
     })}
       </div>
     `;
   }
 };
-SyntroChat.properties = {
+_SyntroChat.properties = {
   transport: { attribute: false },
   greeting: { type: String },
   suggestions: { attribute: false },
   toolLabels: { attribute: false },
   toolRenderers: { attribute: false },
+  toolContext: { attribute: false },
   defaultToolRenderer: { attribute: false },
   autoExecTools: { attribute: false },
   placeholder: { type: String },
   slots: { attribute: false },
+  voiceInput: { type: Boolean, attribute: "voice-input" },
   _messages: { state: true },
+  _micListening: { state: true },
+  _micDisabled: { state: true },
   _isTyping: { state: true },
-  _isConnected: { state: true },
-  _sessionId: { state: true },
   _inputValue: { state: true },
   _isComposing: { state: true },
   _isStreaming: { state: true },
-  _userScrolledUp: { state: true },
+  _messagesBelow: { state: true },
   _errorMessage: { state: true }
 };
+_SyntroChat._BOTTOM_EPSILON_PX = 50;
+_SyntroChat._USER_SCROLL_INTENT_WINDOW_MS = 1200;
+var SyntroChat = _SyntroChat;
+var SyntroChatThreadList = class extends LitElement2 {
+  constructor() {
+    super(...arguments);
+    this.threadsEndpoint = "";
+    this.activeThreadId = null;
+    this.newThreadLabel = "New thread";
+    this.emptyStateLabel = "No threads yet";
+    this._threads = [];
+    this._loading = false;
+    this._error = null;
+    this._onThreadClick = (threadId) => {
+      if (threadId === this.activeThreadId) return;
+      this.dispatchEvent(
+        new CustomEvent("thread-selected", {
+          detail: { threadId },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.threadsEndpoint) void this.refresh();
+  }
+  updated(changed) {
+    if (changed.has("threadsEndpoint") && this.threadsEndpoint) {
+      void this.refresh();
+    }
+  }
+  /** Re-fetch the thread index. Call after creating/archiving a thread. */
+  async refresh() {
+    if (!this.threadsEndpoint) return;
+    this._loading = true;
+    this._error = null;
+    try {
+      const res = await fetch(this.threadsEndpoint, {
+        method: "GET",
+        headers: { ...this.authHeaders ?? {}, Accept: "application/json" }
+      });
+      if (!res.ok) {
+        this._error = `Failed to load threads (${res.status})`;
+        this._threads = [];
+        return;
+      }
+      const data = await res.json();
+      this._threads = (data.threads ?? []).filter((t) => t.status !== "archived");
+    } catch (e) {
+      this._error = e instanceof Error ? e.message : "Failed to load threads";
+      this._threads = [];
+    } finally {
+      this._loading = false;
+    }
+  }
+  /** Imperative: request the host to start a new thread.
+   *  Fires `new-thread-requested`. The host clears the chat element and
+   *  drops `activeThreadId` so the next user message goes to a fresh
+   *  backend thread.
+   */
+  createNewThread() {
+    this.dispatchEvent(new CustomEvent("new-thread-requested", { bubbles: true, composed: true }));
+  }
+  render() {
+    return html8`
+      <div data-sc-thread-list>
+        <button
+          type="button"
+          data-sc-new-thread-btn
+          @click=${() => this.createNewThread()}
+          aria-label=${this.newThreadLabel}
+        >
+          ${this.newThreadLabel}
+        </button>
+        ${this._loading ? html8`<div data-sc-thread-list-loading>Loading…</div>` : this._error ? html8`<div data-sc-thread-list-error>${this._error}</div>` : this._threads.length === 0 ? html8`<div data-sc-thread-list-empty>${this.emptyStateLabel}</div>` : html8`<ul data-sc-thread-list-items role="list">
+                  ${this._threads.map(
+      (t) => html8`
+                      <li
+                        data-sc-thread-list-item
+                        ?data-sc-active=${t.remoteId === this.activeThreadId}
+                      >
+                        <button
+                          type="button"
+                          @click=${() => this._onThreadClick(t.remoteId)}
+                          title=${t.title ?? t.remoteId}
+                        >
+                          ${t.title || "Untitled thread"}
+                        </button>
+                      </li>
+                    `
+    )}
+                </ul>`}
+      </div>
+    `;
+  }
+};
+SyntroChatThreadList.properties = {
+  threadsEndpoint: { type: String, attribute: "threads-endpoint" },
+  authHeaders: { attribute: false },
+  activeThreadId: { type: String, attribute: "active-thread-id" },
+  newThreadLabel: { type: String, attribute: "new-thread-label" },
+  emptyStateLabel: { type: String, attribute: "empty-state-label" },
+  _threads: { state: true },
+  _loading: { state: true },
+  _error: { state: true }
+};
+if (!customElements.get("syntro-chat-thread-list")) {
+  customElements.define("syntro-chat-thread-list", SyntroChatThreadList);
+}
 if (!customElements.get("syntro-chat")) {
   customElements.define("syntro-chat", SyntroChat);
 }
 
 export {
+  isDictationSupported,
+  createDictation,
   renderMarkdown
 };
 /*! Bundled license information:
@@ -3303,4 +4012,4 @@ export {
 dompurify/dist/purify.es.mjs:
   (*! @license DOMPurify 3.3.1 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.1/LICENSE *)
 */
-//# sourceMappingURL=chunk-UC4XU6GH.js.map
+//# sourceMappingURL=chunk-VZIUXXAM.js.map