feat(web): design pass 9: readable AWS meters, GCP subtitle, no stray meta separator by Makisuo · Pull Request #1831 · MapleTechLabs/maple

Makisuo · 2026-10-25T14:59:34Z

Design pass 9, stacked on #1830 (pass 8). Two independent agents checked it blind: one scored a rubric, the other hunted regressions and found none. Icons and data colours are untouched.

Judges

Category	Before	After
Typography	7.0	7.0
Hierarchy	7.0	7.5
Spacing & density	7.0	7.5
Color & contrast	7.5	7.5
Iconography	7.5	7.5
Consistency & polish	6.5	7.0
Clarity	7.0	7.5
Overall	7.1	7.4

Changes

AWS meters: the CPU and memory bar tracks grow from 56 to 80px (columns w-36, trend w-32), so the unfilled part of each bar is visible.
GCP subtitle: like AWS's, it shows the project count, the views present and the refresh cadence. The cadence comes from the existing GCP onboarding copy ("read every 5 minutes"). GCP now lines up with the other two provider headers.
No stray separator: the GCP idle note now rides inside the last meta item, separator included, so hiding it at md no longer leaves a trailing "·" after the project. That bug came from pass 3's move of the note into the Status cell.

Before	After

Verification

bun run --cwd apps/web typecheck passes, and oxlint is clean.
Targeted Vitest: 197 tests in infra integrations and labs.

🤖 Generated with Claude Code

… meta separator - AWS CPU and memory bar tracks grow from 56 to 80px (columns w-36), so the unfilled part shows. - GCP gets a subtitle like AWS's: project count, views present, refresh cadence. - The GCP idle note rides inside the last meta item, so hiding it at md leaves no trailing dot (introduced when the note moved to the Status cell in pass 3).

coderabbitai · 2026-10-25T14:59:42Z

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 23 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used all 4 included reviews currently available.

Learn how review limits work.

Review configuration:

Run configuration

Source mode: Auto
Repository: Unavailable
Branch: Unavailable
File: No configuration file from this repository applied
Commit: Unavailable
Layers: defaults
Review profile: CHILL
Plan: Advanced
Run ID: 006c1a3f-5493-4edc-8c5e-9a2bfe67257f

Commits

Reviewing files that changed from the base of the PR and between 1d25a5d and aacbcfb.

Files selected for processing: 3

apps/web/src/page/infra-integrations/aws/list/view-table.ts
apps/web/src/page/infra-integrations/gcp/list/view-tables.ts
apps/web/src/page/infra-integrations/gcp/list/view.ts

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

maple-review-bot · 2026-10-25T14:59:44Z

Maple review

🟢 Confidence 8/10 · likely safe to merge
Held at 8 because a warning is open.
_{1 warning −1 · tests not needed · risk low}

A design pass on the GCP and AWS infra lists: a loaded-state subtitle, roomier meters and column widths, and a fix for the stray separator on idle services. The separator fix misses the single-project case, where the sub-line gets a doubled dot.

serviceMeta folds the idle note into the last meta item, separator included
loadedDescription puts project count, views and the 5-minute cadence in the GCP header
AWS meters widen to w-20 and their columns to w-36 / w-32

Findings

🟠 Warning · F1 · serviceMeta doubles the separator when the last item is absent

correctness · apps/web/src/page/infra-integrations/gcp/list/view-tables.ts:149-151

placeItems returns undefined for the project whenever showProject is false — every single-project org and every project-scoped view — so last is absent and the wrapper ends up holding only the note, separator included. The sub-line then reads us-central1 · · idle, still billed below md, and at md and up the empty wrapper still gets its own · from metaLine (view-tables.ts:36 of page/infra/kit/meta-line.ts), which is the stray separator this change means to remove. Fold the note into the last present item instead.

	const note = h.span([h.Class(cn("md:hidden", TONE_TEXT.warn))], [" · idle, still billed"])
	const present = items.filter(
		(item): item is Html | string => item !== undefined && item !== null && item !== false && item !== "",
	)
	return [...present.slice(0, -1), h.span([], [present[present.length - 1] ?? "", note])]

🤖 Prompt to fix this finding with an AI agent

Findings from an automated review of commit 4abf4d34b716d427cd283b77b89bdccbfea2b7e6. Verify each one against the current code before changing anything, fix only those that still apply, and keep each fix to the lines it names.

---

