fix(snowball): plan history and bill modal updates

client/components/BillModal.jsx

@@ -190,6 +190,10 @@ export default function BillModal({ bill, initialBill, categories, onClose, onSa
     bill?.autopay_verified_at ? new Date(bill.autopay_verified_at) : null
   );
 
+  // Deactivate dialog state
+  const [deactivateOpen,   setDeactivateOpen]   = useState(false);
+  const [deactivateReason, setDeactivateReason] = useState('');
+
   // Unmatch dialog state
   const [unmatchTarget,      setUnmatchTarget]      = useState(null);
   const [unmatchConfirmOpen, setUnmatchConfirmOpen] = useState(false);
@@ -596,6 +600,20 @@ export default function BillModal({ bill, initialBill, categories, onClose, onSa
     }
   }, null);
 
+  async function handleDeactivate() {
+    if (!bill?.id) return;
+    try {
+      const payload = { active: bill.active ? 0 : 1 };
+      if (bill.active && deactivateReason) payload.inactive_reason = deactivateReason;
+      await api.updateBill(bill.id, payload);
+      toast.success(bill.active ? 'Bill deactivated' : 'Bill reactivated');
+      onSave?.();
+      onClose();
+    } catch (err) {
+      toast.error(err.message);
+    }
+  }
+
   const inp = 'bg-background/50 border-border/60 h-9 text-sm w-full';
 
   return (
@@ -1374,6 +1392,7 @@ export default function BillModal({ bill, initialBill, categories, onClose, onSa
         )}
 
         <DialogFooter className="mt-2 gap-2 sm:justify-between">
+          <div className="flex gap-2">
             {!isNew && onDuplicate && (
               <Button
                 type="button"
@@ -1386,6 +1405,18 @@ export default function BillModal({ bill, initialBill, categories, onClose, onSa
                 Duplicate
               </Button>
             )}
+            {!isNew && (
+              <Button
+                type="button"
+                variant="outline"
+                disabled={isPending}
+                onClick={() => bill?.active ? setDeactivateOpen(true) : handleDeactivate()}
+                className={cn('gap-1.5 text-xs', bill?.active ? 'border-destructive/40 text-destructive hover:bg-destructive/10 hover:border-destructive/60' : 'border-emerald-500/40 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/10')}
+              >
+                {bill?.active ? 'Deactivate' : 'Reactivate'}
+              </Button>
+            )}
+          </div>
           <div className="flex gap-2">
             <Button type="button" variant="ghost" disabled={isPending} onClick={onClose} className="text-xs">
               Cancel
@@ -1397,6 +1428,43 @@ export default function BillModal({ bill, initialBill, categories, onClose, onSa
           </div>
         </DialogFooter>
 
+        <AlertDialog open={deactivateOpen} onOpenChange={open => { if (!open) { setDeactivateOpen(false); setDeactivateReason(''); } }}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Deactivate "{bill?.name}"?</AlertDialogTitle>
+              <AlertDialogDescription>
+                This bill will be hidden from the tracker. You can reactivate it at any time.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <div className="space-y-1.5 py-1">
+              <label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                Reason (optional)
+              </label>
+              <select
+                value={deactivateReason}
+                onChange={e => setDeactivateReason(e.target.value)}
+                className="w-full rounded-md border border-border/60 bg-background px-3 py-2 text-sm text-foreground outline-none focus:ring-1 focus:ring-ring"
+              >
+                <option value="">Select a reason…</option>
+                <option value="Moved to spouse">Moved to spouse</option>
+                <option value="Switched providers">Switched providers</option>
+                <option value="Paid off">Paid off</option>
+                <option value="Cancelled">Cancelled</option>
+                <option value="Other">Other</option>
+              </select>
+            </div>
+            <AlertDialogFooter>
+              <AlertDialogCancel onClick={() => { setDeactivateOpen(false); setDeactivateReason(''); }}>Cancel</AlertDialogCancel>
+              <AlertDialogAction
+                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                onClick={() => { setDeactivateOpen(false); handleDeactivate(); }}
+              >
+                Deactivate
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+
         <AlertDialog
           open={!!deletePaymentTarget}
           onOpenChange={open => {

client/components/snowball/PlanHistoryPanel.jsx

@@ -87,6 +87,8 @@ function PlanDetail({ plan }) {
 
       {/* Per-debt snapshot table */}
       {debts.length > 0 && (
+        <div className="space-y-1.5">
+        <p className="text-[10px] font-bold uppercase tracking-[0.1em] text-muted-foreground/50">Debt snapshot at start of plan</p>
         <div className="rounded-lg border border-border/50 overflow-hidden">
           <table className="w-full text-xs">
             <thead>
@@ -126,6 +128,7 @@ function PlanDetail({ plan }) {
             </tbody>
           </table>
         </div>
+        </div>
       )}
 
       {plan.notes && (

client/components/ui/alert-dialog.jsx

@@ -1,5 +1,4 @@
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import { motion } from 'framer-motion';
 import { cn } from '@/lib/utils';
 import { buttonVariants } from '@/components/ui/button';
 
@@ -26,23 +25,18 @@ function AlertDialogContent({ className, children, ...props }) {
     <AlertDialogPortal>
       <AlertDialogOverlay />
       <AlertDialogPrimitive.Content
-        asChild
-        role="dialog"
-        aria-modal="true"
         {...props}
-      >
-        <motion.div
-          initial={{ opacity: 0, x: '-50%', y: '-48%', scale: 0.98 }}
-          animate={{ opacity: 1, x: '-50%', y: '-50%', scale: 1 }}
-          exit={{ opacity: 0, x: '-50%', y: '-48%', scale: 0.98 }}
-          transition={{ duration: 0.16, ease: [0.22, 1, 0.36, 1] }}
         className={cn(
-          'fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-1rem)] max-w-md max-h-[calc(100svh-1rem)] gap-4 overflow-y-auto rounded-2xl border border-border/70 bg-card p-4 text-card-foreground shadow-xl duration-200 sm:w-full sm:max-h-[calc(100svh-2rem)] sm:p-6',
+          'fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-1rem)] max-w-md max-h-[calc(100svh-1rem)] gap-4 overflow-y-auto rounded-2xl border border-border/70 bg-card p-4 text-card-foreground shadow-xl',
+          '-translate-x-1/2 -translate-y-1/2',
+          'duration-200 ease-[0.22,1,0.36,1]',
+          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-[0.98] data-[state=open]:slide-in-from-top-[1%]',
+          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[0.98] data-[state=closed]:slide-out-to-top-[1%]',
+          'sm:w-full sm:max-h-[calc(100svh-2rem)] sm:p-6',
           className
         )}
       >
         {children}
-        </motion.div>
       </AlertDialogPrimitive.Content>
     </AlertDialogPortal>
   );

client/pages/SnowballPage.jsx

@@ -51,6 +51,18 @@ function isRamseyOrdered(debts) {
 }
 
 
+// ── SectionDivider ────────────────────────────────────────────────────────────
+function SectionDivider({ label }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="shrink-0 text-[10px] font-bold uppercase tracking-[0.12em] text-muted-foreground/50">
+        {label}
+      </span>
+      <div className="h-px flex-1 bg-border/50" />
+    </div>
+  );
+}
+
 // ── StatCard ──────────────────────────────────────────────────────────────────
 function StatCard({ label, value, sub, highlight }) {
   return (
@@ -648,6 +660,8 @@ export default function SnowballPage() {
 
       {/* Stats */}
       {bills.length > 0 && (
+        <>
+          <SectionDivider label="Overview" />
           <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
             <StatCard label="Total Debt" value={fmt(totalBalance)}
               sub={unknownCount > 0 ? `+ ${unknownCount} unknown` : undefined} />
@@ -657,10 +671,14 @@ export default function SnowballPage() {
               sub={attackBill ? `${attackBill.name} · attacking ${fmt(attackAmount)}/mo` : undefined}
               highlight={!!liveAttackPayoff} />
           </div>
+        </>
       )}
 
-      {/* Toolbar */}
+      {/* Settings + Readiness */}
       {bills.length > 0 && (
+        <>
+          <SectionDivider label="Configuration" />
+          <div className="space-y-3">
             <div className="flex flex-wrap items-end gap-3">
               <div className="surface-elevated rounded-xl px-4 py-3 flex items-center gap-3 min-h-[58px]">
                 <Switch
@@ -717,10 +735,7 @@ export default function SnowballPage() {
                 {dirty && <span className="text-xs text-amber-400">Unsaved changes</span>}
               </div>
             </div>
-      )}
 
-      {bills.length > 0 && (
-        <div className="space-y-3">
             <ReadinessStrip
               items={readinessItems}
               readyCount={readinessReadyCount}
@@ -738,6 +753,7 @@ export default function SnowballPage() {
               </div>
             )}
           </div>
+        </>
       )}
 
       {bills.length > 0 && (customOrderDrift || missingMinCount > 0) && (
@@ -771,6 +787,8 @@ export default function SnowballPage() {
 
       {/* Cards + projection */}
       {bills.length > 0 && (
+        <>
+        <SectionDivider label="Attack Order" />
         <div className="grid gap-6 lg:grid-cols-[1fr_340px]">
 
           {/* Cards list */}
@@ -997,6 +1015,7 @@ export default function SnowballPage() {
             />
           </div>
         </div>
+        </>
       )}
 
       {/* Plan history */}