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

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

@@ -15,6 +15,24 @@ export declare const REMARK_PLUGINS: (typeof remarkGfm)[];
  * removes it before rendering.
  */
 export declare function stripFrontmatter(content: string): string;
+/**
+ * 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 declare function unwrapEnclosingMarkdownFence(content: string): string;
 /**
  * Styled react-markdown component overrides for SDK markdown surfaces.
  *

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;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).
@@ -19,6 +21,39 @@ const FRONTMATTER_RE = /^---\r?\n[\s\S]*?\r?\n---\r?\n?/;
 export function stripFrontmatter(content) {
     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) {
+    const match = ENCLOSING_MARKDOWN_FENCE_RE.exec(content.trim());
+    return match ? match[2] : content;
+}
 /**
  * Styled react-markdown component overrides for SDK markdown surfaces.
  *
@@ -60,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.20260615150714",
+  "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.20260615150714",
+    "@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.20260615150714",
-    "@stigmer/sdk": "3.0.9-dev.20260615150714",
+    "@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/ArtifactContentRenderer.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { useState, type ReactNode } from "react";
+import { useMemo, useState, type ReactNode } from "react";
 import Markdown from "react-markdown";
 import { cn } from "@stigmer/theme";
 import {
   MARKDOWN_COMPONENTS,
   REMARK_PLUGINS,
+  unwrapEnclosingMarkdownFence,
 } from "../internal/markdown-components";
 import {
   getArtifactRenderMode,
@@ -105,6 +106,14 @@ type MarkdownTab = "rendered" | "source";
 function MarkdownView({ content }: { readonly content: string }) {
   const [tab, setTab] = useState<MarkdownTab>("rendered");
 
+  // A `.md` whose entire body is one ```markdown fence (e.g. a model-wrapped
+  // plan) would render flat. Unwrap for the Rendered view only — Source stays
+  // byte-faithful to the stored artifact.
+  const rendered = useMemo(
+    () => unwrapEnclosingMarkdownFence(content),
+    [content],
+  );
+
   return (
     <div>
       <div className="flex items-center border-b border-border px-4 py-1.5">
@@ -132,7 +141,7 @@ function MarkdownView({ content }: { readonly content: string }) {
             remarkPlugins={REMARK_PLUGINS}
             components={MARKDOWN_COMPONENTS}
           >
-            {content}
+            {rendered}
           </Markdown>
         </div>
       ) : (

package/src/execution/ArtifactPreviewModal.tsx

@@ -46,7 +46,7 @@ export interface ArtifactPreviewContentProps {
    */
   readonly onApplied?: (result: ApplyResourceResult) => void;
   /**
-   * Optional "Implement" action. When provided, an Implement primary
+   * Optional plan-build action. When provided, a "Build from plan" primary
    * button appears in the action bar (used for plan artifacts: turn the
    * plan into an Agent run). Clicking it calls `onImplement` then closes
    * the modal. Omit for non-actionable artifacts.
@@ -227,9 +227,9 @@ export function ArtifactPreviewContent({
     ctaLabel = `Push Skill to ${org}`;
   }
 
-  // Implement runs the plan; closing the modal lets the host's submit pipeline
-  // take over (switch to Agent + send). Single combined handler keeps the
-  // caller's contract simple ("just give me onImplement").
+  // "Build from plan" runs the plan; closing the modal lets the host's submit
+  // pipeline take over (switch to Agent + send). Single combined handler keeps
+  // the caller's contract simple ("just give me onImplement").
   const handleImplement = useCallback(() => {
     onImplement?.();
     onClose();
@@ -326,8 +326,8 @@ export interface ArtifactPreviewModalProps {
    */
   readonly onApplied?: (result: ApplyResourceResult) => void;
   /**
-   * Optional "Implement" action (see {@link ArtifactPreviewContentProps.onImplement}).
-   * When provided, an Implement primary button appears; clicking it calls
+   * Optional plan-build action (see {@link ArtifactPreviewContentProps.onImplement}).
+   * When provided, a "Build from plan" primary button appears; clicking it calls
    * `onImplement` then closes the modal.
    */
   readonly onImplement?: () => void;
