@kabmo-labs/kabmo 0.3.1 → 0.5.0

package/src/client/components/layout/LeftDock.tsx

@@ -0,0 +1,119 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The left dock's view stack: the view on screen, plus the ones kept mounted.
+ *
+ * The left column used to be the session sidebar and nothing else. It is a DOCK
+ * now, exactly like the right column: a stack of views with one on screen.
+ *
+ * Two rules are load-bearing, and each is a bug if dropped:
+ *
+ * - **A view is never responsible for the column's furniture.** The Settings ·
+ *   About strip, the update popup and the About modal belong to the COLUMN
+ *   (`LeftColumn`), not to this stack: a plugin panel on the same dock must not
+ *   take away the only visible way into Settings. That is also what lets the
+ *   strip span the rail and the body together, which is where it belongs.
+ * - **The session list stays MOUNTED while another view is on screen**, hidden
+ *   with CSS, the way the right stack keeps its views: its folder expansion,
+ *   scroll position and batch selection must survive a look at another view. A
+ *   plugin panel is mounted only while it is the active one — a hidden plugin is
+ *   a component nobody is looking at.
+ */
+
+import { Suspense } from 'preact/compat';
+import type { ReactNode } from 'preact/compat';
+import { PluginPanelBody } from '@/client/components/workspace/plugin-panel/resolve';
+import { usePanelCatalog } from '@/client/components/workspace/plugin-panel/catalog';
+import type { PanelBodyProps } from '@/client/components/workspace/panels/builtin';
+import { PanelHostProvider } from '@kabmo-labs/kabmo-ui';
+import type { AgentStreamStatus } from '@/shared/lib/chat/omp/status';
+
+interface LeftDockViewProps {
+  className?: string;
+  /** The view on screen. A stored id naming a vanished panel falls back. */
+  activeView: string;
+  onClose?: () => void;
+  appSettings?: Record<string, any>;
+  streamStatus?: AgentStreamStatus;
+  refreshKey?: number;
+  onRefresh?: () => void;
+  onOpenFile?: (file: unknown) => void;
+}
+
+/**
+ * The views are `lazy()` (the session list is its own chunk), so the stack needs
+ * a boundary of its own: Preact THROWS the pending promise out of the tree when
+ * a lazy child suspends with no `<Suspense>` above it, which is a blank page
+ * rather than a loading state — measured with the whole app failing to mount.
+ */
+function DockSuspense({ children }: { children: ReactNode }) {
+  return (
+    <Suspense
+      fallback={
+        <div className="h-full flex items-center justify-center text-ink/40">
+          <span className="text-xs font-mono">Loading…</span>
+        </div>
+      }
+    >
+      {children}
+    </Suspense>
+  );
+}
+
+export function LeftDockView({
+  className = '',
+  activeView,
+  onClose,
+  appSettings = {},
+  streamStatus,
+  refreshKey = 0,
+  onRefresh,
+  onOpenFile,
+}: LeftDockViewProps) {
+  const catalog = usePanelCatalog('left');
+  const active = catalog.find((panel) => panel.id === activeView);
+
+  const body: PanelBodyProps = {
+    className: 'w-full h-full',
+    enabled: true,
+    active: true,
+    refreshKey,
+    ...(onRefresh ? { onRefresh } : {}),
+    ...(onOpenFile ? { onOpenFile } : {}),
+    ...(onClose ? { onClose } : {}),
+    appSettings,
+    ...(streamStatus ? { streamStatus } : {}),
+  };
+
+  return (
+    <DockSuspense>
+      {/* `aside`, not a `div`: this IS the sidebar landmark — the session list
+          lives here — and the browser specs address it as one (`aside` scopes a
+          query to the sidebar rather than to the whole page). The dock body was
+          a `div` for one revision and two specs went red on it. */}
+      <aside className={`relative h-full ${className}`}>
+        {catalog.map((panel) => {
+          const isActive = panel.id === activeView;
+          if (!panel.builtin && !isActive) return null;
+          const viewBody: PanelBodyProps = { ...body, active: isActive, enabled: isActive };
+          return (
+            <div key={panel.id} className={isActive ? 'w-full h-full' : 'hidden'}>
+              <PanelHostProvider value={viewBody}>{panel.render(viewBody)}</PanelHostProvider>
+            </div>
+          );
+        })}
+        {/* The selection names a panel that is switched off, uninstalled, or
+            whose bundle has not loaded — a notice, never a blank column. The
+            session list is always drawable, so it is never this case. */}
+        {!active ? (
+          <div className="w-full h-full">
+            <PluginPanelBody panelKey={activeView} />
+          </div>
+        ) : null}
+      </aside>
+    </DockSuspense>
+  );
+}

