fix(app): stabilize session opening composer

[Astro-Han]

Summary

Fixes a session-opening flicker where the previous session composer stayed visible while a sidebar-selected target session was still waiting for its messages to hydrate.

No linked issue; this came from a user-reported local recording where the stale composer was visible during the 2s-3s opening window.

Why

The previous session-opening guard only hid the timeline area. The real session composer still rendered whenever an activeSessionID existed, so route selection, opening UI, and stale input chrome could appear together during a delayed session switch.

This change lifts the opening-state calculation to the page layer and reuses it for both the main view and composer region. While opening, the composer region renders a non-interactive placeholder dock that preserves the measured bottom space without exposing the real prompt.

Related Issue

None.

Human Review Status

Pending

Review Focus

Please focus on the session-opening state boundary: the placeholder should only render while the target route is not ready, should not expose [data-component="prompt-input"], and should give way to the real composer once the target timeline loads.

Risk Notes

Low to medium UI risk. This touches the session page composer mount boundary, but the focused E2E covers delayed sidebar navigation, stale timeline content, prompt absence during opening, placeholder height stability, and restoration of the real prompt after load.

Skipped conditional checklist items:

• Platform impact: not applicable; no platform, packaging, updater, signing, path, shell, or permission code changed.
• Docs/release/dependency/local-file surfaces: not applicable; no docs, release notes, dependencies, permissions, credentials, deletion behavior, generated content, or local file surfaces changed.

How To Verify

Focused E2E: PASS - PAWWORK_PERF_TRACE=1 bun run test:e2e:local -- e2e/sidebar/sidebar-session-links.spec.ts -g "opening a delayed sidebar session never shows the previous session as loading UI"
Typecheck: PASS - bun run typecheck
Session unit tests: PASS - bun test src/pages/session/session-main-view.test.ts src/pages/session/session-opening-skeleton.test.ts src/pages/session/use-session-timeline-data.test.ts src/pages/session/session-view-controller.test.ts (40 passed)
Shell frame contract: PASS - bun test src/shell-frame-contract.test.ts (10 passed)
Diff check: PASS - git diff --check

Screenshots or Recordings

Visible UI check completed from the Playwright trace produced by the focused delayed-sidebar E2E. In the opening frames, the target sidebar row is selected, previous-session text is absent, target text is still hidden until hydrated, and the real prompt is absent while the bottom space remains reserved by the opening placeholder.

Checklist

How to use this checklist:

• Tick a box by replacing [ ] with [x]. Do not edit, add, or remove items.
• The bot-applied label items can only be honestly ticked AFTER the PR is opened and the labeler / priority-triage bots have run — return to the PR description and tick them then.
• Most items are required. The few that are conditional are explicitly marked (conditional); for those, leave unticked if they truly do not apply and explain why in Risk Notes. All other items must be ticked before requesting human review.

• Type label — this PR carries exactly one of bug, enhancement, task, documentation. Type labels are author-added; the labeler bot does NOT assign them. Add the label in the GitHub UI, then tick this.
• Routing labels — this PR carries at least one of app, ui, platform, harness, ci. The labeler bot assigns these on PR open based on changed paths. Confirm the bot's choice (or override if wrong), then tick this.
• Priority label — this PR carries exactly one of P0, P1, P2, P3. The priority-triage bot suggests one on PR open. Confirm or override, then tick this.
• Human Review Status above is set to Pending, Approved by @<reviewer>, or Not required: <reason> (default is Pending; "not required" is restricted to bot-authored low-risk PRs).
• I linked the related issue, or stated in Summary why there is no issue.
• I described the review focus and any meaningful risks.
• I replaced the example block in How To Verify with the real verification steps and the key result for each.
• I did not introduce unrelated refactors, dependencies, generated files, or file changes beyond the stated scope.
• (conditional) I manually checked visible UI or copy changes when needed, with screenshots or recordings. Leave unticked only if no visible UI or copy changed.
• (conditional) I considered macOS and Windows impact for platform, packaging, updater, signing, paths, shell, or permissions changes. Leave unticked only if no platform/packaging surface was touched.
• (conditional) I called out docs, release notes, dependencies, permissions, credentials, deletion behavior, generated content, or local file changes when relevant. Leave unticked only if none of those surfaces was touched.
• I reviewed the final diff for unrelated changes and suspicious dependency changes.
• I am targeting dev, and my PR title and commit messages use Conventional Commits in English.

Summary by CodeRabbit

• New Features

  • Added session opening state UI with a placeholder composer dock that appears while a session loads and disappears once content is ready.

