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

package/internal/markdown-components.js

@@ -19,6 +19,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.
  *

package/internal/markdown-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-components.js","sourceRoot":"","sources":["../../src/internal/markdown-components.tsx"],"names":[],"mappings":";AAEA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAIpC;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,SAAS,CAAC,CAAC;AAE1C,MAAM,cAAc,GAAG,iCAAiC,CAAC;AAEzD;;;;;;;;GAQG;AACH,MAAM,UAAU,gBAAgB,CAAC,OAAe;IAC9C,OAAO,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;AAC7C,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAe;IAC7C,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB;QACpC,OAAO,CACL,YAAG,SAAS,EAAC,wDAAwD,KAAK,KAAK,YAC5E,QAAQ,GACP,CACL,CAAC;IACJ,CAAC;IAED,CAAC,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAgB;QAC1C,OAAO,CACL,YACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,oEAAoE,EAC9E,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,KACrB,KAAK,YAER,QAAQ,GACP,CACL,CAAC;IACJ,CAAC;IAED,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;QACtC,OAAO,CACL,aAAI,SAAS,EAAC,4DAA4D,KAAK,KAAK,YACjF,QAAQ,GACN,CACN,CAAC;IACJ,CAAC;IAED,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;QACtC,OAAO,CACL,aAAI,SAAS,EAAC,8DAA8D,KAAK,KAAK,YACnF,QAAQ,GACN,CACN,CAAC;IACJ,CAAC;IAED,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;QACtC,OAAO,CACL,aAAI,SAAS,EAAC,8DAA8D,KAAK,KAAK,YACnF,QAAQ,GACN,CACN,CAAC;IACJ,CAAC;IAED,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;QACtC,OAAO,CACL,aAAI,SAAS,EAAC,0DAA0D,KAAK,KAAK,YAC/E,QAAQ,GACN,CACN,CAAC;IACJ,CAAC;IAED,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;QACtC,OAAO,CACL,aAAI,SAAS,EAAC,iEAAiE,KAAK,KAAK,YACtF,QAAQ,GACN,CACN,CAAC;IACJ,CAAC;IAED,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;QACtC,OAAO,CACL,aAAI,SAAS,EAAC,oEAAoE,KAAK,KAAK,YACzF,QAAQ,GACN,CACN,CAAC;IACJ,CAAC;IAED,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;QACtC,OAAO,CACL,aAAI,SAAS,EAAC,iBAAiB,KAAK,KAAK,YACtC,QAAQ,GACN,CACN,CAAC;IACJ,CAAC;IAED,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAkB;QACxC,OAAO,CACL,cACE,SAAS,EAAC,wDAAwD,KAC9D,KAAK,YAER,QAAQ,GACL,CACP,CAAC;IACJ,CAAC;IAED,IAAI,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,KAAK,EAAmB;QACpE,MAAM,OAAO,GACX,OAAO,aAAa,KAAK,QAAQ,IAAI,aAAa,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;QAE7E,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CAAC,mCAAmC,EAAE,aAAa,CAAC,KAC7D,KAAK,YAER,QAAQ,GACJ,CACR,CAAC;QACJ,CAAC;QAED,OAAO,CACL,eACE,SAAS,EAAC,gEAAgE,KACtE,KAAK,YAER,QAAQ,GACJ,CACR,CAAC;IACJ,CAAC;IAED,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAyB;QACtD,OAAO,CACL,qBACE,SAAS,EAAC,2EAA2E,KACjF,KAAK,YAER,QAAQ,GACE,CACd,CAAC;IACJ,CAAC;IAED,KAAK,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAoB;QAC5C,OAAO,CACL,cAAK,SAAS,EAAC,gCAAgC,YAC7C,gBAAO,SAAS,EAAC,gCAAgC,KAAK,KAAK,YACxD,QAAQ,GACH,GACJ,CACP,CAAC;IACJ,CAAC;IAED,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;QACtC,OAAO,CACL,aACE,SAAS,EAAC,wFAAwF,KAC9F,KAAK,YAER,QAAQ,GACN,CACN,CAAC;IACJ,CAAC;IAED,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;QACtC,OAAO,CACL,aAAI,SAAS,EAAC,kDAAkD,KAAK,KAAK,YACvE,QAAQ,GACN,CACN,CAAC;IACJ,CAAC;IAED,EAAE,CAAC,KAAoB;QACrB,OAAO,aAAI,SAAS,EAAC,oBAAoB,KAAK,KAAK,GAAI,CAAC;IAC1D,CAAC;IAED,MAAM,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAqB;QAC9C,OAAO,CACL,iBAAQ,SAAS,EAAC,+BAA+B,KAAK,KAAK,YACxD,QAAQ,GACF,CACV,CAAC;IACJ,CAAC;IAED,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;QACtC,OAAO,CACL,aAAI,SAAS,EAAC,QAAQ,KAAK,KAAK,YAC7B,QAAQ,GACN,CACN,CAAC;IACJ,CAAC;CACF,CAAC"}
+{"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.20260615153829",
   "description": "React provider and client hook for the Stigmer platform SDK",
   "license": "Apache-2.0",
   "type": "module",
@@ -37,7 +37,7 @@
   "dependencies": {
     "@bufbuild/protovalidate": "^1.1.1",
     "@dagrejs/dagre": "^1.1.4",
-    "@stigmer/theme": "3.0.9-dev.20260615150714",
+    "@stigmer/theme": "3.0.9-dev.20260615153829",
     "diff": "^8.0.3",
     "fflate": "^0.8.2",
     "react-markdown": "^10.1.0",
@@ -57,8 +57,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.20260615153829",
+    "@stigmer/sdk": "3.0.9-dev.20260615153829",
     "@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>
   );

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

@@ -0,0 +1,47 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { ArtifactContentRenderer } from "../ArtifactContentRenderer";
+
+afterEach(cleanup);
+
+describe("ArtifactContentRenderer — markdown", () => {
+  const wrappedPlan = "```markdown\n# Plan\n\n1. First\n2. Second\n```";
+
+  it("unwraps a model-wrapped ```markdown plan in the Rendered view", () => {
+    const { container } = render(
+      <ArtifactContentRenderer content={wrappedPlan} fileName="plan.md" />,
+    );
+
+    // Rendered is the default tab: the heading/list render as real elements and
+    // the plan is not trapped inside a single <pre>.
+    expect(container.querySelector("h1")).not.toBeNull();
+    expect(container.querySelector("ol")).not.toBeNull();
+    expect(container.querySelector("pre")).toBeNull();
+  });
+
+  it("keeps the Source view byte-faithful to the stored artifact", () => {
+    const { container } = render(
+      <ArtifactContentRenderer content={wrappedPlan} fileName="plan.md" />,
+    );
+
+    fireEvent.click(screen.getByRole("tab", { name: "Source" }));
+
+    // Source shows the raw bytes — including the enclosing fence we hid in the
+    // Rendered view — so a download/copy stays faithful to what the agent wrote.
+    const pre = container.querySelector("pre");
+    expect(pre).not.toBeNull();
+    expect(pre!.textContent).toContain("```markdown");
+  });
+
+  it("leaves an already-rich markdown plan unchanged", () => {
+    const { container } = render(
+      <ArtifactContentRenderer
+        content={"# Plan\n\n- only step"}
+        fileName="plan.md"
+      />,
+    );
+
+    expect(container.querySelector("h1")).not.toBeNull();
+    expect(container.querySelector("pre")).toBeNull();
+  });
+});

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

@@ -27,8 +27,8 @@ function withStigmer(children: ReactNode) {
 
 afterEach(cleanup);
 
-describe("ArtifactPreviewContent — Implement action", () => {
-  it("renders an Implement button only when onImplement is provided", () => {
+describe("ArtifactPreviewContent — Build from plan action", () => {
+  it("renders a 'Build from plan' button only when onImplement is provided", () => {
     const { rerender } = render(
       withStigmer(
         <ArtifactPreviewContent
@@ -40,7 +40,7 @@ describe("ArtifactPreviewContent — Implement action", () => {
         />,
       ),
     );
-    expect(screen.queryByText("Implement")).toBeNull();
+    expect(screen.queryByText("Build from plan")).toBeNull();
 
     rerender(
       withStigmer(
@@ -54,10 +54,10 @@ describe("ArtifactPreviewContent — Implement action", () => {
         />,
       ),
     );
-    expect(screen.getByText("Implement")).toBeTruthy();
+    expect(screen.getByText("Build from plan")).toBeTruthy();
   });
 
-  it("calls onImplement then closes the modal when Implement is clicked", () => {
+  it("calls onImplement then closes the modal when 'Build from plan' is clicked", () => {
     const calls: string[] = [];
     const onImplement = vi.fn(() => calls.push("implement"));
     const onClose = vi.fn(() => calls.push("close"));
@@ -75,7 +75,7 @@ describe("ArtifactPreviewContent — Implement action", () => {
       ),
     );
 
-    fireEvent.click(screen.getByText("Implement"));
+    fireEvent.click(screen.getByText("Build from plan"));
 
     expect(onImplement).toHaveBeenCalledTimes(1);
     expect(onClose).toHaveBeenCalledTimes(1);

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

@@ -476,10 +476,10 @@ describe("MessageThread", () => {
       />,
     );
 
-    const implementBtn = screen.getByRole("button", { name: /implement/i });
-    expect(implementBtn).toBeTruthy();
+    const buildBtn = screen.getByRole("button", { name: /build from plan/i });
+    expect(buildBtn).toBeTruthy();
 
-    fireEvent.click(implementBtn);
+    fireEvent.click(buildBtn);
     expect(onBuildFromPlan).toHaveBeenCalledOnce();
   });
 });