@stigmer/react 0.0.42 → 0.0.44

package/src/mcp-server/McpServerDetailView.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type { McpServer } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/api_pb";
@@ -8,11 +8,19 @@ import type {
   DiscoveredTool,
   DiscoveredResourceTemplate,
 } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/status_pb";
+import type { ToolApprovalPolicy } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/spec_pb";
 import { ValidationState } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/status_pb";
 import type { EnvironmentValue } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/spec_pb";
 import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
 import { useMcpServer } from "./useMcpServer";
+import { useDiscoverCapabilities } from "./useDiscoverCapabilities";
+import { useMcpServerCredentials } from "./useMcpServerCredentials";
+import { useTriggerApprovalPolicySession } from "./useTriggerApprovalPolicySession";
+import { ApprovalPolicyGeneratorPanel } from "./ApprovalPolicyGeneratorPanel";
+import { serializeMcpServerYaml } from "../library/serialize-resource-yaml";
 import { ErrorMessage } from "../error/ErrorMessage";
+import { EnvVarForm } from "../environment/EnvVarForm";
+import type { EnvVarFormVariable } from "../environment/EnvVarForm";
 import { VisibilityToggle } from "../library/VisibilityToggle";
 
 export interface McpServerDetailViewProps {
@@ -73,6 +81,14 @@ export function McpServerDetailView({
   className,
 }: McpServerDetailViewProps) {
   const { mcpServer, isLoading, error, refetch } = useMcpServer(org, slug);
+  const credentials = useMcpServerCredentials(org, mcpServer ?? null);
+  const discovery = useDiscoverCapabilities();
+  const policySession = useTriggerApprovalPolicySession();
+
+  const [showCredentialForm, setShowCredentialForm] = useState(false);
+  const [policyPanelExecutionId, setPolicyPanelExecutionId] = useState<
+    string | null
+  >(null);
 
   const onResourceLoadRef = useRef(onResourceLoad);
   onResourceLoadRef.current = onResourceLoad;
@@ -83,6 +99,66 @@ export function McpServerDetailView({
     }
   }, [mcpServer]);
 
+  const handleDiscoverClick = useCallback(async () => {
+    if (!mcpServer?.metadata?.id) return;
+
+    if (!credentials.isReady) {
+      setShowCredentialForm(true);
+      return;
+    }
+
+    try {
+      await discovery.discover(mcpServer.metadata.id);
+      refetch();
+    } catch {
+      // error state is managed by the hook
+    }
+  }, [mcpServer, credentials.isReady, discovery, refetch]);
+
+  const handleCredentialSubmit = useCallback(
+    async (
+      values: Record<string, import("@stigmer/sdk").EnvVarInput>,
+      options: { saveForFuture: boolean },
+    ) => {
+      try {
+        if (options.saveForFuture) {
+          await credentials.saveCredentials(values);
+          credentials.refetch();
+        }
+
+        setShowCredentialForm(false);
+
+        if (mcpServer?.metadata?.id) {
+          if (options.saveForFuture) {
+            await discovery.discover(mcpServer.metadata.id);
+          } else {
+            await discovery.discover(mcpServer.metadata.id, values);
+          }
+          refetch();
+        }
+      } catch {
+        // error state is managed by the hooks
+      }
+    },
+    [credentials, mcpServer, discovery, refetch],
+  );
+
+  const handleGenerateApprovalPolicies = useCallback(async () => {
+    if (!mcpServer) return;
+
+    try {
+      const yaml = serializeMcpServerYaml(mcpServer);
+      const result = await policySession.trigger(yaml, org, slug);
+      setPolicyPanelExecutionId(result.executionId);
+    } catch {
+      // error state is managed by the hook
+    }
+  }, [mcpServer, org, slug, policySession]);
+
+  const handlePolicyPanelComplete = useCallback(() => {
+    refetch();
+  }, [refetch]);
+
   if (isLoading) return <LoadingSkeleton className={className} />;
   if (error)
     return <ErrorMessage error={error} retry={refetch} className={className} />;
@@ -92,6 +168,9 @@ export function McpServerDetailView({
   const status = mcpServer.status;
   const specAudit = status?.audit?.specAudit;
   const capabilities = status?.discoveredCapabilities;
+  const toolApprovals = spec?.defaultToolApprovals ?? [];
+  const hasDiscoveredTools =
+    capabilities != null && capabilities.tools.length > 0;
 
   return (
     <div className={cn("flex flex-col gap-6", className)}>
@@ -117,11 +196,26 @@ export function McpServerDetailView({
         isVisibilityPending={isVisibilityPending}
       />
 
+      {/* Discovery action */}
+      <DiscoverySection
+        isDiscovering={discovery.isDiscovering}
+        discoveryError={discovery.error}
+        onDiscover={handleDiscoverClick}
+        onClearDiscoveryError={discovery.clearError}
+        hasDiscoveredTools={hasDiscoveredTools}
+        showCredentialForm={showCredentialForm}
+        credentialVariables={credentials.missingVariables}
+        isSavingCredentials={credentials.isSaving}
+        onCredentialSubmit={handleCredentialSubmit}
+        onCredentialCancel={() => setShowCredentialForm(false)}
+        credentialsLoading={credentials.isLoading}
+      />
+
       {spec?.serverType.case && (
         <ServerConfigSection serverType={spec.serverType} />
       )}
 
-      {capabilities && capabilities.tools.length > 0 && (
+      {hasDiscoveredTools && (
         <ToolsSection tools={capabilities.tools} />
       )}
 
@@ -131,6 +225,31 @@ export function McpServerDetailView({
         />
       )}
 
+      {/* Approval Policies */}
+      {toolApprovals.length > 0 && (
+        <ApprovalPoliciesSection policies={toolApprovals} />
+      )}
+
+      {/* Generate Approval Policies */}
+      {hasDiscoveredTools && (
+        <GenerateApprovalPoliciesSection
+          hasPolicies={toolApprovals.length > 0}
+          isTriggering={policySession.isTriggering}
+          triggerError={policySession.error}
+          onGenerate={handleGenerateApprovalPolicies}
+          onClearError={policySession.clearError}
+        />
+      )}
+
+      {/* Inline approval policy generation panel */}
+      {policyPanelExecutionId && (
+        <ApprovalPolicyGeneratorPanel
+          executionId={policyPanelExecutionId}
+          onClose={() => setPolicyPanelExecutionId(null)}
+          onComplete={handlePolicyPanelComplete}
+        />
+      )}
+
       {spec?.envSpec && Object.keys(spec.envSpec.data).length > 0 && (
         <EnvSpecSection data={spec.envSpec.data} />
       )}
@@ -450,6 +569,223 @@ function TagsSection({ tags }: { readonly tags: readonly string[] }) {
   );
 }
 
+// ---------------------------------------------------------------------------
+// Discovery section
+// ---------------------------------------------------------------------------
+
+function DiscoverySection({
+  isDiscovering,
+  discoveryError,
+  onDiscover,
+  onClearDiscoveryError,
+  hasDiscoveredTools,
+  showCredentialForm,
+  credentialVariables,
+  isSavingCredentials,
+  onCredentialSubmit,
+  onCredentialCancel,
+  credentialsLoading,
+}: {
+  readonly isDiscovering: boolean;
+  readonly discoveryError: Error | null;
+  readonly onDiscover: () => void;
+  readonly onClearDiscoveryError: () => void;
+  readonly hasDiscoveredTools: boolean;
+  readonly showCredentialForm: boolean;
+  readonly credentialVariables: EnvVarFormVariable[];
+  readonly isSavingCredentials: boolean;
+  readonly onCredentialSubmit: (
+    values: Record<string, import("@stigmer/sdk").EnvVarInput>,
+    options: { saveForFuture: boolean },
+  ) => void;
+  readonly onCredentialCancel: () => void;
+  readonly credentialsLoading: boolean;
+}) {
+  return (
+    <section className="flex flex-col gap-3">
+      <div className="flex items-center justify-between">
+        <h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          Discovery
+        </h3>
+        <button
+          type="button"
+          onClick={onDiscover}
+          disabled={isDiscovering || credentialsLoading}
+          className={cn(
+            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
+            "border border-border bg-background text-foreground",
+            "hover:bg-accent hover:text-accent-foreground",
+            "disabled:pointer-events-none disabled:opacity-50",
+          )}
+        >
+          {isDiscovering ? (
+            <>
+              <DiscoverSpinner />
+              Discovering...
+            </>
+          ) : hasDiscoveredTools ? (
+            <>
+              <RefreshIcon className="size-3.5" />
+              Re-discover
+            </>
+          ) : (
+            <>
+              <DiscoverIcon className="size-3.5" />
+              Discover Tools
+            </>
+          )}
+        </button>
+      </div>
+
+      {discoveryError && (
+        <div className="flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2">
+          <WarningIcon className="mt-0.5 size-3.5 shrink-0 text-destructive" />
+          <p className="flex-1 text-xs text-destructive">
+            {discoveryError.message}
+          </p>
+          <button
+            type="button"
+            onClick={onClearDiscoveryError}
+            className="shrink-0 text-xs text-destructive/70 hover:text-destructive"
+            aria-label="Dismiss error"
+          >
+            Dismiss
+          </button>
+        </div>
+      )}
+
+      {showCredentialForm && credentialVariables.length > 0 && (
+        <div className="rounded-lg border border-border p-4">
+          <EnvVarForm
+            title="Credentials Required"
+            description="Enter the credentials needed to connect to this MCP server. Toggle &quot;Save for future runs&quot; to persist them in your personal environment, or leave it off to use them for this discovery only."
+            variables={credentialVariables}
+            onSubmit={(values, options) => onCredentialSubmit(values, options)}
+            onCancel={onCredentialCancel}
+            isSubmitting={isSavingCredentials}
+            className="w-full max-w-md"
+          />
+        </div>
+      )}
+
+      {!hasDiscoveredTools && !isDiscovering && (
+        <p className="text-xs text-muted-foreground">
+          No tools discovered yet. Click &quot;Discover Tools&quot; to
+          connect to this MCP server and list its available tools and
+          resources.
+        </p>
+      )}
+    </section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Approval policies section
+// ---------------------------------------------------------------------------
+
+function ApprovalPoliciesSection({
+  policies,
+}: {
+  readonly policies: readonly ToolApprovalPolicy[];
+}) {
+  return (
+    <Section title={`Approval Policies (${policies.length})`}>
+      <div className="flex flex-col divide-y divide-border">
+        {policies.map((policy) => (
+          <div key={policy.toolName} className="px-3 py-2.5">
+            <div className="flex items-baseline gap-2">
+              <code className="font-mono text-sm font-medium text-foreground">
+                {policy.toolName}
+              </code>
+              <ShieldIcon className="size-3 text-amber-500 dark:text-amber-400" />
+            </div>
+            {policy.message && (
+              <p className="mt-0.5 text-xs text-muted-foreground">
+                {policy.message}
+              </p>
+            )}
+          </div>
+        ))}
+      </div>
+    </Section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Generate approval policies section
+// ---------------------------------------------------------------------------
+
+function GenerateApprovalPoliciesSection({
+  hasPolicies,
+  isTriggering,
+  triggerError,
+  onGenerate,
+  onClearError,
+}: {
+  readonly hasPolicies: boolean;
+  readonly isTriggering: boolean;
+  readonly triggerError: Error | null;
+  readonly onGenerate: () => void;
+  readonly onClearError: () => void;
+}) {
+  return (
+    <section className="flex flex-col gap-2">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+            AI-Generated Policies
+          </h3>
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            {hasPolicies
+              ? "Regenerate approval policies using AI to classify each tool's risk level."
+              : "Automatically generate approval policies for the discovered tools using AI."}
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={onGenerate}
+          disabled={isTriggering}
+          className={cn(
+            "inline-flex shrink-0 items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
+            "bg-primary text-primary-foreground",
+            "hover:bg-primary/90",
+            "disabled:pointer-events-none disabled:opacity-50",
+          )}
+        >
+          {isTriggering ? (
+            <>
+              <DiscoverSpinner />
+              Starting...
+            </>
+          ) : (
+            <>
+              <SparklesIcon className="size-3.5" />
+              {hasPolicies ? "Regenerate Policies" : "Generate Policies"}
+            </>
+          )}
+        </button>
+      </div>
+
+      {triggerError && (
+        <div className="flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2">
+          <WarningIcon className="mt-0.5 size-3.5 shrink-0 text-destructive" />
+          <p className="flex-1 text-xs text-destructive">
+            {triggerError.message}
+          </p>
+          <button
+            type="button"
+            onClick={onClearError}
+            className="shrink-0 text-xs text-destructive/70 hover:text-destructive"
+            aria-label="Dismiss error"
+          >
+            Dismiss
+          </button>
+        </div>
+      )}
+    </section>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Shared layout primitives
 // ---------------------------------------------------------------------------
@@ -604,3 +940,93 @@ function WarningIcon({ className }: { readonly className?: string }) {
     </svg>
   );
 }
+
+function DiscoverIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="7" cy="7" r="4.5" />
+      <path d="m10.5 10.5 3 3" />
+    </svg>
+  );
+}
+
+function RefreshIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M2.5 8a5.5 5.5 0 0 1 9.36-3.92" />
+      <path d="M13.5 8a5.5 5.5 0 0 1-9.36 3.92" />
+      <path d="M12 2v3h-3" />
+      <path d="M4 14v-3h3" />
+    </svg>
+  );
+}
+
+function ShieldIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M8 1.5 2.5 4v4c0 3.31 2.35 6.4 5.5 7 3.15-.6 5.5-3.69 5.5-7V4L8 1.5Z" />
+    </svg>
+  );
+}
+
+function SparklesIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M8 1v2M8 13v2M1 8h2M13 8h2M3.05 3.05l1.41 1.41M11.54 11.54l1.41 1.41M3.05 12.95l1.41-1.41M11.54 4.46l1.41-1.41" />
+    </svg>
+  );
+}
+
+function DiscoverSpinner() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      className="animate-spin"
+      aria-hidden="true"
+    >
+      <path d="M8 2a6 6 0 1 0 6 6" />
+    </svg>
+  );
+}

package/src/mcp-server/index.ts

@@ -45,3 +45,18 @@ export type {
 
 export { McpServerDetailView } from "./McpServerDetailView";
 export type { McpServerDetailViewProps } from "./McpServerDetailView";
+
+export { useDiscoverCapabilities } from "./useDiscoverCapabilities";
+export type { UseDiscoverCapabilitiesReturn } from "./useDiscoverCapabilities";
+
+export { useMcpServerCredentials } from "./useMcpServerCredentials";
+export type { UseMcpServerCredentialsReturn } from "./useMcpServerCredentials";
+
+export { useTriggerApprovalPolicySession } from "./useTriggerApprovalPolicySession";
+export type {
+  UseTriggerApprovalPolicySessionReturn,
+  TriggerApprovalPolicyResult,
+} from "./useTriggerApprovalPolicySession";
+
+export { ApprovalPolicyGeneratorPanel } from "./ApprovalPolicyGeneratorPanel";
+export type { ApprovalPolicyGeneratorPanelProps } from "./ApprovalPolicyGeneratorPanel";

package/src/mcp-server/useDiscoverCapabilities.ts

@@ -0,0 +1,117 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { create } from "@bufbuild/protobuf";
+import type { McpServer } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/api_pb";
+import { DiscoverCapabilitiesInputSchema } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/io_pb";
+import type { EnvVarInput } from "@stigmer/sdk";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+
+export interface UseDiscoverCapabilitiesReturn {
+  /**
+   * Trigger server-side MCP discovery for the given MCP server.
+   *
+   * When `runtimeEnv` is provided, the values are passed directly to
+   * the backend as one-time credentials (not persisted to any
+   * environment). When omitted, the backend resolves credentials from
+   * the user's personal environment.
+   *
+   * Blocks until discovery completes (~30s timeout).
+   *
+   * @param mcpServerId - System-generated ID of the MCP server (metadata.id).
+   * @param runtimeEnv - Optional one-time environment variables for discovery.
+   * @returns The updated McpServer with populated discovered_capabilities.
+   */
+  readonly discover: (
+    mcpServerId: string,
+    runtimeEnv?: Record<string, EnvVarInput>,
+  ) => Promise<McpServer>;
+  /** `true` while a discovery RPC is in flight. */
+  readonly isDiscovering: boolean;
+  /** Error from the most recent failed discovery, or `null`. */
+  readonly error: Error | null;
+  /** Clear the error state. */
+  readonly clearError: () => void;
+}
+
+/**
+ * Action hook for triggering server-side MCP server capability discovery.
+ *
+ * Calls the `discoverCapabilities` RPC which delegates to the agent-runner
+ * via a Temporal workflow. The RPC blocks until discovery completes
+ * (typically 5-15 seconds, ~30s timeout).
+ *
+ * Supports two modes:
+ * - **Save for future** (default): Credentials are saved to the personal
+ *   environment first, then `discover(id)` is called without `runtimeEnv`.
+ * - **One-time use**: `discover(id, runtimeEnv)` passes credentials
+ *   directly to the backend. They are used for this discovery only and
+ *   not persisted to any environment.
+ *
+ * @example
+ * ```tsx
+ * const { discover, isDiscovering, error } = useDiscoverCapabilities();
+ * const { refetch } = useMcpServer(org, slug);
+ *
+ * // Save for future: credentials already in personal environment
+ * async function handleDiscoverSaved() {
+ *   await discover(mcpServer.metadata.id);
+ *   refetch();
+ * }
+ *
+ * // One-time use: pass credentials directly
+ * async function handleDiscoverTemporary(values: Record<string, EnvVarInput>) {
+ *   await discover(mcpServer.metadata.id, values);
+ *   refetch();
+ * }
+ * ```
+ */
+export function useDiscoverCapabilities(): UseDiscoverCapabilitiesReturn {
+  const stigmer = useStigmer();
+  const [isDiscovering, setIsDiscovering] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const clearError = useCallback(() => setError(null), []);
+
+  const discover = useCallback(
+    async (
+      mcpServerId: string,
+      runtimeEnv?: Record<string, EnvVarInput>,
+    ): Promise<McpServer> => {
+      setIsDiscovering(true);
+      setError(null);
+
+      try {
+        const runtimeEnvMap: Record<string, { value: string; isSecret: boolean }> = {};
+        if (runtimeEnv) {
+          for (const [key, input] of Object.entries(runtimeEnv)) {
+            runtimeEnvMap[key] = {
+              value: input.value,
+              isSecret: input.isSecret ?? false,
+            };
+          }
+        }
+
+        const input = create(DiscoverCapabilitiesInputSchema, {
+          mcpServerId,
+          ...(Object.keys(runtimeEnvMap).length > 0 && {
+            runtimeEnv: runtimeEnvMap,
+          }),
+        });
+
+        const result = await stigmer.mcpServer.discoverCapabilities(input);
+        return result;
+      } catch (err) {
+        const wrapped = toError(err);
+        setError(wrapped);
+        throw wrapped;
+      } finally {
+        setIsDiscovering(false);
+      }
+    },
+    [stigmer],
+  );
+
+  return { discover, isDiscovering, error, clearError };
+}