@stigmer/react 3.1.0 → 3.1.2

package/src/execution/PlanArtifactCard.tsx

@@ -3,10 +3,10 @@
 import { memo, useState } from "react";
 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 { useArtifactDownload } from "./useArtifactDownload";
-import { useBuildFromPlanHotkey } from "./use-build-from-plan-hotkey";
+import { ArtifactPreviewModal } from "./ArtifactPreviewModal.js";
+import { formatArtifactSize } from "./artifact-utils.js";
+import { useArtifactDownload } from "./useArtifactDownload.js";
+import { useBuildFromPlanHotkey } from "./use-build-from-plan-hotkey.js";
 
 /** Props for {@link PlanArtifactCard}. */
 export interface PlanArtifactCardProps {
@@ -14,6 +14,12 @@ export interface PlanArtifactCardProps {
   readonly executionId: string;
   /** The published `plan.md` artifact (from `findPlanArtifact`). */
   readonly artifact: ExecutionArtifact;
+  /**
+   * The plan's title (its leading `# H1`). The card is the plan's compact
+   * stand-in in the thread, so the title is what makes it recognizable.
+   * Falls back to "Plan" when omitted.
+   */
+  readonly title?: string;
   /**
    * Organization slug. Required for the "Open full" modal (the shared
    * {@link ArtifactPreviewModal} uses it for its detection/apply pipeline and
@@ -23,33 +29,36 @@ export interface PlanArtifactCardProps {
   readonly org?: string;
   /** Called when the user clicks "Build from plan". Hidden when omitted. */
   readonly onImplement?: () => void;
+  /**
+   * Opens the plan in the session panel's plan document tab — the
+   * side-by-side review/refine surface. When provided it REPLACES the
+   * modal-based "Open full" secondary with "Open plan" (one review
+   * affordance, not two). When omitted (hosts without a session panel) the
+   * modal remains.
+   */
+  readonly onOpenPlan?: () => void;
   /** Disables the primary CTA (e.g., while an execution is active). */
   readonly disabled?: boolean;
+  /** When true, the primary button reads "Starting build…" (upload in flight). */
+  readonly buildPending?: boolean;
   /** Additional CSS classes for the root element. */
   readonly className?: string;
 }
 
 /**
- * Action surface for a plan that a completed Plan-mode execution published as a
- * `plan.md` artifact.
- *
- * 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 compact plan card — a completed Plan turn's sole representation in the
+ * thread. The plan document itself lives in the session panel's plan tab
+ * (`PlanEditor`), Cursor-style: chat carries a recognizable, actionable card;
+ * the panel carries the document.
  *
- * 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.
+ * Anatomy: a document-style identity block (plan icon, the plan's title, a
+ * `plan.md · size` meta line) with the actions trailing — **Open plan** and
+ * **Download** as subdued secondaries and one prominent, themeable primary,
+ * **Build from plan** — so the next step is unmistakable.
  *
- * 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.
+ * Only the LATEST plan's card carries `onImplement`; a superseded plan's card
+ * is review-only (its `onOpenPlan` opens the document read-only), so a stale
+ * plan can never be implemented by accident.
  *
  * All visual properties flow through `--stgm-*` tokens; the component is
  * self-contained and embeddable.
@@ -57,9 +66,12 @@ export interface PlanArtifactCardProps {
 export const PlanArtifactCard = memo(function PlanArtifactCard({
   executionId,
   artifact,
+  title,
   org,
   onImplement,
+  onOpenPlan,
   disabled,
+  buildPending,
   className,
 }: PlanArtifactCardProps) {
   const [previewOpen, setPreviewOpen] = useState(false);
@@ -69,35 +81,55 @@ export const PlanArtifactCard = memo(function PlanArtifactCard({
   return (
     <div
       role="region"
-      aria-label="Plan actions"
+      aria-label="Plan"
       onKeyDown={handleKeyDown}
       className={cn(
-        // `-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",
+        "mx-4 flex flex-wrap items-center gap-x-3 gap-y-2 rounded-lg",
+        "border border-border-muted bg-card px-3 py-2.5",
         className,
       )}
     >
       <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>
+      <div className="min-w-0 flex-1 basis-48">
+        <div className="truncate text-sm font-medium text-foreground">
+          {title ?? "Plan"}
+        </div>
+        <div className="text-[0.65rem] text-muted-foreground-faint">
+          {artifact.name}
+          <span aria-hidden="true"> · </span>
+          <span className="tabular-nums">
+            {formatArtifactSize(artifact.sizeBytes)}
+          </span>
+        </div>
+      </div>
 
       <div className="ml-auto flex flex-wrap items-center gap-x-3 gap-y-1.5">
-        {org && (
+        {onOpenPlan ? (
           <button
             type="button"
-            onClick={() => setPreviewOpen(true)}
+            onClick={onOpenPlan}
             className={cn(
               "inline-flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
               FOCUS_RING,
             )}
           >
             <ExpandIcon />
-            Open full
+            Open plan
           </button>
+        ) : (
+          org && (
+            <button
+              type="button"
+              onClick={() => setPreviewOpen(true)}
+              className={cn(
+                "inline-flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
+                FOCUS_RING,
+              )}
+            >
+              <ExpandIcon />
+              Open full
+            </button>
+          )
         )}
         <button
           type="button"
@@ -125,7 +157,7 @@ export const PlanArtifactCard = memo(function PlanArtifactCard({
             )}
           >
             <ImplementIcon />
-            Build from plan
+            {buildPending ? "Starting build…" : "Build from plan"}
           </button>
         )}
       </div>

package/src/execution/PlanCompletionCard.tsx

@@ -2,7 +2,7 @@
 
 import { memo } from "react";
 import { cn } from "@stigmer/theme";
-import { useBuildFromPlanHotkey } from "./use-build-from-plan-hotkey";
+import { useBuildFromPlanHotkey } from "./use-build-from-plan-hotkey.js";
 
 /** Props for {@link PlanCompletionCard}. */
 export interface PlanCompletionCardProps {

package/src/execution/PlanDocumentMessage.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { memo, useMemo } from "react";
+import { Streamdown } from "streamdown";
+import { cn } from "@stigmer/theme";
+import {
+  PLAN_DOCUMENT_MARKDOWN_COMPONENTS,
+  extractLeadingH1,
+  unwrapEnclosingMarkdownFence,
+} from "../internal/markdown-components.js";
+
+/** Props for {@link PlanDocumentMessage}. */
+export interface PlanDocumentMessageProps {
+  /** The plan message's markdown content (the agent's final Plan-mode reply). */
+  readonly content: string;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Renders a Plan-mode turn's plan as a first-class document instead of a chat
+ * bubble: a bordered card with a title header (the plan's leading `# H1`,
+ * lifted out of the prose) and document-grade typography
+ * ({@link PLAN_DOCUMENT_MARKDOWN_COMPONENTS}).
+ *
+ * This is the thread's NO-ARTIFACT fallback: a completed Plan turn that never
+ * published `plan.md` (older executions, a failed upload) keeps its plan
+ * inline via this component — the message is the only copy of the plan, so it
+ * must stay readable in place. A turn that DID publish the artifact collapses
+ * its plan message into the compact `PlanArtifactCard` instead, and the
+ * document renders in the session panel's plan tab (`PlanEditor`) with the
+ * same typography.
+ *
+ * Fence handling is plan-scoped: a plan wrapped in a whole-body fence is
+ * unwrapped even when the fence carries no language tag (`allowBareFence`) —
+ * a Plan turn's output is a markdown document by contract, so an enclosing
+ * bare fence is wrapping, not code. Render-time only; the transcript and the
+ * published artifact stay byte-faithful.
+ *
+ * Purely presentational — no data fetching, no state.
+ * All visual properties flow through `--stgm-*` tokens.
+ */
+export const PlanDocumentMessage = memo(function PlanDocumentMessage({
+  content,
+  className,
+}: PlanDocumentMessageProps) {
+  const { title, body } = useMemo(
+    () => extractLeadingH1(unwrapEnclosingMarkdownFence(content, true)),
+    [content],
+  );
+
+  return (
+    <div
+      role="article"
+      aria-label="Plan document"
+      className={cn("mx-4", className)}
+    >
+      <div className="overflow-hidden rounded-lg border border-border-muted bg-card">
+        <header className="flex items-center gap-2 border-b border-border-muted bg-muted-faint px-4 py-2.5">
+          <PlanDocIcon />
+          <span className="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">
+            {title ?? "Plan"}
+          </span>
+        </header>
+        <div className="stgm-prose px-4 py-4">
+          <Streamdown
+            components={PLAN_DOCUMENT_MARKDOWN_COMPONENTS}
+            isAnimating={false}
+          >
+            {body}
+          </Streamdown>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+function PlanDocIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0 text-muted-foreground"
+      aria-hidden="true"
+    >
+      <path d="M3 4h10M3 8h7M3 12h8" />
+      <path d="M12.5 10.5l1.5 1.5-1.5 1.5" />
+    </svg>
+  );
+}

package/src/execution/PlanStreamingCard.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { memo } from "react";
+import { cn } from "@stigmer/theme";
+import { PLAN_ARTIFACT_NAME } from "../library/detect-plan-artifact.js";
+import { formatArtifactSize } from "./artifact-utils.js";
+
+/** Props for {@link PlanStreamingCard}. */
+export interface PlanStreamingCardProps {
+  /**
+   * The plan's title (its leading `# H1`), streaming in live. Falls back to
+   * "Writing plan…" until the title has arrived.
+   */
+  readonly title?: string;
+  /**
+   * Live size of the plan text streamed so far. An approximation (UTF-16
+   * length, not encoded bytes) — it exists to show growth while the agent
+   * writes, not to state the artifact's final size.
+   */
+  readonly sizeBytes: number;
+  /**
+   * Opens the panel's plan document tab, where the plan is rendering live.
+   * Always provided in practice: the thread only collapses a streaming plan
+   * behind this card when the host wired `onOpenPlan` (see `MessageThread`'s
+   * `collapseStreamingPlan` gate) — without a document surface there is
+   * nothing for the card to open, and the plan streams inline instead.
+   */
+  readonly onOpenPlan?: () => void;
+  /** Additional CSS classes for the root element. */
+  readonly className?: string;
+}
+
+/**
+ * The live counterpart of {@link PlanArtifactCard} — a streaming Plan turn's
+ * compact stand-in in the thread while the plan document renders live in the
+ * session panel's plan tab. Same anatomy as the completed card (icon, title,
+ * `plan.md · size` meta, trailing actions) so the completion handoff reads as
+ * the same card settling, not a new element appearing.
+ *
+ * Deliberately action-light: "Open plan" is the only affordance. Download and
+ * Build require the published artifact, which does not exist until the turn
+ * completes — at which point `buildThreadItems` swaps this item for the
+ * `plan-completion` item under the same list key.
+ *
+ * The pulsing icon is the progress affordance: a CSS animation inside `.stgm`,
+ * covered by the stylesheet's global `prefers-reduced-motion` rule (DD-015),
+ * and safe under virtualization (no `@starting-style`).
+ *
+ * All visual properties flow through `--stgm-*` tokens; the component is
+ * self-contained and embeddable.
+ */
+export const PlanStreamingCard = memo(function PlanStreamingCard({
+  title,
+  sizeBytes,
+  onOpenPlan,
+  className,
+}: PlanStreamingCardProps) {
+  return (
+    <div
+      role="region"
+      aria-label="Plan being written"
+      aria-busy="true"
+      className={cn(
+        "mx-4 flex flex-wrap items-center gap-x-3 gap-y-2 rounded-lg",
+        "border border-border-muted bg-card px-3 py-2.5",
+        className,
+      )}
+    >
+      <PlanIcon className="animate-pulse" />
+      <div className="min-w-0 flex-1 basis-48">
+        <div className="truncate text-sm font-medium text-foreground">
+          {title ?? "Writing plan…"}
+        </div>
+        <div className="text-[0.65rem] text-muted-foreground-faint">
+          {PLAN_ARTIFACT_NAME}
+          <span aria-hidden="true"> · </span>
+          <span role="status">Writing…</span>
+          <span aria-hidden="true"> · </span>
+          <span className="tabular-nums">{formatArtifactSize(sizeBytes)}</span>
+        </div>
+      </div>
+
+      {onOpenPlan && (
+        <button
+          type="button"
+          onClick={onOpenPlan}
+          className={cn(
+            "ml-auto inline-flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm",
+          )}
+        >
+          <ExpandIcon />
+          Open plan
+        </button>
+      )}
+    </div>
+  );
+});
+
+function PlanIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("shrink-0 text-muted-foreground-faint", className)}
+      aria-hidden="true"
+    >
+      <path d="M3 4h10M3 8h7M3 12h8" />
+      <path d="M12.5 10.5l1.5 1.5-1.5 1.5" />
+    </svg>
+  );
+}
+
+function ExpandIcon() {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0"
+      aria-hidden="true"
+    >
+      <path d="M7 1.5h3.5V5M10.5 1.5L6.5 5.5M5 10.5H1.5V7M1.5 10.5l4-4" />
+    </svg>
+  );
+}

