diff --git a/client/pages/SubscriptionsPage.jsx b/client/pages/SubscriptionsPage.tsx
similarity index 83%
rename from client/pages/SubscriptionsPage.jsx
rename to client/pages/SubscriptionsPage.tsx
index 474ee92..8838f77 100644
--- a/client/pages/SubscriptionsPage.jsx
+++ b/client/pages/SubscriptionsPage.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useOptimistic, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useOptimistic, useRef, useState, type ComponentType, type ComponentProps, type ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
 import { useSubscriptions, useSubscriptionRecommendations, useCategories, useBills } from '@/hooks/useQueries';
@@ -27,7 +27,8 @@ import {
   X,
 } from 'lucide-react';
 import { api } from '@/api';
-import { cn, fmt, fmtDate, localDateString } from '@/lib/utils';
+import { cn, fmtDate, localDateString, errMessage } from '@/lib/utils';
+import { formatUSD, asDollars } from '@/lib/money';
 import { scheduleLabel } from '@/lib/billingSchedule';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -52,8 +53,14 @@ import { getLinkImportPref } from '@/pages/SettingsPage';
 import { useSearchPanelPreference } from '@/hooks/useSearchPanelPreference';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { moveInArray, movedItemId, reorderPayload } from '@/lib/reorder';
+import type { Bill, Category } from '@/types';
+import type { DragProps, MoveControls } from '@/components/tracker/MobileTrackerRow';
 
