feat(ui): animate side-panel slide in/out instead of instant unmount

Panel toggle previously unmounted the aside in a single React commit,
so the center column snapped to its new width with no visual continuity
(per user feedback: "整个左右两侧被砍掉似的"). Add a 250ms width
transition driven by a new `useSlidingPanel` hook in App.tsx and a
matching `.is-collapsed` CSS state in global.css.

Behavior:
  - Hide: apply `is-collapsed` (panel width 320→0 animated), then
    unmount the aside after 250ms so Explorer / RightPanel stop firing
    IPC + event subs while invisible.
  - Show: mount the aside in the collapsed state, then drop the class
    on the next two rAFs so CSS animates 0→320. Double rAF is needed
    so the browser commits a paint at width 0 before the class flip;
    otherwise the transition has no "from" frame and snaps open.
  - Initial render skips the effect entirely so a launch-hidden panel
    stays unmounted and a launch-visible panel doesn't fake-collapse.

Center column's `flex: 1` smoothly reclaims/yields the freed space as
the panel width animates, so the OS window stays put and the visible
resize is the panel itself, not the whole app.

Also drops the stale "side panels chop the window edge" comment block
in global.css — the chop behavior was removed in f903be1; the comment
was just lying around.

Author: claude

src-ui/src/App.tsx

@@ -1,6 +1,6 @@
 // App.tsx — 3-panel IDE layout (frameless window)
 
-import { useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useAppState, useAppDispatch } from './store/app-state';
 import { retryInvoke } from './tauri';
 import { subscribeAgentStatus } from './lib/agent-status-bus';
@@ -14,10 +14,87 @@ import { RightPanel } from './components/right/Compiler';
 import { FileStatsProvider } from './lib/file-stats';
 import './styles/global.css';
 
+// CSS transition duration on .panel-left / .panel-right in global.css.
+// Bumping this here = bump the matching --panel-slide-ms variable too,
+// otherwise React unmounts mid-animation and the panel snaps.
+const PANEL_SLIDE_MS = 250;
+
+/**
+ * Drive the slide-open / slide-closed animation for a single side panel.
+ *
+ *   hidden=true  → if currently mounted, apply `is-collapsed` (CSS animates
+ *                  width 320→0) then unmount after PANEL_SLIDE_MS so the
+ *                  child stops firing IPC + event subs while invisible.
+ *   hidden=false → mount immediately at width 0 (`is-collapsed`), then
+ *                  drop the class on the next paint so CSS animates
+ *                  0→320. Two rAFs are needed: one to commit React's
+ *                  initial collapsed render, a second to let the browser
+ *                  paint at width 0 before the class flip — otherwise the
+ *                  transition has no "from" frame and the panel just snaps.
+ *
+ * Initial render skips the animation: a panel hidden from launch starts
+ * unmounted with no flicker; a visible-by-default panel renders at full
+ * width with no fake collapse-then-expand.
+ */
+function useSlidingPanel(hidden: boolean): { mounted: boolean; collapsed: boolean } {
+  const [mounted, setMounted] = useState(!hidden);
+  const [collapsed, setCollapsed] = useState(false);
+  const isFirstRun = useRef(true);
+  const timeoutRef = useRef<number | null>(null);
+  const rafRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (isFirstRun.current) {
+      isFirstRun.current = false;
+      return;
+    }
+    if (timeoutRef.current !== null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    if (hidden) {
+      setCollapsed(true);
+      timeoutRef.current = window.setTimeout(() => {
+        setMounted(false);
+        setCollapsed(false);
+        timeoutRef.current = null;
+      }, PANEL_SLIDE_MS);
+    } else {
+      setMounted(true);
+      setCollapsed(true);
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = requestAnimationFrame(() => {
+          setCollapsed(false);
+          rafRef.current = null;
+        });
+      });
+    }
+    return () => {
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [hidden]);
+
+  return { mounted, collapsed };
+}
+
 export function App() {
   const { state } = useAppState();
   const dispatch = useAppDispatch();
 
+  const leftPanel = useSlidingPanel(state.leftPanelHidden);
+  const rightPanel = useSlidingPanel(state.rightPanelHidden);
+
   // Subscribe to hook-driven agent status events from each AI CLI.
   // The Rust hook server emits these as they arrive from the per-tool
   // forwarder script (Python for Claude / Codex, JS for OpenCode).
@@ -140,18 +217,20 @@ export function App() {
       <TitleBar />
 
       {/* 3-panel workspace. Titlebar toggles flip leftPanelHidden /
-          rightPanelHidden; the hidden panel is conditionally UNMOUNTED
-          (Explorer / RightPanel stop firing IPC, scans, event subs,
-          reconciliation) and the center column's `flex: 1` reclaims
-          the freed space. The OS window itself doesn't resize — same
-          model as VS Code / Cursor / Warp — which keeps the toggle
-          flicker-free (a previous version moved the window edge via
-          Tauri setSize, but the IPC landed a few frames after the
-          React commit and made the center column visibly bounce). */}
+          rightPanelHidden. The OS window itself doesn't resize (same
+          model as VS Code / Cursor / Warp) — toggling just collapses
+          the panel's width to 0 over a 250ms CSS transition while the
+          center column's `flex: 1` smoothly reclaims the freed space.
+          Once the slide-out animation completes the panel fully
+          UNMOUNTS so Explorer / RightPanel stop firing IPC + event
+          subs while hidden; on show, we mount in the collapsed state
+          and let CSS animate it back open. */}
       <FileStatsProvider>
         <div className="app-layout">
