@deckbuilderkit/view-explorer 0.0.0-stage → 0.1.0

package/src/client.ts

@@ -0,0 +1,104 @@
+import type { ArchiveContent, HttpClient, SqliteContent } from '@deckbuilderkit/editor';
+import type { EditorInfo, FsArchiveFormat, FsCompressResult, FsDuProgress, FsExtractResult, FsHash, FsInfo, GitStatus, TailChunk } from '@deckbuilderkit/server-core/protocol';
+import type { SqlClient } from '@deckbuilderkit/sql-ui';
+
+export type { LogSettings } from '@deckbuilderkit/ui';
+export type { EditorInfo, FsDuProgress, FsHash, FsInfo, TailChunk };
+
+/** A project folder the Explorer shows. */
+export interface Project {
+  id: string;
+  name: string;
+  path: string;
+}
+
+export interface FsEntry {
+  name: string;
+  kind: 'file' | 'dir' | 'link';
+  size: number;
+  mtime: number;
+  /** A link that leads out of the project folder. */
+  outside?: true;
+  /** What a link inside the project points to. */
+  target?: 'file' | 'dir';
+  /** Matches an exclude glob; only listed when the tree shows excluded entries. */
+  excluded?: true;
+}
+
+/** The text encodings the server reads and writes. */
+export type TextEncoding = 'utf8' | 'utf8bom' | 'utf16le' | 'utf16be' | 'windows1252';
+
+export type FsRead =
+  | { text: string; encoding: TextEncoding; size: number; mtime: number; truncated: boolean; readOnly?: true }
+  | { binary: true; size: number; mtime: number };
+
+export interface SearchHit {
+  path: string;
+  kind: 'file' | 'dir';
+  line?: number;
+  text?: string;
+}
+
+type Done = Promise<{ ok: true }>;
+type Existing = 'replace' | 'keepBoth';
+
+/** The server calls the Explorer makes; the app builds it from its api and passes it to `explorerView`. */
+export interface ExplorerClient {
+  projects: () => Promise<Project[]>;
+  createProject: (input: Record<string, unknown>) => Promise<Project>;
+  updateProject: (id: string, input: Record<string, unknown>) => Promise<Project>;
+  deleteProject: (id: string) => Done;
+  fsList: (root: string, path: string, view?: { exclude?: string[]; sort?: string; all?: boolean }) => Promise<FsEntry[]>;
+  fsArchive: (root: string, path: string) => Promise<ArchiveContent>;
+  fsSqlite: (root: string, path: string, table?: string, offset?: number) => Promise<SqliteContent>;
+  fsStat: (root: string, path: string) => Promise<FsEntry>;
+  fsRead: (root: string, path: string) => Promise<FsRead>;
+  fsInfo: (root: string, path: string) => Promise<FsInfo>;
+  fsDu: (root: string, path: string, onProgress: (p: FsDuProgress) => void, signal?: AbortSignal) => Promise<FsDuProgress>;
+  fsHash: (root: string, path: string) => Promise<FsHash>;
+  fsExtract: (root: string, path: string, to: string) => Promise<FsExtractResult>;
+  fsCompress: (root: string, paths: string[], name: string, format: FsArchiveFormat) => Promise<FsCompressResult>;
+  fsCreate: (root: string, path: string, kind: 'file' | 'dir') => Promise<FsEntry>;
+  fsTail: (root: string, path: string, from?: number, max?: number) => Promise<TailChunk>;
+  fsSaveRange: (root: string, path: string, from: number) => Promise<{ path: string | null; bytes?: number }>;
+  fsWrite: (root: string, path: string, text: string, expectedMtime: number | undefined, encoding?: TextEncoding, unlock?: boolean) => Promise<FsEntry>;
+  fsRename: (root: string, path: string, name: string) => Promise<FsEntry>;
+  fsMove: (root: string, from: string, to: string, onExisting?: Existing) => Promise<FsEntry>;
+  fsCopy: (root: string, from: string, to: string) => Promise<FsEntry>;
+  fsUpload: (root: string, path: string, body: Blob, onExisting?: Existing) => Promise<FsEntry>;
+  fsViewTicket: (root: string, path: string) => Promise<{ url: string }>;
+  fsDownloadTicket: (root: string, path: string) => Promise<{ ticket: string; name: string }>;
+  fsDelete: (root: string, paths: string[]) => Done;
+  fsReveal: (root: string, path: string) => Done;
+  fsOpen: (root: string, path: string) => Done;
+  editors: () => Promise<EditorInfo[]>;
+  openInEditor: (editor: EditorInfo['id'], root: string, path?: string) => Done;
+  gitStatus: (root: string) => Promise<GitStatus>;
+  httpSave: (id: string) => Promise<{ path: string | null; bytes?: number }>;
+}
+
+/** Everything the Explorer calls: its own routes plus the SQL and HTTP clients of the capability packages. */
+export interface ExplorerClients {
+  explorer: ExplorerClient;
+  sql: SqlClient;
+  http: HttpClient;
+}
+
+let current: ExplorerClients | undefined;
+
+/** Set by `explorerView`; the screen and its panels call the server through these. */
+export const bindExplorerClient = (clients: ExplorerClients) => {
+  current = clients;
+};
+
+const bound = <T extends object>(pick: (c: ExplorerClients) => T, name: string): T =>
+  new Proxy({} as T, {
+    get(_, key) {
+      if (!current) throw new Error(`The ${name} client is not bound`);
+      return pick(current)[key as keyof T];
+    },
+  });
+
+export const explorerApi: ExplorerClient = bound((c) => c.explorer, 'Explorer');
+export const sqlClient: SqlClient = bound((c) => c.sql, 'SQL');
+export const httpClient: HttpClient = bound((c) => c.http, 'HTTP');

