@stigmer/react 3.1.0 → 3.1.2

package/src/composer/SessionComposer.tsx

@@ -3,38 +3,38 @@
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, type DragEvent, type KeyboardEvent } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage, type AttachmentInput, type EnvVarInput, type McpServerUsageInput, type ResourceRef } from "@stigmer/sdk";
-import { useComposer } from "./useComposer";
-import { ComposerToolbar } from "./ComposerToolbar";
-import { type ConfigureMenuItem } from "./ConfigureMenu";
-import type { HarnessOption } from "../models/harness";
-import type { InteractionModeOption } from "./InteractionModePicker";
-import { parseModelKey } from "../models/registry";
-import { WorkspaceEditor } from "../workspace/WorkspaceEditor";
-import { AgentPicker } from "../agent/AgentPicker";
-import { AgentEnvForm, type AgentEnvFormSubmitOptions } from "../agent/AgentEnvForm";
-import { useAgentSetup, type AgentResolution } from "../agent/useAgentSetup";
-import { SecretFlowErrorGuide, isSecretFlowError } from "../error/SecretFlowErrorGuide";
-import { McpServerPicker } from "../mcp-server/McpServerPicker";
-import { useMcpServerSetup } from "../mcp-server/useMcpServerSetup";
+import { useComposer } from "./useComposer.js";
+import { ComposerToolbar } from "./ComposerToolbar.js";
+import { type ConfigureMenuItem } from "./ConfigureMenu.js";
+import type { HarnessOption } from "../models/harness.js";
+import type { InteractionModeOption } from "./InteractionModePicker.js";
+import { parseModelKey } from "../models/registry.js";
+import { WorkspaceEditor } from "../workspace/WorkspaceEditor.js";
+import { AgentPicker } from "../agent/AgentPicker.js";
+import { AgentEnvForm, type AgentEnvFormSubmitOptions } from "../agent/AgentEnvForm.js";
+import { useAgentSetup, type AgentResolution } from "../agent/useAgentSetup.js";
+import { SecretFlowErrorGuide, isSecretFlowError } from "../error/SecretFlowErrorGuide.js";
+import { McpServerPicker } from "../mcp-server/McpServerPicker.js";
+import { useMcpServerSetup } from "../mcp-server/useMcpServerSetup.js";
 import { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
-import { SkillPicker } from "../skill/SkillPicker";
-import { SessionVariablesInput } from "../execution/SessionVariablesInput";
-import type { UseSessionVariablesReturn } from "../execution/useSessionVariables";
-import type { UseWorkspaceEntriesReturn } from "../workspace/useWorkspaceEntries";
-import type { UseGitHubConnectionReturn } from "../github/useGitHubConnection";
-import { useAttachments } from "../attachment/useAttachments";
-import { AttachmentChipList } from "../attachment/AttachmentChipList";
-import { useFileReferences } from "../file-reference/useFileReferences";
-import { FileReferenceChipList } from "../file-reference/FileReferenceChipList";
-import { FILE_REF_MIME } from "../internal/file-tree";
-import { useSessionEnvPool } from "../environment/useSessionEnvPool";
-import { usePersonalEnvironment } from "../environment/usePersonalEnvironment";
-import { useStigmer } from "../hooks";
+import { SkillPicker } from "../skill/SkillPicker.js";
+import { SessionVariablesInput } from "../execution/SessionVariablesInput.js";
+import type { UseSessionVariablesReturn } from "../execution/useSessionVariables.js";
+import type { UseWorkspaceEntriesReturn } from "../workspace/useWorkspaceEntries.js";
+import type { UseGitHubConnectionReturn } from "../github/useGitHubConnection.js";
+import { useAttachments } from "../attachment/useAttachments.js";
+import { AttachmentChipList } from "../attachment/AttachmentChipList.js";
+import { useFileReferences } from "../file-reference/useFileReferences.js";
+import { FileReferenceChipList } from "../file-reference/FileReferenceChipList.js";
+import { FILE_REF_MIME } from "../internal/file-tree/index.js";
+import { useSessionEnvPool } from "../environment/useSessionEnvPool.js";
+import { usePersonalEnvironment } from "../environment/usePersonalEnvironment.js";
+import { useStigmer } from "../hooks.js";
 import {
   SYSTEM_ENV_VAR_KEYS,
   resolveSystemEnvVarValues,
-} from "../environment/systemEnvVars";
-import { useRenderTracer } from "../internal/dev";
+} from "../environment/systemEnvVars.js";
+import { useRenderTracer } from "../internal/dev/index.js";
 import {
   AgentIcon,
   McpServerIcon,
@@ -42,7 +42,7 @@ import {
   SecretsIcon,
   AlertTriangleIcon,
   ResolveSpinner,
-} from "./icons";
+} from "./icons.js";
 
 /**
  * Imperative handle exposed by {@link SessionComposer} via `ref`.
@@ -58,8 +58,9 @@ import {
  *
  * function handleBuildFromPlan() {
  *   // Switch to Agent mode and run immediately — no manual Send.
- *   composerRef.current?.submit("Implement the plan above", {
+ *   composerRef.current?.submit("Build from plan", {
  *     interactionMode: "agent",
+ *     buildFromPlan: true,
  *   });
  * }
  *
@@ -83,10 +84,22 @@ export interface SessionComposerHandle {
    * @param options.interactionMode - Force the interaction mode for this one
    *   submission, overriding the picker. Avoids the same-tick race when the
    *   caller also calls `onInteractionModeChange` just before submitting.
+   * @param options.attachments - Pre-uploaded attachments (storage keys from
+   *   `agentExecution.uploadAttachment`) to include with this one submission,
+   *   in addition to any files attached in the composer. Used by "Build from
+   *   plan" to deliver the approved `plan.md` to the implement execution.
+   * @param options.buildFromPlan - Marks this submission as the implement
+   *   turn of a Plan → Build handoff (`execution_config.build_from_plan`).
+   *   The runner injects the implement-plan directive and the thread renders
+   *   the turn as a compact chip; the message stays a short label.
    */
   submit(
     message: string,
-    options?: { interactionMode?: InteractionModeOption },
+    options?: {
+      interactionMode?: InteractionModeOption;
+      attachments?: AttachmentInput[];
+      buildFromPlan?: boolean;
+    },
   ): void;
 }
 
