fix(ux): batch UX audit fixes across spine pages

Comprehensive audit findings rolled up into one pass.

Bugs:

  - dialog.tsx — sm-breakpoint centering classes (sm:left-[50%] /
    sm:top-[50%]) were being silently stripped by tailwind-merge because
    the base inset-0 + sm:inset-auto pair counted as a conflict. Replaced
    with explicit per-side utilities (top-0 right-0 bottom-0 left-0 +
    sm:right-auto sm:bottom-auto). Every Dialog instance now centers
    correctly on desktop. (Affected 16 dialog consumers.)

  - interest-documents-tab.tsx — useQuery shared the queryKey
    ['interests', interestId] with the parent InterestDetail's query but
    returned a different shape ({ data: ... } envelope vs unwrapped).
    They clobbered each other's cache on tab mount, degenerating the
    parent header to "Unknown Client" / "Open" briefly. Unified the
    queryFn shape so the cache stays consistent.

  - interest-tabs.tsx — milestone steps now derive done-state from
    PIPELINE_STAGES.indexOf(currentStage) >= step.advanceStage_idx as
    well as from the date stamp. Stage truth > date truth. Seeded /
    imported interests that arrived past `open` without per-step dates
    now correctly show their milestone steps as checked.

  - interest-detail.tsx — wires useMobileChrome so the mobile topbar
    shows the client name instead of the interest UUID.

  - interest-documents-tab.tsx — empty state restructured to a centered
    "No documents yet — Generate EOI" CTA card instead of a small
    primary button floating in the corner.

  - timeline/route.ts — synthesizes a "Created at <stage>" event when
    no audit-log rows exist for the interest, so the Activity tab
    isn't empty for seeded interests.

  - lead-source-chart.tsx — pie radii switched from fixed 90px/50px
    to "70%"/"40%" so the pie scales with the container instead of
    being clipped at narrow widths; reserved 40px for the legend.

Visual / clarity:

  - interest-detail-header.tsx — Won/Lost rendered as branded text
    buttons on desktop ("Mark won", "Close as lost") and icon-only on
    mobile via `hidden sm:inline`. Edit/Archive stay icon-only. Reopen
    promoted to a labeled button when the interest is closed. Added
    "Last contact Xd ago" to the meta row.

  - detail-header-strip.tsx — py-4 → py-3 (tighter strip).

  - interest-tabs.tsx — milestone cards: the next pending milestone
    gets a brand-blue ring + "NEXT" pill so the user can see at a
    glance which lifecycle to act on. Its primary action gets the
    filled button variant.

  - interest-tabs.tsx — Deposit milestone: invoice flow promoted to
    primary CTA ("Create deposit invoice"), manual stage advance
    demoted to a small text link ("Mark received manually"). Reflects
    the actual recommended path now that recordPayment auto-advances
    on payment.

  - inline-editable-field.tsx — pencil affordance shown faintly
    (opacity-20) at rest so users discover that fields are editable
    without having to hover-test every label. Lifts to opacity-60 on
    hover.

  - constants.ts — STAGE_SHORT_LABELS map for cramped contexts;
    pipeline-chart.tsx + pipeline-funnel-chart.tsx use them on mobile
    via useIsMobile, so the rotated 9-stage axis isn't a wall of
    overlap on a 393px screen.

  - client-pipeline-summary.tsx — StageStepper rebuilt as a single
    segmented progress bar instead of 9 micro-dots + connectors that
    rendered inconsistently at tight widths. Each stage is an equal
    slice that lights up as the interest reaches it; tooltips on hover
    give the full stage name. Also dropped a pre-existing dead `br`
    variable.

  - dashboard empty states — Lead Source, Revenue Breakdown, Pipeline
    Funnel, and Recent Activity now have helpful descriptions explaining
    what populates them, instead of bare "No interests in range".

  - use-paginated-query.ts — reuses `&` when the endpoint already has
    `?`, so callers like the documents hub don't generate
    `…?tab=eoi_queue&signatureOnly=true?page=1&limit=25` (which the API
    rejected as 400). Caught while testing the now-removed EOI route
    but applies broadly.

tsc clean. vitest 832/832 pass. eslint 0 errors (down from 1
pre-existing) on every file touched.

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

