0.3.6 — plugin registry, Unreal extracted to a plugin, in-app update check + fixes

- Official plugin registry hosted on Gitea; client fetches registry.json over HTTPS and installs plugins via backend plugin_write_file. - Auto-install autoInstall plugins on first connect; per-machine enabled state. - Extract all Unreal tooling (Build Solution / Unreal Log) into a separate "unreal" plugin (defaultEnabled) driven through the new host.ue bridge; core UI no longer hard-wires Unreal. - Settings → Plugins: "Official plugins" section with Install buttons. - Status bar: "Updates" button (right of Log) triggers an update check without restarting the client. - Fixes: NEW badge hard-right/centered without shifting text; History commit size no longer flickers (cached per change); giant icons in empty plugin/ People lists; Get Latest hover contrast. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
v0.3.5 — theme system, plugin platform, sectioned Settings, tab animations
2026-07-09 15:13:02 +03:00 · 2026-07-09 13:50:45 +03:00 · 2026-07-08 23:35:13 +03:00
18 changed files with 1488 additions and 93 deletions
--- a/HotTODO.md
+++ b/HotTODO.md
@ -0,0 +1,94 @@
 # 🔥 HotTODO — Exbyte Depot
 Фичи «супер-удобства», которых **нет ни в P4V, ни в git** — заточены под UE-команду на бинарных ассетах. Ранжировано по «польза / усилие». Стек, на который опираемся: Tauri (Rust) backend + `p4` CLI, React фронт, встроенный OpenRouter (AI), UE-MCP (`mcp__ue-blueprint__*`), уже готовые тумбы `.uasset` / 3D-вьювер / медиа-превью / файл-локи / трей+уведомления / offline / Files & Sizes / View-дерево.
 Статус: **план**, реализуем по мере выбора.
 ---
 ## 🧩 Foundation — система плагинов / аддонов
 **Идея:** фичи выпускаются как **отдельные плагины**, которые докачиваются по необходимости и не засоряют основной софт. Ядро остаётся лёгким; тяжёлое/нишевое (в т.ч. фичи 1–8 ниже) живёт в плагинах. Это фундамент — стоит сделать рано, тогда остальное можно поставлять как плагины.
 **Реалистичный дизайн под Tauri** (Rust-бэкенд скомпилирован, поэтому плагины — на фронте/сайдкаре, а не нативные .dll):
 - **Тип плагина = JS/ESM-бандл** (± WASM для тяжёлого), грузится в webview в рантайме через **стабильный Host SDK**, который экспортит ядро:
  - `p4.*` (whitelisted-команды), события (`p4-log`, `p4-transfer`, `p4-scan`…), `flash/notify`, чтение выбранного файла/CL, i18n, тема.
  - **Contribution points** — куда плагин встраивается: пункт меню Actions, контекст-меню файла/чейнджлиста, вкладка view-панели (у нас уже есть File Viewer/Tree/Locks — тот же механизм), кнопка в тулбаре, шаг перед Submit (hook). Ядро уже построено на этих точках — надо просто открыть их как API.
 - **Манифест** `plugin.json`: `name, version, entry, minAppVersion, permissions[], contributes{menus,panels,contextItems,submitHooks}`.
 - **Модель разрешений:** плагин декларирует, что ему нужно (`p4:read`, `p4:write`, `fs:read`, `network:<host>`, `ui:panel`). Пользователь подтверждает при установке. JS-песочница: iframe/Web Worker с message-bridge, доступ к ядру только через Host SDK (не напрямую к `invoke`).
 - **CSP:** у нас строгий CSP (внешнее запрещено), поэтому плагины **не грузятся с чужих URL** — их скачивают в локальную папку `plugins/` и подключают контролируемо; сетевой доступ плагину даётся только к явно разрешённым хостам.
 - **Реестр/маркет:** индекс плагинов на Gitea (список манифестов) → скачивание **подписанного** бандла (у нас уже есть инфраструктура подписи minisign) → проверка подписи → распаковка в `plugins/`. UI «Плагины»: установлено / доступно / обновления / вкл-выкл, версии, разрешения.
 - **Изоляция сбоев:** упавший плагин не роняет ядро (ловим ошибки на границе bridge), можно отключить.
 - **Сайдкар-вариант** (опционально, для бэкенд-тяжёлых плагинов): плагин = отдельный исполняемый/скрипт, ядро дёргает его по stdio-JSON (как VS Code language servers). Полезно для парсеров `.uasset`, интеграций.
 **Порядок реализации фундамента:**
 1. Внутренний рефактор: вынести существующие contribution-точки (меню/контекст/view-табы/submit-hook) за стабильный интерфейс.
 2. Host SDK + загрузчик локальных плагинов из `plugins/` + модель разрешений.
 3. UI «Плагины» (вкл/выкл, разрешения).
 4. Реестр на Gitea + скачивание/проверка подписи/обновления.
 5. Перенести 1–2 фичи из списка ниже в плагины как эталон (напр. визуальный дифф или reference-guard).
 **Усилие:** высокое (архитектура), но окупается: дальше фичи добавляются без раздувания ядра и обновляются независимо от основного релиза.
 ---
 ## 🥇 Топ — уникальное, максимум пользы
 ### 1. Reference-guard: целостность ассет-референсов перед Submit  ⭐ рекомендация №1
 Перед сабмитом парсить импорты `.uasset` (через UE asset registry / UE-MCP, либо чтение заголовков `.uasset`) и проверять: не сабмитишь ли ассет, который ссылается на другой ассет, которого **нет ни в депоте, ни в текущем changelist**.
 - **Зачем:** причина №1 сломанных билдов в UE. Ни P4V, ни git не понимают референсы ассетов.
 - **UX:** «⚠️ `M_Hero` ссылается на `T_Hero_D`, его нет на сервере и не в коммите → добавить в changelist / отменить сабмит».
 - **Как:** backend-команда `p4_check_refs(files)` → карта референсов → сверка с `p4 files` + открытыми. Бонус: «submit together» — сгруппировать взаимозависимые ассеты в один атомарный CL.
 - **Усилие:** среднее-высокое (парсинг референсов — ключевой кусок).
 ### 2. Визуальный дифф бинарников
 Не «binary files differ», а реально:
 - **Картинки** (png/tga/exr/bmp): сравнение свайпом / onion-skin / попиксельная подсветка разницы.
 - **`.uasset`**: дифф по свойствам (какой параметр материала / LOD / настройку меняли) из встроенных данных.
 - **Зачем:** P4V/git по бинарям молчат; Anchorpoint умеет частично.
 - **Как:** переиспользовать существующие тумбы/`readDepot`; для двух ревизий — `p4 print` обеих версий → canvas-свайп. Свойства `.uasset` — через UE-MCP или парсер.
 - **Усилие:** картинки — низкое-среднее (быстрый вин); свойства `.uasset` — среднее.
 ### 3. Lock handoff — запрос залоченного файла у коллеги
 Бинарь эксклюзивно залочен напарником → кнопка «Попросить файл». Ему — нативное уведомление (трей уже есть); отпустил — тебе прилетает «свободно».
 - **Зачем:** убирает «отпусти плиз ассет» из дискорда. Нет нигде.
 - **Как:** нужен лёгкий канал сообщений между клиентами. Варианты: свой мини-эндпоинт (как waitlist-server) / Perforce как транспорт (спец. changelist-описание или counter) / общий канал. Требует продумать транспорт.
 - **Усилие:** среднее (основное — транспорт уведомлений между людьми).
 ---
 ## 🥈 Осведомлённость (git/P4V не дают)
 ### 4. Presence — кто где работает прямо сейчас
 Лёгкий поллинг `p4 opened -a` + свой heartbeat → «Mira: Content/Characters, Voss: Config». Presence как в Google Docs, но по депоту. Предупреждает о коллизии **до** открытия того же ассета.
 - **Усилие:** низкое-среднее (частично уже есть `others`-индикаторы; нужен агрегированный вид + heartbeat).
 ### 5. Impact-preview перед Get Latest
 Показать не только «сколько файлов», а что это значит для UE: «синк тронет 400 материалов → ~20 мин компиляции шейдеров», «меняется .ini упаковки», «конфликт с твоими открытыми файлами».
 - **Как:** `p4 sync -n` (уже есть `p4_behind`) + классификация путей/типов; для шейдеров — эвристика по кол-ву материалов/шейдеров.
 - **Усилие:** среднее.
 ---
 ## 🥉 Скорость/безопасность (кусочки уже есть)
 ### 6. AI-ревью changelist перед Submit
 OpenRouter уже вшит (commit-месседжи) — расширить: «кладёшь 2 ГБ несжатого ассета», «забыл `.uasset`, на который ссылается материал» (пересекается с №1), «этот тип обычно лочат — взять лок?».
 - **Усилие:** низкое-среднее (инфра AI готова).
 ### 7. Управление занятым местом на диске
 Есть Files & Sizes — добавить «синкнуто 380 ГБ; вот что можно `p4 sync #none`, чтобы освободить 120 ГБ». Пересекается с View-деревом (исключил → освободил).
 - **Усилие:** низкое (есть `fs_ls` / sizes).
 ### 8. Time-travel превью ассета
 Ползунок по истории ревизии → тумба/3D на каждой версии. Есть revision graph + тумбы — соединить в визуальную ленту.
 - **Усилие:** среднее.
 ---
 ## Порядок, который предлагаю
 Развилка по стратегии:
 - **Вариант A (плагины сначала):** сделать 🧩 Foundation, затем каждую фичу — как плагин. Ядро остаётся лёгким с самого начала, но первый результат для пользователя дольше.
 - **Вариант B (ценность сначала):** сделать 1–2 фичи инлайн ради быстрого «вау», потом построить плагин-систему и вынести их в плагины как эталон. Быстрее польза, но потом рефактор.
 Рекомендую **B → потом Foundation**: сначала №2 (визуальный дифф картинок свайпом — быстрый «вау» на готовой инфре), затем №1 (reference-guard — главная польза для билдов), **после этого 🧩 Foundation** и перенос №1/№2 в плагины как образец. Дальше по выбору: №4 presence → №6 AI-ревью → №5 impact-preview → №7 диск → №3 lock handoff → №2 `.uasset`-дифф свойств → №8 time-travel — уже как плагины.
--- a/PLUGINS.md
+++ b/PLUGINS.md
@ -0,0 +1,103 @@
 # Exbyte Depot — Plugins
 Plugins add features on top of the core app so the base stays lean and specialised
 work ships (and updates) independently.
 ## What language?
 **JavaScript / TypeScript.** A plugin is a plain **ES module** that exports
 `activate(host)`. Author in TypeScript if you like, then compile to a single JS
 file (`esbuild index.ts --bundle --format=esm --outfile=index.js`). No build step
 is required for plain JS.
 Why JS and not native? The app's Rust backend is compiled and sealed; the extensible
 surface is the webview. Plugins run in the app's webview and reach the app **only**
 through the `host` object — never `invoke` directly.
 ## How plugins are loaded
 The app reads the plugin's entry source from disk (Rust) and imports it as an ES
 module from a `blob:` URL — **no `eval`**, and it stays inside the CSP
 (`script-src 'self' blob:`). Disabled plugins are never imported.
 ## Anatomy
 ```
 my-plugin/
  plugin.json     # manifest
  index.js        # ES module exporting activate(host)
 ```
 ### plugin.json
 ```json
 {
  "id": "my-plugin",                // unique; [A-Za-z0-9-_.]
  "name": "My Plugin",
  "version": "1.0.0",
  "author": "You",
  "description": "What it does.",
  "entry": "index.js",              // must stay inside the plugin folder
  "minAppVersion": "0.3.5",
  "permissions": ["p4:read", "notify"],
  "contributes": { "menu": true, "views": ["notes"], "fileContext": true, "submitHooks": true }
 }
 ```
 ### Permissions (declared, shown to the user)
 | permission | grants |
 |---|---|
 | `p4:read`  | read-only p4: `opened, dirs, describe, changeSizes, clientSpec` on `host.p4` |
 | `p4:write` | mutating p4: `add, edit, del, sync, reconcile` on `host.p4` |
 | `notify`   | native notifications via `host.notify` |
 Without a permission, the matching APIs are simply absent (or no-ops). `host.storage`,
 `host.clipboard`, `host.flash`, `host.info`, `host.t`, `host.theme` are always available.
 ## The `host` SDK
 ```ts
 host.version                       // Host SDK version, e.g. "1.0"
 host.plugin                        // { id, name, dir }
 host.has(perm)                     // boolean
 host.p4.<method>(...)              // Promise — only the whitelisted set your perms allow
 host.info()                        // { userName, clientName, clientRoot } | null
 host.selectedFile()                // { depotFile } | null
 host.refresh()                     // re-read the Changes view
 host.theme()                       // current theme's CSS-var overrides
 host.ui.addMenuItem(label, run)                 // Actions-menu action
 host.ui.addFileContextItem(label, run(file))    // right-click a file
 host.ui.addView({ id, title, render(el, host) })// a panel; render into a DOM element (return an optional cleanup fn)
 host.ui.addSubmitHook(run(files) => {ok, message})  // block/allow a commit
 host.flash(text, isError?)         // toast
 host.notify(title, body)           // native notification (needs "notify")
 host.clipboard.write(text)         // Promise
 host.storage.get/set/remove(key)   // per-plugin localStorage namespace
 host.t(key, params?)               // app i18n
 host.log(...args)                  // console, tagged with the plugin id
 ```
 ## Contribution points
 - **Menu items** and **views** appear in the **Actions** menu.
 - **File context items** appear when you right-click a file in Changes.
 - **Submit hooks** run before a commit is finalised; returning `{ ok:false, message }`
  prompts the user to confirm or cancel. (This is exactly where a reference-integrity
  guard, size check, or lint would live.)
 ## Import methods
 1. **Install from folder** — Actions → Plugins… → *Install from folder…* → pick a folder
   that contains `plugin.json`. It's copied into the app's plugins folder.
 2. **Drop-in** — Actions → Plugins… → *Open plugins folder*, drop `my-plugin/` in there,
   then *Reload*.
 3. **(Planned) Registry** — a signed registry (`exbyte-depot-plugins` repo, minisign-signed
   bundles) for one-click install/updates, reusing the app's updater signing infra.
 ## Try the example
 `plugins-examples/hello-exbyte/` demonstrates all four contribution points plus storage,
 clipboard, info and notifications. Install it from folder, then:
 - Actions → **Say hello 👋** and Actions → **Workspace Notes**
 - right-click a file → **Copy depot path (plugin)**
 - try to commit a file named `wip*` → the submit guard warns.
 ## Safety
 Plugins run in-app on the main thread — install only ones you trust. The `id` is
 path-validated, the entry cannot escape the plugin folder, and each plugin's storage
 is namespaced. A plugin that throws is isolated and does not crash the app.
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "exbyte-depot",
  "private": true,
-  "version": "0.3.4",
+  "version": "0.3.6",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/plugins-examples/hello-exbyte/index.js
+++ b/plugins-examples/hello-exbyte/index.js
@ -0,0 +1,57 @@
 // Hello Exbyte — example plugin.
 // A plugin is a plain ES module that exports `activate(host)`. The host is the
 // only way the plugin touches the app; what it can reach is gated by the
 // "permissions" in plugin.json.
 export function activate(host) {
  host.log("activating", host.plugin.id, "v", host.version);
  // 1) A menu action (appears under the Actions menu).
  host.ui.addMenuItem("Say hello 👋", () => {
    const me = host.info()?.userName || "there";
    host.flash(`Hello, ${me}! (from the Hello Exbyte plugin)`);
    host.notify("Hello Exbyte", "The example plugin says hi.");
  });
  // 2) A file context-menu item (right-click a file in Changes).
  host.ui.addFileContextItem("Copy depot path (plugin)", (file) => {
    if (file.depotFile) {
      host.clipboard.write(file.depotFile);
      host.flash("Copied: " + file.depotFile);
    }
  });
  // 3) A view — a per-workspace notepad, persisted with host.storage.
  //    Opens from the Actions menu (listed by its title).
  host.ui.addView({
    id: "notes",
    title: "Workspace Notes",
    render: (el) => {
      const key = "notes:" + (host.info()?.clientName || "default");
      const ta = document.createElement("textarea");
      ta.value = host.storage.get(key) || "";
      ta.placeholder = "Jot notes for this workspace… (saved locally, per workspace)";
      ta.style.cssText =
        "width:100%;height:320px;box-sizing:border-box;resize:vertical;" +
        "background:var(--input-bg,#111);color:var(--txt,#eee);" +
        "border:1px solid var(--border,#333);border-radius:10px;padding:12px;" +
        "font:13px/1.6 system-ui;outline:none";
      ta.addEventListener("input", () => host.storage.set(key, ta.value));
      el.appendChild(ta);
      // optional cleanup returned to the host:
      return () => host.storage.set(key, ta.value);
    },
  });
  // 4) A submit guard — blocks (with a confirm) files that look like WIP.
  //    This is the same hook point a reference-integrity guard would use.
  host.ui.addSubmitHook((files) => {
    const wip = files.filter((f) => /(^|\/)(wip|temp|scratch)[^/]*$/i.test(f.depotFile || ""));
    if (wip.length) {
      return { ok: false, message: `${wip.length} file(s) look like work-in-progress (wip / temp / scratch).` };
    }
    return { ok: true };
  });
  host.log("activated");
 }
