@brainpilot/web 0.0.3 → 0.0.5

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/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>
+  );
+}

package/src/components/chat/AutoRetryIndicator.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useMemo, useState } from "react";
+import { RotateCw, X } from "lucide-react";
+import type { AutoRetryView } from "../../contracts/backend";
+import { autoRetryCountdownSeconds } from "../../contexts/newUiEvents";
+import { useT } from "../../i18n/useT";
+
+interface AutoRetryIndicatorProps {
+  view: AutoRetryView;
+  /** Abort the pending retry (wired to the interrupt / abort path). */
+  onCancel: () => void;
+}
+
+/**
+ * 修正6 — auto-retry countdown + cancel. Surfaces a Pi `auto_retry_start`
+ * (attempt/maxAttempts/delayMs) as a countdown indicator with a Cancel button
+ * that calls the interrupt/abort path.
+ */
+export function AutoRetryIndicator({ view, onCancel }: AutoRetryIndicatorProps) {
+  const t = useT();
+  const cancelled = view.cancelled === true;
+
+  const initialSec = useMemo(() => autoRetryCountdownSeconds(view), [view]);
+  const [secondsLeft, setSecondsLeft] = useState(initialSec);
+
+  useEffect(() => {
+    if (cancelled || initialSec <= 0) return;
+    setSecondsLeft(initialSec);
+    const id = window.setInterval(() => {
+      setSecondsLeft((prev) => {
+        if (prev <= 1) {
+          window.clearInterval(id);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+    return () => window.clearInterval(id);
+  }, [cancelled, initialSec]);
+
+  return (
+    <div
+      className={`auto-retry${cancelled ? " auto-retry--cancelled" : ""}`}
+      role="status"
+      data-testid="auto-retry"
+    >
+      <RotateCw size={14} className="auto-retry__icon" aria-hidden="true" />
+      <div className="auto-retry__body">
+        <span className="auto-retry__title">{t("chat.retry.title")}</span>
+        <span className="auto-retry__attempt">
+          {t("chat.retry.attempt", { attempt: view.attempt, max: view.maxAttempts })}
+        </span>
+        {cancelled ? (
+          <span className="auto-retry__status">{t("chat.retry.cancelled")}</span>
+        ) : secondsLeft > 0 ? (
+          <span className="auto-retry__countdown">{t("chat.retry.countdown", { sec: secondsLeft })}</span>
+        ) : null}
+      </div>
+      {!cancelled ? (
+        <button
+          type="button"
+          className="auto-retry__cancel"
+          onClick={onCancel}
+          aria-label={t("chat.retry.cancel")}
+        >
+          <X size={13} aria-hidden="true" />
+          {t("chat.retry.cancel")}
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/components/chat/ComposerInput.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useRef } from "react";
+import type { KeyboardEvent } from "react";
+import { useDraft } from "../../contexts/draftStore";
+
+interface ComposerInputProps {
+  /** Active session id; drafts are isolated per session. null disables editing. */
+  sessionId: string | null;
+  placeholder: string;
+  /** Aria label for the textarea (sr-only label uses the same text). */
+  ariaLabel: string;
+}
+
+/**
+ * Isolated textarea bound to draftStore[sessionId].
+ *
+ * Splitting this out of PromptComposer is the whole point of the input-lag
+ * fix: keystrokes used to re-render the whole chat subtree because draft state
+ * lived on SessionContext. Now keystrokes only re-render this component (and
+ * its sibling ComposerSendButton, which also subscribes to the same store).
+ *
+ * Form submission is owned by the enclosing <form> in PromptComposer; this
+ * component just handles Enter-to-submit by walking up to the form.
+ */
+export function ComposerInput({ sessionId, placeholder, ariaLabel }: ComposerInputProps) {
+  const [draft, setDraft] = useDraft(sessionId);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  // Grow textarea to fit content. Reading scrollHeight forces a layout — fine
+  // here because only this component re-renders on draft change.
+  const autoResize = () => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = "auto";
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  };
+
+  // Resize on draft change (covers store-driven updates: slash menu /
+  // suggestions / switching sessions) and initial mount with a pre-existing
+  // draft (e.g. user typed, switched tabs, switched back).
+  useEffect(() => {
+    autoResize();
+  }, [draft]);
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    // Shift+Enter inserts a newline; bare Enter submits. Skip while IME is
+    // composing so CJK candidate selection doesn't fire submit.
+    if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) {
+      return;
+    }
+    event.preventDefault();
+    event.currentTarget.form?.requestSubmit();
+  };
+
+  return (
+    <>
+      <label className="sr-only" htmlFor="prompt-input">
+        {ariaLabel}
+      </label>
+      <textarea
+        ref={textareaRef}
+        id="prompt-input"
+        rows={1}
+        value={draft}
+        onChange={(event) => {
+          setDraft(event.target.value);
+          autoResize();
+        }}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+      />
+    </>
+  );
+}

package/src/components/chat/ComposerSendButton.tsx

@@ -0,0 +1,26 @@
+import { ArrowUp } from "lucide-react";
+import { useDraft } from "../../contexts/draftStore";
+import { IconButton } from "../primitives/IconButton";
+
+interface ComposerSendButtonProps {
+  sessionId: string | null;
+  canSend: boolean;
+  label: string;
+}
+
+/**
+ * Send button that subscribes only to draftStore[sessionId] to compute its
+ * disabled state. Sibling of ComposerInput; lives inside the same <form> in
+ * PromptComposer, so click triggers normal form submission.
+ *
+ * Subscribing here (rather than passing isEmpty down from PromptComposer)
+ * keeps the parent off the keystroke render path entirely.
+ */
+export function ComposerSendButton({ sessionId, canSend, label }: ComposerSendButtonProps) {
+  const [draft] = useDraft(sessionId);
+  return (
+    <IconButton disabled={!canSend || !draft.trim()} label={label} type="submit" variant="strong">
+      <ArrowUp size={18} />
+    </IconButton>
+  );
+}

package/src/components/chat/MarkdownMessage.tsx

@@ -0,0 +1,24 @@
+import { memo } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeHighlight from "rehype-highlight";
+
+interface MarkdownMessageProps {
+  content: string;
+}
+
+function MarkdownMessageImpl({ content }: MarkdownMessageProps) {
+  return (
+    <div className="message-card__content">
+      <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeHighlight]}>
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}
+
+// Memoized so re-renders driven by unrelated parent state (e.g. a sibling
+// component changing) don't re-parse markdown for every visible message —
+// `content` is a string so default shallow-equal compare is precise.
+export const MarkdownMessage = memo(MarkdownMessageImpl);
+