@brainpilot/web 0.0.4 → 0.0.6

package/src/__tests__/newUiComponents.test.tsx

@@ -0,0 +1,101 @@
+import { describe, it, expect, vi } from "vitest";
+
+// No jsdom/@testing-library in the monorepo (deps not installable here), so we
+// render to static markup with react-dom/server and assert on the output. This
+// covers the level→class mapping for the bubble and the structural shape of the
+// ask_user card and auto-retry indicator. Interaction (submit/cancel) is covered
+// by the pure helpers in newUiEvents.test.ts (resolveAskUserSubmission etc.),
+// which are the exact functions these components call.
+vi.mock("../i18n/useT", () => ({
+  useT: () => (k: string, v?: Record<string, unknown>) => (v ? `${k}:${JSON.stringify(v)}` : k),
+}));
+
+import { renderToStaticMarkup } from "react-dom/server";
+import { SystemMessageBubble } from "../components/chat/SystemMessageBubble";
+import { AskUserCard } from "../components/chat/AskUserCard";
+import { AutoRetryIndicator } from "../components/chat/AutoRetryIndicator";
+
+describe("SystemMessageBubble — 4 levels", () => {
+  for (const level of ["info", "warning", "error", "fatal"] as const) {
+    it(`renders the ${level} bubble`, () => {
+      const html = renderToStaticMarkup(
+        <SystemMessageBubble
+          view={{ level, message: `${level} text`, recoverable: level !== "fatal" }}
+        />,
+      );
+      expect(html).toContain(`system-message--${level}`);
+      expect(html).toContain(`${level} text`);
+      expect(html).toContain(`data-level="${level}"`);
+    });
+  }
+
+  it("fatal gets the emphasis modifier + alert role", () => {
+    const html = renderToStaticMarkup(
+      <SystemMessageBubble view={{ level: "fatal", message: "boom", recoverable: false }} />,
+    );
+    expect(html).toContain("system-message--emphasis");
+    expect(html).toContain('role="alert"');
+  });
+
+  it("renders an expandable details block when details present", () => {
+    const html = renderToStaticMarkup(
+      <SystemMessageBubble
+        view={{ level: "error", message: "oops", details: "stack-trace-here", recoverable: true }}
+      />,
+    );
+    expect(html).toContain("<details");
+    expect(html).toContain("stack-trace-here");
+  });
+});
+
+describe("AskUserCard — structure", () => {
+  it("renders option buttons + free-text input when open", () => {
+    const html = renderToStaticMarkup(
+      <AskUserCard
+        view={{ requestId: "r1", agent: "principal", question: "Pick", options: ["A", "B"], allowFreeText: true }}
+        onSubmit={() => {}}
+      />,
+    );
+    expect(html).toContain("ask-user");
+    expect(html).toContain('data-request-id="r1"');
+    expect(html).toContain(">A<");
+    expect(html).toContain(">B<");
+    expect(html).toContain("ask-user__input");
+  });
+
+  it("renders the answered state once resolved", () => {
+    const html = renderToStaticMarkup(
+      <AskUserCard
+        view={{ requestId: "r1", agent: "principal", question: "Pick", answer: "A" }}
+        onSubmit={() => {}}
+      />,
+    );
+    expect(html).toContain("ask-user--answered");
+    expect(html).not.toContain("ask-user__option");
+  });
+});
+
+describe("AutoRetryIndicator — structure", () => {
+  it("renders countdown + cancel button while active", () => {
+    const html = renderToStaticMarkup(
+      <AutoRetryIndicator
+        view={{ attempt: 2, maxAttempts: 5, delayMs: 3000 }}
+        onCancel={() => {}}
+      />,
+    );
+    expect(html).toContain("auto-retry");
+    expect(html).toContain("auto-retry__cancel");
+    expect(html).toContain("chat.retry.attempt");
+  });
+
+  it("hides the cancel button once cancelled", () => {
+    const html = renderToStaticMarkup(
+      <AutoRetryIndicator
+        view={{ attempt: 2, maxAttempts: 5, delayMs: 3000, cancelled: true }}
+        onCancel={() => {}}
+      />,
+    );
+    expect(html).toContain("auto-retry--cancelled");
+    expect(html).not.toContain("auto-retry__cancel");
+  });
+});

