feat(ui): add auth profile management to Dashboard

- Add create profile dialog with CLI command copy-paste
- Add delete profile with confirmation dialog
- Add reset to CCS default button
- Add DELETE endpoints for /accounts/:name and /accounts/reset-default
- Achieve CLI/Dashboard parity per design philosophy

Refs: plans/251227-0114-ccs-cli-dashboard-parity-audit

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

@@ -82,4 +82,50 @@ router.post('/default', (req: Request, res: Response): void => {
   }
 });
 
+/**
+ * DELETE /api/accounts/reset-default - Reset to CCS default
+ */
+router.delete('/reset-default', (_req: Request, res: Response): void => {
+  try {
+    if (isUnifiedMode()) {
+      registry.clearDefaultUnified();
+    } else {
+      registry.clearDefaultProfile();
+    }
+    res.json({ success: true, default: null });
+  } catch (error) {
+    res.status(500).json({ error: (error as Error).message });
+  }
+});
+
+/**
+ * DELETE /api/accounts/:name - Delete an account
+ */
+router.delete('/:name', (req: Request, res: Response): void => {
+  try {
+    const { name } = req.params;
+
+    if (!name) {
+      res.status(400).json({ error: 'Missing account name' });
+      return;
+    }
+
+    // Check if trying to delete default
+    const currentDefault = registry.getDefaultUnified() ?? registry.getDefaultProfile();
+    if (name === currentDefault) {
+      res
+        .status(400)
+        .json({ error: 'Cannot delete the default account. Set a different default first.' });
+      return;
+    }
+
+    // Delete the profile
+    registry.deleteProfile(name);
+
+    res.json({ success: true, deleted: name });
+  } catch (error) {
+    res.status(500).json({ error: (error as Error).message });
+  }
+});
+
 export default router;

ui/src/components/account/accounts-table.tsx

@@ -1,8 +1,9 @@
 /**
  * Accounts Table Component
- * Phase 03: REST API Routes & CRUD
+ * Dashboard parity: Full CRUD for auth profiles
  */
 
+import { useState } from 'react';
 import { useReactTable, getCoreRowModel, flexRender, type ColumnDef } from '@tanstack/react-table';
 import {
   Table,
@@ -13,17 +14,35 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { Button } from '@/components/ui/button';
-import { Check } from 'lucide-react';
-import { useSetDefaultAccount } from '@/hooks/use-accounts';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Check, Trash2, RotateCcw } from 'lucide-react';
+import {
+  useSetDefaultAccount,
+  useDeleteAccount,
+  useResetDefaultAccount,
+} from '@/hooks/use-accounts';
 import type { Account } from '@/lib/api-client';
 
 interface AccountsTableProps {
   data: Account[];
   defaultAccount: string | null;
+  onRefresh?: () => void;
 }
 
 export function AccountsTable({ data, defaultAccount }: AccountsTableProps) {
   const setDefaultMutation = useSetDefaultAccount();
+  const deleteMutation = useDeleteAccount();
+  const resetDefaultMutation = useResetDefaultAccount();
+  const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
 
   const columns: ColumnDef<Account>[] = [
     {
@@ -71,20 +90,34 @@ export function AccountsTable({ data, defaultAccount }: AccountsTableProps) {
     {
       id: 'actions',
       header: 'Actions',
-      size: 100,
+      size: 180,
       cell: ({ row }) => {
         const isDefault = row.original.name === defaultAccount;
+        const isPending = setDefaultMutation.isPending || deleteMutation.isPending;
+
         return (
-          <Button
-            variant={isDefault ? 'secondary' : 'default'}
-            size="sm"
-            className="h-8 px-2 w-full"
-            disabled={isDefault || setDefaultMutation.isPending}
-            onClick={() => setDefaultMutation.mutate(row.original.name)}
-          >
-            <Check className={`w-3 h-3 mr-1.5 ${isDefault ? 'opacity-50' : ''}`} />
-            {isDefault ? 'Active' : 'Set Default'}
-          </Button>
+          <div className="flex items-center gap-1">
+            <Button
+              variant={isDefault ? 'secondary' : 'default'}
+              size="sm"
+              className="h-8 px-2"
+              disabled={isDefault || isPending}
+              onClick={() => setDefaultMutation.mutate(row.original.name)}
+            >
+              <Check className={`w-3 h-3 mr-1 ${isDefault ? 'opacity-50' : ''}`} />
+              {isDefault ? 'Active' : 'Set Default'}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8 px-2 text-destructive hover:text-destructive hover:bg-destructive/10"
+              disabled={isDefault || isPending}
+              onClick={() => setDeleteTarget(row.original.name)}
+              title={isDefault ? 'Cannot delete default account' : 'Delete account'}
+            >
+              <Trash2 className="w-4 h-4" />
+            </Button>
+          </div>
         );
       },
     },
@@ -100,51 +133,97 @@ export function AccountsTable({ data, defaultAccount }: AccountsTableProps) {
   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.
+        No accounts found. Use{' '}
+        <code className="text-sm bg-muted px-1 rounded">ccs auth create</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) => {
-                const widthClass =
-                  {
-                    name: 'w-[200px]',
-                    type: 'w-[100px]',
-                    created: 'w-[150px]',
-                    last_used: 'w-[150px]',
-                    actions: 'w-[100px]',
-                  }[header.id] || 'w-auto';
+    <>
+      <div className="space-y-4">
+        <div className="border rounded-md">
+          <Table>
+            <TableHeader>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => {
+                    const widthClass =
+                      {
+                        name: 'w-[200px]',
+                        type: 'w-[100px]',
+                        created: 'w-[150px]',
+                        last_used: 'w-[150px]',
+                        actions: 'w-[180px]',
+                      }[header.id] || 'w-auto';
 
-                return (
-                  <TableHead key={header.id} className={widthClass}>
-                    {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>
+                    return (
+                      <TableHead key={header.id} className={widthClass}>
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(header.column.columnDef.header, header.getContext())}
+                      </TableHead>
+                    );
+                  })}
+                </TableRow>
               ))}
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </div>
+            </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>
+
+        {/* Reset default button */}
+        {defaultAccount && (
+          <div className="flex justify-end">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => resetDefaultMutation.mutate()}
+              disabled={resetDefaultMutation.isPending}
+            >
+              <RotateCcw className="w-4 h-4 mr-2" />
+              Reset to CCS Default
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {/* Delete confirmation dialog */}
+      <AlertDialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Account</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete the account &quot;{deleteTarget}&quot;? This will
+              remove the profile and all its session data. This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={() => {
+                if (deleteTarget) {
+                  deleteMutation.mutate(deleteTarget);
+                  setDeleteTarget(null);
+                }
+              }}
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   );
 }

