Improve mobile terminal mode and web sidebar layout

[TraderSamwise]

Summary

• add a terminal/chat hard switch for narrow and native chat views while preserving desktop split mode
• keep the composer available in terminal-only mode
• clean terminal divider rendering based on the actual terminal pane width
• keep the desktop web sidebar fixed width so chat gets the remaining space

Verification

• yarn --cwd app typecheck
• yarn --cwd app lint
• yarn --cwd app vitest run lib/terminal-output.test.ts
• push hook: yarn typecheck && yarn lint && yarn test (80 files / 607 tests)
• Chrome debugger checks for narrow terminal mode and desktop split layout

Summary by CodeRabbit

• New Features

  • Responsive split-view for terminal and chat display that adapts layout based on screen size—showing side-by-side on wider screens and stacked on narrow screens
  • Improved terminal output formatting with better handling of divider lines

• UI Improvements

  • Refined sidebar width styling for consistent layout

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 0884a938-2a39-4a0c-b146-fbad5722625d

📥 Commits

Reviewing files that changed from the base of the PR and between b13b789 and 3c25e51.

📒 Files selected for processing (4)

• app/app/(main)/agent/[sessionId]/chat.tsx
• app/components/ProjectSidebar.tsx
• app/lib/terminal-output.test.ts
• app/lib/terminal-output.ts

---

📝 Walkthrough

Walkthrough

This PR adds a terminal output formatting utility and refactors the chat screen to support responsive layout modes. A new module detects and collapses consecutive divider lines in terminal output while respecting configurable width constraints. The chat screen integrates this formatter and implements three layout modes—split view, terminal-only, and chat-only—using window dimensions and measured pane width. The sidebar container switches to fixed-width styling.

Changes

Terminal Output Formatting and Chat Layout Modes

Layer / File(s)	Summary
Terminal output formatting library and tests app/lib/terminal-output.ts, app/lib/terminal-output.test.ts	formatTerminalOutputForDisplay() detects divider lines by character-ratio heuristics, collapses consecutive dividers into a single one, preserves indentation, and truncates to a configurable width. Three test cases validate divider collapsing with width capping, preservation of non-divider content, and indentation retention.
Chat screen imports and responsive sizing constants app/app/(main)/agent/[sessionId]/chat.tsx	Imports window dimensions hook, new terminal icons, and the formatting function. Adds sizing constants for responsive divider-width computation.
Chat screen responsive state and view-mode derivation app/app/(main)/agent/[sessionId]/chat.tsx	Tracks window dimensions and terminal pane width via state. Derives view-mode booleans (canShowTerminal, canUseSplitView, showSplit, showTerminalOnly) to control conditional rendering. Computes terminal divider width based on measured pane width and formats terminal output.
Chat screen terminal toggle and layout rendering app/app/(main)/agent/[sessionId]/chat.tsx	Rewrites terminal toggle button with mode-aware labels and icons. Implements three-branch layout: split view renders terminal beside chat, narrow layout shows terminal above composer, and default shows message list with live-output indicator and composer.
Sidebar fixed-width layout app/components/ProjectSidebar.tsx	Extracts SIDEBAR_WIDTH constant and updates container to use fixed width via inline style instead of Tailwind classes, with explicit height.

Sequence Diagram

sequenceDiagram
  participant User
  participant ChatScreen
  participant TerminalOutput
  participant Layout
  User->>ChatScreen: Toggle terminal view
  ChatScreen->>ChatScreen: Measure window dimensions
  ChatScreen->>ChatScreen: Read terminalPaneWidth state
  ChatScreen->>ChatScreen: Derive canShowTerminal, canUseSplitView, showSplit
  ChatScreen->>TerminalOutput: formatTerminalOutputForDisplay(output, { dividerWidth })
  TerminalOutput->>TerminalOutput: Detect divider lines via isDividerLine
  TerminalOutput->>TerminalOutput: Collapse consecutive dividers
  TerminalOutput->>ChatScreen: Return formatted output
  ChatScreen->>Layout: Render based on view mode (split/narrow/chat-only)
  Layout->>User: Display terminal or chat or both

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 A rabbit hops through terminal lines,
Dividers collapse in measured designs,
Split views and toggles, responsive and tight,
The chat screen reshapes—left, center, and right! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 28.57% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Improve mobile terminal mode and web sidebar layout' accurately summarizes the main changes: adding terminal/chat switching for mobile views and making the web sidebar fixed width. It's concise and clearly reflects the primary objectives.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/gui-mobile-shell

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

app/app/(main)/agent/[sessionId]/chat.tsx

ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.

app/components/ProjectSidebar.tsx

ESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.

app/lib/terminal-output.test.ts

ESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.

• 1 others

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}