20 Commits

Author	SHA1	Message	Date
Guillem Arias Fauste	699b0d59da	feat(ds): extract DS::ProgressRing primitive; migrate goal card (#1899) (#2112) ... * feat(savings): add savings goals Adds a standalone Savings goals feature: a piggy-bank style tracker that lets a family set a target, link one or more Depository accounts as funding sources, and log manual contributions over time. Supersedes #1569 (closed) — same intent, redesigned per reviewer + Discord feedback. What this adds: - New `/savings_goals` sidebar entry (piggy-bank icon) with index, show, state-filtered tabs (all/active/paused/completed/archived), and a 2-step modal stepper for creation (Identity → Review). - Multi-account funding via a `SavingsGoalAccount` join: a goal requires ≥1 linked Depository account (checking/savings/HSA/CD/money-market), and all linked accounts must share the goal's currency. - Tracker balance model: goal balance = SUM(contributions.amount). No auto-flow from account balances. Contributions are pure logical records and don't move money between accounts. - Manual contributions modal scoped to the goal's linked accounts. Initial contributions seeded at creation can't be deleted; manual ones can. - AASM lifecycle: active / paused / completed / archived. Hard-delete only after archive. - Status pills (On track / Behind / Reached / No date) derived from pace vs target_date. - AI Assistant tool `create_savings_goal` lets the sidebar chat create a goal end-to-end from a natural-language prompt; soft errors carry the available-accounts list back to the LLM (mirrors the existing `import_bank_statement` pattern). - Family-scoped throughout (`Current.family`-only access, account family-scoping enforced both in controllers and the AI tool). - Demo data seed wires up 4 sample goals across the Depository accounts. Intentionally out of scope (separate PRs / v1.1): - Auto-fund from budget surplus + Sidekiq cron + budget-show card. - Dashboard "Savings goals" widget. - "Behind pace" projection chart on the detail page. - `evaluate_savings_goal_feasibility` LLM tool (level-setting before create_savings_goal). - Spend-less goals inside Budgets. - Family-member-private goals (deferred investigation). * fix(savings): DS conformance pass on stepper, ring, card, status pill - StatusPill: use functional `text-success` / `text-warning` tokens with matching icon colors and `px-2 py-1`, mirroring `app/views/budget_categories/_budget_category.html.erb:29-43`. - ProgressRing: rework center text to match `_budget_donut.html.erb` (small "Saved" label, `text-3xl font-medium` headline, "of $X" underline). Stroke color now derives from goal.status (yellow when behind, blue on track, green reached, gray for no-date). - GoalCard bar: track height + transition match budget category bar (`h-1.5`, `transition-all duration-500`, `inline-size`). - Index/show layouts: render page header inline (`<h1>` + actions). The default application layout doesn't yield `:page_actions`, so the CTA + kebab menu wouldn't appear when emitted via `content_for`. - Stepper review summary: target the actual form inputs by `name` rather than relying on the `data-target` Stimulus attribute, since `money_field` puts the attribute on the wrapper. Step 1 validation scoped to the step 1 panel. - Demo generator: filter Depository accounts via `where(accountable_type: "Depository")` — Rails delegated_type generates the `depository?` predicate, not a `.depository` scope. * feat(savings): rebuild UI to match Claude Design + adopt shared donut-chart Previous savings goals UI looked nothing like the Claude Design output (see sure-design-context/design/savings-goals/project/goals/*.jsx) and the hand-rolled ring did not match the segmented D3 donut used at app/views/budgets/_budget_donut.html.erb. This rewires the surface end to end. Donut chart: - SavingsGoal#to_donut_segments_json returns the same segment shape as Budget#to_donut_segments_json: filled portion in goal color, unused remainder as `var(--budget-unallocated-fill)`. Visual identity is now the same: segmented arc with cornerRadius and gap, courtesy of the shared `donut-chart` Stimulus controller and D3. - ProgressRingComponent renders a `data-controller="donut-chart"` div with the same default-content/inner-text pattern as `_budget_donut`. Index page (matches GoalsIndex.jsx): - Page header: title + "Save toward what matters." subtitle + "New goal" primary CTA right-aligned. - Summary strip card: total saved / target, overall bar, active goals, on-track ratio, behind count. - State filter rendered as DS::Tabs-style pill nav (`bg-surface-inset p-1 rounded-lg`, white-pill active state). - Cards rebuilt: avatar (44px, rounded-xl, white initial on goal color) + name + secondary line ("N days left · by date" / "No target date" / "Completed" / "Past due"), status pill with leading dot, big $current/$target line + percent, bar in status colour, AccountStack (overlapping initials) + "N accounts" + "to go". Goal detail (matches GoalDetail.jsx): - Header: 64px avatar + h1 name + status pill + "Target $X by date · N days left" subline + Edit (outline) + Add contribution (primary) + kebab (DS::Menu for AASM transitions). - Donut-chart ring card with stats overlay. - 4-col stat row (Avg monthly, Total contributions, Target date, Started) with mono numerals and "Needs $X/mo" / "Above target pace" sub-captions where relevant. - Two-col bottom: contributions list (avatar + account · date · source · green +$amount) and funding accounts breakdown (stacked bar + per-account row with $ and % of saved). New components: Savings::AccountStackComponent (overlapping account initials with ring-2 ring-container). StatusPillComponent now uses a leading colored dot instead of an icon. GoalAvatarComponent radii match Claude Design (rounded-md/lg/xl/2xl) and white initial. Locale: new keys under savings_goals.{index.subtitle, index.summary.*, goal_card.{accounts,days_left,completed,past_due,no_target_date}, show.header.*, show.ring.{of,to_go}, show.stats.*, show.funding_balance, show.of_saved, show.notes}. * feat(savings): match Claude Design — projection chart, target-icon modal, grouped funding accounts Brings the savings goals UI closer to the Claude Design reference shared by the user. Changes: - Sidebar nav label: "Savings goals" → "Savings". - Status pill copy: "Behind" → "Behind pace" (matches Pill component from GoalsCommon.jsx). - Empty state rewritten with a large target icon, "No goals yet" heading, and the descriptive body copy from the design. Goal detail page (matches GoalDetail.jsx): - New "← All goals" back link above the header. - 2-column hero: ring card on the left (320px column), Projection card on the right. - Projection card uses a new D3 Stimulus controller (`savings-goal-projection-chart`) that draws: · saved area + line from goal creation → today (solid, primary) · dashed projection segment from today → target date (yellow when behind, green when on track) · horizontal dashed target line with label · today marker (vertical dashed line + dot) Data shape comes from `SavingsGoal#projection_payload`. - Card subtitle generates a contextual sentence ("At $X/mo you'll fall short. Bump to $Y/mo to hit it on time." / "At your current pace you'll reach this goal around Month YYYY." / "Goal reached. Nice work.") with a strong tag highlighting the actionable figure. - Stat row now shows Linked balance (sum across linked accounts) + "N accounts" sub-caption instead of duplicate "Target date" stat. New goal modal (matches the design images 2 + 3): - DS::Dialog custom header: DS::FilledIcon target glyph + title + step subtitle ("Step 1 of 2 · Goal details" / "Step 2 of 2 · Review & start") that updates as the user advances. - Connected stepper at top of body: numbered circles connected by a bar, step-1 circle flips to ✓ when complete. - Step 1 heading "What are you saving for?" + supporting copy. - Name field paired with a target glyph affordance on its left. - Target amount + Target date in a 2-col grid. - Funding accounts list now grouped by account subtype with uppercase section headers (CHECKING / SAVINGS / HSA / CD / MONEY MARKET / OTHER), each row showing avatar + name + subtype + balance. - Step 2 heading "Looks good?" + Review card (goal target + funding accounts summary + suggested monthly = target/months_remaining), and a disclosure for the optional initial contribution. - Footer: "Cancel" left text-button (closes modal) / "Back" left text when on step 2; "Continue →" or "Create goal →" right arrow button. Demo generator: Depository accounts now set `subtype` ("checking" / "savings") on the accountable so they group correctly in the modal. Tests: all green, 35 runs in the savings suite, 92 assertions. * feat(savings): rebuild index to match Claude Design - Page header: title "Savings" + "Your savings accounts and the goals you're working toward." Removed the top-right New goal button (moves into the Goals section). - Hero card: "Total in savings" with sum-of-savings-subtype balance, 30-day delta vs last 30 days (Family#savings_balance_30d_delta), 3-stat sub-row (Accounts / Active goals / Saved toward goals), and a D3 sparkline area chart on the right (new `savings-sparkline` Stimulus controller, sourced from Family#savings_balance_series). - Accounts section: lists Depository accounts with subtype = "savings" as cards (blue avatar, name, subtype, balance, "Funds N goals"). New Savings::AccountCardComponent. - Goals section header: "Goals" + "Save toward what matters." + "New goal" button right-aligned to the section (not the page header). - Removed state-filter pill nav. Active goals render in the main grid; Completed goals get a "Completed · N" divider w/ check-circle icon and their own grid below. - Goal card layout reworked: horizontal bar replaced with a 64px donut ring on the right side of the card header (ring colour tracks goal.status — yellow=behind, primary=on-track, green=reached). Pill is inline with the goal name. - Status pill copy: "Behind pace" → "Behind". - Filter bar (copied from settings/providers): search input + status chips (All / On track / Behind / No date). Hidden when ≤ 6 active goals. Powered by `savings-goals-filter` Stimulus controller — toggles `.hidden` on cards by goal name + status. - Family#savings_subtype_accounts, total_savings_balance, savings_balance_series, savings_balance_30d_delta helpers; controller computes hero payload + account-goal counts for the cards. * fix(savings): refine hero spacing, goal/account card padding, sparkline negative range - Sparkline (`savings-sparkline` controller): dropped the `Math.max(0, yMin)` clamp on the y-axis domain so negative balances (or any series that dips into negative territory) render fully instead of being cropped off the canvas. - Hero card: padding `p-6` → `p-7`, column ratio `[minmax(0,1fr)_minmax(0,1.6fr)]` so the chart breathes, min height bumped to 220px, sparkline container `h-full min-h-[200px]` so it fills the card vertically. Stats row now sits at the bottom of the text column via `mt-auto pt-6`; labels promoted to `text-xs`, values to `text-lg`. - Section vertical rhythm: outer `space-y-6` → `space-y-8`. - Goal card: padding `p-[18px]` → `p-6`. Internal gap from header row to amount line `mt-3.5` → `mt-5`. Account-row gap `mt-3` → `mt-4`. - Account card: padding `p-5` → `p-6`. - Status pill "Behind" dot: `bg-yellow-500` → `bg-yellow-600` for a warmer/ambery tone matching the Claude Design reference. - Goal card donut "behind" stroke: `var(--color-yellow-500)` → `var(--color-yellow-600)` to match the pill. * fix(savings): add bottom padding so last card clears the mobile fixed bottom-nav * feat(savings): add "ONGOING · N" + "COMPLETED · N" section dividers Same pattern as the bank-providers page's `AVAILABLE · 3` header (see `app/views/settings/providers/_search_filters.html.erb` references): small uppercase tracking-wide secondary label, separator dot, tabular count. Replaces the prior "Completed · 1" inline label with a more consistent treatment and adds an "Ongoing · N" header above the active goals grid. Name choice: "Ongoing" rather than "Active" because the grid includes both `active` and `paused` AASM states; "ongoing" reads as still-in- progress for both. Parallel to the existing "Completed" sibling. * fix(savings): bump space between ONGOING/COMPLETED header and goal grid * fix(savings): rebalance spacing — moves the gap onto the grid, not the header Previous attempt put `mb-5` on the section header so the goal grid sat ~20px below it, but that also pushed the "No goals match" empty card down because it shares the same header. Margin collapse meant the empty card's own `mt-3` was getting added to the new big header `mb`. Rework: header back to `mb-2.5`, grid gets `mt-3` of its own. Empty card keeps its `mt-3`. Both children collapse to ~12px below the header now, which matches the breathing room the empty card had before this thread of edits. * fix(savings_goals): equalize ONGOING/COMPLETED header spacing across cards and empty state Move section gap from per-child mt-3 to a single mb-4 on the header, and toggle the grid wrapper hidden when no cards are visible. The previous markup gave inconsistent ONGOING-tag-to-content distance because the empty card sat below a 0-height grid, stacking margins differently than the cards layout. * fix(savings_goals): update ONGOING count when filtering by status or search The "ONGOING · N" badge was server-rendered with @active_goals.size and never re-synced when the Stimulus filter hid cards. Add a count target and update it alongside the existing empty/grid toggles. * feat(savings_goals): replace hero card with KPI strip + differentiate empty states P1: drop the sparkline + the single mixed hero. Hero became 3 separate KPI cards (Contributed last 30d, Needs this month, Goals on track), matching the Transactions page pattern. Each KPI answers a question the user opens the page asking — saving rate, this-month action, overall health. P3: empty state copy + CTA now reflect the reason it is empty. Search returns 0 → "No goals match X" + Clear search. Chip set to non-all → "No goals match this filter" + Show all. Both → both reasons + both buttons. Drop: total_savings_balance, savings_balance_series, savings_balance_30d_delta on Family (no other consumers). Add: Family#contribution_velocity(range:). * feat(savings_goals): status pill icons + paused variant, attention-first sort, paused chip, rename "No date" to "Open-ended" P4: status pills now carry an icon alongside the colored tint (circle-check / triangle-alert / star / infinity / pause), so color is no longer the sole signal. Drop the redundant dot. P4: default sort on the active goals list becomes attention-first — behind → on_track → no_target_date → paused, alphabetical within bucket. The user opens the page and lands on the goals that need them. P5: add a Paused filter chip + render paused goal cards with opacity-75 so they read as inactive at a glance. Rename "No date" chip to "Open-ended" — clearer to non-jargon readers. * feat(savings_goals): goal card pace + status-driven footer Each card now answers "what's my next move" without clicking into the detail page. Under the amount/target row, a pace line shows actual avg contributions vs the monthly target. The footer (previously "$X left") switches by status: - behind → "Save $Y/mo to catch up" - on_track → "Last contribution Nd ago" (or "today" / "No contributions yet") - reached / completed → "Goal reached" - no_target_date → "No deadline set" - paused → "Paused" Add SavingsGoal#last_contribution_at and #last_contribution_days_ago. Both these methods and average_monthly_contribution now respect a loaded :savings_contributions association so the index page doesn't N+1. Controller eager-loads :savings_contributions + :linked_accounts. * feat(savings_goals): drop Accounts section from index The Accounts grid duplicated the sidebar account list. Removing it gives the Goals section more breathing room and the page a tighter narrative: header → KPIs → Goals. Delete Savings::AccountCardComponent, Family#savings_subtype_accounts, the @savings_accounts / @account_goal_counts controller refs, and the related locale keys. Sidebar still shows the savings-subtype Depository accounts under "Cash" — no information is lost. * feat(savings_goals/new): drop required asterisks, hide currency, collapse notes, clean footer P1 of modal refactor — visual fidelity baseline against the Claude Design reference and refactoring-ui rules. Drop required: true on name + target_amount (suppresses both the red `*` indicator and the browser-default HTML5 validation tooltip). Client-side validation moves into the Stimulus stepper in a follow-up commit. Pass hide_currency: true on the money_field so single-currency families don't see a redundant inline currency dropdown. Wrap the Notes textarea in a <details> disclosure ("Add notes (optional)" summary) so step 1 isn't padded with rarely-used fields. Drop the footer top border-subdued divider so the action row floats against the dialog's existing padding boundary. Drop the view-layer SavingsGoal::COLORS.sample fallback on hidden color field — the controller already seeds @savings_goal.color. * feat(savings_goals/new): live previewable name avatar + ghost cancel + circular header icon Replace the big square DS::FilledIcon next to the name input with a small Savings::GoalAvatarComponent that previews the goal's avatar (seeded color + first character of the typed name, updates live via new stepper#nameChanged action). Switch the modal header's target avatar from FilledIcon(size: lg, rounded: false) → (size: md, rounded: true) — matches the goal-avatar shape used elsewhere on the page. Replace the hand-rolled <button> for Cancel/Back with DS::Button variant: "ghost". Stepper now drills into the button's inner span to swap the label, same pattern already used for the Continue/Create button on the right. Drop the now-unused footerLeftLabel target. * feat(savings_goals/new): deterministic account avatar color via name hash Replace the hardcoded var(--color-blue-500) on every funding-account row's avatar with a deterministic pick from Category::COLORS based on the account name's hash. Rows now read at a glance instead of melting into one blue column. * feat(savings_goals/new): inline per-field error state in stepper Drop the top-of-form server-error banner (kept only when model.errors on :base, which is rare) and stop relying on input.reportValidity() browser-default tooltips. Stepper validates step 1 manually when Continue is clicked: - name empty → red ring on input + "Please give your goal a name." below - target_amount ≤ 0 → red ring + "Set a target amount greater than zero." - no funding account checked → "Select at least one funding account." Each error clears as soon as the user fixes the field — typing in the name field clears the name error, entering an amount > 0 clears the amount error, checking any account clears the accounts error. Drop the now-unused flashLinkedAccountsRequired() shake; replaced by the per-field error pattern. * feat(savings_goals/new): checkbox styling, visible stepper, DS::Disclosure for notes, drop redundant cancel Use Sure's .checkbox checkbox--light classes on the funding-account check_box_tag — matches transactions / entries / settings pages. Stepper line: 2px tall bg-secondary in resting state (was 1px bg-subdued which disappeared in dark mode). Step 2 inactive circle: border-secondary outline instead of bg-container-inset fill — visible in both themes. Notes collapse switches from raw <details> to DS::Disclosure for consistency with the rest of Sure's DS. Drop the footer Cancel button — the close X in the modal header already handles that, and double cancel was redundant. The footer-left slot now only renders Back (with arrow-left icon) and only on step 2. * fix(savings_goals): status pill icons inherit pill's semantic color Pass color: "current" to the icon helper so triangle-alert / circle-check / star / infinity / pause render in the same color as the pill's text (text-success / text-warning / text-secondary). The icon helper defaults to text-secondary, which made all icons grey regardless of pill variant. * fix(savings_goals/new): name field uses .form-field wrapper for floating label Drop the outer <label>Name</label> heading + label: false on the text_field, and pass label: t(...) + container_class: "flex-1" so styled_form_builder wraps the name input in Sure's standard .form-field component. Label now sits inside the input box, matching the new transaction modal pattern (and every other styled_form_with form across Sure). The avatar still sits as a sibling outside the box, flex-aligned center. * fix(savings_goals/new): stepper line uses border-secondary token bg-secondary is not a registered Sure utility, so the previous h-0.5 bg-secondary div rendered with no background — the line was just a transparent slot, barely visible in either theme. Replace with border-t-2 border-secondary on the connector div, and toggle border-inverse / border-secondary on step transition. Both classes are real Sure tokens with proper light/dark variants (alpha-black-200 / alpha-white-300 for border-secondary). * fix(savings_goals/new): notes textarea uses .form-field wrapper Passing label: false to f.text_area stripped the .form-field container, leaving a naked textarea with no border or visible label inside the DS::Disclosure. Pass a real label ("Notes (optional)") so styled_form_with wraps it like every other textarea in Sure (transactions/_form.html.erb, trades/show.html.erb, etc.). Bump rows to 3. * fix(savings_goals/new): step 2 back button inline + form-field wrappers on initial-contribution inputs DS::Button treats "hidden" as a display override class — adding class: "hidden" stripped the base inline-flex display, so when Stimulus later removed the hidden class the icon and text stacked vertically. Wrap the Back button in a hidden <div> and toggle the wrapper instead; the button keeps its inline-flex base. The Amount + From-account inputs in step 2 used label_tag + number_field_tag / select_tag directly with no .form-field wrapper, so they rendered as bare inputs (same issue Name had in step 1). Wrap each in .form-field > .form-field__body with form-field__label and form-field__input classes — matches the styled_form_with pattern used by Target amount / Target date in step 1. * feat(savings_goals/new): step 2 initial-contribution amount uses money_field Add virtual attr_accessors for initial_contribution_amount and initial_contribution_account_id on SavingsGoal so the form builder can bind to them without the model needing real columns. Replace the raw number_field_tag with f.money_field hide_currency: true so the field shows the currency symbol prefix and step-aware precision, matching the Target amount field in step 1. * feat(savings_goals/show): cleanup — drop misleading stats, hide add-contrib when reached, last-contribution recency D1 — Drop the "Linked balance" stat. It summed the linked accounts' total balances (e.g. $204K) rather than the amount saved toward the goal ($1K), so it overstated progress by ~200x. Replace with a "Target pace" card showing required $/mo. D2 — Drop the redundant "← All goals" link. The breadcrumb nav above the header already shows Home › Savings Goals. D3 — Hide the Add-contribution button on reached / completed goals. Logically you don't keep contributing after the goal is done. D5 — Add last-contribution recency to the header sub ("Last contribution 3d ago"), matching the goal card footer pattern from the index refactor. D11 — Stat row now 3 cards instead of 4 (avg monthly, total contributions, target pace). Drop the "Started" card — low-signal for new users. * feat(savings_goals/show): catch-up callout for behind goals For behind (non-paused) goals with a target_date, render a DS::Alert warning under the header surfacing the actionable insight from the index card: "Save $X/mo to catch up · Bump your monthly contribution to stay on track for <date> · [+ Add $X]". The CTA prefills the contribution flow with the target monthly amount in the button label so the user sees exactly what to commit to. Mirrors the goal-card footer pattern shipped during the index refactor — the detail page now carries the pace narrative forward instead of hiding it inside the projection paragraph. * feat(savings_goals/show): status-specific hero card + paused/archived banners D6 — Paused goals render a top info banner ("This goal is paused" + [Resume goal]) before the hero. Archived goals get the same treatment with a Restore CTA when applicable. D8 — No-target-date goals replace the empty projection chart with a focused prompt card: calendar-plus icon, "Add a target date" heading, short copy, and a "Set target date" CTA that opens the edit modal. Stops wasting the right half of the hero on an unrenderable chart. D9 — Reached / completed goals replace the projection chart with a celebration card: party-popper green icon, "Goal reached. Nice work." heading, target-hit confirmation copy, and an "Archive goal" CTA when the state machine allows it. The original projection chart still renders for behind / on_track goals with a real target_date — that's the only case where it adds value. * feat(savings_goals/show): combo monthly-pace stat card D7 — Merge the separate Avg-monthly and Target-pace cards into one wider "Monthly pace" card spanning 2/3 of the stat row. Shows actual $/mo + target $/mo inline, with a delta line below: - behind → "Behind by $X/mo" (text-warning) - on/ahead → "Above target pace" (text-success) - no target_date → "No required pace" Total contributions stays as a separate, smaller card at 1/3 width. The action pyramid finally points at the actionable stat — pace is visually primary, raw count secondary. * feat(savings_goals/show): scrollable contributions list + hide pace card for reached goals D10 — Drop the silent .limit(50) on the contributions query and put the list in a max-h-[480px] scrollable container. Goals with many contributions now show all of them without truncation, but the page stays compact via the inner scroll. Polish — reached / completed goals no longer render the combo monthly- pace card. After the goal is hit, comparing actual vs required pace is moot (and target $0/mo · Above target pace was awkward filler). Only the Total contributions card remains in the stat row. D12 (clickable contribution rows) deferred — adding a dedicated contribution detail/edit route adds enough scope to warrant its own ticket. The per-row delete X already covers the only mutation people need from this view. * fix(savings_goals/show): chart contrast, breadcrumbs, contributions list polish Chart — Sure's "text-X" / "border-X" tokens are Tailwind utility classes, not CSS custom properties, so var(--text-secondary) etc. resolved to empty inside SVG attributes. Read data-theme on draw and pass real hex colors (textPrimary, textSecondary, borderSubdued, containerBg) into d3 fills/strokes. "Target · $X" label and axis tick labels now have proper contrast in both themes. Breadcrumbs — set @breadcrumbs in the show action so the layout renders Home › Savings › <goal name> with the middle entry clickable back to the index. Matches the convention used by imports / reports / family exports. Contributions list — drop the broken divide-y divide-subdued (Tailwind divide- utilities don't pick up Sure's semantic border tokens). Switch to space-y-3 rows matching the funding-accounts breakdown component. Drop the border-b separator under the heading; the card now reads as one continuous panel. Move the delete X to hover-revealed and reserve an inert spacer for non-manual rows so the right column stays aligned. * feat(savings_goals): demo variety, breadcrumb naming, ring token, list pattern, header split, tone down behind noise Demo — extend generate_savings_goals! with three more goals to exercise status-specific UX: Wedding fund (on_track w/ 6 months of contributions matching required pace), Sabbatical (paused), Old laptop fund (archived). House downpayment gains 12 contributions so the scrollable list has real density. Total now 7 demo goals covering behind / on_track / no_date / paused / archived / reached. Breadcrumbs — set @breadcrumbs on index too (it was relying on the Rails-derived "Savings goals" label). Both views now read "Home → Savings → ..." consistently, matching the sidebar nav text and H1. Ring token — goal-card ring stroke switched from var(--color-gray-200) (a hard light color identical in both themes) to var(--budget-unallocated-fill) which is gray-50 light / gray-700 dark, matching the detail page's progress ring. Contributions list — replace the inline hover-revealed delete-X with DS::Menu kebab, matching tags/_tag.html.erb and categories/_category. Each row also gets hover:bg-surface-hover with a px-3 -mx-3 negative margin to extend the hover area across the card padding. Non-manual contributions render a 9x9 spacer so the right column stays aligned. Header sub split — drop the long "·" chain into two lines: primary fact (target / days left) in text-secondary, recency note in text-subdued underneath. Less wall-of-text. Behind noise — pill, ring, catch-up alert and projection chart already signal "behind". The Monthly-pace combo card's "Behind by $X/mo" delta no longer renders in text-warning — it switches to text-subdued so the warning palette doesn't repeat across the page. The catch-up alert stays loud because it's the primary action; the rest stays informational. CustomConfirm wired with destructive: true on the contribution delete so the confirm button gets the outline-destructive treatment. * fix(savings_goals): ring on_track color, contributions horizontal scroll, modal restored on back, chart saved fill Ring on on_track / no_target_date goal cards rendered with no progress arc — ring_color returned var(--text-primary) / var(--text-subdued) which aren't real CSS custom properties (Sure's text tokens are Tailwind utilities). Switch to var(--color-green-500) / var(--color-gray-400) which ARE CSS vars from the Tailwind palette and resolve at SVG fill time. Contributions list had a horizontal scrollbar because the rows used -mx-3 px-3 to extend the hover background, which pushed content beyond the card padding. Drop the negative-margin trick and add overflow-x-hidden to the scroll container. Rows still hover-highlight inside the card bounds. Modal cache restoration — Turbo cached pages with open <dialog> elements inside <turbo-frame id="modal">. After dismissing the new-goal modal and navigating to a goal detail page, browser back restored the cached index page WITH the dialog still in the modal frame; the dialog's Stimulus controller then ran auto-open and reopened it. Now the dialog close handler empties the parent modal turbo-frame so the cache snapshot is clean. Chart saved-fill — bump area gradient stop-opacity 0.10 → 0.22 so the contribution history is more visible against the dark canvas. Chart was rendering correctly but the white-at-10%-opacity gradient was too faint to read on top of the dashed projection. * fix(savings_goals/show): chart axis includes backdated contributions, legend uses real colors projection_payload's start_date was created_at, but demo seeds (and manual imports) can have contributions backdated before created_at — those points were getting clipped/pushed left of the chart's x-domain and the saved-series line couldn't render. Use min(created_at, earliest contribution date) so the axis spans the full history. Legend "saved" line stroke was var(--text-primary) which doesn't resolve (Tailwind utility, not CSS var) → invisible swatch. Wrap in text-primary span + stroke="currentColor". Legend "projection" line was hardcoded yellow — chart paints green for on_track goals → mismatch. Pick legend color based on goal status so it matches what the chart actually draws. * fix(savings_goals): neutral ring percent, chart start vertical-line, contribution select wrapper, deterministic account colors Ring percentage no longer takes the warning yellow tint when behind — the colored ring stroke + status pill + catch-up alert already signal the state, doubling it on the percent number was noise. Reached stays green (celebratory), everything else uses text-primary (white/dark). Chart vertical line at the left edge was the (start_date, $0) point the controller prepended to the saved series. When start_date equals the first contribution date (now common after the earlier earliest- contribution fix), this drew a vertical jump from $0 to first contribution at x=start. Skip the prepend when there's no temporal gap so the line starts at the first real point. Add Contribution modal — wrap the source-account select in the styled form-field via f.select instead of label_tag + bare select_tag. Match the rest of Sure's form controls. Also pass hide_currency on the amount field so single-currency families don't see a redundant USD dropdown. Account avatar colors — replace Ruby String#hash (randomized per process by Ruby for DoS protection) with a deterministic MD5-based pick from Savings::GoalAvatarComponent::PALETTE. Same account name now resolves to the same color across processes and across components. Apply via a new Savings::GoalAvatarComponent.color_for helper used by both the form stepper account list and the goal-card AccountStackComponent (which was hardcoding blue-500 for every avatar in the stack, hence Chase + Ally looking identical on the wedding card). * fix(savings_goals/show): contributions list + funding accounts breakdown use per-account deterministic color Both used goal.color for every account avatar, so every linked account ended up the same color as the goal. Sure's convention elsewhere (accounts/_logo.html.erb) is accountable.color (type color: Depository → purple) — but savings goals only link Depository accounts, so that would still collapse to one color. Reuse the deterministic Savings::GoalAvatarComponent.color_for(name) helper from the index card stack instead. Same account always resolves to the same color across processes, and multiple accounts on the same goal read as distinct. Funding-accounts breakdown bar at the top now also colors each segment by account so the proportions are visibly typed (not a single goal- color block). * fix(savings_goals): projection chart redraws when container resizes (Turbo navigation) After submitting a new contribution, Turbo's redirect-replace stream swaps the page; the chart's data-controller reconnects but the container's clientWidth can momentarily be 0 (parent grid hasn't laid out yet). The early-bail in _draw left the SVG empty and nothing triggered another draw, so the chart stayed blank. Add a ResizeObserver to the controller. The observer fires once the container settles into a real size and re-runs _draw, which now paints the chart correctly after the post-submit navigation. * perf(savings_goals/show): preload + memoize cut show from 17 to 5 queries - set_savings_goal: with_current_balance + includes(savings_contributions: :account, linked_accounts: []) so contributions / accounts / current balance don't re-query inside helpers and view partials - SavingsGoal#status + #average_monthly_contribution: defined?(@ivar) memoization so the 5+ callsites per show (header banner, projection_summary, donut, goal-card pace, stats_for) don't recompute the exists?/MIN/SUM triplet each time - SavingsGoal#projection_payload: sort loaded contributions in Ruby instead of running a fresh ORDER BY - SavingsGoalsController#show: replace .chronological re-query with in-memory sort over the preloaded association - funding_breakdown_for: group_by + transform_values off the loaded collection instead of an extra GROUP BY SQL - stats_for: contributions_count uses .size to read the loaded cache instead of issuing COUNT(*) * a11y(savings_goals): ARIA semantics + unique IDs + h2 hierarchy - Projection chart SVG: role=img + <title> + <desc> wired through new ariaLabelValue / ariaDescriptionValue Stimulus values. Show.html.erb passes a localized chart label and a strip_tags'd projection summary. - Progress ring container: role=progressbar + aria-valuenow/min/max + aria-label so screen readers announce "Goal 27% complete. $13,250 of $50,000 saved." instead of four disjoint spans. - Funding-account checkboxes (stepper step 1): explicit per-account id ("savings_goal_account_ids_<id>") so each row has a unique DOM id; duplicate-id HTML violation gone. - show.html.erb: <h3> -> <h2> at six section headings (celebration, no-target-date, projection, contributions, funding accounts, notes) so the heading hierarchy is h1 -> h2, not h1 -> h3. - goal_avatar + account_stack components: aria-hidden=true on the decorative wrappers; the textual goal/account name beside them is always read separately so the SR no longer prefixes every entry with the avatar initial. - New locale keys: savings_goals.show.ring.aria_label and savings_goals.show.projection.aria_label. * fix(savings_goals/new): trap Enter on step 1; add funding-accounts hint - Pressing Enter inside a step-1 input (Name, Target amount, Target date) used to fire the form-implicit-submission against the sr-only submit button, jumping straight to POST /savings_goals and skipping step 2 entirely (no initial contribution, no review). - New blockEnter action on the form re-routes Enter to next() when currentStep === 1, mirroring the Continue button. Notes textarea is exempt so newlines work. - Add an inline hint under the funding-accounts label so users know up front what the field controls; previously the only feedback was a tiny "must pick one" error after Continue. * feat(savings_goals/chart): theme-follow palette, axis format, Today + ETA labels - MutationObserver on <html>[data-theme] re-runs _draw() when the user toggles theme so the chart's hex-resolved-at-draw-time colors follow the surrounding dark/light card surface (previously stuck on initial palette until a full page reload). - Axis tick format: "%b %y" → "%b '%y" (Jan '26) to disambiguate from a day-of-month; tick divisor 110 → 80 so 375-wide mobile gets enough ticks; post-process to drop adjacent equal labels for short windows. - Today vertical line: small "Today" label above it on widths >= 320. - Projection segment: end dot in the projection color + a short-format label ("$42K" or "Short $7.9K"). Labels suppressed at < 320 width to avoid colliding with the Target line label. - New _fmtMoneyShort helper: K/M shorthand. Plain prefix; full i18n / Intl.NumberFormat tracked as a long-term follow-up. * chore(savings_goals/stepper): use Number.parseFloat / Number.NaN per Biome biome lint --write picked these up while auditing the chart changes. Pure rename, no behaviour change. * fix(savings_goals/show): dedupe ring labels, DS::Button banners, status-pill contrast - progress_ring_component: drop the in-ring "$saved / of $target" lines. The same money pair already renders directly below the ring in show.html.erb (now the single source). Inside the ring keeps only "Saved" + percent. - show.html.erb: replace 3 hand-rolled button_to CTAs (Paused banner "Resume goal", Archived banner "Restore goal", celebration card "Archive goal") with DS::Button so focus/hover/disabled match the rest of the app. variant: primary/outline, size: sm, method: :patch. - status_pill_component: swap text-success / text-warning / text-secondary to text-green-700 / text-yellow-700 / text-gray-700 so all 5 light-mode pill variants pass WCAG 4.5:1. Local override pending the upstream DS token fix tracked at we-promise/sure#1736. * fix(savings_goals/empty_state): pass return_to so user lands back on /savings_goals after adding an account The "Add an account" CTA on the no-depository-accounts empty state now appends ?return_to=/savings_goals. StoreLocation already stashes the param into session via the global before_action; the consuming side (subtype #create actions) honouring it is tracked at we-promise/sure#1766. * fix(savings_goals): use display_status for inactive goals; hide pace + projection - SavingsGoal#display_status returns :archived / :paused before falling through to the visualization status. Memoized like #status. The plain #status method keeps its meaning (visualization vs. target/pace) so callers that genuinely want "is this on track" — KPI sort, goal-card ring color, projection_payload — keep working unchanged. - Savings::StatusPillComponent: status_key uses display_status; new :archived variant (bg-surface-inset / text-gray-700 / archive icon). Previously an archived goal showed "Behind" on the detail page while the archived banner said the goal was archived — conflicting signal. - show.html.erb: paused/archived goals render a static recap card (current saved vs target) instead of the projection chart. Pace stat (avg vs required monthly) is also hidden — extrapolating "Behind by $X/mo" against a goal that isn't accepting contributions is misleading. - New locale keys: savings_goals.status.archived, savings_goals.show.inactive.{heading_paused, heading_archived, body}. - Tests cover display_status for archived / paused / active goals. * fix(savings_goals/show): stack header on mobile so long names + actions don't collide - header: flex-col on <sm (stacks title block + action group), flex-row from sm up. Action group keeps its row on desktop, wraps below the title block on phones. - Title row: flex-wrap so the status pill drops to a second line on narrow widths instead of squeezing the h1. - h1: drop truncate, use break-words + min-w-0 inside the flex chain so long names like "Investment property downpayment" wrap legibly instead of clipping to "House …" on 375px. - Action group: flex-wrap + sm:shrink-0 keeps Edit / Add contribution / kebab readable when they have to share a line with the title block at the sm breakpoint. * fix(savings_goals/show): drop row hover so the kebab's own hover registers Both the row and the kebab carried hover backgrounds (bg-surface-hover on the row, bg-container-inset-hover on the icon button). The two are near-identical shades, so the button's hover state was visually invisible on top of the row's. Removing the row hover lets the kebab be the sole affordance. * feat(savings_goals/index): collapsed Archived section + archived-aware card - Controller: @archived_goals exposes state=archived rows already pulled by the all_goals load. No extra query (sliced from the existing array). - Index template: <details> disclosure under "Completed" so archived goals are reachable from the list without cluttering the active / completed sections. Collapsed by default. - GoalCardComponent: uses display_status for the data attribute (so the card on the index reads as Archived instead of Behind), opacity-75 applies to archived too, footer_line short-circuits to "Archived" and pace_line returns nil. Matches the show-page archived semantics shipped earlier. - Locale: new savings_goals.index.archived_section.heading and savings_goals.goal_card.footer_archived. * refactor: rename Savings Goals feature to Goals User-facing rename + structural rename. Feature is now called just "Goals" everywhere — page title, sidebar nav, modal headings, flash messages, AI assistant tool. Code identifiers follow: - Models: SavingsGoal → Goal, SavingsContribution → GoalContribution, SavingsGoalAccount → GoalAccount. - Tables: savings_goals → goals, savings_contributions → goal_contributions, savings_goal_accounts → goal_accounts. FK columns savings_goal_id → goal_id. New migration db/migrate/20260511100003_rename_savings_to_goals.rb uses rename_table + rename_column; PG handles index renaming and FK redirection automatically. - Controllers: SavingsGoalsController → GoalsController, SavingsContributionsController → GoalContributionsController. - Routes: /savings_goals → /goals, nested /goals/:id/contributions (resource name shifts; old route name aliases dropped). - ViewComponent namespace: Savings::* → Goals::*. Component class names drop their redundant "Goal" prefix where the namespace already carries it: Savings::GoalCardComponent → Goals::CardComponent, Savings::GoalAvatarComponent → Goals::AvatarComponent. Others keep their names (Goals::ProgressRingComponent, Goals::StatusPillComponent, Goals::AccountStackComponent, Goals::FundingAccountsBreakdownComponent). - Stimulus controllers: savings_goal_* → goal_*, savings_goals_filter → goals_filter. Stimulus identifiers in data-controller / data-* attributes follow. - Locale keys: savings_goals: → goals: (top level), savings_contributions: → goal_contributions: (top level). All t() callers updated. - AI assistant tool: Assistant::Function::CreateSavingsGoal → Assistant::Function::CreateGoal, tool name "create_savings_goal" → "create_goal", description / response text updated. - Sidebar nav label "Savings" → "Goals". Goals/show + index page title "Savings" → "Goals". Empty goals_section heading/subtitle dropped (duplicated the page title post-rename). Original migrations create_savings_goals / create_savings_goal_accounts / create_savings_contributions remain untouched so historical replay still works; the rename migration runs on top. * perf+ux(goals): grouped state-count + friendly 404 for stale/cross-family deep links - index: STATE_FILTERS count loop replaced with single Current.family.goals.group(:state).count + per-state lookup. 5 SQL queries -> 1. - GoalsController + GoalContributionsController: rescue_from ActiveRecord::RecordNotFound -> redirect_to goals_path with a flash. Affects stale deep links AND cross-family access (previously bare 404 -> Chrome error page). Test for cross-family access updated to assert the redirect + flash key. - New locale key goals.errors.not_found. * ux(goals): unify "Open" for no-target-date status across all surfaces One status, four phrasings before this commit: - status pill: "No date" - filter chip: "Open-ended" - goal-card secondary line: "No target date" - goal-card footer: "No deadline set" Plus KPI strip sub-count: "open-ended". Pick "Open" everywhere so the status reads identically wherever it surfaces. * ux(goals/show): catch-up consolidation + confirm dialogs on archive / mark complete A — Catch-up math triple-encoding. The catch-up amount (e.g. $1,531/mo) was rendered verbatim in three places: the banner title, the projection card subtitle, and the pace stat ("target $X/mo"). Only new information anywhere was the buried "Behind by $Y/mo" delta in pace-card subtext. - Banner body now carries the delta: "...currently $Y/mo behind." - Projection sentence drops the "Bump to %{required}/mo" restatement; reduces to "At %{current}/mo you'll miss your target date." Chart aria-description benefits from the simpler phrasing too. - Pace stat drops the "· target $X/mo" sub-line. Pair becomes "$avg/mo" + "Behind by $delta/mo" — same delta now in the banner, surfaced twice intentionally (alert vs at-a-glance stat). K — Destructive transition confirms. Pause / Resume stay no-confirm (recoverable). Mark complete (irreversible via UI; no may_uncomplete? event exists) and Archive (goal disappears from active list) now wear CustomConfirm. New locale keys: goals.show.confirm_{complete,archive}_ {title,body,cta}. Locale catch_up body strings now interpolate %{delta} alongside %{date}; projection.behind drops %{required}. Controller#projection_summary still passes both keys — extras are ignored by I18n. * a11y(goals/card): scope link accessible name to title + status summary Whole card was wrapped in <%= link_to ... %>, so screen readers concatenated every nested text node into one accessible name (~60 words on a typical card: avatar initial + name + status pill + percent + balance + target + pace + accounts + footer). - Outer wrapper now <div> carrying the filter-target + goal-name + goal-status data attrs. - Inner <a> wraps only the goal name. aria-label = "<name>, <status>, <percent>% of <target>" — concise SR sentence. - `before:absolute before:inset-0` makes the inner link's hit area span the whole card so sighted users keep the existing click affordance. - Ring SVG + percent overlay marked aria-hidden (decorative — same info already in the aria-label). - New locale key goals.goal_card.aria_progress. * feat(goal_contributions/new): live impact preview below amount field Add-contribution modal previously offered zero feedback on what the typed amount would do to goal progress. Now renders "Currently X% saved (Y of Z)." at rest and updates on each keystroke to "Will bring you to X% saved (Y of Z)." or "Will reach your Z target." when the contribution would close the gap. - New goal_contribution_preview_controller.js consumes current balance + target + currency + three localized template strings as Stimulus values. Intl.NumberFormat for currency formatting (locale-correct out of the box; fallback to currencyValue prefix on environments that don't support it). - ERB form-level data-controller wires the values; amount input uses amount_data: to thread the Stimulus target / action through the money_field helper. - Locale: goal_contributions.new.preview_{zero,nonzero,reached} with {percent}, {current}, {newTotal}, {target} placeholders. * feat(goals/edit): funding-accounts editor in the edit modal Previously a user who linked the wrong account at creation had to delete + recreate the goal. Now the edit modal carries the same funding-accounts checkbox group as Step 1 of the stepper, pre-checked with the goal's current links. - GoalsController#edit loads @linkable_accounts + @currently_linked_account_ids. - #update accepts account_ids; when supplied, runs the create / update inside a Goal.transaction and syncs linked accounts via sync_linked_accounts! (set-diff: destroy_all unselected goal_accounts, create the new ones). Validates at least one account before touching goal_accounts so the user gets a clean re-render. - Removing an account preserves the goal's existing contributions — GoalContribution#account_must_be_linked_to_goal only fires on save, so historical rows stay valid. - _form_edit partial accepts new locals; edit.html.erb threads them through. - 3 new controller tests: identity-only patch leaves links intact; account_ids patch replaces the link set; empty account_ids re-renders with error. * fix(goal_contributions/preview): rename templateNonZero -> templateNonzero so Stimulus matches the data attribute Stimulus converts the JS value name templateNonZero to a kebab-cased attribute by splitting on each capital letter, giving data-...-template-non-zero-value. Rails' dataset helper converts the Ruby key :goal_contribution_preview_template_nonzero_value to data-...-template-nonzero-value (no hyphen between non and zero). Result: the Stimulus controller resolved templateNonzeroValue to "" and the preview pane went blank as soon as the user typed an amount. Renaming the JS value to templateNonzero closes the conversion gap. Verified live via Playwright: at $500 the preview reads "Will bring you to 28% saved ($13,750 of $50,000)."; at $40,000 it flips to "Will reach your $50,000 target." * feat(goals/chart): y-axis labels + horizontal gridlines Chart had no value anchor on the y-axis; users had to read the target line label to know what amount the saved line represented. Add 3 right-aligned y-ticks ($0, $25K, $50K-style K/M shorthand) plus faint borderSubdued gridlines at the same y values. Left margin widens to 44 when room allows. Mobile (<320px chart inner-width) keeps the original tight 16px left margin and skips the y-axis entirely so the short-window readout stays uncluttered. Verified live: desktop reads $0/$20K/$40K + Target $50,000; 375px viewport drops the y-axis text + keeps target line + x-ticks only. * feat(goals/show): status-aware chart variants for empty + no-target-date Empty state (goal with zero contributions) was rendering a flat-at-$0 saved series and a flat-at-$0 projection that looked broken to anyone opening a freshly created goal. Now show.html.erb branches on @goal.goal_contributions.empty? and renders a piggy-bank + "Add a contribution" CTA card before the chart card. Brand-new goals get a clean inline call-to-action instead of a misleading line at zero. No-target-date goals (target_amount set, target_date null) used to render a standalone "Set a target date" prompt card and hide history entirely. Now they render the chart with the saved history + the target horizontal line (no projection segment, no projection legend item), plus a secondary "Set target date" callout below the chart linking into the edit modal. History is informative even without a deadline. Locale: new goals.show.empty.{heading,body,cta}. * feat(goals/chart): hover crosshair + dot + tooltip Chart had no way to read the value at a specific date — users had to infer Saved amounts from line position relative to the y-axis labels added in the previous commit. - Transparent <rect> overlay covers the plot area + catches pointer. - pointermove uses d3.bisector to snap to the nearest saved series point, draws a dashed crosshair + a saved-line dot + a projection-line dot (linearly interpolated between today and target). - HTML tooltip lives inside the chart root (cleared on next _draw) showing "date / Saved: $X / Projected: $Y". Clamps to viewport so it doesn't overflow the card. - pointerleave hides everything. Pointer events unify mouse + touch — single handler covers both desktop hover and mobile tap-and-drag. No keyboard nav yet; tracked as follow-up (Stimulus controller is the right home but won't ship in this round). * feat(goals/stepper+chart): Step 2 derived projection + JS i18n + Intl.NumberFormat B — Step 2 of the create stepper used to echo Step 1 fields back at the user in three labelled rows (Funding accounts: 2 · $123,456 balance; Suggested monthly: $1,003/mo over 12 months). Replaces those rows with a single derived sentence: "Save $1,003/mo across 2 accounts to hit it on time." If no target date is set: "Set a target date to project a finish line." The previous "Suggested monthly" + "Funding accounts" rows are dropped; review block shows only Name, "$12,000 by May 11 2027", and the derived insight sentence. L — All hard-coded English templates + currency symbols in the JS controllers go through Stimulus values now: - goal_stepper_controller: new {currency, summaryWithDate, summaryNoDate, accountCountOne, accountCountOther, suggestedWithDate, suggestedNoDate} values. Money formatted via Intl.NumberFormat(undefined, { style: "currency", currency: this.currencyValue, maximumFractionDigits: 0 }). - goal_projection_chart_controller: _fmtMoney upgraded to Intl.NumberFormat (was $/€/£ ternary fallback that lost JPY/INR/CHF/...). Locale: new goals.form_stepper.step2.review.{summary_*,account_count, suggested_*}. Old funding_accounts / suggested_monthly keys retained (unused by the new ERB) so any translator paths in flight don't break. Verified live via Playwright: step-2 review reads "Save $1,003/mo across 2 accounts to hit it on time." for a $12,000 / 12-month / 2- account goal. * feat(goals/new): standalone page render when not in a Turbo frame Direct nav to /goals/new used to render the index page with an empty modal frame because the entire template was wrapped in DS::Dialog. The URL was effectively un-shareable. Branch on turbo_frame_request? — Turbo Frame requests still render the DS::Dialog wrapper (the existing in-modal flow on the index page keeps working). Non-frame requests render a standalone page-level header (h1 + subtitle + icon) followed by the form_stepper partial. Same Stimulus controller, same data-goal-stepper-modal-subtitle selector, so the stepper's subtitle update path works identically. Controller sets @breadcrumbs so the standalone variant gets the Home > Goals > New goal trail. Verified both paths via Playwright: direct GET renders standalone form with h1 "New goal" + no dialog; click-from-index opens the DS::Dialog with the stepper inside. * fix(goals/chart): drop title-tooltip, step projection cursor, dot follows projection line, collision-aware y-ticks, clean tooltip Four chart fixes in one pass. 1) Browser was rendering the <title> child as a native hover tooltip that fought with the custom crosshair tooltip. Drop <title>; use aria-label on the <svg role="img"> instead — same SR accessible name, no native tooltip side-effect. 2/3) The hover crosshair clamped at today: bisector ran the saved series, which ends at today, so future hovers stuck the dot at the last saved point. Now the controller forks: - Past hover: snap to nearest contribution via bisector. - Future hover: snap to whole-week intervals along the projection segment ([today, target_date]) and place the dot at the interpolated y on the dashed line. Movement steps cleanly week by week instead of pixel-by-pixel jitter. 4) Tooltip drops the redundant line: - Past: "<date> · Saved: $X" (no Projected — there isn't one). - Future: "<date> · Projected: $X" (no Saved — it's the future). 5) Y-axis tick label suppressed when its value falls within 5% of the target line so "$2.5K" and "Target · $2,400" stop overlapping near the right edge. Gridline stays; only the y-axis label drops. Verified live via Playwright on House downpayment goal: <title> absent, aria-label populated, past tooltip "Feb 10, 2026 · Saved: $11,750", future tooltip "Nov 29, 2027 · Projected: $32,235", neighbouring future x snaps to "Dec 13, 2027 · $32,704" (2-week jump across the snapping boundary). * ux(goals): catch-up rework, dark-mode pill contrast, color disclosure, stepper continue-right - catch_up alert: title now leads with the new info (delta) and body states the required rate. Was "Save $1,000/mo to catch up" + "Currently $750/mo behind" — confusingly double-stated. Now "Behind by $750/mo" + "Save $1,000/mo to stay on track for {date}." Locale keys swap the %{amount}/%{delta} placement. - Goals::StatusPillComponent: each variant carries a theme-dark: text override so the dark-700 text doesn't disappear against the dark-mode tinted surface. Verified in dark mode: Paused pill text is now rgb(231,231,231) (gray-200) instead of rgb(54,54,54) (gray-700). Pre-existing token contrast fix tracked at we-promise/sure#1736 stays the long-term path; this is the local workaround that doesn't drop 4.5:1 in either theme. - New goals/_color_picker.html.erb partial: <details> disclosure with current-color preview in the summary + swatch grid in the popover. Mirrors the categories form's pen-icon-overlay pattern in spirit (collapsed by default; user clicks to expand). Both _form_edit and _form_stepper render the partial; the stepper's hidden color field is replaced by the visible disclosure. - Stepper footer: change `justify-between` to `flex items-center` plus `ml-auto` on the Continue wrapper. Continue now sits right-aligned in step 1 (where Back is hidden) and stays right in step 2 with Back taking the left edge. * ux(goals/show): catch-up alert anchors all three numbers + scoped scrollbar on contributions list Alert previous pass led with delta ("Behind by $750/mo") but the user still had to reconcile that with the $1,000/mo CTA — the relationship between current pace, gap, and required rate was implicit. Make every number visible in the sentence: - Title: "Save $1,000/mo to stay on track" — leads with the action + required rate. Reduces decision load: the headline is what to do. - Body: "You're saving $250/mo today — $750/mo short of the pace to finish by September 11, 2026." — current pace + gap + deadline. User can now mentally verify: $250 + $750 = $1,000. The catch-up amount in title + body + CTA is no longer disconnected from the current pace number; the body is the bridge. Adds `scrollbar` utility (defined in app/assets/tailwind/application.css as 4px gray-300 thumb) to the contributions list container. Browser- default scrollbar was rendering as a thick dark bar in light mode on some OSes; the in-house utility renders a thin gray thumb consistently across themes. * ux(goals): color picker uses Sure's inline-disclosure pattern; drop em-dash in catch-up body Found the actual Sure pattern in app/views/accounts/_form.html.erb:27-47 ("Additional details" section in the account-creation flow): <details class="group"> <summary class="cursor-pointer text-sm text-secondary hover:text-primary flex items-center gap-1 py-2"> <%= icon "chevron-right", class: "group-open:rotate-90 transition-transform" %> ... </summary> <div class="space-y-2 mt-2 pl-4 border-l border-primary">...</div> </details> It's an inline expand (no absolute popup), chevron rotates 90° on open, body indented with a vertical primary-color rule. My previous partial was an absolute-positioned popover lifted from categories/_form.html.erb — not what Sure uses for collapsible form sections. Rewrite _color_picker.html.erb to match: chevron + color-preview disc + "Color" label in the summary; swatches in an inline indented body. Catch-up body also drops the em-dash. Was: "You're saving $X/mo today — $Y/mo short of the pace to finish by $date." Now two sentences: "Your current pace is $X/mo. You need an extra $Y/mo to finish by $date." Two short clauses, no compound separator, each conveys a single number. Frames the gap as "extra" rather than "short", which behavioral-econ research suggests reads as more attainable. * ux(goals/show): catch-up CTA pre-fills + secondary "Adjust your target" link The "Add $1,531.25" CTA used to open the contribution modal with an empty amount field — label was a hint, not a default. Now passes the catch-up amount via ?amount= and the contributions controller seeds @contribution.amount from params. One click brings the user to the modal already populated. Adds a secondary text link below the primary CTA: "Or adjust your target" → opens the edit modal (Turbo frame). Behavioural-econ choice architecture: gives the rebaseline path explicitly so users who can't realistically catch up don't feel forced into the contribution. Trade-off: lets the alert respect autonomy — commit or recalibrate, both fine. Action paralysis kept low by visual hierarchy (primary button vs muted text link). * ux(goals/show): balance-sheet-style funding widget; drop redundant stat row Lower half of the goal detail used to be: (stat row: monthly pace + total contributions) + (bottom row: contributions list + funding breakdown card). Two of those four pieces were redundant: - Total Contributions stat duplicated the count badge that already sits beside the Contributions heading below. - Monthly Pace stat repeated the same numbers the catch-up alert surfaces above and the chart subtitle reads. Adopt the dashboard Balance Sheet pattern (app/views/pages/dashboard/_ balance_sheet.html.erb) for the funding widget: inline header with total ("Funding accounts · $13,250"), thin gap-separated segment bar, color-dot legend with percent, and a bg-container-inset table with the shared `pages/dashboard/group_weight` 5-stick weight indicator + value column. New show.html.erb bottom: just two full-width sections — funding widget, then chronological contributions list. Both rendered only when the goal has contributions (matches the empty-state branch added earlier). Locale: goals.show.funding_table.{name, weight, value}. * feat(goals): extract shared color_icon_picker controller; add icon to goals; tinted avatar User requested replacing the in-house color disclosure with the categories color+icon popover. Done as a controller extraction so categories and goals share one Stimulus controller (user's option: "Extract a shared color_icon_picker_controller.js"). - `git mv` app/javascript/controllers/category_controller.js to color_icon_picker_controller.js. Categories form + color_avatar partial updated to use the new identifier (data-controller= "color-icon-picker", target/action selectors renamed). - Goal model gains an icon column (migration 20260511190000_add_icon_to_goals.rb) + ICONS = Category.icon_codes + inclusion validation. GoalsController permits :icon in goal_params + goal_update_params. - Goals::AvatarComponent now renders icon when present (falls back to first-letter initial), and adopts the Categories tinted-bg + colored -content style (bg = `color-mix(in oklab, COLOR 10%, transparent)`, text/icon = COLOR). Matches the picker's live preview so what the user sees during selection equals the saved state. - New goals/_color_picker.html.erb mirrors categories/_form's popover: avatar + pen overlay summary + popup with color row (+ rainbow custom-hex trigger) + icon grid. Pickr / contrast validation / auto- adjust all inherited from the shared controller. - Stepper step 1 layout: drop the inline letter-avatar (data-goal- stepper-target="avatarPreview") in favour of the picker avatar next to the name input. Step 1's tail no longer renders a separate color partial. Edit form passes icons local through. Verified live: new goal modal renders 11 color radios (10 presets + custom) + 141 icon radios + pen-summary; categories form still operational (no console errors) under the renamed controller. * chore: drop session-artefact audit-shots + audit markdown from branch These local-only audit screenshots + the report draft were staged inadvertently in the previous commit. They belong to the development session, not the feature branch. * ux(goals): picker stacked above name field (stepper + edit) Previously sat next to the name input via `flex items-start gap-3` so the picker avatar competed with the input for horizontal space. Move to its own row, centered (`flex justify-center`), positioned just before the name field. Mirrors the categories form layout where the avatar is the focal element above the name input. Same change applied to the edit form: picker comes first, then name. Stepper step 1 order is now: heading · picker · name · amount/date · funding accounts · notes. * fix(goals): theme-aware avatar text contrast; compact picker popup Avatar letter/icon now uses `--avatar-color` CSS variable + the new `.goal-avatar` class. Light mode darkens the text to 55% color + 45% black so pale palette entries (cyan-300, green-300) stay readable on the 10%-mix tint over white (~4.5:1). Dark mode reverts to the full brand color via [data-theme="dark"] .goal-avatar override so the text doesn't disappear against the near-black tinted surface. Verified live: #805dee renders as a darker oklab in light mode and full rgb(128,93,238) in dark mode. Picker popup compacted: - 80 (320px) wide, max-h-[60vh] overflow-y-auto so it never spills off-screen. - Anchored below the avatar + horizontally centered to it (top-full left-1/2 -translate-x-1/2) so it doesn't drift off to the right edge of the form on narrow modals. - Icon grid max-h-40 (160px, ~5 rows) with the in-house `scrollbar` utility for a thin gray thumb that works in both themes. - Section headers (Color / Icon) styled `uppercase tracking-wide` for visual hierarchy. Verified popup at 320x310px in edit modal, no vertical overflow. * fix(goals/avatar): icon helper clash crashed show after saving an icon Goals::AvatarComponent had `attr_reader :icon` which shadowed the global `icon` view helper. Template called `icon(icon, size:, color:)` which Ruby resolved against the attr-reader (zero-arity), throwing "wrong number of arguments (given 2, expected 0)" the moment a goal had a saved icon and the show page tried to render its avatar. - Drop `:icon` from attr_reader; expose as `icon_name` instead. - Template uses `helpers.icon(icon_name, ...)` matching the Goals::StatusPillComponent pattern (other Goals VCs already use `helpers.icon`). Reproduced + verified live via Playwright: edit modal → pick an icon → save → show page renders the new avatar with the SVG. Same for create flow (new modal → pick icon → step 2 → submit → show renders). * fix(goals/chart): suppress projection-end label when it collides with target Issue: an on-track goal whose projected end is just above the target showed two right-anchored labels stacked on top of each other — "Target · $2,400" and the projection-end short value "$2.4K". The projection dot already conveys "you'll hit the target on time"; the extra label adds noise. Now: when willHit AND |projDotY - y(targetAmount)| < 18px, skip the projection-end label entirely. The colored dot at the target_date keeps the visual cue. Also refactor the y-axis label collision check from value-based (within 5% of yMax) to pixel-based (within 18px of target's y), matching the projection-end logic. When a y-tick is close to target, the Target label drops into the y-axis column at that row (short format) instead of right-edge full format. Either way, no two labels ever stack within 18 vertical px. Verified live: Wedding fund (on_track, projection ≈ target) → just "Target · $2,400" + y-ticks, no "$2.4K". House downpayment (behind) → "Target · $50,000" + "Short $12.3K" both retained (well separated). * fix(goals/chart): redraw on turbo:render so the chart survives morph navigation Repro: index -> goal show (chart drawn) -> open edit modal in turbo frame -> pick a new icon -> submit. Server responds with turbo_stream.action(:redirect, goal_path). Turbo morphs the show page, wiping the chart container's children, but Stimulus' connect() isn't re-run on the morphed element so _draw never fires again. The ResizeObserver doesn't help — the container's box dimensions are unchanged. Listen for turbo:render and turbo:frame-load on document and re-draw when the container's SVG is missing. Cheap idempotent check (querySelector('svg')) — no-op if the chart is already there. Listeners cleaned up in disconnect(). Verified: same flow now lands on the show page with the chart fully rendered (23 SVG children). * docs(goals): add architecture decision discussion note Captures the open question on the data model behind Goals (account-linked vs free-form ledger vs tag-based) for community review before PR #1757 merges. * docs(goals): split architecture note into user-facing + mechanics The user-facing note focuses on how a Goal's balance gets computed and what changes for the user. The mechanics doc covers the schema, pro-rata math, pace window, and the operational details engineers need but most readers don't. * docs(goals): final architecture cut after 5-iteration expert review User-facing doc and mechanics companion converged on an account-linked model with a pledge layer. Surfaces the pledge-with-7-day-match mechanic, proportional-to-remaining-need split default, "Reserved beyond balance" framing, in-chart pending segment, two-clock rate limit, archive-in-place account handling, months-of-runway for open-ended goals, and the pre-launch user tests + day-one pledge instrumentation. * docs(goals): expand matrix coverage + ground mechanics in current code User-facing doc gains explicit 1xM (one goal, multiple accounts), N goals on shared accounts, and overlap (NxM) sections, plus the reallocation flow and "why is this goal behind?" diagnostic. Mechanics doc is rewritten against the actual code on the branch: file:line citations for current state, accurate corrections to the prior draft (Sure uses Account AASM status not archived_at, no Account#balance_at method, balance history via Balance::ChartSeriesBuilder CTE, Transaction::TRANSFER_KINDS for pace exclusion, advisory-lock pattern lifted from IdentifyRecurringTransactionsJob, partial-unique index precedent from entries[external_id, source]), concrete migration plan with seven steps, surface-by-surface STAY/CHANGE/DELETE verdict on every component, view, and Stimulus controller, day-one instrumentation events, and four pre-launch user tests. * feat(goals): v2 architecture — drop ledger, derive balance, add pledge Reshape the goals feature to live on top of linked-account balances. A goal's balance is now the live balance of every depository account linked to it — no parallel ledger, no "log a contribution" step. The "Add contribution" affordance is replaced by a 7-day GoalPledge (kind: transfer | manual_save). GoalPledge::Reconciler matches incoming Transactions (via Account::ProviderImportAdapter) and Valuations (via Account::ReconciliationManager) against open pledges within ±5 days, ±$0.50, or ±1% — single hook covers every provider (Plaid, SimpleFIN, Lunchflow, Enable Banking, Brex, IBKR, Kraken, SnapTrade) plus manual balance edits. A 15-minute Sidekiq cron sweeps expired pledges. Goal model: balance derived from linked_accounts.sum(&:balance), new pace (90-day net non-transfer inflow), months_of_runway, last_matched_pledge_*, pledge_action_label_key (the "I just transferred…" vs "I just saved…" verb switch). UI: - Index gets a 3-card KPI strip (Contributed last 30d / Needs this month / On track) plus a pending-pledges callout. - Show page swaps the "Add contribution" CTA for the pledge modal, replaces the contribution list with a pending-pledge banner, and rebuilds the funding widget into per-account rows with a 12-bucket weekly sparkline and last-30 inflow. - Projection chart adds a required-line (dashed light from today → target) and a translucent pending-pledge bump at today's X. Schema (3 migrations): 1. goal_pledges table with PG enums (goal_pledge_kind, goal_pledge_status), open-by-expiry index, and unique-when-not-null matched_transaction_id. 2. Drop goal_contributions. 3. Partial unique index on transactions ((extra -> 'goal' ->> 'pledge_id')) built CONCURRENTLY so it doesn't block prod. After pulling: run bin/rails db:migrate, then commit the schema.rb sync separately (or let CI regenerate). Deferred to v1.1: allocation columns, contention/archived banners, "why is this behind?" diagnostic, reallocate flow, refresh-sync + Plaid throttle, unallocated-cash chip, joint-account approval, goal_activities log, polymorphic matched_entry_id/type for manual pledge audit. * fix(goals): CI green — schema, brakeman, pledge modal, error class Regenerate schema.rb after the three v2 migrations so CI's db:schema:load picks up goal_pledges, the dropped goal_contributions, and the partial unique pledge_id index. Brakeman: - Drop :account_id and :kind from goal_pledge permit; look the account up via @goal.linked_accounts.find_by(id:) instead and set kind server-side from goal.any_connected_account?. - Rename goals.show.projection.on_track to .on_track_html so I18n marks the result html_safe automatically; drop the unconditional .html_safe call in show.html.erb. Pledge modal: rewrite app/views/goal_pledges/new.html.erb to use DS::Dialog (the Sure convention for create modals — matches categories/transfers). Error handling: replace `raise ActiveRecord::RecordInvalid, "string"` in GoalPledge#extend!/cancel! with a dedicated GoalPledge::NotOpenError; the controller rescues that specifically. Tests: rewrite the "pace is zero" test to create a fresh account with no entries (the fixture's depository accounts carry transaction history that produces a non-zero pace). All goal tests now green (73 runs, 157 assertions, 0 failures). * fix(goals/pledge): drop find_each-incompatible order in reconciler The explicit .order(created_at: :asc).find_each emitted an AR warning that broke the strict logger mock in BrexEntry::ProcessorTest. find_each forces its own primary-key order anyway. * ux(goals/index): restore prior-30d comparison + multi-part on-track subtitle The v2 rewrite dropped the velocity_delta_percent / velocity_direction keys that powered the 'Contributed last 30d' card's '↑ 27.2% vs. prior 30d' line and the 'Goals on track' multi-part subtitle ('1 behind · 1 paused'). Restore both, sourcing velocity from Family#savings_inflow_velocity with explicit current-window and prior-window ranges. * fix(goals): pledge lifecycle + connected-account detection Behavioural fixes touching Goal, GoalPledge, the reconciler and the goals controller. No schema change. B5 — connected-account detection covered only Plaid. SimpleFIN, Brex, Enable Banking, IBKR, Kraken, SnapTrade and Lunchflow users got "manual_save" pledges by default; their auto-synced Transactions then failed to match (reconciler matches Transactions to "transfer" pledges only). Pledges sat in the yellow banner until expiry. Switch the detection to !Account#manual?, which mirrors the existing `Account.manual` scope (no account_providers, no plaid_account_id, no simplefin_account_id). Add `Account#manual?` so the per-instance and per-query checks can't drift. B7 — `extend!` widens `expires_at` but `matches?` was anchored on `created_at ± 5d`, so an extension that pushed the expiry past day 5 didn't actually buy any match runway. Widen the upper bound to `max(created_at + 5d, expires_at)`. The lower bound stays at `created_at − 5d`. B8 — `Goal#open_pledges` returned `status: open` regardless of expiry. Between a pledge timing out (day 7) and the 15-min sweep job marking it `expired`, the show page rendered a ghost yellow banner with "0 days left" that the reconciler would no longer touch. Add `expires_at >= NOW` to the scope so the visible state matches the match-eligible state. B9 — Double-click on Record pledge produced two identical open pledges, which then stacked as two yellow banners. Add a create-time validation rejecting duplicates against (goal_id, account_id, amount, status=open, expires_at >= NOW). B10 — The reconciler used `transaction.with_lock` but didn't lock the pledge. Two concurrent reconcile attempts on different transactions could both target the same pledge; one would lose to the partial unique index on `transactions.extra->'goal'->>'pledge_id'` and the RecordNotUnique was caught by the outer StandardError rescue, which silently dropped the other transaction's match attempt entirely. Lock the pledge first, re-check `status_open?` inside the lock, and catch RecordNotUnique alongside RecordInvalid/NotOpenError in the reconciler — so on a lost race we fall through to the next candidate pledge instead of exiting the loop. Extract the Valuation-match path to `GoalPledge#resolve_with_valuation!` so it goes through the same locked status-recheck. B12 — When a goal is destroyed, `dependent: :destroy` reaped pledges but left `transactions.extra["goal"]["pledge_id"]` pointing at the now-deleted UUIDs. The partial unique index on that JSON path then indexed stale references. Add a `before_destroy` on GoalPledge that clears the matching transaction's `extra` if it still points back to the pledge. B6 — `last_matched_pledge_at` used `goal_pledges.maximum(:updated_at)` on matched rows. Any backfill or sync-resync that touches a matched pledge bumped `updated_at`, so a single resync set every goal's "Last saved N days ago" header back to "today". Switch to the entry's `date` via a join through `matched_transaction_id`, which reflects the date the money actually moved. B22 — `scope :chronological` ordered DESC, the opposite of what the name promises. Rename to `:reverse_chronological` and update the one caller in `goals#show`. (Other models' `chronological` scopes are unrelated and ordered correctly.) Also: preload `account_providers` on `linked_accounts` in the index and show controllers so `Account#manual?` walks the in-memory collection instead of triggering N queries. Tests: add fixture-backed coverage for extend-widens-match-window, post-extend rejection beyond expiry, and the duplicate-pledge validation. Existing assertions still hold against the new `matches?` window math. * fix(goals): pace counts transfers, family rollup currency-scoped Two semantic shifts in V2 that drove the worst on-screen confusion. B3/B4 — `Goal#pace` excluded `Transaction::TRANSFER_KINDS`. When a user tapped "I just transferred…" and the deposit landed, the linked account's balance went up but pace did not: pace ignored transfer- kind entries, so the goal stayed `:behind` against `monthly_target` and the catch-up callout kept demanding $X/mo even though the user had just moved the money in. Same root cause hit any long-time saver whose 90-day net was zero — pace=0, status=:behind, projection says "At $0.00/mo you'll miss your target date" while the ring sits at 80%. Drop the transfer-kind exclusion. Pace is now net inflow into linked accounts over 90 days. Transfers between linked accounts already net out (both legs land inside the same account set); transfers from outside (checking → linked savings) net positive, which is exactly the case the pledge flow records. B19 — `Family#savings_inflow_velocity` summed entry amounts across every depository account linked to any goal regardless of currency, then rendered the result in the family's primary currency. A family with one USD goal and one EUR goal saw `usd_inflow + eur_inflow` reported as USD with no FX conversion. Scope the account set to the family's primary currency until proper FX-conversion lands. Also let the result go negative (net outflow) — clamping to ≥0 lost signal; the controller decides how to render the sign. V20 (controller) — `velocity_30d_sign` was wired off the *delta* direction, so a $1,234 down-month rendered as "−$1,234 ↓ 27% vs prior 30d". The minus read as a loss but $1,234 was the (positive) contribution. Re-wire the headline sign off the headline value itself; the delta-direction stays on the subline as ↑/↓ N%. With the family-rollup change above, the headline can now legitimately be negative — UI now says "−$200 ↓ 50% vs prior 30d" when the family had net outflow. B21 — KPI tile `on_track_count` lumped `:reached` goals into "on track", inflating the numerator while the sort order placed reached goals at the bottom of the list. Split `reached_count` out and render it as its own segment in the on-track subline ("1 reached · 1 behind · 1 paused"). Test: rename the pace=zero test to match its new premise (no transactions vs. no non-transfer entries). The fixture still has no entries, so the assertion holds. * fix(goals/ds): replace hand-rolled yellow banners with DS::Alert The pending-pledge banner on goals#show and the pending-pledge callout on goals#index were inlined yellow divs: bg-yellow-50 dark:bg-yellow-950/30 border-yellow-200 \ dark:border-yellow-800 Raw color tokens violate the "functional tokens only" rule in CLAUDE.md ("`text-primary` not `text-white`, `bg-container` not `bg-white`"), drift from the DS warning palette (`bg-warning/10` + `border-warning/20`), and miss accessibility plumbing (aria role, sr-only variant label) that DS::Alert provides for free. Swap both surfaces for `DS::Alert.new(variant: "warning", live: :polite)`: - Index callout: a one-line message variant (no title). - Show banner: title + body + footer with DS::Button (outline Extend, ghost Cancel). Cancel button gets a CustomConfirm dialog — the V2 affordance destroyed the pledge on a single click with no second-chance prompt; one accidental click and the user lost the record. The Extend / Cancel buttons drop the hand-built `text-xs px-2.5 py-1 rounded-md shadow-border-xs bg-container` styling, picking up DS::Button's `outline` / `ghost` variants and `size: "sm"` instead. Locale: tighten the title from "Pending: $200 into Savings" + separate body line "… $0.50 or ±1%) · 6 days left." to "Watching for $200 into Savings · 6 days left" with a short body ("Auto-confirms when Sure spots a matching deposit on the next sync"). The old copy was ~130 chars and wrapped 2-3 lines inside the banner flexbox, pushing the catch-up callout below the fold on common viewports. Drop the hardcoded "$0.50" from the body (currency-aware copy lands in Commit I). Add `confirm_cancel_{title,body,cta}` strings for the CustomConfirm dialog. * fix(goals/funding-widget): restore DS-aligned per-account breakdown V2 rebuilt the funding widget around per-account rows + a custom SVG sparkline, but cut visible signal and DS adherence in the process. This rebuild restores the V1 affordances and folds in the V2 sparkline as an enhancement. - Heading regression: `text-lg font-medium` (with total in `text-lg`) → `text-sm font-medium` (total inheriting `text-sm`). The section heading collapsed to body-copy size and no longer matched the Projection heading beside it. Restore both to `text-lg`. - Avatar regression: V2 hand-rolled `w-10 h-10 rounded-full … style="color: white"`. That box (40px) matches no `Goals::AvatarComponent` size (sm=24px, md=36px, lg=44px), uses `rounded-full` where the DS uses `rounded-md/lg/xl/2xl`, and hardcodes white text instead of the `text-inverse` token. Render `Goals::AvatarComponent` directly at `size: "sm"`. - Privacy regression: `row[:balance_money]` subline ("Depository · $3,000") wasn't wrapped in `privacy-sensitive`. Blur mode no longer hid the balance, while heading total and last-30d value on the same row both had the class. Add `privacy-sensitive` to the subline. - Untranslated leak: `<%= account.accountable_type %>` printed the raw "Depository" / "Investment" / "Crypto" class string with no i18n. Add `accountable_label(account)` on the component that prefers the depository subtype ("Savings", "HSA"…) via `goals.form_stepper.step1.subtypes.*`, falling back through `accounts.types.*` and finally a `titleize`. - Lost weight signal: V1 had a stacked distribution bar across the top, colored legend dots, and a 5-bar weight pill per row. Users could see "Account A contributes 60% of balance" at a glance. V2 deleted all three. Restore the distribution bar + legend + the existing `pages/dashboard/group_weight` partial in a `weight` column (skipped when only one account is linked). - Lost container framing: V1 wrapped rows in `bg-container-inset rounded-xl p-1` with `shared/ruler` dividers between rows. V2 used `space-y-3` with no container and no dividers, leaving rows floating. Restore both. - Empty state regression: V2's fallback rendered the section heading as a body paragraph (`<p>Funding accounts</p>`) inside a `p-5 rounded-xl` card — looked like an unfinished widget. Replace with a real empty state via `goals.show.funding_accounts. empty.heading` + `body` ("Edit the goal to link the depository accounts you save into."). - Row order: V2 sorted by 30-day inflow (which can flatten to ties at $0 across rows). Sort by balance instead — the column the user is comparing against anyway. - Pace alignment: drop the transfer-kind exclusion from the component's `last_30_inflow_for` and `sparkline_for` so the widget reads the same flow as `Goal#pace` (commit B). Internal transfers between linked accounts net out per-account here too, external transfers count as inflow on the receiving account. The 12-bucket sparkline still runs 12 queries per account; that N+1 lands in a follow-up commit alongside the component-level query collapse. * fix(goals/pledge-modal): use StyledFormBuilder + restore live preview V2 rebuilt the pledge create modal but bypassed the DS form helpers inherited from `StyledFormBuilder`, lost the inline impact preview from V1's contribution form, and shipped a goal-level "transfer vs manual_save" toggle that broke on mixed-funding goals. - Manual `form-field/__body/__label/__input` div-wrapping for the account select → idiomatic `f.select :account_id, choices, { label: t(".account_label") }`. The builder applies the required marker, error state, and inline-label handling automatically; the hand-built version drifted from that path and applied `form-field__input` directly onto the select element, where the builder picks the correct input class per field type. - Hand-rolled `<div class="form-error">` + `<p>` loop for errors → `render "shared/form_errors", model: @pledge` (the shared partial with the destructive-icon prefix). Matches V1's contribution modal and the rest of the codebase. - Drop `class: "btn btn--primary"` on `f.submit` → bare `f.submit t(".submit")`. The builder's `submit` is wired to `DS::Button.new(text:, full_width: true)`; the explicit class was redundant. - Drop the duplicate "Cancel" button. DS::Dialog already renders an X in the header; the in-form ghost Cancel was a second close affordance with no analogue in the new-goal stepper or V1's contribution form. - Drop `data: { turbo_frame: "_top" }` on submit. Success already flows through the controller's `turbo_stream.action(:redirect, …)` and on 422 the modal frame is the right swap target; the explicit `_top` was at best redundant and at worst a future Turbo footgun. - Wire `data-controller="goal-pledge-preview"` on the form and add an inline preview `<p>` below the amount field. As the user types the amount, the line updates to "Reaches 75% — $3,750 of $5,000." or "Hits your $5,000 target — goal reached." Mirrors V1's contribution preview that V2 dropped on the floor. - Rename `goal_contribution_preview_controller.js` → `goal_pledge_preview_controller.js`. Pure rename; the controller was already domain-neutral. - Per-account pledge kind. The controller's `default_kind_for(goal)` picked `transfer` whenever the goal had ANY connected account — meaning a goal that linked a Plaid checking account AND a manual cash envelope routed every pledge as `transfer`, including those the user submitted against the manual account. The reconciler would then watch for a Transaction that never arrives. Replace with `kind_for_account(account)` that picks per-account: manual → `manual_save`, anything else → `transfer`. - `new` action now respects `?account_id=…` query params and preselects that account (helpful for the catch-up callout's inline "Save $X/mo" CTA, which can target a specific account). Locale: drop the hardcoded "(±5 days, ±$0.50 or ±1%)" tolerance copy from the helper text — that detail belongs in docs, not in a modal that fires on every pledge create. Currency-aware copy lands in commit I. Drop the now-unused `cancel:` key. Add the three preview templates (`preview_zero`, `preview_nonzero`, `preview_reached`) consumed by the Stimulus controller. * refactor(goals/show): move projection_summary + catch_up_delta to model The show template carried a 17-line `if/elsif` chain computing `projection_summary` inline, plus a `Money.new([…, 0].max, …)` expression building the catch-up delta on the fly. CLAUDE.md's "skinny controllers, fat models" convention pushes both onto Goal. - `Goal#projection_summary`: returns the localized, `html_safe`-aware string for the chart subtitle and the chart's `aria-description`. Memoized so the two callsites in show.html.erb share one computation. - `Goal#catch_up_delta_money`: clamped-at-zero monthly delta between pace and the required monthly target. Used by the catch-up callout body. Previously the view computed `Money.new([req - pace, 0].max, currency)` — same math, but duplicated inline. show.html.erb drops both blocks and reads `@goal.projection_summary` / `@goal.catch_up_delta_money` directly. Also: V15 — the celebration card used `bg-green-500/10` directly. Swap to `bg-success/10` (DS semantic token, same Tailwind-4 alpha syntax DS::Alert already uses) so the celebration palette tracks the rest of the success surface. * perf(goals/funding-widget): collapse N+1 sparkline + last-30 queries V2's funding widget ran (12 + 1) queries per linked account on the goals#show render: - one `last_30_inflow_for(account)` summed over a 30-day range, - twelve separate `sparkline_for(account)` sums, one per 8-day bucket inside a 90-day window. For 3 linked accounts, that's 39 SQL queries from this component alone before the projection chart's Balance::ChartSeriesBuilder runs. Replace with two grouped queries that scan once across all linked accounts: - `last_30_inflow_map`: a `GROUP BY account_id` over the 30-day window, returning a hash `{ account_id => clamped_inflow }`. One query, no matter how many accounts are linked. - `sparkline_map`: a `GROUP BY account_id, LEAST(GREATEST((CURRENT_DATE - entries.date) / bucket_days, 0), 11)` over the 90-day window. One query covers every account × every bucket. Each per-account array is filled in oldest → newest order so the SVG path reads left → right naturally. Net query count for the funding widget drops from 13 × N to 2. Both helpers fall through to safe defaults (`0`, all-zeros array) on missing keys so the row loop stays branch-free. * chore(goals): drop dead V1 hooks + surface chart errors Loose ends from the V1 → V2 refactor that the architecture commit didn't sweep. - Demo generator (B14): the `goal_spec[:contributions]` arrays + the `wedding_contribs` / `house_contribs` builders still shipped in the file, but the seeding loop that consumed them was deleted alongside `GoalContribution`. Dead data. Strip both the per-goal arrays and the two locals. Goal balance/pace in the demo family now derives from the linked depository accounts' own seeded entries elsewhere in the generator. - Goal stepper controller (B16): the `static targets` declaration still listed `initialContributionAmount` and `initialContributionAccountSelect`, and `refreshAccountSelect` + its two callsites still ran every time a linked-account checkbox flipped. The HTML targets disappeared with the V2 stepper rebuild, so `has*Target` guards short-circuited and the method was a no-op — but it was still dispatched on every change. Drop the targets, the method, and the two callsites. - Chart series rescue (B25): `Goal#balance_series_values` and `FundingAccountsBreakdownComponent#sparkline_map` both swallowed `StandardError` with a `Rails.logger.warn(…)`. The chart then degraded to "target line only" silently. Promote the log to `error` level and forward to Sentry when present (matching the pattern in `Account::Syncer`, `Sync`, `PlaidItem`). Fallback to empty result still preserved so the surface degrades instead of 500-ing. * fix(goals): header CTA + projection-chart required-line color V6 — three "Record pledge" affordances on goals#show (header, empty state, catch-up callout) all rendered as `t(@goal.pledge_action_ label_key)` + `icon: "arrow-up-right"`. That dropped the user into a button labelled "I just transferred…" or "I just saved…" with a trailing ellipsis — past-tense as a CTA reads as a status declaration, the ellipsis suggests an unresolved action, and `arrow-up-right` is the icon Sure reserves elsewhere for external-link affordances. Switch the on-page CTA to a single new locale key, `goals.show.record_pledge_cta: "Record pledge"`, with `icon: "plus"` matching the other "new resource" buttons across the app (new goal, new account, new rule). The modal title keeps using `pledge_action_label_key`, so the past-tense "I just transferred…" framing still anchors the dialog's confirm step. V8 — the projection chart's "required" dashed line was hardcoded to `var(--color-green-600)`. When the goal status is `:on_track` the projection line is also green-dashed, and the two stroked the same hue and dash pattern — they overlapped visually. Re-stroke the required line in `textSecondary` (the chart's neutral foreground) so it reads as a reference path independent of status. * fix(goals/show): add Required line to projection legend The dashed neutral line for "the rate needed to hit the target by the target date" was rendered on the chart but absent from the legend. Adds a third legend chip ("Required") that renders only when the line itself renders — i.e. when target_date is set, monthly_target_amount is positive, and there's still ground to cover (remaining_amount > 0). Stroke matches the JS: `text-secondary` currentColor, dasharray 2/4, 0.5 opacity. * fix(goals/funding-widget): switch sparkline to bars + shared scale The shared-scale fix alone wasn't enough — a single outlier bucket on one account compressed every other row to invisibility, and the interpolated line between sparse non-zero buckets painted fake "event triangles" between actual data points. Switch from a stroked path to per-bucket bars: - 12 rects per row, x = `i * 8 + 1`, width 6, 2px gap between. - Bar height = `(value / shared_max) * 24`, floored at 1 unit so a non-zero bucket is always visible even when an outlier elsewhere dominates the scale. - Empty buckets render nothing — no fake baseline, no interpolated trough. - Bars grounded at `y = 28` (bottom of viewBox), so "zero" is implicit and the eye reads upward from a stable floor. - Shared `spark_max` across every account's bars (the component method introduced for the line version stays — that part of the diagnosis was right, it just needed a chart type that handled the scale honestly). Net read: the column-chart-on-each-row layout matches "12 weeks of deposits into this account" much more directly than a sparkline ever did, and outlier-vs-modest-but-steady contributions are both legible at a glance. * fix(goals/pledge-modal): helper text reacts to selected account The helper paragraph above the amount field was painted off `@goal.any_connected_account?` — a goal-level decision that fires once at modal render and never updates. On a mixed-funding goal (one connected + one manual account linked), the helper read the "transfer" copy regardless of which account the user picked from the dropdown, even though the saved pledge's `kind` is decided per-account by `kind_for_account` in the controller. Stale UI vs. correct data. Render both helper paragraphs hidden, then toggle the right one visible via Stimulus on `change->goal-pledge-preview#accountChanged`. The select renders its `<option>` tags with `data-manual="true|false"` from `Account#manual?`; the controller reads that attribute off the currently-selected option and flips `hidden` on the two helper targets. `connect()` also calls `accountChanged()` so the initial paint matches the preselected account from `?account_id=…` (the catch-up callout's amount-specific deep link). Switch from `options_from_collection_for_select` to `options_for_select` with the `[label, value, { data: { manual: } }]` 3-tuple form — Rails supports per-option data attributes there but not on the collection helper. * fix(goals/funding-widget): per-account balance trajectory area chart Bars communicated "events," not "where the account level sits." A sparse-deposit account painted three thin bars at the bottom and looked dead. An account with a single big deposit dominated every other row's scale. Swap to the same visual language as the projection chart on goals#show — filled area below a stroked line — but one chart per linked account, rendering that account's actual balance trajectory over the last 90 days. Mechanics: - New `trajectory_map` on the component pulls every `balances` row for every linked account in one query (`Balance.where(account_id: account_ids, date: 90d..today)`). Result is grouped per account and resampled to 24 points by a single-pass forward walk that carry-forwards the most-recent balance at-or-before each anchor date. O(rows + samples), not O(rows × samples). - Per-row Y-scale: baseline 0 (when the account has ever held a positive balance), ceiling = max balance × 1.05. The chart reads as "how full was this account over time" rather than "how dramatic is the shape." Flat-at-$5k accounts paint near the top; growing $200 → $500 accounts climb from 40% to top. - Filled area at `opacity: 0.18` in the account color + stroked line at full opacity on top — same treatment as the projection chart's saved series. - Grid track for the chart column widened from `minmax(60px, 1fr)` to `minmax(80px, 1fr)` so the curve has enough horizontal room to read. Removed `shared_spark_max` + `sparkline_map` + the bucketed inflow sparkline machinery. Per-row scale is correct here — magnitude already lives in the weight pill on the left and the "$X last 30d" column on the right; the chart's job is shape. * fix(goals/funding-widget): chart shows cumulative inflow, not balance level Balance trajectory rendered every account as "near the top with a gentle wobble" — pink ($1830/30d), orange ($0/30d), blue ($300/30d) all looked nearly identical because each was a positive balance with mild growth, and per-row 0-baseline scaling pushed all lines toward the ceiling. The chart and the "$X last 30d" column on the right were telling completely different stories on the same row. Switch the metric the chart plots: - Data: 31 daily samples (today − 30 … today) of *cumulative inflow* per account, fetched in one `GROUP BY (account_id, date)` over the 30-day window. Each per-account array is a monotonic non-decreasing prefix sum starting at 0. - Scale: per-row, anchored at 0, ceiling = `max(values) × 1.05`. - The chart's rightmost point now equals the "$X last 30d" column value by construction — chart and column tell the same story. - `last_30_money` is read off the cumulative array's last element, no separate aggregation query. Visual shapes after the swap: - Steady-inflow account → smooth diagonal climb - Bumpy/episodic account → step pattern with flat plateaus - No-inflow account → flat line at the bottom, no filled area Removed `balances` query path entirely; trajectory_for is gone. * fix(goals/funding-widget): non-scaling-stroke for trajectory line `preserveAspectRatio="none"` stretched the viewBox's 100×28 to the container's natural width (≈600px) while leaving the Y axis at 1×. With anisotropic scaling, SVG strokes inherit the path's local scale — horizontal segments rendered ~6px wide, vertical segments ~1.5px wide, diagonals in between. The line read as visibly fatter on the flat top run than on the climbing/dropping segments. Add `vector-effect="non-scaling-stroke"` to the line path so the stroke width stays a constant 1.5 CSS px regardless of how the viewBox is scaled. Filled area is unaffected (no stroke). * fix(goals/funding-widget): replace chart with last 30d + last 90d totals The cumulative-inflow chart kept producing readings that didn't match user mental models — chart endpoint = 90-day cumulative, right-hand column = 30-day total, and the visual line didn't carry the "this is per-week deposit activity" intuition that a sparkline implies. After iterating through bars, balance trajectory, and filled-area cumulative, simplest is best. Drop the chart. Each row now shows two right-aligned totals stacked vertically: - Primary line: "$X last 30d" — text-sm, text-primary, the "this month so far" headline answer. - Secondary line: "$Y last 90d" — text-xs, text-secondary, the quarterly-trend reference. Tells the user whether this account contributes regularly without forcing them to read a chart. Both numbers compute in one query — pluck (account_id, date, amount) over 90 days, sum per account into two buckets based on whether the entry's date falls inside the 30-day cutoff. Grid shrinks from 5 columns (avatar / name / weight / chart / total) to 4 (avatar / name / weight / two-totals), with the two-totals column getting 120px so both numbers fit right-aligned with their labels. Drop `funding_accounts_subtitle` and the chart-window plumbing (`TRAJECTORY_SAMPLES`, `cumulative_inflow_map`, `column_total_from`, SVG markup, `vector-effect`, etc.). * fix(goals/show): strip redundancy + sharpen catch-up framing The show page repeated the same data multiple times across surfaces that should each say one thing once. Per-screen counts before this commit: - Account % distribution: 4 places (distribution bar + dot-legend strip + 5-bar weight pill + % column) - Current balance: 3 places (ring, funding heading total, ring "of $X" subline) - Target amount: 3 places (header, ring subline, catch-up body) - Target date: 3 places (header, catch-up body, chart axis) - Pace: 2 places (catch-up body, projection subtitle) - ".00" cents: every monetary string This pass: - Funding widget drops the dot-legend strip (color/name/% triplet redundant with the distribution bar's color + the per-row avatar color) and the 5-bar weight pill (rendered as "1-of-5 sliver" for low-weight accounts — read as a glitch; the % number next to it covered the same fact). Row grid shrinks from 5 to 4 columns. - Funding section heading drops `· $187,031` — the ring card already carries the total balance. - Catch-up alert reframes: Title was "Save $26,621/mo to stay on track" (the *full* required rate, with the misleading "stay on track" while the pill says "Behind"). Now "Save $20,002/mo more to catch up" using `catch_up_delta_money` — the user's actual delta over current pace. Body collapsed from two with-date / no-date variants to a single "Current pace $X/mo · required $Y/mo to hit your target." Drops the target date duplication since the header already says it. Pledge CTA pre-fills with the *delta*, not the full required — so accepting it once funds the gap instead of stacking the full required rate on top of existing pace. Secondary link "Or adjust your target" → "Adjust target instead" (less defeatist framing). - Projection chart subtitle "At $X/mo you'll miss your target date." drops the pace duplication (catch-up above already states pace). New: "Falling short at current pace." Diagnostic only. - All money on the show page uses `format(precision: 0)`. The ".00" cents added no information at goal-tracking scale. - Header `Record pledge` demotes to `outline` variant when status is `:behind` — the catch-up alert below owns the primary action. One primary action per surface. Also adjacent fixes: - Funding widget keys avatar / distribution color off `account.id`, not `account.name`. Renaming an account no longer recolors it retroactively; two accounts with name-hash collisions no longer share a color (Ruby idiom audit finding). - `Goals::StatusPillComponent`: add `:completed` variant with `circle-check-big` icon. `Goal#display_status` now returns `:completed` when `goal.completed?` so a manually-completed goal (e.g. user stopped at 80%) reads "Completed" rather than falling through to `:on_track`/`:behind` and lying on the index. Locale: drop `body_with_date` (folded into `body`), `projection.behind` no longer carries interpolation args (caller doesn't pass them either), `projection.no_pace` plain-language rewrite ("inflow" → "deposits"), add `status.completed: "Completed"`. * fix(goals): align card + banner copy/numbers with show-page changes Tail of the redundancy + clarity pass: - Goal card on the index drops ".00" cents from every Money.format call (now `format(precision: 0)`). The card uses the same visual rhythm as the show page; cents add zero info at this scale. - Card's "behind"-status footer now reads "Save $X/mo to catch up" with X = `catch_up_delta_money` (the delta the user must add), not the full `monthly_target_amount` (which read as a total monthly burn). Same fix as the show-page banner. - Pending-pledge banner title becomes pluralized: drops "0 days left" / "1 days left" grammatical bugs. New locale tree: title.zero → "Pending: $X into Y · expires today" title.one → "Pending: $X into Y · 1 day left" title.other → "Pending: $X into Y · N days left" Also drops the "Watching for" phrasing (system-talk) for "Pending:" (state-talk) and drops cents from the amount. - `confirm_cancel_body` likewise renders amount without cents. Cards and banner now read consistently with the show page; one voice across the surfaces. * fix(goals): exclude pending transactions from pace + mobile-stack funding rows Two audit fixes that pair well. PF audit B20: pace, family velocity, and the funding widget's 30/90-day totals all summed Entry amounts over the linked accounts *including provider-pending transactions*. A pending Plaid/SimpleFIN deposit inflated pace today; the next sync that reversed or dropped it silently shrunk pace tomorrow, with no signal to the user. Worse, the reconciler could match a pending transaction and flip the pledge to "matched" before the underlying entry vanished. `.merge(Transaction.excluding_pending)` on the three Entry queries (Goal#pace, Family#savings_inflow_velocity, the funding widget's `inflow_totals_map`) brings the existing `Transaction::PENDING_PROVIDERS`-aware scope into play. Single-line fix across the three call sites. UX audit: funding-account rows used `grid-cols-[24px_1fr_48px_120px]` at every breakpoint. On a 375pt iPhone viewport that left ~50px for the name column after `p-5` padding + container chrome — name truncated to "Ban…" and the per-row % column squeezed against the weight/totals stack. The percent number is also already encoded in the distribution bar above the rows; on mobile it can disappear without losing signal. Drop the % column at < sm: - mobile grid: `grid-cols-[24px_minmax(0,1fr)_auto]` (avatar / name / totals) - sm+: original 4-column layout with the per-row % - per-row balance subline + accountable label now also drops `.00` cents (consistency with the rest of the page). * fix(goals/show): past-due target reads "was due" not "by" Copy audit edge case. When `target_date < Date.current` and the goal isn't completed/reached, the header rendered "Target $X by Jan 1, 2024" — present-tense "by" framing a past deadline. The card already has `goal_card.past_due` for this; the show header had no equivalent. Add `header.target_by_past: "Target %{amount} · was due %{date}"` and switch the header when `days < 0`. Skips the trailing "N days left" subpart since it'd render negative or stale. * fix(goals/index): persist filter + search in URL across reloads UX audit finding. The filter chip state and search input lived only in Stimulus values — a Behind-filter selection survived turbo morphs but vanished on F5, browser back from a goal's show page, and any deeplink share. For a family with 10+ goals filtering by "behind", every navigation reset to "all". Hydrate on `connect()`: - read `?filter=behind` → statusValue - read `?q=…` → input target Sync on every `filter()` call via `history.replaceState`: - filter=all → drop key - q empty → drop key - else preserve both Uses `replaceState` (not `pushState`) so each keystroke / chip click doesn't bloat the back-history. The page URL becomes shareable for the filtered view. * fix(goals/show): ring subtitle drops the target restatement The ring card's secondary line read "of $400,000 · $212,969 to go" — the "of $400,000" half duplicates the header's "Target $400,000 by Jan 10, 2027". Same number, two places, ~80px apart vertically. Drop the "of $target" half. Subtitle now reads "$212,969 to go" — single new fact, complementary to the header. * fix(goals/copy): pluralization, casing, voice cleanup Copy audit quick wins. - `needs_this_month_sub` dropped "across" preposition that read grammatically wrong at count=1 ("across 1 goal behind pace"). New: "1 goal behind pace" / "N goals behind pace" — count + noun matches the working sibling subtitles. - `on_track_sub_parts.no_date` was "1 open" / "N open" — collided with the chip and status pill labels "Open" (titlecase) on the same screen. New: "1 without a deadline" / "N without a deadline" — descriptive, lowercase, unambiguous. - `pledge_just_transferred` / `pledge_just_saved` dropped the past-tense + trailing-ellipsis form ("I just transferred…"). Modal title is "Log a transfer you made" / "Log money you set aside" — present-tense, resolved, clear about what the dialog does. - `goals.show.empty.heading` "Nothing's flowed in yet" → "No deposits yet". "Flowed" was novel jargon nowhere else in the vocabulary; "deposits" matches the surrounding copy. - `form_stepper.errors.amount_required` / `accounts_required` added "Please" prefix to match `name_required` — three errors with one voice. * fix(goals): reconciler logs to Sentry + rename :extend route to :renew Two Ruby idiom audit fixes. The Reconciler's outer `rescue StandardError` was logging at error level and moving on. Pipeline-protective (we don't want a Goal reconcile failure to break the Plaid/SimpleFIN/etc importer it's hooked into) but invisible — real bugs hid behind a warn log forever. Add `Sentry.capture_exception(e) if defined?(Sentry)` alongside the log, matching the pattern in `Account::Syncer`, `Sync`, `PlaidItem`, and the chart-series rescues this branch already added. Keep the rescue's protective function. `member do patch :extend end` shadows `Module#extend` — the controller action name competes with Ruby's most-common mixin entry point. `before_action :foo, only: %i[extend destroy]` reads as "extend this controller with :foo, only: …" to a casual reader, and stack traces against `def extend` look misleading. Rename to `:renew` (matches the existing copy: the button says "Extend 7 days," but the API verb is "renew the watching window"): - config/routes.rb: `patch :renew` - GoalPledgesController#extend → #renew - locale `goal_pledges.extend` → `goal_pledges.renew` - banner `extend_goal_pledge_path` → `renew_goal_pledge_path` - test refs updated The user-facing button text is unchanged. * fix(goals): months_remaining uses day-precision PF audit edge case. Calendar-month math undercounted near the deadline: May 30 with a June 1 target returned `1` ("save $5k this month"), then June 1 morning returned `0` (falls through to `remaining_amount` charged as one-month-required). Users saw a $5k/mo required rate for a 2-day window, then $5k flat on deadline day — a cliff that doesn't match reality. Replace calendar-month delta with `(target_date - Date.current) / 30.0` so a 2-day-out deadline reports ~0.07 months and `monthly_target_amount` scales proportionally. `[..., 0.0].max` keeps the past-due case zero-clamped. * fix(goals/stepper): inactive connector line uses border-subdued RUI audit: form-stepper progress line used `border-secondary` for the inactive state — same weight as the active step's border, so the active-step circle didn't visually pop against the line connecting it to the inactive step. Recede passive states. Swap to `border-subdued` (the DS's quieter divider) for the inactive (step 1) line state. The active state stays `border-inverse`. JS toggle in `goal_stepper_controller.js#updateStepperState` follows. * fix(goals): clarify "last saved" + add pledge timestamp to banner UX audit pair. Header "Last saved N days ago" was rendered from `Goal#last_matched_pledge_at` — date of the most recent *pledge-matched* entry — but the funding column on the same page shows "$X last 30d" computed off *all* entries. A user who deposited cash without recording a pledge saw "Funding · last 30d: $200" while the header still read "Last saved 47 days ago." Two adjacent figures contradicted each other. Rename the locale strings (used on both the index card and the show header) to reflect the actual data source: - footer_no_pledges: "No matched pledges yet" - footer_last_today: "Last pledge matched today" - footer_last_days: "Last pledge matched N days ago" Two open pledges into the same account previously rendered as two near-identical yellow banners with no way to tell which one the Cancel button targeted. Add a relative-time line below the body — "Pledged 2 hours ago" / "Pledged about a minute ago" — using `time_ago_in_words(pledge.created_at)`. Discriminator without changing the title or the action surface. * fix(goals): catch-up subtracts pending pledges from the demand UX audit finding. The catch-up alert demanded $X/mo without accounting for pledges the user had already recorded. The user recorded a $20k pledge → catch-up still demanded a fresh $20k → double-counting → stacked yellow CTAs telling them to do the thing they'd just done. Goal#catch_up_delta_money now subtracts `open_pledges.sum(amount)` from the demand: delta = max(monthly_target − pace − sum(open_pledges), 0) Uses the in-memory preloaded `open_pledges` collection (controllers already eager-load it), so no extra query. The clamp at zero keeps "$0/mo more" from rendering when pending pledges fully cover the gap. Alert branch in show.html.erb now also gates on `@goal.catch_up_delta_money.amount.positive?` — when the demand zeroes out via pending pledges, suppress the alert entirely. Status pill stays `:behind` (because `pace < required`), but the action surface goes quiet because the user already took it. * fix(goals/chart): full money format on "Short" annotation + 4-digit year on x-axis Two screenshot-driven audit fixes. The chart's "Short $160.6K" annotation used `_fmtMoneyShort`'s K/M shorthand while the page's other monetary readouts ("$26,621 to catch up", "$187,031 saved", "$1,830 last 30d") were full `Intl.NumberFormat` output. Inconsistent units in the same viewport. Switch the annotation to `_fmtMoney` ("$160,634 short") + reword to put the money first ("$X short" reads more naturally than "Short $X"). Y-axis tick labels keep the K/M shorthand — that column is space-constrained and the same convention is already understood as "axis abbreviation." The x-axis terminal tick rendered `"Jan '27"` from the `"%b '%y"` time-format string. A glance read it as January 27th of the year, not January 2027 — and the target-date tick is the single one users navigate the chart for. Switch to `"%b %Y"` → "Jan 2027." Slightly wider per tick; the existing adjacent- duplicate-removal logic keeps the count sane. * fix(goals): Mark complete confirm warns at sub-100% progress Behavioural audit edge case. A user clicking "Mark complete" at 80% saw the same generic confirm body as at 105% ("It leaves the Ongoing list…"). Sunk-cost-fallacy inversion + premature closure: once labelled complete, the goal anchors success on the truncated amount; future similar goals get smaller targets (regression to the lower aspiration). When `progress_percent < 100`, swap the confirm body to a specific one — "You're at 80% — $X of $Y. Marking complete records this as your achievement instead of the original target. Continue, or close this and adjust the target instead?" Doesn't block the action (some "stop short" cases are healthy — CFP literature explicitly endorses changing your mind), but makes the trade-off visible. Keep the original copy for the ≥ 100% case. `confirm_complete_body_short` is a new locale key; the kebab-menu builder picks between it and `confirm_complete_body` per-render. * fix(goals/pledge): redirect non-turbo-frame GET to goal show UX audit: `app/views/goal_pledges/new.html.erb` unconditionally renders the form in a DS::Dialog wrapper — when the user lands on `/goals/:id/pledges/new` directly (F5, bookmark, stale deep-link), the dialog renders as a freestanding modal over an otherwise-empty page. Compare to `goals/new.html.erb` which has a `turbo_frame_request?` branch with a full-page fallback. Pledges aren't usefully standalone — the modal only makes sense in goal context. Redirect non-frame GETs back to the goal show page instead of rendering the broken-looking standalone dialog. If we want a deep-linkable "open the pledge modal" experience later, that lands as a `?open=pledge` query on the show page that auto-fires the modal — out of scope here. * fix(goals): current_balance guards against linked-account currency drift Ruby idiom audit edge case. `linked_accounts.sum { |a| a.balance.to_d }` trusted the model's validation that all linked accounts share the goal's currency. The invariant holds at write-time, but direct DB writes, an account-currency edit outside goal validation, or future code that bypasses the validation chain could drift it. The naive sum would silently add raw EUR + USD numbers and surface the result as goal.currency. Filter `linked_accounts.select { |a| a.currency == currency }` and log/report-to-Sentry when the filtered count differs. The sum stays correct (no FX, no mixing) and the operator gets visibility into the drift. Same pattern as `Family#savings_inflow_velocity` already uses for the family-level rollup. * fix(goals/new): avatar default icon + restore .goal-avatar color-mix Two interlocking bugs on the new-goal modal's color/icon preview. 1. Avatar fell back to a literal "?" when icon + name were both blank — `form.object.name.to_s.strip.first&.upcase || "?"`. User reported the avatar looked empty on a fresh modal because the "?" disappears against many palette tints. Categories handle this by always showing the category icon. Replace the "?" fallback chain with a default `target` icon (matches the goal creation header's iconography): • icon present → render that icon • icon blank, name → render first letter • icon blank, no name → render default "target" icon 2. Picking a color via the Pickr color picker called `updateAvatarColors(color)` which inlined `style.backgroundColor` + `style.color = color` — overriding the `.goal-avatar` class's `color-mix(in oklab, var(--avatar-color) 55%, black)` rule. The class handles theme-aware contrast (darken text in light mode, full color in dark mode); the inline override killed it and text rendered at the same lightness as the 10% tint background. Update only the `--avatar-color` CSS variable; let the class continue computing the resolved colors. Wire the avatar to the goal-stepper controller properly: `_color_picker.html.erb` gains `data-goal-stepper-target="avatarPreview"` on the span. `nameChanged` now updates the avatar directly (the previous selector queried `[data-testid="goal-avatar"]` which doesn't exist on the color_picker span) and: - swaps to the first letter as the user types, - restores the default-icon HTML (captured at connect) when the name is cleared, - bails when the user has explicitly checked an icon radio (don't undo their choice). * fix(goals): demote Behind pill to neutral surface + drop em-dashes Behavioural + RUI audit follow-ups. The yellow overload finding flagged three concurrent yellow surfaces on the show page: the "Behind" status pill, the catch-up alert, and the open-pledge banner(s). Demoting the alert to outline ownership of the primary CTA addressed one layer, but the pill kept fighting the alert for hue attention. "Behind" is a state, not a call to action; the alert owns the action signal. Switch the pill's classes from `bg-yellow-500/10 text-yellow-700` to `bg-surface-inset text-yellow-700` (with the same dark-mode override). Background goes neutral (matches paused/archived chips); the text keeps the warning hue and the triangle-alert icon stays. Signal preserved, weight reduced. The yellow alert below now reads as the primary nudge instead of one of three matching tones. Also: copy/em-dash sweep across goal surfaces. User-facing strings that contained em-dashes ("Reaches 70% — $X of $Y", "into your linked account — Sure will catch it", "You're at 80% — $X of $Y") read as a stylistic tic; replace with comma/period/period respectively. Form-stepper review placeholders "—" become "…" (ellipsis reads as "not yet set" without the typographic weight). Code comments + log messages also scrubbed for consistency; awkward sed artifacts (//. its...) restored to readable English. No locale-key shape changes; pure string-content edits + one component-style tweak. * fix(goals/copy): apply stylistic pass from copy expert Second pass on user-facing strings after the em-dash sweep and yellow-pill demotion. Voice/abbreviation/edge-value parity. Voice consistency: - `index.pending_pledges_callout` reframed from "Sure is watching your linked accounts" (system-as-watcher voice) to "You have pending pledges. Sure will confirm them on the next sync." (user-actor, system-action). Matches the surrounding user-centric voice on the KPI strip and the helper-text pattern ("Sure will look for…", "Sure will catch it") used elsewhere. - `goal_pledges.new.helper_manual` flipped pronoun "We'll record" to "Sure will record" so the modal's two helper lines share a single narrator. The transfer-helper already says "Sure will look for"; this matches. - `form_stepper.errors.*` dropped the apologetic "Please …" voice ("Please give your goal a name.") for the terse imperative the rest of the feature uses ("Give your goal a name." / "Set a target above zero." / "Pick at least one funding account."). Parallelism: - `kpi.velocity_delta_zero_base` was the only `velocity_delta_*` string spelling out "30 days" while siblings used `30d`. Switch to "First 30d of activity" so the sub-tile reads in one unit. - `Depository` titlecase in `at_least_one_linked_account_required`, `must_be_depository`, and `no_depository_accounts` collapsed to lowercase. Common noun, not a UI label. Matches the empty-state body in `funding_accounts.empty.body` which was already lowercase. Test fixture for `must_be_depository` updated. - `projection.reached` was the same string as `celebration.heading` ("Goal reached. Nice work."), making the celebration moment feel templated. The projection slot is the chart's empty state when there's nothing to project; rephrase to "You've hit the target. No projection needed." Celebration keeps the warm tone. Edge value: - `celebration.body` was "You hit your $X target." When the user marks a goal complete at sub-100% (a flow the new `confirm_complete_body_short` already warns about), this lied about the achievement. Rewrite to "Goal closed at %{saved} of %{target}. Keep it as a record, or archive it now." Interpolation now passes both `saved` and `target` from the show template, so the celebration card honors the actual saved amount whether the user hit, overshot, or stopped short. Notes deferred (verify-only, not string changes): - `goal_card.footer_catch_up` is interpolated with `catch_up_delta_money` in `CardComponent#footer_line`; the show- page guard `.amount.positive?` already lives there. No copy change needed. - `pending_pledge.title.zero` bucket fires only when `count: 0` reaches the I18n call; `GoalPledge#days_left` clamps at 0, so the friendlier "expires today" copy is reachable. - `paused_banner.title` / `inactive.heading_paused` duplicate strings noted but left in place; consolidation is a separate refactor. * fix(goals): scale up card/widget/chart text, fix chart continuity, ease ring focal point Five small audit follow-ups bundled because they were each one-line swaps and individually wouldn't earn their own commit. Card text scale (vs Sure house style — budget_category h3 ≈ text-base, budget _actuals_summary value text-xl, account row text-sm subtype): - goal card title text-sm → text-base - goal card balance text-lg → text-xl - goal card pace/footer/subtitle text-[11px] → text-xs - funding row subtype subtitle text-xs → text-sm - funding row "last 30d / last 90d" labels text-[10px] → text-xs Chart label scale (projection chart was an outlier at font-size: 10 while time_series_chart_controller uses 12): - every `font-size: 10` in goal_projection_chart_controller.js → 12 - tooltip cssText font-size: 11 → 12 Color-picker pen toggle on the new-goal avatar was w-6 h-6 (24px circle, ~55% of the lg 44px avatar). Shrink to w-5 h-5 + add a w-3 h-3 class on the inner icon so it scales down with it. Graph continuity bug: the saved-line endpoint and the projection-line start point could disagree by tens of $thousands. Saved came from `Balance::ChartSeriesBuilder` (daily snapshot in `balances`), projection started at `currentAmount = goal.current_balance.to_f` (live `linked_accounts.sum(:balance)`). When the snapshot lagged the live read, the chart showed a vertical gap at the "today" marker. Filter any same-day-or-later points out of the raw saved series, always extend the saved series to `(today, currentAmount)`. Saved line now closes at exactly the projection's start. The recent balance-drop story is still honestly shown (the line dips toward the live value rather than ending at the stale snapshot). Ring card focal-point (RUI audit): the left ring card on goals#show sat at the same `shadow-border-xs` elevation as the projection chart and funding card. "When every card is raised, nothing's primary." Drop the shadow + container background — the ring now reads as a status panel sitting on the page surface, not a content card competing with its neighbours. Paused/archived/celebration/empty right-slot variants keep elevation since they ARE content cards. Deferred: light-mode pink distribution-bar contrast. The fix needs a DS token decision (hairline outline vs darker step on the palette entries); rolling it into a polish PR risks dragging in DS changes unrelated to goals. Logged for a follow-up. * fix(goals): unified per-goal account color map + smaller pen toggle User flagged two regressions: account colors didn't match between the goal preview-card avatar stack on the index and the funding-widget rows on the show page, and the color-picker pen toggle on the new-goal modal still felt too big. Color matching: - `AccountStackComponent` (index card) used `Goals::AvatarComponent.color_for(account.name)` — MD5-of-name into the 10-color palette. - `FundingAccountsBreakdownComponent` (show page) recently switched to `color_for(account.id.to_s)` — MD5-of-id. - Same account, two surfaces, two different palette picks. Plus either hashing scheme can collide within a multi-account goal (palette has 10 colors). Move ownership to the Goal model: `Goal#account_color_map` returns `{ account_id => palette_hex }` for the goal's linked accounts. Sort by `id` for a stable order across reloads, then assign `palette[i % palette.size]`. Stable + collision-free up to 10 accounts in a single goal (a realistic upper bound — most goals link 1-3). Both consumers now read off the same source: - `AccountStackComponent.new(accounts:, color_map:)` accepts a hash and falls back to the name-hash if no map provided (kept for callers that don't have a goal in scope yet). - `FundingAccountsBreakdownComponent#color_for` reads `goal.account_color_map[account.id]`. - Goal card on index passes `goal.account_color_map` to the stack. Pen toggle: The new-goal color-picker pen sat in a `w-5 h-5` circle with a `border` ring + `text-secondary` icon. The border + secondary text weight kept it loud against the avatar even at 20px. Drop the border, drop the size another step (`w-4 h-4`), recolor the icon `text-subdued` + `hover:text-secondary` so the affordance recedes when not interacted with. Position shifts from `-bottom-1 -right-1` (8px overhang) to `-bottom-0.5 -right-0.5` (2px overhang) since the smaller circle doesn't need the larger float. Icon swaps "pen" for "pencil" (the more conventional edit indicator across Sure). * fix(goals/show): move Edit into kebab, match house style User clarification on the "too big edit icon" finding: the header Edit button itself (not its icon) is what felt wrong. Investigation showed the wider Sure pattern. Every other "Edit" affordance in Sure lives inside a DS::Menu kebab: - app/views/categories/_category.html.erb - app/views/rules/_rule.html.erb - app/views/family_merchants/_family_merchant.html.erb - app/views/chats/_chat_nav.html.erb - app/views/accounts/show/_menu.html.erb - app/views/transactions/show.html.erb Header rows reserve top-level buttons for primary actions (e.g. "New transaction", "Record pledge"). The goal show page was the outlier — Edit as an outline button next to Record pledge, which left two competing CTAs in the header. Move `menu.with_item(text: t(".edit"), icon: "pencil", ...)` to the top of the kebab list. Header now has a single primary CTA (Record pledge, demoted to outline when status is :behind) + the kebab. Matches every other Sure resource page; eliminates the "button-too-big" framing entirely without resorting to ad-hoc icon-size overrides (the `[&>svg]:w-4 [&>svg]:h-4` arbitrary selector hack would have been a one-off, nobody else uses it). Avatar pen toggle on the new-goal color picker stays reverted to its original w-6 h-6 + border-2 form, per the user. * feat(goals/demo): seed full state-coverage matrix + sample pledges User asked for demo seed variety so every goal state surfaces on at least one card. Previous seed only spanned 4 AASM states; the computed status (:reached / :on_track / :behind / :no_target_date) and the edge-state copy paths (past-due target_date, open pledge banner, "Last pledge matched") were absent. New seed coverage matrix: AASM states (column): active → Vacation in Italy, Wedding fund, Emergency fund, House downpayment, Coffee gear, Tax prep buffer paused → Sabbatical completed → Paid-off car archived → Old laptop fund Computed status (active goals): :behind → Vacation in Italy, House downpayment, Tax prep buffer :on_track-ish → Wedding fund (12-month timeline + small target) :no_target_date → Emergency fund :reached → Coffee gear (target 150 below any plausible account balance — progress hits 100% live) Edge surfaces: Past-due active → Tax prep buffer (target_date 2.months.ago, exercises "was due" header copy and the months_remaining = 0 branch in monthly_target_amount) Open pledge banner → Vacation in Italy + House downpayment each ship a single open pledge. The show-page banner renders; the index pending-pledges callout renders because @any_pending_pledge flips true. Matched pledge → Wedding fund: after the main seed loop, find_by(name: "Wedding fund") + locate the most recent non-claimed primary-account inflow Transaction (>= 30 days, amount < 0 per Sure's sign convention), create a matched-status pledge against it, stamp the Transaction's extra->goal->pledge_id per the partial-unique-index invariant. The show-header then renders "Last pledge matched N days ago" via Goal#last_matched_pledge_at. Implementation notes: - Pledges spec embeds inside each goal_spec as an optional `pledges:` array. The loop creates them after goal.save! using the goal's linked_accounts as the default account; the GoalPledge# account_must_be_linked_to_goal validation passes because every spec's account is one of the goal's linked accounts. - The matched-pledge seed is split into a dedicated helper (`seed_matched_pledge_demo_for_wedding!`) because it depends on Transactions seeded earlier in the demo flow. Both no-Wedding- goal and no-recent-inflow guards bail cleanly so older demo variants still work. - All seed targets are intentional. Goal#status reads the live linked-account balance + 90-day inflow at render time, so the demo statuses adapt to whatever the rest of the demo seeded. The targets are sized so the *intended* status is the most likely one for typical demo data. Local DB unaffected: this is the demo-family generator only, run via `Demo::Generator.new.generate_default_data!` against a fresh family. * chore(goals): drop architecture notes from the repo Pulls the two early design notes out of git tracking. They covered the V1 ledger-based design and the engineering mechanics that led to the V2 rewrite. With V2 shipped, the notes have served their purpose and the design-of-record now lives in the code + this PR. Files stay on disk locally (added to .git/info/exclude so future git status doesn't re-surface them as untracked). Anyone who wants the V1 reference can pull from the source branch where this work started. * fix(goals): test pledge new across both turbo-frame and full-page paths CI failure on the prior commit: `GoalPledgesControllerTest# test_new_renders_the_pledge_form` expected 200 but got a 302 to the goal show page. The recently-added non-frame guard on `GoalPledgesController#new` redirects direct GETs (F5, bookmark) back to the goal so the dialog doesn't render standalone, and the test wasn't sending the `Turbo-Frame` header that the modal flow uses in production. Split the test into the two paths the controller actually serves: - `new renders the pledge form inside a turbo frame` passes a `Turbo-Frame: modal` header and asserts 200 — the real modal flow. - `new redirects to the goal show page on a non-frame GET` asserts the 302 to `goal_path(@goal)` — the guard's intended branch. Together they cover the controller's actual contract. * docs(goals): add llm-guide reference for the goals feature Captures the architecture, key files, data model, status semantics, pledge match policy, connected-vs-manual account detection, color map convention, common tasks, and known gotchas. Matches the existing llm-guides pattern (architecture diagram + file inventory + task-oriented sections + reproducible commands). The doc is forward-looking: it covers how to add a new field to Goal, a new status branch, a new pledge kind, and how to safely touch the reconciler. The "Gotchas" section catalogues the known-incomplete-but-shipping items so a future audit doesn't re-derive them from scratch. Demo data regeneration command is included for anyone who needs to refresh the seed. * fix(goals/index): completed goals join the chip-filterable grid Completed goals previously lived in a dedicated section below the active grid that was always visible regardless of which chip the user selected. They were the only state without chip filter representation. Fold completed into the main grid in controller-side order: active goals first (sorted by status rank), completed after (alphabetical). Drop the separate "Completed" section. The `data-goal-status="completed"` on each card (from `Goal#display_status`) makes them filter naturally when the new `completed` chip is selected. Archived stays in its own collapsed-by-default `<details>` section below — the visual-hide-by-default is the point there and a chip wouldn't preserve that. `@active_goals` keeps its meaning (active-only) for the KPI strip, the pending-pledges callout, and the search-visibility check needs `@grid_goals` so search shows up at six combined cards. Section heading: "Ongoing" → "Goals". The heading now covers the combined active + completed list, and "Ongoing" misrepresented what's below it. * fix(goals): address AI review on PR #1798 (CodeRabbit + Codex) Correctness: - GoalPledge#matches? rejects outflows on transfer pledges so a +$200 purchase no longer satisfies a $200 deposit pledge after .abs - GoalsController#sync_linked_accounts! saves through the goal so currency/depository/family validations actually run on update - AlreadyClaimedError replaces empty RecordInvalid in resolve_with! and reconciler rescues the dedicated class - SweepExpiredGoalPledgesJob wraps each expire! in a per-record rescue - Assistant::Function::CreateGoal disambiguates duplicate account names and returns an absolute URL via mailer host config - Family#savings_inflow_velocity defensively scopes from the family's accounts (was Account.joins(:goal_accounts).where(goal_id: ...)) - GoalPledgesController#set_goal preloads linked_accounts + providers to drop the N+1 on any_connected_account? - Stepper subtitle update walks to the enclosing dialog before querySelector so two stepper instances don't fight over one header - categories/_form.html.erb data-action targets color-icon-picker, not the non-existent "category" controller UX / visual: - Projection chart drops preserveAspectRatio="none" and pins endDate at today for past-due goals so the today marker stays in-domain - _color_picker / categories form swap non-standard border-1 for border - Goals index search input uses ring-alpha-black-100 (was raw gray-500) Refactors: - Goal#header_summary extracts the multi-line ERB header block - Goal#catch_up_delta_money sums open_pledges in SQL - Goal#projection_summary uses I18n.l for the on-track month label - Account#default_pledge_kind moves the manual/transfer decision out of GoalPledgesController - GoalPledge::Reconciler iterates ordered (created_at, id) so first-claim wins is deterministic under non-sequential PKs - Goals::FundingAccountsBreakdownComponent + Goals::AccountStackComponent use clamp(0..) instead of Float::INFINITY / [x, 0].max - Goals::StatusPillComponent#label provides a titleize fallback - Goal projection chart skips the redundant initial _draw and reuses the snapped point in the past branch (no double-bisect) - Goal pledge preview drops maximumFractionDigits: 0 so USD/EUR show cents while JPY/KRW stay whole-unit - Demo generator captures the Wedding fund goal in the seed loop instead of looking it up by hardcoded name Tests: - GoalPledgeTest: outflow rejection - GoalsControllerTest: cross-currency attachment rejected on update - SweepExpiredGoalPledgesJobTest: cancelled coverage + per-record rescue - GoalTest: pledge_action_label_key flips to manual_save without an unconditional guard * fix(goals): address second AI review round on PR #1798 - Parse "YYYY-MM-DD" date-only strings as local midnight in the projection chart so users west of UTC stop seeing the today marker and hover dates land one calendar day back - Order the demo-generator depository pickup by (created_at, id) so primary/secondary roles stay stable across reseeds and the state matrix (behind / on_track / reached / no_target_date / past-due) surfaces the same goals every time - Drop the brittle " · "-split on goals.goal_card.days_left in Goal#header_summary (the translation has no separator suffix) - Goal#projection_payload ships pre-formatted strings for the static chart annotations (target_amount_label / short, projection_end_label, projection_shortfall_label, pending_pledge_label_short) and the controller now renders those instead of running Intl.NumberFormat on each draw. Y-axis tick labels stay JS-side because they depend on D3's dynamically-chosen tick values. * fix(goals): round-3 review polish on PR #1798 - Demo seed_matched_pledge tie-breaks `entries.date DESC` with `entries.id DESC` so dense-same-day inflows pick the same row on every reseed - projection_payload exposes the family-currency symbol via Money.new(0, currency).symbol; the chart's `_fmtMoneyShort` / fallback now reads it instead of the hardcoded $/€/£ map, so JPY/KRW/CHF goals get the correct glyph * fix(goals/chart): use optional chain for currency_symbol fallback Biome lint flagged `(this.dataValue && this.dataValue.x) || fallback` as `lint/complexity/useOptionalChain`. Same behaviour with `this.dataValue?.x || fallback`, lint clean. * ux(goals): polish detail page + unbreak render - Fix render-blocker: Money#symbol doesn't exist (use #currency.symbol). - Sanitize projection_summary so the _html locale renders <strong> markup instead of escaping it. - Switch donut + card ring track to --budget-unused-fill; --budget-unallocated-fill resolves to the same gray as bg-surface in light mode so the unfilled arc was invisible on the detail page. - Mobile detail: drop avatar, right-align action buttons, stack projection header (subtitle + legend) so the subtitle reads on one line; bump legend gap on mobile. - Nowrap the projected reach-date so e.g. "Jul 2026" stays together. * ux(goals): redesign show page — one CTA, calm banners Header collapses to title + kebab. The status pill and the `Record pledge` button leave the title row. Status moves into a one-line callout below the subtitle that doubles as the catch-up demand when behind, the reach-date when on track, or a prompt for a target date when missing. `Record pledge` is now the only pledge entry point on the page and lives under the ring. Behind goals pre-fill it with the catch-up delta. The standalone catch-up alert card is gone — its title is the callout, its pace breakdown moves into the projection chart's subtitle, and its CTA is the ring-adjacent button. The "Adjust target instead" link is absorbed into the kebab's existing Edit item. Pending-pledge banner switches from a warning Alert to a neutral container chip. It is informational state, not a warning. Title carries the relative pledged-at meta inline; verbose auto-confirms body stays but in subdued size. Projection chart drops the today-line pending stub (vertical line + dashed marker + "+ pending $X" text). That data already lives in the pending banner above the chart; the duplicate annotation clutters the today line, the small dashed circle reads as misaligned at small pending amounts, and the label overlaps the projection trajectory. Shortfall label gets a paint-order halo so it stays legible across the dashed projection line. * Pipelock noise * fix(goals): jjmata review — reconciler guard, chart i18n, pace test Three issues raised on PR #1798 review: - ProviderImportAdapter now memoizes account.goal_accounts.exists? per-account so a bulk historical import on an unlinked account short-circuits the reconciler instead of paying one SELECT per row. Linked accounts still hit the per-row reconciler with no change. - goal_projection_chart_controller.js reads Today / Projected / Saved labels via Stimulus values fed from goals.show.projection.* locale keys instead of inlining English. - goal_test.rb now covers Goal#pace with real inflows, asserting the 90-day window cutoff plus the Transaction.excluding_pending and entries.excluded = false filters. * fix(preview): replace PR preview cleanly on redeploy (#1819) * fix(preview): delete stale container app before redeploy (#1820) * fix(preview): run preview container in development (#1821) * ux(goals): fix "0 of N · N reached" KPI weirdness When every active goal already hit its target, the "Goals on track" tile read "0 of 2 · 2 reached" — logically correct but emotionally upside-down. Reached goals aren't being tracked toward pace anymore; they belong in the trophy column, not in the fraction. - New `tracked_total` excludes reached and paused goals from the denominator. Paused stops the pace clock on purpose; reached has already cleared it. - When `tracked_total` hits zero and at least one goal is reached, the tile swaps to a celebratory empty state ("All caught up · N reached") instead of trying to render a fraction with no denominator. - Drop "reached" from the subline when the fraction is calculable. The fraction is a needle, "N reached" is a trophy — surfacing them together muddied the message. Reached only appears in the all-caught- up empty state from here on. Active-first / reached-last grid order already drops out of the existing ACTIVE_STATUS_RANK sort (reached defaults to the lowest rank so it naturally lands after behind / on_track / no_target_date / paused). * feat(goals): gate Goals v2 behind beta features toggle Add require_beta_features! to GoalsController and GoalPledgesController, hide the Goals nav item for non-beta users, and tag index/show headers with the Beta pill marker. Update controller tests to enable the preference in setup and assert the redirect for users without access. * feat(goals): add Beta dot marker on sidebar nav rail Pass beta: true on gated nav items so the nav_item partial renders a violet dot-only pill in the top-right of the icon. The doc covers the dot_only usage; the nav itself was never wired up before merge. * fix(DS::Pill): readable contrast in light mode + drop pill from Goal detail - Bind CSS `color-scheme` to Sure's `data-theme` attribute so the pill's `light-dark()` resolves to the side that matches the active theme. In the dark theme it was previously falling back to the light branch. - Darken light-mode pill text 30% with black on top of the 700 stop so the 10–11px uppercase label reads against the violet-50 background. - Drop the Beta pill from the Goal detail page header. A single goal is not the feature; the pill belongs on the feature index, not on each record. * docs(beta-gating): document main-nav dot marker via beta: local The nav-item partial already supports a `beta: true` local that overlays the DS::Pill dot on the icon, but the gating guide didn't show how to wire a gated nav entry through it. Add a short "Gating the main nav" section with the compact-array pattern, and mention the flag in the GA removal checklist. * feat(beta-gating): beta_gated_nav_item helper auto-marks gated entries Wraps the conditional + dot wiring into a single call so adding a new beta nav entry doesn't require remembering to set `beta: true` by hand or duplicating the `beta_features_enabled?` check. Naming mirrors the existing `BetaGateable` concern. * refactor(css): move .goal-avatar rules out of application.css Goals-specific styling doesn't belong in the global stylesheet. Extract the avatar tint + theme-aware text color into a topical goals.css and @import it alongside the other feature CSS files. * fix(goals): validate color format + restore cascade on drop migration - Add hex-format validation on Goal#color so submissions can't smuggle arbitrary CSS into the style attribute on the avatar / picker preview. The picker accepts custom hexes, so format validation (not inclusion) is the right shape — anything not matching #RRGGBB is rejected at the model boundary. - Fix the on_delete in the down block of drop_goal_contributions to match the original cascade. Restoring with restrict was a schema drift that would have shifted referential behavior after a rollback. * fix(goals): clear state-dependent caches on AASM transition + harden sweep job - Goal: `display_status` and `projection_summary` memoize a value that depends on the AASM state column. Without resetting them after a transition the same instance keeps returning the pre-transition value. Hook `after_all_transitions :reset_state_dependent_caches!` undoes the memos so post-`archive!` / post-`pause!` reads see the new state. - SweepExpiredGoalPledgesJob: the inner rescue covered per-pledge failures but not cursor-phase failures (DB blip, OOM mid-batch). Add an outer rescue that reports + re-raises so Sentry sees the failure and Sidekiq retries the job. * i18n + a11y(goals): extract picker strings + drop redundant status-pill aria-label - Color picker had four hardcoded English strings ("Color", "Icon", "Poor contrast, choose darker color or", "auto-adjust."). Move them under `goals.color_picker.*` and call them through `t()`. CLAUDE.md requires every user-facing string go through i18n. - Status pill duplicated its visible label in `aria-label`, which makes screen readers ignore the visible text. Drop the override so the visible label is the accessible name. * fix(goals JS): listener cleanup on color/icon picker + debounce filter URL sync - color_icon_picker: listeners were attached in initialize() with inline arrows, so they had no removable reference and no disconnect() cleanup. Every Turbo navigation that re-rendered the picker stacked another listener on the same node and left the Pickr instance alive. Move attachment to connect(), store bound references, and clean up in disconnect() (including destroyAndRemove on the Pickr). - goals_filter: replaceState fired on every keystroke. Debounce the URL sync 200 ms so a typing burst collapses into a single update. The visible filtering stays real-time. Clear the timer in disconnect() so a pending sync doesn't fire on an unmounted controller. * fix(a11y): focus trap + returnFocus on DS::Dialog Native <dialog>.showModal() moves focus inside the dialog on open but doesn't trap Tab / Shift+Tab, and focus restoration on close is inconsistent across engines. Add three things to the dialog controller: - Capture document.activeElement before showModal() so the trigger is recoverable when the dialog closes (ESC, backdrop click, explicit close button, programmatic close all route through the native close event). - Wrap Tab inside the dialog so a keyboard user can't tab out into the scrim-covered page behind. - Restore focus to the captured trigger on the close event. If the trigger has been detached (Turbo morphed it out), skip silently rather than throw. Verified manually: opening the new-goal modal moves focus to the name input; ESC restores focus to the "New goal" link; Tab wraps from the last focusable back to the first. * perf + tests(goals): share account-ids across velocity windows + cover gaps - Family#savings_inflow_windows wraps the current/prior 30d sums in a single helper that memoizes the linked-account-id lookup. The KPI tile on the goals index used to run the join+pluck twice per request. - Replace two instance_variable_set pokes and one any_instance.stubs in the goal/controller tests. Refetching the goal exercises the real request lifecycle and stops the tests from leaning on implementation details. The 'All caught up' assertion now relies on a real reached state (target 1 vs the depository fixture's 5000 balance) rather than stubbing :status. - Add tests covering: hex format validation on Goal#color, AASM cache reset (display_status reads the new state on the same instance after pause!), negative pledge amount rejection, expire! no-op on already- expired pledge, cancel! NotOpenError on non-open pledge, sweep job idempotency on a second pass, and strong-params rejection of state / family_id on goal create. * fix(goals): apply CodeRabbit findings - Switch the goal_accounts → accounts FK from on_delete: :cascade to :restrict. `Goal#must_have_at_least_one_linked_account` is enforced at write time; the cascade let a raw DELETE silently orphan a Goal whose only link pointed at the deleted account. Normal Rails Account#destroy still cleans up via `dependent: :destroy`, but the restrict guarantees the DB rejects any path that bypasses the association. - projection_payload: required_monthly is now monthly_target_amount&.to_f so open-ended (no-target-date) goals serialize required_monthly: null instead of 0, matching the absence of a required pace. - index page + sidebar nav-rail dot now read the Beta label via t("shared.beta") (and a new shared.beta locale key) instead of the hardcoded "Beta" literal. - _status_callout uses the view-helper t(...) instead of I18n.t(...) for the status label so it follows the same convention as the rest of the goals views. - goal_projection_chart: read the computed style before stamping position: relative so a stylesheet-defined position (fixed/sticky/ absolute) isn't clobbered. - preview-deploy: add `set -euo pipefail` around the wrangler container lookup so a curl/jq failure fails the job instead of producing an empty CONTAINER_ID and silently skipping cleanup. * revert(goals): move .goal-avatar back into application.css Sure's convention for one-off custom classes (.combobox, .scrollbar, .windows, .prose variants, .table-divider, .turbo-progress-bar) is to define them directly in application.css. Topical files (privacy-mode, date-picker-dark-mode, print-report) are reserved for coherent feature namespaces with multiple rules. A single .goal-avatar rule belongs with the other custom classes. * fix(goals): goal status pill uses DS::Pill outline (consolidate + survive hover bg) The status pill on the goal card used a 10%-alpha fill (bg-warning/10, bg-green-500/10). On the card's hover state (bg-surface-hover) the fill blended into the new background and the pill lost its tint outline. Extend DS::Pill with a green tone and an optional icon: param (renders a Lucide icon in place of the dot) so the same primitive can carry both the beta marker and the goal status badges. Map Goals::StatusPillComponent to DS::Pill outline style — transparent fill + colored border + colored text + glyph — which is immune to any change in the surrounding card bg. One badge primitive, light-mode contrast already fixed (the color-mix 30% darkening on text), and the card hover state no longer washes out the status. * fix(goals): drop hover bg on card, use subtle shadow lift instead The card was the only place in Sure setting hover:bg-surface-hover on a bg-container card; every other static card (settings, recurring transactions, ai_prompts, etc.) stays still. The hover bg (gray-100) landed almost exactly on top of the ring track (gray-200) and washed out the pill fill, fighting the very signals the card was trying to show. Swap to hover:shadow-sm — the lift matches the transaction-tabs precedent already in Sure, the bg stays white, and ring track + status pill keep their contrast. * fix(goals): drop no-target-date goals from the on-track denominator The KPI tile reads 'X of Y on track'. Y was every active goal minus reached + paused, which included open-ended goals (no target_date). But an open-ended goal has no required monthly pace to compare against — by definition it can be neither on track nor behind. Counting it in the denominator dragged the ratio down and never improved as the user kept saving (the fraction stays stuck because the open-ended goal is never a hit). Exclude :no_target_date from tracked_total. Numerator unchanged. The subline still surfaces 'N without a deadline' as informational so the user knows those goals exist. * fix(goals): keep archived cards out of the filter loop entirely The earlier 'filter archived too' attempts kept toggling the archived section based on chip state, which produced more confusion than value (filter shows partial counts, archived hides on some chips, etc.). Step back: archived stays in its own collapsed-by-default section, always visible, never reacts to the chip / search filter. Render the cards with filterable: false so they don't add a filter target in the first place — no JS handling needed, and the active grid + chips behave exactly like they did before this whole thread. * feat(goals): pending-pledge dot on card avatar Goals with open + unexpired pledges now carry a small amber DS::Pill dot at the top-right of the avatar on the index card. Same primitive + position pattern as the beta gate dot on the sidebar nav, so the 'small marker' affordance reads consistently across the app. Pledges are preloaded via the existing .includes(:open_pledges, ...) on the index query, so the indicator is free at request time. * fix(goals): swap pending-pledge avatar dot for inline clock glyph The amber DS::Pill dot on the avatar collided visually with the amber 'Behind' status pill on the same card — two amber signals in the same eye-line. Move the indicator to a text-subdued clock icon between the goal name and the status pill: quieter, semantically clearer (clock = pending sync / time-bound), no tone collision with the status palette. Same accessibility hook (aria-label + title). * feat(goals): footer 'N pending' on cards + drop warning tone from top callout - Pending pledges surface in the card footer as '· N pending' tacked on after the existing footer line (text-subdued). Quiet, semantic, doesn't compete with the status pill or the avatar. - The top-of-page 'You have pending pledges' callout was using the amber DS::Alert warning variant. Pending isn't a warning — it's a passive 'we're waiting on a sync' state. Switch to the info variant so the visual weight matches the meaning. * fix(goals/demo): seed goals in generate_new_user_data_for! Cloudflare preview entrypoint, FamilyResetJob, and the Settings "Reset + load sample data" flow all go through generate_new_user_data_for!, which seeded categories/accounts/transactions/budget but not goals. Move generate_goals! inside this method (alongside the same call already in generate_default_data!) so every sample-data surface gets the full state-coverage matrix. * fix(goals): card hover uses bg-container-hover (gray-50) instead of shadow lift Mirror the affordance used in the accounts/select_provider screen and the bank-sync flows: a near-imperceptible gray-50 fill swap rather than a shadow. Lighter than the previous shadow lift, doesn't introduce elevation noise inside the grid, and the ring track (gray-200) + status pill outline still keep enough separation against the gray-50 hover bg that we don't reintroduce the original contrast issue. * fix(preview): surface demo data failure logs (#1865) * refactor(goals): use semantic color tokens for ring + status callout `Goals::CardComponent#ring_color` and `goals/_status_callout` reached into the Tailwind palette directly (`text-yellow-700`, `var(--color-green-600)`, etc.) for status-coded colors. The sure-design-system already exposes the matching semantic tokens (`text-warning`, `text-success`, `--color-success`, `--color-warning`), which theme-swap correctly in dark mode and survive palette renames without view edits. - `ring_color`: collapse `:reached` / `:on_track` to `--color-success` (the status pill already differentiates them via icon — completed star vs check) and `:behind` to `--color-warning`. The `:no_target_date` fallback keeps `--color-gray-400` for now since there's no semantic neutral token; that gets cleaned up alongside the DS::ProgressRing extraction. - `_status_callout`: drop `text-yellow-700 theme-dark:text-yellow-300` and `text-green-700 theme-dark:text-green-300` for the equivalent semantic `text-warning` / `text-success` utilities. No visual regression in light mode (success collapses two adjacent greens into one); dark mode now properly inverts via the design system's theme variants instead of hand-rolled overrides. The `stroke="var(--budget-unused-fill)"` track on the inline card ring stays for now — that's a token-rename refactor that touches budget code outside this PR's scope and lands cleanest with the DS::ProgressRing primitive that consolidates the three ring implementations. * fix(goals): replace ring-gray-500 with semantic ring-alpha-black-500 token The colour-picker swatches were using the raw Tailwind palette utility `peer-checked:ring-gray-500`. Swap for the design-system functional token `peer-checked:ring-alpha-black-500` so the focus ring inherits the same alpha-on-surface treatment used elsewhere in the system and respects dark mode. Flagged by sure-design's DS Drift Patrol on #1798. * refactor(goals): migrate index search field to DS::SearchInput #1853 just landed on `main` (`8e444ff9`), so the goals index search input can move off the hand-rolled markup and onto the new `DS::SearchInput` primitive. Behaviour unchanged — the `data-goals-filter-target="input"` and `data-action="input->goals-filter#filter"` hooks pass through via the component's `data:` option, and the wrapper's `flex-1 min-w-[200px]` carries through via the component's `class:` arg. Drops the broken `focus:ring-gray-500` lookalike (the hand-rolled class used `focus:ring-alpha-black-100` which is fine, but the new primitive uses the canonical `focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900` pattern from DS::Button — same focus contract everywhere). Addresses sure-design's DS Drift Patrol finding on #1798. * refactor(goals): migrate archived <details> to DS::Disclosure :inline #1858's :inline variant landed (commit 8de14ed2), so the goals index archived-section toggle can move off the raw <details> and onto the shared primitive. Behaviour and look unchanged — the custom summary content (chevron + uppercase heading + tabular count) passes through the `summary_content` slot; the `:inline` variant adds nothing on top besides the focus-visible ring shared with the other DS::Disclosure variants. Addresses the third sure-design DS Drift finding on #1798 (the other two — DS::SearchInput + ring-gray-500 — already landed earlier). * fix(goals): cover money displays with privacy-sensitive Audit-driven sweep. The class was already on the obvious surfaces (KPI strip, ring center, card balance, funding-accounts breakdown); these were the secondary surfaces missed in the initial PR — money interpolated into descriptive prose, account-picker balances, live previews, and the projection chart tooltip. - card_component: target divisor next to the masked balance, pace line, and behind-status footer (`footer_has_money?` helper keeps non-money branches unmasked so paused / archived / "Goal reached" copy stays readable in privacy mode). - show: header_summary (target + date subtitle), to_go remaining, inactive recap body, celebration body, catch_up body. - _status_callout: conditional on `goal.status == :behind` — only that branch carries an amount; on_track / no_target_date have date or static copy. - _form_edit + _form_stepper: account balance shown in the linked- account picker rows. - _form_stepper review section: reviewSummary + reviewSuggested ps (Stimulus injects target / suggested $X/mo into both). - _pending_pledge_banner: banner title span (amount + account + days). - goal_pledges/new: live preview p (Stimulus injects "Reaches X%, $A of $B" / "Hits your $B target"). - goal_projection_chart_controller: tooltip was inline-styled with hard-coded gray-900 + white (DS drift) and had no privacy class. Replaced cssText with className using bg-container + text-primary + border-secondary + rounded-lg + privacy-sensitive — mirrors the pattern in time_series_chart_controller and the post-#1996 sankey fix. Tooltip now respects theme and privacy mode. * fix(ds): DS::Disclosure summary_class override; migrate color picker Resolves sure-design DS drift patrol findings (raw <details> on goals/_color_picker and categories/_form). The color-icon-picker's <summary> is a 24/28px pencil button absolutely positioned next to the avatar — none of DS::Disclosure's existing variants (default / card / card_inset / inline) match that trigger shape, so the bot's suggested swap would regress the visual. - DS::Disclosure: add optional `summary_class:` kwarg. When set, the caller's class string replaces the variant's hard-coded summary chrome; otherwise the existing variant logic is preserved (verified against the 8 existing callsites — none pass summary_class, all fall through to current behavior). - goals/_color_picker + categories/_form: swap raw <details> for DS::Disclosure with summary_class carrying the pencil-button positioning. Stimulus data attributes (`color-icon-picker-target` and the outside-click handler) forwarded via **opts to tag.details so the controller still finds its target. The DS::Disclosure-rendered popover content now sits inside the component's `<div class="mt-2">` wrapper, but the popups themselves are `position: absolute` / `position: fixed`, so the wrapper is out-of-flow neutral. * fix(goals): drop new-goal stepper, unify create + edit form The 2-step stepper on the create modal carried a review step whose only real signal was a derived "Save $X/mo to hit it on time" hint. Name, amount, and date are all visible in step 1, so the review step was re-displaying form values the user just typed. Collapses both flows into a single panel: - `_form_stepper.html.erb` + `_form_edit.html.erb` → single `_form.html.erb` driven by `goal.persisted?` for URL / method / submit label. - `goal_stepper_controller.js` → `goal_form_controller.js`. Drops the step1Panel / step2Panel / step1Indicator / step2Indicator / step1Circle / step2Circle / stepperLine / reviewName / reviewSummary / reviewSuggested / footerLeftButton / footerRightButton / submitButton target plumbing and the next / back / blockEnter / updateStepperState / updateFooter / updateReview methods. Keeps name-validation, amount-validation, accounts-required validation, avatar-preview-from- name, and the suggested-pace computation — that one now writes into an inline `<p data-goal-form-target="suggested">` below the target_date field instead of the review card. - `new.html.erb`: drops the `Step 1 of 2 · Goal details` subtitle target. New `goals.new.subtitle` replaces the two step subtitles. - `edit.html.erb`: renders the same `form` partial. - `_color_picker.html.erb`: `data-goal-stepper-target="avatarPreview"` → `data-goal-form-target="avatarPreview"` (same Stimulus target, renamed for the new controller scope). - `funding_accounts_breakdown_component.rb`: i18n key path moves to `goals.form.subtypes.*` matching the locale restructure. - `en.yml`: `goals.form_stepper.step1.fields.*` → `goals.form.fields.*`. `step2.*` and the `back` / `continue` / `cancel` keys drop. New `goals.form.create` ("Create goal") + `goals.form.save` ("Save changes") drive the submit-button label. UX delta: the user no longer sees a "Step 1 of 2 / Step 2 of 2" beat. The form is short enough that everything fits in one panel; the only value-add from the old step 2 — the suggested-pace hint — now updates live inline as the amount / date / account-count changes. All 20 `test/controllers/goals_controller_test.rb` tests still pass. `bundle exec erb_lint` clean on the touched templates. * fix(ci): extract github.event refs into job env in preview-deploy Pulls `github.event.pull_request.number` and `github.event.pull_request.head.sha` out of every shell `run:` block and `actions/github-script` body into job-level env vars. The PR number is nominally an integer (no immediate injection risk), but the *pattern* of inlining a `github.event.*` expression into a privileged workflow's shell scripts is what the SAST finding wants to eliminate: - The workflow holds `CLOUDFLARE_API_TOKEN` and `CLOUDFLARE_ACCOUNT_ID`. - A future copy/paste of one of these step bodies onto a user- controlled string (branch name, PR title, commit message) would silently become an arbitrary command-injection path. Touches: - Job-level `env: { PR_NUMBER, HEAD_SHA }` so every step inherits. - "Configure preview files": `sed` substitution now reads `${PR_NUMBER}` from the shell env (the literal-placeholder side stays escaped as `\${PR_NUMBER}`). - "Delete existing preview container app" + "Delete existing preview Worker": shell var assignments use `${PR_NUMBER}`. - "Create GitHub Deployment" github-script: `process.env.PR_NUMBER` inside the JS template literal instead of GHA template interpolation. - "Deploy to Cloudflare Containers": `${PR_NUMBER}` in the shell; `CLOUDFLARE_WORKERS_SUBDOMAIN` also lifted into the step's `env:` block so the URL template uses `${CLOUDFLARE_WORKERS_SUBDOMAIN}`, not a templated secret expression in the shell command. - "Comment on PR" github-script: replaces the four `${{ github.event.pull_request.* }}` interpolations with `process.env.PR_NUMBER` / `process.env.HEAD_SHA` and lifts the preview URL via step env. `issue_number` is `Number(...)`-coerced since env values are strings. - "Store cleanup metadata" artifact name: uses `${{ env.PR_NUMBER }}` (template context, not shell). YAML still validates (`ruby -ryaml -e 'YAML.load_file(...)'`). The only remaining `github.event.pull_request.*` references are the job- gate `if:` condition and the env-extraction definitions themselves — both safe contexts. * fix(goals): Number.NaN over global NaN in goal_form_controller Biome's lint/style/useNumberNamespace rule. Same semantics — Number.NaN is the explicit namespace form post-ES2015. CI lint_js was failing on this line. * fix(ci): drop leftover preview pre-delete steps after isolation merge The preview isolation refactor (#2025) removed the "Delete existing preview container/Worker" steps. Merging main into this branch auto-kept this branch's copies, leaving two steps that run `npx wrangler` from `workers/preview` with Cloudflare secrets in scope. That trips bin/preview_deploy_security_check.rb (PR-controlled working-directory, npx wrangler, secrets outside the deploy step), failing scan_ruby and, in turn, the preview deploy gate. Removing them realigns the workflow with main's isolated model. * Update preview-deploy.yml Signed-off-by: Guillem Arias Fauste <accounts@gariasf.com> * refactor(goals): squash migrations into single create_goals Collapse the 9 churned goals migrations (create savings_* tables, rename to goals, add icon, add pledges + enums, drop contributions, restrict the goal_accounts->accounts FK) into one create_goals migration that builds the final schema directly. Schema is unchanged. The concurrent transactions pledge-id index stays a separate migration because CREATE INDEX CONCURRENTLY cannot run inside a transactional migration. * fix(goals): use functional ring token in color picker The custom-color swatch used a raw ring-blue-500 palette utility while the preset swatches use ring-alpha-black-500. Switch to the functional token for design-system consistency. * feat(ds): extract DS::ProgressRing primitive; migrate goal card (#1899) Adds a DS::ProgressRing ViewComponent + Lookbook preview: a single-arc circular progress ring decoupled from any model (percent, size, stroke_width, tone, label, show_percent). It owns the geometry (radius / circumference / dash offset) and the accessible progressbar markup that callers were hand-rolling. Migrates Goals::CardComponent's inline <svg> to it (geometry methods removed from the component; status now maps to a tone). Rendered output is identical — same track token, success/warning/neutral arc colors, ±2 geometry. Scope (stacked on #1798, which is where the goal surfaces live): - Deferred: folding the goals/show ring (Goals::ProgressRingComponent) — it's rendered via the donut-chart D3 controller (segmented), a different shape, so it stays for now. - Deferred: the loan-overview ring (arrives with #1775) and the --budget-unused-fill → --color-progress-track-fill token rename (touches the budget donut surfaces + DS token source). DS::ProgressRing reuses the existing track token for now via DEFAULT_TRACK. --------- Signed-off-by: Guillem Arias Fauste <accounts@gariasf.com> Signed-off-by: Juan José Mata <juanjo.mata@gmail.com> Co-authored-by: Juan José Mata <juanjo.mata@gmail.com> Co-authored-by: Sure Admin (bot) <sure-admin@splashblot.com>	2026-06-03 00:05:44 +02:00
Guillem Arias Fauste	d22ffe5994	fix(ds-pill): default show_dot per mode (badges clean, markers keep dot) (#2107) ... Closes #2001. DS::Pill defaulted show_dot: true for both modes, so every status/category badge got a leading dot by default — redundant with the pill shape + tone + label already carrying the signal, and noisy in dense lists. More than half the marker:false callsites were already passing show_dot: false to fight it. The default is now mode-aware: marker: true keeps the dot (stage markers), marker: false (badges) is dot-less. An explicit show_dot: still wins. Only one in-tree callsite relied on the old default without an icon and wants the dot: settings/providers/_status_pill (live connection state) — pinned with show_dot: true. The enable_banking "Beta" badge loses its dot, which is the desired outcome (ref #1997). Icon-bearing transaction badges are unaffected (an icon already suppresses the dot). Left the now-redundant show_dot: false overrides in place to avoid churn and conflicts with in-flight pill-migration branches; they're harmless (explicit false == new default). Adds tests pinning the per-mode default resolution; updates the Lookbook preview to show the opt-in dot vs the clean default.	2026-06-03 00:01:38 +02:00
Brad	1b8b21760b	feat(provider): Akahu integration (#1921) ... * First pass of Akahu * fix up sync all * conflicts * fix db migration issue? - fix auto selection of akahu account type * Address Akahu PR feedback * Complete provider metadata * Fix PR 1921 CI tests * PR feedback * PR feedback * post merge --------- Co-authored-by: failing <failing@users.noreply.github.com> Co-authored-by: Juan José Mata <jjmata@jjmata.com> Co-authored-by: sure-admin <sure-admin@splashblot.com>	2026-06-02 21:44:57 +02:00
Ang Wei Feng (Ted)	5e558fa3ab	feat(transactions): add inline tag creation and search in txn form (#1719) ... * feat(transactions): add inline tag creation and search in transaction forms * fix(transactions): add tag-only update endpoint for edit drawer * feat(transactions): implement TagSelectComponent for improved tag selection and management * feat(tag-select): refactor tag selection component for improved functionality and accessibility * feat(tag-select): implement inline tag rendering and error handling in tag selection component * refactor(tag-select): remove unused list target from tag select controller * fix: return forbidden JSON for denied tag updates * fix: lock transaction tags when clearing them * refactor: move tag select into DS namespace * refactor: add multiselect trigger form field style * fix: auto-position tag select dropdowns * feat: add keyboard navigation to tag select * feat: add create tag and search placeholder to transaction forms in multiple languages * style: tighten tag select option spacing * fix: align tag select spacing and focus behavior * refactor: render tag badges with DS pill --------- Signed-off-by: Juan José Mata <juanjo.mata@gmail.com> Co-authored-by: Juan José Mata <juanjo.mata@gmail.com>	2026-06-01 21:46:32 +02:00
Guillem Arias Fauste	cc8e2abf18	fix(design-system): DS::Menu add :icon_sm variant for dense action lists (#1930) ... PR #1840 bumped DS::Button icon-only `:md` size from `w-9 h-9` (36×36) to `w-11 h-11` (44×44) for WCAG 2.5.5 enhanced touch target. DS::Menu's `:icon` variant uses DS::Button at the default `:md` size, so every row-level "..." action-list trigger grew from 36×36 to 44×44. For dense lists where each row has a trigger — most visibly the transaction category dropdown (`category/dropdowns/_row.html.erb`) — the per-row height bump (+8px) compounds: a 5-category panel that used to fit in ~220px now wants ~260px, the badges look smaller relative to the row chrome, and the overall density that made the dropdown scannable regresses visibly. Add an `:icon_sm` variant that renders the trigger as DS::Button at `size: :sm` (32×32). Meets WCAG 2.5.8 AA (24×24) — appropriate for compact in-row triggers where 44×44 isn't required. Standalone toolbar / row-action `...` triggers should keep `:icon` for AAA. Migrate `category/dropdowns/_row.html.erb` to `:icon_sm` to restore the pre-#1840 dropdown density.	2026-05-23 09:18:16 +02:00
Guillem Arias Fauste	20844923e6	refactor(transactions): migrate 5 transaction badges to DS::Pill (#1751 PR B) (#1917) ... Migrates the hand-rolled "Pending" / "Review recommended" / "Potential duplicate" / "Split" badges across the transaction views to the extended DS::Pill primitive from #1902. **Visual contract for badge mode** In #1902 the badge mode (`marker: false`) used `rounded-md` (chip shape) because the marker mode does. But every existing pill / status badge in the codebase uses `rounded-full` — see `settings/providers/_status_pill.html.erb`, `settings/providers/_maturity_badge.html.erb`, and the inline transaction badges this PR is migrating. To keep the visual contract consistent, this PR shifts `DS::Pill`'s badge mode to `rounded-full` (marker mode stays `rounded-md`, unchanged from #1829). The shape distinction now reads: markers are tags, badges are pills. **Callsites migrated** (5): - `app/views/transactions/_transaction.html.erb` — Pending, Review-recommended, Possible-duplicate, Split badges - `app/views/transactions/_header.html.erb` — Pending badge - `app/views/transactions/_split_parent_row.html.erb` — Split badge **Tone mapping** | Badge | Tone | Notes | |---|---|---| | Pending | `:neutral` | unchanged copy/icon, gains subtle DS-controlled bg | | Review recommended | `:neutral` | matches existing `bg-surface-inset` look | | Possible duplicate | `:warning` | DS semantic alias for the existing `text-warning` | | Split | `:neutral` | matches existing `bg-surface-inset` look | **Deferred to follow-up PRs** - `app/views/transactions/_transfer_match.html.erb` — uses two responsive-visibility variants (`hidden lg:inline-flex` for long copy, `inline-flex lg:hidden` for short). DS::Pill currently has no `class:` arg for caller-controlled wrapper classes; deferring until that lands. - `app/views/transactions/searches/filters/_badge.html.erb` — has a close button alongside the label (`button_to clear_filter_*`) and uses `rounded-3xl p-1.5` instead of a true pill. Closer to a removable filter chip — better fit for a separate `DS::FilterChip` primitive than for `DS::Pill`. Refs #1751.	2026-05-23 08:46:55 +02:00
Guillem Arias Fauste	09058b0cc6	feat(design-system): extend DS::Pill with badge mode + semantic tones (#1751 PR A) (#1902) ... * feat(design-system): extend DS::Pill with badge mode + semantic tones (#1751) Adds two extensions to the existing `DS::Pill` (originally landed as a stage marker primitive in #1829) so it can also serve as the shared status / category badge across the app — the use case tracked by #1751. **Badge mode (`marker: false`)** The original `DS::Pill` was intentionally sub-12px (text-[10px] / text-[11px]) + uppercase + tracking-wide so it reads as a marker (`Beta`, `Canary`, `NEW`), not a label. That shape is wrong for status badges where the surrounding context is regular UI copy and the pill needs to feel like a chip (`Pending`, `Active`, `Past due`, `Failed`). The new `marker: false` flag drops the uppercase + arbitrary sub-12px text and snaps the chrome to the DS text scale: - `marker: false, size: :sm` → `text-xs` (12px), normal case - `marker: false, size: :md` → `text-sm` (14px), normal case - `marker: true` (default) → existing #1829 behavior, unchanged **Semantic tone aliases** Status badges read more naturally with semantic tone names than with the underlying palette colors: | Alias | Resolves to | |---|---| | `:success` | `:green` | | `:warning` | `:amber` | | `:error` / `:destructive` | `:red` (new tone, added here) | | `:info` | `:indigo` | | `:neutral` | `:gray` | Visual-name tones (`:violet`, `:indigo`, `:fuchsia`, `:amber`, `:green`, `:gray`, `:red`) still work as before — semantic aliases resolve through `SEMANTIC_TONE_ALIASES` at component init time, so the callsite can pick whichever name reads better. Unknown tones still fall back to `:violet` (existing behavior). **Red palette** Adds the `:red` tone (palette already present in `design/tokens/sure.tokens.json` — `red-50/100/200/500/700/tint-10`). Needed for `:error` / `:destructive` status badges. **Icon slot** Adds an `icon:` option (already documented in the component's doc-comment as planned). When set, the Lucide glyph replaces the colored dot inside the pill — useful for status badges that read better with a glyph (`circle-check`, `triangle-alert`, `loader`, etc.) than the generic dot. **Scope** API + tests + Lookbook preview only. No callsite migrations in this PR — that's the next slice of #1751, done as separate per-bucket PRs (transaction badges, provider badges, misc) to keep diffs small. DS::Pill currently has no in-app callsites (#1829 shipped the primitive ahead of consumers), so this is a pure-additive change. Existing API is fully backwards-compatible — `marker:` defaults to `true`, so without that flag the pill renders exactly as it does today. * fix(test): use assert_no_selector for dot-suppression assertion `refute_selector ..., count: 1` only fails when there are exactly 1 matches — it would silently pass for 0 OR 2+. The intent is "no dots should render when an icon is set"; `assert_no_selector` strictly asserts zero matches. Flagged by coderabbit on #1902.	2026-05-22 02:16:33 +02:00
Guillem Arias Fauste	12785754c8	feat(design-system): split DS::Menu into strict action-list + new DS::Popover (#1850) ... * feat(design-system): split DS::Menu into strict action-list + new DS::Popover for mixed content Closes #1743. DS::Menu used to absorb both action-list dropdowns (row context menus, "more actions") AND mixed-content panels (user-account dropdown, filter forms, picker pop-ups). The two shapes carry incompatible a11y contracts: - **Action list**: `role="menu"` container, `role="menuitem"` children, Up/Down arrow nav per WAI-ARIA APG. - **Mixed content**: NO menu role — `role="menu"` restricts AT users to menuitem-only navigation and breaks any panel with forms, headings, or generic groupings. This PR splits the component: ## DS::Menu (tightened) Strict action-list primitive. Variants reduced to `:icon` and `:button` (no `:avatar`). `custom_content` slot removed. Bakes in: - `role="menu"` on the panel, `aria-haspopup="menu"` + `aria-expanded` + `aria-controls` on the trigger. - `role="menuitem"` + `tabindex="-1"` on every DS::MenuItem; the controller installs roving tabindex (first item gets `tabindex="0"` when the menu opens) and handles ArrowUp/Down/Home/End + Escape + Enter/Space activation. - `role="separator"` on the divider variant. - Stable per-instance `menu-<8-char hex>` id so the trigger's `aria-controls` resolves correctly. `DS::Menu.new(variant: :avatar, ...)` now raises ArgumentError pointing at DS::Popover. ## DS::Popover (new) Positioned panel for **mixed**, **non-action-list** content: account menus, picker forms, filter forms, embedded controls. Slots: `button`, `header`, `custom_content`. Variants: `:icon`, `:button`, `:avatar`. NO `role="menu"` — the panel announces as a generic dialog-popup (`aria-haspopup="dialog"`, `aria-expanded`, `aria-controls`). Mirrors DS::Menu's floating-ui positioning + Escape/outside-click lifecycle in its own Stimulus controller (`DS--popover`). Avatar variant ships a focus ring + bumped touch target (44×44 via `w-11 h-11` per #1738). ## Migrated callsites (7 → DS::Popover) - `app/views/users/_user_menu.html.erb` — avatar trigger + profile header + nav links (items kept as DS::MenuItem inside `custom_content` for visual parity) - `app/views/categories/_menu.html.erb` — turbo-framed category picker - `app/views/budgets/_budget_header.html.erb` — budget picker - `app/views/reports/index.html.erb` — period picker - `app/views/holdings/_cost_basis_cell.html.erb` — cost-basis edit form - `app/views/transactions/searches/_form.html.erb` — filter form - `app/components/UI/account/activity_feed.html.erb:70` — status checkboxes (the row-level "new" menu on line 9 stays as DS::Menu) The other 33 DS::Menu callsites stay as-is — pure action lists. Locale: `ds.popover.avatar_default_label` + `users.user_menu.aria_label` keys added (en only; other locales handled in a separate i18n pass). * fix(test): update sidebar user-menu selector for Menu→Popover migration The user-menu now renders as `DS::Popover` (variant: :avatar) instead of `DS::Menu` after the menu split, so its trigger carries `data-DS--popover-target="button"` rather than the old `data-DS--menu-target`. Update the sidebar-driven settings test helper to match — every system test that drives Settings via the sidebar gates on this selector. * fix(review): DS::Popover/Menu trigger a11y + caller-attr preservation - popover.rb / menu.rb: button slot now merges (not overwrites) caller- provided data and aria hashes, sets aria-haspopup/expanded/controls on the :button variant, defaults type="button" on block-rendered buttons. - menu.rb / menu.html.erb: drop renders_one :header (strict-menu API shouldn't expose an arbitrary-markup escape hatch); preview updated. - menu_controller.js: handle Enter/Space activation on focused menuitem so keyboard navigation matches the ARIA menu pattern. - cost_basis_cell / transactions/searches/_menu: retarget cancel button data-action from DS--menu#close to DS--popover#close (host controller changed in the migration). * fix: apply CodeRabbit auto-fixes Fixed 1 file(s) based on 1 unresolved review comment. Co-authored-by: CodeRabbit <noreply@coderabbit.ai> * fix(review): MenuItem roving: false for DS::Popover usage Codex P1 on #1850: \`DS::MenuItem\` hard-codes \`tabindex=\"-1\"\` and \`role=\"menuitem\"\` for both link and button variants — correct inside \`DS::Menu\` (which provides arrow-key roving and announces \`role=\"menu\"\`), but breaks every \`DS::MenuItem\` rendered inside \`DS::Popover\` (\`app/views/users/_user_menu.html.erb\`). Popover has no roving handler, so Tab skips every item — Settings, Changelog, Feedback, Contact, Log out become keyboard-unreachable. Add a \`roving:\` keyword (default \`true\`) to \`DS::MenuItem\` that gates both \`tabindex=\"-1\"\` and \`role=\"menuitem\"\`. \`DS::Menu\` callers keep the default (roving menu semantics intact). Pass \`roving: false\` from \`_user_menu.html.erb\` so user-menu items land in the normal Tab order. Existing \`menu.with_item(...)\` callers in the design system still default to \`true\`, so no behavior change for \`DS::Menu\` consumers. * fix(review): make menuitem_attrs authoritative on roving CodeRabbit Major on #1850: \`merged_opts\` was splatted AFTER \`menuitem_attrs\` in \`DS::MenuItem#wrapper\`, so a stray \`role: :button\` or \`tabindex: 0\` from a \`menu.with_item(..., role: …)\` caller could silently downgrade the \`DS::Menu\` ARIA contract that \`menuitem_attrs\` enforces. Strip \`:role\` and \`:tabindex\` from \`merged_opts\` whenever \`roving\` is enabled, then splat \`menuitem_attrs\` last. When \`roving: false\` (popover usage in \`_user_menu.html.erb\`) callers keep full control — Tab order and explicit ARIA stay tunable by the caller. --------- Signed-off-by: Juan José Mata <juanjo.mata@gmail.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: CodeRabbit <noreply@coderabbit.ai> Co-authored-by: Juan José Mata <juanjo.mata@gmail.com>	2026-05-20 18:30:25 +02:00
Guillem Arias Fauste	e30ccd94af	fix(design-system): DS::Tooltip a11y — focusable trigger, keyboard parity, Esc dismiss (#1845) ... * fix(design-system): DS::Tooltip a11y — focusable trigger, keyboard parity, Esc dismiss Closes #1747. Five fixes on the tooltip primitive. 1. **Tooltip anchor not in a11y tree.** The trigger was a bare Lucide icon, which Lucide renders with `aria-hidden="true"`. The tooltip target had `role="tooltip"` but nothing referenced it, so AT users had no way to discover the description. Wrap the icon in a focusable `<button type="button">` with `aria-describedby="<tooltip-id>"` so the underlying icon stays `aria-hidden` and the button picks up the description binding. 2. **Stable per-instance id.** Each DS::Tooltip now mints a `tooltip-<8-char hex>` id wired between the trigger's `aria-describedby` and the tooltip's `id`. 3. **Keyboard parity.** Hover-only triggers locked keyboard-only users out. Add `focusin` / `focusout` listeners on the controller element so Tab onto the trigger reveals the tooltip, Tab away dismisses it. 4. **Esc-to-dismiss.** Matches the WAI-ARIA tooltip pattern. `Escape` while the tooltip is open closes it without removing focus from the trigger. 5. **Resize-safe width cap.** Replace the hard-coded `max-w-[200px]` with `max-w-[20rem]` so the tooltip scales with the user's root font-size setting (large-text accessibility pref). Slightly wider visual cap (320px @ default) but no longer clips on text-zoom. Plus: docstring note that tooltip content must be non-interactive (no buttons / links / form controls inside) — `aria-describedby` exposes content as a description, not as an interactive subtree. Callers needing actions should reach for a popover/menu primitive. API unchanged. Existing 30+ DS::Tooltip callsites work without modification — they all pass `text:`-only payloads, which still render correctly under the new markup. * fix(review): as: option + alpha focus-ring on DS::Tooltip Addresses two AI review findings on #1845: 1. **Button-inside-summary spec violation.** Wrapping the icon in `<button>` regressed keyboard/AT behavior at 13 callsites where DS::Tooltip lives inside a `<summary>` (8 provider items, lunchflow disclosure, activity_date, 4 simplefin badges). HTML's content model forbids interactive content inside `<summary>`; browsers and AT can drop focus or conflate activation with the disclosure toggle. Add `as:` parameter — default `:button` preserves the standalone a11y wrap; `:span` renders a non-focusable wrapper for summary-nested usage. `focusin` bubbles up to the controller from the ancestor `<summary>`, so keyboard tooltips still appear on tab. Migrate the 13 in-summary callsites to `as: :span`. 2. **Raw palette focus ring → alpha tokens.** Swap `outline-gray-900 theme-dark:focus-visible:outline-white` to the established focus-ring pattern `focus-visible:ring-2 focus-visible:ring-alpha-black-300 theme-dark:focus-visible:ring-alpha-white-300` — matches the DS::Toggle fix landed in #1843 review and provider_card / form-field tokens. * fix(review): bind tooltip focus on ancestor <summary> Codex P2 follow-up on #1845: \`as: :span\` renders a non-focusable trigger inside the disclosure \`<summary>\`. Keyboard users hit Tab and focus lands on the summary itself; \`focusin\` fires on the summary and bubbles UP — never down to a descendant span — so the existing listener on \`this.element\` never fires and the tooltip stays hidden for keyboard-only users on every in-summary row (provider _item partials, lunchflow disclosure, activity_date, simplefin badges). My earlier reply that the focusin "bubbles up to the Stimulus controller on the outer span" was wrong about the direction; \`focusin\` only bubbles upward. In \`addEventListeners\`, resolve \`this.element.closest("summary")\` and bind \`focusin\` / \`focusout\` / \`keydown\` on it too. Track the ancestor on the controller and undo the bindings in \`removeEventListeners\` so reconnect-on-Turbo cycles don't leak. Update the template comment to reflect the actual mechanism. * docs(ds-tooltip): correct as=:span comment to match controller mechanism --------- Signed-off-by: Juan José Mata <juanjo.mata@gmail.com> Co-authored-by: Juan José Mata <juanjo.mata@gmail.com>	2026-05-20 18:17:51 +02:00
Guillem Arias Fauste	e8ce28648d	refactor: rename beta features gate to preview features (#1837) ... * refactor: rename beta features gate to preview features Renames the opt-in gate introduced in PR #1829 from "beta" to "preview". Same shape (per-user JSONB toggle, `before_action` concern, marker pill) just retitled so the surface speaks the language Sure uses elsewhere ("preview" reads as in-progress, "beta" had baggage with provider maturity copy and external testing programs). Renames: - BetaGateable -> PreviewGateable - require_beta_features! -> require_preview_features! - beta_features_enabled? -> preview_features_enabled? - preferences["beta_features_enabled"] -> preferences["preview_features_enabled"] - DS::Pill default label "Beta" -> "Preview" - Settings -> Preferences toggle copy "beta features" -> "preview features" - config/locales/views/beta/ -> config/locales/views/preview/ - docs/llm-guides/gating-a-beta-feature.md -> gating-a-preview-feature.md Includes a data migration that copies any existing `beta_features_enabled` JSONB key into `preview_features_enabled` so early opt-ins survive the rename, then removes the old key. The migration is fully reversible. Provider maturity copy ("maturity.beta = Beta" under Settings -> Bank sync) is intentionally untouched - that's a separate concept describing a provider's integration stability, not Sure's feature gate. * review: apply CodeRabbit findings on PR #1837 - Settings::PreferencesController#update now routes the `preview_features_enabled` input through strong params and casts via ActiveModel::Type::Boolean instead of reading raw params and string- comparing to "1". Matches Sure's controller convention for permitted params and avoids stringly-typed boolean handling. - Rename migration now wraps the destination JSONB key write in COALESCE so a row that somehow ends up with both keys keeps the destination value instead of having it overwritten by the source. Up and down paths get the same defensive shape. * 📝 CodeRabbit Chat: Implement requested code changes * 📝 CodeRabbit Chat: Implement requested code changes * fix: restore all missing translation keys; rename beta→preview label * fix: restore all missing sections (appearances, debugs, llm_usages, providers, etc.); rename beta→preview * fix: restore missing keys (member_removal_failed, confirm_delete, etc.); add preview section * fix(i18n/ca): use 'està en vista prèvia' instead of 'és una vista prèvia' * fix(i18n/ca): use 'en desenvolupament'; drop article in preview title * fix(i18n/es): use 'en desarrollo' instead of 'en progreso' * fix(i18n/ca): use 'funcions experimentals' instead of 'vista prèvia' * fix(i18n/es): use 'funciones experimentales' instead of 'vista previa' * fix(i18n/ca): use 'funcions experimentals' in preferences.show.preview * fix(i18n/es): use 'funciones experimentales' in preferences.show.preview * fix(i18n/ca): use 'Experimental' pill label instead of 'Vista prèvia' * fix(i18n/es): use 'Experimental' pill label instead of 'Vista previa' --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>	2026-05-19 14:41:02 +02:00
Guillem Arias Fauste	5249842c76	feat: beta features toggle + Beta pill primitive (#1829) ... * feat: beta features toggle + Beta pill primitive Adds the infrastructure for self-service beta opt-in. No call sites yet: this PR is meant to land first so feature PRs (Goals, etc.) can ship behind the gate incrementally. User opts in via a single toggle at the bottom of Settings → Preferences. The flag persists in the existing `users.preferences` JSONB column under `beta_features_enabled` — same shape as `dashboard_two_column` and `show_split_grouped`, so no migration is needed. Controllers gate a beta feature by adding `before_action :require_beta_features!` from the new `BetaGateable` concern (included in ApplicationController). Views use the `beta_features_enabled?` helper to hide / show nav items, banners, etc. Logged-out callers always return false. Ships `DS::BetaPill`, a small inline marker for tagging features as Beta / Canary in nav, headers, and lists. Five tones (violet by default, indigo, fuchsia, amber, gray) map to existing Sure color tokens — no raw hex. Three styles (soft / filled / outline) and two sizes (sm / md) cover the surfaces in the design handoff. The `dot_only:` mode renders just the colored dot for use on a collapsed sidebar. * review: rename to DS::Pill, fix CR/Codex nits, add tests CodeRabbit + Codex review feedback: - Rename DS::BetaPill → DS::Pill. The component was already generic in shape (tones, styles, sizes); the name was misleading scope. "Beta" becomes the default label (still i18n-driven). Goals' StatusPill can later refactor onto this primitive without a third pill. - Localize the default pill label via i18n (`ds.pill.default_label`) instead of hard-coding English. - Add role="img" to the dot-only span so the aria-label is consistently exposed to assistive tech. - Wrap the Preferences toggle row in <label for="…"> so the title and description become an honest click target for the toggle (matches the cursor-pointer affordance). - Drop arbitrary Tailwind values (py-[3px], gap-[5px], tracking-[…]) in favor of scale tokens. text-[10/11px] stays because the pill is intentionally sub-12px (Sure's smallest scale token is text-xs / 12px) to read as a marker, not a label. - Add User#beta_features_enabled? predicate tests covering default-off, explicit-true, and non-boolean truthy values. Won't fix: - Palette refs (`--color-violet-*` etc.). Sure has no semantic Beta/ Canary tokens; introducing them in this PR would be a design-system change beyond the scope. The component centralizes palette use in one `palette` method, matching the existing pattern in Goals::StatusPillComponent. * review: consistent title fallback in full-pill branch * docs: how to gate a feature behind the beta toggle * docs: unwrap doc lines to match existing style * chore(preview): run Cloudflare PR previews on basic instances (#1831) * fix(preview): use Rails health endpoint for container ping (#1823) * fix(preview): use Rails health endpoint for container ping * fix(preview): point container ping to localhost/up --------- Co-authored-by: Sure Admin (bot) <sure-admin@splashblot.com>	2026-05-18 20:07:55 +02:00
Guillem Arias Fauste	57d71cd55e	refactor(design-system): extend DS::Alert and migrate 9 inline alert blocks (#1731) ... * feat(design-system): add info semantic color token Mirrors success/warning/destructive: --color-info maps to blue-600 in light mode, blue-500 in dark mode. Unblocks the DS::Alert info variant from carrying a raw 'blue-600' literal in icon_color and lets surface tokens use bg-info/N alpha modifiers like the rest of the system. Refs #1715 * refactor(design-system): adopt semantic tokens and add body slot in DS::Alert Replaces the bg-{blue,green,yellow,red}-50 / text-{...}-700 / border-{...}-200 palette block in DS::Alert with semantic alpha-modifier surfaces (bg-{info,success,warning,destructive}/10 + matching /20 borders). Drops the 'blue-600' literal that icon_color was returning for the info variant; helpers#icon now accepts color: :info backed by the new --color-info token. Adds an optional title: kwarg and an opt-in block-content slot so rich alerts (title + paragraph, lists, embedded actions) can render without callers reaching for a hand-rolled flex layout. The existing message: API stays backward-compatible — nothing in the codebase that already calls DS::Alert.new(message: ..., variant: ...) needs to change. Lookbook gains with_title and with_body_slot examples covering the new shapes. Refs #1715 * refactor(views): migrate api_keys, hostings, lunchflow alerts to DS::Alert Cleans up nine bespoke alert blocks that hand-rolled the same flex + icon + bordered-surface shape DS::Alert already provides: - settings/api_keys/{new,created,created.turbo_stream}.html.erb — three near-identical 'Security Warning' / 'Important Security Note' boxes using the broken bg-warning-50 / text-warning-700 raw-palette pair. - settings/hostings/{_alpha_vantage,_eodhd,_yahoo_finance,_twelve_data,_provider_selection}_settings.html.erb — five amber-50 / amber-200 warning boxes covering rate-limit notes, health-check failure messaging, and the env-configured override banner. The twelve_data plan-restriction block keeps its bullet list and pricing link inside the new DS::Alert body slot. - lunchflow_items/{_api_error,_setup_required}.html.erb — two modal alert headers whose flex+icon scaffolding now collapses onto DS::Alert. The surrounding bg-surface 'Common issues' / 'Setup steps' info cards stay as-is; this PR only touches the alert shape itself. No functional or behavioural changes. Locale keys preserved. amber-* palette uses on the alerts disappear; remaining bg-amber-* hits in the codebase live outside the alert pattern and stay for follow-up sub-PRs of #1715. Refs #1715	2026-05-10 17:14:06 +02:00
Guillem Arias Fauste	0fe1e06645	refactor(design-system): migrate fg-* utilities to text-* and remove namespace (#1626) ... * refactor(design-system): migrate fg-* utilities to text-* and remove namespace The design system carried two parallel namespaces for foreground colors: text-* (canonical, ~2,000 uses) and fg-* (32 uses). Most fg-* tokens were 1:1 duplicates of a text-* counterpart. fg-gray was nearly identical to text-secondary, with a one-step shade difference in dark mode. This PR migrates all 32 usages to their text-* equivalents and removes the fg-* block from the design tokens. Closes #1606. Mapping: - fg-inverse -> text-inverse (20 usages, identical light/dark values) - fg-gray -> text-secondary (7 usages; light values match, dark is one step lighter: gray-300 vs gray-400) - fg-primary -> text-primary (3 usages, identical values) - fg-subdued -> text-subdued (2 usages, identical values) The four other fg-* tokens (fg-contrast, fg-primary-variant, fg-secondary, fg-secondary-variant) had zero usages despite being defined; they are removed without replacement. JSON / build: - design/tokens/sure.tokens.json: $version 1.0.0 -> 2.0.0 (breaking schema change per the policy added in #1620). 8 fg-* token definitions removed. - button-bg-ghost-hover's dark value still references "fg-inverse" internally; rewritten to "bg-gray-800 text-inverse" so the cleanup doesn't break that utility. - _generated.css regenerated. 42 utility blocks now (was 50). Lookbook tokens preview: - The Text & foregrounds section dropped its split between text-* (canonical) and fg-* (legacy). Now a single section listing the five text-* utilities. The "(legacy)" framing is gone since there's no legacy left. README: - design/tokens/README.md's button-bg-ghost-hover edge-case example updated to reflect the new "bg-gray-800 text-inverse" dark value. Visual review needed in dark mode: - Anywhere icons use the application_helper#icon helper with color: "default" (most icons in the app). The default class moved from fg-gray (gray-400 dark) to text-secondary (gray-300 dark), so default-color icons render slightly lighter in dark mode. - DS::Buttonish icons in secondary buttons (same shade shift). - DS::Link icons (same). - Time series chart axes (same). - All tooltips, account add flow, settings hostings buttons, invitations, AI consent, family export, danger-zone buttons -- these used fg-inverse, which is identical to text-inverse, so no visual change expected. * fix(design-system): use inverse pair on tooltips for readable dark mode * fix(lookbook): use semantic tokens in menu preview header text * fix(lookbook): set text-primary on layout body so previews inherit theme * fix(design-system): keep shadows dark-toned in dark mode Inverting shadows to white|8% on dark surfaces produces a halo effect rather than an elevation cue, and stacks redundantly with the alpha-white 1px ring already in shadow-border-*. Switch dark-mode shadows to black at progressively higher alpha (25%/30%/35%/40%/50% for xs..xl) so they read as actual cast shadows on near-black surfaces. Surface-tint differences and the existing alpha-white border ring continue to handle elevation hierarchy and edge definition. Approach matches Material 3, Apple HIG, IBM Carbon, Refactoring UI, and the dark-mode shadows used in Linear/Vercel/Stripe. * fix(design-system): set text-primary on DS::Dialog element Browser UA stylesheets apply color: black directly to <dialog>, which overrides ancestor inheritance even when a body or html ancestor sets a theme-aware color. Unstyled child content then renders black regardless of theme. Setting text-primary on the dialog element itself defeats the UA override and lets descendants inherit the semantic token. * fix(lookbook): use shadow css vars in effects preview so dark theme renders * Revert "fix(design-system): keep shadows dark-toned in dark mode" This reverts commit 3e9d76ed0beb5ac5f2acbad61e4d1c39eadc9ac2. * fix(design-system): use opacity-70 instead of text-inverse/70 in value tooltip The custom @utility text-inverse expands to @apply text-white and isn't modifier-aware, so text-inverse/70 produced no CSS at all and the muted labels fell through to inherited color (invisible on the white pill in dark mode). Replace with text-inverse + opacity-70. Same visual effect, works with the existing utility definition.	2026-05-04 00:50:52 +02:00
Guillem Arias Fauste	a7e964f8be	feat(design-system): live tokens reference page in Lookbook (#1618) ... * feat(design-system): live tokens reference page in Lookbook Adds `DesignTokensPreview` at `/design-system/inspect/design_tokens/*`, split into seven sub-pages (typography, palette, surfaces, text, borders, controls, effects). Each reads `design/tokens/sure.tokens.json` at request time and renders the corresponding slice with values pre-resolved to literal hex / rgba in Ruby — Tailwind doesn't need to keep every CSS variable alive for the swatches to render. Also drops the `@source not "../../../design/tokens"` directive added in #1604. Excluding the JSON tree-shook ten or so design system utilities that aren't yet used in app views (`shadow-border-md/sm/xl`, `button-bg-ghost-hover`, etc.). The preview references each utility through dynamic ERB, which Tailwind's scanner can't follow, so those swatches were rendering blank. Letting Tailwind scan the JSON keeps every declared utility available, which matches the intent of a design system. Compiled CSS grows by about 3 KB. Stacked previously on the `refactor/design-system-tokens` branch behind #1604; rebased onto `main` once that landed. * style(design-system): apply rubocop indented_internal_methods to preview CI lint flagged the private helpers in DesignTokensPreview because the project's RuboCop config uses `indented_internal_methods` style (methods after `private`/`protected` get an extra 2-space indent). Auto-fixed with `bin/rubocop -A`. * fix(design-system): pre-resolve utility token values for the preview CodeRabbit caught: collect_utilities was passing raw `{ref}` strings (e.g. `{color.gray.50}`) as light_value/dark_value, while the rest of the class pre-resolves to literal hex / rgba. The four templates that display them (surfaces, text, borders, controls) showed the unresolved template strings to users. Adds `light_resolved` / `dark_resolved` fields to each utility entry, populated via the same `resolve_template` helper the other collectors use. Templates display `:light_resolved || :light_value` so plain class strings (e.g. `border-tertiary`, `bg-gray-800 fg-inverse`) and compose cases still fall through correctly.	2026-05-01 16:06:25 +02:00
Juan José Mata	97a8cb9407	Fix /design-system for tabs	2025-11-25 14:11:50 +00:00
Juan José Mata	5706280dd7	More rebranding changes (#159) ... * Replace Maybe for Sure in select code areas * Make sure passwords are consistent * Remove (admin|member) from demo data first name * Database and schema names finally to `sure` * Fix broken test * Another (benchmarking) database name to `sure_*` * More rebranding to Sure * Missed this Maybe mention in the same page * Random nitpicks and more Maybes * Demo data accounts and more Maybes * Test data account updates * Impersonation test accounts * Consistency with `compose.example.yml`	2025-09-24 00:19:51 +02:00
Zach Gollwitzer	e8eb32d2ae	Start and end balance breakdown in activity view (#2466) ... * Initial data objects * Remove trend calculator * Fill in balance reconciliation for entry group * Initial tooltip component * Balance trends in activity view * Lint fixes * trade partial alignment fix * Tweaks to balance calculation to acknowledge holdings value better * More lint fixes * Bump brakeman dep * Test fixes * Remove unused class	2025-07-18 17:56:25 -04:00
Zach Gollwitzer	ab6fdbbb68	Component namespacing (#2463) ... * [claudesquad] update from 'component-namespacing' on 18 Jul 25 07:23 EDT * [claudesquad] update from 'component-namespacing' on 18 Jul 25 07:30 EDT * Update stimulus controller references to use namespace * Fix remaining tests	2025-07-18 08:30:00 -04:00
Zach Gollwitzer	662f2c04ce	Multi-step account forms + clearer balance editing (#2427) ... * Initial multi-step property form * Improve form structure, add optional tooltip help icons to form fields * Add basic inline alert component * Clean up and improve property form lifecycle * Implement Account status concept * Lint fixes * Remove whitespace * Balance editing, scope updates for account * Passing tests * Fix brakeman warning * Remove stale columns * data constraint tweaks * Redundant property	2025-07-03 09:33:07 -04:00
Zach Gollwitzer	90a9546f32	Pre-launch design sync with Figma spec (#2154) ... * Add lookbook + viewcomponent, organize design system file * Build menu component * Button updates * More button fixes * Replace all menus with new ViewComponent * Checkpoint: fix tests, all buttons and menus converted * Split into Link and Button components for clarity * Button cleanup * Simplify custom confirmation configuration in views * Finalize button, link component API * Add toggle field to custom form builder + Component * Basic tabs component * Custom tabs, convert all menu / tab instances in app * Gem updates * Centralized icon helper * Update all icon usage to central helper * Lint fixes * Centralize all disclosure instances * Dialog replacements * Consolidation of all dialog styles * Test fixes * Fix app layout issues, move to component with slots * Layout simplification * Flakey test fix * Fix dashboard mobile issues * Finalize homepage * Lint fixes * Fix shadows and borders in dark mode * Fix tests * Remove stale class * Fix filled icon logic * Move transparent? to public interface	2025-04-30 18:14:22 -04:00