story-kit: merge 86_story_show_live_activity_status_instead_of_static_thinking_indicator_in_chat

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