story-kit: merge 86_story_show_live_activity_status_instead_of_static_thinking_indicator_in_chat

frontend/src/api/client.ts

@@ -50,7 +50,8 @@ export type WsResponse =
 			request_id: string;
 			tool_name: string;
 			tool_input: Record<string, unknown>;
-	  };
+	  }
+	| { type: "tool_activity"; tool_name: string };
 
 export interface ProviderConfig {
 	provider: string;
@@ -260,6 +261,7 @@ export class ChatWebSocket {
 		toolName: string,
 		toolInput: Record<string, unknown>,
 	) => void;
+	private onActivity?: (toolName: string) => void;
 	private connected = false;
 	private closeTimer?: number;
 	private wsPath = DEFAULT_WS_PATH;
@@ -302,6 +304,7 @@ export class ChatWebSocket {
 						data.tool_name,
 						data.tool_input,
 					);
+				if (data.type === "tool_activity") this.onActivity?.(data.tool_name);
 			} catch (err) {
 				this.onError?.(String(err));
 			}
@@ -341,6 +344,7 @@ export class ChatWebSocket {
 				toolName: string,
 				toolInput: Record<string, unknown>,
 			) => void;
+			onActivity?: (toolName: string) => void;
 		},
 		wsPath = DEFAULT_WS_PATH,
 	) {
@@ -350,6 +354,7 @@ export class ChatWebSocket {
 		this.onError = handlers.onError;
 		this.onPipelineState = handlers.onPipelineState;
 		this.onPermissionRequest = handlers.onPermissionRequest;
+		this.onActivity = handlers.onActivity;
 		this.wsPath = wsPath;
 		this.shouldReconnect = true;
 

frontend/src/components/Chat.tsx

@@ -14,6 +14,23 @@ const { useCallback, useEffect, useRef, useState } = React;
 
 const NARROW_BREAKPOINT = 900;
 
+function formatToolActivity(toolName: string): string {
+	switch (toolName) {
+		case "read_file":
+			return "Reading file...";
+		case "write_file":
+			return "Writing file...";
+		case "list_directory":
+			return "Listing directory...";
+		case "search_files":
+			return "Searching files...";
+		case "exec_shell":
+			return "Executing command...";
+		default:
+			return `Using ${toolName}...`;
+	}
+}
+
 interface ChatProps {
 	projectPath: string;
 	onCloseProject: () => void;
@@ -38,6 +55,7 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 		merge: [],
 	});
 	const [claudeSessionId, setClaudeSessionId] = useState<string | null>(null);
+	const [activityStatus, setActivityStatus] = useState<string | null>(null);
 	const [permissionRequest, setPermissionRequest] = useState<{
 		requestId: string;
 		toolName: string;
@@ -159,6 +177,7 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 				const last = history[history.length - 1];
 				if (last?.role === "assistant" && !last.tool_calls) {
 					setLoading(false);
+					setActivityStatus(null);
 				}
 			},
 			onSessionId: (sessionId) => {
@@ -167,6 +186,7 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 			onError: (message) => {
 				console.error("WebSocket error:", message);
 				setLoading(false);
+				setActivityStatus(null);
 			},
 			onPipelineState: (state) => {
 				setPipeline(state);
@@ -174,6 +194,9 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 			onPermissionRequest: (requestId, toolName, toolInput) => {
 				setPermissionRequest({ requestId, toolName, toolInput });
 			},
+			onActivity: (toolName) => {
+				setActivityStatus(formatToolActivity(toolName));
+			},
 		});
 
 		return () => {
@@ -248,6 +271,7 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 			}
 
 			setLoading(false);
+			setActivityStatus(null);
 		} catch (e) {
 			console.error("Failed to cancel chat:", e);
 		}
@@ -276,6 +300,7 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 		}
 		setLoading(true);
 		setStreamingContent("");
+		setActivityStatus(null);
 
 		try {
 			const provider = isClaudeCode
@@ -352,6 +377,7 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 			setMessages([]);
 			setStreamingContent("");
 			setLoading(false);
+			setActivityStatus(null);
 			setClaudeSessionId(null);
 		}
 	};
@@ -644,7 +670,9 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 										marginTop: "10px",
 									}}
 								>
-									<span className="pulse">Thinking...</span>
+									<span className="pulse">
+										{activityStatus ?? "Thinking..."}
+									</span>
 								</div>
 							)}
 							<div ref={messagesEndRef} />