@stigmer/react 0.0.46 → 0.0.48

package/src/composer/SessionComposer.tsx

@@ -568,7 +568,11 @@ export function SessionComposer({
       setConfigOpen(open);
       if (!open) {
         configMcpInitialServerKeyRef.current = undefined;
-        if (configActivePanel === "agent") {
+        if (
+          configActivePanel === "agent" &&
+          agentSetup.state.status !== "needsEnvVars" &&
+          agentSetup.state.status !== "submitting"
+        ) {
           agentSetup.reset();
         }
       }
@@ -578,7 +582,12 @@ export function SessionComposer({
 
   const handleConfigActivePanelChange = useCallback(
     (panel: string | null) => {
-      if (configActivePanel === "agent" && panel !== "agent") {
+      if (
+        configActivePanel === "agent" &&
+        panel !== "agent" &&
+        agentSetup.state.status !== "needsEnvVars" &&
+        agentSetup.state.status !== "submitting"
+      ) {
         agentSetup.reset();
       }
       setConfigActivePanel(panel);
@@ -651,6 +660,12 @@ export function SessionComposer({
     onAgentResolutionChange?.(null);
   }, [onAgentRefChange, onAgentResolutionChange]);
 
+  const handlePendingAgentChipRemove = useCallback(() => {
+    agentSetup.reset();
+    onAgentRefChange?.(null);
+    onAgentResolutionChange?.(null);
+  }, [agentSetup, onAgentRefChange, onAgentResolutionChange]);
+
   // ---------------------------------------------------------------------------
   // Initial agent: auto-resolve on mount when initialAgentRef is provided
   // ---------------------------------------------------------------------------
@@ -661,12 +676,40 @@ export function SessionComposer({
   const initialAgentHandled = useRef(false);
 
   useEffect(() => {
-    if (initialAgentRef && showAgent && org && !initialAgentHandled.current) {
-      initialAgentHandled.current = true;
-      handleAgentSelectRef.current(initialAgentRef);
+    if (!initialAgentRef || !showAgent || !org || initialAgentHandled.current) {
+      return;
     }
+
+    let cancelled = false;
+    initialAgentHandled.current = true;
+
+    handleAgentSelectRef.current(initialAgentRef).catch(() => {
+      if (!cancelled) {
+        initialAgentHandled.current = false;
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
   }, [initialAgentRef, showAgent, org]);
 
+  // ---------------------------------------------------------------------------
+  // Initial agent: auto-open Configure > Agent when env vars are needed
+  // ---------------------------------------------------------------------------
+
+  const initialAgentConfigAutoOpened = useRef(false);
+
+  useEffect(() => {
+    if (initialAgentConfigAutoOpened.current) return;
+    if (!initialAgentRef) return;
+    if (agentSetup.state.status !== "needsEnvVars") return;
+
+    initialAgentConfigAutoOpened.current = true;
+    setConfigOpen(true);
+    setConfigActivePanel("agent");
+  }, [initialAgentRef, agentSetup.state.status]);
+
   // ---------------------------------------------------------------------------
   // Initial attachments: upload files on mount when provided
   // ---------------------------------------------------------------------------
@@ -727,6 +770,38 @@ export function SessionComposer({
         type: "agent",
         onRemove: handleAgentChipRemove,
       });
+    } else if (
+      agentSetup.state.status === "needsEnvVars" ||
+      agentSetup.state.status === "resolving" ||
+      agentSetup.state.status === "submitting"
+    ) {
+      const st = agentSetup.state;
+      const ref = st.agentRef;
+      const refStr = `${ref.org}/${ref.slug}`;
+      const name =
+        st.status !== "resolving"
+          ? st.agentName
+          : (displayNames.get(refStr) ?? ref.slug);
+
+      items.push({
+        key: `agent:${refStr}`,
+        label: name,
+        type: "agent",
+        onRemove: handlePendingAgentChipRemove,
+        status:
+          st.status === "resolving"
+            ? "loading"
+            : st.status === "submitting"
+              ? "submitting"
+              : "needsSetup",
+        onClick:
+          st.status === "needsEnvVars"
+            ? () => {
+                setConfigOpen(true);
+                setConfigActivePanel("agent");
+              }
+            : undefined,
+      });
     }
 
     if (workspace) {
@@ -808,7 +883,9 @@ export function SessionComposer({
     return items;
   }, [
     agentRef,
+    agentSetup.state,
     handleAgentChipRemove,
+    handlePendingAgentChipRemove,
     workspace,
     showMcp,
     mcpSetup.entries,
@@ -858,11 +935,17 @@ export function SessionComposer({
   const configureItems = useMemo((): ConfigureMenuItem[] => {
     const items: ConfigureMenuItem[] = [];
     if (showAgent) {
+      const agentPending =
+        !agentRef &&
+        (agentSetup.state.status === "needsEnvVars" ||
+          agentSetup.state.status === "resolving" ||
+          agentSetup.state.status === "submitting");
       items.push({
         id: "agent",
         icon: <AgentIcon />,
         label: "Agent",
-        count: agentRef ? 1 : 0,
+        count: agentRef || agentPending ? 1 : 0,
+        hasWarning: agentPending && agentSetup.state.status === "needsEnvVars",
       });
     }
     if (showMcp) {
@@ -891,7 +974,7 @@ export function SessionComposer({
       });
     }
     return items;
-  }, [showAgent, agentRef, showMcp, mcpCount, mcpSetup.needsSetupCount, showSkills, skillCount, showSessionVars, sessionVarCount]);
+  }, [showAgent, agentRef, agentSetup.state, showMcp, mcpCount, mcpSetup.needsSetupCount, showSkills, skillCount, showSessionVars, sessionVarCount]);
 
   const renderConfigPanel = useCallback(
     (panelId: string): React.ReactNode => {
@@ -924,6 +1007,7 @@ export function SessionComposer({
             <div className="relative">
               <AgentPicker
                 org={org!}
+                scope="all"
                 value={agentRef ?? null}
                 onChange={handleAgentSelect}
                 onDisplayNameResolved={handleDisplayNameResolved}
@@ -944,6 +1028,7 @@ export function SessionComposer({
           return (
             <McpServerPicker
               org={org!}
+              scope="all"
               setup={{
                 entries: mcpSetup.entries,
                 onServerAdded: (ref) => mcpSetup.addServer(ref),
@@ -966,6 +1051,7 @@ export function SessionComposer({
           return (
             <SkillPicker
               org={org!}
+              scope="all"
               value={skillRefs ?? []}
               onChange={onSkillRefsChange!}
               onDisplayNameResolved={handleDisplayNameResolved}
@@ -1087,6 +1173,30 @@ export function SessionComposer({
           />
         )}
 
+        {/* Zone 2.7: Agent setup warning */}
+        {showAgent &&
+          agentSetup.state.status === "needsEnvVars" &&
+          !agentRef && (
+            <div
+              role="status"
+              className="mx-3 mb-2 flex items-center gap-2 rounded-md bg-warning/10 px-2.5 py-1.5 text-xs text-warning"
+            >
+              <AlertTriangleIcon />
+              <span>Agent needs configuration before use</span>
+              <button
+                type="button"
+                onClick={() => {
+                  setConfigOpen(true);
+                  setConfigActivePanel("agent");
+                }}
+                disabled={isDisabled}
+                className="ml-auto shrink-0 rounded px-1.5 py-0.5 text-[0.6rem] font-medium hover:bg-warning/20 disabled:pointer-events-none disabled:opacity-50"
+              >
+                Configure
+              </button>
+            </div>
+          )}
+
         {/* Zone 2.75: MCP setup warning */}
         {showMcp && mcpSetup.needsSetupCount > 0 && (
           <div

package/src/mcp-server/McpServerPicker.tsx

@@ -69,8 +69,18 @@ export interface McpServerSetupIntegration {
 // ---------------------------------------------------------------------------
 
 export interface McpServerPickerProps {
-  /** Organization slug to scope the search. */
+  /** Organization slug used as the default search scope. */
   readonly org: string;
+  /**
+   * Controls search scope.
+   *
+   * - `"org"` — search only within the provided organization.
+   * - `"all"` — search all organizations the caller can access,
+   *   including public/platform MCP servers from other orgs.
+   *
+   * @default "org"
+   */
+  readonly scope?: "org" | "all";
   /**
    * Currently selected MCP server usages.
    *
@@ -227,6 +237,7 @@ function slugFromServerKey(key: string): string {
  */
 export function McpServerPicker({
   org,
+  scope,
   value,
   onChange,
   onDisplayNameResolved,
@@ -240,7 +251,7 @@ export function McpServerPicker({
   const listId = `${instanceId}-list`;
 
   const { results, isLoading, error, query, setQuery } =
-    useMcpServerSearch(org);
+    useMcpServerSearch(org, { scope });
 
   const [focusIndex, setFocusIndex] = useState(-1);
   const [view, setView] = useState<PickerView>(() =>

package/src/mcp-server/useTriggerApprovalPolicySession.ts

@@ -3,9 +3,14 @@
 import { useCallback, useState } from "react";
 import { create } from "@bufbuild/protobuf";
 import { UploadAttachmentRequestSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/io_pb";
+import { ListAgentInstancesRequestSchema } from "@stigmer/protos/ai/stigmer/agentic/agentinstance/v1/io_pb";
+import { ListEnvironmentsRequestSchema } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/io_pb";
+import { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
 import { PENDING_SUBJECT } from "@stigmer/sdk";
+import type { Stigmer } from "@stigmer/sdk";
 import { useStigmer } from "../hooks";
 import { toError } from "../internal/toError";
+import { buildPersonalInstanceInput } from "../agent-instance/buildPersonalInstanceInput";
 
 export interface TriggerApprovalPolicyResult {
   readonly sessionId: string;
@@ -36,6 +41,56 @@ export interface UseTriggerApprovalPolicySessionReturn {
 const MCP_SERVER_CREATOR_SLUG = "mcp-server-creator";
 const MCP_SERVER_CREATOR_ORG = "stigmer";
 
+const PERSONAL_LABEL = "stigmer.ai/personal";
+const FOR_AGENT_LABEL = "stigmer.ai/for-agent";
+
+/**
+ * Finds an existing personal agent instance for the given agent, or
+ * creates one linked to the caller's personal environment.
+ *
+ * Re-checks immediately before creation to narrow the race window
+ * when multiple tabs trigger simultaneously (same guard used by
+ * `useAgentSetup.findOrCreatePersonalInstance`).
+ */
+async function findOrCreatePersonalInstance(
+  stigmer: Stigmer,
+  params: {
+    org: string;
+    agentId: string;
+    agentSlug: string;
+    personalEnvSlug: string;
+  },
+) {
+  const agentLabel = `${MCP_SERVER_CREATOR_ORG}/${params.agentSlug}`;
+
+  const existing = await stigmer.agentInstance.list(
+    create(ListAgentInstancesRequestSchema, {
+      org: params.org,
+      labels: {
+        [PERSONAL_LABEL]: "true",
+        [FOR_AGENT_LABEL]: agentLabel,
+      },
+    }),
+  );
+
+  if (existing.items.length > 0) {
+    return existing.items[0];
+  }
+
+  return stigmer.agentInstance.create(
+    buildPersonalInstanceInput({
+      org: params.org,
+      agentId: params.agentId,
+      agentSlug: params.agentSlug,
+      environmentRef: {
+        org: params.org,
+        slug: params.personalEnvSlug,
+        kind: ApiResourceKind.environment,
+      },
+    }),
+  );
+}
+
 /**
  * Orchestration hook that auto-creates a session with the `mcp-server-creator`
  * agent and starts an execution with a pre-filled prompt and YAML attachment.
@@ -45,6 +100,12 @@ const MCP_SERVER_CREATOR_ORG = "stigmer";
  * and generate `default_tool_approvals` entries with appropriate approval
  * messages. The agent applies the result using the `apply_mcp_server` tool.
  *
+ * The session is created with a **personal** agent instance whose
+ * `environment_refs` include the caller's personal environment. This
+ * ensures MCP server credentials (e.g. `STIGMER_API_KEY`) are available
+ * through the standard environment merge chain, consistent with how
+ * `SessionComposer` / `useAgentSetup` provisions sessions.
+ *
  * @example
  * ```tsx
  * const { trigger, isTriggering, result } = useTriggerApprovalPolicySession();
@@ -79,19 +140,53 @@ export function useTriggerApprovalPolicySession(): UseTriggerApprovalPolicySessi
           slug: MCP_SERVER_CREATOR_SLUG,
         });
 
-        const defaultInstanceId = agent.status?.defaultInstanceId;
-        if (!defaultInstanceId) {
+        const agentId = agent.metadata?.id;
+        if (!agentId) {
           throw new Error(
-            `Agent "${MCP_SERVER_CREATOR_ORG}/${MCP_SERVER_CREATOR_SLUG}" does not have a ` +
-              "default instance. Ensure the mcp-server-creator agent is properly set up.",
+            `Agent "${MCP_SERVER_CREATOR_ORG}/${MCP_SERVER_CREATOR_SLUG}" not found. ` +
+              "Ensure the mcp-server-creator agent is properly set up.",
           );
         }
 
+        // Resolve the agent instance to use for the session. Prefer a
+        // personal instance linked to the caller's personal environment
+        // so MCP server credentials flow through environment_refs. Fall
+        // back to the default instance when no personal environment exists.
+        let instanceId: string;
+
+        const envList = await stigmer.environment.list(
+          create(ListEnvironmentsRequestSchema, {
+            org,
+            labels: { [PERSONAL_LABEL]: "true" },
+          }),
+        );
+
+        if (envList.items.length > 0) {
+          const personalEnvSlug = envList.items[0].metadata!.slug;
+          const instance = await findOrCreatePersonalInstance(stigmer, {
+            org,
+            agentId,
+            agentSlug: MCP_SERVER_CREATOR_SLUG,
+            personalEnvSlug,
+          });
+          instanceId = instance.metadata!.id;
+        } else {
+          const defaultInstanceId = agent.status?.defaultInstanceId;
+          if (!defaultInstanceId) {
+            throw new Error(
+              `Agent "${MCP_SERVER_CREATOR_ORG}/${MCP_SERVER_CREATOR_SLUG}" does not have a ` +
+                "default instance and no personal environment exists. " +
+                "Add credentials to your personal environment in Settings first.",
+            );
+          }
+          instanceId = defaultInstanceId;
+        }
+
         const session = await stigmer.session.create({
           name: `approval-policy-${mcpServerSlug}-${Date.now()}`,
           org,
           subject: PENDING_SUBJECT,
-          agentInstanceId: defaultInstanceId,
+          agentInstanceId: instanceId,
         });
 
         const sessionId = session.metadata!.id;

package/src/search/useResourceSearch.ts

@@ -9,6 +9,16 @@ export interface UseResourceSearchOptions {
   readonly pageSize?: number;
   /** Debounce delay for query changes in milliseconds. @default 300 */
   readonly debounceMs?: number;
+  /**
+   * Controls search scope.
+   *
+   * - `"org"` — search only within the provided organization.
+   * - `"all"` — search all organizations the caller can access,
+   *   including public/platform resources from other orgs.
+   *
+   * @default "org"
+   */
+  readonly scope?: "org" | "all";
 }
 
 export interface UseResourceSearchReturn {
@@ -46,6 +56,7 @@ export function useResourceSearch(
 
   const pageSize = options?.pageSize ?? DEFAULT_PAGE_SIZE;
   const debounceMs = options?.debounceMs ?? DEFAULT_DEBOUNCE_MS;
+  const scope = options?.scope ?? "org";
 
   // Debounce query changes
   useEffect(() => {
@@ -61,8 +72,9 @@ export function useResourceSearch(
     setError(null);
 
     const params: ListParams = {
-      org,
+      org: scope === "all" ? "" : org,
       query: debouncedQuery || undefined,
+      excludePublic: false,
       page: { num: 1, size: pageSize },
     };
 
@@ -84,7 +96,7 @@ export function useResourceSearch(
     return () => {
       cancelled.current = true;
     };
-  }, [listFn, org, debouncedQuery, pageSize, fetchKey]);
+  }, [listFn, org, debouncedQuery, pageSize, scope, fetchKey]);
 
   return { results, isLoading, error, query, setQuery, refetch };
 }

package/src/skill/SkillPicker.tsx

@@ -17,8 +17,18 @@ import { useScrollShadows } from "../internal/useScrollShadows";
 import { ScrollFade } from "../internal/ScrollFade";
 
 export interface SkillPickerProps {
-  /** Organization slug to scope the search. */
+  /** Organization slug used as the default search scope. */
   readonly org: string;
+  /**
+   * Controls search scope.
+   *
+   * - `"org"` — search only within the provided organization.
+   * - `"all"` — search all organizations the caller can access,
+   *   including public/platform skills from other orgs.
+   *
+   * @default "org"
+   */
+  readonly scope?: "org" | "all";
   /** Currently selected skill references. */
   readonly value: ResourceRef[];
   /** Called when the selection changes. */
@@ -48,13 +58,14 @@ const LIST_ID = "stgm-skill-list";
  */
 export function SkillPicker({
   org,
+  scope,
   value,
   onChange,
   onDisplayNameResolved,
   disabled,
   className,
 }: SkillPickerProps) {
-  const { results, isLoading, error, query, setQuery } = useSkillSearch(org);
+  const { results, isLoading, error, query, setQuery } = useSkillSearch(org, { scope });
 
   const [focusIndex, setFocusIndex] = useState(-1);
   const searchRef = useRef<HTMLInputElement>(null);