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

package/internal/code-highlight.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from "react";
+/**
+ * Resolves a fence info-string to a registered highlight.js language name, or
+ * `null` when no grammar is registered for it (the caller then renders the code
+ * flat). Case-insensitive and whitespace-tolerant; never guesses.
+ *
+ * @param language - The raw language from a `language-*` class (e.g. `"go"`).
+ * @returns The normalized, registered language name, or `null`.
+ */
+export declare function resolveLanguage(language: string | undefined): string | null;
+/**
+ * Highlights `code` for the given fence `language` and returns themed React
+ * nodes — token `<span>`s carrying `hljs-*` classes that `styles.css` maps to
+ * `--stgm-syntax-*`.
+ *
+ * Returns `null` (so the caller can fall back to flat rendering) when the
+ * language has no registered grammar or tokenization throws. Highlighting is
+ * synchronous: there is no loading state to handle.
+ *
+ * @param code - The raw source text of the fenced block.
+ * @param language - The fence language (e.g. `"ts"`); unknown → `null`.
+ */
+export declare function highlightToReact(code: string, language: string | undefined): ReactNode | null;
+//# sourceMappingURL=code-highlight.d.ts.map

package/internal/code-highlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-highlight.d.ts","sourceRoot":"","sources":["../../src/internal/code-highlight.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAkFjD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAI3E;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,GAAG,SAAS,GAC3B,SAAS,GAAG,IAAI,CAQlB"}

package/internal/code-highlight.js

@@ -0,0 +1,115 @@
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createLowlight } from "lowlight";
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+// Dependency licensing (DD-012): `lowlight` and `hast-util-to-jsx-runtime` are
+// MIT; `highlight.js` is BSD-3-Clause. BSD-3-Clause is a permissive, OSI-approved
+// license, compatible with MIT/Apache-2.0, that imposes no obligations on SDK
+// consumers beyond attribution — so it satisfies DD-012's "MIT or Apache-2.0
+// compatible" rule. Recorded here so the choice is auditable at the point of use.
+import bash from "highlight.js/lib/languages/bash";
+import css from "highlight.js/lib/languages/css";
+import dockerfile from "highlight.js/lib/languages/dockerfile";
+import go from "highlight.js/lib/languages/go";
+import java from "highlight.js/lib/languages/java";
+import javascript from "highlight.js/lib/languages/javascript";
+import json from "highlight.js/lib/languages/json";
+import markdown from "highlight.js/lib/languages/markdown";
+import python from "highlight.js/lib/languages/python";
+import rust from "highlight.js/lib/languages/rust";
+import sql from "highlight.js/lib/languages/sql";
+import typescript from "highlight.js/lib/languages/typescript";
+import xml from "highlight.js/lib/languages/xml";
+import yaml from "highlight.js/lib/languages/yaml";
+/**
+ * Syntax highlighter for fenced code blocks in SDK markdown surfaces.
+ *
+ * This is the single highlighting engine behind the shared `code` override in
+ * {@link file://./markdown-components.tsx} — so chat (Streamdown) and the
+ * artifact/skill viewers (react-markdown) colorize code identically.
+ *
+ * The engine emits highlight.js token classes (`hljs-keyword`, `hljs-string`,
+ * …) which `styles.css` maps onto the `--stgm-syntax-*` theme tokens. Colors
+ * are therefore 100% token-driven: they track the host's preset and color-mode
+ * with no hardcoded values, exactly like the CodeMirror YAML editor.
+ *
+ * **Eager, not lazy.** Highlighting is on the core path (almost every
+ * `SessionViewer` consumer renders agent messages containing code), so DD-013's
+ * lazy pattern (for rarely-used heavy deps) does not apply. The grammars are
+ * imported eagerly; because this module is only reachable through the markdown
+ * components, normal tree-shaking still keeps it out of bundles that never
+ * render markdown.
+ *
+ * **Curated grammar set.** Only the languages agents commonly emit are
+ * registered, to keep the payload small. Anything else falls back to flat
+ * rendering (see {@link resolveLanguage}) — a deterministic choice, never
+ * highlight.js auto-detection, consistent with this codebase's avoidance of
+ * fuzzy heuristics.
+ */
+const lowlight = createLowlight({
+    bash,
+    css,
+    dockerfile,
+    go,
+    java,
+    javascript,
+    json,
+    markdown,
+    python,
+    rust,
+    sql,
+    typescript,
+    xml,
+    yaml,
+});
+// Fence info-strings agents use that aren't already registered as grammar
+// aliases by highlight.js. `xml` is highlight.js's grammar for HTML markup.
+lowlight.registerAlias({
+    bash: ["sh", "shell", "zsh", "console"],
+    dockerfile: ["docker"],
+    javascript: ["js", "jsx", "mjs", "cjs"],
+    markdown: ["md"],
+    python: ["py"],
+    typescript: ["ts", "tsx"],
+    xml: ["html"],
+    yaml: ["yml"],
+});
+const jsxRuntime = { Fragment, jsx, jsxs };
+/**
+ * Resolves a fence info-string to a registered highlight.js language name, or
+ * `null` when no grammar is registered for it (the caller then renders the code
+ * flat). Case-insensitive and whitespace-tolerant; never guesses.
+ *
+ * @param language - The raw language from a `language-*` class (e.g. `"go"`).
+ * @returns The normalized, registered language name, or `null`.
+ */
+export function resolveLanguage(language) {
+    if (!language)
+        return null;
+    const name = language.trim().toLowerCase();
+    return name && lowlight.registered(name) ? name : null;
+}
+/**
+ * Highlights `code` for the given fence `language` and returns themed React
+ * nodes — token `<span>`s carrying `hljs-*` classes that `styles.css` maps to
+ * `--stgm-syntax-*`.
+ *
+ * Returns `null` (so the caller can fall back to flat rendering) when the
+ * language has no registered grammar or tokenization throws. Highlighting is
+ * synchronous: there is no loading state to handle.
+ *
+ * @param code - The raw source text of the fenced block.
+ * @param language - The fence language (e.g. `"ts"`); unknown → `null`.
+ */
+export function highlightToReact(code, language) {
+    const resolved = resolveLanguage(language);
+    if (resolved === null)
+        return null;
+    try {
+        return toJsxRuntime(lowlight.highlight(resolved, code), jsxRuntime);
+    }
+    catch {
+        return null;
+    }
+}
+//# sourceMappingURL=code-highlight.js.map

