Problem / opportunity
The chat reading column in the web UI is capped at a fixed 900px max-width (hard-coded in multiple SCSS rules). On wide windows or when the side panels are collapsed, users cannot expand the conversation to use the available width, forcing a narrow centered column even when there is plenty of horizontal space.
Proposed behavior
Add a full-width tiled toggle to the FlowChatHeader. When enabled, the chat reading column (message list, composer, runtime-status, explore region, file-modifications bar) stretches edge-to-edge instead of capping at 900px; the layout returns to the centered 900px column when the toggle is off, including when the chat pane is collapsed.
A new appearance token --bf-appearance-token-flowchat-content-max-width (default 900px) replaces the hard-coded 900px, so the full-width behavior is backed by the appearance token system and other surfaces keep their existing width.
Product surface
Details, examples, or constraints
- New
layout.chatFullWidth boolean in LayoutState / DEFAULT_LAYOUT_STATE (src/web-ui/src/app/types/index.ts).
- Fine-grained hooks
useChatFullWidth and useToggleChatFullWidth in useApp.ts (uses useSyncExternalStore so only observing components re-render, and the action reads the manager directly).
- Toggle button in
FlowChatHeader.tsx (Maximize2 / Minimize2 icons), aria-label + tooltip via i18n.
- i18n strings for en-US / zh-CN / zh-TW in
flow-chat.json (layout.fullWidth.enter / layout.fullWidth.exit).
ChatPane / ChatInput / related SCSS rules switched from hard-coded 900px to the appearance token, plus a full-width modifier that removes the cap.- Focused test added in
FlowChatHeader.test.tsx (session-fullwidth-toggle renders and flips the layout).
- Verification:
pnpm run type-check:web, i18n check (0 warnings), apperance/theme token build, vitest focused tests (6 passed).
Problem / opportunity
The chat reading column in the web UI is capped at a fixed
900pxmax-width (hard-coded in multiple SCSS rules). On wide windows or when the side panels are collapsed, users cannot expand the conversation to use the available width, forcing a narrow centered column even when there is plenty of horizontal space.Proposed behavior
Add a full-width tiled toggle to the FlowChatHeader. When enabled, the chat reading column (message list, composer, runtime-status, explore region, file-modifications bar) stretches edge-to-edge instead of capping at
900px; the layout returns to the centered900pxcolumn when the toggle is off, including when the chat pane is collapsed.A new appearance token
--bf-appearance-token-flowchat-content-max-width(default900px) replaces the hard-coded900px, so the full-width behavior is backed by the appearance token system and other surfaces keep their existing width.Product surface
Details, examples, or constraints
layout.chatFullWidthboolean inLayoutState/DEFAULT_LAYOUT_STATE(src/web-ui/src/app/types/index.ts).useChatFullWidthanduseToggleChatFullWidthinuseApp.ts(usesuseSyncExternalStoreso only observing components re-render, and the action reads the manager directly).FlowChatHeader.tsx(Maximize2 / Minimize2 icons), aria-label + tooltip via i18n.flow-chat.json(layout.fullWidth.enter/layout.fullWidth.exit).ChatPane/ChatInput/ related SCSS rules switched from hard-coded900pxto the appearance token, plus a full-width modifier that removes the cap.FlowChatHeader.test.tsx(session-fullwidth-togglerenders and flips the layout).pnpm run type-check:web, i18n check (0 warnings), apperance/theme token build,vitestfocused tests (6 passed).