package/src/__tests__/newUiEvents.test.ts

@@ -0,0 +1,236 @@
+import { describe, it, expect } from "vitest";
+import {
+  toSystemMessageView,
+  toAskUserView,
+  toAutoRetryView,
+  isAutoRetryStatus,
+  resolveAskUserSubmission,
+  isAskUserOpen,
+  autoRetryCountdownSeconds,
+} from "../contexts/newUiEvents";
+import { reduceMessagesForEvent } from "../contexts/messageReducer";
+import type { ChatMessage, WebSocketEvent } from "../contracts/backend";
+
+// Events arrive post-normalizeAgUiEvent (camelCase). We exercise the mapping +
+// reducer with that shape, plus tolerate the raw snake_case fallback.
+
+describe("system_message mapping", () => {
+  it("maps each level and defaults recoverable", () => {
+    for (const level of ["info", "warning", "error"] as const) {
+      const v = toSystemMessageView({ type: "system_message", level, message: "m" } as WebSocketEvent);
+      expect(v.level).toBe(level);
+      expect(v.recoverable).toBe(true); // non-fatal defaults recoverable
+    }
+    const fatal = toSystemMessageView({ type: "system_message", level: "fatal", message: "boom" } as WebSocketEvent);
+    expect(fatal.level).toBe("fatal");
+    expect(fatal.recoverable).toBe(false); // fatal defaults non-recoverable
+  });
+
+  it("honors explicit recoverable + details + agent", () => {
+    const v = toSystemMessageView({
+      type: "system_message",
+      level: "fatal",
+      message: "m",
+      details: "stacktrace",
+      agent: "librarian",
+      recoverable: true,
+    } as WebSocketEvent);
+    expect(v.recoverable).toBe(true);
+    expect(v.details).toBe("stacktrace");
+    expect(v.agent).toBe("librarian");
+  });
+
+  it("falls back to info for unknown level", () => {
+    const v = toSystemMessageView({ type: "system_message", level: "bogus", message: "m" } as WebSocketEvent);
+    expect(v.level).toBe("info");
+  });
+
+  it("reduces into a system_message ChatMessage", () => {
+    const out = reduceMessagesForEvent([], {
+      type: "system_message",
+      level: "warning",
+      message: "watch out",
+    } as WebSocketEvent);
+    expect(out).toHaveLength(1);
+    expect(out[0].kind).toBe("system_message");
+    expect(out[0].systemMessage?.level).toBe("warning");
+    expect(out[0].content).toBe("watch out");
+  });
+});
+
+describe("ask_user mapping + submit + reducer round-trip", () => {
+  const event = {
+    type: "user_input_request",
+    requestId: "req-42",
+    agent: "principal",
+    question: "Pick one",
+    options: ["A", "B"],
+    allowFreeText: true,
+    timeoutSec: 30,
+  } as WebSocketEvent;
+
+  it("maps camelCase wire fields", () => {
+    const v = toAskUserView(event);
+    expect(v.requestId).toBe("req-42");
+    expect(v.options).toEqual(["A", "B"]);
+    expect(v.allowFreeText).toBe(true);
+    expect(v.timeoutSec).toBe(30);
+  });
+
+  it("tolerates snake_case fallback", () => {
+    const v = toAskUserView({
+      type: "user_input_request",
+      request_id: "rid",
+      agent: "a",
+      question: "q",
+      allow_free_text: true,
+      timeout_sec: 10,
+    } as unknown as WebSocketEvent);
+    expect(v.requestId).toBe("rid");
+    expect(v.allowFreeText).toBe(true);
+    expect(v.timeoutSec).toBe(10);
+  });
+
+  it("reduces into an ask_user card keyed by requestId, dedupes re-emit", () => {
+    let msgs = reduceMessagesForEvent([], event);
+    expect(msgs).toHaveLength(1);
+    expect(msgs[0].kind).toBe("ask_user");
+    expect(msgs[0].id).toBe("ask-req-42");
+    // Re-emit of the same request must not stack a second card.
+    msgs = reduceMessagesForEvent(msgs, event);
+    expect(msgs).toHaveLength(1);
+  });
+
+  it("submit resolves with the right requestId + trimmed answer", () => {
+    const v = toAskUserView(event);
+    expect(resolveAskUserSubmission(v, "  B  ")).toEqual({ requestId: "req-42", answer: "B" });
+    // Empty / closed inputs do not submit.
+    expect(resolveAskUserSubmission(v, "   ")).toBeNull();
+    expect(resolveAskUserSubmission(v, "B", { answered: true })).toBeNull();
+    expect(resolveAskUserSubmission(v, "B", { timedOut: true })).toBeNull();
+  });
+
+  it("a user_input_response resolves the matching card by requestId", () => {
+    const cards = reduceMessagesForEvent([], event);
+    const resolved = reduceMessagesForEvent(cards, {
+      type: "user_input_response",
+      requestId: "req-42",
+      answer: "A",
+    } as WebSocketEvent);
+    expect(resolved[0].askUser?.answer).toBe("A");
+    expect(isAskUserOpen(resolved[0].askUser!)).toBe(false);
+    // A non-matching requestId leaves the card open.
+    const other = reduceMessagesForEvent(cards, {
+      type: "user_input_response",
+      requestId: "nope",
+      answer: "X",
+    } as WebSocketEvent);
+    expect(other[0].askUser?.answer).toBeUndefined();
+    expect(isAskUserOpen(other[0].askUser!)).toBe(true);
+  });
+});
+
+describe("auto_retry mapping + detection + countdown", () => {
+  const retryEvent = {
+    type: "agent_status_update",
+    agentName: "principal",
+    status: "retrying",
+    attempt: 2,
+    maxAttempts: 5,
+    delayMs: 3000,
+    reason: "rate limited",
+  } as WebSocketEvent;
+
+  it("detects auto-retry status (and only that)", () => {
+    expect(isAutoRetryStatus(retryEvent)).toBe(true);
+    expect(isAutoRetryStatus({ type: "agent_status_update", status: "running" } as WebSocketEvent)).toBe(false);
+    expect(isAutoRetryStatus({ type: "agent_status_update", autoRetry: { attempt: 1 } } as unknown as WebSocketEvent)).toBe(true);
+    expect(isAutoRetryStatus({ type: "system_message", level: "info", message: "x" } as WebSocketEvent)).toBe(false);
+  });
+
+  it("maps attempt / maxAttempts / delayMs", () => {
+    const v = toAutoRetryView(retryEvent);
+    expect(v.attempt).toBe(2);
+    expect(v.maxAttempts).toBe(5);
+    expect(v.delayMs).toBe(3000);
+    expect(v.reason).toBe("rate limited");
+  });
+
+  it("computes ceil-seconds countdown", () => {
+    expect(autoRetryCountdownSeconds({ attempt: 1, maxAttempts: 1, delayMs: 3000 })).toBe(3);
+    expect(autoRetryCountdownSeconds({ attempt: 1, maxAttempts: 1, delayMs: 2500 })).toBe(3);
+    expect(autoRetryCountdownSeconds({ attempt: 1, maxAttempts: 1, delayMs: 0 })).toBe(0);
+  });
+
+  it("reduces a retrying status into an auto_retry ChatMessage", () => {
+    const out = reduceMessagesForEvent([], retryEvent);
+    expect(out).toHaveLength(1);
+    expect(out[0].kind).toBe("auto_retry");
+    expect(out[0].autoRetry?.attempt).toBe(2);
+    // A normal status update produces no message.
+    expect(reduceMessagesForEvent([], { type: "agent_status_update", status: "running" } as WebSocketEvent)).toHaveLength(0);
+  });
+});
+
+describe("retry cancel callback wiring", () => {
+  it("fires the cancel callback when invoked (host-supplied abort path)", () => {
+    // The component delegates cancel to a host callback; we assert that calling
+    // the supplied handler triggers exactly once (mirrors PromptComposer wiring
+    // of onRetryCancel -> interruptCurrent).
+    let cancelled = 0;
+    const onCancel = () => { cancelled += 1; };
+    onCancel();
+    expect(cancelled).toBe(1);
+  });
+});
+
+// Sanity: the reducer leaves an unrelated message list untouched for unknown events.
+describe("reducer passthrough", () => {
+  it("ignores unknown event types", () => {
+    const existing: ChatMessage[] = [
+      { id: "1", role: "user", content: "hi", createdAt: new Date().toISOString() },
+    ];
+    expect(reduceMessagesForEvent(existing, { type: "WHATEVER" } as WebSocketEvent)).toBe(existing);
+  });
+});
+
+// Regression: a START with no matching END leaves a message stuck at
+// streaming:true, so the activity group shows "智能体思考中" forever. The run
+// terminators (RUN_FINISHED / RUN_ERROR) must sweep dangling streaming flags.
+describe("run terminators clear dangling streaming flags", () => {
+  const open = (agent: string): ChatMessage => ({
+    id: `m-${agent}`,
+    role: "assistant",
+    content: "partial…",
+    createdAt: new Date().toISOString(),
+    agent,
+    streaming: true,
+    kind: "text",
+  });
+
+  it("RUN_FINISHED clears streaming on the run agent's messages", () => {
+    const out = reduceMessagesForEvent([open("principal")], {
+      type: "RUN_FINISHED",
+      agentName: "principal",
+    } as WebSocketEvent);
+    expect(out[0]!.streaming).toBe(false);
+  });
+
+  it("RUN_FINISHED leaves OTHER agents' messages streaming (multi-agent isolation)", () => {
+    const out = reduceMessagesForEvent([open("worker")], {
+      type: "RUN_FINISHED",
+      agentName: "principal",
+    } as WebSocketEvent);
+    expect(out[0]!.streaming).toBe(true);
+  });
+
+  it("RUN_ERROR clears streaming AND appends an error message", () => {
+    const out = reduceMessagesForEvent([open("principal")], {
+      type: "RUN_ERROR",
+      agentName: "principal",
+      message: "boom",
+    } as WebSocketEvent);
+    expect(out[0]!.streaming).toBe(false);
+    expect(out.some((m) => m.kind === "error" && m.content === "boom")).toBe(true);
+  });
+});

