dsh-file-activity 0.5.7 → 0.5.9

package/lib/parts/preview-data.part.js

@@ -0,0 +1,111 @@
+'use strict'
+// ── preview data access (routes, viewer choice, loading) ────────────────
+//
+// The floating window used to mount the third-party sidebar's built-in viewer,
+// picked by the third-party sidebar matchFileViewer(path), and fed it the bytes its
+// fetchStrategy asked for. That service is gone (issue #187 batch 2), so this
+// module does the reading itself through the plugin's own routes:
+//
+//   /file-activity/file?sessionId&path        → raw bytes (image / pdf)
+//   /file-activity/file?sessionId&path&as=text → fs.read-shaped JSON text
+//
+// The route matters: file activity records files the agent touched ANYWHERE
+// (scratch files in /tmp, sibling repos, ~/.dsh), while the host's file
+// provider is fenced to the session workspace. The plugin route authorizes
+// exactly the paths this session recorded.
+/** Image suffixes the browser renders natively. */
+const IMAGE_EXT = /^(svg|png|jpe?g|gif|webp|avif|bmp|ico)$/i
+/** Suffixes rendered as Markdown. */
+const MARKDOWN_EXT = /^(md|markdown|mdx)$/i
+/** Suffixes rendered as a sandboxed HTML document (issue #266 C). */
+const HTML_EXT = /^(html?|xhtml)$/i
+/** Lower-case suffix of a path ('' when it has none). extOf (rows.ts) works on
+ *  a file NAME, so the basename is sliced off first. */
+function extOfPath(path) {
+  return extOf(path.slice(path.lastIndexOf('/') + 1))
+}
+/** Official UI atoms come from the host's staticModules (zero install). */
+function uiAtoms() {
+  try {
+    return require('@deepseek-ai/dsh-client-ui-primitives')
+  } catch {
+    return {}
+  }
+}
+/** Resolve a possibly-relative path against the session cwd. */
+function resolvePath(path, cwd) {
+  if (typeof path !== 'string' || path === '') return path
+  if (path.startsWith('/')) return path
+  if (typeof cwd === 'string' && cwd !== '') return `${cwd.replace(/\/+$/, '')}/${path}`
+  return path
+}
+/** Whether the fs.read API response carries a text content payload. */
+function isFsReadOk(json) {
+  return json !== null && typeof json === 'object' && json.ok === true && typeof json.value?.content === 'string'
+}
+/** Error load state from an fs.read API response (or a generic message).
+ *  Raw system errors are translated to friendly, locale-aware messages
+ *  (issue #68): deleted files and workspace-fenced paths must never surface
+ *  ENOENT / "is outside workspace" verbatim. */
+function fsReadError(json, viewer) {
+  const raw = json?.error?.message ?? ''
+  let message
+  if (raw === '') message = strings.previewFailed()
+  else if (/ENOENT|no such file|does not exist|cannot resolve/i.test(raw)) message = strings.fileMissing()
+  else if (/outside workspace/i.test(raw)) message = strings.fileOutside()
+  else message = raw
+  return { status: 'error', viewer, message }
+}
+/** Plugin text route (fs.read-shaped JSON), or null on any failure. */
+async function fetchTextContent(sessionId, path) {
+  try {
+    const response = await fetch(textUrlOf(sessionId, path))
+    return await response.json()
+  } catch {
+    return null
+  }
+}
+/**
+ * Load the recorded file's text through the plugin's own route, falling back
+ * to the host sidebar route when the plugin refuses the path. Whatever the
+ * host viewer used to do with its own fetchStrategy, this window does the
+ * reading itself now — the routes are the same ones the previous
+ * implementation used for its fsRead strategy.
+ */
+async function loadFsReadContent(viewer, path, scope, sessionId) {
+  const cwd = scope === null || scope === undefined ? '' : scope.cwd
+  const target = resolvePath(path, cwd ?? '')
+  const own = await fetchTextContent(sessionId, target)
+  if (isFsReadOk(own)) return { status: 'ready', viewer, content: own.value.content }
+  try {
+    const response = await fetch('/sidebar/api/fs.read', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ sessionId, path: target }),
+    })
+    const json = await response.json()
+    if (isFsReadOk(json)) return { status: 'ready', viewer, content: json.value.content }
+    return fsReadError(json, viewer)
+  } catch {
+    return fsReadError(own, viewer)
+  }
+}
+/** Which renderer a recorded path gets. */
+function viewerOf(path) {
+  const ext = extOfPath(path)
+  if (IMAGE_EXT.test(ext)) return 'image'
+  if (ext === 'pdf') return 'pdf'
+  if (HTML_EXT.test(ext)) return 'html'
+  if (MARKDOWN_EXT.test(ext)) return 'markdown'
+  return 'text'
+}
+/** Fetch the bytes the chosen renderer needs (media URL, or text content). */
+async function fetchPreviewLoad(target) {
+  const viewer = { id: viewerOf(target.abs) }
+  // image / pdf / html are served as BYTES by the plugin's own media route;
+  // html goes through an iframe (see HtmlBody), not through the text path.
+  if (viewer.id === 'image' || viewer.id === 'pdf' || viewer.id === 'html') {
+    return { status: 'ready', viewer, mediaUrl: mediaUrlOf(target.sessionId, target.abs) }
+  }
+  return loadFsReadContent(viewer, target.abs, null, target.sessionId)
+}