@@ -142,6 +155,18 @@ export interface SessionComposerSubmitContext {
    * Pass to execution creation as `workspaceFileRefs`.
    */
   readonly workspaceFileRefs?: string[];
+  /**
+   * The submission is a "Build from plan" turn.
+   *
+   * Only ever set through {@link SessionComposerHandle.submit} (the thread
+   * card / plan editor CTA) — there is no composer UI for it. Pass to
+   * execution creation as `execution_config.build_from_plan`; the runner
+   * injects the implement-plan directive and the thread renders the turn
+   * as a compact chip.
+   *
+   * `undefined` for ordinary submissions.
+   */
+  readonly buildFromPlan?: boolean;
 }
 
 /** Props for {@link SessionComposer}. */
@@ -724,7 +749,14 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
   // ---------------------------------------------------------------------------
 
   const handleSubmit = useCallback(
-    async (message: string, modeOverride?: InteractionModeOption) => {
+    async (
+      message: string,
+      overrides?: {
+        interactionMode?: InteractionModeOption;
+        attachments?: AttachmentInput[];
+        buildFromPlan?: boolean;
+      },
+    ) => {
       // Persist save-for-future manual secrets before building runtimeEnv
       if (sessionVariables?.hasSaveForFutureEntries) {
         const saveVars = sessionVariables.toSaveForFutureEnv();
@@ -763,27 +795,34 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
         Object.assign(env, sessionVariables.toRuntimeEnv());
       }
 
-      const attachmentInputs = enableAttachments
+      // Composer-attached files plus caller-supplied extras (e.g. the approved
+      // plan.md from "Build from plan") travel as one attachment list.
+      const composerAttachments = enableAttachments
         ? attachments.toAttachmentInputs()
-        : undefined;
+        : [];
+      const attachmentInputs = [
+        ...composerAttachments,
+        ...(overrides?.attachments ?? []),
+      ];
 
       const hasEnv = Object.keys(env).length > 0;
-      const hasAttachments =
-        attachmentInputs !== undefined && attachmentInputs.length > 0;
+      const hasAttachments = attachmentInputs.length > 0;
       const effectiveMode =
-        modeOverride ??
+        overrides?.interactionMode ??
         (showInteractionModePicker && interactionMode
           ? interactionMode
           : undefined);
       const hasFileRefs = enableFileReferences && fileRefs.hasRefs;
+      const buildFromPlan = overrides?.buildFromPlan;
 
       const context: SessionComposerSubmitContext | undefined =
-        hasEnv || hasAttachments || effectiveMode || hasFileRefs
+        hasEnv || hasAttachments || effectiveMode || hasFileRefs || buildFromPlan
           ? {
               runtimeEnv: hasEnv ? env : undefined,
               attachments: hasAttachments ? attachmentInputs : undefined,
               interactionMode: effectiveMode,
               workspaceFileRefs: hasFileRefs ? [...fileRefs.refs] : undefined,
+              buildFromPlan,
             }
           : undefined;
 
@@ -813,7 +852,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
     submit: (message, options) => {
       const trimmed = message.trim();
       if (!trimmed || isDisabled) return;
-      void handleSubmit(trimmed, options?.interactionMode);
+      void handleSubmit(trimmed, options);
     },
   }), [composer.setMessage, composer.textareaRef, handleSubmit, isDisabled]);
 