package/src/__tests__/runningToast.test.ts

@@ -0,0 +1,29 @@
+import { describe, it, expect } from "vitest";
+import { runningToastLabel } from "../contexts/runningToast";
+
+describe("runningToastLabel (#76)", () => {
+  it("names a single working agent", () => {
+    expect(runningToastLabel(["librarian"])).toEqual({
+      key: "chat.agentWorking",
+      vars: { name: "librarian" },
+    });
+  });
+
+  it("joins multiple working agents", () => {
+    expect(runningToastLabel(["principal", "librarian"])).toEqual({
+      key: "chat.agentsWorking",
+      vars: { names: "principal、librarian" },
+    });
+  });
+
+  it("uses a custom separator when provided", () => {
+    expect(runningToastLabel(["a", "b"], ", ")).toEqual({
+      key: "chat.agentsWorking",
+      vars: { names: "a, b" },
+    });
+  });
+
+  it("falls back to the generic label when no named agent is running", () => {
+    expect(runningToastLabel([])).toEqual({ key: "chat.agentThinking" });
+  });
+});

package/src/__tests__/tokenUsage.test.ts

@@ -0,0 +1,48 @@
+/**
+ * normalizeSessionState parses the optional `tokenUsage` carried on
+ * session_state frames into the camelCase SessionTokenUsage shape, and tolerates
+ * its absence (older runtime / pre-first-turn).
+ */
+import { describe, it, expect } from "vitest";
+import { normalizeSessionState } from "../contracts/backend";
+
+describe("normalizeSessionState tokenUsage", () => {
+  it("parses total + per-agent breakdown", () => {
+    const snap = normalizeSessionState({
+      run_state: { active: false, run_id: null },
+      agents: [],
+      last_activity_ts: "2026-06-20T00:00:00.000Z",
+      token_usage: {
+        total: { input: 30, output: 12, cache_read: 4, cache_write: 1, total: 47 },
+        by_agent: {
+          principal: { input: 20, output: 8, cache_read: 4, cache_write: 1, total: 33 },
+          librarian: { input: 10, output: 4, cache_read: 0, cache_write: 0, total: 14 },
+        },
+      },
+    });
+    expect(snap.tokenUsage).toBeDefined();
+    expect(snap.tokenUsage!.total.total).toBe(47);
+    expect(snap.tokenUsage!.total.cacheRead).toBe(4);
+    expect(snap.tokenUsage!.byAgent.principal.input).toBe(20);
+    expect(snap.tokenUsage!.byAgent.librarian.total).toBe(14);
+  });
+
+  it("omits tokenUsage when absent and coerces missing numbers to 0", () => {
+    const snap = normalizeSessionState({
+      run_state: { active: true, run_id: "run_1" },
+      agents: [],
+      last_activity_ts: "2026-06-20T00:00:00.000Z",
+    });
+    expect(snap.tokenUsage).toBeUndefined();
+
+    const partial = normalizeSessionState({
+      run_state: { active: true, run_id: "run_1" },
+      agents: [],
+      last_activity_ts: "2026-06-20T00:00:00.000Z",
+      token_usage: { total: { input: 5 }, by_agent: {} },
+    });
+    expect(partial.tokenUsage!.total.input).toBe(5);
+    expect(partial.tokenUsage!.total.output).toBe(0);
+    expect(partial.tokenUsage!.total.total).toBe(0);
+  });
+});

