Workspace redesign: Slate/Graphite design system from the design handoff (D-027)#62
Merged
Merged
Conversation
Decomposition by benefit type (must sum to headline), bounded meeting rail what-if presets, before/after chip + real pinning, sandboxed MM with keep-changes prompt. https://claude.ai/code/session_01DFTAg2R8JQKCtW8LPzMgct
…rade mechanics (D-022) - "How we get to $X" strip re-decomposed by benefit type (ordinary / NOL usage / capital-loss, less gains & costs when nonzero) using the same per-year identity the engine uses for taxSavings — sums to the headline by construction, with whole-dollar reconciliation so the displayed cards add exactly; printed page 1 uses the same component - CountUp animates once on mount, then debounced prev->new (never replays from $0 mid-meeting); hero uses shared fmtCurrency ($15K, not $0.02M) from the same source as the narrative - Mechanics level branches for EDI mode (harvest -> CF reserve -> contingent shelter; no more "Establish QFAF $0") and gains a collapsible "For your CPA" card: 475(f) ordinary-character basis, 461(l) cap with the client's actual binding numbers, wash-sale assumption incl. 0% case, state caveat; print-expanded on page 3 - Dead-tail explanation by the chart when QFAF duration < projection; reinvestment card no longer prints advisor self-instructions - App nav hidden while MM is mounted; year focus defaults to Year 1; no "-$1" axis ticks; MM totals row no longer white-on-white (global tfoot rule untouched); step-up strip/disclosure raised to 14px; dead Pin button removed pending D-024 wiring - Print pagination verified still exactly 3 sheets (QFAF + EDI) via headless PDF; 7 new tests (377 total) https://claude.ai/code/session_01DFTAg2R8JQKCtW8LPzMgct
…emory (D-023/D-024/D-025) - New MeetingSession wrapper (workspace host): snapshots inputs + settings + events at entry; the meeting runs on a local copy through the same calculate/calculateWithOverrides pipeline (shared buildActiveOverrides/computeScenarioRates helpers prove one engine). Dirty exit prompts "Keep the changes made during the meeting?" with Discard as the default - no silent mutation of the working scenario - "Client questions" rail group (off by default per D-002): retirement income step-down (year + new income -> per-year overrides), LT gain event (D-012 semantics), market growth toggle + return slider, financing fees toggle - five of the seven mock-meeting interruptions now answerable without leaving the meeting - Comparison memory: auto "Was X -> Now Y" chip under the hero (re-baselines on dismissal; reserve delta in EDI mode) plus real single-slot scenario pinning with a frozen ghost row, unpin, and a "Compared with pinned scenario" line on the printed page 1; dead onPinScenario/canPin/collateralOnlyResults props removed - Classic-tab host compiles and gains chip+pin; sandbox/preset parity there left as a future slice (noted in DECISIONS.md) - Print pagination re-verified at exactly 3 sheets (QFAF + EDI, pin set, preset active); 12 new tests (389 total); full meeting flow browser-verified 14/14 https://claude.ai/code/session_01DFTAg2R8JQKCtW8LPzMgct
MM sliced results to projectionYears — a rule written before D-019 — so extension years (and any setting > the old 20-cap select) were cut from the meeting view and its total could disagree with the Workspace headline. Now all engine years render (hero equals summary.totalTaxSavings), the range label gains "extended to use carryforwards" when an extension exists, the rail select goes to 40 years (and includes any non-listed value set in the Workspace), and the printed page 2 tightens its zoom for long tables — pagination verified at exactly 3 sheets for 10/20/40-year projections. https://claude.ai/code/session_01DFTAg2R8JQKCtW8LPzMgct
Owner twice failed to find the Year-by-Year table and Charts behind the old low-contrast text buttons. Segmented-control styling: filled active pill, hover state, grouped background. https://claude.ai/code/session_01DFTAg2R8JQKCtW8LPzMgct
…faces workspace.css was written against CSS variables that were never defined (--text-primary, --border-color, --input-bg, --section-bg, ...), so both themes silently used the hardcoded light fallbacks - fine in light mode, dark-on-dark text and white islands in dark mode. - index.css :root now defines the missing aliases against the real theme variables (re-resolving automatically in dark), plus --section-bg/--hover-bg dark values in both the [data-theme] and prefers-color-scheme blocks; fixes pre-existing dangling var(--danger)/var(--positive) references too - Scenario Analysis table: dark rules for bull/base/bear/expected columns (the cream "expected" band was invisible in dark) - workspace.css accents -> var(--primary)/var(--success); dark treatment for amber .ws-note callouts - Meeting Mode confirmed untouched (fixed boardroom palette) and enters/exits cleanly from a dark-themed app Every fixed surface re-screenshotted dark + light (light is pixel-equivalent to before); 389/389 tests, build/lint/format green. https://claude.ai/code/session_01DFTAg2R8JQKCtW8LPzMgct
- Pin scenario from the Workspace Actions group via the same usePinnedScenario localStorage slot Classic uses (shared pin across tabs, survives reloads, 4-pin cap honored). Compact "Pinned vs current" strip under the metric strip: Total Savings, Loss Reserve / Income-to-Utilize, Year 1, Net If Liquidated, Final Wealth as pinned -> current with signed deltas; re-pin and unpin. Pinned-side exit metrics derive only from the frozen snapshot so they cannot drift with live inputs. Separate from Meeting Mode's meeting-local pin (D-024) - Split allocation in the rail's Strategy group (expandable, off by default): core/overlay selectors + amounts with derived total line; single strategy/collateral inputs hide per resolveAllocation convention. Total-budget mode is incompatible (solver targets collateralAmount, ignored in split mode) so split forces collateral mode with a note; D-016 conflict warning surfaces in the rail when deleveraging is also on. Narratives use the combined display name; ResultsTable falls back to uniform sub-period breakdown in split mode (Classic parity) - No engine/type/CSV changes - UI wiring onto existing paths only; 8 new tests incl. engine-equivalence for split mode and pin-freeze under input changes (397 total); browser-verified light + dark https://claude.ai/code/session_01DFTAg2R8JQKCtW8LPzMgct
Owner handed off a claude.ai/design bundle (three directions, one IA focused on findability) and delegated the pick: Slate tokens become the light theme and Graphite the dark theme on the existing toggle; Bond is not built. Scope: Workspace tab only; all figures render from the live engine; the single-file distributable stays self-contained. https://claude.ai/code/session_01DFTAg2R8JQKCtW8LPzMgct
…off (D-027)
Implements the claude.ai/design handoff bundle: one reworked
information architecture in two skins driven by the existing theme
toggle - Slate (cool light fintech) as light mode, Graphite (dark
terminal density, IBM Plex Mono numerals) as dark mode. Bond not
built per D-027. Workspace tab only; Classic and Meeting Mode
byte-identical.
Findability spine (the design's target: "all the data I want but
takes too long to find"):
- Context top bar: brand, editable scenario name (localStorage),
live setup chips (filing/state, collateral incl. split/total
modes, strategy, QFAF), and a REAL Cmd/Ctrl+K command palette -
rail groups (keyword-indexed), sub-views, and actions; selecting
a group expands, scrolls, and focuses its first input. Rail
"Find a setting" filter highlights/dims groups
- Collapsible rail groups that show their set values when closed
("MFJ - California - $3.0M income"; "On - 5 yrs - Dynamic");
bodies collapse via CSS so tests and a11y queries keep semantics
- Consolidated flags tray replacing stacked notes: 13 conditional
flags (exit-covered positive, state/conformity/basis/split/QFAF
sizing/NOL-expiry warnings, event/reserve/step-up/gross/delever/
horizon notes) with severity dots, computed peek line, expand on
demand. Disclosure footer and QFAF-treatment draft retained
- Scannable results: accent-barred 4-up metric strip, result cards,
income-required chips with peak emphasis, expandable plain-English
summary (default open), inline rates strip
All figures render from the live engine (mock numbers were
placeholders). Pin strip, split allocation, events editor, exports,
Meeting Mode all functional. Fonts bundled via @fontsource
(dist +232 KB, self-contained). App-level CSS aliases re-pointed at
wx tokens inside .wx so embedded components (ResultsTable, charts)
harmonize without touching their stylesheets.
6 new tests (403 total: palette filter, rail filter, flags
conditionality, scenario name persistence); all 397 pre-existing
tests pass unmodified. Browser-verified in both themes; 24
screenshots against the design boards.
https://claude.ai/code/session_01DFTAg2R8JQKCtW8LPzMgct
Deploying enhanceddirectindexingcalc with
|
| Latest commit: |
934a1f0
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://8f5e07f8.enhanceddirectindexingcalc.pages.dev |
| Branch Preview URL: | https://claude-vibrant-clarke-hjoghi.enhanceddirectindexingcalc.pages.dev |
HouseofTyrell
pushed a commit
that referenced
this pull request
Jun 13, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implements D-027 — the Workspace redesign from the owner's claude.ai/design handoff bundle. The design delivered one reworked information architecture in three skins; per the owner's "pick the best one and build it," this builds the unified token system with Slate (cool light fintech) as light mode and Graphite (dark terminal density) as dark mode, driven by the existing theme toggle. Bond (the serif private-bank outlier, no dark counterpart) was not built. Scope is the Workspace tab only — Classic and Meeting Mode are byte-identical.
The findability spine
The design chat's target was the owner's complaint: "has all the data I want but takes a long time to find what you're looking for." The four mechanisms, all functional (not decorative):
Fidelity & engineering notes
.wx, app-level CSS aliases re-point at the wx tokens so embedded components (ResultsTable, charts, pin strip) harmonize in both themes without touching their stylesheets.Verification
403/403 tests (+6: palette filtering, rail filter, flag conditionality, scenario-name persistence; all 397 pre-existing tests pass unmodified) · build/lint/format green · 24 Playwright screenshots in both themes compared against the design boards · ⌘K jump, group collapse, flags tray, pin, split, and Meeting Mode all exercised live.
https://claude.ai/code/session_01DFTAg2R8JQKCtW8LPzMgct
Generated by Claude Code