package/internal/code-highlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-highlight.js","sourceRoot":"","sources":["../../src/internal/code-highlight.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,+EAA+E;AAC/E,kFAAkF;AAClF,8EAA8E;AAC9E,6EAA6E;AAC7E,kFAAkF;AAClF,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,GAAG,MAAM,gCAAgC,CAAC;AACjD,OAAO,UAAU,MAAM,uCAAuC,CAAC;AAC/D,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAC/C,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,UAAU,MAAM,uCAAuC,CAAC;AAC/D,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,QAAQ,MAAM,qCAAqC,CAAC;AAC3D,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,GAAG,MAAM,gCAAgC,CAAC;AACjD,OAAO,UAAU,MAAM,uCAAuC,CAAC;AAC/D,OAAO,GAAG,MAAM,gCAAgC,CAAC;AACjD,OAAO,IAAI,MAAM,iCAAiC,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,IAAI;IACJ,GAAG;IACH,UAAU;IACV,EAAE;IACF,IAAI;IACJ,UAAU;IACV,IAAI;IACJ,QAAQ;IACR,MAAM;IACN,IAAI;IACJ,GAAG;IACH,UAAU;IACV,GAAG;IACH,IAAI;CACL,CAAC,CAAC;AAEH,0EAA0E;AAC1E,4EAA4E;AAC5E,QAAQ,CAAC,aAAa,CAAC;IACrB,IAAI,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,CAAC;IACvC,UAAU,EAAE,CAAC,QAAQ,CAAC;IACtB,UAAU,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;IACvC,QAAQ,EAAE,CAAC,IAAI,CAAC;IAChB,MAAM,EAAE,CAAC,IAAI,CAAC;IACd,UAAU,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC;IACzB,GAAG,EAAE,CAAC,MAAM,CAAC;IACb,IAAI,EAAE,CAAC,KAAK,CAAC;CACd,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAW,CAAC;AAEpD;;;;;;;GAOG;AACH,MAAM,UAAU,eAAe,CAAC,QAA4B;IAC1D,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAC3B,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IAC3C,OAAO,IAAI,IAAI,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;AACzD,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,gBAAgB,CAC9B,IAAY,EACZ,QAA4B;IAE5B,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC3C,IAAI,QAAQ,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IACnC,IAAI,CAAC;QACH,OAAO,YAAY,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;IACtE,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC"}

