@stigmer/react 0.4.8 → 0.5.1

package/src/mcp-server/McpServerDetailView.tsx

@@ -15,6 +15,8 @@ import { ValidationState } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1
 import type { EnvVarDeclaration } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/spec_pb";
 import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
 import { useMcpServer } from "./useMcpServer";
+import { useUpdateMcpServer } from "./useUpdateMcpServer";
+import { mcpServerToInput } from "./internal/mcpServerToInput";
 import { useMcpServerConnect } from "./useMcpServerConnect";
 import { useMcpServerCredentials } from "./useMcpServerCredentials";
 import { useMcpServerOAuthConnect } from "./useMcpServerOAuthConnect";
@@ -26,7 +28,16 @@ import { ErrorMessage } from "../error/ErrorMessage";
 import { EnvVarForm } from "../environment/EnvVarForm";
 import type { EnvVarFormVariable } from "../environment/EnvVarForm";
 import { VisibilityToggle } from "../library/VisibilityToggle";
-import { Tabs, type TabItem } from "../internal/Tabs";
+import { Tabs, type TabItem } from "../tabs/Tabs";
+import { ResourceActionBar } from "../resource-detail/ResourceActionBar";
+import { Section } from "../resource-detail/Section";
+import type { DetailAction } from "../resource-detail/types";
+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";
+import type { KeyValueRow, SelectOption } from "../inline-edit/types";
 
 /** Tab identifier for the MCP server capability panel. */
 export type CapabilityTab = "tools" | "policies" | "resources";
