@stigmer/react 0.4.8 → 0.5.1

package/mcp-server/McpServerDetailView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"McpServerDetailView.d.ts","sourceRoot":"","sources":["../../src/mcp-server/McpServerDetailView.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,qBAAqB,EAAE,MAAM,wDAAwD,CAAC;AAe/F,0DAA0D;AAC1D,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC;AAE/D,6CAA6C;AAC7C,MAAM,WAAW,wBAAwB;IACvC,kDAAkD;IAClD,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB;;;;;;;OAOG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACvE;;;;;OAKG;IACH,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjE,yDAAyD;IACzD,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IACvC;;;;OAIG;IACH,QAAQ,CAAC,oBAAoB,CAAC,EAAE,aAAa,CAAC;IAC9C;;;;;;OAMG;IACH,QAAQ,CAAC,yBAAyB,CAAC,EAAE,OAAO,CAAC;IAC7C;;;;;OAKG;IACH,QAAQ,CAAC,oBAAoB,CAAC,EAAE,CAC9B,GAAG,EAAE,MAAM,KACR,OAAO,cAAc,EAAE,WAAW,GAAG,SAAS,CAAC;IACpD;;;;;OAKG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,qDAAqD;IACrD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,IAAI,EACJ,cAAc,EACd,kBAAkB,EAClB,mBAAmB,EACnB,oBAA8B,EAC9B,yBAAiC,EACjC,oBAAoB,EACpB,SAAS,EACT,SAAS,GACV,EAAE,wBAAwB,2CA8U1B"}
+{"version":3,"file":"McpServerDetailView.d.ts","sourceRoot":"","sources":["../../src/mcp-server/McpServerDetailView.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wDAAwD,CAAC;AASxF,OAAO,EAAE,qBAAqB,EAAE,MAAM,wDAAwD,CAAC;AAkB/F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAQ7D,0DAA0D;AAC1D,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC;AAE/D,6CAA6C;AAC7C,MAAM,WAAW,wBAAwB;IACvC,kDAAkD;IAClD,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB;;;;;;;OAOG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACvE;;;;;OAKG;IACH,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjE,yDAAyD;IACzD,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IACvC;;;;OAIG;IACH,QAAQ,CAAC,oBAAoB,CAAC,EAAE,aAAa,CAAC;IAC9C;;;;;;OAMG;IACH,QAAQ,CAAC,yBAAyB,CAAC,EAAE,OAAO,CAAC;IAC7C;;;;;OAKG;IACH,QAAQ,CAAC,oBAAoB,CAAC,EAAE,CAC9B,GAAG,EAAE,MAAM,KACR,OAAO,cAAc,EAAE,WAAW,GAAG,SAAS,CAAC;IACpD;;;;;OAKG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,YAAY,CAAC;IACtC;;OAEG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IAC3C;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAC;IACzD,qDAAqD;IACrD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,IAAI,EACJ,cAAc,EACd,kBAAkB,EAClB,mBAAmB,EACnB,oBAA8B,EAC9B,yBAAiC,EACjC,oBAAoB,EACpB,SAAS,EACT,aAAa,EACb,OAAO,EACP,QAAgB,EAChB,iBAAiB,EACjB,SAAS,GACV,EAAE,wBAAwB,2CAuY1B"}

package/mcp-server/McpServerDetailView.js

@@ -8,6 +8,8 @@ import { OAuthConnectionHealth } from "@stigmer/protos/ai/stigmer/agentic/mcpser
 import { ValidationState } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/status_pb";
 import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
 import { useMcpServer } from "./useMcpServer";
+import { useUpdateMcpServer } from "./useUpdateMcpServer";
+import { mcpServerToInput } from "./internal/mcpServerToInput";
 import { useMcpServerConnect } from "./useMcpServerConnect";
 import { useMcpServerCredentials } from "./useMcpServerCredentials";
 import { useMcpServerOAuthConnect } from "./useMcpServerOAuthConnect";
@@ -17,7 +19,14 @@ import { OAuthAppForm } from "./OAuthAppForm";
 import { ErrorMessage } from "../error/ErrorMessage";
 import { EnvVarForm } from "../environment/EnvVarForm";
 import { VisibilityToggle } from "../library/VisibilityToggle";
-import { Tabs } from "../internal/Tabs";
+import { Tabs } from "../tabs/Tabs";
+import { ResourceActionBar } from "../resource-detail/ResourceActionBar";
+import { Section } from "../resource-detail/Section";
+import { InlineEditText } from "../inline-edit/InlineEditText";
+import { InlineEditTextarea } from "../inline-edit/InlineEditTextarea";
+import { InlineEditImage } from "../inline-edit/InlineEditImage";
+import { InlineEditSelect } from "../inline-edit/InlineEditSelect";
+import { InlineEditKeyValue } from "../inline-edit/InlineEditKeyValue";
 /**
  * Detail view for an MCP Server integration.
  *
@@ -42,8 +51,24 @@ import { Tabs } from "../internal/Tabs";
  * <McpServerDetailView org="acme" slug="github" />
  * ```
  */
-export function McpServerDetailView({ org, slug, onResourceLoad, onVisibilityChange, isVisibilityPending, defaultCapabilityTab = "tools", defaultShowCredentialForm = false, credentialPoolValues, activeOrg, className, }) {
+export function McpServerDetailView({ org, slug, onResourceLoad, onVisibilityChange, isVisibilityPending, defaultCapabilityTab = "tools", defaultShowCredentialForm = false, credentialPoolValues, activeOrg, primaryAction, actions, editable = false, onResourceUpdated, className, }) {
     const { mcpServer, isLoading, error, refetch } = useMcpServer(org, slug);
+    const { update: updateMcpServer, isUpdating } = useUpdateMcpServer();
+    const saveMcpField = useCallback(async (field, value) => {
+        if (!mcpServer)
+            return false;
+        const input = mcpServerToInput(mcpServer);
+        input[field] = value;
+        try {
+            const updated = await updateMcpServer(input);
+            onResourceUpdated?.(updated);
+            refetch();
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }, [mcpServer, updateMcpServer, onResourceUpdated, refetch]);
     const credentials = useMcpServerCredentials(activeOrg ?? org, mcpServer ?? null);
     const connection = useMcpServerConnect();
     const oauth = useMcpServerOAuthConnect();
@@ -101,21 +126,16 @@ export function McpServerDetailView({ org, slug, onResourceLoad, onVisibilityCha
                 await credentials.saveCredentials(values);
                 credentials.refetch();
             }
-            setShowCredentialForm(false);
             if (mcpServer?.metadata?.id) {
                 const envKeys = Object.keys(mcpServer.spec?.env ?? {});
                 const connectOrg = activeOrg ?? org;
-                if (options.saveForFuture) {
-                    await connection.connect(mcpServer.metadata.id, connectOrg, undefined, envKeys);
-                }
-                else {
-                    await connection.connect(mcpServer.metadata.id, connectOrg, values, envKeys);
-                }
+                await connection.connect(mcpServer.metadata.id, connectOrg, values, envKeys);
                 refetch();
             }
+            setShowCredentialForm(false);
         }
         catch {
-            // error state is managed by the hooks
+            // error state is managed by the hooks — form stays open for retry
         }
     }, [credentials, mcpServer, connection, refetch]);
     const handleDisconnect = useCallback(async () => {
@@ -197,9 +217,9 @@ export function McpServerDetailView({ org, slug, onResourceLoad, onVisibilityCha
     if (!mcpServer)
         return _jsx(NotFoundState, { className: className });
     return (_jsxs("div", { className: cn("flex flex-col gap-6", className), children: [status?.validationState === ValidationState.invalid &&
-                status.validationMessage && (_jsx(ValidationBanner, { message: status.validationMessage })), _jsx(Header, { server: mcpServer, createdAt: specAudit?.createdAt ? timestampDate(specAudit.createdAt) : null, updatedAt: specAudit?.updatedAt ? timestampDate(specAudit.updatedAt) : null, lastDiscoveredAt: capabilities?.lastDiscoveredAt
-                    ? timestampDate(capabilities.lastDiscoveredAt)
-                    : null, onVisibilityChange: onVisibilityChange, isVisibilityPending: isVisibilityPending }), hasSource && _jsx(SourceSection, { spec: spec }), spec?.serverType.case && (_jsx(ServerConfigSection, { serverType: spec.serverType })), spec?.env && Object.keys(spec.env).length > 0 && (_jsx(EnvSection, { data: spec.env, oauthTargetEnvVar: credentials.oauthTargetEnvVar })), _jsxs(Section, { title: "Connection", children: [_jsx(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, 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: () => {
+                status.validationMessage && (_jsx(ValidationBanner, { message: status.validationMessage })), _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsx(Header, { server: mcpServer, createdAt: specAudit?.createdAt ? timestampDate(specAudit.createdAt) : null, updatedAt: specAudit?.updatedAt ? timestampDate(specAudit.updatedAt) : null, lastDiscoveredAt: capabilities?.lastDiscoveredAt
+                            ? timestampDate(capabilities.lastDiscoveredAt)
+                            : null, onVisibilityChange: onVisibilityChange, isVisibilityPending: isVisibilityPending, editable: editable, isSaving: isUpdating, saveMcpField: saveMcpField }), _jsx(ResourceActionBar, { primaryAction: primaryAction, actions: actions, className: "shrink-0" })] }), (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", children: [_jsx(ConnectBar, { 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: () => {
                             credentials.setManualOverride(true);
                             setShowCredentialForm(true);
                         }, onBackToOAuth: () => {
@@ -208,7 +228,7 @@ export function McpServerDetailView({ org, slug, onResourceLoad, onVisibilityCha
                         }, 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: () => {
                             setShowByoaForm(false);
                             orgOAuthApp.clearErrors();
-                        }, isSubmitting: orgOAuthApp.isSetting, error: orgOAuthApp.setError })] }), _jsx(Section, { title: "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 }))] }) }), spec && spec.tags.length > 0 && _jsx(TagsSection, { tags: spec.tags })] }));
+                        }, isSubmitting: orgOAuthApp.isSetting, error: orgOAuthApp.setError })] }), _jsx(Section, { title: "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 }))] }));
 }
 // ---------------------------------------------------------------------------
 // ConnectBar — single entry point for capability discovery
@@ -269,7 +289,7 @@ function healthStatusText(health, accessTokenExpiresAt, tokenLifetimeHint) {
             return "Not connected yet";
     }
 }
-function ConnectBar({ isConnecting, connectionError, onConnect, onClearConnectionError, hasDiscoveredTools, toolCount, policyCount, credentialsLoading, oauthPhase, authMode, isOAuthConnected, connectionHealth, canDisconnect, onDisconnect, isDisconnecting, disconnectError, onClearDisconnectError, serverName, accessTokenExpiresAt, tokenLifetimeHint, isVendorApprovalPending, isVendorApprovalBlocked, vendorApprovalDocsUrl, canBringOwnApp, isOrgOAuthApp, onBringOwnApp, onRemoveOrgApp, isRemovingOrgApp, removeOrgAppError, onClearRemoveOrgAppError, manualOverride, onManualOverride, onBackToOAuth, onCancelOAuth, }) {
+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, manualOverride, onManualOverride, onBackToOAuth, onCancelOAuth, }) {
     const [disconnectPhase, setDisconnectPhase] = useState("idle");
     const [removeOrgAppPhase, setRemoveOrgAppPhase] = useState("idle");
     const isOAuthBusy = oauthPhase === "initiating" ||
@@ -312,7 +332,7 @@ function ConnectBar({ isConnecting, connectionError, onConnect, onClearConnectio
         if (manualOverride)
             return "Entering token manually";
         if (hasDiscoveredTools)
-            return formatConnectionSummary(toolCount, policyCount);
+            return "Connected";
         return "Not connected yet";
     })();
     const pill = healthPillProps(connectionHealth, isVendorApprovalPending && !isOAuthConnected);
@@ -373,13 +393,6 @@ function oauthPhaseLabel(phase) {
             return "Connecting...";
     }
 }
-function formatConnectionSummary(toolCount, policyCount) {
-    const toolLabel = `${toolCount} tool${toolCount !== 1 ? "s" : ""}`;
-    if (policyCount === 0)
-        return toolLabel;
-    const policyLabel = `${policyCount} ${policyCount !== 1 ? "policies" : "policy"}`;
-    return `${toolLabel}, ${policyLabel}`;
-}
 function formatTokenExpiry(expiresAtSeconds) {
     if (expiresAtSeconds === BigInt(0))
         return null;
@@ -404,13 +417,13 @@ function formatTokenExpiry(expiresAtSeconds) {
 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 })] })] }));
 }
