From 7edb6891f37fcbf3f44d666490aee8126cf7bb0d Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Mon, 5 Oct 2026 21:24:53 +0200
Subject: [PATCH 01/14] fix: Animate Code Composer Menus With Scale and a
 Shorter Fade

Tailwind v4 scale utilities set the scale property, which transition-[opacity,transform] never animated, so the workspace, machine and approval menus snapped in size and then ran a 200ms fade that Ariakit also waits out before unmounting. Transition opacity and scale over 150ms to match the shared popover, and honor reduced motion in the approval menu.
---
 client/src/components/Chat/Input/CodeApprovalMenu.tsx  |  2 +-
 client/src/components/Chat/Input/CodeWorkspaceMenu.tsx |  2 +-
 eslint-suppressions.json                               | 10 ----------
 3 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Chat/Input/CodeApprovalMenu.tsx b/client/src/components/Chat/Input/CodeApprovalMenu.tsx
index e28e8c3fd15..342d588d5ef 100644
--- a/client/src/components/Chat/Input/CodeApprovalMenu.tsx
+++ b/client/src/components/Chat/Input/CodeApprovalMenu.tsx
@@ -135,7 +135,7 @@ export default function CodeApprovalMenu({
         className={cn(
           'z-50 flex max-w-[min(320px,calc(100vw-2rem))] min-w-[260px] flex-col rounded-2xl',
           'border-border-menu bg-surface-menu max-h-[var(--popover-available-height)] overflow-y-auto border p-1 shadow-lg',
-          'origin-bottom opacity-0 transition-[opacity,transform] duration-200 ease-out',
+          'origin-bottom opacity-0 transition duration-150 ease-out motion-reduce:transition-none',
           'data-[enter]:scale-100 data-[enter]:opacity-100',
           'scale-95 data-[leave]:scale-95 data-[leave]:opacity-0',
         )}
diff --git a/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx b/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
index de06ca2008b..b8584da9598 100644
--- a/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
+++ b/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
@@ -53,7 +53,7 @@ const headingClasses = 'px-2.5 pt-2 pb-1 text-xs font-semibold text-text-seconda
 const menuClasses = cn(
   'z-50 flex max-w-[min(360px,calc(100vw-2rem))] min-w-[260px] flex-col rounded-2xl',
   'border-border-menu bg-surface-menu max-h-[var(--popover-available-height)] overflow-y-auto border p-1 shadow-lg',
-  'origin-bottom opacity-0 transition-[opacity,transform] duration-200 ease-out motion-reduce:transition-none',
+  'origin-bottom opacity-0 transition duration-150 ease-out motion-reduce:transition-none',
   'data-[enter]:scale-100 data-[enter]:opacity-100',
   'scale-95 data-[leave]:scale-95 data-[leave]:opacity-0',
 );
diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 306e6909c11..5c660685049 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -170,16 +170,6 @@
       "count": 2
     }
   },
