feat: Add `activityStatus` state and `handleCancel` to App.ts… (+4 more)

- ✅ 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)

1 files changed, 16 insertions, 1 deletions

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} />