@stigmer/react 0.5.0 → 0.5.1

package/src/mcp-server/McpServerDetailView.tsx

@@ -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],
@@ -443,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}
@@ -635,8 +629,6 @@ function ConnectBar({
   onConnect,
   onClearConnectionError,
   hasDiscoveredTools,
-  toolCount,
-  policyCount,
   credentialsLoading,
   oauthPhase,
   authMode,
@@ -670,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";
@@ -743,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";
   })();
 
@@ -1086,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));
@@ -1289,6 +1272,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 +1301,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 +1427,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 +1448,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 +1469,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 +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">
@@ -1680,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>
   );
 }
@@ -1707,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 (
@@ -1726,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>
   );
@@ -1771,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">
@@ -2055,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

package/src/models/ModelRegistryContext.ts

@@ -8,6 +8,8 @@ export interface ModelRegistryState {
   readonly models: readonly ModelInfo[];
   readonly isLoading: boolean;
   readonly error: Error | null;
+  /** Retry fetching the model registry. No-op while a fetch is in flight. */
+  readonly refetch: () => void;
 }
 
 /**
@@ -21,6 +23,7 @@ export const ModelRegistryContext = createContext<ModelRegistryState>({
   models: [],
   isLoading: true,
   error: null,
+  refetch: () => {},
 });
 
 /**

package/src/models/ModelSelector.tsx

@@ -119,7 +119,7 @@ export function ModelSelector({
     }
   }, [initialHarness, isHarnessLocked]);
 
-  const { models, featured, defaultModel, getModel, byProvider } = useModelRegistry(
+  const { models, featured, defaultModel, getModel, byProvider, isLoading, error, refetch } = useModelRegistry(
     { harness: activeHarness },
   );
 
@@ -393,7 +393,30 @@ export function ModelSelector({
               aria-label="Available models"
               className="max-h-72 overflow-y-auto p-1"
             >
-              {visibleModels.length === 0 && (
+              {visibleModels.length === 0 && isLoading && (
+                <div className="flex items-center justify-center gap-2 px-2 py-3">
+                  <div className="size-3 animate-spin rounded-full border border-muted border-t-primary" />
+                  <span className="text-xs text-muted-foreground">Loading models…</span>
+                </div>
+              )}
+
+              {visibleModels.length === 0 && !isLoading && error != null && (
+                <div className="flex flex-col items-center gap-1.5 px-2 py-3">
+                  <span className="text-xs text-muted-foreground">Failed to load models</span>
+                  <button
+                    type="button"
+                    className={cn(
+                      "rounded-md border border-border bg-background px-2.5 py-1 text-xs text-foreground",
+                      "hover:bg-accent-hover transition-colors cursor-pointer",
+                    )}
+                    onClick={refetch}
+                  >
+                    Retry
+                  </button>
+                </div>
+              )}
+
+              {visibleModels.length === 0 && !isLoading && error == null && (
                 <div className="px-2 py-3 text-center text-xs text-muted-foreground">
                   No models found
                 </div>