@schlessera/brain-ui-react 0.35.0 → 0.37.0

package/src/components/chat/ask-user-card.tsx

@@ -1,198 +1,260 @@
-import { uiConfig } from "../../config.js";
-import { useState, useEffect, useRef, useMemo } from "react";
+/**
+ * The `ask_user` exchange, one kit `AskUserCard` per question (D38 §1).
+ *
+ * An exchange is not a tool card. It has four states and all four stay in
+ * the transcript at full contrast — nothing rolls up or fades, because a
+ * question the agent asked is part of the record whichever way it was
+ * answered:
+ *
+ *   `pending`   — the options, one focus stop, Submit / Dismiss. "Other"
+ *                 opens the kit's free-text field in place of the Submit row:
+ *                 a typed alternative is the same exchange, not a new one.
+ *   `answered`  — the chosen answer in mono teal, with when. The alternatives
+ *                 are GONE, not dimmed: they were never the record. A
+ *                 multi-select lists every choice as its own row.
+ *   `typed`     — the user answered in the composer instead. The card quotes
+ *                 what it took, under a neutral border.
+ *   `dismissed` — the question the turn outlived, in gold (seventh drop,
+ *                 ruling 7): no options, a lapsed row stating the fact, and
+ *                 "Ask again". The server-side request is already resolved,
+ *                 so asking again reopens the card LOCALLY to pending, and a
+ *                 submit from a reopened card goes out as a normal composer
+ *                 message quoting the question and the chosen answer(s)
+ *                 (`onReask`) rather than as an `ask_user_response` nobody is
+ *                 waiting for. No `onReask`, no button (D20).
+ *
+ * Multi-select questions ride the same kit card with `multi` (ruling 6): the
+ * options are `ChoiceOption multiple` — checkbox role, square mark — inside a
+ * `role="group"`, and "Other" toggles like any other row. The exchange's
+ * answers are keyed by question text and submitted together, so the action
+ * row sits on the LAST question's card and gathers every question's
+ * selection.
+ */
+
+import { useBrainUiRoot } from "../../root-context.js";
+import { useEffect, useRef, useState } from "react";
 import {
-  Check,
-  X,
-  MessageCircleQuestion,
-  ChevronRight,
-  ChevronUp,
-} from "lucide-react";
+  AskUserCard as KitAskUserCard,
+  Surface,
+  type AskUserOption as KitAskUserOption,
+} from "@schlessera/brain-ui-kit";
 import type {
   AskUserQuestion,
-  AskUserOption,
   AskUserAnnotation,
 } from "@schlessera/brain-ui-sdk/protocol";
 import { BrainMarkdown } from "./brain-markdown.js";
-import { cn } from "../../lib/utils.js";
+import { formatRelativeTime } from "../../lib/format-time.js";
+import { reaskMessage } from "./ask-user-typed.js";
 
 const OTHER_LABEL = "Other";
 
+/** A multi-select's picks travel as one string; this is the seam. */
+const MULTI_JOIN = ", ";
+
 interface PerQuestionState {
   /** Picked option labels (single-select keeps only the latest). */
   selected: string[];
-  /** Free-text content when "Other" is selected. */
+  /** The kit's free-text field is open in place of the Submit row. */
+  otherOpen: boolean;
+  /** A free-text answer already taken from the field (held until Submit). */
   otherText: string;
-  /** Currently focused option index — drives the preview pane. */
-  focusedIndex: number | null;
+  /** The option holding focus — the contract's `preview` follows focus, so
+   * ↑↓ over the options shows each one's preview before anything is picked. */
+  focused: string | null;
 }
 
 function defaultState(): PerQuestionState {
-  return { selected: [], otherText: "", focusedIndex: null };
+  return { selected: [], otherOpen: false, otherText: "", focused: null };
+}
+
+/** The preview to show for a question: the focused option's, else the single
+ * chosen one's. `preview` is "content rendered when an option is focused"
+ * in the ask_user contract; selection is the fallback once focus has moved on. */
+export function previewFor(
+  question: AskUserQuestion,
+  state: Pick<PerQuestionState, "focused" | "selected">
+): string | undefined {
+  const focused = state.focused ? question.options.find((o) => o.label === state.focused) : undefined;
+  if (focused?.preview) return focused.preview;
+  if (state.selected.length === 1 && state.selected[0] !== OTHER_LABEL) {
+    return question.options.find((o) => o.label === state.selected[0])?.preview;
+  }
+  return undefined;
+}
+
+/** The answer the exchange recorded for one question, as the card shows it. */
+export function recordedAnswer(
+  question: AskUserQuestion,
+  answers: Record<string, string> | undefined
+): string {
+  return answers?.[question.question] ?? "";
 }
 
