From 18107d99e9d3e4b7e46a1defb2d9040247ed8826 Mon Sep 17 00:00:00 2001
From: m4 <m4@m4deMac-mini.local>
Date: Wed, 22 Jul 2026 11:01:18 +0800
Subject: [PATCH] feat: collapsible model parameter sections in the Registry
 Editor

Saved models start collapsed to a compact status row (key, availability,
enabled, Test); new unsaved models start expanded for editing. Test
outcomes stay visible regardless of collapse state.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/app/components/RegistryEditor.tsx | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/app/components/RegistryEditor.tsx b/src/app/components/RegistryEditor.tsx
index 0ebf907..2f15016 100644
--- a/src/app/components/RegistryEditor.tsx
+++ b/src/app/components/RegistryEditor.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { invalidateAvailableModels } from "@/app/hooks/useAvailableModels";
@@ -238,6 +239,11 @@ function ModelEditor({
   const runtime = model.runtime;
   const setRuntime = (patch: Partial<ModelConfig["runtime"]>) =>
     onChange({ ...model, runtime: { ...runtime, ...patch } });
+  // New (unsaved) models start expanded so their parameters can be filled
+  // in; saved models start collapsed to keep the provider overview compact.
+  const [expanded, setExpanded] = useState(
+    () => availabilityFor(data, ref) === null
+  );
   const capability = (key: "tools" | "vision" | "structured_output") => {
     const protocolAllows = spec?.protocol_capabilities[key] !== false;
     return (
@@ -263,6 +269,19 @@ function ModelEditor({
   return (
     <div className="space-y-2 rounded-md border border-border p-3">
       <div className="flex flex-wrap items-center gap-2">
+        <button
+          type="button"
+          aria-expanded={expanded}
+          aria-label={`Toggle parameters for ${model.key}`}
+          className="text-muted-foreground hover:text-foreground"
+          onClick={() => setExpanded((current) => !current)}
+        >
+          {expanded ? (
+            <ChevronDown className="size-4" aria-hidden="true" />
+          ) : (
+            <ChevronRight className="size-4" aria-hidden="true" />
+          )}
+        </button>
         <span className="font-mono text-sm font-medium">{model.key}</span>
         <AvailabilityBadge data={data} ref_={ref} />
         <span className="flex-1" />
@@ -294,6 +313,8 @@ function ModelEditor({
           Remove
         </Button>
       </div>
+      {expanded && (
+        <>
       <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
         <Field label="Model key">
           <input
@@ -479,6 +500,8 @@ function ModelEditor({
         {capability("vision")}
         {capability("structured_output")}
       </div>
+        </>
+      )}
       {outcome && (
         <div
           className={`rounded-md border px-3 py-2 text-xs ${