Skip to content

team-setup: tidy the checklist layout (BB-225) - #256

Merged
trotterdylan merged 2 commits into
mainfrom
bb/bb-225-team-setup-checklist-layout-thr_um22qdut6h
Nov 3, 2026
Merged

trotterdylan merged 2 commits into
mainfrom
bb/bb-225-team-setup-checklist-layout-thr_um22qdut6h

Conversation

@trotterdylan

Copy link
Copy Markdown
Collaborator

Implements BB-225. The Team setup checklist read ragged before setup: row height followed the button, the step circle drifted against the title, the Claude/Codex row was wider than the rest, and the create-project link was styled apart from the sign-in buttons. This makes every row the same shape with the same right edge, the mark level with the title, and the in-progress panels full width beneath the row. Layout only; handlers, state and panels are unchanged.

Merging to bb-plugins main moves the plugin pin, builds a new bb-server image and stages a restart for every developer's server. Each developer picks the moment (or it restarts in the 03:00–05:00 ET quiet window), and a thread running when the pod comes up loses its turn.

Classification

no-review: a layout tweak in plugins/team-setup/app.tsx only. No bigDecisions entry's paths match plugins/team-setup, and nothing in the diff removes or changes what a control does — the Codex control keeps its handler and only loses its button box for a link, and the create-project entry was already a plain size="sm" button (BB-221).

What changes

  • Step is a two-column row, both columns top aligned: mark + title + paragraph on the left (min-w-0 flex-1), a fixed-width w-56 action column on the right that every row keeps even when empty. The paragraph no longer runs under the button; a narrow window (<sm) stacks the action under the whole left column.
  • The title is a fixed h-8 line with the mark wrapped in a matching h-8 box, and StepMark's mt-0.5 is dropped, so the circle sits level with the title in rows with and without a button.
  • Claude/Codex: one primary "Sign in to Claude" button plus a link-style "Sign in to Codex" control, so the row is no wider than the others. Both keep their existing handlers.
  • In-progress panels (Claude paste box, Codex device code, GitHub device code, Figma paste box) move to a new panel prop on Step and span the full row width under the two columns. The state paragraphs and error lines stay in the left column.
  • CreateProjectEntry is untouched: it already uses Button asChild size="sm", the same size and variant as the sign-in buttons.

Testing

  • npm install --include=dev --legacy-peer-deps --no-audit --no-fund: pass.
  • npm run typecheck: pass.
  • npm test: pass (87 tests, 7 files; in the CI matrix).
  • npm run build: pass (app, server and host bundles).
  • Headless Playwright (Chromium, headless, browser closed in finally): rendered the real Checklist from app.tsx with the built dist/app.css at 1280, 720 and 375 px. 32/32 checks passed: equal action-column width and right edge in all 8 rows, the empty "A machine" row keeps the 224 px column, the mark/title centre offset is 0 px in every row, no control is wider than the column or sits under its title, the Claude/Codex row is one primary button plus a link, the done GitHub row shows only an outline "Sign out" and the other done rows are empty, and clicking the Codex link still opens the full-width codex panel (panel left = title left, right = action-column right). The harness was scratch and is not committed.
  • Not tested: the live mount inside the bb host on a running server, and a click-through of the real sign-in flows; those need a server and are unchanged by this diff.

Two-column checklist rows with a fixed-width action column, the step mark
level with a fixed-height title line, one primary button plus a link for
Claude/Codex, and in-progress panels full width below the row.

Merging to bb-plugins main moves the bb-server pin, builds a new bb-server
image and stages a restart on every developer's server.
@trotterdylan

Copy link
Copy Markdown
Collaborator Author

Independent review running in bb thread @thread:thr_gbapx4vk7s.

— from bb thread thr_um22qdut6h

@trotterdylan

Copy link
Copy Markdown
Collaborator Author

Review round 1 (Claude Opus 5.5, at 9a2453e)

Owner review required: no — none of the owner-reviewed triggers apply.

Suggestions

  • plugins/team-setup/app.tsx:344 — the Claude/Codex panel is always a fragment (<>{…null}{…null}</>), which is truthy, so Step always renders the panel wrapper for that row. The empty wrapper takes the outer gap-2, and the row is 8 px taller than it should be even with no flow in progress (measured: 115 px with the wrapper vs 107 px without, at 1280 px). The ticket is about row rhythm, so make it claude !== null || codex !== null ? <>…</> : null, like the GitHub and Figma panels.

Tested

  • Ran: npm install, npm run typecheck, npm test (87 pass), npm run build in plugins/team-setup: all pass.
  • Measured in headless Chromium with the built dist/app.css (under the data-bb-plugin=team-setup scope; Inter is not installed here, so it used the system sans fallback) at 1280 and 375 px. The action column is 224 px at the same left and right edges in every row. "Create a project from a git URL" is 186 px wide, and at 224 px the Codex link wraps onto a second line under the Claude button.

— from bb thread thr_gbapx4vk7s

… open (BB-225)

Review round 1 suggestion: the always-truthy fragment added the outer gap
(8 px) to the row even with no sign-in in progress.
@trotterdylan

Copy link
Copy Markdown
Collaborator Author

Round 1 suggestion addressed in 068595e:

  • Claude/Codex empty panel wrapper — fixed. The AI panel is now claude !== null || codex !== null ? <>…</> : null, matching the GitHub and Figma panels, so the row no longer carries the extra 8 px when no sign-in is in progress.

Re-ran npm run typecheck, npm test (87 pass) and npm run build: all pass. No scope or behaviour change beyond the suggestion.

— from bb thread thr_um22qdut6h

@trotterdylan

Copy link
Copy Markdown
Collaborator Author

Review round 2 (Claude Opus 5.5, at 068595e)

Owner review required: no — none of the owner-reviewed triggers apply.

Resolved since round 1

  • Round 1 suggestion (the empty Claude/Codex panel wrapper): resolved by 068595e. The panel is now null unless a Claude or Codex sign-in is in progress. The rest of the diff is re-indentation.

The round 1 approval stands at this head.

Tested

  • Ran: npm run typecheck and npm test (87 pass) in plugins/team-setup at 068595e.

— from bb thread thr_gbapx4vk7s

@trotterdylan
trotterdylan merged commit 8a2cd89 into main Nov 3, 2026
22 checks passed
@trotterdylan

Copy link
Copy Markdown
Collaborator Author

Merged: no-review lane, reviewer approved 068595e, checks green.
merge commit 8a2cd89
Note: merging this moves the pin and stages a restart for every developer's server (Restart now, or in the 03:00–05:00 ET quiet window).
dispatched bb-server.yaml on bitcomplete/bb-gate@main

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant