feat(integrations): plain, scannable Google Cloud integration page

[JeremyFunk]

Direction C from the GCP redesign file. Presentation only; state logic and copy unchanged.

• Sans (font-display) for words, mono only for ids, times, errors and commands; hierarchy by size and weight
• Header: state line (worst connection, · N of M connections when several) and a facts row: Last log entry, Last metrics, Projects
• Integration page title uses font-display (all integrations)
• Connection: scope badge, mono id, muted host project, Configure, menu; no per-connection state badge
• Logs and metrics always side by side when the panel is wide enough (hint-based stacking removed)
• Hints: bold title, muted lines, command chip; failures show Google's answer in a code chip, no tinted boxes
• Run-the-script prompt is a standard warn Alert with AlertAction

Screenshots (local, from a temporary uncommitted lab rendering the header and card over fixtures):

• before: /private/tmp/claude-501/-Users-jeremyfunk-Documents-repos-maple/243f6d15-e26e-4c5a-abe0-5a067b2a95f6/scratchpad/shots/before-c{1,2,3,4}-1440.png
• after: /private/tmp/claude-501/-Users-jeremyfunk-Documents-repos-maple/243f6d15-e26e-4c5a-abe0-5a067b2a95f6/scratchpad/shots/after-{c1,c2,c3,c4,pending,metricsfail}-1440.png, after-c3-900.png, after-c1-600.png

---

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

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 05da2a0c-37f0-4bfc-9664-cf6c96d41bd7

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

• 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[maple-review-bot]

Maple review

🟢 Confidence 9/10 · safe to merge
Every hunk read; the new header logic only re-uses the tested gcpWorstState/state helpers, and the empty-connectors case is unreachable behind the overview's SET_UP.
_{quality 98/100 · 1 note · tests not needed · risk low}

Presentation-only rework of the Google Cloud integration page: a new header state line and facts row, plain hint/failure styling, and a scope badge instead of a per-connection state badge. State logic and copy are untouched, so it is safe to merge.

• GcpHeaderStatus/GcpHeaderFacts add the worst-connection state line and data-time facts to the page header
• The connection header shows a scope Badge with a mono id, and no per-connection state badge
• Capability hints and failures lose the tinted Alert; the run-script prompt is a warn Alert with AlertAction
• Logs and metrics are always side by side at @2xl; hint-based stacking is gone

Findings

🔵 Note · F1 · Header repeats the hub row's state-to-tone mapping at line 586

maintainability · apps/web/src/components/integrations/gcp-integration-card.tsx:612

GcpHeaderStatus re-derives the state-to-tone mapping (worst === "attention" || worst === "healthy" ? worst : "pending") that the GCP hub row already owns at integration-catalog.tsx:586. If a GCP state is added or pending is remapped and only one site changes, the page header and the hub row show different dots for the same integration. Move the mapping into gcp-connector-state.ts next to GCP_CONNECTION_LABEL and use it in both places.

Export the mapping from `gcp-connector-state.ts` (e.g. `gcpHealthTone(state)`) and use it here and at `integration-catalog.tsx:586`.

🤖 Prompt to fix this finding with an AI agent

Findings from an automated review of commit 959054d2462e949b36ed970af0a0cc9ecc01095a. 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 · Note · maintainability · apps/web/src/components/integrations/gcp-integration-card.tsx:612
Header repeats the hub row's state-to-tone mapping at line 586
`GcpHeaderStatus` re-derives the state-to-tone mapping (`worst === "attention" || worst === "healthy" ? worst : "pending"`) that the GCP hub row already owns at `integration-catalog.tsx:586`. If a GCP state is added or `pending` is remapped and only one site changes, the page header and the hub row show different dots for the same integration. Move the mapping into `gcp-connector-state.ts` next to `GCP_CONNECTION_LABEL` and use it in both places.
Suggested fix: Export the mapping from `gcp-connector-state.ts` (e.g. `gcpHealthTone(state)`) and use it here and at `integration-catalog.tsx:586`.

What was checked

