235 lines
11 KiB
Markdown
235 lines
11 KiB
Markdown
# 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)
|
||
|
||
1. 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.
|
||
2. `.app-header .btn-link` (+hover) restores the translucent-on-dark
|
||
treatment for the lone dark-surface use ("Sign out").
|
||
3. `.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.
|
||
4. `.rfc-breadcrumb` → `flex-wrap: wrap`.
|
||
5. `.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
|
||
|
||
1. **`.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.
|
||
2. **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.
|
||
3. **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):
|
||
1. ~~Merge PRs #5/#9, tag, deploy.~~ Done this session.
|
||
2. **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`.
|
||
3. 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.
|
||
```
|