fix(settings): limit model provider agent types and adjust card layout
Restrict supported agent types to Claude Code, Codex CLI, and Gemini CLI. Reposition agent type badges to be vertically centered beside the name and API URL block in provider cards. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -15,7 +15,11 @@ import {
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
import { createModelProvider } from "@/lib/api"
|
||||
import { ALL_AGENT_TYPES, AGENT_LABELS, type AgentType } from "@/lib/types"
|
||||
import {
|
||||
MODEL_PROVIDER_AGENT_TYPES,
|
||||
AGENT_LABELS,
|
||||
type AgentType,
|
||||
} from "@/lib/types"
|
||||
|
||||
interface AddModelProviderDialogProps {
|
||||
open: boolean
|
||||
@@ -159,7 +163,7 @@ export function AddModelProviderDialog({
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium">{t("agentTypes")}</label>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{ALL_AGENT_TYPES.map((at) => (
|
||||
{MODEL_PROVIDER_AGENT_TYPES.map((at) => (
|
||||
<Button
|
||||
key={at}
|
||||
type="button"
|
||||
|
||||
@@ -16,7 +16,7 @@ import {
|
||||
} from "@/components/ui/dialog"
|
||||
import { updateModelProvider } from "@/lib/api"
|
||||
import {
|
||||
ALL_AGENT_TYPES,
|
||||
MODEL_PROVIDER_AGENT_TYPES,
|
||||
AGENT_LABELS,
|
||||
type AgentType,
|
||||
type ModelProviderInfo,
|
||||
@@ -168,7 +168,7 @@ export function EditModelProviderDialog({
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium">{t("agentTypes")}</label>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{ALL_AGENT_TYPES.map((at) => (
|
||||
{MODEL_PROVIDER_AGENT_TYPES.map((at) => (
|
||||
<Button
|
||||
key={at}
|
||||
type="button"
|
||||
|
||||
@@ -26,7 +26,7 @@ import {
|
||||
} from "@/components/ui/alert-dialog"
|
||||
import { listModelProviders, deleteModelProvider } from "@/lib/api"
|
||||
import {
|
||||
ALL_AGENT_TYPES,
|
||||
MODEL_PROVIDER_AGENT_TYPES,
|
||||
AGENT_LABELS,
|
||||
type AgentType,
|
||||
type ModelProviderInfo,
|
||||
@@ -114,7 +114,7 @@ export function ModelProviderSettings() {
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="__all__">{t("filterAll")}</SelectItem>
|
||||
{ALL_AGENT_TYPES.map((at) => (
|
||||
{MODEL_PROVIDER_AGENT_TYPES.map((at) => (
|
||||
<SelectItem key={at} value={at}>
|
||||
{AGENT_LABELS[at]}
|
||||
</SelectItem>
|
||||
@@ -147,9 +147,14 @@ export function ModelProviderSettings() {
|
||||
key={p.id}
|
||||
className="flex items-center justify-between gap-3 rounded-md border px-3 py-2.5"
|
||||
>
|
||||
<div className="min-w-0 flex-1 space-y-1">
|
||||
<div className="flex items-center gap-1.5 flex-wrap">
|
||||
<span className="text-sm font-medium">{p.name}</span>
|
||||
<div className="min-w-0 flex-1 flex items-center gap-3">
|
||||
<div className="min-w-0 space-y-0.5">
|
||||
<div className="text-sm font-medium truncate">{p.name}</div>
|
||||
<div className="truncate text-xs text-muted-foreground font-mono">
|
||||
{p.api_url}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 gap-1">
|
||||
{p.agent_types.map((at) => (
|
||||
<Badge
|
||||
key={at}
|
||||
@@ -160,9 +165,6 @@ export function ModelProviderSettings() {
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
<div className="truncate text-xs text-muted-foreground font-mono">
|
||||
{p.api_url}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 gap-1">
|
||||
<Button
|
||||
|
||||
@@ -229,6 +229,12 @@ export const ALL_AGENT_TYPES: AgentType[] = [
|
||||
"cline",
|
||||
]
|
||||
|
||||
export const MODEL_PROVIDER_AGENT_TYPES: AgentType[] = [
|
||||
"claude_code",
|
||||
"codex",
|
||||
"gemini",
|
||||
]
|
||||
|
||||
export const AGENT_LABELS: Record<AgentType, string> = {
|
||||
claude_code: "Claude Code",
|
||||
codex: "Codex",
|
||||
|
||||
Reference in New Issue
Block a user