• Header only renders with >=1 connector: the overview returns SET_UP at zero (integration-catalog.tsx:579), so gcpWorstState([])'s "healthy" never shows
• font-display and text-ui/5 are real theme tokens (packages/ui/src/styles/tokens.css:307,388) and cn merges text-ui (packages/ui/src/lib/utils.ts:5)
• gcpStatusQuery() is memoized per org (integration-catalog.tsx:241), so the header and the card share one read, and useLiveClock is unconditional in useGcpConnectors

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

[maple-review-bot]

Maple review

🟢 Confidence 8/10 · likely safe to merge
Three web files, all read in full at the head; the extra file list in the kickoff is base-branch work the PR diff does not contain.
_{quality 98/100 · 1 note · tests not needed · risk low}

Presentation-only rework of the Google Cloud integration page: sans/mono split, a header state line and facts row, plain hints, and a warn alert for the run-the-script prompt. State logic is untouched and the change is safe to merge.

• GcpHeaderStatus/GcpHeaderFacts name the worst connection state and last-arrival facts in the page header
• Attention becomes a warn Alert with an AlertAction button
• Notice and GcpMessage drop their boxes; Google's answer renders in InlineCode
• Log and metrics panels always share a row above @2xl; per-connection state badge removed

Still open from earlier reviews

• 🔵 Note · F1 · Header repeats the hub row's state-to-tone mapping at line 586 · apps/web/src/components/integrations/gcp-integration-card.tsx:612

What was checked

• Both header components read the org-memoized gcpStatusQuery() atom, so no extra fetch or poll
• Alert spreads props after its default, so the passed role="status" still wins (packages/ui/src/components/ui/alert.tsx:40)
• Header rows render only when the catalog overview is kind: "connected", so an unresolved or failed gcp status shows nothing

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

[maple-review-bot]

Maple review

🟢 Confidence 8/10 · likely safe to merge
Read the entire rewritten flow: step gating, create/update payloads and the apply-stage confirmation behave as the previous version did.
_{quality 98/100 · 1 note · tests not needed · risk medium}

Turns the Google Cloud configure dialog into a Scope, Data, Run setup stepper with a disclosed log filter and a script card, keeping the same mutations and state helpers. No defects found in the rewritten flow; safe to merge.

• NewConnection splits the create form into a scope step and a data step, gating Continue on scopeReady
• LogFilter moves from a Select to a Collapsible panel of radios, forced open while the GKE choice is unacknowledged
• CollectFields swaps capability checkboxes for Switches with the log filter nested under Logs
• ApplyStage gains RunSummary, ScriptCard, RunStatus and Applied, and drops the parent onStage sync

Still open from earlier reviews

• 🔵 Note · F1 · Header repeats the hub row's state-to-tone mapping at line 586 · apps/web/src/components/integrations/gcp-integration-card.tsx:612

What was checked

• Create and update payloads unchanged: gcpCreateRequest(draft) still gates create, changed.length still picks the update fields (gcp-configure.tsx:900, :1029)
• Ungated reads are guarded before indexing: gcpLogFilters drops keep when no sink exists and FILTER_TEXT has every GcpLogChoice key
• ToggleGroup and RadioGroup keep the repo's array/single value convention used in cloudflare-zone-board.tsx:469

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

[maple-review-bot]

Maple review

🟢 Confidence 8/10 · likely safe to merge
The hunks since 80612a6 are a faithful extraction plus one run-status fix; the carried-over header tone duplication at gcp-integration-card.tsx:612 is still open.
_{quality 98/100 · 1 note · tests not needed · risk medium}

Restyles the Google Cloud integration page (plain sans typography, header state line and facts, side-by-side capabilities) and adds a step-by-step connect flow with a dev-only lab. The files changed since the last review extract GcpApplyView/GcpConfigureFrame, fix the run-status tick, and add /lab/gcp-connect; no new defect in them, but the earlier header tone-mapping duplication is still there.

• GcpApplyView and GcpConfigureFrame extracted from ApplyStage and exported for the lab
• RunStatus ticks a row on a report newer than the one seen when the step opened
• Web run step skips login while it waits for the step to enter state, not the run state machine
• New dev-only lab at /lab/gcp-connect rendering every step and run state over fixtures

