@stigmer/react 0.0.36 → 0.0.40

package/src/library/useDetectStigmerResource.ts

@@ -0,0 +1,45 @@
+"use client";
+
+import { useMemo } from "react";
+import {
+  detectStigmerResource,
+  type StigmerResourceDetection,
+} from "./detect-stigmer-resource";
+
+const NOT_DETECTED: StigmerResourceDetection = { detected: false } as const;
+
+/**
+ * Detects whether a YAML content string represents a Stigmer platform resource.
+ *
+ * Thin React wrapper around {@link detectStigmerResource}. The result is
+ * memoized — detection only re-runs when `content` changes by reference.
+ *
+ * Pass `null` to skip detection (returns `{ detected: false }`). This
+ * makes the hook safe to call unconditionally even while content is
+ * still loading via {@link useArtifactContent}.
+ *
+ * @param content - Raw YAML content string, or `null` to skip detection.
+ * @returns A discriminated union: `{ detected: true, kind, ... }` when a
+ *   recognized Stigmer resource is found, `{ detected: false }` otherwise.
+ *
+ * @example
+ * ```tsx
+ * const { content } = useArtifactContent(executionId, storageKey);
+ * const detection = useDetectStigmerResource(content);
+ *
+ * if (detection.detected) {
+ *   return <Badge>{detection.displayName}</Badge>;
+ * }
+ * ```
+ *
+ * @see {@link detectStigmerResource} for the pure function (non-React usage)
+ * @see {@link useArtifactContent} for fetching artifact content
+ */
+export function useDetectStigmerResource(
+  content: string | null,
+): StigmerResourceDetection {
+  return useMemo(
+    () => (content === null ? NOT_DETECTED : detectStigmerResource(content)),
+    [content],
+  );
+}

package/src/library/useUpdateVisibility.ts

@@ -0,0 +1,94 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { create } from "@bufbuild/protobuf";
+import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
+import { UpdateVisibilityInputSchema } from "@stigmer/protos/ai/stigmer/commons/apiresource/io_pb";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+
+/** Resource kinds that support the `updateVisibility` RPC. */
+export type VisibilityResourceKind = "skill" | "agent" | "mcpServer";
+
+export interface UseUpdateVisibilityReturn {
+  /**
+   * Call the `updateVisibility` RPC for the specified resource.
+   * Resolves when the server confirms the change.
+   */
+  readonly updateVisibility: (
+    visibility: ApiResourceVisibility,
+  ) => Promise<void>;
+  /** `true` while the RPC is in flight. */
+  readonly isPending: boolean;
+  /** The last error from the RPC, or `null`. */
+  readonly error: Error | null;
+}
+
+/**
+ * Behavior hook that updates the visibility of a Skill, Agent, or
+ * MCP Server.
+ *
+ * Wraps the generated `stigmer.{kind}.updateVisibility()` SDK method
+ * with loading and error state management. The hook is stateless with
+ * respect to the resource — the caller is responsible for refreshing
+ * the resource after a successful update (e.g., via `refetch` from
+ * the corresponding data hook).
+ *
+ * Pass `null` for `resourceId` to produce a stable no-op (useful when
+ * the resource hasn't loaded yet).
+ *
+ * @example
+ * ```tsx
+ * const { updateVisibility, isPending } = useUpdateVisibility("skill", skill.metadata.id);
+ *
+ * <VisibilityToggle
+ *   visibility={skill.metadata.visibility}
+ *   onVisibilityChange={updateVisibility}
+ *   isPending={isPending}
+ * />
+ * ```
+ */
+export function useUpdateVisibility(
+  kind: VisibilityResourceKind,
+  resourceId: string | null,
+): UseUpdateVisibilityReturn {
+  const stigmer = useStigmer();
+  const [isPending, setIsPending] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const updateVisibility = useCallback(
+    async (visibility: ApiResourceVisibility) => {
+      if (!resourceId) return;
+
+      setIsPending(true);
+      setError(null);
+
+      try {
+        const input = create(UpdateVisibilityInputSchema, {
+          resourceId,
+          visibility,
+        });
+
+        switch (kind) {
+          case "skill":
+            await stigmer.skill.updateVisibility(input);
+            break;
+          case "agent":
+            await stigmer.agent.updateVisibility(input);
+            break;
+          case "mcpServer":
+            await stigmer.mcpServer.updateVisibility(input);
+            break;
+        }
+      } catch (err) {
+        setError(toError(err));
+        throw err;
+      } finally {
+        setIsPending(false);
+      }
+    },
+    [kind, resourceId, stigmer],
+  );
+
+  return { updateVisibility, isPending, error };
+}