@@ -695,7 +695,7 @@ function ActionBar({
             )}
           >
             <ImplementIcon />
-            Implement
+            Build from plan
           </button>
         )}
         {applyResult ? (

package/src/execution/MessageEntry.tsx

@@ -1,11 +1,14 @@
 "use client";
 
-import { memo, useState } from "react";
+import { memo, useMemo, useState } from "react";
 import { Streamdown } from "streamdown";
 import type { AgentMessage } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
 import { MessageType } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import { cn } from "@stigmer/theme";
-import { MARKDOWN_COMPONENTS } from "../internal/markdown-components";
+import {
+  MARKDOWN_COMPONENTS,
+  unwrapEnclosingMarkdownFence,
+} from "../internal/markdown-components";
 import { useRenderTracer } from "../internal/dev";
 
 /** Props for {@link MessageEntry}. */
@@ -160,6 +163,14 @@ function AiMessage({
 }) {
   useRenderTracer("AiMessage", { contentLength: content.length, isStreaming });
 
+  // A model that wraps its whole reply in a ```markdown fence (Plan-mode plans
+  // most often) would otherwise render as one flat code block. Unwrap it here,
+  // at the render seam, so the transcript stays faithful to what the agent sent.
+  const markdown = useMemo(
+    () => unwrapEnclosingMarkdownFence(content),
+    [content],
+  );
+
   return (
     <div
       role="article"
@@ -173,7 +184,7 @@ function AiMessage({
           isAnimating={isStreaming}
           caret="block"
         >
-          {content}
+          {markdown}
         </Streamdown>
       </div>
     </div>

package/src/execution/PlanArtifactCard.tsx

@@ -5,6 +5,7 @@ import { cn } from "@stigmer/theme";
 import type { ExecutionArtifact } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
 import { ArtifactPreviewModal } from "./ArtifactPreviewModal";
 import { formatArtifactSize } from "./artifact-utils";
+import { useBuildFromPlanHotkey } from "./use-build-from-plan-hotkey";
 
 /** Props for {@link PlanArtifactCard}. */
 export interface PlanArtifactCardProps {
@@ -13,30 +14,41 @@ export interface PlanArtifactCardProps {
   /** The published `plan.md` artifact (from `findPlanArtifact`). */
   readonly artifact: ExecutionArtifact;
   /**
-   * Organization slug. Required for the "Review plan" modal (the shared
-   * {@link ArtifactPreviewModal} uses it for its detection/apply pipeline).
-   * When omitted, the Review action is hidden — Implement and Download remain.
+   * Organization slug. Required for the "Open full" modal (the shared
+   * {@link ArtifactPreviewModal} uses it for its detection/apply pipeline and
+   * to fetch the content). When omitted, "Open full" is hidden — the prominent
+   * "Build from plan" action and "Download" remain.
    */
   readonly org?: string;
-  /** Called when the user clicks "Implement". Hidden when omitted. */
+  /** Called when the user clicks "Build from plan". Hidden when omitted. */
   readonly onImplement?: () => void;
-  /** Disables the Implement CTA (e.g., while an execution is active). */
+  /** Disables the primary CTA (e.g., while an execution is active). */
   readonly disabled?: boolean;
   /** Additional CSS classes for the root element. */
   readonly className?: string;
 }
 
 /**
- * Reviewable card shown after a completed Plan-mode execution when the agent
- * published a `plan.md` artifact.
+ * Action surface for a plan that a completed Plan-mode execution published as a
+ * `plan.md` artifact.
  *
- * Presentational by design: it surfaces the plan as a first-class object with
- * three actions — **Implement** (turn the plan into an Agent run), **Review
- * plan** (open the rendered plan in the shared {@link ArtifactPreviewModal},
- * the same popup used elsewhere for artifact previews — where Copy and an
- * Implement CTA also live), and **Download** the `plan.md` file. The plan text
- * is the single source of truth (the published artifact); the modal fetches it
- * on demand, so the card itself holds no plan content.
+ * It is rendered immediately below the plan message in the thread (which already
+ * shows the plan as rich markdown — the message renderer unwraps a model's
+ * enclosing markdown fence), so this card deliberately holds **no** plan
+ * content: the message is the document and this is its action bar. Rendering
+ * the plan a second time here would duplicate the same text the message and the
+ * "Open full" modal already show.
+ *
+ * The hierarchy is the point: one prominent, themeable primary action —
+ * **Build from plan** — with **Open full** and **Download** as subdued
+ * secondaries, so the next step is unmistakable. A small negative top margin
+ * pulls the bar against the plan message so the two read as a single
+ * first-class plan block.
+ *
+ * Kept as its own thread item (not merged into the message) on purpose: merging
+ * would change the streamed message item's identity at completion and remount
+ * the just-streamed plan. Adjacent-and-attached gets the unified look with no
+ * remount.
  *
  * All visual properties flow through `--stgm-*` tokens; the component is
  * self-contained and embeddable.
@@ -50,59 +62,39 @@ export const PlanArtifactCard = memo(function PlanArtifactCard({
   className,
 }: PlanArtifactCardProps) {
   const [previewOpen, setPreviewOpen] = useState(false);
+  const handleKeyDown = useBuildFromPlanHotkey(onImplement, disabled);
 
   return (
     <div
       role="region"
-      aria-label="Plan ready to review"
+      aria-label="Plan actions"
+      onKeyDown={handleKeyDown}
       className={cn(
-        "mx-4 overflow-hidden rounded-md border border-border-muted bg-muted-faint",
+        // `-mt-2` tightens the thread's `gap-4` so the bar attaches to the
+        // plan message above it, reading as one first-class plan block.
+        "mx-4 -mt-2 flex flex-wrap items-center gap-x-3 gap-y-2 rounded-md",
+        "border border-border-muted bg-muted-faint px-3 py-2",
         className,
       )}
     >
-      {/* Header */}
-      <div className="flex items-center gap-3 px-3 py-2.5">
-        <PlanIcon />
-        <div className="min-w-0 flex-1">
-          <div className="text-xs font-medium text-foreground">
-            Plan ready to review
-          </div>
-          <div className="text-xs tabular-nums text-muted-foreground">
-            {artifact.name} · {formatArtifactSize(artifact.sizeBytes)}
-          </div>
-        </div>
-        {onImplement && (
-          <button
-            type="button"
-            disabled={disabled}
-            onClick={onImplement}
-            className={cn(
-              "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5",
-              "text-xs font-medium transition-colors",
-              "bg-primary text-primary-foreground hover:bg-primary-hover",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              "disabled:pointer-events-none disabled:opacity-50",
-            )}
-          >
-            <ImplementIcon />
-            Implement
-          </button>
-        )}
-      </div>
+      <PlanIcon />
+      <span className="text-xs font-medium text-foreground">Plan</span>
+      <span className="text-xs tabular-nums text-muted-foreground-faint">
+        {formatArtifactSize(artifact.sizeBytes)}
+      </span>
 
-      {/* Secondary actions */}
-      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-border-muted px-3 py-1.5">
+      <div className="ml-auto flex flex-wrap items-center gap-x-3 gap-y-1.5">
         {org && (
           <button
             type="button"
             onClick={() => setPreviewOpen(true)}
             className={cn(
-              "inline-flex items-center gap-1 text-xs font-medium text-primary transition-colors hover:text-primary-muted",
+              "inline-flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
               FOCUS_RING,
             )}
           >
             <ExpandIcon />
-            Review plan
+            Open full
           </button>
         )}
         <a
@@ -116,10 +108,27 @@ export const PlanArtifactCard = memo(function PlanArtifactCard({
           <DownloadIcon />
           Download
         </a>
+        {onImplement && (
+          <button
+            type="button"
+            disabled={disabled}
+            onClick={onImplement}
+            className={cn(
+              "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5",
+              "text-xs font-medium transition-colors",
+              "bg-primary text-primary-foreground hover:bg-primary-hover",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "disabled:pointer-events-none disabled:opacity-50",
+            )}
+          >
+            <ImplementIcon />
+            Build from plan
+          </button>
+        )}
       </div>
 
-      {/* Review opens the shared artifact preview popup — consistent with the
-          Artifacts tab and the single place that fetches/renders plan content. */}
+      {/* "Open full" reuses the shared artifact preview popup — the single place
+          that fetches/renders plan content (with Copy + Source/Rendered). */}
       {org && previewOpen && (
         <ArtifactPreviewModal
           artifact={artifact}

package/src/execution/PlanCompletionCard.tsx

@@ -2,10 +2,11 @@
 
 import { memo } from "react";
 import { cn } from "@stigmer/theme";
+import { useBuildFromPlanHotkey } from "./use-build-from-plan-hotkey";
 
 /** Props for {@link PlanCompletionCard}. */
 export interface PlanCompletionCardProps {
-  /** Called when the user clicks the "Implement" button. */
+  /** Called when the user clicks the "Build from plan" button. */
   readonly onImplement?: () => void;
   /** Disables the CTA button (e.g., while an execution is active). */
   readonly disabled?: boolean;
@@ -14,37 +15,43 @@ export interface PlanCompletionCardProps {
 }
 
 /**
- * Inline CTA card shown in the {@link MessageThread} after a completed
- * Plan-mode execution.
+ * Fallback CTA shown in the {@link MessageThread} after a completed Plan-mode
+ * execution that did **not** publish a `plan.md` artifact (older executions, or
+ * a plan whose upload failed). When a plan artifact exists, the richer
+ * {@link PlanArtifactCard} is shown instead.
  *
- * Offers a single "Implement" action that the consumer wires to switch
- * the interaction mode to Agent, pre-fill the composer, and focus it.
+ * Mirrors `PlanArtifactCard`'s hierarchy — one prominent, themeable "Build from
+ * plan" primary action with the same card-scoped `Cmd/Ctrl+Enter` accelerator —
+ * so the two cards feel like the same affordance. The consumer wires the action
+ * to switch the interaction mode to Agent and submit the implement turn.
  *
- * Renders nothing when `onImplement` is not provided, so the card is
- * fully opt-in from the consumer's perspective.
- *
- * All visual properties flow through `--stgm-*` tokens.
+ * Renders nothing when `onImplement` is not provided, so the card is fully
+ * opt-in from the consumer's perspective. All visual properties flow through
+ * `--stgm-*` tokens.
  */
 export const PlanCompletionCard = memo(function PlanCompletionCard({
   onImplement,
   disabled,
   className,
 }: PlanCompletionCardProps) {
+  const handleKeyDown = useBuildFromPlanHotkey(onImplement, disabled);
+
   if (!onImplement) return null;
 
   return (
     <div
       role="status"
       aria-label="Plan complete"
+      onKeyDown={handleKeyDown}
       className={cn(
-        "mx-4 flex items-center gap-3 rounded-md border border-border/50",
-        "bg-muted/30 px-3 py-2.5",
+        "mx-4 flex items-center gap-3 rounded-md border border-border-muted",
+        "bg-muted-faint px-3 py-2.5",
         className,
       )}
     >
       <PlanCompleteIcon />
       <span className="min-w-0 flex-1 text-xs font-medium text-muted-foreground">
-        Plan complete — ready to implement?
+        Plan complete — ready to build?
       </span>
       <button
         type="button"
@@ -60,7 +67,7 @@ export const PlanCompletionCard = memo(function PlanCompletionCard({
         )}
       >
         <ImplementIcon />
-        Implement
+        Build from plan
       </button>
     </div>
   );