feat(ui): animate docked pane transitions

[benvinegar]

Summary

• animate any docked pane when it opens or closes using OpenTUI's timeline engine
• support left, right, top, and bottom pane placements
• move other panes and the review geometry alongside the transitioning pane while keeping semantic pane planning immediate
• retain closing panes in the presentation projection until their exit transition completes
• add focused interpolation coverage for every placement

Verification

• bun run typecheck
• bun run test — 1,735 passed, 9 skipped
• bun run test:integration — 139 passed, 1 skipped
• bun run test:tty-smoke — 9 passed
• bun run install:bin
• manually exercised the installed build in a real terminal

Visual evidence

The installed build was manually reviewed in a real terminal. No video is attached.

Platforms

• Linux
• Other platforms not tested

Notes

Initial mount, terminal resize, direct pane resizing, and broader multi-pane registration changes remain unanimated. A single pane visibility transition may occur on any edge.

This PR description was generated by Pi using GPT-5.6 Sol

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
hunk-web	Ignored	Preview	Aug 31, 2026 2:18am

[greptile-apps]

Greptile Summary

The PR adds a timeline-driven slide transition for the active files sidebar while keeping semantic pane planning immediate.

• Introduces interpolation helpers and focused geometry tests.
• Projects animated pane and review bounds through App rendering.
• Retains the files pane visually during its exit transition and snaps resize, terminal-size, and other non-toggle changes.

Confidence Score: 4/5

The divider-resize interaction should be fixed before merging because dragging during a sidebar transition can jump the divider and commit the wrong width.

Animated rendering and semantic resize state use different geometry when a drag starts mid-transition; the direct environment access is an additional non-blocking repository-convention violation.

Files Needing Attention: src/ui/hooks/useExtensionPaneController.ts, src/ui/hooks/useSidebarSlideAnimation.ts, src/ui/lib/sidebarSlide.ts, src/ui/App.tsx

Important Files Changed

Filename	Overview
src/ui/hooks/useSidebarSlideAnimation.ts	Adds timeline lifecycle and snapping behavior; its resize snap exposes inconsistent geometry captured by the existing resize controller.
src/ui/hooks/useExtensionPaneController.ts	Exposes the files-pane key, but resize initialization now combines semantic width with an animated divider origin.
src/ui/lib/sidebarSlide.ts	Adds bounded whole-cell interpolation and retained-pane projection; the duration helper directly accesses process.env.
src/ui/App.tsx	Moves pane, divider, and review rendering to animated geometry, making divider input possible before semantic and presented geometry converge.
src/ui/lib/sidebarSlide.test.ts	Covers interpolation endpoints and pane retention but does not exercise a resize initiated during animation.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  Toggle[Sidebar visibility toggle] --> Semantic[Immediate semantic pane plan]
  Semantic --> Timeline[180ms presentation timeline]
  Timeline --> Presented[Interpolated pane and review bounds]
  Presented --> Render[Render panes, dividers, and review host]
  Resize[Resize begins] --> Snap[Snap presentation to semantic plan]
  Snap --> Render

Loading

Comments Outside Diff (1)

1. src/ui/hooks/useExtensionPaneController.ts, line 538-545 (link)

   Resize captures mismatched geometry

   When a user starts dragging the files-pane divider during its transition, startSize comes from the final semantic layout while origin comes from the animated divider position. Entering resize mode then snaps the divider to the semantic layout without recalculating those values, causing the divider to jump and the drag to commit an incorrectly offset sidebar width.

   Knowledge Base Used: Terminal application UI

   Prompt To Fix With AI

   This is a comment left during a code review.
   Path: src/ui/hooks/useExtensionPaneController.ts
   Line: 538-545
   
   Comment:
   **Resize captures mismatched geometry**
   
   When a user starts dragging the files-pane divider during its transition, `startSize` comes from the final semantic layout while `origin` comes from the animated divider position. Entering resize mode then snaps the divider to the semantic layout without recalculating those values, causing the divider to jump and the drag to commit an incorrectly offset sidebar width.
   
   **Knowledge Base Used:** [Terminal application UI](https://app.greptile.com/modem/-/custom-context/knowledge-base/modem-dev/hunk/-/docs/terminal-application-ui.md)
   
   ---
   
   For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Prompt To Fix All With AI

### Issue 1
src/ui/hooks/useExtensionPaneController.ts:538-545
**Resize captures mismatched geometry**

When a user starts dragging the files-pane divider during its transition, `startSize` comes from the final semantic layout while `origin` comes from the animated divider position. Entering resize mode then snaps the divider to the semantic layout without recalculating those values, causing the divider to jump and the drag to commit an incorrectly offset sidebar width.

### Issue 2
src/ui/lib/sidebarSlide.ts:8-9
**Environment access bypasses Varlock**

`sidebarSlideAnimationDuration` reads `process.env.NODE_ENV` directly, bypassing the repository's type-safe, validated environment-variable abstraction and making this new environment-dependent behavior inconsistent with the established configuration path.

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

_{Reviews (1): Last reviewed commit: "feat(ui): animate sidebar transitions" | Re-trigger Greptile}

[greptile-apps]

Environment access bypasses Varlock

sidebarSlideAnimationDuration reads process.env.NODE_ENV directly, bypassing the repository's type-safe, validated environment-variable abstraction and making this new environment-dependent behavior inconsistent with the established configuration path.

Context Used: guidelines.mdc Cursor rule (source)

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/ui/lib/sidebarSlide.ts
Line: 8-9

Comment:
**Environment access bypasses Varlock**

`sidebarSlideAnimationDuration` reads `process.env.NODE_ENV` directly, bypassing the repository's type-safe, validated environment-variable abstraction and making this new environment-dependent behavior inconsistent with the established configuration path.

**Context Used:** guidelines.mdc Cursor rule ([source](https://github.com/modem-dev/modem/blob/main/.cursor/rules/guidelines.mdc))

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

[benvinegar]

Thanks for flagging this. I’m not changing it because this repository does not use Varlock or expose a validated NODE_ENV abstraction; direct process.env reads already exist in runtime and test code. This read only makes OpenTUI test renders settle synchronously and does not configure user-facing runtime behavior.

_{Responded by Pi using GPT-5.6 Sol.}

This comment was generated by Pi using GPT-5.6 Sol

[greptile-apps]

That’s fair, and thanks for the repository context. I verified there’s no Varlock usage and no validated NODE_ENV abstraction here, so the direct read is consistent with the existing codebase. Since it only makes test-renderer transitions synchronous and does not affect user-facing runtime configuration, I’m withdrawing this finding.