package/src/mcp-server/McpServerConfigPanel.tsx

@@ -0,0 +1,265 @@
+"use client";
+
+import { useCallback } from "react";
+import { cn } from "@stigmer/theme";
+import type { EnvVarInput } from "@stigmer/sdk";
+import type { McpServer } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/api_pb";
+import type { DiscoveredTool } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/status_pb";
+import type { ToolApprovalPolicy } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/spec_pb";
+import {
+  EnvVarForm,
+  type EnvVarFormVariable,
+  type EnvVarFormSubmitOptions,
+} from "../environment/EnvVarForm";
+import { McpToolSelector } from "./McpToolSelector";
+
+// ---------------------------------------------------------------------------
+// Credential sub-props
+// ---------------------------------------------------------------------------
+
+/**
+ * Props for the inline credentials form shown when a server requires
+ * environment variables that are missing from the user's personal
+ * environment.
+ *
+ * This is modeled as a sub-object of {@link McpServerConfigPanelProps}
+ * so the presence of `credentials` controls whether the form is
+ * rendered — no status string inspection required.
+ */
+export interface McpServerCredentialsProps {
+  /** Missing env vars to collect (one form field per variable). */
+  readonly variables: EnvVarFormVariable[];
+  /** Called when the user submits credentials via the form. */
+  readonly onSubmit: (
+    values: Record<string, EnvVarInput>,
+    options: EnvVarFormSubmitOptions,
+  ) => void;
+  /** When true, form inputs are disabled and the submit button shows a spinner. */
+  readonly isSubmitting?: boolean;
+  /**
+   * Initial state of the "Save for future runs" toggle.
+   * @default true
+   */
+  readonly defaultSaveForFuture?: boolean;
+  /**
+   * When `true`, the save toggle is hidden and the form always uses
+   * `defaultSaveForFuture` as the submit value.
+   * @default false
+   */
+  readonly hideSaveToggle?: boolean;
+  /**
+   * Lookup function for pre-filling fields from the session env pool.
+   * When provided, fields whose keys return a value are pre-populated.
+   */
+  readonly poolValues?: (key: string) => EnvVarInput | undefined;
+}
+
+// ---------------------------------------------------------------------------
+// Component props
+// ---------------------------------------------------------------------------
+
+export interface McpServerConfigPanelProps {
+  /** The MCP server resource — used for header display (name, icon, description). */
+  readonly mcpServer: McpServer;
+  /**
+   * When provided, the credentials form is shown above the tool selector.
+   * Omit when no credentials are needed or they have already been provided.
+   *
+   * While credentials are pending, the tool selector is rendered in a
+   * disabled state so the user completes step 1 (credentials) before
+   * step 2 (tool customization).
+   */
+  readonly credentials?: McpServerCredentialsProps;
+  /** Discovered tools from `status.discovered_capabilities.tools`. */
+  readonly discoveredTools: DiscoveredTool[];
+  /** Approval policies from `spec.default_tool_approvals`. */
+  readonly toolApprovals: ToolApprovalPolicy[];
+  /** Currently enabled tool names (controlled). */
+  readonly enabledTools: string[];
+  /** Called when tool selection changes. */
+  readonly onEnabledToolsChange: (enabledTools: string[]) => void;
+  /** Called when the user clicks "Back" to return to the picker list. */
+  readonly onBack: () => void;
+  /** Error to display inline (e.g., from credential submission failure). */
+  readonly error?: Error | null;
+  readonly disabled?: boolean;
+  readonly className?: string;
+}
+
+/**
+ * Per-server configuration panel composing a credentials form
+ * ({@link EnvVarForm}) and a tool selector ({@link McpToolSelector}).
+ *
+ * Designed to render inside the same popover container as
+ * {@link McpServerPicker}: the picker list transitions to this panel
+ * when the user drills into a specific server's configuration.
+ *
+ * The panel's content is driven by the `credentials` prop:
+ * - **Present** (server needs setup) — the credentials form is shown
+ *   above the tool selector. The tool selector renders disabled as a
+ *   preview of what tools the server provides.
+ * - **Absent** (server is ready) — only the tool selector is shown,
+ *   fully interactive for customizing which tools to enable.
+ *
+ * This is a **pure presentational component** with no knowledge of
+ * the setup hook, personal environments, or session creation. All
+ * state is controlled via props — platform builders can use it with
+ * any state management approach.
+ *
+ * All visual properties flow through `--stgm-*` design tokens.
+ *
+ * @example
+ * ```tsx
+ * // Server that needs credentials:
+ * <McpServerConfigPanel
+ *   mcpServer={server}
+ *   credentials={{
+ *     variables: missingVars,
+ *     onSubmit: (values, opts) => submitEnvVars(ref, values, opts),
+ *   }}
+ *   discoveredTools={tools}
+ *   toolApprovals={approvals}
+ *   enabledTools={defaultEnabledTools}
+ *   onEnabledToolsChange={(t) => setEnabledTools(ref, t)}
+ *   onBack={() => setView("list")}
+ * />
+ *
+ * // Server that is ready (tool customization only):
+ * <McpServerConfigPanel
+ *   mcpServer={server}
+ *   discoveredTools={tools}
+ *   toolApprovals={approvals}
+ *   enabledTools={entry.enabledTools}
+ *   onEnabledToolsChange={(t) => setEnabledTools(ref, t)}
+ *   onBack={() => setView("list")}
+ * />
+ * ```
+ */
+export function McpServerConfigPanel({
+  mcpServer,
+  credentials,
+  discoveredTools,
+  toolApprovals,
+  enabledTools,
+  onEnabledToolsChange,
+  onBack,
+  error,
+  disabled,
+  className,
+}: McpServerConfigPanelProps) {
+  const serverName = mcpServer.metadata?.name ?? mcpServer.metadata?.slug ?? "MCP Server";
+  const iconUrl = mcpServer.spec?.iconUrl;
+  const description = mcpServer.spec?.description;
+  const isDisabled = disabled || credentials?.isSubmitting;
+
+  const handleCredentialSubmit = useCallback(
+    (values: Record<string, EnvVarInput>, options: EnvVarFormSubmitOptions) => {
+      credentials?.onSubmit(values, options);
+    },
+    [credentials],
+  );
+
+  return (
+    <div
+      className={cn("space-y-3", className)}
+      role="region"
+      aria-label={`Configure ${serverName}`}
+    >
+      {/* Header */}
+      <div className="flex items-start gap-2">
+        <button
+          type="button"
+          onClick={onBack}
+          disabled={credentials?.isSubmitting}
+          className={cn(
+            "mt-0.5 shrink-0 rounded p-0.5",
+            "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "disabled:pointer-events-none disabled:opacity-50",
+          )}
+          aria-label="Back to MCP server list"
+        >
+          <BackArrowIcon />
+        </button>
+
+        <div className="flex min-w-0 flex-1 items-start gap-2">
+          {iconUrl && (
+            <img
+              src={iconUrl}
+              alt=""
+              width={16}
+              height={16}
+              className="mt-0.5 size-4 shrink-0 rounded-sm object-contain"
+            />
+          )}
+          <div className="min-w-0 flex-1">
+            <h3 className="truncate text-xs font-medium text-foreground">
+              {serverName}
+            </h3>
+            {description && (
+              <p className="line-clamp-2 text-[0.65rem] leading-relaxed text-muted-foreground">
+                {description}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Credentials form — only when credentials prop is provided */}
+      {credentials && (
+        <EnvVarForm
+          variables={credentials.variables}
+          onSubmit={handleCredentialSubmit}
+          isSubmitting={credentials.isSubmitting}
+          disabled={disabled}
+          title="Credentials required"
+          defaultSaveForFuture={credentials.defaultSaveForFuture}
+          hideSaveToggle={credentials.hideSaveToggle}
+          poolValues={credentials.poolValues}
+          className="w-full"
+        />
+      )}
+
+      {/* Error display */}
+      {error && (
+        <div
+          role="alert"
+          className="rounded-md border border-destructive/30 bg-destructive/10 px-2.5 py-2 text-xs text-destructive"
+        >
+          {error.message}
+        </div>
+      )}
+
+      {/* Tool selector — always shown, disabled while credentials are pending */}
+      <McpToolSelector
+        tools={discoveredTools}
+        toolApprovals={toolApprovals}
+        enabledTools={enabledTools}
+        onChange={onEnabledToolsChange}
+        disabled={!!isDisabled || !!credentials}
+      />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Icons (internal to this module)
+// ---------------------------------------------------------------------------
+
+function BackArrowIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M10 3L5 8l5 5" />
+    </svg>
+  );
+}