dsh-file-activity 0.4.6

package/lib/parts/interceptor.part.js

@@ -0,0 +1,56 @@
+    // ── fetch interception: sidebar file operations ───────────────────────
+    function methodOf(init) {
+      return (init?.method ?? 'GET').toUpperCase()
+    }
+
+    /** POST body as a plain object (non-string bodies are ignored). */
+    function parseBody(init) {
+      return typeof init?.body === 'string' ? JSON.parse(init.body) : {}
+    }
+
+    /** Record fs.read / fs.write POSTs observed on the sidebar API. */
+    function recordSidebarFs(url, init) {
+      if (url.pathname !== '/sidebar/api/fs.read' && url.pathname !== '/sidebar/api/fs.write') return
+      if (methodOf(init) !== 'POST') return
+      const body = parseBody(init)
+      if (typeof body.sessionId !== 'string' || typeof body.path !== 'string') return
+      postRecord(body.sessionId, body.path, url.pathname === '/sidebar/api/fs.write' ? 'write' : 'read')
+    }
+
+    /** Record sidebar media opens (/sidebar/file?sessionId=...&path=...). */
+    function recordMediaOpen(url, init) {
+      if (url.pathname !== '/sidebar/file' || methodOf(init) !== 'GET') return
+      const sessionId = url.searchParams.get('sessionId')
+      const path = url.searchParams.get('path')
+      if (sessionId !== null && path !== null) postRecord(sessionId, path, 'read')
+    }
+
+    /** Observe a resolved fetch URL and record sidebar file operations. */
+    function observeSidebarFetch(url, init) {
+      try {
+        recordSidebarFs(url, init)
+        recordMediaOpen(url, init)
+      } catch {
+        // observation must never break the underlying call
+      }
+    }
+
+    function installFetchInterceptor() {
+      const original = window.fetch.bind(window)
+      window.fetch = (input, init) => {
+        const result = original(input, init)
+        let url
+        try {
+          if (typeof input === 'string') url = new URL(input, window.location.href)
+          else if (input instanceof URL) url = input
+          else return result // Request instances: skip observation
+        } catch {
+          return result
+        }
+        observeSidebarFetch(url, init)
+        return result
+      }
+      return () => {
+        window.fetch = original
+      }
+    }

package/lib/parts/preview.part.js

