@stigmer/react 0.0.76 → 0.0.78

package/src/mcp-server/McpServerDetailView.tsx

@@ -8,13 +8,15 @@ 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 type { ToolApprovalPolicy, McpServerSpec } 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 { useMcpServerConnect } from "./useMcpServerConnect";
 import { useMcpServerCredentials } from "./useMcpServerCredentials";
+import { useMcpServerOAuthConnect } from "./useMcpServerOAuthConnect";
+import type { OAuthConnectPhase } from "./useMcpServerOAuthConnect";
 import { ErrorMessage } from "../error/ErrorMessage";
 import { EnvVarForm } from "../environment/EnvVarForm";
 import type { EnvVarFormVariable } from "../environment/EnvVarForm";
@@ -113,6 +115,7 @@ export function McpServerDetailView({
   const { mcpServer, isLoading, error, refetch } = useMcpServer(org, slug);
   const credentials = useMcpServerCredentials(org, mcpServer ?? null);
   const connection = useMcpServerConnect();
+  const oauth = useMcpServerOAuthConnect();
 
   const [showCredentialForm, setShowCredentialForm] = useState(defaultShowCredentialForm);
   const [capabilityTab, setCapabilityTab] = useState<CapabilityTab>(defaultCapabilityTab);
@@ -126,9 +129,26 @@ export function McpServerDetailView({
     }
   }, [mcpServer]);
 
+  const handleOAuthSignIn = useCallback(async () => {
+    if (!mcpServer?.metadata?.id) return;
+
+    try {
+      await oauth.startOAuth(mcpServer.metadata.id);
+      credentials.refetch();
+      refetch();
+    } catch {
+      // error state is managed by the oauth hook
+    }
+  }, [mcpServer, oauth, credentials, refetch]);
+
   const handleConnectClick = useCallback(async () => {
     if (!mcpServer?.metadata?.id) return;
 
+    if (credentials.authMode === "oauth" && !credentials.isOAuthConnected) {
+      handleOAuthSignIn();
+      return;
+    }
+
     if (!credentials.isReady) {
       setShowCredentialForm(true);
       return;
@@ -140,7 +160,7 @@ export function McpServerDetailView({
     } catch {
       // error state is managed by the hook
     }
-  }, [mcpServer, credentials.isReady, connection, refetch]);
+  }, [mcpServer, credentials.authMode, credentials.isOAuthConnected, credentials.isReady, connection, refetch, handleOAuthSignIn]);
 
   const handleCredentialSubmit = useCallback(
     async (
@@ -172,6 +192,7 @@ export function McpServerDetailView({
 
   const spec = mcpServer?.spec;
   const status = mcpServer?.status;
+  const hasSource = spec && (spec.repositoryUrl || spec.githubStars > 0);
   const specAudit = status?.audit?.specAudit;
   const capabilities = status?.discoveredCapabilities;
   const pinnedPolicies = spec?.pinnedToolApprovals ?? [];
@@ -196,6 +217,12 @@ export function McpServerDetailView({
     return items;
   }, [tools.length, totalPolicyCount, resourceTemplates.length]);
 
+  const combinedError = connection.error ?? oauth.error;
+  const combinedClearError = useCallback(() => {
+    connection.clearError();
+    oauth.clearError();
+  }, [connection, oauth]);
+
   if (isLoading) return <LoadingSkeleton className={className} />;
   if (error)
     return <ErrorMessage error={error} retry={refetch} className={className} />;
@@ -225,72 +252,78 @@ export function McpServerDetailView({
         isVisibilityPending={isVisibilityPending}
       />
 
+      {hasSource && <SourceSection spec={spec} />}
+
       {spec?.serverType.case && (
         <ServerConfigSection serverType={spec.serverType} />
       )}
 
       {spec?.envSpec && Object.keys(spec.envSpec.data).length > 0 && (
-        <EnvSpecSection data={spec.envSpec.data} />
+        <EnvSpecSection
+          data={spec.envSpec.data}
+          oauthTargetEnvVar={credentials.oauthTargetEnvVar}
+        />
       )}
 
-      <section>
-        <h3 className="mb-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
-          Capabilities
-        </h3>
-        <div className="overflow-hidden rounded-lg border border-border">
-          <ConnectBar
-            isConnecting={connection.isConnecting}
-            connectionError={connection.error}
-            onConnect={handleConnectClick}
-            onClearConnectionError={connection.clearError}
-            hasDiscoveredTools={hasDiscoveredTools}
-            toolCount={tools.length}
-            policyCount={totalPolicyCount}
-            credentialsLoading={credentials.isLoading}
-          />
-
-          {showCredentialForm && credentials.missingVariables.length > 0 && (
-            <div
-              className="border-b border-border p-4"
-              data-cursor-target="credential-form"
-            >
-              <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 for one-time use."
-                variables={credentials.missingVariables}
-                onSubmit={(values, options) => handleCredentialSubmit(values, options)}
-                onCancel={() => setShowCredentialForm(false)}
-                isSubmitting={credentials.isSaving}
-                poolValues={credentialPoolValues}
-                className="w-full max-w-md"
-              />
-            </div>
-          )}
+      <Section title="Connection">
+        <ConnectBar
+          isConnecting={connection.isConnecting || oauth.isInProgress}
+          connectionError={combinedError}
+          onConnect={handleConnectClick}
+          onClearConnectionError={combinedClearError}
+          hasDiscoveredTools={hasDiscoveredTools}
+          toolCount={tools.length}
+          policyCount={totalPolicyCount}
+          credentialsLoading={credentials.isLoading}
+          oauthPhase={oauth.phase}
+          authMode={credentials.authMode}
+          isOAuthConnected={credentials.isOAuthConnected}
+          tokenLifetimeHint={credentials.tokenLifetimeHint}
+        />
 
-          <Tabs
-            tabs={capabilityTabs}
-            activeTab={capabilityTab}
-            onTabChange={(id) => setCapabilityTab(id as CapabilityTab)}
-            aria-label="MCP server capabilities"
+        {showCredentialForm && credentials.missingVariables.length > 0 && (
+          <div
+            className="border-b border-border p-4"
+            data-cursor-target="credential-form"
           >
-            {capabilityTab === "tools" && (
-              <ToolsTabContent tools={tools} />
-            )}
+            <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 for one-time use."
+              variables={credentials.missingVariables}
+              onSubmit={(values, options) => handleCredentialSubmit(values, options)}
+              onCancel={() => setShowCredentialForm(false)}
+              isSubmitting={credentials.isSaving}
+              poolValues={credentialPoolValues}
+              className="w-full max-w-md"
+            />
+          </div>
+        )}
+      </Section>
+
+      <Section title="Capabilities">
+        <Tabs
+          tabs={capabilityTabs}
+          activeTab={capabilityTab}
+          onTabChange={(id) => setCapabilityTab(id as CapabilityTab)}
+          aria-label="MCP server capabilities"
+        >
+          {capabilityTab === "tools" && (
+            <ToolsTabContent tools={tools} />
+          )}
 
-            {capabilityTab === "policies" && (
-              <PoliciesTabContent
-                pinnedPolicies={pinnedPolicies}
-                classifiedPolicies={classifiedPolicies}
-                hasDiscoveredTools={hasDiscoveredTools}
-              />
-            )}
+          {capabilityTab === "policies" && (
+            <PoliciesTabContent
+              pinnedPolicies={pinnedPolicies}
+              classifiedPolicies={classifiedPolicies}
+              hasDiscoveredTools={hasDiscoveredTools}
+            />
+          )}
 
-            {capabilityTab === "resources" && (
-              <ResourceTemplatesList templates={resourceTemplates} />
-            )}
-          </Tabs>
-        </div>
-      </section>
+          {capabilityTab === "resources" && (
+            <ResourceTemplatesList templates={resourceTemplates} />
+          )}
+        </Tabs>
+      </Section>
 
       {spec && spec.tags.length > 0 && <TagsSection tags={spec.tags} />}
     </div>
@@ -310,6 +343,10 @@ function ConnectBar({
   toolCount,
   policyCount,
   credentialsLoading,
+  oauthPhase,
+  authMode,
+  isOAuthConnected,
+  tokenLifetimeHint,
 }: {
   readonly isConnecting: boolean;
   readonly connectionError: Error | null;
@@ -319,48 +356,90 @@ function ConnectBar({
   readonly toolCount: number;
   readonly policyCount: number;
   readonly credentialsLoading: boolean;
+  readonly oauthPhase: OAuthConnectPhase;
+  readonly authMode: "manual" | "oauth";
+  readonly isOAuthConnected: boolean;
+  readonly tokenLifetimeHint: string | null;
 }) {
+  const isOAuthBusy =
+    oauthPhase === "initiating" ||
+    oauthPhase === "awaiting-callback" ||
+    oauthPhase === "completing" ||
+    oauthPhase === "connecting";
+
+  const buttonLabel = (() => {
+    if (isOAuthBusy) return oauthPhaseLabel(oauthPhase);
+    if (isConnecting) return "Connecting...";
+    if (authMode === "oauth" && !isOAuthConnected) return "Sign in to connect";
+    if (hasDiscoveredTools) return "Reconnect";
+    return "Connect";
+  })();
+
+  const buttonIcon = (() => {
+    if (isOAuthBusy || isConnecting) return <Spinner />;
+    if (authMode === "oauth" && !isOAuthConnected) return <OAuthIcon className="size-3.5" />;
+    if (hasDiscoveredTools) return <RefreshIcon className="size-3.5" />;
+    return <ConnectIcon className="size-3.5" />;
+  })();
+
+  const statusText = (() => {
+    if (authMode === "oauth" && isOAuthConnected) {
+      const hint = tokenLifetimeHint && tokenLifetimeHint !== "never"
+        ? ` \u00B7 Session lasts ~${tokenLifetimeHint}`
+        : "";
+      return `Tokens refresh automatically${hint}`;
+    }
+    if (hasDiscoveredTools) return formatConnectionSummary(toolCount, policyCount);
+    return "Not connected yet";
+  })();
+
   return (
     <div className="flex flex-col">
-      <div className="flex items-center justify-between border-b border-border px-3 py-2">
-        <span className="text-xs text-muted-foreground">
-          {hasDiscoveredTools
-            ? formatConnectionSummary(toolCount, policyCount)
-            : "Not connected yet"}
-        </span>
+      <div className="flex items-center justify-between px-3 py-2">
+        <div className="flex items-center gap-2">
+          {authMode === "oauth" && (
+            <span
+              className={cn(
+                "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-medium",
+                isOAuthConnected
+                  ? "bg-success/10 text-success"
+                  : "bg-muted text-muted-foreground",
+              )}
+            >
+              <span
+                className={cn(
+                  "size-1.5 rounded-full",
+                  isOAuthConnected ? "bg-success" : "bg-muted-foreground",
+                )}
+                aria-hidden="true"
+              />
+              {isOAuthConnected ? "Connected" : "Not connected"}
+            </span>
+          )}
+          <span className="text-xs text-muted-foreground">
+            {statusText}
+          </span>
+        </div>
         <button
           type="button"
           onClick={onConnect}
-          disabled={isConnecting || credentialsLoading}
+          disabled={isConnecting || isOAuthBusy || credentialsLoading}
           data-cursor-target="connect-button"
           className={cn(
             "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium",
-            "border border-border bg-background text-foreground",
-            "hover:bg-accent hover:text-accent-foreground",
+            authMode === "oauth" && !isOAuthConnected
+              ? "bg-primary text-primary-foreground hover:bg-primary-hover"
+              : "border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground",
             "disabled:pointer-events-none disabled:opacity-50",
           )}
         >
-          {isConnecting ? (
-            <>
-              <Spinner />
-              Connecting...
-            </>
-          ) : hasDiscoveredTools ? (
-            <>
-              <RefreshIcon className="size-3.5" />
-              Reconnect
-            </>
-          ) : (
-            <>
-              <ConnectIcon className="size-3.5" />
-              Connect
-            </>
-          )}
+          {buttonIcon}
+          {buttonLabel}
         </button>
       </div>
 
       {connectionError && (
-        <div className="flex items-start gap-2 border-b border-destructive/20 bg-destructive/5 px-3 py-2">
+        <div className="flex items-start gap-2 border-t border-destructive/20 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">
             {connectionError.message}
@@ -379,6 +458,21 @@ function ConnectBar({
   );
 }
 
+function oauthPhaseLabel(phase: OAuthConnectPhase): string {
+  switch (phase) {
+    case "initiating":
+      return "Starting sign-in...";
+    case "awaiting-callback":
+      return "Waiting for authorization...";
+    case "completing":
+      return "Completing sign-in...";
+    case "connecting":
+      return "Discovering tools...";
+    default:
+      return "Connecting...";
+  }
+}
+
 function formatConnectionSummary(toolCount: number, policyCount: number): string {
   const toolLabel = `${toolCount} tool${toolCount !== 1 ? "s" : ""}`;
   if (policyCount === 0) return toolLabel;
@@ -459,6 +553,11 @@ function Header({
             )
           )}
         </div>
+        {meta?.slug && (
+          <span className="mt-0.5 block truncate font-mono text-xs text-muted-foreground">
+            {meta.org ? `${meta.org}/${meta.slug}` : meta.slug}
+          </span>
+        )}
         <div className="mt-0.5 flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground">
           {meta?.org && <span>{meta.org}</span>}
           {status && (
@@ -592,6 +691,45 @@ function ServerConfigSection({
   );
 }
 
+function SourceSection({
+  spec,
+}: {
+  readonly spec: McpServerSpec;
+}) {
+  return (
+    <Section title="Source">
+      <div className="flex flex-col gap-2 p-3">
+        {spec.repositoryUrl && (
+          <div className="flex items-baseline gap-2">
+            <span className="shrink-0 text-xs font-medium text-muted-foreground">
+              Repository
+            </span>
+            <a
+              href={spec.repositoryUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 break-all font-mono text-xs text-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:decoration-foreground"
+            >
+              {spec.repositoryUrl}
+              <ExternalLinkIcon className="size-3 shrink-0" />
+            </a>
+          </div>
+        )}
+        {spec.githubStars > 0 && (
+          <div className="flex items-baseline gap-2">
+            <span className="shrink-0 text-xs font-medium text-muted-foreground">
+              Stars
+            </span>
+            <span className="text-xs text-foreground">
+              {spec.githubStars.toLocaleString()}
+            </span>
+          </div>
+        )}
+      </div>
+    </Section>
+  );
+}
+
 function ResourceTemplatesList({
   templates,
 }: {
@@ -624,8 +762,10 @@ function ResourceTemplatesList({
 
 function EnvSpecSection({
   data,
+  oauthTargetEnvVar,
 }: {
   readonly data: { [key: string]: EnvironmentValue };
+  readonly oauthTargetEnvVar: string | null;
 }) {
   const entries = Object.entries(data).sort(([a], [b]) =>
     a.localeCompare(b),
@@ -634,21 +774,29 @@ function EnvSpecSection({
   return (
     <Section title={`Environment Variables (${entries.length})`}>
       <div className="flex flex-col divide-y divide-border">
-        {entries.map(([name, env]) => (
-          <div key={name} className="flex items-start gap-3 px-3 py-2">
-            <code className="shrink-0 font-mono text-sm font-medium text-foreground">
-              {name}
-            </code>
-            <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
-              {env.isSecret ? "secret" : "config"}
-            </span>
-            {env.description && (
-              <span className="text-xs text-muted-foreground">
-                {env.description}
+        {entries.map(([name, env]) => {
+          const isOAuthManaged = name === oauthTargetEnvVar;
+          return (
+            <div key={name} className="flex items-start gap-3 px-3 py-2">
+              <code className="shrink-0 font-mono text-sm font-medium text-foreground">
+                {name}
+              </code>
+              <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+                {env.isSecret ? "secret" : "config"}
               </span>
-            )}
-          </div>
-        ))}
+              {isOAuthManaged && (
+                <span className="shrink-0 rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary">
+                  oauth
+                </span>
+              )}
+              {env.description && (
+                <span className="text-xs text-muted-foreground">
+                  {env.description}
+                </span>
+              )}
+            </div>
+          );
+        })}
       </div>
     </Section>
   );
@@ -1046,6 +1194,44 @@ function SparklesIcon({ className }: { readonly className?: string }) {
   );
 }
 
+function OAuthIcon({ 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"
+    >
+      <rect x="1.5" y="5" width="13" height="8" rx="1.5" />
+      <path d="M4.5 5V3.5a3.5 3.5 0 0 1 7 0V5" />
+      <circle cx="8" cy="9.5" r="1.25" />
+    </svg>
+  );
+}
+
+function ExternalLinkIcon({ 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="M12 8.667v4A1.333 1.333 0 0 1 10.667 14H3.333A1.333 1.333 0 0 1 2 12.667V5.333A1.333 1.333 0 0 1 3.333 4h4" />
+      <path d="M10 2h4v4" />
+      <path d="M6.667 9.333 14 2" />
+    </svg>
+  );
+}
+
 function Spinner() {
   return (
     <svg

package/src/mcp-server/McpServerPicker.tsx

@@ -19,6 +19,7 @@ import { useScrollShadows } from "../internal/useScrollShadows";
 import { ScrollFade } from "../internal/ScrollFade";
 import { McpServerConfigPanel } from "./McpServerConfigPanel";
 import type { McpServerSetupEntry } from "./mcpServerSetupReducer";
+import { useMcpServerOAuthConnect } from "./useMcpServerOAuthConnect";
 
 // ---------------------------------------------------------------------------
 // Setup integration props
@@ -255,6 +256,7 @@ export function McpServerPicker({
 
   const { results, isLoading, error, query, setQuery } =
     useMcpServerSearch(org, { scope });
+  const oauth = useMcpServerOAuthConnect();
 
   const [focusIndex, setFocusIndex] = useState(-1);
   const [view, setView] = useState<PickerView>(() =>
@@ -384,14 +386,50 @@ export function McpServerPicker({
     const needsCredentials =
       entry.status === "needsSetup" || entry.status === "submitting";
 
+    const auth = entry.mcpServer.spec?.auth;
+    const oauthTargetEnvVar = auth?.targetEnvVar || null;
+    const hasOAuth = !!auth;
+
+    const entryMissingVars =
+      entry.status === "needsSetup" ? entry.missingVariables : [];
+
+    const filteredMissingVars = oauthTargetEnvVar
+      ? entryMissingVars.filter((v) => v.key !== oauthTargetEnvVar)
+      : entryMissingVars;
+
+    const hasManualVars = filteredMissingVars.length > 0;
+
+    const oauthTokenMissing = oauthTargetEnvVar
+      ? entryMissingVars.some((v) => v.key === oauthTargetEnvVar)
+      : false;
+
+    const oauthSignInProps = hasOAuth
+      ? {
+          onSignIn: async () => {
+            if (!entry.mcpServer.metadata?.id) return;
+            try {
+              await oauth.startOAuth(entry.mcpServer.metadata.id);
+              setup.onServerAdded(ref);
+            } catch {
+              // error state managed by oauth hook
+            }
+          },
+          phase: oauth.phase,
+          isConnected: !oauthTokenMissing,
+          error: oauth.error,
+          onClearError: oauth.clearError,
+        }
+      : undefined;
+
     return (
       <div className={cn("w-72", className)}>
         <McpServerConfigPanel
           mcpServer={entry.mcpServer}
+          oauthSignIn={oauthSignInProps}
           credentials={
-            needsCredentials
+            needsCredentials && hasManualVars
               ? {
-                  variables: entry.missingVariables,
+                  variables: filteredMissingVars,
                   onSubmit: (values, opts) =>
                     setup.onSubmitEnvVars(ref, values, opts),
                   isSubmitting: entry.status === "submitting",