[Bugfix #766] Add missing CSS for .architect-pane / .architect-pane-body

[waleedkadous]

Summary

Fixes #766.

Root Cause

PR #762's multi-architect dashboard introduced .architect-pane and .architect-pane-body wrappers in the N>1 branch of App.tsx but never added matching CSS. The wrappers collapsed to intrinsic block height, so the architect terminal rendered at ~1/4 of the SplitPane left side whenever a workspace had more than one architect.

The N=1 path renders <Terminal> directly without these wrappers, so the regression slipped past the DOM-snapshot-identical unit test in App.architect-tabs.test.tsx (only N=0/N=1/N=2 DOM structure was asserted — not layout).

Fix

packages/dashboard/src/index.css:

.architect-pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.architect-pane-body {
  flex: 1;
  min-height: 0;
}

.architect-pane is positioned absolutely against .split-left (which already has position: relative). This sidesteps the percentage-height plumbing in the ancestor chain — the pane just fills its positioned ancestor. As a flex column, the tab strip takes its natural ~34px and .architect-pane-body flex-fills the rest. min-height: 0 lets the body shrink inside the flex container so the inner <Terminal>'s xterm canvas does not push it past the SplitPane bottom.

Regression Test

packages/codev/src/agent-farm/__tests__/e2e/architect-pane-layout.test.ts: Playwright test that mocks /api/state with N=2 architects, confirms the architect tab strip is rendered (i.e. the N>1 branch in App.tsx is exercised), and asserts:

• .architect-pane height matches .split-left height (±2px)
• .architect-pane-body reaches the bottom of .split-left (±2px)
• .architect-pane-body fills ≥60% of the available height below the tab strip

Verified the test correctly catches the regression: pre-fix run reported the architect-pane height was 263px short of the SplitPane left side.

Iterations

• iter-1 (61327066): display: flex; flex-direction: column; height: 100%; min-height: 0 on .architect-pane.
• iter-2 (e94b514f): switched to position: absolute; inset: 0 per architect feedback. More robust — does not rely on the entire ancestor flex/percentage-height chain.

Test Plan

• pnpm build passes
• pnpm test passes (porch fix-phase check, 20.5s)
• New Playwright test passes against the worktree's own Tower (verified TOWER_TEST_PORT=4101, 4102)
• New Playwright test fails against the pre-fix bundle (263px height delta → 0px)
• Existing App.architect-tabs.test.tsx still passes (8/8)

Test caveat: playwright.config.ts sets reuseExistingServer: true on port 4100. If a globally-installed Tower is running on 4100 (e.g. via pnpm -w run local-install), the test reuses it and may validate stale dashboard code. Run with TOWER_TEST_PORT=4101 or rebuild and restart the global Tower to verify on a fresh build.

CMAP Review

• Gemini: APPROVE (HIGH) — "fix correctly addresses the layout regression, and the Playwright regression test effectively guards against future regressions"
• Codex: APPROVE (HIGH) — "focused fix with an appropriate regression test"
• Claude: COMMENT (HIGH) — flagged that the PR body and test JSDoc described the iter-1 height: 100% approach while the committed code is iter-2 position: absolute; inset: 0. Addressed in this PR description and in architect-pane-layout.test.ts JSDoc.

Fixes #766

[waleedkadous]

iter-2: pushed e94b514f

On the architect's "test still fails with 263px" report — the regression report and the fix-verification were correct, but the architect's pnpm --filter @cluesmith/codev exec playwright test architect-pane-layout invocation was hitting a stale Tower, not my worktree.

Root cause of the misleading failure: playwright.config.ts uses reuseExistingServer: true on port 4100. The Tower running on 4100 in this environment is the globally-installed Codev (/opt/homebrew/lib/node_modules/@cluesmith/codev/dist/agent-farm/servers/tower-server.js), which serves the pre-#766 dashboard. So both iter-1 and a no-op test run would report 263px short — the served dashboard has zero .architect-pane CSS regardless of what the worktree contains.

Verified by getComputedStyle diagnostic against port 4100:

• .architect-pane: display: block (default, no rule applied), height: 417px

Re-ran on port 4101 / 4102 (playwright spins up its own Tower from the worktree's dist/) — both iter-1 and iter-2 pass:

[global-setup] Workspace activated
Running 1 test using 1 worker
  ✓  N=2 architect-pane-body fills the SplitPane left side (493ms)
  1 passed (1.3s)

iter-2 change

Adopted the architect's option (b) for extra robustness — position: absolute; inset: 0; on .architect-pane against the already-position: relative .split-left. Sidesteps the percentage-height plumbing in the flex ancestor chain (.app-body has no explicit display, so its flex children inherit block-level defaults; in that pathology a height: 100% can resolve unpredictably).

.architect-pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

To verify on your machine

Either restart your global Tower so it picks up the new dashboard build, or:

TOWER_TEST_PORT=4101 pnpm --filter @cluesmith/codev exec playwright test architect-pane-layout

The stale-Tower-on-4100 problem is a broader test-infra footgun for all 8 e2e tests, not just this one. Out of scope for this bugfix, but worth a follow-up issue.

[waleedkadous]

Architect approval — fix verified end-to-end. Re-ran the Playwright test against the worktree's own Tower bundle (TOWER_TEST_PORT=4102 spawns a fresh Tower from the worktree, not the globally-installed v3.0.6) and the test passes in 618ms.

Worth a separate doc note: testing-guide.md should call out the gotcha you caught — by default Playwright hits localhost:4100 which serves the globally-installed dashboard, NOT the worktree's bundle. Anyone testing a dashboard change has to set TOWER_TEST_PORT to a fresh port for a true regression test. Filing as a follow-up doc-only issue.

Approved — please merge with gh pr merge 767 --merge --admin.