ui/src/components/account/create-auth-profile-dialog.tsx

@@ -0,0 +1,124 @@
+/**
+ * Create Auth Profile Dialog
+ * Shows CLI command for creating auth profiles (Dashboard cannot spawn Claude login directly)
+ */
+
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Copy, Check, Terminal } from 'lucide-react';
+
+interface CreateAuthProfileDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function CreateAuthProfileDialog({ open, onClose }: CreateAuthProfileDialogProps) {
+  const [profileName, setProfileName] = useState('');
+  const [copied, setCopied] = useState(false);
+
+  // Validate profile name: alphanumeric, dash, underscore only
+  const isValidName = /^[a-zA-Z][a-zA-Z0-9_-]*$/.test(profileName);
+  const command = profileName ? `ccs auth create ${profileName}` : 'ccs auth create <name>';
+
+  const handleCopy = async () => {
+    if (!isValidName) return;
+    await navigator.clipboard.writeText(command);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleClose = () => {
+    setProfileName('');
+    setCopied(false);
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Create New Account</DialogTitle>
+          <DialogDescription>
+            Auth profiles require Claude CLI login. Run the command below in your terminal.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="profile-name">Profile Name</Label>
+            <Input
+              id="profile-name"
+              value={profileName}
+              onChange={(e) => setProfileName(e.target.value)}
+              placeholder="e.g., work, personal, client"
+              autoComplete="off"
+            />
+            {profileName && !isValidName && (
+              <p className="text-xs text-destructive">
+                Name must start with a letter and contain only letters, numbers, dashes, or
+                underscores.
+              </p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label>Command</Label>
+            <div className="flex items-center gap-2 p-3 bg-muted rounded-md font-mono text-sm">
+              <Terminal className="w-4 h-4 text-muted-foreground shrink-0" />
+              <code className="flex-1 break-all">{command}</code>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="shrink-0 h-8 px-2"
+                onClick={handleCopy}
+                disabled={!isValidName}
+              >
+                {copied ? (
+                  <Check className="w-4 h-4 text-green-500" />
+                ) : (
+                  <Copy className="w-4 h-4" />
+                )}
+              </Button>
+            </div>
+          </div>
+
+          <div className="text-sm text-muted-foreground space-y-1">
+            <p>After running the command:</p>
+            <ol className="list-decimal list-inside pl-2 space-y-0.5">
+              <li>Complete the Claude login in your browser</li>
+              <li>Return here and refresh to see the new account</li>
+            </ol>
+          </div>
+
+          <div className="flex justify-end gap-2 pt-2">
+            <Button variant="ghost" onClick={handleClose}>
+              Close
+            </Button>
+            <Button onClick={handleCopy} disabled={!isValidName}>
+              {copied ? (
+                <>
+                  <Check className="w-4 h-4 mr-2" />
+                  Copied!
+                </>
+              ) : (
+                <>
+                  <Copy className="w-4 h-4 mr-2" />
+                  Copy Command
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

ui/src/components/account/index.ts

@@ -5,6 +5,7 @@
 // Main components
 export { AccountsTable } from './accounts-table';
 export { AddAccountDialog } from './add-account-dialog';
+export { CreateAuthProfileDialog } from './create-auth-profile-dialog';
 
 // Flow visualization (from subdirectory)
 export { AccountFlowViz } from './flow-viz';

ui/src/hooks/use-accounts.ts

@@ -1,6 +1,6 @@
 /**
  * React Query hooks for accounts (profiles.json)
- * Phase 03: REST API Routes & CRUD
+ * Dashboard parity: Full CRUD operations for auth profiles
  */
 
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
@@ -28,3 +28,33 @@ export function useSetDefaultAccount() {
     },
   });
 }
+
+export function useResetDefaultAccount() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: () => api.accounts.resetDefault(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['accounts'] });
+      toast.success('Default account reset to CCS');
+    },
+    onError: (error: Error) => {
+      toast.error(error.message);
+    },
+  });
+}
+
+export function useDeleteAccount() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (name: string) => api.accounts.delete(name),
+    onSuccess: (_data, name) => {
+      queryClient.invalidateQueries({ queryKey: ['accounts'] });
+      toast.success(`Account "${name}" deleted`);
+    },
+    onError: (error: Error) => {
+      toast.error(error.message);
+    },
+  });
+}

