Skip to content

feat(app): add mobile session panels and detail drawers - #46389

Merged
Brendonovich merged 8 commits into
v2from
mobile-session-panels
Aug 31, 2026
Merged

feat(app): add mobile session panels and detail drawers#46389
Brendonovich merged 8 commits into
v2from
mobile-session-panels

Conversation

@Brendonovich

@Brendonovich Brendonovich commented Aug 31, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Summary

  • Give mobile sessions full-width Session, Changes, Files, and Terminal tabs, placed above content or below the composer according to bottom-navigation preference.
  • Add a mobile Files browser with shared open tabs, searching, closing, and full-width line comments; remove doubled dividers.
  • Move Usage to a compact More menu and render real Status and Session details panels in bottom drawers, preserving dismissal, focus return, and reopen behavior.
  • Hide desktop-only session identity controls on mobile while retaining the current title in the shell drawer trigger.
  • Keep the embedded Terminal mounted across view switches and preserve shortcut behavior and session-scoped lifecycle.

Stack

  1. feat(app): refine mobile shell home and settings #46388: mobile shell, Home, and settings (base v2).
  2. feat(app): add mobile session panels and detail drawers #46389: mobile session views, Files, Status, and details (base feat(app): refine mobile shell home and settings #46388).
  3. feat(app): refine mobile diff review and wrapping preferences #46390: mobile Changes summaries, Open file, and wrapping preferences (base feat(app): add mobile session panels and detail drawers #46389).

Merge in that order; each PR's diff and before/after evidence compare against its immediate base. Independent #46391 (touch controls/PWA) can land separately.

Sessions

  • ses_fa9375bf2ffd1qwP3qNWRyj1dW: mobile view navigation and embedded Terminal.
  • ses_fa8e8d9a1ffedn46jvXHQkVsgx: Files/More/Status integration and drawer lifecycle fixes.
  • ses_fa8d40a0bffelgYWDAaU1XvYj8: child of the preceding session; embedded Status body and initial drawer.
  • ses_fa8b885a0ffdKRQ0V2AMcGEu9a: shared drawer shell extraction, Session details, compact burger/divider.
  • ses_fa8c9b9c6ffeULe3oLIORr07X2: Files borders and full-width annotations/comments.
  • ses_fa8b34988ffdpVySqqaO61cULj: mobile Usage spacing.

Before / After

Before/after against the immediate shell base. Real production components with synthetic Atlas fixture data, dark theme; mobile 390x844 and desktop 1440x1000. New mobile Files/Usage/Terminal/menu surfaces did not exist on the base, so those BEFORE images show the original mobile Session rather than a fabricated view.

Surface Before After
Mobile session, top view navigation; identity header hidden, titlebar retained Before: Mobile session, top view navigation; identity header hidden, titlebar retained After: Mobile session, top view navigation; identity header hidden, titlebar retained
Mobile Changes: compact 40px review header and 8px gutters Before: Mobile Changes: compact 40px review header and 8px gutters After: Mobile Changes: compact 40px review header and 8px gutters
Mobile Usage: compact padding with realistic token and cost summary Before: Mobile Usage: compact padding with realistic token and cost summary After: Mobile Usage: compact padding with realistic token and cost summary
Mobile Usage scrolled: total cost and token breakdown Before: Mobile Usage scrolled: total cost and token breakdown After: Mobile Usage scrolled: total cost and token breakdown
Mobile Terminal: dedicated view with fixture-only terminal output Before: Mobile Terminal: dedicated view with fixture-only terminal output After: Mobile Terminal: dedicated view with fixture-only terminal output
Mobile More menu: Usage, Status and Session details Before: Mobile More menu: Usage, Status and Session details After: Mobile More menu: Usage, Status and Session details
Mobile Status drawer: MCP tab Before: Mobile Status drawer: MCP tab After: Mobile Status drawer: MCP tab
Mobile Status drawer: Plugins tab Before: Mobile Status drawer: Plugins tab After: Mobile Status drawer: Plugins tab
Mobile Status drawer successfully reopened after close, backdrop, Escape and drag Before: Mobile Status drawer successfully reopened after close, backdrop, Escape and drag After: Mobile Status drawer successfully reopened after close, backdrop, Escape and drag
Mobile Session details drawer: real production project, workspace, branch and changes summary Before: Mobile Session details drawer: real production project, workspace, branch and changes summary After: Mobile Session details drawer: real production project, workspace, branch and changes summary
Mobile session, bottom view navigation; identity header hidden, titlebar retained Before: Mobile session, bottom view navigation; identity header hidden, titlebar retained After: Mobile session, bottom view navigation; identity header hidden, titlebar retained
Mobile Files browse (LTR): full-width header separator Before: Mobile Files browse (LTR): full-width header separator After: Mobile Files browse (LTR): full-width header separator
Mobile Files opened tabs (LTR): aligned tab and full-width border Before: Mobile Files opened tabs (LTR): aligned tab and full-width border After: Mobile Files opened tabs (LTR): aligned tab and full-width border
Mobile Files full-width comment editor (LTR): 12px inline gutters Before: Mobile Files full-width comment editor (LTR): 12px inline gutters After: Mobile Files full-width comment editor (LTR): 12px inline gutters
Mobile Files saved full-width comment (LTR) Before: Mobile Files saved full-width comment (LTR) After: Mobile Files saved full-width comment (LTR)
Mobile Files browse (RTL): full-width header separator Before: Mobile Files browse (RTL): full-width header separator After: Mobile Files browse (RTL): full-width header separator
Mobile Files opened tabs (RTL): aligned tab and full-width border Before: Mobile Files opened tabs (RTL): aligned tab and full-width border After: Mobile Files opened tabs (RTL): aligned tab and full-width border
Mobile Files full-width comment editor (RTL): 12px inline gutters Before: Mobile Files full-width comment editor (RTL): 12px inline gutters After: Mobile Files full-width comment editor (RTL): 12px inline gutters
Mobile Files saved full-width comment (RTL) Before: Mobile Files saved full-width comment (RTL) After: Mobile Files saved full-width comment (RTL)
Desktop 1440px session: unchanged identity and summary panel layout check Before: Desktop 1440px session: unchanged identity and summary panel layout check After: Desktop 1440px session: unchanged identity and summary panel layout check
Desktop Session details summary: unchanged real production panel Before: Desktop Session details summary: unchanged real production panel After: Desktop Session details summary: unchanged real production panel
Desktop original Status popover: MCP tab, unchanged reference Before: Desktop original Status popover: MCP tab, unchanged reference After: Desktop original Status popover: MCP tab, unchanged reference
Desktop original Status popover: Plugins tab, unchanged reference Before: Desktop original Status popover: Plugins tab, unchanged reference After: Desktop original Status popover: Plugins tab, unchanged reference
  • Status and Session details compare their real old popovers with the new bottom drawers.
  • Files and comment screenshots include English LTR and forced RTL; terminal output is synthetic.
  • All raw screenshots and the recorded interaction were inspected. The later shell settings cascade fix does not affect these session-only captures.

Recording

Fixture-backed mobile view switching, Files and full-width comments, terminal caching, then Status and Session details dismissal/reopen. Chromium, dark theme, 390x844, 14.88 seconds; assertions also passed without recording pacing.

panels-interaction.webm

