TenantMate — Stitch v2.1 vs Built Screen Audit

Run: 2026-05-16. 19 screens audited (18 Stitch sources + 1 built-only). Comparison axes: purpose match, structure, styling, copy. Each screen marked match / partial / divergent / n/a. Stitch project: 11626845676710860760 ("TenantMate All Screens v2.1"). Built state: master fad55ae with docs follow-up 81b16e1; v6 milestone recorded at docs/05-design/screen-architecture.md.

TL;DR

All 18 v5 screens shipped end-to-end across Tranches 0–6 (master #556). The audit finds no missing screens and no purpose drift — every built page solves the user need its Stitch counterpart frames. Structural divergence is concentrated in three places: Property Report (pre-Stitch IonList — not yet re-ported), Occupy (Stitch's 6-tile nav pad replaced by 7 data-bearing summary cards because the sibling per-pack screens don't exist yet), and Documents (4 fixed compliance slots replaced by dynamic issue_type grouping because the EvidenceItem model is flat). All other divergences trace to schema gaps already captured in #556's carry-forward list.

4
match
11
partial
3
divergent
1
n/a (no Stitch source)
19
total

Summary

match built reflects Stitch's intent with mechanical adaptation  ·  partial covers primary use; omits secondary affordances or has materially-different layout  ·  divergent same problem, structurally different layout  ·  n/a no Stitch source
#ScreenSeverityBuilt pathOne-liner
0Splash Screenmatchsrc/components/Splash.tsxBuilt as a transient render-state; intentionally drops Stitch's marketing CTA + version footer.
1Authenticationpartialsrc/pages/SignInPage.tsx + RegisterPage.tsxTabbed single screen → two-page split. No password-strength meter (server-side breach-list rejection instead).
2Dashboard Updatedmatchsrc/pages/DashboardPage.tsxHero + bento + 5 real summary cards. Deposit tile swapped for Repairs (no Deposit endpoint).
3aSearch Insights Updatedmatchsrc/pages/SearchInsightsPage.tsxStitch's 6-tile preview kept, plus the legacy HomePage substance (recent reports, aggregate-action vote).
3bProperty Reportdivergentsrc/pages/ReportPage.tsxPre-Stitch raw IonList. No narrative summary, no verdict badges, no Broadband/Deposit cards, no paywall. Re-port deferred.
4Tenancy hubn/asrc/pages/TenancyHubPage.tsxNo Stitch source. Built as a row-list directory mirroring Profile's hub pattern (per #558).
4aStart Tenancypartialsrc/pages/StartTenancyPage.tsxManual form replaces Stitch's upload-the-agreement / AI-extracts flow. Upload affordance kept as “Coming soon”.
4bMove In Review Updatedpartialsrc/pages/MoveInPage.tsxStitch's Keys + Issues-Log tiles swapped for Tenancy Agreement + Compliance Documents (real pack-backed surfaces).
5Occupancydivergentsrc/pages/OccupyPage.tsxStitch's 6-tile nav pad replaced by 7 data-bearing summary cards — sibling per-pack screens don't exist yet.
6Move Out Review Updatedpartialsrc/pages/MoveOutPage.tsxKeys/Meters/Issues/Comparison tiles live in exit_captures JSON; flagged via HelpInfoCard rather than rendered inert.
7Deposit Management Updatedpartialsrc/pages/DepositManagementPage.tsxLegal/Comms/Timeline/Evidence tiles dropped (live on other screens). Generate-PDF preserved as disabled.
8Referencespartialsrc/pages/ReferencesPage.tsxStructured Reference Profile stats panel omitted — no backend aggregate.
9Documentsdivergentsrc/pages/DocumentsPage.tsx4 fixed compliance slots replaced by dynamic issue_type grouping. Filter pills omitted — no tenancy-stage attribute on EvidenceItem.
10Tenancy Timeline Updatedmatchsrc/pages/TimelinePage.tsxVertical-rail timeline matches. Stitch's “Rent Due in 3 days” upcoming card not surfaced (feed is historical).
11Communications & Maintenancepartialsrc/pages/MessagesPage.tsxList→detail hub vs Stitch's always-visible single thread (Rails contract supports many threads/tenancy).
12Key Contactspartialsrc/pages/KeyContactsPage.tsxNo phone/email columns in TenancyContact; Stitch's Call/Email/Portal actions absent. Mgmt-co + freeholder collapsed.
13Guidance Librarypartialsrc/pages/AdvicePage.tsx + ArticlePage.tsxLetter Templates + External Support sections omitted — comm_generation + reference_data packs not built.
14App Feedbackpartialsrc/pages/FeedbackPage.tsxScreenshot upload omitted — needs ActiveStorage wiring + multipart client path.
15Profilepartialsrc/pages/ProfilePage.tsxNo avatar / member-since / Notifications / Biometric toggles — backend doesn't yet expose these. Tenancy switcher stays in toolbar popover.

Findings by screen

0 Splash Screen

match
Stitch 07f66b97fa1641028bcc02f47ca0b073  ·  Built tenantmate-app/src/components/Splash.tsx
Purpose match: yes — branded boot/loading state. Stitch frames it as a marketing-style hero with a “Get started” CTA; built renders the same hero exactly as long as useCurrentPrincipal() is in flight, with a spinner replacing the CTA.

Structure

Both: centered brand glyph + “TenantMate” wordmark + tagline. Stitch adds a primary “Get started” button and a “VERSION 2.4.0” footer; built drops both (it's a render-state, not a destination) and substitutes an IonSpinner crescent. Built adds decorative blurred glow blobs; Stitch is minimal.

Styling

Built leans more visual/atmospheric: full-bleed bg-primary canvas, text-on-primary, two blurred glow blobs, 80px home-outline icon in a glowing 128px disc with shadow ring. Stitch is clean centered hero with presumed teal accents.

Copy

Tagline verbatim: “Transparent insights for the modern tenant”. Wordmark “TenantMate” identical. Stitch's “Get started” CTA and “VERSION 2.4.0” footer intentionally omitted; built uses aria-label “Loading TenantMate” for AT instead.

Key divergences

  • No “Get started” CTA — deliberate (transient render-state, not a marketing destination)
  • No version footer
  • Built adds atmospheric blur/glow decoration beyond Stitch's minimal layout
Carry-forward: Comment in Splash.tsx documents the CTA omission rationale; no open issue.

1 Authentication

partial
Stitch 1285890783c3405c805e1570fd2c58ee  ·  Built tenantmate-app/src/pages/SignInPage.tsx + RegisterPage.tsx
Purpose match: yes — sign-in + create-account for email/password auth. Stitch presents a single screen with a tab toggle plus a marketing-side “Account preview”; built splits into two routes that the app-level state machine toggles via onWantRegister / onWantSignIn callbacks.

Structure

Stitch: one screen, tab-toggle between modes, email + password, “Forgot password?”, terms checkbox, password-strength affordance, “Contact Support” footer. Built: two separate AuthShell+AuthCard pages. SignInPage has Forgot link, resend-verify-email, error switching across rate-limit / lockout / account-state. RegisterPage has terms checkbox + post-submit “Check your email” success state.

Styling

Stitch Material card, deep-teal primary, Manrope/Inter, uppercase labels. Built matches well: bg-primary, Material symbols (mail/lock/visibility/arrow_forward), font-label-caps via tokens, surface-container-low inputs, primary CTA with shadow and scale-on-press. Density + hierarchy close.

Copy

Stitch labels “EMAIL ADDRESS”, “PASSWORD”, “Forgot password?”, “I agree to the Terms of Service and Privacy Policy.” — preserved verbatim. Built adds “Welcome back” / “Create your account”, inline hint “Minimum 8 characters. We block passwords from known-breach lists.”, resend-link copy.

Key divergences

  • Tabbed single-screen → two-page split (state-machine toggle)
  • No password-strength meter — strength enforced server-side via breach-list rejection (#480)
  • No “Contact Support” footer link
  • Adds verify-resend + “Check your email” success state not in Stitch (Rodauth flow)
Carry-forward: Resend copy intentionally neutral pending #528 (verify-account-resend enumeration leak).

2 Dashboard Updated

match
Stitch 04f38c5267e646c6b8d1e3f22ff2c8ad  ·  Built tenantmate-app/src/pages/DashboardPage.tsx
Purpose match: yes — at-a-glance overview after sign-in. Stitch lays it out as a hero CTA + bento grid; built keeps the hero + bento and adds real per-domain summary cards so the screen answers “what needs attention?” without N round-trips.

Structure

Stitch: “Start new tenancy” hero + “Overview / LIVE TRACKING” header + bento grid of 3 tiles (Tenancy / Deposit / Advice) + 4-item bottom nav. Built: same hero + same header + bento expanded to 4 tiles (Search / Tenancy / Repairs / Advice — Deposit→Repairs since no Deposit endpoint), then 5 summary cards (Tenancy / Repairs / Comms / Notices / Recent Activity). Real badge counts from /api/v1/dashboard.

Styling

Stitch Material bento with rounded-2xl tiles, primary teal accents. Built mirrors: aspect-square bento tiles with primary-container/20 bg, label-caps, error-red badge bubble for counts, primary CTA hero with shadow-lg. Card pattern (rounded-xl + outline-variant + shadow-sm) consistent throughout.

Copy

Stitch verbatim: “Start new tenancy”, “Overview”, “LIVE TRACKING”, tile labels “SEARCH/TENANCY/DEPOSIT/ADVICE”. Built keeps same. Card titles add “Active tenancy”, “Repairs”, “Messages”, “Upcoming notices”, “Recent activity”. Empty state “Nothing logged yet — rent payments, inspections, and harassment entries will surface here…” is built-only.

Key divergences

  • Bento swaps “Deposit” tile for “Repairs” (no Deposit endpoint yet)
  • Built adds 5 data-bearing summary cards below the bento not present in Stitch
  • Tile count: Stitch 3 → built 4 (Search added so the bento covers /search per Tranche 6 route flip)

3a Search Insights Updated

match
Stitch d9be8aef1e654df1a53afe9bd30e1346  ·  Built tenantmate-app/src/pages/SearchInsightsPage.tsx
Purpose match: yes — entry point for running a property report. Stitch is mostly an aspirational marketing surface (search field + 6-tile signal preview); built keeps that surface and additionally carries the substance from the legacy HomePage (tenancy banner, aggregate-action voting, real create-report form, recent reports).

Structure

Stitch: header + Search input + 6-tile signals bento (EPC / Broadband / Council Tax / Crime / Schools / Flood Risk) + bottom nav. Built: account/tenancy banner → “Search a property” → SignalsBento (same 6 tiles, with Live/Soon badges) → PendingAggregateActions → form (postcode + optional line-1) → “Recent reports” list with cache fallback. Order + tile set match Stitch; built adds the actual report-creation interaction.

Styling

Stitch card grid, teal icons in circular wells. Built mirrors: 2-col grid, 40px primary-container/30 icon discs, label-caps tile titles, body-sm captions, “Soon” chip on Broadband + Schools. Recent-reports list uses surface-container-lowest divided list with chevron-forward.

Copy

Stitch “Enter a postcode or street name to reveal property data.” → built “Enter a postcode (and optional flat / house number) to reveal property data from official sources.”. Tile labels match. Built adds Live/Soon badges, captions like “Energy rating + cost band” and the honest “Soon” on Broadband (Ofcom #264) and Schools. Form CTA “Generate report”.

Key divergences

  • Built adds Soon badges on Broadband + Schools tiles (per feedback_dont_overstate_progress + Ofcom #264)
  • Built keeps the aggregate-action voting and recent-reports list from legacy HomePage (Stitch only previews the marketing surface)
  • Search field uses postcode + optional line-1 (matches actual address-resolution stack), not Stitch's freeform “postcode or street name”

3b Property Report

divergent
Stitch 19ee49bf48b044b1928d33439f262ea2  ·  Built tenantmate-app/src/pages/ReportPage.tsx
Purpose match: yes — surfaces per-source property data for a saved report. Stitch is a marketing-grade 6-card grid with verdict badges and a paywall; built is a stacked IonList per source with raw data + graceful-degradation messaging. Same user need, structurally different layout.

Structure

Stitch: hero with address + narrative summary (“A well-maintained urban flat with excellent connectivity…”) + 6 metric cards (EPC C, Flood Risk Medium, Crime Mixed, Broadband 900 Mbps, Council Tax Band B, Deposit £1,440) with verdict badges (“GOOD/WATCH/NEUTRAL”), plus “Want the full picture?” paywall CTA. Built: pending/failed/cached banners → address heading + timestamp → flat sections (Resolved Address / Crime / EPC / Flood / Council Tax / Source warnings) as IonList items with raw values. No Broadband, no Deposit, no narrative, no verdict badges, no paywall.

Styling

Stitch M3-style cards with bold accent badges (chips, leaf icon for EPC, large numeric values). Built plain IonList sections with text-xl heading and Tailwind utility colors (bg-red-50/bg-amber-50 for banners — pre-design-token). Only FloodSeverityBadge is a colored chip. Pre-Stitch layout — density much lower hierarchy than Stitch.

Copy

Stitch verbatim: “EPC RATING GOOD”, “FLOOD RISK WATCH”, paywall “Want the full picture?” / “Unlock deep historical data, noise logs, and previous tenant feedback.” / “Pay to download full report”. Built uses neutral section titles “Energy performance”, “Crime · {period}”, “Flood risk”, “Council tax”. Built copy is functional/empirical (“No EPC certificate found for this address.”); Stitch copy is narrative + opinionated.

Key divergences

  • No narrative summary / verdict badges (GOOD/WATCH/NEUTRAL) — built shows raw values only
  • No Broadband card (Ofcom #264) and no Deposit card (no deposit endpoint yet)
  • No paywall CTA — monetisation not wired yet
  • Still uses pre-Stitch raw Tailwind utility colors (bg-red-50, bg-amber-50, text-gray-500) — not aligned with v2.1 design tokens
Carry-forward: Per #556: pre-Stitch layout; re-port only if visual consistency outweighs churn.

4 Tenancy hub

n/a
No Stitch source  ·  Built tenantmate-app/src/pages/TenancyHubPage.tsx
Purpose match: yes — landing page for the tenancy lifecycle. No Stitch frame ships under this name; per #558 the closest reference was “Tenancy Timeline Updated”, used purely for visual tokens not layout.

Structure

Tenancy summary card at top (address / postcode / role / status / type / start / end / rent) for the active membership, with a “Tenancy withdrawn” banner when applicable. Below: “Tenancy Lifecycle” row-list of 8 entries — Start Tenancy, Key Contacts, Documents, Move In, Occupy, Move Out, Deposit Management, References — each with icon + label + description + chevron-forward when routed, “Soon” chip when not. All 8 rows live as of #576.

Styling

Uses bg-white rounded-xl cards, outline-variant borders, primary teal icons, font-label-caps uppercase section labels — fully on the v2.1 design tokens. Hover/disabled states styled. Withdrawn banner uses error-container token. Consistent with the rest of the design system.

Copy

Section headers “Tenancy Lifecycle”. Empty state: “No active tenancy” with “Once you start a tenancy, the address, key dates, and lifecycle steps will live here. Start by running a property report and promoting it into a tenancy.”. Withdrawn copy: “Tenancy withdrawn” / “You no longer have an active role on this tenancy. Records remain visible for audit.”.

Key divergences

  • No Stitch source — design call was to mirror Profile's row-list hub pattern (#558)
  • TODO in source: co-tenant surfacing deferred until household-members shape lands on Tenancy serializer
Carry-forward: Per #558: intentionally no Stitch source; revisit if a tenancy-hub Stitch screen lands.

4a Start Tenancy

partial
Stitch 8e02dd6f705949ed9b7ebb402ec93b8d  ·  Built tenantmate-app/src/pages/StartTenancyPage.tsx
Purpose match: yes — capture the tenancy on TenantMate. But the means differ structurally: Stitch is an upload-the-agreement / AI-extracts flow; built is a manual form against POST /property_reports/:id/tenancy because no upload pipeline or extraction service exists.

Structure

Stitch top-to-bottom: hero “GETTING STARTED / Upload your tenancy agreement.” + upload affordance + “ENCRYPTED UPLOAD” reassurance + 3-tile feature trio (Smart Extract / Risk Analysis / Secure Vault). Built: hero “GETTING STARTED / Record your tenancy.” → manual form (Property report picker, Tenancy type, Start/End dates, Monthly rent, Deposit scheme reference) → reassurance block → upload affordance kept as “Coming soon” teaser → feature trio reframed as “On the roadmap”.

Styling

Built matches Stitch's visual language well — bg-secondary-container/20 reassurance block with border-l-4 border-secondary, surface-container-lowest cards, primary CTA with arrow-forward, font-h1/h2 from design tokens. Inputs match Auth pattern. Aspirational sections visually de-emphasised, distinct from active form area.

Copy

Stitch verbatim: “GETTING STARTED”, “Upload your tenancy agreement.”, “Your documents are processed securely and never shared with third parties without your consent.”, “Smart Extract / Risk Analysis / Secure Vault”. Built rewrites hero to “Record your tenancy.” Adds “Coming soon” badge on upload, “On the roadmap” section header. CTA “Start tenancy”.

Key divergences

  • Load-bearing interaction is a manual form, not an upload+AI-extract pipeline (no Active Storage / extraction service wired)
  • Upload affordance preserved visually but flagged “Coming soon”; feature trio reframed as “On the roadmap”
  • Built adds a property-report picker as the first field (Tenancy is linked to an existing Property; PWA has no Property-creation surface)
Carry-forward: #560 callouts in #556 umbrella: upload pipeline + extraction service deferred; current form path is the only one that ships today.

4b Move In Review Updated

partial
Stitch 61ca24b1d3e949658a5e177a3c9afa9f  ·  Built tenantmate-app/src/pages/MoveInPage.tsx
Purpose match: yes — both capture the move-in walkthrough state across inventory, meters, and evidence. Built adds an explicit walkthrough lifecycle (draft/in_progress/completed/sealed) that Stitch implies but doesn't surface.

Structure

Stitch is a 4-tile RAG grid (Inventory / Keys / Meters / Issues Log) with per-tile CTAs. Built keeps a 4-tile grid but swaps Keys+Issues for Tenancy Agreement + Compliance documents (the packs that actually exist), then adds Start/Seal walkthrough sections, an inline inventory list+form, meter readings list+form, agreement detail, and a 6-row compliance table — far more granular than the Stitch tiles.

Styling

Stitch uses Material chips with bold status pills and right-aligned chevron CTAs per tile. Built uses Ionic shell with v2.1 teal tokens; tiles get coloured left-borders (border-l-primary/tertiary/error) plus icon-bg pills, and the page expands into form-driven sections beneath the grid rather than chevron-deeplinks.

Copy

Stitch microcopy is concrete demo strings (“12 of 15 tasks completed”, “DISPUTE CHARGES”). Built copy is intent-driven: “Record the property as you receive it.”, “Start your move-in walkthrough”, “Seal the walkthrough”, “Inventory is signed and locked for audit.”

Key divergences

  • Stitch Keys + Issues Log tiles replaced by Tenancy Agreement + Compliance documents tiles
  • Built adds explicit walkthrough start/seal lifecycle absent from Stitch
  • Built inlines inventory and meter add-forms rather than deep-linking per-tile CTAs
Carry-forward: Tracked in #568 — Stitch's Keys + Issues-Log tiles have no backing pack; substitution is the agreed direction.

5 Occupancy

divergent
Stitch f8d89bd1aa5441958739552393c7535b  ·  Built tenantmate-app/src/pages/OccupyPage.tsx
Purpose match: yes — both serve as the during-tenancy hub. Built reframes the screen as a content-rich daily-life dashboard because it's the only landing for seven sibling packs (rent / repairs / inspections / notices / harassment / neighbourhood / bills) with no per-pack screens yet.

Structure

Stitch: tenancy summary header → Rent Tracking card (next-due + annual progress) → 6-tile lifecycle shortcut pad (Legal / Move In / Comms & Maint / Move Out / Timeline / Requests). Built: PageIntro + tenancy summary → RentTrackingCard (next-due, outstanding banner, 3 most-recent payments) → Repairs + Inspections row → Notices & legal → Concerns + Bills row → “Deeper screens on the way” RoadmapHint. Stitch's 6-tile pad is dropped entirely.

Styling

Stitch's tile pad is a clean grid of equal icon-tiles. Built reuses the v2.1 teal Ionic shell with surface-container-lowest cards, primary left-border accents on the summary, and count badges on each card header — denser, more information-per-tile than Stitch's nav-style pad.

Copy

Stitch labels are navigation nouns (“Legal”, “Move In”, “Move Out”, “Timeline”, “Comms & Maint”, “Requests”). Built uses descriptive section names: “Daily life”, “During your tenancy”, “Rent tracking”, “Open repairs”, “Inspections”, “Notices & legal”, “Concerns log”, “Bills”.

Key divergences

  • Stitch's 6-tile lifecycle nav pad replaced by 7 data-rich sub-summary cards plus a roadmap note
  • Built surfaces actual aggregates (outstanding pennies, open-repair count, merged harassment+neighbourhood feed) where Stitch shows nav labels only
  • No deep-link affordances — built honestly flags downstream screens as upcoming via RoadmapHint
Carry-forward: Per feedback_dont_overstate_progress the page deliberately doesn't render dead nav links; the 6 tiles will return when each pack gets its own screen.

6 Move Out Review Updated

partial
Stitch 6204830209287829414  ·  Built tenantmate-app/src/pages/MoveOutPage.tsx
Purpose match: yes — both wrap up the end-of-tenancy paper trail. Built diverges on tile inventory because Stitch's Keys/Meters/Issues/Comparison live inside the walkthrough's exit_captures JSON rather than as separate entities.

Structure

Stitch: 6 RAG tiles (Checklist / Check Out Report / Keys / Meters / Issues Log / Comparison) + “Ready to finalize?” + “Submit Review” CTA. Built: 4 RAG tiles (Checklist / Check-out report / Forwarding address / Re-letting watch) + FinalizeBanner (“Ready to finalise?” / “Submit move-out review”) + HelpInfoCard explaining the missing Stitch tiles.

Styling

Stitch shows simple status pills (“Action Required”, “Verified”, “Pending”, “3 Issues”, “Watch”) with chevron CTAs. Built uses the same border-l accent + icon-bg + status-badge pattern as Move In, plus per-tile primary buttons (“Start walkthrough”, “Log report received”, “Start 60-day watch”, “Mark given to landlord”) — heavier action density per tile.

Copy

Stitch microcopy concrete demo state (“12 of 15 tasks completed”, “DISPUTE CHARGES”, “OPEN VIEWER”). Built intent-driven: “Submit your check-out walkthrough for landlord confirmation”, “Start a window where we'll log any listing-data observations”, “Where should post arrive after you move out?”. HelpInfoCard explicitly says: “Keys, meters and disputes ship next”.

Key divergences

  • Stitch Keys / Meters / Issues / Comparison tiles dropped; gap acknowledged in inline HelpInfoCard rather than rendered inert
  • Built adds Forwarding address + Re-letting watch tiles that Stitch doesn't show
  • “Submit Review” → “Submit move-out review”; Stitch's per-tile CTAs become per-tile primary buttons rather than chevron deep-links
Carry-forward: Per #565 callout — Keys/Meters/Issues/Comparison map to MoveOutWalkthrough#exit_captures JSON, intentionally surfaced via HelpInfoCard until the capture flow lands.

7 Deposit Management Updated

partial
Stitch 7117159aab1840adbaf20b5dfa916f20  ·  Built tenantmate-app/src/pages/DepositManagementPage.tsx
Purpose match: yes — both wrap the deposit lifecycle and frame the dispute. Built drops the Legal/Comms/Timeline/Evidence tiles because they live on other screens, then doubles down on the data the deposit_dispute pack actually owns.

Structure

Stitch: “Deposit Protection Summary” + amount tile (“£425.00”, warning) + 5 info tiles (Proposed Deductions / Legal / Communications / Timeline / Evidence Pack) + “Generate Dispute PDF” CTA. Built: header + DepositSummaryCard (amount + scheme + reference + protected_on + PI served + claimed-against + remaining) + Proposed deductions list+form + Dispute case panel + Dispute costs list+form + disabled “Generate dispute PDF (Soon)”. Adds empty-state NoDeposit flow with “Record deposit” modal.

Styling

Stitch shows uniform info tiles with badge counts (“05 DOCS”, “142 MSG”, “28 FILES”). Built uses v2.1 teal tokens — DepositSummaryCard is a 2-column dl with wallet icon and protected-status pill; deduction rows are border-l-tertiary cards with challengeability badges; dispute card has hammer iconography and a state-advance button. Stitch CTA preserved as a disabled “Soon” button rather than removed.

Copy

Stitch microcopy: “Reviewing 3 separate claim items”, “Verified by TDS & MyDeposits”, “Chronological audit trail”. Built: “Record the protection certificate, track the landlord's proposed deductions, and build your dispute file in one place.” Deduction challengeability labels — “Hard to challenge” / “Worth challenging” / “Very challengeable” — replace Stitch's generic “warning” pills.

Key divergences

  • Stitch Legal / Communications / Timeline / Evidence Pack tiles dropped (live on other screens)
  • “Generate Dispute PDF” preserved as disabled “Soon” button — no export endpoint yet
  • Built adds substantial dispute-case + dispute-costs sub-flows (state machine, recoverable-cost ledger) that Stitch doesn't model
Carry-forward: Per #567 callout — dropped tiles are intentional; disabled PDF preserves Stitch silhouette without implying live export.

8 References

partial
Stitch 970dcee5f9fd483db131174fff408df4  ·  Built tenantmate-app/src/pages/ReferencesPage.tsx
Purpose match: yes — both gather reference letters from prior landlords/agents and frame them as a shareable tenant identity asset.

Structure

Stitch: “Structured Reference Profile” stats panel (Payment History 100% EXCELLENT / Property Care TOP TIER / Deposit Outcome Full SETTLED) + “Share Reference Link” + Outbound Requests list (with referee, Request ID, Consent state, Response state) + “Build Your Tenant Identity” card + “How it works”. Built: header + Outbound requests grid + Closed grid + “Request new reference” CTA + “Build your tenant identity” info card. Stats panel omitted.

Styling

Stitch leans on stat-tile typography (big percentage values, contrasted descriptors). Built uses standard surface-container-lowest card with avatar circle (mail/business/person icon heuristic), border-l accent by status, and uniform reference cards in a grid. Status pills become “Awaiting” / “Received” / “Declined” / “Draft” / “Archived”.

Copy

Stitch quotes “100% EXCELLENT”, “Clean TOP TIER”, “Full SETTLED”, “24/24 on-time payments”, “Share Reference Link”, “Invite Landlord”. Built reframes to: “Build your tenant identity”, “Each successful tenancy adds to the references you can share with your next prospective landlord”, “Request first reference”, “Reference letter attached”.

Key divergences

  • Structured Reference Profile stats panel omitted — no backend aggregate exists
  • Share Reference Link CTA and “How it works” secondary action both dropped (no destinations)
  • Built groups requests into Outbound + Closed sections; Stitch shows one flat list with consent/response sub-states
Carry-forward: Per #564 callout — stats panel deferred until a tenancy aggregate ships; per feedback_dont_overstate_progress no faked numbers.

9 Documents

divergent
Stitch 0dc7375fc3ad48a09a82caadd8fb8c06  ·  Built tenantmate-app/src/pages/DocumentsPage.tsx
Purpose match: yes — both are the tenancy document vault. Built solves the same problem with a structurally different layout because the EvidenceItem model is flat and free-text rather than slotted into fixed compliance categories.

Structure

Stitch: subtitle + search bar + filter pills (“ACTIVE” / “PRE-TENANCY” / “ARCHIVED”) + 4 fixed compliance cards (Tenancy Agreement UPLOADED / EPC UPLOADED / EICR MISSING / Inventory UPLOADED) + “Compliance Documents” advisory + upload button. Built: heading + search input + cache banner + dynamic groups by issue_type (with “Other documents” catch-all) + DocumentCard list rows + floating FAB + HelpInfoCard. Filter pills and 4 fixed slots gone.

Styling

Stitch is grid-style compliance cards with status pills (UPLOADED / MISSING) and category icons. Built uses single-column DocumentCards with primary left-border accent, document-text icon tile, filename + captured/size strapline, and capture_method badge — closer to a list view than a card grid. FAB sits fixed bottom-right instead of inline.

Copy

Stitch quotes “Secure vault for all your tenancy records”, “Action required: Upload copy”, “UPLOADED”, “MISSING”, filter pills “ACTIVE” / “PRE-TENANCY” / “ARCHIVED”. Built preserves the subtitle verbatim: “Secure vault for all your tenancy records.” Empty-state copy: “No documents yet”, “Upload first document”.

Key divergences

  • 4 fixed compliance cards replaced by dynamic groups keyed off issue_type with an “Other documents” bucket
  • ACTIVE / PRE-TENANCY / ARCHIVED filter pills omitted — no tenancy-stage attribute on EvidenceItem
  • MISSING / UPLOADED status pills replaced by capture_method (“uploaded” / “photo” / etc.) badges
Carry-forward: Per #559 callout — divergence is intentional; fixed slots and stage pills depend on schema work not yet done on EvidenceItem.

10 Tenancy Timeline Updated

match
Stitch ad0f747c7e854430ac6791eac3e43d5c  ·  Built tenantmate-app/src/pages/TimelinePage.tsx
Purpose match: yes — both render a chronological tenancy event feed from legal setup to move-out. Stitch intro “Track your property journey from legal setup to eventual move-out” ~= built “Track your tenancy from legal setup to eventual move-out. Every event below was recorded by TenantMate as it happened.”

Structure

Built reproduces the Stitch vertical-rail timeline (icon disc + card per event) and day grouping. Adds explicit day headers (“Today”/“Yesterday”/dd mmm yyyy), a “Why a timeline?” help-info card at the foot, and three robust states (no tenancy / loading / empty / error). Stitch's single “Rent Due in 3 days” upcoming/notification card is omitted — built is strictly historical (audits-driven).

Styling

Stitch uses Material vibes with five hard-coded category colours; built maps the same vocabulary (Legal/Move In/Maintenance/Requests/Finance/Disputes/Household) to v2.1 tokens (bg-primary/secondary/tertiary). Density and card prominence match. Bottom-nav stripped (owned by AuthenticatedShell).

Copy

Category labels align (“Legal”, “Move In”, “Maintenance”, “Requests”); Stitch's “Timeline” category becomes built's “Tenancy” bucket. Per-event copy is dynamic (audit summaries) vs Stitch's curated strings like “Tenancy Agreement Signed” / “Boiler Service Scheduled”. Built adds “by {actor_email}” attribution Stitch lacks.

Key divergences

  • Stitch's “Rent Due in 3 days” upcoming/notification card not surfaced — feed is historical only
  • Stitch curated event copy replaced with dynamic audit summaries via 23-row AuditTrail::Summary mapping
  • Built adds a “Why a timeline?” adjudicator-framing card not in Stitch
Carry-forward: Cross-reference #580: AuditTrail::Summary covers Legal/Move In/Move Out/Maintenance/Requests/Finance/Disputes/Household — coverage looks complete; “Upcoming” (rent-due nudge) is the unmapped Stitch concept.

11 Communications & Maintenance

partial
Stitch f4fd57e11d7e444ead84b8e41d1a75b4  ·  Built tenantmate-app/src/pages/MessagesPage.tsx
Purpose match: yes — both surface tenant↔landlord/agent/contractor/council conversation. Stitch frames it as “Active Tenancy Thread” for “Flat 14, Ashfield Court”; built reframes as a thread hub (“One place for every conversation about this tenancy — landlord, agent, contractor, council. Threads stay attached to the tenancy so the record survives a tenancy switch.”)

Structure

Stitch shows a single open thread with property header, participants row, mixed-channel bubbles (WhatsApp/SMS/App/Portal), and a composer. Built is a list→detail hub: ThreadList of cards → ThreadDetail (back link, participants row, bubbles, composer) → NewThreadModal (subject/channel/participants). Materially different layout — driven by Rails contract supporting many threads per tenancy.

Styling

Both use Material/teal vibes; built uses v2.1 tokens. Bubble treatment matches Stitch (rounded, asymmetric corners, ownSide right-align, internal-note style). Stitch's channel labels are platform-named (“WhatsApp”, “SMS”, “App”, “Portal”); built's enum is taxonomy-clean (“Email/Letter/Phone/In person/Landlord portal/Text/Other”).

Copy

Built page header is “Messages” not Stitch's “Flat 14, Ashfield Court”. Composer label “New message” vs Stitch's icon-only “send”/“attach_file”. Stitch “Automated Update: Your report regarding 'Property Maintenance' has been logged under Reference #TM-9921.” has no built equivalent. Built adds onboarding empty state.

Key divergences

  • List→detail hub vs Stitch's single always-visible thread (driven by Rails supporting multiple threads/tenancy)
  • No attach/upload — Stitch has paperclip + photo evidence; built textarea-only
  • No “Maintenance” sub-domain — Stitch title implies work-order surface; built reuses comms entries only
  • Channel taxonomy diverges (WhatsApp/SMS/App/Portal → email/letter/phone/in_person/landlord_portal/text_message/other)
Carry-forward: #566 — hub→detail vs always-visible single thread is a deliberate architectural choice; “Maintenance” in Stitch title is conversational only — work-order pack not built. Attachments + automated-update bot inserts are post-MVP.

12 Key Contacts

partial
Stitch 3989c30407514d82a9742567b3f64777  ·  Built tenantmate-app/src/pages/KeyContactsPage.tsx
Purpose match: yes — both are the formal contact registry for the active tenancy. Stitch intro “Official contact registry for your current tenancy. These details are verified and should be used for all formal correspondence and service of notices.” ~= built “Official contact registry for your current tenancy. Use these details for formal correspondence and service of notices.”

Structure

Stitch lists four party types as separate sections (Landlord, Letting Agent, Management Company, Freeholder) with phone, address, badges, and Call/Email/Portal/Raise-Maintenance/Copy-Address actions, plus a “Need help with legal notices?” CTA → “Draft a Letter”. Built renders a unified active grid + Archived sub-grid (cards across landlord/agent/contractor/guarantor/deposit_scheme), shows party_type + role + service_address + legal_capacity + effective dates, and an Add/Edit/Archive modal.

Styling

Both use Material card grid with left-accent colour bar mapped per party type (built: bg-primary/secondary/tertiary/outline/primary-container). Built badges show legal_capacity (“Primary owner”, “Sole trader”) where Stitch shows “Primary Owner” / “In Contract” / “ARLA Reg: M0023941”.

Copy

Built party labels: “Landlord” / “Letting Agent” / “Contractor / Manager” / “Guarantor” / “Deposit Scheme” — Stitch has “Landlord” / “Letting Agent” / “Management Company” / “Freeholder” (built collapses last two into “Contractor / Manager”). Built CTA “Add a contact” vs Stitch “Draft a Letter”. Built bottom card honestly says “Phone, email & saved letters are coming”.

Key divergences

  • No phone/email columns in TenancyContact schema → Stitch's Call/Email/Portal/Raise-Issue action buttons all absent; replaced by Edit + Archive only
  • No Management Company or Freeholder party types — collapsed into contractor; explicit in built doc comment
  • No “Draft a Letter” / formal-notice generator CTA — built ends with explanatory “coming soon” card instead
  • Built adds Archive flow (PATCH effective_to=today) since API has no DELETE; Stitch has no archival concept
Carry-forward: #561 callouts confirmed verbatim in this file: phone/email columns + freeholder/management-company party types + DELETE endpoint are all explicitly flagged as gaps. Built's inline “Phone, email & saved letters are coming” card is the user-facing acknowledgement.

13 Guidance Library / Advice

partial
Stitch c8e6a7fc40bb4e168894169696c4bf5a  ·  Built tenantmate-app/src/pages/AdvicePage.tsx + ArticlePage.tsx
Purpose match: yes — both are the in-app guidance/advice library. Stitch's broader scope (Guidance + Letter Templates + External Support hub) is narrower in built (article library only, plus a stubbed context banner).

Structure

Stitch ships three top-level sub-surfaces: “Context-Aware Insights” banner (“You are currently in the Final Month of your agreement”), search, four guidance cards (Deposit Disputes/Repair Obligations/Eviction Response/Rent Challenges), “Letter Templates” rail (Formal Repair Request / Challenge Rent Increase / Notice of Intent to Move / Deposit Dispute Submission) and “External Support” (Citizens Advice / Shelter / Generation Rent). Built ships: heading + intro + ContextBanner (stubbed), SearchInput, topic-grouped article grid, HelpInfoCard footer. Letter Templates and External Support sections fully omitted. ArticlePage is a separate route.

Styling

Both use Material/teal card grid with left-accent colour per topic. Built topic palette is richer than Stitch's three-bucket FINANCE/MAINTENANCE/LEGAL scheme. Card density matches; built adds icon disc + topic description in section headers.

Copy

Stitch personalisation line “You are currently in the Final Month of your agreement, so we've prioritized deposit and move-out guidance.” replaced by built's honest “Context-aware insights are on the way” placeholder. Stitch card titles “Deposit Disputes” / “Repair Obligations” / “Eviction Response” / “Rent Challenges” become data-driven titles from API; built CTA “Read guide” matches Stitch “Read Guide”. Built adds “These guides aren't legal advice” footer not in Stitch.

Key divergences

  • No Letter Templates section — comm_generation pack not built
  • No External Support directory (Citizens Advice / Shelter / Generation Rent) — reference_data carve-out not built
  • Context banner is stubbed (no tenancy-stage personalisation) vs Stitch's “Final Month” copy
  • Topic taxonomy is broader (8 topics) than Stitch's 3 colour buckets; richer but no per-stage prioritisation
Carry-forward: File comments explicitly flag both omissions: Letter Templates need the comm_generation pack to land first (architectural, no issue yet) and External Support is a reference_data carve-out. Worth opening a #556 sub-issue for both rails.

14 App Feedback

partial
Stitch f49c83b025ce41fcac86b8e669d7c9c2  ·  Built tenantmate-app/src/pages/FeedbackPage.tsx
Purpose match: yes — both are a free-text feedback form with auto-attached support context. Stitch tagline “Your insights help us build the ultimate companion for modern tenants.” ~= built “Tell us what's broken, confusing, or missing. Every piece of feedback is reviewed by the team.”

Structure

Stitch: heading, textarea (“What's on your mind?”), screenshot upload zone (“Tap to upload or drag image here”), auto-attached context block (Build/Route/User/Active Tenancy), Submit Feedback button, footer policy line, “product team reviews every piece of feedback manually every Thursday” info box. Built: heading, textarea with character counter (0 / 10,000), auto-attached context dl, Submit Feedback button, footer policy line, success state with “Thanks for the feedback” + “Send another”. Screenshot upload and Thursday-cadence info box omitted.

Styling

Stitch uses Material vibes with a dark inverse-surface metadata block — built mirrors this with bg-inverse-surface text-inverse-on-surface font-mono dl. v2.1 token usage throughout (font-h1, font-label-caps, focus:ring-2 ring-primary). Layout density and hierarchy match closely. Submit button prominence (full-width primary) matches Stitch.

Copy

Built heading “Help us improve TenantMate” matches Stitch exactly. Textarea placeholder “Tell us what's broken, confusing, or missing…” vs Stitch “What's on your mind?” (built uses Stitch's as the label). Submit label “Submit Feedback” identical. Footer “By submitting, you agree to our feedback being stored and reviewed by the TenantMate team.” vs Stitch “By submitting, you agree to our Feedback Policy.” Built omits the “reviews every piece of feedback manually every Thursday” cadence claim.

Key divergences

  • No screenshot/upload — file comment notes “needs ActiveStorage wiring on the Rails side and a multipart path on the client”
  • No Thursday-cadence review info box (avoids overstating SLA)
  • Built adds character counter (0 / 10,000) Stitch lacks
  • Built renders an explicit post-submit success state vs Stitch's single-state form
Carry-forward: Screenshot upload is the load-bearing gap; honest cadence framing avoids overstating ops. Worth opening a #556 sub-issue for ActiveStorage feedback attachments.

15 Profile

partial
Stitch a17d45e881da4751ab1babb7c1dd25de  ·  Built tenantmate-app/src/pages/ProfilePage.tsx
Purpose match: yes — both are the account-self-management surface. Stitch leans richer (preferences toggles + avatar + member-since); built is the security-only carve-out shipped in #539 plus a destructive “Close account” entry.

Structure

Stitch shows avatar + name + email + “verified Member since Jan 2023” + Notifications + Biometric Login + Change Email + Change Password + Close Account. Built shows email + status + tenancy badge + “Security & Login” section (Change email / Change password rows) + “Account Actions” (Close account) + build SHA. No avatar, no member-since, no Notifications toggle, no Biometric Login toggle. Tenancy switcher + sign-out stayed in AppToolbar popover.

Styling

Both use Material card lists with chevron-forward affordances. Built uses v2.1 tokens (bg-white rounded-xl border border-outline-variant for the row group; bg-error/border-error/20 for the danger card). Stitch's avatar + centred name is replaced by centred email-as-heading. Destructive prominence matches (red icon, error-container background on hover).

Copy

Built rows match Stitch labels: “Change email” / “Change password” / “Close account” align. Sub-copy diverges: built “Update the address you sign in with.” / “Update the password you sign in with.” vs Stitch's “Verify” + email + “Last updated 3 months ago”. Built close-account warning: “Permanently close your TenantMate account. Saved records remain for audit; you won't be able to sign back in with this email.” — adjudicator-grade phrasing vs Stitch's stronger “permanently remove all your tenancy history…”

Key divergences

  • No Notifications preference toggle — no backend (per feedback_dont_overstate_progress)
  • No Biometric Login toggle — same reason
  • No avatar / member-since — no avatar storage, no account.created_at on Principal
  • Tenancy switcher + sign-out intentionally NOT duplicated here (kept in AppToolbar popover)
  • Built close-account copy preserves audit records (“saved records remain for audit”) vs Stitch's stronger “permanently remove” — more accurate to the account state machine
Carry-forward: #545 confirmed verbatim: tenancy switcher + sign-out stayed in AppToolbar popover, NOT duplicated on Profile. Notifications + Biometric Login deferred until backend exists. Avatar + member-since deferred until Principal carries account.created_at and avatar storage lands.

How to use this audit

This page is a one-shot snapshot of where the shipped PWA stands against Stitch v2.1 as of 2026-05-16. The intended uses: