Skip to content

fix: harden interaction locks and session routes#415

Merged
Astro-Han merged 3 commits into
devfrom
codex/i413-interaction-route-locks
May 4, 2026
Merged

fix: harden interaction locks and session routes#415
Astro-Han merged 3 commits into
devfrom
codex/i413-interaction-route-locks

Conversation

@Astro-Han

@Astro-Han Astro-Han commented May 4, 2026

Copy link
Copy Markdown
Owner

Summary

Hardens the two runtime boundaries tracked in #413:

  • makes project, new-session, and explicit-session route targets separate helper actions
  • wraps resize body interaction state in a releasable lock with complete/cancel/timeout release reasons
  • expands post-resize e2e coverage to hit the actual ResizeHandle mousedown path and verify body style acquire/release
  • verifies new session, existing session row, and settings remain clickable after resize release

Why

#412 fixed the urgent packaged-app path, but the underlying boundaries were still easy to regress: temporary resize state could leave body-level interaction styles behind, and session/project navigation intent was still encoded as ad hoc route strings in layout code.

This PR keeps the existing route shapes and UI behavior, but makes the ownership rules easier to test and reuse.

Closes #413.

Human Review Status

Pending. A human should make the final merge decision after reviewing the final diff and verification evidence.

Review Focus

Please check:

  • openProjectRoute, newSessionRoute, and openSessionRoute preserve the existing route shapes
  • createBodyInteractionLock releases body styles reliably without changing normal resize behavior
  • pointerup and mouseup are treated as completed resize releases so onCollapse semantics are preserved
  • the expanded e2e test stays focused on post-resize clickability and does not depend on unrelated right-panel design assertions

Risk Notes

Low-to-medium app/runtime risk. This touches shared navigation helper usage and the shared ResizeHandle component, but keeps behavior intentionally narrow: no route shape changes, no UI redesign, and no data-layer refactor.

How To Verify

App unit tests: bun --cwd packages/app test -> 784 passed
UI resize unit test: bun --cwd packages/ui test src/components/resize-handle.test.ts -> 4 passed
App typecheck: bun --cwd packages/app typecheck -> passed
UI typecheck: bun --cwd packages/ui typecheck -> passed
Diff check: git diff --check -> passed
Targeted resize e2e: bun --cwd packages/app test:e2e e2e/commands/panels.spec.ts --grep "desktop remains clickable after right-panel resize ends with mouseup" -> 1 passed
Sidebar route e2e: bun --cwd packages/app test:e2e e2e/sidebar/sidebar-session-links.spec.ts -> 2 passed
Full commands/panels.spec.ts: known unrelated failures remain in older right-panel design assertions; the targeted resize test passed

Screenshots or Recordings

Not applicable. This is runtime hardening and regression coverage with no intended visual change.

Checklist

  • Human review status is stated above as pending, approved, or not required
  • I linked the related issue, or stated why there is no issue
  • This PR has type, scope, and priority labels, or I requested maintainer labeling
  • I described the review focus and any meaningful risks
  • I listed the relevant verification steps and the key result for each
  • I did not introduce unrelated refactors, dependencies, generated files, or file changes beyond the stated scope
  • I manually checked visible UI or copy changes when needed, with screenshots or recordings
  • I considered macOS and Windows impact for desktop, packaging, updater, signing, paths, shell, or permissions changes
  • I called out docs, release notes, dependencies, permissions, credentials, deletion behavior, generated content, or local file changes when relevant
  • 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

  • Refactor

    • Improved panel resize behavior: dragging reliably locks/unlocks page interactions, collapse behavior is more consistent, and session/project navigation flows are simplified and more reliable.
  • Tests

    • Expanded end-to-end and unit tests covering multi-session workflows, panel resize interactions (including state during drag and after release), and guaranteed cleanup of created sessions.

@coderabbitai

coderabbitai Bot commented May 4, 2026

Copy link
Copy Markdown
Contributor

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: 0869c656-f741-486d-a25a-b7d78eea8b5a

📥 Commits

Reviewing files that changed from the base of the PR and between d4fa390 and e095e22.

