@cap-js/agents 0.9.6 → 0.9.8

package/lib/preview/chat.html

@@ -26,6 +26,7 @@
         align-items: center;
         gap: 12px;
         flex-shrink: 0;
+        position: relative;
       }
       header h1 {
         font-size: 1rem;
@@ -74,11 +75,15 @@
       }
 
       .msg,
-      .thinking-summary {
+      .turn-panel {
         max-width: 75%;
         box-sizing: border-box;
       }
 
+      .msg-wrap .msg {
+        max-width: 100%;
+      }
+
       .msg {
         padding: 10px 14px;
         border-radius: 12px;
@@ -96,6 +101,16 @@
         border-bottom-right-radius: 3px;
         white-space: pre-wrap;
       }
+      .msg.user.queued {
+        opacity: 0.65;
+      }
+      .msg.user.queued::after {
+        content: "Queued";
+        display: block;
+        margin-top: 4px;
+        font-size: 0.7em;
+        text-align: right;
+      }
       .msg.agent {
         align-self: flex-start;
         background: #d0e9ff;
@@ -246,6 +261,7 @@
 
       #prompt {
         flex: 1;
+        box-sizing: border-box;
         padding: 10px 14px;
         border: 1px solid #91adc5;
         border-radius: 8px;
@@ -288,7 +304,6 @@
       #send.cancel:hover {
         background: #c62828;
       }
-
       .approval-actions {
         display: flex;
         gap: 8px;
@@ -400,7 +415,7 @@
 
       /* Thinking messages are streamed into an expanded <details> panel,
          then collapsed once the final response arrives. */
-      .thinking-summary {
+      .turn-panel {
         align-self: flex-start;
         margin: 4px 0 8px 0;
         font-size: 0.88em;
@@ -409,17 +424,17 @@
         padding-left: 10px;
         overflow-wrap: anywhere;
       }
-      .thinking-summary summary {
+      .turn-panel summary {
         cursor: pointer;
         user-select: none;
         color: #888;
         list-style: none;
       }
-      .thinking-summary summary::before {
+      .turn-panel > summary::before {
         content: "▶ ";
         font-size: 0.8em;
       }
-      .thinking-summary[open] summary::before {
+      .turn-panel[open] > summary::before {
         content: "▼ ";
       }
       .thinking-step {
@@ -428,27 +443,231 @@
         font-style: italic;
         overflow-x: auto;
       }
-      .thinking-step + .thinking-step {
+      .thinking-step p {
+        margin: 0;
+      }
+      .thinking-step + .thinking-step,
+      .thinking-step + .tool-call-item,
+      .tool-call-item + .thinking-step,
+      .tool-call-item + .tool-call-item {
         border-top: 1px dashed #e0e0e0;
         margin-top: 4px;
       }
       @media (prefers-reduced-motion: no-preference) {
-        .thinking-summary {
+        .turn-panel {
           transition: height 0.16s ease;
         }
       }
       @media (prefers-color-scheme: dark) {
-        .thinking-summary {
+        .turn-panel {
           color: #999;
           border-left-color: #444;
         }
-        .thinking-summary summary {
+        .turn-panel summary {
           color: #aaa;
         }
-        .thinking-step + .thinking-step {
+        .thinking-step + .thinking-step,
+        .thinking-step + .tool-call-item,
+        .tool-call-item + .thinking-step,
+        .tool-call-item + .tool-call-item {
           border-top-color: #333;
         }
       }
+      .tool-call-item {
+        padding: 2px 0;
+        list-style: none;
+      }
+      .tool-call-item summary {
+        cursor: pointer;
+        user-select: none;
+        list-style: none;
+        display: flex;
+        align-items: baseline;
+        gap: 4px;
+        padding: 2px 0;
+      }
+      .tool-call-item > summary::before {
+        content: "▶";
+        font-size: 0.7em;
+        color: #aaa;
+        flex-shrink: 0;
+      }
+      .tool-call-item[open] > summary::before {
+        content: "▼";
+      }
+      .tool-call-item:not([hasdetails]) > summary::before {
+        visibility: hidden;
+      }
+      .tool-call-status {
+        font-size: 0.85em;
+      }
+      .tool-call-label {
+        font-weight: 500;
+      }
+      .tool-call-kind {
+        font-size: 0.78em;
+        padding: 1px 5px;
+        border-radius: 8px;
+        background: #eee;
+        color: #555;
+      }
+      .tool-call-kind.kind-query {
+        background: #dbeafe;
+        color: #1d4ed8;
+      }
+      .tool-call-kind.kind-call {
+        background: #fef3c7;
+        color: #92400e;
+      }
+      .tool-call-kind.kind-agent {
+        background: #ede9fe;
+        color: #5b21b6;
+      }
+      .tool-call-detail {
+        margin: 4px 0 2px 12px;
+        padding: 4px 8px;
+        background: #f9f9f9;
+        border-radius: 4px;
+        font-family: monospace;
+        font-size: 0.85em;
+        white-space: pre-wrap;
+        overflow-x: auto;
+        max-height: 200px;
+        overflow-y: auto;
+      }
+      .tool-call-detail-label {
+        font-size: 0.75em;
+        color: #999;
+        margin: 6px 0 2px 12px;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+      }
+      @media (prefers-color-scheme: dark) {
+        .tool-call-item > summary::before {
+          color: #555;
+        }
+        .tool-call-kind {
+          background: #333;
+          color: #aaa;
+        }
+        .tool-call-kind.kind-query {
+          background: #1e3a5f;
+          color: #93c5fd;
+        }
+        .tool-call-kind.kind-call {
+          background: #451a03;
+          color: #fcd34d;
+        }
+        .tool-call-kind.kind-agent {
+          background: #2e1065;
+          color: #c4b5fd;
+        }
+        .tool-call-detail {
+          background: #1a1a1a;
+          color: #ccc;
+        }
+        .tool-call-detail-label {
+          color: #555;
+        }
+      }
+      /* Subtle per-message metadata: context size + response time */
+      .msg-wrap {
+        display: flex;
+        flex-direction: column;
+        align-self: flex-start;
+        max-width: 75%;
+      }
+      .msg-meta {
+        display: inline-block;
+        align-self: flex-end;
+        margin-top: 3px;
+        font-size: 10px;
+        cursor: default;
+        position: relative;
+        white-space: nowrap;
+        color: rgba(83, 116, 146, 0.5);
+      }
+      .msg-meta:hover {
+        color: rgba(83, 116, 146, 0.85);
+      }
+      /* Hover tooltip with full token breakdown */
+      .msg-meta-tooltip {
+        display: none;
+        position: absolute;
+        bottom: calc(100% + 6px);
+        right: 0;
+        background: rgba(42, 61, 82, 0.72);
+        color: #e8f2fa;
+        font-size: 11px;
+        border-radius: 6px;
+        padding: 7px 9px;
+        z-index: 100;
+        pointer-events: none;
+        border: 1px solid rgba(255, 255, 255, 0.14);
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        text-align: left;
+      }
+      .msg-meta-tooltip-grid {
+        display: grid;
+        grid-template-columns: auto auto;
+        column-gap: 16px;
+        row-gap: 2px;
+        white-space: nowrap;
+      }
+      .msg-meta-tooltip-grid .tt-indent {
+        padding-left: 12px;
+      }
+      .msg-meta-tooltip-grid .tt-val {
+        text-align: right;
+      }
+      .msg-meta:hover .msg-meta-tooltip {
+        display: block;
+      }
+      /* Total context indicator: right-aligned row just above the input bar */
+      #context-indicator-row {
+        display: none;
+        padding: 2px 20px 2px;
+        text-align: right;
+        flex-shrink: 0;
+      }
+      #context-indicator-row.visible {
+        display: block;
+      }
+      #context-indicator {
+        font-size: 10px;
+        opacity: 0.45;
+        white-space: nowrap;
+        color: #537492;
+        position: relative;
+        cursor: default;
+        transition: opacity 0.15s;
+      }
+      #context-indicator:hover {
+        opacity: 0.85;
+      }
+      /* Hover tooltip mirroring per-message breakdown, anchored to the indicator */
+      #context-indicator:hover .msg-meta-tooltip {
+        display: block;
+      }
+      @media (prefers-color-scheme: dark) {
+        .msg-meta {
+          color: rgba(145, 173, 197, 0.55);
+        }
+        .msg-meta:hover {
+          color: rgba(145, 173, 197, 0.9);
+        }
+        .msg-meta-tooltip {
+          background: rgba(10, 30, 48, 0.72);
+          color: #c8dff0;
+          border-color: rgba(255, 255, 255, 0.12);
+          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
+        }
+        #context-indicator {
+          color: #91adc5;
+        }
+      }
     </style>
     <script src="marked.min.js"></script>
   </head>
@@ -464,6 +683,12 @@
       <div class="status-text" id="status-text"></div>
     </div>
 
+    <div id="context-indicator-row">
+      <span id="context-indicator"
+        ><span class="msg-meta-tooltip" id="context-indicator-tooltip"></span
+      ></span>
+    </div>
+
     <div id="input-row">
       <textarea id="prompt" rows="1" placeholder="Message {{agentName}}…" autofocus></textarea>
       <button id="send">Send</button>
@@ -508,21 +733,156 @@
       const THINKING_SUMMARY_ANIMATION_MS = 160
 
       let busy = false
+      let processingQueue = false
+      const messageQueue = []
       let contextId = null
       let pendingTaskId = null
       let activeTaskId = null
       let activeAbort = null
       let streamingBubble = null
+      let lastStreamingBubble = null
       let streamingText = ""
       let thinkingFinalized = false
-      let thinkingStepEls = [] // thinking steps inside the summary panel
-      let thinkingTexts = [] // accumulated text per thinking step
-      let thinkingStepCount = 0
-      let thinkingSummaryEl = null // <details> containing thinking steps
-      let currentThinkingArtifactId = null // artifactId of open thinking step
-      let currentThinkingClosed = false // true once lastChunk seen for current id
+      let thinkingStepEls = []
+      let thinkingTexts = []
+      let turnPanelEl = null // single <details> for thinking steps + tool calls
       let pendingThinkingUpdate = null
       let pendingThinkingTimer = null
+      let toolCallsMap = new Map() // tool call id → { el, data }
+
+      // Token accounting. The server sends cumulative token counts (a running sum
+      // over every model call in the conversation) plus context_tokens — the prompt
+      // size of the most recent model call, i.e. the current live context occupancy.
+      // Every field except context_tokens is cumulative, so per-turn values are
+      // derived by diffing against the previous turn.
+      let contextTokens = 0 // current live context size (last-call input incl. cache)
+      let prevContextTokens = 0 // context size after the previous turn
+      // Cumulative counts as of the previous turn, for per-turn deltas.
+      let prev = { input: 0, output: 0, cacheRead: 0, cacheCreate: 0, reasoning: 0 }
+      let responseStartTime = null
+      const contextIndicator = document.getElementById("context-indicator")
+      const contextIndicatorTooltip = document.getElementById("context-indicator-tooltip")
+
+      function fmt(n) {
+        if (n >= 1000000) return (n / 1000000).toFixed(1) + "M"
+        if (n >= 1000) return (n / 1000).toFixed(1) + "k"
+        return String(n)
+      }
+
+      function fmtDuration(ms) {
+        if (ms < 1000) return ms + "ms"
+        return (ms / 1000).toFixed(1) + "s"
+      }
+
+      function buildTooltipTable(rows) {
+        const grid = document.createElement("div")
+        grid.className = "msg-meta-tooltip-grid"
+        for (const row of rows) {
+          const label = document.createElement("div")
+          if (row.indent) label.className = "tt-indent"
+          label.textContent = row.label
+          const val = document.createElement("div")
+          val.className = "tt-val"
+          val.textContent = row.value
+          grid.appendChild(label)
+          grid.appendChild(val)
+        }
+        return grid
+      }
+
+      function buildTokenRows(contextVal, input, cacheRead, cacheCreate, output, reasoning) {
+        const rows = [{ label: "Context", value: contextVal }]
+        if (input > 0) {
+          rows.push({ label: "Input", value: fmt(input) })
+          if (cacheRead > 0) rows.push({ label: "Cache read", value: fmt(cacheRead), indent: true })
+          if (cacheCreate > 0)
+            rows.push({ label: "Cache write", value: fmt(cacheCreate), indent: true })
+        }
+        if (output > 0)
+          rows.push({
+            label: "Output" + (reasoning > 0 ? " (reasoning " + fmt(reasoning) + ")" : ""),
+            value: fmt(output),
+          })
+        return rows
+      }
+
+      function updateContextIndicator() {
+        if (contextTokens === 0) return
+        contextIndicator.childNodes[0].nodeType === Node.TEXT_NODE
+          ? (contextIndicator.childNodes[0].textContent = "⛁ " + fmt(contextTokens))
+          : contextIndicator.insertBefore(
+              document.createTextNode("⛁ " + fmt(contextTokens)),
+              contextIndicatorTooltip,
+            )
+        contextIndicatorTooltip.innerHTML = ""
+        contextIndicatorTooltip.appendChild(
+          buildTooltipTable(
+            buildTokenRows(
+              fmt(contextTokens),
+              prev.input,
+              prev.cacheRead,
+              prev.cacheCreate,
+              prev.output,
+              prev.reasoning,
+            ),
+          ),
+        )
+        document.getElementById("context-indicator-row").classList.add("visible")
+      }
+
+      function attachMsgMeta(el, usage, durationMs) {
+        // All these fields are cumulative across the conversation; diff against the
+        // previous turn to get this turn's billing-relevant amounts. input_tokens
+        // already includes cache-read/cache-write tokens, so the uncached (full-rate)
+        // input is input minus those.
+        const stepInTotal = (usage.input_tokens || 0) - prev.input
+        const stepOut = (usage.output_tokens || 0) - prev.output
+        const stepCacheRead = (usage.cache_read_input_tokens || 0) - prev.cacheRead
+        const stepCacheCreate = (usage.cache_creation_input_tokens || 0) - prev.cacheCreate
+        const stepReasoning = (usage.reasoning_tokens || 0) - prev.reasoning
+        const newContext = usage.context_tokens || usage.input_tokens || 0
+
+        // Context growth: how much this exchange added to the live context window.
+        const contextGrowth = newContext - prevContextTokens
+
+        prevContextTokens = newContext
+        contextTokens = newContext
+        prev = {
+          input: usage.input_tokens || 0,
+          output: usage.output_tokens || 0,
+          cacheRead: usage.cache_read_input_tokens || 0,
+          cacheCreate: usage.cache_creation_input_tokens || 0,
+          reasoning: usage.reasoning_tokens || 0,
+        }
+        updateContextIndicator()
+
+        const meta = document.createElement("span")
+        meta.className = "msg-meta"
+
+        const summary =
+          "⛁ " + fmt(contextGrowth) + (durationMs != null ? " · " + fmtDuration(durationMs) : "")
+        meta.appendChild(document.createTextNode(summary))
+
+        // Hover tooltip: per-turn, billing-relevant token breakdown.
+        const tooltip = document.createElement("span")
+        tooltip.className = "msg-meta-tooltip"
+        const growthLabel = (contextGrowth >= 0 ? "+" : "") + fmt(contextGrowth)
+        tooltip.appendChild(
+          buildTooltipTable(
+            buildTokenRows(
+              fmt(contextTokens) + " (" + growthLabel + ")",
+              stepInTotal,
+              stepCacheRead,
+              stepCacheCreate,
+              stepOut,
+              stepReasoning,
+            ),
+          ),
+        )
+        meta.appendChild(tooltip)
+
+        ;(el._wrap ?? el).appendChild(meta)
+      }
 
       // Auto-enable streaming when agent card advertises streaming capability
       fetch(AGENT_URL + ".well-known/agent-card.json", { headers: authHeaders() })
@@ -547,13 +907,14 @@
 
       prompt.addEventListener("input", () => {
         prompt.style.height = "auto"
-        prompt.style.height = Math.min(prompt.scrollHeight, 140) + "px"
+        const borderHeight = prompt.offsetHeight - prompt.clientHeight
+        prompt.style.height = Math.min(prompt.scrollHeight + borderHeight, 140) + "px"
+        renderComposerAction()
       })
       prompt.addEventListener("keydown", (e) => {
         if (e.key === "Enter" && !e.shiftKey) {
           e.preventDefault()
-          if (busy) cancel()
-          else send()
+          enqueueMessage()
         } else if (e.key === "ArrowUp" && prompt.selectionStart === 0) {
           e.preventDefault()
           if (historyIndex === -1) currentDraft = prompt.value
@@ -561,6 +922,7 @@
             historyIndex++
             prompt.value = inputHistory[inputHistory.length - 1 - historyIndex]
             prompt.selectionStart = prompt.selectionEnd = prompt.value.length
+            renderComposerAction()
           }
         } else if (e.key === "ArrowDown" && prompt.selectionEnd === prompt.value.length) {
           e.preventDefault()
@@ -568,55 +930,65 @@
             historyIndex--
             prompt.value = inputHistory[inputHistory.length - 1 - historyIndex]
             prompt.selectionStart = prompt.selectionEnd = prompt.value.length
+            renderComposerAction()
           } else if (historyIndex === 0) {
             historyIndex = -1
             prompt.value = currentDraft
             prompt.selectionStart = prompt.selectionEnd = prompt.value.length
+            renderComposerAction()
           }
         }
       })
       sendBtn.addEventListener("click", () => {
-        if (busy) cancel()
-        else send()
+        if (busy && !prompt.value.trim()) cancel()
+        else enqueueMessage()
       })
+      renderComposerAction()
 
-      function addMessage(role, text) {
+      function addMessage(role, text, beforeEl) {
         const el = document.createElement("div")
         el.className = "msg " + role
         if (role === "agent" || role === "agent_thinking")
           el.innerHTML = md(text, { sanitize: true })
         else el.textContent = text
         if (role === "agent_thinking") el.className = "msg agent_thinking"
-        messages.insertBefore(el, typing.parentElement === messages ? typing : statusText)
+        const anchor = beforeEl ?? (typing.parentElement === messages ? typing : statusText)
+        if (role === "agent") {
+          const wrap = document.createElement("div")
+          wrap.className = "msg-wrap"
+          wrap.appendChild(el)
+          el._wrap = wrap
+          messages.insertBefore(wrap, anchor)
+        } else {
+          messages.insertBefore(el, anchor)
+        }
         messages.scrollTop = messages.scrollHeight
         return el
       }
 
-      function updateThinkingSummaryLabel() {
-        if (!thinkingSummaryEl) return
-        const summary = thinkingSummaryEl.querySelector("summary")
-        if (!summary) return
-        const count = thinkingStepCount
-        summary.textContent = `Thinking (${count} step${count === 1 ? "" : "s"})`
+      function updateTurnPanelLabel() {
+        if (!turnPanelEl) return
+        const n = thinkingStepEls.length + toolCallsMap.size
+        turnPanelEl.querySelector("summary").textContent = `Steps (${n})`
       }
 
-      function ensureThinkingSummary() {
-        if (!thinkingSummaryEl) {
-          thinkingSummaryEl = document.createElement("details")
-          thinkingSummaryEl.className = "thinking-summary"
-          thinkingSummaryEl.open = true
+      function ensureTurnPanel() {
+        if (!turnPanelEl) {
+          turnPanelEl = document.createElement("details")
+          turnPanelEl.className = "turn-panel"
+          turnPanelEl.open = true
           const summary = document.createElement("summary")
-          summary.addEventListener("click", toggleThinkingSummary)
-          thinkingSummaryEl.appendChild(summary)
-          updateThinkingSummaryLabel()
+          summary.addEventListener("click", toggleTurnPanel)
+          turnPanelEl.appendChild(summary)
           messages.insertBefore(
-            thinkingSummaryEl,
+            turnPanelEl,
             typing.parentElement === messages ? typing : statusText,
           )
         }
-        cancelThinkingSummaryAnimation(thinkingSummaryEl)
-        thinkingSummaryEl.open = true
-        return thinkingSummaryEl
+        cancelTurnPanelAnimation(turnPanelEl)
+        turnPanelEl.open = true
+        updateTurnPanelLabel()
+        return turnPanelEl
       }
 
       function clearPendingThinkingUpdate() {
@@ -635,34 +1007,31 @@
         return window.matchMedia("(prefers-reduced-motion: reduce)").matches
       }
 
-      function resetThinkingSummaryAnimation(el) {
+      function resetTurnPanelAnimation(el) {
         el.style.height = ""
         el.style.overflow = ""
       }
 
-      function cancelThinkingSummaryAnimation(el) {
+      function cancelTurnPanelAnimation(el) {
         if (!el) return
-        el._thinkingAnimationId = (el._thinkingAnimationId ?? 0) + 1
-        resetThinkingSummaryAnimation(el)
+        el._animationId = (el._animationId ?? 0) + 1
+        resetTurnPanelAnimation(el)
       }
 
-      function toggleThinkingSummary(event) {
+      function toggleTurnPanel(event) {
         if (prefersReducedMotion()) return
         event.preventDefault()
         const el = event.currentTarget.parentElement
-        if (el.open) collapseThinkingSummary(el)
-        else expandThinkingSummary(el)
+        if (el.open) collapseTurnPanel(el)
+        else expandTurnPanel(el)
       }
 
       function renderThinkingStep(update) {
-        const { artifactId, text, lastChunk, append } = update
-        const panel = ensureThinkingSummary()
-        const idx = thinkingStepEls.findIndex((step) => step._artifactId === artifactId)
-        if (append && idx >= 0) {
-          thinkingTexts[idx] += text
-          thinkingStepEls[idx].innerHTML = md(thinkingTexts[idx])
-        } else if (artifactId === currentThinkingArtifactId && !currentThinkingClosed) {
-          thinkingTexts[idx] += "\n" + text
+        const { artifactId, text, append } = update
+        const panel = ensureTurnPanel()
+        const idx = thinkingStepEls.findIndex((s) => s._artifactId === artifactId)
+        if (idx !== -1) {
+          thinkingTexts[idx] += append ? text : "\n" + text
           thinkingStepEls[idx].innerHTML = md(thinkingTexts[idx])
         } else {
           const step = document.createElement("div")
@@ -672,12 +1041,8 @@
           panel.appendChild(step)
           thinkingStepEls.push(step)
           thinkingTexts.push(text)
-          thinkingStepCount = thinkingStepEls.length
-          updateThinkingSummaryLabel()
-          currentThinkingArtifactId = artifactId
-          currentThinkingClosed = false
+          updateTurnPanelLabel()
         }
-        if (lastChunk) currentThinkingClosed = true
         messages.scrollTop = messages.scrollHeight
       }
 
@@ -706,24 +1071,112 @@
         )
       }
 
+      function escHtml(str) {
+        return String(str)
+          .replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;")
+          .replace(/"/g, "&quot;")
+      }
+
+      const TOOL_STATUS_ICON = { running: "⏳", done: "✓", error: "✗" }
+      const TOOL_RESULT_TRUNCATE = 500
+
+      function updateToolCall(id, data) {
+        let entry = toolCallsMap.get(id)
+        if (!entry) {
+          const el = document.createElement("details")
+          el.className = "tool-call-item"
+          el.innerHTML =
+            `<summary>` +
+            `<span class="tool-call-kind" hidden></span>` +
+            `<span class="tool-call-label"></span>` +
+            `<span class="tool-call-status"></span> ` +
+            `</summary>` +
+            `<div class="tool-call-detail-label" hidden>Args</div><pre class="tool-call-detail args" hidden></pre>` +
+            `<div class="tool-call-detail-label" hidden>Result</div><pre class="tool-call-detail result" hidden></pre>`
+          entry = { el, data: {} }
+          toolCallsMap.set(id, entry)
+          ensureTurnPanel().appendChild(el)
+        } else {
+          ensureTurnPanel()
+        }
+        Object.assign(entry.data, data)
+        const { el } = entry
+        const d = entry.data
+
+        el.querySelector(".tool-call-status").textContent = TOOL_STATUS_ICON[d.status] ?? "⏳"
+        el.querySelector(".tool-call-label").textContent = d.label ?? d.name ?? ""
+        if (d.kind) {
+          const kindEl = el.querySelector(".tool-call-kind")
+          kindEl.textContent = d.kind
+          kindEl.className = `tool-call-kind kind-${d.kind}`
+          kindEl.hidden = false
+        }
+
+        const argsStr =
+          d.args != null
+            ? typeof d.args === "string"
+              ? d.args
+              : JSON.stringify(d.args, null, 2)
+            : null
+        let resultStr = null
+        if (d.result != null) {
+          const raw = typeof d.result === "string" ? d.result : JSON.stringify(d.result, null, 2)
+          resultStr =
+            raw.length > TOOL_RESULT_TRUNCATE
+              ? raw.slice(0, TOOL_RESULT_TRUNCATE) +
+                `\n… (+${raw.length - TOOL_RESULT_TRUNCATE} chars)`
+              : raw
+        }
+
+        if (argsStr != null) {
+          const pre = el.querySelector(".args")
+          pre.textContent = argsStr
+          pre.hidden = false
+          pre.previousElementSibling.hidden = false
+          el.setAttribute("hasdetails", "")
+        }
+        if (resultStr != null) {
+          const pre = el.querySelector(".result")
+          pre.textContent = resultStr
+          pre.hidden = false
+          pre.previousElementSibling.hidden = false
+          el.setAttribute("hasdetails", "")
+        }
+
+        messages.scrollTop = messages.scrollHeight
+      }
+
+      function finalizeTurnPanel() {
+        if (turnPanelEl?.open) {
+          setTimeout(() => {
+            if (turnPanelEl) collapseTurnPanel(turnPanelEl)
+          }, 800)
+        }
+      }
+
       function promoteLatestThinkingToResponse(responseText) {
-        if (!thinkingSummaryEl || !latestThinkingMatches(responseText)) return null
+        if (!turnPanelEl || !latestThinkingMatches(responseText)) return null
 
         thinkingTexts.pop()
         const responseEl = thinkingStepEls.pop()
-        thinkingStepCount = thinkingStepEls.length
 
         responseEl.className = "msg agent"
         responseEl._promotedFromThinking = true
         responseEl.innerHTML = md(responseText)
-        messages.insertBefore(responseEl, typing.parentElement === messages ? typing : statusText)
-
-        if (thinkingStepEls.length === 0) {
-          thinkingSummaryEl.remove()
-          thinkingSummaryEl = null
+        const wrap = document.createElement("div")
+        wrap.className = "msg-wrap"
+        wrap.appendChild(responseEl)
+        responseEl._wrap = wrap
+        messages.insertBefore(wrap, typing.parentElement === messages ? typing : statusText)
+
+        if (thinkingStepEls.length === 0 && toolCallsMap.size === 0) {
+          turnPanelEl.remove()
+          turnPanelEl = null
         } else {
-          updateThinkingSummaryLabel()
-          collapseThinkingSummary(thinkingSummaryEl)
+          updateTurnPanelLabel()
+          collapseTurnPanel(turnPanelEl)
         }
 
         messages.scrollTop = messages.scrollHeight
@@ -733,28 +1186,27 @@
       function finalizeThinking(beforeEl, responseText) {
         clearPendingThinkingUpdate()
         if (beforeEl?._promotedFromThinking) return
-        if (thinkingStepEls.length === 0 || !thinkingSummaryEl) return
+        if (thinkingStepEls.length === 0 || !turnPanelEl) return
         // Stream labels every model turn as thinking until terminal response is
         // known. Its final turn is authoritative response, never a thinking step.
         thinkingTexts.pop()
         const finalResponse = thinkingStepEls.pop()
         finalResponse?.remove()
-        thinkingStepCount = thinkingStepEls.length
-        updateThinkingSummaryLabel()
+        updateTurnPanelLabel()
 
-        if (thinkingStepEls.length === 0) {
-          thinkingSummaryEl.remove()
-          thinkingSummaryEl = null
+        if (thinkingStepEls.length === 0 && toolCallsMap.size === 0) {
+          turnPanelEl.remove()
+          turnPanelEl = null
           return
         }
 
-        if (beforeEl && thinkingSummaryEl.nextSibling !== beforeEl) {
-          messages.insertBefore(thinkingSummaryEl, beforeEl)
+        if (beforeEl && turnPanelEl.nextSibling !== (beforeEl._wrap ?? beforeEl)) {
+          messages.insertBefore(turnPanelEl, beforeEl._wrap ?? beforeEl)
         }
-        collapseThinkingSummary(thinkingSummaryEl)
+        collapseTurnPanel(turnPanelEl)
       }
 
-      function collapseThinkingSummary(el) {
+      function collapseTurnPanel(el) {
         if (!el || !el.open) return
 
         if (prefersReducedMotion()) {
@@ -765,20 +1217,20 @@
         const summary = el.querySelector("summary")
         const startHeight = `${el.offsetHeight}px`
         const endHeight = `${summary?.offsetHeight ?? 0}px`
-        const animationId = (el._thinkingAnimationId ?? 0) + 1
-        el._thinkingAnimationId = animationId
+        const animationId = (el._animationId ?? 0) + 1
+        el._animationId = animationId
         let finished = false
 
         const finish = () => {
           el.removeEventListener("transitionend", finish)
-          if (el._thinkingAnimationId !== animationId) return
+          if (el._animationId !== animationId) return
           if (finished) return
           finished = true
           el.open = false
-          resetThinkingSummaryAnimation(el)
+          resetTurnPanelAnimation(el)
         }
 
-        resetThinkingSummaryAnimation(el)
+        resetTurnPanelAnimation(el)
         el.style.overflow = "hidden"
         el.style.height = startHeight
         requestAnimationFrame(() => {
@@ -788,7 +1240,7 @@
         setTimeout(finish, THINKING_SUMMARY_ANIMATION_MS + 80)
       }
 
-      function expandThinkingSummary(el) {
+      function expandTurnPanel(el) {
         if (!el || el.open) return
 
         if (prefersReducedMotion()) {
@@ -800,19 +1252,19 @@
         const summary = el.querySelector("summary")
         const startHeight = `${summary?.offsetHeight ?? 0}px`
         const endHeight = `${el.scrollHeight}px`
-        const animationId = (el._thinkingAnimationId ?? 0) + 1
-        el._thinkingAnimationId = animationId
+        const animationId = (el._animationId ?? 0) + 1
+        el._animationId = animationId
         let finished = false
 
         const finish = () => {
           el.removeEventListener("transitionend", finish)
-          if (el._thinkingAnimationId !== animationId) return
+          if (el._animationId !== animationId) return
           if (finished) return
           finished = true
-          resetThinkingSummaryAnimation(el)
+          resetTurnPanelAnimation(el)
         }
 
-        resetThinkingSummaryAnimation(el)
+        resetTurnPanelAnimation(el)
         el.style.overflow = "hidden"
         el.style.height = startHeight
         requestAnimationFrame(() => {
@@ -869,31 +1321,34 @@
 
       function setBusy(val) {
         busy = val
-        prompt.disabled = val
         if (typing.parentElement !== messages) messages.insertBefore(typing, statusText)
         typing.style.display = val ? "block" : "none"
         dot.className = "status-dot" + (val ? " busy" : "")
-        if (val) {
-          sendBtn.textContent = "Cancel"
-          sendBtn.classList.add("cancel")
-          sendBtn.disabled = false
-        } else {
-          sendBtn.textContent = "Send"
-          sendBtn.classList.remove("cancel")
-          sendBtn.disabled = false
+        if (!val) {
           activeTaskId = null
           activeAbort = null
           statusText.textContent = ""
         }
+        renderComposerAction()
         messages.scrollTop = messages.scrollHeight
       }
 
+      function renderComposerAction() {
+        const stopsGeneration = busy && !prompt.value.trim()
+        sendBtn.textContent = stopsGeneration ? "Cancel" : "Send"
+        sendBtn.classList.toggle("cancel", stopsGeneration)
+        sendBtn.setAttribute("aria-label", stopsGeneration ? "Stop generating" : "Send message")
+        sendBtn.title = stopsGeneration ? "Stop generating" : "Send message"
+        sendBtn.disabled = !busy && !prompt.value.trim()
+      }
+
       async function resume(decision) {
         const taskId = pendingTaskId
         pendingTaskId = null
 
         activeTaskId = taskId
         setBusy(true)
+        responseStartTime = performance.now()
 
         const abort = new AbortController()
         activeAbort = abort
@@ -914,6 +1369,7 @@
                   taskId,
                   contextId,
                   parts: [{ kind: "text", text: decision }],
+                  metadata: { "tool-status-update": { args: true, result: true } },
                 },
               },
             }),
@@ -934,6 +1390,7 @@
         } finally {
           setBusy(false)
           prompt.focus()
+          processQueue()
         }
       }
 
@@ -957,9 +1414,19 @@
           return
         }
 
+        // Token usage: non-streaming embeds in status message metadata; streaming passes via _tokenUsage
+        const tokenUsage =
+          result?._tokenUsage ?? result?.status?.message?.metadata?.["sap.cds.agents.token-usage"]
+        const durationMs =
+          responseStartTime != null ? Math.round(performance.now() - responseStartTime) : null
+
         // If streaming already rendered the final text via lastChunk, skip.
         if (useStreaming && streamingText !== "") {
-          if (!thinkingFinalized) finalizeThinking(streamingBubble, streamingText)
+          if (!thinkingFinalized) finalizeThinking(lastStreamingBubble, streamingText)
+          if (tokenUsage && lastStreamingBubble)
+            attachMsgMeta(lastStreamingBubble, tokenUsage, durationMs)
+          finalizeTurnPanel()
+          lastStreamingBubble = null
           streamingBubble = null
           streamingText = ""
           return
@@ -969,6 +1436,7 @@
         if (streamingBubble) {
           if (streamingText) streamingBubble.innerHTML = md(streamingText)
           finalizeThinking(streamingBubble, streamingText)
+          finalizeTurnPanel()
           streamingBubble = null
           streamingText = ""
           return
@@ -979,14 +1447,15 @@
         const reply = partsToText(parts)
         const replyEl =
           promoteLatestThinkingToResponse(reply) || addMessage("agent", reply || "(no response)")
+        if (tokenUsage) attachMsgMeta(replyEl, tokenUsage, durationMs)
         finalizeThinking(replyEl, reply)
+        finalizeTurnPanel()
       }
 
-      async function send() {
+      function enqueueMessage() {
         const text = prompt.value.trim()
-        if (!text || busy) return
+        if (!text) return
 
-        // Save to input history (skip if same as last entry)
         if (inputHistory[inputHistory.length - 1] !== text) {
           inputHistory.push(text)
           if (inputHistory.length > 100) inputHistory.shift()
@@ -994,24 +1463,45 @@
         }
         historyIndex = -1
         currentDraft = ""
-
-        addMessage("user", text)
         prompt.value = ""
         prompt.style.height = "auto"
+        renderComposerAction()
+        const el = addMessage("user", text, statusText)
+        el.classList.add("queued")
+        messageQueue.push({ text, el })
+        processQueue()
+      }
+
+      async function processQueue() {
+        if (processingQueue || pendingTaskId) return
+        processingQueue = true
+        try {
+          while (messageQueue.length && !pendingTaskId) {
+            const message = messageQueue.shift()
+            await sendMessage(message)
+          }
+        } finally {
+          processingQueue = false
+        }
+      }
+
+      async function sendMessage({ text, el }) {
+        el.classList.remove("queued")
+        messages.insertBefore(el, typing.parentElement === messages ? typing : statusText)
         setBusy(true)
+        responseStartTime = performance.now()
 
         const abort = new AbortController()
         activeAbort = abort
         streamingBubble = null
+        lastStreamingBubble = null
         streamingText = ""
         thinkingFinalized = false
         clearPendingThinkingUpdate()
         thinkingStepEls = []
         thinkingTexts = []
-        thinkingStepCount = 0
-        thinkingSummaryEl = null
-        currentThinkingArtifactId = null
-        currentThinkingClosed = false
+        turnPanelEl = null
+        toolCallsMap = new Map()
 
         const useStream = useStreaming
         try {
@@ -1029,6 +1519,12 @@
                   messageId: crypto.randomUUID(),
                   ...(contextId ? { contextId } : {}),
                   parts: [{ kind: "text", text }],
+                  metadata: {
+                    "tool-status-update": {
+                      args: true,
+                      result: true,
+                    },
+                  },
                 },
               },
             }),
@@ -1133,6 +1629,17 @@
             return null
           }
 
+          if (event.artifact?.artifactId?.startsWith("tool-call-")) {
+            const dataPart = (event.artifact?.parts ?? []).find(
+              (p) => p.kind === "data" && p.data?.type === "tool-call",
+            )
+            if (dataPart) {
+              const id = event.artifact.artifactId.slice("tool-call-".length)
+              updateToolCall(id, dataPart.data)
+            }
+            return null
+          }
+
           if (event.artifact?.artifactId !== "response") return null
 
           // A2A spec: append/lastChunk are event-level fields (siblings of `artifact`).
@@ -1151,7 +1658,9 @@
               }
             }
             finalizeThinking(streamingBubble, text)
+            finalizeTurnPanel()
             thinkingFinalized = true
+            lastStreamingBubble = streamingBubble
             streamingBubble = null
             streamingText = text // dedupe with handleResult
             return null
@@ -1179,11 +1688,13 @@
 
         // Status update with final=true means terminal state
         if (event.kind === "status-update" && event.final) {
+          const tokenUsage = event.metadata?.["sap.cds.agents.token-usage"]
           return {
             id: event.taskId || activeTaskId,
             contextId: event.contextId || contextId,
             status: event.status,
             artifacts: event.artifacts,
+            _tokenUsage: tokenUsage,
           }
         }
 
@@ -1202,11 +1713,8 @@
 
       async function cancel() {
         const taskId = activeTaskId
+        activeAbort?.abort()
 
-        // Abort ongoing fetch
-        if (activeAbort) activeAbort.abort()
-
-        // Send tasks/cancel if we have a taskId
         if (taskId) {
           fetch(AGENT_URL, {
             method: "POST",
@@ -1219,10 +1727,6 @@
             }),
           }).catch(() => {})
         }
-
-        addMessage("agent", "⊘ Task canceled.")
-        setBusy(false)
-        prompt.focus()
       }
     </script>
   </body>