dsh-better-sidebar 0.10.0

package/src/client/DiffView.tsx

@@ -0,0 +1,266 @@
+/**
+ * The real diff surface for the git panel: parses the host's unified diff
+ * text (`git diff` / `git show`) and renders it VSCode-style — per-file
+ * sections with hunks (`@@ -a,b +c,d @@` headers), old/new line-number
+ * gutters, and aligned context / deleted / added rows colored through the
+ * DSH tokens. Untracked files produce no `git diff` output, so the caller
+ * can pass the file content to render as a full-file addition instead.
+ *
+ * The parser is a pure function (`parseUnifiedDiff`) so the interesting
+ * cases are unit-tested without a DOM.
+ */
+import { useMemo, useState, type ReactNode } from 'react'
+import clsx from 'clsx'
+import { t } from './locales.ts'
+import css from './sidebar.module.css'
+
+/** One rendered diff line. */
+export interface DiffLine {
+  kind: 'ctx' | 'del' | 'add' | 'meta'
+  /** The line content without its diff marker ('' for the no-newline marker). */
+  text: string
+  /** Old-side line number (null for pure additions / metadata). */
+  oldNum: number | null
+  /** New-side line number (null for pure deletions / metadata). */
+  newNum: number | null
+}
+
+/** One parsed hunk. */
+export interface DiffHunk {
+  /** The old-side start line (`-a[,b]`). */
+  oldStart: number
+  /** The new-side start line (`+c[,d]`). */
+  newStart: number
+  /** The section text after the trailing `@@` (may be empty). */
+  header: string
+  lines: DiffLine[]
+}
+
+/** One parsed file section of a unified diff. */
+export interface DiffFile {
+  /** The `---` path verbatim ('/dev/null' for a new file). */
+  oldPath: string
+  /** The `+++` path verbatim ('/dev/null' for a deleted file). */
+  newPath: string
+  /** The file changed with binary content: no hunks to draw. */
+  binary: boolean
+  hunks: DiffHunk[]
+}
+
+/** The parsed unified diff. */
+export interface ParsedDiff {
+  files: DiffFile[]
+}
+
+/** Parse the hunk header `@@ -a[,b] +c[,d] @@ section` (section may contain '@@'). */
+function parseHunkHeader(line: string): { oldStart: number; newStart: number; header: string } | null {
+  const match = /^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@(.*)$/.exec(line)
+  if (match === null) return null
+  return { oldStart: Number(match[1]), newStart: Number(match[3]), header: match[5] ?? '' }
+}
+
+/**
+ * Parse `git diff --no-color` output into file sections and hunks. Rows
+ * outside a file section (leading noise) and metadata rows between the
+ * `diff --git`/`---`/`+++` headers and the first hunk (index lines, mode
+ * changes, rename/similarity lines) are skipped; a section that never
+ * reaches a hunk (a mode/rename-only change) stays hunkless so the caller
+ * can still draw its path.
+ */
+export function parseUnifiedDiff(text: string): ParsedDiff {
+  const files: DiffFile[] = []
+  let current: DiffFile | null = null
+  let inHunk = false
+  let hunk: DiffHunk | null = null
+  let oldNum = 0
+  let newNum = 0
+  const flushHunk = (): void => {
+    if (current !== null && hunk !== null) current.hunks.push(hunk)
+    hunk = null
+    inHunk = false
+  }
+  for (const raw of text.split('\n')) {
+    if (raw.startsWith('diff --git ')) {
+      flushHunk()
+      current = { oldPath: '', newPath: '', binary: false, hunks: [] }
+      files.push(current)
+      continue
+    }
+    if (current === null) continue
+    if (raw.startsWith('Binary files ') || raw === 'GIT binary patch') {
+      flushHunk()
+      current.binary = true
+      continue
+    }
+    if (raw.startsWith('--- ')) {
+      flushHunk()
+      current.oldPath = raw.slice(4)
+      continue
+    }
+    if (raw.startsWith('+++ ')) {
+      current.newPath = raw.slice(4)
+      continue
+    }
+    const header = parseHunkHeader(raw)
+    if (header !== null) {
+      flushHunk()
+      hunk = { oldStart: header.oldStart, newStart: header.newStart, header: header.header, lines: [] }
+      oldNum = header.oldStart
+      newNum = header.newStart
+      inHunk = true
+      continue
+    }
+    if (!inHunk || hunk === null) continue
+    const marker = raw[0]
+    if (marker === '\\') {
+      // ``: metadata attached to the previous row.
+      hunk.lines.push({ kind: 'meta', text: raw.slice(1), oldNum: null, newNum: null })
+      continue
+    }
+    if (marker === ' ') {
+      hunk.lines.push({ kind: 'ctx', text: raw.slice(1), oldNum, newNum })
+      oldNum += 1
+      newNum += 1
+    } else if (marker === '-') {
+      hunk.lines.push({ kind: 'del', text: raw.slice(1), oldNum, newNum: null })
+      oldNum += 1
+    } else if (marker === '+') {
+      hunk.lines.push({ kind: 'add', text: raw.slice(1), oldNum: null, newNum })
+      newNum += 1
+    } else {
+      // Not a diff line (a hunk can never contain one): stop the hunk.
+      flushHunk()
+    }
+  }
+  flushHunk()
+  return { files }
+}
+
+/** Build the untracked-file shape: one file, one hunk of pure additions. */
+function untrackedFile(path: string, content: string): DiffFile {
+  const lines: DiffLine[] = []
+  const body = content.endsWith('\n') ? content.slice(0, -1) : content
+  if (body !== '') {
+    let num = 1
+    for (const line of body.split('\n')) {
+      lines.push({ kind: 'add', text: line, oldNum: null, newNum: num })
+      num += 1
+    }
+  }
+  return { oldPath: '/dev/null', newPath: `b/${path}`, binary: false, hunks: [{ oldStart: 0, newStart: 1, header: '', lines }] }
+}
+
+/** Strip the `a/` / `b/` prefix git puts on diff paths (not on /dev/null). */
+function displayPath(path: string): string {
+  if (path === '/dev/null') return path
+  if (path.startsWith('a/') || path.startsWith('b/')) return path.slice(2)
+  return path
+}
+
+/** The file header badge: added / deleted / renamed / binary ('' for a plain edit). */
+function fileTag(file: DiffFile): string | null {
+  if (file.binary) return t('diffBinary')
+  if (file.oldPath === '/dev/null') return t('diffAdded')
+  if (file.newPath === '/dev/null') return t('diffDeleted')
+  const oldPath = displayPath(file.oldPath)
+  const newPath = displayPath(file.newPath)
+  if (oldPath !== newPath) return t('diffRenamed')
+  return null
+}
+
+/** Cap the flattened rows like DiffBlock: head + tail, expand button between. */
+const MAX_DIFF_ROWS = 500
+
+export interface DiffViewProps {
+  /** Unified diff text (`git.diff` or `git.commit-diff` payloads). */
+  diff: string
+  /** Untracked-file content: when present, renders as a full-file addition instead of parsing. */
+  untrackedPath?: string
+  untrackedContent?: string
+}
+
+export function DiffView({ diff, untrackedPath, untrackedContent }: DiffViewProps) {
+  const parsed = useMemo<ParsedDiff>(() => {
+    if (untrackedPath !== undefined) {
+      return { files: [untrackedFile(untrackedPath, untrackedContent ?? '')] }
+    }
+    return parseUnifiedDiff(diff)
+  }, [diff, untrackedPath, untrackedContent])
+  const [expanded, setExpanded] = useState(false)
+
+  // Flatten into display rows so the cap can slice a single list.
+  const rows = useMemo(() => {
+    const out: Array<{ key: string; file: DiffFile; type: 'path' | 'hunk' | 'line'; hunk?: DiffHunk; line?: DiffLine }> = []
+    parsed.files.forEach((file, fileIndex) => {
+      out.push({ key: `f${fileIndex}`, file, type: 'path' })
+      if (file.binary) return
+      file.hunks.forEach((hunk, hunkIndex) => {
+        out.push({ key: `f${fileIndex}h${hunkIndex}`, file, type: 'hunk', hunk })
+        hunk.lines.forEach((line, lineIndex) => {
+          out.push({ key: `f${fileIndex}h${hunkIndex}l${lineIndex}`, file, type: 'line', hunk, line })
+        })
+      })
+    })
+    return out
+  }, [parsed])
+
+  const hidden = rows.length - MAX_DIFF_ROWS
+  const capped = hidden > 0 && !expanded
+  const headLines = Math.ceil(MAX_DIFF_ROWS / 2)
+  const tailLines = MAX_DIFF_ROWS - headLines
+  const head = capped ? rows.slice(0, headLines) : rows
+  const tail = capped ? rows.slice(rows.length - tailLines) : []
+
+  if (rows.length === 0) return null
+
+  const renderRow = (row: (typeof rows)[number]): ReactNode => {
+    if (row.type === 'path') {
+      const tag = fileTag(row.file)
+      const from = displayPath(row.file.oldPath)
+      const to = displayPath(row.file.newPath)
+      return (
+        <div key={row.key} className={css.gitDiffFile}>
+          <span className={css.gitDiffFilePath}>{to}</span>
+          {from !== to && <span className={css.gitDiffFileOld}>← {from}</span>}
+          {tag !== null && <span className={css.gitDiffFileTag}>{tag}</span>}
+        </div>
+      )
+    }
+    if (row.type === 'hunk') {
+      const hunk = row.hunk!
+      return (
+        <div key={row.key} className={css.gitDiffHunk}>
+          <span className={css.gitDiffHunkHeader}>@@ -{hunk.oldStart},{hunk.lines.filter(l => l.oldNum !== null).length} +{hunk.newStart},{hunk.lines.filter(l => l.newNum !== null).length} @@</span>
+          {hunk.header !== '' && <span className={css.gitDiffHunkSection}>{hunk.header}</span>}
+        </div>
+      )
+    }
+    const line = row.line!
+    const lineClass = line.kind === 'del' ? css.gitDiffDel : line.kind === 'add' ? css.gitDiffAdd : line.kind === 'meta' ? css.gitDiffMeta : css.gitDiffCtx
+    return (
+      <div key={row.key} className={clsx(css.gitDiffLine, lineClass)}>
+        {line.kind === 'meta'
+          ? <span className={css.gitDiffMetaText}>{line.text}</span>
+          : (
+            <>
+              <span className={css.gitDiffNum}>{line.oldNum ?? ''}</span>
+              <span className={css.gitDiffNum}>{line.newNum ?? ''}</span>
+              <span className={css.gitDiffCode}>{line.text}</span>
+            </>
+          )}
+      </div>
+    )
+  }
+
+  return (
+    <div className={css.gitDiff}>
+      {head.map(renderRow)}
+      {hidden > 0 && (
+        <button type="button" className={css.gitDiffExpand} aria-expanded={expanded} onClick={() => { setExpanded(value => !value) }}>
+          {expanded ? t('diffCollapse') : t('diffExpand', { count: hidden })}
+        </button>
+      )}
+      {tail.map(renderRow)}
+    </div>
+  )
+}

