@cap-js/agents 0.9.2 → 0.9.4

package/lib/preview/chat.html

@@ -41,26 +41,6 @@
       header .back:hover {
         color: #fff;
       }
-      .header-toggle {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        font-size: 0.78rem;
-        color: #c8def0;
-        cursor: pointer;
-        user-select: none;
-        flex-shrink: 0;
-      }
-      .header-toggle[hidden] {
-        display: none;
-      }
-      .header-toggle input[type="checkbox"] {
-        accent-color: #7fbce8;
-        width: 14px;
-        height: 14px;
-        cursor: pointer;
-      }
-
       header .status-dot {
         width: 8px;
         height: 8px;
@@ -93,13 +73,21 @@
         gap: 14px;
       }
 
-      .msg {
+      .msg,
+      .thinking-summary {
         max-width: 75%;
+        box-sizing: border-box;
+      }
+
+      .msg {
         padding: 10px 14px;
         border-radius: 12px;
         line-height: 1.5;
         font-size: 90%;
         word-break: break-word;
+        transition:
+          background 0.15s,
+          color 0.15s;
       }
       .msg.user {
         align-self: flex-end;
@@ -127,6 +115,7 @@
         color: #1d3e5a;
         border-bottom-left-radius: 3px;
         border-left: 3px solid #537492;
+        white-space: pre-wrap;
       }
       .msg.approval::before {
         content: "Action Required";
@@ -397,6 +386,58 @@
           background: #0f2d45;
         }
       }
+
+      /* Thinking messages are streamed into an expanded <details> panel,
+         then collapsed once the final response arrives. */
+      .thinking-summary {
+        align-self: flex-start;
+        margin: 4px 0 8px 0;
+        font-size: 0.88em;
+        color: #666;
+        border-left: 2px solid #ccc;
+        padding-left: 10px;
+        overflow-wrap: anywhere;
+      }
+      .thinking-summary summary {
+        cursor: pointer;
+        user-select: none;
+        color: #888;
+        list-style: none;
+      }
+      .thinking-summary summary::before {
+        content: "▶ ";
+        font-size: 0.8em;
+      }
+      .thinking-summary[open] summary::before {
+        content: "▼ ";
+      }
+      .thinking-step {
+        min-width: 0;
+        padding: 4px 0;
+        font-style: italic;
+        overflow-x: auto;
+      }
+      .thinking-step + .thinking-step {
+        border-top: 1px dashed #e0e0e0;
+        margin-top: 4px;
+      }
+      @media (prefers-reduced-motion: no-preference) {
+        .thinking-summary {
+          transition: height 0.16s ease;
+        }
+      }
+      @media (prefers-color-scheme: dark) {
+        .thinking-summary {
+          color: #999;
+          border-left-color: #444;
+        }
+        .thinking-summary summary {
+          color: #aaa;
+        }
+        .thinking-step + .thinking-step {
+          border-top-color: #333;
+        }
+      }
     </style>
     <script src="marked.min.js"></script>
   </head>
@@ -404,15 +445,6 @@
     <header>
       <a class="back" id="back" title="Back to index">&#8592;</a>
       <h1>{{agentName}}</h1>
-      <label
-        class="header-toggle"
-        title="Stream tokens as they arrive"
-        style="margin-left: auto"
-        hidden
-      >
-        <input type="checkbox" id="streamToggle" hidden />
-        Streaming
-      </label>
       <div class="status-dot" id="dot"></div>
     </header>
 
@@ -459,16 +491,35 @@
       const prompt = document.getElementById("prompt")
       const sendBtn = document.getElementById("send")
       const dot = document.getElementById("dot")
-      const streamToggle = document.getElementById("streamToggle")
+
+      let useStreaming = false
+      const THINKING_STEP_BUFFER_MS = 100
+      const THINKING_SUMMARY_ANIMATION_MS = 160
 
       let busy = false
       let contextId = null
       let pendingTaskId = null
       let activeTaskId = null
       let activeAbort = null
-      // Live streaming bubble: created on first token, updated incrementally
       let streamingBubble = 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 pendingThinkingUpdate = null
+      let pendingThinkingTimer = null
+
+      // Auto-enable streaming when agent card advertises streaming capability
+      fetch(AGENT_URL + ".well-known/agent-card.json", { headers: authHeaders() })
+        .then((r) => (r.ok ? r.json() : null))
+        .then((card) => {
+          if (card?.capabilities?.streaming) useStreaming = true
+        })
+        .catch(() => {})
 
       const HISTORY_KEY = "chatHistory_" + AGENT_URL
       let inputHistory = JSON.parse(localStorage.getItem(HISTORY_KEY) || "[]")
