From c4c2c92974031cf4857806e502046b30c79c61be Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Thu, 20 Nov 2025 10:46:11 +0000
Subject: [PATCH] Simplify todo tool calls and tighten layout

---
 packages/ui/src/components/tool-call.tsx      | 19 --------
 .../ui/src/styles/messaging/tool-call.css     | 43 ++-----------------
 2 files changed, 3 insertions(+), 59 deletions(-)

diff --git a/packages/ui/src/components/tool-call.tsx b/packages/ui/src/components/tool-call.tsx
index 09533f3e..5c4f996f 100644
--- a/packages/ui/src/components/tool-call.tsx
+++ b/packages/ui/src/components/tool-call.tsx
@@ -994,27 +994,8 @@ export default function ToolCall(props: ToolCallProps) {
       return <div class="tool-call-todo-empty">No plan items yet.</div>
     }
 
-    const completionPercent = Math.round((counts.completed / counts.total) * 100)
-
     return (
       <div class="tool-call-todo-region">
-        <div class="tool-call-todo-summary">
-          <div class="tool-call-todo-metrics">
-            <span class="tool-call-todo-metric"><span class="tool-call-todo-metric-value">{counts.completed}</span> done</span>
-            <span class="tool-call-todo-metric"><span class="tool-call-todo-metric-value">{counts.in_progress}</span> in progress</span>
-            <span class="tool-call-todo-metric"><span class="tool-call-todo-metric-value">{counts.pending}</span> pending</span>
-          </div>
-          <div
-            class="tool-call-todo-progress"
-            role="progressbar"
-            aria-valuemin="0"
-            aria-valuemax={counts.total}
-            aria-valuenow={counts.completed}
-            aria-label="Plan progress"
-          >
-            <div class="tool-call-todo-progress-bar" style={{ width: `${completionPercent}%` }} />
-          </div>
-        </div>
         <div class="tool-call-todos" role="list">
           <For each={todos}>
             {(todo) => {
diff --git a/packages/ui/src/styles/messaging/tool-call.css b/packages/ui/src/styles/messaging/tool-call.css
index 8d301477..a8b5d347 100644
--- a/packages/ui/src/styles/messaging/tool-call.css
+++ b/packages/ui/src/styles/messaging/tool-call.css
@@ -646,44 +646,7 @@
 }
 
 .tool-call-todo-region {
-  @apply flex flex-col gap-3;
-}
-
-.tool-call-todo-summary {
-  @apply flex flex-col gap-2;
-  background-color: var(--surface-base);
-  border: 1px solid var(--border-base);
-  border-radius: 10px;
-  padding: 10px 12px;
-}
-
-.tool-call-todo-metrics {
-  @apply flex flex-wrap items-center gap-3;
-  font-size: var(--font-size-xs);
-  color: var(--text-secondary);
-}
-
-.tool-call-todo-metric-value {
-  color: var(--text-primary);
-  font-weight: var(--font-weight-semibold);
-  margin-right: 4px;
-}
-
-.tool-call-todo-progress {
-  position: relative;
-  height: 8px;
-  border-radius: 9999px;
-  background-color: var(--surface-secondary);
-  overflow: hidden;
-  border: 1px solid var(--border-base);
-}
-
-.tool-call-todo-progress-bar {
-  position: absolute;
-  inset: 0;
-  height: 100%;
-  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
-  transition: width 0.2s ease;
+  @apply flex flex-col;
 }
 
 .tool-call-todo-empty {
@@ -692,7 +655,7 @@
 }
 
 .tool-call-todos {
-  @apply my-2 flex flex-col gap-2;
+  @apply my-2 flex flex-col gap-0;
   list-style: none;
   padding: 4px 0;
 }
@@ -700,7 +663,7 @@
 .tool-call-todo-item {
   @apply flex items-start gap-3;
   border: 1px solid var(--border-base);
-  border-radius: 8px;
+  border-radius: 0;
   padding: 10px 12px;
   background-color: var(--surface-secondary);
 }