From 8556eed36c808ea1fc4e6d58f05f64404e224606 Mon Sep 17 00:00:00 2001
From: AstroHan <lei.yuhan@outlook.com>
Date: Sun, 6 Sep 2026 13:44:45 +0800
Subject: [PATCH] fix(desktop): hug the right edge and ease the workbar column
 open and shut

The right workbar's collapse toggle sat 24px in from the plate's edge on
macOS, where the platform draws nothing on the right: the titlebar strip and
the workbar's own bar each spelled out `--space-6 + overlay-right-width`.
Fold that into one `--maka-titlebar-gutter-right` token with the bar's own
`--space-2` inset, so the toggle keeps the same x in both bands and only
Windows caption buttons push it inward.

The column also snapped between `display: none` and its width, unlike the
sidebar. On a wide window the frame and the overlay panel that share its
grid area now animate width and margin, with `visibility` gated by the same
duration. Their children hold the open width and hang off the right edge
(`justify-content: end` on the lone grid track; an auto margin would
resolve to 0 against negative free space), so the face and the toggle keep
their resting x and the box's left edge sweeps over them, the way the
sidebar reveals its own. Below 991px the column stacks under the
conversation at full width, so there collapsing still removes the row, as
it does for the bottom placement at every width. A modal obscuring the
shell sets `hidden` on the frame instead of collapsing it, so a dialog does
not play the ease. The panels stay mounted while hidden; a CDP trace of the
280ms ease costs ~95ms of main thread over 33 frames with no drops at
120Hz.

`min-width`/`max-width` on the column go: `workbar-layout.ts` already clamps
the value, and a floor would stop the collapse short of 0. Dead rules go
with them: the narrow block's `max-width: none`, the panel's `[hidden]`
override that `base.css` already covers with `!important`, and the
side-chat panel's flex column, which the panel's own grid track now
stretches.

The shell story that holds the toggle to one x carries the motion contract
too, since it is the one story that mounts both bands: it asserts the 8px
gutter, then samples frames around collapse and restore for a running
width transition, the panel tracking the frame, and the face and toggle
never moving. It writes the simulated caption width on the document root,
where the gutter token reads it, and passes `motionEnabled` so the shell
frame does not pin the fixture attribute that turns transitions off. A
narrow-viewport story pins the stacked layout.

Generated-by: Claude Code
---
 .../features/workbar/ui/workbar-surface.tsx   |  19 +--
 apps/desktop/src/renderer/maka-tokens.css     |   7 +
 .../src/renderer/styles/shell-layout.css      |  10 +-
 .../src/renderer/styles/workbar/artifacts.css |   1 -
 .../src/renderer/styles/workbar/shell.css     |  83 ++++++++---
 .../src/renderer/styles/workbar/side-chat.css |   9 +-
 apps/desktop/stories/app-shell.stories.tsx    | 132 +++++++++++++-----
 .../stories/session-workbar.stories.tsx       |  55 +++++++-
 8 files changed, 231 insertions(+), 85 deletions(-)

