fix: complete agent question interactions

src/features/agent/components/agent-command-panel.tsx

@@ -610,7 +610,13 @@ export function AgentCommandPanel({
                     status={streaming ? "streaming" : "ready"}
                     onStop={onStopPrompt}
                   >
-                    {streaming ? undefined : <SendHorizontal size={15} aria-hidden="true" />}
+                    {streaming ? undefined : (
+                      <SendHorizontal
+                        size={15}
+                        style={{ transform: "rotate(-45deg)" }}
+                        aria-hidden="true"
+                      />
+                    )}
                   </PromptInputSubmit>
                 </div>
               </PromptInputFooter>
@@ -650,13 +656,13 @@ function VoiceInputButton({
       title={label}
       className={cn(
         "group relative grid h-8 w-8 shrink-0 place-items-center overflow-visible rounded-lg border after:absolute after:-inset-1 after:content-['']",
-        "border-transparent bg-transparent text-blue-600 shadow-none",
+        "border-transparent bg-transparent shadow-none",
         "transition-[color,background-color,border-color,box-shadow,transform] duration-200",
-        "hover:bg-slate-50 hover:text-blue-700",
         "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600/25 focus-visible:ring-offset-1",
         "disabled:cursor-not-allowed disabled:opacity-45",
-        isListening &&
-          "status-tone-danger bg-[var(--status-soft)] text-[var(--status-foreground)] [@media(hover:hover)]:hover:brightness-95"
+        isListening
+          ? "status-tone-danger bg-[var(--status-soft)] text-[var(--status-foreground)] [@media(hover:hover)]:hover:border-[var(--status-border)] [@media(hover:hover)]:hover:brightness-95"
+          : "text-slate-600 [@media(hover:hover)]:hover:border-[var(--action-border-hover)] [@media(hover:hover)]:hover:bg-[var(--action-soft)] [@media(hover:hover)]:hover:text-[var(--action-blue-hover)]"
       )}
       disabled={disabled}
       onClick={onClick}
@@ -668,10 +674,19 @@ function VoiceInputButton({
           aria-hidden="true"
           initial={{ opacity: 0, scale: 0.9 }}
           animate={
-            reduceMotion ? { opacity: 0.38, scale: 1 } : { opacity: [0.4, 0], scale: [1, 1.28] }
+            reduceMotion
+              ? { opacity: 0.38, scale: 1 }
+              : { opacity: [0, 0.4, 0], scale: [0.9, 1, 1.28] }
           }
           transition={
-            reduceMotion ? { duration: 0.16 } : { duration: 1.7, ease: "easeOut", repeat: Infinity }
+            reduceMotion
+              ? { duration: 0.16 }
+              : {
+                  duration: 1.7,
+                  ease: "easeOut",
+                  repeat: Infinity,
+                  times: [0, 0.12, 1]
+                }
           }
         />
       ) : null}

src/features/agent/components/agent-history-panel.tsx

@@ -187,7 +187,7 @@ export function AgentHistoryPanel({
                         <motion.button
                           key="session-summary"
                           type="button"
-                          className="min-w-0 text-left"
+                          className="agent-history-session-trigger min-w-0 text-left"
                           disabled={itemLoading || deleting}
                           initial="initial"
                           animate="animate"

src/features/agent/components/agent-message-details.test.tsx

@@ -0,0 +1,90 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { AgentMessageDetails } from "./agent-message-details";
+import type { AgentQuestionInfo, AgentQuestionRequest } from "../types";
+
+afterEach(cleanup);
+
+describe("AgentMessageDetails question answers", () => {
+  it("submits a custom answer instead of the selected option for a single-choice question", async () => {
+    const user = userEvent.setup();
+    const onReplyQuestion = vi.fn();
+
+    renderQuestion(
+      {
+        header: "分析范围",
+        question: "你想分析哪一部分？",
+        options: [
+          { label: "雨污混接分析", description: "检查混接问题" },
+          { label: "水质异常分析", description: "检查水质指标" }
+        ]
+      },
+      onReplyQuestion
+    );
+
+    await user.click(screen.getByRole("radio", { name: /雨污混接分析/ }));
+    await user.click(screen.getByRole("radio", { name: "自定义回答" }));
+    await user.type(screen.getByPlaceholderText("输入自定义回答"), "检查高峰时段压力");
+    await user.click(screen.getByRole("button", { name: "提交回答" }));
+
+    expect(onReplyQuestion).toHaveBeenCalledWith(
+      expect.objectContaining({ requestId: "question-1" }),
+      [["检查高峰时段压力"]]
+    );
+  });
+
+  it("combines selected options with a custom answer for a multiple-choice question", async () => {
+    const user = userEvent.setup();
+    const onReplyQuestion = vi.fn();
+
+    renderQuestion(
+      {
+        header: "分析内容",
+        question: "需要包含哪些内容？",
+        options: [
+          { label: "压力", description: "分析节点压力" },
+          { label: "流量", description: "分析管段流量" }
+        ],
+        multiple: true,
+        custom: true
+      },
+      onReplyQuestion
+    );
+
+    await user.click(screen.getByRole("checkbox", { name: /压力/ }));
+    await user.click(screen.getByRole("checkbox", { name: "自定义回答" }));
+    await user.type(screen.getByPlaceholderText("输入自定义回答"), "补充水龄");
+    await user.click(screen.getByRole("button", { name: "提交回答" }));
+
+    expect(onReplyQuestion).toHaveBeenCalledWith(
+      expect.objectContaining({ requestId: "question-1" }),
+      [["压力", "补充水龄"]]
+    );
+  });
+});
+
+function renderQuestion(
+  question: AgentQuestionInfo,
+  onReplyQuestion: (request: AgentQuestionRequest, answers: string[][]) => void
+) {
+  render(
+    <AgentMessageDetails
+      message={{
+        id: "assistant-1",
+        role: "assistant",
+        content: "需要补充信息",
+        questions: [
+          {
+            requestId: "question-1",
+            sessionId: "session-1",
+            questions: [question],
+            createdAt: 100,
+            status: "pending"
+          }
+        ]
+      }}
+      onReplyQuestion={onReplyQuestion}
+    />
+  );
+}

src/features/agent/components/agent-message-details.tsx

@@ -574,7 +574,7 @@ function QuestionRequestCard({
             key={`${request.requestId}-${questionIndex}`}
             question={question}
             questionIndex={questionIndex}
-            value={draftAnswers[questionIndex] ?? { selected: [], custom: "" }}
+            value={draftAnswers[questionIndex] ?? { selected: [], customSelected: false, custom: "" }}
             disabled={!actionable || submitting}
             onChange={(nextValue) =>
               setDraftAnswers((current) => current.map((item, index) => (index === questionIndex ? nextValue : item)))
@@ -633,6 +633,7 @@ function QuestionRequestCard({
 
 type QuestionDraftAnswer = {
   selected: string[];
+  customSelected: boolean;
   custom: string;
 };
 
@@ -649,8 +650,11 @@ function QuestionInput({
   disabled: boolean;
   onChange: (value: QuestionDraftAnswer) => void;
 }) {
-  const name = `agent-question-${questionIndex}-${question.question}`;
-  const showCustomInput = question.custom || question.options.length === 0;
+  const inputId = useId();
+  const name = `agent-question-${questionIndex}-${inputId}`;
+  const customEnabled = question.custom !== false;
+  const showCustomChoice = customEnabled && question.options.length > 0;
+  const showCustomInput = customEnabled && value.customSelected;
 
   const toggleOption = (label: string, checked: boolean) => {
     if (question.multiple) {
@@ -662,21 +666,36 @@ function QuestionInput({
     }
     onChange({
       ...value,
-      selected: checked ? [label] : []
+      selected: checked ? [label] : [],
+      customSelected: false
+    });
+  };
+
+  const toggleCustom = (checked: boolean) => {
+    onChange({
+      ...value,
+      selected: question.multiple ? value.selected : [],
+      customSelected: checked
     });
   };
 
   return (
     <div className="space-y-1.5">
       <p className="leading-5 text-slate-700">{question.question}</p>
-      {question.options.length ? (
+      {question.options.length || showCustomChoice ? (
         <div className="space-y-1">
           {question.options.map((option) => {
             const checked = value.selected.includes(option.label);
             return (
               <label
                 key={option.label}
-                className="flex cursor-pointer items-start gap-2 rounded-md border border-slate-200/80 px-2 py-1.5 text-slate-600"
+                className={cn(
+                  "flex cursor-pointer items-start gap-2 rounded-md border px-2 py-1.5 transition-colors",
+                  checked
+                    ? "border-blue-300 bg-blue-50/70 text-blue-700"
+                    : "border-slate-200/80 text-slate-600 hover:border-slate-300 hover:bg-slate-50/70",
+                  disabled && "cursor-default opacity-60"
+                )}
               >
                 <input
                   type={question.multiple ? "checkbox" : "radio"}
@@ -695,12 +714,34 @@ function QuestionInput({
               </label>
             );
           })}
+          {showCustomChoice ? (
+            <label
+              className={cn(
+                "flex cursor-pointer items-center gap-2 rounded-md border px-2 py-2 transition-colors",
+                value.customSelected
+                  ? "border-blue-300 bg-blue-50/70 text-blue-700"
+                  : "border-slate-200/80 text-slate-600 hover:border-slate-300 hover:bg-slate-50/70",
+                disabled && "cursor-default opacity-60"
+              )}
+            >
+              <input
+                type={question.multiple ? "checkbox" : "radio"}
+                name={name}
+                className="h-3.5 w-3.5 accent-blue-600"
+                checked={value.customSelected}
+                disabled={disabled}
+                onChange={(event) => toggleCustom(event.currentTarget.checked)}
+              />
+              <span className="font-semibold text-slate-700">自定义回答</span>
+            </label>
+          ) : null}
         </div>
       ) : null}
       {showCustomInput ? (
         <textarea
           className="min-h-16 w-full resize-none rounded-md border border-slate-200/80 bg-transparent px-2 py-1.5 text-xs leading-5 text-slate-700 outline-hidden transition focus:border-blue-300 focus:ring-2 focus:ring-blue-100 disabled:opacity-60"
-          placeholder="输入回答"
+          aria-label="自定义回答内容"
+          placeholder="输入自定义回答"
           value={value.custom}
           disabled={disabled}
           onChange={(event) => onChange({ ...value, custom: event.currentTarget.value })}
@@ -711,16 +752,25 @@ function QuestionInput({
 }
 
 function createInitialQuestionAnswers(request: AgentQuestionRequest): QuestionDraftAnswer[] {
-  return request.questions.map((question, index) => ({
-    selected: request.answers?.[index] ?? [],
-    custom: ""
-  }));
+  return request.questions.map((question, index) => {
+    const optionLabels = new Set(question.options.map((option) => option.label));
+    const savedAnswers = request.answers?.[index] ?? [];
+    const selected = savedAnswers.filter((answer) => optionLabels.has(answer));
+    const customAnswers = savedAnswers.filter((answer) => !optionLabels.has(answer));
+    const customEnabled = question.custom !== false;
+
+    return {
+      selected,
+      customSelected: customEnabled && (question.options.length === 0 || customAnswers.length > 0),
+      custom: customAnswers.join("；")
+    };
+  });
 }
 
 function normalizeDraftAnswers(draftAnswers: QuestionDraftAnswer[]) {
   return draftAnswers.map((answer) => {
     const custom = answer.custom.trim();
-    return custom ? [...answer.selected, custom] : answer.selected;
+    return answer.customSelected && custom ? [...answer.selected, custom] : answer.selected;
   });
 }
 

src/features/agent/session-state.test.ts

@@ -94,6 +94,33 @@ describe("agent session state", () => {
     });
   });
 
+  it("preserves an actionable question id when its tool placeholder arrives later", () => {
+    const questions = upsertQuestion(undefined, {
+      session_id: "session-1",
+      request_id: "question-1",
+      tool: { messageID: "message-1", callID: "call-1" },
+      questions: [{ header: "范围", question: "选择范围", options: [] }],
+      created_at: 100
+    });
+    const withPlaceholder = upsertQuestion(questions, {
+      session_id: "session-1",
+      request_id: "call-1",
+      tool: { messageID: "message-1", callID: "call-1" },
+      questions: [{ header: "范围", question: "选择范围", options: [] }],
+      created_at: 120
+    });
+    const rejected = applyQuestionResponse(withPlaceholder, {
+      request_id: "question-1",
+      rejected: true
+    });
+
+    expect(withPlaceholder).toHaveLength(1);
+    expect(rejected?.[0]).toMatchObject({
+      requestId: "question-1",
+      status: "rejected"
+    });
+  });
+
   it("finalizes open assistant state after abort", () => {
     const message: AgentChatMessage = {
       id: "assistant-1",

src/features/agent/session-state.ts

@@ -183,10 +183,23 @@ export function upsertQuestion(questions: AgentQuestionRequest[] | undefined, da
   const index = next.findIndex((question) => isSameQuestion(question, nextItem));
 
   if (index >= 0) {
-    next[index] = {
-      ...next[index],
+    const current = next[index];
+    const currentIsActionable = Boolean(current.tool?.callID && current.requestId !== current.tool.callID);
+    const nextIsToolPlaceholder = Boolean(nextItem.tool?.callID && nextItem.requestId === nextItem.tool.callID);
+
+    next[index] =
+      currentIsActionable && nextIsToolPlaceholder
+        ? {
+            ...current,
+            sessionId: nextItem.sessionId,
+            questions: nextItem.questions,
+            tool: nextItem.tool ?? current.tool,
+            createdAt: nextItem.createdAt
+          }
+        : {
+            ...current,
             ...nextItem,
-      status: next[index].status === "submitting" ? "submitting" : nextItem.status
+            status: current.status === "submitting" ? "submitting" : nextItem.status
           };
   } else {
     next.push(nextItem);

src/styles.css

@@ -761,6 +761,10 @@ button:disabled {
   background-color: var(--agent-floating-reading-active);
 }
 
+button.agent-history-session-trigger:not(:disabled):active {
+  outline: none;
+}
+
 .agent-history-rename-input,
 .agent-history-rename-input:focus-visible {
   border-color: #cbd5e1;
@@ -924,7 +928,7 @@ button:disabled {
 }
 
 .agent-panel-primary-icon {
-  border: 1px solid var(--action-blue);
+  border: 0;
   background: var(--action-blue);
   color: #ffffff;
   box-shadow: var(--action-shadow-primary);

tests/browser/agent-acrylic.e2e.ts

@@ -134,6 +134,23 @@ test("desktop Agent header expands into one attached acrylic history surface", a
     .poll(() => getSurfacePresentation(historyButton))
     .toEqual(historyButtonPresentationBefore);
 
+  const sessionTrigger = history.locator(".agent-history-session-trigger").first();
+  const sessionTriggerBox = await sessionTrigger.boundingBox();
+  const historyHeadingBox = await history.getByText("历史记录", { exact: true }).boundingBox();
+  expect(sessionTriggerBox).not.toBeNull();
+  expect(historyHeadingBox).not.toBeNull();
+  await page.mouse.move(
+    sessionTriggerBox!.x + sessionTriggerBox!.width / 2,
+    sessionTriggerBox!.y + sessionTriggerBox!.height / 2
+  );
+  await page.mouse.down();
+  await expect(sessionTrigger).toHaveCSS("outline-style", "none");
+  await page.mouse.move(
+    historyHeadingBox!.x + historyHeadingBox!.width / 2,
+    historyHeadingBox!.y + historyHeadingBox!.height / 2
+  );
+  await page.mouse.up();
+
   const headerBox = await agentHeader.boundingBox();
   const agentPanelBox = await agentPanel.boundingBox();
   const historyBox = await history.boundingBox();

tests/browser/agent-question.e2e.ts

@@ -0,0 +1,160 @@
+import { expect, test, type Page } from "@playwright/test";
+
+test("submits a custom answer with the actionable id after a later tool placeholder", async ({
+  page
+}) => {
+  const replies: Array<{ pathname: string; body: unknown }> = [];
+  await mockQuestionApi(page, replies);
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+
+  const prompt = page.getByPlaceholder(/输入调度问题/).filter({ visible: true }).first();
+  await prompt.fill("测试 question 自定义回答");
+  await page
+    .getByRole("button", { name: "发送 Agent 指令" })
+    .filter({ visible: true })
+    .first()
+    .click();
+
+  const panel = page.locator('aside[aria-label="Agent 命令面板"]').filter({ visible: true });
+  await panel.getByRole("radio", { name: "自定义回答" }).click();
+  await panel.getByPlaceholder("输入自定义回答").fill("分析高峰时段压力");
+  await panel.getByRole("button", { name: "提交回答" }).click();
+
+  await expect.poll(() => replies).toEqual([
+    {
+      pathname: "/api/v1/agent/chat/question/question-1/reply",
+      body: {
+        session_id: "question-session",
+        answers: [["分析高峰时段压力"]]
+      }
+    }
+  ]);
+  await expect(panel.getByText("已回答", { exact: true })).toBeVisible();
+  await expect(panel.getByRole("button", { name: "提交回答" })).toHaveCount(0);
+});
+
+test("keeps the custom answer control within a 375px Agent sheet", async ({ page }) => {
+  await page.setViewportSize({ width: 375, height: 812 });
+  await mockQuestionApi(page, []);
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await page.getByRole("button", { name: "打开 Agent 面板" }).click();
+  await page.getByRole("button", { name: /Agent 工作台抽屉高度/ }).click();
+
+  const panel = page.locator('aside[aria-label="Agent 命令面板"]').filter({ visible: true });
+  const prompt = panel.getByPlaceholder(/输入调度问题/);
+  await prompt.fill("测试窄屏 question");
+  await panel.getByRole("button", { name: "发送 Agent 指令" }).click();
+  await panel.getByRole("radio", { name: "自定义回答" }).click();
+
+  const textarea = panel.getByPlaceholder("输入自定义回答");
+  await expect(textarea).toBeVisible();
+  const box = await textarea.boundingBox();
+  expect(box).not.toBeNull();
+  expect(box!.x).toBeGreaterThanOrEqual(0);
+  expect(box!.x + box!.width).toBeLessThanOrEqual(375);
+});
+
+async function mockQuestionApi(
+  page: Page,
+  replies: Array<{ pathname: string; body: unknown }>
+) {
+  await page.route("**/api/v1/agent/chat/**", async (route) => {
+    const request = route.request();
+    const pathname = new URL(request.url()).pathname;
+
+    if (pathname.endsWith("/stream")) {
+      await route.fulfill({
+        status: 200,
+        headers: {
+          "Cache-Control": "no-cache",
+          "Content-Type": "text/event-stream",
+          "X-Vercel-AI-UI-Message-Stream": "v1"
+        },
+        body: createQuestionStream()
+      });
+      return;
+    }
+
+    if (pathname.endsWith("/question/question-1/reply")) {
+      replies.push({
+        pathname,
+        body: request.postDataJSON()
+      });
+      await route.fulfill({ json: {} });
+      return;
+    }
+
+    if (pathname.endsWith("/models")) {
+      await route.fulfill({
+        json: {
+          default_model: "test/model",
+          models: [
+            {
+              id: "test/model",
+              label: "测试模型",
+              description: "Question 交互测试",
+              icon: "bolt"
+            }
+          ]
+        }
+      });
+      return;
+    }
+
+    if (pathname.endsWith("/sessions")) {
+      await route.fulfill({ json: { sessions: [] } });
+      return;
+    }
+
+    await route.fulfill({ json: {} });
+  });
+}
+
+function createQuestionStream() {
+  const question = {
+    session_id: "question-session",
+    questions: [
+      {
+        header: "分析范围",
+        question: "你想分析哪一部分？",
+        options: [
+          {
+            label: "雨污混接分析",
+            description: "检查混接问题"
+          }
+        ]
+      }
+    ],
+    tool: {
+      messageID: "assistant-question",
+      callID: "call-1"
+    }
+  };
+  const parts = [
+    { type: "start", messageId: "assistant-question" },
+    { type: "text-start", id: "answer" },
+    { type: "text-delta", id: "answer", delta: "请选择分析范围。" },
+    {
+      type: "data-question_request",
+      id: "question-1",
+      data: {
+        ...question,
+        request_id: "question-1",
+        created_at: 100
+      }
+    },
+    {
+      type: "data-question_request",
+      id: "call-1",
+      data: {
+        ...question,
+        request_id: "call-1",
+        created_at: 120
+      }
+    },
+    { type: "text-end", id: "answer" },
+    { type: "finish", finishReason: "stop" }
+  ];
+
+  return parts.map((part) => `data: ${JSON.stringify(part)}\n\n`).join("");
+}

tests/browser/agent-voice-hydration.e2e.ts

@@ -83,3 +83,48 @@ test("speech recognition writes final transcript into the prompt", async ({ page
 
   await expect(page.getByPlaceholder("输入调度问题，Agent 将通过后端会话流式响应")).toHaveValue("检查城南泵站水位");
 });
+
+test("speech recognition pulse stays transparent across its loop boundary", async ({ page }) => {
+  await page.addInitScript(() => {
+    Object.defineProperty(window, "SpeechRecognition", {
+      configurable: true,
+      value: class SpeechRecognition {
+        start() {}
+
+        stop() {}
+
+        abort() {}
+      }
+    });
+  });
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+
+  await page.getByRole("button", { name: "语音输入" }).click();
+
+  const pulse = page.locator('[data-slot="voice-input-pulse"]');
+  await expect(pulse).toBeVisible();
+  const seamOpacity = await pulse.evaluate((element) => {
+    const animation = element
+      .getAnimations()
+      .find((candidate) =>
+        (candidate.effect as KeyframeEffect | null)
+          ?.getKeyframes()
+          .some((keyframe) => keyframe.opacity !== undefined)
+      );
+    if (!animation?.effect) {
+      throw new Error("Voice input pulse opacity animation was not found");
+    }
+
+    animation.pause();
+    const duration = Number(animation.effect.getTiming().duration);
+    animation.currentTime = duration - 1;
+    const before = Number(window.getComputedStyle(element).opacity);
+    animation.currentTime = duration + 1;
+    const after = Number(window.getComputedStyle(element).opacity);
+
+    return { before, after };
+  });
+
+  expect(seamOpacity.before).toBeLessThan(0.02);
+  expect(seamOpacity.after).toBeLessThan(0.02);
+});