feat(webui): render ask_user choices

Made-with: Cursor

webui/src/tests/thread-shell.test.tsx

@@ -7,11 +7,22 @@ import { ClientProvider } from "@/providers/ClientProvider";
 
 function makeClient() {
   const errorHandlers = new Set<(err: { kind: string }) => void>();
+  const chatHandlers = new Map<string, Set<(ev: import("@/lib/types").InboundEvent) => void>>();
   return {
     status: "open" as const,
     defaultChatId: null as string | null,
     onStatus: () => () => {},
-    onChat: () => () => {},
+    onChat: (chatId: string, handler: (ev: import("@/lib/types").InboundEvent) => void) => {
+      let handlers = chatHandlers.get(chatId);
+      if (!handlers) {
+        handlers = new Set();
+        chatHandlers.set(chatId, handlers);
+      }
+      handlers.add(handler);
+      return () => {
+        handlers?.delete(handler);
+      };
+    },
     onError: (handler: (err: { kind: string }) => void) => {
       errorHandlers.add(handler);
       return () => {
@@ -21,6 +32,9 @@ function makeClient() {
     _emitError(err: { kind: string }) {
       for (const h of errorHandlers) h(err);
     },
+    _emitChat(chatId: string, ev: import("@/lib/types").InboundEvent) {
+      for (const h of chatHandlers.get(chatId) ?? []) h(ev);
+    },
     sendMessage: vi.fn(),
     newChat: vi.fn(),
     attach: vi.fn(),
@@ -411,4 +425,46 @@ describe("ThreadShell", () => {
     await waitFor(() => expect(screen.getByText("from chat b")).toBeInTheDocument());
     expect(screen.queryByText("from chat a")).not.toBeInTheDocument();
   });
+
+  it("renders ask_user options above the composer and sends selected answers", async () => {
+    const client = makeClient();
+    const onNewChat = vi.fn().mockResolvedValue("chat-a");
+
+    render(
+      wrap(
+        client,
+        <ThreadShell
+          session={session("chat-a")}
+          title="Chat chat-a"
+          onToggleSidebar={() => {}}
+          onGoHome={() => {}}
+          onNewChat={onNewChat}
+        />,
+      ),
+    );
+
+    await act(async () => {
+      client._emitChat("chat-a", {
+        event: "message",
+        chat_id: "chat-a",
+        text: "How should I continue?",
+        buttons: [["Short answer", "Detailed answer"]],
+      });
+    });
+
+    expect(screen.getByRole("group", { name: "Question" })).toHaveTextContent(
+      "How should I continue?",
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Short answer" }));
+
+    expect(client.sendMessage).toHaveBeenCalledWith(
+      "chat-a",
+      "Short answer",
+      undefined,
+    );
+    await waitFor(() => {
+      expect(screen.queryByRole("group", { name: "Question" })).not.toBeInTheDocument();
+    });
+  });
 });

webui/src/tests/useNanobotStream.test.tsx

@@ -113,4 +113,27 @@ describe("useNanobotStream", () => {
       { kind: "video", url: "/api/media/sig/payload", name: "demo.mp4" },
     ]);
   });
+
+  it("keeps assistant buttons on complete messages", () => {
+    const fake = fakeClient();
+    const { result } = renderHook(() => useNanobotStream("chat-q", []), {
+      wrapper: wrap(fake.client),
+    });
+
+    act(() => {
+      fake.emit("chat-q", {
+        event: "message",
+        chat_id: "chat-q",
+        text: "How should I continue?\n\n1. Short answer\n2. Detailed answer",
+        button_prompt: "How should I continue?",
+        buttons: [["Short answer", "Detailed answer"]],
+      });
+    });
+
+    expect(result.current.messages).toHaveLength(1);
+    expect(result.current.messages[0].content).toBe("How should I continue?");
+    expect(result.current.messages[0].buttons).toEqual([
+      ["Short answer", "Detailed answer"],
+    ]);
+  });
 });