ompchamber 2.0.2 → 3.1.0

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

@@ -1,13 +1,23 @@
-import { Check, Copy, Download, Eye, EyeOff, Maximize, Save, WrapText, ZoomIn, ZoomOut } from 'lucide-preact';
+import { AlertCircle, Check, Copy, Download, Eye, EyeOff, Maximize, Minimize, Save, Search, WrapText, ZoomIn, ZoomOut } from 'lucide-preact';
+
+export type EditorSaveStatus = 'idle' | 'saving' | 'saved' | 'error';
 
 interface EditorToolbarProps {
   path: string;
-  saveStatus: 'idle' | 'saving' | 'saved';
+  saveStatus: EditorSaveStatus;
   wordWrap: boolean;
   isMd: boolean;
   isPreview: boolean;
+  /** True for the 1.5s after a copy landed, so the button can confirm it. */
+  copied: boolean;
   /** Raster image: no text to save or wrap, and zoom belongs to the picture. */
   isImage?: boolean;
+  /** A read failure left no trustworthy buffer, so there is nothing to save. */
+  saveDisabled?: boolean;
+  isMaximized?: boolean;
+  /** Find/replace is open — the button reflects it and toggles the bar. */
+  findOpen?: boolean;
+  onToggleFind: () => void;
   onSave: () => void;
   onTogglePreview: () => void;
   onToggleWordWrap: () => void;
@@ -18,13 +28,27 @@ interface EditorToolbarProps {
   onToggleMaximize: () => void;
 }
 
+/**
+ * Shared icon-button shell. Every action here is icon-only, so each one carries
+ * a `title` (the tooltip) and an `aria-label` (the accessible name) — a bare
+ * `<svg onClick>` is unreachable by keyboard and unlabeled to a screen reader.
+ * `p-1.5` also gives the 14px glyph a ~26px hit target.
+ */
+const ACTION_CLASS =
+  'flex items-center justify-center p-1.5 rounded transition-colors cursor-pointer disabled:cursor-default disabled:opacity-50';
+
 export function EditorToolbar({
   path,
   saveStatus,
   wordWrap,
   isMd,
   isPreview,
+  copied,
   isImage = false,
+  saveDisabled = false,
+  isMaximized = false,
+  findOpen = false,
+  onToggleFind,
   onSave,
   onTogglePreview,
   onToggleWordWrap,
@@ -34,65 +58,144 @@ export function EditorToolbar({
   onDownload,
   onToggleMaximize,
 }: EditorToolbarProps) {
+  const saveTitle =
+    saveDisabled
+      ? 'Nothing to save — this file could not be read'
+      : saveStatus === 'saving'
+        ? 'Saving…'
+        : saveStatus === 'error'
+          ? 'Save failed — the file on disk was not changed'
+          : 'Save file (Ctrl+S)';
+
   return (
-    <div className="flex items-center justify-between px-3 py-2 border-b border-ink/10 bg-paper">
+    <div className="flex items-center justify-between px-3 py-2 border-b border-ink/10 bg-paper flex-shrink-0">
       {/* Left status */}
-      <div className="flex items-center space-x-2 text-xs font-mono text-ink/40">
+      <div className="flex items-center space-x-2 text-xs font-mono text-ink/40 min-w-0">
         <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 space-x-1 text-ink/40 flex-shrink-0">
         {!isImage && (
-          <div className="flex items-center pr-3 border-r border-ink/10">
+          <div className="flex items-center pr-2 mr-1 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)"
+              disabled={saveDisabled || saveStatus === 'saving'}
+              className={`${ACTION_CLASS} hover:bg-ink/5`}
+              title={saveTitle}
+              aria-label={saveTitle}
             >
               {saveStatus === 'saving' ? (
                 <Save size={14} className="text-amber-500 animate-pulse" />
               ) : saveStatus === 'saved' ? (
                 <Check size={14} className="text-success" />
+              ) : saveStatus === 'error' ? (
+                <AlertCircle size={14} className="text-error" />
               ) : (
-                <Save size={14} className="hover:text-ink cursor-pointer" />
+                <Save size={14} className="hover:text-ink" />
               )}
             </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 className="flex items-center pr-2 mr-1 border-r border-ink/10">
+            <button
+              type="button"
+              onClick={onTogglePreview}
+              className={`${ACTION_CLASS} hover:bg-ink/5 ${isPreview ? 'text-ink' : 'hover:text-ink'}`}
+              title={isPreview ? 'Show markdown source' : 'Preview markdown'}
+              aria-label={isPreview ? 'Show markdown source' : 'Preview markdown'}
+              aria-pressed={isPreview}
+            >
+              {isPreview ? <EyeOff size={14} /> : <Eye size={14} />}
+            </button>
           </div>
         )}
 
         {!isImage && (
           <>
-            <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 className="flex items-center pr-2 mr-1 border-r border-ink/10">
+              <button
+                type="button"
+                onClick={onToggleFind}
+                className={`${ACTION_CLASS} hover:bg-ink/5 ${findOpen ? 'text-ink' : 'hover:text-ink'}`}
+                title="Find and replace (Ctrl+F)"
+                aria-label="Find and replace"
+                aria-pressed={findOpen}
+              >
+                <Search size={14} />
+              </button>
             </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 className="flex items-center pr-2 mr-1 border-r border-ink/10">
+              <button
+                type="button"
+                onClick={onToggleWordWrap}
+                className={`${ACTION_CLASS} hover:bg-ink/5 ${wordWrap ? 'text-ink' : 'hover:text-ink'}`}
+                title={wordWrap ? 'Word wrap on' : 'Word wrap off'}
+                aria-label={wordWrap ? 'Word wrap on' : 'Word wrap off'}
+                aria-pressed={wordWrap}
+              >
+                <WrapText size={14} />
+              </button>
+            </div>
+
+            <div className="flex items-center pr-2 mr-1 border-r border-ink/10">
+              <button
+                type="button"
+                onClick={onZoomOut}
+                className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink`}
+                title="Decrease font size"
+                aria-label="Decrease font size"
+              >
+                <ZoomOut size={14} />
+              </button>
+              <button
+                type="button"
+                onClick={onZoomIn}
+                className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink`}
+                title="Increase font size"
+                aria-label="Increase font size"
+              >
+                <ZoomIn size={14} />
+              </button>
             </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 className="flex items-center pr-2 mr-1 border-r border-ink/10">
+          <button
+            type="button"
+            onClick={onCopy}
+            className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink`}
+            title={copied ? 'Copied' : isImage ? 'Copy image' : 'Copy content'}
+            aria-label={copied ? 'Copied' : isImage ? 'Copy image' : 'Copy content'}
+          >
+            {copied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
+          </button>
+          <button
+            type="button"
+            onClick={onDownload}
+            className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink`}
+            title="Download file"
+            aria-label="Download file"
+          >
+            <Download size={14} />
+          </button>
         </div>
 
-        <div className="flex items-center pl-1">
-          <Maximize size={14} className="hover:text-ink cursor-pointer" onClick={onToggleMaximize} />
-        </div>
+        <button
+          type="button"
+          onClick={onToggleMaximize}
+          className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink ${isMaximized ? 'text-ink' : ''}`}
+          title={isMaximized ? 'Exit full screen' : 'Full screen'}
+          aria-label={isMaximized ? 'Exit full screen' : 'Full screen'}
+          aria-pressed={isMaximized}
+        >
+          {isMaximized ? <Minimize size={14} /> : <Maximize size={14} />}
+        </button>
       </div>
     </div>
   );

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

@@ -1,17 +1,24 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import type { TargetedKeyboardEvent } from 'preact';
+import { AlertTriangle, Loader2 } from 'lucide-preact';
 import { FileIcon } from '@/client/components/common/file-icon';
-import { CodeSurface } from '@/client/components/common/code-surface';
+import { CodeSurface, type CodeSurfaceHandle } 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 { FindWidget } from '@/client/components/workspace/editor/FindWidget';
+import { CommandPalette } from '@/client/components/workspace/editor/CommandPalette';
+import { EDITOR_KEY_BINDINGS, isFindBarCommand, type EditorCommand } from '@/shared/lib/code/editor/keymap';
+import type { TextRange } from '@/shared/lib/code/editor/commands';
+import { resolveBinding } from '@/shared/lib/ui/key-binding';
 import { ImageViewer } from '@/client/components/common/image-viewer';
-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';
+import { useEditorFind } from '@/client/hooks/editor/use-editor-find';
 
 interface EditorProps {
   className?: string;
@@ -19,6 +26,8 @@ interface EditorProps {
   activeFileId: number | string | null;
   onSelectFile: (id: number | string) => void;
   onCloseFile: (id: number | string) => void;
+  /** Replace a diff tab with the plain editor tab for the same file. */
+  onConvertDiffToEditor: (id: number | string) => void;
   refreshKey?: number;
   onFileSaved?: () => void;
 }
@@ -29,6 +38,7 @@ export function Editor({
   activeFileId, 
   onSelectFile, 
   onCloseFile, 
+  onConvertDiffToEditor,
   refreshKey = 0,
   onFileSaved 
 }: EditorProps) {
@@ -38,14 +48,35 @@ export function Editor({
   const [zoomLevel, setZoomLevel] = useSessionState<number>('editor.zoomLevel', 12);
   const [isMaximized, setIsMaximized] = useState(false);
   const [wordWrap, setWordWrap] = useSessionState<boolean>('editor.wordWrap', true);
+  /** Extra ⌘D ranges; the surface paints them and the editor edits them by replication. */
+  const [occurrences, setOccurrences] = useState<readonly TextRange[]>([]);
+  const [paletteOpen, setPaletteOpen] = useState(false);
   const { sessionId } = useSessionStateContext();
   const { isScrolling, handleScroll } = useScrollbarFade();
+  const surfaceRef = useRef<CodeSurfaceHandle | null>(null);
 
   const editor = useFileEditor(activeFile ?? null, {
-    fallback: getDefaultContent,
+    // A file that could not be read must report the failure, not substitute
+    // placeholder text — the mock sample used to be written straight over the
+    // real file by the next save.
+    reportSaveError: true,
     onFileSaved,
   });
 
+  const find = useEditorFind({
+    text: editor.content,
+    documentKey: `${activeFile?.id ?? ''}\u0000${editor.language}`,
+    readSelection: () => surfaceRef.current?.getSelection() ?? null,
+    select: (start, end, focus = true) => surfaceRef.current?.select(start, end, focus),
+    reveal: (offset) => surfaceRef.current?.revealOffset(offset),
+    applyDocument: (value, caretStart, caretEnd) => surfaceRef.current?.applyDocument(value, caretStart, caretEnd),
+    toggleWordWrap: () => setWordWrap((previous) => !previous),
+  });
+  // The capture handler below is rebuilt on every render anyway (it reads the
+  // find state), so it is kept in a ref and the listener attached once.
+  const findRef = useRef(find);
+  findRef.current = find;
+
   useEffect(() => {
     if (refreshKey > 0) editor.reset();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -84,6 +115,69 @@ export function Editor({
     setPreviewMode(prev => ({ ...prev, [activeFile.id]: !prev[activeFile.id] }));
   };
 
+  /**
+   * The one place a command runs, whatever asked for it — a chord, a toolbar
+   * button or the palette. Splitting this by source is how a command ends up
+   * working from the keyboard but not from the palette (or the reverse).
+   */
+  const runCommand = (command: EditorCommand) => {
+    if (isFindBarCommand(command)) {
+      findRef.current.runCommand(command);
+      return;
+    }
+    if (command === 'toggleWordWrap') {
+      setWordWrap((previous) => !previous);
+      return;
+    }
+    // Everything else is the editor's, and it runs through the editor's own
+    // dispatcher — the palette is a second way IN, never a second implementation.
+    surfaceRef.current?.runCommand(command);
+  };
+
+  /**
+   * Editor shortcuts, on the CAPTURE phase of the panel.
+   *
+   * Capture is what makes them work while focus is inside the document: the
+   * `<textarea>` has its own handler (Tab, undo, Escape-to-blur) and would
+   * otherwise see these first. Only the commands the PANEL owns are consumed
+   * here — the editor's own keymap runs in the textarea, where it has the
+   * buffer and the caret in hand.
+   *
+   * The panel is the scope, not the window: another panel's text field keeps
+   * its own ⌘F, and the composer is untouched.
+   */
+  const handlePanelKeyDown = (event: TargetedKeyboardEvent<HTMLDivElement>) => {
+    const current = findRef.current;
+    if (event.key === 'Escape') {
+      if (paletteOpen) {
+        event.preventDefault();
+        event.stopPropagation();
+        setPaletteOpen(false);
+        return;
+      }
+      if (!current.open) return;
+      event.preventDefault();
+      event.stopPropagation();
+      current.close();
+      return;
+    }
+    // ⌘⇧P opens the palette — the one chord that is not an editor command.
+    if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.code === 'KeyP') {
+      event.preventDefault();
+      event.stopPropagation();
+      setPaletteOpen(true);
+      return;
+    }
+    // While the bar is open, an unmodified key in one of ITS fields belongs to
+    // the field — but F3 and the ⌘-chords below still dispatch, so stepping to
+    // the next match from inside the find field works.
+    const command = resolveBinding(EDITOR_KEY_BINDINGS, event);
+    if (!command || !isFindBarCommand(command)) return;
+    event.preventDefault();
+    event.stopPropagation();
+    runCommand(command);
+  };
+
   if (openedFiles.length === 0) {
     return (
       <div className={`flex flex-col h-full bg-canvas items-center justify-center text-ink/40 ${className}`}>
@@ -96,14 +190,13 @@ export function Editor({
   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}>
+    <div className={editorContainerClass} onKeyDownCapture={handlePanelKeyDown}>
       <EditorTabs
         openedFiles={openedFiles}
         activeFileId={activeFileId}
@@ -119,11 +212,7 @@ export function Editor({
             isStaged={Boolean(activeFile.diffStaged)}
             root={activeFile.root}
             repo={activeFile.repo || '.'}
-            onOpenInEditor={() => {
-              // Convert diff tab to regular editor tab
-              activeFile.isDiff = false;
-              onSelectFile(activeFile.id);
-            }}
+            onOpenInEditor={() => onConvertDiffToEditor(activeFile.id)}
             onFileSaved={onFileSaved}
             className="flex-1"
           />
@@ -131,11 +220,16 @@ export function Editor({
           <>
             <EditorToolbar
               path={activeFile.path}
-              saveStatus={toolbarSaveStatus}
+              saveStatus={editor.saveStatus}
               wordWrap={wordWrap}
               isMd={isMd}
               isPreview={isPreview}
+              copied={editor.copied}
               isImage={editor.isImage}
+              saveDisabled={Boolean(editor.loadError)}
+              isMaximized={isMaximized}
+              findOpen={find.open}
+              onToggleFind={() => (find.open ? find.close() : find.openFind())}
               onSave={editor.saveNow}
               onTogglePreview={togglePreview}
               onToggleWordWrap={() => setWordWrap(!wordWrap)}
@@ -151,58 +245,82 @@ export function Editor({
               // the scrolling text container — a wheel there would scroll the
               // pane instead of zooming the image.
               <ImageViewer src={editor.imageUrl} name={activeFile.name} className="flex-1 min-h-0" />
+            ) : editor.isLoading ? (
+              <div className="flex-1 flex items-center justify-center gap-2 text-ink/40 text-xs font-mono">
+                <Loader2 size={14} className="animate-spin" />
+                <span>Loading file content…</span>
+              </div>
+            ) : editor.loadError ? (
+              // A read that failed must say so. Without this the pane rendered
+              // an empty (or substituted) buffer, and the next save wrote it
+              // over the real file.
+              <div className="flex-1 flex flex-col items-center justify-center gap-2 px-6 text-center">
+                <AlertTriangle size={20} className="text-error" />
+                <span className="text-xs text-error font-sans">Could not read {activeFile.name}</span>
+                <span className="text-[11px] text-ink/50 font-mono break-all">{editor.loadError}</span>
+              </div>
             ) : (
-              <div onScroll={handleScroll} className={`flex-1 overflow-auto bg-paper flex ${scrollbarFadeClass(isScrolling)}`}>
-                {(isMd && isPreview) ? (
-                  // No `prose` wrapper: markdown is styled by `.prose-content`
-                  // alone (the same system the chat timeline uses). The
-                  // typography plugin fought it — `.prose img` added 2em
-                  // vertical margins that ballooned a badge row into its own
-                  // line box, and `--tw-prose-*` colors ignored the theme.
-                  <div className="p-6 max-w-4xl mx-auto font-sans flex-1" style={{ fontSize: `${zoomLevel}px` }}>
-                    <MarkdownRenderer
-                      content={currentContent}
-                      document
-                      scope={{ path: activeFile.path, root: activeFile.root, repo: activeFile.repo }}
+              <div className="relative flex-1 min-h-0 flex flex-col">
+                {find.open ? <FindWidget find={find} /> : null}
+                {paletteOpen ? <CommandPalette onRun={runCommand} onClose={() => setPaletteOpen(false)} /> : null}
+                <div onScroll={handleScroll} className={`flex-1 overflow-auto bg-paper flex ${scrollbarFadeClass(isScrolling)}`}>
+                  {(isMd && isPreview) ? (
+                    // No `prose` wrapper: markdown is styled by `.prose-content`
+                    // alone (the same system the chat timeline uses). The
+                    // typography plugin fought it — `.prose img` added 2em
+                    // vertical margins that ballooned a badge row into its own
+                    // line box, and `--tw-prose-*` colors ignored the theme.
+                    <div className="p-6 max-w-4xl mx-auto font-sans flex-1" style={{ fontSize: `${zoomLevel}px` }}>
+                      <MarkdownRenderer
+                        content={currentContent}
+                        document
+                        scope={{ path: activeFile.path, root: activeFile.root, repo: activeFile.repo }}
+                      />
+                    </div>
+                  ) : (
+                    <CodeSurface
+                      ref={surfaceRef}
+                      value={currentContent}
+                      onValueChange={editor.onChange}
+                      language={editor.language}
+                      wordWrap={wordWrap}
+                      marks={find.open ? find.matches : undefined}
+                      currentMark={find.currentIndex}
+                      occurrences={occurrences}
+                      onOccurrencesChange={setOccurrences}
+                      onCommand={runCommand}
+                      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]"
+                      // `min-w-max` keeps a long line intact and lets the panel
+                      // scroll sideways; while wrapping it would instead widen the
+                      // column past the panel, so the toggle had no effect at all.
+                      editorWrapperClassName={`flex-1 code-surface ${wordWrap ? 'min-w-0' : 'min-w-max'}`}
+                      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%',
+                        // Breathing room under the last line. It has to live on the
+                        // surface, not on the scroll container: a scroll container's
+                        // own bottom padding is not part of its scrollable overflow,
+                        // so `pb-*` on the scroller left the last line flush with the
+                        // panel's edge (measured: padding-bottom 32px did not change
+                        // scrollHeight by a single pixel).
+                        paddingBottom: 16,
+                      }}
                     />
-                  </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]"
-                    // `min-w-max` keeps a long line intact and lets the panel
-                    // scroll sideways; while wrapping it would instead widen the
-                    // column past the panel, so the toggle had no effect at all.
-                    editorWrapperClassName={`flex-1 code-surface ${wordWrap ? 'min-w-0' : 'min-w-max'}`}
-                    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%',
-                      // Breathing room under the last line. It has to live on the
-                      // surface, not on the scroll container: a scroll container's
-                      // own bottom padding is not part of its scrollable overflow,
-                      // so `pb-*` on the scroller left the last line flush with the
-                      // panel's edge (measured: padding-bottom 32px did not change
-                      // scrollHeight by a single pixel).
-                      paddingBottom: 16,
-                    }}
-                  />
-                )}
+                  )}
+                </div>
               </div>
             )}
           </>

package/src/client/components/workspace/file-explorer/Modals.tsx

@@ -1,6 +1,6 @@
 import { createPortal } from 'preact/compat';
 import type { FormEvent, RefObject } from 'preact/compat';
-import { Copy, Edit2, ExternalLink, Eye, GitCompare, History, RefreshCw, Trash2, X } from 'lucide-preact';
+import { Copy, Edit2, ExternalLink, Eye, FilePlus, GitCompare, History, RefreshCw, Trash2, X } from 'lucide-preact';
 
 interface ContextMenuProps {
   x: number;
@@ -13,7 +13,9 @@ interface ContextMenuProps {
 
 export function FileContextMenu({ x, y, isFolder, hasGitStatus, onAction, menuRef }: ContextMenuProps) {
   const menuWidth = 190;
-  const menuHeight = isFolder ? 220 : hasGitStatus ? 285 : 255;
+  // The row count differs by kind, and the clamp below needs the real height —
+  // an under-estimate puts the menu's last rows off-screen at the bottom edge.
+  const menuHeight = isFolder ? 250 : hasGitStatus ? 285 : 255;
   
   const posX = typeof window !== 'undefined' ? Math.max(10, Math.min(x, window.innerWidth - menuWidth - 12)) : x;
   const posY = typeof window !== 'undefined' ? Math.max(10, Math.min(y, window.innerHeight - menuHeight - 12)) : y;
@@ -44,6 +46,15 @@ export function FileContextMenu({ x, y, isFolder, hasGitStatus, onAction, menuRe
             )}
           </>
         )}
+        {isFolder && (
+          <>
+            <button onClick={() => onAction('new_file')} className="w-full text-left px-3 py-1.5 hover:bg-ink/5 flex items-center space-x-2 transition-colors">
+              <FilePlus size={13} className="text-ink/60" />
+              <span>New File</span>
+            </button>
+            <div className="my-1 border-t border-ink/10"></div>
+          </>
+        )}
         <button onClick={() => onAction('explorer')} className="w-full text-left px-3 py-1.5 hover:bg-ink/5 flex items-center space-x-2 transition-colors">
           <ExternalLink size={13} className="text-ink/60" />
           <span>Go to Explorer</span>
@@ -77,6 +88,72 @@ export function FileContextMenu({ x, y, isFolder, hasGitStatus, onAction, menuRe
   );
 }
 
+interface NewFileModalProps {
+  /** Folder the file will be created in, relative to the listed root. */
+  folderPath: string;
+  value: string;
+  /** Server's refusal (a name that already exists, a bad character), shown inline. */
+  error?: string | null;
+  isLoading: boolean;
+  onChange: (value: string) => void;
+  onCancel: () => void;
+  onSubmit: (e: FormEvent) => void;
+}
+
+/**
+ * The "New File" dialog.
+ *
+ * Only a name is asked for — the folder is the one that was right-clicked, and
+ * showing it as a fixed prefix is what makes the field's meaning unambiguous.
+ * The input starts empty (no `.txt` default): a name is what the user has in
+ * mind, and a prefilled suffix is a character to delete before every keystroke
+ * lands. The server's refusal is rendered INLINE rather than as a toast: the
+ * field is still open, and "already exists" is a message about what to type
+ * next, not a notification about something that happened.
+ */
+export function FileCreateModal({ folderPath, value, error, isLoading, onChange, onCancel, onSubmit }: NewFileModalProps) {
+  return createPortal(
+    <div className="fixed inset-0 bg-ink/20 z-[100] flex items-center justify-center p-4 backdrop-blur-sm">
+      <form onSubmit={onSubmit} className="bg-paper rounded shadow-xl p-4 w-full max-w-sm border border-ink/10 font-sans">
+        <h3 className="font-semibold text-ink mb-3 text-sm">New File</h3>
+        <div className="flex items-center gap-1 mb-1 text-xs font-mono text-ink/50 min-w-0">
+          <span className="truncate" title={folderPath}>{folderPath || '.'}/</span>
+        </div>
+        <input
+          autoFocus
+          type="text"
+          value={value}
+          onChange={e => onChange(e.currentTarget.value)}
+          placeholder="file name"
+          aria-label="New file name"
+          className={`w-full bg-paper border rounded px-2 py-1.5 text-xs font-mono focus:outline-none mb-2 ${
+            error ? 'border-error' : 'border-ink/20 focus:border-ink'
+          }`}
+        />
+        {error && <p className="text-[11px] text-error mb-2">{error}</p>}
+        <div className="flex justify-end space-x-2 mt-2">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="px-3 py-1.5 text-xs text-ink hover:bg-ink/5 rounded transition-colors"
+            disabled={isLoading}
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className="px-3 py-1.5 text-xs bg-ink text-canvas rounded hover:bg-ink/90 transition-colors flex items-center"
+            disabled={isLoading || !value.trim()}
+          >
+            {isLoading ? 'Creating...' : 'Create'}
+          </button>
+        </div>
+      </form>
+    </div>,
+    document.body
+  );
+}
+
 interface DeleteModalProps {
   fileName: string;
   isFolder: boolean;