story-kit: start 147_bug_activity_indicator_still_only_shows_thinking_despite_bug_140_fix

frontend/src/components/Chat.test.tsx

@@ -473,4 +473,85 @@ describe("Chat activity status indicator (Bug 140)", () => {
 		// The activity indicator should NOT be visible (just streaming bubble)
 		expect(screen.queryByTestId("activity-indicator")).not.toBeInTheDocument();
 	});
+
+	it("shows activity label for Claude Code tool names (Read, Bash, etc.)", async () => {
+		render(<Chat projectPath="/tmp/project" onCloseProject={vi.fn()} />);
+
+		await waitFor(() => expect(capturedWsHandlers).not.toBeNull());
+
+		// Simulate sending a message to set loading=true
+		const input = screen.getByPlaceholderText("Send a message...");
+		await act(async () => {
+			fireEvent.change(input, { target: { value: "Read my file" } });
+		});
+		await act(async () => {
+			fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
+		});
+
+		// Simulate tokens arriving
+		act(() => {
+			capturedWsHandlers?.onToken("Let me read that.");
+		});
+
+		// Claude Code sends tool name "Read" (not "read_file")
+		act(() => {
+			capturedWsHandlers?.onActivity("Read");
+		});
+
+		const indicator = await screen.findByTestId("activity-indicator");
+		expect(indicator).toBeInTheDocument();
+		expect(indicator).toHaveTextContent("Reading file...");
+	});
+
+	it("shows activity label for Claude Code Bash tool", async () => {
+		render(<Chat projectPath="/tmp/project" onCloseProject={vi.fn()} />);
+
+		await waitFor(() => expect(capturedWsHandlers).not.toBeNull());
+
+		const input = screen.getByPlaceholderText("Send a message...");
+		await act(async () => {
+			fireEvent.change(input, { target: { value: "Run the tests" } });
+		});
+		await act(async () => {
+			fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
+		});
+
+		act(() => {
+			capturedWsHandlers?.onToken("Running tests now.");
+		});
+
+		act(() => {
+			capturedWsHandlers?.onActivity("Bash");
+		});
+
+		const indicator = await screen.findByTestId("activity-indicator");
+		expect(indicator).toBeInTheDocument();
+		expect(indicator).toHaveTextContent("Executing command...");
+	});
+
+	it("shows generic label for unknown tool names", async () => {
+		render(<Chat projectPath="/tmp/project" onCloseProject={vi.fn()} />);
+
+		await waitFor(() => expect(capturedWsHandlers).not.toBeNull());
+
+		const input = screen.getByPlaceholderText("Send a message...");
+		await act(async () => {
+			fireEvent.change(input, { target: { value: "Do something" } });
+		});
+		await act(async () => {
+			fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
+		});
+
+		act(() => {
+			capturedWsHandlers?.onToken("Working on it.");
+		});
+
+		act(() => {
+			capturedWsHandlers?.onActivity("SomeCustomTool");
+		});
+
+		const indicator = await screen.findByTestId("activity-indicator");
+		expect(indicator).toBeInTheDocument();
+		expect(indicator).toHaveTextContent("Using SomeCustomTool...");
+	});
 });

frontend/src/components/Chat.tsx

@@ -16,16 +16,34 @@ const NARROW_BREAKPOINT = 900;
 
 function formatToolActivity(toolName: string): string {
 	switch (toolName) {
+		// Built-in provider tool names
 		case "read_file":
+		case "Read":
 			return "Reading file...";
 		case "write_file":
+		case "Write":
+		case "Edit":
 			return "Writing file...";
 		case "list_directory":
-			return "Listing directory...";
+		case "Glob":
+			return "Listing files...";
 		case "search_files":
+		case "Grep":
 			return "Searching files...";
 		case "exec_shell":
+		case "Bash":
 			return "Executing command...";
+		// Claude Code additional tool names
+		case "Task":
+			return "Running task...";
+		case "WebFetch":
+			return "Fetching web content...";
+		case "WebSearch":
+			return "Searching the web...";
+		case "NotebookEdit":
+			return "Editing notebook...";
+		case "TodoWrite":
+			return "Updating tasks...";
 		default:
 			return `Using ${toolName}...`;
 	}