--- a/plugins-examples/hello-exbyte/plugin.json
+++ b/plugins-examples/hello-exbyte/plugin.json
@ -0,0 +1,11 @@
 {
  "id": "hello-exbyte",
  "name": "Hello Exbyte",
  "version": "1.0.0",
  "author": "Exbyte Studios",
  "description": "Example plugin — a menu action, a per-workspace notes panel, a file context item, and a submit guard. Copy it as a starting point.",
  "entry": "index.js",
  "minAppVersion": "0.3.5",
  "permissions": ["p4:read", "notify"],
  "contributes": { "menu": true, "views": ["notes"], "fileContext": true, "submitHooks": true }
 }
--- a/plugins-examples/unreal/index.js
+++ b/plugins-examples/unreal/index.js
@ -0,0 +1,46 @@
 // Unreal Engine Tools — official plugin.
 // The core app keeps the build engine (UnrealBuildTool / MSBuild), the build
 // overlay and the log reader; this plugin is just the Unreal-facing surface:
 // a "Build Solution" action and a live Unreal-log view. Reached through the
 // permission-gated `host.ue` bridge.
 export function activate(host) {
  const ue = host.ue;
  if (!ue) { host.log("no ue bridge — plugin.json needs the \"ue\" permission"); return; }
  // Build the game target (UnrealBuildTool for the game module, MSBuild for plain C++).
  host.ui.addMenuItem("🔨 Build Solution (Unreal)", () => {
    if (!ue.hasProject()) { host.flash("No Unreal project in the current working folder.", true); return; }
    ue.build(); // triggers the core build flow + overlay
  });
  // Live Unreal editor log (tails Saved/Logs). Opens from the Actions menu.
  host.ui.addView({
    id: "unreal-log",
    title: "Unreal Log",
    render: (el) => {
      el.style.cssText = "display:flex;flex-direction:column;height:100%;min-height:340px";
      const pre = document.createElement("pre");
      pre.style.cssText =
        "flex:1;margin:0;overflow:auto;white-space:pre-wrap;word-break:break-word;" +
        "font:11.5px/1.6 var(--mono,ui-monospace,monospace);color:var(--muted,#9a9aa8)";
      el.appendChild(pre);
      let alive = true;
      async function tick() {
        if (!alive) return;
        try {
          if (!ue.hasProject()) { pre.textContent = "No Unreal project in the current working folder."; return; }
          const atBottom = pre.scrollTop + pre.clientHeight >= pre.scrollHeight - 30;
          const txt = await ue.readLog(200000);
          pre.textContent = txt || "No Unreal log yet. It appears when the editor writes to Saved/Logs (i.e. while Unreal is running).";
          if (atBottom) pre.scrollTop = pre.scrollHeight;
        } catch (e) { pre.textContent = String(e); }
      }
      tick();
      const id = setInterval(tick, 1500);
      return () => { alive = false; clearInterval(id); };
    },
  });
  host.log("Unreal Engine Tools activated");
 }
--- a/plugins-examples/unreal/plugin.json
+++ b/plugins-examples/unreal/plugin.json
@ -0,0 +1,12 @@
 {
  "id": "unreal",
  "name": "Unreal Engine Tools",
  "version": "1.0.0",
  "author": "Exbyte Studios",
  "description": "Build the game (.sln / UnrealBuildTool) and tail the Unreal editor log. Enable this on Unreal Engine projects.",
  "entry": "index.js",
  "minAppVersion": "0.3.6",
  "permissions": ["ue"],
  "defaultEnabled": true,
  "contributes": { "menu": true, "views": ["unreal-log"] }
 }
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@ -966,7 +966,7 @@ dependencies = [
 [[package]]
 name = "exbyte-depot"
-version = "0.3.4"
+version = "0.3.6"
 dependencies = [
 "encoding_rs",
 "serde",
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@ -1,6 +1,6 @@
 [package]
 name = "exbyte-depot"
-version = "0.3.4"
+version = "0.3.6"
 description = "Exbyte Depot — native Perforce client by Exbyte Studios"
 authors = ["Exbyte Studios"]
 edition = "2021"
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@ -2868,6 +2868,189 @@ async fn save_ai_key(key: String) -> Result<(), String> {
    std::fs::write(&p, key.trim()).map_err(|e| e.to_string())
 }
 // ================= plugins =================
 // Plugins live in <config>/plugins/<id>/ with a plugin.json manifest and a JS
 // entry. The frontend reads the entry source and imports it as an ES module in a
 // controlled Host-SDK scope. Enable/disable state is a small enabled.json map.
 fn plugins_dir() -> Option<std::path::PathBuf> {
    let app = APP.get()?;
    let dir = app.path().app_config_dir().ok()?.join("plugins");
    let _ = std::fs::create_dir_all(&dir);
    Some(dir)
 }
 fn plugin_enabled_map() -> std::collections::HashMap<String, bool> {
    plugins_dir()
        .map(|d| d.join("enabled.json"))
        .and_then(|p| std::fs::read_to_string(p).ok())
        .and_then(|s| serde_json::from_str(&s).ok())
        .unwrap_or_default()
 }
 fn write_plugin_enabled_map(m: &std::collections::HashMap<String, bool>) {
    if let Some(d) = plugins_dir() {
        let _ = std::fs::write(d.join("enabled.json"), serde_json::to_string_pretty(m).unwrap_or_default());
    }
 }
 fn find_plugin_dir(id: &str) -> Option<std::path::PathBuf> {
    let root = plugins_dir()?;
    for e in std::fs::read_dir(&root).ok()?.flatten() {
        if !e.path().is_dir() { continue; }
        let mp = e.path().join("plugin.json");
        if let Ok(txt) = std::fs::read_to_string(&mp) {
            if let Ok(m) = serde_json::from_str::<Value>(&txt) {
                let mid = m.get("id").and_then(|v| v.as_str()).map(String::from)
                    .unwrap_or_else(|| e.file_name().to_string_lossy().to_string());
                if mid == id { return Some(e.path()); }
            }
        }
    }
    None
 }
 /// List installed plugins (manifest + enabled flag).
 #[tauri::command]
 async fn plugin_list() -> Result<Vec<Value>, String> {
    let dir = plugins_dir().ok_or("No config dir")?;
    let en = plugin_enabled_map();
    let mut out = Vec::new();
    if let Ok(rd) = std::fs::read_dir(&dir) {
        for e in rd.flatten() {
            if !e.path().is_dir() { continue; }
            let Ok(txt) = std::fs::read_to_string(e.path().join("plugin.json")) else { continue };
            let Ok(m) = serde_json::from_str::<Value>(&txt) else { continue };
            let id = m.get("id").and_then(|v| v.as_str()).map(String::from)
                .unwrap_or_else(|| e.file_name().to_string_lossy().to_string());
            // off by default unless the manifest opts in (defaultEnabled) — official
            // plugins like Unreal ship on; the user's choice persists in enabled.json
            let default_on = m.get("defaultEnabled").and_then(|v| v.as_bool()).unwrap_or(false);
            let enabled = *en.get(&id).unwrap_or(&default_on);
            out.push(serde_json::json!({
                "id": id,
                "name": m.get("name").and_then(|v| v.as_str()).unwrap_or(""),
                "version": m.get("version").and_then(|v| v.as_str()).unwrap_or("0.0.0"),
                "description": m.get("description").and_then(|v| v.as_str()).unwrap_or(""),
                "author": m.get("author").and_then(|v| v.as_str()).unwrap_or(""),
                "permissions": m.get("permissions").cloned().unwrap_or(Value::Array(vec![])),
                "manifest": m,
                "enabled": enabled,
                "dir": e.path().to_string_lossy(),
            }));
        }
    }
    Ok(out)
 }
 /// Read a plugin's JS entry source (guards against path escape).
 #[tauri::command]
 async fn plugin_read_entry(id: String) -> Result<String, String> {
    let pdir = find_plugin_dir(&id).ok_or("Plugin not found")?;
    let manifest: Value = serde_json::from_str(&std::fs::read_to_string(pdir.join("plugin.json")).map_err(|e| e.to_string())?).map_err(|e| e.to_string())?;
    let entry = manifest.get("entry").and_then(|v| v.as_str()).unwrap_or("index.js");
    if entry.contains("..") || entry.starts_with('/') || entry.starts_with('\\') {
        return Err("Invalid entry path".into());
    }
    let full = pdir.join(entry);
    // ensure the resolved path stays inside the plugin dir
    let base = pdir.canonicalize().map_err(|e| e.to_string())?;
    let target = full.canonicalize().map_err(|e| e.to_string())?;
    if !target.starts_with(&base) {
        return Err("Entry escapes plugin folder".into());
    }
    std::fs::read_to_string(&target).map_err(|e| e.to_string())
 }
 #[tauri::command]
 async fn plugin_set_enabled(id: String, enabled: bool) -> Result<(), String> {
    let mut m = plugin_enabled_map();
    m.insert(id, enabled);
    write_plugin_enabled_map(&m);
    Ok(())
 }
 /// Write one file of a plugin into <config>/plugins/<id>/<name>. The frontend
 /// fetches the file bytes from the registry over HTTPS and hands the content here;
 /// this only touches the confined plugins folder (id + name are path-validated).
 #[tauri::command]
 async fn plugin_write_file(id: String, name: String, content: String) -> Result<(), String> {
    if id.is_empty() || !id.chars().all(|c| c.is_ascii_alphanumeric() || c == '-' || c == '_' || c == '.') || id.contains("..") {
        return Err("Invalid plugin id".into());
    }
    if name.is_empty() || name.contains('/') || name.contains('\\') || name.contains("..") {
        return Err("Invalid file name".into());
    }
    let dir = plugins_dir().ok_or("No config dir")?.join(&id);
    std::fs::create_dir_all(&dir).map_err(|e| e.to_string())?;
    std::fs::write(dir.join(&name), content).map_err(|e| e.to_string())?;
    Ok(())
 }
 fn copy_dir_recursive(from: &std::path::Path, to: &std::path::Path) -> std::io::Result<()> {
    std::fs::create_dir_all(to)?;
    for e in std::fs::read_dir(from)? {
        let e = e?;
        let dest = to.join(e.file_name());
        if e.file_type()?.is_dir() {
            copy_dir_recursive(&e.path(), &dest)?;
        } else {
            std::fs::copy(e.path(), dest)?;
        }
    }
    Ok(())
 }
 /// Install a plugin from a local folder that contains plugin.json → copies it
 /// into <config>/plugins/<id>/. Returns the plugin id.
 #[tauri::command]
 async fn plugin_install(src: String) -> Result<String, String> {
    let srcp = std::path::PathBuf::from(&src);
    if !srcp.join("plugin.json").exists() {
        return Err("Folder has no plugin.json".into());
    }
    let manifest: Value = serde_json::from_str(&std::fs::read_to_string(srcp.join("plugin.json")).map_err(|e| e.to_string())?).map_err(|e| e.to_string())?;
    let id = manifest.get("id").and_then(|v| v.as_str()).ok_or("plugin.json missing \"id\"")?.to_string();
    if id.is_empty() || !id.chars().all(|c| c.is_ascii_alphanumeric() || c == '-' || c == '_' || c == '.') {
        return Err("Invalid plugin id (use letters, digits, - _ .)".into());
    }
    let dest = plugins_dir().ok_or("No config dir")?.join(&id);
    if dest.exists() {
        let _ = std::fs::remove_dir_all(&dest); // reinstall / update
    }
    copy_dir_recursive(&srcp, &dest).map_err(|e| e.to_string())?;
    Ok(id)
 }
 #[tauri::command]
 async fn plugin_remove(id: String) -> Result<(), String> {
    let pdir = find_plugin_dir(&id).ok_or("Plugin not found")?;
    std::fs::remove_dir_all(&pdir).map_err(|e| e.to_string())?;
    let mut m = plugin_enabled_map();
    m.remove(&id);
    write_plugin_enabled_map(&m);
    Ok(())
 }
 #[tauri::command]
 async fn plugins_dir_path() -> Result<String, String> {
    plugins_dir().map(|d| d.to_string_lossy().to_string()).ok_or_else(|| "No config dir".into())
 }
 #[tauri::command]
 async fn open_plugins_dir() -> Result<(), String> {
    let dir = plugins_dir().ok_or("No config dir")?;
    let mut c = Command::new("explorer");
    #[cfg(windows)]
    {
        use std::os::windows::process::CommandExt;
        c.creation_flags(0x0800_0000);
    }
    c.arg(dir);
    c.spawn().map_err(|e| e.to_string())?;
    Ok(())
 }
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
    let mut builder = tauri::Builder::default()
@ -2959,6 +3142,14 @@ pub fn run() {
            p4_scan_stream,
            p4_scan_cancel,
            p4_transfer_cancel,
            plugin_list,
            plugin_read_entry,
            plugin_set_enabled,
            plugin_write_file,
            plugin_install,
            plugin_remove,
            plugins_dir_path,
            open_plugins_dir,
            p4_undo_change,
            open_in_explorer,
            find_uproject,
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@ -2,7 +2,7 @@
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "Exbyte Depot",
  "mainBinaryName": "Exbyte Depot",
-  "version": "0.3.4",
+  "version": "0.3.6",
  "identifier": "com.bonchellon.exbyte-depot",
  "build": {
    "beforeDevCommand": "npm run dev",
@ -24,8 +24,8 @@
      }
    ],
    "security": {
-      "csp": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob: asset: http://asset.localhost; media-src 'self' blob:; font-src 'self' data:; connect-src 'self' ipc: http://ipc.localhost https://openrouter.ai; worker-src 'self' blob:; object-src 'none'; base-uri 'self'",
+      "csp": "default-src 'self'; script-src 'self' blob:; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob: asset: http://asset.localhost; media-src 'self' blob:; font-src 'self' data:; connect-src 'self' ipc: http://ipc.localhost https://openrouter.ai https://gitea.exbytestudios.com; worker-src 'self' blob:; object-src 'none'; base-uri 'self'",
-      "devCsp": "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob: asset: http://asset.localhost; media-src 'self' blob:; font-src 'self' data:; connect-src 'self' ipc: http://ipc.localhost ws://localhost:1420 http://localhost:1420 https://openrouter.ai; worker-src 'self' blob:; object-src 'none'; base-uri 'self'"
+      "devCsp": "default-src 'self'; script-src 'self' 'unsafe-inline' blob:; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob: asset: http://asset.localhost; media-src 'self' blob:; font-src 'self' data:; connect-src 'self' ipc: http://ipc.localhost ws://localhost:1420 http://localhost:1420 https://openrouter.ai https://gitea.exbytestudios.com; worker-src 'self' blob:; object-src 'none'; base-uri 'self'"
    }
  },
  "bundle": {
--- a/src/App.css
+++ b/src/App.css
@ -94,7 +94,11 @@ input,textarea,[contenteditable="true"],
 .tgroup{display:flex;min-width:0;position:relative}
 .tgroup .tzone{flex:1;min-width:0}
 .tgroup .tzone:last-child{flex:0 0 var(--right-zone-w,220px);min-width:160px;border-right:none}
-.tzone:last-child{border-right:none}.tzone:hover{background:rgba(124,110,246,.06)}
+.tzone:last-child{border-right:none}
 .tzone:hover{background:var(--hover)}
 /* keep the labels/icon high-contrast on hover in every theme (fixes greyed-out text) */
 .tzone:hover .val{color:var(--txt)}.tzone:hover .lbl,.tzone:hover .sub{color:var(--muted)}
 .sync:hover .ic{color:var(--accent-2)}.sync:hover .val{color:var(--txt)}.sync:hover .sub{color:var(--muted)}
 /* draggable panel dividers */
 .vhandle{position:absolute;top:0;bottom:0;width:9px;cursor:col-resize;z-index:8}
@ -116,12 +120,21 @@ body.resizing{cursor:col-resize!important;user-select:none}
 .left{border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0;overflow:hidden}
 .right{display:flex;flex-direction:column;min-height:0}
-.tabs{display:flex;height:46px;flex:0 0 46px;border-bottom:1px solid var(--border)}
+.tabs{display:flex;height:46px;flex:0 0 46px;border-bottom:1px solid var(--border);position:relative}
 .tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:600;
-  color:var(--muted);cursor:pointer;position:relative;transition:color .15s;background:none;border:none}
+  color:var(--muted);cursor:pointer;position:relative;transition:color .2s;background:none;border:none}
 .tab:hover{color:var(--txt)}.tab.on{color:var(--txt)}