package/src/commands.ts

@@ -0,0 +1,29 @@
+import { type CommandDef, explorerCommands, tabCommands } from '@deckbuilderkit/ui';
+import { t } from './i18n';
+
+export function explorerViewCommands(): CommandDef[] {
+  return [
+    ...tabCommands('explorer'),
+    ...explorerCommands('explorer'),
+    { id: 'explorer.find', scope: 'explorer', label: t('keys.explorer.find'), keys: ['Ctrl+F'], inInput: true },
+    { id: 'explorer.search', scope: 'explorer', label: t('keys.explorer.search'), keys: ['Ctrl+Shift+F'], inInput: true },
+    { id: 'explorer.revealInTree', scope: 'explorer', label: t('keys.explorer.revealInTree'), keys: ['Ctrl+K Ctrl+E'] },
+    { id: 'explorer.collapseAll', scope: 'explorer', label: t('keys.explorer.collapseAll'), keys: ['Ctrl+K Ctrl+Shift+0'] },
+    { id: 'explorer.breadcrumbs', scope: 'explorer', label: t('keys.explorer.breadcrumbs'), keys: ['Ctrl+Shift+.', 'Ctrl+Shift+>'], inInput: true },
+    { id: 'explorer.zen', scope: 'explorer', label: t('keys.explorer.zen'), keys: ['Ctrl+K Z'], inInput: true },
+    { id: 'explorer.sql.problems', scope: 'explorer', label: t('keys.explorer.sqlProblems'), keys: ['Ctrl+Shift+M'], inInput: true },
+    { id: 'explorer.file.save', scope: 'explorer', label: t('keys.file.save'), keys: ['Ctrl+S'], inInput: true },
+    { id: 'explorer.file.wrap', scope: 'explorer', label: t('keys.file.wrap'), keys: ['Alt+Z'], inInput: true },
+    { id: 'explorer.sql.format', scope: 'explorer', label: t('keys.explorer.sqlFormat'), keys: ['Alt+Shift+F'], inInput: true },
+    ...(['live', 'edit', 'split', 'preview'] as const).map((mode): CommandDef => ({
+      id: `explorer.markdown.${mode}`, scope: 'explorer', label: t(`keys.markdown.${mode}`), inInput: true,
+      keys: mode === 'preview' ? ['Ctrl+Shift+V'] : mode === 'split' ? ['Ctrl+Alt+V'] : [],
+    })),
+  ];
+}
+
+export function explorerCommandById(id: string): CommandDef {
+  const def = explorerViewCommands().find((d) => d.id === id);
+  if (!def) throw new Error(`Unknown command ${id}`);
+  return def;
+}

