From afdf3d57cb7ae4cbf0a519d1b53872f151ecba87 Mon Sep 17 00:00:00 2001
From: bndw <ben@bdw.to>
Date: Sun, 1 Mar 2026 08:10:35 -0800
Subject: feat: Add `activityStatus` state and `handleCancel` to App.ts… (+4
 more)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ✅ Add `activityStatus` state and `handleCancel` to App.tsx; update Escape handler
- ✅ Extend `onClaudeMessage` handler: tool_progress, task_progress, restructure result block
- ✅ Pass `activityStatus` and `onCancel` props to `<ChatPane>` in App.tsx
- ✅ Update ChatPane.tsx props interface and loading bubble render
- ✅ Add loading bubble CSS (flex layout, cancel × styles, pulse animation)
---
 renderer/src/components/ChatPane.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

(limited to 'renderer/src/components')

diff --git a/renderer/src/components/ChatPane.tsx b/renderer/src/components/ChatPane.tsx
index 40e682c..c2cdfbb 100644
--- a/renderer/src/components/ChatPane.tsx
+++ b/renderer/src/components/ChatPane.tsx
@@ -10,6 +10,8 @@ interface ChatPaneProps {
   collapsed: boolean;
   chatWidth: number;
   onToggleCollapse: () => void;
+  activityStatus?: string | null;
+  onCancel?: () => void;
 }
 
 export function ChatPane({
@@ -21,6 +23,8 @@ export function ChatPane({
   collapsed,
   chatWidth,
   onToggleCollapse,
+  activityStatus,
+  onCancel,
 }: ChatPaneProps) {
   const [input, setInput] = useState("");
   const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -57,7 +61,18 @@ export function ChatPane({
             ))}
             {isLoading && (
               <div className="message assistant loading">
-                <div className="message-content">Thinking...</div>
+                <div className="message-content">
+                  <span>{activityStatus ?? "Thinking…"}</span>
+                  {onCancel && (
+                    <button
+                      className="loading-cancel-x"
+                      onClick={onCancel}
+                      title="Cancel (Esc)"
+                    >
+                      ×
+                    </button>
+                  )}
+                </div>
               </div>
             )}
             <div ref={messagesEndRef} />
-- 
cgit v1.2.3