-function Header({ server, createdAt, updatedAt, lastDiscoveredAt, onVisibilityChange, isVisibilityPending, }) {
+function Header({ server, createdAt, updatedAt, lastDiscoveredAt, onVisibilityChange, isVisibilityPending, editable, isSaving, saveMcpField, }) {
     const meta = server.metadata;
     const spec = server.spec;
     const status = server.status;
     const displayName = meta?.name || meta?.slug || "Untitled";
     const isPublic = meta?.visibility === ApiResourceVisibility.visibility_public;
-    return (_jsxs("div", { className: "flex items-start gap-3", children: [spec?.iconUrl ? (_jsx("img", { src: spec.iconUrl, alt: "", className: "mt-0.5 size-8 shrink-0 rounded object-cover" })) : (_jsx(McpServerIcon, { className: "mt-1 size-6 shrink-0 text-muted-foreground" })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h2", { className: "truncate text-lg font-semibold text-foreground", children: displayName }), onVisibilityChange && meta ? (_jsx(VisibilityToggle, { visibility: meta.visibility, onVisibilityChange: onVisibilityChange, isPending: isVisibilityPending })) : (isPublic && (_jsx("span", { className: "shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: "Public" })))] }), meta?.slug && (_jsx("span", { className: "mt-0.5 block truncate font-mono text-xs text-muted-foreground", children: meta.org ? `${meta.org}/${meta.slug}` : meta.slug })), _jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground", children: [meta?.org && _jsx("span", { children: meta.org }), status && (_jsx(ValidationStateBadge, { state: status.validationState })), lastDiscoveredAt && (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsxs("span", { children: ["Discovered ", formatDate(lastDiscoveredAt)] })] })), createdAt && (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsxs("span", { children: ["Created ", formatDate(createdAt)] })] })), updatedAt && (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsxs("span", { children: ["Updated ", formatDate(updatedAt)] })] }))] }), spec?.description && (_jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: spec.description }))] })] }));
+    return (_jsxs("div", { className: "flex items-start gap-3", children: [editable && saveMcpField ? (_jsx(InlineEditImage, { value: spec?.iconUrl ?? "", onSave: (v) => saveMcpField("iconUrl", v || undefined), isSaving: isSaving, fallback: _jsx(McpServerIcon, { className: "size-6 text-muted-foreground" }), size: "md" })) : spec?.iconUrl ? (_jsx("img", { src: spec.iconUrl, alt: "", className: "mt-0.5 size-8 shrink-0 rounded object-cover" })) : (_jsx(McpServerIcon, { className: "mt-1 size-6 shrink-0 text-muted-foreground" })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [editable && saveMcpField ? (_jsx(InlineEditText, { value: meta?.name || "", onSave: (v) => saveMcpField("name", v), isSaving: isSaving, variant: "heading", placeholder: "Server name", validate: (v) => (v.trim() ? null : "Name is required") })) : (_jsx("h2", { className: "truncate text-lg font-semibold text-foreground", children: displayName })), onVisibilityChange && meta ? (_jsx(VisibilityToggle, { visibility: meta.visibility, onVisibilityChange: onVisibilityChange, isPending: isVisibilityPending })) : (isPublic && (_jsx("span", { className: "shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: "Public" })))] }), meta?.slug && (_jsx("span", { className: "mt-0.5 block truncate font-mono text-xs text-muted-foreground", children: meta.org ? `${meta.org}/${meta.slug}` : meta.slug })), _jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground", children: [meta?.org && _jsx("span", { children: meta.org }), status && (_jsx(ValidationStateBadge, { state: status.validationState })), lastDiscoveredAt && (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsxs("span", { children: ["Discovered ", formatDate(lastDiscoveredAt)] })] })), createdAt && (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsxs("span", { children: ["Created ", formatDate(createdAt)] })] })), updatedAt && (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsxs("span", { children: ["Updated ", formatDate(updatedAt)] })] }))] })] })] }));
 }
 function ValidationStateBadge({ state, }) {
     switch (state) {
@@ -422,9 +435,118 @@ function ValidationStateBadge({ state, }) {
             return null;
     }
 }
-function ServerConfigSection({ serverType, }) {
-    return (_jsx(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" }), _jsx("span", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-xs font-medium text-foreground", children: serverType.case })] }), 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" }), _jsxs("code", { className: "font-mono text-sm text-foreground", children: [serverType.value.command, serverType.value.args.length > 0 &&
-                                            ` ${serverType.value.args.join(" ")}`] })] }), 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" }), _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" }), _jsx("code", { className: "break-all font-mono text-sm text-foreground", children: serverType.value.url })] }), 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" }), _jsxs("span", { className: "text-xs text-foreground", children: [serverType.value.timeoutSeconds, "s"] })] }))] }))] }) }));
+const TRANSPORT_OPTIONS = [
+    { value: "http", label: "HTTP", description: "Connect via HTTP/SSE endpoint" },
+    { value: "stdio", label: "Stdio", description: "Launch a local process with stdin/stdout" },
+];
+function ServerConfigSection({ serverType, editable, isSaving, saveMcpField, }) {
+    const [headersEditing, setHeadersEditing] = useState(false);
+    const [queryParamsEditing, setQueryParamsEditing] = useState(false);
+    const currentHttpConfig = useMemo(() => {
+        if (serverType?.case !== "http")
+            return null;
+        const v = serverType.value;
+        return {
+            url: v.url,
+            headers: v.headers && Object.keys(v.headers).length > 0 ? { ...v.headers } : undefined,
+            queryParams: v.queryParams && Object.keys(v.queryParams).length > 0 ? { ...v.queryParams } : undefined,
+            timeoutSeconds: v.timeoutSeconds || undefined,
+        };
+    }, [serverType]);
+    const handleTransportChange = useCallback(async (newType) => {
+        if (!saveMcpField)
+            return false;
+        if (newType === "http") {
+            const ok = await saveMcpField("http", { url: "" });
+            if (ok)
+                await saveMcpField("stdio", undefined);
+            return ok;
+        }
+        const ok = await saveMcpField("stdio", { command: "" });
+        if (ok)
+            await saveMcpField("http", undefined);
+        return ok;
+    }, [saveMcpField]);
+    const headerRows = useMemo(() => {
+        if (!currentHttpConfig?.headers)
+            return [];
+        return Object.entries(currentHttpConfig.headers).map(([key, value]) => ({ key, value }));
+    }, [currentHttpConfig?.headers]);
+    const queryParamRows = useMemo(() => {
+        if (!currentHttpConfig?.queryParams)
+            return [];
+        return Object.entries(currentHttpConfig.queryParams).map(([key, value]) => ({ key, value }));
+    }, [currentHttpConfig?.queryParams]);
+    const handleHeadersSave = useCallback(async (rows) => {
+        if (!saveMcpField || !currentHttpConfig)
+            return false;
+        const headers = {};
+        for (const row of rows) {
+            if (row.key.trim())
+                headers[row.key.trim()] = row.value;
+        }
+        return saveMcpField("http", {
+            ...currentHttpConfig,
+            headers: Object.keys(headers).length > 0 ? headers : undefined,
+        });
+    }, [saveMcpField, currentHttpConfig]);
+    const handleQueryParamsSave = useCallback(async (rows) => {
+        if (!saveMcpField || !currentHttpConfig)
+            return false;
+        const queryParams = {};
+        for (const row of rows) {
+            if (row.key.trim())
+                queryParams[row.key.trim()] = row.value;
+        }
+        return saveMcpField("http", {
+            ...currentHttpConfig,
+            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) => {
+                                            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", {
+                                            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", {
+                                            ...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" }))] }));
+}
+/** 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))) }))] }));
+}
+const ENV_VAR_PLACEHOLDER = /\$\{([^}]+)\}/g;
+/** Renders a header value, highlighting ${VAR} placeholders with a variable badge. */
+function renderHeaderValue(value) {
+    if (!ENV_VAR_PLACEHOLDER.test(value))
+        return value;
+    ENV_VAR_PLACEHOLDER.lastIndex = 0;
+    const parts = [];
+    let lastIndex = 0;
+    let match;
+    while ((match = ENV_VAR_PLACEHOLDER.exec(value)) !== null) {
+        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));
+        lastIndex = match.index + match[0].length;
+    }
+    if (lastIndex < value.length) {
+        parts.push(value.slice(lastIndex));
+    }
+    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() })] }))] }) }));
@@ -434,45 +556,106 @@ function ResourceTemplatesList({ templates, }) {
         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))) }));
 }