📒 Files selected for processing (3)
  • packages/app/e2e/commands/panels.spec.ts
  • packages/ui/src/components/resize-handle.test.ts
  • packages/ui/src/components/resize-handle.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/ui/src/components/resize-handle.test.ts
  • packages/ui/src/components/resize-handle.tsx

📝 Walkthrough

Walkthrough

New route-construction helpers separate project-opening and explicit session navigation. A reusable body interaction lock manages temporary style changes during resize gestures. Layout now uses the new route helpers. E2E and unit tests were added/updated to exercise session routing and resize interaction release behavior.

Changes

Session Route Ownership and Interaction Lock Hardening

Layer / File(s) Summary
Route Helper Definitions
packages/app/src/pages/layout/helpers.ts
Added newSessionRoute(directory), openProjectRoute(root), and openSessionRoute(directory, id) that build base64-encoded session routes.
Layout Navigation Wiring
packages/app/src/pages/layout.tsx
Replaced manual base64 URL construction with openProjectRoute, openSessionRoute, and newSessionRoute; renamed openProject param navigateshouldNavigate.
Interaction Lock API
packages/ui/src/components/resize-handle.tsx
Exported event constants, resizeInteractionFallbackMs, BodyInteractionLockReleaseReason, and createBodyInteractionLock(body, options?) to capture/restore body.style.userSelect and body.style.overflow, listen for stop/cancel events, and support a fallback timeout.
ResizeHandle Integration
packages/ui/src/components/resize-handle.tsx
Reworked ResizeHandle to use the interaction lock, introduced guarded finish(collapse) logic, and added optional collapseThreshold prop; onMouseUp now calls finish(true) and stops the lock.
Unit Tests for Routes
packages/app/src/pages/layout/helpers.test.ts
Added test asserting openProjectRoute, newSessionRoute, and openSessionRoute return distinct base64-encoded paths and that openSessionRoute includes session id.
Unit Tests for Interaction Lock
packages/ui/src/components/resize-handle.test.ts
New tests cover createBodyInteractionLock start/stop behavior, release reasons (complete, cancel, timeout), idempotency, and restoration of prior body styles.
E2E: Panels / Resize
packages/app/e2e/commands/panels.spec.ts
Replaced prior resize test with one that creates two sessions, performs a right-panel resize while asserting document.body style during drag and after mouseup, switches sessions via the UI, verifies prompt/settings visibility, and ensures both sessions are cleaned up in finally.

Sequence Diagram

sequenceDiagram
    participant ResizeHandle as ResizeHandle
    participant Lock as InteractionLock
    participant Body as document.body
    participant Events as EventStream
    participant App as AppCallbacks

    ResizeHandle->>Lock: start()
    Lock->>Body: set userSelect="none", overflow="hidden"
    ResizeHandle->>Events: attach listeners (mousemove, pointerup, blur, etc)
    Note over ResizeHandle,Events: user drags resize handle
    Events->>Lock: stop/cancel event (pointerup/blur/timeout)
    Lock->>Events: remove listeners
    Lock->>Body: restore previous userSelect & overflow
    Lock->>App: onRelease(reason)
    App->>ResizeHandle: finish(collapse) / trigger onCollapse if threshold reached
Loading

Estimated Code Review Effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly Related Issues

Possibly Related PRs

Suggested Labels

bug

Poem

🐇 I nudged the handle, paused a beat,

Locked the body, freed the seat,
Routes now tidy, clicks return,
Sessions safe — I hop and churn.

