@stigmer/react 0.5.0 → 1.0.0

package/src/mcp-server/McpServerPicker.tsx

@@ -21,6 +21,8 @@ import { ScrollFade } from "../internal/ScrollFade";
 import { McpServerConfigPanel } from "./McpServerConfigPanel";
 import type { McpServerSetupEntry } from "./mcpServerSetupReducer";
 import { useMcpServerOAuthConnect } from "./useMcpServerOAuthConnect";
+import { ScopeToggle } from "../library/ScopeToggle";
+import type { ResourceListScope } from "../search";
 
 // ---------------------------------------------------------------------------
 // Setup integration props
@@ -263,8 +265,9 @@ export function McpServerPicker({
   const instanceId = useId();
   const listId = `${instanceId}-list`;
 
+  const [activeScope, setActiveScope] = useState<ResourceListScope>(scope ?? "org");
   const { results, isLoading, error, query, setQuery } =
-    useMcpServerSearch(org, { scope });
+    useMcpServerSearch(org, { scope: activeScope });
   const oauth = useMcpServerOAuthConnect();
 
   const [focusIndex, setFocusIndex] = useState(-1);
@@ -580,6 +583,8 @@ export function McpServerPicker({
         autoFocus
       />
 
+      <ScopeToggle value={activeScope} onChange={setActiveScope} disabled={disabled} />
+
       {error && <p className="text-xs text-destructive">{error.message}</p>}
 
       {/* Scrollable results list */}

package/src/models/ModelRegistryContext.ts

@@ -8,6 +8,8 @@ export interface ModelRegistryState {
   readonly models: readonly ModelInfo[];
   readonly isLoading: boolean;
   readonly error: Error | null;
+  /** Retry fetching the model registry. No-op while a fetch is in flight. */
+  readonly refetch: () => void;
 }
 
 /**
@@ -21,6 +23,7 @@ export const ModelRegistryContext = createContext<ModelRegistryState>({
   models: [],
   isLoading: true,
   error: null,
+  refetch: () => {},
 });
 
 /**

package/src/models/ModelSelector.tsx

@@ -119,7 +119,7 @@ export function ModelSelector({
     }
   }, [initialHarness, isHarnessLocked]);
 
-  const { models, featured, defaultModel, getModel, byProvider } = useModelRegistry(
+  const { models, featured, defaultModel, getModel, byProvider, isLoading, error, refetch } = useModelRegistry(
     { harness: activeHarness },
   );
 
@@ -393,7 +393,30 @@ export function ModelSelector({
               aria-label="Available models"
               className="max-h-72 overflow-y-auto p-1"
             >
-              {visibleModels.length === 0 && (
+              {visibleModels.length === 0 && isLoading && (
+                <div className="flex items-center justify-center gap-2 px-2 py-3">
+                  <div className="size-3 animate-spin rounded-full border border-muted border-t-primary" />
+                  <span className="text-xs text-muted-foreground">Loading models…</span>
+                </div>
+              )}
+
+              {visibleModels.length === 0 && !isLoading && error != null && (
+                <div className="flex flex-col items-center gap-1.5 px-2 py-3">
+                  <span className="text-xs text-muted-foreground">Failed to load models</span>
+                  <button
+                    type="button"
+                    className={cn(
+                      "rounded-md border border-border bg-background px-2.5 py-1 text-xs text-foreground",
+                      "hover:bg-accent-hover transition-colors cursor-pointer",
+                    )}
+                    onClick={refetch}
+                  >
+                    Retry
+                  </button>
+                </div>
+              )}
+
+              {visibleModels.length === 0 && !isLoading && error == null && (
                 <div className="px-2 py-3 text-center text-xs text-muted-foreground">
                   No models found
                 </div>

package/src/models/__tests__/useModelRegistry.test.tsx

@@ -90,8 +90,10 @@ const TEST_REGISTRY_JSON = {
 
 const TEST_MODELS: readonly ModelInfo[] = parseRegistryJson(TEST_REGISTRY_JSON);
 
+const noopRefetch = () => {};
+
 function createWrapper(models: readonly ModelInfo[] = TEST_MODELS) {
-  const state: ModelRegistryState = { models, isLoading: false, error: null };
+  const state: ModelRegistryState = { models, isLoading: false, error: null, refetch: noopRefetch };
   return function Wrapper({ children }: { children: ReactNode }) {
     return (
       <ModelRegistryContext.Provider value={state}>
@@ -285,7 +287,7 @@ describe("useModelRegistry", () => {
 
   describe("loading state", () => {
     it("exposes isLoading from context", () => {
-      const loadingState: ModelRegistryState = { models: [], isLoading: true, error: null };
+      const loadingState: ModelRegistryState = { models: [], isLoading: true, error: null, refetch: noopRefetch };
       const wrapper = ({ children }: { children: ReactNode }) => (
         <ModelRegistryContext.Provider value={loadingState}>
           {children}
@@ -298,7 +300,7 @@ describe("useModelRegistry", () => {
 
     it("exposes error from context", () => {
       const err = new Error("fetch failed");
-      const errorState: ModelRegistryState = { models: [], isLoading: false, error: err };
+      const errorState: ModelRegistryState = { models: [], isLoading: false, error: err, refetch: noopRefetch };
       const wrapper = ({ children }: { children: ReactNode }) => (
         <ModelRegistryContext.Provider value={errorState}>
           {children}

package/src/models/useModelRegistry.ts

@@ -55,6 +55,8 @@ export interface UseModelRegistryReturn {
   readonly isLoading: boolean;
   /** Non-null if the API fetch failed. Models will be empty in this case. */
   readonly error: Error | null;
+  /** Retry fetching the model registry. No-op while a fetch is in flight. */
+  readonly refetch: () => void;
 }
 
 /**
@@ -85,7 +87,7 @@ export interface UseModelRegistryReturn {
  */
 export function useModelRegistry(options?: UseModelRegistryOptions): UseModelRegistryReturn {
   const harness = options?.harness;
-  const { models: allModels, isLoading, error } = useModelRegistryContext();
+  const { models: allModels, isLoading, error, refetch } = useModelRegistryContext();
 
   return useMemo(() => {
     const isUnified = harness === undefined;
@@ -143,6 +145,7 @@ export function useModelRegistry(options?: UseModelRegistryOptions): UseModelReg
       getByKey: (key: string) => byCompoundKey.get(key),
       isLoading,
       error,
+      refetch,
     };
-  }, [harness, allModels, isLoading, error]);
+  }, [harness, allModels, isLoading, error, refetch]);
 }