@@ -521,17 +572,249 @@
       function addMessage(role, text) {
         const el = document.createElement("div")
         el.className = "msg " + role
-        if (role === "agent") el.innerHTML = md(text, { sanitize: true })
+        if (role === "agent" || role === "agent_thinking")
+          el.innerHTML = md(text, { sanitize: true })
         else el.textContent = text
-        messages.insertBefore(el, typing)
+        if (role === "agent_thinking") el.className = "msg agent_thinking"
+        messages.insertBefore(el, typing.parentElement === messages ? typing : statusText)
         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 ensureThinkingSummary() {
+        if (!thinkingSummaryEl) {
+          thinkingSummaryEl = document.createElement("details")
+          thinkingSummaryEl.className = "thinking-summary"
+          thinkingSummaryEl.open = true
+          const summary = document.createElement("summary")
+          summary.addEventListener("click", toggleThinkingSummary)
+          thinkingSummaryEl.appendChild(summary)
+          updateThinkingSummaryLabel()
+          messages.insertBefore(
+            thinkingSummaryEl,
+            typing.parentElement === messages ? typing : statusText,
+          )
+        }
+        cancelThinkingSummaryAnimation(thinkingSummaryEl)
+        thinkingSummaryEl.open = true
+        return thinkingSummaryEl
+      }
+
+      function clearPendingThinkingUpdate() {
+        if (pendingThinkingTimer) clearTimeout(pendingThinkingTimer)
+        pendingThinkingTimer = null
+        pendingThinkingUpdate = null
+      }
+
+      function flushPendingThinkingUpdate() {
+        const pending = pendingThinkingUpdate
+        clearPendingThinkingUpdate()
+        if (pending) renderThinkingStep(pending)
+      }
+
+      function prefersReducedMotion() {
+        return window.matchMedia("(prefers-reduced-motion: reduce)").matches
+      }
+
+      function resetThinkingSummaryAnimation(el) {
+        el.style.height = ""
+        el.style.overflow = ""
+      }
+
+      function cancelThinkingSummaryAnimation(el) {
+        if (!el) return
+        el._thinkingAnimationId = (el._thinkingAnimationId ?? 0) + 1
+        resetThinkingSummaryAnimation(el)
+      }
+
+      function toggleThinkingSummary(event) {
+        if (prefersReducedMotion()) return
+        event.preventDefault()
+        const el = event.currentTarget.parentElement
+        if (el.open) collapseThinkingSummary(el)
+        else expandThinkingSummary(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
+          thinkingStepEls[idx].innerHTML = md(thinkingTexts[idx])
+        } else {
+          const step = document.createElement("div")
+          step.className = "thinking-step"
+          step._artifactId = artifactId
+          step.innerHTML = md(text)
+          panel.appendChild(step)
+          thinkingStepEls.push(step)
+          thinkingTexts.push(text)
+          thinkingStepCount = thinkingStepEls.length
+          updateThinkingSummaryLabel()
+          currentThinkingArtifactId = artifactId
+          currentThinkingClosed = false
+        }
+        if (lastChunk) currentThinkingClosed = true
+        messages.scrollTop = messages.scrollHeight
+      }
+
+      function addThinkingStep(artifactId, text, lastChunk, append) {
+        if (
+          pendingThinkingUpdate &&
+          pendingThinkingUpdate.artifactId === artifactId &&
+          !pendingThinkingUpdate.lastChunk
+        ) {
+          pendingThinkingUpdate.text += text
+          pendingThinkingUpdate.lastChunk = lastChunk
+        } else {
+          flushPendingThinkingUpdate()
+          pendingThinkingUpdate = { artifactId, text, lastChunk, append }
+        }
+
+        if (pendingThinkingTimer) clearTimeout(pendingThinkingTimer)
+        pendingThinkingTimer = setTimeout(flushPendingThinkingUpdate, THINKING_STEP_BUFFER_MS)
+      }
+
+      function latestThinkingMatches(responseText) {
+        return (
+          responseText &&
+          thinkingTexts.length > 0 &&
+          thinkingTexts[thinkingTexts.length - 1].trim() === responseText.trim()
+        )
+      }
+
+      function promoteLatestThinkingToResponse(responseText) {
+        if (!thinkingSummaryEl || !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
+        } else {
+          updateThinkingSummaryLabel()
+          collapseThinkingSummary(thinkingSummaryEl)
+        }
+
+        messages.scrollTop = messages.scrollHeight
+        return responseEl
+      }
+
+      function finalizeThinking(beforeEl, responseText) {
+        clearPendingThinkingUpdate()
+        if (beforeEl?._promotedFromThinking) return
+        if (thinkingStepEls.length === 0 || !thinkingSummaryEl) 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()
+
+        if (thinkingStepEls.length === 0) {
+          thinkingSummaryEl.remove()
+          thinkingSummaryEl = null
+          return
+        }
+
+        if (beforeEl && thinkingSummaryEl.nextSibling !== beforeEl) {
+          messages.insertBefore(thinkingSummaryEl, beforeEl)
+        }
+        collapseThinkingSummary(thinkingSummaryEl)
+      }
+
+      function collapseThinkingSummary(el) {
+        if (!el || !el.open) return
+
+        if (prefersReducedMotion()) {
+          el.open = false
+          return
+        }
+
+        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
+        let finished = false
+
+        const finish = () => {
+          el.removeEventListener("transitionend", finish)
+          if (el._thinkingAnimationId !== animationId) return
+          if (finished) return
+          finished = true
+          el.open = false
+          resetThinkingSummaryAnimation(el)
+        }
+
+        resetThinkingSummaryAnimation(el)
+        el.style.overflow = "hidden"
+        el.style.height = startHeight
+        requestAnimationFrame(() => {
+          el.style.height = endHeight
+        })
+        el.addEventListener("transitionend", finish)
+        setTimeout(finish, THINKING_SUMMARY_ANIMATION_MS + 80)
+      }
+
+      function expandThinkingSummary(el) {
+        if (!el || el.open) return
+
+        if (prefersReducedMotion()) {
+          el.open = true
+          return
+        }
+
+        el.open = true
+        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
+        let finished = false
+
+        const finish = () => {
+          el.removeEventListener("transitionend", finish)
+          if (el._thinkingAnimationId !== animationId) return
+          if (finished) return
+          finished = true
+          resetThinkingSummaryAnimation(el)
+        }
+
+        resetThinkingSummaryAnimation(el)
+        el.style.overflow = "hidden"
+        el.style.height = startHeight
+        requestAnimationFrame(() => {
+          el.style.height = endHeight
+        })
+        el.addEventListener("transitionend", finish)
+        setTimeout(finish, THINKING_SUMMARY_ANIMATION_MS + 80)
+      }
+
       function addApprovalPrompt(description) {
         const el = document.createElement("div")
         el.className = "msg approval"
-        el.innerHTML = md(description || "The agent requires your approval to continue.")
+        el.textContent = description || "The agent requires your approval to continue."
         const actions = document.createElement("div")
         actions.className = "approval-actions"
 
@@ -554,7 +837,7 @@
         actions.appendChild(approveBtn)
         actions.appendChild(rejectBtn)
         el.appendChild(actions)
-        messages.insertBefore(el, typing)
+        messages.insertBefore(el, typing.parentElement === messages ? typing : statusText)
         messages.scrollTop = messages.scrollHeight
         return el
       }
@@ -566,6 +849,7 @@
       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) {
@@ -579,9 +863,6 @@
           activeTaskId = null
           activeAbort = null
           statusText.textContent = ""
-          // Reset streaming state on any transition to idle
-          streamingBubble = null
-          streamingText = ""
         }
         messages.scrollTop = messages.scrollHeight
       }
