fix(audit-wave-9): standardize on Sheet for previews; doctrine in CLAUDE.md

Swap the one outlier (client-interests-tab.tsx) from Vaul Drawer to
Sheet side=right so every detail-preview surface uses the same
primitive. Document the doctrine: Sheet for side panels on both desktop
and mobile; Vaul Drawer reserved for mobile-only bottom-sheet UX
(currently just MoreSheet).

Closes ui/ux M11.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/admin/ai-budget-card.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Loader2 } from 'lucide-react';
 
@@ -40,19 +40,32 @@ export function AiBudgetCard() {
     queryKey,
     queryFn: () => apiFetch<BudgetResp>('/api/v1/admin/ai-budget'),
   });
+  // Key-based remount: the form body is keyed on the loaded payload
+  // signature so its useState initializers seed from server data on
+  // first load. Replaces the prior useEffect(setState, [data]) sync.
+  const sig = data?.data
+    ? `${data.data.budget.enabled}:${data.data.budget.softCapTokens}:${data.data.budget.hardCapTokens}:${data.data.budget.period}`
+    : 'loading';
+  return (
+    <AiBudgetCardBody key={sig} data={data} isLoading={isLoading} qc={qc} queryKey={queryKey} />
+  );
+}
 
-  const [enabled, setEnabled] = useState(false);
-  const [softCap, setSoftCap] = useState('100000');
-  const [hardCap, setHardCap] = useState('500000');
-  const [period, setPeriod] = useState<Period>('month');
-
-  useEffect(() => {
-    if (!data?.data) return;
-    setEnabled(data.data.budget.enabled);
-    setSoftCap(String(data.data.budget.softCapTokens));
-    setHardCap(String(data.data.budget.hardCapTokens));
-    setPeriod(data.data.budget.period);
-  }, [data?.data]);
+function AiBudgetCardBody({
+  data,
+  isLoading,
+  qc,
+  queryKey,
+}: {
+  data: BudgetResp | undefined;
+  isLoading: boolean;
+  qc: ReturnType<typeof useQueryClient>;
+  queryKey: string[];
+}) {
+  const [enabled, setEnabled] = useState(data?.data.budget.enabled ?? false);
+  const [softCap, setSoftCap] = useState(data ? String(data.data.budget.softCapTokens) : '100000');
+  const [hardCap, setHardCap] = useState(data ? String(data.data.budget.hardCapTokens) : '500000');
+  const [period, setPeriod] = useState<Period>(data?.data.budget.period ?? 'month');
 
   const save = useMutation({
     mutationFn: () =>