dsh-plugin-workbench 0.0.2 → 0.0.3

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.2",
+  "version": "0.0.3",
   "type": "module",
   "packageManager": "pnpm@11.21.0",
   "engines": {
@@ -26,7 +26,8 @@
     "build": "tsdown",
     "watch": "tsdown --watch",
     "typecheck": "tsc --noEmit",
-    "prepare": "pnpm run build"
+    "prepare": "pnpm run build",
+    "postbuild": "node scripts/verify-alignment.mjs"
   },
   "license": "MIT",
   "author": "Pasumao <1830316810@qq.com>",

package/scripts/verify-alignment.mjs

@@ -0,0 +1,180 @@
+#!/usr/bin/env node
+/**
+ * verify-alignment.mjs — keep the plugin's three identities in sync.
+ *
+ * The dsh web boot fails with
+ *   failed to import loader entry ... (X): client-modules: bundle ... loaded
+ *   without registering "X" via __ModuleLoader__.load
+ * whenever the loader-entry name (the name the plugin is INSTALLED under in the
+ * dsh profile, or the `name:` in the profile's cordis.patch.yml insert) differs
+ * from the id the built client bundle registers — and the bundle always
+ * registers the package.json `name` (baked in at build time).
+ *
+ * This script checks all three against package.json's `name`:
+ *   1. built bundle registration id (lib/client.js head)
+ *   2. profile package.json dependency key pointing at this repo
+ *   3. profile cordis.patch.yml insert `name:` / dsh.profile.bundles entries
+ * and exits non-zero (failing the build via the `postbuild` hook) when they
+ * drift, so a rebuild can never silently break the next dsh boot again.
+ *
+ * Usage:
+ *   node scripts/verify-alignment.mjs            # check (exit 1 on mismatch)
+ *   node scripts/verify-alignment.mjs --fix      # repair profile files, re-check
+ *   node scripts/verify-alignment.mjs --profile <name>   # default: web
+ *   DSH_VERIFY_SKIP=1 node ...                  # bypass (CI / other machines)
+ */
+import { existsSync, readFileSync, realpathSync, writeFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { homedir } from 'node:os'
+
+const REPO_ROOT = realpathSync(fileURLToPath(new URL('..', import.meta.url)))
+/** Read a text file, stripping a UTF-8 BOM if present (JSON.parse / regexes reject it). */
+function readUtf8(path) {
+  const raw = readFileSync(path, 'utf8')
+  return raw.charCodeAt(0) === 0xfeff ? raw.slice(1) : raw
+}
+
+const MANIFEST = JSON.parse(readUtf8(join(REPO_ROOT, 'package.json')))
+const REAL_NAME = MANIFEST.name
+/** The scoped alias this plugin was historically installed under (null when the name is already scoped). */
+const ALIAS = REAL_NAME.startsWith('@') ? null : `@dsh-external/${REAL_NAME}`
+const ALIAS_RE = ALIAS ? new RegExp(`name:\\s*['"]?${escapeRegExp(ALIAS)}['"]?`) : null
+
+const args = process.argv.slice(2)
+const profileName = args.includes('--profile') ? args[args.indexOf('--profile') + 1] : 'web'
+const dshHome = process.env.DSH_HOME ?? join(homedir(), '.dsh')
+const profileDir = join(dshHome, 'profiles', profileName)
+const manifestPath = join(profileDir, 'package.json')
+const patchPath = join(profileDir, 'cordis.patch.yml')
+
+if (process.env.DSH_VERIFY_SKIP === '1') {
+  console.log('[verify-alignment] skipped (DSH_VERIFY_SKIP=1).')
+  process.exit(0)
+}
+
+const clientRel = (() => {
+  const c = MANIFEST.exports?.['./client']
+  if (typeof c === 'string') return c
+  if (c && typeof c.default === 'string') return c.default
+  return 'lib/client.js'
+})()
+
+/** One check pass; returns the list of mismatches (empty = aligned). */
+function check() {
+  const failures = []
+  const clientPath = join(REPO_ROOT, clientRel)
+  if (existsSync(clientPath)) {
+    const head = readUtf8(clientPath).slice(0, 400)
+    const m = /id:\s*"([^"]+)"/.exec(head)
+    if (!m) {
+      failures.push(`lib/client.js does not open with a __ModuleLoader__.load({ id: ... }) registration — is the bundle built?`)
+    } else if (m[1] !== REAL_NAME) {
+      failures.push(`bundle registers "${m[1]}" but package.json name is "${REAL_NAME}" — rebuild produced a mismatched id (tsdown derives it from the package name).`)
+    } else {
+      console.log(`[verify] bundle registration id OK: ${m[1]}`)
+    }
+  } else {
+    failures.push(`client bundle not found at ${clientPath} — run pnpm run build first.`)
+  }
+
+  if (!existsSync(manifestPath)) {
+    console.log(`[verify] profile "${profileName}" not found at ${profileDir} — skipping profile checks (fine outside this machine).`)
+    return failures
+  }
+
+  const profile = JSON.parse(readUtf8(manifestPath))
+  const deps = profile.dependencies ?? {}
+  const here = Object.entries(deps)
+    .map(([key, spec]) => {
+      const target = String(spec).replace(/^(?:link|file|workspace):/i, '').replace(/^\.\//, '')
+      const abs = resolve(profileDir, target)
+      try {
+        return { key, resolved: existsSync(abs) ? realpathSync(abs) : null }
+      } catch {
+        return { key, resolved: null }
+      }
+    })
+    .filter((d) => d.resolved === REPO_ROOT)
+    .map((d) => d.key)
+
+  if (here.length === 0) {
+    console.log(`[verify] ${REAL_NAME} is not installed in profile "${profileName}" — skipping install-name checks.`)
+  } else if (here.includes(REAL_NAME)) {
+    console.log(`[verify] profile install name OK: ${REAL_NAME}`)
+  } else {
+    failures.push(`profile dependency is keyed "${here[0]}" but must be "${REAL_NAME}": the loader entry name follows the install key, while the bundle registers the package name.`)
+  }
+
+  const bundles = profile.dsh?.profile?.bundles ?? []
+  if (ALIAS && bundles.includes(ALIAS)) {
+    failures.push(`dsh.profile.bundles lists "${ALIAS}" but must be "${REAL_NAME}".`)
+  }
+
+  if (existsSync(patchPath)) {
+    if (ALIAS_RE && ALIAS_RE.test(readUtf8(patchPath))) {
+      failures.push(`cordis.patch.yml references "${ALIAS}" in an insert name — the name: must be "${REAL_NAME}" (matches the installed package and the bundle registration).`)
+    } else {
+      console.log('[verify] profile patch name OK (no mismatched insert name).')
+    }
+  }
+  return failures
+}
+
+/** Apply the three profile repairs (only when the drift is unambiguous). Returns descriptions of what changed. */
+function fix() {
+  const fixed = []
+  if (!existsSync(manifestPath)) return fixed
+  const profile = JSON.parse(readUtf8(manifestPath))
+  const deps = profile.dependencies ?? {}
+
+  if (ALIAS && deps[ALIAS] !== undefined && deps[REAL_NAME] === undefined) {
+    profile.dependencies[REAL_NAME] = deps[ALIAS]
+    delete profile.dependencies[ALIAS]
+    fixed.push(`package.json dependency key ${ALIAS} → ${REAL_NAME}`)
+  }
+
+  const bundles = profile.dsh?.profile?.bundles ?? []
+  if (ALIAS && bundles.includes(ALIAS)) {
+    profile.dsh.profile.bundles = bundles.map((b) => (b === ALIAS ? REAL_NAME : b))
+    fixed.push(`dsh.profile.bundles entry ${ALIAS} → ${REAL_NAME}`)
+  }
+
+  if (fixed.length > 0) writeFileSync(manifestPath, `${JSON.stringify(profile, null, 2)}\n`, 'utf8')
+
+  if (ALIAS && existsSync(patchPath)) {
+    let text = readUtf8(patchPath)
+    const before = text
+    text = text.replace(ALIAS_RE, (full) => full.replace(ALIAS, REAL_NAME))
+    if (text !== before) {
+      writeFileSync(patchPath, text, 'utf8')
+      fixed.push(`cordis.patch.yml insert name ${ALIAS} → ${REAL_NAME}`)
+    }
+  }
+  return fixed
+}
+
+let failures = check()
+if (failures.length > 0 && args.includes('--fix')) {
+  const fixed = fix()
+  if (fixed.length > 0) console.log(`[verify] fixed: ${fixed.join('; ')}`)
+  failures = check()
+  if (failures.length === 0) {
+    console.log(`[verify] now re-link in the profile and restart dsh web:`)
+    console.log(`  cd "${profileDir}" && pnpm install`)
+  }
+}
+
+if (failures.length > 0) {
+  console.error(`[verify-alignment] FAILED — ${failures.length} mismatch(es):`)
+  for (const f of failures) console.error(`  - ${f}`)
+  console.error('[verify-alignment] fix with: node scripts/verify-alignment.mjs --fix   (then pnpm install + restart dsh web)')
+  process.exit(1)
+}
+
+console.log(`[verify-alignment] PASS — bundle id, install name, and patch name all agree on "${REAL_NAME}".`)
+process.exit(0)
+
+function escapeRegExp(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}

