feat(automations): align layout with Codex

apps/desktop/src/renderer/src/__tests__/pane-transition.test.ts

@@ -1,5 +1,5 @@
-import type { SplitTransitionState } from '@renderer/shell/layout/pane-transition';
-import { reconcileTransition, settleTransition } from '@renderer/shell/layout/pane-transition';
+import type { SplitTransitionState } from '@linkcode/ui';
+import { reconcileTransition, settleTransition } from '@linkcode/ui';
 import { describe, expect, it } from 'vitest';
 
 function transition(overrides?: Partial<SplitTransitionState>): SplitTransitionState {

apps/desktop/src/renderer/src/app.tsx

@@ -13,7 +13,6 @@ import {
 import { useEffect } from 'foxact/use-abortable-effect';
 import { useState } from 'react';
 import useSWRImmutable from 'swr/immutable';
-import { DesktopAutomationsView } from './automations/automations-view';
 import { cloudDataBridge } from './cloud-auth/bridges';
 import { desktopDaemonConnectionSource } from './daemon-connection-source';
 import { systemBridge } from './ipc';
@@ -32,7 +31,6 @@ const cloudImSource = cloudDataBridge.im;
 export function DesktopApp(): React.ReactNode {
   const localeOverride = useDesktopSettingsStore((state) => state.localeOverride);
   const settingsOpen = useNavigationHistoryStore((state) => state.overlay === 'settings');
-  const automationsOpen = useNavigationHistoryStore((state) => state.overlay === 'automations');
 
   return (
     <WorkbenchAppProviders locale={localeOverride}>
@@ -49,8 +47,6 @@ export function DesktopApp(): React.ReactNode {
             <OverlayUnderlay>
               <Workbench shellComponent={DesktopWorkbenchShell} />
             </OverlayUnderlay>
-            {/* Gated: Automations lists schedules over the data plane, so it mounts inside the gate. */}
-            {automationsOpen ? <DesktopAutomationsView /> : null}
           </WorkbenchProviders>
           {/* Window controls live above the connection gate and the settings overlay so Windows/Linux
               can always minimize/maximize/close — including while the daemon is connecting or down. */}
@@ -62,12 +58,11 @@ export function DesktopApp(): React.ReactNode {
 }
 
 /**
- * Hides (never unmounts) the workbench-side layer while a full-page overlay (Settings, Automations)
- * covers it: both shells are translucent over the native backdrop, so painted pixels underneath
- * ghost through the overlay. `visibility` keeps layout/PTY state intact; `inert` blocks focus.
+ * Hides (never unmounts) the workbench-side layer while Settings covers it. Automations stays
+ * inside the shell so its app sidebar remains visible.
  */
 function OverlayUnderlay({ children }: React.PropsWithChildren): React.ReactNode {
-  const overlayOpen = useNavigationHistoryStore((state) => state.overlay !== null);
+  const overlayOpen = useNavigationHistoryStore((state) => state.overlay === 'settings');
   return (
     <div className={overlayOpen ? 'invisible h-full' : 'h-full'} inert={overlayOpen}>
       {children}

apps/desktop/src/renderer/src/index.css

@@ -127,7 +127,7 @@
  * subtree every frame.) DesktopShell sets one axis-specific animation attribute only while
  * that axis is in flight, so sash drags and resting window resizes keep tracking live.
  * Row and column durations are independent so a bottom toggle cannot animate unrelated chrome
- * geometry. Keep duration/bezier in sync with SHELL_TRANSITION in pane-transition.ts.
+ * geometry. Keep duration/bezier in sync with @linkcode/ui's SHELL_TRANSITION.
  */
 .linkcode-desktop-shell[data-shell-horizontal-animating] {
   --lc-shell-horizontal-duration: 300ms;

apps/desktop/src/renderer/src/shell/desktop-shell.tsx

@@ -10,6 +10,7 @@ import {
   SessionSidebar,
   SessionTitleMenu,
   useKeyboardShortcutLabel,
+  usePaneTransition,
 } from '@linkcode/ui';
 import {
   getChromeSurface,
@@ -19,6 +20,7 @@ import {
 import type { WorkbenchShellProps } from '@linkcode/workbench';
 import {
   AttachedTerminalPanel,
+  AutomationsView,
   getResourcesPanelPresentation,
   isAbsoluteFilePath,
   locateFileArtifact,
@@ -29,6 +31,7 @@ import {
   TerminalPanel,
   useBrowserHostRegistration,
   useCloudHosts,
+  useNavigationHistoryStore,
   useResourcesPanelStore,
   useSelectedHostStore,
   WorkspaceServicesMenu,
@@ -50,7 +53,6 @@ import { BrowserWebviewPane } from './browser/browser-webview-pane';
 import { DesktopChrome } from './chrome/chrome';
 import { DiffStatChip } from './chrome/diff-stat-chip';
 import { DESKTOP_CHROME_SPACER_CLASS } from './chrome/metrics';
-import { usePaneTransition } from './layout/pane-transition';
 import { DesktopPanelRegion } from './layout/panel-region';
 import { DesktopRightPanelRegion } from './layout/right-panel-region';
 import type { DesktopShellStyle } from './layout/shell-style';
@@ -172,6 +174,7 @@ export function DesktopShell({
     })),
   );
   const cloudAuth = useCloudAccount();
+  const automationsOpen = useNavigationHistoryStore((state) => state.overlay === 'automations');
   const resourcesOpen = useResourcesPanelStore((state) => state.open);
   const setResourcesOpen = useResourcesPanelStore((state) => state.setOpen);
   const toggleResources = useResourcesPanelStore((state) => state.toggle);
@@ -297,13 +300,15 @@ export function DesktopShell({
 
   const active = activeSession;
   const activeSessionId = active?.sessionId ?? null;
-  const resourcesAvailable = draft === null && active !== null && resourcesPanel !== undefined;
+  const resourcesAvailable =
+    !automationsOpen && draft === null && active !== null && resourcesPanel !== undefined;
   const resourcesPresentation = getResourcesPanelPresentation({
     available: resourcesAvailable,
     floatingSpaceAvailable,
     rightPanelOpen: rightPanel.open,
   });
-  const resourcesFloatingOpen = resourcesPresentation === 'floating' && resourcesOpen;
+  const resourcesFloatingOpen =
+    !automationsOpen && resourcesPresentation === 'floating' && resourcesOpen;
   const resourcesSurfaceOpen =
     (resourcesPresentation !== 'hidden' && resourcesOpen) ||
     (rightPanel.open && rightPanel.activeSection === 'resources');
@@ -750,6 +755,16 @@ export function DesktopShell({
         <div className="grid h-full min-h-0 grid-cols-[minmax(0,1fr)_auto] overflow-hidden">
           <DesktopWorkspace
             main={main}
+            workspaceOverlay={
+              automationsOpen ? (
+                <div className="flex h-full min-h-0 flex-col bg-background">
+                  <div aria-hidden className={`${DESKTOP_CHROME_SPACER_CLASS} shrink-0`} />
+                  <div className="min-h-0 flex-1">
+                    <AutomationsView onOpenSession={onSelectSession} />
+                  </div>
+                </div>
+              ) : undefined
+            }
             right={workspaceRight}
             bottom={workspaceBottom}
             expandedPanel={expandedPanel}
@@ -795,6 +810,7 @@ export function DesktopShell({
                   onPickDirectory={pickDirectory}
                   onOpenSearch={onOpenSearch}
                   onOpenAutomations={onOpenAutomations}
+                  automationsActive={automationsOpen}
                   searchShortcut={searchShortcut}
                   onRegisterWorkspace={onRegisterWorkspace}
                   onImportHistory={onImportHistory}

apps/desktop/src/renderer/src/shell/layout/workspace.tsx

@@ -1,3 +1,4 @@
+import type { PaneTransition } from '@linkcode/ui';
 import { cn } from '@linkcode/ui';
 import type { LayoutState, PanelSide } from '@renderer/shell/store/model';
 import {
@@ -11,7 +12,6 @@ import {
   SIDEBAR_MIN_SIZE,
 } from '@renderer/shell/store/model';
 import { useTranslations } from 'use-intl';
-import type { PaneTransition } from './pane-transition';
 import { Sash } from './sash';
 
 /** One dockable side of the workspace: its transition plus the docked and maximized-overlay nodes. */
@@ -44,6 +44,7 @@ const PANE_ID = {
 export function DesktopWorkspace({
   sidebar,
   main,
+  workspaceOverlay,
   right,
   bottom,
   expandedPanel,
@@ -55,6 +56,8 @@ export function DesktopWorkspace({
 }: {
   sidebar: WorkspaceSidebar;
   main: React.ReactNode;
+  /** Covers every workspace pane except the persistent app sidebar. */
+  workspaceOverlay?: React.ReactNode;
   right: WorkspaceSide;
   bottom: WorkspaceSide;
   expandedPanel: PanelSide | null;
@@ -66,11 +69,12 @@ export function DesktopWorkspace({
   onBottomResize: (size: number) => void;
 }): React.ReactNode {
   const tPanel = useTranslations('workbench.panel');
+  const workspaceOverlayOpen = workspaceOverlay !== undefined;
   const rowOverlayPanel = getExpandedPanelForTarget(expandedPanel, 'editor-row');
   const workbenchOverlayPanel = getExpandedPanelForTarget(expandedPanel, 'workbench');
   // Expanded panels render as direct overlays. Docked panels stay mounted so
   // they keep owning chrome portals and panel state.
-  const dockedInert = workbenchOverlayPanel !== null;
+  const dockedInert = workbenchOverlayPanel !== null || workspaceOverlayOpen;
   const editorInert = rowOverlayPanel !== null || dockedInert;
 
   const anyAnimating =
@@ -290,6 +294,11 @@ export function DesktopWorkspace({
           {workbenchOverlayPanel === 'right' ? right.expandedNode : bottom.expandedNode}
         </ExpandedPanelOverlay>
       )}
+      {workspaceOverlayOpen ? (
+        <div className="z-40 col-end-4 col-start-2 row-span-2 row-start-1 min-h-0 min-w-0 overflow-hidden bg-background">
+          {workspaceOverlay}
+        </div>
+      ) : null}
     </div>
   );
 }

apps/webview/src/router.tsx

@@ -1,4 +1,3 @@
-import { AutomationsRoute } from '@webview/routes/automations';
 import { RootLayout } from '@webview/routes/root-layout';
 import { AgentsSettings } from '@webview/routes/settings/agents';
 import { AppearanceSettings } from '@webview/routes/settings/appearance';
@@ -22,8 +21,10 @@ export function createWebviewRouter(
     {
       element: <RootLayout />,
       children: [
-        { index: true, element: <WorkbenchRoute /> },
-        { path: 'automations', element: <AutomationsRoute /> },
+        {
+          element: <WorkbenchRoute />,
+          children: [{ index: true }, { path: 'automations' }],
+        },
         {
           path: 'settings',
           element: <SettingsLayout />,

apps/webview/src/routes/workbench-route.tsx

@@ -2,15 +2,19 @@ import { useCommandPaletteStore, Workbench } from '@linkcode/workbench';
 import { usePageTitle } from '@webview/hooks/use-page-title';
 import { WebWorkbenchShell } from '@webview/shell/web-workbench-shell';
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router';
+import { useLocation, useNavigate } from 'react-router';
 import { useTranslations } from 'use-intl';
 
 /** Index route: the workbench surface (session / conversation / composer). */
 export function WorkbenchRoute(): React.ReactNode {
   const navigate = useNavigate();
+  const location = useLocation();
   const t = useTranslations('workbench.palette');
   const tWorkbench = useTranslations('workbench');
-  usePageTitle(tWorkbench('pageTitle'));
+  const tAutomations = useTranslations('workbench.automations');
+  usePageTitle(
+    location.pathname === '/automations' ? tAutomations('pageTitle') : tWorkbench('pageTitle'),
+  );
   useEffect(() => {
     const { registerCommands, unregisterCommands } = useCommandPaletteStore.getState();
     registerCommands('webview', [