-function EnvSection({ data, oauthTargetEnvVar, }) {
+function EnvSection({ data, oauthTargetEnvVar, editable, isSaving, saveMcpField, }) {
     const entries = Object.entries(data).sort(([a], [b]) => a.localeCompare(b));
-    return (_jsx(Section, { title: `Environment Variables (${entries.length})`, children: _jsx("div", { className: "flex flex-col divide-y divide-border", children: entries.map(([name, env]) => {
+    const envRows = useMemo(() => entries.map(([key, decl]) => ({
+        key,
+        value: "",
+        isSecret: decl.isSecret,
+        description: decl.description,
+        optional: decl.optional,
+    })), [entries]);
+    const handleEnvSave = useCallback(async (rows) => {
+        if (!saveMcpField)
+            return false;
+        const env = {};
+        for (const row of rows) {
+            if (row.key.trim()) {
+                env[row.key.trim()] = {
+                    isSecret: row.isSecret || undefined,
+                    description: row.description || undefined,
+                    optional: row.optional || undefined,
+                };
+            }
+        }
+        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]) => {
                 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));
-            }) }) }));
-}
-function TagsSection({ tags }) {
-    return (_jsx(Section, { title: `Tags (${tags.length})`, children: _jsx("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))) }) }));
+            }) })) }));
+}
+function TagsSection({ tags, editable, isSaving, saveMcpField, }) {
+    const tagRows = useMemo(() => tags.map((t) => ({ key: t, value: "" })), [tags]);
+    const handleTagsSave = useCallback(async (rows) => {
+        if (!saveMcpField)
+            return false;
+        // Tags are stored as string[] on the spec but not directly on McpServerInput.
+        // For now, save them through the full input by modifying the spec.
+        // Tags don't have a direct field on McpServerInput, so we handle this at
+        // 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" }))] }) }));
 }
 // ---------------------------------------------------------------------------
 // Capability tab contents (read-only)
 // ---------------------------------------------------------------------------
 function ToolsTabContent({ tools, }) {
+    const [search, setSearch] = useState("");
+    const [expandedTool, setExpandedTool] = useState(null);
+    const filtered = useMemo(() => {
+        if (!search.trim())
+            return tools;
+        const q = search.toLowerCase();
+        return tools.filter((t) => t.name.toLowerCase().includes(q) ||
+            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." })] }));
     }
-    return (_jsx("div", { className: "flex flex-col divide-y divide-border", children: tools.map((tool) => (_jsxs("div", { className: "px-3 py-2.5", 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 }))] }, tool.name))) }));
+    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) => {
+                        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));
+                    }) }) }))] }));
 }
 function PoliciesTabContent({ pinnedPolicies, classifiedPolicies, hasDiscoveredTools, }) {
-    const hasPinnedPolicies = pinnedPolicies.length > 0;
-    const hasClassifiedPolicies = classifiedPolicies.length > 0;
-    const hasAnyPolicies = hasPinnedPolicies || hasClassifiedPolicies;
+    const [search, setSearch] = useState("");
+    const totalCount = pinnedPolicies.length + classifiedPolicies.length;
+    const hasAnyPolicies = totalCount > 0;
+    const filteredPinned = useMemo(() => {
+        if (!search.trim())
+            return pinnedPolicies;
+        const q = search.toLowerCase();
+        return pinnedPolicies.filter((p) => p.toolName.toLowerCase().includes(q) ||
+            p.message?.toLowerCase().includes(q));
+    }, [pinnedPolicies, search]);
+    const filteredClassified = useMemo(() => {
+        if (!search.trim())
+            return classifiedPolicies;
+        const q = search.toLowerCase();
+        return classifiedPolicies.filter((p) => p.toolName.toLowerCase().includes(q) ||
+            p.message?.toLowerCase().includes(q));
+    }, [classifiedPolicies, search]);
+    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
                         ? "No approval policies yet. Reconnect to reclassify tools."
                         : "Connect to discover tools and auto-classify approval policies." })] }));
     }
