@kabmo-labs/kabmo 0.7.0 → 0.9.0

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

@@ -1,4 +1,20 @@
-import { AlertCircle, Check, Copy, Download, Eye, EyeOff, Maximize, Minimize, Save, Search, WrapText, ZoomIn, ZoomOut } from 'lucide-preact';
+import {
+  AlertCircle,
+  Check,
+  Copy,
+  Download,
+  Eye,
+  EyeOff,
+  Maximize,
+  Minimize,
+  Save,
+  Search,
+  WrapText,
+  ZoomIn,
+  ZoomOut,
+} from 'lucide-preact';
+import { EditorViewButtons, useEditorViewActions } from '@/client/components/common/editor-view-buttons';
+import { ToolbarRow, type ToolbarCluster } from '@/client/components/common/toolbar-row';
 
 export type EditorSaveStatus = 'idle' | 'saving' | 'saved' | 'error' | 'needs-permission';
 
@@ -94,146 +110,227 @@ export function EditorToolbar({
             ? 'Save failed — the file on disk was not changed'
             : 'Save file (Ctrl+S)';
 
-  return (
-    // `@container`: the path below hides on a NARROW PANEL, not a narrow
-    // viewport. At the editor panel's 320px floor the action strip is 273px of
-    // `flex-shrink-0`, which left the path a measured 23px — a truncated
-    // fragment of a filename is not information, and the tab above already
-    // carries it.
-    <div className="@container flex items-center justify-between px-3 py-2 border-b border-ink/10 bg-paper flex-shrink-0">
-      {/* Left status */}
-      <div className="hidden @[420px]: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>
+  const saveButton = (
+    <button
+      type="button"
+      onClick={onSave}
+      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" />
+      ) : saveStatus === 'needs-permission' ? (
+        // Not an error: the buffer is fine and one click grants access.
+        <Save size={14} className="text-warning" />
+      ) : (
+        <Save size={14} className="hover:text-ink" />
+      )}
+    </button>
+  );
 
-      {/* Right actions. `ml-auto` keeps them right-aligned once the path block
-          above is hidden, which `justify-between` alone would not do (a single
-          child sits at the start). */}
-      <div className="flex items-center space-x-1 text-ink/40 flex-shrink-0 ml-auto">
-        {!byteViewer && (
-          <div className="flex items-center pr-2 mr-1 border-r border-ink/10">
-            <button
-              type="button"
-              onClick={onSave}
-              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" />
-              ) : saveStatus === 'needs-permission' ? (
-                // Not an error: the buffer is fine and one click grants access.
-                <Save size={14} className="text-warning" />
-              ) : (
-                <Save size={14} className="hover:text-ink" />
-              )}
-            </button>
-          </div>
-        )}
+  const copyLabel = copied ? 'Copied' : byteViewer ? 'Copy image' : 'Copy content';
+  const copyButton = (
+    <button
+      type="button"
+      onClick={onCopy}
+      className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink`}
+      title={copyLabel}
+      aria-label={copyLabel}
+    >
+      {copied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
+    </button>
+  );
 
-        {hasPreview && (
-          <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 source' : 'Show preview'}
-              aria-label={isPreview ? 'Show source' : 'Show preview'}
-              aria-pressed={isPreview}
-            >
-              {isPreview ? <EyeOff size={14} /> : <Eye size={14} />}
-            </button>
-          </div>
-        )}
+  const downloadButton = (
+    <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>
+  );
 
-        {!byteViewer && (
-          <>
-            <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>
+  const maximizeLabel = isMaximized ? 'Exit full screen' : 'Full screen';
+  const maximizeButton = (
+    <button
+      type="button"
+      onClick={onToggleMaximize}
+      className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink ${isMaximized ? 'text-ink' : ''}`}
+      title={maximizeLabel}
+      aria-label={maximizeLabel}
+      aria-pressed={isMaximized}
+    >
+      {isMaximized ? <Minimize size={14} /> : <Maximize size={14} />}
+    </button>
+  );
 
-            <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>
+  const viewModeActions = useEditorViewActions();
+  const findLabel = 'Find and replace';
+  const wordWrapLabel = wordWrap ? 'Word wrap on' : 'Word wrap off';
+  const previewLabel = isPreview ? 'Show source' : 'Show preview';
 
