From 0935fb0e393a1ca9124ff1b5ca3633bb2175be47 Mon Sep 17 00:00:00 2001
From: Gagancreates <gaganp000999@gmail.com>
Date: Mon, 25 May 2026 01:39:15 +0530
Subject: [PATCH] feat: rotating progress labels for code-mode commands; darker
 tool borders
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Code-mode (acpx) command block shows status-aware labels: rotating
  'Working on the task…' phrases (5s each, holding on the last) while
  running, then 'Completed the task' / "Couldn't complete the task"
- Darken outer border on all tool blocks in light and dark modes
---
 .../src/components/ai-elements/tool.tsx       |  4 +--
 .../renderer/src/lib/chat-conversation.ts     | 32 +++++++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/apps/x/apps/renderer/src/components/ai-elements/tool.tsx b/apps/x/apps/renderer/src/components/ai-elements/tool.tsx
index 5f65fa32..e0725981 100644
--- a/apps/x/apps/renderer/src/components/ai-elements/tool.tsx
+++ b/apps/x/apps/renderer/src/components/ai-elements/tool.tsx
@@ -52,7 +52,7 @@ export type ToolProps = ComponentProps<typeof Collapsible>;
 
 export const Tool = ({ className, ...props }: ToolProps) => (
   <Collapsible
-    className={cn("not-prose mb-4 w-full rounded-md border", className)}
+    className={cn("not-prose mb-4 w-full rounded-md border border-foreground/25 dark:border-foreground/30", className)}
     {...props}
   />
 );
@@ -255,7 +255,7 @@ export const ToolGroupComponent = ({ group, isToolOpen, onToolOpenChange }: Tool
     <Collapsible
       open={open}
       onOpenChange={setOpen}
-      className="not-prose mb-4 w-full rounded-md border"
+      className="not-prose mb-4 w-full rounded-md border border-foreground/25 dark:border-foreground/30"
     >
       <CollapsibleTrigger className="flex w-full items-center justify-between gap-4 p-3">
         <div className="flex min-w-0 flex-1 items-center gap-2">
diff --git a/apps/x/apps/renderer/src/lib/chat-conversation.ts b/apps/x/apps/renderer/src/lib/chat-conversation.ts
index 576997ad..4b936ced 100644
--- a/apps/x/apps/renderer/src/lib/chat-conversation.ts
+++ b/apps/x/apps/renderer/src/lib/chat-conversation.ts
@@ -517,9 +517,41 @@ const TOOL_DISPLAY_NAMES: Record<string, string> = {
  * For builtin tools, returns a static friendly name (e.g., "Reading file").
  * Falls back to the raw tool name if no mapping exists.
  */
+// Phrases shown while a code-mode task is running. They advance over time (5s
+// each) to read as progress, then hold on the last one until the task finishes.
+const CODE_MODE_RUNNING_LABELS = [
+  'Working on the task…',
+  'Inspecting the project…',
+  'Digging into the code…',
+  'Figuring it out…',
+  'Making the changes…',
+  'Wiring things up…',
+  'Putting it together…',
+]
+const CODE_MODE_LABEL_INTERVAL_MS = 5000
+
+// Detect acpx coding-agent invocations (code mode) and produce a status-aware
+// label, e.g. "Working on the task…" → "Completed the task".
+export const getCodeModeCommandLabel = (tool: ToolCall): string | null => {
+  if (tool.name !== 'executeCommand') return null
+  const input = normalizeToolInput(tool.input) as Record<string, unknown> | undefined
+  const command = typeof input?.command === 'string' ? input.command : ''
+  const match = command.match(/\bacpx\b[\s\S]*?\b(claude|codex)\b\s+exec\b/)
+  if (!match) return null
+  if (tool.status === 'error') return `Couldn't complete the task`
+  if (tool.status === 'completed') return `Completed the task`
+  // Advance through the phrases from the tool's start, holding on the last.
+  const elapsed = Math.max(0, Date.now() - tool.timestamp)
+  const step = Math.floor(elapsed / CODE_MODE_LABEL_INTERVAL_MS)
+  const idx = Math.min(step, CODE_MODE_RUNNING_LABELS.length - 1)
+  return CODE_MODE_RUNNING_LABELS[idx]
+}
+
 export const getToolDisplayName = (tool: ToolCall): string => {
   const browserLabel = getBrowserControlLabel(tool)
   if (browserLabel) return browserLabel
+  const codeModeLabel = getCodeModeCommandLabel(tool)
+  if (codeModeLabel) return codeModeLabel
   const composioData = getComposioActionCardData(tool)
   if (composioData) return composioData.label
   return TOOL_DISPLAY_NAMES[tool.name] || tool.name