@stigmer/react 3.0.9-dev.20260615145121 → 3.0.9-dev.20260615153829

package/src/execution/PlanArtifactCard.tsx

@@ -5,6 +5,7 @@ import { cn } from "@stigmer/theme";
 import type { ExecutionArtifact } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
 import { ArtifactPreviewModal } from "./ArtifactPreviewModal";
 import { formatArtifactSize } from "./artifact-utils";
+import { useBuildFromPlanHotkey } from "./use-build-from-plan-hotkey";
 
 /** Props for {@link PlanArtifactCard}. */
 export interface PlanArtifactCardProps {
@@ -13,30 +14,41 @@ export interface PlanArtifactCardProps {
   /** The published `plan.md` artifact (from `findPlanArtifact`). */
   readonly artifact: ExecutionArtifact;
   /**
-   * Organization slug. Required for the "Review plan" modal (the shared
-   * {@link ArtifactPreviewModal} uses it for its detection/apply pipeline).
-   * When omitted, the Review action is hidden — Implement and Download remain.
+   * Organization slug. Required for the "Open full" modal (the shared
+   * {@link ArtifactPreviewModal} uses it for its detection/apply pipeline and
+   * to fetch the content). When omitted, "Open full" is hidden — the prominent
+   * "Build from plan" action and "Download" remain.
    */
   readonly org?: string;
-  /** Called when the user clicks "Implement". Hidden when omitted. */
+  /** Called when the user clicks "Build from plan". Hidden when omitted. */
   readonly onImplement?: () => void;
-  /** Disables the Implement CTA (e.g., while an execution is active). */
+  /** Disables the primary CTA (e.g., while an execution is active). */
   readonly disabled?: boolean;
   /** Additional CSS classes for the root element. */
   readonly className?: string;
 }
 
 /**
- * Reviewable card shown after a completed Plan-mode execution when the agent
- * published a `plan.md` artifact.
+ * Action surface for a plan that a completed Plan-mode execution published as a
+ * `plan.md` artifact.
  *
- * Presentational by design: it surfaces the plan as a first-class object with
- * three actions — **Implement** (turn the plan into an Agent run), **Review
- * plan** (open the rendered plan in the shared {@link ArtifactPreviewModal},
- * the same popup used elsewhere for artifact previews — where Copy and an
- * Implement CTA also live), and **Download** the `plan.md` file. The plan text
- * is the single source of truth (the published artifact); the modal fetches it
- * on demand, so the card itself holds no plan content.
+ * It is rendered immediately below the plan message in the thread (which already
+ * shows the plan as rich markdown — the message renderer unwraps a model's
+ * enclosing markdown fence), so this card deliberately holds **no** plan
+ * content: the message is the document and this is its action bar. Rendering
+ * the plan a second time here would duplicate the same text the message and the
+ * "Open full" modal already show.
+ *
+ * The hierarchy is the point: one prominent, themeable primary action —
+ * **Build from plan** — with **Open full** and **Download** as subdued
+ * secondaries, so the next step is unmistakable. A small negative top margin
+ * pulls the bar against the plan message so the two read as a single
+ * first-class plan block.
+ *
+ * Kept as its own thread item (not merged into the message) on purpose: merging
+ * would change the streamed message item's identity at completion and remount
+ * the just-streamed plan. Adjacent-and-attached gets the unified look with no
+ * remount.
  *
  * All visual properties flow through `--stgm-*` tokens; the component is
  * self-contained and embeddable.
@@ -50,59 +62,39 @@ export const PlanArtifactCard = memo(function PlanArtifactCard({
   className,
 }: PlanArtifactCardProps) {
   const [previewOpen, setPreviewOpen] = useState(false);
+  const handleKeyDown = useBuildFromPlanHotkey(onImplement, disabled);
 
   return (
     <div
       role="region"
-      aria-label="Plan ready to review"
+      aria-label="Plan actions"
+      onKeyDown={handleKeyDown}
       className={cn(
-        "mx-4 overflow-hidden rounded-md border border-border-muted bg-muted-faint",
+        // `-mt-2` tightens the thread's `gap-4` so the bar attaches to the
+        // plan message above it, reading as one first-class plan block.
+        "mx-4 -mt-2 flex flex-wrap items-center gap-x-3 gap-y-2 rounded-md",
+        "border border-border-muted bg-muted-faint px-3 py-2",
         className,
       )}
     >
-      {/* Header */}
-      <div className="flex items-center gap-3 px-3 py-2.5">
-        <PlanIcon />
-        <div className="min-w-0 flex-1">
-          <div className="text-xs font-medium text-foreground">
-            Plan ready to review
-          </div>
-          <div className="text-xs tabular-nums text-muted-foreground">
-            {artifact.name} · {formatArtifactSize(artifact.sizeBytes)}
-          </div>
-        </div>
-        {onImplement && (
-          <button
-            type="button"
-            disabled={disabled}
-            onClick={onImplement}
-            className={cn(
-              "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5",
-              "text-xs font-medium transition-colors",
-              "bg-primary text-primary-foreground hover:bg-primary-hover",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              "disabled:pointer-events-none disabled:opacity-50",
-            )}
-          >
-            <ImplementIcon />
-            Implement
-          </button>
-        )}
-      </div>
+      <PlanIcon />
+      <span className="text-xs font-medium text-foreground">Plan</span>
+      <span className="text-xs tabular-nums text-muted-foreground-faint">
+        {formatArtifactSize(artifact.sizeBytes)}
+      </span>
 