🚥 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 accurately summarizes the main changes: hardening interaction locks for resize state management and refactoring session/project route navigation.
Description check ✅ Passed The description fully addresses the template with clear summary, detailed reasoning, linked issue (#413), risk assessment, verification steps with concrete results, and completed checklist.
Linked Issues check ✅ Passed All key objectives from #413 are met: route helpers created (openProjectRoute, newSessionRoute, openSessionRoute) [#413], body interaction lock with release reasons implemented [#413], e2e coverage expanded for post-resize clickability [#413], and existing route shapes preserved [#413].
Out of Scope Changes check ✅ Passed All changes are directly scoped to PR objectives: route helper extraction, interaction lock creation, and e2e test expansion; no UI redesign, router rewrite, or unrelated refactors introduced.

✏️ 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/i413-interaction-route-locks

Review rate limit: 9/10 reviews remaining, refill in 6 minutes.

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

@Astro-Han Astro-Han added P1 High priority app Application behavior and product flows ui Design system and user interface platform Electron shell, OS integration, packaging, updater, signing, paths, and permissions labels May 4, 2026

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request refactors navigation logic by introducing centralized route helper functions and improves the panel resizing mechanism with a new createBodyInteractionLock utility to manage global styles. E2E and unit tests have been updated to reflect these changes. Feedback suggests increasing the interaction lock's fallback timeout to 30 seconds to avoid premature termination during slow resizes and updating the E2E tests to dispatch mousedown instead of pointerdown to align with the component's event listeners.

Comment thread packages/ui/src/components/resize-handle.tsx Outdated
Comment thread packages/app/e2e/commands/panels.spec.ts Outdated

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
packages/app/e2e/commands/panels.spec.ts (1)

52-52: ⚡ Quick win

Prefer a stable semantic selector for the right panel.

Line 52 uses #right-panel; switch to a data-component or role-based locator for resilience.

As per coding guidelines: Use data-component, data-action, or semantic roles for selectors instead of CSS class names or IDs.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/app/e2e/commands/panels.spec.ts` at line 52, The test uses a fragile
ID selector when creating the locator const rightPanel =
page.locator("#right-panel"); update this to use a stable semantic selector such
as a data attribute or role (for example use
page.locator('[data-component="right-panel"]') or page.getByRole('region', {
name: /right panel/i })) so the locator references a data-component or role
instead of the hard-coded ID; change the locator expression wherever rightPanel
is defined/used to the chosen semantic selector.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/app/e2e/commands/panels.spec.ts`:
- Line 88: Replace the ad-hoc regex URL assertions on lines 88 and 92 with the
shared route helper from ../actions (e.g., sessionRoute or whatever helper
exports the canonical/resolved session path). Import the helper at the top of
the test file and use await expect(page).toHaveURL(sessionRoute(slug)) (or the
equivalent helper call) so routing assertions use the canonical/resolved slug
logic across platforms.
- Around line 41-47: The session creations using stamp and sdk.session.create
(variables one and two) occur before the try/finally, so if a create fails the
first-created session can leak because the finally cleanup won't run; move the
creation of both sessions (the await sdk.session.create(...) calls that assign
one and two) inside the try block, track created session IDs in a local array,
and in the finally only attempt cleanup conditionally for IDs that were actually
pushed into that tracker; apply the same pattern to the other setup block that
creates sessions (the similar code around lines creating one/two at 97-100).

---

Nitpick comments:
In `@packages/app/e2e/commands/panels.spec.ts`:
- Line 52: The test uses a fragile ID selector when creating the locator const
rightPanel = page.locator("#right-panel"); update this to use a stable semantic
selector such as a data attribute or role (for example use
page.locator('[data-component="right-panel"]') or page.getByRole('region', {
name: /right panel/i })) so the locator references a data-component or role
instead of the hard-coded ID; change the locator expression wherever rightPanel
is defined/used to the chosen semantic selector.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: eb455f01-be22-4777-adb1-0de395a94300

📥 Commits

Reviewing files that changed from the base of the PR and between bca9027 and d4fa390.

📒 Files selected for processing (3)
  • packages/app/e2e/commands/panels.spec.ts
  • packages/ui/src/components/resize-handle.test.ts
  • packages/ui/src/components/resize-handle.tsx

Comment thread packages/app/e2e/commands/panels.spec.ts
Comment thread packages/app/e2e/commands/panels.spec.ts
@Astro-Han Astro-Han merged commit a87364b into dev May 4, 2026
22 checks passed
@Astro-Han Astro-Han deleted the codex/i413-interaction-route-locks branch May 4, 2026 02:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

app Application behavior and product flows P1 High priority platform Electron shell, OS integration, packaging, updater, signing, paths, and permissions ui Design system and user interface

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Task] Harden interaction locks and session route ownership

1 participant