package/src/client/FileExplorer.tsx

@@ -5,6 +5,7 @@
  */
 import { useCallback, useEffect, useRef, useState } 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'
 
@@ -303,7 +304,9 @@ export function FileExplorer({ width, useSessions, t, listDir, openPath }: FileE
           >
             {isDir ? (isExpanded ? '▾' : '▸') : ''}
           </span>
-          <span className={styles.icon}>{isDir ? '📁' : entry.kind === 'file' ? '📄' : '·'}</span>
+          <span className={styles.icon}>
+            {isDir ? (isExpanded ? '📂' : '📁') : entry.kind === 'file' ? <FileIcon name={entry.name} /> : '·'}
+          </span>
           <span className={styles.name}>{entry.name}</span>
           {entry.kind === 'file' && entry.size !== undefined && (
             <span className={styles.size}>{formatSize(entry.size)}</span>

package/src/client/FilePreview.tsx

@@ -8,8 +8,9 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import type { DragEvent as ReactDragEvent, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent } from 'react'
 import styles from './files.module.css'
 import { highlightCode } from './highlight'
+import { FileIcon } from './fileIcons'
 import type { FilesKey } from './locales'
-import { activateFile, closeFile, collapsePreview, moveTab, useTabsState } from './store'
+import { activateFile, closeFile, collapsePreview, moveTab, toggleWrap, useTabsState } from './store'
 import type { FsReadResult } from './FileExplorer'
 
 interface TabData {
@@ -62,7 +63,7 @@ function previewDataOf(result: FsReadResult): TabData {
 }
 
 export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
-  const { tabs, active, theme, collapsed } = useTabsState()
+  const { tabs, active, theme, collapsed, wrap } = useTabsState()
 
   const [previewWidth, setPreviewWidth] = useState<number | null>(null)
   const [closing, setClosing] = useState(false)
@@ -247,7 +248,7 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
       case 'loaded': {
         const highlighted = active !== undefined ? highlightCode(activeData.draft ?? '', active) : ''
         return (
-          <div className={styles.editor}>
+          <div className={styles.editor} data-wrap={wrap ? 'on' : 'off'}>
             <pre ref={highlightRef} className={styles.editorHighlight} aria-hidden="true">
               <code dangerouslySetInnerHTML={{ __html: highlighted }} />
             </pre>
@@ -258,7 +259,7 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
               onScroll={onTextareaScroll}
               onKeyDown={onKeyDown}
               spellCheck={false}
-              wrap="off"
+              wrap={wrap ? 'soft' : 'off'}
               title={t('action.saveHint')}
             />
             {saveError !== undefined && <div className={styles.saveError}>{saveError}</div>}
@@ -318,6 +319,7 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
                     onDragEnd={onTabDragEnd}
                     title={path}
                   >
+                    <span className={styles.tabIcon}><FileIcon name={basenameOf(path)} /></span>
                     <span className={styles.tabName}>{basenameOf(path)}</span>
                     {data?.dirty === true && <span className={styles.tabDot} />}
                     <button
@@ -335,6 +337,14 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
                 )
               })}
             </div>
+            <button
+              type="button"
+              className={`${styles.tabAction}${wrap ? ` ${styles.tabActionActive}` : ''}`}
+              title={wrap ? t('action.wrapOff') : t('action.wrapOn')}
+              onClick={toggleWrap}
+            >
+              {'⤶'}
+            </button>
             <button
               type="button"
               className={styles.collapse}

package/src/client/fileIcons.tsx

@@ -0,0 +1,144 @@
+/**
+ * File-type icons for the explorer tree rows and the preview tabs.
+ *
+ * Code/config files render as small colored badges with an extension label
+ * (VS Code "Minimal"-theme style); media, archives and installer files use
+ * emoji; anything unknown falls back to a generic document glyph. No icon
+ * assets are shipped — badges are pure CSS (per-language colors) and emoji
+ * come from the platform font.
+ */
+import styles from './files.module.css'
+
+interface BadgeSpec {
+  label: string
+  bg: string
+  fg: string
+}
+
+/** lowercase extension (no dot) → badge colors. */
+const BADGES: Record<string, BadgeSpec> = {
+  // code
+  ts: { label: 'TS', bg: '#3178c6', fg: '#ffffff' },
+  mts: { label: 'TS', bg: '#3178c6', fg: '#ffffff' },
+  cts: { label: 'TS', bg: '#3178c6', fg: '#ffffff' },
+  tsx: { label: 'TSX', bg: '#61dafb', fg: '#06283d' },
+  js: { label: 'JS', bg: '#f7df1e', fg: '#1e1e1e' },
+  mjs: { label: 'JS', bg: '#f7df1e', fg: '#1e1e1e' },
+  cjs: { label: 'JS', bg: '#f7df1e', fg: '#1e1e1e' },
+  jsx: { label: 'JSX', bg: '#61dafb', fg: '#06283d' },
+  json: { label: '{}', bg: '#cbcb41', fg: '#1e1e1e' },
+  jsonc: { label: '{}', bg: '#cbcb41', fg: '#1e1e1e' },
+  html: { label: 'HTML', bg: '#e44d26', fg: '#ffffff' },
+  htm: { label: 'HTML', bg: '#e44d26', fg: '#ffffff' },
+  css: { label: 'CSS', bg: '#2965f1', fg: '#ffffff' },
+  scss: { label: 'SCSS', bg: '#cc6699', fg: '#ffffff' },
+  less: { label: 'LESS', bg: '#2a4d80', fg: '#ffffff' },
+  md: { label: 'MD', bg: '#519aba', fg: '#ffffff' },
+  markdown: { label: 'MD', bg: '#519aba', fg: '#ffffff' },
+  py: { label: 'PY', bg: '#3572a5', fg: '#ffffff' },
+  pyw: { label: 'PY', bg: '#3572a5', fg: '#ffffff' },
+  go: { label: 'GO', bg: '#00add8', fg: '#06283d' },
+  rs: { label: 'RS', bg: '#dea584', fg: '#1e1e1e' },
+  java: { label: 'JAVA', bg: '#b07219', fg: '#ffffff' },
+  c: { label: 'C', bg: '#6e6e6e', fg: '#ffffff' },
+  h: { label: 'H', bg: '#6e6e6e', fg: '#ffffff' },
+  cpp: { label: 'CPP', bg: '#f34b7d', fg: '#ffffff' },
+  cc: { label: 'CPP', bg: '#f34b7d', fg: '#ffffff' },
+  cxx: { label: 'CPP', bg: '#f34b7d', fg: '#ffffff' },
+  hpp: { label: 'HPP', bg: '#f34b7d', fg: '#ffffff' },
+  hxx: { label: 'HPP', bg: '#f34b7d', fg: '#ffffff' },
+  cs: { label: 'CS', bg: '#178600', fg: '#ffffff' },
+  sh: { label: 'SH', bg: '#89e051', fg: '#1e1e1e' },
+  bash: { label: 'SH', bg: '#89e051', fg: '#1e1e1e' },
+  zsh: { label: 'SH', bg: '#89e051', fg: '#1e1e1e' },
+  ps1: { label: 'PS1', bg: '#012456', fg: '#ffffff' },
+  psm1: { label: 'PS1', bg: '#012456', fg: '#ffffff' },
+  psd1: { label: 'PS1', bg: '#012456', fg: '#ffffff' },
+  bat: { label: 'BAT', bg: '#6e6e6e', fg: '#ffffff' },
+  cmd: { label: 'BAT', bg: '#6e6e6e', fg: '#ffffff' },
+  sql: { label: 'SQL', bg: '#e38c00', fg: '#ffffff' },
+  yml: { label: 'YML', bg: '#cb171e', fg: '#ffffff' },
+  yaml: { label: 'YML', bg: '#cb171e', fg: '#ffffff' },
+  toml: { label: 'TOML', bg: '#8b8b8b', fg: '#ffffff' },
+  ini: { label: 'INI', bg: '#8b8b8b', fg: '#ffffff' },
+  conf: { label: 'INI', bg: '#8b8b8b', fg: '#ffffff' },
+  cfg: { label: 'INI', bg: '#8b8b8b', fg: '#ffffff' },
+  xml: { label: 'XML', bg: '#a074c4', fg: '#ffffff' },
+  xsl: { label: 'XML', bg: '#a074c4', fg: '#ffffff' },
+  svg: { label: 'SVG', bg: '#e37933', fg: '#ffffff' },
+  vue: { label: 'VUE', bg: '#41b883', fg: '#06283d' },
+  lock: { label: 'LOCK', bg: '#9d9d9d', fg: '#1e1e1e' },
+  env: { label: 'ENV', bg: '#f05033', fg: '#ffffff' },
+  gitignore: { label: 'GIT', bg: '#f05033', fg: '#ffffff' },
+  gitattributes: { label: 'GIT', bg: '#f05033', fg: '#ffffff' },
+  gitmodules: { label: 'GIT', bg: '#f05033', fg: '#ffffff' },
+  editorconfig: { label: 'CFG', bg: '#8b8b8b', fg: '#ffffff' },
+  npmrc: { label: 'CFG', bg: '#8b8b8b', fg: '#ffffff' },
+  pnpmrc: { label: 'CFG', bg: '#8b8b8b', fg: '#ffffff' },
+  yarnrc: { label: 'CFG', bg: '#8b8b8b', fg: '#ffffff' },
+  mk: { label: 'MK', bg: '#6d8086', fg: '#ffffff' },
+  makefile: { label: 'MK', bg: '#6d8086', fg: '#ffffff' },
+  txt: { label: 'TXT', bg: '#9d9d9d', fg: '#ffffff' },
+  log: { label: 'TXT', bg: '#9d9d9d', fg: '#ffffff' },
+  pdf: { label: 'PDF', bg: '#e74c3c', fg: '#ffffff' },
+}
+
+/** lowercase extension (no dot) → emoji glyph. */
+const EMOJI: Record<string, string> = {
+  png: '🖼️', jpg: '🖼️', jpeg: '🖼️', gif: '🖼️', webp: '🖼️', bmp: '🖼️', ico: '🖼️', avif: '🖼️', jfif: '🖼️', tif: '🖼️', tiff: '🖼️',
+  mp3: '🎵', wav: '🎵', flac: '🎵', ogg: '🎵', oga: '🎵', m4a: '🎵', aac: '🎵', wma: '🎵', opus: '🎵', mid: '🎵',
+  mp4: '🎬', mkv: '🎬', avi: '🎬', mov: '🎬', webm: '🎬', flv: '🎬', wmv: '🎬', m4v: '🎬', mpg: '🎬', mpeg: '🎬',
+  zip: '🗜️', rar: '🗜️', '7z': '🗜️', tar: '🗜️', gz: '🗜️', bz2: '🗜️', xz: '🗜️', tgz: '🗜️', tbz2: '🗜️', zst: '🗜️',
+  doc: '📘', docx: '📘', odt: '📘', rtf: '📘',
+  xls: '📗', xlsx: '📗', ods: '📗', csv: '📗',
+  ppt: '📙', pptx: '📙', odp: '📙',
+  epub: '📖', mobi: '📖',
+  exe: '📦', msi: '📦', dmg: '📦', app: '📦', deb: '📦', rpm: '📦', apk: '📦', iso: '📦',
+}
+
+/** Well-known extension-less names (lowercase) → emoji. */
+const NAMED_EMOJI: Record<string, string> = {
+  dockerfile: '🐳',
+}
+
+export type FileIconSpec =
+  | { kind: 'badge'; label: string; bg: string; fg: string }
+  | { kind: 'emoji'; char: string }
+
+/** Resolve a file name to its icon spec (badge colors or an emoji glyph). */
+export function fileIconFor(name: string): FileIconSpec {
+  const lower = name.trim().toLowerCase()
+  if (lower === '') return { kind: 'emoji', char: '📄' }
+
+  const namedEmoji = NAMED_EMOJI[lower]
+  if (namedEmoji !== undefined) return { kind: 'emoji', char: namedEmoji }
+
+  // Dotfiles use the dotted remainder as the key (`.gitignore` → gitignore,
+  // `.env.local` → env), regular files use the last extension segment.
+  let key: string
+  if (lower.startsWith('.')) {
+    const rest = lower.slice(1)
+    key = rest.startsWith('env.') ? 'env' : rest
+  } else {
+    const dot = lower.lastIndexOf('.')
+    key = dot > 0 ? lower.slice(dot + 1) : lower
+  }
+
+  const badge = BADGES[key]
+  if (badge !== undefined) return { kind: 'badge', label: badge.label, bg: badge.bg, fg: badge.fg }
+  const emoji = EMOJI[key]
+  if (emoji !== undefined) return { kind: 'emoji', char: emoji }
+  return { kind: 'emoji', char: '📄' }
+}
+
+/** Render a file's icon: a colored extension badge or an emoji glyph. */
+export function FileIcon({ name }: { name: string }) {
+  const icon = fileIconFor(name)
+  if (icon.kind === 'emoji') return <>{icon.char}</>
+  const className = icon.label.length >= 4 ? `${styles.fileBadge} ${styles.fileBadgeLong}` : styles.fileBadge
+  return (
+    <span className={className} style={{ background: icon.bg, color: icon.fg }}>
+      {icon.label}
+    </span>
+  )
+}

package/src/client/files.module.css

@@ -170,6 +170,30 @@
   line-height: 22px;
 }
 
+/* Colored extension badge (VS Code "Minimal"-style file icon). */
+.fileBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 15px;
+  border-radius: 3px;
+  font-size: 8px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.3px;
+  padding: 0 1px;
+  box-sizing: border-box;
+  vertical-align: middle;
+  user-select: none;
+}
+
+/* Four-character labels (HTML/JAVA/SCSS/LESS/TOML/…) need a smaller size. */
+.fileBadgeLong {
+  font-size: 6.5px;
+  letter-spacing: -0.4px;
+}
+
 .name {
   flex: 1;
   min-width: 0;
@@ -281,7 +305,8 @@
   scrollbar-width: thin;
 }
 