• Tests

  • Enhanced e2e test coverage for session loading scenarios, including placeholder dock rendering and loading UI behavior verification.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: eaa07e5b-b77f-4784-b0ee-a13ee1168270

📥 Commits

Reviewing files that changed from the base of the PR and between 6fc2c9a and ab6f822.

📒 Files selected for processing (4)

• packages/app/e2e/sidebar/sidebar-session-links.spec.ts
• packages/app/src/pages/session.tsx
• packages/app/src/pages/session/session-composer-region.tsx
• packages/app/src/pages/session/session-main-view.tsx

---

📝 Walkthrough

Walkthrough

The PR centralizes session opening-state computation by moving logic from child components into the session page, creating a sessionOpening memo that is wired to both the composer region and main view. It introduces a new visual placeholder dock for the composer during delayed session initialization and adds E2E test coverage for placeholder behavior.

Changes

Session opening state and placeholder rendering

Layer / File(s)	Summary
Session page opening-state computation and wiring packages/app/src/pages/session.tsx	Import shouldShowSessionOpeningState and create a sessionOpening memo that computes whether the opening UI state should display based on session ID, route readiness, and timeline session state. Wire the computed value to both SessionPageComposerRegion via opening prop and SessionMainView via sessionOpening prop.
Composer region placeholder dock component packages/app/src/pages/session/session-composer-region.tsx	Import createMemo, update SessionPageComposerRegion props to accept opening?: boolean, and implement a memoized conditional render. When opening is true, render a new SessionOpeningComposerPlaceholder component with fixed styling, ref wiring, centering logic, and data attributes; otherwise render the normal SessionComposerRegion.
SessionMainView prop refactoring packages/app/src/pages/session/session-main-view.tsx	Remove shouldShowSessionOpeningState import, add sessionOpening: boolean to the component props (replacing prior route-based opening-state inputs), and update showSessionOpeningState() and openingSkeletonMounted initialization to use the passed prop instead of internal computation.
E2E test for opening placeholder behavior packages/app/e2e/sidebar/sidebar-session-links.spec.ts	Import sessionComposerDockSelector, capture the source composer dock bounding-box for reference, add test logic to verify the opening placeholder dock appears, poll until its height matches the source dock, release delayed message routing, and assert the placeholder dock is removed after content loads.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Astro-Han/pawwork#375: The main PR's session opening placeholder dock reports height via setPromptDockRef, while PR #375 fixes ResizeObserver logic to synchronize session scroll/padding with prompt dock height—both directly target placeholder dock height measurement and layout effects.
• Astro-Han/pawwork#424: The main PR's opening-state computation and placeholder rendering refactor builds on PR #424's "Opening session…" state identity changes and routing via shell navigation.

Poem

🐰 A placeholder appears, so graceful and wide,
As sessions load gently with patience as guide—
From parent to children, the state flows so clear,
And tests now confirm that the dock will appear! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% 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
Title check	✅ Passed	The title 'fix(app): stabilize session opening composer' clearly and concisely summarizes the main change: fixing a session-opening flicker issue in the composer component using conventional commits format.
Description check	✅ Passed	The PR description comprehensively follows the template with all required sections completed: Summary explains the flicker issue, Why provides context, Related Issue is stated as None, Human Review Status is set to Pending, Review Focus identifies key boundaries, Risk Notes address relevant surface areas, How To Verify includes actual test results, Screenshots/Recordings confirm visual behavior, and the Checklist is properly filled with explanations for skipped conditional items.
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 codex/session-opening-placeholder

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.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

Suggested priority: P2 (includes user-path files (packages/app/src/pages/session.tsx, packages/app/src/pages/session/session-composer-region.tsx, packages/app/src/pages/session/session-main-view.tsx)).

P1/P0 are reserved for maintainer confirmation. Please relabel manually if this is a release blocker, security issue, data-loss risk, or updater/runtime failure.

[gemini-code-assist]

Code Review

This pull request introduces a placeholder state for the session composer dock (SessionOpeningComposerPlaceholder) while a session is opening. It lifts the sessionOpening state computation up to the main session page and passes it down to both SessionPageComposerRegion and SessionMainView. Additionally, E2E tests are updated to assert the presence and height of this opening placeholder dock. The reviewer suggested using expect.poll when asserting the bounding box height of the opening placeholder dock in the E2E tests to prevent flakiness from mid-flight layout states or CSS transitions, along with using Infinity as a fallback to ensure intentional failures.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.