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:
@@ -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 ${
|
||||
|
||||
Reference in New Issue
Block a user