diff --git a/TODO.md b/TODO.md
deleted file mode 100644
index 6a842c5..0000000
--- a/TODO.md
+++ /dev/null
@@ -1,217 +0,0 @@
-# U-Navigator – TODO
-
-Stand: 2026-07-14
-
-Ziel dieser Liste ist eine sichere, testbare und veröffentlichungsfähige Version des Plugins. Schreibzugriff sollte erst empfohlen werden, wenn alle Punkte unter P0 abgeschlossen und auf einer echten Unraid-Installation geprüft sind.
-
-## P0 – Sicherheitsblocker
-
-### Geschützte Root-Pfade
-
-- [ ] Eine zentrale Funktion `unav_assert_mutable_path()` einführen.
-- [ ] Löschen eines konfigurierten Root-Pfads verbieten.
-- [ ] Verschieben und Umbenennen eines konfigurierten Root-Pfads verbieten.
-- [ ] Rekursive Rechte- oder Besitzeränderungen direkt am Root-Pfad verbieten.
-- [ ] Quelle und Ziel auch im Worker unmittelbar vor der Operation erneut prüfen.
-- [ ] API-Tests für Delete, Move und Permissions auf `/mnt/user` beziehungsweise einem Test-Root ergänzen.
-
-Abnahmekriterium: Kein mutierender API-Aufruf kann den erlaubten Root selbst verändern oder entfernen.
-
-### Sichere Symlink-Behandlung
-
-- [ ] Eingabepfad und kanonischen Sicherheitspfad getrennt speichern.
-- [ ] Für Dateioperationen `lstat()` statt ausschließlich `realpath()` verwenden.
-- [ ] Beim Löschen eines Symlinks ausschließlich den Link entfernen, niemals dessen Ziel.
-- [ ] Copy und Move von Symlinks entweder kontrolliert implementieren oder ausdrücklich ablehnen.
-- [ ] Symlinks auf Ziele außerhalb erlaubter Roots für Listing, Vorschau und Download weiterhin blockieren.
-- [ ] Rekursive Operationen dürfen Symlinks nicht verfolgen.
-- [ ] Tests für interne Symlinks, externe Symlinks, kaputte Symlinks und Symlink-Schleifen ergänzen.
-
-Abnahmekriterium: Eine Aktion auf einem Symlink wirkt niemals unerwartet auf dessen Ziel.
-
-### Upload-Pfade härten
-
-- [ ] Relative Pfade vollständig validieren; `..` nicht still entfernen, sondern als Fehler ablehnen.
-- [ ] Absolute Pfade, Nullbytes und leere Pfadsegmente ablehnen.
-- [ ] Jeden Parent-Pfad prüfen, bevor ein Verzeichnis angelegt wird.
-- [ ] Beim Anlegen von Upload-Ordnern keine vorhandenen Symlinks durchlaufen.
-- [ ] Zielpfad unmittelbar vor Schreiben beziehungsweise Rename erneut validieren.
-- [ ] Temporäre Upload-Dateien in einem privaten Verzeichnis ablegen und zufällige IDs verwenden.
-- [ ] Abgebrochene und veraltete Upload-Fragmente automatisch entfernen.
-- [ ] Tests für Symlink-Parents und konkurrierende Pfadänderungen ergänzen.
-
-Abnahmekriterium: Ein Upload kann außerhalb der erlaubten Roots weder Dateien noch Verzeichnisse erzeugen.
-
-### CSRF und Request-Schutz
-
-- [ ] Auf einer aktuellen Unraid-7.x-Installation prüfen, ob die WebGUI-Schicht Plugin-PHP-Endpunkte automatisch gegen CSRF schützt.
-- [ ] Direkte POST-Requests ohne, mit falschem und mit gültigem `csrf_token` testen.
-- [ ] Falls nötig, CSRF-Prüfung zentral in `common.php` implementieren.
-- [ ] Mutierende Endpunkte ausschließlich per POST erlauben.
-- [ ] Für nicht erlaubte Methoden `405 Method Not Allowed` und einen `Allow`-Header liefern.
-- [ ] Für JSON- und Formular-Requests dieselben Schutzregeln anwenden.
-- [ ] Authentifizierungsverhalten bei direktem Aufruf aller API-Endpunkte prüfen und dokumentieren.
-
-Abnahmekriterium: Kein mutierender Aufruf funktioniert ohne gültige Unraid-Sitzung und gültigen CSRF-Schutz.
-
-### Ressourcenlimits
-
-- [ ] Maximale Upload-Dateigröße konfigurierbar machen.
-- [ ] Maximale Gesamtgröße und Dateianzahl pro Upload begrenzen.
-- [ ] Raw-Uploads streamen, statt den gesamten Request in den PHP-Speicher zu laden.
-- [ ] Maximale Dateianzahl und Gesamtgröße für ZIP-Downloads festlegen.
-- [ ] Vor ZIP-Erstellung freien temporären Speicher prüfen.
-- [ ] ZIP-Erstellung als Hintergrundjob ausführen.
-- [ ] Laufzeit- und Rekursionstiefenlimits für Size, Copy, Delete und Permissions einführen.
-- [ ] Große Verzeichnisse im Listing paginieren oder begrenzen.
-
-Abnahmekriterium: Einzelne Requests können weder PHP-Speicher noch temporären Speicher unkontrolliert erschöpfen.
-
-## P1 – Datenintegrität und Jobs
-
-### Robuste Copy-/Move-Operationen
-
-- [ ] Kopien zunächst unter einem temporären Zielnamen erstellen.
-- [ ] Ziel erst nach erfolgreicher vollständiger Kopie atomar sichtbar machen.
-- [ ] Unvollständige Ziele bei Fehlern zuverlässig entfernen.
-- [ ] Quelle bei einem Cross-Filesystem-Move erst nach verifizierter Kopie löschen.
-- [ ] Dateigröße und optional Prüfsumme vor dem Löschen der Quelle vergleichen.
-- [ ] Rechte, Owner, Gruppe und Zeitstempel erhalten.
-- [ ] Verhalten für Sparse Files, Hardlinks und Special Files definieren.
-- [ ] Zielkonflikte auch unmittelbar vor dem finalen Rename prüfen.
-- [ ] Tests für Fehler mitten in einer Verzeichniskopie ergänzen.
-
-### Job-System
-
-- [ ] Job-Verzeichnis mit `0700` statt `0777` erstellen.
-- [ ] Jobdateien atomar über temporäre Datei plus Rename schreiben.
-- [ ] Beim Lesen passende Locks beziehungsweise atomare Snapshots verwenden.
-- [ ] Kryptografisch zufällige Job-IDs verwenden.
-- [ ] Prüfen, ob der Worker wirklich gestartet ist; nicht nur den Shell-Exitcode auswerten.
-- [ ] Hängende Jobs nach Timeout als fehlgeschlagen markieren.
-- [ ] Abbruch-Endpunkt für laufende Jobs implementieren.
-- [ ] Abbruchstatus in rekursiven Operationen regelmäßig prüfen.
-- [ ] Abbruchschaltfläche im Transfer-Panel ergänzen.
-- [ ] Alte abgeschlossene Jobs automatisch löschen.
-- [ ] Gleichzeitige, kollidierende Jobs auf denselben Pfaden erkennen und serialisieren oder ablehnen.
-- [ ] Jobfehler mit verständlicher Meldung und technischem Logeintrag trennen.
-
-### Löschschutz
-
-- [ ] Optionalen Papierkorb pro Root implementieren.
-- [ ] Direktes permanentes Löschen als gesonderte Aktion behandeln.
-- [ ] Anzahl und geschätzte Größe vor rekursivem Löschen anzeigen.
-- [ ] Mehrfachauswahl vor dem Start vollständig validieren.
-- [ ] Optional eine zweite Bestätigung für sehr große Löschvorgänge verlangen.
-
-## P1 – Tests
-
-### PHP-Backend testen
-
-- [ ] Eigenständige Tests für die tatsächlich ausgelieferten PHP-Endpunkte aufbauen.
-- [ ] Die Tests in einer Unraid-kompatiblen PHP-Version ausführen.
-- [ ] Listing innerhalb und außerhalb erlaubter Roots testen.
-- [ ] Upload, Download, Preview, Copy, Move, Delete, Size und Permissions testen.
-- [ ] Read-only-Modus für jede mutierende Aktion testen.
-- [ ] Zielkonflikte und ungültige Request-Methoden testen.
-- [ ] Sonderzeichen, Unicode, sehr lange Namen und versteckte Dateien testen.
-- [ ] Mehrere konfigurierte Roots testen.
-- [ ] Regressionstests für alle P0-Sicherheitsfälle ergänzen.
-
-### CI und statische Prüfung
-
-- [ ] `php -l` für alle PHP-Dateien in CI ausführen.
-- [ ] JavaScript-Syntaxprüfung ausführen.
-- [ ] ShellCheck für `build-plugin.sh` aktivieren.
-- [ ] XML beziehungsweise PLG-Manifest validieren.
-- [ ] Paket bauen und mit den Quellen vergleichen.
-- [ ] Manifest-Prüfsumme automatisch verifizieren.
-- [ ] Tests bei jedem Push und Pull Request ausführen.
-
-### Test auf echter Unraid-Instanz
-
-- [ ] Installation auf unterstützten Unraid-Versionen testen.
-- [ ] Upgrade von einer vorherigen Plugin-Version testen.
-- [ ] Deinstallation und Neuinstallation testen.
-- [ ] Verhalten bei gestopptem und gestartetem Array prüfen.
-- [ ] User Shares, Pools und Disk Shares getrennt prüfen.
-- [ ] Große Ordner und große Dateien testen.
-- [ ] WebGUI-Neustart und Server-Neustart während laufender Jobs testen.
-- [ ] Alle offiziellen Themes und mobile Darstellung prüfen.
-
-## P2 – Konfiguration und Bedienung
-
-### Root-Konfiguration
-
-- [ ] Erlaubte Roots in `settings.json` speichern.
-- [ ] Einstellungsoberfläche zum Hinzufügen und Entfernen von Roots bauen.
-- [ ] Nur existierende absolute Verzeichnisse akzeptieren.
-- [ ] Gefährliche Systempfade wie `/`, `/boot`, `/etc`, `/usr`, `/var` und `/root` standardmäßig verbieten.
-- [ ] Pro Root einen Anzeigenamen und Read-only-Status erlauben.
-- [ ] Änderungen an Roots erst nach erneuter serverseitiger Validierung übernehmen.
-- [ ] Root-Auswahl im Explorer anbieten.
-
-### Dateimanager-Funktionen
-
-- [ ] Neuen Ordner anlegen.
-- [ ] Leere Datei anlegen.
-- [ ] Umbenennen mit serverseitiger Namensvalidierung verbessern.
-- [ ] Suche nach Dateiname im aktuellen Ordner implementieren.
-- [ ] Optionale rekursive Suche mit Ergebnislimit ergänzen.
-- [ ] Sortierung nach Name, Typ, Größe und Änderungsdatum anbieten.
-- [ ] Versteckte Dateien ein- und ausblendbar machen.
-- [ ] Breadcrumb-Navigation ergänzen.
-- [ ] Dateibaum beziehungsweise Share-Navigation ergänzen.
-- [ ] Tastaturbedienung für Auswahl, Öffnen, Kopieren, Verschieben und Löschen verbessern.
-
-### Transfer-Oberfläche
-
-- [ ] Reale Fortschrittswerte nach Bytes statt nur nach Top-Level-Einträgen berechnen.
-- [ ] Quelle, Ziel, Geschwindigkeit und Restzeit anzeigen.
-- [ ] Fehlgeschlagene Jobs wiederholbar machen.
-- [ ] Abgeschlossene Einträge einzeln oder gesammelt entfernen.
-- [ ] Uploads pausieren und abbrechen können.
-
-### Vorschau und Download
-
-- [ ] MIME-Typ anhand des Dateiinhalts prüfen, nicht nur anhand der Erweiterung.
-- [ ] SVG-Vorschau sicher behandeln oder deaktivieren.
-- [ ] Medien- und PDF-Vorschau mit geeigneten Sandbox-Headern testen.
-- [ ] HTTP-Range-Requests für große Audio- und Videodateien unterstützen.
-- [ ] RFC-konforme UTF-8-Dateinamen im `Content-Disposition`-Header verwenden.
-- [ ] Einzeldateien streamen, ohne unnötige Pufferung.
-
-## P2 – Protokollierung und Betrieb
-
-- [ ] Audit-Log für Upload, Copy, Move, Delete und Permissions einführen.
-- [ ] Zeitpunkt, Aktion, Quelle, Ziel, Ergebnis und Fehler protokollieren.
-- [ ] Keine CSRF-Tokens oder sensiblen Inhalte ins Debug-Log schreiben.
-- [ ] Logrotation und maximale Loggröße definieren.
-- [ ] Diagnoseexport für Supportfälle anbieten.
-- [ ] Gesundheitsstatus für Job-Worker und temporären Speicher anzeigen.
-
-## P3 – Paketierung und Veröffentlichung
-
-- [ ] Version nur an einer Stelle pflegen und beim Build überall einsetzen.
-- [ ] `package.json`-Version mit der Plugin-Version synchronisieren.
-- [ ] Reproduzierbare TGZ-Pakete mit stabiler Sortierung und Zeitstempeln erzeugen.
-- [ ] Nach Möglichkeit SHA-256 zusätzlich zur MD5-Prüfung veröffentlichen.
-- [ ] Minimale und getestete Unraid-Version im Plugin-Manifest angeben.
-- [ ] Changelog pro Version vollständig pflegen.
-- [ ] Release-Build in einer sauberen Working Copy erzeugen.
-- [ ] Community-Applications-Metadaten validieren.
-- [ ] Installations-, Update- und Rollback-Anleitung ergänzen.
-- [ ] Sicherheitsmodell und bekannte Einschränkungen dokumentieren.
-- [ ] Read-only als empfohlenen Standard deutlich in README und Oberfläche anzeigen.
-
-## Definition of Done für die erste produktive Version
-
-- [ ] Alle P0-Punkte sind abgeschlossen.
-- [ ] PHP-Integrationstests decken alle mutierenden Operationen ab.
-- [ ] Keine Root- oder Symlink-Regression ist offen.
-- [ ] CSRF und Authentifizierung sind auf echter Unraid-Hardware bestätigt.
-- [ ] Große Uploads, Downloads und Verzeichnisse besitzen getestete Limits.
-- [ ] Fehlgeschlagene Copy-/Move-Jobs hinterlassen keine unbemerkten Teildaten.
-- [ ] Installation, Upgrade, Neustart und Deinstallation wurden getestet.
-- [ ] Paketinhalt und Manifest-Prüfsumme stimmen überein.
-- [ ] Dokumentation und Changelog entsprechen dem ausgelieferten Funktionsumfang.
diff --git a/build-plugin.sh b/build-plugin.sh
index ba7c4d3..f4bfe08 100755
--- a/build-plugin.sh
+++ b/build-plugin.sh
@@ -2,7 +2,7 @@
 set -eu
 
 PLUGIN="u-navigator"
-VERSION="2026.07.14.r008"
+VERSION="2026.07.04.r007"
 PKG_DIR="packages"
 WORK_DIR=".plugin-build"
 PKG_NAME="${PLUGIN}-${VERSION}.tgz"
diff --git a/packages/u-navigator-2026.07.14.r008.tgz b/packages/u-navigator-2026.07.14.r008.tgz
deleted file mode 100644
index 4d5e7d8..0000000
Binary files a/packages/u-navigator-2026.07.14.r008.tgz and /dev/null differ
diff --git a/plugin-root/usr/local/emhttp/plugins/u-navigator/U-Navigator.page b/plugin-root/usr/local/emhttp/plugins/u-navigator/U-Navigator.page
index 24f2bba..08ac58d 100644
--- a/plugin-root/usr/local/emhttp/plugins/u-navigator/U-Navigator.page
+++ b/plugin-root/usr/local/emhttp/plugins/u-navigator/U-Navigator.page
@@ -11,7 +11,26 @@ $plugin = "u-navigator";
 $version = "__VERSION__";
 ?>
 <link rel="stylesheet" href="/plugins/<?=$plugin?>/assets/styles.css?v=<?=$version?>">
-<div class="u-nav app-shell"></div>
+<div class="u-nav app-shell">
+  <header class="topbar">
+    <div>
+      <h1>U-Navigator</h1>
+      <p id="statusText">Initialisiere...</p>
+    </div>
+    <nav class="toolbar" aria-label="Workspace actions">
+      <button id="newExplorerButton" title="Explorer oeffnen">Explorer</button>
+      <button id="newPropertiesButton" title="Eigenschaften oeffnen">Eigenschaften</button>
+      <button id="newQueueButton" title="Transfers einblenden" aria-expanded="false">Transfers</button>
+      <button id="settingsButton" class="icon" title="Einstellungen" aria-label="Einstellungen" aria-expanded="false">
+        <svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+          <path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z"></path>
+          <path d="M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 1.55V21a2 2 0 1 1-4 0v-.08A1.7 1.7 0 0 0 9 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-1.55-1H3a2 2 0 1 1 0-4h.08A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.34-1.88l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-1.55V3a2 2 0 1 1 4 0v.08A1.7 1.7 0 0 0 15 4.6a1.7 1.7 0 0 0 1.88-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9a1.7 1.7 0 0 0 1.55 1H21a2 2 0 1 1 0 4h-.08A1.7 1.7 0 0 0 19.4 15Z"></path>
+        </svg>
+      </button>
+    </nav>
+  </header>
+  <main id="workspace" class="workspace" aria-label="U-Navigator Workspace"></main>
+</div>
 <script>
 window.UNAV_API_BASE = "/plugins/<?=$plugin?>/api";
 window.UNAV_VERSION = "<?=$version?>";
diff --git a/server/public/app.js b/server/public/app.js
index 7ec2b8a..109db97 100644
--- a/server/public/app.js
+++ b/server/public/app.js
@@ -1,860 +1,2583 @@
-const root = document.querySelector('.u-nav') || document.querySelector('.app-shell');
+const workspace = document.querySelector('#workspace');
+const appShell = document.querySelector('.u-nav');
+const statusText = document.querySelector('#statusText');
+const transferButton = document.querySelector('#newQueueButton');
+const settingsButton = document.querySelector('#settingsButton');
 const API_BASE = window.UNAV_API_BASE || '/api';
-const PHP_API = Boolean(window.UNAV_API_BASE);
 const APP_VERSION = window.UNAV_VERSION || 'dev';
-
 const state = {
   config: null,
-  path: '',
-  entries: [],
-  loading: true,
-  error: null,
-  selected: new Set(),
-  anchor: null,
-  query: '',
-  view: localStorage.getItem('unav-view') || 'list',
-  sort: { key: 'name', direction: 'asc' },
-  history: [],
-  historyIndex: -1,
-  detailsOpen: localStorage.getItem('unav-details') !== 'closed',
-  sidebarOpen: true,
-  drawer: null,
-  preview: null,
-  previewLoading: false,
+  windows: [],
+  focusedId: null,
+  selectedEntry: null,
+  contextMenu: null,
+  permissionsDialog: null,
+  uploadConflictDialog: null,
+  uiDialog: null,
+  draggedEntry: null,
+  pointerDrag: null,
+  suppressClickPath: null,
+  suppressItemActivationUntil: 0,
+  debug: [],
+  nextDebugId: 1,
   jobs: new Map(),
-  uploads: [],
-  context: null,
-  status: 'Initialisiere …'
+  uploadTransfers: new Map(),
+  nextUploadTransferId: 1,
+  jobRefresh: new Map(),
+  sizeJobs: new Map(),
+  sizeResults: new Map(),
+  transferPanelVisible: false,
+  transferPanelClosing: false,
+  transferAutoHideTimer: null,
+  settingsPanelVisible: false,
+  typeAhead: {
+    key: '',
+    windowId: null,
+    at: 0
+  },
+  nextWindowId: 1,
+  zIndex: 20
 };
 
