fix(desktop): keep side tools as one docked rail

Author: Pyiner

AGENTS.md

@@ -81,6 +81,8 @@ Detailed data and runtime contracts: @docs/agents/repository-contracts.md and
 - Desktop app-shell chrome must keep its complete geometry and state recipe in
   an always-loaded owner stylesheet. Never place global shell component rules
   in a removable feature stylesheet; pin the owner import with a contract test.
+- Desktop thread side tools have one presentation: a right-docked rail. The
+  header control toggles that rail directly; do not add an overlay variant.
 - Mobile route state, presentation mapping, formatting, and business-rule
   transformations should live in `GaryxMobileCore` with SwiftPM tests.
 - Message, transcript, and tool-row display is server-render-state first:

CLAUDE.md

@@ -81,6 +81,8 @@ Detailed data and runtime contracts: @docs/agents/repository-contracts.md and
 - Desktop app-shell chrome must keep its complete geometry and state recipe in
   an always-loaded owner stylesheet. Never place global shell component rules
   in a removable feature stylesheet; pin the owner import with a contract test.
+- Desktop thread side tools have one presentation: a right-docked rail. The
+  header control toggles that rail directly; do not add an overlay variant.
 - Mobile route state, presentation mapping, formatting, and business-rule
   transformations should live in `GaryxMobileCore` with SwiftPM tests.
 - Message, transcript, and tool-row display is server-render-state first:

desktop/garyx-desktop/src/renderer/src/app-shell/AppShell.tsx

@@ -1180,7 +1180,6 @@ export function AppShell() {
     sidebarCollapsed,
     sidebarResizing,
     sidebarWidth,
-    sideToolsDocked,
     sideToolsPanelWidth,
     sideToolsPanelWidthCustomizedRef,
     sideToolsPanelWidthRef,
@@ -3821,9 +3820,6 @@ export function AppShell() {
     isSkillsView ? "skills-view" : null,
     isTasksView ? "tasks-view" : null,
     showConversationSideTools ? "with-side-tools" : null,
-    showConversationSideTools
-      ? sideToolsDocked ? "side-tools-docked" : "side-tools-overlay"
-      : null,
     sideToolsResizing ? "side-tools-resizing" : null,
   ]
     .filter(Boolean)

desktop/garyx-desktop/src/renderer/src/app-shell/diagnostics-helpers.test.mjs

@@ -3,6 +3,7 @@ import assert from 'node:assert/strict';
 
 import {
   buildThreadLogLines,
+  clampSideToolsPanelWidth,
   defaultSideToolsPanelWidth,
 } from './diagnostics-helpers.ts';
 
@@ -18,11 +19,13 @@ test('still parses legacy RFC3339 thread-log stamps without a timezone suffix',
   assert.equal(line.text, 'WARN [run] legacy');
 });
 