@@ -0,0 +1,178 @@
+    // ── floating preview window (reuses the sidebar's native viewer) ──────
+    /** 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). */
+    function fsReadError(json, viewer) {
+      return { status: 'error', viewer, message: json?.error?.message ?? strings.previewFailed() }
+    }
+
+    /**
+     * Load fsRead content through the sidebar API and resolve the viewer's
+     * load state (ready with text, or error with the API message).
+     */
+    async function loadFsReadContent(viewer, path, scope, sessionId) {
+      const target = resolvePath(path, scope?.cwd ?? '')
+      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)
+    }
+
+    /**
+     * Fetch the bytes the viewer's fetchStrategy needs (fsRead text /
+     * mediaUrl / customData) and resolve its load state.
+     */
+    async function fetchPreviewLoad(viewer, path, scope, sessionId) {
+      const strategy = viewer.fetchStrategy
+      if (strategy === 'fsRead') return loadFsReadContent(viewer, path, scope, sessionId)
+      if (strategy === 'mediaUrl') {
+        return { status: 'ready', viewer, mediaUrl: mediaUrlOf(sessionId, path) }
+      }
+      if (strategy === 'custom') {
+        const data = await (viewer.load?.(path, scope) ?? Promise.resolve(undefined))
+        return { status: 'ready', viewer, customData: data }
+      }
+      // 'binary-download' and anything else: mount the viewer's own
+      // component (it handles the download / media itself).
+      return { status: 'ready', viewer }
+    }
+
+    /**
+     * Resolve the file's viewer through the sidebar registry and load the
+     * bytes it needs; failures become an error state shown in the window.
+     */
+    function usePreviewLoader(service, path, sessionId, scope) {
+      const [load, setLoad] = useState({ status: 'loading', viewer: null })
+      useEffect(() => {
+        let cancelled = false
+        const viewer = service?.matchFileViewer?.(path)
+        if (!viewer) {
+          setLoad({ status: 'error', viewer: null, message: strings.previewUnsupported() })
+          return () => { cancelled = true }
+        }
+        setLoad({ status: 'loading', viewer })
+        fetchPreviewLoad(viewer, path, scope, sessionId)
+          .then((next) => {
+            if (!cancelled) setLoad(next)
+          })
+          .catch((error) => {
+            if (!cancelled) setLoad({ status: 'error', viewer, message: error instanceof Error ? error.message : String(error) })
+          })
+        return () => { cancelled = true }
+      }, [path, sessionId, scope])
+      return load
+    }
+
+    /** Preview window body: loading note / error panel / viewer 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,
+        )
+      }
+      if (load.viewer.id === 'pdf') {
+        const url = mediaUrlOf(sessionId, path)
+        return createElement(PdfPreview, { src: url, download: `${url}&download=1`, title })
+      }
+      return createElement(load.viewer.component, {
+        ctx, store, scope, path, title,
+        viewerId: load.viewer.id,
+        content: load.content,
+        mediaUrl: load.mediaUrl,
+        customData: load.customData,
+      })
+    }
+
+    /**
+     * A floating preview window. Instead of re-implementing rendering, it
+     * asks the sidebar registry for the file's viewer (`matchFileViewer`),
+     * fetches the bytes the viewer's fetchStrategy needs (fsRead text /
+     * mediaUrl / customData), then mounts that viewer's own component — so
+     * code gets syntax highlighting and markdown gets rendered by the SAME
+     * built-in renderers the sidebar's editor tab uses.
+     *
+     * Media caveat: the sidebar's own media route (/sidebar/file) only serves
+     * files inside the session working directory, while file activity records
+     * files the agent touched anywhere (/tmp scratch files, sibling repos…).
+     * Media bytes therefore come from OUR route (/file-activity/file), which
+     * authorizes exactly the paths this session recorded; PDF is the one
+     * built-in viewer that fetches its own URL internally (it ignores the
+     * `mediaUrl` prop), so it gets a small iframe preview instead.
+     */
+    function FloatingPreview({ ctx, store, scope, preview, onClose }) {
+      const sessionId = scope?.sessionId ?? ''
+      const path = preview.abs
+      const title = preview.name
+      const service = ctx.betterSidebar
+      const load = usePreviewLoader(service, path, sessionId, scope)
+
+      // Clicking outside is the primary dismiss (the overlay's onClick);
+      // Escape is a keyboard affordance. Both call 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])
+
+      return createElement(
+        'div',
+        { className: 'dfa-fp-overlay', onClick: onClose },
+        createElement(
+          'div',
+          { className: 'dfa-fp', onClick: (event) => { if (event && event.stopPropagation) event.stopPropagation() } },
+          createElement(
+            'div',
+            { className: 'dfa-fp-head' },
+            createElement('span', { className: 'dfa-fp-title' }, title),
+            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)),
+        ),
+      )
+    }
+
+    /**
+     * Lightweight PDF preview. better-sidebar's built-in PdfView fetches
+     * `/sidebar/file` internally (it ignores any injected `mediaUrl` prop),
+     * and that route refuses files outside the session working directory — so
+     * a recorded /tmp PDF would never load. This tiny view embeds the bytes
+     * from OUR media route in 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

@@ -0,0 +1,122 @@
+    // ── row rendering helpers (recent list & stats tree) ──────────────────
+    const opClass = (op) => (op === 'create' ? 'dfa-op-create' : op === 'modify' ? 'dfa-op-modify' : 'dfa-op-read')
+    const opLabel = (op) => (op === 'create' ? strings.create() : op === 'modify' ? strings.modify() : strings.read())
+
+    /** Tooltip for a stats file row: absolute path + created / last-seen times. */
+    const fileTitle = (abs, firstSeen, lastSeen) => {
+      const times = []
+      if (typeof firstSeen === 'number') times.push(`${strings.created()} ${formatTime(firstSeen)}`)
+      if (typeof lastSeen === 'number') times.push(`${strings.lastSeen()} ${formatTime(lastSeen)}`)
+      return times.length > 0 ? `${abs}\n${times.join(' · ')}` : abs
+    }
+
+    /** Three colored count pills for a file/dir node (read/create/modify). */
+    const countPills = (node) =>
+      createElement('span', { className: 'dfa-counts', style: { paddingLeft: '6px' } },
+        createElement('span', { className: 'dfa-count dfa-count-read' }, `${strings.readShort()} ${node.read}`),
+        createElement('span', { className: 'dfa-count dfa-count-create' }, `${strings.createShort()} ${node.create}`),
+        createElement('span', { className: 'dfa-count dfa-count-modify' }, `${strings.modifyShort()} ${node.modify}`),
+      )
+
+    /** A stats-tree file row: icon + name + count pills + relative time. */
+    const fileRow = (file, depth, onOpen) =>
+      createElement(
+        'div',
+        {
+          key: file.abs,
+          className: 'dfa-row',
+          onClick: () => onOpen(file.abs),
+          style: { paddingLeft: 8 + depth * 20 },
+          title: fileTitle(file.abs, file.firstSeen, file.lastSeen),
+        },
+        createElement('span', { className: 'dfa-row-icon dfa-icon-file' }, icon.file(14)),
+        createElement('span', { className: 'dfa-row-name dfa-name-file' }, file.name),
+        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)
+      const collapsed = collapsedDirs.has(node.path)
+      return createElement(
+        'div',
+        { key: node.path },
+        createElement(
+          'div',
+          {
+            className: 'dfa-row dfa-row-dir',
+            onClick: () => onToggleDir(node.path),
+            style: { paddingLeft: 8 + depth * 20 },
+            title: `${node.path}/`,
+          },
+          createElement('span', { className: 'dfa-chevron' },
+            collapsed ? icon.chevronRight(13) : icon.chevronDown(13),
+          ),
+          createElement('span', { className: 'dfa-row-icon dfa-icon-folder' }, icon.folder(14)),
+          createElement('span', { className: 'dfa-row-name' },
+            node.compressed ? node.name : node.name + '/',
+          ),
+          countPills(node),
+        ),
+        collapsed ? null : 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(
+        'div',
+        {
+          key: `${entry.path}:${entry.time}:${entry.op}`,
+          className: 'dfa-row',
+          onClick: () => onOpen(entry.path),
+          title: entry.path,
+        },
+        createElement('span', { className: `dfa-op ${opClass(entry.op)}` }, opLabel(entry.op)),
+        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)
+      if (next.has(key)) next.delete(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
+      postClear(sessionId)
+      const current = dataStore.getSnapshot()
+      dataStore.set({
+        bySession: {
+          ...(current.bySession ?? {}),
+          [sessionId]: { recent: [], counts: {}, loading: false },
+        },
+      })
+    }
+
+    /** Manual refresh: fetch stats + the authoritative cwd for this session. */
+    function refreshSessionData(dataStore, sessionId, setCwd, setError) {
+      if (sessionId === '') return
+      void fetchStats(sessionId).then((value) => {
+        if (value === null) return
+        setCwd((prev) => prev || value.cwd || '')
+        const current = dataStore.getSnapshot()
+        dataStore.set({
+          bySession: {
+            ...(current.bySession ?? {}),
+            [sessionId]: { recent: value.recent ?? [], counts: value.counts ?? {}, loading: false },
+          },
+        })
+        setError(false)
+      }).catch(() => setError(true))
+      void fetchSessionCwd(sessionId).then((cwd) => {
+        if (cwd !== '') setCwd(cwd)
+      })
+    }

package/lib/parts/store.part.js

@@ -0,0 +1,16 @@
+    // ── tiny external store ───────────────────────────────────────────────
+    function createStore(initial) {
+      let state = initial
+      const listeners = new Set()
+      return {
+        getSnapshot: () => state,
+        set(patch) {
+          state = { ...state, ...patch }
+          for (const listener of [...listeners]) listener()
+        },
+        subscribe(listener) {
+          listeners.add(listener)
+          return () => listeners.delete(listener)
+        },
+      }
+    }

package/lib/parts/styles.part.js

@@ -0,0 +1,76 @@
+    // ── themed stylesheet (injected once per activation) ──────────────────
+    // Mirrors the better-sidebar 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.
+    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); }
+.dfa-iconbtn { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0;
+  border:none; border-radius:50%; background:transparent; color:var(--dsw-alias-label-secondary); cursor:pointer; flex:none;
+  transition:background var(--ds-transition-duration-slow) var(--ds-ease-in-out), color var(--ds-transition-duration-slow) var(--ds-ease-in-out); }
+.dfa-iconbtn svg { display:block; }
+.dfa-iconbtn:hover:not(:disabled) { background:var(--dsw-alias-interactive-bg-hover); color:var(--dsw-alias-label-primary); }
+.dfa-iconbtn:disabled { opacity:.4; cursor:default; }
+.dfa-iconbtn-danger:hover:not(:disabled) { color:var(--dsw-alias-state-error-primary); }
+.dfa-iconbtn-xs { width:20px; height:20px; }
+.dfa-section-head-actions { display:flex; align-items:center; gap:2px; flex:none; }
+.dfa-section { margin-top:4px; }
+.dfa-section-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 6px 2px;
+  font:var(--dsw-font-xxxs-strong-11); color:var(--dsw-alias-label-tertiary); text-transform:uppercase; letter-spacing:.04em; }
+.dfa-section-head-toggle { display:flex; align-items:center; gap:5px; cursor:pointer; color:var(--dsw-alias-label-secondary); border:none; background:transparent; padding:0;
+  font:var(--dsw-font-xxxs-strong-11); text-transform:uppercase; letter-spacing:.04em; }
+.dfa-section-head-toggle:hover { color:var(--dsw-alias-label-primary); }
+.dfa-section-head-toggle svg { display:block; flex:none; }
+.dfa-empty { padding:8px 6px; font:var(--dsw-font-xxs-12); color:var(--dsw-alias-label-tertiary); line-height:1.7; }
+.dfa-empty-hint { display:block; margin-top:2px; color:var(--dsw-alias-label-dimmed); font:var(--dsw-font-xxxs-11); }
+.dfa-list { display:flex; flex-direction:column; gap:0; }
+.dfa-row { display:flex; align-items:center; gap:6px; box-sizing:border-box; width:100%; min-height:26px;
+  margin:0; padding:0 8px; border:none; background:transparent; border-radius:8px; cursor:pointer; text-align:left;
+  animation:dfa-row-in 150ms var(--ds-ease-in-out); font:var(--dsw-font-s-14); color:var(--dsw-alias-label-primary); }
+.dfa-row:hover { background:var(--dsw-alias-interactive-bg-hover); }
+.dfa-row-dir { font:var(--dsw-font-s-strong-14); color:var(--dsw-alias-label-primary); }
+.dfa-chevron { flex:none; display:flex; align-items:center; color:var(--dsw-alias-label-tertiary); }
+.dfa-row-icon { flex:none; display:flex; align-items:center; color:var(--dsw-alias-label-secondary); }
+/* Strong folder-vs-file separation: folders get the brand accent ink so the
+   directory rows read as the colorful navigation spine; files stay neutral
+   and faint, so the eye separates them instantly. */
+.dfa-icon-folder { color:var(--dsw-alias-accent); }
+.dfa-icon-file { color:var(--dsw-alias-label-tertiary); }
+.dfa-row-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.dfa-name-file { color:var(--dsw-alias-label-secondary); }
+.dfa-time { flex:none; font:var(--dsw-font-xxxs-11); color:var(--dsw-alias-label-tertiary); white-space:nowrap; }
+.dfa-op { flex:none; display:inline-flex; align-items:center; justify-content:center; height:17px; padding:0 5px; border-radius:4px;
+  font:var(--dsw-font-xxxs-strong-11); }
+.dfa-op-create { color:var(--dsw-alias-state-success-primary); background:color-mix(in srgb, var(--dsw-alias-state-success-primary) 14%, transparent); }
+.dfa-op-modify { color:var(--dsw-alias-state-warn-primary); background:color-mix(in srgb, var(--dsw-alias-state-warn-primary) 16%, transparent); }
+.dfa-op-read { color:var(--dsw-alias-accent); background:color-mix(in srgb, var(--dsw-alias-accent) 12%, transparent); }
+.dfa-counts { flex:none; display:flex; align-items:center; gap:3px; }
+.dfa-count { flex:none; display:inline-flex; align-items:center; justify-content:center; height:15px; padding:0 4px; border-radius:4px;
+  font:var(--dsw-font-xxxs-strong-11); }
+.dfa-count-create { color:var(--dsw-alias-state-success-primary); background:color-mix(in srgb, var(--dsw-alias-state-success-primary) 12%, transparent); }
+.dfa-count-modify { color:var(--dsw-alias-state-warn-primary); background:color-mix(in srgb, var(--dsw-alias-state-warn-primary) 14%, transparent); }
+.dfa-count-read { color:var(--dsw-alias-accent); background:color-mix(in srgb, var(--dsw-alias-accent) 10%, transparent); }
+/* ── floating preview window (uses the sidebar's native viewer rendering) ──
+   A transparent-ish scrim fills the viewport and closes the window on any
+   outside click / Escape; the window itself stops propagation. Its body is a
+   scroll container so large files scroll inside. */
+.dfa-fp-overlay { position:fixed; inset:0; z-index:1990; background:rgba(0,0,0,0.12); }
+.dfa-fp { position:fixed; top:56px; right:340px; width:min(720px, calc(100vw - 376px)); height:76vh; max-height:860px;
+  background:var(--dsw-alias-bg-layer-2); color:var(--dsw-alias-label-primary);
+  border:1px solid var(--dsw-alias-border-l2); border-radius:10px; box-shadow:var(--dsw-shadow-lv2); z-index:2000;
+  display:flex; flex-direction:column; overflow:hidden; }
+.dfa-fp-head { display:flex; align-items:center; gap:6px; padding:6px 8px; border-bottom:1px solid var(--dsw-alias-border-l1); flex:none; }
+.dfa-fp-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:var(--dsw-font-s-strong-14); color:var(--dsw-alias-label-primary); }
+.dfa-fp-actions { display:flex; align-items:center; gap:2px; flex:none; }
+.dfa-fp-body { flex:1; overflow:auto; padding:10px 12px; min-height:0; }
+.dfa-fp-note { color:var(--dsw-alias-label-tertiary); font:var(--dsw-font-xxs-12); }
+.dfa-fp-err { color:var(--dsw-alias-state-error-primary); font:var(--dsw-font-xxs-12); white-space:pre-wrap; word-break:break-all; }
+/* PDF preview: a native browser PDF frame filled from the plugin's own media
+   route, with a download fallback in the toolbar. */
+.dfa-pdf { display:flex; flex-direction:column; width:100%; height:100%; }
+.dfa-pdf-toolbar { flex:none; display:flex; justify-content:flex-end; padding:2px 4px 6px; }
+.dfa-pdf-download { font:var(--dsw-font-xxs-12); color:var(--dsw-alias-accent); text-decoration:none; }
+.dfa-pdf-download:hover { text-decoration:underline; }
+.dfa-pdf-frame { flex:1; min-height:0; width:100%; border:none; border-radius:6px; background:transparent; }
+@keyframes dfa-row-in { from { opacity:0; transform:translateY(1px); } to { opacity:1; transform:none; } }
+`

package/lib/parts/tree.part.js

@@ -0,0 +1,71 @@
+    // ── directory tree construction ───────────────────────────────────────
+    /**
+     * Collapse chain directories: a directory whose only child is another
+     * directory merges into it (a → a.b → a.b.c …). Deep single-child paths
+     * render as one dotted label with the file(s) directly beneath.
+     * `root` itself is never collapsed (its name is '' and would drop the
+     * top-level directory).
+     */
+    function compressChains(node, isRoot) {
+      for (const child of node.children) {
+        if (child.type === 'dir') compressChains(child, false)
+      }
+      if (isRoot) return
+      while (node.children.length === 1 && node.children[0].type === 'dir') {
+        const only = node.children[0]
+        node.name = `${node.name}.${only.name}`
+        node.children = only.children
+        node.compressed = true
+      }
+    }
+
+    /**
+     * Sort a directory node: directories first (alphabetically), then files
+     * (by total activity, then name); recurse into directories.
+     */
+    function sortNode(node) {
+      node.children.sort((a, b) => {
+        if (a.type !== b.type) return a.type === 'dir' ? -1 : 1
+        if (a.type === 'dir') return a.name < b.name ? -1 : a.name > b.name ? 1 : 0
+        const ta = a.read + a.create + a.modify
+        const tb = b.read + b.create + b.modify
+        return tb - ta || (a.name < b.name ? -1 : a.name > b.name ? 1 : 0)
+      })
+      for (const child of node.children) {
+        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
+     * sorts directories first (alphabetically), then files (by activity).
+     */
+    function buildTree(counts) {
+      const root = { type: 'dir', name: '', path: '', children: [], read: 0, create: 0, modify: 0 }
+      for (const [abs, counter] of Object.entries(counts)) {
+        const parts = abs.split('/').filter((part) => part !== '')
+        if (parts.length === 0) continue
+        const name = parts[parts.length - 1]
+        let node = root
+        for (const dir of parts.slice(0, -1)) {
+          let child = node.children.find((c) => c.type === 'dir' && c.name === dir)
+          if (child === undefined) {
+            child = { type: 'dir', name: dir, path: `${node.path}/${dir}`, children: [], read: 0, create: 0, modify: 0 }
+            node.children.push(child)
+          }
+          node = child
+          node.read += counter.read
+          node.create += counter.create
+          node.modify += counter.modify
+        }
+        node.children.push({
+          type: 'file', name, abs,
+          read: counter.read, create: counter.create, modify: counter.modify,
+          firstSeen: counter.firstSeen, lastSeen: counter.lastSeen,
+        })
+      }
+      sortNode(root)
+      compressChains(root, true)
+      return root
+    }

package/lib/parts/view.part.js

@@ -0,0 +1,129 @@
+    // ── view component ────────────────────────────────────────────────────
+    /** Shared empty bucket for sessions that have never loaded data (stable ref). */
+    const EMPTY_SESSION = { recent: [], counts: {}, loading: true }
+
+    /**
+     * Polling loader for one session: fetches stats on mount and on a fixed
+     * interval while visible, prefers the sidebar's authoritative session.cwd
+     * for relative display, and writes results into the per-session bucket.
+     */
+    function useSessionLoader(visible, sessionId, scope, dataStore, setCwd, setError) {
+      useEffect(() => {
+        if (!visible || sessionId === '') return
+        let cancelled = false
+        const load = () => {
+          void fetchStats(sessionId).then((value) => {
+            if (cancelled || value === null) return
+            setCwd((prev) => prev || value.cwd || '')
+            const current = dataStore.getSnapshot()
+            dataStore.set({
+              bySession: {
+                ...(current.bySession ?? {}),
+                [sessionId]: { recent: value.recent ?? [], counts: value.counts ?? {}, loading: false },
+              },
+            })
+            setError(false)
+          }).catch(() => {
+            if (!cancelled) setError(true)
+          })
+        }
+        load()
+        void fetchSessionCwd(sessionId).then((cwd) => {
+          if (!cancelled && cwd !== '') setCwd(cwd)
+        })
+        const timer = window.setInterval(load, POLL_MS)
+        return () => {
+          cancelled = true
+          window.clearInterval(timer)
+        }
+      }, [visible, sessionId, dataStore])
+    }
+
+    /** Error banner element, or null when the last load succeeded. */
+    function renderError(error) {
+      if (!error) return null
+      return createElement('div', { style: { color: 'var(--dsw-alias-state-error-primary)', padding: '4px 6px', font: 'var(--dsw-font-xxs-12)' } }, strings.loadError())
+    }
+
+    /** "最近访问" section: collapsible head with refresh/clear actions. */
+    function renderRecentSection(recent, recentOpen, onToggle, onRefresh, onClear, onOpen) {
+      return createElement(
+        'div',
+        { className: 'dfa-section' },
+        createElement(
+          'div',
+          { className: 'dfa-section-head' },
+          createElement(
+            'button',
+            { className: 'dfa-section-head-toggle', onClick: onToggle },
+            recentOpen ? icon.chevronDown(13) : icon.chevronRight(13),
+            strings.recent(),
+          ),
+          createElement('span', { className: 'dfa-section-head-actions' },
+            createElement('button', { className: 'dfa-iconbtn dfa-iconbtn-xs', onClick: onRefresh, title: strings.refresh(), 'aria-label': strings.refresh() }, icon.refresh(14)),
+            createElement('button', { className: 'dfa-iconbtn dfa-iconbtn-xs dfa-iconbtn-danger', onClick: onClear, title: strings.clear(), 'aria-label': strings.clear() }, icon.trash(14)),
+          ),
+        ),
+        !recentOpen ? null : recent.length === 0
+          ? createElement(
+              'div',
+              { className: 'dfa-empty' },
+              strings.empty(),
+              createElement('span', { className: 'dfa-empty-hint' }, strings.emptyHint()),
+            )
+          : createElement('div', { className: 'dfa-list' }, recent.map((entry) => recentEntry(entry, onOpen))),
+      )
+    }
+
+    /** "文件统计" section: the directory tree, or an empty hint. */
+    function renderStatsSection(tree, collapsedDirs, onToggleDir, onOpen) {
+      return createElement(
+        'div',
+        { className: 'dfa-section' },
+        createElement('div', { className: 'dfa-section-head' }, strings.stats()),
+        tree.children.length === 0
+          ? createElement('div', { className: 'dfa-empty' }, strings.empty())
+          : createElement('div', { className: 'dfa-list' }, tree.children.map((child) => renderTreeNode(child, 0, collapsedDirs, onToggleDir, onOpen))),
+      )
+    }
+
+    /**
+     * The file-activity tab. Each session renders only its own store bucket:
+     * a fresh conversation shows an empty list immediately, with no residue
+     * from the previous session. Clicking any file opens a FLOATING preview
+     * that reuses the sidebar's NATIVE viewer via matchFileViewer.
+     */
+    function FileActivityView({ ctx, store, scope, visible, dataStore }) {
+      const data = useSyncExternalStore(dataStore.subscribe, dataStore.getSnapshot)
+      const [cwd, setCwd] = useState(scope?.cwd || '')
+      const [error, setError] = useState(false)
+      const [recentOpen, setRecentOpen] = useState(true)
+      const [collapsedDirs, setCollapsedDirs] = useState(() => new Set())
+      const sessionId = scope?.sessionId ?? ''
+      const sessionData = (data.bySession ?? {})[sessionId] ?? EMPTY_SESSION
+      const tree = useMemo(() => buildTree(sessionData.counts ?? {}), [sessionData.counts])
+      useEffect(() => {
+        if (scope?.cwd) setCwd(scope.cwd)
+      }, [scope?.cwd])
+      useSessionLoader(visible, sessionId, scope, dataStore, setCwd, setError)
+      // Switching conversations closes any floating preview left open by the
+      // previous session (preview is shared UI state; session data never
+      // crosses sessions anymore).
+      useEffect(() => {
+        dataStore.set({ preview: null })
+      }, [sessionId, dataStore])
+      const toggleDir = (path) => setCollapsedDirs((prev) => toggleInSet(prev, path))
+      const openPreview = (path) => dataStore.set({ preview: { abs: path, name: basenameOf(path) } })
+      const closePreview = () => dataStore.set({ preview: null })
+      const onClear = () => clearSessionData(dataStore, sessionId)
+      const onRefresh = () => refreshSessionData(dataStore, sessionId, setCwd, setError)
+      const recent = sessionData.recent ?? []
+      return createElement('div', { className: 'dfa' },
+        renderError(error),
+        renderRecentSection(recent, recentOpen, () => setRecentOpen((v) => !v), onRefresh, onClear, openPreview),
+        renderStatsSection(tree, collapsedDirs, toggleDir, openPreview),
+        data.preview
+          ? createElement(FloatingPreview, { ctx, store, scope, preview: data.preview, onClose: closePreview })
+          : null,
+      )
+    }