ompchamber 3.0.0 → 3.1.0

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

@@ -0,0 +1,219 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useEffect, useRef } from 'preact/hooks';
+import type { ComponentChildren, TargetedKeyboardEvent } from 'preact';
+import {
+  ArrowDown,
+  ArrowUp,
+  CaseSensitive,
+  ChevronDown,
+  ChevronUp,
+  Regex,
+  Replace,
+  ReplaceAll,
+  WholeWord,
+  X,
+} from 'lucide-preact';
+
+import { EDITOR_KEY_BINDINGS, type EditorCommand } from '@/shared/lib/code/editor/keymap';
+import { describeBinding } from '@/shared/lib/ui/key-binding';
+import { isMacPlatform } from '@/shared/lib/util/platform';
+import type { EditorFindState } from '@/client/hooks/editor/use-editor-find';
+import type { FindOptions } from '@/shared/lib/code/editor/find';
+
+const BUTTON_CLASS =
+  'flex items-center justify-center p-1 rounded transition-colors cursor-pointer disabled:cursor-default disabled:opacity-40';
+
+interface FindWidgetProps {
+  find: EditorFindState;
+}
+
+/** One of the three toggle buttons: `aria-pressed` is the state, the title the shortcut. */
+function ToggleButton({
+  active,
+  title,
+  onToggle,
+  children,
+}: {
+  active: boolean;
+  title: string;
+  onToggle: () => void;
+  children: ComponentChildren;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      className={`${BUTTON_CLASS} ${active ? 'bg-ink/10 text-ink' : 'text-ink/50 hover:text-ink hover:bg-ink/5'}`}
+      title={title}
+      aria-label={title}
+      aria-pressed={active}
+    >
+      {children}
+    </button>
+  );
+}
+
+/**
+ * The find/replace bar, pinned to the editor's top-right corner the way VS
+ * Code pins it.
+ *
+ * Two rows, not one: the query and its toggles, then the replacement and the
+ * two write actions. A single row would have to hide either the toggles or the
+ * replace buttons, and both are things this bar exists to expose.
+ *
+ * The counts are the honest ones — `N of M`, `M+` past the match cap, and a
+ * distinct message for a query that does not compile, because "no results" and
+ * "your regex is broken" are different answers and the user has to be able to
+ * tell them apart.
+ */
+export function FindWidget({ find }: FindWidgetProps) {
+  const queryRef = useRef<HTMLInputElement | null>(null);
+  const isMac = isMacPlatform();
+
+  useEffect(() => {
+    queryRef.current?.focus();
+    queryRef.current?.select();
+  }, [find.focusRequest]);
+
+  const total = find.matches.length;
+  const status = find.invalid
+    ? 'Invalid pattern'
+    : total === 0
+      ? find.query
+        ? 'No results'
+        : ''
+      : `${find.currentIndex + 1} of ${total}${find.truncated ? '+' : ''}`;
+
+  const handleKeyDown = (e: TargetedKeyboardEvent<HTMLInputElement>) => {
+    // Escape is NOT handled here: the editor panel owns it on the capture
+    // phase (it has to work while focus is in the document too), and a second
+    // handler here would be unreachable behind that one.
+    // Enter / ⇧Enter step the matches while the focus stays in the field.
+    if (e.key === 'Enter' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+      e.preventDefault();
+      find.step(e.shiftKey ? -1 : 1);
+    }
+  };
+
+  /** Tooltip text for a command: its palette label plus the chord it actually listens for. */
+  const withChord = (command: EditorCommand, label: string) => {
+    const binding = EDITOR_KEY_BINDINGS.find((entry) => entry.command === command);
+    return binding ? `${label} (${describeBinding(binding, isMac)})` : label;
+  };
+
+  const optionButton = (key: keyof FindOptions, label: string, command: EditorCommand, icon: ComponentChildren) => (
+    <ToggleButton active={find.options[key]} title={withChord(command, label)} onToggle={() => find.toggleOption(key)}>
+      {icon}
+    </ToggleButton>
+  );
+
+  return (
+    <div className="absolute top-2 right-4 z-30 flex flex-col gap-1 bg-paper border border-ink/15 rounded-md shadow-lg p-1.5 text-xs text-ink font-sans w-[330px]">
+      <div className="flex items-center gap-1">
+        <button
+          type="button"
+          onClick={find.toggleReplace}
+          className={`${BUTTON_CLASS} ${find.replaceOpen ? 'text-ink' : 'text-ink/50 hover:text-ink hover:bg-ink/5'}`}
+          title={find.replaceOpen ? 'Hide replace' : 'Show replace'}
+          aria-label={find.replaceOpen ? 'Hide replace' : 'Show replace'}
+          aria-pressed={find.replaceOpen}
+        >
+          {find.replaceOpen ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
+        </button>
+
+        <input
+          ref={queryRef}
+          type="text"
+          value={find.query}
+          onInput={(e) => find.setQuery(e.currentTarget.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Find"
+          aria-label="Find"
+          className={`flex-1 min-w-0 bg-canvas border rounded px-2 py-1 font-mono text-xs focus:outline-none ${
+            find.invalid ? 'border-error text-error' : 'border-ink/20 focus:border-ink text-ink'
+          }`}
+        />
+
+        {optionButton('matchCase', 'Match case', 'toggleCaseSensitive', <CaseSensitive size={13} />)}
+        {optionButton('wholeWord', 'Match whole word', 'toggleWholeWord', <WholeWord size={13} />)}
+        {optionButton('isRegex', 'Use regular expression', 'toggleRegex', <Regex size={13} />)}
+
+        <span
+          className={`font-mono text-[10px] whitespace-nowrap min-w-[52px] text-right ${find.invalid ? 'text-error' : 'text-ink/50'}`}
+          aria-live="polite"
+        >
+          {status}
+        </span>
+
+        <button
+          type="button"
+          onClick={() => find.step(-1)}
+          disabled={total === 0}
+          className={`${BUTTON_CLASS} text-ink/50 hover:text-ink hover:bg-ink/5`}
+          title={withChord('previousMatch', 'Previous match')}
+          aria-label="Previous match"
+        >
+          <ArrowUp size={13} />
+        </button>
+        <button
+          type="button"
+          onClick={() => find.step(1)}
+          disabled={total === 0}
+          className={`${BUTTON_CLASS} text-ink/50 hover:text-ink hover:bg-ink/5`}
+          title={withChord('nextMatch', 'Next match')}
+          aria-label="Next match"
+        >
+          <ArrowDown size={13} />
+        </button>
+        <button
+          type="button"
+          onClick={find.close}
+          className={`${BUTTON_CLASS} text-ink/50 hover:text-ink hover:bg-ink/5`}
+          title="Close find (Escape)"
+          aria-label="Close find"
+        >
+          <X size={13} />
+        </button>
+      </div>
+
+      {find.replaceOpen && (
+        <div className="flex items-center gap-1">
+          <span className="w-[22px]" aria-hidden="true" />
+          <input
+            type="text"
+            value={find.replacement}
+            onInput={(e) => find.setReplacement(e.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Replace"
+            aria-label="Replace"
+            className="flex-1 min-w-0 bg-canvas border border-ink/20 rounded px-2 py-1 font-mono text-xs text-ink focus:outline-none focus:border-ink"
+          />
+          <button
+            type="button"
+            onClick={find.replaceCurrent}
+            disabled={total === 0}
+            className={`${BUTTON_CLASS} text-ink/50 hover:text-ink hover:bg-ink/5`}
+            title={withChord('replaceOne', 'Replace')}
+            aria-label="Replace"
+          >
+            <Replace size={13} />
+          </button>
+          <button
+            type="button"
+            onClick={find.replaceAll}
+            disabled={total === 0}
+            className={`${BUTTON_CLASS} text-ink/50 hover:text-ink hover:bg-ink/5`}
+            title={withChord('replaceAll', 'Replace all')}
+            aria-label="Replace all"
+          >
+            <ReplaceAll size={13} />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { AlertCircle, Check, Copy, Download, Eye, EyeOff, Maximize, Minimize, 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';
 
@@ -15,6 +15,9 @@ interface EditorToolbarProps {
   /** 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;
@@ -44,6 +47,8 @@ export function EditorToolbar({
   isImage = false,
   saveDisabled = false,
   isMaximized = false,
+  findOpen = false,
+  onToggleFind,
   onSave,
   onTogglePreview,
   onToggleWordWrap,
@@ -111,6 +116,19 @@ export function EditorToolbar({
 
         {!isImage && (
           <>
+            <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 pr-2 mr-1 border-r border-ink/10">
               <button
                 type="button"

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 { 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;
@@ -41,8 +48,12 @@ 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, {
     // A file that could not be read must report the failure, not substitute
@@ -52,6 +63,20 @@ export function Editor({
     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
@@ -90,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}`}>
@@ -108,7 +196,7 @@ export function Editor({
     : `flex flex-col h-full bg-canvas ${className}`;
 
   return (
-    <div className={editorContainerClass}>
+    <div className={editorContainerClass} onKeyDownCapture={handlePanelKeyDown}>
       <EditorTabs
         openedFiles={openedFiles}
         activeFileId={activeFileId}
@@ -140,6 +228,8 @@ export function Editor({
               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)}
@@ -170,57 +260,67 @@ export function Editor({
                 <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;