F1 · Warning · correctness · apps/web/src/page/infra-integrations/gcp/list/view-tables.ts:149-151
`serviceMeta` doubles the separator when the last item is absent
`placeItems` returns `undefined` for the project whenever `showProject` is false — every single-project org and every project-scoped view — so `last` is absent and the wrapper ends up holding only the note, separator included. The sub-line then reads `us-central1 · · idle, still billed` below `md`, and at `md` and up the empty wrapper still gets its own `·` from `metaLine` (`view-tables.ts:36` of `page/infra/kit/meta-line.ts`), which is the stray separator this change means to remove. Fold the note into the last *present* item instead.
Replace those lines with:
	const note = h.span([h.Class(cn("md:hidden", TONE_TEXT.warn))], [" · idle, still billed"])
	const present = items.filter(
		(item): item is Html | string => item !== undefined && item !== null && item !== false && item !== "",
	)
	return [...present.slice(0, -1), h.span([], [present[present.length - 1] ?? "", note])]

What was checked

metaLine drops absent items and draws · before every item after the first (page/infra/kit/meta-line.ts:15-39)
gcp_metrics runs on the */5 * * * * cron, so the new subtitle's cadence is accurate (apps/alerting/src/schedule.ts:30)
Widened AWS columns still fit the w-20 meter and its percent inside w-36

_{4abf4d3 · Updated on every push. Reply "won't fix" to dismiss a finding, or mention @maple-review-bot to ask about one.}

devin-ai-integration

🔍 Devin Review: 1 flag

Not posted on this PR by your GitHub settings — view it in Devin Review. (Configure)

maple-review-bot

1 inline note from Maple's review. The score and summary are in the review comment above.

…empty slot With the project hidden (one project in scope) the last item was undefined, so the note sat in an empty wrapper and metaLine drew a separator before it plus the note's own: a doubled dot.

maple-review-bot · 2026-10-25T15:04:49Z

Maple review

🟢 Confidence 10/10 · safe to merge
Presentational only: F1's double separator is genuinely fixed, and the one remaining gap is the lost 28ch cap on the joined idle text.
_{1 note · tests not needed · risk low}

Design pass on the AWS and GCP infra pages: wider meter tracks, a factual GCP subtitle, and the idle note moved inside the last meta item so hiding it no longer leaves a stray "·". F1 is fixed; one small truncation regression remains on idle rows.

serviceMeta joins the idle note into the last item metaLine draws
loadedDescription builds the GCP subtitle from project count, present views and cadence
AWS CPU/memory meters widen to w-20 inside w-36 columns

Findings

🔵 Note · F2 · Joined meta text loses metaLine's 28ch ellipsis on idle rows

correctness · apps/web/src/page/infra-integrations/gcp/list/view-tables.ts:154

metaLine wraps every plain string item in a max-w-[28ch] truncate span (kit/meta-line.ts:37); this hunk wraps the last item in a bare h.span([], [last, note]) instead, so on an idle service in a multi-project view a project id longer than 28 characters is clipped at the row edge with no ellipsis instead of truncating. Keep the cap on the joined text.

	const note = h.span([h.Class(cn("md:hidden", TONE_TEXT.warn))], [" · idle, still billed"])
	const last = items[items.length - 1]
	if (last === undefined) return [note]
	const text = typeof last === "string" ? h.span([h.Class("max-w-[28ch] truncate")], [last]) : last
	return [...items.slice(0, -1), h.span([h.Class("flex min-w-0 items-center gap-x-2")], [text, note])]

🤖 Prompt to fix this finding with an AI agent

Findings from an automated review of commit 704514cb914de36a6442f6e3c86e0922a21baaec. Verify each one against the current code before changing anything, fix only those that still apply, and keep each fix to the lines it names.

---

F2 · Note · correctness · apps/web/src/page/infra-integrations/gcp/list/view-tables.ts:154
Joined meta text loses `metaLine`'s 28ch ellipsis on idle rows
`metaLine` wraps every plain string item in a `max-w-[28ch] truncate` span (`kit/meta-line.ts:37`); this hunk wraps the last item in a bare `h.span([], [last, note])` instead, so on an idle service in a multi-project view a project id longer than 28 characters is clipped at the row edge with no ellipsis instead of truncating. Keep the cap on the joined text.
Replace those lines with:
	const note = h.span([h.Class(cn("md:hidden", TONE_TEXT.warn))], [" · idle, still billed"])
	const last = items[items.length - 1]
	if (last === undefined) return [note]
	const text = typeof last === "string" ? h.span([h.Class("max-w-[28ch] truncate")], [last]) : last
	return [...items.slice(0, -1), h.span([h.Class("flex min-w-0 items-center gap-x-2")], [text, note])]

