dsh-plugin-workbench 0.0.2 → 0.0.4

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.4",
   "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

@@ -3,8 +3,9 @@
  * (patched) ui-layout AppFrame. File selection is pushed into the shared
  * selection store so the `explorer.preview` slot can render the split view.
  */
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { memo, 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'
 
@@ -63,6 +64,12 @@ function formatSize(bytes: number): string {
 /** How often the visible tree is re-listed to pick up disk changes. */
 const REFRESH_MS = 2000
 
+/** How many previously-expanded folders to re-list at once on workspace switch. */
+const DIR_LOAD_BATCH = 4
+
+/** Pause between batches when restoring expanded folders. */
+const DIR_LOAD_GAP_MS = 50
+
 const EMPTY_EXPANDED = new Set<string>()
 
 /** True when two directory listings are identical (name/kind/size). */
@@ -74,6 +81,95 @@ function sameEntries(a: FsListEntry[], b: FsListEntry[]): boolean {
   return true
 }
 
+interface TreeRowProps {
+  entry: FsListEntry
+  depth: number
+  isActive: boolean
+  isExpanded: boolean
+  onToggleDir: (path: string) => void
+  onRefreshDir: (path: string) => void
+  onSelect: (entry: FsListEntry) => void
+  onDoubleClick: (entry: FsListEntry) => void
+  onOpenExternal: (path: string) => Promise<void>
+  t: (key: FilesKey, params?: Record<string, unknown>) => string
+}
+
+/**
+ * One tree row, memoized so opening/activating a file (which changes the
+ * active-path highlight) re-renders only the affected row — with a workspace
+ * full of files, re-rendering the whole tree on every click is what made
+ * opening files feel laggy.
+ */
+const TreeRow = memo(function TreeRow({
+  entry,
+  depth,
+  isActive,
+  isExpanded,
+  onToggleDir,
+  onRefreshDir,
+  onSelect,
+  onDoubleClick,
+  onOpenExternal,
+  t,
+}: TreeRowProps) {
+  const isDir = entry.kind === 'dir'
+  return (
+    <div
+      className={`${styles.row} ${isActive ? styles.rowSelected : ''}`}
+      style={{ paddingLeft: 8 + depth * 14 }}
+      onClick={() => onSelect(entry)}
+      onDoubleClick={() => onDoubleClick(entry)}
+      role="treeitem"
+      aria-selected={isActive}
+      aria-expanded={isDir ? isExpanded : undefined}
+      title={entry.name}
+    >
+      <span
+        className={styles.chevron}
+        onClick={(e) => {
+          e.stopPropagation()
+          if (isDir) onToggleDir(entry.path)
+        }}
+      >
+        {isDir ? (isExpanded ? '▾' : '▸') : ''}
+      </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>
+      )}
+      <span className={styles.actions}>
+        <button
+          type="button"
+          className={styles.action}
+          title={t('action.open')}
+          onClick={(e) => {
+            e.stopPropagation()
+            void onOpenExternal(entry.path)
+          }}
+        >
+          ↗
+        </button>
+        {isDir && (
+          <button
+            type="button"
+            className={styles.action}
+            title={t('action.refresh')}
+            onClick={(e) => {
+              e.stopPropagation()
+              onRefreshDir(entry.path)
+            }}
+          >
+            ⟳
+          </button>
+        )}
+      </span>
+    </div>
+  )
+})
+
 export function FileExplorer({ width, useSessions, t, listDir, openPath }: FileExplorerProps) {
   const sessionList = useSessions((s) => s)
   const currentId = sessionList.current
@@ -97,6 +193,10 @@ export function FileExplorer({ width, useSessions, t, listDir, openPath }: FileE
   // Latest tree snapshot for the polling tick (avoids stale closures).
   const treeRef = useRef({ root, children, expanded, rootLoading })
   treeRef.current = { root, children, expanded, rootLoading }
+  // Stable view of the loaded listings so toggleDir doesn't depend on the
+  // children state (keeps memoized rows from re-rendering on listing updates).
+  const childrenRef = useRef(children)
+  childrenRef.current = children
 
   // Expose the explorer width so the maid-atelier fixed chrome (top/bottom
   // trim) can shift past this column instead of covering it.
@@ -128,15 +228,22 @@ export function FileExplorer({ width, useSessions, t, listDir, openPath }: FileE
     const controller = new AbortController()
     rootAbortRef.current = controller
     listDir(cwd, controller.signal)
-      .then((result) => {
+      .then(async (result) => {
         if (controller.signal.aborted) return
         setRoot(result.root)
         setChildren({ [result.root]: result.entries })
         setRootError(undefined)
-        // Reload the contents of this workspace's previously-expanded folders
-        // right away instead of waiting for the auto-refresh tick.
-        for (const dirPath of expanded) {
-          if (dirPath !== result.root) void loadDir(dirPath)
+        // Restore previously-expanded folders in small batches so a workspace
+        // with many expanded folders doesn't flood the tree (and the page)
+        // all at once; the auto-refresh tick fills any remainder shortly after.
+        const dirs = [...expanded].filter((dirPath) => dirPath !== result.root)
+        for (let i = 0; i < dirs.length; i += DIR_LOAD_BATCH) {
+          if (controller.signal.aborted) return
+          const batch = dirs.slice(i, i + DIR_LOAD_BATCH)
+          await Promise.all(batch.map((dirPath) => loadDir(dirPath)))
+          if (i + DIR_LOAD_BATCH < dirs.length) {
+            await new Promise((resolve) => setTimeout(resolve, DIR_LOAD_GAP_MS))
+          }
         }
       })
       .catch((error) => {
@@ -239,8 +346,8 @@ export function FileExplorer({ width, useSessions, t, listDir, openPath }: FileE
       else next.add(dirPath)
       return { ...prev, [cwdKey]: next }
     })
-    if (!children[dirPath]) void loadDir(dirPath)
-  }, [cwdKey, children, loadDir])
+    if (!childrenRef.current[dirPath]) void loadDir(dirPath)
+  }, [cwdKey, loadDir])
 
   const refreshDir = useCallback((dirPath: string) => {
     setChildren((prev) => {
@@ -284,57 +391,18 @@ export function FileExplorer({ width, useSessions, t, listDir, openPath }: FileE
 
     return (
       <div key={entry.path}>
-        <div
-          className={`${styles.row} ${entry.kind === 'file' && activePath === entry.path ? styles.rowSelected : ''}`}
-          style={{ paddingLeft: 8 + depth * 14 }}
-          onClick={() => onRowClick(entry)}
-          onDoubleClick={() => onRowDoubleClick(entry)}
-          role="treeitem"
-          aria-selected={entry.kind === 'file' && activePath === entry.path}
-          aria-expanded={isDir ? isExpanded : undefined}
-          title={entry.name}
-        >
-          <span
-            className={styles.chevron}
-            onClick={(e) => {
-              e.stopPropagation()
-              if (isDir) toggleDir(entry.path)
-            }}
-          >
-            {isDir ? (isExpanded ? '▾' : '▸') : ''}
-          </span>
-          <span className={styles.icon}>{isDir ? '📁' : entry.kind === 'file' ? '📄' : '·'}</span>
-          <span className={styles.name}>{entry.name}</span>
-          {entry.kind === 'file' && entry.size !== undefined && (
-            <span className={styles.size}>{formatSize(entry.size)}</span>
-          )}
-          <span className={styles.actions}>
-            <button
-              type="button"
-              className={styles.action}
-              title={t('action.open')}
-              onClick={(e) => {
-                e.stopPropagation()
-                void openPath(entry.path)
-              }}
-            >
-              ↗
-            </button>
-            {isDir && (
-              <button
-                type="button"
-                className={styles.action}
-                title={t('action.refresh')}
-                onClick={(e) => {
-                  e.stopPropagation()
-                  refreshDir(entry.path)
-                }}
-              >
-                ⟳
-              </button>
-            )}
-          </span>
-        </div>
+        <TreeRow
+          entry={entry}
+          depth={depth}
+          isActive={entry.kind === 'file' && activePath === entry.path}
+          isExpanded={isExpanded}
+          onToggleDir={toggleDir}
+          onRefreshDir={refreshDir}
+          onSelect={onRowClick}
+          onDoubleClick={onRowDoubleClick}
+          onOpenExternal={openPath}
+          t={t}
+        />
         {isDir && isExpanded && (
           <div>
             {isLoading && <div className={styles.rowHint} style={{ paddingLeft: 8 + (depth + 1) * 14 }}>{t('preview.loading')}</div>}

package/src/client/FilePreview.tsx

@@ -7,9 +7,10 @@
 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 { detectLanguage, 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 {
@@ -36,6 +37,22 @@ const PREVIEW_MIN = 240
 const CHAT_MIN = 240
 const PREVIEW_TOO_LARGE_LABEL = '512KB'
 
+/**
+ * Above this size the overlay editor (syntax-highlight layer + transparent
+ * textarea) falls back to a plain textarea: re-injecting and re-laying out
+ * hundreds of KB of wrapped text on every keystroke is what makes the page
+ * lag. The plain textarea keeps editing, wrapping and scrolling — it only
+ * loses the colors, which files this big rarely need anyway.
+ */
+const HIGHLIGHT_MAX_BYTES = 64 * 1024
+
+/**
+ * Languages always rendered as a plain textarea, never the overlay: the
+ * highlight layer costs a full extra layout pass (and with CJK text a
+ * fragile alignment surface) for prose formats where colors add little.
+ */
+const PLAIN_LANGUAGES = new Set(['markdown'])
+
 function basenameOf(path: string): string {
   const trimmed = path.replace(/[\\/]+$/, '')
   const idx = Math.max(trimmed.lastIndexOf('/'), trimmed.lastIndexOf('\\'))
@@ -62,7 +79,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)
@@ -76,38 +93,46 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
   const previewRef = useRef<HTMLDivElement>(null)
   const handleRef = useRef<HTMLDivElement>(null)
   const highlightRef = useRef<HTMLPreElement>(null)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
 
   const refresh = useCallback(() => bump((v) => v + 1), [])
 
-  // Read newly opened tabs and drop cache entries for closed tabs.
+  // Read the ACTIVE tab's content. Other tabs load lazily on first
+  // activation, so switching to a workspace with many large files doesn't
+  // re-read every tab at once (which used to freeze the switch).
   useEffect(() => {
     const cache = cacheRef.current
     for (const [path] of cache) {
       if (!tabs.includes(path)) cache.delete(path)
     }
-    const controllers: AbortController[] = []
-    for (const path of tabs) {
-      if (cache.has(path)) continue
-      cache.set(path, { status: 'loading' })
-      const controller = new AbortController()
-      controllers.push(controller)
-      readFile(path, controller.signal)
-        .then((result) => {
-          if (!controller.signal.aborted) {
-            cache.set(path, previewDataOf(result))
-            refresh()
-          }
-        })
-        .catch((error) => {
-          if (!controller.signal.aborted) {
-            cache.set(path, { status: 'error', message: error instanceof Error ? error.message : String(error) })
-            refresh()
-          }
-        })
+    const target = active ?? tabs[0]
+    if (target === undefined || cache.has(target)) {
+      refresh()
+      return undefined
     }
+    const controller = new AbortController()
+    cache.set(target, { status: 'loading' })
+    readFile(target, controller.signal)
+      .then((result) => {
+        if (!controller.signal.aborted) {
+          cache.set(target, previewDataOf(result))
+          // Large content: yield one frame so the browser paints the
+          // loading→loaded transition before the heavy text layout runs —
+          // the UI stays responsive instead of freezing in the same frame
+          // as the tab-open interaction.
+          if (result.size > HIGHLIGHT_MAX_BYTES) requestAnimationFrame(refresh)
+          else refresh()
+        }
+      })
+      .catch((error) => {
+        if (!controller.signal.aborted) {
+          cache.set(target, { status: 'error', message: error instanceof Error ? error.message : String(error) })
+          refresh()
+        }
+      })
     refresh()
-    return () => controllers.forEach((c) => c.abort())
-  }, [tabs, readFile, refresh])
+    return () => controller.abort()
+  }, [tabs, active, readFile, refresh])
 
   // Animate the last tab closing without a mount/unmount bounce: keep the pane
   // mounted while `hasOpenedRef` is set, then drop it after the transition.
@@ -130,6 +155,31 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
 
   const isOpen = !collapsed && (tabs.length > 0 || closing || hasOpenedRef.current)
 
+  const activeData = active !== undefined ? cacheRef.current.get(active) : undefined
+  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))
+
+  // 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.
+  useEffect(() => {
+    const pre = highlightRef.current
+    const ta = textareaRef.current
+    if (pre === null || ta === null || plain) return undefined
+    let raf = 0
+    const tick = () => {
+      pre.scrollTop = ta.scrollTop
+      pre.scrollLeft = ta.scrollLeft
+      raf = requestAnimationFrame(tick)
+    }
+    raf = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(raf)
+  }, [isOpen, active, activeData?.status, plain])
+
   // Publish the rendered preview width so the skin's fixed top/bottom trim can
   // shift past this pane (covering only the chat).
   useEffect(() => {
@@ -235,8 +285,6 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
     setDragPath(undefined)
   }, [])
 
-  const activeData = active !== undefined ? cacheRef.current.get(active) : undefined
-
   if (!isOpen) return null
 
   const renderBody = () => {
@@ -244,27 +292,31 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
     switch (activeData.status) {
       case 'loading':
         return <div className={styles.previewHint}>{t('preview.loading')}</div>
-      case 'loaded': {
-        const highlighted = active !== undefined ? highlightCode(activeData.draft ?? '', active) : ''
+      case 'loaded':
         return (
-          <div className={styles.editor}>
-            <pre ref={highlightRef} className={styles.editorHighlight} aria-hidden="true">
-              <code dangerouslySetInnerHTML={{ __html: highlighted }} />
-            </pre>
+          <div
+            className={`${styles.editor}${plain ? ` ${styles.editorPlain}` : ''}`}
+            data-wrap={wrap ? 'on' : 'off'}
+          >
+            {!plain && active !== undefined && (
+              <pre ref={highlightRef} className={styles.editorHighlight} aria-hidden="true">
+                <code dangerouslySetInnerHTML={{ __html: highlightCode(activeData.draft ?? '', active) }} />
+              </pre>
+            )}
             <textarea
+              ref={textareaRef}
               className={styles.editorTextarea}
               value={activeData.draft ?? ''}
               onChange={(e) => onTextareaChange(e.target.value)}
               onScroll={onTextareaScroll}
               onKeyDown={onKeyDown}
               spellCheck={false}
-              wrap="off"
-              title={t('action.saveHint')}
+              wrap={wrap ? 'soft' : 'off'}
             />
+            {language !== undefined && tooBig && <div className={styles.editorHint}>{t('preview.highlightOff')}</div>}
             {saveError !== undefined && <div className={styles.saveError}>{saveError}</div>}
           </div>
         )
-      }
       case 'binary':
         return (
           <div className={styles.previewHint}>
@@ -318,6 +370,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 +388,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}