@stigmer/react 3.9.0 → 3.11.0

package/mcp-server/McpServerDetailView.js

@@ -11,7 +11,7 @@ import { useUpdateMcpServer } from "./useUpdateMcpServer.js";
 import { mcpServerToInput } from "./internal/mcpServerToInput.js";
 import { useMcpServerConnect } from "./useMcpServerConnect.js";
 import { useMcpServerCredentials } from "./useMcpServerCredentials.js";
-import { useMcpServerOAuthConnect } from "./useMcpServerOAuthConnect.js";
+import { useMcpServerOAuthConnect, getOAuthConnectErrorMessage, } from "./useMcpServerOAuthConnect.js";
 import { StdioSandboxNotice } from "./StdioSandboxNotice.js";
 import { OAuthRequiredNotice } from "./OAuthRequiredNotice.js";
 import { useDisconnectOAuth } from "./useDisconnectOAuth.js";
@@ -114,31 +114,48 @@ export function McpServerDetailView({ org, slug, mcpServerState, onResourceLoad,
             refetch();
         }
         catch {
-            // error state is managed by the oauth hook
+            // Error state is managed by the oauth hook — but refetch anyway:
+            // completeOAuthConnect persists the grant BEFORE the chained
+            // discovery runs, so a discovery-leg failure still changed server
+            // state. Without this, stale isOAuthConnected=false makes the next
+            // Connect click relaunch the popup instead of retrying discovery
+            // (stigmer/stigmer#229).
+            credentials.refetch();
+            refetch();
         }
     }, [mcpServer, oauth, credentials, refetch]);
