ompchamber 0.3.0

package/src/client/components/workspace/diff-panel/index.tsx

@@ -0,0 +1,213 @@
+import { useCallback, useEffect, useState } from 'preact/hooks';
+import { useFetcher } from '@/client/lib/router/fetcher';
+import { useSessionUiState } from '@/client/hooks/workspace/session-state';
+import { parseUnifiedDiff } from '@/shared/lib/fs/diff-parser';
+import { getLanguageFromPath } from '@/shared/lib/code/syntax-highlight';
+import { DiffToolbar } from '@/client/components/workspace/diff-panel/Toolbar';
+import { UnifiedView } from '@/client/components/workspace/diff-panel/UnifiedView';
+import { SplitView } from '@/client/components/workspace/diff-panel/SplitView';
+import { AlertCircle, RefreshCw } from 'lucide-preact';
+
+interface DiffPanelProps {
+  filePath: string;
+  status?: string;
+  isStaged?: boolean;
+  root?: string;
+  repo?: string;
+  onOpenInEditor?: () => void;
+  onFileSaved?: () => void;
+  className?: string;
+}
+
+export function DiffPanel({
+  filePath,
+  status = 'M',
+  isStaged = false,
+  root,
+  repo = '.',
+  onOpenInEditor,
+  onFileSaved,
+  className = '',
+}: DiffPanelProps) {
+  // Read and persist view mode & whitespace preference in session_ui_state
+  const [viewMode, setViewMode] = useSessionUiState<'unified' | 'split'>('diff.viewMode', 'unified');
+  const [ignoreWhitespace, setIgnoreWhitespace] = useSessionUiState<boolean>('diff.ignoreWhitespace', false);
+
+  const [rawDiff, setRawDiff] = useState<string>('');
+  const [currentStatus, setCurrentStatus] = useState<string>(status);
+  const [currentStaged, setCurrentStaged] = useState<boolean>(isStaged);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isCopied, setIsCopied] = useState<boolean>(false);
+  const [showDiscardConfirm, setShowDiscardConfirm] = useState<boolean>(false);
+
+  const fetcher = useFetcher();
+
+  const fetchDiff = useCallback(async () => {
+    if (!filePath) return;
+    setIsLoading(true);
+    setErrorMessage(null);
+    try {
+      const params = new URLSearchParams({
+        fileDiff: '1',
+        file: filePath,
+        staged: currentStaged ? '1' : '0',
+        repo: repo || '.',
+      });
+      if (status || currentStatus) params.set('status', status || currentStatus);
+      if (root) params.set('root', root);
+
+      const res = await fetch(`/api/fs/git?${params.toString()}`);
+      const data = await res.json();
+      if (data.success) {
+        setRawDiff(data.diff || '');
+        if (data.status) setCurrentStatus(data.status);
+      } else {
+        setErrorMessage(data.error || 'Failed to load file diff');
+      }
+    } catch (err: any) {
+      setErrorMessage(err.message || 'Error fetching diff');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [filePath, currentStaged, repo, root]);
+
+  useEffect(() => {
+    setCurrentStatus(status);
+    setCurrentStaged(isStaged);
+  }, [status, isStaged, filePath]);
+
+  useEffect(() => {
+    fetchDiff();
+  }, [fetchDiff]);
+
+  const parsed = parseUnifiedDiff(rawDiff, ignoreWhitespace);
+  const language = getLanguageFromPath(filePath);
+
+  const handleToggleViewMode = () => {
+    setViewMode(viewMode === 'unified' ? 'split' : 'unified');
+  };
+
+  const handleToggleWhitespace = () => {
+    setIgnoreWhitespace(!ignoreWhitespace);
+  };
+
+  const handleCopyDiff = () => {
+    if (!rawDiff) return;
+    navigator.clipboard.writeText(rawDiff);
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 2000);
+  };
+
+  const handleStageUnstage = () => {
+    const actionType = currentStaged ? 'unstage' : 'stage';
+    const fd = new FormData();
+    fd.set('actionType', actionType);
+    fd.set('file', filePath);
+    fd.set('repo', repo || '.');
+    if (root) fd.set('root', root);
+
+    fetcher.submit(fd, { method: 'POST', action: '/api/fs/git' });
+    setCurrentStaged(!currentStaged);
+    setTimeout(() => {
+      fetchDiff();
+      onFileSaved?.();
+    }, 300);
+  };
+
+  const handleDiscard = () => {
+    setShowDiscardConfirm(true);
+  };
+
+  const confirmDiscard = () => {
+    setShowDiscardConfirm(false);
+    const fd = new FormData();
+    fd.set('actionType', 'discard');
+    fd.set('file', filePath);
+    fd.set('repo', repo || '.');
+    if (root) fd.set('root', root);
+
+    fetcher.submit(fd, { method: 'POST', action: '/api/fs/git' });
+    setTimeout(() => {
+      fetchDiff();
+      onFileSaved?.();
+    }, 300);
+  };
+
+  return (
+    <div className={`flex flex-col h-full bg-paper select-text relative font-sans ${className}`}>
+      {/* Top Diff Toolbar */}
+      <DiffToolbar
+        filePath={filePath}
+        status={currentStatus}
+        isStaged={currentStaged}
+        viewMode={viewMode}
+        ignoreWhitespace={ignoreWhitespace}
+        additions={parsed.additions}
+        deletions={parsed.deletions}
+        isLoading={isLoading}
+        isCopied={isCopied}
+        onToggleViewMode={handleToggleViewMode}
+        onToggleWhitespace={handleToggleWhitespace}
+        onStageUnstage={handleStageUnstage}
+        onDiscard={handleDiscard}
+        onOpenInEditor={onOpenInEditor}
+        onRefresh={fetchDiff}
+        onCopyDiff={handleCopyDiff}
+      />
+
+      {/* Main Diff Content Area */}
+      <div className="flex-1 overflow-hidden relative flex flex-col bg-paper">
+        {isLoading ? (
+          <div className="flex-1 flex items-center justify-center space-x-2 text-ink/50 text-xs font-mono">
+            <RefreshCw size={14} className="animate-spin" />
+            <span>Loading file diff...</span>
+          </div>
+        ) : errorMessage ? (
+          <div className="flex-1 flex flex-col items-center justify-center p-6 text-center space-y-2">
+            <AlertCircle size={20} className="text-error" />
+            <p className="text-xs text-error font-medium">{errorMessage}</p>
+            <button
+              onClick={fetchDiff}
+              className="px-3 py-1 text-xs bg-ink/10 hover:bg-ink/15 text-ink rounded font-sans transition-colors"
+            >
+              Retry
+            </button>
+          </div>
+        ) : viewMode === 'split' ? (
+          <SplitView rows={parsed.splitRows} language={language} />
+        ) : (
+          <UnifiedView lines={parsed.lines} language={language} />
+        )}
+      </div>
+
+      {/* Discard Confirmation Modal */}
+      {showDiscardConfirm && (
+        <div className="fixed inset-0 bg-ink/20 z-50 flex items-center justify-center p-4 backdrop-blur-xs">
+          <div className="bg-paper rounded-lg shadow-xl p-4 w-full max-w-sm border border-ink/15">
+            <h3 className="font-semibold text-ink mb-1.5 text-sm">Discard Changes?</h3>
+            <p className="text-xs text-ink/70 mb-4">
+              Are you sure you want to discard all unstaged changes in <span className="font-mono font-medium text-ink">{filePath}</span>? This cannot be undone.
+            </p>
+            <div className="flex justify-end space-x-2">
+              <button
+                type="button"
+                onClick={() => setShowDiscardConfirm(false)}
+                className="px-3 py-1.5 text-xs text-ink hover:bg-ink/5 rounded transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={confirmDiscard}
+                className="px-3 py-1.5 text-xs bg-error text-white rounded hover:bg-error/90 font-medium transition-colors"
+              >
+                Discard Changes
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/components/workspace/editor/Tabs.tsx

@@ -0,0 +1,149 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { FileIcon } from '@/client/components/common/file-icon';
+import { ChevronDown, GitCompare, X } from 'lucide-preact';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+import { getGitStatusInfo } from '@/shared/lib/fs/git-status';
+
+interface EditorTabsProps {
+  openedFiles: any[];
+  activeFileId: number | string | null;
+  onSelectFile: (id: number | string) => void;
+  onCloseFile: (id: number | string) => void;
+}
+
+export function EditorTabs({ openedFiles, activeFileId, onSelectFile, onCloseFile }: EditorTabsProps) {
+  const tabsContainerRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [maxVisibleTabs, setMaxVisibleTabs] = useState(5);
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  useOnClickOutside(dropdownRef, () => setShowDropdown(false));
+
+  useEffect(() => {
+    const observer = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        const width = entry.contentRect.width;
+        // Average tab width ~ 150px, dropdown button ~ 40px
+        const max = Math.max(1, Math.floor((width - 60) / 150));
+        setMaxVisibleTabs(max);
+      }
+    });
+    if (tabsContainerRef.current) {
+      observer.observe(tabsContainerRef.current);
+    }
+    return () => observer.disconnect();
+  }, []);
+
+  let visibleTabs: any[] = [];
+  let hiddenTabs: any[] = [];
+
+  if (openedFiles.length <= maxVisibleTabs) {
+    visibleTabs = openedFiles;
+  } else {
+    const activeIndex = openedFiles.findIndex(f => f.id === activeFileId);
+    const visibleSet = new Set<number | string>();
+
+    if (activeIndex !== -1 && activeFileId !== null) {
+      visibleSet.add(activeFileId);
+    }
+
+    for (let i = openedFiles.length - 1; i >= 0; i--) {
+      if (visibleSet.size >= maxVisibleTabs) break;
+      visibleSet.add(openedFiles[i].id);
+    }
+
+    visibleTabs = openedFiles.filter(f => visibleSet.has(f.id));
+    hiddenTabs = openedFiles.filter(f => !visibleSet.has(f.id));
+  }
+
+  return (
+    <div className="flex bg-ink/10 w-full relative border-b border-ink/10" ref={tabsContainerRef}>
+      <div className="flex overflow-hidden">
+        {visibleTabs.map(file => {
+          const isActive = file.id === activeFileId;
+          const isDiff = Boolean(file.isDiff);
+          const statusInfo = isDiff ? getGitStatusInfo(file.diffStatus || 'M', file.diffStaged) : null;
+
+          return (
+            <div
+              key={file.id}
+              onClick={() => onSelectFile(file.id)}
+              className={`flex items-center space-x-1.5 px-3 py-1.5 cursor-pointer border-r border-ink/10 min-w-[120px] max-w-[210px] group ${
+                isActive ? 'bg-paper border-t-2 border-t-ink text-ink' : 'bg-transparent border-t-2 border-t-transparent text-ink/60 hover:bg-paper/50'
+              }`}
+              title={file.path}
+            >
+              {isDiff ? (
+                <GitCompare size={14} className={isActive ? 'text-blue-600 dark:text-blue-400 flex-shrink-0' : 'opacity-60 flex-shrink-0'} />
+              ) : (
+                <FileIcon name={file.name} size={14} className={isActive ? 'flex-shrink-0' : 'opacity-60 flex-shrink-0'} />
+              )}
+              <span className="text-xs font-mono truncate flex-1">{file.name}</span>
+              {statusInfo && (
+                <span className={`px-1 text-[9px] font-mono font-bold rounded ${statusInfo.badgeBgClass}`}>
+                  {statusInfo.charStatus}
+                </span>
+              )}
+              <div
+                className={`p-0.5 rounded hover:bg-ink/10 ${isActive ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onCloseFile(file.id);
+                }}
+              >
+                <X size={12} />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {hiddenTabs.length > 0 && (
+        <div className="relative flex items-center ml-auto bg-ink/10" ref={dropdownRef}>
+          <button
+            className={`p-1.5 mx-1 rounded hover:bg-ink/10 text-ink/60 ${showDropdown ? 'bg-ink/10 text-ink' : ''}`}
+            onClick={() => setShowDropdown(!showDropdown)}
+            title="More open files"
+          >
+            <ChevronDown size={14} />
+          </button>
+
+          {showDropdown && (
+            <div className="absolute right-0 top-full mt-1 w-52 bg-paper border border-ink/10 rounded shadow-lg z-50 py-1">
+              <div className="px-3 py-1 text-[10px] uppercase font-mono text-ink/40 border-b border-ink/10 mb-1">
+                Older Tabs
+              </div>
+              {hiddenTabs.map(file => (
+                <div
+                  key={file.id}
+                  onClick={() => {
+                    onSelectFile(file.id);
+                    setShowDropdown(false);
+                  }}
+                  className="flex items-center space-x-2 px-3 py-1.5 hover:bg-ink/5 cursor-pointer group"
+                >
+                  {file.isDiff ? (
+                    <GitCompare size={14} className="text-blue-600 opacity-70" />
+                  ) : (
+                    <FileIcon name={file.name} size={14} className="opacity-60" />
+                  )}
+                  <span className="text-xs font-mono truncate flex-1 text-ink/80">{file.name}</span>
+                  <div
+                    className="p-0.5 rounded hover:bg-ink/10 opacity-0 group-hover:opacity-100"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onCloseFile(file.id);
+                      if (hiddenTabs.length === 1) setShowDropdown(false);
+                    }}
+                  >
+                    <X size={12} className="text-ink/60" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/components/workspace/editor/Toolbar.tsx

@@ -0,0 +1,90 @@
+import { Check, Copy, Download, Eye, EyeOff, Maximize, Save, WrapText, ZoomIn, ZoomOut } from 'lucide-preact';
+
+interface EditorToolbarProps {
+  path: string;
+  saveStatus: 'idle' | 'saving' | 'saved';
+  wordWrap: boolean;
+  isMd: boolean;
+  isPreview: boolean;
+  onSave: () => void;
+  onTogglePreview: () => void;
+  onToggleWordWrap: () => void;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onCopy: () => void;
+  onDownload: () => void;
+  onToggleMaximize: () => void;
+}
+
+export function EditorToolbar({
+  path,
+  saveStatus,
+  wordWrap,
+  isMd,
+  isPreview,
+  onSave,
+  onTogglePreview,
+  onToggleWordWrap,
+  onZoomIn,
+  onZoomOut,
+  onCopy,
+  onDownload,
+  onToggleMaximize,
+}: EditorToolbarProps) {
+  return (
+    <div className="flex items-center justify-between px-3 py-2 border-b border-ink/10 bg-paper">
+      {/* Left status */}
+      <div className="flex items-center space-x-2 text-xs font-mono text-ink/40">
+        <span className="truncate max-w-[300px]" title={path}>{path}</span>
+      </div>
+
+      {/* Right actions */}
+      <div className="flex items-center space-x-3 text-ink/40">
+        <div className="flex items-center pr-3 border-r border-ink/10">
+          <button
+            type="button"
+            onClick={onSave}
+            className="flex items-center justify-center rounded hover:bg-ink/5 transition-colors"
+            title="Save file (Ctrl+S)"
+          >
+            {saveStatus === 'saving' ? (
+              <Save size={14} className="text-amber-500 animate-pulse" />
+            ) : saveStatus === 'saved' ? (
+              <Check size={14} className="text-success" />
+            ) : (
+              <Save size={14} className="hover:text-ink cursor-pointer" />
+            )}
+          </button>
+        </div>
+
+        {isMd && (
+          <div onClick={onTogglePreview} className="flex items-center pr-3 border-r border-ink/10">
+            {isPreview ? (
+              <EyeOff size={14} className="hover:text-ink cursor-pointer" />
+            ) : (
+              <Eye size={14} className="hover:text-ink cursor-pointer" />
+            )}
+          </div>
+        )}
+
+        <div className="flex items-center space-x-2 pr-3 border-r border-ink/10">
+          <WrapText size={14} className={`cursor-pointer ${wordWrap ? 'text-ink' : 'hover:text-ink'}`} onClick={onToggleWordWrap} />
+        </div>
+
+        <div className="flex items-center space-x-2 pr-3 border-r border-ink/10">
+          <ZoomOut size={14} className="hover:text-ink cursor-pointer" onClick={onZoomOut} />
+          <ZoomIn size={14} className="hover:text-ink cursor-pointer" onClick={onZoomIn} />
+        </div>
+
+        <div className="flex items-center space-x-2 pr-3 border-r border-ink/10">
+          <Copy size={14} className="hover:text-ink cursor-pointer" onClick={onCopy} />
+          <Download size={14} className="hover:text-ink cursor-pointer" onClick={onDownload} />
+        </div>
+
+        <div className="flex items-center pl-1">
+          <Maximize size={14} className="hover:text-ink cursor-pointer" onClick={onToggleMaximize} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/editor/index.tsx

@@ -0,0 +1,189 @@
+import { useEffect, useState } from 'preact/hooks';
+import { FileIcon } from '@/client/components/common/file-icon';
+import { CodeSurface } from '@/client/components/common/code-surface';
+import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
+import { useScrollbarFade, scrollbarFadeClass } from '@/client/hooks/ui/scrollbar-fade';
+import { EditorTabs } from '@/client/components/workspace/editor/Tabs';
+import { EditorToolbar } from '@/client/components/workspace/editor/Toolbar';
+import { getDefaultContent } from '@/shared/lib/code/editor-utils';
+import { DiffPanel } from '@/client/components/workspace/diff-panel';
+import { useSessionState } from '@/client/hooks/workspace/session-state';
+import { useSessionStateContext } from '@/client/hooks/workspace/session-state/context';
+import { getSessionValue } from '@/shared/lib/workspace/session-state/store';
+import { useFileEditor } from '@/client/hooks/editor/use-file-editor';
+
+interface EditorProps {
+  className?: string;
+  openedFiles: any[];
+  activeFileId: number | string | null;
+  onSelectFile: (id: number | string) => void;
+  onCloseFile: (id: number | string) => void;
+  refreshKey?: number;
+  onFileSaved?: () => void;
+}
+
+export function Editor({ 
+  className = '', 
+  openedFiles, 
+  activeFileId, 
+  onSelectFile, 
+  onCloseFile, 
+  refreshKey = 0,
+  onFileSaved 
+}: EditorProps) {
+  const activeFile = openedFiles.find(f => f.id === activeFileId);
+  
+  const [previewMode, setPreviewMode, previewReady] = useSessionState<Record<string | number, boolean>>('editor.previewMode', {});
+  const [zoomLevel, setZoomLevel] = useSessionState<number>('editor.zoomLevel', 12);
+  const [isMaximized, setIsMaximized] = useState(false);
+  const [wordWrap, setWordWrap] = useSessionState<boolean>('editor.wordWrap', true);
+  const { sessionId } = useSessionStateContext();
+  const { isScrolling, handleScroll } = useScrollbarFade();
+
+  const editor = useFileEditor(activeFile ?? null, {
+    fallback: getDefaultContent,
+    onFileSaved,
+  });
+
+  useEffect(() => {
+    if (refreshKey > 0) editor.reset();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refreshKey]);
+
+  useEffect(() => {
+    editor.retain(openedFiles.map(f => f.id));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [openedFiles]);
+
+  useEffect(() => {
+    if (!previewReady) return;
+    const id = activeFile?.id;
+    if (id === undefined || id === null) return;
+    if (!activeFile.name.endsWith('.md')) return;
+    const stored = getSessionValue<Record<string | number, boolean>>(sessionId, 'editor.previewMode');
+    if (stored && stored[id] !== undefined) return;
+    setPreviewMode(prev => (prev[id] === undefined ? { ...prev, [id]: true } : prev));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [previewReady, activeFile]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: globalThis.KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+        e.preventDefault();
+        editor.saveNow();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor.saveNow]);
+
+  const togglePreview = () => {
+    if (!activeFile) return;
+    setPreviewMode(prev => ({ ...prev, [activeFile.id]: !prev[activeFile.id] }));
+  };
+
+  if (openedFiles.length === 0) {
+    return (
+      <div className={`flex flex-col h-full bg-canvas items-center justify-center text-ink/40 ${className}`}>
+        <FileIcon name="placeholder.txt" size={48} className="mb-4 opacity-20" />
+        <p className="font-mono text-sm">Select a file to open</p>
+      </div>
+    );
+  }
+
+  const currentContent = editor.content;
+  const isMd = activeFile?.name.endsWith('.md');
+  const isPreview = activeFile ? previewMode[activeFile.id] : false;
+  const toolbarSaveStatus = editor.saveStatus === 'error' ? 'idle' : editor.saveStatus;
+
+  const editorContainerClass = isMaximized 
+    ? 'fixed inset-0 z-50 flex flex-col bg-canvas' 
+    : `flex flex-col h-full bg-canvas ${className}`;
+
+  return (
+    <div className={editorContainerClass}>
+      <EditorTabs
+        openedFiles={openedFiles}
+        activeFileId={activeFileId}
+        onSelectFile={onSelectFile}
+        onCloseFile={onCloseFile}
+      />
+
+      {activeFile ? (
+        activeFile.isDiff ? (
+          <DiffPanel
+            filePath={activeFile.path}
+            status={activeFile.diffStatus || 'M'}
+            isStaged={Boolean(activeFile.diffStaged)}
+            root={activeFile.root}
+            repo={activeFile.repo || '.'}
+            onOpenInEditor={() => {
+              // Convert diff tab to regular editor tab
+              activeFile.isDiff = false;
+              onSelectFile(activeFile.id);
+            }}
+            onFileSaved={onFileSaved}
+            className="flex-1"
+          />
+        ) : (
+          <>
+            <EditorToolbar
+              path={activeFile.path}
+              saveStatus={toolbarSaveStatus}
+              wordWrap={wordWrap}
+              isMd={isMd}
+              isPreview={isPreview}
+              onSave={editor.saveNow}
+              onTogglePreview={togglePreview}
+              onToggleWordWrap={() => setWordWrap(!wordWrap)}
+              onZoomIn={() => setZoomLevel(z => Math.min(24, z + 1))}
+              onZoomOut={() => setZoomLevel(z => Math.max(8, z - 1))}
+              onCopy={editor.copy}
+              onDownload={editor.download}
+              onToggleMaximize={() => setIsMaximized(!isMaximized)}
+            />
+
+            <div onScroll={handleScroll} className={`flex-1 overflow-auto bg-paper flex ${scrollbarFadeClass(isScrolling)}`}>
+              {(isMd && isPreview) ? (
+                <div className="p-6 prose prose-sm max-w-4xl mx-auto font-sans flex-1" style={{ fontSize: `${zoomLevel}px` }}>
+                  <MarkdownRenderer content={currentContent} />
+                </div>
+              ) : (
+                <CodeSurface
+                  value={currentContent}
+                  onValueChange={editor.onChange}
+                  language={editor.language}
+                  wordWrap={wordWrap}
+                  rootClassName="flex"
+                  gutterClassName="flex flex-col text-right pl-4 pr-3 select-none text-ink/30 font-mono border-r border-ink/10 bg-canvas sticky left-0 z-10"
+                  gutterStyle={{
+                    fontSize: zoomLevel,
+                    paddingTop: 16,
+                    paddingBottom: 16,
+                    lineHeight: 1.5,
+                    fontFamily: '"Fira Code", "JetBrains Mono", "SF Mono", Consolas, monospace',
+                  }}
+                  gutterLineClassName="min-w-[1.5rem]"
+                  editorWrapperClassName="flex-1 min-w-max code-surface"
+                  editorPadding={16}
+                  editorClassName="font-mono focus:outline-none"
+                  editorStyle={{
+                    fontFamily: '"Fira Code", "JetBrains Mono", "SF Mono", Consolas, monospace',
+                    fontSize: zoomLevel,
+                    lineHeight: 1.5,
+                    minHeight: '100%',
+                  }}
+                />
+              )}
+            </div>
+          </>
+        )
+      ) : (
+        <div className="flex-1 flex items-center justify-center text-ink/40">
+          <p className="font-mono text-sm">Select a tab to view content</p>
+        </div>
+      )}
+    </div>
+  );
+}