package/src/client/components/layout/desktop-layout/LeftColumn.tsx

@@ -0,0 +1,172 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The desktop's left column: the optional rail, the dock, its furniture, and
+ * its separator.
+ *
+ * Split out of `DesktopLayout` because the column has four parts that answer
+ * four different questions — whether the rail is drawn (a global preference),
+ * which view is on screen (per session), how wide the column is (per view), and
+ * what belongs to the COLUMN rather than to a view — and the layout component is
+ * where the group's own width arithmetic lives.
+ *
+ * Four rules are load-bearing, and each was a defect first:
+ *
+ * - **The rail is INSIDE the column's panel**, not a sibling of it. It used to
+ *   be a sibling, which made it a panel of its own: the group's width arithmetic
+ *   had to budget for a third fixed panel, and — the bug that was reported — the
+ *   footer could only be as wide as the dock BODY, so turning the rail on left a
+ *   strip under the rail with nothing in it.
+ * - **The rail sits BETWEEN the title row and the footer**, never above them.
+ *   The column reads top-to-bottom as title · (rail | view) · strip, so the rail
+ *   cannot run up into the app's titlebar and cannot outlive the strip.
+ * - **The footer spans the whole column.** Settings · About act on Kabmo, not on
+ *   the view above them, so a plugin panel on the dock must not take them away
+ *   and the strip must not shrink to one view's width.
+ * - **The rail exists only while the user turned it on** (`left-dock.ts`). Off —
+ *   the default — means no rail and the column is the session list as it always
+ *   was.
+ * - **The column's body is always mounted** (the panel collapses to zero width),
+ *   so the session list's expansion, scroll and batch selection survive a
+ *   collapse and the width transition has something to animate.
+ */
+
+import { useState } from 'preact/hooks';
+import type { RefObject } from 'preact';
+import { Panel, type PanelImperativeHandle } from '@/client/components/layout/desktop-layout/resizer';
+import { ActivityBar } from '@/client/components/layout/ActivityBar';
+import { LeftDockView } from '@/client/components/layout/LeftDock';
+import { ResizeHandle } from '@/client/components/layout/desktop-layout/ResizeHandle';
+import { AboutModal } from '@/client/components/layout/session-sidebar/about-modal';
+import { UpdatePopup } from '@/client/components/layout/update-popup';
+import { SettingsModal } from '@/client/components/settings/LazyModal';
+import { SessionSidebarFooter } from '@/client/components/layout/session-sidebar/Footer';
+import { SessionSidebarHeader } from '@/client/components/layout/session-sidebar/Header';
+import { ToastStack } from '@/client/components/common/ToastStack';
+import { useAndroidDownload } from '@/client/hooks/ui/updates/android-download';
+import { useKabmoEvent } from '@/client/hooks/ui/window-event';
+import { useToasts } from '@/client/hooks/ui/toasts';
+import { useUpdates } from '@/client/hooks/ui/updates';
+import { UPDATE_REQUEST_EVENT } from '@/shared/lib/updates/popup-state';
+import { MAX_LEFT_PANEL_WIDTH } from '@/shared/lib/workspace/sidebar-width';
+import type { AgentStreamStatus } from '@/shared/lib/chat/omp/status';
+
+interface LeftColumnProps {
+  panelRef: RefObject<PanelImperativeHandle | null>;
+  open: boolean;
+  /** Draw the rail. A global preference, off by default. */
+  railEnabled: boolean;
+  /** The view the dock actually shows, after resolving the stored selection. */
+  view: string;
+  onSelectView: (view: string) => void;
+  onCollapse: () => void;
+  width: number;
+  minWidth: number;
+  hasActiveContext: boolean;
+  activeProjectPath?: string | null;
+  appSettings?: Record<string, any>;
+  streamStatus?: AgentStreamStatus;
+  refreshKey: number;
+  onRefresh: () => void;
+  onOpenFile: (file: unknown) => void;
+}
+
+export function LeftColumn({
+  panelRef,
+  open,
+  railEnabled,
+  view,
+  onSelectView,
+  onCollapse,
+  width,
+  minWidth,
+  hasActiveContext,
+  activeProjectPath,
+  appSettings = {},
+  streamStatus,
+  refreshKey,
+  onRefresh,
+  onOpenFile,
+}: LeftColumnProps) {
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [infoOpen, setInfoOpen] = useState(false);
+  const updates = useUpdates();
+  const { toasts, pushToast, dismissToast } = useToasts();
+  const androidDownload = useAndroidDownload(
+    window.__OMP_BOOTSTRAP__?.shellVersion,
+    window.__OMP_BOOTSTRAP__?.isAndroid,
+  );
+
+  // The update popup's "Update now" hands the run to the About modal, which owns
+  // the live output. The column owns both, so a view switch cannot lose them.
+  useKabmoEvent(UPDATE_REQUEST_EVENT, () => {
+    setInfoOpen(true);
+    void updates.apply('kabmo').then((result) => {
+      if (!result) return;
+      pushToast(result.message, result.success && !result.manual ? 'success' : 'error');
+    });
+  });
+
+  return (
+    <>
+      <Panel
+        panelRef={panelRef}
+        id="left-panel"
+        defaultSize={width}
+        minSize={minWidth}
+        maxSize={MAX_LEFT_PANEL_WIDTH}
+        collapsed={!open}
+      >
+        {/* The column is three ROWS, and the order is what makes it read as one
+            column: a title row across the whole width, then the rail beside the
+            view, then the strip across the whole width again. The rail must not
+            start above the title — it would run under the app's own titlebar —
+            and the strip must not stop at the view's edge. */}
+        <div className="flex flex-col h-full w-full bg-paper">
+          <SessionSidebarHeader streamStatus={streamStatus} onCollapse={onCollapse} />
+          <div className="flex flex-1 min-h-0 w-full">
+            {railEnabled ? (
+              <ActivityBar
+                side="left"
+                activePanel={view}
+                onChangePanel={onSelectView}
+                isPanelOpen={open}
+                hasActiveContext={hasActiveContext}
+                activeProjectPath={activeProjectPath}
+              />
+            ) : null}
+            <LeftDockView
+              className="flex-1 min-w-0 h-full"
+              activeView={view}
+              onClose={onCollapse}
+              appSettings={appSettings}
+              refreshKey={refreshKey}
+              onRefresh={onRefresh}
+              onOpenFile={onOpenFile}
+            />
+          </div>
+          <SessionSidebarFooter
+            onSettings={() => setSettingsOpen(true)}
+            onInfo={() => setInfoOpen(true)}
+            androidDownload={androidDownload}
+            updateAvailable={updates.hasUpdate}
+            onUpdateClick={() => {
+              setInfoOpen(true);
+              void updates.check();
+            }}
+          />
+        </div>
+      </Panel>
+
+      {open ? <ResizeHandle /> : null}
+
+      <SettingsModal isOpen={settingsOpen} onClose={() => setSettingsOpen(false)} appSettings={appSettings} />
+      <AboutModal isOpen={infoOpen} onClose={() => setInfoOpen(false)} updates={updates} onToast={pushToast} />
+      <UpdatePopup updates={updates} />
+      <ToastStack toasts={toasts} onDismiss={dismissToast} />
+    </>
+  );
+}