-.tab.on::after{content:"";position:absolute;bottom:-1px;left:16px;right:16px;height:2px;
+.tab:focus{outline:none}
-  background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:2px;box-shadow:0 0 10px rgba(124,110,246,.6)}
+.tab:focus-visible{outline:none;box-shadow:inset 0 0 0 2px rgba(124,110,246,.35)}
 .tab:active{transform:scale(.97)}
 /* sliding underline that glides between the two tabs */
 .tab-slider{position:absolute;bottom:0;height:2px;width:calc(50% - 32px);border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 10px rgba(124,110,246,.6);
  transition:left .34s cubic-bezier(.5,.02,.15,1)}
 /* content fades + rises slightly when the tab changes */
 .tabpane{flex:1;min-height:0;display:flex;flex-direction:column;animation:tabin .3s cubic-bezier(.4,0,.2,1)}
@keyframes tabin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.tab-slider{transition:none}.tabpane{animation:none}}
 .badge{font-size:11px;font-weight:600;color:var(--muted);background:var(--panel-3);padding:1px 8px;border-radius:10px;font-variant-numeric:tabular-nums}
 .tab.on .badge{color:var(--accent-2);background:rgba(124,110,246,.16)}
@ -269,6 +282,10 @@ body.resizing{cursor:col-resize!important;user-select:none}
 .upd-ic{width:34px;height:34px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,var(--accent-2),var(--accent-deep));box-shadow:0 0 18px rgba(124,110,246,.5)}
 .upd-ic svg{width:18px;height:18px}
 .upd.sm{width:auto;max-width:340px;padding:11px 14px}
 .upd.sm .upd-ic{width:28px;height:28px}
 .upd.sm.ok{cursor:pointer}
 .upd-ic.ok{background:linear-gradient(145deg,var(--add),#1f9f6e);box-shadow:0 0 16px rgba(62,207,142,.45)}
 .upd-ttl{display:flex;flex-direction:column;gap:1px;min-width:0}
 .upd-ttl b{font-size:13.5px}
 .upd-ttl span{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
@ -393,6 +410,10 @@ body.resizing-v{cursor:row-resize!important;user-select:none}
 .docktab:hover{color:var(--txt);background:var(--hover)}
 .docktab.on{color:var(--txt);border-bottom-color:var(--accent)}
 .docktab.on svg{color:var(--accent-2)}
 .docktab:active{transform:scale(.96)}
 /* dock content fades in when switching Log / Terminal / Unreal */
 .dockpane{flex:1;min-height:0;display:flex;flex-direction:column;animation:tabin .26s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.vpane,.dockpane{animation:none}}
 .dockspace{flex:1}
 .dockpanel .loghbtn{margin-left:0}
 /* terminal */
@ -674,6 +695,82 @@ body.resizing-v{cursor:row-resize!important;user-select:none}
 .vt-ic svg{width:15px;height:15px}
 .vt-name{font-size:13px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .vt-loading,.vt-empty{height:24px;display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--faint)}
 /* themes modal */
 .th-grid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:16px}
 .th-card{position:relative;border:1.5px solid var(--border);border-radius:13px;overflow:hidden;cursor:pointer;background:var(--panel);transition:.15s}
 .th-card:hover{border-color:var(--accent)}
 .th-card.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,110,246,.2)}
 .th-swatch{height:64px;display:flex;align-items:center;gap:7px;padding:0 14px}
 .th-swatch span{width:20px;height:20px;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.35)}
 .th-meta{padding:9px 12px 11px}
 .th-meta b{display:block;font-size:13px;font-weight:600}
 .th-meta span{font-size:11px;color:var(--faint)}
 .th-on{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center}
 .th-on svg{width:13px;height:13px}
 .th-actions{position:absolute;top:7px;right:7px;display:none;gap:4px}
 .th-card:hover .th-actions{display:flex}
 .th-actions button{width:24px;height:24px;border:none;border-radius:7px;background:var(--chip);color:var(--txt);cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px)}
 .th-actions button svg{width:13px;height:13px}
 .th-actions button:hover{background:var(--accent);color:#fff}
 .th-actions button.danger:hover{background:var(--del)}
 .th-edit{flex:1;min-height:0;overflow:auto;padding:16px}
 .th-edit-row{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
 .th-edit-row label{font-size:12px;color:var(--muted);font-weight:600}
 .th-edit-row input{flex:1;min-width:160px;background:var(--input-bg);border:1px solid var(--border);border-radius:9px;padding:9px 12px;color:var(--txt);font-size:14px;outline:none}
 .th-edit-row input:focus{border-color:var(--accent)}
 .th-base{display:flex;gap:2px;background:var(--panel-3);border-radius:9px;padding:2px}
 .th-base button{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;border:none;background:none;color:var(--muted);border-radius:7px;padding:7px 11px;cursor:pointer}
 .th-base button svg{width:14px;height:14px}
 .th-base button.on{background:var(--elevated);color:var(--accent-2)}
 .th-group{margin-bottom:16px}
 .th-group-h{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);font-weight:600;margin-bottom:9px}
 .th-tokens{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
 .th-token{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--txt);cursor:pointer}
 .th-token input[type=color]{width:30px;height:30px;flex:0 0 auto;border:1px solid var(--border);border-radius:8px;background:none;cursor:pointer;padding:2px}
 .th-token input[type=color]::-webkit-color-swatch{border:none;border-radius:6px}
 .th-token input[type=color]::-webkit-color-swatch-wrapper{padding:0}
 /* plugins manager */
 .pl-list{flex:1;min-height:0;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
 .pl-official-h{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);font-weight:700;margin:8px 2px 0;padding-top:10px;border-top:1px solid var(--border-soft)}
 .pl-card{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--border);border-radius:12px;padding:13px 15px;background:var(--panel);transition:.15s}
 .pl-card.off{opacity:.55}
 .pl-main{flex:1;min-width:0}
 .pl-top{display:flex;align-items:baseline;gap:9px}
 .pl-top b{font-size:14px;font-weight:650}
 .pl-ver{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
 .pl-desc{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45}
 .pl-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
 .pl-tag{font-size:11px;color:var(--muted);background:var(--panel-3);border-radius:6px;padding:2px 8px}
 .pl-perm{font-size:10.5px;font-weight:600;color:var(--accent-2);background:rgba(124,110,246,.12);border:1px solid rgba(124,110,246,.25);border-radius:6px;padding:2px 8px}
 .pl-actions{flex:0 0 auto;display:flex;align-items:center;gap:8px}
 .pl-toggle{width:38px;height:22px;border-radius:12px;border:none;background:var(--panel-3);cursor:pointer;position:relative;transition:.18s;padding:0}
 .pl-toggle span{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--faint);transition:.18s}
 .pl-toggle.on{background:var(--accent)}
 .pl-toggle.on span{left:19px;background:#fff}
 .pl-del{width:30px;height:30px;border:none;background:none;color:var(--faint);border-radius:8px;cursor:pointer;display:grid;place-items:center}
 .pl-del svg{width:15px;height:15px}
 .pl-del:hover{background:rgba(242,99,126,.14);color:var(--del)}
 .plugin-view{flex:1;min-height:0;min-height:340px;overflow:auto;padding:16px;color:var(--txt);font-size:13.5px}
 /* settings — two-pane (left nav + content) */
 .settings-modal{width:min(860px,94vw);height:min(620px,88vh);display:flex;background:var(--elevated);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;animation:updin .2s ease}
 .set-nav{flex:0 0 210px;display:flex;flex-direction:column;gap:2px;padding:14px 10px;background:var(--panel);border-right:1px solid var(--border-soft)}
 .set-nav-h{display:flex;align-items:center;gap:9px;padding:6px 10px 14px;font-size:14px;font-weight:650}
 .set-nav-logo{display:grid;place-items:center;color:var(--accent-2)}
 .set-nav-logo svg{width:18px;height:18px}
 .set-nav-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border:none;background:none;color:var(--muted);font-size:13.5px;font-weight:500;font-family:var(--font);border-radius:9px;cursor:pointer;text-align:left;transition:.12s}
 .set-nav-item .sni-ic{display:grid;place-items:center;flex:0 0 auto}
 .set-nav-item svg{width:16px;height:16px}
 .set-nav-item:hover{background:var(--hover);color:var(--txt)}
 .set-nav-item.on{background:var(--accent);color:#fff}
 .set-nav-item.danger{color:var(--del)}
 .set-nav-item.danger:hover{background:rgba(242,99,126,.14)}
 .set-nav-sp{flex:1}
 .set-main{flex:1;min-width:0;display:flex;flex-direction:column}
 .set-main-h{display:flex;align-items:center;padding:16px 18px 12px;border-bottom:1px solid var(--border-soft)}
 .set-main-h h3{font-size:16px;font-weight:650;flex:1}
 .set-main .info-body{flex:1;min-height:0;padding:16px 20px}
 .set-panel{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 .set-sep{height:1px;background:var(--border-soft);margin:14px 0}
 /* rich code editor: transparent textarea over a highlighted underlay + gutter */
 .code.editing{overflow:hidden}
 .code.editing .code-gutter{overflow:hidden}
@ -699,7 +796,7 @@ body.resizing-v{cursor:row-resize!important;user-select:none}
 .diff::-webkit-scrollbar{width:10px}.diff::-webkit-scrollbar-thumb{background:var(--panel-3);border-radius:8px}
 /* history */
-.hrow{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--border-soft)}
+.hrow{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--border-soft);position:relative}
 .hrow.click{cursor:pointer}
 .hrow:hover{background:var(--hover)}
 .hrow.sel{background:rgba(124,110,246,.12);box-shadow:inset 2px 0 0 var(--accent)}