@@ -595,8 +876,6 @@
 
         const abort = new AbortController()
         activeAbort = abort
-        streamingBubble = null
-        streamingText = ""
 
         try {
           const resp = await fetch(AGENT_URL, {
@@ -605,7 +884,7 @@
             signal: abort.signal,
             body: JSON.stringify({
               jsonrpc: "2.0",
-              method: streamToggle.checked ? "message/stream" : "message/send",
+              method: useStreaming ? "message/stream" : "message/send",
               id: crypto.randomUUID(),
               params: {
                 message: {
@@ -619,7 +898,7 @@
             }),
           })
 
-          if (streamToggle.checked) {
+          if (useStreaming) {
             await handleSSEResponse(resp)
           } else {
             const envelope = await resp.json()
@@ -648,12 +927,15 @@
           pendingTaskId = taskId
           const msgParts = result?.status?.message?.parts ?? []
           const description = partsToText(msgParts)
+          flushPendingThinkingUpdate()
           addApprovalPrompt(description)
           return
         }
 
-        // If streaming was active and already rendered the final text via lastChunk, skip.
-        if (streamToggle.checked && streamingText !== "") {
+        // If streaming already rendered the final text via lastChunk, skip.
+        if (useStreaming && streamingText !== "") {
+          if (!thinkingFinalized) finalizeThinking(streamingBubble, streamingText)
+          streamingBubble = null
           streamingText = ""
           return
         }
@@ -661,6 +943,7 @@
         // Clean up any open bubble (streaming was interrupted before lastChunk)
         if (streamingBubble) {
           if (streamingText) streamingBubble.innerHTML = md(streamingText)
+          finalizeThinking(streamingBubble, streamingText)
           streamingBubble = null
           streamingText = ""
           return
@@ -669,7 +952,9 @@
         const parts =
           result?.parts ?? result?.status?.message?.parts ?? result?.artifacts?.[0]?.parts ?? []
         const reply = partsToText(parts)
-        addMessage("agent", reply || "(no response)")
+        const replyEl =
+          promoteLatestThinkingToResponse(reply) || addMessage("agent", reply || "(no response)")
+        finalizeThinking(replyEl, reply)
       }
 
       async function send() {
@@ -694,8 +979,16 @@
         activeAbort = abort
         streamingBubble = null
         streamingText = ""
-
-        const useStream = streamToggle.checked
+        thinkingFinalized = false
+        clearPendingThinkingUpdate()
+        thinkingStepEls = []
+        thinkingTexts = []
+        thinkingStepCount = 0
+        thinkingSummaryEl = null
+        currentThinkingArtifactId = null
+        currentThinkingClosed = false
+
+        const useStream = useStreaming
         try {
           const resp = await fetch(AGENT_URL, {
             method: "POST",
@@ -804,44 +1097,58 @@
           return null
         }
 
-        // Incremental artifact-update: render tokens as they arrive
-        if (event.kind === "artifact-update" && streamToggle.checked) {
+        if (event.kind === "artifact-update") {
           const parts = event.artifact?.parts ?? []
           const text = partsToText(parts)
+
+          if (event.artifact?.artifactId?.startsWith("thinking")) {
+            const lastChunk = event.lastChunk ?? false
+            if (text)
+              addThinkingStep(event.artifact.artifactId, text, lastChunk, event.append ?? false)
+            return null
+          }
+
+          if (event.artifact?.artifactId !== "response") return null
+
           // A2A spec: append/lastChunk are event-level fields (siblings of `artifact`).
           const append = event.append ?? false
           const lastChunk = event.lastChunk ?? false
 
           if (lastChunk) {
-            // lastChunk carries the authoritative full text — replace accumulated content.
+            // Terminal: current bubble = final answer. Replace with authoritative text.
             if (text) {
               if (streamingBubble) {
                 streamingBubble.innerHTML = md(text)
                 messages.scrollTop = messages.scrollHeight
               } else {
                 typing.style.display = "none"
-                addMessage("agent", text)
+                streamingBubble = promoteLatestThinkingToResponse(text) || addMessage("agent", text)
               }
             }
+            finalizeThinking(streamingBubble, text)
+            thinkingFinalized = true
             streamingBubble = null
-            streamingText = text // keep so handleResult skips duplicate render
+            streamingText = text // dedupe with handleResult
             return null
           }
 
-          if (text) {
-            if (!append || !streamingBubble) {
-              // First token — create a live bubble, hide typing indicator
-              typing.style.display = "none"
-              streamingBubble = addMessage("agent", text)
-              streamingText = text
-            } else {
-              // Subsequent token — accumulate and re-render markdown
-              streamingText += text
-              streamingBubble.innerHTML = md(streamingText)
-              messages.scrollTop = messages.scrollHeight
-            }
-          }
+          if (!text) return null
 
+          if (!append) {
+            typing.style.display = "none"
+            streamingBubble = addMessage("agent", text)
+            streamingText = text
+          } else if (streamingBubble) {
+            // Subsequent token — accumulate into the current turn's bubble.
+            streamingText += text
+            streamingBubble.innerHTML = md(streamingText)
+          } else {
+            // Defensive: append:true with no bubble yet (unexpected). Open one.
+            typing.style.display = "none"
+            streamingBubble = addMessage("agent", text)
+            streamingText = text
+          }
+          messages.scrollTop = messages.scrollHeight
           return null
         }
 

package/lib/protocol/agent-card.js

@@ -1,13 +1,17 @@
 import cds from "@sap/cds"
 import { createRequire } from "node:module"
 const { path } = cds.utils
-import { getDescription, getFilteredEntities, getFilteredActions } from "../utils/utils.js"
+import {
+  getDescription,
+  getFilteredEntities,
+  getFilteredActions,
+  slugified,
+} from "../utils/utils.js"
 import {
   scanSkills,
   parseAgentMetadata,
   parseAgentCardMd,
   parseAgentCardFile,
-  slugified,
 } from "../utils/markdown.js"
 
 const require = createRequire(import.meta.url)

package/lib/sidecar.js

@@ -1,6 +1,6 @@
 import cds from "@sap/cds"
 import A2AProtocolAdapter, { authContext } from "./index.js"
-import { slugified } from "./utils/markdown.js"
+import { slugified } from "./utils/utils.js"
 import registerDefaultAgentHandlers from "../srv/handlers/index.js"
 
 const LOG = cds.log("a2a")