@stigmer/react 0.0.100 → 0.1.0

package/src/search/useResourceCount.ts

@@ -1,8 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
 import type { ListParams, ListResult } from "@stigmer/sdk";
 import type { ResourceListScope } from "./useResourceList";
+import { useFetch } from "../internal/useFetch";
 
 export interface UseResourceCountOptions {
   /** Text query to filter results before counting. */
@@ -26,7 +26,8 @@ export interface UseResourceCountReturn {
    */
   readonly count: number | undefined;
   readonly isLoading: boolean;
-  readonly error: string | null;
+  readonly isRefetching: boolean;
+  readonly error: Error | null;
   readonly refetch: () => void;
 }
 
@@ -49,54 +50,25 @@ export function useResourceCount(
   org: string | null,
   options?: UseResourceCountOptions,
 ): UseResourceCountReturn {
-  const [count, setCount] = useState<number | undefined>(undefined);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [fetchKey, setFetchKey] = useState(0);
-
   const query = options?.query;
   const scope = options?.scope ?? "org";
 
-  const refetch = useCallback(() => setFetchKey((k) => k + 1), []);
-
-  useEffect(() => {
-    if (!org) {
-      setCount(undefined);
-      setIsLoading(false);
-      setError(null);
-      return;
-    }
-
-    const cancelled = { current: false };
-    setIsLoading(true);
-    setError(null);
-
-    const params: ListParams = {
-      org: scope === "all" ? "" : org,
-      query: query || undefined,
-      excludePublic: false,
-      page: { num: 1, size: 1 },
-    };
-
-    listFn(params).then(
-      (result) => {
-        if (cancelled.current) return;
-        setCount(result.totalCount);
-        setIsLoading(false);
-      },
-      (err) => {
-        if (cancelled.current) return;
-        setError(
-          err instanceof Error ? err.message : "Failed to load resource count",
-        );
-        setIsLoading(false);
-      },
-    );
-
-    return () => {
-      cancelled.current = true;
-    };
-  }, [listFn, org, query, scope, fetchKey]);
+  const { data: count, isLoading, isRefetching, error, refetch } = useFetch<number | undefined>(
+    org
+      ? async () => {
+          const params: ListParams = {
+            org: scope === "all" ? "" : org,
+            query: query || undefined,
+            excludePublic: false,
+            page: { num: 1, size: 1 },
+          };
+          const result = await listFn(params);
+          return result.totalCount;
+        }
+      : null,
+    [listFn, org, query, scope],
+    undefined,
+  );
 
-  return { count, isLoading, error, refetch };
+  return { count, isLoading, isRefetching, error, refetch };
 }

package/src/search/useResourceList.ts

@@ -1,8 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
 import type { ListParams, ListResult } from "@stigmer/sdk";
 import type { SearchResult } from "@stigmer/protos/ai/stigmer/search/v1/io_pb";
+import { useFetch } from "../internal/useFetch";
 
 /**
  * Scope controls resource listing boundaries.
@@ -38,13 +38,26 @@ export interface UseResourceListReturn {
   readonly totalPages: number;
   readonly currentPage: number;
   readonly isLoading: boolean;
-  readonly error: string | null;
+  readonly isRefetching: boolean;
+  readonly error: Error | null;
   readonly refetch: () => void;
 }
 
 const DEFAULT_PAGE_SIZE = 20;
 const DEFAULT_PAGE = 1;
 
+interface ResourceListData {
+  entries: readonly SearchResult[];
+  totalCount: number;
+  totalPages: number;
+}
+
+const INITIAL_DATA: ResourceListData = {
+  entries: [],
+  totalCount: 0,
+  totalPages: 0,
+};
+
 /**
  * Internal hook that provides paginated, scope-aware resource listing.
  *
@@ -61,70 +74,40 @@ export function useResourceList(
   org: string | null,
   options?: UseResourceListOptions,
 ): UseResourceListReturn {
-  const [entries, setEntries] = useState<SearchResult[]>([]);
-  const [totalCount, setTotalCount] = useState(0);
-  const [totalPages, setTotalPages] = useState(0);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [fetchKey, setFetchKey] = useState(0);
-
   const pageSize = options?.pageSize ?? DEFAULT_PAGE_SIZE;
   const page = options?.page ?? DEFAULT_PAGE;
   const query = options?.query;
   const scope = options?.scope ?? "org";
 
-  const refetch = useCallback(() => setFetchKey((k) => k + 1), []);
-
-  useEffect(() => {
-    if (!org) {
-      setEntries([]);
-      setTotalCount(0);
-      setTotalPages(0);
-      setIsLoading(false);
-      setError(null);
-      return;
-    }
-
-    const cancelled = { current: false };
-    setIsLoading(true);
-    setError(null);
-
-    const params: ListParams = {
-      org,
-      query: query || undefined,
-      excludePublic: false,
-      crossOrgPublic: scope === "all",
-      page: { num: page, size: pageSize },
-    };
-
-    listFn(params).then(
-      (result) => {
-        if (cancelled.current) return;
-        setEntries([...result.entries]);
-        setTotalCount(result.totalCount);
-        setTotalPages(result.totalPages);
-        setIsLoading(false);
-      },
-      (err) => {
-        if (cancelled.current) return;
-        setError(
-          err instanceof Error ? err.message : "Failed to load resources",
-        );
-        setIsLoading(false);
-      },
-    );
-
-    return () => {
-      cancelled.current = true;
-    };
-  }, [listFn, org, query, scope, page, pageSize, fetchKey]);
+  const { data, isLoading, isRefetching, error, refetch } = useFetch<ResourceListData>(
+    org
+      ? async () => {
+          const params: ListParams = {
+            org,
+            query: query || undefined,
+            excludePublic: false,
+            crossOrgPublic: scope === "all",
+            page: { num: page, size: pageSize },
+          };
+          const result = await listFn(params);
+          return {
+            entries: [...result.entries],
+            totalCount: result.totalCount,
+            totalPages: result.totalPages,
+          };
+        }
+      : null,
+    [listFn, org, query, scope, page, pageSize],
+    INITIAL_DATA,
+  );
 
   return {
-    entries,
-    totalCount,
-    totalPages,
+    entries: data.entries,
+    totalCount: data.totalCount,
+    totalPages: data.totalPages,
     currentPage: page,
     isLoading,
+    isRefetching,
     error,
     refetch,
   };

package/src/search/useResourceSearch.ts

@@ -1,8 +1,9 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import type { ListParams, ListResult } from "@stigmer/sdk";
 import type { SearchResult } from "@stigmer/protos/ai/stigmer/search/v1/io_pb";
+import { useFetch } from "../internal/useFetch";
 
 /** Shared options for resource search hooks (`useAgentSearch`, `useMcpServerSearch`, `useSkillSearch`). */
 export interface UseResourceSearchOptions {
@@ -28,8 +29,10 @@ export interface UseResourceSearchReturn {
   readonly results: readonly SearchResult[];
   /** `true` while a search request is in flight. */
   readonly isLoading: boolean;
-  /** Error message from the last failed search, or `null` when healthy. */
-  readonly error: string | null;
+  /** `true` while a background refetch is in flight. */
+  readonly isRefetching: boolean;
+  /** Error from the last failed search, or `null` when healthy. */
+  readonly error: Error | null;
   /** Current search query text. */
   readonly query: string;
   /** Update the search query (triggers a debounced re-search). */
@@ -55,57 +58,33 @@ export function useResourceSearch(
   org: string,
   options?: UseResourceSearchOptions,
 ): UseResourceSearchReturn {
-  const [results, setResults] = useState<SearchResult[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
   const [query, setQuery] = useState("");
   const [debouncedQuery, setDebouncedQuery] = useState("");
-  const [fetchKey, setFetchKey] = useState(0);
 
   const pageSize = options?.pageSize ?? DEFAULT_PAGE_SIZE;
   const debounceMs = options?.debounceMs ?? DEFAULT_DEBOUNCE_MS;
   const scope = options?.scope ?? "org";
 
-  // Debounce query changes
   useEffect(() => {
     const timer = setTimeout(() => setDebouncedQuery(query), debounceMs);
     return () => clearTimeout(timer);
   }, [query, debounceMs]);
 
-  const refetch = useCallback(() => setFetchKey((k) => k + 1), []);
+  const { data: results, isLoading, isRefetching, error, refetch } = useFetch<SearchResult[]>(
+    async () => {
+      const params: ListParams = {
+        org,
+        query: debouncedQuery || undefined,
+        excludePublic: false,
+        crossOrgPublic: scope === "all",
+        page: { num: 1, size: pageSize },
+      };
+      const result = await listFn(params);
+      return [...result.entries];
+    },
+    [listFn, org, debouncedQuery, pageSize, scope],
+    [],
+  );
 
-  useEffect(() => {
-    const cancelled = { current: false };
-    setIsLoading(true);
-    setError(null);
-
-    const params: ListParams = {
-      org,
-      query: debouncedQuery || undefined,
-      excludePublic: false,
-      crossOrgPublic: scope === "all",
-      page: { num: 1, size: pageSize },
-    };
-
-    listFn(params).then(
-      (result) => {
-        if (cancelled.current) return;
-        setResults([...result.entries]);
-        setIsLoading(false);
-      },
-      (err) => {
-        if (cancelled.current) return;
-        setError(
-          err instanceof Error ? err.message : "Failed to load resources",
-        );
-        setIsLoading(false);
-      },
-    );
-
-    return () => {
-      cancelled.current = true;
-    };
-  }, [listFn, org, debouncedQuery, pageSize, scope, fetchKey]);
-
-  return { results, isLoading, error, query, setQuery, refetch };
+  return { results, isLoading, isRefetching, error, query, setQuery, refetch };
 }

package/src/session/useNewSessionFlow.ts

@@ -12,6 +12,7 @@ import { useCreateSession } from "./useCreateSession";
 import { useCreateAgentExecution } from "../execution/useCreateAgentExecution";
 
 const STORAGE_KEY_MODEL = "stigmer:session:model";
+const STORAGE_KEY_RUNNER = "stigmer:session:runner";
 
 /** Options for {@link useNewSessionFlow}. */
 export interface UseNewSessionFlowOptions {
@@ -138,7 +139,11 @@ export function useNewSessionFlow(
   const { getModel } = useModelRegistry();
   const { create: createSession } = useCreateSession();
   const { create: createExecution } = useCreateAgentExecution();
-  const { agent: defaultAgent } = useDefaultAgent(org);
+  const {
+    agent: defaultAgent,
+    isLoading: isDefaultAgentLoading,
+    error: defaultAgentError,
+  } = useDefaultAgent(org);
   const workspace = useWorkspaceEntries();
   const sessionVariables = useSessionVariables();
 
@@ -168,6 +173,23 @@ export function useNewSessionFlow(
     }
   }, [modelId]);
 
+  // Restore persisted runner on mount
+  useEffect(() => {
+    const stored = localStorage.getItem(STORAGE_KEY_RUNNER);
+    if (stored) {
+      setRunnerId(stored);
+    }
+  }, []);
+
+  // Persist runner on change
+  useEffect(() => {
+    if (runnerId) {
+      localStorage.setItem(STORAGE_KEY_RUNNER, runnerId);
+    } else {
+      localStorage.removeItem(STORAGE_KEY_RUNNER);
+    }
+  }, [runnerId]);
+
   const submit = useCallback(
     async (
       message: string,
@@ -221,6 +243,16 @@ export function useNewSessionFlow(
         } else {
           const defaultInstanceId = defaultAgent?.status?.defaultInstanceId;
           if (!defaultInstanceId) {
+            if (isDefaultAgentLoading) {
+              throw new Error(
+                "Loading default agent. Please try again in a moment.",
+              );
+            }
+            if (defaultAgentError) {
+              throw new Error(
+                "Failed to load default agent. Please try again.",
+              );
+            }
             throw new Error(
               "No default agent available. Select an agent to start a session.",
             );
@@ -253,6 +285,8 @@ export function useNewSessionFlow(
       agentRef,
       resolution,
       defaultAgent,
+      isDefaultAgentLoading,
+      defaultAgentError,
       createSession,
       createExecution,
       sessionVariables,

package/src/session/useSession.ts

@@ -1,16 +1,17 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
 import type { Session } from "@stigmer/protos/ai/stigmer/agentic/session/v1/api_pb";
 import { useStigmer } from "../hooks";
-import { toError } from "../internal/toError";
+import { useFetch } from "../internal/useFetch";
 
 /** Return value of {@link useSession}. */
 export interface UseSessionReturn {
   /** The fetched Session, or `null` while loading or on error. */
   readonly session: Session | null;
-  /** `true` while the initial fetch or a refetch is in flight. */
+  /** `true` while the initial fetch is in flight. */
   readonly isLoading: boolean;
+  /** `true` while a background refetch is in flight. */
+  readonly isRefetching: boolean;
   /** Error from the last failed request, or `null` when healthy. */
   readonly error: Error | null;
   /** Discard cached data and re-fetch the session from the server. */
@@ -56,42 +57,12 @@ export interface UseSessionReturn {
  */
 export function useSession(id: string | null): UseSessionReturn {
   const stigmer = useStigmer();
-  const [session, setSession] = useState<Session | 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 { data: session, isLoading, isRefetching, error, refetch } = useFetch(
+    id ? () => stigmer.session.get(id) : null,
+    [id, stigmer],
+    null as Session | null,
+  );
 
-  useEffect(() => {
-    if (!id) {
-      setSession(null);
-      setIsLoading(false);
-      setError(null);
-      return;
-    }
-
-    const cancelled = { current: false };
-    setIsLoading(true);
-    setError(null);
-
-    stigmer.session.get(id).then(
-      (result) => {
-        if (cancelled.current) return;
-        setSession(result);
-        setIsLoading(false);
-      },
-      (err) => {
-        if (cancelled.current) return;
-        setError(toError(err));
-        setIsLoading(false);
-      },
-    );
-
-    return () => {
-      cancelled.current = true;
-    };
-  }, [id, stigmer, fetchKey]);
-
-  return { session, isLoading, error, refetch };
+  return { session, isLoading, isRefetching, error, refetch };
 }

package/src/session/useSessionExecutions.ts

@@ -1,18 +1,19 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
 import { create } from "@bufbuild/protobuf";
 import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
 import { ListAgentExecutionsBySessionRequestSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/io_pb";
 import { useStigmer } from "../hooks";
-import { toError } from "../internal/toError";
+import { useFetch } from "../internal/useFetch";
 
 /** Return value of {@link useSessionExecutions}. */
 export interface UseSessionExecutionsReturn {
   /** All executions for the session, empty while loading or on error. */
   readonly executions: readonly AgentExecution[];
-  /** `true` while the initial fetch or a refetch is in flight. */
+  /** `true` while the initial fetch is in flight. */
   readonly isLoading: boolean;
+  /** `true` while a background refetch is in flight. */
+  readonly isRefetching: boolean;
   /** Error from the last failed request, or `null` when healthy. */
   readonly error: Error | null;
   /** Discard cached data and re-fetch the execution list from the server. */
@@ -57,49 +58,22 @@ export function useSessionExecutions(
   sessionId: string | null,
 ): UseSessionExecutionsReturn {
   const stigmer = useStigmer();
-  const [executions, setExecutions] = useState<AgentExecution[]>([]);
-  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 { data: executions, isLoading, isRefetching, error, refetch } = useFetch(
+    sessionId
+      ? () =>
+          stigmer.agentExecution
+            .listBySession(
+              create(ListAgentExecutionsBySessionRequestSchema, {
+                sessionId,
+                pageSize: 100,
+              }),
+            )
+            .then((result) => result.entries)
+      : null,
+    [sessionId, stigmer],
+    [] as AgentExecution[],
+  );
 
-  useEffect(() => {
-    if (!sessionId) {
-      setExecutions([]);
-      setIsLoading(false);
-      setError(null);
-      return;
-    }
-
-    const cancelled = { current: false };
-    setIsLoading(true);
-    setError(null);
-
-    stigmer.agentExecution
-      .listBySession(
-        create(ListAgentExecutionsBySessionRequestSchema, {
-          sessionId,
-          pageSize: 100,
-        }),
-      )
-      .then(
-        (result) => {
-          if (cancelled.current) return;
-          setExecutions(result.entries);
-          setIsLoading(false);
-        },
-        (err) => {
-          if (cancelled.current) return;
-          setError(toError(err));
-          setIsLoading(false);
-        },
-      );
-
-    return () => {
-      cancelled.current = true;
-    };
-  }, [sessionId, stigmer, fetchKey]);
-
-  return { executions, isLoading, error, refetch };
+  return { executions, isLoading, isRefetching, error, refetch };
 }

package/src/session/useSessionList.ts

@@ -1,10 +1,11 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 import { create } from "@bufbuild/protobuf";
 import type { Session } from "@stigmer/protos/ai/stigmer/agentic/session/v1/api_pb";
 import { ListSessionsRequestSchema } from "@stigmer/protos/ai/stigmer/agentic/session/v1/io_pb";
 import { useStigmer } from "../hooks";
+import { useFetch } from "../internal/useFetch";
 
 /** Options for {@link useSessionList}. */
 export interface UseSessionListOptions {
@@ -18,10 +19,12 @@ export interface UseSessionListOptions {
 export interface UseSessionListReturn {
   /** The fetched list of Sessions, empty while loading or on error. */
   readonly sessions: readonly Session[];
-  /** `true` while the initial fetch or a refetch is in flight. */
+  /** `true` while the initial fetch is in flight. */
   readonly isLoading: boolean;
-  /** Error message from the last failed request, or `null` when healthy. */
-  readonly error: string | null;
+  /** `true` while a background refetch is in flight. */
+  readonly isRefetching: boolean;
+  /** Error from the last failed request, or `null` when healthy. */
+  readonly error: Error | null;
   /** Discard cached data and re-fetch the session list from the server. */
   readonly refetch: () => void;
 }
@@ -61,10 +64,6 @@ export function useSessionList(
   options?: UseSessionListOptions,
 ): UseSessionListReturn {
   const stigmer = useStigmer();
-  const [sessions, setSessions] = useState<Session[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [fetchKey, setFetchKey] = useState(0);
 
   const pageSize = options?.pageSize ?? DEFAULT_PAGE_SIZE;
   const tagsRef = useRef(options?.tags);
@@ -77,39 +76,19 @@ export function useSessionList(
   }
   const tags = tagsRef.current;
 
-  const refetch = useCallback(() => setFetchKey((k) => k + 1), []);
+  const { data: sessions, isLoading, isRefetching, error, refetch } = useFetch(
+    () =>
+      stigmer.session
+        .list(
+          create(ListSessionsRequestSchema, {
+            pageSize,
+            tags: tags ?? [],
+          }),
+        )
+        .then((result) => result.entries),
+    [stigmer, pageSize, tags],
+    [] as Session[],
+  );
 
-  useEffect(() => {
-    const cancelled = { current: false };
-    setIsLoading(true);
-    setError(null);
-
-    stigmer.session
-      .list(
-        create(ListSessionsRequestSchema, {
-          pageSize,
-          tags: tags ?? [],
-        }),
-      )
-      .then(
-        (result) => {
-          if (cancelled.current) return;
-          setSessions(result.entries);
-          setIsLoading(false);
-        },
-        (err) => {
-          if (cancelled.current) return;
-          setError(
-            err instanceof Error ? err.message : "Failed to load sessions",
-          );
-          setIsLoading(false);
-        },
-      );
-
-    return () => {
-      cancelled.current = true;
-    };
-  }, [stigmer, fetchKey, pageSize, tags]);
-
-  return { sessions, isLoading, error, refetch };
+  return { sessions, isLoading, isRefetching, error, refetch };
 }

package/src/skill/SkillPicker.tsx

@@ -217,7 +217,7 @@ export function SkillPicker({
         autoFocus
       />
 
-      {error && <p className="text-xs text-destructive">{error}</p>}
+      {error && <p className="text-xs text-destructive">{error.message}</p>}
 
       {/* Scrollable results list */}
       <div className="relative">