-test('defaults side tools to a bounded rail instead of consuming most of the window', () => {
-  assert.equal(defaultSideToolsPanelWidth(1800), 720);
+test('defaults side tools to the single measured Codex-style right rail', () => {
+  assert.equal(defaultSideToolsPanelWidth(1800), 320);
+  assert.equal(defaultSideToolsPanelWidth(1235), 320);
+  assert.equal(defaultSideToolsPanelWidth(900), 320);
 });
 
-test('clamps side tools width to keep the main message column usable', () => {
-  assert.equal(defaultSideToolsPanelWidth(1235), 520);
-  assert.equal(defaultSideToolsPanelWidth(900), 520);
+test('clamps a customized side-tools rail to the measured canvas', () => {
+  assert.equal(clampSideToolsPanelWidth(520, 736), 320);
+  assert.equal(clampSideToolsPanelWidth(685, 1235), 685);
 });

desktop/garyx-desktop/src/renderer/src/app-shell/diagnostics-helpers.ts

@@ -13,11 +13,9 @@ export const MAX_GATEWAY_THREAD_LOG_LINES = 100;
 export const THREAD_LOG_PANEL_MIN_WIDTH = 280;
 export const THREAD_LOG_PANEL_MAX_WIDTH = 760;
 const DEFAULT_THREAD_LOG_PANEL_WIDTH = 360;
-export const SIDE_TOOLS_PANEL_MIN_WIDTH = 520;
+export const SIDE_TOOLS_PANEL_MIN_WIDTH = 320;
 export const SIDE_TOOLS_PANEL_MAX_WIDTH = 1180;
-export const SIDE_TOOLS_PANEL_DEFAULT_RATIO = 0.42;
-const SIDE_TOOLS_PANEL_DEFAULT_MAX_WIDTH = 720;
-const DEFAULT_SIDE_TOOLS_PANEL_WIDTH = 520;
+const DEFAULT_SIDE_TOOLS_PANEL_WIDTH = 320;
 const GATEWAY_OFFLINE_THRESHOLD = 3;
 
 export function keepRecentThreadLogLines(
@@ -112,16 +110,7 @@ export function clampSideToolsPanelWidth(
 }
 
 export function defaultSideToolsPanelWidth(layoutWidth?: number | null): number {
-  const baseWidth = layoutWidth && layoutWidth > 0
-    ? Math.min(
-        SIDE_TOOLS_PANEL_DEFAULT_MAX_WIDTH,
-        Math.max(
-          DEFAULT_SIDE_TOOLS_PANEL_WIDTH,
-          layoutWidth * SIDE_TOOLS_PANEL_DEFAULT_RATIO,
-        ),
-      )
-    : DEFAULT_SIDE_TOOLS_PANEL_WIDTH;
-  return clampSideToolsPanelWidth(baseWidth, layoutWidth);
+  return clampSideToolsPanelWidth(DEFAULT_SIDE_TOOLS_PANEL_WIDTH, layoutWidth);
 }
 
 export function computeGatewayIndicator(input: {

desktop/garyx-desktop/src/renderer/src/app-shell/responsive-layout-model.test.mjs

@@ -80,25 +80,25 @@ test("task tree docks only after the full 736px reading column still fits", () =
   assert.equal(isDockedTaskTree(TASK_TREE_DOCK_MIN_WIDTH), true);
 });
 
-test("right panels overlay before they can crush the primary thread", () => {
+test("thread logs overlay before they can crush the primary thread", () => {
   assert.equal(
     isDockedSidePanel({
-      canvasWidth: 1069,
-      panelWidth: 520,
+      canvasWidth: 829,
+      panelWidth: 280,
     }),
     false,
   );
   assert.equal(
     isDockedSidePanel({
-      canvasWidth: 1070,
-      panelWidth: 520,
+      canvasWidth: 830,
+      panelWidth: 280,
     }),
     true,
   );
   assert.equal(
     isDockedSidePanel({
       canvasWidth: 736,
-      panelWidth: 520,
+      panelWidth: 280,
     }),
     false,
   );

desktop/garyx-desktop/src/renderer/src/app-shell/useLayoutResizeController.ts

@@ -136,7 +136,6 @@ export function useLayoutResizeController({
   }, [secondaryRailOpen]);
   const threadLayoutRef = useRef<HTMLDivElement | null>(null);
   const conversationRef = useRef<HTMLElement | null>(null);
-  const [conversationWidth, setConversationWidth] = useState(0);
   const [threadLayoutWidth, setThreadLayoutWidth] = useState(0);
   const threadLogsPanelWidthRef = useRef(
     DEFAULT_DESKTOP_SETTINGS.threadLogsPanelWidth,
@@ -154,14 +153,9 @@ export function useLayoutResizeController({
 
   const desktopStateReady = desktopState !== null;
   useLayoutEffect(() => {
-    const conversation = conversationRef.current;
     const threadLayout = threadLayoutRef.current;
     const syncMeasuredWidths = () => {
-      const nextConversationWidth = conversation?.clientWidth || 0;
       const nextThreadLayoutWidth = threadLayout?.clientWidth || 0;
-      setConversationWidth((current) =>
-        current === nextConversationWidth ? current : nextConversationWidth,
-      );
       setThreadLayoutWidth((current) =>
         current === nextThreadLayoutWidth ? current : nextThreadLayoutWidth,
       );
@@ -176,9 +170,6 @@ export function useLayoutResizeController({
     }
 
     const observer = new ResizeObserver(syncMeasuredWidths);
-    if (conversation) {
-      observer.observe(conversation);
-    }
     if (threadLayout) {
       observer.observe(threadLayout);
     }
@@ -352,7 +343,6 @@ export function useLayoutResizeController({
       const measuredThreadLayoutWidth = currentThreadLayoutWidth() || 0;
       const measuredConversationWidth = currentConversationWidth() || 0;
       setThreadLayoutWidth(measuredThreadLayoutWidth);
-      setConversationWidth(measuredConversationWidth);
       const nextWidth = clampThreadLogsPanelWidth(
         threadLogsPanelWidthRef.current,
         measuredThreadLayoutWidth,
@@ -539,10 +529,6 @@ export function useLayoutResizeController({
     };
   }, [sideToolsResizing]);
 
-  const sideToolsDocked = isDockedSidePanel({
-    canvasWidth: conversationWidth,
-    panelWidth: sideToolsPanelWidth,
-  });
   const threadLogsDocked = isDockedSidePanel({
     canvasWidth: threadLayoutWidth,
     panelWidth: threadLogsPanelWidth,
@@ -562,7 +548,6 @@ export function useLayoutResizeController({
     sidebarCollapsed,
     sidebarResizing,
     sidebarWidth,
-    sideToolsDocked,
     sideToolsPanelWidth,
     sideToolsPanelWidthCustomizedRef,
     sideToolsPanelWidthRef,

desktop/garyx-desktop/src/renderer/src/responsive-layout-design.test.mjs

@@ -60,20 +60,30 @@ test("task tree only reserves a rail when the full reading column fits", () => {
   assert.ok(css.includes("max-height: calc(100% - 24px)"));
 });
 
-test("right panels use measured dock or overlay state instead of a viewport guess", () => {
+test("side tools use one right-docked presentation at every width", () => {
   const appShellSource = read("app-shell/AppShell.tsx");
-  const threadPageSource = read("app-shell/components/ThreadPage.tsx");
   const controllerSource = read("app-shell/useLayoutResizeController.ts");
   const workspaceRailsCss = read("styles/workspace-rails.css");
+  const browserCss = read("styles/browser.css");
+
+  assert.ok(!appShellSource.includes("sideToolsDocked"));
+  assert.ok(!controllerSource.includes("sideToolsDocked"));
+  assert.ok(workspaceRailsCss.includes(".conversation.with-side-tools {"));
+  assert.ok(workspaceRailsCss.includes("minmax(320px, var(--side-tools-panel-width, 320px))"));
+  assert.ok(!workspaceRailsCss.includes("side-tools-docked"));
+  assert.ok(!workspaceRailsCss.includes("side-tools-overlay"));
+  assert.ok(!browserCss.includes(".conversation.with-side-tools {"));
+  assert.ok(!browserCss.includes(".thread-side-tools-panel {"));
+});
+
+test("thread logs use measured dock or overlay state instead of a viewport guess", () => {
+  const threadPageSource = read("app-shell/components/ThreadPage.tsx");
+  const controllerSource = read("app-shell/useLayoutResizeController.ts");
   const conversationCss = read("styles/conversation.css");
   const browserCss = read("styles/browser.css");
 
-  assert.ok(appShellSource.includes('sideToolsDocked ? "side-tools-docked" : "side-tools-overlay"'));
   assert.ok(threadPageSource.includes('threadLogsDocked ? "log-panel-docked" : "log-panel-overlay"'));
   assert.ok(controllerSource.includes("new ResizeObserver(syncMeasuredWidths)"));
-  assert.ok(workspaceRailsCss.includes(".conversation.with-side-tools.side-tools-overlay"));
   assert.ok(conversationCss.includes(".thread-layout.with-log-panel.log-panel-overlay"));
-  assert.ok(!browserCss.includes(".conversation.with-side-tools {"));
-  assert.ok(!browserCss.includes(".thread-side-tools-panel {"));
   assert.ok(!browserCss.includes(".thread-layout.with-log-panel {"));
 });

desktop/garyx-desktop/src/renderer/src/styles/workspace-rails.css

@@ -1219,18 +1219,11 @@
 .conversation.with-side-tools {
   --side-tools-resizer-width: 10px;
   position: relative;
-  grid-template-rows: auto minmax(0, 1fr);
-}
-
-.conversation.with-side-tools.side-tools-docked {
   grid-template-columns:
     minmax(0, 1fr)
     var(--side-tools-resizer-width)
-    minmax(520px, var(--side-tools-panel-width, 520px));
-}
-
-.conversation.with-side-tools.side-tools-overlay {
-  grid-template-columns: minmax(0, 1fr);
+    minmax(320px, var(--side-tools-panel-width, 320px));
+  grid-template-rows: auto minmax(0, 1fr);
 }
 
 .conversation.with-side-tools .conversation-header {
@@ -1243,35 +1236,16 @@
   grid-row: 2;
 }
 
-.conversation.with-side-tools.side-tools-docked .side-tools-resizer {
+.conversation.with-side-tools .side-tools-resizer {
   grid-column: 2;
   grid-row: 1 / span 2;
 }
 
-.conversation.with-side-tools.side-tools-docked .thread-side-tools-panel {
+.conversation.with-side-tools .thread-side-tools-panel {
   grid-column: 3;
   grid-row: 1 / span 2;
 }
 
-.conversation.with-side-tools.side-tools-overlay .side-tools-resizer {
-  display: none;
-}
-
-.conversation.with-side-tools.side-tools-overlay .thread-side-tools-panel {
-  position: absolute;
-  top: calc(var(--inset-toolbar) + 12px);
-  right: 12px;
-  bottom: 12px;
-  z-index: 45;
-  width: min(var(--side-tools-panel-width, 520px), calc(100% - 24px));
-  height: auto;
-  max-height: none;
-  border: 0.5px solid var(--color-token-border);
-  border-radius: 16px;
-  background: var(--color-token-bg-primary);
-  box-shadow: var(--shadow-lg);
-}
-
 .conversation.side-tools-resizing {
   cursor: col-resize;
 }

docs/agents/desktop-ui.md

@@ -70,15 +70,17 @@
   least 1088px wide, leaving the full reading column intact. Below that width,
   expose the tree through the 28px conversation-header control and show it as
   a dismissible overlay with Escape, outside-click, and focus-return behavior.
-- Right-side tools and logs choose docked versus overlay presentation from the
-  measured conversation canvas, the actual panel width, a 10px resizer, and a
-  540px minimum primary thread. Do not use a viewport-only media query: open
-  rails and user-resized sidebars change the available canvas. A constrained
-  panel floats below the toolbar with 12px edge insets; it never stacks under
-  the transcript or compresses the composer below the minimum primary width.
-- Floating task trees and right panels use the available height between their
-  top and bottom insets. Do not cap them to a percentage of viewport height on
-  tall windows or turn the app shell into document-height vertical stacking.
+- Side tools have one presentation: a right-docked rail, approximately 320px
+  by default. The conversation-header control toggles that rail directly; do
+  not add a second inset/overlay form. The rail may still be resized and must
+  keep its contents responsive within the available width.
+- Thread logs choose docked versus overlay presentation from the measured
+  thread canvas, the actual panel width, a 10px resizer, and a 540px minimum
+  primary thread. Do not use a viewport-only media query: open rails and
+  user-resized sidebars change the available canvas.
+- Floating task trees and log panels use the available height between their top
+  and bottom insets. Do not cap them to a percentage of viewport height on tall
+  windows or turn the app shell into document-height vertical stacking.
 - Validate responsive changes in the installed app around the actual seams:
   640, 720/721, 980/981, 1332/1333, and a wide desktop width. Restore the
   user's original window size after CDP measurement.