dsh-plugin-workbench 0.0.4 → 0.0.6

package/src/client/FilePreview.tsx

@@ -1,25 +1,33 @@
 /**
  * Split file preview with VS Code-style tabs and a directly-editable editor.
  * Files open in tabs; the active tab is an always-editable textarea overlaid on
- * a syntax-highlighted layer (Ctrl/Cmd+S saves). Tabs are drag-reorderable.
- * Opening/closing the first/last tab is animated.
+ * a syntax-highlighted layer (Ctrl/Cmd+S saves). Markdown files open in a
+ * RENDERED preview by default, with a button to switch to the editable source
+ * view. Tabs are drag-reorderable. Open files are watched on disk: external
+ * changes auto-sync clean tabs and flag dirty ones (click the badge to reload,
+ * discarding unsaved edits). 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'
+import { renderMarkdown } from './markdown'
 import { FileIcon } from './fileIcons'
 import type { FilesKey } from './locales'
 import { activateFile, closeFile, collapsePreview, moveTab, toggleWrap, useTabsState } from './store'
 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
   size?: number
   message?: string
+  /** Markdown tabs: 'rendered' shows the compiled preview, 'source' the editor. */
+  view?: 'rendered' | 'source'
+  /** The file changed on disk while this tab holds unsaved edits. */
+  diskChanged?: boolean
 }
 
 export interface FsWriteResult {
@@ -31,12 +39,40 @@ export interface FilePreviewProps {
   t: (key: FilesKey, params?: Record<string, unknown>) => string
   readFile: (path: string, signal?: AbortSignal) => Promise<FsReadResult>
   writeFile: (path: string, content: string, signal?: AbortSignal) => Promise<FsWriteResult>
+  /** Replace the host-side watch set (the open tab paths). Idempotent diff. */
+  watchFiles: (paths: string[]) => Promise<void>
 }
 
 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'
+
+/** Same-origin SSE endpoint pushed by the host half (see src/index.ts). */
+const EVENTS_ENDPOINT = '/dsh-plugin-files/events'
+
+/**
+ * Above this size an .md file opens in source view: compiling a multi-hundred
+ * KB document and laying out its DOM is what makes the pane lag.
+ */
+const MD_RENDER_MAX_BYTES = 256 * 1024
+
+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
@@ -72,13 +108,44 @@ function clamp(value: number, min: number, max: number): number {
   return Math.min(max, Math.max(min, value))
 }
 
+/** Parent directory of a path ('C:/a/b.md' → 'C:/a'; '' when there is none). */
+function dirnameOf(path: string): string {
+  const idx = Math.max(path.lastIndexOf('/'), path.lastIndexOf('\\'))
+  return idx > 0 ? path.slice(0, idx) : ''
+}
+
 function previewDataOf(result: FsReadResult): TabData {
   if (result.truncated) return { status: 'too-large', size: result.size }
   if (result.binary) return { status: 'binary', size: result.size }
-  return { status: 'loaded', content: result.content, draft: result.content, dirty: false, size: result.size }
+  const data: TabData = {
+    status: 'loaded',
+    content: result.content,
+    draft: result.content,
+    dirty: false,
+    size: result.size,
+  }
+  // Markdown opens in the rendered preview by default (source view for files
+  // too large to render responsively).
+  if (detectLanguage(result.path) === 'markdown' && result.size <= MD_RENDER_MAX_BYTES) {
+    data.view = 'rendered'
+  }
+  return data
+}
+
+/**
+ * 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) {
+export function FilePreview({ t, readFile, writeFile, watchFiles }: FilePreviewProps) {
   const { tabs, active, theme, collapsed, wrap } = useTabsState()
 
   const [previewWidth, setPreviewWidth] = useState<number | null>(null)
@@ -89,14 +156,106 @@ 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), [])
 
+  // Mirror of the current tab list for the SSE handler (avoids stale closures).
+  const tabsRef = useRef(tabs)
+  useEffect(() => {
+    tabsRef.current = tabs
+  }, [tabs])
+
+  /**
+   * Re-read one open file from disk (external edit sync, or the disk-changed
+   * badge click). A reload always takes disk content — the auto-sync path only
+   * runs on clean tabs, and the badge click is the user's explicit choice to
+   * drop unsaved edits.
+   */
+  const reloadFromDisk = useCallback(async (path: string) => {
+    const data = cacheRef.current.get(path)
+    if (data === undefined || data.status !== 'loaded') return
+    try {
+      const result = await readFile(path)
+      const next = previewDataOf(result)
+      // Keep the user's chosen view; a reload never flips rendered/source.
+      cacheRef.current.set(path, { ...next, view: data.view, diskChanged: false })
+    } catch (error) {
+      // File gone / unreadable: surface the failure instead of stale content.
+      cacheRef.current.set(path, {
+        ...data,
+        status: 'error',
+        message: error instanceof Error ? error.message : String(error),
+        diskChanged: false,
+      })
+    }
+    refresh()
+  }, [readFile, refresh])
+
+  /**
+   * Handle one disk-change event for an open path. Clean tabs auto-sync;
+   * dirty tabs keep their unsaved edits and show the reload badge instead.
+   */
+  const syncFromDisk = useCallback((path: string) => {
+    const data = cacheRef.current.get(path)
+    if (data === undefined || data.status === 'loading' || data.status === 'image') return
+    if (data.status === 'error') {
+      // Previously failed tab: retry the read (e.g. the file was re-created).
+      void reloadFromDisk(path)
+      return
+    }
+    if (data.dirty === true) {
+      if (data.diskChanged !== true) {
+        data.diskChanged = true
+        refresh()
+      }
+      return
+    }
+    void reloadFromDisk(path)
+  }, [reloadFromDisk, refresh])
+
+  // Disk watch: tell the host which paths to watch (debounced), and re-send on
+  // every SSE (re)connect so a dropped stream heals itself.
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      void watchFiles([...tabs]).catch(() => {
+        // Host side not ready yet — the next tab change or SSE open retries.
+      })
+    }, 400)
+    return () => clearTimeout(timer)
+  }, [tabs, watchFiles])
+
+  // Disk change events pushed by the host (fs.watch + SSE).
+  useEffect(() => {
+    const source = new EventSource(EVENTS_ENDPOINT)
+    source.onopen = () => {
+      void watchFiles([...tabsRef.current]).catch(() => {
+        // Ignore — the next onopen or tab change re-syncs.
+      })
+    }
+    const onChange = (event: MessageEvent<string>) => {
+      try {
+        const payload = JSON.parse(event.data) as { path?: unknown }
+        if (typeof payload.path === 'string' && tabsRef.current.includes(payload.path)) {
+          syncFromDisk(payload.path)
+        }
+      } catch {
+        // Malformed frame — ignore.
+      }
+    }
+    source.addEventListener('change', onChange)
+    return () => {
+      source.removeEventListener('change', onChange)
+      source.close()
+    }
+  }, [syncFromDisk, watchFiles])
+
   // 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).
