Background

In weblab2, the info panel has separate Instructions and AI Tutor tabs. Both can show the level's instructions; the AI Tutor tab shows the instructions in a collapsible drawer above the chat. Because each tab rendered its own copy of the instructions and switching swapped the two panels, the transition was rough — instructions that were visible on both tabs would re-fade, the chat would grow in, and the instructions would replay their slide-in animation as if remounting.

This PR makes switching feel stable: nothing moves when it shouldn't, and the one case that benefits from motion — switching while the instructions drawer is open — animates smoothly.

What changed (user-visible)

• Switching with the instructions drawer closed (the default) is instant. The AI Tutor chat is already mounted and laid out, so switching reveals it with nothing growing or sliding; switching back shows the instructions exactly as they were, with no remount and no slide-in replay.
• Switching with the instructions drawer open animates. The instructions smoothly resize between full-height and drawer-height while the chat is revealed in place (the message input stays put).
• The Show/Hide Instructions toggle still animates in both directions.
• No layout flash on entering the AI Tutor tab.
• Respects prefers-reduced-motion.

Video

How it works

• The Instructions and AI Tutor tabs now share a single persistent AiTutorChatWithInstructionDrawer instance (driven by aiTutorActive = currentTab === Tabs.AiTutor) instead of each rendering its own instructions, so the instructions element never crossfades — it only resizes.
• The instructions drawer stays mounted even when hidden (height 0, padding 0, inert), so switching tabs never remounts it and replays the instructions' slidein keyframe.
• Animation is gated on drawer state: animateLayout = !isCollapsed || <within the close-settle window>. When the drawer is settled closed, an .instant class drops the height/opacity/top transitions so tab switches are instant.
• The hidden drawer/toggle are driven to height/top 0 synchronously (not via the effect-driven instructionsHeight, which lagged a frame and briefly flashed the full-height drawer).
• focus({preventScroll: true}) when focusing tab content, so auto-focusing the chat input no longer scrolls the panel up for a frame.
• The chat is laid out at a fixed, bottom-anchored height (chatContentHeight) and revealed by an animating clip window rather than reflowing.

Scope

Gated to the weblab2 instructions-drawer case (hasInstructionsDrawer && aiTutorVisible && longInstructions). Other tabs/labs are unaffected; they keep the existing opacity crossfade on .tabContent.

Notes

• Rebased/merged on latest staging, which defaults the AI Tutor drawer to collapsed and the initial weblab2 tab to Instructions; this PR's behavior is built on top of that. The merge reconciled staging's AiTutorChatWithInstructionDrawer refactor (removed isCollapsedByDefault, added initialWelcomeMessage) with this work.

Testing

• Verified frame-by-frame in a local browser on a weblab2 level with long instructions:
• Closed-drawer switch → AI Tutor: chat is full-size from the first frame (no grow); synchronous measurement right after the click shows the drawer already at height 0 (no stale full-height frame).
• Closed-drawer switch → Instructions: the instructions DOM node persists (no remount), slidein does not replay (margin/opacity stable), height is correct immediately (no slide).
• Open-drawer switch: drawer eases between drawer-height and full over ~200ms, chat revealed in place.
• Show/Hide Instructions still animates; collapsed-vs-open and the inert/tabbability of hidden content checked.
• yarn typecheck, eslint, stylelint, and the pre-commit hook pass.

🤖 Generated with Claude Code