@stigmer/react 1.0.4 → 2.0.0

package/src/runner/RunnerPicker.tsx

@@ -1,321 +0,0 @@
-"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 { useStigmerPortalContainer } from "../portal-container";
-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 portalContainer = useStigmerPortalContainer();
-  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] max-sm:max-w-[5rem] truncate">{triggerLabel}</span>
-        <ChevronIcon />
-      </Select.Trigger>
-
-      <Select.Portal container={portalContainer}>
-        <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/WorkspaceRunnerSelector.tsx

@@ -1,180 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import { cn } from "@stigmer/theme";
-import 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 { useRunnerList } from "./useRunnerList";
-import { isActivePhase, phaseDotColor, PHASE_SORT_ORDER } from "./phase";
-
-/** Props for {@link WorkspaceRunnerSelector}. */
-export interface WorkspaceRunnerSelectorProps {
-  /** Organization slug to scope the runner list. */
-  readonly org: string;
-  /** Currently selected runner ID, or `null` for "Auto". */
-  readonly value: string | null;
-  /** Called when the user selects a runner. `null` means "Auto". */
-  readonly onChange: (runnerId: string | null) => void;
-  /** Disables all interactions. */
-  readonly disabled?: boolean;
-  /**
-   * Set of runner IDs that are known to be running on the local machine.
-   *
-   * When provided, matching runners are labeled "This machine" instead
-   * of their name/hostname. This is a host-provided signal — the desktop
-   * app determines local runners from `~/.stigmer/runners/` state files;
-   * the web console does not pass this prop.
-   */
-  readonly localRunnerIds?: ReadonlySet<string>;
-}
-
-/**
- * Cursor-inspired "Run On" section for the workspace popover.
- *
- * Renders a compact, sectioned list of available runners so users can
- * pick where their session runs without leaving the workspace context.
- * Designed to be composed alongside {@link WorkspaceEditor} inside the
- * workspace popover — NOT as a standalone picker.
- *
- * Label strategy (SDK-agnostic, no platform branding):
- * - "Auto" for null selection (platform assigns a runner)
- * - "Cloud" for system-managed runners
- * - "This machine" when the host provides `localRunnerIds`
- * - Runner name / hostname for everything else
- */
-export function WorkspaceRunnerSelector({
-  org,
-  value,
-  onChange,
-  disabled,
-  localRunnerIds,
-}: WorkspaceRunnerSelectorProps) {
-  const { runners, isLoading } = useRunnerList(org);
-
-  const active = useMemo(() => {
-    return runners
-      .filter((r) => isActivePhase(r.status?.phase ?? RunnerPhase.UNSPECIFIED))
-      .sort((a, b) => {
-        const pa = a.status?.phase ?? RunnerPhase.UNSPECIFIED;
-        const pb = b.status?.phase ?? RunnerPhase.UNSPECIFIED;
-        const po = PHASE_SORT_ORDER[pa] - PHASE_SORT_ORDER[pb];
-        if (po !== 0) return po;
-        return (a.metadata?.name ?? "").localeCompare(b.metadata?.name ?? "");
-      });
-  }, [runners]);
-
-  return (
-    <div className="space-y-1" role="listbox" aria-label="Run on">
-      <div className="px-1 text-[0.6rem] font-medium uppercase tracking-wider text-muted-foreground">
-        Run On
-      </div>
-
-      {/* Auto option */}
-      <RunOnOption
-        selected={value === null}
-        onClick={() => onChange(null)}
-        disabled={disabled}
-        label="Auto"
-        hint="platform assigns"
-        dotClass="bg-primary"
-      />
-
-      {/* Available runners */}
-      {active.map((r) => {
-        const id = r.metadata!.id;
-        return (
-          <RunOnOption
-            key={id}
-            selected={value === id}
-            onClick={() => onChange(id)}
-            disabled={disabled}
-            label={runnerLabel(r, localRunnerIds)}
-            hint={runnerHint(r, localRunnerIds)}
-            dotClass={phaseDotColor(r.status?.phase ?? RunnerPhase.UNSPECIFIED)}
-          />
-        );
-      })}
-
-      {/* Loading */}
-      {isLoading && active.length === 0 && (
-        <div className="px-1 py-2 text-[0.65rem] text-muted-foreground">
-          Loading runners...
-        </div>
-      )}
-
-      {/* Empty */}
-      {!isLoading && active.length === 0 && (
-        <div className="px-1 py-2 text-[0.65rem] text-muted-foreground">
-          No runners available
-        </div>
-      )}
-    </div>
-  );
-}
-
-function RunOnOption({
-  selected,
-  onClick,
-  disabled,
-  label,
-  hint,
-  dotClass,
-}: {
-  selected: boolean;
-  onClick: () => void;
-  disabled?: boolean;
-  label: string;
-  hint?: string;
-  dotClass: string;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      className={cn(
-        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors",
-        "disabled:pointer-events-none disabled:opacity-50",
-        selected
-          ? "bg-accent font-medium text-foreground"
-          : "text-foreground hover:bg-accent-hover",
-      )}
-      role="option"
-      aria-selected={selected}
-    >
-      <span
-        className={cn("inline-block h-1.5 w-1.5 shrink-0 rounded-full", dotClass)}
-        aria-hidden="true"
-      />
-      <span className="min-w-0 flex-1 truncate">{label}</span>
-      {hint && (
-        <span className="shrink-0 text-[0.6rem] text-muted-foreground">
-          {hint}
-        </span>
-      )}
-    </button>
-  );
-}
-
-function runnerLabel(
-  runner: Runner,
-  localRunnerIds?: ReadonlySet<string>,
-): string {
-  const id = runner.metadata?.id ?? "";
-  if (localRunnerIds?.has(id)) return "This machine";
-  return runner.metadata?.name ?? runner.status?.connectionInfo?.hostname ?? "Unnamed";
-}
-
-function runnerHint(
-  runner: Runner,
-  localRunnerIds?: ReadonlySet<string>,
-): string | undefined {
-  const id = runner.metadata?.id ?? "";
-  if (localRunnerIds?.has(id)) {
-    return runner.status?.connectionInfo?.hostname;
-  }
-  const name = runner.metadata?.name;
-  const hostname = runner.status?.connectionInfo?.hostname;
-  if (name && hostname && name !== hostname) return hostname;
-  return undefined;
-}

