dsh-plugin-workbench 0.0.4 → 0.0.5

package/lib/index.js

@@ -1,10 +1,40 @@
+import { mkdir, rename, rm, writeFile } from "node:fs/promises";
 //#region src/index.ts
 const name = "dsh-plugin-workbench";
-const inject = ["fs", "connection"];
+const inject = [
+	"fs",
+	"connection",
+	"webServer"
+];
 /** Loopback-only logical RPC channel. */
 const CHANNEL = "/dsh-plugin-files";
 /** Files larger than this are never read for preview (client shows size + hint). */
 const MAX_PREVIEW_BYTES = 524288;
+/** Same-origin route serving raw bytes for image files (see module doc). */
+const RAW_PREFIX = "/dsh-plugin-files/raw";
+/** Images larger than this are never served to the preview (browser shows a hint). */
+const MAX_IMAGE_BYTES = 20971520;
+const IMAGE_MIME = {
+	png: "image/png",
+	jpg: "image/jpeg",
+	jpeg: "image/jpeg",
+	gif: "image/gif",
+	webp: "image/webp",
+	avif: "image/avif",
+	bmp: "image/bmp",
+	ico: "image/x-icon",
+	svg: "image/svg+xml"
+};
+/** MIME type for a path's extension when it names a previewable image; undefined otherwise. */
+function imageMimeOf(path) {
+	const idx = path.lastIndexOf(".");
+	if (idx < 0 || idx === path.length - 1) return void 0;
+	return IMAGE_MIME[path.slice(idx + 1).toLowerCase()];
+}
+/** True when the path names a previewable image file. */
+function isImagePath(path) {
+	return imageMimeOf(path) !== void 0;
+}
 /** Map an fs entry type onto the wire `kind` union. */
 function kindOf(type) {
 	if (type === "directory") return "dir";
@@ -42,7 +72,15 @@ const FS_ERROR_MESSAGES = {
 	FS_PERMISSION_DENIED: "permission denied",
 	FS_SANDBOX_DENIED: "sandbox denied",
 	FS_ABORTED: "aborted",
-	FS_IO_ERROR: "io error"
+	FS_IO_ERROR: "io error",
+	EEXIST: "file or folder already exists",
+	ENOENT: "path does not exist",
+	ENOTEMPTY: "folder is not empty",
+	EPERM: "permission denied",
+	EACCES: "permission denied",
+	ENOTDIR: "not a directory",
+	EISDIR: "is a directory",
+	EBUSY: "file is in use"
 };
 /** Human-readable message for a thrown value, honoring the fs error code taxonomy. */
 function mapError(error) {
@@ -80,10 +118,65 @@ function apply(ctx) {
 	const handler = async (endpoint, payload, signal) => {
 		if (endpoint === "list") return listDir(ctx, payload, signal);
 		if (endpoint === "read") return readFile(ctx, payload, signal);
-		if (endpoint === "write") return writeFile(ctx, payload, signal);
+		if (endpoint === "write") return writeFile$1(ctx, payload, signal);
+		if (endpoint === "createFile") return createFile(ctx, payload, signal);
+		if (endpoint === "createDir") return createDir(ctx, payload, signal);
+		if (endpoint === "rename") return renameEntry(ctx, payload, signal);
+		if (endpoint === "delete") return deleteEntry(ctx, payload, signal);
 		return fail(`unknown endpoint: ${endpoint}`);
 	};
-	ctx.connection.rpc.handle(CHANNEL, handler, { authority: "loopback" });
+	ctx.effect(() => ctx.connection.rpc.handle(CHANNEL, handler, { authority: "loopback" }), "dsh-plugin-workbench: files rpc channel");
+	ctx.effect(() => ctx.webServer.register({
+		kind: "prefix",
+		path: RAW_PREFIX,
+		handler: (req, res) => {
+			serveRaw(ctx, req, res);
+		}
+	}), "dsh-plugin-workbench: raw image route");
+}
+async function serveRaw(ctx, req, res) {
+	const text = (code, body) => {
+		res.writeHead(code, { "content-type": "text/plain; charset=utf-8" });
+		res.end(body);
+	};
+	try {
+		if ((req.method ?? "GET").toUpperCase() !== "GET") {
+			text(405, "method not allowed");
+			return;
+		}
+		const rest = new URL(req.url ?? "/", "http://dsh.internal").pathname.slice(21).replace(/^\/+/, "");
+		if (rest.length === 0) {
+			text(404, "not found");
+			return;
+		}
+		const path = decodeURIComponent(rest);
+		const mime = imageMimeOf(path);
+		if (mime === void 0) {
+			text(404, "not an image");
+			return;
+		}
+		const target = await ctx.fs.resolve(path);
+		const info = await ctx.fs.stat(target);
+		if (info === void 0 || info.type !== "file") {
+			text(404, "not found");
+			return;
+		}
+		if ((info.size ?? 0) > 20971520) {
+			text(413, "image too large");
+			return;
+		}
+		const bytes = await ctx.fs.readBytes(target, void 0, MAX_IMAGE_BYTES);
+		res.writeHead(200, {
+			"content-type": mime,
+			"content-length": bytes.byteLength,
+			"cache-control": "private, max-age=300",
+			"x-content-type-options": "nosniff"
+		});
+		res.end(Buffer.from(bytes));
+	} catch (error) {
+		if (!res.headersSent) text(500, "internal error");
+		else res.destroy();
+	}
 }
 async function listDir(ctx, payload, signal) {
 	const path = pathOf(payload);
@@ -153,7 +246,7 @@ async function readFile(ctx, payload, signal) {
 		return fail(mapError(error));
 	}
 }
-async function writeFile(ctx, payload, signal) {
+async function writeFile$1(ctx, payload, signal) {
 	const path = pathOf(payload);
 	const content = typeof payload === "object" && payload !== null ? payload.content : void 0;
 	if (path === void 0) return fail("write: payload.path must be a non-empty string");
@@ -175,5 +268,75 @@ async function writeFile(ctx, payload, signal) {
 		return fail(mapError(error));
 	}
 }
+async function createFile(ctx, payload, signal) {
+	const path = pathOf(payload);
+	if (path === void 0) return fail("createFile: payload.path must be a non-empty string");
+	try {
+		const target = await ctx.fs.resolve(path, { signal });
+		const osPath = ctx.fs.processPath(target);
+		await writeFile(osPath, "", { flag: "wx" });
+		return {
+			ok: true,
+			value: { path: osPath }
+		};
+	} catch (error) {
+		return fail(mapError(error));
+	}
+}
+async function createDir(ctx, payload, signal) {
+	const path = pathOf(payload);
+	if (path === void 0) return fail("createDir: payload.path must be a non-empty string");
+	try {
+		const target = await ctx.fs.resolve(path, { signal });
+		const osPath = ctx.fs.processPath(target);
+		await mkdir(osPath);
+		return {
+			ok: true,
+			value: { path: osPath }
+		};
+	} catch (error) {
+		return fail(mapError(error));
+	}
+}
+async function renameEntry(ctx, payload, signal) {
+	const path = pathOf(payload);
+	const to = typeof payload === "object" && payload !== null ? payload.to : void 0;
+	if (path === void 0) return fail("rename: payload.path must be a non-empty string");
+	if (typeof to !== "string" || to.trim().length === 0) return fail("rename: payload.to must be a non-empty string");
+	try {
+		const target = await ctx.fs.resolve(path, { signal });
+		const osPath = ctx.fs.processPath(target);
+		const toTarget = await ctx.fs.resolve(to, { signal });
+		const toOsPath = ctx.fs.processPath(toTarget);
+		if (await ctx.fs.stat(toTarget, signal) !== void 0) return fail("rename: destination already exists");
+		await rename(osPath, toOsPath);
+		return {
+			ok: true,
+			value: { path: toOsPath }
+		};
+	} catch (error) {
+		return fail(mapError(error));
+	}
+}
+async function deleteEntry(ctx, payload, signal) {
+	const path = pathOf(payload);
+	if (path === void 0) return fail("delete: payload.path must be a non-empty string");
+	try {
+		const target = await ctx.fs.resolve(path, { signal });
+		const osPath = ctx.fs.processPath(target);
+		const info = await ctx.fs.stat(target, signal);
+		if (info === void 0) return fail(`path not found: ${path}`);
+		await rm(osPath, {
+			recursive: info.type === "directory",
+			force: true
+		});
+		return {
+			ok: true,
+			value: { path: osPath }
+		};
+	} catch (error) {
+		return fail(mapError(error));
+	}
+}
 //#endregion
-export { CHANNEL, MAX_PREVIEW_BYTES, apply, inject, kindOf, mapDirEntry, mapError, name, sortEntries };
+export { CHANNEL, MAX_IMAGE_BYTES, MAX_PREVIEW_BYTES, RAW_PREFIX, apply, imageMimeOf, inject, isImagePath, kindOf, mapDirEntry, mapError, name, sortEntries };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-plugin-workbench",
   "description": "VS Code-style workspace file explorer + editable preview for the dsh web GUI",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "type": "module",
   "packageManager": "pnpm@11.21.0",
   "engines": {

package/src/client/FileExplorer.tsx

@@ -3,11 +3,12 @@
  * (patched) ui-layout AppFrame. File selection is pushed into the shared
  * selection store so the `explorer.preview` slot can render the split view.
  */
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import type { MouseEvent as ReactMouseEvent } from 'react'
 import styles from './files.module.css'
 import { FileIcon } from './fileIcons'
 import type { FilesKey } from './locales'
-import { expandPreview, openFile, setCwd, toggleTheme, useTabsState } from './store'
+import { closeFilesUnder, expandPreview, openFile, retargetFile, setCwd, toggleTheme, useTabsState } from './store'
 
 export interface FsListEntry {
   name: string
@@ -29,6 +30,11 @@ export interface FsReadResult {
   truncated: boolean
 }
 
+/** Result of a context-menu mutation (create/rename/delete). */
+export interface FsMutationResult {
+  path: string
+}
+
 interface SessionSummary {
   id: string
   cwd?: string
@@ -45,6 +51,10 @@ export interface FileExplorerProps {
   t: (key: FilesKey, params?: Record<string, unknown>) => string
   listDir: (path: string, signal?: AbortSignal) => Promise<FsListResult>
   openPath: (path: string) => Promise<void>
+  createFile: (path: string, signal?: AbortSignal) => Promise<FsMutationResult>
+  createDir: (path: string, signal?: AbortSignal) => Promise<FsMutationResult>
+  renameFile: (path: string, to: string, signal?: AbortSignal) => Promise<FsMutationResult>
+  removePath: (path: string, signal?: AbortSignal) => Promise<FsMutationResult>
 }
 
 function basenameOf(path: string): string {
@@ -53,6 +63,18 @@ function basenameOf(path: string): string {
   return idx >= 0 ? trimmed.slice(idx + 1) : trimmed
 }
 
+/** Parent directory of a path ('' for a bare drive root — never used for such). */
+function parentOf(path: string): string {
+  const idx = Math.max(path.lastIndexOf('/'), path.lastIndexOf('\\'))
+  return idx > 0 ? path.slice(0, idx) : path
+}
+
+/** Append a child name to a directory path, honoring its separator style. */
+function joinPath(dir: string, name: string): string {
+  const sep = dir.includes('\\') ? '\\' : '/'
+  return dir.endsWith('\\') || dir.endsWith('/') ? dir + name : dir + sep + name
+}
+
 function formatSize(bytes: number): string {
   if (!Number.isFinite(bytes) || bytes < 0) return ''
   if (bytes < 1024) return `${bytes} B`
@@ -91,6 +113,7 @@ interface TreeRowProps {
   onSelect: (entry: FsListEntry) => void
   onDoubleClick: (entry: FsListEntry) => void
   onOpenExternal: (path: string) => Promise<void>
+  onContextMenu: (e: ReactMouseEvent, entry: FsListEntry) => void
   t: (key: FilesKey, params?: Record<string, unknown>) => string
 }
 
@@ -110,6 +133,7 @@ const TreeRow = memo(function TreeRow({
   onSelect,
   onDoubleClick,
   onOpenExternal,
+  onContextMenu,
   t,
 }: TreeRowProps) {
   const isDir = entry.kind === 'dir'
@@ -119,6 +143,7 @@ const TreeRow = memo(function TreeRow({
       style={{ paddingLeft: 8 + depth * 14 }}
       onClick={() => onSelect(entry)}
       onDoubleClick={() => onDoubleClick(entry)}
+      onContextMenu={(e) => onContextMenu(e, entry)}
       role="treeitem"
       aria-selected={isActive}
       aria-expanded={isDir ? isExpanded : undefined}
@@ -170,7 +195,17 @@ const TreeRow = memo(function TreeRow({
   )
 })
 
-export function FileExplorer({ width, useSessions, t, listDir, openPath }: FileExplorerProps) {
+export function FileExplorer({
+  width,
+  useSessions,
+  t,
+  listDir,
+  openPath,
+  createFile,
+  createDir,
+  renameFile,
+  removePath,
+}: FileExplorerProps) {
   const sessionList = useSessions((s) => s)
   const currentId = sessionList.current
   const cwd = currentId !== undefined ? sessionList.byId[currentId]?.cwd : undefined
@@ -190,6 +225,57 @@ export function FileExplorer({ width, useSessions, t, listDir, openPath }: FileE
   const [loadingDirs, setLoadingDirs] = useState<Set<string>>(new Set())
   const [dirErrors, setDirErrors] = useState<Record<string, string>>({})
 
+  // ---- context menu ----
+  interface MenuState {
+    kind: 'file' | 'dir' | 'root'
+    path: string
+    x: number
+    y: number
+  }
+  const [menu, setMenu] = useState<MenuState | undefined>(undefined)
+  const [menuPos, setMenuPos] = useState<{ x: number; y: number } | undefined>(undefined)
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  // Measure and clamp the menu into the viewport before the browser paints
+  // (layout effects run pre-paint, so the raw position never shows).
+  useLayoutEffect(() => {
+    if (menu === undefined) {
+      setMenuPos(undefined)
+      return
+    }
+    const el = menuRef.current
+    if (el === null) return
+    const rect = el.getBoundingClientRect()
+    setMenuPos({
+      x: Math.max(4, Math.min(menu.x, window.innerWidth - rect.width - 4)),
+      y: Math.max(4, Math.min(menu.y, window.innerHeight - rect.height - 4)),
+    })
+  }, [menu])
+
+  // Close the menu on outside click / Escape / window blur.
+  useEffect(() => {
+    if (menu === undefined) return undefined
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setMenu(undefined)
+    }
+    const onMouseDown = (e: MouseEvent) => {
+      const el = menuRef.current
+      if (el !== null && e.target instanceof Node && el.contains(e.target)) return
+      setMenu(undefined)
+    }
+    const onBlur = () => setMenu(undefined)
+    document.addEventListener('keydown', onKeyDown)
+    // mousedown (not click): closing before a menu item's click still lets the
+    // click dispatch on the item, and closes when clicking anywhere else.
+    document.addEventListener('mousedown', onMouseDown)
+    window.addEventListener('blur', onBlur)
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+      document.removeEventListener('mousedown', onMouseDown)
+      window.removeEventListener('blur', onBlur)
+    }
+  }, [menu])
+
   // Latest tree snapshot for the polling tick (avoids stale closures).
   const treeRef = useRef({ root, children, expanded, rootLoading })
   treeRef.current = { root, children, expanded, rootLoading }
@@ -358,6 +444,81 @@ export function FileExplorer({ width, useSessions, t, listDir, openPath }: FileE
     void loadDir(dirPath)
   }, [loadDir])
 
+  // ---- context-menu actions ----
+
+  const openContextMenu = useCallback((e: ReactMouseEvent, entry: FsListEntry) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setMenu({ kind: entry.kind === 'dir' ? 'dir' : 'file', path: entry.path, x: e.clientX, y: e.clientY })
+  }, [])
+
+  const runAction = useCallback((action: () => void) => {
+    setMenu(undefined)
+    action()
+  }, [])
+
+  // One mutation pipeline shared by New File / New Folder / Rename / Delete:
+  // run the op, refresh the touched directory, and surface failures inline in
+  // the tree (under the directory row, or at the column top for the root).
+  const applyMutation = useCallback(async (op: () => Promise<unknown>, refreshPath: string) => {
+    try {
+      await op()
+      refreshDir(refreshPath)
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      if (refreshPath === root) setRootError(message)
+      else setDirErrors((prev) => ({ ...prev, [refreshPath]: message }))
+    }
+  }, [refreshDir, root])
+
+  const onNewFile = useCallback((dirPath: string) => {
+    const name = window.prompt(`${t('prompt.newFileName')}:`, '')
+    if (name === null) return
+    const trimmed = name.trim()
+    if (trimmed === '') return
+    void applyMutation(() => createFile(joinPath(dirPath, trimmed)), dirPath)
+  }, [applyMutation, createFile, t])
+
+  const onNewFolder = useCallback((dirPath: string) => {
+    const name = window.prompt(`${t('prompt.newFolderName')}:`, '')
+    if (name === null) return
+    const trimmed = name.trim()
+    if (trimmed === '') return
+    void applyMutation(() => createDir(joinPath(dirPath, trimmed)), dirPath)
+  }, [applyMutation, createDir, t])
+
+  const onRename = useCallback((path: string) => {
+    const current = basenameOf(path)
+    const name = window.prompt(`${t('prompt.renameTo')}:`, current)
+    if (name === null) return
+    const trimmed = name.trim()
+    if (trimmed === '' || trimmed === current) return
+    const parent = parentOf(path)
+    const to = joinPath(parent, trimmed)
+    void applyMutation(async () => {
+      await renameFile(path, to)
+      // Keep any open tab pointing at the moved file.
+      retargetFile(path, to)
+    }, parent)
+  }, [applyMutation, renameFile, t])
+
+  const onDelete = useCallback((path: string, kind: 'file' | 'dir') => {
+    const name = basenameOf(path)
+    const message = kind === 'dir' ? t('confirm.deleteDir', { name }) : t('confirm.deleteFile', { name })
+    if (!window.confirm(message)) return
+    void applyMutation(async () => {
+      await removePath(path)
+      // Drop tabs for the deleted file (or everything under a deleted folder).
+      closeFilesUnder(path)
+    }, parentOf(path))
+  }, [applyMutation, removePath, t])
+
+  const onCopyPath = useCallback((path: string) => {
+    void navigator.clipboard.writeText(path).catch(() => {
+      // clipboard unavailable (permissions) — nothing else to do
+    })
+  }, [])
+
   const onRowClick = useCallback((entry: FsListEntry) => {
     if (entry.kind === 'dir') {
       toggleDir(entry.path)
@@ -401,6 +562,7 @@ export function FileExplorer({ width, useSessions, t, listDir, openPath }: FileE
           onSelect={onRowClick}
           onDoubleClick={onRowDoubleClick}
           onOpenExternal={openPath}
+          onContextMenu={openContextMenu}
           t={t}
         />
         {isDir && isExpanded && (
@@ -417,6 +579,41 @@ export function FileExplorer({ width, useSessions, t, listDir, openPath }: FileE
     )
   })
 
+  const menuItems = (m: MenuState): Array<{ label: string; danger?: boolean; onClick: () => void } | 'divider'> => {
+    if (m.kind === 'file') {
+      return [
+        { label: t('menu.open'), onClick: () => openFile(m.path) },
+        'divider',
+        { label: t('menu.copyPath'), onClick: () => onCopyPath(m.path) },
+        { label: t('menu.openSystem'), onClick: () => void openPath(m.path) },
+        'divider',
+        { label: t('menu.rename'), onClick: () => onRename(m.path) },
+        { label: t('menu.delete'), danger: true, onClick: () => onDelete(m.path, 'file') },
+      ]
+    }
+    if (m.kind === 'dir') {
+      return [
+        { label: t('menu.newFile'), onClick: () => onNewFile(m.path) },
+        { label: t('menu.newFolder'), onClick: () => onNewFolder(m.path) },
+        'divider',
+        { label: t('menu.copyPath'), onClick: () => onCopyPath(m.path) },
+        { label: t('menu.openSystem'), onClick: () => void openPath(m.path) },
+        { label: t('menu.refresh'), onClick: () => refreshDir(m.path) },
+        'divider',
+        { label: t('menu.rename'), onClick: () => onRename(m.path) },
+        { label: t('menu.delete'), danger: true, onClick: () => onDelete(m.path, 'dir') },
+      ]
+    }
+    // Empty tree area (the workspace root).
+    return [
+      { label: t('menu.newFile'), onClick: () => onNewFile(m.path) },
+      { label: t('menu.newFolder'), onClick: () => onNewFolder(m.path) },
+      'divider',
+      { label: t('menu.copyPath'), onClick: () => onCopyPath(m.path) },
+      { label: t('menu.refresh'), onClick: () => refreshDir(m.path) },
+    ]
+  }
+
   return (
     <div className={styles.column} style={{ width: width > 0 ? width : undefined }} data-pane="explorer" data-fe-theme={theme}>
       <div className={styles.header}>
@@ -429,7 +626,15 @@ export function FileExplorer({ width, useSessions, t, listDir, openPath }: FileE
           <button type="button" className={styles.action} title={t('tab.expand')} onClick={expandPreview}>{'>'}</button>
         </span>
       </div>
-      <div className={styles.treeArea}>
+      <div
+        className={styles.treeArea}
+        onContextMenu={(e) => {
+          e.preventDefault()
+          const target = root ?? cwd
+          if (target === undefined) return
+          setMenu({ kind: 'root', path: target, x: e.clientX, y: e.clientY })
+        }}
+      >
         {rootLoading && <div className={styles.rowHint}>{t('preview.loading')}</div>}
         {rootError !== undefined && <div className={styles.rowError}>{rootError}</div>}
         {!rootLoading && rootError === undefined && root !== undefined && children[root] !== undefined && children[root].length === 0 && (
@@ -437,6 +642,29 @@ export function FileExplorer({ width, useSessions, t, listDir, openPath }: FileE
         )}
         {root !== undefined && children[root] !== undefined && renderEntries(children[root], 0)}
       </div>
+      {menu !== undefined && (
+        <div
+          ref={menuRef}
+          className={styles.contextMenu}
+          role="menu"
+          style={menuPos !== undefined ? { left: menuPos.x, top: menuPos.y } : { left: menu.x, top: menu.y, visibility: 'hidden' }}
+        >
+          {menuItems(menu).map((item, index) =>
+            item === 'divider' ? (
+              <div key={index} className={styles.contextMenuDivider} />
+            ) : (
+              <div
+                key={index}
+                role="menuitem"
+                className={`${styles.contextMenuItem}${item.danger ? ` ${styles.contextMenuItemDanger}` : ''}`}
+                onClick={() => runAction(item.onClick)}
+              >
+                {item.label}
+              </div>
+            ),
+          )}
+        </div>
+      )}
     </div>
   )
 }