feat(examples): support Codex question tool (item/tool/requestUserInput) in combined-app (#142)

## Summary

- **Support the Codex question tool end to end in the combined-app.**
`item/tool/requestUserInput` (the agent asking the user something
mid-turn) was already routable in the SDK but the app silently answered
it with empty answers. Now:
- `codex-manager` registers a handler **in every approval mode** (it's a
question, not a permission gate), broadcasts a `user_input_request` WS
event, and parks the JSON-RPC response until the user answers via the
new `POST /api/user-input-response` route (values validated as string
arrays). Pending questions resolve empty on shutdown.
- New `UserInputPrompt` component renders each question's header/text,
options as selectable buttons (description as tooltip), an "Other"
free-text field when `isOther` (masked for `isSecret`, and always shown
when a question has no options so it's never unanswerable), and a Submit
gated on all questions being answered.
- `requestTimeoutMs` now uses the 10-minute window in all modes
(previously interactive-only) so the SDK doesn't auto-resolve the
question with empty answers after 60s while the user is reading it. Note
this also lengthens outgoing request timeouts in auto-approve mode,
matching interactive mode's existing behavior.
- **SDK:** export the `ToolRequestUserInput*` protocol types from the
codex entry point (previously only reachable via the `v2` namespace).
- **Combined-app:** default the Codex model to `gpt-5.6-sol` when the
setup form leaves it empty; setup card hint/placeholder updated to
match.

## Test plan

- [x] Added SDK test covering the custom `item/tool/requestUserInput`
handler round-trip (answers written back on the wire with the request
id); default-response path was already covered. `bun test src/codex`: 40
pass.
- [x] SDK typecheck (`tsc --project tsconfig.check.json`) and
combined-app typecheck (`tsc --noEmit`) clean.
- [x] `bun run lint` clean.
- [ ] Manual: start a Codex session in the combined-app, trigger a
`request_user_input` question, answer via option / Other text, confirm
the turn continues with the chosen answer.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: ross-rl

examples/combined-app/src/client/App.css

@@ -3150,6 +3150,14 @@ html, body, #root {
   line-height: 1.5;
 }
 
+.user-input-question {
+  margin-bottom: 16px;
+}
+
+.user-input-question .permission-actions {
+  margin-bottom: 8px;
+}
+
 .elicitation-title {
   font-size: 12px;
   font-weight: 600;

examples/combined-app/src/client/App.tsx

@@ -16,6 +16,7 @@ import { ControlsBar } from "./components/ControlsBar.js";
 import { AssistantTurn } from "./components/AssistantTurn.js";
 import { AttachmentBar } from "./components/AttachmentBar.js";
 import { ApprovalPrompt } from "./components/ApprovalPrompt.js";
+import { UserInputPrompt } from "./components/UserInputPrompt.js";
 import { ElicitationForm } from "./components/ElicitationForm.js";
 import { PermissionDialog } from "./components/PermissionDialog.js";
 import { ControlRequestPrompt } from "./components/ControlRequestPrompt.js";
@@ -569,6 +570,14 @@ export default function App() {
                   />
                 )}
 
+                {agent.agentType === "codex" && agent.pendingUserInput && (
+                  <UserInputPrompt
+                    key={agent.pendingUserInput.requestId}
+                    userInput={agent.pendingUserInput}
+                    onRespond={agent.respondToUserInput}
+                  />
+                )}
+
                 {agent.agentType === "acp" && agent.pendingPermission && (
                   <PermissionDialog
                     permission={agent.pendingPermission}

examples/combined-app/src/client/components/SetupCard.tsx

@@ -121,12 +121,12 @@ export function SetupCard({
             <div className="form-group">
               <label>Model</label>
               <div className="form-hint">
-                {agentType === "claude" ? "Claude model to use. Leave empty for default." : "Codex model to use. Leave empty for default."}
+                {agentType === "claude" ? "Claude model to use. Leave empty for default." : "Codex model to use. Leave empty for the default (gpt-5.6-sol)."}
               </div>
               <input
                 value={model}
                 onChange={(e) => setModel(e.target.value)}
-                placeholder={agentType === "claude" ? "claude-sonnet-4-20250514" : "gpt-5.1-codex"}
+                placeholder={agentType === "claude" ? "claude-sonnet-4-20250514" : "gpt-5.6-sol"}
                 disabled={connecting}
               />
             </div>

examples/combined-app/src/client/components/UserInputPrompt.tsx

@@ -0,0 +1,95 @@
+import { useState } from "react";
+import type { PendingUserInput, UserInputQuestion } from "../types.js";
+
+interface QuestionAnswer {
+  selected?: string;
+  other: string;
+}
+
+// A question with no options must accept typed text even if isOther is unset,
+// or it would be unanswerable.
+function allowsFreeText(question: UserInputQuestion): boolean {
+  return question.isOther || !question.options || question.options.length === 0;
+}
+
+function answerValue(question: UserInputQuestion, answer: QuestionAnswer | undefined): string | null {
+  if (!answer) return null;
+  if (answer.selected != null) return answer.selected;
+  if (allowsFreeText(question) && answer.other.trim()) return answer.other.trim();
+  return null;
+}
+
+export function UserInputPrompt({
+  userInput,
+  onRespond,
+}: {
+  userInput: PendingUserInput;
+  onRespond: (requestId: string, answers: Record<string, string[]>) => void;
+}) {
+  const [answers, setAnswers] = useState<Record<string, QuestionAnswer>>({});
+
+  const setAnswer = (questionId: string, patch: Partial<QuestionAnswer>) => {
+    setAnswers((prev) => ({
+      ...prev,
+      [questionId]: { ...(prev[questionId] ?? { other: "" }), ...patch },
+    }));
+  };
+
+  const complete = userInput.questions.every((q) => answerValue(q, answers[q.id]) != null);
+
+  const submit = () => {
+    const result: Record<string, string[]> = {};
+    for (const q of userInput.questions) {
+      const value = answerValue(q, answers[q.id]);
+      if (value != null) result[q.id] = [value];
+    }
+    onRespond(userInput.requestId, result);
+  };
+
+  return (
+    <div className="elicitation-form">
+      {userInput.questions.map((q) => {
+        const answer = answers[q.id];
+        return (
+          <div key={q.id} className="user-input-question">
+            <div className="elicitation-message">
+              <strong>{q.header}</strong> — {q.question}
+            </div>
+            {q.options && q.options.length > 0 && (
+              <div className="permission-actions">
+                {q.options.map((opt) => (
+                  <button
+                    key={opt.label}
+                    className={`btn permission-btn ${
+                      answer?.selected === opt.label ? "permission-btn-allow" : ""
+                    }`}
+                    title={opt.description}
+                    onClick={() => setAnswer(q.id, { selected: opt.label, other: "" })}
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+            )}
+            {allowsFreeText(q) && (
+              <input
+                className="elicitation-input"
+                type={q.isSecret ? "password" : "text"}
+                placeholder={q.options && q.options.length > 0 ? "Other…" : "Type your answer…"}
+                value={answer?.other ?? ""}
+                onChange={(e) =>
+                  setAnswer(q.id, { other: e.target.value, selected: undefined })
+                }
+              />
+            )}
+          </div>
+        );
+      })}
+      <div className="permission-actions">
+        <button className="btn permission-btn permission-btn-allow" disabled={!complete} onClick={submit}>
+          Submit
+        </button>
+      </div>
+    </div>
+  );
+}

examples/combined-app/src/client/hooks/useCodexAgent.ts

@@ -17,6 +17,7 @@ import type {
   ChatItem,
   UsageState,
   PendingApproval,
+  PendingUserInput,
   AxonEventView,
   ToolCallBlock,
   CodexInitExtensions,
@@ -45,10 +46,12 @@ export interface UseCodexAgentReturn {
   timelineEvents: CodexTimelineEvent[];
   autoApprovePermissions: boolean;
   pendingApproval: PendingApproval | null;
+  pendingUserInput: PendingUserInput | null;
   sendMessage: (text: string, content?: Array<{ type: string; [key: string]: unknown }>) => Promise<void>;
   cancel: () => Promise<void>;
   setAutoApprovePermissions: (enabled: boolean) => Promise<void>;
   respondToApproval: (requestId: string, approve: boolean) => Promise<void>;
+  respondToUserInput: (requestId: string, answers: Record<string, string[]>) => Promise<void>;
   shutdown: () => Promise<void>;
 }
 
@@ -65,6 +68,7 @@ interface CodexState {
   axonId: string | null;
   runloopUrl: string | null;
   pendingApproval: PendingApproval | null;
+  pendingUserInput: PendingUserInput | null;
   autoApprovePermissions: boolean;
   axonEvents: AxonEventView[];
   timelineEvents: CodexTimelineEvent[];
@@ -83,6 +87,7 @@ const INITIAL_CODEX_STATE: CodexState = {
   axonId: null,
   runloopUrl: null,
   pendingApproval: null,
+  pendingUserInput: null,
   autoApprovePermissions: true,
   axonEvents: [],
   timelineEvents: [],
@@ -475,6 +480,16 @@ export function useCodexAgent(agentId: string | null): UseCodexAgentReturn {
     } } });
   }
 
+  function handleUserInputRequest(
+    requestId: string,
+    request: Extract<ApprovalRequest, { method: "item/tool/requestUserInput" }>,
+  ): void {
+    dispatch({ type: "SET", patch: { pendingUserInput: {
+      requestId,
+      questions: request.params.questions,
+    } } });
+  }
+
   useEffect(() => {
     resetAllState();
 
@@ -514,6 +529,8 @@ export function useCodexAgent(agentId: string | null): UseCodexAgentReturn {
 
       if (parsed.type === "approval_request") {
         handleApprovalRequest(parsed.requestId, parsed.request);
+      } else if (parsed.type === "user_input_request") {
+        handleUserInputRequest(parsed.requestId, parsed.request);
       } else if (parsed.type === "turn_error") {
         finalizeTurn();
         dispatch({ type: "SET", patch: { error: parsed.error } });
@@ -579,6 +596,14 @@ export function useCodexAgent(agentId: string | null): UseCodexAgentReturn {
     }
   }, [agentId]);
 
+  const respondToUserInput = useCallback(async (requestId: string, answers: Record<string, string[]>) => {
+    try {
+      await api("/api/user-input-response", { agentId, requestId, answers });
+    } finally {
+      dispatch({ type: "SET", patch: { pendingUserInput: null } });
+    }
+  }, [agentId]);
+
   const shutdown = useCallback(async () => {
     try { await api("/api/shutdown", { agentId }); } catch { /* ignore */ }
     wsRef.current?.close();
@@ -605,10 +630,12 @@ export function useCodexAgent(agentId: string | null): UseCodexAgentReturn {
     timelineEvents: s.timelineEvents,
     autoApprovePermissions: s.autoApprovePermissions,
     pendingApproval: s.pendingApproval,
+    pendingUserInput: s.pendingUserInput,
     sendMessage,
     cancel,
     setAutoApprovePermissions,
     respondToApproval,
+    respondToUserInput,
     shutdown,
   };
 }

examples/combined-app/src/client/types.ts

@@ -340,6 +340,27 @@ export interface PendingApproval {
   rawRequest: ApprovalRequest;
 }
 
+// --- Codex-specific: question tool (item/tool/requestUserInput) ---
+
+export interface UserInputOption {
+  label: string;
+  description: string;
+}
+
+export interface UserInputQuestion {
+  id: string;
+  header: string;
+  question: string;
+  isOther: boolean;
+  isSecret: boolean;
+  options: UserInputOption[] | null;
+}
+
+export interface PendingUserInput {
+  requestId: string;
+  questions: UserInputQuestion[];
+}
+
 // --- ACP-specific: elicitation ---
 
 export interface PendingElicitation {
@@ -476,6 +497,8 @@ export interface CodexAgentState extends SharedAgentState {
   threadId: string | null;
   pendingApproval: PendingApproval | null;
   respondToApproval: (requestId: string, approve: boolean) => Promise<void>;
+  pendingUserInput: PendingUserInput | null;
+  respondToUserInput: (requestId: string, answers: Record<string, string[]>) => Promise<void>;
 }
 
 export interface IdleAgentState extends SharedAgentState {