@stigmer/react 3.12.0 → 3.12.2

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

@@ -0,0 +1,220 @@
+import { describe, it, expect, vi, afterEach, beforeAll } from "vitest";
+import { render, screen, cleanup, fireEvent, waitFor } from "@testing-library/react";
+import { type ReactNode } from "react";
+import type { Stigmer } from "@stigmer/sdk";
+import { StigmerContext } from "../../context";
+import { ModelRegistryContext } from "../../models/ModelRegistryContext";
+import type { ModelInfo } from "../../models/registry";
+import { SessionComposer } from "../SessionComposer";
+
+// Shim ResizeObserver for Base UI's positioner (the
+// scheduleCreation.test.tsx pattern).
+beforeAll(() => {
+  if (!("ResizeObserver" in globalThis)) {
+    (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      };
+  }
+});
+
+/**
+ * Effective run selection coherence (stigmer/stigmer#663): the submission
+ * must carry exactly the model the pill displays, and "fast" must only
+ * ride the wire while the effective model prices it. The original defect:
+ * an empty composer displayed the registry fallback with a toggleable
+ * FAST badge, then sent `service_tier: fast` with NO model — refused
+ * fail-closed by the server ("Couldn't send." + a Retry that can never
+ * succeed).
+ */
+
+const AUTO: ModelInfo = {
+  modelId: "default",
+  provider: "cursor",
+  displayName: "Auto",
+  shortDescription: "Automatic model selection",
+  speedTier: "fast",
+  costTier: "standard",
+  harness: "cursor",
+  featured: true,
+  serviceTiers: [],
+};
+
+const FAST_CAPABLE: ModelInfo = {
+  modelId: "composer-2.5",
+  provider: "cursor",
+  displayName: "Composer 2.5",
+  shortDescription: "Fast agentic model",
+  speedTier: "fastest",
+  costTier: "economy",
+  harness: "cursor",
+  featured: true,
+  serviceTiers: ["fast"],
+};
+
+const NO_FAST: ModelInfo = {
+  modelId: "gpt-5.3-codex",
+  provider: "openai",
+  displayName: "GPT-5.3 Codex",
+  shortDescription: "No fast variant",
+  speedTier: "fast",
+  costTier: "standard",
+  harness: "cursor",
+  featured: true,
+  serviceTiers: [],
+};
+
+function createMinimalStigmerMock(): Stigmer {
+  return {
+    agentExecution: { uploadAttachment: vi.fn() },
+    environment: { getPersonal: vi.fn().mockResolvedValue(null) },
+    baseUrl: "http://localhost:8080",
+    getAuthCredential: vi.fn().mockResolvedValue("test-token"),
+    config: {
+      baseUrl: "http://localhost:8080",
+      getAccessToken: vi.fn().mockResolvedValue(""),
+    },
+  } as unknown as Stigmer;
+}
+
+function createWrapper(
+  client: Stigmer,
+  registry: { models: readonly ModelInfo[]; isLoading?: boolean },
+) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <StigmerContext.Provider value={client}>
+        <ModelRegistryContext.Provider
+          value={{
+            models: [...registry.models],
+            isLoading: registry.isLoading ?? false,
+            error: null,
+            refetch: vi.fn(),
+          }}
+        >
+          {children}
+        </ModelRegistryContext.Provider>
+      </StigmerContext.Provider>
+    );
+  };
+}
+
+function submitMessage(message: string) {
+  const textarea = screen.getByRole("textbox");
+  fireEvent.change(textarea, { target: { value: message } });
+  fireEvent.keyDown(textarea, { key: "Enter", shiftKey: false });
+}
+
+/** Open the picker and flip the fast-tier switch (Base UI portals mount
+ * asynchronously in jsdom — the switch is awaited). */
+async function toggleFastTier(triggerName: RegExp) {
+  fireEvent.click(screen.getByRole("button", { name: triggerName }));
+  const toggle = await screen.findByRole("switch", { name: "Fast tier" });
+  fireEvent.click(toggle);
+  fireEvent.keyDown(document.activeElement ?? document.body, { key: "Escape" });
+}
+
+afterEach(cleanup);
+
+describe("SessionComposer — effective run selection (#663)", () => {
+  it("adopts the displayed harness default when no model is selected", async () => {
+    const onSubmit = vi.fn();
+    render(
+      <SessionComposer onSubmit={onSubmit} harness="cursor" />,
+      { wrapper: createWrapper(createMinimalStigmerMock(), { models: [FAST_CAPABLE, AUTO, NO_FAST] }) },
+    );
+
+    // The pill displays the harness default (Auto for cursor)…
+    expect(screen.getByRole("button", { name: /Auto/ })).toBeTruthy();
+
+    submitMessage("hello");
+
+    // …and the submission carries exactly that model, never undefined.
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledOnce());
+    expect(onSubmit.mock.calls[0][1]).toBe("default");
+  });
+
+  it("renders no fast-tier switch for a fresh cursor composer (Auto has no tier dimension)", async () => {
+    render(
+      <SessionComposer onSubmit={vi.fn()} harness="cursor" />,
+      { wrapper: createWrapper(createMinimalStigmerMock(), { models: [FAST_CAPABLE, AUTO, NO_FAST] }) },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /Auto/ }));
+    // Popover content mounts async; settle on the options area appearing.
+    await screen.findByRole("dialog");
+    expect(screen.queryByRole("switch", { name: "Fast tier" })).toBeNull();
+  });
+
+  it("drops an armed fast tier when a prop-driven model change lands on a model without a fast variant", async () => {
+    const onSubmit = vi.fn();
+    const wrapper = createWrapper(createMinimalStigmerMock(), {
+      models: [FAST_CAPABLE, AUTO, NO_FAST],
+    });
+    const { rerender } = render(
+      <SessionComposer onSubmit={onSubmit} harness="cursor" defaultModelId="composer-2.5" />,
+      { wrapper },
+    );
+
+    // Arm fast on the fast-capable model (user-driven), then let the host
+    // re-sync `defaultModelId` onto a model with no fast variant — the
+    // path that bypasses ModelSelector's user-pick reset.
+    await toggleFastTier(/Composer 2\.5/);
+    rerender(
+      <SessionComposer onSubmit={onSubmit} harness="cursor" defaultModelId="gpt-5.3-codex" />,
+    );
+
+    submitMessage("resynced");
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledOnce());
+    expect(onSubmit.mock.calls[0][1]).toBe("gpt-5.3-codex");
+    // The armed tier is unsendable, not just unstyled (#357 fail-closed rule).
+    expect(onSubmit.mock.calls[0][2]?.serviceTier).toBeUndefined();
+  });
+
+  it("never adopts a default while the model selector is hidden (the hider owns the model)", async () => {
+    const onSubmit = vi.fn();
+    render(
+      <SessionComposer onSubmit={onSubmit} harness="cursor" showModelSelector={false} />,
+      { wrapper: createWrapper(createMinimalStigmerMock(), { models: [FAST_CAPABLE, AUTO, NO_FAST] }) },
+    );
+
+    submitMessage("guest-shaped send");
+
+    // No pill, no promise: guests' server-side profile (and #664 pins)
+    // own the model — the composer must not invent one.
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledOnce());
+    expect(onSubmit.mock.calls[0][1]).toBeUndefined();
+  });
+
+  it("adopts the displayed default over a model id the registry no longer lists", async () => {
+    const onSubmit = vi.fn();
+    render(
+      <SessionComposer onSubmit={onSubmit} harness="cursor" defaultModelId="retired-model" />,
+      { wrapper: createWrapper(createMinimalStigmerMock(), { models: [FAST_CAPABLE, AUTO, NO_FAST] }) },
+    );
+
+    submitMessage("stale id");
+
+    // The pill cannot display "retired-model" (unknown → falls back to the
+    // harness default), so the payload must not carry it either.
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledOnce());
+    expect(onSubmit.mock.calls[0][1]).toBe("default");
+  });
+
+  it("passes the raw model id through while the registry is still loading", async () => {
+    const onSubmit = vi.fn();
+    render(
+      <SessionComposer onSubmit={onSubmit} harness="cursor" defaultModelId="composer-2.5" />,
+      { wrapper: createWrapper(createMinimalStigmerMock(), { models: [], isLoading: true }) },
+    );
+
+    submitMessage("early send");
+
+    // Nothing can be classified mid-load: adopt nothing, rewrite nothing.
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledOnce());
+    expect(onSubmit.mock.calls[0][1]).toBe("composer-2.5");
+  });
+});

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