@@ -1343,6 +1382,9 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
         className={cn(
           "rounded-xl border border-border bg-card shadow-sm",
           "focus-within:ring-2 focus-within:ring-ring",
+          // Plan mode tints the frame so the active mode is visible at a
+          // glance, without opening the picker. Themeable via --stgm-primary-muted.
+          interactionMode === "plan" && "border-primary-muted",
           isDisabled && !stopMode && "opacity-50",
           isDragOver && "ring-2 ring-primary/50",
         )}

package/src/composer/__tests__/SessionComposer-contract.test.tsx

@@ -125,7 +125,7 @@ describe("SessionComposer — public contract", () => {
   });
 });
 
-describe("SessionComposer — imperative submit (Implement plan)", () => {
+describe("SessionComposer — imperative submit (Build from plan)", () => {
   it("submits a message with the interactionMode override, even when the picker is 'plan'", async () => {
     const ref = createRef<SessionComposerHandle>();
     const { onSubmit } = renderComposer({
@@ -134,13 +134,13 @@ describe("SessionComposer — imperative submit (Implement plan)", () => {
       interactionMode: "plan",
     });
 
-    ref.current!.submit("Implement the plan above", { interactionMode: "agent" });
+    ref.current!.submit("Build from plan", { interactionMode: "agent" });
 
     await waitFor(() => {
       expect(onSubmit).toHaveBeenCalledOnce();
     });
     const [message, , context] = onSubmit.mock.calls[0];
-    expect(message).toBe("Implement the plan above");
+    expect(message).toBe("Build from plan");
     // The override must win over the current picker value ("plan") so the
     // implement run executes in Agent mode regardless of render timing.
     expect(context?.interactionMode).toBe("agent");
@@ -150,7 +150,7 @@ describe("SessionComposer — imperative submit (Implement plan)", () => {
     const ref = createRef<SessionComposerHandle>();
     const { onSubmit } = renderComposer({ ref, disabled: true });
 
-    ref.current!.submit("Implement the plan above", { interactionMode: "agent" });
+    ref.current!.submit("Build from plan", { interactionMode: "agent" });
 
     expect(onSubmit).not.toHaveBeenCalled();
   });
@@ -163,4 +163,58 @@ describe("SessionComposer — imperative submit (Implement plan)", () => {
 
     expect(onSubmit).not.toHaveBeenCalled();
   });
+
+  it("carries caller-supplied attachments into the submit context (approved plan.md)", async () => {
+    const ref = createRef<SessionComposerHandle>();
+    const { onSubmit } = renderComposer({ ref });
+
+    const planAttachment = {
+      filename: "plan.md",
+      storageKey: "attachments/01ABC/plan.md",
+      mountPath: ".stigmer/inputs/plan.md",
+      contentType: "text/markdown",
+    };
+    ref.current!.submit("Build from plan", {
+      interactionMode: "agent",
+      attachments: [planAttachment],
+    });
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledOnce();
+    });
+    const [, , context] = onSubmit.mock.calls[0];
+    expect(context?.attachments).toEqual([planAttachment]);
+    expect(context?.interactionMode).toBe("agent");
+  });
+
+  it("carries the buildFromPlan flag into the submit context", async () => {
+    const ref = createRef<SessionComposerHandle>();
+    const { onSubmit } = renderComposer({ ref });
+
+    ref.current!.submit("Build from plan", {
+      interactionMode: "agent",
+      buildFromPlan: true,
+    });
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledOnce();
+    });
+    const [, , context] = onSubmit.mock.calls[0];
+    expect(context?.buildFromPlan).toBe(true);
+    expect(context?.interactionMode).toBe("agent");
+  });
+
+  it("leaves buildFromPlan unset for ordinary submissions", async () => {
+    const { onSubmit } = renderComposer();
+
+    const textarea = screen.getByRole("textbox");
+    fireEvent.change(textarea, { target: { value: "Hello world" } });
+    fireEvent.keyDown(textarea, { key: "Enter", shiftKey: false });
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledOnce();
+    });
+    const [, , context] = onSubmit.mock.calls[0];
+    expect(context?.buildFromPlan).toBeUndefined();
+  });
 });