-      {/* Secondary actions */}
-      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-border-muted px-3 py-1.5">
+      <div className="ml-auto flex flex-wrap items-center gap-x-3 gap-y-1.5">
         {org && (
           <button
             type="button"
             onClick={() => setPreviewOpen(true)}
             className={cn(
-              "inline-flex items-center gap-1 text-xs font-medium text-primary transition-colors hover:text-primary-muted",
+              "inline-flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
               FOCUS_RING,
             )}
           >
             <ExpandIcon />
-            Review plan
+            Open full
           </button>
         )}
         <a
@@ -116,10 +108,27 @@ export const PlanArtifactCard = memo(function PlanArtifactCard({
           <DownloadIcon />
           Download
         </a>
+        {onImplement && (
+          <button
+            type="button"
+            disabled={disabled}
+            onClick={onImplement}
+            className={cn(
+              "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5",
+              "text-xs font-medium transition-colors",
+              "bg-primary text-primary-foreground hover:bg-primary-hover",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "disabled:pointer-events-none disabled:opacity-50",
+            )}
+          >
+            <ImplementIcon />
+            Build from plan
+          </button>
+        )}
       </div>
 
-      {/* Review opens the shared artifact preview popup — consistent with the
-          Artifacts tab and the single place that fetches/renders plan content. */}
+      {/* "Open full" reuses the shared artifact preview popup — the single place
+          that fetches/renders plan content (with Copy + Source/Rendered). */}
       {org && previewOpen && (
         <ArtifactPreviewModal
           artifact={artifact}

package/src/execution/PlanCompletionCard.tsx

@@ -2,10 +2,11 @@
 
 import { memo } from "react";
 import { cn } from "@stigmer/theme";
+import { useBuildFromPlanHotkey } from "./use-build-from-plan-hotkey";
 
 /** Props for {@link PlanCompletionCard}. */
 export interface PlanCompletionCardProps {
-  /** Called when the user clicks the "Implement" button. */
+  /** Called when the user clicks the "Build from plan" button. */
   readonly onImplement?: () => void;
   /** Disables the CTA button (e.g., while an execution is active). */
   readonly disabled?: boolean;
@@ -14,37 +15,43 @@ export interface PlanCompletionCardProps {
 }
 
 /**
- * Inline CTA card shown in the {@link MessageThread} after a completed
- * Plan-mode execution.
+ * Fallback CTA shown in the {@link MessageThread} after a completed Plan-mode
+ * execution that did **not** publish a `plan.md` artifact (older executions, or
+ * a plan whose upload failed). When a plan artifact exists, the richer
+ * {@link PlanArtifactCard} is shown instead.
  *
- * Offers a single "Implement" action that the consumer wires to switch
- * the interaction mode to Agent, pre-fill the composer, and focus it.
+ * Mirrors `PlanArtifactCard`'s hierarchy — one prominent, themeable "Build from
+ * plan" primary action with the same card-scoped `Cmd/Ctrl+Enter` accelerator —
+ * so the two cards feel like the same affordance. The consumer wires the action
+ * to switch the interaction mode to Agent and submit the implement turn.
  *
- * Renders nothing when `onImplement` is not provided, so the card is
- * fully opt-in from the consumer's perspective.
- *
- * All visual properties flow through `--stgm-*` tokens.
+ * Renders nothing when `onImplement` is not provided, so the card is fully
+ * opt-in from the consumer's perspective. All visual properties flow through
+ * `--stgm-*` tokens.
  */
 export const PlanCompletionCard = memo(function PlanCompletionCard({
   onImplement,
   disabled,
   className,
 }: PlanCompletionCardProps) {
+  const handleKeyDown = useBuildFromPlanHotkey(onImplement, disabled);
+
   if (!onImplement) return null;
 
   return (
     <div
       role="status"
       aria-label="Plan complete"
+      onKeyDown={handleKeyDown}
       className={cn(
-        "mx-4 flex items-center gap-3 rounded-md border border-border/50",
-        "bg-muted/30 px-3 py-2.5",
+        "mx-4 flex items-center gap-3 rounded-md border border-border-muted",
+        "bg-muted-faint px-3 py-2.5",
         className,
       )}
     >
       <PlanCompleteIcon />
       <span className="min-w-0 flex-1 text-xs font-medium text-muted-foreground">
-        Plan complete — ready to implement?
+        Plan complete — ready to build?
       </span>
       <button
         type="button"
@@ -60,7 +67,7 @@ export const PlanCompletionCard = memo(function PlanCompletionCard({
         )}
       >
         <ImplementIcon />
-        Implement
+        Build from plan
       </button>
     </div>
   );

package/src/execution/__tests__/ArtifactContentRenderer.test.tsx

@@ -0,0 +1,47 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { ArtifactContentRenderer } from "../ArtifactContentRenderer";
+
+afterEach(cleanup);
+
+describe("ArtifactContentRenderer — markdown", () => {
+  const wrappedPlan = "```markdown\n# Plan\n\n1. First\n2. Second\n```";
+
+  it("unwraps a model-wrapped ```markdown plan in the Rendered view", () => {
+    const { container } = render(
+      <ArtifactContentRenderer content={wrappedPlan} fileName="plan.md" />,
+    );
+
+    // Rendered is the default tab: the heading/list render as real elements and
+    // the plan is not trapped inside a single <pre>.
+    expect(container.querySelector("h1")).not.toBeNull();
+    expect(container.querySelector("ol")).not.toBeNull();
+    expect(container.querySelector("pre")).toBeNull();
+  });
+
+  it("keeps the Source view byte-faithful to the stored artifact", () => {
+    const { container } = render(
+      <ArtifactContentRenderer content={wrappedPlan} fileName="plan.md" />,
+    );
+
+    fireEvent.click(screen.getByRole("tab", { name: "Source" }));
+
+    // Source shows the raw bytes — including the enclosing fence we hid in the
+    // Rendered view — so a download/copy stays faithful to what the agent wrote.
+    const pre = container.querySelector("pre");
+    expect(pre).not.toBeNull();
+    expect(pre!.textContent).toContain("```markdown");
+  });
+
+  it("leaves an already-rich markdown plan unchanged", () => {
+    const { container } = render(
+      <ArtifactContentRenderer
+        content={"# Plan\n\n- only step"}
+        fileName="plan.md"
+      />,
+    );
+
+    expect(container.querySelector("h1")).not.toBeNull();
+    expect(container.querySelector("pre")).toBeNull();
+  });
+});

package/src/execution/__tests__/ArtifactPreviewModal.test.tsx

@@ -27,8 +27,8 @@ function withStigmer(children: ReactNode) {
 
 afterEach(cleanup);
 
-describe("ArtifactPreviewContent — Implement action", () => {
-  it("renders an Implement button only when onImplement is provided", () => {
+describe("ArtifactPreviewContent — Build from plan action", () => {
+  it("renders a 'Build from plan' button only when onImplement is provided", () => {
     const { rerender } = render(
       withStigmer(
         <ArtifactPreviewContent
@@ -40,7 +40,7 @@ describe("ArtifactPreviewContent — Implement action", () => {
         />,
       ),
     );
-    expect(screen.queryByText("Implement")).toBeNull();
+    expect(screen.queryByText("Build from plan")).toBeNull();
 
     rerender(
       withStigmer(
@@ -54,10 +54,10 @@ describe("ArtifactPreviewContent — Implement action", () => {
         />,
       ),
     );
-    expect(screen.getByText("Implement")).toBeTruthy();
+    expect(screen.getByText("Build from plan")).toBeTruthy();
   });
 
-  it("calls onImplement then closes the modal when Implement is clicked", () => {
+  it("calls onImplement then closes the modal when 'Build from plan' is clicked", () => {
     const calls: string[] = [];
     const onImplement = vi.fn(() => calls.push("implement"));
     const onClose = vi.fn(() => calls.push("close"));
@@ -75,7 +75,7 @@ describe("ArtifactPreviewContent — Implement action", () => {
       ),
     );
 
-    fireEvent.click(screen.getByText("Implement"));
+    fireEvent.click(screen.getByText("Build from plan"));
 
     expect(onImplement).toHaveBeenCalledTimes(1);
     expect(onClose).toHaveBeenCalledTimes(1);

package/src/execution/__tests__/MessageThread.test.tsx

@@ -476,10 +476,10 @@ describe("MessageThread", () => {
       />,
     );
 
-    const implementBtn = screen.getByRole("button", { name: /implement/i });
-    expect(implementBtn).toBeTruthy();
+    const buildBtn = screen.getByRole("button", { name: /build from plan/i });
+    expect(buildBtn).toBeTruthy();
 
-    fireEvent.click(implementBtn);
+    fireEvent.click(buildBtn);
     expect(onBuildFromPlan).toHaveBeenCalledOnce();
   });
 });

package/src/execution/__tests__/PlanArtifactCard.test.tsx

@@ -17,36 +17,49 @@ const planArtifact = create(ExecutionArtifactSchema, {
 });
 
 /** Modal content fetches artifact text — keep it pending so nothing rejects. */
-function createStigmerMock(): Stigmer {
+function createStigmerMock(): { stigmer: Stigmer; getArtifactContent: ReturnType<typeof vi.fn> } {
+  const getArtifactContent = vi.fn().mockReturnValue(new Promise(() => {}));
   return {
-    agentExecution: {
-      getArtifactContent: vi.fn().mockReturnValue(new Promise(() => {})),
-    },
-  } as unknown as Stigmer;
+    stigmer: {
+      agentExecution: { getArtifactContent },
+    } as unknown as Stigmer,
+    getArtifactContent,
+  };
 }
 
-function withStigmer(children: ReactNode) {
+function withStigmer(children: ReactNode, stigmer: Stigmer) {
   return (
-    <StigmerContext.Provider value={createStigmerMock()}>
-      {children}
-    </StigmerContext.Provider>
+    <StigmerContext.Provider value={stigmer}>{children}</StigmerContext.Provider>
   );
 }
 
 afterEach(cleanup);
 
-describe("PlanArtifactCard", () => {
-  it("renders the review header with the artifact name and size", () => {
+describe("PlanArtifactCard — action surface", () => {
+  it("is an accessible region labelled as the plan's actions, with name + size", () => {
     render(
       <PlanArtifactCard executionId="aex_1" artifact={planArtifact} org="acme" />,
     );
 
-    const region = screen.getByRole("region", { name: "Plan ready to review" });
-    expect(region.textContent).toContain("Plan ready to review");
-    expect(region.textContent).toContain("plan.md");
+    const region = screen.getByRole("region", { name: "Plan actions" });
+    expect(region.textContent).toContain("Plan");
+    expect(region.textContent).toContain("KB");
   });
 
-  it("calls onImplement when Implement is clicked", () => {
+  it("does NOT render the plan content (the message above is the document)", () => {
+    const { stigmer, getArtifactContent } = createStigmerMock();
+    render(
+      withStigmer(
+        <PlanArtifactCard executionId="aex_1" artifact={planArtifact} org="acme" />,
+        stigmer,
+      ),
+    );
+    // The card is a pure action surface — it must not fetch the plan body until
+    // the user explicitly opens the full preview.
+    expect(getArtifactContent).not.toHaveBeenCalled();
+  });
+
+  it("offers exactly one primary 'Build from plan' action that calls onImplement", () => {
     const onImplement = vi.fn();
     render(
       <PlanArtifactCard
@@ -57,18 +70,18 @@ describe("PlanArtifactCard", () => {
       />,
     );
 
-    fireEvent.click(screen.getByText("Implement"));
+    fireEvent.click(screen.getByText("Build from plan"));
     expect(onImplement).toHaveBeenCalledTimes(1);
   });
 
-  it("hides Implement when onImplement is not provided", () => {
+  it("hides 'Build from plan' when onImplement is not provided", () => {
     render(
       <PlanArtifactCard executionId="aex_1" artifact={planArtifact} org="acme" />,
     );
-    expect(screen.queryByText("Implement")).toBeNull();
+    expect(screen.queryByText("Build from plan")).toBeNull();
   });
 
-  it("disables Implement when disabled", () => {
+  it("disables 'Build from plan' when disabled", () => {
     const onImplement = vi.fn();
     render(
       <PlanArtifactCard
@@ -80,7 +93,7 @@ describe("PlanArtifactCard", () => {
       />,
     );
 
-    const button = screen.getByText("Implement").closest("button")!;
+    const button = screen.getByText("Build from plan").closest("button")!;
     expect(button.disabled).toBe(true);
     fireEvent.click(button);
     expect(onImplement).not.toHaveBeenCalled();
@@ -93,30 +106,106 @@ describe("PlanArtifactCard", () => {
     const link = screen.getByText("Download").closest("a")!;
     expect(link.getAttribute("href")).toBe("https://example.test/plan.md");
   });
+});
 
-  it("opens the shared preview modal when Review plan is clicked", () => {
+describe("PlanArtifactCard — Cmd/Ctrl+Enter accelerator (card-scoped)", () => {
+  it("fires onImplement on Cmd+Enter from within the card", () => {
+    const onImplement = vi.fn();
+    render(
+      <PlanArtifactCard
+        executionId="aex_1"
+        artifact={planArtifact}
+        org="acme"
+        onImplement={onImplement}
+      />,
+    );
+
+    const region = screen.getByRole("region", { name: "Plan actions" });
+    fireEvent.keyDown(region, { key: "Enter", metaKey: true });
+    expect(onImplement).toHaveBeenCalledTimes(1);
+  });
+
+  it("fires onImplement on Ctrl+Enter", () => {
+    const onImplement = vi.fn();
+    render(
+      <PlanArtifactCard
+        executionId="aex_1"
+        artifact={planArtifact}
+        org="acme"
+        onImplement={onImplement}
+      />,
+    );
+
+    const region = screen.getByRole("region", { name: "Plan actions" });
+    fireEvent.keyDown(region, { key: "Enter", ctrlKey: true });
+    expect(onImplement).toHaveBeenCalledTimes(1);
+  });
+
+  it("ignores a plain Enter (no modifier) so it never hijacks typing", () => {
+    const onImplement = vi.fn();
+    render(
+      <PlanArtifactCard
+        executionId="aex_1"
+        artifact={planArtifact}
+        org="acme"
+        onImplement={onImplement}
+      />,
+    );
+
+    const region = screen.getByRole("region", { name: "Plan actions" });
+    fireEvent.keyDown(region, { key: "Enter" });
+    expect(onImplement).not.toHaveBeenCalled();
+  });
+
+  it("does not fire when disabled", () => {
+    const onImplement = vi.fn();
+    render(
+      <PlanArtifactCard
+        executionId="aex_1"
+        artifact={planArtifact}
+        org="acme"
+        onImplement={onImplement}
+        disabled
+      />,
+    );
+
+    const region = screen.getByRole("region", { name: "Plan actions" });
+    fireEvent.keyDown(region, { key: "Enter", metaKey: true });
+    expect(onImplement).not.toHaveBeenCalled();
+  });
+});
+
+describe("PlanArtifactCard — Open full (org-gated preview)", () => {
+  it("opens the shared preview modal when 'Open full' is clicked", () => {
+    const { stigmer } = createStigmerMock();
     render(
       withStigmer(
-        <PlanArtifactCard
-          executionId="aex_1"
-          artifact={planArtifact}
-          org="acme"
-        />,
+        <PlanArtifactCard executionId="aex_1" artifact={planArtifact} org="acme" />,
+        stigmer,
       ),
     );
 
-    // No dialog before the user reviews.
+    // No dialog before the user opens it.
     expect(document.querySelector("dialog")).toBeNull();
 
-    fireEvent.click(screen.getByText("Review plan"));
+    fireEvent.click(screen.getByText("Open full"));
 
     const dialog = document.querySelector("dialog");
     expect(dialog).toBeTruthy();
     expect(dialog!.getAttribute("aria-label")).toBe("Preview plan.md");
   });
 
-  it("hides Review plan when org is absent (modal needs org)", () => {
-    render(<PlanArtifactCard executionId="aex_1" artifact={planArtifact} />);
-    expect(screen.queryByText("Review plan")).toBeNull();
+  it("hides 'Open full' when org is absent (modal needs org), keeping Build + Download", () => {
+    const onImplement = vi.fn();
+    render(
+      <PlanArtifactCard
+        executionId="aex_1"
+        artifact={planArtifact}
+        onImplement={onImplement}
+      />,
+    );
+    expect(screen.queryByText("Open full")).toBeNull();
+    expect(screen.queryByText("Build from plan")).not.toBeNull();
+    expect(screen.queryByText("Download")).not.toBeNull();
   });
 });

package/src/execution/__tests__/PlanCompletionCard.test.tsx

@@ -3,7 +3,7 @@ import { render, fireEvent, cleanup } from "@testing-library/react";
 import { PlanCompletionCard } from "../PlanCompletionCard";
 
 describe("PlanCompletionCard", () => {
-  it("renders the card with status text and implement button", () => {
+  it("renders the card with status text and a 'Build from plan' button", () => {
     const { container } = render(<PlanCompletionCard onImplement={() => {}} />);
 
     const root = container.firstElementChild as HTMLElement;
@@ -13,12 +13,41 @@ describe("PlanCompletionCard", () => {
 
     const button = root.querySelector("button");
     expect(button).toBeTruthy();
-    expect(button!.textContent).toContain("Implement");
+    expect(button!.textContent).toContain("Build from plan");
 
     expect(root.textContent).toContain("Plan complete");
     cleanup();
   });
 
+  it("fires onImplement on Cmd/Ctrl+Enter from within the card", () => {
+    const onImplement = vi.fn();
+    const { container } = render(
+      <PlanCompletionCard onImplement={onImplement} />,
+    );
+
+    const root = container.firstElementChild as HTMLElement;
+    fireEvent.keyDown(root, { key: "Enter", metaKey: true });
+    fireEvent.keyDown(root, { key: "Enter", ctrlKey: true });
+    expect(onImplement).toHaveBeenCalledTimes(2);
+
+    // A plain Enter must not trigger it.
+    fireEvent.keyDown(root, { key: "Enter" });
+    expect(onImplement).toHaveBeenCalledTimes(2);
+    cleanup();
+  });
+
+  it("does not fire the accelerator when disabled", () => {
+    const onImplement = vi.fn();
+    const { container } = render(
+      <PlanCompletionCard onImplement={onImplement} disabled />,
+    );
+
+    const root = container.firstElementChild as HTMLElement;
+    fireEvent.keyDown(root, { key: "Enter", metaKey: true });
+    expect(onImplement).not.toHaveBeenCalled();
+    cleanup();
+  });
+
   it("calls onImplement when the button is clicked", () => {
     const onImplement = vi.fn();
     const { container } = render(<PlanCompletionCard onImplement={onImplement} />);

package/src/execution/__tests__/message-entry.test.tsx

@@ -126,6 +126,33 @@ describe("MessageEntry — AI messages (Streamdown)", () => {
     const prose = container.querySelector(".stgm-prose");
     expect(prose).not.toBeNull();
   });
+
+  it("renders a model-wrapped ```markdown plan as rich markdown, not a code block", () => {
+    const msg = makeMessage(
+      MessageType.MESSAGE_AI,
+      "```markdown\n# Plan\n\n1. First step\n2. Second step\n```",
+    );
+    const { container } = render(<MessageEntry message={msg} />);
+
+    const article = queryArticle(container, "AI response");
+    // The enclosing fence is unwrapped: the heading and list render as elements,
+    // and the whole plan is NOT trapped inside a single <pre>.
+    expect(article!.querySelector("h1")).not.toBeNull();
+    expect(article!.querySelector("ol")).not.toBeNull();
+    expect(article!.querySelector("pre")).toBeNull();
+    expect(article!.textContent).toContain("Plan");
+  });
+
+  it("still renders a genuine ```js code block as a code block", () => {
+    const msg = makeMessage(
+      MessageType.MESSAGE_AI,
+      "```js\nconsole.log('hi');\n```",
+    );
+    const { container } = render(<MessageEntry message={msg} />);
+
+    const article = queryArticle(container, "AI response");
+    expect(article!.querySelector("pre")).not.toBeNull();
+  });
 });
 
 // ---------------------------------------------------------------------------