package/src/client/components/layout/desktop-layout/TopNavbar.tsx

@@ -7,6 +7,7 @@ import { useInlineRename } from '@/client/hooks/ui/inline-rename';
 import { useSessionRenaming } from '@/client/hooks/workspace/renaming-sessions';
 import type { AgentStreamStatus } from '@/shared/lib/chat/omp/status';
 import { withChord } from '@/client/lib/ui/with-chord';
+import { titlebarPaddingLeft, titlebarPaddingRight } from '@/shared/lib/ui/titlebar';
 
 interface TopNavbarProps {
   sessionTitle: string | null;
@@ -59,10 +60,11 @@ export function TopNavbar({
   );
   return (
     <header 
-      className="h-10 flex-shrink-0 border-b border-ink/10 bg-paper flex items-center justify-between pr-4 z-20 titlebar-drag-region select-none"
+      className="h-10 flex-shrink-0 border-b border-ink/10 bg-paper flex items-center justify-between z-20 titlebar-drag-region select-none"
       style={{
-        paddingLeft: !showLeftPanel ? 'max(1rem, env(titlebar-area-x, 0px))' : undefined,
-        paddingRight: 'max(1rem, calc(100vw - env(titlebar-area-width, 100vw)))',
+        // The sidebar's own header carries the left inset while it is open.
+        paddingLeft: !showLeftPanel ? titlebarPaddingLeft('1rem') : undefined,
+        paddingRight: titlebarPaddingRight('1rem'),
       }}
     >
       <div className="flex items-center space-x-2 px-4 min-w-0">

package/src/client/components/layout/desktop-layout/WorkspacePanels.tsx

@@ -3,9 +3,10 @@ import { Suspense, lazy } from 'preact/compat';
 import type { ReactNode, RefObject } from 'preact/compat';
 import { Group, Panel, type PanelImperativeHandle } from '@/client/components/layout/desktop-layout/resizer';
 import { ChatTimeline } from '@/client/components/workspace/chat-timeline/index';
-import { usePanelCatalog, PluginPanelBody, type PanelBodyProps } from '@/client/components/workspace/plugin-panel/resolve';
+import { usePanelCatalog, PluginPanelBody, usePanelSlotPlugins, type PanelBodyProps } from '@/client/components/workspace/plugin-panel/resolve';
+import { EditorPluginRail } from '@/client/components/workspace/editor/PluginRail';
 import { PanelHostProvider } from '@kabmo-labs/kabmo-ui';
-import { RightActivityBar } from '@/client/components/layout/RightActivityBar';
+import { ActivityBar } from '@/client/components/layout/ActivityBar';
 import { useEditorDrop, type EditorDropResult } from '@/client/hooks/editor/use-editor-drop';
 import { EditorDropOverlay } from '@/client/components/workspace/editor/EditorDropOverlay';
 import { ResizeHandle } from '@/client/components/layout/desktop-layout/ResizeHandle';
@@ -46,6 +47,9 @@ interface WorkspacePanelsProps {
   showRightPanel: boolean;
   /** A built-in view id or a plugin panel key (`plugin:<id>/<panel>`). */
   activeRightPanel: string;
+  /** The `plugin:<id>` whose panel owns the editor column, or null. */
+  activeEditorPanelKey: string | null;
+  onSelectEditorPanel: (panelKey: string | null) => void;
   rightPanelRef: RefObject<PanelImperativeHandle | null>;
   /** Remembered width per panel, keyed the same way the layout reports them. */
   panelWidths: PanelWidths;
@@ -77,6 +81,8 @@ export function WorkspacePanels(props: WorkspacePanelsProps) {
     editorPanelRef,
     showRightPanel,
     activeRightPanel,
+    activeEditorPanelKey,
+    onSelectEditorPanel,
     rightPanelRef,
     panelWidths,
     editorWidthMode,
@@ -127,6 +133,10 @@ export function WorkspacePanels(props: WorkspacePanelsProps) {
   const catalog = usePanelCatalog();
   const { sessionId } = useSessionStateContext();
   const activePanel = catalog.find((panel) => panel.id === activeRightPanel);
+  // The EDITOR column's plugin slot (`panel`): a takeover, so it has no tab in
+  // the strip and this rail is its only switch. Empty until a plugin registers
+  // one, which is why a Kabmo without one looks exactly as it did.
+  const editorPlugins = usePanelSlotPlugins();
 
   // Separators present in this group, which also consume width.
   const handleCount = (showEditor ? 1 : 0) + (showRightPanel ? 1 : 0);
@@ -256,12 +266,18 @@ export function WorkspacePanels(props: WorkspacePanelsProps) {
 
         {showEditor && <ResizeHandle />}
         <Panel panelRef={editorPanelRef} id="editor-panel" defaultSize={editorWidth} minSize={MIN_EDITOR_PANEL_WIDTH} maxSize={editorMaxSize} collapsed={!showEditor}>
-          <div className="relative w-full h-full" {...drop.dropProps}>
+          <div className="flex w-full h-full" {...drop.dropProps}>
             <EditorDropOverlay visible={drop.isDragging} />
+            <EditorPluginRail
+              activeKey={activeEditorPanelKey}
+              onSelect={onSelectEditorPanel}
+              plugins={editorPlugins}
+            />
+            <div className="relative flex-1 min-w-0 h-full">
             <PanelSuspense>
             <Editor
               className="w-full h-full"
-              activeEditorPanelKey={null}
+              activeEditorPanelKey={activeEditorPanelKey}
               openedFiles={openedFiles}
               activeFileId={activeFileId}
               onSelectFile={onSetActiveFileId}
@@ -271,6 +287,7 @@ export function WorkspacePanels(props: WorkspacePanelsProps) {
               onFileSaved={onRefreshWorkspace}
             />
             </PanelSuspense>
+            </div>
           </div>
         </Panel>
 
@@ -320,7 +337,7 @@ export function WorkspacePanels(props: WorkspacePanelsProps) {
         </Panel>
       </Group>
 
-      <RightActivityBar activePanel={activeRightPanel} onChangePanel={onChangeRightPanel} isPanelOpen={showRightPanel} hasActiveContext={hasActiveContext} activeProjectPath={activeProjectPath} />
+      <ActivityBar side="right" activePanel={activeRightPanel} onChangePanel={onChangeRightPanel} isPanelOpen={showRightPanel} hasActiveContext={hasActiveContext} activeProjectPath={activeProjectPath} />
     </div>
   );
 }

package/src/client/components/layout/desktop-layout/index.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useRef, useState } from 'preact/hooks';
 import { useSearchParams } from '@/client/lib/router/search-params';
 import { Group, Panel, type PanelImperativeHandle } from '@/client/components/layout/desktop-layout/resizer';
-import { SessionSidebar } from '@/client/components/layout/session-sidebar/index';
+import { LeftColumn } from '@/client/components/layout/desktop-layout/LeftColumn';
 import { SettingsModal } from '@/client/components/settings/LazyModal';
 import type { SettingsCategoryId } from '@/shared/types';
 import { activeProjectForSession } from '@/shared/lib/workspace/active-project';
@@ -9,13 +9,16 @@ import { useFileTabs } from '@/client/hooks/workspace/file-tabs';
 import { useSessionState } from '@/client/hooks/workspace/session-state';
 import { TopNavbar } from '@/client/components/layout/desktop-layout/TopNavbar';
 import { WorkspacePanels } from '@/client/components/layout/desktop-layout/WorkspacePanels';
+import { usePanelSlotPlugins } from '@/client/components/workspace/plugin-panel/resolve';
 import { useAgentStreamStatus } from '@/client/hooks/chat/omp/status';
 import { usePanelWidths } from '@/client/hooks/workspace/panel-widths';
-import { useSidebarWidth } from '@/client/hooks/workspace/sidebar-width';
 import { useSidebarData } from '@/client/hooks/chat/omp/session-list';
-import { MAX_LEFT_PANEL_WIDTH, MIN_LEFT_PANEL_WIDTH } from '@/shared/lib/workspace/sidebar-width';
+import { MIN_LEFT_PANEL_WIDTH } from '@/shared/lib/workspace/sidebar-width';
+import { MIN_LEFT_DOCK_PLUGIN_WIDTH } from '@/shared/lib/workspace/left-dock-width';
+import { SESSIONS_VIEW_ID } from '@/shared/lib/workspace/left-dock';
+import { useLeftDock, useLeftDockWidth } from '@/client/hooks/workspace/left-dock';
+import { useLeftDockView } from '@/client/components/workspace/plugin-panel/catalog';
 import type { EditorWidthMode } from '@/shared/lib/workspace/panel-widths';
-import { ResizeHandle } from '@/client/components/layout/desktop-layout/ResizeHandle';
 import { useKabmoEvent, useWindowEvent } from '@/client/hooks/ui/window-event';
 import { PluginBootstrap } from '@/client/lib/plugins/bootstrap';
 import { WORKSPACE_KEY_BINDINGS } from '@/shared/lib/workspace/keymap';
@@ -38,10 +41,22 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
   const [showRightPanel, setShowRightPanel] = useSessionState<boolean>('layout.showRightPanel', appSettings.showRightPanel ?? true);
   const [activeRightPanel, setActiveRightPanel] = useSessionState<string>('layout.activeRightPanel', (appSettings.activeRightPanel as string) ?? 'files');
   const [showLeftPanel, setShowLeftPanel] = useSessionState<boolean>('layout.showLeftPanel', appSettings.showLeftPanel ?? true);
+  const [activeLeftView, setActiveLeftView] = useSessionState<string>('layout.activeLeftPanel', SESSIONS_VIEW_ID);
+  // Which plugin panel, if any, owns the editor column. Per session, like every
+  // other layout choice: two chats may be working on different things.
+  const [activeEditorPanelKey, setActiveEditorPanelKey] = useSessionState<string | null>('layout.activeEditorPanel', null);
   const { widths: panelWidths, commitWidths } = usePanelWidths();
-  // The sidebar's width is the one panel width that is NOT per session: it
-  // lists the same sessions in every chat, so it lives in `app_settings`.
-  const [sidebarWidth, commitSidebarWidth] = useSidebarWidth();
+  // The dock's width is per VIEW and global, like the right panel's order: it
+  // lists the same views in every chat.
+  const dock = useLeftDock();
+  // What the dock actually shows: a stored id naming a panel that has moved to
+  // the right column falls back to the session list, while one naming nothing at
+  // all is left for the dock to explain.
+  const leftView = useLeftDockView(activeLeftView, dock.enabled);
+  const [sidebarWidth, commitSidebarWidth] = useLeftDockWidth(leftView);
+  // A plugin view placed on the dock declares its own floor; the session list
+  // keeps the column's own. Resolved here because the resizer clamps to it.
+  const leftDockMinWidth = leftView === SESSIONS_VIEW_ID ? MIN_LEFT_PANEL_WIDTH : MIN_LEFT_DOCK_PLUGIN_WIDTH;
 
   const editorPanelRef = useRef<PanelImperativeHandle | null>(null);
   const rightPanelRef = useRef<PanelImperativeHandle | null>(null);
@@ -72,7 +87,17 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
     convertDiffToEditor,
   } = useFileTabs(activeProjectPath, sessionId || '', handleOpenTab);
 
-  const showEditor = openedFiles.length > 0 && (userToggledEditor ?? true);
+  // Three ways the column has content: a file, a chosen takeover, and a
+  // takeover that merely exists. Only the first two OPEN it — installing a
+  // plugin must not push a column onto the screen — but the third is what the
+  // toggle has to open on to, since the rail lives inside the column.
+  const editorTakeovers = usePanelSlotPlugins();
+  // The user's own switch wins over every default, in both directions.
+  const editorHasContent =
+    openedFiles.length > 0 || activeEditorPanelKey !== null || editorTakeovers.length > 0;
+  const showEditor =
+    editorHasContent &&
+    (userToggledEditor ?? (openedFiles.length > 0 || activeEditorPanelKey !== null));
 
   // A diff wants room a source file does not, so the editor panel keeps a
   // separate remembered width per tab kind.
@@ -81,13 +106,9 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
     [openedFiles, activeFileId],
   );
 
-  // Width restoration is declarative: every panel's `defaultSize` is derived
-  // from the remembered width for its current slot, and `Panel` adopts a
-  // changed `defaultSize` itself. That covers the two cases that used to need
-  // an imperative push — a right-panel view switch and an editor source↔diff
-  // switch, both of which keep the panel mounted while only its width slot
-  // changes — and it cannot go stale, because there is no cached layout to
-  // disagree with the props.
+  // Width restoration is declarative: each panel's `defaultSize` comes from the
+  // remembered width for its current slot and `Panel` adopts a change, so a
+  // view switch needs no imperative push and no cached layout can go stale.
 
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [settingsCategory, setSettingsCategory] = useState<SettingsCategoryId>('appearance');
@@ -114,13 +135,9 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
   const { toasts, pushToast, dismissToast } = useToasts();
 
   /**
-   * A drop on the workspace either opens a file or is refused, and the refusal
-   * has a reason worth reading ("outside every workspace", "not text") — a
-   * silent no-op would read as a broken drop target.
-   *
-   * The TARGET itself is not here: it belongs to the chat and editor panels
-   * (`WorkspacePanels`), because the sidebar and the right panel are panels in
-   * the same group and a layout-wide target would accept a drop over them too.
+   * A refused drop names its reason ("outside every workspace", "not text") —
+   * a silent no-op reads as a broken target. The TARGET is `WorkspacePanels`':
+   * a layout-wide one would accept a drop over the sidebar and right panel too.
    */
   const handleDropResult = useCallback(
     (result: EditorDropResult) => pushToast(result.message, result.ok ? 'success' : 'error'),
@@ -142,21 +159,21 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
     : undefined;
 
   /**
-   * The workspace's own shortcuts, resolved from the shared keymap so the
-   * tooltips on the panel toggles name the chord that is actually bound.
-   *
-   * `⌘S` is deliberately absent here: the editor panel already owns it (it is
-   * the only surface with a buffer to save), and binding it twice would save
-   * the file twice.
+   * The workspace shortcuts, from the shared keymap so the toggles' tooltips
+   * name the bound chord. `⌘S` is absent: the editor owns it, and binding it
+   * twice would save the file twice.
    */
   useWindowEvent('keydown', (e) => {
     const command = resolveBinding(WORKSPACE_KEY_BINDINGS, e);
     if (!command) return;
     if (command === 'saveFile') return;
     if (command === 'toggleEditorPanel' && !showEditor) {
-      // The editor panel is only meaningful with a file open, and `showEditor`
-      // already folds in the user's own toggle.
-      if (openedFiles.length === 0) return;
+      // The editor panel needs something to show — a file or a takeover — and
+      // `showEditor` already folds in the user's own toggle.
+      // The toggle is also the only way to REACH a takeover while the column is
+      // closed, since the rail lives inside the column: with no file and no
+      // takeover there would be nothing to open on to, and with one there is.
+      if (openedFiles.length === 0 && !activeEditorPanelKey && editorTakeovers.length === 0) return;
     }
     e.preventDefault();
     if (command === 'toggleSidebar') setShowLeftPanel((previous) => !previous);
@@ -181,34 +198,17 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
     setSettingsOpen(true);
   });
 
+  // Clicking the ACTIVE view on an open panel collapses that panel; any other
+  // click selects and opens. One handler for both columns' rails.
   const handleChangeRightPanel = (panel: string) => {
-    let nextShow = showRightPanel;
-    let nextActive = activeRightPanel;
-
-    if (activeRightPanel === panel && showRightPanel) {
-      nextShow = false;
-    } else {
-      nextActive = panel;
-      nextShow = true;
-    }
-
-    setShowRightPanel(nextShow);
-    setActiveRightPanel(nextActive);
-  };
-
-  const handleToggleLeftPanel = (show: boolean) => {
-    setShowLeftPanel(show);
+    const collapsing = activeRightPanel === panel && showRightPanel;
+    setShowRightPanel(!collapsing);
+    if (!collapsing) setActiveRightPanel(panel);
   };
 
-  const handleToggleRightPanel = () => {
-    setShowRightPanel(!showRightPanel);
-  };
-
-  const handleToggleEditor = () => {
-    setUserToggledEditor(!showEditor);
-    // The editor panel keeps its own remembered width per tab kind, so a
-    // dragged width survives the toggle without being re-applied here.
-  };
+  const handleToggleLeftPanel = (show: boolean) => setShowLeftPanel(show);
+  const handleToggleRightPanel = () => setShowRightPanel(!showRightPanel);
+  const handleToggleEditor = () => setUserToggledEditor(!showEditor);
 
   return (
     <div
@@ -216,7 +216,8 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
       className="relative flex flex-col h-screen w-screen overflow-hidden bg-canvas text-ink font-sans selection:bg-ink selection:text-canvas"
     >
 
-      {/* Main Workspace: full-height left sidebar (resizable) + right stack */}
+      {/* Main Workspace: the resizable LEFT dock (rail + view, see
+          `LeftColumn`) plus the right stack. */}
       <div className="flex flex-1 overflow-hidden">
         <Group
           orientation="horizontal"
@@ -226,10 +227,29 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
             if (left != null && left > 0) commitSidebarWidth(Math.round(left));
           }}
         >
-          <Panel panelRef={leftPanelRef} id="left-panel" defaultSize={sidebarWidth} minSize={MIN_LEFT_PANEL_WIDTH} maxSize={MAX_LEFT_PANEL_WIDTH} collapsed={!showLeftPanel}>
-            <SessionSidebar className="w-full h-full" onClose={() => handleToggleLeftPanel(false)} appSettings={appSettings} streamStatus={streamStatus} />
-          </Panel>
-          {showLeftPanel && <ResizeHandle />}
+          <LeftColumn
+            panelRef={leftPanelRef}
+            open={showLeftPanel}
+            railEnabled={dock.enabled}
+            view={leftView}
+            onSelectView={(panel) => {
+              // A rail click means "show this view" — never "toggle" it. A
+              // toggle would hide the rail the user is aiming at, and the dock
+              // has its own collapse control in the header.
+              setActiveLeftView(panel);
+              if (!showLeftPanel) handleToggleLeftPanel(true);
+            }}
+            onCollapse={() => handleToggleLeftPanel(false)}
+            width={sidebarWidth}
+            minWidth={leftDockMinWidth}
+            hasActiveContext={hasActiveContext}
+            activeProjectPath={activeProjectPath}
+            appSettings={appSettings}
+            streamStatus={streamStatus}
+            refreshKey={refreshKey}
+            onRefresh={handleRefreshWorkspace}
+            onOpenFile={(file) => handleOpenFile(file as Parameters<typeof handleOpenFile>[0])}
+          />
 
           {/* Right stack: top navbar + resizable workspace (the group's filler) */}
           <Panel id="main-right-stack" filler minSize={0}>
@@ -255,6 +275,13 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
                 editorPanelRef={editorPanelRef}
                 showRightPanel={showRightPanel}
                 activeRightPanel={activeRightPanel}
+                activeEditorPanelKey={activeEditorPanelKey}
+                onSelectEditorPanel={(panelKey) => {
+                  setActiveEditorPanelKey(panelKey);
+                  // Choosing a takeover must OPEN the column, or the click would
+                  // land on a panel that is still collapsed.
+                  if (panelKey) setUserToggledEditor(true);
+                }}
                 rightPanelRef={rightPanelRef}
                 panelWidths={panelWidths}
                 editorWidthMode={editorWidthMode}