Tegy Billing Visual Alignment

Claude.ai evidence and Tegy implementation proof for the basic subscription journey: free workspace, upgrade, return states, Pro welcome, active billing, and recovery states. Captured and updated on 2026-07-01.

Issue: #557 Provider: Polar sandbox Video: 20.44s, 1280x900 Status: billing tests pass

Follow-up color, icon, close-action, pricing-card, and mobile parity corrections are documented in tegy-billing-modal-corrections-2026-07-01.

Reference Evidence

Claude Surface Measured / Observed Details Tegy Alignment Decision
Account menu Bottom-left popover, about 272px wide, 32px menu rows, 1px separators, and a plain View all plans row. No committed screenshot because the live menu included account email. Kept Tegy account entry as View all plans; the billing surface opens from that same user-owned menu path.
Settings modal 960x720 modal, 192px left rail, 768px content pane, 14px base type, 15px section heading, 12px modal radius, subtle shadow, mostly borderless rows, 32px icon close button. Changed Tegy billing from a compact card to a 960px dark Tegy panel with a settings-style rail and single icon close affordance.
Plan cards Centered plan content, 28px page heading, large line icons, 14px checkmark bullets, 1px card borders, 8px buttons, black primary CTAs. Added a large plan glyph, checkmark feature list, removed the obsolete free-plan detail card, and kept Tegy's primary Upgrade plan/Manage billing actions.
Checkout Claude uses a dedicated checkout route with selected plan rows, order details, tax, renewal copy, payment form, and disabled subscribe until valid. Tegy keeps Polar as the payment handler. The demo includes a controlled provider-handoff page; real payment entry remains provider-hosted sandbox checkout.
Return and recovery states Billing states are UI-level notices, not assistant messages. Warnings and errors stay visibly separate from generated chat content. Recovery notices remain in the billing panel with dark in-panel warning/error styling.

State Graph

The implementation preserves the billing lifecycle while changing the visual treatment of the user-facing states.

Billing visual-alignment lifecycle state graph.

Updated Demo

The video shows the user journey through the states in the graph: free billing, provider handoff, canceled return, successful return, Welcome to Tegy Pro, active billing, pending payment, expired checkout, and past-due recovery. The provider page and non-success states are controlled regression states; no live payment is processed.

Open video Open reviewed contact sheet

Claude Screenshots

Claude settings usage modal reference.
Fresh Claude settings modal reference. Confirms 960x720 modal, 192px rail, quiet rows, 14px type, icon-only refresh/close controls.
Claude Team and Enterprise plan cards reference.
Fresh Claude upgrade-card reference. Confirms large plan icons, bordered cards, checkmark lists, and black full-width CTAs.
Claude Billing tab free plan.
Prior sanitized Claude Billing tab evidence: left settings rail, plan icon/title, feature bullets, and a single Upgrade plan CTA.
Claude individual monthly plan chooser.
Prior sanitized individual plan chooser evidence: Free, Pro, and Max cards with the black Pro CTA and checkmark feature lists.
Claude Pro monthly checkout.
Prior sanitized checkout evidence. Tegy does not recreate this page in-app because Polar owns payment collection.

Before And After

Tegy billing before visual alignment.
Before: compact dark billing card, nested detail cards, small orange CTA, and less Claude-like placement.
Tegy billing after visual alignment.
After: wide dark Tegy panel, left rail, plan glyph, status badge, checkmark list, single close control, and Pro welcome splash.
Tegy billing mobile visual checks.
Mobile check: sidebar drops away, the CTA stays visible, billing content wraps cleanly, and Welcome to Tegy Pro remains legible.

Implementation Proof

Tegy free billing dialog after alignment.
Free state: dark Tegy panel with Upgrade plan primary action and Claude-style feature list.
Tegy Welcome to Pro splash after alignment.
Success state: full-screen Welcome to Tegy Pro splash on the dark Tegy surface.
Tegy active billing dialog after alignment.
Active state: Manage billing replaces Upgrade plan and the Active badge uses a restrained success treatment.
Tegy pending billing dialog after alignment.
Pending state: warning notice stays in billing UI and does not appear as assistant content.
Tegy past-due billing dialog after alignment.
Past-due state: red recovery notice with Upgrade plan action for payment recovery.
Reviewed video contact sheet for Tegy billing visual alignment demo.
Reviewed video frames. Confirms provider handoff, canceled, welcome, active, pending, expired, and past-due states are present.

Verification

Check Result
npm run build Passed Build completed; standard large-chunk warning only.
npm run test:billing Passed Billing contract tests passed.
Billing browser tests Passed Seven billing/checkout tests passed with -g "billing|checkout|Pro welcome".
Full product UI file Known noise All billing tests passed; unrelated tooltip/macro/detail/project-composer tests failed in the broader file.
Video review Passed MP4 metadata checked and contact sheet reviewed before publishing.