@kabmo-labs/kabmo 0.7.0 → 0.9.0

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

@@ -9,9 +9,9 @@
  *
  * A row's menu (`FileContextMenu`) offers View, Diff, Rename, Delete — all
  * things a FILE has. The root has none of them: it is the listing itself, and
- * the only things you can ask of it are a new file at the top of the tree and a
- * paste into it. Reusing the row menu here would have offered six actions that
- * name the wrong target.
+ * the only things you can ask of it are a new file or folder at the top of the
+ * tree and a paste into it. Reusing the row menu here would have offered six
+ * actions that name the wrong target.
  *
  * Paste is the one row-menu action the root DOES own: pasting into the
  * background means pasting into the root folder, which is a real destination —
@@ -21,7 +21,7 @@
 
 import { createPortal } from 'preact/compat';
 import type { RefObject } from 'preact/compat';
-import { ClipboardPaste, FilePlus } from 'lucide-preact';
+import { ClipboardPaste, FilePlus, FolderPlus } from 'lucide-preact';
 
 interface RootContextMenuProps {
   x: number;
@@ -36,7 +36,8 @@ interface RootContextMenuProps {
 
 export function RootContextMenu({ x, y, pasteLabel, busy, onAction, menuRef }: RootContextMenuProps) {
   const menuWidth = 190;
-  const menuHeight = pasteLabel ? 76 : 48;
+  // Two create rows, plus paste when the clipboard can land here.
+  const menuHeight = pasteLabel ? 104 : 76;
 
   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;
@@ -61,6 +62,14 @@ export function RootContextMenu({ x, y, pasteLabel, busy, onAction, menuRef }: R
           <FilePlus size={13} className="text-ink/60" />
           <span>New File</span>
         </button>
+        <button
+          type="button"
+          onClick={() => onAction('new_folder')}
+          className="w-full text-left px-3 py-1.5 hover:bg-ink/5 flex items-center space-x-2 transition-colors"
+        >
+          <FolderPlus size={13} className="text-ink/60" />
+          <span>New Folder</span>
+        </button>
         {pasteLabel && (
           <button
             type="button"

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

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The Files panel's header: the repo picker, Refresh and the filter field.
+ *
+ * Split out of the panel because it is a self-contained strip of markup with no
+ * state of its own — the panel's `index.tsx` sits at the repository's line
+ * ceiling, and the tree below it is what the file is for.
+ */
+
+import { RefreshCw, Search } from 'lucide-preact';
+import { GitRepoPicker } from '@/client/components/workspace/repo-picker';
+
+export interface FileExplorerToolbarProps {
+  rootPath?: string;
+  activeRepo: string;
+  repos: string[];
+  reposScanning: boolean;
+  onRefreshRepos: () => void;
+  onSelectRepo: (repo: string) => void;
+  searchQuery: string;
+  onSearchChange: (value: string) => void;
+  onRefresh: () => void;
+  /** True while a read is in flight or a topic push just landed. */
+  refreshing: boolean;
+}
+
+export function FileExplorerToolbar({
+  rootPath,
+  activeRepo,
+  repos,
+  reposScanning,
+  onRefreshRepos,
+  onSelectRepo,
+  searchQuery,
+  onSearchChange,
+  onRefresh,
+  refreshing,
+}: FileExplorerToolbarProps) {
+  return (
+    <div className="p-3 border-b border-ink/10 flex flex-col space-y-2">
+      <div className="flex items-center justify-between">
+        <GitRepoPicker
+          rootPath={rootPath}
+          activeRepo={activeRepo}
+          onSelectRepo={onSelectRepo}
+          repos={repos}
+          scanning={reposScanning}
+          onRefreshRepos={onRefreshRepos}
+        />
+        <button
+          onClick={onRefresh}
+          className="p-1.5 text-ink/40 hover:text-ink hover:bg-ink/5 rounded transition-colors"
+          title="Refresh"
+        >
+          <RefreshCw size={14} className={refreshing ? 'animate-spin' : ''} />
+        </button>
+      </div>
+      <div className="relative">
+        <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-ink/40" />
+        <input
+          type="text"
+          placeholder="Search files..."
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.currentTarget.value)}
+          className="w-full bg-canvas border border-ink/20 rounded pl-8 pr-3 py-1.5 text-xs focus:outline-none focus:border-ink transition-colors text-ink placeholder-ink/40"
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -7,6 +7,7 @@ import { getGitStatusInfo, type FolderGitStatusInfo } from '@/shared/lib/fs/git-
 import { useFileActions } from '@/client/hooks/workspace/file-tree-actions';
 import { useFileRowDrag } from '@/client/hooks/workspace/file-row-drag';
 import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+import { useLongPress } from '@/client/hooks/ui/long-press';
 import type { FileClipboard, ClipboardTarget } from '@/client/hooks/workspace/file-clipboard';
 import type { GitChange } from '@/shared/types/git';
 
@@ -18,7 +19,12 @@ interface FileTreeItemProps {
   repo?: string;
   onLoadChildren?: (path: string) => Promise<void>;
   onOpenFile?: (file: any) => void;
+  /** Re-read the tree — a DELETE has no local answer. */
   onActionComplete: () => void;
+  /** Place a row this row's menu just created, without a reload. */
+  onCreated?: (entry: { path: string; kind: 'file' | 'folder' }) => void;
+  /** Move a row this row's menu just renamed, without a reload. */
+  onRenamed?: (fromPath: string, toPath: string) => void;
   expandedPaths?: Set<string>;
   onToggleFolder?: (path: string, open: boolean) => void;
   gitFileMap?: Map<string, GitChange>;
@@ -31,6 +37,13 @@ interface FileTreeItemProps {
   onDragStart: (target: ClipboardTarget) => void;
   onDragEnd: () => void;
   onDropOn: (target: ClipboardTarget) => void;
+  /**
+   * True on a device typed into with a finger. A row is a drag SOURCE, and on
+   * touch a long press starts a native drag of the whole panel — the reported
+   * "it selects all of the UI" — while no `contextmenu` reaches this row. The
+   * native drag is dropped there and the press opens the menu instead.
+   */
+  touch?: boolean;
 }
 
 /**
@@ -63,6 +76,8 @@ export function FileTreeItem({
   onLoadChildren,
   onOpenFile,
   onActionComplete,
+  onCreated,
+  onRenamed,
   expandedPaths,
   onToggleFolder,
   gitFileMap,
@@ -72,6 +87,7 @@ export function FileTreeItem({
   onDragStart,
   onDragEnd,
   onDropOn,
+  touch = false,
 }: FileTreeItemProps) {
   const isFolder = file.type === 'folder';
   const [isOpen, setIsOpen] = useState(false);
@@ -115,13 +131,23 @@ export function FileTreeItem({
     diff: { staged: gitChange?.staged || (gitChange?.status ? gitChange.status[0] !== ' ' && gitChange.status[0] !== '?' : false), status: gitStatusInfo?.charStatus },
     onOpenFile,
     onActionComplete,
+    onCreated,
+    onRenamed,
     clipboard,
     isFolder,
   });
   useOnClickOutside(actions.contextMenuRef, actions.closeContextMenu);
 
+  // A press-and-hold opens the same menu a right-click does; the click the same
+  // gesture produces is swallowed, or lifting the finger would toggle the row.
+  const longPress = useLongPress({
+    enabled: touch,
+    onLongPress: (x, y) => actions.openContextMenu(x, y),
+  });
+
   const handleToggle = (e: globalThis.MouseEvent) => {
     e.stopPropagation();
+    if (longPress.consume()) return;
     if (isFolder) {
       const next = !actualIsOpen;
       setIsOpen(next);
@@ -175,16 +201,20 @@ export function FileTreeItem({
   return (
     <div>
       <div
-        className={`flex items-center space-x-1.5 py-1 px-2 hover:bg-ink/5 cursor-pointer rounded group ${
+        className={`flex items-center space-x-1.5 py-1 px-2 hover:bg-ink/5 cursor-pointer rounded group select-none ${
           drag.isDragging ? 'opacity-40' : ''
         } ${drag.acceptsDrop ? 'bg-info/10 ring-1 ring-info/40 ring-inset' : ''}`}
-        draggable
+        draggable={!touch}
         onClick={handleToggle}
         onContextMenu={handleContextMenu}
         onDragStart={drag.onDragStart}
         onDragEnd={drag.onDragEnd}
         onDragOver={drag.onDragOver}
         onDrop={drag.onDrop}
+        onTouchStart={longPress.onTouchStart}
+        onTouchMove={longPress.onTouchMove}
+        onTouchEnd={longPress.onTouchEnd}
+        onTouchCancel={longPress.onTouchCancel}
       >
         {isFolder ? (
           actualIsOpen ? <ChevronDown size={12} className="flex-shrink-0 text-ink/40" /> : <ChevronRight size={12} className="flex-shrink-0 text-ink/40" />
@@ -228,7 +258,7 @@ export function FileTreeItem({
         <div className="ml-3 border-l border-ink/10 pl-1">
           {children.map((child: any) => (
             <FileTreeItem
-              key={child.id}
+              key={child.path}
               file={child}
               rootPath={rootPath}
               basePath={basePath}
@@ -236,6 +266,8 @@ export function FileTreeItem({
               onLoadChildren={onLoadChildren}
               onOpenFile={onOpenFile}
               onActionComplete={onActionComplete}
+              onCreated={onCreated}
+              onRenamed={onRenamed}
               expandedPaths={expandedPaths}
               onToggleFolder={onToggleFolder}
               gitFileMap={gitFileMap}
@@ -245,6 +277,7 @@ export function FileTreeItem({
               onDragStart={onDragStart}
               onDragEnd={onDragEnd}
               onDropOn={onDropOn}
+              touch={touch}
             />
           ))}
         </div>
@@ -265,6 +298,7 @@ export function FileTreeItem({
       {mounted && actions.showCreateModal && (
         <FileCreateModal
           folderPath={file.path}
+          kind={actions.createKind}
           value={actions.createName}
           error={actions.createError}
           isLoading={actions.busy}
@@ -289,6 +323,7 @@ export function FileTreeItem({
           isFolder={isFolder}
           renameValue={actions.renameValue}
           originalPath={file.path}
+          error={actions.renameError}
           isLoading={actions.busy}
           onChange={actions.setRenameValue}
           onCancel={actions.closeRename}

package/src/client/components/workspace/file-explorer/filter.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The Files panel's filter: keep a node when its own name matches, or when a
+ * descendant does.
+ *
+ * A matching FOLDER keeps its whole subtree (its name is the answer, and hiding
+ * its contents would make the match useless), while a folder that only matches
+ * through its children keeps just the children that do. Either way the row is
+ * forced open, because a match inside a collapsed folder is a match the user
+ * cannot see.
+ *
+ * Extracted from the panel so the render file stays under the line ceiling.
+ */
+
+import type { FsNode } from '@/shared/types';
+
+export function filterFileTree(tree: FsNode[], query: string): FsNode[] {
+  const lowerQuery = query.trim().toLowerCase();
+  if (!lowerQuery) return tree;
+
+  const filterNode = (node: FsNode): FsNode | null => {
+    const isMatch = node.name.toLowerCase().includes(lowerQuery);
+
+    if (node.type === 'folder') {
+      const filteredChildren = (node.children || [])
+        .map(filterNode)
+        .filter((child): child is FsNode => child !== null);
+
+      if (isMatch || filteredChildren.length > 0) {
+        return {
+          ...node,
+          children: isMatch && filteredChildren.length === 0 ? node.children : filteredChildren,
+          forceExpanded: true,
+        };
+      }
+      return null;
+    }
+
+    return isMatch ? node : null;
+  };
+
+  return tree.map(filterNode).filter((node): node is FsNode => node !== null);
+}

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

@@ -1,7 +1,6 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
-import { RefreshCw, Search } from 'lucide-preact';
 import type { FsNode } from '@/shared/types';
-import { GitRepoPicker } from '@/client/components/workspace/repo-picker';
+import { FileExplorerToolbar } from '@/client/components/workspace/file-explorer/Toolbar';
 import { FileTreeItem } from '@/client/components/workspace/file-explorer/TreeItem';
 import { RootContextMenu } from '@/client/components/workspace/file-explorer/RootMenu';
 import { FileCreateModal } from '@/client/components/workspace/file-explorer/Modals';
@@ -11,9 +10,12 @@ import { useGitStatus } from '@/client/hooks/workspace/git-status';
 import { useFileListing } from '@/client/hooks/workspace/file-listing';
 import { useFileCreate } from '@/client/hooks/workspace/file-create';
 import { useFileClipboard, type ClipboardTarget } from '@/client/hooks/workspace/file-clipboard';
+import { rekeyExpansion } from '@/shared/lib/fs/file-tree';
+import { filterFileTree } from '@/client/components/workspace/file-explorer/filter';
 import { useRepoList, useRepoScope } from '@/client/hooks/workspace/repo-scope';
 import { useRealtimeTopic } from '@/client/hooks/ui/realtime';
 import { useToasts } from '@/client/hooks/ui/toasts';
+import { useTouchDevice } from '@/client/hooks/ui/touch-device';
 import { ToastStack } from '@/client/components/common/ToastStack';
 import { fsTopic } from '@/shared/lib/realtime/protocol';
 
@@ -98,6 +100,53 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
     setActiveRepo(repo);
   };
 
+  /**
+   * Open every folder that leads to `path`.
+   *
+   * A nested create (`lib/parse.ts`) and a rename into a new folder both make
+   * directories the user has never opened, and a row placed inside a collapsed
+   * folder is a row nobody can see — the write would look like it failed. EVERY
+   * ancestor is opened, not only the direct parent: expanding just the last one
+   * still hides the entry behind a collapsed `lib`.
+   */
+  const revealPath = (path: string) => {
+    const segments = path.split('/').slice(0, -1);
+    if (segments.length === 0) return;
+    const chain = segments.map((_, index) => segments.slice(0, index + 1).join('/'));
+    setExpandedPaths(prev => {
+      if (chain.every((folder) => prev.has(folder))) return prev;
+      const next = new Set(prev);
+      for (const folder of chain) next.add(folder);
+      setStoredExpandedPaths(Array.from(next));
+      return next;
+    });
+  };
+
+  /** Place a row a create just produced, without re-reading the tree. */
+  const insertCreated = (entry: { path: string; kind: 'file' | 'folder' }) => {
+    listing.insertEntry(entry);
+    revealPath(entry.path);
+  };
+
+  /**
+   * Move a row a rename just relocated, without re-reading.
+   *
+   * A folder's descendants and every open branch beneath it carry its path as a
+   * prefix, so the expansion set is rekeyed in the same step — an open `src`
+   * renamed to `lib` must stay open as `lib`, not collapse.
+   */
+  const moveRenamed = (fromPath: string, toPath: string) => {
+    listing.moveEntry(fromPath, toPath);
+    setExpandedPaths(prev => {
+      const next = rekeyExpansion(prev, fromPath, toPath);
+      setStoredExpandedPaths(Array.from(next));
+      return next;
+    });
+    // A rename INTO a new folder (`a.ts` → `nested/a.ts`) has the same problem a
+    // nested create does: the destination folder is one nobody has opened.
+    revealPath(toPath);
+  };
+
   /**
    * Re-read everything this panel shows. Defined ABOVE the `!enabled` return so
    * the create flow below can use it: a hook cannot be called after a branch.
@@ -111,6 +160,9 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
   // One clipboard for the whole tree, owned here and passed down: a
   // subscription per row would be hundreds of listeners for a value that
   // changes on a right-click.
+  // A row is a drag source; on a finger the native drag is what turned a long
+  // press into a text selection of the whole panel (see `useLongPress`).
+  const touch = useTouchDevice();
   const { toasts, pushToast, dismissToast } = useToasts();
   const clipboard = useFileClipboard({
     rootPath,
@@ -155,7 +207,7 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
     folderPath: '.',
     rootPath,
     repo: activeRepo,
-    onCreated: refresh,
+    onCreated: insertCreated,
     onOpenCreated: (file) => onOpenFile?.({ ...file, root: rootPath, repo: activeRepo }),
   });
   /** Portals need a real document; the first client render is the gate. */
@@ -172,34 +224,7 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
 
   const tree = listing.files;
 
-  const getFilteredFiles = () => {
-    if (!searchQuery.trim()) return tree;
-
-    const lowerQuery = searchQuery.toLowerCase();
-
-    const filterNode = (node: any): any => {
-      const isMatch = node.name.toLowerCase().includes(lowerQuery);
-
-      if (node.type === 'folder') {
-        const filteredChildren = (node.children || []).map(filterNode).filter(Boolean);
-
-        if (isMatch || filteredChildren.length > 0) {
-          return {
-            ...node,
-            children: isMatch && filteredChildren.length === 0 ? node.children : filteredChildren,
-            forceExpanded: true
-          };
-        }
-        return null;
-      }
-
-      return isMatch ? node : null;
-    };
-
-    return tree.map(filterNode).filter(Boolean);
-  };
-
-  const files = getFilteredFiles();
+  const files = filterFileTree(tree, searchQuery);
   // The button spins for this panel's own read OR a topic push: the server
   // republishes `fs:` on every tool call, so the tree moved with nothing on
   // screen saying so otherwise.
@@ -207,40 +232,23 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
 
   return (
     <div className={`flex flex-col h-full bg-paper ${className}`}>
-      <div className="p-3 border-b border-ink/10 flex flex-col space-y-2">
-        <div className="flex items-center justify-between">
-          <GitRepoPicker
-            rootPath={rootPath}
-            activeRepo={activeRepo}
-            onSelectRepo={handleSelectRepo}
-            repos={repos}
-            scanning={reposScanning}
-            onRefreshRepos={rescanRepos}
-          />
-          <button
-            onClick={refresh}
-            className="p-1.5 text-ink/40 hover:text-ink hover:bg-ink/5 rounded transition-colors"
-            title="Refresh"
-          >
-            <RefreshCw size={14} className={isRefreshing ? 'animate-spin' : ''} />
-          </button>
-        </div>
-        <div className="relative">
-          <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-ink/40" />
-          <input
-            type="text"
-            placeholder="Search files..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.currentTarget.value)}
-            className="w-full bg-canvas border border-ink/20 rounded pl-8 pr-3 py-1.5 text-xs focus:outline-none focus:border-ink transition-colors text-ink placeholder-ink/40"
-          />
-        </div>
-      </div>
+      <FileExplorerToolbar
+        rootPath={rootPath}
+        activeRepo={activeRepo}
+        repos={repos}
+        reposScanning={reposScanning}
+        onRefreshRepos={rescanRepos}
+        onSelectRepo={handleSelectRepo}
+        searchQuery={searchQuery}
+        onSearchChange={setSearchQuery}
+        onRefresh={refresh}
+        refreshing={isRefreshing}
+      />
 
       <div
         className={`flex-1 scrollbar-overlay-container p-2 font-mono text-[11px] text-ink/80 ${
-          rootAcceptsDrop ? 'bg-info/[0.06]' : ''
-        }`}
+          touch ? 'file-tree-touch' : ''
+        } ${rootAcceptsDrop ? 'bg-info/[0.06]' : ''}`}
         onContextMenu={(e) => {
           // The panel's own background. A row stops propagation before this
           // runs, so this handler only ever sees a right-click that named NO
@@ -273,7 +281,7 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
         ) : (
           files.map(file => (
             <FileTreeItem
-              key={file.id}
+              key={file.path}
               file={file}
               rootPath={rootPath}
               basePath={listing.root}
@@ -281,6 +289,8 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
               onLoadChildren={loadChildren}
               onOpenFile={onOpenFile}
               onActionComplete={refresh}
+              onCreated={insertCreated}
+              onRenamed={moveRenamed}
               expandedPaths={expandedPaths}
               onToggleFolder={handleToggleFolder}
               gitFileMap={gitFileMap}
@@ -293,6 +303,7 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
                 if (!dragging) return;
                 clipboard.move(dragging, target);
               }}
+              touch={touch}
             />
           ))
         )}
@@ -312,7 +323,8 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
           busy={clipboard.busy}
           onAction={(action) => {
             setRootMenu(null);
-            if (action === 'new_file') rootCreate.openDialog();
+            if (action === 'new_file') rootCreate.openDialog('file');
+            if (action === 'new_folder') rootCreate.openDialog('folder');
             if (action === 'paste') clipboard.paste(rootTarget);
           }}
         />
@@ -321,6 +333,7 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
       {mounted && rootCreate.open && (
         <FileCreateModal
           folderPath="."
+          kind={rootCreate.kind}
           value={rootCreate.name}
           error={rootCreate.error}
           isLoading={rootCreate.busy}

package/src/client/components/workspace/file-explorer/local-edit.test.ts

@@ -0,0 +1,135 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The Files panel's local tree edits: a create and a rename land WITHOUT a
+ * reload.
+ *
+ * Both used to answer a mutation by re-reading the root plus every open folder,
+ * which is one request per open folder to learn something the response already
+ * names — and it also collapsed nothing but cost a visible spinner. The two
+ * specs here assert the two halves that matter: the row appears (or moves) in
+ * the rendered tree, and NO `/api/fs/dir` read is issued for the root to make
+ * that happen.
+ *
+ * A nested create is the third case, because it is the one a naive insert gets
+ * wrong: the folders leading to the entry do not exist in the tree yet, and a
+ * row placed under a folder nobody has opened is a row the user cannot see —
+ * so the create also opens the chain it created.
+ */
+
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'bun:test';
+import { createFileExplorerHarness } from '@/test-support/file-explorer.test-util';
+
+const panel = createFileExplorerHarness();
+
+beforeAll(() => {
+  panel.install();
+});
+
+afterEach(() => {
+  panel.unmount();
+});
+
+afterAll(() => {
+  panel.restore();
+});
+
+/** The root's own reads, which a reload would add one of. */
+function rootReads(): number {
+  return panel.dirReads.filter((path) => path === '.').length;
+}
+
+describe('Files panel local edits', () => {
+  test('a created file appears in the tree without re-reading the root', async () => {
+    panel.disk = { '.': { 'existing.ts': 'file' } };
+    panel.dirReads = [];
+    await panel.mount();
+    const before = rootReads();
+
+    await panel.openRootNewFile();
+    await panel.submitNewFile('fresh.ts');
+
+    expect(panel.buttonLabels()).not.toContain('Create');
+    expect(panel.visibleNames()).toContain('fresh.ts');
+    // The create answered with the path, so the tree placed it: a reload here
+    // would be a root read plus one per open folder.
+    expect(rootReads()).toBe(before);
+  });
+
+  test('a created FOLDER appears and is not opened in an editor', async () => {
+    panel.disk = { '.': {} };
+    panel.dirReads = [];
+    await panel.mount();
+    const before = rootReads();
+
+    await panel.openRootNewFolder();
+    await panel.submitNewFile('packages');
+
+    expect(panel.createRequests.at(-1)).toEqual({
+      actionType: 'create',
+      path: '.',
+      name: 'packages',
+      kind: 'folder',
+      root: '/ws',
+    });
+    expect(panel.visibleNames()).toContain('packages');
+    // A folder has nothing to open — opening one would be an empty editor tab.
+    expect(panel.openedFiles).toEqual([]);
+    expect(rootReads()).toBe(before);
+  });
+
+  test('a nested create opens the chain it created, so the row is visible', async () => {
+    panel.disk = { '.': {} };
+    panel.dirReads = [];
+    await panel.mount();
+
+    await panel.openRootNewFile();
+    await panel.submitNewFile('lib/deep/parse.ts');
+
+    // Every folder on the way is expanded and reads its own directory: the
+    // entry is not somewhere the user has to go hunting for.
+    expect(panel.visibleNames()).toContain('parse.ts');
+    expect(panel.visibleNames()).toContain('deep');
+    expect(panel.visibleNames()).toContain('lib');
+  });
+
+  test('a rename moves the row in place without re-reading the root', async () => {
+    panel.disk = { '.': { 'old.ts': 'file' } };
+    panel.dirReads = [];
+    await panel.mount();
+    const before = rootReads();
+
+    await panel.rightClickRow('old.ts');
+    await panel.clickMenuRow('Rename');
+    await panel.submitRename('new.ts');
+
+    expect(panel.renameRequests.at(-1)).toEqual({
+      actionType: 'rename',
+      path: 'old.ts',
+      newPath: 'new.ts',
+      root: '/ws',
+    });
+    expect(panel.visibleNames()).toContain('new.ts');
+    expect(panel.visibleNames()).not.toContain('old.ts');
+    expect(rootReads()).toBe(before);
+  });
+
+  test('a refused rename keeps the dialog open with the server’s reason', async () => {
+    panel.disk = { '.': { 'old.ts': 'file', 'taken.ts': 'file' } };
+    panel.dirReads = [];
+    await panel.mount();
+
+    await panel.rightClickRow('old.ts');
+    await panel.clickMenuRow('Rename');
+    await panel.submitRename('taken.ts');
+
+    // The field is still there: "already exists" is a message about what to
+    // type next, not a notification about something that happened.
+    expect(panel.renameInput()).not.toBeNull();
+    expect(panel.documentText()).toContain('taken.ts already exists');
+    expect(panel.visibleNames()).toContain('old.ts');
+  });
+});

package/src/client/components/workspace/search-panel/Body.tsx

@@ -6,7 +6,7 @@ import { SearchResults } from '@/client/components/workspace/search-panel/Result
 import { setSearchReveal } from '@/client/lib/search-reveal';
 import { groupSearchResults, MAX_SEARCH_RESULTS } from '@/shared/lib/fs/search-list';
 import type { SearchResultItem } from '@/shared/types/fs';
-import type { FindOptions } from '@/shared/lib/code/editor/find';
+import type { FindOptions } from '@/shared/lib/code/editor/find-scan';
 
 interface SearchPanelBodyProps {
   className: string;