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

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

@@ -0,0 +1,62 @@
+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();
+  });
+
+  it("syntax-highlights fenced code blocks via the shared seam", () => {
+    const md = "# Notes\n\n```go\nfunc main() {}\n```\n";
+    const { container } = render(
+      <ArtifactContentRenderer content={md} fileName="notes.md" />,
+    );
+
+    // Same shared `MARKDOWN_COMPONENTS.code` override the chat stream uses, so
+    // the react-markdown artifact path colorizes code identically.
+    const code = container.querySelector("code.hljs");
+    expect(code).not.toBeNull();
+    expect(
+      container.querySelectorAll('span[class*="hljs-"]').length,
+    ).toBeGreaterThan(0);
+  });
+});

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,49 @@ 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();
+  });
+
+  it("syntax-highlights fenced code in the chat stream (Streamdown path)", () => {
+    const msg = makeMessage(
+      MessageType.MESSAGE_AI,
+      "```go\nfunc main() {}\n```",
+    );
+    const { container } = render(<MessageEntry message={msg} />);
+
+    const article = queryArticle(container, "AI response");
+    // Streamdown routes fenced code through the shared MARKDOWN_COMPONENTS.code
+    // override, so chat highlights identically to the artifact viewer.
+    expect(article!.querySelector("code.hljs")).not.toBeNull();
+    expect(
+      article!.querySelectorAll('span[class*="hljs-"]').length,
+    ).toBeGreaterThan(0);
+  });
 });
 
 // ---------------------------------------------------------------------------

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__/code-highlight.test.tsx

@@ -0,0 +1,59 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { resolveLanguage, highlightToReact } from "../code-highlight";
+
+afterEach(cleanup);
+
+describe("resolveLanguage", () => {
+  it.each([
+    ["a registered name", "go", "go"],
+    ["uppercase is normalized", "GO", "go"],
+    ["surrounding whitespace is trimmed", "  yaml  ", "yaml"],
+    ["a registered alias (ts → typescript)", "ts", "ts"],
+    ["a registered alias (tsx)", "tsx", "tsx"],
+    ["a registered alias (html → xml)", "html", "html"],
+    ["a registered alias (sh → bash)", "sh", "sh"],
+  ])("resolves %s", (_label, input, expected) => {
+    expect(resolveLanguage(input)).toBe(expected);
+  });
+
+  it.each([
+    ["an unregistered language", "hcl"],
+    ["a nonsense language", "klingon"],
+    ["an empty string", ""],
+    ["whitespace only", "   "],
+    ["undefined", undefined],
+  ])("returns null for %s", (_label, input) => {
+    expect(resolveLanguage(input)).toBeNull();
+  });
+});
+
+describe("highlightToReact", () => {
+  it("produces hljs token spans for a known language", () => {
+    const node = highlightToReact("func main() {}", "go");
+    expect(node).not.toBeNull();
+
+    const { container } = render(<code>{node}</code>);
+    // `func` is a Go keyword → at least one tokenized span must appear.
+    expect(
+      container.querySelectorAll('span[class*="hljs-"]').length,
+    ).toBeGreaterThan(0);
+  });
+
+  it("highlights via an alias (ts)", () => {
+    const node = highlightToReact("const x: number = 1;", "ts");
+    expect(node).not.toBeNull();
+
+    const { container } = render(<code>{node}</code>);
+    expect(
+      container.querySelectorAll('span[class*="hljs-"]').length,
+    ).toBeGreaterThan(0);
+  });
+
+  it.each([
+    ["an unregistered language", "hcl"],
+    ["no language", undefined],
+  ])("returns null for %s (caller falls back to flat)", (_label, language) => {
+    expect(highlightToReact("anything at all", language)).toBeNull();
+  });
+});

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

@@ -0,0 +1,119 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import type { ComponentType, ReactNode } from "react";
+import {
+  MARKDOWN_COMPONENTS,
+  unwrapEnclosingMarkdownFence,
+} from "../markdown-components";
+
+afterEach(cleanup);
+
+/** The shared `code` override, typed for direct rendering in tests. */
+const CodeComponent = MARKDOWN_COMPONENTS.code as ComponentType<{
+  className?: string;
+  children?: ReactNode;
+}>;
+
+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);
+  });
+});
+
+describe("MARKDOWN_COMPONENTS.code (shared highlight seam)", () => {
+  it("syntax-highlights a fenced block with a known language", () => {
+    const { container } = render(
+      <CodeComponent className="language-go">
+        {"func main() {}"}
+      </CodeComponent>,
+    );
+
+    const code = container.querySelector("code");
+    expect(code).not.toBeNull();
+    expect(code!.className).toContain("hljs");
+    expect(code!.className).toContain("language-go");
+    expect(
+      container.querySelectorAll('span[class*="hljs-"]').length,
+    ).toBeGreaterThan(0);
+  });
+
+  it("falls back to flat text for an unknown language (no token spans)", () => {
+    const { container } = render(
+      <CodeComponent className="language-hcl">
+        {'resource "x" {}'}
+      </CodeComponent>,
+    );
+
+    const code = container.querySelector("code");
+    expect(code).not.toBeNull();
+    expect(code!.textContent).toContain('resource "x" {}');
+    expect(container.querySelectorAll('span[class*="hljs-"]').length).toBe(0);
+  });
+
+  it("falls back to flat for non-string children (e.g. a streaming caret)", () => {
+    const { container } = render(
+      <CodeComponent className="language-go">
+        <span data-testid="caret">x</span>
+      </CodeComponent>,
+    );
+
+    // Renders children untouched, no throw, no tokenization attempted.
+    expect(container.querySelector('[data-testid="caret"]')).not.toBeNull();
+    expect(container.querySelectorAll('span[class*="hljs-"]').length).toBe(0);
+  });
+
+  it("leaves inline code unhighlighted and unboxed by hljs", () => {
+    const { container } = render(<CodeComponent>{"inlineToken"}</CodeComponent>);
+
+    const code = container.querySelector("code");
+    expect(code).not.toBeNull();
+    expect(code!.className).not.toContain("hljs");
+    expect(code!.className).toContain("bg-muted");
+    expect(code!.textContent).toBe("inlineToken");
+  });
+});