package/lib/parts/preview-float.part.js

@@ -0,0 +1,276 @@
+'use strict'
+// ── floating preview window (own renderer, shell.overlay seat) ─────────
+//
+// History: this window used to mount the third-party sidebar's built-in
+// viewer and let it fetch its own bytes. That service is gone (issue #187
+// batch 2), so the window renders the recorded file itself:
+//
+//   image (svg/png/jpeg/gif/webp/avif/bmp/ico) → <img src> on the plugin media route
+//   pdf                                        → <iframe src> on the same route
+//   markdown                                   → host MarkdownText atom
+//   anything else                              → host CodeBlock atom, else <pre>
+//
+// The overlay lives in the root-scoped 'shell.overlay' list seat (the host's
+// own floating layer: above every column, click-through unless the entry opts
+// into pointer events) and renders nothing at all while no preview is open.
+// Data access (routes, viewer choice, loading) lives in preview-data.ts.
+/** Milliseconds after which an error-state preview closes itself (issue #76):
+ *  a shell that failed to load any content is useless, so it must not linger
+ *  over the main UI until the user finds the × button. */
+const AUTO_CLOSE_MS = 2500
+/** Whether a pointerdown target lies inside the floating window. The window
+ *  surface carries the .dfa-fp class; anything else counts as "outside"
+ *  and dismisses the preview (issue #76 — click anywhere outside closes). */
+function isInsideFloating(target) {
+  if (!target || typeof target.closest !== 'function') return false
+  return target.closest('.dfa-fp') !== null
+}
+/** Click behavior for the window surface: in the error state ANY click
+ *  closes the shell (there is no content to interact with), otherwise the
+ *  click is swallowed so the viewer's own interactions keep working. */
+function previewClickAction(load, event) {
+  if (load.status === 'error') return 'close'
+  if (event && event.stopPropagation) event.stopPropagation()
+  return 'stop'
+}
+/** Close the floating preview when the tab goes hidden (switching tabs /
+ *  operating the main UI), so it never lingers over the interface. */
+function closePreviewOnHidden(visible, dataStore) {
+  if (!visible) dataStore.set({ preview: null })
+}
+function usePreviewLoader(target) {
+  const [load, setLoad] = useState({ status: 'loading', viewer: null })
+  useEffect(() => {
+    let cancelled = false
+    setLoad({ status: 'loading', viewer: { id: viewerOf(target.abs) } })
+    fetchPreviewLoad(target)
+      .then((next) => {
+        if (!cancelled) setLoad(next)
+      })
+      .catch((error) => {
+        if (!cancelled)
+          setLoad({
+            status: 'error',
+            viewer: null,
+            message: error instanceof Error ? error.message : String(error),
+          })
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [target.abs, target.sessionId])
+  return load
+}
+/** Text body: the host's own Markdown / code atoms, with a plain <pre> fallback. */
+function TextBody({ load, path }) {
+  const text = load.content ?? ''
+  const ui = uiAtoms()
+  if (load.viewer?.id === 'markdown' && typeof ui.MarkdownText === 'function') {
+    return createElement('div', { className: 'dfa-fp-md' }, createElement(ui.MarkdownText, { text }))
+  }
+  if (typeof ui.CodeBlock === 'function') {
+    return createElement(
+      'div',
+      { className: 'dfa-fp-code' },
+      createElement(ui.CodeBlock, { code: text, language: extOfPath(path) }),
+    )
+  }
+  return createElement('pre', { className: 'dfa-fp-pre' }, text)
+}
+/** Image body: the plugin's media route renders the recorded bytes. */
+function ImageBody({ load, title }) {
+  return createElement('img', { className: 'dfa-fp-img', src: load.mediaUrl, alt: title })
+}
+/**
+ * HTML body: a SANDBOXED iframe over the plugin's media route (issue #266 C —
+ * the README promised a sandboxed iframe while the code rendered the markup as
+ * a code block).
+ *
+ * Two independent sandbox layers, deliberately without `allow-same-origin`:
+ *  - the iframe's `sandbox` attribute gives the document an opaque origin, so
+ *    a previewed page cannot read the host's storage, cookies or same-origin
+ *    APIs, and cannot reach the parent document;
+ *  - the route answers text/html with a response-level
+ *    `Content-Security-Policy: sandbox …` header, so the SAME protection holds
+ *    when the URL is opened directly instead of inside this iframe.
+ * Scripts/forms stay enabled so interactive documents (charts, demos) work;
+ * navigation of the top window is not granted.
+ */
+function HtmlBody({ load, title }) {
+  return createElement(
+    'div',
+    { className: 'dfa-fp-html' },
+    createElement('iframe', {
+      className: 'dfa-fp-html-frame',
+      src: load.mediaUrl,
+      sandbox: 'allow-scripts allow-forms',
+      title,
+    }),
+  )
+}
+/** Preview window body: loading note / error panel / renderer mount. */
+function renderPreviewBody(load, ctx, store, scope, path, title, sessionId) {
+  if (load.status === 'loading') {
+    return createElement('div', { className: 'dfa-fp-note' }, strings.loading())
+  }
+  if (load.status === 'error') {
+    return createElement(
+      'div',
+      { className: 'dfa-fp-err' },
+      strings.previewFailed(),
+      load.message
+        ? createElement('div', { style: { marginTop: '6px', fontSize: '11px', opacity: 0.85 } }, load.message)
+        : null,
+      createElement('div', { style: { marginTop: '6px', fontSize: '11px', opacity: 0.7 } }, strings.autoCloseHint()),
+    )
+  }
+  const props = { load, path, title, sessionId }
+  if (load.viewer?.id === 'image') return ImageBody(props)
+  if (load.viewer?.id === 'html') return HtmlBody(props)
+  if (load.viewer?.id === 'pdf') {
+    const url = mediaUrlOf(sessionId, path)
+    return createElement(PdfPreview, { src: url, download: `${url}&download=1`, title })
+  }
+  return TextBody(props)
+}
+/**
+ * Dismissal affordances (issue #76 — the preview must never linger):
+ * 1. pointerdown anywhere OUTSIDE the window closes it (capture phase, so
+ *    it fires even if another element sits above the scrim);
+ * 2. the scrim's own onClick (kept as a fallback);
+ * 3. Escape;
+ * 4. the × button;
+ * 5. an error state closes itself after AUTO_CLOSE_MS (no content to show).
+ */
+function usePreviewDismiss(load, onClose) {
+  useEffect(() => {
+    if (typeof document === 'undefined' || typeof document.addEventListener !== 'function') return () => {}
+    const handler = (event) => {
+      if (!isInsideFloating(event && event.target)) onClose()
+    }
+    document.addEventListener('pointerdown', handler, true)
+    return () => document.removeEventListener('pointerdown', handler, true)
+  }, [onClose])
+  useEffect(() => {
+    if (typeof document === 'undefined' || typeof document.addEventListener !== 'function') return () => {}
+    const handler = (event) => {
+      if (event && event.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [onClose])
+  useEffect(() => {
+    if (load.status !== 'error') return undefined
+    if (typeof window === 'undefined' || typeof window.setTimeout !== 'function') return undefined
+    const timer = window.setTimeout(onClose, AUTO_CLOSE_MS)
+    return () => window.clearTimeout(timer)
+  }, [load.status, onClose])
+}
+/** The floating window element: head (title + hint + close) and body. */
+function renderFloatingWindow(load, ctx, store, scope, path, title, sessionId, onClose) {
+  return createElement(
+    'div',
+    { className: 'dfa-fp-overlay', onClick: onClose },
+    createElement(
+      'div',
+      {
+        className: 'dfa-fp',
+        'data-dfa-preview': '1',
+        onClick: (event) => {
+          if (previewClickAction(load, event) === 'close') onClose()
+        },
+      },
+      createElement(
+        'div',
+        { className: 'dfa-fp-head' },
+        createElement('span', { className: 'dfa-fp-title' }, title),
+        createElement('span', { className: 'dfa-fp-hint' }, strings.clickOutsideToClose()),
+        createElement(
+          'span',
+          { className: 'dfa-fp-actions' },
+          createElement(
+            'button',
+            {
+              className: 'dfa-iconbtn',
+              title: strings.closePreview(),
+              'aria-label': strings.closePreview(),
+              onClick: () => onClose(),
+            },
+            icon.close(15),
+          ),
+        ),
+      ),
+      createElement(
+        'div',
+        { className: 'dfa-fp-body' },
+        renderPreviewBody(load, ctx, store, scope, path, title, sessionId),
+      ),
+    ),
+  )
+}
+/**
+ * The floating preview, mounted by the root-scoped 'shell.overlay' list seat
+ * (the host's own floating layer: above every column, click-through unless the
+ * entry opts into pointer events). It renders nothing at all while no preview
+ * is open, so the layer stays invisible.
+ */
+function FloatingPreviewOverlay() {
+  const store = sharedStore()
+  const state = useSyncExternalStore(
+    store === null ? () => () => {} : store.subscribe,
+    store === null ? () => null : store.getSnapshot,
+  )
+  const preview = state === null || state === undefined ? null : state.preview
+  const sessionId = preview === null ? '' : preview.sessionId
+  // Hooks must run unconditionally: the loader is fed an empty target while
+  // the window is closed (it then never resolves a load, and nothing renders).
+  const target = preview ?? { abs: '', name: '', sessionId: '' }
+  const load = usePreviewLoader(target)
+  const onClose = () => {
+    if (store !== null) store.set({ preview: null })
+  }
+  usePreviewDismiss(load, onClose)
+  if (preview === null) return null
+  return renderFloatingWindow(load, undefined, null, null, preview.abs, preview.name, sessionId, onClose)
+}
+/** Register the overlay seat (list slot: additive, never replaces host UI). */
+function registerPreviewOverlay(ctx, dataStore) {
+  void dataStore
+  ctx.effect(
+    () =>
+      ctx.slots.inject('shell.overlay', () =>
+        ctx.slots.register(
+          { name: 'shell.overlay', id: PREVIEW_ID, order: 100, label: () => strings.title() },
+          FloatingPreviewOverlay,
+        ),
+      ),
+    'dsh-file-activity: preview overlay',
+  )
+}
+/**
+ * Lightweight PDF preview. The recorded file often lives outside the session
+ * workspace, and the host's own PDF route is fenced to it — so the bytes come
+ * from the plugin's media route inside a native browser PDF frame, with a
+ * download fallback in its toolbar.
+ */
+function PdfPreview({ src, download, title }) {
+  return createElement(
+    'div',
+    { className: 'dfa-pdf' },
+    createElement(
+      'div',
+      { className: 'dfa-pdf-toolbar' },
+      createElement(
+        'a',
+        {
+          className: 'dfa-pdf-download',
+          href: download,
+          download: true,
+          title: strings.downloadToView(),
+        },
+        strings.downloadToView(),
+      ),
+    ),
+    createElement('iframe', { className: 'dfa-pdf-frame', src, title }),
+  )
+}

package/lib/parts/rows.part.js

@@ -1,3 +1,4 @@
+'use strict'
 // ── row rendering helpers (recent list & stats tree) ──────────────────
 const opClass = (op) =>
   op === 'create'
@@ -15,7 +16,6 @@ const opLabel = (op) =>
       : op === 'delete'
         ? strings.delete()
         : strings.read()
-
 /** Tooltip for a stats file row: absolute path + created / last-seen times. */
 const fileTitle = (abs, firstSeen, lastSeen) => {
   const times = []
@@ -23,7 +23,6 @@ const fileTitle = (abs, firstSeen, lastSeen) => {
   if (typeof lastSeen === 'number') times.push(`${strings.lastSeen()} ${formatTime(lastSeen)}`)
   return times.length > 0 ? `${abs}\n${times.join(' · ')}` : abs
 }
-
 /** Count pills for a file/dir node — only actions that actually happened are
  *  shown (a zero count renders no pill; all-zero nodes render no pill group,
  *  keeping untouched files visually quiet). */
@@ -42,7 +41,6 @@ const countPills = (node) => {
   if (pills.length === 0) return null
   return createElement('span', { className: 'dfa-counts', style: { paddingLeft: '6px' } }, ...pills)
 }
-
 /** Extension of a file name (lowercase, no leading dot); '' when none.
  *  Dotfiles map to their whole name ('.gitignore' → 'gitignore') so the
  *  badge table can cover them; 'notes.' still yields ''. */
@@ -52,14 +50,12 @@ const extOf = (name) => {
   if (dot === 0) return name.slice(1).toLowerCase()
   return ''
 }
-
 /** Extension-less but common build files → their badge key. */
 const NAME_BADGES = {
   makefile: 'makefile',
   dockerfile: 'dockerfile',
   'cmakelists.txt': 'cmake',
 }
-
 /** Badge key for a file name: basename match first, then extension. */
 const badgeKeyOf = (name) => {
   const base = name.toLowerCase()
@@ -67,7 +63,6 @@ const badgeKeyOf = (name) => {
   if (named !== undefined) return named
   return extOf(name)
 }
-
 /** A stats-tree file row: icon + name + count pills + relative time. */
 const fileRow = (file, depth, onOpen) =>
   createElement(
@@ -84,7 +79,6 @@ const fileRow = (file, depth, onOpen) =>
     countPills(file),
     file.lastSeen ? createElement('span', { className: 'dfa-time' }, formatRelative(file.lastSeen)) : null,
   )
-
 /** One stats-tree node: file rows render inline, dirs toggle collapse. */
 function renderTreeNode(node, depth, collapsedDirs, onToggleDir, onOpen) {
   if (node.type === 'file') return fileRow(node, depth, onOpen)
@@ -110,7 +104,6 @@ function renderTreeNode(node, depth, collapsedDirs, onToggleDir, onOpen) {
       : node.children.map((child) => renderTreeNode(child, depth + 1, collapsedDirs, onToggleDir, onOpen)),
   )
 }
-
 /** A recent-list row: op badge + basename + relative time. */
 const recentEntry = (entry, onOpen) =>
   createElement(
@@ -125,7 +118,6 @@ const recentEntry = (entry, onOpen) =>
     createElement('span', { className: 'dfa-row-name' }, basenameOf(entry.path)),
     createElement('span', { className: 'dfa-time' }, formatRelative(entry.time)),
   )
-
 /** Toggle a key in a Set (directory collapse state). */
 function toggleInSet(set, key) {
   const next = new Set(set)
@@ -133,7 +125,6 @@ function toggleInSet(set, key) {
   else next.add(key)
   return next
 }
-
 /** Clear the current session's records host-side and reset its bucket. */
 function clearSessionData(dataStore, sessionId) {
   if (!window.confirm(strings.clearConfirm())) return
@@ -146,7 +137,6 @@ function clearSessionData(dataStore, sessionId) {
     },
   })
 }
-
 /** Manual refresh: fetch stats + the authoritative cwd for this session. */
 function refreshSessionData(dataStore, sessionId, setCwd, setError) {
   if (sessionId === '') return

package/lib/parts/settings.part.js

@@ -0,0 +1,71 @@
+'use strict'
+// ── settings tab (replaces 迁移前的 settings.pluginToggles) ────
+//
+// The host renders no per-plugin toggle UI for third-party tabs, so this
+// plugin contributes its own tab to the Web Settings → Plugins section
+// ('settings.plugins.tab': a list seat declared by the settings section). The
+// section only exists while it is mounted, so the seat is declared with
+// ctx.slots.inject — the declarative form that survives HMR and late mounts
+// (a plain register on a not-yet-mounted seat would silently contribute
+// nothing).
+/** Auto-open preference (plugin-owned; 迁移前的插件偏好已不存在). */
+function autoOpenEnabled() {
+  try {
+    return window.localStorage.getItem(AUTO_OPEN_PREF_KEY) !== '0'
+  } catch {
+    return true
+  }
+}
+/** Persist the auto-open preference. */
+function setAutoOpenEnabled(enabled) {
+  try {
+    window.localStorage.setItem(AUTO_OPEN_PREF_KEY, enabled ? '1' : '0')
+  } catch {
+    // storage unavailable (private mode): the in-memory toggle still applies
+  }
+}
+/** One labeled switch row. */
+function settingsRow(label, hint, checked, onChange) {
+  return createElement(
+    'label',
+    { className: 'dfa-set-row' },
+    createElement(
+      'span',
+      { className: 'dfa-set-text' },
+      createElement('span', { className: 'dfa-set-label' }, label),
+      createElement('span', { className: 'dfa-set-hint' }, hint),
+    ),
+    createElement('input', {
+      type: 'checkbox',
+      className: 'dfa-set-switch',
+      checked,
+      onChange: (event) => onChange(event?.target?.checked === true),
+    }),
+  )
+}
+/** Settings panel body: the auto-open switch plus its explanatory hint. */
+function FileActivitySettings() {
+  const [enabled, setEnabled] = useState(autoOpenEnabled)
+  return createElement(
+    'div',
+    { className: 'dfa-set', 'data-dfa-settings': '1' },
+    createElement('div', { className: 'dfa-set-title' }, strings.title()),
+    settingsRow(strings.autoOpenLabel(), strings.autoOpenHint(), enabled, (next) => {
+      setAutoOpenEnabled(next)
+      setEnabled(next)
+    }),
+  )
+}
+/** Register the settings tab into the settings section's list seat. */
+function registerSettingsTab(ctx) {
+  ctx.effect(
+    () =>
+      ctx.slots.inject('settings.plugins.tab', () =>
+        ctx.slots.register(
+          { name: 'settings.plugins.tab', id: TAB_ID, order: 60, label: () => strings.title() },
+          FileActivitySettings,
+        ),
+      ),
+    'dsh-file-activity: settings tab',
+  )
+}

package/lib/parts/store.part.js

@@ -1,3 +1,4 @@
+'use strict'
 // ── tiny external store ───────────────────────────────────────────────
 function createStore(initial) {
   let state = initial
@@ -14,3 +15,21 @@ function createStore(initial) {
     },
   }
 }
+// ── shared store slot ─────────────────────────────────────────────────
+//
+// The tab body renders inside a session-scoped seat while the floating preview
+// renders inside the root-scoped 'shell.overlay' seat, so the store the two
+// halves share cannot travel as a prop from one to the other. One module-level
+// reference is enough: the overlay seat is mounted for the plugin's whole
+// lifetime and only ever reads the CURRENT store, and a rebuild replaces the
+// reference before the new overlay renders.
+/** The store the overlay seat reads; set once per activation. */
+let sharedDataStore = null
+/** Publish the activation's store for the root-scoped overlay seat. */
+function registerSharedStore(store) {
+  sharedDataStore = store
+}
+/** The activation's store, or null before apply() ran. */
+function sharedStore() {
+  return sharedDataStore
+}

package/lib/parts/styles.part.js

@@ -1,7 +1,27 @@
+'use strict'
 // ── themed stylesheet (injected once per activation) ──────────────────
-// Mirrors the better-sidebar explorer surface: tight 2px 6px 8px body,
+// Mirrors the host explorer surface: tight 2px 6px 8px body,
 // 30px rows, box-sizing border-box indentation, folder rows use the
 // strong type face to read as directories, files stay regular.
+/**
+ * Inject this activation's stylesheet into the document head exactly once per
+ * fiber. Static CSS only: it must not sit behind any service check, or an HMR
+ * rebuild / service reload can leave an already-rendered tab unstyled. The
+ * disposer removes only this fiber's own <style> element, so a rebuild always
+ * keeps at least one copy.
+ */
+function injectStyles(ctx) {
+  ctx.effect(() => {
+    if (typeof document === 'undefined' || document === null || typeof document.head === 'undefined') return () => {}
+    const style = document.createElement('style')
+    style.setAttribute('data-dsh-file-activity', 'styles')
+    style.textContent = STYLES
+    document.head.appendChild(style)
+    return () => {
+      if (style.parentNode) style.parentNode.removeChild(style)
+    }
+  }, 'dsh-file-activity: styles')
+}
 const STYLES = `
 .dfa { display:flex; flex-direction:column; height:100%; overflow-y:auto; overflow-x:hidden;
   padding:2px 6px 8px; gap:2px; font:var(--dsw-font-s-14); color:var(--dsw-alias-label-primary); }
@@ -65,7 +85,7 @@ const STYLES = `
 .dfa-fp-hint { flex:none; font:var(--dsw-font-xxs-12); color:var(--dsw-alias-label-tertiary); opacity:0.8; }
 .dfa-fp-actions { display:flex; align-items:center; gap:2px; flex:none; }
 /* issue #111: the preview body is a FLEX COLUMN so the mounted viewer
-   component (better-sidebar's TextEditor for html/code/markdown, the image
+   component (the host's TextEditor for html/code/markdown, the image
    wrap, and the pdf frame) actually fills the window. Their roots size via
    flex:1 (html iframe .editorHtml, .editorCm, .editorMd, .editorImageWrap,
    .dfa-pdf), which is IGNORED in a block context — so the HTML iframe, which
@@ -86,5 +106,31 @@ const STYLES = `
 @keyframes dfa-row-in { from { opacity:0; transform:translateY(1px); } to { opacity:1; transform:none; } }
 /* issue #60: 移除 #25 的侧边栏页签选中态品牌蓝覆盖（[class*="tab"][class*=
    "tabActive"] 全局子串选择器误伤宿主对话/工作区 tab 选中态，出现用户不
-   想要的蓝色高亮）。页签选中态回归宿主（dsh-better-sidebar）默认样式。 */
+   想要的蓝色高亮）。页签选中态回归宿主原生样式（issue #187 批 2：原生
+   dockkit 页签自己负责选中态，本插件不再覆盖）。 */
+/* issue #187 批 2：页签 chip 由本插件的 title 席位渲染（原生 chip 无图标
+   API），因此标题连同图标一起画在这里。 */
+.dfa-chip { display:inline-flex; align-items:center; gap:4px; min-width:0; }
+/* 扩展点注册失败的显式提示（绝不静默失效）。 */
+.dfa-degraded { margin:6px 2px; padding:6px 8px; border-radius:6px;
+  border:1px solid var(--dsw-alias-state-error-primary); background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 8%, transparent); }
+.dfa-degraded-title { font:var(--dsw-font-xs-13); color:var(--dsw-alias-state-error-primary); }
+.dfa-degraded-hint { margin-top:2px; font:var(--dsw-font-xxs-12); opacity:.8; }
+/* 设置页（settings.plugins.tab）：开关行。 */
+.dfa-set { display:flex; flex-direction:column; gap:10px; padding:10px 2px; }
+.dfa-set-title { font:var(--dsw-font-sm-14); }
+.dfa-set-row { display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; }
+.dfa-set-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
+.dfa-set-label { font:var(--dsw-font-xs-13); }
+.dfa-set-hint { font:var(--dsw-font-xxs-12); opacity:.75; }
+.dfa-set-switch { flex:none; width:16px; height:16px; accent-color:var(--dsw-alias-accent); cursor:pointer; }
+/* 浮窗正文：Markdown / 代码 / 纯文本 / 图片四种渲染体。 */
+.dfa-fp-md { height:100%; overflow:auto; padding:2px 4px; }
+.dfa-fp-code { height:100%; overflow:auto; }
+.dfa-fp-pre { margin:0; padding:8px 10px; overflow:auto; height:100%; font:var(--dsw-font-xxs-12);
+  white-space:pre-wrap; word-break:break-word; }
+.dfa-fp-img { display:block; margin:auto; max-width:100%; max-height:100%; object-fit:contain; }
+/* HTML 预览（issue #266 C）：沙箱 iframe 撑满浮窗主体并内部滚动（与 PDF 一致）。 */
+.dfa-fp-html { display:flex; flex-direction:column; width:100%; height:100%; }
+.dfa-fp-html-frame { flex:1; min-height:0; width:100%; border:none; border-radius:6px; background:#fff; }
 `

package/lib/parts/tree.part.js

@@ -1,3 +1,4 @@
+'use strict'
 // ── directory tree construction ───────────────────────────────────────
 /**
  * Collapse chain directories: a directory whose only child is another
@@ -18,7 +19,6 @@ function compressChains(node, isRoot) {
     node.compressed = true
   }
 }
-
 /**
  * Sort a directory node: directories first (alphabetically), then files
  * (by total activity, then name); recurse into directories.
@@ -35,7 +35,6 @@ function sortNode(node) {
     if (child.type === 'dir') sortNode(child)
   }
 }
-
 /**
  * Build a nested directory tree from per-file counts, keyed by the file's
  * absolute path. Every directory node aggregates its subtree counters and