-    return (_jsxs("div", { className: "flex flex-col", children: [hasPinnedPolicies && (_jsx(PolicyGroup, { icon: _jsx(PinIcon, { className: "size-3.5" }), label: "Pinned", policies: pinnedPolicies })), hasClassifiedPolicies && (_jsx(PolicyGroup, { icon: _jsx(SparklesIcon, { className: "size-3.5" }), label: "Auto-classified", policies: classifiedPolicies }))] }));
+    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 }))] }))] }));
 }
 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 }), _jsx(ShieldIcon, { className: "size-3 text-amber-500 dark:text-amber-400" })] }), policy.message && (_jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: policy.message }))] }, policy.toolName))) })] }));
+    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))) })] }));
 }
 // ---------------------------------------------------------------------------
 // Shared layout primitives
 // ---------------------------------------------------------------------------
-function Section({ title, children, }) {
-    return (_jsxs("section", { children: [_jsx("h3", { className: "mb-2 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: title }), _jsx("div", { className: "overflow-hidden rounded-lg border border-border", children: children })] }));
-}
 function Dot() {
     return (_jsx("span", { className: "shrink-0", "aria-hidden": "true", children: "\u00B7" }));
 }
@@ -528,6 +711,15 @@ function OAuthIcon({ className }) {
 function ExternalLinkIcon({ className }) {
     return (_jsxs("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("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" }), _jsx("path", { d: "M10 2h4v4" }), _jsx("path", { d: "M6.667 9.333 14 2" })] }));
 }
+function SearchIcon({ className }) {
+    return (_jsxs("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "7", cy: "7", r: "4.5" }), _jsx("path", { d: "m10.5 10.5 3 3" })] }));
+}
+function CloseIcon({ 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: "m4 4 8 8M12 4l-8 8" }) }));
+}
+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" }) }));
 }