Phase 4: Webhooks, Backup/Restore UI, Onboarding/Tutorial

- Webhooks Backend: model, schema, service (HMAC-SHA256, httpx), routes, event bus dispatcher, migration 0042
- Webhooks Frontend: SettingsWebhooksPage (CRUD, test button, event multi-select), API client
- Backup/Restore Backend: model, schema, service (pg_dump/pg_restore), routes (admin-only), migration 0043
- Backup/Restore Frontend: SettingsBackupPage (create, list, restore dialog with RESTORE confirmation, auto-refresh)
- Onboarding: OnboardingTour (8 steps, custom CSS overlay), WelcomeDialog, onboardingStore (zustand + localStorage)
- Onboarding integrated into AppShell
- Routes: /settings/webhooks, /settings/backup registered
- Settings nav: Webhooks, Backup & Restore entries added
- Migration conflict fixed: 0042_webhooks → 0043_backups chain

frontend/src/api/backups.ts

@@ -0,0 +1,96 @@
+/**
+ * Backup API client — database backup management.
+ *
+ * Features:
+ * - List backups
+ * - Create backup
+ * - Restore backup
+ * - Delete backup
+ */
+
+import { apiGet, apiPost, apiDelete } from './client';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+
+export interface Backup {
+  id: string;
+  tenant_id: string;
+  filename: string;
+  size_bytes: number | null;
+  status: 'pending' | 'completed' | 'failed';
+  error_message: string | null;
+  created_by: string | null;
+  created_at: string;
+  completed_at: string | null;
+}
+
+export interface BackupListResponse {
+  backups: Backup[];
+  total: number;
+}
+
+// ─── API Functions ──────────────────────────────────────────────────────────
+
+export async function fetchBackups(): Promise<BackupListResponse> {
+  return apiGet<BackupListResponse>('/backups');
+}
+
+export async function createBackup(): Promise<Backup> {
+  return apiPost<Backup>('/backups');
+}
+
+export async function restoreBackup(backupId: string): Promise<Backup> {
+  return apiPost<Backup>(`/backups/${backupId}/restore`);
+}
+
+export async function deleteBackup(backupId: string): Promise<void> {
+  return apiDelete<void>(`/backups/${backupId}`);
+}
+
+// ─── React Query Hooks ─────────────────────────────────────────────────────
+
+export function useBackups() {
+  return useQuery<BackupListResponse>({
+    queryKey: ['backups'],
+    queryFn: fetchBackups,
+    refetchInterval: (query) => {
+      // Auto-refresh while any backup is pending
+      const data = query.state.data;
+      if (data && data.backups.some((b) => b.status === 'pending')) {
+        return 3000; // Poll every 3 seconds
+      }
+      return false;
+    },
+  });
+}
+
+export function useCreateBackup() {
+  const queryClient = useQueryClient();
+  return useMutation<Backup, Error>({
+    mutationFn: createBackup,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['backups'] });
+    },
+  });
+}
+
+export function useRestoreBackup() {
+  const queryClient = useQueryClient();
+  return useMutation<Backup, Error, string>({
+    mutationFn: restoreBackup,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['backups'] });
+    },
+  });
+}
+
+export function useDeleteBackup() {
+  const queryClient = useQueryClient();
+  return useMutation<void, Error, string>({
+    mutationFn: deleteBackup,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['backups'] });
+    },
+  });
+}