Validation

  • Updated shared mobile session readiness checks to verify titlebar identity rather than the intentionally removed heading. Eighteen affected notice/history/projection regressions and the mobile line-comment regression pass after updating the selected Changes expectation.
  • A full combined local E2E run was not green. After fixing mobile readiness/selection expectations, all ten remaining failures reproduced identically on clean v2: macOS keyboard assumptions in large-paste caret movement, MCP dialog shortcuts, and Shift+F10 context-menu tests. Baseline run: 10 failed, 14 passed; alternative native key probes passed. These unrelated harness fixes are excluded. Do not treat focused passes as a full-suite pass.
  • Follow-up screenshot verification found and fixed a production settings CSS-cascade issue; all 16 focused stack regressions now pass, including full-width settings geometry and updated drawer/sidebar expectations.
  • All four PR groups merge cleanly in an isolated integration worktree; the combined production build passes all eight mobile browser regressions and app typechecking.
  • App and session-ui package typechecks pass.
  • Pre-push full workspace typecheck passes all 33 tasks, with hooks enabled.
  • Five production-build browser regressions pass: Files in LTR/RTL, view/Terminal switching in top/bottom layouts, and Status dismissal/reopen using button, backdrop, Escape, and drag.
  • Production navigation benchmark passes on base and head: stable content observation 156.1ms and 143.1ms respectively. Single machine-local samples, not statistical performance conclusions.
  • Preserved v2's title-save-on-blur and IME handling during timeline extraction.
  • E2E typecheck has a pre-existing dir type error in new-session-workspace-pending.spec.ts:38, reproduced on clean v2.
  • Original user worktree/staging and existing app/server processes remain untouched.

@Brendonovich
feat(app): refine mobile shell home and settings
b03c4f2 
OpenCode-Session: ses_fa9929a54ffeG0AAK1g2BwuFHj
OpenCode-Session: ses_fa96329bbffdPCp54xCdIn18M0
OpenCode-Session: ses_fa94e625fffdatsz7sy2hC4tMI
OpenCode-Session: ses_fa93a9c41ffdv86XF9fhdYPok9
OpenCode-Session: ses_fa9375bf2ffd1qwP3qNWRyj1dW
OpenCode-Session: ses_fa92bcf95ffefmn2bqtEY6z23J
@Brendonovich
feat(app): add mobile session panels and detail drawers
cd6e351 
OpenCode-Session: ses_fa9375bf2ffd1qwP3qNWRyj1dW
OpenCode-Session: ses_fa8e8d9a1ffedn46jvXHQkVsgx
OpenCode-Session: ses_fa8d40a0bffelgYWDAaU1XvYj8
OpenCode-Session: ses_fa8b885a0ffdKRQ0V2AMcGEu9a
OpenCode-Session: ses_fa8c9b9c6ffeULe3oLIORr07X2
OpenCode-Session: ses_fa8b34988ffdpVySqqaO61cULj
@Brendonovich
Brendonovich requested a review from Hona as a code owner August 31, 2026 11:29
This was referenced Aug 31, 2026
Merged
Merged
Merged
@Brendonovich
test(app): cover mobile shell navigation and settings layout
1730891 
Add isolated fixture coverage for project selection, drawer navigation, and settings menu dismissal. The full-width settings assertion currently reproduces the committed mobile CSS load-order regression and requires the production selector fix before merge.
@Brendonovich
fix(app): preserve full-width mobile settings layout
4e0db6a 
Fix the production CSS cascade discovered during screenshot verification and update legacy tab/sidebar regressions for the mobile drawer.

OpenCode-Session: ses_fa91badecffeXpbAgW57aYbHif
@Brendonovich
chore(app): sync mobile shell verification fixes
325ba21
@Brendonovich
test(app): verify mobile session identity in the titlebar
2e393e2 
OpenCode-Session: ses_fa91badecffeXpbAgW57aYbHif
@Brendonovich
test(app): assert the selected mobile changes view
7470e9f 
OpenCode-Session: ses_fa91badecffeXpbAgW57aYbHif
Base automatically changed from mobile-shell-polish to v2 August 31, 2026 13:20
@Brendonovich
Brendonovich enabled auto-merge (squash) August 31, 2026 13:58
@Brendonovich
Brendonovich merged commit 711a0a2 into v2 Aug 31, 2026
8 checks passed
@Brendonovich
Brendonovich deleted the mobile-session-panels branch August 31, 2026 14:04
jinhuang712 pushed a commit to jinhuang712/opencode that referenced this pull request Sep 26, 2026
@Brendonovich
feat(app): add mobile session panels and detail drawers (anomalyco#46389
0c0a99e 
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Hona Hona Awaiting requested review from Hona Hona is a code owner

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@Brendonovich