-  "client/src/components/Chat/Input/CodeApprovalMenu.tsx": {
-    "shadcn/no-arbitrary-values": {
-      "count": 1
-    }
-  },
-  "client/src/components/Chat/Input/CodeWorkspaceMenu.tsx": {
-    "shadcn/no-arbitrary-values": {
-      "count": 1
-    }
-  },
   "client/src/components/Chat/Input/ConversationStarters.tsx": {
     "shadcn/no-inline-styles": {
       "count": 2

From 5a49810661f25bca62e239ac1737ebbffee6ed0f Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Mon, 5 Oct 2026 21:54:33 +0200
Subject: [PATCH 02/14] fix: Align Agent Builder Instructions Header With
 Skills

The Inline/Prompt toggle now uses the shared Radio at a new sm size, which the skills mode control also adopts instead of overriding its spacing. The variable and expand actions stay right-aligned when the editor label is visually hidden, and MCP rows in the tools list no longer show a tool count.
---
 .../SidePanel/Agents/Instructions.tsx         | 49 +++++++++----------
 .../SidePanel/Agents/Tools/SkillsSection.tsx  |  2 +-
 .../SidePanel/Agents/Tools/ToolRow.tsx        |  1 -
 .../Agents/__tests__/Instructions.spec.tsx    | 24 ++++-----
 client/src/components/Variables/Editor.tsx    |  3 +-
 eslint-suppressions.json                      |  3 --
 packages/client/src/components/Radio.tsx      | 10 +++-
 7 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/client/src/components/SidePanel/Agents/Instructions.tsx b/client/src/components/SidePanel/Agents/Instructions.tsx
index cb1d84c82de..cc5e35231a1 100644
--- a/client/src/components/SidePanel/Agents/Instructions.tsx
+++ b/client/src/components/SidePanel/Agents/Instructions.tsx
@@ -1,4 +1,5 @@
-import { Button, Label } from '@librechat/client';
+import { useId, useMemo } from 'react';
+import { Label, Radio } from '@librechat/client';
 import { Controller, useWatch, useFormContext } from 'react-hook-form';
 import type { AgentForm } from '~/common';
 import InstructionsPromptFields, { fieldWrapperClass, LoadError } from './InstructionsPromptFields';
@@ -14,42 +15,38 @@ import { cn } from '~/utils';
  * resolves, rather than briefly reading the link as absent. */
 export type InstructionsPromptStatus = 'ready' | 'loading' | 'error';
 
-/** Two-way segmented toggle between the inline editor and a linked prompt group. */
+/** Two-way segmented toggle between the inline editor and a linked prompt group, matching the
+ *  skills mode control so the section headers read as one set. */
 function SourceToggle({ disabled = false }: { disabled?: boolean }) {
   const localize = useLocalize();
+  const labelId = useId();
   const { control } = useFormContext<AgentForm>();
+  const options = useMemo(
+    () => [
+      { value: 'inline', label: localize('com_agents_instructions_source_inline') },
+      { value: 'prompt', label: localize('com_agents_instructions_source_prompt') },
+    ],
+    [localize],
+  );
 
   return (
     <Controller
       name="instructionsSource"
       control={control}
       render={({ field }) => (
-        <div
-          role="group"
-          aria-label={localize('com_agents_instructions_source_toggle_aria')}
-          className="border-border-light bg-surface-primary inline-flex w-fit gap-1 rounded-lg border p-0.5"
-        >
-          <Button
-            type="button"
-            variant={field.value === 'inline' ? 'secondary' : 'ghost'}
-            size="sm"
-            aria-pressed={field.value === 'inline'}
+        <>
+          <span id={labelId} className="sr-only">
+            {localize('com_agents_instructions_source_toggle_aria')}
+          </span>
+          <Radio
+            options={options}
+            value={field.value}
+            onChange={field.onChange}
             disabled={disabled}
-            onClick={() => field.onChange('inline')}
-          >
-            {localize('com_agents_instructions_source_inline')}
-          </Button>
-          <Button
-            type="button"
-            variant={field.value === 'prompt' ? 'secondary' : 'ghost'}
             size="sm"
-            aria-pressed={field.value === 'prompt'}
-            disabled={disabled}
-            onClick={() => field.onChange('prompt')}
-          >
-            {localize('com_agents_instructions_source_prompt')}
-          </Button>
-        </div>
+            aria-labelledby={labelId}
+          />
+        </>
       )}
     />
   );
diff --git a/client/src/components/SidePanel/Agents/Tools/SkillsSection.tsx b/client/src/components/SidePanel/Agents/Tools/SkillsSection.tsx
index cc8dc0d1eac..1a694066cbf 100644
--- a/client/src/components/SidePanel/Agents/Tools/SkillsSection.tsx
+++ b/client/src/components/SidePanel/Agents/Tools/SkillsSection.tsx
@@ -286,7 +286,7 @@ export default function SkillsSection({ items, onInfo, onRemove, onAdd }: Props)
             options={modeOptions}
             value={mode}
             onChange={handleModeChange}
-            buttonClassName="!h-7 !px-2.5 !text-xs"
+            size="sm"
             aria-labelledby="skills-mode-label"
           />
         </div>
diff --git a/client/src/components/SidePanel/Agents/Tools/ToolRow.tsx b/client/src/components/SidePanel/Agents/Tools/ToolRow.tsx
index 75ae6e367d4..cbcfa5a0a11 100644
--- a/client/src/components/SidePanel/Agents/Tools/ToolRow.tsx
+++ b/client/src/components/SidePanel/Agents/Tools/ToolRow.tsx
@@ -15,7 +15,6 @@ interface Props {
 }
 
 function getSuffix(item: AgentItem): string | null {
-  if (item.kind === 'mcp' && item.toolCount > 0) return `· ${item.toolCount}`;
   if (item.kind === 'action' && item.endpointCount > 0) return `· ${item.endpointCount}`;
   return null;
 }
diff --git a/client/src/components/SidePanel/Agents/__tests__/Instructions.spec.tsx b/client/src/components/SidePanel/Agents/__tests__/Instructions.spec.tsx
index 488ce9afbbb..0cae180830d 100644
--- a/client/src/components/SidePanel/Agents/__tests__/Instructions.spec.tsx
+++ b/client/src/components/SidePanel/Agents/__tests__/Instructions.spec.tsx
@@ -69,7 +69,7 @@ describe('Agent Instructions', () => {
   it('switching to Prompt mode hides the inline editor without unmounting it', () => {
     render(<InstructionsHarness />);
 
-    fireEvent.click(screen.getByRole('button', { name: 'com_agents_instructions_source_prompt' }));
+    fireEvent.click(screen.getByRole('radio', { name: 'com_agents_instructions_source_prompt' }));
 
     expect(screen.getByTestId('instructions-prompt-fields')).toBeInTheDocument();
     expect(screen.getByTestId('instructions-inline-panel')).toHaveClass('hidden');
@@ -102,10 +102,10 @@ describe('Agent Instructions', () => {
     expect(screen.getByTestId('restricted-instructions-prompt')).toBeInTheDocument();
     expect(screen.getByTestId('instructions-prompt-fields')).toBeInTheDocument();
     expect(
-      screen.getByRole('button', { name: 'com_agents_instructions_source_inline' }),
+      screen.getByRole('radio', { name: 'com_agents_instructions_source_inline' }),
     ).not.toBeDisabled();
     expect(
-      screen.getByRole('button', { name: 'com_agents_instructions_source_prompt' }),
+      screen.getByRole('radio', { name: 'com_agents_instructions_source_prompt' }),
     ).not.toBeDisabled();
   });
 
@@ -117,7 +117,7 @@ describe('Agent Instructions', () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole('button', { name: 'com_agents_instructions_source_inline' }));
+    fireEvent.click(screen.getByRole('radio', { name: 'com_agents_instructions_source_inline' }));
 
     expect(screen.queryByTestId('instructions-prompt-fields')).not.toBeInTheDocument();
     expect(screen.queryByTestId('restricted-instructions-prompt')).not.toBeInTheDocument();
@@ -136,10 +136,10 @@ describe('Agent Instructions', () => {
       />,
     );
 
-    const promptButton = screen.getByRole('button', {
+    const promptButton = screen.getByRole('radio', {
       name: 'com_agents_instructions_source_prompt',
     });
-    const inlineButton = screen.getByRole('button', {
+    const inlineButton = screen.getByRole('radio', {
       name: 'com_agents_instructions_source_inline',
     });
 
@@ -168,10 +168,10 @@ describe('Agent Instructions', () => {
     expect(screen.queryByTestId('instructions-prompt-fields')).not.toBeInTheDocument();
     expect(screen.queryByTestId('instructions-inline-panel')).not.toBeInTheDocument();
     expect(
-      screen.getByRole('button', { name: 'com_agents_instructions_source_inline' }),
+      screen.getByRole('radio', { name: 'com_agents_instructions_source_inline' }),
     ).toBeDisabled();
     expect(
-      screen.getByRole('button', { name: 'com_agents_instructions_source_prompt' }),
+      screen.getByRole('radio', { name: 'com_agents_instructions_source_prompt' }),
     ).toBeDisabled();
   });
 
@@ -191,7 +191,7 @@ describe('Agent Instructions', () => {
     expect(screen.getByTestId('instructions-prompt-fields')).toBeInTheDocument();
     expect(screen.queryByText('com_ui_loading')).not.toBeInTheDocument();
     expect(
-      screen.getByRole('button', { name: 'com_agents_instructions_source_prompt' }),
+      screen.getByRole('radio', { name: 'com_agents_instructions_source_prompt' }),
     ).not.toBeDisabled();
   });
 
@@ -215,10 +215,10 @@ describe('Agent Instructions', () => {
       'com_agents_instructions_prompt_load_error',
     );
     expect(
-      screen.getByRole('button', { name: 'com_agents_instructions_source_inline' }),
+      screen.getByRole('radio', { name: 'com_agents_instructions_source_inline' }),
     ).toBeDisabled();
     expect(
-      screen.getByRole('button', { name: 'com_agents_instructions_source_prompt' }),
+      screen.getByRole('radio', { name: 'com_agents_instructions_source_prompt' }),
     ).toBeDisabled();
 
     await user.click(screen.getByRole('button', { name: 'com_ui_retry' }));
@@ -231,7 +231,7 @@ describe('Agent Instructions', () => {
 
       expect(screen.getByTestId('instructions-heading')).toHaveTextContent('com_ui_instructions');
       expect(
-        screen.getByRole('group', { name: 'com_agents_instructions_source_toggle_aria' }),
+        screen.getByRole('radiogroup', { name: 'com_agents_instructions_source_toggle_aria' }),
       ).toBeInTheDocument();
     });
 
diff --git a/client/src/components/Variables/Editor.tsx b/client/src/components/Variables/Editor.tsx
index 7687925f8e2..2704aa8c10b 100644
--- a/client/src/components/Variables/Editor.tsx
+++ b/client/src/components/Variables/Editor.tsx
@@ -104,7 +104,8 @@ export default function VariableEditor({
         <Label className={labelClassName} htmlFor={id}>
           {label}
         </Label>
-        <div className="flex items-center gap-0.5">
+        {/* `ml-auto` keeps the actions right-aligned when the label is visually hidden. */}
+        <div className="ml-auto flex items-center gap-0.5">
           {showVariables && (
             <DropdownPopup
               portal={portal}
diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 5c660685049..0c430ac9be4 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -1652,9 +1652,6 @@
   "client/src/components/SidePanel/Agents/Tools/SkillsSection.tsx": {
     "shadcn/no-arbitrary-values": {
       "count": 10
-    },
-    "shadcn/no-restyle": {
-      "count": 2
     }
   },
   "client/src/components/SidePanel/Agents/Tools/ToolCard.tsx": {
diff --git a/packages/client/src/components/Radio.tsx b/packages/client/src/components/Radio.tsx
index 4439eba0c09..97148c11372 100644
--- a/packages/client/src/components/Radio.tsx
+++ b/packages/client/src/components/Radio.tsx
@@ -25,9 +25,16 @@ interface RadioProps {
    *  dialog's width on a phone and the choices past the edge become unreachable.
    *  The moving indicator follows across rows; the single-row default is untouched. */
   wrap?: boolean;
+  /** `sm` fits a section header row beside its label. */
+  size?: 'default' | 'sm';
   'aria-labelledby'?: string;
 }
 
+const segmentSizeClasses = {
+  default: 'h-[2.125rem] px-4 text-sm',
+  sm: 'h-7 px-2.5 text-xs',
+} as const;
+
 const Radio: React.NamedExoticComponent<RadioProps> = memo(function Radio({
   options,
   value,
@@ -37,6 +44,7 @@ const Radio: React.NamedExoticComponent<RadioProps> = memo(function Radio({
   buttonClassName = '',
   fullWidth = false,
   wrap = false,
+  size = 'default',
   'aria-labelledby': ariaLabelledBy,
 }: RadioProps) {
   const localize = useLocalize();
@@ -189,7 +197,7 @@ const Radio: React.NamedExoticComponent<RadioProps> = memo(function Radio({
           onClick={() => handleChange(option.value)}
           onKeyDown={(event) => handleKeyDown(event, index)}
           disabled={disabled}
-          className={`focus-visible:ring-focus-control relative z-10 flex h-[2.125rem] items-center justify-center gap-2 rounded-md px-4 text-sm font-medium transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-hidden ${
+          className={`focus-visible:ring-focus-control relative z-10 flex items-center justify-center gap-2 rounded-md font-medium ${segmentSizeClasses[size]} transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-hidden ${
             currentValue === option.value ? 'text-text-primary' : 'text-text-secondary'
           } ${disabled ? 'cursor-not-allowed opacity-50' : ''} ${disabledInkClasses} ${fullWidth ? 'flex-1' : ''} ${buttonClassName}`}
         >

From 72fd8febc6f0c718421c53a5345dc8eb5c71bac3 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Mon, 5 Oct 2026 21:56:08 +0200
Subject: [PATCH 03/14] feat: Compact Code Workspace Menus and a Checkout Mode
 Picker

Workspace rows are single lines with the repository and ref beside the name, and the approval, workspace and machine menus share one surface that rises in from its chip on the theme motion steps. The checkout chip becomes a menu offering Auto, Isolated worktree and Registered checkout, so the worker's automatic policy can be restored after an override; the normal workspace menu no longer repeats that choice. Approval and checkout descriptions are shortened.
---
 .../Chat/Input/CodeApprovalMenu.tsx           |  27 +-
 .../Chat/Input/CodeWorkspaceMenu.tsx          | 393 +++++++++---------
 .../__tests__/CodeWorkspaceMenu.spec.tsx      | 151 ++++---
 client/src/components/Chat/Input/chip.ts      |  22 +
 client/src/locales/en/translation.json        |  16 +-
 5 files changed, 326 insertions(+), 283 deletions(-)

diff --git a/client/src/components/Chat/Input/CodeApprovalMenu.tsx b/client/src/components/Chat/Input/CodeApprovalMenu.tsx
index 342d588d5ef..9ba1323fc89 100644
--- a/client/src/components/Chat/Input/CodeApprovalMenu.tsx
+++ b/client/src/components/Chat/Input/CodeApprovalMenu.tsx
@@ -7,9 +7,9 @@ import type { TConversation, CodeApprovalMode, CodeEnvironmentMode } from 'libre
 import type { LucideIcon } from 'lucide-react';
 import type { SetterOrUpdater } from 'recoil';
 import type { TranslationKeys } from '~/hooks';
+import { chipClasses, chipMenuClasses, chipMenuItemClasses, chipMenuHeadingClasses } from './chip';
 import { useCodeApprovalModePreference } from '~/hooks/Agents/codeApprovalPreference';
 import { useCodeApprovalMode, useLocalize } from '~/hooks';
-import { chipClasses } from './chip';
 import { cn } from '~/utils';
 
 /** The modes answer one question — what may happen to the workspace without the
@@ -128,23 +128,9 @@ export default function CodeApprovalMenu({
           aria-hidden="true"
         />
       </TooltipAnchor>
-      <Ariakit.Menu
-        portal={true}
-        gutter={8}
-        unmountOnHide={true}
-        className={cn(
-          'z-50 flex max-w-[min(320px,calc(100vw-2rem))] min-w-[260px] flex-col rounded-2xl',
-          'border-border-menu bg-surface-menu max-h-[var(--popover-available-height)] overflow-y-auto border p-1 shadow-lg',
-          'origin-bottom opacity-0 transition duration-150 ease-out motion-reduce:transition-none',
-          'data-[enter]:scale-100 data-[enter]:opacity-100',
-          'scale-95 data-[leave]:scale-95 data-[leave]:opacity-0',
-        )}
-      >
+      <Ariakit.Menu portal={true} gutter={8} unmountOnHide={true} className={chipMenuClasses}>
         {/* Names the menu without adding an `h1` to the page outline. */}
-        <Ariakit.MenuHeading
-          render={<div />}
-          className="text-text-secondary px-2.5 pt-2 pb-1 text-xs font-semibold"
-        >
+        <Ariakit.MenuHeading render={<div />} className={chipMenuHeadingClasses}>
           {localize('com_ui_code_approval_mode')}
         </Ariakit.MenuHeading>
         {modes.map((mode) => {
@@ -158,12 +144,7 @@ export default function CodeApprovalMenu({
               checked={isSelected}
               hideOnClick={true}
               onChange={() => selectMode(mode)}
-              className={cn(
-                'group flex w-full cursor-pointer items-start gap-2.5 rounded-lg px-2.5 py-1.5',
-                'duration-theme-fast outline-hidden transition-colors',
-                'hover:bg-surface-hover data-[active-item]:bg-surface-hover',
-                isSelected && 'bg-surface-active-alt',
-              )}
+              className={cn(chipMenuItemClasses(isSelected), 'items-start')}
             >
               <Icon className="text-text-secondary mt-0.5 size-4 shrink-0" aria-hidden="true" />
               <div className="min-w-0 flex-1 text-left">
diff --git a/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx b/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
index b8584da9598..af4809789ff 100644
--- a/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
+++ b/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
@@ -1,6 +1,6 @@
 import { Fragment, useId, useState } from 'react';
 import * as Ariakit from '@ariakit/react';
-import { CheckboxGlyph, TooltipAnchor, useToastContext } from '@librechat/client';
+import { TooltipAnchor, useToastContext } from '@librechat/client';
 import {
   isCodeWorkspaceCheckoutAvailable,
   isLinkedWorktreeRoutingAllowed,
@@ -15,8 +15,12 @@ import {
   Monitor,
   GitBranch,
   GitFork,
+  FolderGit2,
+  WandSparkles,
+  GitBranchPlus,
 } from 'lucide-react';
 import type { CodeWorkspaceSelection, TConversation } from 'librechat-data-provider';
+import type { LucideIcon } from 'lucide-react';
 import type { SetterOrUpdater } from 'recoil';
 import type {
   CodeWorkspaceEnvironmentResult,
@@ -30,13 +34,19 @@ import {
   useReconcileConversationCodeEnvironmentMutation,
   useCodeEnvironmentStatusQueries,
 } from '~/data-provider';
+import {
+  chipClasses,
+  infoChipClasses,
+  chipMenuClasses as menuClasses,
+  chipMenuItemClasses as menuItemClasses,
+  chipMenuHeadingClasses as headingClasses,
+} from './chip';
 import {
   cn,
   codeWorkspaceErrorKeys,
   getCodeWorkspaceErrorReason,
   getResponseStatus,
 } from '~/utils';
-import { chipClasses, infoChipClasses } from './chip';
 import { useLocalize } from '~/hooks';
 
 const stateLabels: Partial<Record<CodeWorkspaceResult['state'], TranslationKeys>> = {
@@ -49,22 +59,38 @@ const stateLabels: Partial<Record<CodeWorkspaceResult['state'], TranslationKeys>
   without_attached: 'com_ui_code_workspace_without_attached',
 };
 
-const headingClasses = 'px-2.5 pt-2 pb-1 text-xs font-semibold text-text-secondary';
-const menuClasses = cn(
-  'z-50 flex max-w-[min(360px,calc(100vw-2rem))] min-w-[260px] flex-col rounded-2xl',
-  'border-border-menu bg-surface-menu max-h-[var(--popover-available-height)] overflow-y-auto border p-1 shadow-lg',
-  'origin-bottom opacity-0 transition duration-150 ease-out motion-reduce:transition-none',
-  'data-[enter]:scale-100 data-[enter]:opacity-100',
-  'scale-95 data-[leave]:scale-95 data-[leave]:opacity-0',
-);
+type CheckoutChoice = 'auto' | NonNullable<CodeWorkspaceSelection['checkout']>;
 
-const menuItemClasses = (selected = false) =>
-  cn(
-    'group flex w-full cursor-pointer items-start gap-2.5 rounded-lg px-2.5 py-1.5',
-    'outline-hidden transition-colors duration-theme-fast',
-    'hover:bg-surface-hover data-[active-item]:bg-surface-hover',
-    selected && 'bg-surface-active-alt',
-  );
+/** `auto` leaves the checkout to the worker's policy, so it is a choice the reader can return to. */
+const checkoutModes: {
+  value: CheckoutChoice;
+  icon: LucideIcon;
+  label: TranslationKeys;
+  info: TranslationKeys;
+  chip: TranslationKeys;
+}[] = [
+  {
+    value: 'auto',
+    icon: WandSparkles,
+    label: 'com_ui_code_checkout_automatic',
+    info: 'com_ui_code_checkout_automatic_info',
+    chip: 'com_ui_code_checkout_automatic_chip',
+  },
+  {
+    value: 'isolated',
+    icon: GitBranchPlus,
+    label: 'com_ui_code_checkout_isolated',
+    info: 'com_ui_code_checkout_isolated_info',
+    chip: 'com_ui_code_worktree',
+  },
+  {
+    value: 'source',
+    icon: FolderGit2,
+    label: 'com_ui_code_checkout_source',
+    info: 'com_ui_code_checkout_source_info',
+    chip: 'com_ui_code_checkout_source',
+  },
+];
 
 /** Conflicts refresh the decision; definitive rejections keep their specific explanation. */
 function transitionErrorKey(error: unknown): TranslationKeys {
@@ -155,27 +181,31 @@ function EnvironmentWorkspaces({
   allowCheckoutSelection?: boolean;
 }) {
   const localize = useLocalize();
+  const owners = requiredBy?.map(({ id, name }) => name || id).join(', ');
   return (
     <div data-code-environment-id={environment.id}>
-      <Ariakit.MenuHeading render={<div />} className={headingClasses}>
-        {environment.name ?? environment.id}
+      <Ariakit.MenuHeading
+        render={<div />}
+        className={cn(headingClasses, 'flex min-w-0 items-baseline gap-1.5')}
+      >
+        <span className="shrink-0">{environment.name ?? environment.id}</span>
+        {owners && (
+          <span className="text-text-tertiary min-w-0 truncate font-normal">
+            {localize('com_ui_code_workspace_used_by', { 0: owners })}
+          </span>
+        )}
       </Ariakit.MenuHeading>
-      {requiredBy != null && requiredBy.length > 0 && (
-        <p className="text-text-secondary px-2.5 pb-2 text-xs">
-          {localize('com_ui_code_workspace_used_by', {
-            0: requiredBy.map(({ id, name }) => name || id).join(', '),
-          })}
-        </p>
-      )}
       {workspaces.length === 0 && (
-        <div className="text-text-secondary px-2.5 py-2 text-sm">{emptyLabel}</div>
+        <div className="text-text-secondary px-2.5 py-1.5 text-sm">{emptyLabel}</div>
       )}
       {workspaces.map((descriptor) => {
         const selected = isSelected(descriptor.id);
+        const source = [descriptor.environment?.repo, descriptor.environment?.ref]
+          .filter(Boolean)
+          .join(' · ');
         return (
           <Fragment key={descriptor.id}>
             <Ariakit.MenuItemRadio
-              key={descriptor.id}
               name={`codeWorkspace:${environment.id}`}
               value={descriptor.id}
               checked={selected}
@@ -185,93 +215,50 @@ function EnvironmentWorkspaces({
               }
               className={menuItemClasses(selected)}
             >
-              <Folder className="text-text-secondary mt-0.5 size-4 shrink-0" aria-hidden="true" />
-              <div className="min-w-0 flex-1 text-left">
-                <div className="text-text-primary truncate text-sm font-medium">
-                  {descriptor.name ?? descriptor.id}
-                </div>
-                {descriptor.name && (
-                  <p className="text-text-secondary truncate text-xs">{descriptor.id}</p>
-                )}
-                {descriptor.instructions !== undefined && (
-                  <p className="text-text-secondary truncate text-xs">
-                    {descriptor.instructions.length === 0
-                      ? localize('com_ui_repository_instructions_none')
-                      : descriptor.instructions
-                          .map(
-                            (file) =>
-                              `${file.path} · ${(file.bytes / 1024).toFixed(1)} KB${file.truncated ? ` · ${localize('com_ui_repository_instructions_truncated')}` : ''}`,
-                          )
-                          .join(', ')}
-                  </p>
-                )}
-                {(descriptor.environment?.repo || descriptor.environment?.ref) && (
-                  <p className="text-text-secondary truncate text-xs">
-                    {[descriptor.environment.repo, descriptor.environment.ref]
-                      .filter(Boolean)
-                      .join(' · ')}
-                  </p>
-                )}
-              </div>
+              <Folder className="text-text-secondary size-4 shrink-0" aria-hidden="true" />
+              <span className="text-text-primary min-w-0 truncate text-sm font-medium">
+                {descriptor.name ?? descriptor.id}
+              </span>
+              <span className="text-text-tertiary min-w-0 flex-1 truncate text-xs">{source}</span>
               {selected && (
-                <Check className="text-text-primary mt-0.5 size-4 shrink-0" aria-hidden="true" />
+                <Check className="text-text-primary size-4 shrink-0" aria-hidden="true" />
               )}
             </Ariakit.MenuItemRadio>
             {selected &&
               allowCheckoutSelection &&
-              environment.configSchema?.workspaces?.allowCheckoutSelection === true && (
-                <>
-                  <Ariakit.MenuHeading render={<div />} className={headingClasses}>
-                    {localize('com_ui_code_checkout_mode')}
-                  </Ariakit.MenuHeading>
-                  {(['isolated', 'source'] as const)
-                    .filter(
-                      (mode) =>
-                        mode === 'source' ||
-                        descriptor.workspaceInstances?.includes('git_worktree'),
-                    )
-                    .map((mode) => (
-                      <Ariakit.MenuItemRadio
-                        key={mode}
-                        name={`codeCheckout:${environment.id}`}
-                        value={mode}
-                        checked={checkout === mode}
-                        hideOnClick={hideOnClick}
-                        className={menuItemClasses(checkout === mode)}
-                        onChange={() =>
-                          onSelect({
-                            environmentId: environment.id,
-                            workspaceId: descriptor.id,
-                            checkout: mode,
-                          })
-                        }
-                      >
-                        <div className="min-w-0 flex-1 text-left">
-                          <div className="text-text-primary text-sm font-medium">
-                            {localize(
-                              mode === 'isolated'
-                                ? 'com_ui_code_checkout_isolated'
-                                : 'com_ui_code_checkout_source',
-                            )}
-                          </div>
-                          <p className="text-text-secondary text-xs">
-                            {localize(
-                              mode === 'isolated'
-                                ? 'com_ui_code_checkout_isolated_info'
-                                : 'com_ui_code_checkout_source_info',
-                            )}
-                          </p>
-                        </div>
-                        {checkout === mode && (
-                          <Check
-                            className="text-text-primary mt-0.5 size-4 shrink-0"
-                            aria-hidden="true"
-                          />
-                        )}
-                      </Ariakit.MenuItemRadio>
-                    ))}
-                </>
-              )}
+              environment.configSchema?.workspaces?.allowCheckoutSelection === true &&
+              checkoutModes
+                .filter(
+                  ({ value }) =>
+                    value === 'source' ||
+                    (value === 'isolated' &&
+                      descriptor.workspaceInstances?.includes('git_worktree')),
+                )
+                .map(({ value, icon: ModeIcon, label }) => (
+                  <Ariakit.MenuItemRadio
+                    key={value}
+                    name={`codeCheckout:${environment.id}`}
+                    value={value}
+                    checked={checkout === value}
+                    hideOnClick={hideOnClick}
+                    className={cn(menuItemClasses(checkout === value), 'pl-8')}
+                    onChange={() =>
+                      onSelect({
+                        environmentId: environment.id,
+                        workspaceId: descriptor.id,
+                        checkout: value as NonNullable<CodeWorkspaceSelection['checkout']>,
+                      })
+                    }
+                  >
+                    <ModeIcon className="text-text-secondary size-4 shrink-0" aria-hidden="true" />
+                    <span className="text-text-primary min-w-0 flex-1 truncate text-sm">
+                      {localize(label)}
+                    </span>
+                    {checkout === value && (
+                      <Check className="text-text-primary size-4 shrink-0" aria-hidden="true" />
+                    )}
+                  </Ariakit.MenuItemRadio>
+                ))}
           </Fragment>
         );
       })}
@@ -288,9 +275,11 @@ function GitContext({
   target: CodeWorkspaceEnvironmentResult;
   disabled: boolean;
   locked: boolean;
-  onSelect?: (selection: CodeWorkspaceSelection) => void;
+  onSelect?: (selection: CodeWorkspaceSelection, inheritCheckout?: boolean) => void;
 }) {
   const localize = useLocalize();
+  const checkoutStore = Ariakit.useMenuStore({ focusLoop: true, placement: 'top-start' });
+  const checkoutOpen = checkoutStore.useState('open');
   const descriptor = target.workspaces.find(({ id }) => id === target.selected?.workspaceId);
   if (descriptor == null) return null;
   const supportsWorktree = descriptor.workspaceInstances?.includes('git_worktree') === true;
@@ -304,14 +293,14 @@ function GitContext({
     descriptor.workspaceScopes?.includes('git_linked_worktree') &&
     isLinkedWorktreeRoutingAllowed(target.environment.configSchema?.workspaces?.linkedWorktrees) &&
     isCodeWorkspaceCheckoutAvailable({ checkout }, descriptor, checkoutSelectionAllowed);
-  const worktreeInfo =
-    checkout == null
-      ? localize('com_ui_code_checkout_automatic_info')
-      : localize(
-          checkout === 'isolated'
-            ? 'com_ui_code_checkout_isolated_info'
-            : 'com_ui_code_checkout_source_info',
-        );
+  const current = checkoutModes.find(({ value }) => value === (checkout ?? 'auto'));
+  const options = checkoutModes.filter(({ value }) => value !== 'isolated' || supportsWorktree);
+  const chooseCheckout = (choice: CheckoutChoice) => {
+    if (target.selected == null || !checkoutEditable) return;
+    const { checkout: _previous, ...selection } = target.selected;
+    onSelect?.(choice === 'auto' ? selection : { ...selection, checkout: choice }, false);
+  };
+  const CurrentIcon = current?.icon ?? WandSparkles;
   return (
     <>
       {descriptor.environment?.ref && (
@@ -329,36 +318,74 @@ function GitContext({
           </span>
         </TooltipAnchor>
       )}
-      {(supportsWorktree || checkout != null) && (
-        <TooltipAnchor
-          description={worktreeInfo}
-          render={
-            <button
-              type="button"
-              role="checkbox"
-              data-testid="code-worktree"
-              aria-label={localize('com_ui_code_worktree')}
-              aria-checked={checkout == null ? 'mixed' : checkout === 'isolated'}
-              disabled={disabled || !checkoutEditable}
-              className={cn(chipClasses, 'disabled:cursor-not-allowed disabled:opacity-50')}
-              onClick={() => {
-                if (target.selected == null || !checkoutEditable) return;
-                onSelect?.({
-                  ...target.selected,
-                  checkout: checkout === 'isolated' ? 'source' : 'isolated',
-                });
-              }}
-            />
-          }
-        >
-          <CheckboxGlyph checked={checkout === 'isolated'} />
-          <span>{localize('com_ui_code_worktree')}</span>
-          {checkout == null && (
-            <span className="text-text-secondary text-xs">
-              {localize('com_ui_code_checkout_automatic')}
-            </span>
-          )}
-        </TooltipAnchor>
+      {(supportsWorktree || checkout != null) && current != null && (
+        <Ariakit.MenuProvider store={checkoutStore}>
+          <TooltipAnchor
+            description={localize(current.info)}
+            disabled={checkoutOpen}
+            render={
+              <Ariakit.MenuButton
+                data-testid="code-checkout"
+                disabled={disabled || !checkoutEditable}
+                accessibleWhenDisabled={true}
+                aria-label={`${localize('com_ui_code_checkout_mode')}: ${localize(current.label)}`}
+                className={cn(
+                  chipClasses,
+                  checkoutOpen && 'bg-surface-hover',
+                  'aria-disabled:cursor-not-allowed aria-disabled:opacity-50',
+                )}
+              />
+            }
+          >
+            <CurrentIcon className="text-text-secondary size-4 shrink-0" aria-hidden="true" />
+            <span className="max-w-[12rem] min-w-0 truncate">{localize(current.chip)}</span>
+            {checkoutEditable && (
+              <ChevronDown
+                className={cn(
+                  'text-text-secondary size-3 shrink-0 transition-transform',
+                  checkoutOpen && 'rotate-180',
+                )}
+                aria-hidden="true"
+              />
+            )}
+          </TooltipAnchor>
+          <Ariakit.Menu portal={true} gutter={8} unmountOnHide={true} className={menuClasses}>
+            <Ariakit.MenuHeading render={<div />} className={headingClasses}>
+              {localize('com_ui_code_checkout_mode')}
+            </Ariakit.MenuHeading>
+            {options.map(({ value, icon: ModeIcon, label, info }) => {
+              const selected = value === current.value;
+              return (
+                <Ariakit.MenuItemRadio
+                  key={value}
+                  name="codeCheckout"
+                  value={value}
+                  checked={selected}
+                  hideOnClick={true}
+                  onChange={() => chooseCheckout(value)}
+                  className={cn(menuItemClasses(selected), 'items-start')}
+                >
+                  <ModeIcon
+                    className="text-text-secondary mt-0.5 size-4 shrink-0"
+                    aria-hidden="true"
+                  />
+                  <span className="min-w-0 flex-1 text-left">
+                    <span className="text-text-primary block text-sm font-medium">
+                      {localize(label)}
+                    </span>
+                    <span className="text-text-secondary block text-xs">{localize(info)}</span>
+                  </span>
+                  {selected && (
+                    <Check
+                      className="text-text-primary mt-0.5 size-4 shrink-0"
+                      aria-hidden="true"
+                    />
+                  )}
+                </Ariakit.MenuItemRadio>
+              );
+            })}
+          </Ariakit.Menu>
+        </Ariakit.MenuProvider>
       )}
       {showLinkedWorktrees && (
         <TooltipAnchor
@@ -466,12 +493,12 @@ export default function CodeWorkspaceMenu({
 
   const { transition } = workspace;
   const environmentIds = new Set(workspace.environments.map(({ environment }) => environment.id));
-  const selectWorkspace = (selection: CodeWorkspaceSelection) => {
+  const selectWorkspace = (selection: CodeWorkspaceSelection, inheritCheckout = true) => {
     if (disabled || workspace.locked) return;
     const previous = workspace.environments.find(
       ({ environment }) => environment.id === selection.environmentId,
     )?.selected;
-    if (selection.checkout == null && previous?.checkout != null) {
+    if (inheritCheckout && selection.checkout == null && previous?.checkout != null) {
       selection = { ...selection, checkout: previous.checkout };
     }
     workspace.rememberSelection(selection);
@@ -792,15 +819,12 @@ export default function CodeWorkspaceMenu({
                   menuStore.show();
                 }}
               >
-                <Monitor
-                  className="text-text-secondary mt-0.5 size-4 shrink-0"
-                  aria-hidden="true"
-                />
+                <Monitor className="text-text-secondary size-4 shrink-0" aria-hidden="true" />
                 <span className="text-text-primary min-w-0 flex-1 truncate text-left text-sm">
                   {candidate.name ?? candidate.id}
                 </span>
                 {workspace.mode === 'attached' && environmentIds.has(candidate.id) && (
-                  <Check className="text-text-primary mt-0.5 size-4 shrink-0" aria-hidden="true" />
+                  <Check className="text-text-primary size-4 shrink-0" aria-hidden="true" />
                 )}
               </Ariakit.MenuItem>
             ))}
@@ -850,7 +874,13 @@ export default function CodeWorkspaceMenu({
           </TooltipAnchor>
           <WorkspaceRequirements id={requirementsId} requirements={requirements} />
         </div>
-        <Ariakit.Menu portal={true} gutter={8} unmountOnHide={true} className={menuClasses}>
+        <Ariakit.Menu
+          portal={true}
+          gutter={8}
+          unmountOnHide={true}
+          aria-label={localize('com_ui_code_workspace')}
+          className={menuClasses}
+        >
           {transition != null && transitionText != null ? (
             <>
               <Ariakit.MenuHeading render={<div />} className={headingClasses}>
@@ -898,10 +928,7 @@ export default function CodeWorkspaceMenu({
                   disabled={disabled || !moveReady || moveMutation.isLoading}
                   hideOnClick={true}
                   onClick={confirmMove}
-                  className={cn(
-                    menuItemClasses(),
-                    'items-center aria-disabled:cursor-not-allowed aria-disabled:opacity-50',
-                  )}
+                  className={menuItemClasses()}
                 >
                   <ConfirmIcon className="text-text-secondary size-4 shrink-0" aria-hidden="true" />
                   <span className="text-text-primary min-w-0 flex-1 truncate text-left text-sm font-medium">
@@ -915,10 +942,7 @@ export default function CodeWorkspaceMenu({
                   disabled={disabled || moveMutation.isLoading}
                   hideOnClick={true}
                   onClick={confirmDetach}
-                  className={cn(
-                    menuItemClasses(),
-                    'aria-disabled:cursor-not-allowed aria-disabled:opacity-50',
-                  )}
+                  className={cn(menuItemClasses(), 'items-start')}
                 >
                   <FolderX
                     className="text-text-secondary mt-0.5 size-4 shrink-0"
@@ -937,9 +961,6 @@ export default function CodeWorkspaceMenu({
             </>
           ) : (
             <>
-              <Ariakit.MenuHeading render={<div />} className={headingClasses}>
-                {localize('com_ui_code_workspace')}
-              </Ariakit.MenuHeading>
               {workspace.supportsEnvironmentDecisions && (
                 <Ariakit.MenuItemRadio
                   name="codeEnvironmentMode"
@@ -949,23 +970,15 @@ export default function CodeWorkspaceMenu({
                   onChange={selectWithoutAttached}
                   className={menuItemClasses(workspace.mode === 'without_attached')}
                 >
-                  <FolderX
-                    className="text-text-secondary mt-0.5 size-4 shrink-0"
-                    aria-hidden="true"
-                  />
-                  <div className="min-w-0 flex-1 text-left">
-                    <div className="text-text-primary truncate text-sm font-medium">
-                      {localize('com_ui_code_workspace_without_attached')}
-                    </div>
-                    <p className="text-text-secondary text-xs">
-                      {localize('com_ui_code_workspace_without_attached_info')}
-                    </p>
-                  </div>
+                  <FolderX className="text-text-secondary size-4 shrink-0" aria-hidden="true" />
+                  <span className="text-text-primary min-w-0 truncate text-sm font-medium">
+                    {localize('com_ui_code_workspace_without_attached')}
+                  </span>
+                  <span className="text-text-tertiary min-w-0 flex-1 truncate text-xs">
+                    {localize('com_ui_code_workspace_without_attached_info')}
+                  </span>
                   {workspace.mode === 'without_attached' && (
-                    <Check
-                      className="text-text-primary mt-0.5 size-4 shrink-0"
-                      aria-hidden="true"
-                    />
+                    <Check className="text-text-primary size-4 shrink-0" aria-hidden="true" />
                   )}
                 </Ariakit.MenuItemRadio>
               )}
@@ -983,8 +996,6 @@ export default function CodeWorkspaceMenu({
                       workspace.mode === 'attached' && workspaceId === selected?.workspaceId
                     }
                     onSelect={selectWorkspace}
-                    checkout={selected?.checkout}
-                    allowCheckoutSelection={!workspace.locked}
                   />
                 ))}
               {machine != null &&
@@ -1005,10 +1016,7 @@ export default function CodeWorkspaceMenu({
                     aria-busy={machineQuery?.isLoading}
                     onClick={() => void machineQuery?.refetch()}
                   >
-                    <RefreshCw
-                      className="text-text-secondary mt-0.5 size-4 shrink-0"
-                      aria-hidden="true"
-                    />
+                    <RefreshCw className="text-text-secondary size-4 shrink-0" aria-hidden="true" />
                     <span role="status" className="text-text-secondary text-sm">
                       {localize(
                         machineQuery?.isLoading
@@ -1027,10 +1035,7 @@ export default function CodeWorkspaceMenu({
             hideOnClick={false}
             onClick={() => void refresh()}
             aria-busy={isRefreshing}
-            className={cn(
-              menuItemClasses(),
-              'items-center aria-disabled:cursor-not-allowed aria-disabled:opacity-50',
-            )}
+            className={menuItemClasses()}
           >
             <RefreshCw className="text-text-secondary size-4 shrink-0" aria-hidden="true" />
             <span className="text-text-primary text-sm font-medium">
diff --git a/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx b/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx
index 64855e17156..2aefec26495 100644
--- a/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx
+++ b/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx
@@ -96,6 +96,9 @@ function renderMenu(ui: React.ReactElement) {
   };
 }
 
+const checkoutLabel = (checkout?: 'source' | 'isolated') =>
+  `com_ui_code_checkout_mode: com_ui_code_checkout_${checkout ?? 'automatic'}`;
+
 describe('CodeWorkspaceMenu', () => {
   test('separates machine, folder, and reported branch without committing defaults', async () => {
     const graph = workspace({ machineOptions: [environment] });
@@ -225,11 +228,15 @@ describe('CodeWorkspaceMenu', () => {
         'true',
       );
       expect(
-        screen.getByRole('menuitemradio', { name: /com_ui_code_checkout_source/ }),
-      ).toHaveAttribute('aria-checked', 'true');
+        screen.queryByRole('menuitemradio', { name: /com_ui_code_checkout_source/ }),
+      ).not.toBeInTheDocument();
       expect(
         screen.queryByRole('menuitemradio', { name: /Runtime Project/ }),
       ).not.toBeInTheDocument();
+      expect(screen.getByTestId('code-checkout')).toHaveAttribute(
+        'aria-label',
+        checkoutLabel('source'),
+      );
       expect(setter).not.toHaveBeenCalled();
       expect(graph.rememberSelection).not.toHaveBeenCalled();
       expect(graph.environments[0].selected).toEqual(selected);
@@ -255,19 +262,55 @@ describe('CodeWorkspaceMenu', () => {
       graph.environments[0].selected = selected;
       const setter = jest.fn();
       renderMenu(<CodeWorkspaceMenu setConversation={setter} workspace={graph} disabled={false} />);
-      const control = screen.getByRole('checkbox', { name: 'com_ui_code_worktree' });
-      expect(control).toHaveAttribute(
-        'aria-checked',
-        checkout == null ? 'mixed' : String(checkout === 'isolated'),
-      );
+      const control = screen.getByTestId('code-checkout');
+      expect(control).toHaveAttribute('aria-label', checkoutLabel(checkout));
+      expect(control).not.toHaveAttribute('aria-disabled', 'true');
       expect(setter).not.toHaveBeenCalled();
       await userEvent.click(control);
+      expect(
+        await screen.findByRole('menuitemradio', {
+          name: new RegExp(`com_ui_code_checkout_${checkout ?? 'automatic'}`),
+        }),
+      ).toHaveAttribute('aria-checked', 'true');
+      expect(setter).not.toHaveBeenCalled();
+      const next = checkout === 'isolated' ? 'source' : 'isolated';
+      await userEvent.click(
+        screen.getByRole('menuitemradio', { name: new RegExp(`com_ui_code_checkout_${next}`) }),
+      );
       expect(setter.mock.calls[0][0](conversation).codeWorkspaces).toEqual([
-        { ...selected, checkout: checkout === 'isolated' ? 'source' : 'isolated' },
+        { ...selected, checkout: next },
       ]);
     },
   );
 
+  test('removes the explicit checkout when choosing Auto from the chip menu', async () => {
+    const graph = workspace();
+    graph.environments[0].environment = {
+      ...environment,
+      configSchema: { workspaces: { allowCheckoutSelection: true } },
+    };
+    graph.environments[0].workspaces[0].workspaceInstances = ['git_worktree'];
+    graph.environments[0].selected = {
+      environmentId: environment.id,
+      workspaceId: 'project-a',
+      agentIds: ['lia'],
+      checkout: 'isolated',
+    };
+    const setter = jest.fn();
+    renderMenu(<CodeWorkspaceMenu setConversation={setter} workspace={graph} disabled={false} />);
+    await userEvent.click(screen.getByTestId('code-checkout'));
+    await userEvent.click(
+      await screen.findByRole('menuitemradio', { name: /com_ui_code_checkout_automatic/ }),
+    );
+    const [selection] = setter.mock.calls[0][0](conversation).codeWorkspaces;
+    expect(selection).toEqual({
+      environmentId: environment.id,
+      workspaceId: 'project-a',
+      agentIds: ['lia'],
+    });
+    expect(selection).not.toHaveProperty('checkout');
+  });
+
   test('reports machine, branch, and worktree mode on a restored sealed chat', () => {
     const graph = workspace({ locked: true, transition: undefined });
     graph.environments[0].workspaces[0].environment = {
@@ -286,8 +329,11 @@ describe('CodeWorkspaceMenu', () => {
     );
     expect(screen.getByTestId('code-machine-status')).toHaveTextContent('Personal VM');
     expect(screen.getByTestId('code-branch')).toHaveTextContent('dev');
-    expect(screen.getByRole('checkbox')).toHaveAttribute('aria-checked', 'true');
-    expect(screen.getByRole('checkbox')).toBeDisabled();
+    expect(screen.getByTestId('code-checkout')).toHaveAttribute(
+      'aria-label',
+      checkoutLabel('isolated'),
+    );
+    expect(screen.getByTestId('code-checkout')).toHaveAttribute('aria-disabled', 'true');
   });
 
   test.each(['source', 'isolated'] as const)(
@@ -312,10 +358,11 @@ describe('CodeWorkspaceMenu', () => {
       rerenderMenu(
         <CodeWorkspaceMenu setConversation={setter} workspace={graph} disabled={false} />,
       );
-      const control = screen.getByRole('checkbox', { name: 'com_ui_code_worktree' });
-      expect(control).toHaveAttribute('aria-checked', String(checkout === 'isolated'));
-      expect(control).toBeDisabled();
+      const control = screen.getByTestId('code-checkout');
+      expect(control).toHaveAttribute('aria-label', checkoutLabel(checkout));
+      expect(control).toHaveAttribute('aria-disabled', 'true');
       await userEvent.click(control);
+      expect(screen.queryByRole('menuitemradio')).not.toBeInTheDocument();
       expect(setter).not.toHaveBeenCalled();
       expect(graph.rememberSelection).not.toHaveBeenCalled();
       expect(graph.environments[0].selected).toEqual(selected);
@@ -343,10 +390,11 @@ describe('CodeWorkspaceMenu', () => {
       };
       const setter = jest.fn();
       renderMenu(<CodeWorkspaceMenu setConversation={setter} workspace={graph} disabled={false} />);
-      const control = screen.getByRole('checkbox', { name: 'com_ui_code_worktree' });
-      expect(control).toHaveAttribute('aria-checked', 'true');
-      expect(control).toBeDisabled();
+      const control = screen.getByTestId('code-checkout');
+      expect(control).toHaveAttribute('aria-label', checkoutLabel('isolated'));
+      expect(control).toHaveAttribute('aria-disabled', 'true');
       await userEvent.click(control);
+      expect(screen.queryByRole('menuitemradio')).not.toBeInTheDocument();
       expect(setter).not.toHaveBeenCalled();
       expect(graph.rememberSelection).not.toHaveBeenCalled();
     },
@@ -357,9 +405,10 @@ describe('CodeWorkspaceMenu', () => {
     graph.environments[0].workspaces[0].workspaceInstances = ['git_worktree'];
     const setter = jest.fn();
     renderMenu(<CodeWorkspaceMenu setConversation={setter} workspace={graph} disabled={false} />);
-    expect(screen.getByRole('checkbox')).toBeDisabled();
-    expect(screen.getByRole('checkbox')).toHaveAttribute('aria-checked', 'mixed');
-    expect(screen.getByRole('checkbox')).toHaveTextContent('com_ui_code_checkout_automatic');
+    const chip = screen.getByTestId('code-checkout');
+    expect(chip).toHaveAttribute('aria-disabled', 'true');
+    expect(chip).toHaveAttribute('aria-label', checkoutLabel());
+    expect(chip).toHaveTextContent('com_ui_code_checkout_automatic_chip');
     expect(setter).not.toHaveBeenCalled();
   });
 
@@ -376,7 +425,7 @@ describe('CodeWorkspaceMenu', () => {
         <CodeWorkspaceMenu setConversation={jest.fn()} workspace={graph} disabled={false} />,
       );
       expect(screen.queryByText('com_ui_code_linked_worktrees') != null).toBe(enabled);
-      expect(screen.queryByRole('checkbox')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('code-checkout')).not.toBeInTheDocument();
     },
   );
 
@@ -421,12 +470,9 @@ describe('CodeWorkspaceMenu', () => {
           <CodeWorkspaceMenu setConversation={setter} workspace={graph} disabled={false} />,
         );
         expect(screen.queryByText('com_ui_code_linked_worktrees') != null).toBe(expected);
-        const control = screen.queryByRole('checkbox', { name: 'com_ui_code_worktree' });
+        const control = screen.queryByTestId('code-checkout');
         if (capable || checkout != null) {
-          expect(control).toHaveAttribute(
-            'aria-checked',
-            checkout == null ? 'mixed' : String(checkout === 'isolated'),
-          );
+          expect(control).toHaveAttribute('aria-label', checkoutLabel(checkout));
         } else {
           expect(control).toBeNull();
         }
@@ -449,7 +495,7 @@ describe('CodeWorkspaceMenu', () => {
       <CodeWorkspaceMenu setConversation={jest.fn()} workspace={graph} disabled={false} />,
     );
     expect(screen.queryByTestId('code-branch')).not.toBeInTheDocument();
-    expect(screen.queryByRole('checkbox')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('code-checkout')).not.toBeInTheDocument();
   });
 
   test('disables the inline worktree choice during generation', async () => {
@@ -463,8 +509,9 @@ describe('CodeWorkspaceMenu', () => {
     renderMenu(<CodeWorkspaceMenu setConversation={setter} workspace={graph} disabled={true} />);
     expect(screen.getByTestId('code-machine')).toBeDisabled();
     expect(screen.getByTestId('code-workspace')).toHaveAttribute('aria-disabled', 'true');
-    expect(screen.getByRole('checkbox')).toBeDisabled();
-    await userEvent.click(screen.getByRole('checkbox'));
+    expect(screen.getByTestId('code-checkout')).toHaveAttribute('aria-disabled', 'true');
+    await userEvent.click(screen.getByTestId('code-checkout'));
+    expect(screen.queryByRole('menuitemradio', { name: /com_ui_code_checkout/ })).toBeNull();
     expect(setter).not.toHaveBeenCalled();
   });
 
@@ -534,11 +581,15 @@ describe('CodeWorkspaceMenu', () => {
       renderMenu(
         <CodeWorkspaceMenu setConversation={setConversation} workspace={graph} disabled={false} />,
       );
-      await userEvent.click(screen.getByTestId('code-workspace'));
+      await userEvent.click(screen.getByTestId('code-checkout'));
+      const auto = await screen.findByRole('menuitemradio', {
+        name: /com_ui_code_checkout_automatic/,
+      });
       const isolated = screen.getByRole('menuitemradio', {
         name: /com_ui_code_checkout_isolated/,
       });
       const source = screen.getByRole('menuitemradio', { name: /com_ui_code_checkout_source/ });
+      expect(auto).toHaveAttribute('aria-checked', 'true');
       expect(isolated).toHaveAttribute('aria-checked', 'false');
       expect(source).toHaveAttribute('aria-checked', 'false');
       await userEvent.click(checkout === 'isolated' ? isolated : source);
@@ -569,9 +620,9 @@ describe('CodeWorkspaceMenu', () => {
       renderMenu(
         <CodeWorkspaceMenu setConversation={setConversation} workspace={graph} disabled={false} />,
       );
-      await userEvent.click(screen.getByTestId('code-workspace'));
+      await userEvent.click(screen.getByTestId('code-checkout'));
       await userEvent.click(
-        screen.getByRole('menuitemradio', {
+        await screen.findByRole('menuitemradio', {
           name: new RegExp(
             checkout === 'source' ? 'com_ui_code_checkout_source' : 'com_ui_code_checkout_isolated',
           ),
@@ -604,21 +655,18 @@ describe('CodeWorkspaceMenu', () => {
       <CodeWorkspaceMenu setConversation={setConversation} workspace={graph} disabled={false} />,
     );
     await userEvent.click(screen.getByTestId('code-workspace'));
-    if (!enabled) {
-      expect(screen.queryByText('com_ui_code_checkout_mode')).not.toBeInTheDocument();
-    } else {
-      expect(
-        screen.queryByRole('menuitemradio', { name: /com_ui_code_checkout_isolated/ }),
-      ).not.toBeInTheDocument();
-      await userEvent.click(
-        screen.getByRole('menuitemradio', { name: /com_ui_code_checkout_source/ }),
-      );
-      expect(setConversation.mock.calls[0][0](conversation)).toMatchObject({
-        codeWorkspaces: [
-          { environmentId: environment.id, workspaceId: 'project-a', checkout: 'source' },
-        ],
-      });
+    expect(screen.queryByText('com_ui_code_checkout_mode')).not.toBeInTheDocument();
+    expect(screen.queryByRole('menuitemradio', { name: /com_ui_code_checkout/ })).toBeNull();
+    await userEvent.keyboard('{Escape}');
+    if (!capable) {
+      expect(screen.queryByTestId('code-checkout')).not.toBeInTheDocument();
+      return;
     }
+    const chip = screen.getByTestId('code-checkout');
+    expect(chip).toHaveAttribute('aria-disabled', 'true');
+    await userEvent.click(chip);
+    expect(screen.queryByRole('menuitemradio', { name: /com_ui_code_checkout/ })).toBeNull();
+    expect(setConversation).not.toHaveBeenCalled();
   });
 
   test.each([false, true])(
@@ -1079,19 +1127,6 @@ describe('CodeWorkspaceMenu', () => {
     expect(setConversation).not.toHaveBeenCalled();
   });
 
-  test('shows the instruction file and truncation reported by the worker', async () => {
-    const state = workspace();
-    state.environments[0].workspaces[0].instructions = [
-      { path: 'AGENTS.md', bytes: 32768, sha256: 'a'.repeat(64), truncated: true },
-    ];
-    renderMenu(
-      <CodeWorkspaceMenu setConversation={jest.fn()} workspace={state} disabled={false} />,
-    );
-    await userEvent.click(screen.getByTestId('code-workspace'));
-    expect(
-      await screen.findByText('AGENTS.md · 32.0 KB · com_ui_repository_instructions_truncated'),
-    ).toBeInTheDocument();
-  });
   test.each([
     ['example/app', 'example/app · dev'],
     [undefined, 'dev'],
diff --git a/client/src/components/Chat/Input/chip.ts b/client/src/components/Chat/Input/chip.ts
index b1a84ee3667..0ef8b83019d 100644
--- a/client/src/components/Chat/Input/chip.ts
+++ b/client/src/components/Chat/Input/chip.ts
@@ -13,3 +13,25 @@ export const infoChipClasses = cn(
   chipClasses,
   'border-transparent bg-surface-tertiary text-text-secondary hover:bg-surface-tertiary',
 );
+
+/** The popover the rail's chips open. Menus open above their chip, so they rise a few pixels
+ *  from its edge while fading and scaling in, and leave on the faster theme step. */
+export const chipMenuClasses = cn(
+  'z-50 flex max-w-[min(340px,calc(100vw-2rem))] min-w-[240px] flex-col rounded-2xl',
+  'border-border-menu bg-surface-menu max-h-[var(--popover-available-height)] overflow-y-auto border p-1 shadow-lg',
+  'origin-bottom-left translate-y-1 scale-95 opacity-0',
+  'transition duration-theme-normal ease-out motion-reduce:transition-none',
+  'data-[enter]:translate-y-0 data-[enter]:scale-100 data-[enter]:opacity-100',
+  'data-[leave]:duration-theme-fast data-[leave]:ease-in',
+);
+
+export const chipMenuHeadingClasses = 'px-2.5 pt-2 pb-1 text-xs font-semibold text-text-secondary';
+
+export const chipMenuItemClasses = (selected = false) =>
+  cn(
+    'group flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-2.5 py-1.5',
+    'outline-hidden transition-colors duration-theme-fast',
+    'hover:bg-surface-hover data-[active-item]:bg-surface-hover',
+    'aria-disabled:cursor-not-allowed aria-disabled:opacity-50',
+    selected && 'bg-surface-active-alt',
+  );
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 170e595199e..f0eb8c9f112 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -85,7 +85,6 @@
   "com_ui_repository_instructions_defer": "Prefer agent conventions",
   "com_ui_repository_instructions_off": "Off",
   "com_ui_repository_instructions_description": "Load AGENTS.md, or CLAUDE.md when absent, from the selected workspace when its owner enables discovery. Tool permissions remain unchanged.",
-  "com_ui_repository_instructions_none": "No repository instructions",
   "com_ui_repository_instructions_truncated": "Truncated",
   "com_ui_code_workspace_default": "Default workspace for new chats",
   "com_ui_code_workspace_last_used": "Last used workspace",
@@ -109,7 +108,8 @@
   "com_ui_code_branch_info": "Branch reported by the registered workspace. Branch selection is not supported.",
   "com_ui_code_worktree": "Worktree",
   "com_ui_code_checkout_automatic": "Auto",
-  "com_ui_code_checkout_automatic_info": "Use the worker's automatic checkout policy. Choose a checkout mode before sending to override it.",
+  "com_ui_code_checkout_automatic_chip": "Auto checkout",
+  "com_ui_code_checkout_automatic_info": "The worker picks how to check out",
   "com_ui_code_linked_worktrees": "Linked worktrees",
   "com_ui_code_linked_worktrees_info": "Commands in .worktrees/<name> use that worktree's execution lane. This does not create a worktree.",
   "com_ui_code_workspace": "Code workspace",
@@ -126,7 +126,7 @@
   "com_ui_code_workspace_unavailable": "Workspace unavailable",
   "com_ui_code_workspace_unsupported": "Update worker for workspaces",
   "com_ui_code_workspace_without_attached": "No workspace",
-  "com_ui_code_workspace_without_attached_info": "You can chat and use available tools. Attach a workspace for files and commands.",
+  "com_ui_code_workspace_without_attached_info": "Chat without files or commands",
   "com_ui_code_workspace_locked_recovery": "Reconnect or restore this workspace, or start a new chat.",
   "com_ui_code_workspace_attach": "Attach workspace",
   "com_ui_code_workspace_attach_info": "This chat runs without a workspace. Attach one to work with files and commands. Earlier messages stay, and no files are copied.",
@@ -149,11 +149,11 @@
   "com_ui_code_workspace_move_error": "Couldn't update this chat's workspace. Try again.",
   "com_ui_code_workspaces_selected": "{{0}} code workspaces",
   "com_ui_code_approval_ask": "Ask before changes",
-  "com_ui_code_approval_ask_description": "Ask before editing files or running commands",
+  "com_ui_code_approval_ask_description": "Asks before edits and commands",
   "com_ui_code_approval_accept_edits": "Accept edits",
-  "com_ui_code_approval_accept_edits_description": "Allow file edits; continue asking before commands",
+  "com_ui_code_approval_accept_edits_description": "Edits files, asks before commands",
   "com_ui_code_approval_full_access": "Full access",
-  "com_ui_code_approval_full_access_description": "Allow file edits and commands on your machine without asking. Sandbox limits and required approvals still apply.",
+  "com_ui_code_approval_full_access_description": "Edits and runs commands; sandbox limits apply",
   "com_ui_review_action": "Review 1 action",
   "com_ui_review_actions": "Review {{0}} actions",
   "com_ui_review_run_command": "Run command",
@@ -3384,9 +3384,9 @@
   "com_ui_schedule_consent_scopes": "Scopes: {{scopes}}",
   "com_ui_code_checkout_mode": "Checkout mode",
   "com_ui_code_checkout_isolated": "Isolated worktree",
-  "com_ui_code_checkout_isolated_info": "Created on the first workspace operation from the worker's Git snapshot. Uncommitted changes are not copied.",
+  "com_ui_code_checkout_isolated_info": "Own Git worktree; uncommitted changes aren't copied",
   "com_ui_code_checkout_source": "Registered checkout",
-  "com_ui_code_checkout_source_info": "Use the machine's registered checkout directly. Other chats may share these files.",
+  "com_ui_code_checkout_source_info": "The machine's checkout, shared with other chats",
   "com_ui_tool_approval_mode": "Tool approval mode",
   "com_ui_tool_approval_bulk": "Approval mode for all listed tools",
   "com_ui_tool_approval_inherit": "Use inherited policy",

From 7f11ef8e4716f1a71327b4ca2ea1d1cf5f1afa50 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Mon, 5 Oct 2026 22:04:14 +0200
Subject: [PATCH 04/14] fix: Show the Thought Peek Only on Reasoning-Only
 Activity Cards

A collapsed live card that already folds tool calls in with the reasoning names the mix in its header, so the streaming thought preview now gives way to the cursor there and only shows while the card is still just thinking (#16680).
---
 .../Chat/Messages/Content/ActivityPhaseGroup.tsx  |  7 ++++++-
 .../Content/__tests__/ActivityPhaseGroup.test.tsx | 15 +++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Chat/Messages/Content/ActivityPhaseGroup.tsx b/client/src/components/Chat/Messages/Content/ActivityPhaseGroup.tsx
index b0a761bc8f1..0c904dd9def 100644
--- a/client/src/components/Chat/Messages/Content/ActivityPhaseGroup.tsx
+++ b/client/src/components/Chat/Messages/Content/ActivityPhaseGroup.tsx
@@ -752,7 +752,9 @@ export default function ActivityPhaseGroup({
    *  fading window under the header (#14546). The fold had swallowed that
    *  peek with the rows, leaving one throttled sentence on the header to
    *  stand for a paragraph of live reasoning. It takes the cursor's place:
-   *  moving text is its own sign the run is alive. */
+   *  moving text is its own sign the run is alive. Only a card that is still
+   *  just thinking shows it: once tool calls fold in with the thought, the
+   *  header names the mix and the cursor stands in for the reasoning (#16680). */
   const streamingThought = useMemo(() => {
     if (!isLive || isExpanded || liveParts == null) {
       return '';
@@ -761,6 +763,9 @@ export default function ActivityPhaseGroup({
     if (tail?.type !== ContentTypes.THINK) {
       return '';
     }
+    if (liveParts.some((part) => part?.type === ContentTypes.TOOL_CALL)) {
+      return '';
+    }
     return typeof tail.think === 'string' ? tail.think : (tail.think?.value ?? '');
   }, [isLive, isExpanded, liveParts]);
   const thoughtPeek =
diff --git a/client/src/components/Chat/Messages/Content/__tests__/ActivityPhaseGroup.test.tsx b/client/src/components/Chat/Messages/Content/__tests__/ActivityPhaseGroup.test.tsx
index 0605afe5eaf..7ed1c855513 100644
--- a/client/src/components/Chat/Messages/Content/__tests__/ActivityPhaseGroup.test.tsx
+++ b/client/src/components/Chat/Messages/Content/__tests__/ActivityPhaseGroup.test.tsx
@@ -892,4 +892,19 @@ describe('ActivityPhaseGroup streaming thought peek', () => {
     expect(screen.queryByTestId('streaming-thought-peek')).toBeNull();
     expect(screen.getByTestId('activity-phase-cursor')).toBeInTheDocument();
   });
+
+  test('hides the thought when it streams after tool calls in the same card', () => {
+    render(
+      <ActivityPhaseGroup
+        labelPart={makeLabelPart('')}
+        hasContent
+        liveParts={[call, thought]}
+        showCursor
+      >
+        <div data-testid="phase-content" />
+      </ActivityPhaseGroup>,
+    );
+    expect(screen.queryByTestId('streaming-thought-peek')).toBeNull();
+    expect(screen.getByTestId('activity-phase-cursor')).toBeInTheDocument();
+  });
 });

From bfba610b582f9932dd35bebf0480f16d3d6b278b Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Mon, 5 Oct 2026 22:04:27 +0200
Subject: [PATCH 05/14] fix: Keep the Agent Item Dialog From Opening Its Info
 Card on Open

Radix focused the first focusable element, the Handoffs and Subagents info trigger, which opened its hover card as soon as the dialog appeared. Focus the dialog content instead, as the API keys dialog already does.
---
 .../Agents/Tools/ItemDialog/ItemDialog.tsx    | 19 +++++++++++--
 .../ItemDialog/__tests__/ItemDialog.spec.tsx  | 28 +++++++++++++++++--
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/client/src/components/SidePanel/Agents/Tools/ItemDialog/ItemDialog.tsx b/client/src/components/SidePanel/Agents/Tools/ItemDialog/ItemDialog.tsx
index 4582f07babb..fbfeeec04b5 100644
--- a/client/src/components/SidePanel/Agents/Tools/ItemDialog/ItemDialog.tsx
+++ b/client/src/components/SidePanel/Agents/Tools/ItemDialog/ItemDialog.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { OGDialog, OGDialogContent } from '@librechat/client';
 import type { AgentItem } from '../items/types';
 import { AgentPickerPortalContext } from '../../Advanced/AgentList';
@@ -17,10 +17,25 @@ export default function ItemDialog({ item, agentId, onClose }: Props) {
   const isOrchestration =
     item?.kind === 'builtin' && (item.id === 'subagents' || item.id === 'handoffs');
   const isAction = item?.kind === 'action';
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const setContent = useCallback((node: HTMLDivElement | null) => {
+    contentRef.current = node;
+    setPortalElement(node);
+  }, []);
+
+  /** Without this, Radix focuses the first focusable element, which for orchestration items is
+   *  the info hover card trigger, so the card opens on focus as soon as the dialog does. */
+  const handleOpenAutoFocus = (event: Event) => {
+    event.preventDefault();
+    contentRef.current?.focus();
+  };
   return (
     <OGDialog open={item !== null} onOpenChange={(next) => !next && onClose()}>
       <OGDialogContent
-        ref={setPortalElement}
+        ref={setContent}
+        tabIndex={-1}
+        focusOutline="hidden"
+        onOpenAutoFocus={handleOpenAutoFocus}
         className={cn(
           'w-11/12 gap-0 rounded-2xl p-0 md:max-h-[85dvh]',
           isOrchestration ? 'overflow-visible' : 'overflow-hidden',
diff --git a/client/src/components/SidePanel/Agents/Tools/ItemDialog/__tests__/ItemDialog.spec.tsx b/client/src/components/SidePanel/Agents/Tools/ItemDialog/__tests__/ItemDialog.spec.tsx
index 114134f9d8e..26e1f069675 100644
--- a/client/src/components/SidePanel/Agents/Tools/ItemDialog/__tests__/ItemDialog.spec.tsx
+++ b/client/src/components/SidePanel/Agents/Tools/ItemDialog/__tests__/ItemDialog.spec.tsx
@@ -12,6 +12,8 @@ jest.mock('react-hook-form', () => ({
   useWatch: () => undefined,
 }));
 
+const mockOpenAutoFocus: { current?: (event: Event) => void } = {};
+
 jest.mock('@librechat/client', () => {
   const React = jest.requireActual('react');
   return {
@@ -41,8 +43,22 @@ jest.mock('@librechat/client', () => {
           )
         : null,
     OGDialogContent: React.forwardRef(
-      ({ children, ...rest }: { children: React.ReactNode }, ref: React.Ref<HTMLDivElement>) =>
-        React.createElement('div', { ...rest, ref }, children),
+      (
+        {
+          children,
+          onOpenAutoFocus,
+          focusOutline: _focusOutline,
+          ...rest
+        }: {
+          children: React.ReactNode;
+          onOpenAutoFocus?: (event: Event) => void;
+          focusOutline?: string;
+        },
+        ref: React.Ref<HTMLDivElement>,
+      ) => {
+        mockOpenAutoFocus.current = onOpenAutoFocus;
+        return React.createElement('div', { ...rest, ref }, children);
+      },
     ),
     OGDialogHeader: ({ children, ...rest }: { children: React.ReactNode }) =>
       React.createElement('div', rest, children),
@@ -68,6 +84,14 @@ const skill: AgentItem = {
 };
 
 describe('ItemDialog', () => {
+  test('focuses the dialog content on open instead of the first focusable element', () => {
+    render(<ItemDialog item={skill} agentId="a1" onClose={jest.fn()} />);
+    const event = new Event('focusScope.autoFocusOnMount', { cancelable: true });
+    mockOpenAutoFocus.current?.(event);
+    expect(event.defaultPrevented).toBe(true);
+    expect(document.activeElement).toBe(screen.getByTestId('item-dialog'));
+  });
+
   test('renders nothing when item is null', () => {
     render(<ItemDialog item={null} agentId="a1" onClose={jest.fn()} />);
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument();

From 7f70087d2a90c2f84c8c83d55e7aeb2065fa3a4e Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Mon, 5 Oct 2026 22:04:38 +0200
Subject: [PATCH 06/14] fix: Opaque Temporary Composer and Spaced Project Rows

The temporary chat tint replaced the composer's opaque surface, so the context rail tucked beneath it showed through as a band; the tint now layers over the surface. Projects in the sidebar get the same small gap that separates a project from its first chat.
---
 client/src/components/Chat/Input/ChatForm.tsx           | 5 ++++-
 client/src/components/Conversations/ProjectsSection.tsx | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Chat/Input/ChatForm.tsx b/client/src/components/Chat/Input/ChatForm.tsx
index 3e6acabdb3c..42c232efd2f 100644
--- a/client/src/components/Chat/Input/ChatForm.tsx
+++ b/client/src/components/Chat/Input/ChatForm.tsx
@@ -860,7 +860,10 @@ const ChatForm = memo(function ChatForm({
                    a warning rather than a quiet mode hint. The contrast modes take
                    it opaque, because that is the only way it clears the 3:1
                    non-text floor there. */
-                isTemporary && 'border-series-6/50 bg-series-6/10 high-contrast:border-series-6',
+                /** The tint layers over the opaque chat surface instead of replacing it, so the
+                 *  context rail tucked under the composer never shows through. */
+                isTemporary &&
+                  'border-series-6/50 from-series-6/10 to-series-6/10 high-contrast:border-series-6 bg-linear-to-b',
               )}
             >
               <TextareaHeader addedConvo={addedConvo} setAddedConvo={setAddedConvo} />
diff --git a/client/src/components/Conversations/ProjectsSection.tsx b/client/src/components/Conversations/ProjectsSection.tsx
index 1f8b397abaa..6d313addaf2 100644
--- a/client/src/components/Conversations/ProjectsSection.tsx
+++ b/client/src/components/Conversations/ProjectsSection.tsx
@@ -479,7 +479,7 @@ const ProjectsSection = ({ toggleNav, isAuthenticated }: ProjectsSectionProps) =
     }
 
     return (
-      <ul className="m-0 list-none p-0">
+      <ul className="m-0 flex list-none flex-col gap-1 p-0">
         {projects.map((project) => (
           <ProjectItem
             key={project._id}

From 17034134a817ae00069a23f160d3a62435567424 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Mon, 5 Oct 2026 22:20:06 +0200
Subject: [PATCH 07/14] fix: Keep the Registered Checkout Override Without
 Worktree Support

The checkout chip only opened on workspaces that advertise git worktrees, so a source-only workspace lost the registered checkout choice the workspace menu used to offer. The chip is now editable whenever overrides are allowed and the chat is unlocked, offering Auto and Registered checkout, with Isolated still gated on worker support.
---
 .../Chat/Input/CodeWorkspaceMenu.tsx          |  6 +++--
 .../__tests__/CodeWorkspaceMenu.spec.tsx      | 27 ++++++++++++++++---
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx b/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
index af4809789ff..9c6b0ba1804 100644
--- a/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
+++ b/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
@@ -286,7 +286,9 @@ function GitContext({
   const checkout = target.selected?.checkout;
   const checkoutSelectionAllowed =
     target.environment.configSchema?.workspaces?.allowCheckoutSelection === true;
-  const checkoutEditable = !locked && supportsWorktree && checkoutSelectionAllowed;
+  /** The registered checkout needs no worker capability, so a workspace without worktrees still
+   *  lets the reader override Auto with it; only the isolated option depends on support. */
+  const checkoutEditable = !locked && checkoutSelectionAllowed;
   const usesIsolation = checkout !== 'source' && supportsWorktree;
   const showLinkedWorktrees =
     !usesIsolation &&
@@ -318,7 +320,7 @@ function GitContext({
           </span>
         </TooltipAnchor>
       )}
-      {(supportsWorktree || checkout != null) && current != null && (
+      {(supportsWorktree || checkout != null || checkoutEditable) && current != null && (
         <Ariakit.MenuProvider store={checkoutStore}>
           <TooltipAnchor
             description={localize(current.info)}
diff --git a/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx b/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx
index 2aefec26495..bfc6151c2aa 100644
--- a/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx
+++ b/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx
@@ -392,9 +392,20 @@ describe('CodeWorkspaceMenu', () => {
       renderMenu(<CodeWorkspaceMenu setConversation={setter} workspace={graph} disabled={false} />);
       const control = screen.getByTestId('code-checkout');
       expect(control).toHaveAttribute('aria-label', checkoutLabel('isolated'));
-      expect(control).toHaveAttribute('aria-disabled', 'true');
       await userEvent.click(control);
-      expect(screen.queryByRole('menuitemradio')).not.toBeInTheDocument();
+      if (enabled) {
+        /** Overrides stay open so the draft can leave the unavailable isolated mode, but
+         *  isolated itself is never offered without worker support. */
+        expect(
+          screen.queryByRole('menuitemradio', { name: /com_ui_code_checkout_isolated/ }),
+        ).toBeNull();
+        expect(
+          screen.getByRole('menuitemradio', { name: /com_ui_code_checkout_source/ }),
+        ).toBeInTheDocument();
+      } else {
+        expect(control).toHaveAttribute('aria-disabled', 'true');
+        expect(screen.queryByRole('menuitemradio')).not.toBeInTheDocument();
+      }
       expect(setter).not.toHaveBeenCalled();
       expect(graph.rememberSelection).not.toHaveBeenCalled();
     },
@@ -471,7 +482,7 @@ describe('CodeWorkspaceMenu', () => {
         );
         expect(screen.queryByText('com_ui_code_linked_worktrees') != null).toBe(expected);
         const control = screen.queryByTestId('code-checkout');
-        if (capable || checkout != null) {
+        if (capable || checkout != null || (allowed && !locked)) {
           expect(control).toHaveAttribute('aria-label', checkoutLabel(checkout));
         } else {
           expect(control).toBeNull();
@@ -659,7 +670,15 @@ describe('CodeWorkspaceMenu', () => {
     expect(screen.queryByRole('menuitemradio', { name: /com_ui_code_checkout/ })).toBeNull();
     await userEvent.keyboard('{Escape}');
     if (!capable) {
-      expect(screen.queryByTestId('code-checkout')).not.toBeInTheDocument();
+      /** Without worktrees the registered checkout is still a valid override of Auto. */
+      await userEvent.click(screen.getByTestId('code-checkout'));
+      expect(
+        screen.queryByRole('menuitemradio', { name: /com_ui_code_checkout_isolated/ }),
+      ).toBeNull();
+      await userEvent.click(
+        screen.getByRole('menuitemradio', { name: /com_ui_code_checkout_source/ }),
+      );
+      expect(setConversation).toHaveBeenCalled();
       return;
     }
     const chip = screen.getByTestId('code-checkout');

From 42348a45b7ba3f8a81166cdf6361479e166cc2c0 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Mon, 5 Oct 2026 22:28:32 +0200
Subject: [PATCH 08/14] fix: Tell Same-Named Workspaces Apart in the Compact
 Menu

A workspace without repository metadata now shows its id as the secondary text when it differs from the name, so two workspaces that share a name are not indistinguishable.
---
 .../components/Chat/Input/CodeWorkspaceMenu.tsx    |  7 ++++---
 .../Input/__tests__/CodeWorkspaceMenu.spec.tsx     | 14 ++++++++++++++
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx b/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
index 9c6b0ba1804..84f2bc0e0fa 100644
--- a/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
+++ b/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
@@ -200,9 +200,10 @@ function EnvironmentWorkspaces({
       )}
       {workspaces.map((descriptor) => {
         const selected = isSelected(descriptor.id);
-        const source = [descriptor.environment?.repo, descriptor.environment?.ref]
-          .filter(Boolean)
-          .join(' · ');
+        /** The id stands in when there is no repository to tell same-named workspaces apart. */
+        const source =
+          [descriptor.environment?.repo, descriptor.environment?.ref].filter(Boolean).join(' · ') ||
+          (descriptor.name != null && descriptor.name !== descriptor.id ? descriptor.id : '');
         return (
           <Fragment key={descriptor.id}>
             <Ariakit.MenuItemRadio
diff --git a/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx b/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx
index bfc6151c2aa..2b0a9dfe53b 100644
--- a/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx
+++ b/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx
@@ -494,6 +494,20 @@ describe('CodeWorkspaceMenu', () => {
     );
   });
 
+  test('tells same-named workspaces apart by id when they have no repository', async () => {
+    const graph = workspace();
+    graph.environments[0].workspaces = [
+      { id: 'repo-main', name: 'Repo' },
+      { id: 'repo-fork', name: 'Repo' },
+    ];
+    renderMenu(
+      <CodeWorkspaceMenu setConversation={jest.fn()} workspace={graph} disabled={false} />,
+    );
+    await userEvent.click(screen.getByTestId('code-workspace'));
+    expect(screen.getByRole('menuitemradio', { name: /Repo.*repo-main/ })).toBeInTheDocument();
+    expect(screen.getByRole('menuitemradio', { name: /Repo.*repo-fork/ })).toBeInTheDocument();
+  });
+
   test('hides Git context when continuing without an attached workspace', () => {
     const graph = workspace({ mode: 'without_attached', state: 'without_attached' });
     graph.environments[0].workspaces[0].workspaceInstances = ['git_worktree'];

From e4932c3f32ce1773fcec91dff19b6e7e82e1239b Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Mon, 5 Oct 2026 22:38:33 +0200
Subject: [PATCH 09/14] fix: Ignore Checkout Picks Once the Composer Is
 Disabled

The checkout menu could stay open after generation disabled the composer, and its items still wrote a new checkout. The items now follow the disabled state and the handler refuses the write.
---
 .../Chat/Input/CodeWorkspaceMenu.tsx          |  3 ++-
 .../__tests__/CodeWorkspaceMenu.spec.tsx      | 21 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx b/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
index 84f2bc0e0fa..77b7c5c08d0 100644
--- a/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
+++ b/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
@@ -299,7 +299,7 @@ function GitContext({
   const current = checkoutModes.find(({ value }) => value === (checkout ?? 'auto'));
   const options = checkoutModes.filter(({ value }) => value !== 'isolated' || supportsWorktree);
   const chooseCheckout = (choice: CheckoutChoice) => {
-    if (target.selected == null || !checkoutEditable) return;
+    if (target.selected == null || !checkoutEditable || disabled) return;
     const { checkout: _previous, ...selection } = target.selected;
     onSelect?.(choice === 'auto' ? selection : { ...selection, checkout: choice }, false);
   };
@@ -364,6 +364,7 @@ function GitContext({
                   name="codeCheckout"
                   value={value}
                   checked={selected}
+                  disabled={disabled}
                   hideOnClick={true}
                   onChange={() => chooseCheckout(value)}
                   className={cn(menuItemClasses(selected), 'items-start')}
diff --git a/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx b/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx
index 2b0a9dfe53b..5cbfac064a5 100644
--- a/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx
+++ b/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx
@@ -2,8 +2,8 @@ import { AxiosError } from 'axios';
 import { Provider, createStore } from 'jotai';
 import userEvent from '@testing-library/user-event';
 import { dataService } from 'librechat-data-provider';
-import { render, screen, within, waitFor } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen, within, waitFor, fireEvent } from '@testing-library/react';
 import type { TConversation } from 'librechat-data-provider';
 import type { AxiosResponse } from 'axios';
 import type { CodeWorkspaceResult } from '~/hooks';
@@ -494,6 +494,25 @@ describe('CodeWorkspaceMenu', () => {
     );
   });
 
+  test('ignores a checkout pick once the composer is disabled with the menu open', async () => {
+    const graph = workspace();
+    graph.environments[0].environment = {
+      ...environment,
+      configSchema: { workspaces: { allowCheckoutSelection: true } },
+    };
+    graph.environments[0].workspaces[0].workspaceInstances = ['git_worktree'];
+    const setter = jest.fn();
+    const { rerenderMenu } = renderMenu(
+      <CodeWorkspaceMenu setConversation={setter} workspace={graph} disabled={false} />,
+    );
+    await userEvent.click(screen.getByTestId('code-checkout'));
+    rerenderMenu(<CodeWorkspaceMenu setConversation={setter} workspace={graph} disabled={true} />);
+    const source = screen.queryByRole('menuitemradio', { name: /com_ui_code_checkout_source/ });
+    if (source != null) fireEvent.click(source);
+    expect(setter).not.toHaveBeenCalled();
+    expect(graph.rememberSelection).not.toHaveBeenCalled();
+  });
+
   test('tells same-named workspaces apart by id when they have no repository', async () => {
     const graph = workspace();
     graph.environments[0].workspaces = [

From 6867bc0860476ce7d9911e046b104dfae95406e2 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Mon, 5 Oct 2026 22:45:52 +0200
Subject: [PATCH 10/14] fix: Show a Workspace Id Only When Its Name Is Shared

Rows keep the id as secondary text only when a sibling has the same name, including siblings with identical repository and ref, so unique workspaces stay one compact line.
---
 .../components/Chat/Input/CodeWorkspaceMenu.tsx | 14 ++++++++++----
 .../Input/__tests__/CodeWorkspaceMenu.spec.tsx  | 17 +++++++++++++++--
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx b/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
index 77b7c5c08d0..79387c98c36 100644
--- a/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
+++ b/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
@@ -182,6 +182,8 @@ function EnvironmentWorkspaces({
 }) {
   const localize = useLocalize();
   const owners = requiredBy?.map(({ id, name }) => name || id).join(', ');
+  const names = workspaces.map(({ id, name }) => name ?? id);
+  const sharedNames = new Set(names.filter((name, index) => names.indexOf(name) !== index));
   return (
     <div data-code-environment-id={environment.id}>
       <Ariakit.MenuHeading
@@ -200,10 +202,14 @@ function EnvironmentWorkspaces({
       )}
       {workspaces.map((descriptor) => {
         const selected = isSelected(descriptor.id);
-        /** The id stands in when there is no repository to tell same-named workspaces apart. */
-        const source =
-          [descriptor.environment?.repo, descriptor.environment?.ref].filter(Boolean).join(' · ') ||
-          (descriptor.name != null && descriptor.name !== descriptor.id ? descriptor.id : '');
+        /** A sibling with the same name keeps its id visible, so the two rows never read alike. */
+        const source = [
+          descriptor.environment?.repo,
+          descriptor.environment?.ref,
+          sharedNames.has(descriptor.name ?? descriptor.id) ? descriptor.id : undefined,
+        ]
+          .filter(Boolean)
+          .join(' · ');
         return (
           <Fragment key={descriptor.id}>
             <Ariakit.MenuItemRadio
diff --git a/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx b/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx
index 5cbfac064a5..461e34fe000 100644
--- a/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx
+++ b/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx
@@ -513,11 +513,21 @@ describe('CodeWorkspaceMenu', () => {
     expect(graph.rememberSelection).not.toHaveBeenCalled();
   });
 
-  test('tells same-named workspaces apart by id when they have no repository', async () => {
+  test('tells same-named workspaces apart by id', async () => {
     const graph = workspace();
     graph.environments[0].workspaces = [
       { id: 'repo-main', name: 'Repo' },
-      { id: 'repo-fork', name: 'Repo' },
+      {
+        id: 'repo-fork',
+        name: 'Repo',
+        environment: { fingerprint: 'f', repo: 'org/repo', ref: 'main', actions: [] },
+      },
+      {
+        id: 'repo-copy',
+        name: 'Repo',
+        environment: { fingerprint: 'f', repo: 'org/repo', ref: 'main', actions: [] },
+      },
+      { id: 'solo', name: 'Solo' },
     ];
     renderMenu(
       <CodeWorkspaceMenu setConversation={jest.fn()} workspace={graph} disabled={false} />,
@@ -525,6 +535,9 @@ describe('CodeWorkspaceMenu', () => {
     await userEvent.click(screen.getByTestId('code-workspace'));
     expect(screen.getByRole('menuitemradio', { name: /Repo.*repo-main/ })).toBeInTheDocument();
     expect(screen.getByRole('menuitemradio', { name: /Repo.*repo-fork/ })).toBeInTheDocument();
+    expect(screen.getByRole('menuitemradio', { name: /Repo.*repo-copy/ })).toBeInTheDocument();
+    /** A unique name stays one compact line. */
+    expect(screen.getByRole('menuitemradio', { name: 'Solo' })).toBeInTheDocument();
   });
 
   test('hides Git context when continuing without an attached workspace', () => {

From e7e4b5bc80f7ff112b6c18e244d9ca00cd5e6cb0 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Mon, 5 Oct 2026 23:08:26 +0200
Subject: [PATCH 11/14] fix: Keep Open Composer Menu Chips From Reading as
 Disabled

Hiding the chip tooltip with TooltipAnchor's disabled prop also set aria-disabled on the open menu button, which dimmed the checkout chip while its menu was open and told assistive technology the control was unavailable. Suppress only the hover tooltip instead.
---
 client/src/components/Chat/Input/CodeApprovalMenu.tsx  | 4 +++-
 client/src/components/Chat/Input/CodeWorkspaceMenu.tsx | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Chat/Input/CodeApprovalMenu.tsx b/client/src/components/Chat/Input/CodeApprovalMenu.tsx
index 9ba1323fc89..73f88bde4ef 100644
--- a/client/src/components/Chat/Input/CodeApprovalMenu.tsx
+++ b/client/src/components/Chat/Input/CodeApprovalMenu.tsx
@@ -100,7 +100,9 @@ export default function CodeApprovalMenu({
     <Ariakit.MenuProvider store={menuStore}>
       <TooltipAnchor
         description={localize('com_ui_code_approval_mode')}
-        disabled={isOpen}
+        /** `disabled` here would mark the open chip itself `aria-disabled`; only the hover
+         *  tooltip has to stand down while the menu covers it. */
+        showOnHover={!isOpen}
         render={
           <Ariakit.MenuButton
             disabled={disabled}
diff --git a/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx b/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
index 79387c98c36..eb509f7c130 100644
--- a/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
+++ b/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
@@ -331,7 +331,7 @@ function GitContext({
         <Ariakit.MenuProvider store={checkoutStore}>
           <TooltipAnchor
             description={localize(current.info)}
-            disabled={checkoutOpen}
+            showOnHover={!checkoutOpen}
             render={
               <Ariakit.MenuButton
                 data-testid="code-checkout"

From 5c7d2239b1102820ae54dcb1e4e514c9119bf3fb Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Mon, 5 Oct 2026 23:36:36 +0200
Subject: [PATCH 12/14] chore: Drop the Unused Repository Instructions
 Truncated Key

The compact workspace rows no longer render instruction summaries, so the key had no reference left.
---
 client/src/locales/en/translation.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index f0eb8c9f112..1d776fdc72e 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -85,7 +85,6 @@
   "com_ui_repository_instructions_defer": "Prefer agent conventions",
   "com_ui_repository_instructions_off": "Off",
   "com_ui_repository_instructions_description": "Load AGENTS.md, or CLAUDE.md when absent, from the selected workspace when its owner enables discovery. Tool permissions remain unchanged.",
-  "com_ui_repository_instructions_truncated": "Truncated",
   "com_ui_code_workspace_default": "Default workspace for new chats",
   "com_ui_code_workspace_last_used": "Last used workspace",
   "com_ui_code_workspace_default_description": "New chats use this workspace. Without a default, reuse your last available choice for this agent and machine in this browser. Existing chats keep their workspace.",

From fc13e45408b5f2cdf3f55dd0ac8fc30f6e1d691d Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Mon, 5 Oct 2026 23:38:39 +0200
Subject: [PATCH 13/14] fix: Keep Per-Environment Checkout Choices for
 Multi-Machine Chats

The rail's checkout chip only serves a chat with a single machine, so chats spanning several machines had lost every checkout control. The workspace menu again offers Auto, Isolated worktree and Registered checkout under each machine's selected workspace in that case.
---
 .../Chat/Input/CodeWorkspaceMenu.tsx          | 35 +++++++++++----
 .../__tests__/CodeWorkspaceMenu.spec.tsx      | 45 +++++++++++++++++++
 2 files changed, 71 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx b/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
index eb509f7c130..e29d79de30b 100644
--- a/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
+++ b/client/src/components/Chat/Input/CodeWorkspaceMenu.tsx
@@ -169,6 +169,7 @@ function EnvironmentWorkspaces({
   onSelect,
   checkout,
   allowCheckoutSelection = false,
+  allowAutoCheckout = false,
 }: {
   environment: CodeWorkspaceEnvironmentResult['environment'];
   requiredBy?: CodeWorkspaceEnvironmentResult['requiredBy'];
@@ -176,12 +177,17 @@ function EnvironmentWorkspaces({
   emptyLabel: string;
   hideOnClick: boolean;
   isSelected: (workspaceId: string) => boolean;
-  onSelect: (selection: CodeWorkspaceSelection) => void;
+  onSelect: (selection: CodeWorkspaceSelection, inheritCheckout?: boolean) => void;
   checkout?: CodeWorkspaceSelection['checkout'];
   allowCheckoutSelection?: boolean;
+  /** Offers Auto, which clears an override back to the worker's policy. */
+  allowAutoCheckout?: boolean;
 }) {
   const localize = useLocalize();
   const owners = requiredBy?.map(({ id, name }) => name || id).join(', ');
+  const currentCheckout: CheckoutChoice | undefined = allowAutoCheckout
+    ? (checkout ?? 'auto')
+    : checkout;
   const names = workspaces.map(({ id, name }) => name ?? id);
   const sharedNames = new Set(names.filter((name, index) => names.indexOf(name) !== index));
   return (
@@ -238,6 +244,7 @@ function EnvironmentWorkspaces({
                 .filter(
                   ({ value }) =>
                     value === 'source' ||
+                    (value === 'auto' && allowAutoCheckout) ||
                     (value === 'isolated' &&
                       descriptor.workspaceInstances?.includes('git_worktree')),
                 )
@@ -246,22 +253,27 @@ function EnvironmentWorkspaces({
                     key={value}
                     name={`codeCheckout:${environment.id}`}
                     value={value}
-                    checked={checkout === value}
+                    checked={currentCheckout === value}
                     hideOnClick={hideOnClick}
-                    className={cn(menuItemClasses(checkout === value), 'pl-8')}
+                    className={cn(menuItemClasses(currentCheckout === value), 'pl-8')}
                     onChange={() =>
-                      onSelect({
-                        environmentId: environment.id,
-                        workspaceId: descriptor.id,
-                        checkout: value as NonNullable<CodeWorkspaceSelection['checkout']>,
-                      })
+                      value === 'auto'
+                        ? onSelect(
+                            { environmentId: environment.id, workspaceId: descriptor.id },
+                            false,
+                          )
+                        : onSelect({
+                            environmentId: environment.id,
+                            workspaceId: descriptor.id,
+                            checkout: value,
+                          })
                     }
                   >
                     <ModeIcon className="text-text-secondary size-4 shrink-0" aria-hidden="true" />
                     <span className="text-text-primary min-w-0 flex-1 truncate text-sm">
                       {localize(label)}
                     </span>
-                    {checkout === value && (
+                    {currentCheckout === value && (
                       <Check className="text-text-primary size-4 shrink-0" aria-hidden="true" />
                     )}
                   </Ariakit.MenuItemRadio>
@@ -1006,6 +1018,11 @@ export default function CodeWorkspaceMenu({
                       workspace.mode === 'attached' && workspaceId === selected?.workspaceId
                     }
                     onSelect={selectWorkspace}
+                    checkout={selected?.checkout}
+                    /** One environment gets the checkout chip in the rail; several share it here,
+                     *  one set of choices under each environment's selected workspace. */
+                    allowCheckoutSelection={!workspace.locked && workspace.environments.length > 1}
+                    allowAutoCheckout={true}
                   />
                 ))}
               {machine != null &&
diff --git a/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx b/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx
index 461e34fe000..ce38826007d 100644
--- a/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx
+++ b/client/src/components/Chat/Input/__tests__/CodeWorkspaceMenu.spec.tsx
@@ -594,6 +594,51 @@ describe('CodeWorkspaceMenu', () => {
     },
   );
 
+  test('offers checkout per environment in the menu when a chat uses several machines', async () => {
+    const graph = workspace();
+    graph.environments = ['isolated', undefined].map((checkout, index) => ({
+      environment: {
+        ...environment,
+        id: `vm-${index}`,
+        name: `Machine ${index}`,
+        configSchema: { workspaces: { allowCheckoutSelection: true } },
+      },
+      state: 'ready' as const,
+      workspaces: [
+        {
+          id: 'repo',
+          name: `Repository ${index}`,
+          workspaceInstances: ['git_worktree'] as ['git_worktree'],
+        },
+      ],
+      selected: {
+        environmentId: `vm-${index}`,
+        workspaceId: 'repo',
+        ...(checkout ? { checkout: checkout as 'isolated' } : {}),
+      },
+    }));
+    const setConversation = jest.fn();
+    renderMenu(
+      <CodeWorkspaceMenu setConversation={setConversation} workspace={graph} disabled={false} />,
+    );
+    /** The rail chip only serves a single machine. */
+    expect(screen.queryByTestId('code-checkout')).not.toBeInTheDocument();
+    await userEvent.click(screen.getByTestId('code-workspace'));
+    const autoChoices = screen.getAllByRole('menuitemradio', {
+      name: /com_ui_code_checkout_automatic/,
+    });
+    expect(autoChoices).toHaveLength(2);
+    expect(autoChoices[0]).toHaveAttribute('aria-checked', 'false');
+    expect(autoChoices[1]).toHaveAttribute('aria-checked', 'true');
+    await userEvent.click(autoChoices[0]);
+    const next = setConversation.mock.calls[0][0](conversation);
+    const vm0 = next.codeWorkspaces.find(
+      ({ environmentId }: { environmentId: string }) => environmentId === 'vm-0',
+    );
+    expect(vm0).toMatchObject({ environmentId: 'vm-0', workspaceId: 'repo' });
+    expect(vm0).not.toHaveProperty('checkout');
+  });
+
   test('reports checkout modes for every environment on a restored sealed chat', () => {
     const graph = workspace({ locked: true, transition: undefined });
     graph.environments = ['source', 'isolated'].map((checkout, index) => ({

From fb794a7d0137e2b17b8c0992f677bc45ecbbb680 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Tue, 6 Oct 2026 00:05:32 +0200
Subject: [PATCH 14/14] test: Cover Composer Code Menus, Agent Builder and
 Thought Peek Scenarios

Mock-profile scenarios for the compact code workspace and checkout menus (with stubbed worker responses), the agent builder instructions header, item dialog focus, MCP rows, temporary composer surface, project spacing, and the thought peek after a tool call, using a new E2E_TOOL_THEN_THINK_REPLY fake-model trigger.
---
 e2e/setup/fake-model.js                       |  49 +++
 .../scenarios/agent-builder-header.spec.ts    | 105 ++++++
 .../scenarios/code-workspace-composer.spec.ts | 291 +++++++++++++++
 .../mock/scenarios/codeWorkspaceMocks.ts      | 338 ++++++++++++++++++
 .../scenarios/project-rows-spaced.spec.ts     |  80 +++++
 .../mock/scenarios/thought-peek-tools.spec.ts |  81 +++++
 6 files changed, 944 insertions(+)
 create mode 100644 e2e/specs/mock/scenarios/agent-builder-header.spec.ts
 create mode 100644 e2e/specs/mock/scenarios/code-workspace-composer.spec.ts
 create mode 100644 e2e/specs/mock/scenarios/codeWorkspaceMocks.ts
 create mode 100644 e2e/specs/mock/scenarios/project-rows-spaced.spec.ts
 create mode 100644 e2e/specs/mock/scenarios/thought-peek-tools.spec.ts

diff --git a/e2e/setup/fake-model.js b/e2e/setup/fake-model.js
index 96f14e7600f..151f29e8d6c 100644
--- a/e2e/setup/fake-model.js
+++ b/e2e/setup/fake-model.js
@@ -61,6 +61,7 @@ const STEER_SPLIT_REPLY_MARKER = 'E2E_STEER_SPLIT_REPLY:';
 const STEER_LATE_REPLY_MARKER = 'E2E_STEER_LATE_REPLY:';
 const ACTIVITY_REPLY_MARKER = 'E2E_ACTIVITY_REPLY:';
 const ACTIVITY_PHASE_REPLY_MARKER = 'E2E_ACTIVITY_PHASE_REPLY:';
+const TOOL_THEN_THINK_REPLY_MARKER = 'E2E_TOOL_THEN_THINK_REPLY:';
 const ACTIVITY_FAILED_REPLY_MARKER = 'E2E_ACTIVITY_FAILED_REPLY:';
 const ACTIVITY_PROSE_REPLY_MARKER = 'E2E_ACTIVITY_PROSE_REPLY:';
 const ASK_USER_QUESTION_MARKER = 'E2E_ASK_USER_QUESTION:';
@@ -1737,6 +1738,49 @@ function activityPhaseReplyResponses(label, toolNames) {
   };
 }
 
+/**
+ * One tool call, then a slowly streamed `<think>` of several sentences and the
+ * final text. The thought streams after a tool batch, which is the state the
+ * live thought peek must stay hidden in.
+ */
+function toolThenThinkReplyResponses(label, toolNames) {
+  const toolName = Array.from(toolNames).find((name) => name.startsWith(STEER_TOOL_NAME_PREFIX));
+  if (!toolName) {
+    return {
+      responses: [
+        `E2E tool then think reply unavailable: no ${STEER_TOOL_NAME_PREFIX} tool advertised.`,
+      ],
+    };
+  }
+  let invocation = 0;
+  return {
+    responses: [''],
+    sleep: 200,
+    resolveInvocation: async () => {
+      invocation += 1;
+      if (invocation === 1) {
+        return {
+          response: '',
+          toolCalls: [
+            {
+              id: `call_e2e_tool_then_think_${label}`,
+              name: toolName,
+              args: { fact: `tool then think ${label}` },
+              type: 'tool_call',
+            },
+          ],
+        };
+      }
+      return {
+        response:
+          '<think>First I read the tool result slowly. Then I weigh what it changes with care. ' +
+          'Next I compare it against the original request. Afterwards I check the edge cases once more. ' +
+          `Finally I decide how to answer it.</think>\n\nE2E tool then think reply done ${label}`,
+      };
+    },
+  };
+}
+
 /** Short prose remains visible while the real tool/label pipeline forms and
  * dissolves folds. The pause before calls lets the browser finish the initial
  * word fade and install its identity/animation observer before that transition. */
@@ -3489,6 +3533,11 @@ function resolveResponses({ graph, messages, text, toolNames }) {
     return activityPhaseReplyResponses(activityPhaseLabel, toolNames);
   }
 
+  const toolThenThinkLabel = getMarkerValue(text, TOOL_THEN_THINK_REPLY_MARKER);
+  if (toolThenThinkLabel) {
+    return toolThenThinkReplyResponses(toolThenThinkLabel, toolNames);
+  }
+
   const activityProseLabel = getMarkerValue(text, ACTIVITY_PROSE_REPLY_MARKER);
   if (activityProseLabel) {
     return activityProseReplyResponses(activityProseLabel, toolNames);
diff --git a/e2e/specs/mock/scenarios/agent-builder-header.spec.ts b/e2e/specs/mock/scenarios/agent-builder-header.spec.ts
new file mode 100644
index 00000000000..4f492d69443
--- /dev/null
+++ b/e2e/specs/mock/scenarios/agent-builder-header.spec.ts
@@ -0,0 +1,105 @@
+import { expect, test } from '@playwright/test';
+import type { Locator, Page } from '@playwright/test';
+import { installCodeMocks, openCodeChat, singleMachine } from './codeWorkspaceMocks';
+import { openAgentBuilder } from '../agents.helpers';
+
+const RIGHT_EDGE_TOLERANCE = 6;
+
+async function rightEdge(locator: Locator): Promise<number> {
+  const box = await locator.boundingBox();
+  expect(box).not.toBeNull();
+  return (box?.x ?? 0) + (box?.width ?? 0);
+}
+
+/** Open the item dialog (the settings of a native tool) from its card in the tool library. */
+async function openOrchestrationItem(page: Page, name: 'Handoffs' | 'Subagents'): Promise<Locator> {
+  const form = await openAgentBuilder(page, { navigate: false });
+  await form.getByRole('button', { name: 'Add tools' }).click();
+  const library = page.getByRole('dialog', { name: 'Tool Library' });
+  await expect(library).toBeVisible();
+  const card = library
+    .getByRole('listitem')
+    .filter({ has: page.getByRole('button', { name: new RegExp(`^${name}`) }) });
+  await card.hover();
+  await card.getByRole('button', { name: /^(Configure|Tool details)$/ }).click();
+  const dialog = page.getByRole('dialog').filter({ hasNotText: 'Tool Library' }).last();
+  await expect(dialog).toBeVisible();
+  return dialog;
+}
+
+test.describe('agent builder header', () => {
+  test('instructions source is a segmented radio @scenario:instructions-source-is-segmented-radio', async ({
+    page,
+  }) => {
+    const form = await openAgentBuilder(page);
+    const group = form.getByRole('radiogroup', { name: 'Instructions source' });
+    await expect(group).toBeVisible();
+    const inline = group.getByRole('radio', { name: 'Inline' });
+    const prompt = group.getByRole('radio', { name: 'Prompt' });
+    await expect(inline).toBeChecked();
+    await expect(prompt).not.toBeChecked();
+
+    /** The editor's actions share its header row with the hidden label and stay on the right. */
+    const editor = form.locator('#instructions');
+    await expect(editor).toBeVisible();
+    const editorRight = await rightEdge(editor);
+    const actions = form
+      .getByTestId('instructions-inline-panel')
+      .getByRole('button')
+      .filter({ hasNot: page.locator('textarea') });
+    const count = await actions.count();
+    expect(count).toBeGreaterThan(0);
+    const lastAction = actions.nth(count - 1);
+    expect(Math.abs((await rightEdge(lastAction)) - editorRight)).toBeLessThanOrEqual(
+      RIGHT_EDGE_TOLERANCE,
+    );
+    for (let index = 0; index < count; index += 1) {
+      const box = await actions.nth(index).boundingBox();
+      const editorBox = await editor.boundingBox();
+      expect((box?.x ?? 0) + (box?.width ?? 0) / 2).toBeGreaterThan(
+        (editorBox?.x ?? 0) + (editorBox?.width ?? 0) / 2,
+      );
+    }
+
+    await inline.focus();
+    await page.keyboard.press('ArrowRight');
+    await expect(prompt).toBeChecked();
+    await expect(inline).not.toBeChecked();
+    await page.keyboard.press('ArrowLeft');
+    await expect(inline).toBeChecked();
+    await prompt.click();
+    await expect(prompt).toBeChecked();
+    await inline.click();
+    await expect(inline).toBeChecked();
+  });
+
+  test('orchestration dialogs open without their info card @scenario:agent-item-dialog-opens-without-info-card', async ({
+    page,
+  }) => {
+    await page.goto('/c/new', { timeout: 15000 });
+    for (const name of ['Handoffs', 'Subagents'] as const) {
+      const dialog = await openOrchestrationItem(page, name);
+      await page.waitForTimeout(500);
+      await expect(page.getByText(/Configure agents that this agent can transfer/)).toHaveCount(0);
+      await expect(page.locator('[data-radix-popper-content-wrapper]')).toHaveCount(0);
+      await expect(dialog).toBeFocused();
+      await page.keyboard.press('Escape');
+      await expect(dialog).toHaveCount(0);
+      await page.keyboard.press('Escape').catch(() => undefined);
+    }
+  });
+
+  test('an MCP server row carries no tool count @scenario:mcp-tool-row-without-count', async ({
+    page,
+  }) => {
+    await installCodeMocks(page, { environments: [singleMachine()], mcp: true });
+    await openCodeChat(page);
+    const form = await openAgentBuilder(page, { navigate: false });
+    const row = form.getByText('context7', { exact: false }).first();
+    await expect(row).toBeVisible();
+    const container = form.getByRole('listitem').filter({ hasText: 'context7' }).first();
+    await expect(container).toBeVisible();
+    await expect(container).not.toContainText('· 2');
+    await expect(container).not.toContainText('·');
+  });
+});
diff --git a/e2e/specs/mock/scenarios/code-workspace-composer.spec.ts b/e2e/specs/mock/scenarios/code-workspace-composer.spec.ts
new file mode 100644
index 00000000000..e66e411f173
--- /dev/null
+++ b/e2e/specs/mock/scenarios/code-workspace-composer.spec.ts
@@ -0,0 +1,291 @@
+import { expect, test } from '@playwright/test';
+import type { Locator, Page } from '@playwright/test';
+import {
+  installCodeMocks,
+  openCodeChat,
+  secondMachine,
+  singleMachine,
+  workspace,
+} from './codeWorkspaceMocks';
+
+const APPROVAL = '[data-testid="code-approval-mode"]';
+const WORKSPACE = '[data-testid="code-workspace"]';
+const CHECKOUT = '[data-testid="code-checkout"]';
+
+const chip = (page: Page, selector: string) => page.locator(selector);
+const openMenu = (page: Page) => page.getByRole('menu');
+
+async function openChip(page: Page, selector: string): Promise<Locator> {
+  await chip(page, selector).click();
+  const menu = openMenu(page);
+  await expect(menu).toBeVisible();
+  return menu;
+}
+
+async function closeMenu(page: Page) {
+  await page.keyboard.press('Escape');
+  await expect(openMenu(page)).toHaveCount(0);
+}
+
+const parseSeconds = (value: string) => {
+  const first = value.split(',')[0].trim();
+  return first.endsWith('ms') ? parseFloat(first) / 1000 : parseFloat(first);
+};
+
+test.describe('composer code workspace chips', () => {
+  test('approval and workspace menus fade and scale in @scenario:code-chip-menus-animate-scale-and-fade', async ({
+    page,
+  }) => {
+    await installCodeMocks(page, { environments: [singleMachine()] });
+    await openCodeChat(page);
+    const reduced = await page.evaluate(
+      () => window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+    );
+
+    for (const selector of [APPROVAL, WORKSPACE]) {
+      const menu = await openChip(page, selector);
+      /** Sample the settled state: the enter transition has ended. */
+      await expect
+        .poll(() => menu.evaluate((element) => getComputedStyle(element).opacity))
+        .toBe('1');
+      const style = await menu.evaluate((element) => {
+        const computed = getComputedStyle(element);
+        return {
+          property: computed.transitionProperty,
+          duration: computed.transitionDuration,
+          opacity: computed.opacity,
+          transform: computed.transform,
+          scale: computed.scale,
+        };
+      });
+      if (reduced) {
+        expect(style.duration.split(',').every((value) => parseSeconds(value) === 0)).toBe(true);
+      } else {
+        expect(style.property).toContain('opacity');
+        expect(style.property).toContain('scale');
+        expect(style.property).toContain('translate');
+        expect(parseSeconds(style.duration)).toBeGreaterThan(0);
+        expect(parseSeconds(style.duration)).toBeLessThanOrEqual(0.2);
+      }
+      expect(style.opacity).toBe('1');
+      expect(['none', '1', '1 1']).toContain(style.scale);
+      expect(['none', 'matrix(1, 0, 0, 1, 0, 0)']).toContain(style.transform);
+      await closeMenu(page);
+    }
+  });
+
+  test('workspace rows are one line each @scenario:workspace-menu-rows-are-single-line', async ({
+    page,
+  }) => {
+    await installCodeMocks(page, { environments: [singleMachine()] });
+    await openCodeChat(page);
+    const menu = await openChip(page, WORKSPACE);
+
+    for (const name of ['primary', 'librechat', 'agents', 'librechat-ai']) {
+      const row = menu.getByRole('menuitemradio', { name: new RegExp(`^${name}(\\s|$)`) });
+      await expect(row).toHaveCount(1);
+      const box = await row.boundingBox();
+      expect(box, `${name} row`).not.toBeNull();
+      expect(box?.height ?? Infinity, `${name} row height`).toBeLessThan(40);
+    }
+    await expect(
+      menu.getByRole('menuitemradio', { name: /librechat.*danny-avila\/LibreChat · dev/ }),
+    ).toBeVisible();
+    await expect(menu.getByText('AGENTS.md')).toHaveCount(0);
+    await expect(menu.getByText('CLAUDE.md')).toHaveCount(0);
+    await expect(menu.getByText('Checkout mode')).toHaveCount(0);
+  });
+
+  test('the checkout chip returns to Auto @scenario:checkout-chip-restores-auto', async ({
+    page,
+  }) => {
+    await installCodeMocks(page, { environments: [singleMachine()] });
+    await openCodeChat(page);
+    const checkout = chip(page, CHECKOUT);
+    await expect(checkout).toContainText('Auto checkout');
+
+    let menu = await openChip(page, CHECKOUT);
+    await menu.getByRole('menuitemradio', { name: /Isolated worktree/ }).click();
+    await expect(openMenu(page)).toHaveCount(0);
+    await expect(checkout).toContainText('Worktree');
+    await expect(checkout).not.toContainText('Auto checkout');
+
+    menu = await openChip(page, CHECKOUT);
+    await expect(menu.getByRole('menuitemradio', { name: /Isolated worktree/ })).toBeChecked();
+    await menu.getByRole('menuitemradio', { name: /^Auto/ }).click();
+    await expect(openMenu(page)).toHaveCount(0);
+    await expect(checkout).toContainText('Auto checkout');
+
+    /** The same flow without a pointer. */
+    await checkout.focus();
+    await page.keyboard.press('Enter');
+    menu = openMenu(page);
+    await expect(menu).toBeVisible();
+    const isolated = menu.getByRole('menuitemradio', { name: /Isolated worktree/ });
+    for (let step = 0; step < 4; step += 1) {
+      await page.keyboard.press('ArrowDown');
+      if ((await isolated.getAttribute('data-active-item')) != null) {
+        break;
+      }
+    }
+    await expect(isolated).toHaveAttribute('data-active-item', 'true');
+    await page.keyboard.press('Enter');
+    await expect(openMenu(page)).toHaveCount(0);
+    await expect(checkout).toContainText('Worktree');
+    await expect(checkout).toBeFocused();
+
+    await page.keyboard.press('ArrowDown');
+    await expect(openMenu(page)).toBeVisible();
+    await closeMenu(page);
+  });
+
+  test('a workspace without worktrees still offers the registered checkout @scenario:checkout-source-without-worktree-support', async ({
+    page,
+  }) => {
+    await installCodeMocks(page, {
+      environments: [
+        singleMachine({
+          defaultWorkspaceId: 'plain',
+          workspaces: [workspace('plain', { repo: 'LibreChat-AI/plain', ref: 'main' })],
+        }),
+      ],
+    });
+    await openCodeChat(page);
+    const checkout = chip(page, CHECKOUT);
+    await expect(checkout).toBeVisible();
+    await expect(checkout).toBeEnabled();
+    await expect(checkout).not.toHaveAttribute('aria-disabled', 'true');
+    await expect(checkout).toContainText('Auto checkout');
+
+    const menu = await openChip(page, CHECKOUT);
+    await expect(menu.getByRole('menuitemradio')).toHaveCount(2);
+    await expect(menu.getByRole('menuitemradio', { name: /^Auto/ })).toBeVisible();
+    await expect(menu.getByRole('menuitemradio', { name: /Registered checkout/ })).toBeVisible();
+    await expect(menu.getByRole('menuitemradio', { name: /Isolated worktree/ })).toHaveCount(0);
+
+    await menu.getByRole('menuitemradio', { name: /Registered checkout/ }).click();
+    await expect(openMenu(page)).toHaveCount(0);
+    await expect(checkout).not.toContainText('Auto checkout');
+    await expect(checkout).toContainText(/Registered|Source/);
+  });
+
+  test('several machines choose their checkout in the workspace menu @scenario:multi-machine-checkout-in-workspace-menu', async ({
+    page,
+  }) => {
+    await installCodeMocks(page, { environments: [singleMachine(), secondMachine()] });
+    await openCodeChat(page);
+    await expect(chip(page, WORKSPACE)).toBeVisible();
+    await expect(chip(page, CHECKOUT)).toHaveCount(0);
+
+    let menu = await openChip(page, WORKSPACE);
+    const zima = menu.locator('[data-code-environment-id="env-zimacube"]');
+    const studio = menu.locator('[data-code-environment-id="env-studio"]');
+    for (const environment of [zima, studio]) {
+      await expect(environment.getByRole('menuitemradio', { name: /^Auto/ })).toBeVisible();
+      await expect(
+        environment.getByRole('menuitemradio', { name: /Isolated worktree/ }),
+      ).toBeVisible();
+      await expect(
+        environment.getByRole('menuitemradio', { name: /Registered checkout/ }),
+      ).toBeVisible();
+    }
+    /** Auto is the starting choice; pick another, then return to Auto. */
+    await expect(zima.getByRole('menuitemradio', { name: /^Auto/ })).toBeChecked();
+    await zima.getByRole('menuitemradio', { name: /Registered checkout/ }).click();
+    await closeMenuIfOpen(page);
+
+    menu = await openChip(page, WORKSPACE);
+    const zimaReopened = menu.locator('[data-code-environment-id="env-zimacube"]');
+    await expect(
+      zimaReopened.getByRole('menuitemradio', { name: /Registered checkout/ }),
+    ).toBeChecked();
+    await zimaReopened.getByRole('menuitemradio', { name: /^Auto/ }).click();
+    await closeMenuIfOpen(page);
+
+    menu = await openChip(page, WORKSPACE);
+    await expect(
+      menu
+        .locator('[data-code-environment-id="env-zimacube"]')
+        .getByRole('menuitemradio', { name: /^Auto/ }),
+    ).toBeChecked();
+    await expect(
+      menu
+        .locator('[data-code-environment-id="env-studio"]')
+        .getByRole('menuitemradio', { name: /^Auto/ }),
+    ).toBeChecked();
+  });
+
+  test('an open chip menu does not read as disabled @scenario:open-chip-menu-not-disabled', async ({
+    page,
+  }) => {
+    await installCodeMocks(page, { environments: [singleMachine()] });
+    await openCodeChat(page);
+
+    for (const selector of [CHECKOUT, APPROVAL]) {
+      const button = chip(page, selector);
+      await openChip(page, selector);
+      await expect(button).toHaveAttribute('aria-expanded', 'true');
+      await expect(button).not.toHaveAttribute('aria-disabled', 'true');
+      await expect
+        .poll(() => button.evaluate((element) => getComputedStyle(element).opacity))
+        .toBe('1');
+      await closeMenu(page);
+    }
+  });
+
+  test('the temporary composer is opaque over the rail @scenario:temporary-composer-is-opaque', async ({
+    page,
+  }) => {
+    await installCodeMocks(page, { environments: [singleMachine()] });
+    await openCodeChat(page);
+    const width = page.viewportSize()?.width ?? 0;
+    if (width >= 768) {
+      await page.getByRole('button', { name: 'Temporary Chat' }).click();
+    } else {
+      await page
+        .getByRole('button', { name: /more|options|menu/i })
+        .first()
+        .click();
+      await page.getByText('Temporary Chat', { exact: true }).click();
+    }
+
+    const surface = page.locator('.rounded-t-theme-surface-lg').first();
+    await expect(surface).toBeVisible();
+    await expect(chip(page, WORKSPACE)).toBeVisible();
+    await expect
+      .poll(() =>
+        surface.evaluate((element) => {
+          const computed = getComputedStyle(element);
+          return { color: computed.backgroundColor, image: computed.backgroundImage };
+        }),
+      )
+      .toEqual({
+        color: expect.stringMatching(/^(rgb\(|oklab\(|oklch\(|color\()(?!.*\/)/),
+        image: expect.stringMatching(/gradient/),
+      });
+    const alpha = await surface.evaluate((element) => {
+      const canvas = document.createElement('canvas');
+      canvas.width = 1;
+      canvas.height = 1;
+      const context = canvas.getContext('2d');
+      if (!context) {
+        return -1;
+      }
+      context.clearRect(0, 0, 1, 1);
+      context.fillStyle = getComputedStyle(element).backgroundColor;
+      context.fillRect(0, 0, 1, 1);
+      return context.getImageData(0, 0, 1, 1).data[3];
+    });
+    expect(alpha).toBe(255);
+
+    /** The mode is persisted locally; leave the account as the suite found it. */
+    await page.evaluate(() => localStorage.setItem('isTemporary', 'false'));
+  });
+});
+
+async function closeMenuIfOpen(page: Page) {
+  if (await openMenu(page).count()) {
+    await page.keyboard.press('Escape');
+  }
+  await expect(openMenu(page)).toHaveCount(0);
+}
diff --git a/e2e/specs/mock/scenarios/codeWorkspaceMocks.ts b/e2e/specs/mock/scenarios/codeWorkspaceMocks.ts
new file mode 100644
index 00000000000..d3caace0a70
--- /dev/null
+++ b/e2e/specs/mock/scenarios/codeWorkspaceMocks.ts
@@ -0,0 +1,338 @@
+import { expect } from '@playwright/test';
+import type { Page, Route } from '@playwright/test';
+
+/**
+ * Route mocks that stand in for a paired code worker. The composer's code
+ * rail (approval mode, workspace, checkout) only renders for an agent that
+ * runs stateful code sessions against an attached environment, so these specs
+ * serve that agent, its environments and their workspaces from `page.route`.
+ */
+
+export type MockWorkspace = {
+  id: string;
+  name: string;
+  repo?: string;
+  ref?: string;
+  /** Advertises `git_worktree` in `workspaceInstances`. */
+  worktree?: boolean;
+  instructionFile?: string;
+};
+
+export type MockEnvironment = {
+  id: string;
+  name: string;
+  workspaces: MockWorkspace[];
+  /** The workspace the environment's agent selects by default. */
+  defaultWorkspaceId: string;
+  allowCheckoutSelection?: boolean;
+};
+
+export type CodeMockOptions = {
+  /** The first environment belongs to the agent Lia, a second one to her subagent. */
+  environments: MockEnvironment[];
+  /** Serve an MCP server with two tools and give Lia both. */
+  mcp?: boolean;
+};
+
+export const LIA_ID = 'agent_liaMockAgent0000001';
+const SUBAGENT_ID = 'agent_zedMockAgent0000002';
+const MCP_SERVER = 'context7';
+
+const sha = (char: string) => char.repeat(64).slice(0, 64);
+const permission = { allowed: ['ask', 'allow'], default: 'ask' };
+
+export function workspace(
+  id: string,
+  options: Partial<Omit<MockWorkspace, 'id' | 'name'>> = {},
+): MockWorkspace {
+  return { id, name: id, ...options };
+}
+
+/** One machine with four workspaces, one of them carrying instruction metadata. */
+export function singleMachine(overrides: Partial<MockEnvironment> = {}): MockEnvironment {
+  return {
+    id: 'env-zimacube',
+    name: 'ZimaCube',
+    defaultWorkspaceId: 'librechat',
+    allowCheckoutSelection: true,
+    workspaces: [
+      workspace('primary', { instructionFile: 'AGENTS.md' }),
+      workspace('librechat', {
+        worktree: true,
+        repo: 'danny-avila/LibreChat',
+        ref: 'dev',
+        instructionFile: 'AGENTS.md',
+      }),
+      workspace('agents', { worktree: true, repo: 'LibreChat-AI/agents', ref: 'main' }),
+      workspace('librechat-ai', { worktree: true, repo: 'LibreChat-AI/librechat.ai', ref: 'main' }),
+    ],
+    ...overrides,
+  };
+}
+
+export function secondMachine(): MockEnvironment {
+  return {
+    id: 'env-studio',
+    name: 'Studio',
+    defaultWorkspaceId: 'docs',
+    allowCheckoutSelection: true,
+    workspaces: [
+      workspace('docs', { worktree: true, repo: 'LibreChat-AI/docs', ref: 'main' }),
+      workspace('notes'),
+    ],
+  };
+}
+
+const configSchema = (environment: MockEnvironment) => ({
+  permissions: { fileWrite: permission, commandExecution: permission },
+  workspaces: { allowCheckoutSelection: environment.allowCheckoutSelection === true },
+});
+
+const publicEnvironment = (environment: MockEnvironment, index: number) => ({
+  id: environment.id,
+  name: environment.name,
+  type: 'attached',
+  default: index === 0,
+  configSchema: configSchema(environment),
+  settings: {},
+});
+
+const status = (environment: MockEnvironment) => ({
+  environmentId: environment.id,
+  status: 'ready',
+  statefulWorkspace: true,
+  sandboxProfile: 'nsjail',
+  runtimes: ['node', 'python'],
+  operations: [
+    'read_file',
+    'search_text',
+    'list_files',
+    'write_file',
+    'preview_edit',
+    'edit_file',
+    'execute_command',
+  ],
+  workspaces: environment.workspaces.map((entry) => ({
+    id: entry.id,
+    name: entry.name,
+    ...(entry.worktree ? { workspaceInstances: ['git_worktree'] } : {}),
+    ...(entry.repo
+      ? {
+          environment: {
+            fingerprint: sha(entry.id.charAt(0) || 'a'),
+            repo: entry.repo,
+            ref: entry.ref,
+            actions: [],
+          },
+        }
+      : {}),
+    instructions: entry.instructionFile
+      ? [{ path: entry.instructionFile, bytes: 15258, sha256: sha('a'), truncated: false }]
+      : [],
+  })),
+});
+
+const mcpTools = [
+  {
+    name: 'resolve-library-id',
+    pluginKey: `resolve-library-id_mcp_${MCP_SERVER}`,
+    description: 'Resolve a library id',
+  },
+  {
+    name: 'query-docs',
+    pluginKey: `query-docs_mcp_${MCP_SERVER}`,
+    description: 'Query library docs',
+  },
+];
+
+function agentRecord(
+  id: string,
+  name: string,
+  environment: MockEnvironment,
+  extra: Record<string, unknown>,
+) {
+  return {
+    id,
+    name,
+    description: 'Coding agent',
+    provider: 'openAI',
+    model: 'gpt-5',
+    instructions: `You are ${name}.`,
+    author: 'mock',
+    category: 'general',
+    tools: ['execute_code'],
+    tool_options: {},
+    model_parameters: {},
+    agent_ids: [],
+    edges: [],
+    stateful_code_sessions: true,
+    code_environment_id: environment.id,
+    code_workspace_id: environment.defaultWorkspaceId,
+    isCollaborative: false,
+    version: 1,
+    projectIds: [],
+    createdAt: '2026-10-01T00:00:00.000Z',
+    updatedAt: '2026-10-05T00:00:00.000Z',
+    _id: id
+      .replace(/[^a-f0-9]/g, 'a')
+      .padEnd(24, 'a')
+      .slice(0, 24),
+    permissions: 15,
+    support_contact: { name: '', email: '' },
+    ...extra,
+  };
+}
+
+const json = (route: Route, body: unknown) =>
+  route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(body) });
+
+type JsonRecord = Record<string, unknown>;
+
+async function fetchRecord(route: Route): Promise<JsonRecord> {
+  const response = await route.fetch();
+  return (await response.json()) as JsonRecord;
+}
+
+/** Install every mock a coding agent needs; call before the first navigation. */
+export async function installCodeMocks(page: Page, options: CodeMockOptions): Promise<void> {
+  const { environments, mcp = false } = options;
+  const [first, second] = environments;
+  const agents: JsonRecord[] = [
+    agentRecord(LIA_ID, 'Lia', first, {
+      tools: mcp
+        ? ['execute_code', ...mcpTools.map(({ pluginKey }) => pluginKey)]
+        : ['execute_code'],
+      agent_ids: second ? [SUBAGENT_ID] : [],
+    }),
+  ];
+  if (second) {
+    agents.push(agentRecord(SUBAGENT_ID, 'Zed', second, {}));
+  }
+  const byId = new Map(agents.map((agent) => [agent.id as string, agent]));
+
+  await page.route('**/api/config', async (route) => {
+    const body = await fetchRecord(route);
+    Object.assign(body, {
+      codeEnvironmentDecisionVersion: 1,
+      codeEnvironmentMoveVersion: 1,
+      codeEnvironmentTransitionVersion: 2,
+      codeWorkspaceRecoveryVersion: 1,
+      codeWorkspaceInheritanceVersion: 1,
+    });
+    await json(route, body);
+  });
+
+  await page.route('**/api/endpoints', async (route) => {
+    const body = await fetchRecord(route);
+    const current = (body.agents ?? {}) as JsonRecord;
+    const capabilities = new Set([
+      ...((current.capabilities as string[] | undefined) ?? []),
+      'execute_code',
+      'stateful_code_sessions',
+      'tools',
+    ]);
+    body.agents = {
+      ...current,
+      order: current.order ?? 0,
+      type: 'agents',
+      capabilities: [...capabilities],
+      statefulCodeSessions: {
+        allowedEnvironments: ['managed', 'attached'],
+        environments: environments.map(publicEnvironment),
+        approvalsEnabled: true,
+        approvalModes: ['ask', 'acceptEdits', 'fullAccess'],
+        allowEnvironmentSelection: false,
+      },
+    };
+    await json(route, body);
+  });
+
+  await page.route(/\/api\/agents(\?[^/]*)?$/, async (route) => {
+    if (route.request().method() !== 'GET') {
+      await route.continue();
+      return;
+    }
+    const body = await fetchRecord(route);
+    if (!route.request().url().includes('cursor=')) {
+      const existing = (body.data as JsonRecord[] | undefined) ?? [];
+      body.data = [...agents, ...existing.filter((entry) => !byId.has(entry.id as string))];
+    }
+    await json(route, body);
+  });
+
+  await page.route(
+    /\/api\/agents\/agent_(lia|zed)MockAgent\d+(\/[a-z]+)?(\?.*)?$/,
+    async (route) => {
+      const url = new URL(route.request().url());
+      const id = url.pathname.split('/')[3];
+      const agent = byId.get(id);
+      const isRead = route.request().method() === 'GET';
+      const suffix = url.pathname.split('/')[4];
+      if (!agent || !isRead || (suffix && !['expanded', 'versions'].includes(suffix))) {
+        await route.continue();
+        return;
+      }
+      await json(route, agent);
+    },
+  );
+
+  await page.route('**/api/code-environments', (route) =>
+    json(route, {
+      environments: environments.map((environment, index) => ({
+        resourceId: `res${index}`,
+        ...publicEnvironment(environment, index),
+        canEdit: true,
+        canDelete: true,
+      })),
+      controlPlanes: [],
+    }),
+  );
+  for (const environment of environments) {
+    await page.route(`**/api/code-environments/${environment.id}/status`, (route) =>
+      json(route, status(environment)),
+    );
+  }
+
+  if (!mcp) {
+    return;
+  }
+  await page.route('**/api/mcp/tools', async (route) => {
+    const body = await fetchRecord(route);
+    body.servers = {
+      ...((body.servers as JsonRecord | undefined) ?? {}),
+      [MCP_SERVER]: {
+        name: MCP_SERVER,
+        icon: '',
+        authenticated: true,
+        authConfig: [],
+        tools: mcpTools,
+      },
+    };
+    await json(route, body);
+  });
+  await page.route('**/api/mcp/servers', async (route) => {
+    const body = await fetchRecord(route);
+    const entry = {
+      serverName: MCP_SERVER,
+      _id: 'bbbbbbbbbbbbbbbbbbbbbbbb',
+      dbId: 'bbbbbbbbbbbbbbbbbbbbbbbb',
+      config: { type: 'streamable-http', url: 'https://mcp.context7.com/mcp', title: MCP_SERVER },
+      url: 'https://mcp.context7.com/mcp',
+      type: 'streamable-http',
+      title: MCP_SERVER,
+      name: MCP_SERVER,
+    };
+    if (Array.isArray(body)) {
+      body.push(entry);
+    } else {
+      ((body.servers as JsonRecord | undefined) ?? body)[MCP_SERVER] = entry;
+    }
+    await json(route, body);
+  });
+}
+
+/** Open a new chat with the mocked coding agent selected and the code rail rendered. */
+export async function openCodeChat(page: Page): Promise<void> {
+  await page.goto(`/c/new?endpoint=agents&agent_id=${LIA_ID}`, { timeout: 15000 });
+  await expect(page.getByTestId('composer-context-rail')).toBeVisible({ timeout: 30000 });
+}
diff --git a/e2e/specs/mock/scenarios/project-rows-spaced.spec.ts b/e2e/specs/mock/scenarios/project-rows-spaced.spec.ts
new file mode 100644
index 00000000000..eb2800fd346
--- /dev/null
+++ b/e2e/specs/mock/scenarios/project-rows-spaced.spec.ts
@@ -0,0 +1,80 @@
+import { expect, test } from '@playwright/test';
+import type { Page } from '@playwright/test';
+import { getAccessToken } from '../helpers';
+
+const ROW_GAP = 4;
+
+type ProjectApi = { _id: string; name: string };
+
+async function apiProject(
+  page: Page,
+  token: string,
+  method: 'POST' | 'DELETE',
+  target: { name: string } | { id: string },
+): Promise<ProjectApi | null> {
+  return page.evaluate(
+    async ({ token: bearer, method: verb, target: body }) => {
+      const url = 'id' in body ? `/api/projects/${encodeURIComponent(body.id)}` : '/api/projects';
+      const response = await fetch(url, {
+        method: verb,
+        headers: { Authorization: `Bearer ${bearer}`, 'Content-Type': 'application/json' },
+        body: 'id' in body ? undefined : JSON.stringify(body),
+      });
+      if (!response.ok) {
+        throw new Error(`${verb} ${url} returned ${response.status}`);
+      }
+      const text = await response.text();
+      return text ? (JSON.parse(text) as ProjectApi) : null;
+    },
+    { token, method, target },
+  );
+}
+
+test.describe('sidebar projects', () => {
+  test('consecutive project rows are separated by a small gap @scenario:project-rows-spaced', async ({
+    page,
+  }) => {
+    test.setTimeout(90000);
+    await page.goto('/c/new', { timeout: 15000 });
+    const token = await getAccessToken(page);
+    const stamp = `${Date.now()}-${Math.floor(Math.random() * 1e4)}`;
+    const names = [`E2E Spaced A ${stamp}`, `E2E Spaced B ${stamp}`];
+    const created: ProjectApi[] = [];
+    try {
+      for (const name of names) {
+        const project = await apiProject(page, token, 'POST', { name });
+        expect(project?._id).toBeTruthy();
+        created.push(project as ProjectApi);
+      }
+      await page.reload();
+
+      if ((page.viewportSize()?.width ?? 0) <= 768) {
+        await page.getByRole('button', { name: 'Open sidebar' }).click();
+      }
+      const toggle = page.getByRole('button', { name: 'Projects', exact: true });
+      await expect(toggle).toBeVisible();
+      if ((await toggle.getAttribute('aria-expanded')) !== 'true') {
+        await toggle.click();
+      }
+      await expect(toggle).toHaveAttribute('aria-expanded', 'true');
+
+      const first = page.locator(`li:has(button:has-text("${names[0]}"))`).last();
+      const second = page.locator(`li:has(button:has-text("${names[1]}"))`).last();
+      await expect(first).toBeVisible();
+      await expect(second).toBeVisible();
+
+      const boxes = await Promise.all([first.boundingBox(), second.boundingBox()]);
+      const [a, b] = boxes;
+      expect(a).not.toBeNull();
+      expect(b).not.toBeNull();
+      /** Newest first, so the second-created project sits above the first. */
+      const [upper, lower] = (a?.y ?? 0) < (b?.y ?? 0) ? [a, b] : [b, a];
+      const gap = (lower?.y ?? 0) - ((upper?.y ?? 0) + (upper?.height ?? 0));
+      expect(Math.abs(gap - ROW_GAP)).toBeLessThanOrEqual(1);
+    } finally {
+      for (const project of created) {
+        await apiProject(page, token, 'DELETE', { id: project._id }).catch(() => undefined);
+      }
+    }
+  });
+});
diff --git a/e2e/specs/mock/scenarios/thought-peek-tools.spec.ts b/e2e/specs/mock/scenarios/thought-peek-tools.spec.ts
new file mode 100644
index 00000000000..312ca6ce0ae
--- /dev/null
+++ b/e2e/specs/mock/scenarios/thought-peek-tools.spec.ts
@@ -0,0 +1,81 @@
+import { expect, test } from '@playwright/test';
+import type { Page } from '@playwright/test';
+import { NEW_CHAT_PATH, messagesView, selectMockEndpoint, sendMessage } from '../helpers';
+
+const ENDPOINT = { label: 'Mock Provider F', model: 'mock-model-f' };
+const MCP_SERVER_TITLE = 'E2E Memory';
+const uniqueLabel = () => `peek-${Date.now()}-${Math.floor(Math.random() * 1e4)}`;
+
+async function enableMemoryServer(page: Page) {
+  await page.getByRole('button', { name: 'Attach and tools' }).click();
+  const item = page
+    .getByRole('dialog', { name: 'Attach and tools' })
+    .getByRole('button', { name: new RegExp(`^${MCP_SERVER_TITLE}\\b`) });
+  await expect(item).toBeVisible();
+  await item.click();
+  await expect(item).toHaveAttribute('aria-pressed', 'true');
+  await page.keyboard.press('Escape');
+  await expect(page.getByRole('listitem', { name: MCP_SERVER_TITLE, exact: true })).toBeVisible();
+}
+
+/** Sample the peek until the final text lands; report whether it was ever visible. */
+async function peekSamples(page: Page, finalText: string) {
+  const peek = messagesView(page).getByTestId('streaming-thought-peek');
+  const final = messagesView(page).getByText(finalText);
+  const samples = { total: 0, visible: 0 };
+  for (let index = 0; index < 300; index += 1) {
+    if (await final.isVisible().catch(() => false)) {
+      break;
+    }
+    samples.total += 1;
+    if (await peek.isVisible().catch(() => false)) {
+      samples.visible += 1;
+    }
+    await page.waitForTimeout(100);
+  }
+  return samples;
+}
+
+test.describe('streaming thought peek', () => {
+  test('the peek shows only while pure reasoning streams @scenario:thought-peek-only-while-thinking', async ({
+    page,
+  }) => {
+    test.setTimeout(180000);
+
+    /** Pure reasoning: the peek sits under the collapsed card. */
+    const reasoning = uniqueLabel();
+    await page.goto(NEW_CHAT_PATH, { timeout: 10000 });
+    await selectMockEndpoint(page, ENDPOINT);
+    const first = await sendMessage(page, `E2E_SLOW_THINK_REPLY:${reasoning}`);
+    expect(first.ok()).toBeTruthy();
+    const pure = await peekSamples(page, `E2E slow think reply done ${reasoning}`);
+    expect(pure.visible, 'peek during pure reasoning').toBeGreaterThan(0);
+    await expect(
+      messagesView(page).getByText(`E2E slow think reply done ${reasoning}`),
+    ).toBeVisible({ timeout: 60000 });
+
+    /** A thought that streams after a tool call never shows the peek. */
+    const afterTool = uniqueLabel();
+    await page.goto(NEW_CHAT_PATH, { timeout: 10000 });
+    /** The endpoint choice persists across new chats on some viewports only. */
+    const trigger = page.getByRole('button', { name: 'Select a model' }).first();
+    await expect(trigger).toBeVisible();
+    if (!(await trigger.textContent())?.includes(ENDPOINT.model)) {
+      await selectMockEndpoint(page, ENDPOINT);
+    }
+    await enableMemoryServer(page);
+    const second = await sendMessage(page, `E2E_TOOL_THEN_THINK_REPLY:${afterTool}`);
+    expect(second.ok()).toBeTruthy();
+    const finalText = `E2E tool then think reply done ${afterTool}`;
+    const toolRun = await peekSamples(page, finalText);
+    expect(toolRun.total, 'sampled while streaming').toBeGreaterThan(5);
+    expect(toolRun.visible, 'peek after a tool call').toBe(0);
+    await expect(messagesView(page).getByText(finalText)).toBeVisible({ timeout: 60000 });
+    /** The run really was a tool call followed by a thought, not a bare reply. */
+    await expect(
+      messagesView(page)
+        .getByRole('button', { name: /Thoughts|Thinking|remember|Memory/i })
+        .first(),
+    ).toBeVisible();
+  });
+});