package/internal/markdown-components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-components.d.ts","sourceRoot":"","sources":["../../src/internal/markdown-components.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC;;;GAGG;AACH,eAAO,MAAM,cAAc,sBAAc,CAAC;AAI1C;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAExD;AAgBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAGpE;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,EAAE,UA8KjC,CAAC"}
+{"version":3,"file":"markdown-components.d.ts","sourceRoot":"","sources":["../../src/internal/markdown-components.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,SAAS,MAAM,YAAY,CAAC;AAQnC;;;GAGG;AACH,eAAO,MAAM,cAAc,sBAAc,CAAC;AAI1C;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAExD;AAgBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAGpE;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,EAAE,UA4LjC,CAAC"}

package/internal/markdown-components.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import remarkGfm from "remark-gfm";
 import { cn } from "@stigmer/theme";
+import { highlightToReact } from "./code-highlight";
+const LANGUAGE_CLASS_PREFIX = "language-";
 /**
  * Remark plugins applied to all SDK markdown surfaces.
  * Includes GFM (tables, strikethrough, autolinks, task lists).
@@ -93,9 +95,18 @@ export const MARKDOWN_COMPONENTS = {
         return (_jsx("pre", { className: "mb-3 last:mb-0 overflow-x-auto rounded-md bg-muted p-3", ...props, children: children }));
     },
     code({ children, className: codeClassName, ...props }) {
-        const isBlock = typeof codeClassName === "string" && codeClassName.startsWith("language-");
+        const isBlock = typeof codeClassName === "string" &&
+            codeClassName.startsWith(LANGUAGE_CLASS_PREFIX);
         if (isBlock) {
-            return (_jsx("code", { className: cn("font-mono text-xs text-foreground", codeClassName), ...props, children: children }));
+            // Tokenize here, in the one component both renderers (Streamdown for
+            // chat, react-markdown for artifacts/skills) share, so highlighting is
+            // identical everywhere. Highlight only plain-string children — anything
+            // else (e.g. a streaming caret node) falls back to flat rendering.
+            const language = codeClassName.slice(LANGUAGE_CLASS_PREFIX.length);
+            const highlighted = typeof children === "string"
+                ? highlightToReact(children, language)
+                : null;
+            return (_jsx("code", { className: cn("hljs font-mono text-xs text-foreground", codeClassName), ...props, children: highlighted ?? children }));
         }
         return (_jsx("code", { className: "font-mono text-xs bg-muted px-1 py-0.5 rounded text-foreground", ...props, children: children }));
     },

package/internal/markdown-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-components.js","sourceRoot":"","sources":["../../src/internal/markdown-components.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"markdown-components.js","sourceRoot":"","sources":["../../src/internal/markdown-components.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stigmer/react",
-  "version": "3.0.9-dev.20260615153829",
+  "version": "3.0.9-dev.20260616060535",
   "description": "React provider and client hook for the Stigmer platform SDK",
   "license": "Apache-2.0",
   "type": "module",
@@ -37,9 +37,12 @@
   "dependencies": {
     "@bufbuild/protovalidate": "^1.1.1",
     "@dagrejs/dagre": "^1.1.4",
-    "@stigmer/theme": "3.0.9-dev.20260615153829",
+    "@stigmer/theme": "3.0.9-dev.20260616060535",
     "diff": "^8.0.3",
     "fflate": "^0.8.2",
+    "hast-util-to-jsx-runtime": "^2.3.6",
+    "highlight.js": "^11.11.1",
+    "lowlight": "^3.3.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.0",
@@ -57,8 +60,8 @@
     "@codemirror/state": "^6.0.0",
     "@codemirror/view": "^6.0.0",
     "@lezer/highlight": "^1.0.0",
-    "@stigmer/protos": "3.0.9-dev.20260615153829",
-    "@stigmer/sdk": "3.0.9-dev.20260615153829",
+    "@stigmer/protos": "3.0.9-dev.20260616060535",
+    "@stigmer/sdk": "3.0.9-dev.20260616060535",
     "@tanstack/react-table": "^8.20.0",
     "@xyflow/react": "^12.0.0",
     "elkjs": "^0.9.0",

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

@@ -44,4 +44,19 @@ describe("ArtifactContentRenderer — markdown", () => {
     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__/message-entry.test.tsx

@@ -153,6 +153,22 @@ describe("MessageEntry — AI messages (Streamdown)", () => {
     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/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

@@ -1,5 +1,18 @@
-import { describe, it, expect } from "vitest";
-import { unwrapEnclosingMarkdownFence } from "../markdown-components";
+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", () => {
@@ -51,3 +64,56 @@ describe("unwrapEnclosingMarkdownFence", () => {
     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");
+  });
+});

package/src/internal/code-highlight.tsx

@@ -0,0 +1,120 @@
+import { Fragment, type ReactNode } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createLowlight } from "lowlight";
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+
+// Dependency licensing (DD-012): `lowlight` and `hast-util-to-jsx-runtime` are
+// MIT; `highlight.js` is BSD-3-Clause. BSD-3-Clause is a permissive, OSI-approved
+// license, compatible with MIT/Apache-2.0, that imposes no obligations on SDK
+// consumers beyond attribution — so it satisfies DD-012's "MIT or Apache-2.0
+// compatible" rule. Recorded here so the choice is auditable at the point of use.
+import bash from "highlight.js/lib/languages/bash";
+import css from "highlight.js/lib/languages/css";
+import dockerfile from "highlight.js/lib/languages/dockerfile";
+import go from "highlight.js/lib/languages/go";
+import java from "highlight.js/lib/languages/java";
+import javascript from "highlight.js/lib/languages/javascript";
+import json from "highlight.js/lib/languages/json";
+import markdown from "highlight.js/lib/languages/markdown";
+import python from "highlight.js/lib/languages/python";
+import rust from "highlight.js/lib/languages/rust";
+import sql from "highlight.js/lib/languages/sql";
+import typescript from "highlight.js/lib/languages/typescript";
+import xml from "highlight.js/lib/languages/xml";
+import yaml from "highlight.js/lib/languages/yaml";
+
+/**
+ * Syntax highlighter for fenced code blocks in SDK markdown surfaces.
+ *
+ * This is the single highlighting engine behind the shared `code` override in
+ * {@link file://./markdown-components.tsx} — so chat (Streamdown) and the
+ * artifact/skill viewers (react-markdown) colorize code identically.
+ *
+ * The engine emits highlight.js token classes (`hljs-keyword`, `hljs-string`,
+ * …) which `styles.css` maps onto the `--stgm-syntax-*` theme tokens. Colors
+ * are therefore 100% token-driven: they track the host's preset and color-mode
+ * with no hardcoded values, exactly like the CodeMirror YAML editor.
+ *
+ * **Eager, not lazy.** Highlighting is on the core path (almost every
+ * `SessionViewer` consumer renders agent messages containing code), so DD-013's
+ * lazy pattern (for rarely-used heavy deps) does not apply. The grammars are
+ * imported eagerly; because this module is only reachable through the markdown
+ * components, normal tree-shaking still keeps it out of bundles that never
+ * render markdown.
+ *
+ * **Curated grammar set.** Only the languages agents commonly emit are
+ * registered, to keep the payload small. Anything else falls back to flat
+ * rendering (see {@link resolveLanguage}) — a deterministic choice, never
+ * highlight.js auto-detection, consistent with this codebase's avoidance of
+ * fuzzy heuristics.
+ */
+const lowlight = createLowlight({
+  bash,
+  css,
+  dockerfile,
+  go,
+  java,
+  javascript,
+  json,
+  markdown,
+  python,
+  rust,
+  sql,
+  typescript,
+  xml,
+  yaml,
+});
+
+// Fence info-strings agents use that aren't already registered as grammar
+// aliases by highlight.js. `xml` is highlight.js's grammar for HTML markup.
+lowlight.registerAlias({
+  bash: ["sh", "shell", "zsh", "console"],
+  dockerfile: ["docker"],
+  javascript: ["js", "jsx", "mjs", "cjs"],
+  markdown: ["md"],
+  python: ["py"],
+  typescript: ["ts", "tsx"],
+  xml: ["html"],
+  yaml: ["yml"],
+});
+
+const jsxRuntime = { Fragment, jsx, jsxs } as const;
+
+/**
+ * Resolves a fence info-string to a registered highlight.js language name, or
+ * `null` when no grammar is registered for it (the caller then renders the code
+ * flat). Case-insensitive and whitespace-tolerant; never guesses.
+ *
+ * @param language - The raw language from a `language-*` class (e.g. `"go"`).
+ * @returns The normalized, registered language name, or `null`.
+ */
+export function resolveLanguage(language: string | undefined): string | null {
+  if (!language) return null;
+  const name = language.trim().toLowerCase();
+  return name && lowlight.registered(name) ? name : null;
+}
+
+/**
+ * Highlights `code` for the given fence `language` and returns themed React
+ * nodes — token `<span>`s carrying `hljs-*` classes that `styles.css` maps to
+ * `--stgm-syntax-*`.
+ *
+ * Returns `null` (so the caller can fall back to flat rendering) when the
+ * language has no registered grammar or tokenization throws. Highlighting is
+ * synchronous: there is no loading state to handle.
+ *
+ * @param code - The raw source text of the fenced block.
+ * @param language - The fence language (e.g. `"ts"`); unknown → `null`.
+ */
+export function highlightToReact(
+  code: string,
+  language: string | undefined,
+): ReactNode | null {
+  const resolved = resolveLanguage(language);
+  if (resolved === null) return null;
+  try {
+    return toJsxRuntime(lowlight.highlight(resolved, code), jsxRuntime);
+  } catch {
+    return null;
+  }
+}

package/src/internal/markdown-components.tsx

@@ -2,6 +2,9 @@ import type { ComponentProps, JSX } from "react";
 import type { Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { cn } from "@stigmer/theme";
+import { highlightToReact } from "./code-highlight";
+
+const LANGUAGE_CLASS_PREFIX = "language-";
 
 type MdProps<T extends keyof JSX.IntrinsicElements> = ComponentProps<T>;
 
@@ -163,15 +166,29 @@ export const MARKDOWN_COMPONENTS: Components = {
 
   code({ children, className: codeClassName, ...props }: MdProps<"code">) {
     const isBlock =
-      typeof codeClassName === "string" && codeClassName.startsWith("language-");
+      typeof codeClassName === "string" &&
+      codeClassName.startsWith(LANGUAGE_CLASS_PREFIX);
 
     if (isBlock) {
+      // Tokenize here, in the one component both renderers (Streamdown for
+      // chat, react-markdown for artifacts/skills) share, so highlighting is
+      // identical everywhere. Highlight only plain-string children — anything
+      // else (e.g. a streaming caret node) falls back to flat rendering.
+      const language = codeClassName.slice(LANGUAGE_CLASS_PREFIX.length);
+      const highlighted =
+        typeof children === "string"
+          ? highlightToReact(children, language)
+          : null;
+
       return (
         <code
-          className={cn("font-mono text-xs text-foreground", codeClassName)}
+          className={cn(
+            "hljs font-mono text-xs text-foreground",
+            codeClassName,
+          )}
           {...props}
         >
-          {children}
+          {highlighted ?? children}
         </code>
       );
     }