package/src/explorer/CompareTab.tsx

@@ -0,0 +1,52 @@
+import { lazy, Suspense, useState } from 'react';
+import { type DiffMode, langOfFile } from '@deckbuilderkit/editor';
+import { ErrorBanner, PanelBanner, PanelLoading, PanelNotice, relPath, useAsync } from '@deckbuilderkit/ui';
+import { explorerApi as api } from '../client';
+import { t } from '../i18n';
+
+const DiffView = lazy(() => import('@deckbuilderkit/editor').then((m) => ({ default: m.DiffView })));
+
+export interface CompareSide {
+  project: string;
+  path: string;
+}
+
+export interface CompareTabProps {
+  left: CompareSide;
+  right: CompareSide;
+  /** Initial layout, from the git.diffMode setting. */
+  mode: DiffMode;
+}
+
+/** Two text files side by side (or inline); binary files get a message, truncated ones a note. */
+export function CompareTab({ left, right, mode: initialMode }: CompareTabProps) {
+  const [mode, setMode] = useState<DiffMode>(initialMode);
+  const sides = useAsync(() => Promise.all([api.fsRead(left.project, left.path), api.fsRead(right.project, right.path)]), [left.project, left.path, right.project, right.path]);
+  if (sides.error) return <ErrorBanner error={sides.error} onRetry={sides.reload} />;
+  if (!sides.data) return <PanelLoading />;
+  const [a, b] = sides.data;
+  if (!('text' in a) || !('text' in b)) {
+    const path = !('text' in a) ? left.path : right.path;
+    return <PanelNotice icon="file" title={path} message={t('explorer.compareBinary')} />;
+  }
+  const lang = langOfFile(relPath.basename(right.path)) ?? langOfFile(relPath.basename(left.path));
+  const diff = (
+    <Suspense fallback={<PanelLoading />}>
+      <DiffView
+        original={a.text}
+        modified={b.text}
+        lang={lang}
+        mode={mode}
+        onModeChange={setMode}
+        modeLabels={{ split: t('git.split'), inline: t('git.inline') }}
+      />
+    </Suspense>
+  );
+  if (!a.truncated && !b.truncated) return diff;
+  return (
+    <div className="git-conflict">
+      <PanelBanner tone="warn">{t('explorer.compareTruncated')}</PanelBanner>
+      <div className="git-conflict-body">{diff}</div>
+    </div>
+  );
+}

package/src/explorer/CurlPanel.tsx