-          {!state.leftPanelHidden && (
-            <aside className="panel panel-left">
+          {leftPanel.mounted && (
+            <aside
+              className={`panel panel-left${leftPanel.collapsed ? ' is-collapsed' : ''}`}
+            >
               <Explorer />
             </aside>
           )}
@@ -161,8 +240,10 @@ export function App() {
             <CenterPanel />
           </main>
 
-          {!state.rightPanelHidden && (
-            <aside className="panel panel-right">
+          {rightPanel.mounted && (
+            <aside
+              className={`panel panel-right${rightPanel.collapsed ? ' is-collapsed' : ''}`}
+            >
               <RightPanel />
             </aside>
           )}

src-ui/src/styles/global.css

@@ -696,14 +696,12 @@ body {
     color: #ffffff;
 }
 
-/* Hidden panels are unmounted in App.tsx (no DOM node, so no flex
-   slot to compensate for). The titlebar toggle ALSO calls Tauri
-   setSize/setPosition to shrink the OS window by the panel's width
-   on the same axis — so the right edge (for right-panel hide) or
-   left edge (for left-panel hide) of the window physically moves
-   inward, "chopping off" that side. Net effect: center column stays
-   the same pixel width, min/max/close ride the new edge inward,
-   no empty gutter, no xterm refit. See TitleBar.tsx. */
+/* Side panels (.panel-left / .panel-right) slide in/out via a CSS
+   width transition driven by the `.is-collapsed` class in App.tsx.
+   useSlidingPanel keeps the panel mounted during the 250ms collapse
+   animation, then unmounts it so Explorer / RightPanel stop firing
+   IPC + event subs while invisible. The Tauri OS window itself never
+   resizes on toggle — same model as VS Code / Cursor / Warp. */
 
 .app-layout {
     display: flex;
@@ -758,6 +756,14 @@ body {
     width: var(--w-left);
     min-width: var(--w-left);
     flex-shrink: 0;
+    /* `width` + `min-width` are both animated on toggle; transition
+       duration must match PANEL_SLIDE_MS in App.tsx — bump them
+       together so React doesn't unmount mid-animation. `overflow:
+       hidden` keeps Explorer's content from spilling visibly while
+       the panel slides shut. */
+    overflow: hidden;
+    transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1),
+                min-width 250ms cubic-bezier(0.4, 0, 0.2, 1);
     /* IDE-style framing: side panels share --bg-panel (slightly lighter
        in every theme), center workspace stays at --bg-app / --bg-terminal
        (slightly darker), so the terminal reads as the focal "recessed"
@@ -769,6 +775,10 @@ body {
     backdrop-filter: var(--glass-blur);
     -webkit-backdrop-filter: var(--glass-blur);
 }
+.panel-left.is-collapsed {
+    width: 0;
+    min-width: 0;
+}
 
 /* Explorer panel-content: overflow hidden so welcome state flex-center works */
 .explorer-content {
@@ -963,14 +973,21 @@ body.gambit-docked .chat-reader-container {
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
+    /* Slide-animation match for .panel-left — see comment there. */
+    overflow: hidden;
+    transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1),
+                min-width 250ms cubic-bezier(0.4, 0, 0.2, 1);
     /* Same --bg-panel as .panel-left (see comment there) — sandwich
        the darker terminal/launchpad center between two brighter rails. */
     background: var(--bg-panel);
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
     box-shadow: none;
     border-radius: 0;
-    overflow: visible;
+}
+.panel-right.is-collapsed {
+    width: 0;
+    min-width: 0;
 }
 
 .compiler-top {