+    // A failure in the "connecting" phase proves sign-in already succeeded —
+    // the grant exists server-side even while the grant-status refetch is
+    // still in flight. Retry bare discovery; never relaunch the popup and
+    // never demand credentials the flow already has.
+    const isDiscoveryRetry = credentials.authMode === "oauth" && oauth.failedPhase === "connecting";
     const handleConnectClick = useCallback(async () => {
         if (!mcpServer?.metadata?.id)
             return;
         if (credentials.authMode === "oauth" &&
             !credentials.isOAuthConnected &&
-            !credentials.manualOverride) {
+            !credentials.manualOverride &&
+            !isDiscoveryRetry) {
             handleOAuthSignIn();
             return;
         }
-        if (!credentials.isReady) {
+        if (!credentials.isReady && !isDiscoveryRetry) {
             setShowCredentialForm(true);
             return;
         }
         const envKeys = Object.keys(mcpServer.spec?.env ?? {});
         try {
             await connection.connect(mcpServer.metadata.id, activeOrg ?? org, undefined, envKeys);
+            // Discovery succeeded — retire the OAuth chain's stale
+            // discovery-failure error so the banner doesn't outlive the state
+            // it described.
+            oauth.clearError();
             refetch();
         }
         catch {
             // error state is managed by the hook
         }
-    }, [mcpServer, credentials.authMode, credentials.isOAuthConnected, credentials.manualOverride, credentials.isReady, connection, refetch, handleOAuthSignIn]);
+    }, [mcpServer, credentials.authMode, credentials.isOAuthConnected, credentials.manualOverride, credentials.isReady, isDiscoveryRetry, connection, oauth.clearError, refetch, handleOAuthSignIn, activeOrg, org]);
     const handleCredentialSubmit = useCallback(async (values, options) => {
         try {
             if (options.saveForFuture) {
@@ -210,6 +227,18 @@ export function McpServerDetailView({ org, slug, mcpServerState, onResourceLoad,
     const tools = capabilities?.tools ?? [];
     const resourceTemplates = capabilities?.resourceTemplates ?? [];
     const hasDiscoveredTools = tools.length > 0;
+    // "Signed in but never discovered" (stigmer/stigmer#229): the OAuth flow
+    // persists the grant in completeOAuthConnect BEFORE the chained discovery
+    // runs, so a failed/interrupted discovery leg leaves a healthy grant with
+    // empty discovered_capabilities. Both inputs are server truth, so this
+    // derivation survives reloads and self-heals once discovery lands (even
+    // when the workflow outlives the browser's RPC). Token-expired grants are
+    // excluded — re-auth, not discovery, is their next step.
+    const isOAuthStranded = credentials.authMode === "oauth" &&
+        credentials.isOAuthConnected &&
+        credentials.connectionHealth !==
+            OAuthConnectionHealth.OAUTH_CONNECTION_HEALTH_TOKEN_EXPIRED &&
+        !hasDiscoveredTools;
     const capabilityTabs = useMemo(() => {
         const items = [
             { id: "tools", label: "Tools", badge: tools.length },
@@ -225,6 +254,14 @@ export function McpServerDetailView({ org, slug, mcpServerState, onResourceLoad,
         return items;
     }, [tools.length, totalPolicyCount, resourceTemplates.length]);
     const combinedError = connection.error ?? oauth.error;
+    // OAuth-chain errors compose through the phase-aware helper so a
+    // discovery-leg failure reads "signed in, but discovery failed" instead
+    // of masquerading as a failed sign-in.
+    const combinedErrorMessage = connection.error
+        ? getUserMessage(connection.error)
+        : oauth.error
+            ? getOAuthConnectErrorMessage(oauth.error, oauth.failedPhase)
+            : null;
     const combinedClearError = useCallback(() => {
         connection.clearError();
         oauth.clearError();
@@ -270,7 +307,7 @@ export function McpServerDetailView({ org, slug, mcpServerState, onResourceLoad,
         qualifiedSlug: meta?.slug
             ? (meta.org ? `${meta.org}/${meta.slug}` : meta.slug)
             : undefined,
-        icon: editable && saveMcpField ? (_jsx(InlineEditImage, { value: spec?.iconUrl ?? "", onSave: (v) => saveMcpField("iconUrl", v || undefined), isSaving: isUpdating, fallback: _jsx(McpServerIcon, { className: "size-6 text-muted-foreground" }), size: "md" })) : spec?.iconUrl ? undefined : _jsx(McpServerIcon, { className: "size-6 text-muted-foreground" }),
+        icon: editable && saveMcpField ? (_jsx(InlineEditImage, { value: spec?.iconUrl ?? "", onSave: (v) => saveMcpField("iconUrl", v || undefined), isSaving: isUpdating, fallback: _jsx(McpServerIcon, { className: "stg:size-6 stg:text-muted-foreground" }), size: "md" })) : spec?.iconUrl ? undefined : _jsx(McpServerIcon, { className: "stg:size-6 stg:text-muted-foreground" }),
         iconUrl: editable ? undefined : spec?.iconUrl || undefined,
         createdAt: specAudit?.createdAt ? timestampDate(specAudit.createdAt) : null,
         updatedAt: specAudit?.updatedAt ? timestampDate(specAudit.updatedAt) : null,
@@ -285,16 +322,16 @@ export function McpServerDetailView({ org, slug, mcpServerState, onResourceLoad,
     const headerMetaExtra = (_jsxs(_Fragment, { children: [status && _jsx(ValidationStateBadge, { state: status.validationState }), lastDiscoveredAt && (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsxs("span", { children: ["Discovered ", formatDate(lastDiscoveredAt)] })] }))] }));
     const headerBanner = status?.validationState === ValidationState.invalid &&
         status.validationMessage ? (_jsx(ValidationBanner, { message: status.validationMessage })) : undefined;
-    return (_jsxs(_Fragment, { children: [_jsxs(ResourceDetailShell, { header: headerMeta, visibilityControl: visibilityControl, headerMetaExtra: headerMetaExtra, headerBanner: headerBanner, primaryAction: primaryAction, actions: mergedActions, className: className, children: [(editable || spec?.description) && (_jsx(Section, { title: "Description", children: editable && saveMcpField ? (_jsx("div", { className: "max-h-20 overflow-y-auto p-3", children: _jsx(InlineEditTextarea, { value: spec?.description || "", onSave: (v) => saveMcpField("description", v || undefined), isSaving: isUpdating, placeholder: "Add a description", minRows: 2 }) })) : (_jsx("div", { className: "p-3", children: _jsx("pre", { className: "whitespace-pre-wrap break-words text-sm text-foreground font-sans", children: spec?.description }) })) })), hasSource && _jsx(SourceSection, { spec: spec }), (editable || spec?.serverType.case) && (_jsx(ServerConfigSection, { serverType: spec?.serverType, editable: editable, isSaving: isUpdating, saveMcpField: saveMcpField })), (editable || (spec?.env && Object.keys(spec.env).length > 0)) && (_jsx(EnvSection, { data: spec?.env ?? {}, oauthTargetEnvVar: credentials.oauthTargetEnvVar, editable: editable, isSaving: isUpdating, saveMcpField: saveMcpField })), _jsxs(Section, { title: "Connection", scrollTarget: "mcp-connection", children: [_jsx(StdioSandboxNotice, { serverType: spec?.serverType, className: "mb-3" }), _jsx(OAuthRequiredNotice, { oauthOnly: spec?.auth?.oauthOnly, className: "mb-3" }), _jsx(ConnectBar, { manualEntrySupported: credentials.manualEntrySupported, isConnecting: connection.isConnecting || oauth.isInProgress, connectionError: combinedError, onConnect: handleConnectClick, onClearConnectionError: combinedClearError, hasDiscoveredTools: hasDiscoveredTools, credentialsLoading: credentials.isLoading, oauthPhase: oauth.phase, authMode: credentials.authMode, isOAuthConnected: credentials.isOAuthConnected, connectionHealth: credentials.connectionHealth, canDisconnect: credentials.canDisconnect, onDisconnect: handleDisconnect, isDisconnecting: disconnectOAuth.isDisconnecting, disconnectError: disconnectOAuth.error, onClearDisconnectError: disconnectOAuth.clearError, serverName: mcpServer?.metadata?.name ?? slug, accessTokenExpiresAt: credentials.accessTokenExpiresAt, tokenLifetimeHint: credentials.tokenLifetimeHint, isVendorApprovalPending: credentials.isVendorApprovalPending, isVendorApprovalBlocked: credentials.isVendorApprovalBlocked, vendorApprovalDocsUrl: credentials.vendorApprovalDocsUrl, canBringOwnApp: credentials.canBringOwnApp, isOrgOAuthApp: credentials.isOrgOAuthApp, onBringOwnApp: () => setShowByoaForm(true), onRemoveOrgApp: handleRemoveOrgApp, isRemovingOrgApp: orgOAuthApp.isDeleting, removeOrgAppError: orgOAuthApp.deleteError, onClearRemoveOrgAppError: orgOAuthApp.clearErrors, manualOverride: credentials.manualOverride, onManualOverride: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs(ResourceDetailShell, { header: headerMeta, visibilityControl: visibilityControl, headerMetaExtra: headerMetaExtra, headerBanner: headerBanner, primaryAction: primaryAction, actions: mergedActions, className: className, children: [(editable || spec?.description) && (_jsx(Section, { title: "Description", children: editable && saveMcpField ? (_jsx("div", { className: "stg:max-h-20 stg:overflow-y-auto stg:p-3", children: _jsx(InlineEditTextarea, { value: spec?.description || "", onSave: (v) => saveMcpField("description", v || undefined), isSaving: isUpdating, placeholder: "Add a description", minRows: 2 }) })) : (_jsx("div", { className: "stg:p-3", children: _jsx("pre", { className: "stg:whitespace-pre-wrap stg:break-words stg:text-sm stg:text-foreground stg:font-sans", children: spec?.description }) })) })), hasSource && _jsx(SourceSection, { spec: spec }), (editable || spec?.serverType.case) && (_jsx(ServerConfigSection, { serverType: spec?.serverType, editable: editable, isSaving: isUpdating, saveMcpField: saveMcpField })), (editable || (spec?.env && Object.keys(spec.env).length > 0)) && (_jsx(EnvSection, { data: spec?.env ?? {}, oauthTargetEnvVar: credentials.oauthTargetEnvVar, editable: editable, isSaving: isUpdating, saveMcpField: saveMcpField })), _jsxs(Section, { title: "Connection", scrollTarget: "mcp-connection", children: [_jsx(StdioSandboxNotice, { serverType: spec?.serverType, className: "stg:mb-3" }), _jsx(OAuthRequiredNotice, { oauthOnly: spec?.auth?.oauthOnly, className: "stg:mb-3" }), _jsx(ConnectBar, { manualEntrySupported: credentials.manualEntrySupported, isConnecting: connection.isConnecting || oauth.isInProgress, connectionError: combinedError, connectionErrorMessage: combinedErrorMessage, onConnect: handleConnectClick, onClearConnectionError: combinedClearError, hasDiscoveredTools: hasDiscoveredTools, isOAuthStranded: isOAuthStranded, credentialsLoading: credentials.isLoading, oauthPhase: oauth.phase, authMode: credentials.authMode, isOAuthConnected: credentials.isOAuthConnected, connectionHealth: credentials.connectionHealth, canDisconnect: credentials.canDisconnect, onDisconnect: handleDisconnect, isDisconnecting: disconnectOAuth.isDisconnecting, disconnectError: disconnectOAuth.error, onClearDisconnectError: disconnectOAuth.clearError, serverName: mcpServer?.metadata?.name ?? slug, accessTokenExpiresAt: credentials.accessTokenExpiresAt, tokenLifetimeHint: credentials.tokenLifetimeHint, isVendorApprovalPending: credentials.isVendorApprovalPending, isVendorApprovalBlocked: credentials.isVendorApprovalBlocked, vendorApprovalDocsUrl: credentials.vendorApprovalDocsUrl, canBringOwnApp: credentials.canBringOwnApp, isOrgOAuthApp: credentials.isOrgOAuthApp, onBringOwnApp: () => setShowByoaForm(true), onRemoveOrgApp: handleRemoveOrgApp, isRemovingOrgApp: orgOAuthApp.isDeleting, removeOrgAppError: orgOAuthApp.deleteError, onClearRemoveOrgAppError: orgOAuthApp.clearErrors, manualOverride: credentials.manualOverride, onManualOverride: () => {
                                     credentials.setManualOverride(true);
                                     setShowCredentialForm(true);
                                 }, onBackToOAuth: () => {
                                     credentials.setManualOverride(false);
                                     setShowCredentialForm(false);
-                                }, onCancelOAuth: oauth.clearError }), showCredentialForm && credentials.missingVariables.length > 0 && (_jsx("div", { className: "border-b border-border p-4", "data-cursor-target": "credential-form", children: _jsx(EnvVarForm, { title: "Credentials Required", description: "Enter the credentials needed to connect to this MCP server. Toggle \"Save for future runs\" 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" }) }))] }), _jsxs("dialog", { ref: byoaDialogRef, onCancel: handleByoaDialogCancel, className: cn("m-auto w-full max-w-md rounded-lg border border-border bg-background p-6 shadow-lg", "backdrop:bg-black/50"), children: [_jsx("h3", { className: "mb-4 text-base font-semibold text-foreground", children: "Use your own OAuth app" }), _jsx(OAuthAppForm, { providerName: mcpServer?.metadata?.name ?? slug, vendorDocsUrl: credentials.vendorApprovalDocsUrl, onSubmit: handleByoaSubmit, onCancel: () => {
+                                }, onCancelOAuth: oauth.clearError }), showCredentialForm && credentials.missingVariables.length > 0 && (_jsx("div", { className: "stg:border-b stg:border-border stg:p-4", "data-cursor-target": "credential-form", children: _jsx(EnvVarForm, { title: "Credentials Required", description: "Enter the credentials needed to connect to this MCP server. Toggle \"Save for future runs\" 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: "stg:w-full stg:max-w-md" }) }))] }), _jsxs("dialog", { ref: byoaDialogRef, onCancel: handleByoaDialogCancel, className: cn("stg:m-auto stg:w-full stg:max-w-md stg:rounded-lg stg:border stg:border-border stg:bg-background stg:p-6 stg:shadow-lg", "stg:backdrop:bg-black/50"), children: [_jsx("h3", { className: "stg:mb-4 stg:text-base stg:font-semibold stg:text-foreground", children: "Use your own OAuth app" }), _jsx(OAuthAppForm, { providerName: mcpServer?.metadata?.name ?? slug, vendorDocsUrl: credentials.vendorApprovalDocsUrl, onSubmit: handleByoaSubmit, onCancel: () => {
                                     setShowByoaForm(false);
                                     orgOAuthApp.clearErrors();
-                                }, isSubmitting: orgOAuthApp.isSetting, error: orgOAuthApp.setError })] }), _jsx(Section, { title: "Capabilities", scrollTarget: "mcp-capabilities", children: _jsxs(Tabs, { tabs: capabilityTabs, activeTab: capabilityTab, onTabChange: (id) => setCapabilityTab(id), "aria-label": "MCP server capabilities", children: [capabilityTab === "tools" && (_jsx(ToolsTabContent, { tools: tools })), capabilityTab === "policies" && (_jsx(PoliciesTabContent, { pinnedPolicies: pinnedPolicies, classifiedPolicies: classifiedPolicies, hasDiscoveredTools: hasDiscoveredTools })), capabilityTab === "resources" && (_jsx(ResourceTemplatesList, { templates: resourceTemplates }))] }) }), (editable || (spec && spec.tags.length > 0)) && (_jsx(TagsSection, { tags: spec?.tags ?? [], editable: editable, isSaving: isUpdating, saveMcpField: saveMcpField }))] }), access.dialog] }));
+                                }, isSubmitting: orgOAuthApp.isSetting, error: orgOAuthApp.setError })] }), _jsx(Section, { title: "Capabilities", scrollTarget: "mcp-capabilities", children: _jsxs(Tabs, { tabs: capabilityTabs, activeTab: capabilityTab, onTabChange: (id) => setCapabilityTab(id), "aria-label": "MCP server capabilities", children: [capabilityTab === "tools" && (_jsx(ToolsTabContent, { tools: tools, isOAuthStranded: isOAuthStranded, onDiscover: handleConnectClick, isDiscovering: connection.isConnecting || oauth.isInProgress })), capabilityTab === "policies" && (_jsx(PoliciesTabContent, { pinnedPolicies: pinnedPolicies, classifiedPolicies: classifiedPolicies, hasDiscoveredTools: hasDiscoveredTools, isOAuthStranded: isOAuthStranded })), capabilityTab === "resources" && (_jsx(ResourceTemplatesList, { templates: resourceTemplates }))] }) }), (editable || (spec && spec.tags.length > 0)) && (_jsx(TagsSection, { tags: spec?.tags ?? [], editable: editable, isSaving: isUpdating, saveMcpField: saveMcpField }))] }), access.dialog] }));
 }
 // ---------------------------------------------------------------------------
 // ConnectBar — single entry point for capability discovery
@@ -303,34 +340,34 @@ export function McpServerDetailView({ org, slug, mcpServerState, onResourceLoad,
 function healthPillProps(health, isVendorApprovalPending) {
     if (isVendorApprovalPending) {
         return {
-            pillClass: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
-            dotClass: "bg-amber-500",
+            pillClass: "stg:bg-amber-500/10 stg:text-amber-600 stg:dark:text-amber-400",
+            dotClass: "stg:bg-amber-500",
             label: "Pending approval",
         };
     }
     switch (health) {
         case OAuthConnectionHealth.OAUTH_CONNECTION_HEALTH_HEALTHY:
             return {
-                pillClass: "bg-success/10 text-success",
-                dotClass: "bg-success",
+                pillClass: "stg:bg-success/10 stg:text-success",
+                dotClass: "stg:bg-success",
                 label: "Connected",
             };
         case OAuthConnectionHealth.OAUTH_CONNECTION_HEALTH_TOKEN_EXPIRED_REFRESHABLE:
             return {
-                pillClass: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
-                dotClass: "bg-amber-500",
+                pillClass: "stg:bg-amber-500/10 stg:text-amber-600 stg:dark:text-amber-400",
+                dotClass: "stg:bg-amber-500",
                 label: "Token expired",
             };
         case OAuthConnectionHealth.OAUTH_CONNECTION_HEALTH_TOKEN_EXPIRED:
             return {
-                pillClass: "bg-destructive-subtle text-destructive",
-                dotClass: "bg-destructive",
+                pillClass: "stg:bg-destructive-subtle stg:text-destructive",
+                dotClass: "stg:bg-destructive",
                 label: "Re-auth needed",
             };
         default:
             return {
-                pillClass: "bg-muted text-muted-foreground",
-                dotClass: "bg-muted-foreground",
+                pillClass: "stg:bg-muted stg:text-muted-foreground",
+                dotClass: "stg:bg-muted-foreground",
                 label: "Not connected",
             };
     }
@@ -355,7 +392,7 @@ function healthStatusText(health, accessTokenExpiresAt, tokenLifetimeHint) {
             return "Not connected yet";
     }
 }
-function ConnectBar({ isConnecting, connectionError, onConnect, onClearConnectionError, hasDiscoveredTools, credentialsLoading, oauthPhase, authMode, isOAuthConnected, connectionHealth, canDisconnect, onDisconnect, isDisconnecting, disconnectError, onClearDisconnectError, serverName, accessTokenExpiresAt, tokenLifetimeHint, isVendorApprovalPending, isVendorApprovalBlocked, vendorApprovalDocsUrl, canBringOwnApp, isOrgOAuthApp, onBringOwnApp, onRemoveOrgApp, isRemovingOrgApp, removeOrgAppError, onClearRemoveOrgAppError, manualEntrySupported, manualOverride, onManualOverride, onBackToOAuth, onCancelOAuth, }) {
+function ConnectBar({ isConnecting, connectionError, connectionErrorMessage, onConnect, onClearConnectionError, hasDiscoveredTools, isOAuthStranded, credentialsLoading, oauthPhase, authMode, isOAuthConnected, connectionHealth, canDisconnect, onDisconnect, isDisconnecting, disconnectError, onClearDisconnectError, serverName, accessTokenExpiresAt, tokenLifetimeHint, isVendorApprovalPending, isVendorApprovalBlocked, vendorApprovalDocsUrl, canBringOwnApp, isOrgOAuthApp, onBringOwnApp, onRemoveOrgApp, isRemovingOrgApp, removeOrgAppError, onClearRemoveOrgAppError, manualEntrySupported, manualOverride, onManualOverride, onBackToOAuth, onCancelOAuth, }) {
     const [disconnectPhase, setDisconnectPhase] = useState("idle");
     const [removeOrgAppPhase, setRemoveOrgAppPhase] = useState("idle");
     const isOAuthBusy = oauthPhase === "initiating" ||
@@ -375,6 +412,8 @@ function ConnectBar({ isConnecting, connectionError, onConnect, onClearConnectio
             return "Sign in with your app";
         if (showOAuthPrimary || needsReAuth)
             return "Sign in to connect";
+        if (isOAuthStranded)
+            return "Discover tools";
         if (hasDiscoveredTools)
             return "Reconnect";
         return "Connect";
@@ -383,13 +422,17 @@ function ConnectBar({ isConnecting, connectionError, onConnect, onClearConnectio
         if (isOAuthBusy || isConnecting)
             return _jsx(Spinner, {});
         if (showOAuthPrimary || needsReAuth)
-            return _jsx(OAuthIcon, { className: "size-3.5" });
+            return _jsx(OAuthIcon, { className: "stg:size-3.5" });
         if (hasDiscoveredTools)
-            return _jsx(RefreshIcon, { className: "size-3.5" });
-        return _jsx(ConnectIcon, { className: "size-3.5" });
+            return _jsx(RefreshIcon, { className: "stg:size-3.5" });
+        return _jsx(ConnectIcon, { className: "stg:size-3.5" });
     })();
     const statusText = (() => {
         if (authMode === "oauth" && isOAuthConnected) {
+            // Stranded takes precedence over token health: "tokens refresh
+            // automatically" reads as all-done while the Tools tab is empty.
+            if (isOAuthStranded)
+                return "Signed in \u2014 tools not discovered yet";
             const base = healthStatusText(connectionHealth, accessTokenExpiresAt, tokenLifetimeHint);
             return isOrgOAuthApp ? `${base} \u00B7 Using your OAuth app` : base;
         }
@@ -406,7 +449,7 @@ function ConnectBar({ isConnecting, connectionError, onConnect, onClearConnectio
     const showRemoveOrgAppLink = isOrgOAuthApp && !anyBusy && removeOrgAppPhase === "idle";
     // Inline disconnect confirmation replaces the main bar content
     if (disconnectPhase === "confirming" || disconnectPhase === "disconnecting") {
-        return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-2", children: [_jsx(WarningIcon, { className: "size-3.5 shrink-0 text-destructive" }), _jsxs("p", { className: "flex-1 text-xs text-foreground", children: ["Remove OAuth credentials for ", _jsx("span", { className: "font-medium", children: serverName }), "? You can reconnect at any time."] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [_jsxs("button", { type: "button", disabled: isDisconnecting, onClick: async () => {
+        return (_jsxs("div", { className: "stg:flex stg:flex-col", children: [_jsxs("div", { className: "stg:flex stg:items-center stg:gap-2 stg:px-3 stg:py-2", children: [_jsx(WarningIcon, { className: "stg:size-3.5 stg:shrink-0 stg:text-destructive" }), _jsxs("p", { className: "stg:flex-1 stg:text-xs stg:text-foreground", children: ["Remove OAuth credentials for ", _jsx("span", { className: "stg:font-medium", children: serverName }), "? You can reconnect at any time."] }), _jsxs("div", { className: "stg:flex stg:shrink-0 stg:items-center stg:gap-1.5", children: [_jsxs("button", { type: "button", disabled: isDisconnecting, onClick: async () => {
                                         setDisconnectPhase("disconnecting");
                                         try {
                                             await onDisconnect();
@@ -415,14 +458,14 @@ function ConnectBar({ isConnecting, connectionError, onConnect, onClearConnectio
                                         catch {
                                             setDisconnectPhase("confirming");
                                         }
-                                    }, className: cn("inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium", "bg-destructive text-destructive-foreground hover:bg-destructive-hover", "disabled:pointer-events-none disabled:opacity-50"), children: [isDisconnecting && _jsx(Spinner, {}), "Disconnect"] }), _jsx("button", { type: "button", disabled: isDisconnecting, onClick: () => {
+                                    }, className: cn("stg:inline-flex stg:items-center stg:gap-1 stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium", "stg:bg-destructive stg:text-destructive-foreground stg:hover:bg-destructive-hover", "stg:disabled:pointer-events-none stg:disabled:opacity-50"), children: [isDisconnecting && _jsx(Spinner, {}), "Disconnect"] }), _jsx("button", { type: "button", disabled: isDisconnecting, onClick: () => {
                                         setDisconnectPhase("idle");
                                         onClearDisconnectError();
-                                    }, className: cn("inline-flex items-center 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", "disabled:pointer-events-none disabled:opacity-50"), children: "Cancel" })] })] }), disconnectError && (_jsxs("div", { className: "flex items-start gap-2 border-t border-destructive/20 bg-destructive-subtle px-3 py-2", children: [_jsx(WarningIcon, { className: "mt-0.5 size-3.5 shrink-0 text-destructive" }), _jsx("p", { className: "flex-1 text-xs text-destructive", children: getUserMessage(disconnectError) }), _jsx("button", { type: "button", onClick: onClearDisconnectError, className: "shrink-0 text-xs text-destructive-muted hover:text-destructive", "aria-label": "Dismiss error", children: "Dismiss" })] }))] }));
+                                    }, className: cn("stg:inline-flex stg:items-center stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium", "stg:border stg:border-border stg:bg-background stg:text-foreground stg:hover:bg-accent stg:hover:text-accent-foreground", "stg:disabled:pointer-events-none stg:disabled:opacity-50"), children: "Cancel" })] })] }), disconnectError && (_jsxs("div", { className: "stg:flex stg:items-start stg:gap-2 stg:border-t stg:border-destructive/20 stg:bg-destructive-subtle stg:px-3 stg:py-2", children: [_jsx(WarningIcon, { className: "stg:mt-0.5 stg:size-3.5 stg:shrink-0 stg:text-destructive" }), _jsx("p", { className: "stg:flex-1 stg:text-xs stg:text-destructive", children: getUserMessage(disconnectError) }), _jsx("button", { type: "button", onClick: onClearDisconnectError, className: "stg:shrink-0 stg:text-xs stg:text-destructive-muted stg:hover:text-destructive", "aria-label": "Dismiss error", children: "Dismiss" })] }))] }));
     }
     // Inline "remove custom app" confirmation
     if (removeOrgAppPhase === "confirming" || removeOrgAppPhase === "removing") {
-        return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-2", children: [_jsx(WarningIcon, { className: "size-3.5 shrink-0 text-destructive" }), _jsxs("p", { className: "flex-1 text-xs text-foreground", children: ["Remove your custom OAuth app for", " ", _jsx("span", { className: "font-medium", children: serverName }), "? The server will revert to the platform's OAuth app."] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [_jsxs("button", { type: "button", disabled: isRemovingOrgApp, onClick: async () => {
+        return (_jsxs("div", { className: "stg:flex stg:flex-col", children: [_jsxs("div", { className: "stg:flex stg:items-center stg:gap-2 stg:px-3 stg:py-2", children: [_jsx(WarningIcon, { className: "stg:size-3.5 stg:shrink-0 stg:text-destructive" }), _jsxs("p", { className: "stg:flex-1 stg:text-xs stg:text-foreground", children: ["Remove your custom OAuth app for", " ", _jsx("span", { className: "stg:font-medium", children: serverName }), "? The server will revert to the platform's OAuth app."] }), _jsxs("div", { className: "stg:flex stg:shrink-0 stg:items-center stg:gap-1.5", children: [_jsxs("button", { type: "button", disabled: isRemovingOrgApp, onClick: async () => {
                                         setRemoveOrgAppPhase("removing");
                                         try {
                                             await onRemoveOrgApp();
@@ -431,20 +474,20 @@ function ConnectBar({ isConnecting, connectionError, onConnect, onClearConnectio
                                         catch {
                                             setRemoveOrgAppPhase("confirming");
                                         }
-                                    }, className: cn("inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium", "bg-destructive text-destructive-foreground hover:bg-destructive-hover", "disabled:pointer-events-none disabled:opacity-50"), children: [isRemovingOrgApp && _jsx(Spinner, {}), "Remove"] }), _jsx("button", { type: "button", disabled: isRemovingOrgApp, onClick: () => {
+                                    }, className: cn("stg:inline-flex stg:items-center stg:gap-1 stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium", "stg:bg-destructive stg:text-destructive-foreground stg:hover:bg-destructive-hover", "stg:disabled:pointer-events-none stg:disabled:opacity-50"), children: [isRemovingOrgApp && _jsx(Spinner, {}), "Remove"] }), _jsx("button", { type: "button", disabled: isRemovingOrgApp, onClick: () => {
                                         setRemoveOrgAppPhase("idle");
                                         onClearRemoveOrgAppError();
-                                    }, className: cn("inline-flex items-center 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", "disabled:pointer-events-none disabled:opacity-50"), children: "Cancel" })] })] }), removeOrgAppError && (_jsxs("div", { className: "flex items-start gap-2 border-t border-destructive/20 bg-destructive-subtle px-3 py-2", children: [_jsx(WarningIcon, { className: "mt-0.5 size-3.5 shrink-0 text-destructive" }), _jsx("p", { className: "flex-1 text-xs text-destructive", children: getUserMessage(removeOrgAppError) }), _jsx("button", { type: "button", onClick: onClearRemoveOrgAppError, className: "shrink-0 text-xs text-destructive-muted hover:text-destructive", "aria-label": "Dismiss error", children: "Dismiss" })] }))] }));
+                                    }, className: cn("stg:inline-flex stg:items-center stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium", "stg:border stg:border-border stg:bg-background stg:text-foreground stg:hover:bg-accent stg:hover:text-accent-foreground", "stg:disabled:pointer-events-none stg:disabled:opacity-50"), children: "Cancel" })] })] }), removeOrgAppError && (_jsxs("div", { className: "stg:flex stg:items-start stg:gap-2 stg:border-t stg:border-destructive/20 stg:bg-destructive-subtle stg:px-3 stg:py-2", children: [_jsx(WarningIcon, { className: "stg:mt-0.5 stg:size-3.5 stg:shrink-0 stg:text-destructive" }), _jsx("p", { className: "stg:flex-1 stg:text-xs stg:text-destructive", children: getUserMessage(removeOrgAppError) }), _jsx("button", { type: "button", onClick: onClearRemoveOrgAppError, className: "stg:shrink-0 stg:text-xs stg:text-destructive-muted stg:hover:text-destructive", "aria-label": "Dismiss error", children: "Dismiss" })] }))] }));
     }
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center justify-between px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [authMode === "oauth" && !manualOverride && (_jsxs("span", { className: cn("inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-medium", pill.pillClass), children: [_jsx("span", { className: cn("size-1.5 rounded-full", pill.dotClass), "aria-hidden": "true" }), pill.label] })), _jsx("span", { className: "text-xs text-muted-foreground", children: oauthSignInDisabled ? "OAuth sign-in is pending vendor approval" : statusText }), showDisconnectLink && (_jsx("button", { type: "button", onClick: () => setDisconnectPhase("confirming"), className: "text-[11px] text-muted-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground hover:decoration-foreground", children: "Disconnect" })), showRemoveOrgAppLink && (_jsx("button", { type: "button", onClick: () => setRemoveOrgAppPhase("confirming"), className: "text-[11px] text-muted-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground hover:decoration-foreground", children: "Remove custom app" }))] }), _jsxs("button", { type: "button", onClick: onConnect, disabled: anyBusy || credentialsLoading || oauthSignInDisabled, "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", showOAuthPrimary || needsReAuth
-                            ? "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"), children: [buttonIcon, buttonLabel] })] }), oauthPhase === "awaiting-callback" && (_jsx("div", { className: "flex items-center gap-3 border-t border-border px-3 py-1.5", children: _jsx("button", { type: "button", onClick: onCancelOAuth, className: "text-[11px] text-muted-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground hover:decoration-foreground", children: "Cancel sign-in" }) })), oauthSignInDisabled && (_jsxs("div", { className: "flex items-start gap-2 border-t border-amber-500/20 bg-amber-500/5 px-3 py-2", children: [_jsx(WarningIcon, { className: "mt-0.5 size-3.5 shrink-0 text-amber-600 dark:text-amber-400" }), _jsxs("div", { className: "flex-1 text-xs text-amber-700 dark:text-amber-300", children: [_jsxs("p", { children: ["The platform's OAuth app is awaiting vendor approval.", canBringOwnApp
+    return (_jsxs("div", { className: "stg:flex stg:flex-col", children: [_jsxs("div", { className: "stg:flex stg:items-center stg:justify-between stg:px-3 stg:py-2", children: [_jsxs("div", { className: "stg:flex stg:items-center stg:gap-2", children: [authMode === "oauth" && !manualOverride && (_jsxs("span", { className: cn("stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-full stg:px-2 stg:py-0.5 stg:text-[10px] stg:font-medium", pill.pillClass), children: [_jsx("span", { className: cn("stg:size-1.5 stg:rounded-full", pill.dotClass), "aria-hidden": "true" }), pill.label] })), _jsx("span", { className: "stg:text-xs stg:text-muted-foreground", children: oauthSignInDisabled ? "OAuth sign-in is pending vendor approval" : statusText }), showDisconnectLink && (_jsx("button", { type: "button", onClick: () => setDisconnectPhase("confirming"), className: "stg:text-[11px] stg:text-muted-foreground stg:underline stg:decoration-muted-foreground/40 stg:underline-offset-2 stg:hover:text-foreground stg:hover:decoration-foreground", children: "Disconnect" })), showRemoveOrgAppLink && (_jsx("button", { type: "button", onClick: () => setRemoveOrgAppPhase("confirming"), className: "stg:text-[11px] stg:text-muted-foreground stg:underline stg:decoration-muted-foreground/40 stg:underline-offset-2 stg:hover:text-foreground stg:hover:decoration-foreground", children: "Remove custom app" }))] }), _jsxs("button", { type: "button", onClick: onConnect, disabled: anyBusy || credentialsLoading || oauthSignInDisabled, "data-cursor-target": "connect-button", className: cn("stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium", showOAuthPrimary || needsReAuth
+                            ? "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover"
+                            : "stg:border stg:border-border stg:bg-background stg:text-foreground stg:hover:bg-accent stg:hover:text-accent-foreground", "stg:disabled:pointer-events-none stg:disabled:opacity-50"), children: [buttonIcon, buttonLabel] })] }), oauthPhase === "awaiting-callback" && (_jsx("div", { className: "stg:flex stg:items-center stg:gap-3 stg:border-t stg:border-border stg:px-3 stg:py-1.5", children: _jsx("button", { type: "button", onClick: onCancelOAuth, className: "stg:text-[11px] stg:text-muted-foreground stg:underline stg:decoration-muted-foreground/40 stg:underline-offset-2 stg:hover:text-foreground stg:hover:decoration-foreground", children: "Cancel sign-in" }) })), oauthSignInDisabled && (_jsxs("div", { className: "stg:flex stg:items-start stg:gap-2 stg:border-t stg:border-amber-500/20 stg:bg-amber-500/5 stg:px-3 stg:py-2", children: [_jsx(WarningIcon, { className: "stg:mt-0.5 stg:size-3.5 stg:shrink-0 stg:text-amber-600 stg:dark:text-amber-400" }), _jsxs("div", { className: "stg:flex-1 stg:text-xs stg:text-amber-700 stg:dark:text-amber-300", children: [_jsxs("p", { children: ["The platform's OAuth app is awaiting vendor approval.", canBringOwnApp
                                         ? " You can use your own OAuth app or enter a token manually."
-                                        : " You can still connect by entering your own token manually."] }), canBringOwnApp && (_jsx("button", { type: "button", onClick: onBringOwnApp, "data-cursor-target": "byoa-cta-button", className: "mt-1.5 inline-flex items-center gap-1 rounded-md bg-amber-600 px-2.5 py-1 text-[11px] font-medium text-white hover:bg-amber-700 dark:bg-amber-500 dark:text-amber-950 dark:hover:bg-amber-400", children: "Use your own OAuth app" })), vendorApprovalDocsUrl && !canBringOwnApp && (_jsxs("a", { href: vendorApprovalDocsUrl, target: "_blank", rel: "noopener noreferrer", className: "mt-1 inline-flex items-center gap-1 underline decoration-amber-600/40 underline-offset-2 hover:decoration-amber-600 dark:decoration-amber-400/40 dark:hover:decoration-amber-400", children: ["Learn how to bring your own token", _jsx(ExternalLinkIcon, { className: "size-3 shrink-0" })] }))] })] })), authMode === "oauth" && !isOAuthConnected && !isOAuthBusy && !isConnecting &&
-                (manualOverride || manualEntrySupported || canBringOwnApp) && (_jsx("div", { className: "flex items-center gap-3 border-t border-border px-3 py-1.5", children: manualOverride ? (_jsx("button", { type: "button", onClick: onBackToOAuth, className: "text-[11px] text-muted-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground hover:decoration-foreground", children: isVendorApprovalPending ? "Back to OAuth status" : "Sign in with OAuth instead" })) : (_jsxs(_Fragment, { children: [manualEntrySupported && (_jsx("button", { type: "button", onClick: onManualOverride, className: "text-[11px] text-muted-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground hover:decoration-foreground", children: "Enter token manually" })), canBringOwnApp && !isVendorApprovalBlocked && (_jsx("button", { type: "button", onClick: onBringOwnApp, className: "text-[11px] text-muted-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground hover:decoration-foreground", children: "Use your own OAuth app" }))] })) })), connectionError && (_jsxs("div", { className: "flex items-start gap-2 border-t border-destructive/20 bg-destructive-subtle px-3 py-2", role: "alert", children: [_jsx(WarningIcon, { className: "mt-0.5 size-3.5 shrink-0 text-destructive" }), _jsx("p", { className: "flex-1 text-xs text-destructive", children: getUserMessage(connectionError) }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [isRetryableError(connectionError) && (_jsx("button", { type: "button", onClick: () => {
+                                        : " You can still connect by entering your own token manually."] }), canBringOwnApp && (_jsx("button", { type: "button", onClick: onBringOwnApp, "data-cursor-target": "byoa-cta-button", className: "stg:mt-1.5 stg:inline-flex stg:items-center stg:gap-1 stg:rounded-md stg:bg-amber-600 stg:px-2.5 stg:py-1 stg:text-[11px] stg:font-medium stg:text-white stg:hover:bg-amber-700 stg:dark:bg-amber-500 stg:dark:text-amber-950 stg:dark:hover:bg-amber-400", children: "Use your own OAuth app" })), vendorApprovalDocsUrl && !canBringOwnApp && (_jsxs("a", { href: vendorApprovalDocsUrl, target: "_blank", rel: "noopener noreferrer", className: "stg:mt-1 stg:inline-flex stg:items-center stg:gap-1 stg:underline stg:decoration-amber-600/40 stg:underline-offset-2 stg:hover:decoration-amber-600 stg:dark:decoration-amber-400/40 stg:dark:hover:decoration-amber-400", children: ["Learn how to bring your own token", _jsx(ExternalLinkIcon, { className: "stg:size-3 stg:shrink-0" })] }))] })] })), authMode === "oauth" && !isOAuthConnected && !isOAuthBusy && !isConnecting &&
+                (manualOverride || manualEntrySupported || canBringOwnApp) && (_jsx("div", { className: "stg:flex stg:items-center stg:gap-3 stg:border-t stg:border-border stg:px-3 stg:py-1.5", children: manualOverride ? (_jsx("button", { type: "button", onClick: onBackToOAuth, className: "stg:text-[11px] stg:text-muted-foreground stg:underline stg:decoration-muted-foreground/40 stg:underline-offset-2 stg:hover:text-foreground stg:hover:decoration-foreground", children: isVendorApprovalPending ? "Back to OAuth status" : "Sign in with OAuth instead" })) : (_jsxs(_Fragment, { children: [manualEntrySupported && (_jsx("button", { type: "button", onClick: onManualOverride, className: "stg:text-[11px] stg:text-muted-foreground stg:underline stg:decoration-muted-foreground/40 stg:underline-offset-2 stg:hover:text-foreground stg:hover:decoration-foreground", children: "Enter token manually" })), canBringOwnApp && !isVendorApprovalBlocked && (_jsx("button", { type: "button", onClick: onBringOwnApp, className: "stg:text-[11px] stg:text-muted-foreground stg:underline stg:decoration-muted-foreground/40 stg:underline-offset-2 stg:hover:text-foreground stg:hover:decoration-foreground", children: "Use your own OAuth app" }))] })) })), connectionError && (_jsxs("div", { className: "stg:flex stg:items-start stg:gap-2 stg:border-t stg:border-destructive/20 stg:bg-destructive-subtle stg:px-3 stg:py-2", role: "alert", children: [_jsx(WarningIcon, { className: "stg:mt-0.5 stg:size-3.5 stg:shrink-0 stg:text-destructive" }), _jsx("p", { className: "stg:flex-1 stg:text-xs stg:text-destructive", children: connectionErrorMessage ?? getUserMessage(connectionError) }), _jsxs("div", { className: "stg:flex stg:shrink-0 stg:items-center stg:gap-2", children: [isRetryableError(connectionError) && (_jsx("button", { type: "button", onClick: () => {
                                     onClearConnectionError();
                                     onConnect();
-                                }, className: "text-xs font-medium text-destructive underline underline-offset-2 hover:no-underline", children: "Try again" })), _jsx("button", { type: "button", onClick: onClearConnectionError, className: "text-xs text-destructive-muted hover:text-destructive", "aria-label": "Dismiss error", children: "Dismiss" })] })] }))] }));
+                                }, className: "stg:text-xs stg:font-medium stg:text-destructive stg:underline stg:underline-offset-2 stg:hover:no-underline", children: "Try again" })), _jsx("button", { type: "button", onClick: onClearConnectionError, className: "stg:text-xs stg:text-destructive-muted stg:hover:text-destructive", "aria-label": "Dismiss error", children: "Dismiss" })] })] }))] }));
 }
 function oauthPhaseLabel(phase) {
     switch (phase) {
@@ -482,14 +525,14 @@ function formatTokenExpiry(expiresAtSeconds) {
 // Internal section components
 // ---------------------------------------------------------------------------
 function ValidationBanner({ message }) {
-    return (_jsxs("div", { role: "alert", className: "flex items-start gap-2.5 rounded-lg border border-destructive/30 bg-destructive-subtle px-4 py-3", children: [_jsx(WarningIcon, { className: "mt-0.5 size-4 shrink-0 text-destructive" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-sm font-medium text-destructive", children: "Invalid Configuration" }), _jsx("p", { className: "mt-0.5 text-xs text-destructive-muted", children: message })] })] }));
+    return (_jsxs("div", { role: "alert", className: "stg:flex stg:items-start stg:gap-2.5 stg:rounded-lg stg:border stg:border-destructive/30 stg:bg-destructive-subtle stg:px-4 stg:py-3", children: [_jsx(WarningIcon, { className: "stg:mt-0.5 stg:size-4 stg:shrink-0 stg:text-destructive" }), _jsxs("div", { className: "stg:min-w-0 stg:flex-1", children: [_jsx("p", { className: "stg:text-sm stg:font-medium stg:text-destructive", children: "Invalid Configuration" }), _jsx("p", { className: "stg:mt-0.5 stg:text-xs stg:text-destructive-muted", children: message })] })] }));
 }
 function ValidationStateBadge({ state, }) {
     switch (state) {
         case ValidationState.valid:
-            return (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsxs("span", { className: "inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400", children: [_jsx(CheckIcon, { className: "size-3" }), "Valid"] })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsxs("span", { className: "stg:inline-flex stg:items-center stg:gap-1 stg:text-emerald-600 stg:dark:text-emerald-400", children: [_jsx(CheckIcon, { className: "stg:size-3" }), "Valid"] })] }));
         case ValidationState.invalid:
-            return (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsx("span", { className: "text-destructive", children: "Invalid" })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsx("span", { className: "stg:text-destructive", children: "Invalid" })] }));
         default:
             return null;
     }
@@ -562,29 +605,29 @@ function ServerConfigSection({ serverType, editable, isSaving, saveMcpField, })
             queryParams: Object.keys(queryParams).length > 0 ? queryParams : undefined,
         });
     }, [saveMcpField, currentHttpConfig]);