package/src/client/EditorHost.tsx

@@ -0,0 +1,101 @@
+/**
+ * The editor tab host: resolves a file's previewer through the sidebar
+ * registry (`matchFileViewer`), fetches bytes per the matched viewer's
+ * fetch strategy, and renders its component — or the shared download pane
+ * when nothing can render the file. The header shows the file title; the
+ * editable code/markdown viewers render their own toolbar below it.
+ *
+ * The strategy dispatch is pure (planFirstMatch / planFsReadOutcome in
+ * editor-load.ts); this component only wires it to the host APIs.
+ */
+import { useEffect, useState } from 'react'
+import { createElement } from 'react'
+import type { Context } from '../context-types.ts'
+import { api, mediaUrl, type SessionScope } from './api.ts'
+import { BinaryDownload } from './binary-download.tsx'
+import { planFirstMatch, planFsReadOutcome, type EditorLoadAction } from './editor-load.ts'
+import { t } from './locales.ts'
+import type { FileViewerDescriptor } from './service.ts'
+import type { SidebarStore } from './state.ts'
+import css from './sidebar.module.css'
+
+type EditorLoad =
+  | { status: 'loading' }
+  | { status: 'error'; message: string }
+  | { status: 'ready'; viewer: FileViewerDescriptor; content?: string; truncated?: boolean; mediaUrl?: string; customData?: unknown }
+  | { status: 'binary' }
+
+export function EditorHost(props: { ctx: Context; store: SidebarStore; scope: SessionScope; path: string; title: string }) {
+  const { ctx, store, scope, path, title } = props
+  const [load, setLoad] = useState<EditorLoad>({ status: 'loading' })
+
+  useEffect(() => {
+    let cancelled = false
+    setLoad({ status: 'loading' })
+    const mediaUrlOf = (): string => mediaUrl(scope, path)
+    const apply = (action: EditorLoadAction): void => {
+      if (cancelled) return
+      switch (action.kind) {
+        case 'binary':
+          setLoad({ status: 'binary' })
+          return
+        case 'render':
+          setLoad({
+            status: 'ready',
+            viewer: action.viewer,
+            content: action.content,
+            truncated: action.truncated,
+            mediaUrl: action.mediaUrl,
+            customData: action.customData,
+          })
+          return
+        case 'customLoad':
+          void action.viewer.load?.(path, scope).then((data) => {
+            if (cancelled) return
+            setLoad({ status: 'ready', viewer: action.viewer, customData: data })
+          }).catch((error: unknown) => {
+            if (cancelled) return
+            setLoad({ status: 'error', message: error instanceof Error ? error.message : String(error) })
+          })
+          return
+        case 'fetchFsRead':
+          api.fsRead(scope, path).then((result) => {
+            if (cancelled) return
+            // Binary reads carry the head bytes for the detect re-match.
+            const outcome = planFsReadOutcome(action.viewer, {
+              binary: result.kind === 'binary',
+              content: result.kind === 'text' ? result.content : '',
+              truncated: result.truncated,
+              head: result.kind === 'binary' ? result.head : undefined,
+            }, (head) => ctx.betterSidebar?.matchFileViewer(path, head), mediaUrlOf)
+            apply(outcome)
+          }).catch((error: unknown) => {
+            if (cancelled) return
+            setLoad({ status: 'error', message: error instanceof Error ? error.message : String(error) })
+          })
+          return
+      }
+    }
+    apply(planFirstMatch(ctx.betterSidebar?.matchFileViewer(path), mediaUrlOf))
+    return () => { cancelled = true }
+  }, [scope.sessionId, scope.cwd, path, ctx])
+
+  return (
+    <div className={css.editor}>
+      <div className={css.editorHeader}>
+        <span className={css.editorTitle} title={path}>{title}</span>
+      </div>
+      {load.status === 'loading' && <div className={css.editorPlaceholder}>{t('loading')}</div>}
+      {load.status === 'error' && <div className={css.editorError}>{load.message}</div>}
+      {load.status === 'binary' && <BinaryDownload scope={scope} path={path} />}
+      {load.status === 'ready' && createElement(load.viewer.component, {
+        ctx, store, scope, path, title,
+        viewerId: load.viewer.id,
+        content: load.content,
+        truncated: load.truncated,
+        mediaUrl: load.mediaUrl,
+        customData: load.customData,
+      })}
+    </div>
+  )
+}