@@ -111,6 +270,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 +300,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,26 +331,44 @@ 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))
+  const isMarkdown = language === 'markdown'
+  const mdRenderable = (activeData?.size ?? 0) <= MD_RENDER_MAX_BYTES
+  // Rebuild the compiled markdown only when the draft (or the view mode)
+  // changes — never on tab switches or focus re-renders.
+  const mdHtml = useMemo(() => {
+    if (activeData?.status !== 'loaded' || !isMarkdown || activeData.view !== 'rendered') return ''
+    return renderMarkdown(activeData.draft ?? '', dirnameOf(active ?? ''))
+  }, [activeData?.status, activeData?.draft, activeData?.view, isMarkdown, active])
+  // 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)
     return () => cancelAnimationFrame(raf)
-  }, [isOpen, active, activeData?.status, plain])
+  }, [isOpen, active, activeData?.status, activeData?.view, plain])
 
   // Publish the rendered preview width so the skin's fixed top/bottom trim can
   // shift past this pane (covering only the chat).
@@ -249,6 +439,15 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
     refresh()
   }, [active, refresh])
 
+  /** Flip the active markdown tab between rendered preview and source editor. */
+  const toggleMdView = useCallback(() => {
+    if (active === undefined) return
+    const data = cacheRef.current.get(active)
+    if (data === undefined || data.status !== 'loaded') return
+    data.view = data.view === 'rendered' ? 'source' : 'rendered'
+    refresh()
+  }, [active, refresh])
+
   const onKeyDown = useCallback((e: ReactKeyboardEvent<HTMLTextAreaElement>) => {
     if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
       e.preventDefault()
@@ -258,11 +457,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) => {
@@ -293,11 +494,22 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
       case 'loading':
         return <div className={styles.previewHint}>{t('preview.loading')}</div>
       case 'loaded':
+        if (isMarkdown && activeData.view === 'rendered') {
+          return (
+            <div
+              className={styles.mdPreview}
+              dangerouslySetInnerHTML={{ __html: mdHtml }}
+            />
+          )
+        }
         return (
           <div
             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) }} />
@@ -313,10 +525,37 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
               spellCheck={false}
               wrap={wrap ? 'soft' : 'off'}
             />
-            {language !== undefined && tooBig && <div className={styles.editorHint}>{t('preview.highlightOff')}</div>}
+            {isMarkdown && !mdRenderable && <div className={styles.editorHint}>{t('preview.mdRenderOff')}</div>}
+            {language !== undefined && !isMarkdown && tooBig && <div className={styles.editorHint}>{t('preview.highlightOff')}</div>}
             {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}>
@@ -373,6 +612,19 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
                     <span className={styles.tabIcon}><FileIcon name={basenameOf(path)} /></span>
                     <span className={styles.tabName}>{basenameOf(path)}</span>
                     {data?.dirty === true && <span className={styles.tabDot} />}
+                    {data?.diskChanged === true && (
+                      <button
+                        type="button"
+                        className={styles.tabDiskBadge}
+                        title={t('tab.diskChanged')}
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          void reloadFromDisk(path)
+                        }}
+                      >
+                        {'⟳'}
+                      </button>
+                    )}
                     <button
                       type="button"
                       className={styles.tabClose}
@@ -388,6 +640,16 @@ export function FilePreview({ t, readFile, writeFile }: FilePreviewProps) {
                 )
               })}
             </div>
+            {isMarkdown && activeData?.status === 'loaded' && mdRenderable && (
+              <button
+                type="button"
+                className={styles.tabAction}
+                title={activeData.view === 'rendered' ? t('action.mdSource') : t('action.mdRender')}
+                onClick={toggleMdView}
+              >
+                {activeData.view === 'rendered' ? '📝' : '👁'}
+              </button>
+            )}
             <button
               type="button"
               className={`${styles.tabAction}${wrap ? ` ${styles.tabActionActive}` : ''}`}