-const iconPaths = {
-  logo: '<path d="M3 7.5h7l2-2h9v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"></path><path d="M3 10h18"></path>',
-  back: '<path d="m15 18-6-6 6-6"></path>',
-  forward: '<path d="m9 18 6-6-6-6"></path>',
-  up: '<path d="m6 15 6-6 6 6"></path>',
-  refresh: '<path d="M20 6v5h-5"></path><path d="M4 18v-5h5"></path><path d="M19 11a7 7 0 0 0-12-5L4 9"></path><path d="M5 13a7 7 0 0 0 12 5l3-3"></path>',
-  search: '<circle cx="11" cy="11" r="7"></circle><path d="m20 20-4-4"></path>',
-  upload: '<path d="M12 16V4"></path><path d="m7 9 5-5 5 5"></path><path d="M5 16v4h14v-4"></path>',
-  folderUpload: '<path d="M3 7h7l2 2h9v10H3Z"></path><path d="M12 17v-6"></path><path d="m9 14 3-3 3 3"></path>',
-  list: '<path d="M9 6h11M9 12h11M9 18h11"></path><path d="M4 6h.01M4 12h.01M4 18h.01"></path>',
+const icons = {
+  directory: 'Folder',
+  file: 'File',
+  symlink: 'Link',
+  other: 'Item'
+};
+const uiIcons = {
+  arrowLeft: '<path d="M15 18 9 12l6-6"></path>',
+  arrowRight: '<path d="m9 18 6-6-6-6"></path>',
+  close: '<path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>',
+  delete: '<path d="M4 7h16"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M6 7l1 14h10l1-14"></path><path d="M9 7V4h6v3"></path>',
+  enter: '<path d="M7 8 3 12l4 4"></path><path d="M3 12h12a4 4 0 0 0 4-4V5"></path>',
+  folderUpload: '<path d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"></path><path d="M12 16v-6"></path><path d="m9 13 3-3 3 3"></path>',
   grid: '<rect x="4" y="4" width="6" height="6" rx="1"></rect><rect x="14" y="4" width="6" height="6" rx="1"></rect><rect x="4" y="14" width="6" height="6" rx="1"></rect><rect x="14" y="14" width="6" height="6" rx="1"></rect>',
-  info: '<circle cx="12" cy="12" r="9"></circle><path d="M12 11v6M12 7h.01"></path>',
-  transfer: '<path d="M7 7h12"></path><path d="m15 3 4 4-4 4"></path><path d="M17 17H5"></path><path d="m9 13-4 4 4 4"></path>',
-  settings: '<circle cx="12" cy="12" r="3"></circle><path d="M19 15a2 2 0 0 0 .4 2.2l.1.1-2.2 2.2-.1-.1A2 2 0 0 0 15 19l-.4.2V21h-3.2v-1.8L11 19a2 2 0 0 0-2.2.4l-.1.1-2.2-2.2.1-.1A2 2 0 0 0 7 15l-.2-.4H5v-3.2h1.8L7 11a2 2 0 0 0-.4-2.2l-.1-.1 2.2-2.2.1.1A2 2 0 0 0 11 7l.4-.2V5h3.2v1.8l.4.2a2 2 0 0 0 2.2-.4l.1-.1 2.2 2.2-.1.1A2 2 0 0 0 19 11l.2.4H21v3.2h-1.8Z"></path>',
-  more: '<circle cx="5" cy="12" r="1"></circle><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle>',
-  close: '<path d="M18 6 6 18M6 6l12 12"></path>',
-  folder: '<path d="M3 7h7l2 2h9v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"></path>',
-  file: '<path d="M6 3h8l4 4v14H6Z"></path><path d="M14 3v5h5"></path>',
-  link: '<path d="M10 13a5 5 0 0 0 7.5.5l2-2a5 5 0 0 0-7-7l-1.1 1"></path><path d="M14 11a5 5 0 0 0-7.5-.5l-2 2a5 5 0 0 0 7 7l1.1-1"></path>',
-  image: '<rect x="3" y="4" width="18" height="16" rx="2"></rect><circle cx="8" cy="9" r="1.5"></circle><path d="m4 17 5-5 4 4 2-2 5 4"></path>',
-  video: '<rect x="3" y="5" width="18" height="14" rx="2"></rect><path d="m10 9 5 3-5 3Z"></path>',
-  music: '<path d="M9 18V5l10-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="16" cy="16" r="3"></circle>',
-  archive: '<path d="M5 3h14v18H5Z"></path><path d="M9 3v4h6V3M9 11h6"></path>',
-  code: '<path d="m8 9-4 3 4 3M16 9l4 3-4 3M14 5l-4 14"></path>',
-  download: '<path d="M12 4v11"></path><path d="m7 11 5 5 5-5"></path><path d="M5 20h14"></path>',
-  edit: '<path d="m4 20 4.5-1 10-10a2.1 2.1 0 0 0-3-3l-10 10Z"></path><path d="m14 7 3 3"></path>',
-  copy: '<rect x="8" y="8" width="12" height="12" rx="2"></rect><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"></path>',
-  move: '<path d="M5 12h14M15 8l4 4-4 4"></path>',
-  trash: '<path d="M4 7h16M9 7V4h6v3M7 7l1 14h8l1-14"></path>',
-  check: '<path d="m5 12 4 4L19 6"></path>',
-  chevron: '<path d="m9 18 6-6-6-6"></path>'
+  list: '<path d="M9 6h11"></path><path d="M9 12h11"></path><path d="M9 18h11"></path><path d="M4 6h.01"></path><path d="M4 12h.01"></path><path d="M4 18h.01"></path>',
+  maximize: '<rect x="5" y="5" width="14" height="14" rx="2"></rect>',
+  minimize: '<path d="M8 4h12v12"></path><path d="M4 8h12v12H4Z"></path>',
+  refresh: '<path d="M20 6v5h-5"></path><path d="M4 18v-5h5"></path><path d="M19 11a7 7 0 0 0-12-4.9L4 9"></path><path d="M5 13a7 7 0 0 0 12 4.9l3-2.9"></path>',
+  upload: '<path d="M12 16V5"></path><path d="m8 9 4-4 4 4"></path><path d="M5 16v3h14v-3"></path>'
 };
+const previewExtensions = new Set(['txt', 'log', 'md', 'rd', 'rst', 'yaml', 'yml', 'json', 'xml', 'csv', 'tsv', 'ini', 'cfg', 'conf', 'env', 'toml', 'sql', 'nfo', 'srt', 'sub', 'vtt', 'm3u', 'm3u8', 'pls', 'sh', 'bash', 'zsh', 'php', 'js', 'ts', 'tsx', 'jsx', 'css', 'html', 'py', 'go', 'rs', 'java', 'c', 'cpp', 'h', 'hpp', 'bat', 'ps1', 'properties', 'service', 'timer', 'mount', 'rules', 'cron', 'plg', 'page', 'jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'pdf', 'mp3', 'flac', 'm4a', 'ogg', 'wav', 'mp4', 'mkv', 'webm', 'mov']);
+const previewFilenames = new Set(['dockerfile', 'makefile']);
 
-const previewable = new Set(['txt', 'log', 'md', 'json', 'xml', 'yaml', 'yml', 'ini', 'cfg', 'conf', 'toml', 'csv', 'tsv', 'sh', 'js', 'ts', 'css', 'html', 'php', 'py', 'go', 'rs', 'java', 'c', 'cpp', 'h', 'jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'pdf', 'mp3', 'flac', 'm4a', 'ogg', 'wav', 'mp4', 'mkv', 'webm', 'mov']);
+document.querySelector('#newExplorerButton').addEventListener('click', () => openExplorer());
+document.querySelector('#newPropertiesButton').addEventListener('click', () => openProperties());
+transferButton.addEventListener('click', () => toggleTransferPanel());
+settingsButton.addEventListener('click', () => toggleSettingsPanel());
+window.addEventListener('error', (event) => {
+  recordDebug('window.error', {
+    message: event.message,
+    source: event.filename,
+    line: event.lineno,
+    column: event.colno,
+    error: serializeError(event.error)
+  });
+});
+window.addEventListener('unhandledrejection', (event) => {
+  recordDebug('window.unhandledrejection', { reason: serializeError(event.reason) });
+});
+document.addEventListener('keydown', handleTypeAheadKey);
 
 init();
 
 async function init() {
-  renderShell();
-  bindShell();
   try {
-    state.config = await api(endpoint('config'));
-    if (!state.config.roots?.length) throw new Error('Kein verfügbarer Root-Pfad');
-    renderSidebar();
-    await navigate(state.config.roots[0].path, { replace: true });
-  } catch (error) {
-    state.loading = false;
-    state.error = error.message;
-    state.status = 'Verbindung fehlgeschlagen';
-    renderContent();
-  }
-}
-
-function renderShell() {
-  root.classList.add('u-nav');
-  root.innerHTML = `
-    <div class="unav-frame">
-      <header class="app-header">
-        <button class="brand" type="button" data-action="home" aria-label="U-Navigator Startseite">
-          <span class="brand-mark">${icon('logo')}</span>
-          <span><strong>U-Navigator</strong><small>File browser</small></span>
-        </button>
-        <div class="header-search">
-          ${icon('search')}
-          <input id="searchInput" type="search" placeholder="In diesem Ordner suchen" autocomplete="off" aria-label="Dateien suchen">
-          <kbd>⌘ K</kbd>
-        </div>
-        <nav class="header-actions" aria-label="Anwendungsaktionen">
-          ${iconButton('transfer', 'Transfers', 'transfers', '<span id="transferBadge" class="action-badge" hidden>0</span>')}
-          ${iconButton('settings', 'Einstellungen', 'settings')}
-        </nav>
-      </header>
-
-      <div class="browser-shell">
-        <aside id="sidebar" class="sidebar" aria-label="Orte"></aside>
-
-        <main class="content-shell">
-          <div class="nav-bar">
-            <div class="history-actions">
-              ${iconButton('back', 'Zurück', 'back')}
-              ${iconButton('forward', 'Vor', 'forward')}
-              ${iconButton('up', 'Übergeordneter Ordner', 'up')}
-            </div>
-            <nav id="breadcrumbs" class="breadcrumbs" aria-label="Pfad"></nav>
-            ${iconButton('refresh', 'Neu laden', 'refresh')}
-          </div>
-
-          <div class="command-bar">
-            <div class="primary-actions">
-              <button class="action primary" type="button" data-action="upload">${icon('upload')}<span>Hochladen</span></button>
-              <button class="action" type="button" data-action="upload-folder">${icon('folderUpload')}<span>Ordner</span></button>
-              <span class="command-separator"></span>
-              <button class="action selection-action" type="button" data-action="download" disabled>${icon('download')}<span>Laden</span></button>
-              <button class="action selection-action" type="button" data-action="rename" disabled>${icon('edit')}<span>Umbenennen</span></button>
-              <button class="action selection-action" type="button" data-action="copy" disabled>${icon('copy')}<span>Kopieren</span></button>
-              <button class="action selection-action" type="button" data-action="move" disabled>${icon('move')}<span>Verschieben</span></button>
-              <button class="action danger selection-action" type="button" data-action="delete" disabled>${icon('trash')}<span>Löschen</span></button>
-            </div>
-            <div class="view-actions">
-              <span id="itemCount" class="item-count"></span>
-              ${iconButton('list', 'Listenansicht', 'view-list')}
-              ${iconButton('grid', 'Symbolansicht', 'view-grid')}
-              ${iconButton('info', 'Details', 'details')}
-            </div>
-          </div>
-
-          <div class="explorer-stage">
-            <section id="filePane" class="file-pane" aria-label="Dateien"></section>
-            <aside id="detailsPane" class="details-pane" aria-label="Details"></aside>
-          </div>
-
-          <footer class="status-bar">
-            <span id="statusText">Initialisiere …</span>
-            <span id="selectionStatus"></span>
-            <span class="version">${escapeHtml(APP_VERSION)}</span>
-          </footer>
-        </main>
-      </div>
-    </div>
-    <input id="fileUpload" class="hidden-input" type="file" multiple>
-    <input id="folderUpload" class="hidden-input" type="file" multiple webkitdirectory directory>
-    <div id="drawerHost"></div>
-    <div id="dialogHost"></div>
-    <div id="contextHost"></div>
-  `;
-}
-
-function bindShell() {
-  root.addEventListener('click', handleAction);
-  root.addEventListener('keydown', handleKeydown);
-  root.querySelector('#searchInput').addEventListener('input', (event) => {
-    state.query = event.target.value;
-    renderFiles();
-  });
-  root.querySelector('#fileUpload').addEventListener('change', (event) => uploadFiles([...event.target.files]));
-  root.querySelector('#folderUpload').addEventListener('change', (event) => uploadFiles([...event.target.files]));
-  document.addEventListener('click', closeContext);
-}
-
-async function handleAction(event) {
-  const actionElement = event.target.closest('[data-action]');
-  if (!actionElement || actionElement.disabled) return;
-  const action = actionElement.dataset.action;
-  if (action === 'home') return navigate(state.config?.roots?.[0]?.path);
-  if (action === 'back') return goHistory(-1);
-  if (action === 'forward') return goHistory(1);
-  if (action === 'up') {
-    const currentRoot = activeRoot();
-    if (currentRoot && state.path !== currentRoot.path) return navigate(parentPath(state.path));
-    return;
-  }
-  if (action === 'refresh') return navigate(state.path, { replace: true });
-  if (action === 'path') return navigate(actionElement.dataset.path);
-  if (action === 'root') return navigate(actionElement.dataset.path);
-  if (action === 'view-list') return setView('list');
-  if (action === 'view-grid') return setView('grid');
-  if (action === 'details') return toggleDetails();
-  if (action === 'transfers') return toggleDrawer('transfers');
-  if (action === 'settings') return toggleDrawer('settings');
-  if (action === 'close-drawer') return toggleDrawer(null);
-  if (action === 'upload') return root.querySelector('#fileUpload').click();
-  if (action === 'upload-folder') return root.querySelector('#folderUpload').click();
-  if (action === 'download') return downloadSelected();
-  if (action === 'rename') return renameSelected();
-  if (action === 'copy') return transferSelected('copy');
-  if (action === 'move') return transferSelected('move');
-  if (action === 'delete') return deleteSelected();
-  if (action === 'open') return activateEntry(findEntry(actionElement.dataset.path));
-  if (action === 'clear-selection') return clearSelection();
-  if (action === 'save-settings') return saveSettings(actionElement.closest('form'));
-}
-
-function handleKeydown(event) {
-  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
-    event.preventDefault();
-    root.querySelector('#searchInput').focus();
-  }
-  if (event.key === 'Escape') {
-    state.drawer = null;
-    state.context = null;
-    renderDrawer();
-    closeContext();
-  }
-  if (event.key === 'Backspace' && !isTypingTarget(event.target)) {
-    event.preventDefault();
-    goHistory(-1);
-  }
-}
-
-async function navigate(path, options = {}) {
-  if (!path) return;
-  state.loading = true;
-  state.error = null;
-  state.preview = null;
-  state.selected.clear();
-  state.anchor = null;
-  state.status = 'Ordner wird geladen …';
-  renderContent();
-  try {
-    const result = await api(endpoint('list', { path }));
-    state.path = result.path;
-    state.entries = result.entries || [];
-    state.status = `${state.entries.length} Elemente`;
-    if (options.replace && state.historyIndex >= 0) {
-      state.history[state.historyIndex] = state.path;
-    } else if (!options.history) {
-      state.history = state.history.slice(0, state.historyIndex + 1);
-      if (state.history.at(-1) !== state.path) state.history.push(state.path);
-      state.historyIndex = state.history.length - 1;
+    state.config = await api(apiUrl('config.php'));
+    if (!state.config.roots?.length) {
+      throw new Error('No U-Navigator roots configured');
     }
+    updateStatusText();
+    openExplorer(state.config.roots[0].path);
   } catch (error) {
-    state.error = error.message;
-    state.status = 'Ordner konnte nicht geladen werden';
-  } finally {
-    state.loading = false;
-    renderContent();
+    statusText.textContent = error.message;
   }
 }
 
-function goHistory(offset) {
-  const next = state.historyIndex + offset;
-  if (next < 0 || next >= state.history.length) return;
-  state.historyIndex = next;
-  navigate(state.history[next], { history: true });
-}
-
-function renderContent() {
-  renderSidebar();
-  renderBreadcrumbs();
-  renderFiles();
-  renderDetails();
-  renderStatus();
-  updateControls();
-}
-
-function renderSidebar() {
-  const sidebar = root.querySelector('#sidebar');
-  if (!sidebar || !state.config) return;
-  const roots = state.config.roots || [];
-  sidebar.innerHTML = `
-    <div class="sidebar-section">
-      <div class="sidebar-label">Speicherorte</div>
-      ${roots.map((item, index) => `
-        <button type="button" class="place ${isInside(state.path, item.path) ? 'active' : ''}" data-action="root" data-path="${escapeAttr(item.path)}">
-          <span class="place-icon tone-${(index % 4) + 1}">${icon('folder')}</span>
-          <span><strong>${escapeHtml(rootName(item))}</strong><small>${escapeHtml(item.path)}</small></span>
-          ${isInside(state.path, item.path) ? icon('chevron') : ''}
-        </button>
-      `).join('')}
-    </div>
-    <div class="sidebar-section sidebar-shortcuts">
-      <div class="sidebar-label">Schnellzugriff</div>
-      ${quickPlaces().map((item) => `
-        <button type="button" class="place compact ${state.path === item.path ? 'active' : ''}" data-action="root" data-path="${escapeAttr(item.path)}">
-          ${icon('folder')}<span>${escapeHtml(item.name)}</span>
-        </button>
-      `).join('') || '<p class="sidebar-empty">Ordner erscheinen hier, sobald du navigierst.</p>'}
-    </div>
-    <div class="sidebar-foot">
-      <span class="mode-dot ${state.config.readOnly ? 'readonly' : 'writable'}"></span>
-      <span>${state.config.readOnly ? 'Nur Lesen' : 'Schreibzugriff'}</span>
-    </div>
-  `;
-}
-
-function renderBreadcrumbs() {
-  const host = root.querySelector('#breadcrumbs');
-  if (!host) return;
-  const rootEntry = (state.config?.roots || []).find((item) => isInside(state.path, item.path));
-  if (!rootEntry) {
-    host.innerHTML = `<button type="button" data-action="path" data-path="${escapeAttr(state.path)}">${escapeHtml(state.path || '…')}</button>`;
-    return;
+function openExplorer(initialPath = state.config?.roots?.[0]?.path) {
+  if (!initialPath) {
+    statusText.textContent = 'Kein Root-Pfad konfiguriert';
+    return null;
   }
-  const relative = state.path.slice(rootEntry.path.length).split('/').filter(Boolean);
-  const parts = [{ name: rootName(rootEntry), path: rootEntry.path }];
-  let current = rootEntry.path;
-  for (const name of relative) {
-    current = joinPath(current, name);
-    parts.push({ name, path: current });
-  }
-  host.innerHTML = parts.map((part, index) => `
-    ${index ? '<span class="crumb-separator">›</span>' : ''}
-    <button type="button" data-action="path" data-path="${escapeAttr(part.path)}" ${index === parts.length - 1 ? 'aria-current="page"' : ''}>${escapeHtml(part.name)}</button>
-  `).join('');
-}
-
-function renderFiles() {
-  const host = root.querySelector('#filePane');
-  if (!host) return;
-  if (state.loading) {
-    host.innerHTML = `<div class="state-view"><span class="spinner"></span><strong>Ordner wird geladen</strong><span>Einen kleinen Moment …</span></div>`;
-    return;
-  }
-  if (state.error) {
-    host.innerHTML = `<div class="state-view error-state">${icon('folder')}<strong>Dieser Ordner ist nicht erreichbar</strong><span>${escapeHtml(state.error)}</span><button type="button" class="action primary" data-action="refresh">Erneut versuchen</button></div>`;
-    return;
-  }
-  const entries = visibleEntries();
-  if (!entries.length) {
-    const filtered = Boolean(state.query);
-    host.innerHTML = `<div class="state-view">${icon(filtered ? 'search' : 'folder')}<strong>${filtered ? 'Keine Treffer' : 'Dieser Ordner ist leer'}</strong><span>${filtered ? 'Versuche einen anderen Suchbegriff.' : 'Ziehe Dateien hierher oder verwende „Hochladen“.'}</span></div>`;
-    return;
-  }
-  host.className = `file-pane ${state.view}-view`;
-  host.innerHTML = state.view === 'grid' ? gridMarkup(entries) : listMarkup(entries);
-  bindEntryEvents(host);
-}
-
-function listMarkup(entries) {
-  return `
-    <div class="file-table" role="grid" aria-label="Dateiliste">
-      <div class="file-head" role="row">
-        <button type="button" class="select-all" aria-label="Alle auswählen" data-select-all>${state.selected.size && state.selected.size === visibleEntries().length ? icon('check') : ''}</button>
-        ${columnHeader('name', 'Name')}${columnHeader('size', 'Größe')}${columnHeader('type', 'Typ')}${columnHeader('modifiedAt', 'Geändert')}
-      </div>
-      <div class="file-rows">
-        ${entries.map((entry) => `
-          <div class="file-row ${state.selected.has(entry.path) ? 'selected' : ''}" role="row" tabindex="0" data-entry="${escapeAttr(entry.path)}">
-            <button type="button" class="row-check" aria-label="${escapeAttr(entry.name)} auswählen">${state.selected.has(entry.path) ? icon('check') : ''}</button>
-            <div class="name-cell" role="gridcell">
-              <span class="file-type-icon ${fileTone(entry)}">${icon(fileIcon(entry))}</span>
-              <span><strong>${highlight(entry.name, state.query)}</strong><small>${escapeHtml(entry.type === 'directory' ? 'Ordner' : extensionLabel(entry))}</small></span>
-            </div>
-            <div class="meta-cell" role="gridcell">${entry.type === 'file' ? formatBytes(entry.size) : '—'}</div>
-            <div class="meta-cell type-column" role="gridcell">${escapeHtml(typeLabel(entry))}</div>
-            <div class="meta-cell date-column" role="gridcell">${formatDate(entry.modifiedAt)}</div>
-            <button type="button" class="row-more" aria-label="Aktionen für ${escapeAttr(entry.name)}">${icon('more')}</button>
-          </div>
-        `).join('')}
-      </div>
-    </div>
-  `;
-}
-
-function gridMarkup(entries) {
-  return `<div class="file-grid">${entries.map((entry) => `
-    <button type="button" class="file-card ${state.selected.has(entry.path) ? 'selected' : ''}" data-entry="${escapeAttr(entry.path)}">
-      <span class="card-check">${state.selected.has(entry.path) ? icon('check') : ''}</span>
-      <span class="card-icon ${fileTone(entry)}">${icon(fileIcon(entry))}</span>
-      <strong>${highlight(entry.name, state.query)}</strong>
-      <small>${entry.type === 'file' ? formatBytes(entry.size) : typeLabel(entry)}</small>
-    </button>
-  `).join('')}</div>`;
-}
-
-function bindEntryEvents(host) {
-  host.querySelector('[data-select-all]')?.addEventListener('click', () => {
-    const entries = visibleEntries();
-    if (state.selected.size === entries.length) state.selected.clear();
-    else entries.forEach((entry) => state.selected.add(entry.path));
-    selectionChanged();
+  const win = createWindow('Explorer', 'explorer', {
+    width: 760,
+    height: 460,
+    x: 24 + state.windows.length * 24,
+    y: 20 + state.windows.length * 20,
+    data: {
+      path: initialPath,
+      entries: [],
+      selectedPath: null,
+      selectedPaths: [],
+      selectionAnchorPath: null,
+      view: 'icons',
+      loading: false,
+      error: null
+    }
   });
-  host.querySelectorAll('[data-entry]').forEach((element) => {
-    element.addEventListener('click', (event) => selectEntry(event, element.dataset.entry));
-    element.addEventListener('dblclick', () => activateEntry(findEntry(element.dataset.entry)));
-    element.addEventListener('keydown', (event) => {
-      if (event.key === 'Enter') activateEntry(findEntry(element.dataset.entry));
-      if (event.key === ' ') { event.preventDefault(); selectEntry(event, element.dataset.entry); }
+  loadExplorer(win, initialPath);
+  return win;
+}
+
+function openProperties(entry = state.selectedEntry) {
+  if (entry) {
+    state.selectedEntry = entry;
+  }
+
+  const existing = state.windows.find((item) => item.kind === 'properties');
+  if (existing) {
+    focusWindow(existing);
+    render();
+    return existing;
+  }
+
+  return createWindow('Eigenschaften', 'properties', {
+    width: 420,
+    height: 320,
+    x: 160,
+    y: 90,
+    data: {}
+  });
+}
+
+function openPreview(entry, sourceWindowId = state.focusedId) {
+  if (!entry || !isPreviewable(entry)) {
+    showError(new Error('Für diesen Dateityp ist keine Vorschau verfügbar.'));
+    return null;
+  }
+
+  const existing = state.windows.find((item) => item.kind === 'preview');
+  if (existing) {
+    existing.data.entry = entry;
+    existing.data.sourceWindowId = sourceWindowId;
+    existing.data.content = '';
+    existing.data.loading = true;
+    existing.data.error = null;
+    focusWindow(existing);
+    render();
+    loadPreview(existing, entry);
+    return existing;
+  }
+
+  const win = createWindow('Vorschau', 'preview', {
+    width: 620,
+    height: 460,
+    x: 190,
+    y: 110,
+    data: {
+      entry,
+      sourceWindowId,
+      content: '',
+      loading: true,
+      error: null
+    }
+  });
+  loadPreview(win, entry);
+  return win;
+}
+
+function openQueue() {
+  showTransferPanel();
+  return null;
+}
+
+function createWindow(title, kind, options) {
+  const id = `win-${state.nextWindowId++}`;
+  const win = {
+    id,
+    kind,
+    title,
+    x: options.x,
+    y: options.y,
+    width: options.width,
+    height: options.height,
+    maximized: false,
+    zIndex: ++state.zIndex,
+    data: options.data || {}
+  };
+  state.windows.push(win);
+  state.focusedId = id;
+  render();
+  return win;
+}
+
+function render() {
+  workspace.innerHTML = '';
+  for (const win of state.windows) {
+    workspace.appendChild(renderWindow(win));
+  }
+  if (state.contextMenu) {
+    workspace.appendChild(renderContextMenu());
+  }
+  if (state.permissionsDialog) {
+    workspace.appendChild(renderPermissionsDialog());
+  }
+  if (state.uploadConflictDialog) {
+    workspace.appendChild(renderUploadConflictDialog());
+  }
+  if (state.uiDialog) {
+    workspace.appendChild(renderUiDialog());
+  }
+  renderTransferPanel();
+  renderSettingsPanel();
+}
+
+function renderWindow(win) {
+  const el = document.createElement('section');
+  el.className = `window ${state.focusedId === win.id ? 'focused' : ''} ${win.maximized ? 'maximized' : ''}`;
+  el.style.left = `${win.maximized ? 0 : win.x}px`;
+  el.style.top = `${win.maximized ? 0 : win.y}px`;
+  el.style.width = `${win.maximized ? workspace.clientWidth : win.width}px`;
+  el.style.height = `${win.maximized ? workspace.clientHeight : win.height}px`;
+  el.style.zIndex = win.zIndex;
+  el.dataset.windowId = win.id;
+  el.addEventListener('pointerdown', () => focusWindow(win));
+
+  const titlebar = document.createElement('div');
+  titlebar.className = 'titlebar';
+  titlebar.innerHTML = `
+    <strong>${escapeHtml(windowTitle(win))}</strong>
+    <div class="window-actions">
+      <button class="icon" data-action="maximize" title="Maximieren">${iconSvg(win.maximized ? 'minimize' : 'maximize')}</button>
+      <button class="icon" data-action="close" title="Schließen">${iconSvg('close')}</button>
+    </div>
+  `;
+  titlebar.addEventListener('pointerdown', (event) => startDragWindow(event, win));
+  titlebar.querySelector('[data-action="maximize"]').addEventListener('click', (event) => {
+    event.stopPropagation();
+    win.maximized = !win.maximized;
+    focusWindow(win);
+    render();
+  });
+  titlebar.querySelector('[data-action="close"]').addEventListener('click', (event) => {
+    event.stopPropagation();
+    state.windows = state.windows.filter((item) => item.id !== win.id);
+    state.focusedId = state.windows.at(-1)?.id || null;
+    render();
+  });
+
+  const body = document.createElement('div');
+  body.className = 'window-body';
+  if (win.kind === 'explorer') renderExplorer(body, win);
+  if (win.kind === 'properties') renderProperties(body);
+  if (win.kind === 'preview') renderPreview(body, win);
+  body.addEventListener('scroll', () => {
+    if (win.data.lockScroll) {
+      body.scrollTop = win.data.lockScrollTop || 0;
+      body.scrollLeft = win.data.lockScrollLeft || 0;
+      return;
+    }
+    win.data.scrollTop = body.scrollTop;
+    win.data.scrollLeft = body.scrollLeft;
+  });
+
+  el.append(titlebar, body);
+  requestAnimationFrame(() => {
+    body.scrollTop = win.data.scrollTop || 0;
+    body.scrollLeft = win.data.scrollLeft || 0;
+  });
+  if (!win.maximized) {
+    const resize = document.createElement('div');
+    resize.className = 'resize-handle';
+    resize.addEventListener('pointerdown', (event) => startResizeWindow(event, win));
+    el.appendChild(resize);
+  }
+  return el;
+}
+
+function renderExplorer(body, win) {
+  const data = win.data;
+  body.innerHTML = `
+    <div class="pathbar">
+      <button class="icon up-button" data-action="up" title="Eine Ebene zurueck" aria-label="Eine Ebene zurueck">${iconSvg('arrowLeft')}</button>
+      <input value="${escapeAttr(data.path || '')}" aria-label="Pfad">
+      <button class="icon" data-action="go" title="Öffnen" aria-label="Öffnen">${iconSvg('enter')}</button>
+      <button class="icon" data-action="refresh" title="Neu laden" aria-label="Neu laden">${iconSvg('refresh')}</button>
+      <button class="icon" data-action="upload-files" title="Dateien hochladen" aria-label="Dateien hochladen" ${isReadOnly() ? 'disabled' : ''}>${iconSvg('upload')}</button>
+      <button class="icon" data-action="upload-folder" title="Ordner hochladen" aria-label="Ordner hochladen" ${isReadOnly() ? 'disabled' : ''}>${iconSvg('folderUpload')}</button>
+      <button class="icon danger" data-action="delete-selected" title="Auswahl löschen" aria-label="Auswahl löschen" ${isReadOnly() ? 'disabled' : ''}>${iconSvg('delete')}</button>
+      <input class="upload-input" data-upload="files" type="file" multiple>
+      <input class="upload-input" data-upload="folder" type="file" multiple webkitdirectory directory>
+      <div class="view-toggle" aria-label="Ansicht">
+        <button class="icon ${data.view !== 'icons' ? 'active' : ''}" data-action="view-list" title="Listenansicht" aria-label="Listenansicht">${iconSvg('list')}</button>
+        <button class="icon ${data.view === 'icons' ? 'active' : ''}" data-action="view-icons" title="Symbolansicht" aria-label="Symbolansicht">${iconSvg('grid')}</button>
+      </div>
+    </div>
+    <div class="drop-zone ${data.dragOver ? 'drag-over' : ''}">
+      ${data.error ? `<p class="muted">${escapeHtml(data.error)}</p>` : ''}
+      ${data.loading ? '<p class="muted">Lade...</p>' : renderFileEntries(data.entries || [], data.view || 'list', selectedPathSet(win))}
+    </div>
+  `;
+
+  const input = body.querySelector('input');
+  body.querySelector('[data-action="go"]').addEventListener('click', () => loadExplorer(win, input.value));
+  body.querySelector('[data-action="refresh"]').addEventListener('click', () => loadExplorer(win, data.path));
+  body.querySelector('[data-action="up"]').addEventListener('click', () => loadExplorer(win, parentPath(data.path)));
+  body.querySelector('[data-action="view-list"]').addEventListener('click', () => setExplorerView(win, 'list'));
+  body.querySelector('[data-action="view-icons"]').addEventListener('click', () => setExplorerView(win, 'icons'));
+  body.querySelector('[data-action="upload-files"]').addEventListener('click', () => body.querySelector('[data-upload="files"]').click());
+  body.querySelector('[data-action="upload-folder"]').addEventListener('click', () => body.querySelector('[data-upload="folder"]').click());
+  body.querySelector('[data-action="delete-selected"]').addEventListener('click', () => deleteEntries(win));
+  for (const inputEl of body.querySelectorAll('.upload-input')) {
+    inputEl.addEventListener('change', async () => {
+      try {
+        await uploadFileList(win, [...inputEl.files], data.path);
+      } catch (error) {
+        showError(error);
+      } finally {
+        inputEl.value = '';
+      }
     });
-    element.addEventListener('contextmenu', (event) => showContext(event, element.dataset.entry));
-    element.querySelector('.row-more')?.addEventListener('click', (event) => showContext(event, element.dataset.entry));
+  }
+
+  const dropZone = body.querySelector('.drop-zone');
+  dropZone.addEventListener('dragenter', (event) => {
+    if (hasDropPayload(event)) {
+      event.preventDefault();
+      data.dragOver = true;
+      dropZone.classList.add('drag-over');
+    }
   });
-  host.ondragover = (event) => { event.preventDefault(); host.classList.add('drag-over'); };
-  host.ondragleave = () => host.classList.remove('drag-over');
-  host.ondrop = (event) => {
+  dropZone.addEventListener('dragover', (event) => {
+    if (hasDropPayload(event)) {
+      event.preventDefault();
+      setDropEffect(event, 'copy');
+      data.dragOver = true;
+      dropZone.classList.add('drag-over');
+    }
+  });
+  dropZone.addEventListener('dragleave', () => {
+    data.dragOver = false;
+    dropZone.classList.remove('drag-over');
+  });
+  dropZone.addEventListener('drop', async (event) => {
     event.preventDefault();
-    host.classList.remove('drag-over');
-    if (event.dataTransfer?.files?.length) uploadFiles([...event.dataTransfer.files]);
+    data.dragOver = false;
+    dropZone.classList.remove('drag-over');
+    try {
+      await handleDrop(event, win, data.path);
+    } catch (error) {
+      showError(error);
+    }
+  });
+  dropZone.addEventListener('contextmenu', (event) => {
+    event.preventDefault();
+    showContextMenu(event, win, null);
+  });
+
+  for (const row of body.querySelectorAll('.file-row')) {
+    const entry = data.entries.find((item) => item.path === row.dataset.path);
+    row.draggable = false;
+    row.addEventListener('dragstart', (event) => event.preventDefault());
+    row.addEventListener('selectstart', (event) => event.preventDefault());
+    row.addEventListener('pointerdown', (event) => {
+      lockExplorerScroll(win, body);
+      startItemPointerDrag(event, win, entry);
+    });
+    row.addEventListener('click', (event) => {
+      if (shouldSuppressItemActivation()) return;
+      selectEntry(win, entry, body, event);
+    });
+    row.addEventListener('dblclick', () => {
+      if (shouldSuppressItemActivation()) return;
+      if (entry.type === 'directory') {
+        loadExplorer(win, entry.path);
+      } else if (isPreviewable(entry)) {
+        openPreview(entry, win.id);
+      }
+    });
+    row.addEventListener('contextmenu', (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (selectedPathSet(win).has(entry.path)) {
+        state.selectedEntry = entry;
+        focusWindow(win);
+        updatePropertiesWindows();
+      } else {
+        selectEntry(win, entry, null, event);
+      }
+      showContextMenu(event, win, entry);
+    });
+  }
+}
+
+function renderFileEntries(entries, view, selectedPaths = new Set()) {
+  if (!entries.length) {
+    return '<p class="muted">Dieser Ordner ist leer. Dateien können hier abgelegt werden.</p>';
+  }
+  return view === 'icons' ? renderFileIcons(entries, selectedPaths) : renderFileTable(entries, selectedPaths);
+}
+
+function renderFileTable(entries, selectedPaths) {
+  const rows = entries.map((entry) => `
+    <tr class="file-row ${selectedPaths.has(entry.path) ? 'selected' : ''}" data-path="${escapeAttr(entry.path)}" data-type="${escapeAttr(entry.type)}">
+      <td><span class="name-cell"><span class="badge">${icons[entry.type] || 'Item'}</span>${escapeHtml(entry.name)}</span></td>
+      <td>${entry.type}</td>
+      <td>${entry.type === 'file' ? formatBytes(entry.size) : ''}</td>
+      <td>${new Date(entry.modifiedAt).toLocaleString()}</td>
+    </tr>
+  `).join('');
+
+  return `
+    <table class="file-table">
+      <thead><tr><th>Name</th><th>Typ</th><th>Größe</th><th>Geändert</th></tr></thead>
+      <tbody>${rows}</tbody>
+    </table>
+  `;
+}
+
+function renderFileIcons(entries, selectedPaths) {
+  const items = entries.map((entry) => `
+    <button type="button" class="file-row icon-item ${selectedPaths.has(entry.path) ? 'selected' : ''}" data-path="${escapeAttr(entry.path)}" data-type="${escapeAttr(entry.type)}">
+      <span class="file-icon ${escapeAttr(entry.type)}" aria-label="${escapeAttr(icons[entry.type] || 'Item')}"></span>
+      <span class="icon-name">${escapeHtml(entry.name)}</span>
+      <span class="icon-meta">${entry.type === 'file' ? formatBytes(entry.size) : entry.type}</span>
+    </button>
+  `).join('');
+
+  return `<div class="icon-grid">${items}</div>`;
+}
+
+function setExplorerView(win, view) {
+  win.data.view = view;
+  render();
+}
+
+function renderProperties(body) {
+  const entry = state.selectedEntry;
+  if (!entry) {
+    body.innerHTML = '<p class="muted">Keine Datei ausgewählt.</p>';
+    return;
+  }
+
+  const sizeLabel = entry.type === 'directory' ? directorySizeLabel(entry) : formatBytes(entry.size);
+  body.classList.add('properties');
+  body.innerHTML = `
+    <dl>
+      <dt>Name</dt><dd>${escapeHtml(entry.name)}</dd>
+      <dt>Typ</dt><dd>${escapeHtml(entry.type)}</dd>
+      <dt>Pfad</dt><dd>${escapeHtml(entry.path)}</dd>
+      <dt>Größe</dt><dd>${escapeHtml(sizeLabel)}</dd>
+      <dt>Geändert</dt><dd>${new Date(entry.modifiedAt).toLocaleString()}</dd>
+      <dt>Besitzer</dt><dd>${escapeHtml(formatPrincipal(entry.owner, entry.ownerId))}</dd>
+      <dt>Gruppe</dt><dd>${escapeHtml(formatPrincipal(entry.group, entry.groupId))}</dd>
+      <dt>Rechte</dt><dd>${escapeHtml(entry.permissions ? `0${entry.permissions}`.slice(-4) : '-')}</dd>
+    </dl>
+  `;
+  if (entry.type === 'directory') {
+    ensureDirectorySize(entry);
+  }
+}
+
+function renderPreview(body, win) {
+  const data = win.data;
+  body.classList.add('preview-body');
+  if (data.loading) {
+    body.innerHTML = '<p class="muted">Lade Vorschau...</p>';
+    return;
+  }
+  if (data.error) {
+    body.innerHTML = `<p class="muted">${escapeHtml(data.error)}</p>`;
+    return;
+  }
+  const entry = data.entry;
+  const navigation = previewNavigation(data);
+  body.innerHTML = `
+    <div class="preview-meta">
+      <div class="preview-nav">
+        <button class="icon" data-action="preview-prev" title="Vorherige Datei" aria-label="Vorherige Datei" ${navigation.previous ? '' : 'disabled'}>${iconSvg('arrowLeft')}</button>
+        <button class="icon" data-action="preview-next" title="Nächste Datei" aria-label="Nächste Datei" ${navigation.next ? '' : 'disabled'}>${iconSvg('arrowRight')}</button>
+      </div>
+      <strong>${escapeHtml(entry?.name || data.name || 'Vorschau')}</strong>
+      <span>${escapeHtml(formatBytes(data.size || entry?.size || 0))}</span>
+    </div>
+    ${renderPreviewContent(data)}
+  `;
+  body.querySelector('[data-action="preview-prev"]')?.addEventListener('click', () => openPreview(navigation.previous, data.sourceWindowId));
+  body.querySelector('[data-action="preview-next"]')?.addEventListener('click', () => openPreview(navigation.next, data.sourceWindowId));
+}
+
+function renderPreviewContent(data) {
+  if (data.type === 'markdown') {
+    return `<article class="preview-rendered">${renderMarkdown(data.content || '')}</article>`;
+  }
+  if (data.type === 'csv') {
+    return renderCsvPreview(data.content || '', data.extension === 'tsv' ? '\t' : ',');
+  }
+  if (data.type === 'image') {
+    return `<div class="preview-media"><img src="${escapeAttr(apiUrl(data.rawUrl))}" alt="${escapeAttr(data.name || 'Vorschau')}"></div>`;
+  }
+  if (data.type === 'pdf') {
+    return `<iframe class="preview-frame" src="${escapeAttr(apiUrl(data.rawUrl))}" title="${escapeAttr(data.name || 'PDF Vorschau')}"></iframe>`;
+  }
+  if (data.type === 'audio') {
+    return `<div class="preview-media"><audio controls src="${escapeAttr(apiUrl(data.rawUrl))}"></audio></div>`;
+  }
+  if (data.type === 'video') {
+    return `<div class="preview-media"><video controls src="${escapeAttr(apiUrl(data.rawUrl))}"></video></div>`;
+  }
+  return `<pre class="preview-text">${escapeHtml(data.content || '')}</pre>`;
+}
+
+function previewNavigation(data) {
+  const source = state.windows.find((win) => win.id === data.sourceWindowId && win.kind === 'explorer');
+  const entries = (source?.data.entries || []).filter(isPreviewable);
+  if (entries.length < 2) {
+    return { previous: null, next: null };
+  }
+  const index = entries.findIndex((entry) => entry.path === data.entry?.path);
+  if (index < 0) {
+    return { previous: null, next: null };
+  }
+  return {
+    previous: entries[(index - 1 + entries.length) % entries.length],
+    next: entries[(index + 1) % entries.length]
   };
 }
 
-function selectEntry(event, path) {
-  if (event.target.closest('.row-more')) return;
-  const entries = visibleEntries();
-  if (event.shiftKey && state.anchor) {
-    const start = entries.findIndex((entry) => entry.path === state.anchor);
-    const end = entries.findIndex((entry) => entry.path === path);
-    if (start >= 0 && end >= 0) {
-      if (!event.metaKey && !event.ctrlKey) state.selected.clear();
-      entries.slice(Math.min(start, end), Math.max(start, end) + 1).forEach((entry) => state.selected.add(entry.path));
-    }
-  } else if (event.metaKey || event.ctrlKey || event.target.closest('.row-check')) {
-    if (state.selected.has(path)) state.selected.delete(path); else state.selected.add(path);
-    state.anchor = path;
-  } else {
-    state.selected.clear();
-    state.selected.add(path);
-    state.anchor = path;
-  }
-  state.preview = null;
-  selectionChanged();
-}
-
-function selectionChanged() {
-  renderFiles();
-  renderDetails();
-  renderStatus();
-  updateControls();
-}
-
-function clearSelection() {
-  state.selected.clear();
-  selectionChanged();
-}
-
-async function activateEntry(entry) {
-  if (!entry) return;
-  if (entry.type === 'directory') return navigate(entry.path);
-  state.selected.clear();
-  state.selected.add(entry.path);
-  state.detailsOpen = true;
-  localStorage.setItem('unav-details', 'open');
-  selectionChanged();
-  if (PHP_API && isPreviewable(entry)) await loadPreview(entry);
-}
-
-async function loadPreview(entry) {
-  state.previewLoading = true;
-  renderDetails();
+async function loadPreview(win, entry) {
+  win.data.loading = true;
+  win.data.error = null;
+  render();
   try {
-    state.preview = await api(endpoint('preview', { path: entry.path }));
+    const result = await api(apiUrl(`preview.php?path=${encodeURIComponent(entry.path)}`));
+    win.data.entry = entry;
+    win.data.sourceWindowId = win.data.sourceWindowId || state.focusedId;
+    win.data.name = result.name;
+    win.data.size = result.size;
+    win.data.type = result.type;
+    win.data.extension = result.extension;
+    win.data.rawUrl = result.rawUrl;
+    win.data.content = result.content;
   } catch (error) {
-    state.preview = { error: error.message };
+    win.data.error = error.message;
   } finally {
-    state.previewLoading = false;
-    renderDetails();
+    win.data.loading = false;
+    render();
   }
 }
 
-function renderDetails() {
-  const pane = root.querySelector('#detailsPane');
-  if (!pane) return;
-  pane.classList.toggle('closed', !state.detailsOpen);
-  if (!state.detailsOpen) { pane.innerHTML = ''; return; }
-  const entries = selectedEntries();
-  if (!entries.length) {
-    pane.innerHTML = `<div class="details-empty">${icon('info')}<strong>Details</strong><span>Wähle eine Datei oder einen Ordner aus.</span></div>`;
-    return;
+function renderMarkdown(content) {
+  const blocks = [];
+  let listItems = [];
+  const flushList = () => {
+    if (listItems.length) {
+      blocks.push(`<ul>${listItems.map((item) => `<li>${renderInlineMarkdown(item)}</li>`).join('')}</ul>`);
+      listItems = [];
+    }
+  };
+
+  for (const line of String(content).split(/\r?\n/)) {
+    const heading = /^(#{1,6})\s+(.*)$/.exec(line);
+    if (heading) {
+      flushList();
+      const level = heading[1].length;
+      blocks.push(`<h${level}>${renderInlineMarkdown(heading[2])}</h${level}>`);
+      continue;
+    }
+    const list = /^\s*[-*]\s+(.*)$/.exec(line);
+    if (list) {
+      listItems.push(list[1]);
+      continue;
+    }
+    flushList();
+    if (!line.trim()) continue;
+    blocks.push(`<p>${renderInlineMarkdown(line)}</p>`);
   }
-  if (entries.length > 1) {
-    const size = entries.reduce((sum, entry) => sum + Number(entry.size || 0), 0);
-    pane.innerHTML = `<div class="details-header"><strong>${entries.length} Elemente</strong>${iconButton('close', 'Details schließen', 'details')}</div><div class="multi-selection-mark">${entries.length}</div><dl class="detail-list"><dt>Ausgewählt</dt><dd>${entries.length}</dd><dt>Dateigröße</dt><dd>${formatBytes(size)}</dd></dl>`;
-    return;
+  flushList();
+  return blocks.join('');
+}
+
+function renderInlineMarkdown(value) {
+  return escapeHtml(value)
+    .replace(/`([^`]+)`/g, '<code>$1</code>')
+    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*([^*]+)\*/g, '<em>$1</em>');
+}
+
+function renderCsvPreview(content, delimiter) {
+  const rows = parseDelimitedRows(content, delimiter).slice(0, 80);
+  if (!rows.length) {
+    return '<p class="muted">Keine Tabellenzeilen.</p>';
   }
-  const entry = entries[0];
-  pane.innerHTML = `
-    <div class="details-header"><strong>Details</strong>${iconButton('close', 'Details schließen', 'details')}</div>
-    <div class="preview-box">${previewMarkup(entry)}</div>
-    <div class="detail-title"><span class="file-type-icon large ${fileTone(entry)}">${icon(fileIcon(entry))}</span><div><strong>${escapeHtml(entry.name)}</strong><span>${escapeHtml(typeLabel(entry))}</span></div></div>
-    <dl class="detail-list">
-      <dt>Größe</dt><dd>${entry.type === 'file' ? formatBytes(entry.size) : 'Ordner'}</dd>
-      <dt>Geändert</dt><dd>${formatDate(entry.modifiedAt, true)}</dd>
-      ${entry.owner != null ? `<dt>Besitzer</dt><dd>${escapeHtml(entry.owner)}</dd>` : ''}
-      ${entry.group != null ? `<dt>Gruppe</dt><dd>${escapeHtml(entry.group)}</dd>` : ''}
-      ${entry.permissions ? `<dt>Rechte</dt><dd><code>${escapeHtml(entry.permissions)}</code></dd>` : ''}
-      <dt>Pfad</dt><dd class="detail-path">${escapeHtml(entry.path)}</dd>
-    </dl>
-    ${PHP_API && isPreviewable(entry) && !state.preview ? `<button type="button" class="action full" data-action="open" data-path="${escapeAttr(entry.path)}">${icon('image')}<span>Vorschau laden</span></button>` : ''}
+  return `
+    <div class="preview-table-wrap">
+      <table class="preview-table">
+        <tbody>
+          ${rows.map((row) => `<tr>${row.map((cell) => `<td>${escapeHtml(cell)}</td>`).join('')}</tr>`).join('')}
+        </tbody>
+      </table>
+    </div>
   `;
 }
 
-function previewMarkup(entry) {
-  if (state.previewLoading) return '<span class="spinner"></span>';
-  if (!state.preview) return `<span class="preview-placeholder ${fileTone(entry)}">${icon(fileIcon(entry))}</span>`;
-  if (state.preview.error) return `<span class="preview-error">${escapeHtml(state.preview.error)}</span>`;
-  const data = state.preview;
-  const raw = endpointRaw(data.rawUrl);
-  if (data.type === 'image') return `<img src="${escapeAttr(raw)}" alt="${escapeAttr(entry.name)}">`;
-  if (data.type === 'audio') return `<audio controls src="${escapeAttr(raw)}"></audio>`;
-  if (data.type === 'video') return `<video controls src="${escapeAttr(raw)}"></video>`;
-  if (data.type === 'pdf') return `<iframe src="${escapeAttr(raw)}" title="${escapeAttr(entry.name)}"></iframe>`;
-  return `<pre>${escapeHtml(String(data.content || '').slice(0, 6000))}</pre>`;
-}
-
-function renderStatus() {
-  root.querySelector('#statusText').textContent = state.status;
-  const selected = selectedEntries();
-  root.querySelector('#selectionStatus').textContent = selected.length ? `${selected.length} ausgewählt · ${formatBytes(selected.reduce((sum, item) => sum + Number(item.size || 0), 0))}` : '';
-  root.querySelector('#itemCount').textContent = `${visibleEntries().length} ${visibleEntries().length === 1 ? 'Element' : 'Elemente'}`;
-}
-
-function updateControls() {
-  const selected = selectedEntries();
-  root.querySelectorAll('.selection-action').forEach((button) => { button.disabled = !selected.length; });
-  root.querySelector('[data-action="rename"]').disabled = selected.length !== 1 || isReadOnly();
-  for (const action of ['copy', 'move', 'delete']) root.querySelector(`[data-action="${action}"]`).disabled = !selected.length || isReadOnly();
-  root.querySelector('[data-action="upload"]').disabled = isReadOnly();
-  root.querySelector('[data-action="upload-folder"]').disabled = isReadOnly();
-  root.querySelector('[data-action="back"]').disabled = state.historyIndex <= 0;
-  root.querySelector('[data-action="forward"]').disabled = state.historyIndex >= state.history.length - 1;
-  root.querySelector('[data-action="up"]').disabled = !activeRoot() || state.path === activeRoot().path;
-  root.querySelector('[data-action="view-list"]').classList.toggle('active', state.view === 'list');
-  root.querySelector('[data-action="view-grid"]').classList.toggle('active', state.view === 'grid');
-  root.querySelector('[data-action="details"]').classList.toggle('active', state.detailsOpen);
-}
-
-function setView(view) {
-  state.view = view;
-  localStorage.setItem('unav-view', view);
-  renderFiles();
-  updateControls();
-}
-
-function toggleDetails() {
-  state.detailsOpen = !state.detailsOpen;
-  localStorage.setItem('unav-details', state.detailsOpen ? 'open' : 'closed');
-  renderDetails();
-  updateControls();
-}
-
-function toggleDrawer(name) {
-  state.drawer = state.drawer === name ? null : name;
-  renderDrawer();
-}
-
-function renderDrawer() {
-  const host = root.querySelector('#drawerHost');
-  if (!state.drawer) { host.innerHTML = ''; return; }
-  if (state.drawer === 'transfers') {
-    const items = [...state.uploads].reverse().concat([...state.jobs.values()].reverse());
-    host.innerHTML = drawerMarkup('Transfers', items.length ? items.map(transferMarkup).join('') : '<div class="drawer-empty">Keine Transfers in dieser Sitzung.</div>');
-  } else {
-    host.innerHTML = drawerMarkup('Einstellungen', `
-      <form class="settings-form">
-        <label><span><strong>Schreibzugriff</strong><small>Dateioperationen und Uploads erlauben</small></span><input type="checkbox" name="write" ${!isReadOnly() ? 'checked' : ''}></label>
-        <label><span><strong>Debug-Modus</strong><small>Zusätzliche Diagnoseinformationen aktivieren</small></span><input type="checkbox" name="debug" ${state.config?.debug ? 'checked' : ''}></label>
-        <button type="button" class="action primary full" data-action="save-settings">Speichern</button>
-      </form>
-    `);
+function parseDelimitedRows(content, delimiter) {
+  const rows = [];
+  let row = [];
+  let cell = '';
+  let quoted = false;
+  const text = String(content || '');
+  for (let index = 0; index < text.length; index += 1) {
+    const char = text[index];
+    if (char === '"') {
+      if (quoted && text[index + 1] === '"') {
+        cell += '"';
+        index += 1;
+      } else {
+        quoted = !quoted;
+      }
+      continue;
+    }
+    if (!quoted && char === delimiter) {
+      row.push(cell);
+      cell = '';
+      continue;
+    }
+    if (!quoted && (char === '\n' || char === '\r')) {
+      if (char === '\r' && text[index + 1] === '\n') index += 1;
+      row.push(cell);
+      rows.push(row);
+      row = [];
+      cell = '';
+      continue;
+    }
+    cell += char;
   }
+  if (cell || row.length) {
+    row.push(cell);
+    rows.push(row);
+  }
+  return rows;
 }
 
-function drawerMarkup(title, content) {
-  return `<div class="drawer-scrim" data-action="close-drawer"></div><aside class="drawer"><header><div><small>U-Navigator</small><strong>${escapeHtml(title)}</strong></div>${iconButton('close', 'Schließen', 'close-drawer')}</header><div class="drawer-body">${content}</div></aside>`;
+function renderQueue(body) {
+  body.innerHTML = queueMarkup();
+  bindQueueActions(body);
 }
 
-function transferMarkup(item) {
-  const progress = Math.max(0, Math.min(100, Number(item.progress || 0)));
-  return `<article class="transfer-item"><div><span class="transfer-icon">${icon(item.type === 'upload' ? 'upload' : 'transfer')}</span><div><strong>${escapeHtml(item.name || `${item.type} #${item.id}`)}</strong><small>${escapeHtml(item.message || item.status || '')}</small></div><b>${progress}%</b></div><div class="progress"><span style="width:${progress}%"></span></div></article>`;
+function queueMarkup() {
+  const jobs = [...state.jobs.values()].reverse();
+  const uploads = [...state.uploadTransfers.values()].reverse();
+  const transferItems = [
+    ...uploads.map(uploadTransferMarkup),
+    ...jobs.map((job) => `
+    <article class="job">
+      <strong>${escapeHtml(job.type)} #${escapeHtml(job.id)}</strong>
+      <div class="muted">${escapeHtml(job.status)} · ${escapeHtml(job.message || '')}</div>
+      <div class="progress"><div style="width:${Number(job.progress) || 0}%"></div></div>
+    </article>
+  `)
+  ];
+  const jobMarkup = transferItems.length ? transferItems.join('') : '<p class="muted">Keine Transfers.</p>';
+  const debugSection = state.config?.debug ? debugMarkup() : '';
+
+  return `
+    <div class="queue-list">${jobMarkup}</div>
+    ${debugSection}
+  `;
 }
 
-async function saveSettings(form) {
-  const body = new URLSearchParams({ readOnly: form.elements.write.checked ? '0' : '1', debug: form.elements.debug.checked ? '1' : '0' });
-  appendCsrf(body);
-  try {
-    state.config = await api(endpoint('config'), { method: 'POST', headers: formHeaders(), body });
-    state.status = 'Einstellungen gespeichert';
-    state.drawer = null;
-    renderContent();
-    renderDrawer();
-  } catch (error) { showToast(error.message, 'error'); }
+function uploadTransferMarkup(upload) {
+  const progress = Math.max(0, Math.min(100, Number(upload.progress) || 0));
+  const fileText = `${upload.completedFiles + upload.skippedFiles}/${upload.totalFiles} Dateien`;
+  const byteText = `${formatBytes(upload.uploadedBytes)} / ${formatBytes(upload.totalBytes)}`;
+  const detail = upload.currentFile ? ` · ${upload.currentFile}` : '';
+  const skipped = upload.skippedFiles ? ` · ${upload.skippedFiles} übersprungen` : '';
+  const overwritten = upload.overwrittenFiles ? ` · ${upload.overwrittenFiles} überschrieben` : '';
+  return `
+    <article class="job upload-job">
+      <strong>Upload #${escapeHtml(upload.id)}</strong>
+      <div class="muted">${escapeHtml(upload.status)} · ${escapeHtml(fileText)} · ${escapeHtml(byteText)}${escapeHtml(detail)}${escapeHtml(skipped)}${escapeHtml(overwritten)}</div>
+      <div class="progress"><div style="width:${progress}%"></div></div>
+    </article>
+  `;
 }
 
-async function uploadFiles(files) {
-  if (!files.length || isReadOnly()) return;
-  const input = root.querySelector('#fileUpload');
-  const folderInput = root.querySelector('#folderUpload');
-  const transfer = { id: Date.now(), type: 'upload', name: files.length === 1 ? files[0].name : `${files.length} Dateien`, status: 'Wird hochgeladen', message: state.path, progress: 5 };
-  state.uploads.push(transfer);
-  updateTransferBadge();
-  state.drawer = 'transfers';
-  renderDrawer();
-  const form = new FormData();
-  files.forEach((file) => {
-    form.append(PHP_API ? 'files[]' : 'files', file, file.name);
-    form.append('paths[]', file.webkitRelativePath || file.name);
+function debugMarkup() {
+  const debugMarkup = state.debug.length ? state.debug.slice(-12).reverse().map((item) => `
+    <article class="debug-entry">
+      <strong>#${item.id} ${escapeHtml(item.label)}</strong>
+      <time>${escapeHtml(item.time)}</time>
+      <pre>${escapeHtml(JSON.stringify(item.data, null, 2))}</pre>
+    </article>
+  `).join('') : '<p class="muted">Noch keine Debug-Einträge.</p>';
+
+  return `
+    <section class="debug-log" aria-label="Debug-Protokoll">
+      <header>
+        <strong>Debug</strong>
+        <button type="button" data-action="clear-debug">Leeren</button>
+      </header>
+      ${debugMarkup}
+    </section>
+  `;
+}
+
+function bindQueueActions(root) {
+  root.querySelector('[data-action="clear-debug"]')?.addEventListener('click', () => {
+    state.debug = [];
+    updateTransferPanel();
   });
-  const token = getCsrfToken();
-  if (token) form.append('csrf_token', token);
-  try {
-    await api(endpoint('upload', { path: state.path }), { method: 'POST', body: form });
-    transfer.progress = 100;
-    transfer.status = 'Abgeschlossen';
-    showToast(`${files.length} ${files.length === 1 ? 'Datei' : 'Dateien'} hochgeladen`);
-    await navigate(state.path, { replace: true });
-  } catch (error) {
-    transfer.status = 'Fehlgeschlagen';
-    transfer.message = error.message;
-    showToast(error.message, 'error');
-  } finally {
-    input.value = '';
-    folderInput.value = '';
-    updateTransferBadge();
-    renderDrawer();
+}
+
+function toggleTransferPanel() {
+  if (state.transferPanelVisible) {
+    hideTransferPanel();
+  } else {
+    showTransferPanel();
   }
 }
 
-function downloadSelected() {
-  if (!PHP_API) return showToast('Downloads stehen nur im Unraid-Plugin zur Verfügung.', 'error');
-  const paths = selectedEntries().map((entry) => entry.path);
-  if (!paths.length) return;
-  const query = paths.length === 1 ? `path=${encodeURIComponent(paths[0])}` : `paths=${encodeURIComponent(JSON.stringify(paths))}`;
-  const link = document.createElement('a');
-  link.href = `${API_BASE}/download.php?${query}`;
-  link.click();
-}
-
-async function renameSelected() {
-  const entry = selectedEntries()[0];
-  if (!entry) return;
-  const next = await promptDialog('Umbenennen', 'Neuer Name', entry.name);
-  if (!next || next === entry.name) return;
-  if (next.includes('/') || next.includes('\\') || next === '.' || next === '..' || next.includes('\0')) {
-    return showToast('Der Dateiname enthält ungültige Zeichen.', 'error');
+function showTransferPanel() {
+  if (state.transferAutoHideTimer) {
+    clearTimeout(state.transferAutoHideTimer);
+    state.transferAutoHideTimer = null;
   }
-  await createJob('move', entry.path, joinPath(parentPath(entry.path), next));
+  state.transferPanelVisible = true;
+  state.transferPanelClosing = false;
+  renderTransferPanel();
 }
 
-async function transferSelected(type) {
-  const entries = selectedEntries();
-  const destination = await promptDialog(type === 'copy' ? 'Kopieren' : 'Verschieben', 'Zielordner', state.path);
-  if (!destination) return;
-  for (const entry of entries) await createJob(type, entry.path, joinPath(destination, entry.name));
+function hideTransferPanel() {
+  if (!state.transferPanelVisible && !state.transferPanelClosing) {
+    return;
+  }
+  if (state.transferAutoHideTimer) {
+    clearTimeout(state.transferAutoHideTimer);
+    state.transferAutoHideTimer = null;
+  }
+  state.transferPanelVisible = false;
+  state.transferPanelClosing = true;
+  renderTransferPanel();
+  setTimeout(() => {
+    if (!state.transferPanelVisible) {
+      state.transferPanelClosing = false;
+      renderTransferPanel();
+    }
+  }, 220);
 }
 
-async function deleteSelected() {
-  const entries = selectedEntries();
-  if (!entries.length) return;
-  const confirmed = await confirmDialog('Endgültig löschen?', entries.length === 1 ? `„${entries[0].name}“ wird direkt vom Dateisystem gelöscht.` : `${entries.length} Elemente werden direkt vom Dateisystem gelöscht.`);
-  if (!confirmed) return;
-  for (const entry of entries) await createJob('delete', entry.path);
+function scheduleTransferAutoHide() {
+  if (!state.transferPanelVisible || activeTransferCount() > 0 || state.transferAutoHideTimer) {
+    return;
+  }
+  state.transferAutoHideTimer = setTimeout(() => {
+    state.transferAutoHideTimer = null;
+    if (activeTransferCount() === 0) {
+      hideTransferPanel();
+    }
+  }, 2200);
 }
 
-async function createJob(type, source, destination = null) {
-  const body = new URLSearchParams({ source });
-  if (destination) body.set('destination', destination);
+function activeTransferCount() {
+  const activeJobs = [...state.jobs.values()].filter((job) => job.type !== 'size' && ['queued', 'running', 'cancel_requested'].includes(job.status)).length;
+  const activeUploads = [...state.uploadTransfers.values()].filter((upload) => ['queued', 'running'].includes(upload.status)).length;
+  return activeJobs + activeUploads;
+}
+
+function renderTransferPanel() {
+  const existing = appShell.querySelector('.transfer-panel');
+  if (!state.transferPanelVisible && !state.transferPanelClosing) {
+    existing?.remove();
+    transferButton.classList.remove('active');
+    transferButton.setAttribute('aria-expanded', 'false');
+    return;
+  }
+
+  const panel = existing || document.createElement('aside');
+  panel.className = `transfer-panel ${state.transferPanelClosing ? 'closing' : 'open'}`;
+  panel.setAttribute('aria-label', 'Transfers');
+  panel.innerHTML = `
+    <header class="transfer-panel-header">
+      <strong>Transfers</strong>
+      <button type="button" class="icon" data-action="close-transfers" title="Schließen">${iconSvg('close')}</button>
+    </header>
+    <div class="transfer-panel-body">${queueMarkup()}</div>
+  `;
+  if (!existing) {
+    appShell.appendChild(panel);
+  }
+
+  const buttonRect = transferButton.getBoundingClientRect();
+  const shellRect = appShell.getBoundingClientRect();
+  const panelWidth = Math.min(520, Math.max(360, shellRect.width - 32));
+  const right = Math.max(16, shellRect.right - buttonRect.right);
+  panel.style.width = `${panelWidth}px`;
+  panel.style.right = `${right}px`;
+  panel.style.top = `${buttonRect.bottom - shellRect.top + 8}px`;
+
+  panel.querySelector('[data-action="close-transfers"]').addEventListener('click', () => hideTransferPanel());
+  bindQueueActions(panel);
+  transferButton.classList.add('active');
+  transferButton.setAttribute('aria-expanded', 'true');
+}
+
+function toggleSettingsPanel() {
+  state.settingsPanelVisible = !state.settingsPanelVisible;
+  renderSettingsPanel();
+}
+
+function renderSettingsPanel() {
+  const existing = appShell.querySelector('.settings-panel');
+  if (!state.settingsPanelVisible) {
+    existing?.remove();
+    settingsButton.classList.remove('active');
+    settingsButton.setAttribute('aria-expanded', 'false');
+    return;
+  }
+
+  const panel = existing || document.createElement('aside');
+  panel.className = 'settings-panel';
+  panel.setAttribute('aria-label', 'Einstellungen');
+  panel.innerHTML = `
+    <header class="settings-panel-header">
+      <strong>Einstellungen</strong>
+      <button type="button" class="icon" data-action="close-settings" title="Schließen">${iconSvg('close')}</button>
+    </header>
+    <div class="settings-panel-body">
+      <label class="setting-row">
+        <span>
+          <strong>Debug</strong>
+          <small>Debug-Protokoll im Transfers-Panel anzeigen</small>
+        </span>
+        <input type="checkbox" data-setting="debug" ${state.config?.debug ? 'checked' : ''}>
+      </label>
+      <label class="setting-row">
+        <span>
+          <strong>Schreibzugriff</strong>
+          <small>Upload, Rename, Move und Copy erlauben</small>
+        </span>
+        <input type="checkbox" data-setting="write" ${state.config && !state.config.readOnly ? 'checked' : ''}>
+      </label>
+    </div>
+  `;
+  if (!existing) {
+    appShell.appendChild(panel);
+  }
+
+  const buttonRect = settingsButton.getBoundingClientRect();
+  const shellRect = appShell.getBoundingClientRect();
+  panel.style.right = `${Math.max(16, shellRect.right - buttonRect.right)}px`;
+  panel.style.top = `${buttonRect.bottom - shellRect.top + 8}px`;
+
+  panel.querySelector('[data-action="close-settings"]').addEventListener('click', () => {
+    state.settingsPanelVisible = false;
+    renderSettingsPanel();
+  });
+  panel.querySelector('[data-setting="debug"]').addEventListener('change', (event) => {
+    saveSettings({ debug: event.currentTarget.checked });
+  });
+  panel.querySelector('[data-setting="write"]').addEventListener('change', (event) => {
+    saveSettings({ readOnly: !event.currentTarget.checked });
+  });
+  settingsButton.classList.add('active');
+  settingsButton.setAttribute('aria-expanded', 'true');
+}
+
+async function saveSettings(changes) {
+  const body = new URLSearchParams();
+  const readOnly = changes.readOnly ?? state.config.readOnly;
+  const debug = changes.debug ?? state.config.debug;
+  body.set('readOnly', readOnly ? '1' : '0');
+  body.set('debug', debug ? '1' : '0');
   appendCsrf(body);
   try {
-    const job = await api(endpoint('job', { action: type }), { method: 'POST', headers: formHeaders(), body });
-    state.jobs.set(job.id, job);
-    state.drawer = 'transfers';
-    renderDrawer();
-    updateTransferBadge();
-    pollJob(job.id);
-  } catch (error) { showToast(error.message, 'error'); }
+    state.config = await api(apiUrl('config.php'), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
+      body
+    });
+    updateStatusText();
+    if (!state.config.debug) {
+      state.debug = [];
+    }
+    render();
+  } catch (error) {
+    showError(error);
+  }
+}
+
+function updateStatusText() {
+  if (!state.config) return;
+  statusText.textContent = `${state.config.roots.length} Root, ${state.config.readOnly ? 'Read-only' : 'Schreibzugriff aktiv'} · Debug ${state.config.debug ? 'aktiv' : 'aus'} · ${APP_VERSION}`;
+}
+
+function isReadOnly() {
+  return Boolean(state.config?.readOnly);
+}
+
+async function loadExplorer(win, targetPath) {
+  win.data.loading = true;
+  win.data.error = null;
+  win.data.path = targetPath;
+  render();
+  try {
+    const result = await api(apiUrl(`list.php?path=${encodeURIComponent(targetPath)}`));
+    win.data.path = result.path;
+    win.data.entries = result.entries;
+    reconcileExplorerSelection(win);
+  } catch (error) {
+    win.data.error = error.message;
+  } finally {
+    win.data.loading = false;
+    render();
+  }
+}
+
+async function handleDrop(event, win, targetPath) {
+  const uploadItems = await getDroppedUploadItems(event);
+  recordDebug('html.drop', {
+    targetPath,
+    types: dataTransferTypes(event),
+    files: uploadItems.map((item) => ({ name: item.path, size: item.file.size }))
+  });
+  if (state.config.readOnly) {
+    showError(new Error('Read-only mode ist aktiv.'));
+    return;
+  }
+
+  if (uploadItems.length) {
+    await uploadFileList(win, uploadItems, targetPath);
+  }
+}
+
+async function uploadFileList(win, files, targetPath) {
+  if (isReadOnly()) {
+    showError(new Error('Read-only mode ist aktiv.'));
+    return;
+  }
+  if (!files.length) return;
+  const uploadItems = normalizeUploadItems(files);
+  const transfer = createUploadTransfer(targetPath, uploadItems);
+  let overwriteAll = false;
+  for (const [index, item] of uploadItems.entries()) {
+    updateUploadTransfer(transfer, {
+      status: 'running',
+      currentFile: item.path,
+      currentIndex: index + 1
+    });
+    recordDebug('upload.file.request', { path: item.path, size: item.file.size, index: index + 1, total: uploadItems.length });
+    try {
+      await uploadFileChunked(targetPath, item.file, item.path, false, (bytes) => {
+        addUploadProgress(transfer, bytes);
+      });
+      updateUploadTransfer(transfer, {
+        completedFiles: transfer.completedFiles + 1,
+        currentFile: item.path,
+        progress: uploadProgressPercent(transfer)
+      });
+      recordDebug('upload.file.done', { path: item.path, index: index + 1, total: uploadItems.length, overwrite: false });
+    } catch (error) {
+      if (error.status !== 409) {
+        if (isLocalFileReadError(error)) {
+          updateUploadTransfer(transfer, {
+            skippedFiles: transfer.skippedFiles + 1,
+            skippedBytes: transfer.skippedBytes + Number(item.file.size || 0),
+            currentFile: item.path,
+            progress: uploadProgressPercent(transfer)
+          }, true);
+          recordDebug('upload.file.unreadable', {
+            path: item.path,
+            index: index + 1,
+            total: uploadItems.length,
+            error: serializeError(error)
+          });
+          continue;
+        }
+        updateUploadTransfer(transfer, {
+          status: 'failed',
+          message: error.message || 'Upload fehlgeschlagen',
+          currentFile: item.path,
+          progress: uploadProgressPercent(transfer)
+        }, true);
+        throw error;
+      }
+      const conflictAction = overwriteAll ? 'overwrite' : await askUploadConflict({
+        path: item.path,
+        targetPath,
+        index: index + 1,
+        total: uploadItems.length
+      });
+      if (conflictAction === 'overwrite-all') {
+        overwriteAll = true;
+      }
+      const overwrite = overwriteAll || conflictAction === 'overwrite';
+      recordDebug('upload.overwrite.prompt', { path: item.path, action: conflictAction, overwrite });
+      if (!overwrite) {
+        updateUploadTransfer(transfer, {
+          skippedFiles: transfer.skippedFiles + 1,
+          skippedBytes: transfer.skippedBytes + Number(item.file.size || 0),
+          currentFile: item.path,
+          progress: uploadProgressPercent(transfer)
+        });
+        recordDebug('upload.file.skipped', { path: item.path, index: index + 1, total: uploadItems.length });
+        continue;
+      }
+      await uploadFileChunked(targetPath, item.file, item.path, true, (bytes) => {
+        addUploadProgress(transfer, bytes);
+      });
+      updateUploadTransfer(transfer, {
+        completedFiles: transfer.completedFiles + 1,
+        overwrittenFiles: transfer.overwrittenFiles + 1,
+        currentFile: item.path,
+        progress: uploadProgressPercent(transfer)
+      });
+      recordDebug('upload.file.done', { path: item.path, index: index + 1, total: uploadItems.length, overwrite: true });
+    }
+  }
+  updateUploadTransfer(transfer, {
+    status: 'completed',
+    message: 'Abgeschlossen',
+    currentFile: '',
+    progress: 100
+  }, true);
+  scheduleTransferAutoHide();
+  await loadExplorer(win, targetPath);
+}
+
+async function uploadFileChunked(targetPath, file, relativePath, overwrite = false, onChunkUploaded = null) {
+  const chunkSize = 256 * 1024;
+  const totalChunks = Math.max(1, Math.ceil(file.size / chunkSize));
+  let finalPayload = null;
+  for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex += 1) {
+    const start = chunkIndex * chunkSize;
+    const chunk = file.slice(start, Math.min(file.size, start + chunkSize));
+    const data = arrayBufferToBase64(await chunk.arrayBuffer());
+    const body = new URLSearchParams();
+    body.set('uploadMode', 'chunk');
+    body.set('relativePath', relativePath);
+    body.set('chunkIndex', String(chunkIndex));
+    body.set('totalChunks', String(totalChunks));
+    body.set('data', data);
+    if (overwrite) {
+      body.set('overwrite', '1');
+    }
+    appendCsrf(body);
+    const response = await fetch(apiUrl(`upload.php?path=${encodeURIComponent(targetPath)}`), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
+      body
+    });
+    const text = await response.text();
+    recordDebug('upload.chunk.response', {
+      path: relativePath,
+      chunk: chunkIndex + 1,
+      totalChunks,
+      status: response.status,
+      ok: response.ok,
+      contentType: response.headers.get('content-type'),
+      body: text.slice(0, 1000)
+    });
+    if (!response.ok) {
+      const error = new Error(text || `${response.status} ${response.statusText}`);
+      error.status = response.status;
+      error.path = relativePath;
+      throw error;
+    }
+    onChunkUploaded?.(chunk.size);
+    try {
+      finalPayload = JSON.parse(text);
+    } catch (error) {
+      throw new Error(`Upload lieferte keine JSON-Antwort: ${text.slice(0, 200) || response.headers.get('content-type') || 'leer'}`);
+    }
+  }
+  if (!finalPayload?.uploaded?.length) {
+    throw new Error('Upload wurde vom Server nicht bestätigt.');
+  }
+}
+
+function createUploadTransfer(targetPath, uploadItems) {
+  const transfer = {
+    id: `upload-${state.nextUploadTransferId++}`,
+    status: 'queued',
+    message: 'Wartet',
+    targetPath,
+    totalFiles: uploadItems.length,
+    completedFiles: 0,
+    skippedFiles: 0,
+    overwrittenFiles: 0,
+    totalBytes: uploadItems.reduce((sum, item) => sum + Number(item.file?.size || 0), 0),
+    uploadedBytes: 0,
+    skippedBytes: 0,
+    currentFile: '',
+    currentIndex: 0,
+    progress: 0,
+    updatedAt: Date.now(),
+    lastRenderAt: 0
+  };
+  state.uploadTransfers.set(transfer.id, transfer);
+  showTransferPanel();
+  updateTransferPanel();
+  return transfer;
+}
+
+function updateUploadTransfer(transfer, patch, force = false) {
+  Object.assign(transfer, patch, {
+    message: patch.message ?? `${transfer.currentIndex || 0}/${transfer.totalFiles}`,
+    updatedAt: Date.now()
+  });
+  const now = Date.now();
+  if (force || now - transfer.lastRenderAt > 180) {
+    transfer.lastRenderAt = now;
+    updateTransferPanel();
+  }
+}
+
+function addUploadProgress(transfer, bytes) {
+  transfer.uploadedBytes += Number(bytes || 0);
+  updateUploadTransfer(transfer, {
+    progress: uploadProgressPercent(transfer)
+  });
+}
+
+function uploadProgressPercent(transfer) {
+  if (transfer.totalBytes > 0) {
+    return ((transfer.uploadedBytes + transfer.skippedBytes) / transfer.totalBytes) * 100;
+  }
+  if (transfer.totalFiles > 0) {
+    return ((transfer.completedFiles + transfer.skippedFiles) / transfer.totalFiles) * 100;
+  }
+  return 0;
+}
+
+function isLocalFileReadError(error) {
+  return error?.name === 'NotReadableError'
+    || error?.name === 'NotFoundError'
+    || error?.name === 'SecurityError';
+}
+
+function arrayBufferToBase64(buffer) {
+  const bytes = new Uint8Array(buffer);
+  let binary = '';
+  for (let index = 0; index < bytes.length; index += 0x8000) {
+    binary += String.fromCharCode(...bytes.subarray(index, index + 0x8000));
+  }
+  return btoa(binary);
+}
+
+function normalizeUploadItems(files) {
+  return files.map((item) => {
+    if (item?.file && item?.path) {
+      return item;
+    }
+    const file = item;
+    return {
+      file,
+      path: file.webkitRelativePath || file.name
+    };
+  }).filter((item) => item.file && item.path);
+}
+
+async function createJob(type, source, destination = null, refreshWindowIds = [], extra = {}) {
+  if (['move', 'copy', 'permissions'].includes(type) && isReadOnly()) {
+    showError(new Error('Read-only mode ist aktiv.'));
+    return null;
+  }
+  recordDebug('job.create.request', { type, source, destination, refreshWindowIds, extra });
+  const body = new URLSearchParams();
+  body.set('source', source);
+  if (destination !== null) {
+    body.set('destination', destination);
+  }
+  for (const [key, value] of Object.entries(extra)) {
+    if (value !== null && value !== undefined) {
+      body.set(key, String(value));
+    }
+  }
+  appendCsrf(body);
+  const job = await api(apiUrl(`job.php?action=${encodeURIComponent(type)}`), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
+    body
+  });
+  recordDebug('job.create.response', job);
+  state.jobs.set(job.id, job);
+  state.jobRefresh.set(job.id, {
+    windowIds: [...new Set(refreshWindowIds)].filter(Boolean),
+    done: false
+  });
+  showTransferPanel();
+  pollJob(job.id);
+  updateTransferPanel();
+  return job;
+}
+
+async function createSizeJob(entry) {
+  recordDebug('size.create.request', { source: entry.path });
+  const body = new URLSearchParams();
+  body.set('source', entry.path);
+  appendCsrf(body);
+  const job = await api(apiUrl('job.php?action=size'), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
+    body
+  });
+  recordDebug('size.create.response', job);
+  state.jobs.set(job.id, job);
+  state.sizeJobs.set(entry.path, job.id);
+  pollJob(job.id);
+  render();
+  return job;
+}
+
+async function reloadExplorerWindows(ids) {
+  const uniqueIds = new Set(ids);
+  const targets = state.windows.filter((win) => win.kind === 'explorer' && (uniqueIds.has(win.id) || !uniqueIds.size));
+  await Promise.all(targets.map((win) => loadExplorer(win, win.data.path)));
+}
+
+function hasDropPayload(event) {
+  const types = dataTransferTypes(event);
+  return types.includes('Files') || getDroppedFiles(event).length > 0;
+}
+
+async function getDroppedUploadItems(event) {
+  const entries = getDroppedEntries(event);
+  if (entries.length) {
+    const items = [];
+    for (const entry of entries) {
+      items.push(...await readDroppedEntry(entry, ''));
+    }
+    if (items.length) {
+      return items;
+    }
+  }
+  return getDroppedFiles(event).filter((file) => file.size > 0 || file.type || file.name.includes('.')).map((file) => ({
+    file,
+    path: file.webkitRelativePath || file.name
+  }));
+}
+
+function getDroppedEntries(event) {
+  try {
+    return [...(event.dataTransfer?.items || [])]
+      .map((item) => item.webkitGetAsEntry?.())
+      .filter(Boolean);
+  } catch (error) {
+    recordDebug('dataTransfer.entries.error', serializeError(error));
+    return [];
+  }
+}
+
+async function readDroppedEntry(entry, parentPath) {
+  const path = parentPath ? `${parentPath}/${entry.name}` : entry.name;
+  if (entry.isFile) {
+    const file = await new Promise((resolve, reject) => entry.file(resolve, reject));
+    return [{ file, path }];
+  }
+  if (!entry.isDirectory) {
+    return [];
+  }
+  const reader = entry.createReader();
+  const children = await readAllDirectoryEntries(reader);
+  const results = [];
+  for (const child of children) {
+    results.push(...await readDroppedEntry(child, path));
+  }
+  return results;
+}
+
+async function readAllDirectoryEntries(reader) {
+  const entries = [];
+  while (true) {
+    const batch = await new Promise((resolve, reject) => reader.readEntries(resolve, reject));
+    if (!batch.length) {
+      return entries;
+    }
+    entries.push(...batch);
+  }
+}
+
+function showError(error) {
+  const debug = recordDebug('error.shown', serializeError(error));
+  const message = error?.message || String(error);
+  const detail = debug ? `Debug #${debug.id}: ${debug.label}` : '';
+  showMessageDialog('Fehler', message, detail).catch(() => {});
+}
+
+function getDroppedFiles(event) {
+  try {
+    return [...(event.dataTransfer?.files || [])];
+  } catch {
+    return [];
+  }
+}
+
+function dataTransferTypes(event) {
+  try {
+    return [...(event.dataTransfer?.types || [])];
+  } catch (error) {
+    recordDebug('dataTransfer.types.error', serializeError(error));
+    return [];
+  }
+}
+
+function setEffectAllowed(event) {
+  try {
+    event.dataTransfer.effectAllowed = 'copyMove';
+  } catch (error) {
+    recordDebug('dataTransfer.effectAllowed.error', serializeError(error));
+  }
+}
+
+function setDropEffect(event, effect) {
+  try {
+    event.dataTransfer.dropEffect = effect;
+  } catch {
+    recordDebug('dataTransfer.dropEffect.error', { effect });
+  }
+}
+
+async function renameEntry(win, entry) {
+  if (isReadOnly()) {
+    showError(new Error('Read-only mode ist aktiv.'));
+    return;
+  }
+  const nextName = await showPromptDialog('Umbenennen', 'Neuer Name', entry.name);
+  if (!nextName || nextName === entry.name) {
+    return;
+  }
+  if (nextName.includes('/')) {
+    showError(new Error('Der Name darf keinen Slash enthalten.'));
+    return;
+  }
+  await createJob('move', entry.path, `${dirname(entry.path)}/${nextName}`, [win.id]);
+}
+
+async function promptTransfer(win, entry, type) {
+  if (isReadOnly()) {
+    showError(new Error('Read-only mode ist aktiv.'));
+    return;
+  }
+  const targetDir = await showPromptDialog(
+    type === 'copy' ? 'Kopieren' : 'Verschieben',
+    type === 'copy' ? 'Kopieren nach Ordner' : 'Verschieben nach Ordner',
+    win.data.path
+  );
+  if (!targetDir) {
+    return;
+  }
+  await createJob(type, entry.path, `${targetDir.replace(/\/$/, '')}/${entry.name}`, []);
+}
+
+async function deleteEntries(win, entry = null) {
+  if (isReadOnly()) {
+    showError(new Error('Read-only mode ist aktiv.'));
+    return;
+  }
+  const entries = entry && selectedPathSet(win).has(entry.path) ? selectedEntries(win) : (entry ? [entry] : selectedEntries(win));
+  if (!entries.length) {
+    showError(new Error('Keine Datei ausgewählt.'));
+    return;
+  }
+  const label = entries.length === 1 ? `"${entries[0].name}" wirklich löschen?` : `${entries.length} Objekte wirklich löschen?`;
+  const confirmed = await showConfirmDialog('Löschen bestätigen', label, 'Dieser Vorgang löscht direkt vom Dateisystem.', {
+    confirmLabel: 'Löschen',
+    danger: true
+  });
+  if (!confirmed) {
+    return;
+  }
+  for (const item of entries) {
+    await createJob('delete', item.path, null, [win.id]);
+  }
+}
+
+function openPermissionsDialog(win, entry) {
+  if (isReadOnly()) {
+    showError(new Error('Read-only mode ist aktiv.'));
+    return;
+  }
+  const entries = selectedPathSet(win).has(entry.path) ? selectedEntries(win) : [entry];
+  state.permissionsDialog = {
+    winId: win.id,
+    entries,
+    mode: normalizeMode(entry.permissions || '0755'),
+    owner: entry.owner || '',
+    group: entry.group || '',
+    recursive: false,
+    hasDirectory: entries.some((item) => item.type === 'directory')
+  };
+  render();
+}
+
+function downloadEntries(win, entry = null) {
+  const entries = entry && selectedPathSet(win).has(entry.path) ? selectedEntries(win) : (entry ? [entry] : [{
+    path: win.data.path,
+    name: basename(win.data.path),
+    type: 'directory'
+  }]);
+  const paths = entries.map((item) => item.path);
+  const query = paths.length === 1
+    ? `path=${encodeURIComponent(paths[0])}`
+    : `paths=${encodeURIComponent(JSON.stringify(paths))}`;
+  recordDebug('download.start', { paths });
+  const link = document.createElement('a');
+  link.href = apiUrl(`download.php?${query}`);
+  link.download = '';
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+}
+
+function renderPermissionsDialog() {
+  const dialog = state.permissionsDialog;
+  const overlay = document.createElement('div');
+  overlay.className = 'modal-overlay';
+  overlay.innerHTML = `
+    <form class="permissions-modal" aria-label="Berechtigungen ändern">
+      <header>
+        <strong>Berechtigungen ändern</strong>
+        <button type="button" class="icon" data-action="cancel" title="Schließen" aria-label="Schließen">${iconSvg('close')}</button>
+      </header>
+      <div class="modal-body">
+        <p class="muted">${dialog.entries.length === 1 ? escapeHtml(dialog.entries[0].name) : `${dialog.entries.length} Objekte ausgewählt`}</p>
+        <label class="check-row">
+          <input type="checkbox" name="changeMode" checked>
+          <span>Berechtigungen ändern</span>
+        </label>
+        ${permissionMatrixMarkup(dialog.mode)}
+        <label class="field-row">
+          <span>Numerischer Wert</span>
+          <input name="mode" class="mode-input" inputmode="numeric" pattern="[0-7]{3,4}" value="${escapeAttr(dialog.mode)}" aria-label="Numerischer Wert">
+        </label>
+        <label class="check-row">
+          <input type="checkbox" name="changeOwner">
+          <span>Besitzer ändern</span>
+        </label>
+        <input name="owner" value="${escapeAttr(dialog.owner)}" aria-label="Besitzer" disabled>
+        <label class="check-row">
+          <input type="checkbox" name="changeGroup">
+          <span>Gruppe ändern</span>
+        </label>
+        <input name="group" value="${escapeAttr(dialog.group)}" aria-label="Gruppe" disabled>
+        <label class="check-row ${dialog.hasDirectory ? '' : 'disabled'}">
+          <input type="checkbox" name="recursive" ${dialog.hasDirectory ? '' : 'disabled'}>
+          <span>Rekursiv auf Unterordner und Dateien anwenden</span>
+        </label>
+      </div>
+      <footer>
+        <button type="button" data-action="cancel">Abbrechen</button>
+        <button type="submit" class="primary">Anwenden</button>
+      </footer>
+    </form>
+  `;
+
+  const form = overlay.querySelector('form');
+  form.addEventListener('click', (event) => event.stopPropagation());
+  overlay.addEventListener('click', () => closePermissionsDialog());
+  overlay.querySelectorAll('[data-action="cancel"]').forEach((button) => {
+    button.addEventListener('click', () => closePermissionsDialog());
+  });
+  for (const checkboxName of ['changeMode', 'changeOwner', 'changeGroup']) {
+    const checkbox = form.elements[checkboxName];
+    const inputName = checkboxName.replace('change', '').toLowerCase();
+    const input = form.elements[inputName];
+    checkbox.addEventListener('change', () => {
+      input.disabled = !checkbox.checked;
+      if (!input.disabled) input.focus();
+    });
+  }
+  bindPermissionMatrix(form);
+  form.addEventListener('submit', (event) => {
+    event.preventDefault();
+    applyPermissionsDialog(form).catch(showError);
+  });
+  return overlay;
+}
+
+function askUploadConflict(details) {
+  return new Promise((resolve) => {
+    state.uploadConflictDialog = { ...details, resolve };
+    render();
+  });
+}
+
+function renderUploadConflictDialog() {
+  const dialog = state.uploadConflictDialog;
+  const overlay = document.createElement('div');
+  overlay.className = 'modal-overlay';
+  overlay.innerHTML = `
+    <form class="permissions-modal conflict-modal" aria-label="Datei existiert bereits">
+      <header>
+        <strong>Datei existiert bereits</strong>
+        <button type="button" class="icon" data-action="skip" title="Überspringen" aria-label="Überspringen">${iconSvg('close')}</button>
+      </header>
+      <div class="modal-body">
+        <p>Im Zielordner existiert bereits eine Datei mit diesem Namen.</p>
+        <dl class="conflict-details">
+          <dt>Datei</dt>
+          <dd>${escapeHtml(dialog.path)}</dd>
+          <dt>Ziel</dt>
+          <dd>${escapeHtml(dialog.targetPath)}</dd>
+          <dt>Upload</dt>
+          <dd>${escapeHtml(`${dialog.index}/${dialog.total}`)}</dd>
+        </dl>
+      </div>
+      <footer>
+        <button type="button" data-action="skip">Überspringen</button>
+        <button type="button" data-action="overwrite">Überschreiben</button>
+        <button type="submit" class="primary">Alle überschreiben</button>
+      </footer>
+    </form>
+  `;
+
+  const form = overlay.querySelector('form');
+  form.addEventListener('click', (event) => event.stopPropagation());
+  overlay.addEventListener('click', () => closeUploadConflictDialog('skip'));
+  overlay.querySelectorAll('[data-action="skip"]').forEach((button) => {
+    button.addEventListener('click', () => closeUploadConflictDialog('skip'));
+  });
+  overlay.querySelector('[data-action="overwrite"]').addEventListener('click', () => closeUploadConflictDialog('overwrite'));
+  form.addEventListener('submit', (event) => {
+    event.preventDefault();
+    closeUploadConflictDialog('overwrite-all');
+  });
+  setTimeout(() => {
+    form.querySelector('.primary')?.focus();
+  }, 0);
+  return overlay;
+}
+
+function closeUploadConflictDialog(action) {
+  const dialog = state.uploadConflictDialog;
+  if (!dialog) return;
+  state.uploadConflictDialog = null;
+  dialog.resolve(action);
+  render();
+}
+
+function showMessageDialog(title, message, detail = '') {
+  return showUiDialog({
+    type: 'message',
+    title,
+    message,
+    detail,
+    confirmLabel: 'OK'
+  });
+}
+
+function showConfirmDialog(title, message, detail = '', options = {}) {
+  return showUiDialog({
+    type: 'confirm',
+    title,
+    message,
+    detail,
+    confirmLabel: options.confirmLabel || 'OK',
+    cancelLabel: options.cancelLabel || 'Abbrechen',
+    danger: Boolean(options.danger)
+  });
+}
+
+function showPromptDialog(title, label, value = '') {
+  return showUiDialog({
+    type: 'prompt',
+    title,
+    message: label,
+    value,
+    confirmLabel: 'OK',
+    cancelLabel: 'Abbrechen'
+  });
+}
+
+function showUiDialog(options) {
+  return new Promise((resolve) => {
+    state.uiDialog = { ...options, resolve };
+    render();
+  });
+}
+
+function renderUiDialog() {
+  const dialog = state.uiDialog;
+  const overlay = document.createElement('div');
+  overlay.className = 'modal-overlay';
+  const isPrompt = dialog.type === 'prompt';
+  const isConfirm = dialog.type === 'confirm';
+  overlay.innerHTML = `
+    <form class="permissions-modal ui-modal" aria-label="${escapeAttr(dialog.title)}">
+      <header>
+        <strong>${escapeHtml(dialog.title)}</strong>
+        <button type="button" class="icon" data-action="cancel" title="Schließen" aria-label="Schließen">${iconSvg('close')}</button>
+      </header>
+      <div class="modal-body">
+        <p>${escapeHtml(dialog.message || '')}</p>
+        ${dialog.detail ? `<p class="muted">${escapeHtml(dialog.detail)}</p>` : ''}
+        ${isPrompt ? `<input name="value" value="${escapeAttr(dialog.value || '')}" aria-label="${escapeAttr(dialog.message || dialog.title)}">` : ''}
+      </div>
+      <footer>
+        ${isConfirm || isPrompt ? `<button type="button" data-action="cancel">${escapeHtml(dialog.cancelLabel || 'Abbrechen')}</button>` : ''}
+        <button type="submit" class="primary ${dialog.danger ? 'danger-action' : ''}">${escapeHtml(dialog.confirmLabel || 'OK')}</button>
+      </footer>
+    </form>
+  `;
+
+  const form = overlay.querySelector('form');
+  form.addEventListener('click', (event) => event.stopPropagation());
+  overlay.addEventListener('click', () => closeUiDialog(cancelDialogValue(dialog)));
+  overlay.querySelectorAll('[data-action="cancel"]').forEach((button) => {
+    button.addEventListener('click', () => closeUiDialog(cancelDialogValue(dialog)));
+  });
+  form.addEventListener('submit', (event) => {
+    event.preventDefault();
+    if (isPrompt) {
+      closeUiDialog(form.elements.value.value);
+      return;
+    }
+    closeUiDialog(isConfirm ? true : undefined);
+  });
+  setTimeout(() => {
+    const focusTarget = isPrompt ? form.elements.value : form.querySelector('.primary');
+    focusTarget?.focus();
+    if (isPrompt) {
+      focusTarget.select();
+    }
+  }, 0);
+  return overlay;
+}
+
+function cancelDialogValue(dialog) {
+  if (dialog.type === 'confirm') return false;
+  if (dialog.type === 'prompt') return null;
+  return undefined;
+}
+
+function closeUiDialog(value) {
+  const dialog = state.uiDialog;
+  if (!dialog) return;
+  state.uiDialog = null;
+  dialog.resolve(value);
+  render();
+}
+
+function permissionMatrixMarkup(mode) {
+  const digits = modeToDigits(mode);
+  const rows = [
+    ['owner', 'Besitzer-Berechtigungen', digits[0]],
+    ['group', 'Gruppen-Berechtigungen', digits[1]],
+    ['public', 'Öffentliche Berechtigungen', digits[2]]
+  ];
+  return rows.map(([scope, label, digit]) => `
+    <fieldset class="permission-scope" data-scope="${scope}">
+      <legend>${label}</legend>
+      ${permissionCheck(scope, 'read', 'Lesen', digit & 4)}
+      ${permissionCheck(scope, 'write', 'Schreiben', digit & 2)}
+      ${permissionCheck(scope, 'execute', 'Ausführen', digit & 1)}
+    </fieldset>
+  `).join('');
+}
+
+function permissionCheck(scope, bit, label, checked) {
+  return `
+    <label>
+      <input type="checkbox" data-permission="${scope}.${bit}" ${checked ? 'checked' : ''}>
+      <span>${label}</span>
+    </label>
+  `;
+}
+
+function bindPermissionMatrix(form) {
+  const changeMode = form.elements.changeMode;
+  const modeInput = form.elements.mode;
+  const permissionInputs = [...form.querySelectorAll('[data-permission]')];
+  const setModeDisabled = () => {
+    modeInput.disabled = !changeMode.checked;
+    for (const input of permissionInputs) {
+      input.disabled = !changeMode.checked;
+    }
+  };
+  changeMode.addEventListener('change', setModeDisabled);
+  for (const input of permissionInputs) {
+    input.addEventListener('change', () => {
+      changeMode.checked = true;
+      setModeDisabled();
+      modeInput.value = modeFromPermissionInputs(form);
+    });
+  }
+  modeInput.addEventListener('input', () => {
+    changeMode.checked = true;
+    setModeDisabled();
+    syncPermissionInputsFromMode(form, modeInput.value);
+  });
+  setModeDisabled();
+}
+
+function modeFromPermissionInputs(form) {
+  const scopes = ['owner', 'group', 'public'];
+  const values = scopes.map((scope) => {
+    let value = 0;
+    if (form.querySelector(`[data-permission="${scope}.read"]`)?.checked) value += 4;
+    if (form.querySelector(`[data-permission="${scope}.write"]`)?.checked) value += 2;
+    if (form.querySelector(`[data-permission="${scope}.execute"]`)?.checked) value += 1;
+    return String(value);
+  });
+  return values.join('');
+}
+
+function syncPermissionInputsFromMode(form, mode) {
+  if (!/^[0-7]{3,4}$/.test(mode)) return;
+  const digits = modeToDigits(mode);
+  for (const [index, scope] of ['owner', 'group', 'public'].entries()) {
+    const digit = digits[index];
+    const map = { read: 4, write: 2, execute: 1 };
+    for (const [bit, value] of Object.entries(map)) {
+      const input = form.querySelector(`[data-permission="${scope}.${bit}"]`);
+      if (input) input.checked = Boolean(digit & value);
+    }
+  }
+}
+
+function normalizeMode(mode) {
+  const value = String(mode || '');
+  if (!/^[0-7]{3,4}$/.test(value)) return '755';
+  return value.length === 4 ? value.slice(1) : value;
+}
+
+function modeToDigits(mode) {
+  const normalized = normalizeMode(mode);
+  return normalized.split('').slice(-3).map((digit) => Number(digit));
+}
+
+function closePermissionsDialog() {
+  state.permissionsDialog = null;
+  render();
+}
+
+async function applyPermissionsDialog(form) {
+  const dialog = state.permissionsDialog;
+  if (!dialog) return;
+  const options = {
+    mode: form.elements.changeMode.checked ? form.elements.mode.value.trim() : '',
+    owner: form.elements.changeOwner.checked ? form.elements.owner.value.trim() : '',
+    group: form.elements.changeGroup.checked ? form.elements.group.value.trim() : '',
+    recursive: form.elements.recursive.checked ? '1' : '0'
+  };
+  if (!options.mode && !options.owner && !options.group) {
+    showError(new Error('Keine Änderung angegeben.'));
+    return;
+  }
+  if (options.mode && !/^[0-7]{3,4}$/.test(options.mode)) {
+    showError(new Error('Berechtigungen müssen aus 3 oder 4 Oktalziffern bestehen.'));
+    return;
+  }
+  const win = state.windows.find((item) => item.id === dialog.winId);
+  closePermissionsDialog();
+  for (const item of dialog.entries) {
+    await createJob('permissions', item.path, null, [win?.id], options);
+  }
+}
+
+function showPropertiesForEntry(win, entry) {
+  selectEntry(win, entry);
+  openProperties(entry);
+}
+
+function showContextMenu(event, win, entry) {
+  const rect = workspace.getBoundingClientRect();
+  state.contextMenu = {
+    x: event.clientX - rect.left,
+    y: event.clientY - rect.top,
+    winId: win.id,
+    entryPath: entry?.path || null
+  };
+  render();
+}
+
+function renderContextMenu() {
+  const menu = document.createElement('div');
+  menu.className = 'context-menu';
+  menu.style.left = `${state.contextMenu.x}px`;
+  menu.style.top = `${state.contextMenu.y}px`;
+
+  const win = state.windows.find((item) => item.id === state.contextMenu.winId);
+  const entry = win?.data.entries?.find((item) => item.path === state.contextMenu.entryPath) || null;
+  const actions = [];
+
+  if (entry) {
+    if (entry.type === 'directory') {
+      actions.push(['Öffnen', () => loadExplorer(win, entry.path)]);
+    } else if (isPreviewable(entry)) {
+      actions.push(['Vorschau', () => openPreview(entry, win.id)]);
+    }
+    actions.push(['Eigenschaften', () => showPropertiesForEntry(win, entry)]);
+    actions.push(['Herunterladen', () => downloadEntries(win, entry)]);
+    if (!isReadOnly()) {
+      actions.push(['Umbenennen', () => renameEntry(win, entry)]);
+      actions.push(['Berechtigungen...', () => openPermissionsDialog(win, entry)]);
+      actions.push(['Kopieren nach...', () => promptTransfer(win, entry, 'copy')]);
+      actions.push(['Verschieben nach...', () => promptTransfer(win, entry, 'move')]);
+      actions.push(['Löschen', () => deleteEntries(win, entry)]);
+    }
+  } else {
+    actions.push(['Aktuellen Ordner herunterladen', () => downloadEntries(win, null)]);
+    actions.push(['Neu laden', () => loadExplorer(win, win.data.path)]);
+  }
+
+  for (const [label, action] of actions) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.textContent = label;
+    button.addEventListener('click', async () => {
+      state.contextMenu = null;
+      render();
+      try {
+        await action();
+      } catch (error) {
+        showError(error);
+      }
+    });
+    menu.appendChild(button);
+  }
+
+  setTimeout(() => {
+    const close = () => {
+      state.contextMenu = null;
+      render();
+      document.removeEventListener('click', close);
+      document.removeEventListener('keydown', keyClose);
+    };
+    const keyClose = (event) => {
+      if (event.key === 'Escape') close();
+    };
+    document.addEventListener('click', close);
+    document.addEventListener('keydown', keyClose);
+  }, 0);
+
+  return menu;
 }
 
 async function pollJob(id) {
   try {
-    const job = await api(endpoint('job', { id }));
+    const job = await api(apiUrl(`job.php?id=${encodeURIComponent(id)}`));
     state.jobs.set(id, job);
-    renderDrawer();
-    updateTransferBadge();
-    if (['queued', 'running', 'cancel_requested'].includes(job.status)) setTimeout(() => pollJob(id), 700);
-    else {
-      if (job.status === 'completed') { showToast(`${typeLabel({ type: job.type })} abgeschlossen`); await navigate(state.path, { replace: true }); }
-      else showToast(job.error || job.message || 'Dateioperation fehlgeschlagen', 'error');
+    updateTransferPanel();
+    if (['queued', 'running', 'cancel_requested'].includes(job.status)) {
+      setTimeout(() => pollJob(id), 700);
+    } else if (job.type === 'size') {
+      finishSizeJob(job);
+    } else {
+      await refreshAfterJob(job);
+      scheduleTransferAutoHide();
     }
-  } catch (error) { showToast(error.message, 'error'); }
+  } catch (error) {
+    recordDebug('job.poll.error', { id, error: serializeError(error) });
+    showError(error);
+  }
 }
 
-function updateTransferBadge() {
-  const active = [...state.jobs.values()].filter((item) => ['queued', 'running'].includes(item.status)).length + state.uploads.filter((item) => item.progress < 100 && item.status !== 'Fehlgeschlagen').length;
-  const badge = root.querySelector('#transferBadge');
-  badge.hidden = !active;
-  badge.textContent = active;
+function ensureDirectorySize(entry) {
+  if (state.sizeResults.has(entry.path) || state.sizeJobs.has(entry.path)) {
+    return;
+  }
+  state.sizeJobs.set(entry.path, 'pending');
+  createSizeJob(entry).catch((error) => {
+    state.sizeJobs.delete(entry.path);
+    showError(error);
+  });
 }
 
-function showContext(event, path) {
+function finishSizeJob(job) {
+  state.sizeJobs.delete(job.source);
+  if (job.status === 'completed' && job.result) {
+    state.sizeResults.set(job.source, job.result);
+  }
+  recordDebug('size.finish', { id: job.id, source: job.source, status: job.status, result: job.result || null });
+  updatePropertiesWindows();
+}
+
+async function refreshAfterJob(job) {
+  const refresh = state.jobRefresh.get(job.id);
+  if (refresh?.done) {
+    return;
+  }
+  if (refresh) {
+    refresh.done = true;
+  }
+  const windowIds = refresh?.windowIds || [];
+  recordDebug('job.refresh', { id: job.id, status: job.status, windowIds });
+  await reloadExplorerWindows(windowIds);
+  if (refresh) {
+    state.jobRefresh.delete(job.id);
+  }
+}
+
+function selectEntry(win, entry, scrollBody = null, event = null) {
+  if (state.suppressClickPath === entry.path) {
+    state.suppressClickPath = null;
+    restoreExplorerScroll(win, scrollBody);
+    return;
+  }
+  applyExplorerSelection(win, entry, event);
+  state.selectedEntry = entry;
+  focusWindow(win);
+  updateSelectedRows();
+  updatePropertiesWindows();
+  restoreExplorerScroll(win, scrollBody);
+}
+
+function applyExplorerSelection(win, entry, event = null) {
+  const entries = win.data.entries || [];
+  const current = selectedPathSet(win);
+  const toggle = Boolean(event?.ctrlKey || event?.metaKey);
+  const range = Boolean(event?.shiftKey && win.data.selectionAnchorPath);
+
+  if (range) {
+    const anchorIndex = entries.findIndex((item) => item.path === win.data.selectionAnchorPath);
+    const entryIndex = entries.findIndex((item) => item.path === entry.path);
+    if (anchorIndex >= 0 && entryIndex >= 0) {
+      const [start, end] = anchorIndex < entryIndex ? [anchorIndex, entryIndex] : [entryIndex, anchorIndex];
+      const paths = entries.slice(start, end + 1).map((item) => item.path);
+      win.data.selectedPaths = toggle ? [...new Set([...current, ...paths])] : paths;
+    } else {
+      win.data.selectedPaths = [entry.path];
+      win.data.selectionAnchorPath = entry.path;
+    }
+  } else if (toggle) {
+    if (current.has(entry.path)) {
+      current.delete(entry.path);
+    } else {
+      current.add(entry.path);
+    }
+    win.data.selectedPaths = [...current];
+    win.data.selectionAnchorPath = entry.path;
+  } else {
+    win.data.selectedPaths = [entry.path];
+    win.data.selectionAnchorPath = entry.path;
+  }
+
+  win.data.selectedPath = entry.path;
+  if (!win.data.selectedPaths.length) {
+    win.data.selectedPath = null;
+    win.data.selectionAnchorPath = null;
+  }
+}
+
+function reconcileExplorerSelection(win) {
+  const available = new Set((win.data.entries || []).map((entry) => entry.path));
+  win.data.selectedPaths = (win.data.selectedPaths || []).filter((path) => available.has(path));
+  if (!available.has(win.data.selectedPath)) {
+    win.data.selectedPath = win.data.selectedPaths[0] || null;
+  }
+  if (!available.has(win.data.selectionAnchorPath)) {
+    win.data.selectionAnchorPath = win.data.selectedPath;
+  }
+  if (state.selectedEntry && !available.has(state.selectedEntry.path) && state.focusedId === win.id) {
+    state.selectedEntry = null;
+  }
+}
+
+function selectedPathSet(win) {
+  return new Set(win?.data?.selectedPaths || (win?.data?.selectedPath ? [win.data.selectedPath] : []));
+}
+
+function selectedEntries(win) {
+  const paths = selectedPathSet(win);
+  return (win?.data?.entries || []).filter((entry) => paths.has(entry.path));
+}
+
+function shouldSuppressItemActivation() {
+  if (Date.now() <= state.suppressItemActivationUntil) {
+    recordDebug('item.activation.suppressed', { until: state.suppressItemActivationUntil });
+    return true;
+  }
+  return false;
+}
+
+function focusWindow(win) {
+  state.focusedId = win.id;
+  win.zIndex = ++state.zIndex;
+  for (const windowEl of workspace.querySelectorAll('.window')) {
+    windowEl.classList.toggle('focused', windowEl.dataset.windowId === win.id);
+  }
+  const current = workspace.querySelector(`.window[data-window-id="${win.id}"]`);
+  if (current) {
+    current.style.zIndex = win.zIndex;
+  }
+}
+
+function updateSelectedRows() {
+  for (const win of state.windows.filter((item) => item.kind === 'explorer')) {
+    const selected = selectedPathSet(win);
+    for (const row of workspace.querySelectorAll(`.window[data-window-id="${win.id}"] .file-row`)) {
+      row.classList.toggle('selected', selected.has(row.dataset.path));
+    }
+  }
+}
+
+function handleTypeAheadKey(event) {
+  if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return;
+  if (state.contextMenu || state.settingsPanelVisible) return;
+  if (isTypingTarget(document.activeElement)) return;
+  if (event.key.length !== 1) return;
+
+  const key = event.key.toLocaleLowerCase();
+  if (!/^[\p{L}\p{N}]$/u.test(key)) return;
+
+  const win = state.windows.find((item) => item.id === state.focusedId && item.kind === 'explorer');
+  if (!win || !win.data.entries?.length) return;
+
+  const now = Date.now();
+  const repeated = state.typeAhead.windowId === win.id && state.typeAhead.key === key && now - state.typeAhead.at < 1000;
+  const entries = win.data.entries;
+  const selectedIndex = entries.findIndex((entry) => entry.path === win.data.selectedPath);
+  const startIndex = repeated ? selectedIndex + 1 : Math.max(0, selectedIndex + 1);
+  const match = findTypeAheadMatch(entries, key, startIndex);
+  if (!match) return;
+
+  event.preventDefault();
+  state.typeAhead = { key, windowId: win.id, at: now };
+  win.data.selectedPath = match.path;
+  win.data.selectedPaths = [match.path];
+  win.data.selectionAnchorPath = match.path;
+  state.selectedEntry = match;
+  focusWindow(win);
+  updateSelectedRows();
+  updatePropertiesWindows();
+  scrollEntryIntoView(win, match.path);
+  recordDebug('typeahead.match', { key, path: match.path });
+}
+
+function findTypeAheadMatch(entries, key, startIndex) {
+  for (let offset = 0; offset < entries.length; offset += 1) {
+    const index = (startIndex + offset) % entries.length;
+    const entry = entries[index];
+    if (entry.name?.toLocaleLowerCase().startsWith(key)) {
+      return entry;
+    }
+  }
+  return null;
+}
+
+function scrollEntryIntoView(win, path) {
+  const row = workspace.querySelector(`.window[data-window-id="${win.id}"] .file-row[data-path="${cssEscape(path)}"]`);
+  row?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+}
+
+function isTypingTarget(element) {
+  if (!element) return false;
+  const tag = element.tagName;
+  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || element.isContentEditable;
+}
+
+function updatePropertiesWindows() {
+  for (const win of state.windows.filter((item) => item.kind === 'properties')) {
+    const body = workspace.querySelector(`.window[data-window-id="${win.id}"] .window-body`);
+    if (body) {
+      renderProperties(body);
+    }
+  }
+}
+
+function startItemPointerDrag(event, win, entry) {
+  if (event.button !== 0 || !entry) return;
+
+  const items = dragItemsForEntry(win, entry);
+  recordDebug('pointer.start', {
+    windowId: win.id,
+    path: entry.path,
+    type: entry.type,
+    count: items.length,
+    x: event.clientX,
+    y: event.clientY
+  });
+  state.pointerDrag = {
+    sourceWindowId: win.id,
+    path: entry.path,
+    name: entry.name,
+    type: entry.type,
+    items,
+    paths: items.map((item) => item.path),
+    startX: event.clientX,
+    startY: event.clientY,
+    active: false,
+    targetWindowId: null,
+    targetPath: null
+  };
+
+  const move = (moveEvent) => updateItemPointerDrag(moveEvent);
+  const up = (upEvent) => finishItemPointerDrag(upEvent, move, up);
+  document.addEventListener('pointermove', move);
+  document.addEventListener('pointerup', up, { once: true });
+  try {
+    event.currentTarget.setPointerCapture(event.pointerId);
+  } catch {}
+}
+
+function updateItemPointerDrag(event) {
+  const drag = state.pointerDrag;
+  if (!drag) return;
+
+  const distance = Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY);
+  if (!drag.active && distance < 6) {
+    return;
+  }
+
+  drag.active = true;
+  event.preventDefault();
+  document.body.classList.add('u-nav-dragging');
+  markDraggingRows(drag.paths, true);
+  markDropCandidates(drag.paths, true);
+  updatePointerDropTarget(event);
+}
+
+async function finishItemPointerDrag(event, move, up) {
+  document.removeEventListener('pointermove', move);
+  document.removeEventListener('pointerup', up);
+
+  const drag = state.pointerDrag;
+  clearPointerDropTarget();
+  document.body.classList.remove('u-nav-dragging');
+  if (!drag) return;
+
+  markDraggingRows(drag.paths, false);
+  markDropCandidates(drag.paths, false);
+  state.pointerDrag = null;
+
+  if (!drag.active) {
+    return;
+  }
+
+  event.preventDefault();
+  state.suppressClickPath = drag.path;
+  state.suppressItemActivationUntil = Date.now() + 450;
+  const target = findPointerDropTarget(event);
+  recordDebug('pointer.finish', {
+    source: drag.path,
+    sources: drag.paths,
+    target: target ? { windowId: target.windowId, path: target.path, rowPath: target.row?.dataset?.path || null } : null,
+    copy: event.altKey,
+    x: event.clientX,
+    y: event.clientY
+  });
+  if (!target) {
+    return;
+  }
+
+  try {
+    const jobs = drag.items.map((item) => ({
+      item,
+      destination: joinPath(target.path, item.name)
+    }));
+    recordDebug('pointer.destination', {
+      source: drag.path,
+      sources: drag.paths,
+      targetPath: target.path,
+      destinations: jobs.map((job) => job.destination),
+      targetIsRow: Boolean(target.row),
+      copy: event.altKey
+    });
+    validatePointerDropJobs(jobs, target.path);
+    for (const job of jobs) {
+      await createJob(event.altKey ? 'copy' : 'move', job.item.path, job.destination, [drag.sourceWindowId, target.windowId]);
+    }
+  } catch (error) {
+    showError(error);
+  }
+}
+
+function dragItemsForEntry(win, entry) {
+  const selected = selectedPathSet(win);
+  if (selected.has(entry.path)) {
+    const entries = selectedEntries(win);
+    if (entries.length) return entries;
+  }
+  return [entry];
+}
+
+function validatePointerDropJobs(jobs, targetPath) {
+  const destinations = new Set();
+  for (const { item, destination } of jobs) {
+    if (destinations.has(destination)) {
+      throw new Error('Mehrere Quellen würden am Ziel denselben Namen verwenden.');
+    }
+    destinations.add(destination);
+    if (destination === item.path || targetPath === item.path) {
+      throw new Error('Quelle und Ziel sind identisch.');
+    }
+    if (item.type === 'directory' && isPathInside(targetPath, item.path)) {
+      throw new Error('Ein Ordner kann nicht in sich selbst verschoben werden.');
+    }
+  }
+}
+
+function updatePointerDropTarget(event) {
+  clearPointerDropTarget();
+  const target = findPointerDropTarget(event);
+  if (!target) return;
+
+  state.pointerDrag.targetWindowId = target.windowId;
+  state.pointerDrag.targetPath = target.path;
+  const windowEl = workspace.querySelector(`.window[data-window-id="${target.windowId}"]`);
+  windowEl?.querySelector('.drop-zone')?.classList.add('drag-over');
+  if (target.row) {
+    target.row.classList.add('drop-target');
+  }
+}
+
+function clearPointerDropTarget() {
+  for (const item of workspace.querySelectorAll('.drop-zone.drag-over')) {
+    item.classList.remove('drag-over');
+  }
+  for (const item of workspace.querySelectorAll('.file-row.drop-target')) {
+    item.classList.remove('drop-target');
+  }
+}
+
+function findPointerDropTarget(event) {
+  let element;
+  let elements = [];
+  try {
+    element = document.elementFromPoint(event.clientX, event.clientY);
+    elements = document.elementsFromPoint ? document.elementsFromPoint(event.clientX, event.clientY) : [element];
+  } catch (error) {
+    recordDebug('elementFromPoint.error', {
+      x: event.clientX,
+      y: event.clientY,
+      error: serializeError(error)
+    });
+    return null;
+  }
+  let windowEl;
+  try {
+    windowEl = element?.closest?.('.window');
+  } catch (error) {
+    recordDebug('closest.window.error', { error: serializeError(error), element: element?.tagName });
+    return null;
+  }
+  if (!windowEl) return null;
+
+  const win = state.windows.find((item) => item.id === windowEl.dataset.windowId);
+  if (!win || win.kind !== 'explorer') return null;
+
+  const drag = state.pointerDrag;
+  let row = null;
+  for (const candidate of elements) {
+    try {
+      const candidateRow = candidate.closest?.('.file-row');
+      if (!candidateRow || candidateRow.dataset.type !== 'directory') {
+        continue;
+      }
+      if (drag?.paths?.includes(candidateRow.dataset.path)) {
+        continue;
+      }
+      if (!isValidPointerTargetPath(candidateRow.dataset.path, drag)) {
+        continue;
+      }
+      if (candidateRow.closest?.('.window') !== windowEl) {
+        continue;
+      }
+      row = candidateRow;
+      break;
+    } catch (error) {
+      recordDebug('closest.row.error', { error: serializeError(error), element: candidate?.tagName });
+    }
+  }
+  if (row) {
+    return { windowId: win.id, path: row.dataset.path, row };
+  }
+
+  return { windowId: win.id, path: win.data.path, row: null };
+}
+
+function markDraggingRows(paths, dragging) {
+  const pathSet = new Set(paths || []);
+  for (const row of workspace.querySelectorAll('.file-row')) {
+    if (pathSet.has(row.dataset.path)) {
+      row.classList.toggle('dragging', dragging);
+    }
+  }
+}
+
+function markDropCandidates(sourcePaths, active) {
+  const source = state.pointerDrag;
+  for (const row of workspace.querySelectorAll('.file-row[data-type="directory"]')) {
+    const path = row.dataset.path || '';
+    const valid = !sourcePaths.includes(path) && isValidPointerTargetPath(path, source);
+    row.classList.toggle('drop-candidate', active && valid);
+  }
+}
+
+function isValidPointerTargetPath(path, drag = state.pointerDrag) {
+  if (!drag) return false;
+  return (drag.items || []).every((item) => {
+    if (path === item.path) return false;
+    return !(item.type === 'directory' && isPathInside(path, item.path));
+  });
+}
+
+function lockExplorerScroll(win, body) {
+  win.data.lockScroll = true;
+  win.data.lockScrollTop = body.scrollTop;
+  win.data.lockScrollLeft = body.scrollLeft;
+}
+
+function restoreExplorerScroll(win, body) {
+  if (!body) {
+    body = workspace.querySelector(`.window[data-window-id="${win.id}"] .window-body`);
+  }
+  if (!body) return;
+
+  const top = win.data.lockScrollTop ?? win.data.scrollTop ?? 0;
+  const left = win.data.lockScrollLeft ?? win.data.scrollLeft ?? 0;
+  const restore = () => {
+    body.scrollTop = top;
+    body.scrollLeft = left;
+  };
+
+  restore();
+  requestAnimationFrame(restore);
+  setTimeout(restore, 0);
+  setTimeout(() => {
+    restore();
+    win.data.lockScroll = false;
+    win.data.scrollTop = body.scrollTop;
+    win.data.scrollLeft = body.scrollLeft;
+  }, 120);
+}
+
+function startDragWindow(event, win) {
+  if (event.target.closest('button') || win.maximized) return;
+  event.preventDefault();
+  const startX = event.clientX;
+  const startY = event.clientY;
+  const originX = win.x;
+  const originY = win.y;
+  const pointerId = event.pointerId;
+  event.currentTarget.setPointerCapture(pointerId);
+
+  const move = (moveEvent) => {
+    win.x = clamp(originX + moveEvent.clientX - startX, 0, Math.max(0, workspace.clientWidth - 120));
+    win.y = clamp(originY + moveEvent.clientY - startY, 0, Math.max(0, workspace.clientHeight - 80));
+    render();
+  };
+  const up = () => {
+    window.removeEventListener('pointermove', move);
+    window.removeEventListener('pointerup', up);
+  };
+  window.addEventListener('pointermove', move);
+  window.addEventListener('pointerup', up);
+}
+
+function startResizeWindow(event, win) {
   event.preventDefault();
   event.stopPropagation();
-  if (!state.selected.has(path)) { state.selected.clear(); state.selected.add(path); selectionChanged(); }
-  const host = root.querySelector('#contextHost');
-  const entry = findEntry(path);
-  host.innerHTML = `<div class="context-menu" style="left:${Math.min(event.clientX, window.innerWidth - 240)}px;top:${Math.min(event.clientY, window.innerHeight - 310)}px">
-    <button type="button" data-action="open" data-path="${escapeAttr(path)}">${icon(entry?.type === 'directory' ? 'folder' : 'image')}<span>Öffnen</span></button>
-    <span class="context-separator"></span>
-    <button type="button" data-action="download">${icon('download')}<span>Herunterladen</span></button>
-    <button type="button" data-action="rename" ${isReadOnly() ? 'disabled' : ''}>${icon('edit')}<span>Umbenennen</span></button>
-    <button type="button" data-action="copy" ${isReadOnly() ? 'disabled' : ''}>${icon('copy')}<span>Kopieren nach …</span></button>
-    <button type="button" data-action="move" ${isReadOnly() ? 'disabled' : ''}>${icon('move')}<span>Verschieben nach …</span></button>
-    <span class="context-separator"></span>
-    <button type="button" class="danger" data-action="delete" ${isReadOnly() ? 'disabled' : ''}>${icon('trash')}<span>Löschen</span></button>
-  </div>`;
+  const startX = event.clientX;
+  const startY = event.clientY;
+  const originWidth = win.width;
+  const originHeight = win.height;
+
+  const move = (moveEvent) => {
+    win.width = Math.max(320, originWidth + moveEvent.clientX - startX);
+    win.height = Math.max(280, originHeight + moveEvent.clientY - startY);
+    render();
+  };
+  const up = () => {
+    window.removeEventListener('pointermove', move);
+    window.removeEventListener('pointerup', up);
+  };
+  window.addEventListener('pointermove', move);
+  window.addEventListener('pointerup', up);
 }
 
-function closeContext(event) {
-  if (event?.target.closest('.context-menu, .row-more')) return;
-  const host = root.querySelector('#contextHost');
-  if (host) host.innerHTML = '';
+async function api(url, options) {
+  const response = await fetchChecked(url, options);
+  const text = await response.text();
+  try {
+    return JSON.parse(text);
+  } catch (error) {
+    recordDebug('api.json.error', {
+      url,
+      status: response.status,
+      contentType: response.headers.get('content-type'),
+      body: text.slice(0, 2000),
+      error: serializeError(error)
+    });
+    throw error;
+  }
 }
 
-function showToast(message, type = 'success') {
-  const toast = document.createElement('div');
-  toast.className = `toast ${type}`;
-  toast.innerHTML = `${icon(type === 'error' ? 'info' : 'check')}<span>${escapeHtml(message)}</span>`;
-  root.appendChild(toast);
-  requestAnimationFrame(() => toast.classList.add('visible'));
-  setTimeout(() => { toast.classList.remove('visible'); setTimeout(() => toast.remove(), 250); }, 3200);
-}
-
-function confirmDialog(title, message) {
-  return dialog({ title, message, confirm: 'Löschen', danger: true });
-}
-
-function promptDialog(title, label, value) {
-  return dialog({ title, message: label, value, prompt: true, confirm: 'Übernehmen' });
-}
-
-function dialog(options) {
-  return new Promise((resolve) => {
-    const host = root.querySelector('#dialogHost');
-    host.innerHTML = `<div class="modal-scrim"><form class="modal"><header><span class="modal-icon ${options.danger ? 'danger' : ''}">${icon(options.danger ? 'trash' : 'edit')}</span><div><strong>${escapeHtml(options.title)}</strong><small>${escapeHtml(options.message)}</small></div></header>${options.prompt ? `<input name="value" value="${escapeAttr(options.value || '')}" aria-label="${escapeAttr(options.message)}">` : ''}<footer><button type="button" class="action" data-cancel>Abbrechen</button><button type="submit" class="action primary ${options.danger ? 'danger-button' : ''}">${escapeHtml(options.confirm)}</button></footer></form></div>`;
-    const form = host.querySelector('form');
-    const close = (value) => { host.innerHTML = ''; resolve(value); };
-    form.addEventListener('submit', (event) => { event.preventDefault(); close(options.prompt ? form.elements.value.value.trim() : true); });
-    host.querySelector('[data-cancel]').addEventListener('click', () => close(options.prompt ? null : false));
-    host.querySelector('.modal-scrim').addEventListener('click', (event) => { if (event.target === event.currentTarget) close(options.prompt ? null : false); });
-    setTimeout(() => { const input = form.elements.value; if (input) { input.focus(); input.select(); } }, 0);
+async function fetchChecked(url, options) {
+  recordDebug('fetch.request', { url, method: options?.method || 'GET' });
+  const response = await fetch(url, options);
+  recordDebug('fetch.response', {
+    url,
+    status: response.status,
+    ok: response.ok,
+    contentType: response.headers.get('content-type')
   });
+  if (!response.ok) {
+    let message = `${response.status} ${response.statusText}`;
+    const text = await response.text();
+    try {
+      message = JSON.parse(text).error || message;
+    } catch {}
+    recordDebug('fetch.error.body', { url, status: response.status, body: text.slice(0, 2000) });
+    throw new Error(message);
+  }
+  return response;
 }
 
-function visibleEntries() {
-  const needle = state.query.trim().toLocaleLowerCase('de');
-  const result = needle ? state.entries.filter((entry) => entry.name.toLocaleLowerCase('de').includes(needle)) : [...state.entries];
-  const { key, direction } = state.sort;
-  result.sort((a, b) => {
-    if (key === 'name' && a.type === 'directory' !== (b.type === 'directory')) return a.type === 'directory' ? -1 : 1;
-    let left = a[key] ?? '';
-    let right = b[key] ?? '';
-    if (key === 'size') { left = Number(left); right = Number(right); }
-    const compared = typeof left === 'number' ? left - right : String(left).localeCompare(String(right), 'de', { numeric: true, sensitivity: 'base' });
-    return direction === 'asc' ? compared : -compared;
-  });
-  return result;
+function windowTitle(win) {
+  if (win.kind === 'explorer') {
+    return `Explorer · ${win.data.path || ''}`;
+  }
+  if (win.kind === 'preview') {
+    return `Vorschau · ${win.data.entry?.name || ''}`;
+  }
+  return win.title;
 }
 
-function columnHeader(key, label) {
-  const active = state.sort.key === key;
-  return `<button type="button" class="column-title ${active ? 'active' : ''}" data-sort="${key}">${escapeHtml(label)}${active ? `<span>${state.sort.direction === 'asc' ? '↑' : '↓'}</span>` : ''}</button>`;
+function parentPath(value) {
+  const parts = String(value || '').split('/').filter(Boolean);
+  if (parts.length <= 1) return value;
+  return `/${parts.slice(0, -1).join('/')}`;
 }
 
-root.addEventListener('click', (event) => {
-  const button = event.target.closest('[data-sort]');
-  if (!button) return;
-  const key = button.dataset.sort;
-  state.sort = { key, direction: state.sort.key === key && state.sort.direction === 'asc' ? 'desc' : 'asc' };
-  renderFiles();
-});
-
-function selectedEntries() { return state.entries.filter((entry) => state.selected.has(entry.path)); }
-function findEntry(path) { return state.entries.find((entry) => entry.path === path); }
-function isReadOnly() { return Boolean(state.config?.readOnly); }
-function isPreviewable(entry) { return entry?.type === 'file' && previewable.has(extension(entry.name)); }
-function activeRoot() { return (state.config?.roots || []).find((item) => isInside(state.path, item.path)) || null; }
-
-function quickPlaces() {
-  const rootEntry = (state.config?.roots || []).find((item) => isInside(state.path, item.path));
-  if (!rootEntry || state.path === rootEntry.path) return [];
-  const pieces = state.path.slice(rootEntry.path.length).split('/').filter(Boolean);
-  let current = rootEntry.path;
-  return pieces.slice(0, -1).map((name) => ({ name, path: current = joinPath(current, name) })).slice(-4).reverse();
+function dirname(value) {
+  const parts = String(value || '').split('/').filter(Boolean);
+  if (parts.length <= 1) return '/';
+  return `/${parts.slice(0, -1).join('/')}`;
 }
 
-function fileIcon(entry) {
-  if (entry.type === 'directory') return 'folder';
-  if (entry.type === 'symlink') return 'link';
-  const ext = extension(entry.name);
-  if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext)) return 'image';
-  if (['mp4', 'mkv', 'webm', 'mov'].includes(ext)) return 'video';
-  if (['mp3', 'flac', 'm4a', 'ogg', 'wav'].includes(ext)) return 'music';
-  if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2'].includes(ext)) return 'archive';
-  if (['js', 'ts', 'css', 'html', 'php', 'py', 'go', 'rs', 'java', 'c', 'cpp', 'h', 'json', 'xml', 'yaml', 'yml', 'sh'].includes(ext)) return 'code';
-  return 'file';
+function basename(value) {
+  const parts = String(value || '').split('/').filter(Boolean);
+  return parts[parts.length - 1] || '';
 }
 
-function fileTone(entry) { return `file-${fileIcon(entry)}`; }
-function typeLabel(entry) {
-  if (entry.type === 'directory') return 'Ordner';
-  if (entry.type === 'symlink') return 'Verknüpfung';
-  if (entry.type === 'copy') return 'Kopieren';
-  if (entry.type === 'move') return 'Verschieben';
-  if (entry.type === 'delete') return 'Löschen';
-  return extensionLabel(entry);
+function extensionOf(name) {
+  const value = String(name || '');
+  const index = value.lastIndexOf('.');
+  return index >= 0 ? value.slice(index + 1).toLowerCase() : '';
+}
+
+function isPreviewable(entry) {
+  if (entry?.type !== 'file') return false;
+  const name = String(entry.name || entry.path || '').toLowerCase();
+  return previewFilenames.has(name) || previewExtensions.has(extensionOf(name));
+}
+
+function joinPath(parent, name) {
+  return `${String(parent || '').replace(/\/+$/, '')}/${String(name || '').replace(/^\/+/, '')}`;
+}
+
+function normalizePath(value) {
+  const parts = String(value || '').split('/').filter(Boolean);
+  return `/${parts.join('/')}`;
+}
+
+function isPathInside(path, parent) {
+  const normalizedPath = normalizePath(path);
+  const normalizedParent = normalizePath(parent);
+  return normalizedPath.startsWith(`${normalizedParent.replace(/\/$/, '')}/`);
 }
-function extensionLabel(entry) { const ext = extension(entry.name); return ext ? `${ext.toUpperCase()}-Datei` : 'Datei'; }
-function extension(name) { const index = String(name).lastIndexOf('.'); return index > 0 ? String(name).slice(index + 1).toLowerCase() : ''; }
-function rootName(item) { return item.label && item.label !== item.path ? item.label : basename(item.path) || 'Dateien'; }
-function basename(path) { return String(path || '').split('/').filter(Boolean).at(-1) || '/'; }
-function parentPath(path) { const parts = String(path || '').split('/').filter(Boolean); return parts.length <= 1 ? '/' : `/${parts.slice(0, -1).join('/')}`; }
-function joinPath(parent, name) { return `${String(parent).replace(/\/+$/, '')}/${String(name).replace(/^\/+/, '')}`; }
-function isInside(path, parent) { return path === parent || String(path || '').startsWith(`${String(parent || '').replace(/\/$/, '')}/`); }
 
 function formatBytes(bytes) {
   const value = Number(bytes || 0);
-  if (!value) return '0 B';
-  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
-  const index = Math.min(Math.floor(Math.log(value) / Math.log(1024)), units.length - 1);
-  return `${new Intl.NumberFormat('de-DE', { maximumFractionDigits: index ? 1 : 0 }).format(value / (1024 ** index))} ${units[index]}`;
+  if (value < 1024) return `${value} B`;
+  if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KB`;
+  if (value < 1024 * 1024 * 1024) return `${(value / 1024 / 1024).toFixed(1)} MB`;
+  return `${(value / 1024 / 1024 / 1024).toFixed(1)} GB`;
 }
 
-function formatDate(value, full = false) {
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return '—';
-  return new Intl.DateTimeFormat('de-DE', full ? { dateStyle: 'medium', timeStyle: 'short' } : { day: '2-digit', month: 'short', year: date.getFullYear() !== new Date().getFullYear() ? 'numeric' : undefined, hour: '2-digit', minute: '2-digit' }).format(date);
+function directorySizeLabel(entry) {
+  const result = state.sizeResults.get(entry.path);
+  if (!result) {
+    return state.sizeJobs.has(entry.path) ? 'Berechne...' : 'Noch nicht berechnet';
+  }
+  const files = Number(result.files || 0);
+  const directories = Math.max(0, Number(result.directories || 0) - 1);
+  return `${formatBytes(result.size)} · ${files} Dateien · ${directories} Ordner`;
 }
 
-function icon(name) { return `<svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">${iconPaths[name] || iconPaths.file}</svg>`; }
-function iconButton(name, label, action, extra = '') { return `<button type="button" class="icon-button" title="${escapeAttr(label)}" aria-label="${escapeAttr(label)}" data-action="${escapeAttr(action)}">${icon(name)}${extra}</button>`; }
-function highlight(value, query) { const safe = escapeHtml(value); if (!query.trim()) return safe; const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); return safe.replace(new RegExp(`(${escaped})`, 'ig'), '<mark>$1</mark>'); }
-function escapeHtml(value) { return String(value ?? '').replace(/[&<>"']/g, (char) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[char]); }
-function escapeAttr(value) { return escapeHtml(value); }
-function isTypingTarget(element) { return ['INPUT', 'TEXTAREA', 'SELECT'].includes(element?.tagName) || element?.isContentEditable; }
-
-function endpoint(name, params = {}) {
-  const query = new URLSearchParams(params).toString();
-  let path;
-  if (PHP_API) path = `${name}.php`;
-  else if (name === 'config') path = 'config';
-  else if (name === 'list') path = 'list';
-  else if (name === 'upload') path = 'upload';
-  else if (name === 'job' && params.action) return `${API_BASE}/jobs/${encodeURIComponent(params.action)}`;
-  else if (name === 'job' && params.id) return `${API_BASE}/jobs/${encodeURIComponent(params.id)}`;
-  else path = name;
-  return `${API_BASE.replace(/\/$/, '')}/${path}${query ? `?${query}` : ''}`;
+function formatPrincipal(name, id) {
+  if (name == null && id == null) return '-';
+  if (name == null || String(name) === String(id)) return String(id);
+  if (id == null) return String(name);
+  return `${name} (${id})`;
 }
 
-function endpointRaw(rawUrl) { return PHP_API ? `${API_BASE.replace(/\/$/, '')}/${String(rawUrl).replace(/^\//, '')}` : rawUrl; }
-function formHeaders() { return { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }; }
-function appendCsrf(body) { const token = getCsrfToken(); if (token) body.append('csrf_token', token); }
-function getCsrfToken() { return window.csrf_token || document.querySelector('input[name="csrf_token"]')?.value || document.querySelector('meta[name="csrf_token"]')?.content || ''; }
-
-async function api(url, options) {
-  const response = await fetch(url, options);
-  const text = await response.text();
-  let payload;
-  try { payload = JSON.parse(text); } catch { payload = null; }
-  if (!response.ok) throw new Error(payload?.error || text || `${response.status} ${response.statusText}`);
-  if (!payload) throw new Error('Der Server hat keine gültige JSON-Antwort geliefert.');
-  return payload;
+function iconSvg(name) {
+  const paths = uiIcons[name] || uiIcons.close;
+  return `<svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">${paths}</svg>`;
+}
+
+function escapeHtml(value) {
+  return String(value ?? '').replace(/[&<>"']/g, (char) => ({
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;'
+  })[char]);
+}
+
+function escapeAttr(value) {
+  return escapeHtml(value);
+}
+
+function cssEscape(value) {
+  if (window.CSS?.escape) {
+    return window.CSS.escape(String(value));
+  }
+  return String(value).replace(/["\\]/g, '\\$&');
+}
+
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+
+function apiUrl(path) {
+  return `${API_BASE.replace(/\/$/, '')}/${path.replace(/^\//, '')}`;
+}
+
+function appendCsrf(body) {
+  const token = getCsrfToken();
+  if (!token) {
+    recordDebug('csrf.missing', {});
+    return;
+  }
+  body.append('csrf_token', token);
+  recordDebug('csrf.attached', { length: token.length });
+}
+
+function getCsrfToken() {
+  return window.csrf_token
+    || document.querySelector('input[name="csrf_token"]')?.value
+    || document.querySelector('meta[name="csrf_token"]')?.content
+    || document.querySelector('meta[name="csrf-token"]')?.content
+    || '';
+}
+
+function recordDebug(label, data = {}) {
+  if (!state.config?.debug) {
+    return null;
+  }
+  const item = {
+    id: state.nextDebugId++,
+    time: new Date().toLocaleTimeString(),
+    label,
+    data
+  };
+  state.debug.push(item);
+  if (state.debug.length > 80) {
+    state.debug.splice(0, state.debug.length - 80);
+  }
+  updateTransferPanel();
+  return item;
+}
+
+function updateTransferPanel() {
+  renderTransferPanel();
+}
+
+function serializeError(error) {
+  if (!error) return null;
+  if (error instanceof Error || typeof error === 'object') {
+    return {
+      name: error.name,
+      message: error.message || String(error),
+      stack: error.stack
+    };
+  }
+  return { message: String(error) };
 }
diff --git a/server/public/index.html b/server/public/index.html
index 2dcc990..2ee1b18 100644
--- a/server/public/index.html
+++ b/server/public/index.html
@@ -6,8 +6,21 @@
     <title>U-Navigator</title>
     <link rel="stylesheet" href="/styles.css">
   </head>
-  <body style="margin:0">
-    <div class="u-nav app-shell"></div>
+  <body>
+    <div class="app-shell">
+      <header class="topbar">
+        <div>
+          <h1>U-Navigator</h1>
+          <p id="statusText">Initialisiere...</p>
+        </div>
+        <nav class="toolbar" aria-label="Workspace actions">
+          <button id="newExplorerButton" title="Explorer öffnen">Explorer</button>
+          <button id="newPropertiesButton" title="Eigenschaften öffnen">Eigenschaften</button>
+          <button id="newQueueButton" title="Transfer-Queue öffnen">Transfers</button>
+        </nav>
+      </header>
+      <main id="workspace" class="workspace" aria-label="U-Navigator Workspace"></main>
+    </div>
     <script src="/app.js" type="module"></script>
   </body>
 </html>
diff --git a/server/public/styles.css b/server/public/styles.css
index 948ad27..fa35f33 100644
--- a/server/public/styles.css
+++ b/server/public/styles.css
@@ -1,188 +1,1110 @@
 .u-nav {
-  --accent: #ff8a3d;
-  --accent-deep: #e96820;
-  --accent-soft: #fff1e7;
-  --bg: #eef1f5;
+  --bg: #f4f6f8;
   --surface: #ffffff;
-  --surface-raised: #ffffff;
-  --surface-soft: #f6f7f9;
-  --surface-hover: #f0f3f7;
-  --text: #16202b;
-  --text-soft: #425466;
-  --muted: #7b8997;
-  --line: #e2e7ec;
-  --line-strong: #d3dae2;
-  --danger: #db4b4b;
-  --success: #218f68;
-  --shadow-sm: 0 1px 2px rgba(18, 32, 47, .05), 0 2px 8px rgba(18, 32, 47, .04);
-  --shadow-lg: 0 24px 70px rgba(21, 34, 50, .18);
+  --surface-2: #eef2f5;
+  --text: #18222d;
+  --muted: #617182;
+  --line: #cfd8e1;
+  --accent: #e86f2d;
+  --accent-2: #287a65;
+  --shadow: 0 18px 55px rgba(24, 34, 45, 0.22);
   background: var(--bg);
   color: var(--text);
-  font: 14px/1.45 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  min-height: calc(100vh - 150px);
+  display: grid;
+  font: 12.5px/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  grid-template-rows: auto 1fr;
+  min-height: calc(100vh - 170px);
   overflow: hidden;
   position: relative;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
 }
 
 @media (prefers-color-scheme: dark) {
   .u-nav {
-    --accent-soft: #38271d;
-    --bg: #0f1419;
-    --surface: #171d23;
-    --surface-raised: #1c232b;
-    --surface-soft: #202830;
-    --surface-hover: #252f39;
-    --text: #f2f5f7;
-    --text-soft: #c2ccd5;
-    --muted: #8795a3;
-    --line: #2a343e;
-    --line-strong: #394552;
-    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .22);
-    --shadow-lg: 0 24px 70px rgba(0, 0, 0, .5);
+    --bg: #101418;
+    --surface: #1b2229;
+    --surface-2: #242e37;
+    --text: #eef3f7;
+    --muted: #a3b0bd;
+    --line: #36434f;
+    --shadow: 0 18px 55px rgba(0, 0, 0, 0.44);
   }
 }
 
-.u-nav *, .u-nav *::before, .u-nav *::after { box-sizing: border-box; }
-.u-nav button, .u-nav input { font: inherit; }
-.u-nav button { color: inherit; }
-.u-nav button:focus-visible, .u-nav input:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; }
-.u-nav .ui-icon { display: block; fill: none; height: 20px; pointer-events: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 20px; }
-
-.unav-frame { background: var(--surface); display: grid; grid-template-rows: 66px minmax(0, 1fr); height: calc(100vh - 150px); min-height: 660px; overflow: hidden; }
-.app-header { align-items: center; background: var(--surface); border-bottom: 1px solid var(--line); display: grid; gap: 28px; grid-template-columns: 230px minmax(260px, 620px) 1fr; padding: 0 20px; position: relative; z-index: 20; }
-.brand { align-items: center; background: none; border: 0; cursor: pointer; display: flex; gap: 11px; padding: 0; text-align: left; }
-.brand-mark { align-items: center; background: linear-gradient(145deg, #ff9c58, #ee6f26); border-radius: 12px; box-shadow: 0 6px 16px rgba(232, 105, 32, .25); color: #fff; display: flex; height: 38px; justify-content: center; width: 38px; }
-.brand-mark .ui-icon { height: 22px; stroke-width: 2; width: 22px; }
-.brand strong, .brand small { display: block; }
-.brand strong { font-size: 16px; letter-spacing: -.02em; }
-.brand small { color: var(--muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
-.header-search { align-items: center; background: var(--surface-soft); border: 1px solid transparent; border-radius: 12px; color: var(--muted); display: grid; gap: 10px; grid-template-columns: auto 1fr auto; height: 40px; padding: 0 12px; transition: .18s ease; }
-.header-search:focus-within { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); }
-.header-search .ui-icon { height: 18px; width: 18px; }
-.header-search input { background: transparent; border: 0; color: var(--text); min-width: 0; outline: 0; }
-.header-search input::placeholder { color: var(--muted); }
-.header-search kbd { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 1px 0 var(--line-strong); color: var(--muted); font: 11px/1 system-ui; padding: 4px 6px; }
-.header-actions { display: flex; gap: 7px; justify-content: flex-end; }
-
-.icon-button { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 9px; cursor: pointer; display: inline-flex; height: 36px; justify-content: center; padding: 0; position: relative; transition: .15s ease; width: 36px; }
-.icon-button:hover, .icon-button.active { background: var(--surface-hover); border-color: var(--line); }
-.icon-button:disabled { cursor: default; opacity: .3; }
-.action-badge { align-items: center; background: var(--accent); border: 2px solid var(--surface); border-radius: 10px; color: #fff; display: flex; font-size: 9px; height: 17px; justify-content: center; min-width: 17px; padding: 0 3px; position: absolute; right: -3px; top: -3px; }
-
-.browser-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 0; }
-.sidebar { background: var(--surface-soft); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 22px 13px 14px; }
-.sidebar-section + .sidebar-section { margin-top: 28px; }
-.sidebar-label { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .1em; margin: 0 10px 8px; text-transform: uppercase; }
-.place { align-items: center; background: transparent; border: 0; border-radius: 10px; cursor: pointer; display: grid; gap: 10px; grid-template-columns: auto minmax(0, 1fr) auto; padding: 8px 9px; text-align: left; transition: .15s ease; width: 100%; }
-.place:hover { background: var(--surface-hover); }
-.place.active { background: var(--surface); box-shadow: var(--shadow-sm); }
-.place > span:nth-child(2) { min-width: 0; }
-.place strong, .place small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.place strong { font-size: 13px; }
-.place small { color: var(--muted); font-size: 10px; margin-top: 2px; }
-.place > .ui-icon { color: var(--muted); height: 15px; width: 15px; }
-.place-icon { align-items: center; border-radius: 9px; display: flex; height: 34px; justify-content: center; width: 34px; }
-.place-icon .ui-icon { height: 18px; width: 18px; }
-.tone-1 { background: #fff0e7; color: #ee762d; }.tone-2 { background: #e8f4ff; color: #3486cc; }.tone-3 { background: #e9f7f1; color: #248961; }.tone-4 { background: #f3ebff; color: #8453c8; }
-.place.compact { grid-template-columns: auto minmax(0, 1fr); padding: 7px 11px; }
-.place.compact > .ui-icon { height: 17px; width: 17px; }
-.sidebar-empty { color: var(--muted); font-size: 11px; margin: 8px 11px; }
-.sidebar-foot { align-items: center; border-top: 1px solid var(--line); color: var(--muted); display: flex; font-size: 11px; gap: 8px; margin-top: auto; padding: 16px 10px 2px; }
-.mode-dot { background: var(--muted); border-radius: 50%; height: 7px; width: 7px; }.mode-dot.writable { background: var(--success); }.mode-dot.readonly { background: #e3a232; }
-
-.content-shell { display: grid; grid-template-rows: 52px 52px minmax(0, 1fr) 30px; min-width: 0; min-height: 0; }
-.nav-bar { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 8px; grid-template-columns: auto minmax(0, 1fr) auto; padding: 0 16px; }
-.history-actions { display: flex; gap: 2px; }
-.breadcrumbs { align-items: center; display: flex; min-width: 0; overflow: hidden; padding-left: 4px; }
-.breadcrumbs button { background: none; border: 0; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 550; max-width: 180px; overflow: hidden; padding: 6px 8px; text-overflow: ellipsis; white-space: nowrap; }
-.breadcrumbs button:hover { background: var(--surface-hover); }
-.breadcrumbs button[aria-current="page"] { color: var(--text); font-weight: 700; }
-.crumb-separator { color: var(--muted); font-size: 18px; }
-.command-bar { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 12px; justify-content: space-between; padding: 0 16px; }
-.primary-actions, .view-actions { align-items: center; display: flex; gap: 4px; }
-.action { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; display: inline-flex; gap: 7px; height: 34px; justify-content: center; padding: 0 10px; transition: .15s ease; }
-.action:hover { background: var(--surface-hover); border-color: var(--line); }
-.action:disabled { cursor: default; opacity: .32; }
-.action .ui-icon { height: 17px; width: 17px; }
-.action.primary { background: var(--accent); border-color: var(--accent); box-shadow: 0 5px 14px rgba(232, 105, 32, .18); color: #fff; }
-.action.primary:hover { background: var(--accent-deep); }
-.action.danger { color: var(--danger); }
-.action.full { width: 100%; }
-.command-separator { background: var(--line); height: 22px; margin: 0 4px; width: 1px; }
-.view-actions .icon-button { height: 32px; width: 32px; }
-.item-count { color: var(--muted); font-size: 11px; margin-right: 8px; }
-
-.explorer-stage { display: grid; grid-template-columns: minmax(0, 1fr) 310px; min-height: 0; }
-.file-pane { min-width: 0; overflow: auto; position: relative; }
-.file-pane.drag-over::after { align-items: center; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 2px dashed var(--accent); border-radius: 14px; color: var(--accent-deep); content: "Hier ablegen zum Hochladen"; display: flex; font-size: 16px; font-weight: 700; inset: 12px; justify-content: center; pointer-events: none; position: absolute; z-index: 4; }
-.details-pane { background: var(--surface-soft); border-left: 1px solid var(--line); min-width: 0; overflow: auto; padding: 18px; transition: .2s ease; }
-.explorer-stage:has(.details-pane.closed) { grid-template-columns: minmax(0, 1fr) 0; }
-.details-pane.closed { border: 0; padding: 0; }
-.status-bar { align-items: center; background: var(--surface-soft); border-top: 1px solid var(--line); color: var(--muted); display: grid; font-size: 10px; grid-template-columns: 1fr auto auto; gap: 18px; padding: 0 16px; }
-.version { font-variant-numeric: tabular-nums; }
-
-.file-table { min-width: 760px; }
-.file-head, .file-row { align-items: center; display: grid; grid-template-columns: 42px minmax(250px, 1fr) 110px 130px 160px 40px; }
-.file-head { background: color-mix(in srgb, var(--surface) 92%, var(--surface-soft)); border-bottom: 1px solid var(--line); color: var(--muted); height: 38px; position: sticky; top: 0; z-index: 3; }
-.select-all, .row-check { align-items: center; background: transparent; border: 1px solid var(--line-strong); border-radius: 5px; cursor: pointer; display: flex; height: 16px; justify-content: center; margin: auto; padding: 0; width: 16px; }
-.select-all .ui-icon, .row-check .ui-icon { color: #fff; height: 12px; stroke-width: 2.5; width: 12px; }
-.file-row.selected .row-check, .file-head .select-all:not(:empty) { background: var(--accent); border-color: var(--accent); }
-.column-title { align-items: center; align-self: stretch; background: transparent; border: 0; color: inherit; cursor: pointer; display: flex; font-size: 10px; font-weight: 700; gap: 5px; letter-spacing: .04em; padding: 0 9px; text-align: left; text-transform: uppercase; }
-.column-title:hover, .column-title.active { color: var(--text-soft); }
-.file-row { border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent); min-height: 56px; padding-right: 6px; transition: background .12s ease; }
-.file-row:hover { background: var(--surface-hover); }
-.file-row.selected { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
-.name-cell { align-items: center; display: flex; gap: 11px; min-width: 0; padding: 7px 9px; }
-.name-cell > span:last-child { min-width: 0; }
-.name-cell strong, .name-cell small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.name-cell strong { font-size: 13px; font-weight: 620; }
-.name-cell small { color: var(--muted); font-size: 10px; margin-top: 2px; }
-.file-type-icon { align-items: center; border-radius: 9px; display: flex; flex: 0 0 34px; height: 34px; justify-content: center; width: 34px; }
-.file-type-icon .ui-icon { height: 19px; width: 19px; }
-.file-folder { background: #fff0e2; color: #ef8b31; }.file-file { background: #edf1f5; color: #6f8193; }.file-image { background: #e8f5ee; color: #278a62; }.file-video { background: #f1eafd; color: #8052bc; }.file-music { background: #e8f2ff; color: #3c80c4; }.file-archive { background: #fff5d9; color: #a87918; }.file-code { background: #e8f5f6; color: #287f87; }.file-link { background: #edf0ff; color: #5d70ca; }
-.meta-cell { color: var(--text-soft); font-size: 12px; padding: 0 9px; }
-.row-more { align-items: center; background: transparent; border: 0; border-radius: 7px; cursor: pointer; display: flex; height: 30px; justify-content: center; opacity: 0; padding: 0; width: 30px; }
-.file-row:hover .row-more, .row-more:focus { opacity: 1; }.row-more:hover { background: var(--surface); }.row-more .ui-icon { height: 17px; width: 17px; }
-mark { background: color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 2px; color: inherit; }
-
-.file-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); padding: 18px; }
-.file-card { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; cursor: pointer; display: flex; flex-direction: column; height: 154px; justify-content: center; min-width: 0; padding: 16px 10px 12px; position: relative; transition: .16s ease; }
-.file-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
-.file-card.selected { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
-.card-icon { align-items: center; background: transparent; display: flex; height: 62px; justify-content: center; margin-bottom: 5px; width: 68px; }
-.card-icon .ui-icon { height: 46px; stroke-width: 1.35; width: 46px; }
-.file-card strong { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.file-card small { color: var(--muted); font-size: 10px; margin-top: 3px; }
-.card-check { align-items: center; background: var(--accent); border-radius: 50%; color: #fff; display: flex; height: 18px; justify-content: center; opacity: 0; position: absolute; right: 9px; top: 9px; width: 18px; }.file-card.selected .card-check { opacity: 1; }.card-check .ui-icon { height: 12px; stroke-width: 2.7; width: 12px; }
-
-.state-view { align-items: center; color: var(--muted); display: flex; flex-direction: column; height: 100%; justify-content: center; min-height: 300px; padding: 30px; text-align: center; }
-.state-view > .ui-icon { color: var(--line-strong); height: 54px; margin-bottom: 15px; stroke-width: 1.2; width: 54px; }.state-view strong { color: var(--text); font-size: 15px; margin-bottom: 4px; }.state-view span { font-size: 12px; }.state-view .action { margin-top: 16px; }
-.spinner { animation: spin .8s linear infinite; border: 2px solid var(--line); border-radius: 50%; border-top-color: var(--accent); display: block; height: 28px; margin-bottom: 14px; width: 28px; } @keyframes spin { to { transform: rotate(360deg); } }
-
-.details-header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 16px; }.details-header > strong { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }.details-header .icon-button { height: 30px; width: 30px; }
-.preview-box { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; display: flex; height: 190px; justify-content: center; margin-bottom: 16px; overflow: hidden; }
-.preview-box img, .preview-box video, .preview-box iframe { border: 0; height: 100%; object-fit: contain; width: 100%; }.preview-box audio { max-width: 90%; }.preview-box pre { font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; height: 100%; margin: 0; overflow: auto; padding: 12px; white-space: pre-wrap; width: 100%; }.preview-placeholder .ui-icon { height: 58px; stroke-width: 1.2; width: 58px; }.preview-error { color: var(--danger); font-size: 11px; padding: 18px; text-align: center; }
-.detail-title { align-items: center; display: flex; gap: 12px; margin-bottom: 20px; min-width: 0; }.file-type-icon.large { flex-basis: 42px; height: 42px; width: 42px; }.detail-title > div { min-width: 0; }.detail-title strong, .detail-title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.detail-title strong { font-size: 14px; }.detail-title span { color: var(--muted); font-size: 11px; }
-.detail-list { border-top: 1px solid var(--line); display: grid; font-size: 11px; gap: 12px 8px; grid-template-columns: 74px minmax(0, 1fr); margin: 0 0 18px; padding-top: 16px; }.detail-list dt { color: var(--muted); }.detail-list dd { color: var(--text-soft); margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }.detail-path { overflow-wrap: anywhere !important; white-space: normal; }.detail-list code { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; }
-.details-empty { align-items: center; color: var(--muted); display: flex; flex-direction: column; height: 100%; justify-content: center; padding: 20px; text-align: center; }.details-empty .ui-icon { height: 38px; margin-bottom: 12px; stroke-width: 1.3; width: 38px; }.details-empty strong { color: var(--text); }.details-empty span { font-size: 11px; margin-top: 3px; }.multi-selection-mark { align-items: center; background: var(--accent-soft); border-radius: 16px; color: var(--accent-deep); display: flex; font-size: 32px; font-weight: 750; height: 150px; justify-content: center; margin-bottom: 18px; }
-
-.drawer-scrim, .modal-scrim { background: rgba(20, 29, 39, .25); inset: 0; position: absolute; z-index: 80; }.drawer { animation: drawer-in .2s ease; background: var(--surface-raised); box-shadow: var(--shadow-lg); display: grid; grid-template-rows: 72px minmax(0, 1fr); height: 100%; max-width: calc(100% - 30px); position: absolute; right: 0; top: 0; width: 390px; z-index: 81; } @keyframes drawer-in { from { transform: translateX(30px); opacity: .5; } }
-.drawer header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 0 18px 0 22px; }.drawer header small, .drawer header strong { display: block; }.drawer header small { color: var(--accent); font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }.drawer header strong { font-size: 17px; }.drawer-body { overflow: auto; padding: 18px; }.drawer-empty { color: var(--muted); font-size: 12px; padding: 50px 20px; text-align: center; }
-.transfer-item { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 11px; margin-bottom: 10px; padding: 12px; }.transfer-item > div:first-child { align-items: center; display: grid; gap: 10px; grid-template-columns: auto minmax(0, 1fr) auto; }.transfer-icon { align-items: center; background: var(--accent-soft); border-radius: 8px; color: var(--accent-deep); display: flex; height: 34px; justify-content: center; width: 34px; }.transfer-icon .ui-icon { height: 17px; width: 17px; }.transfer-item strong, .transfer-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.transfer-item strong { font-size: 12px; }.transfer-item small { color: var(--muted); font-size: 10px; }.transfer-item b { color: var(--muted); font-size: 10px; }.progress { background: var(--line); border-radius: 4px; height: 4px; margin-top: 10px; overflow: hidden; }.progress span { background: var(--accent); display: block; height: 100%; transition: width .3s ease; }
-.settings-form label { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 15px; justify-content: space-between; padding: 15px 2px; }.settings-form label span { min-width: 0; }.settings-form strong, .settings-form small { display: block; }.settings-form strong { font-size: 13px; }.settings-form small { color: var(--muted); font-size: 10px; margin-top: 2px; }.settings-form input[type="checkbox"] { accent-color: var(--accent); height: 18px; width: 18px; }.settings-form .action { margin-top: 22px; }
-
-.context-menu { animation: menu-in .12s ease; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow-lg); padding: 6px; position: fixed; width: 220px; z-index: 100; } @keyframes menu-in { from { opacity: 0; transform: scale(.97); } }
-.context-menu button { align-items: center; background: transparent; border: 0; border-radius: 7px; cursor: pointer; display: flex; gap: 10px; padding: 8px 9px; text-align: left; width: 100%; }.context-menu button:hover { background: var(--surface-hover); }.context-menu button:disabled { opacity: .35; }.context-menu button.danger { color: var(--danger); }.context-menu .ui-icon { height: 17px; width: 17px; }.context-separator { background: var(--line); display: block; height: 1px; margin: 5px; }
-
-.modal-scrim { align-items: center; display: flex; justify-content: center; z-index: 120; }.modal { animation: modal-in .16s ease; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); max-width: calc(100% - 32px); padding: 22px; width: 420px; } @keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
-.modal header { align-items: center; display: flex; gap: 13px; }.modal header > div { min-width: 0; }.modal header strong, .modal header small { display: block; }.modal header strong { font-size: 16px; }.modal header small { color: var(--muted); font-size: 11px; margin-top: 2px; }.modal-icon { align-items: center; background: var(--accent-soft); border-radius: 10px; color: var(--accent-deep); display: flex; flex: 0 0 40px; height: 40px; justify-content: center; }.modal-icon.danger { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); }.modal input { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 9px; color: var(--text); margin-top: 20px; outline: 0; padding: 10px 12px; width: 100%; }.modal input:focus { border-color: var(--accent); }.modal footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 22px; }.danger-button { background: var(--danger) !important; border-color: var(--danger) !important; }
-.toast { align-items: center; background: #1d2b37; border-radius: 10px; bottom: 44px; box-shadow: var(--shadow-lg); color: #fff; display: flex; gap: 9px; left: 50%; max-width: min(460px, calc(100% - 32px)); opacity: 0; padding: 10px 14px; position: absolute; transform: translate(-50%, 8px); transition: .22s ease; z-index: 150; }.toast.visible { opacity: 1; transform: translate(-50%, 0); }.toast.error { background: #9d3535; }.toast .ui-icon { height: 17px; width: 17px; }.toast span { font-size: 12px; }
-.hidden-input { display: none; }
-
-@media (max-width: 1120px) {
-  .app-header { grid-template-columns: 200px minmax(220px, 1fr) auto; }.browser-shell { grid-template-columns: 200px minmax(0, 1fr); }.explorer-stage { grid-template-columns: minmax(0, 1fr) 270px; }.primary-actions .action span { display: none; }.action { padding: 0 8px; }.type-column { display: none; }.file-head, .file-row { grid-template-columns: 42px minmax(230px, 1fr) 100px 0 150px 40px; }
+.u-nav *,
+.u-nav *::before,
+.u-nav *::after {
+  box-sizing: border-box;
 }
-@media (max-width: 820px) {
-  .unav-frame { min-height: 600px; }.app-header { gap: 10px; grid-template-columns: auto minmax(140px, 1fr) auto; padding: 0 12px; }.brand > span:last-child { display: none; }.header-search kbd { display: none; }.browser-shell { grid-template-columns: 64px minmax(0, 1fr); }.sidebar { padding: 14px 8px; }.sidebar-label, .place > span:nth-child(2), .place > .ui-icon, .sidebar-shortcuts, .sidebar-foot span:last-child { display: none; }.place { display: flex; justify-content: center; padding: 7px; }.explorer-stage { grid-template-columns: minmax(0, 1fr); }.details-pane { bottom: 30px; box-shadow: var(--shadow-lg); max-width: 88%; position: absolute; right: 0; top: 171px; width: 310px; z-index: 10; }.details-pane.closed { display: none; }.command-bar { padding: 0 8px; }.selection-action { display: none; }.item-count { display: none; }.date-column { display: none; }.file-head, .file-row { grid-template-columns: 36px minmax(190px, 1fr) 85px 0 0 36px; }.file-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); padding: 10px; }.breadcrumbs button { max-width: 110px; }.status-bar { grid-template-columns: 1fr auto; }.status-bar .version { display: none; }
+
+.u-nav button {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  color: var(--text);
+  cursor: pointer;
+  font: inherit;
+  min-height: 28px;
+  padding: 0 8px;
+}
+
+.u-nav button:hover {
+  border-color: var(--accent);
+}
+
+.u-nav button.primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #ffffff;
+}
+
+.u-nav button.danger {
+  color: #c4382d;
+}
+
+.u-nav button.danger:hover {
+  border-color: #c4382d;
+}
+
+.u-nav button.icon {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 26px;
+  height: 26px;
+  justify-content: center;
+  line-height: 1;
+  max-width: 26px;
+  min-height: 26px;
+  min-width: 26px;
+  padding: 0;
+  width: 26px;
+}
+
+.u-nav button.icon::before,
+.u-nav button.icon::after {
+  content: none !important;
+}
+
+.u-nav .ui-icon {
+  display: block;
+  fill: none;
+  height: 16px;
+  pointer-events: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2.1;
+  width: 16px;
+}
+
+.u-nav .topbar {
+  align-items: center;
+  background: var(--surface);
+  border-bottom: 1px solid var(--line);
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  padding: 9px 12px;
+}
+
+.u-nav .topbar h1 {
+  color: var(--text);
+  font-size: 16px;
+  line-height: 1;
+  margin: 0 0 4px;
+}
+
+.u-nav .topbar p,
+.u-nav .muted {
+  color: var(--muted);
+  margin: 0;
+}
+
+.u-nav .toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.u-nav .toolbar button.active {
+  background: var(--surface-2);
+  border-color: var(--accent);
+}
+
+.u-nav .workspace {
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+.u-nav .window {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  box-shadow: var(--shadow);
+  display: grid;
+  grid-template-rows: auto 1fr;
+  min-height: 240px;
+  min-width: 280px;
+  overflow: hidden;
+  position: absolute;
+}
+
+.u-nav .window.focused {
+  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
+}
+
+.u-nav .window.maximized {
+  border-radius: 0;
+}
+
+.u-nav .titlebar {
+  align-items: center;
+  background: var(--surface-2);
+  border-bottom: 1px solid var(--line);
+  cursor: move;
+  display: grid;
+  gap: 6px;
+  grid-template-columns: 1fr auto;
+  min-height: 34px;
+  padding: 4px 6px 4px 10px;
+  user-select: none;
+}
+
+.u-nav .titlebar strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.u-nav .window-actions {
+  display: flex;
+  gap: 5px;
+}
+
+.u-nav .window-body {
+  min-height: 0;
+  overflow: auto;
+  padding: 8px;
+}
+
+.u-nav .resize-handle {
+  bottom: 0;
+  cursor: nwse-resize;
+  height: 18px;
+  position: absolute;
+  right: 0;
+  width: 18px;
+}
+
+.u-nav .resize-handle::after {
+  border-bottom: 2px solid var(--muted);
+  border-right: 2px solid var(--muted);
+  bottom: 5px;
+  content: "";
+  height: 8px;
+  position: absolute;
+  right: 5px;
+  width: 8px;
+}
+
+.u-nav .pathbar {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.u-nav .pathbar input:not(.upload-input) {
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  color: var(--text);
+  font: inherit;
+  min-height: 28px;
+  min-width: 180px;
+  padding: 0 8px;
+  flex: 1 1 220px;
+}
+
+.u-nav .pathbar .up-button {
+  flex: 0 0 24px;
+  font-size: 15px;
+  line-height: 1;
+}
+
+.u-nav .pathbar > button.icon,
+.u-nav .pathbar .view-toggle {
+  flex: 0 0 auto;
+}
+
+.u-nav .pathbar > button.icon {
+  max-width: 32px;
+  min-width: 32px;
+  width: 32px;
+}
+
+.u-nav .upload-input {
+  display: none;
+}
+
+.u-nav .drop-zone {
+  border: 1px dashed transparent;
+  border-radius: 8px;
+  min-height: 150px;
+}
+
+.u-nav .drop-zone.drag-over {
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+  border-color: var(--accent);
+  border-style: solid;
+  box-shadow: inset 0 0 0 2px var(--accent);
+}
+
+.u-nav .view-toggle {
+  display: inline-flex;
+  gap: 0;
+  white-space: nowrap;
+}
+
+.u-nav .view-toggle button {
+  border-radius: 0;
+  flex: 0 0 auto;
+  min-width: 24px;
+  overflow: visible;
+}
+
+.u-nav .view-toggle button:first-child {
+  border-radius: 6px 0 0 6px;
+}
+
+.u-nav .view-toggle button:last-child {
+  border-radius: 0 6px 6px 0;
+  margin-left: -1px;
+}
+
+.u-nav .view-toggle button.active {
+  background: var(--surface-2);
+  border-color: var(--accent);
+  position: relative;
+  z-index: 1;
+}
+
+.u-nav .file-table {
+  border-collapse: collapse;
+  background: var(--surface);
+  color: var(--text);
+  width: 100%;
+}
+
+.u-nav .file-table th,
+.u-nav .file-table td {
+  background: var(--surface) !important;
+  border-bottom: 1px solid var(--line);
+  color: var(--text) !important;
+  padding: 6px 6px;
+  text-align: left;
+  vertical-align: middle;
+}
+
+.u-nav .file-table th {
+  background: var(--surface-2) !important;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.u-nav .file-row {
+  background: var(--surface);
+  color: var(--text);
+  cursor: default;
+  -webkit-user-drag: none;
+}
+
+.u-nav .file-row:hover,
+.u-nav .file-row.selected,
+.u-nav .file-row.dragging,
+.u-nav .file-row.drop-candidate,
+.u-nav .file-row.drop-target {
+  background: var(--surface-2);
+}
+
+.u-nav .file-row:hover td,
+.u-nav .file-row.selected td,
+.u-nav .file-row.dragging td,
+.u-nav .file-row.drop-candidate td,
+.u-nav .file-row.drop-target td {
+  background: var(--surface-2) !important;
+}
+
+.u-nav .file-row.drop-candidate td:first-child {
+  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 72%, transparent);
+}
+
+.u-nav .file-row {
+  -webkit-user-drag: none;
+  user-select: none;
+}
+
+.u-nav .file-row.dragging {
+  opacity: 0.55;
+}
+
+.u-nav-dragging {
+  cursor: grabbing;
+}
+
+.u-nav .name-cell {
+  align-items: center;
+  display: flex;
+  gap: 6px;
+  -webkit-user-drag: none;
+  min-width: 130px;
+  user-select: none;
+}
+
+.u-nav .badge {
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--muted);
+  display: inline-flex;
+  font-size: 11px;
+  justify-content: center;
+  min-width: 50px;
+  padding: 1px 7px;
+  -webkit-user-drag: none;
+  user-select: none;
+}
+
+.u-nav .icon-grid {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
+  padding: 2px;
+}
+
+.u-nav .icon-item {
+  align-items: center;
+  background: var(--surface);
+  border: 1px solid transparent;
+  border-radius: 8px;
+  color: var(--text);
+  display: grid;
+  gap: 5px;
+  grid-template-rows: auto minmax(28px, auto) auto;
+  justify-items: center;
+  min-height: 108px;
+  padding: 8px 6px;
+  text-align: center;
+  width: 100%;
+}
+
+.u-nav .icon-item:hover,
+.u-nav .icon-item.selected,
+.u-nav .icon-item.dragging,
+.u-nav .icon-item.drop-candidate,
+.u-nav .icon-item.drop-target {
+  background: var(--surface-2);
+  border-color: var(--line);
+}
+
+.u-nav .icon-item.selected,
+.u-nav .icon-item.drop-candidate,
+.u-nav .icon-item.drop-target {
+  border-color: var(--accent);
+}
+
+.u-nav .icon-item.drop-candidate {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
+}
+
+.u-nav .file-icon {
+  display: block;
+  height: 46px;
+  position: relative;
+  width: 56px;
+}
+
+.u-nav .file-icon.directory {
+  background: linear-gradient(180deg, #ff9b4f 0%, var(--accent) 100%);
+  border: 1px solid color-mix(in srgb, var(--accent) 78%, #5b2b12);
+  border-radius: 7px 7px 6px 6px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 5px 12px rgba(24, 34, 45, 0.14);
+  height: 34px;
+  margin-top: 8px;
+}
+
+.u-nav .file-icon.directory::before {
+  background: linear-gradient(180deg, #ffb16e 0%, #f58a3a 100%);
+  border: 1px solid color-mix(in srgb, var(--accent) 72%, #5b2b12);
+  border-bottom: 0;
+  border-radius: 6px 6px 0 0;
+  content: "";
+  height: 10px;
+  left: 5px;
+  position: absolute;
+  top: -8px;
+  width: 24px;
+}
+
+.u-nav .file-icon.directory::after {
+  background: rgba(255, 255, 255, 0.18);
+  border-radius: 999px;
+  content: "";
+  height: 3px;
+  left: 8px;
+  position: absolute;
+  right: 8px;
+  top: 8px;
+}
+
+.u-nav .file-icon.file,
+.u-nav .file-icon.symlink,
+.u-nav .file-icon.other {
+  background: linear-gradient(180deg, #ffffff 0%, #eef3f7 100%);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  box-shadow: 0 5px 12px rgba(24, 34, 45, 0.12);
+  height: 44px;
+  width: 36px;
+}
+
+.u-nav .file-icon.file::before,
+.u-nav .file-icon.symlink::before,
+.u-nav .file-icon.other::before {
+  background: linear-gradient(135deg, #dce5ee 0%, #ffffff 48%, #cfd8e1 49%, #cfd8e1 100%);
+  border-left: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  border-radius: 0 5px 0 4px;
+  content: "";
+  height: 11px;
+  position: absolute;
+  right: -1px;
+  top: -1px;
+  width: 11px;
+}
+
+.u-nav .file-icon.file::after,
+.u-nav .file-icon.symlink::after,
+.u-nav .file-icon.other::after {
+  background:
+    linear-gradient(var(--muted), var(--muted)) 0 0 / 18px 2px no-repeat,
+    linear-gradient(var(--muted), var(--muted)) 0 8px / 22px 2px no-repeat,
+    linear-gradient(var(--muted), var(--muted)) 0 16px / 15px 2px no-repeat;
+  content: "";
+  height: 20px;
+  left: 7px;
+  opacity: 0.58;
+  position: absolute;
+  top: 16px;
+  width: 22px;
+}
+
+.u-nav .icon-name {
+  color: var(--text);
+  display: -webkit-box;
+  font-size: 12px;
+  line-height: 1.25;
+  max-width: 100%;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.u-nav .icon-meta {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.u-nav .context-menu {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  box-shadow: var(--shadow);
+  display: grid;
+  min-width: 170px;
+  padding: 5px;
+  position: absolute;
+  z-index: 100000;
+}
+
+.u-nav .context-menu button {
+  border-color: transparent;
+  justify-content: flex-start;
+  text-align: left;
+  width: 100%;
+}
+
+.u-nav .context-menu button:hover {
+  background: var(--surface-2);
+  border-color: var(--line);
+}
+
+.u-nav .modal-overlay {
+  align-items: center;
+  background: rgba(10, 14, 18, 0.42);
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  padding: 14px;
+  position: absolute;
+  z-index: 100020;
+}
+
+.u-nav .permissions-modal {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  box-shadow: var(--shadow);
+  color: var(--text);
+  display: grid;
+  max-height: min(580px, 100%);
+  max-width: 100%;
+  min-width: min(380px, 100%);
+  overflow: hidden;
+  width: 420px;
+}
+
+.u-nav .permissions-modal header,
+.u-nav .permissions-modal footer {
+  align-items: center;
+  background: var(--surface-2);
+  display: flex;
+  gap: 6px;
+  justify-content: space-between;
+  padding: 6px 8px 6px 10px;
+}
+
+.u-nav .permissions-modal header {
+  border-bottom: 1px solid var(--line);
+}
+
+.u-nav .permissions-modal footer {
+  border-top: 1px solid var(--line);
+  justify-content: flex-end;
+}
+
+.u-nav .permissions-modal header .icon {
+  flex: 0 0 26px;
+  min-width: 26px;
+  width: 26px;
+}
+
+.u-nav .modal-body {
+  display: grid;
+  gap: 7px;
+  overflow: auto;
+  padding: 10px;
+}
+
+.u-nav .permissions-modal input[type="text"],
+.u-nav .permissions-modal input:not([type]) {
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  color: var(--text);
+  font: inherit;
+  min-height: 28px;
+  padding: 0 8px;
+  width: 100%;
+}
+
+.u-nav .permissions-modal input:disabled {
+  opacity: 0.48;
+}
+
+.u-nav .conflict-modal {
+  width: min(560px, calc(100vw - 28px));
+}
+
+.u-nav .conflict-modal footer {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  justify-content: stretch;
+}
+
+.u-nav .conflict-modal footer button {
+  line-height: 1.15;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  padding: 0 7px;
+  white-space: normal;
+  width: 100%;
+}
+
+.u-nav .ui-modal {
+  width: min(460px, calc(100vw - 28px));
+}
+
+.u-nav .ui-modal .modal-body p {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.u-nav .ui-modal footer {
+  gap: 8px;
+}
+
+.u-nav .ui-modal .danger-action {
+  background: #c4382d;
+  border-color: #c4382d;
+}
+
+.u-nav .conflict-details {
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  display: grid;
+  gap: 6px 10px;
+  grid-template-columns: auto minmax(0, 1fr);
+  margin: 0;
+  padding: 8px;
+}
+
+.u-nav .conflict-details dt {
+  color: var(--muted);
+  font-weight: 700;
+}
+
+.u-nav .conflict-details dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.u-nav .check-row {
+  align-items: center;
+  display: flex;
+  gap: 7px;
+}
+
+.u-nav .check-row input {
+  accent-color: var(--accent);
+  height: 16px;
+  margin: 0;
+  width: 16px;
+}
+
+.u-nav .check-row.disabled {
+  opacity: 0.5;
+}
+
+.u-nav .permission-scope {
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  display: grid;
+  gap: 6px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin: 0;
+  padding: 8px;
+}
+
+.u-nav .permission-scope legend {
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 600;
+  padding: 0 4px;
+}
+
+.u-nav .permission-scope label {
+  align-items: center;
+  display: flex;
+  gap: 5px;
+  white-space: nowrap;
+}
+
+.u-nav .permission-scope input {
+  accent-color: var(--accent);
+  height: 15px;
+  margin: 0;
+  width: 15px;
+}
+
+.u-nav .field-row {
+  align-items: center;
+  display: grid;
+  gap: 6px;
+  grid-template-columns: max-content minmax(0, 1fr);
+}
+
+.u-nav .mode-input {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
+}
+
+.u-nav .transfer-panel {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  box-shadow: var(--shadow);
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  max-height: min(480px, calc(100% - 68px));
+  min-height: 190px;
+  min-width: 280px;
+  overflow: hidden;
+  position: absolute;
+  transform-origin: top right;
+  z-index: 10000;
+}
+
+.u-nav .transfer-panel.open {
+  animation: transfer-slide-down 180ms ease-out both;
+}
+
+.u-nav .transfer-panel.closing {
+  animation: transfer-slide-up 180ms ease-in both;
+  pointer-events: none;
+}
+
+.u-nav .transfer-panel-header {
+  align-items: center;
+  background: var(--surface-2);
+  border-bottom: 1px solid var(--line);
+  display: flex;
+  justify-content: space-between;
+  min-height: 34px;
+  padding: 4px 6px 4px 10px;
+}
+
+.u-nav .transfer-panel-body {
+  min-height: 0;
+  overflow: auto;
+  padding: 8px;
+}
+
+.u-nav .settings-panel {
+  animation: transfer-slide-down 160ms ease-out both;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  box-shadow: var(--shadow);
+  min-width: 280px;
+  overflow: hidden;
+  position: absolute;
+  transform-origin: top right;
+  width: min(340px, calc(100% - 32px));
+  z-index: 10010;
+}
+
+.u-nav .settings-panel-header {
+  align-items: center;
+  background: var(--surface-2);
+  border-bottom: 1px solid var(--line);
+  display: flex;
+  justify-content: space-between;
+  min-height: 34px;
+  padding: 4px 6px 4px 10px;
+}
+
+.u-nav .settings-panel-body {
+  display: grid;
+  gap: 2px;
+  padding: 6px;
+}
+
+.u-nav .setting-row {
+  align-items: center;
+  border-radius: 6px;
+  display: grid;
+  gap: 8px;
+  grid-template-columns: 1fr auto;
+  padding: 8px;
+}
+
+.u-nav .setting-row:hover {
+  background: var(--surface-2);
+}
+
+.u-nav .setting-row small {
+  color: var(--muted);
+  display: block;
+  margin-top: 2px;
+}
+
+.u-nav .setting-row input {
+  accent-color: var(--accent);
+  height: 16px;
+  width: 16px;
+}
+
+@keyframes transfer-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-18px) scaleY(0.96);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+}
+
+@keyframes transfer-slide-up {
+  from {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(-18px) scaleY(0.96);
+  }
+}
+
+.u-nav .queue-list {
+  display: grid;
+  gap: 10px;
+}
+
+.u-nav .debug-log {
+  border-top: 1px solid var(--line);
+  display: grid;
+  gap: 6px;
+  margin-top: 10px;
+  padding-top: 10px;
+}
+
+.u-nav .debug-log header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+.u-nav .debug-entry {
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  padding: 7px;
+}
+
+.u-nav .debug-entry time {
+  color: var(--muted);
+  display: block;
+  font-size: 11px;
+}
+
+.u-nav .debug-entry pre {
+  color: var(--text);
+  font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  margin: 5px 0 0;
+  max-height: 120px;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.u-nav .job {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 8px;
+}
+
+.u-nav .job .muted {
+  overflow-wrap: anywhere;
+}
+
+.u-nav .upload-job {
+  border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line));
+}
+
+.u-nav .progress {
+  background: var(--surface-2);
+  border-radius: 999px;
+  height: 6px;
+  margin-top: 6px;
+  overflow: hidden;
+}
+
+.u-nav .progress div {
+  background: var(--accent-2);
+  height: 100%;
+  width: 0;
+}
+
+.u-nav .properties dl {
+  display: grid;
+  gap: 6px 12px;
+  grid-template-columns: max-content 1fr;
+  margin: 0;
+}
+
+.u-nav .properties dt {
+  color: var(--muted);
+}
+
+.u-nav .properties dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.u-nav .preview-body {
+  display: grid;
+  gap: 8px;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.u-nav .preview-meta {
+  align-items: center;
+  border-bottom: 1px solid var(--line);
+  color: var(--muted);
+  display: grid;
+  gap: 8px;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  padding-bottom: 6px;
+}
+
+.u-nav .preview-nav {
+  display: inline-flex;
+  gap: 4px;
+}
+
+.u-nav .preview-nav button:disabled {
+  cursor: default;
+  opacity: 0.42;
+}
+
+.u-nav .preview-meta strong {
+  color: var(--text);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.u-nav .preview-text {
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  color: var(--text);
+  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  margin: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: 8px;
+  white-space: pre;
+}
+
+.u-nav .preview-rendered,
+.u-nav .preview-table-wrap,
+.u-nav .preview-media,
+.u-nav .preview-frame {
+  min-height: 0;
+}
+
+.u-nav .preview-rendered {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  overflow: auto;
+  padding: 10px;
+}
+
+.u-nav .preview-rendered h1,
+.u-nav .preview-rendered h2,
+.u-nav .preview-rendered h3,
+.u-nav .preview-rendered p,
+.u-nav .preview-rendered ul {
+  margin-top: 0;
+}
+
+.u-nav .preview-rendered code {
+  background: var(--surface-2);
+  border-radius: 4px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  padding: 1px 3px;
+}
+
+.u-nav .preview-table-wrap {
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  overflow: auto;
+}
+
+.u-nav .preview-table {
+  border-collapse: collapse;
+  min-width: 100%;
+}
+
+.u-nav .preview-table td {
+  border-bottom: 1px solid var(--line);
+  border-right: 1px solid var(--line);
+  padding: 5px 7px;
+  white-space: nowrap;
+}
+
+.u-nav .preview-media {
+  align-items: center;
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  display: flex;
+  justify-content: center;
+  overflow: auto;
+  padding: 8px;
+}
+
+.u-nav .preview-media img,
+.u-nav .preview-media video {
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.u-nav .preview-media audio {
+  width: min(100%, 560px);
+}
+
+.u-nav .preview-frame {
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  height: 100%;
+  width: 100%;
+}
+
+@media (max-width: 720px) {
+  .u-nav .topbar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .u-nav .workspace {
+    overflow: auto;
+  }
+
+  .u-nav .window,
+  .u-nav .window.maximized {
+    border-left: 0;
+    border-radius: 0;
+    border-right: 0;
+    height: calc(100vh - 120px) !important;
+    left: 0 !important;
+    min-width: 0;
+    position: relative;
+    top: 0 !important;
+    width: 100% !important;
+  }
+
+  .u-nav .window:not(.focused) {
+    display: none;
+  }
+
+  .u-nav .resize-handle {
+    display: none;
+  }
+
+  .u-nav .transfer-panel {
+    left: 10px !important;
+    max-height: min(70vh, 520px);
+    min-width: 0;
+    right: 10px !important;
+    width: auto !important;
+  }
+
+  .u-nav .settings-panel {
+    left: 10px !important;
+    min-width: 0;
+    right: 10px !important;
+    width: auto !important;
+  }
 }
diff --git a/u-navigator.plg b/u-navigator.plg
index 031721d..29ce5b3 100644
--- a/u-navigator.plg
+++ b/u-navigator.plg
@@ -1,7 +1,7 @@
 <!DOCTYPE PLUGIN [
 <!ENTITY name "u-navigator">
 <!ENTITY author "Michael Roll">
-<!ENTITY version "2026.07.14.r008">
+<!ENTITY version "2026.07.04.r007">
 <!ENTITY package "&name;-&version;.tgz">
 <!ENTITY pluginURL "https://git.casaderoll.de/michael/Unraid-Navigator/raw/branch/main/u-navigator.plg">
 <!ENTITY support "https://git.casaderoll.de/michael/Unraid-Navigator">
@@ -18,14 +18,13 @@
 &description;
 
 ### &version;
-- Replaces the floating window manager with a modern full-screen file browser.
-- Adds responsive sidebar navigation, breadcrumbs, search, list and grid views, a detail preview and transfer drawer.
-- Keeps native Dynamix integration and the existing PHP file APIs.
+- Native Dynamix-embedded U-Navigator page.
+- Adds PHP API endpoints for listing, upload, move and copy without a separate web server.
 </CHANGES>
 
 <FILE Name="/boot/config/plugins/&name;/&package;">
 <URL>https://git.casaderoll.de/michael/Unraid-Navigator/raw/branch/main/packages/&package;</URL>
-<MD5>568dd0b4ad993c41bd68d663c875805e</MD5>
+<MD5>6b8acde65433cdcd383f647a85dab3d9</MD5>
 </FILE>
 
 <FILE Run="/bin/bash">
diff --git a/u-navigator.plg.in b/u-navigator.plg.in
index 9375ed3..901ca63 100644
--- a/u-navigator.plg.in
+++ b/u-navigator.plg.in
@@ -18,9 +18,8 @@
 &description;
 
 ### &version;
-- Replaces the floating window manager with a modern full-screen file browser.
-- Adds responsive sidebar navigation, breadcrumbs, search, list and grid views, a detail preview and transfer drawer.
-- Keeps native Dynamix integration and the existing PHP file APIs.
+- Native Dynamix-embedded U-Navigator page.
+- Adds PHP API endpoints for listing, upload, move and copy without a separate web server.
 </CHANGES>
 
 <FILE Name="/boot/config/plugins/&name;/&package;">