dsh-plugin-workbench 0.0.4 → 0.0.5

package/src/client/FilePreview.tsx

@@ -4,7 +4,7 @@
  * a syntax-highlighted layer (Ctrl/Cmd+S saves). Tabs are drag-reorderable.
  * Opening/closing the first/last tab is animated.
  */
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { DragEvent as ReactDragEvent, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent } from 'react'
 import styles from './files.module.css'
 import { detectLanguage, highlightCode } from './highlight'
@@ -14,7 +14,7 @@ import { activateFile, closeFile, collapsePreview, moveTab, toggleWrap, useTabsS
 import type { FsReadResult } from './FileExplorer'
 
 interface TabData {
-  status: 'loading' | 'loaded' | 'binary' | 'too-large' | 'error'
+  status: 'loading' | 'loaded' | 'image' | 'binary' | 'too-large' | 'error'
   content?: string
   draft?: string
   dirty?: boolean
@@ -37,6 +37,23 @@ const PREVIEW_MIN = 240
 const CHAT_MIN = 240
 const PREVIEW_TOO_LARGE_LABEL = '512KB'
 
+/** Same-origin raw-bytes route registered by the host half (see src/index.ts). */
+const RAW_PREFIX = '/dsh-plugin-files/raw'
+
+const IMAGE_EXTENSIONS = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'avif', 'bmp', 'ico', 'svg'])
+
+/**
+ * Same-origin URL serving the file's bytes when it is a previewable image;
+ * undefined otherwise. Image tabs never go through the text RPC read — the
+ * host route resolves the path through the sandboxed fs service itself.
+ */
+function imageSrcOf(path: string): string | undefined {
+  const idx = path.lastIndexOf('.')
+  if (idx < 0 || idx === path.length - 1) return undefined
+  const ext = path.slice(idx + 1).toLowerCase()
+  return IMAGE_EXTENSIONS.has(ext) ? `${RAW_PREFIX}/${encodeURIComponent(path)}` : undefined
+}
+
 /**
  * Above this size the overlay editor (syntax-highlight layer + transparent
  * textarea) falls back to a plain textarea: re-injecting and re-laying out
@@ -78,6 +95,19 @@ function previewDataOf(result: FsReadResult): TabData {
   return { status: 'loaded', content: result.content, draft: result.content, dirty: false, size: result.size }
 }
 
+/**
+ * Gutter text for an editor: one logical line number per source line, as a
+ * single pre-formatted block (VS Code shows logical numbers even when soft
+ * wrap makes a line occupy several visual rows).
+ */
+function lineNumbersOf(content: string): string {
+  const count = content.split('\n').length
+  if (count <= 1) return '1'
+  const parts = new Array<string>(count)
+  for (let i = 0; i < count; i += 1) parts[i] = String(i + 1)
+  return parts.join('\n')
+}
+
 export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
   const { tabs, active, theme, collapsed, wrap } = useTabsState()
 
@@ -89,11 +119,13 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
   const cacheRef = useRef<Map<string, TabData>>(new Map())
   const hasOpenedRef = useRef(false)
   const [, bump] = useState(0)
+  const [imageFailed, setImageFailed] = useState<string | undefined>(undefined)
 
   const previewRef = useRef<HTMLDivElement>(null)
   const handleRef = useRef<HTMLDivElement>(null)
   const highlightRef = useRef<HTMLPreElement>(null)
   const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const gutterRef = useRef<HTMLDivElement>(null)
 
   const refresh = useCallback(() => bump((v) => v + 1), [])
 
@@ -111,6 +143,13 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
       return undefined
     }
     const controller = new AbortController()
+    // Image files skip the text RPC read entirely: the raw-bytes route serves
+    // them straight into an <img> tag, so there is nothing to load here.
+    if (imageSrcOf(target) !== undefined) {
+      cache.set(target, { status: 'image' })
+      refresh()
+      return () => controller.abort()
+    }
     cache.set(target, { status: 'loading' })
     readFile(target, controller.signal)
       .then((result) => {
@@ -134,6 +173,12 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
     return () => controller.abort()
   }, [tabs, active, readFile, refresh])
 
