feat(web): ParamsPanel splits params into basic + advanced disclosure

web/src/components/ParamsPanel.tsx

@@ -6,78 +6,97 @@ type Props = {
   onChange: (next: Record<string, unknown>) => void;
 };
 
+function renderControl(
+  s: ParamSpec,
+  values: Record<string, unknown>,
+  set: (name: string, v: unknown) => void,
+) {
+  const id = `param-${s.name}`;
+  const current: unknown = values[s.name] ?? s.default;
+  if (s.type === "float" || s.type === "int") {
+    const n = typeof current === "number" ? current : Number(current);
+    return (
+      <div key={s.name} className="space-y-1.5">
+        <div className="flex items-baseline justify-between">
+          <label htmlFor={id} className="label-mono">{s.label}</label>
+          <span className="font-mono text-[12px] text-foreground tracking-wider">
+            {Number.isFinite(n) ? n.toFixed(2) : String(current)}
+          </span>
+        </div>
+        <input
+          id={id}
+          aria-label={s.label}
+          type="range"
+          min={s.min}
+          max={s.max}
+          step={s.step ?? 0.01}
+          value={Number.isFinite(n) ? n : 0}
+          onChange={(e) => set(s.name, Number(e.target.value))}
+          className="w-full accent-[hsl(var(--ember))]"
+        />
+        {s.help && (
+          <p className="text-[11px] text-muted-foreground/80 italic">{s.help}</p>
+        )}
+      </div>
+    );
+  }
+  if (s.type === "bool") {
+    return (
+      <label
+        key={s.name}
+        htmlFor={id}
+        className="flex items-center justify-between cursor-pointer"
+      >
+        <span className="label-mono">{s.label}</span>
+        <input
+          id={id}
+          aria-label={s.label}
+          type="checkbox"
+          checked={!!current}
+          onChange={(e) => set(s.name, e.target.checked)}
+          className="accent-[hsl(var(--ember))]"
+        />
+      </label>
+    );
+  }
+  return (
+    <div key={s.name} className="space-y-1.5">
+      <label htmlFor={id} className="label-mono block">{s.label}</label>
+      <select
+        id={id}
+        aria-label={s.label}
+        value={String(current)}
+        onChange={(e) => set(s.name, e.target.value)}
+        className="field-input font-mono text-[12px]"
+      >
+        {(s.choices ?? []).map((c) => (
+          <option key={c} value={c}>{c}</option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
 export default function ParamsPanel({ specs, values, onChange }: Props) {
   function set(name: string, v: unknown) {
     onChange({ ...values, [name]: v });
   }
+  const basic = specs.filter((s) => (s.group ?? "basic") === "basic");
+  const advanced = specs.filter((s) => s.group === "advanced");
   return (
     <div className="space-y-5">
-      {specs.map((s) => {
-        const id = `param-${s.name}`;
-        const current: unknown = values[s.name] ?? s.default;
-        if (s.type === "float" || s.type === "int") {
-          const n = typeof current === "number" ? current : Number(current);
-          return (
-            <div key={s.name} className="space-y-1.5">
-              <div className="flex items-baseline justify-between">
-                <label htmlFor={id} className="label-mono">{s.label}</label>
-                <span className="font-mono text-[12px] text-foreground tracking-wider">
-                  {Number.isFinite(n) ? n.toFixed(2) : String(current)}
-                </span>
-              </div>
-              <input
-                id={id}
-                aria-label={s.label}
-                type="range"
-                min={s.min}
-                max={s.max}
-                step={s.step ?? 0.01}
-                value={Number.isFinite(n) ? n : 0}
-                onChange={(e) => set(s.name, Number(e.target.value))}
-                className="w-full accent-[hsl(var(--ember))]"
-              />
-              {s.help && (
-                <p className="text-[11px] text-muted-foreground/80 italic">{s.help}</p>
-              )}
-            </div>
-          );
-        }
-        if (s.type === "bool") {
-          return (
-            <label
-              key={s.name}
-              htmlFor={id}
-              className="flex items-center justify-between cursor-pointer"
-            >
-              <span className="label-mono">{s.label}</span>
-              <input
-                id={id}
-                aria-label={s.label}
-                type="checkbox"
-                checked={!!current}
-                onChange={(e) => set(s.name, e.target.checked)}
-                className="accent-[hsl(var(--ember))]"
-              />
-            </label>
-          );
-        }
-        return (
-          <div key={s.name} className="space-y-1.5">
-            <label htmlFor={id} className="label-mono block">{s.label}</label>
-            <select
-              id={id}
-              aria-label={s.label}
-              value={String(current)}
-              onChange={(e) => set(s.name, e.target.value)}
-              className="field-input font-mono text-[12px]"
-            >
-              {(s.choices ?? []).map((c) => (
-                <option key={c} value={c}>{c}</option>
-              ))}
-            </select>
+      {basic.map((s) => renderControl(s, values, set))}
+      {advanced.length > 0 && (
+        <details className="card-paper p-3 [&_summary::-webkit-details-marker]:hidden">
+          <summary className="label-mono cursor-pointer select-none flex items-center gap-2">
+            <span className="inline-block transition-transform [details[open]>summary>&]:rotate-90">▸</span>
+            advanced · {advanced.length} params
+          </summary>
+          <div className="mt-4 space-y-5">
+            {advanced.map((s) => renderControl(s, values, set))}
           </div>
-        );
-      })}
+        </details>
+      )}
     </div>
   );
 }

web/src/lib/api.ts

@@ -10,6 +10,7 @@ export type ParamSpec = {
   step?: number;
   choices?: string[];
   help?: string;
+  group?: "basic" | "advanced";
 };
 
 export type ModelInfo = {

web/src/test/ParamsPanel.test.tsx

@@ -24,3 +24,37 @@ describe("ParamsPanel", () => {
     expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ exaggeration: 1.2 }));
   });
 });
+
+const specsMixed: ParamSpec[] = [
+  { name: "temperature", label: "Temperature", type: "float", default: 0.8, min: 0.1, max: 1.5, step: 0.05, group: "basic" },
+  { name: "seed", label: "Seed", type: "int", default: -1, min: -1, step: 1, group: "advanced" },
+  { name: "top_p", label: "Top p", type: "float", default: 1.0, min: 0, max: 1, step: 0.01, group: "advanced" },
+];
+
+describe("ParamsPanel groups", () => {
+  it("renders basic params and a closed advanced disclosure by default", () => {
+    render(<ParamsPanel specs={specsMixed} values={{}} onChange={() => {}} />);
+    expect(screen.getByLabelText(/temperature/i)).toBeInTheDocument();
+    // advanced is in the DOM but not visible until <details> opens
+    const seed = screen.getByLabelText(/^seed$/i) as HTMLInputElement;
+    const detailsAncestor = seed.closest("details");
+    expect(detailsAncestor).not.toBeNull();
+    expect(detailsAncestor!.open).toBe(false);
+  });
+
+  it("opens disclosure on summary click and shows advanced params", () => {
+    render(<ParamsPanel specs={specsMixed} values={{}} onChange={() => {}} />);
+    const summary = screen.getByText(/advanced/i);
+    fireEvent.click(summary);
+    const seed = screen.getByLabelText(/^seed$/i) as HTMLInputElement;
+    expect(seed.closest("details")!.open).toBe(true);
+  });
+
+  it("propagates onChange from advanced params", () => {
+    const onChange = vi.fn();
+    render(<ParamsPanel specs={specsMixed} values={{}} onChange={onChange} />);
+    fireEvent.click(screen.getByText(/advanced/i));
+    fireEvent.change(screen.getByLabelText(/^top p$/i), { target: { value: "0.6" } });
+    expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ top_p: 0.6 }));
+  });
+});