mirror of
https://github.com/tiennm99/ccs.git
synced 2026-07-17 04:17:11 +00:00
feat(cliproxy): add dashboard CRUD for composite variants
- Extend create dialog with composite mode toggle and per-tier config tabs - Add cliproxy-edit-dialog for modifying existing single and composite variants - Add Edit action and composite type badge to variant table - Extend API types with composite variant fields - Update variant routes: GET (composite fields), POST (composite create), PUT (composite update)
This commit is contained in:
Tam Nhu Tran
@@ -13,6 +13,8 @@ import {
|
||||
listVariants,
|
||||
validateProfileName,
|
||||
updateVariant,
|
||||
createCompositeVariant,
|
||||
updateCompositeVariant,
|
||||
} from '../../cliproxy/services/variant-service';
|
||||
|
||||
const router = Router();
|
||||
@@ -30,6 +32,9 @@ router.get('/', (_req: Request, res: Response) => {
|
||||
account: variant.account || 'default',
|
||||
port: variant.port, // Include port for port isolation
|
||||
model: variant.model,
|
||||
type: variant.type,
|
||||
default_tier: variant.default_tier,
|
||||
tiers: variant.tiers,
|
||||
}));
|
||||
|
||||
res.json({ variants: variantList });
|
||||
@@ -40,10 +45,10 @@ router.get('/', (_req: Request, res: Response) => {
|
||||
* Uses variant-service for proper port allocation
|
||||
*/
|
||||
router.post('/', (req: Request, res: Response): void => {
|
||||
const { name, provider, model, account } = req.body;
|
||||
const { name, provider, model, account, type, default_tier, tiers } = req.body;
|
||||
|
||||
if (!name || !provider) {
|
||||
res.status(400).json({ error: 'Missing required fields: name, provider' });
|
||||
if (!name) {
|
||||
res.status(400).json({ error: 'Missing required field: name' });
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -63,6 +68,37 @@ router.post('/', (req: Request, res: Response): void => {
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle composite variant creation
|
||||
if (type === 'composite') {
|
||||
if (!default_tier || !tiers) {
|
||||
res.status(400).json({ error: 'Missing required fields: default_tier, tiers' });
|
||||
return;
|
||||
}
|
||||
|
||||
const result = createCompositeVariant({ name, defaultTier: default_tier, tiers });
|
||||
|
||||
if (!result.success) {
|
||||
res.status(409).json({ error: result.error });
|
||||
return;
|
||||
}
|
||||
|
||||
res.status(201).json({
|
||||
name,
|
||||
type: 'composite',
|
||||
default_tier,
|
||||
tiers,
|
||||
settings: result.settingsPath,
|
||||
port: result.variant?.port,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle single provider variant creation
|
||||
if (!provider) {
|
||||
res.status(400).json({ error: 'Missing required field: provider' });
|
||||
return;
|
||||
}
|
||||
|
||||
// Require model for variant creation (prevents empty model causing issues)
|
||||
if (!model || !model.trim()) {
|
||||
res.status(400).json({ error: 'Missing required field: model' });
|
||||
@@ -94,9 +130,43 @@ router.post('/', (req: Request, res: Response): void => {
|
||||
router.put('/:name', (req: Request, res: Response): void => {
|
||||
try {
|
||||
const { name } = req.params;
|
||||
const { provider, account, model } = req.body;
|
||||
const { provider, account, model, default_tier, tiers } = req.body;
|
||||
|
||||
// Use variant-service for proper update handling
|
||||
// Check if variant is composite - use updateCompositeVariant if so
|
||||
const variants = listVariants();
|
||||
const existing = variants[name];
|
||||
|
||||
if (!existing) {
|
||||
res.status(404).json({ error: `Variant '${name}' not found` });
|
||||
return;
|
||||
}
|
||||
|
||||
if (existing.type === 'composite') {
|
||||
if (!default_tier || !tiers) {
|
||||
res.status(400).json({ error: 'Missing required fields for composite update' });
|
||||
return;
|
||||
}
|
||||
|
||||
const result = updateCompositeVariant(name, { defaultTier: default_tier, tiers });
|
||||
|
||||
if (!result.success) {
|
||||
res.status(404).json({ error: result.error });
|
||||
return;
|
||||
}
|
||||
|
||||
res.json({
|
||||
name,
|
||||
type: 'composite',
|
||||
default_tier,
|
||||
tiers,
|
||||
settings: result.variant?.settings,
|
||||
port: result.variant?.port,
|
||||
updated: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Use variant-service for proper update handling (single provider)
|
||||
const result = updateVariant(name, { provider, account, model });
|
||||
|
||||
if (!result.success) {
|
||||
|
||||
@@ -1,21 +1,24 @@
|
||||
/**
|
||||
* CLIProxy Variant Dialog Component
|
||||
* Phase 03: REST API Routes & CRUD
|
||||
* Phase 05: Dashboard UI full CRUD for composite variants
|
||||
* Phase 06: Multi-Account Support
|
||||
*/
|
||||
|
||||
import { useForm, useWatch } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { useState } from 'react';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
|
||||
import { useCreateVariant, useCliproxyAuth } from '@/hooks/use-cliproxy';
|
||||
import { usePrivacy } from '@/contexts/privacy-context';
|
||||
import { CLIPROXY_PROVIDERS, getProviderDisplayName } from '@/lib/provider-config';
|
||||
|
||||
const schema = z.object({
|
||||
const singleProviderSchema = z.object({
|
||||
name: z
|
||||
.string()
|
||||
.min(1, 'Name is required')
|
||||
@@ -25,7 +28,33 @@ const schema = z.object({
|
||||
account: z.string().optional(),
|
||||
});
|
||||
|
||||
type FormData = z.infer<typeof schema>;
|
||||
const compositeSchema = z.object({
|
||||
name: z
|
||||
.string()
|
||||
.min(1, 'Name is required')
|
||||
.regex(/^[a-zA-Z][a-zA-Z0-9._-]*$/, 'Invalid variant name'),
|
||||
default_tier: z.enum(['opus', 'sonnet', 'haiku'], { message: 'Default tier is required' }),
|
||||
tiers: z.object({
|
||||
opus: z.object({
|
||||
provider: z.enum(CLIPROXY_PROVIDERS, { message: 'Provider is required' }),
|
||||
model: z.string().min(1, 'Model is required'),
|
||||
account: z.string().optional(),
|
||||
}),
|
||||
sonnet: z.object({
|
||||
provider: z.enum(CLIPROXY_PROVIDERS, { message: 'Provider is required' }),
|
||||
model: z.string().min(1, 'Model is required'),
|
||||
account: z.string().optional(),
|
||||
}),
|
||||
haiku: z.object({
|
||||
provider: z.enum(CLIPROXY_PROVIDERS, { message: 'Provider is required' }),
|
||||
model: z.string().min(1, 'Model is required'),
|
||||
account: z.string().optional(),
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
type SingleProviderFormData = z.infer<typeof singleProviderSchema>;
|
||||
type CompositeFormData = z.infer<typeof compositeSchema>;
|
||||
|
||||
interface CliproxyDialogProps {
|
||||
open: boolean;
|
||||
@@ -41,112 +70,235 @@ export function CliproxyDialog({ open, onClose }: CliproxyDialogProps) {
|
||||
const createMutation = useCreateVariant();
|
||||
const { data: authData } = useCliproxyAuth();
|
||||
const { privacyMode } = usePrivacy();
|
||||
const [mode, setMode] = useState<'single' | 'composite'>('single');
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
formState: { errors },
|
||||
reset,
|
||||
} = useForm<FormData>({
|
||||
resolver: zodResolver(schema),
|
||||
const singleForm = useForm<SingleProviderFormData>({
|
||||
resolver: zodResolver(singleProviderSchema),
|
||||
});
|
||||
|
||||
// Watch provider to show relevant accounts
|
||||
const selectedProvider = useWatch({ control, name: 'provider' });
|
||||
const compositeForm = useForm<CompositeFormData>({
|
||||
resolver: zodResolver(compositeSchema),
|
||||
defaultValues: {
|
||||
default_tier: 'opus',
|
||||
tiers: {
|
||||
opus: { provider: 'gemini', model: '' },
|
||||
sonnet: { provider: 'gemini', model: '' },
|
||||
haiku: { provider: 'gemini', model: '' },
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Get accounts for selected provider
|
||||
const selectedProvider = useWatch({ control: singleForm.control, name: 'provider' });
|
||||
const providerAuth = authData?.authStatus.find((s) => s.provider === selectedProvider);
|
||||
const providerAccounts = providerAuth?.accounts || [];
|
||||
|
||||
const onSubmit = async (data: FormData) => {
|
||||
const onSubmitSingle = async (data: SingleProviderFormData) => {
|
||||
try {
|
||||
await createMutation.mutateAsync(data);
|
||||
reset();
|
||||
singleForm.reset();
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error('Failed to create variant:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmitComposite = async (data: CompositeFormData) => {
|
||||
try {
|
||||
await createMutation.mutateAsync({
|
||||
name: data.name,
|
||||
provider: 'gemini',
|
||||
type: 'composite',
|
||||
default_tier: data.default_tier,
|
||||
tiers: data.tiers,
|
||||
});
|
||||
compositeForm.reset();
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error('Failed to create composite variant:', error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onClose}>
|
||||
<DialogContent>
|
||||
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create CLIProxy Variant</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<Input id="name" {...register('name')} placeholder="my-gemini" />
|
||||
{errors.name && <span className="text-xs text-red-500">{errors.name.message}</span>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="provider">Provider</Label>
|
||||
<select
|
||||
id="provider"
|
||||
{...register('provider')}
|
||||
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant={mode === 'single' ? 'default' : 'outline'}
|
||||
onClick={() => setMode('single')}
|
||||
>
|
||||
<option value="">Select provider...</option>
|
||||
{providerOptions.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.provider && (
|
||||
<span className="text-xs text-red-500">{errors.provider.message}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Account selector - only show if provider has accounts */}
|
||||
{selectedProvider && providerAccounts.length > 0 && (
|
||||
<div>
|
||||
<Label htmlFor="account">Account</Label>
|
||||
<select
|
||||
id="account"
|
||||
{...register('account')}
|
||||
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
<option value="">Use default account</option>
|
||||
{providerAccounts.map((acc) => (
|
||||
<option key={acc.id} value={acc.id}>
|
||||
{privacyMode ? '••••••' : acc.email || acc.id}
|
||||
{acc.isDefault ? ' (default)' : ''}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<span className="text-xs text-muted-foreground mt-1 block">
|
||||
Select which OAuth account this variant should use
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Show message if provider selected but no accounts */}
|
||||
{selectedProvider && providerAccounts.length === 0 && providerAuth && (
|
||||
<div className="text-sm text-amber-600 bg-amber-50 dark:bg-amber-950/20 p-3 rounded-md">
|
||||
No accounts authenticated for {providerAuth.displayName}.
|
||||
<br />
|
||||
<code className="text-xs bg-muted px-1 rounded">ccs {selectedProvider} --auth</code>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<Label htmlFor="model">Model (optional)</Label>
|
||||
<Input id="model" {...register('model')} placeholder="gemini-2.5-pro" />
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button type="button" variant="outline" onClick={onClose}>
|
||||
Cancel
|
||||
Single Provider
|
||||
</Button>
|
||||
<Button type="submit" disabled={createMutation.isPending}>
|
||||
{createMutation.isPending ? 'Creating...' : 'Create'}
|
||||
<Button
|
||||
type="button"
|
||||
variant={mode === 'composite' ? 'default' : 'outline'}
|
||||
onClick={() => setMode('composite')}
|
||||
>
|
||||
Composite (Multi-Provider)
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{mode === 'single' ? (
|
||||
<form onSubmit={singleForm.handleSubmit(onSubmitSingle)} className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<Input id="name" {...singleForm.register('name')} placeholder="my-gemini" />
|
||||
{singleForm.formState.errors.name && (
|
||||
<span className="text-xs text-red-500">
|
||||
{singleForm.formState.errors.name.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="provider">Provider</Label>
|
||||
<select
|
||||
id="provider"
|
||||
{...singleForm.register('provider')}
|
||||
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
<option value="">Select provider...</option>
|
||||
{providerOptions.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{singleForm.formState.errors.provider && (
|
||||
<span className="text-xs text-red-500">
|
||||
{singleForm.formState.errors.provider.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedProvider && providerAccounts.length > 0 && (
|
||||
<div>
|
||||
<Label htmlFor="account">Account</Label>
|
||||
<select
|
||||
id="account"
|
||||
{...singleForm.register('account')}
|
||||
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
<option value="">Use default account</option>
|
||||
{providerAccounts.map((acc) => (
|
||||
<option key={acc.id} value={acc.id}>
|
||||
{privacyMode ? '••••••' : acc.email || acc.id}
|
||||
{acc.isDefault ? ' (default)' : ''}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<Label htmlFor="model">Model (optional)</Label>
|
||||
<Input id="model" {...singleForm.register('model')} placeholder="gemini-2.5-pro" />
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button type="button" variant="outline" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={createMutation.isPending}>
|
||||
{createMutation.isPending ? 'Creating...' : 'Create'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={compositeForm.handleSubmit(onSubmitComposite)} className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="comp-name">Name</Label>
|
||||
<Input
|
||||
id="comp-name"
|
||||
{...compositeForm.register('name')}
|
||||
placeholder="my-composite"
|
||||
/>
|
||||
{compositeForm.formState.errors.name && (
|
||||
<span className="text-xs text-red-500">
|
||||
{compositeForm.formState.errors.name.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Tier Configuration</Label>
|
||||
<Tabs defaultValue="opus" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="opus">Opus</TabsTrigger>
|
||||
<TabsTrigger value="sonnet">Sonnet</TabsTrigger>
|
||||
<TabsTrigger value="haiku">Haiku</TabsTrigger>
|
||||
</TabsList>
|
||||
{(['opus', 'sonnet', 'haiku'] as const).map((tier) => (
|
||||
<TabsContent key={tier} value={tier} className="space-y-3">
|
||||
<div>
|
||||
<Label htmlFor={`${tier}-provider`}>Provider</Label>
|
||||
<select
|
||||
id={`${tier}-provider`}
|
||||
{...compositeForm.register(`tiers.${tier}.provider`)}
|
||||
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
{providerOptions.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor={`${tier}-model`}>Model</Label>
|
||||
<Input
|
||||
id={`${tier}-model`}
|
||||
{...compositeForm.register(`tiers.${tier}.model`)}
|
||||
placeholder="model-id"
|
||||
/>
|
||||
{compositeForm.formState.errors.tiers?.[tier]?.model && (
|
||||
<span className="text-xs text-red-500">
|
||||
{compositeForm.formState.errors.tiers[tier]?.model?.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor={`${tier}-account`}>Account (optional)</Label>
|
||||
<Input
|
||||
id={`${tier}-account`}
|
||||
{...compositeForm.register(`tiers.${tier}.account`)}
|
||||
placeholder="account-id"
|
||||
/>
|
||||
</div>
|
||||
</TabsContent>
|
||||
))}
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="default-tier">Default Tier</Label>
|
||||
<select
|
||||
id="default-tier"
|
||||
{...compositeForm.register('default_tier')}
|
||||
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
<option value="opus">Opus</option>
|
||||
<option value="sonnet">Sonnet</option>
|
||||
<option value="haiku">Haiku</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button type="button" variant="outline" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={createMutation.isPending}>
|
||||
{createMutation.isPending ? 'Creating...' : 'Create'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,245 @@
|
||||
/**
|
||||
* CLIProxy Variant Edit Dialog Component
|
||||
* Phase 05: Dashboard UI full CRUD for composite variants
|
||||
*/
|
||||
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { useEffect } from 'react';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
|
||||
import { useUpdateVariant } from '@/hooks/use-cliproxy';
|
||||
import { CLIPROXY_PROVIDERS, getProviderDisplayName } from '@/lib/provider-config';
|
||||
import type { Variant } from '@/lib/api-client';
|
||||
|
||||
const singleProviderSchema = z.object({
|
||||
provider: z.enum(CLIPROXY_PROVIDERS, { message: 'Provider is required' }),
|
||||
model: z.string().optional(),
|
||||
account: z.string().optional(),
|
||||
});
|
||||
|
||||
const compositeSchema = z.object({
|
||||
default_tier: z.enum(['opus', 'sonnet', 'haiku'], { message: 'Default tier is required' }),
|
||||
tiers: z.object({
|
||||
opus: z.object({
|
||||
provider: z.enum(CLIPROXY_PROVIDERS, { message: 'Provider is required' }),
|
||||
model: z.string().min(1, 'Model is required'),
|
||||
account: z.string().optional(),
|
||||
}),
|
||||
sonnet: z.object({
|
||||
provider: z.enum(CLIPROXY_PROVIDERS, { message: 'Provider is required' }),
|
||||
model: z.string().min(1, 'Model is required'),
|
||||
account: z.string().optional(),
|
||||
}),
|
||||
haiku: z.object({
|
||||
provider: z.enum(CLIPROXY_PROVIDERS, { message: 'Provider is required' }),
|
||||
model: z.string().min(1, 'Model is required'),
|
||||
account: z.string().optional(),
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
type SingleProviderFormData = z.infer<typeof singleProviderSchema>;
|
||||
type CompositeFormData = z.infer<typeof compositeSchema>;
|
||||
|
||||
interface CliproxyEditDialogProps {
|
||||
variant: Variant | null;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
const providerOptions = CLIPROXY_PROVIDERS.map((id) => ({
|
||||
value: id,
|
||||
label: getProviderDisplayName(id),
|
||||
}));
|
||||
|
||||
export function CliproxyEditDialog({ variant, open, onOpenChange }: CliproxyEditDialogProps) {
|
||||
const updateMutation = useUpdateVariant();
|
||||
const isComposite = variant?.type === 'composite';
|
||||
|
||||
const singleForm = useForm<SingleProviderFormData>({
|
||||
resolver: zodResolver(singleProviderSchema),
|
||||
});
|
||||
|
||||
const compositeForm = useForm<CompositeFormData>({
|
||||
resolver: zodResolver(compositeSchema),
|
||||
});
|
||||
|
||||
// Pre-populate form when variant changes
|
||||
useEffect(() => {
|
||||
if (!variant) return;
|
||||
|
||||
if (isComposite && variant.tiers && variant.default_tier) {
|
||||
compositeForm.reset({
|
||||
default_tier: variant.default_tier,
|
||||
tiers: variant.tiers,
|
||||
});
|
||||
} else {
|
||||
singleForm.reset({
|
||||
provider: variant.provider,
|
||||
model: variant.model || '',
|
||||
account: variant.account || '',
|
||||
});
|
||||
}
|
||||
}, [variant, isComposite, singleForm, compositeForm]);
|
||||
|
||||
const onSubmitSingle = async (data: SingleProviderFormData) => {
|
||||
if (!variant) return;
|
||||
try {
|
||||
await updateMutation.mutateAsync({ name: variant.name, data });
|
||||
onOpenChange(false);
|
||||
} catch (error) {
|
||||
console.error('Failed to update variant:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmitComposite = async (data: CompositeFormData) => {
|
||||
if (!variant) return;
|
||||
try {
|
||||
await updateMutation.mutateAsync({
|
||||
name: variant.name,
|
||||
data: {
|
||||
default_tier: data.default_tier,
|
||||
tiers: data.tiers,
|
||||
},
|
||||
});
|
||||
onOpenChange(false);
|
||||
} catch (error) {
|
||||
console.error('Failed to update composite variant:', error);
|
||||
}
|
||||
};
|
||||
|
||||
if (!variant) return null;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
Edit {isComposite ? 'Composite' : 'Single'} Variant: {variant.name}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{isComposite ? (
|
||||
<form onSubmit={compositeForm.handleSubmit(onSubmitComposite)} className="space-y-4">
|
||||
<div>
|
||||
<Label>Tier Configuration</Label>
|
||||
<Tabs defaultValue="opus" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="opus">Opus</TabsTrigger>
|
||||
<TabsTrigger value="sonnet">Sonnet</TabsTrigger>
|
||||
<TabsTrigger value="haiku">Haiku</TabsTrigger>
|
||||
</TabsList>
|
||||
{(['opus', 'sonnet', 'haiku'] as const).map((tier) => (
|
||||
<TabsContent key={tier} value={tier} className="space-y-3">
|
||||
<div>
|
||||
<Label htmlFor={`edit-${tier}-provider`}>Provider</Label>
|
||||
<select
|
||||
id={`edit-${tier}-provider`}
|
||||
{...compositeForm.register(`tiers.${tier}.provider`)}
|
||||
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
{providerOptions.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor={`edit-${tier}-model`}>Model</Label>
|
||||
<Input
|
||||
id={`edit-${tier}-model`}
|
||||
{...compositeForm.register(`tiers.${tier}.model`)}
|
||||
placeholder="model-id"
|
||||
/>
|
||||
{compositeForm.formState.errors.tiers?.[tier]?.model && (
|
||||
<span className="text-xs text-red-500">
|
||||
{compositeForm.formState.errors.tiers[tier]?.model?.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor={`edit-${tier}-account`}>Account (optional)</Label>
|
||||
<Input
|
||||
id={`edit-${tier}-account`}
|
||||
{...compositeForm.register(`tiers.${tier}.account`)}
|
||||
placeholder="account-id"
|
||||
/>
|
||||
</div>
|
||||
</TabsContent>
|
||||
))}
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="edit-default-tier">Default Tier</Label>
|
||||
<select
|
||||
id="edit-default-tier"
|
||||
{...compositeForm.register('default_tier')}
|
||||
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
<option value="opus">Opus</option>
|
||||
<option value="sonnet">Sonnet</option>
|
||||
<option value="haiku">Haiku</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={updateMutation.isPending}>
|
||||
{updateMutation.isPending ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={singleForm.handleSubmit(onSubmitSingle)} className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="edit-provider">Provider</Label>
|
||||
<select
|
||||
id="edit-provider"
|
||||
{...singleForm.register('provider')}
|
||||
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
{providerOptions.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="edit-model">Model</Label>
|
||||
<Input id="edit-model" {...singleForm.register('model')} placeholder="model-id" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="edit-account">Account (optional)</Label>
|
||||
<Input
|
||||
id="edit-account"
|
||||
{...singleForm.register('account')}
|
||||
placeholder="account-id"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={updateMutation.isPending}>
|
||||
{updateMutation.isPending ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,11 @@
|
||||
/**
|
||||
* CLIProxy Variants Table Component
|
||||
* Phase 03: REST API Routes & CRUD
|
||||
* Phase 05: Dashboard UI full CRUD for composite variants
|
||||
* Phase 06: Multi-Account Support
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useReactTable, getCoreRowModel, flexRender, type ColumnDef } from '@tanstack/react-table';
|
||||
import {
|
||||
Table,
|
||||
@@ -21,8 +23,9 @@ import {
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { MoreHorizontal, Trash2, User } from 'lucide-react';
|
||||
import { MoreHorizontal, Trash2, User, Pencil } from 'lucide-react';
|
||||
import { useDeleteVariant } from '@/hooks/use-cliproxy';
|
||||
import { CliproxyEditDialog } from './cliproxy-edit-dialog';
|
||||
import type { Variant } from '@/lib/api-client';
|
||||
|
||||
interface CliproxyTableProps {
|
||||
@@ -41,6 +44,7 @@ const providerLabels: Record<string, string> = {
|
||||
|
||||
export function CliproxyTable({ data }: CliproxyTableProps) {
|
||||
const deleteMutation = useDeleteVariant();
|
||||
const [editingVariant, setEditingVariant] = useState<Variant | null>(null);
|
||||
|
||||
const columns: ColumnDef<Variant>[] = [
|
||||
{
|
||||
@@ -51,7 +55,12 @@ export function CliproxyTable({ data }: CliproxyTableProps) {
|
||||
{
|
||||
accessorKey: 'provider',
|
||||
header: 'Provider',
|
||||
cell: ({ row }) => providerLabels[row.original.provider] || row.original.provider,
|
||||
cell: ({ row }) => {
|
||||
if (row.original.type === 'composite') {
|
||||
return <Badge variant="secondary">composite</Badge>;
|
||||
}
|
||||
return providerLabels[row.original.provider] || row.original.provider;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'account',
|
||||
@@ -91,6 +100,10 @@ export function CliproxyTable({ data }: CliproxyTableProps) {
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="bg-white dark:bg-zinc-950">
|
||||
<DropdownMenuItem onClick={() => setEditingVariant(row.original)}>
|
||||
<Pencil className="w-4 h-4 mr-2" />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="text-red-600 focus:text-red-600 focus:bg-red-50 dark:focus:bg-red-950/30"
|
||||
onClick={() => deleteMutation.mutate(row.original.name)}
|
||||
@@ -124,33 +137,40 @@ export function CliproxyTable({ data }: CliproxyTableProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="border rounded-md overflow-hidden bg-card">
|
||||
<Table>
|
||||
<TableHeader className="bg-muted/50">
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<TableHead key={header.id}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(header.column.columnDef.header, header.getContext())}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows.map((row) => (
|
||||
<TableRow key={row.id}>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<>
|
||||
<CliproxyEditDialog
|
||||
variant={editingVariant}
|
||||
open={!!editingVariant}
|
||||
onOpenChange={(open) => !open && setEditingVariant(null)}
|
||||
/>
|
||||
<div className="border rounded-md overflow-hidden bg-card">
|
||||
<Table>
|
||||
<TableHeader className="bg-muted/50">
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<TableHead key={header.id}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(header.column.columnDef.header, header.getContext())}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows.map((row) => (
|
||||
<TableRow key={row.id}>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -54,6 +54,13 @@ export interface Variant {
|
||||
account?: string;
|
||||
port?: number;
|
||||
model?: string;
|
||||
type?: 'composite';
|
||||
default_tier?: 'opus' | 'sonnet' | 'haiku';
|
||||
tiers?: {
|
||||
opus: { provider: string; model: string; account?: string; thinking?: string };
|
||||
sonnet: { provider: string; model: string; account?: string; thinking?: string };
|
||||
haiku: { provider: string; model: string; account?: string; thinking?: string };
|
||||
};
|
||||
}
|
||||
|
||||
export interface CreateVariant {
|
||||
@@ -61,6 +68,13 @@ export interface CreateVariant {
|
||||
provider: CLIProxyProvider;
|
||||
model?: string;
|
||||
account?: string;
|
||||
type?: 'composite';
|
||||
default_tier?: 'opus' | 'sonnet' | 'haiku';
|
||||
tiers?: {
|
||||
opus: { provider: string; model: string; account?: string; thinking?: string };
|
||||
sonnet: { provider: string; model: string; account?: string; thinking?: string };
|
||||
haiku: { provider: string; model: string; account?: string; thinking?: string };
|
||||
};
|
||||
}
|
||||
|
||||
export interface UpdateVariant {
|
||||
|
||||
Reference in New Issue
Block a user