-const TYPE_LABELS = {
+function fmt(v: number | null | undefined): string {
+  return formatUSD(asDollars(Number(v) || 0));
+}
+
+const TYPE_LABELS: Record<string, string> = {
   streaming: 'Streaming',
   software: 'Software',
   cloud: 'Cloud',
@@ -70,9 +77,142 @@ const TYPE_LABELS = {
   other: 'Other',
 };
 
+function typeLabel(t: string | null | undefined): string {
+  return (t ? TYPE_LABELS[t] : undefined) || 'Other';
+}
+
+// ── Domain types ─────────────────────────────────────────────────────────────
+
+interface CadenceLike {
+  cycle_type?: string | null;
+  billing_cycle?: string | null;
+  due_day?: number | null;
+  cycle_day?: number | string | null;
+  expected_amount?: number | null;
+  name?: string | null;
+  [key: string]: unknown;
+}
+
+interface Subscription {
+  id: number;
+  name: string;
+  active?: boolean | number;
+  is_subscription?: boolean | number;
+  category_id?: number | null;
+  category_name?: string | null;
+  expected_amount?: number | null;
+  monthly_equivalent?: number | null;
+  yearly_equivalent?: number | null;
+  next_due_date?: string | null;
+  subscription_type?: string;
+  due_day?: number | null;
+  cycle_type?: string | null;
+  billing_cycle?: string | null;
+  cycle_day?: number | string | null;
+  autopay_enabled?: unknown;
+  has_2fa?: unknown;
+  has_merchant_rule?: unknown;
+  has_linked_transactions?: unknown;
+  reminder_days_before?: number | null;
+  [key: string]: unknown;
+}
+
+interface TopType { type: string; monthly_total: number }
+interface SubSummary {
+  active_count?: number;
+  paused_count?: number;
+  monthly_total?: number;
+  yearly_total?: number;
+  top_type?: TopType | null;
+}
+interface SubData { summary?: SubSummary; subscriptions?: Subscription[] }
+
+interface CatalogMatch {
+  id?: number | string;
+  name: string;
+  subscription_type?: string;
+  website?: string;
+  starting_monthly_usd?: number | null;
+  starting_annual_usd?: number | null;
+}
+interface ExistingBillMatch {
+  id: number;
+  name: string;
+  expected_amount?: number | null;
+  due_day?: number | null;
+  reasons?: string[];
+}
+interface RecEvidence {
+  identity?: { label?: string };
+  amount?: { label?: string; match?: string };
+  cadence?: { label?: string; recurring?: boolean };
+  amount_range?: { min: number; max: number };
+  ambiguity?: { ambiguous?: boolean; label?: string; reasons?: string[] };
+}
+interface RecTransaction { id: number; payee?: string; description?: string; memo?: string; date?: string; account?: string; amount?: number }
+interface Recommendation {
+  id: number | string;
+  name: string;
+  subscription_type?: string;
+  occurrence_count?: number;
+  last_seen_date?: string;
+  expected_amount?: number | null;
+  monthly_equivalent?: number | null;
+  confidence?: number;
+  cycle_type?: string;
+  merchant?: string;
+  decline_key?: string;
+  transaction_ids?: (number | string)[];
+  accounts?: string[];
+  reasons?: string[];
+  evidence?: RecEvidence;
+  existing_bill_match?: ExistingBillMatch | null;
+  catalog_match?: CatalogMatch | null;
+  transactions?: RecTransaction[];
+  [key: string]: unknown;
+}
+
+interface SubTx {
+  id: number;
+  amount: number;
+  payee?: string;
+  description?: string;
+  memo?: string;
+  account_name?: string;
+  data_source_name?: string;
+  account?: string;
+  match_status?: string;
+  matched_bill_name?: string;
+  catalog_match?: CatalogMatch | null;
+  posted_date?: string;
+  date?: string;
+  [key: string]: unknown;
+}
+
+interface SubDraft {
+  name?: string;
+  category_id?: number | null;
+  due_day?: number;
+  expected_amount?: string;
+  billing_cycle?: string;
+  cycle_type?: string;
+  cycle_day?: string;
+  is_subscription?: number;
+  subscription_type?: string;
+  website?: string;
+  notes?: string;
+  reminder_days_before?: number;
+}
+interface ModalState { bill: Subscription | null; initialBill?: SubDraft }
+
+type RecAction = (rec: Recommendation) => void | Promise<void>;
+type QuickLink = (rec: Recommendation, billId: number) => void | Promise<void>;
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
 const SUBSCRIPTION_SORT_KEY = 'subscriptions_sort_mode';
 const CADENCE_ORDER = ['weekly', 'biweekly', 'monthly', 'quarterly', 'annual', 'other'];
-const CADENCE_LABELS = {
+const CADENCE_LABELS: Record<string, string> = {
   weekly: 'Weekly',
   biweekly: 'Biweekly',
   monthly: 'Monthly',
@@ -81,7 +221,7 @@ const CADENCE_LABELS = {
   other: 'Other',
 };
 
-const SUBSCRIPTION_MONTHLY_FACTORS = {
+const SUBSCRIPTION_MONTHLY_FACTORS: Record<string, number> = {
   weekly: 52 / 12,
   biweekly: 26 / 12,
   monthly: 1,
@@ -90,7 +230,7 @@ const SUBSCRIPTION_MONTHLY_FACTORS = {
   annually: 1 / 12,
 };
 
-function normalizedCadence(item) {
+function normalizedCadence(item: CadenceLike): string {
   const raw = String(item?.cycle_type || item?.billing_cycle || '').toLowerCase();
   if (raw.includes('week') && raw.includes('bi')) return 'biweekly';
   if (raw === 'biweekly') return 'biweekly';
@@ -101,7 +241,7 @@ function normalizedCadence(item) {
   return 'other';
 }
 
-function subscriptionMonthlyEquivalent(item) {
+function subscriptionMonthlyEquivalent(item: CadenceLike): number {
   const key = String(item?.cycle_type || item?.billing_cycle || 'monthly').toLowerCase();
   const fallback = String(item?.billing_cycle || '').toLowerCase() === 'quarterly'
     ? 'quarterly'
@@ -112,7 +252,7 @@ function subscriptionMonthlyEquivalent(item) {
   return Math.round(Number(item?.expected_amount || 0) * factor * 100) / 100;
 }
 
-function subscriptionNextDueDate(item, now = new Date()) {
+function subscriptionNextDueDate(item: CadenceLike, now = new Date()): string {
   const dueDay = Math.min(Math.max(Number(item?.due_day) || 1, 1), 31);
   const cycle = String(item?.cycle_type || item?.billing_cycle || 'monthly').toLowerCase();
   let date = new Date(now.getFullYear(), now.getMonth(), dueDay);
@@ -130,7 +270,7 @@ function subscriptionNextDueDate(item, now = new Date()) {
   return localDateString(date);
 }
 
-function decorateSavedSubscriptionBill(bill, categories) {
+function decorateSavedSubscriptionBill(bill: Bill, categories: Category[]): Subscription {
   const monthly = subscriptionMonthlyEquivalent(bill);
   const category = categories.find(item => Number(item.id) === Number(bill.category_id));
   return {
@@ -141,14 +281,14 @@ function decorateSavedSubscriptionBill(bill, categories) {
     monthly_equivalent: monthly,
     yearly_equivalent: Math.round(monthly * 12 * 100) / 100,
     next_due_date: subscriptionNextDueDate(bill),
-    subscription_type: bill.subscription_type || 'other',
+    subscription_type: (bill.subscription_type as string | undefined) || 'other',
   };
 }
 
-function subscriptionSummaryFromList(subscriptions) {
+function subscriptionSummaryFromList(subscriptions: Subscription[]): SubSummary {
   const active = subscriptions.filter(item => item.active);
   const monthlyTotal = active.reduce((sum, item) => sum + Number(item.monthly_equivalent || 0), 0);
-  const typeTotals = new Map();
+  const typeTotals = new Map<string, number>();
   for (const item of active) {
     const type = item.subscription_type || 'other';
     typeTotals.set(type, (typeTotals.get(type) || 0) + Number(item.monthly_equivalent || 0));
@@ -165,7 +305,7 @@ function subscriptionSummaryFromList(subscriptions) {
 
 // Extended group order: monthly bills split by 1st/15th pay bucket
 const GROUP_ORDER = ['weekly', 'biweekly', 'monthly-1st', 'monthly-15th', 'quarterly', 'annual', 'other'];
-const GROUP_LABELS = {
+const GROUP_LABELS: Record<string, string> = {
   'weekly':       'Weekly',
   'biweekly':     'Biweekly',
   'monthly-1st':  '1st  ·  Due days 1–14',
@@ -175,7 +315,7 @@ const GROUP_LABELS = {
   'other':        'Other',
 };
 
-function subscriptionGroup(item) {
+function subscriptionGroup(item: Subscription): string {
   const cadence = normalizedCadence(item);
   if (cadence === 'monthly') {
     return (Number(item.due_day) || 1) <= 14 ? 'monthly-1st' : 'monthly-15th';
@@ -183,19 +323,19 @@ function subscriptionGroup(item) {
   return cadence;
 }
 
-function groupIndex(item) {
+function groupIndex(item: Subscription): number {
   const idx = GROUP_ORDER.indexOf(subscriptionGroup(item));
   return idx >= 0 ? idx : GROUP_ORDER.length - 1;
 }
 
-function daysUntil(dateStr) {
+function daysUntil(dateStr: string | null | undefined): number | null {
   if (!dateStr) return null;
   const today = new Date();
   today.setHours(0, 0, 0, 0);
-  return Math.round((new Date(dateStr + 'T00:00:00') - today) / 86400000);
+  return Math.round((new Date(dateStr + 'T00:00:00').getTime() - today.getTime()) / 86400000);
 }
 
-function sortSubscriptionsByCadence(items) {
+function sortSubscriptionsByCadence(items: Subscription[]): Subscription[] {
   return [...items].sort((a, b) => (
     groupIndex(a) - groupIndex(b)
     || (Number(a.due_day) || 0) - (Number(b.due_day) || 0)
@@ -203,7 +343,7 @@ function sortSubscriptionsByCadence(items) {
   ));
 }
 
-function SortModeButton({ active, children, onClick }) {
+function SortModeButton({ active, children, onClick }: { active: boolean; children: ReactNode; onClick: () => void }) {
   return (
     <button
       type="button"
@@ -221,11 +361,16 @@ function SortModeButton({ active, children, onClick }) {
   );
 }
 
-function cycleLabel(item) {
+function cycleLabel(item: Subscription): string {
   return scheduleLabel(item);
 }
 
-function StatCard({ icon: Icon, label, value, hint }) {
+function StatCard({ icon: Icon, label, value, hint }: {
+  icon: ComponentType<{ className?: string }>;
+  label: ReactNode;
+  value: ReactNode;
+  hint?: ReactNode;
+}) {
   return (
     <div className="min-w-0 rounded-lg border border-border/70 bg-card/80 p-4">
       <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-foreground/70">
@@ -238,7 +383,12 @@ function StatCard({ icon: Icon, label, value, hint }) {
   );
 }
 
-function SubscriptionRowActions({ item, onEdit, onToggle, busy }) {
+function SubscriptionRowActions({ item, onEdit, onToggle, busy }: {
+  item: Subscription;
+  onEdit: (item: Subscription) => void;
+  onToggle: (item: Subscription) => void;
+  busy?: boolean;
+}) {
   return (
     <div className="grid grid-cols-[minmax(0,1fr)_auto] gap-2 md:flex md:justify-end">
       <Button
@@ -274,7 +424,14 @@ function SubscriptionRowActions({ item, onEdit, onToggle, busy }) {
   );
 }
 
-function SubscriptionRow({ item, onEdit, onToggle, moveControls, dragProps, busy }) {
+function SubscriptionRow({ item, onEdit, onToggle, moveControls, dragProps, busy }: {
+  item: Subscription;
+  onEdit: (item: Subscription) => void;
+  onToggle: (item: Subscription) => void;
+  moveControls?: MoveControls;
+  dragProps?: DragProps;
+  busy?: boolean;
+}) {
   return (
     <div
       draggable={dragProps?.draggable}
@@ -336,7 +493,7 @@ function SubscriptionRow({ item, onEdit, onToggle, moveControls, dragProps, busy
             <Tooltip>
               <TooltipTrigger asChild>
                 <Badge variant="outline" className="capitalize border-primary/25 bg-primary/10 text-primary cursor-default">
-                  {TYPE_LABELS[item.subscription_type] || 'Other'}
+                  {typeLabel(item.subscription_type)}
                 </Badge>
               </TooltipTrigger>
               <TooltipContent>Service category</TooltipContent>
@@ -429,9 +586,16 @@ function SubscriptionRow({ item, onEdit, onToggle, moveControls, dragProps, busy
   );
 }
 
-function BillPickerDialog({ open, onClose, recommendation, bills, onConfirm, busy }) {
+function BillPickerDialog({ open, onClose, recommendation, bills, onConfirm, busy }: {
+  open: boolean;
+  onClose: () => void;
+  recommendation: Recommendation | null;
+  bills: Bill[];
+  onConfirm: (billId: number | null) => void;
+  busy: boolean;
+}) {
   const [search, setSearch] = useState('');
-  const [selectedId, setSelectedId] = useState(null);
+  const [selectedId, setSelectedId] = useState<number | null>(null);
 
   useEffect(() => { if (open) { setSearch(''); setSelectedId(null); } }, [open]);
 
@@ -499,7 +663,7 @@ function BillPickerDialog({ open, onClose, recommendation, bills, onConfirm, bus
   );
 }
 
-function TxResultRow({ tx, onTrack }) {
+function TxResultRow({ tx, onTrack }: { tx: SubTx; onTrack: (tx: SubTx) => void }) {
   const dollars = fmt(Math.abs(tx.amount) / 100);
   const label   = tx.payee || tx.description || tx.memo || '—';
   const account = tx.account_name || tx.data_source_name || null;
@@ -544,7 +708,7 @@ function TxResultRow({ tx, onTrack }) {
         </div>
         <p className="text-[11px] text-muted-foreground mt-0.5">
           {tx.posted_date}{account ? ` · ${account}` : ''}
-          {catalogMatch ? ` · ${TYPE_LABELS[catalogMatch.subscription_type] || 'Other'}` : ''}
+          {catalogMatch ? ` · ${typeLabel(catalogMatch.subscription_type)}` : ''}
         </p>
       </div>
       <span className="font-mono text-sm font-semibold tabular-nums shrink-0">{dollars}</span>
@@ -558,7 +722,14 @@ function TxResultRow({ tx, onTrack }) {
   );
 }
 
-function RecommendationIconButton({ label, icon: Icon, onClick, disabled, className, variant = 'outline' }) {
+function RecommendationIconButton({ label, icon: Icon, onClick, disabled, className, variant = 'outline' }: {
+  label: string;
+  icon: ComponentType<{ className?: string }>;
+  onClick: () => void;
+  disabled?: boolean;
+  className?: string;
+  variant?: ComponentProps<typeof Button>['variant'];
+}) {
   return (
     <Tooltip>
       <TooltipTrigger asChild>
@@ -579,7 +750,15 @@ function RecommendationIconButton({ label, icon: Icon, onClick, disabled, classN
   );
 }
 
-function RecommendationMoreMenu({ recommendation, existingBill, busy, onAccept, onDecline, onMatch, categoryId }) {
+function RecommendationMoreMenu({ recommendation, existingBill, busy, onAccept, onDecline, onMatch, categoryId }: {
+  recommendation: Recommendation;
+  existingBill?: ExistingBillMatch | null;
+  busy?: boolean;
+  onAccept: RecAction;
+  onDecline: RecAction;
+  onMatch: RecAction;
+  categoryId: number | null;
+}) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -614,7 +793,16 @@ function RecommendationMoreMenu({ recommendation, existingBill, busy, onAccept,
   );
 }
 
-function RecommendationCard({ recommendation, categoryId, onAccept, onDecline, onMatch, onQuickLink, onDetails, busy }) {
+function RecommendationCard({ recommendation, categoryId, onAccept, onDecline, onMatch, onQuickLink, onDetails, busy }: {
+  recommendation: Recommendation;
+  categoryId: number | null;
+  onAccept: RecAction;
+  onDecline: RecAction;
+  onMatch: RecAction;
+  onQuickLink: QuickLink;
+  onDetails: (rec: Recommendation) => void;
+  busy?: boolean;
+}) {
   const identity = recommendation.evidence?.identity;
   const amount = recommendation.evidence?.amount;
   const cadence = recommendation.evidence?.cadence;
@@ -630,19 +818,19 @@ function RecommendationCard({ recommendation, categoryId, onAccept, onDecline, o
           <div className="min-w-0 flex-1">
             <p className="truncate text-sm font-semibold text-foreground">{recommendation.name}</p>
             <p className="mt-1 text-xs font-medium text-muted-foreground">
-              {TYPE_LABELS[recommendation.subscription_type] || 'Other'} · {recommendation.occurrence_count} charges · last seen {fmtDate(recommendation.last_seen_date)}
+              {typeLabel(recommendation.subscription_type)} · {recommendation.occurrence_count} charges · last seen {fmtDate(recommendation.last_seen_date)}
             </p>
             {recommendation.catalog_match?.starting_monthly_usd && (
               <p className="mt-1 text-xs font-medium text-muted-foreground">
-                Catalog starts at {fmt(recommendation.catalog_match.starting_monthly_usd)} / mo
-                {recommendation.catalog_match.starting_annual_usd
-                  ? ` or ${fmt(recommendation.catalog_match.starting_annual_usd)} / yr`
+                Catalog starts at {fmt(recommendation.catalog_match?.starting_monthly_usd)} / mo
+                {recommendation.catalog_match?.starting_annual_usd
+                  ? ` or ${fmt(recommendation.catalog_match?.starting_annual_usd)} / yr`
                   : ''}
               </p>
             )}
-            {recommendation.accounts?.length > 0 && (
+            {!!recommendation.accounts?.length && (
               <p className="mt-1 truncate text-xs font-medium text-muted-foreground">
-                {recommendation.accounts.length > 1 ? 'Accounts' : 'Account'}: {recommendation.accounts.join(', ')}
+                {(recommendation.accounts?.length ?? 0) > 1 ? 'Accounts' : 'Account'}: {recommendation.accounts?.join(', ')}
               </p>
             )}
             {existingBill && (
@@ -778,7 +966,7 @@ function RecommendationCard({ recommendation, categoryId, onAccept, onDecline, o
   );
 }
 
-function EvidenceItem({ label, value, tone = 'default' }) {
+function EvidenceItem({ label, value, tone = 'default' }: { label: string; value?: ReactNode; tone?: string }) {
   if (!value) return null;
   return (
     <div className={cn(
@@ -793,7 +981,17 @@ function EvidenceItem({ label, value, tone = 'default' }) {
   );
 }
 
-function RecommendationDetailsDialog({ open, recommendation, categoryId, onClose, onAccept, onDecline, onMatch, onQuickLink, busy }) {
+function RecommendationDetailsDialog({ open, recommendation, categoryId, onClose, onAccept, onDecline, onMatch, onQuickLink, busy }: {
+  open: boolean;
+  recommendation: Recommendation | null;
+  categoryId: number | null;
+  onClose: () => void;
+  onAccept: RecAction;
+  onDecline: RecAction;
+  onMatch: RecAction;
+  onQuickLink: QuickLink;
+  busy?: boolean;
+}) {
   if (!recommendation) return null;
 
   const identity = recommendation.evidence?.identity;
@@ -864,7 +1062,7 @@ function RecommendationDetailsDialog({ open, recommendation, categoryId, onClose
             )}
           </DialogTitle>
           <p className="text-sm text-muted-foreground">
-            {TYPE_LABELS[recommendation.subscription_type] || 'Other'} · {recommendation.occurrence_count} charge{recommendation.occurrence_count !== 1 ? 's' : ''} · last seen {fmtDate(recommendation.last_seen_date)}
+            {typeLabel(recommendation.subscription_type)} · {recommendation.occurrence_count} charge{recommendation.occurrence_count !== 1 ? 's' : ''} · last seen {fmtDate(recommendation.last_seen_date)}
           </p>
         </DialogHeader>
 
@@ -900,9 +1098,9 @@ function RecommendationDetailsDialog({ open, recommendation, categoryId, onClose
               <AlertTriangle className="h-4 w-4" />
               {ambiguity.label || 'Review before tracking'}
             </p>
-            {ambiguity.reasons?.length > 0 && (
+            {!!ambiguity.reasons?.length && (
               <div className="mt-2 space-y-1 text-sm text-muted-foreground">
-                {ambiguity.reasons.map(reason => (
+                {ambiguity.reasons?.map(reason => (
                   <p key={reason}>{reason}</p>
                 ))}
               </div>
@@ -916,9 +1114,9 @@ function RecommendationDetailsDialog({ open, recommendation, categoryId, onClose
             <p className="mt-1 text-sm text-muted-foreground">
               {existingBill.name} · {existingBill.expected_amount ? fmt(existingBill.expected_amount) : 'No amount'} · due day {existingBill.due_day || 'not set'}
             </p>
-            {existingBill.reasons?.length > 0 && (
+            {!!existingBill.reasons?.length && (
               <div className="mt-2 space-y-1 text-sm text-muted-foreground">
-                {existingBill.reasons.map(reason => (
+                {existingBill.reasons?.map(reason => (
                   <p key={reason}>{reason}</p>
                 ))}
               </div>
@@ -926,9 +1124,9 @@ function RecommendationDetailsDialog({ open, recommendation, categoryId, onClose
           </div>
         )}
 
-        {recommendation.reasons?.length > 0 && (
+        {!!recommendation.reasons?.length && (
           <div className="flex flex-wrap gap-2">
-            {recommendation.reasons.map(reason => (
+            {recommendation.reasons?.map(reason => (
               <span key={reason} className="rounded-md border border-border/60 bg-background/60 px-2 py-1 text-[11px] font-medium text-muted-foreground">
                 {reason}
               </span>
@@ -994,43 +1192,49 @@ function RecommendationDetailsDialog({ open, recommendation, categoryId, onClose
   );
 }
 
+type FlatItem =
+  | { type: 'group-header'; sectionKey: string; groupKey: string; activeState: boolean; groupItems: Subscription[]; monthlySum: number }
+  | { type: 'row'; item: Subscription; groupItems: Subscription[]; activeState: boolean; i: number }
+  | { type: 'paused-divider'; count: number };
+
 export default function SubscriptionsPage() {
   const queryClient = useQueryClient();
   const { data: subData, isPending: loading } = useSubscriptions();
-  const data = subData || { summary: {}, subscriptions: [] };
-  const { data: recommendations = [], isPending: recommendationsLoading } = useSubscriptionRecommendations();
+  const data: SubData = (subData as SubData | undefined) || { summary: {}, subscriptions: [] };
+  const { data: recommendationsRaw = [], isPending: recommendationsLoading } = useSubscriptionRecommendations();
+  const recommendations = recommendationsRaw as Recommendation[];
   const { data: categories = [] } = useCategories();
   const { data: bills = [] } = useBills();
   // Optimistic updates write through the query cache so every existing call site
   // (setData(prev => …), setBills(…), setRecommendations(…)) works unchanged.
-  const setData = useCallback((u) => queryClient.setQueryData(['subscriptions'],
+  const setData = useCallback((u: SubData | ((prev: SubData) => SubData)) => queryClient.setQueryData<SubData>(['subscriptions'],
     prev => (typeof u === 'function' ? u(prev || { summary: {}, subscriptions: [] }) : u)), [queryClient]);
-  const setBills = useCallback((u) => queryClient.setQueryData(['bills'],
+  const setBills = useCallback((u: Bill[] | ((prev: Bill[]) => Bill[])) => queryClient.setQueryData<Bill[]>(['bills'],
     prev => (typeof u === 'function' ? u(prev || []) : u)), [queryClient]);
-  const setRecommendations = useCallback((u) => queryClient.setQueryData(['subscription-recommendations'],
+  const setRecommendations = useCallback((u: Recommendation[] | ((prev: Recommendation[]) => Recommendation[])) => queryClient.setQueryData<Recommendation[]>(['subscription-recommendations'],
     prev => (typeof u === 'function' ? u(prev || []) : u)), [queryClient]);
-  const [busyId, setBusyId] = useState(null);
-  const [modal, setModal] = useState(null);
-  const [matchTarget, setMatchTarget] = useState(null);
-  const [detailsTarget, setDetailsTarget] = useState(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const [modal, setModal] = useState<ModalState | null>(null);
+  const [matchTarget, setMatchTarget] = useState<Recommendation | null>(null);
+  const [detailsTarget, setDetailsTarget] = useState<Recommendation | null>(null);
   const [recSearch, setRecSearch] = useState('');
   const [subSearch, setSubSearch] = useState('');
-  const [subscriptionSort, setSubscriptionSort] = useState(() => (
+  const [subscriptionSort, setSubscriptionSort] = useState<'custom' | 'cadence'>(() => (
     localStorage.getItem(SUBSCRIPTION_SORT_KEY) === 'cadence' ? 'cadence' : 'custom'
   ));
-  const [draggingId, setDraggingId] = useState(null);
-  const [dropTargetId, setDropTargetId] = useState(null);
-  const [movingBillId, setMovingBillId] = useState(null);
+  const [draggingId, setDraggingId] = useState<number | null>(null);
+  const [dropTargetId, setDropTargetId] = useState<number | null>(null);
+  const [movingBillId, setMovingBillId] = useState<number | string | null>(null);
   const [searchPanelCollapsed, setSearchPanelCollapsed] = useSearchPanelPreference();
-  const [collapsedGroups, setCollapsedGroups] = useState(new Set());
-  const cardHeaderRef = useRef(null);
+  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set());
+  const cardHeaderRef = useRef<HTMLDivElement>(null);
   const [cardHeaderHeight, setCardHeaderHeight] = useState(0);
 
   const [txQuery, setTxQuery]         = useState('');
-  const [txResults, setTxResults]     = useState([]);
+  const [txResults, setTxResults]     = useState<SubTx[]>([]);
   const [txSearching, setTxSearching] = useState(false);
-  const [importDialog, setImportDialog] = useState(null); // { billId, billName }
-  const txDebounce = useRef(null);
+  const [importDialog, setImportDialog] = useState<{ billId: number; billName: string } | null>(null);
+  const txDebounce = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
   const subscriptionCategoryId = useMemo(() => {
     const match = categories.find(category => /subscrip/i.test(category.name));
@@ -1066,11 +1270,11 @@ export default function SubscriptionsPage() {
     txDebounce.current = setTimeout(async () => {
       setTxSearching(true);
       try {
-        const result = await api.subscriptionTransactionMatches({ q, limit: 50 });
+        const result = await api.subscriptionTransactionMatches({ q, limit: 50 }) as SubTx[] | { transactions?: SubTx[] };
         setTxResults(Array.isArray(result) ? result : (result?.transactions ?? []));
       } catch (err) {
         setTxResults([]);
-        toast.error(err.message || 'Transaction search failed.');
+        toast.error(errMessage(err, 'Transaction search failed.'));
       }
       finally { setTxSearching(false); }
     }, 300);
@@ -1081,48 +1285,48 @@ export default function SubscriptionsPage() {
     await Promise.all([load(), loadRecommendations()]);
   }
 
-  async function toggleSubscription(item) {
+  async function toggleSubscription(item: Subscription) {
     const newActive = !item.active;
     addOptimisticSub({ id: item.id, active: newActive }); // instant — no spinner
     try {
       await api.updateSubscription(item.id, { active: newActive });
       await load(); // reconciles optimistic state
     } catch (err) {
-      toast.error(err.message || 'Subscription could not be updated.');
+      toast.error(errMessage(err, 'Subscription could not be updated.'));
       await load(); // revert via useOptimistic reconciliation
     }
   }
 
-  async function acceptRecommendation(recommendation) {
+  async function acceptRecommendation(recommendation: Recommendation) {
     setBusyId(`rec-${recommendation.id}`);
     try {
-      const created = await api.createSubscriptionFromRecommendation(recommendation);
+      const created = await api.createSubscriptionFromRecommendation(recommendation) as { id?: number; name?: string } | null;
       toast.success(`${recommendation.name} is now tracked.`);
       await refreshAll();
       if (getLinkImportPref() && recommendation.merchant && created?.id) {
         setImportDialog({ billId: created.id, billName: created.name || recommendation.name });
       }
     } catch (err) {
-      toast.error(err.message || 'Could not create subscription.');
+      toast.error(errMessage(err, 'Could not create subscription.'));
     } finally {
       setBusyId(null);
     }
   }
 
-  async function declineRecommendation(recommendation) {
+  async function declineRecommendation(recommendation: Recommendation) {
     if (!recommendation.decline_key) return;
     setBusyId(`dec-${recommendation.id}`);
     try {
       await api.declineRecommendation(recommendation);
       setRecommendations(prev => prev.filter(r => r.id !== recommendation.id));
     } catch (err) {
-      toast.error(err.message || 'Could not dismiss recommendation.');
+      toast.error(errMessage(err, 'Could not dismiss recommendation.'));
     } finally {
       setBusyId(null);
     }
   }
 
-  async function linkRecommendationToBill(recommendation, billId) {
+  async function linkRecommendationToBill(recommendation: Recommendation | null, billId: number | null) {
     if (!recommendation || !billId) return;
     setBusyId(`match-${recommendation.id}`);
     try {
@@ -1132,22 +1336,22 @@ export default function SubscriptionsPage() {
         recommendation.merchant,
         recommendation.catalog_match?.id,
         recommendation.confidence,
-      );
+      ) as { matched_count?: number; bill_name?: string };
       toast.success(`Linked ${result.matched_count} transaction${result.matched_count !== 1 ? 's' : ''} to "${result.bill_name}".`);
       setMatchTarget(null);
       setRecommendations(prev => prev.filter(r => r.id !== recommendation.id));
     } catch (err) {
-      toast.error(err.message || 'Could not link recommendation to bill.');
+      toast.error(errMessage(err, 'Could not link recommendation to bill.'));
     } finally {
       setBusyId(null);
     }
   }
 
-  async function matchRecommendationToBill(billId) {
+  async function matchRecommendationToBill(billId: number | null) {
     await linkRecommendationToBill(matchTarget, billId);
   }
 
-  function applySavedBillToPage(savedBill) {
+  function applySavedBillToPage(savedBill: Bill) {
     if (!savedBill?.id) return;
     const decorated = decorateSavedSubscriptionBill(savedBill, categories);
 
@@ -1176,7 +1380,7 @@ export default function SubscriptionsPage() {
     });
   }
 
-  function handleBillModalSave(savedBill) {
+  function handleBillModalSave(savedBill?: Bill) {
     if (!savedBill?.id) return;
     applySavedBillToPage(savedBill);
   }
@@ -1199,7 +1403,7 @@ export default function SubscriptionsPage() {
     });
   }
 
-  function openFromTransaction(tx) {
+  function openFromTransaction(tx: SubTx) {
     const catalogMatch = tx.catalog_match;
     const label   = catalogMatch?.name || tx.payee || tx.description || tx.memo || '';
     const dollars = Math.abs(tx.amount ?? 0) / 100;
@@ -1229,7 +1433,7 @@ export default function SubscriptionsPage() {
 
   const [optimisticSubs, addOptimisticSub] = useOptimistic(
     subscriptions,
-    useCallback((state, { id, active }) => state.map(s => s.id === id ? { ...s, active } : s), []),
+    useCallback((state: Subscription[], { id, active }: { id: number; active: boolean }) => state.map(s => s.id === id ? { ...s, active } : s), []),
   );
 
   const filteredSubscriptions = useMemo(() => {
@@ -1256,10 +1460,10 @@ export default function SubscriptionsPage() {
   const reorderEnabled = !loading && bills.length > 0 && subscriptionSort === 'custom';
 
   // Flat item list for virtualizer — cadence mode only (custom mode needs DOM order for drag-reorder)
-  const flatVirtualItems = useMemo(() => {
+  const flatVirtualItems = useMemo<FlatItem[] | null>(() => {
     if (subscriptionSort !== 'cadence') return null;
-    const items = [];
-    const buildGroup = (group, activeState) => {
+    const items: FlatItem[] = [];
+    const buildGroup = (group: Subscription[], activeState: boolean) => {
       GROUP_ORDER.forEach(groupKey => {
         const groupItems = group.filter(item => subscriptionGroup(item) === groupKey);
         if (!groupItems.length) return;
@@ -1279,7 +1483,7 @@ export default function SubscriptionsPage() {
     return items;
   }, [sortedActive, sortedPaused, subscriptionSort, collapsedGroups]);
 
-  const listRef = useRef(null);
+  const listRef = useRef<HTMLDivElement>(null);
   const virtualizer = useVirtualizer({
     count: flatVirtualItems?.length ?? 0,
     getScrollElement: () => listRef.current,
@@ -1294,7 +1498,7 @@ export default function SubscriptionsPage() {
     enabled: !!flatVirtualItems,
   });
 
-  async function persistSubscriptionOrder(nextSubscriptions, nextBills, movedId) {
+  async function persistSubscriptionOrder(nextSubscriptions: Subscription[], nextBills: Bill[], movedId: string | number | null) {
     const prevData = data;
     const prevBills = bills;
     setData(prev => ({ ...prev, subscriptions: nextSubscriptions }));
@@ -1305,7 +1509,7 @@ export default function SubscriptionsPage() {
       await load();
       api.allBills().then(b => setBills(Array.isArray(b) ? b : [])).catch(() => {});
     } catch (err) {
-      toast.error(err.message || 'Failed to save subscription order');
+      toast.error(errMessage(err, 'Failed to save subscription order'));
       setData(prevData);
       setBills(prevBills);
     } finally {
@@ -1313,24 +1517,24 @@ export default function SubscriptionsPage() {
     }
   }
 
-  function reorderSubscriptionGroup(activeState, orderedGroup) {
+  function reorderSubscriptionGroup(activeState: boolean, orderedGroup: Subscription[]) {
     const sourceGroup = subscriptions.filter(item => !!item.active === activeState);
     const replacements = [...orderedGroup];
     const nextSubscriptions = subscriptions.map(item => (
-      !!item.active === activeState ? replacements.shift() : item
+      !!item.active === activeState ? replacements.shift()! : item
     ));
 
-    const sourceBills = bills.length ? bills : subscriptions;
+    const sourceBills: Bill[] = bills.length ? bills : (subscriptions as unknown as Bill[]);
     const affectedIds = new Set(sourceGroup.map(item => item.id));
     const billById = new Map(sourceBills.map(item => [item.id, item]));
-    const orderedBills = orderedGroup.map(item => ({ ...(billById.get(item.id) || item), ...item }));
+    const orderedBills = orderedGroup.map(item => ({ ...(billById.get(item.id) || item), ...item }) as unknown as Bill);
     const nextBills = sourceBills.map(bill => (
-      affectedIds.has(bill.id) ? orderedBills.shift() : bill
+      affectedIds.has(bill.id) ? orderedBills.shift()! : bill
     ));
     persistSubscriptionOrder(nextSubscriptions, nextBills, movedItemId(sourceGroup, orderedGroup));
   }
 
-  function moveControlsForGroup(group, activeState) {
+  function moveControlsForGroup(group: Subscription[], activeState: boolean): (item: Subscription, index: number) => MoveControls {
     return (item, index) => ({
       enabled: reorderEnabled,
       moving: movingBillId === item.id,
@@ -1341,7 +1545,7 @@ export default function SubscriptionsPage() {
     });
   }
 
-  function dragPropsForGroup(group, activeState) {
+  function dragPropsForGroup(group: Subscription[], activeState: boolean): (item: Subscription, index: number) => DragProps {
     return (item, index) => {
       if (!reorderEnabled) return { draggable: false };
       return {
@@ -1387,14 +1591,14 @@ export default function SubscriptionsPage() {
     return q ? highConfidenceRecs.filter(r => r.name?.toLowerCase().includes(q)) : highConfidenceRecs;
   }, [highConfidenceRecs, recSearch]);
 
-  function renderGroupHeader(sectionKey, groupKey, groupItems, monthlySum) {
+  function renderGroupHeader(sectionKey: string, groupKey: string, groupItems: Subscription[], monthlySum: number) {
     const isCollapsed = collapsedGroups.has(sectionKey);
     return (
       <button
         type="button"
         onClick={() => setCollapsedGroups(prev => {
           const next = new Set(prev);
-          next.has(sectionKey) ? next.delete(sectionKey) : next.add(sectionKey);
+          if (next.has(sectionKey)) next.delete(sectionKey); else next.add(sectionKey);
           return next;
         })}
         style={{ top: cardHeaderHeight }}
@@ -1416,7 +1620,7 @@ export default function SubscriptionsPage() {
   }
 
   // Custom sort: normal DOM rendering (drag-reorder needs DOM order)
-  function renderCustomRows(group, activeState) {
+  function renderCustomRows(group: Subscription[], activeState: boolean) {
     return group.map((item, index) => (
       <SubscriptionRow
         key={item.id}
@@ -1431,8 +1635,8 @@ export default function SubscriptionsPage() {
   }
 
   // Cadence sort: virtualizer renders from flatVirtualItems
-  function renderVirtualItem(vRow) {
-    const it = flatVirtualItems[vRow.index];
+  function renderVirtualItem(vRow: { index: number }) {
+    const it = flatVirtualItems?.[vRow.index];
     if (!it) return null;
     if (it.type === 'paused-divider') {
       return (
@@ -1769,8 +1973,8 @@ export default function SubscriptionsPage() {
       {modal && (
         <BillModal
           key={modal.bill?.id ? `subscription-edit-${modal.bill.id}` : 'subscription-new'}
-          bill={modal.bill}
-          initialBill={modal.initialBill}
+          bill={modal.bill as Bill | null}
+          initialBill={modal.initialBill as unknown as Partial<Bill> | undefined}
           categories={categories}
           onClose={() => setModal(null)}
           onSave={handleBillModalSave}
@@ -1803,8 +2007,8 @@ export default function SubscriptionsPage() {
       />
 
       <BillHistoricalImportDialog
-        billId={importDialog?.billId}
-        billName={importDialog?.billName}
+        billId={importDialog?.billId ?? ''}
+        billName={importDialog?.billName ?? ''}
         open={!!importDialog}
         onClose={() => setImportDialog(null)}
         onImported={() => { setImportDialog(null); refreshAll(); }}