@kabmo-labs/kabmo 0.8.0 → 0.9.0

package/src/client/components/common/toolbar-row/index.tsx

@@ -0,0 +1,189 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * One toolbar row that never becomes two.
+ *
+ * The editor and diff toolbars carry ten-plus controls and the editor panel is
+ * 320px wide on a 1440px screen. WRAPPING was the previous answer and it is the
+ * wrong one: a second row moves the document down by the toolbar's own height
+ * and reads as a second toolbar. A horizontal scroll is worse — a clipped
+ * control is invisible. So the clusters that do not fit move into a `⋯` menu and
+ * every control stays one click away.
+ *
+ * Widths are MEASURED, never tabulated: the row lays every cluster out once and
+ * reads each one's rendered width, then hides what does not fit. A table of
+ * guessed pixel widths drifts the moment a label, an icon or a font changes, and
+ * a wrong guess here is a control that is either clipped or needlessly buried.
+ */
+
+import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
+import type { ComponentChildren } from 'preact';
+import { Ellipsis, type LucideIcon } from 'lucide-preact';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+import { toolbarHasOverflow, toolbarVisibleClusters } from '@/shared/lib/ui/toolbar-overflow';
+
+/** One row the `⋯` menu offers when its cluster is not on the row. */
+export interface ToolbarOverflowAction {
+  label: string;
+  icon: LucideIcon;
+  onSelect: () => void;
+  /** Rendered as a pressed row (word wrap on, a mode already active). */
+  active?: boolean;
+  disabled?: boolean;
+}
+
+/**
+ * A logical group of controls that hides as a unit.
+ *
+ * A group rather than a single button because the clusters are already grouped
+ * in the toolbars (zoom is two buttons, copy/download is a pair, the width modes
+ * are a pair) and splitting them would let half of a pair stay on the row.
+ */
+export interface ToolbarCluster {
+  id: string;
+  /**
+   * Never leave the row, whatever its width.
+   *
+   * The visual order is not the priority order: Save is drawn first because that
+   * is where a reader looks for it, while the width modes sit last and are the
+   * reason the panel exists. Pinning says which ones a menu row must not be the
+   * only way to reach.
+   */
+  pinned?: boolean;
+  /** What the `⋯` menu offers when this cluster is hidden. */
+  actions: ToolbarOverflowAction[];
+  children: ComponentChildren;
+}
+
+interface ToolbarRowProps {
+  clusters: ToolbarCluster[];
+  className?: string;
+}
+
+export function ToolbarRow({ clusters, className = '' }: ToolbarRowProps) {
+  const rowRef = useRef<HTMLDivElement>(null);
+  /** Measured widths, tagged with the cluster set they describe. */
+  const [metrics, setMetrics] = useState<{ signature: string; widths: number[] } | null>(null);
+  const [available, setAvailable] = useState(0);
+
+  // The set changes when a conditional cluster appears or disappears (a
+  // previewable file opened, a byte viewer took over), and stale widths would
+  // then hide the wrong cluster. Rendering every cluster until they are measured
+  // is what gives the ruler something to measure — and the layout effect runs
+  // BEFORE paint, so the unresolved frame is never seen.
+  const signature = clusters.map((cluster) => `${cluster.id}:${cluster.pinned ? 1 : 0}`).join('|');
+  const ready = metrics?.signature === signature;
+  const widths = ready ? metrics.widths : [];
+  const pinned = clusters.map((cluster) => cluster.pinned === true);
+  const visible = widths.length > 0
+    ? toolbarVisibleClusters({ widths, pinned, available })
+    : clusters.map(() => true);
+
+  useLayoutEffect(() => {
+    const row = rowRef.current;
+    if (!row) return;
+    if (!ready) {
+      const children = [...row.querySelectorAll<HTMLElement>('[data-toolbar-cluster]')];
+      if (children.length === clusters.length) {
+        setMetrics({ signature, widths: children.map((child) => child.getBoundingClientRect().width) });
+      }
+    }
+    setAvailable(row.clientWidth);
+  });
+
+  // The row's width changes on a window resize, a panel drag and a layout mode
+  // switch — none of which are `window` events.
+  useEffect(() => {
+    const row = rowRef.current;
+    if (!row || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(() => setAvailable(row.clientWidth));
+    observer.observe(row);
+    return () => observer.disconnect();
+  }, []);
+
+  const hiddenActions = clusters.filter((_, index) => !visible[index]).flatMap((cluster) => cluster.actions);
+
+  return (
+    <div ref={rowRef} className={`flex flex-nowrap items-center justify-end gap-x-1 overflow-hidden ${className}`}>
+      {clusters.map((cluster, index) =>
+        visible[index] ? (
+          <div key={cluster.id} data-toolbar-cluster="" className="flex items-center flex-shrink-0">
+            {cluster.children}
+          </div>
+        ) : null,
+      )}
+      {toolbarHasOverflow(visible) && <OverflowMenu actions={hiddenActions} />}
+    </div>
+  );
+}
+
+/**
+ * The `⋯` trigger and its menu.
+ *
+ * A menu rather than a horizontal scroll: a clipped action is invisible, and the
+ * diff toolbar already learned that a scroll strip with no visible scrollbar
+ * reads as "there is nothing more here" (measured: 361px of content in a 296px
+ * box, with `Stage` entirely outside it).
+ */
+function OverflowMenu({ actions }: { actions: ToolbarOverflowAction[] }) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  useOnClickOutside(rootRef, () => setOpen(false));
+
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [open]);
+
+  return (
+    <div className="relative flex-shrink-0" ref={rootRef}>
+      <button
+        type="button"
+        title="More actions"
+        aria-label="More actions"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={() => setOpen(!open)}
+        className={`flex items-center justify-center p-1.5 rounded transition-colors cursor-pointer ${
+          open ? 'bg-ink/10 text-ink' : 'text-ink/50 hover:text-ink hover:bg-ink/5'
+        }`}
+      >
+        <Ellipsis size={14} />
+      </button>
+
+      {open && (
+        <div
+          role="menu"
+          className="absolute right-0 top-full mt-1 w-52 bg-paper border border-ink/15 rounded-lg shadow-lg z-50 py-1 text-xs"
+        >
+          {actions.map((action) => (
+            <button
+              key={action.label}
+              type="button"
+              role="menuitem"
+              disabled={action.disabled}
+              aria-pressed={action.active}
+              onClick={() => {
+                setOpen(false);
+                action.onSelect();
+              }}
+              className={`w-full text-left flex items-center gap-2 px-3 py-1.5 transition-colors disabled:cursor-default disabled:opacity-40 ${
+                action.active ? 'bg-ink/5 text-ink font-medium' : 'text-ink/75 hover:bg-ink/5 hover:text-ink'
+              }`}
+            >
+              <action.icon size={13} className="flex-shrink-0" />
+              <span className="truncate">{action.label}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -13,18 +13,13 @@ import { ResizeHandle } from '@/client/components/layout/desktop-layout/ResizeHa
 import { useAvailableWidth } from '@/client/hooks/workspace/available-width';
 import { useSessionStateContext } from '@/client/hooks/workspace/session-state/context';
 import {
-  DEFAULT_EDITOR_FRACTIONS,
-  DEFAULT_EDITOR_WIDTHS,
   HANDLE_WIDTH,
   MIN_EDITOR_PANEL_WIDTH,
   fillerMinWidth,
-  pairMaxSize,
-  panelFraction,
-  resolvePanelWidth,
   type EditorWidthMode,
   type PanelWidths,
 } from '@/shared/lib/workspace/panel-widths';
-import { DEFAULT_RIGHT_PANEL_FRACTION } from '@/shared/lib/workspace/right-panels';
+import { resolveWorkspacePanelWidths } from '@/shared/lib/workspace/workspace-panel-widths';
 
 const Editor = lazy(() => import('@/client/components/workspace/editor/index').then((m) => ({ default: m.Editor })));
 
@@ -43,6 +38,13 @@ function PanelSuspense({ children }: { children: ReactNode }) {
 interface WorkspacePanelsProps {
   appSettings?: Record<string, any>;
   showEditor: boolean;
+  /**
+   * The chat column is collapsed: the editor's compact/full view took its
+   * width. The chat STAYS MOUNTED (it owns the live stream and the composer)
+   * but is sized to nothing and marked inert, so a run in progress is not
+   * thrown away by widening a document.
+   */
+  chatHidden?: boolean;
   editorPanelRef: RefObject<PanelImperativeHandle | null>;
   showRightPanel: boolean;
   /** A built-in view id or a plugin panel key (`plugin:<id>/<panel>`). */
@@ -78,6 +80,7 @@ export function WorkspacePanels(props: WorkspacePanelsProps) {
   const {
     appSettings,
     showEditor,
+    chatHidden = false,
     editorPanelRef,
     showRightPanel,
     activeRightPanel,
@@ -138,75 +141,27 @@ export function WorkspacePanels(props: WorkspacePanelsProps) {
   // 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);
-
-  // The active view's own floor, resolved once here rather than at each use, so
-  // the right panel's floor cannot be computed from different values. A view
-  // that is switched off (or a plugin that has not loaded) has no entry, and the
-  // right panel falls back to the editor's own floor — it renders the notice,
-  // not a view.
-  const rightPanelMin = activePanel?.minWidth ?? MIN_EDITOR_PANEL_WIDTH;
-
-  // The editor and the right panel are a COUPLED pair (see `panel-widths.ts`):
-  // they share `PAIR_MAX_TOTAL_FRACTION` and each is capped by `PAIR_MAX_FRACTION`.
-  // The right panel is resolved first, so it reserves the editor's WANTED share
-  // (the editor has no result yet); the editor then reserves the right panel's
-  // ACTUAL width. That asymmetry is deliberate: an editor asking for more than
-  // its default makes the right panel give way first, and the pair still sums
-  // to the total.
-  const editorFraction = panelFraction(panelWidths[editorWidthMode], DEFAULT_EDITOR_FRACTIONS[editorWidthMode], available);
-  const editorReservePx = available != null && available > 0 ? Math.round(editorFraction * available) : 0;
-
-  // Resolve the RIGHT panel first, then the editor against the width it
-  // actually got. The px order is the other half of the contract: each panel's
-  // group budget is `available − chat floor − the sibling's reserved width −
-  // handles`, so reserving only a sibling's FLOOR (the previous shape) let the
-  // two declared widths sum past the group, and flexbox then shrank BOTH —
-  // measured at 1440 with both open: the editor asked for 507 and rendered 477,
-  // the right panel asked for 245 and rendered 230. The right panel is resolved
-  // first because it is the smaller, view-specific slot: it keeps its own width
-  // and the editor absorbs the remainder.
-  const rightWidth = resolvePanelWidth({
-    stored: panelWidths.right?.[activeRightPanel],
-    defaultFraction: activePanel?.defaultFraction ?? DEFAULT_RIGHT_PANEL_FRACTION,
-    defaultPx: activePanel?.defaultWidth ?? MIN_EDITOR_PANEL_WIDTH,
-    available,
-    min: rightPanelMin,
-    // The pair cap: the right panel may not exceed `total − the editor's wanted share`.
-    pairReservePx: showEditor ? editorReservePx : 0,
-    // The editor renders before the right panel and has not been resolved yet,
-    // so only its floor can be reserved here.
-    siblingWidth: showEditor ? MIN_EDITOR_PANEL_WIDTH : 0,
-    handleCount,
-  });
-
-  const editorWidth = resolvePanelWidth({
-    stored: panelWidths[editorWidthMode],
-    defaultFraction: DEFAULT_EDITOR_FRACTIONS[editorWidthMode],
-    defaultPx: DEFAULT_EDITOR_WIDTHS[editorWidthMode],
-    available,
-    min: MIN_EDITOR_PANEL_WIDTH,
-    // The pair cap: the editor may not exceed `total − the right panel's width`.
-    pairReservePx: showRightPanel ? rightWidth : 0,
-    // The right panel is resolved above; reserve the width it actually took so
-    // the editor's group budget cannot push the pair past the group.
-    siblingWidth: showRightPanel ? rightWidth : 0,
+  // The active view's own floor and defaults are read here and handed to the
+  // resolver: a view that is switched off (or a plugin that has not loaded) has
+  // no entry, and the right panel falls back to the editor's own floor — it
+  // renders the notice, not a view.
+  const {
+    editor: editorWidth,
+    right: rightWidth,
+    editorMax: editorMaxSize,
+    rightMax: rightMaxSize,
+    rightMin: rightPanelMin,
     handleCount,
-  });
-
-  /**
-   * Pair-aware maxima for a DRAG. `resolvePanelWidth` already caps the widths
-   * it hands to `defaultSize`, but a separator drag bypasses it — the resizer
-   * transfers pixels between two panels clamped only by their own `maxSize`.
-   * Without these, dragging the editor wide would push the pair past
-   * `PAIR_MAX_TOTAL_FRACTION`. Each panel's max is its own cap and the pair
-   * total minus the sibling's FLOOR (the sibling gives way down to its minimum
-   * during the drag), so the pair cannot exceed 0.7 by dragging either way.
-   * `undefined` before the group is measured (no cap yet).
-   */
-  const editorMaxSize = pairMaxSize({ available, siblingMin: rightPanelMin, siblingOpen: showRightPanel });
-  const rightMaxSize = pairMaxSize({ available, siblingMin: MIN_EDITOR_PANEL_WIDTH, siblingOpen: showEditor });
+  } = resolveWorkspacePanelWidths({
+      available,
+      panelWidths,
+      editorWidthMode,
+      activeRightPanel,
+      activePanel,
+      showEditor,
+      showRightPanel,
+      chatHidden,
+    });
 
   /**
    * Widths of the fixed panels as they are right now, keyed by slot: the
@@ -222,7 +177,11 @@ export function WorkspacePanels(props: WorkspacePanelsProps) {
     const patch: PanelWidths = {};
     const editor = editorPanelRef.current?.getSize()?.inPixels;
     const right = rightPanelRef.current?.getSize()?.inPixels;
-    if (editor != null && editor > 0) {
+    // With the chat hidden the editor's width is whatever is left over, not a
+    // choice — persisting it would overwrite the width the user set for the
+    // ordinary layout with the one this mode produced. A drag made here still
+    // moves the RIGHT panel, which is the width that was actually chosen.
+    if (!chatHidden && editor != null && editor > 0) {
       patch[editorWidthMode] = { px: Math.round(editor), ...(available ? { fraction: editor / available } : {}) };
     }
     if (right != null && right > 0) {
@@ -250,6 +209,10 @@ export function WorkspacePanels(props: WorkspacePanelsProps) {
         <Panel
           id="center-panel"
           filler
+          // Collapsed — not unmounted — in compact/full view: the chat holds the
+          // live run, the composer draft and the scroll position, and widening a
+          // document must not discard any of them.
+          collapsed={chatHidden}
           minSize={fillerMinWidth({
             available,
             reservedPx:
@@ -258,15 +221,15 @@ export function WorkspacePanels(props: WorkspacePanelsProps) {
               handleCount * HANDLE_WIDTH,
           })}
         >
-          <div className="relative w-full h-full" {...drop.dropProps}>
+          <div className="relative w-full h-full" {...drop.dropProps} {...drop.captureDropProps} inert={chatHidden}>
             <EditorDropOverlay visible={drop.isDragging} />
             <ChatTimeline className="w-full h-full" appSettings={appSettings} onSessionTitle={onSessionTitle} />
           </div>
         </Panel>
 
-        {showEditor && <ResizeHandle />}
+        {showEditor && !chatHidden && <ResizeHandle />}
         <Panel panelRef={editorPanelRef} id="editor-panel" defaultSize={editorWidth} minSize={MIN_EDITOR_PANEL_WIDTH} maxSize={editorMaxSize} collapsed={!showEditor}>
-          <div className="flex w-full h-full" {...drop.dropProps}>
+          <div className="flex w-full h-full" {...drop.dropProps} {...drop.captureDropProps}>
             <EditorDropOverlay visible={drop.isDragging} />
             <EditorPluginRail
               activeKey={activeEditorPanelKey}

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

@@ -3,7 +3,6 @@ import { useSearchParams } from '@/client/lib/router/search-params';
 import { Group, Panel, type PanelImperativeHandle } from '@/client/components/layout/desktop-layout/resizer';
 import { LeftColumn } from '@/client/components/layout/desktop-layout/LeftColumn';
 import { SettingsModal } from '@/client/components/settings/LazyModal';
-import type { SettingsCategoryId } from '@/shared/types';
 import { activeProjectForSession, effectiveRootFor } from '@/shared/lib/workspace/active-project';
 import { useFileTabs } from '@/client/hooks/workspace/file-tabs';
 import { useSessionState } from '@/client/hooks/workspace/session-state';
@@ -18,17 +17,17 @@ import { MIN_LEFT_DOCK_PLUGIN_WIDTH } from '@/shared/lib/workspace/left-dock-wid
 import { SESSIONS_VIEW_ID } from '@/shared/lib/workspace/left-dock';
 import { useOpenPanelRequest } from '@/client/hooks/workspace/open-panel';
 import { useLeftDock, useLeftDockWidth } from '@/client/hooks/workspace/left-dock';
+import { useEditorViewLayout } from '@/client/hooks/workspace/editor-view';
 import { useLeftDockView } from '@/client/components/workspace/plugin-panel/catalog';
 import type { EditorWidthMode } from '@/shared/lib/workspace/panel-widths';
-import { useKabmoEvent } from '@/client/hooks/ui/window-event';
+import { useSettingsModal } from '@/client/hooks/ui/settings-modal';
 import { useWorkspaceKeybindings } from '@/client/hooks/workspace/keybindings';
 import { PluginBootstrap } from '@/client/lib/plugins/bootstrap';
 import { useToasts } from '@/client/hooks/ui/toasts';
 import type { EditorDropResult } from '@/client/hooks/editor/use-editor-drop';
 import { ToastStack } from '@/client/components/common/ToastStack';
 import { SessionDeleteModal } from '@/client/components/common/session-delete-modal';
-import { useSessionActions } from '@/client/hooks/workspace/session-actions';
-import { useSessionDelete } from '@/client/hooks/workspace/session-delete';
+import { useNavbarSessionActions } from '@/client/hooks/workspace/navbar-session-actions';
 
 interface DesktopLayoutProps {
   sessionId: string | null;
@@ -112,32 +111,30 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
     [openedFiles, activeFileId],
   );
 
+  /**
+   * The editor's WIDTH mode (`compact` / `full`), entered from either toolbar.
+   *
+   * It collapses columns around the editor and is resolved here, not in the
+   * panels, because the sidebar is a sibling of the whole workspace group: a
+   * full view that left it standing would not be the width it promises.
+   *
+   * The mode is derived from `showEditor`, so closing the column returns the
+   * chat and the sidebar without writing anything — reopening it comes back to
+   * the width the user chose.
+   */
+  const editorView = useEditorViewLayout(showEditor);
+  const sidebarOpen = showLeftPanel && !editorView.sidebarHidden;
+
   // 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');
-  const [autoOpenAddProvider, setAutoOpenAddProvider] = useState(false);
   const [refreshKey, setRefreshKey] = useState(0);
   const handleRefreshWorkspace = () => setRefreshKey(k => k + 1);
   const [sessionTitle, setSessionTitle] = useState<string | null>(null);
   const streamStatus = useAgentStreamStatus();
+  const settings = useSettingsModal();
 
-  // The navbar's title menu acts on the session on screen. Its row may live in
-  // a folder that is not expanded in the sidebar, so the session is found by id
-  // across every folder rather than by walking the visible list. No row means
-  // nothing to act on — a session the sidebar does not know (a chat running
-  // outside every registered workspace) gets no menu rather than dead items.
-  const activeSession = useMemo(() => {
-    if (!sessionId) return null;
-    for (const folder of folders) {
-      const found = (folder.sessions || []).find((s) => String(s.id) === String(sessionId));
-      if (found) return found;
-    }
-    return null;
-  }, [folders, sessionId]);
-  const sidebar = useSidebarData();
   const { toasts, pushToast, dismissToast } = useToasts();
 
   /**
@@ -149,20 +146,19 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
     (result: EditorDropResult) => pushToast(result.message, result.ok ? 'success' : 'error'),
     [pushToast],
   );
-  const { handleArchive, handleRename, handleRenameWithAi } = useSessionActions(sidebar.refresh, pushToast);
-  const sessionDelete = useSessionDelete();
-  // A pending `new-…` chat has no transcript anywhere yet, so rename and delete
-  // are refused by the server; the menu hides them the way the sidebar does.
-  const isPendingSession = Boolean(sessionId && sessionId.startsWith('new-'));
-  const sessionActions = activeSession
-    ? {
-        isArchived: activeSession.is_archived === 1,
-        onRename: isPendingSession ? undefined : (name: string) => void handleRename(activeSession, name),
-        onRenameWithAi: isPendingSession ? undefined : () => void handleRenameWithAi(activeSession),
-        onArchive: () => handleArchive(activeSession),
-        onDelete: isPendingSession ? undefined : () => sessionDelete.requestDelete(activeSession),
-      }
-    : undefined;
+  const { menu: sessionActions, sessionDelete } = useNavbarSessionActions(folders, sessionId, pushToast);
+
+  /**
+   * Ask for the sidebar (or put it away).
+   *
+   * Full view hides the sidebar, so asking for it must leave that mode —
+   * otherwise the toggle flips a stored flag the layout is ignoring and the
+   * click does nothing. `compact` is the mode that keeps the wider editor.
+   */
+  const handleToggleLeftPanel = (show: boolean) => {
+    if (show) editorView.revealSidebar();
+    setShowLeftPanel(show);
+  };
 
   // 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
@@ -170,26 +166,13 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
   useWorkspaceKeybindings({
     showEditor,
     editorHasContent,
-    toggleSidebar: () => setShowLeftPanel((previous) => !previous),
+    // Through the handler, not the raw flag: in full view the sidebar is hidden
+    // by the editor's WIDTH mode, so flipping `showLeftPanel` alone would change
+    // a value the layout is ignoring and the chord would do nothing.
+    toggleSidebar: () => handleToggleLeftPanel(!sidebarOpen),
     toggleEditor: () => setUserToggledEditor((previous) => !(previous ?? showEditor)),
     toggleRightPanel: () => setShowRightPanel((previous) => !previous),
-    openSettings: () => {
-      setSettingsCategory('appearance');
-      setAutoOpenAddProvider(false);
-      setSettingsOpen((previous) => !previous);
-    },
-  });
-
-  // Global event listener for settings triggers
-  useKabmoEvent('omp:open-settings', (e) => {
-    const customEvent = e as CustomEvent<{ category?: SettingsCategoryId; autoOpenAdd?: boolean }>;
-    if (customEvent.detail?.category) {
-      setSettingsCategory(customEvent.detail.category);
-    } else {
-      setSettingsCategory('appearance');
-    }
-    setAutoOpenAddProvider(!!customEvent.detail?.autoOpenAdd);
-    setSettingsOpen(true);
+    openSettings: () => (settings.isOpen ? settings.close() : settings.open()),
   });
 
   // Clicking the ACTIVE view on an open panel collapses that panel; any other
@@ -200,7 +183,6 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
     if (!collapsing) setActiveRightPanel(panel);
   };
 
-  const handleToggleLeftPanel = (show: boolean) => setShowLeftPanel(show);
   const handleToggleRightPanel = () => setShowRightPanel(!showRightPanel);
   const handleToggleEditor = () => setUserToggledEditor(!showEditor);
 
@@ -243,7 +225,7 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
         >
           <LeftColumn
             panelRef={leftPanelRef}
-            open={showLeftPanel}
+            open={sidebarOpen}
             railEnabled={dock.enabled}
             view={leftView}
             onSelectView={(panel) => {
@@ -251,7 +233,7 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
               // 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);
+              if (!sidebarOpen) handleToggleLeftPanel(true);
             }}
             onCollapse={() => handleToggleLeftPanel(false)}
             width={sidebarWidth}
@@ -272,20 +254,21 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
               <TopNavbar
                 sessionTitle={sessionTitle}
                 sessionId={sessionId}
-                showLeftPanel={showLeftPanel}
+                showLeftPanel={sidebarOpen}
                 showEditor={showEditor}
                 showRightPanel={showRightPanel}
                 streamStatus={streamStatus}
                 onSwitchToMobile={onSwitchToMobile}
                 onToggleEditor={handleToggleEditor}
                 onToggleRightPanel={handleToggleRightPanel}
-                onToggleLeftPanel={() => handleToggleLeftPanel(!showLeftPanel)}
+                onToggleLeftPanel={() => handleToggleLeftPanel(!sidebarOpen)}
                 sessionActions={sessionActions}
               />
 
               <WorkspacePanels
                 appSettings={appSettings}
                 showEditor={showEditor}
+                chatHidden={editorView.chatHidden}
                 editorPanelRef={editorPanelRef}
                 showRightPanel={showRightPanel}
                 activeRightPanel={activeRightPanel}
@@ -321,15 +304,12 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
       </div>
 
       {/* Global Desktop Settings Modal */}
-      <SettingsModal 
-        isOpen={settingsOpen} 
-        onClose={() => {
-          setSettingsOpen(false);
-          setAutoOpenAddProvider(false);
-        }} 
-        initialCategory={settingsCategory}
-        autoOpenAddProvider={autoOpenAddProvider}
-        appSettings={appSettings} 
+      <SettingsModal
+        isOpen={settings.isOpen}
+        onClose={settings.close}
+        initialCategory={settings.category}
+        autoOpenAddProvider={settings.autoOpenAddProvider}
+        appSettings={appSettings}
       />
 
       {/* The navbar title menu's delete path and the rename-with-AI refusal

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

@@ -212,11 +212,14 @@ export function Panel(props: {
 
   const baseStyle: CSSProperties = filler
     ? {
-        flex: '1 1 0%',
+        // A collapsed filler keeps its DOM (and therefore its state: the chat
+        // owns the live stream and the composer) but takes no width, so the
+        // sibling panels' own widths are the whole row.
+        flex: collapsed ? '0 0 0%' : '1 1 0%',
         // The filler keeps its floor on the group's axis (and none across it,
         // where it is sized by the container): see the group model note above.
-        minWidth: orientation === 'horizontal' ? minPx : 0,
-        minHeight: orientation === 'horizontal' ? 0 : minPx,
+        minWidth: orientation === 'horizontal' ? (collapsed ? 0 : minPx) : 0,
+        minHeight: orientation === 'horizontal' ? 0 : collapsed ? 0 : minPx,
         overflow: 'hidden',
         position: 'relative',
       }

package/src/client/components/layout/session-sidebar/Footer.tsx

@@ -1,8 +1,6 @@
-import { Download, Info, Settings } from 'lucide-preact';
-import {
-  shellDownloadLabel,
-  type ShellDownload,
-} from '@/client/hooks/ui/updates/shell-download';
+import { Info, Settings } from 'lucide-preact';
+import type { ShellDownload } from '@/client/hooks/ui/updates/shell-download';
+import { ShellUpdateButton } from '@/client/components/common/shell-update-button';
 
 interface SessionSidebarFooterProps {
   onSettings: () => void;
@@ -50,16 +48,11 @@ export function SessionSidebarFooter({ onSettings, onInfo, updateAvailable, onUp
           // an installed shell that is behind (an update), or an Android browser
           // whose reader may not know the shell exists (an install). A desktop
           // browser and an iOS browser get neither — see `useShellDownload`.
-          <a
-            href={shellDownload.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            title={shellDownloadLabel(shellDownload)}
-            aria-label={shellDownloadLabel(shellDownload)}
-            className="p-1 rounded hover:text-ink hover:bg-ink/5 cursor-pointer transition-colors"
-          >
-            <Download size={16} />
-          </a>
+          //
+          // A desktop shell that reported its architecture gets a BUTTON: the
+          // shell installs the artifact itself, and a link there would be a file
+          // in Downloads instead of an updated app.
+          <ShellUpdateButton download={shellDownload} variant="icon" />
         )}
       </div>
       {updateAvailable && (

package/src/client/components/mobile/LayoutWrapper.tsx

@@ -259,6 +259,7 @@ export function MobileLayoutWrapper({ onDesktopToggle, appSettings = {} }: Mobil
       <div
         className={`flex-1 min-h-0 w-full relative ${currentScreen === 'main' ? 'block' : 'hidden'}`}
         {...editorDrop.dropProps}
+        {...editorDrop.captureDropProps}
       >
         <EditorDropOverlay visible={editorDrop.isDragging} />
         <MobileMainView

package/src/client/components/mobile/mobile-right-sidebar/FullDiff.tsx

@@ -69,6 +69,9 @@ export function MobileFullDiff({ diff, onClose, onFileSaved }: MobileFullDiffPro
       <div className="flex-1 min-h-0">
         <DiffPanel
           className="h-full"
+          // A full-screen phone overlay has no chat column or sidebar beside
+          // it, so the width modes would widen into nothing.
+          viewModeButtons={false}
           filePath={diff.path}
           status={status}
           isStaged={isStaged}