@@ -85,6 +96,24 @@ export interface McpServerDetailViewProps {
    * When omitted, falls back to the `org` prop (MCP server's org).
    */
   readonly activeOrg?: string;
+  /**
+   * Primary action rendered as a visible button in the header area.
+   */
+  readonly primaryAction?: DetailAction;
+  /**
+   * Secondary actions rendered in the kebab overflow menu.
+   */
+  readonly actions?: readonly DetailAction[];
+  /**
+   * When `true`, fields on the detail view become click-to-edit.
+   * Each field saves independently via `stigmer.mcpServer.update()`.
+   * @default false
+   */
+  readonly editable?: boolean;
+  /**
+   * Called after a successful inline field save with the updated server.
+   */
+  readonly onResourceUpdated?: (server: McpServer) => void;
   /** Additional CSS classes for the root container. */
   readonly className?: string;
 }
@@ -123,9 +152,34 @@ export function McpServerDetailView({
   defaultShowCredentialForm = false,
   credentialPoolValues,
   activeOrg,
+  primaryAction,
+  actions,
+  editable = false,
+  onResourceUpdated,
   className,
 }: McpServerDetailViewProps) {
   const { mcpServer, isLoading, error, refetch } = useMcpServer(org, slug);
+  const { update: updateMcpServer, isUpdating } = useUpdateMcpServer();
+
+  const saveMcpField = useCallback(
+    async <K extends keyof import("@stigmer/sdk").McpServerInput>(
+      field: K,
+      value: import("@stigmer/sdk").McpServerInput[K],
+    ): Promise<boolean> => {
+      if (!mcpServer) return false;
+      const input = mcpServerToInput(mcpServer);
+      (input as unknown as Record<string, unknown>)[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();
@@ -199,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],
@@ -312,33 +362,73 @@ export function McpServerDetailView({
           <ValidationBanner message={status.validationMessage} />
         )}
 
-      <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}
-      />
+      <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>
+
+      {(editable || spec?.description) && (
+        <Section title="Description">
+          {editable && saveMcpField ? (
+            <div className="max-h-20 overflow-y-auto p-3">
+              <InlineEditTextarea
+                value={spec?.description || ""}
+                onSave={(v) => saveMcpField("description", v || undefined)}
+                isSaving={isUpdating}
+                placeholder="Add a description"
+                minRows={2}
+              />
+            </div>
+          ) : (
+            <div className="p-3">
+              <pre className="whitespace-pre-wrap break-words text-sm text-foreground font-sans">
+                {spec?.description}
+              </pre>
+            </div>
+          )}
+        </Section>
+      )}
 
       {hasSource && <SourceSection spec={spec} />}
 
-      {spec?.serverType.case && (
-        <ServerConfigSection serverType={spec.serverType} />
+      {(editable || spec?.serverType.case) && (
+        <ServerConfigSection
+          serverType={spec?.serverType}
+          editable={editable}
+          isSaving={isUpdating}
+          saveMcpField={saveMcpField}
+        />
       )}
 
-      {spec?.env && Object.keys(spec.env).length > 0 && (
+      {(editable || (spec?.env && Object.keys(spec.env).length > 0)) && (
         <EnvSection
-          data={spec.env}
+          data={spec?.env ?? {}}
           oauthTargetEnvVar={credentials.oauthTargetEnvVar}
+          editable={editable}
+          isSaving={isUpdating}
+          saveMcpField={saveMcpField}
         />
       )}
 
@@ -349,8 +439,6 @@ export function McpServerDetailView({
           onConnect={handleConnectClick}
           onClearConnectionError={combinedClearError}
           hasDiscoveredTools={hasDiscoveredTools}
-          toolCount={tools.length}
-          policyCount={totalPolicyCount}
           credentialsLoading={credentials.isLoading}
           oauthPhase={oauth.phase}
           authMode={credentials.authMode}
@@ -455,7 +543,9 @@ export function McpServerDetailView({
         </Tabs>
       </Section>
 
-      {spec && spec.tags.length > 0 && <TagsSection tags={spec.tags} />}
+      {(editable || (spec && spec.tags.length > 0)) && (
+        <TagsSection tags={spec?.tags ?? []} editable={editable} isSaving={isUpdating} saveMcpField={saveMcpField} />
+      )}
     </div>
   );
 }
@@ -539,8 +629,6 @@ function ConnectBar({
   onConnect,
   onClearConnectionError,
   hasDiscoveredTools,
-  toolCount,
-  policyCount,
   credentialsLoading,
   oauthPhase,
   authMode,
@@ -574,8 +662,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";
@@ -647,7 +733,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";
   })();
 
@@ -990,13 +1076,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));
@@ -1039,6 +1118,9 @@ function Header({
   lastDiscoveredAt,
   onVisibilityChange,
   isVisibilityPending,
+  editable,
+  isSaving,
+  saveMcpField,
 }: {
   readonly server: McpServer;
   readonly createdAt: Date | null;
@@ -1046,6 +1128,12 @@ function Header({
   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;
@@ -1056,7 +1144,15 @@ function Header({
 
   return (
     <div className="flex items-start gap-3">
-      {spec?.iconUrl ? (
+      {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=""
@@ -1067,9 +1163,20 @@ function Header({
       )}
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-2">
-          <h2 className="truncate text-lg font-semibold text-foreground">
-            {displayName}
-          </h2>
+          {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}
@@ -1113,11 +1220,6 @@ function Header({
             </>
           )}
         </div>
-        {spec?.description && (
-          <p className="mt-2 text-sm text-muted-foreground">
-            {spec.description}
-          </p>
-        )}
       </div>
     </div>
   );
@@ -1151,13 +1253,94 @@ function ValidationStateBadge({
   }
 }
 
+const TRANSPORT_OPTIONS: SelectOption[] = [
+  { 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,
 }: {
-  readonly serverType: NonNullable<
-    import("@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/spec_pb").McpServerSpec["serverType"]
-  >;
+  readonly serverType?: import("@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/spec_pb").McpServerSpec["serverType"];
+  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 [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;
+      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: 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">
@@ -1165,63 +1348,265 @@ function ServerConfigSection({
           <span className="text-xs font-medium text-muted-foreground">
             Type
           </span>
-          <span className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs font-medium text-foreground">
-            {serverType.case}
-          </span>
+          {editable && saveMcpField ? (
+            <InlineEditSelect
+              value={serverType?.case ?? "http"}
+              options={TRANSPORT_OPTIONS}
+              onSave={handleTransportChange}
+              isSaving={isSaving}
+            />
+          ) : (
+            <span className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs font-medium text-foreground">
+              {serverType?.case ?? "none"}
+            </span>
+          )}
         </div>
 
-        {serverType.case === "stdio" && (
+        {serverType?.case === "stdio" && (
           <>
             <div className="flex items-baseline gap-2">
               <span className="text-xs font-medium text-muted-foreground">
                 Command
               </span>
-              <code className="font-mono text-sm text-foreground">
-                {serverType.value.command}
-                {serverType.value.args.length > 0 &&
-                  ` ${serverType.value.args.join(" ")}`}
-              </code>
+              {editable && saveMcpField ? (
+                <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"
+                />
+              ) : (
+                <code className="font-mono text-sm text-foreground">
+                  {serverType.value.command}
+                  {serverType.value.args.length > 0 &&
+                    ` ${serverType.value.args.join(" ")}`}
+                </code>
+              )}
             </div>
-            {serverType.value.workingDir && (
+            {(editable || serverType.value.workingDir) && (
               <div className="flex items-baseline gap-2">
                 <span className="text-xs font-medium text-muted-foreground">
                   Working Dir
                 </span>
-                <code className="font-mono text-xs text-foreground">
-                  {serverType.value.workingDir}
-                </code>
+                {editable && saveMcpField ? (
+                  <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"
+                  />
+                ) : (
+                  <code className="font-mono text-xs text-foreground">
+                    {serverType.value.workingDir}
+                  </code>
+                )}
               </div>
             )}
           </>
         )}
 
-        {serverType.case === "http" && (
+        {serverType?.case === "http" && (
           <>
             <div className="flex items-baseline gap-2">
               <span className="text-xs font-medium text-muted-foreground">
                 URL
               </span>
-              <code className="break-all font-mono text-sm text-foreground">
-                {serverType.value.url}
-              </code>
+              {editable && saveMcpField ? (
+                <InlineEditText
+                  value={serverType.value.url}
+                  onSave={async (v) =>
+                    saveMcpField("http", { ...currentHttpConfig!, url: v })
+                  }
+                  isSaving={isSaving}
+                  placeholder="https://example.com/mcp"
+                />
+              ) : (
+                <code className="break-all font-mono text-sm text-foreground">
+                  {serverType.value.url}
+                </code>
+              )}
             </div>
-            {serverType.value.timeoutSeconds > 0 && (
+            {(editable || serverType.value.timeoutSeconds > 0) && (
               <div className="flex items-baseline gap-2">
                 <span className="text-xs font-medium text-muted-foreground">
                   Timeout
                 </span>
-                <span className="text-xs text-foreground">
-                  {serverType.value.timeoutSeconds}s
-                </span>
+                {editable && saveMcpField ? (
+                  <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;
+                    }}
+                  />
+                ) : (
+                  <span className="text-xs text-foreground">
+                    {serverType.value.timeoutSeconds}s
+                  </span>
+                )}
               </div>
             )}
           </>
         )}
       </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,
 }: {
@@ -1294,53 +1679,138 @@ function ResourceTemplatesList({
 function EnvSection({
   data,
   oauthTargetEnvVar,
+  editable,
+  isSaving,
+  saveMcpField,
 }: {
   readonly data: { [key: string]: EnvVarDeclaration };
   readonly oauthTargetEnvVar: string | null;
+  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 entries = Object.entries(data).sort(([a], [b]) =>
     a.localeCompare(b),
   );
 
+  const envRows: KeyValueRow[] = useMemo(
+    () =>
+      entries.map(([key, decl]) => ({
+        key,
+        value: "",
+        isSecret: decl.isSecret,
+        description: decl.description,
+        optional: decl.optional,
+      })),
+    [entries],
+  );
+
+  const handleEnvSave = useCallback(
+    async (rows: KeyValueRow[]) => {
+      if (!saveMcpField) return false;
+      const env: Record<string, { isSecret?: boolean; description?: string; optional?: boolean }> = {};
+      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 (
-    <Section title={`Environment Variables (${entries.length})`}>
-      <div className="flex flex-col divide-y divide-border">
-        {entries.map(([name, env]) => {
-          const isOAuthManaged = name === oauthTargetEnvVar;
-          return (
-            <div key={name} className="flex items-start gap-3 px-3 py-2">
-              <code className="shrink-0 font-mono text-sm font-medium text-foreground">
-                {name}
-              </code>
-              <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
-                {env.isSecret ? "secret" : "config"}
-              </span>
-              {isOAuthManaged && (
-                <span className="shrink-0 rounded bg-primary-subtle px-1.5 py-0.5 text-[10px] font-medium text-primary">
-                  oauth
-                </span>
-              )}
-              {env.optional && (
-                <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground-subtle">
-                  optional
-                </span>
-              )}
-              {env.description && (
-                <span className="text-xs text-muted-foreground">
-                  {env.description}
+    <Section title="Environment Variables" count={entries.length} onEdit={editable ? () => setEnvEditing((v) => !v) : undefined}>
+      {editable ? (
+        <InlineEditKeyValue
+          value={envRows}
+          onSave={handleEnvSave}
+          isSaving={isSaving}
+          editing={envEditing}
+          onEditingChange={setEnvEditing}
+          showSecretToggle
+          showOptionalToggle
+          showDescription
+          keyLabel="Variable name"
+        />
+      ) : (
+        <div className="flex flex-col divide-y divide-border">
+          {entries.map(([name, env]) => {
+            const isOAuthManaged = name === oauthTargetEnvVar;
+            return (
+              <div key={name} className="flex items-start gap-3 px-3 py-2">
+                <code className="shrink-0 font-mono text-sm font-medium text-foreground">
+                  {name}
+                </code>
+                <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+                  {env.isSecret ? "secret" : "config"}
                 </span>
-              )}
-            </div>
-          );
-        })}
-      </div>
+                {isOAuthManaged && (
+                  <span className="shrink-0 rounded bg-primary-subtle px-1.5 py-0.5 text-[10px] font-medium text-primary">
+                    oauth
+                  </span>
+                )}
+                {env.optional && (
+                  <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground-subtle">
+                    optional
+                  </span>
+                )}
+                {env.description && (
+                  <span className="text-xs text-muted-foreground">
+                    {env.description}
+                  </span>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
     </Section>
   );
 }
 
-function TagsSection({ tags }: { readonly tags: readonly string[] }) {
+function TagsSection({
+  tags,
+  editable,
+  isSaving,
+  saveMcpField,
+}: {
+  readonly tags: readonly string[];
+  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 tagRows: KeyValueRow[] = useMemo(
+    () => tags.map((t) => ({ key: t, value: "" })),
+    [tags],
+  );
+
+  const handleTagsSave = useCallback(
+    async (rows: KeyValueRow[]) => {
+      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 (
-    <Section title={`Tags (${tags.length})`}>
+    <Section title="Tags" count={tags.length}>
       <div className="flex flex-wrap gap-1.5 p-3">
         {tags.map((tag) => (
           <span
@@ -1350,6 +1820,9 @@ function TagsSection({ tags }: { readonly tags: readonly string[] }) {
             {tag}
           </span>
         ))}
+        {editable && tags.length === 0 && (
+          <p className="text-xs text-muted-foreground italic">No tags</p>
+        )}
       </div>
     </Section>
   );
@@ -1364,6 +1837,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">
@@ -1375,20 +1861,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>
   );
 }
@@ -1402,9 +1965,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 (
@@ -1421,19 +2008,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>
   );
@@ -1466,7 +2090,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">
@@ -1484,24 +2111,6 @@ function PolicyGroup({
 // Shared layout primitives
 // ---------------------------------------------------------------------------
 
-function Section({
-  title,
-  children,
-}: {
-  readonly title: string;
-  readonly children: React.ReactNode;
-}) {
-  return (
-    <section>
-      <h3 className="mb-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
-        {title}
-      </h3>
-      <div className="overflow-hidden rounded-lg border border-border">
-        {children}
-      </div>
-    </section>
-  );
-}
 
 function Dot() {
   return (
@@ -1768,6 +2377,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