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,
|
DialogTitle,
|
||||||
} from "@/components/ui/dialog"
|
} from "@/components/ui/dialog"
|
||||||
import { createModelProvider } from "@/lib/api"
|
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 {
|
interface AddModelProviderDialogProps {
|
||||||
open: boolean
|
open: boolean
|
||||||
@@ -159,7 +163,7 @@ export function AddModelProviderDialog({
|
|||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<label className="text-xs font-medium">{t("agentTypes")}</label>
|
<label className="text-xs font-medium">{t("agentTypes")}</label>
|
||||||
<div className="flex flex-wrap gap-1.5">
|
<div className="flex flex-wrap gap-1.5">
|
||||||
{ALL_AGENT_TYPES.map((at) => (
|
{MODEL_PROVIDER_AGENT_TYPES.map((at) => (
|
||||||
<Button
|
<Button
|
||||||
key={at}
|
key={at}
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ import {
|
|||||||
} from "@/components/ui/dialog"
|
} from "@/components/ui/dialog"
|
||||||
import { updateModelProvider } from "@/lib/api"
|
import { updateModelProvider } from "@/lib/api"
|
||||||
import {
|
import {
|
||||||
ALL_AGENT_TYPES,
|
MODEL_PROVIDER_AGENT_TYPES,
|
||||||
AGENT_LABELS,
|
AGENT_LABELS,
|
||||||
type AgentType,
|
type AgentType,
|
||||||
type ModelProviderInfo,
|
type ModelProviderInfo,
|
||||||
@@ -168,7 +168,7 @@ export function EditModelProviderDialog({
|
|||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
<label className="text-xs font-medium">{t("agentTypes")}</label>
|
<label className="text-xs font-medium">{t("agentTypes")}</label>
|
||||||
<div className="flex flex-wrap gap-1.5">
|
<div className="flex flex-wrap gap-1.5">
|
||||||
{ALL_AGENT_TYPES.map((at) => (
|
{MODEL_PROVIDER_AGENT_TYPES.map((at) => (
|
||||||
<Button
|
<Button
|
||||||
key={at}
|
key={at}
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ import {
|
|||||||
} from "@/components/ui/alert-dialog"
|
} from "@/components/ui/alert-dialog"
|
||||||
import { listModelProviders, deleteModelProvider } from "@/lib/api"
|
import { listModelProviders, deleteModelProvider } from "@/lib/api"
|
||||||
import {
|
import {
|
||||||
ALL_AGENT_TYPES,
|
MODEL_PROVIDER_AGENT_TYPES,
|
||||||
AGENT_LABELS,
|
AGENT_LABELS,
|
||||||
type AgentType,
|
type AgentType,
|
||||||
type ModelProviderInfo,
|
type ModelProviderInfo,
|
||||||
@@ -114,7 +114,7 @@ export function ModelProviderSettings() {
|
|||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
<SelectItem value="__all__">{t("filterAll")}</SelectItem>
|
<SelectItem value="__all__">{t("filterAll")}</SelectItem>
|
||||||
{ALL_AGENT_TYPES.map((at) => (
|
{MODEL_PROVIDER_AGENT_TYPES.map((at) => (
|
||||||
<SelectItem key={at} value={at}>
|
<SelectItem key={at} value={at}>
|
||||||
{AGENT_LABELS[at]}
|
{AGENT_LABELS[at]}
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
@@ -147,9 +147,14 @@ export function ModelProviderSettings() {
|
|||||||
key={p.id}
|
key={p.id}
|
||||||
className="flex items-center justify-between gap-3 rounded-md border px-3 py-2.5"
|
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="min-w-0 flex-1 flex items-center gap-3">
|
||||||
<div className="flex items-center gap-1.5 flex-wrap">
|
<div className="min-w-0 space-y-0.5">
|
||||||
<span className="text-sm font-medium">{p.name}</span>
|
<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) => (
|
{p.agent_types.map((at) => (
|
||||||
<Badge
|
<Badge
|
||||||
key={at}
|
key={at}
|
||||||
@@ -160,9 +165,6 @@ export function ModelProviderSettings() {
|
|||||||
</Badge>
|
</Badge>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className="truncate text-xs text-muted-foreground font-mono">
|
|
||||||
{p.api_url}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex shrink-0 gap-1">
|
<div className="flex shrink-0 gap-1">
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@@ -229,6 +229,12 @@ export const ALL_AGENT_TYPES: AgentType[] = [
|
|||||||
"cline",
|
"cline",
|
||||||
]
|
]
|
||||||
|
|
||||||
|
export const MODEL_PROVIDER_AGENT_TYPES: AgentType[] = [
|
||||||
|
"claude_code",
|
||||||
|
"codex",
|
||||||
|
"gemini",
|
||||||
|
]
|
||||||
|
|
||||||
export const AGENT_LABELS: Record<AgentType, string> = {
|
export const AGENT_LABELS: Record<AgentType, string> = {
|
||||||
claude_code: "Claude Code",
|
claude_code: "Claude Code",
|
||||||
codex: "Codex",
|
codex: "Codex",
|
||||||
|
|||||||
Reference in New Issue
Block a user