feat(web): text link, card button and dashed button in the kit by Makisuo · Pull Request #1993 · MapleTechLabs/maple

Makisuo · 2026-10-30T20:34:50Z

Stacked on #1992. Part of the dashboard consistency review: the kit was missing three components that pages kept rebuilding by hand, so this adds them and moves the copies onto them.

New kit pieces

textLink (ui/text-link.ts): an inline action with no button box, primary ("View all →") or muted ("Clear filters"), optionally monospace. It renders an anchor for an href and a button for an onClick. It replaces the page-local monoLinkButton.
cardButton (ui/card-button.ts): a whole card as one click target. It owns the surface, border, hover, selected and focus states; the caller passes only layout.
dashed button variant in the shared button styles, for "add another" slots.
Uptime monitor form: the kind picker (HTTP / TCP / DNS / Heartbeat) uses segmentedSelect instead of a hand-built track.
segmentedSelect fixes (affect all 34 callers): every enabled option is now a Tab stop (before, only the selected one was, and there were no arrow keys, so the keyboard couldn't change the value). The selected pill now shows in light mode (it painted behind the track's tint).

Light, before Light, after

Light	Dark

Sweep

17 inline text links → textLink: security overview and run panels, the services "View all" links, billing "Set caps", the CI runs table, the filter rails in the infra integrations, onboarding "Sign out", the anomaly link dialog.
7 card pickers → cardButton: metric cards, the source and widget pickers, destination provider tiles, alert templates, the integrations hub cards.
3 dashed add buttons → variant: "dashed" ("+N more" footprint chip, "Add notes", "Add threshold").
6 buttons that copied Button or IconButton classes → the components (timeline collapse toggle, scope-path remove, code block copy and download, payload copy, issue ID copy).

Skipped on purpose, because they aren't the same thing: full-row click targets, segmented filters with per-kind colours, links that need stopPropagation, a crit-coloured failed-job link, and the dashboards "New dashboard" row (a two-line row, not a button).

The goal is that pages look the same. The labs that render these views show no visual change besides the kit's own focus ring and press feedback. Two examples:

Before	After

Verification

bun run typecheck passes in apps/web.
oxlint, both configs: 0 errors on the changed files.
Vitest, scoped to the touched areas (alerts, dashboards, metrics, sources, replays, agent-sessions, errors, traces, kit, security, services, integrations, infra-integrations, code-review, onboarding, billing, anomalies): all pass. The uptime form scene test now finds the kind options as toggle buttons instead of radios.
Screenshots: headless Chromium at 2x against /lab/kit/buttons, /lab/timeline, /lab/security?state=overview|run-incomplete|add-target, /lab/alerts and /lab/cloudflare, in light and dark, against this PR's base and head, compared with a pixel diff.

🤖 Generated with Claude Code

^{Need help on this PR? Tag @codesmith-bot with what you need.}

coderabbitai · 2026-10-30T20:34:59Z

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 6 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: 7979febf-362f-46cb-b5cf-b353569bd370

Commits

Reviewing files that changed from the base of the PR and between 4fc0db5 and 5da7b35.

Files selected for processing: 34

apps/web/src/lab/entries/kit/buttons.ts
apps/web/src/page/agent-sessions/tool/view-error-modal-payload.ts
apps/web/src/page/alerts/destination/view.ts
apps/web/src/page/alerts/editor/view-details.ts
apps/web/src/page/alerts/editor/view-templates.ts
apps/web/src/page/alerts/hub/view-empty.ts
apps/web/src/page/alerts/uptime-form/uptime-form.scene.test.ts
apps/web/src/page/alerts/uptime-form/view.ts
apps/web/src/page/anomalies/detail/view-link-dialog.ts
apps/web/src/page/code-review/ci/view-runs.ts
apps/web/src/page/dashboards/view/picker.ts
apps/web/src/page/dashboards/widget/view-rail-thresholds.ts
apps/web/src/page/errors/issue/view-sidebar.ts
apps/web/src/page/infra-integrations/cloudflare/zone/view-breakdown.ts
apps/web/src/page/infra-integrations/gcp/list/view.ts
apps/web/src/page/infra-integrations/kit/filter-chip-rail.ts
apps/web/src/page/infra-integrations/planetscale/db/view.ts
apps/web/src/page/integrations/view-hub.ts
apps/web/src/page/kit/message-response.ts
apps/web/src/page/metrics/browse/view-grid.ts
apps/web/src/page/onboarding/create-org-view.ts
apps/web/src/page/security/kit/add-target-view.ts
apps/web/src/page/security/run/view-panels.ts
apps/web/src/page/security/tabs/view-overview.ts
apps/web/src/page/services/detail/view-footprint.ts
apps/web/src/page/services/detail/view-panels.ts
apps/web/src/page/settings/billing/view-cycle.ts
apps/web/src/page/sources/new/view-picker.ts
apps/web/src/page/traces/detail/timeline/view-row.ts
apps/web/src/ui/card-button.ts
apps/web/src/ui/segmented-select.scene.test.ts
apps/web/src/ui/segmented-select.ts
apps/web/src/ui/text-link.ts
packages/ui/src/components/ui/button.styles.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

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