+  // A failed <img> (deleted file, oversized, …) must not keep showing the
+  // broken-image placeholder when the user switches away and back.
+  useEffect(() => {
+    setImageFailed(undefined)
+  }, [active])
+
   // Animate the last tab closing without a mount/unmount bounce: keep the pane
   // mounted while `hasOpenedRef` is set, then drop it after the transition.
   if (tabs.length > 0) hasOpenedRef.current = true
@@ -159,21 +204,31 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
   const language = active !== undefined ? detectLanguage(active) : undefined
   const tooBig = (activeData?.size ?? 0) > HIGHLIGHT_MAX_BYTES
   const plain = language === undefined || tooBig || (language !== undefined && PLAIN_LANGUAGES.has(language))
+  // Rebuild the gutter text only when the draft changes (not on every bump
+  // from tab switches or focus re-renders).
+  const gutterNumbers = useMemo(
+    () => (activeData?.status === 'loaded' ? lineNumbersOf(activeData.draft ?? '') : ''),
+    [activeData?.status, activeData?.draft],
+  )
 
-  // Keep the highlight layer's scroll in lockstep with the textarea on every
-  // frame while the overlay editor is open: some engines don't fire scroll
-  // events during selection auto-scroll, which would otherwise leave the
-  // visible layer behind the selection (drag-select misalignment). Both
-  // layers are `overflow: auto` with identical content, so the assignment is
-  // a no-op whenever they are already aligned.
+  // Keep the highlight layer and the line-number gutter in lockstep with the
+  // textarea on every frame while the editor is open: some engines don't fire
+  // scroll events during selection auto-scroll, which would otherwise leave
+  // the visible layer and the numbers behind the selection (drag-select
+  // misalignment). All layers are `overflow: auto|hidden` with identical
+  // content geometry, so the assignment is a no-op whenever they align.
   useEffect(() => {
     const pre = highlightRef.current
     const ta = textareaRef.current
-    if (pre === null || ta === null || plain) return undefined
+    const gutter = gutterRef.current
+    if (ta === null || gutter === null) return undefined
     let raf = 0
     const tick = () => {
-      pre.scrollTop = ta.scrollTop
-      pre.scrollLeft = ta.scrollLeft
+      if (pre !== null) {
+        pre.scrollTop = ta.scrollTop
+        pre.scrollLeft = ta.scrollLeft
+      }
+      gutter.scrollTop = ta.scrollTop
       raf = requestAnimationFrame(tick)
     }
     raf = requestAnimationFrame(tick)
@@ -258,11 +313,13 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
 
   const onTextareaScroll = useCallback((e: React.UIEvent<HTMLTextAreaElement>) => {
     const pre = highlightRef.current
+    const gutter = gutterRef.current
     const ta = e.currentTarget
     if (pre !== null) {
       pre.scrollTop = ta.scrollTop
       pre.scrollLeft = ta.scrollLeft
     }
+    if (gutter !== null) gutter.scrollTop = ta.scrollTop
   }, [])
 
   const onTabDragStart = useCallback((e: ReactDragEvent<HTMLDivElement>, path: string) => {
@@ -298,6 +355,9 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
             className={`${styles.editor}${plain ? ` ${styles.editorPlain}` : ''}`}
             data-wrap={wrap ? 'on' : 'off'}
           >
+            <div ref={gutterRef} className={styles.gutter} aria-hidden="true">
+              <div className={styles.gutterNumbers}>{gutterNumbers}</div>
+            </div>
             {!plain && active !== undefined && (
               <pre ref={highlightRef} className={styles.editorHighlight} aria-hidden="true">
                 <code dangerouslySetInnerHTML={{ __html: highlightCode(activeData.draft ?? '', active) }} />
@@ -317,6 +377,32 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
             {saveError !== undefined && <div className={styles.saveError}>{saveError}</div>}
           </div>
         )
+      case 'image': {
+        const src = active !== undefined ? imageSrcOf(active) : undefined
+        const name = active !== undefined ? basenameOf(active) : ''
+        if (src === undefined) {
+          return <div className={styles.previewHint}>{t('preview.binary')}</div>
+        }
+        if (imageFailed === active) {
+          return (
+            <div className={styles.previewHint}>
+              <div>{t('preview.imageFailed')}</div>
+              <div className={styles.previewMeta}>{name}</div>
+            </div>
+          )
+        }
+        return (
+          <div className={styles.imageView}>
+            <img
+              className={styles.image}
+              src={src}
+              alt={name}
+              onError={() => setImageFailed(active)}
+            />
+            <div className={styles.previewMeta}>{name}</div>
+          </div>
+        )
+      }
       case 'binary':
         return (
           <div className={styles.previewHint}>

package/src/client/files.module.css

@@ -235,6 +235,54 @@
   padding: 2px 8px 2px 0;
 }
 
+/* ---- Right-click context menu (VS Code-style) ---- */
+/* The maid-atelier skin styles every [role='menu'] with its own palette —
+   `color` follows the PAGE theme there, while our background follows the
+   WORKBENCH theme. When the two disagree (page dark + workbench light or
+   vice versa) the skin's higher-specificity color would paint menu text in a
+   shade that matches our background, making it unreadable. Lock the menu's
+   own colors to the workbench tokens so text always contrasts its bg. */
+.contextMenu {
+  position: fixed;
+  z-index: 10000;
+  min-width: 180px;
+  padding: 4px;
+  box-sizing: border-box;
+  border: 1px solid var(--fe-border-strong);
+  border-radius: 6px;
+  background: var(--fe-bg) !important;
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
+  font-size: 13px;
+  color: var(--fe-fg) !important;
+  user-select: none;
+}
+
+.contextMenuItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+  color: inherit;
+}
+
+.contextMenuItem:hover {
+  background: var(--fe-selection) !important;
+  color: var(--fe-fg) !important;
+}
+
+.contextMenuItemDanger {
+  color: #f48771 !important;
+}
+
+.contextMenuDivider {
+  height: 1px;
+  margin: 4px 6px;
+  background: var(--fe-border);
+}
+
 /* ---- Split preview + tabs ---- */
 .preview {
   flex: 0 0 55%;
@@ -420,11 +468,39 @@
   position: relative;
   height: 100%;
   min-height: 0;
+  /* Line-number gutter width; the textarea and highlight layers shift past it. */
+  --fe-gutter: 44px;
   /* Keep layout/paint churn local to the editor: huge wrapped content must
      not invalidate the whole page on every edit or scroll. */
   contain: layout paint;
 }
 
+/* Line-number gutter: a fixed column on the left that scrolls in lockstep
+   with the editor text (scrollTop synced from the textarea every frame). */
+.gutter {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: var(--fe-gutter);
+  box-sizing: border-box;
+  overflow: hidden;
+  border-right: 1px solid var(--fe-border);
+  background: var(--fe-sidebar-bg);
+  color: var(--fe-faint);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  user-select: none;
+  pointer-events: none;
+}
+
+.gutterNumbers {
+  padding: 12px 8px;
+  white-space: pre;
+  text-align: right;
+}
+
 /* Plain (no-overlay) editor: the textarea itself renders the visible text —
    used for files without syntax highlighting (e.g. .txt novels) and for
    files too large to re-highlight per keystroke without lag. */
@@ -435,7 +511,7 @@
 /* Large-file notice chip: syntax highlight was dropped to stay responsive. */
 .editorHint {
   position: absolute;
-  left: 8px;
+  left: calc(var(--fe-gutter) + 8px);
   bottom: 8px;
   padding: 4px 10px;
   border-radius: 4px;
@@ -447,7 +523,10 @@
 
 .editorHighlight {
   position: absolute;
-  inset: 0;
+  top: 0;
+  bottom: 0;
+  left: var(--fe-gutter);
+  right: 0;
   margin: 0;
   padding: 12px;
   /* The textarea reserves one extra line at the bottom (its caret reserve),
@@ -479,7 +558,10 @@
 
 .editorTextarea {
   position: absolute;
-  inset: 0;
+  top: 0;
+  bottom: 0;
+  left: var(--fe-gutter);
+  right: 0;
   box-sizing: border-box;
   margin: 0;
   padding: 12px;
@@ -527,6 +609,31 @@
   line-height: 18px;
 }
 
+/* Image preview: raw bytes arrive from the plugin's same-origin route. The
+   viewer centers the picture and shrinks it to fit the pane, letting the
+   body scroll when the file is larger than the available space. */
+.imageView {
+  height: 100%;
+  min-height: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px;
+  overflow: auto;
+  background: var(--fe-bg);
+}
+
+.image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px var(--fe-border);
+}
+
 .previewMeta {
   color: var(--fe-faint);
   font-size: 11px;

package/src/client/index.ts

@@ -23,12 +23,16 @@ export function apply(ctx: Context): void {
   const listDir = (path: string, signal?: AbortSignal) => unwrap(ctx.connection.rpc.call(CHANNEL, 'list', { path }, signal))
   const readFile = (path: string, signal?: AbortSignal) => unwrap(ctx.connection.rpc.call(CHANNEL, 'read', { path }, signal))
   const writeFile = (path: string, content: string, signal?: AbortSignal) => unwrap(ctx.connection.rpc.call(CHANNEL, 'write', { path, content }, signal))
+  const createFile = (path: string, signal?: AbortSignal) => unwrap(ctx.connection.rpc.call(CHANNEL, 'createFile', { path }, signal))
+  const createDir = (path: string, signal?: AbortSignal) => unwrap(ctx.connection.rpc.call(CHANNEL, 'createDir', { path }, signal))
+  const renameFile = (path: string, to: string, signal?: AbortSignal) => unwrap(ctx.connection.rpc.call(CHANNEL, 'rename', { path, to }, signal))
+  const removePath = (path: string, signal?: AbortSignal) => unwrap(ctx.connection.rpc.call(CHANNEL, 'delete', { path }, signal))
   const openPath = (path: string) => ctx.workspaces.openPath(path)
 
   ctx.slots.inject('explorer', () => ctx.slots.register({
     name: 'explorer',
     locale: NS,
-    inject: () => ({ listDir, openPath }),
+    inject: () => ({ listDir, openPath, createFile, createDir, renameFile, removePath }),
   }, FileExplorer))
 
   ctx.slots.inject('explorer.preview', () => ctx.slots.register({

package/src/client/locales.ts

@@ -14,8 +14,22 @@ export const zh = {
   'tab.close': '关闭标签页',
   'tab.collapse': '收起文件详情',
   'tab.expand': '弹出文件详情',
+  'menu.open': '打开预览',
+  'menu.newFile': '新建文件',
+  'menu.newFolder': '新建文件夹',
+  'menu.rename': '重命名',
+  'menu.delete': '删除',
+  'menu.copyPath': '复制路径',
+  'menu.refresh': '刷新',
+  'menu.openSystem': '在系统中打开',
+  'prompt.newFileName': '新文件名',
+  'prompt.newFolderName': '新文件夹名',
+  'prompt.renameTo': '重命名为',
+  'confirm.deleteFile': '确定删除文件「{name}」吗？',
+  'confirm.deleteDir': '确定删除文件夹「{name}」及其全部内容吗？',
   'preview.loading': '加载中…',
   'preview.binary': '二进制文件，无法预览',
+  'preview.imageFailed': '图片加载失败',
   'preview.tooLarge': '文件过大，仅支持预览不超过 {limit}',
   'preview.emptyDir': '空目录',
   'preview.error': '加载失败',
@@ -36,8 +50,22 @@ export const en: Record<FilesKey, string> = {
   'tab.close': 'Close tab',
   'tab.collapse': 'Collapse file details',
   'tab.expand': 'Expand file details',
+  'menu.open': 'Open preview',
+  'menu.newFile': 'New File',
+  'menu.newFolder': 'New Folder',
+  'menu.rename': 'Rename',
+  'menu.delete': 'Delete',
+  'menu.copyPath': 'Copy Path',
+  'menu.refresh': 'Refresh',
+  'menu.openSystem': 'Open in System',
+  'prompt.newFileName': 'New file name',
+  'prompt.newFolderName': 'New folder name',
+  'prompt.renameTo': 'Rename to',
+  'confirm.deleteFile': 'Delete file "{name}"?',
+  'confirm.deleteDir': 'Delete folder "{name}" and all its contents?',
   'preview.loading': 'Loading…',
   'preview.binary': 'Binary file, cannot preview',
+  'preview.imageFailed': 'Failed to load image',
   'preview.tooLarge': 'File too large to preview (limit {limit})',
   'preview.emptyDir': 'Empty directory',
   'preview.error': 'Load failed',

package/src/client/store.ts

@@ -140,6 +140,31 @@ export function activateFile(path: string): void {
   updateCurrent((ws) => (ws.active === path || !ws.tabs.includes(path) ? ws : { ...ws, active: path }))
 }
 
+/** Point any open tab at a new path after a rename (the disk path changed). */
+export function retargetFile(oldPath: string, newPath: string): void {
+  updateCurrent((ws) => {
+    if (!ws.tabs.includes(oldPath)) return ws
+    const tabs = ws.tabs.map((t) => (t === oldPath ? newPath : t))
+    return { ...ws, tabs, active: ws.active === oldPath ? newPath : ws.active }
+  })
+}
+
+/** Close every open tab at or under a path (used after deleting it). */
+export function closeFilesUnder(path: string): void {
+  updateCurrent((ws) => {
+    const sep = path.includes('\\') ? '\\' : '/'
+    const prefix = path.endsWith('\\') || path.endsWith('/') ? path : path + sep
+    const kept = ws.tabs.filter((t) => t !== path && !t.startsWith(prefix))
+    if (kept.length === ws.tabs.length) return ws
+    let active = ws.active
+    if (active !== undefined && (active === path || active.startsWith(prefix))) {
+      const index = ws.tabs.indexOf(active)
+      active = kept[Math.min(index, kept.length - 1)]
+    }
+    return { ...ws, tabs: kept, active }
+  })
+}
+
 /** Move a tab before another tab (drag-to-reorder). */
 export function moveTab(dragged: string, target: string): void {
   updateCurrent((ws) => {

package/src/dsh.d.ts

@@ -55,8 +55,17 @@ declare module '@deepseek-ai/cordis' {
       stat(target: unknown, signal?: AbortSignal): Promise<{ version: unknown; type: 'file' | 'directory' | 'other'; size?: number } | undefined>
       listDir(target: unknown, signal?: AbortSignal): Promise<Array<{ name: string; type: 'file' | 'directory' | 'other'; target: unknown; version?: unknown; size?: number }>>
       readText(target: unknown, signal?: AbortSignal): Promise<string>
+      readBytes(target: unknown, signal: AbortSignal | undefined, maxBytes: number): Promise<Uint8Array>
       writeText(target: unknown, content: string, version?: unknown, signal?: AbortSignal, options?: { mode?: string; workspaceRoot?: string }): Promise<void>
       processPath(target: unknown): string
     }
+    webServer: {
+      /** Register a named HTTP route (exact path or prefix). Returns the disposer. */
+      register(route: {
+        kind: 'exact' | 'prefix'
+        path: string
+        handler: (req: import('node:http').IncomingMessage, res: import('node:http').ServerResponse) => void | Promise<void>
+      }): () => void
+    }
   }
 }