feat: fix slash commands, add badge UI, multi-provider management
Slash commands: - Fix skills not appearing (removed non-existent `enabled` filter) - Add badge/capsule UI for prompt-type commands (/compact, /review, etc.) - SDK-native commands sent directly; CLI-only commands expanded to prompts - /clear now resets SDK session and clears database messages - /cost shows actual aggregated token usage statistics - Keyboard: Backspace/Escape to remove badge, arrow keys auto-scroll popover - Add /memory command for editing CLAUDE.md Multi-provider management: - CRUD API for API providers with SQLite storage - ProviderManager UI with quick presets (GLM, Kimi, MiniMax, etc.) - Dynamic model labels based on active provider - Environment variable injection with conflict resolution Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
7418andClaude Opus 4.6 committed
1 parent
21226fc010
commit
4e81eaa60b
14 files changed
+1436
-145
No files matched your search
@@ -0,0 +1,318 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { HugeiconsIcon } from "@hugeicons/react";
|
||||
import { Loading02Icon, ArrowDown01Icon, ArrowUp01Icon } from "@hugeicons/core-free-icons";
|
||||
import type { ApiProvider } from "@/types";
|
||||
|
||||
const PROVIDER_PRESETS: Record<string, { base_url: string; extra_env: string }> = {
|
||||
anthropic: { base_url: "https://api.anthropic.com", extra_env: "{}" },
|
||||
openrouter: { base_url: "https://openrouter.ai/api", extra_env: '{"ANTHROPIC_API_KEY":""}' },
|
||||
bedrock: { base_url: "", extra_env: '{"CLAUDE_CODE_USE_BEDROCK":"1","AWS_REGION":"us-east-1","CLAUDE_CODE_SKIP_BEDROCK_AUTH":"1"}' },
|
||||
vertex: { base_url: "", extra_env: '{"CLAUDE_CODE_USE_VERTEX":"1","CLOUD_ML_REGION":"us-east5","CLAUDE_CODE_SKIP_VERTEX_AUTH":"1"}' },
|
||||
custom: { base_url: "", extra_env: "{}" },
|
||||
};
|
||||
|
||||
const PROVIDER_TYPES = [
|
||||
{ value: "anthropic", label: "Anthropic" },
|
||||
{ value: "openrouter", label: "OpenRouter" },
|
||||
{ value: "bedrock", label: "AWS Bedrock" },
|
||||
{ value: "vertex", label: "Google Vertex" },
|
||||
{ value: "custom", label: "Custom" },
|
||||
];
|
||||
|
||||
interface ProviderFormProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
mode: "create" | "edit";
|
||||
provider?: ApiProvider | null;
|
||||
onSave: (data: ProviderFormData) => Promise<void>;
|
||||
initialPreset?: { name: string; provider_type: string; base_url: string; extra_env?: string } | null;
|
||||
}
|
||||
|
||||
export interface ProviderFormData {
|
||||
name: string;
|
||||
provider_type: string;
|
||||
base_url: string;
|
||||
api_key: string;
|
||||
extra_env: string;
|
||||
notes: string;
|
||||
}
|
||||
|
||||
export function ProviderForm({
|
||||
open,
|
||||
onOpenChange,
|
||||
mode,
|
||||
provider,
|
||||
onSave,
|
||||
initialPreset,
|
||||
}: ProviderFormProps) {
|
||||
const [name, setName] = useState("");
|
||||
const [providerType, setProviderType] = useState("anthropic");
|
||||
const [baseUrl, setBaseUrl] = useState("");
|
||||
const [apiKey, setApiKey] = useState("");
|
||||
const [extraEnv, setExtraEnv] = useState("{}");
|
||||
const [notes, setNotes] = useState("");
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [showAdvanced, setShowAdvanced] = useState(false);
|
||||
|
||||
// Reset form when dialog opens
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
setError(null);
|
||||
setSaving(false);
|
||||
|
||||
if (mode === "edit" && provider) {
|
||||
setName(provider.name);
|
||||
setProviderType(provider.provider_type);
|
||||
setBaseUrl(provider.base_url);
|
||||
setApiKey("");
|
||||
setExtraEnv(provider.extra_env || "{}");
|
||||
setNotes(provider.notes || "");
|
||||
// Show advanced if extra_env has content
|
||||
try {
|
||||
const parsed = JSON.parse(provider.extra_env || "{}");
|
||||
setShowAdvanced(Object.keys(parsed).length > 0);
|
||||
} catch {
|
||||
setShowAdvanced(true);
|
||||
}
|
||||
} else if (initialPreset) {
|
||||
setName(initialPreset.name);
|
||||
setProviderType(initialPreset.provider_type);
|
||||
setBaseUrl(initialPreset.base_url);
|
||||
setApiKey("");
|
||||
// Use extra_env from preset if provided, otherwise look up by type
|
||||
const envStr = initialPreset.extra_env || PROVIDER_PRESETS[initialPreset.provider_type]?.extra_env || "{}";
|
||||
setExtraEnv(envStr);
|
||||
setNotes("");
|
||||
try {
|
||||
const parsed = JSON.parse(envStr);
|
||||
setShowAdvanced(Object.keys(parsed).length > 0);
|
||||
} catch {
|
||||
setShowAdvanced(false);
|
||||
}
|
||||
} else {
|
||||
setName("");
|
||||
setProviderType("anthropic");
|
||||
setBaseUrl(PROVIDER_PRESETS.anthropic.base_url);
|
||||
setApiKey("");
|
||||
setExtraEnv("{}");
|
||||
setNotes("");
|
||||
setShowAdvanced(false);
|
||||
}
|
||||
}, [open, mode, provider, initialPreset]);
|
||||
|
||||
const handleTypeChange = (type: string) => {
|
||||
setProviderType(type);
|
||||
const preset = PROVIDER_PRESETS[type];
|
||||
if (preset) {
|
||||
setBaseUrl(preset.base_url);
|
||||
setExtraEnv(preset.extra_env);
|
||||
try {
|
||||
const parsed = JSON.parse(preset.extra_env);
|
||||
setShowAdvanced(Object.keys(parsed).length > 0);
|
||||
} catch {
|
||||
setShowAdvanced(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!name.trim()) {
|
||||
setError("Name is required");
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate extra_env JSON
|
||||
try {
|
||||
JSON.parse(extraEnv);
|
||||
} catch {
|
||||
setError("Extra environment variables must be valid JSON");
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
await onSave({
|
||||
name: name.trim(),
|
||||
provider_type: providerType,
|
||||
base_url: baseUrl.trim(),
|
||||
api_key: apiKey,
|
||||
extra_env: extraEnv,
|
||||
notes: notes.trim(),
|
||||
});
|
||||
onOpenChange(false);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to save provider");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const isMaskedKey = mode === "edit" && provider?.api_key?.startsWith("***");
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-[28rem] overflow-hidden">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{mode === "edit" ? "Edit Provider" : "Add Provider"}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{mode === "edit"
|
||||
? "Update the API provider configuration."
|
||||
: "Configure a new API provider for Claude Code."}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4 min-w-0">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="provider-name" className="text-xs text-muted-foreground">
|
||||
Name
|
||||
</Label>
|
||||
<Input
|
||||
id="provider-name"
|
||||
placeholder="My API Provider"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="provider-type" className="text-xs text-muted-foreground">
|
||||
Provider Type
|
||||
</Label>
|
||||
<Select value={providerType} onValueChange={handleTypeChange}>
|
||||
<SelectTrigger className="w-full text-sm">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{PROVIDER_TYPES.map((t) => (
|
||||
<SelectItem key={t.value} value={t.value}>
|
||||
{t.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="provider-base-url" className="text-xs text-muted-foreground">
|
||||
API Base URL
|
||||
</Label>
|
||||
<Input
|
||||
id="provider-base-url"
|
||||
placeholder="https://api.anthropic.com"
|
||||
value={baseUrl}
|
||||
onChange={(e) => setBaseUrl(e.target.value)}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="provider-api-key" className="text-xs text-muted-foreground">
|
||||
API Key
|
||||
</Label>
|
||||
<Input
|
||||
id="provider-api-key"
|
||||
type="password"
|
||||
placeholder={isMaskedKey ? "Leave empty to keep current key" : "sk-ant-..."}
|
||||
value={apiKey}
|
||||
onChange={(e) => setApiKey(e.target.value)}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Advanced options toggle */}
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||||
onClick={() => setShowAdvanced(!showAdvanced)}
|
||||
>
|
||||
<HugeiconsIcon
|
||||
icon={showAdvanced ? ArrowUp01Icon : ArrowDown01Icon}
|
||||
className="h-3 w-3"
|
||||
/>
|
||||
Advanced Options
|
||||
</button>
|
||||
|
||||
{showAdvanced && (
|
||||
<div className="space-y-4 border-t border-border/50 pt-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="provider-extra-env" className="text-xs text-muted-foreground">
|
||||
Extra Environment Variables (JSON)
|
||||
</Label>
|
||||
<Textarea
|
||||
id="provider-extra-env"
|
||||
placeholder='{"KEY": "value"}'
|
||||
value={extraEnv}
|
||||
onChange={(e) => setExtraEnv(e.target.value)}
|
||||
className="font-mono text-sm min-h-[80px]"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="provider-notes" className="text-xs text-muted-foreground">
|
||||
Notes
|
||||
</Label>
|
||||
<Textarea
|
||||
id="provider-notes"
|
||||
placeholder="Optional notes about this provider..."
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
className="text-sm"
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={saving}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={saving} className="gap-2">
|
||||
{saving && (
|
||||
<HugeiconsIcon icon={Loading02Icon} className="h-4 w-4 animate-spin" />
|
||||
)}
|
||||
{saving ? "Saving..." : mode === "edit" ? "Update" : "Add Provider"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,408 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { HugeiconsIcon } from "@hugeicons/react";
|
||||
import {
|
||||
PlusSignIcon,
|
||||
Loading02Icon,
|
||||
Delete02Icon,
|
||||
PencilEdit01Icon,
|
||||
Tick01Icon,
|
||||
ServerStack01Icon,
|
||||
Cancel01Icon,
|
||||
} from "@hugeicons/core-free-icons";
|
||||
import { ProviderForm } from "./ProviderForm";
|
||||
import type { ProviderFormData } from "./ProviderForm";
|
||||
import type { ApiProvider } from "@/types";
|
||||
|
||||
const QUICK_PRESETS = [
|
||||
{ name: "Anthropic", provider_type: "anthropic", base_url: "https://api.anthropic.com" },
|
||||
{ name: "OpenRouter", provider_type: "openrouter", base_url: "https://openrouter.ai/api" },
|
||||
{ name: "GLM (CN)", provider_type: "custom", base_url: "https://open.bigmodel.cn/api/anthropic", extra_env: '{"API_TIMEOUT_MS":"3000000","ANTHROPIC_API_KEY":""}' },
|
||||
{ name: "GLM (Global)", provider_type: "custom", base_url: "https://api.z.ai/api/anthropic", extra_env: '{"API_TIMEOUT_MS":"3000000","ANTHROPIC_API_KEY":""}' },
|
||||
{ name: "Kimi Coding Plan", provider_type: "custom", base_url: "https://api.kimi.com/coding/", extra_env: '{"ANTHROPIC_AUTH_TOKEN":""}' },
|
||||
{ name: "Moonshot", provider_type: "custom", base_url: "https://api.moonshot.cn/anthropic", extra_env: '{"ANTHROPIC_API_KEY":""}' },
|
||||
{ name: "MiniMax (CN)", provider_type: "custom", base_url: "https://api.minimaxi.com/anthropic", extra_env: '{"API_TIMEOUT_MS":"3000000","CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC":"1","ANTHROPIC_API_KEY":""}' },
|
||||
{ name: "MiniMax (Global)", provider_type: "custom", base_url: "https://api.minimax.io/anthropic", extra_env: '{"API_TIMEOUT_MS":"3000000","CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC":"1","ANTHROPIC_API_KEY":""}' },
|
||||
{ name: "AWS Bedrock", provider_type: "bedrock", base_url: "" },
|
||||
{ name: "Google Vertex", provider_type: "vertex", base_url: "" },
|
||||
{ name: "LiteLLM", provider_type: "custom", base_url: "http://localhost:4000" },
|
||||
];
|
||||
|
||||
export function ProviderManager() {
|
||||
const [providers, setProviders] = useState<ApiProvider[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Form dialog state
|
||||
const [formOpen, setFormOpen] = useState(false);
|
||||
const [formMode, setFormMode] = useState<"create" | "edit">("create");
|
||||
const [editingProvider, setEditingProvider] = useState<ApiProvider | null>(null);
|
||||
const [initialPreset, setInitialPreset] = useState<{ name: string; provider_type: string; base_url: string } | null>(null);
|
||||
|
||||
// Delete confirmation state
|
||||
const [deleteTarget, setDeleteTarget] = useState<ApiProvider | null>(null);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
|
||||
// Activating state
|
||||
const [activatingId, setActivatingId] = useState<string | null>(null);
|
||||
|
||||
const fetchProviders = useCallback(async () => {
|
||||
try {
|
||||
setError(null);
|
||||
const res = await fetch("/api/providers");
|
||||
if (!res.ok) {
|
||||
throw new Error("Failed to load providers");
|
||||
}
|
||||
const data = await res.json();
|
||||
setProviders(data.providers || []);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to load providers");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProviders();
|
||||
}, [fetchProviders]);
|
||||
|
||||
const handleAdd = () => {
|
||||
setFormMode("create");
|
||||
setEditingProvider(null);
|
||||
setInitialPreset(null);
|
||||
setFormOpen(true);
|
||||
};
|
||||
|
||||
const handlePresetAdd = (preset: typeof QUICK_PRESETS[number]) => {
|
||||
setFormMode("create");
|
||||
setEditingProvider(null);
|
||||
setInitialPreset(preset);
|
||||
setFormOpen(true);
|
||||
};
|
||||
|
||||
const handleEdit = (provider: ApiProvider) => {
|
||||
setFormMode("edit");
|
||||
setEditingProvider(provider);
|
||||
setInitialPreset(null);
|
||||
setFormOpen(true);
|
||||
};
|
||||
|
||||
const handleSave = async (data: ProviderFormData) => {
|
||||
if (formMode === "edit" && editingProvider) {
|
||||
const res = await fetch(`/api/providers/${editingProvider.id}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const errData = await res.json().catch(() => ({}));
|
||||
throw new Error(errData.error || "Failed to update provider");
|
||||
}
|
||||
const result = await res.json();
|
||||
setProviders((prev) =>
|
||||
prev.map((p) => (p.id === editingProvider.id ? result.provider : p))
|
||||
);
|
||||
} else {
|
||||
const res = await fetch("/api/providers", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const errData = await res.json().catch(() => ({}));
|
||||
throw new Error(errData.error || "Failed to create provider");
|
||||
}
|
||||
const result = await res.json();
|
||||
setProviders((prev) => [...prev, result.provider]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!deleteTarget) return;
|
||||
setDeleting(true);
|
||||
try {
|
||||
const res = await fetch(`/api/providers/${deleteTarget.id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
if (res.ok) {
|
||||
setProviders((prev) => prev.filter((p) => p.id !== deleteTarget.id));
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
setDeleting(false);
|
||||
setDeleteTarget(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleActivate = async (provider: ApiProvider) => {
|
||||
setActivatingId(provider.id);
|
||||
try {
|
||||
const res = await fetch(`/api/providers/${provider.id}/activate`, {
|
||||
method: "POST",
|
||||
});
|
||||
if (res.ok) {
|
||||
// Mark the activated provider as active, deactivate others
|
||||
setProviders((prev) =>
|
||||
prev.map((p) => ({
|
||||
...p,
|
||||
is_active: p.id === provider.id ? 1 : 0,
|
||||
}))
|
||||
);
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
setActivatingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeactivate = async (provider: ApiProvider) => {
|
||||
setActivatingId(provider.id);
|
||||
try {
|
||||
const res = await fetch(`/api/providers/${provider.id}/activate`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ active: false }),
|
||||
});
|
||||
if (res.ok) {
|
||||
setProviders((prev) =>
|
||||
prev.map((p) => ({ ...p, is_active: 0 }))
|
||||
);
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
setActivatingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const sorted = [...providers].sort((a, b) => a.sort_order - b.sort_order);
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border border-border/50 p-4 space-y-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-sm font-medium">API Providers</h3>
|
||||
{providers.length > 0 && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
({providers.length})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Manage API providers for Claude Code. The active provider will be used for all sessions.
|
||||
</p>
|
||||
</div>
|
||||
<Button size="sm" className="gap-1" onClick={handleAdd}>
|
||||
<HugeiconsIcon icon={PlusSignIcon} className="h-3.5 w-3.5" />
|
||||
Add Provider
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 p-3">
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading */}
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center gap-2 py-8 text-muted-foreground">
|
||||
<HugeiconsIcon icon={Loading02Icon} className="h-4 w-4 animate-spin" />
|
||||
<p className="text-sm">Loading providers...</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{!loading && providers.length === 0 && (
|
||||
<div className="flex flex-col items-center gap-3 py-8 text-muted-foreground">
|
||||
<HugeiconsIcon icon={ServerStack01Icon} className="h-10 w-10 opacity-30" />
|
||||
<div className="text-center">
|
||||
<p className="text-sm font-medium">No providers configured</p>
|
||||
<p className="text-xs mt-0.5">
|
||||
Add a provider to use a custom API endpoint with Claude Code.
|
||||
</p>
|
||||
</div>
|
||||
{/* Quick preset buttons */}
|
||||
<div className="flex flex-wrap items-center justify-center gap-1.5 mt-2 max-w-md">
|
||||
{QUICK_PRESETS.map((preset) => (
|
||||
<Button
|
||||
key={preset.name}
|
||||
variant="outline"
|
||||
size="xs"
|
||||
className="gap-1"
|
||||
onClick={() => handlePresetAdd(preset)}
|
||||
>
|
||||
<HugeiconsIcon icon={PlusSignIcon} className="h-3 w-3" />
|
||||
{preset.name}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Provider list */}
|
||||
{!loading && sorted.length > 0 && (
|
||||
<div className="space-y-2 max-h-[400px] overflow-y-auto min-h-0">
|
||||
{sorted.map((provider) => {
|
||||
const isActive = provider.is_active === 1;
|
||||
const isActivating = activatingId === provider.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={provider.id}
|
||||
className={`rounded-lg border p-3 transition-colors ${
|
||||
isActive
|
||||
? "border-border bg-green-500/5"
|
||||
: "border-border/50 hover:border-border"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium truncate">
|
||||
{provider.name}
|
||||
</span>
|
||||
<Badge variant="secondary" className="text-[10px] px-1.5 py-0">
|
||||
{provider.provider_type}
|
||||
</Badge>
|
||||
{isActive && (
|
||||
<Badge variant="outline" className="text-[10px] px-1.5 py-0 text-green-600 dark:text-green-400 border-green-500/30">
|
||||
Active
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{provider.base_url && (
|
||||
<p className="text-xs text-muted-foreground font-mono truncate mt-0.5">
|
||||
{provider.base_url}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
{isActive ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
disabled={isActivating}
|
||||
onClick={() => handleDeactivate(provider)}
|
||||
className="gap-1 text-muted-foreground"
|
||||
>
|
||||
{isActivating ? (
|
||||
<HugeiconsIcon icon={Loading02Icon} className="h-3 w-3 animate-spin" />
|
||||
) : (
|
||||
<HugeiconsIcon icon={Cancel01Icon} className="h-3 w-3" />
|
||||
)}
|
||||
Disable
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
disabled={isActivating}
|
||||
onClick={() => handleActivate(provider)}
|
||||
className="gap-1"
|
||||
>
|
||||
{isActivating ? (
|
||||
<HugeiconsIcon icon={Loading02Icon} className="h-3 w-3 animate-spin" />
|
||||
) : (
|
||||
<HugeiconsIcon icon={Tick01Icon} className="h-3 w-3" />
|
||||
)}
|
||||
Apply
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
title="Edit"
|
||||
onClick={() => handleEdit(provider)}
|
||||
>
|
||||
<HugeiconsIcon icon={PencilEdit01Icon} className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
title="Delete"
|
||||
onClick={() => setDeleteTarget(provider)}
|
||||
>
|
||||
<HugeiconsIcon icon={Delete02Icon} className="h-3 w-3 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Quick presets row (when providers exist) */}
|
||||
{!loading && providers.length > 0 && (
|
||||
<div className="flex items-center gap-1.5 flex-wrap">
|
||||
<span className="text-xs text-muted-foreground mr-1">Quick add:</span>
|
||||
{QUICK_PRESETS.map((preset) => (
|
||||
<Button
|
||||
key={preset.name}
|
||||
variant="outline"
|
||||
size="xs"
|
||||
className="gap-1 text-[11px]"
|
||||
onClick={() => handlePresetAdd(preset)}
|
||||
>
|
||||
<HugeiconsIcon icon={PlusSignIcon} className="h-2.5 w-2.5" />
|
||||
{preset.name}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form dialog */}
|
||||
<ProviderForm
|
||||
open={formOpen}
|
||||
onOpenChange={setFormOpen}
|
||||
mode={formMode}
|
||||
provider={editingProvider}
|
||||
onSave={handleSave}
|
||||
initialPreset={initialPreset}
|
||||
/>
|
||||
|
||||
{/* Delete confirmation */}
|
||||
<AlertDialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete Provider</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Are you sure you want to delete "{deleteTarget?.name}"? This action cannot be undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleDelete}
|
||||
disabled={deleting}
|
||||
className="bg-destructive text-white hover:bg-destructive/90"
|
||||
>
|
||||
{deleting ? "Deleting..." : "Delete"}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user