From f487a4376a8e4ab502dad57aa32709a86c9a2dd2 Mon Sep 17 00:00:00 2001
From: Kevin Etchells <kevetchells@hotmail.com>
Date: Tue, 29 Jul 2025 09:21:13 +0100
Subject: [PATCH 1/2] Show tool outputs for SSR

---
 frontend/src/components/message-box.mjs |  2 +-
 frontend/src/components/tool-info.mjs   | 10 +++++++---
 frontend/src/logic/ai3.ts               | 12 ++++++++++++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/message-box.mjs b/frontend/src/components/message-box.mjs
index 924bfe3..261a62f 100644
--- a/frontend/src/components/message-box.mjs
+++ b/frontend/src/components/message-box.mjs
@@ -63,7 +63,7 @@ export class MessageBox extends LitElement {
           <h2 class="govuk-visually-hidden">AI:</h2>
           
           ${this.toolCalls.map((tool, toolIndex) => html`
-            <tool-info name=${tool.name} server=${tool.server} entries=${JSON.stringify(tool.args)} in-use=${toolIndex + 1 < this.toolCalls.length || this.content.length ? 'false' : 'true'} ref=${this.messageIndex + '-' + toolIndex}></tool-info>
+            <tool-info name=${tool.name} server=${tool.server} parameters=${JSON.stringify(tool.args)} response=${tool.response} in-use=${toolIndex + 1 < this.toolCalls.length || this.content.length ? 'false' : 'true'} ref=${this.messageIndex + '-' + toolIndex}></tool-info>
           `)}
 
           ${this.content ? html`
diff --git a/frontend/src/components/tool-info.mjs b/frontend/src/components/tool-info.mjs
index 6cbfeb9..9d31ca2 100644
--- a/frontend/src/components/tool-info.mjs
+++ b/frontend/src/components/tool-info.mjs
@@ -11,7 +11,8 @@ const ToolInfo = class extends LitElement {
   static properties = {
     name: { type: String, attribute: 'name' },
     server: { type: String, attribute: 'server' },
-    entries: { type: Object, attribute: 'entries' },
+    parameters: { type: Object, attribute: 'parameters' },
+    response: { type: String, attribute: 'response' },
     ref: { type: String, attribute: 'ref' },
     inUse: { type: String, attribute: 'in-use' },
   };
@@ -35,6 +36,7 @@ const ToolInfo = class extends LitElement {
         </span>
       </button>
       <div class="tool-info__expandable" id="tool-${this.ref}">
+        <h3 class="govuk-body-xs govuk-!-font-weight-bold">Parameters</h3>
         <table class="govuk-!-margin-top-2">
           <thead class="govuk-visually-hidden">
             <tr>
@@ -43,8 +45,8 @@ const ToolInfo = class extends LitElement {
             </tr>
           </thead>
           <tbody>
-            ${this.entries ? html`
-              ${Object.entries(this.entries).map(([key, value]) => html`
+            ${this.parameters ? html`
+              ${Object.entries(this.parameters).map(([key, value]) => html`
                 <tr>
                   <td class="govuk-body-xs govuk-!-padding-top-2 govuk-!-padding-bottom-2">${key}:</td>
                   <td class="govuk-body-xs govuk-!-padding-top-2 govuk-!-padding-bottom-2">${typeof value === 'string' ? value : JSON.stringify(value)}</td>
@@ -53,6 +55,8 @@ const ToolInfo = class extends LitElement {
             ` : ''}
           </tbody>
         </table>
+        <h3 class="govuk-body-xs govuk-!-font-weight-bold">Response</h3>
+        <p class="govuk-body-xs">${this.response}</p>
       </div>
     `;
   }
diff --git a/frontend/src/logic/ai3.ts b/frontend/src/logic/ai3.ts
index 2b550ca..aad71c2 100644
--- a/frontend/src/logic/ai3.ts
+++ b/frontend/src/logic/ai3.ts
@@ -166,6 +166,18 @@ export const getLlmResponse = async(messages: Message[], selectedServers: FormDa
         }), sessionToken);
       }
     }
+
+    // Tool response
+    if (chunk.tools?.messages) {
+      console.log('*** RESPONSE ***');
+      console.log(chunk.tools.messages[0].content, chunk.tools.messages[0].tool_call_id);
+      toolCalls[toolCalls.length - 1].response = chunk.tools.messages[0].content;
+      sendMessage(JSON.stringify({
+        type: 'tool-response',
+        data: chunk.tools.messages[0].content,
+      }), sessionToken);
+    }
+
   }
 
   return {

From 08c49c4e78b0000bcc2360da72e3fc6872f45ea0 Mon Sep 17 00:00:00 2001
From: Kevin Etchells <kevetchells@hotmail.com>
Date: Tue, 29 Jul 2025 14:50:12 +0100
Subject: [PATCH 2/2] Show tool responses when streaming

---
 frontend/src/components/message-box.mjs | 8 ++++++--
 frontend/src/logic/ai3.ts               | 2 --
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/message-box.mjs b/frontend/src/components/message-box.mjs
index 261a62f..0d8fa39 100644
--- a/frontend/src/components/message-box.mjs
+++ b/frontend/src/components/message-box.mjs
@@ -125,7 +125,7 @@ export class MessageBox extends LitElement {
 
       // parse response data
       /**
-       * @type { {type?: 'tool' | 'content' | 'end', data?: any} }
+       * @type { {type?: 'tool' | 'tool-response' | 'content' | 'end', data?: any} }
        */
       let response = {};
       try {
@@ -135,10 +135,14 @@ export class MessageBox extends LitElement {
         return;
       }
 
-      // It's a tool
+      // It's a tool call
       if (response.type === 'tool') {
         this.toolCalls = [...this.toolCalls, response.data[0]];
 
+      // It's a tool response
+      } else if (response.type === 'tool-response') {
+        this.toolCalls[this.toolCalls.length - 1].response = response.data;
+
       // It's the text response
       } else if (response.type === 'content') {
         this.content += response.data;
diff --git a/frontend/src/logic/ai3.ts b/frontend/src/logic/ai3.ts
index aad71c2..8d15b3b 100644
--- a/frontend/src/logic/ai3.ts
+++ b/frontend/src/logic/ai3.ts
@@ -169,8 +169,6 @@ export const getLlmResponse = async(messages: Message[], selectedServers: FormDa
 
     // Tool response
     if (chunk.tools?.messages) {
-      console.log('*** RESPONSE ***');
-      console.log(chunk.tools.messages[0].content, chunk.tools.messages[0].tool_call_id);
       toolCalls[toolCalls.length - 1].response = chunk.tools.messages[0].content;
       sendMessage(JSON.stringify({
         type: 'tool-response',