Session 0059.0 — Transcript

Date: 2026-06-01 Goal: Fix the reported button-UX bugs on the OHM RFC view header — "missing" buttons and a generally unpolished button feel — with the right framework/deployment separation.

Outcome: Shipped rfc-app v0.31.4 (CSS-only patch) fixing invisible light-surface .btn-link buttons + harmonizing the RFC breadcrumb action bar; bumped the OHM pin to 0.31.4; merged + tagged + deployed live to ohm.wiggleverse.org and verified the fix in the served CSS. Also corrected the stale rfc-app/deploy/ docs after discovering the GCP name-alignment drift (PR #6). Nothing left blocking.

Highlights:

Root-cause, not whack-a-mole: the "missing buttons" were .btn-link (a dark-header utility, white-on-translucent) reused on light surfaces, rendering white-on-white.

One CSS file touched (frontend/src/App.css, +44/−7).

Verified visually in an isolated CSS harness (Preview MCP screenshot) before committing; vite build clean.

Pre-session state

Operator report: a screenshot of the OHM RFC view (super-draft "Informed Consent"). Header action bar shows "Start Contributing" (filled black) and "Graduate to RFC repo" (filled black) rendering fine, but "Metadata" / "Claim ownership" / "Invitations" appearing ghosted/missing, and a button clipped at the right edge. Operator: "Some buttons are missing… clean up the general look and feel of buttons in there. It doesn't feel smooth or modern."
ohm-rfc: on main, clean. .rfc-app-version = 0.31.3. CLAUDE.md "Current pin" line stale at 0.2.2.
rfc-app (~/git/rfc-app): on main but 6 commits behind origin/main, working tree at VERSION 0.30.1 — stale. origin/main tip e8e555d (v0.31.3 + a docs commit). Fast-forwarded to the tip before any edit so the work targeted the version OHM actually runs.
Live OHM deploy: not inspected; unchanged this session.

Turn-by-turn arc

Arc 1 — Triage: framework concern, sync first

Per the two-repo iteration pattern, button rendering/styling is UI logic owned by the framework → fix in rfc-app, not the content repo. Located the header in frontend/src/components/RFCView.jsx (.rfc-breadcrumb / .breadcrumb-actions). Noticed the working tree was stale (0.30.1) vs. the OHM pin (0.31.3); fast-forwarded ~/git/rfc-app main to origin tip so the fix built on the live version. Claimed session ID 0059 via claim-session-id.sh.

Arc 2 — Root cause

.btn-link (App.css:37) was color: var(--c-white); background: var(--color-on-dark-soft) = rgba(255,255,255,0.15). Born (git blame: first slice, 779ba6d) as the dark-header button pattern — the tokens.css comment even says "On the dark header, translucent white is the established pattern." But .btn-link is reused on light surfaces: the breadcrumb action bar (.rfc-breadcrumb bg --c-gray-50), the PR diff toggle + "Edit title" (PRView.jsx), the invitations/inbox modals, and the discussion panel. On near-white backgrounds those buttons were white-on-white — present and functional in the DOM, but invisible. The two filled CTAs survived because their fill carried them. The right-edge clipping was the action row overflowing with no wrap. In the dark header, the only .btn-link is "Sign out" (App.jsx:256) — everything else there uses .header-* / .btn-signin-header.

Arc 3 — The fix (App.css only)

Base .btn-link redefined as a light-surface secondary button (white fill, hairline --c-gray-300 border, --c-gray-700 label, hover darkens). Fixes every light-surface reuse at once.
.app-header .btn-link (+hover) restores the translucent-on-dark treatment for the lone dark-surface use ("Sign out").
.breadcrumb-actions → flex-wrap + a higher-specificity harmonizer (.breadcrumb-actions > button, > a) normalizing the toggle, filled CTAs, and secondary buttons to one height (30px) / radius / type so the row reads as a single control group and wraps instead of clipping.
.rfc-breadcrumb → flex-wrap: wrap.
.diff-mode-toolbar .btn-link.active → filled ink so the selected toggle reads clearly against the new secondary base.

Smooth transitions + the keyboard focus ring were already global (the v0.21.0 interaction-polish layer), so no new motion/focus rules — the "not smooth/modern" feel was the invisible/inconsistent resting state, not missing animation.

Arc 4 — Verify

Built an isolated HTML harness loading the real tokens.css + App.css and rendering the exact breadcrumb markup (dark header, super-draft bar, edit-branch bar, diff toggle), served via a temp static server, screenshotted via the Preview MCP. Confirmed: Sign out legible on dark; Metadata/Claim ownership/Invitations now legible secondary buttons; filled CTAs still dominant; diff toggle's active state filled. Harness + the temp .claude/launch.json removed afterward (ohm-rfc left clean). npm run build clean.

Arc 5 — Release flow (full, per operator choice)

rfc-app: branch release/v0.31.4-button-ux; VERSION + frontend/package.json → 0.31.4; CHANGELOG patch entry; commit 76c82a5. Pushed via the SSH URL (origin is https with no non-interactive credential; git.wiggleverse.org:2222 SSH works). PR #5 opened.
ohm-rfc: branch session-0059/pin-0.31.4; .rfc-app-version → 0.31.4; CLAUDE.md "Current pin" corrected 0.2.2 → 0.31.4; commit ee5b90b. Pushed to origin (SSH). PR #9 opened.
PRs created via ohm-infra/scripts/rfc-authoring.sh pr-create (Keychain ohm-gitea-token, scope write:repository; whoami 403s on missing read:user but PR ops work). Note: owner ben now 307-redirects to ben.stull (a Gitea rename) — use ben.stull/... since the script's curl doesn't follow redirects.

Arc 6 — Deploy to live OHM + deploy-doc correction

Operator: "you do it" (the deploy). The rfc-app/deploy/ docs turned out to be stale — they name project wiggleverse-rfc / VM rfc-app / IP 34.132.29.41 / path /opt/rfc-app, none of which exist post the GCP name-alignment. Discovery path: wiggleverse-rfc "project not found" → listed projects → the live project is wiggleverse-ohm, VM ohm-rfc-app, IP 136.116.40.66; direct SSH port 22 timed out → IAP-only (--tunnel-through-iap). Probed the box: install /opt/ohm-rfc-app, service ohm-rfc-app.service (running), user ohm-rfc-app, meta repo wiggleverse/ohm-content.

Critically, the VM's git origin is git.benstull.org/benstull/rfc-app — a separate Gitea from the release one (git.wiggleverse.org) that does not auto-mirror. git ls-remote benstull v0.31.4 was empty, so the VM couldn't see the release. Pushed main + tag v0.31.4 to the benstull remote (fast-forward), then on the VM: git fetch --tags → git checkout v0.31.4 (the box tracks a detached tag) → npm ci && npm run build (Node 20 on the box) → systemctl restart ohm-rfc-app.

Verified: backend startup RFC app started — meta repo wiggleverse/ohm-content; https://ohm.wiggleverse.org returns 200 from 136.116.40.66 serving the new bundle (index-B2Q74zqG.css); the public CSS carries the fix (.btn-link{…border:1px solid var(--c-gray-300)…} and .app-header .btn-link{…}).

Then corrected deploy/DEPLOY-NEW-SESSION-PROMPT.md + deploy/RUNBOOK.md (new names, IAP, two-remote, tag-checkout, meta-repo) as a docs-only change — branch docs/deploy-infra-realignment, commit 714c2ae, PR #6, merged (0062510). No version bump (docs precedent: the docs-only commit after v0.31.3).

Cut state (end of session)


rfc-app	PR #5 MERGED @ `551d240` (tag `v0.31.4`); docs PR #6 MERGED @ `0062510`. main tip `0062510`. VERSION 0.31.4.
ohm-rfc	PR #9 MERGED to main @ `10836c0`; commit `ee5b90b`. pin 0.31.4.
OHM live	0.31.4 DEPLOYED on VM `ohm-rfc-app` (project `wiggleverse-ohm`); `ohm-rfc-app.service` active; `https://ohm.wiggleverse.org` 200, fix confirmed in served CSS.
benstull remote	`git.benstull.org/benstull/rfc-app` main + tag `v0.31.4` pushed (VM deploy source).
ohm-rfc pin (main)	0.31.4

Ledger	Status
Button UX: invisible light-surface `.btn-link` + breadcrumb polish (rfc-app v0.31.4)	✅ shipped + deployed — live on ohm.wiggleverse.org
Deploy-doc correction (GCP name-alignment drift)	✅ shipped (rfc-app PR #6)

§19.2 candidates surfaced

.btn-link is an overloaded class. Now corrected to a light-surface default with a dark-header scope, but the deeper pattern — a proper named button vocabulary (.btn-secondary, .btn-ghost, surface-aware variants) — would prevent the next "reused on the wrong surface" regression. Candidate for a future UI-system pass, not urgent.
rfc-app origin is https with no non-interactive credential. Every push this session went via an explicit SSH URL. Worth either switching origin to SSH or storing a credential, so future sessions don't rediscover this.
Two-Gitea drift (deploy source ≠ release source). Releases land on git.wiggleverse.org (ben.stull/rfc-app), but the live VM deploys from git.benstull.org/benstull/rfc-app, which does not auto-mirror — every deploy needs a manual git push benstull main <tag> first. Wiring the two instances to mirror (or repointing the VM origin at the release Gitea) would remove a footgun. Documented in the deploy docs for now (PR #6); the mirror itself is unbuilt.

What lands on the operator's plate

Everything this session set out to do is done — merged, tagged, deployed, and the deploy docs corrected. Nothing is blocking.

Optional follow-ups (not blocking):

~~Merge PRs #5/#9, tag, deploy.~~ Done this session.
Wire the two Gitea instances to mirror (§19.2 #3) so deploys stop needing a manual git push benstull. Or repoint the VM's origin at git.wiggleverse.org.
Consider a real button vocabulary (§19.2 #1) on the next UI pass.

Prompt the operator can paste into the next Claude Code session

You reserve your own session ID (claim-session-id.sh). Context: the
prior session (0059) fixed a button-UX bug in rfc-app, shipped it as
v0.31.4 (CSS-only patch in frontend/src/App.css), and DEPLOYED it live
to ohm.wiggleverse.org — done, nothing pending. The bug: .btn-link was a
dark-header style reused on light surfaces, so secondary buttons
(Metadata / Claim ownership / Invitations on the RFC breadcrumb)
rendered white-on-white and looked missing; the breadcrumb action bar
was also harmonized + made to wrap. rfc-app PR #5 @ merge 551d240 (tag
v0.31.4); ohm-rfc pin #9 @ merge 10836c0; deploy-doc fix PR #6 @ 0062510.

Hard-won infra facts for the next deploy (the deploy docs were stale —
now fixed in PR #6): the live VM is `ohm-rfc-app` in project
`wiggleverse-ohm`, SSH is IAP-only
(`gcloud compute ssh ohm-rfc-app --zone=us-central1-a
--project=wiggleverse-ohm --tunnel-through-iap`), install path
`/opt/ohm-rfc-app`, service `ohm-rfc-app`. The VM's git origin is a
SEPARATE Gitea (`git.benstull.org/benstull/rfc-app`) that does NOT
mirror the release Gitea (`git.wiggleverse.org`) — so push `main` + the
tag to the `benstull` remote before deploying. Releases push via
ssh://git@git.wiggleverse.org:2222/ben.stull/…; PRs via
ohm-infra/scripts/rfc-authoring.sh (owner ben.stull). Open §19.2: wire
the two Gitea instances to mirror so the manual benstull push goes away.
Otherwise, fresh OHM driver session.

11 KiB Raw Blame History Unescape Escape