@ -726,7 +823,8 @@ body.resizing-v{cursor:row-resize!important;user-select:none}
 /* ---- right-side view panel with tabs (File Viewer / File Tree) ---- */
 .viewpanel{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
 .vtabs{display:flex;align-items:stretch;gap:2px;padding:6px 8px 0;border-bottom:1px solid var(--border);background:var(--sunk);flex:0 0 auto;overflow-x:auto;overflow-y:hidden}
-.vtab{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px 9px 0 0;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;border:1px solid transparent;border-bottom:none;position:relative;top:1px}
+.vtab{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px 9px 0 0;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;border:1px solid transparent;border-bottom:none;position:relative;top:1px;transition:background .22s ease,border-color .22s ease,color .18s ease}
 .vtab:active{transform:scale(.97)}
 .vtab:hover{color:var(--txt);background:var(--hover)}
 .vtab.on{color:var(--txt);background:var(--bg);border-color:var(--border)}
 .vtab-ic{display:grid;place-items:center;color:var(--accent-2)}
@ -734,7 +832,7 @@ body.resizing-v{cursor:row-resize!important;user-select:none}
 .vtab-x{margin-left:4px;width:17px;height:17px;display:grid;place-items:center;border-radius:5px;font-size:15px;line-height:1;color:var(--faint)}
 .vtab-x:hover{background:var(--del);color:#fff}
 .viewbody{flex:1;display:flex;min-height:0;min-width:0;position:relative}
-.vpane{flex:1;min-width:0;min-height:0}
+.vpane{flex:1;min-width:0;min-height:0;animation:tabin .28s cubic-bezier(.4,0,.2,1)}
 .vpane>.right,.vpane>.histsplit{flex:1 1 auto;min-width:0;min-height:0}
 .vpane.tree{flex-direction:column}
 .ft-bar{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border-soft);flex:0 0 auto}
@ -759,6 +857,9 @@ body.resizing-v{cursor:row-resize!important;user-select:none}
 .hdesc{font-size:13px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
 .hmeta{font-size:11px;color:var(--faint)}
 .hsize{margin-left:7px;padding:1px 6px;border-radius:6px;background:var(--chip);border:1px solid var(--border-soft);color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
 .hnew{position:absolute;top:50%;right:14px;transform:translateY(-50%);padding:3px 10px;border-radius:7px;font-size:11px;font-weight:800;letter-spacing:.7px;color:#fff;pointer-events:none;
  background:linear-gradient(135deg,var(--accent-2),var(--accent-deep));box-shadow:0 0 0 rgba(124,110,246,.5);animation:newpulse 2.2s ease-in-out infinite}
@keyframes newpulse{0%,100%{box-shadow:0 0 0 0 rgba(124,110,246,.45)}50%{box-shadow:0 0 0 4px rgba(124,110,246,0)}}
 /* 3d viewer toolbar */
 .v3d-tools{position:absolute;top:12px;right:12px;display:flex;gap:6px;z-index:2}
@ -783,8 +884,9 @@ body.resizing-v{cursor:row-resize!important;user-select:none}
 .picker-head{padding:18px 20px 14px;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;gap:10px}
 .picker-head h3{font-size:15px;font-weight:700}
 .picker-head > svg{width:20px;height:20px;flex:0 0 auto;color:var(--accent-2)}
-.picker-head .x{margin-left:auto;width:28px;height:28px;border:none;background:var(--panel);border-radius:8px;color:var(--muted);cursor:pointer;display:grid;place-items:center}
+.picker-head .x,.set-main-h .x{margin-left:auto;width:28px;height:28px;border:none;background:var(--panel);border-radius:8px;color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:.15s}
-.picker-head .x:hover{color:var(--txt)}
+.picker-head .x:hover,.set-main-h .x:hover{color:var(--txt);background:var(--hover)}
 .picker-head .x svg,.set-main-h .x svg{width:14px;height:14px}
 .picker-list{overflow-y:auto;padding:8px}
 .picker-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;cursor:pointer;transition:background .12s}
 .picker-item:hover{background:var(--hover)}
@ -1019,7 +1121,9 @@ body.resizing-v{cursor:row-resize!important;user-select:none}
 .ur-actd{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--faint)}
 .ur-actd.active{background:#3ecb8f;box-shadow:0 0 0 3px rgba(62,203,143,.18)}
 .ur-actd.recent{background:#f4c04e}.ur-actd.idle{background:#4b4b58}
-.ur-empty{padding:16px;font-size:12px;color:var(--faint);text-align:center}
+.ur-empty{padding:16px;font-size:12px;color:var(--faint);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;white-space:pre-line}
 .ur-empty svg{width:34px;height:34px;opacity:.35;flex:0 0 auto}
 .viewer-msg svg{width:36px;height:36px;opacity:.4;flex:0 0 auto}
 .ur-detail{flex:1;display:flex;flex-direction:column;min-width:0;overflow-y:auto}
 .ur-dhead{display:flex;align-items:center;gap:14px;padding:18px 20px 14px;border-bottom:1px solid var(--border-soft)}
 .ur-dinfo{min-width:0}
--- a/src/App.tsx
+++ b/src/App.tsx
@ -4,12 +4,15 @@ import { getCurrentWindow } from "@tauri-apps/api/window";
 import { getCurrentWebview } from "@tauri-apps/api/webview";
 import { listen } from "@tauri-apps/api/event";
 import { isPermissionGranted, requestPermission, sendNotification } from "@tauri-apps/plugin-notification";
 import { open as openDialog } from "@tauri-apps/plugin-dialog";
 import ModelViewer from "./ModelViewer";
 import CodeView from "./CodeView";
 import UpdateBanner from "./Updater";
 import "./App.css";
-import { p4, statusOf, splitPath, kindOf, isCodeFile, fmtTime, describeFiles, filelogRevs, humanSize, leaf, saveSession, loadSession, clearSession, saveScope, loadScope, recentScopes, pushRecentScope, fileBytes, getEditor, setEditorPref, P4Info, OpenedFile, Client, Change, Session, Describe, Dir, User, Editor, FileRev, FsEntry } from "./p4";
+import { p4, statusOf, splitPath, kindOf, isCodeFile, fmtTime, describeFiles, filelogRevs, humanSize, leaf, saveSession, loadSession, clearSession, saveScope, loadScope, recentScopes, pushRecentScope, fileBytes, getEditor, setEditorPref, P4Info, OpenedFile, Client, Change, Session, Describe, Dir, User, Editor, FileRev, FsEntry, PluginInfo } from "./p4";
 import { t, LANG, LANGS, setLangGlobal, Lang } from "./i18n";
 import { Theme, THEME_TOKENS, BUILTIN_THEMES, allThemes, loadCustomThemes, saveCustomThemes, loadActiveId, saveActiveId, resolveTheme, applyTheme, tokenValue, newCustomId, exportTheme, importTheme } from "./themes";
 import { loadPlugins, getRegistry, subscribeRegistry, runSubmitHooks, PluginView, autoInstallOfficial, fetchRegistry, installFromRegistry, RegistryEntry } from "./plugins";
 import { aiSummary, aiExplainCode, getExplain, saveExplain, dropExplain, initials, avatarColor, activity } from "./ai";
 // native OS notification (works even when the window is hidden in the tray)
@ -79,16 +82,13 @@ const I = {
  open: <svg viewBox="0 0 24 24" fill="none"><path d="M14 4h6v6M20 4l-8 8M18 13v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>,
 };
-/* ---------------- theme hook ---------------- */
+/* ---------------- theme hook (built-in + custom themes) ---------------- */
-function useTheme(): [boolean, () => void] {
+function useTheme(): [boolean, () => void, string, (id: string) => void] {
-  const [light, setLight] = useState(() => {
+  const [themeId, setThemeId] = useState(() => loadActiveId());
-    try { return localStorage.getItem("exd-theme") === "light"; } catch { return false; }
+  useEffect(() => { applyTheme(resolveTheme(themeId)); saveActiveId(themeId); }, [themeId]);
-  });
+  const light = resolveTheme(themeId).base === "light";
-  useEffect(() => {
+  const toggleTheme = () => setThemeId((id) => (resolveTheme(id).base === "light" ? "dark" : "light"));
-    document.body.classList.toggle("light", light);
+  return [light, toggleTheme, themeId, setThemeId];
    try { localStorage.setItem("exd-theme", light ? "light" : "dark"); } catch {}
  }, [light]);
  return [light, () => setLight((l) => !l)];
 }
 /* ---------------- language hook (whole tree re-renders on change) ---------------- */
@ -118,7 +118,7 @@ export default function App() {
  const [phase, setPhase] = useState<"loading" | "connect" | "main">("loading");
  const [info, setInfo] = useState<P4Info | null>(null);
  const [session, setSession] = useState<Session | null>(null);
-  const [light, toggleTheme] = useTheme();
+  const [light, toggleTheme, themeId, setThemeId] = useTheme();
  const [lang, setLang] = useLang();
  const [zoom, setZoom] = useZoom();
  const saved = useMemo(() => loadSession(), []);
@ -140,7 +140,7 @@ export default function App() {
    content = <Connect light={light} toggleTheme={toggleTheme} initial={saved}
      onDone={(i, s) => { saveSession(s); setInfo(i); setSession(s); setPhase("main"); }} />;
  else
-    content = <Workbench info={info} session={session} light={light} toggleTheme={toggleTheme} lang={lang} setLang={setLang} zoom={zoom} setZoom={setZoom}
+    content = <Workbench info={info} session={session} light={light} toggleTheme={toggleTheme} themeId={themeId} setThemeId={setThemeId} lang={lang} setLang={setLang} zoom={zoom} setZoom={setZoom}
      onInfo={setInfo} onSession={(s) => { setSession(s); saveSession(s); }}
      onDisconnect={() => { p4.disconnect(); clearSession(); setInfo(null); setSession(null); setPhase("connect"); }} />;
@ -326,7 +326,7 @@ type ViewTab = "viewer" | "tree" | "locks"; // dockable panels in the right view
 type ModalState =
  | { kind: "workspaces"; items: Client[]; current: string }
  | { kind: "scope"; path: string; dirs: Dir[] }
-  | { kind: "settings" }
+  | { kind: "settings"; section?: "general" | "appearance" | "plugins" }
  | { kind: "users" }
  | { kind: "search" }
  | { kind: "locks" }
@ -350,10 +350,13 @@ type LogEntry = { id: number; cmd: string; count: number; ok: boolean; err?: str
 type Transfer = { op: "sync" | "submit"; count: number; total?: number; file?: string; log: string[]; cancelling?: boolean };
 type TermLine = { id: number; cmd?: string; text: string; err?: boolean; running?: boolean };
-function Workbench({ info, session, light, toggleTheme, lang, setLang, zoom, setZoom, onInfo, onSession, onDisconnect }:
+function Workbench({ info, session, light, toggleTheme, themeId, setThemeId, lang, setLang, zoom, setZoom, onInfo, onSession, onDisconnect }:
-  { info: P4Info | null; session: Session | null; light: boolean; toggleTheme: () => void; lang: Lang; setLang: (l: Lang) => void; zoom: number; setZoom: (z: number) => void; onInfo: (i: P4Info) => void; onSession: (s: Session) => void; onDisconnect: () => void }) {
+  { info: P4Info | null; session: Session | null; light: boolean; toggleTheme: () => void; themeId: string; setThemeId: (id: string) => void; lang: Lang; setLang: (l: Lang) => void; zoom: number; setZoom: (z: number) => void; onInfo: (i: P4Info) => void; onSession: (s: Session) => void; onDisconnect: () => void }) {
  const [tab, setTab] = useState<Tab>("changes");
  const [modal, setModal] = useState<ModalState | null>(null);
  const [, setPluginVer] = useState(0); // bumped when the plugin registry changes → re-render menus
  const [pluginView, setPluginView] = useState<PluginView | null>(null); // open plugin view modal
  const pluginsLoaded = useRef(false);
  const [activePath, setActivePath] = useState<string>(() => loadScope(info?.clientName || ""));
  const [files, setFiles] = useState<OpenedFile[]>([]);
  const [checked, setChecked] = useState<Set<string>>(new Set());
@ -375,6 +378,8 @@ function Workbench({ info, session, light, toggleTheme, lang, setLang, zoom, set
  const [toast, setToast] = useState<{ text: string; err?: boolean } | null>(null);
  const [history, setHistory] = useState<Change[]>([]);
  const [changeSizes, setChangeSizes] = useState<Record<string, number>>({}); // per-changelist byte weight for History
  const sizesRef = useRef<Record<string, number>>({}); // mirror of changeSizes so we only fetch new changes (no flicker)
  const histSizeScope = useRef<string>(""); // scope the cached sizes belong to
  const [detail, setDetail] = useState<Describe | null>(null);
  const [selChange, setSelChange] = useState<string>("");   // highlighted History row (instant)
  const [detailBusy, setDetailBusy] = useState(false);      // right-panel files loading
@ -387,6 +392,7 @@ function Workbench({ info, session, light, toggleTheme, lang, setLang, zoom, set
  const [xferMin, setXferMin] = useState(false); // transfer dialog collapsed to a floating chip (keeps running)
  const [showXfer, setShowXfer] = useState(false); // delayed so fast ops don't flash a dialog
  const [uproject, setUproject] = useState(""); // local .uproject path when the scope is a UE project
  const uprojectRef = useRef(""); // live mirror for the plugin ue-bridge closures
  const [slnPath, setSlnPath] = useState("");   // local .sln path in the scope (for building)
  const [editors, setEditors] = useState<Editor[]>([]); // code editors installed on this machine
  const [editorId, setEditorId] = useState(getEditor()); // chosen editor id ("" → auto-pick)
@ -610,6 +616,42 @@ function Workbench({ info, session, light, toggleTheme, lang, setLang, zoom, set
  // Source Control enabled in Unreal, UE auto-checks-out files, so they appear
  // here on their own — no reconcile needed. Reconcile is a manual fallback.
  useEffect(() => { refresh(); /* eslint-disable-next-line */ }, []);
  // ---- plugins: (re)load enabled plugins; they register menu/panel/hook contributions
  async function reloadPlugins() {
    const res = await loadPlugins({
      flash,
      notify: (title, body) => { void notify(title, body); },
      info: () => info,
      selectedFile: () => selFile || null,
      refresh: () => { void refresh(); },
      // Unreal bridge — core keeps buildSln/overlay/log; the plugin just drives them
      ue: {
        hasProject: () => !!uprojectRef.current,
        uproject: () => uprojectRef.current,
        build: () => { startBuild(); },
        readLog: (tb?: number) => p4.ueLog(uprojectRef.current, tb ?? 200_000),
      },
    });
    setPluginVer((v) => v + 1);
    return res;
  }
  useEffect(() => { uprojectRef.current = uproject; }, [uproject]); // keep the ue-bridge mirror live
  useEffect(() => {
    if (pluginsLoaded.current || !info?.clientName) return;
    pluginsLoaded.current = true;
    (async () => {
      // auto-install official plugins (e.g. Unreal) on first run so no one loses tooling
      try {
        const installed = new Set((await p4.pluginList()).map((p) => p.id));
        const added = await autoInstallOfficial(installed);
        if (added.length) console.log("[plugins] auto-installed:", added);
      } catch { /* offline — skip */ }
      const { loaded, errors } = await reloadPlugins();
      if (errors.length) console.warn("[plugins] load errors:", errors);
      if (loaded) flash(t("{n} plugin(s) loaded", { n: loaded }));
    })().catch(() => {});
  }, [info?.clientName]); // eslint-disable-line
  useEffect(() => subscribeRegistry(() => setPluginVer((v) => v + 1)), []);
  // live Perforce command log — the Rust backend emits one event per p4 call
  useEffect(() => {
    let un: (() => void) | undefined; let dead = false;
@ -870,13 +912,19 @@ function Workbench({ info, session, light, toggleTheme, lang, setLang, zoom, set
    try {
      const h = await p4.history(path);
      setHistory(h);
-      // commit weights load in the background so the list shows instantly
+      // commit weights load in the background so the list shows instantly. Sizes are
      // cached per changelist and only fetched for NEW changes — so a poll/refresh
      // on the same scope never re-fetches (which used to make the badges flicker).
      const scopeChanged = f !== histSizeScope.current;
      histSizeScope.current = f;
      if (scopeChanged) { sizesRef.current = {}; setChangeSizes({}); }
      const nums = h.map((c) => c.change || "").filter(Boolean);
-      setChangeSizes({});
+      const need = nums.filter((n) => sizesRef.current[n] === undefined);
-      if (nums.length) {
+      if (need.length) {
-        p4.changeSizes(nums, f).then((rows) => {
+        p4.changeSizes(need, f).then((rows) => {
-          const m: Record<string, number> = {};
+          const m = { ...sizesRef.current };
          for (const r of rows) m[r.change] = r.size;
          sizesRef.current = m;
          setChangeSizes(m);
        }).catch(() => {});
      }
@ -1028,6 +1076,13 @@ function Workbench({ info, session, light, toggleTheme, lang, setLang, zoom, set
      .map((f) => f.depotFile || "")
      .filter((d) => checked.has(d));
    if (!list.length || !desc.trim()) return;
    // plugin submit hooks can block (e.g. a reference-integrity guard)
    if (getRegistry().submitHooks.length) {
      const verdict = await runSubmitHooks(list.map((d) => ({ depotFile: d })));
      if (!verdict.ok) {
        if (!(await confirm({ title: t("A plugin flagged this commit"), body: verdict.message || t("A plugin blocked the commit."), confirm: t("Commit anyway"), danger: true }))) return;
      }
    }
    const message = descBody.trim() ? `${desc.trim()}\n\n${descBody.trim()}` : desc.trim();
    setBusy(true);
    try {
@ -1231,6 +1286,7 @@ function Workbench({ info, session, light, toggleTheme, lang, setLang, zoom, set
      ...(isCode ? [{ label: t("Blame (annotate)"), icon: I.people, act: () => setModal({ kind: "blame", spec: dp, name: splitPath(dp).name }) }] : []),
      { label: t("Open in Explorer"), icon: I.reveal, act: () => reveal(dp) },
      { label: t("Copy path"), icon: I.copy, act: () => copyText(dp, t("Path")) },
      ...getRegistry().fileItems.map((fi) => ({ label: fi.label, icon: I.hex, act: () => { void Promise.resolve(fi.run(view[i] as { depotFile?: string })).catch((err) => flash(String(err), true)); } })),
    ]);
  }
  async function lockFiles(dps: string[], lock: boolean) {
@ -1341,7 +1397,6 @@ function Workbench({ info, session, light, toggleTheme, lang, setLang, zoom, set
      { label: (viewTabs.includes("locks") ? "✓ " : "") + t("File Locks"), icon: I.lock, hint: t("Everyone's checked-out / exclusively-locked files, docked into the view panel."), act: () => toggleViewTab("locks") },
      { label: (dockOpen && dockTab === "log" ? "✓ " : "") + t("Log"), kb: "Ctrl+L", icon: I.log, hint: t("Show the panel of recently run Perforce commands."), act: () => openDock("log") },
      { label: (dockOpen && dockTab === "terminal" ? "✓ " : "") + t("Terminal"), kb: "Ctrl+`", icon: I.terminal, hint: t("Open an embedded terminal for raw p4 commands."), act: () => openDock("terminal") },
      ...(uproject ? [{ label: (dockOpen && dockTab === "unreal" ? "✓ " : "") + t("Unreal Log"), icon: I.hex, hint: t("Show output from the headless Unreal preview process."), act: () => openDock("unreal") }] : []),
    ],
    Tools: [
      { label: t("Search depot…"), icon: I.search, hint: t("Find files anywhere in the depot by name or path."), act: () => setModal({ kind: "search" }) },
@ -1352,7 +1407,8 @@ function Workbench({ info, session, light, toggleTheme, lang, setLang, zoom, set
      { label: t("Streams…"), icon: I.branch, hint: t("Switch stream, merge down from the parent, or copy up to it."), act: () => setModal({ kind: "streams" }) },
      { label: t("Jobs…"), icon: I.log, hint: t("Perforce's task/bug tracker — create jobs and attach them to changelists."), act: () => setModal({ kind: "jobs" }) },
      { label: t("Edit .p4ignore…"), icon: I.gear, hint: t("Edit which files reconcile / add ignore (build output, caches)."), act: () => setModal({ kind: "ignore" }) },
-      { label: (slnPath || uproject) ? t("Build Solution (.sln)") : t("Build Solution — no .sln"), kb: "Ctrl+B", icon: I.hammer, hint: t("Compile the game C++ — Unreal projects build via UnrealBuildTool (game module only), plain C++ via MSBuild."), act: startBuild },
+      ...getRegistry().menu.map((m) => ({ label: m.label, icon: I.hex, hint: t("From plugin: {p}", { p: m.pluginId }), act: () => { void Promise.resolve(m.run()).catch((e) => flash(String(e), true)); } })),
      ...getRegistry().views.map((v) => ({ label: v.title, icon: I.hex, hint: t("Plugin view"), act: () => setPluginView(v) })),
      { label: t("People & Roles…"), icon: I.people, hint: t("See who works on this depot and their roles."), act: () => setModal({ kind: "users" }) },
      { label: t("Settings…"), icon: I.gear, hint: t("App preferences — language, theme, editor, and more."), act: () => setModal({ kind: "settings" }) },
    ],
@ -1405,7 +1461,6 @@ function Workbench({ info, session, light, toggleTheme, lang, setLang, zoom, set
            ...(activePath ? [{ label: t("Properties"), icon: I.info, act: () => setModal({ kind: "folderprops", path: activePath, name: splitPath(activePath).name || activePath }) }] : []),
            { label: t("Show in File Tree"), icon: I.folder, act: () => showInTree("depot") },
            ...(uproject ? [{ label: t("Launch Unreal Engine"), icon: I.ue, act: launchUE }] : []),
            ...((slnPath || uproject) ? [{ label: t("Build Solution (.sln)"), icon: I.hammer, act: startBuild }] : []),
            { label: t("Open in Explorer"), icon: I.reveal, act: () => reveal(activePath || String(info?.clientRoot || "")) },
            { label: t("Choose another folder…"), icon: I.folder, act: () => browseTo("") },
            { label: t("Copy path"), icon: I.copy, act: () => copyText(activePath || "//…", t("Path")) },
@ -1460,10 +1515,11 @@ function Workbench({ info, session, light, toggleTheme, lang, setLang, zoom, set
          <div className="tabs">
            <button className={"tab" + (tab === "changes" ? " on" : "")} onClick={() => switchTab("changes")}>{t("Changes")} <span className="badge">{uncommitted.length}</span></button>
            <button className={"tab" + (tab === "history" ? " on" : "")} onClick={() => switchTab("history")}>{t("History")}</button>
            <span className="tab-slider" style={{ left: tab === "changes" ? "16px" : "calc(50% + 16px)" }} />
          </div>
          {tab === "changes" ? (
-            <>
+            <div className="tabpane" key="changes">
              <div className="filter">
                <div className="box">{I.search}<input placeholder={t("Filter {n} files…", { n: uncommitted.length })} value={filter} onChange={(e) => { setFilter(e.target.value); setSelRows(new Set()); }} /></div>
              </div>
@ -1567,8 +1623,9 @@ function Workbench({ info, session, light, toggleTheme, lang, setLang, zoom, set
                </button>
                <div className="addhint">{t("Commit = local (revertable). Send to the server — Submit, top-right.")}</div>
              </div>
-            </>
+            </div>
          ) : (
            <div className="tabpane" key="history">
            <HistoryList history={history} sizes={changeSizes} busy={busy} sel={selChange} onSelect={openChange}
              onContext={(c, e) => openCtx(e, [
                { label: t("Open this changelist"), icon: I.open, act: () => openChange(c) },
@ -1577,6 +1634,7 @@ function Workbench({ info, session, light, toggleTheme, lang, setLang, zoom, set
                { label: t("Copy number #{n}", { n: c.change || "" }), icon: I.copy, act: () => copyText(c.change || "", t("Number")) },
                { label: t("Copy description"), icon: I.copy, act: () => copyText((c.desc || "").trim(), t("Description")) },
              ])} />
            </div>
          )}
        </div>
@ -1638,7 +1696,7 @@ function Workbench({ info, session, light, toggleTheme, lang, setLang, zoom, set
        height={dockH} onResize={startDockResize}
        logs={logs} onClearLogs={() => setLogs([])}
        termLines={termLines} termInput={termInput} setTermInput={setTermInput} termBusy={termBusy}
-        onRun={runConsole} cmdHist={cmdHist} onClearTerm={() => setTermLines([])} uproject={uproject} />}
+        onRun={runConsole} cmdHist={cmdHist} onClearTerm={() => setTermLines([])} />}
      <div className="statusbar">
        <span className="stfront" onMouseEnter={showPeek} onMouseLeave={hidePeek} title={t("Recent commands")}>
@ -1646,9 +1704,12 @@ function Workbench({ info, session, light, toggleTheme, lang, setLang, zoom, set
          <span className="stlast">{logs.length ? `${logs[logs.length - 1].cmd}  ${logCount(logs[logs.length - 1])}` : "p4 — ready"}</span>
        </span>
        <span className="stspace" />
        {uproject && <button className="stlog" onClick={() => openDock("unreal")} title={t("Unreal Log")}>{I.hex}<span>{t("Unreal")}</span></button>}
        <button className="stlog" onClick={() => openDock("terminal")} title="Ctrl+`">{I.terminal}<span>{t("Terminal")}</span></button>
        <button className="stlog" onClick={() => openDock("log")} title="Ctrl+L">{I.log}<span>Log</span></button>
        <button className="stlog" onClick={() => window.dispatchEvent(new Event("exd-check-update"))} title={t("Check for updates")}>
          <svg viewBox="0 0 24 24" fill="none"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
          <span>{t("Updates")}</span>
        </button>
        {peek && logs.length > 0 && (
          <div className="logpeek" onMouseEnter={showPeek} onMouseLeave={hidePeek}>
            <div className="logpeek-h">{t("Log")} · {logs.length}</div>
@ -1665,13 +1726,15 @@ function Workbench({ info, session, light, toggleTheme, lang, setLang, zoom, set
          </div>
        </div>
      )}
-      {modal && modal.kind !== "users" && <AppModal modal={modal} info={info} session={session} light={light} toggleTheme={toggleTheme} lang={lang} setLang={setLang} zoom={zoom} setZoom={setZoom}
+      {modal && modal.kind !== "users" && modal.kind !== "settings" && <AppModal modal={modal} info={info} session={session} light={light} toggleTheme={toggleTheme} lang={lang} setLang={setLang} zoom={zoom} setZoom={setZoom}
        editors={editors} editorId={effEditorId} onPickEditor={chooseEditor}
        onClose={() => setModal(null)} onPickWorkspace={switchWorkspace} onBrowse={browseTo} onChoose={chooseScope} onDisconnect={onDisconnect} />}
      {modal?.kind === "users" && <UsersRoles me={info?.userName || ""} onClose={() => setModal(null)} onFlash={flash} />}
      {modal?.kind === "search" && <SearchModal scope={activePath} onClose={() => setModal(null)} onOpenEditor={(dp) => p4.openInEditor(dp, effEditorId).catch((e) => flash(String(e), true))} onReveal={reveal} onCopy={(dp) => copyText(dp, t("Path"))} />}
      {modal?.kind === "locks" && <LocksModal me={info?.userName || ""} onClose={() => setModal(null)} onReveal={reveal} onFlash={flash} onUnlock={(dp) => lockFiles([dp], false)} />}
      {modal?.kind === "typemap" && <TypemapModal onClose={() => setModal(null)} onFlash={flash} />}
      {modal?.kind === "settings" && <SettingsModal section={modal.section} info={info} session={session} light={light} toggleTheme={toggleTheme} themeId={themeId} setThemeId={setThemeId} lang={lang} setLang={setLang} zoom={zoom} setZoom={setZoom} editors={editors} editorId={effEditorId} onPickEditor={chooseEditor} onReloadPlugins={reloadPlugins} onDisconnect={onDisconnect} onFlash={flash} onClose={() => setModal(null)} />}
      {pluginView && <PluginViewModal view={pluginView} onClose={() => setPluginView(null)} />}
      {modal?.kind === "labels" && <LabelsModal scope={activePath} onClose={() => setModal(null)} onFlash={flash} onSyncTo={(l) => { setModal(null); syncTo(l); }} />}
      {modal?.kind === "branch" && <BranchModal scope={activePath} onClose={() => setModal(null)} onFlash={flash} onDone={() => { setModal(null); refresh(); }} />}
      {modal?.kind === "streams" && <StreamsModal current={String(info?.Stream || "")} onClose={() => setModal(null)} onFlash={flash} onSwitch={doSwitchStream} onInteg={doStreamInteg} />}
@ -1997,17 +2060,16 @@ function LogRow({ l }: { l: LogEntry }) {
 const P4_COMMANDS = ["add","annotate","branch","branches","change","changes","client","clients","counter","counters","delete","depot","depots","describe","diff","dirs","edit","filelog","files","fstat","group","groups","have","info","integrate","labels","login","logout","monitor","move","opened","print","protect","reconcile","reopen","resolve","resolved","revert","reviews","shelve","sizes","status","stream","streams","submit","sync","tag","tickets","unshelve","user","users","where"];
 /* ---------------- bottom dock: tabbed Log / Terminal / Unreal ---------------- */
-function DockPanel({ tab, setTab, onClose, height, onResize, logs, onClearLogs, termLines, termInput, setTermInput, termBusy, onRun, cmdHist, onClearTerm, uproject }: {
+function DockPanel({ tab, setTab, onClose, height, onResize, logs, onClearLogs, termLines, termInput, setTermInput, termBusy, onRun, cmdHist, onClearTerm }: {
  tab: "log" | "terminal" | "unreal"; setTab: (t: "log" | "terminal" | "unreal") => void; onClose: () => void;
  height: number; onResize: (e: ReactMouseEvent) => void;
  logs: LogEntry[]; onClearLogs: () => void;
  termLines: TermLine[]; termInput: string; setTermInput: (s: string) => void; termBusy: boolean;
-  onRun: (cmd: string) => void; cmdHist: string[]; onClearTerm: () => void; uproject: string;
+  onRun: (cmd: string) => void; cmdHist: string[]; onClearTerm: () => void;
 }) {
  const tabs: { key: "log" | "terminal" | "unreal"; label: string; icon: ReactNode }[] = [
    { key: "log", label: t("Log"), icon: I.log },
    { key: "terminal", label: t("Terminal"), icon: I.terminal },
    ...(uproject ? [{ key: "unreal" as const, label: t("Unreal"), icon: I.hex }] : []),
  ];
  return (
    <div className="dockpanel" style={{ flexBasis: height, height }}>
@ -2025,9 +2087,10 @@ function DockPanel({ tab, setTab, onClose, height, onResize, logs, onClearLogs,
        {(tab === "log" || tab === "terminal") && <button className="loghbtn" onClick={tab === "log" ? onClearLogs : onClearTerm}>{t("Clear")}</button>}
        <button className="loghbtn x" onClick={onClose}><svg viewBox="0 0 24 24" width="13" height="13" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg></button>
      </div>
-      {tab === "log" && <LogTab logs={logs} />}
+      <div className="dockpane" key={tab}>
-      {tab === "terminal" && <TerminalTab lines={termLines} input={termInput} setInput={setTermInput} busy={termBusy} onRun={onRun} cmdHist={cmdHist} />}
+        {tab === "log" && <LogTab logs={logs} />}
-      {tab === "unreal" && <UnrealTab uproject={uproject} />}
+        {tab === "terminal" && <TerminalTab lines={termLines} input={termInput} setInput={setTermInput} busy={termBusy} onRun={onRun} cmdHist={cmdHist} />}
      </div>
    </div>
  );
 }
@ -2102,28 +2165,6 @@ function TerminalTab({ lines, input, setInput, busy, onRun, cmdHist }: {
  );
 }
 /* tails the newest Unreal log (Saved/Logs/*.log) while the tab is open */
 function UnrealTab({ uproject }: { uproject: string }) {
  const [text, setText] = useState("");
  const [err, setErr] = useState("");
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    let live = true;
    const load = () => p4.ueLog(uproject).then((s) => { if (live) { setText(s); setErr(""); } }).catch((e) => live && setErr(String(e)));
    load();
    const iv = window.setInterval(load, 1500);
    return () => { live = false; clearInterval(iv); };
  }, [uproject]);
  useEffect(() => { if (ref.current) ref.current.scrollTop = ref.current.scrollHeight; }, [text]);
  return (
    <div className="termbody" ref={ref}>
      {err ? <div className="termhint err">{err}</div>
        : text ? <pre className="termout ue">{text}</pre>
          : <div className="termhint">{t("No Unreal log yet. It shows here when the editor writes to Saved/Logs — i.e. while Unreal is running.")}</div>}
    </div>
  );
 }
 /* ---------------- server transfer progress (P4V-style) ---------------- */
 function TransferDialog({ transfer, onCancel, onMinimize }: { transfer: Transfer; onCancel: () => void; onMinimize: () => void }) {
  const up = transfer.op === "submit";
@ -3126,6 +3167,311 @@ function ClientSpecModal({ name, isNew, onClose, onFlash, onSaved }: { name: str
 /* ---------------- typemap / exclusive-lock rules ---------------- */
 // binary asset types that should be exclusive-locked (+l) in an Unreal project —
 // only one person can check them out at a time, preventing lost binary merges.
 /* ---------------- Settings — sectioned hub (General / Appearance / Plugins) ---------------- */
 type SetSection = "general" | "appearance" | "plugins";
 function SettingsModal(props: {
  section?: SetSection; info: P4Info | null; session: Session | null;
  light: boolean; toggleTheme: () => void; themeId: string; setThemeId: (id: string) => void;
  lang: Lang; setLang: (l: Lang) => void; zoom: number; setZoom: (z: number) => void;
  editors: Editor[]; editorId: string; onPickEditor: (id: string) => void;
  onReloadPlugins: () => Promise<{ loaded: number; errors: string[] }>;
  onDisconnect: () => void; onFlash: (t: string, e?: boolean) => void; onClose: () => void;
 }) {
  const { info, session, light, toggleTheme, themeId, setThemeId, lang, setLang, zoom, setZoom, editors, editorId, onPickEditor, onReloadPlugins, onDisconnect, onFlash, onClose } = props;
  const [sec, setSec] = useState<SetSection>(props.section || "general");
  function close() { applyTheme(resolveTheme(themeId)); onClose(); } // drop any unsaved live theme preview
  useEffect(() => { const k = (e: KeyboardEvent) => e.key === "Escape" && close(); document.addEventListener("keydown", k); return () => document.removeEventListener("keydown", k); }, []); // eslint-disable-line
  const NAV: { id: SetSection; label: string; icon: ReactNode }[] = [
    { id: "general", label: t("General"), icon: I.gear },
    { id: "appearance", label: t("Appearance"), icon: I.sun },
    { id: "plugins", label: t("Plugins"), icon: I.hex },
  ];
  return (
    <div className="modal-back" onClick={close}>
      <div className="settings-modal" onClick={(e) => e.stopPropagation()}>
        <div className="set-nav">
          <div className="set-nav-h"><span className="set-nav-logo">{I.gear}</span><b>{t("Settings")}</b></div>
          {NAV.map((n) => (
            <button key={n.id} className={"set-nav-item" + (sec === n.id ? " on" : "")} onClick={() => setSec(n.id)}>
              <span className="sni-ic">{n.icon}</span>{n.label}
            </button>
          ))}
          <div className="set-nav-sp" />
          <button className="set-nav-item danger" onClick={() => { close(); onDisconnect(); }}>{I.power}{t("Disconnect")}</button>
        </div>
        <div className="set-main">
          <div className="set-main-h"><h3>{NAV.find((n) => n.id === sec)?.label}</h3>
            <button className="x" onClick={close}><svg viewBox="0 0 24 24" width="14" height="14" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg></button>
          </div>
          {sec === "general" && (
            <div className="info-body" style={{ overflow: "auto" }}>
              <div className="info-row"><span className="rk">{t("Language")}</span>
                <div className="langsel">
                  {LANGS.map((l) => (
                    <button key={l.code} className={"langbtn" + (lang === l.code ? " on" : "")} onClick={() => setLang(l.code)} title={l.name}>
                      <span className="lflag">{l.flag}</span><span className="lname">{l.name}</span>
                    </button>
                  ))}
                </div>
              </div>
              <div className="info-row"><span className="rk">{t("Base theme")}</span><button className="mbtn ghost" style={{ flex: "none", padding: "6px 14px" }} onClick={toggleTheme}>{light ? t("Light ☀") : t("Dark ☾")}</button></div>
              <div className="info-row"><span className="rk">{t("Interface scale")}</span>
                <div className="zoomsel">
                  <button className="zbtn" onClick={() => setZoom(zoom - 0.1)} disabled={zoom <= 0.5} title="−">−</button>
                  <button className="zval" onClick={() => setZoom(1)} title={t("Reset")}>{Math.round(zoom * 100)}%</button>
                  <button className="zbtn" onClick={() => setZoom(zoom + 0.1)} disabled={zoom >= 2} title="+">+</button>
                </div>
              </div>
              <div className="info-row"><span className="rk">{t("Code editor")}</span>
                <select className="edsel" value={editorId} onChange={(e) => onPickEditor(e.target.value)} title={t("Open code files in this editor")}>
                  {editors.length === 0 && <option value="default">{t("System default")}</option>}
                  {editors.map((ed) => (<option key={ed.id} value={ed.id}>{ed.id === "default" ? t("System default") : ed.name}</option>))}
                </select>
              </div>
              <div className="set-sep" />
              <div className="info-row"><span className="rk">{t("Server")}</span><span className="rv">{(session?.server || (info?.serverAddress as string) || "—").replace(/^(ssl|tcp|ssl4|tcp4|ssl6|tcp6):/i, "")}</span></div>
              <div className="info-row"><span className="rk">{t("User")}</span><span className="rv">{info?.userName || "—"}</span></div>
              <div className="info-row"><span className="rk">{t("Workspace")}</span><span className="rv">{info?.clientName || "—"}</span></div>
              <div className="info-row"><span className="rk">{t("Server version")}</span><span className="rv">{(info?.serverVersion as string || "").split("/")[2] || "—"}</span></div>
            </div>
          )}
          {sec === "appearance" && <ThemesModal embedded activeId={themeId} onApply={setThemeId} onFlash={onFlash} />}
          {sec === "plugins" && <PluginsModal embedded onReload={onReloadPlugins} onFlash={onFlash} />}
        </div>
      </div>
    </div>
  );
 }
 /* ---------------- plugins: manage installed plugins ---------------- */
 function PluginsModal({ onClose, onReload, onFlash, embedded }: { onClose?: () => void; onReload: () => Promise<{ loaded: number; errors: string[] }>; onFlash: (t: string, e?: boolean) => void; embedded?: boolean }) {
  const [list, setList] = useState<PluginInfo[]>([]);
  const [busy, setBusy] = useState(true);
  const [dir, setDir] = useState("");
  const [reg, setReg] = useState<RegistryEntry[]>([]);
  const [installing, setInstalling] = useState<string>("");
  const load = () => { setBusy(true); p4.pluginList().then(setList).catch((e) => onFlash(String(e), true)).finally(() => setBusy(false)); };
  useEffect(() => { load(); p4.pluginsDirPath().then(setDir).catch(() => {}); fetchRegistry().then(setReg).catch(() => {}); const k = (e: KeyboardEvent) => e.key === "Escape" && onClose?.(); document.addEventListener("keydown", k); return () => document.removeEventListener("keydown", k); }, []); // eslint-disable-line
  async function installReg(entry: RegistryEntry) {
    setInstalling(entry.id);
    try { await installFromRegistry(entry); load(); await onReload(); onFlash(t("Installed plugin “{id}”.", { id: entry.name })); }
    catch (e) { onFlash(String(e), true); }
    finally { setInstalling(""); }
  }
  async function toggle(p: PluginInfo, enabled: boolean) {
    try { await p4.pluginSetEnabled(p.id, enabled); load(); await onReload(); } catch (e) { onFlash(String(e), true); }
  }
  async function remove(p: PluginInfo) {
    try { await p4.pluginRemove(p.id); load(); await onReload(); onFlash(t("Removed plugin “{n}”.", { n: p.name })); } catch (e) { onFlash(String(e), true); }
  }
  async function install() {
    try {
      const sel = await openDialog({ directory: true, title: t("Pick a plugin folder (contains plugin.json)") });
      if (!sel || Array.isArray(sel)) return;
      const id = await p4.pluginInstall(sel);
      load(); await onReload();
      onFlash(t("Installed plugin “{id}”.", { id }));
    } catch (e) { onFlash(String(e), true); }
  }
  const body = (<>
        <div className="tm-hint">{t("Plugins add features on top of the core app. Install a folder with a plugin.json, toggle plugins on/off, then they load automatically. Plugins run in-app — only install ones you trust.")}</div>
        <div className="pl-list">
          {busy ? <div className="ur-empty"><span className="ldr" /> {t("Loading…")}</div>
            : list.length === 0 ? <div className="ur-empty">{I.hex}{t("No plugins installed yet.\nInstall one from a folder, or drop it into the plugins folder below.")}</div>
              : list.map((p) => (
                <div key={p.id} className={"pl-card" + (p.enabled ? "" : " off")}>
                  <div className="pl-main">
                    <div className="pl-top"><b>{p.name || p.id}</b><span className="pl-ver">v{p.version}</span></div>
                    {p.description && <div className="pl-desc">{p.description}</div>}
                    <div className="pl-meta">
                      {p.author && <span className="pl-tag">{p.author}</span>}
                      {(p.permissions || []).map((perm: string) => <span key={perm} className="pl-perm">{perm}</span>)}
                    </div>
                  </div>
                  <div className="pl-actions">
                    <button className={"pl-toggle" + (p.enabled ? " on" : "")} onClick={() => toggle(p, !p.enabled)} title={p.enabled ? t("Disable") : t("Enable")}><span /></button>
                    <button className="pl-del" onClick={() => remove(p)} title={t("Remove")}>{I.trash}</button>
                  </div>
                </div>
              ))}
          {reg.filter((e) => !list.some((p) => p.id === e.id)).length > 0 && (<>
            <div className="pl-official-h">{t("Official plugins")}</div>
            {reg.filter((e) => !list.some((p) => p.id === e.id)).map((e) => (
              <div key={e.id} className="pl-card">
                <div className="pl-main">
                  <div className="pl-top"><b>{e.name}</b><span className="pl-ver">v{e.version}</span></div>
                  {e.description && <div className="pl-desc">{e.description}</div>}
                  <div className="pl-meta">{e.author && <span className="pl-tag">{e.author}</span>}{(e.permissions || []).map((perm) => <span key={perm} className="pl-perm">{perm}</span>)}</div>
                </div>
                <div className="pl-actions">
                  <button className="mbtn primary" style={{ flex: "none", padding: "7px 13px", gap: 6 }} disabled={installing === e.id} onClick={() => installReg(e)}>{installing === e.id ? <span className="ldr sm" /> : I.down}{t("Install")}</button>
                </div>
              </div>
            ))}
          </>)}
        </div>
        <div className="modal-actions" style={{ padding: "12px 16px", borderTop: "1px solid var(--border-soft)" }}>
          <button className="mbtn ghost" onClick={() => p4.openPluginsDir().catch(() => {})} title={dir}>{I.reveal}{t("Open plugins folder")}</button>
          <button className="mbtn ghost" style={{ flex: "none", padding: "11px 16px" }} onClick={() => onReload().then(({ loaded }) => onFlash(t("{n} plugin(s) loaded", { n: loaded })))}>{I.sync}{t("Reload")}</button>
          <button className="mbtn primary" onClick={install}>{I.open}{t("Install from folder…")}</button>
        </div>
  </>);
  if (embedded) return <div className="set-panel">{body}</div>;
  return (
    <div className="modal-back" onClick={onClose}>
      <div className="picker wide" onClick={(e) => e.stopPropagation()}>
        <div className="picker-head">{I.hex}<h3>{t("Plugins")}</h3><span className="ph-sub">{t("{n} installed", { n: list.length })}</span>
          <button className="x" onClick={onClose}><svg viewBox="0 0 24 24" width="14" height="14" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg></button>
        </div>
        {body}
      </div>
    </div>
  );
 }
 /* a plugin-contributed view, mounted into a plain DOM container */
 function PluginViewModal({ view, onClose }: { view: PluginView; onClose: () => void }) {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    let cleanup: void | (() => void);
    try { cleanup = view.render(el); } catch (e) { el.textContent = String(e); }
    const k = (e: KeyboardEvent) => e.key === "Escape" && onClose();
    document.addEventListener("keydown", k);
    return () => { document.removeEventListener("keydown", k); if (typeof cleanup === "function") { try { cleanup(); } catch {} } };
  }, []); // eslint-disable-line
  return (
    <div className="modal-back" onClick={onClose}>
      <div className="picker wide" onClick={(e) => e.stopPropagation()}>
        <div className="picker-head">{I.hex}<h3>{view.title}</h3><span className="ph-sub">{view.pluginId}</span>
          <button className="x" onClick={onClose}><svg viewBox="0 0 24 24" width="14" height="14" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg></button>
        </div>
        <div className="plugin-view" ref={ref} />
      </div>
    </div>
  );
 }
 /* ---------------- themes (switch + custom theme editor) ---------------- */
 function ThemesModal({ activeId, onApply, onClose, onFlash, embedded }: { activeId: string; onApply: (id: string) => void; onClose?: () => void; onFlash: (t: string, e?: boolean) => void; embedded?: boolean }) {
  const [themes, setThemes] = useState<Theme[]>(() => allThemes());
  const [editing, setEditing] = useState<Theme | null>(null); // custom theme being edited/created
  const fileRef = useRef<HTMLInputElement>(null);
  useEffect(() => { const k = (e: KeyboardEvent) => e.key === "Escape" && (editing ? setEditing(null) : onClose?.()); document.addEventListener("keydown", k); return () => document.removeEventListener("keydown", k); }, [editing]); // eslint-disable-line
  // live preview while editing; restore the active theme when leaving the editor
  useEffect(() => { if (editing) applyTheme(editing); else applyTheme(resolveTheme(activeId)); }, [editing]); // eslint-disable-line
  function refreshList() { setThemes(allThemes()); }
  function startNew() {
    const base = BUILTIN_THEMES[0]!;
    const vars: Record<string, string> = {};
    for (const tk of THEME_TOKENS) vars[tk.var] = tokenValue(base, tk.var);
    setEditing({ id: newCustomId(), name: t("My theme"), base: "dark", vars });
  }
  function startEdit(th: Theme) {
    const vars: Record<string, string> = {};
    for (const tk of THEME_TOKENS) vars[tk.var] = tokenValue(th, tk.var);
    setEditing({ ...th, vars });
  }
  function saveEditing() {
    if (!editing) return;
    const customs = loadCustomThemes().filter((c) => c.id !== editing.id);
    customs.push({ ...editing, builtin: false });
    saveCustomThemes(customs);
    refreshList();
    setEditing(null);
    onApply(editing.id);
    onFlash(t("Theme “{n}” saved.", { n: editing.name }));
  }
  function del(th: Theme) {
    saveCustomThemes(loadCustomThemes().filter((c) => c.id !== th.id));
    refreshList();
    if (activeId === th.id) onApply("dark");
    else applyTheme(resolveTheme(activeId));
  }
  function doExport(th: Theme) {
    const blob = new Blob([exportTheme(th)], { type: "application/json" });
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob); a.download = `${th.name.replace(/\s+/g, "-").toLowerCase()}.exbyte-theme.json`; a.click();
    URL.revokeObjectURL(a.href);
  }
  function onImportFile(e: { target: HTMLInputElement }) {
    const f = e.target.files?.[0]; if (!f) return;
    f.text().then((txt) => { const th = importTheme(txt); const customs = loadCustomThemes(); customs.push(th); saveCustomThemes(customs); refreshList(); onApply(th.id); onFlash(t("Theme “{n}” imported.", { n: th.name })); })
      .catch((err) => onFlash(String(err), true));
  }
  const groups = Array.from(new Set(THEME_TOKENS.map((tk) => tk.group)));
  const body = (!editing ? (<>
          <div className="th-grid">
            {themes.map((th) => (
              <div key={th.id} className={"th-card" + (th.id === activeId ? " on" : "")} onClick={() => onApply(th.id)}>
                <div className="th-swatch" style={{ background: th.vars["--bg"] || (th.base === "light" ? "#eef0f5" : "#0b0b12") }}>
                  <span style={{ background: th.vars["--panel"] || (th.base === "light" ? "#fff" : "#161621") }} />
                  <span style={{ background: th.vars["--accent"] || "#7c6ef6" }} />
                  <span style={{ background: th.vars["--accent-2"] || "#9a8bf9" }} />
                </div>
                <div className="th-meta"><b>{th.name}</b><span>{th.base === "light" ? t("Light") : t("Dark")}{th.builtin ? "" : " · " + t("custom")}</span></div>
                {th.id === activeId && <span className="th-on">{I.check}</span>}
                {!th.builtin && (
                  <div className="th-actions" onClick={(e) => e.stopPropagation()}>
                    <button title={t("Edit")} onClick={() => startEdit(th)}>{I.pencil}</button>
                    <button title={t("Export")} onClick={() => doExport(th)}>{I.down}</button>
                    <button title={t("Delete")} className="danger" onClick={() => del(th)}>{I.trash}</button>
                  </div>
                )}
              </div>
            ))}
          </div>
          <div className="modal-actions" style={{ padding: "12px 16px", borderTop: "1px solid var(--border-soft)" }}>
            <input ref={fileRef} type="file" accept=".json" style={{ display: "none" }} onChange={onImportFile} />
            <button className="mbtn ghost" onClick={() => fileRef.current?.click()}>{I.open}{t("Import…")}</button>
            <button className="mbtn primary" onClick={startNew}><svg viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /></svg>{t("New custom theme")}</button>
          </div>
        </>) : (<>
          <div className="th-edit">
            <div className="th-edit-row">
              <label>{t("Name")}</label>
              <input value={editing.name} onChange={(e) => setEditing({ ...editing, name: e.target.value })} />
              <div className="th-base">
                <button className={editing.base === "dark" ? "on" : ""} onClick={() => setEditing({ ...editing, base: "dark" })}>{I.moon} {t("Dark")}</button>
                <button className={editing.base === "light" ? "on" : ""} onClick={() => setEditing({ ...editing, base: "light" })}>{I.sun} {t("Light")}</button>
              </div>
            </div>
            {groups.map((g) => (
              <div key={g} className="th-group">
                <div className="th-group-h">{g}</div>
                <div className="th-tokens">
                  {THEME_TOKENS.filter((tk) => tk.group === g).map((tk) => (
                    <label key={tk.var} className="th-token">
                      <input type="color" value={editing.vars[tk.var] || "#000000"} onChange={(e) => setEditing({ ...editing, vars: { ...editing.vars, [tk.var]: e.target.value } })} />
                      <span>{tk.label}</span>
                    </label>
                  ))}
                </div>
              </div>
            ))}
          </div>
          <div className="modal-actions" style={{ padding: "12px 16px", borderTop: "1px solid var(--border-soft)" }}>
            <button className="mbtn ghost" onClick={() => setEditing(null)}>{t("Cancel")}</button>
            <button className="mbtn ghost" style={{ flex: "none", padding: "11px 16px" }} onClick={() => doExport(editing)}>{I.down}{t("Export")}</button>
            <button className="mbtn primary" onClick={saveEditing}>{I.check}{t("Save & apply")}</button>
          </div>
        </>));
  if (embedded) return <div className="set-panel">{body}</div>;
  return (
    <div className="modal-back" onClick={() => (editing ? setEditing(null) : onClose?.())}>
      <div className="picker wide" onClick={(e) => e.stopPropagation()}>
        <div className="picker-head">{I.sun}<h3>{editing ? t("Custom theme") : t("Themes")}</h3>
          <span className="ph-sub">{editing ? editing.name : t("{n} themes", { n: themes.length })}</span>
          <button className="x" onClick={() => (editing ? setEditing(null) : onClose?.())}><svg viewBox="0 0 24 24" width="14" height="14" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg></button>
        </div>
        {body}
      </div>
    </div>
  );
 }
 const UE_LOCK_EXTS = ["uasset", "umap", "upk", "fbx", "png", "tga", "bmp", "jpg", "jpeg", "psd", "exr", "hdr", "wav", "mp3", "ogg", "ttf", "otf", "ico", "bin", "dds"];
 function TypemapModal({ onClose, onFlash }: { onClose: () => void; onFlash: (t: string, e?: boolean) => void }) {
  const [entries, setEntries] = useState<string[]>([]);
@ -3351,6 +3697,10 @@ function HistoryList({ history, sizes, busy, sel, onSelect, onContext }: { histo
    <div className="files" style={{ position: "relative" }}>
      {history.map((c) => {
        const sz = sizes?.[c.change || ""];
        // "NEW" badge on commits submitted within the last 3 hours (recomputed on
        // every history refresh, so it fades away on its own)
        const ageMs = c.time ? Date.now() - Number(c.time) * 1000 : Infinity;
        const fresh = ageMs >= 0 && ageMs < 3 * 3600 * 1000;
        return (
          <div key={c.change} className={"hrow click" + (sel === c.change ? " sel" : "")} onClick={() => onSelect(c)} onContextMenu={(e) => onContext?.(c, e)}>
            <Avatar user={c.user || "?"} size={26} />
@ -3358,6 +3708,7 @@ function HistoryList({ history, sizes, busy, sel, onSelect, onContext }: { histo
              <span className="hdesc">{(c.desc || "").trim() || t("(no description)")}</span>
              <span className="hmeta">#{c.change} · {c.user} · {fmtTime(c.time)}{sz != null && sz > 0 ? <span className="hsize" title={t("Total size of files in this changelist")}>{humanSize(sz)}</span> : null}</span>
            </span>
            {fresh && <span className="hnew" title={t("Submitted less than 3 hours ago")}>{t("NEW")}</span>}
          </div>
        );
      })}
--- a/src/Updater.tsx
+++ b/src/Updater.tsx
@ -1,32 +1,50 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { check, type Update } from "@tauri-apps/plugin-updater";
 import { relaunch } from "@tauri-apps/plugin-process";
 import { t } from "./i18n";
-type Phase = "idle" | "available" | "downloading" | "done" | "error";
+type Phase = "idle" | "checking" | "available" | "uptodate" | "downloading" | "done" | "error";
-// Non-intrusive update prompt: quietly checks the Gitea Releases endpoint a few
+// Update prompt. Quietly checks the Gitea Releases endpoint a few seconds after
-// seconds after launch. If a newer signed version exists, slides a small card into
+// launch, and again on demand when the "Updates" button fires `exd-check-update`.
-// the bottom-right corner. The user chooses when to install — nothing is forced.
+// If a newer signed version exists, slides a small card into the bottom-right.
 export default function UpdateBanner() {
  const [update, setUpdate] = useState<Update | null>(null);
  const [phase, setPhase] = useState<Phase>("idle");
  const [pct, setPct] = useState(0);
  const [err, setErr] = useState("");
  const [hidden, setHidden] = useState(false);
  const busyRef = useRef(false);
  // shared check routine. `manual` shows "checking" / "up to date" feedback.
  async function runCheck(manual: boolean) {
    if (busyRef.current || phase === "downloading") return;
    busyRef.current = true;
    if (manual) { setHidden(false); setPhase("checking"); }
    try {
      const u = await check();
      if (u) { setUpdate(u); setPhase("available"); setHidden(false); }
      else if (manual) { setPhase("uptodate"); setHidden(false); }
      else setPhase("idle");
    } catch (e) {
      if (manual) { setErr(String(e)); setPhase("error"); setHidden(false); }
    } finally { busyRef.current = false; }
  }
  // initial silent check + listen for manual "Updates" clicks
  useEffect(() => {
-    let live = true;
+    const id = setTimeout(() => runCheck(false), 4000);
-    const t = setTimeout(async () => {
+    const onManual = () => runCheck(true);
-      try {
+    window.addEventListener("exd-check-update", onManual);
-        const u = await check();
+    return () => { clearTimeout(id); window.removeEventListener("exd-check-update", onManual); };
-        if (live && u) { setUpdate(u); setPhase("available"); }
+  }, []); // eslint-disable-line
-      } catch {
+
-        // offline, or no release published yet — stay silent, never nag
+  // auto-dismiss the transient "up to date" card
-      }
+  useEffect(() => {
-    }, 4000);
+    if (phase !== "uptodate") return;
-    return () => { live = false; clearTimeout(t); };
+    const id = setTimeout(() => { setHidden(true); setPhase("idle"); }, 3500);
-  }, []);
+    return () => clearTimeout(id);
  }, [phase]);
  async function install() {
    if (!update) return;
@ -43,7 +61,25 @@ export default function UpdateBanner() {
    } catch (e) { setErr(String(e)); setPhase("error"); }
  }
-  if (hidden || phase === "idle" || !update) return null;
+  if (hidden || phase === "idle") return null;
  // compact cards for the transient states (no `update` object yet)
  if (phase === "checking") {
    return <div className="upd sm"><div className="upd-head"><span className="upd-ic"><span className="ldr sm" /></span><div className="upd-ttl"><b>{t("Checking for updates…")}</b></div></div></div>;
  }
  if (phase === "uptodate") {
    return <div className="upd sm ok" onClick={() => { setHidden(true); setPhase("idle"); }}>
      <div className="upd-head"><span className="upd-ic ok"><svg viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5 9-11" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg></span>
        <div className="upd-ttl"><b>{t("You're on the latest version")}</b></div></div>
    </div>;
  }
  if (phase === "error") {
    return <div className="upd sm"><div className="upd-head"><span className="upd-ic"><svg viewBox="0 0 24 24" fill="none"><path d="M12 8v5m0 3h.01M10.3 4l-7 12A1.5 1.5 0 0 0 4.6 18h14.8a1.5 1.5 0 0 0 1.3-2L13.7 4a1.5 1.5 0 0 0-3.4 0Z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg></span>
      <div className="upd-ttl"><b>{t("Update check failed")}</b><span>{err.slice(0, 80)}</span></div>
      <button className="upd-x" onClick={() => { setHidden(true); setPhase("idle"); }}><svg viewBox="0 0 24 24" width="13" height="13" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg></button></div>
    </div>;
  }
  if (!update) return null;
  return (
    <div className="upd">
@ -55,7 +91,7 @@ export default function UpdateBanner() {
          <b>{t("Update available")}</b>
          <span>Exbyte Depot v{update.version}</span>
        </div>
-        {(phase === "available" || phase === "error") && (
+        {phase === "available" && (
          <button className="upd-x" onClick={() => setHidden(true)} title={t("Later")}>
            <svg viewBox="0 0 24 24" width="13" height="13" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg>
          </button>
@ -71,7 +107,6 @@ export default function UpdateBanner() {
        </div>
      )}
      {phase === "done" && <div className="upd-notes">{t("Installed — restarting…")}</div>}
      {phase === "error" && <div className="upd-notes err">{err}</div>}
      {phase === "available" && (
        <div className="upd-actions">
--- a/src/i18n.ts
+++ b/src/i18n.ts
@ -157,6 +157,54 @@ const D: Record<string, Tr> = {
  "Included — click to exclude (won’t be synced)": { ru: "Включено — клик, чтобы исключить (не будет качаться)", de: "Enthalten — klicken zum Ausschließen (wird nicht synchronisiert)", fr: "Inclus — cliquer pour exclure (ne sera pas synchronisé)", es: "Incluido — clic para excluir (no se sincronizará)" },
  "Excluded — click to include (will be synced)": { ru: "Исключено — клик, чтобы включить (будет качаться)", de: "Ausgeschlossen — klicken zum Einschließen (wird synchronisiert)", fr: "Exclu — cliquer pour inclure (sera synchronisé)", es: "Excluido — clic para incluir (se sincronizará)" },
  "(no subfolders)": { ru: "(нет подпапок)", de: "(keine Unterordner)", fr: "(aucun sous-dossier)", es: "(sin subcarpetas)" },
  "Themes": { ru: "Темы", de: "Themes", fr: "Thèmes", es: "Temas" },
  "Themes…": { ru: "Темы…", de: "Themes…", fr: "Thèmes…", es: "Temas…" },
  "Switch the color theme or make your own custom theme.": { ru: "Сменить цветовую тему или создать свою.", de: "Farbthema wechseln oder ein eigenes erstellen.", fr: "Changer de thème ou créer le vôtre.", es: "Cambia el tema de color o crea el tuyo." },
  "Plugins…": { ru: "Плагины…", de: "Plugins…", fr: "Extensions…", es: "Plugins…" },
  "Install and manage plugins that add extra features on top of the core app.": { ru: "Установка и управление плагинами, которые добавляют функции поверх ядра.", de: "Plugins installieren und verwalten, die Funktionen über der Kern-App hinzufügen.", fr: "Installer et gérer des extensions qui ajoutent des fonctions au cœur de l’app.", es: "Instala y gestiona plugins que añaden funciones sobre el núcleo." },
  "Custom theme": { ru: "Своя тема", de: "Eigenes Theme", fr: "Thème personnalisé", es: "Tema personalizado" },
  "{n} themes": { ru: "{n} тем", de: "{n} Themes", fr: "{n} thèmes", es: "{n} temas" },
  "My theme": { ru: "Моя тема", de: "Mein Theme", fr: "Mon thème", es: "Mi tema" },
  "Theme “{n}” saved.": { ru: "Тема «{n}» сохранена.", de: "Theme „{n}“ gespeichert.", fr: "Thème « {n} » enregistré.", es: "Tema «{n}» guardado." },
  "Theme “{n}” imported.": { ru: "Тема «{n}» импортирована.", de: "Theme „{n}“ importiert.", fr: "Thème « {n} » importé.", es: "Tema «{n}» importado." },
  "Light": { ru: "Светлая", de: "Hell", fr: "Clair", es: "Claro" },
  "Dark": { ru: "Тёмная", de: "Dunkel", fr: "Sombre", es: "Oscuro" },
  "custom": { ru: "своя", de: "eigen", fr: "perso", es: "propio" },
  "Export": { ru: "Экспорт", de: "Exportieren", fr: "Exporter", es: "Exportar" },
  "Import…": { ru: "Импорт…", de: "Importieren…", fr: "Importer…", es: "Importar…" },
  "New custom theme": { ru: "Новая своя тема", de: "Neues eigenes Theme", fr: "Nouveau thème perso", es: "Nuevo tema propio" },
  "Save & apply": { ru: "Сохранить и применить", de: "Speichern & anwenden", fr: "Enregistrer et appliquer", es: "Guardar y aplicar" },
  "Name": { ru: "Название", de: "Name", fr: "Nom", es: "Nombre" },
  "NEW": { ru: "НОВОЕ", de: "NEU", fr: "NOUVEAU", es: "NUEVO" },
  "Submitted less than 3 hours ago": { ru: "Засабмичено меньше 3 часов назад", de: "Vor weniger als 3 Stunden übermittelt", fr: "Soumis il y a moins de 3 heures", es: "Enviado hace menos de 3 horas" },
  "Plugins": { ru: "Плагины", de: "Plugins", fr: "Extensions", es: "Plugins" },
  "General": { ru: "Общие", de: "Allgemein", fr: "Général", es: "General" },
  "Check for updates": { ru: "Проверить обновления", de: "Nach Updates suchen", fr: "Vérifier les mises à jour", es: "Buscar actualizaciones" },
  "Updates": { ru: "Обновления", de: "Updates", fr: "Mises à jour", es: "Actualizaciones" },
  "Checking for updates…": { ru: "Проверяю обновления…", de: "Suche nach Updates…", fr: "Recherche de mises à jour…", es: "Buscando actualizaciones…" },
  "You're on the latest version": { ru: "У тебя последняя версия", de: "Du hast die neueste Version", fr: "Vous avez la dernière version", es: "Tienes la última versión" },
  "Update check failed": { ru: "Не удалось проверить обновления", de: "Update-Prüfung fehlgeschlagen", fr: "Échec de la vérification", es: "Fallo al buscar actualizaciones" },
  "Appearance": { ru: "Оформление", de: "Darstellung", fr: "Apparence", es: "Apariencia" },
  "Base theme": { ru: "Базовая тема", de: "Basis-Theme", fr: "Thème de base", es: "Tema base" },
  "{n} installed": { ru: "установлено: {n}", de: "{n} installiert", fr: "{n} installés", es: "{n} instalados" },
  "Plugins add features on top of the core app. Install a folder with a plugin.json, toggle plugins on/off, then they load automatically. Plugins run in-app — only install ones you trust.": { ru: "Плагины добавляют функции поверх ядра. Установи папку с plugin.json, включай/выключай — они грузятся автоматически. Плагины работают внутри приложения — ставь только те, которым доверяешь.", de: "Plugins fügen Funktionen zur Kern-App hinzu. Installiere einen Ordner mit plugin.json, schalte Plugins ein/aus — sie laden automatisch. Plugins laufen in der App — installiere nur vertrauenswürdige.", fr: "Les extensions ajoutent des fonctions au cœur de l’app. Installez un dossier avec plugin.json, activez/désactivez — elles se chargent automatiquement. Elles s’exécutent dans l’app — n’installez que celles de confiance.", es: "Los plugins añaden funciones al núcleo. Instala una carpeta con plugin.json, actívalos/desactívalos y se cargan solos. Se ejecutan en la app — instala solo los de confianza." },
  "No plugins installed yet.\nInstall one from a folder, or drop it into the plugins folder below.": { ru: "Плагинов пока нет.\nУстанови из папки или положи в папку плагинов ниже.", de: "Noch keine Plugins.\nAus einem Ordner installieren oder in den Plugin-Ordner unten legen.", fr: "Aucune extension.\nInstallez depuis un dossier ou déposez-la dans le dossier ci-dessous.", es: "Aún no hay plugins.\nInstala desde una carpeta o suéltalo en la carpeta de abajo." },
  "Enable": { ru: "Включить", de: "Aktivieren", fr: "Activer", es: "Activar" },
  "Disable": { ru: "Выключить", de: "Deaktivieren", fr: "Désactiver", es: "Desactivar" },
  "Official plugins": { ru: "Официальные плагины", de: "Offizielle Plugins", fr: "Extensions officielles", es: "Plugins oficiales" },
  "Install": { ru: "Установить", de: "Installieren", fr: "Installer", es: "Instalar" },
  "Open plugins folder": { ru: "Открыть папку плагинов", de: "Plugin-Ordner öffnen", fr: "Ouvrir le dossier des extensions", es: "Abrir carpeta de plugins" },
  "Reload": { ru: "Перезагрузить", de: "Neu laden", fr: "Recharger", es: "Recargar" },
  "Install from folder…": { ru: "Установить из папки…", de: "Aus Ordner installieren…", fr: "Installer depuis un dossier…", es: "Instalar desde carpeta…" },
  "Pick a plugin folder (contains plugin.json)": { ru: "Выбери папку плагина (с plugin.json)", de: "Plugin-Ordner wählen (mit plugin.json)", fr: "Choisir un dossier d’extension (avec plugin.json)", es: "Elige una carpeta de plugin (con plugin.json)" },
  "Installed plugin “{id}”.": { ru: "Плагин «{id}» установлен.", de: "Plugin „{id}“ installiert.", fr: "Extension « {id} » installée.", es: "Plugin «{id}» instalado." },
  "Removed plugin “{n}”.": { ru: "Плагин «{n}» удалён.", de: "Plugin „{n}“ entfernt.", fr: "Extension « {n} » supprimée.", es: "Plugin «{n}» eliminado." },
  "{n} plugin(s) loaded": { ru: "загружено плагинов: {n}", de: "{n} Plugin(s) geladen", fr: "{n} extension(s) chargée(s)", es: "{n} plugin(s) cargados" },
  "From plugin: {p}": { ru: "Из плагина: {p}", de: "Von Plugin: {p}", fr: "De l’extension : {p}", es: "Del plugin: {p}" },
  "Plugin view": { ru: "Панель плагина", de: "Plugin-Ansicht", fr: "Vue d’extension", es: "Vista de plugin" },
  "A plugin flagged this commit": { ru: "Плагин отметил этот коммит", de: "Ein Plugin hat diesen Commit markiert", fr: "Une extension a signalé ce commit", es: "Un plugin marcó este commit" },
  "A plugin blocked the commit.": { ru: "Плагин заблокировал коммит.", de: "Ein Plugin hat den Commit blockiert.", fr: "Une extension a bloqué le commit.", es: "Un plugin bloqueó el commit." },
  "Commit anyway": { ru: "Всё равно закоммитить", de: "Trotzdem committen", fr: "Valider quand même", es: "Confirmar de todos modos" },
  "Switch between the folder tree and the raw spec": { ru: "Переключить дерево папок / сырой спек", de: "Zwischen Ordnerbaum und Rohspezifikation wechseln", fr: "Basculer entre l’arborescence et la spec brute", es: "Alternar entre árbol de carpetas y spec en bruto" },
  "Folder tree (include / exclude)": { ru: "Дерево папок (включить / исключить)", de: "Ordnerbaum (ein-/ausschließen)", fr: "Arborescence (inclure / exclure)", es: "Árbol de carpetas (incluir / excluir)" },
  "Raw spec text": { ru: "Сырой текст спека", de: "Rohspezifikation", fr: "Spec brute", es: "Spec en bruto" },
--- a/src/p4.ts
+++ b/src/p4.ts
@ -108,6 +108,15 @@ export const p4 = {
  scanCancel: () => invoke<void>("p4_scan_cancel"),
  // ask an in-progress submit/sync transfer to stop (safe pre-commit for submit)
  transferCancel: () => invoke<void>("p4_transfer_cancel"),
  // --- plugins ---
  pluginList: () => invoke<PluginInfo[]>("plugin_list"),
  pluginReadEntry: (id: string) => invoke<string>("plugin_read_entry", { id }),
  pluginSetEnabled: (id: string, enabled: boolean) => invoke<void>("plugin_set_enabled", { id, enabled }),
  pluginWriteFile: (id: string, name: string, content: string) => invoke<void>("plugin_write_file", { id, name, content }),
  pluginInstall: (src: string) => invoke<string>("plugin_install", { src }),
  pluginRemove: (id: string) => invoke<void>("plugin_remove", { id }),
  pluginsDirPath: () => invoke<string>("plugins_dir_path"),
  openPluginsDir: () => invoke<void>("open_plugins_dir"),
  describe: (change: string) => invoke<Describe>("p4_describe", { change }),
  undoChange: (change: string) => invoke<string>("p4_undo_change", { change }),
  openInExplorer: (target: string) => invoke<void>("open_in_explorer", { target }),
@ -196,6 +205,7 @@ export function getEditor(): string { try { return localStorage.getItem("exd-edi
 export function setEditorPref(id: string) { try { localStorage.setItem("exd-editor", id); } catch {} }
 export interface Dir { dir?: string; local?: boolean; [k: string]: unknown }
 export interface PluginInfo { id: string; name: string; version: string; description: string; author: string; permissions: string[]; manifest: Record<string, unknown>; enabled: boolean; dir: string }
 // depot path -> short leaf name (last segment)
 export function leaf(path?: string): string {
  if (!path) return "";
--- a/src/plugins.ts
+++ b/src/plugins.ts
@ -0,0 +1,200 @@
 // Plugin platform — Host SDK + loader + contribution registry.
 //
 // Plugins are plain JS/ESM modules (author in TS → compile to JS). Each ships a
 // `plugin.json` manifest + a JS entry that exports `activate(host)`. We read the
 // entry source from disk (Rust) and import it as an ES module from a blob: URL —
 // no eval, works under CSP `script-src blob:`. The plugin only touches the app
 // through the `host` object; capabilities are gated by declared permissions.
 import { p4, PluginInfo } from "./p4";
 import { t } from "./i18n";
 import { resolveTheme, loadActiveId } from "./themes";
 // ---- contribution shapes ----------------------------------------------------
 export interface PluginMenuItem { pluginId: string; label: string; run: () => void | Promise<void> }
 export interface PluginFileItem { pluginId: string; label: string; run: (file: { depotFile?: string; [k: string]: unknown }) => void | Promise<void> }
 export interface PluginView { pluginId: string; id: string; title: string; render: (container: HTMLElement) => void | (() => void) }
 export interface PluginSubmitHook { pluginId: string; run: (files: { depotFile?: string }[]) => SubmitVerdict | Promise<SubmitVerdict> }
 export type SubmitVerdict = { ok: boolean; message?: string };
 interface Registry { menu: PluginMenuItem[]; fileItems: PluginFileItem[]; views: PluginView[]; submitHooks: PluginSubmitHook[] }
 const registry: Registry = { menu: [], fileItems: [], views: [], submitHooks: [] };
 let version = 0;
 const listeners = new Set<() => void>();
 function bump() { version++; listeners.forEach((l) => l()); }
 export function getRegistry(): Registry { return registry; }
 export function registryVersion(): number { return version; }
 export function subscribeRegistry(cb: () => void): () => void { listeners.add(cb); return () => { listeners.delete(cb); }; }
 function clearRegistry() { registry.menu = []; registry.fileItems = []; registry.views = []; registry.submitHooks = []; }
 // Unreal Engine bridge — the core keeps the build machinery + overlay + log
 // reader; the plugin only drives them. Gated by the "ue" permission.
 export interface UeBridge {
  hasProject: () => boolean;
  uproject: () => string;
  build: () => void;
  readLog: (tailBytes?: number) => Promise<string>;
 }
 // ---- host context (provided by the app) -------------------------------------
 export interface HostContext {
  flash: (text: string, err?: boolean) => void;
  notify: (title: string, body: string) => void;
  info: () => { userName?: string; clientName?: string; clientRoot?: string } | null;
  selectedFile: () => { depotFile?: string } | null;
  refresh: () => void;
  ue?: UeBridge;
 }
 // ---- the Host SDK a plugin receives -----------------------------------------
 export interface HostApi {
  version: string;
  plugin: { id: string; name: string; dir: string };
  perms: string[];
  has: (perm: string) => boolean;
  p4: Record<string, (...a: unknown[]) => Promise<unknown>>;
  ui: {
    addMenuItem: (label: string, run: () => void | Promise<void>) => void;
    addFileContextItem: (label: string, run: (file: { depotFile?: string }) => void | Promise<void>) => void;
    addView: (view: { id: string; title: string; render: (el: HTMLElement, host: HostApi) => void | (() => void) }) => void;
    addSubmitHook: (run: (files: { depotFile?: string }[]) => SubmitVerdict | Promise<SubmitVerdict>) => void;
  };
  flash: (text: string, err?: boolean) => void;
  notify: (title: string, body: string) => void;
  clipboard: { write: (text: string) => Promise<void> };
  storage: { get: (k: string) => string | null; set: (k: string, v: string) => void; remove: (k: string) => void };
  info: () => ReturnType<HostContext["info"]>;
  selectedFile: () => { depotFile?: string } | null;
  refresh: () => void;
  ue?: UeBridge; // present only with the "ue" permission
  theme: () => Record<string, string>;
  t: typeof t;
  log: (...a: unknown[]) => void;
 }
 const HOST_VERSION = "1.0";
 // p4 methods a plugin may call, split by permission. Only whitelisted, existing methods.
 const P4_READ = ["opened", "dirs", "describe", "changeSizes", "clientSpec"] as const;
 const P4_WRITE = ["add", "edit", "del", "sync", "reconcile"] as const;
 function makeHost(info: PluginInfo, ctx: HostContext): HostApi {
  const perms = Array.isArray(info.permissions) ? info.permissions : [];
  const has = (p: string) => perms.includes(p);
  const p4host: Record<string, (...a: unknown[]) => Promise<unknown>> = {};
  const anyP4 = p4 as unknown as Record<string, (...a: unknown[]) => Promise<unknown>>;
  if (has("p4:read")) for (const m of P4_READ) if (typeof anyP4[m] === "function") p4host[m] = (...a) => anyP4[m]!(...a);
  if (has("p4:write")) for (const m of P4_WRITE) if (typeof anyP4[m] === "function") p4host[m] = (...a) => anyP4[m]!(...a);
  const ns = `exd-plugin:${info.id}:`;
  const host: HostApi = {
    version: HOST_VERSION,
    plugin: { id: info.id, name: info.name, dir: info.dir },
    perms,
    has,
    p4: p4host,
    ui: {
      addMenuItem: (label, run) => { registry.menu.push({ pluginId: info.id, label, run }); bump(); },
      addFileContextItem: (label, run) => { registry.fileItems.push({ pluginId: info.id, label, run }); bump(); },
      addView: (view) => { registry.views.push({ pluginId: info.id, id: view.id, title: view.title, render: (el) => view.render(el, host) }); bump(); },
      addSubmitHook: (run) => { registry.submitHooks.push({ pluginId: info.id, run }); bump(); },
    },
    flash: ctx.flash,
    notify: has("notify") ? ctx.notify : () => {},
    clipboard: { write: (text) => navigator.clipboard.writeText(text) },
    storage: {
      get: (k) => { try { return localStorage.getItem(ns + k); } catch { return null; } },
      set: (k, v) => { try { localStorage.setItem(ns + k, v); } catch {} },
      remove: (k) => { try { localStorage.removeItem(ns + k); } catch {} },
    },
    info: ctx.info,
    selectedFile: ctx.selectedFile,
    refresh: ctx.refresh,
    theme: () => resolveTheme(loadActiveId()).vars,
    t,
    log: (...a) => console.log(`[plugin:${info.id}]`, ...a),
  };
  if (has("ue") && ctx.ue) host.ue = ctx.ue; // Unreal bridge, permission-gated
  return host;
 }
 // import a plugin's source as an ES module from a blob: URL, then activate it
 async function loadOne(info: PluginInfo, ctx: HostContext): Promise<void> {
  const code = await p4.pluginReadEntry(info.id);
  const blob = new Blob([code], { type: "text/javascript" });
  const url = URL.createObjectURL(blob);
  try {
    const mod = await import(/* @vite-ignore */ url);
    const activate = mod.activate || mod.default;
    if (typeof activate !== "function") throw new Error("plugin has no activate(host) export");
    await activate(makeHost(info, ctx));
  } finally {
    URL.revokeObjectURL(url);
  }
 }
 /** (Re)load all enabled plugins. Clears the registry first so this is idempotent. */
 export async function loadPlugins(ctx: HostContext): Promise<{ loaded: number; errors: string[] }> {
  clearRegistry();
  const errors: string[] = [];
  let loaded = 0;
  let list: PluginInfo[] = [];
  try { list = await p4.pluginList(); } catch (e) { return { loaded: 0, errors: [String(e)] }; }
  for (const info of list) {
    if (!info.enabled) continue;
    try { await loadOne(info, ctx); loaded++; }
    catch (e) { errors.push(`${info.name || info.id}: ${String(e)}`); }
  }
  bump();
  return { loaded, errors };
 }
 /** Run all plugin submit hooks; returns the first blocking verdict, or ok. */
 export async function runSubmitHooks(files: { depotFile?: string }[]): Promise<SubmitVerdict> {
  for (const h of registry.submitHooks) {
    try { const v = await h.run(files); if (v && !v.ok) return v; }
    catch { /* a broken hook must not block submit */ }
  }
  return { ok: true };
 }
 // ---- official plugin registry (hosted on Gitea) -----------------------------
 // The client fetches registry.json over HTTPS (frontend fetch — no Rust HTTP dep),
 // then hands each file to the backend to write into the plugins folder.
 export const REGISTRY_URL = "https://gitea.exbytestudios.com/ExbytePublicServices/exbyte-depot-plugins/raw/branch/main/registry.json";
 export interface RegistryEntry {
  id: string; name: string; version: string; author?: string; description?: string;
  permissions?: string[]; minAppVersion?: string; official?: boolean; autoInstall?: boolean;
  files: string[]; baseUrl: string;
 }
 export async function fetchRegistry(): Promise<RegistryEntry[]> {
  const r = await fetch(REGISTRY_URL, { cache: "no-store" });
  if (!r.ok) throw new Error(`registry HTTP ${r.status}`);
  const j = await r.json();
  return Array.isArray(j.plugins) ? (j.plugins as RegistryEntry[]).filter((p) => p && p.id && Array.isArray(p.files)) : [];
 }
 /** Download a registry plugin's files over HTTPS and write them into the plugins folder. */
 export async function installFromRegistry(entry: RegistryEntry): Promise<void> {
  for (const f of entry.files) {
    const res = await fetch(entry.baseUrl + f, { cache: "no-store" });
    if (!res.ok) throw new Error(`${f}: HTTP ${res.status}`);
    await p4.pluginWriteFile(entry.id, f, await res.text());
  }
 }
 /** Install any official plugins marked autoInstall that aren't installed yet. Silent on network failure. */
 export async function autoInstallOfficial(installedIds: Set<string>): Promise<string[]> {
  let reg: RegistryEntry[] = [];
  try { reg = await fetchRegistry(); } catch { return []; }
  const done: string[] = [];
  for (const e of reg) {
    if (e.autoInstall && !installedIds.has(e.id)) {
      try { await installFromRegistry(e); done.push(e.id); } catch { /* offline / transient — try next launch */ }
    }
  }
  return done;
 }
--- a/src/themes.ts
+++ b/src/themes.ts
@ -0,0 +1,133 @@
 // Theme system — built-in + user-made custom themes.
 //
 // A theme = a base (dark/light) plus an overlay of CSS-variable values applied as
 // inline styles on <body>, which win over the :root / body.light stylesheet vars.
 // Everything is CSS-variable driven, so a theme just changes token values.
 export type ThemeBase = "dark" | "light";
 export interface Theme {
  id: string;
  name: string;
  base: ThemeBase;
  builtin?: boolean;
  vars: Record<string, string>; // e.g. { "--accent": "#7c6ef6" }
 }
 // The tokens a user can edit. Grouped for the editor UI. Every one is a color.
 export const THEME_TOKENS: { var: string; label: string; group: string }[] = [
  { var: "--accent", label: "Accent", group: "Brand" },
  { var: "--accent-2", label: "Accent light", group: "Brand" },
  { var: "--accent-deep", label: "Accent deep", group: "Brand" },
  { var: "--bg", label: "Background", group: "Surfaces" },
  { var: "--panel", label: "Panel", group: "Surfaces" },
  { var: "--panel-2", label: "Panel 2", group: "Surfaces" },
  { var: "--panel-3", label: "Panel 3", group: "Surfaces" },
  { var: "--elevated", label: "Elevated", group: "Surfaces" },
  { var: "--border", label: "Border", group: "Surfaces" },
  { var: "--txt", label: "Text", group: "Text" },
  { var: "--muted", label: "Muted text", group: "Text" },
  { var: "--faint", label: "Faint text", group: "Text" },
  { var: "--add", label: "Add / success", group: "Status" },
  { var: "--edit", label: "Edit / warning", group: "Status" },
  { var: "--del", label: "Delete / danger", group: "Status" },
 ];
 export const TOKEN_VARS = THEME_TOKENS.map((t) => t.var);
 // Built-in presets. "dark"/"light" carry no overlay (pure stylesheet base); the
 // rest recolor a few tokens on top of a base to give a distinct look.
 export const BUILTIN_THEMES: Theme[] = [
  { id: "dark", name: "Midnight (default)", base: "dark", builtin: true, vars: {} },
  { id: "light", name: "Daylight", base: "light", builtin: true, vars: {} },
  { id: "ember", name: "Ember", base: "dark", builtin: true, vars: { "--accent": "#f0883e", "--accent-2": "#f7a75f", "--accent-deep": "#c96a22", "--bg": "#0f0b07", "--panel": "#1a130c", "--panel-2": "#20180f", "--panel-3": "#281d12" } },
  { id: "forest", name: "Forest", base: "dark", builtin: true, vars: { "--accent": "#35c88a", "--accent-2": "#5fe0a5", "--accent-deep": "#22a06e", "--bg": "#07100b", "--panel": "#0e1a13", "--panel-2": "#12211a", "--panel-3": "#182a20" } },
  { id: "ocean", name: "Ocean", base: "dark", builtin: true, vars: { "--accent": "#3aa0ff", "--accent-2": "#6cbaff", "--accent-deep": "#1f7ce0", "--bg": "#060b12", "--panel": "#0c141f", "--panel-2": "#101a28", "--panel-3": "#152234" } },
  { id: "rose", name: "Rosé (light)", base: "light", builtin: true, vars: { "--accent": "#e0426a", "--accent-2": "#f06489", "--accent-deep": "#c02b52", "--bg": "#faf3f5" } },
 ];
 const CUSTOM_KEY = "exd-themes-custom";
 const ACTIVE_KEY = "exd-theme-id";
 const LEGACY_KEY = "exd-theme"; // old "light"/"dark" flag
 export function loadCustomThemes(): Theme[] {
  try {
    const raw = localStorage.getItem(CUSTOM_KEY);
    if (!raw) return [];
    const arr = JSON.parse(raw);
    return Array.isArray(arr) ? (arr as Theme[]).filter((t) => t && t.id && t.vars) : [];
  } catch { return []; }
 }
 export function saveCustomThemes(list: Theme[]) {
  try { localStorage.setItem(CUSTOM_KEY, JSON.stringify(list)); } catch {}
 }
 export function allThemes(): Theme[] {
  return [...BUILTIN_THEMES, ...loadCustomThemes()];
 }
 export function loadActiveId(): string {
  try {
    const id = localStorage.getItem(ACTIVE_KEY);
    if (id) return id;
    // migrate from the old dark/light flag
    return localStorage.getItem(LEGACY_KEY) === "light" ? "light" : "dark";
  } catch { return "dark"; }
 }
 export function saveActiveId(id: string) {
  try {
    localStorage.setItem(ACTIVE_KEY, id);
    const th = allThemes().find((t) => t.id === id);
    localStorage.setItem(LEGACY_KEY, th?.base === "light" ? "light" : "dark"); // keep legacy in sync
  } catch {}
 }
 export function resolveTheme(id: string): Theme {
  return allThemes().find((t) => t.id === id) || BUILTIN_THEMES[0]!;
 }
 // Apply a theme to the document: set the base class, then overlay its var values
 // (clearing any previous overlay first).
 export function applyTheme(theme: Theme) {
  const body = document.body;
  for (const v of TOKEN_VARS) body.style.removeProperty(v);
  body.classList.toggle("light", theme.base === "light");
  for (const [k, val] of Object.entries(theme.vars)) {
    if (val) body.style.setProperty(k, val);
  }
 }
 // Read the effective value of a token right now (for seeding the editor). Falls
 // back to the theme's overlay or the computed stylesheet value.
 export function tokenValue(theme: Theme, varName: string): string {
  if (theme.vars[varName]) return theme.vars[varName]!;
  const el = document.createElement("div");
  el.style.color = `var(${varName})`;
  // temporarily set base so computed value reflects the right stylesheet
  const hadLight = document.body.classList.contains("light");
  document.body.classList.toggle("light", theme.base === "light");
  document.body.appendChild(el);
  const rgb = getComputedStyle(el).color;
  el.remove();
  document.body.classList.toggle("light", hadLight);
  return rgbToHex(rgb) || "#7c6ef6";
 }
 function rgbToHex(rgb: string): string | null {
  const m = rgb.match(/rgba?\(([^)]+)\)/);
  if (!m || !m[1]) return null;
  const parts = m[1].split(",").map((x) => parseInt(x.trim(), 10));
  const [r, g, b] = parts;
  if (r == null || g == null || b == null) return null;
  const h = (n: number) => n.toString(16).padStart(2, "0");
  return `#${h(r)}${h(g)}${h(b)}`;
 }
 export function newCustomId(): string {
  // no Date.now/Math.random dependency worries in the app runtime; keep it simple
  return "custom-" + Math.random().toString(36).slice(2, 9);
 }
 export function exportTheme(theme: Theme): string {
  return JSON.stringify({ name: theme.name, base: theme.base, vars: theme.vars }, null, 2);
 }
 export function importTheme(json: string): Theme {
  const o = JSON.parse(json);
  if (!o || typeof o !== "object" || !o.vars) throw new Error("Invalid theme file");
  return { id: newCustomId(), name: String(o.name || "Imported theme"), base: o.base === "light" ? "light" : "dark", vars: o.vars };
 }