Skip to main content

Compact workspace puts the live brain first

· 2 min read
Brain Research Visualizer

EXEPERT's compact Dashboard and Arcade layouts now prioritize the live brain visualizer, keep the active tool beside it on tablets, and give the shared Study/Chat region a wider reading surface below.

What changed

  • css/app.css reorders the initial, Dashboard, and Arcade workspace at the existing 1240px and 960px breakpoints without changing the desktop grid.
  • At 961–1240px, the brain and Tool/Metrics panels occupy the first row while the shared Study/Chat panel spans the full second row.
  • At 960px and below, the primary flow is Brain, Study/Chat, then Tool/Metrics, keeping Chat reachable before the longer metrics stack.
  • The compact tablet brain card can shrink below its desktop 560px minimum, preventing the WebGL canvas and status bar from being clipped by the tile. Existing phone height clamps still control the taller single-column stage.
  • The responsive selectors include the unset first-paint state, preventing a layout jump before the workbench controller marks the Dashboard active.
  • tests/e2e/responsive-workspace.spec.ts covers desktop preservation, the 1240px and 970px tablet layouts, the 960px and 390px phone layouts, Chat containment, brain-stage clipping, horizontal overflow, and the unchanged Prompt, Observability, and Journal workspaces.

User impact

The brain visualizer now appears in the former top-left position at compact widths instead of being pushed into a clipped full-width row. Chat gains the full lower row on tablets and remains immediately below the brain on phones, which improves line length, input visibility, and access to the conversation.

Prompt Playground, Observability, Journals, Settings, the wide-screen layout, chat state, DOM identifiers, and runtime APIs are unchanged.

Verification

Checked locally with:

pnpm typecheck
pnpm test
pnpm exec playwright test tests/e2e/responsive-workspace.spec.ts
pnpm build
pnpm --dir docs-site typecheck
pnpm --dir docs-site exec docusaurus build

The app suite completed with 252 passing unit tests and six expected skips. All four responsive Playwright scenarios passed, and visual smoke checks at 970px and 390px confirmed contained brain telemetry, the intended panel order, a full-width tablet Chat surface, and no document-level horizontal overflow.