Chat Phase 3 — per-framework typing-phase labels

desktop/src/apps/MessagesApp.tsx

@@ -35,7 +35,7 @@ import { resolveAgentEmoji } from "@/lib/agent-emoji";
 import { ChannelSettingsPanel } from "./chat/ChannelSettingsPanel";
 import { AgentContextMenu } from "./chat/AgentContextMenu";
 import { SlashMenu, type SlashCommandsBySlug } from "./chat/SlashMenu";
-import { TypingFooter } from "./chat/TypingFooter";
+import { TypingFooter, type AgentTyping } from "./chat/TypingFooter";
 import { useTypingEmitter } from "@/lib/use-typing-emitter";
 import { MessageHoverActions } from "./chat/MessageHoverActions";
 import { ThreadIndicator } from "./chat/ThreadIndicator";
@@ -256,7 +256,7 @@ export function MessagesApp({ windowId: _windowId, title }: { windowId: string;
   >(null);
   const [slashCommands, setSlashCommands] = useState<SlashCommandsBySlug>({});
   const [typingHumans, setTypingHumans] = useState<string[]>([]);
-  const [typingAgents, setTypingAgents] = useState<string[]>([]);
+  const [typingAgents, setTypingAgents] = useState<AgentTyping[]>([]);
   const [sendError, setSendError] = useState<string | null>(null);
   const [hoveredMessageId, setHoveredMessageId] = useState<string | null>(null);
   const [pendingAttachments, setPendingAttachments] = useState<PendingAttachment[]>([]);
@@ -387,9 +387,12 @@ export function MessagesApp({ windowId: _windowId, title }: { windowId: string;
         }
         if (data.type === "thinking") {
           if (data.state === "start") {
-            setTypingAgents((prev) => prev.includes(data.slug) ? prev : [...prev, data.slug]);
+            setTypingAgents((prev) => {
+              const without = prev.filter((a) => a.slug !== data.slug);
+              return [...without, { slug: data.slug, phase: data.phase ?? null, detail: data.detail ?? null }];
+            });
           } else {
-            setTypingAgents((prev) => prev.filter((s) => s !== data.slug));
+            setTypingAgents((prev) => prev.filter((a) => a.slug !== data.slug));
           }
           return;
         }
@@ -428,9 +431,12 @@ export function MessagesApp({ windowId: _windowId, title }: { windowId: string;
             // Legacy WS typing (agent only) — route into typingAgents for TypingFooter
             // (human typing is handled by the phase-2a branch above)
             if ((data.user_type ?? "user") !== "agent") break;
-            setTypingAgents((prev) => prev.includes(data.user_id) ? prev : [...prev, data.user_id]);
+            setTypingAgents((prev) => {
+              const without = prev.filter((a) => a.slug !== data.user_id);
+              return [...without, { slug: data.user_id, phase: null, detail: null }];
+            });
             setTimeout(() => {
-              setTypingAgents((prev) => prev.filter((s) => s !== data.user_id));
+              setTypingAgents((prev) => prev.filter((a) => a.slug !== data.user_id));
             }, 5000);
             break;
 

desktop/src/apps/chat/TypingFooter.tsx

@@ -4,13 +4,22 @@
  * Caller feeds in live arrays — they're empty when nothing is active
  * and the component renders nothing.
  */
+
+type TypingPhase = "thinking" | "tool" | "reading" | "writing" | "searching" | "planning";
+
+export interface AgentTyping {
+  slug: string;
+  phase?: TypingPhase | null;
+  detail?: string | null;
+}
+
 export function TypingFooter({
   humans,
   agents,
   selfId = "user",
 }: {
   humans: string[];
-  agents: string[];
+  agents: AgentTyping[];
   selfId?: string;
 }) {
   const others = humans.filter((h) => h !== selfId);
@@ -19,15 +28,21 @@ export function TypingFooter({
   if (!hasHumans && !hasAgents) return null;
 
   const humanLine = formatHumansTyping(others);
-  const agentLine = formatAgentsThinking(agents);
 
   return (
     <div
       aria-live="polite"
       className="px-4 pt-1 text-xs text-shell-text-tertiary flex flex-col gap-0.5"
     >
       {humanLine && <span>{humanLine}</span>}
-      {agentLine && <span className="italic">{agentLine}</span>}
+      {agents.map((a) => {
+        const { icon, text } = phaseLabel(a.phase, a.detail);
+        return (
+          <span key={a.slug} className="italic">
+            {icon} @{a.slug} is {text}…
+          </span>
+        );
+      })}
     </div>
   );
 }
@@ -39,7 +54,28 @@ function formatHumansTyping(names: string[]): string | null {
   return `${names[0]} and ${names.length - 1} others are typing…`;
 }
 
-function formatAgentsThinking(slugs: string[]): string | null {
-  if (slugs.length === 0) return null;
-  return slugs.map((s) => `${s} is thinking…`).join(" · ");
+function phaseLabel(
+  phase?: TypingPhase | null,
+  detail?: string | null,
+): { icon: string; text: string } {
+  const d = detail
+    ? detail.length > 40
+      ? detail.slice(0, 39) + "…"
+      : detail
+    : null;
+  switch (phase) {
+    case "tool":
+      return { icon: "🔧", text: d ? `using ${d}` : "using a tool" };
+    case "reading":
+      return { icon: "📖", text: d ? `reading ${d}` : "reading" };
+    case "writing":
+      return { icon: "✏️", text: d ? `writing ${d}` : "writing" };
+    case "searching":
+      return { icon: "🔍", text: d ? `searching ${d}` : "searching" };
+    case "planning":
+      return { icon: "📋", text: "planning" };
+    case "thinking":
+    default:
+      return { icon: "💭", text: "thinking" };
+  }
 }

desktop/src/apps/chat/__tests__/TypingFooter.test.tsx

@@ -19,8 +19,53 @@ describe("TypingFooter", () => {
     const { container } = render(<TypingFooter humans={["user"]} agents={[]} selfId="user" />);
     expect(container.firstChild).toBeNull();
   });
-  it("joins multiple agents with middle dot", () => {
-    render(<TypingFooter humans={[]} agents={["tom", "don"]} />);
-    expect(screen.getByText("tom is thinking… · don is thinking…")).toBeInTheDocument();
+  it("shows default thinking label for agent with no phase", () => {
+    render(<TypingFooter humans={[]} agents={[{ slug: "tom" }]} />);
+    expect(screen.getByText(/tom/i)).toBeInTheDocument();
+    expect(screen.getByText(/thinking/i)).toBeInTheDocument();
+  });
+  it("renders 'using X' for tool phase", () => {
+    render(
+      <TypingFooter
+        humans={[]}
+        agents={[{ slug: "tom", phase: "tool", detail: "web_search" }]}
+        selfId="user"
+      />,
+    );
+    expect(screen.getByText(/tom/i)).toBeInTheDocument();
+    expect(screen.getByText(/using web_search/i)).toBeInTheDocument();
+  });
+  it("renders 'writing X' for writing phase", () => {
+    render(
+      <TypingFooter
+        humans={[]}
+        agents={[{ slug: "don", phase: "writing", detail: "payment.py" }]}
+        selfId="user"
+      />,
+    );
+    expect(screen.getByText(/writing payment\.py/i)).toBeInTheDocument();
+  });
+  it("truncates detail longer than 40 chars", () => {
+    const longDetail = "a".repeat(60);
+    render(
+      <TypingFooter
+        humans={[]}
+        agents={[{ slug: "tom", phase: "tool", detail: longDetail }]}
+        selfId="user"
+      />,
+    );
+    const text = screen.getByText(/using/i).textContent ?? "";
+    expect(text.length).toBeLessThanOrEqual(60);
+    expect(text).toContain("…");
+  });
+  it("falls back to 'thinking' for unknown phase", () => {
+    render(
+      <TypingFooter
+        humans={[]}
+        agents={[{ slug: "tom", phase: "quantum-entanglement" as any, detail: null }]}
+        selfId="user"
+      />,
+    );
+    expect(screen.getByText(/thinking/i)).toBeInTheDocument();
   });
 });