src/components/interests/interest-tabs.tsx

@@ -15,7 +15,7 @@ import { RecommendationList } from '@/components/interests/recommendation-list';
 import { InterestTimeline } from '@/components/interests/interest-timeline';
 import { InterestDocumentsTab } from '@/components/interests/interest-documents-tab';
 import { InterestFilesTab } from '@/components/interests/interest-files-tab';
-import { LEAD_CATEGORIES } from '@/lib/constants';
+import { LEAD_CATEGORIES, PIPELINE_STAGES, type PipelineStage } from '@/lib/constants';
 import { apiFetch } from '@/lib/api/client';
 import { cn } from '@/lib/utils';
 
@@ -30,6 +30,7 @@ interface InterestTabsOptions {
   interestId: string;
   currentUserId?: string;
   interest: {
+    pipelineStage: string;
     leadCategory: string | null;
     source: string | null;
     eoiStatus: string | null;
@@ -120,10 +121,23 @@ interface MilestoneSectionProps {
     advanceStage?: string;
     /** Optional override for the action label. */
     actionLabel?: string;
+    /** Suppress the inline "Mark as…" button for this step. Use when the
+     *  parent supplies a richer CTA via `footer` (e.g. Deposit, where we
+     *  want the invoice flow to be the primary path). */
+    hideAutoButton?: boolean;
   }>;
   status: string | null;
   onAdvance: (stage: string) => void;
   isPending: boolean;
+  /** Current pipelineStage. Used to mark steps as done when the pipeline has
+   *  moved past their advanceStage even if the date stamp is missing — e.g.
+   *  a seed-data interest that started already at eoi_signed will show both
+   *  EOI sub-steps as done. Stage truth > date truth. */
+  currentStage: string;
+  /** When true, this milestone is the next one the user should act on:
+   *  card gets a brand-accent ring and the next-step CTA becomes a primary
+   *  button. Computed by the parent based on currentStage. */
+  isActive?: boolean;
   /** Extra nodes (e.g. "Create deposit invoice" link) rendered below the steps. */
   footer?: React.ReactNode;
 }
@@ -143,16 +157,40 @@ function MilestoneSection({
   status,
   onAdvance,
   isPending,
+  currentStage,
+  isActive,
   footer,
 }: MilestoneSectionProps) {
-  const firstUnsetIdx = steps.findIndex((s) => !s.date);
+  const currentStageIdx = PIPELINE_STAGES.indexOf(currentStage as PipelineStage);
+  // A step counts as done if either:
+  //   (a) its `advanceStage` is at or behind the current pipeline stage, OR
+  //   (b) it has an explicit date stamp (from a manual mark or webhook).
+  // (a) handles seeded/imported interests that arrived at a later stage
+  // without per-step dates.
+  const doneFlags = steps.map((step) => {
+    if (step.date) return true;
+    if (!step.advanceStage) return false;
+    const stepIdx = PIPELINE_STAGES.indexOf(step.advanceStage as PipelineStage);
+    return stepIdx !== -1 && currentStageIdx !== -1 && currentStageIdx >= stepIdx;
+  });
+  const firstUnsetIdx = doneFlags.findIndex((d) => !d);
 
   return (
-    <section className="rounded-xl border border-border bg-card p-4 shadow-sm">
+    <section
+      className={cn(
+        'rounded-xl border bg-card p-4 shadow-sm transition-colors',
+        isActive ? 'border-brand-300 bg-brand-50/40 ring-1 ring-brand-200' : 'border-border',
+      )}
+    >
       <header className="mb-3 flex items-center justify-between gap-2">
         <div className="flex items-center gap-2">
-          <Icon className="size-4 text-muted-foreground" />
+          <Icon className={cn('size-4', isActive ? 'text-brand-600' : 'text-muted-foreground')} />
           <h3 className="text-sm font-semibold tracking-tight text-foreground">{title}</h3>
+          {isActive ? (
+            <span className="rounded-full bg-brand-100 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-brand-700">
+              Next
+            </span>
+          ) : null}
         </div>
         {status ? (
           <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
@@ -163,7 +201,7 @@ function MilestoneSection({
 
       <ol className="space-y-2">
         {steps.map((step, i) => {
-          const done = !!step.date;
+          const done = doneFlags[i] ?? false;
           const isNext = !done && i === firstUnsetIdx;
           return (
             <li key={step.label} className="flex items-start gap-2 text-sm">
@@ -197,10 +235,10 @@ function MilestoneSection({
                     </span>
                   ) : null}
                 </div>
-                {isNext && step.advanceStage ? (
+                {isNext && step.advanceStage && !step.hideAutoButton ? (
                   <Button
                     type="button"
-                    variant="outline"
+                    variant={isActive ? 'default' : 'outline'}
                     size="sm"
                     disabled={isPending}
                     onClick={() => onAdvance(step.advanceStage!)}
@@ -236,6 +274,23 @@ function OverviewTab({
   const advance = (stage: string) =>
     stageMutation.mutate({ stage, reason: 'Marked from overview' });
 
+  // Which milestone is the next one to act on? "EOI Signed" → Deposit is next;
+  // "Deposit 10%" → Contract is next; "Contract Signed" / "Completed" → none.
+  const stageIdx = PIPELINE_STAGES.indexOf(interest.pipelineStage as PipelineStage);
+  const eoiSignedIdx = PIPELINE_STAGES.indexOf('eoi_signed');
+  const depositIdx = PIPELINE_STAGES.indexOf('deposit_10pct');
+  const contractSignedIdx = PIPELINE_STAGES.indexOf('contract_signed');
+  let activeMilestone: 'eoi' | 'deposit' | 'contract' | null = null;
+  if (stageIdx === -1 || stageIdx >= contractSignedIdx) {
+    activeMilestone = null;
+  } else if (stageIdx < eoiSignedIdx) {
+    activeMilestone = 'eoi';
+  } else if (stageIdx < depositIdx) {
+    activeMilestone = 'deposit';
+  } else {
+    activeMilestone = 'contract';
+  }
+
   return (
     <div className="space-y-6">
       {/* Sales-process milestones — the heart of the system. Each section is a
@@ -250,6 +305,8 @@ function OverviewTab({
           status={interest.eoiStatus}
           isPending={stageMutation.isPending}
           onAdvance={advance}
+          currentStage={interest.pipelineStage}
+          isActive={activeMilestone === 'eoi'}
           steps={[
             {
               label: 'EOI sent',
@@ -271,23 +328,36 @@ function OverviewTab({
           status={interest.depositStatus}
           isPending={stageMutation.isPending}
           onAdvance={advance}
+          currentStage={interest.pipelineStage}
+          isActive={activeMilestone === 'deposit'}
           steps={[
             {
               label: 'Deposit received',
               date: interest.dateDepositReceived,
               advanceStage: 'deposit_10pct',
-              actionLabel: 'Mark deposit received',
+              // The richer invoice-first CTA lives in `footer`. We still pass
+              // advanceStage so the milestone derives its done-state correctly.
+              hideAutoButton: true,
             },
           ]}
           footer={
             !interest.dateDepositReceived ? (
-              <Link
-                href={`/${portSlug}/invoices/new?interestId=${interestId}&kind=deposit`}
-                className="inline-flex items-center gap-1.5 text-foreground/80 hover:text-foreground"
-              >
-                <Plus className="size-3.5" />
-                Create deposit invoice
-              </Link>
+              <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5">
+                <Button asChild size="sm" className="h-7 px-2.5 text-xs">
+                  <Link href={`/${portSlug}/invoices/new?interestId=${interestId}&kind=deposit`}>
+                    <Plus className="size-3.5" />
+                    Create deposit invoice
+                  </Link>
+                </Button>
+                <button
+                  type="button"
+                  onClick={() => advance('deposit_10pct')}
+                  disabled={stageMutation.isPending}
+                  className="text-muted-foreground hover:text-foreground disabled:opacity-50"
+                >
+                  Mark received manually
+                </button>
+              </div>
             ) : null
           }
         />
@@ -297,6 +367,8 @@ function OverviewTab({
           status={interest.contractStatus}
           isPending={stageMutation.isPending}
           onAdvance={advance}
+          currentStage={interest.pipelineStage}
+          isActive={activeMilestone === 'contract'}
           steps={[
             {
               label: 'Contract sent',