github-actions · 2026-10-30T20:39:37Z

🍁 Maple PR preview

Note

Preview resources were removed when the preview label came off.

Final commit 0267394 · View workflow run

maple-review-bot

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

Makisuo · 2026-10-30T20:57:12Z

Added apps/web/src/ui/segmented-select.scene.test.ts (in 449f75bed): enabled options are tab stops (tabIndex=0), a disabled one is -1, and picking an option moves aria-pressed while leaving the others tabbable.

Makisuo · 2026-10-30T21:18:03Z

Preview check (app-pr-1993.maple.dev at 449f75b, signed in as the preview reviewer, headless Chromium at 2x, light and dark)

Item	Result
Uptime type picker	Pass. Clicking each of the four types selects it and updates the description. Keyboard: Tab moves HTTP → TCP port → DNS record, and Enter or Space picks the focused one. Edit mode not testable: the preview org's plan blocks monitors (402), so nothing was created.
Alert template tiles, destination provider tiles, "Add notes"	Pass. Tiles tint on hover, a selected provider shows its accent border (Discord, Telegram, Slack), and "Add notes" opens the field.
Metrics, sources/new and integrations cards	Pass. They hover and navigate as before.
Service "View all →"	Pass. It goes to `?tab=operations`. No demo service has "Talks to" peers, so the "+N more" chip was absent.
Timeline collapse chevron	Pass. It collapses and expands, and the counter shows "1 of 2 spans".
Dashboards	Not testable. List and detail stay on skeletons because the sync service isn't deployed on `preview:web`. A test dashboard the agent created was deleted through the API.
Infra filter rails	Not testable, no infra connected in the preview org.
Smoke (`/`, traces, logs, errors, services, alerts, dashboards)	Pass. The only console errors are 503s from the sync service.

Uptime type, light	Uptime type, dark

Found and fixed during this check (0267394): in light mode the selected segment's pill was invisible, so only the bolder label showed which option was picked. This affects every segmentedSelect, not only the uptime picker. The pill is -z-10 inside a button with no stacking context, so it painted behind the track's tint. isolate on each item fixes it, and dark mode is unchanged.

Light, before	Light, after	Dark, after

Traces: this PR only changes view code in the browser bundle and adds no backend path or query, so there are no new spans to check.

The uptime monitor kind picker uses segmentedSelect instead of a hand-built track.

17 inline text links move to textLink (monoLinkButton is gone), 7 card pickers to cardButton, 3 dashed add buttons to the dashed variant, and 5 copies of Button/IconButton styling to the components.

- segmentedSelect: every enabled option is a tab stop. Only the selected one was, with no arrow keys, so keyboard users could not change the value (34 callers, including the uptime kind picker). - textLink: href and onClick are exclusive in the type, so isDisabled on a link no longer compiles and gets ignored. - dashed buttons don't shrink on press (full-width rows). - The timeline collapse chevron and scope-path remove button drop the 44px coarse-pointer hit area that covered their neighbours. - The footprint '+N more' chip is sized like the chips beside it.

The selected pill is -z-10 inside a button with no stacking context, so it painted behind the track's tint and only the bolder label marked the selection in light mode (dark mode's pressed styles hid it). isolate keeps it above the track.

maple-review-bot

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

maple-review-bot · 2026-10-30T21:37:29Z

Maple review

🟢 Confidence 8/10 · likely safe to merge. Held at 8 because earlier reviews of this pull request found 2 defects.
_{no findings · tests covered · risk medium · 2 defects fixed in earlier rounds}

Since the last review only the uptime kind picker moved: it now passes className: "w-fit flex-wrap" to segmentedSelect, so the four labelled kinds wrap onto a second row on narrow screens as the old hand-built track did. Safe to merge.

Fixed since the last review

✅ ~~F3 · Kind picker loses flex-wrap, so four labelled segments overflow on phones~~

