diff --git a/viewer/src/client/components/chat/ChatCodeBlock.jsx b/viewer/src/client/components/chat/ChatCodeBlock.jsx
index ee5d266..34639cf 100644
--- a/viewer/src/client/components/chat/ChatCodeBlock.jsx
+++ b/viewer/src/client/components/chat/ChatCodeBlock.jsx
@@ -68,6 +68,7 @@ export default function ChatCodeBlock({
   lang,
   label,
   copyLabel = "Copy code",
+  showCopy = true,
   className = "",
   maxHeightClassName = "max-h-72",
 }) {
@@ -137,14 +138,16 @@ export default function ChatCodeBlock({
           color: #d4d4d8;
         }
       `}</style>
-      <div className="flex h-9 items-center justify-between border-b border-white/5 px-3 text-xs text-zinc-300">
-        <span className="truncate font-medium">{displayLabel}</span>
-        <ChatCopyButton
-          value={raw}
-          label={copyLabel}
-          className="size-6 text-zinc-300 opacity-80 hover:bg-white/10 hover:text-white"
-        />
-      </div>
+      {showCopy ? (
+        <div className="flex h-9 items-center justify-between border-b border-white/5 px-3 text-xs text-zinc-300">
+          <span className="truncate font-medium">{displayLabel}</span>
+          <ChatCopyButton
+            value={raw}
+            label={copyLabel}
+            className="size-6 text-zinc-300 opacity-80 hover:bg-white/10 hover:text-white"
+          />
+        </div>
+      ) : null}
       <pre className={`${maxHeightClassName} overflow-auto px-3 py-2.5 text-[12px] leading-relaxed`}>
         <code
           className="font-mono text-[#f4f4f5]"
diff --git a/viewer/src/client/components/chat/ChatTurn.jsx b/viewer/src/client/components/chat/ChatTurn.jsx
index 69db6eb..f12fbe9 100644
--- a/viewer/src/client/components/chat/ChatTurn.jsx
+++ b/viewer/src/client/components/chat/ChatTurn.jsx
@@ -85,6 +85,12 @@ function turnCopyText(turn) {
     .join("\n\n");
 }
 
+function turnShowsCopyButton(turn) {
+  return (turn.blocks || []).some((block) =>
+    block.kind === "text" || block.kind === "thinking" || block.kind === "plan",
+  );
+}
+
 function StatusLine({ turn }) {
   if (turn.role !== "assistant") return null;
   // "running" is conveyed by the live pulse inside PhaseBadge — no separate
@@ -103,6 +109,7 @@ export default function ChatTurn({ turn, onOpenArtifact }) {
     turn.status === "complete" &&
     turn.blocks.some((block) => block.kind === "artifact");
   const copyText = turnCopyText(turn);
+  const showCopyButton = turnShowsCopyButton(turn);
   return (
     <article
       data-slot="chat-turn"
@@ -202,7 +209,7 @@ export default function ChatTurn({ turn, onOpenArtifact }) {
         ) : null}
         </div>
       </div>
-      {!isUser ? (
+      {!isUser && showCopyButton ? (
         <ChatCopyButton
           value={copyText}
           className="absolute bottom-1 right-1 z-10 opacity-0 group-hover/turn:opacity-100 group-focus-within/turn:opacity-100"
diff --git a/viewer/src/client/components/chat/Markdown.jsx b/viewer/src/client/components/chat/Markdown.jsx
index 82b6597..72ba1c8 100644
--- a/viewer/src/client/components/chat/Markdown.jsx
+++ b/viewer/src/client/components/chat/Markdown.jsx
@@ -3,44 +3,89 @@ import remarkGfm from "remark-gfm";
 import { cn } from "@/ui/utils";
 import ChatCodeBlock from "./ChatCodeBlock";
 import QuestionCard from "./QuestionCard";
+import remarkCallouts from "./remarkCallouts";
+import "./prose.css";
+
+const REMARK_PLUGINS = [remarkGfm, remarkCallouts];
 
 function flattenText(children) {
   return Array.isArray(children) ? children.join("") : String(children || "");
 }
 
-// Tailwind v4 preflight resets headings/lists, so we style each element
-// explicitly to match the chat type scale. Kept small and dependency-light
-// (no typography plugin).
+function CalloutIcon({ kind }) {
+  const warn = kind === "warning" || kind === "caution";
+  return (
+    <svg
+      className="prose-callout-icon"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      {warn ? (
+        <>
+          <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z" />
+          <line x1="12" y1="9" x2="12" y2="13" />
+          <line x1="12" y1="17" x2="12.01" y2="17" />
+        </>
+      ) : (
+        <>
+          <circle cx="12" cy="12" r="10" />
+          <line x1="12" y1="16" x2="12" y2="12" />
+          <line x1="12" y1="8" x2="12.01" y2="8" />
+        </>
+      )}
+    </svg>
+  );
+}
+
+function Callout({ kind, children }) {
+  return (
+    <div className="prose-callout" data-callout={kind}>
+      <CalloutIcon kind={kind} />
+      <div className="prose-callout-body">{children}</div>
+    </div>
+  );
+}
+
+// Tailwind v4 preflight resets headings/lists; the structural typography
+// (headings, lists, markers, counters, checkboxes, callouts) lives in
+// prose.css as one `.chat-prose` system. The component map below only covers
+// behavioral overrides: link attrs, callout swap-in, inline code / fenced
+// blocks, and the chat table.
 const COMPONENTS = {
-  h1: ({ children }) => <h1 className="mt-1 mb-1 text-sm font-semibold text-foreground">{children}</h1>,
-  h2: ({ children }) => <h2 className="mt-1 mb-1 text-sm font-semibold text-foreground">{children}</h2>,
-  h3: ({ children }) => <h3 className="mt-1 mb-0.5 text-xs font-semibold uppercase tracking-wide text-foreground/80">{children}</h3>,
-  p: ({ children }) => <p className="my-1 leading-relaxed">{children}</p>,
-  ul: ({ children }) => <ul className="my-1 list-disc pl-4">{children}</ul>,
-  ol: ({ children }) => <ol className="my-1 list-decimal pl-4">{children}</ol>,
-  li: ({ children }) => <li className="my-0.5">{children}</li>,
-  strong: ({ children }) => <strong className="font-semibold text-foreground">{children}</strong>,
-  em: ({ children }) => <em className="italic">{children}</em>,
   a: ({ href, children }) => (
-    <a href={href} target="_blank" rel="noreferrer" className="text-primary underline underline-offset-2">
+    <a href={href} target="_blank" rel="noreferrer">
       {children}
     </a>
   ),
+  blockquote: ({ node, children }) => {
+    // remark-rehype keeps hProperties keys verbatim, so the alert tag arrives
+    // as the literal `data-callout` property (not camel-cased).
+    const kind = node?.properties?.["data-callout"];
+    if (kind) return <Callout kind={String(kind)}>{children}</Callout>;
+    return <blockquote>{children}</blockquote>;
+  },
   table: ({ children }) => (
     <div
       data-slot="chat-markdown-table"
-      className="scrollbar-thin my-2 overflow-x-auto rounded-md border border-border/50"
+      className="scrollbar-thin my-[0.85rem] overflow-x-auto rounded-lg border border-border/60 last:!mb-[0.85rem]"
     >
-      <table className="w-full min-w-max border-collapse text-left text-[13px]">{children}</table>
+      <table className="w-full min-w-max border-collapse text-left text-[13px] [&_tbody_td:first-child]:font-semibold [&_tbody_td:first-child]:text-foreground">
+        {children}
+      </table>
     </div>
   ),
-  thead: ({ children }) => <thead className="border-b border-border/60 bg-muted/40">{children}</thead>,
-  tbody: ({ children }) => <tbody className="divide-y divide-border/40">{children}</tbody>,
+  thead: ({ children }) => <thead className="border-b border-border/60">{children}</thead>,
+  tbody: ({ children }) => <tbody>{children}</tbody>,
   tr: ({ children }) => <tr>{children}</tr>,
   th: ({ children, align }) => (
     <th
       className={cn(
-        "px-2.5 py-1.5 font-semibold text-foreground",
+        "px-4 py-2.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground",
         align === "center" && "text-center",
         align === "right" && "text-right",
       )}
@@ -51,7 +96,7 @@ const COMPONENTS = {
   td: ({ children, align }) => (
     <td
       className={cn(
-        "px-2.5 py-1.5 align-top",
+        "px-4 py-3 align-top text-muted-foreground",
         align === "center" && "text-center",
         align === "right" && "text-right",
       )}
@@ -91,8 +136,8 @@ const COMPONENTS = {
  */
 export default function Markdown({ source, className }) {
   return (
-    <div data-slot="chat-markdown" className={cn("text-sm text-foreground/90", className)}>
-      <ReactMarkdown remarkPlugins={[remarkGfm]} components={COMPONENTS}>
+    <div data-slot="chat-markdown" className={cn("chat-prose text-sm text-foreground/90", className)}>
+      <ReactMarkdown remarkPlugins={REMARK_PLUGINS} components={COMPONENTS}>
         {String(source || "")}
       </ReactMarkdown>
     </div>
diff --git a/viewer/src/client/components/chat/PlanBlock.jsx b/viewer/src/client/components/chat/PlanBlock.jsx
index e6ea370..006a326 100644
--- a/viewer/src/client/components/chat/PlanBlock.jsx
+++ b/viewer/src/client/components/chat/PlanBlock.jsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { ClipboardList, Pencil, MessageSquare } from "lucide-react";
+import { ClipboardList, Check } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/ui/utils";
@@ -12,6 +12,21 @@ const STATUS_PILL = {
   superseded: { label: "Superseded", cls: "border-white/10 bg-white/5 text-zinc-400" },
 };
 
+// Plan-body markdown styling. The plan content drives the layout: `###`
+// headings become the small uppercase section labels ("What I'll make",
+// "Build steps"), inline `code` becomes the dimension chips, and the ordered
+// list is rendered as numbered badge steps via CSS counters.
+const PLAN_MD = cn(
+  "text-[13.5px] leading-relaxed text-zinc-300",
+  "[&_strong]:font-semibold [&_strong]:text-white",
+  "[&_h3]:mt-5 [&_h3]:mb-2.5 [&_h3]:text-[11px] [&_h3]:font-semibold [&_h3]:uppercase [&_h3]:tracking-[0.09em] [&_h3]:text-zinc-500 [&_h3:first-child]:mt-0",
+  "[&_p]:my-0 [&_p]:text-[13.5px] [&_p]:leading-relaxed [&_p]:text-zinc-300",
+  "[&_code]:rounded-md [&_code]:bg-white/[0.04] [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[12px] [&_code]:text-zinc-300",
+  "[&_ol]:mt-2.5 [&_ol]:mb-0 [&_ol]:flex [&_ol]:list-none [&_ol]:flex-col [&_ol]:gap-2.5 [&_ol]:pl-0 [&_ol]:[counter-reset:step]",
+  "[&_ol>li]:m-0 [&_ol>li]:flex [&_ol>li]:items-start [&_ol>li]:gap-3 [&_ol>li]:[counter-increment:step]",
+  "[&_ol>li]:before:[content:counter(step)] [&_ol>li]:before:mt-px [&_ol>li]:before:flex [&_ol>li]:before:size-5 [&_ol>li]:before:shrink-0 [&_ol>li]:before:items-center [&_ol>li]:before:justify-center [&_ol>li]:before:rounded-md [&_ol>li]:before:bg-white/[0.04] [&_ol>li]:before:text-[11px] [&_ol>li]:before:font-semibold [&_ol>li]:before:leading-none [&_ol>li]:before:text-zinc-400",
+);
+
 /**
  * Inline plan-review card. Renders the proposed plan as markdown with
  * edit / approve / request-changes controls. Modeled on PreflightModal's
@@ -45,90 +60,76 @@ export default function PlanBlock({ plan, status }) {
       data-slot="chat-plan"
       data-status={status}
       className={cn(
-        "rounded-xl border border-border/70 bg-[#202124] p-3 text-sm text-zinc-100 shadow-(--ui-shadow-soft)",
-        !isProposed && "bg-card/70",
+        "overflow-hidden rounded-2xl border border-white/[0.08] bg-[#16181c] text-sm text-zinc-100",
+        "bg-[linear-gradient(to_bottom,rgba(52,211,153,0.1)_0,rgba(52,211,153,0.1)_46px,rgba(52,211,153,0)_64px)]",
         status === "superseded" && "opacity-60",
       )}
     >
-      <header className="mb-3 flex items-center gap-2 border-b border-white/10 pb-2.5">
-        <span
-          className={cn(
-            "flex size-6 shrink-0 items-center justify-center rounded-full border",
-            isProposed
-              ? "border-white/10 bg-white/5 text-zinc-300"
-              : "border-white/10 bg-white/5 text-zinc-400",
-          )}
-        >
-          <ClipboardList className="size-3.5" aria-hidden />
-        </span>
-        <span className="text-sm font-semibold text-zinc-100">Here&apos;s my plan</span>
-        <span className={cn("ml-auto rounded-full border px-2 py-0.5 text-[10px] font-semibold", pill.cls)}>
+      <header className="flex items-center gap-2.5 px-3.5 py-3.5">
+        <ClipboardList className="size-[18px] shrink-0 text-emerald-400" aria-hidden />
+        <span className="text-[15px] font-semibold text-white">Here&apos;s my plan</span>
+        <span className={cn("ml-auto rounded-full border px-2.5 py-1 text-[11px] font-semibold", pill.cls)}>
           {pill.label}
         </span>
       </header>
 
-      {editing ? (
-        <Textarea
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          rows={Math.min(20, Math.max(6, draft.split("\n").length + 1))}
-          className="scrollbar-thin border-white/10 bg-black/20 text-sm text-zinc-100"
-          data-slot="chat-plan-editor"
-        />
-      ) : (
-        <Markdown
-          source={editing ? draft : plan}
-          className="text-[13px] font-medium leading-relaxed text-zinc-100 [&_code]:bg-white/8 [&_code]:text-zinc-100 [&_li]:my-1.5 [&_p]:my-1.5 [&_strong]:text-zinc-50"
-        />
-      )}
+      <div className="px-3.5 py-3.5">
+        {editing ? (
+          <Textarea
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            rows={Math.min(20, Math.max(6, draft.split("\n").length + 1))}
+            className="scrollbar-thin border-white/10 bg-black/20 text-sm text-zinc-100"
+            data-slot="chat-plan-editor"
+          />
+        ) : (
+          <Markdown source={editing ? draft : plan} className={PLAN_MD} />
+        )}
+      </div>
 
       {isProposed ? (
-        <>
-          {feedbackOpen ? (
-            <div className="mt-3 flex flex-col gap-2">
-              <Textarea
-                value={feedback}
-                onChange={(e) => setFeedback(e.target.value)}
-                placeholder="What should change? e.g. add 4 screw bosses, make it 5 mm taller…"
-                rows={2}
-                className="scrollbar-thin border-white/10 bg-black/20 text-sm text-zinc-100 placeholder:text-zinc-500"
-                data-slot="chat-plan-feedback"
-              />
-              <div className="flex justify-end gap-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setFeedbackOpen(false)}
-                  disabled={busy}
-                  className="border-white/10 bg-white/5 text-zinc-200 hover:bg-white/10 hover:text-zinc-50"
-                >
-                  Cancel
-                </Button>
-                <Button
-                  size="sm"
-                  onClick={handleSendFeedback}
-                  disabled={busy || !feedback.trim()}
-                  data-slot="chat-plan-feedback-send"
-                  className="bg-zinc-100 text-zinc-950 hover:bg-white"
-                >
-                  Send feedback
-                </Button>
-              </div>
+        feedbackOpen ? (
+          <div className="flex flex-col gap-2 border-t border-white/[0.06] px-5 py-3.5">
+            <Textarea
+              value={feedback}
+              onChange={(e) => setFeedback(e.target.value)}
+              placeholder="What should change? e.g. add 4 screw bosses, make it 5 mm taller…"
+              rows={2}
+              className="scrollbar-thin border-white/10 bg-black/20 text-sm text-zinc-100 placeholder:text-zinc-500"
+              data-slot="chat-plan-feedback"
+            />
+            <div className="flex justify-end gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setFeedbackOpen(false)}
+                disabled={busy}
+                className="h-9 rounded-lg border-white/10 bg-white/[0.02] px-4 text-zinc-200 hover:bg-white/[0.07] hover:text-zinc-50"
+              >
+                Cancel
+              </Button>
+              <Button
+                size="sm"
+                onClick={handleSendFeedback}
+                disabled={busy || !feedback.trim()}
+                data-slot="chat-plan-feedback-send"
+                className="h-9 rounded-lg bg-emerald-400 px-4 font-semibold text-emerald-950 hover:bg-emerald-300"
+              >
+                Send feedback
+              </Button>
             </div>
-          ) : (
-            <div className="mt-3 flex flex-wrap items-center gap-2">
-              <span className="mr-auto text-[11px] text-zinc-500">
-                Approve to build it, or ask for changes.
-              </span>
+          </div>
+        ) : (
+          <footer className="flex items-center justify-between gap-2 border-t border-white/[0.06] px-3.5 py-3.5">
+            <div className="flex items-center gap-2">
               <Button
                 variant="outline"
                 size="sm"
                 onClick={() => setEditing((v) => !v)}
                 disabled={busy}
                 data-slot="chat-plan-edit"
-                className="h-8 border-white/10 bg-white/5 px-3 text-zinc-200 hover:bg-white/10 hover:text-zinc-50"
+                className="h-9 rounded-lg border-white/10 bg-white/[0.02] px-4 text-zinc-200 hover:bg-white/[0.07] hover:text-zinc-50"
               >
-                <Pencil className="size-3.5" aria-hidden />
                 {editing ? "Done editing" : "Edit"}
               </Button>
               <Button
@@ -137,23 +138,23 @@ export default function PlanBlock({ plan, status }) {
                 onClick={() => setFeedbackOpen(true)}
                 disabled={busy}
                 data-slot="chat-plan-request-changes"
-                className="h-8 border-white/10 bg-white/5 px-3 text-zinc-200 hover:bg-white/10 hover:text-zinc-50"
+                className="h-9 rounded-lg border-white/10 bg-white/[0.02] px-4 text-zinc-200 hover:bg-white/[0.07] hover:text-zinc-50"
               >
-                <MessageSquare className="size-3.5" aria-hidden />
                 Request changes
               </Button>
-              <Button
-                size="sm"
-                onClick={handleApprove}
-                disabled={busy}
-                data-slot="chat-plan-approve"
-                className="h-8 bg-zinc-100 px-3 text-zinc-950 hover:bg-white"
-              >
-                {busy ? "Building…" : "Approve & build"}
-              </Button>
             </div>
-          )}
-        </>
+            <Button
+              size="sm"
+              onClick={handleApprove}
+              disabled={busy}
+              data-slot="chat-plan-approve"
+              className="h-9 rounded-lg bg-emerald-400 px-4 font-semibold text-emerald-950 hover:bg-emerald-300"
+            >
+              <Check className="size-4" aria-hidden />
+              {busy ? "Building…" : "Approve & build"}
+            </Button>
+          </footer>
+        )
       ) : null}
     </div>
   );
diff --git a/viewer/src/client/components/chat/QuestionCard.jsx b/viewer/src/client/components/chat/QuestionCard.jsx
index e292c93..cf61235 100644
--- a/viewer/src/client/components/chat/QuestionCard.jsx
+++ b/viewer/src/client/components/chat/QuestionCard.jsx
@@ -57,15 +57,15 @@ export default function QuestionCard({ questions }) {
   return (
     <div
       data-slot="chat-questions"
-      className="rounded-xl border border-border/70 bg-[#18191d] p-3.5 text-sm shadow-(--ui-shadow-soft)"
+      className="rounded-2xl border border-white/8 bg-[#16181c] p-3 text-sm shadow-(--ui-shadow-soft)"
     >
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-3.5">
         {list.map((q, qi) => {
           const multi = !!q.multiSelect;
           const picks = selected[qi] || [];
           return (
-            <div key={qi} data-slot="chat-question" className="flex flex-col gap-2">
-              <p className="text-[13px] font-semibold leading-tight text-zinc-100">{q.question}</p>
+            <div key={qi} data-slot="chat-question" className="flex flex-col gap-2.5">
+              <p className="text-sm font-semibold leading-tight text-zinc-100">{q.question}</p>
               <div className="flex flex-wrap gap-2">
                 {(q.options || []).map((opt) => {
                   const active = picks.includes(opt.label);
@@ -79,10 +79,10 @@ export default function QuestionCard({ questions }) {
                       data-slot="chat-question-option"
                       data-active={active ? "true" : "false"}
                       className={cn(
-                        "inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors",
+                        "inline-flex items-center rounded-full border px-3 py-2 text-[13px] font-medium transition-colors",
                         active
-                          ? "border-zinc-300/60 bg-white/12 text-zinc-100 ring-1 ring-white/25"
-                          : "border-white/10 bg-white/4 text-zinc-400 hover:border-white/20 hover:bg-white/[0.07] hover:text-zinc-200",
+                          ? "border-[#34d399]/55 bg-[#34d399]/20 text-white"
+                          : "border-white/8 bg-white/[0.05] text-zinc-400 hover:border-white/15 hover:bg-white/[0.08] hover:text-zinc-200",
                         submitted && !active && "opacity-55",
                       )}
                     >
@@ -95,7 +95,7 @@ export default function QuestionCard({ questions }) {
           );
         })}
       </div>
-      <div className="mt-5 flex justify-end">
+      <div className="mt-4 flex justify-end">
         <Button
           type="button"
           size="sm"
@@ -104,10 +104,11 @@ export default function QuestionCard({ questions }) {
           data-slot="chat-questions-send"
           // Fixed width so the label swap can't reflow the button (the swap
           // used to leave a "Send a…"/"Sent" ghost). Sent reads as a quiet,
-          // deliberate confirmation rather than a half-disabled button.
+          // deliberate green confirmation rather than a half-disabled button.
           className={cn(
-            "min-w-20 rounded-lg bg-zinc-200 px-4 text-zinc-950 hover:bg-zinc-100 disabled:bg-zinc-500 disabled:text-zinc-950 disabled:opacity-100",
-            submitted && "bg-white/10 text-zinc-100 hover:bg-white/10",
+            "min-w-20 rounded-lg bg-[#10b981] px-4 font-medium text-white hover:bg-[#34d399] disabled:bg-zinc-700 disabled:text-zinc-400 disabled:opacity-100",
+            submitted &&
+              "bg-[#34d399]/20 text-[#34d399] ring-1 ring-[#34d399]/30 hover:bg-[#34d399]/20 disabled:bg-[#34d399]/20 disabled:text-[#34d399]",
           )}
         >
           {submitted ? (
diff --git a/viewer/src/client/components/chat/ToolUseBlock.jsx b/viewer/src/client/components/chat/ToolUseBlock.jsx
index e453728..1f90eb0 100644
--- a/viewer/src/client/components/chat/ToolUseBlock.jsx
+++ b/viewer/src/client/components/chat/ToolUseBlock.jsx
@@ -86,7 +86,7 @@ export default function ToolUseBlock({ tool, label, input, status }) {
         <ChatCodeBlock
           code={detail}
           lang="json"
-          copyLabel="Copy input"
+          showCopy={false}
           className="mt-2"
           maxHeightClassName="max-h-48"
         />
diff --git a/viewer/src/client/components/chat/__tests__/chatReducer.test.js b/viewer/src/client/components/chat/__tests__/chatReducer.test.js
index aa9533d..c933635 100644
--- a/viewer/src/client/components/chat/__tests__/chatReducer.test.js
+++ b/viewer/src/client/components/chat/__tests__/chatReducer.test.js
@@ -301,10 +301,13 @@ test("cancel/error sweeps running tools to 'cancelled' but keeps real tool error
     // A tool still running when the turn is cancelled.
     { kind: "tool_use_start", turnId: "t-7", tool: "Edit", toolUseId: "tu_b", input: {} },
     { kind: "error", turnId: "t-7", message: "cancelled" },
+    { kind: "turn_end", turnId: "t-7" },
   ];
   const state = applyEvents(INITIAL_CHAT_STATE, events);
   const turn = state.history[0];
-  assert.equal(turn.status, "error");
+  assert.equal(turn.status, "cancelled");
+  assert.equal(state.lastError, "");
+  assert.ok(!turn.blocks.some((b) => b.kind === "error"));
   const tools = turn.blocks.filter((b) => b.kind === "tool_use");
   assert.equal(tools.find((b) => b.toolUseId === "tu_a").status, "error");
   assert.equal(tools.find((b) => b.toolUseId === "tu_b").status, "cancelled");
diff --git a/viewer/src/client/components/chat/prose.css b/viewer/src/client/components/chat/prose.css
new file mode 100644
index 0000000..11c43a6
--- /dev/null
+++ b/viewer/src/client/components/chat/prose.css
@@ -0,0 +1,279 @@
+/*
+ * Long-form chat answer typography. Everything an assistant reply can contain,
+ * styled as one cohesive `.chat-prose` system on top of the design tokens.
+ * Tailwind preflight resets headings/lists, so each element is restated here.
+ */
+
+.chat-prose {
+  --prose-marker: color-mix(in srgb, currentColor 55%, transparent);
+  --prose-check: #2cad7e; /* filled-accent "done" state */
+  font-size: 0.8125rem;
+  line-height: 1.65;
+}
+
+.chat-prose > :first-child {
+  margin-top: 0;
+}
+.chat-prose > :last-child {
+  margin-bottom: 0;
+}
+
+/* ---- Paragraphs / inline ------------------------------------------------ */
+.chat-prose p {
+  margin: 0.6rem 0;
+  color: var(--foreground);
+  opacity: 0.88;
+}
+
+.chat-prose strong {
+  font-weight: 600;
+  color: var(--foreground);
+  opacity: 1;
+}
+.chat-prose em {
+  font-style: italic;
+}
+
+.chat-prose a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-color: color-mix(in srgb, var(--primary) 45%, transparent);
+}
+.chat-prose a:hover {
+  text-decoration-color: var(--primary);
+}
+
+/* <kbd> rendered from inline code that looks like a key/spec chip */
+.chat-prose kbd {
+  font-family: var(--font-sans);
+  font-size: 0.72rem;
+  padding: 0.05rem 0.35rem;
+  border-radius: 0.35rem;
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  background: color-mix(in srgb, var(--muted) 50%, transparent);
+  color: var(--foreground);
+}
+
+/* ---- Headings: section / sub-section / label --------------------------- */
+.chat-prose h1 {
+  margin: 1.15rem 0 0.6rem;
+  padding-bottom: 0.35rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1.35;
+  color: var(--foreground);
+}
+.chat-prose h2 {
+  margin: 1.05rem 0 0.45rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  line-height: 1.35;
+  color: var(--foreground);
+}
+.chat-prose h3 {
+  margin: 0.95rem 0 0.45rem;
+  font-size: 0.68rem;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted-foreground);
+}
+
+/* ---- Blockquote -------------------------------------------------------- */
+.chat-prose blockquote {
+  margin: 0.7rem 0;
+  padding: 0.1rem 0 0.1rem 0.85rem;
+  border-left: 2px solid color-mix(in srgb, var(--border) 140%, transparent);
+  color: var(--foreground);
+  opacity: 0.72;
+}
+.chat-prose blockquote p {
+  margin: 0.25rem 0;
+  opacity: 1;
+}
+
+/* ---- Divider ----------------------------------------------------------- */
+.chat-prose hr {
+  margin: 1.2rem 0;
+  border: 0;
+  border-top: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
+}
+
+/* ---- Bullet lists: nesting-aware markers ------------------------------- */
+.chat-prose ul:not(.contains-task-list) {
+  list-style: none;
+  margin: 0.55rem 0;
+  padding-left: 1.3rem;
+}
+.chat-prose ul:not(.contains-task-list) > li {
+  position: relative;
+  margin: 0.28rem 0;
+  color: var(--foreground);
+  opacity: 0.88;
+}
+/* level 1 — filled dot */
+.chat-prose ul:not(.contains-task-list) > li::before {
+  content: "";
+  position: absolute;
+  left: -0.98rem;
+  top: 0.62em;
+  width: 5px;
+  height: 5px;
+  border-radius: 9999px;
+  background: var(--prose-marker);
+}
+/* level 2 — hollow ring */
+.chat-prose ul:not(.contains-task-list) ul:not(.contains-task-list) > li::before {
+  background: transparent;
+  border: 1.25px solid var(--prose-marker);
+  width: 6px;
+  height: 6px;
+  top: 0.58em;
+}
+/* level 3 — dash */
+.chat-prose
+  ul:not(.contains-task-list)
+  ul:not(.contains-task-list)
+  ul:not(.contains-task-list)
+  > li::before {
+  background: var(--prose-marker);
+  border: 0;
+  border-radius: 1px;
+  width: 7px;
+  height: 1.5px;
+  top: 0.85em;
+}
+
+/* ---- Numbered lists: rounded number chips via counters ----------------- */
+.chat-prose ol {
+  list-style: none;
+  counter-reset: prose-ol;
+  margin: 0.55rem 0;
+  padding-left: 0;
+}
+.chat-prose ol > li {
+  counter-increment: prose-ol;
+  position: relative;
+  margin: 0.4rem 0;
+  padding-left: 2rem;
+  min-height: 1.4rem;
+  color: var(--foreground);
+  opacity: 0.88;
+}
+.chat-prose ol > li::before {
+  content: counter(prose-ol);
+  position: absolute;
+  left: 0;
+  top: 0.05em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.4rem;
+  height: 1.4rem;
+  border-radius: 0.4rem;
+  border: 1px solid var(--border);
+  background: color-mix(in srgb, var(--muted) 55%, transparent);
+  color: var(--muted-foreground);
+  font-size: 0.7rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  opacity: 1;
+}
+
+/* ---- Checklist: custom checkboxes -------------------------------------- */
+.chat-prose .contains-task-list {
+  list-style: none;
+  margin: 0.55rem 0;
+  padding-left: 0;
+}
+.chat-prose .contains-task-list .contains-task-list {
+  margin: 0.28rem 0 0.28rem 1.6rem;
+}
+.chat-prose .task-list-item {
+  position: relative;
+  margin: 0.28rem 0;
+  padding-left: 1.7rem;
+  color: var(--muted-foreground);
+}
+.chat-prose .task-list-item:has(input:checked) {
+  color: var(--foreground);
+}
+.chat-prose .task-list-item > input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  position: absolute;
+  left: 0;
+  top: 0.16em;
+  width: 1.05rem;
+  height: 1.05rem;
+  margin: 0;
+  border: 1.5px solid color-mix(in srgb, var(--border) 160%, transparent);
+  border-radius: 0.3rem;
+  background: transparent;
+  cursor: default;
+}
+.chat-prose .task-list-item > input[type="checkbox"]:checked {
+  background: var(--prose-check);
+  border-color: var(--prose-check);
+}
+/* drawn checkmark */
+.chat-prose .task-list-item > input[type="checkbox"]:checked::after {
+  content: "";
+  position: absolute;
+  left: 0.33rem;
+  top: 0.13rem;
+  width: 0.28rem;
+  height: 0.55rem;
+  border: solid #fff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+/* ---- Callout notes ----------------------------------------------------- */
+.chat-prose .prose-callout {
+  display: flex;
+  gap: 0.6rem;
+  align-items: flex-start;
+  margin: 0.9rem 0;
+  padding: 0.7rem 0.85rem;
+  border-radius: 0.6rem;
+  border: 1px solid var(--border);
+  background: color-mix(in srgb, var(--muted) 32%, transparent);
+  color: var(--muted-foreground);
+}
+.chat-prose .prose-callout .prose-callout-icon {
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+  margin-top: 0.12rem;
+  opacity: 0.9;
+}
+.chat-prose .prose-callout-body > :first-child {
+  margin-top: 0;
+}
+.chat-prose .prose-callout-body > :last-child {
+  margin-bottom: 0;
+}
+.chat-prose .prose-callout-body p {
+  opacity: 1;
+  color: inherit;
+}
+.chat-prose .prose-callout strong {
+  color: var(--foreground);
+}
+
+.chat-prose .prose-callout[data-callout="warning"],
+.chat-prose .prose-callout[data-callout="caution"] {
+  /* --ui-warning-bg is a saturated red; the design wants a muted amber-brown,
+     so derive it from the warning text token over the surface. */
+  border-color: color-mix(in srgb, var(--ui-warning-text) 24%, transparent);
+  background: color-mix(in srgb, var(--ui-warning-text) 18%, var(--background));
+  color: var(--ui-warning-text);
+}
+.chat-prose .prose-callout[data-callout="warning"] strong,
+.chat-prose .prose-callout[data-callout="caution"] strong {
+  color: var(--ui-warning-text);
+}
diff --git a/viewer/src/client/components/chat/remarkCallouts.js b/viewer/src/client/components/chat/remarkCallouts.js
new file mode 100644
index 0000000..0445d69
--- /dev/null
+++ b/viewer/src/client/components/chat/remarkCallouts.js
@@ -0,0 +1,55 @@
+// GitHub-style alert blockquotes -> callout notes.
+//   > [!TIP]
+//   > body text
+// The marker is stripped, a bold human label is injected so the note reads
+// "Tip — body…" inline, and the blockquote is tagged with `data-callout` so the
+// renderer can swap in the styled Callout box.
+const ALERTS = {
+  note: "Note",
+  tip: "Tip",
+  important: "Important",
+  warning: "Watch out",
+  caution: "Watch out",
+};
+
+const MARKER = /^\[!(\w+)\][ \t]*\n?/;
+
+function eachBlockquote(node, fn) {
+  if (!node || typeof node !== "object") return;
+  if (node.type === "blockquote") fn(node);
+  if (Array.isArray(node.children)) {
+    for (const child of node.children) eachBlockquote(child, fn);
+  }
+}
+
+export default function remarkCallouts() {
+  return (tree) => {
+    eachBlockquote(tree, (node) => {
+      const paragraph = node.children?.[0];
+      if (!paragraph || paragraph.type !== "paragraph") return;
+      const lead = paragraph.children?.[0];
+      if (!lead || lead.type !== "text") return;
+
+      const match = MARKER.exec(lead.value);
+      if (!match) return;
+      const kind = match[1].toLowerCase();
+      const label = ALERTS[kind];
+      if (!label) return;
+
+      // Drop the "[!TIP]" marker (and the soft break after it) from the body.
+      lead.value = lead.value.slice(match[0].length);
+      if (!lead.value) paragraph.children.shift();
+
+      // Prepend a bold label so the callout reads "Tip — body…" on one line.
+      paragraph.children.unshift(
+        { type: "strong", children: [{ type: "text", value: label }] },
+        { type: "text", value: " — " },
+      );
+
+      node.data = {
+        ...node.data,
+        hProperties: { ...(node.data?.hProperties || {}), "data-callout": kind },
+      };
+    });
+  };
+}
diff --git a/viewer/src/client/store/chat.js b/viewer/src/client/store/chat.js
index e46dd3f..69bb861 100644
--- a/viewer/src/client/store/chat.js
+++ b/viewer/src/client/store/chat.js
@@ -249,6 +249,10 @@ function appendError(turn, message) {
   };
 }
 
