@stigmer/react 0.5.0 → 1.0.0

package/src/mcp-server/McpServerDetailView.tsx

@@ -29,9 +29,9 @@ import { EnvVarForm } from "../environment/EnvVarForm";
 import type { EnvVarFormVariable } from "../environment/EnvVarForm";
 import { VisibilityToggle } from "../library/VisibilityToggle";
 import { Tabs, type TabItem } from "../tabs/Tabs";
-import { ResourceActionBar } from "../resource-detail/ResourceActionBar";
+import { ResourceDetailShell } from "../resource-detail/ResourceDetailShell";
 import { Section } from "../resource-detail/Section";
-import type { DetailAction } from "../resource-detail/types";
+import type { DetailAction, ResourceHeaderMeta } from "../resource-detail/types";
 import { InlineEditText } from "../inline-edit/InlineEditText";
 import { InlineEditTextarea } from "../inline-edit/InlineEditTextarea";
 import { InlineEditImage } from "../inline-edit/InlineEditImage";
@@ -253,20 +253,16 @@ export function McpServerDetailView({
           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],
@@ -359,40 +355,85 @@ export function McpServerDetailView({
     return <ErrorMessage error={error} retry={refetch} className={className} />;
   if (!mcpServer) return <NotFoundState className={className} />;
 
-  return (
-    <div className={cn("flex flex-col gap-6", className)}>
-      {status?.validationState === ValidationState.invalid &&
-        status.validationMessage && (
-          <ValidationBanner message={status.validationMessage} />
-        )}
+  const meta = mcpServer.metadata;
+  const lastDiscoveredAt = capabilities?.lastDiscoveredAt
+    ? timestampDate(capabilities.lastDiscoveredAt)
+    : null;
+
+  const headerMeta: ResourceHeaderMeta = {
+    name: meta?.name || meta?.slug || "Untitled",
+    nameElement: editable && saveMcpField ? (
+      <InlineEditText
+        value={meta?.name || ""}
+        onSave={(v) => saveMcpField("name", v)}
+        isSaving={isUpdating}
+        variant="heading"
+        placeholder="Server name"
+        validate={(v) => (v.trim() ? null : "Name is required")}
+      />
+    ) : undefined,
+    id: meta?.id || "",
+    org: meta?.org,
+    slug: meta?.slug,
+    qualifiedSlug: meta?.slug
+      ? (meta.org ? `${meta.org}/${meta.slug}` : meta.slug)
+      : undefined,
+    icon: editable && saveMcpField ? (
+      <InlineEditImage
+        value={spec?.iconUrl ?? ""}
+        onSave={(v) => saveMcpField("iconUrl", v || undefined)}
+        isSaving={isUpdating}
+        fallback={<McpServerIcon className="size-6 text-muted-foreground" />}
+        size="md"
+      />
+    ) : spec?.iconUrl ? undefined : <McpServerIcon className="size-6 text-muted-foreground" />,
+    iconUrl: editable ? undefined : spec?.iconUrl || undefined,
+    createdAt: specAudit?.createdAt ? timestampDate(specAudit.createdAt) : null,
+    updatedAt: specAudit?.updatedAt ? timestampDate(specAudit.updatedAt) : null,
+  };
+
+  const isPublic = meta?.visibility === ApiResourceVisibility.visibility_public;
+  const visibilityControl =
+    onVisibilityChange && meta ? (
+      <VisibilityToggle
+        visibility={meta.visibility}
+        onVisibilityChange={onVisibilityChange}
+        isPending={isVisibilityPending}
+      />
+    ) : isPublic ? (
+      <span className="shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+        Public
+      </span>
+    ) : undefined;
+
+  const headerMetaExtra = (
+    <>
+      {status && <ValidationStateBadge state={status.validationState} />}
+      {lastDiscoveredAt && (
+        <>
+          <Dot />
+          <span>Discovered {formatDate(lastDiscoveredAt)}</span>
+        </>
+      )}
+    </>
+  );
 
-      <div className="flex items-start justify-between gap-4">
-        <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}
-        />
-        <ResourceActionBar
-          primaryAction={primaryAction}
-          actions={actions}
-          className="shrink-0"
-        />
-      </div>
+  const headerBanner =
+    status?.validationState === ValidationState.invalid &&
+    status.validationMessage ? (
+      <ValidationBanner message={status.validationMessage} />
+    ) : undefined;
 
+  return (
+    <ResourceDetailShell
+      header={headerMeta}
+      visibilityControl={visibilityControl}
+      headerMetaExtra={headerMetaExtra}
+      headerBanner={headerBanner}
+      primaryAction={primaryAction}
+      actions={actions}
+      className={className}
+    >
       {(editable || spec?.description) && (
         <Section title="Description">
           {editable && saveMcpField ? (
@@ -443,8 +484,6 @@ export function McpServerDetailView({
           onConnect={handleConnectClick}
           onClearConnectionError={combinedClearError}
           hasDiscoveredTools={hasDiscoveredTools}
-          toolCount={tools.length}
-          policyCount={totalPolicyCount}
           credentialsLoading={credentials.isLoading}
           oauthPhase={oauth.phase}
           authMode={credentials.authMode}
@@ -552,7 +591,7 @@ export function McpServerDetailView({
       {(editable || (spec && spec.tags.length > 0)) && (
         <TagsSection tags={spec?.tags ?? []} editable={editable} isSaving={isUpdating} saveMcpField={saveMcpField} />
       )}
-    </div>
+    </ResourceDetailShell>
   );
 }
 
@@ -635,8 +674,6 @@ function ConnectBar({
   onConnect,
   onClearConnectionError,
   hasDiscoveredTools,
-  toolCount,
-  policyCount,
   credentialsLoading,
   oauthPhase,
   authMode,
@@ -670,8 +707,6 @@ function ConnectBar({
   readonly onConnect: () => void;
   readonly onClearConnectionError: () => void;
   readonly hasDiscoveredTools: boolean;
-  readonly toolCount: number;
-  readonly policyCount: number;
   readonly credentialsLoading: boolean;
   readonly oauthPhase: OAuthConnectPhase;
   readonly authMode: "manual" | "oauth";
@@ -743,7 +778,7 @@ function ConnectBar({
     }
     if (isOrgOAuthApp && showOAuthPrimary) return "Using your OAuth app";
     if (manualOverride) return "Entering token manually";
-    if (hasDiscoveredTools) return formatConnectionSummary(toolCount, policyCount);
+    if (hasDiscoveredTools) return "Connected";
     return "Not connected yet";
   })();
 
@@ -1086,13 +1121,6 @@ function oauthPhaseLabel(phase: OAuthConnectPhase): string {
   }
 }
 
-function formatConnectionSummary(toolCount: number, policyCount: number): string {
-  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: bigint): string | null {
   if (expiresAtSeconds === BigInt(0)) return null;
   const nowSeconds = BigInt(Math.floor(Date.now() / 1000));
@@ -1128,119 +1156,6 @@ function ValidationBanner({ message }: { readonly message: string }) {
   );
 }
 
-function Header({
-  server,
-  createdAt,
-  updatedAt,
-  lastDiscoveredAt,
-  onVisibilityChange,
-  isVisibilityPending,
-  editable,
-  isSaving,
-  saveMcpField,
-}: {
-  readonly server: McpServer;
-  readonly createdAt: Date | null;
-  readonly updatedAt: Date | null;
-  readonly lastDiscoveredAt: Date | null;
-  readonly onVisibilityChange?: (v: ApiResourceVisibility) => void;
-  readonly isVisibilityPending?: boolean;
-  readonly editable?: boolean;
-  readonly isSaving?: boolean;
-  readonly saveMcpField?: <K extends keyof import("@stigmer/sdk").McpServerInput>(
-    field: K,
-    value: import("@stigmer/sdk").McpServerInput[K],
-  ) => Promise<boolean>;
-}) {
-  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 (
-    <div className="flex items-start gap-3">
-      {editable && saveMcpField ? (
-        <InlineEditImage
-          value={spec?.iconUrl ?? ""}
-          onSave={(v) => saveMcpField("iconUrl", v || undefined)}
-          isSaving={isSaving}
-          fallback={<McpServerIcon className="size-6 text-muted-foreground" />}
-          size="md"
-        />
-      ) : spec?.iconUrl ? (
-        <img
-          src={spec.iconUrl}
-          alt=""
-          className="mt-0.5 size-8 shrink-0 rounded object-cover"
-        />
-      ) : (
-        <McpServerIcon className="mt-1 size-6 shrink-0 text-muted-foreground" />
-      )}
-      <div className="min-w-0 flex-1">
-        <div className="flex items-center gap-2">
-          {editable && saveMcpField ? (
-            <InlineEditText
-              value={meta?.name || ""}
-              onSave={(v) => saveMcpField("name", v)}
-              isSaving={isSaving}
-              variant="heading"
-              placeholder="Server name"
-              validate={(v) => (v.trim() ? null : "Name is required")}
-            />
-          ) : (
-            <h2 className="truncate text-lg font-semibold text-foreground">
-              {displayName}
-            </h2>
-          )}
-          {onVisibilityChange && meta ? (
-            <VisibilityToggle
-              visibility={meta.visibility}
-              onVisibilityChange={onVisibilityChange}
-              isPending={isVisibilityPending}
-            />
-          ) : (
-            isPublic && (
-              <span className="shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
-                Public
-              </span>
-            )
-          )}
-        </div>
-        {meta?.slug && (
-          <span className="mt-0.5 block truncate font-mono text-xs text-muted-foreground">
-            {meta.org ? `${meta.org}/${meta.slug}` : meta.slug}
-          </span>
-        )}
-        <div className="mt-0.5 flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground">
-          {meta?.org && <span>{meta.org}</span>}
-          {status && (
-            <ValidationStateBadge state={status.validationState} />
-          )}
-          {lastDiscoveredAt && (
-            <>
-              <Dot />
-              <span>Discovered {formatDate(lastDiscoveredAt)}</span>
-            </>
-          )}
-          {createdAt && (
-            <>
-              <Dot />
-              <span>Created {formatDate(createdAt)}</span>
-            </>
-          )}
-          {updatedAt && (
-            <>
-              <Dot />
-              <span>Updated {formatDate(updatedAt)}</span>
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
 
 function ValidationStateBadge({
   state,
@@ -1289,6 +1204,20 @@ function ServerConfigSection({
     value: import("@stigmer/sdk").McpServerInput[K],
   ) => Promise<boolean>;
 }) {
+  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: string) => {
       if (!saveMcpField) return false;
@@ -1304,6 +1233,46 @@ function ServerConfigSection({
     [saveMcpField],
   );
 
+  const headerRows: KeyValueRow[] = useMemo(() => {
+    if (!currentHttpConfig?.headers) return [];
+    return Object.entries(currentHttpConfig.headers).map(([key, value]) => ({ key, value }));
+  }, [currentHttpConfig?.headers]);
+
+  const queryParamRows: KeyValueRow[] = useMemo(() => {
+    if (!currentHttpConfig?.queryParams) return [];
+    return Object.entries(currentHttpConfig.queryParams).map(([key, value]) => ({ key, value }));
+  }, [currentHttpConfig?.queryParams]);
+
+  const handleHeadersSave = useCallback(
+    async (rows: KeyValueRow[]) => {
+      if (!saveMcpField || !currentHttpConfig) return false;
+      const headers: Record<string, string> = {};
+      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: KeyValueRow[]) => {
+      if (!saveMcpField || !currentHttpConfig) return false;
+      const queryParams: Record<string, string> = {};
+      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 (
     <Section title="Server Configuration">
       <div className="flex flex-col gap-2 p-3">
@@ -1390,10 +1359,7 @@ function ServerConfigSection({
                 <InlineEditText
                   value={serverType.value.url}
                   onSave={async (v) =>
-                    saveMcpField("http", {
-                      url: v,
-                      timeoutSeconds: serverType.value.timeoutSeconds || undefined,
-                    })
+                    saveMcpField("http", { ...currentHttpConfig!, url: v })
                   }
                   isSaving={isSaving}
                   placeholder="https://example.com/mcp"
@@ -1414,7 +1380,7 @@ function ServerConfigSection({
                     value={serverType.value.timeoutSeconds > 0 ? String(serverType.value.timeoutSeconds) : ""}
                     onSave={async (v) =>
                       saveMcpField("http", {
-                        url: serverType.value.url,
+                        ...currentHttpConfig!,
                         timeoutSeconds: v ? Number(v) : undefined,
                       })
                     }
@@ -1435,10 +1401,144 @@ function ServerConfigSection({
           </>
         )}
       </div>
+
+      {serverType?.case === "http" && (editable || headerRows.length > 0) && (
+        <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) && (
+        <HttpKeyValueSubsection
+          title="Query Parameters"
+          count={queryParamRows.length}
+          rows={queryParamRows}
+          editable={editable}
+          isSaving={isSaving}
+          editing={queryParamsEditing}
+          onEditingChange={setQueryParamsEditing}
+          onSave={handleQueryParamsSave}
+          keyLabel="Parameter name"
+        />
+      )}
     </Section>
   );
 }
 
+/** Renders a key-value subsection (headers or query params) within ServerConfigSection. */
+function HttpKeyValueSubsection({
+  title,
+  count,
+  rows,
+  editable,
+  isSaving,
+  editing,
+  onEditingChange,
+  onSave,
+  keyLabel,
+}: {
+  readonly title: string;
+  readonly count: number;
+  readonly rows: readonly KeyValueRow[];
+  readonly editable?: boolean;
+  readonly isSaving?: boolean;
+  readonly editing: boolean;
+  readonly onEditingChange: (v: boolean) => void;
+  readonly onSave: (rows: KeyValueRow[]) => Promise<boolean>;
+  readonly keyLabel: string;
+}) {
+  return (
+    <div className="border-t border-border">
+      <div className="flex items-center justify-between px-3 py-2">
+        <div className="flex items-center gap-1.5">
+          <span className="text-xs font-medium text-muted-foreground">{title}</span>
+          {count > 0 && (
+            <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">
+              {count}
+            </span>
+          )}
+        </div>
+        {editable && (
+          <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"
+          >
+            {editing ? "Done" : "Edit"}
+          </button>
+        )}
+      </div>
+      {editable && editing ? (
+        <InlineEditKeyValue
+          value={[...rows]}
+          onSave={onSave}
+          isSaving={isSaving}
+          editing={editing}
+          onEditingChange={onEditingChange}
+          keyLabel={keyLabel}
+          showValue
+          valueLabel="Value"
+        />
+      ) : (
+        <div className="flex flex-col divide-y divide-border">
+          {rows.map((row) => (
+            <div key={row.key} className="flex items-start gap-2 px-3 py-1.5">
+              <code className="shrink-0 font-mono text-xs font-medium text-foreground">
+                {row.key}
+              </code>
+              <span className="min-w-0 break-all font-mono text-xs text-muted-foreground">
+                {renderHeaderValue(row.value)}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+const ENV_VAR_PLACEHOLDER = /\$\{([^}]+)\}/g;
+
+/** Renders a header value, highlighting ${VAR} placeholders with a variable badge. */
+function renderHeaderValue(value: string): React.ReactNode {
+  if (!ENV_VAR_PLACEHOLDER.test(value)) return value;
+
+  ENV_VAR_PLACEHOLDER.lastIndex = 0;
+  const parts: React.ReactNode[] = [];
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = ENV_VAR_PLACEHOLDER.exec(value)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(value.slice(lastIndex, match.index));
+    }
+    parts.push(
+      <span
+        key={match.index}
+        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]}`}
+      >
+        {match[0]}
+      </span>,
+    );
+    lastIndex = match.index + match[0].length;
+  }
+
+  if (lastIndex < value.length) {
+    parts.push(value.slice(lastIndex));
+  }
+
+  return <>{parts}</>;
+}
+
 function SourceSection({
   spec,
 }: {
@@ -1669,6 +1769,19 @@ function ToolsTabContent({
 }: {
   readonly tools: readonly DiscoveredTool[];
 }) {
+  const [search, setSearch] = useState("");
+  const [expandedTool, setExpandedTool] = useState<string | null>(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 (
       <div className="px-3 py-8 text-center">
@@ -1680,20 +1793,97 @@ function ToolsTabContent({
     );
   }
 
+  const isFiltered = search.trim().length > 0;
+
   return (
-    <div className="flex flex-col divide-y divide-border">
-      {tools.map((tool) => (
-        <div key={tool.name} className="px-3 py-2.5">
-          <code className="font-mono text-sm font-medium text-foreground">
-            {tool.name}
-          </code>
-          {tool.description && (
-            <p className="mt-0.5 text-xs text-muted-foreground">
-              {tool.description}
-            </p>
+    <div className="flex flex-col">
+      <div className="flex items-center gap-2 px-3 pb-2">
+        <div className="relative flex-1">
+          <SearchIcon className="pointer-events-none absolute left-2 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
+          <input
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search tools…"
+            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 && (
+            <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"
+            >
+              <CloseIcon className="size-3" />
+            </button>
           )}
         </div>
-      ))}
+        <span className="shrink-0 text-[10px] text-muted-foreground">
+          {isFiltered ? `${filtered.length} of ${tools.length}` : tools.length}
+        </span>
+      </div>
+
+      {filtered.length === 0 ? (
+        <div className="px-3 py-6 text-center">
+          <p className="text-xs text-muted-foreground">
+            No tools matching &ldquo;{search}&rdquo;
+          </p>
+        </div>
+      ) : (
+        <div className="max-h-96 overflow-y-auto">
+          <div className="flex flex-col divide-y divide-border">
+            {filtered.map((tool) => {
+              const isExpanded = expandedTool === tool.name;
+              const hasSchema =
+                tool.inputSchema != null &&
+                Object.keys(tool.inputSchema).length > 0;
+
+              return (
+                <div key={tool.name}>
+                  <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}
+                  >
+                    <ChevronIcon
+                      className={cn(
+                        "mt-0.5 size-3 shrink-0 text-muted-foreground transition-transform",
+                        isExpanded && "rotate-90",
+                      )}
+                    />
+                    <div className="min-w-0 flex-1">
+                      <code className="font-mono text-sm font-medium text-foreground">
+                        {tool.name}
+                      </code>
+                      {tool.description && (
+                        <p className="mt-0.5 text-xs text-muted-foreground">
+                          {tool.description}
+                        </p>
+                      )}
+                    </div>
+                    {hasSchema && (
+                      <span className="mt-0.5 shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+                        schema
+                      </span>
+                    )}
+                  </button>
+                  {isExpanded && hasSchema && (
+                    <div className="border-t border-border bg-muted-faint px-3 py-2">
+                      <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">
+                        {JSON.stringify(tool.inputSchema, null, 2)}
+                      </pre>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
     </div>
   );
 }
@@ -1707,9 +1897,33 @@ function PoliciesTabContent({
   readonly classifiedPolicies: readonly ToolApprovalPolicy[];
   readonly hasDiscoveredTools: boolean;
 }) {
-  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 (
@@ -1726,19 +1940,56 @@ function PoliciesTabContent({
 
   return (
     <div className="flex flex-col">
-      {hasPinnedPolicies && (
-        <PolicyGroup
-          icon={<PinIcon className="size-3.5" />}
-          label="Pinned"
-          policies={pinnedPolicies}
-        />
-      )}
-      {hasClassifiedPolicies && (
-        <PolicyGroup
-          icon={<SparklesIcon className="size-3.5" />}
-          label="Auto-classified"
-          policies={classifiedPolicies}
-        />
+      <div className="flex items-center gap-2 px-3 pb-2">
+        <div className="relative flex-1">
+          <SearchIcon className="pointer-events-none absolute left-2 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
+          <input
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search policies…"
+            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 && (
+            <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"
+            >
+              <CloseIcon className="size-3" />
+            </button>
+          )}
+        </div>
+        <span className="shrink-0 text-[10px] text-muted-foreground">
+          {isFiltered ? `${filteredTotal} of ${totalCount}` : totalCount}
+        </span>
+      </div>
+
+      {filteredTotal === 0 ? (
+        <div className="px-3 py-6 text-center">
+          <p className="text-xs text-muted-foreground">
+            No policies matching &ldquo;{search}&rdquo;
+          </p>
+        </div>
+      ) : (
+        <div className="max-h-96 overflow-y-auto">
+          {filteredPinned.length > 0 && (
+            <PolicyGroup
+              icon={<PinIcon className="size-3.5" />}
+              label="Pinned"
+              policies={filteredPinned}
+            />
+          )}
+          {filteredClassified.length > 0 && (
+            <PolicyGroup
+              icon={<SparklesIcon className="size-3.5" />}
+              label="Auto-classified"
+              policies={filteredClassified}
+            />
+          )}
+        </div>
       )}
     </div>
   );
@@ -1771,7 +2022,10 @@ function PolicyGroup({
               <code className="font-mono text-sm font-medium text-foreground">
                 {policy.toolName}
               </code>
-              <ShieldIcon className="size-3 text-amber-500 dark:text-amber-400" />
+              <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">
+                <ShieldIcon className="size-2.5" />
+                requires approval
+              </span>
             </div>
             {policy.message && (
               <p className="mt-0.5 text-xs text-muted-foreground">
@@ -2055,6 +2309,58 @@ function ExternalLinkIcon({ className }: { readonly className?: string }) {
   );
 }
 
+function SearchIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="7" cy="7" r="4.5" />
+      <path d="m10.5 10.5 3 3" />
+    </svg>
+  );
+}
+
+function CloseIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="m4 4 8 8M12 4l-8 8" />
+    </svg>
+  );
+}
+
+function ChevronIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="m6 4 4 4-4 4" />
+    </svg>
+  );
+}
+
 function Spinner() {
   return (
     <svg