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>
This commit is contained in:
m4
2026-07-22 11:01:18 +08:00
parent 340136ebc1
commit 18107d99e9
+23
View File
@@ -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 ${