_{5da7b35 · What was checked, coverage and telemetry details are on the Maple / review check. Reply "won't fix" to dismiss a finding, or mention @maple-review-bot to ask about one.}

Makisuo · 2026-10-30T21:40:38Z

Phone-width check of the wrap fix (5da7b35, captured on the #1994 preview, which includes it; 390px viewport at 3x). The type picker is 324px wide in a 390px viewport and wraps onto two rows. The selected pill shows in light mode, so the isolate fix is live on the preview too.

Light	Dark

Makisuo added the preview:web Deploy a Workers-only PR preview (no ingest/Electric); see docs/pr-previews.md label Oct 30, 2026

Makisuo deployed to pr-preview October 30, 2026 20:34 — with GitHub Actions Active

This comment has been minimized.

Sign in to view

maple-review-bot Bot reviewed Oct 30, 2026

View reviewed changes

Comment thread apps/web/src/page/alerts/uptime-form/view.ts Resolved

Makisuo mentioned this pull request Oct 30, 2026

style(web): toolbar searches at the toolbar size, page gaps through dashboardPage #1994

Merged

Makisuo deployed to pr-preview October 30, 2026 20:39 — with GitHub Actions Active

Makisuo had a problem deploying to pr-preview October 30, 2026 20:43 — with GitHub Actions Failure

This comment has been minimized.

Sign in to view

maple-review-bot Bot reviewed Oct 30, 2026

View reviewed changes

Comment thread apps/web/src/ui/segmented-select.ts Resolved

Makisuo had a problem deploying to pr-preview October 30, 2026 20:52 — with GitHub Actions Failure

This comment has been minimized.

Sign in to view

Makisuo had a problem deploying to pr-preview October 30, 2026 20:56 — with GitHub Actions Error

Makisuo deployed to pr-preview October 30, 2026 20:57 — with GitHub Actions Active

This comment has been minimized.

Sign in to view

Makisuo deployed to pr-preview October 30, 2026 21:00 — with GitHub Actions Active

Makisuo had a problem deploying to pr-preview October 30, 2026 21:17 — with GitHub Actions Error

Makisuo removed the preview:web Deploy a Workers-only PR preview (no ingest/Electric); see docs/pr-previews.md label Oct 30, 2026

This comment has been minimized.

Sign in to view

Makisuo deployed to pr-preview October 30, 2026 21:19 — with GitHub Actions Active

Makisuo added this pull request to stack #1996 October 30, 2026 21:21

Base automatically changed from style/consistency-tokens to main October 30, 2026 21:30

Makisuo added 5 commits October 30, 2026 22:30

feat(web): text link, card button and dashed button in the kit

58ea0b8

The uptime monitor kind picker uses segmentedSelect instead of a hand-built track.

refactor(web): sweep hand-built links, cards and buttons onto the kit

aae1e86

17 inline text links move to textLink (monoLinkButton is gone), 7 card pickers to cardButton, 3 dashed add buttons to the dashed variant, and 5 copies of Button/IconButton styling to the components.

fix(web): textLink tones keep their literal types (satisfies)

f00a79b

test(web): segmentedSelect keeps every enabled option tabbable

f97b889

Makisuo force-pushed the feat/kit-link-card-buttons branch from 0267394 to 42afb11 Compare October 30, 2026 21:30

This comment has been minimized.

Sign in to view

maple-review-bot Bot reviewed Oct 30, 2026

View reviewed changes

Comment thread apps/web/src/page/alerts/uptime-form/view.ts Resolved

fix(web): uptime kind picker wraps on narrow screens like the old track

5da7b35

Makisuo merged commit 04dfb58 into main Oct 30, 2026
34 checks passed

Makisuo deleted the feat/kit-link-card-buttons branch October 30, 2026 21:40

Conversation

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

Uh oh!

New kit pieces

Sweep

Verification

Uh oh!

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

Uh oh!

Review limit reached

Uh oh!

This comment has been minimized.

maple-review-bot Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Oct 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🍁 Maple PR preview

Uh oh!

This comment has been minimized.

maple-review-bot Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This comment has been minimized.

Makisuo commented Oct 30, 2026

Uh oh!

This comment has been minimized.

Makisuo commented Oct 30, 2026

Uh oh!

This comment has been minimized.

This comment has been minimized.

maple-review-bot Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

maple-review-bot Bot commented Oct 30, 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!

Makisuo commented Oct 30, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Makisuo commented Oct 30, 2026 •

edited

Loading

coderabbitai Bot commented Oct 30, 2026 •

edited

Loading

github-actions Bot commented Oct 30, 2026 •

edited

Loading

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

edited

Loading