diff --git a/apps/desktop/src/renderer/features/workbar/ui/workbar-surface.tsx b/apps/desktop/src/renderer/features/workbar/ui/workbar-surface.tsx
index e0077ba8ba..4b35d3c2f6 100644
--- a/apps/desktop/src/renderer/features/workbar/ui/workbar-surface.tsx
+++ b/apps/desktop/src/renderer/features/workbar/ui/workbar-surface.tsx
@@ -102,6 +102,7 @@ function WorkbarPanelLoading(props: { label: string }) {
 function WorkbarPanel(props: {
   id?: string;
   active: boolean;
+  collapsed?: boolean;
   placement: SessionWorkbarPlacement;
   overlay?: boolean;
   className?: string;
@@ -115,6 +116,7 @@ function WorkbarPanel(props: {
       hidden={!props.active}
       data-placement={props.placement}
       data-overlay={props.overlay || undefined}
+      data-collapsed={props.collapsed || undefined}
       className={
         props.className
           ? `maka-session-workbar-panel ${props.className}`
@@ -422,9 +424,8 @@ export function WorkbarSurface(props: {
         const panel = props.panelsState[placement];
         const activeTab = panel.tabs.find((tab) => tab.id === panel.activeTabId);
         const showingLauncher = panel.launcherOpen || !activeTab;
-        const visible =
-          !props.hidden &&
-          (placement === 'right' ? !props.rightCollapsed : props.bottomOpen);
+        const collapsed =
+          placement === 'right' ? props.rightCollapsed : !props.bottomOpen;
         return (
           <Card
             key={placement}
@@ -433,7 +434,8 @@ export function WorkbarSurface(props: {
             height="100%"
             className="maka-session-workbar maka-session-workbar-frame"
             data-placement={placement}
-            data-collapsed={!visible || undefined}
+            data-collapsed={collapsed || undefined}
+            hidden={props.hidden}
             data-maka-contract={`session-workbar-${placement}`}
             role="complementary"
             aria-label={copy.ariaLabel}
@@ -465,7 +467,7 @@ export function WorkbarSurface(props: {
                 }
               />
             </div>
-            <WorkbarPanel active={visible && showingLauncher} placement={placement}>
+            <WorkbarPanel active={showingLauncher} placement={placement}>
               <WorkbarLauncher
                 onOpen={(kind) => props.onRequestOpenTab(placement, kind)}
                 sideChatAvailable={props.sourceSession !== undefined}
@@ -480,8 +482,8 @@ export function WorkbarSurface(props: {
         const showingLauncher = panel.launcherOpen || !activeTab;
         const panelVisible =
           placement === 'right' ? !props.rightCollapsed : props.bottomOpen;
-        const active =
-          panelVisible && !showingLauncher && activeTab?.id === tab.id;
+        const selected = !showingLauncher && activeTab?.id === tab.id;
+        const active = panelVisible && selected;
         let content: ReactNode = null;
         if (tab.kind === 'review') {
           content = (
@@ -567,7 +569,8 @@ export function WorkbarSurface(props: {
           <WorkbarPanel
             key={tab.id}
             id={`maka-workbar-panel-${tab.id}`}
-            active={active}
+            active={selected && !props.hidden}
+            collapsed={!panelVisible}
             placement={placement}
             overlay
             className={
diff --git a/apps/desktop/src/renderer/maka-tokens.css b/apps/desktop/src/renderer/maka-tokens.css
index 1ee3ad813d..db342b090c 100644
--- a/apps/desktop/src/renderer/maka-tokens.css
+++ b/apps/desktop/src/renderer/maka-tokens.css
@@ -881,6 +881,13 @@
      everything already standing between it and that edge. Two literals would be
      two chances to change one of them. */
   --maka-titlebar-gutter-left: max(var(--space-6), var(--maka-titlebar-area-x));
+  /* Shared by the titlebar strip and the workbar's bar, which hold one collapse
+     toggle to the same x. Deliberately not the left gutter's `--space-6`
+     floor: the left is a safe area under the traffic lights, the right is the
+     bar's own inset. */
+  --maka-titlebar-gutter-right: calc(
+    var(--space-2) + var(--maka-titlebar-overlay-right-width)
+  );
   --maka-titlebar-gap: var(--space-2);
   /* What the strip keeps for itself. This window has no OS title bar, so the
      strip IS the drag handle, and the session breadcrumb is a grid item that
diff --git a/apps/desktop/src/renderer/styles/shell-layout.css b/apps/desktop/src/renderer/styles/shell-layout.css
index ce6ea21dd8..6b733a8c2b 100644
--- a/apps/desktop/src/renderer/styles/shell-layout.css
+++ b/apps/desktop/src/renderer/styles/shell-layout.css
@@ -267,13 +267,11 @@
      --background right). Windows titleBarOverlay still samples --background
      for the OS caption strip on the content side. */
   background: transparent;
-  /* One gutter rule per side: our own `--space-6` of breathing room, or the
-     platform's native-control safe area when that is wider. Nothing here knows
-     which platform it is on or how wide any control is — `max()` picks whichever
-     the OS reports (macOS: traffic lights on the left; Windows: caption buttons
-     on the right; Linux: neither, so the design floor stands). */
+  /* One gutter rule per side, both resolved in maka-tokens.css from what the
+     OS reports (macOS: traffic lights on the left; Windows: caption buttons on
+     the right; Linux: neither, so the design floors stand). */
   padding-left: var(--maka-titlebar-gutter-left);
-  padding-right: calc(var(--space-6) + var(--maka-titlebar-overlay-right-width));
+  padding-right: var(--maka-titlebar-gutter-right);
   -webkit-app-region: drag;
 
   /* Three columns, not a flex row, because the middle one has to line up with
diff --git a/apps/desktop/src/renderer/styles/workbar/artifacts.css b/apps/desktop/src/renderer/styles/workbar/artifacts.css
index 3b87bcffc8..775d48436a 100644
--- a/apps/desktop/src/renderer/styles/workbar/artifacts.css
+++ b/apps/desktop/src/renderer/styles/workbar/artifacts.css
@@ -387,7 +387,6 @@
   .maka-session-workbar-panel[data-overlay][data-placement] {
     width: 100%;
     min-width: 0;
-    max-width: none;
     min-height: min(220px, 42dvh);
     max-height: min(42dvh, 360px);
     height: min(42dvh, 360px);
diff --git a/apps/desktop/src/renderer/styles/workbar/shell.css b/apps/desktop/src/renderer/styles/workbar/shell.css
index c19291701f..f3764da702 100644
--- a/apps/desktop/src/renderer/styles/workbar/shell.css
+++ b/apps/desktop/src/renderer/styles/workbar/shell.css
@@ -63,14 +63,57 @@
   box-sizing: border-box;
 }
 
-.maka-session-workbar[data-placement="right"] {
+/* The frame and the overlay panel share the grid area, so they carry the same
+   width and margin. No `min-width` here: it would stop the collapse short,
+   and `workbar-layout.ts` already clamps the value. */
+.maka-session-workbar[data-placement="right"],
+.maka-session-workbar-panel[data-overlay][data-placement="right"] {
   grid-area: right;
   width: var(--maka-session-workbar-width, 480px);
-  min-width: 320px;
-  max-width: 600px;
   margin-left: var(--agents-content-area-gap);
 }
 
+/* On a wide window the right column eases open and shut the way the sidebar
+   does. The children keep the open width and hang off the box's right edge,
+   so the face and the toggle stay where they will rest and the box's left
+   edge sweeps over them; left-anchored they would ride in from the toggle.
+   The lone grid track grows to the children's width, so it is the track that
+   sits at the end: `end` alignment overflows at the start edge. An auto
+   margin would resolve to 0 instead. */
+@media (min-width: 991px) {
+  .maka-session-workbar[data-placement="right"],
+  .maka-session-workbar-panel[data-overlay][data-placement="right"] {
+    justify-content: end;
+    transition:
+      width var(--duration-large) var(--ease-out-strong),
+      margin-left var(--duration-large) var(--ease-out-strong);
+  }
+
+  .maka-session-workbar[data-placement="right"] > *,
+  .maka-session-workbar-panel[data-overlay][data-placement="right"] > * {
+    width: var(--maka-session-workbar-width, 480px);
+  }
+
+  .maka-session-workbar[data-placement="right"][data-collapsed],
+  .maka-session-workbar-panel[data-overlay][data-placement="right"][data-collapsed] {
+    display: grid;
+    width: 0;
+    margin-left: 0;
+    visibility: hidden;
+    transition:
+      width var(--duration-large) var(--ease-out-strong),
+      margin-left var(--duration-large) var(--ease-out-strong),
+      visibility 0s var(--duration-large);
+  }
+
+  /* A pointer drag feeds the width back on every move; an ease would trail it. */
+  .maka-detail-with-artifacts:has([data-resizing]) .maka-session-workbar[data-placement="right"],
+  .maka-detail-with-artifacts:has([data-resizing])
+    .maka-session-workbar-panel[data-overlay][data-placement="right"] {
+    transition: none;
+  }
+}
+
 .maka-session-workbar[data-placement="bottom"] {
   grid-area: bottom;
   width: 100%;
@@ -81,10 +124,6 @@
   grid-template-rows: auto minmax(0, 1fr);
 }
 
-.maka-session-workbar[data-collapsed] {
-  display: none;
-}
-
 .maka-workbar-resize-handle-right {
   grid-area: right-handle;
 }
@@ -103,11 +142,9 @@
 }
 
 .maka-session-workbar-panel[data-overlay][data-placement="right"] {
-  grid-area: right;
-  width: var(--maka-session-workbar-width, 480px);
-  min-width: 320px;
-  max-width: 600px;
-  margin-left: var(--agents-content-area-gap);
+  /* One stretched track, like the frame: the face fills the height and the
+     column can be aligned as a whole. */
+  display: grid;
   padding-top: var(--maka-plate-titlebar-clearance);
 }
 
@@ -121,6 +158,13 @@
   padding-top: var(--size-element-sm);
 }
 
+/* After the placement rules, which set `display` at the same specificity, and
+   one attribute lighter than the wide-window rule above, which restores it. */
+.maka-session-workbar[data-collapsed],
+.maka-session-workbar-panel[data-overlay][data-collapsed] {
+  display: none;
+}
+
 .maka-session-workbar-toolbar {
   position: relative;
   z-index: 2;
@@ -168,14 +212,10 @@
   --maka-workbar-rail-gap: calc(
     (var(--maka-plate-titlebar-clearance) - var(--size-element-sm)) / 2
   );
-  /* The right pad is the window titlebar strip's own gutter, not this bar's:
-     the collapse toggle is one control that moves between the two bands, and
-     `app-shell.stories.tsx` holds it to the same x in both. Narrowing this to
-     the bar's own gutter would slide it 16px on every collapse. On top of it,
-     the caption buttons where the platform draws them on the right (Windows);
-     macOS puts them on the left, over the sidebar, and reports 0 here. */
-  padding-inline: var(--space-2)
-    calc(var(--space-6) + var(--maka-titlebar-overlay-right-width));
+  /* The right pad is the window titlebar strip's gutter: the collapse toggle
+     is one control that moves between the two bands, and
+     `app-shell.stories.tsx` holds it to the same x in both. */
+  padding-inline: var(--space-2) var(--maka-titlebar-gutter-right);
   -webkit-app-region: drag;
 }
 
@@ -230,9 +270,6 @@
   overflow: hidden;
 }
 
-/* Section sets its own `display`, so the attribute needs the override. */
-.maka-session-workbar-panel[hidden] { display: none; }
-
 .maka-workbar-panel-loading {
   display: grid;
   place-items: center;
diff --git a/apps/desktop/src/renderer/styles/workbar/side-chat.css b/apps/desktop/src/renderer/styles/workbar/side-chat.css
index e8c4f61894..ec52fc52c7 100644
--- a/apps/desktop/src/renderer/styles/workbar/side-chat.css
+++ b/apps/desktop/src/renderer/styles/workbar/side-chat.css
@@ -18,12 +18,11 @@
  */
 
 /* The quote lives as a transient tab inside the session workbar (not a second
-   right column, which was too crowded). The tab panel is a flex column so the
-   companion's ChatView transcript fills the height and the Composer pins to the
-   bottom — the same vertical rhythm as the main conversation. */
+   right column, which was too crowded). The panel's single grid track
+   (workbar/shell.css) stretches the companion to the full height, so its
+   ChatView transcript fills it and the Composer pins to the bottom — the same
+   vertical rhythm as the main conversation. */
 .maka-quote-workbar-panel {
-  display: flex;
-  flex-direction: column;
   min-height: 0;
   padding: 0;
   overflow: hidden;
diff --git a/apps/desktop/stories/app-shell.stories.tsx b/apps/desktop/stories/app-shell.stories.tsx
index 1db945f840..4cd3bb4cb4 100644
--- a/apps/desktop/stories/app-shell.stories.tsx
+++ b/apps/desktop/stories/app-shell.stories.tsx
@@ -2995,6 +2995,7 @@ function WorkbarInShell() {
     <ToastProvider>
       <WorkbarServicesProvider services={createFakeWorkbarServices()}>
         <ComposedShell
+          motionEnabled
           workbarCollapsed={rightCollapsed}
           onToggleWorkbar={() => collapseRight(!rightCollapsed)}
           detailChildren={
@@ -3047,9 +3048,12 @@ function WorkbarInShell() {
 // The collapse toggle is one control that moves between two bands — the
 // workbar's own bar and the titlebar's right cluster — and `workbar/shell.css`
 // pads the bar with the titlebar strip's gutter precisely so it lands on the
-// same x in both. Only a story that mounts both bands can hold it there, which
-// is why this lives beside the shell rather than with the workbar's own
-// stories.
+// same x in both, one `--space-2` in from the plate's edge on a platform that
+// draws nothing there. Only a story that mounts both bands can hold it there,
+// which is why this lives beside the shell rather than with the workbar's own
+// stories. The column eases shut and open the way the sidebar does, and the
+// face and the toggle keep their x through every frame of it: the box's left
+// edge sweeps over content that is already where it will rest.
 export const WorkbarCollapseKeepsOneToggleInPlace: Story = {
   render: () => <WorkbarInShell />,
   play: async ({ canvasElement }) => {
@@ -3071,6 +3075,49 @@ export const WorkbarCollapseKeepsOneToggleInPlace: Story = {
     const pickerIsShowing = () =>
       canvas.queryByRole('list', { name: '打开工具' }) !== null;
     const face = await bar.findByRole('tab', { selected: true });
+    expect(
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+      'a reduced-motion browser collapses in one frame and this story stops testing the ease',
+    ).toBe(false);
+    // Frames around a click. The runner may be too slow to land the 280ms ease
+    // inside the window, so the resting state is awaited separately.
+    const faceContent = facePanel.firstElementChild!;
+    const sample = () =>
+      new Promise<{
+        frame: number[];
+        panel: number[];
+        faceRight: number[];
+        toggleX: number[];
+        eased: boolean;
+      }>((resolve) => {
+        const out = {
+          frame: [] as number[],
+          panel: [] as number[],
+          faceRight: [] as number[],
+          toggleX: [] as number[],
+          eased: false,
+        };
+        const start = performance.now();
+        const tick = () => {
+          const frameBox = frame.getBoundingClientRect();
+          out.frame.push(Math.round(frameBox.width));
+          out.panel.push(Math.round(facePanel.getBoundingClientRect().width));
+          out.faceRight.push(Math.round(faceContent.getBoundingClientRect().right - frameBox.right));
+          out.toggleX.push(Math.round(collapse.getBoundingClientRect().x));
+          out.eased ||= frame
+            .getAnimations()
+            .some((animation) => (animation as CSSTransition).transitionProperty === 'width');
+          if (performance.now() - start < 500) requestAnimationFrame(tick);
+          else resolve(out);
+        };
+        requestAnimationFrame(tick);
+      });
+    const eased = (sampled: Awaited<ReturnType<typeof sample>>, toggleX: number) => {
+      expect(sampled.eased).toBe(true);
+      expect(sampled.panel).toEqual(sampled.frame);
+      expect(new Set(sampled.faceRight)).toEqual(new Set([0]));
+      expect(new Set(sampled.toggleX)).toEqual(new Set([Math.round(toggleX)]));
+    };
 
     expect(canvas.queryByRole('toolbar', { name: '工作区辅助操作' })).toBeNull();
     expect(pickerIsShowing()).toBe(false);
@@ -3082,46 +3129,57 @@ export const WorkbarCollapseKeepsOneToggleInPlace: Story = {
         faceBox.y + faceBox.height / 2 - (openToggleBox.y + openToggleBox.height / 2),
       ),
     ).toBeLessThanOrEqual(1);
+    expect(frame.getBoundingClientRect().right - openToggleBox.right).toBe(8);
 
     // Windows draws its caption buttons over the right of the strip and reports
     // their width here; macOS reports 0. The bar has to give that width back.
+    // The root is where `maka-tokens.css` reads it into the gutter, so the
+    // override goes there, the way `env()` would report it.
     const captionWidth = 80;
-    canvasElement.style.setProperty(
+    document.documentElement.style.setProperty(
       '--maka-titlebar-overlay-right-width',
       `${captionWidth}px`,
     );
-    await waitFor(() => {
-      expect(collapse.getBoundingClientRect().x).toBeCloseTo(
-        openToggleBox.x - captionWidth,
-        0,
-      );
-    });
-    const parked = collapse.getBoundingClientRect();
-
-    // [+] is a menu over the panel, not a swap to the launcher: the face you
-    // are reading stays on screen while you pick another one.
-    await userEvent.click(bar.getByRole('button', { name: '打开或关闭工作栏的面' }));
-    const menu = await within(document.body).findByRole('menu');
-    await userEvent.keyboard('{Escape}');
-    await waitFor(() => expect(menu).not.toBeVisible());
-    expect(pickerIsShowing()).toBe(false);
-
-    await userEvent.click(collapse);
-    const restore = await canvas.findByRole('button', { name: '展开任务工作栏' });
-    await waitFor(() => expect(frame).not.toBeVisible());
-    expect(facePanel).not.toBeVisible();
-    const restoreBox = restore.getBoundingClientRect();
-    expect(Math.abs(restoreBox.x - parked.x)).toBeLessThanOrEqual(1);
-    expect(Math.abs(restoreBox.y - parked.y)).toBeLessThanOrEqual(1);
-
-    await userEvent.click(restore);
-    await waitFor(() => expect(frame).toBeVisible());
-    expect(facePanel).toBeVisible();
-    expect(pickerIsShowing()).toBe(false);
-    const restoredToggleBox = bar
-      .getByRole('button', { name: '收起任务工作栏' })
-      .getBoundingClientRect();
-    expect(Math.abs(restoredToggleBox.x - parked.x)).toBeLessThanOrEqual(1);
-    expect(Math.abs(restoredToggleBox.y - parked.y)).toBeLessThanOrEqual(1);
+    try {
+      await waitFor(() => {
+        expect(collapse.getBoundingClientRect().x).toBeCloseTo(
+          openToggleBox.x - captionWidth,
+          0,
+        );
+      });
+      const parked = collapse.getBoundingClientRect();
+
+      // [+] is a menu over the panel, not a swap to the launcher: the face you
+      // are reading stays on screen while you pick another one.
+      await userEvent.click(bar.getByRole('button', { name: '打开或关闭工作栏的面' }));
+      const menu = await within(document.body).findByRole('menu');
+      await userEvent.keyboard('{Escape}');
+      await waitFor(() => expect(menu).not.toBeVisible());
+      expect(pickerIsShowing()).toBe(false);
+
+      let sampling = sample();
+      await userEvent.click(collapse);
+      const restore = await canvas.findByRole('button', { name: '展开任务工作栏' });
+      eased(await sampling, parked.x);
+      await waitFor(() => expect(frame).not.toBeVisible());
+      expect(facePanel).not.toBeVisible();
+      const restoreBox = restore.getBoundingClientRect();
+      expect(Math.abs(restoreBox.x - parked.x)).toBeLessThanOrEqual(1);
+      expect(Math.abs(restoreBox.y - parked.y)).toBeLessThanOrEqual(1);
+
+      sampling = sample();
+      await userEvent.click(restore);
+      eased(await sampling, parked.x);
+      await waitFor(() => expect(frame).toBeVisible());
+      expect(facePanel).toBeVisible();
+      expect(pickerIsShowing()).toBe(false);
+      const restoredToggleBox = bar
+        .getByRole('button', { name: '收起任务工作栏' })
+        .getBoundingClientRect();
+      expect(Math.abs(restoredToggleBox.x - parked.x)).toBeLessThanOrEqual(1);
+      expect(Math.abs(restoredToggleBox.y - parked.y)).toBeLessThanOrEqual(1);
+    } finally {
+      document.documentElement.style.removeProperty('--maka-titlebar-overlay-right-width');
+    }
   },
 };
diff --git a/apps/desktop/stories/session-workbar.stories.tsx b/apps/desktop/stories/session-workbar.stories.tsx
index 4c25fc3043..6c0889d8db 100644
--- a/apps/desktop/stories/session-workbar.stories.tsx
+++ b/apps/desktop/stories/session-workbar.stories.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import type { CSSProperties } from 'react';
+import { useState, type CSSProperties } from 'react';
 import type { Decorator, Meta, StoryObj } from '@storybook/react-vite';
 import { expect, userEvent, waitFor, within } from 'storybook/test';
 import type { ArtifactRecord } from '@maka/core/artifacts';
@@ -27,7 +27,7 @@ import type { SessionSummary } from '@maka/core/session';
 import type { SessionTrace } from '@maka/core/session-trace';
 import type { ContextDiagnosticsResult } from '@maka/runtime-host/protocol';
 import { ToastProvider } from '@maka/ui';
-import { WorkbarServicesProvider } from '../src/renderer/features/workbar';
+import { WorkbarServicesProvider, WorkbarTitlebarActions } from '../src/renderer/features/workbar';
 import { WorkbarSurface } from '../src/renderer/features/workbar/stories';
 import {
   createFakeWorkbarServices,
@@ -927,7 +927,13 @@ function Workbar(props: {
   sourceSession?: SessionSummary;
   /** Overrides the restored column width, the way the resize handle does. */
   width?: number;
+  /**
+   * Lets the column's own collapse toggle and the titlebar's restore
+   * affordance drive `rightCollapsed`, the way the app's reducer does.
+   */
+  collapsible?: boolean;
 }) {
+  const [collapsed, setCollapsed] = useState(false);
   const emptyTabsState = createSessionWorkbarTabsState();
   let tab: SessionWorkbarTab | undefined;
   let quotes: QuoteCompanionPanelState[] | undefined;
@@ -985,13 +991,21 @@ function Workbar(props: {
           ...(props.width ? { '--maka-session-workbar-width': `${props.width}px` } : {}),
         } as CSSProperties}
       >
-        <div className="mainColumn" />
+        <div className="mainColumn">
+          {props.collapsible && (
+            <WorkbarTitlebarActions
+              available
+              collapsed={collapsed}
+              onToggle={() => setCollapsed(false)}
+            />
+          )}
+        </div>
         <WorkbarSurface
           sessionId={SESSION_ID}
           hidden={false}
-          onDismissPanel={noop}
+          onDismissPanel={props.collapsible ? () => setCollapsed(true) : noop}
           panelsState={createSessionWorkbarPanelsState(tabsState)}
-          rightCollapsed={false}
+          rightCollapsed={collapsed}
           bottomOpen={false}
           onActivateTab={noop}
           onCloseTab={noop}
@@ -1076,6 +1090,37 @@ export const SeveralFacesAtColumnFloor: Story = {
   ),
 };
 
+// Below 991px the column stacks under the conversation at full width. The
+// wide-window ease (app-shell.stories.tsx holds that contract) must not reach
+// it: the face spans the row, and collapsing removes the row instead of
+// leaving an empty band. The smoke lane sizes stories named `narrow` to 720px.
+export const CollapseNarrowStack: Story = {
+  parameters: { viewport: { options: STACKED_WINDOW_VIEWPORT } },
+  globals: { viewport: { value: 'makaStackedWindow', isRotated: false } },
+  decorators: [bridge()],
+  render: () => <Workbar tab="review" collapsible />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const frame = canvasElement.querySelector<HTMLElement>(
+      '.maka-session-workbar[data-placement="right"]',
+    )!;
+    const panel = canvasElement.querySelector<HTMLElement>(
+      '.maka-session-workbar-panel[data-overlay][data-placement="right"]',
+    )!;
+    const toolbar = frame.querySelector<HTMLElement>('.maka-session-workbar-toolbar')!;
+    await canvas.findByRole('region', { name: 'Git 变更' });
+    expect(window.innerWidth).toBeLessThanOrEqual(990);
+    expect(toolbar.getBoundingClientRect().width).toBe(frame.getBoundingClientRect().width);
+    expect(panel.firstElementChild!.getBoundingClientRect().width).toBe(
+      panel.getBoundingClientRect().width,
+    );
+
+    await userEvent.click(canvas.getByRole('button', { name: '收起任务工作栏' }));
+    await waitFor(() => expect(getComputedStyle(frame).display).toBe('none'));
+    expect(getComputedStyle(panel).display).toBe('none');
+  },
+};
+
 // Real path: 任务工作栏 → 变更 on a session whose branch matches its base. The
 // panel's own empty state (icon + help), not a spinner and not an error.
 export const ChangesEmpty: Story = {