@@ -0,0 +1,222 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent, act } from "@testing-library/react";
+import type { ReactNode } from "react";
+import type { Stigmer } from "@stigmer/sdk";
+import { StigmerContext } from "../../context";
+import { ModelRegistryContext } from "../../models/ModelRegistryContext";
+import type { ModelRegistryState } from "../../models/ModelRegistryContext";
+import { parseRegistryDocument } from "../../models/registry";
+import type { VisionLimits } from "../../models/registry";
+import { SessionComposer } from "../SessionComposer";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** The production budget the registry advertises (3 MiB / 4 MiB / 10). */
+const LIMITS: VisionLimits = {
+  maxImageBytes: 3 * 1024 * 1024,
+  maxTotalBytes: 4 * 1024 * 1024,
+  maxImages: 10,
+};
+
+/**
+ * Registry fixture routed through the REAL document parser so this test
+ * also breaks if the parse contract drifts. kimi-k3 mirrors the live
+ * registry's explicitly-blind cursor model.
+ */
+const REGISTRY_DOCUMENT = parseRegistryDocument({
+  limits: { vision: { ...LIMITS } },
+  models: [
+    {
+      id: "claude-sonnet-4.6",
+      displayName: "Claude Sonnet 4.6",
+      provider: "anthropic",
+      harness: "native",
+      costTier: "standard",
+      featured: true,
+      capabilities: { toolUse: true, vision: true, streaming: true, thinking: true, adaptiveThinking: false },
+      pricing: { inputPricePerMillion: 3, outputPricePerMillion: 15, cacheWritePricePerMillion: 3.75, cacheReadPricePerMillion: 0.3 },
+    },
+    {
+      id: "kimi-k3",
+      displayName: "Kimi K3",
+      provider: "moonshot",
+      harness: "cursor",
+      costTier: "economy",
+      featured: false,
+      capabilities: { toolUse: true, vision: false, streaming: true, thinking: false, adaptiveThinking: false },
+      pricing: { inputPricePerMillion: 1, outputPricePerMillion: 3, cacheWritePricePerMillion: 1, cacheReadPricePerMillion: 0.1 },
+    },
+  ],
+});
+
+function createUploadMockClient(): Stigmer {
+  return {
+    agentExecution: {
+      uploadAttachment: vi.fn().mockResolvedValue({ storageKey: "attachments/test/file" }),
+    },
+    environment: { getPersonal: vi.fn().mockResolvedValue(null) },
+    baseUrl: "http://localhost:8080",
+    getAuthCredential: vi.fn().mockResolvedValue("test-token"),
+    config: {
+      baseUrl: "http://localhost:8080",
+      getAccessToken: vi.fn().mockResolvedValue(""),
+    },
+  } as unknown as Stigmer;
+}
+
+function createWrapper(registry?: Partial<ModelRegistryState>) {
+  const client = createUploadMockClient();
+  const state: ModelRegistryState = {
+    models: REGISTRY_DOCUMENT.models,
+    visionLimits: REGISTRY_DOCUMENT.visionLimits,
+    isLoading: false,
+    error: null,
+    refetch: vi.fn(),
+    ...registry,
+  };
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <StigmerContext.Provider value={client}>
+        <ModelRegistryContext.Provider value={state}>
+          {children}
+        </ModelRegistryContext.Provider>
+      </StigmerContext.Provider>
+    );
+  };
+}
+
+function pngFile(name: string, sizeBytes: number): File {
+  return new File([new Uint8Array(sizeBytes)], name, { type: "image/png" });
+}
+
+function pasteFiles(textarea: Element, files: File[]) {
+  fireEvent.paste(textarea, {
+    clipboardData: {
+      files: files as unknown as FileList,
+      getData: () => "",
+      types: ["Files"],
+    },
+  });
+}
+
+const OVERSIZED = Math.round(3.6 * 1024 * 1024);
+const SMALL = 64 * 1024;
+
+afterEach(cleanup);
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("SessionComposer — vision preflight notice (#365, #386)", () => {
+  it("warns at paste time when an image exceeds the advertised per-image cap", async () => {
+    render(<SessionComposer onSubmit={vi.fn()} />, { wrapper: createWrapper() });
+    const textarea = screen.getByRole("textbox");
+
+    await act(async () => {
+      pasteFiles(textarea, [pngFile("screenshot.png", OVERSIZED)]);
+    });
+
+    const notice = screen.getByText(
+      /screenshot\.png \(3\.6 MB\) exceeds the 3\.0 MB inline-image limit/,
+    );
+    expect(notice).toBeTruthy();
+    expect(notice.closest('[role="status"]')).toBeTruthy();
+  });
+
+  it("stays silent for images within the budget", async () => {
+    render(<SessionComposer onSubmit={vi.fn()} />, { wrapper: createWrapper() });
+    const textarea = screen.getByRole("textbox");
+
+    await act(async () => {
+      pasteFiles(textarea, [pngFile("small.png", SMALL)]);
+    });
+
+    expect(screen.queryByText(/inline-image/)).toBeNull();
+  });
+
+  it("stays silent when the server advertises no limits (older server, tri-state)", async () => {
+    render(<SessionComposer onSubmit={vi.fn()} />, {
+      wrapper: createWrapper({ visionLimits: undefined }),
+    });
+    const textarea = screen.getByRole("textbox");
+
+    await act(async () => {
+      pasteFiles(textarea, [pngFile("huge.png", OVERSIZED)]);
+    });
+
+    expect(screen.queryByText(/inline-image/)).toBeNull();
+  });
+
+  it("clears the warning when the offending attachment is removed", async () => {
+    render(<SessionComposer onSubmit={vi.fn()} />, { wrapper: createWrapper() });
+    const textarea = screen.getByRole("textbox");
+
+    await act(async () => {
+      pasteFiles(textarea, [pngFile("screenshot.png", OVERSIZED)]);
+    });
+    expect(screen.getByText(/exceeds the 3\.0 MB inline-image limit/)).toBeTruthy();
+
+    const removeButton = screen.getByRole("button", { name: /remove screenshot\.png/i });
+    await act(async () => {
+      fireEvent.click(removeButton);
+    });
+
+    expect(screen.queryByText(/inline-image/)).toBeNull();
+  });
+
+  it("leads with the model when the selected model is explicitly blind", async () => {
+    render(
+      <SessionComposer onSubmit={vi.fn()} defaultModelId="cursor/kimi-k3" />,
+      { wrapper: createWrapper() },
+    );
+    const textarea = screen.getByRole("textbox");
+
+    await act(async () => {
+      pasteFiles(textarea, [pngFile("tiny.png", SMALL)]);
+    });
+
+    expect(
+      screen.getByText(
+        "Kimi K3 can't view images — attached images will reach the agent as files only.",
+      ),
+    ).toBeTruthy();
+  });
+
+  it("never warns about non-image attachments on a blind model", async () => {
+    render(
+      <SessionComposer onSubmit={vi.fn()} defaultModelId="cursor/kimi-k3" />,
+      { wrapper: createWrapper() },
+    );
+    const textarea = screen.getByRole("textbox");
+
+    await act(async () => {
+      pasteFiles(textarea, [
+        new File([new Uint8Array(SMALL)], "notes.pdf", { type: "application/pdf" }),
+      ]);
+    });
+
+    expect(screen.queryByText(/can't view images/)).toBeNull();
+  });
+
+  it("does not gate the send — the warned message still submits with the attachment", async () => {
+    const onSubmit = vi.fn();
+    render(<SessionComposer onSubmit={onSubmit} />, { wrapper: createWrapper() });
+    const textarea = screen.getByRole("textbox");
+
+    await act(async () => {
+      pasteFiles(textarea, [pngFile("screenshot.png", OVERSIZED)]);
+    });
+    expect(screen.getByText(/exceeds the 3\.0 MB inline-image limit/)).toBeTruthy();
+
+    await act(async () => {
+      fireEvent.change(textarea, { target: { value: "look at this anyway" } });
+      fireEvent.keyDown(textarea, { key: "Enter", shiftKey: false });
+    });
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit.mock.calls[0][2]?.attachments).toHaveLength(1);
+  });
+});

package/src/composer/icons.tsx

@@ -54,24 +54,6 @@ export function ArrowUpIcon() {
   );
 }
 