Fixed since the last review

✅ ~~F1 · serviceMeta doubles the separator when the last item is absent~~

What was checked

serviceMeta filters with metaLine's own predicate, so the note never lands in an empty slot (view-tables.ts:146-155)
GCP_SERVICE_RULES.inScope(row, "idle") needs requests === 0 and billed instances, so the note only rides idle rows (list-model.ts:281)
Cadence copy matches the existing "read every 5 minutes" text (view-notice.ts:54), and the description renders as a wrapping max-w-2xl paragraph

_{704514c · Updated on every push. Reply "won't fix" to dismiss a finding, or mention @maple-review-bot to ask about one.}

…e item

maple-review-bot · 2026-10-25T15:15:16Z

Maple review

🟢 Confidence 8/10 · likely safe to merge
Held at 8 because a warning is open.
_{1 warning −1 · tests not needed · risk low}

Widens the AWS CPU/memory meters, gives the GCP header a project/view/cadence subtitle, and folds the idle note into the last meta item. F2's 28ch cap is restored, but the note's separator now loses its leading space below md.

usageCell meter grows from 56px to 80px inside w-36 and w-32 columns
loadedDescription gives the GCP header a project/view/cadence subtitle once projects load
serviceMeta folds the idle note into the last meta item, keeping metaLine's 28ch cap

Findings

🟠 Warning · F3 · Idle note's leading space is stripped, so the separator butts the last place item

correctness · apps/web/src/page/infra-integrations/gcp/list/view-tables.ts:156

The note (view-tables.ts:152) is now a flex item of this wrapper, so it is blockified and the space that starts " · idle, still billed" is dropped as leading whitespace at the start of its line; the wrapper has no gap-x-2. Below md every idle service row therefore reads acme-prod· idle, still billed, with the dot against the project name — metaLine spaces its own dots with gap-x-2 (page/infra/kit/meta-line.ts:34).

	return last === undefined ? [note] : [...items.slice(0, -1), h.span([h.Class("flex min-w-0 items-center gap-x-2")], [capped, note])]

🤖 Prompt to fix this finding with an AI agent

Findings from an automated review of commit 2ab28a50a13d6f4a6f207575b0dce5f262328cab. Verify each one against the current code before changing anything, fix only those that still apply, and keep each fix to the lines it names.

---

F3 · Warning · correctness · apps/web/src/page/infra-integrations/gcp/list/view-tables.ts:156
Idle note's leading space is stripped, so the separator butts the last place item
The note (`view-tables.ts:152`) is now a flex item of this wrapper, so it is blockified and the space that starts `" · idle, still billed"` is dropped as leading whitespace at the start of its line; the wrapper has no `gap-x-2`. Below `md` every idle service row therefore reads `acme-prod· idle, still billed`, with the dot against the project name — metaLine spaces its own dots with `gap-x-2` (`page/infra/kit/meta-line.ts:34`).
Replace those lines with:
	return last === undefined ? [note] : [...items.slice(0, -1), h.span([h.Class("flex min-w-0 items-center gap-x-2")], [capped, note])]

Fixed since the last review

✅ ~~F2 · Joined meta text loses metaLine's 28ch ellipsis on idle rows~~

What was checked

F2: string last item re-wrapped in max-w-[28ch] truncate (view-tables.ts:155), so the cap is back
GCP "every 5 minutes" matches the poller cadence implied by gcp-connector-state.ts:27
pluralize is exported from @maple/ui/lib/format; views here already excludes GCP_RESOURCES_TAB

_{2ab28a5 · Updated on every push. Reply "won't fix" to dismiss a finding, or mention @maple-review-bot to ask about one.}

maple-review-bot

1 inline note from Maple's review. The score and summary are in the review comment above.

…x keeps the spacing

maple-review-bot · 2026-10-25T15:21:56Z

Maple review

🟢 Confidence 10/10 · safe to merge
Presentational markup only; the fixed idle note now spaces its own separator, verified against metaLine's rendering.
_{no findings · tests not needed · risk low}

Widens the AWS CPU/memory meters and columns, gives GCP a data-driven header subtitle, and moves the GCP idle note inside the last meta item so no stray separator is left at md. Safe to merge.