package/src/__tests__/toolDisplay.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest";
+import { formatToolName, formatPayload } from "../utils/toolDisplay";
+
+describe("formatToolName (#84)", () => {
+  it("maps mcp__server__tool to 'server · tool'", () => {
+    expect(formatToolName("mcp__bp_skills__skills_tool")).toBe("bp_skills · skills_tool");
+  });
+
+  it("keeps server/tool segments that contain underscores", () => {
+    expect(formatToolName("mcp__my_server__do_a_thing")).toBe("my_server · do_a_thing");
+  });
+
+  it("returns non-MCP names unchanged", () => {
+    expect(formatToolName("read")).toBe("read");
+    expect(formatToolName("send_message")).toBe("send_message");
+  });
+
+  it("falls back gracefully for missing/empty names", () => {
+    expect(formatToolName(undefined)).toBe("tool");
+    expect(formatToolName(null)).toBe("tool");
+    expect(formatToolName("")).toBe("tool");
+  });
+
+  it("does not crash on a malformed mcp__ prefix with no tool segment", () => {
+    // No second `__` — show the remainder rather than the raw identifier.
+    expect(formatToolName("mcp__justserver")).toBe("justserver");
+  });
+});
+
+describe("formatPayload (#84)", () => {
+  it("parses a JSON string so it is not double-escaped", () => {
+    const raw = JSON.stringify({ path: "a/b.txt", count: 2 });
+    const out = formatPayload(raw);
+    expect(out).toBe('{\n  "path": "a/b.txt",\n  "count": 2\n}');
+    expect(out).not.toContain('\\"');
+  });
+
+  it("pretty-prints a plain object", () => {
+    expect(formatPayload({ a: 1 })).toBe('{\n  "a": 1\n}');
+  });
+
+  it("returns non-JSON strings verbatim", () => {
+    expect(formatPayload("just some text")).toBe("just some text");
+  });
+
+  it("returns a partial/invalid JSON string verbatim", () => {
+    expect(formatPayload('{"path": "a/b')).toBe('{"path": "a/b');
+  });
+
+  it("returns empty string for null/undefined/blank", () => {
+    expect(formatPayload(undefined)).toBe("");
+    expect(formatPayload(null)).toBe("");
+    expect(formatPayload("   ")).toBe("");
+  });
+});