+/**
+ * The recorded answer as the rows the card lists: one for a single-select,
+ * one per pick for a multi-select. The picks were joined by this module, so
+ * splitting on the same seam is the inverse of its own encoding — a label
+ * that itself contains ", " is the one case it cannot tell apart.
+ */
+export function recordedAnswers(
+  question: AskUserQuestion,
+  answers: Record<string, string> | undefined
+): string[] {
+  const answer = recordedAnswer(question, answers);
+  if (!question.multiSelect) return [answer];
+  return answer.split(MULTI_JOIN).filter((a) => a.length > 0);
+}
+
+/** "you chose this · 3m ago", "you chose 2 · 3m ago", or without the time
+ * when none is known. */
+export function answeredMeta(answeredAt: number | undefined, count = 1): string {
+  const chose = count > 1 ? `you chose ${count}` : "you chose this";
+  return answeredAt === undefined ? chose : `${chose} · ${formatRelativeTime(answeredAt)}`;
+}
+
+export const TYPED_META = "taken from your next message";
+
+/** The typed answer is the user's own words, so the card quotes them. */
+export function quoted(text: string): string {
+  return text ? `\u201C${text}\u201D` : "";
+}
+
+/** The lapsed row on a dismissed card: what happened, in the app's terms. */
+export const DISMISSED_NOTE = "dismissed · the agent got no answer";
+
 export function AskUserCard({
   requestId,
   questions,
   answered,
   cancelled,
-  live = false,
+  typed,
+  answeredAt,
   onSubmit,
   onCancel,
+  onReask,
 }: {
   requestId: string;
   questions: AskUserQuestion[];
   answered?: Record<string, string>;
   cancelled?: boolean;
-  /** Parent message still streaming — keeps an expanded card open until it ends. */
-  live?: boolean;
+  /** The answer was typed into the composer rather than chosen. */
+  typed?: boolean;
+  /** When the answer was given; absent on resumed history. */
+  answeredAt?: number;
   onSubmit: (
     requestId: string,
     answers: Record<string, string>,
     annotations?: Record<string, AskUserAnnotation>
   ) => void;
   onCancel: (requestId: string) => void;
+  /**
+   * A dismissed question asked again: the answer goes out as a normal
+   * composer message, because the server already resolved the request.
+   * Absent, the dismissed card offers no "Ask again".
+   */
+  onReask?: (text: string) => void;
 }) {
+  const root = useBrainUiRoot();
+  const prompt = `${root.config.assistantName} needs your input`;
 
-  // Independent per-question state
   const [state, setState] = useState<PerQuestionState[]>(() =>
     questions.map(() => defaultState())
   );
+  // "Ask again" on a dismissed card: pending again, locally.
+  const [reopened, setReopened] = useState(false);
 
-  // Once answered/dismissed, the card rolls up to a one-line summary that
-  // scrolls away with the rest of the turn. It stays open while unanswered
-  // (it's an active prompt) and re-collapses when the streaming turn ends.
-  const [collapsed, setCollapsed] = useState(true);
-  const prevLive = useRef(live);
-  useEffect(() => {
-    if (prevLive.current && !live) setCollapsed(true);
-    prevLive.current = live;
-  }, [live]);
-
-  // Re-initialise if the question set changes (new requestId arriving)
+  // Re-initialise if the question set changes (new requestId arriving).
   const lastRequestId = useRef(requestId);
   useEffect(() => {
     if (lastRequestId.current !== requestId) {
       lastRequestId.current = requestId;
       setState(questions.map(() => defaultState()));
+      setReopened(false);
     }
   }, [requestId, questions]);
 
-  // If we already have answers (from prior submit), force-fill state for display
-  const lockedAnswers = answered ?? null;
-  const isLocked = !!lockedAnswers || !!cancelled;
+  const dismissed = !!cancelled && !answered && !reopened;
+  const isLocked = !!answered || dismissed;
 
-  const filledState = useMemo<PerQuestionState[]>(() => {
-    if (!lockedAnswers) return state;
-    return questions.map((q) => {
-      const raw = lockedAnswers[q.question] ?? "";
-      const labels = q.multiSelect
-        ? raw
-            .split(",")
-            .map((s) => s.trim())
-            .filter(Boolean)
-        : raw
-          ? [raw]
-          : [];
-      // If the saved label isn't a known option, treat as "Other"
-      const knownLabels = new Set(q.options.map((o) => o.label));
-      const selected = labels.filter((l) => knownLabels.has(l));
-      const otherLabels = labels.filter((l) => !knownLabels.has(l));
-      const finalSelected = otherLabels.length
-        ? [...selected, OTHER_LABEL]
-        : selected;
-      return {
-        selected: finalSelected,
-        otherText: otherLabels.join(", "),
-        focusedIndex: null,
-      };
-    });
-  }, [lockedAnswers, questions, state]);
-
-  // Collapsed once locked: a compact, expandable summary that behaves like a
-  // finished tool-timeline row instead of a full card pinned in place.
-  if (isLocked && collapsed) {
-    return (
-      <AskUserSummaryRow
-        questions={questions}
-        answers={lockedAnswers}
-        cancelled={!!cancelled}
-        onExpand={() => setCollapsed(false)}
-      />
-    );
-  }
-
-  function toggleOption(qi: number, label: string) {
+  function pick(qi: number, label: string) {
     if (isLocked) return;
-    setState((prev) => {
-      const next = prev.map((s, i) => {
+    setState((prev) =>
+      prev.map((s, i) => {
         if (i !== qi) return s;
         const q = questions[qi];
-        if (q.multiSelect) {
-          const has = s.selected.includes(label);
-          return {
-            ...s,
-            selected: has
-              ? s.selected.filter((l) => l !== label)
-              : [...s.selected, label],
-          };
+        if (label === OTHER_LABEL) {
+          // Multi-select: Other toggles like any other row, and opens the
+          // field while it is on; single-select: it is the pick.
+          if (q.multiSelect) {
+            const on = !s.selected.includes(OTHER_LABEL);
+            return { ...s, selected: toggled(s.selected, OTHER_LABEL), otherOpen: on };
+          }
+          return { ...s, otherOpen: true, selected: [OTHER_LABEL] };
         }
+        // Multi-select: Other stays open while it is on — picking another
+        // row beside it must not close the field and strand an empty custom
+        // answer. Single-select: any other pick replaces Other.
         return {
           ...s,
-          selected: s.selected[0] === label ? [] : [label],
+          otherOpen: q.multiSelect ? s.selected.includes(OTHER_LABEL) : false,
+          selected: q.multiSelect
+            ? toggled(s.selected, label)
+            : s.selected[0] === label
+              ? []
+              : [label],
         };
-      });
-      return next;
-    });
+      })
+    );
   }
 
-  function setFocus(qi: number, idx: number | null) {
-    if (isLocked) return;
-    setState((prev) =>
-      prev.map((s, i) => (i === qi ? { ...s, focusedIndex: idx } : s))
-    );
+  function focus(qi: number, label: string | null) {
+    setState((prev) => prev.map((s, i) => (i === qi ? { ...s, focused: label } : s)));
   }
 
-  function setOtherText(qi: number, text: string) {
-    if (isLocked) return;
-    setState((prev) =>
-      prev.map((s, i) => (i === qi ? { ...s, otherText: text } : s))
+  function answerFor(s: PerQuestionState): string[] {
+    return s.selected.flatMap((label) =>
+      label === OTHER_LABEL ? (s.otherText.trim() ? [s.otherText.trim()] : []) : [label]
     );
   }
 
-  const canSubmit = !isLocked && questions.every((_q, i) => {
-    const s = state[i];
-    if (s.selected.length === 0) return false;
-    if (s.selected.includes(OTHER_LABEL) && !s.otherText.trim()) return false;
-    return true;
-  });
+  const complete = questions.every((_q, i) => answerFor(state[i]).length > 0);
 
-  function handleSubmit() {
-    if (!canSubmit) return;
+  function submit(override?: { qi: number; text: string }) {
     const answers: Record<string, string> = {};
     const annotations: Record<string, AskUserAnnotation> = {};
     for (let i = 0; i < questions.length; i++) {
       const q = questions[i];
-      const s = state[i];
-      const labels: string[] = [];
-      let usedOther = false;
-      for (const sel of s.selected) {
-        if (sel === OTHER_LABEL) {
-          if (s.otherText.trim()) labels.push(s.otherText.trim());
-          usedOther = true;
-        } else {
-          labels.push(sel);
-        }
-      }
-      answers[q.question] = q.multiSelect ? labels.join(", ") : (labels[0] ?? "");
+      const s =
+        override && override.qi === i
+          ? {
+              ...state[i],
+              // A multi-select keeps its other picks beside the typed one.
+              selected: q.multiSelect
+                ? state[i].selected.includes(OTHER_LABEL)
+                  ? state[i].selected
+                  : [...state[i].selected, OTHER_LABEL]
+                : [OTHER_LABEL],
+              otherText: override.text,
+            }
+          : state[i];
+      const labels = answerFor(s);
+      if (labels.length === 0) return;
+      answers[q.question] = q.multiSelect ? labels.join(MULTI_JOIN) : labels[0];
 
-      // Capture preview from a single non-other selection for annotations
-      if (!usedOther && !q.multiSelect && s.selected.length === 1) {
+      // A single chosen option with a preview travels as an annotation, so
+      // the agent sees what the user saw.
+      if (!q.multiSelect && s.selected.length === 1 && s.selected[0] !== OTHER_LABEL) {
         const picked = q.options.find((o) => o.label === s.selected[0]);
-        if (picked?.preview) {
-          annotations[q.question] = { preview: picked.preview };
-        }
+        if (picked?.preview) annotations[q.question] = { preview: picked.preview };
       }
     }
+    if (reopened) {
+      // The request is gone server-side; the answer is a message now — and
+      // the card closes again, or Submit would send it twice.
+      onReask?.(reaskMessage(questions, answers));
+      setReopened(false);
+      return;
+    }
     onSubmit(
       requestId,
       answers,
@@ -200,252 +262,126 @@ export function AskUserCard({
     );
   }
 
-  function handleCancel() {
-    onCancel(requestId);
+  /**
+   * The kit's Other field submitted. With one question that IS the answer;
+   * with several, the text is held for that question and the last card's
+   * Submit sends everything together.
+   */
+  function takeOther(qi: number, text: string) {
+    const trimmed = text.trim();
+    if (!trimmed || isLocked) return;
+    if (questions.length === 1) {
+      submit({ qi, text: trimmed });
+      return;
+    }
+    setState((prev) =>
+      prev.map((s, i) => (i === qi ? { ...s, otherOpen: false, otherText: trimmed } : s))
+    );
   }
 
   return (
-    <div className="rounded-xl border border-accent/30 bg-surface px-4 py-4 shadow-[0_0_0_1px_rgba(91,181,162,0.08)]">
-      <div className="mb-3 flex items-center gap-2 text-xs uppercase tracking-wider text-accent/80">
-        <MessageCircleQuestion className="h-3.5 w-3.5" />
-        <span className="font-[family-name:var(--font-mono)]">
-          {isLocked
-            ? cancelled
-              ? "Dismissed"
-              : "You answered"
-            : `${uiConfig.assistantName} needs your input`}
-        </span>
-        {isLocked && (
-          <button
-            type="button"
-            onClick={() => setCollapsed(true)}
-            className="ml-auto flex items-center gap-1 text-[11px] normal-case tracking-normal text-muted-foreground/50 transition-colors hover:text-muted-foreground"
-          >
-            <ChevronUp className="h-3 w-3" />
-            Collapse
-          </button>
-        )}
-      </div>
+    <div className="space-y-3">
+      {questions.map((q, qi) => {
+        const isLast = qi === questions.length - 1;
+        const id = `${requestId}-${qi}`;
+
+        if (answered) {
+          const answers = recordedAnswers(q, answered);
+          return (
+            <KitAskUserCard
+              key={id}
+              id={id}
+              state={typed ? "typed" : "answered"}
+              multi={q.multiSelect}
+              tag={q.header}
+              question={q.question}
+              options={[]}
+              showActions={false}
+              // The kit prints the answers as given; a typed one is a quote.
+              answers={typed ? [quoted(recordedAnswer(q, answered))] : answers}
+              answerMeta={typed ? TYPED_META : answeredMeta(answeredAt, answers.length)}
+            />
+          );
+        }
+
+        if (dismissed) {
+          return (
+            <KitAskUserCard
+              key={id}
+              id={id}
+              state="dismissed"
+              multi={q.multiSelect}
+              tag={q.header}
+              question={q.question}
+              options={[]}
+              showActions={false}
+              lapsedNote={DISMISSED_NOTE}
+              // One "Ask again" per exchange, on the last card, like Submit.
+              onAskAgain={onReask && isLast ? () => setReopened(true) : undefined}
+            />
+          );
+        }
+
+        const s = state[qi];
+        const preview = previewFor(q, s);
 
-      <div className="space-y-5">
-        {questions.map((q, qi) => (
-          <QuestionBlock
-            key={qi}
-            question={q}
-            state={filledState[qi]}
-            locked={isLocked}
-            onToggleOption={(label) => toggleOption(qi, label)}
-            onFocus={(idx) => setFocus(qi, idx)}
-            onOtherChange={(t) => setOtherText(qi, t)}
-          />
-        ))}
-      </div>
+        const options: KitAskUserOption[] = [
+          ...q.options.map((o) => ({
+            title: o.label,
+            subtitle: o.description,
+            selected: s.selected.includes(o.label),
+            onClick: () => pick(qi, o.label),
+            onFocus: () => focus(qi, o.label),
+          })),
+          {
+            title: OTHER_LABEL,
+            subtitle: s.otherText || "Provide a custom answer.",
+            italic: !s.otherText,
+            dim: !s.otherText,
+            selected: s.selected.includes(OTHER_LABEL),
+            onClick: () => pick(qi, OTHER_LABEL),
+            onFocus: () => focus(qi, null),
+          },
+        ];
 
-      {!isLocked && (
-        <div className="mt-4 flex items-center justify-end gap-2">
-          <button
-            type="button"
-            onClick={handleCancel}
-            className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-surface-raised hover:text-foreground"
-          >
-            <X className="h-3.5 w-3.5" />
-            Dismiss
-          </button>
-          <button
-            type="button"
-            onClick={handleSubmit}
-            disabled={!canSubmit}
-            className={cn(
-              "flex items-center gap-1.5 rounded-lg px-4 py-1.5 text-xs font-medium transition-all",
-              canSubmit
-                ? "bg-accent text-accent-foreground hover:brightness-110"
-                : "bg-surface-raised text-muted-foreground/40 cursor-not-allowed"
-            )}
-          >
-            <Check className="h-3.5 w-3.5" />
-            Submit
-          </button>
-        </div>
-      )}
+        return (
+          <div key={id} className="space-y-2">
+            <KitAskUserCard
+              id={id}
+              state="pending"
+              multi={q.multiSelect}
+              prompt={prompt}
+              tag={q.header}
+              question={q.question}
+              options={options}
+              otherOpen={s.otherOpen}
+              otherPlaceholder="Type your answer…"
+              onOtherSubmit={(text) => takeOther(qi, text)}
+              showActions={isLast}
+              // The kit's action row cannot be disabled from here; an
+              // incomplete Submit is a no-op rather than a partial answer.
+              onPrimary={() => (complete ? submit() : undefined)}
+              // A reopened card's Dismiss closes it again locally: there is
+              // no server-side request left to cancel.
+              onSecondary={() => (reopened ? setReopened(false) : onCancel(requestId))}
+            />
+            {preview ? <PreviewPane content={preview} /> : null}
+          </div>
+        );
+      })}
     </div>
   );
 }
 
-/** One-line, expandable stand-in for an answered/dismissed question. */
-function AskUserSummaryRow({
-  questions,
-  answers,
-  cancelled,
-  onExpand,
-}: {
-  questions: AskUserQuestion[];
-  answers: Record<string, string> | null;
-  cancelled: boolean;
-  onExpand: () => void;
-}) {
-  const detail = cancelled
-    ? "Dismissed"
-    : questions
-        .map((q) => {
-          const a = answers?.[q.question];
-          return a ? `${q.header}: ${a}` : q.header;
-        })
-        .join(" · ");
-  return (
-    <button
-      type="button"
-      onClick={onExpand}
-      className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-xs text-muted-foreground/70 transition-colors hover:text-foreground"
-    >
-      <MessageCircleQuestion className="h-3.5 w-3.5 shrink-0 text-accent/70" />
-      <span className="min-w-0 truncate font-[family-name:var(--font-mono)]">
-        {!cancelled && <span className="text-accent/70">Answered · </span>}
-        {detail}
-      </span>
-      <ChevronRight className="h-3 w-3 shrink-0" />
-    </button>
-  );
+function toggled(list: string[], label: string): string[] {
+  return list.includes(label) ? list.filter((l) => l !== label) : [...list, label];
 }
 
-function QuestionBlock({
-  question,
-  state,
-  locked,
-  onToggleOption,
-  onFocus,
-  onOtherChange,
-}: {
-  question: AskUserQuestion;
-  state: PerQuestionState;
-  locked: boolean;
-  onToggleOption: (label: string) => void;
-  onFocus: (idx: number | null) => void;
-  onOtherChange: (text: string) => void;
-}) {
-  const optionsWithOther: Array<AskUserOption & { isOther?: boolean }> = [
-    ...question.options,
-    { label: OTHER_LABEL, description: "Provide a custom answer.", isOther: true },
-  ];
-
-  const focusedOption =
-    state.focusedIndex !== null ? optionsWithOther[state.focusedIndex] : null;
-  const previewToShow =
-    focusedOption?.preview ??
-    (state.selected.length === 1 && !state.selected.includes(OTHER_LABEL)
-      ? question.options.find((o) => o.label === state.selected[0])?.preview
-      : undefined);
-
+/** The focused (else chosen) option's preview, under the question it belongs to. */
+function PreviewPane({ content }: { content: string }) {
   return (
-    <div>
-      <div className="mb-2 flex items-center gap-2">
-        <span className="rounded-md border border-accent/30 bg-accent/10 px-2 py-0.5 font-[family-name:var(--font-mono)] text-[10px] uppercase tracking-wider text-accent">
-          {question.header}
-        </span>
-        {question.multiSelect && (
-          <span className="text-[10px] uppercase tracking-wider text-muted-foreground/60">
-            multi-select
-          </span>
-        )}
-      </div>
-      <div className="mb-3 text-sm leading-relaxed text-foreground">
-        {question.question}
-      </div>
-
-      <div className="grid gap-2 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
-        <ul className="space-y-1.5">
-          {optionsWithOther.map((opt, idx) => {
-            const selected = state.selected.includes(opt.label);
-            return (
-              <li key={opt.label}>
-                <button
-                  type="button"
-                  onClick={() => onToggleOption(opt.label)}
-                  onMouseEnter={() => onFocus(idx)}
-                  onFocus={() => onFocus(idx)}
-                  disabled={locked}
-                  className={cn(
-                    "group flex w-full items-start gap-2 rounded-lg border px-3 py-2 text-left transition-colors",
-                    selected
-                      ? "border-accent/60 bg-accent/10"
-                      : "border-border bg-background hover:bg-surface-raised",
-                    locked && "cursor-default opacity-90"
-                  )}
-                >
-                  <span
-                    className={cn(
-                      "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded border",
-                      question.multiSelect ? "rounded-sm" : "rounded-full",
-                      selected
-                        ? "border-accent bg-accent text-accent-foreground"
-                        : "border-border bg-background"
-                    )}
-                  >
-                    {selected && <Check className="h-3 w-3" />}
-                  </span>
-                  <span className="min-w-0 flex-1">
-                    <span
-                      className={cn(
-                        "block text-sm font-medium",
-                        opt.isOther
-                          ? "italic text-muted-foreground group-hover:text-foreground"
-                          : "text-foreground"
-                      )}
-                    >
-                      {opt.label}
-                    </span>
-                    {opt.description && (
-                      <span className="block text-xs leading-snug text-muted-foreground">
-                        {opt.description}
-                      </span>
-                    )}
-                  </span>
-                </button>
-                {opt.isOther && state.selected.includes(OTHER_LABEL) && (
-                  <textarea
-                    value={state.otherText}
-                    onChange={(e) => onOtherChange(e.target.value)}
-                    disabled={locked}
-                    placeholder="Type your answer..."
-                    rows={2}
-                    className="mt-1.5 w-full resize-none rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/40 focus:border-accent/60 focus:outline-none"
-                  />
-                )}
-              </li>
-            );
-          })}
-        </ul>
-
-        {previewToShow && (
-          <div className="hidden min-w-0 md:block">
-            <div className="rounded-lg border border-border bg-background p-3">
-              <div className="mb-1 text-[10px] uppercase tracking-wider text-muted-foreground/60 font-[family-name:var(--font-mono)]">
-                Preview
-              </div>
-              <BrainMarkdown
-                content={previewToShow}
-                className="brain-prose text-xs"
-              />
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Mobile preview drops below the options when a preview exists */}
-      {previewToShow && (
-        <div className="mt-2 md:hidden">
-          <details className="rounded-lg border border-border bg-background">
-            <summary className="cursor-pointer px-3 py-2 text-[11px] uppercase tracking-wider text-muted-foreground">
-              Preview
-            </summary>
-            <div className="border-t border-border px-3 py-2">
-              <BrainMarkdown
-                content={previewToShow}
-                className="brain-prose text-xs"
-              />
-            </div>
-          </details>
-        </div>
-      )}
-    </div>
+    <Surface label="Preview" labelIcon="file" pad={10}>
+      <BrainMarkdown content={content} className="brain-prose text-xs" />
+    </Surface>
   );
 }