@brftech/filex-core 0.43.0 → 0.44.0

package/src/components/GridView.vue

@@ -38,6 +38,7 @@ import {
 } from '../lib/dateGroups'; /* gruplama */
 import { useSortStore, type ListingOrder } from '../lib/sortOrder'; /* gruplama */
 import StarButton from './StarButton.vue';
+import ThumbTile from './ThumbTile.vue';
 import { snippetSegments } from '../lib/snippet'; /* bul:s3 */
 import { applyDragGhost } from '../lib/dragGhost'; /* wiring:c4 */
 import { contentDir } from '../lib/direction';
@@ -229,7 +230,8 @@ function headingBefore(n: FileNode): string | null {
 
 
 // Prefer the authenticated resolver when the host wired one; otherwise fall
-// back to the raw URL (legacy same-origin behavior).
+// back to the raw URL (legacy same-origin behavior). ⚠ Called by ThumbTile,
+// not by this template — see the note on the tile in the markup.
 function thumbOf(n: FileNode): string | null {
   return props.thumbSrc ? props.thumbSrc(n) : (n.thumb_url ?? null);
 }
@@ -512,48 +514,43 @@ function snippetTitle(snippet: string): string {
             v-html="fileIconTile(n)"
           ></span>
         </template>
-        <!--
-          draggable="false" — HTML5 image drag dataTransfer adds 'Files'
-          MIME, which trips the parent's upload handler; without this
-          the user dragging an item with a thumbnail re-uploads it.
-          Parent card stays draggable=true so internal move works.
-        -->
-        <img
-          v-else-if="thumbOf(n)"
-          :src="thumbOf(n)!"
+        <!-- ⚠⚠ The thumbnail is read inside ThumbTile, never here: read in
+             this template, each thumbnail that arrived re-rendered every card
+             of the folder (see ThumbTile). The tile draws the <img> once there
+             is a picture — draggable="false", because an image drag puts a
+             'Files' MIME on the dataTransfer and the parent's upload handler
+             re-uploads the file being moved — and its slot until then.
+             gorunum:v1-preview — the play badge goes over a real video frame
+             only: a video that fell back to its type tile already says what
+             it is. -->
+        <ThumbTile
+          v-else
+          :node="n"
+          :src-of="thumbOf"
+          :video-badge="drawsAsVideo(n)"
           :alt="n.basename"
           :class="{ 'fe-thumb--page': drawsAsPage(n) /* gorunum:v1-preview — crop a page from its TOP */ }"
-          loading="lazy"
-          draggable="false"
-        />
-        <!-- ikon:emoji — an encrypted folder is still a FOLDER, so it keeps the
-             folder's own shape and colour with the padlock cut out of it; the
-             🔒 it replaces said "locked" and nothing else. One definition,
-             in lib/fileIcons, for all three views. -->
-        <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
-        <span
-          v-else-if="isEncryptedFolder(n)"
-          class="fe-grid__icon fe-grid__icon--svg"
-          role="img"
-          :aria-label="t('e2e.badge')"
-          v-html="encryptedFolderTile()"
-        ></span>
-        <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
-        <span v-else class="fe-grid__icon fe-grid__icon--svg" v-html="fileIconTile(n)"></span>
+        >
+          <!-- ikon:emoji — an encrypted folder is still a FOLDER, so it keeps the
+               folder's own shape and colour with the padlock cut out of it; the
+               🔒 it replaces said "locked" and nothing else. One definition,
+               in lib/fileIcons, for all three views. -->
+          <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
+          <span
+            v-if="isEncryptedFolder(n)"
+            class="fe-grid__icon fe-grid__icon--svg"
+            role="img"
+            :aria-label="t('e2e.badge')"
+            v-html="encryptedFolderTile()"
+          ></span>
+          <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
+          <span v-else class="fe-grid__icon fe-grid__icon--svg" v-html="fileIconTile(n)"></span>
+        </ThumbTile>
         <!-- Star, ON the tile. A hover-only affordance would be invisible to
              the person looking for what they starred, so the chip is always
              painted once the file IS starred and only appears on hover/focus
              otherwise (see .fe-grid__star in styles/base.css). @click.stop so
              starring never doubles as opening the card. -->
-        <!-- gorunum:v1-preview — a frame lifted out of a video is, on a card,
-             indistinguishable from a photograph. The badge is the difference,
-             and it is drawn only over a real frame: a video that fell back to
-             its type tile already says what it is. -->
-        <span
-          v-if="!previewKind(n) && thumbOf(n) && drawsAsVideo(n)"
-          class="fe-thumb__play"
-          aria-hidden="true"
-        ></span>
         <div v-if="canStar(n)" class="fe-grid__star" @click.stop @dblclick.stop>
           <StarButton
             :starred="!!starredIds?.has(n.id!)"

package/src/components/HomeView.vue

@@ -46,6 +46,9 @@ export interface HomeStorage {
   readOnly?: boolean;
   /** Bytes this storage holds, when the server reported one. */
   usedBytes?: number;
+  /** The figure counts only part of the storage: its catalog does not cover
+   *  all of it yet (lib/catalogCoverage). Drawn as a lower bound. */
+  usedPartial?: boolean;
 }
 
 const props = defineProps<{
@@ -145,9 +148,12 @@ const storageTile = fileIconTile({ type: 'dir', mime_type: 'inode/storage' });
  * with the wrong size line says something false.
  */
 function storageCaption(s: HomeStorage): string {
-  return typeof s.usedBytes === 'number' && s.usedBytes >= 0
-    ? t('drive.storage.used_unlimited', { used: formatSize(s.usedBytes) })
-    : t('conn.guide.storage');
+  if (typeof s.usedBytes !== 'number' || s.usedBytes < 0) return t('conn.guide.storage');
+  // ⚠ A figure the catalog does not stand behind in full is a lower bound —
+  // "at least 1.2 GB used" — the same rule the listing's folder sizes follow.
+  return s.usedPartial
+    ? t('drive.storage.used_partial', { used: formatSize(s.usedBytes) })
+    : t('drive.storage.used_unlimited', { used: formatSize(s.usedBytes) });
 }
 
 /**
@@ -199,7 +205,11 @@ function openNode(n: FileNode) {
           <span class="fe-home__storage-tile" aria-hidden="true" v-html="storageTile"></span>
           <span class="fe-home__storage-main">
             <span class="fe-home__storage-label">{{ s.label || s.name }}</span>
-            <span class="fe-home__storage-meta">{{ storageCaption(s) }}</span>
+            <span
+              class="fe-home__storage-meta"
+              data-testid="home-storage-used"
+              :data-partial="s.usedPartial ? 'true' : undefined"
+            >{{ storageCaption(s) }}</span>
             <!-- A read-only mount says so on its card too (issue #30) — on a
                  line of its own, the panel's own mark (StorageTags, the one
                  read-only tag of every surface). ⚠ It used to be glued to

package/src/components/InspectorPanel.vue

@@ -182,7 +182,7 @@ const emit = defineEmits<{
   (e: 'plugin-open', payload: { plugin: string; req: { path: string; action?: string; view?: string } }): void;
 }>();
 
-const { t, formatSize, formatDate: formatDateOf, nodeDisplayName } = useLocale(
+const { t, formatSize, formatNodeSize, nodeSizeHint, formatDate: formatDateOf, nodeDisplayName } = useLocale(
   () => props.locale,
 );
 
@@ -209,6 +209,12 @@ const nodeId = computed<number | null>(() =>
 const multiTotal = computed(() =>
   props.nodes.reduce((acc, n) => acc + (typeof n.size === 'number' ? n.size : 0), 0),
 );
+/** The selection's total, as a size: a lower bound when any selected folder's
+ *  own size is one (`size_partial`, drawn by useLocale formatNodeSize). */
+const multiSize = computed(() => ({
+  size: multiTotal.value,
+  size_partial: props.nodes.some((n) => n.size_partial === true),
+}));
 const etag = computed<string | null>(() => {
   const v = single.value?.etag;
   return typeof v === 'string' && v !== '' ? v : null;
@@ -249,7 +255,7 @@ const headName = computed<string>(() => {
 
 /** The line under it — "Folder", "TypeScript · 4.8 KB", "12.4 MB in total". */
 const headCaption = computed<string>(() => {
-  if (isMulti.value) return formatSize(multiTotal.value);
+  if (isMulti.value) return formatNodeSize(multiSize.value);
   const n = single.value;
   if (n) {
     const kind = typeLabelFor(n, t);
@@ -798,7 +804,7 @@ watch(
         <dl v-if="isMulti" class="fe-inspector__meta">
           <div class="fe-inspector__row">
             <dt>{{ t('inspector.size') }}</dt>
-            <dd>{{ formatSize(multiTotal) }}</dd>
+            <dd :title="nodeSizeHint(multiSize)">{{ formatNodeSize(multiSize) }}</dd>
           </div>
         </dl>
 

package/src/components/ListView.vue

@@ -65,6 +65,7 @@ import {
 } from '../lib/viewPrefs'; /* tablo:t1 — per-folder columns */
 import DataTable, { type DataColumn } from './DataTable.vue';
 import StarButton from './StarButton.vue';
+import ThumbTile from './ThumbTile.vue';
 
 const props = defineProps<{
   files: FileNode[];
@@ -176,7 +177,8 @@ const emit = defineEmits<{
 
 const {
   t,
-  formatSize,
+  formatNodeSize,
+  nodeSizeHint,
   formatDate,
   formatDateFull,
   formatMonthYear,
@@ -567,8 +569,10 @@ const columns = computed<DataColumn<FileNode>[]>(() => [
     label: t('col.size'),
     sortable: true,
     class: 'fe-list__col--size',
-    format: (n) => formatSize(n.size),
-    title: () => undefined,
+    // A folder the catalog does not cover in full says so: "≥ 1.2 GB", or
+    // "—" when nothing below it is known (useLocale formatNodeSize).
+    format: (n) => formatNodeSize(n),
+    title: (n) => nodeSizeHint(n),
   },
   { id: 'star', label: t('col.star'), class: 'fe-list__col--star', headerLabel: false },
 ]);
@@ -786,21 +790,24 @@ const tableGroups = computed(() =>
         v-html="encryptedFolderTile()"
       ></span>
       <!-- tablo:t1 — the real thumbnail, at the tile's own size so the row
-           height does not move. `draggable="false"`: dragging an <img> puts a
-           'Files' MIME on the dataTransfer and the parent's upload handler
-           re-uploads the thing you were only moving. -->
-      <img
-        v-else-if="thumbOf(row)"
+           height does not move. ⚠⚠ Through ThumbTile, never read in this
+           template: here, each thumbnail that arrived re-rendered every row of
+           the table. The tile draws the <img> (`draggable="false"`: dragging
+           an <img> puts a 'Files' MIME on the dataTransfer and the parent's
+           upload handler re-uploads the thing you were only moving) and the
+           type tile until then. -->
+      <ThumbTile
+        v-else
+        :node="row"
+        :src-of="thumbOf"
         class="fe-list__icon fe-list__icon--img"
         :class="{ 'fe-thumb--page': drawsAsPage(row) }"
-        :src="thumbOf(row)!"
         alt=""
         aria-hidden="true"
-        loading="lazy"
-        draggable="false"
-      />
-      <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
-      <span v-else class="fe-list__icon fe-list__icon--svg" aria-hidden="true" v-html="fileIconTile(row)"></span>
+      >
+        <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
+        <span class="fe-list__icon fe-list__icon--svg" aria-hidden="true" v-html="fileIconTile(row)"></span>
+      </ThumbTile>
       <div class="fe-list__name-wrap">
         <span class="fe-list__name" :title="nameTitle(row)">
           <!-- ⚠ RTL: `<bdi>` — the name is the person's text, not the

package/src/components/OperationsCenter.vue

@@ -70,6 +70,8 @@ const KIND_ICONS: Record<Operation['kind'], string> = {
   /* An app-plugin job — the puzzle piece its menu row wears (lib/actionIcons). */
   plugin:
     'M9.5 4.5a2 2 0 1 1 4 0h3a1.5 1.5 0 0 1 1.5 1.5v3a2 2 0 1 1 0 4v3a1.5 1.5 0 0 1-1.5 1.5h-3a2 2 0 1 1-4 0h-3A1.5 1.5 0 0 1 5 16v-3a2 2 0 1 1 0-4V6a1.5 1.5 0 0 1 1.5-1.5z',
+  'archive-create': 'M4 8V5h16v3zM5 8h14v12H5zM10 12h4',
+  'archive-extract': 'M4 8V5h16v3zM5 8h14v12H5zM10 12h4',
 };
 
 function kindLabel(o: Operation): string {
@@ -100,6 +102,7 @@ function outputModeTitle(o: Operation): string {
 
 function statusText(o: Operation): string {
   if (o.status === 'running') {
+    if (o.cancelling) return t('opc.cancelling');
     if (o.queued) return t('opc.queued');
     // A plugin job says what it is doing in its own words (`job_progress`
     // message); that beats a bare count.
@@ -107,6 +110,9 @@ function statusText(o: Operation): string {
     if (o.totalBytes && o.totalBytes > 0) {
       return `${formatSize(o.uploadedBytes ?? 0)} / ${formatSize(o.totalBytes)}`;
     }
+    if ((o.kind === 'archive-create' || o.kind === 'archive-extract') && o.percent !== null) {
+      return t('opc.percent', { n: o.percent });
+    }
     if (o.totalCount && o.totalCount > 0) {
       return `${o.doneCount ?? 0}/${o.totalCount}`;
     }

package/src/components/PendingOpsTray.vue

@@ -56,12 +56,12 @@ const emit = defineEmits<{
 
 function mapStatus(op: PendingOp): OperationStatus {
   if (op.status === 'done') return 'done';
-  if (op.status === 'error') return 'error';
   if (op.status === 'cancelled') return 'aborted';
+  if (op.status === 'error') return 'error';
   return 'running'; // pending | running
 }
 
-const DRAWN_KINDS: ReadonlySet<string> = new Set(['copy', 'move', 'delete', 'plugin']);
+const DRAWN_KINDS: ReadonlySet<string> = new Set(['copy', 'move', 'delete', 'plugin', 'archive-create', 'archive-extract']);
 
 /** A queue kind the center can draw. Anything it has no glyph for is shown as
  *  a generic job (`plugin`), never folded into delete. */
@@ -79,6 +79,7 @@ function isPluginJob(op: PendingOp): boolean {
  *  starts — for an administrator. */
 function mayCancel(op: PendingOp): boolean {
   if (op.status !== 'pending' && op.status !== 'running') return false;
+  if (op.op_type === 'archive-create' || op.op_type === 'archive-extract') return op.cancellable;
   if (isPluginJob(op)) return true;
   return op.op_type === 'trash-empty' && props.callerAdmin === true;
 }
@@ -103,6 +104,7 @@ watch(
           error: op.status === 'error' ? failureOf(op).text : null,
           errorDetail: op.status === 'error' ? (failureOf(op).detail ?? null) : null,
           queued: op.status === 'pending',
+          cancelling: op.status === 'cancelling',
           doneCount: op.progress_done,
           totalCount: op.progress_total,
           cancellable: mayCancel(op),
@@ -112,8 +114,8 @@ watch(
           outputMode: (isPluginJob(op) ? props.outputModeOf?.(op) : undefined) ?? null,
         },
         actions: {
-          dismiss: () => emit('dismiss', op.id),
           cancel: () => emit('cancel', op.id),
+          dismiss: () => emit('dismiss', op.id),
           open: (path: string) => emit('open', op.id, path),
         },
       })),

package/src/components/ThumbTile.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+/**
+ * ThumbTile — one file's thumbnail, or whatever the view draws instead.
+ *
+ * ⚠⚠ Why a component. A thumbnail's object URL arrives later, and whatever
+ * read it is woken when it does. Read in a folder view's own template, that was
+ * the whole view: every arrival re-rendered every row (see useThumbs). Read
+ * here, it is this tile.
+ *
+ * It also asks late. The resolver starts the fetch, and it is only called once
+ * the tile is near the viewport (lib/nearViewport), so opening a folder no
+ * longer downloads the thumbnails of tiles nobody has scrolled to.
+ *
+ * The <img> takes the attributes the view gives the tile (class, alt, aria-*);
+ * the default slot is the fallback — the view's type tile — drawn until the
+ * picture is there, and for good when there is none.
+ *
+ * ⚠ No `loading="lazy"`: the picture is already only handed over near the
+ * viewport, and it is an object URL in memory, so lazy would defer nothing but
+ * the decode — and an <img> that has not loaded yet when useThumbs revokes its
+ * URL (its oldest, past the cache's cap) would come up broken.
+ */
+import { computed, getCurrentInstance, onBeforeUnmount, onMounted, ref } from 'vue';
+import type { FileNode } from '../types/FileNode';
+import { whenNearViewport } from '../lib/nearViewport';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<{
+  node: FileNode;
+  /** The view's resolver: the object URL to draw, or null (not yet, or none). */
+  srcOf: (n: FileNode) => string | null;
+  /** Draw the play badge over the picture — a frame lifted out of a video is,
+   *  on a card, indistinguishable from a photograph. */
+  videoBadge?: boolean;
+}>();
+
+const near = ref(false);
+let stopWaiting: (() => void) | null = null;
+
+onMounted(() => {
+  /* The tile draws no box of its own (it is the picture, or the fallback), so
+     it watches the box it sits in — the view's thumbnail cell. */
+  const anchor = getCurrentInstance()?.subTree.el as Node | null | undefined;
+  stopWaiting = whenNearViewport(anchor?.parentElement, () => {
+    near.value = true;
+  });
+});
+onBeforeUnmount(() => stopWaiting?.());
+
+const src = computed(() => (near.value ? props.srcOf(props.node) : null));
+</script>
+
+<template>
+  <img v-if="src" v-bind="$attrs" :src="src" draggable="false" />
+  <slot v-else />
+  <span v-if="src && videoBadge" class="fe-thumb__play" aria-hidden="true"></span>
+</template>

package/src/composables/useFileApi.ts

@@ -21,6 +21,7 @@
  * thinks about CSRF vs Bearer vs Basic — it just calls `index(path)`.
  */
 
+import type { StorageInfo } from '../lib/catalogCoverage';
 import type { ExplorerConfig, AuthConfig, EndpointMap } from '../types/ExplorerConfig';
 import { resolveLocale } from '../locales/resolve';
 import { listingAddress } from '../lib/internalPaths';
@@ -36,6 +37,7 @@ import type {
   UploadLimits,
   Capabilities,
   ArchiveEntry,
+  ArchiveCreateFormat,
   TrashEntry,
 } from '../types/FileNode';
 import type {
@@ -49,14 +51,15 @@ import type {
 /** Server-side PendingOp DTO (mirror of Modules\FishApp\Models\PendingOp::toApiArray). */
 export interface PendingOpDto {
   id: number;
-  op_type: 'copy' | 'move' | 'delete';
-  status: 'pending' | 'running' | 'done' | 'error';
+  op_type: 'copy' | 'move' | 'delete' | 'archive-create' | 'archive-extract';
+  status: 'pending' | 'running' | 'cancelling' | 'done' | 'error' | 'cancelled';
   progress_total: number;
   progress_done: number;
   target_path: string | null;
   source_dir: string | null;
   source_count: number;
   error_message: string | null;
+  cancellable: boolean;
   started_at: string | null;
   finished_at: string | null;
   created_at: string | null;
@@ -94,6 +97,10 @@ export interface ManagerResponse {
    *  list is not the whole answer. Absent on other actions and on servers
    *  older than the flag. */
   truncated?: boolean;
+  /** Every storage the caller can open, with how much of it the catalog
+   *  covers (`coverage`, absent when all of it — lib/catalogCoverage). Absent
+   *  on servers older than the lazy catalog. */
+  storage_info?: StorageInfo[];
 }
 
 /** A single ACL grant row (RBAC permissions panel). */
@@ -256,6 +263,7 @@ export function resolveEndpoints(config: ExplorerConfig): EndpointMap {
     capabilities: derive(config.capabilities, '/api/files/capabilities'),
     archiveList: derive(config.archiveList, '/api/files/archive/list'),
     archiveExtract: derive(config.archiveExtract, '/api/files/archive/extract'),
+    archiveCreate: derive(config.archiveCreate, '/api/files/archive/create'),
     archiveAdd: derive(config.archiveAdd, '/api/files/archive/add'),
     copy: derive(config.copy, '/api/files/copy'),
     moveAsync: derive(config.moveAsync, '/api/files/move'),
@@ -979,14 +987,14 @@ export function useFileApi(config: ExplorerConfig) {
     return jsonFetch(url, { method: 'DELETE' });
   }
 
-  async function archiveList(path: string): Promise<{ entries: ArchiveEntry[] }> {
+  async function archiveList(path: string, password?: string): Promise<{ entries: ArchiveEntry[] }> {
     if (!endpoints.archiveList) throw new Error('archiveList endpoint not configured');
     const raw = await jsonFetch<{ entries: Array<{ name: string; size: number; is_dir: boolean; mtime?: number }> }>(
       endpoints.archiveList,
       {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ path }),
+        body: JSON.stringify({ path, password }),
       },
     );
     return {
@@ -999,12 +1007,33 @@ export function useFileApi(config: ExplorerConfig) {
     };
   }
 
-  async function archiveExtract(path: string, members?: string[]): Promise<{ keys: string[]; count: number }> {
+  async function archiveExtract(
+    path: string,
+    options: { members?: string[]; password?: string; dest?: string } = {},
+  ): Promise<{ op?: PendingOpDto; keys?: string[]; count?: number }> {
     if (!endpoints.archiveExtract) throw new Error('archiveExtract endpoint not configured');
     return jsonFetch(endpoints.archiveExtract, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ path, members }),
+      body: JSON.stringify({ path, ...options }),
+    });
+  }
+
+  async function archiveCreate(payload: {
+    dest: string;
+    sources: string[];
+    format: ArchiveCreateFormat;
+    password?: string;
+    encrypt_filenames?: boolean;
+    compression?: number;
+    solid?: boolean;
+    dictionary_size_mb?: number;
+  }): Promise<{ op: PendingOpDto }> {
+    if (!endpoints.archiveCreate) throw new Error('archiveCreate endpoint not configured');
+    return jsonFetch(endpoints.archiveCreate, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
     });
   }
 
@@ -1147,6 +1176,7 @@ export function useFileApi(config: ExplorerConfig) {
     revokeShare,
     archiveList,
     archiveExtract,
+    archiveCreate,
     archiveAdd,
     // Version history (koru:k1 inspector)
     listVersions,

package/src/composables/useLocale.ts

@@ -536,6 +536,30 @@ export function useLocale(
     });
   }
 
+  /**
+   * A listed item's size, the way every view draws it (list, inspector,
+   * multi-selection total).
+   *
+   * ⚠ `size_partial` is the server saying the catalog does not cover all of a
+   * folder yet (docs/LAZY-CATALOGUE.md): a lazily cataloged folder that is not
+   * cataloged below, or any folder while its storage's first sync runs. Its
+   * size is then a lower bound — "≥ 1.2 GB" — or, when nothing below it is
+   * known, not a number at all ("—"): printing "0 B" for a folder full of
+   * files nobody has cataloged yet would be a fact that is false. One helper,
+   * so the list and the inspector cannot disagree about it.
+   */
+  function formatNodeSize(n: { size?: number | null; size_partial?: boolean } | null | undefined): string {
+    if (!n) return formatSize(null);
+    if (!n.size_partial) return formatSize(n.size);
+    return typeof n.size === 'number' && n.size > 0 ? t('size.at_least', { size: formatSize(n.size) }) : '—';
+  }
+
+  /** The hover text of a size `formatNodeSize` drew as partial, or undefined. */
+  function nodeSizeHint(n: { size?: number | null; size_partial?: boolean } | null | undefined): string | undefined {
+    if (!n?.size_partial) return undefined;
+    return typeof n.size === 'number' && n.size > 0 ? t('size.partial_hint') : t('size.unknown_hint');
+  }
+
   /**
    * Render a FileNode's basename with locale-aware overrides:
    *   - `.trash` directory → "Çöp Kutusu" / "Trash"
@@ -627,6 +651,8 @@ export function useLocale(
   return {
     t,
     formatSize,
+    formatNodeSize,
+    nodeSizeHint,
     formatDate,
     formatDateFull,
     formatMonthYear,

package/src/composables/useOperations.ts

@@ -27,7 +27,9 @@ import { computed, getCurrentScope, onScopeDispose, ref } from 'vue';
 
 /** `plugin` — an app-plugin job (docs/APP-PLUGINS-API.md); also what any
  *  queue kind this package has no drawing for is shown as. */
-export type OperationKind = 'upload' | 'copy' | 'move' | 'delete' | 'convert' | 'archive' | 'plugin' | 'trash';
+export type OperationKind =
+  | 'upload' | 'copy' | 'move' | 'delete' | 'convert'
+  | 'archive' | 'archive-create' | 'archive-extract' | 'plugin' | 'trash';
 export type OperationStatus = 'running' | 'done' | 'error' | 'aborted';
 
 /** What a publisher hands to `sync()` for one row. */
@@ -47,6 +49,8 @@ export interface OperationInput {
   errorDetail?: string | null;
   /** Queue op accepted but not started yet ("Queued"). */
   queued?: boolean;
+  /** Cancellation was accepted and the worker is stopping/cleaning up. */
+  cancelling?: boolean;
   /** Progress counters for queue ops (3/5 items). */
   doneCount?: number;
   totalCount?: number;
@@ -90,6 +94,7 @@ export interface Operation {
   error: string | null;
   errorDetail: string | null;
   queued: boolean;
+  cancelling: boolean;
   doneCount: number | null;
   totalCount: number | null;
   uploadedBytes: number | null;
@@ -117,6 +122,7 @@ function toOperation(key: string, input: OperationInput, prev?: Operation): Oper
     error: input.error ?? null,
     errorDetail: input.errorDetail ?? null,
     queued: input.queued ?? false,
+    cancelling: input.cancelling ?? false,
     doneCount: input.doneCount ?? null,
     totalCount: input.totalCount ?? null,
     uploadedBytes: input.uploadedBytes ?? null,

package/src/composables/usePendingOps.ts

@@ -33,7 +33,7 @@ export interface PendingOp {
   id: number;
   op_type: PendingOpType;
   /** `cancelled` — somebody stopped it (POST /ops/{id}/cancel). */
-  status: 'pending' | 'running' | 'done' | 'error' | 'cancelled';
+  status: 'pending' | 'running' | 'cancelling' | 'done' | 'error' | 'cancelled';
   progress_total: number;
   progress_done: number;
   /** Running cross-storage transfer's bytes (issue #27); absent otherwise. */
@@ -48,6 +48,7 @@ export interface PendingOp {
   error_code?: string;
   /** The engine a job needed and the server lacks (`error_code: engine_missing`). */
   error_engine?: string;
+  cancellable: boolean;
   started_at: string | null;
   finished_at: string | null;
   created_at: string | null;
@@ -94,9 +95,11 @@ export function normalizeOp(raw: Record<string, unknown>): PendingOp {
         ? 'error'
         : rawStatus === 'cancelled'
           ? 'cancelled'
-          : rawStatus === 'running'
-            ? 'running'
-            : 'pending';
+          : rawStatus === 'cancelling'
+            ? 'cancelling'
+            : rawStatus === 'running'
+              ? 'running'
+              : 'pending';
   const sources = Array.isArray(raw.sources) ? raw.sources : [];
   // ⚠ Unknown kinds pass through. This used to fold everything that was not
   // copy/move into `delete`, which drew a bin beside a plugin job and read
@@ -124,6 +127,7 @@ export function normalizeOp(raw: Record<string, unknown>): PendingOp {
     error_message: str(raw.error_message, raw.error),
     error_code: str(raw.error_code) ?? undefined,
     error_engine: str(raw.error_engine) ?? undefined,
+    cancellable: raw.cancellable === true,
     started_at: str(raw.started_at),
     finished_at: str(raw.finished_at),
     created_at: str(raw.created_at),
@@ -155,7 +159,7 @@ export function usePendingOps(
   let firstPollDone = false;
 
   const hasActive = computed(() =>
-    ops.value.some((o) => o.status === 'pending' || o.status === 'running'),
+    ops.value.some((o) => o.status === 'pending' || o.status === 'running' || o.status === 'cancelling'),
   );
 
   let timer: ReturnType<typeof setInterval> | undefined;
@@ -197,7 +201,7 @@ export function usePendingOps(
       // is currently seeing them in the local tray.
       const localIds = new Set(ops.value.map((o) => o.id));
       const visibleIncoming = incoming.filter((op) => {
-        if (op.status === 'pending' || op.status === 'running') return true;
+        if (op.status === 'pending' || op.status === 'running' || op.status === 'cancelling') return true;
         if (!firstPollDone) return false;
         return localIds.has(op.id);
       });
@@ -211,7 +215,7 @@ export function usePendingOps(
       // Sweep: drop terminal ops past RETAIN_MS.
       const now = Date.now();
       const after = merged.filter((o) => {
-        if (o.status === 'pending' || o.status === 'running') return true;
+        if (o.status === 'pending' || o.status === 'running' || o.status === 'cancelling') return true;
         const at = settledAt.get(o.id);
         return at !== undefined && now - at < RETAIN_MS;
       });