package/src/__tests__/traceReducer.test.ts

@@ -0,0 +1,62 @@
+import { describe, it, expect } from "vitest";
+import { reduceTraceForEvent } from "../contexts/traceReducer";
+import type { TraceGraph, WebSocketEvent } from "../contracts/backend";
+
+// #79: trace nodes arrive live as CUSTOM { name:"trace_node", value:{ op, node } }.
+
+const node = (id: string, extra: Record<string, unknown> = {}) => ({
+  id,
+  title: `node ${id}`,
+  type: "task",
+  status: "completed",
+  parents: [],
+  parentIds: [],
+  childIds: [],
+  artifacts: [],
+  toolCalls: [],
+  ...extra,
+});
+
+const traceEv = (op: string, n: Record<string, unknown>): WebSocketEvent =>
+  ({ type: "CUSTOM", name: "trace_node", value: { op, node: n } } as unknown as WebSocketEvent);
+
+describe("reduceTraceForEvent (#79)", () => {
+  it("seeds a graph from null on the first node", () => {
+    const out = reduceTraceForEvent(null, traceEv("created", node("a")), "s");
+    expect(out).not.toBeNull();
+    expect(out!.nodes.map((n) => n.id)).toEqual(["a"]);
+    expect(out!.meta.sessionId).toBe("s");
+  });
+
+  it("appends a new node id", () => {
+    const start: TraceGraph = { meta: { sessionId: "s" }, nodes: [node("a")] };
+    const out = reduceTraceForEvent(start, traceEv("created", node("b")), "s");
+    expect(out!.nodes.map((n) => n.id)).toEqual(["a", "b"]);
+  });
+
+  it("replaces an existing node in place on update", () => {
+    const start: TraceGraph = { meta: { sessionId: "s" }, nodes: [node("a", { status: "running" })] };
+    const out = reduceTraceForEvent(start, traceEv("updated", node("a", { status: "completed" })), "s");
+    expect(out!.nodes).toHaveLength(1);
+    expect(out!.nodes[0]!.status).toBe("completed");
+  });
+
+  it("recomputes childIds from parent links", () => {
+    const start: TraceGraph = { meta: { sessionId: "s" }, nodes: [node("a")] };
+    const child = node("b", { parents: [{ id: "a", relation: "follows" }], parentIds: ["a"] });
+    const out = reduceTraceForEvent(start, traceEv("created", child), "s");
+    const parent = out!.nodes.find((n) => n.id === "a")!;
+    expect(parent.childIds).toEqual(["b"]);
+  });
+
+  it("ignores non trace_node events (same reference)", () => {
+    const start: TraceGraph = { meta: { sessionId: "s" }, nodes: [node("a")] };
+    expect(reduceTraceForEvent(start, { type: "RUN_STARTED" } as WebSocketEvent, "s")).toBe(start);
+  });
+
+  it("ignores a payload with no node id (same reference)", () => {
+    const start: TraceGraph = { meta: { sessionId: "s" }, nodes: [node("a")] };
+    const bad = { type: "CUSTOM", name: "trace_node", value: { op: "created", node: {} } } as unknown as WebSocketEvent;
+    expect(reduceTraceForEvent(start, bad, "s")).toBe(start);
+  });
+});