-.collapse {
+.collapse,
+.tabAction {
   flex: none;
   appearance: none;
   border: none;
@@ -300,11 +325,18 @@
   padding: 0;
 }
 
-.collapse:hover {
+.collapse:hover,
+.tabAction:hover {
   background: var(--fe-hover);
   color: var(--fe-fg);
 }
 
+/* Wrap toggle active state: soft wrap is on. */
+.tabActionActive {
+  background: var(--fe-hover);
+  color: var(--fe-accent);
+}
+
 .tab {
   flex: none;
   display: flex;
@@ -337,6 +369,16 @@
   text-overflow: ellipsis;
 }
 
+.tabIcon {
+  flex: none;
+  width: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  line-height: 1;
+}
+
 .tabClose {
   appearance: none;
   border: none;
@@ -385,12 +427,16 @@
   inset: 0;
   margin: 0;
   padding: 12px;
-  overflow: hidden;
+  /* auto (not hidden): the highlight layer gets the same scrollbar gutter as
+     the textarea, so both content boxes have identical widths and wrap at the
+     same points. Its scrollbars stack invisibly beneath the textarea's. */
+  overflow: auto;
   pointer-events: none;
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 13px;
   line-height: 1.5;
   white-space: pre;
+  tab-size: 2;
   color: var(--fe-fg);
   background: transparent;
 }
@@ -422,6 +468,18 @@
   tab-size: 2;
 }
 
+/* Display-only soft wrap: both layers wrap identically; the file content
+   itself is never modified (wrap="soft" on the textarea). */
+.editor[data-wrap='on'] .editorHighlight,
+.editor[data-wrap='on'] .editorTextarea {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.editor[data-wrap='on'] .editorTextarea {
+  overflow-x: hidden;
+}
+
 .saveError {
   position: absolute;
   right: 8px;

package/src/client/locales.ts

@@ -9,6 +9,8 @@ export const zh = {
   'action.open': '在系统中打开',
   'action.theme': '切换浅色/暗色主题',
   'action.saveHint': 'Ctrl+S 保存',
+  'action.wrapOn': '开启自动换行（显示层换行，不改文件）',
+  'action.wrapOff': '关闭自动换行（长行横向滚动）',
   'tab.close': '关闭标签页',
   'tab.collapse': '收起文件详情',
   'tab.expand': '弹出文件详情',
@@ -28,6 +30,8 @@ export const en: Record<FilesKey, string> = {
   'action.open': 'Open in system',
   'action.theme': 'Toggle light/dark theme',
   'action.saveHint': 'Ctrl+S to save',
+  'action.wrapOn': 'Enable word wrap (display only, file unchanged)',
+  'action.wrapOff': 'Disable word wrap (long lines scroll horizontally)',
   'tab.close': 'Close tab',
   'tab.collapse': 'Collapse file details',
   'tab.expand': 'Expand file details',

package/src/client/store.ts

@@ -20,6 +20,8 @@ export interface TabsStateView {
   tabs: string[]
   active: string | undefined
   collapsed: boolean
+  /** Display-only soft wrap for the editor (never touches the file content). */
+  wrap: boolean
   theme: FeTheme
   cwd: string | undefined
 }
@@ -27,14 +29,29 @@ export interface TabsStateView {
 const EMPTY_TABS: string[] = []
 const EMPTY_WORKSPACE: PerWorkspace = { tabs: EMPTY_TABS, active: undefined, collapsed: false }
 
+const WRAP_KEY = 'dsh-plugin-workbench:wrap'
+
+/** Read the persisted wrap preference; defaults to soft wrap ON. */
+function storedWrap(): boolean {
+  try {
+    if (typeof window === 'undefined') return true
+    const stored = window.localStorage.getItem(WRAP_KEY)
+    return stored === null ? true : stored === '1'
+  } catch {
+    return true
+  }
+}
+
 interface StoreState {
   currentCwd: string | undefined
   workspaces: Record<string, PerWorkspace>
   theme: FeTheme
+  wrap: boolean
 }
 
-let state: StoreState = { currentCwd: undefined, workspaces: {}, theme: 'dark' }
-let view: TabsStateView = { tabs: EMPTY_TABS, active: undefined, collapsed: false, theme: 'dark', cwd: undefined }
+const initialWrap = storedWrap()
+let state: StoreState = { currentCwd: undefined, workspaces: {}, theme: 'dark', wrap: initialWrap }
+let view: TabsStateView = { tabs: EMPTY_TABS, active: undefined, collapsed: false, wrap: initialWrap, theme: 'dark', cwd: undefined }
 const listeners = new Set<() => void>()
 
 function workspaceOf(cwd: string | undefined): PerWorkspace {
@@ -63,6 +80,7 @@ function commit(next: StoreState): void {
     tabs: ws.tabs,
     active: ws.active,
     collapsed: ws.collapsed,
+    wrap: state.wrap,
     theme: state.theme,
     cwd: state.currentCwd,
   }
@@ -70,6 +88,7 @@ function commit(next: StoreState): void {
     nextView.tabs === view.tabs
     && nextView.active === view.active
     && nextView.collapsed === view.collapsed
+    && nextView.wrap === view.wrap
     && nextView.theme === view.theme
     && nextView.cwd === view.cwd
   ) return
@@ -149,3 +168,14 @@ export function expandPreview(): void {
 export function toggleTheme(): void {
   commit({ ...state, theme: state.theme === 'dark' ? 'light' : 'dark' })
 }
+
+/** Toggle display-only soft wrap for the editor (global, persisted). */
+export function toggleWrap(): void {
+  const wrap = !state.wrap
+  try {
+    window.localStorage.setItem(WRAP_KEY, wrap ? '1' : '0')
+  } catch {
+    // storage unavailable — the preference just won't persist across reloads
+  }
+  commit({ ...state, wrap })
+}