Skip to content

feat(web-ui): add chat full-width tiled toggle backed by appearance token - #2431

Open
1688mengdie wants to merge 2 commits into
GCWing:mainfrom
1688mengdie:feat/chat-full-width-redesign
Open

feat(web-ui): add chat full-width tiled toggle backed by appearance token#2431
1688mengdie wants to merge 2 commits into
GCWing:mainfrom
1688mengdie:feat/chat-full-width-redesign

Conversation

@1688mengdie

@1688mengdie 1688mengdie commented Aug 23, 2026

Copy link
Copy Markdown

Summary

Add a full-width tiled toggle to the chat 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 the hard-coded 900px; the layout returns to the centered 900px column when toggled 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.

Closes #196

Type and Areas

Type: Feature / UI-UX

Areas: Web UI (also flows into desktop since it uses the web-ui)

Motivation / Impact

The chat reading column was capped at a fixed 900px, so on wide windows (or with side panels collapsed) users could not expand the conversation to use the available width, forcing a narrow centered column even when plenty of horizontal space existed. This adds an explicit full-width toggle so the user can choose between the narrow centered column and a full-width tiled chat.

Verification

Local (already verified on the validated branch, before submission):

  • pnpm run type-check:web — pass
  • i18n check (en-US / zh-CN / zh-TW locale JSON) — 0 warnings
  • appearance / theme token build — pass
  • vitest focused tests — 6 passed (includes the new session-fullwidth-toggle test in FlowChatHeader.test.tsx)
  • git diff --check (trailing whitespace) — clean

Remote: fork CI triggered on this PR (Frontend Build / Rust Build Check / CLI Tests / Cargo Deny / Shell Deploy).

Note: this is an AI-assisted change — test degree: 已测 (tested).

Reviewer Notes

Manual verification path (low risk, if you prefer to confirm visually):

  1. Open a FlowChat session in a wide window.
  2. Click the full-width toggle button in the chat header (Maximize2 / Minimize2 icons).
  3. The message list / composer / runtime-status / explore region should stretch edge-to-edge instead of capping at 900px.
  4. Toggle it off (or collapse the chat pane) — the reading column returns to the centered 900px column.
  5. The button's aria-label and tooltip update between "Tile chat full width" / "Exit full-width tiled chat".

Checklist

  • This PR is focused and does not include secrets, temporary prompts, generated scratch files, or unrelated artifacts.
  • Relevant verification is recorded above, or skipped checks are explained.
  • User-facing strings, docs, and locales are updated where applicable.

user added 2 commits August 23, 2026 14:14
… action hook

Avoid re-rendering FlowChatHeader on arbitrary app state changes by
replacing the full useApp() subscription with useToggleChatFullWidth(),
a fine-grained action that reads the current value straight from the
app manager. The read side keeps using the existing useChatFullWidth()
useSyncExternalStore hook.
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