package/src/components/chat/AskUserCard.tsx

@@ -0,0 +1,123 @@
+import { useEffect, useMemo, useState } from "react";
+import { CheckCircle2, HelpCircle } from "lucide-react";
+import type { AskUserView } from "../../contracts/backend";
+import { resolveAskUserSubmission } from "../../contexts/newUiEvents";
+import { useT } from "../../i18n/useT";
+
+interface AskUserCardProps {
+  view: AskUserView;
+  /** Submit the chosen/typed answer back through the send path. */
+  onSubmit: (requestId: string, answer: string) => void;
+}
+
+/**
+ * 修正6 — ask_user interaction card. Renders a `user_input_request` as an
+ * interactive card: option buttons and/or a free-text input. On submit it
+ * fires `onSubmit(requestId, answer)` so the host can post a
+ * user_input_response. Supports an optional countdown when `timeoutSec` is set.
+ */
+export function AskUserCard({ view, onSubmit }: AskUserCardProps) {
+  const t = useT();
+  const [freeText, setFreeText] = useState("");
+  const answered = view.answer !== undefined;
+
+  // Optional countdown. Only ticks while unanswered and a timeout is given.
+  const initialSec = useMemo(
+    () => (typeof view.timeoutSec === "number" && view.timeoutSec > 0 ? Math.floor(view.timeoutSec) : null),
+    [view.timeoutSec],
+  );
+  const [secondsLeft, setSecondsLeft] = useState<number | null>(initialSec);
+
+  useEffect(() => {
+    if (answered || initialSec === null) return;
+    setSecondsLeft(initialSec);
+    const id = window.setInterval(() => {
+      setSecondsLeft((prev) => {
+        if (prev === null) return prev;
+        if (prev <= 1) {
+          window.clearInterval(id);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+    return () => window.clearInterval(id);
+  }, [answered, initialSec]);
+
+  const timedOut = secondsLeft === 0;
+  const disabled = answered || timedOut;
+
+  const submit = (answer: string) => {
+    const resolved = resolveAskUserSubmission(view, answer, { answered, timedOut });
+    if (!resolved) return;
+    onSubmit(resolved.requestId, resolved.answer);
+  };
+
+  if (answered) {
+    return (
+      <div className="ask-user ask-user--answered" data-testid="ask-user" data-request-id={view.requestId}>
+        <div className="ask-user__head">
+          <CheckCircle2 size={15} className="ask-user__icon" aria-hidden="true" />
+          <span className="ask-user__title">{view.agent}</span>
+        </div>
+        <p className="ask-user__question">{view.question}</p>
+        <p className="ask-user__answer">{t("chat.ask.answered", { answer: view.answer ?? "" })}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="ask-user" data-testid="ask-user" data-request-id={view.requestId}>
+      <div className="ask-user__head">
+        <HelpCircle size={15} className="ask-user__icon" aria-hidden="true" />
+        <span className="ask-user__title">{t("chat.ask.title")}</span>
+        <span className="ask-user__agent">{view.agent}</span>
+        {secondsLeft !== null ? (
+          <span className="ask-user__timer">
+            {timedOut ? t("chat.ask.timedOut") : t("chat.ask.timeoutLeft", { sec: secondsLeft })}
+          </span>
+        ) : null}
+      </div>
+      <p className="ask-user__question">{view.question}</p>
+
+      {view.options && view.options.length > 0 ? (
+        <div className="ask-user__options">
+          {view.options.map((option) => (
+            <button
+              key={option}
+              type="button"
+              className="ask-user__option"
+              disabled={disabled}
+              onClick={() => submit(option)}
+            >
+              {option}
+            </button>
+          ))}
+        </div>
+      ) : null}
+
+      {view.allowFreeText || !view.options || view.options.length === 0 ? (
+        <form
+          className="ask-user__free"
+          onSubmit={(e) => {
+            e.preventDefault();
+            submit(freeText);
+          }}
+        >
+          <input
+            className="ask-user__input"
+            type="text"
+            value={freeText}
+            disabled={disabled}
+            placeholder={t("chat.ask.freeTextPlaceholder")}
+            onChange={(e) => setFreeText(e.target.value)}
+            aria-label={view.question}
+          />
+          <button type="submit" className="ask-user__submit" disabled={disabled || freeText.trim() === ""}>
+            {t("chat.ask.submit")}
+          </button>
+        </form>
+      ) : null}
+    </div>
+  );
+}