v1.9.7: ask_user_input elicitation tool

apps/web/src/components/MessageList.tsx

@@ -3,6 +3,7 @@ import type { Chat, Message } from '@/api/types';
 import { MessageBubble } from './MessageBubble';
 import { ToolCallGroup } from './ToolCallGroup';
 import { ToolCallLine, type ToolRun } from './ToolCallLine';
+import { AskUserInputCard } from './AskUserInputCard';
 
 interface Props {
   messages: Message[];
@@ -12,9 +13,11 @@ interface Props {
 // v1.8.2: pre-render units. The single linear `messages` array gets walked
 // into a render-time list where each tool_call is a first-class item and
 // tool_result messages are folded onto their matching tool_run by id.
+// Batch 9.7: tool_run carries chat_id so AskUserInputCard can post the
+// answer without threading the chat id through MessageList's parent.
 type RenderItem =
   | { kind: 'message'; message: Message; capHitInfo?: { position: number; isLatest: boolean } }
-  | { kind: 'tool_run'; run: ToolRun; key: string }
+  | { kind: 'tool_run'; run: ToolRun; key: string; chatId: string }
   | { kind: 'tool_group'; runs: ToolRun[]; key: string };
 
 const GROUP_THRESHOLD = 3;
@@ -50,7 +53,7 @@ function flatten(messages: Message[]): RenderItem[] {
       for (const tc of m.tool_calls!) {
         const run: ToolRun = { call: tc, result: null };
         runsByCallId.set(tc.id, run);
-        items.push({ kind: 'tool_run', run, key: tc.id });
+        items.push({ kind: 'tool_run', run, key: tc.id, chatId: m.chat_id });
       }
       continue;
     }
@@ -63,6 +66,9 @@ function flatten(messages: Message[]): RenderItem[] {
 // Second pass: collapse runs of >=GROUP_THRESHOLD consecutive tool_run items
 // of the same tool name into a single tool_group. Any other render item
 // (text bubble, sentinel, user message) breaks the chain.
+// Batch 9.7: ask_user_input never groups — each pause has its own card so
+// grouping would render them as collapsed ToolCallLines which can't surface
+// the interactive form.
 function group(items: RenderItem[]): RenderItem[] {
   const out: RenderItem[] = [];
   let i = 0;
@@ -74,6 +80,11 @@ function group(items: RenderItem[]): RenderItem[] {
       continue;
     }
     const name = item.run.call.name;
+    if (name === 'ask_user_input') {
+      out.push(item);
+      i += 1;
+      continue;
+    }
     let j = i + 1;
     while (
       j < items.length &&
@@ -82,7 +93,12 @@ function group(items: RenderItem[]): RenderItem[] {
     ) {
       j += 1;
     }
-    const run = items.slice(i, j) as Array<{ kind: 'tool_run'; run: ToolRun; key: string }>;
+    const run = items.slice(i, j) as Array<{
+      kind: 'tool_run';
+      run: ToolRun;
+      key: string;
+      chatId: string;
+    }>;
     if (run.length >= GROUP_THRESHOLD) {
       out.push({
         kind: 'tool_group',
@@ -150,6 +166,16 @@ export function MessageList({ messages, sessionChats }: Props) {
             );
           }
           if (item.kind === 'tool_run') {
+            if (item.run.call.name === 'ask_user_input') {
+              return (
+                <AskUserInputCard
+                  key={item.key}
+                  toolCall={item.run.call}
+                  toolResult={item.run.result}
+                  chatId={item.chatId}
+                />
+              );
+            }
             return <ToolCallLine key={item.key} run={item.run} />;
           }
           return <ToolCallGroup key={item.key} runs={item.runs} />;