feat(ui): add accounts and cliproxy management dashboard

2026-07-17 06:17:09 +00:00 · 2025-12-07 18:35:58 -05:00
parent d11071ad90
commit 03059dbdcc
8 changed files with 522 additions and 16 deletions
@@ -0,0 +1,131 @@
+/**
+ * Accounts Table Component
+ * Phase 03: REST API Routes & CRUD
+ */
+
+import { useReactTable, getCoreRowModel, flexRender, type ColumnDef } from '@tanstack/react-table';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
+import { Check } from 'lucide-react';
+import { useSetDefaultAccount } from '@/hooks/use-accounts';
+import type { Account } from '@/lib/api-client';
+
+interface AccountsTableProps {
+  data: Account[];
+  defaultAccount: string | null;
+}
+
+export function AccountsTable({ data, defaultAccount }: AccountsTableProps) {
+  const setDefaultMutation = useSetDefaultAccount();
+
+  const columns: ColumnDef<Account>[] = [
+    {
+      accessorKey: 'name',
+      header: 'Name',
+      cell: ({ row }) => (
+        <div className="flex items-center gap-2">
+          {row.original.name}
+          {row.original.name === defaultAccount && (
+            <span className="text-xs bg-primary text-primary-foreground px-1.5 py-0.5 rounded">
+              default
+            </span>
+          )}
+        </div>
+      ),
+    },
+    {
+      accessorKey: 'type',
+      header: 'Type',
+      cell: ({ row }) => row.original.type || 'oauth',
+    },
+    {
+      accessorKey: 'created',
+      header: 'Created',
+      cell: ({ row }) => {
+        const date = new Date(row.original.created);
+        return date.toLocaleDateString();
+      },
+    },
+    {
+      accessorKey: 'last_used',
+      header: 'Last Used',
+      cell: ({ row }) => {
+        if (!row.original.last_used) return '-';
+        const date = new Date(row.original.last_used);
+        return date.toLocaleDateString();
+      },
+    },
+    {
+      id: 'actions',
+      header: 'Actions',
+      cell: ({ row }) => {
+        const isDefault = row.original.name === defaultAccount;
+        return (
+          <Button
+            variant={isDefault ? 'outline' : 'default'}
+            size="sm"
+            disabled={isDefault || setDefaultMutation.isPending}
+            onClick={() => setDefaultMutation.mutate(row.original.name)}
+          >
+            <Check className="w-4 h-4 mr-1" />
+            {isDefault ? 'Default' : 'Set Default'}
+          </Button>
+        );
+      },
+    },
+  ];
+
+  // eslint-disable-next-line react-hooks/incompatible-library
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  if (data.length === 0) {
+    return (
+      <div className="text-center py-8 text-muted-foreground">
+        No accounts found. Use <code className="text-sm bg-muted px-1 rounded">ccs login</code> to
+        add accounts.
+      </div>
+    );
+  }
+
+  return (
+    <div className="border rounded-md">
+      <Table>
+        <TableHeader>
+          {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>
+  );
+}
@@ -0,0 +1,111 @@
+/**
+ * CLIProxy Variant Dialog Component
+ * Phase 03: REST API Routes & CRUD
+ */
+
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+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 { useCreateVariant } from '@/hooks/use-cliproxy';
+
+const providers = ['gemini', 'codex', 'agy', 'qwen'] as const;
+
+const schema = z.object({
+  name: z
+    .string()
+    .min(1, 'Name is required')
+    .regex(/^[a-zA-Z][a-zA-Z0-9._-]*$/, 'Invalid variant name'),
+  provider: z.enum(providers, { message: 'Provider is required' }),
+  model: z.string().optional(),
+});
+
+type FormData = z.infer<typeof schema>;
+
+interface CliproxyDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+const providerOptions = [
+  { value: 'gemini', label: 'Google Gemini' },
+  { value: 'codex', label: 'OpenAI Codex' },
+  { value: 'agy', label: 'Antigravity' },
+  { value: 'qwen', label: 'Alibaba Qwen' },
+];
+
+export function CliproxyDialog({ open, onClose }: CliproxyDialogProps) {
+  const createMutation = useCreateVariant();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+  });
+
+  const onSubmit = async (data: FormData) => {
+    try {
+      await createMutation.mutateAsync(data);
+      reset();
+      onClose();
+    } catch (error) {
+      console.error('Failed to create variant:', error);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent>
+        <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"
+            >
+              <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>
+
+          <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}>
+              {createMutation.isPending ? 'Creating...' : 'Create'}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,123 @@
+/**
+ * CLIProxy Variants Table Component
+ * Phase 03: REST API Routes & CRUD
+ */
+
+import { useReactTable, getCoreRowModel, flexRender, type ColumnDef } from '@tanstack/react-table';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { MoreHorizontal, Trash2 } from 'lucide-react';
+import { useDeleteVariant } from '@/hooks/use-cliproxy';
+import type { Variant } from '@/lib/api-client';
+
+interface CliproxyTableProps {
+  data: Variant[];
+}
+
+const providerLabels: Record<string, string> = {
+  gemini: 'Google Gemini',
+  codex: 'OpenAI Codex',
+  agy: 'Antigravity',
+  qwen: 'Alibaba Qwen',
+};
+
+export function CliproxyTable({ data }: CliproxyTableProps) {
+  const deleteMutation = useDeleteVariant();
+
+  const columns: ColumnDef<Variant>[] = [
+    {
+      accessorKey: 'name',
+      header: 'Name',
+    },
+    {
+      accessorKey: 'provider',
+      header: 'Provider',
+      cell: ({ row }) => providerLabels[row.original.provider] || row.original.provider,
+    },
+    {
+      accessorKey: 'settings',
+      header: 'Settings Path',
+    },
+    {
+      id: 'actions',
+      header: 'Actions',
+      cell: ({ row }) => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm">
+              <MoreHorizontal className="w-4 h-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              className="text-red-600"
+              onClick={() => deleteMutation.mutate(row.original.name)}
+            >
+              <Trash2 className="w-4 h-4 mr-2" />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    },
+  ];
+
+  // eslint-disable-next-line react-hooks/incompatible-library
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  if (data.length === 0) {
+    return (
+      <div className="text-center py-8 text-muted-foreground">
+        No CLIProxy variants found. Create one to use OAuth-based providers.
+      </div>
+    );
+  }
+
+  return (
+    <div className="border rounded-md">
+      <Table>
+        <TableHeader>
+          {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>
+  );
+}
@@ -0,0 +1,30 @@
+/**
+ * React Query hooks for accounts (profiles.json)
+ * Phase 03: REST API Routes & CRUD
+ */
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '@/lib/api-client';
+import { toast } from 'sonner';
+
+export function useAccounts() {
+  return useQuery({
+    queryKey: ['accounts'],
+    queryFn: () => api.accounts.list(),
+  });
+}
+
+export function useSetDefaultAccount() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (name: string) => api.accounts.setDefault(name),
+    onSuccess: (_data, name) => {
+      queryClient.invalidateQueries({ queryKey: ['accounts'] });
+      toast.success(`Default account set to "${name}"`);
+    },
+    onError: (error: Error) => {
+      toast.error(error.message);
+    },
+  });
+}
@@ -0,0 +1,45 @@
+/**
+ * React Query hooks for CLIProxy variants
+ * Phase 03: REST API Routes & CRUD
+ */
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { api, type CreateVariant } from '@/lib/api-client';
+import { toast } from 'sonner';
+
+export function useCliproxy() {
+  return useQuery({
+    queryKey: ['cliproxy'],
+    queryFn: () => api.cliproxy.list(),
+  });
+}
+
+export function useCreateVariant() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: CreateVariant) => api.cliproxy.create(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['cliproxy'] });
+      toast.success('Variant created successfully');
+    },
+    onError: (error: Error) => {
+      toast.error(error.message);
+    },
+  });
+}
+
+export function useDeleteVariant() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (name: string) => api.cliproxy.delete(name),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['cliproxy'] });
+      toast.success('Variant deleted successfully');
+    },
+    onError: (error: Error) => {
+      toast.error(error.message);
+    },
+  });
+}
@@ -0,0 +1,39 @@
+/**
+ * Accounts Page
+ * Phase 03: REST API Routes & CRUD
+ */
+
+import { AccountsTable } from '@/components/accounts-table';
+import { useAccounts } from '@/hooks/use-accounts';
+
+export function AccountsPage() {
+  const { data, isLoading } = useAccounts();
+
+  return (
+    <div className="p-6 space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Accounts</h1>
+          <p className="text-sm text-muted-foreground mt-1">
+            Manage multi-account Claude sessions (profiles.json)
+          </p>
+        </div>
+      </div>
+
+      {isLoading ? (
+        <div className="text-muted-foreground">Loading accounts...</div>
+      ) : (
+        <AccountsTable data={data?.accounts || []} defaultAccount={data?.default ?? null} />
+      )}
+
+      <div className="text-sm text-muted-foreground border-t pt-4 mt-4">
+        <p>
+          Accounts are isolated Claude instances with separate sessions.
+          <br />
+          Use <code className="bg-muted px-1 rounded">ccs login &lt;name&gt;</code> to add new
+          accounts via CLI.
+        </p>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,41 @@
+/**
+ * CLIProxy Page
+ * Phase 03: REST API Routes & CRUD
+ */
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Plus } from 'lucide-react';
+import { CliproxyTable } from '@/components/cliproxy-table';
+import { CliproxyDialog } from '@/components/cliproxy-dialog';
+import { useCliproxy } from '@/hooks/use-cliproxy';
+
+export function CliproxyPage() {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const { data, isLoading } = useCliproxy();
+
+  return (
+    <div className="p-6 space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">CLIProxy</h1>
+          <p className="text-sm text-muted-foreground mt-1">
+            Manage OAuth-based provider variants (Gemini, Codex, Antigravity, Qwen)
+          </p>
+        </div>
+        <Button onClick={() => setDialogOpen(true)}>
+          <Plus className="w-4 h-4 mr-2" />
+          Create Variant
+        </Button>
+      </div>
+
+      {isLoading ? (
+        <div className="text-muted-foreground">Loading variants...</div>
+      ) : (
+        <CliproxyTable data={data?.variants || []} />
+      )}
+
+      <CliproxyDialog open={dialogOpen} onClose={() => setDialogOpen(false)} />
+    </div>
+  );
+}
@@ -2,23 +2,9 @@ export { HomePage } from './home';

 export { ApiPage } from './api';

-export function CliproxyPage() {
-  return (
-    <div className="p-6">
-      <h1 className="text-2xl font-bold">CLIProxy</h1>
-      <p className="mt-4 text-muted-foreground">OAuth provider management (Phase 03)</p>
-    </div>
-  );
-}
+export { CliproxyPage } from './cliproxy';

-export function AccountsPage() {
-  return (
-    <div className="p-6">
-      <h1 className="text-2xl font-bold">Accounts</h1>
-      <p className="mt-4 text-muted-foreground">Multi-account management (Phase 03)</p>
-    </div>
-  );
-}
+export { AccountsPage } from './accounts';

 export { SettingsPage } from './settings';