fix: 修复 ask user question 的工具调用弹窗

Author: claude-code-best

packages/remote-control-server/src/services/transport.ts

@@ -61,6 +61,7 @@ export function normalizePayload(type: string, payload: unknown): Record<string,
   if (p.request_id) normalized.request_id = p.request_id;
   if (p.request) normalized.request = p.request;
   if (p.approved !== undefined) normalized.approved = p.approved;
+  if (p.updated_input) normalized.updated_input = p.updated_input;
 
   // Preserve message field for backward compat
   if (p.message) normalized.message = p.message;

packages/remote-control-server/src/transport/ws-handler.ts

@@ -43,13 +43,14 @@ function toSDKMessage(event: SessionEvent): string {
     if (existingResponse) {
       msg = { type: "control_response", response: existingResponse };
     } else {
+      const updatedInput = payload?.updated_input as Record<string, unknown> | undefined;
       msg = {
         type: "control_response",
         response: {
           subtype: approved ? "success" : "error",
           request_id: payload?.request_id ?? "",
           ...(approved
-            ? { response: { behavior: "allow" as const } }
+            ? { response: { behavior: "allow" as const, ...(updatedInput ? { updatedInput } : {}) } }
             : { error: "Permission denied by user", response: { behavior: "deny" as const } }),
         },
       };

packages/remote-control-server/web/app.js

@@ -273,8 +273,99 @@ window._rejectPerm = async function (requestId, btn) {
   } catch (err) { alert("Failed to reject: " + err.message); btn.disabled = false; }
 };
 
+// ============================================================
+// AskUserQuestion interactions
+// ============================================================
+
+window._selectOption = function (btn, qIdx, oIdx, multiSelect) {
+  const panel = btn.closest(".ask-panel");
+  if (!panel) return;
+  if (!panel._answers) panel._answers = {};
+
+  if (multiSelect) {
+    // Toggle multi-select
+    btn.classList.toggle("selected");
+    if (!panel._answers[qIdx]) panel._answers[qIdx] = [];
+    const arr = panel._answers[qIdx];
+    const pos = arr.indexOf(oIdx);
+    if (pos >= 0) arr.splice(pos, 1);
+    else arr.push(oIdx);
+  } else {
+    // Single select — deselect siblings
+    const siblings = panel.querySelectorAll(`.ask-option[data-qidx="${qIdx}"]`);
+    siblings.forEach((s) => s.classList.remove("selected"));
+    btn.classList.add("selected");
+    panel._answers[qIdx] = oIdx;
+  }
+};
+
+window._submitOther = function (btn, qIdx) {
+  const row = btn.closest(".ask-other-row");
+  const input = row.querySelector(".ask-other-input");
+  const text = input.value.trim();
+  if (!text) return;
+  const panel = btn.closest(".ask-panel");
+  if (!panel) return;
+  if (!panel._answers) panel._answers = {};
+  panel._answers[qIdx] = text;
+  // Deselect any option buttons
+  panel.querySelectorAll(`.ask-option[data-qidx="${qIdx}"]`).forEach((s) => s.classList.remove("selected"));
+  input.value = "";
+  btn.textContent = "Sent!";
+  setTimeout(() => { btn.textContent = "Send"; }, 1000);
+};
+
+window._switchAskTab = function (btn, idx) {
+  const panel = btn.closest(".ask-panel");
+  if (!panel) return;
+  panel.querySelectorAll(".ask-tab").forEach((t) => t.classList.remove("active"));
+  panel.querySelectorAll(".ask-tab-page").forEach((p) => p.classList.remove("active"));
+  btn.classList.add("active");
+  const page = panel.querySelector(`.ask-tab-page[data-tab="${idx}"]`);
+  if (page) page.classList.add("active");
+  const total = panel.querySelectorAll(".ask-tab").length;
+  const prog = panel.querySelector(".ask-progress");
+  if (prog) prog.textContent = `${idx + 1} / ${total}`;
+};
+
+window._submitAnswers = async function (requestId, btn) {
+  btn.disabled = true;
+  const panel = btn.closest(".ask-panel");
+  const rawAnswers = panel?._answers || {};
+  const questions = panel?._questions || [];
+
+  // Build updatedInput: merge original input with user's answers
+  const answers = {};
+  for (const [qIdx, val] of Object.entries(rawAnswers)) {
+    const q = questions[parseInt(qIdx)];
+    if (!q) continue;
+    if (typeof val === "string") {
+      // "Other" free-text answer
+      answers[qIdx] = val;
+    } else if (typeof val === "number") {
+      // Selected option index — use label text
+      const opt = q.options?.[val];
+      answers[qIdx] = opt?.label || String(val);
+    } else if (Array.isArray(val)) {
+      // Multi-select — join labels
+      answers[qIdx] = val.map((i) => q.options?.[i]?.label || String(i));
+    }
+  }
+
+  try {
+    await apiSendControl(currentSessionId, {
+      type: "permission_response",
+      approved: true,
+      request_id: requestId,
+      updated_input: { questions, answers },
+    });
+    removePermissionPrompt(btn);
+    showLoading();
+  } catch (err) { alert("Failed to submit: " + err.message); btn.disabled = false; }
+};
+
 function removePermissionPrompt(btn) {
-  const prompt = btn.closest(".permission-prompt");
+  const prompt = btn.closest(".permission-prompt, .ask-panel");
   if (prompt) prompt.remove();
   const area = document.getElementById("permission-area");
   if (area && area.children.length === 0) area.classList.add("hidden");

packages/remote-control-server/web/messages.css

@@ -151,6 +151,154 @@
   border: 1px solid var(--border-light);
 }
 .permission-prompt .perm-actions { display: flex; gap: 10px; }
+.permission-prompt .perm-desc {
+  font-size: 0.88rem;
+  color: var(--text-secondary);
+  margin-bottom: 10px;
+  line-height: 1.5;
+}
+.permission-prompt .perm-tool-name {
+  font-size: 0.82rem;
+  color: var(--text-primary);
+  margin-bottom: 6px;
+}
+
+/* === AskUserQuestion Panel === */
+.ask-panel {
+  background: var(--bg-card);
+  border: 1.5px solid var(--accent);
+  border-radius: var(--radius);
+  padding: 20px 24px;
+  margin-top: 8px;
+  max-width: 95%;
+  align-self: flex-start;
+  box-shadow: 0 2px 12px rgba(217, 119, 87, 0.15);
+}
+.ask-panel .ask-title {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 1rem;
+  margin-bottom: 16px;
+  color: var(--text-primary);
+}
+.ask-question {
+  margin-bottom: 18px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--border-light);
+}
+.ask-question:last-of-type { border-bottom: none; margin-bottom: 12px; }
+.ask-question-text {
+  font-size: 0.92rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+  line-height: 1.5;
+}
+.ask-header {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 8px;
+}
+.ask-options { display: flex; flex-direction: column; gap: 6px; }
+.ask-option {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 10px 14px;
+  border: 1.5px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-primary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  text-align: left;
+  font-size: 0.88rem;
+  color: var(--text-primary);
+}
+.ask-option:hover {
+  border-color: var(--accent);
+  background: rgba(217, 119, 87, 0.04);
+}
+.ask-option.selected {
+  border-color: var(--accent);
+  background: rgba(217, 119, 87, 0.1);
+  box-shadow: 0 0 0 1px var(--accent);
+}
+.ask-option-label { font-weight: 500; }
+.ask-option-desc {
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  margin-top: 2px;
+}
+.ask-other-row {
+  display: flex;
+  gap: 6px;
+  margin-top: 6px;
+}
+.ask-other-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1.5px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-primary);
+  font-size: 0.85rem;
+  color: var(--text-primary);
+  outline: none;
+  transition: border-color var(--transition-fast);
+}
+.ask-other-input:focus { border-color: var(--accent); }
+.ask-other-btn {
+  padding: 8px 14px;
+  border: 1.5px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-primary);
+  font-size: 0.85rem;
+  cursor: pointer;
+  color: var(--text-primary);
+  transition: all var(--transition-fast);
+}
+.ask-other-btn:hover { border-color: var(--accent); }
+.ask-actions { display: flex; gap: 10px; margin-top: 8px; }
+.ask-tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1.5px solid var(--border);
+  margin-bottom: 14px;
+}
+.ask-tab {
+  padding: 8px 16px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1.5px;
+  transition: all var(--transition-fast);
+}
+.ask-tab:hover { color: var(--text-primary); }
+.ask-tab.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+.ask-tab-page { display: none; }
+.ask-tab-page.active { display: block; }
+.ask-tab-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border-light);
+}
+.ask-progress {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+}
 
 /* === Timestamps === */
 .event-time { font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; }