feat(launch-readiness-batch): UAT drains, navigation refactor, launch infra, trackers

Bundles the rest of the in-flight work from this UAT round into one
checkpoint. Each sub-area is independent; see the headings below.

UAT polish (drained 11 findings from active-uat.md):
- Dialog primitive default bumped sm:max-w-xl/lg:max-w-3xl →
  sm:max-w-2xl/lg:max-w-4xl so multi-field forms + PDF previews
  aren't cramped at 1440-1920px.
- Notes tab badge aggregation: new countFor{Client,Yacht,Company}
  Aggregated helpers in notes.service mirror the listFor*Aggregated
  symmetric-reach joins. yacht-tabs + company-tabs render the
  badge; client-tabs already had badge support.
- Supplemental-info form polish bundle: BrandedAuthShell gains a
  `width: 'sm' | 'md'` prop (md uses min-h-dvh scroll instead of
  fixed inset-0 pin so long forms scroll naturally). Form picks up
  port branding (logoUrl + backgroundUrl + appName) via
  loadByToken. Address fields completed (street + city + region +
  postal + country). Port name eyebrow + success-state copy added.
- new-document-menu Upload-file landing toast: per-file completion
  emits toast.success with action link to the destination entity
  or folder.
- interest-tabs OverviewTab "from client" pill on Email + Phone
  rows via new EditableRow `inheritedFrom` prop.
- create-document-wizard subject picker → segmented button strip
  (5 types visible at once).

Launch infra:
- UTM column wiring (Init 1b step 4): migration
  0089_website_submissions_utm.sql adds utm_source/medium/campaign/
  term/content + composite index (port_id, utm_source, received_at)
  for per-campaign rollups. website-inquiries intake accepts the
  five fields. Residential intake intentionally untouched per audit
  scope.
- Invoicing module gate (Init 1c spike): new
  invoices-module.service + invoices layout guard + registry entry
  invoices_module_enabled (default false). Audit conclusion in
  launch-readiness.md: payments table is canonical money path;
  /invoices flow is parallel infrastructure now hidden by default.

Smart-back navigation refactor:
- Replaced breadcrumb component with history-aware Back button.
  New route-labels.ts + use-smart-back hook +
  navigation-history-tracker so back falls through to the parent
  route when there's no prior page in history.
- Sidebar / topbar / mobile-topbar adopt the new pattern; old
  breadcrumb-store kept for back-compat consumers but the
  breadcrumbs component is gone.
- 6 detail pages (admin/errors per-id + codes, invoices/
  upload-receipts, reports kind, tenancies detail, analytics
  metric, client detail) migrated.

Trackers + docs:
- docs/launch-readiness.md — master pre-launch tracker. Includes
  the reports gap audit (cross-cutting filter set, Marketing +
  Financial blockers, custom builder remaining entities, scheduled
  CSV/XLSX, template scope picker).
- docs/superpowers/audits/active-uat.md — 15 findings flipped
  OPEN → SHIPPED locally with fix-applied notes; 4 OPEN remaining
  (each blocked on user input or cross-repo).
- CLAUDE.md — minor session notes carried forward.

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

src/components/layout/topbar.tsx

@@ -1,13 +1,11 @@
 'use client';
 
-import { ChevronLeft, Plus } from 'lucide-react';
-import { useRouter, usePathname } from 'next/navigation';
+import { Plus } from 'lucide-react';
+import { useRouter } from 'next/navigation';
 import type { Route } from 'next';
 import type { ReactNode } from 'react';
 
 import { useUIStore } from '@/stores/ui-store';
-import { useMobileChrome } from '@/components/layout/mobile/mobile-layout-provider';
-import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Separator } from '@/components/ui/separator';
@@ -19,7 +17,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { Breadcrumbs } from '@/components/layout/breadcrumbs';
+import { BackButton } from '@/components/layout/back-button';
 import { CommandSearch } from '@/components/search/command-search';
 import { Inbox } from '@/components/layout/inbox';
 import { UserMenu } from '@/components/layout/user-menu';