+function isUserCancelled(message) {
+  return String(message || "").trim().toLowerCase() === "cancelled";
+}
+
 function dedupe(values) {
   const seen = new Set();
   const out = [];
@@ -360,22 +364,33 @@ function applyChatEventToSession(session, event, now) {
         turnInProgress: false,
         history: updateAssistantTurn(session.history, turnId, (turn) => ({
           ...finalizeRunningTools(turn),
-          status: turn.status === "error" ? "error" : "complete",
+          status:
+            turn.status === "error" || turn.status === "cancelled"
+              ? turn.status
+              : "complete",
           endedAt: now,
         })),
       };
-    case "error":
+    case "error": {
+      const cancelled = isUserCancelled(event.message);
       return {
         ...session,
         currentTurnId: session.currentTurnId === turnId ? "" : session.currentTurnId,
         turnInProgress: false,
-        lastError: event.message,
+        lastError: cancelled ? session.lastError : event.message,
         history: updateAssistantTurn(
           ensureAssistantTurn(session.history, turnId, now),
           turnId,
-          (turn) => ({ ...appendError(finalizeRunningTools(turn), event.message), endedAt: now }),
+          (turn) => {
+            const finalized = finalizeRunningTools(turn);
+            if (cancelled) {
+              return { ...finalized, status: "cancelled", endedAt: now };
+            }
+            return { ...appendError(finalized, event.message), endedAt: now };
+          },
         ),
       };
+    }
     case "auth_expired":
       // Same turn lifecycle as `error`, with fixed copy. The top-level
       // `needsPandaReauth` flag (set in chatReducer) drives the action banner.