package/src/composer/index.ts

@@ -1,20 +1,20 @@
-export { useComposer } from "./useComposer";
-export type { UseComposerOptions, UseComposerReturn } from "./useComposer";
+export { useComposer } from "./useComposer.js";
+export type { UseComposerOptions, UseComposerReturn } from "./useComposer.js";
 
-export { SessionComposer } from "./SessionComposer";
+export { SessionComposer } from "./SessionComposer.js";
 export type {
   SessionComposerHandle,
   SessionComposerProps,
   SessionComposerSubmitContext,
-} from "./SessionComposer";
+} from "./SessionComposer.js";
 
-export { InteractionModePicker } from "./InteractionModePicker";
+export { InteractionModePicker } from "./InteractionModePicker.js";
 export type {
   InteractionModePickerProps,
   InteractionModeOption,
-} from "./InteractionModePicker";
+} from "./InteractionModePicker.js";
 
 export {
   toProtoInteractionMode,
   fromProtoInteractionMode,
-} from "./interaction-mode";
+} from "./interaction-mode.js";

package/src/composer/interaction-mode.ts

@@ -1,5 +1,5 @@
 import { InteractionMode } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
-import type { InteractionModeOption } from "./InteractionModePicker";
+import type { InteractionModeOption } from "./InteractionModePicker.js";
 
 /**
  * Convert an {@link InteractionModeOption} string to the proto

package/src/dashboard/DashboardFailedRuns.tsx

@@ -2,7 +2,7 @@
 
 import { memo } from "react";
 import { cn } from "@stigmer/theme";
-import type { DashboardFailedRun } from "./types";
+import type { DashboardFailedRun } from "./types.js";
 
 export interface DashboardFailedRunsProps {
   readonly failedRuns: readonly DashboardFailedRun[];

package/src/dashboard/DashboardKPICards.tsx

@@ -2,7 +2,7 @@
 
 import { memo } from "react";
 import { cn } from "@stigmer/theme";
-import type { DashboardSummary } from "./types";
+import type { DashboardSummary } from "./types.js";
 
 export interface DashboardKPICardsProps {
   readonly summary: DashboardSummary | null;

package/src/dashboard/OperationalDashboard.tsx

@@ -2,13 +2,13 @@
 
 import { memo, useCallback } from "react";
 import { cn } from "@stigmer/theme";
-import { usePendingApprovals } from "../workflow/usePendingApprovals";
-import { PendingApprovalsWidget } from "../workflow/PendingApprovalsWidget";
-import { useDashboardSummary, type UseDashboardSummaryOptions } from "./useDashboardSummary";
-import { useDashboardFailedRuns } from "./useDashboardFailedRuns";
-import { DashboardKPICards } from "./DashboardKPICards";
-import { DashboardFailedRuns } from "./DashboardFailedRuns";
-import type { DashboardFailedRun } from "./types";
+import { usePendingApprovals } from "../workflow/usePendingApprovals.js";
+import { PendingApprovalsWidget } from "../workflow/PendingApprovalsWidget.js";
+import { useDashboardSummary, type UseDashboardSummaryOptions } from "./useDashboardSummary.js";
+import { useDashboardFailedRuns } from "./useDashboardFailedRuns.js";
+import { DashboardKPICards } from "./DashboardKPICards.js";
+import { DashboardFailedRuns } from "./DashboardFailedRuns.js";
+import type { DashboardFailedRun } from "./types.js";
 
 export interface OperationalDashboardProps {
   /** Organization slug for execution summaries and pending approvals. */