@@ -36,58 +34,32 @@ interface TopbarProps {
 
 export function Topbar({ ports, user, leadingSlot }: TopbarProps) {
   const router = useRouter();
-  const pathname = usePathname();
   const currentPortSlug = useUIStore((s) => s.currentPortSlug);
   const base = currentPortSlug ? `/${currentPortSlug}` : '';
-  // Reuse the existing per-page chrome state (originally built for the
-  // mobile topbar) so any detail page that already declares
-  // `showBackButton: true` automatically gets the back affordance on
-  // desktop too. Saves duplicating the wiring across N detail headers.
-  const { showBackButton: mobileShowBack } = useMobileChrome();
-  // Auto-show on entity-detail pages: `/[portSlug]/[section]/[id]` and
-  // deeper. Top-level lists like `/[portSlug]/clients` stay clean.
-  // The mobile-chrome flag still wins when a page explicitly opts in.
-  // Pages that already render their own "back to X" link inline
-  // (residential interest detail, expense scan flow, etc.) opt OUT
-  // by setting the chrome flag to false on mount - the flag override
-  // path here lets them suppress this auto-show.
-  const segments = pathname.split('/').filter(Boolean);
-  const isDeepPage = segments.length > 2;
-  const showBackButton = mobileShowBack || isDeepPage;
 
   return (
-    // Three-column grid: breadcrumbs left, search center, actions right.
-    // The brand logo lives in the sidebar header (per design feedback) so the
-    // topbar center is dedicated to the global search bar.
+    // Three-column grid: smart back button left, search center, actions right.
+    // The brand logo lives in the sidebar header so the topbar center is
+    // dedicated to the global search bar.
     //
-    // Grid is `auto auto 1fr` instead of three fr-tracks: the left + right
-    // columns size to their actual content (logo trigger + breadcrumbs on
-    // the left; New / Inbox / Avatar on the right), and the search column
-    // soaks up the rest. The earlier `minmax(280px,800px)` center column
-    // auto-grew to the search bar's intrinsic `max-w-2xl` (672px), which
-    // squeezed the right column below the width of "+ New + Inbox +
-    // Avatar" and pushed the New button off-screen at every tablet +
-    // narrow-desktop width. With the center as a single fr-track, the
-    // right column always gets the space it needs.
+    // Grid is `auto auto 1fr` so the left + right columns size to their
+    // actual content (back-button label on the left; New / Inbox / Avatar
+    // on the right) and the search column soaks up the rest.
+    //
+    // Wayfinding model: the legacy breadcrumb chain was removed in favor
+    // of a single contextual back button ("Back to Clients", "Back to
+    // Sarah Doe"). Detail pages register their parent via
+    // `useBreadcrumbHint` so the label is entity-aware; everything else
+    // is URL-derived. See src/hooks/use-smart-back.ts.
     <header className="relative grid h-14 grid-cols-[auto_1fr_auto] items-center border-b border-border bg-background gap-3 px-4 shrink-0">
-      {/* LEFT: optional sidebar trigger (tablet) + optional back button + breadcrumbs */}
-      <div className="min-w-0 flex items-center gap-1.5">
+      {/* LEFT: optional sidebar trigger (tablet) + smart back button.
+          Hard-capped width so the column never extends into the
+          absolutely-positioned search bar's footprint. The cap is
+          conservative on smaller widths to leave the search bar
+          breathing room, more generous at xl. */}
+      <div className="min-w-0 flex items-center gap-1.5 max-w-[180px] lg:max-w-[220px] xl:max-w-[260px]">
         {leadingSlot}
-        {showBackButton && (
-          <button
-            type="button"
-            onClick={() => router.back()}
-            aria-label="Go back"
-            title="Go back"
-            className={cn(
-              'inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md',
-              'text-muted-foreground hover:text-foreground hover:bg-accent transition-colors',
-            )}
-          >
-            <ChevronLeft className="h-4 w-4" aria-hidden />
-          </button>
-        )}
-        <Breadcrumbs />
+        <BackButton variant="desktop" />
       </div>
 
       {/* CENTER (spacer): the search bar is absolutely positioned below
@@ -105,14 +77,17 @@ export function Topbar({ ports, user, leadingSlot }: TopbarProps) {
           viewport, so plain `left: 50%` is already correct.
 
           Caps scale by viewport tier so the bar doesn't crowd the side
-          columns:
+          columns. The previous max-w-2xl (672px) at xl ate so much of
+          the topbar that the back-button column on the left got
+          visually clipped by the search bar; tightened to max-w-xl so
+          a "Back to Administration"-class label can render in full:
             base: max-w-md  (28rem)
-            lg:   max-w-xl  (36rem)
-            xl:   max-w-2xl (42rem)
+            lg:   max-w-lg  (32rem)
+            xl:   max-w-xl  (36rem)
           The wrapper is pointer-events-none so it doesn't capture
           clicks meant for the left/right columns underneath; only the
           input itself receives pointer events. */}
-      <div className="pointer-events-none absolute inset-y-0 left-1/2 lg:left-[calc(50%-var(--width-sidebar)/2)] flex w-full max-w-md -translate-x-1/2 items-center px-4 lg:max-w-xl xl:max-w-2xl">
+      <div className="pointer-events-none absolute inset-y-0 left-1/2 lg:left-[calc(50%-var(--width-sidebar)/2)] flex w-full max-w-md -translate-x-1/2 items-center px-4 lg:max-w-lg xl:max-w-xl">
         <div className="pointer-events-auto w-full min-w-0">
           <CommandSearch />
         </div>