From 7551332c014fc13016c054256a9a3517cc83025a Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 16 Feb 2026 19:24:43 -0700
Subject: [PATCH] Improvements to UI

---
 web/public/locales/en/views/chat.json      |  4 +++-
 web/src/components/chat/ToolCallBubble.tsx | 24 +++++++++++++++-------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/web/public/locales/en/views/chat.json b/web/public/locales/en/views/chat.json
index 152a8210a..674e630a3 100644
--- a/web/public/locales/en/views/chat.json
+++ b/web/public/locales/en/views/chat.json
@@ -6,5 +6,7 @@
   "showTools": "Show tools ({{count}})",
   "hideTools": "Hide tools",
   "call": "Call",
-  "result": "Result"
+  "result": "Result",
+  "arguments": "Arguments:",
+  "response": "Response:"
 }
diff --git a/web/src/components/chat/ToolCallBubble.tsx b/web/src/components/chat/ToolCallBubble.tsx
index 05c39ae2a..64bc0fbb9 100644
--- a/web/src/components/chat/ToolCallBubble.tsx
+++ b/web/src/components/chat/ToolCallBubble.tsx
@@ -6,6 +6,7 @@ import {
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import { ChevronDown, ChevronRight } from "lucide-react";
 
 type ToolCallBubbleProps = {
@@ -43,10 +44,17 @@ export function ToolCallBubble({
           <Button
             variant="ghost"
             size="sm"
-            className="h-auto w-full justify-start gap-2 p-0 text-xs hover:bg-transparent"
+            className={cn(
+              "h-auto w-full min-w-0 justify-start gap-2 whitespace-normal p-0 text-left text-xs hover:bg-transparent",
+              !isLeft && "hover:text-primary-foreground",
+            )}
           >
-            {open ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
-            <span className="font-medium">
+            {open ? (
+              <ChevronDown size={12} className="shrink-0" />
+            ) : (
+              <ChevronRight size={12} className="shrink-0" />
+            )}
+            <span className="break-words font-medium">
               {isLeft ? t("call") : t("result")} {normalizedName}
             </span>
           </Button>
@@ -55,16 +63,18 @@ export function ToolCallBubble({
           <div className="mt-2 space-y-2">
             {isLeft && args && Object.keys(args).length > 0 && (
               <div className="text-xs">
-                <div className="font-medium text-muted-foreground">Arguments:</div>
-                <pre className="mt-1 max-h-32 overflow-auto rounded bg-muted/50 p-2 text-[10px]">
+                <div className="font-medium text-muted-foreground">
+                  {t("arguments")}
+                </div>
+                <pre className="mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words rounded bg-muted/50 p-2 text-[10px]">
                   {JSON.stringify(args, null, 2)}
                 </pre>
               </div>
             )}
             {!isLeft && response && response !== "" && (
               <div className="text-xs">
-                <div className="font-medium opacity-80">Response:</div>
-                <pre className="mt-1 max-h-32 overflow-auto rounded bg-primary/20 p-2 text-[10px]">
+                <div className="font-medium opacity-80">{t("response")}</div>
+                <pre className="mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-words rounded bg-primary/20 p-2 text-[10px]">
                   {response}
                 </pre>
               </div>