ompchamber 1.0.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ompchamber",
-  "version": "1.0.0",
+  "version": "1.2.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/common/file-icon/index.tsx

@@ -9,6 +9,7 @@ import {
   FolderOpen,
 } from 'lucide-preact';
 import { BRAND_ICONS, BRAND_VIEWBOX, type BrandIconName } from '@/client/components/common/file-icon/brand-paths';
+import { getImageMimeType } from '@/shared/lib/fs/file-kind';
 
 interface FileIconProps {
   name: string;
@@ -110,7 +111,9 @@ export function FileIcon({ name, isFolder, isOpen, size = 14, className = '' }:
   if (lowerName.endsWith('.md') || lowerName.endsWith('.txt')) {
     return <FileText size={size} className={`text-ink/70 ${className}`} />;
   }
-  if (lowerName.endsWith('.png') || lowerName.endsWith('.jpg') || lowerName.endsWith('.jpeg') || lowerName.endsWith('.svg') || lowerName.endsWith('.ico') || lowerName.endsWith('.webp')) {
+  // SVG is text the editor edits as code, but it is still a picture to the eye,
+  // so the icon stays the image glyph for it.
+  if (getImageMimeType(lowerName) || lowerName.endsWith('.svg')) {
     return <FileImage size={size} color="#c084fc" className={className} />;
   }
   if (lowerName.endsWith('.sh') || lowerName.endsWith('.bash')) {

package/src/client/components/common/image-viewer/index.tsx

@@ -0,0 +1,224 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The picture surface used wherever a file is opened and turns out to be an
+ * image — the desktop editor panel, the phone's full-screen editor, and the
+ * chat `read` tool card. An image has no text, so this replaces the code
+ * surface entirely: an `<img>` against the raw-byte route, a checker backdrop
+ * for transparency, and zoom/pan that mirror the diagram viewer so the two
+ * full-size viewers behave the same way.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import type { TargetedPointerEvent, TargetedWheelEvent } from 'preact';
+import { AlertTriangle, Loader2 } from 'lucide-preact';
+
+const MIN_SCALE = 0.1;
+const MAX_SCALE = 16;
+/** Zoom step for the buttons and the +/- keys. */
+const ZOOM_STEP = 1.4;
+/** Wheel `deltaY` → scale exponent, matching the diagram viewer's feel. */
+const WHEEL_SENSITIVITY = 0.0015;
+/** Pixels kept clear around a fitted picture. */
+const FIT_MARGIN = 48;
+
+interface ImageViewerProps {
+  /** Raw-byte URL; a different URL is a different picture. */
+  src: string;
+  name: string;
+  className?: string;
+}
+
+interface Drag {
+  pointerId: number;
+  x: number;
+  y: number;
+}
+
+/**
+ * The stateful surface, keyed on `src` by `ImageViewer` — remounting on a new
+ * URL is what guarantees a refresh cannot inherit the previous picture's fit,
+ * pan offset, or decode error.
+ */
+function ImageSurface({ src, name, className = '' }: ImageViewerProps) {
+  const stageRef = useRef<HTMLDivElement>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+  const dragRef = useRef<Drag | null>(null);
+
+  const [natural, setNatural] = useState<{ width: number; height: number } | null>(null);
+  const [scale, setScale] = useState(1);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const [dragging, setDragging] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  /** Read the decoded size off the element; false while it is not decodable yet. */
+  const measure = useCallback((): boolean => {
+    const image = imageRef.current;
+    if (!image || !image.complete || image.naturalWidth === 0) return false;
+    setNatural({ width: image.naturalWidth, height: image.naturalHeight });
+    return true;
+  }, []);
+
+  // A cached picture can be complete before its `load` handler is attached, so
+  // the size is read once on mount as well — otherwise a re-opened image sat
+  // at 100% with no dimensions reported and Fit had nothing to fit to.
+  useEffect(() => {
+    measure();
+  }, [measure]);
+
+  /** Scale that fits the whole picture without upscaling it past 1. */
+  const fitToView = useCallback(() => {
+    const image = imageRef.current;
+    const stage = stageRef.current?.getBoundingClientRect();
+    const width = image?.naturalWidth ?? 0;
+    const height = image?.naturalHeight ?? 0;
+    if (!stage || !width || !height) return;
+    setScale(
+      Math.min(
+        1,
+        Math.max(MIN_SCALE, (stage.width - FIT_MARGIN) / width, (stage.height - FIT_MARGIN) / height),
+      ),
+    );
+    setOffset({ x: 0, y: 0 });
+  }, []);
+
+  // Fit once per picture. Re-measuring on every render would fight an
+  // in-progress zoom, and `natural` only changes for a new decode.
+  useEffect(() => {
+    if (natural) fitToView();
+  }, [natural, fitToView]);
+
+  const zoomBy = useCallback((factor: number) => {
+    setScale((current) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, current * factor)));
+  }, []);
+
+  const handleWheel = useCallback(
+    (event: TargetedWheelEvent<HTMLDivElement>) => {
+      // Without this the editor panel scrolls while zooming.
+      event.preventDefault();
+      zoomBy(Math.exp(-event.deltaY * WHEEL_SENSITIVITY));
+    },
+    [zoomBy],
+  );
+
+  const handlePointerDown = useCallback((event: TargetedPointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0 || !natural) return;
+    dragRef.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDragging(true);
+  }, [natural]);
+
+  const handlePointerMove = useCallback((event: TargetedPointerEvent<HTMLDivElement>) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    const dx = event.clientX - drag.x;
+    const dy = event.clientY - drag.y;
+    drag.x = event.clientX;
+    drag.y = event.clientY;
+    setOffset((current) => ({ x: current.x + dx, y: current.y + dy }));
+  }, []);
+
+  const endDrag = useCallback((event: TargetedPointerEvent<HTMLDivElement>) => {
+    if (dragRef.current?.pointerId !== event.pointerId) return;
+    dragRef.current = null;
+    setDragging(false);
+  }, []);
+
+  const handleDoubleClick = useCallback(() => {
+    if (Math.abs(scale - 1) < 0.01) fitToView();
+    else {
+      setScale(1);
+      setOffset({ x: 0, y: 0 });
+    }
+  }, [scale, fitToView]);
+
+  useEffect(() => {
+    const onKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key !== '+' && event.key !== '=' && event.key !== '-' && event.key !== '_' && event.key !== '0') return;
+      // The stage owns these keys only while it has focus; a window-level
+      // listener would steal `-`/`0` from the composer and the file search box.
+      const target = event.target as HTMLElement | null;
+      if (!target || !stageRef.current?.contains(target)) return;
+      event.preventDefault();
+      if (event.key === '0') fitToView();
+      else if (event.key === '+' || event.key === '=') zoomBy(ZOOM_STEP);
+      else zoomBy(1 / ZOOM_STEP);
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [zoomBy, fitToView]);
+
+  const percent = Math.round(scale * 100);
+  const dimensions = natural ? `${natural.width} × ${natural.height} px` : '';
+
+  return (
+    <div className={`relative flex h-full w-full flex-col bg-paper ${className}`}>
+      <div
+        ref={stageRef}
+        tabIndex={-1}
+        onWheel={handleWheel}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={endDrag}
+        onPointerCancel={endDrag}
+        onDblClick={handleDoubleClick}
+        className={`image-stage relative flex-1 overflow-hidden outline-none ${dragging ? 'cursor-grabbing' : 'cursor-grab'}`}
+      >
+        {error ? (
+          <div className="flex h-full flex-col items-center justify-center gap-2 px-6 text-center">
+            <AlertTriangle size={20} className="text-error" />
+            <span className="font-sans text-xs text-error">Could not read {name}</span>
+            <span className="break-all font-mono text-[11px] text-ink/50">{error}</span>
+          </div>
+        ) : (
+          <>
+            {!natural && (
+              <div className="absolute inset-0 flex items-center justify-center gap-2 text-xs text-ink/40">
+                <Loader2 size={14} className="animate-spin" />
+                <span>Loading image…</span>
+              </div>
+            )}
+            <div className="absolute inset-0 flex items-center justify-center">
+              <img
+                ref={imageRef}
+                src={src}
+                alt={name}
+                draggable={false}
+                onLoad={measure}
+                onError={() => setError('The file could not be decoded as an image.')}
+                className="image-canvas max-h-none max-w-none select-none"
+                style={{
+                  transform: `translate3d(${offset.x}px, ${offset.y}px, 0) scale(${scale})`,
+                  visibility: natural ? 'visible' : 'hidden',
+                }}
+              />
+            </div>
+          </>
+        )}
+      </div>
+
+      <div className="flex flex-shrink-0 items-center justify-between border-t border-ink/10 bg-canvas px-3 py-1.5 font-mono text-[10px] text-ink/50">
+        <span>{dimensions}</span>
+        <div className="flex items-center gap-3">
+          <button type="button" onClick={() => zoomBy(1 / ZOOM_STEP)} className="hover:text-ink" title="Zoom out (-)">
+            −
+          </button>
+          <span className="w-10 text-center tabular-nums">{percent}%</span>
+          <button type="button" onClick={() => zoomBy(ZOOM_STEP)} className="hover:text-ink" title="Zoom in (+)">
+            +
+          </button>
+          <button type="button" onClick={fitToView} className="hover:text-ink" title="Fit to view (0)">
+            Fit
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ImageViewer(props: ImageViewerProps) {
+  return <ImageSurface key={props.src} {...props} />;
+}

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} />