@@ -0,0 +1,144 @@
+import { type ReactNode, useEffect, useRef, useState } from 'react';
+import { type CodeEditorHandle, type CodeEditorProps, curlAt, draftToSpec, type HttpHeaderDraft, type ImportedRequest, parseCurl, ResponseView, warningText } from '@deckbuilderkit/editor';
+import type { HttpResponseInfo } from '@deckbuilderkit/server-core/protocol';
+import { type ApiError, errorOf, Icon, PanelBanner, SplitView, type TabAction, useViewLink } from '@deckbuilderkit/ui';
+import { explorerApi as api } from '../client';
+import { httpClient } from '../client';
+import { t } from '../i18n';
+import type { ExplorerSqlProps } from './SqlPanel';
+
+const DEFAULT_SPLIT: [number, number] = [0.6, 0.4];
+
+interface Options {
+  name: string;
+  /** The text editor shows (not a preview). */
+  active: boolean;
+  draft: string;
+  /** Shares the SQL props: split size and `go`. */
+  sql?: ExplorerSqlProps;
+}
+
+const withAuth = (request: ImportedRequest): ImportedRequest['draft'] => {
+  const { draft, auth } = request;
+  if (!auth || draft.headers.some((h) => h.enabled && h.name.trim().toLowerCase() === 'authorization')) return draft;
+  const header: HttpHeaderDraft = { name: 'Authorization', value: auth, enabled: true };
+  return { ...draft, headers: [...draft.headers, header] };
+};
+
+/**
+ * Curl commands of an Explorer `.curl` file: Run (selection or the command at the cursor) with the response in a panel below the editor,
+ * and Open in REST. Only `.curl` files; the rest get nothing.
+ */
+export function useExplorerCurl({ name, active, draft, sql }: Options) {
+  const enabled = !!sql && active && /\.curl$/i.test(name);
+  const toRest = useViewLink<ImportedRequest>('rest');
+  const editor = useRef<CodeEditorHandle>(null);
+  const abort = useRef<AbortController>();
+  const [open, setOpen] = useState(false);
+  const [sending, setSending] = useState(false);
+  const [response, setResponse] = useState<HttpResponseInfo>();
+  const [error, setError] = useState<ApiError>();
+  const [notice, setNotice] = useState<{ tone: 'warn' | 'err'; text: string }>();
+
+  useEffect(() => () => abort.current?.abort(), []);
+
+  const resolve = (): ImportedRequest | undefined => {
+    const handle = editor.current;
+    const selected = handle?.getSelectionText() ?? '';
+    const source = selected.trim() !== '' ? selected : curlAt(draft, handle?.view?.state.selection.main.head ?? 0)?.text;
+    try {
+      if (source === undefined) throw new Error('notCurl');
+      const request = parseCurl(source);
+      setNotice(request.warnings.length > 0 ? { tone: 'warn', text: request.warnings.map(warningText).join(' ') } : undefined);
+      return request;
+    } catch (err) {
+      setNotice({ tone: 'err', text: err instanceof Error && err.message === 'notCurl' ? t('explorer.curl.notCurl') : errorOf(err).message });
+      setOpen(true);
+      return undefined;
+    }
+  };
+
+  const run = async () => {
+    if (sending) return;
+    const request = resolve();
+    if (!request) return;
+    const controller = new AbortController();
+    abort.current = controller;
+    setOpen(true);
+    setSending(true);
+    setError(undefined);
+    setResponse(undefined);
+    try {
+      const result = await httpClient.send(draftToSpec(withAuth(request)), undefined, controller.signal, { environment: sql?.restEnvironment || undefined });
+      if (!controller.signal.aborted) setResponse(result);
+    } catch (err) {
+      if (!controller.signal.aborted) setError(errorOf(err));
+    } finally {
+      if (abort.current === controller) {
+        abort.current = undefined;
+        setSending(false);
+      }
+    }
+  };
+
+  const cancel = () => {
+    abort.current?.abort();
+    abort.current = undefined;
+    setSending(false);
+  };
+
+  const saveResponse = async (info: HttpResponseInfo) => {
+    try {
+      await api.httpSave(info.id);
+    } catch (err) {
+      setNotice({ tone: 'err', text: errorOf(err).message });
+    }
+  };
+
+  const openInRest = () => {
+    if (!sql || !toRest) return;
+    const request = resolve();
+    if (request) toRest(request);
+  };
+
+  const actions: TabAction[] = enabled ? [
+    { id: 'curl.run', group: 'primary', icon: 'play', label: t('explorer.shared.run'), hint: 'Ctrl+Enter', disabled: sending, run: () => void run() },
+    ...(toRest ? [{ id: 'curl.openRest', group: 'primary' as const, icon: 'send' as const, label: t('explorer.curl.openRest'), run: openInRest }] : []),
+  ] : [];
+
+  const editorProps: Pick<CodeEditorProps, 'onRun'> = enabled ? { onRun: () => void run() } : {};
+
+  /** `editorNode` alone, or for `.curl` files with the response panel below. */
+  const layout = (editorNode: ReactNode): ReactNode => {
+    if (!enabled || !sql) return editorNode;
+    const sizes = open ? (sql.sizes ?? DEFAULT_SPLIT) : [1];
+    return (
+      <SplitView
+        direction="column"
+        sizes={sizes}
+        defaultSizes={open ? DEFAULT_SPLIT : undefined}
+        onResize={(s) => s.length === 2 && sql.onSizesChange([s[0], s[1]])}
+      >
+        <div key="editor" className="ex-pane">
+          <div className="xp-sql-editor">{editorNode}</div>
+        </div>
+        {open && (
+          <div key="response" className="ex-pane">
+            <div className="xp-bar">
+              <Icon name="send" size={12} />
+              <span className="spacer" />
+              {sending && <button className="btn btn-sm" onClick={cancel}>{t('explorer.shared.cancel')}</button>}
+              <button className="btn btn-ghost btn-sm btn-icon" onClick={() => setOpen(false)} title={t('explorer.curl.close')} aria-label={t('explorer.curl.close')}>
+                <Icon name="close" />
+              </button>
+            </div>
+            {notice && <PanelBanner tone={notice.tone}>{notice.text}</PanelBanner>}
+            <ResponseView response={response} error={error} sending={sending} onSave={response ? () => void saveResponse(response) : undefined} />
+          </div>
+        )}
+      </SplitView>
+    );
+  };
+
+  return { enabled, editor, editorProps, actions, layout };
+}

