@kabmo-labs/kabmo 0.7.0 → 0.8.0

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/Eval.tsx

@@ -6,6 +6,24 @@ import { highlightCode, highlightJson, tryParseJson } from '@/shared/lib/code/sy
 import { MAX_OUTPUT_LINES, truncateTailLines } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/truncate';
 import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
 
+/**
+ * The line box both sides of a code card share — gutter row and code line.
+ *
+ * A gutter row and the code line beside it are separate elements, so they agree
+ * only when their line boxes do. They did not: the gutter was `text-[10px]`
+ * while the code was `text-[11px]`, and both inherited `leading-relaxed` — a
+ * RATIO, so 10 × 1.625 = 16.25px against 11 × 1.625 = 17.875px. Each number
+ * then sat 1.6px higher than its line, and by the tenth line the number was a
+ * whole line above the code it labels (measured in the browser after a reload:
+ * `gutterRowH 16.25`, `preLineHeight 17.875`, `firstRowOffset 10`).
+ *
+ * The box is stated ONCE and applied to both containers, because a `<div>`
+ * holding one line takes its height from `line-height` — no per-row `h-[…]`
+ * that could drift from the constant. This is the same shape `Read.tsx` and
+ * `ExcerptCode` use.
+ */
+const LINE_BOX = 'leading-[18px]';
+
 /** Panel khusus untuk tool `eval` — eksekusi kode script, browser eval, dsb. */
 export function Eval({ tool }: { tool: ToolCallData }) {
   const input = tool.input;
@@ -78,14 +96,14 @@ export function Eval({ tool }: { tool: ToolCallData }) {
               … {truncatedCode.skipped} earlier lines hidden
             </div>
           )}
-          <div className="flex max-h-56 items-start overflow-x-auto font-mono text-[11px] leading-relaxed select-text">
-            <div className="sticky left-0 flex-shrink-0 select-none border-r border-ink/6 bg-canvas/50 py-2.5 pl-2.5 pr-2 text-right text-[10px] text-ink/25">
+          <div className={`flex max-h-56 items-start overflow-x-auto font-mono text-[11px] ${LINE_BOX} select-text`}>
+            <div className={`sticky left-0 flex-shrink-0 select-none border-r border-ink/6 bg-canvas/50 py-2.5 pl-2.5 pr-2 text-right text-[10px] ${LINE_BOX} tabular-nums text-ink/25`}>
               {truncatedCode.text.split('\n').map((_, idx) => (
                 <div key={idx}>{idx + 1}</div>
               ))}
             </div>
             <pre
-              className="flex-1 overflow-x-auto p-2.5 whitespace-pre text-ink/85 font-mono"
+              className={`flex-1 overflow-x-auto p-2.5 whitespace-pre ${LINE_BOX} text-ink/85 font-mono`}
               dangerouslySetInnerHTML={{ __html: highlightedCode }}
             />
           </div>
@@ -157,14 +175,14 @@ export function Eval({ tool }: { tool: ToolCallData }) {
           </div>
 
           {jsonResult.isValid && jsonResult.pretty ? (
-            <div className="flex max-h-56 items-start overflow-x-auto font-mono text-[11px] leading-relaxed select-text">
-              <div className="sticky left-0 flex-shrink-0 select-none border-r border-ink/6 bg-canvas/50 py-2 pl-2.5 pr-2 text-right text-[10px] text-ink/25">
+            <div className={`flex max-h-56 items-start overflow-x-auto font-mono text-[11px] ${LINE_BOX} select-text`}>
+              <div className={`sticky left-0 flex-shrink-0 select-none border-r border-ink/6 bg-canvas/50 py-2.5 pl-2.5 pr-2 text-right text-[10px] ${LINE_BOX} tabular-nums text-ink/25`}>
                 {jsonResult.pretty.split('\n').map((_, idx) => (
                   <div key={idx}>{idx + 1}</div>
                 ))}
               </div>
               <pre
-                className="flex-1 overflow-x-auto p-2.5 whitespace-pre text-ink/85 font-mono"
+                className={`flex-1 overflow-x-auto p-2.5 whitespace-pre ${LINE_BOX} text-ink/85 font-mono`}
                 dangerouslySetInnerHTML={{ __html: highlightedJson }}
               />
             </div>

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/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);
+}