fix(desktop): hug the right edge and ease the workbar column open and shut

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={

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

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

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);

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;

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;