package/src/dashboard/index.ts

@@ -1,5 +1,5 @@
 // ─── Types ──────────────────────────────────────────────────────────────────
-export type { DashboardSummary, DashboardFailedRun } from "./types";
+export type { DashboardSummary, DashboardFailedRun } from "./types.js";
 
 // ─── Data Hooks ─────────────────────────────────────────────────────────────
 export {
@@ -7,31 +7,31 @@ export {
   AgentExecutionSummaryTimeWindow,
   type UseAgentExecutionSummaryOptions,
   type UseAgentExecutionSummaryReturn,
-} from "./useAgentExecutionSummary";
+} from "./useAgentExecutionSummary.js";
 
 export {
   useDashboardSummary,
   type UseDashboardSummaryOptions,
   type UseDashboardSummaryReturn,
-} from "./useDashboardSummary";
+} from "./useDashboardSummary.js";
 
 export {
   useDashboardFailedRuns,
   type UseDashboardFailedRunsReturn,
-} from "./useDashboardFailedRuns";
+} from "./useDashboardFailedRuns.js";
 
 // ─── Styled Components ─────────────────────────────────────────────────────
 export {
   DashboardKPICards,
   type DashboardKPICardsProps,
-} from "./DashboardKPICards";
+} from "./DashboardKPICards.js";
 
 export {
   DashboardFailedRuns,
   type DashboardFailedRunsProps,
-} from "./DashboardFailedRuns";
+} from "./DashboardFailedRuns.js";
 
 export {
   OperationalDashboard,
   type OperationalDashboardProps,
-} from "./OperationalDashboard";
+} from "./OperationalDashboard.js";

package/src/dashboard/useAgentExecutionSummary.ts

@@ -6,8 +6,8 @@ import {
   AgentExecutionSummaryTimeWindow,
   GetAgentExecutionSummaryRequestSchema,
 } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/io_pb";
-import { useStigmer } from "../hooks";
-import { useFetch } from "../internal/useFetch";
+import { useStigmer } from "../hooks.js";
+import { useFetch } from "../internal/useFetch.js";
 
 export { AgentExecutionSummaryTimeWindow };
 

package/src/dashboard/useDashboardFailedRuns.ts

@@ -9,9 +9,9 @@ import { ListAgentExecutionsRequestSchema } from "@stigmer/protos/ai/stigmer/age
 import { ListWorkflowExecutionsRequestSchema } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/io_pb";
 import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
 import type { WorkflowExecution } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/api_pb";