-    return (_jsxs(Section, { title: "Server Configuration", children: [_jsxs("div", { className: "flex flex-col gap-2 p-3", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Type" }), editable && saveMcpField ? (_jsx(InlineEditSelect, { value: serverType?.case ?? "http", options: TRANSPORT_OPTIONS, onSave: handleTransportChange, isSaving: isSaving })) : (_jsx("span", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-xs font-medium text-foreground", children: serverType?.case ?? "none" }))] }), serverType?.case === "stdio" && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Command" }), editable && saveMcpField ? (_jsx(InlineEditText, { value: `${serverType.value.command}${serverType.value.args.length > 0 ? ` ${serverType.value.args.join(" ")}` : ""}`, onSave: async (v) => {
+    return (_jsxs(Section, { title: "Server Configuration", children: [_jsxs("div", { className: "stg:flex stg:flex-col stg:gap-2 stg:p-3", children: [_jsxs("div", { className: "stg:flex stg:items-baseline stg:gap-2", children: [_jsx("span", { className: "stg:text-xs stg:font-medium stg:text-muted-foreground", children: "Type" }), editable && saveMcpField ? (_jsx(InlineEditSelect, { value: serverType?.case ?? "http", options: TRANSPORT_OPTIONS, onSave: handleTransportChange, isSaving: isSaving })) : (_jsx("span", { className: "stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono stg:text-xs stg:font-medium stg:text-foreground", children: serverType?.case ?? "none" }))] }), serverType?.case === "stdio" && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "stg:flex stg:items-baseline stg:gap-2", children: [_jsx("span", { className: "stg:text-xs stg:font-medium stg:text-muted-foreground", children: "Command" }), editable && saveMcpField ? (_jsx(InlineEditText, { value: `${serverType.value.command}${serverType.value.args.length > 0 ? ` ${serverType.value.args.join(" ")}` : ""}`, onSave: async (v) => {
                                             const parts = v.trim().split(/\s+/);
                                             return saveMcpField("stdio", {
                                                 command: parts[0] || "",
                                                 args: parts.slice(1),
                                             });
-                                        }, isSaving: isSaving, placeholder: "e.g. npx -y @modelcontextprotocol/server" })) : (_jsxs("code", { className: "font-mono text-sm text-foreground", children: [serverType.value.command, serverType.value.args.length > 0 &&
-                                                ` ${serverType.value.args.join(" ")}`] }))] }), (editable || serverType.value.workingDir) && (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Working Dir" }), editable && saveMcpField ? (_jsx(InlineEditText, { value: serverType.value.workingDir ?? "", onSave: async (v) => saveMcpField("stdio", {
+                                        }, isSaving: isSaving, placeholder: "e.g. npx -y @modelcontextprotocol/server" })) : (_jsxs("code", { className: "stg:font-mono stg:text-sm stg:text-foreground", children: [serverType.value.command, serverType.value.args.length > 0 &&
+                                                ` ${serverType.value.args.join(" ")}`] }))] }), (editable || serverType.value.workingDir) && (_jsxs("div", { className: "stg:flex stg:items-baseline stg:gap-2", children: [_jsx("span", { className: "stg:text-xs stg:font-medium stg:text-muted-foreground", children: "Working Dir" }), editable && saveMcpField ? (_jsx(InlineEditText, { value: serverType.value.workingDir ?? "", onSave: async (v) => saveMcpField("stdio", {
                                             command: serverType.value.command,
                                             args: [...serverType.value.args],
                                             workingDir: v || undefined,
-                                        }), isSaving: isSaving, placeholder: "/path/to/working/dir" })) : (_jsx("code", { className: "font-mono text-xs text-foreground", children: serverType.value.workingDir }))] }))] })), serverType?.case === "http" && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "URL" }), editable && saveMcpField ? (_jsx(InlineEditText, { value: serverType.value.url, onSave: async (v) => saveMcpField("http", { ...currentHttpConfig, url: v }), isSaving: isSaving, placeholder: "https://example.com/mcp" })) : (_jsx("code", { className: "break-all font-mono text-sm text-foreground", children: serverType.value.url }))] }), (editable || serverType.value.timeoutSeconds > 0) && (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Timeout" }), editable && saveMcpField ? (_jsx(InlineEditText, { value: serverType.value.timeoutSeconds > 0 ? String(serverType.value.timeoutSeconds) : "", onSave: async (v) => saveMcpField("http", {
+                                        }), isSaving: isSaving, placeholder: "/path/to/working/dir" })) : (_jsx("code", { className: "stg:font-mono stg:text-xs stg:text-foreground", children: serverType.value.workingDir }))] }))] })), serverType?.case === "http" && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "stg:flex stg:items-baseline stg:gap-2", children: [_jsx("span", { className: "stg:text-xs stg:font-medium stg:text-muted-foreground", children: "URL" }), editable && saveMcpField ? (_jsx(InlineEditText, { value: serverType.value.url, onSave: async (v) => saveMcpField("http", { ...currentHttpConfig, url: v }), isSaving: isSaving, placeholder: "https://example.com/mcp" })) : (_jsx("code", { className: "stg:break-all stg:font-mono stg:text-sm stg:text-foreground", children: serverType.value.url }))] }), (editable || serverType.value.timeoutSeconds > 0) && (_jsxs("div", { className: "stg:flex stg:items-baseline stg:gap-2", children: [_jsx("span", { className: "stg:text-xs stg:font-medium stg:text-muted-foreground", children: "Timeout" }), editable && saveMcpField ? (_jsx(InlineEditText, { value: serverType.value.timeoutSeconds > 0 ? String(serverType.value.timeoutSeconds) : "", onSave: async (v) => saveMcpField("http", {
                                             ...currentHttpConfig,
                                             timeoutSeconds: v ? Number(v) : undefined,
                                         }), isSaving: isSaving, placeholder: "30", validate: (v) => {
                                             if (v && (isNaN(Number(v)) || Number(v) < 0))
                                                 return "Must be a positive number";
                                             return null;
-                                        } })) : (_jsxs("span", { className: "text-xs text-foreground", children: [serverType.value.timeoutSeconds, "s"] }))] }))] }))] }), serverType?.case === "http" && (editable || headerRows.length > 0) && (_jsx(HttpKeyValueSubsection, { title: "Headers", count: headerRows.length, rows: headerRows, editable: editable, isSaving: isSaving, editing: headersEditing, onEditingChange: setHeadersEditing, onSave: handleHeadersSave, keyLabel: "Header name" })), serverType?.case === "http" && (editable || queryParamRows.length > 0) && (_jsx(HttpKeyValueSubsection, { title: "Query Parameters", count: queryParamRows.length, rows: queryParamRows, editable: editable, isSaving: isSaving, editing: queryParamsEditing, onEditingChange: setQueryParamsEditing, onSave: handleQueryParamsSave, keyLabel: "Parameter name" }))] }));
+                                        } })) : (_jsxs("span", { className: "stg:text-xs stg:text-foreground", children: [serverType.value.timeoutSeconds, "s"] }))] }))] }))] }), serverType?.case === "http" && (editable || headerRows.length > 0) && (_jsx(HttpKeyValueSubsection, { title: "Headers", count: headerRows.length, rows: headerRows, editable: editable, isSaving: isSaving, editing: headersEditing, onEditingChange: setHeadersEditing, onSave: handleHeadersSave, keyLabel: "Header name" })), serverType?.case === "http" && (editable || queryParamRows.length > 0) && (_jsx(HttpKeyValueSubsection, { title: "Query Parameters", count: queryParamRows.length, rows: queryParamRows, editable: editable, isSaving: isSaving, editing: queryParamsEditing, onEditingChange: setQueryParamsEditing, onSave: handleQueryParamsSave, keyLabel: "Parameter name" }))] }));
 }
 /** Renders a key-value subsection (headers or query params) within ServerConfigSection. */
 function HttpKeyValueSubsection({ title, count, rows, editable, isSaving, editing, onEditingChange, onSave, keyLabel, }) {
-    return (_jsxs("div", { className: "border-t border-border", children: [_jsxs("div", { className: "flex items-center justify-between px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: title }), count > 0 && (_jsx("span", { className: "inline-flex min-w-[1.25rem] items-center justify-center rounded-full bg-muted px-1 py-px text-[10px] font-medium leading-none text-muted-foreground", children: count }))] }), editable && (_jsx("button", { type: "button", onClick: () => onEditingChange(!editing), className: "text-[11px] text-muted-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground hover:decoration-foreground", children: editing ? "Done" : "Edit" }))] }), editable && editing ? (_jsx(InlineEditKeyValue, { value: [...rows], onSave: onSave, isSaving: isSaving, editing: editing, onEditingChange: onEditingChange, keyLabel: keyLabel, showValue: true, valueLabel: "Value" })) : (_jsx("div", { className: "flex flex-col divide-y divide-border", children: rows.map((row) => (_jsxs("div", { className: "flex items-start gap-2 px-3 py-1.5", children: [_jsx("code", { className: "shrink-0 font-mono text-xs font-medium text-foreground", children: row.key }), _jsx("span", { className: "min-w-0 break-all font-mono text-xs text-muted-foreground", children: renderHeaderValue(row.value) })] }, row.key))) }))] }));
+    return (_jsxs("div", { className: "stg:border-t stg:border-border", children: [_jsxs("div", { className: "stg:flex stg:items-center stg:justify-between stg:px-3 stg:py-2", children: [_jsxs("div", { className: "stg:flex stg:items-center stg:gap-1.5", children: [_jsx("span", { className: "stg:text-xs stg:font-medium stg:text-muted-foreground", children: title }), count > 0 && (_jsx("span", { className: "stg:inline-flex stg:min-w-[1.25rem] stg:items-center stg:justify-center stg:rounded-full stg:bg-muted stg:px-1 stg:py-px stg:text-[10px] stg:font-medium stg:leading-none stg:text-muted-foreground", children: count }))] }), editable && (_jsx("button", { type: "button", onClick: () => onEditingChange(!editing), className: "stg:text-[11px] stg:text-muted-foreground stg:underline stg:decoration-muted-foreground/40 stg:underline-offset-2 stg:hover:text-foreground stg:hover:decoration-foreground", children: editing ? "Done" : "Edit" }))] }), editable && editing ? (_jsx(InlineEditKeyValue, { value: [...rows], onSave: onSave, isSaving: isSaving, editing: editing, onEditingChange: onEditingChange, keyLabel: keyLabel, showValue: true, valueLabel: "Value" })) : (_jsx("div", { className: "stg:flex stg:flex-col stg:divide-y stg:divide-border", children: rows.map((row) => (_jsxs("div", { className: "stg:flex stg:items-start stg:gap-2 stg:px-3 stg:py-1.5", children: [_jsx("code", { className: "stg:shrink-0 stg:font-mono stg:text-xs stg:font-medium stg:text-foreground", children: row.key }), _jsx("span", { className: "stg:min-w-0 stg:break-all stg:font-mono stg:text-xs stg:text-muted-foreground", children: renderHeaderValue(row.value) })] }, row.key))) }))] }));
 }
 const ENV_VAR_PLACEHOLDER = /\$\{([^}]+)\}/g;
 /** Renders a header value, highlighting ${VAR} placeholders with a variable badge. */
@@ -599,7 +642,7 @@ function renderHeaderValue(value) {
         if (match.index > lastIndex) {
             parts.push(value.slice(lastIndex, match.index));
         }
-        parts.push(_jsx("span", { className: "inline-flex items-center gap-0.5 rounded bg-primary-subtle px-1 py-px text-[10px] font-medium text-primary", title: `Resolved from environment variable: ${match[1]}`, children: match[0] }, match.index));
+        parts.push(_jsx("span", { className: "stg:inline-flex stg:items-center stg:gap-0.5 stg:rounded stg:bg-primary-subtle stg:px-1 stg:py-px stg:text-[10px] stg:font-medium stg:text-primary", title: `Resolved from environment variable: ${match[1]}`, children: match[0] }, match.index));
         lastIndex = match.index + match[0].length;
     }
     if (lastIndex < value.length) {
@@ -608,12 +651,12 @@ function renderHeaderValue(value) {
     return _jsx(_Fragment, { children: parts });
 }
 function SourceSection({ spec, }) {
-    return (_jsx(Section, { title: "Source", children: _jsxs("div", { className: "flex flex-col gap-2 p-3", children: [spec.repositoryUrl && (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "shrink-0 text-xs font-medium text-muted-foreground", children: "Repository" }), _jsxs("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", children: [spec.repositoryUrl, _jsx(ExternalLinkIcon, { className: "size-3 shrink-0" })] })] })), spec.githubStars > 0 && (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "shrink-0 text-xs font-medium text-muted-foreground", children: "Stars" }), _jsx("span", { className: "text-xs text-foreground", children: spec.githubStars.toLocaleString() })] }))] }) }));
+    return (_jsx(Section, { title: "Source", children: _jsxs("div", { className: "stg:flex stg:flex-col stg:gap-2 stg:p-3", children: [spec.repositoryUrl && (_jsxs("div", { className: "stg:flex stg:items-baseline stg:gap-2", children: [_jsx("span", { className: "stg:shrink-0 stg:text-xs stg:font-medium stg:text-muted-foreground", children: "Repository" }), _jsxs("a", { href: spec.repositoryUrl, target: "_blank", rel: "noopener noreferrer", className: "stg:inline-flex stg:items-center stg:gap-1 stg:break-all stg:font-mono stg:text-xs stg:text-foreground stg:underline stg:decoration-muted-foreground/40 stg:underline-offset-2 stg:hover:decoration-foreground", children: [spec.repositoryUrl, _jsx(ExternalLinkIcon, { className: "stg:size-3 stg:shrink-0" })] })] })), spec.githubStars > 0 && (_jsxs("div", { className: "stg:flex stg:items-baseline stg:gap-2", children: [_jsx("span", { className: "stg:shrink-0 stg:text-xs stg:font-medium stg:text-muted-foreground", children: "Stars" }), _jsx("span", { className: "stg:text-xs stg:text-foreground", children: spec.githubStars.toLocaleString() })] }))] }) }));
 }
 function ResourceTemplatesList({ templates, }) {
     if (templates.length === 0)
         return null;
-    return (_jsx("div", { className: "flex flex-col divide-y divide-border", children: templates.map((tpl) => (_jsxs("div", { className: "px-3 py-2.5", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-sm font-medium text-foreground", children: tpl.name }), _jsx("code", { className: "font-mono text-[10px] text-muted-foreground", children: tpl.uriTemplate })] }), tpl.description && (_jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: tpl.description }))] }, tpl.uriTemplate || tpl.name))) }));
+    return (_jsx("div", { className: "stg:flex stg:flex-col stg:divide-y stg:divide-border", children: templates.map((tpl) => (_jsxs("div", { className: "stg:px-3 stg:py-2.5", children: [_jsxs("div", { className: "stg:flex stg:items-baseline stg:gap-2", children: [_jsx("span", { className: "stg:text-sm stg:font-medium stg:text-foreground", children: tpl.name }), _jsx("code", { className: "stg:font-mono stg:text-[10px] stg:text-muted-foreground", children: tpl.uriTemplate })] }), tpl.description && (_jsx("p", { className: "stg:mt-0.5 stg:text-xs stg:text-muted-foreground", children: tpl.description }))] }, tpl.uriTemplate || tpl.name))) }));
 }
 function EnvSection({ data, oauthTargetEnvVar, editable, isSaving, saveMcpField, }) {
     const entries = Object.entries(data).sort(([a], [b]) => a.localeCompare(b));
@@ -640,9 +683,9 @@ function EnvSection({ data, oauthTargetEnvVar, editable, isSaving, saveMcpField,
         return saveMcpField("env", Object.keys(env).length > 0 ? env : undefined);
     }, [saveMcpField]);
     const [envEditing, setEnvEditing] = useState(false);
-    return (_jsx(Section, { title: "Environment Variables", count: entries.length, onEdit: editable ? () => setEnvEditing((v) => !v) : undefined, children: editable ? (_jsx(InlineEditKeyValue, { value: envRows, onSave: handleEnvSave, isSaving: isSaving, editing: envEditing, onEditingChange: setEnvEditing, showSecretToggle: true, showOptionalToggle: true, showDescription: true, keyLabel: "Variable name" })) : (_jsx("div", { className: "flex flex-col divide-y divide-border", children: entries.map(([name, env]) => {
+    return (_jsx(Section, { title: "Environment Variables", count: entries.length, onEdit: editable ? () => setEnvEditing((v) => !v) : undefined, children: editable ? (_jsx(InlineEditKeyValue, { value: envRows, onSave: handleEnvSave, isSaving: isSaving, editing: envEditing, onEditingChange: setEnvEditing, showSecretToggle: true, showOptionalToggle: true, showDescription: true, keyLabel: "Variable name" })) : (_jsx("div", { className: "stg:flex stg:flex-col stg:divide-y stg:divide-border", children: entries.map(([name, env]) => {
                 const isOAuthManaged = name === oauthTargetEnvVar;
-                return (_jsxs("div", { className: "flex items-start gap-3 px-3 py-2", children: [_jsx("code", { className: "shrink-0 font-mono text-sm font-medium text-foreground", children: name }), _jsx("span", { className: "shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground", children: env.isSecret ? "secret" : "config" }), isOAuthManaged && (_jsx("span", { className: "shrink-0 rounded bg-primary-subtle px-1.5 py-0.5 text-[10px] font-medium text-primary", children: "oauth" })), env.optional && (_jsx("span", { className: "shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground-subtle", children: "optional" })), env.description && (_jsx("span", { className: "text-xs text-muted-foreground", children: env.description }))] }, name));
+                return (_jsxs("div", { className: "stg:flex stg:items-start stg:gap-3 stg:px-3 stg:py-2", children: [_jsx("code", { className: "stg:shrink-0 stg:font-mono stg:text-sm stg:font-medium stg:text-foreground", children: name }), _jsx("span", { className: "stg:shrink-0 stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-muted-foreground", children: env.isSecret ? "secret" : "config" }), isOAuthManaged && (_jsx("span", { className: "stg:shrink-0 stg:rounded stg:bg-primary-subtle stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-primary", children: "oauth" })), env.optional && (_jsx("span", { className: "stg:shrink-0 stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-muted-foreground-subtle", children: "optional" })), env.description && (_jsx("span", { className: "stg:text-xs stg:text-muted-foreground", children: env.description }))] }, name));
             }) })) }));
 }
 function TagsSection({ tags, editable, isSaving, saveMcpField, }) {
@@ -656,12 +699,12 @@ function TagsSection({ tags, editable, isSaving, saveMcpField, }) {
         // a higher level if needed. For now, show read-only in edit mode.
         return false;
     }, [saveMcpField]);
-    return (_jsx(Section, { title: "Tags", count: tags.length, children: _jsxs("div", { className: "flex flex-wrap gap-1.5 p-3", children: [tags.map((tag) => (_jsx("span", { className: "rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium text-muted-foreground", children: tag }, tag))), editable && tags.length === 0 && (_jsx("p", { className: "text-xs text-muted-foreground italic", children: "No tags" }))] }) }));
+    return (_jsx(Section, { title: "Tags", count: tags.length, children: _jsxs("div", { className: "stg:flex stg:flex-wrap stg:gap-1.5 stg:p-3", children: [tags.map((tag) => (_jsx("span", { className: "stg:rounded-full stg:bg-muted stg:px-2.5 stg:py-0.5 stg:text-xs stg:font-medium stg:text-muted-foreground", children: tag }, tag))), editable && tags.length === 0 && (_jsx("p", { className: "stg:text-xs stg:text-muted-foreground stg:italic", children: "No tags" }))] }) }));
 }
 // ---------------------------------------------------------------------------
 // Capability tab contents (read-only)
 // ---------------------------------------------------------------------------
-function ToolsTabContent({ tools, }) {
+function ToolsTabContent({ tools, isOAuthStranded, onDiscover, isDiscovering, }) {
     const [search, setSearch] = useState("");
     const [expandedTool, setExpandedTool] = useState(null);
     const filtered = useMemo(() => {
@@ -672,17 +715,21 @@ function ToolsTabContent({ tools, }) {
             t.description?.toLowerCase().includes(q));
     }, [tools, search]);
     if (tools.length === 0) {
-        return (_jsxs("div", { className: "px-3 py-8 text-center", children: [_jsx(ConnectIcon, { className: "mx-auto mb-2 size-6 text-muted-foreground-faint" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Connect to this MCP server to discover its available tools." })] }));
+        // Two distinct empty states: "never connected" (informational) vs
+        // "signed in but discovery never landed" (stigmer/stigmer#229) — the
+        // latter must carry its own recovery action, because the user already
+        // did the thing the informational copy asks for.
+        return (_jsxs("div", { className: "stg:px-3 stg:py-8 stg:text-center", children: [_jsx(ConnectIcon, { className: "stg:mx-auto stg:mb-2 stg:size-6 stg:text-muted-foreground-faint" }), isOAuthStranded ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "stg:text-xs stg:text-muted-foreground", children: "Signed in, but tools haven't been discovered yet." }), _jsxs("button", { type: "button", onClick: onDiscover, disabled: isDiscovering, className: cn("stg:mt-3 stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium", "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover", "stg:disabled:pointer-events-none stg:disabled:opacity-50"), children: [isDiscovering && _jsx(Spinner, {}), isDiscovering ? "Discovering tools..." : "Discover tools"] })] })) : (_jsx("p", { className: "stg:text-xs stg:text-muted-foreground", children: "Connect to this MCP server to discover its available tools." }))] }));
     }
     const isFiltered = search.trim().length > 0;
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 pb-2", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx(SearchIcon, { className: "pointer-events-none absolute left-2 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx("input", { type: "text", value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search tools\u2026", "aria-label": "Search tools", className: "w-full rounded-md border border-border bg-background py-1.5 pl-7 pr-7 text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring" }), isFiltered && (_jsx("button", { type: "button", onClick: () => setSearch(""), "aria-label": "Clear search", className: "absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground", children: _jsx(CloseIcon, { className: "size-3" }) }))] }), _jsx("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: isFiltered ? `${filtered.length} of ${tools.length}` : tools.length })] }), filtered.length === 0 ? (_jsx("div", { className: "px-3 py-6 text-center", children: _jsxs("p", { className: "text-xs text-muted-foreground", children: ["No tools matching \u201C", search, "\u201D"] }) })) : (_jsx("div", { className: "max-h-96 overflow-y-auto", children: _jsx("div", { className: "flex flex-col divide-y divide-border", children: filtered.map((tool) => {
+    return (_jsxs("div", { className: "stg:flex stg:flex-col", children: [_jsxs("div", { className: "stg:flex stg:items-center stg:gap-2 stg:px-3 stg:pb-2", children: [_jsxs("div", { className: "stg:relative stg:flex-1", children: [_jsx(SearchIcon, { className: "stg:pointer-events-none stg:absolute stg:left-2 stg:top-1/2 stg:size-3.5 stg:-translate-y-1/2 stg:text-muted-foreground" }), _jsx("input", { type: "text", value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search tools\u2026", "aria-label": "Search tools", className: "stg:w-full stg:rounded-md stg:border stg:border-border stg:bg-background stg:py-1.5 stg:pl-7 stg:pr-7 stg:text-xs stg:text-foreground stg:placeholder:text-muted-foreground stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring" }), isFiltered && (_jsx("button", { type: "button", onClick: () => setSearch(""), "aria-label": "Clear search", className: "stg:absolute stg:right-2 stg:top-1/2 stg:-translate-y-1/2 stg:text-muted-foreground stg:hover:text-foreground", children: _jsx(CloseIcon, { className: "stg:size-3" }) }))] }), _jsx("span", { className: "stg:shrink-0 stg:text-[10px] stg:text-muted-foreground", children: isFiltered ? `${filtered.length} of ${tools.length}` : tools.length })] }), filtered.length === 0 ? (_jsx("div", { className: "stg:px-3 stg:py-6 stg:text-center", children: _jsxs("p", { className: "stg:text-xs stg:text-muted-foreground", children: ["No tools matching \u201C", search, "\u201D"] }) })) : (_jsx("div", { className: "stg:max-h-96 stg:overflow-y-auto", children: _jsx("div", { className: "stg:flex stg:flex-col stg:divide-y stg:divide-border", children: filtered.map((tool) => {
                         const isExpanded = expandedTool === tool.name;
                         const hasSchema = tool.inputSchema != null &&
                             Object.keys(tool.inputSchema).length > 0;
-                        return (_jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => setExpandedTool(isExpanded ? null : tool.name), className: "flex w-full items-start gap-2 px-3 py-2.5 text-left transition-colors hover:bg-muted-faint", "aria-expanded": isExpanded, children: [_jsx(ChevronIcon, { className: cn("mt-0.5 size-3 shrink-0 text-muted-foreground transition-transform", isExpanded && "rotate-90") }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("code", { className: "font-mono text-sm font-medium text-foreground", children: tool.name }), tool.description && (_jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: tool.description }))] }), hasSchema && (_jsx("span", { className: "mt-0.5 shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground", children: "schema" }))] }), isExpanded && hasSchema && (_jsx("div", { className: "border-t border-border bg-muted-faint px-3 py-2", children: _jsx("pre", { className: "max-h-64 overflow-auto whitespace-pre-wrap break-words rounded border border-border bg-background p-2 font-mono text-[11px] text-foreground", children: JSON.stringify(tool.inputSchema, null, 2) }) }))] }, tool.name));
+                        return (_jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => setExpandedTool(isExpanded ? null : tool.name), className: "stg:flex stg:w-full stg:items-start stg:gap-2 stg:px-3 stg:py-2.5 stg:text-left stg:transition-colors stg:hover:bg-muted-faint", "aria-expanded": isExpanded, children: [_jsx(ChevronIcon, { className: cn("stg:mt-0.5 stg:size-3 stg:shrink-0 stg:text-muted-foreground stg:transition-transform", isExpanded && "stg:rotate-90") }), _jsxs("div", { className: "stg:min-w-0 stg:flex-1", children: [_jsx("code", { className: "stg:font-mono stg:text-sm stg:font-medium stg:text-foreground", children: tool.name }), tool.description && (_jsx("p", { className: "stg:mt-0.5 stg:text-xs stg:text-muted-foreground", children: tool.description }))] }), hasSchema && (_jsx("span", { className: "stg:mt-0.5 stg:shrink-0 stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-muted-foreground", children: "schema" }))] }), isExpanded && hasSchema && (_jsx("div", { className: "stg:border-t stg:border-border stg:bg-muted-faint stg:px-3 stg:py-2", children: _jsx("pre", { className: "stg:max-h-64 stg:overflow-auto stg:whitespace-pre-wrap stg:break-words stg:rounded stg:border stg:border-border stg:bg-background stg:p-2 stg:font-mono stg:text-[11px] stg:text-foreground", children: JSON.stringify(tool.inputSchema, null, 2) }) }))] }, tool.name));
                     }) }) }))] }));
 }
-function PoliciesTabContent({ pinnedPolicies, classifiedPolicies, hasDiscoveredTools, }) {
+function PoliciesTabContent({ pinnedPolicies, classifiedPolicies, hasDiscoveredTools, isOAuthStranded, }) {
     const [search, setSearch] = useState("");
     const totalCount = pinnedPolicies.length + classifiedPolicies.length;
     const hasAnyPolicies = totalCount > 0;
@@ -703,29 +750,31 @@ function PoliciesTabContent({ pinnedPolicies, classifiedPolicies, hasDiscoveredT
     const filteredTotal = filteredPinned.length + filteredClassified.length;
     const isFiltered = search.trim().length > 0;
     if (!hasAnyPolicies) {
-        return (_jsxs("div", { className: "px-3 py-8 text-center", children: [_jsx(ShieldIcon, { className: "mx-auto mb-2 size-6 text-muted-foreground-faint" }), _jsx("p", { className: "text-xs text-muted-foreground", children: hasDiscoveredTools
+        return (_jsxs("div", { className: "stg:px-3 stg:py-8 stg:text-center", children: [_jsx(ShieldIcon, { className: "stg:mx-auto stg:mb-2 stg:size-6 stg:text-muted-foreground-faint" }), _jsx("p", { className: "stg:text-xs stg:text-muted-foreground", children: hasDiscoveredTools
                         ? "No approval policies yet. Reconnect to reclassify tools."
-                        : "Connect to discover tools and auto-classify approval policies." })] }));
+                        : isOAuthStranded
+                            ? "Signed in \u2014 discover tools to auto-classify approval policies."
+                            : "Connect to discover tools and auto-classify approval policies." })] }));
     }
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 pb-2", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx(SearchIcon, { className: "pointer-events-none absolute left-2 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx("input", { type: "text", value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search policies\u2026", "aria-label": "Search policies", className: "w-full rounded-md border border-border bg-background py-1.5 pl-7 pr-7 text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring" }), isFiltered && (_jsx("button", { type: "button", onClick: () => setSearch(""), "aria-label": "Clear search", className: "absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground", children: _jsx(CloseIcon, { className: "size-3" }) }))] }), _jsx("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: isFiltered ? `${filteredTotal} of ${totalCount}` : totalCount })] }), filteredTotal === 0 ? (_jsx("div", { className: "px-3 py-6 text-center", children: _jsxs("p", { className: "text-xs text-muted-foreground", children: ["No policies matching \u201C", search, "\u201D"] }) })) : (_jsxs("div", { className: "max-h-96 overflow-y-auto", children: [filteredPinned.length > 0 && (_jsx(PolicyGroup, { icon: _jsx(PinIcon, { className: "size-3.5" }), label: "Pinned", policies: filteredPinned })), filteredClassified.length > 0 && (_jsx(PolicyGroup, { icon: _jsx(SparklesIcon, { className: "size-3.5" }), label: "Auto-classified", policies: filteredClassified }))] }))] }));
+    return (_jsxs("div", { className: "stg:flex stg:flex-col", children: [_jsxs("div", { className: "stg:flex stg:items-center stg:gap-2 stg:px-3 stg:pb-2", children: [_jsxs("div", { className: "stg:relative stg:flex-1", children: [_jsx(SearchIcon, { className: "stg:pointer-events-none stg:absolute stg:left-2 stg:top-1/2 stg:size-3.5 stg:-translate-y-1/2 stg:text-muted-foreground" }), _jsx("input", { type: "text", value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search policies\u2026", "aria-label": "Search policies", className: "stg:w-full stg:rounded-md stg:border stg:border-border stg:bg-background stg:py-1.5 stg:pl-7 stg:pr-7 stg:text-xs stg:text-foreground stg:placeholder:text-muted-foreground stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring" }), isFiltered && (_jsx("button", { type: "button", onClick: () => setSearch(""), "aria-label": "Clear search", className: "stg:absolute stg:right-2 stg:top-1/2 stg:-translate-y-1/2 stg:text-muted-foreground stg:hover:text-foreground", children: _jsx(CloseIcon, { className: "stg:size-3" }) }))] }), _jsx("span", { className: "stg:shrink-0 stg:text-[10px] stg:text-muted-foreground", children: isFiltered ? `${filteredTotal} of ${totalCount}` : totalCount })] }), filteredTotal === 0 ? (_jsx("div", { className: "stg:px-3 stg:py-6 stg:text-center", children: _jsxs("p", { className: "stg:text-xs stg:text-muted-foreground", children: ["No policies matching \u201C", search, "\u201D"] }) })) : (_jsxs("div", { className: "stg:max-h-96 stg:overflow-y-auto", children: [filteredPinned.length > 0 && (_jsx(PolicyGroup, { icon: _jsx(PinIcon, { className: "stg:size-3.5" }), label: "Pinned", policies: filteredPinned })), filteredClassified.length > 0 && (_jsx(PolicyGroup, { icon: _jsx(SparklesIcon, { className: "stg:size-3.5" }), label: "Auto-classified", policies: filteredClassified }))] }))] }));
 }
 function PolicyGroup({ icon, label, policies, }) {
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-1.5 border-b border-border bg-muted-faint px-3 py-1.5", children: [_jsx("span", { className: "text-muted-foreground", children: icon }), _jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: label }), _jsxs("span", { className: "text-[10px] text-muted-foreground", children: ["(", policies.length, ")"] })] }), _jsx("div", { className: "flex flex-col divide-y divide-border", children: policies.map((policy) => (_jsxs("div", { className: "px-3 py-2.5", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("code", { className: "font-mono text-sm font-medium text-foreground", children: policy.toolName }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-600 dark:text-amber-400", children: [_jsx(ShieldIcon, { className: "size-2.5" }), "requires approval"] })] }), policy.message && (_jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: policy.message }))] }, policy.toolName))) })] }));
+    return (_jsxs("div", { className: "stg:flex stg:flex-col", children: [_jsxs("div", { className: "stg:flex stg:items-center stg:gap-1.5 stg:border-b stg:border-border stg:bg-muted-faint stg:px-3 stg:py-1.5", children: [_jsx("span", { className: "stg:text-muted-foreground", children: icon }), _jsx("span", { className: "stg:text-[10px] stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground", children: label }), _jsxs("span", { className: "stg:text-[10px] stg:text-muted-foreground", children: ["(", policies.length, ")"] })] }), _jsx("div", { className: "stg:flex stg:flex-col stg:divide-y stg:divide-border", children: policies.map((policy) => (_jsxs("div", { className: "stg:px-3 stg:py-2.5", children: [_jsxs("div", { className: "stg:flex stg:items-baseline stg:gap-2", children: [_jsx("code", { className: "stg:font-mono stg:text-sm stg:font-medium stg:text-foreground", children: policy.toolName }), _jsxs("span", { className: "stg:inline-flex stg:items-center stg:gap-1 stg:rounded stg:bg-amber-500/10 stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-amber-600 stg:dark:text-amber-400", children: [_jsx(ShieldIcon, { className: "stg:size-2.5" }), "requires approval"] })] }), policy.message && (_jsx("p", { className: "stg:mt-0.5 stg:text-xs stg:text-muted-foreground", children: policy.message }))] }, policy.toolName))) })] }));
 }
 // ---------------------------------------------------------------------------
 // Shared layout primitives
 // ---------------------------------------------------------------------------
 function Dot() {
-    return (_jsx("span", { className: "shrink-0", "aria-hidden": "true", children: "\u00B7" }));
+    return (_jsx("span", { className: "stg:shrink-0", "aria-hidden": "true", children: "\u00B7" }));
 }
 // ---------------------------------------------------------------------------
 // Non-happy states
 // ---------------------------------------------------------------------------
 function LoadingSkeleton({ className }) {
-    return (_jsxs("div", { className: cn("flex flex-col gap-6", className), "aria-busy": "true", "aria-label": "Loading MCP server details", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "mt-1 size-6 shrink-0 animate-pulse rounded bg-muted" }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx("div", { className: "h-5 w-48 animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-3 w-64 animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-4 w-full max-w-md animate-pulse rounded bg-muted" })] })] }), [24, 48, 16, 12].map((h, i) => (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-3 w-28 animate-pulse rounded bg-muted" }), _jsx("div", { className: "animate-pulse rounded-lg border border-border bg-muted-faint", style: { height: `${h * 4}px` } })] }, i)))] }));
+    return (_jsxs("div", { className: cn("stg:flex stg:flex-col stg:gap-6", className), "aria-busy": "true", "aria-label": "Loading MCP server details", children: [_jsxs("div", { className: "stg:flex stg:items-start stg:gap-3", children: [_jsx("div", { className: "stg:mt-1 stg:size-6 stg:shrink-0 stg:animate-pulse stg:rounded stg:bg-muted" }), _jsxs("div", { className: "stg:flex-1 stg:space-y-2", children: [_jsx("div", { className: "stg:h-5 stg:w-48 stg:animate-pulse stg:rounded stg:bg-muted" }), _jsx("div", { className: "stg:h-3 stg:w-64 stg:animate-pulse stg:rounded stg:bg-muted" }), _jsx("div", { className: "stg:h-4 stg:w-full stg:max-w-md stg:animate-pulse stg:rounded stg:bg-muted" })] })] }), [24, 48, 16, 12].map((h, i) => (_jsxs("div", { className: "stg:space-y-2", children: [_jsx("div", { className: "stg:h-3 stg:w-28 stg:animate-pulse stg:rounded stg:bg-muted" }), _jsx("div", { className: "stg:animate-pulse stg:rounded-lg stg:border stg:border-border stg:bg-muted-faint", style: { height: `${h * 4}px` } })] }, i)))] }));
 }
 function NotFoundState({ className }) {
-    return (_jsxs("div", { role: "status", className: cn("flex flex-col items-center gap-2 py-12 text-center", className), children: [_jsx(McpServerIcon, { className: "size-10 text-muted-foreground-faint" }), _jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "MCP Server not found" }), _jsx("p", { className: "text-xs text-muted-foreground-subtle", children: "This MCP server doesn't exist or you don't have access to it." })] }));
+    return (_jsxs("div", { role: "status", className: cn("stg:flex stg:flex-col stg:items-center stg:gap-2 stg:py-12 stg:text-center", className), children: [_jsx(McpServerIcon, { className: "stg:size-10 stg:text-muted-foreground-faint" }), _jsx("p", { className: "stg:text-sm stg:font-medium stg:text-muted-foreground", children: "MCP Server not found" }), _jsx("p", { className: "stg:text-xs stg:text-muted-foreground-subtle", children: "This MCP server doesn't exist or you don't have access to it." })] }));
 }
 // ---------------------------------------------------------------------------
 // Utilities
@@ -780,6 +829,6 @@ function ChevronIcon({ className }) {
     return (_jsx("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m6 4 4 4-4 4" }) }));
 }
 function Spinner() {
-    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", className: "animate-spin", "aria-hidden": "true", children: _jsx("path", { d: "M8 2a6 6 0 1 0 6 6" }) }));
+    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", className: "stg:animate-spin", "aria-hidden": "true", children: _jsx("path", { d: "M8 2a6 6 0 1 0 6 6" }) }));
 }
 //# sourceMappingURL=McpServerDetailView.js.map