-            <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>
-          </>
-        )}
+  /**
+   * The controls, as clusters that hide as a unit.
+   *
+   * ORDER is the hiding order, most important first: the row keeps the width
+   * modes and full screen (the controls this panel is FOR), then copy/download,
+   * and the reading aids (find, wrap, zoom, preview) move into the `⋯` menu on a
+   * narrow panel. Grouping is the existing one — zoom is a pair, copy/download is
+   * a pair, the modes are a pair — because splitting a pair leaves half of it on
+   * the row.
+   */
+  const clusters: ToolbarCluster[] = [];
 
-        <div className="flex items-center pr-2 mr-1 border-r border-ink/10">
+  if (!byteViewer) {
+    clusters.push({
+      id: 'save',
+      // The primary action of the panel: a menu row must never be the only way
+      // to save a file.
+      pinned: true,
+      actions: [{ label: 'Save file', icon: Save, onSelect: onSave, disabled: saveDisabled }],
+      children: saveButton,
+    });
+  }
+  if (hasPreview) {
+    clusters.push({
+      id: 'preview',
+      actions: [{ label: previewLabel, icon: isPreview ? EyeOff : Eye, onSelect: onTogglePreview, active: isPreview }],
+      children: (
+        <button
+          type="button"
+          onClick={onTogglePreview}
+          className={`${ACTION_CLASS} hover:bg-ink/5 ${isPreview ? 'text-ink' : 'hover:text-ink'}`}
+          title={previewLabel}
+          aria-label={previewLabel}
+          aria-pressed={isPreview}
+        >
+          {isPreview ? <EyeOff size={14} /> : <Eye size={14} />}
+        </button>
+      ),
+    });
+  }
+  if (!byteViewer) {
+    clusters.push({
+      id: 'find',
+      actions: [{ label: findLabel, icon: Search, onSelect: onToggleFind, active: findOpen }],
+      children: (
+        <button
+          type="button"
+          onClick={onToggleFind}
+          className={`${ACTION_CLASS} hover:bg-ink/5 ${findOpen ? 'text-ink' : 'hover:text-ink'}`}
+          title={`${findLabel} (Ctrl+F)`}
+          aria-label={findLabel}
+          aria-pressed={findOpen}
+        >
+          <Search size={14} />
+        </button>
+      ),
+    });
+    clusters.push({
+      id: 'wrap',
+      actions: [{ label: wordWrapLabel, icon: WrapText, onSelect: onToggleWordWrap, active: wordWrap }],
+      children: (
+        <button
+          type="button"
+          onClick={onToggleWordWrap}
+          className={`${ACTION_CLASS} hover:bg-ink/5 ${wordWrap ? 'text-ink' : 'hover:text-ink'}`}
+          title={wordWrapLabel}
+          aria-label={wordWrapLabel}
+          aria-pressed={wordWrap}
+        >
+          <WrapText size={14} />
+        </button>
+      ),
+    });
+    clusters.push({
+      id: 'zoom',
+      actions: [
+        { label: 'Decrease font size', icon: ZoomOut, onSelect: onZoomOut },
+        { label: 'Increase font size', icon: ZoomIn, onSelect: onZoomIn },
+      ],
+      children: (
+        <>
           <button
             type="button"
-            onClick={onCopy}
+            onClick={onZoomOut}
             className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink`}
-            title={copied ? 'Copied' : byteViewer ? 'Copy image' : 'Copy content'}
-            aria-label={copied ? 'Copied' : byteViewer ? 'Copy image' : 'Copy content'}
+            title="Decrease font size"
+            aria-label="Decrease font size"
           >
-            {copied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
+            <ZoomOut size={14} />
           </button>
           <button
             type="button"
-            onClick={onDownload}
+            onClick={onZoomIn}
             className={`${ACTION_CLASS} hover:bg-ink/5 hover:text-ink`}
-            title="Download file"
-            aria-label="Download file"
+            title="Increase font size"
+            aria-label="Increase font size"
           >
-            <Download size={14} />
+            <ZoomIn size={14} />
           </button>
-        </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>
+  clusters.push({
+    id: 'copy',
+    actions: [
+      { label: copyLabel, icon: Copy, onSelect: onCopy },
+      { label: 'Download file', icon: Download, onSelect: onDownload },
+    ],
+    children: (
+      <>
+        {copyButton}
+        {downloadButton}
+      </>
+    ),
+  });
+
+  // The width modes and full SCREEN are the controls this panel exists for, so
+  // they are the LAST clusters — the tail is what the menu takes. Three controls
+  // about one axis, three different glyphs: compact collapses the chat (a
+  // crossed-out message), full collapses the chat and the sidebar (a closing
+  // panel edge), and full screen covers the right panel too (a maximise frame).
+  clusters.push({
+    id: 'view-modes',
+    // The two width modes are why this toolbar grew these buttons, and a mode
+    // reachable only from a menu is a mode half the readers never find.
+    pinned: true,
+    actions: viewModeActions,
+    children: <EditorViewButtons size={14} />,
+  });
+  clusters.push({
+    id: 'maximize',
+    pinned: true,
+    actions: [{ label: maximizeLabel, icon: isMaximized ? Minimize : Maximize, onSelect: onToggleMaximize, active: isMaximized }],
+    children: maximizeButton,
+  });
+
+  return (
+    // `@container`: the path below hides on a NARROW PANEL, not a narrow
+    // viewport. At the editor panel's 320px floor the path would be a truncated
+    // fragment of a filename — not information, and the tab above already
+    // carries it.
+    <div className="@container flex items-center justify-between gap-2 px-3 py-2 border-b border-ink/10 bg-paper flex-shrink-0">
+      {/* Left status */}
+      <div className="hidden @[420px]: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>
+
+      {/* One row, never two: what does not fit moves into `⋯` (see
+          `ToolbarRow`). A wrapped toolbar pushed the document down by its own
+          height and read as a second toolbar. */}
+      <ToolbarRow clusters={clusters} className="text-ink/40 ml-auto" />
     </div>
   );
 }

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

@@ -5,7 +5,7 @@ import { EditorTabs } from '@/client/components/workspace/editor/Tabs';
 import { EDITOR_KEY_BINDINGS, isFindBarCommand, type EditorCommand } from '@/shared/lib/code/editor/keymap';
 import { EDITOR_DEFAULT_FONT_SIZE } from '@/shared/lib/code/editor/typography';
 import { useEditorFontStack } from '@/client/hooks/editor/font';
-import type { TextRange } from '@/shared/lib/code/editor/commands';
+import { useEditorTheme } from '@/client/hooks/editor/theme';
 import type { CodeSurfaceHandle } from '@/client/components/common/code-surface';
 import { resolveBinding } from '@/shared/lib/ui/key-binding';
 import { useActiveEditorPanel } from '@/client/components/workspace/plugin-panel/resolve';
@@ -62,12 +62,11 @@ export function Editor({
   const [zoomLevel, setZoomLevel] = useSessionState<number>('editor.zoomLevel', EDITOR_DEFAULT_FONT_SIZE);
   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 surfaceRef = useRef<CodeSurfaceHandle | null>(null);
   const editorFontFamily = useEditorFontStack();
+  const editorTheme = useEditorTheme();
 
   // A deleted file keeps its tab (its buffer is still on screen), but the tab
   // strip must say so. Only a plain FILE tab is probed: a diff tab's path names
@@ -216,10 +215,10 @@ export function Editor({
    * 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.
+   * contenteditable has CodeMirror's own handlers (the generated keymap, and
+   * `defaultKeymap` behind it) and would otherwise see these first. Only the
+   * commands the PANEL owns are consumed here — the editor's own keymap runs in
+   * the document, 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.
@@ -312,12 +311,11 @@ export function Editor({
         setIsMaximized={setIsMaximized}
         zoomLevel={zoomLevel}
         setZoomLevel={setZoomLevel}
-        occurrences={occurrences}
-        setOccurrences={setOccurrences}
         paletteOpen={paletteOpen}
         setPaletteOpen={setPaletteOpen}
         runCommand={runCommand}
         editorFontFamily={editorFontFamily}
+        editorTheme={editorTheme}
         togglePreview={togglePreview}
         revealActive={Boolean(searchReveal)}
         missing={activeFileMissing}

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

@@ -29,7 +29,7 @@
 
 import { createPortal } from 'preact/compat';
 import type { ReactNode, RefObject } from 'preact/compat';
-import { ClipboardPaste, Copy, CopyPlus, Edit2, ExternalLink, Eye, FilePlus, GitCompare, History, Scissors, Trash2 } from 'lucide-preact';
+import { ClipboardPaste, Copy, CopyPlus, Edit2, ExternalLink, Eye, FilePlus, FolderPlus, GitCompare, History, Scissors, Trash2 } from 'lucide-preact';
 
 interface ContextMenuProps {
   x: number;
@@ -61,6 +61,7 @@ function buildRows(options: { isFolder: boolean; hasGitStatus?: boolean; pasteLa
 
   if (isFolder) {
     entries.push({ kind: 'item', id: 'new_file', label: 'New File', icon: <FilePlus size={13} className="text-ink/60" /> });
+    entries.push({ kind: 'item', id: 'new_folder', label: 'New Folder', icon: <FolderPlus size={13} className="text-ink/60" /> });
     entries.push({ kind: 'separator' });
   } else {
     entries.push({ kind: 'item', id: 'view', label: 'View', icon: <Eye size={13} className="text-ink/60" /> });

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

@@ -4,10 +4,12 @@ import { History, RefreshCw, X } from 'lucide-preact';
 import type { FsActionResponse } from '@/shared/types';
 
 interface NewFileModalProps {
-  /** Folder the file will be created in, relative to the listed root. */
+  /** Folder the entry will be created in, relative to the listed root. */
   folderPath: string;
+  /** What the dialog creates — a file or a folder. */
+  kind: 'file' | 'folder';
   value: string;
-  /** Server's refusal (a name that already exists, a bad character), shown inline. */
+  /** Server's refusal (a name that already exists, a bad path), shown inline. */
   error?: string | null;
   isLoading: boolean;
   onChange: (value: string) => void;
@@ -16,21 +18,26 @@ interface NewFileModalProps {
 }
 
 /**
- * The "New File" dialog.
+ * The "New File" / "New Folder" dialog.
+ *
+ * The folder is the one that was right-clicked, shown as a fixed prefix so the
+ * field's meaning is unambiguous — and the name may carry SEGMENTS
+ * (`lib/parse.ts`, `src/nested/x.ts`), which creates every directory on the way
+ * in one step. The grammar that keeps that inside the named folder is the
+ * server's, so the field does not restate it; it only says what it accepts.
  *
- * 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) {
+export function FileCreateModal({ folderPath, kind, value, error, isLoading, onChange, onCancel, onSubmit }: NewFileModalProps) {
+  const label = kind === 'folder' ? 'Folder' : 'File';
   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>
+        <h3 className="font-semibold text-ink mb-3 text-sm">New {label}</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>
@@ -39,12 +46,15 @@ export function FileCreateModal({ folderPath, value, error, isLoading, onChange,
           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 ${
+          placeholder={kind === 'folder' ? 'folder name or nested/path' : 'file name or nested/path'}
+          aria-label={`New ${label.toLowerCase()} name`}
+          className={`w-full bg-paper border rounded px-2 py-1.5 text-xs font-mono focus:outline-none mb-1 ${
             error ? 'border-error' : 'border-ink/20 focus:border-ink'
           }`}
         />
+        <p className="text-[10px] text-ink/40 mb-2">
+          Nested paths create the folders they need — <span className="font-mono">lib/parse.ts</span>.
+        </p>
         {error && <p className="text-[11px] text-error mb-2">{error}</p>}
         <div className="flex justify-end space-x-2 mt-2">
           <button
@@ -109,13 +119,24 @@ interface RenameModalProps {
   isFolder: boolean;
   renameValue: string;
   originalPath: string;
+  /** The server's refusal (an existing destination, a bad path), shown inline. */
+  error?: string | null;
   isLoading: boolean;
   onChange: (value: string) => void;
   onCancel: () => void;
   onSubmit: (e: FormEvent) => void;
 }
 
-export function FileRenameModal({ isFolder, renameValue, originalPath, isLoading, onChange, onCancel, onSubmit }: RenameModalProps) {
+/**
+ * Rename, with the WHOLE path in the field.
+ *
+ * The field holds the path relative to the listed root, not just the leaf name,
+ * because that is what makes a nested destination reachable: `src/a.ts` →
+ * `lib/deep/a.ts` both renames the file and moves it, and its parents are
+ * created on the way. A leaf-only field would have made that a create-then-
+ * delete, which is not a rename.
+ */
+export function FileRenameModal({ isFolder, renameValue, originalPath, error, isLoading, onChange, onCancel, onSubmit }: RenameModalProps) {
   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">
@@ -125,8 +146,15 @@ export function FileRenameModal({ isFolder, renameValue, originalPath, isLoading
           type="text" 
           value={renameValue}
           onChange={e => onChange(e.currentTarget.value)}
-          className="w-full bg-paper border border-ink/20 rounded px-2 py-1.5 text-xs font-mono focus:outline-none focus:border-ink mb-4"
+          aria-label={`Rename ${isFolder ? 'folder' : 'file'} path`}
+          className={`w-full bg-paper border rounded px-2 py-1.5 text-xs font-mono focus:outline-none mb-1 ${
+            error ? 'border-error' : 'border-ink/20 focus:border-ink'
+          }`}
         />
+        <p className="text-[10px] text-ink/40 mb-2">
+          Paths are relative to the tree — <span className="font-mono">lib/deep/name.ts</span> moves it too.
+        </p>
+        {error && <p className="text-[11px] text-error mb-2">{error}</p>}
         <div className="flex justify-end space-x-2">
           <button 
             type="button"

package/src/client/components/workspace/file-explorer/OutlineSection.test.tsx

@@ -32,6 +32,7 @@ import { SessionStateProvider } from '@/client/components/common/session-state-p
 import { forgetSession } from '@/shared/lib/workspace/session-state/store';
 import { installDomGlobals, restoreDomGlobals } from '@/test-support/pristine-globals';
 import { publishEditorDocument, resetEditorDocument, type EditorDocument } from '@/client/lib/editor-document';
+import { MAX_OUTLINE_ROWS } from '@/shared/lib/code/outline/rows';
 import { getLineReveal, setLineReveal } from '@/client/lib/line-reveal';
 
 const SESSION = 'new-outline-section';
@@ -215,4 +216,21 @@ describe('OutlineSection', () => {
     expect(reveal().getAttribute('data-expanded')).toBe('true');
     expect(toggle().getAttribute('aria-expanded')).toBe('true');
   });
+
+  // The cap is what keeps a large file's outline from becoming a DOM: 63 618
+  // declarations mounted 446 308 nodes and charged 953 ms to every keystroke
+  // (measured), where the editor's own cost is 34 ms.
+  test('a large outline renders only the first rows, and says how many it is not showing', async () => {
+    owner = {};
+    const many = Array.from({ length: MAX_OUTLINE_ROWS + 200 }, (_, i) => `export function fn${i}() {}`).join('\n');
+    publishEditorDocument(owner, { ...READY, path: 'src/many.ts', content: many });
+    await mount();
+    await expand();
+
+    expect(rowLabels()).toHaveLength(MAX_OUTLINE_ROWS);
+    // The count badge shows the window against the total, so the number on the
+    // toggle cannot be read as "this file has 500 symbols".
+    expect(toggle().textContent).toContain(`${MAX_OUTLINE_ROWS}/700`);
+    expect(container.textContent).toContain('Showing the first 500 of 700 symbols.');
+  });
 });

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

@@ -35,6 +35,7 @@ import { setLineReveal } from '@/client/lib/line-reveal';
 import { useSessionState } from '@/client/hooks/workspace/session-state';
 import { useOutlineView } from '@/client/hooks/editor/use-outline-view';
 import type { OutlineSymbol } from '@/shared/lib/code/outline/types';
+import { outlineTruncatedNotice } from '@/shared/lib/code/outline/rows';
 
 export function OutlineSection() {
   const [expanded, setExpanded] = useSessionState<boolean>('files.outlineExpanded', false);
@@ -44,11 +45,12 @@ export function OutlineSection() {
   // Recomputed from the LIVE buffer, so an edit moves the rows with it. The
   // scan is a depth-aware line walk (see `outline/extract.ts`): measured at
   // 0.1–2.2 ms on this repository's largest sources.
-  const { symbols, notice } = useOutlineView({
+  const { symbols, total, truncated, notice } = useOutlineView({
     content: current.content,
     language: current.language,
     state: current.state,
     note: current.note,
+    path: current.path,
   });
 
   // A diff tab HIDES the section rather than explaining that it has none. The
@@ -91,9 +93,9 @@ export function OutlineSection() {
           <span className="w-3 text-center font-mono" aria-hidden="true">{expanded ? '▾' : '▸'}</span>
           <ListTree size={12} />
           <span>Outline</span>
-          {symbols.length > 0 && (
+          {total > 0 && (
             <span className="font-normal ml-1 border border-ink/20 rounded-full px-1.5 text-[9px] text-ink/50">
-              {symbols.length}
+              {truncated ? `${symbols.length}/${total.toLocaleString()}` : total}
             </span>
           )}
         </button>
@@ -125,6 +127,11 @@ export function OutlineSection() {
                     <span className="flex-shrink-0 font-mono text-[9px] text-ink/35">{symbol.line}</span>
                   </button>
                 ))}
+                {truncated && (
+                  <div className="px-1 py-1 text-[10px] italic text-ink/40">
+                    {outlineTruncatedNotice(total)}
+                  </div>
+                )}
               </div>
             )}
           </div>