-import { useStigmer } from "../hooks";
-import { useFetch } from "../internal/useFetch";
-import type { DashboardFailedRun } from "./types";
+import { useStigmer } from "../hooks.js";
+import { useFetch } from "../internal/useFetch.js";
+import type { DashboardFailedRun } from "./types.js";
 
 const EPOCH = new Date(0);
 const EMPTY: readonly DashboardFailedRun[] = [];

package/src/dashboard/useDashboardSummary.ts

@@ -6,14 +6,14 @@ import { ExecutionPhase as AgentPhase } from "@stigmer/protos/ai/stigmer/agentic
 import {
   useWorkflowDashboardSummary,
   type UseWorkflowDashboardSummaryOptions,
-} from "../workflow/useWorkflowDashboardSummary";
-import { useOrgUsageReport } from "../usage/useOrgUsageReport";
-import { dateRangeFromPreset } from "../usage/date-range";
+} from "../workflow/useWorkflowDashboardSummary.js";
+import { useOrgUsageReport } from "../usage/useOrgUsageReport.js";
+import { dateRangeFromPreset } from "../usage/date-range.js";
 import {
   useAgentExecutionSummary,
   AgentExecutionSummaryTimeWindow,
-} from "./useAgentExecutionSummary";
-import type { DashboardSummary } from "./types";
+} from "./useAgentExecutionSummary.js";
+import type { DashboardSummary } from "./types.js";
 
 /** Options for {@link useDashboardSummary}. */
 export interface UseDashboardSummaryOptions {

package/src/dependency-graph/DependencyGraph.tsx

@@ -2,8 +2,8 @@
 
 import { useCallback, useRef, type KeyboardEvent } from "react";
 import { cn } from "@stigmer/theme";
-import type { DependencyGraphProps } from "./types";
-import { DependencyTreeNode } from "./DependencyTreeNode";
+import type { DependencyGraphProps } from "./types.js";
+import { DependencyTreeNode } from "./DependencyTreeNode.js";
 
 /**
  * Accessible CSS-based tree visualization of an agent's dependencies.

package/src/dependency-graph/DependencyTreeNode.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useState, type KeyboardEvent } from "react";
 import { cn } from "@stigmer/theme";
-import type { DependencyNode, NodeKind } from "./types";
+import type { DependencyNode, NodeKind } from "./types.js";
 
 interface DependencyTreeNodeProps {
   readonly node: DependencyNode;

package/src/dependency-graph/index.ts

@@ -6,10 +6,10 @@ export type {
   DependencyGraphProps,
   UseDependencyGraphOptions,
   UseDependencyGraphReturn,
-} from "./types";
+} from "./types.js";
 
 // Hooks
-export { useDependencyGraph } from "./useDependencyGraph";
+export { useDependencyGraph } from "./useDependencyGraph.js";
 
 // Components
-export { DependencyGraph } from "./DependencyGraph";
+export { DependencyGraph } from "./DependencyGraph.js";

package/src/dependency-graph/useDependencyGraph.ts

@@ -6,7 +6,7 @@ import type {
   DependencyTree,
   UseDependencyGraphOptions,
   UseDependencyGraphReturn,
-} from "./types";
+} from "./types.js";
 
 /**
  * Pure transformation hook that converts an `AgentSpec` into a

package/src/empty-state/EmptyState.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { cn } from "@stigmer/theme";
-import { useEmptyState } from "./useEmptyState";
-import type { EmptyStateProps } from "./types";
+import { useEmptyState } from "./useEmptyState.js";
+import type { EmptyStateProps } from "./types.js";
 
 /**
  * A semantic, accessible empty state component supporting four distinct

package/src/empty-state/index.ts

@@ -1,9 +1,9 @@
-export { EmptyState } from "./EmptyState";
-export { useEmptyState } from "./useEmptyState";
+export { EmptyState } from "./EmptyState.js";
+export { useEmptyState } from "./useEmptyState.js";
 export type {
   EmptyStateVariant,
   EmptyStateAction,
   EmptyStateProps,
   UseEmptyStateOptions,
   UseEmptyStateReturn,
-} from "./types";
+} from "./types.js";

package/src/empty-state/useEmptyState.ts

@@ -1,6 +1,6 @@
 import { useMemo, createElement } from "react";
 import { Package, SearchX, Lock, AlertCircle } from "lucide-react";
-import type { UseEmptyStateOptions, UseEmptyStateReturn } from "./types";
+import type { UseEmptyStateOptions, UseEmptyStateReturn } from "./types.js";
 
 const ICON_CLASSES = "h-10 w-10";
 

package/src/environment/CreateEnvironmentForm.tsx

@@ -4,7 +4,7 @@ import { useCallback, useState, type FormEvent } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import type { Environment } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/api_pb";
-import { useCreateEnvironment } from "./useCreateEnvironment";
+import { useCreateEnvironment } from "./useCreateEnvironment.js";
 
 // ---------------------------------------------------------------------------
 // Public API

package/src/environment/EnvVarForm.tsx

@@ -3,8 +3,8 @@
 import { useState, useCallback, useRef, useId, type FormEvent } from "react";
 import { cn } from "@stigmer/theme";
 import type { EnvVarInput } from "@stigmer/sdk";
-import { useScrollShadows } from "../internal/useScrollShadows";
-import { ScrollFade } from "../internal/ScrollFade";
+import { useScrollShadows } from "../internal/useScrollShadows.js";
+import { ScrollFade } from "../internal/ScrollFade.js";
 
 /**
  * Describes a single environment variable the form should collect.

package/src/environment/EnvironmentListPanel.tsx

@@ -4,8 +4,8 @@ import { useCallback, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import type { Environment } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/api_pb";
-import { useEnvironmentList } from "./useEnvironmentList";
-import { EnvironmentVariableEditor } from "./EnvironmentVariableEditor";
+import { useEnvironmentList } from "./useEnvironmentList.js";
+import { EnvironmentVariableEditor } from "./EnvironmentVariableEditor.js";
 
 // ---------------------------------------------------------------------------
 // Public API

package/src/environment/EnvironmentPicker.tsx

@@ -4,7 +4,7 @@ import { useCallback, useId, useMemo } from "react";
 import { cn } from "@stigmer/theme";
 import type { Environment } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/api_pb";
 import type { ResourceRef } from "@stigmer/sdk";
-import { useEnvironmentList } from "./useEnvironmentList";
+import { useEnvironmentList } from "./useEnvironmentList.js";
 
 /** Props for {@link EnvironmentPicker}. */
 export interface EnvironmentPickerProps {

package/src/environment/EnvironmentVariableEditor.tsx

@@ -10,11 +10,11 @@ import {
 import { cn } from "@stigmer/theme";
 import { getUserMessage, type EnvVarInput } from "@stigmer/sdk";
 import type { Environment } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/api_pb";
-import { useStigmer } from "../hooks";
-import { toError } from "../internal/toError";
-import { useUpdateEnvironmentVariables } from "./useUpdateEnvironmentVariables";
-import { useRemoveEnvironmentVariables } from "./useRemoveEnvironmentVariables";
-import { useRevealSecretValue } from "./useRevealSecretValue";
+import { useStigmer } from "../hooks.js";
+import { toError } from "../internal/toError.js";
+import { useUpdateEnvironmentVariables } from "./useUpdateEnvironmentVariables.js";
+import { useRemoveEnvironmentVariables } from "./useRemoveEnvironmentVariables.js";
+import { useRevealSecretValue } from "./useRevealSecretValue.js";
 
 // ---------------------------------------------------------------------------
 // Public API

package/src/environment/diffEnv.ts

@@ -1,4 +1,4 @@
-import type { EnvVarFormVariable } from "./EnvVarForm";
+import type { EnvVarFormVariable } from "./EnvVarForm.js";
 
 /**
  * Computes the list of environment variables a resource requires that