diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 216cbe71..170f1c21 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -112,6 +112,7 @@ jobs:
           SIG="$(ls "$BUNDLE"/macos/*.app.tar.gz.sig)"
 
           # Pull tauri's generated latest.json from the private release.
+          # threatcrush-disable-next-line secret-generic-credential
           GH_TOKEN="$GITHUB_TOKEN" gh release download "$TAG" \
             --repo "$GITHUB_REPOSITORY" --pattern latest.json --dir . --clobber
 
@@ -127,9 +128,14 @@ jobs:
           '
 
           # Create the public release (once) and upload all four assets.
+          # GH_TOKEN is assigned from an env var, not a literal — the three
+          # lines below are scanner false positives, not embedded tokens.
+          # threatcrush-disable-next-line secret-generic-credential
           if ! GH_TOKEN="$RELEASES_TOKEN" gh release view "$TAG" --repo "$PUBLIC_REPO" >/dev/null 2>&1; then
+            # threatcrush-disable-next-line secret-generic-credential
             GH_TOKEN="$RELEASES_TOKEN" gh release create "$TAG" --repo "$PUBLIC_REPO" \
               --title "MyDevTools $TAG" --notes "MyDevTools desktop $TAG"
           fi
+          # threatcrush-disable-next-line secret-generic-credential
           GH_TOKEN="$RELEASES_TOKEN" gh release upload "$TAG" --repo "$PUBLIC_REPO" \
             --clobber "$DMG" "$TARGZ" "$SIG" latest.json
diff --git a/.threatcrushignore b/.threatcrushignore
new file mode 100644
index 00000000..06458bee
--- /dev/null
+++ b/.threatcrushignore
@@ -0,0 +1,37 @@
+# Paths ThreatCrush should not scan. Everything listed here is sample data,
+# UI copy, or generated output — never a credential this repo actually holds.
+# Real code stays scanned: for a one-off false positive in source, put a
+# `threatcrush-disable-next-line <rule-id>` comment above the line instead of
+# excluding the whole file.
+
+# Locale catalogues (27 locales x 2 apps). These are the UI strings for the
+# SSH-key, JWT, S3 and database tools: example PEM markers, sample connection
+# strings and placeholder keys shown to the user. 41 findings, all copy.
+apps/*/messages
+
+# Blog posts: long-form tutorial prose with illustrative credentials in code
+# fences ("mongodb://admin:secret@localhost", a demo master key).
+apps/*/src/lib/blog/posts.ts
+
+# Audit lab scripts: fake tokens injected into a throwaway browser session to
+# measure egress. Nothing here authenticates against anything.
+scripts/audit
+
+# Generated / local-only trees. Not in a CI checkout, noisy in a local run.
+.claude/worktrees
+.open-next
+
+# Test suites: fixture credentials ("hunter2000", a PEM header over the string
+# "abc") that exist to exercise parsers and redaction. Keep real secrets out of
+# fixtures — nothing scans them any more.
+**/__tests__
+
+# Upstream false positive: `manifest-typosquat` reads the `color` dependency
+# (30M downloads/week, imported in 6 files here) as a one-edit lookalike of
+# `colors`, because ThreatCrush's POPULAR_NPM list has `colors` but not
+# `color`. The rule has no per-rule suppression and JSON takes no comments, so
+# the whole manifest goes. Cost: this file loses the install/postinstall
+# lifecycle-script check too — it has no such scripts today, and every other
+# package.json in the repo is still scanned. Drop this line once `color` is
+# allowlisted upstream.
+apps/desktop-ui/package.json
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 00000000..43ba354b
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,15 @@
+# Changelog
+
+## 0.1.14
+
+### Fixed
+
+- **Markdown Preview & HTML**: exporting HTML now confirms with a "Saved <name>" toast instead of failing silently, so you can tell the download actually happened.
+
+### Added
+
+- **Markdown Preview & HTML**: name your export before downloading — a file name field next to the export button, with path separators and illegal characters stripped automatically (falls back to `export.html`).
+
+### Internal
+
+- CI: ThreatCrush security scan runs on every pull request, with results uploaded as SARIF to GitHub code scanning.
diff --git a/apps/desktop-ui/messages/af.json b/apps/desktop-ui/messages/af.json
index 1223018e..e6c20315 100644
--- a/apps/desktop-ui/messages/af.json
+++ b/apps/desktop-ui/messages/af.json
@@ -195,6 +195,8 @@
       "title": "Voorkoms",
       "description": "Pas aan hoe die toepassing op jou toestel lyk.",
       "themePreference": "Temavoorkeur",
+      "accentColor": "Aksentkleur",
+      "customColor": "Pasgemaakte kleur",
       "themes": {
         "light": "Lig",
         "dark": "Donker",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "Oor",
+      "running": "Tans op MyDevTools",
+      "runningVersion": "Tans op MyDevTools v{version}",
+      "checkButton": "Kyk vir opdaterings",
+      "checking": "Kyk…",
+      "dialogTitle": "Opdaterings",
+      "dialogDescription": "MyDevTools dateer homself ter plaatse op — geen herinstallasie nie, en jou aflyn data word nooit geraak nie.",
+      "onVersion": "Jy is op weergawe {version}.",
+      "available": "Weergawe {version} is beskikbaar.",
+      "install": "Laai af en installeer",
+      "upToDate": "Jy is op datum.",
+      "checkError": "Kon nie vir opdaterings kyk nie. Is jy aanlyn?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "Alles",
       "total": "Totaal",
       "allProjects": "Alle projekte",
+      "projectsHeading": "Projekte",
       "export": "Uitvoer",
       "kanban": "Kanban",
       "list": "Lys",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "Tik die +-knoppie om jou eerste wagwoord by te voeg",
       "emptyHintDesktop": "Jy het nog geen wagwoorde gestoor nie. Klik die \"Voeg wagwoord by\"-knoppie hierbo om te begin.",
       "addPassword": "Voeg wagwoord by",
+      "title": "Wagwoorde",
+      "filters": {
+        "heading": "Kluisgesondheid",
+        "all": "Alle wagwoorde",
+        "weak": "Swak",
+        "reused": "Hergebruik",
+        "noUrl": "Geen URL",
+        "tagsHeading": "Etikette",
+        "allTags": "Alle etikette"
+      },
       "searchPlaceholderMobile": "Soek in jou kluis...",
       "searchPlaceholderDesktop": "Soek kluis...",
       "importExport": "Invoer / uitvoer",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Skep 'n stel vir elke projek en omgewing (bv. produksie API-sleutels). Alles word in jou blaaier geënkripteer voor oplaai.",
       "searchPlaceholder": "Soek projek, omgewing, etikette, notas…",
       "tagFilterPlaceholder": "Filter volgens etiket",
+      "allProjects": "Alle projekte",
+      "projectsHeading": "Projekte",
       "variableCount": "{count, plural, one {# veranderlike} other {# veranderlikes}}",
       "updatedAgo": "Bygewerk {time}",
       "copyDotEnv": "Kopieer .env",
@@ -3870,6 +3899,9 @@
     "copyHtml": "Kopieer HTML",
     "copyMarkdown": "Kopieer Markdown",
     "exportHtml": "Voer HTML uit",
+    "fileNameLabel": "Lêernaam",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "{name} gestoor",
     "copied": "Gekopieer",
     "charCount": "{count, plural, one {# karakter} other {# karakters}}",
     "emptyHint": "Begin Markdown tik om die lewendige voorskou en HTML-uitvoer te sien.",
@@ -5106,6 +5138,10 @@
   "ToolPageHeader": {
     "offline": "100% aflyn"
   },
+  "ToolSidebar": {
+    "show": "Wys sybalk",
+    "hide": "Versteek sybalk"
+  },
   "DesktopUpdate": {
     "title": "MyDevTools word bygewerk",
     "downloading": "Opdatering word afgelaai…",
diff --git a/apps/desktop-ui/messages/ar.json b/apps/desktop-ui/messages/ar.json
index 38d21da9..76a81df8 100644
--- a/apps/desktop-ui/messages/ar.json
+++ b/apps/desktop-ui/messages/ar.json
@@ -195,6 +195,8 @@
       "title": "المظهر",
       "description": "خصّص مظهر التطبيق على جهازك.",
       "themePreference": "تفضيل السمة",
+      "accentColor": "لون التمييز",
+      "customColor": "لون مخصص",
       "themes": {
         "light": "فاتح",
         "dark": "داكن",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "حول",
+      "running": "تشغيل MyDevTools",
+      "runningVersion": "تشغيل MyDevTools الإصدار {version}",
+      "checkButton": "التحقق من التحديثات",
+      "checking": "جارٍ التحقق…",
+      "dialogTitle": "التحديثات",
+      "dialogDescription": "يقوم MyDevTools بتحديث نفسه في مكانه — بدون إعادة تثبيت، ولا يتم المساس ببياناتك دون اتصال أبدًا.",
+      "onVersion": "أنت تستخدم الإصدار {version}.",
+      "available": "الإصدار {version} متوفر.",
+      "install": "التنزيل والتثبيت",
+      "upToDate": "أنت على أحدث إصدار.",
+      "checkError": "تعذّر التحقق من التحديثات. هل أنت متصل بالإنترنت؟"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "الكل",
       "total": "الإجمالي",
       "allProjects": "كل المشاريع",
+      "projectsHeading": "المشاريع",
       "export": "تصدير",
       "kanban": "كانبان",
       "list": "قائمة",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "اضغط زر + لإضافة أول كلمة مرور",
       "emptyHintDesktop": "لم تخزّن كلمات مرور بعد. انقر \"إضافة كلمة مرور\" أعلاه للبدء.",
       "addPassword": "إضافة كلمة مرور",
+      "title": "كلمات المرور",
+      "filters": {
+        "heading": "سلامة الخزنة",
+        "all": "كل كلمات المرور",
+        "weak": "ضعيفة",
+        "reused": "مُعاد استخدامها",
+        "noUrl": "بدون رابط",
+        "tagsHeading": "الوسوم",
+        "allTags": "كل الوسوم"
+      },
       "searchPlaceholderMobile": "ابحث في خزنتك...",
       "searchPlaceholderDesktop": "ابحث في الخزنة...",
       "importExport": "استيراد / تصدير",
@@ -1161,6 +1188,8 @@
       "emptyHint": "أنشئ مجموعة لكل مشروع وبيئة (مثل مفاتيح واجهة الإنتاج). يُشفّر كل شيء في متصفحك قبل الرفع.",
       "searchPlaceholder": "ابحث في المشروع والبيئة والوسوم والملاحظات…",
       "tagFilterPlaceholder": "تصفية حسب الوسم",
+      "allProjects": "كل المشاريع",
+      "projectsHeading": "المشاريع",
       "variableCount": "{count, plural, one {# متغير} other {# متغيرات}}",
       "updatedAgo": "عُدّل {time}",
       "copyDotEnv": "نسخ .env",
@@ -3859,6 +3888,9 @@
     "copyHtml": "نسخ HTML",
     "copyMarkdown": "نسخ Markdown",
     "exportHtml": "تصدير HTML",
+    "fileNameLabel": "اسم الملف",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "تم حفظ {name}",
     "copied": "تم النسخ",
     "charCount": "{count, plural, one {# حرف} other {# أحرف}}",
     "emptyHint": "ابدأ بكتابة Markdown لرؤية المعاينة المباشرة وإخراج HTML.",
@@ -5095,6 +5127,10 @@
   "ToolPageHeader": {
     "offline": "100% دون اتصال"
   },
+  "ToolSidebar": {
+    "show": "إظهار الشريط الجانبي",
+    "hide": "إخفاء الشريط الجانبي"
+  },
   "DesktopUpdate": {
     "title": "جارٍ تحديث MyDevTools",
     "downloading": "جارٍ تنزيل التحديث…",
diff --git a/apps/desktop-ui/messages/ca.json b/apps/desktop-ui/messages/ca.json
index 44bedc74..3e866c3b 100644
--- a/apps/desktop-ui/messages/ca.json
+++ b/apps/desktop-ui/messages/ca.json
@@ -195,6 +195,8 @@
       "title": "Aparença",
       "description": "Personalitza com es veu l'aplicació al teu dispositiu.",
       "themePreference": "Preferència de tema",
+      "accentColor": "Color d'accent",
+      "customColor": "Color personalitzat",
       "themes": {
         "light": "Clar",
         "dark": "Fosc",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "Quant a",
+      "running": "S'està executant MyDevTools",
+      "runningVersion": "S'està executant MyDevTools v{version}",
+      "checkButton": "Comprova si hi ha actualitzacions",
+      "checking": "S'està comprovant…",
+      "dialogTitle": "Actualitzacions",
+      "dialogDescription": "MyDevTools s’actualitza sobre si mateix — sense reinstal·lar res, i les teves dades fora de línia no es toquen mai.",
+      "onVersion": "Tens la versió {version}.",
+      "available": "La versió {version} està disponible.",
+      "install": "Baixa i instal·la",
+      "upToDate": "Estàs al dia.",
+      "checkError": "No s'han pogut comprovar les actualitzacions. Estàs connectat?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "Totes",
       "total": "Total",
       "allProjects": "Tots els projectes",
+      "projectsHeading": "Projectes",
       "export": "Exporta",
       "kanban": "Kanban",
       "list": "Llista",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "Toca el botó + per afegir la primera contrasenya",
       "emptyHintDesktop": "Encara no has desat cap contrasenya. Fes clic a «Afegeix contrasenya» a dalt per començar.",
       "addPassword": "Afegeix contrasenya",
+      "title": "Contrasenyes",
+      "filters": {
+        "heading": "Salut de la caixa forta",
+        "all": "Totes les contrasenyes",
+        "weak": "Febles",
+        "reused": "Reutilitzades",
+        "noUrl": "Sense URL",
+        "tagsHeading": "Etiquetes",
+        "allTags": "Totes les etiquetes"
+      },
       "searchPlaceholderMobile": "Cerca al coffre...",
       "searchPlaceholderDesktop": "Cerca al coffre...",
       "importExport": "Importa / exporta",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Crea un conjunt per a cada projecte i entorn (p. ex. claus d'API de producció). Tot es xifra al navegador abans de pujar-lo.",
       "searchPlaceholder": "Cerca projecte, entorn, etiquetes, notes…",
       "tagFilterPlaceholder": "Filtra per etiqueta",
+      "allProjects": "Tots els projectes",
+      "projectsHeading": "Projectes",
       "variableCount": "{count, plural, one {# variable} other {# variables}}",
       "updatedAgo": "Actualitzat {time}",
       "copyDotEnv": "Copia .env",
@@ -3859,6 +3888,9 @@
     "copyHtml": "Copia HTML",
     "copyMarkdown": "Copia Markdown",
     "exportHtml": "Exporta HTML",
+    "fileNameLabel": "Nom del fitxer",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "S'ha desat {name}",
     "copied": "Copiat",
     "charCount": "{count, plural, one {# caràcter} other {# caràcters}}",
     "emptyHint": "Comenceu a escriure Markdown per veure la previsualització i la sortida HTML.",
@@ -5095,6 +5127,10 @@
   "ToolPageHeader": {
     "offline": "100% fora de línia"
   },
+  "ToolSidebar": {
+    "show": "Mostra la barra lateral",
+    "hide": "Amaga la barra lateral"
+  },
   "DesktopUpdate": {
     "title": "S'està actualitzant MyDevTools",
     "downloading": "Baixant l'actualització…",
diff --git a/apps/desktop-ui/messages/cs.json b/apps/desktop-ui/messages/cs.json
index 28dc5e22..36728d21 100644
--- a/apps/desktop-ui/messages/cs.json
+++ b/apps/desktop-ui/messages/cs.json
@@ -195,6 +195,8 @@
       "title": "Vzhled",
       "description": "Přizpůsobte vzhled aplikace na vašem zařízení.",
       "themePreference": "Motiv",
+      "accentColor": "Barva zvýraznění",
+      "customColor": "Vlastní barva",
       "themes": {
         "light": "Světlý",
         "dark": "Tmavý",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "O aplikaci",
+      "running": "Běží MyDevTools",
+      "runningVersion": "Běží MyDevTools v{version}",
+      "checkButton": "Zkontrolovat aktualizace",
+      "checking": "Kontrola…",
+      "dialogTitle": "Aktualizace",
+      "dialogDescription": "MyDevTools se aktualizuje na místě — žádná reinstalace a vašich offline dat se to nikdy nedotkne.",
+      "onVersion": "Máte verzi {version}.",
+      "available": "Verze {version} je dostupná.",
+      "install": "Stáhnout a nainstalovat",
+      "upToDate": "Máte nejnovější verzi.",
+      "checkError": "Aktualizace se nepodařilo zkontrolovat. Jste online?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "Vše",
       "total": "Celkem",
       "allProjects": "Všechny projekty",
+      "projectsHeading": "Projekty",
       "export": "Export",
       "kanban": "Kanban",
       "list": "Seznam",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "Klepněte na + a přidejte první heslo",
       "emptyHintDesktop": "Zatím nemáte uložená žádná hesla. Začněte tlačítkem „Přidat heslo“ výše.",
       "addPassword": "Přidat heslo",
+      "title": "Hesla",
+      "filters": {
+        "heading": "Stav trezoru",
+        "all": "Všechna hesla",
+        "weak": "Slabá",
+        "reused": "Opakovaná",
+        "noUrl": "Bez URL",
+        "tagsHeading": "Štítky",
+        "allTags": "Všechny štítky"
+      },
       "searchPlaceholderMobile": "Hledat v trezoru...",
       "searchPlaceholderDesktop": "Hledat v trezoru...",
       "importExport": "Import / export",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Vytvořte sadu pro každý projekt a prostředí (např. produkční API klíče). Vše se před nahráním šifruje v prohlížeči.",
       "searchPlaceholder": "Hledat projekt, prostředí, značky, poznámky…",
       "tagFilterPlaceholder": "Filtrovat podle značky",
+      "allProjects": "Všechny projekty",
+      "projectsHeading": "Projekty",
       "variableCount": "{count, plural, one {# proměnná} few {# proměnné} other {# proměnných}}",
       "updatedAgo": "Aktualizováno {time}",
       "copyDotEnv": "Kopírovat .env",
@@ -3859,6 +3888,9 @@
     "copyHtml": "Kopírovat HTML",
     "copyMarkdown": "Kopírovat Markdown",
     "exportHtml": "Exportovat HTML",
+    "fileNameLabel": "Název souboru",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "Uloženo {name}",
     "copied": "Zkopírováno",
     "charCount": "{count, plural, one {# znak} few {# znaky} other {# znaků}}",
     "emptyHint": "Začněte psát Markdown pro zobrazení živého náhledu a HTML výstupu.",
@@ -5095,6 +5127,10 @@
   "ToolPageHeader": {
     "offline": "100% offline"
   },
+  "ToolSidebar": {
+    "show": "Zobrazit postranní panel",
+    "hide": "Skrýt postranní panel"
+  },
   "DesktopUpdate": {
     "title": "Aktualizace MyDevTools",
     "downloading": "Stahování aktualizace…",
diff --git a/apps/desktop-ui/messages/da.json b/apps/desktop-ui/messages/da.json
index 5e24bb60..d2dfc0ed 100644
--- a/apps/desktop-ui/messages/da.json
+++ b/apps/desktop-ui/messages/da.json
@@ -195,6 +195,8 @@
       "title": "Udseende",
       "description": "Tilpas, hvordan applikationen ser ud på din enhed.",
       "themePreference": "Temapræference",
+      "accentColor": "Accentfarve",
+      "customColor": "Tilpasset farve",
       "themes": {
         "light": "Lys",
         "dark": "Mørk",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "Om",
+      "running": "Kører MyDevTools",
+      "runningVersion": "Kører MyDevTools v{version}",
+      "checkButton": "Søg efter opdateringer",
+      "checking": "Søger…",
+      "dialogTitle": "Opdateringer",
+      "dialogDescription": "MyDevTools opdaterer sig selv på stedet — ingen geninstallation, og dine offlinedata bliver aldrig berørt.",
+      "onVersion": "Du bruger version {version}.",
+      "available": "Version {version} er tilgængelig.",
+      "install": "Download og installer",
+      "upToDate": "Du er opdateret.",
+      "checkError": "Kunne ikke søge efter opdateringer. Er du online?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "Alle",
       "total": "Total",
       "allProjects": "Alle projekter",
+      "projectsHeading": "Projekter",
       "export": "Eksportere",
       "kanban": "Kanban",
       "list": "Liste",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "Tryk på knappen + for at tilføje din første adgangskode",
       "emptyHintDesktop": "Du har ikke gemt nogen adgangskoder endnu. Klik på knappen \"Tilføj adgangskode\" ovenfor for at komme i gang.",
       "addPassword": "Tilføj adgangskode",
+      "title": "Adgangskoder",
+      "filters": {
+        "heading": "Boksens tilstand",
+        "all": "Alle adgangskoder",
+        "weak": "Svage",
+        "reused": "Genbrugte",
+        "noUrl": "Ingen URL",
+        "tagsHeading": "Tags",
+        "allTags": "Alle tags"
+      },
       "searchPlaceholderMobile": "Søg i din boks...",
       "searchPlaceholderDesktop": "Søg i boksen...",
       "importExport": "Import/eksport",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Opret et sæt for hvert projekt og miljø (f.eks. produktions-API-nøgler). Alt krypteres i din browser før upload.",
       "searchPlaceholder": "Søg projekt, miljø, tags, noter…",
       "tagFilterPlaceholder": "Filtrér efter tag",
+      "allProjects": "Alle projekter",
+      "projectsHeading": "Projekter",
       "variableCount": "{count, plural, one {# variabel} other {# variabler}}",
       "updatedAgo": "Opdateret {time}",
       "copyDotEnv": "Kopiér .env",
@@ -3859,6 +3888,9 @@
     "copyHtml": "Kopiér HTML",
     "copyMarkdown": "Kopiér Markdown",
     "exportHtml": "Eksportér HTML",
+    "fileNameLabel": "Filnavn",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "Gemte {name}",
     "copied": "Kopieret",
     "charCount": "{count, plural, one {# tegn} other {# tegn}}",
     "emptyHint": "Begynd at skrive Markdown for at se live-forhåndsvisning og HTML-output.",
@@ -5095,6 +5127,10 @@
   "ToolPageHeader": {
     "offline": "100 % offline"
   },
+  "ToolSidebar": {
+    "show": "Vis sidepanel",
+    "hide": "Skjul sidepanel"
+  },
   "DesktopUpdate": {
     "title": "Opdaterer MyDevTools",
     "downloading": "Downloader opdatering…",
diff --git a/apps/desktop-ui/messages/de.json b/apps/desktop-ui/messages/de.json
index b36a0801..27751bff 100644
--- a/apps/desktop-ui/messages/de.json
+++ b/apps/desktop-ui/messages/de.json
@@ -195,6 +195,8 @@
       "title": "Erscheinungsbild",
       "description": "Passen Sie das Aussehen der Anwendung auf Ihrem Gerät an.",
       "themePreference": "Theme",
+      "accentColor": "Akzentfarbe",
+      "customColor": "Eigene Farbe",
       "themes": {
         "light": "Hell",
         "dark": "Dunkel",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "Info",
+      "running": "MyDevTools läuft",
+      "runningVersion": "MyDevTools v{version} läuft",
+      "checkButton": "Nach Updates suchen",
+      "checking": "Suche…",
+      "dialogTitle": "Updates",
+      "dialogDescription": "MyDevTools aktualisiert sich direkt an Ort und Stelle — keine Neuinstallation, und deine Offline-Daten werden nie angetastet.",
+      "onVersion": "Du nutzt Version {version}.",
+      "available": "Version {version} ist verfügbar.",
+      "install": "Herunterladen und installieren",
+      "upToDate": "Du bist auf dem neuesten Stand.",
+      "checkError": "Suche nach Updates fehlgeschlagen. Bist du online?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "Alle",
       "total": "Gesamt",
       "allProjects": "Alle Projekte",
+      "projectsHeading": "Projekte",
       "export": "Exportieren",
       "kanban": "Kanban",
       "list": "Liste",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "Tippen Sie auf +, um Ihr erstes Passwort hinzuzufügen",
       "emptyHintDesktop": "Noch keine Passwörter. Klicken Sie oben auf „Passwort hinzufügen“.",
       "addPassword": "Passwort hinzufügen",
+      "title": "Passwörter",
+      "filters": {
+        "heading": "Tresor-Status",
+        "all": "Alle Passwörter",
+        "weak": "Schwach",
+        "reused": "Mehrfach genutzt",
+        "noUrl": "Ohne URL",
+        "tagsHeading": "Tags",
+        "allTags": "Alle Tags"
+      },
       "searchPlaceholderMobile": "Tresor durchsuchen...",
       "searchPlaceholderDesktop": "Tresor durchsuchen...",
       "importExport": "Import / Export",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Legen Sie ein Set pro Projekt und Umgebung an (z. B. Produktions-API-Schlüssel). Alles wird vor dem Upload im Browser verschlüsselt.",
       "searchPlaceholder": "Projekt, Umgebung, Tags, Notizen durchsuchen…",
       "tagFilterPlaceholder": "Nach Tag filtern",
+      "allProjects": "Alle Projekte",
+      "projectsHeading": "Projekte",
       "variableCount": "{count, plural, one {# Variable} other {# Variablen}}",
       "updatedAgo": "Aktualisiert {time}",
       "copyDotEnv": ".env kopieren",
@@ -3859,6 +3888,9 @@
     "copyHtml": "HTML kopieren",
     "copyMarkdown": "Markdown kopieren",
     "exportHtml": "HTML exportieren",
+    "fileNameLabel": "Dateiname",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "{name} gespeichert",
     "copied": "Kopiert",
     "charCount": "{count, plural, one {# Zeichen} other {# Zeichen}}",
     "emptyHint": "Beginnen Sie mit der Eingabe von Markdown, um die Live-Vorschau und HTML-Ausgabe zu sehen.",
@@ -5095,6 +5127,10 @@
   "ToolPageHeader": {
     "offline": "100 % offline"
   },
+  "ToolSidebar": {
+    "show": "Seitenleiste einblenden",
+    "hide": "Seitenleiste ausblenden"
+  },
   "DesktopUpdate": {
     "title": "MyDevTools wird aktualisiert",
     "downloading": "Update wird heruntergeladen…",
diff --git a/apps/desktop-ui/messages/el.json b/apps/desktop-ui/messages/el.json
index dfbb9a66..462cc3fb 100644
--- a/apps/desktop-ui/messages/el.json
+++ b/apps/desktop-ui/messages/el.json
@@ -195,6 +195,8 @@
       "title": "Εμφάνιση",
       "description": "Προσαρμόστε τον τρόπο εμφάνισης της εφαρμογής στη συσκευή σας.",
       "themePreference": "Προτίμηση θέματος",
+      "accentColor": "Χρώμα τόνου",
+      "customColor": "Προσαρμοσμένο χρώμα",
       "themes": {
         "light": "Φως",
         "dark": "Σκοτάδι",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "Σχετικά",
+      "running": "Εκτελείται το MyDevTools",
+      "runningVersion": "Εκτελείται το MyDevTools v{version}",
+      "checkButton": "Έλεγχος για ενημερώσεις",
+      "checking": "Έλεγχος…",
+      "dialogTitle": "Ενημερώσεις",
+      "dialogDescription": "Το MyDevTools ενημερώνεται επί τόπου — χωρίς επανεγκατάσταση, και τα offline δεδομένα σας δεν αγγίζονται ποτέ.",
+      "onVersion": "Χρησιμοποιείτε την έκδοση {version}.",
+      "available": "Η έκδοση {version} είναι διαθέσιμη.",
+      "install": "Λήψη και εγκατάσταση",
+      "upToDate": "Είστε ενημερωμένοι.",
+      "checkError": "Δεν ήταν δυνατός ο έλεγχος για ενημερώσεις. Είστε συνδεδεμένοι;"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "Ολοι",
       "total": "Σύνολο",
       "allProjects": "Όλα τα Έργα",
+      "projectsHeading": "Έργα",
       "export": "Εξαγωγή",
       "kanban": "Kanban",
       "list": "Λίστα",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "Πατήστε το κουμπί + για να προσθέσετε τον πρώτο σας κωδικό πρόσβασης",
       "emptyHintDesktop": "Δεν έχετε αποθηκεύσει ακόμα κανέναν κωδικό πρόσβασης. Κάντε κλικ στο κουμπί \"Προσθήκη κωδικού πρόσβασης\" παραπάνω για να ξεκινήσετε.",
       "addPassword": "Προσθήκη κωδικού πρόσβασης",
+      "title": "Κωδικοί",
+      "filters": {
+        "heading": "Υγεία θησαυροφυλακίου",
+        "all": "Όλοι οι κωδικοί",
+        "weak": "Αδύναμοι",
+        "reused": "Επαναχρησιμοποιημένοι",
+        "noUrl": "Χωρίς URL",
+        "tagsHeading": "Ετικέτες",
+        "allTags": "Όλες οι ετικέτες"
+      },
       "searchPlaceholderMobile": "Αναζητήστε το θησαυροφυλάκιό σας...",
       "searchPlaceholderDesktop": "Θησαυροφυλάκιο αναζήτησης...",
       "importExport": "Εισαγωγή / εξαγωγή",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Δημιουργήστε ένα σύνολο για κάθε έργο και περιβάλλον (π.χ. κλειδιά API παραγωγής). Όλα κρυπτογραφούνται στο πρόγραμμα περιήγησης πριν την αποστολή.",
       "searchPlaceholder": "Αναζήτηση έργου, περιβάλλοντος, ετικετών, σημειώσεων…",
       "tagFilterPlaceholder": "Φιλτράρισμα κατά ετικέτα",
+      "allProjects": "Όλα τα έργα",
+      "projectsHeading": "Έργα",
       "variableCount": "{count, plural, one {# μεταβλητή} other {# μεταβλητές}}",
       "updatedAgo": "Ενημερώθηκε {time}",
       "copyDotEnv": "Αντιγραφή .env",
@@ -3859,6 +3888,9 @@
     "copyHtml": "Αντιγραφή HTML",
     "copyMarkdown": "Αντιγραφή Markdown",
     "exportHtml": "Εξαγωγή HTML",
+    "fileNameLabel": "Όνομα αρχείου",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "Αποθηκεύτηκε το {name}",
     "copied": "Αντιγράφηκε",
     "charCount": "{count, plural, one {# χαρακτήρας} other {# χαρακτήρες}}",
     "emptyHint": "Ξεκινήστε να πληκτρολογείτε Markdown για να δείτε την προεπισκόπηση και την έξοδο HTML.",
@@ -5095,6 +5127,10 @@
   "ToolPageHeader": {
     "offline": "100% εκτός σύνδεσης"
   },
+  "ToolSidebar": {
+    "show": "Εμφάνιση πλαϊνής μπάρας",
+    "hide": "Απόκρυψη πλαϊνής μπάρας"
+  },
   "DesktopUpdate": {
     "title": "Ενημέρωση MyDevTools",
     "downloading": "Λήψη ενημέρωσης…",
diff --git a/apps/desktop-ui/messages/en.json b/apps/desktop-ui/messages/en.json
index ee10a0be..dbe0c6a6 100644
--- a/apps/desktop-ui/messages/en.json
+++ b/apps/desktop-ui/messages/en.json
@@ -195,6 +195,8 @@
       "title": "Appearance",
       "description": "Customize how the application looks on your device.",
       "themePreference": "Theme Preference",
+      "accentColor": "Accent color",
+      "customColor": "Custom color",
       "themes": {
         "light": "Light",
         "dark": "Dark",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "About",
+      "running": "Running MyDevTools",
+      "runningVersion": "Running MyDevTools v{version}",
+      "checkButton": "Check for updates",
+      "checking": "Checking…",
+      "dialogTitle": "Updates",
+      "dialogDescription": "MyDevTools updates itself in place — no reinstall, and your offline data is never touched.",
+      "onVersion": "You're on version {version}.",
+      "available": "Version {version} is available.",
+      "install": "Download & install",
+      "upToDate": "You're up to date.",
+      "checkError": "Couldn't check for updates. Are you online?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "All",
       "total": "Total",
       "allProjects": "All Projects",
+      "projectsHeading": "Projects",
       "export": "Export",
       "kanban": "Kanban",
       "list": "List",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "Tap the + button to add your first password",
       "emptyHintDesktop": "You have not stored any passwords yet. Click the \"Add password\" button above to get started.",
       "addPassword": "Add password",
+      "title": "Passwords",
+      "filters": {
+        "heading": "Vault health",
+        "all": "All passwords",
+        "weak": "Weak",
+        "reused": "Reused",
+        "noUrl": "No URL",
+        "tagsHeading": "Tags",
+        "allTags": "All tags"
+      },
       "searchPlaceholderMobile": "Search your vault...",
       "searchPlaceholderDesktop": "Search vault...",
       "importExport": "Import / export",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Create a set for each project and environment (e.g. production API keys). Everything is encrypted in your browser before upload.",
       "searchPlaceholder": "Search project, environment, tags, notes...",
       "tagFilterPlaceholder": "Filter by tag",
+      "allProjects": "All projects",
+      "projectsHeading": "Projects",
       "variableCount": "{count, plural, one {# variable} other {# variables}}",
       "updatedAgo": "Updated {time}",
       "copyDotEnv": "Copy .env",
@@ -3898,6 +3927,9 @@
     "copyHtml": "Copy HTML",
     "copyMarkdown": "Copy Markdown",
     "exportHtml": "Export HTML",
+    "fileNameLabel": "File name",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "Saved {name}",
     "copied": "Copied",
     "charCount": "{count, plural, one {# character} other {# characters}}",
     "emptyHint": "Start typing Markdown to see the live preview and HTML output.",
@@ -5116,6 +5148,10 @@
   "ToolPageHeader": {
     "offline": "100% offline"
   },
+  "ToolSidebar": {
+    "show": "Show sidebar",
+    "hide": "Hide sidebar"
+  },
   "DesktopUpdate": {
     "title": "Updating MyDevTools",
     "downloading": "Downloading update…",
diff --git a/apps/desktop-ui/messages/es.json b/apps/desktop-ui/messages/es.json
index 247e3ca5..c0f4b3a7 100644
--- a/apps/desktop-ui/messages/es.json
+++ b/apps/desktop-ui/messages/es.json
@@ -195,6 +195,8 @@
       "title": "Apariencia",
       "description": "Personaliza cómo se ve la aplicación en tu dispositivo.",
       "themePreference": "Preferencia de tema",
+      "accentColor": "Color de acento",
+      "customColor": "Color personalizado",
       "themes": {
         "light": "Claro",
         "dark": "Oscuro",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "Acerca de",
+      "running": "Ejecutando MyDevTools",
+      "runningVersion": "Ejecutando MyDevTools v{version}",
+      "checkButton": "Buscar actualizaciones",
+      "checking": "Buscando…",
+      "dialogTitle": "Actualizaciones",
+      "dialogDescription": "MyDevTools se actualiza en el sitio: sin reinstalar nada y sin tocar nunca tus datos sin conexión.",
+      "onVersion": "Tienes la versión {version}.",
+      "available": "La versión {version} está disponible.",
+      "install": "Descargar e instalar",
+      "upToDate": "Estás al día.",
+      "checkError": "No se pudieron buscar actualizaciones. ¿Estás conectado?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "Todas",
       "total": "Total",
       "allProjects": "Todos los proyectos",
+      "projectsHeading": "Proyectos",
       "export": "Exportar",
       "kanban": "Kanban",
       "list": "Lista",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "Toca el botón + para añadir tu primera contraseña",
       "emptyHintDesktop": "Aún no has guardado contraseñas. Haz clic en \"Añadir contraseña\" arriba para empezar.",
       "addPassword": "Añadir contraseña",
+      "title": "Contraseñas",
+      "filters": {
+        "heading": "Estado de la bóveda",
+        "all": "Todas las contraseñas",
+        "weak": "Débiles",
+        "reused": "Reutilizadas",
+        "noUrl": "Sin URL",
+        "tagsHeading": "Etiquetas",
+        "allTags": "Todas las etiquetas"
+      },
       "searchPlaceholderMobile": "Buscar en tu bóveda...",
       "searchPlaceholderDesktop": "Buscar en la bóveda...",
       "importExport": "Importar / exportar",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Crea un conjunto por proyecto y entorno (p. ej. claves de API de producción). Todo se cifra en tu navegador antes de subirlo.",
       "searchPlaceholder": "Buscar proyecto, entorno, etiquetas, notas…",
       "tagFilterPlaceholder": "Filtrar por etiqueta",
+      "allProjects": "Todos los proyectos",
+      "projectsHeading": "Proyectos",
       "variableCount": "{count, plural, one {# variable} other {# variables}}",
       "updatedAgo": "Actualizado {time}",
       "copyDotEnv": "Copiar .env",
@@ -3870,6 +3899,9 @@
     "copyHtml": "Copiar HTML",
     "copyMarkdown": "Copiar Markdown",
     "exportHtml": "Exportar HTML",
+    "fileNameLabel": "Nombre del archivo",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "Se guardó {name}",
     "copied": "Copiado",
     "charCount": "{count, plural, one {# carácter} other {# caracteres}}",
     "emptyHint": "Empieza a escribir Markdown para ver la vista previa y la salida HTML.",
@@ -5106,6 +5138,10 @@
   "ToolPageHeader": {
     "offline": "100% sin conexión"
   },
+  "ToolSidebar": {
+    "show": "Mostrar barra lateral",
+    "hide": "Ocultar barra lateral"
+  },
   "DesktopUpdate": {
     "title": "Actualizando MyDevTools",
     "downloading": "Descargando actualización…",
diff --git a/apps/desktop-ui/messages/fa.json b/apps/desktop-ui/messages/fa.json
index fd960552..7950ae3c 100644
--- a/apps/desktop-ui/messages/fa.json
+++ b/apps/desktop-ui/messages/fa.json
@@ -195,6 +195,8 @@
       "title": "ظاهر",
       "description": "نحوه ظاهر برنامه را در دستگاه خود سفارشی کنید.",
       "themePreference": "اولویت تم",
+      "accentColor": "رنگ تأکید",
+      "customColor": "رنگ سفارشی",
       "themes": {
         "light": "نور",
         "dark": "تاریک",
@@ -257,6 +259,20 @@
         "uk": "Українська",
         "fa": "فارسی"
       }
+    },
+    "about": {
+      "title": "درباره",
+      "running": "در حال اجرای MyDevTools",
+      "runningVersion": "در حال اجرای MyDevTools نسخه {version}",
+      "checkButton": "بررسی به‌روزرسانی‌ها",
+      "checking": "در حال بررسی…",
+      "dialogTitle": "به‌روزرسانی‌ها",
+      "dialogDescription": "MyDevTools خودش را در همان محل به‌روزرسانی می‌کند — بدون نصب مجدد و داده‌های آفلاین شما هرگز دست‌کاری نمی‌شود.",
+      "onVersion": "شما از نسخه {version} استفاده می‌کنید.",
+      "available": "نسخه {version} در دسترس است.",
+      "install": "دانلود و نصب",
+      "upToDate": "شما به‌روز هستید.",
+      "checkError": "بررسی به‌روزرسانی‌ها ممکن نشد. آیا به اینترنت متصل هستید؟"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "همه",
       "total": "مجموع",
       "allProjects": "همه پروژه ها",
+      "projectsHeading": "پروژه‌ها",
       "export": "صادرات",
       "kanban": "کانبان",
       "list": "فهرست کنید",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "روی دکمه + ضربه بزنید تا اولین رمز عبور خود را اضافه کنید",
       "emptyHintDesktop": "شما هنوز هیچ رمز عبوری را ذخیره نکرده اید. برای شروع روی دکمه «افزودن رمز عبور» در بالا کلیک کنید.",
       "addPassword": "اضافه کردن رمز عبور",
+      "title": "گذرواژه‌ها",
+      "filters": {
+        "heading": "سلامت گاوصندوق",
+        "all": "همه گذرواژه‌ها",
+        "weak": "ضعیف",
+        "reused": "تکراری",
+        "noUrl": "بدون نشانی",
+        "tagsHeading": "برچسب‌ها",
+        "allTags": "همه برچسب‌ها"
+      },
       "searchPlaceholderMobile": "خزانه خود را جستجو کنید ...",
       "searchPlaceholderDesktop": "صندوق جستجو...",
       "importExport": "واردات / صادرات",
@@ -1161,6 +1188,8 @@
       "emptyHint": "برای هر پروژه و محیط یک مجموعه بسازید (مثلاً کلیدهای API تولید). همه قبل از آپلود در مرورگر شما رمزگذاری می‌شوند.",
       "searchPlaceholder": "جستجوی پروژه، محیط، برچسب، یادداشت…",
       "tagFilterPlaceholder": "فیلتر با برچسب",
+      "allProjects": "همه پروژه‌ها",
+      "projectsHeading": "پروژه‌ها",
       "variableCount": "{count, plural, one {# متغیر} other {# متغیر}}",
       "updatedAgo": "به‌روزرسانی {time}",
       "copyDotEnv": "کپی .env",
@@ -3870,6 +3899,9 @@
     "copyHtml": "کپی HTML",
     "copyMarkdown": "کپی Markdown",
     "exportHtml": "خروجی HTML",
+    "fileNameLabel": "نام فایل",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "{name} ذخیره شد",
     "copied": "کپی شد",
     "charCount": "{count, plural, other {# کاراکتر}}",
     "emptyHint": "برای دیدن پیش‌نمایش زنده و خروجی HTML، Markdown تایپ کنید.",
@@ -5106,6 +5138,10 @@
   "ToolPageHeader": {
     "offline": "۱۰۰٪ آفلاین"
   },
+  "ToolSidebar": {
+    "show": "نمایش نوار کناری",
+    "hide": "پنهان کردن نوار کناری"
+  },
   "DesktopUpdate": {
     "title": "در حال به‌روزرسانی MyDevTools",
     "downloading": "در حال دانلود به‌روزرسانی…",
diff --git a/apps/desktop-ui/messages/fr.json b/apps/desktop-ui/messages/fr.json
index dd2b7081..97b9e3a9 100644
--- a/apps/desktop-ui/messages/fr.json
+++ b/apps/desktop-ui/messages/fr.json
@@ -195,6 +195,8 @@
       "title": "Apparence",
       "description": "Personnalisez l’apparence de l’application sur votre appareil.",
       "themePreference": "Thème",
+      "accentColor": "Couleur d'accentuation",
+      "customColor": "Couleur personnalisée",
       "themes": {
         "light": "Clair",
         "dark": "Sombre",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "À propos",
+      "running": "MyDevTools en cours d'exécution",
+      "runningVersion": "MyDevTools v{version} en cours d'exécution",
+      "checkButton": "Rechercher des mises à jour",
+      "checking": "Recherche…",
+      "dialogTitle": "Mises à jour",
+      "dialogDescription": "MyDevTools se met à jour sur place — aucune réinstallation, et vos données hors ligne ne sont jamais touchées.",
+      "onVersion": "Vous utilisez la version {version}.",
+      "available": "La version {version} est disponible.",
+      "install": "Télécharger et installer",
+      "upToDate": "Vous êtes à jour.",
+      "checkError": "Impossible de rechercher des mises à jour. Êtes-vous en ligne ?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "Toutes",
       "total": "Total",
       "allProjects": "Tous les projets",
+      "projectsHeading": "Projets",
       "export": "Exporter",
       "kanban": "Kanban",
       "list": "Liste",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "Appuyez sur + pour ajouter votre premier mot de passe",
       "emptyHintDesktop": "Aucun mot de passe enregistré. Cliquez sur « Ajouter un mot de passe » ci-dessus.",
       "addPassword": "Ajouter un mot de passe",
+      "title": "Mots de passe",
+      "filters": {
+        "heading": "État du coffre",
+        "all": "Tous les mots de passe",
+        "weak": "Faibles",
+        "reused": "Réutilisés",
+        "noUrl": "Sans URL",
+        "tagsHeading": "Étiquettes",
+        "allTags": "Toutes les étiquettes"
+      },
       "searchPlaceholderMobile": "Rechercher dans le coffre…",
       "searchPlaceholderDesktop": "Rechercher…",
       "importExport": "Importer / exporter",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Créez un jeu pour chaque projet et environnement (ex. clés API de production). Tout est chiffré dans votre navigateur avant l'envoi.",
       "searchPlaceholder": "Rechercher projet, environnement, étiquettes, notes…",
       "tagFilterPlaceholder": "Filtrer par étiquette",
+      "allProjects": "Tous les projets",
+      "projectsHeading": "Projets",
       "variableCount": "{count, plural, one {# variable} other {# variables}}",
       "updatedAgo": "Mis à jour {time}",
       "copyDotEnv": "Copier .env",
@@ -3870,6 +3899,9 @@
     "copyHtml": "Copier le HTML",
     "copyMarkdown": "Copier le Markdown",
     "exportHtml": "Exporter le HTML",
+    "fileNameLabel": "Nom du fichier",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "{name} enregistré",
     "copied": "Copié",
     "charCount": "{count, plural, one {# caractère} other {# caractères}}",
     "emptyHint": "Commencez à taper du Markdown pour voir l'aperçu et la sortie HTML.",
@@ -5106,6 +5138,10 @@
   "ToolPageHeader": {
     "offline": "100 % hors ligne"
   },
+  "ToolSidebar": {
+    "show": "Afficher la barre latérale",
+    "hide": "Masquer la barre latérale"
+  },
   "DesktopUpdate": {
     "title": "Mise à jour de MyDevTools",
     "downloading": "Téléchargement de la mise à jour…",
diff --git a/apps/desktop-ui/messages/id.json b/apps/desktop-ui/messages/id.json
index f04b3d09..4044efd2 100644
--- a/apps/desktop-ui/messages/id.json
+++ b/apps/desktop-ui/messages/id.json
@@ -195,6 +195,8 @@
       "title": "Penampilan",
       "description": "Sesuaikan tampilan aplikasi di perangkat Anda.",
       "themePreference": "Preferensi Tema",
+      "accentColor": "Warna aksen",
+      "customColor": "Warna khusus",
       "themes": {
         "light": "Cahaya",
         "dark": "Gelap",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "Tentang",
+      "running": "Menjalankan MyDevTools",
+      "runningVersion": "Menjalankan MyDevTools v{version}",
+      "checkButton": "Periksa pembaruan",
+      "checking": "Memeriksa…",
+      "dialogTitle": "Pembaruan",
+      "dialogDescription": "MyDevTools memperbarui dirinya di tempat — tanpa instal ulang, dan data offline Anda tidak pernah tersentuh.",
+      "onVersion": "Anda menggunakan versi {version}.",
+      "available": "Versi {version} tersedia.",
+      "install": "Unduh dan pasang",
+      "upToDate": "Anda sudah menggunakan versi terbaru.",
+      "checkError": "Tidak dapat memeriksa pembaruan. Apakah Anda online?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "Semua",
       "total": "Total",
       "allProjects": "Semua Projek",
+      "projectsHeading": "Proyek",
       "export": "Ekspor",
       "kanban": "Kanban",
       "list": "Dunia",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "Ketuk tombol + untuk menambahkan kata sandi pertama Anda",
       "emptyHintDesktop": "Anda belum menyimpan kata sandi apa pun. Klik tombol \"Tambahkan kata sandi\" di atas untuk memulai.",
       "addPassword": "Tambah Kata Sandi",
+      "title": "Kata sandi",
+      "filters": {
+        "heading": "Kesehatan brankas",
+        "all": "Semua kata sandi",
+        "weak": "Lemah",
+        "reused": "Dipakai ulang",
+        "noUrl": "Tanpa URL",
+        "tagsHeading": "Tag",
+        "allTags": "Semua tag"
+      },
       "searchPlaceholderMobile": "Cari brankas Anda...",
       "searchPlaceholderDesktop": "Cari brankas...",
       "importExport": "Impor/Ekspor",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Buat set untuk setiap proyek dan lingkungan (mis. kunci API produksi). Semua dienkripsi di browser sebelum diunggah.",
       "searchPlaceholder": "Cari proyek, lingkungan, tag, catatan…",
       "tagFilterPlaceholder": "Saring menurut tag",
+      "allProjects": "Semua proyek",
+      "projectsHeading": "Proyek",
       "variableCount": "{count, plural, other {# variabel}}",
       "updatedAgo": "Diperbarui {time}",
       "copyDotEnv": "Salin .env",
@@ -3859,6 +3888,9 @@
     "copyHtml": "Salin HTML",
     "copyMarkdown": "Salin Markdown",
     "exportHtml": "Ekspor HTML",
+    "fileNameLabel": "Nama file",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "{name} disimpan",
     "copied": "Disalin",
     "charCount": "{count, plural, other {# karakter}}",
     "emptyHint": "Mulai mengetik Markdown untuk melihat pratinjau langsung dan output HTML.",
@@ -5095,6 +5127,10 @@
   "ToolPageHeader": {
     "offline": "100% offline"
   },
+  "ToolSidebar": {
+    "show": "Tampilkan bilah sisi",
+    "hide": "Sembunyikan bilah sisi"
+  },
   "DesktopUpdate": {
     "title": "Memperbarui MyDevTools",
     "downloading": "Mengunduh pembaruan…",
diff --git a/apps/desktop-ui/messages/it.json b/apps/desktop-ui/messages/it.json
index a5d4201b..c87507a2 100644
--- a/apps/desktop-ui/messages/it.json
+++ b/apps/desktop-ui/messages/it.json
@@ -195,6 +195,8 @@
       "title": "Aspetto",
       "description": "Personalizza l'aspetto dell'applicazione sul tuo dispositivo.",
       "themePreference": "Preferenza tema",
+      "accentColor": "Colore d'accento",
+      "customColor": "Colore personalizzato",
       "themes": {
         "light": "Leggero",
         "dark": "Buio",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "Informazioni",
+      "running": "MyDevTools in esecuzione",
+      "runningVersion": "MyDevTools v{version} in esecuzione",
+      "checkButton": "Controlla aggiornamenti",
+      "checking": "Controllo…",
+      "dialogTitle": "Aggiornamenti",
+      "dialogDescription": "MyDevTools si aggiorna sul posto — nessuna reinstallazione e i tuoi dati offline non vengono mai toccati.",
+      "onVersion": "Stai usando la versione {version}.",
+      "available": "La versione {version} è disponibile.",
+      "install": "Scarica e installa",
+      "upToDate": "Sei aggiornato.",
+      "checkError": "Impossibile controllare gli aggiornamenti. Sei online?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "Tutto",
       "total": "Totale",
       "allProjects": "Tutti i progetti",
+      "projectsHeading": "Progetti",
       "export": "Esportare",
       "kanban": "Kanban",
       "list": "Lista",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "Tocca il pulsante + per aggiungere la tua prima password",
       "emptyHintDesktop": "Non hai ancora memorizzato alcuna password. Fai clic sul pulsante \"Aggiungi password\" qui sopra per iniziare.",
       "addPassword": "Aggiungi password",
+      "title": "Password",
+      "filters": {
+        "heading": "Stato della cassaforte",
+        "all": "Tutte le password",
+        "weak": "Deboli",
+        "reused": "Riutilizzate",
+        "noUrl": "Senza URL",
+        "tagsHeading": "Tag",
+        "allTags": "Tutti i tag"
+      },
       "searchPlaceholderMobile": "Cerca nel tuo caveau...",
       "searchPlaceholderDesktop": "Cerca nel caveau...",
       "importExport": "Importa/esporta",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Crea un set per ogni progetto e ambiente (es. chiavi API di produzione). Tutto viene crittografato nel browser prima del caricamento.",
       "searchPlaceholder": "Cerca progetto, ambiente, tag, note…",
       "tagFilterPlaceholder": "Filtra per tag",
+      "allProjects": "Tutti i progetti",
+      "projectsHeading": "Progetti",
       "variableCount": "{count, plural, one {# variabile} other {# variabili}}",
       "updatedAgo": "Aggiornato {time}",
       "copyDotEnv": "Copia .env",
@@ -3870,6 +3899,9 @@
     "copyHtml": "Copia HTML",
     "copyMarkdown": "Copia Markdown",
     "exportHtml": "Esporta HTML",
+    "fileNameLabel": "Nome file",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "{name} salvato",
     "copied": "Copiato",
     "charCount": "{count, plural, one {# carattere} other {# caratteri}}",
     "emptyHint": "Inizia a digitare Markdown per vedere l'anteprima live e l'output HTML.",
@@ -5106,6 +5138,10 @@
   "ToolPageHeader": {
     "offline": "100% offline"
   },
+  "ToolSidebar": {
+    "show": "Mostra barra laterale",
+    "hide": "Nascondi barra laterale"
+  },
   "DesktopUpdate": {
     "title": "Aggiornamento di MyDevTools",
     "downloading": "Download dell'aggiornamento…",
diff --git a/apps/desktop-ui/messages/ja.json b/apps/desktop-ui/messages/ja.json
index 049c0a75..03c0f4d0 100644
--- a/apps/desktop-ui/messages/ja.json
+++ b/apps/desktop-ui/messages/ja.json
@@ -195,6 +195,8 @@
       "title": "外観",
       "description": "デバイスでのアプリケーションの表示をカスタマイズします。",
       "themePreference": "テーマ設定",
+      "accentColor": "アクセントカラー",
+      "customColor": "カスタムカラー",
       "themes": {
         "light": "ライト",
         "dark": "ダーク",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "このアプリについて",
+      "running": "MyDevTools を実行中",
+      "runningVersion": "MyDevTools v{version} を実行中",
+      "checkButton": "更新を確認",
+      "checking": "確認中…",
+      "dialogTitle": "更新",
+      "dialogDescription": "MyDevTools はその場で自動更新されます。再インストールは不要で、オフラインデータには一切触れません。",
+      "onVersion": "現在のバージョンは {version} です。",
+      "available": "バージョン {version} が利用可能です。",
+      "install": "ダウンロードしてインストール",
+      "upToDate": "最新の状態です。",
+      "checkError": "更新を確認できませんでした。オンラインですか？"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "すべて",
       "total": "合計",
       "allProjects": "すべてのプロジェクト",
+      "projectsHeading": "プロジェクト",
       "export": "エクスポート",
       "kanban": "カンバン",
       "list": "リスト",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "+ボタンをタップして最初のパスワードを追加してください",
       "emptyHintDesktop": "パスワードはまだ保存されていません。上の「パスワードを追加」ボタンをクリックして始めましょう。",
       "addPassword": "パスワードを追加",
+      "title": "パスワード",
+      "filters": {
+        "heading": "保管庫の状態",
+        "all": "すべてのパスワード",
+        "weak": "脆弱",
+        "reused": "使い回し",
+        "noUrl": "URLなし",
+        "tagsHeading": "タグ",
+        "allTags": "すべてのタグ"
+      },
       "searchPlaceholderMobile": "ボールトを検索...",
       "searchPlaceholderDesktop": "ボールトを検索...",
       "importExport": "インポート / エクスポート",
@@ -1161,6 +1188,8 @@
       "emptyHint": "プロジェクトと環境ごとにセットを作成します（例: 本番 API キー）。アップロード前にブラウザで暗号化されます。",
       "searchPlaceholder": "プロジェクト・環境・タグ・メモを検索…",
       "tagFilterPlaceholder": "タグで絞り込み",
+      "allProjects": "すべてのプロジェクト",
+      "projectsHeading": "プロジェクト",
       "variableCount": "{count, plural, other {# 件の変数}}",
       "updatedAgo": "更新 {time}",
       "copyDotEnv": ".env をコピー",
@@ -3859,6 +3888,9 @@
     "copyHtml": "HTMLをコピー",
     "copyMarkdown": "Markdownをコピー",
     "exportHtml": "HTMLをエクスポート",
+    "fileNameLabel": "ファイル名",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "{name} を保存しました",
     "copied": "コピーしました",
     "charCount": "{count, plural, other {# 文字}}",
     "emptyHint": "Markdownの入力を開始すると、ライブプレビューとHTML出力が表示されます。",
@@ -5095,6 +5127,10 @@
   "ToolPageHeader": {
     "offline": "完全オフライン"
   },
+  "ToolSidebar": {
+    "show": "サイドバーを表示",
+    "hide": "サイドバーを非表示"
+  },
   "DesktopUpdate": {
     "title": "MyDevTools を更新しています",
     "downloading": "更新をダウンロードしています…",
diff --git a/apps/desktop-ui/messages/ko.json b/apps/desktop-ui/messages/ko.json
index 57c45243..6adb2e31 100644
--- a/apps/desktop-ui/messages/ko.json
+++ b/apps/desktop-ui/messages/ko.json
@@ -195,6 +195,8 @@
       "title": "외관",
       "description": "기기에서 애플리케이션의 모양을 사용자 지정하세요.",
       "themePreference": "테마 설정",
+      "accentColor": "강조 색상",
+      "customColor": "사용자 지정 색상",
       "themes": {
         "light": "라이트",
         "dark": "다크",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "정보",
+      "running": "MyDevTools 실행 중",
+      "runningVersion": "MyDevTools v{version} 실행 중",
+      "checkButton": "업데이트 확인",
+      "checking": "확인 중…",
+      "dialogTitle": "업데이트",
+      "dialogDescription": "MyDevTools는 그 자리에서 스스로 업데이트됩니다. 재설치가 필요 없고 오프라인 데이터는 절대 건드리지 않습니다.",
+      "onVersion": "현재 버전은 {version}입니다.",
+      "available": "버전 {version}을(를) 사용할 수 있습니다.",
+      "install": "다운로드 및 설치",
+      "upToDate": "최신 버전입니다.",
+      "checkError": "업데이트를 확인할 수 없습니다. 인터넷에 연결되어 있나요?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "전체",
       "total": "합계",
       "allProjects": "모든 프로젝트",
+      "projectsHeading": "프로젝트",
       "export": "내보내기",
       "kanban": "칸반",
       "list": "목록",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "+ 버튼을 눌러 첫 번째 비밀번호를 추가하세요",
       "emptyHintDesktop": "아직 저장된 비밀번호가 없습니다. 위의 \"비밀번호 추가\" 버튼을 클릭하여 시작하세요.",
       "addPassword": "비밀번호 추가",
+      "title": "비밀번호",
+      "filters": {
+        "heading": "보관함 상태",
+        "all": "모든 비밀번호",
+        "weak": "취약",
+        "reused": "재사용",
+        "noUrl": "URL 없음",
+        "tagsHeading": "태그",
+        "allTags": "모든 태그"
+      },
       "searchPlaceholderMobile": "볼트 검색...",
       "searchPlaceholderDesktop": "볼트 검색...",
       "importExport": "가져오기 / 내보내기",
@@ -1161,6 +1188,8 @@
       "emptyHint": "프로젝트와 환경마다 세트를 만드세요(예: 프로덕션 API 키). 업로드 전 브라우저에서 암호화됩니다.",
       "searchPlaceholder": "프로젝트, 환경, 태그, 메모 검색…",
       "tagFilterPlaceholder": "태그로 필터",
+      "allProjects": "모든 프로젝트",
+      "projectsHeading": "프로젝트",
       "variableCount": "{count, plural, other {#개 변수}}",
       "updatedAgo": "업데이트 {time}",
       "copyDotEnv": ".env 복사",
@@ -3859,6 +3888,9 @@
     "copyHtml": "HTML 복사",
     "copyMarkdown": "Markdown 복사",
     "exportHtml": "HTML 내보내기",
+    "fileNameLabel": "파일 이름",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "{name} 저장됨",
     "copied": "복사됨",
     "charCount": "{count, plural, other {# 자}}",
     "emptyHint": "Markdown을 입력하면 실시간 미리보기와 HTML 출력을 볼 수 있습니다.",
@@ -5095,6 +5127,10 @@
   "ToolPageHeader": {
     "offline": "100% 오프라인"
   },
+  "ToolSidebar": {
+    "show": "사이드바 표시",
+    "hide": "사이드바 숨기기"
+  },
   "DesktopUpdate": {
     "title": "MyDevTools 업데이트 중",
     "downloading": "업데이트 다운로드 중…",
diff --git a/apps/desktop-ui/messages/ms.json b/apps/desktop-ui/messages/ms.json
index 098a4975..8ede4562 100644
--- a/apps/desktop-ui/messages/ms.json
+++ b/apps/desktop-ui/messages/ms.json
@@ -195,6 +195,8 @@
       "title": "Penampilan",
       "description": "Sesuaikan rupa aplikasi pada peranti anda.",
       "themePreference": "Keutamaan Tema",
+      "accentColor": "Warna aksen",
+      "customColor": "Warna tersuai",
       "themes": {
         "light": "Cerah",
         "dark": "Gelap",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "Perihal",
+      "running": "Menjalankan MyDevTools",
+      "runningVersion": "Menjalankan MyDevTools v{version}",
+      "checkButton": "Periksa kemas kini",
+      "checking": "Memeriksa…",
+      "dialogTitle": "Kemas kini",
+      "dialogDescription": "MyDevTools mengemas kini dirinya di tempat — tanpa pemasangan semula, dan data luar talian anda tidak pernah disentuh.",
+      "onVersion": "Anda menggunakan versi {version}.",
+      "available": "Versi {version} tersedia.",
+      "install": "Muat turun dan pasang",
+      "upToDate": "Anda sudah terkini.",
+      "checkError": "Tidak dapat memeriksa kemas kini. Adakah anda dalam talian?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "Semua",
       "total": "Jumlah",
       "allProjects": "Semua Projek",
+      "projectsHeading": "Projek",
       "export": "Eksport",
       "kanban": "Kanban",
       "list": "Senarai",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "Ketik butang + untuk menambah kata laluan pertama anda",
       "emptyHintDesktop": "Anda belum menyimpan sebarang kata laluan. Klik butang \"Tambah kata laluan\" di atas untuk bermula.",
       "addPassword": "Tambah kata laluan",
+      "title": "Kata laluan",
+      "filters": {
+        "heading": "Kesihatan peti besi",
+        "all": "Semua kata laluan",
+        "weak": "Lemah",
+        "reused": "Diguna semula",
+        "noUrl": "Tiada URL",
+        "tagsHeading": "Tag",
+        "allTags": "Semua tag"
+      },
       "searchPlaceholderMobile": "Cari peti besi anda...",
       "searchPlaceholderDesktop": "Cari peti besi...",
       "importExport": "Import / eksport",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Cipta set untuk setiap projek dan persekitaran (cth. kunci API pengeluaran). Semua disulitkan dalam pelayar sebelum dimuat naik.",
       "searchPlaceholder": "Cari projek, persekitaran, teg, nota…",
       "tagFilterPlaceholder": "Tapis mengikut teg",
+      "allProjects": "Semua projek",
+      "projectsHeading": "Projek",
       "variableCount": "{count, plural, other {# pemboleh ubah}}",
       "updatedAgo": "Dikemas kini {time}",
       "copyDotEnv": "Salin .env",
@@ -3870,6 +3899,9 @@
     "copyHtml": "Salin HTML",
     "copyMarkdown": "Salin Markdown",
     "exportHtml": "Eksport HTML",
+    "fileNameLabel": "Nama fail",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "{name} disimpan",
     "copied": "Disalin",
     "charCount": "{count, plural, other {# aksara}}",
     "emptyHint": "Mulakan menaip Markdown untuk melihat pratonton langsung dan output HTML.",
@@ -5106,6 +5138,10 @@
   "ToolPageHeader": {
     "offline": "100% luar talian"
   },
+  "ToolSidebar": {
+    "show": "Tunjukkan bar sisi",
+    "hide": "Sembunyikan bar sisi"
+  },
   "DesktopUpdate": {
     "title": "Mengemas kini MyDevTools",
     "downloading": "Memuat turun kemas kini…",
diff --git a/apps/desktop-ui/messages/nb.json b/apps/desktop-ui/messages/nb.json
index ea489d08..dc7578ca 100644
--- a/apps/desktop-ui/messages/nb.json
+++ b/apps/desktop-ui/messages/nb.json
@@ -195,6 +195,8 @@
       "title": "Utseende",
       "description": "Tilpass hvordan applikasjonen ser ut på enheten din.",
       "themePreference": "Temapreferanse",
+      "accentColor": "Aksentfarge",
+      "customColor": "Egendefinert farge",
       "themes": {
         "light": "Lys",
         "dark": "Mørk",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "Om",
+      "running": "Kjører MyDevTools",
+      "runningVersion": "Kjører MyDevTools v{version}",
+      "checkButton": "Se etter oppdateringer",
+      "checking": "Søker…",
+      "dialogTitle": "Oppdateringer",
+      "dialogDescription": "MyDevTools oppdaterer seg selv på stedet — ingen reinstallering, og offline-dataene dine blir aldri berørt.",
+      "onVersion": "Du bruker versjon {version}.",
+      "available": "Versjon {version} er tilgjengelig.",
+      "install": "Last ned og installer",
+      "upToDate": "Du er oppdatert.",
+      "checkError": "Kunne ikke se etter oppdateringer. Er du på nett?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "Alle",
       "total": "Totalt",
       "allProjects": "Alle prosjekter",
+      "projectsHeading": "Prosjekter",
       "export": "Eksporter",
       "kanban": "Kanban",
       "list": "Liste",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "Trykk på +-knappen for å legge til ditt første passord",
       "emptyHintDesktop": "Du har ikke lagret noen passord ennå. Klikk på «Legg til passord»-knappen ovenfor for å komme i gang.",
       "addPassword": "Legg til passord",
+      "title": "Passord",
+      "filters": {
+        "heading": "Hvelvets tilstand",
+        "all": "Alle passord",
+        "weak": "Svake",
+        "reused": "Gjenbrukte",
+        "noUrl": "Ingen URL",
+        "tagsHeading": "Merkelapper",
+        "allTags": "Alle merkelapper"
+      },
       "searchPlaceholderMobile": "Søk i hvelvet ditt...",
       "searchPlaceholderDesktop": "Søk i hvelv...",
       "importExport": "Importer / eksporter",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Opprett et sett for hvert prosjekt og miljø (f.eks. produksjons-API-nøkler). Alt krypteres i nettleseren før opplasting.",
       "searchPlaceholder": "Søk prosjekt, miljø, tagger, notater…",
       "tagFilterPlaceholder": "Filtrer på tagg",
+      "allProjects": "Alle prosjekter",
+      "projectsHeading": "Prosjekter",
       "variableCount": "{count, plural, one {# variabel} other {# variabler}}",
       "updatedAgo": "Oppdatert {time}",
       "copyDotEnv": "Kopier .env",
@@ -3859,6 +3888,9 @@
     "copyHtml": "Kopier HTML",
     "copyMarkdown": "Kopier Markdown",
     "exportHtml": "Eksporter HTML",
+    "fileNameLabel": "Filnavn",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "Lagret {name}",
     "copied": "Kopiert",
     "charCount": "{count, plural, one {# tegn} other {# tegn}}",
     "emptyHint": "Begynn å skrive Markdown for å se live-forhåndsvisning og HTML-utdata.",
@@ -5095,6 +5127,10 @@
   "ToolPageHeader": {
     "offline": "100 % offline"
   },
+  "ToolSidebar": {
+    "show": "Vis sidepanel",
+    "hide": "Skjul sidepanel"
+  },
   "DesktopUpdate": {
     "title": "Oppdaterer MyDevTools",
     "downloading": "Laster ned oppdatering…",
diff --git a/apps/desktop-ui/messages/nl.json b/apps/desktop-ui/messages/nl.json
index 4c09bf9c..b8a8c06f 100644
--- a/apps/desktop-ui/messages/nl.json
+++ b/apps/desktop-ui/messages/nl.json
@@ -195,6 +195,8 @@
       "title": "Weergave",
       "description": "Pas het uiterlijk van de applicatie aan op je apparaat.",
       "themePreference": "Themavoorkeur",
+      "accentColor": "Accentkleur",
+      "customColor": "Aangepaste kleur",
       "themes": {
         "light": "Licht",
         "dark": "Donker",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "Over",
+      "running": "MyDevTools wordt uitgevoerd",
+      "runningVersion": "MyDevTools v{version} wordt uitgevoerd",
+      "checkButton": "Controleren op updates",
+      "checking": "Controleren…",
+      "dialogTitle": "Updates",
+      "dialogDescription": "MyDevTools werkt zichzelf ter plekke bij — geen herinstallatie, en je offlinegegevens worden nooit aangeraakt.",
+      "onVersion": "Je gebruikt versie {version}.",
+      "available": "Versie {version} is beschikbaar.",
+      "install": "Downloaden en installeren",
+      "upToDate": "Je bent up-to-date.",
+      "checkError": "Kon niet op updates controleren. Ben je online?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "Alles",
       "total": "Totaal",
       "allProjects": "Alle projecten",
+      "projectsHeading": "Projecten",
       "export": "Exporteren",
       "kanban": "Kanban",
       "list": "Lijst",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "Tik op de + knop om je eerste wachtwoord toe te voegen",
       "emptyHintDesktop": "Je hebt nog geen wachtwoorden opgeslagen. Klik op de knop \"Wachtwoord toevoegen\" hierboven om te beginnen.",
       "addPassword": "Wachtwoord toevoegen",
+      "title": "Wachtwoorden",
+      "filters": {
+        "heading": "Kluisstatus",
+        "all": "Alle wachtwoorden",
+        "weak": "Zwak",
+        "reused": "Hergebruikt",
+        "noUrl": "Geen URL",
+        "tagsHeading": "Tags",
+        "allTags": "Alle tags"
+      },
       "searchPlaceholderMobile": "Doorzoek je kluis...",
       "searchPlaceholderDesktop": "Kluis doorzoeken...",
       "importExport": "Importeren / exporteren",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Maak een set per project en omgeving (bijv. productie-API-sleutels). Alles wordt in uw browser versleuteld vóór upload.",
       "searchPlaceholder": "Zoek project, omgeving, tags, notities…",
       "tagFilterPlaceholder": "Filter op tag",
+      "allProjects": "Alle projecten",
+      "projectsHeading": "Projecten",
       "variableCount": "{count, plural, one {# variabele} other {# variabelen}}",
       "updatedAgo": "Bijgewerkt {time}",
       "copyDotEnv": ".env kopiëren",
@@ -3859,6 +3888,9 @@
     "copyHtml": "HTML kopiëren",
     "copyMarkdown": "Markdown kopiëren",
     "exportHtml": "HTML exporteren",
+    "fileNameLabel": "Bestandsnaam",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "{name} opgeslagen",
     "copied": "Gekopieerd",
     "charCount": "{count, plural, one {# teken} other {# tekens}}",
     "emptyHint": "Begin met het typen van Markdown om de live preview en HTML-uitvoer te zien.",
@@ -5095,6 +5127,10 @@
   "ToolPageHeader": {
     "offline": "100% offline"
   },
+  "ToolSidebar": {
+    "show": "Zijbalk tonen",
+    "hide": "Zijbalk verbergen"
+  },
   "DesktopUpdate": {
     "title": "MyDevTools wordt bijgewerkt",
     "downloading": "Update wordt gedownload…",
diff --git a/apps/desktop-ui/messages/pl.json b/apps/desktop-ui/messages/pl.json
index a2e52692..fb93875a 100644
--- a/apps/desktop-ui/messages/pl.json
+++ b/apps/desktop-ui/messages/pl.json
@@ -195,6 +195,8 @@
       "title": "Appearance",
       "description": "Customize how the application looks on your device.",
       "themePreference": "Theme Preference",
+      "accentColor": "Kolor akcentu",
+      "customColor": "Kolor własny",
       "themes": {
         "light": "Light",
         "dark": "Dark",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "O aplikacji",
+      "running": "Działa MyDevTools",
+      "runningVersion": "Działa MyDevTools v{version}",
+      "checkButton": "Sprawdź aktualizacje",
+      "checking": "Sprawdzanie…",
+      "dialogTitle": "Aktualizacje",
+      "dialogDescription": "MyDevTools aktualizuje się na miejscu — bez ponownej instalacji, a Twoje dane offline nigdy nie są ruszane.",
+      "onVersion": "Używasz wersji {version}.",
+      "available": "Wersja {version} jest dostępna.",
+      "install": "Pobierz i zainstaluj",
+      "upToDate": "Masz najnowszą wersję.",
+      "checkError": "Nie udało się sprawdzić aktualizacji. Czy jesteś online?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "All",
       "total": "Total",
       "allProjects": "All Projects",
+      "projectsHeading": "Projekty",
       "export": "Export",
       "kanban": "Kanban",
       "list": "List",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "Tap the + button to add your first password",
       "emptyHintDesktop": "You have not stored any passwords yet. Click the \"Add password\" button above to get started.",
       "addPassword": "Add password",
+      "title": "Hasła",
+      "filters": {
+        "heading": "Stan sejfu",
+        "all": "Wszystkie hasła",
+        "weak": "Słabe",
+        "reused": "Powtórzone",
+        "noUrl": "Bez adresu URL",
+        "tagsHeading": "Tagi",
+        "allTags": "Wszystkie tagi"
+      },
       "searchPlaceholderMobile": "Search your vault...",
       "searchPlaceholderDesktop": "Search vault...",
       "importExport": "Import / export",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Utwórz zestaw dla każdego projektu i środowiska (np. klucze API produkcji). Wszystko jest szyfrowane w przeglądarce przed wysłaniem.",
       "searchPlaceholder": "Szukaj projektu, środowiska, tagów, notatek…",
       "tagFilterPlaceholder": "Filtruj według tagu",
+      "allProjects": "Wszystkie projekty",
+      "projectsHeading": "Projekty",
       "variableCount": "{count, plural, one {# zmienna} few {# zmienne} other {# zmiennych}}",
       "updatedAgo": "Zaktualizowano {time}",
       "copyDotEnv": "Kopiuj .env",
@@ -3859,6 +3888,9 @@
     "copyHtml": "Kopiuj HTML",
     "copyMarkdown": "Kopiuj Markdown",
     "exportHtml": "Eksportuj HTML",
+    "fileNameLabel": "Nazwa pliku",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "Zapisano {name}",
     "copied": "Skopiowano",
     "charCount": "{count, plural, one {# znak} few {# znaki} other {# znaków}}",
     "emptyHint": "Zacznij wpisywać Markdown, aby zobaczyć podgląd na żywo i wyjście HTML.",
@@ -5095,6 +5127,10 @@
   "ToolPageHeader": {
     "offline": "100% offline"
   },
+  "ToolSidebar": {
+    "show": "Pokaż pasek boczny",
+    "hide": "Ukryj pasek boczny"
+  },
   "DesktopUpdate": {
     "title": "Aktualizowanie MyDevTools",
     "downloading": "Pobieranie aktualizacji…",
diff --git a/apps/desktop-ui/messages/pt-BR.json b/apps/desktop-ui/messages/pt-BR.json
index b683c90e..0f0fb14f 100644
--- a/apps/desktop-ui/messages/pt-BR.json
+++ b/apps/desktop-ui/messages/pt-BR.json
@@ -195,6 +195,8 @@
       "title": "Aparência",
       "description": "Personalize a aparência do aplicativo no seu dispositivo.",
       "themePreference": "Preferência de Tema",
+      "accentColor": "Cor de destaque",
+      "customColor": "Cor personalizada",
       "themes": {
         "light": "Claro",
         "dark": "Escuro",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "Sobre",
+      "running": "Executando o MyDevTools",
+      "runningVersion": "Executando o MyDevTools v{version}",
+      "checkButton": "Verificar atualizações",
+      "checking": "Verificando…",
+      "dialogTitle": "Atualizações",
+      "dialogDescription": "O MyDevTools se atualiza no lugar — sem reinstalar nada, e seus dados offline nunca são tocados.",
+      "onVersion": "Você está na versão {version}.",
+      "available": "A versão {version} está disponível.",
+      "install": "Baixar e instalar",
+      "upToDate": "Você está atualizado.",
+      "checkError": "Não foi possível verificar atualizações. Você está online?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "Todas",
       "total": "Total",
       "allProjects": "Todos os Projetos",
+      "projectsHeading": "Projetos",
       "export": "Exportar",
       "kanban": "Kanban",
       "list": "Lista",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "Toque no botão + para adicionar sua primeira senha",
       "emptyHintDesktop": "Você ainda não armazenou nenhuma senha. Clique no botão \"Adicionar senha\" acima para começar.",
       "addPassword": "Adicionar senha",
+      "title": "Senhas",
+      "filters": {
+        "heading": "Saúde do cofre",
+        "all": "Todas as senhas",
+        "weak": "Fracas",
+        "reused": "Reutilizadas",
+        "noUrl": "Sem URL",
+        "tagsHeading": "Tags",
+        "allTags": "Todas as tags"
+      },
       "searchPlaceholderMobile": "Buscar no cofre...",
       "searchPlaceholderDesktop": "Buscar no cofre...",
       "importExport": "Importar / exportar",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Crie um conjunto para cada projeto e ambiente (ex.: chaves de API de produção). Tudo é criptografado no navegador antes do envio.",
       "searchPlaceholder": "Buscar projeto, ambiente, tags, notas…",
       "tagFilterPlaceholder": "Filtrar por tag",
+      "allProjects": "Todos os projetos",
+      "projectsHeading": "Projetos",
       "variableCount": "{count, plural, one {# variável} other {# variáveis}}",
       "updatedAgo": "Atualizado {time}",
       "copyDotEnv": "Copiar .env",
@@ -3859,6 +3888,9 @@
     "copyHtml": "Copiar HTML",
     "copyMarkdown": "Copiar Markdown",
     "exportHtml": "Exportar HTML",
+    "fileNameLabel": "Nome do arquivo",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "{name} salvo",
     "copied": "Copiado",
     "charCount": "{count, plural, one {# caractere} other {# caracteres}}",
     "emptyHint": "Comece a digitar Markdown para ver a pré-visualização ao vivo e a saída HTML.",
@@ -5095,6 +5127,10 @@
   "ToolPageHeader": {
     "offline": "100% offline"
   },
+  "ToolSidebar": {
+    "show": "Mostrar barra lateral",
+    "hide": "Ocultar barra lateral"
+  },
   "DesktopUpdate": {
     "title": "Atualizando o MyDevTools",
     "downloading": "Baixando atualização…",
diff --git a/apps/desktop-ui/messages/pt.json b/apps/desktop-ui/messages/pt.json
index 0ebe342f..58e141e1 100644
--- a/apps/desktop-ui/messages/pt.json
+++ b/apps/desktop-ui/messages/pt.json
@@ -195,6 +195,8 @@
       "title": "Aparência",
       "description": "Personaliza o aspeto da aplicação no teu dispositivo.",
       "themePreference": "Preferência de Tema",
+      "accentColor": "Cor de destaque",
+      "customColor": "Cor personalizada",
       "themes": {
         "light": "Claro",
         "dark": "Escuro",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "Acerca de",
+      "running": "A executar o MyDevTools",
+      "runningVersion": "A executar o MyDevTools v{version}",
+      "checkButton": "Procurar atualizações",
+      "checking": "A procurar…",
+      "dialogTitle": "Atualizações",
+      "dialogDescription": "O MyDevTools atualiza-se no local — sem reinstalar nada, e os seus dados offline nunca são tocados.",
+      "onVersion": "Está na versão {version}.",
+      "available": "A versão {version} está disponível.",
+      "install": "Transferir e instalar",
+      "upToDate": "Está atualizado.",
+      "checkError": "Não foi possível procurar atualizações. Está online?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "Todas",
       "total": "Total",
       "allProjects": "Todos os Projetos",
+      "projectsHeading": "Projetos",
       "export": "Exportar",
       "kanban": "Kanban",
       "list": "Lista",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "Toca no botão + para adicionar a tua primeira palavra-passe",
       "emptyHintDesktop": "Ainda não armazenaste nenhuma palavra-passe. Clica no botão \"Adicionar palavra-passe\" acima para começar.",
       "addPassword": "Adicionar palavra-passe",
+      "title": "Palavras-passe",
+      "filters": {
+        "heading": "Estado do cofre",
+        "all": "Todas as palavras-passe",
+        "weak": "Fracas",
+        "reused": "Reutilizadas",
+        "noUrl": "Sem URL",
+        "tagsHeading": "Etiquetas",
+        "allTags": "Todas as etiquetas"
+      },
       "searchPlaceholderMobile": "Pesquisar no cofre...",
       "searchPlaceholderDesktop": "Pesquisar no cofre...",
       "importExport": "Importar / exportar",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Crie um conjunto por projeto e ambiente (ex.: chaves API de produção). Tudo é encriptado no navegador antes do envio.",
       "searchPlaceholder": "Pesquisar projeto, ambiente, etiquetas, notas…",
       "tagFilterPlaceholder": "Filtrar por etiqueta",
+      "allProjects": "Todos os projetos",
+      "projectsHeading": "Projetos",
       "variableCount": "{count, plural, one {# variável} other {# variáveis}}",
       "updatedAgo": "Atualizado {time}",
       "copyDotEnv": "Copiar .env",
@@ -3859,6 +3888,9 @@
     "copyHtml": "Copiar HTML",
     "copyMarkdown": "Copiar Markdown",
     "exportHtml": "Exportar HTML",
+    "fileNameLabel": "Nome do ficheiro",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "{name} guardado",
     "copied": "Copiado",
     "charCount": "{count, plural, one {# carácter} other {# caracteres}}",
     "emptyHint": "Comece a escrever Markdown para ver a pré-visualização em tempo real e a saída HTML.",
@@ -5095,6 +5127,10 @@
   "ToolPageHeader": {
     "offline": "100% offline"
   },
+  "ToolSidebar": {
+    "show": "Mostrar barra lateral",
+    "hide": "Ocultar barra lateral"
+  },
   "DesktopUpdate": {
     "title": "A atualizar o MyDevTools",
     "downloading": "A transferir a atualização…",
diff --git a/apps/desktop-ui/messages/ru.json b/apps/desktop-ui/messages/ru.json
index 279dd21f..f61cc826 100644
--- a/apps/desktop-ui/messages/ru.json
+++ b/apps/desktop-ui/messages/ru.json
@@ -195,6 +195,8 @@
       "title": "Внешний вид",
       "description": "Настройте внешний вид приложения на вашем устройстве.",
       "themePreference": "Тема оформления",
+      "accentColor": "Акцентный цвет",
+      "customColor": "Свой цвет",
       "themes": {
         "light": "Светлая",
         "dark": "Тёмная",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "О приложении",
+      "running": "MyDevTools запущен",
+      "runningVersion": "MyDevTools v{version} запущен",
+      "checkButton": "Проверить обновления",
+      "checking": "Проверка…",
+      "dialogTitle": "Обновления",
+      "dialogDescription": "MyDevTools обновляется на месте — без переустановки, и ваши офлайн-данные никогда не затрагиваются.",
+      "onVersion": "У вас версия {version}.",
+      "available": "Доступна версия {version}.",
+      "install": "Скачать и установить",
+      "upToDate": "У вас последняя версия.",
+      "checkError": "Не удалось проверить обновления. Вы онлайн?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "Все",
       "total": "Итого",
       "allProjects": "Все проекты",
+      "projectsHeading": "Проекты",
       "export": "Экспорт",
       "kanban": "Канбан",
       "list": "Список",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "Нажмите кнопку +, чтобы добавить первый пароль",
       "emptyHintDesktop": "У вас пока нет сохранённых паролей. Нажмите «Добавить пароль», чтобы начать.",
       "addPassword": "Добавить пароль",
+      "title": "Пароли",
+      "filters": {
+        "heading": "Состояние хранилища",
+        "all": "Все пароли",
+        "weak": "Слабые",
+        "reused": "Повторяющиеся",
+        "noUrl": "Без URL",
+        "tagsHeading": "Теги",
+        "allTags": "Все теги"
+      },
       "searchPlaceholderMobile": "Поиск по хранилищу...",
       "searchPlaceholderDesktop": "Поиск по хранилищу...",
       "importExport": "Импорт / экспорт",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Создайте набор для каждого проекта и среды (например, ключи API продакшена). Всё шифруется в браузере перед загрузкой.",
       "searchPlaceholder": "Поиск по проекту, среде, тегам, заметкам…",
       "tagFilterPlaceholder": "Фильтр по тегу",
+      "allProjects": "Все проекты",
+      "projectsHeading": "Проекты",
       "variableCount": "{count, plural, one {# переменная} few {# переменные} other {# переменных}}",
       "updatedAgo": "Обновлено {time}",
       "copyDotEnv": "Копировать .env",
@@ -3859,6 +3888,9 @@
     "copyHtml": "Копировать HTML",
     "copyMarkdown": "Копировать Markdown",
     "exportHtml": "Экспорт HTML",
+    "fileNameLabel": "Имя файла",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "Сохранено: {name}",
     "copied": "Скопировано",
     "charCount": "{count, plural, one {# символ} few {# символа} other {# символов}}",
     "emptyHint": "Начните вводить Markdown, чтобы увидеть предпросмотр и HTML вывод.",
@@ -5095,6 +5127,10 @@
   "ToolPageHeader": {
     "offline": "100% офлайн"
   },
+  "ToolSidebar": {
+    "show": "Показать боковую панель",
+    "hide": "Скрыть боковую панель"
+  },
   "DesktopUpdate": {
     "title": "Обновление MyDevTools",
     "downloading": "Загрузка обновления…",
diff --git a/apps/desktop-ui/messages/sv.json b/apps/desktop-ui/messages/sv.json
index f44fa205..d0ce5555 100644
--- a/apps/desktop-ui/messages/sv.json
+++ b/apps/desktop-ui/messages/sv.json
@@ -195,6 +195,8 @@
       "title": "Utseende",
       "description": "Anpassa hur applikationen ser ut på din enhet.",
       "themePreference": "Temainställning",
+      "accentColor": "Accentfärg",
+      "customColor": "Anpassad färg",
       "themes": {
         "light": "Ljust",
         "dark": "Mörkt",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "Om",
+      "running": "Kör MyDevTools",
+      "runningVersion": "Kör MyDevTools v{version}",
+      "checkButton": "Sök efter uppdateringar",
+      "checking": "Söker…",
+      "dialogTitle": "Uppdateringar",
+      "dialogDescription": "MyDevTools uppdaterar sig själv på plats — ingen ominstallation, och dina offlinedata berörs aldrig.",
+      "onVersion": "Du använder version {version}.",
+      "available": "Version {version} är tillgänglig.",
+      "install": "Ladda ner och installera",
+      "upToDate": "Du är uppdaterad.",
+      "checkError": "Kunde inte söka efter uppdateringar. Är du online?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "Alla",
       "total": "Totalt",
       "allProjects": "Alla projekt",
+      "projectsHeading": "Projekt",
       "export": "Exportera",
       "kanban": "Kanban",
       "list": "Lista",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "Tryck på +-knappen för att lägga till ditt första lösenord",
       "emptyHintDesktop": "Du har inte lagrat några lösenord ännu. Klicka på knappen \"Lägg till lösenord\" ovan för att komma igång.",
       "addPassword": "Lägg till lösenord",
+      "title": "Lösenord",
+      "filters": {
+        "heading": "Valvets status",
+        "all": "Alla lösenord",
+        "weak": "Svaga",
+        "reused": "Återanvända",
+        "noUrl": "Ingen URL",
+        "tagsHeading": "Taggar",
+        "allTags": "Alla taggar"
+      },
       "searchPlaceholderMobile": "Sök i ditt valv...",
       "searchPlaceholderDesktop": "Sök i valvet...",
       "importExport": "Importera / exportera",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Skapa en uppsättning för varje projekt och miljö (t.ex. produktions-API-nycklar). Allt krypteras i webbläsaren före uppladdning.",
       "searchPlaceholder": "Sök projekt, miljö, taggar, anteckningar…",
       "tagFilterPlaceholder": "Filtrera på tagg",
+      "allProjects": "Alla projekt",
+      "projectsHeading": "Projekt",
       "variableCount": "{count, plural, one {# variabel} other {# variabler}}",
       "updatedAgo": "Uppdaterad {time}",
       "copyDotEnv": "Kopiera .env",
@@ -3870,6 +3899,9 @@
     "copyHtml": "Kopiera HTML",
     "copyMarkdown": "Kopiera Markdown",
     "exportHtml": "Exportera HTML",
+    "fileNameLabel": "Filnamn",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "Sparade {name}",
     "copied": "Kopierat",
     "charCount": "{count, plural, one {# tecken} other {# tecken}}",
     "emptyHint": "Börja skriva Markdown för att se live-förhandsgranskning och HTML-utdata.",
@@ -5106,6 +5138,10 @@
   "ToolPageHeader": {
     "offline": "100 % offline"
   },
+  "ToolSidebar": {
+    "show": "Visa sidopanel",
+    "hide": "Dölj sidopanel"
+  },
   "DesktopUpdate": {
     "title": "Uppdaterar MyDevTools",
     "downloading": "Laddar ner uppdatering…",
diff --git a/apps/desktop-ui/messages/tr.json b/apps/desktop-ui/messages/tr.json
index 796be883..4b580bdf 100644
--- a/apps/desktop-ui/messages/tr.json
+++ b/apps/desktop-ui/messages/tr.json
@@ -195,6 +195,8 @@
       "title": "Görünüm",
       "description": "Uygulamanın cihazınızda nasıl göründüğünü özelleştirin.",
       "themePreference": "Tema Tercihi",
+      "accentColor": "Vurgu rengi",
+      "customColor": "Özel renk",
       "themes": {
         "light": "Açık",
         "dark": "Koyu",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "Hakkında",
+      "running": "MyDevTools çalışıyor",
+      "runningVersion": "MyDevTools v{version} çalışıyor",
+      "checkButton": "Güncellemeleri denetle",
+      "checking": "Denetleniyor…",
+      "dialogTitle": "Güncellemeler",
+      "dialogDescription": "MyDevTools kendini yerinde günceller — yeniden kurulum gerekmez ve çevrimdışı verilerinize asla dokunulmaz.",
+      "onVersion": "{version} sürümünü kullanıyorsunuz.",
+      "available": "{version} sürümü kullanılabilir.",
+      "install": "İndir ve kur",
+      "upToDate": "En son sürümü kullanıyorsunuz.",
+      "checkError": "Güncellemeler denetlenemedi. Çevrimiçi misiniz?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "Tümü",
       "total": "Toplam",
       "allProjects": "Tüm Projeler",
+      "projectsHeading": "Projeler",
       "export": "Dışa Aktar",
       "kanban": "Kanban",
       "list": "Liste",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "İlk şifrenizi eklemek için + düğmesine dokunun",
       "emptyHintDesktop": "Henüz kayıtlı şifreniz yok. Başlamak için yukarıdaki \"Şifre ekle\" düğmesine tıklayın.",
       "addPassword": "Şifre ekle",
+      "title": "Parolalar",
+      "filters": {
+        "heading": "Kasa durumu",
+        "all": "Tüm parolalar",
+        "weak": "Zayıf",
+        "reused": "Tekrar kullanılan",
+        "noUrl": "URL yok",
+        "tagsHeading": "Etiketler",
+        "allTags": "Tüm etiketler"
+      },
       "searchPlaceholderMobile": "Kasanızda arayın...",
       "searchPlaceholderDesktop": "Kasada ara...",
       "importExport": "İçe / dışa aktar",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Her proje ve ortam için bir küme oluşturun (ör. üretim API anahtarları). Yüklemeden önce her şey tarayıcınızda şifrelenir.",
       "searchPlaceholder": "Proje, ortam, etiket, not ara…",
       "tagFilterPlaceholder": "Etikete göre filtrele",
+      "allProjects": "Tüm projeler",
+      "projectsHeading": "Projeler",
       "variableCount": "{count, plural, one {# değişken} other {# değişken}}",
       "updatedAgo": "Güncellendi {time}",
       "copyDotEnv": ".env kopyala",
@@ -3870,6 +3899,9 @@
     "copyHtml": "HTML'yi Kopyala",
     "copyMarkdown": "Markdown'ı Kopyala",
     "exportHtml": "HTML'yi Dışa Aktar",
+    "fileNameLabel": "Dosya adı",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "{name} kaydedildi",
     "copied": "Kopyalandı",
     "charCount": "{count, plural, one {# karakter} other {# karakter}}",
     "emptyHint": "Canlı önizleme ve HTML çıktısını görmek için Markdown yazmaya başlayın.",
@@ -5106,6 +5138,10 @@
   "ToolPageHeader": {
     "offline": "%100 çevrimdışı"
   },
+  "ToolSidebar": {
+    "show": "Kenar çubuğunu göster",
+    "hide": "Kenar çubuğunu gizle"
+  },
   "DesktopUpdate": {
     "title": "MyDevTools güncelleniyor",
     "downloading": "Güncelleme indiriliyor…",
diff --git a/apps/desktop-ui/messages/uk.json b/apps/desktop-ui/messages/uk.json
index ec3ee262..40c7e97e 100644
--- a/apps/desktop-ui/messages/uk.json
+++ b/apps/desktop-ui/messages/uk.json
@@ -195,6 +195,8 @@
       "title": "Зовнішній вигляд",
       "description": "Налаштуйте вигляд програми на вашому пристрої.",
       "themePreference": "Вибір теми",
+      "accentColor": "Акцентний колір",
+      "customColor": "Власний колір",
       "themes": {
         "light": "Світла",
         "dark": "Темна",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "Про програму",
+      "running": "MyDevTools запущено",
+      "runningVersion": "MyDevTools v{version} запущено",
+      "checkButton": "Перевірити оновлення",
+      "checking": "Перевірка…",
+      "dialogTitle": "Оновлення",
+      "dialogDescription": "MyDevTools оновлюється на місці — без перевстановлення, і ваші офлайн-дані ніколи не змінюються.",
+      "onVersion": "У вас версія {version}.",
+      "available": "Доступна версія {version}.",
+      "install": "Завантажити й встановити",
+      "upToDate": "У вас найновіша версія.",
+      "checkError": "Не вдалося перевірити оновлення. Ви онлайн?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "Усі",
       "total": "Всього",
       "allProjects": "Усі проєкти",
+      "projectsHeading": "Проєкти",
       "export": "Експорт",
       "kanban": "Канбан",
       "list": "Список",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "Натисніть кнопку +, щоб додати перший пароль",
       "emptyHintDesktop": "Ви ще не зберегли жодного паролю. Натисніть кнопку «Додати пароль» вище, щоб почати.",
       "addPassword": "Додати пароль",
+      "title": "Паролі",
+      "filters": {
+        "heading": "Стан сховища",
+        "all": "Усі паролі",
+        "weak": "Слабкі",
+        "reused": "Повторювані",
+        "noUrl": "Без URL",
+        "tagsHeading": "Теги",
+        "allTags": "Усі теги"
+      },
       "searchPlaceholderMobile": "Пошук у сховищі...",
       "searchPlaceholderDesktop": "Пошук у сховищі...",
       "importExport": "Імпорт / експорт",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Створіть набір для кожного проєкту й середовища (наприклад, ключі API продакшену). Усе шифрується в браузері перед завантаженням.",
       "searchPlaceholder": "Пошук за проєктом, середовищем, тегами, нотатками…",
       "tagFilterPlaceholder": "Фільтр за тегом",
+      "allProjects": "Усі проєкти",
+      "projectsHeading": "Проєкти",
       "variableCount": "{count, plural, one {# змінна} few {# змінні} other {# змінних}}",
       "updatedAgo": "Оновлено {time}",
       "copyDotEnv": "Копіювати .env",
@@ -3870,6 +3899,9 @@
     "copyHtml": "Копіювати HTML",
     "copyMarkdown": "Копіювати Markdown",
     "exportHtml": "Експортувати HTML",
+    "fileNameLabel": "Назва файлу",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "Збережено: {name}",
     "copied": "Скопійовано",
     "charCount": "{count, plural, one {# символ} few {# символи} other {# символів}}",
     "emptyHint": "Почніть вводити Markdown, щоб побачити попередній перегляд і HTML вивід.",
@@ -5106,6 +5138,10 @@
   "ToolPageHeader": {
     "offline": "100% офлайн"
   },
+  "ToolSidebar": {
+    "show": "Показати бічну панель",
+    "hide": "Сховати бічну панель"
+  },
   "DesktopUpdate": {
     "title": "Оновлення MyDevTools",
     "downloading": "Завантаження оновлення…",
diff --git a/apps/desktop-ui/messages/vi.json b/apps/desktop-ui/messages/vi.json
index e1f27695..25a6eece 100644
--- a/apps/desktop-ui/messages/vi.json
+++ b/apps/desktop-ui/messages/vi.json
@@ -195,6 +195,8 @@
       "title": "Giao diện",
       "description": "Tùy chỉnh giao diện ứng dụng trên thiết bị của bạn.",
       "themePreference": "Tùy chọn giao diện",
+      "accentColor": "Màu nhấn",
+      "customColor": "Màu tùy chỉnh",
       "themes": {
         "light": "Sáng",
         "dark": "Tối",
@@ -257,6 +259,20 @@
         "tr": "Türkçe",
         "uk": "Українська"
       }
+    },
+    "about": {
+      "title": "Giới thiệu",
+      "running": "Đang chạy MyDevTools",
+      "runningVersion": "Đang chạy MyDevTools v{version}",
+      "checkButton": "Kiểm tra bản cập nhật",
+      "checking": "Đang kiểm tra…",
+      "dialogTitle": "Bản cập nhật",
+      "dialogDescription": "MyDevTools tự cập nhật ngay tại chỗ — không cần cài lại và dữ liệu ngoại tuyến của bạn không bao giờ bị ảnh hưởng.",
+      "onVersion": "Bạn đang dùng phiên bản {version}.",
+      "available": "Đã có phiên bản {version}.",
+      "install": "Tải xuống và cài đặt",
+      "upToDate": "Bạn đang dùng bản mới nhất.",
+      "checkError": "Không thể kiểm tra bản cập nhật. Bạn có đang trực tuyến không?"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "Tất cả",
       "total": "Tổng",
       "allProjects": "Tất cả dự án",
+      "projectsHeading": "Dự án",
       "export": "Xuất",
       "kanban": "Kanban",
       "list": "Danh sách",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "Nhấn nút + để thêm mật khẩu đầu tiên",
       "emptyHintDesktop": "Bạn chưa lưu mật khẩu nào. Nhấn nút \"Thêm mật khẩu\" ở trên để bắt đầu.",
       "addPassword": "Thêm mật khẩu",
+      "title": "Mật khẩu",
+      "filters": {
+        "heading": "Tình trạng kho",
+        "all": "Tất cả mật khẩu",
+        "weak": "Yếu",
+        "reused": "Dùng lại",
+        "noUrl": "Không có URL",
+        "tagsHeading": "Thẻ",
+        "allTags": "Tất cả thẻ"
+      },
       "searchPlaceholderMobile": "Tìm trong kho...",
       "searchPlaceholderDesktop": "Tìm trong kho...",
       "importExport": "Nhập / xuất",
@@ -1161,6 +1188,8 @@
       "emptyHint": "Tạo một bộ cho mỗi dự án và môi trường (ví dụ khóa API production). Mọi thứ được mã hóa trong trình duyệt trước khi tải lên.",
       "searchPlaceholder": "Tìm dự án, môi trường, thẻ, ghi chú…",
       "tagFilterPlaceholder": "Lọc theo thẻ",
+      "allProjects": "Tất cả dự án",
+      "projectsHeading": "Dự án",
       "variableCount": "{count, plural, other {# biến}}",
       "updatedAgo": "Cập nhật {time}",
       "copyDotEnv": "Sao chép .env",
@@ -3859,6 +3888,9 @@
     "copyHtml": "Sao chép HTML",
     "copyMarkdown": "Sao chép Markdown",
     "exportHtml": "Xuất HTML",
+    "fileNameLabel": "Tên tệp",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "Đã lưu {name}",
     "copied": "Đã sao chép",
     "charCount": "{count, plural, other {# ký tự}}",
     "emptyHint": "Bắt đầu nhập Markdown để xem bản xem trước trực tiếp và đầu ra HTML.",
@@ -5095,6 +5127,10 @@
   "ToolPageHeader": {
     "offline": "100% ngoại tuyến"
   },
+  "ToolSidebar": {
+    "show": "Hiện thanh bên",
+    "hide": "Ẩn thanh bên"
+  },
   "DesktopUpdate": {
     "title": "Đang cập nhật MyDevTools",
     "downloading": "Đang tải bản cập nhật…",
diff --git a/apps/desktop-ui/messages/zh.json b/apps/desktop-ui/messages/zh.json
index 3e9414ec..6b7fbaa2 100644
--- a/apps/desktop-ui/messages/zh.json
+++ b/apps/desktop-ui/messages/zh.json
@@ -195,6 +195,8 @@
       "title": "外观",
       "description": "自定义应用在你设备上的显示方式。",
       "themePreference": "主题偏好",
+      "accentColor": "强调色",
+      "customColor": "自定义颜色",
       "themes": {
         "light": "浅色",
         "dark": "深色",
@@ -257,6 +259,20 @@
         "sv": "Svenska",
         "tr": "Türkçe"
       }
+    },
+    "about": {
+      "title": "关于",
+      "running": "正在运行 MyDevTools",
+      "runningVersion": "正在运行 MyDevTools v{version}",
+      "checkButton": "检查更新",
+      "checking": "检查中…",
+      "dialogTitle": "更新",
+      "dialogDescription": "MyDevTools 会就地自我更新——无需重新安装，且绝不会触碰你的离线数据。",
+      "onVersion": "你当前使用的版本是 {version}。",
+      "available": "版本 {version} 可用。",
+      "install": "下载并安装",
+      "upToDate": "已是最新版本。",
+      "checkError": "无法检查更新。你是否已联网？"
     }
   },
   "Dashboard": {
@@ -709,6 +725,7 @@
       "all": "全部",
       "total": "总计",
       "allProjects": "所有项目",
+      "projectsHeading": "项目",
       "export": "导出",
       "kanban": "看板",
       "list": "列表",
@@ -966,6 +983,16 @@
       "emptyHintMobile": "点击 + 添加第一条密码",
       "emptyHintDesktop": "尚未保存任何密码。点击上方「添加密码」开始。",
       "addPassword": "添加密码",
+      "title": "密码",
+      "filters": {
+        "heading": "保险库健康度",
+        "all": "所有密码",
+        "weak": "弱密码",
+        "reused": "重复使用",
+        "noUrl": "无网址",
+        "tagsHeading": "标签",
+        "allTags": "所有标签"
+      },
       "searchPlaceholderMobile": "搜索保险库…",
       "searchPlaceholderDesktop": "搜索保险库…",
       "importExport": "导入 / 导出",
@@ -1161,6 +1188,8 @@
       "emptyHint": "为每个项目与环境创建集合（例如生产环境 API 密钥）。上传前均在浏览器中加密。",
       "searchPlaceholder": "搜索项目、环境、标签、备注…",
       "tagFilterPlaceholder": "按标签筛选",
+      "allProjects": "所有项目",
+      "projectsHeading": "项目",
       "variableCount": "{count, plural, other {# 个变量}}",
       "updatedAgo": "更新于 {time}",
       "copyDotEnv": "复制 .env",
@@ -3859,6 +3888,9 @@
     "copyHtml": "复制 HTML",
     "copyMarkdown": "复制 Markdown",
     "exportHtml": "导出 HTML",
+    "fileNameLabel": "文件名",
+    "fileNamePlaceholder": "export",
+    "exportSuccess": "已保存 {name}",
     "copied": "已复制",
     "charCount": "{count, plural, other {# 个字符}}",
     "emptyHint": "开始输入 Markdown 以查看实时预览和 HTML 输出。",
@@ -5095,6 +5127,10 @@
   "ToolPageHeader": {
     "offline": "100% 离线"
   },
+  "ToolSidebar": {
+    "show": "显示侧边栏",
+    "hide": "隐藏侧边栏"
+  },
   "DesktopUpdate": {
     "title": "正在更新 MyDevTools",
     "downloading": "正在下载更新…",
diff --git a/apps/desktop-ui/scripts/build-tauri.mjs b/apps/desktop-ui/scripts/build-tauri.mjs
index 9e991686..29b3534e 100644
--- a/apps/desktop-ui/scripts/build-tauri.mjs
+++ b/apps/desktop-ui/scripts/build-tauri.mjs
@@ -65,5 +65,7 @@ if (result.status !== 0) {
 }
 
 const outDir = path.join(uiRoot, "out");
+// outDir is derived from this script's own location and quoted by JSON.stringify.
+// threatcrush-disable-next-line js-shell-exec-interpolation
 const pageCount = execSync(`find ${JSON.stringify(outDir)} -name '*.html' | wc -l`).toString().trim();
 console.log(`build-tauri: OK — ${pageCount} HTML pages in apps/desktop-ui/out/`);
diff --git a/apps/desktop-ui/src/app/app/api-keys/page.tsx b/apps/desktop-ui/src/app/app/api-keys/page.tsx
index 2e644108..a4d39fae 100644
--- a/apps/desktop-ui/src/app/app/api-keys/page.tsx
+++ b/apps/desktop-ui/src/app/app/api-keys/page.tsx
@@ -4,7 +4,6 @@ import { useEffect, useRef } from "react"
 import { AddApiKeyDialog } from "@/components/api-key-vault/add-api-key-dialog"
 import { ApiKeyList } from "@/components/api-key-vault/api-key-list"
 import { useApiKeyVaultStore, type ApiKeyEntry } from "@/store/api-key-vault-store"
-import { ToolHeader } from "@/components/tools/tool-header"
 import { useVaultGuard } from "@/hooks/use-vault-guard"
 import { VaultLockedPlaceholder } from "@/components/vault-locked-placeholder"
 import { VaultRestoringSkeleton } from "@/components/vault-restoring-skeleton"
@@ -104,25 +103,11 @@ export default function ApiKeyVaultPage() {
 
     if (!user) return null
 
+    // Tool identity and the add action live in the ToolSidebarLayout header
+    // that ApiKeyList renders — no separate page header row.
     return (
-        <div
-            className={
-                isMobile
-                    ? "h-full bg-background flex flex-col min-h-0"
-                    : "h-full flex flex-col container mx-auto px-4 md:px-6 lg:px-8 min-h-0"
-            }
-        >
-            <ToolHeader
-                title="API Keys"
-                description="AES-256-GCM encrypted and stored on your device."
-                toolId="/app/api-keys"
-                className="shrink-0 px-0 sm:px-0"
-            />
-
-            <div className="flex-1 min-h-0 flex flex-col">
-                <ApiKeyList />
-            </div>
-
+        <div className="h-full min-h-0 bg-background">
+            <ApiKeyList />
             {isMobile && <AddApiKeyDialog />}
         </div>
     )
diff --git a/apps/desktop-ui/src/app/app/data-explorer/page.tsx b/apps/desktop-ui/src/app/app/data-explorer/page.tsx
index 0ff02bd3..9da9816e 100644
--- a/apps/desktop-ui/src/app/app/data-explorer/page.tsx
+++ b/apps/desktop-ui/src/app/app/data-explorer/page.tsx
@@ -3,14 +3,12 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslations } from "next-intl";
 import { toast } from "sonner";
-import { IconAlertTriangle, IconMenu2 } from "@tabler/icons-react";
+import { IconAlertTriangle, IconDatabase, IconPlus } from "@tabler/icons-react";
 import { Button } from "@/components/ui/button";
-import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import useAuth from "@/utils/useAuth";
 import { useMasterKeyStore } from "@/store/master-key-store";
 import { useVaultGuard } from "@/hooks/use-vault-guard";
-import { useMediaQuery } from "@/hooks/use-media-query";
+import { ToolSidebarLayout } from "@/components/tools/tool-sidebar";
 import { VaultLockedPlaceholder } from "@/components/vault-locked-placeholder";
 import { VaultRestoringSkeleton } from "@/components/vault-restoring-skeleton";
 import { UnifiedTabBar } from "@/components/data-explorer/unified-tab-bar";
@@ -31,12 +29,10 @@ export default function DataExplorerPage() {
     const { user } = useAuth();
     const { encryptionKey } = useMasterKeyStore();
     const { isUnlocked, isRestoring } = useVaultGuard();
-    const isWide = useMediaQuery("(min-width: 768px)");
 
     const [connections, setConnections] = useState<UnifiedConnection[]>([]);
     const [tabs, setTabs] = useState<UnifiedTab[]>([]);
     const [activeTabId, setActiveTabId] = useState<string | null>(null);
-    const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
     const [isInitialized, setIsInitialized] = useState(false);
     const [connectionDialogOpen, setConnectionDialogOpen] = useState(false);
     const [editingConnection, setEditingConnection] = useState<UnifiedConnection | null>(null);
@@ -108,7 +104,6 @@ export default function DataExplorerPage() {
     const openTab = useCallback(
         (connection: UnifiedConnection, req: OpenTabRequest) => {
             const id = `${connection.id}:${req.key}`;
-            setMobileSidebarOpen(false);
             setTabs((prev) => {
                 if (prev.some((tab) => tab.id === id)) return prev;
                 return [
@@ -253,35 +248,24 @@ export default function DataExplorerPage() {
     })();
 
     return (
-        <div className="flex h-full min-h-0">
-            {isWide ? (
-                <div className="w-64 shrink-0">{sidebar}</div>
-            ) : (
-                <Sheet open={mobileSidebarOpen} onOpenChange={setMobileSidebarOpen}>
-                    <SheetContent side="left" className="w-72 p-0">
-                        <VisuallyHidden>
-                            <SheetTitle>{t("title")}</SheetTitle>
-                        </VisuallyHidden>
-                        {sidebar}
-                    </SheetContent>
-                </Sheet>
-            )}
+        <ToolSidebarLayout
+            toolId="data-explorer"
+            icon={IconDatabase}
+            title={t("title")}
+            actions={
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8"
+                    aria-label={t("addConnection")}
+                    onClick={handleAddConnection}
+                >
+                    <IconPlus className="size-4" />
+                </Button>
+            }
+            sidebar={sidebar}
+        >
             <div className="flex min-w-0 flex-1 flex-col">
-                {/* Narrow viewports keep the sidebar in the Sheet; without this
-                    trigger there is no way to add a connection or open a tab. */}
-                {!isWide && (
-                    <div className="flex shrink-0 items-center border-b px-2 py-1.5">
-                        <Button
-                            variant="outline"
-                            size="icon"
-                            className="size-8"
-                            onClick={() => setMobileSidebarOpen(true)}
-                            aria-label={t("openSidebar")}
-                        >
-                            <IconMenu2 className="size-4" />
-                        </Button>
-                    </div>
-                )}
                 <UnifiedTabBar
                     tabs={tabs}
                     connections={connections}
@@ -308,6 +292,6 @@ export default function DataExplorerPage() {
                 connectionsLoaded={connectionsLoaded}
                 onImported={() => void reloadConnections()}
             />
-        </div>
+        </ToolSidebarLayout>
     );
 }
diff --git a/apps/desktop-ui/src/app/app/environment-manager/page.tsx b/apps/desktop-ui/src/app/app/environment-manager/page.tsx
index 450d7fa4..3d8a95ad 100644
--- a/apps/desktop-ui/src/app/app/environment-manager/page.tsx
+++ b/apps/desktop-ui/src/app/app/environment-manager/page.tsx
@@ -3,7 +3,6 @@
 import { useEffect, useRef } from "react"
 import { AddEnvironmentSetDialog } from "@/components/environment-manager/add-environment-set-dialog"
 import { EnvironmentSetList } from "@/components/environment-manager/environment-set-list"
-import { ToolHeader } from "@/components/tools/tool-header"
 import { useEnvironmentManagerStore, type EnvSetEntry } from "@/store/environment-manager-store"
 import { useVaultGuard } from "@/hooks/use-vault-guard"
 import { VaultLockedPlaceholder } from "@/components/vault-locked-placeholder"
@@ -110,22 +109,11 @@ export default function EnvironmentManagerPage() {
 
     if (!user) return null
 
+    // Tool identity lives in the ToolSidebarLayout header EnvironmentSetList
+    // renders — no separate page header row.
     return (
-        <div
-            className={
-                isMobile
-                    ? "h-full bg-background flex flex-col min-h-0"
-                    : "h-full flex flex-col container mx-auto px-4 md:px-6 lg:px-8 min-h-0"
-            }
-        >
-            {!isMobile && (
-                <ToolHeader title={t("title")} toolId="/app/environment-manager" className="shrink-0 px-0 sm:px-0" />
-            )}
-
-            <div className="flex-1 min-h-0 flex flex-col">
-                <EnvironmentSetList />
-            </div>
-
+        <div className="h-full min-h-0 bg-background">
+            <EnvironmentSetList />
             {isMobile && <AddEnvironmentSetDialog />}
         </div>
     )
diff --git a/apps/desktop-ui/src/app/app/layout.tsx b/apps/desktop-ui/src/app/app/layout.tsx
index 6d19ddd7..12b60cbd 100644
--- a/apps/desktop-ui/src/app/app/layout.tsx
+++ b/apps/desktop-ui/src/app/app/layout.tsx
@@ -1,26 +1,13 @@
 import { Suspense } from "react";
-import { cookies } from "next/headers";
-import { SidebarProvider } from "@/components/ui/sidebar";
 import { AppContent } from "./app-content";
 
-// Static export (Tauri desktop) cannot use request APIs; fall back to defaults there.
-const isTauriBuild = process.env.TAURI_BUILD === "1";
-
-export default async function Layout({ children }: { children: React.ReactNode }) {
-  let defaultOpen = true;
-  if (!isTauriBuild) {
-    const cookieStore = await cookies();
-    defaultOpen = cookieStore.get("sidebar:state")?.value !== "false";
-  }
-
+export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <SidebarProvider defaultOpen={defaultOpen}>
-      {/* Suspense boundary so tool pages that read useSearchParams() (base64,
-          jwt-decoder, hash-generator, url-encode, json-formatter, qr-code) pass
-          the static export prerender instead of erroring on a CSR bailout. */}
-      <AppContent>
-        <Suspense fallback={null}>{children}</Suspense>
-      </AppContent>
-    </SidebarProvider>
+    // Suspense boundary so tool pages that read useSearchParams() (base64,
+    // jwt-decoder, hash-generator, url-encode, json-formatter, qr-code) pass
+    // the static export prerender instead of erroring on a CSR bailout.
+    <AppContent>
+      <Suspense fallback={null}>{children}</Suspense>
+    </AppContent>
   );
 }
diff --git a/apps/desktop-ui/src/app/app/notes/context/NotesContext.tsx b/apps/desktop-ui/src/app/app/notes/context/NotesContext.tsx
index c80c09ec..5fbf1dae 100644
--- a/apps/desktop-ui/src/app/app/notes/context/NotesContext.tsx
+++ b/apps/desktop-ui/src/app/app/notes/context/NotesContext.tsx
@@ -37,8 +37,6 @@ interface NotesUI {
     setActiveNoteId: (id: string | null) => void;
     focusMode: boolean;
     setFocusMode: (v: boolean) => void;
-    sidebarOpen: boolean;
-    setSidebarOpen: (v: boolean) => void;
 }
 
 interface NotesActions {
@@ -65,7 +63,6 @@ export function NotesProvider({ children }: { children: React.ReactNode }) {
     const [isContentLoading, setIsContentLoading] = useState(false);
     const [activeNoteId, setActiveNoteId] = useState<string | null>(null);
     const [focusMode, setFocusMode] = useState(false);
-    const [sidebarOpen, setSidebarOpen] = useState(true);
     // Decrypted bodies, tagged with the key they were decrypted under: a vault
     // lock/unlock invalidates the whole map on read, with no reset effect.
     const [contentStore, setContentStore] = useState<ContentStore>({ key: null, map: EMPTY_CONTENT });
@@ -81,6 +78,9 @@ export function NotesProvider({ children }: { children: React.ReactNode }) {
     useEffect(() => { warmedKeyRef.current = warmedKey; }, [warmedKey]);
     const warmInFlight = useRef<Promise<void> | null>(null);
     const contentLoadedIds = useRef<Set<string>>(new Set());
+    // Cipher key the loaded bodies were decrypted under — a mismatch invalidates
+    // them (see the body-loading effect below).
+    const loadedUnderKey = useRef<CryptoKey | null>(null);
     // Notes whose content is an envelope we couldn't decrypt (vault locked). Their
     // in-state `content` is a null placeholder — writing it back would clobber the
     // real body, so content writes are blocked until unlock.
@@ -156,7 +156,19 @@ export function NotesProvider({ children }: { children: React.ReactNode }) {
         setNotes([...allNotes].sort((a, b) => a.createdAt.localeCompare(b.createdAt)));
     }, [apiRequest]);
 
+    // Body of the active note. Runs on cipherKey change too: a note opened while
+    // the vault was locked holds a null placeholder, and the plain-text cache is
+    // module state — both must be invalidated and refetched under the new key, or
+    // the editor shows an empty document and the next keystroke saves that over
+    // the real body. (Invalidation lives here, not in its own [cipherKey] effect,
+    // so it can't run *after* this one and leave the refetch skipped.)
     useEffect(() => {
+        if (loadedUnderKey.current !== cipherKey) {
+            loadedUnderKey.current = cipherKey;
+            contentLoadedIds.current.clear();
+            lockedIds.current.clear();
+            clearPlainTextCache();
+        }
         if (!activeNoteId || contentLoadedIds.current.has(activeNoteId)) return;
         let cancelled = false;
         setIsContentLoading(true);
@@ -175,7 +187,7 @@ export function NotesProvider({ children }: { children: React.ReactNode }) {
             .catch(() => { /* note may have been deleted */ })
             .finally(() => { if (!cancelled) setIsContentLoading(false); });
         return () => { cancelled = true; };
-    }, [activeNoteId, apiRequest, decryptBody, setContent]);
+    }, [activeNoteId, cipherKey, apiRequest, decryptBody, setContent]);
 
     // Flush parked updatedAt bumps from body saves when the user leaves a note —
     // one re-render per switch instead of one per autosave.
@@ -203,16 +215,6 @@ export function NotesProvider({ children }: { children: React.ReactNode }) {
         // on the vault key. Bodies are handled by the effect below.
     }, [refreshNotes]);
 
-    // Vault lock/unlock: bodies and the search index invalidate themselves (both
-    // are tagged with their key), but the plain-text cache is module state —
-    // clear it so decrypted text doesn't outlive the unlocked session. The
-    // active note then refetches under the new key state. No mass refetch.
-    useEffect(() => {
-        contentLoadedIds.current.clear();
-        lockedIds.current.clear();
-        clearPlainTextCache();
-    }, [cipherKey]);
-
     /**
      * Decrypt every note body once into the plain-text search cache. Only the
      * extracted text is retained — raw bodies are dropped — so memory doesn't
@@ -402,8 +404,8 @@ export function NotesProvider({ children }: { children: React.ReactNode }) {
     );
 
     const uiValue = useMemo<NotesUI>(
-        () => ({ activeNoteId, setActiveNoteId, focusMode, setFocusMode, sidebarOpen, setSidebarOpen }),
-        [activeNoteId, focusMode, sidebarOpen]
+        () => ({ activeNoteId, setActiveNoteId, focusMode, setFocusMode }),
+        [activeNoteId, focusMode]
     );
 
     const actionsValue = useMemo<NotesActions>(
diff --git a/apps/desktop-ui/src/app/app/notes/notes-client-layout.tsx b/apps/desktop-ui/src/app/app/notes/notes-client-layout.tsx
index 615ce2c7..94cc182a 100644
--- a/apps/desktop-ui/src/app/app/notes/notes-client-layout.tsx
+++ b/apps/desktop-ui/src/app/app/notes/notes-client-layout.tsx
@@ -2,69 +2,33 @@
 
 import { NotesProvider, useNotesUI } from "./context/NotesContext";
 import NotesSidebar from "@/components/notes/NotesSidebar";
-import { useMediaQuery } from "@/hooks/use-media-query";
-import { Sheet, SheetContent, SheetTrigger, SheetHeader, SheetTitle } from "@/components/ui/sheet";
-import { Menu, PanelLeftOpen, NotebookPen } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { ToolSidebarLayout } from "@/components/tools/tool-sidebar";
+import { NotebookPen } from "lucide-react";
 import { useTranslations } from "next-intl";
 
 function NotesLayout({ children }: { children: React.ReactNode }) {
-    const t = useTranslations("Notes.layout");
     const tSidebar = useTranslations("Notes.sidebar");
-    const isDesktop = useMediaQuery("(min-width: 768px)");
-    const { focusMode, sidebarOpen, setSidebarOpen } = useNotesUI();
-    const sidebarCollapsed = isDesktop && !focusMode && !sidebarOpen;
+    const { focusMode } = useNotesUI();
 
-    return (
-        <div className="flex h-full min-h-0 w-full overflow-hidden bg-background mobile-nav-offset">
-            {isDesktop && !focusMode && sidebarOpen && <NotesSidebar />}
-
-            <main className={`flex-1 h-full min-h-0 overflow-hidden relative flex flex-col ${sidebarCollapsed ? "pt-12" : "pt-12 md:pt-0"}`}>
-                {sidebarCollapsed && (
-                    <div className="absolute top-3 left-3 z-50 flex items-center gap-2">
-                        <Button
-                            variant="outline"
-                            size="icon"
-                            className="h-9 w-9 rounded-full shadow-sm bg-background/80 backdrop-blur cursor-pointer"
-                            onClick={() => setSidebarOpen(true)}
-                            aria-label={t("showSidebarAria")}
-                            title={t("showSidebarAria")}
-                        >
-                            <PanelLeftOpen className="h-5 w-5" />
-                        </Button>
-                        <div className="flex items-center gap-2 font-semibold text-sm">
-                            <span className="h-6 w-6 rounded-md bg-primary/10 flex items-center justify-center text-primary">
-                                <NotebookPen className="h-3.5 w-3.5" />
-                            </span>
-                            {tSidebar("title")}
-                        </div>
-                    </div>
-                )}
-                {!isDesktop && !focusMode && (
-                    <div className="absolute top-3 left-3 z-50">
-                        <Sheet>
-                            <SheetTrigger asChild>
-                                <Button
-                                    variant="outline"
-                                    size="icon"
-                                    className="h-9 w-9 rounded-full shadow-sm bg-background/80 backdrop-blur cursor-pointer"
-                                    aria-label={t("openMenuAria")}
-                                >
-                                    <Menu className="h-5 w-5" />
-                                </Button>
-                            </SheetTrigger>
-                            <SheetContent side="left" className="p-0 w-72">
-                                <SheetHeader className="sr-only">
-                                    <SheetTitle>{t("mobileNavTitle")}</SheetTitle>
-                                </SheetHeader>
-                                <NotesSidebar />
-                            </SheetContent>
-                        </Sheet>
-                    </div>
-                )}
+    // Focus mode drops the panel entirely — no column, no re-open affordance.
+    if (focusMode) {
+        return (
+            <main className="relative flex h-full min-h-0 flex-1 flex-col overflow-hidden bg-background mobile-nav-offset">
                 {children}
             </main>
-        </div>
+        );
+    }
+
+    return (
+        <ToolSidebarLayout
+            toolId="notes"
+            icon={NotebookPen}
+            title={tSidebar("title")}
+            sidebar={<NotesSidebar />}
+            className="bg-background mobile-nav-offset"
+        >
+            {children}
+        </ToolSidebarLayout>
     );
 }
 
diff --git a/apps/desktop-ui/src/app/app/password-manager/page.tsx b/apps/desktop-ui/src/app/app/password-manager/page.tsx
index 7a34f0ff..fd29359a 100644
--- a/apps/desktop-ui/src/app/app/password-manager/page.tsx
+++ b/apps/desktop-ui/src/app/app/password-manager/page.tsx
@@ -20,9 +20,6 @@ import { fetchAllPages } from "@/lib/fetch-all-pages"
 import { EncryptedToolPlaceholder } from "@/components/encrypted-tool-placeholder"
 import { useActiveWorkspace } from "@/store/workspace-store"
 import { hasWorkspaceEncryption } from "@/lib/workspace-rbac"
-import { IconShieldLock } from "@tabler/icons-react"
-import { CATEGORY_ACCENT } from "@/components/dashboard/types"
-import { cn } from "@/lib/utils"
 
 const PASSWORDS_PAGE_SIZE = 500
 
@@ -122,34 +119,11 @@ export default function PasswordManagerPage() {
 
     if (!user) return null
 
+    // Tool identity and the add action live in the ToolSidebarLayout header
+    // PasswordList renders — no separate page header row.
     return (
-        <div
-            className={
-                isMobile
-                    ? "h-full bg-background"
-                    : "h-full flex flex-col container mx-auto px-4 md:px-6 lg:px-8"
-            }
-        >
-            {!isMobile && (
-                <div className="flex justify-between items-center py-6 shrink-0">
-                    <div className="flex items-center gap-3">
-                        <span
-                            className={cn(
-                                "flex h-11 w-11 shrink-0 items-center justify-center rounded-xl shadow-sm ring-1 ring-inset ring-border/60",
-                                CATEGORY_ACCENT.Security.bg,
-                                CATEGORY_ACCENT.Security.text,
-                            )}
-                        >
-                            <IconShieldLock className="h-[22px] w-[22px]" aria-hidden />
-                        </span>
-                        <h1 className="text-sm font-semibold tracking-tight">{t("title")}</h1>
-                    </div>
-                    <AddPasswordDialog />
-                </div>
-            )}
-
+        <div className="h-full min-h-0 bg-background">
             <PasswordList />
-
             {isMobile && <AddPasswordDialog />}
         </div>
     )
diff --git a/apps/desktop-ui/src/app/app/s3-drive/page.tsx b/apps/desktop-ui/src/app/app/s3-drive/page.tsx
index f41dca8f..1baab488 100644
--- a/apps/desktop-ui/src/app/app/s3-drive/page.tsx
+++ b/apps/desktop-ui/src/app/app/s3-drive/page.tsx
@@ -12,9 +12,9 @@ import { listConnections } from "@/lib/s3-drive-api"
 import { decryptData } from "@/lib/encryption"
 import { BucketSidebar } from "@/components/s3-drive/bucket-sidebar"
 import { FileBrowser } from "@/components/s3-drive/file-browser"
+import { ToolSidebarLayout } from "@/components/tools/tool-sidebar"
 import { IconBucket, IconCloud, IconArrowRight } from "@tabler/icons-react"
 import { Skeleton } from "@/components/ui/skeleton"
-import { cn } from "@/lib/utils"
 import { DesktopOnlineGate } from "@/components/desktop/desktop-online-gate"
 
 export default function S3DrivePage() {
@@ -67,7 +67,7 @@ function S3DriveInner() {
         return (
             <div className="flex h-full">
                 {/* Sidebar skeleton */}
-                <div className="w-56 border-r p-3 space-y-3 shrink-0 bg-sidebar">
+                <div className="w-64 border-r p-3 space-y-3 shrink-0 bg-muted/10">
                     <div className="flex items-center gap-2 mb-4">
                         <Skeleton className="size-7 rounded-lg" />
                         <Skeleton className="h-4 w-16" />
@@ -120,11 +120,12 @@ function S3DriveInner() {
     const activeConn = connections.find((c) => c.id === activeConnectionId) ?? null
 
     return (
-        <div className="flex h-full overflow-hidden">
-            <div className={cn("w-56 shrink-0 overflow-hidden flex flex-col")}>
-                <BucketSidebar encryptionKey={encryptionKey} />
-            </div>
-
+        <ToolSidebarLayout
+            toolId="s3-drive"
+            icon={IconBucket}
+            title="Buckets"
+            sidebar={<BucketSidebar encryptionKey={encryptionKey} />}
+        >
             <div className="flex-1 overflow-hidden flex flex-col">
                 {activeConn ? (
                     <FileBrowser
@@ -162,6 +163,6 @@ function S3DriveInner() {
                     </div>
                 )}
             </div>
-        </div>
+        </ToolSidebarLayout>
     )
 }
diff --git a/apps/desktop-ui/src/app/app/to-do/TaskContainer.tsx b/apps/desktop-ui/src/app/app/to-do/TaskContainer.tsx
index 99be9f73..8f5f43ee 100644
--- a/apps/desktop-ui/src/app/app/to-do/TaskContainer.tsx
+++ b/apps/desktop-ui/src/app/app/to-do/TaskContainer.tsx
@@ -19,6 +19,11 @@ import { useTaskContext } from "@/app/app/to-do/context/TaskContext";
 import { useWorkspaceMembers, memberLabel } from "@/app/app/to-do/hooks/useWorkspaceMembers";
 import { useProjectContext } from "@/app/app/to-do/context/ProjectContext";
 import { ListTodo, Circle, LayoutGrid, List, Search, X, Plus, Folder, Archive, ArchiveRestore, UserRound } from "lucide-react";
+import {
+  ToolSidebarFilterList,
+  ToolSidebarLayout,
+  type ToolSidebarFilterItem,
+} from "@/components/tools/tool-sidebar";
 import { Button } from "@/components/ui/button";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { STATUS_CONFIG } from "./config/constants";
@@ -35,7 +40,6 @@ import {
   DrawerClose,
   DrawerTrigger,
 } from "@/components/ui/drawer";
-import { SidebarTrigger } from "@/components/ui/sidebar";
 import { Badge } from "@/components/ui/badge";
 import {
   Select,
@@ -200,7 +204,25 @@ export const TaskContainer = () => {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [hasSearchFilter, isMobile]);
 
+  const projectFilters: ToolSidebarFilterItem[] = [
+    { id: "all", label: tFilters("allProjects") },
+    ...projects.map((project) => ({ id: project.id, label: project.name, dot: project.color })),
+  ];
+
   return (
+    <ToolSidebarLayout
+      toolId="to-do"
+      icon={Folder}
+      title={tPage("myTasksTitle")}
+      sidebar={
+        <ToolSidebarFilterList
+          items={projectFilters}
+          value={filterProject}
+          onChange={setFilterProject}
+          heading={tFilters("projectsHeading")}
+        />
+      }
+    >
     <div className="h-full min-h-0 w-full bg-background flex flex-col overflow-hidden relative mobile-nav-offset paper-grain">
       <div role="status" aria-live="polite" className="sr-only">
         {liveStatsMessage}
@@ -212,8 +234,6 @@ export const TaskContainer = () => {
           style={{ paddingTop: "calc(env(safe-area-inset-top, 0px) + 0.5rem)" }}
         >
           <div className="flex items-center gap-2 px-4 py-2">
-            <SidebarTrigger className="-ml-2 h-10 w-10 text-muted-foreground/80 hover:bg-transparent hover:text-foreground" />
-
             <div className="relative flex-1 h-10">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4.5 w-4.5 text-muted-foreground" />
               <Input
@@ -319,19 +339,10 @@ export const TaskContainer = () => {
           <Card className="border shadow-lg bg-card/50 backdrop-blur-sm">
             <CardHeader className="p-3 md:pb-3">
               <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-3">
-                <div className="flex items-center gap-2.5">
-                  <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
-                    <ListTodo className="h-3.5 w-3.5" />
-                  </span>
-                  <div>
-                    <h1 className="text-sm font-semibold tracking-tight text-foreground">
-                      {tPage("myTasksTitle")}
-                    </h1>
-                    <p className="font-meta text-[10px] uppercase tracking-wider text-muted-foreground mt-1 hidden sm:block">
-                      {tPage("statsLineDesktop", { total: allTaskStats.total, percent: completionRate })}
-                    </p>
-                  </div>
-                </div>
+                {/* Tool name + icon live in the ToolSidebarLayout panel header. */}
+                <p className="font-meta text-[10px] uppercase tracking-wider text-muted-foreground hidden sm:block">
+                  {tPage("statsLineDesktop", { total: allTaskStats.total, percent: completionRate })}
+                </p>
 
                 {/* Enhanced Stats with Progress Bars - Hidden on mobile to save space */}
                 <div className="hidden lg:flex items-center gap-2">
@@ -397,27 +408,7 @@ export const TaskContainer = () => {
                   )}
                 </div>
 
-                {/* Project Filter */}
-                <Select value={filterProject} onValueChange={setFilterProject}>
-                  <SelectTrigger className="w-[140px] h-9 text-xs">
-                    <div className="flex items-center gap-2 truncate">
-                      <Folder className="h-3.5 w-3.5 text-muted-foreground" />
-                      <SelectValue placeholder={tFilters("allProjects")} />
-                    </div>
-                  </SelectTrigger>
-                  <SelectContent align="end">
-                    <SelectItem value="all" className="text-xs">{tFilters("allProjects")}</SelectItem>
-                    {projects.length > 0 && <SelectSeparator />}
-                    {projects.map((project) => (
-                      <SelectItem key={project.id} value={project.id} className="text-xs">
-                        <div className="flex items-center gap-2">
-                          <div className={cn("w-2 h-2 rounded-full", project.color)} />
-                          {project.name}
-                        </div>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                {/* Project filter lives in the ToolSidebarLayout panel. */}
 
                 {/* Assignee Filter — only meaningful in a shared workspace */}
                 {isShared && (
@@ -739,5 +730,6 @@ export const TaskContainer = () => {
         </LazyBoundary>
       )}
     </div>
+    </ToolSidebarLayout>
   );
 };
diff --git a/apps/desktop-ui/src/app/app/to-do/utils/__tests__/statusOrder.test.ts b/apps/desktop-ui/src/app/app/to-do/utils/__tests__/statusOrder.test.ts
new file mode 100644
index 00000000..83e81bec
--- /dev/null
+++ b/apps/desktop-ui/src/app/app/to-do/utils/__tests__/statusOrder.test.ts
@@ -0,0 +1,51 @@
+import { insertOrder, needsRespread, ORDER_STEP } from "../statusOrder";
+
+describe("insertOrder", () => {
+  it("starts at 0 in an empty column", () => {
+    expect(insertOrder([], 0)).toBe(0);
+  });
+
+  it("appends a step past the last card", () => {
+    expect(insertOrder([0, 1000], 2)).toBe(2000);
+  });
+
+  it("prepends a step before the first card", () => {
+    expect(insertOrder([0, 1000], 0)).toBe(-ORDER_STEP);
+  });
+
+  it("lands between two neighbours", () => {
+    expect(insertOrder([0, 1000], 1)).toBe(500);
+  });
+
+  it("always returns an integer — Rust reads statusOrder with as_i64", () => {
+    // An odd gap must not produce a fraction, or the row is skipped server-side.
+    expect(Number.isInteger(insertOrder([0, 1], 1))).toBe(true);
+    expect(Number.isInteger(insertOrder([0, 7], 1))).toBe(true);
+  });
+
+  it("clamps an out-of-range index instead of returning NaN", () => {
+    expect(insertOrder([0, 1000], 99)).toBe(2000);
+    expect(insertOrder([0, 1000], -5)).toBe(-ORDER_STEP);
+  });
+
+  it("keeps legacy 1/2/3 orders sortable without a migration", () => {
+    // Rows written before statusOrder meant "position" are tightly packed.
+    const order = insertOrder([1, 2, 3], 3);
+    expect(order).toBeGreaterThan(3);
+  });
+});
+
+describe("needsRespread", () => {
+  it("is false when the insert found room", () => {
+    expect(needsRespread([0, 1000], 1, 500)).toBe(false);
+  });
+
+  it("is true when the gap between neighbours is exhausted", () => {
+    // No integer exists strictly between 5 and 6.
+    expect(needsRespread([5, 6], 1, insertOrder([5, 6], 1))).toBe(true);
+  });
+
+  it("is false at the head of a column, where there is always room", () => {
+    expect(needsRespread([0, 1000], 0, -ORDER_STEP)).toBe(false);
+  });
+});
diff --git a/apps/desktop-ui/src/app/app/to-do/utils/statusOrder.ts b/apps/desktop-ui/src/app/app/to-do/utils/statusOrder.ts
new file mode 100644
index 00000000..c86f5df5
--- /dev/null
+++ b/apps/desktop-ui/src/app/app/to-do/utils/statusOrder.ts
@@ -0,0 +1,36 @@
+/**
+ * Position of a card within its board column.
+ *
+ * Cards are spaced `ORDER_STEP` apart so that dropping one between two neighbours is a
+ * single PATCH of the moved card instead of a renumber of the whole column. When the gap
+ * between two neighbours is used up, the column is respread — see `needsRespread`.
+ *
+ * Integers only: the Rust handler reads `statusOrder` with `as_i64` inside a `filter_map`,
+ * so a fractional value is silently skipped when it computes the next order on create.
+ */
+export const ORDER_STEP = 1000;
+
+/**
+ * The `statusOrder` for a card inserted at `index` of a column whose existing cards have
+ * `orders` (ascending, excluding the card being moved).
+ */
+export function insertOrder(orders: number[], index: number): number {
+  const at = Math.max(0, Math.min(index, orders.length));
+  const prev = orders[at - 1];
+  const next = orders[at];
+
+  if (prev === undefined && next === undefined) return 0;
+  if (prev === undefined) return next - ORDER_STEP;
+  if (next === undefined) return prev + ORDER_STEP;
+  return Math.floor((prev + next) / 2);
+}
+
+/**
+ * True when `insertOrder` could not find room between the neighbours, so the column has to
+ * be respread at even intervals before the position is meaningful.
+ */
+export function needsRespread(orders: number[], index: number, order: number): boolean {
+  const at = Math.max(0, Math.min(index, orders.length));
+  const prev = orders[at - 1];
+  return prev !== undefined && order <= prev;
+}
diff --git a/apps/desktop-ui/src/app/globals.css b/apps/desktop-ui/src/app/globals.css
index 0ab5234a..99f3e29f 100644
--- a/apps/desktop-ui/src/app/globals.css
+++ b/apps/desktop-ui/src/app/globals.css
@@ -101,129 +101,9 @@ body {
     --sidebar-ring: 235 84% 67%;
   }
 
-  /* User-selectable accent overrides (ColorThemeProvider toggles these
-     classes on <html>). Light + dark variants; everything accent-colored
-     flows through --primary / --ring / --sidebar-primary. */
-  :root.blue {
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 0 0% 98%;
-    --ring: 217.2 91.2% 59.8%;
-    --sidebar-primary: 217.2 91.2% 59.8%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-
-  :root.purple {
-    --primary: 258.3 89.5% 66.3%;
-    --primary-foreground: 0 0% 98%;
-    --ring: 258.3 89.5% 66.3%;
-    --sidebar-primary: 258.3 89.5% 66.3%;
-    --sidebar-ring: 258.3 89.5% 66.3%;
-  }
-
-  :root.green {
-    --primary: 142.1 76.2% 36.3%;
-    --primary-foreground: 0 0% 98%;
-    --ring: 142.1 76.2% 36.3%;
-    --sidebar-primary: 142.1 76.2% 36.3%;
-    --sidebar-ring: 142.1 76.2% 36.3%;
-  }
-
-  :root.orange {
-    --primary: 24.6 95% 53.1%;
-    --primary-foreground: 0 0% 98%;
-    --ring: 24.6 95% 53.1%;
-    --sidebar-primary: 24.6 95% 53.1%;
-    --sidebar-ring: 24.6 95% 53.1%;
-  }
-
-  :root.red {
-    --primary: 0 72.2% 50.6%;
-    --primary-foreground: 0 0% 98%;
-    --ring: 0 72.2% 50.6%;
-    --sidebar-primary: 0 72.2% 50.6%;
-    --sidebar-ring: 0 72.2% 50.6%;
-  }
-
-  :root.pink {
-    --primary: 340.7 82.1% 52.7%;
-    --primary-foreground: 0 0% 98%;
-    --ring: 340.7 82.1% 52.7%;
-    --sidebar-primary: 340.7 82.1% 52.7%;
-    --sidebar-ring: 340.7 82.1% 52.7%;
-  }
-
-  :root.cyan {
-    --primary: 199.1 89.1% 48.2%;
-    --primary-foreground: 0 0% 98%;
-    --ring: 199.1 89.1% 48.2%;
-    --sidebar-primary: 199.1 89.1% 48.2%;
-    --sidebar-ring: 199.1 89.1% 48.2%;
-  }
-
-  :root.indigo {
-    --primary: 235 84% 67%;
-    --primary-foreground: 0 0% 100%;
-    --ring: 235 84% 67%;
-    --sidebar-primary: 235 84% 67%;
-    --sidebar-ring: 235 84% 67%;
-  }
-
-  /* Dark mode: same hues, tuned lightness where needed */
-  .dark.blue {
-    --primary: 217.2 91.2% 59.8%;
-    --ring: 217.2 91.2% 59.8%;
-    --sidebar-primary: 217.2 91.2% 59.8%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-
-  .dark.purple {
-    --primary: 258.3 89.5% 66.3%;
-    --ring: 258.3 89.5% 66.3%;
-    --sidebar-primary: 258.3 89.5% 66.3%;
-    --sidebar-ring: 258.3 89.5% 66.3%;
-  }
-
-  .dark.green {
-    --primary: 142.1 70.6% 45.3%;
-    --ring: 142.1 70.6% 45.3%;
-    --sidebar-primary: 142.1 70.6% 45.3%;
-    --sidebar-ring: 142.1 70.6% 45.3%;
-  }
-
-  .dark.orange {
-    --primary: 24.6 95% 53.1%;
-    --ring: 24.6 95% 53.1%;
-    --sidebar-primary: 24.6 95% 53.1%;
-    --sidebar-ring: 24.6 95% 53.1%;
-  }
-
-  .dark.red {
-    --primary: 0 72.2% 50.6%;
-    --ring: 0 72.2% 50.6%;
-    --sidebar-primary: 0 72.2% 50.6%;
-    --sidebar-ring: 0 72.2% 50.6%;
-  }
-
-  .dark.pink {
-    --primary: 340.7 82.1% 52.7%;
-    --ring: 340.7 82.1% 52.7%;
-    --sidebar-primary: 340.7 82.1% 52.7%;
-    --sidebar-ring: 340.7 82.1% 52.7%;
-  }
-
-  .dark.cyan {
-    --primary: 199.1 89.1% 48.2%;
-    --ring: 199.1 89.1% 48.2%;
-    --sidebar-primary: 199.1 89.1% 48.2%;
-    --sidebar-ring: 199.1 89.1% 48.2%;
-  }
-
-  .dark.indigo {
-    --primary: 235 84% 67%;
-    --ring: 235 84% 67%;
-    --sidebar-primary: 235 84% 67%;
-    --sidebar-ring: 235 84% 67%;
-  }
+  /* Accent overrides live in JS: ColorThemeProvider writes --primary / --ring /
+     --sidebar-primary inline on <html> (see lib/accent-color.ts), which also
+     lets a custom hex from the picker work without a CSS class per color. */
 }
 
 /* Hidden scrollbar (element still scrolls) — used by the top-nav strip. */
diff --git a/apps/desktop-ui/src/app/settings/page.tsx b/apps/desktop-ui/src/app/settings/page.tsx
index ee664f2d..fd193c4b 100644
--- a/apps/desktop-ui/src/app/settings/page.tsx
+++ b/apps/desktop-ui/src/app/settings/page.tsx
@@ -4,7 +4,7 @@ import React, { useState, useEffect } from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Label } from '@/components/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Sun, Globe, Palette, Check, Lock } from 'lucide-react'
+import { Sun, Globe, Palette, Lock, Pipette } from 'lucide-react'
 import { IDLE_TIMEOUT_KEY, getIdleTimeoutMinutes } from '@/lib/use-idle-lock'
 import { Switch } from '@/components/ui/switch'
 import { getVaultIconsEnabled, setVaultIconsEnabled } from '@/lib/vault-icon-pref'
@@ -13,21 +13,12 @@ import { useTheme } from 'next-themes'
 import { cn } from '@/lib/utils'
 import { useLocale, useTranslations } from 'next-intl'
 import { useRouter } from 'next/navigation'
-import { COLOR_THEME_OPTIONS, type ColorTheme, useColorTheme } from '@/hooks/use-color-theme'
+import { useColorTheme } from '@/hooks/use-color-theme'
+import { ACCENT_PRESETS, accentHex, isCustomAccent } from '@/lib/accent-color'
 import { ProfileCard } from '@/components/settings/profile-card'
 import { AppVersionLabel } from '@/components/desktop/app-version-label'
 import { useActiveWorkspace } from '@/store/workspace-store'
 import { Briefcase } from 'lucide-react'
-const colorDisplay: Record<ColorTheme, { swatchClass: string; name: string }> = {
-  cyan: { swatchClass: 'bg-cyan-500', name: 'Teal' },
-  blue: { swatchClass: 'bg-blue-500', name: 'Blue' },
-  indigo: { swatchClass: 'bg-indigo-500', name: 'Indigo' },
-  purple: { swatchClass: 'bg-purple-500', name: 'Purple' },
-  green: { swatchClass: 'bg-green-500', name: 'Green' },
-  orange: { swatchClass: 'bg-orange-500', name: 'Orange' },
-  red: { swatchClass: 'bg-red-500', name: 'Red' },
-  pink: { swatchClass: 'bg-pink-500', name: 'Pink' },
-}
 
 export default function SettingsPage() {
   const t = useTranslations('SettingsPage')
@@ -57,6 +48,8 @@ export default function SettingsPage() {
     return null // Avoid hydration mismatch
   }
 
+  const customAccent = isCustomAccent(colorTheme)
+
   const handleLanguageChange = (value: string) => {
     document.cookie = `NEXT_LOCALE=${value}; path=/; max-age=31536000; SameSite=Lax`
     router.refresh()
@@ -100,7 +93,11 @@ export default function SettingsPage() {
 
             <div className="flex flex-col sm:flex-row sm:items-start gap-6">
               <div className="space-y-2 sm:min-w-[180px]">
-                <Label>{t('appearance.themePreference')}</Label>
+                {/* Fixed-height label rows keep both dropdowns on the same baseline,
+                    even though only the accent label carries an icon. */}
+                <div className="flex h-5 items-center">
+                  <Label>{t('appearance.themePreference')}</Label>
+                </div>
                 <Select value={theme} onValueChange={setTheme}>
                   <SelectTrigger>
                     <SelectValue placeholder="Select theme" />
@@ -113,40 +110,69 @@ export default function SettingsPage() {
                 </Select>
               </div>
 
-              <div className="space-y-2">
-                <div className="flex items-center gap-2">
-                  <Palette className="h-4 w-4 text-muted-foreground" />
-                  <Label>Accent color</Label>
+              <div className="space-y-2 sm:w-[220px]">
+                <div className="flex h-5 items-center gap-2">
+                  <Palette className="h-4 w-4 shrink-0 text-muted-foreground" />
+                  <Label>{t('appearance.accentColor')}</Label>
                 </div>
-                <div className="flex flex-wrap items-center gap-2">
-                  {COLOR_THEME_OPTIONS.map((color) => {
-                    const isSelected = colorTheme === color
-                    const { swatchClass, name } = colorDisplay[color]
+                <div className="flex items-center gap-2">
+                  {/* Trigger is w-full by default: flex-1 keeps it from squeezing the
+                      picker swatch out of the row. */}
+                  <Select value={colorTheme} onValueChange={setColorTheme}>
+                    <SelectTrigger className="flex-1 min-w-0">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent className="rounded-lg">
+                      {/* Custom picks are not in the preset list; keep one item so the
+                          trigger can render the active hex. */}
+                      {customAccent ? (
+                        <SelectItem value={colorTheme}>
+                          <span
+                            className="h-3.5 w-3.5 shrink-0 rounded-full ring-1 ring-inset ring-black/10"
+                            style={{ backgroundColor: accentHex(colorTheme) }}
+                          />
+                          <span className="font-mono">{accentHex(colorTheme)}</span>
+                        </SelectItem>
+                      ) : null}
+                      {ACCENT_PRESETS.map(({ id, name, hex }) => (
+                        <SelectItem key={id} value={id}>
+                          <span
+                            className="h-3.5 w-3.5 shrink-0 rounded-full ring-1 ring-inset ring-black/10"
+                            style={{ backgroundColor: hex }}
+                          />
+                          {name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
 
-                    return (
-                      <button
-                        key={color}
-                        type="button"
-                        onClick={() => setColorTheme(color)}
-                        className={cn(
-                          'relative h-10 w-10 rounded-full border-2 transition-all',
-                          isSelected
-                            ? 'border-primary scale-105 shadow-md shadow-primary/25'
-                            : 'border-transparent hover:border-border'
-                        )}
-                        aria-label={`Use ${name} accent color`}
-                        aria-pressed={isSelected}
-                        title={name}
-                      >
-                        <span className={cn('block h-full w-full rounded-full', swatchClass)} />
-                        {isSelected ? (
-                          <span className="absolute inset-0 flex items-center justify-center text-white">
-                            <Check className="h-4 w-4 drop-shadow-sm" />
-                          </span>
-                        ) : null}
-                      </button>
-                    )
-                  })}
+                  {/* Native picker: no dependency, and the OS eyedropper comes free. */}
+                  <label
+                    className="relative flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md border border-input shadow-sm transition-colors hover:border-border"
+                    title={t('appearance.customColor')}
+                  >
+                    <span
+                      className="absolute inset-0"
+                      style={{
+                        background: customAccent
+                          ? accentHex(colorTheme)
+                          : 'conic-gradient(#ef4444,#eab308,#22c55e,#06b6d4,#6366f1,#d946ef,#ef4444)',
+                      }}
+                    />
+                    <Pipette
+                      className={cn(
+                        'relative h-4 w-4 drop-shadow-sm',
+                        customAccent ? 'text-primary-foreground' : 'text-white'
+                      )}
+                    />
+                    <input
+                      type="color"
+                      value={accentHex(colorTheme)}
+                      onChange={(event) => setColorTheme(event.target.value)}
+                      className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+                      aria-label={t('appearance.customColor')}
+                    />
+                  </label>
                 </div>
               </div>
             </div>
diff --git a/apps/desktop-ui/src/components/api-client/api-client.tsx b/apps/desktop-ui/src/components/api-client/api-client.tsx
index 3a62396a..943e9519 100644
--- a/apps/desktop-ui/src/components/api-client/api-client.tsx
+++ b/apps/desktop-ui/src/components/api-client/api-client.tsx
@@ -29,6 +29,7 @@ import { parseCurlCommand } from "@/utils/curl-parser"
 import { generateCode } from "./generate-code"
 import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
 import { CollectionsSidebar } from "./collections/collections-sidebar"
+import { ToolSidebarLayout } from "@/components/tools/tool-sidebar"
 import dynamic from "next/dynamic"
 import {
     RequestMethod,
@@ -44,13 +45,11 @@ import type { ScriptContext } from "./workers/scripts-runner.worker"
 import { useTranslations } from "next-intl"
 import { toast } from "sonner"
 import { useIsMobile } from "@/components/hooks/use-mobile"
-import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
 import { Button } from "@/components/ui/button"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { FolderOpen, PanelRight, MoreVertical, MoreHorizontal, Cookie, Download, Activity, Keyboard } from "lucide-react"
+import { FolderOpen, MoreVertical, MoreHorizontal, Cookie, Download, Activity, Keyboard } from "lucide-react"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator } from "@/components/ui/dropdown-menu"
 import { IconCode, IconSettings } from "@tabler/icons-react"
-import { cn } from "@/lib/utils"
 import { ensureHttpScheme } from "@/lib/url-normalize"
 import { encodeBasicCredentials } from "@/lib/basic-auth"
 import { ensureFreshToken } from "@/lib/oauth2"
@@ -131,8 +130,6 @@ function ApiClientInner() {
     const sessionVarsRef = React.useRef<Record<string, string>>({})
 
     const isMobile = useIsMobile()
-    const [collectionsOpen, setCollectionsOpen] = React.useState(false)
-    const [sidebarOpen, setSidebarOpen] = React.useState(true)
     const [mobilePanel, setMobilePanel] = React.useState<'request' | 'response'>('request')
     const [envMgrOpen, setEnvMgrOpen] = React.useState(false)
     const [codeGenOpen, setCodeGenOpen] = React.useState(false)
@@ -1105,31 +1102,15 @@ function ApiClientInner() {
     )
 
     return (
-        <div className="flex h-full min-h-0 w-full flex-col gap-4 mobile-nav-offset lg:flex-row">
+        <ToolSidebarLayout
+            toolId="api-client"
+            icon={FolderOpen}
+            title={t("layout.collections")}
+            sidebar={<CollectionsSidebar onLoadRequest={handleLoadRequest} />}
+            className="mobile-nav-offset"
+        >
             <div className="flex-1 flex flex-col gap-4 min-w-0 h-full">
                 <div className="flex flex-wrap justify-between items-center gap-2">
-                    {/* Mobile Collections Button */}
-                    {isMobile && (
-                        <Sheet open={collectionsOpen} onOpenChange={setCollectionsOpen}>
-                            <SheetTrigger asChild>
-                                <Button variant="outline" size="sm" className="touch-target-sm rounded-lg bg-background/50 shadow-sm">
-                                    <FolderOpen className="h-4 w-4 mr-2" />
-                                    {t("layout.collections")}
-                                </Button>
-                            </SheetTrigger>
-                            <SheetContent side="bottom" className="h-[75vh] bottom-sheet rounded-t-3xl border-t shadow-2xl">
-                                <div className="bottom-sheet-handle w-12 h-1.5 bg-muted rounded-full mx-auto my-3" />
-                                <div className="px-4 h-full overflow-hidden">
-                                    <CollectionsSidebar
-                                        onLoadRequest={(request) => {
-                                            handleLoadRequest(request)
-                                            setCollectionsOpen(false)
-                                        }}
-                                    />
-                                </div>
-                            </SheetContent>
-                        </Sheet>
-                    )}
                     <div className="flex flex-wrap items-center gap-2 ml-auto">
                         {isMobile ? (
                             /* Mobile: secondary actions collapsed into dropdown */
@@ -1270,15 +1251,6 @@ function ApiClientInner() {
                                 </DropdownMenu>
                                 <div className="h-6 w-px bg-border/50 mx-1" />
                                 <OfflineIndicator />
-                                <Button
-                                    variant="ghost"
-                                    size="icon"
-                                    className="h-8 w-8"
-                                    onClick={() => setSidebarOpen(!sidebarOpen)}
-                                    title={sidebarOpen ? t("layout.closeSidebar") : t("layout.openSidebar")}
-                                >
-                                    <PanelRight className="h-4 w-4 text-muted-foreground" />
-                                </Button>
                             </>
                         )}
                         {/* Dialogs rendered outside the conditional so state is preserved */}
@@ -1462,22 +1434,7 @@ function ApiClientInner() {
                     </div>
                 </Card>
             </div>
-
-            {/* Desktop Collections Sidebar */}
-            {!isMobile && (
-                <div
-                    className={cn(
-                        "shrink-0 h-full border rounded-2xl bg-card/50 backdrop-blur-sm shadow-lg shadow-primary/[0.01] overflow-hidden transition-all duration-300 ease-in-out",
-                        sidebarOpen ? "w-80 opacity-100" : "w-0 opacity-0 border-transparent overflow-hidden"
-                    )}
-                >
-                    <CollectionsSidebar
-                        onLoadRequest={handleLoadRequest}
-                        onCollapse={() => setSidebarOpen(false)}
-                    />
-                </div>
-            )}
-        </div>
+        </ToolSidebarLayout>
     )
 }
 
diff --git a/apps/desktop-ui/src/components/api-client/collections/collections-sidebar.tsx b/apps/desktop-ui/src/components/api-client/collections/collections-sidebar.tsx
index 1e8c41b6..d4164ce7 100644
--- a/apps/desktop-ui/src/components/api-client/collections/collections-sidebar.tsx
+++ b/apps/desktop-ui/src/components/api-client/collections/collections-sidebar.tsx
@@ -6,7 +6,7 @@ import { Checkbox } from "@/components/ui/checkbox"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { Collection, CollectionRequest } from "../types"
 import { CollectionItem } from "./collection-item"
-import { FolderPlus, Trash2, Pencil, MoreHorizontal, Search, X, FileDown, Play, Server, Link2, Globe, PanelRightClose } from "lucide-react"
+import { FolderPlus, Trash2, Pencil, MoreHorizontal, Search, X, FileDown, Play, Server, Link2, Globe } from "lucide-react"
 import { buildShareUrl } from "@/lib/share-link"
 import { apiFetch } from "@/lib/desktop/api-fetch"
 import { toast } from "sonner"
@@ -47,16 +47,23 @@ import { useHistoryState, useHistoryActions } from "../context/history-context"
 import { CollectionsSidebarSkeleton, HistoryListSkeleton } from "../skeletons"
 import { useDebouncedValue } from "@/lib/use-debounced-value"
 import { isDesktop } from "@/lib/desktop/is-desktop"
+import { ToolSidebarActions, useToolSidebarPanel } from "@/components/tools/tool-sidebar"
 
 interface CollectionsSidebarProps {
     onLoadRequest: (request: CollectionRequest) => void
-    onCollapse?: () => void
 }
 
-export function CollectionsSidebar({
-    onLoadRequest,
-    onCollapse,
-}: CollectionsSidebarProps) {
+export function CollectionsSidebar({ onLoadRequest: loadRequest }: CollectionsSidebarProps) {
+    const panel = useToolSidebarPanel()
+    // On mobile the panel is a sheet over the request pane — loading a request
+    // has to dismiss it or the loaded request stays hidden behind the sheet.
+    const onLoadRequest = React.useCallback(
+        (request: CollectionRequest) => {
+            loadRequest(request)
+            if (panel?.isMobile) panel.close()
+        },
+        [loadRequest, panel],
+    )
     const { collections, isLoading } = useCollectionsState()
     const { addFolder: onAddFolder, deleteItem: onDelete, toggleFolder: onToggle, createCollection: onCreateCollection, renameCollection: onRenameCollection, renameFolder: onRenameFolder, patchFolder, deleteMultipleCollections: onDeleteMultiple } = useCollectionsActions()
     const { history, isLoading: isHistoryLoading } = useHistoryState()
@@ -189,45 +196,34 @@ export function CollectionsSidebar({
     }
 
     return (
-        <div className="flex flex-col w-full h-full bg-background/50">
+        // Header (icon, title, collapse) is owned by ToolSidebarLayout in
+        // components/api-client/api-client.tsx — this renders the body only.
+        <>
+            <ToolSidebarActions>
+                {selectedCollections.size > 0 && (
+                    <Button
+                        variant="destructive"
+                        size="sm"
+                        className="h-7 px-3 rounded-lg text-xs font-medium gap-2"
+                        onClick={() => setDeleteBulkDialogOpen(true)}
+                    >
+                        <Trash2 className="h-3.5 w-3.5" />
+                        Delete ({selectedCollections.size})
+                    </Button>
+                )}
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 rounded-lg hover:bg-primary/10 hover:text-primary transition-colors"
+                    onClick={() => setNewCollectionDialogOpen(true)}
+                    title={t("newCollection")}
+                >
+                    <FolderPlus className="h-4 w-4" />
+                </Button>
+            </ToolSidebarActions>
+
             <Tabs defaultValue="collections" className="flex-1 flex flex-col h-full min-h-0">
                 <div className="px-4 py-3 border-b flex flex-col gap-3 shrink-0 bg-card/40 backdrop-blur-sm">
-                    <div className="flex items-center justify-between">
-                        <h3 className="font-semibold text-sm tracking-tight">{t("title")}</h3>
-                        <div className="flex items-center gap-2">
-                            {selectedCollections.size > 0 && (
-                                <Button
-                                    variant="destructive"
-                                    size="sm"
-                                    className="h-7 px-3 rounded-lg text-xs font-medium gap-2"
-                                    onClick={() => setDeleteBulkDialogOpen(true)}
-                                >
-                                    <Trash2 className="h-3.5 w-3.5" />
-                                    Delete ({selectedCollections.size})
-                                </Button>
-                            )}
-                            <Button
-                                variant="ghost"
-                                size="icon"
-                                className="h-7 w-7 rounded-lg hover:bg-primary/10 hover:text-primary transition-colors"
-                                onClick={() => setNewCollectionDialogOpen(true)}
-                                title={t("newCollection")}
-                            >
-                                <FolderPlus className="h-4 w-4" />
-                            </Button>
-                            {onCollapse && (
-                                <Button
-                                    variant="ghost"
-                                    size="icon"
-                                    className="h-7 w-7 rounded-lg hover:bg-primary/10 hover:text-primary transition-colors"
-                                    onClick={onCollapse}
-                                    title={tRoot("layout.closeSidebar")}
-                                >
-                                    <PanelRightClose className="h-4 w-4" />
-                                </Button>
-                            )}
-                        </div>
-                    </div>
                     <div className="px-3 pb-1">
                         <button
                             className="w-full flex items-center gap-2 text-xs px-2 py-1.5 rounded-md border bg-card hover:bg-muted/50"
@@ -740,6 +736,6 @@ export function CollectionsSidebar({
                     }
                 }}
             />
-        </div>
+        </>
     )
 }
diff --git a/apps/desktop-ui/src/components/api-client/request-tabs.tsx b/apps/desktop-ui/src/components/api-client/request-tabs.tsx
index d257efa8..d12e2e4f 100644
--- a/apps/desktop-ui/src/components/api-client/request-tabs.tsx
+++ b/apps/desktop-ui/src/components/api-client/request-tabs.tsx
@@ -1189,6 +1189,7 @@ export function RequestTabs({
                                         <textarea
                                             value={auth.jwtBearer?.privateKeyPem ?? ""}
                                             onChange={(e) => updateJwtCfg({ privateKeyPem: e.target.value })}
+                                            // threatcrush-disable-next-line secret-private-key
                                             placeholder="-----BEGIN PRIVATE KEY-----"
                                             className="w-full min-h-[100px] border rounded p-2 font-mono text-xs"
                                         />
diff --git a/apps/desktop-ui/src/components/api-client/workers/scripts-runner.worker.ts b/apps/desktop-ui/src/components/api-client/workers/scripts-runner.worker.ts
index 48c13102..3474ae7f 100644
--- a/apps/desktop-ui/src/components/api-client/workers/scripts-runner.worker.ts
+++ b/apps/desktop-ui/src/components/api-client/workers/scripts-runner.worker.ts
@@ -202,6 +202,9 @@ function runScriptSync(script: string, ctx: ScriptContext): ScriptResult {
     }
 
     try {
+        // Running the user's own pre/post-request script is the feature; it is
+        // confined to this worker with a pm/console surface and no DOM.
+        // threatcrush-disable-next-line js-dynamic-code-execution
         const runner = new Function("pm", "console", `"use strict";\n${script}`)
         runner(pm, sandboxConsole)
     } catch (err) {
diff --git a/apps/desktop-ui/src/components/api-key-vault/api-key-list.tsx b/apps/desktop-ui/src/components/api-key-vault/api-key-list.tsx
index cf0a9f96..9867dbfd 100644
--- a/apps/desktop-ui/src/components/api-key-vault/api-key-list.tsx
+++ b/apps/desktop-ui/src/components/api-key-vault/api-key-list.tsx
@@ -19,6 +19,11 @@ import { deleteApiKeyEntry } from "@/lib/api-key-vault-api"
 import { cn } from "@/lib/utils"
 import { formatDistanceToNow } from "date-fns"
 import { AddApiKeyDialog, EditApiKeyDialog } from "./add-api-key-dialog"
+import {
+    ToolSidebarFilterList,
+    ToolSidebarLayout,
+    type ToolSidebarFilterItem,
+} from "@/components/tools/tool-sidebar"
 
 const REVEAL_TIMEOUT_MS = 30_000
 
@@ -174,8 +179,35 @@ export function ApiKeyList() {
         }
     }
 
+    const envFilters: ToolSidebarFilterItem[] = [
+        { id: "all", label: "All keys", count: entries.length },
+        { id: "development", label: ENV_META.development.label, count: counts.development, dot: ENV_META.development.dot },
+        { id: "staging", label: ENV_META.staging.label, count: counts.staging, dot: ENV_META.staging.dot },
+        { id: "production", label: ENV_META.production.label, count: counts.production, dot: ENV_META.production.dot },
+    ]
+
     return (
-        <div className="flex flex-col gap-4 pb-8">
+        <ToolSidebarLayout
+            toolId="api-keys"
+            icon={KeyRound}
+            title="API Keys"
+            actions={
+                <AddApiKeyDialog>
+                    <Button variant="ghost" size="icon" className="h-8 w-8" aria-label="Add API key">
+                        <Plus className="h-4 w-4" />
+                    </Button>
+                </AddApiKeyDialog>
+            }
+            sidebar={
+                <ToolSidebarFilterList
+                    items={envFilters}
+                    value={envFilter}
+                    onChange={(id) => setEnvFilter(id as "all" | ApiKeyEnv)}
+                    heading="Environment"
+                />
+            }
+        >
+        <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4 pt-4 pb-8">
             <div className="flex flex-col sm:flex-row sm:items-center gap-2 sticky top-0 z-10 bg-background/95 backdrop-blur py-2">
               <div className="flex flex-col sm:flex-row sm:items-center gap-2 flex-1 min-w-0">
                 <div className="relative flex-1 max-w-md">
@@ -187,17 +219,6 @@ export function ApiKeyList() {
                         className="pl-9"
                     />
                 </div>
-                <Select value={envFilter} onValueChange={(v) => setEnvFilter(v as "all" | ApiKeyEnv)}>
-                    <SelectTrigger className="w-full sm:w-40">
-                        <SelectValue placeholder="All envs" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectItem value="all">All ({entries.length})</SelectItem>
-                        <SelectItem value="development">Dev ({counts.development})</SelectItem>
-                        <SelectItem value="staging">Staging ({counts.staging})</SelectItem>
-                        <SelectItem value="production">Prod ({counts.production})</SelectItem>
-                    </SelectContent>
-                </Select>
                 <Select value={sortBy} onValueChange={(v) => setSortBy(v as SortKey)}>
                     <SelectTrigger className="w-full sm:w-44" aria-label="Sort by">
                         <SelectValue />
@@ -389,5 +410,6 @@ export function ApiKeyList() {
                 </AlertDialogContent>
             </AlertDialog>
         </div>
+        </ToolSidebarLayout>
     )
 }
diff --git a/apps/desktop-ui/src/components/bookmarks/bookmarks-manager.tsx b/apps/desktop-ui/src/components/bookmarks/bookmarks-manager.tsx
index 074ac338..f82f202a 100644
--- a/apps/desktop-ui/src/components/bookmarks/bookmarks-manager.tsx
+++ b/apps/desktop-ui/src/components/bookmarks/bookmarks-manager.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import { useState, useCallback, useEffect, useMemo, useRef } from "react"
-import { motion, AnimatePresence } from "framer-motion"
 import dynamic from "next/dynamic"
 import { useTranslations } from "next-intl"
 import {
@@ -23,12 +22,11 @@ import { useBookmarkStore, useFilteredBookmarks, useAllTags } from "@/store/book
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
-import { ScrollArea } from "@/components/ui/scroll-area"
 import { Separator } from "@/components/ui/separator"
 import { useInfiniteScroll } from "@/hooks/use-infinite-scroll"
-import { useIsMobile } from "@/components/hooks/use-mobile"
 import FolderTree from "./folder-tree"
 import BookmarkGrid from "./bookmark-grid"
+import { ToolSidebarLayout, useToolSidebarPanel } from "@/components/tools/tool-sidebar"
 // ponytail: dialogs lazy-loaded; only fetched when user opens them
 const AddBookmarkDialog = dynamic(() => import("./add-bookmark-dialog"))
 const ImportDialog = dynamic(() => import("./import-dialog"))
@@ -43,11 +41,21 @@ import { exportBookmarksToHTML, exportBookmarksToJSON } from "@/lib/bookmark-par
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Skeleton } from "@/components/ui/skeleton"
 
+/** Lives inside ToolSidebarLayout so it can dismiss the mobile sheet on pick. */
+function FolderPanel({ onSelectFolder }: { onSelectFolder: (id: string | null) => void }) {
+    const panel = useToolSidebarPanel()
+    return (
+        <FolderTree
+            onSelectFolder={(id: string | null) => {
+                onSelectFolder(id)
+                if (panel?.isMobile) panel.close()
+            }}
+        />
+    )
+}
+
 export default function BookmarksManager() {
     const t = useTranslations("Bookmarks.manager")
-    const tNav = useTranslations("Navigation")
-    const isMobile = useIsMobile()
-    const [showSidebar, setShowSidebar] = useState(!isMobile)
     const [isAddBookmarkOpen, setIsAddBookmarkOpen] = useState(false)
     const [isImportOpen, setIsImportOpen] = useState(false)
     const [isAddFolderOpen, setIsAddFolderOpen] = useState(false)
@@ -191,131 +199,64 @@ export default function BookmarksManager() {
         return () => window.removeEventListener("keydown", onKeyDown)
     }, [selectionMode])
 
-    return (
-        <div className="flex h-full w-full overflow-hidden bg-background mobile-nav-offset">
-            {/* Sidebar */}
-            <AnimatePresence>
-                {showSidebar && (
-                    <>
-                        {/* Mobile backdrop overlay */}
-                        {isMobile && (
-                            <motion.div
-                                initial={{ opacity: 0 }}
-                                animate={{ opacity: 1 }}
-                                exit={{ opacity: 0 }}
-                                transition={{ duration: 0.2 }}
-                                className="fixed inset-0 bg-black/60 z-40 md:hidden"
-                                onClick={() => setShowSidebar(false)}
-                            />
-                        )}
-                        <motion.div
-                            // Mobile: overlay slides (fixed, no layout impact). Desktop: collapse
-                            // width so the flex slot reflows in step with the animation — animating
-                            // x alone leaves the 288px gap until unmount, which reads as a lag.
-                            initial={isMobile ? { x: -300, opacity: 0 } : { width: 0, opacity: 0 }}
-                            animate={isMobile ? { x: 0, opacity: 1 } : { width: 288, opacity: 1 }}
-                            exit={isMobile ? { x: -300, opacity: 0 } : { width: 0, opacity: 0 }}
-                            transition={{ duration: 0.2, ease: "easeInOut" }}
-                            className={cn(
-                                "border-r border-border/40 flex flex-col overflow-hidden",
-                                isMobile
-                                    ? "w-72 fixed inset-y-0 left-0 z-50 shadow-2xl bg-background"
-                                    : "relative bg-muted/30"
-                            )}
-                        >
-                          {/* Fixed-width inner wrapper: keeps content from squishing while the
-                              outer width animates to 0 on close. */}
-                          <div className="w-72 h-full flex flex-col shrink-0">
-                            {/* Sidebar Header */}
-                            <div className="h-16 px-4 flex items-center justify-between border-b border-border/40 bg-background/50 backdrop-blur-sm">
-                                <h2 className="font-semibold text-base tracking-tight">{t("foldersHeading")}</h2>
-                                <div className="flex items-center gap-1">
-                                    <Button
-                                        variant="ghost"
-                                        size="icon"
-                                        className="h-8 w-8 text-muted-foreground hover:text-foreground"
-                                        onClick={() => setIsAddFolderOpen(true)}
-                                    >
-                                        <IconFolderPlus className="h-4.5 w-4.5" />
-                                    </Button>
-                                    <Button
-                                        variant="ghost"
-                                        size="icon"
-                                        className="h-8 w-8"
-                                        onClick={() => setShowSidebar(false)}
-                                    >
-                                        <IconX className="h-4 w-4" />
-                                    </Button>
-                                </div>
-                            </div>
+    const sidebar = (
+        <>
+            {/* Folder Tree */}
+            <div className="min-h-0 flex-1 overflow-y-auto px-3 py-4">
+                <FolderPanel onSelectFolder={setSelectedFolder} />
+            </div>
 
-                            {/* Folder Tree */}
-                            <ScrollArea className="flex-1 px-3 py-4">
-                                <FolderTree
-                                    onSelectFolder={(id: string | null) => {
-                                        setSelectedFolder(id)
-                                        if (isMobile) setShowSidebar(false)
-                                    }}
-                                />
-                            </ScrollArea>
-
-                            {/* Tags Section */}
-                            {allTags.length > 0 && (
-                                <>
-                                    <Separator />
-                                    <div className="p-4">
-                                        <h3 className="text-sm font-medium text-muted-foreground mb-2">{t("tagsHeading")}</h3>
-                                        <div className="flex flex-wrap gap-1">
-                                            {(showAllTags ? allTags : allTags.slice(0, 10)).map(tag => (
-                                                <button
-                                                    key={tag}
-                                                    onClick={() => setSearchQuery(`#${tag}`)}
-                                                    className="text-xs px-2 py-1 rounded-full bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
-                                                >
-                                                    #{tag}
-                                                </button>
-                                            ))}
-                                            {allTags.length > 10 && (
-                                                <button
-                                                    onClick={() => setShowAllTags(prev => !prev)}
-                                                    className="text-xs px-2 py-1 rounded-full bg-muted text-muted-foreground hover:bg-muted/80 transition-colors"
-                                                >
-                                                    {showAllTags ? t("tagsShowLess") : t("tagsMore", { count: allTags.length - 10 })}
-                                                </button>
-                                            )}
-                                        </div>
-                                    </div>
-                                </>
-                            )}
-                          </div>
-                        </motion.div>
-                    </>
-                )}
-            </AnimatePresence>
+            {/* Tags Section */}
+            {allTags.length > 0 && (
+                <div className="shrink-0 border-t border-border/40 p-4">
+                    <h3 className="text-sm font-medium text-muted-foreground mb-2">{t("tagsHeading")}</h3>
+                    <div className="flex flex-wrap gap-1">
+                        {(showAllTags ? allTags : allTags.slice(0, 10)).map(tag => (
+                            <button
+                                key={tag}
+                                onClick={() => setSearchQuery(`#${tag}`)}
+                                className="text-xs px-2 py-1 rounded-full bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
+                            >
+                                #{tag}
+                            </button>
+                        ))}
+                        {allTags.length > 10 && (
+                            <button
+                                onClick={() => setShowAllTags(prev => !prev)}
+                                className="text-xs px-2 py-1 rounded-full bg-muted text-muted-foreground hover:bg-muted/80 transition-colors"
+                            >
+                                {showAllTags ? t("tagsShowLess") : t("tagsMore", { count: allTags.length - 10 })}
+                            </button>
+                        )}
+                    </div>
+                </div>
+            )}
+        </>
+    )
 
+    return (
+        <ToolSidebarLayout
+            toolId="bookmarks"
+            icon={IconBookmark}
+            title={t("foldersHeading")}
+            actions={
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 text-muted-foreground hover:text-foreground"
+                    aria-label={t("foldersHeading")}
+                    onClick={() => setIsAddFolderOpen(true)}
+                >
+                    <IconFolderPlus className="h-4 w-4" />
+                </Button>
+            }
+            sidebar={sidebar}
+            className="bg-background mobile-nav-offset"
+        >
             {/* Main Content */}
             <div className="flex-1 flex flex-col min-h-0 bg-background">
                 {/* Toolbar - Fixed height, not scrollable */}
                 <div className="shrink-0 h-16 px-4 border-b border-border/40 flex items-center gap-4 bg-background/80 backdrop-blur-md z-10">
-                    {/* Sidebar Toggle — shows whenever sidebar collapsed */}
-                    {!showSidebar && (
-                        <>
-                            <Button
-                                variant="ghost"
-                                size="icon"
-                                className="-ml-2 shrink-0"
-                                onClick={() => setShowSidebar(true)}
-                            >
-                                <IconList className="h-5 w-5" />
-                            </Button>
-                            <div className="flex items-center gap-2 font-semibold text-sm shrink-0">
-                                <span className="h-6 w-6 rounded-md bg-primary/10 flex items-center justify-center text-primary">
-                                    <IconBookmark className="h-3.5 w-3.5" />
-                                </span>
-                                {tNav("bookmarks")}
-                            </div>
-                        </>
-                    )}
 
                     {/* Search */}
                     <div className="relative flex-1 max-w-xl">
@@ -594,6 +535,6 @@ export default function BookmarksManager() {
                     onOpenChange={setIsAddFolderOpen}
                 />
             )}
-        </div>
+        </ToolSidebarLayout>
     )
 }
diff --git a/apps/desktop-ui/src/components/code-screenshot/code-screenshot-layout.tsx b/apps/desktop-ui/src/components/code-screenshot/code-screenshot-layout.tsx
index 30e455fa..cfb35bec 100644
--- a/apps/desktop-ui/src/components/code-screenshot/code-screenshot-layout.tsx
+++ b/apps/desktop-ui/src/components/code-screenshot/code-screenshot-layout.tsx
@@ -159,6 +159,8 @@ export function CodeScreenshotLayout() {
   return (
     <div className="relative flex h-full min-h-0 w-full flex-col gap-4 overflow-hidden dashboard-grid-bg">
       <div className="dash-ambient -z-10" aria-hidden />
+      {/* Static stylesheet constant in this file. */}
+      {/* threatcrush-disable-next-line js-unescaped-html-sink */}
       <style dangerouslySetInnerHTML={{ __html: SCOPED_HLJS_CSS }} />
 
       <RevealItem index={0}>
@@ -390,6 +392,8 @@ export function CodeScreenshotLayout() {
                   <pre className="overflow-x-auto p-5 text-sm leading-relaxed">
                     <code
                       className={`cshot-code ${isDarkWindow ? '' : 'cshot-code--light'} block whitespace-pre font-mono`}
+                      // highlight.js escapes the source it is handed.
+                      // threatcrush-disable-next-line js-unescaped-html-sink
                       dangerouslySetInnerHTML={{ __html: highlighted.html }}
                     />
                   </pre>
diff --git a/apps/desktop-ui/src/components/data-explorer/unified-sidebar.tsx b/apps/desktop-ui/src/components/data-explorer/unified-sidebar.tsx
index e3f07700..00ad9f84 100644
--- a/apps/desktop-ui/src/components/data-explorer/unified-sidebar.tsx
+++ b/apps/desktop-ui/src/components/data-explorer/unified-sidebar.tsx
@@ -35,6 +35,7 @@ import {
     AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { cn } from "@/lib/utils";
+import { useToolSidebarPanel } from "@/components/tools/tool-sidebar";
 import { SOURCES, SOURCE_ORDER, getAdapter } from "./sources";
 import { deleteConnection } from "./connection-service";
 import type { OpenTabRequest, SourceId, UnifiedConnection } from "./types";
@@ -198,12 +199,23 @@ export function UnifiedSidebar({
     onImportLegacy,
 }: UnifiedSidebarProps) {
     const t = useTranslations("DataExplorer");
+    const panel = useToolSidebarPanel();
     const [query, setQuery] = useState("");
     const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
     const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set());
     const [pendingDelete, setPendingDelete] = useState<UnifiedConnection | null>(null);
     const [deleting, setDeleting] = useState(false);
 
+    // On mobile the panel is a sheet over the tab body — opening a tab has to
+    // dismiss it or the new tab stays hidden behind the sheet.
+    const handleOpenTab = useCallback(
+        (connection: UnifiedConnection, req: OpenTabRequest) => {
+            onOpenTab(connection, req);
+            if (panel?.isMobile) panel.close();
+        },
+        [onOpenTab, panel]
+    );
+
     const filtered = useMemo(() => {
         const q = query.trim().toLowerCase();
         const safe = connections.filter(
@@ -281,20 +293,10 @@ export function UnifiedSidebar({
     }
 
     return (
-        <div className="flex h-full flex-col overflow-hidden border-r bg-muted/10">
-            <div className="space-y-2 border-b p-3">
-                <div className="flex items-center justify-between">
-                    <span className="text-sm font-semibold">{t("title")}</span>
-                    <Button
-                        variant="ghost"
-                        size="icon"
-                        className="size-7"
-                        aria-label={t("addConnection")}
-                        onClick={onAddConnection}
-                    >
-                        <IconPlus className="size-4" />
-                    </Button>
-                </div>
+        // Header (title, add, collapse) is owned by ToolSidebarLayout in
+        // app/app/data-explorer/page.tsx — this renders the panel body only.
+        <>
+            <div className="shrink-0 border-b p-3">
                 <div className="relative">
                     <IconSearch className="absolute left-2 top-1/2 size-3 -translate-y-1/2 text-muted-foreground" />
                     <Input
@@ -364,7 +366,7 @@ export function UnifiedSidebar({
                                                     connection={connection}
                                                     expanded={expandedIds.has(connection.id)}
                                                     onToggle={toggleConnection}
-                                                    onOpenTab={onOpenTab}
+                                                    onOpenTab={handleOpenTab}
                                                     onEdit={onEditConnection}
                                                     onDelete={requestDelete}
                                                     onConnectionsChanged={onConnectionsChanged}
@@ -384,7 +386,7 @@ export function UnifiedSidebar({
                 )}
             </div>
 
-            <div className="border-t p-2">
+            <div className="shrink-0 border-t p-2">
                 <Button
                     variant="ghost"
                     size="sm"
@@ -426,6 +428,6 @@ export function UnifiedSidebar({
                     </AlertDialogFooter>
                 </AlertDialogContent>
             </AlertDialog>
-        </div>
+        </>
     );
 }
diff --git a/apps/desktop-ui/src/components/desktop/app-version-label.tsx b/apps/desktop-ui/src/components/desktop/app-version-label.tsx
index a18c6015..adfac56f 100644
--- a/apps/desktop-ui/src/components/desktop/app-version-label.tsx
+++ b/apps/desktop-ui/src/components/desktop/app-version-label.tsx
@@ -1,21 +1,21 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { toast } from "sonner";
+import { useTranslations } from "next-intl";
 
-import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Info } from "lucide-react";
 import { isDesktop } from "@/lib/desktop/is-desktop";
+import { DesktopUpdateDialog } from "@/components/desktop/desktop-update-dialog";
 
 /**
  * About card for the settings page: shows the running app version (baked into
- * tauri.conf.json) with a Check for updates button. Desktop-only — renders
- * nothing on web.
+ * tauri.conf.json) with the Check for updates button + modal. Desktop-only —
+ * renders nothing on web.
  */
 export function AppVersionLabel() {
+  const t = useTranslations("SettingsPage.about");
   const [version, setVersion] = useState("");
-  const [checking, setChecking] = useState(false);
 
   useEffect(() => {
     if (!isDesktop()) return;
@@ -30,24 +30,6 @@ export function AppVersionLabel() {
 
   if (!isDesktop()) return null;
 
-  const handleCheck = async () => {
-    setChecking(true);
-    try {
-      const { checkForUpdate } = await import("@/lib/desktop/updater");
-      const update = await checkForUpdate();
-      if (!update) {
-        toast.success("You're on the latest version");
-        return;
-      }
-      const { startUpdate } = await import("@/lib/desktop/use-update-install");
-      startUpdate();
-    } catch {
-      toast.error("Couldn't check for updates");
-    } finally {
-      setChecking(false);
-    }
-  };
-
   return (
     <Card className="rounded-2xl border border-border/60 bg-card/60 shadow-sm backdrop-blur-sm">
       <CardHeader>
@@ -55,14 +37,14 @@ export function AppVersionLabel() {
           <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-primary/15 to-violet-500/10 text-primary ring-1 ring-inset ring-border/50">
             <Info className="h-4 w-4" />
           </span>
-          About
+          {t("title")}
         </CardTitle>
-        <CardDescription>Running MyDevTools {version ? `v${version}` : ""}</CardDescription>
+        <CardDescription>
+          {version ? t("runningVersion", { version }) : t("running")}
+        </CardDescription>
       </CardHeader>
       <CardContent>
-        <Button variant="outline" onClick={handleCheck} disabled={checking}>
-          {checking ? "Checking…" : "Check for updates"}
-        </Button>
+        <DesktopUpdateDialog />
       </CardContent>
     </Card>
   );
diff --git a/apps/desktop-ui/src/components/desktop/desktop-update-dialog.tsx b/apps/desktop-ui/src/components/desktop/desktop-update-dialog.tsx
index 48f904a1..4b5ef174 100644
--- a/apps/desktop-ui/src/components/desktop/desktop-update-dialog.tsx
+++ b/apps/desktop-ui/src/components/desktop/desktop-update-dialog.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { CheckCircle2, Download, RefreshCw } from "lucide-react";
 import { toast } from "sonner";
 
@@ -20,6 +21,7 @@ import type { UpdateInfo } from "@/lib/desktop/updater";
  * data is never touched). Desktop-only — callers gate on isDesktop().
  */
 export function DesktopUpdateDialog() {
+  const t = useTranslations("SettingsPage.about");
   const [open, setOpen] = useState(false);
   const [version, setVersion] = useState("");
   const [checking, setChecking] = useState(false);
@@ -33,7 +35,7 @@ export function DesktopUpdateDialog() {
       if (!version) setVersion(await m.currentAppVersion());
       setUpdate(await m.checkForUpdate());
     } catch {
-      toast.error("Couldn't check for updates. Are you online?");
+      toast.error(t("checkError"));
       setOpen(false);
     } finally {
       setChecking(false);
@@ -50,28 +52,27 @@ export function DesktopUpdateDialog() {
     <>
       <Button variant="outline" size="sm" onClick={() => void check()} disabled={checking}>
         <RefreshCw className={checking ? "mr-2 h-4 w-4 animate-spin" : "mr-2 h-4 w-4"} />
-        Check for updates
+        {t("checkButton")}
       </Button>
 
       <Dialog open={open} onOpenChange={(o) => setOpen(o)}>
         <DialogContent className="sm:max-w-[420px]">
           <DialogHeader>
-            <DialogTitle>Updates</DialogTitle>
+            <DialogTitle>{t("dialogTitle")}</DialogTitle>
             <DialogDescription>
-              MyDevTools updates itself in place — no reinstall, and your
-              offline data is never touched.
-              {version ? ` You're on version ${version}.` : ""}
+              {t("dialogDescription")}
+              {version ? ` ${t("onVersion", { version })}` : ""}
             </DialogDescription>
           </DialogHeader>
 
           {checking ? (
             <div className="flex items-center gap-2 py-2 text-sm text-muted-foreground">
-              <RefreshCw className="h-4 w-4 animate-spin" /> Checking…
+              <RefreshCw className="h-4 w-4 animate-spin" /> {t("checking")}
             </div>
           ) : update ? (
             <div className="rounded-xl border border-primary/40 bg-primary/[0.04] px-3.5 py-3">
               <p className="text-sm font-medium">
-                Version {update.version} is available.
+                {t("available", { version: update.version })}
               </p>
               {update.notes ? (
                 <p className="mt-1 whitespace-pre-line text-xs text-muted-foreground">
@@ -80,12 +81,12 @@ export function DesktopUpdateDialog() {
               ) : null}
               <Button className="mt-3" size="sm" onClick={() => void install()}>
                 <Download className="mr-2 h-4 w-4" />
-                Download &amp; install
+                {t("install")}
               </Button>
             </div>
           ) : (
             <div className="flex items-center gap-2 py-2 text-sm text-muted-foreground">
-              <CheckCircle2 className="h-4 w-4 text-green-500" /> You're up to date.
+              <CheckCircle2 className="h-4 w-4 text-green-500" /> {t("upToDate")}
             </div>
           )}
         </DialogContent>
diff --git a/apps/desktop-ui/src/components/environment-manager/environment-set-list.tsx b/apps/desktop-ui/src/components/environment-manager/environment-set-list.tsx
index a789d908..b623fb34 100644
--- a/apps/desktop-ui/src/components/environment-manager/environment-set-list.tsx
+++ b/apps/desktop-ui/src/components/environment-manager/environment-set-list.tsx
@@ -9,7 +9,12 @@ import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
-import { Search, Copy, Pencil, Trash2, FileCode2, Eye, ArrowUpDown, Check } from "lucide-react"
+import { Search, Copy, Pencil, Trash2, FileCode2, Eye, ArrowUpDown, Check, Folders as IconFolders } from "lucide-react"
+import {
+    ToolSidebarFilterList,
+    ToolSidebarLayout,
+    type ToolSidebarFilterItem,
+} from "@/components/tools/tool-sidebar"
 import { toast } from "sonner"
 import { deleteEnvSetEntry } from "@/lib/environment-manager-api"
 import { formatDotEnv } from "@/lib/environment-manager-utils"
@@ -42,7 +47,6 @@ import { AddEnvironmentSetDialog } from "./add-environment-set-dialog"
 import { formatDistanceToNow } from "date-fns"
 import { cn } from "@/lib/utils"
 import { useIsMobile } from "@/components/hooks/use-mobile"
-import { SidebarTrigger } from "@/components/ui/sidebar"
 import {
     Dialog,
     DialogContent,
@@ -77,6 +81,7 @@ export function EnvironmentSetList() {
     const { copyToClipboard } = useCopyToClipboard()
     const [search, setSearch] = useState("")
     const [tagFilter, setTagFilter] = useState("")
+    const [projectFilter, setProjectFilter] = useState("all")
     const [sortOrder, setSortOrder] = useState<SortOrder>("updatedDesc")
     const [editing, setEditing] = useState<EnvSetEntry | null>(null)
     const [editOpen, setEditOpen] = useState(false)
@@ -91,10 +96,23 @@ export function EnvironmentSetList() {
         return [...s].sort()
     }, [sets])
 
+    // Project buckets for the sidebar, sorted by name with an "all" row on top.
+    const projectFilters: ToolSidebarFilterItem[] = useMemo(() => {
+        const counts = new Map<string, number>()
+        sets.forEach((e) => counts.set(e.project, (counts.get(e.project) ?? 0) + 1))
+        return [
+            { id: "all", label: t("allProjects"), count: sets.length },
+            ...[...counts.entries()]
+                .sort((a, b) => a[0].localeCompare(b[0]))
+                .map(([project, count]) => ({ id: project, label: project, count })),
+        ]
+    }, [sets, t])
+
     const filtered = useMemo(() => {
         const q = debouncedSearch.toLowerCase().trim()
         const tf = tagFilter.toLowerCase().trim()
         const result = sets.filter((e) => {
+            if (projectFilter !== "all" && e.project !== projectFilter) return false
             const matchTag =
                 !tf || e.tags.some((x) => x.toLowerCase().includes(tf)) || tf === e.project.toLowerCase()
             if (!q) return matchTag
@@ -107,7 +125,7 @@ export function EnvironmentSetList() {
             if (sortOrder === "updatedAsc") return a.updatedAt - b.updatedAt
             return `${a.project}/${a.environment}`.localeCompare(`${b.project}/${b.environment}`)
         })
-    }, [sets, debouncedSearch, tagFilter, sortOrder])
+    }, [sets, debouncedSearch, tagFilter, projectFilter, sortOrder])
 
     const viewDotEnvRaw = useMemo(
         () => (viewingEntry ? formatDotEnv(viewingEntry.variables).trim() : ""),
@@ -132,20 +150,25 @@ export function EnvironmentSetList() {
     }
 
     return (
-        <>
+        <ToolSidebarLayout
+            toolId="environment-manager"
+            icon={IconFolders}
+            title={t("title")}
+            sidebar={
+                <ToolSidebarFilterList
+                    items={projectFilters}
+                    value={projectFilter}
+                    onChange={setProjectFilter}
+                    heading={t("projectsHeading")}
+                />
+            }
+        >
             <div
                 className={cn(
-                    "flex flex-col gap-4 flex-1 min-h-0",
-                    isMobile ? "px-3 pt-3 pb-24" : "py-4"
+                    "flex flex-col gap-4 flex-1 min-h-0 overflow-y-auto",
+                    isMobile ? "px-3 pt-3 pb-24" : "px-4 py-4"
                 )}
             >
-                {isMobile && (
-                    <div className="flex items-center gap-2 shrink-0">
-                        <SidebarTrigger className="md:hidden" />
-                        <h1 className="text-xl font-bold tracking-tight flex-1">{t("title")}</h1>
-                    </div>
-                )}
-
                 <div className="flex flex-col sm:flex-row gap-2 shrink-0">
                     <div className="relative flex-1">
                         <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
@@ -377,6 +400,8 @@ export function EnvironmentSetList() {
                                             <pre className="m-0 break-all whitespace-pre-wrap p-4 text-left font-mono text-sm leading-relaxed">
                                                 <code
                                                     className="hljs language-properties !bg-transparent"
+                                                    // highlight.js escapes the .env text it is handed.
+                                                    // threatcrush-disable-next-line js-unescaped-html-sink
                                                     dangerouslySetInnerHTML={{ __html: viewDotEnvHtml }}
                                                 />
                                             </pre>
@@ -443,6 +468,8 @@ export function EnvironmentSetList() {
                                             <pre className="m-0 break-all whitespace-pre-wrap p-4 text-left font-mono text-sm leading-relaxed">
                                                 <code
                                                     className="hljs language-properties !bg-transparent"
+                                                    // highlight.js escapes the .env text it is handed.
+                                                    // threatcrush-disable-next-line js-unescaped-html-sink
                                                     dangerouslySetInnerHTML={{ __html: viewDotEnvHtml }}
                                                 />
                                             </pre>
@@ -495,6 +522,6 @@ export function EnvironmentSetList() {
                     </AlertDialogFooter>
                 </AlertDialogContent>
             </AlertDialog>
-        </>
+        </ToolSidebarLayout>
     )
 }
diff --git a/apps/desktop-ui/src/components/json-schema-generator/json-schema-generator-layout.tsx b/apps/desktop-ui/src/components/json-schema-generator/json-schema-generator-layout.tsx
index 921e742f..3a12eaef 100644
--- a/apps/desktop-ui/src/components/json-schema-generator/json-schema-generator-layout.tsx
+++ b/apps/desktop-ui/src/components/json-schema-generator/json-schema-generator-layout.tsx
@@ -234,6 +234,8 @@ export function JsonSchemaGeneratorLayout() {
                       <pre className="m-0 font-mono">
                         <code
                           className="hljs"
+                          // highlight.js escapes the JSON it is handed.
+                          // threatcrush-disable-next-line js-unescaped-html-sink
                           dangerouslySetInnerHTML={{ __html: highlightedOutput }}
                         />
                       </pre>
diff --git a/apps/desktop-ui/src/components/jwt-decoder/jwt-decoder-layout.tsx b/apps/desktop-ui/src/components/jwt-decoder/jwt-decoder-layout.tsx
index 3accaf68..22a4e9ee 100644
--- a/apps/desktop-ui/src/components/jwt-decoder/jwt-decoder-layout.tsx
+++ b/apps/desktop-ui/src/components/jwt-decoder/jwt-decoder-layout.tsx
@@ -69,6 +69,9 @@ function JwtDecodePanel() {
   const searchParams = useSearchParams();
   const initialInput = searchParams.get('input') || '';
   const [input, setInput] = useState(initialInput);
+  // Decoding without verification is this tool's whole purpose — it inspects a
+  // pasted token and holds no signing key.
+  // threatcrush-disable-next-line js-jwt-decode-without-verify
   const result = useMemo(() => decodeJwt(input), [input]);
 
   const relativeText = (n: number, unit: RelativeUnit, direction: 'future' | 'past') => {
diff --git a/apps/desktop-ui/src/components/markdown-preview-html/markdown-preview-html-layout.tsx b/apps/desktop-ui/src/components/markdown-preview-html/markdown-preview-html-layout.tsx
index 92639879..f268f3c6 100644
--- a/apps/desktop-ui/src/components/markdown-preview-html/markdown-preview-html-layout.tsx
+++ b/apps/desktop-ui/src/components/markdown-preview-html/markdown-preview-html-layout.tsx
@@ -5,7 +5,10 @@ import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
 import { useTranslations } from 'next-intl';
 import { marked } from 'marked';
 import TurndownService from 'turndown';
+import { toast } from 'sonner';
+import { safeFileName } from '@/lib/markdown-preview-html';
 import { Card } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { Button } from '@/components/ui/button';
@@ -76,6 +79,7 @@ export function MarkdownPreviewLayout() {
   // Markdown → HTML tab
   const [markdown, setMarkdown] = useState('');
   const [outputTab, setOutputTab] = useState<'preview' | 'html'>('preview');
+  const [fileName, setFileName] = useState('export');
   const { isCopied: copiedHtml, copyToClipboard: copyHtml } = useCopyToClipboard();
 
   // HTML → Markdown tab
@@ -92,14 +96,16 @@ export function MarkdownPreviewLayout() {
 
   const handleExportHtml = useCallback(() => {
     if (!renderedHtml) return;
+    const name = `${safeFileName(fileName)}.html`;
     const blob = new Blob([buildFullHtml(renderedHtml)], { type: 'text/html' });
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;
-    a.download = 'export.html';
+    a.download = name;
     a.click();
     URL.revokeObjectURL(url);
-  }, [renderedHtml]);
+    toast.success(t('exportSuccess', { name }));
+  }, [renderedHtml, fileName, t]);
 
   const handleCopyMd = useCallback(() => {
     if (!convertedMarkdown) return;
@@ -153,7 +159,17 @@ export function MarkdownPreviewLayout() {
                     </TabsTrigger>
                   </TabsList>
                 </Tabs>
-                <div className="flex gap-2">
+                <div className="flex items-center gap-2">
+                  <div className="flex items-center rounded-md border bg-background pr-2 focus-within:ring-1 focus-within:ring-ring">
+                    <Input
+                      value={fileName}
+                      onChange={(e) => setFileName(e.target.value)}
+                      aria-label={t('fileNameLabel')}
+                      placeholder={t('fileNamePlaceholder')}
+                      className="h-8 w-28 border-0 bg-transparent px-2 text-xs shadow-none focus-visible:ring-0"
+                    />
+                    <span className="text-xs text-muted-foreground">.html</span>
+                  </div>
                   <Button size="sm" variant="secondary" disabled={!renderedHtml} onClick={handleCopyHtml}>
                     {copiedHtml ? <Check className="mr-1.5 h-4 w-4 text-emerald-600" /> : <Copy className="mr-1.5 h-4 w-4" />}
                     {copiedHtml ? t('copied') : t('copyHtml')}
diff --git a/apps/desktop-ui/src/components/mobile-nav.tsx b/apps/desktop-ui/src/components/mobile-nav.tsx
index 0c30dfb0..5e4fdb8b 100644
--- a/apps/desktop-ui/src/components/mobile-nav.tsx
+++ b/apps/desktop-ui/src/components/mobile-nav.tsx
@@ -3,7 +3,6 @@ import Link from "next/link"
 import { usePathname, useRouter } from "next/navigation"
 import { Home, LayoutGrid, Lock, User as UserIcon, Moon, Sun, Settings, HelpCircle } from "lucide-react"
 import { cn } from "@/lib/utils"
-import { useSidebar } from "@/components/ui/sidebar"
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -30,7 +29,6 @@ const navItems = [
 
 export function MobileNav() {
     const pathname = usePathname()
-    const { toggleSidebar, openMobile } = useSidebar()
     const user = useAppUser()
     const { clearPasswords } = usePasswordStore()
     const { clearSets } = useEnvironmentManagerStore()
@@ -47,9 +45,8 @@ export function MobileNav() {
     }, [])
 
     // Determine active tab for indicator animation
-    const getActiveTab = (): 'home' | 'tools' | 'profile' | null => {
+    const getActiveTab = (): 'home' | 'profile' | null => {
         if (pathname === '/dashboard') return 'home'
-        if (openMobile) return 'tools'
         return null
     }
     const activeTab = getActiveTab()
@@ -136,24 +133,15 @@ export function MobileNav() {
                 <span className="mt-0.5">{navItems[0].label}</span>
             </Link>
 
-            {/* Tools Button */}
+            {/* Tools Button — opens the global command palette (same event the
+                TopBar search button dispatches). The old sidebar it used to
+                toggle is gone; the palette is the tool switcher now. */}
             <button
-                onClick={() => toggleSidebar()}
-                className={cn(navItemStyles, openMobile && activeStyles)}
-                aria-expanded={openMobile}
-                aria-label="Toggle tools menu"
+                onClick={() => document.dispatchEvent(new CustomEvent('open-command-palette'))}
+                className={navItemStyles}
+                aria-label="Open tool search"
             >
-                {activeTab === 'tools' && (
-                    <motion.div
-                        layoutId="active-mobile-nav"
-                        className="absolute inset-0 rounded-full bg-gradient-to-br from-primary/20 to-violet-500/10 ring-1 ring-inset ring-primary/15 -z-10"
-                        transition={{ type: "spring", stiffness: 400, damping: 30 }}
-                    />
-                )}
-                <LayoutGrid
-                    className="h-5 w-5 transition-transform duration-200"
-                    strokeWidth={openMobile ? 2.5 : 2}
-                />
+                <LayoutGrid className="h-5 w-5 transition-transform duration-200" strokeWidth={2} />
                 <span className="mt-0.5">Tools</span>
             </button>
 
diff --git a/apps/desktop-ui/src/components/notes/NotesSidebar.tsx b/apps/desktop-ui/src/components/notes/NotesSidebar.tsx
index 1435538d..bdf48fc5 100644
--- a/apps/desktop-ui/src/components/notes/NotesSidebar.tsx
+++ b/apps/desktop-ui/src/components/notes/NotesSidebar.tsx
@@ -29,7 +29,6 @@ import {
     ArrowUpDown,
     NotebookPen,
     FileText,
-    PanelLeftClose,
     ArrowUp,
     ArrowDown,
 } from "lucide-react";
@@ -56,6 +55,7 @@ import {
     AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { Note } from "@/app/app/notes/types/Note";
+import { ToolSidebarActions, useToolSidebarPanel } from "@/components/tools/tool-sidebar";
 import { useTranslations } from "next-intl";
 import { extractSnippet } from "@/app/app/notes/utils/noteContentUtils";
 import { type ChildrenMap, type SortDir, type SortKey, buildChildrenMap, getCachedPlainText } from "./notes-helpers";
@@ -83,6 +83,7 @@ const NoteItem = React.memo(({
     const t = useTranslations("Notes.sidebar");
     const { activeNoteId, setActiveNoteId } = useNotesUI();
     const { createNote, pinNote, duplicateNote, updateNote } = useNotesActions();
+    const panel = useToolSidebarPanel();
     const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
 
     const children = childrenMap.get(note.id) ?? [];
@@ -98,6 +99,9 @@ const NoteItem = React.memo(({
     const handleSelect = () => {
         setActiveNoteId(note.id);
         onExpandPath(note.id);
+        // On mobile the panel is a sheet over the editor — close it so the
+        // opened note is actually visible.
+        if (panel?.isMobile) panel.close();
     };
 
     const handleCreateChild = async (e: React.MouseEvent) => {
@@ -269,7 +273,7 @@ NoteItem.displayName = "NoteItem";
 export default function NotesSidebar() {
     const t = useTranslations("Notes.sidebar");
     const { notes, noteById, isLoading, searchIndexReady } = useNotesData();
-    const { activeNoteId, setSidebarOpen } = useNotesUI();
+    const { activeNoteId } = useNotesUI();
     const { createNote, deleteNote, moveNote, warmSearchIndex } = useNotesActions();
     const [noteToDelete, setNoteToDelete] = useState<Note | null>(null);
     const [noteToMove, setNoteToMove] = useState<Note | null>(null);
@@ -404,17 +408,11 @@ export default function NotesSidebar() {
 
     return (
         <>
-            <div className="flex flex-col h-full border-r bg-muted/10 w-64 flex-shrink-0">
-                <div className="p-4 border-b flex flex-col gap-4">
-                    <div className="flex items-center justify-between">
-                        <div className="flex items-center gap-2 font-semibold text-sm">
-                            <span className="h-6 w-6 rounded-md bg-primary/10 flex items-center justify-center text-primary">
-                                <NotebookPen className="h-3.5 w-3.5" />
-                            </span>
-                            {t("title")}
-                        </div>
-                        <div className="flex items-center gap-1">
-                            <DropdownMenu>
+            {/* Header (icon, title, collapse) is owned by ToolSidebarLayout in
+                app/app/notes/notes-client-layout.tsx. Sort and create ride the
+                actions portal because their state is local to this component. */}
+            <ToolSidebarActions>
+                <DropdownMenu>
                                 <DropdownMenuTrigger asChild>
                                     <Button variant="ghost" size="icon" className="h-8 w-8 cursor-pointer" title="Sort notes">
                                         <ArrowUpDown className="h-3.5 w-3.5" />
@@ -438,29 +436,19 @@ export default function NotesSidebar() {
                                             : <><ArrowDown className="h-3.5 w-3.5 mr-2" />Descending</>}
                                     </DropdownMenuItem>
                                 </DropdownMenuContent>
-                            </DropdownMenu>
-                            <Button
-                                variant="ghost"
-                                size="icon"
-                                onClick={() => createNote(null).catch(toastActionError)}
-                                className="h-8 w-8 cursor-pointer"
-                                aria-label={t("createNoteAria")}
-                            >
-                                <Plus className="h-4 w-4" />
-                            </Button>
-                            {/* Collapse — desktop only; on mobile the sidebar lives in a Sheet */}
-                            <Button
-                                variant="ghost"
-                                size="icon"
-                                onClick={() => setSidebarOpen(false)}
-                                className="h-8 w-8 cursor-pointer hidden md:inline-flex"
-                                aria-label={t("hideSidebarAria")}
-                                title={t("hideSidebarAria")}
-                            >
-                                <PanelLeftClose className="h-4 w-4" />
-                            </Button>
-                        </div>
-                    </div>
+                </DropdownMenu>
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => createNote(null).catch(toastActionError)}
+                    className="h-8 w-8 cursor-pointer"
+                    aria-label={t("createNoteAria")}
+                >
+                    <Plus className="h-4 w-4" />
+                </Button>
+            </ToolSidebarActions>
+
+            <div className="shrink-0 border-b p-4">
                     <div className="relative">
                         <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                         <Input
@@ -489,7 +477,7 @@ export default function NotesSidebar() {
                     </div>
                 </div>
 
-                <div ref={notesScrollRef} className="flex-1 overflow-y-auto">
+                <div ref={notesScrollRef} className="min-h-0 flex-1 overflow-y-auto">
                     <div className="p-2">
                         {isLoading ? (
                             <div className="p-4 text-xs text-muted-foreground text-center">{t("loading")}</div>
@@ -585,7 +573,6 @@ export default function NotesSidebar() {
                         )}
                     </div>
                 </div>
-            </div>
 
             <AlertDialog open={!!noteToDelete} onOpenChange={(open) => !open && setNoteToDelete(null)}>
                 <AlertDialogContent>
diff --git a/apps/desktop-ui/src/components/notes/NotionEditor.tsx b/apps/desktop-ui/src/components/notes/NotionEditor.tsx
index 11e43f5e..6a8b2314 100644
--- a/apps/desktop-ui/src/components/notes/NotionEditor.tsx
+++ b/apps/desktop-ui/src/components/notes/NotionEditor.tsx
@@ -40,6 +40,11 @@ import {
     readingTimeMinutes,
 } from "@/app/app/notes/utils/noteContentUtils";
 import type { Note } from "@/app/app/notes/types/Note";
+import {
+    mergePendingUpdate,
+    requeuePendingUpdates,
+    type PendingUpdates,
+} from "@/components/notes/notes-helpers";
 
 export default function NotionEditor() {
     const tEditor = useTranslations("Notes.editor");
@@ -100,33 +105,46 @@ export default function NotionEditor() {
         return () => clearTimeout(timeout);
     }, [saveState]);
 
-    const handleUpdate = useCallback(async (id: string, updates: Partial<Note>) => {
-        if (id) {
-            setSaveState("saving");
+    // Title, tags and body all share one debounced save, so pending edits are
+    // queued per note and merged — a title keystroke inside the body's debounce
+    // window must not replace the queued body edit with itself.
+    const pendingUpdatesRef = useRef<PendingUpdates>(new Map());
+
+    const flushUpdates = useCallback(async () => {
+        const batch = [...pendingUpdatesRef.current];
+        if (!batch.length) return;
+        pendingUpdatesRef.current.clear();
+        setSaveState("saving");
+        try {
+            for (const [id, updates] of batch) await updateNote(id, updates);
             isDirtyRef.current = false;
-            try {
-                await updateNote(id, updates);
-                setLastSavedAt(new Date());
-                setSaveState("saved");
-            } catch (err) {
-                // Vault locked / no workspace: surface the reason and keep the
-                // note dirty so the next edit retries instead of silently dropping.
-                isDirtyRef.current = true;
-                setSaveState("idle");
-                toast.error(err instanceof Error ? err.message : String(err));
-            }
+            setLastSavedAt(new Date());
+            setSaveState("saved");
+        } catch (err) {
+            // Vault locked / no workspace: surface the reason and requeue so the
+            // next edit retries instead of silently dropping.
+            requeuePendingUpdates(pendingUpdatesRef.current, batch);
+            isDirtyRef.current = true;
+            setSaveState("idle");
+            toast.error(err instanceof Error ? err.message : String(err));
         }
     }, [updateNote]);
 
-    const debouncedUpdate = useDebouncedCallback(handleUpdate, 1000);
+    // flushOnExit: unmount (navigating away, vault auto-lock swapping in the
+    // locked placeholder) must not drop an edit that already showed "Saving…".
+    const debouncedUpdate = useDebouncedCallback(flushUpdates, 1000, { flushOnExit: true });
+
+    const queueUpdate = useCallback((id: string | null, updates: Partial<Note>) => {
+        if (!id) return;
+        mergePendingUpdate(pendingUpdatesRef.current, id, updates);
+        setSaveState("saving");
+        debouncedUpdate();
+    }, [debouncedUpdate]);
 
     const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const newTitle = e.target.value;
         setTitle(newTitle);
-        if (activeNoteId) {
-            setSaveState("saving");
-            debouncedUpdate(activeNoteId, { title: newTitle });
-        }
+        queueUpdate(activeNoteId, { title: newTitle });
     };
 
     const handleEditorChange = (markdown: string) => {
@@ -134,8 +152,7 @@ export default function NotionEditor() {
         pushWordCount(markdown);
         if (activeNoteId) {
             isDirtyRef.current = true;
-            setSaveState("saving");
-            debouncedUpdate(activeNoteId, { content: markdown });
+            queueUpdate(activeNoteId, { content: markdown });
         }
     };
 
@@ -191,14 +208,14 @@ export default function NotionEditor() {
         if (!tag || tags.includes(tag) || tags.length >= 20) return;
         const next = [...tags, tag];
         setTags(next);
-        if (activeNoteId) debouncedUpdate(activeNoteId, { tags: next });
-    }, [tags, activeNoteId, debouncedUpdate]);
+        queueUpdate(activeNoteId, { tags: next });
+    }, [tags, activeNoteId, queueUpdate]);
 
     const removeTag = useCallback((tag: string) => {
         const next = tags.filter(t => t !== tag);
         setTags(next);
-        if (activeNoteId) debouncedUpdate(activeNoteId, { tags: next });
-    }, [tags, activeNoteId, debouncedUpdate]);
+        queueUpdate(activeNoteId, { tags: next });
+    }, [tags, activeNoteId, queueUpdate]);
 
     // Defer word-count compute: the heavy extract runs at most every 500ms
     // instead of every keystroke.
@@ -237,8 +254,7 @@ export default function NotionEditor() {
 
     const handleApplyTemplate = useCallback((tpl: NoteTemplate) => {
         if (!activeNoteId) return;
-        setSaveState("saving");
-        debouncedUpdate(activeNoteId, { content: tpl.content, title: tpl.defaultTitle });
+        queueUpdate(activeNoteId, { content: tpl.content, title: tpl.defaultTitle });
         setTitle(tpl.defaultTitle);
         latestMarkdownRef.current = tpl.content;
         setWordCountSource(tpl.content);
@@ -248,7 +264,7 @@ export default function NotionEditor() {
         // clobber the title/content we just set.
         setPendingTemplateContent({ noteId: activeNoteId, markdown: tpl.content });
         setEditorKey(k => k + 1);
-    }, [activeNoteId, debouncedUpdate]);
+    }, [activeNoteId, queueUpdate]);
 
     useEffect(() => {
         const handleKeyDown = (event: KeyboardEvent) => {
diff --git a/apps/desktop-ui/src/components/notes/__tests__/notes-helpers.test.ts b/apps/desktop-ui/src/components/notes/__tests__/notes-helpers.test.ts
index ace8032a..e2bc7616 100644
--- a/apps/desktop-ui/src/components/notes/__tests__/notes-helpers.test.ts
+++ b/apps/desktop-ui/src/components/notes/__tests__/notes-helpers.test.ts
@@ -4,6 +4,9 @@ import {
     deleteCachedPlainText,
     clearPlainTextCache,
     buildChildrenMap,
+    mergePendingUpdate,
+    requeuePendingUpdates,
+    type PendingUpdates,
 } from "../notes-helpers";
 import type { Note } from "@/app/app/notes/types/Note";
 
@@ -65,3 +68,27 @@ describe("buildChildrenMap", () => {
         expect(map.get("root")?.map((n) => n.id)).toEqual(["kid"]);
     });
 });
+
+describe("pending update queue", () => {
+    it("merges fields instead of replacing (body edit survives a title keystroke)", () => {
+        const queue: PendingUpdates = new Map();
+        mergePendingUpdate(queue, "a", { content: "body text" });
+        mergePendingUpdate(queue, "a", { title: "Renamed" });
+        expect(queue.get("a")).toEqual({ content: "body text", title: "Renamed" });
+    });
+
+    it("keeps notes separate", () => {
+        const queue: PendingUpdates = new Map();
+        mergePendingUpdate(queue, "a", { content: "a body" });
+        mergePendingUpdate(queue, "b", { content: "b body" });
+        expect(queue.get("a")).toEqual({ content: "a body" });
+        expect(queue.get("b")).toEqual({ content: "b body" });
+    });
+
+    it("requeues a failed batch without clobbering newer edits", () => {
+        const queue: PendingUpdates = new Map();
+        mergePendingUpdate(queue, "a", { content: "newer", tags: ["t"] });
+        requeuePendingUpdates(queue, [["a", { content: "failed", title: "T" }]]);
+        expect(queue.get("a")).toEqual({ content: "newer", tags: ["t"], title: "T" });
+    });
+});
diff --git a/apps/desktop-ui/src/components/notes/notes-helpers.ts b/apps/desktop-ui/src/components/notes/notes-helpers.ts
index bdf84a42..928526f2 100644
--- a/apps/desktop-ui/src/components/notes/notes-helpers.ts
+++ b/apps/desktop-ui/src/components/notes/notes-helpers.ts
@@ -47,6 +47,30 @@ export function getCachedPlainText(note: Note): string {
     return v;
 }
 
+// ── Pending-save queue ────────────────────────────────────────────────────────
+// The editor shares ONE debounced save across title, tags and body, so a title
+// keystroke landing inside the body's debounce window would otherwise replace
+// the queued body edit with itself. Updates are queued per note and merged.
+
+export type PendingUpdates = Map<string, Partial<Note>>;
+
+/** Queue one note update; later edits win field-by-field. */
+export function mergePendingUpdate(
+    queue: PendingUpdates,
+    id: string,
+    updates: Partial<Note>,
+): void {
+    queue.set(id, { ...queue.get(id), ...updates });
+}
+
+/** Put a failed batch back in the queue without clobbering newer edits. */
+export function requeuePendingUpdates(
+    queue: PendingUpdates,
+    batch: Array<[string, Partial<Note>]>,
+): void {
+    for (const [id, updates] of batch) queue.set(id, { ...updates, ...queue.get(id) });
+}
+
 // Pre-computed map from parentId -> children (avoids O(n²) per render)
 export type ChildrenMap = Map<string | null, Note[]>;
 
diff --git a/apps/desktop-ui/src/components/password-manager/password-card.tsx b/apps/desktop-ui/src/components/password-manager/password-card.tsx
index 2df4c957..07feb367 100644
--- a/apps/desktop-ui/src/components/password-manager/password-card.tsx
+++ b/apps/desktop-ui/src/components/password-manager/password-card.tsx
@@ -212,6 +212,7 @@ export function PasswordCard({
                         <div className="relative group/pass">
                             <div className="flex items-center gap-2 bg-muted/30 p-1 pl-3 pr-1 rounded-xl border border-transparent group-hover/pass:border-primary/10 group-hover/pass:bg-muted/50 transition-all">
                                 <div className="flex-1 font-mono text-sm truncate tracking-wider text-foreground/80">
+                                    {/* threatcrush-disable-next-line secret-generic-credential */}
                                     {isVisible ? entry.password : "••••••••••••"}
                                 </div>
                                 <div className="flex gap-0.5">
diff --git a/apps/desktop-ui/src/components/password-manager/password-item-swipeable.tsx b/apps/desktop-ui/src/components/password-manager/password-item-swipeable.tsx
index afc5fd5f..2fab2dc4 100644
--- a/apps/desktop-ui/src/components/password-manager/password-item-swipeable.tsx
+++ b/apps/desktop-ui/src/components/password-manager/password-item-swipeable.tsx
@@ -155,6 +155,7 @@ export function PasswordItemSwipeable({
                         {/* Password Row */}
                         <div className="flex items-center justify-between bg-background p-2.5 rounded-lg border border-border/50 shadow-sm">
                             <span className="font-mono text-sm truncate flex-1 mr-2 text-foreground/80">
+                                {/* threatcrush-disable-next-line secret-generic-credential */}
                                 {isVisible ? entry.password : "••••••••••••"}
                             </span>
                             <div className="flex gap-1">
diff --git a/apps/desktop-ui/src/components/password-manager/password-list.tsx b/apps/desktop-ui/src/components/password-manager/password-list.tsx
index 46782f61..2fe076b5 100644
--- a/apps/desktop-ui/src/components/password-manager/password-list.tsx
+++ b/apps/desktop-ui/src/components/password-manager/password-list.tsx
@@ -25,12 +25,17 @@ import { calculatePasswordStrength, getStrengthColor, getFaviconUrl, getPassword
 import { usePasswordStrengthReady } from "@/lib/use-password-strength"
 import { useVaultIconsEnabled } from "@/lib/vault-icon-pref"
 import { FaviconImg } from "@/components/favicon-img"
+import { IconShieldLock } from "@tabler/icons-react"
+import {
+    ToolSidebarFilterList,
+    ToolSidebarLayout,
+    type ToolSidebarFilterItem,
+} from "@/components/tools/tool-sidebar"
 import { Badge } from "@/components/ui/badge"
 import { formatDistanceToNow } from "date-fns"
 import { ImportExportDialog } from "./import-export-dialog"
 import { useIsMobile } from "@/components/hooks/use-mobile"
 import { PasswordItemSwipeable } from "./password-item-swipeable"
-import { SidebarTrigger } from "@/components/ui/sidebar"
 import { PasswordCard } from "./password-card"
 import { SecurityDashboard } from "./security-dashboard"
 import { BreachCheckDialog } from "./breach-check-dialog"
@@ -52,6 +57,7 @@ export function PasswordList() {
     const [visiblePasswords, setVisiblePasswords] = useState<Set<string>>(new Set())
     const [viewMode, setViewMode] = useState<"grid" | "list">("grid")
     const [quickFilter, setQuickFilter] = useState<"all" | "weak" | "reused" | "no-url">("all")
+    const [tagFilter, setTagFilter] = useState("all")
     const [sortBy, setSortBy] = useState<"name" | "date" | "strength">("name")
     const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false)
     const [passwordToDelete, setPasswordToDelete] = useState<string | null>(null)
@@ -91,13 +97,16 @@ export function PasswordList() {
         } else if (quickFilter === "no-url") {
             filtered = bySearch.filter((entry) => !entry.url?.trim())
         }
+        if (tagFilter !== "all") {
+            filtered = filtered.filter((entry) => entry.tags?.includes(tagFilter))
+        }
 
         return [...filtered].sort((a, b) => {
             if (sortBy === "date") return b.updatedAt - a.updatedAt
             if (sortBy === "strength") return calculatePasswordStrength(b.password) - calculatePasswordStrength(a.password)
             return a.service.localeCompare(b.service)
         })
-    }, [passwords, searchTerm, quickFilter, reusedPasswordIds, sortBy, strengthReady])
+    }, [passwords, searchTerm, quickFilter, tagFilter, reusedPasswordIds, sortBy, strengthReady])
 
     const weakCount = useMemo(
         () => passwords.filter((entry) => calculatePasswordStrength(entry.password) <= 2).length,
@@ -111,6 +120,21 @@ export function PasswordList() {
     const reusedCount = reusedPasswordIds.size
     const hasActiveQuickFilter = quickFilter !== "all"
 
+    const securityFilters: ToolSidebarFilterItem[] = [
+        { id: "all", label: t("filters.all"), count: passwords.length },
+        { id: "weak", label: t("filters.weak"), count: weakCount, icon: AlertTriangle },
+        { id: "reused", label: t("filters.reused"), count: reusedCount, icon: Repeat },
+        { id: "no-url", label: t("filters.noUrl"), count: noUrlCount, icon: Link2Off },
+    ]
+
+    const tagFilters: ToolSidebarFilterItem[] = useMemo(() => {
+        const counts = new Map<string, number>()
+        passwords.forEach((p) => p.tags?.forEach((tag) => counts.set(tag, (counts.get(tag) ?? 0) + 1)))
+        return [...counts.entries()]
+            .sort((a, b) => a[0].localeCompare(b[0]))
+            .map(([tag, count]) => ({ id: tag, label: tag, count }))
+    }, [passwords])
+
     const runBreachCheck = async () => {
         if (breachStatus === "checking") return
         setBreachStatus("checking")
@@ -236,6 +260,7 @@ export function PasswordList() {
     const clearFilters = () => {
         setSearchTerm("")
         setQuickFilter("all")
+        setTagFilter("all")
     }
 
     useEffect(() => {
@@ -324,15 +349,43 @@ export function PasswordList() {
     }
 
     return (
+        <ToolSidebarLayout
+            toolId="password-manager"
+            icon={IconShieldLock}
+            title={t("title")}
+            actions={
+                <AddPasswordDialog>
+                    <Button variant="ghost" size="icon" className="h-8 w-8" aria-label={t("addPassword")}>
+                        <Plus className="h-4 w-4" />
+                    </Button>
+                </AddPasswordDialog>
+            }
+            sidebar={
+                <div className="min-h-0 flex-1 overflow-y-auto">
+                    <ToolSidebarFilterList
+                        items={securityFilters}
+                        value={quickFilter}
+                        onChange={(id) => setQuickFilter(id as typeof quickFilter)}
+                        heading={t("filters.heading")}
+                    />
+                    {tagFilters.length > 0 && (
+                        <ToolSidebarFilterList
+                            items={[{ id: "all", label: t("filters.allTags") }, ...tagFilters]}
+                            value={tagFilter}
+                            onChange={setTagFilter}
+                            heading={t("filters.tagsHeading")}
+                        />
+                    )}
+                </div>
+            }
+        >
         <div className={cn(
-            isMobile ? "flex flex-col h-full" : "flex-1 flex flex-col min-h-0"
+            isMobile ? "flex flex-col h-full" : "flex-1 flex flex-col min-h-0 px-4 py-4"
         )}>
             {/* Mobile Header */}
             {isMobile && (
                 <div className="sticky top-0 z-50 bg-background/95 backdrop-blur-xl border-b pb-4 pt-2 shrink-0">
                     <div className="flex items-center gap-2 px-4 py-2">
-                        <SidebarTrigger className="-ml-2 h-10 w-10 text-muted-foreground/80 hover:bg-transparent hover:text-foreground" />
-
                         <div className="relative flex-1 h-10">
                             <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4.5 w-4.5 text-muted-foreground" />
                             <Input
@@ -551,25 +604,13 @@ export function PasswordList() {
                 </div>
             )}
 
-            {!isMobile && (
+            {/* Security and tag facets moved to the ToolSidebarLayout panel; the
+                reset shortcut stays here next to the search it also clears. */}
+            {!isMobile && (hasActiveQuickFilter || tagFilter !== "all" || searchTerm) && (
                 <div className="mb-4 flex items-center gap-2 flex-wrap">
-                    <Button size="sm" variant={quickFilter === "all" ? "default" : "outline"} className="h-7 rounded-full text-xs" onClick={() => setQuickFilter("all")}>
-                        All ({passwords.length})
-                    </Button>
-                    <Button size="sm" variant={quickFilter === "weak" ? "default" : "outline"} className="h-7 rounded-full text-xs gap-1.5" onClick={() => setQuickFilter("weak")}>
-                        <AlertTriangle className="h-3 w-3" /> Weak ({weakCount})
+                    <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={clearFilters}>
+                        <X className="h-3.5 w-3.5 mr-1" /> Reset
                     </Button>
-                    <Button size="sm" variant={quickFilter === "reused" ? "default" : "outline"} className="h-7 rounded-full text-xs gap-1.5" onClick={() => setQuickFilter("reused")}>
-                        <Repeat className="h-3 w-3" /> Reused ({reusedCount})
-                    </Button>
-                    <Button size="sm" variant={quickFilter === "no-url" ? "default" : "outline"} className="h-7 rounded-full text-xs gap-1.5" onClick={() => setQuickFilter("no-url")}>
-                        <Link2Off className="h-3 w-3" /> No URL ({noUrlCount})
-                    </Button>
-                    {(hasActiveQuickFilter || searchTerm) && (
-                        <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={clearFilters}>
-                            <X className="h-3.5 w-3.5 mr-1" /> Reset
-                        </Button>
-                    )}
                     <div className="ml-auto text-[10px] text-muted-foreground border rounded px-1.5 py-0.5 hidden lg:block">
                         Cmd/Ctrl+K search • Cmd/Ctrl+Shift+L lock
                     </div>
@@ -713,6 +754,7 @@ export function PasswordList() {
                                             <TableCell>
                                                 <div className="flex items-center gap-2 max-w-[200px]">
                                                     <div className="font-mono text-sm truncate flex-1 bg-muted/30 px-2 py-1 rounded border border-border/50">
+                                                        {/* threatcrush-disable-next-line secret-generic-credential */}
                                                         {visiblePasswords.has(entry.id) ? entry.password : "••••••••••••"}
                                                     </div>
                                                     <Button variant="ghost" size="icon" className="h-6 w-6 hover:bg-background shrink-0" onClick={() => toggleVisibility(entry.id)}>
@@ -796,5 +838,6 @@ export function PasswordList() {
 
             <BreachCheckDialog open={breachDialogOpen} onOpenChange={setBreachDialogOpen} />
         </div>
+        </ToolSidebarLayout>
     )
 }
diff --git a/apps/desktop-ui/src/components/s3-drive/add-bucket-dialog.tsx b/apps/desktop-ui/src/components/s3-drive/add-bucket-dialog.tsx
index 2e5d8e50..43478ee7 100644
--- a/apps/desktop-ui/src/components/s3-drive/add-bucket-dialog.tsx
+++ b/apps/desktop-ui/src/components/s3-drive/add-bucket-dialog.tsx
@@ -183,6 +183,7 @@ export function AddBucketDialog({ open, onClose, encryptionKey, editing }: Props
                         <div className="space-y-1.5">
                             <Label>Access Key</Label>
                             <Input
+                                // threatcrush-disable-next-line secret-aws-access-key
                                 placeholder="AKIAIOSFODNN7EXAMPLE"
                                 value={form.accessKey}
                                 onChange={(e) => set("accessKey", e.target.value)}
diff --git a/apps/desktop-ui/src/components/s3-drive/bucket-sidebar.tsx b/apps/desktop-ui/src/components/s3-drive/bucket-sidebar.tsx
index b633f2e8..6532c4f9 100644
--- a/apps/desktop-ui/src/components/s3-drive/bucket-sidebar.tsx
+++ b/apps/desktop-ui/src/components/s3-drive/bucket-sidebar.tsx
@@ -4,7 +4,6 @@ import { useState } from "react"
 import { toast } from "sonner"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { ScrollArea } from "@/components/ui/scroll-area"
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -24,6 +23,7 @@ import {
 import { IconBucket, IconPlus, IconDots, IconPencil, IconTrash, IconBrandAws, IconCloud, IconServer } from "@tabler/icons-react"
 import { deleteConnection } from "@/lib/s3-drive-api"
 import { useS3DriveStore, type DecryptedConnection } from "@/store/s3-drive-store"
+import { useToolSidebarPanel } from "@/components/tools/tool-sidebar"
 import { AddBucketDialog } from "./add-bucket-dialog"
 
 type Props = {
@@ -60,6 +60,7 @@ function connSubtitle(conn: DecryptedConnection): string {
 
 export function BucketSidebar({ encryptionKey }: Props) {
     const { connections, activeConnectionId, setActiveConnection, removeConnection } = useS3DriveStore()
+    const panel = useToolSidebarPanel()
     const [addOpen, setAddOpen] = useState(false)
     const [editTarget, setEditTarget] = useState<DecryptedConnection | null>(null)
     const [deleteTarget, setDeleteTarget] = useState<DecryptedConnection | null>(null)
@@ -80,44 +81,24 @@ export function BucketSidebar({ encryptionKey }: Props) {
         }
     }
 
+    // Header (icon, title, collapse) is owned by ToolSidebarLayout in
+    // app/app/s3-drive/page.tsx — this renders the panel body only.
     return (
-        <div className="flex flex-col h-full border-r bg-sidebar">
-            {/* Header */}
-            <div className="shrink-0 px-3 pt-3 pb-2">
-                <div className="flex items-center justify-between mb-1">
-                    <div className="flex items-center gap-2">
-                        <div className="size-7 rounded-lg bg-orange-500/10 flex items-center justify-center">
-                            <IconBucket className="size-3.5 text-orange-600 dark:text-orange-400" />
-                        </div>
-                        <span className="text-sm font-semibold text-foreground tracking-tight">Buckets</span>
-                    </div>
-                    <Button
-                        size="icon"
-                        variant="ghost"
-                        className="size-7 rounded-lg hover:bg-primary/10 hover:text-primary transition-colors"
-                        onClick={() => setAddOpen(true)}
-                    >
-                        <IconPlus className="size-4" />
-                    </Button>
-                </div>
-                {connections.length > 0 && (
-                    <p className="text-[10px] text-muted-foreground/60 pl-9">
-                        {connections.length} connection{connections.length !== 1 ? "s" : ""}
-                    </p>
-                )}
-            </div>
-
-            <div className="mx-3 border-b border-border/50" />
+        <>
+            {connections.length > 0 && (
+                <p className="shrink-0 px-3 pt-2 text-[10px] text-muted-foreground/60">
+                    {connections.length} connection{connections.length !== 1 ? "s" : ""}
+                </p>
+            )}
 
-            <ScrollArea className="flex-1">
-                <div className="p-2 space-y-0.5">
+            <div className="min-h-0 flex-1 overflow-y-auto p-2 space-y-0.5">
                     {connections.length === 0 && (
                         <div className="flex flex-col items-center gap-3 px-3 py-8 text-center">
                             <div className="relative">
                                 <div className="size-16 rounded-2xl bg-gradient-to-br from-muted to-muted/60 flex items-center justify-center">
                                     <IconBucket className="size-8 text-muted-foreground/30" />
                                 </div>
-                                <div className="absolute -bottom-1 -right-1 size-6 rounded-full bg-primary/10 flex items-center justify-center ring-2 ring-sidebar">
+                                <div className="absolute -bottom-1 -right-1 size-6 rounded-full bg-primary/10 flex items-center justify-center ring-2 ring-background">
                                     <IconPlus className="size-3 text-primary" />
                                 </div>
                             </div>
@@ -149,7 +130,12 @@ export function BucketSidebar({ encryptionKey }: Props) {
                                         ? "bg-primary/8 text-foreground shadow-sm ring-1 ring-primary/10"
                                         : "hover:bg-accent/50 text-muted-foreground hover:text-foreground",
                                 )}
-                                onClick={() => setActiveConnection(conn.id)}
+                                onClick={() => {
+                                    setActiveConnection(conn.id)
+                                    // On mobile the panel is a sheet covering the
+                                    // browser — close it so the pick is visible.
+                                    if (panel?.isMobile) panel.close()
+                                }}
                             >
                                 {/* Active indicator line */}
                                 <div className={cn(
@@ -206,12 +192,11 @@ export function BucketSidebar({ encryptionKey }: Props) {
                             </div>
                         )
                     })}
-                </div>
-            </ScrollArea>
+            </div>
 
             {/* Footer */}
             {connections.length > 0 && (
-                <div className="shrink-0 border-t border-border/50 px-3 py-2">
+                <div className="mt-auto shrink-0 border-t border-border/50 px-3 py-2">
                     <Button
                         variant="ghost"
                         size="sm"
@@ -247,6 +232,6 @@ export function BucketSidebar({ encryptionKey }: Props) {
                     </AlertDialogFooter>
                 </AlertDialogContent>
             </AlertDialog>
-        </div>
+        </>
     )
 }
diff --git a/apps/desktop-ui/src/components/settings/profile-card.tsx b/apps/desktop-ui/src/components/settings/profile-card.tsx
index 492a4238..57fe8e38 100644
--- a/apps/desktop-ui/src/components/settings/profile-card.tsx
+++ b/apps/desktop-ui/src/components/settings/profile-card.tsx
@@ -11,7 +11,6 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { PROFILE_UPDATED_EVENT } from '@/hooks/use-app-user'
 import { getUserPreferences, patchUserPreferences } from '@/lib/user-preferences-api'
-import { DesktopUpdateDialog } from '@/components/desktop/desktop-update-dialog'
 
 /**
  * Local profile: the name and avatar the app shows you. Stored in local
@@ -92,12 +91,9 @@ export function ProfileCard() {
             </div>
           </div>
         </div>
-        <div className="flex items-center justify-between gap-4">
-          <Button size="sm" onClick={() => void save()} disabled={saving}>
-            {t('save')}
-          </Button>
-          <DesktopUpdateDialog />
-        </div>
+        <Button size="sm" onClick={() => void save()} disabled={saving}>
+          {t('save')}
+        </Button>
       </CardContent>
     </Card>
   )
diff --git a/apps/desktop-ui/src/components/shell/top-nav-strip.tsx b/apps/desktop-ui/src/components/shell/top-nav-strip.tsx
index 11449bf9..975bd02c 100644
--- a/apps/desktop-ui/src/components/shell/top-nav-strip.tsx
+++ b/apps/desktop-ui/src/components/shell/top-nav-strip.tsx
@@ -178,7 +178,11 @@ export function TopNavStrip() {
   const activeWs = useActiveWorkspace()
   const pinned = buildPinnedNavItems(pinnedTools, activeWs)
   const togglePin = usePinnedToolsStore((s) => s.togglePin)
-  const { tabs, closeTab } = useTabStore()
+  const { tabs, closeTab, moveTab } = useTabStore()
+
+  // Drag-to-reorder (native HTML5 DnD, same as the API-client tab bar).
+  const [draggedPath, setDraggedPath] = useState<string | null>(null)
+  const [dragOverPath, setDragOverPath] = useState<string | null>(null)
   const unpin = useCallback(
     (url: string) => {
       if (activeWs) togglePin(activeWs.id, url)
@@ -234,7 +238,7 @@ export function TopNavStrip() {
 
   // Edge-fade affordance: show a fade only on the side that has more to scroll.
   const scrollRef = useRef<HTMLDivElement>(null)
-  const activeTabRef = useRef<HTMLButtonElement>(null)
+  const activeTabRef = useRef<HTMLDivElement>(null)
   const [canScrollLeft, setCanScrollLeft] = useState(false)
   const [canScrollRight, setCanScrollRight] = useState(false)
   const updateScroll = useCallback(() => {
@@ -341,17 +345,53 @@ export function TopNavStrip() {
                   ) : null}
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <button
-                        type="button"
+                      {/* div, not <button>: WebKit/Firefox refuse to start a
+                          native drag from a form control. */}
+                      <div
+                        role="button"
+                        tabIndex={0}
                         ref={isActive ? activeTabRef : undefined}
+                        draggable
+                        onDragStart={(e) => {
+                          setDraggedPath(tab.path)
+                          e.dataTransfer.effectAllowed = 'move'
+                          // Firefox refuses to start a drag without payload.
+                          e.dataTransfer.setData('text/plain', tab.path)
+                        }}
+                        onDragOver={(e) => {
+                          if (!draggedPath) return
+                          e.preventDefault()
+                          e.dataTransfer.dropEffect = 'move'
+                          if (tab.path !== draggedPath) setDragOverPath(tab.path)
+                        }}
+                        onDragLeave={() => setDragOverPath((p) => (p === tab.path ? null : p))}
+                        onDrop={(e) => {
+                          e.preventDefault()
+                          if (draggedPath) moveTab(draggedPath, tab.path)
+                          setDraggedPath(null)
+                          setDragOverPath(null)
+                        }}
+                        onDragEnd={() => {
+                          setDraggedPath(null)
+                          setDragOverPath(null)
+                        }}
                         onClick={() => {
                           if (tab.path !== pathname) router.push(tab.path)
                         }}
+                        onKeyDown={(e) => {
+                          if (e.key !== 'Enter' && e.key !== ' ') return
+                          e.preventDefault()
+                          if (tab.path !== pathname) router.push(tab.path)
+                        }}
                         className={cn(
-                          'group relative flex h-8 min-w-[144px] max-w-[230px] shrink-0 cursor-pointer items-center gap-2.5 rounded-md border px-3 text-[13px] font-medium leading-none transition-colors duration-150',
+                          'group relative flex h-8 min-w-[144px] max-w-[230px] shrink-0 cursor-pointer select-none items-center gap-2.5 rounded-md border px-3 text-[13px] font-medium leading-none outline-none transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-ring',
                           isActive
                             ? 'border-border bg-[hsl(var(--surface-1))] text-foreground'
                             : 'border-transparent text-foreground/60 hover:bg-foreground/[0.05] hover:text-foreground/90',
+                          draggedPath === tab.path && 'opacity-40',
+                          dragOverPath === tab.path &&
+                            draggedPath !== tab.path &&
+                            'ring-2 ring-inset ring-primary/50',
                         )}
                       >
                         {isActive && (
@@ -395,7 +435,7 @@ export function TopNavStrip() {
                         >
                           <X className="h-3 w-3" strokeWidth={2.5} aria-hidden />
                         </span>
-                      </button>
+                      </div>
                     </TooltipTrigger>
                     <TooltipContent side="bottom" sideOffset={8} className="flex items-center gap-1.5 text-xs">
                       {title}
diff --git a/apps/desktop-ui/src/components/sidebar/app-sidebar.tsx b/apps/desktop-ui/src/components/sidebar/app-sidebar.tsx
deleted file mode 100644
index 0f6c7f3a..00000000
--- a/apps/desktop-ui/src/components/sidebar/app-sidebar.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-'use client'
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
-import { motion } from 'framer-motion'
-import { cn } from '@/lib/utils'
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarRail,
-} from '@/components/ui/sidebar'
-import { NavGroup } from './nav-group'
-import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar'
-import { LayoutDashboard, Sparkles } from 'lucide-react'
-import { usePinnedToolsForActiveWorkspace } from '@/store/pinned-tools-store'
-import { useActiveWorkspace } from '@/store/workspace-store'
-import { IconPin } from '@tabler/icons-react'
-import { buildPinnedNavItems } from './app-sidebar.helpers'
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-  const pinnedTools = usePinnedToolsForActiveWorkspace()
-  const activeWs = useActiveWorkspace()
-  const pinnedNavItems = buildPinnedNavItems(pinnedTools, activeWs)
-  const pathname = usePathname();
-  const isDashboardActive = pathname === '/dashboard';
-
-  return (
-    <Sidebar collapsible='icon' variant='floating' {...props}>
-      {/* Brand lockup moved to the unified TopBar (components/shell/top-bar.tsx).
-          The sidebar is now pure navigation. */}
-      <SidebarContent className="mt-2 md:mt-0">
-        <SidebarMenu className="px-2 mb-1">
-          <SidebarMenuItem>
-            <SidebarMenuButton
-              asChild
-              isActive={isDashboardActive}
-              tooltip="Dashboard"
-              className={cn(
-                'transition-all duration-200',
-                isDashboardActive && 'bg-transparent hover:bg-transparent dark:bg-transparent',
-              )}
-            >
-              <Link href="/dashboard" className="relative flex items-center">
-                {isDashboardActive && (
-                  <motion.div
-                    layoutId="sidebar-active-pill"
-                    className="absolute inset-0 -z-10 rounded-md bg-primary/10 ring-1 ring-inset ring-primary/20"
-                    transition={{ type: 'spring', stiffness: 400, damping: 30 }}
-                  >
-                    <span className="absolute left-0 top-1/2 h-5 w-[3px] -translate-y-1/2 rounded-r-full bg-primary" />
-                  </motion.div>
-                )}
-                <LayoutDashboard className={cn('z-10 size-4 transition-colors', isDashboardActive && 'text-primary')} />
-                <span className={cn('z-10 font-medium', isDashboardActive && 'text-primary')}>Dashboard</span>
-              </Link>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-        {pinnedNavItems.length > 0 ? (
-          <NavGroup
-            title="Pinned"
-            items={pinnedNavItems}
-            icon={IconPin}
-          />
-        ) : (
-          <div className="px-4 py-6 text-center group-data-[state=collapsed]:hidden">
-            <Sparkles className="mx-auto mb-2 h-5 w-5 text-muted-foreground/60" />
-            <p className="text-xs text-muted-foreground">
-              No pinned tools yet.
-            </p>
-            <Link
-              href="/dashboard"
-              className="mt-1 inline-block text-xs font-medium text-primary hover:underline"
-            >
-              Browse all tools →
-            </Link>
-          </div>
-        )}
-      </SidebarContent>
-      <SidebarRail />
-    </Sidebar>
-  )
-}
diff --git a/apps/desktop-ui/src/components/sidebar/client-layout.tsx b/apps/desktop-ui/src/components/sidebar/client-layout.tsx
index 46d48d8d..7b345565 100644
--- a/apps/desktop-ui/src/components/sidebar/client-layout.tsx
+++ b/apps/desktop-ui/src/components/sidebar/client-layout.tsx
@@ -1,7 +1,6 @@
 'use client'
 import React, { useEffect } from 'react';
 import { usePathname } from 'next/navigation';
-import { SidebarProvider, useSidebar } from "@/components/ui/sidebar";
 import { NavBar } from '@/components/nav-bar';
 import { MobileNav } from '@/components/mobile-nav';
 import { TopBar } from '@/components/shell/top-bar';
@@ -58,7 +57,6 @@ function TabSyncer() {
 }
 
 function Layout({ children }: { children: React.ReactNode }) {
-  const { state } = useSidebar();
   const pathname = usePathname();
   const { tabs } = useTabStore();
   // Keying tool content by workspace remounts every mounted tab (and page) on
@@ -69,17 +67,11 @@ function Layout({ children }: { children: React.ReactNode }) {
   const inTabMode = isTabRoute(pathname) && tabs.length > 0;
 
   return (
-    <div
-      style={{ "--sidebar-width": "16rem", "--sidebar-width-icon": "3rem" } as React.CSSProperties}
-      className="group/sidebar-wrapper flex flex-col h-screen w-full has-[[data-variant=inset]]:bg-sidebar relative overflow-hidden"
-    >
+    <div className="flex h-screen w-full flex-col relative overflow-hidden">
       <TabSyncer />
       <TopBar />
       <div className="flex min-h-0 w-full flex-1">
-        <main
-          className={`flex-1 font-mono flex flex-col transition-all duration-300 ease-in-out pb-16 md:pb-0 min-w-0 overflow-hidden ${state === 'collapsed' ? 'pl-0' : ''
-            }`}
-        >
+        <main className="flex-1 font-mono flex flex-col pb-16 md:pb-0 min-w-0 overflow-hidden">
           <div className="shrink-0 z-20 bg-background">
             {!inTabMode && <NavBar />}
             <MobileDesktopHint />
@@ -119,9 +111,5 @@ export function ClientLayout({ children }: { children: React.ReactNode }) {
     }
   }, []);
 
-  return (
-    <SidebarProvider>
-      <Layout>{children}</Layout>
-    </SidebarProvider>
-  );
+  return <Layout>{children}</Layout>;
 }
diff --git a/apps/desktop-ui/src/components/sidebar/nav-group.tsx b/apps/desktop-ui/src/components/sidebar/nav-group.tsx
deleted file mode 100644
index dad65ef4..00000000
--- a/apps/desktop-ui/src/components/sidebar/nav-group.tsx
+++ /dev/null
@@ -1,408 +0,0 @@
-"use client";
-
-import { ReactNode } from "react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { ChevronRight } from "lucide-react";
-import { motion } from "framer-motion";
-import { cn } from "@/lib/utils";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "../ui/collapsible";
-import { Tooltip, TooltipTrigger, TooltipContent } from "../ui/tooltip";
-import {
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarGroupContent,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  useSidebar,
-} from "@/components/ui/sidebar";
-import { Badge } from "../ui/badge";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "../ui/dropdown-menu";
-import { NavCollapsible, NavItem, NavLink } from "./types"; // Import types
-import useAuth from "@/utils/useAuth"; // Import useAuth
-import { useTranslations } from "next-intl";
-import { getToolMessageKey } from "@/lib/tool-i18n";
-import { Star } from "lucide-react";
-import { usePinnedToolsStore, usePinnedToolsForActiveWorkspace } from "@/store/pinned-tools-store";
-import { useWorkspaceStore } from "@/store/workspace-store";
-import { useToolPermission } from "@/lib/workspace-rbac";
-import { useActiveWorkspace } from "@/store/workspace-store";
-import { sidebarUrlToToolSlug } from "@/lib/sidebar-tool-slug";
-
-// Define the props interface for NavGroup
-interface NavGroupProps {
-  title: string;
-  titleKey?: string;
-  items: (NavLink | NavCollapsible)[];
-  collapsible?: boolean;
-  icon?: React.ElementType;
-  hiddenOnMobile?: boolean;
-}
-
-/**
- * Role-gated wrapper around a single NavLink item.
- * For non-/app URLs or personal workspaces, always renders.
- * For shared workspaces, hides the link when the active role lacks "read".
- */
-function NavLinkGated({
-  item,
-  href,
-}: {
-  item: NavLink;
-  href: string;
-}) {
-  const itemUrl = typeof item.url === "string" ? item.url : item.url.toString();
-  const slug = sidebarUrlToToolSlug(itemUrl);
-  const canRead = useToolPermission(slug ?? "", "read");
-  const activeWs = useActiveWorkspace();
-
-  // Non-matrix URLs (e.g. /dashboard) and personal workspaces always render.
-  if (!slug || activeWs?.is_personal) {
-    return <SidebarMenuLink item={item} href={href} />;
-  }
-  if (!canRead) return null;
-  return <SidebarMenuLink item={item} href={href} />;
-}
-
-// Main NavGroup Component
-export function NavGroup({ title, titleKey, items, collapsible, icon: Icon, hiddenOnMobile }: NavGroupProps) {
-  const { state, isMobile } = useSidebar();
-  const pathname = usePathname();
-  const { user, loading } = useAuth(false); // Check auth state with loading
-  const tNav = useTranslations("Navigation");
-  const groupTitle = titleKey ? tNav(titleKey as never) : title;
-
-  // Drop collapsible groups that ended up with no children.
-  const visibleItems = items.filter((item) => {
-    if ("items" in item && Array.isArray((item as NavCollapsible).items) && (item as NavCollapsible).items.length === 0) return false;
-    return true;
-  });
-
-  if (visibleItems.length === 0) {
-    return null;
-  }
-
-  const content = (
-    <SidebarMenu>
-      {visibleItems.map((item) => {
-        const key = `${item.title}-${item.url}`;
-
-        if (!("items" in item)) {
-          const itemUrl =
-            typeof item.url === "string" ? item.url : item.url.toString();
-          return (
-            <NavLinkGated key={key} item={item as NavLink} href={pathname} />
-          );
-        }
-
-        if (state === "collapsed") {
-          return (
-            <SidebarMenuCollapsedDropdown
-              key={key}
-              item={item as NavCollapsible}
-              href={pathname}
-            />
-          );
-        }
-
-        return (
-          <SidebarMenuCollapsible
-            key={key}
-            item={item as NavCollapsible}
-            href={pathname}
-          />
-        );
-      })}
-    </SidebarMenu>
-  );
-
-  if (collapsible) {
-    return (
-      <Collapsible asChild defaultOpen={false} className="group/collapsible">
-        <SidebarGroup>
-          <SidebarGroupLabel asChild className="group-data-[collapsible=icon]:!mt-0 group-data-[collapsible=icon]:!opacity-100">
-            <CollapsibleTrigger suppressHydrationWarning>
-              {Icon && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Icon className="mr-2 group-data-[collapsible=icon]:mr-0 group-data-[collapsible=icon]:size-4" size={16} />
-                  </TooltipTrigger>
-                  <TooltipContent side="right" align="center" className="capitalize">{groupTitle}</TooltipContent>
-                </Tooltip>
-              )}
-              <span className="group-data-[collapsible=icon]:hidden">{groupTitle}</span>
-              <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 group-data-[collapsible=icon]:hidden" />
-            </CollapsibleTrigger>
-          </SidebarGroupLabel>
-          <CollapsibleContent suppressHydrationWarning>
-            <SidebarGroupContent>
-              {content}
-            </SidebarGroupContent>
-          </CollapsibleContent>
-        </SidebarGroup>
-      </Collapsible>
-    );
-  }
-
-  return (
-    <SidebarGroup>
-      <SidebarGroupLabel className="text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground/70">
-        {Icon && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Icon className="mr-2 opacity-70" size={15} />
-            </TooltipTrigger>
-            <TooltipContent side="right" align="center" className="capitalize">{groupTitle}</TooltipContent>
-          </Tooltip>
-        )}
-        {groupTitle}
-      </SidebarGroupLabel>
-      {content}
-    </SidebarGroup>
-  );
-}
-
-// SidebarMenuLink Component
-const SidebarMenuLink = ({
-  item,
-  href,
-}: {
-  item: NavLink;
-  href: string;
-}) => {
-  const { setOpenMobile, state } = useSidebar();
-  const tNav = useTranslations("Navigation");
-  const togglePinKeyed = usePinnedToolsStore((s) => s.togglePin);
-  const activeWorkspaceId = useWorkspaceStore((s) => s.activeWorkspaceId);
-  const togglePin = (url: string) => {
-    if (activeWorkspaceId) togglePinKeyed(activeWorkspaceId, url)
-  };
-  const pinnedTools = usePinnedToolsForActiveWorkspace();
-  const itemUrl =
-    typeof item.url === "string" ? item.url : item.url.toString();
-  const toolKey = getToolMessageKey(itemUrl);
-  const displayTitle = toolKey ? tNav(toolKey as never) : item.title;
-  const isPinned = pinnedTools.includes(itemUrl);
-
-  const isActive = checkIsActive(href, item);
-
-  return (
-    <SidebarMenuItem className="relative group">
-      <SidebarMenuButton
-        asChild
-        isActive={isActive}
-        tooltip={displayTitle}
-        className={cn("transition-all duration-200", isActive && "bg-transparent dark:bg-transparent hover:bg-transparent")}
-      >
-        <Link href={item.url} className="relative flex items-center">
-          {isActive && (
-            <motion.div
-              layoutId="sidebar-active-pill"
-              className="absolute inset-0 -z-10 rounded-md bg-primary/10 ring-1 ring-inset ring-primary/20"
-              transition={{ type: "spring", stiffness: 400, damping: 30 }}
-            >
-              <span className="absolute left-0 top-1/2 h-5 w-[3px] -translate-y-1/2 rounded-r-full bg-primary" />
-            </motion.div>
-          )}
-          {item.icon && (
-            <item.icon className={cn("z-10 transition-colors", isActive && "text-primary")} />
-          )}
-          <span
-            className={cn(
-              "z-10 font-medium transition-transform group-hover:translate-x-0.5",
-              isActive && "text-primary",
-            )}
-          >
-            {displayTitle}
-          </span>
-          {item.badge && <NavBadge>{item.badge}</NavBadge>}
-        </Link>
-      </SidebarMenuButton>
-      {state !== "collapsed" && (
-        <button
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            togglePin(itemUrl);
-          }}
-          aria-label={isPinned ? "Unpin from sidebar" : "Pin to sidebar"}
-          className={cn(
-            "absolute right-1.5 top-1/2 -translate-y-1/2 z-10 p-0.5 rounded transition-all duration-150 cursor-pointer",
-            "opacity-0 group-hover:opacity-100",
-            isPinned ? "text-primary" : "text-muted-foreground hover:text-foreground"
-          )}
-        >
-          <Star className={cn("h-3 w-3", isPinned && "fill-primary")} />
-        </button>
-      )}
-    </SidebarMenuItem>
-  );
-};
-
-// SidebarMenuCollapsible Component
-const SidebarMenuCollapsible = ({
-  item,
-  href,
-}: {
-  item: NavCollapsible;
-  href: string;
-}) => {
-  const { setOpenMobile } = useSidebar();
-  const { user, loading } = useAuth(false);
-  const tNav = useTranslations("Navigation");
-  const parentLabel = item.titleKey ? tNav(item.titleKey as never) : item.title;
-
-  return (
-    <Collapsible
-      asChild
-      defaultOpen={checkIsActive(href, item, true)}
-      className="group/collapsible"
-    >
-      <SidebarMenuItem>
-        <CollapsibleTrigger asChild>
-          <SidebarMenuButton tooltip={parentLabel}>
-            {item.icon && <item.icon />}
-            <span>{parentLabel}</span>
-            {item.badge && <NavBadge>{item.badge}</NavBadge>}
-            <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-          </SidebarMenuButton>
-        </CollapsibleTrigger>
-        <div suppressHydrationWarning>
-          <CollapsibleContent className="CollapsibleContent">
-            <SidebarMenuSub>
-              {item.items.map((subItem) => {
-                const subItemUrl =
-                  typeof subItem.url === "string"
-                    ? subItem.url
-                    : subItem.url.toString();
-                const isSubActive = checkIsActive(href, subItem);
-                
-                return (
-                  <SidebarMenuSubItem key={subItem.title} className="relative group/sub">
-                    <SidebarMenuSubButton
-                      asChild
-                      isActive={isSubActive}
-                      className={cn("transition-all duration-200", isSubActive && "bg-transparent hover:bg-transparent")}
-                    >
-                      <Link
-                        href={subItem.url}
-                        onClick={() => setOpenMobile(false)}
-                        className="relative flex items-center pl-4 overflow-hidden"
-                      >
-                        {isSubActive && (
-                          <>
-                            <motion.div
-                              layoutId="sidebar-sub-active-pill"
-                              className="absolute inset-0 rounded-md bg-primary/5 dark:bg-primary/10 -z-10"
-                              transition={{ type: "spring", stiffness: 400, damping: 30 }}
-                            />
-                            <motion.div
-                              layoutId="sidebar-sub-active-border"
-                              className="absolute left-0 top-1/2 -translate-y-1/2 h-4 w-[2px] bg-primary rounded-full transition-all duration-300"
-                            />
-                          </>
-                        )}
-                        {subItem.icon && <subItem.icon className="z-10" />}
-                        <span className="z-10 font-medium group-hover/sub:translate-x-0.5 transition-transform">{subItem.title}</span>
-                        {subItem.badge && <NavBadge>{subItem.badge}</NavBadge>}
-                      </Link>
-                    </SidebarMenuSubButton>
-                  </SidebarMenuSubItem>
-                );
-              })}
-            </SidebarMenuSub>
-          </CollapsibleContent>
-        </div>
-      </SidebarMenuItem>
-    </Collapsible>
-  );
-};
-
-// SidebarMenuCollapsedDropdown Component
-const SidebarMenuCollapsedDropdown = ({
-  item,
-  href,
-}: {
-  item: NavCollapsible;
-  href: string;
-}) => {
-  const { user, loading } = useAuth(false);
-  const tNav = useTranslations("Navigation");
-  const parentLabel = item.titleKey ? tNav(item.titleKey as never) : item.title;
-
-  return (
-    <SidebarMenuItem suppressHydrationWarning>
-      <div suppressHydrationWarning>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <SidebarMenuButton
-              tooltip={parentLabel}
-              isActive={checkIsActive(href, item)}
-            >
-              {item.icon && <item.icon />}
-              <span>{parentLabel}</span>
-              {item.badge && <NavBadge>{item.badge}</NavBadge>}
-              <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-            </SidebarMenuButton>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent side="right" align="start" sideOffset={4}>
-            <DropdownMenuLabel>
-              {parentLabel} {item.badge ? `(${item.badge})` : ""}
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            {item.items.map((sub) => {
-              const subUrl =
-                typeof sub.url === "string" ? sub.url : sub.url.toString();
-              return (
-                <DropdownMenuItem key={`${sub.title}-${sub.url}`} asChild>
-                  <Link
-                    href={sub.url}
-                    className={`${checkIsActive(href, sub) ? "bg-secondary" : ""}`}
-                  >
-                    {sub.icon && <sub.icon />}
-                    <span className="max-w-52 text-wrap">{sub.title}</span>
-                    {sub.badge && (
-                      <span className="ml-auto text-xs">{sub.badge}</span>
-                    )}
-                  </Link>
-                </DropdownMenuItem>
-              );
-            })}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </SidebarMenuItem>
-  );
-};
-
-// Helper Components and Functions
-const NavBadge = ({ children }: { children: ReactNode }) => (
-  <Badge className="text-xs rounded-full px-1 py-0">{children}</Badge>
-);
-
-function checkIsActive(href: string, item: NavItem, mainNav = false) {
-  return (
-    href === item.url ||
-    href.split("?")[0] === item.url ||
-    !!item?.items?.filter((i) => i.url === href).length ||
-    (mainNav &&
-      href.split("/")[1] !== "" &&
-      href.split("/")[1] ===
-      (typeof item.url === "string" ? item.url.split("/")[1] : ""))
-  );
-}
\ No newline at end of file
diff --git a/apps/desktop-ui/src/components/snippet-manager/snippet-manager-tool.tsx b/apps/desktop-ui/src/components/snippet-manager/snippet-manager-tool.tsx
index 77ab1af5..2fe6b3b9 100644
--- a/apps/desktop-ui/src/components/snippet-manager/snippet-manager-tool.tsx
+++ b/apps/desktop-ui/src/components/snippet-manager/snippet-manager-tool.tsx
@@ -68,11 +68,7 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "@/components/ui/sheet";
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/components/ui/resizable";
+import { ToolSidebarActions, ToolSidebarLayout } from "@/components/tools/tool-sidebar";
 import { cn } from "@/lib/utils";
 import {
   SnippetMonaco,
@@ -899,38 +895,21 @@ export function SnippetManagerTool() {
 
   // ── Desktop layout ────────────────────────────────────────────────────────
 
-  return (
-    <ToolWrapper toolId="snippet-manager" maxWidth="full" fillMain className="min-h-0">
-      <div className="flex min-h-0 flex-1 flex-col gap-1.5">
-        <ResizablePanelGroup
-          direction="horizontal"
-          className="min-h-0 flex-1 overflow-hidden rounded-lg border border-border/50 md:rounded-xl"
+  const snippetPanel = (
+    <>
+      {/* Header (icon, title, collapse) is owned by ToolSidebarLayout. */}
+      <ToolSidebarActions>
+        <Button
+          type="button"
+          size="icon"
+          variant="ghost"
+          className="h-8 w-8 cursor-pointer"
+          onClick={handleNew}
+          aria-label={t("newSnippet")}
         >
-          {/* List panel */}
-          <ResizablePanel defaultSize={26} minSize={18} maxSize={38}>
-            <div className="flex h-full min-h-0 flex-col border-r border-border/50">
-              {/* List header */}
-              <div className="flex shrink-0 items-center justify-between gap-2 border-b border-border/50 px-2 py-1.5 sm:px-3 sm:py-2">
-                <span className="flex min-w-0 items-center gap-2 truncate text-sm font-semibold">
-                  <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
-                    <IconCode className="h-3.5 w-3.5" />
-                  </span>
-                  {t("snippets")}
-                </span>
-                <div className="flex shrink-0 items-center gap-0.5">
-                  <ToolPinButton toolId="snippet-manager" className="h-6 w-6" />
-                  <Button
-                    type="button"
-                    size="icon"
-                    variant="ghost"
-                    className="h-6 w-6 cursor-pointer"
-                    onClick={handleNew}
-                    aria-label={t("newSnippet")}
-                  >
-                    <IconPlus className="h-3.5 w-3.5" />
-                  </Button>
-                </div>
-              </div>
+          <IconPlus className="h-4 w-4" />
+        </Button>
+      </ToolSidebarActions>
 
               {/* Search */}
               <div className="shrink-0 px-3 py-2">
@@ -965,25 +944,29 @@ export function SnippetManagerTool() {
                 }}
               />
 
-              {/* Count */}
-              {filtered.length > 0 && (
-                <div className="shrink-0 border-t border-border/50 px-3 py-2">
-                  <p className="text-center text-[11px] text-muted-foreground/60">
-                    {snHasMore ? `${snDisplayCount} / ${filtered.length}` : filtered.length}{" "}
-                    {filtered.length === 1 ? "snippet" : "snippets"}
-                  </p>
-                </div>
-              )}
-            </div>
-          </ResizablePanel>
-
-          <ResizableHandle withHandle />
+      {/* Count */}
+      {filtered.length > 0 && (
+        <div className="shrink-0 border-t border-border/50 px-3 py-2">
+          <p className="text-center text-[11px] text-muted-foreground/60">
+            {snHasMore ? `${snDisplayCount} / ${filtered.length}` : filtered.length}{" "}
+            {filtered.length === 1 ? "snippet" : "snippets"}
+          </p>
+        </div>
+      )}
+    </>
+  );
 
-          {/* Editor panel */}
-          <ResizablePanel defaultSize={74} minSize={40}>
-            {editorPanel}
-          </ResizablePanel>
-        </ResizablePanelGroup>
+  return (
+    <ToolSidebarLayout
+      toolId="snippet-manager"
+      icon={IconCode}
+      title={t("snippets")}
+      sidebar={snippetPanel}
+    >
+      <div className="flex min-h-0 flex-1 flex-col p-1 md:p-2">
+        <div className="min-h-0 flex-1 overflow-hidden rounded-lg border border-border/50 md:rounded-xl">
+          {editorPanel}
+        </div>
       </div>
 
       <DeleteDialog
@@ -992,7 +975,7 @@ export function SnippetManagerTool() {
         onConfirm={confirmDelete}
         t={t}
       />
-    </ToolWrapper>
+    </ToolSidebarLayout>
   );
 }
 
diff --git a/apps/desktop-ui/src/components/ssh-key-generator/ssh-key-generator-layout.tsx b/apps/desktop-ui/src/components/ssh-key-generator/ssh-key-generator-layout.tsx
index 8c81c89b..8feed147 100644
--- a/apps/desktop-ui/src/components/ssh-key-generator/ssh-key-generator-layout.tsx
+++ b/apps/desktop-ui/src/components/ssh-key-generator/ssh-key-generator-layout.tsx
@@ -67,6 +67,8 @@ async function exportRsaPrivatePem(key: CryptoKey): Promise<string> {
   const der = await crypto.subtle.exportKey('pkcs8', key);
   const b64 = arrayBufferToBase64(der);
   const lines = b64.match(/.{1,64}/g)?.join('\n') ?? b64;
+  // PEM framing for a key this tool just generated in the user's browser.
+  // threatcrush-disable-next-line secret-private-key
   return `-----BEGIN PRIVATE KEY-----\n${lines}\n-----END PRIVATE KEY-----`;
 }
 
@@ -163,6 +165,7 @@ async function exportEd25519PrivatePem(key: CryptoKey): Promise<string> {
   const pkcs8 = await crypto.subtle.exportKey('pkcs8', key);
   const b64 = arrayBufferToBase64(pkcs8);
   const lines = b64.match(/.{1,64}/g)?.join('\n') ?? b64;
+  // threatcrush-disable-next-line secret-private-key
   return `-----BEGIN PRIVATE KEY-----\n${lines}\n-----END PRIVATE KEY-----`;
 }
 
diff --git a/apps/desktop-ui/src/components/tools/tool-sidebar.tsx b/apps/desktop-ui/src/components/tools/tool-sidebar.tsx
new file mode 100644
index 00000000..04169bd6
--- /dev/null
+++ b/apps/desktop-ui/src/components/tools/tool-sidebar.tsx
@@ -0,0 +1,262 @@
+'use client'
+
+import * as React from 'react'
+import { createPortal } from 'react-dom'
+import { PanelLeftClose, PanelLeftOpen } from 'lucide-react'
+import { useTranslations } from 'next-intl'
+import { Button } from '@/components/ui/button'
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
+import { useIsMobile } from '@/components/hooks/use-mobile'
+import { useToolSidebarStore } from '@/store/tool-sidebar-store'
+import { toolCategoryMap } from '@/lib/tool-categories'
+import { categoryAccent } from '@/components/dashboard/types'
+import { cn } from '@/lib/utils'
+
+/**
+ * The one in-tool left panel. Every app-like tool (notes, bookmarks, api-client,
+ * data-explorer, s3-drive, snippet-manager, password-manager, api-keys,
+ * environment-manager, to-do) renders its list/tree through this so the chrome —
+ * width, header, collapse affordance, mobile sheet — is identical everywhere.
+ *
+ * Desktop collapse state is persisted per tool; the mobile sheet is ephemeral.
+ */
+
+interface ToolSidebarContextValue {
+  /** True when the panel is inside the mobile sheet rather than the column. */
+  isMobile: boolean
+  /**
+   * Dismiss the panel. No-op on desktop when the panel is pinned open — call it
+   * from list rows so picking an item on mobile closes the sheet instead of
+   * leaving it covering the result.
+   */
+  close: () => void
+}
+
+const ToolSidebarContext = React.createContext<ToolSidebarContextValue | null>(null)
+const ActionsSlotContext = React.createContext<HTMLElement | null>(null)
+
+/** Panel-side helper. Returns null outside a ToolSidebarLayout. */
+export function useToolSidebarPanel() {
+  return React.useContext(ToolSidebarContext)
+}
+
+/**
+ * Renders header buttons into the panel header from *inside* the panel, so a
+ * sidebar whose actions depend on its own local state (sort order, filters)
+ * doesn't have to lift that state into the page just to reach the header.
+ * Prefer the `actions` prop when the page already owns the handler.
+ */
+export function ToolSidebarActions({ children }: { children: React.ReactNode }) {
+  const slot = React.useContext(ActionsSlotContext)
+  return slot ? createPortal(children, slot) : null
+}
+
+export interface ToolSidebarFilterItem {
+  id: string
+  label: string
+  count?: number
+  /** Tailwind bg-* class for a leading status dot. */
+  dot?: string
+  icon?: React.ElementType
+}
+
+/**
+ * The standard panel body for tools that group items by a facet (tags, project,
+ * environment, status) rather than a tree. One row per bucket, with counts.
+ */
+export function ToolSidebarFilterList({
+  items,
+  value,
+  onChange,
+  heading,
+  className,
+}: {
+  items: ToolSidebarFilterItem[]
+  value: string
+  onChange: (id: string) => void
+  /** Optional uppercase section label above the rows. */
+  heading?: string
+  className?: string
+}) {
+  const panel = useToolSidebarPanel()
+  return (
+    <div className={cn('space-y-0.5 p-2', className)}>
+      {heading && (
+        <p className="px-2 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
+          {heading}
+        </p>
+      )}
+      {items.map((item) => {
+        const Icon = item.icon
+        const active = item.id === value
+        return (
+          <button
+            key={item.id}
+            type="button"
+            aria-current={active ? 'true' : undefined}
+            onClick={() => {
+              onChange(item.id)
+              if (panel?.isMobile) panel.close()
+            }}
+            className={cn(
+              'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors',
+              active
+                ? 'bg-primary/10 font-medium text-foreground'
+                : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground',
+            )}
+          >
+            {item.dot && (
+              <span className={cn('size-2 shrink-0 rounded-full', item.dot)} aria-hidden />
+            )}
+            {Icon && <Icon className="size-4 shrink-0" aria-hidden />}
+            <span className="min-w-0 flex-1 truncate">{item.label}</span>
+            {item.count !== undefined && (
+              <span className="shrink-0 text-xs tabular-nums text-muted-foreground/70">
+                {item.count}
+              </span>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+interface ToolSidebarLayoutProps {
+  /** Stable id — also the persistence key for the collapse state. */
+  toolId: string
+  icon: React.ElementType
+  title: string
+  /** Header buttons (add, sort, filter…) rendered left of the collapse toggle. */
+  actions?: React.ReactNode
+  /**
+   * Panel body: the tool's list, tree, or filter set. Laid out as a flex column
+   * that does NOT scroll — the panel owns its own `overflow-y-auto` region so a
+   * search field or footer can stay pinned while the list scrolls under it.
+   */
+  sidebar: React.ReactNode
+  children: React.ReactNode
+  className?: string
+}
+
+export function ToolSidebarLayout({
+  toolId,
+  icon: Icon,
+  title,
+  actions,
+  sidebar,
+  children,
+  className,
+}: ToolSidebarLayoutProps) {
+  const t = useTranslations('ToolSidebar')
+  const isMobile = useIsMobile()
+  const collapsed = useToolSidebarStore((s) => !!s.collapsed[toolId])
+  const setCollapsed = useToolSidebarStore((s) => s.setCollapsed)
+  const [sheetOpen, setSheetOpen] = React.useState(false)
+  const [actionsSlot, setActionsSlot] = React.useState<HTMLDivElement | null>(null)
+  // Same category tint the dashboard card for this tool uses, so the identity
+  // colour is continuous from the grid to the tool. Falls back to primary.
+  const accent = categoryAccent(toolCategoryMap[toolId] ?? '')
+
+  const close = React.useCallback(() => {
+    if (isMobile) setSheetOpen(false)
+    else setCollapsed(toolId, true)
+  }, [isMobile, setCollapsed, toolId])
+
+  const ctx = React.useMemo<ToolSidebarContextValue>(
+    () => ({ isMobile, close }),
+    [isMobile, close],
+  )
+
+  const panel = (
+    <div className="flex h-full min-h-0 flex-col border-r bg-muted/10">
+      <div className="flex shrink-0 items-center justify-between gap-2 border-b px-3 py-2">
+        <div className="flex min-w-0 items-center gap-2 text-sm font-semibold">
+          <span
+            className={cn(
+              'flex h-6 w-6 shrink-0 items-center justify-center rounded-md',
+              accent.bg,
+              accent.text,
+            )}
+          >
+            <Icon className="h-3.5 w-3.5" />
+          </span>
+          <span className="truncate">{title}</span>
+        </div>
+        <div className="flex shrink-0 items-center gap-0.5">
+          {actions}
+          <div ref={setActionsSlot} className="flex items-center gap-0.5" />
+          {!isMobile && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 cursor-pointer"
+              onClick={() => setCollapsed(toolId, true)}
+              aria-label={t('hide')}
+              title={t('hide')}
+            >
+              <PanelLeftClose className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+      <ActionsSlotContext.Provider value={actionsSlot}>
+        <div className="flex min-h-0 flex-1 flex-col overflow-hidden">{sidebar}</div>
+      </ActionsSlotContext.Provider>
+    </div>
+  )
+
+  const hidden = isMobile || collapsed
+
+  return (
+    <ToolSidebarContext.Provider value={ctx}>
+      <div className={cn('flex h-full min-h-0 w-full overflow-hidden', className)}>
+        {!isMobile && !collapsed && <div className="w-64 shrink-0">{panel}</div>}
+
+        {isMobile && (
+          <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+            <SheetContent side="left" className="w-72 p-0">
+              <SheetHeader className="sr-only">
+                <SheetTitle>{title}</SheetTitle>
+              </SheetHeader>
+              {panel}
+            </SheetContent>
+          </Sheet>
+        )}
+
+        {/* Re-open lives in a 40px rail, not a floating overlay: every tool's
+            main pane already puts a toolbar or header at the top-left, and an
+            absolutely-positioned button would sit on top of it. */}
+        {hidden && (
+          <div className="flex w-10 shrink-0 flex-col items-center border-r bg-muted/10 pt-2">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 cursor-pointer"
+              onClick={() => (isMobile ? setSheetOpen(true) : setCollapsed(toolId, false))}
+              aria-label={t('show')}
+              title={t('show')}
+            >
+              <PanelLeftOpen className="h-4 w-4" />
+            </Button>
+          </div>
+        )}
+
+        {/* Same surface the 71 single-pane tools paint (dashboard-grid-bg +
+            dash-ambient), so moving between a converter and a workspace tool
+            doesn't change the background under you. */}
+        <div
+          className="dashboard-grid-bg relative flex min-w-0 flex-1 flex-col overflow-hidden"
+          // .dashboard-grid-bg rounds its corners for the padded single-pane
+          // column; this pane is flush against the panel border, and the radius
+          // would clip content corners under overflow-hidden. Inline beats the
+          // utilities-layer rule.
+          style={{ borderRadius: 0 }}
+        >
+          <div className="dash-ambient -z-10" aria-hidden />
+          {children}
+        </div>
+      </div>
+    </ToolSidebarContext.Provider>
+  )
+}
diff --git a/apps/desktop-ui/src/components/ui/sidebar.tsx b/apps/desktop-ui/src/components/ui/sidebar.tsx
deleted file mode 100644
index bbb986c6..00000000
--- a/apps/desktop-ui/src/components/ui/sidebar.tsx
+++ /dev/null
@@ -1,768 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { VariantProps, cva } from "class-variance-authority"
-import { ChevronLeft, ChevronRight, PanelLeft } from "lucide-react"
-
-import { useIsMobile } from "../hooks/use-mobile"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Separator } from "@/components/ui/separator"
-import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet"
-import { Drawer, DrawerContent, DrawerTitle } from "@/components/ui/drawer"
-import { Skeleton } from "@/components/ui/skeleton"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-
-const SIDEBAR_COOKIE_NAME = "sidebar:state"
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
-const SIDEBAR_WIDTH_MOBILE = "20rem"
-const SIDEBAR_WIDTH_ICON = "3rem"
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
-
-type SidebarContext = {
-  state: "expanded" | "collapsed"
-  open: boolean
-  setOpen: (open: boolean) => void
-  openMobile: boolean
-  setOpenMobile: (open: boolean) => void
-  isMobile: boolean
-  toggleSidebar: () => void
-}
-
-const SidebarContext = React.createContext<SidebarContext | null>(null)
-
-function useSidebar() {
-  const context = React.useContext(SidebarContext)
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.")
-  }
-
-  return context
-}
-
-const SidebarProvider = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    defaultOpen?: boolean
-    open?: boolean
-    onOpenChange?: (open: boolean) => void
-  }
->(
-  (
-    {
-      defaultOpen = true,
-      open: openProp,
-      onOpenChange: setOpenProp,
-      className,
-      style,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const isMobile = useIsMobile()
-    const [openMobile, setOpenMobile] = React.useState(false)
-
-    // This is the internal state of the sidebar.
-    // We use openProp and setOpenProp for control from outside the component.
-    const [_open, _setOpen] = React.useState(defaultOpen)
-    const open = openProp ?? _open
-    const setOpen = React.useCallback(
-      (value: boolean | ((value: boolean) => boolean)) => {
-        const openState = typeof value === "function" ? value(open) : value
-        if (setOpenProp) {
-          setOpenProp(openState)
-        } else {
-          _setOpen(openState)
-        }
-
-        // This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
-      },
-      [setOpenProp, open]
-    )
-
-    // Helper to toggle the sidebar.
-    const toggleSidebar = React.useCallback(() => {
-      return isMobile
-        ? setOpenMobile((open) => !open)
-        : setOpen((open) => !open)
-    }, [isMobile, setOpen, setOpenMobile])
-
-    // Adds a keyboard shortcut to toggle the sidebar.
-    React.useEffect(() => {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (
-          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-          (event.metaKey || event.ctrlKey)
-        ) {
-          event.preventDefault()
-          toggleSidebar()
-        }
-      }
-
-      window.addEventListener("keydown", handleKeyDown)
-      return () => window.removeEventListener("keydown", handleKeyDown)
-    }, [toggleSidebar])
-
-    // We add a state so that we can do data-state="expanded" or "collapsed".
-    // This makes it easier to style the sidebar with Tailwind classes.
-    const state = open ? "expanded" : "collapsed"
-
-    const contextValue = React.useMemo<SidebarContext>(
-      () => ({
-        state,
-        open,
-        setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
-        toggleSidebar,
-      }),
-      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-    )
-
-    return (
-      <SidebarContext.Provider value={contextValue}>
-        <TooltipProvider delayDuration={0}>
-          <div
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH,
-                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-                ...style,
-              } as React.CSSProperties
-            }
-            className={cn(
-              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
-              className
-            )}
-            ref={ref}
-            {...props}
-          >
-            {children}
-          </div>
-        </TooltipProvider>
-      </SidebarContext.Provider>
-    )
-  }
-)
-SidebarProvider.displayName = "SidebarProvider"
-
-const Sidebar = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    side?: "left" | "right"
-    variant?: "sidebar" | "floating" | "inset"
-    collapsible?: "offcanvas" | "icon" | "none"
-  }
->(
-  (
-    {
-      side = "left",
-      variant = "sidebar",
-      collapsible = "offcanvas",
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
-
-    if (collapsible === "none") {
-      return (
-        <div
-          className={cn(
-            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
-            className
-          )}
-          ref={ref}
-          {...props}
-        >
-          {children}
-        </div>
-      )
-    }
-
-    if (isMobile) {
-      return (
-        <Drawer open={openMobile} onOpenChange={setOpenMobile}>
-          <DrawerContent
-            data-sidebar="sidebar"
-            data-mobile="true"
-            className="bg-sidebar p-0 text-sidebar-foreground max-h-[85vh] [&>button]:hidden shadow-2xl"
-          >
-            <DrawerTitle className="sr-only">Navigation Menu</DrawerTitle>
-            <div className="flex h-[calc(85vh-2rem)] w-full flex-col overflow-y-auto overflow-x-hidden pb-4 px-2">
-              {children}
-            </div>
-          </DrawerContent>
-        </Drawer>
-      )
-    }
-
-    return (
-      <div
-        ref={ref}
-        className="group peer hidden md:block text-sidebar-foreground"
-        data-state={state}
-        data-collapsible={state === "collapsed" ? collapsible : ""}
-        data-variant={variant}
-        data-side={side}
-      >
-        {/* This is what handles the sidebar gap on desktop */}
-        <div
-          className={cn(
-            "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
-            "group-data-[collapsible=offcanvas]:w-0",
-            "group-data-[side=right]:rotate-180",
-            variant === "floating" || variant === "inset"
-              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
-          )}
-        />
-        <div
-          className={cn(
-            "duration-200 fixed inset-y-0 z-10 hidden h-full min-h-screen w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex", // modified this line
-            side === "left"
-              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-            // Adjust the padding for floating and inset variants.
-            variant === "floating" || variant === "inset"
-              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
-            className
-          )}
-          {...props}
-        >
-          <div
-            data-sidebar="sidebar"
-            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
-          >
-            {children}
-          </div>
-        </div>
-      </div>
-    )
-  }
-)
-Sidebar.displayName = "Sidebar"
-
-const SidebarTrigger = React.forwardRef<
-  React.ElementRef<typeof Button>,
-  React.ComponentProps<typeof Button>
->(({ className, onClick, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar()
-
-  return (
-    <Button
-      ref={ref}
-      data-sidebar="trigger"
-      variant="ghost"
-      size="icon"
-      className={cn("h-7 w-7", className)}
-      onClick={(event) => {
-        onClick?.(event)
-        toggleSidebar()
-      }}
-      {...props}
-    >
-      <PanelLeft />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  )
-})
-SidebarTrigger.displayName = "SidebarTrigger"
-
-const SidebarRail = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button">
->(({ className, ...props }, ref) => {
-  const { toggleSidebar, state } = useSidebar()
-  const isCollapsed = state === "collapsed"
-
-  return (
-    <button
-      ref={ref}
-      data-sidebar="rail"
-      aria-label="Toggle Sidebar"
-      onClick={toggleSidebar}
-      title="Toggle Sidebar"
-      className={cn(
-        "absolute top-1/2 -translate-y-1/2 z-20 hidden sm:flex",
-        "h-6 w-6 items-center justify-center",
-        "rounded-md border border-border/60 bg-background/80 backdrop-blur-sm",
-        "text-muted-foreground hover:text-foreground hover:bg-accent/80",
-        "transition-all duration-200 ease-in-out",
-        "shadow-sm hover:shadow-md",
-        "group-data-[side=left]:-right-3 group-data-[side=right]:-left-3",
-        className
-      )}
-      {...props}
-    >
-      {isCollapsed ? (
-        <ChevronRight className="h-3.5 w-3.5" />
-      ) : (
-        <ChevronLeft className="h-3.5 w-3.5" />
-      )}
-    </button>
-  )
-})
-SidebarRail.displayName = "SidebarRail"
-
-const SidebarInset = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"main">
->(({ className, ...props }, ref) => {
-  return (
-    <main
-      ref={ref}
-      className={cn(
-        "relative flex min-h-svh flex-1 flex-col bg-background",
-        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarInset.displayName = "SidebarInset"
-
-const SidebarInput = React.forwardRef<
-  React.ElementRef<typeof Input>,
-  React.ComponentProps<typeof Input>
->(({ className, ...props }, ref) => {
-  return (
-    <Input
-      ref={ref}
-      data-sidebar="input"
-      className={cn(
-        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarInput.displayName = "SidebarInput"
-
-const SidebarHeader = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  )
-})
-SidebarHeader.displayName = "SidebarHeader"
-
-const SidebarFooter = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="footer"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  )
-})
-SidebarFooter.displayName = "SidebarFooter"
-
-const SidebarSeparator = React.forwardRef<
-  React.ElementRef<typeof Separator>,
-  React.ComponentProps<typeof Separator>
->(({ className, ...props }, ref) => {
-  return (
-    <Separator
-      ref={ref}
-      data-sidebar="separator"
-      className={cn("mx-2 w-auto bg-sidebar-border", className)}
-      {...props}
-    />
-  )
-})
-SidebarSeparator.displayName = "SidebarSeparator"
-
-const SidebarContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="content"
-      className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarContent.displayName = "SidebarContent"
-
-const SidebarGroup = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
-      {...props}
-    />
-  )
-})
-SidebarGroup.displayName = "SidebarGroup"
-
-const SidebarGroupLabel = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & { asChild?: boolean }
->(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "div"
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="group-label"
-      className={cn(
-        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarGroupLabel.displayName = "SidebarGroupLabel"
-
-const SidebarGroupAction = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & { asChild?: boolean }
->(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="group-action"
-      className={cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarGroupAction.displayName = "SidebarGroupAction"
-
-const SidebarGroupContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-sidebar="group-content"
-    className={cn("w-full text-sm", className)}
-    {...props}
-  />
-))
-SidebarGroupContent.displayName = "SidebarGroupContent"
-
-const SidebarMenu = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    data-sidebar="menu"
-    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
-    {...props}
-  />
-))
-SidebarMenu.displayName = "SidebarMenu"
-
-const SidebarMenuItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    data-sidebar="menu-item"
-    className={cn("group/menu-item relative", className)}
-    {...props}
-  />
-))
-SidebarMenuItem.displayName = "SidebarMenuItem"
-
-const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
-      },
-      size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-const SidebarMenuButton = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & {
-    asChild?: boolean
-    isActive?: boolean
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>
-  } & VariantProps<typeof sidebarMenuButtonVariants>
->(
-  (
-    {
-      asChild = false,
-      isActive = false,
-      variant = "default",
-      size = "default",
-      tooltip,
-      className,
-      ...props
-    },
-    ref
-  ) => {
-    const Comp = asChild ? Slot : "button"
-    const { isMobile, state } = useSidebar()
-
-    const button = (
-      <Comp
-        ref={ref}
-        data-sidebar="menu-button"
-        data-size={size}
-        data-active={isActive}
-        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-        {...props}
-      />
-    )
-
-    if (!tooltip) {
-      return button
-    }
-
-    if (typeof tooltip === "string") {
-      tooltip = {
-        children: tooltip,
-      }
-    }
-
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>{button}</TooltipTrigger>
-        <TooltipContent
-          side="right"
-          align="center"
-          hidden={state !== "collapsed" || isMobile}
-          {...tooltip}
-        />
-      </Tooltip>
-    )
-  }
-)
-SidebarMenuButton.displayName = "SidebarMenuButton"
-
-const SidebarMenuAction = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & {
-    asChild?: boolean
-    showOnHover?: boolean
-  }
->(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="menu-action"
-      className={cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        showOnHover &&
-        "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarMenuAction.displayName = "SidebarMenuAction"
-
-const SidebarMenuBadge = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-sidebar="menu-badge"
-    className={cn(
-      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
-      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-      "peer-data-[size=sm]/menu-button:top-1",
-      "peer-data-[size=default]/menu-button:top-1.5",
-      "peer-data-[size=lg]/menu-button:top-2.5",
-      "group-data-[collapsible=icon]:hidden",
-      className
-    )}
-    {...props}
-  />
-))
-SidebarMenuBadge.displayName = "SidebarMenuBadge"
-
-const SidebarMenuSkeleton = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    showIcon?: boolean
-  }
->(({ className, showIcon = false, ...props }, ref) => {
-  // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return "70%"
-  }, [])
-
-  return (
-    <div
-      ref={ref}
-      data-sidebar="menu-skeleton"
-      className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
-      {...props}
-    >
-      {showIcon && (
-        <Skeleton
-          className="size-4 rounded-md"
-          data-sidebar="menu-skeleton-icon"
-        />
-      )}
-      <Skeleton
-        className="h-4 flex-1 max-w-[--skeleton-width]"
-        data-sidebar="menu-skeleton-text"
-        style={
-          {
-            "--skeleton-width": width,
-          } as React.CSSProperties
-        }
-      />
-    </div>
-  )
-})
-SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
-
-const SidebarMenuSub = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    data-sidebar="menu-sub"
-    className={cn(
-      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
-      "group-data-[collapsible=icon]:hidden",
-      className
-    )}
-    {...props}
-  />
-))
-SidebarMenuSub.displayName = "SidebarMenuSub"
-
-const SidebarMenuSubItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ ...props }, ref) => <li ref={ref} {...props} />)
-SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
-
-const SidebarMenuSubButton = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentProps<"a"> & {
-    asChild?: boolean
-    size?: "sm" | "md"
-    isActive?: boolean
-  }
->(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="menu-sub-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === "sm" && "text-xs",
-        size === "md" && "text-sm",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
-
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupAction,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSkeleton,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-}
diff --git a/apps/desktop-ui/src/components/user-preferences-sync.tsx b/apps/desktop-ui/src/components/user-preferences-sync.tsx
index afb5f9e4..cb5a6ae4 100644
--- a/apps/desktop-ui/src/components/user-preferences-sync.tsx
+++ b/apps/desktop-ui/src/components/user-preferences-sync.tsx
@@ -5,7 +5,8 @@ import { useTheme } from "next-themes";
 import { useLocale } from "next-intl";
 import { useRouter } from "next/navigation";
 import useAuth from "@/utils/useAuth";
-import { COLOR_THEME_OPTIONS, type ColorTheme, useColorTheme } from "@/hooks/use-color-theme";
+import { useColorTheme } from "@/hooks/use-color-theme";
+import { isAccentColor } from "@/lib/accent-color";
 import { getUserPreferences, patchUserPreferences, type ThemePreference, type UserPreferencesOut } from "@/lib/user-preferences-api";
 
 const SUPPORTED_LOCALES = [
@@ -50,9 +51,8 @@ function setLocaleCookie(locale: string) {
   document.cookie = `NEXT_LOCALE=${locale}; path=/; max-age=31536000; SameSite=Lax`;
 }
 
-function isColorTheme(value: string | undefined): value is ColorTheme {
-  return !!value && (COLOR_THEME_OPTIONS as readonly string[]).includes(value);
-}
+/** Accepts preset ids and custom hex picks alike (see lib/accent-color.ts). */
+const isColorTheme = isAccentColor;
 
 export function UserPreferencesSync() {
   const { user, loading: authLoading } = useAuth(false);
diff --git a/apps/desktop-ui/src/components/yaml-formatter/yaml-formatter-layout.tsx b/apps/desktop-ui/src/components/yaml-formatter/yaml-formatter-layout.tsx
index 54f05f96..8796e08b 100644
--- a/apps/desktop-ui/src/components/yaml-formatter/yaml-formatter-layout.tsx
+++ b/apps/desktop-ui/src/components/yaml-formatter/yaml-formatter-layout.tsx
@@ -76,6 +76,8 @@ export function YamlFormatterLayout() {
     const indentNum = parseInt(indent, 10) || 2
 
     try {
+      // js-yaml v4: load() is the safe schema, !!js/function was removed.
+      // threatcrush-disable-next-line js-unsafe-yaml-load
       const parsed = yaml.load(src)
 
       if (outputMode === 'json') {
diff --git a/apps/desktop-ui/src/hooks/use-color-theme.tsx b/apps/desktop-ui/src/hooks/use-color-theme.tsx
index db43a224..05513168 100644
--- a/apps/desktop-ui/src/hooks/use-color-theme.tsx
+++ b/apps/desktop-ui/src/hooks/use-color-theme.tsx
@@ -10,27 +10,17 @@ import {
   type ReactNode,
 } from "react"
 
-export type ColorTheme =
-  | "blue"
-  | "purple"
-  | "green"
-  | "orange"
-  | "red"
-  | "pink"
-  | "cyan"
-  | "indigo"
+import {
+  DEFAULT_ACCENT,
+  accentCssVars,
+  isAccentColor,
+  type AccentColor,
+} from "@/lib/accent-color"
+
+/** Preset id (see ACCENT_PRESETS) or a custom `#rrggbb` from the color picker. */
+export type ColorTheme = AccentColor
 
 const COLOR_THEME_KEY = "app-color-theme"
-export const COLOR_THEME_OPTIONS: ColorTheme[] = [
-  "cyan",
-  "blue",
-  "indigo",
-  "purple",
-  "green",
-  "orange",
-  "red",
-  "pink",
-]
 
 type ColorThemeContextValue = {
   colorTheme: ColorTheme
@@ -40,28 +30,26 @@ type ColorThemeContextValue = {
 
 const ColorThemeContext = createContext<ColorThemeContextValue | null>(null)
 
-function isValidColorTheme(theme: string): theme is ColorTheme {
-  return COLOR_THEME_OPTIONS.includes(theme as ColorTheme)
-}
-
+/** Accent vars go inline on <html> so custom hex picks work without new CSS. */
 function applyColorTheme(theme: ColorTheme) {
-  const root = document.documentElement
-  root.classList.remove(...COLOR_THEME_OPTIONS)
-  root.classList.add(theme)
+  const { style } = document.documentElement
+  for (const [name, value] of Object.entries(accentCssVars(theme))) {
+    style.setProperty(name, value)
+  }
 }
 
 export function ColorThemeProvider({ children }: { children: ReactNode }) {
-  const [colorTheme, setColorThemeState] = useState<ColorTheme>("indigo")
+  const [colorTheme, setColorThemeState] = useState<ColorTheme>(DEFAULT_ACCENT)
   const [mounted, setMounted] = useState(false)
 
   useEffect(() => {
     setMounted(true)
-    const stored = localStorage.getItem(COLOR_THEME_KEY) as ColorTheme | null
-    if (stored && isValidColorTheme(stored)) {
+    const stored = localStorage.getItem(COLOR_THEME_KEY)
+    if (isAccentColor(stored)) {
       setColorThemeState(stored)
       applyColorTheme(stored)
     } else {
-      applyColorTheme("indigo")
+      applyColorTheme(DEFAULT_ACCENT)
     }
   }, [])
 
diff --git a/apps/desktop-ui/src/lib/__tests__/accent-color.test.ts b/apps/desktop-ui/src/lib/__tests__/accent-color.test.ts
new file mode 100644
index 00000000..f35dbd71
--- /dev/null
+++ b/apps/desktop-ui/src/lib/__tests__/accent-color.test.ts
@@ -0,0 +1,29 @@
+import { accentCssVars, accentHex, isAccentColor, isCustomAccent } from '@/lib/accent-color'
+
+describe('accent-color', () => {
+  it('resolves presets, custom hex, and garbage', () => {
+    expect(accentHex('indigo')).toBe('#6366f1')
+    expect(accentHex('#AABBCC')).toBe('#aabbcc')
+    expect(accentHex('not-a-color')).toBe('#6366f1')
+  })
+
+  it('validates stored values', () => {
+    expect(isAccentColor('blue')).toBe(true)
+    expect(isAccentColor('#f0f')).toBe(true)
+    expect(isAccentColor('rebeccapurple')).toBe(false)
+    expect(isAccentColor(undefined)).toBe(false)
+    expect(isCustomAccent('blue')).toBe(false)
+    expect(isCustomAccent('#123456')).toBe(true)
+  })
+
+  it('emits an HSL triple for --primary', () => {
+    expect(accentCssVars('red')['--primary']).toBe('0 84.2% 60.2%')
+  })
+
+  it('flips --primary-foreground to dark text on bright accents', () => {
+    expect(accentCssVars('yellow')['--primary-foreground']).toBe('222 47% 11%')
+    expect(accentCssVars('#ffff00')['--primary-foreground']).toBe('222 47% 11%')
+    expect(accentCssVars('indigo')['--primary-foreground']).toBe('0 0% 100%')
+    expect(accentCssVars('#000000')['--primary-foreground']).toBe('0 0% 100%')
+  })
+})
diff --git a/apps/desktop-ui/src/lib/__tests__/markdown-preview-html.test.ts b/apps/desktop-ui/src/lib/__tests__/markdown-preview-html.test.ts
new file mode 100644
index 00000000..52c2e0fc
--- /dev/null
+++ b/apps/desktop-ui/src/lib/__tests__/markdown-preview-html.test.ts
@@ -0,0 +1,25 @@
+import { safeFileName } from '@/lib/markdown-preview-html';
+
+describe('safeFileName', () => {
+  it('keeps plain names, spaces and dashes', () => {
+    expect(safeFileName('my notes-v2')).toBe('my notes-v2');
+  });
+
+  it('drops a trailing .html/.htm so export does not double it', () => {
+    expect(safeFileName('report.html')).toBe('report');
+    expect(safeFileName('report.HTM')).toBe('report');
+  });
+
+  it('strips path separators and illegal chars', () => {
+    expect(safeFileName('../../etc/pass:wd')).toBe('etcpasswd');
+  });
+
+  it('falls back to export when nothing usable is left', () => {
+    expect(safeFileName('   ')).toBe('export');
+    expect(safeFileName('///')).toBe('export');
+  });
+
+  it('caps length', () => {
+    expect(safeFileName('a'.repeat(300))).toHaveLength(100);
+  });
+});
diff --git a/apps/desktop-ui/src/lib/__tests__/nosql-error-sanitizer.test.ts b/apps/desktop-ui/src/lib/__tests__/nosql-error-sanitizer.test.ts
new file mode 100644
index 00000000..d087a0f4
--- /dev/null
+++ b/apps/desktop-ui/src/lib/__tests__/nosql-error-sanitizer.test.ts
@@ -0,0 +1,30 @@
+import { sanitizeError } from "../nosql-error-sanitizer"
+
+describe("sanitizeError", () => {
+    it("scrubs a connection string with a path and query", () => {
+        const out = sanitizeError(
+            new Error("connect failed: mongodb://user:pw@host:27017/db?ssl=true retrying")
+        )
+        expect(out).not.toContain("pw@host")
+        expect(out).toContain("mongodb://***SANITIZED***")
+        expect(out).toContain("retrying")
+    })
+
+    it("scrubs mongodb+srv the same way", () => {
+        expect(sanitizeError("mongodb+srv://u:p@cluster0.example.net/app")).toBe(
+            "mongodb://***SANITIZED***"
+        )
+    })
+
+    it("still scrubs bare user:password@ pairs and emails", () => {
+        expect(sanitizeError("auth failed for admin:hunter2@db")).toContain("***:***@")
+        expect(sanitizeError("no user alice@example.com")).toContain("***@***")
+    })
+
+    it("does not backtrack on a long near-match", () => {
+        const input = `mongodb://${"a/".repeat(20000)} `
+        const start = Date.now()
+        sanitizeError(input)
+        expect(Date.now() - start).toBeLessThan(1000)
+    })
+})
diff --git a/apps/desktop-ui/src/lib/accent-color.ts b/apps/desktop-ui/src/lib/accent-color.ts
new file mode 100644
index 00000000..813ea703
--- /dev/null
+++ b/apps/desktop-ui/src/lib/accent-color.ts
@@ -0,0 +1,121 @@
+/**
+ * Accent palette + the CSS variables it drives. A stored accent is either a
+ * preset id or a custom `#rrggbb` chosen from the color picker, so everything
+ * downstream resolves through `accentCssVars`.
+ */
+export const ACCENT_PRESETS = [
+  { id: 'indigo', name: 'Indigo', hex: '#6366f1' },
+  { id: 'blue', name: 'Blue', hex: '#3b82f6' },
+  { id: 'sky', name: 'Sky', hex: '#0ea5e9' },
+  { id: 'cyan', name: 'Teal', hex: '#06b6d4' },
+  { id: 'teal', name: 'Aqua', hex: '#14b8a6' },
+  { id: 'emerald', name: 'Emerald', hex: '#10b981' },
+  { id: 'green', name: 'Green', hex: '#22c55e' },
+  { id: 'lime', name: 'Lime', hex: '#84cc16' },
+  { id: 'yellow', name: 'Yellow', hex: '#eab308' },
+  { id: 'amber', name: 'Amber', hex: '#f59e0b' },
+  { id: 'orange', name: 'Orange', hex: '#f97316' },
+  { id: 'red', name: 'Red', hex: '#ef4444' },
+  { id: 'rose', name: 'Rose', hex: '#f43f5e' },
+  { id: 'pink', name: 'Pink', hex: '#ec4899' },
+  { id: 'fuchsia', name: 'Fuchsia', hex: '#d946ef' },
+  { id: 'purple', name: 'Purple', hex: '#a855f7' },
+  { id: 'violet', name: 'Violet', hex: '#8b5cf6' },
+  { id: 'slate', name: 'Slate', hex: '#64748b' },
+] as const
+
+export type AccentPresetId = (typeof ACCENT_PRESETS)[number]['id']
+
+/** Preset id, or a custom hex color. */
+export type AccentColor = AccentPresetId | (string & {})
+
+export const DEFAULT_ACCENT: AccentPresetId = 'indigo'
+
+const HEX_RE = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i
+const PRESET_HEX = new Map<string, string>(ACCENT_PRESETS.map((p) => [p.id, p.hex]))
+
+/** Foreground pair: the HSL triple written to CSS + its hex, for contrast math. */
+const DARK_FG = { hsl: '222 47% 11%', hex: '#0f1729' }
+const LIGHT_FG = { hsl: '0 0% 100%', hex: '#ffffff' }
+
+export function isAccentColor(value: string | undefined | null): value is AccentColor {
+  return !!value && (PRESET_HEX.has(value) || HEX_RE.test(value))
+}
+
+export function isCustomAccent(value: string): boolean {
+  return !PRESET_HEX.has(value) && HEX_RE.test(value)
+}
+
+/** Resolved swatch color for a stored accent; falls back to the default preset. */
+export function accentHex(value: string): string {
+  const preset = PRESET_HEX.get(value)
+  if (preset) return preset
+  return HEX_RE.test(value) ? value.toLowerCase() : PRESET_HEX.get(DEFAULT_ACCENT)!
+}
+
+const round = (n: number) => Math.round(n * 10) / 10
+
+/**
+ * Local color math (rather than the `color` package wcag-contrast.ts uses) so the
+ * theme provider stays dependency-free and this stays plain-jest testable.
+ */
+function toRgb(hex: string): [number, number, number] {
+  const raw = hex.slice(1)
+  const full = raw.length === 3 ? raw.replace(/./g, (c) => c + c) : raw
+  const n = parseInt(full, 16)
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
+}
+
+function toHsl(hex: string): [number, number, number] {
+  const [r, g, b] = toRgb(hex).map((c) => c / 255)
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const d = max - min
+  const l = (max + min) / 2
+  const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1))
+
+  let h = 0
+  if (d !== 0) {
+    if (max === r) h = ((g - b) / d) % 6
+    else if (max === g) h = (b - r) / d + 2
+    else h = (r - g) / d + 4
+    h = (h * 60 + 360) % 360
+  }
+
+  return [h, s * 100, l * 100]
+}
+
+/** WCAG 2.1 relative luminance (0–1). */
+function luminance(hex: string): number {
+  const [r, g, b] = toRgb(hex).map((c) => {
+    const s = c / 255
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4)
+  })
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+function contrast(a: string, b: string): number {
+  const [la, lb] = [luminance(a), luminance(b)]
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05)
+}
+
+/**
+ * CSS custom properties for an accent. `--primary-foreground` follows whichever
+ * of dark/white text contrasts better, so bright accents (yellow, lime) stay
+ * readable instead of shipping white-on-yellow.
+ */
+export function accentCssVars(value: string): Record<string, string> {
+  const hex = accentHex(value)
+  const [h, s, l] = toHsl(hex)
+  const triple = `${round(h)} ${round(s)}% ${round(l)}%`
+  const fg = contrast(hex, LIGHT_FG.hex) >= contrast(hex, DARK_FG.hex) ? LIGHT_FG : DARK_FG
+
+  return {
+    '--primary': triple,
+    '--primary-foreground': fg.hsl,
+    '--ring': triple,
+    '--sidebar-primary': triple,
+    '--sidebar-primary-foreground': fg.hsl,
+    '--sidebar-ring': triple,
+  }
+}
diff --git a/apps/desktop-ui/src/lib/curl-to-code.ts b/apps/desktop-ui/src/lib/curl-to-code.ts
index 2c0d7983..13790323 100644
--- a/apps/desktop-ui/src/lib/curl-to-code.ts
+++ b/apps/desktop-ui/src/lib/curl-to-code.ts
@@ -702,6 +702,8 @@ function genRuby(p: ParsedCurl): string {
         lines.push(`request.body = ${rubyStr(p.body)}`)
     }
     lines.push("")
+    // Emitted Ruby source, not a request this app makes.
+    // threatcrush-disable-next-line js-ssrf-outbound-request
     lines.push("response = http.request(request)")
     lines.push("puts response.code")
     lines.push("puts response.body")
diff --git a/apps/desktop-ui/src/lib/data-explorer/firestore-api.ts b/apps/desktop-ui/src/lib/data-explorer/firestore-api.ts
index 7ca620b6..97e62680 100644
--- a/apps/desktop-ui/src/lib/data-explorer/firestore-api.ts
+++ b/apps/desktop-ui/src/lib/data-explorer/firestore-api.ts
@@ -62,6 +62,7 @@ export function parseServiceAccount(
     if (!privateKey.includes("\n") && privateKey.includes("\\n")) {
         privateKey = privateKey.replace(/\\n/g, "\n");
     }
+    // threatcrush-disable-next-line secret-private-key
     if (!privateKey.includes("-----BEGIN PRIVATE KEY-----")) {
         return { errorKey: "validation.serviceAccountBadKey" };
     }
diff --git a/apps/desktop-ui/src/lib/format-converter.ts b/apps/desktop-ui/src/lib/format-converter.ts
index cb718df5..c121b1be 100644
--- a/apps/desktop-ui/src/lib/format-converter.ts
+++ b/apps/desktop-ui/src/lib/format-converter.ts
@@ -34,6 +34,8 @@ function parseInput(input: string, format: Format): unknown {
     case 'json':
       return JSON.parse(input);
     case 'yaml':
+      // js-yaml v4: load() is the safe schema, !!js/function was removed.
+      // threatcrush-disable-next-line js-unsafe-yaml-load
       return yaml.load(input);
     case 'toml':
       return parseTOML(input);
diff --git a/apps/desktop-ui/src/lib/import/openapi.ts b/apps/desktop-ui/src/lib/import/openapi.ts
index 5f75e5de..cd288ffa 100644
--- a/apps/desktop-ui/src/lib/import/openapi.ts
+++ b/apps/desktop-ui/src/lib/import/openapi.ts
@@ -355,6 +355,8 @@ function parseSpec(raw: string | object): OpenAPISpec {
     if (text.startsWith("{") || text.startsWith("[")) {
         return JSON.parse(text) as OpenAPISpec
     }
+    // js-yaml v4: load() is the safe schema, !!js/function was removed.
+    // threatcrush-disable-next-line js-unsafe-yaml-load
     const parsed = yaml.load(text)
     if (!parsed || typeof parsed !== "object") {
         throw new Error("Could not parse OpenAPI document (not JSON or YAML)")
diff --git a/apps/desktop-ui/src/lib/jwt-decode.ts b/apps/desktop-ui/src/lib/jwt-decode.ts
index 778a8462..bace5f5f 100644
--- a/apps/desktop-ui/src/lib/jwt-decode.ts
+++ b/apps/desktop-ui/src/lib/jwt-decode.ts
@@ -101,6 +101,8 @@ function claimInfo(
   return { unix, date, labelKey };
 }
 
+// Inspection only: no signature check, and no authorization decision is made
+// from the result. threatcrush-disable-next-line js-jwt-decode-without-verify
 export function decodeJwt(token: string): JwtDecodeResult {
   const trimmed = token.trim().replace(/^Bearer\s+/i, '');
   if (!trimmed) {
diff --git a/apps/desktop-ui/src/lib/markdown-preview-html.ts b/apps/desktop-ui/src/lib/markdown-preview-html.ts
new file mode 100644
index 00000000..40d0be6b
--- /dev/null
+++ b/apps/desktop-ui/src/lib/markdown-preview-html.ts
@@ -0,0 +1,10 @@
+/** Strip path separators and illegal chars, drop a trailing .html, cap length. */
+export function safeFileName(raw: string): string {
+  const cleaned = raw
+    .replace(/\.html?$/i, '')
+    .replace(/[\\/:*?"<>|]/g, '')
+    .replace(/^[.]+/, '')
+    .trim()
+    .slice(0, 100);
+  return cleaned || 'export';
+}
diff --git a/apps/desktop-ui/src/lib/mocks/openapi-mock-gen.ts b/apps/desktop-ui/src/lib/mocks/openapi-mock-gen.ts
index a2f2670a..b051562d 100644
--- a/apps/desktop-ui/src/lib/mocks/openapi-mock-gen.ts
+++ b/apps/desktop-ui/src/lib/mocks/openapi-mock-gen.ts
@@ -49,6 +49,8 @@ function parseSpec(raw: string | object): Spec {
     if (typeof raw === "object" && raw !== null) return raw as Spec
     const text = String(raw).trim()
     if (text.startsWith("{")) return JSON.parse(text) as Spec
+    // js-yaml v4: load() is the safe schema, !!js/function was removed.
+    // threatcrush-disable-next-line js-unsafe-yaml-load
     const parsed = yaml.load(text)
     return (parsed && typeof parsed === "object") ? (parsed as Spec) : {}
 }
diff --git a/apps/desktop-ui/src/lib/nosql-dialects.ts b/apps/desktop-ui/src/lib/nosql-dialects.ts
index 5bb4ce75..35ae848f 100644
--- a/apps/desktop-ui/src/lib/nosql-dialects.ts
+++ b/apps/desktop-ui/src/lib/nosql-dialects.ts
@@ -41,6 +41,7 @@ export const DB_DIALECTS: Record<DbType, NoSqlDialect> = {
         type: "cosmosdb",
         label: "Azure Cosmos DB",
         placeholder:
+            // threatcrush-disable-next-line secret-database-url
             "mongodb://acct:key@acct.mongo.cosmos.azure.com:10255/?ssl=true&retryWrites=false",
         hostMatch: /\.mongo\.cosmos\.azure\.com/i,
     },
diff --git a/apps/desktop-ui/src/lib/nosql-error-sanitizer.ts b/apps/desktop-ui/src/lib/nosql-error-sanitizer.ts
index f1785766..beba2713 100644
--- a/apps/desktop-ui/src/lib/nosql-error-sanitizer.ts
+++ b/apps/desktop-ui/src/lib/nosql-error-sanitizer.ts
@@ -9,8 +9,13 @@ export function sanitizeError(error: unknown): string {
   let message = error instanceof Error ? error.message : String(error)
 
   // Remove connection strings in format: mongodb[+srv]://[user:password@]host[:port][/db]
+  // Two fixes over the original /mongodb\+?srv?:\/\/[^/\s]+(\/[^\s]*)*/:
+  // `srv?` required a literal "sr", so plain mongodb:// URLs fell through this
+  // rule entirely and only their user:pass@ part was masked below; and the
+  // nested quantifier matched the same span as \S* while backtracking
+  // exponentially on a long near-match of attacker-influenced driver text.
   message = message.replace(
-    /mongodb\+?srv?:\/\/[^/\s]+(\/[^\s]*)*/gi,
+    /mongodb(\+srv)?:\/\/\S*/gi,
     "mongodb://***SANITIZED***"
   )
 
diff --git a/apps/desktop-ui/src/lib/plugins/plugin-runtime.ts b/apps/desktop-ui/src/lib/plugins/plugin-runtime.ts
index 9f69d259..2de8f0ed 100644
--- a/apps/desktop-ui/src/lib/plugins/plugin-runtime.ts
+++ b/apps/desktop-ui/src/lib/plugins/plugin-runtime.ts
@@ -114,8 +114,9 @@ export function instantiatePlugin(plugin: PluginSource): InstantiateResult {
     }
 
     try {
+        // Executing a plugin the user installed is the feature.
         // eslint-disable-next-line @typescript-eslint/no-implied-eval, no-new-func
-        const fn = new Function("plugin", "console", `"use strict";\n${plugin.source}`)
+        const fn = new Function("plugin", "console", `"use strict";\n${plugin.source}`) // threatcrush-disable-line js-dynamic-code-execution
         const wallStart = Date.now()
         fn(api, sandboxConsole)
         if (Date.now() - wallStart > SCRIPT_TIMEOUT_MS) {
diff --git a/apps/desktop-ui/src/lib/tool-categories.ts b/apps/desktop-ui/src/lib/tool-categories.ts
index c12ab4c1..d10f4569 100644
--- a/apps/desktop-ui/src/lib/tool-categories.ts
+++ b/apps/desktop-ui/src/lib/tool-categories.ts
@@ -5,6 +5,7 @@ export const toolCategoryMap: Record<string, string> = {
   notes: 'Productivity',
   'snippet-manager': 'Productivity',
   'to-do': 'Productivity',
+  'api-keys': 'Security',
   'email-validator': 'Security',
   'environment-manager': 'Security',
   'jwt-decoder': 'Security',
diff --git a/apps/desktop-ui/src/store/__tests__/tab-store.test.ts b/apps/desktop-ui/src/store/__tests__/tab-store.test.ts
new file mode 100644
index 00000000..31ce6b1f
--- /dev/null
+++ b/apps/desktop-ui/src/store/__tests__/tab-store.test.ts
@@ -0,0 +1,27 @@
+import { useTabStore } from '../tab-store'
+
+const paths = ['/app/a', '/app/b', '/app/c']
+
+beforeEach(() => {
+  useTabStore.setState({ tabs: paths.map(path => ({ path })), activeTabPath: '/app/a' })
+})
+
+const order = () => useTabStore.getState().tabs.map(t => t.path)
+
+describe('moveTab', () => {
+  it('moves a tab forward', () => {
+    useTabStore.getState().moveTab('/app/a', '/app/c')
+    expect(order()).toEqual(['/app/b', '/app/c', '/app/a'])
+  })
+
+  it('moves a tab backward', () => {
+    useTabStore.getState().moveTab('/app/c', '/app/a')
+    expect(order()).toEqual(['/app/c', '/app/a', '/app/b'])
+  })
+
+  it('ignores unknown or identical paths', () => {
+    useTabStore.getState().moveTab('/app/a', '/app/a')
+    useTabStore.getState().moveTab('/app/a', '/app/nope')
+    expect(order()).toEqual(paths)
+  })
+})
diff --git a/apps/desktop-ui/src/store/__tests__/tool-sidebar-store.test.ts b/apps/desktop-ui/src/store/__tests__/tool-sidebar-store.test.ts
new file mode 100644
index 00000000..f4314ea2
--- /dev/null
+++ b/apps/desktop-ui/src/store/__tests__/tool-sidebar-store.test.ts
@@ -0,0 +1,36 @@
+/**
+ * Tests for tool-sidebar-store.ts — per-tool collapse state behind ToolSidebarLayout.
+ */
+import { useToolSidebarStore } from "../tool-sidebar-store"
+
+beforeEach(() => {
+  useToolSidebarStore.setState({ collapsed: {} })
+})
+
+describe("tool-sidebar-store", () => {
+  it("treats an unseen tool as open", () => {
+    expect(useToolSidebarStore.getState().collapsed["notes"]).toBeUndefined()
+  })
+
+  it("collapses and reopens a tool", () => {
+    const { setCollapsed } = useToolSidebarStore.getState()
+    setCollapsed("notes", true)
+    expect(useToolSidebarStore.getState().collapsed["notes"]).toBe(true)
+    setCollapsed("notes", false)
+    expect(useToolSidebarStore.getState().collapsed["notes"]).toBe(false)
+  })
+
+  it("toggle flips from the open default and back", () => {
+    const { toggle } = useToolSidebarStore.getState()
+    toggle("bookmarks")
+    expect(useToolSidebarStore.getState().collapsed["bookmarks"]).toBe(true)
+    toggle("bookmarks")
+    expect(useToolSidebarStore.getState().collapsed["bookmarks"]).toBe(false)
+  })
+
+  it("keeps tools independent", () => {
+    const { setCollapsed } = useToolSidebarStore.getState()
+    setCollapsed("notes", true)
+    expect(useToolSidebarStore.getState().collapsed["s3-drive"]).toBeUndefined()
+  })
+})
diff --git a/apps/desktop-ui/src/store/tab-store.ts b/apps/desktop-ui/src/store/tab-store.ts
index f2ea5ef3..0f7bfb3f 100644
--- a/apps/desktop-ui/src/store/tab-store.ts
+++ b/apps/desktop-ui/src/store/tab-store.ts
@@ -18,6 +18,7 @@ interface TabStore {
   closeTab: (path: string) => void
   setActiveTab: (path: string) => void
   closeAllTabs: () => void
+  moveTab: (fromPath: string, toPath: string) => void
 }
 
 export const useTabStore = create<TabStore>()(
@@ -52,6 +53,18 @@ export const useTabStore = create<TabStore>()(
       setActiveTab: (path: string) => set({ activeTabPath: path }),
 
       closeAllTabs: () => set({ tabs: [], activeTabPath: null }),
+
+      // Drag-reorder: pull the dragged tab out and drop it at the target's slot.
+      moveTab: (fromPath: string, toPath: string) => {
+        const { tabs } = get()
+        const from = tabs.findIndex(t => t.path === fromPath)
+        const to = tabs.findIndex(t => t.path === toPath)
+        if (from === -1 || to === -1 || from === to) return
+        const next = [...tabs]
+        const [moved] = next.splice(from, 1)
+        next.splice(to, 0, moved)
+        set({ tabs: next })
+      },
     }),
     {
       name: 'mdt-app-tabs',
diff --git a/apps/desktop-ui/src/store/tool-sidebar-store.ts b/apps/desktop-ui/src/store/tool-sidebar-store.ts
new file mode 100644
index 00000000..5694945c
--- /dev/null
+++ b/apps/desktop-ui/src/store/tool-sidebar-store.ts
@@ -0,0 +1,25 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+interface ToolSidebarState {
+  /**
+   * Desktop collapse state keyed by tool id. A missing key means "open" — the
+   * default — so a tool that has never been collapsed stores nothing.
+   */
+  collapsed: Record<string, boolean>
+  setCollapsed: (toolId: string, collapsed: boolean) => void
+  toggle: (toolId: string) => void
+}
+
+export const useToolSidebarStore = create<ToolSidebarState>()(
+  persist(
+    (set) => ({
+      collapsed: {},
+      setCollapsed: (toolId, collapsed) =>
+        set((s) => ({ collapsed: { ...s.collapsed, [toolId]: collapsed } })),
+      toggle: (toolId) =>
+        set((s) => ({ collapsed: { ...s.collapsed, [toolId]: !s.collapsed[toolId] } })),
+    }),
+    { name: 'tool-sidebar-storage' },
+  ),
+)
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 250af240..a1f4d248 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mydevtools/desktop",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "private": true,
   "scripts": {
     "dev": "tauri dev",
diff --git a/apps/desktop/scripts/release-local.sh b/apps/desktop/scripts/release-local.sh
index cb6a701d..d01b6363 100755
--- a/apps/desktop/scripts/release-local.sh
+++ b/apps/desktop/scripts/release-local.sh
@@ -67,8 +67,8 @@ trap 'rm -rf "$WORK"' EXIT
 codesign_retry() {
   local target="$1" i
   for i in 1 2 3 4 5; do
-    if codesign --force --timestamp --sign "$APPLE_SIGNING_IDENTITY" "$target" 2>/tmp/cs_err; then return 0; fi
-    echo "  codesign attempt $i failed: $(cat /tmp/cs_err) — retrying in 10s…" >&2
+    if codesign --force --timestamp --sign "$APPLE_SIGNING_IDENTITY" "$target" 2>"$WORK/cs_err"; then return 0; fi
+    echo "  codesign attempt $i failed: $(cat "$WORK/cs_err") — retrying in 10s…" >&2
     sleep 10
   done
   echo "release-local: codesign failed after 5 attempts" >&2; return 1
diff --git a/apps/desktop/src-tauri/Cargo.lock b/apps/desktop/src-tauri/Cargo.lock
index f204b476..9d758e9f 100644
--- a/apps/desktop/src-tauri/Cargo.lock
+++ b/apps/desktop/src-tauri/Cargo.lock
@@ -2828,7 +2828,7 @@ dependencies = [
 
 [[package]]
 name = "mydevtools-desktop"
-version = "0.1.13"
+version = "0.1.14"
 dependencies = [
  "base64 0.22.1",
  "bytes",
diff --git a/apps/desktop/src-tauri/Cargo.toml b/apps/desktop/src-tauri/Cargo.toml
index 33d14d25..487b5d5d 100644
--- a/apps/desktop/src-tauri/Cargo.toml
+++ b/apps/desktop/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "mydevtools-desktop"
-version = "0.1.13"
+version = "0.1.14"
 description = "MyDevTools desktop app"
 edition = "2021"
 
diff --git a/apps/desktop/src-tauri/src/dbtools/sqlite.rs b/apps/desktop/src-tauri/src/dbtools/sqlite.rs
index b145fd33..6da4eecb 100644
--- a/apps/desktop/src-tauri/src/dbtools/sqlite.rs
+++ b/apps/desktop/src-tauri/src/dbtools/sqlite.rs
@@ -438,6 +438,6 @@ mod tests {
         // They would resolve against a working directory the user cannot see.
         assert!(config_from(&json!({ "path": "app.db" })).is_err());
         assert!(config_from(&json!({ "path": "" })).is_err());
-        assert!(config_from(&json!({ "path": "/tmp/app.db" })).is_ok());
+        assert!(config_from(&json!({ "path": "/tmp/app.db" })).is_ok()); // threatcrush-disable-line insecure-temp-file
     }
 }
diff --git a/apps/desktop/src-tauri/tauri.conf.json b/apps/desktop/src-tauri/tauri.conf.json
index d826e6ad..67ef1358 100644
--- a/apps/desktop/src-tauri/tauri.conf.json
+++ b/apps/desktop/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "MyDevTools",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "identifier": "tech.mydevtools.desktop",
   "build": {
     "beforeDevCommand": "pnpm --filter @mydevtools/desktop-ui dev:tauri",
@@ -20,6 +20,7 @@
         "center": true,
         "titleBarStyle": "Overlay",
         "hiddenTitle": true,
+        "dragDropEnabled": false,
         "trafficLightPosition": { "x": 14, "y": 27 }
       }
     ],
diff --git a/apps/web/src/app/blog/[slug]/page.tsx b/apps/web/src/app/blog/[slug]/page.tsx
index 66091ebc..b202b602 100644
--- a/apps/web/src/app/blog/[slug]/page.tsx
+++ b/apps/web/src/app/blog/[slug]/page.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link'
 import { ArrowRight, ArrowLeft, Clock, CheckCircle2 } from 'lucide-react'
 import { Header } from '@/components/header'
 import { Footer } from '@/components/footer'
+import { JsonLd } from '@/components/seo/json-ld'
 import { blogPosts, getBlogPost } from '@/lib/blog/posts'
 import { toolsMetadata } from '@/lib/metadata'
 
@@ -144,10 +145,7 @@ export default async function BlogPostPage({
 
   return (
     <div className="dark flex min-h-screen flex-col bg-background text-foreground font-sans">
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-      />
+      <JsonLd data={jsonLd} />
       <Header />
 
       <main className="flex-1">
@@ -243,6 +241,8 @@ export default async function BlogPostPage({
                                 {lines.map((line, k) => (
                                   <li key={k} className="flex gap-2.5">
                                     <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-sky-400" />
+                                    {/* Bold/code spans of our own build-time posts.ts prose — no external input reaches here. */}
+                                    {/* threatcrush-disable-next-line js-unescaped-html-sink */}
                                     <span dangerouslySetInnerHTML={{ __html: line.slice(2).replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/`(.*?)`/g, '<code class="font-mono text-sm bg-muted rounded px-1 py-0.5">$1</code>') }} />
                                   </li>
                                 ))}
@@ -253,6 +253,7 @@ export default async function BlogPostPage({
                         return (
                           <p
                             key={j}
+                            // threatcrush-disable-next-line js-unescaped-html-sink
                             dangerouslySetInnerHTML={{
                               __html: para
                                 .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
diff --git a/apps/web/src/app/blog/page.tsx b/apps/web/src/app/blog/page.tsx
index 7d87f6de..f5d38c9b 100644
--- a/apps/web/src/app/blog/page.tsx
+++ b/apps/web/src/app/blog/page.tsx
@@ -3,6 +3,7 @@ import Link from 'next/link'
 import { ArrowRight, Clock } from 'lucide-react'
 import { Header } from '@/components/header'
 import { Footer } from '@/components/footer'
+import { JsonLd } from '@/components/seo/json-ld'
 import { blogPosts } from '@/lib/blog/posts'
 
 const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://mydevtools.tech'
@@ -69,10 +70,7 @@ export default function BlogPage() {
 
   return (
     <div className="dark flex min-h-screen flex-col bg-background text-foreground font-sans">
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-      />
+      <JsonLd data={jsonLd} />
       <Header />
 
       <main className="flex-1">
diff --git a/apps/web/src/app/changelog/page.tsx b/apps/web/src/app/changelog/page.tsx
index e980c6b0..cc077406 100644
--- a/apps/web/src/app/changelog/page.tsx
+++ b/apps/web/src/app/changelog/page.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next'
 import Link from 'next/link'
 import { Header } from '@/components/header'
 import { Footer } from '@/components/footer'
+import { JsonLd } from '@/components/seo/json-ld'
 import { changelog, changeTypeLabels, latestRelease, type ChangeType } from '@/lib/changelog'
 
 const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://mydevtools.tech'
@@ -100,10 +101,7 @@ export default function ChangelogPage() {
 
   return (
     <div className="dark flex min-h-screen flex-col bg-background text-foreground font-sans">
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-      />
+      <JsonLd data={jsonLd} />
       <Header />
 
       <main className="flex-1">
diff --git a/apps/web/src/app/compare/[slug]/page.tsx b/apps/web/src/app/compare/[slug]/page.tsx
index e47e015e..e8520767 100644
--- a/apps/web/src/app/compare/[slug]/page.tsx
+++ b/apps/web/src/app/compare/[slug]/page.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link'
 import { ArrowRight, CheckCircle2 } from 'lucide-react'
 import { Header } from '@/components/header'
 import { Footer } from '@/components/footer'
+import { JsonLd } from '@/components/seo/json-ld'
 import {
   comparisonPageSlugs,
   getComparisonPage,
@@ -96,10 +97,7 @@ export default async function ComparisonPage({
 
   return (
     <div className="dark flex min-h-screen flex-col bg-background text-foreground font-sans">
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-      />
+      <JsonLd data={jsonLd} />
       <Header />
       <main className="flex-1">
         <section className="relative overflow-hidden py-20 md:py-28">
diff --git a/apps/web/src/app/tools/[slug]/page.tsx b/apps/web/src/app/tools/[slug]/page.tsx
index 358167d1..e0504087 100644
--- a/apps/web/src/app/tools/[slug]/page.tsx
+++ b/apps/web/src/app/tools/[slug]/page.tsx
@@ -4,6 +4,7 @@ import type { Metadata } from 'next'
 import { ArrowRight, CheckCircle2, ExternalLink, Layers, BookOpen } from 'lucide-react'
 import { Header } from '@/components/header'
 import { Footer } from '@/components/footer'
+import { JsonLd } from '@/components/seo/json-ld'
 import { toolsMetadata, toolSeoTitle } from '@/lib/metadata'
 import { buildSoftwareApplicationJsonLd } from '@/lib/seo/structured-data'
 import { publicToolSlugs, getRelatedTools, toolCategoryMap } from '@/lib/tool-categories'
@@ -76,12 +77,7 @@ export default async function ToolLandingPage({
 
   return (
     <div className="dark flex flex-col min-h-screen bg-background text-foreground font-sans">
-      {jsonLd && (
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-        />
-      )}
+      {jsonLd && <JsonLd data={jsonLd} />}
 
       <Header />
 
diff --git a/apps/web/src/components/marketing-seo-page.tsx b/apps/web/src/components/marketing-seo-page.tsx
index f080e784..c8d0e7e0 100644
--- a/apps/web/src/components/marketing-seo-page.tsx
+++ b/apps/web/src/components/marketing-seo-page.tsx
@@ -6,6 +6,7 @@ import { Footer } from '@/components/footer'
 import { MdtFx } from '@/components/mdt-fx'
 import MdtAurora from '@/components/mdt-aurora'
 import { MdtBoot } from '@/components/mdt-boot'
+import { JsonLd } from '@/components/seo/json-ld'
 import type { PlatformSeoPage } from '@/lib/seo/platform-pages'
 import { publicToolSlugs } from '@/lib/tool-categories'
 import { toolsMetadata } from '@/lib/metadata'
@@ -80,12 +81,7 @@ export function MarketingSeoPage({
       </div>
       <MdtFx />
       <MdtBoot />
-      {jsonLd ? (
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-        />
-      ) : null}
+      {jsonLd ? <JsonLd data={jsonLd} /> : null}
       <Header />
       <main className="flex-1">
         <section className="relative overflow-hidden py-20 md:py-28">
diff --git a/apps/web/src/components/seo/json-ld.tsx b/apps/web/src/components/seo/json-ld.tsx
new file mode 100644
index 00000000..f1ec9c4b
--- /dev/null
+++ b/apps/web/src/components/seo/json-ld.tsx
@@ -0,0 +1,19 @@
+/**
+ * One JSON-LD script tag, escaped once.
+ *
+ * `JSON.stringify` happily emits `</script>` if any string in the graph
+ * contains it, which closes the tag early and drops the rest of the page's
+ * markup into the document. Escaping every `<` as a unicode escape keeps the
+ * value identical to a JSON parser and inert to the HTML tokenizer.
+ */
+export function JsonLd({ id, data }: { id?: string; data: unknown }) {
+  return (
+    <script
+      id={id}
+      type="application/ld+json"
+      // Escaped above; the only writer is our own build-time SEO data.
+      // threatcrush-disable-next-line js-unescaped-html-sink
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(data).replace(/</g, '\\u003c') }}
+    />
+  )
+}
diff --git a/apps/web/src/components/seo/site-wide-json-ld.tsx b/apps/web/src/components/seo/site-wide-json-ld.tsx
index 15bd3808..83e4602d 100644
--- a/apps/web/src/components/seo/site-wide-json-ld.tsx
+++ b/apps/web/src/components/seo/site-wide-json-ld.tsx
@@ -1,13 +1,7 @@
 import { buildWebSiteGraphJsonLd } from '@/lib/seo/structured-data'
+import { JsonLd } from '@/components/seo/json-ld'
 
 /** WebSite + Organization + ItemList of all tools — in root head for crawlers & AI. */
 export function SiteWideJsonLd() {
-  const json = JSON.stringify(buildWebSiteGraphJsonLd())
-  return (
-    <script
-      id="sitewide-jsonld"
-      type="application/ld+json"
-      dangerouslySetInnerHTML={{ __html: json }}
-    />
-  )
+  return <JsonLd id="sitewide-jsonld" data={buildWebSiteGraphJsonLd()} />
 }
diff --git a/apps/web/src/lib/changelog.ts b/apps/web/src/lib/changelog.ts
index 6d8c37b1..6d0a111d 100644
--- a/apps/web/src/lib/changelog.ts
+++ b/apps/web/src/lib/changelog.ts
@@ -25,6 +25,19 @@ export const changeTypeLabels: Record<ChangeType, string> = {
  * comparator is code nobody needs when the author controls the order.
  */
 export const changelog: ChangelogEntry[] = [
+  {
+    version: '0.1.14',
+    date: '2026-08-14',
+    title: 'Reorderable tabs and a refreshed sidebar',
+    summary:
+      'Open tabs can now be dragged into whatever order you like, the tool sidebar has been reworked, and a few rough edges in Notes and the Markdown tool are smoothed out.',
+    changes: [
+      { type: 'added', text: 'Drag open tabs to rearrange them in any order.' },
+      { type: 'improved', text: 'Reworked the tool sidebar.' },
+      { type: 'fixed', text: 'A layout glitch in Notes.' },
+      { type: 'fixed', text: 'The Markdown tool now shows the correct notification after a download.' },
+    ],
+  },
   {
     version: '0.1.13',
     date: '2026-08-13',