Skip to main content

Compact Chat puts the conversation first

· 2 min read
EXEPERT Team
Brain Research Visualizer

EXEPERT's compact Chat layout now keeps the transcript and composer readable without removing the live Affective Field data.

Root cause​

The tablet Chat tile had only about 269px of internal height, while its model header, context pills, 149px Affective Field, quick prompts, and 73px composer required more than the tile could hold. Focusing the input then scrolled the clipped #leftChat container, hiding the header and leaving the message list only a few pixels tall.

What changed​

  • At 961-1240px, active Chat receives a minimum 390px lower row. At 960px and below, active Chat uses clamp(420px, 72svh, 640px) without changing the Study panel height.
  • The compact Affective Field is now a bar-free summary strip. It keeps the dominant state, phase, intensity, valence, arousal, and toxicity visible, wrapping the four values into a 2x2 grid on narrow tiles.
  • The redundant context-pill row is hidden below 1241px; the selected model remains visible in the Chat header.
  • Fixed Chat chrome no longer shrinks. The transcript owns the remaining space and scrolls independently, while the composer stays pinned to the bottom.
  • Quick prompts remain visible for an empty chat, disappear after the first user turn, and return when New chat resets the conversation.
  • Programmatic composer focus prevents browser scrolling, so #leftChat stays at scrollTop = 0 and its header remains visible.
  • The docs package now declares its Docusaurus-compatible React type dependency directly, preventing the docs typecheck from resolving the app's React 18 types when both projects are installed in the same checkout.

The existing desktop Chat, message history key, model picker, Affective Field calculations, IDs, events, and public interfaces are unchanged.

Verification​

The responsive Playwright coverage exercises 1440px, 1240px, 970px, 960px, 390x844, and the short-height 390x667 case. It checks transcript allocation, telemetry height, prompt reset behavior, composer containment, brain-stage containment, parent scroll position, and horizontal overflow across Dashboard and Arcade while preserving Prompt, Observability, and Journal layouts.

The release passed the app and docs TypeScript checks, 252 unit tests with six expected skips, ten focused Chat/responsive Playwright scenarios, the production app build, and the Docusaurus production build. Visual checks at 970x820, 390x844, and 390x667 confirmed the compact telemetry, readable transcript, pinned composer, zero parent scroll, and absence of horizontal overflow.