ui/src/lib/api-client.ts

@@ -351,6 +351,8 @@ export const api = {
         method: 'POST',
         body: JSON.stringify({ name }),
       }),
+    resetDefault: () => request('/accounts/reset-default', { method: 'DELETE' }),
+    delete: (name: string) => request(`/accounts/${name}`, { method: 'DELETE' }),
   },
   // Unified config API
   config: {

ui/src/pages/accounts.tsx

@@ -1,13 +1,18 @@
 /**
  * Accounts Page
- * Phase 03: REST API Routes & CRUD
+ * Dashboard parity: Auth profile CRUD operations
  */
 
+import { useState } from 'react';
+import { Plus } from 'lucide-react';
 import { AccountsTable } from '@/components/account/accounts-table';
+import { CreateAuthProfileDialog } from '@/components/account/create-auth-profile-dialog';
+import { Button } from '@/components/ui/button';
 import { useAccounts } from '@/hooks/use-accounts';
 
 export function AccountsPage() {
-  const { data, isLoading } = useAccounts();
+  const { data, isLoading, refetch } = useAccounts();
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
 
   return (
     <div className="p-6 max-w-6xl mx-auto space-y-8">
@@ -18,22 +23,23 @@ export function AccountsPage() {
             Manage multi-account Claude sessions (profiles.json)
           </p>
         </div>
+        <Button onClick={() => setCreateDialogOpen(true)}>
+          <Plus className="w-4 h-4 mr-2" />
+          Create Account
+        </Button>
       </div>
 
       {isLoading ? (
         <div className="text-muted-foreground">Loading accounts...</div>
       ) : (
-        <AccountsTable data={data?.accounts || []} defaultAccount={data?.default ?? null} />
+        <AccountsTable
+          data={data?.accounts || []}
+          defaultAccount={data?.default ?? null}
+          onRefresh={refetch}
+        />
       )}
 
-      <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 auth create &lt;name&gt;</code> to add new
-          accounts via CLI.
-        </p>
-      </div>
+      <CreateAuthProfileDialog open={createDialogOpen} onClose={() => setCreateDialogOpen(false)} />
     </div>
   );
 }