package/src/runner/__tests__/phase.test.ts

@@ -1,39 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { RunnerPhase } from "@stigmer/protos/ai/stigmer/agentic/runner/v1/enum_pb";
-import { isTransitionalPhase, isActivePhase } from "../phase";
-
-describe("isTransitionalPhase", () => {
-  it.each([
-    ["PENDING", RunnerPhase.PENDING],
-    ["STARTING", RunnerPhase.STARTING],
-  ] as const)("returns true for %s", (_label, phase) => {
-    expect(isTransitionalPhase(phase)).toBe(true);
-  });
-
-  it.each([
-    ["READY", RunnerPhase.READY],
-    ["BUSY", RunnerPhase.BUSY],
-    ["STOPPED", RunnerPhase.STOPPED],
-    ["FAILED", RunnerPhase.FAILED],
-    ["UNSPECIFIED", RunnerPhase.UNSPECIFIED],
-  ] as const)("returns false for %s", (_label, phase) => {
-    expect(isTransitionalPhase(phase)).toBe(false);
-  });
-
-  it("is disjoint from isActivePhase", () => {
-    const allPhases = [
-      RunnerPhase.READY,
-      RunnerPhase.BUSY,
-      RunnerPhase.STARTING,
-      RunnerPhase.PENDING,
-      RunnerPhase.STOPPED,
-      RunnerPhase.FAILED,
-      RunnerPhase.UNSPECIFIED,
-    ];
-    for (const phase of allPhases) {
-      if (isTransitionalPhase(phase)) {
-        expect(isActivePhase(phase)).toBe(false);
-      }
-    }
-  });
-});

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

@@ -1,150 +0,0 @@
-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();
-  });
-});