package/src/execution/ResultView.tsx

@@ -13,18 +13,18 @@ import type {
   ToolContentBlock,
 } from "@stigmer/sdk";
 import { cn } from "@stigmer/theme";
-import { computeDiff } from "../version-history/computeDiff";
-import { DiffViewer } from "../version-history/DiffViewer";
-import { UnifiedDiffView } from "../version-history/UnifiedDiffView";
-import type { DiffHunk } from "../version-history/types";
-import { CollapsibleCode, CollapsiblePre, formatJson } from "./tool-rendering-primitives";
-import { FilePathLink } from "./FilePathLink";
-import { EmptyChangeNotice } from "./EmptyChangeNotice";
-import { TerminalSession } from "./TerminalSession";
-import { execIdFromStorageKey } from "./useFileChangeContent";
-import { useArtifactDownloadUrl } from "./useArtifactDownloadUrl";
-import { useArtifactDownload } from "./useArtifactDownload";
-import { useToolOutputContent } from "./useToolOutputContent";
+import { computeDiff } from "../version-history/computeDiff.js";
+import { DiffViewer } from "../version-history/DiffViewer.js";
+import { UnifiedDiffView } from "../version-history/UnifiedDiffView.js";
+import type { DiffHunk } from "../version-history/types.js";
+import { CollapsibleCode, CollapsiblePre, formatJson } from "./tool-rendering-primitives.js";
+import { FilePathLink } from "./FilePathLink.js";
+import { EmptyChangeNotice } from "./EmptyChangeNotice.js";
+import { TerminalSession } from "./TerminalSession.js";
+import { execIdFromStorageKey } from "./useFileChangeContent.js";
+import { useArtifactDownloadUrl } from "./useArtifactDownloadUrl.js";
+import { useArtifactDownload } from "./useArtifactDownload.js";
+import { useToolOutputContent } from "./useToolOutputContent.js";
 
 /** Props for {@link ResultView}. */
 export interface ResultViewProps {

package/src/execution/SandboxContext.ts

@@ -1,5 +1,5 @@
 import { createContext, useCallback, useContext } from "react";
-import { normalizeSandboxPaths } from "./sandbox-path-normalizer";
+import { normalizeSandboxPaths } from "./sandbox-path-normalizer.js";
 
 /**
  * Context value that carries the sandbox workspace root for display-time

package/src/execution/SessionVariablesInput.tsx

@@ -2,9 +2,9 @@
 
 import { useMemo } from "react";
 import { cn } from "@stigmer/theme";
-import type { UseSessionVariablesReturn } from "./useSessionVariables";
-import { useScrollShadows } from "../internal/useScrollShadows";
-import { ScrollFade } from "../internal/ScrollFade";
+import type { UseSessionVariablesReturn } from "./useSessionVariables.js";
+import { useScrollShadows } from "../internal/useScrollShadows.js";
+import { ScrollFade } from "../internal/ScrollFade.js";
 
 /** Props for {@link SessionVariablesInput}. */
 export interface SessionVariablesInputProps {

package/src/execution/SubAgentSection.tsx

@@ -8,22 +8,22 @@ import {
   MessageType,
   SubAgentStatus,
 } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
-import { useRenderTracer } from "../internal/dev";
-import { useAutoDisclosure } from "../internal/useAutoDisclosure";
-import { useElapsedSince, formatElapsed } from "../internal/useElapsedSince";
+import { useRenderTracer } from "../internal/dev/index.js";
+import { useAutoDisclosure } from "../internal/useAutoDisclosure.js";
+import { useElapsedSince, formatElapsed } from "../internal/useElapsedSince.js";
 import { cn } from "@stigmer/theme";
-import { formatDuration } from "./ToolCallDetail";
-import { MessageEntry } from "./MessageEntry";
-import { ToolCallGroup } from "./ToolCallGroup";
-import { ApprovalContext } from "./ApprovalContext";
-import { isInternalTool } from "./tool-categories";
-import { useThreadSelection } from "./useThreadSelection";
+import { formatDuration } from "./ToolCallDetail.js";
+import { MessageEntry } from "./MessageEntry.js";
+import { ToolCallGroup } from "./ToolCallGroup.js";
+import { ApprovalContext } from "./ApprovalContext.js";
+import { isInternalTool } from "./tool-categories.js";
+import { useThreadSelection } from "./useThreadSelection.js";
 import {
   TodoList,
   TodoInProgressIcon,
   findActiveTodo,
   todoCompletionSummary,
-} from "./TodoList";
+} from "./TodoList.js";
 
 /** Props for {@link SubAgentSection}. */
 export interface SubAgentSectionProps {

package/src/execution/SummarizationBadge.tsx

@@ -2,8 +2,8 @@
 
 import { memo, useCallback, useState } from "react";
 import { cn } from "@stigmer/theme";
-import type { SummarizationEventView } from "./useContextWindow";
-import { formatTokenCount } from "./UsageWidget";
+import type { SummarizationEventView } from "./useContextWindow.js";
+import { formatTokenCount } from "./UsageWidget.js";
 
 /** Props for {@link SummarizationBadge}. */
 export interface SummarizationBadgeProps {

package/src/execution/SummarizationCard.tsx

@@ -2,8 +2,8 @@
 
 import { memo } from "react";
 import { cn } from "@stigmer/theme";
-import type { SummarizationEventView } from "./useContextWindow";
-import { formatTokenCount } from "./UsageWidget";
+import type { SummarizationEventView } from "./useContextWindow.js";
+import { formatTokenCount } from "./UsageWidget.js";
 
 /** Props for {@link SummarizationCard}. */
 export interface SummarizationCardProps {

package/src/execution/TerminalSession.tsx

@@ -6,8 +6,8 @@
 // bespoke dark box — so it tracks the host theme, preset, and color mode.
 
 import { cn } from "@stigmer/theme";
-import { CollapsiblePre } from "./tool-rendering-primitives";
-import { useSandboxNormalize } from "./SandboxContext";
+import { CollapsiblePre } from "./tool-rendering-primitives.js";
+import { useSandboxNormalize } from "./SandboxContext.js";
 
 /** Props for {@link TerminalSession}. */
 export interface TerminalSessionProps {

package/src/execution/ThreadSelectionContext.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { createContext } from "react";
-import type { SelectionStore } from "../internal/store/selection-store";
+import type { SelectionStore } from "../internal/store/selection-store.js";
 
 /**
  * Carries the {@link SelectionStore} instance (stable ref) into the

package/src/execution/TodoCard.tsx

@@ -4,9 +4,9 @@ import { memo, useMemo } from "react";
 import type { TodoItem } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/todo_pb";
 import { TodoStatus } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import { cn } from "@stigmer/theme";
-import { useRenderTracer } from "../internal/dev";
-import { useAutoDisclosure } from "../internal/useAutoDisclosure";
-import { TodoList, findActiveTodo, todoCompletionSummary } from "./TodoList";
+import { useRenderTracer } from "../internal/dev/index.js";
+import { useAutoDisclosure } from "../internal/useAutoDisclosure.js";
+import { TodoList, findActiveTodo, todoCompletionSummary } from "./TodoList.js";
 
 /** Props for {@link TodoCard}. */
 export interface TodoCardProps {

package/src/execution/ToolArgsView.tsx

@@ -5,16 +5,16 @@ import { cn } from "@stigmer/theme";
 import {
   resolveToolCategory,
   extractWriteContentFromPreview,
-} from "./tool-categories";
-import type { ToolCategory, ToolCategoryInfo } from "./tool-categories";
-import { FilePathLink } from "./FilePathLink";
-import { McpArgsView, McpMetadataRow } from "./McpToolDetail";
-import { TerminalSession } from "./TerminalSession";
+} from "./tool-categories.js";
+import type { ToolCategory, ToolCategoryInfo } from "./tool-categories.js";
+import { FilePathLink } from "./FilePathLink.js";
+import { McpArgsView, McpMetadataRow } from "./McpToolDetail.js";
+import { TerminalSession } from "./TerminalSession.js";
 import {
   CollapsibleCode,
   FilePathIcon,
   formatJson,
-} from "./tool-rendering-primitives";
+} from "./tool-rendering-primitives.js";
 
 // ---------------------------------------------------------------------------
 // Public API

package/src/execution/ToolCallDetail.tsx

@@ -3,17 +3,17 @@
 import type { ToolCall } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
 import type { ToolResultView } from "@stigmer/sdk";
 import { cn } from "@stigmer/theme";
-import { BoundedContent } from "../internal/BoundedContent";
-import { McpToolDetail } from "./McpToolDetail";
-import { ToolArgsView } from "./ToolArgsView";
-import { ResultView } from "./ResultView";
-import { useToolPresentation } from "./tool-presenter";
-import type { ToolCategory } from "./tool-categories";
-import { CollapsiblePre } from "./tool-rendering-primitives";
+import { BoundedContent } from "../internal/BoundedContent.js";
+import { McpToolDetail } from "./McpToolDetail.js";
+import { ToolArgsView } from "./ToolArgsView.js";
+import { ResultView } from "./ResultView.js";
+import { useToolPresentation } from "./tool-presenter.js";
+import type { ToolCategory } from "./tool-categories.js";
+import { CollapsiblePre } from "./tool-rendering-primitives.js";
 import {
   describeApprovalPolicySource,
   isInformativePolicySource,
-} from "./approval-provenance";
+} from "./approval-provenance.js";
 
 /** Props for {@link ToolCallDetail}. */
 export interface ToolCallDetailProps {

package/src/execution/ToolCallGroup.tsx

@@ -4,11 +4,11 @@ import { memo, useMemo } from "react";
 import type { ToolCall } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
 import type { SubAgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/subagent_pb";
 import { cn } from "@stigmer/theme";
-import { useRenderTracer } from "../internal/dev";
-import { ToolCallItem } from "./ToolCallItem";
-import { ToolRunGroup } from "./ToolRunGroup";
-import { segmentToolCalls } from "./segment-tool-calls";
-import { isCollapsedToolCall } from "./tool-categories";
+import { useRenderTracer } from "../internal/dev/index.js";
+import { ToolCallItem } from "./ToolCallItem.js";
+import { ToolRunGroup } from "./ToolRunGroup.js";
+import { segmentToolCalls } from "./segment-tool-calls.js";
+import { isCollapsedToolCall } from "./tool-categories.js";
 
 /** Props for {@link ToolCallGroup}. */
 export interface ToolCallGroupProps {