Release v0.1.4

2026-07-02 14:59:52 +02:00
parent a7895ad394
commit ee5b06b1e7
18 changed files with 1953 additions and 139 deletions
--- a/webui/package.json
+++ b/webui/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@govoplan/files-webui",
-  "version": "0.1.2",
+  "version": "0.1.4",
  "private": true,
  "type": "module",
  "main": "src/index.ts",
@@ -21,7 +21,7 @@
    "react-dom": "^19.0.0",
    "react-router-dom": "^7.1.1",
    "lucide-react": "^0.555.0",
-    "@govoplan/core-webui": "^0.1.2"
+    "@govoplan/core-webui": "^0.1.4"
  },
  "peerDependenciesMeta": {
    "@govoplan/core-webui": {
--- a/webui/src/api/files.ts
+++ b/webui/src/api/files.ts
@@ -1,4 +1,4 @@
-import { ApiError, apiFetch, apiUrl, authHeaders, csrfToken, type ApiSettings } from "@govoplan/core-webui";
+import { ApiError, apiFetch, apiUrl, authHeaders, csrfToken, type ApiSettings, type FilesManagedFileLinkTarget } from "@govoplan/core-webui";

 export type FileSpace = {
  id: string;
@@ -181,13 +181,17 @@ export function bulkDeleteFiles(settings: ApiSettings, fileIds: string[]): Promi

 export type FileBulkShareResponse = { shares: FileShare[]; shared_count: number };

-export function shareFilesWithCampaign(settings: ApiSettings, fileIds: string[], campaignId: string): Promise<FileBulkShareResponse> {
+export function shareFilesWithTarget(settings: ApiSettings, fileIds: string[], target: FilesManagedFileLinkTarget): Promise<FileBulkShareResponse> {
  return apiFetch<FileBulkShareResponse>(settings, "/api/v1/files/bulk-shares", {
    method: "POST",
-    body: JSON.stringify({ file_ids: fileIds, target_type: "campaign", target_id: campaignId, permission: "read" })
+    body: JSON.stringify({ file_ids: fileIds, target_type: target.type, target_id: target.id, permission: target.permission ?? "read" })
  });
 }

+export function shareFilesWithCampaign(settings: ApiSettings, fileIds: string[], campaignId: string): Promise<FileBulkShareResponse> {
+  return shareFilesWithTarget(settings, fileIds, { type: "campaign", id: campaignId, label: "campaign" });
+}
+
 export async function shareFileWithCampaign(settings: ApiSettings, fileId: string, campaignId: string): Promise<FileShare> {
  const response = await shareFilesWithCampaign(settings, [fileId], campaignId);
  const share = response.shares[0];
--- a/webui/src/features/files/FilesPage.tsx
+++ b/webui/src/features/files/FilesPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState, type DragEvent as ReactDragEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent } from "react";
+import { useEffect, useMemo, useRef, useState, type DragEvent as ReactDragEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent } from "react";
 import { ChevronRight, Copy, Download, File, Folder, Home, Link2, MoveRight, Plus, Search, Trash2, UploadCloud } from "lucide-react";
 import {
  Button,
@@ -78,6 +78,9 @@ import { useFileDragDropState } from "./hooks/useFileDragDropState";

 type UploadPhase = "idle" | "uploading" | "unpacking" | "finalizing";

+const DEFAULT_FILE_LIST_ROW_HEIGHT = 58;
+const FILE_LIST_OVERSCAN_ROWS = 8;
+
 export default function FilesPage({ settings, auth }: { settings: ApiSettings; auth: AuthInfo }) {
  const canDownload = hasScope(auth, "files:download");
  const canUpload = hasScope(auth, "files:upload");
@@ -141,6 +144,28 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
    const entries = buildExplorerEntries(visibleFiles, folders, currentFolder, searchActive);
    return sortExplorerEntries(entries, sortColumn, sortDirection);
  }, [visibleFiles, folders, currentFolder, searchActive, sortColumn, sortDirection]);
+  const fileListViewportRef = useRef<HTMLDivElement | null>(null);
+  const fileListMeasureRowRef = useRef<HTMLDivElement | null>(null);
+  const [fileListViewportHeight, setFileListViewportHeight] = useState(0);
+  const [fileListScrollTop, setFileListScrollTop] = useState(0);
+  const [fileListRowHeight, setFileListRowHeight] = useState(DEFAULT_FILE_LIST_ROW_HEIGHT);
+  const virtualExplorerRows = useMemo(() => {
+    const rowHeight = Math.max(1, fileListRowHeight);
+    const entryScrollTop = Math.max(0, fileListScrollTop - rowHeight);
+    const viewportHeight = Math.max(fileListViewportHeight, rowHeight * FILE_LIST_OVERSCAN_ROWS);
+    const startIndex = Math.max(0, Math.floor(entryScrollTop / rowHeight) - FILE_LIST_OVERSCAN_ROWS);
+    const endIndex = Math.min(
+      explorerEntries.length,
+      Math.ceil((entryScrollTop + viewportHeight) / rowHeight) + FILE_LIST_OVERSCAN_ROWS
+    );
+
+    return {
+      startIndex,
+      topSpacerHeight: startIndex * rowHeight,
+      bottomSpacerHeight: Math.max(0, (explorerEntries.length - endIndex) * rowHeight),
+      entries: explorerEntries.slice(startIndex, endIndex)
+    };
+  }, [explorerEntries, fileListRowHeight, fileListScrollTop, fileListViewportHeight]);
  const visibleEntryKeys = useMemo(() => explorerEntries.map(entrySelectionKey), [explorerEntries]);
  const {
    selectedFileIds,
@@ -172,6 +197,47 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
  const activeDialogSpace = activeDialogTarget ? spaces.find((space) => space.id === activeDialogTarget.spaceId) ?? null : null;
  const downloadLabel = selectedDownloadFileIds.length > 1 ? "Download ZIP" : "Download";

+  useEffect(() => {
+    const viewport = fileListViewportRef.current;
+    if (!viewport) return undefined;
+
+    const updateViewportHeight = () => {
+      setFileListViewportHeight(viewport.clientHeight);
+      setFileListScrollTop(viewport.scrollTop);
+    };
+
+    updateViewportHeight();
+    if (typeof ResizeObserver === "undefined") return undefined;
+
+    const observer = new ResizeObserver(updateViewportHeight);
+    observer.observe(viewport);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const row = fileListMeasureRowRef.current;
+    if (!row) return undefined;
+
+    const updateRowHeight = () => {
+      const measuredHeight = row.getBoundingClientRect().height;
+      if (measuredHeight > 0) setFileListRowHeight(Math.round(measuredHeight));
+    };
+
+    updateRowHeight();
+    if (typeof ResizeObserver === "undefined") return undefined;
+
+    const observer = new ResizeObserver(updateRowHeight);
+    observer.observe(row);
+    return () => observer.disconnect();
+  }, [activeSpaceId, currentFolder]);
+
+  useEffect(() => {
+    const viewport = fileListViewportRef.current;
+    if (!viewport) return;
+    viewport.scrollTop = 0;
+    setFileListScrollTop(0);
+  }, [activeSpaceId, currentFolder, searchActive, searchResults, sortColumn, sortDirection]);
+
  async function loadSpaces() {
    setBusy(true);
    setError("");
@@ -1161,6 +1227,75 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
      : undefined;
  const visibleUploadProgress = uploadPhase === "unpacking" ? null : uploadProgress;

+  function renderExplorerEntry(entry: ExplorerEntry, rowIndex: number) {
+    const entryDropTarget = entry.kind === "folder" && activeSpace ? { spaceId: activeSpace.id, folderPath: entry.path } : null;
+    const isDropTarget = entryDropTarget ? dropTargetKey === dropTargetId(entryDropTarget) : false;
+
+    return entry.kind === "folder" ? (
+      <div
+        key={entry.id}
+        className={`file-list-row folder-row ${isEntrySelected(entry) ? "is-selected" : ""} ${isDropTarget ? "is-drop-target" : ""}`}
+        role="row"
+        aria-rowindex={rowIndex}
+        tabIndex={0}
+        draggable
+        onDragStart={(event) => handleInternalDragStart(entry, event)}
+        onDragEnd={() => { setInternalDrag(null); clearDropState(); }}
+        onDragOver={(event) => entryDropTarget && handleDropTargetDragOver(event, entryDropTarget)}
+        onDragLeave={clearDropState}
+        onDrop={(event) => entryDropTarget && void handleDropOnTarget(event, entryDropTarget)}
+        onMouseDown={preventTextSelectionOnShift}
+        onClick={(event) => handleEntrySelection(entry, event)}
+        onDoubleClick={() => { if (!busy && activeSpace) openFolder(activeSpace.id, entry.path); }}
+        onContextMenu={(event) => openContextMenu(event, "folder", entry)}
+        onKeyDown={(event) => handleEntryKeyDown(entry, event)}
+      >
+        <div className="file-list-name-cell">
+          <div className="file-list-name">
+            <Folder className="file-row-icon" size={20} aria-hidden="true" />
+            <span><strong>{entry.name}</strong><small>{folderContentLabel(entry)}</small></span>
+          </div>
+        </div>
+        <span>{formatBytes(entry.totalSize)}</span>
+        <span className="file-row-tail"><span>{formatDate(entry.updatedAt)}</span></span>
+      </div>
+    ) : (
+      <div
+        key={entry.id}
+        className={`file-list-row file-row ${isEntrySelected(entry) ? "is-selected" : ""}`}
+        role="row"
+        aria-rowindex={rowIndex}
+        tabIndex={0}
+        draggable
+        onDragStart={(event) => handleInternalDragStart(entry, event)}
+        onDragEnd={() => { setInternalDrag(null); clearDropState(); }}
+        onMouseDown={preventTextSelectionOnShift}
+        onClick={(event) => handleEntrySelection(entry, event)}
+        onDoubleClick={() => { if (!busy) void downloadFile(settings, entry.file); }}
+        onContextMenu={(event) => openContextMenu(event, "file", entry)}
+        onKeyDown={(event) => handleEntryKeyDown(entry, event)}
+      >
+        <div className="file-list-name-cell">
+          <div className="file-list-name">
+            <File className="file-row-icon" size={20} aria-hidden="true" />
+            <span>
+              <strong>{searchActive ? entry.file.display_path : entry.file.filename}</strong>
+              <small
+                className={`file-linkage-status ${activeCampaignShareCount(entry.file) > 0 ? "is-linked" : ""}`}
+                title={campaignShareTitle(entry.file)}
+              >
+                {activeCampaignShareCount(entry.file) > 0 && <Link2 size={12} aria-hidden="true" />}
+                {campaignShareLabel(entry.file)}
+              </small>
+            </span>
+          </div>
+        </div>
+        <span>{formatBytes(entry.file.size_bytes)}</span>
+        <span className="file-row-tail"><span>{formatDate(entry.file.updated_at)}</span></span>
+      </div>
+    );
+  }
+
  return (
    <div className="workspace-data-page module-entry-page file-manager-page file-manager-fullscreen">
      {error && (
@@ -1258,20 +1393,24 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a

          <div
            className="file-list-drop-target"
+            ref={fileListViewportRef}
+            onScroll={(event) => setFileListScrollTop(event.currentTarget.scrollTop)}
            onContextMenu={(event) => openContextMenu(event, "empty")}
            onClick={(event) => {
              if (event.target === event.currentTarget) applySelectionKeys(new Set<EntrySelectionKey>());
            }}
          >
-            <div className="file-list-table" role="table" aria-label="Managed files">
+            <div className="file-list-table" role="table" aria-label="Managed files" aria-rowcount={explorerEntries.length + 1}>
              {(() => {
                const normalizedCurrentFolder = normalizeFolder(currentFolder);
                const canOpenParent = Boolean(normalizedCurrentFolder && activeSpace);
                const targetParentFolder = parentFolderPath(normalizedCurrentFolder);
                return (
                  <div
+                    ref={fileListMeasureRowRef}
                    className={`file-list-row folder-row file-parent-row ${canOpenParent ? "" : "is-disabled"}`}
                    role="row"
+                    aria-rowindex={1}
                    tabIndex={canOpenParent ? 0 : -1}
                    aria-disabled={!canOpenParent}
                    aria-label={canOpenParent ? `Open parent folder ${targetParentFolder || activeSpace?.label || "root"}` : "Already at the root folder"}
@@ -1301,71 +1440,13 @@ export default function FilesPage({ settings, auth }: { settings: ApiSettings; a
              {explorerEntries.length === 0 && (
                <div className="file-list-empty">This folder is empty. Use Upload or Create Folder to add content.</div>
              )}
-              {explorerEntries.map((entry) => {
-                const entryDropTarget = entry.kind === "folder" && activeSpace ? { spaceId: activeSpace.id, folderPath: entry.path } : null;
-                const isDropTarget = entryDropTarget ? dropTargetKey === dropTargetId(entryDropTarget) : false;
-                return entry.kind === "folder" ? (
-                  <div
-                    key={entry.id}
-                    className={`file-list-row folder-row ${isEntrySelected(entry) ? "is-selected" : ""} ${isDropTarget ? "is-drop-target" : ""}`}
-                    role="row"
-                    tabIndex={0}
-                    draggable
-                    onDragStart={(event) => handleInternalDragStart(entry, event)}
-                    onDragEnd={() => { setInternalDrag(null); clearDropState(); }}
-                    onDragOver={(event) => entryDropTarget && handleDropTargetDragOver(event, entryDropTarget)}
-                    onDragLeave={clearDropState}
-                    onDrop={(event) => entryDropTarget && void handleDropOnTarget(event, entryDropTarget)}
-                    onMouseDown={preventTextSelectionOnShift}
-                    onClick={(event) => handleEntrySelection(entry, event)}
-                    onDoubleClick={() => { if (!busy && activeSpace) openFolder(activeSpace.id, entry.path); }}
-                    onContextMenu={(event) => openContextMenu(event, "folder", entry)}
-                    onKeyDown={(event) => handleEntryKeyDown(entry, event)}
-                  >
-                    <div className="file-list-name-cell">
-                      <div className="file-list-name">
-                        <Folder className="file-row-icon" size={20} aria-hidden="true" />
-                        <span><strong>{entry.name}</strong><small>{folderContentLabel(entry)}</small></span>
-                      </div>
-                    </div>
-                    <span>{formatBytes(entry.totalSize)}</span>
-                    <span className="file-row-tail"><span>{formatDate(entry.updatedAt)}</span></span>
-                  </div>
-                ) : (
-                  <div
-                    key={entry.id}
-                    className={`file-list-row file-row ${isEntrySelected(entry) ? "is-selected" : ""}`}
-                    role="row"
-                    tabIndex={0}
-                    draggable
-                    onDragStart={(event) => handleInternalDragStart(entry, event)}
-                    onDragEnd={() => { setInternalDrag(null); clearDropState(); }}
-                    onMouseDown={preventTextSelectionOnShift}
-                    onClick={(event) => handleEntrySelection(entry, event)}
-                    onDoubleClick={() => { if (!busy) void downloadFile(settings, entry.file); }}
-                    onContextMenu={(event) => openContextMenu(event, "file", entry)}
-                    onKeyDown={(event) => handleEntryKeyDown(entry, event)}
-                  >
-                    <div className="file-list-name-cell">
-                      <div className="file-list-name">
-                        <File className="file-row-icon" size={20} aria-hidden="true" />
-                        <span>
-                          <strong>{searchActive ? entry.file.display_path : entry.file.filename}</strong>
-                          <small
-                            className={`file-linkage-status ${activeCampaignShareCount(entry.file) > 0 ? "is-linked" : ""}`}
-                            title={campaignShareTitle(entry.file)}
-                          >
-                            {activeCampaignShareCount(entry.file) > 0 && <Link2 size={12} aria-hidden="true" />}
-                            {campaignShareLabel(entry.file)}
-                          </small>
-                        </span>
-                      </div>
-                    </div>
-                    <span>{formatBytes(entry.file.size_bytes)}</span>
-                    <span className="file-row-tail"><span>{formatDate(entry.file.updated_at)}</span></span>
-                  </div>
-                );
-              })}
+              {virtualExplorerRows.topSpacerHeight > 0 && (
+                <div className="file-list-virtual-spacer" style={{ height: virtualExplorerRows.topSpacerHeight }} aria-hidden="true" />
+              )}
+              {virtualExplorerRows.entries.map((entry, index) => renderExplorerEntry(entry, virtualExplorerRows.startIndex + index + 2))}
+              {virtualExplorerRows.bottomSpacerHeight > 0 && (
+                <div className="file-list-virtual-spacer" style={{ height: virtualExplorerRows.bottomSpacerHeight }} aria-hidden="true" />
+              )}
            </div>
          </div>
        </section>
--- a/webui/src/features/files/components/ManagedFileChooser.tsx
+++ b/webui/src/features/files/components/ManagedFileChooser.tsx
--- a/webui/src/features/files/utils/fileManagerUtils.ts
+++ b/webui/src/features/files/utils/fileManagerUtils.ts
@@ -2,6 +2,13 @@ import { formatDateTime as formatPlatformDateTime } from "@govoplan/core-webui";
 import type { FileFolder, ManagedFile } from "../../../api/files";
 import type { DragSelectionState, EntrySelectionKey, ExplorerEntry, FileEntry, FolderEntry, FolderNode, SortColumn, SortDirection } from "../types";

+type FolderStats = {
+  directFiles: number;
+  childFolders: Set<string>;
+  totalSize: number;
+  updatedAt: string;
+};
+
 export function buildFolderTree(files: ManagedFile[], folders: FileFolder[]): FolderNode[] {
  const byPath = new Map<string, FolderNode>();
  const ensureNode = (path: string, persisted: boolean): FolderNode | null => {
@@ -71,21 +78,23 @@ export function buildExplorerEntries(files: ManagedFile[], folders: FileFolder[]
  const prefix = folder ? `${folder}/` : "";
  const folderMap = new Map<string, FolderEntry>();
  const directFiles: FileEntry[] = [];
+  const folderStats = buildFolderStats(files, folders);

  for (const persisted of folders) {
    const path = normalizeFolder(persisted.path);
    if (!path.startsWith(prefix) || path === folder) continue;
    const relative = prefix ? path.slice(prefix.length) : path;
    if (!relative || relative.includes("/")) continue;
+    const stats = folderStats.get(path);
    folderMap.set(path, {
      kind: "folder",
      id: `folder:${path}`,
      name: relative,
      path,
-      fileCount: 0,
-      folderCount: 0,
-      totalSize: 0,
-      updatedAt: persisted.updated_at,
+      fileCount: stats?.directFiles ?? 0,
+      folderCount: stats?.childFolders.size ?? 0,
+      totalSize: stats?.totalSize ?? 0,
+      updatedAt: latestTimestamp(persisted.updated_at, stats?.updatedAt),
      persisted: true
    });
  }
@@ -102,31 +111,22 @@ export function buildExplorerEntries(files: ManagedFile[], folders: FileFolder[]
    }
    const folderName = relativePath.slice(0, slashIndex);
    const folderPath = prefix ? `${folder}/${folderName}` : folderName;
-    const existing = folderMap.get(folderPath);
-    if (existing) {
-      existing.totalSize += file.size_bytes;
-      if (file.updated_at > existing.updatedAt) existing.updatedAt = file.updated_at;
-    } else {
+    if (!folderMap.has(folderPath)) {
+      const stats = folderStats.get(folderPath);
      folderMap.set(folderPath, {
        kind: "folder",
        id: `folder:${folderPath}`,
        name: folderName,
        path: folderPath,
-        fileCount: 0,
-        folderCount: 0,
-        totalSize: file.size_bytes,
-        updatedAt: file.updated_at,
+        fileCount: stats?.directFiles ?? 0,
+        folderCount: stats?.childFolders.size ?? 0,
+        totalSize: stats?.totalSize ?? file.size_bytes,
+        updatedAt: stats?.updatedAt || file.updated_at,
        persisted: false
      });
    }
  }

-  for (const entry of folderMap.values()) {
-    const counts = directFolderCounts(files, folders, entry.path);
-    entry.fileCount = counts.files;
-    entry.folderCount = counts.folders;
-  }
-
  return [...Array.from(folderMap.values()), ...directFiles];
 }

@@ -164,25 +164,55 @@ export function entryModifiedTime(entry: ExplorerEntry): number {
 }

 export function directFolderCounts(files: ManagedFile[], folders: FileFolder[], folderPath: string): { files: number; folders: number } {
-  const normalized = normalizeFolder(folderPath);
-  const prefix = normalized ? `${normalized}/` : "";
-  const directFiles = files.filter((file) => parentFolderPath(file.display_path) === normalized).length;
-  const childFolders = new Set<string>();
+  const stats = buildFolderStats(files, folders).get(normalizeFolder(folderPath));
+  return { files: stats?.directFiles ?? 0, folders: stats?.childFolders.size ?? 0 };
+}
+
+function buildFolderStats(files: ManagedFile[], folders: FileFolder[]): Map<string, FolderStats> {
+  const statsByPath = new Map<string, FolderStats>();
+  const ensureStats = (path: string): FolderStats => {
+    const normalized = normalizeFolder(path);
+    const existing = statsByPath.get(normalized);
+    if (existing) return existing;
+    const stats: FolderStats = { directFiles: 0, childFolders: new Set(), totalSize: 0, updatedAt: "" };
+    statsByPath.set(normalized, stats);
+    return stats;
+  };
+
  for (const folder of folders) {
    const path = normalizeFolder(folder.path);
-    if (!path.startsWith(prefix) || path === normalized) continue;
-    const relative = prefix ? path.slice(prefix.length) : path;
-    if (!relative) continue;
-    childFolders.add(relative.split("/")[0]);
+    if (!path) continue;
+    const parts = path.split("/");
+    const parentPath = normalizeFolder(parts.slice(0, -1).join("/"));
+    const name = parts[parts.length - 1];
+    if (name) ensureStats(parentPath).childFolders.add(name);
+    ensureStats(path);
  }
+
  for (const file of files) {
-    const path = normalizeFilePath(file.display_path);
-    if (!path.startsWith(prefix)) continue;
-    const relative = prefix ? path.slice(prefix.length) : path;
-    if (!relative || !relative.includes("/")) continue;
-    childFolders.add(relative.split("/")[0]);
+    const parts = normalizeFilePath(file.display_path || file.filename).split("/").filter(Boolean);
+    if (parts.length === 0) continue;
+    const directParentPath = normalizeFolder(parts.slice(0, -1).join("/"));
+    ensureStats(directParentPath).directFiles += 1;
+
+    for (let index = 0; index < parts.length - 1; index += 1) {
+      const folderPath = parts.slice(0, index + 1).join("/");
+      const stats = ensureStats(folderPath);
+      stats.totalSize += file.size_bytes;
+      stats.updatedAt = latestTimestamp(stats.updatedAt, file.updated_at);
+
+      const parentPath = normalizeFolder(parts.slice(0, index).join("/"));
+      ensureStats(parentPath).childFolders.add(parts[index]);
+    }
  }
-  return { files: directFiles, folders: childFolders.size };
+
+  return statsByPath;
+}
+
+function latestTimestamp(current: string, candidate?: string): string {
+  if (!candidate) return current;
+  if (!current) return candidate;
+  return candidate > current ? candidate : current;
 }

 export function folderContentLabel(entry: FolderEntry): string {
@@ -209,13 +239,14 @@ export function buildFolderEntryFromSources(files: ManagedFile[], folders: FileF
  const sortedDates = childFiles.map((file) => file.updated_at).sort();
  const latestFileDate = sortedDates.length > 0 ? sortedDates[sortedDates.length - 1] : undefined;
  const updatedAt = latestFileDate || persistedFolder?.updated_at || new Date().toISOString();
+  const counts = directFolderCounts(files, folders, normalizedPath);
  return {
    kind: "folder",
    id: `folder:${normalizedPath}`,
    name: lastPathSegment(normalizedPath) || "Root",
    path: normalizedPath,
-    fileCount: directFolderCounts(files, folders, normalizedPath).files,
-    folderCount: directFolderCounts(files, folders, normalizedPath).folders,
+    fileCount: counts.files,
+    folderCount: counts.folders,
    totalSize: childFiles.reduce((total, file) => total + file.size_bytes, 0),
    updatedAt,
    persisted: Boolean(persistedFolder)
--- a/webui/src/index.ts
+++ b/webui/src/index.ts
@@ -5,6 +5,8 @@ export { default as FilesPage } from "./features/files/FilesPage";
 export * from "./api/files";
 export type { PlatformWebModule, PlatformNavItem, PlatformRouteContribution, PlatformRouteContext } from "@govoplan/core-webui";
 export { FolderTree } from "./features/files/components/FileManagerComponents";
+export { default as ManagedFileChooser } from "./features/files/components/ManagedFileChooser";
+export type { ManagedAttachmentSelection, ManagedFolderSelection } from "./features/files/components/ManagedFileChooser";
 export { useFileTreeState } from "./features/files/hooks/useFileTreeState";
 export type { FolderNode, SortColumn, SortDirection } from "./features/files/types";
 export { buildExplorerEntries, buildFolderEntryFromSources, buildFolderTree, candidateRenamedPath, directFolderCounts, entryModifiedTime, entryName, entrySelectionKey, entrySize, fileIdsForSelection, folderAncestorPaths, folderBreadcrumbs, folderContentLabel, formatBytes, formatDate, isFileInFolder, isPathUnderOrSame, joinFolder, lastPathSegment, normalizeFilePath, normalizeFolder, parentFolderPath, parseDragState, sortExplorerEntries, sortFolderNodes, treeNodeKey } from "./features/files/utils/fileManagerUtils";
--- a/webui/src/module.ts
+++ b/webui/src/module.ts
@@ -1,6 +1,8 @@
 import { createElement, lazy } from "react";
 import type { FilesFileExplorerUiCapability, PlatformWebModule } from "@govoplan/core-webui";
 import { FolderTree } from "./features/files/components/FileManagerComponents";
+import ManagedFileChooser from "./features/files/components/ManagedFileChooser";
+import { listFileSpaces, listFiles, listFolders, resolveFilePatterns, shareFilesWithTarget } from "./api/files";

 const FilesPage = lazy(() => import("./features/files/FilesPage"));

@@ -16,7 +18,15 @@ export const filesModule: PlatformWebModule = {
    { path: "/files", anyOf: fileRead, order: 40, render: ({ settings, auth }) => createElement(FilesPage, { settings, auth }) }
  ],
  uiCapabilities: {
-    "files.fileExplorer": { FolderTree } satisfies FilesFileExplorerUiCapability
+    "files.fileExplorer": {
+      FolderTree,
+      ManagedFileChooser,
+      listFileSpaces,
+      listFiles,
+      listFolders,
+      resolveFilePatterns,
+      shareFilesWithTarget
+    } satisfies FilesFileExplorerUiCapability
  }
 };

--- a/webui/src/styles/file-manager.css
+++ b/webui/src/styles/file-manager.css
@@ -391,6 +391,11 @@
  text-align: center;
 }

+.file-list-virtual-spacer {
+  min-height: 0;
+  pointer-events: none;
+}
+
 .file-context-menu {
  position: fixed;
  z-index: 110;
@@ -698,3 +703,467 @@
  color: var(--text-strong);
  outline: none;
 }
+
+/* Managed file chooser exposed through the files.fileExplorer capability. */
+.managed-file-chooser-dialog {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  width: min(1080px, calc(100vw - 40px));
+  height: min(820px, calc(100vh - 40px));
+  max-height: min(820px, calc(100vh - 40px));
+  overflow: hidden;
+}
+
+.managed-file-chooser-dialog > .dialog-header {
+  padding: 16px 18px;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel);
+}
+
+.managed-file-chooser-body {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+.managed-file-chooser-body > .alert {
+  margin: 14px 14px 0;
+}
+
+.managed-file-chooser-footer {
+  flex: 0 0 auto;
+  padding: 12px 18px;
+  border-top: 1px solid var(--line);
+  background: var(--panel);
+  box-shadow: 0 -8px 24px rgba(15, 23, 42, .06);
+}
+
+.managed-file-chooser-layout {
+  display: grid;
+  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
+  border: 0;
+  border-radius: 0;
+  overflow: hidden;
+  background: var(--panel);
+}
+
+.managed-file-chooser-spaces {
+  min-width: 0;
+  padding: 16px;
+  border-right: 1px solid var(--line);
+  background: var(--panel-soft);
+  overflow: auto;
+}
+
+.managed-file-chooser-spaces.file-tree-panel {
+  display: flex;
+  padding: 0;
+  overflow: hidden;
+}
+
+.managed-file-chooser-spaces .file-tree-list {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding-bottom: 12px;
+}
+
+.managed-file-chooser-spaces .file-tree-space.is-active {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.managed-file-chooser-spaces h3 {
+  margin: 0 0 12px;
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  color: var(--muted);
+}
+
+.managed-file-space-list {
+  display: grid;
+  gap: 7px;
+}
+
+.managed-file-space-button,
+.managed-file-entry {
+  width: 100%;
+  border: 1px solid transparent;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--ink);
+  text-align: left;
+  cursor: pointer;
+}
+
+.managed-file-space-button {
+  display: grid;
+  grid-template-columns: 20px minmax(0, 1fr);
+  gap: 9px;
+  align-items: start;
+  padding: 9px;
+}
+
+.managed-file-space-button span,
+.managed-file-entry > span:not(.managed-file-shared-badge) {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.managed-file-space-button small,
+.managed-file-entry small {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.managed-file-space-button:hover:not(:disabled),
+.managed-file-space-button.is-selected {
+  border-color: var(--line-dark);
+  background: var(--panel);
+}
+
+.managed-file-space-button.is-selected {
+  border-color: var(--accent);
+  box-shadow: inset 3px 0 0 var(--accent);
+}
+
+.managed-file-space-button:disabled {
+  cursor: not-allowed;
+  opacity: .45;
+}
+
+.managed-file-chooser-browser {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.managed-file-chooser-browser.folder-mode {
+  grid-template-rows: auto minmax(0, 1fr) auto;
+}
+
+.managed-file-chooser-toolbar {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--line);
+}
+
+.managed-file-breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  align-items: center;
+  min-width: 0;
+}
+
+.managed-file-breadcrumb > button,
+.managed-file-breadcrumb span button {
+  display: inline-flex;
+  gap: 5px;
+  align-items: center;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--ink);
+  padding: 5px 6px;
+  cursor: pointer;
+}
+
+.managed-file-breadcrumb button:hover:not(:disabled) {
+  background: var(--panel-soft);
+}
+
+.managed-pattern-editor {
+  display: grid;
+  gap: 8px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel-soft);
+}
+
+.managed-pattern-editor label {
+  display: grid;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.managed-file-entry-table {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  min-height: 0;
+  overflow: hidden;
+}
+
+.managed-file-entry-head,
+.managed-file-entry {
+  grid-template-columns: 22px minmax(0, 1fr) 110px 160px;
+}
+
+.managed-file-entry-head {
+  display: grid;
+  gap: 9px;
+  align-items: center;
+  min-height: 38px;
+  padding: 0 20px;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel-soft);
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.managed-file-entry-head button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 5px;
+  width: max-content;
+  max-width: 100%;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 5px 0;
+  font: inherit;
+  cursor: pointer;
+}
+
+.managed-file-entry-head button.is-sorted {
+  color: var(--text-strong);
+}
+
+.managed-file-entry-list {
+  display: block;
+  padding: 10px;
+  min-height: 0;
+  overflow: auto;
+}
+
+.managed-file-entry {
+  display: grid;
+  gap: 9px;
+  align-items: center;
+  min-height: 52px;
+  padding: 8px 10px;
+  margin: 0 0 4px;
+}
+
+.managed-file-entry:last-child {
+  margin-bottom: 0;
+}
+
+.managed-file-entry:hover:not(:disabled) {
+  border-color: var(--line);
+  background: var(--panel-soft);
+}
+
+.managed-file-entry.is-selected {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+}
+
+.managed-file-entry:disabled {
+  color: var(--ink);
+  opacity: 1;
+  cursor: default;
+}
+
+.managed-file-entry.is-folder:not(:disabled) {
+  cursor: pointer;
+}
+
+.managed-file-entry.is-context-only {
+  opacity: .56;
+}
+
+.managed-file-entry.is-parent:disabled {
+  opacity: .38;
+}
+
+.managed-file-entry-name {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.managed-file-entry-name strong,
+.managed-file-entry-name small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.managed-file-entry-name small {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.managed-file-entry-size,
+.managed-file-entry-modified {
+  color: var(--muted);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.managed-file-shared-badge {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  border: 1px solid var(--success-line, var(--line));
+  border-radius: 999px;
+  padding: 3px 7px;
+  color: var(--success, var(--muted));
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.managed-file-empty {
+  padding: 28px 16px;
+  text-align: center;
+}
+
+.managed-file-virtual-spacer {
+  min-height: 0;
+  pointer-events: none;
+}
+
+.managed-file-tree-virtual-list {
+  flex: 1 1 auto;
+  min-height: 80px;
+  overflow: auto;
+}
+
+.managed-file-chooser-note {
+  margin: 0;
+  padding: 10px 14px;
+  border-top: 1px solid var(--line);
+  background: var(--panel-soft);
+}
+
+.managed-pattern-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.managed-pattern-results {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.managed-pattern-results .file-list-table {
+  min-width: 680px;
+  min-height: 0;
+  overflow: auto;
+}
+
+.managed-pattern-result-row {
+  width: 100%;
+  border-top: 0;
+  border-right: 0;
+  border-left: 0;
+  background: transparent;
+  color: var(--ink);
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+}
+
+.managed-pattern-result-row .file-list-name > span {
+  display: grid;
+  min-width: 0;
+}
+
+.managed-pattern-result-row .file-list-name strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.managed-pattern-result-row .file-list-name small {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.managed-pattern-rendered {
+  display: block;
+  color: var(--muted);
+}
+
+.split-field-action {
+  gap: 0;
+}
+
+.split-field-action > input,
+.split-field-action > select,
+.split-field-action > textarea {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.split-field-action > button,
+.split-field-action > .button,
+.split-field-action > .btn {
+  align-self: stretch;
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  box-shadow: none;
+}
+
+@media (max-width: 850px) {
+  .managed-file-entry-head,
+  .managed-file-entry {
+    grid-template-columns: 22px minmax(0, 1fr) 100px;
+  }
+
+  .managed-file-entry-head > :last-child,
+  .managed-file-entry-modified {
+    display: none;
+  }
+}
+
+@media (max-width: 760px) {
+  .managed-file-chooser-dialog {
+    width: calc(100vw - 20px);
+    height: calc(100vh - 20px);
+  }
+
+  .managed-file-chooser-layout {
+    grid-template-columns: 1fr;
+    max-height: calc(100vh - 220px);
+  }
+
+  .managed-file-chooser-spaces {
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+    max-height: 160px;
+  }
+
+  .managed-file-chooser-toolbar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}