Still open from earlier reviews

• 🔵 Note · F1 · Header repeats the hub row's state-to-tone mapping at line 586 · apps/web/src/components/integrations/gcp-integration-card.tsx:612

What was checked

• runConfirmed is shared by ApplyStage's poll and GcpApplyView, so the refresh stops on the same condition (gcp-configure.tsx:1447, :1467, :1508)
• The lab path is registered in LAB_ENTRIES matching the generated /lab/gcp-connect route, as registry.test.ts requires
• CollectFields keeps its logFilter slot at both call sites, so the log filter still reaches the data step (gcp-configure.tsx:950, :1060)

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

[maple-review-bot]

Maple review

🟢 Confidence 8/10 · likely safe to merge
Web hunks are presentational and contained; the merged GCP metric and attribute renames are pinned by the mapping, domain and template tests I read.
_{quality 98/100 · 1 note · tests partial · risk medium}

A presentation pass over the Google Cloud page: sans/mono typography, a header state line with a facts row, the run prompt as an Alert, and a /lab/gcp-connect fixture lab. No new defects; the earlier header/hub tone-mapping duplication still stands at line 612.

• GcpHeaderStatus and GcpHeaderFacts add the worst-connection state line and last-data facts to the page header
• Per-connection state badge removed; the connection row is a scope badge, mono id, host project, Configure and menu
• Logs and metrics always share the row at @2xl; the hint-based stacking is gone
• New /lab/gcp-connect route renders every connect-flow step and run state over fixtures

Before merge

• Manual · Repoint installed GCP dashboards and alert rules that still query the old attr.response_code_class / gcp.run.* names

Still open from earlier reviews

• 🔵 Note · F1 · Header repeats the hub row's state-to-tone mapping at line 586 · apps/web/src/components/integrations/gcp-integration-card.tsx:612

What was checked

• Merged GCP metric renames stay consistent: gcp.test.ts pins every chart's stored name, attribute key and unit through mapGcpTimeSeries
• mapping.ts now spreads metric.attributes into quantile rows, so the direction and label attributes reach p50/p95/p99 points
• GcpHeaderStatus still duplicates integration-catalog.tsx:586's state-to-tone ternary (F1, left open)

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

[maple-review-bot]

Maple review

🟢 Confidence 8/10 · likely safe to merge
Presentation-only diff, read in full; the one open item is the pre-existing duplicated state-to-tone mapping at gcp-integration-card.tsx:612.
_{quality 98/100 · 1 note · tests not needed · risk low}

Rework of the Google Cloud integration page and its configure dialog into a plainer, sans-for-prose layout: a header state and facts row, logs and metrics always side by side, and a standard warn alert for the run-the-script prompt. No functional change found; the earlier duplicated state-to-tone mapping is still present.

• GcpHeaderStatus/GcpHeaderFacts add a state line and facts row to the integrations header
• Capability folds its link into the ·-joined facts line
• Attention renders a warn Alert with an AlertAction instead of a tinted box
• GcpConnection drops the per-connection state badge and the hint-based stacking of logs and metrics

Still open from earlier reviews

• 🔵 Note · F1 · Header repeats the hub row's state-to-tone mapping at line 586 · apps/web/src/components/integrations/gcp-integration-card.tsx:612

What was checked

• gcpWorstState falls back to healthy for no connections (gcp-connector-state.ts:274), so GCP_CONNECTION_LABEL[worst] at :613 is always a string
• Alert spreads props after role="alert" (packages/ui/src/components/ui/alert.tsx:37), so the run-the-script alert's role="status" wins
• FILTER_TEXT is total over GcpLogFilter via satisfies, so FILTER_TEXT[choice.selected] at gcp-configure.tsx:657 cannot be undefined

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

[JeremyFunk]

Folded into #1334 (feat/gcp-integration-card, 7542050) and merged up the stack: #1335 206b14c, #1336 b86fa87, #1475 d6cbceb, #1477 6cb1518, #1480 b30cd15, #1478 78f405c. #1336 and #1477 carry the connect dialog onto their per-runtime log filter and read-only-access models.