@stigmer/react 3.1.3 → 3.1.4

package/src/execution/ArtifactsWidget.tsx

@@ -5,9 +5,10 @@ import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexe
 import { cn } from "@stigmer/theme";
 import {
   useSessionArtifacts,
+  artifactKey,
   type SessionArtifactEntry,
 } from "../session/useSessionArtifacts.js";
-import { ArtifactCard } from "./ArtifactCard.js";
+import { ArtifactRow } from "./ArtifactRow.js";
 import { ArtifactPreviewModal } from "./ArtifactPreviewModal.js";
 import type { ApplyResourceResult } from "../library/useApplyResource.js";
 
@@ -45,19 +46,16 @@ export interface ArtifactsWidgetProps {
  * a file-explorer-like view of the conversation's output — no
  * execution/turn concepts are exposed.
  *
- * Composes {@link ArtifactCard} (summary + detection badges) with
- * {@link ArtifactPreviewModal} (full content review + Apply/Push CTA).
- * The card's "Preview" action opens the modal; the modal is the sole
- * location for Apply/Push actions (review-before-apply pattern).
+ * The panel-less counterpart of the session panel's Artifacts facet: it
+ * renders the same dense {@link ArtifactRow} list, but — having no editor pane
+ * to open document tabs into — a click opens the {@link ArtifactPreviewModal}
+ * (the review-before-apply popup, and the sole home of the Apply/Push CTA).
+ * This is the embeddable path a platform builder drops into their own sidebar.
  *
  * Returns `null` when the executions list is empty or no execution
  * has artifacts, matching the conditional-render pattern of
  * {@link ExecutionProgress} and {@link UsageWidget}.
  *
- * Renders without card chrome — each {@link ArtifactCard} provides its
- * own border and padding. The consumer controls the container styling
- * (or places the widget directly in a flex/grid layout).
- *
  * All visual properties flow through `--stgm-*` tokens.
  *
  * @example
@@ -74,7 +72,7 @@ export interface ArtifactsWidgetProps {
  * />
  * ```
  *
- * @see {@link ArtifactCard} — compact summary card per artifact
+ * @see {@link ArtifactRow} — the dense row rendered per artifact
  * @see {@link ArtifactPreviewModal} — full preview with Apply/Push CTA
  * @see {@link useSessionArtifacts} — headless session-level artifact aggregation hook
  * @see {@link useExecutionArtifacts} — headless single-execution artifact extraction hook
@@ -88,27 +86,22 @@ export function ArtifactsWidget({
   const { artifacts, hasArtifacts, artifactCount } =
     useSessionArtifacts(executions);
 
-  // Store the dedup key (sandboxPath or name) instead of a snapshot of
-  // the full entry.  The actual entry is derived from the live artifacts
-  // list on every render, so the preview modal always reflects the
-  // latest artifact version — even when a newer execution publishes an
-  // updated artifact for the same path while the modal is open.
+  // Store the artifact identity (not a snapshot of the full entry). The entry is
+  // re-derived from the live artifacts list on every render, so the modal always
+  // reflects the latest artifact version — even when a newer execution publishes
+  // an updated artifact for the same path while the modal is open.
   const [previewKey, setPreviewKey] = useState<string | null>(null);
 
   const previewEntry = useMemo<SessionArtifactEntry | null>(
     () =>
       previewKey !== null
-        ? artifacts.find(
-            (e) =>
-              (e.artifact.sandboxPath || e.artifact.name) === previewKey,
-          ) ?? null
+        ? artifacts.find((e) => artifactKey(e.artifact) === previewKey) ?? null
         : null,
     [previewKey, artifacts],
   );
 
-  const handlePreview = useCallback(
-    (entry: SessionArtifactEntry) =>
-      setPreviewKey(entry.artifact.sandboxPath || entry.artifact.name),
+  const handleOpen = useCallback(
+    (entry: SessionArtifactEntry) => setPreviewKey(artifactKey(entry.artifact)),
     [],
   );
 
@@ -123,19 +116,17 @@ export function ArtifactsWidget({
         </span>
       </div>
 
-      <div role="list" className="space-y-2">
+      <ul role="list" className="flex flex-col">
         {artifacts.map((entry) => (
-          <div key={entry.artifact.storageKey} role="listitem">
-            <ArtifactCard
-              artifact={entry.artifact}
-              executionId={entry.executionId}
-              org={org}
-              hasNameCollision={entry.hasNameCollision}
-              onPreview={() => handlePreview(entry)}
-            />
-          </div>
+          <ArtifactRow
+            key={artifactKey(entry.artifact)}
+            artifact={entry.artifact}
+            executionId={entry.executionId}
+            hasNameCollision={entry.hasNameCollision}
+            onOpen={() => handleOpen(entry)}
+          />
         ))}
-      </div>
+      </ul>
 
       {previewEntry && (
         <ArtifactPreviewModal

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

@@ -0,0 +1,131 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import { ExecutionArtifactSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
+import { ExecutionArtifactKind } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { ArtifactContentBody } from "../ArtifactContentBody";
+import type { SkillPackageDetection } from "../../library/detect-skill-package";
+
+const NOT_SKILL: SkillPackageDetection = { detected: false };
+
+function fileArtifact(name: string) {
+  return create(ExecutionArtifactSchema, {
+    name,
+    kind: ExecutionArtifactKind.FILE,
+    sizeBytes: 64n,
+  });
+}
+
+function dirArtifact(name: string, entries: string[]) {
+  return create(ExecutionArtifactSchema, {
+    name,
+    kind: ExecutionArtifactKind.DIRECTORY,
+    sizeBytes: 512n,
+    entries,
+  });
+}
+
+afterEach(cleanup);
+
+describe("ArtifactContentBody — file states", () => {
+  it("renders a loading skeleton", () => {
+    render(
+      <ArtifactContentBody
+        artifact={fileArtifact("notes.txt")}
+        content={null}
+        contentType={null}
+        isLoading
+        error={null}
+        isTruncated={false}
+        skillDetection={NOT_SKILL}
+      />,
+    );
+    expect(screen.getByLabelText("Loading content")).toBeTruthy();
+  });
+
+  it("renders an error message", () => {
+    render(
+      <ArtifactContentBody
+        artifact={fileArtifact("notes.txt")}
+        content={null}
+        contentType={null}
+        isLoading={false}
+        error={new Error("boom")}
+        isTruncated={false}
+        skillDetection={NOT_SKILL}
+      />,
+    );
+    expect(screen.getByText("boom")).toBeTruthy();
+  });
+
+  it("renders the binary / unavailable state when content is null and settled", () => {
+    render(
+      <ArtifactContentBody
+        artifact={fileArtifact("image.bin")}
+        content={null}
+        contentType={null}
+        isLoading={false}
+        error={null}
+        isTruncated={false}
+        skillDetection={NOT_SKILL}
+      />,
+    );
+    expect(screen.getByText(/Content not available for preview/)).toBeTruthy();
+  });
+
+  it("renders text content", () => {
+    render(
+      <ArtifactContentBody
+        artifact={fileArtifact("notes.txt")}
+        content={"hello from the artifact"}
+        contentType={"text/plain"}
+        isLoading={false}
+        error={null}
+        isTruncated={false}
+        skillDetection={NOT_SKILL}
+      />,
+    );
+    expect(screen.getByText(/hello from the artifact/)).toBeTruthy();
+  });
+});
+
+describe("ArtifactContentBody — directory state", () => {
+  it("lists directory entries", () => {
+    render(
+      <ArtifactContentBody
+        artifact={dirArtifact("pack", ["SKILL.md", "run.sh"])}
+        content={null}
+        contentType={null}
+        isLoading={false}
+        error={null}
+        isTruncated={false}
+        skillDetection={NOT_SKILL}
+      />,
+    );
+    expect(screen.getByText("Files (2)")).toBeTruthy();
+    expect(screen.getByText("SKILL.md")).toBeTruthy();
+    expect(screen.getByText("run.sh")).toBeTruthy();
+  });
+
+  it("shows the skill banner when a skill package is detected", () => {
+    const detection = {
+      detected: true,
+      skillName: "My Skill",
+      skillDescription: "does things",
+      fileCount: 2,
+    } as unknown as SkillPackageDetection;
+    render(
+      <ArtifactContentBody
+        artifact={dirArtifact("pack", ["SKILL.md"])}
+        content={null}
+        contentType={null}
+        isLoading={false}
+        error={null}
+        isTruncated={false}
+        skillDetection={detection}
+      />,
+    );
+    expect(screen.getByText("My Skill")).toBeTruthy();
+    expect(screen.getByText("does things")).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,100 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, waitFor } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import type { Stigmer } from "@stigmer/sdk";
+import { ExecutionArtifactSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
+import { ExecutionArtifactKind } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { StigmerContext } from "../../context";
+import { ArtifactDocument } from "../ArtifactDocument";
+
+function fileArtifact(name: string) {
+  return create(ExecutionArtifactSchema, {
+    name,
+    kind: ExecutionArtifactKind.FILE,
+    sizeBytes: 64n,
+    storageKey: `artifacts/aex_1/${name}`,
+    contentHash: "hash-1",
+  });
+}
+
+function dirArtifact(name: string) {
+  return create(ExecutionArtifactSchema, {
+    name,
+    kind: ExecutionArtifactKind.DIRECTORY,
+    sizeBytes: 512n,
+    storageKey: `artifacts/aex_1/${name}`,
+    entries: ["a.txt", "b.txt"],
+  });
+}
+
+function stigmerReturning(text: string): Stigmer {
+  return {
+    agentExecution: {
+      getArtifactContent: vi.fn().mockResolvedValue({
+        content: new TextEncoder().encode(text),
+        contentType: "text/plain",
+        truncated: false,
+      }),
+    },
+  } as unknown as Stigmer;
+}
+
+function renderDoc(stigmer: Stigmer, artifact = fileArtifact("notes.txt")) {
+  return render(
+    <StigmerContext.Provider value={stigmer}>
+      <ArtifactDocument
+        artifact={artifact}
+        executionId="aex_1"
+        org="acme"
+        isTerminal
+      />
+    </StigmerContext.Provider>,
+  );
+}
+
+const AGENT_YAML = [
+  "apiVersion: agentic.stigmer.ai/v1",
+  "kind: Agent",
+  "metadata:",
+  "  name: my-agent",
+  "spec: {}",
+  "",
+].join("\n");
+
+afterEach(cleanup);
+
+describe("ArtifactDocument", () => {
+  it("renders the toolbar (name + Download) and the fetched content", async () => {
+    renderDoc(stigmerReturning("hello document"));
+
+    expect(screen.getByRole("article", { name: "Artifact notes.txt" })).toBeTruthy();
+    expect(screen.getByText("notes.txt")).toBeTruthy();
+    expect(screen.getByText("Download")).toBeTruthy();
+    await waitFor(() => expect(screen.getByText(/hello document/)).toBeTruthy());
+    expect(screen.getByText("Copy")).toBeTruthy();
+  });
+
+  it("surfaces resource detection and an Apply CTA for a detected Agent", async () => {
+    renderDoc(stigmerReturning(AGENT_YAML), fileArtifact("agent.yaml"));
+
+    await waitFor(() => expect(screen.getByText("Agent detected")).toBeTruthy());
+    expect(screen.getByText("Apply to acme")).toBeTruthy();
+  });
+
+  it("renders a directory artifact with a Download ZIP action and no Copy", () => {
+    render(
+      <StigmerContext.Provider value={stigmerReturning("")}>
+        <ArtifactDocument
+          artifact={dirArtifact("pack")}
+          executionId="aex_1"
+          org="acme"
+          isTerminal
+        />
+      </StigmerContext.Provider>,
+    );
+
+    expect(screen.getByText("Download ZIP")).toBeTruthy();
+    expect(screen.queryByText("Copy")).toBeNull();
+    expect(screen.getByText("Files (2)")).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,139 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import type { Stigmer } from "@stigmer/sdk";
+import { ExecutionArtifactSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
+import { ExecutionArtifactKind } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { StigmerContext } from "../../context";
+import { ArtifactRow } from "../ArtifactRow";
+
+function fileArtifact(name: string, sandboxPath = `.stigmer/${name}`) {
+  return create(ExecutionArtifactSchema, {
+    name,
+    kind: ExecutionArtifactKind.FILE,
+    sizeBytes: 2048n,
+    sandboxPath,
+    storageKey: `artifacts/aex_1/${name}`,
+  });
+}
+
+function dirArtifact(name: string) {
+  return create(ExecutionArtifactSchema, {
+    name,
+    kind: ExecutionArtifactKind.DIRECTORY,
+    sizeBytes: 4096n,
+    sandboxPath: `.stigmer/${name}`,
+    storageKey: `artifacts/aex_1/${name}`,
+  });
+}
+
+const getArtifactDownloadUrl = vi.fn().mockResolvedValue({ downloadUrl: "" });
+
+function createStigmerMock(): Stigmer {
+  return {
+    agentExecution: { getArtifactDownloadUrl },
+  } as unknown as Stigmer;
+}
+
+function renderRow(props: Partial<Parameters<typeof ArtifactRow>[0]> = {}) {
+  const merged = {
+    artifact: fileArtifact("notes.md"),
+    executionId: "aex_1",
+    onOpen: vi.fn(),
+    ...props,
+  } as Parameters<typeof ArtifactRow>[0];
+  return render(
+    <StigmerContext.Provider value={createStigmerMock()}>
+      <ul>
+        <ArtifactRow {...merged} />
+      </ul>
+    </StigmerContext.Provider>,
+  );
+}
+
+afterEach(() => {
+  cleanup();
+  getArtifactDownloadUrl.mockClear();
+});
+
+describe("ArtifactRow — presentation", () => {
+  it("renders a file-type icon, the name, and the formatted size", () => {
+    renderRow({ artifact: fileArtifact("notes.md") });
+    const open = screen.getByText("notes.md").closest("button")!;
+    expect(open.querySelector("svg")).toBeTruthy();
+    expect(screen.getByText("2.0 KB")).toBeTruthy();
+  });
+
+  it("appends a trailing slash for a directory artifact", () => {
+    renderRow({ artifact: dirArtifact("return-policy") });
+    // The name span's own text is "return-policy" + "/".
+    expect(screen.getByText("return-policy/")).toBeTruthy();
+  });
+
+  it("shows the parent-directory subtitle only on a name collision", () => {
+    const artifact = fileArtifact("agent.yaml", "/workspace/configs/agent.yaml");
+    const { rerender } = renderRow({ artifact, hasNameCollision: true });
+    expect(screen.getByText("configs/")).toBeTruthy();
+
+    rerender(
+      <StigmerContext.Provider value={createStigmerMock()}>
+        <ul>
+          <ArtifactRow artifact={artifact} executionId="aex_1" onOpen={vi.fn()} />
+        </ul>
+      </StigmerContext.Provider>,
+    );
+    expect(screen.queryByText("configs/")).toBeNull();
+  });
+});
+
+describe("ArtifactRow — nested-interactive avoidance (DD-22)", () => {
+  it("renders the Download control as a SIBLING of the open button, never nested", () => {
+    renderRow({ artifact: fileArtifact("notes.md") });
+    const open = screen.getByText("notes.md").closest("button")!;
+    const download = screen.getByLabelText("Download notes.md");
+    expect(download.tagName).toBe("BUTTON");
+    // A <button> inside a <button> is a WCAG 4.1.2 nested-interactive violation.
+    expect(open.contains(download)).toBe(false);
+  });
+});
+
+describe("ArtifactRow — open / activate interaction (file-tree parity)", () => {
+  it("fires onOpen on a single click of the open target", () => {
+    const onOpen = vi.fn();
+    renderRow({ onOpen });
+    fireEvent.click(screen.getByText("notes.md"));
+    expect(onOpen).toHaveBeenCalledTimes(1);
+  });
+
+  it("fires onActivate on a double-click when provided", () => {
+    const onActivate = vi.fn();
+    renderRow({ onActivate });
+    fireEvent.doubleClick(screen.getByText("notes.md"));
+    expect(onActivate).toHaveBeenCalledTimes(1);
+  });
+
+  it("binds no double-click handler when onActivate is omitted (harmless)", () => {
+    const onOpen = vi.fn();
+    renderRow({ onOpen });
+    // With no onActivate, a dblclick fires nothing (onOpen only responds to click).
+    fireEvent.doubleClick(screen.getByText("notes.md"));
+    expect(onOpen).not.toHaveBeenCalled();
+  });
+});
+
+describe("ArtifactRow — download", () => {
+  it("mints a download URL for the artifact's storage key on Download click", () => {
+    renderRow({ artifact: fileArtifact("notes.md") });
+    fireEvent.click(screen.getByLabelText("Download notes.md"));
+    expect(getArtifactDownloadUrl).toHaveBeenCalledTimes(1);
+    expect(getArtifactDownloadUrl.mock.calls[0][0]).toMatchObject({
+      executionId: "aex_1",
+      storageKey: "artifacts/aex_1/notes.md",
+    });
+  });
+
+  it("labels the Download control 'Download ZIP' for a directory", () => {
+    renderRow({ artifact: dirArtifact("return-policy") });
+    expect(screen.getByTitle("Download ZIP")).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,78 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import type { Stigmer } from "@stigmer/sdk";
+import { AgentExecutionSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
+import { ExecutionArtifactSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
+import {
+  ExecutionArtifactKind,
+  ExecutionPhase,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { StigmerContext } from "../../context";
+import { ArtifactsWidget } from "../ArtifactsWidget";
+
+function artifact(name: string) {
+  return create(ExecutionArtifactSchema, {
+    name,
+    kind: ExecutionArtifactKind.FILE,
+    sizeBytes: 1024n,
+    sandboxPath: `.stigmer/${name}`,
+    storageKey: `artifacts/aex_1/${name}`,
+  });
+}
+
+const execution = create(AgentExecutionSchema, {
+  metadata: { id: "aex_1" },
+  status: {
+    phase: ExecutionPhase.EXECUTION_COMPLETED,
+    artifacts: [artifact("agent.yaml"), artifact("notes.md")],
+  },
+});
+
+/** Modal content fetch — keep pending so nothing rejects during the test. */
+function createStigmerMock(): Stigmer {
+  return {
+    agentExecution: {
+      getArtifactContent: vi.fn().mockReturnValue(new Promise(() => {})),
+      getArtifactDownloadUrl: vi.fn().mockResolvedValue({ downloadUrl: "" }),
+    },
+  } as unknown as Stigmer;
+}
+
+function renderWidget(executions = [execution]) {
+  return render(
+    <StigmerContext.Provider value={createStigmerMock()}>
+      <ArtifactsWidget executions={executions} org="acme" />
+    </StigmerContext.Provider>,
+  );
+}
+
+afterEach(cleanup);
+
+describe("ArtifactsWidget — dense list (panel-less)", () => {
+  it("renders nothing when there are no artifacts", () => {
+    const { container } = renderWidget([]);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders a heading, count, and one dense row per artifact (no ArtifactCard chrome)", () => {
+    renderWidget();
+    expect(screen.getByRole("heading", { name: "Artifacts" })).toBeTruthy();
+    // Count badge reflects the two deduped artifacts.
+    expect(screen.getByText("2")).toBeTruthy();
+    expect(screen.getAllByRole("listitem")).toHaveLength(2);
+    expect(screen.getByText("agent.yaml")).toBeTruthy();
+    expect(screen.getByText("notes.md")).toBeTruthy();
+    // The retired ArtifactCard rendered a "Preview" button and role="article".
+    expect(screen.queryByText("Preview")).toBeNull();
+    expect(screen.queryByRole("article")).toBeNull();
+    expect(screen.getByLabelText("Download agent.yaml")).toBeTruthy();
+  });
+
+  it("opens the preview modal (the panel-less fallback) on a row click", () => {
+    renderWidget();
+    expect(document.querySelector("dialog")).toBeNull();
+    fireEvent.click(screen.getByText("notes.md"));
+    expect(document.querySelector("dialog")).toBeTruthy();
+  });
+});

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

@@ -1,9 +1,22 @@
-import { describe, it, expect, afterEach } from "vitest";
-import { render, cleanup } from "@testing-library/react";
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { render, cleanup, waitFor } from "@testing-library/react";
 import { create } from "@bufbuild/protobuf";
 import { AgentMessageSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
 import { MessageType } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import { MessageEntry } from "../MessageEntry";
+import type { MermaidModule } from "../../internal/mermaid-loader";
+
+// Stub only the library loader: the real MermaidDiagram + markdown overrides
+// run end-to-end through Streamdown, so these tests cover the full chat path
+// from fenced source to rendered diagram.
+vi.mock("../../internal/mermaid-loader", () => ({
+  loadMermaid: vi.fn().mockResolvedValue({
+    initialize: vi.fn(),
+    render: vi
+      .fn()
+      .mockResolvedValue({ svg: "<svg data-testid='mermaid-svg'></svg>" }),
+  } as unknown as MermaidModule),
+}));
 
 afterEach(cleanup);
 
@@ -169,6 +182,41 @@ describe("MessageEntry — AI messages (Streamdown)", () => {
       article!.querySelectorAll('span[class*="hljs-"]').length,
     ).toBeGreaterThan(0);
   });
+
+  it("renders a completed ```mermaid fence as a diagram, not a code block", async () => {
+    const msg = makeMessage(
+      MessageType.MESSAGE_AI,
+      "Here is the flow:\n\n```mermaid\nflowchart LR\n  A --> B\n```",
+    );
+    const { container } = render(<MessageEntry message={msg} />);
+
+    const article = queryArticle(container, "AI response");
+    await waitFor(() =>
+      expect(
+        article!.querySelector('[role="img"][aria-label="Mermaid diagram"]'),
+      ).not.toBeNull(),
+    );
+    expect(article!.querySelector("[data-testid='mermaid-svg']")).not.toBeNull();
+    // The fenced source is no longer shown as a code block.
+    expect(article!.querySelector("pre")).toBeNull();
+  });
+
+  it("keeps an unclosed ```mermaid fence as a code block while streaming", () => {
+    const msg = makeMessage(
+      MessageType.MESSAGE_AI,
+      "```mermaid\nflowchart LR\n  A --> B",
+      { isStreaming: true },
+    );
+    const { container } = render(<MessageEntry message={msg} />);
+
+    const article = queryArticle(container, "AI response");
+    // Mid-stream the source stays a plain code block — no diagram, and no
+    // half-parsed error flashing.
+    expect(
+      article!.querySelector('[role="img"][aria-label="Mermaid diagram"]'),
+    ).toBeNull();
+    expect(article!.textContent).toContain("flowchart LR");
+  });
 });
 
 // ---------------------------------------------------------------------------