AWS usageCell meter grows to w-20 inside w-36/w-32 columns
loadedDescription builds the GCP header subtitle from project count, views and cadence
serviceMeta attaches the idle note, separator included, to the last shown meta item

Fixed since the last review

✅ ~~F3 · Idle note's leading space is stripped, so the separator butts the last place item~~

What was checked

metaLine adds its own · only before each item (meta-line.ts:36), so the note's built-in dot is not doubled
The note's md:hidden complements statusMix's md:block idle text, so md+ shows the note exactly once
pluralize(3, "project") returns "projects" (format.ts:348); loadedDescription falls back to intro.description with no projects

_{aacbcfb · Updated on every push. Reply "won't fix" to dismiss a finding, or mention @maple-review-bot to ask about one.}

Makisuo added 3 commits October 25, 2026 15:55

wip: pass 9

b355641

Merge branch 'ui-pass-8' into ui-pass-9

ccf1d97

Makisuo changed the title ~~ui pass 9~~ feat(web): design pass 9: readable AWS meters, GCP subtitle, no stray meta separator Oct 25, 2026

devin-ai-integration Bot reviewed Oct 25, 2026

View reviewed changes

maple-review-bot Bot reviewed Oct 25, 2026

View reviewed changes

Comment thread apps/web/src/page/infra-integrations/gcp/list/view-tables.ts Outdated

fix(web): the GCP idle note joins the last shown meta item, never an …

704514c

…empty slot With the project hidden (one project in scope) the last item was undefined, so the note sat in an empty wrapper and metaLine drew a separator before it plus the note's own: a doubled dot.

fix(web): the GCP idle row keeps metaLine's 28ch cap on its last plac…

2ab28a5

…e item

maple-review-bot Bot reviewed Oct 25, 2026

View reviewed changes

Comment thread apps/web/src/page/infra-integrations/gcp/list/view-tables.ts Outdated

fix(web): the GCP idle note carries its own separator and gap, so fle…

aacbcfb

…x keeps the spacing

Makisuo mentioned this pull request Oct 25, 2026

feat(web): design pass 10: aligned infra tables, readable picker, Alerts fits the viewport #1832

Merged

Makisuo added this pull request to stack #1834 October 25, 2026 16:43

Makisuo merged commit a6834e3 into main Oct 25, 2026
22 checks passed

Makisuo deleted the ui-pass-9 branch October 25, 2026 16:44

Navigation Menu

Repository navigation

feat(web): design pass 9: readable AWS meters, GCP subtitle, no stray meta separator - #1831

feat(web): design pass 9: readable AWS meters, GCP subtitle, no stray meta separator#1831
Makisuo merged 6 commits into
ui-pass-8from
ui-pass-9

Makisuo commented Oct 25, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 25, 2026 •

edited

Loading

Review limit reached

Uh oh!

maple-review-bot Bot commented Oct 25, 2026 •

edited

Loading

Uh oh!

devin-ai-integration Bot left a comment

Uh oh!

maple-review-bot Bot left a comment

Uh oh!

Uh oh!

maple-review-bot Bot commented Oct 25, 2026 •

edited

Loading

Uh oh!

maple-review-bot Bot commented Oct 25, 2026 •

edited

Loading

Uh oh!

maple-review-bot Bot left a comment

Uh oh!

Uh oh!

maple-review-bot Bot commented Oct 25, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

Makisuo commented Oct 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Judges

Changes

Verification

Uh oh!

coderabbitai Bot commented Oct 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Uh oh!

maple-review-bot Bot commented Oct 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Maple review

Findings

Uh oh!

devin-ai-integration Bot left a comment

Choose a reason for hiding this comment

🔍 Devin Review: 1 flag

Uh oh!

maple-review-bot Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

maple-review-bot Bot commented Oct 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Maple review

Findings

Fixed since the last review

Uh oh!

maple-review-bot Bot commented Oct 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Maple review

Findings

Fixed since the last review

Uh oh!

maple-review-bot Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

maple-review-bot Bot commented Oct 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Maple review

Fixed since the last review

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Makisuo commented Oct 25, 2026 •

edited

Loading

coderabbitai Bot commented Oct 25, 2026 •

edited

Loading

maple-review-bot Bot commented Oct 25, 2026 •

edited

Loading

maple-review-bot Bot commented Oct 25, 2026 •

edited

Loading

maple-review-bot Bot commented Oct 25, 2026 •

edited

Loading

maple-review-bot Bot commented Oct 25, 2026 •

edited

Loading