@stigmer/react 0.0.101 → 0.1.0

package/src/composer/SessionComposer.tsx

@@ -30,11 +30,19 @@ import {
   SYSTEM_ENV_VAR_KEYS,
   resolveSystemEnvVarValues,
 } from "../environment/systemEnvVars";
+import { RunnerPhase } from "@stigmer/protos/ai/stigmer/agentic/runner/v1/enum_pb";
+import {
+  isActivePhase,
+  phaseLabel,
+  phaseDotColor,
+  PHASE_SORT_ORDER,
+} from "../runner/phase";
 import {
   AgentIcon,
   McpServerIcon,
   SkillIcon,
   SecretsIcon,
+  RunnerIcon,
   AlertTriangleIcon,
   ResolveSpinner,
 } from "./icons";
@@ -927,6 +935,15 @@ export function SessionComposer({
       }
     }
 
+    if (showRunner && runnerId) {
+      items.push({
+        key: `runner:${runnerId}`,
+        label: selectedRunnerName ?? "Runner",
+        type: "runner",
+        onRemove: () => onRunnerIdChange?.(null),
+      });
+    }
+
     if (sessionVariables) {
       for (const entry of sessionVariables.entries) {
         const k = entry.key.trim();
@@ -951,6 +968,10 @@ export function SessionComposer({
     mcpSetup.entries,
     mcpSetup.removeServer,
     skillRefs,
+    showRunner,
+    runnerId,
+    selectedRunnerName,
+    onRunnerIdChange,
     sessionVariables,
     displayNames,
     onSkillRefsChange,
@@ -1025,6 +1046,14 @@ export function SessionComposer({
         count: skillCount,
       });
     }
+    if (showRunner) {
+      items.push({
+        id: "runner",
+        icon: <RunnerIcon />,
+        label: "Runner",
+        count: runnerId ? 1 : 0,
+      });
+    }
     if (showSessionVars) {
       items.push({
         id: "sessionVars",
@@ -1034,7 +1063,7 @@ export function SessionComposer({
       });
     }
     return items;
-  }, [showAgent, agentRef, agentSetup.state, showMcp, mcpCount, mcpSetup.needsSetupCount, showSkills, skillCount, showSessionVars, sessionVarCount]);
+  }, [showAgent, agentRef, agentSetup.state, showMcp, mcpCount, mcpSetup.needsSetupCount, showSkills, skillCount, showRunner, runnerId, showSessionVars, sessionVarCount]);
 
   const renderConfigPanel = useCallback(
     (panelId: string): React.ReactNode => {
@@ -1119,6 +1148,16 @@ export function SessionComposer({
             />
           );
 
+        case "runner":
+          return (
+            <RunnerConfigPanel
+              org={org!}
+              value={runnerId ?? null}
+              onChange={(id) => onRunnerIdChange?.(id)}
+              disabled={isDisabled}
+            />
+          );
+
         case "sessionVars":
           return (
             <SessionVariablesInput
@@ -1145,6 +1184,8 @@ export function SessionComposer({
       mcpSetup,
       skillRefs,
       onSkillRefsChange,
+      runnerId,
+      onRunnerIdChange,
       sessionVariables,
       pool,
       requiredByMap,
@@ -1321,10 +1362,6 @@ export function SessionComposer({
           configActivePanel={configActivePanel}
           onConfigActivePanelChange={handleConfigActivePanelChange}
           renderConfigPanel={renderConfigPanel}
-          showRunner={showRunner}
-          runnerOrg={org ?? ""}
-          runnerId={runnerId ?? null}
-          onRunnerIdChange={onRunnerIdChange ?? (() => {})}
           showModelSelector={showModelSelector}
           modelId={modelId}
           onModelChange={handleModelChange}
@@ -1361,3 +1398,167 @@ function mcpRefFromKey(key: string): ResourceRef {
     kind: ApiResourceKind.mcp_server,
   };
 }
+
+// ---------------------------------------------------------------------------
+// Runner config panel — inline list for the Configure menu
+// ---------------------------------------------------------------------------
+
+function RunnerConfigPanel({
+  org,
+  value,
+  onChange,
+  disabled,
+}: {
+  org: string;
+  value: string | null;
+  onChange: (runnerId: string | null) => void;
+  disabled?: boolean;
+}) {
+  const { runners, isLoading } = useRunnerList(org);
+
+  const { active, inactive } = useMemo(() => {
+    type R = (typeof runners)[number];
+    const act: R[] = [];
+    const inact: R[] = [];
+    for (const r of runners) {
+      if (isActivePhase(r.status?.phase ?? RunnerPhase.UNSPECIFIED)) {
+        act.push(r);
+      } else {
+        inact.push(r);
+      }
+    }
+    const sorter = (a: R, b: R) => {
+      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 ?? "");
+    };
+    act.sort(sorter);
+    inact.sort(sorter);
+    return { active: act, inactive: inact };
+  }, [runners]);
+
+  const isAutoSelected = value === null;
+
+  return (
+    <div className="w-72 space-y-1">
+      {/* Auto option */}
+      <button
+        type="button"
+        onClick={() => onChange(null)}
+        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",
+          isAutoSelected
+            ? "bg-accent font-medium text-foreground"
+            : "text-foreground hover:bg-accent-hover",
+        )}
+        role="option"
+        aria-selected={isAutoSelected}
+      >
+        <span className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-primary" aria-hidden="true" />
+        <span className="flex-1">Default</span>
+        <span className="text-[0.6rem] text-muted-foreground">auto</span>
+      </button>
+
+      {/* Available runners */}
+      {active.length > 0 && (
+        <>
+          <div className="px-2 pt-1 text-[0.65rem] font-medium uppercase tracking-wider text-muted-foreground">
+            Available
+          </div>
+          {active.map((r) => {
+            const id = r.metadata!.id;
+            const name = r.metadata?.name ?? "Unnamed";
+            const phase = r.status?.phase ?? RunnerPhase.UNSPECIFIED;
+            const hostname = r.status?.connectionInfo?.hostname;
+            const isSelected = value === id;
+            return (
+              <button
+                key={id}
+                type="button"
+                onClick={() => onChange(id)}
+                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",
+                  isSelected
+                    ? "bg-accent font-medium text-foreground"
+                    : "text-foreground hover:bg-accent-hover",
+                )}
+                role="option"
+                aria-selected={isSelected}
+              >
+                <span
+                  className={`inline-block h-1.5 w-1.5 shrink-0 rounded-full ${phaseDotColor(phase)}`}
+                  aria-hidden="true"
+                />
+                <div className="flex min-w-0 flex-1 flex-col">
+                  <span className="truncate">{name}</span>
+                  {hostname && (
+                    <span className="truncate text-[0.6rem] leading-tight text-muted-foreground">
+                      {hostname}
+                    </span>
+                  )}
+                </div>
+                <span className="shrink-0 text-[0.6rem] lowercase text-muted-foreground">
+                  {phaseLabel(phase)}
+                </span>
+              </button>
+            );
+          })}
+        </>
+      )}
+
+      {/* Offline runners */}
+      {inactive.length > 0 && (
+        <>
+          <div className="px-2 pt-1 text-[0.65rem] font-medium uppercase tracking-wider text-muted-foreground">
+            Offline
+          </div>
+          {inactive.map((r) => {
+            const id = r.metadata!.id;
+            const name = r.metadata?.name ?? "Unnamed";
+            const phase = r.status?.phase ?? RunnerPhase.UNSPECIFIED;
+            return (
+              <div
+                key={id}
+                className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-xs text-muted-foreground opacity-50"
+              >
+                <span
+                  className={`inline-block h-1.5 w-1.5 shrink-0 rounded-full ${phaseDotColor(phase)}`}
+                  aria-hidden="true"
+                />
+                <span className="min-w-0 flex-1 truncate">{name}</span>
+                <span className="shrink-0 text-[0.6rem] lowercase">
+                  {phaseLabel(phase)}
+                </span>
+              </div>
+            );
+          })}
+        </>
+      )}
+
+      {/* Empty state */}
+      {runners.length === 0 && !isLoading && (
+        <p className="py-3 text-center text-xs text-muted-foreground">
+          No runners registered. Use the CLI or desktop app to start one.
+        </p>
+      )}
+
+      {/* Loading state */}
+      {isLoading && (
+        <div className="py-3 text-center text-xs text-muted-foreground">
+          Loading runners...
+        </div>
+      )}
+
+      {/* Hint */}
+      <p className="px-2 pt-1 text-[0.6rem] leading-relaxed text-muted-foreground">
+        Default assigns a cloud runner automatically. Select a specific runner to execute on your own machine.
+      </p>
+    </div>
+  );
+}

package/src/composer/icons.tsx

@@ -207,6 +207,33 @@ export function SecretsIcon() {
   );
 }
 
+export function RunnerIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <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>
+  );
+}
+
 /** Horizontal sliders icon -- signals "configuration" without conflating with "add content." */
 export function ConfigureIcon() {
   return (

package/src/environment/useEnvironment.ts

@@ -1,10 +1,9 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
 import type { Environment } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/api_pb";
 import type { ResourceRef } from "@stigmer/sdk";
 import { useStigmer } from "../hooks";
-import { toError } from "../internal/toError";
+import { useFetch } from "../internal/useFetch";
 
 /** Return value of {@link useEnvironment}. */
 export interface UseEnvironmentReturn {
@@ -12,6 +11,8 @@ export interface UseEnvironmentReturn {
   readonly environment: Environment | null;
   /** `true` while the initial fetch or a refetch is in flight. */
   readonly isLoading: boolean;
+  /** `true` while a background refetch is in flight and stale data is shown. */
+  readonly isRefetching: boolean;
   /** Error from the last failed request, or `null` when healthy. */
   readonly error: Error | null;
   /** Discard cached data and re-fetch the environment from the server. */
@@ -49,46 +50,21 @@ export function useEnvironment(
   ref: ResourceRef | null,
 ): UseEnvironmentReturn {
   const stigmer = useStigmer();
-  const [environment, setEnvironment] = useState<Environment | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-  const [fetchKey, setFetchKey] = useState(0);
-
-  const refetch = useCallback(() => setFetchKey((k) => k + 1), []);
 
   const org = ref?.org;
   const slug = ref?.slug;
   const version = ref?.version;
 
-  useEffect(() => {
-    if (!org || !slug) {
-      setEnvironment(null);
-      setIsLoading(false);
-      setError(null);
-      return;
-    }
-
-    const cancelled = { current: false };
-    setIsLoading(true);
-    setError(null);
-
-    stigmer.environment.getByReference({ org, slug, version }).then(
-      (result) => {
-        if (cancelled.current) return;
-        setEnvironment(result);
-        setIsLoading(false);
-      },
-      (err) => {
-        if (cancelled.current) return;
-        setError(toError(err));
-        setIsLoading(false);
-      },
-    );
+  const fetchFn =
+    org && slug
+      ? () => stigmer.environment.getByReference({ org, slug, version })
+      : null;
 
-    return () => {
-      cancelled.current = true;
-    };
-  }, [org, slug, version, stigmer, fetchKey]);
+  const { data: environment, isLoading, isRefetching, error, refetch } = useFetch(
+    fetchFn,
+    [org, slug, version, stigmer],
+    null,
+  );
 
-  return { environment, isLoading, error, refetch };
+  return { environment, isLoading, isRefetching, error, refetch };
 }

package/src/environment/useEnvironmentList.ts

@@ -1,11 +1,11 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 import { create } from "@bufbuild/protobuf";
 import type { Environment } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/api_pb";
 import { ListEnvironmentsRequestSchema } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/io_pb";
 import { useStigmer } from "../hooks";
-import { toError } from "../internal/toError";
+import { useFetch } from "../internal/useFetch";
 
 /** Return value of {@link useEnvironmentList}. */
 export interface UseEnvironmentListReturn {
@@ -15,6 +15,8 @@ export interface UseEnvironmentListReturn {
   readonly totalCount: number;
   /** `true` while the initial fetch or a refetch is in flight. */
   readonly isLoading: boolean;
+  /** `true` while a background refetch is in flight and stale data is shown. */
+  readonly isRefetching: boolean;
   /** Error from the last failed request, or `null` when healthy. */
   readonly error: Error | null;
   /** Discard cached data and re-fetch the list from the server. */
@@ -47,30 +49,6 @@ export function useEnvironmentList(
   labels?: Record<string, string>,
 ): UseEnvironmentListReturn {
   const stigmer = useStigmer();
-  const [environments, setEnvironments] = useState<Environment[]>([]);
-  const [totalCount, setTotalCount] = useState(0);
-  const [isLoading, setIsLoading] = useState(!!org);
-  const [error, setError] = useState<Error | null>(null);
-  const [fetchKey, setFetchKey] = useState(0);
-
-  // Synchronously reset loading state when org changes so that
-  // downstream hooks see isLoading=true in the SAME render —
-  // not deferred to the next render via an effect.
-  const [prevOrg, setPrevOrg] = useState(org);
-  if (org !== prevOrg) {
-    setPrevOrg(org);
-    if (org) {
-      setIsLoading(true);
-      setEnvironments([]);
-      setTotalCount(0);
-      setError(null);
-    } else {
-      setIsLoading(false);
-      setEnvironments([]);
-      setTotalCount(0);
-      setError(null);
-    }
-  }
 
   const labelsRef = useRef(labels);
   if (
@@ -81,38 +59,33 @@ export function useEnvironmentList(
   }
   const stableLabels = labelsRef.current;
 
-  const refetch = useCallback(() => setFetchKey((k) => k + 1), []);
-
-  useEffect(() => {
-    if (!org) return;
-
-    const cancelled = { current: false };
-
-    stigmer.environment
-      .list(
-        create(ListEnvironmentsRequestSchema, {
-          org,
-          labels: stableLabels ?? {},
-        }),
-      )
-      .then(
-        (result) => {
-          if (cancelled.current) return;
-          setEnvironments(result.items);
-          setTotalCount(result.totalCount);
-          setIsLoading(false);
-        },
-        (err) => {
-          if (cancelled.current) return;
-          setError(toError(err));
-          setIsLoading(false);
-        },
-      );
+  const fetchFn = org
+    ? async () => {
+        const result = await stigmer.environment.list(
+          create(ListEnvironmentsRequestSchema, {
+            org,
+            labels: stableLabels ?? {},
+          }),
+        );
+        return {
+          environments: result.items as Environment[],
+          totalCount: result.totalCount,
+        };
+      }
+    : null;
 
-    return () => {
-      cancelled.current = true;
-    };
-  }, [org, stableLabels, stigmer, fetchKey]);
+  const { data, isLoading, isRefetching, error, refetch } = useFetch(
+    fetchFn,
+    [org, stableLabels, stigmer],
+    { environments: [] as Environment[], totalCount: 0 },
+  );
 
-  return { environments, totalCount, isLoading, error, refetch };
+  return {
+    environments: data.environments,
+    totalCount: data.totalCount,
+    isLoading,
+    isRefetching,
+    error,
+    refetch,
+  };
 }

package/src/execution/ArtifactPreviewModal.tsx

@@ -487,7 +487,7 @@ function FileContentStateView({
   readonly content: string | null;
   readonly contentType: string | null;
   readonly isLoading: boolean;
-  readonly error: string | null;
+  readonly error: Error | null;
   readonly isTruncated: boolean;
 }) {
   if (isLoading) {
@@ -509,7 +509,7 @@ function FileContentStateView({
     return (
       <div className="flex flex-col items-center justify-center gap-2 p-8 text-center">
         <ErrorAlertIcon />
-        <p className="text-sm text-destructive">{error}</p>
+        <p className="text-sm text-destructive">{error.message}</p>
       </div>
     );
   }

package/src/execution/useArtifactContent.ts

@@ -1,9 +1,21 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
 import { create } from "@bufbuild/protobuf";
 import { GetArtifactContentRequestSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/io_pb";
 import { useStigmer } from "../hooks";
+import { useFetch } from "../internal/useFetch";
+
+interface ArtifactContentData {
+  content: string | null;
+  contentType: string | null;
+  isTruncated: boolean;
+}
+
+const EMPTY_ARTIFACT: ArtifactContentData = {
+  content: null,
+  contentType: null,
+  isTruncated: false,
+};
 
 /** Return value of {@link useArtifactContent}. */
 export interface UseArtifactContentReturn {
@@ -31,8 +43,11 @@ export interface UseArtifactContentReturn {
   /** `true` while the content request is in-flight. */
   readonly isLoading: boolean;
 
-  /** Error message from the last failed attempt, or `null` when healthy. */
-  readonly error: string | null;
+  /** `true` while a background refetch is in flight. */
+  readonly isRefetching: boolean;
+
+  /** Error from the last failed attempt, or `null` when healthy. */
+  readonly error: Error | null;
 
   /**
    * Re-fetch the artifact content. Uses the `fetchKey` counter pattern
@@ -130,66 +145,34 @@ export function useArtifactContent(
 ): UseArtifactContentReturn {
   const stigmer = useStigmer();
 
-  const [content, setContent] = useState<string | null>(null);
-  const [contentType, setContentType] = useState<string | null>(null);
-  const [isTruncated, setIsTruncated] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [fetchKey, setFetchKey] = useState(0);
-
-  const refetch = useCallback(() => setFetchKey((k) => k + 1), []);
-
-  useEffect(() => {
-    if (!executionId || !storageKey) {
-      setContent(null);
-      setContentType(null);
-      setIsTruncated(false);
-      setIsLoading(false);
-      setError(null);
-      return;
-    }
-
-    const cancelled = { current: false };
-    setIsLoading(true);
-    setError(null);
-
-    stigmer.agentExecution
-      .getArtifactContent(
-        create(GetArtifactContentRequestSchema, {
-          executionId,
-          storageKey,
-          ...(entryPath ? { entryPath } : {}),
-        }),
-      )
-      .then(
-        (result) => {
-          if (cancelled.current) return;
-
-          const decoded = new TextDecoder().decode(result.content);
-          setContent(decoded);
-          setContentType(result.contentType || null);
-          setIsTruncated(result.truncated);
-          setIsLoading(false);
-        },
-        (err) => {
-          if (cancelled.current) return;
-
-          setError(
-            err instanceof Error
-              ? err.message
-              : "Failed to load artifact content",
-          );
-          setContent(null);
-          setContentType(null);
-          setIsTruncated(false);
-          setIsLoading(false);
-        },
-      );
-
-    return () => {
-      cancelled.current = true;
-    };
-  }, [executionId, storageKey, entryPath, contentHash, stigmer, fetchKey]);
-
-  return { content, contentType, isTruncated, isLoading, error, refetch };
+  const { data, isLoading, isRefetching, error, refetch } = useFetch(
+    executionId && storageKey
+      ? () =>
+          stigmer.agentExecution
+            .getArtifactContent(
+              create(GetArtifactContentRequestSchema, {
+                executionId,
+                storageKey,
+                ...(entryPath ? { entryPath } : {}),
+              }),
+            )
+            .then((result): ArtifactContentData => ({
+              content: new TextDecoder().decode(result.content),
+              contentType: result.contentType || null,
+              isTruncated: result.truncated,
+            }))
+      : null,
+    [executionId, storageKey, entryPath, contentHash, stigmer],
+    EMPTY_ARTIFACT,
+  );
+
+  return {
+    content: data.content,
+    contentType: data.contentType,
+    isTruncated: data.isTruncated,
+    isLoading,
+    isRefetching,
+    error,
+    refetch,
+  };
 }