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)

src/web-server/routes/variant-routes.ts

@@ -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) {
+  if (!name) {
-    res.status(400).json({ error: 'Missing required fields: name, provider' });
+    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) {

ui/src/components/cliproxy/cliproxy-dialog.tsx

@@ -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 {
+  const singleForm = useForm<SingleProviderFormData>({
-    register,
+    resolver: zodResolver(singleProviderSchema),
-    handleSubmit,
-    control,
-    formState: { errors },
-    reset,
-  } = useForm<FormData>({
-    resolver: zodResolver(schema),
   });
 
-  // Watch provider to show relevant accounts
+  const compositeForm = useForm<CompositeFormData>({
-  const selectedProvider = useWatch({ control, name: 'provider' });
+    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>
+        <div className="space-y-4">
-            <Label htmlFor="provider">Provider</Label>
+          <div className="flex gap-2">
-            <select
+            <Button
-              id="provider"
+              type="button"
-              {...register('provider')}
+              variant={mode === 'single' ? 'default' : 'outline'}
-              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"
+              onClick={() => setMode('single')}
             >
-              <option value="">Select provider...</option>
+              Single Provider
-              {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
             </Button>
-            <Button type="submit" disabled={createMutation.isPending}>
+            <Button
-              {createMutation.isPending ? 'Creating...' : 'Create'}
+              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>
   );

ui/src/components/cliproxy/cliproxy-edit-dialog.tsx

@@ -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>
+  );
+}

ui/src/components/cliproxy/cliproxy-table.tsx

@@ -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>
+      <CliproxyEditDialog
-        <TableHeader className="bg-muted/50">
+        variant={editingVariant}
-          {table.getHeaderGroups().map((headerGroup) => (
+        open={!!editingVariant}
-            <TableRow key={headerGroup.id}>
+        onOpenChange={(open) => !open && setEditingVariant(null)}
-              {headerGroup.headers.map((header) => (
+      />
-                <TableHead key={header.id}>
+      <div className="border rounded-md overflow-hidden bg-card">
-                  {header.isPlaceholder
+        <Table>
-                    ? null
+          <TableHeader className="bg-muted/50">
-                    : flexRender(header.column.columnDef.header, header.getContext())}
+            {table.getHeaderGroups().map((headerGroup) => (
-                </TableHead>
+              <TableRow key={headerGroup.id}>
-              ))}
+                {headerGroup.headers.map((header) => (
-            </TableRow>
+                  <TableHead key={header.id}>
-          ))}
+                    {header.isPlaceholder
-        </TableHeader>
+                      ? null
-        <TableBody>
+                      : flexRender(header.column.columnDef.header, header.getContext())}
-          {table.getRowModel().rows.map((row) => (
+                  </TableHead>
-            <TableRow key={row.id}>
+                ))}
-              {row.getVisibleCells().map((cell) => (
+              </TableRow>
-                <TableCell key={cell.id}>
+            ))}
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+          </TableHeader>
-                </TableCell>
+          <TableBody>
-              ))}
+            {table.getRowModel().rows.map((row) => (
-            </TableRow>
+              <TableRow key={row.id}>
-          ))}
+                {row.getVisibleCells().map((cell) => (
-        </TableBody>
+                  <TableCell key={cell.id}>
-      </Table>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-    </div>
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </>
   );
 }

ui/src/lib/api-client.ts

@@ -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 {