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

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>;
 
@@ -26,6 +29,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.
  *
@@ -127,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>
       );
     }

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);
   });

package/src/styles.css

@@ -186,3 +186,91 @@
     }
   }
 }
+
+@layer stgm {
+  /* Syntax highlighting for fenced code blocks (issue #183).
+     lowlight (highlight.js) emits these `hljs-*` token classes; we map each
+     onto a shared `--stgm-syntax-*` theme token so highlighted code tracks the
+     host's preset and color-mode with zero hardcoded colors — the same token
+     contract the CodeMirror YAML editor uses. Scoped to `.stgm` so nothing
+     leaks into the host application. */
+  .stgm .hljs {
+    color: var(--stgm-foreground);
+  }
+
+  .stgm .hljs-comment,
+  .stgm .hljs-quote {
+    color: var(--stgm-syntax-comment);
+    font-style: italic;
+  }
+
+  .stgm .hljs-keyword,
+  .stgm .hljs-selector-tag,
+  .stgm .hljs-subst {
+    color: var(--stgm-syntax-keyword);
+  }
+
+  .stgm .hljs-literal,
+  .stgm .hljs-symbol,
+  .stgm .hljs-bullet {
+    color: var(--stgm-syntax-bool);
+  }
+
+  .stgm .hljs-string,
+  .stgm .hljs-regexp,
+  .stgm .hljs-addition,
+  .stgm .hljs-template-tag,
+  .stgm .hljs-template-variable,
+  .stgm .hljs-meta .hljs-string {
+    color: var(--stgm-syntax-string);
+  }
+
+  .stgm .hljs-number {
+    color: var(--stgm-syntax-number);
+  }
+
+  .stgm .hljs-title,
+  .stgm .hljs-title.function_,
+  .stgm .hljs-title.class_,
+  .stgm .hljs-section,
+  .stgm .hljs-built_in,
+  .stgm .hljs-type {
+    color: var(--stgm-syntax-property);
+  }
+
+  .stgm .hljs-attr,
+  .stgm .hljs-attribute,
+  .stgm .hljs-property,
+  .stgm .hljs-variable,
+  .stgm .hljs-params,
+  .stgm .hljs-selector-attr,
+  .stgm .hljs-selector-pseudo,
+  .stgm .hljs-selector-class,
+  .stgm .hljs-selector-id {
+    color: var(--stgm-syntax-property);
+  }
+
+  .stgm .hljs-tag,
+  .stgm .hljs-name {
+    color: var(--stgm-syntax-tag);
+  }
+
+  .stgm .hljs-meta,
+  .stgm .hljs-meta .hljs-keyword,
+  .stgm .hljs-doctag {
+    color: var(--stgm-syntax-meta);
+  }
+
+  .stgm .hljs-link,
+  .stgm .hljs-deletion {
+    color: var(--stgm-syntax-atom);
+  }
+
+  .stgm .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .stgm .hljs-strong {
+    font-weight: 600;
+  }
+}