diff --git a/src/app/share/dialer-mockup-final/_data.ts b/src/app/share/dialer-mockup-final/_data.ts
new file mode 100644
index 00000000..64c1b239
--- /dev/null
+++ b/src/app/share/dialer-mockup-final/_data.ts
@@ -0,0 +1,204 @@
+export const CURRENT_LEAD = {
+ name: "Cornelius J. Hayes Jr.",
+ relationship: "Son of Deceased Owner",
+ phone: "(216) 555-1947",
+ address: "4218 Heights Blvd, Cleveland OH 44106",
+ netToFirm: "$146,132",
+ leadId: "L-2026-0218",
+ talkTimer: "04:32",
+ state: "Connected",
+ initials: "CH",
+ contactIndex: 1,
+ contactTotal: 4,
+ estate: "Hayes Estate",
+ caseType: "estate" as "estate" | "property" | "case",
+};
+
+export const CASE_TYPE_LABELS: Record<"estate" | "property" | "case", string> = {
+ estate: "Same Estate",
+ property: "Same Property",
+ case: "Same Case",
+};
+
+export const NEXT_LEAD = {
+ name: "Otis Crockett",
+ relationship: "Cousin of Heir",
+ estate: "Crockett Estate",
+ countdown: "0:03",
+ cooldownDefaultSeconds: 3,
+};
+
+export const ESTATE = {
+ caseNumber: "2026-PR-04188",
+ county: "Cuyahoga County, OH",
+ taxSaleDate: "May 6, 2026",
+ monthsSinceSale: "1 Month",
+ closingBid: "$312,000",
+ netToFirm: "$146,132",
+ recoveryFee: "30%",
+ ownerStatus: "Deceased, March 2025",
+ attorney: "Chen & Park",
+ heirsOfRecord: 3,
+};
+
+export const AI_SUMMARY = {
+ source: "Gemini",
+ generated: "Just Now",
+ bullets: [
+ "Father passed March 2025; tax sale 1 month ago in Cuyahoga County cleared $146,132 in surplus the firm has not yet claimed.",
+ "Cornelius is the eldest son; sister Loretta handles paperwork. He is the path to her, not the decision maker alone.",
+ "Last call (June 14) he was receptive but asked for documentation by mail before signing. Open to 30%; wanted Mossy Land letterhead.",
+ "Cold prior to June 8; firm only has the probate filing on record. Likely needs heir verification and a sibling alignment before signing.",
+ ],
+};
+
+export const ACTIVITY = [
+ { when: "June 15, 2026", what: "Letter Delivered" },
+ { when: "June 14, 2026", what: "Call (12 min), Receptive" },
+ { when: "June 12, 2026", what: "Mail Sent" },
+ { when: "June 08, 2026", what: "Call (4 min), Screened" },
+ { when: "June 05, 2026", what: "Lead Imported" },
+];
+
+export const CONTACTS = [
+ {
+ name: "Cornelius J. Hayes Jr.",
+ relationship: "Son of Deceased Owner",
+ phone: "(216) 555-1947",
+ active: true,
+ },
+ {
+ name: "Loretta Hayes Bell",
+ relationship: "Sister of Cornelius",
+ phone: "(216) 555-2204",
+ },
+ {
+ name: "Marcus Bell",
+ relationship: "Brother in Law",
+ phone: "(440) 555-8819",
+ },
+ {
+ name: "Diane Chen",
+ relationship: "Probate Attorney",
+ phone: "(216) 555-0044",
+ },
+];
+
+export type QueueItem = {
+ id: string;
+ name: string;
+ relationship: string;
+ estate: string;
+ surplus: string;
+ county: string;
+ state?: "active" | "done";
+};
+
+export const QUEUE: QueueItem[] = [
+ {
+ id: "L-2026-0218",
+ name: "Cornelius J. Hayes Jr.",
+ relationship: "Son of Deceased Owner",
+ estate: "Hayes Estate",
+ surplus: "$146K",
+ county: "Cuyahoga OH",
+ state: "active",
+ },
+ {
+ id: "L-2026-0219",
+ name: "Otis Crockett",
+ relationship: "Cousin of Heir",
+ estate: "Crockett Estate",
+ surplus: "$89K",
+ county: "Franklin OH",
+ },
+ {
+ id: "L-2026-0220",
+ name: "Reginald T. Whitfield",
+ relationship: "Relationship Unknown",
+ estate: "Whitfield Estate",
+ surplus: "$51K",
+ county: "Hamilton OH",
+ },
+ {
+ id: "L-2026-0221",
+ name: "Yolanda Beauchamp",
+ relationship: "Daughter of Heir",
+ estate: "Beauchamp Estate",
+ surplus: "$112K",
+ county: "Cuyahoga OH",
+ },
+ {
+ id: "L-2026-0222",
+ name: "Trevor McKinley",
+ relationship: "Spouse of Owner",
+ estate: "McKinley Estate",
+ surplus: "$34K",
+ county: "Summit OH",
+ },
+ {
+ id: "L-2026-0223",
+ name: "Sandra Vega Romero",
+ relationship: "Niece of Owner",
+ estate: "Vega Estate",
+ surplus: "$77K",
+ county: "Lucas OH",
+ },
+ {
+ id: "L-2026-0224",
+ name: "Adelaide Whitlock",
+ relationship: "Daughter of Owner",
+ estate: "Whitlock Estate",
+ surplus: "$58K",
+ county: "Mahoning OH",
+ },
+];
+
+export type StatItem = {
+ label: string;
+ value: string;
+ trend: string;
+ direction: "up" | "flat" | "down";
+ tooltip: string;
+ pulse?: boolean;
+};
+
+export const SESSION_STATS: StatItem[] = [
+ {
+ label: "Dials",
+ value: "47",
+ trend: "above pace",
+ direction: "up",
+ tooltip: "Session 47 · Target 60 by 5 PM · +8 vs 30 day avg of 39",
+ },
+ {
+ label: "Connects",
+ value: "9",
+ trend: "above pace",
+ direction: "up",
+ pulse: true,
+ tooltip: "Session 9 · Above session avg of 6 · +3 vs 30 day avg of 6",
+ },
+ {
+ label: "Rate",
+ value: "19%",
+ trend: "above 30 day",
+ direction: "up",
+ tooltip: "Session 19% · 30 day avg 14% · Top quartile",
+ },
+ {
+ label: "Talk",
+ value: "38m",
+ trend: "on pace",
+ direction: "flat",
+ tooltip: "Session 38m · 30 day avg 41m · Paced",
+ },
+];
+
+export const QUEUE_TOTAL = 100;
+export const QUEUE_POSITION = 3;
+
+export const NOTE_PREFILL = "Logged 3:47 PM";
+
+export const CANVAS_W = 1280;
+export const CANVAS_H = 820;
diff --git a/src/app/share/dialer-mockup-final/_layouts/FullFrame.tsx b/src/app/share/dialer-mockup-final/_layouts/FullFrame.tsx
new file mode 100644
index 00000000..6096fa04
--- /dev/null
+++ b/src/app/share/dialer-mockup-final/_layouts/FullFrame.tsx
@@ -0,0 +1,55 @@
+import Link from "next/link";
+import { CANVAS_W, CANVAS_H } from "../_data";
+
+type Tab = { label: string; href: string; key: string };
+
+export function FullFrame({
+ label,
+ tabs,
+ active,
+ children,
+}: {
+ label: string;
+ tabs: Tab[];
+ active: string;
+ children: React.ReactNode;
+}) {
+ return (
+
+
+
+ ← All Variants
+
+
+
+ {label}
+
+
+ {tabs.map((t) => (
+
+
+
+
+ {children}
+
+
+ {children}
+
+ );
+}
+
+export function Logomark() {
+ return (
+
+
+ N
+
+
+ Next Surplus
+
+
+ Power Dialer
+
+
+ {SESSION_STATS.map((s) => (
+
+
+
+ {s.label}
+
+
+ {s.value}
+
+ {s.pulse && (
+
+
+ )}
+
+
+
+ {s.trend}
+
+
+
+ ))}
+
+
+ {state === "live" && (
+
+
+ {label}
+
+
+ {timer}
+
+
+ );
+}
+
+export function CaseTypeChip() {
+ const label = CASE_TYPE_LABELS[CURRENT_LEAD.caseType];
+ return (
+
+ {label}
+ ·
+
+ Contact {CURRENT_LEAD.contactIndex} of {CURRENT_LEAD.contactTotal}
+
+
+ );
+}
+
+export function NewEstateFlashChip() {
+ return (
+
+ ·
+ Hayes → Crockett
+
+ );
+}
+
+export function HeroDivider() {
+ return
;
+}
+
+export function Control({
+ label,
+ intent = "secondary",
+ size = "md",
+}: {
+ label: string;
+ intent?: "secondary" | "primary" | "danger";
+ size?: "md" | "lg";
+}) {
+ const sizeClass =
+ size === "lg" ? "h-11 px-6 text-[13px]" : "h-9 px-4 text-[12.5px]";
+ const intentClass =
+ intent === "danger"
+ ? "bg-[#b91c1c] text-white"
+ : intent === "primary"
+ ? "bg-white text-petrol-700"
+ : "bg-white/20 text-white";
+ return (
+
+ {label}
+
+ );
+}
+
+export const DISPOSITION_CHIPS = [
+ "Interested",
+ "Callback Requested",
+ "Not Interested",
+ "Wrong Number",
+ "Do Not Contact",
+];
+
+export function DispositionRow({
+ selected = null,
+}: {
+ selected?: string | null;
+}) {
+ return (
+
+ {DISPOSITION_CHIPS.map((c) => {
+ const isSelected = c === selected;
+ const cls = isSelected
+ ? "bg-white text-petrol-700"
+ : "bg-transparent text-white ring-1 ring-inset ring-white/30";
+ return (
+
+ {c}
+
+ );
+ })}
+
+
+ Disposition
+
+
How did the call go?
+
+
+ Add a quick note...
+
+
+ {NOTE_PREFILL}
+
+
+ );
+}
+
+export function CountdownBanner() {
+ return (
+
+
+ Next
+
+
+ {NEXT_LEAD.name}
+
+
{NEXT_LEAD.relationship}
+
·
+
+ {NEXT_LEAD.countdown}
+
+
+
+ Dial Now
+
+
+ Skip
+
+
+
+
+
+
+ What You Already Know
+
+
+ {AI_SUMMARY.generated}
+
+
+
+
+
+
+
+
+
+ {AI_SUMMARY.bullets.slice(0, 3).map((b, i) => (
+
+
+ {b}
+
+
+ ))}
+
+
+
+ Net to Firm
+
+
+ {CURRENT_LEAD.netToFirm}
+
+
+ Case {CURRENT_LEAD.leadId}
+
+
+ );
+}
+
+export function QueueHeaderStats() {
+ return (
+
+
+ {QUEUE_POSITION} of {QUEUE_TOTAL}
+ {" "}
+ Leads · 47 Dials · 9 Connects · 19% Rate
+
+ );
+}
+
+export function QueueSearch() {
+ return (
+
+
+ Search or jump to position
+
+
+ /
+
+
+ );
+}
+
+export function EstateFactsCard() {
+ const rows = [
+ ["Case Number", ESTATE.caseNumber],
+ ["County", ESTATE.county],
+ ["Tax Sale Date", ESTATE.taxSaleDate],
+ ["Time Since Sale", ESTATE.monthsSinceSale],
+ ["Closing Bid", ESTATE.closingBid],
+ ["Net to Firm", ESTATE.netToFirm],
+ ["Recovery Fee", ESTATE.recoveryFee],
+ ["Owner Status", ESTATE.ownerStatus],
+ ["Attorney", ESTATE.attorney],
+ ];
+ return (
+
+
+ Estate Detail
+
+
+ {rows.map(([k, v]) => (
+
+
{k}
+ {v}
+
+ ))}
+
+
+
+
+ Latest Activity
+
+
+ {events[0].when.replace(", 2026", "")}
+
+
+
+
+
+ {events[0].what}
+
+
+
+ {events.slice(1, 4).map((e) => (
+
+ {e.what}
+
+ {e.when.replace(", 2026", "")}
+
+
+ ))}
+
+
+
+
+ Contact Tree
+
+
{contacts.length} Members
+
+
+ {contacts.map((c) => (
+
+
+
+ {c.name}
+
+
+ {c.phone}
+
+
+
{c.relationship}
+
+ ))}
+
+
+
+ );
+ }
+ if (direction === "down") {
+ return (
+
+
+ );
+ }
+ return (
+
+
+ );
+}
+
+function SparkIcon({ className }: { className?: string }) {
+ return (
+
+
+ );
+}
+
+function RefreshIcon({ className }: { className?: string }) {
+ return (
+
+
+ );
+}
+
+function SearchIcon({ className }: { className?: string }) {
+ return (
+
+
+ );
+}
+
+function NoteIcon({ className }: { className?: string }) {
+ return (
+
+
+ );
+}
diff --git a/src/app/share/dialer-mockup-final/_layouts/V44.tsx b/src/app/share/dialer-mockup-final/_layouts/V44.tsx
new file mode 100644
index 00000000..1f31fe2f
--- /dev/null
+++ b/src/app/share/dialer-mockup-final/_layouts/V44.tsx
@@ -0,0 +1,165 @@
+import { CURRENT_LEAD, QUEUE, CONTACTS, ACTIVITY } from "../_data";
+import {
+ CanvasFrame,
+ Logomark,
+ StatsStrip,
+ StatusBadge,
+ CaseTypeChip,
+ NewEstateFlashChip,
+ HeroDivider,
+ Control,
+ DispositionRow,
+ DispositionHeader,
+ QuickNoteInput,
+ CountdownBanner,
+ AiSummary,
+ FinancialBlock,
+ QueueHeaderStats,
+ QueueSearch,
+ EstateFactsCard,
+ LatestActivityCard,
+ ContactTreeCard,
+ PETROL_GRADIENT,
+} from "./Shared";
+
+export function V44({ wrap = false }: { wrap?: boolean }) {
+ return (
+
+
+
+
+
+
+
+
+ {wrap &&
+
+
+
+
+ {CURRENT_LEAD.initials}
+
+
+
+ {CURRENT_LEAD.name}
+
+
+ {CURRENT_LEAD.relationship}
+
+
+
+ {CURRENT_LEAD.phone}
+
+ ·
+
+ {CURRENT_LEAD.address}
+
+
+
+
+
+
+
+
+
+
+
+ {wrap ? (
+
+
+ ) : (
+ <>
+
+
+
+ )}
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/share/dialer-mockup-final/_layouts/V45.tsx b/src/app/share/dialer-mockup-final/_layouts/V45.tsx
new file mode 100644
index 00000000..c428326e
--- /dev/null
+++ b/src/app/share/dialer-mockup-final/_layouts/V45.tsx
@@ -0,0 +1,190 @@
+import { CURRENT_LEAD, QUEUE, CONTACTS, ACTIVITY } from "../_data";
+import {
+ CanvasFrame,
+ Logomark,
+ StatsStrip,
+ StatusBadge,
+ CaseTypeChip,
+ HeroDivider,
+ Control,
+ DispositionRow,
+ DispositionHeader,
+ QuickNoteInput,
+ CountdownBanner,
+ AiSummary,
+ FinancialBlock,
+ QueueHeaderStats,
+ QueueSearch,
+ EstateFactsCard,
+ LatestActivityCard,
+ ContactTreeCard,
+ PETROL_GRADIENT,
+} from "./Shared";
+
+export function V45({
+ wrap = false,
+ drawerOpen = false,
+}: {
+ wrap?: boolean;
+ drawerOpen?: boolean;
+}) {
+ const rightCol = drawerOpen ? "360px" : "60px";
+ return (
+
+
+
+
+
+
+
+
+
+ {wrap &&
}
+
+
+
+
+
+
+ {CURRENT_LEAD.initials}
+
+
+
+ {CURRENT_LEAD.name}
+
+
+ {CURRENT_LEAD.relationship}
+
+
+ {CURRENT_LEAD.phone}
+
+
+ {CURRENT_LEAD.address}
+
+
+
+
+
+
+
+
+
+
+ {wrap ? (
+
+
+ ) : (
+ <>
+
+
+
+ )}
+
+
+
+
+ {drawerOpen ? (
+
+
+
+ Lead Data
+
+
+ ›
+
+
+ ) : (
+
+ )}
+
+
+ );
+}
diff --git a/src/app/share/dialer-mockup-final/page.tsx b/src/app/share/dialer-mockup-final/page.tsx
new file mode 100644
index 00000000..32bb1938
--- /dev/null
+++ b/src/app/share/dialer-mockup-final/page.tsx
@@ -0,0 +1,270 @@
+import Link from "next/link";
+import type { Metadata } from "next";
+import { CANVAS_W, CANVAS_H } from "./_data";
+import { V44 } from "./_layouts/V44";
+import { V45 } from "./_layouts/V45";
+
+export const metadata: Metadata = {
+ title: "Dialer Mockups Final | Next Surplus",
+ description: "Two power dialer chassis for the Next Surplus call screen.",
+};
+
+const SCALE = 0.55;
+const PREVIEW_W = Math.round(CANVAS_W * SCALE);
+const PREVIEW_H = Math.round(CANVAS_H * SCALE);
+
+type Screen = { key: string; title: string; href: string; Component: () => React.ReactElement };
+
+const V44_SCREENS: Screen[] = [
+ { key: "live", title: "Live Call", href: "/share/dialer-mockup-final/v44", Component: () =>
+
+
+
+ Next Surplus · Power Dialer
+
+
+ Final Two Chassis
+
+
+ Two structurally distinct call screens with the locked design system applied. Hero is
+ flattened: no nested tinted boxes, typography hierarchy plus 1px white-at-20% dividers
+ carry the structure. Right column (V44) and Drawer (V45) keep white cards on off-white,
+ 16px padding, 8px radius. Wrap Up keeps the petrol hero, dims the AI summary to 70%,
+ and replaces the control row in place with disposition chips.
+
+
+
+ Lead · Cornelius J. Hayes Jr.
+
+
+ Son of Deceased Owner
+
+
+ Hayes Estate · $146,132 Net to Firm
+
+
+ Cuyahoga County · Tax Sale May 6
+
+
+
+
+
+ Jump To
+
+
+ V44
+
+
+ V45
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+ {chassis}
+
+
+
+ {screens.map((s) => (
+
+
+ Premise: {premise}
+
+
+
+ {screens.map((s) => (
+
+
+ {s.title}
+
+
+
+
+
+
+ ))}
+
+ );
+}
+
+function DecisionsBlock() {
+ const groups = [
+ {
+ head: "Hero",
+ items: [
+ "No tinted boxes. Case-type chip, financial number, and AI summary live on the petrol gradient with no surface; typography weight + opacity + 1px white-at-20% dividers carry the structure.",
+ "Status: small green dot + Connected + 04:32 in plain text. No badge background.",
+ "Net to Firm $146,132 prominent. Below it in tiny gray: Case L-2026-0218.",
+ ],
+ },
+ {
+ head: "Cards",
+ items: [
+ "Right column (V44) and Drawer (V45) keep white cards on off-white background.",
+ "Three cards per surface: Estate Detail, Latest Activity, Contact Tree.",
+ "16px internal padding, 8px radius.",
+ ],
+ },
+ {
+ head: "Cadence",
+ items: [
+ "Power dialer. 3s default between disposition and next dial. 0-10s configurable.",
+ "Skip always visible and active during the countdown.",
+ "Disposition logs during ring time of the next call. Defers if the next connects first.",
+ ],
+ },
+ {
+ head: "Wrap Up Morph",
+ items: [
+ "Hero KEEPS the petrol gradient. No charcoal flip.",
+ "Status badge changes to neutral gray Call Ended 04:32.",
+ "AI Summary dims to 70% opacity (reference, not active).",
+ "Control row replaces in place: Disposition header + How did the call go? + 5 outlined chips + Quick Note input.",
+ ],
+ },
+ {
+ head: "Countdown Banner",
+ items: [
+ "Sticky to top of viewport during wrap up.",
+ "Petrol-900 background, white text.",
+ "Reads: Next: Otis Crockett · Cousin of Heir · 0:03 · Dial Now · Skip.",
+ ],
+ },
+ {
+ head: "Stats + Queue",
+ items: [
+ "Top stats strip: number + single trend indicator (↑ above pace). Hover reveals session vs 30-day tooltip. Connects pulses on new connect.",
+ "Queue header reads 3 of 100 Leads · 47 Dials · 9 Connects · 19% Rate. Search + jump to position on top.",
+ "Same Estate · Contact 1 of 4 chip; case_type drives prefix (Estate / Property / Case).",
+ "Case Number labeled. Floor never appears.",
+ ],
+ },
+ ];
+ return (
+
+
+ Locked Decisions
+
+
+ {groups.map((g) => (
+
+
+ {g.head}
+
+
+ {g.items.map((it, i) => (
+
+ {it}
+
+ ))}
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/src/app/share/dialer-mockup-final/v44/page.tsx b/src/app/share/dialer-mockup-final/v44/page.tsx
new file mode 100644
index 00000000..8f4abecd
--- /dev/null
+++ b/src/app/share/dialer-mockup-final/v44/page.tsx
@@ -0,0 +1,15 @@
+import { FullFrame } from "../_layouts/FullFrame";
+import { V44 } from "../_layouts/V44";
+
+const TABS = [
+ { key: "live", label: "Live Call", href: "/share/dialer-mockup-final/v44" },
+ { key: "wrap", label: "Wrap Up", href: "/share/dialer-mockup-final/v44-wrap" },
+];
+
+export default function V44Page() {
+ return (
+
+
+ );
+}
diff --git a/src/app/share/dialer-mockup-final/v45-drawer-open/page.tsx b/src/app/share/dialer-mockup-final/v45-drawer-open/page.tsx
new file mode 100644
index 00000000..90d200a1
--- /dev/null
+++ b/src/app/share/dialer-mockup-final/v45-drawer-open/page.tsx
@@ -0,0 +1,20 @@
+import { FullFrame } from "../_layouts/FullFrame";
+import { V45 } from "../_layouts/V45";
+
+const TABS = [
+ { key: "live", label: "Live Call", href: "/share/dialer-mockup-final/v45" },
+ { key: "wrap", label: "Wrap Up", href: "/share/dialer-mockup-final/v45-wrap" },
+ {
+ key: "drawer",
+ label: "Drawer Open",
+ href: "/share/dialer-mockup-final/v45-drawer-open",
+ },
+];
+
+export default function V45DrawerOpenPage() {
+ return (
+
+
+ );
+}
diff --git a/src/app/share/dialer-mockup-final/v45-wrap/page.tsx b/src/app/share/dialer-mockup-final/v45-wrap/page.tsx
new file mode 100644
index 00000000..722a3795
--- /dev/null
+++ b/src/app/share/dialer-mockup-final/v45-wrap/page.tsx
@@ -0,0 +1,20 @@
+import { FullFrame } from "../_layouts/FullFrame";
+import { V45 } from "../_layouts/V45";
+
+const TABS = [
+ { key: "live", label: "Live Call", href: "/share/dialer-mockup-final/v45" },
+ { key: "wrap", label: "Wrap Up", href: "/share/dialer-mockup-final/v45-wrap" },
+ {
+ key: "drawer",
+ label: "Drawer Open",
+ href: "/share/dialer-mockup-final/v45-drawer-open",
+ },
+];
+
+export default function V45WrapPage() {
+ return (
+
+
+ );
+}
diff --git a/src/app/share/dialer-mockup-final/v45/page.tsx b/src/app/share/dialer-mockup-final/v45/page.tsx
new file mode 100644
index 00000000..cd736d88
--- /dev/null
+++ b/src/app/share/dialer-mockup-final/v45/page.tsx
@@ -0,0 +1,24 @@
+import { FullFrame } from "../_layouts/FullFrame";
+import { V45 } from "../_layouts/V45";
+
+const TABS = [
+ { key: "live", label: "Live Call", href: "/share/dialer-mockup-final/v45" },
+ { key: "wrap", label: "Wrap Up", href: "/share/dialer-mockup-final/v45-wrap" },
+ {
+ key: "drawer",
+ label: "Drawer Open",
+ href: "/share/dialer-mockup-final/v45-drawer-open",
+ },
+];
+
+export default function V45Page() {
+ return (
+
+
+ );
+}