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

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

package/src/execution/use-build-from-plan-hotkey.ts

@@ -0,0 +1,39 @@
+"use client";
+
+import { useCallback, type KeyboardEvent } from "react";
+
+/**
+ * Card-scoped `Cmd/Ctrl+Enter` accelerator for the "Build from plan" action.
+ *
+ * Returns an `onKeyDown` handler for a plan card's root element. Because it is
+ * attached to the card (not `window`), it fires only when the keystroke
+ * originates from within the card — so the SDK never installs a global listener
+ * that could hijack a host application's keyboard shortcuts (an embeddable-a11y
+ * requirement). The card's primary button stays natively activatable with
+ * Enter/Space when focused; this adds the power-user accelerator on top.
+ *
+ * No-op when there is no action wired or the action is disabled.
+ *
+ * Shared by {@link PlanArtifactCard} and {@link PlanCompletionCard} so the
+ * accelerator's behavior lives in exactly one place and cannot drift between
+ * the two cards.
+ */
+export function useBuildFromPlanHotkey(
+  onImplement: (() => void) | undefined,
+  disabled: boolean | undefined,
+): (event: KeyboardEvent<HTMLElement>) => void {
+  return useCallback(
+    (event) => {
+      if (
+        onImplement &&
+        !disabled &&
+        event.key === "Enter" &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault();
+        onImplement();
+      }
+    },
+    [onImplement, disabled],
+  );
+}

package/src/internal/__tests__/markdown-components.test.tsx

@@ -0,0 +1,53 @@
+import { describe, it, expect } from "vitest";
+import { unwrapEnclosingMarkdownFence } from "../markdown-components";
+
+describe("unwrapEnclosingMarkdownFence", () => {
+  describe("unwraps a whole-message markdown fence", () => {
+    it.each([
+      ["```markdown tag", "```markdown\n# Plan\n- step\n```", "# Plan\n- step"],
+      ["```md tag", "```md\n# Plan\n```", "# Plan"],
+      ["case-insensitive tag", "```Markdown\n# Plan\n```", "# Plan"],
+      ["uppercase md", "```MD\n# Plan\n```", "# Plan"],
+      [
+        "tilde-free body with inner code fence preserved",
+        "```markdown\n# Plan\n```ts\nconst x = 1;\n```\n```",
+        "# Plan\n```ts\nconst x = 1;\n```",
+      ],
+      [
+        "surrounding whitespace is ignored",
+        "\n\n```markdown\n# Plan\n```\n\n",
+        "# Plan",
+      ],
+      [
+        "longer-than-three backtick fence",
+        "````markdown\n# Plan\n````",
+        "# Plan",
+      ],
+    ])("%s", (_label, input, expected) => {
+      expect(unwrapEnclosingMarkdownFence(input)).toBe(expected);
+    });
+  });
+
+  describe("leaves everything else untouched (returns the original)", () => {
+    it.each([
+      ["plain markdown (no fence)", "# Plan\n\n- step one\n- step two"],
+      ["a bare ``` fence (ambiguous — could be code)", "```\n# Plan\n```"],
+      ["a language-tagged code block", "```js\nconsole.log('hi');\n```"],
+      ["an unclosed fence (mid-stream)", "```markdown\n# Plan in progr"],
+      ["trailing content after the fence", "```markdown\n# Plan\n```\nthen more"],
+      ["leading content before the fence", "intro\n```markdown\n# Plan\n```"],
+      ["a richer info string than markdown", "```markdown title\n# Plan\n```"],
+      ["an empty fenced block", "```markdown\n```"],
+      ["plain prose", "Here is the plan you asked for."],
+      ["empty string", ""],
+    ])("%s", (_label, input) => {
+      expect(unwrapEnclosingMarkdownFence(input)).toBe(input);
+    });
+  });
+
+  it("is idempotent — a once-unwrapped plan is left alone", () => {
+    const wrapped = "```markdown\n# Plan\n- a\n```";
+    const once = unwrapEnclosingMarkdownFence(wrapped);
+    expect(unwrapEnclosingMarkdownFence(once)).toBe(once);
+  });
+});

package/src/internal/markdown-components.tsx

@@ -26,6 +26,42 @@ export function stripFrontmatter(content: string): string {
   return content.replace(FRONTMATTER_RE, "");
 }
 
+/**
+ * Matches content whose ENTIRE body is a single fenced code block tagged
+ * `markdown` / `md`. Capture group 1 is the opening backtick run (so the close
+ * must use the same run via the `\1` backreference); group 2 is the inner body.
+ *
+ * Deliberately strict: the info string must be exactly `markdown`/`md` and the
+ * fence must span the whole (trimmed) string. A bare ``` ``` ``` fence is NOT
+ * matched — without the explicit language tag we cannot tell wrapped markdown
+ * from a legitimate single code block, and guessing by inspecting the body is
+ * the kind of fuzzy heuristic this codebase avoids.
+ */
+const ENCLOSING_MARKDOWN_FENCE_RE =
+  /^(`{3,})[ \t]*(?:markdown|md)[ \t]*\r?\n([\s\S]*?)\r?\n\1[ \t]*$/i;
+
+/**
+ * Unwraps a message the model wrapped entirely in a ```markdown / ```md fence.
+ *
+ * Some models emit their whole markdown reply inside one fenced block (a
+ * Plan-mode plan is the common case). Rendered as-is that becomes a single flat
+ * code block instead of rich markdown — headings, lists, and tables collapse to
+ * monospace text. This returns the inner markdown in exactly that case and is a
+ * no-op for everything else (already-rich markdown, prose, or a reply that is
+ * legitimately a single code block).
+ *
+ * Render-time only: callers pass it the text right before handing it to the
+ * markdown renderer, so the transcript and the raw artifact stay faithful to
+ * what the agent produced — a single source of truth for the unwrap, with no
+ * duplicated logic in the runner. While streaming, the closing fence has not
+ * arrived yet, so this no-ops and the live text renders as typed; it unwraps
+ * once the block closes.
+ */
+export function unwrapEnclosingMarkdownFence(content: string): string {
+  const match = ENCLOSING_MARKDOWN_FENCE_RE.exec(content.trim());
+  return match ? match[2] : content;
+}
+
 /**
  * Styled react-markdown component overrides for SDK markdown surfaces.
  *

package/src/session/inspector/__tests__/ArtifactsTab.test.tsx

@@ -58,32 +58,32 @@ function openPreviewFor(name: string) {
 
 afterEach(cleanup);
 
-describe("ArtifactsTab — plan Implement wiring", () => {
-  it("shows Implement in the preview of a plan.md artifact", () => {
+describe("ArtifactsTab — plan 'Build from plan' wiring", () => {
+  it("shows 'Build from plan' in the preview of a plan.md artifact", () => {
     renderTab(vi.fn());
 
     openPreviewFor("plan.md");
 
     const dialog = document.querySelector("dialog")!;
-    expect(within(dialog).getByText("Implement")).toBeTruthy();
+    expect(within(dialog).getByText("Build from plan")).toBeTruthy();
   });
 
-  it("does not show Implement in the preview of a non-plan artifact", () => {
+  it("does not show 'Build from plan' in the preview of a non-plan artifact", () => {
     renderTab(vi.fn());
 
     openPreviewFor("notes.md");
 
     const dialog = document.querySelector("dialog")!;
-    expect(within(dialog).queryByText("Implement")).toBeNull();
+    expect(within(dialog).queryByText("Build from plan")).toBeNull();
   });
 
-  it("invokes onImplementPlan when Implement is clicked for a plan", () => {
+  it("invokes onImplementPlan when 'Build from plan' is clicked for a plan", () => {
     const onImplementPlan = vi.fn();
     renderTab(onImplementPlan);
 
     openPreviewFor("plan.md");
     const dialog = document.querySelector("dialog")!;
-    fireEvent.click(within(dialog).getByText("Implement"));
+    fireEvent.click(within(dialog).getByText("Build from plan"));
 
     expect(onImplementPlan).toHaveBeenCalledTimes(1);
   });