dsh-plugin-workbench 0.0.4 → 0.0.6

package/src/client/files.module.css

@@ -128,6 +128,12 @@
   padding: 4px;
 }
 
+/* Keyboard focus lands on the tree container (rows push focus here so
+   Ctrl+C / Ctrl+V work right after a click); no visible focus ring. */
+.treeArea:focus {
+  outline: none;
+}
+
 .row {
   display: flex;
   align-items: center;
@@ -153,6 +159,42 @@
   color: var(--fe-fg);
 }
 
+/* Cut items stay visible but ghosted until the paste lands (OS explorer look). */
+.rowCut {
+  opacity: 0.45;
+}
+
+/* A directory row that will receive a drag-drop move gets an accent outline. */
+.rowDropTarget {
+  box-shadow: inset 0 0 0 1.5px var(--fe-accent);
+  background: var(--fe-selection);
+}
+
+/* ---- Clipboard status bar (Copy / Cut + Paste) ---- */
+.clipboardBar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--fe-border);
+  background: var(--fe-hover);
+  color: var(--fe-fg);
+  font-size: 12px;
+}
+
+.clipboardText {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.clipboardHint {
+  color: var(--fe-faint);
+}
+
 .chevron {
   flex: none;
   width: 12px;
@@ -235,6 +277,60 @@
   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;
+}
+
+.contextMenuItemDisabled {
+  opacity: 0.45;
+  cursor: default;
+  pointer-events: none;
+}
+
+.contextMenuDivider {
+  height: 1px;
+  margin: 4px 6px;
+  background: var(--fe-border);
+}
+
 /* ---- Split preview + tabs ---- */
 .preview {
   flex: 0 0 55%;
@@ -409,6 +505,31 @@
   opacity: 0.85;
 }
 
+/* Disk-changed badge: the file changed on disk while this tab holds unsaved
+   edits; click to reload and discard them. */
+.tabDiskBadge {
+  flex: none;
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--fe-accent);
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.tabDiskBadge:hover {
+  background: var(--fe-hover);
+  color: var(--fe-fg);
+}
+
 .previewBody {
   flex: 1;
   min-height: 0;
@@ -420,11 +541,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 +584,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 +596,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 +631,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,11 +682,242 @@
   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;
 }
 
+/* ---- Markdown rendered preview ---- */
+.mdPreview {
+  box-sizing: border-box;
+  height: 100%;
+  overflow: auto;
+  padding: 16px 20px 48px;
+  color: var(--fe-fg);
+  font-size: 14px;
+  line-height: 1.7;
+  word-wrap: break-word;
+}
+
+.mdPreview > :first-child {
+  margin-top: 0;
+}
+
+.mdPreview > :last-child {
+  margin-bottom: 0;
+}
+
+.mdPreview h1,
+.mdPreview h2,
+.mdPreview h3,
+.mdPreview h4,
+.mdPreview h5,
+.mdPreview h6 {
+  margin: 1.2em 0 0.5em;
+  line-height: 1.3;
+  font-weight: 600;
+  color: var(--fe-fg);
+}
+
+.mdPreview h1 {
+  font-size: 1.7em;
+  padding-bottom: 0.3em;
+  border-bottom: 1px solid var(--fe-border);
+}
+
+.mdPreview h2 {
+  font-size: 1.4em;
+  padding-bottom: 0.3em;
+  border-bottom: 1px solid var(--fe-border);
+}
+
+.mdPreview h3 {
+  font-size: 1.2em;
+}
+
+.mdPreview h4,
+.mdPreview h5,
+.mdPreview h6 {
+  font-size: 1.05em;
+}
+
+.mdPreview p {
+  margin: 0.6em 0;
+}
+
+.mdPreview ul,
+.mdPreview ol {
+  margin: 0.6em 0;
+  padding-left: 1.6em;
+}
+
+.mdPreview li {
+  margin: 0.2em 0;
+}
+
+.mdPreview li > ul,
+.mdPreview li > ol {
+  margin: 0.2em 0;
+}
+
+.mdPreview a {
+  color: var(--fe-accent);
+  text-decoration: none;
+}
+
+.mdPreview a:hover {
+  text-decoration: underline;
+}
+
+.mdPreview blockquote {
+  margin: 0.8em 0;
+  padding: 0.3em 1em;
+  border-left: 3px solid var(--fe-border-strong);
+  color: var(--fe-muted);
+  background: var(--fe-sidebar-bg);
+}
+
+.mdPreview code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.92em;
+  background: var(--fe-hover);
+  padding: 0.15em 0.4em;
+  border-radius: 3px;
+}
+
+.mdPreview pre {
+  margin: 0.8em 0;
+  padding: 12px;
+  overflow: auto;
+  background: var(--fe-sidebar-bg);
+  border: 1px solid var(--fe-border);
+  border-radius: 4px;
+  line-height: 1.5;
+}
+
+.mdPreview pre code {
+  background: transparent;
+  padding: 0;
+  font-size: 13px;
+}
+
+.mdPreview table {
+  border-collapse: collapse;
+  margin: 0.8em 0;
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.mdPreview th,
+.mdPreview td {
+  border: 1px solid var(--fe-border-strong);
+  padding: 6px 12px;
+}
+
+.mdPreview th {
+  background: var(--fe-sidebar-bg);
+  font-weight: 600;
+}
+
+.mdPreview img {
+  max-width: 100%;
+  border-radius: 4px;
+}
+
+.mdPreview hr {
+  border: none;
+  border-top: 1px solid var(--fe-border-strong);
+  margin: 1.5em 0;
+}
+
+/* Fenced code blocks reuse the same token palette as the overlay editor. */
+.mdPreview :global(.hljs-keyword),
+.mdPreview :global(.hljs-selector-tag),
+.mdPreview :global(.hljs-literal) {
+  color: var(--fe-token-keyword);
+}
+
+.mdPreview :global(.hljs-string),
+.mdPreview :global(.hljs-regexp),
+.mdPreview :global(.hljs-addition) {
+  color: var(--fe-token-string);
+}
+
+.mdPreview :global(.hljs-comment),
+.mdPreview :global(.hljs-quote) {
+  color: var(--fe-token-comment);
+  font-style: italic;
+}
+
+.mdPreview :global(.hljs-number),
+.mdPreview :global(.hljs-symbol),
+.mdPreview :global(.hljs-bullet) {
+  color: var(--fe-token-number);
+}
+
+.mdPreview :global(.hljs-title),
+.mdPreview :global(.hljs-section),
+.mdPreview :global(.hljs-title.function_) {
+  color: var(--fe-token-function);
+}
+
+.mdPreview :global(.hljs-type),
+.mdPreview :global(.hljs-built_in),
+.mdPreview :global(.hljs-class .hljs-title) {
+  color: var(--fe-token-type);
+}
+
+.mdPreview :global(.hljs-attr),
+.mdPreview :global(.hljs-attribute),
+.mdPreview :global(.hljs-variable),
+.mdPreview :global(.hljs-template-variable),
+.mdPreview :global(.hljs-params) {
+  color: var(--fe-token-variable);
+}
+
+.mdPreview :global(.hljs-tag),
+.mdPreview :global(.hljs-name) {
+  color: var(--fe-token-tag);
+}
+
+.mdPreview :global(.hljs-meta) {
+  color: var(--fe-token-meta);
+}
+
+.mdPreview :global(.hljs-emphasis) {
+  font-style: italic;
+}
+
+.mdPreview :global(.hljs-strong) {
+  font-weight: 600;
+}
+
 .placeholder {
   flex: 1;
   display: flex;

package/src/client/highlight.ts

@@ -65,7 +65,7 @@ export function detectLanguage(path: string): string | undefined {
   return EXTENSION_TO_LANGUAGE[ext]
 }
 
-function escapeHtml(value: string): string {
+export function escapeHtml(value: string): string {
   return value
     .replace(/&/g, '&')
     .replace(/</g, '&lt;')
@@ -74,6 +74,11 @@ function escapeHtml(value: string): string {
     .replace(/'/g, '&#39;')
 }
 
+/** True when a language id names a registered highlight.js language. */
+export function canHighlight(language: string): boolean {
+  return language !== '' && hljs.getLanguage(language) !== undefined
+}
+
 /** Highlight code for a file; returns safe HTML (code is HTML-escaped). */
 export function highlightCode(code: string, path: string): string {
   const language = detectLanguage(path)
@@ -86,3 +91,15 @@ export function highlightCode(code: string, path: string): string {
   }
   return escapeHtml(code)
 }
+
+/** Highlight a fenced code block by its declared language; escaped plain text when unknown. */
+export function highlightFence(code: string, language: string): string {
+  if (canHighlight(language)) {
+    try {
+      return hljs.highlight(code, { language, ignoreIllegals: true }).value
+    } catch {
+      // fall through to escaped text
+    }
+  }
+  return escapeHtml(code)
+}

package/src/client/index.ts

@@ -23,23 +23,46 @@ 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 watchFiles = (paths: string[]) => unwrap(ctx.connection.rpc.call(CHANNEL, 'watch', { paths }))
+  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 copyPath = (from: string, to: string, overwrite: boolean, signal?: AbortSignal) =>
+    unwrap(ctx.connection.rpc.call(CHANNEL, 'copy', { from, to, overwrite }, signal))
+  const revealInExplorer = (path: string, kind: 'file' | 'dir', signal?: AbortSignal) =>
+    unwrap(ctx.connection.rpc.call(CHANNEL, 'reveal', { path, kind }, 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, revealInExplorer, createFile, createDir, renameFile, removePath, copyPath }),
   }, FileExplorer))
 
   ctx.slots.inject('explorer.preview', () => ctx.slots.register({
     name: 'explorer.preview',
     locale: NS,
-    inject: () => ({ readFile, writeFile }),
+    inject: () => ({ readFile, writeFile, watchFiles }),
   }, FilePreview))
 }
 
-async function unwrap<T>(result: Promise<{ ok: true; value: T } | { ok: false; error: { message: string } }>): Promise<T> {
+interface RpcFailure {
+  ok: false
+  error: { code: string; message: string }
+}
+
+/** Error carrying the host's machine-readable `code` (e.g. 'exists' on copy collision). */
+export interface RpcError extends Error {
+  code?: string
+}
+
+async function unwrap<T>(result: Promise<{ ok: true; value: T } | RpcFailure>): Promise<T> {
   const resolved = await result
-  if (!resolved.ok) throw new Error(resolved.error.message)
+  if (!resolved.ok) {
+    const error = new Error(resolved.error.message) as RpcError
+    error.code = resolved.error.code
+    throw error
+  }
   return resolved.value
 }

package/src/client/locales.ts

@@ -11,15 +11,51 @@ export const zh = {
   'action.saveHint': 'Ctrl+S 保存',
   'action.wrapOn': '开启自动换行（显示层换行，不改文件）',
   'action.wrapOff': '关闭自动换行（长行横向滚动）',
+  'action.mdRender': '渲染预览（Markdown）',
+  'action.mdSource': '查看 Markdown 源码',
   'tab.close': '关闭标签页',
   'tab.collapse': '收起文件详情',
   'tab.expand': '弹出文件详情',
+  'tab.diskChanged': '文件已在磁盘上被修改，点击重新加载（会放弃未保存的编辑）',
+  'menu.open': '打开预览',
+  'menu.newFile': '新建文件',
+  'menu.newFolder': '新建文件夹',
+  'menu.rename': '重命名',
+  'menu.delete': '删除',
+  'menu.copyPath': '复制路径',
+  'menu.copy': '复制',
+  'menu.cut': '剪切',
+  'menu.paste': '粘贴',
+  'menu.refresh': '刷新',
+  'menu.openSystem': '在系统中打开',
+  'menu.revealInExplorer': '在资源管理器打开',
+  'menu.deleteSelected': '删除选中的 {count} 项',
+  'action.undo': '撤销（Ctrl+Z）',
+  'undo.copy': '复制「{name}」',
+  'undo.move': '移动「{name}」',
+  'undo.rename': '重命名「{name}」',
+  'undo.create': '新建「{name}」',
+  'undo.delete': '删除「{name}」',
+  'error.reveal': '在资源管理器打开失败',
+  'prompt.newFileName': '新文件名',
+  'prompt.newFolderName': '新文件夹名',
+  'prompt.renameTo': '重命名为',
+  'confirm.deleteFile': '确定删除文件「{name}」吗？（可撤销）',
+  'confirm.deleteDir': '确定删除文件夹「{name}」及其全部内容吗？（可撤销）',
+  'confirm.deleteSelected': '确定删除选中的 {count} 项吗？{names}（可撤销）',
+  'confirm.overwrite': '「{name}」已存在，是否覆盖？',
+  'clipboard.copied': '已复制 {count} 项',
+  'clipboard.cut': '已剪切 {count} 项',
+  'clipboard.pasteHint': ' · Ctrl+V 粘贴到当前目录',
+  'clipboard.clear': '清除剪贴板',
   'preview.loading': '加载中…',
   'preview.binary': '二进制文件，无法预览',
+  'preview.imageFailed': '图片加载失败',
   'preview.tooLarge': '文件过大，仅支持预览不超过 {limit}',
   'preview.emptyDir': '空目录',
   'preview.error': '加载失败',
   'preview.highlightOff': '大文件：已关闭语法高亮（仍可编辑）',
+  'preview.mdRenderOff': '大文件：已切换为源码视图（仍可编辑）',
 } as const
 
 export type FilesKey = keyof typeof zh
@@ -33,13 +69,49 @@ export const en: Record<FilesKey, string> = {
   'action.saveHint': 'Ctrl+S to save',
   'action.wrapOn': 'Enable word wrap (display only, file unchanged)',
   'action.wrapOff': 'Disable word wrap (long lines scroll horizontally)',
+  'action.mdRender': 'Rendered preview',
+  'action.mdSource': 'Show markdown source',
   'tab.close': 'Close tab',
   'tab.collapse': 'Collapse file details',
   'tab.expand': 'Expand file details',
+  'tab.diskChanged': 'File changed on disk — click to reload (discards unsaved edits)',
+  'menu.open': 'Open preview',
+  'menu.newFile': 'New File',
+  'menu.newFolder': 'New Folder',
+  'menu.rename': 'Rename',
+  'menu.delete': 'Delete',
+  'menu.copyPath': 'Copy Path',
+  'menu.copy': 'Copy',
+  'menu.cut': 'Cut',
+  'menu.paste': 'Paste',
+  'menu.refresh': 'Refresh',
+  'menu.openSystem': 'Open in System',
+  'menu.revealInExplorer': 'Reveal in Explorer',
+  'menu.deleteSelected': 'Delete {count} selected item(s)',
+  'action.undo': 'Undo (Ctrl+Z)',
+  'undo.copy': 'Copy "{name}"',
+  'undo.move': 'Move "{name}"',
+  'undo.rename': 'Rename "{name}"',
+  'undo.create': 'Create "{name}"',
+  'undo.delete': 'Delete "{name}"',
+  'error.reveal': 'Failed to reveal in Explorer',
+  'prompt.newFileName': 'New file name',
+  'prompt.newFolderName': 'New folder name',
+  'prompt.renameTo': 'Rename to',
+  'confirm.deleteFile': 'Delete file "{name}"? (undoable)',
+  'confirm.deleteDir': 'Delete folder "{name}" and all its contents? (undoable)',
+  'confirm.deleteSelected': 'Delete {count} selected item(s)? {names} (undoable)',
+  'confirm.overwrite': '"{name}" already exists. Overwrite?',
+  'clipboard.copied': '{count} item(s) copied',
+  'clipboard.cut': '{count} item(s) cut',
+  'clipboard.pasteHint': ' · Ctrl+V to paste here',
+  'clipboard.clear': 'Clear clipboard',
   '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',
   'preview.highlightOff': 'Large file: syntax highlighting off (still editable)',
+  'preview.mdRenderOff': 'Large file: source view (still editable)',
 }