@stigmer/react 0.0.92 → 0.0.94

package/src/runner/RunnerPicker.tsx

@@ -0,0 +1,319 @@
+"use client";
+
+import { useMemo } from "react";
+import { Select } from "@base-ui/react/select";
+import { RunnerPhase } from "@stigmer/protos/ai/stigmer/agentic/runner/v1/enum_pb";
+import type { Runner } from "@stigmer/protos/ai/stigmer/agentic/runner/v1/api_pb";
+import { useRunnerList } from "./useRunnerList";
+import {
+  isActivePhase,
+  phaseLabel,
+  phaseDotColor,
+  PHASE_SORT_ORDER,
+} from "./phase";
+
+/**
+ * Sentinel value representing "Auto" (let the backend decide).
+ *
+ * Base UI Select requires a non-null string value for every item,
+ * so we use this internal sentinel and map to/from `null` at the
+ * component boundary.
+ */
+const AUTO_VALUE = "__auto__";
+
+/** Props for {@link RunnerPicker}. */
+export interface RunnerPickerProps {
+  /** Organization slug to scope the runner list. */
+  readonly org: string;
+  /**
+   * Currently selected runner ID, or `null` for "Auto".
+   *
+   * `null` means the backend decides which runner to use — session
+   * auto-bind in OSS, cloud auto-provisioning in Cloud.
+   */
+  readonly value: string | null;
+  /** Called when the user picks a different runner. `null` = "Auto". */
+  readonly onChange: (runnerId: string | null) => void;
+  /**
+   * Show the "Auto" option as the first item in the dropdown.
+   * @default true
+   */
+  readonly showAutoOption?: boolean;
+  /** Additional CSS class names for the trigger button. */
+  readonly className?: string;
+  /** When true, disables the selector. */
+  readonly disabled?: boolean;
+}
+
+/**
+ * Theme-able runner picker built on `@base-ui/react` Select.
+ *
+ * Fetches available runners via {@link useRunnerList} and renders
+ * them in a dropdown grouped by operational phase. READY runners
+ * appear first, then BUSY (selectable), then inactive runners
+ * (STOPPED/PENDING/FAILED — visible but disabled).
+ *
+ * Includes an "Auto" option (default) that lets the backend decide
+ * which runner to use. Platform builders who manage runner assignment
+ * programmatically can disable this via `showAutoOption={false}`.
+ *
+ * All visual properties flow through `--stgm-*` tokens — no
+ * hardcoded colors or sizes.
+ *
+ * Platform builders who need different rendering use
+ * {@link useRunnerList} directly.
+ *
+ * @example
+ * ```tsx
+ * const [runnerId, setRunnerId] = useState<string | null>(null);
+ *
+ * <RunnerPicker
+ *   org="acme"
+ *   value={runnerId}
+ *   onChange={setRunnerId}
+ * />
+ * ```
+ */
+export function RunnerPicker({
+  org,
+  value,
+  onChange,
+  showAutoOption = true,
+  className,
+  disabled,
+}: RunnerPickerProps) {
+  const { runners, isLoading } = useRunnerList(org);
+
+  const { active, inactive } = useMemo(() => {
+    const act: Runner[] = [];
+    const inact: Runner[] = [];
+
+    for (const r of runners) {
+      if (isActivePhase(r.status?.phase ?? RunnerPhase.UNSPECIFIED)) {
+        act.push(r);
+      } else {
+        inact.push(r);
+      }
+    }
+
+    act.sort(phaseThenName);
+    inact.sort(phaseThenName);
+
+    return { active: act, inactive: inact };
+  }, [runners]);
+
+  const selectValue = value ?? AUTO_VALUE;
+
+  const handleChange = (v: string | null) => {
+    if (v === null) return;
+    onChange(v === AUTO_VALUE ? null : v);
+  };
+
+  const triggerLabel = useMemo(() => {
+    if (!value) return "Auto";
+    const runner = runners.find((r) => r.metadata?.id === value);
+    return runner?.metadata?.name ?? "Runner";
+  }, [value, runners]);
+
+  return (
+    <Select.Root
+      value={selectValue}
+      onValueChange={handleChange}
+      disabled={disabled || isLoading}
+    >
+      <Select.Trigger
+        className={[
+          "inline-flex items-center gap-1.5 rounded-md border border-border",
+          "bg-background px-2.5 py-1.5 text-xs text-foreground",
+          "hover:bg-accent-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "disabled:pointer-events-none disabled:opacity-50",
+          "transition-colors",
+          className,
+        ]
+          .filter(Boolean)
+          .join(" ")}
+      >
+        <RunnerIcon />
+        <span className="max-w-[10rem] truncate">{triggerLabel}</span>
+        <ChevronIcon />
+      </Select.Trigger>
+
+      <Select.Portal>
+        <Select.Positioner sideOffset={4}>
+          <Select.Popup
+            className={[
+              "z-popover max-h-72 min-w-[var(--anchor-width)] overflow-auto",
+              "rounded-lg border border-border bg-popover p-1 shadow-md",
+              "text-popover-foreground",
+            ].join(" ")}
+          >
+            {showAutoOption && (
+              <Select.Item
+                value={AUTO_VALUE}
+                className={[
+                  "flex cursor-pointer items-center gap-2",
+                  "rounded-md px-2 py-1.5 text-xs outline-none",
+                  "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+                  "data-[selected]:font-medium",
+                ].join(" ")}
+              >
+                <Select.ItemText>Auto</Select.ItemText>
+                <span className="text-[0.6rem] text-muted-foreground">
+                  default
+                </span>
+              </Select.Item>
+            )}
+
+            {(showAutoOption && (active.length > 0 || inactive.length > 0)) && (
+              <div className="my-1 h-px bg-border/50" role="separator" />
+            )}
+
+            {active.length > 0 && (
+              <Select.Group>
+                <Select.GroupLabel className="px-2 py-1.5 text-[0.65rem] font-medium uppercase tracking-wider text-muted-foreground">
+                  Available
+                </Select.GroupLabel>
+                {active.map((r) => (
+                  <RunnerItem key={r.metadata!.id} runner={r} />
+                ))}
+              </Select.Group>
+            )}
+
+            {inactive.length > 0 && (
+              <Select.Group>
+                <Select.GroupLabel className="px-2 py-1.5 text-[0.65rem] font-medium uppercase tracking-wider text-muted-foreground">
+                  Offline
+                </Select.GroupLabel>
+                {inactive.map((r) => (
+                  <RunnerItem key={r.metadata!.id} runner={r} disabled />
+                ))}
+              </Select.Group>
+            )}
+
+            {runners.length === 0 && !isLoading && (
+              <div className="px-2 py-3 text-center text-xs text-muted-foreground">
+                No runners found
+              </div>
+            )}
+          </Select.Popup>
+        </Select.Positioner>
+      </Select.Portal>
+    </Select.Root>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Internal components
+// ---------------------------------------------------------------------------
+
+function RunnerItem({
+  runner,
+  disabled,
+}: {
+  runner: Runner;
+  disabled?: boolean;
+}) {
+  const id = runner.metadata!.id;
+  const name = runner.metadata?.name ?? "Unnamed";
+  const phase = runner.status?.phase ?? RunnerPhase.UNSPECIFIED;
+  const hostname = runner.status?.connectionInfo?.hostname;
+
+  return (
+    <Select.Item
+      value={id}
+      disabled={disabled}
+      className={[
+        "flex cursor-pointer items-center gap-2",
+        "rounded-md px-2 py-1.5 text-xs outline-none",
+        "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+        "data-[selected]:font-medium",
+        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+      ].join(" ")}
+    >
+      <PhaseDot phase={phase} />
+      <div className="flex min-w-0 flex-col">
+        <Select.ItemText>
+          <span className="truncate">{name}</span>
+        </Select.ItemText>
+        {hostname && (
+          <span className="truncate text-[0.6rem] leading-tight text-muted-foreground">
+            {hostname}
+          </span>
+        )}
+      </div>
+      <span className="ml-auto shrink-0 text-[0.6rem] lowercase text-muted-foreground">
+        {phaseLabel(phase)}
+      </span>
+    </Select.Item>
+  );
+}
+
+function PhaseDot({ phase }: { phase: RunnerPhase }) {
+  return (
+    <span
+      className={`inline-block h-1.5 w-1.5 shrink-0 rounded-full ${phaseDotColor(phase)}`}
+      aria-hidden="true"
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Utilities
+// ---------------------------------------------------------------------------
+
+function phaseThenName(a: Runner, b: Runner): number {
+  const pa = a.status?.phase ?? RunnerPhase.UNSPECIFIED;
+  const pb = b.status?.phase ?? RunnerPhase.UNSPECIFIED;
+  const phaseOrder = PHASE_SORT_ORDER[pa] - PHASE_SORT_ORDER[pb];
+  if (phaseOrder !== 0) return phaseOrder;
+  return (a.metadata?.name ?? "").localeCompare(b.metadata?.name ?? "");
+}
+
+// ---------------------------------------------------------------------------
+// Icons
+// ---------------------------------------------------------------------------
+
+function RunnerIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="text-muted-foreground"
+    >
+      <rect x="4" y="4" width="16" height="16" rx="2" />
+      <rect x="9" y="9" width="6" height="6" />
+      <path d="M15 2v2" />
+      <path d="M15 20v2" />
+      <path d="M2 15h2" />
+      <path d="M2 9h2" />
+      <path d="M20 15h2" />
+      <path d="M20 9h2" />
+      <path d="M9 2v2" />
+      <path d="M9 20v2" />
+    </svg>
+  );
+}
+
+function ChevronIcon() {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="text-muted-foreground"
+    >
+      <path d="M2.5 3.75L5 6.25L7.5 3.75" />
+    </svg>
+  );
+}

package/src/runner/__tests__/useDeleteRunner.test.tsx

@@ -0,0 +1,150 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { create } from "@bufbuild/protobuf";
+import {
+  RunnerSchema,
+  RunnerStatusSchema,
+  type Runner,
+} from "@stigmer/protos/ai/stigmer/agentic/runner/v1/api_pb";
+import { RunnerPhase } from "@stigmer/protos/ai/stigmer/agentic/runner/v1/enum_pb";
+import { ApiResourceMetadataSchema } from "@stigmer/protos/ai/stigmer/commons/apiresource/metadata_pb";
+import type { Stigmer } from "@stigmer/sdk";
+import { StigmerContext } from "../../context";
+import { useDeleteRunner } from "../useDeleteRunner";
+
+function makeRunner(id: string, phase: RunnerPhase): Runner {
+  const runner = create(RunnerSchema);
+  runner.metadata = create(ApiResourceMetadataSchema);
+  runner.metadata.id = id;
+  runner.status = create(RunnerStatusSchema);
+  runner.status.phase = phase;
+  return runner;
+}
+
+function buildMockClient(overrides: {
+  delete?: ReturnType<typeof vi.fn>;
+} = {}) {
+  return {
+    runner: {
+      delete: overrides.delete ?? vi.fn(),
+    },
+  } as unknown as Stigmer;
+}
+
+function makeWrapper(client: Stigmer) {
+  return ({ children }: { children: ReactNode }) => (
+    <StigmerContext.Provider value={client}>
+      {children}
+    </StigmerContext.Provider>
+  );
+}
+
+describe("useDeleteRunner", () => {
+  let deleteMock: ReturnType<typeof vi.fn>;
+  let client: Stigmer;
+
+  beforeEach(() => {
+    deleteMock = vi.fn();
+    client = buildMockClient({ delete: deleteMock });
+  });
+
+  it("calls runner.delete with the ID and returns the deleted runner", async () => {
+    const deletedRunner = makeRunner("rnr_del1", RunnerPhase.STOPPED);
+    deleteMock.mockResolvedValueOnce(deletedRunner);
+
+    const { result } = renderHook(() => useDeleteRunner(), {
+      wrapper: makeWrapper(client),
+    });
+
+    expect(result.current.isDeleting).toBe(false);
+    expect(result.current.error).toBeNull();
+
+    let returned: Runner;
+    await act(async () => {
+      returned = await result.current.deleteRunner("rnr_del1");
+    });
+
+    expect(deleteMock).toHaveBeenCalledOnce();
+    expect(deleteMock).toHaveBeenCalledWith("rnr_del1");
+
+    expect(returned!).toBe(deletedRunner);
+    expect(result.current.isDeleting).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+
+  it("sets error and rethrows on failure", async () => {
+    const rpcError = new Error("permission denied");
+    deleteMock.mockRejectedValueOnce(rpcError);
+
+    const { result } = renderHook(() => useDeleteRunner(), {
+      wrapper: makeWrapper(client),
+    });
+
+    await act(async () => {
+      await expect(
+        result.current.deleteRunner("rnr_nope"),
+      ).rejects.toThrow("permission denied");
+    });
+
+    expect(result.current.error).toBeInstanceOf(Error);
+    expect(result.current.error!.message).toBe("permission denied");
+    expect(result.current.isDeleting).toBe(false);
+  });
+
+  it("handles non-Error rejection values", async () => {
+    deleteMock.mockRejectedValueOnce("raw string error");
+
+    const { result } = renderHook(() => useDeleteRunner(), {
+      wrapper: makeWrapper(client),
+    });
+
+    await act(async () => {
+      await expect(
+        result.current.deleteRunner("rnr_x"),
+      ).rejects.toBe("raw string error");
+    });
+
+    expect(result.current.error).toBeInstanceOf(Error);
+    expect(result.current.error!.message).toBe("raw string error");
+  });
+
+  it("clears error via clearError", async () => {
+    deleteMock.mockRejectedValueOnce(new Error("fail"));
+
+    const { result } = renderHook(() => useDeleteRunner(), {
+      wrapper: makeWrapper(client),
+    });
+
+    await act(async () => {
+      await result.current.deleteRunner("rnr_1").catch(() => {});
+    });
+    expect(result.current.error).not.toBeNull();
+
+    act(() => {
+      result.current.clearError();
+    });
+    expect(result.current.error).toBeNull();
+  });
+
+  it("resets previous error on a new successful delete", async () => {
+    deleteMock.mockRejectedValueOnce(new Error("first fail"));
+
+    const { result } = renderHook(() => useDeleteRunner(), {
+      wrapper: makeWrapper(client),
+    });
+
+    await act(async () => {
+      await result.current.deleteRunner("rnr_1").catch(() => {});
+    });
+    expect(result.current.error).not.toBeNull();
+
+    const deletedRunner = makeRunner("rnr_1", RunnerPhase.STOPPED);
+    deleteMock.mockResolvedValueOnce(deletedRunner);
+
+    await act(async () => {
+      await result.current.deleteRunner("rnr_1");
+    });
+    expect(result.current.error).toBeNull();
+  });
+});

package/src/runner/__tests__/useLaunchLocalRunner.test.tsx

@@ -0,0 +1,223 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { create } from "@bufbuild/protobuf";
+import { timestampFromDate } from "@bufbuild/protobuf/wkt";
+import { CreateLaunchTokenResponseSchema } from "@stigmer/protos/ai/stigmer/agentic/runner/v1/io_pb";
+import type { Stigmer } from "@stigmer/sdk";
+import { StigmerContext } from "../../context";
+import { useLaunchLocalRunner } from "../useLaunchLocalRunner";
+
+function buildMockClient(overrides: {
+  createLaunchToken?: ReturnType<typeof vi.fn>;
+} = {}) {
+  return {
+    runner: {
+      createLaunchToken:
+        overrides.createLaunchToken ?? vi.fn(),
+    },
+  } as unknown as Stigmer;
+}
+
+function makeWrapper(client: Stigmer) {
+  return ({ children }: { children: ReactNode }) => (
+    <StigmerContext.Provider value={client}>
+      {children}
+    </StigmerContext.Provider>
+  );
+}
+
+describe("useLaunchLocalRunner", () => {
+  const ORG = "test-org";
+
+  let createLaunchToken: ReturnType<typeof vi.fn>;
+  let client: Stigmer;
+
+  beforeEach(() => {
+    createLaunchToken = vi.fn();
+    client = buildMockClient({ createLaunchToken });
+  });
+
+  it("creates a token and opens the stigmer:// URL on success", async () => {
+    const response = create(CreateLaunchTokenResponseSchema, {
+      token: "tok_abc123",
+      expiresAt: timestampFromDate(new Date()),
+    });
+    createLaunchToken.mockResolvedValueOnce(response);
+
+    const openUrl = vi.fn();
+    const { result } = renderHook(
+      () => useLaunchLocalRunner({ openUrl }),
+      { wrapper: makeWrapper(client) },
+    );
+
+    expect(result.current.isLaunching).toBe(false);
+    expect(result.current.error).toBeNull();
+
+    let launchResult: Awaited<ReturnType<typeof result.current.launch>>;
+    await act(async () => {
+      launchResult = await result.current.launch({ org: ORG });
+    });
+
+    expect(createLaunchToken).toHaveBeenCalledOnce();
+    expect(openUrl).toHaveBeenCalledOnce();
+    expect(openUrl).toHaveBeenCalledWith(
+      `stigmer://launch-runner?token=${encodeURIComponent("tok_abc123")}`,
+    );
+
+    expect(launchResult!.url).toBe(
+      `stigmer://launch-runner?token=${encodeURIComponent("tok_abc123")}`,
+    );
+    expect(launchResult!.expiresAt).toBeInstanceOf(Date);
+
+    expect(result.current.isLaunching).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+
+  it("URL-encodes tokens with special characters", async () => {
+    const response = create(CreateLaunchTokenResponseSchema, {
+      token: "tok/with+special=chars&more",
+    });
+    createLaunchToken.mockResolvedValueOnce(response);
+
+    const openUrl = vi.fn();
+    const { result } = renderHook(
+      () => useLaunchLocalRunner({ openUrl }),
+      { wrapper: makeWrapper(client) },
+    );
+
+    await act(async () => {
+      await result.current.launch({ org: ORG });
+    });
+
+    const url = openUrl.mock.calls[0][0] as string;
+    expect(url).toContain(encodeURIComponent("tok/with+special=chars&more"));
+    expect(url).not.toContain("&more");
+  });
+
+  it("uses the custom openUrl callback", async () => {
+    const response = create(CreateLaunchTokenResponseSchema, {
+      token: "tok_custom",
+    });
+    createLaunchToken.mockResolvedValueOnce(response);
+
+    const customOpen = vi.fn();
+    const { result } = renderHook(
+      () => useLaunchLocalRunner({ openUrl: customOpen }),
+      { wrapper: makeWrapper(client) },
+    );
+
+    await act(async () => {
+      await result.current.launch({ org: ORG });
+    });
+
+    expect(customOpen).toHaveBeenCalledOnce();
+    expect(customOpen.mock.calls[0][0]).toMatch(/^stigmer:\/\//);
+  });
+
+  it("returns undefined expiresAt when the server omits it", async () => {
+    const response = create(CreateLaunchTokenResponseSchema, {
+      token: "tok_no_expiry",
+    });
+    createLaunchToken.mockResolvedValueOnce(response);
+
+    const openUrl = vi.fn();
+    const { result } = renderHook(
+      () => useLaunchLocalRunner({ openUrl }),
+      { wrapper: makeWrapper(client) },
+    );
+
+    let launchResult: Awaited<ReturnType<typeof result.current.launch>>;
+    await act(async () => {
+      launchResult = await result.current.launch({ org: ORG });
+    });
+
+    expect(launchResult!.expiresAt).toBeUndefined();
+  });
+
+  it("sets error and rethrows when createLaunchToken fails", async () => {
+    const rpcError = new Error("token creation failed");
+    createLaunchToken.mockRejectedValueOnce(rpcError);
+
+    const openUrl = vi.fn();
+    const { result } = renderHook(
+      () => useLaunchLocalRunner({ openUrl }),
+      { wrapper: makeWrapper(client) },
+    );
+
+    await act(async () => {
+      await expect(
+        result.current.launch({ org: ORG }),
+      ).rejects.toThrow("token creation failed");
+    });
+
+    expect(result.current.error).toBeInstanceOf(Error);
+    expect(result.current.error!.message).toBe("token creation failed");
+    expect(result.current.isLaunching).toBe(false);
+    expect(openUrl).not.toHaveBeenCalled();
+  });
+
+  it("handles non-Error rejection values", async () => {
+    createLaunchToken.mockRejectedValueOnce("string error");
+
+    const openUrl = vi.fn();
+    const { result } = renderHook(
+      () => useLaunchLocalRunner({ openUrl }),
+      { wrapper: makeWrapper(client) },
+    );
+
+    await act(async () => {
+      await expect(result.current.launch({ org: ORG })).rejects.toBe(
+        "string error",
+      );
+    });
+
+    expect(result.current.error).toBeInstanceOf(Error);
+    expect(result.current.error!.message).toBe("string error");
+  });
+
+  it("clears error via clearError", async () => {
+    createLaunchToken.mockRejectedValueOnce(new Error("fail"));
+
+    const openUrl = vi.fn();
+    const { result } = renderHook(
+      () => useLaunchLocalRunner({ openUrl }),
+      { wrapper: makeWrapper(client) },
+    );
+
+    await act(async () => {
+      await result.current.launch({ org: ORG }).catch(() => {});
+    });
+    expect(result.current.error).not.toBeNull();
+
+    act(() => {
+      result.current.clearError();
+    });
+    expect(result.current.error).toBeNull();
+  });
+
+  it("resets previous error on a new successful launch", async () => {
+    createLaunchToken.mockRejectedValueOnce(new Error("first fail"));
+
+    const openUrl = vi.fn();
+    const { result } = renderHook(
+      () => useLaunchLocalRunner({ openUrl }),
+      { wrapper: makeWrapper(client) },
+    );
+
+    await act(async () => {
+      await result.current.launch({ org: ORG }).catch(() => {});
+    });
+    expect(result.current.error).not.toBeNull();
+
+    const response = create(CreateLaunchTokenResponseSchema, {
+      token: "tok_retry",
+    });
+    createLaunchToken.mockResolvedValueOnce(response);
+
+    await act(async () => {
+      await result.current.launch({ org: ORG });
+    });
+    expect(result.current.error).toBeNull();
+  });
+});