package/src/client/ExplorerView.tsx

@@ -0,0 +1,283 @@
+/**
+ * The file explorer: a lazy VSCode-style tree rooted at the session's
+ * working directory. Levels load on expansion (one API call per directory),
+ * directories sort first, hidden entries render dimmed, and the expansion
+ * set lives in the per-session state. Clicking a file opens an editor tab.
+ *
+ * Row actions: hovering a row reveals an @-reference button on the far
+ * right (appends `@<relative path>` to the composer draft), and right-click
+ * opens a context menu to copy the relative or absolute path (with a brief
+ * "copied" label replacing the button after a successful write); file rows
+ * also offer a download action (the host serves raw bytes, binary-safe).
+ */
+import { useCallback, useEffect, useRef, useState, type MouseEvent, type ReactNode } from 'react'
+import clsx from 'clsx'
+import {
+  IconCodeOutline16, IconCopyOutline16, IconDownloadOutline16, IconFolderClose16, IconFolderOpen16,
+  IconRefreshOutline16, Menu, writeClipboard,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import { api, downloadUrl, type FsEntry } from './api.ts'
+import { relativeTo } from './paths.ts'
+import { t } from './locales.ts'
+import css from './sidebar.module.css'
+
+interface LevelData {
+  entries?: FsEntry[]
+  error?: string
+}
+
+/** Root label: the last path segment (mirror of the host rootLabel). */
+function baseName(path: string): string {
+  const trimmed = path.replace(/[\\/]+$/, '')
+  const at = Math.max(trimmed.lastIndexOf('/'), trimmed.lastIndexOf('\\'))
+  return at === -1 ? trimmed : trimmed.slice(at + 1)
+}
+
+/** How long the row's "copied" label stays after a successful write. */
+const COPIED_MS = 1200
+
+export function ExplorerView(props: {
+  sessionId: string
+  cwd: string | undefined
+  expanded: string[]
+  onToggle: (path: string) => void
+  onOpenFile: (path: string) => void
+  /** Insert `@<relative path>` into the composer draft. */
+  onReferenceFile: (path: string) => void
+}) {
+  const { sessionId, cwd, expanded, onToggle, onOpenFile, onReferenceFile } = props
+  const [data, setData] = useState<Record<string, LevelData>>({})
+  const dataRef = useRef(data)
+  const [refreshTick, setRefreshTick] = useState(0)
+  /** The row whose path was just copied ("copied" label replaces its button). */
+  const [copiedPath, setCopiedPath] = useState<string | null>(null)
+  /** Open context menu: the row path (and whether it is a directory) plus the cursor position. */
+  const [rowMenu, setRowMenu] = useState<{ path: string; isDir: boolean; x: number; y: number } | null>(null)
+
+  const storeLevel = useCallback((path: string, level: LevelData) => {
+    dataRef.current = { ...dataRef.current, [path]: level }
+    setData(dataRef.current)
+  }, [])
+
+  const loadDir = useCallback((dir: string) => {
+    if (dataRef.current[dir] !== undefined) return
+    storeLevel(dir, {})
+    api.fsTree({ sessionId, cwd }, dir).then((listing) => {
+      storeLevel(dir, { entries: listing.entries })
+    }).catch((error: unknown) => {
+      storeLevel(dir, { error: error instanceof Error ? error.message : String(error) })
+    })
+  }, [sessionId, cwd, storeLevel])
+
+  useEffect(() => {
+    // Load the visible set; already-loaded levels (kept in the cache) are
+    // not refetched. Only the refresh button wipes the cache.
+    const root = cwd
+    if (root === undefined) return
+    loadDir(root)
+    for (const dir of expanded) loadDir(dir)
+  }, [cwd, expanded, refreshTick, loadDir])
+
+  /** Copy `text`; on success flip the row's copied label for a moment. */
+  const copyPath = useCallback((text: string, path: string): void => {
+    void writeClipboard(text).then((ok) => {
+      if (!ok) return
+      setCopiedPath(path)
+      window.setTimeout(() => {
+        setCopiedPath(current => current === path ? null : current)
+      }, COPIED_MS)
+    })
+  }, [])
+
+  /** The row's trailing actions: the @-reference button, or the copied label. */
+  const rowActions = (entry: FsEntry): ReactNode => {
+    if (copiedPath === entry.path) {
+      return <span className={css.explorerCopied}>{t('copied')}</span>
+    }
+    return (
+      <button
+        type="button"
+        className={css.explorerRef}
+        aria-label={t('referenceFile')}
+        title={t('referenceFile')}
+        onClick={(event) => {
+          event.stopPropagation()
+          onReferenceFile(entry.path)
+        }}
+      >
+        {t('referenceFile')}
+      </button>
+    )
+  }
+
+  const openRowMenu = (event: MouseEvent, path: string, isDir: boolean): void => {
+    event.preventDefault()
+    event.stopPropagation()
+    setRowMenu({ path, isDir, x: event.clientX, y: event.clientY })
+  }
+
+  /** Download a file through the host route (raw bytes, binary-safe). */
+  const downloadFile = (path: string): void => {
+    const url = downloadUrl({ sessionId, cwd }, path)
+    const anchor = document.createElement('a')
+    anchor.href = url
+    anchor.style.display = 'none'
+    document.body.appendChild(anchor)
+    anchor.click()
+    anchor.remove()
+  }
+
+  const root = cwd
+
+  const renderLevel = (dir: string, depth: number): ReactNode => {
+    const level = data[dir]
+    if (level === undefined) {
+      return <div className={css.explorerRow} style={{ paddingLeft: depth * 22 + 6 }}>{t('loading')}</div>
+    }
+    if (level.error !== undefined) {
+      return (
+        <div className={clsx(css.explorerRow, css.explorerError)} style={{ paddingLeft: depth * 22 + 6 }}>
+          {level.error}
+        </div>
+      )
+    }
+    const entries = level.entries ?? []
+    return entries.map(entry => {
+      if (entry.isDir) {
+        const isOpen = expanded.includes(entry.path)
+        return (
+          <div key={entry.path}>
+            <div
+              role="button"
+              tabIndex={0}
+              className={clsx(css.explorerRow, css.explorerDir, entry.hidden && css.explorerHidden)}
+              style={{ paddingLeft: depth * 22 + 6 }}
+              onClick={() => { onToggle(entry.path) }}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                  event.preventDefault()
+                  onToggle(entry.path)
+                }
+              }}
+              onContextMenu={(event) => { openRowMenu(event, entry.path, true) }}
+            >
+              {isOpen ? <IconFolderOpen16 size={14} /> : <IconFolderClose16 size={14} />}
+              <span className={css.explorerName}>{entry.name}</span>
+              {rowActions(entry)}
+            </div>
+            {isOpen && renderLevel(entry.path, depth + 1)}
+          </div>
+        )
+      }
+      return (
+        <div
+          key={entry.path}
+          role="button"
+          tabIndex={0}
+          className={clsx(css.explorerRow, entry.hidden && css.explorerHidden)}
+          style={{ paddingLeft: depth * 22 + 6 }}
+          title={entry.path}
+          onClick={() => { onOpenFile(entry.path) }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+              event.preventDefault()
+              onOpenFile(entry.path)
+            }
+          }}
+          onContextMenu={(event) => { openRowMenu(event, entry.path, false) }}
+        >
+          <IconCodeOutline16 size={14} />
+          <span className={css.explorerName}>{entry.name}</span>
+          {rowActions(entry)}
+        </div>
+      )
+    })
+  }
+
+  return (
+    <div className={css.explorer}>
+      <div className={css.explorerHeader}>
+        <span className={css.explorerRoot} title={root}>{root === undefined ? t('noSession') : baseName(root)}</span>
+        <button
+          type="button"
+          className={css.iconButton}
+          aria-label={t('refresh')}
+          title={t('refresh')}
+          onClick={() => {
+            dataRef.current = {}
+            setData({})
+            setRefreshTick(tick => tick + 1)
+          }}
+        >
+          <IconRefreshOutline16 />
+        </button>
+      </div>
+      <div className={css.explorerBody}>
+        {root === undefined ? (
+          <div className={css.explorerEmpty}>{t('noSession')}</div>
+        ) : (
+          <>
+            <div
+              className={css.explorerRow}
+              style={{ paddingLeft: 6 }}
+              onContextMenu={(event) => { openRowMenu(event, root, true) }}
+            >
+              <IconFolderOpen16 size={14} />
+              <span className={css.explorerName}>{baseName(root)}</span>
+              {copiedPath === root
+                ? <span className={css.explorerCopied}>{t('copied')}</span>
+                : (
+                  <button
+                    type="button"
+                    className={css.explorerRef}
+                    aria-label={t('referenceFile')}
+                    title={t('referenceFile')}
+                    onClick={(event) => {
+                      event.stopPropagation()
+                      onReferenceFile(root)
+                    }}
+                  >
+                    {t('referenceFile')}
+                  </button>
+                )}
+            </div>
+            {data[root] !== undefined && renderLevel(root, 1)}
+          </>
+        )}
+      </div>
+      {/*
+        The one shared context menu, positioned at the right-click cursor
+        (portal so the explorer's overflow clip cannot crop it).
+      */}
+      <Menu
+        open={rowMenu !== null}
+        onClose={() => { setRowMenu(null) }}
+        items={[
+          // Download applies to files only (the host route refuses directories).
+          ...(rowMenu?.isDir === false
+            ? [{ id: 'download', label: t('download'), icon: <IconDownloadOutline16 size={14} /> }]
+            : []),
+          { id: 'relative', label: t('copyRelative'), icon: <IconCopyOutline16 size={14} /> },
+          { id: 'absolute', label: t('copyAbsolute'), icon: <IconCopyOutline16 size={14} /> },
+        ]}
+        onSelect={(id) => {
+          const target = rowMenu
+          if (target === null) return
+          setRowMenu(null)
+          if (id === 'download') {
+            downloadFile(target.path)
+            return
+          }
+          copyPath(
+            id === 'relative' ? relativeTo(cwd ?? '', target.path) : target.path,
+            target.path,
+          )
+        }}
+        portal
+        align="start"
+        getAnchorRect={() => (rowMenu === null ? null : new DOMRect(rowMenu.x, rowMenu.y, 0, 0))}
+        anchor={<span />}
+      />
+    </div>
+  )
+}