-export function SpinnerIcon() {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}
-
 /**
  * Filled rounded square — the universal "stop" glyph. Sized to ~62% of the
  * viewBox so it reads as a confident, deliberate mark (not a stray dot) when

package/src/conversation/ConversationComposer.tsx

@@ -7,7 +7,7 @@ import { getUserMessage } from "@stigmer/sdk";
 import { ChannelSendOutcome } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/message_io_pb";
 import type { SendChannelMessageOutput } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/message_io_pb";
 import { Button } from "../button/Button.js";
-import { SpinnerIcon } from "../composer/icons.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 import { useComposer } from "../composer/useComposer.js";
 
 /** Props for {@link ConversationComposer}. */

package/src/conversation/ConversationListPane.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { memo, useCallback, useRef } from "react";
+import { memo, useCallback, useId, useRef } from "react";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import { MessageSquare, TriangleAlert, User } from "lucide-react";
 import { cn } from "@stigmer/theme";
@@ -110,6 +110,7 @@ export function ConversationListPane({
   now,
   className,
 }: ConversationListPaneProps) {
+  const channelFilterId = useId();
   const providerById = new Map(
     channels.map((channel) => [
       channel.metadata?.id ?? "",
@@ -129,11 +130,11 @@ export function ConversationListPane({
           )}
           {channels.length > 1 && (
             <>
-              <label className="stg:sr-only" htmlFor="stgm-conversation-channel-filter">
+              <label className="stg:sr-only" htmlFor={channelFilterId}>
                 Filter by channel
               </label>
               <select
-                id="stgm-conversation-channel-filter"
+                id={channelFilterId}
                 value={channelFilter}
                 onChange={(e) => onChannelFilterChange(e.target.value)}
                 className={cn(

package/src/cursor-accounts/MemberCoverageTable.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 import { cn } from "@stigmer/theme";
 import {
   CursorMemberKeyState,
@@ -420,21 +420,10 @@ function KeyStatusBadge({
  * would join the operator's own Cursor account to the team.
  */
 function CopyInviteButton({ inviteLink }: { readonly inviteLink: string }) {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(inviteLink);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // Clipboard unavailable (permissions, non-secure context) — the
-      // section description still points at the Cursor dashboard.
-    }
-  }, [inviteLink]);
+  const { copy, copied } = useCopyFeedback();
 
   return (
-    <Button size="sm" variant="outline" onClick={() => void handleCopy()}>
+    <Button size="sm" variant="outline" onClick={() => void copy(inviteLink)}>
       {copied ? "Copied" : "Copy invite"}
     </Button>
   );

package/src/cursor-accounts/__tests__/CursorAccountsConsole.test.tsx

@@ -137,16 +137,8 @@ function scenarView() {
         }),
       }),
     ],
-    // The server populates both the deprecated flat list and the
-    // spend-joined views; the console reads only the views.
-    membersWithoutKeys: [
-      create(CursorTeamMemberSchema, {
-        userId: "u2",
-        email: "uncovered@scenar.ai",
-        name: "Uncovered U",
-        role: "member",
-      }),
-    ],
+    // The console reads the spend-joined views (field 4's flat list is
+    // gone from the proto — stigmer#313).
     membersWithoutKeysViews: [
       create(CursorTeamMemberViewSchema, {
         member: create(CursorTeamMemberSchema, {

package/src/dashboard/DashboardFailedRuns.tsx

@@ -3,6 +3,7 @@
 import { memo } from "react";
 import { cn } from "@stigmer/theme";
 import type { DashboardFailedRun } from "./types.js";
+import { formatRelativeTime } from "../activity/format-relative-time.js";
 
 export interface DashboardFailedRunsProps {
   readonly failedRuns: readonly DashboardFailedRun[];
@@ -12,17 +13,6 @@ export interface DashboardFailedRunsProps {
   readonly className?: string;
 }
 
-function timeAgo(date: Date): string {
-  const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
-  if (seconds < 60) return "just now";
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return `${minutes}m ago`;
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h ago`;
-  const days = Math.floor(hours / 24);
-  return `${days}d ago`;
-}
-
 /**
  * Widget showing recent failed executions from both agent and workflow
  * domains, interleaved by timestamp.
@@ -89,7 +79,7 @@ export const DashboardFailedRuns = memo(function DashboardFailedRuns({
                 )}
               </div>
               <span className="stg:shrink-0 stg:text-muted-foreground">
-                {timeAgo(run.failedAt)}
+                {formatRelativeTime(run.failedAt)}
               </span>
               {onViewClick && (
                 <button

package/src/environment/CreateEnvironmentForm.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { useCallback, useState, type FormEvent } from "react";
+import { type FormEvent, useCallback, useId, 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 { useCreateEnvironment } from "./useCreateEnvironment.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -47,6 +48,7 @@ export function CreateEnvironmentForm({
   onCancel,
   className,
 }: CreateEnvironmentFormProps) {
+  const baseId = useId();
   const { create, isCreating, error, clearError } = useCreateEnvironment();
 
   const [name, setName] = useState("");
@@ -80,13 +82,13 @@ export function CreateEnvironmentForm({
       <div className="stg:space-y-2">
         <div className="stg:space-y-1">
           <label
-            htmlFor="stgm-new-env-name"
+            htmlFor={`${baseId}-name`}
             className="stg:text-xs stg:font-medium stg:text-foreground"
           >
             Name
           </label>
           <input
-            id="stgm-new-env-name"
+            id={`${baseId}-name`}
             type="text"
             value={name}
             onChange={(e) => setName(e.target.value)}
@@ -105,14 +107,14 @@ export function CreateEnvironmentForm({
 
         <div className="stg:space-y-1">
           <label
-            htmlFor="stgm-new-env-desc"
+            htmlFor={`${baseId}-desc`}
             className="stg:text-xs stg:font-medium stg:text-muted-foreground"
           >
             Description{" "}
             <span className="stg:text-muted-foreground-subtle">(optional)</span>
           </label>
           <input
-            id="stgm-new-env-desc"
+            id={`${baseId}-desc`}
             type="text"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
@@ -144,7 +146,7 @@ export function CreateEnvironmentForm({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isCreating && <SpinnerIcon />}
+          {isCreating && <SpinnerIcon size={12} />}
           Create environment
         </button>
 
@@ -167,24 +169,3 @@ export function CreateEnvironmentForm({
   );
 }
 
-// ---------------------------------------------------------------------------
-// Icons
-// ---------------------------------------------------------------------------
-
-function SpinnerIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}