@brftech/filex-core 0.30.1 → 0.32.0

package/src/components/GridView.vue

@@ -2,12 +2,13 @@
 /**
  * GridView — card grid. Thumbnails preferred, fall back to icon.
  */
-import { ref } from 'vue'; /* wiring:c4 */
+import { computed, ref } from 'vue'; /* wiring:c4 */
 import type { FileNode } from '../types/FileNode';
 import { hasInternalDrag } from '../lib/dragOut';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
 import { fileIconSvg } from '../lib/fileIcons';
+import StarButton from './StarButton.vue';
 import { snippetSegments } from '../lib/snippet'; /* bul:s3 */
 import { applyDragGhost } from '../lib/dragGhost'; /* wiring:c4 */
 
@@ -25,6 +26,40 @@ const props = defineProps<{
   /** Desktop selective sync: availability badge per tile. Absent on the
    *  web — no badge renders at all. */
   keepBadgeFor?: (n: FileNode) => 'kept' | 'syncing' | 'cloud' | 'partial' | null;
+  /**
+   * Starring on a card. Same contract as ListView: the id set the explorer
+   * keeps, plus the API wiring StarButton needs. Absent apiBase → no star is
+   * rendered at all, exactly as in the list.
+   *
+   * ⚠ Not list-only. The Starred VIEW shipped before starring was reachable
+   * from anywhere but the list, so a user in grid view — the mode the panel's
+   * own screenshots show — had a view they could not fill.
+   */
+  starredIds?: Set<number>;
+  /**
+   * Offer the star affordance at all. Follows the Starred view: when the panel
+   * leaves that view out — a shared app token has no single person behind it,
+   * so "your starred files" is one list shown to strangers — offering to star
+   * something is offering to write into that same shared list. Owner's call,
+   * 2026-09-05: "yıldızlı yeri gözükmüyorsa o zaman yıldızla/yıldızı kaldır da
+   * gözükmemeli".
+   */
+  starEnabled?: boolean;
+  apiBase?: string;
+  authHeaders?: () => Record<string, string> | Promise<Record<string, string>>;
+  authCredentials?: RequestCredentials;
+  /**
+   * surucu:d1 — draw "Folders" and "Files" as labelled sections
+   * (`uiProfile: 'drive'`). Absent/false renders the flat grid unchanged, down
+   * to the DOM: the two headings are the only extra nodes, and without this
+   * prop none are emitted.
+   *
+   * The rows are re-ordered HERE (directories first, stable within each group)
+   * rather than trusted to arrive that way — the listing endpoint promises no
+   * grouping, and a "Folders" heading with a spreadsheet under it is worse
+   * than no heading at all.
+   */
+  sections?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -33,8 +68,26 @@ const emit = defineEmits<{
   (e: 'context-card', node: FileNode, ev: MouseEvent): void;
   (e: 'item-drag-start', node: FileNode, ev: DragEvent): void;
   (e: 'item-drop-into', target: FileNode, ev: DragEvent): void;
+  (e: 'star-change', node: FileNode, value: boolean): void;
 }>();
 
+/* surucu:d1 — grouped order + the two headings. `sort` is stable, so within
+ * folders and within files the listing's own order survives untouched. */
+const ordered = computed<FileNode[]>(() =>
+  props.sections
+    ? [...props.files].sort((a, b) => (a.type === 'dir' ? 0 : 1) - (b.type === 'dir' ? 0 : 1))
+    : props.files,
+);
+const firstDirPath = computed(() => ordered.value.find((f) => f.type === 'dir')?.path ?? null);
+const firstFilePath = computed(() => ordered.value.find((f) => f.type !== 'dir')?.path ?? null);
+
+function headingBefore(n: FileNode): string | null {
+  if (!props.sections) return null;
+  if (n.path === firstDirPath.value) return t('drive.section.folders');
+  if (n.path === firstFilePath.value) return t('drive.section.files');
+  return null;
+}
+
 const { t, formatSize, nodeDisplayName } = useLocale(() => props.locale);
 
 // Prefer the authenticated resolver when the host wired one; otherwise fall
@@ -43,6 +96,13 @@ function thumbOf(n: FileNode): string | null {
   return props.thumbSrc ? props.thumbSrc(n) : (n.thumb_url ?? null);
 }
 
+/** A card carries a star when the host wired the API and the node is a file
+ *  with a server id — the same rule the list row uses. */
+function canStar(n: FileNode): boolean {
+  if (props.starEnabled === false) return false;
+  return props.apiBase !== undefined && typeof n.id === 'number' && n.type === 'file';
+}
+
 function isSelected(n: FileNode): boolean {
   return props.selected.has(n.path);
 }
@@ -168,9 +228,12 @@ function snippetTitle(snippet: string): string {
     :aria-label="t('grid.aria')"
     :aria-busy="loading ? 'true' : undefined"
   >
+    <template v-for="n in ordered" :key="n.path">
+    <!-- surucu:d1 — the section label: a grid item spanning every column. The
+         cards keep `role="option"`; the heading is aria-hidden, and the group
+         it names is already in each card's own label. -->
+    <p v-if="headingBefore(n)" class="fe-grid__heading" aria-hidden="true">{{ headingBefore(n) }}</p>
     <div
-      v-for="n in files"
-      :key="n.path"
       class="fe-grid__card"
       :class="{
         'is-selected': isSelected(n),
@@ -213,6 +276,24 @@ function snippetTitle(snippet: string): string {
         <span v-else-if="specialEmojiFor(n)" class="fe-grid__icon">{{ specialEmojiFor(n) }}</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="fileIconSvg(n)"></span>
+        <!-- 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 a card selection. -->
+        <div v-if="canStar(n)" class="fe-grid__star" @click.stop @dblclick.stop>
+          <StarButton
+            :starred="!!starredIds?.has(n.id!)"
+            :node-id="n.id!"
+            :api-base="apiBase"
+            :auth-headers="authHeaders"
+            :auth-credentials="authCredentials"
+            :locale="locale"
+            compact
+            card
+            @change="(val: boolean) => emit('star-change', n, val)"
+          />
+        </div>
       </div>
       <div class="fe-grid__label" :title="n.basename">
         {{ nodeDisplayName(n) }}
@@ -240,6 +321,7 @@ function snippetTitle(snippet: string): string {
         </template>
       </div>
     </div>
+    </template>
     <div v-if="!loading && files.length === 0" class="fe-grid__empty">
       {{ t('empty.folder') }}
     </div>

package/src/components/InspectorPanel.vue

@@ -24,7 +24,7 @@
  * The panel is mounted with v-if by the host — closed state leaves zero DOM.
  */
 import { computed, ref, watch } from 'vue';
-import type { FileApi, NodeVersion } from '../composables/useFileApi';
+import type { FileApi, Grant, NodeVersion } from '../composables/useFileApi';
 import type { FileNode, ShareInfo } from '../types/FileNode';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
@@ -45,10 +45,28 @@ const props = defineProps<{
   narrow?: boolean;
   /** Authenticated thumbnail resolver (useThumbs.src). Optional. */
   thumbSrc?: (n: FileNode) => string | null;
+  /* === surucu:d1 — the Drive shell's details panel ===================== */
+  /**
+   * Split the panel into **Details** and **Activity** tabs, and draw the two
+   * sections the mockups add: who has access, and the share link with a
+   * "Create link" button. `uiProfile: 'drive'` turns it on; absent/false is
+   * the flat scroll of sections this panel has always been, with no extra
+   * request made.
+   *
+   * ⚠ "Activity" is version history + comments, and nothing else, because
+   * nothing else exists: there is no per-file activity endpoint. The audit log
+   * is admin-only, has no path filter, and stores an EMPTY `target_id` for
+   * every file action (auth/audit_middleware.go) — so "Ayşe renamed this on
+   * Tuesday" cannot be answered by this server, and a timeline that made it up
+   * would be worse than the two real feeds.
+   */
+  tabs?: boolean;
 }>();
 
 const emit = defineEmits<{
   (e: 'close'): void;
+  /** surucu:d1 — a share link was minted from the panel. */
+  (e: 'share-created', payload: { path: string; url: string }): void;
   (e: 'manage-permissions', node: FileNode): void;
   (e: 'toast', message: string): void;
   /** Fired after a successful restore/snapshot so the host can reload. */
@@ -239,6 +257,107 @@ async function takeSnapshot(): Promise<void> {
   }
 }
 
+/* === surucu:d1 — tabs, people with access, the share-link row ==========
+ *
+ * The tab strip is presentation only: every section below is the same section,
+ * rendered under Details or under Activity. Nothing is fetched twice, and
+ * nothing new is fetched at all unless `tabs` is on.
+ */
+type InspectorTab = 'details' | 'activity';
+const tab = ref<InspectorTab>('details');
+
+/** People with access — `GET /api/files/permissions?path=…`.
+ *
+ * ⚠ Owner-gated on the server (handlers/grants.go `requireOwner`), so an
+ * editor or a viewer gets a 403 for a file they can perfectly well see. That
+ * is the server's call, not something to route around: the section hides,
+ * exactly the way the shares list already hides for the same class of caller.
+ * What it must NOT do is render an empty "People with access" and let the
+ * reader conclude that nobody has any.
+ */
+const peopleState = ref<SectionState>('hidden');
+const people = ref<Grant[]>([]);
+let peopleSeq = 0;
+
+async function loadPeople(): Promise<void> {
+  const seq = ++peopleSeq;
+  const node = single.value;
+  if (!props.tabs || !node) {
+    peopleState.value = 'hidden';
+    people.value = [];
+    return;
+  }
+  peopleState.value = 'loading';
+  try {
+    const r = await props.api.listPermissions(node.path);
+    if (seq !== peopleSeq) return;
+    // RBAC off on this storage → there are no grants, and a section reading
+    // "nobody" would misdescribe a drive where everyone can already read it.
+    if (!r.storage_rbac) {
+      peopleState.value = 'hidden';
+      people.value = [];
+      return;
+    }
+    people.value = [...(r.direct ?? []), ...(r.inherited ?? [])];
+    peopleState.value = 'ok';
+  } catch {
+    if (seq !== peopleSeq) return;
+    people.value = [];
+    peopleState.value = 'hidden';
+  }
+}
+
+function personName(g: Grant): string {
+  return g.user_display_name || g.user_email || `#${g.user_id}`;
+}
+
+function personInitial(g: Grant): string {
+  const n = personName(g).trim();
+  return n ? n[0].toUpperCase() : '?';
+}
+
+/** The share-link row: the first live link, or the Create button. */
+const primaryShare = computed(() => (shares.value.length ? shares.value[0] : null));
+const shareBusy = ref(false);
+
+async function createLink(): Promise<void> {
+  const node = single.value;
+  if (!node || shareBusy.value) return;
+  shareBusy.value = true;
+  try {
+    const r = await props.api.createShare({ path: node.path });
+    const url = r.share?.url ?? '';
+    // Re-read the list rather than push the response into it: the LIST
+    // endpoint is what a later copy or revoke acts on, and its `uuid` is the
+    // numeric id the DELETE route wants — not the token the create response
+    // carries under that name.
+    const { shares: list } = await props.api.listShares(node.path);
+    shares.value = Array.isArray(list) ? list : [];
+    sharesState.value = 'ok';
+    if (url) {
+      emit('share-created', { path: node.path, url });
+      await copyText(url);
+    }
+  } catch (err) {
+    emit('toast', (err as Error).message);
+  } finally {
+    shareBusy.value = false;
+  }
+}
+
+watch(
+  () => [props.nodes.map((n) => n.path).join('|'), props.tabs] as const,
+  () => void loadPeople(),
+  { immediate: true },
+);
+
+/* Versions and comments are the two real feeds; when a selection has neither,
+ * the Activity tab says so instead of showing two empty headings. */
+const activityUsable = computed(
+  () => versionsState.value !== 'hidden' || commentsState.value !== 'hidden',
+);
+/* === /surucu:d1 === */
+
 watch(
   () => props.nodes.map((n) => n.path).join(''),
   () => void refresh(),
@@ -372,9 +491,32 @@ watch(
       >×</button>
     </header>
 
+    <!-- surucu:d1 — Details / Activity. Rendered only in the drive shell; the
+         classic panel keeps its single flat scroll of sections. -->
+    <div v-if="tabs" class="fe-inspector__tabs" role="tablist" :aria-label="t('inspector.title')">
+      <button
+        type="button"
+        class="fe-inspector__tab"
+        :class="{ 'is-active': tab === 'details' }"
+        role="tab"
+        :aria-selected="tab === 'details'"
+        data-testid="inspector-tab-details"
+        @click="tab = 'details'"
+      >{{ t('inspector.tab.details') }}</button>
+      <button
+        type="button"
+        class="fe-inspector__tab"
+        :class="{ 'is-active': tab === 'activity' }"
+        role="tab"
+        :aria-selected="tab === 'activity'"
+        data-testid="inspector-tab-activity"
+        @click="tab = 'activity'"
+      >{{ t('inspector.tab.activity') }}</button>
+    </div>
+
     <div class="fe-inspector__scroll">
       <!-- ══ Genel ══ -->
-      <section class="fe-inspector__section">
+      <section v-if="!tabs || tab === 'details'" class="fe-inspector__section">
         <h3 class="fe-inspector__heading">{{ t('inspector.section.general') }}</h3>
 
         <!-- Multi selection → summary -->
@@ -457,7 +599,7 @@ watch(
 
       <!-- ══ Sürümler ══ -->
       <section
-        v-if="versionsState === 'ok' || versionsState === 'error'"
+        v-if="(versionsState === 'ok' || versionsState === 'error') && (!tabs || tab === 'activity')"
         class="fe-inspector__section"
       >
         <h3 class="fe-inspector__heading">{{ t('inspector.section.versions') }}</h3>
@@ -519,7 +661,21 @@ watch(
       </section>
 
       <!-- ══ İzinler ══ -->
-      <section v-if="single && effectivePerm" class="fe-inspector__section">
+      <!-- ⚠ surucu:d1 — stands down when "People with access" is on screen. The
+           two say the same thing there (your own row is in the roster, with the
+           same level) and each carries its own button into the SAME modal —
+           two doors into one room, six lines apart. It stays for every other
+           case, which is exactly the case where People is hidden: RBAC off on
+           the storage, or the server refusing the grant list to a non-owner. -->
+      <section
+        v-if="
+          single &&
+          effectivePerm &&
+          (!tabs || tab === 'details') &&
+          !(tabs && peopleState === 'ok')
+        "
+        class="fe-inspector__section"
+      >
         <h3 class="fe-inspector__heading">{{ t('inspector.section.permissions') }}</h3>
         <div class="fe-inspector__permrow">
           <span
@@ -535,10 +691,62 @@ watch(
         </div>
       </section>
 
+      <!-- ══ surucu:d1 — People with access ══
+           Real grants from `GET /api/files/permissions`; hidden entirely when
+           the caller is not an owner (403) or the storage has RBAC off, rather
+           than drawn empty. -->
+      <section
+        v-if="tabs && tab === 'details' && peopleState === 'ok'"
+        class="fe-inspector__section"
+        data-testid="inspector-people"
+      >
+        <h3 class="fe-inspector__heading">{{ t('inspector.people') }}</h3>
+        <p v-if="people.length === 0" class="fe-inspector__empty">
+          {{ t('inspector.people.empty') }}
+        </p>
+        <ul v-else class="fe-inspector__people">
+          <li v-for="g in people" :key="`${g.id}-${g.user_id}`" class="fe-inspector__person">
+            <span class="fe-inspector__avatar" aria-hidden="true">{{ personInitial(g) }}</span>
+            <span class="fe-inspector__person-main">
+              <span class="fe-inspector__person-name" :title="g.user_email">{{ personName(g) }}</span>
+              <span class="fe-inspector__person-sub">
+                {{ permLabel(g.level) }}<template v-if="g.inherited"> · {{ t('inspector.people.inherited') }}</template>
+              </span>
+            </span>
+          </li>
+        </ul>
+        <button
+          v-if="canManagePerms && single"
+          type="button"
+          class="fe-btn fe-btn--sm"
+          @click="emit('manage-permissions', single)"
+        >{{ t('inspector.people.manage') }}</button>
+      </section>
+
       <!-- ══ Paylaşımlar ══ -->
-      <section v-if="sharesState === 'ok'" class="fe-inspector__section">
-        <h3 class="fe-inspector__heading">{{ t('inspector.section.shares') }}</h3>
-        <p v-if="shares.length === 0" class="fe-inspector__empty">
+      <section
+        v-if="sharesState === 'ok' && (!tabs || tab === 'details')"
+        class="fe-inspector__section"
+        data-testid="inspector-shares"
+      >
+        <h3 class="fe-inspector__heading">
+          {{ tabs ? t('inspector.link') : t('inspector.section.shares') }}
+        </h3>
+        <!-- surucu:d1 — the mockup's link row: what the state IS, and the one
+             button that changes it. Only when there is no link yet; the list
+             below is what an item that HAS links has always shown. -->
+        <div v-if="tabs && shares.length === 0" class="fe-inspector__linkrow">
+          <span class="fe-inspector__linkicon" aria-hidden="true">🔗</span>
+          <span class="fe-inspector__linknone">{{ t('inspector.link.none') }}</span>
+          <button
+            type="button"
+            class="fe-btn fe-btn--sm"
+            :disabled="shareBusy || !single"
+            data-testid="inspector-create-link"
+            @click="createLink"
+          >{{ t('inspector.link.create') }}</button>
+        </div>
+        <p v-else-if="shares.length === 0" class="fe-inspector__empty">
           {{ t('inspector.shares.empty') }}
         </p>
         <ul v-else class="fe-inspector__shares">
@@ -561,7 +769,7 @@ watch(
 
       <!-- ══ calisma:d3 — Yorumlar ══ -->
       <section
-        v-if="commentsState === 'ok' || commentsState === 'error'"
+        v-if="(commentsState === 'ok' || commentsState === 'error') && (!tabs || tab === 'activity')"
         class="fe-inspector__section"
       >
         <h3 class="fe-inspector__heading">
@@ -620,6 +828,21 @@ watch(
         </template>
       </section>
       <!-- ══ /calisma:d3 ══ -->
+
+      <!-- surucu:d1 — the Activity tab with nothing behind it. It says which
+           two feeds fill it, because there is no third one to wait for: this
+           server keeps no per-file audit trail (target_id is empty for every
+           file action, and the log is admin-only). -->
+      <section
+        v-if="tabs && tab === 'activity' && !activityUsable"
+        class="fe-inspector__section"
+        data-testid="inspector-activity-empty"
+      >
+        <p class="fe-inspector__empty">
+          {{ single ? t('inspector.activity.empty') : t('inspector.activity.select') }}
+        </p>
+        <p v-if="single" class="fe-inspector__hint">{{ t('inspector.activity.hint') }}</p>
+      </section>
     </div>
   </aside>
 </template>

package/src/components/ListView.vue

@@ -33,6 +33,15 @@ const props = defineProps<{
   /** Set of node IDs flagged starred by the user — render an inline
    *  filled star indicator and let the user toggle it from the row. */
   starredIds?: Set<number>;
+  /**
+   * Offer the star affordance at all. Follows the Starred view: when the panel
+   * leaves that view out — a shared app token has no single person behind it,
+   * so "your starred files" is one list shown to strangers — offering to star
+   * something is offering to write into that same shared list. Owner's call,
+   * 2026-09-05: "yıldızlı yeri gözükmüyorsa o zaman yıldızla/yıldızı kaldır da
+   * gözükmemeli".
+   */
+  starEnabled?: boolean;
   /** Backend base URL + auth header builder forwarded to StarButton
    *  so it can POST /api/files/manager/star on click. Optional —
    *  embedders without auth wire-up pass nothing and the star column
@@ -390,12 +399,13 @@ const segments = computed<Segment[]>(() => {
       >
         <div class="fe-list__col fe-list__col--star" role="gridcell" @click.stop>
           <StarButton
-            v-if="typeof n.id === 'number' && n.type === 'file'"
+            v-if="starEnabled !== false && typeof n.id === 'number' && n.type === 'file'"
             :starred="!!starredIds?.has(n.id)"
             :node-id="n.id"
             :api-base="apiBase"
             :auth-headers="authHeaders"
             :auth-credentials="authCredentials"
+            :locale="locale"
             compact
             @change="(val: boolean) => emit('star-change', n, val)"
           />

package/src/components/RecoveryKeyModal.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+/**
+ * RecoveryKeyModal — shows a folder recovery key, exactly once (wiring:e2).
+ *
+ * This is the only moment the key exists anywhere outside the user's own
+ * records. filex does not store it, cannot recompute it, and will never be
+ * able to show it again — so the dialog is deliberately hard to dismiss by
+ * accident: no backdrop close, no cancel button, and an acknowledgement the
+ * user has to tick.
+ *
+ * ⚠ The key must not leave this component. No logging, no analytics, no
+ * emit carrying its value. Copy and download are both local.
+ *
+ * Crypto scheme: docs/E2E-ENCRYPTION.md and lib/e2ecrypto.ts.
+ */
+import { computed, ref, watch } from 'vue';
+import type { LocaleCode } from '../types/ExplorerConfig';
+import { useLocale } from '../composables/useLocale';
+import Modal from '../modals/Modal.vue';
+
+const props = defineProps<{
+  open: boolean;
+  locale: LocaleCode;
+  /** The key itself. Shown, copied, downloaded — never emitted or stored. */
+  recoveryKey: string;
+  /** Folder name, for the downloaded file and the dialog copy. */
+  folderName?: string;
+  /** Set when this installation holds an escrow key for the folder too. */
+  escrowKid?: string | null;
+  /** 'created' = a new folder; 'upgraded' = an existing folder gained recovery. */
+  variant?: 'created' | 'upgraded';
+}>();
+
+const emit = defineEmits<{ (e: 'close'): void }>();
+
+const { t } = useLocale(() => props.locale);
+const ack = ref(false);
+const copied = ref(false);
+
+watch(
+  () => props.open,
+  (v) => {
+    if (v) {
+      ack.value = false;
+      copied.value = false;
+    }
+  },
+);
+
+const title = computed(() =>
+  props.variant === 'upgraded' ? t('e2e.recovery.title_upgraded') : t('e2e.recovery.title'),
+);
+
+async function copy() {
+  try {
+    await navigator.clipboard.writeText(props.recoveryKey);
+    copied.value = true;
+    window.setTimeout(() => (copied.value = false), 2000);
+  } catch {
+    // Clipboard permission denied (or a non-secure origin). The key is on
+    // screen and selectable, so this is a convenience, not the only route.
+    copied.value = false;
+  }
+}
+
+function download() {
+  const name = props.folderName || 'folder';
+  const body =
+    `filex recovery key\n` +
+    `folder: ${name}\n` +
+    `\n${props.recoveryKey}\n\n` +
+    `This key opens the encrypted folder without its password.\n` +
+    `Anyone holding it can read the folder. Store it like a password.\n` +
+    `filex does not keep a copy and cannot show it again.\n`;
+  const url = URL.createObjectURL(new Blob([body], { type: 'text/plain' }));
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `filex-recovery-${name}.txt`;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  window.setTimeout(() => URL.revokeObjectURL(url), 30_000);
+}
+
+function done() {
+  if (!ack.value) return;
+  emit('close');
+}
+</script>
+
+<template>
+  <!-- No backdrop close, and ESC only lands once the box is ticked: the key
+       cannot be shown again, so an accidental dismissal is data loss. -->
+  <Modal :open="open" :title="title" size="sm" :close-on-backdrop="false" @close="done">
+    <div class="fe-e2e-rk">
+      <p class="fe-e2e-rk__lead">
+        {{ variant === 'upgraded' ? t('e2e.recovery.lead_upgraded') : t('e2e.recovery.lead') }}
+      </p>
+
+      <output class="fe-e2e-rk__key" aria-label="recovery key">{{ recoveryKey }}</output>
+
+      <div class="fe-e2e-rk__actions">
+        <button type="button" class="fe-btn" @click="copy">
+          {{ copied ? t('e2e.recovery.copied') : t('e2e.recovery.copy') }}
+        </button>
+        <button type="button" class="fe-btn" @click="download">
+          {{ t('e2e.recovery.download') }}
+        </button>
+      </div>
+
+      <div class="fe-e2e-warn" role="alert">
+        <strong>{{ t('e2e.recovery.warn_title') }}</strong>
+        <p>{{ t('e2e.recovery.warn_body') }}</p>
+      </div>
+
+      <div v-if="escrowKid" class="fe-e2e-rk__escrow" role="note">
+        <strong>{{ t('e2e.recovery.escrow_title') }}</strong>
+        <p>{{ t('e2e.recovery.escrow_body') }}</p>
+        <p class="fe-e2e-rk__kid">{{ t('e2e.recovery.escrow_kid') }}: <code>{{ escrowKid }}</code></p>
+      </div>
+
+      <label class="fe-e2e-ack">
+        <input v-model="ack" type="checkbox" />
+        <span>{{ t('e2e.recovery.ack') }}</span>
+      </label>
+    </div>
+    <template #actions>
+      <button type="button" class="fe-btn fe-btn--primary" :disabled="!ack" @click="done">
+        {{ t('e2e.recovery.done') }}
+      </button>
+    </template>
+  </Modal>
+</template>

package/src/components/SecondaryPane.vue

@@ -64,6 +64,13 @@ const props = defineProps<{
   /** ui-fix — mirror the main panel's virtual `.trash` row at storage root
    *  so both split panes list identical rows (no row-offset). Defaults on. */
   trashVisible?: boolean;
+  /**
+   * The navigation panel is already offering Trash, so neither pane draws the
+   * virtual row. Passed down rather than worked out here: the panel belongs to
+   * the host explorer, and a pane that guessed at it is how the two halves of a
+   * split end up listing different rows.
+   */
+  navOffersTrash?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -114,7 +121,14 @@ async function loadPane(target?: string): Promise<void> {
     // Same internal-entry filter + virtual `.trash` row as the main panel
     // (shared helpers → both split panes list identical rows, no offset).
     files.value = filterListing(resp.files);
-    if (injectTrashRow(files.value, resp.adapter, resp.dirname, props.trashVisible !== false)) {
+    if (
+      injectTrashRow(files.value, resp.adapter, resp.dirname, props.trashVisible !== false, {
+        // ⚠ The panel is a sibling of BOTH panes. If it is offering Trash, this
+        // pane must drop the row too — otherwise the duplication is not removed,
+        // it just moves to the right-hand half of a split.
+        navOffersTrash: props.navOffersTrash,
+      })
+    ) {
       void hydrateTrashRow(files.value, resp.adapter, props.api);
     }
     path.value = props.toUser(resp.dirname);