@stigmer/react 3.1.3 → 3.1.4

package/src/internal/markdown-components.tsx

@@ -1,10 +1,12 @@
-import type { ComponentProps, JSX } from "react";
+import { isValidElement, type ComponentProps, type JSX, type ReactNode } from "react";
 import type { Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { cn } from "@stigmer/theme";
 import { highlightToReact } from "./code-highlight.js";
+import { MermaidDiagram } from "./MermaidDiagram.js";
 
 const LANGUAGE_CLASS_PREFIX = "language-";
+const MERMAID_LANGUAGE_CLASS = "language-mermaid";
 
 type MdProps<T extends keyof JSX.IntrinsicElements> = ComponentProps<T>;
 
@@ -119,6 +121,30 @@ export function extractLeadingH1(markdown: string): {
   return { title: match[1], body: trimmed.slice(match[0].length) };
 }
 
+/**
+ * Returns the mermaid source when a `pre` element's children are a single
+ * fenced code block explicitly tagged `mermaid`, or `null` otherwise.
+ *
+ * Both renderers (Streamdown for chat, react-markdown for artifacts/skills)
+ * hand `pre` exactly one `<code>` child whose `className` carries the fence's
+ * info string as `language-*` and whose children are the raw source text.
+ * Anything that deviates from that shape — a different language, a missing
+ * tag, non-string children — is not a mermaid fence and keeps the ordinary
+ * code-block rendering. Only the explicit `mermaid` tag qualifies:
+ * inspecting fence bodies to guess diagram intent is the kind of fuzzy
+ * heuristic this codebase avoids.
+ */
+function extractMermaidSource(children: ReactNode): string | null {
+  if (!isValidElement(children)) return null;
+  const { className, children: code } = children.props as {
+    className?: unknown;
+    children?: unknown;
+  };
+  if (typeof className !== "string") return null;
+  if (!className.split(/\s+/).includes(MERMAID_LANGUAGE_CLASS)) return null;
+  return typeof code === "string" ? code : null;
+}
+
 /**
  * Styled react-markdown component overrides for SDK markdown surfaces.
  *
@@ -208,6 +234,15 @@ export const MARKDOWN_COMPONENTS: Components = {
   },
 
   pre({ children, ...props }: MdProps<"pre">) {
+    // A ```mermaid fence renders as a diagram, not a code block. The check
+    // lives here (not in the `code` override) because the diagram must
+    // replace the <pre> wrapper too — a block-level diagram container inside
+    // <pre> is invalid HTML and would inherit code-block chrome.
+    const mermaidSource = extractMermaidSource(children);
+    if (mermaidSource !== null) {
+      return <MermaidDiagram chart={mermaidSource} />;
+    }
+
     return (
       <pre
         className="mb-3 last:mb-0 overflow-x-auto rounded-md bg-muted p-3"

package/src/internal/mermaid-loader.ts

@@ -0,0 +1,44 @@
+/**
+ * Lazy loader for the `mermaid` library, isolated in its own module — the
+ * same seam pattern as `workflow/layout/elk-layout-engine.ts` — so
+ * {@link file://./MermaidDiagram.tsx} stays a pure presentation component and
+ * tests can mock the load outcome (resolve, reject) without touching module
+ * registries.
+ *
+ * `mermaid` is an optional peer dependency (DD-013): it is large, so it must
+ * never sit on the synchronous bundle path, and a host that has not installed
+ * it must degrade gracefully (the caller falls back to a code block).
+ */
+
+/**
+ * The mermaid API surface the SDK consumes, typed from the package itself so
+ * it stays in lockstep with the installed version.
+ */
+export type MermaidModule = typeof import("mermaid").default;
+
+/**
+ * Holds the in-flight import promise so concurrent diagrams share one load.
+ * A failed import clears the cache: rejections are often transient (a
+ * chunk-load hiccup mid-deploy), and caching one would break every diagram
+ * for the rest of the session.
+ */
+let mermaidImport: Promise<MermaidModule> | null = null;
+
+/**
+ * Dynamically imports `mermaid`, sharing one in-flight import across callers.
+ *
+ * @returns The mermaid default export.
+ * @throws If `mermaid` cannot be imported (not installed, or the async chunk
+ *   failed to load). Callers treat this as "diagrams unavailable" and render
+ *   the fenced source as a plain code block.
+ */
+export function loadMermaid(): Promise<MermaidModule> {
+  mermaidImport ??= import("mermaid").then(
+    (module) => module.default,
+    (error: unknown) => {
+      mermaidImport = null;
+      throw error;
+    },
+  );
+  return mermaidImport;
+}

package/src/internal/mermaid-theme-css.ts

@@ -0,0 +1,178 @@
+/**
+ * Token-driven `themeCSS` for Mermaid diagram interiors.
+ *
+ * Mermaid's built-in `default`/`dark` themes color a diagram's SVG interior
+ * with a fixed palette that ignores the host's `--stgm-*` preset (Corporate,
+ * Fintech, ...). The obvious fix — feeding resolved tokens into Mermaid's
+ * `themeVariables` — is blocked: our tokens are authored in `oklch()`, and
+ * Mermaid's color engine (`khroma`) parses only hex/rgb/hsl/keyword, so it
+ * throws or NaNs on `oklch(...)`. (Mermaid also gates every `themeVariables`
+ * value through the allowlist `^[\d "#%(),.;A-Za-z]+$`, which excludes `-` and
+ * would blank any `var(--...)`.)
+ *
+ * Instead we hand Mermaid this CSS via `initialize({ themeCSS })`. Mermaid
+ * injects it into the diagram's own `<style>` block, scoped under the render
+ * id (`#stgm-mermaid-N`), *after* the theme palette it computes. Because every
+ * selector in that block is id-prefixed, our rules and the palette's rules sit
+ * at equal specificity, so ours win by source order — and `!important` makes
+ * that bulletproof against the few palette rules that are themselves important
+ * or inlined. Crucially, `themeCSS` never passes through khroma, so the
+ * `oklch()`-backed `var(--stgm-*)` references flow straight to the browser,
+ * which resolves them against the `.stgm` scope the SVG lives in. That is why
+ * interiors track the active preset *and* color mode live, with no JS color
+ * reading and no re-render on theme change.
+ *
+ * `initialize({ theme })` still selects the built-in `default`/`dark` theme as
+ * the base, so any element or diagram type we do not target here degrades to
+ * Mermaid's stock palette — never a blank or mis-colored diagram.
+ *
+ * Palette intent (subtle surfaces + brand accents — legibility over brand
+ * saturation): node/actor bodies sit on a muted surface with quiet
+ * token-colored borders and edges; labels use the standard foreground; the
+ * brand `--stgm-primary` is reserved for structural headers (subgraph/cluster
+ * titles, sequence loop/section titles, the sequence-number badge).
+ *
+ * Coverage is the two families agents emit overwhelmingly — flowchart and
+ * sequence — plus the shared marker/edge-label chrome. Both label render paths
+ * are handled: SVG `text`/`tspan` (via `fill`) and HTML labels inside
+ * `foreignObject` (via `color`).
+ */
+export const MERMAID_THEME_CSS = `
+  /* Shared: edge arrowheads / markers */
+  .marker {
+    fill: var(--stgm-border) !important;
+    stroke: var(--stgm-border) !important;
+  }
+  .marker.cross {
+    stroke: var(--stgm-border) !important;
+  }
+
+  /* Flowchart: node bodies */
+  .node rect,
+  .node circle,
+  .node ellipse,
+  .node polygon,
+  .node path {
+    fill: var(--stgm-muted) !important;
+    stroke: var(--stgm-border) !important;
+  }
+  .node .neo-node {
+    stroke: var(--stgm-border) !important;
+  }
+  .node .katex path {
+    fill: var(--stgm-foreground) !important;
+    stroke: var(--stgm-foreground) !important;
+  }
+
+  /* Flowchart: node labels (SVG text and HTML spans) */
+  .label {
+    color: var(--stgm-foreground) !important;
+  }
+  .label text,
+  .label span {
+    fill: var(--stgm-foreground) !important;
+    color: var(--stgm-foreground) !important;
+  }
+
+  /* Flowchart: edges */
+  .edgePath .path,
+  .flowchart-link {
+    stroke: var(--stgm-border) !important;
+  }
+  .arrowheadPath,
+  .root .anchor path {
+    fill: var(--stgm-border) !important;
+    stroke: var(--stgm-border) !important;
+  }
+
+  /* Flowchart: edge labels sit on the diagram surface for legibility */
+  .edgeLabel,
+  .edgeLabel p,
+  .edgeLabel rect,
+  .labelBkg {
+    background-color: var(--stgm-card) !important;
+    fill: var(--stgm-card) !important;
+  }
+
+  /* Flowchart: subgraph clusters — muted surface, brand-accent title */
+  .cluster rect {
+    fill: var(--stgm-muted-subtle) !important;
+    stroke: var(--stgm-border) !important;
+  }
+  .cluster-label text,
+  .cluster text {
+    fill: var(--stgm-primary) !important;
+  }
+  .cluster-label span,
+  .cluster span {
+    color: var(--stgm-primary) !important;
+  }
+
+  /* Sequence: actors and lifelines */
+  .actor {
+    fill: var(--stgm-muted) !important;
+    stroke: var(--stgm-border) !important;
+  }
+  text.actor > tspan {
+    fill: var(--stgm-foreground) !important;
+  }
+  .actor-line {
+    stroke: var(--stgm-border) !important;
+  }
+
+  /* Sequence: messages */
+  .messageLine0,
+  .messageLine1 {
+    stroke: var(--stgm-border) !important;
+  }
+  [id$="-arrowhead"] path,
+  [id$="-crosshead"] path {
+    fill: var(--stgm-border) !important;
+    stroke: var(--stgm-border) !important;
+  }
+  .messageText {
+    fill: var(--stgm-foreground) !important;
+  }
+
+  /* Sequence: number badge — brand accent with its paired foreground */
+  [id$="-sequencenumber"] {
+    fill: var(--stgm-primary) !important;
+  }
+  .sequenceNumber {
+    fill: var(--stgm-primary-foreground) !important;
+  }
+
+  /* Sequence: alt/opt/loop boxes and labels */
+  .labelBox {
+    fill: var(--stgm-muted-subtle) !important;
+    stroke: var(--stgm-border) !important;
+  }
+  .labelText,
+  .labelText > tspan {
+    fill: var(--stgm-foreground) !important;
+  }
+  .loopText,
+  .loopText > tspan,
+  .sectionTitle,
+  .sectionTitle > tspan {
+    fill: var(--stgm-primary) !important;
+  }
+  .loopLine {
+    stroke: var(--stgm-border) !important;
+  }
+
+  /* Sequence: notes and activations */
+  .note {
+    fill: var(--stgm-muted-subtle) !important;
+    stroke: var(--stgm-border) !important;
+  }
+  .noteText,
+  .noteText > tspan {
+    fill: var(--stgm-foreground) !important;
+  }
+  .activation0,
+  .activation1 {
+    fill: var(--stgm-muted) !important;
+    stroke: var(--stgm-border) !important;
+  }
+`;

package/src/internal/slug.ts

@@ -7,23 +7,27 @@
  *
  * Rules (applied in order):
  * 1. Convert to lowercase
- * 2. Replace spaces with hyphens
+ * 2. Replace spaces and dots (namespace separators) with hyphens
  * 3. Strip everything except `a-z`, `0-9`, and `-`
  * 4. Collapse consecutive hyphens into one
  * 5. Trim leading / trailing hyphens
  *
+ * Dots are treated as namespace separators (e.g. `platform.sara` → `platform-sara`),
+ * matching the backend generators, so namespace-scoped names stay readable.
+ *
  * @example
  * ```ts
- * generateSlug("My Cool Agent")  // "my-cool-agent"
- * generateSlug("Acme Corp!")     // "acme-corp"
- * generateSlug("  --hello-- ")   // "hello"
- * generateSlug("")               // ""
+ * generateSlug("My Cool Agent")             // "my-cool-agent"
+ * generateSlug("Acme Corp!")                // "acme-corp"
+ * generateSlug("  --hello-- ")              // "hello"
+ * generateSlug("platform.planton-arch")     // "platform-planton-arch"
+ * generateSlug("")                          // ""
  * ```
  */
 export function generateSlug(name: string): string {
   return name
     .toLowerCase()
-    .replace(/ /g, "-")
+    .replace(/[ .]/g, "-")
     .replace(/[^a-z0-9-]/g, "")
     .replace(/-{2,}/g, "-")
     .replace(/^-+|-+$/g, "");

package/src/session/SessionViewer.tsx

@@ -17,7 +17,7 @@ import {
   WorkspaceSurface,
   type SurfaceVirtualDocument,
 } from "../workspace/WorkspaceSurface.js";
-import type { InteractionModeOption, SessionComposerHandle } from "../composer/index.js";
+import type { InteractionModeOption, SessionComposerHandle, SessionComposerSubmitContext } from "../composer/index.js";
 import type { ApplyResourceResult } from "../library/useApplyResource.js";
 import { ResizableSplit } from "../internal/ResizableSplit.js";
 import { SelectionStore } from "../internal/store/selection-store.js";
@@ -47,11 +47,17 @@ import { usePlanDraft, planDraftKey, type PlanDraftController } from "./usePlanD
 import { PlanEditor } from "./PlanEditor.js";
 import { PlanStreamingDocument } from "./PlanStreamingDocument.js";
 import { PLAN_DOCUMENT_ENTRY_ID, PLAN_DOCUMENT_PATH } from "./plan-document.js";
+import { ARTIFACT_DOCUMENT_ENTRY_ID } from "./artifact-document.js";
+import { ArtifactDocument } from "../execution/ArtifactDocument.js";
 import { useSessionRailViews } from "./useSessionRailViews.js";
 import { useSessionPanel, type SessionPanelController } from "./useSessionPanel.js";
 import { SessionPanelChip } from "./SessionPanelChip.js";
 import { useSessionWriteBacks } from "./useSessionWriteBacks.js";
-import { useSessionArtifacts } from "./useSessionArtifacts.js";
+import {
+  useSessionArtifacts,
+  artifactKey,
+  type SessionArtifactEntry,
+} from "./useSessionArtifacts.js";
 import type { SetupTabProps } from "./facets/SetupTab.js";
 import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import type { RuntimeEnvProvider } from "./runtime-env.js";
@@ -455,6 +461,28 @@ export function SessionViewer({
     [sessionPlan, panel.openPlanDocument],
   );
 
+  // "Open artifact" (an Artifacts-facet row) → an editor-pane document tab.
+  // Writing the editors store re-renders only the panel subtree (which
+  // subscribes), never this streaming column. Plan artifacts are routed to the
+  // plan tab upstream (in ArtifactsTab), so they never reach here.
+  const handleOpenArtifact = useCallback(
+    (entry: SessionArtifactEntry) => {
+      panel.openArtifact(entry.artifact);
+    },
+    [panel.openArtifact],
+  );
+
+  // Double-click an artifact row → pin its tab (the leading single click already
+  // opened the preview via `handleOpenArtifact`). Mirrors the file tree's
+  // preview/pin split; plan artifacts are routed to the plan tab upstream (in
+  // ArtifactsTab) and never reach here.
+  const handleActivateArtifact = useCallback(
+    (entry: SessionArtifactEntry) => {
+      panel.pinArtifact(entry.artifact);
+    },
+    [panel.pinArtifact],
+  );
+
   // Open a transcript tool-call file path in the panel's read-only editor.
   // Resolves the (possibly absolute / subdir-prefixed) path to a
   // repo/root-relative selection the editor can fetch; on a definite hit it
@@ -561,6 +589,8 @@ export function SessionViewer({
                 planDraft={planDraft}
                 openPlanExecutionId={openPlanExecutionId}
                 onOpenPlan={handleOpenPlan}
+                onOpenArtifact={handleOpenArtifact}
+                onActivateArtifact={handleActivateArtifact}
                 enableLocal={enableLocal}
                 onBrowseLocalFolder={onBrowseLocalFolder}
                 workspaceFileLister={workspaceFileLister}
@@ -652,18 +682,55 @@ const ConversationColumn = memo(function ConversationColumn({
     void conv.stop();
   }, [conv.stop]);
 
-  // Edit-and-resubmit: stop the in-flight turn and pre-fill the composer with
-  // the original text. The append-only execution log can't be rewritten, so
-  // the user reviews the prefilled message and resubmits it as a NEW execution
-  // through the normal Send pipeline. The cancelled turn stays in history with
-  // its phase badge — an honest record rather than a silent edit.
+  // Edit-and-resubmit: stop the in-flight turn, pre-fill the composer with
+  // the original text, and remember which execution is being edited. The
+  // append-only execution log is never rewritten — submitting while editing
+  // creates a NEW execution that carries `supersedesExecutionId`, and the
+  // conversation read model hides the superseded turn so the edited message
+  // replaces the original in place (Cursor-style, stigmer/stigmer#181).
+  //
+  // The editing state is explicit (banner + cancel in the composer) so the
+  // supersede link only attaches when the user actually resubmits the edit.
+  // Cancelling drops the link — a subsequent unrelated message appends
+  // normally without hiding any history.
+  const [editingExecutionId, setEditingExecutionId] = useState<string | null>(
+    null,
+  );
+  const activeExecutionId = conv.activeStreamExecution?.metadata?.id ?? null;
+
   const handleEditMessage = useCallback(
     (text: string) => {
       void conv.stop();
+      setEditingExecutionId(activeExecutionId);
       composerRef.current?.setMessage(text);
       composerRef.current?.focus();
     },
-    [conv.stop, composerRef],
+    [conv.stop, activeExecutionId, composerRef],
+  );
+
+  const handleCancelEdit = useCallback(() => {
+    setEditingExecutionId(null);
+    composerRef.current?.setMessage("");
+  }, [composerRef]);
+
+  // Submit wrapper that attaches the supersede link while editing, then
+  // exits editing mode. Ordinary (non-editing) submits pass through as-is.
+  const handleComposerSubmit = useCallback(
+    (
+      message: string,
+      modelName?: string,
+      context?: SessionComposerSubmitContext,
+    ) => {
+      void flow.handleSubmit(
+        message,
+        modelName,
+        editingExecutionId
+          ? { ...context, supersedesExecutionId: editingExecutionId }
+          : context,
+      );
+      setEditingExecutionId(null);
+    },
+    [flow.handleSubmit, editingExecutionId],
   );
 
   // The composer-docked FileReviewDock sits OUTSIDE MessageThread, so the
@@ -743,11 +810,13 @@ const ConversationColumn = memo(function ConversationColumn({
         </FilePathContext.Provider>
         <SessionComposer
           ref={composerRef}
-          onSubmit={flow.handleSubmit}
+          onSubmit={handleComposerSubmit}
           isSubmitting={conv.isSending}
           disabled={!conv.canSendFollowUp}
           onStop={conv.isStoppable ? handleStop : undefined}
           isStopping={conv.isStopping}
+          isEditing={editingExecutionId != null}
+          onCancelEdit={handleCancelEdit}
           org={org}
           harness={flow.harness}
           defaultModelId={modelId}
@@ -815,6 +884,10 @@ interface SessionPanelRegionProps {
   readonly openPlanExecutionId: string | null;
   /** Opens a plan in the plan tab (routed to the Artifacts facet's plan.md). */
   readonly onOpenPlan: (executionId: string) => void;
+  /** Opens an artifact as an editor-pane document (routed to the Artifacts facet). */
+  readonly onOpenArtifact: (entry: SessionArtifactEntry) => void;
+  /** Pins an artifact's document tab — the double-click half of the open/pin split. */
+  readonly onActivateArtifact: (entry: SessionArtifactEntry) => void;
   readonly enableLocal: boolean;
   readonly onBrowseLocalFolder?: () => Promise<string | null>;
   readonly workspaceFileLister?: WorkspaceFileLister;
@@ -836,6 +909,8 @@ function SessionPanelRegion({
   planDraft,
   openPlanExecutionId,
   onOpenPlan,
+  onOpenArtifact,
+  onActivateArtifact,
   enableLocal,
   onBrowseLocalFolder,
   workspaceFileLister,
@@ -847,6 +922,9 @@ function SessionPanelRegion({
   const { editors, activeKey, activeFile, reveal } = useWorkspaceEditors(
     panel.editorsStore,
   );
+  // Session artifacts, deduped by identity — the source both the Artifacts
+  // rail-view badge and the open artifact document tabs resolve against.
+  const { artifacts: sessionArtifacts } = useSessionArtifacts(flow.allExecutions);
 
   // Honor a pending jump-to-line reveal only while it targets the active editor
   // (an EditorReveal is structurally a RevealTarget). Switching tabs changes
@@ -902,30 +980,28 @@ function SessionPanelRegion({
   // tab and its turn then ended without publishing, with no earlier plan to
   // fall back to.
   const openPlanIsLatest = openPlan?.executionId === sessionPlan?.executionId;
-  const virtualDocuments = useMemo<readonly SurfaceVirtualDocument[]>(() => {
-    return [
-      {
-        entryId: PLAN_DOCUMENT_ENTRY_ID,
-        path: PLAN_DOCUMENT_PATH,
-        content: streamingPlan ? (
-          <PlanStreamingDocument
-            key={`streaming-${streamingPlan.executionId}`}
-            displayText={streamingPlan.displayText}
-          />
-        ) : openPlan ? (
-          <PlanEditor
-            key={planDraftKey(openPlan)}
-            plan={openPlan}
-            draft={openPlanIsLatest ? planDraft : undefined}
-            onBuildFromPlan={openPlanIsLatest ? onImplementPlan : undefined}
-            buildDisabled={implementPlanDisabled}
-            readOnly={!openPlanIsLatest}
-          />
-        ) : (
-          <PlanUnavailableNotice />
-        ),
-      },
-    ];
+  const planVirtualDocument = useMemo<SurfaceVirtualDocument>(() => {
+    return {
+      entryId: PLAN_DOCUMENT_ENTRY_ID,
+      path: PLAN_DOCUMENT_PATH,
+      content: streamingPlan ? (
+        <PlanStreamingDocument
+          key={`streaming-${streamingPlan.executionId}`}
+          displayText={streamingPlan.displayText}
+        />
+      ) : openPlan ? (
+        <PlanEditor
+          key={planDraftKey(openPlan)}
+          plan={openPlan}
+          draft={openPlanIsLatest ? planDraft : undefined}
+          onBuildFromPlan={openPlanIsLatest ? onImplementPlan : undefined}
+          buildDisabled={implementPlanDisabled}
+          readOnly={!openPlanIsLatest}
+        />
+      ) : (
+        <PlanUnavailableNotice />
+      ),
+    };
   }, [
     streamingPlan,
     openPlan,
@@ -935,6 +1011,50 @@ function SessionPanelRegion({
     implementPlanDisabled,
   ]);
 
+  // The open artifact document tabs (the artifact virtual-document FAMILY).
+  // Built in a SEPARATE memo from the plan doc so artifact-tab churn never
+  // recreates the plan doc (and vice versa). Bounded to what is actually open:
+  // one document per editor whose entry id is the artifact family's, resolved
+  // back to its `SessionArtifactEntry` by the same `artifactKey` used to open
+  // it (single source of truth for artifact identity). Only the ACTIVE doc's
+  // `content` is mounted by the surface, so building these elements is cheap;
+  // keying on `contentHash` remounts a tab whose artifact was overwritten by a
+  // later execution. A tab whose artifact no longer exists degrades to an
+  // honest notice rather than vanishing.
+  const artifactByKey = useMemo(
+    () =>
+      new Map(sessionArtifacts.map((entry) => [artifactKey(entry.artifact), entry])),
+    [sessionArtifacts],
+  );
+  const artifactVirtualDocuments = useMemo<readonly SurfaceVirtualDocument[]>(() => {
+    return editors
+      .filter((editor) => editor.entryId === ARTIFACT_DOCUMENT_ENTRY_ID)
+      .map((editor) => {
+        const entry = artifactByKey.get(editor.path);
+        return {
+          entryId: ARTIFACT_DOCUMENT_ENTRY_ID,
+          path: editor.path,
+          content: entry ? (
+            <ArtifactDocument
+              key={entry.artifact.contentHash || editor.path}
+              artifact={entry.artifact}
+              executionId={entry.executionId}
+              org={org}
+              isTerminal={entry.isTerminal}
+              onApplied={onApplied}
+            />
+          ) : (
+            <ArtifactUnavailableNotice />
+          ),
+        };
+      });
+  }, [editors, artifactByKey, org, onApplied]);
+
+  const virtualDocuments = useMemo<readonly SurfaceVirtualDocument[]>(
+    () => [planVirtualDocument, ...artifactVirtualDocuments],
+    [planVirtualDocument, artifactVirtualDocuments],
+  );
+
   const handleRemoveAgent = useCallback(() => {
     flow.setAgentRef(null);
     flow.setResolution(null);
@@ -1001,6 +1121,8 @@ function SessionPanelRegion({
     onApplied,
     onImplementPlan,
     onOpenPlan,
+    onOpenArtifact,
+    onActivateArtifact,
   });
 
   // Explorer-footer folder attach (desktop only — needs the native picker).
@@ -1125,6 +1247,28 @@ function PlanUnavailableNotice() {
   );
 }
 
+/**
+ * Shown in an artifact document tab whose artifact is no longer among the
+ * session's outputs (an edge only reachable if the executions backing the tab
+ * changed underneath it). The tab stays closable; the content is honest rather
+ * than blank.
+ */
+function ArtifactUnavailableNotice() {
+  return (
+    <div
+      role="status"
+      className="mx-auto flex w-full max-w-3xl flex-col items-center gap-1 px-4 py-8 text-center"
+    >
+      <p className="text-xs font-medium text-foreground">
+        This artifact is no longer available.
+      </p>
+      <p className="text-xs text-muted-foreground">
+        It may have been replaced by a newer version of this session.
+      </p>
+    </div>
+  );
+}
+
 /**
  * Non-blocking notice for a build that fell back to message-only implement
  * (the approved plan.md could not be uploaded/attached). The build itself