From 75670bc7b43af08060258215f3077dd2e17c286c Mon Sep 17 00:00:00 2001
From: Xi Zhang <zacharyzhang2022@gmail.com>
Date: Tue, 23 Jun 2026 10:30:11 +0100
Subject: [PATCH] chore: bump version to 0.1.4

---
 package-lock.json                   |  4 +--
 package.json                        |  2 +-
 src/app/components/ActionGroup.tsx  |  2 ++
 src/app/components/ConfigDialog.tsx |  7 ++++-
 src/app/components/ToolCallBox.tsx  | 42 +++++++++++++----------------
 5 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6d6cfe1..bd5ccbc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@evoscientist/webui",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@evoscientist/webui",
-      "version": "0.1.3",
+      "version": "0.1.4",
       "license": "Apache-2.0",
       "dependencies": {
         "@langchain/core": "1.1.19",
diff --git a/package.json b/package.json
index 07485f0..c8a98a4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@evoscientist/webui",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Web UI for EvoScientist — a self-evolving AI scientist built on DeepAgents/LangGraph.",
   "author": "Xi Zhang <zacharyzhang2022@gmail.com>",
   "type": "module",
diff --git a/src/app/components/ActionGroup.tsx b/src/app/components/ActionGroup.tsx
index ae6bc62..e6fa2ce 100644
--- a/src/app/components/ActionGroup.tsx
+++ b/src/app/components/ActionGroup.tsx
@@ -125,6 +125,8 @@ export const ActionGroup = React.memo<ActionGroupProps>(function ActionGroup({
       <button
         type="button"
         aria-expanded={open}
+        aria-label={`${open ? "Collapse" : "Expand"} ${headerText}`}
+        title={headerText}
         onClick={() => setOpen((v) => !v)}
         className={cn(
           "group flex w-full items-center gap-2 rounded-md border border-border bg-[var(--color-surface)] px-3 py-2 text-left text-sm text-muted-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
diff --git a/src/app/components/ConfigDialog.tsx b/src/app/components/ConfigDialog.tsx
index deaefbf..fdd57e8 100644
--- a/src/app/components/ConfigDialog.tsx
+++ b/src/app/components/ConfigDialog.tsx
@@ -137,6 +137,8 @@ export function ConfigDialog({
               type="checkbox"
               checked={collapseAgentActions}
               onChange={(e) => setCollapseAgentActions(e.target.checked)}
+              aria-label="Collapse agent actions by default"
+              aria-describedby="collapseAgentActions-description"
               className="mt-1 size-4 rounded border-border accent-[var(--brand)]"
             />
             <Label
@@ -144,7 +146,10 @@ export function ConfigDialog({
               className="text-sm font-normal leading-snug"
             >
               Collapse agent actions by default
-              <span className="block text-xs text-muted-foreground">
+              <span
+                id="collapseAgentActions-description"
+                className="block text-xs text-muted-foreground"
+              >
                 Keeps tool-call sequences folded while running and after
                 completion. Approval controls remain visible.
               </span>
diff --git a/src/app/components/ToolCallBox.tsx b/src/app/components/ToolCallBox.tsx
index 99f357d..704940c 100644
--- a/src/app/components/ToolCallBox.tsx
+++ b/src/app/components/ToolCallBox.tsx
@@ -28,21 +28,20 @@ import { formatToolLabel } from "@/lib/toolLabel";
 // JSON.stringify'd. Both truncated so the row stays one line.
 function previewArgValue(value: unknown): string {
   const MAX = 80;
-  let s: string;
-  if (typeof value === "string") {
-    s = value.replace(/\s+/g, " ").trim();
-  } else if (value === null || value === undefined) {
-    s = String(value);
-  } else {
-    try {
-      s = JSON.stringify(value);
-    } catch {
-      s = String(value);
-    }
-  }
+  const s = formatValue(value, { pretty: false }).replace(/\s+/g, " ").trim();
   return s.length > MAX ? s.slice(0, MAX - 1) + "…" : s;
 }
 
+function formatValue(value: unknown, options?: { pretty?: boolean }): string {
+  if (typeof value === "string") return value;
+  if (value === null || value === undefined) return String(value);
+  try {
+    return JSON.stringify(value, null, options?.pretty ? 2 : 0);
+  } catch {
+    return String(value);
+  }
+}
+
 interface ToolCallBoxProps {
   toolCall: ToolCall;
   uiComponent?: any;
@@ -83,8 +82,9 @@ export const ToolCallBox = React.memo<ToolCallBoxProps>(
     );
     const fallbackActionRequestKey = useMemo(() => {
       if (!actionRequest) return null;
-      return `${toolCall.id}:${actionRequest.name}:${JSON.stringify(
-        actionRequest.args
+      return `${toolCall.id}:${actionRequest.name}:${formatValue(
+        actionRequest.args,
+        { pretty: false }
       )}`;
     }, [actionRequest, toolCall.id]);
     const actionRequestKey =
@@ -184,7 +184,8 @@ export const ToolCallBox = React.memo<ToolCallBoxProps>(
       }));
     }, []);
 
-    const hasContent = result || Object.keys(args).length > 0;
+    const hasResult = result !== undefined && result !== null;
+    const hasContent = hasResult || Object.keys(args).length > 0;
     const isActionRequestSubmitted =
       actionRequestSubmitted ?? submittedActionRequestKey === actionRequestKey;
     const showApproval =
@@ -276,10 +277,7 @@ export const ToolCallBox = React.memo<ToolCallBoxProps>(
                     <div className="space-y-2">
                       {Object.entries(args).map(([key, value]) => {
                         const preview = previewArgValue(value);
-                        const fullText =
-                          typeof value === "string"
-                            ? value
-                            : JSON.stringify(value, null, 2);
+                        const fullText = formatValue(value, { pretty: true });
                         // No fold when the preview already shows the value
                         // verbatim — saves a click on short single-line args.
                         const isFoldable = preview !== fullText;
@@ -344,7 +342,7 @@ export const ToolCallBox = React.memo<ToolCallBoxProps>(
                     </div>
                   </div>
                 )}
-                {result && (
+                {hasResult && (
                   <div className={cn("mt-4", compact && "mt-2")}>
                     <h4 className="mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                       Result
@@ -355,9 +353,7 @@ export const ToolCallBox = React.memo<ToolCallBoxProps>(
                         compact && "p-1.5 text-[11px] leading-5"
                       )}
                     >
-                      {typeof result === "string"
-                        ? result
-                        : JSON.stringify(result, null, 2)}
+                      {formatValue(result, { pretty: true })}
                     </pre>
                   </div>
                 )}