package/src/explorer/DetailsTab.tsx

@@ -0,0 +1,284 @@
+import { useCallback, useEffect, useMemo, useState, type KeyboardEvent } from 'react';
+import {
+  type BreadcrumbEntry,
+  Breadcrumbs,
+  ContextMenu,
+  type ContextMenuItem,
+  DataTable,
+  type DataTableColumn,
+  ErrorBanner,
+  errorMessage,
+  errorOf,
+  fileIconOf,
+  folderIconOf,
+  formatBytes,
+  Icon,
+  relPath,
+  type SortState,
+  useDialogs,
+  useToast,
+  type ApiError,
+} from '@deckbuilderkit/ui';
+import type { FsArchiveFormat } from '@deckbuilderkit/server-core/protocol';
+import { multiDeleteEnabled } from '../options';
+import { explorerApi as api, type FsEntry, type Project } from '../client';
+import { fullPath } from '../explorer-paths';
+import { t } from '../i18n';
+import { useCopyPath } from './copy-path';
+import { commonParent, compressPaths } from './fs-actions';
+
+interface Row {
+  name: string;
+  path: string;
+  kind: FsEntry['kind'];
+  dir: boolean;
+  size: number;
+  mtime: number;
+  outside?: true;
+  excluded?: true;
+}
+
+const MAX_LISTED = 10;
+const keyOf = (r: Row) => r.path;
+const foldersFirst = (r: Row) => (r.dir ? 0 : 1);
+
+export interface DetailsTabProps {
+  project: Project;
+  /** The folder shown, relative to the project ('' = the root). */
+  path: string;
+  /** The tree's exclude globs; `showHidden` lists the excluded entries too (dimmed). */
+  exclude: string[];
+  showHidden?: boolean;
+  sort: SortState | null;
+  onSortChange(sort: SortState | null): void;
+  onNavigate(path: string): void;
+  onOpenFile(path: string): void;
+  onDeleted(project: string, path: string): void;
+  dirtyCount?(project: string, paths: string[]): number;
+  confirmDelete?: boolean;
+}
+
+const typeOf = (row: Row) => {
+  if (row.dir) return t('explorer.details.folder');
+  if (row.kind === 'link') return t('explorer.details.link');
+  const dot = row.name.lastIndexOf('.');
+  return dot > 0 ? t('explorer.details.fileType', { ext: row.name.slice(dot + 1).toUpperCase() }) : t('explorer.details.file');
+};
+
+/** A folder as a sortable table: folders first, Enter opens, Backspace or Alt+Up goes to the parent. */
+export function DetailsTab({ project, path, exclude, showHidden = false, sort, onSortChange, onNavigate, onOpenFile, onDeleted, dirtyCount, confirmDelete = true }: DetailsTabProps) {
+  const [rows, setRows] = useState<Row[]>();
+  const [error, setError] = useState<ApiError>();
+  const [tick, setTick] = useState(0);
+  const [selection, setSelection] = useState<string[]>([]);
+  const [menu, setMenu] = useState<{ at: { x: number; y: number }; rows: Row[] }>();
+  const { confirm, element } = useDialogs();
+  const toast = useToast();
+  const copyPath = useCopyPath();
+  const reload = () => setTick((n) => n + 1);
+
+  useEffect(() => {
+    let live = true;
+    setError(undefined);
+    api.fsList(project.id, path, { exclude, all: showHidden }).then(
+      (entries) => {
+        if (!live) return;
+        setRows(entries.map((e) => ({
+          name: e.name,
+          path: relPath.join(path, e.name),
+          kind: e.kind,
+          dir: e.kind === 'dir' || e.target === 'dir',
+          size: e.size,
+          mtime: e.mtime,
+          outside: e.outside,
+          excluded: e.excluded,
+        })));
+      },
+      (err) => live && setError(errorOf(err)),
+    );
+    return () => {
+      live = false;
+    };
+  }, [project.id, path, exclude.join('\n'), showHidden, tick]);
+
+  useEffect(() => setSelection([]), [project.id, path]);
+
+  const run = async (job: () => Promise<void>) => {
+    try {
+      await job();
+    } catch (err) {
+      toast({ message: errorMessage(errorOf(err)), kind: 'error' });
+    }
+  };
+
+  const columns = useMemo<DataTableColumn<Row>[]>(
+    () => [
+      {
+        id: 'name',
+        label: t('explorer.details.name'),
+        width: 320,
+        value: (r) => r.name,
+        render: (r) => {
+          const file = fileIconOf(r.name);
+          const icon = r.dir ? (r.kind === 'link' ? 'folder-link' : folderIconOf(r.name)) : file.icon;
+          return (
+            <span className={`xp-details-name${r.excluded ? ' dim' : ''}`}>
+              <span className={!r.dir && file.tone ? `tone-${file.tone}` : undefined}><Icon name={icon} size={14} /></span>
+              <span className="xp-details-label">{r.name}</span>
+            </span>
+          );
+        },
+      },
+      { id: 'size', label: t('explorer.details.size'), width: 100, align: 'right', value: (r) => (r.dir ? null : r.size), render: (r) => (r.dir ? '' : formatBytes(r.size)) },
+      { id: 'mtime', label: t('explorer.details.modified'), width: 180, value: (r) => r.mtime, render: (r) => new Date(r.mtime).toLocaleString(), copy: (r) => new Date(r.mtime).toLocaleString() },
+      { id: 'type', label: t('explorer.details.type'), width: 140, value: typeOf },
+    ],
+    [],
+  );
+
+  const open = (row: Row) => (row.dir ? (!row.outside && onNavigate(row.path)) : onOpenFile(row.path));
+  const up = () => path !== '' && onNavigate(relPath.dirname(path));
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Backspace' || (e.altKey && e.key === 'ArrowUp')) {
+      e.preventDefault();
+      up();
+    }
+  };
+
+  const compress = (targets: Row[], format: FsArchiveFormat) =>
+    run(async () => {
+      const done = await compressPaths(project, targets.map((r) => r.path), format);
+      if (!done) return;
+      reload();
+      toast({ message: done.message });
+    });
+
+  const remove = (targets: Row[]) =>
+    run(async () => {
+      if (!targets.length) return;
+      if (targets.length > 1 && !multiDeleteEnabled()) {
+        toast({ message: t('explorer.deleteOne') });
+        return;
+      }
+      const dirty = dirtyCount?.(project.id, targets.map((r) => r.path)) ?? 0;
+      const ok = !confirmDelete && dirty === 0 ? true : await confirm({
+        title: t('explorer.deleteTitle'),
+        body: (
+          <>
+            <p>{targets.length === 1 ? t('explorer.deleteBody', { name: targets[0]!.name }) : t('explorer.deleteMany', { count: targets.length })}</p>
+            {targets.length > 1 && (
+              <ul>
+                {targets.slice(0, MAX_LISTED).map((r) => <li key={r.path}>{r.name}</li>)}
+                {targets.length > MAX_LISTED && <li>{t('explorer.andMore', { count: targets.length - MAX_LISTED })}</li>}
+              </ul>
+            )}
+            {dirty > 0 && <p>{t('explorer.dirtyDelete', { count: dirty })}</p>}
+          </>
+        ),
+        okLabel: t('explorer.delete'),
+        danger: true,
+      });
+      if (!ok) return;
+      try {
+        for (const r of targets) {
+          await api.fsDelete(project.id, [r.path]);
+          onDeleted(project.id, r.path);
+        }
+      } finally {
+        setSelection([]);
+        reload();
+      }
+    });
+
+  const menuItems = (picked: Row[]): Array<ContextMenuItem | 'sep'> => {
+    const one = picked.length === 1 ? picked[0]! : undefined;
+    const actionable = picked.filter((r) => !r.outside);
+    const canCompress = actionable.length === picked.length && commonParent(picked) !== undefined;
+    return [
+      ...(one ? [{ id: 'open', label: t('explorer.open'), icon: one.dir ? ('folder' as const) : ('file' as const), run: () => open(one), disabled: one.dir && !!one.outside }, 'sep' as const] : []),
+      ...(canCompress
+        ? [
+            { id: 'compressZip', label: t('explorer.compressZip'), icon: 'archive' as const, run: () => void compress(picked, 'zip') },
+            { id: 'compress7z', label: t('explorer.compress7z'), run: () => void compress(picked, '7z') },
+          ]
+        : []),
+      {
+        id: 'delete',
+        label: t('explorer.delete'),
+        icon: 'trash',
+        hint: picked.length > 1 && !multiDeleteEnabled() ? t('explorer.deleteOne') : 'Del',
+        danger: true,
+        disabled: actionable.length !== picked.length || (picked.length > 1 && !multiDeleteEnabled()),
+        run: () => void remove(picked),
+      },
+      'sep',
+      ...(one
+        ? [
+            { id: 'copyFullPath', label: t('explorer.copyFullPath'), icon: 'copy' as const, run: () => copyPath(fullPath(project.path, one.path)) },
+            { id: 'copyPath', label: t('explorer.copyPath'), icon: 'copy' as const, run: () => copyPath(one.path) },
+          ]
+        : []),
+    ];
+  };
+
+  const listDir = useCallback(
+    async (dir: string): Promise<BreadcrumbEntry[]> =>
+      (await api.fsList(project.id, dir, { exclude })).map((e) => ({
+        name: e.name,
+        kind: e.kind === 'dir' || e.target === 'dir' ? 'dir' : 'file',
+        path: relPath.join(dir, e.name),
+      })),
+    [project.id, exclude.join('\n')],
+  );
+
+  const picked = (rows ?? []).filter((r) => selection.includes(r.path));
+
+  return (
+    <div
+      className="xp-details"
+      onKeyDown={(e) => {
+        if (e.key === 'Delete' && picked.length && !menu) {
+          e.preventDefault();
+          void remove(picked);
+        }
+      }}
+    >
+      {element}
+      <div className="xp-bar">
+        <button type="button" className="btn btn-ghost btn-sm btn-icon" onClick={up} disabled={path === ''} title={t('explorer.details.up')} aria-label={t('explorer.details.up')}>
+          <Icon name="chevron-up" />
+        </button>
+        <Breadcrumbs
+          root={project.name}
+          path={path}
+          icon={<Icon name={folderIconOf(relPath.basename(path))} size={14} />}
+          list={listDir}
+          onPick={(e) => (e.kind === 'dir' ? onNavigate(e.path) : onOpenFile(e.path))}
+          title={`${project.name}/${path}`}
+        />
+      </div>
+      {error && <ErrorBanner error={error} onRetry={reload} compact />}
+      <div className="xp-details-body">
+        <DataTable
+          columns={columns}
+          rows={rows ?? []}
+          rowKey={keyOf}
+          sort={sort}
+          onSortChange={onSortChange}
+          selection={selection}
+          onSelectionChange={setSelection}
+          groupOf={foldersFirst}
+          onRowOpen={open}
+          onKeyDown={onKeyDown}
+          onRowContextMenu={(row, e) => {
+            const keys = selection.includes(row.path) ? selection : [row.path];
+            setMenu({ at: { x: e.clientX, y: e.clientY }, rows: (rows ?? []).filter((r) => keys.includes(r.path)) });
+          }}
+          empty={rows ? t('explorer.details.empty') : ''}
+        />
+      </div>
+      {menu && <ContextMenu at={menu.at} items={menuItems(menu.rows)} onClose={() => setMenu(undefined)} />}
+    </div>
+  );
+}