ompchamber 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ompchamber",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Developer web console and diagnostic chamber for AI Oh-My-Pi — Elysia + Preact on Bun.",
   "license": "UNLICENSED",
   "author": "Wijanarko Putra Rajeb <wijanarko.rajeb@gmail.com>",

package/src/client/components/common/ComposerPicker.tsx

@@ -1,10 +1,12 @@
 import { useEffect, useRef } from 'preact/hooks';
 import type { ReactElement } from 'preact/compat';
-import type { ComposerMatchItem, ComposerPickItem, ComposerPickKind } from '@/shared/types';
+import type { ComposerMatchItem, ComposerPickItem, ComposerPickKind, ComposerTriggerPhase } from '@/shared/types';
 
 export interface ComposerPickerProps {
   open: boolean;
   kind: ComposerPickKind;
+  /** `args` swaps the header for the subcommand hint of the typed command. */
+  phase?: ComposerTriggerPhase;
   items: ComposerMatchItem[];
   activeIndex: number;
   loading: boolean;
@@ -37,6 +39,7 @@ function OptionName({ item }: { item: ComposerMatchItem }) {
 export function ComposerPicker({
   open,
   kind,
+  phase = 'name',
   items,
   activeIndex,
   loading,
@@ -56,9 +59,18 @@ export function ComposerPicker({
   if (!open) return null;
 
   const isMention = kind === 'mention';
-  const headerText = isMention ? 'Type to search files and agents' : 'Type to search commands and skills';
-  const ariaLabel = isMention ? 'Files and agents' : 'Commands and skills';
-  const emptyText = isMention ? 'No matching files or agents' : 'No matching commands or skills';
+  const isArgs = !isMention && phase === 'args';
+  const headerText = isMention
+    ? 'Type to search files and agents'
+    : isArgs
+      ? 'Pick a subcommand'
+      : 'Type to search commands and skills';
+  const ariaLabel = isMention ? 'Files and agents' : isArgs ? 'Subcommands' : 'Commands and skills';
+  const emptyText = isMention
+    ? 'No matching files or agents'
+    : isArgs
+      ? 'No matching subcommands'
+      : 'No matching commands or skills';
 
   return (
     <div

package/src/client/components/common/ComposerTextarea.tsx

@@ -117,6 +117,7 @@ export function ComposerTextarea({
       <ComposerPicker
         open={composer.isOpen}
         kind={composer.trigger?.kind ?? 'mention'}
+        phase={composer.trigger?.phase ?? 'name'}
         items={composer.matches}
         activeIndex={composer.activeIndex}
         loading={composer.loading}

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

@@ -34,7 +34,7 @@ export function RightActivityBar({ activePanel, onChangePanel, isPanelOpen, hasA
   const hasGitChanges = changes.length > 0;
 
   return (
-    <nav className="w-12 flex-shrink-0 border-l border-ink/10 bg-paper flex flex-col items-center py-3 space-y-2 z-10">
+    <nav className="w-11 flex-shrink-0 border-l border-ink/10 bg-paper flex flex-col items-center py-3 space-y-2 z-10">
       {/* Top Icons */}
       <div className="flex flex-col items-center space-y-1 w-full">
         {RIGHT_PANEL_TYPES.map((panel) => {

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

@@ -3,8 +3,8 @@ import { Separator } from '@/client/components/layout/desktop-layout/resizer';
 /** Hairline drag handle shared by both resizable groups in the desktop layout. */
 export function ResizeHandle() {
   return (
-    <Separator className="relative w-1 outline-none group flex justify-center cursor-col-resize z-10">
-      <div className="h-full w-[1px] bg-ink/10 group-hover:bg-ink/40 group-active:bg-ink/60 group-hover:w-0.5 transition-all" />
+    <Separator className="relative w-[3px] outline-none group flex justify-center cursor-col-resize z-10">
+      <div className="h-full w-[1px] bg-ink/10 group-hover:bg-ink/40 group-active:bg-ink/60 group-hover:w-[3px] transition-all" />
     </Separator>
   );
 }

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

@@ -1,4 +1,4 @@
-import { LayoutTemplate, MoreHorizontal, PanelRight, PanelRightClose, Smartphone } from 'lucide-preact';
+import { LayoutTemplate, MoreHorizontal, PanelLeft, PanelRight, PanelRightClose, Smartphone } from 'lucide-preact';
 import { PWAInstallButton } from '@/client/components/common/PWAInstallButton';
 import { StreamStatusDot } from '@/client/components/common/StreamStatusDot';
 import type { AgentStreamStatus } from '@/shared/lib/chat/omp/status';
@@ -13,6 +13,7 @@ interface TopNavbarProps {
   onSwitchToMobile?: () => void;
   onToggleEditor: () => void;
   onToggleRightPanel: () => void;
+  onToggleLeftPanel: () => void;
 }
 
 export function TopNavbar({
@@ -24,10 +25,11 @@ export function TopNavbar({
   onSwitchToMobile,
   onToggleEditor,
   onToggleRightPanel,
+  onToggleLeftPanel,
 }: TopNavbarProps) {
   return (
     <header 
-      className="h-12 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-14 flex-shrink-0 border-b border-ink/10 bg-paper flex items-center justify-between pr-4 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)))',
@@ -36,6 +38,15 @@ export function TopNavbar({
       <div className="flex items-center space-x-2 px-4 min-w-0">
         {!showLeftPanel && (
           <>
+            <button
+              type="button"
+              onClick={onToggleLeftPanel}
+              className="p-1.5 rounded hover:bg-ink/10 transition-colors text-ink/60 hover:text-ink cursor-pointer flex-shrink-0 titlebar-no-drag"
+              title="Expand Sidebar"
+              aria-label="Expand Sidebar"
+            >
+              <PanelLeft size={16} />
+            </button>
             <span className="font-bold text-sm tracking-tight hidden sm:flex items-center flex-shrink-0">
               <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-500 font-extrabold text-[15px] tracking-tighter">OMP</span>
               <span className="ml-[1px]">Chamber</span>

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

@@ -6,15 +6,32 @@ import { ChatTimeline } from '@/client/components/workspace/chat-timeline/index'
 import { getDesktopPanelView } from '@/client/components/common/lazy-panels';
 import { RightActivityBar } from '@/client/components/layout/RightActivityBar';
 import { ResizeHandle } from '@/client/components/layout/desktop-layout/ResizeHandle';
-import { DEFAULT_RIGHT_PANEL_WIDTHS, MAX_RIGHT_PANEL_WIDTH, MIN_RIGHT_PANEL_WIDTHS, RIGHT_PANEL_TYPES, type RightPanelType } from '@/shared/lib/workspace/right-panels';
-import { DEFAULT_PANEL_WIDTHS, MAX_EDITOR_PANEL_WIDTH, MIN_CHAT_PANEL_WIDTH, MIN_EDITOR_PANEL_WIDTH, type EditorWidthMode, type PanelWidths } from '@/shared/lib/workspace/panel-widths';
+import { useAvailableWidth } from '@/client/hooks/workspace/available-width';
+import {
+  DEFAULT_RIGHT_PANEL_FRACTIONS,
+  DEFAULT_RIGHT_PANEL_WIDTHS,
+  MIN_RIGHT_PANEL_WIDTHS,
+  RIGHT_PANEL_TYPES,
+  type RightPanelType,
+} from '@/shared/lib/workspace/right-panels';
+import {
+  DEFAULT_EDITOR_FRACTIONS,
+  DEFAULT_EDITOR_WIDTHS,
+  MIN_CHAT_PANEL_WIDTH,
+  MIN_EDITOR_PANEL_WIDTH,
+  resolvePanelWidth,
+  type EditorWidthMode,
+  type PanelWidths,
+} from '@/shared/lib/workspace/panel-widths';
 
 const Editor = lazy(() => import('@/client/components/workspace/editor/index').then((m) => ({ default: m.Editor })));
 
 function PanelSuspense({ children }: { children: ReactNode }) {
   return (
     <Suspense fallback={
-      <div className="w-full h-full flex items-center justify-center text-ink/40 text-xs">Loading…</div>
+      <div className="w-full h-full flex items-center justify-center text-ink/40">
+        <span className="text-xs font-mono">Loading…</span>
+      </div>
     }>
       {children}
     </Suspense>
@@ -72,9 +89,12 @@ export function WorkspacePanels(props: WorkspacePanelsProps) {
     onPanelWidths,
   } = props;
 
-  // Read inside effects without making a drag re-trigger them.
-  const panelWidthsRef = useRef(panelWidths);
-  panelWidthsRef.current = panelWidths;
+  // The group's own area: the base every stored fraction is a share of, and the
+  // budget the chat floor is subtracted from. Measured through the group's
+  // element, not a wrapper — the wrapper also spans the activity bar, which is
+  // not area any panel may take.
+  const groupRef = useRef<HTMLDivElement>(null);
+  const available = useAvailableWidth(groupRef);
 
   // One cached lazy per view, scoped to this layout instance: switching the
   // right panel toggles CSS visibility instead of unmounting, so a view's
@@ -86,18 +106,55 @@ export function WorkspacePanels(props: WorkspacePanelsProps) {
     [viewScope],
   );
 
+  // Separators present in this group, which also consume width.
+  const handleCount = (showEditor ? 1 : 0) + (showRightPanel ? 1 : 0);
+
+  const editorWidth = resolvePanelWidth({
+    stored: panelWidths[editorWidthMode],
+    defaultFraction: DEFAULT_EDITOR_FRACTIONS[editorWidthMode],
+    defaultPx: DEFAULT_EDITOR_WIDTHS[editorWidthMode],
+    available,
+    min: MIN_EDITOR_PANEL_WIDTH,
+    // The right panel renders after the editor, so it absorbs the remainder.
+    // Reserving this view's own floor is enough: the editor's share is what
+    // the ceiling subtracts.
+    siblingMin: showRightPanel ? MIN_RIGHT_PANEL_WIDTHS[activeRightPanel] : 0,
+    handleCount,
+  });
+
+  const rightWidth = resolvePanelWidth({
+    stored: panelWidths.right?.[activeRightPanel],
+    defaultFraction: DEFAULT_RIGHT_PANEL_FRACTIONS[activeRightPanel],
+    defaultPx: DEFAULT_RIGHT_PANEL_WIDTHS[activeRightPanel],
+    available,
+    min: MIN_RIGHT_PANEL_WIDTHS[activeRightPanel],
+    // The editor took its share first; only its floor is reserved here.
+    siblingMin: showEditor ? MIN_EDITOR_PANEL_WIDTH : 0,
+    handleCount,
+  });
+
   /**
    * Widths of the fixed panels as they are right now, keyed by slot: the
    * editor (source or diff, whichever is showing) and the right panel under
    * the view it currently holds. The chat column is the group's filler, so it
    * has no width of its own to report.
+   *
+   * Each is stored as a share of the area it was measured in, so the layout
+   * follows a window resize instead of holding a pixel value that was only
+   * right on the display it was dragged on.
    */
   const readPanelWidths = (): PanelWidths => {
     const patch: PanelWidths = {};
     const editor = editorPanelRef.current?.getSize()?.inPixels;
     const right = rightPanelRef.current?.getSize()?.inPixels;
-    if (editor != null && editor > 0) patch[editorWidthMode] = Math.round(editor);
-    if (right != null && right > 0) patch.right = { [activeRightPanel]: Math.round(right) };
+    if (editor != null && editor > 0) {
+      patch[editorWidthMode] = { px: Math.round(editor), ...(available ? { fraction: editor / available } : {}) };
+    }
+    if (right != null && right > 0) {
+      patch.right = {
+        [activeRightPanel]: { px: Math.round(right), ...(available ? { fraction: right / available } : {}) },
+      };
+    }
     return patch;
   };
 
@@ -106,6 +163,8 @@ export function WorkspacePanels(props: WorkspacePanelsProps) {
       <Group
         orientation="horizontal"
         id="ompchamber-layout"
+        className="flex-1 min-w-0"
+        groupRef={groupRef}
         onLayoutChanged={() => {
           // Persist only real drags: imperative restores and constraint
           // recomputes would otherwise rewrite the saved widths with the
@@ -117,55 +176,47 @@ export function WorkspacePanels(props: WorkspacePanelsProps) {
           <ChatTimeline className="w-full h-full" appSettings={appSettings} onSessionTitle={onSessionTitle} />
         </Panel>
 
-        {showEditor && (
-          <>
-            <ResizeHandle />
-            <Panel panelRef={editorPanelRef} id="editor-panel" defaultSize={panelWidths[editorWidthMode] ?? DEFAULT_PANEL_WIDTHS[editorWidthMode]} minSize={MIN_EDITOR_PANEL_WIDTH} maxSize={MAX_EDITOR_PANEL_WIDTH}>
-              <PanelSuspense>
-                <Editor
-                  className="w-full h-full"
-                  openedFiles={openedFiles}
-                  activeFileId={activeFileId}
-                  onSelectFile={onSetActiveFileId}
-                  onCloseFile={onCloseFile}
-                  refreshKey={refreshKey}
-                  onFileSaved={onRefreshWorkspace}
-                />
-              </PanelSuspense>
-            </Panel>
-          </>
-        )}
+        {showEditor && <ResizeHandle />}
+        <Panel panelRef={editorPanelRef} id="editor-panel" defaultSize={editorWidth} minSize={MIN_EDITOR_PANEL_WIDTH} collapsed={!showEditor}>
+          <PanelSuspense>
+            <Editor
+              className="w-full h-full"
+              openedFiles={openedFiles}
+              activeFileId={activeFileId}
+              onSelectFile={onSetActiveFileId}
+              onCloseFile={onCloseFile}
+              refreshKey={refreshKey}
+              onFileSaved={onRefreshWorkspace}
+            />
+          </PanelSuspense>
+        </Panel>
 
-        {showRightPanel && (
-          <>
-            <ResizeHandle />
-            <Panel panelRef={rightPanelRef} id="right-panel" defaultSize={panelWidths.right?.[activeRightPanel] ?? DEFAULT_RIGHT_PANEL_WIDTHS[activeRightPanel]} minSize={MIN_RIGHT_PANEL_WIDTHS[activeRightPanel]} maxSize={MAX_RIGHT_PANEL_WIDTH} collapsible>
-              <PanelSuspense>
-                {rightViews.map(({ view, Comp }) => {
-                  const isActiveView = activeRightPanel === view;
-                  const base = {
-                    className: 'w-full h-full',
-                    // The terminal must stay enabled while hidden: swapping it
-                    // to the placeholder mid-command would unmount the live
-                    // stream. Everything else polls/re-reads only while shown.
-                    enabled: view === 'terminal' ? hasActiveContext : hasActiveContext && isActiveView,
-                    active: isActiveView,
-                    refreshKey,
-                    rootPath: activeProjectPath ?? undefined,
-                    onRefresh: onRefreshWorkspace,
-                    onOpenFile,
-                    onClose: onToggleRightPanel,
-                  };
-                  return (
-                    <div key={view} className={isActiveView ? 'w-full h-full' : 'hidden'}>
-                      <Comp {...base} />
-                    </div>
-                  );
-                })}
-              </PanelSuspense>
-            </Panel>
-          </>
-        )}
+        {showRightPanel && <ResizeHandle />}
+        <Panel panelRef={rightPanelRef} id="right-panel" defaultSize={rightWidth} minSize={MIN_RIGHT_PANEL_WIDTHS[activeRightPanel]} collapsed={!showRightPanel}>
+          <PanelSuspense>
+            {rightViews.map(({ view, Comp }) => {
+              const isActiveView = activeRightPanel === view;
+              const base = {
+                className: 'w-full h-full',
+                // The terminal must stay enabled while hidden: swapping it
+                // to the placeholder mid-command would unmount the live
+                // stream. Everything else polls/re-reads only while shown.
+                enabled: view === 'terminal' ? hasActiveContext : hasActiveContext && isActiveView,
+                active: isActiveView,
+                refreshKey,
+                rootPath: activeProjectPath ?? undefined,
+                onRefresh: onRefreshWorkspace,
+                onOpenFile,
+                onClose: onToggleRightPanel,
+              };
+              return (
+                <div key={view} className={isActiveView ? 'w-full h-full' : 'hidden'}>
+                  <Comp {...base} />
+                </div>
+              );
+            })}
+          </PanelSuspense>
+        </Panel>
       </Group>
 
       <RightActivityBar activePanel={activeRightPanel} onChangePanel={onChangeRightPanel} isPanelOpen={showRightPanel} hasActiveContext={hasActiveContext} activeProjectPath={activeProjectPath} refreshKey={refreshKey} />

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

@@ -1,11 +1,9 @@
-import type { RefObject } from 'preact/compat';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
+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 { DEFAULT_RIGHT_PANEL_WIDTHS, type RightPanelType } from '@/shared/lib/workspace/right-panels';
+import type { RightPanelType } from '@/shared/lib/workspace/right-panels';
 import { SettingsModal } from '@/client/components/settings/LazyModal';
-import { PanelLeft } from 'lucide-preact';
 import type { SettingsCategoryId } from '@/shared/types';
 import { activeProjectForSession } from '@/shared/lib/workspace/active-project';
 import { useFileTabs } from '@/client/hooks/workspace/file-tabs';
@@ -15,9 +13,8 @@ import { WorkspacePanels } from '@/client/components/layout/desktop-layout/Works
 import { useAgentStreamStatus } from '@/client/hooks/chat/omp/status';
 import { usePanelWidths } from '@/client/hooks/workspace/panel-widths';
 import { useSidebarData } from '@/client/hooks/chat/omp/session-list';
-import { DEFAULT_PANEL_WIDTHS, MAX_LEFT_PANEL_WIDTH, MIN_LEFT_PANEL_WIDTH, type EditorWidthMode } from '@/shared/lib/workspace/panel-widths';
+import { DEFAULT_LEFT_PANEL_WIDTH, MAX_LEFT_PANEL_WIDTH, MIN_LEFT_PANEL_WIDTH, type EditorWidthMode } from '@/shared/lib/workspace/panel-widths';
 import { ResizeHandle } from '@/client/components/layout/desktop-layout/ResizeHandle';
-import { writeSetting } from '@/shared/lib/settings/client';
 import { useChamberEvent, useWindowEvent } from '@/client/hooks/ui/window-event';
 
 interface DesktopLayoutProps {
@@ -26,29 +23,17 @@ interface DesktopLayoutProps {
   appSettings?: Record<string, any>;
 }
 
-/**
- * Push a remembered width onto a mounted panel. Panels report nothing while
- * unmounted, so a missing width (never resized) or a missing handle (panel
- * closed) simply leaves the panel at whatever its `defaultSize` derived.
- */
-function applyWidth(
-  ref: RefObject<PanelImperativeHandle | null>,
-  px: number | undefined,
-) {
-  if (px != null) ref.current?.resize(px);
-}
-
 export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }: DesktopLayoutProps) {
   const { folders } = useSidebarData();
   const [showRightPanel, setShowRightPanel] = useSessionState<boolean>('layout.showRightPanel', appSettings.showRightPanel ?? true);
   const [activeRightPanel, setActiveRightPanel] = useSessionState<RightPanelType>('layout.activeRightPanel', (appSettings.activeRightPanel as RightPanelType) ?? 'files');
-  const [showLeftPanel, setShowLeftPanel] = useState(appSettings.showLeftPanel ?? true);
-  const { widths: panelWidths, widthsRef, commitWidths } = usePanelWidths(appSettings, activeRightPanel);
+  const [showLeftPanel, setShowLeftPanel] = useSessionState<boolean>('layout.showLeftPanel', appSettings.showLeftPanel ?? true);
+  const { widths: panelWidths, commitWidths } = usePanelWidths(appSettings, activeRightPanel);
 
   const editorPanelRef = useRef<PanelImperativeHandle | null>(null);
   const rightPanelRef = useRef<PanelImperativeHandle | null>(null);
   const leftPanelRef = useRef<PanelImperativeHandle | null>(null);
-  const [userToggledEditor, setUserToggledEditor] = useState<boolean | null>(appSettings.userToggledEditor ?? null);
+  const [userToggledEditor, setUserToggledEditor] = useSessionState<boolean | null>('layout.userToggledEditor', appSettings.userToggledEditor ?? null);
 
   const [searchParams] = useSearchParams();
   const folderIdParam = searchParams.get('folderId');
@@ -63,8 +48,7 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
 
   const handleOpenTab = useCallback(() => {
     setUserToggledEditor(true);
-    saveSetting('userToggledEditor', true);
-  }, []);
+  }, [setUserToggledEditor]);
 
   const {
     openedFiles,
@@ -83,42 +67,13 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
     [openedFiles, activeFileId],
   );
 
-  const saveSetting = (key: string, value: any) => {
-    writeSetting(key, value);
-  };
-
-  // The sidebar shares a group with the workspace stack, so the stack absorbs
-  // its width and only the toggle can lose it: reapplying it after the panel
-  // remounts is what keeps the sidebar where the user left it.
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      const widths = widthsRef.current;
-      if (widths) applyWidth(leftPanelRef, widths.left);
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [showLeftPanel, widthsRef]);
-
-  // The right panel survives activity-bar view switches (only CSS hides the
-  // outgoing view), so a mounted panel never re-reads its defaultSize. A view
-  // that has been resized gets that width pushed here; one that never has gets
-  // the width it is supposed to open at, which the element would otherwise
-  // have taken from the view it was mounted under.
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      applyWidth(rightPanelRef, widthsRef.current?.right?.[activeRightPanel] ?? DEFAULT_RIGHT_PANEL_WIDTHS[activeRightPanel]);
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [showRightPanel, activeRightPanel, widthsRef]);
-
-  // Same story for the editor across a source↔diff tab switch: the panel
-  // stays mounted, so the width its tab kind remembers — or opens at, for a
-  // diff, which is wider than a source view — is re-applied here.
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      applyWidth(editorPanelRef, widthsRef.current?.[editorWidthMode] ?? DEFAULT_PANEL_WIDTHS[editorWidthMode]);
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [showEditor, editorWidthMode, widthsRef]);
+  // 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.
 
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [settingsCategory, setSettingsCategory] = useState<SettingsCategoryId>('appearance');
@@ -153,41 +108,30 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
   const handleChangeRightPanel = (panel: RightPanelType) => {
     let nextShow = showRightPanel;
     let nextActive = activeRightPanel;
-    
+
     if (activeRightPanel === panel && showRightPanel) {
       nextShow = false;
     } else {
       nextActive = panel;
       nextShow = true;
     }
-    
+
     setShowRightPanel(nextShow);
     setActiveRightPanel(nextActive);
-
-    // The width is not set here: the restore effect re-applies whichever width
-    // this view remembers, and a view that opens for the first time derives it
-    // from its own defaultSize. Reopening the same view keeps its width.
-    writeSetting('showRightPanel', nextShow);
-    writeSetting('activeRightPanel', nextActive);
   };
 
   const handleToggleLeftPanel = (show: boolean) => {
     setShowLeftPanel(show);
-    saveSetting('showLeftPanel', show);
   };
 
   const handleToggleRightPanel = () => {
-    const nextShow = !showRightPanel;
-    setShowRightPanel(nextShow);
-    saveSetting('showRightPanel', nextShow);
+    setShowRightPanel(!showRightPanel);
   };
 
   const handleToggleEditor = () => {
-    const nextShow = !showEditor;
-    setUserToggledEditor(nextShow);
-    saveSetting('userToggledEditor', nextShow);
-    // Reopening the editor re-applies the width its tab kind remembers (see the
-    // restore effect), so a dragged width survives the toggle.
+    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.
   };
 
   return (
@@ -195,18 +139,6 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
 
       {/* Main Workspace: full-height left sidebar (resizable) + right stack */}
       <div className="flex flex-1 overflow-hidden">
-        {!showLeftPanel && (
-          <div 
-            className="w-12 h-full bg-paper border-r border-ink/10 flex flex-col items-center py-3 flex-shrink-0 cursor-pointer hover:bg-ink/5 transition-colors titlebar-no-drag" 
-            style={{ paddingTop: 'max(0.75rem, env(titlebar-area-height, 0px))' }}
-            onClick={() => handleToggleLeftPanel(true)} 
-            title="Expand Sidebar"
-          >
-            <PanelLeft size={16} className="text-ink/60" />
-            <div className="w-[1px] flex-1 bg-ink/10 my-4" />
-          </div>
-        )}
-
         <Group
           orientation="horizontal"
           id="ompchamber-main"
@@ -215,14 +147,10 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
             if (left != null && left > 0) commitWidths({ left: Math.round(left) });
           }}
         >
-          {showLeftPanel && (
-            <>
-              <Panel panelRef={leftPanelRef} id="left-panel" defaultSize={panelWidths.left ?? DEFAULT_PANEL_WIDTHS.left} minSize={MIN_LEFT_PANEL_WIDTH} maxSize={MAX_LEFT_PANEL_WIDTH} collapsible>
-                <SessionSidebar className="w-full h-full" onClose={() => handleToggleLeftPanel(false)} appSettings={appSettings} />
-              </Panel>
-              <ResizeHandle />
-            </>
-          )}
+          <Panel panelRef={leftPanelRef} id="left-panel" defaultSize={panelWidths.left ?? DEFAULT_LEFT_PANEL_WIDTH} minSize={MIN_LEFT_PANEL_WIDTH} maxSize={MAX_LEFT_PANEL_WIDTH} collapsed={!showLeftPanel}>
+            <SessionSidebar className="w-full h-full" onClose={() => handleToggleLeftPanel(false)} appSettings={appSettings} />
+          </Panel>
+          {showLeftPanel && <ResizeHandle />}
 
           {/* Right stack: top navbar + resizable workspace (the group's filler) */}
           <Panel id="main-right-stack" filler minSize={0}>
@@ -236,6 +164,7 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
                 onSwitchToMobile={onSwitchToMobile}
                 onToggleEditor={handleToggleEditor}
                 onToggleRightPanel={handleToggleRightPanel}
+                onToggleLeftPanel={() => handleToggleLeftPanel(!showLeftPanel)}
               />
 
               <WorkspacePanels