package/src/provider.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
 import type { Stigmer, DeploymentMode } from "@stigmer/sdk";
 import { cn, resolvePresetClass } from "@stigmer/theme";
 import type { ThemePresetId } from "@stigmer/theme";
@@ -12,6 +12,9 @@ import { PortalContainerContext } from "./portal-container";
 import { ModelRegistryContext } from "./models/ModelRegistryContext";
 import type { ModelRegistryState } from "./models/ModelRegistryContext";
 import { fetchModelRegistry } from "./models/registry";
+import { TaskKindRegistryContext } from "./workflow/TaskKindRegistryContext";
+import type { TaskKindRegistryState } from "./workflow/TaskKindRegistryContext";
+import type { TaskKindDescriptor } from "./workflow/types";
 
 /** Props for {@link StigmerProvider}. */
 export interface StigmerProviderProps {
@@ -130,20 +133,23 @@ export function StigmerProvider({
 
   const portalContainer = usePortalContainer(resolvedMode, presetClass);
   const registryState = useModelRegistryFetch(client);
+  const taskKindRegistryState = useTaskKindRegistryFetch(client);
 
   return (
     <StigmerContext.Provider value={client}>
       <DeploymentModeContext.Provider value={deploymentMode}>
         <ColorModeContext.Provider value={resolvedMode}>
           <ModelRegistryContext.Provider value={registryState}>
-            <PortalContainerContext.Provider value={portalContainer}>
-              <div
-                className={cn("stgm", presetClass, className)}
-                data-stgm-color-mode={resolvedMode}
-              >
-                {children}
-              </div>
-            </PortalContainerContext.Provider>
+            <TaskKindRegistryContext.Provider value={taskKindRegistryState}>
+              <PortalContainerContext.Provider value={portalContainer}>
+                <div
+                  className={cn("stgm", presetClass, className)}
+                  data-stgm-color-mode={resolvedMode}
+                >
+                  {children}
+                </div>
+              </PortalContainerContext.Provider>
+            </TaskKindRegistryContext.Provider>
           </ModelRegistryContext.Provider>
         </ColorModeContext.Provider>
       </DeploymentModeContext.Provider>
@@ -151,15 +157,23 @@ export function StigmerProvider({
   );
 }
 
+const RETRY_DELAYS_MS = [1_000, 2_000, 4_000];
+const TOKEN_POLL_INTERVAL_MS = 500;
+const TOKEN_POLL_MAX_MS = 10_000;
+
 /**
- * Fetches the model registry from the authenticated API on mount and
- * caches the result for the lifetime of the provider.
+ * Fetches the model registry from the authenticated API and caches
+ * the result for the lifetime of the provider.
  *
- * Uses the client's `baseUrl` and `getAuthCredential()` so the fetch
- * is authenticated with the same token the SDK uses for all other calls.
+ * Handles the auth race condition where `StigmerProvider` mounts before
+ * PKCE authentication is established (e.g. desktop release builds with
+ * a fresh localStorage). When the initial token is `null`, polls for
+ * a valid token before giving up. Retries on transient failures with
+ * exponential backoff. Exposes `refetch` for manual retry from the UI.
  */
 function useModelRegistryFetch(client: Stigmer): ModelRegistryState {
-  const [state, setState] = useState<ModelRegistryState>({
+  const [version, setVersion] = useState(0);
+  const [state, setState] = useState<Omit<ModelRegistryState, "refetch">>({
     models: [],
     isLoading: true,
     error: null,
@@ -168,31 +182,255 @@ function useModelRegistryFetch(client: Stigmer): ModelRegistryState {
   const clientRef = useRef(client);
   clientRef.current = client;
 
-  useEffect(() => {
-    let cancelled = false;
+  const fetchAttemptRef = useRef(0);
 
+  const doFetch = useCallback(async (signal: AbortSignal) => {
     const c = clientRef.current;
-    c.getAuthCredential()
-      .then((token) => fetchModelRegistry(c.baseUrl, token, c.fetch))
-      .then((models) => {
-        if (!cancelled) {
+    let token = await c.getAuthCredential();
+
+    if (!token) {
+      const start = Date.now();
+      while (!token && Date.now() - start < TOKEN_POLL_MAX_MS) {
+        if (signal.aborted) return;
+        await new Promise((r) => setTimeout(r, TOKEN_POLL_INTERVAL_MS));
+        if (signal.aborted) return;
+        token = await c.getAuthCredential();
+      }
+    }
+
+    return fetchModelRegistry(c.baseUrl, token, c.fetch);
+  }, []);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    const { signal } = controller;
+
+    fetchAttemptRef.current = 0;
+
+    const attempt = async () => {
+      if (signal.aborted) return;
+
+      setState((prev) => (prev.isLoading ? prev : { ...prev, isLoading: true }));
+
+      try {
+        const models = await doFetch(signal);
+        if (!signal.aborted && models) {
           setState({ models, isLoading: false, error: null });
+          fetchAttemptRef.current = 0;
         }
-      })
-      .catch((err: unknown) => {
-        if (!cancelled) {
+      } catch (err: unknown) {
+        if (signal.aborted) return;
+
+        const retryIdx = fetchAttemptRef.current;
+        fetchAttemptRef.current = retryIdx + 1;
+
+        if (retryIdx < RETRY_DELAYS_MS.length) {
+          setTimeout(() => { if (!signal.aborted) attempt(); }, RETRY_DELAYS_MS[retryIdx]);
+        } else {
           setState({
             models: [],
             isLoading: false,
             error: err instanceof Error ? err : new Error(String(err)),
           });
         }
-      });
+      }
+    };
+
+    attempt();
+
+    return () => { controller.abort(); };
+  }, [doFetch, version]);
+
+  const refetch = useCallback(() => {
+    setState((prev) => {
+      if (prev.isLoading) return prev;
+      return { ...prev, isLoading: true, error: null };
+    });
+    setVersion((v) => v + 1);
+  }, []);
+
+  return { ...state, refetch };
+}
+
+// ---------------------------------------------------------------------------
+// Task Kind Registry fetch
+// ---------------------------------------------------------------------------
+
+/**
+ * Fetch the task kind registry from the authenticated API endpoint.
+ *
+ * The endpoint returns `{ version, generatedAt, descriptors: [...] }`.
+ * Each descriptor maps directly to the `TaskKindDescriptor` interface
+ * used by the React SDK's task palette, inspector, and YAML validation.
+ */
+async function fetchTaskKindRegistry(
+  apiUrl: string,
+  token: string | null,
+  customFetch?: typeof globalThis.fetch,
+): Promise<TaskKindDescriptor[]> {
+  const doFetch = customFetch ?? globalThis.fetch;
+  const headers: Record<string, string> = {};
+  if (token) {
+    headers["Authorization"] = `Bearer ${token}`;
+  }
+  const res = await doFetch(`${apiUrl}/v1/proxy/task-kind-registry`, { headers });
+  if (!res.ok) throw new Error(`Task kind registry fetch failed: ${res.status}`);
+  const data: unknown = await res.json();
+  return parseTaskKindRegistryJson(data);
+}
+
+const VALID_CATEGORIES = new Set([
+  "control_flow", "invocation", "ai", "data", "governance", "event", "unspecified",
+]);
+
+const VALID_FIELD_TYPES = new Set([
+  "string", "int32", "float", "bool", "enum", "struct", "repeated", "map", "message",
+]);
+
+function parseTaskKindRegistryJson(data: unknown): TaskKindDescriptor[] {
+  if (!data || typeof data !== "object") return [];
+  const descriptors = (data as Record<string, unknown>).descriptors;
+  if (!Array.isArray(descriptors)) return [];
+
+  return descriptors
+    .filter((d): d is Record<string, unknown> =>
+      d != null && typeof d === "object" && typeof (d as Record<string, unknown>).kind === "string",
+    )
+    .map((d) => ({
+      kind: d.kind as string,
+      displayName: (d.displayName as string) ?? "",
+      description: (d.description as string) ?? "",
+      category: VALID_CATEGORIES.has(d.category as string)
+        ? (d.category as TaskKindDescriptor["category"])
+        : "unspecified",
+      icon: (d.icon as string) ?? "",
+      configProtoType: (d.configProtoType as string) ?? "",
+      fields: Array.isArray(d.fields)
+        ? (d.fields as Record<string, unknown>[]).map((f) => ({
+            name: (f.name as string) ?? "",
+            displayName: (f.displayName as string) ?? "",
+            description: (f.description as string) ?? "",
+            type: VALID_FIELD_TYPES.has(f.type as string)
+              ? (f.type as TaskKindDescriptor["fields"][number]["type"])
+              : ("string" as const),
+            required: f.required === true,
+            isExpression: f.isExpression === true ? true : undefined,
+            defaultValue: typeof f.defaultValue === "string" ? f.defaultValue : undefined,
+            enumValues: Array.isArray(f.enumValues) ? (f.enumValues as string[]) : undefined,
+            groupId: typeof f.groupId === "string" ? f.groupId : undefined,
+            fieldNumber: typeof f.fieldNumber === "number" ? f.fieldNumber : 0,
+            elementType: typeof f.elementType === "string" ? f.elementType : undefined,
+            validationHints: Array.isArray(f.validationHints) ? (f.validationHints as string[]) : undefined,
+          }))
+        : [],
+      fieldGroups: Array.isArray(d.fieldGroups)
+        ? (d.fieldGroups as Record<string, unknown>[]).map((g) => ({
+            id: (g.id as string) ?? "",
+            displayName: (g.displayName as string) ?? "",
+            description: typeof g.description === "string" ? g.description : undefined,
+          }))
+        : [],
+      configJsonSchema:
+        d.configJsonSchema != null && typeof d.configJsonSchema === "object"
+          ? (d.configJsonSchema as Record<string, unknown>)
+          : {},
+      outputJsonSchema:
+        d.outputJsonSchema != null && typeof d.outputJsonSchema === "object"
+          ? (d.outputJsonSchema as Record<string, unknown>)
+          : undefined,
+      yamlExamples: Array.isArray(d.yamlExamples) ? (d.yamlExamples as string[]) : undefined,
+      documentationUrl: (d.documentationUrl as string) ?? "",
+      isAiNative: d.isAiNative === true,
+      requiresExternalService: d.requiresExternalService === true,
+    }));
+}
+
+/**
+ * Fetches the task kind registry from the authenticated API and caches
+ * the result for the lifetime of the provider.
+ *
+ * Follows the same pattern as {@link useModelRegistryFetch}: auth token
+ * polling, exponential backoff retries, and `refetch` for manual retry.
+ */
+function useTaskKindRegistryFetch(client: Stigmer): TaskKindRegistryState {
+  const [version, setVersion] = useState(0);
+  const [state, setState] = useState<Omit<TaskKindRegistryState, "refetch">>({
+    descriptors: [],
+    isLoading: true,
+    error: null,
+  });
+
+  const clientRef = useRef(client);
+  clientRef.current = client;
+
+  const fetchAttemptRef = useRef(0);
+
+  const doFetch = useCallback(async (signal: AbortSignal) => {
+    const c = clientRef.current;
+    let token = await c.getAuthCredential();
+
+    if (!token) {
+      const start = Date.now();
+      while (!token && Date.now() - start < TOKEN_POLL_MAX_MS) {
+        if (signal.aborted) return;
+        await new Promise((r) => setTimeout(r, TOKEN_POLL_INTERVAL_MS));
+        if (signal.aborted) return;
+        token = await c.getAuthCredential();
+      }
+    }
+
+    return fetchTaskKindRegistry(c.baseUrl, token, c.fetch);
+  }, []);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    const { signal } = controller;
+
+    fetchAttemptRef.current = 0;
+
+    const attempt = async () => {
+      if (signal.aborted) return;
+
+      setState((prev) => (prev.isLoading ? prev : { ...prev, isLoading: true }));
+
+      try {
+        const descriptors = await doFetch(signal);
+        if (!signal.aborted && descriptors) {
+          setState({ descriptors, isLoading: false, error: null });
+          fetchAttemptRef.current = 0;
+        }
+      } catch (err: unknown) {
+        if (signal.aborted) return;
+
+        const retryIdx = fetchAttemptRef.current;
+        fetchAttemptRef.current = retryIdx + 1;
+
+        if (retryIdx < RETRY_DELAYS_MS.length) {
+          setTimeout(() => { if (!signal.aborted) attempt(); }, RETRY_DELAYS_MS[retryIdx]);
+        } else {
+          setState({
+            descriptors: [],
+            isLoading: false,
+            error: err instanceof Error ? err : new Error(String(err)),
+          });
+        }
+      }
+    };
+
+    attempt();
+
+    return () => { controller.abort(); };
+  }, [doFetch, version]);
 
-    return () => { cancelled = true; };
+  const refetch = useCallback(() => {
+    setState((prev) => {
+      if (prev.isLoading) return prev;
+      return { ...prev, isLoading: true, error: null };
+    });
+    setVersion((v) => v + 1);
   }, []);
 
-  return state;
+  return { ...state, refetch };
 }
 
 /**

package/src/resource-detail/ResourceDetailShell.tsx

@@ -42,6 +42,8 @@ import type { ResourceDetailShellProps } from "./types";
 export function ResourceDetailShell({
   header,
   visibilityControl,
+  headerMetaExtra,
+  headerBanner,
   primaryAction,
   actions,
   tabs,
@@ -55,11 +57,14 @@ export function ResourceDetailShell({
 
   return (
     <div className={cn("flex flex-col gap-6", className)}>
+      {headerBanner}
+
       {/* Header + Action bar row */}
       <div className="flex items-start justify-between gap-4">
         <Header
           header={header}
           visibilityControl={visibilityControl}
+          metaExtra={headerMetaExtra}
         />
         <ResourceActionBar
           primaryAction={primaryAction}
@@ -92,14 +97,18 @@ export function ResourceDetailShell({
 function Header({
   header,
   visibilityControl,
+  metaExtra,
 }: {
   readonly header: ResourceDetailShellProps["header"];
   readonly visibilityControl?: ResourceDetailShellProps["visibilityControl"];
+  readonly metaExtra?: ResourceDetailShellProps["headerMetaExtra"];
 }) {
   const {
     name,
+    nameElement,
     org,
     slug,
+    qualifiedSlug,
     description,
     iconUrl,
     icon,
@@ -109,7 +118,7 @@ function Header({
     statusLabel,
   } = header;
 
-  const showSlug = slug && slug !== name;
+  const showSlug = slug && slug !== name && !qualifiedSlug;
 
   return (
     <div className="flex min-w-0 items-start gap-3">
@@ -124,9 +133,11 @@ function Header({
       ) : null}
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-2">
-          <h2 className="truncate text-lg font-semibold text-foreground">
-            {name}
-          </h2>
+          {nameElement ?? (
+            <h2 className="truncate text-lg font-semibold text-foreground">
+              {name}
+            </h2>
+          )}
           {showSlug && (
             <code className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
               {slug}
@@ -140,8 +151,14 @@ function Header({
           )}
           {visibilityControl}
         </div>
+        {qualifiedSlug && (
+          <span className="mt-0.5 block truncate font-mono text-xs text-muted-foreground">
+            {qualifiedSlug}
+          </span>
+        )}
         <div className="mt-0.5 flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground">
           {org && <span>{org}</span>}
+          {metaExtra}
           {createdAt && (
             <>
               <Dot />

package/src/resource-detail/types.ts

@@ -84,12 +84,23 @@ export interface DetailAction {
 export interface ResourceHeaderMeta {
   /** Display name of the resource. */
   readonly name: string;
+  /**
+   * Custom element for the name area. When provided, replaces the
+   * default `<h2>` rendering — useful for inline-editable names.
+   */
+  readonly nameElement?: ReactNode;
   /** Resource ID (opaque string). */
   readonly id: string;
   /** Organization slug that owns the resource. */
   readonly org?: string;
   /** URL-friendly slug. */
   readonly slug?: string;
+  /**
+   * Qualified path shown as a monospace line below the title
+   * (e.g., `"acme/my-server"`). When provided, renders beneath the
+   * title row — unlike `slug` which appears as a chip beside the name.
+   */
+  readonly qualifiedSlug?: string;
   /** Resource description. */
   readonly description?: string;
   /** Optional icon URL (e.g. agent icon). */
@@ -145,6 +156,20 @@ export interface ResourceDetailShellProps {
    */
   readonly visibilityControl?: ReactNode;
 
+  /**
+   * Additional content rendered in the header's metadata line
+   * (between org and timestamps). Use for resource-specific
+   * indicators like validation state or discovery timestamps.
+   */
+  readonly headerMetaExtra?: ReactNode;
+
+  /**
+   * Banner content rendered above the header row.
+   * Use for validation warnings or other full-width alerts
+   * that should appear before the resource title.
+   */
+  readonly headerBanner?: ReactNode;
+
   /**
    * Primary action rendered as a visible button in the header area.
    * Use for the most common action (e.g. "Edit" for agents).

package/src/resource-detail/useDeleteResource.ts

@@ -6,7 +6,7 @@ import { toError } from "../internal/toError";
 import { toast } from "../feedback/toast";
 
 /** Resource types that support deletion from detail pages. */
-export type DeletableResourceKind = "agent" | "skill" | "mcpServer" | "runner";
+export type DeletableResourceKind = "agent" | "skill" | "mcpServer" | "runner" | "workflow";
 
 export interface UseDeleteResourceReturn {
   /**
@@ -74,6 +74,9 @@ export function useDeleteResource(
         case "runner":
           await stigmer.runner.delete(resourceId);
           break;
+        case "workflow":
+          await stigmer.workflow.delete(resourceId);
+          break;
       }
       toast.success(
         resourceName
@@ -106,5 +109,7 @@ function kindLabel(kind: DeletableResourceKind): string {
       return "MCP server";
     case "runner":
       return "runner";
+    case "workflow":
+      return "workflow";
   }
 }

package/src/resource-workbench/components/ResourceWorkbench.tsx

@@ -26,6 +26,7 @@ import { BulkActionBar } from "./BulkActionBar";
 import { ResourceInspector } from "./ResourceInspector";
 import { EmptyState } from "../../empty-state";
 import { ResourceAvatar } from "./ResourceAvatar";
+import { ScopeToggle } from "../../library/ScopeToggle";
 
 // ---------------------------------------------------------------------------
 // Props
@@ -306,6 +307,9 @@ export function ResourceWorkbench<TData = SearchResult>({
             )}
           />
         </div>
+        {onScopeChange && (
+          <ScopeToggle value={controlledScope} onChange={onScopeChange} />
+        )}
         {viewModes.length > 1 && (
           <ViewSwitcher
             value={viewMode}