From 3b1298813cdd9f125d2a82907877fde4b855155a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 22 Jul 2026 06:08:31 +0000
Subject: [PATCH 01/10] Menu/search/UI polish: shortcuts dialog, Tools
 submenus, richer diff search
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix Mermaid "Expand": close the snippet editor first and raise the viewer
  above all dialogs, so the diagram window actually appears
- Restructure Tools into per-format submenus (Base64 / JSON / XML / SQL /
  Text Encryption) in both the native menu and the in-app menu bar
- Add Help → Keyboard Shortcuts listing every shortcut for the host OS,
  backed by a shared utils/shortcuts.js (also feeds the floating hint bar)
- Suppress the macOS-injected Edit → AutoFill item
- Remove the redundant "Diff Bro" toolbar title
- Diff search: add match-case and whole-word toggles, and guard regex search
  against ReDoS/over-long patterns (utils/searchRegex.js)
- Align the "Saved diffs" header with the Left/Right file-slot labels and add
  bottom spacing beneath the Snippets section

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V6QHAnibiPenmyN7q3Rh4m
---
 src/main/menu.js                              | 67 ++++++++++++++-----
 src/renderer/src/components/AppDialogs.vue    |  2 +
 src/renderer/src/components/AppToolbar.vue    |  2 -
 src/renderer/src/components/DiffViewer.vue    | 20 +++++-
 .../components/KeyboardShortcutsDialog.vue    | 39 +++++++++++
 src/renderer/src/components/ShortcutBar.vue   | 12 +---
 .../src/components/styles/AppToolbar.css      |  9 +--
 .../src/components/styles/DiffViewer.css      |  7 +-
 .../styles/KeyboardShortcutsDialog.css        | 43 ++++++++++++
 .../components/styles/MermaidViewerDialog.css |  4 +-
 .../src/components/styles/SavedDiffs.css      |  5 +-
 .../src/components/styles/SnippetsPanel.css   |  4 ++
 src/renderer/src/composables/useDiffSearch.js | 27 +++++++-
 .../src/composables/useSnippetDraft.js        |  8 ++-
 src/renderer/src/menus.js                     | 63 ++++++++++++-----
 src/renderer/src/stores/diffStore.js          |  5 +-
 src/renderer/src/utils/searchRegex.js         | 33 +++++++++
 src/renderer/src/utils/shortcuts.js           | 59 ++++++++++++++++
 tests/renderer/utils/searchRegex.test.js      | 32 +++++++++
 tests/renderer/utils/shortcuts.test.js        | 31 +++++++++
 20 files changed, 413 insertions(+), 59 deletions(-)
 create mode 100644 src/renderer/src/components/KeyboardShortcutsDialog.vue
 create mode 100644 src/renderer/src/components/styles/KeyboardShortcutsDialog.css
 create mode 100644 src/renderer/src/utils/searchRegex.js
 create mode 100644 src/renderer/src/utils/shortcuts.js
 create mode 100644 tests/renderer/utils/searchRegex.test.js
 create mode 100644 tests/renderer/utils/shortcuts.test.js

diff --git a/src/main/menu.js b/src/main/menu.js
index 38b64df..ac9908f 100644
--- a/src/main/menu.js
+++ b/src/main/menu.js
@@ -33,10 +33,15 @@ function resetZoom() {
 // "Edit". Both are dead ends here: dictation is a network service this app must
 // never touch, and the character palette cannot insert into a sandboxed
 // renderer, so it silently does nothing. Suppress them before the menu is built.
+// AppKit also injects an "AutoFill" submenu (Passwords/Contacts) into text
+// Edit menus on recent macOS. It is a dead end in a sandboxed, offline app —
+// there is nothing to autofill and Passwords is a network-backed service this
+// app must never touch — so suppress it alongside dictation and the palette.
 function disableInjectedMacMenuItems() {
   if (process.platform !== 'darwin') return
   systemPreferences.setUserDefault('NSDisabledDictationMenuItem', 'boolean', true)
   systemPreferences.setUserDefault('NSDisabledCharacterPaletteMenuItem', 'boolean', true)
+  systemPreferences.setUserDefault('NSDisabledAutoFillMenuItem', 'boolean', true)
 }
 
 export function installMenu() {
@@ -145,33 +150,65 @@ export function installMenu() {
     },
     {
       label: 'Tools',
+      // Grouped by format so each tool's operations live under their own
+      // heading (Tools → Base64 → …), leaving room to grow per format.
       submenu: [
         {
-          label: 'Base64 Encode/Decode',
-          accelerator: 'CmdOrCtrl+Shift+B',
-          click: () => sendToFocused('tools-base64')
+          label: 'Base64',
+          submenu: [
+            {
+              label: 'Encode / Decode',
+              accelerator: 'CmdOrCtrl+Shift+B',
+              click: () => sendToFocused('tools-base64')
+            }
+          ]
         },
         {
-          label: 'JSON Format/Validate',
-          accelerator: 'CmdOrCtrl+Shift+J',
-          click: () => sendToFocused('tools-json')
+          label: 'JSON',
+          submenu: [
+            {
+              label: 'Format / Validate',
+              accelerator: 'CmdOrCtrl+Shift+J',
+              click: () => sendToFocused('tools-json')
+            }
+          ]
         },
         {
-          label: 'XML Format/Validate',
-          accelerator: 'CmdOrCtrl+Shift+M',
-          click: () => sendToFocused('tools-xml')
+          label: 'XML',
+          submenu: [
+            {
+              label: 'Format / Validate',
+              accelerator: 'CmdOrCtrl+Shift+M',
+              click: () => sendToFocused('tools-xml')
+            }
+          ]
         },
         {
-          label: 'SQL Format/Validate',
-          accelerator: 'CmdOrCtrl+Shift+Q',
-          click: () => sendToFocused('tools-sql')
+          label: 'SQL',
+          submenu: [
+            {
+              label: 'Format / Validate',
+              accelerator: 'CmdOrCtrl+Shift+Q',
+              click: () => sendToFocused('tools-sql')
+            }
+          ]
         },
         {
-          label: 'Encrypt/Decrypt Text',
-          accelerator: 'CmdOrCtrl+Shift+X',
-          click: () => sendToFocused('tools-crypt')
+          label: 'Text Encryption',
+          submenu: [
+            {
+              label: 'Encrypt / Decrypt',
+              accelerator: 'CmdOrCtrl+Shift+X',
+              click: () => sendToFocused('tools-crypt')
+            }
+          ]
         }
       ]
+    },
+    {
+      role: 'help',
+      label: 'Help',
+      submenu: [{ label: 'Keyboard Shortcuts', click: () => sendToFocused('shortcuts') }]
     }
   ]
   Menu.setApplicationMenu(Menu.buildFromTemplate(template))
diff --git a/src/renderer/src/components/AppDialogs.vue b/src/renderer/src/components/AppDialogs.vue
index f0ac055..3fa634d 100644
--- a/src/renderer/src/components/AppDialogs.vue
+++ b/src/renderer/src/components/AppDialogs.vue
@@ -20,6 +20,7 @@ import TrustedKeysDialog from './TrustedKeysDialog.vue'
 import ShareKeyDialog from './ShareKeyDialog.vue'
 import ConfigBackupDialog from './ConfigBackupDialog.vue'
 import SettingsDialog from './SettingsDialog.vue'
+import KeyboardShortcutsDialog from './KeyboardShortcutsDialog.vue'
 import MermaidViewerDialog from './MermaidViewerDialog.vue'
 
 const store = useDiffStore()
@@ -35,6 +36,7 @@ const vault = useVaultStore()
   <ShareKeyDialog v-if="store.showShareKeyDialog" />
   <ConfigBackupDialog v-if="store.configMode" />
   <SettingsDialog v-if="store.showSettingsDialog" />
+  <KeyboardShortcutsDialog v-if="store.showShortcutsDialog" />
   <MermaidViewerDialog v-if="store.mermaidView" />
   <AddTrustedKeyDialog v-if="store.pendingTrustedKey" />
   <Base64Dialog v-if="store.showBase64Dialog" />
diff --git a/src/renderer/src/components/AppToolbar.vue b/src/renderer/src/components/AppToolbar.vue
index 3e97d7e..55286ea 100644
--- a/src/renderer/src/components/AppToolbar.vue
+++ b/src/renderer/src/components/AppToolbar.vue
@@ -10,8 +10,6 @@ const store = useDiffStore()
 
 <template>
   <header class="toolbar">
-    <span class="logo">Diff Bro</span>
-
     <span v-if="store.ready && store.stats" class="stats">
       <span class="add">+{{ store.stats.additions }}</span>
       <span class="del">−{{ store.stats.deletions }}</span>
diff --git a/src/renderer/src/components/DiffViewer.vue b/src/renderer/src/components/DiffViewer.vue
index 7378608..985af78 100644
--- a/src/renderer/src/components/DiffViewer.vue
+++ b/src/renderer/src/components/DiffViewer.vue
@@ -69,8 +69,14 @@ onMounted(() => {
 })
 
 watch(() => [store.left, store.right], setModels)
-watch(() => [leftSearch.query, leftSearch.isRegex], leftSearch.run)
-watch(() => [rightSearch.query, rightSearch.isRegex], rightSearch.run)
+watch(
+  () => [leftSearch.query, leftSearch.isRegex, leftSearch.matchCase, leftSearch.wholeWord],
+  leftSearch.run
+)
+watch(
+  () => [rightSearch.query, rightSearch.isRegex, rightSearch.matchCase, rightSearch.wholeWord],
+  rightSearch.run
+)
 watch(
   () => [store.renderSideBySide, store.ignoreTrimWhitespace],
   ([split, ignoreWs]) => {
@@ -111,7 +117,15 @@ onBeforeUnmount(() => {
           @keyup.enter="s.ref.step(1)"
           @keyup.escape="s.ref.query = ''"
         />
-        <label class="regex" title="Regular expression">
+        <label class="opt" title="Match case">
+          <input v-model="s.ref.matchCase" type="checkbox" />
+          Aa
+        </label>
+        <label class="opt" title="Whole word">
+          <input v-model="s.ref.wholeWord" type="checkbox" />
+          ⌈W⌋
+        </label>
+        <label class="opt" title="Regular expression (limited for safety)">
           <input v-model="s.ref.isRegex" type="checkbox" />
           .*
         </label>
diff --git a/src/renderer/src/components/KeyboardShortcutsDialog.vue b/src/renderer/src/components/KeyboardShortcutsDialog.vue
new file mode 100644
index 0000000..1e9c1b5
--- /dev/null
+++ b/src/renderer/src/components/KeyboardShortcutsDialog.vue
@@ -0,0 +1,39 @@
+<script setup>
+// Help → Keyboard Shortcuts: the full, grouped list. Labels come from
+// utils/shortcuts.js, which resolves modifier names against the host OS, so a
+// Mac shows ⌘ where Windows/Linux show Ctrl.
+import { useDiffStore } from '../stores/diffStore'
+import { SHORTCUT_GROUPS } from '../utils/shortcuts'
+import { isMac } from '../keys'
+import BaseDialog from './BaseDialog.vue'
+
+const store = useDiffStore()
+const groups = SHORTCUT_GROUPS
+const platform = isMac ? 'macOS' : 'this system'
+
+function close() {
+  store.showShortcutsDialog = false
+}
+</script>
+
+<template>
+  <BaseDialog width="440px" title="Keyboard shortcuts" @close="close">
+    <p class="dialog-note">Shortcuts for <strong>{{ platform }}</strong>.</p>
+    <div class="groups">
+      <section v-for="g in groups" :key="g.group" class="group">
+        <h4>{{ g.group }}</h4>
+        <ul>
+          <li v-for="s in g.items" :key="s.keys">
+            <span class="label">{{ s.label }}</span>
+            <kbd>{{ s.keys }}</kbd>
+          </li>
+        </ul>
+      </section>
+    </div>
+    <template #actions>
+      <button class="btn btn-primary" @click="close">Done</button>
+    </template>
+  </BaseDialog>
+</template>
+
+<style scoped src="./styles/KeyboardShortcutsDialog.css"></style>
diff --git a/src/renderer/src/components/ShortcutBar.vue b/src/renderer/src/components/ShortcutBar.vue
index 96291dd..ccdbe5d 100644
--- a/src/renderer/src/components/ShortcutBar.vue
+++ b/src/renderer/src/components/ShortcutBar.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { MOD } from '../keys'
+import { SHORTCUT_BAR } from '../utils/shortcuts'
 
 // Translucent hint pill floating over the bottom of the diff area — it never
 // takes layout space and never covers the top of the content, where the diff
@@ -8,15 +8,7 @@ import { MOD } from '../keys'
 const DISMISS_KEY = 'diffbro.shortcutBarDismissed'
 const dismissed = ref(localStorage.getItem(DISMISS_KEY) === '1')
 
-const shortcuts = [
-  [`${MOD}+1`, 'open left'],
-  [`${MOD}+2`, 'open right'],
-  [`${MOD}+S`, 'save diff'],
-  [`${MOD}+Shift+S`, 'swap'],
-  [`${MOD}+T`, 'paste text'],
-  [`${MOD}+\\`, 'split view'],
-  [`${MOD}+K`, 'clear']
-]
+const shortcuts = SHORTCUT_BAR
 
 function dismiss() {
   dismissed.value = true
diff --git a/src/renderer/src/components/styles/AppToolbar.css b/src/renderer/src/components/styles/AppToolbar.css
index 6fc2ea7..a0a0e68 100644
--- a/src/renderer/src/components/styles/AppToolbar.css
+++ b/src/renderer/src/components/styles/AppToolbar.css
@@ -8,12 +8,6 @@
   /* Distinct separator so the stacked bars don't blend into one dark mass. */
   border-bottom: 1px solid var(--border);
 }
-.logo {
-  flex: 1;
-  min-width: 0;
-  font-weight: 700;
-  letter-spacing: 0.5px;
-}
 .stats {
   display: flex;
   gap: 8px;
@@ -32,6 +26,9 @@
   gap: 12px;
   color: var(--text-dim);
   white-space: nowrap;
+  /* With the app title removed, the option clusters hold the right edge; stats
+     (when a diff is loaded) stay on the left. */
+  margin-left: auto;
 }
 /* Logical clusters (display toggles · actions · appearance), each separated by
    a divider, so the toolbar reads as groups rather than one glued-together row. */
diff --git a/src/renderer/src/components/styles/DiffViewer.css b/src/renderer/src/components/styles/DiffViewer.css
index 05f8ecd..50885ef 100644
--- a/src/renderer/src/components/styles/DiffViewer.css
+++ b/src/renderer/src/components/styles/DiffViewer.css
@@ -42,7 +42,7 @@
 .search-input.error {
   border-color: var(--danger-bg);
 }
-.regex {
+.opt {
   display: flex;
   align-items: center;
   gap: 3px;
@@ -50,6 +50,11 @@
   color: var(--text-dim);
   font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
   cursor: pointer;
+  white-space: nowrap;
+}
+/* A checked toggle reads as active, so it's obvious which constraints are on. */
+.opt:has(input:checked) {
+  color: var(--accent);
 }
 .count {
   font-size: var(--font-sm);
diff --git a/src/renderer/src/components/styles/KeyboardShortcutsDialog.css b/src/renderer/src/components/styles/KeyboardShortcutsDialog.css
new file mode 100644
index 0000000..eeb5d65
--- /dev/null
+++ b/src/renderer/src/components/styles/KeyboardShortcutsDialog.css
@@ -0,0 +1,43 @@
+.groups {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  max-height: 62vh;
+  overflow-y: auto;
+}
+.group h4 {
+  margin: 0 0 var(--space-1);
+  font-size: var(--font-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-dim);
+}
+.group ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+.group li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  font-size: var(--font-md);
+}
+.label {
+  color: var(--text);
+}
+kbd {
+  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
+  font-size: var(--font-xs);
+  color: var(--text-hint);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 2px 6px;
+  white-space: nowrap;
+}
diff --git a/src/renderer/src/components/styles/MermaidViewerDialog.css b/src/renderer/src/components/styles/MermaidViewerDialog.css
index 6339544..3433b10 100644
--- a/src/renderer/src/components/styles/MermaidViewerDialog.css
+++ b/src/renderer/src/components/styles/MermaidViewerDialog.css
@@ -7,7 +7,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 30;
+  /* Above every dialog (30) and the drop overlay (50): the diagram viewer is a
+     standalone window that should cover the diff panes and any dialog. */
+  z-index: 60;
 }
 .panel {
   display: flex;
diff --git a/src/renderer/src/components/styles/SavedDiffs.css b/src/renderer/src/components/styles/SavedDiffs.css
index 234a045..a726cf5 100644
--- a/src/renderer/src/components/styles/SavedDiffs.css
+++ b/src/renderer/src/components/styles/SavedDiffs.css
@@ -25,9 +25,12 @@
   border-bottom: 1px solid var(--border);
 }
 /* The first section sits flush at the top; later ones get a gap of panel
-   background above the band to open up the seam between sections. */
+   background above the band to open up the seam between sections. Its label is
+   raised to line up with the Left/Right file-slot labels across the divider —
+   those sit at 10px (row padding) + 6px (slot padding) from the top. */
 .head:first-child {
   border-top: none;
+  padding-top: 16px;
 }
 .head.sub {
   margin-top: 12px;
diff --git a/src/renderer/src/components/styles/SnippetsPanel.css b/src/renderer/src/components/styles/SnippetsPanel.css
index 5ddecd0..227e83e 100644
--- a/src/renderer/src/components/styles/SnippetsPanel.css
+++ b/src/renderer/src/components/styles/SnippetsPanel.css
@@ -1,6 +1,10 @@
 .snippets-section {
   display: flex;
   flex-direction: column;
+  /* This is the last section in the scrolling sidebar; reserve space beneath it
+     so the final snippets never sit flush against the window's bottom edge,
+     even when the list is scrolled all the way down. */
+  padding-bottom: var(--space-4);
 }
 /* Section header band — matches SavedDiffs.vue, now a collapse toggle. */
 .head {
diff --git a/src/renderer/src/composables/useDiffSearch.js b/src/renderer/src/composables/useDiffSearch.js
index 891609b..0f3fe32 100644
--- a/src/renderer/src/composables/useDiffSearch.js
+++ b/src/renderer/src/composables/useDiffSearch.js
@@ -1,12 +1,19 @@
 import { reactive } from 'vue'
 import * as monaco from 'monaco-editor'
+import { checkRegex } from '../utils/searchRegex'
 
-// Each side searches only its own model, with its own query, match count, and
-// navigation — the left and right panes are independent.
+// The word separators Monaco uses to bound a whole-word match. Passing this to
+// findMatches restricts matches to whole words; passing null matches anywhere.
+const WORD_SEPARATORS = '`~!@#$%^&*()-=+[{]}\\|;:\'",.<>/?'
+
+// Each side searches only its own model, with its own query, options, match
+// count, and navigation — the left and right panes are independent.
 export function makeSearch(getModel, getSubEditor, getDecos) {
   const state = reactive({
     query: '',
     isRegex: false,
+    matchCase: false,
+    wholeWord: false,
     matchCount: 0,
     currentIndex: 0,
     error: false
@@ -38,10 +45,24 @@ export function makeSearch(getModel, getSubEditor, getDecos) {
     state.error = false
     const model = getModel()
     if (!state.query || !model) return clear()
+    // A regex query is refused (and flagged) unless it passes the ReDoS/length
+    // guard — Monaco's search is synchronous, so an unsafe pattern would hang
+    // the renderer.
+    if (state.isRegex && !checkRegex(state.query).ok) {
+      state.error = true
+      return clear()
+    }
     try {
       // findMatches(search, searchScope, isRegex, matchCase, wordSeparators, captureMatches)
       matches = model
-        .findMatches(state.query, false, state.isRegex, false, null, false)
+        .findMatches(
+          state.query,
+          false,
+          state.isRegex,
+          state.matchCase,
+          state.wholeWord ? WORD_SEPARATORS : null,
+          false
+        )
         .map((m) => m.range)
     } catch {
       state.error = true
diff --git a/src/renderer/src/composables/useSnippetDraft.js b/src/renderer/src/composables/useSnippetDraft.js
index df18f24..85029db 100644
--- a/src/renderer/src/composables/useSnippetDraft.js
+++ b/src/renderer/src/composables/useSnippetDraft.js
@@ -99,7 +99,13 @@ export function useSnippetDraft() {
   }
 
   function expandDiagram() {
-    if (content.value.trim()) diff.openMermaid(name.value.trim() || 'Diagram', content.value)
+    if (!content.value.trim()) return
+    // Close the editor first: the viewer and this dialog are siblings at the
+    // same stacking level, so leaving the editor open would render it on top of
+    // the diagram and nothing would appear to happen. The full-window viewer
+    // stands on its own.
+    diff.openMermaid(name.value.trim() || 'Diagram', content.value)
+    close()
   }
 
   return {
diff --git a/src/renderer/src/menus.js b/src/renderer/src/menus.js
index 1326efe..07ed7fc 100644
--- a/src/renderer/src/menus.js
+++ b/src/renderer/src/menus.js
@@ -73,33 +73,66 @@ export function buildMenus(store) {
     {
       id: 'tools',
       label: 'Tools',
+      // Grouped by format (Tools → Base64 → …) to mirror the native menu.
       items: [
         {
-          label: 'Base64 Encode/Decode',
-          keys: `${MOD}+Shift+B`,
-          run: () => store.handleMenuAction('tools-base64')
+          label: 'Base64',
+          items: [
+            {
+              label: 'Encode / Decode',
+              keys: `${MOD}+Shift+B`,
+              run: () => store.handleMenuAction('tools-base64')
+            }
+          ]
         },
         {
-          label: 'JSON Format/Validate',
-          keys: `${MOD}+Shift+J`,
-          run: () => store.handleMenuAction('tools-json')
+          label: 'JSON',
+          items: [
+            {
+              label: 'Format / Validate',
+              keys: `${MOD}+Shift+J`,
+              run: () => store.handleMenuAction('tools-json')
+            }
+          ]
         },
         {
-          label: 'XML Format/Validate',
-          keys: `${MOD}+Shift+M`,
-          run: () => store.handleMenuAction('tools-xml')
+          label: 'XML',
+          items: [
+            {
+              label: 'Format / Validate',
+              keys: `${MOD}+Shift+M`,
+              run: () => store.handleMenuAction('tools-xml')
+            }
+          ]
         },
         {
-          label: 'SQL Format/Validate',
-          keys: `${MOD}+Shift+Q`,
-          run: () => store.handleMenuAction('tools-sql')
+          label: 'SQL',
+          items: [
+            {
+              label: 'Format / Validate',
+              keys: `${MOD}+Shift+Q`,
+              run: () => store.handleMenuAction('tools-sql')
+            }
+          ]
         },
         {
-          label: 'Encrypt/Decrypt Text',
-          keys: `${MOD}+Shift+X`,
-          run: () => store.handleMenuAction('tools-crypt')
+          label: 'Text Encryption',
+          items: [
+            {
+              label: 'Encrypt / Decrypt',
+              keys: `${MOD}+Shift+X`,
+              run: () => store.handleMenuAction('tools-crypt')
+            }
+          ]
         }
       ]
+    },
+    {
+      id: 'help',
+      label: 'Help',
+      items: [
+        { label: 'Keyboard Shortcuts', run: () => store.handleMenuAction('shortcuts') }
+      ]
     }
   ]
 }
diff --git a/src/renderer/src/stores/diffStore.js b/src/renderer/src/stores/diffStore.js
index a79931a..a16ccf9 100644
--- a/src/renderer/src/stores/diffStore.js
+++ b/src/renderer/src/stores/diffStore.js
@@ -71,7 +71,8 @@ const MENU_ACTIONS = {
   'tools-json': (s) => (s.textTool = 'json'),
   'tools-xml': (s) => (s.textTool = 'xml'),
   'tools-sql': (s) => (s.textTool = 'sql'),
-  'tools-crypt': (s) => (s.showCryptDialog = true)
+  'tools-crypt': (s) => (s.showCryptDialog = true),
+  shortcuts: (s) => (s.showShortcutsDialog = true)
 }
 
 export const useDiffStore = defineStore('diff', {
@@ -121,6 +122,8 @@ export const useDiffStore = defineStore('diff', {
     showCryptDialog: false,
     // Settings dialog (data location) visibility.
     showSettingsDialog: false,
+    // Help → Keyboard Shortcuts dialog visibility.
+    showShortcutsDialog: false,
     // Mermaid diagram viewer: { name, code } while open, null when closed.
     mermaidView: null,
     // content string last dismissed per side, so the format-hint banner
diff --git a/src/renderer/src/utils/searchRegex.js b/src/renderer/src/utils/searchRegex.js
new file mode 100644
index 0000000..0a26736
--- /dev/null
+++ b/src/renderer/src/utils/searchRegex.js
@@ -0,0 +1,33 @@
+// Guardrails for user-supplied regular-expression search. A diff search runs the
+// pattern synchronously against the full document on every keystroke, so a
+// pathological pattern (catastrophic backtracking) would freeze the renderer.
+// These checks keep regex search useful while refusing the shapes that are known
+// to blow up. Pure and unit-tested; the DiffViewer search calls it before ever
+// handing a pattern to Monaco.
+
+// Patterns longer than this are refused outright — long user regexes are rare in
+// a search box and are the easiest lever for an accidental (or hostile) ReDoS.
+export const MAX_REGEX_LENGTH = 200
+
+// A quantifier applied to a group whose body already ends in a quantifier —
+// e.g. (a+)+, (a*)*, (\d+){2,} — is the classic catastrophic-backtracking shape.
+// Detecting it exactly needs a parser; this signature catches the common forms
+// (inner quantifier, group close, outer quantifier) without rejecting ordinary
+// quantified groups like (abc)+.
+const NESTED_QUANTIFIER = /[*+][)\]]\s*[*+{]/
+
+// Returns { ok: true } for a pattern that is safe to compile and run, or
+// { ok: false, error } describing why it was refused.
+export function checkRegex(pattern) {
+  if (typeof pattern !== 'string' || pattern === '') return { ok: false, error: 'empty' }
+  if (pattern.length > MAX_REGEX_LENGTH) return { ok: false, error: 'too-long' }
+  if (NESTED_QUANTIFIER.test(pattern)) return { ok: false, error: 'nested-quantifier' }
+  try {
+    // Compiling validates the syntax; the result is discarded — Monaco does its
+    // own compilation for the actual search.
+    new RegExp(pattern)
+  } catch {
+    return { ok: false, error: 'invalid' }
+  }
+  return { ok: true }
+}
diff --git a/src/renderer/src/utils/shortcuts.js b/src/renderer/src/utils/shortcuts.js
new file mode 100644
index 0000000..c436a9e
--- /dev/null
+++ b/src/renderer/src/utils/shortcuts.js
@@ -0,0 +1,59 @@
+import { MOD } from '../keys'
+
+// The single source of truth for every keyboard shortcut the app advertises.
+// Consumed by the Help → Keyboard Shortcuts dialog (full list, grouped) and the
+// floating ShortcutBar (a short subset). The real bindings live in the hidden
+// application menu (src/main/menu.js); this is only the labelling, so the labels
+// track the host OS through MOD (Cmd on macOS, Ctrl elsewhere).
+export const SHORTCUT_GROUPS = [
+  {
+    group: 'File',
+    items: [
+      { keys: `${MOD}+1`, label: 'Open left file' },
+      { keys: `${MOD}+2`, label: 'Open right file' },
+      { keys: `${MOD}+S`, label: 'Save diff' },
+      { keys: `${MOD}+E`, label: 'Share diff' },
+      { keys: `${MOD}+I`, label: 'Import shared diff' },
+      { keys: `${MOD}+,`, label: 'Settings' }
+    ]
+  },
+  {
+    group: 'Edit',
+    items: [
+      { keys: `${MOD}+Shift+S`, label: 'Swap sides' },
+      { keys: `${MOD}+K`, label: 'Clear' },
+      { keys: `${MOD}+T`, label: 'Paste text mode' }
+    ]
+  },
+  {
+    group: 'View',
+    items: [
+      { keys: `${MOD}+\\`, label: 'Toggle split view' },
+      { keys: `${MOD}+D`, label: 'Toggle light/dark theme' },
+      { keys: `${MOD}++`, label: 'Zoom in' },
+      { keys: `${MOD}+-`, label: 'Zoom out' },
+      { keys: `${MOD}+0`, label: 'Reset zoom' }
+    ]
+  },
+  {
+    group: 'Tools',
+    items: [
+      { keys: `${MOD}+Shift+B`, label: 'Base64 encode / decode' },
+      { keys: `${MOD}+Shift+J`, label: 'JSON format / validate' },
+      { keys: `${MOD}+Shift+M`, label: 'XML format / validate' },
+      { keys: `${MOD}+Shift+Q`, label: 'SQL format / validate' },
+      { keys: `${MOD}+Shift+X`, label: 'Encrypt / decrypt text' }
+    ]
+  }
+]
+
+// The compact set shown in the floating hint bar over the diff area.
+export const SHORTCUT_BAR = [
+  [`${MOD}+1`, 'open left'],
+  [`${MOD}+2`, 'open right'],
+  [`${MOD}+S`, 'save diff'],
+  [`${MOD}+Shift+S`, 'swap'],
+  [`${MOD}+T`, 'paste text'],
+  [`${MOD}+\\`, 'split view'],
+  [`${MOD}+K`, 'clear']
+]
diff --git a/tests/renderer/utils/searchRegex.test.js b/tests/renderer/utils/searchRegex.test.js
new file mode 100644
index 0000000..610e63f
--- /dev/null
+++ b/tests/renderer/utils/searchRegex.test.js
@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+import { checkRegex, MAX_REGEX_LENGTH } from '../../../src/renderer/src/utils/searchRegex'
+
+describe('checkRegex', () => {
+  it('accepts ordinary patterns, including harmlessly quantified groups', () => {
+    expect(checkRegex('foo').ok).toBe(true)
+    expect(checkRegex('\\d{3}-\\d{4}').ok).toBe(true)
+    expect(checkRegex('(abc)+').ok).toBe(true)
+    expect(checkRegex('[a-z]+').ok).toBe(true)
+  })
+
+  it('rejects an empty pattern', () => {
+    expect(checkRegex('')).toEqual({ ok: false, error: 'empty' })
+    expect(checkRegex(null).ok).toBe(false)
+  })
+
+  it('rejects an over-long pattern', () => {
+    const res = checkRegex('a'.repeat(MAX_REGEX_LENGTH + 1))
+    expect(res).toEqual({ ok: false, error: 'too-long' })
+  })
+
+  it('rejects catastrophic nested quantifiers', () => {
+    expect(checkRegex('(a+)+').error).toBe('nested-quantifier')
+    expect(checkRegex('(a*)*').error).toBe('nested-quantifier')
+    expect(checkRegex('(\\d+){2,}').error).toBe('nested-quantifier')
+  })
+
+  it('rejects syntactically invalid patterns', () => {
+    expect(checkRegex('(unclosed').error).toBe('invalid')
+    expect(checkRegex('[z-a]').error).toBe('invalid')
+  })
+})
diff --git a/tests/renderer/utils/shortcuts.test.js b/tests/renderer/utils/shortcuts.test.js
new file mode 100644
index 0000000..84f259a
--- /dev/null
+++ b/tests/renderer/utils/shortcuts.test.js
@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+import { SHORTCUT_GROUPS, SHORTCUT_BAR } from '../../../src/renderer/src/utils/shortcuts'
+
+describe('shortcuts', () => {
+  it('groups every advertised shortcut with a key label and description', () => {
+    expect(SHORTCUT_GROUPS.length).toBeGreaterThan(0)
+    for (const group of SHORTCUT_GROUPS) {
+      expect(group.group).toBeTruthy()
+      expect(group.items.length).toBeGreaterThan(0)
+      for (const item of group.items) {
+        expect(item.keys).toBeTruthy()
+        expect(item.label).toBeTruthy()
+      }
+    }
+  })
+
+  it('labels resolve the platform modifier (Cmd on mac, Ctrl elsewhere)', () => {
+    const mod = navigator.platform.toUpperCase().includes('MAC') ? 'Cmd' : 'Ctrl'
+    const save = SHORTCUT_GROUPS.flatMap((g) => g.items).find((i) => i.label === 'Save diff')
+    expect(save.keys).toBe(`${mod}+S`)
+  })
+
+  it('the compact bar list is a set of [keys, label] pairs', () => {
+    expect(SHORTCUT_BAR.length).toBeGreaterThan(0)
+    for (const pair of SHORTCUT_BAR) {
+      expect(pair).toHaveLength(2)
+      expect(pair[0]).toBeTruthy()
+      expect(pair[1]).toBeTruthy()
+    }
+  })
+})

From cb56a9d18d640237694f9b9d8fd5cd5a14f4a4cd Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 22 Jul 2026 06:14:31 +0000
Subject: [PATCH 02/10] Add plaintext settings store; drop category from the
 share flow

- New settingsStore persisted to settings.json (unencrypted): section order,
  shelf order, shortcut-bar visibility, and user-raisable comparison-file and
  snippet size limits with safe defaults and hard ceilings
- Settings dialog gains an Interface section for the shortcut bar and the two
  size limits; the shortcut bar now reads its visibility from settings
- Enforce the comparison-file limit in the main process (read fresh from
  settings.json) and the snippet-size limit at save time
- Save dialog no longer offers a category when saving as part of a share:
  categories are a local organizing tool and never travel to a recipient

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V6QHAnibiPenmyN7q3Rh4m
---
 src/main/appData.js                           |  12 ++
 src/main/files.js                             |  15 +-
 .../src/components/SaveDiffDialog.vue         |  38 +++--
 .../src/components/SettingsDialog.vue         |  43 ++++++
 src/renderer/src/components/ShortcutBar.vue   |  13 +-
 .../src/components/styles/SettingsDialog.css  |  23 +++
 .../src/composables/useSnippetDraft.js        |  11 ++
 src/renderer/src/stores/settingsStore.js      | 146 ++++++++++++++++++
 tests/renderer/stores/settingsStore.test.js   |  82 ++++++++++
 9 files changed, 357 insertions(+), 26 deletions(-)
 create mode 100644 src/renderer/src/stores/settingsStore.js
 create mode 100644 tests/renderer/stores/settingsStore.test.js

diff --git a/src/main/appData.js b/src/main/appData.js
index f27bc24..c685027 100644
--- a/src/main/appData.js
+++ b/src/main/appData.js
@@ -80,6 +80,18 @@ function readStore(name) {
   }
 }
 
+// The renderer's settings store persists preferences as plaintext settings.json
+// through the same key/value store. The main process reads it directly (fresh
+// each call, so a changed setting takes effect without a restart) for the few
+// limits it has to enforce itself — e.g. the large-file warning threshold.
+export function readSettings() {
+  try {
+    return JSON.parse(readStore('settings') ?? '{}') || {}
+  } catch {
+    return {}
+  }
+}
+
 function writeStore(name, contents) {
   writeFileAtomic(join(getDataDir(), `${name}.json`), String(contents))
 }
diff --git a/src/main/files.js b/src/main/files.js
index f389e93..1bcfda4 100644
--- a/src/main/files.js
+++ b/src/main/files.js
@@ -3,9 +3,18 @@ import { readFile, stat } from 'fs/promises'
 import { basename, resolve, sep } from 'path'
 import chardet from 'chardet'
 import iconv from 'iconv-lite'
+import { readSettings } from './appData'
 
-// Warn before loading files bigger than this (Monaco slows down well past it).
-const LARGE_FILE_BYTES = 10 * 1024 * 1024
+// Warn before loading files bigger than the user's configured comparison limit
+// (Monaco slows down well past it). The default is a safe 10 MB; the user can
+// raise it in Settings, accepting the performance hit. Read fresh each time so
+// the choice applies without a restart, and floored so a bad value can't
+// disable the guard entirely.
+const DEFAULT_LARGE_FILE_MB = 10
+function largeFileBytes() {
+  const mb = Number(readSettings().maxComparisonFileMb)
+  return (Number.isFinite(mb) && mb >= 1 ? mb : DEFAULT_LARGE_FILE_MB) * 1024 * 1024
+}
 
 // Provenance allowlist. `file:read` is only ever meant to serve a path the
 // user actually chose — via the open dialog, or by physically dragging a file
@@ -47,7 +56,7 @@ async function readFileForRenderer(win, filePath, opts = {}) {
   const name = basename(filePath)
 
   const { size } = await stat(filePath)
-  if (size > LARGE_FILE_BYTES) {
+  if (size > largeFileBytes()) {
     // quiet mode (focus refresh) must never pop a dialog — skip the reload.
     if (opts.quiet) return null
     const { response } = await dialog.showMessageBox(win, {
diff --git a/src/renderer/src/components/SaveDiffDialog.vue b/src/renderer/src/components/SaveDiffDialog.vue
index 735053c..999eb51 100644
--- a/src/renderer/src/components/SaveDiffDialog.vue
+++ b/src/renderer/src/components/SaveDiffDialog.vue
@@ -74,22 +74,28 @@ function cancel() {
         Name
         <input ref="nameInput" v-model="name" type="text" spellcheck="false" />
       </label>
-      <label>
-        Category
-        <select v-model="categoryId">
-          <option v-for="c in vault.categories" :key="c.id" :value="c.id">{{ c.name }}</option>
-          <option :value="NEW_CATEGORY">+ New category…</option>
-        </select>
-      </label>
-      <label v-if="categoryId === NEW_CATEGORY">
-        New category name
-        <input
-          v-model="newCategoryName"
-          type="text"
-          spellcheck="false"
-          placeholder="Category name…"
-        />
-      </label>
+      <!-- Categories are a local organizing tool only. In the share flow the
+           diff is still saved locally (into Default), but the recipient never
+           receives a category, so offering one here would be misleading — and
+           forcing a category onto someone else's copy is exactly what we avoid. -->
+      <template v-if="!diff.saveThenShare">
+        <label>
+          Category
+          <select v-model="categoryId">
+            <option v-for="c in vault.categories" :key="c.id" :value="c.id">{{ c.name }}</option>
+            <option :value="NEW_CATEGORY">+ New category…</option>
+          </select>
+        </label>
+        <label v-if="categoryId === NEW_CATEGORY">
+          New category name
+          <input
+            v-model="newCategoryName"
+            type="text"
+            spellcheck="false"
+            placeholder="Category name…"
+          />
+        </label>
+      </template>
       <label>
         Expires after
         <select v-model.number="ttl">
diff --git a/src/renderer/src/components/SettingsDialog.vue b/src/renderer/src/components/SettingsDialog.vue
index 66e39c9..215eaa4 100644
--- a/src/renderer/src/components/SettingsDialog.vue
+++ b/src/renderer/src/components/SettingsDialog.vue
@@ -1,9 +1,15 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import { useDiffStore } from '../stores/diffStore'
+import {
+  useSettingsStore,
+  MAX_COMPARISON_FILE_MB_CAP,
+  MAX_SNIPPET_SIZE_KB_CAP
+} from '../stores/settingsStore'
 import BaseDialog from './BaseDialog.vue'
 
 const diff = useDiffStore()
+const settings = useSettingsStore()
 const dir = ref('')
 const isDefault = ref(true)
 const busy = ref(false)
@@ -65,6 +71,43 @@ function close() {
       </div>
       <p class="hint">Changing the folder restarts Diff Bro.</p>
     </section>
+
+    <section>
+      <h4>Interface</h4>
+      <label class="row toggle">
+        <input
+          type="checkbox"
+          :checked="settings.showShortcutBar"
+          @change="settings.setShowShortcutBar($event.target.checked)"
+        />
+        <span>Show the keyboard-shortcut bar over diffs</span>
+      </label>
+      <label class="row">
+        <span>Max comparison file (MB)</span>
+        <input
+          type="number"
+          min="1"
+          :max="MAX_COMPARISON_FILE_MB_CAP"
+          :value="settings.maxComparisonFileMb"
+          @change="settings.setMaxComparisonFileMb($event.target.value)"
+        />
+      </label>
+      <label class="row">
+        <span>Max snippet size (KB)</span>
+        <input
+          type="number"
+          min="16"
+          :max="MAX_SNIPPET_SIZE_KB_CAP"
+          :value="settings.maxSnippetSizeKb"
+          @change="settings.setMaxSnippetSizeKb($event.target.value)"
+        />
+      </label>
+      <p class="hint">
+        Higher limits let you diff or store bigger content, at the cost of speed — raise them only if
+        you need to.
+      </p>
+    </section>
+
     <template #actions>
       <button class="btn btn-ghost" @click="close">Close</button>
     </template>
diff --git a/src/renderer/src/components/ShortcutBar.vue b/src/renderer/src/components/ShortcutBar.vue
index ccdbe5d..e3dd6bc 100644
--- a/src/renderer/src/components/ShortcutBar.vue
+++ b/src/renderer/src/components/ShortcutBar.vue
@@ -1,23 +1,22 @@
 <script setup>
-import { ref } from 'vue'
+import { useSettingsStore } from '../stores/settingsStore'
 import { SHORTCUT_BAR } from '../utils/shortcuts'
 
 // Translucent hint pill floating over the bottom of the diff area — it never
 // takes layout space and never covers the top of the content, where the diff
-// actually starts. Dismissal is remembered per install.
-const DISMISS_KEY = 'diffbro.shortcutBarDismissed'
-const dismissed = ref(localStorage.getItem(DISMISS_KEY) === '1')
+// actually starts. Visibility is a persisted setting (Settings → Interface),
+// so the hidden bar can be brought back without editing storage by hand.
+const settings = useSettingsStore()
 
 const shortcuts = SHORTCUT_BAR
 
 function dismiss() {
-  dismissed.value = true
-  localStorage.setItem(DISMISS_KEY, '1')
+  settings.setShowShortcutBar(false)
 }
 </script>
 
 <template>
-  <div v-if="!dismissed" class="shortcut-bar">
+  <div v-if="settings.showShortcutBar" class="shortcut-bar">
     <span v-for="[keys, label] in shortcuts" :key="keys" class="hint">
       <kbd>{{ keys }}</kbd> {{ label }}
     </span>
diff --git a/src/renderer/src/components/styles/SettingsDialog.css b/src/renderer/src/components/styles/SettingsDialog.css
index 9a73e55..e3a745e 100644
--- a/src/renderer/src/components/styles/SettingsDialog.css
+++ b/src/renderer/src/components/styles/SettingsDialog.css
@@ -39,6 +39,29 @@ h4 {
   font-size: var(--font-sm);
   color: var(--text-hint);
 }
+/* Interface rows: label on the left, control on the right — overrides the
+   dialog's default column-stacked label layout. */
+.row {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  margin-bottom: var(--space-2);
+}
+.row.toggle {
+  justify-content: flex-start;
+  cursor: pointer;
+}
+.row span {
+  color: var(--text);
+}
+.row input[type='number'] {
+  width: 88px;
+  text-align: right;
+}
+section + section {
+  margin-top: var(--space-4);
+}
 .footer {
   display: flex;
   justify-content: flex-end;
diff --git a/src/renderer/src/composables/useSnippetDraft.js b/src/renderer/src/composables/useSnippetDraft.js
index 85029db..eba40f5 100644
--- a/src/renderer/src/composables/useSnippetDraft.js
+++ b/src/renderer/src/composables/useSnippetDraft.js
@@ -1,6 +1,7 @@
 import { computed, ref } from 'vue'
 import { useSnippetStore } from '../stores/snippetStore'
 import { useDiffStore } from '../stores/diffStore'
+import { useSettingsStore } from '../stores/settingsStore'
 import { detectSnippetLanguage } from '../utils/detectLanguage'
 import { formatJson, formatXml } from '../utils/textFormats'
 import { formatSql } from '../utils/sqlFormat'
@@ -35,6 +36,7 @@ function initialFields(editing, existing) {
 export function useSnippetDraft() {
   const store = useSnippetStore()
   const diff = useDiffStore()
+  const settings = useSettingsStore()
 
   const editing = store.editingSnippet
   const isNew = editing.id == null
@@ -66,6 +68,15 @@ export function useSnippetDraft() {
     // Guard against a fast double-click: the store call is async (IPC round
     // trip), so a second click before it resolves would create a duplicate.
     if (!name.value.trim() || saving.value) return
+    // Keep the app stable: refuse a snippet larger than the configured limit
+    // (Settings → Interface). Measured in bytes so multibyte content counts.
+    const bytes = new TextEncoder().encode(content.value).length
+    if (bytes > settings.maxSnippetSizeBytes) {
+      diff.showNotice(
+        `That snippet is ${(bytes / 1024).toFixed(0)} KB — over the ${settings.maxSnippetSizeKb} KB limit. Raise it in Settings if you really need to.`
+      )
+      return
+    }
     saving.value = true
     const fields = {
       name: name.value,
diff --git a/src/renderer/src/stores/settingsStore.js b/src/renderer/src/stores/settingsStore.js
new file mode 100644
index 0000000..854df96
--- /dev/null
+++ b/src/renderer/src/stores/settingsStore.js
@@ -0,0 +1,146 @@
+import { defineStore } from 'pinia'
+import { loadPersisted, savePersisted } from '../persist'
+
+// User preferences that are organizational, not secret — section order, shelf
+// order, UI toggles, and the size guards. Persisted as PLAINTEXT JSON in the
+// data directory (settings.json) on purpose: it holds nothing sensitive, and
+// keeping it human-readable leaves the door open to editing it by hand (or, one
+// day, exposing more of it in the UI). Everything encrypted stays in the vault
+// and snippet stores.
+
+// The three reorderable sidebar sections, in their default top-to-bottom order.
+export const SECTIONS = ['saved', 'external', 'snippets']
+
+// Safe defaults that keep the app responsive. Both are user-raisable (the point
+// of exposing them), but each has a hard ceiling so a typo can't wedge the app
+// trying to diff or render something enormous.
+export const DEFAULT_MAX_COMPARISON_FILE_MB = 10
+export const DEFAULT_MAX_SNIPPET_SIZE_KB = 512
+export const MAX_COMPARISON_FILE_MB_CAP = 500
+export const MAX_SNIPPET_SIZE_KB_CAP = 8192
+
+export const DEFAULT_SETTINGS = {
+  sectionOrder: [...SECTIONS],
+  // { [sectionId]: [shelfId, …] } — a section absent here uses its natural order.
+  shelfOrder: {},
+  showShortcutBar: true,
+  maxComparisonFileMb: DEFAULT_MAX_COMPARISON_FILE_MB,
+  maxSnippetSizeKb: DEFAULT_MAX_SNIPPET_SIZE_KB
+}
+
+const clampNumber = (value, fallback, min, max) => {
+  const n = Number(value)
+  if (!Number.isFinite(n)) return fallback
+  return Math.min(Math.max(n, min), max)
+}
+
+// A section order is only valid if it is exactly the known sections, once each
+// — otherwise a stale or corrupt file could hide a section entirely.
+function sanitizeSectionOrder(order) {
+  if (!Array.isArray(order)) return [...SECTIONS]
+  const kept = order.filter((id, i) => SECTIONS.includes(id) && order.indexOf(id) === i)
+  for (const id of SECTIONS) if (!kept.includes(id)) kept.push(id)
+  return kept
+}
+
+function readState() {
+  let parsed
+  try {
+    parsed = JSON.parse(loadPersisted('settings') ?? '{}') || {}
+  } catch {
+    parsed = {}
+  }
+  // One-time migration of the shortcut bar's old localStorage dismissal.
+  let showShortcutBar = parsed.showShortcutBar
+  if (typeof showShortcutBar !== 'boolean') {
+    showShortcutBar = localStorage.getItem('diffbro.shortcutBarDismissed') !== '1'
+  }
+  return {
+    sectionOrder: sanitizeSectionOrder(parsed.sectionOrder),
+    shelfOrder:
+      parsed.shelfOrder && typeof parsed.shelfOrder === 'object' ? { ...parsed.shelfOrder } : {},
+    showShortcutBar,
+    maxComparisonFileMb: clampNumber(
+      parsed.maxComparisonFileMb,
+      DEFAULT_MAX_COMPARISON_FILE_MB,
+      1,
+      MAX_COMPARISON_FILE_MB_CAP
+    ),
+    maxSnippetSizeKb: clampNumber(
+      parsed.maxSnippetSizeKb,
+      DEFAULT_MAX_SNIPPET_SIZE_KB,
+      16,
+      MAX_SNIPPET_SIZE_KB_CAP
+    )
+  }
+}
+
+export const useSettingsStore = defineStore('settings', {
+  state: () => readState(),
+  getters: {
+    // Sections in the user's chosen order (always all three, sanitized).
+    orderedSections: (s) => s.sectionOrder,
+    maxSnippetSizeBytes: (s) => s.maxSnippetSizeKb * 1024
+  },
+  actions: {
+    persist() {
+      savePersisted(
+        'settings',
+        JSON.stringify({
+          sectionOrder: this.sectionOrder,
+          shelfOrder: this.shelfOrder,
+          showShortcutBar: this.showShortcutBar,
+          maxComparisonFileMb: this.maxComparisonFileMb,
+          maxSnippetSizeKb: this.maxSnippetSizeKb
+        })
+      )
+    },
+    // Move a section one step up or down (delta -1 / +1). No-op at the ends.
+    moveSection(id, delta) {
+      const order = [...this.sectionOrder]
+      const from = order.indexOf(id)
+      const to = from + delta
+      if (from === -1 || to < 0 || to >= order.length) return
+      order.splice(to, 0, order.splice(from, 1)[0])
+      this.sectionOrder = order
+      this.persist()
+    },
+    // Persist the shelf order for a section (item drag-reorder). ids is the full
+    // ordered list of that section's shelf ids.
+    setShelfOrder(sectionId, ids) {
+      this.shelfOrder = { ...this.shelfOrder, [sectionId]: [...ids] }
+      this.persist()
+    },
+    // Return the stored shelf order for a section, reconciled against the shelves
+    // that actually exist now: known ids first in stored order, then any new
+    // shelf appended so nothing is ever dropped.
+    shelfOrderFor(sectionId, presentIds) {
+      const stored = this.shelfOrder[sectionId] ?? []
+      const kept = stored.filter((id) => presentIds.includes(id))
+      for (const id of presentIds) if (!kept.includes(id)) kept.push(id)
+      return kept
+    },
+    setShowShortcutBar(value) {
+      this.showShortcutBar = !!value
+      this.persist()
+    },
+    setMaxComparisonFileMb(value) {
+      this.maxComparisonFileMb = clampNumber(
+        value,
+        DEFAULT_MAX_COMPARISON_FILE_MB,
+        1,
+        MAX_COMPARISON_FILE_MB_CAP
+      )
+      this.persist()
+    },
+    setMaxSnippetSizeKb(value) {
+      this.maxSnippetSizeKb = clampNumber(
+        value,
+        DEFAULT_MAX_SNIPPET_SIZE_KB,
+        16,
+        MAX_SNIPPET_SIZE_KB_CAP
+      )
+      this.persist()
+    }
+  }
+})
diff --git a/tests/renderer/stores/settingsStore.test.js b/tests/renderer/stores/settingsStore.test.js
new file mode 100644
index 0000000..a562381
--- /dev/null
+++ b/tests/renderer/stores/settingsStore.test.js
@@ -0,0 +1,82 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+import {
+  useSettingsStore,
+  SECTIONS,
+  DEFAULT_MAX_COMPARISON_FILE_MB,
+  MAX_COMPARISON_FILE_MB_CAP,
+  MAX_SNIPPET_SIZE_KB_CAP
+} from '../../../src/renderer/src/stores/settingsStore'
+
+beforeEach(() => {
+  setActivePinia(createPinia())
+  localStorage.clear()
+})
+
+describe('settingsStore', () => {
+  it('starts from safe defaults', () => {
+    const s = useSettingsStore()
+    expect(s.sectionOrder).toEqual(SECTIONS)
+    expect(s.showShortcutBar).toBe(true)
+    expect(s.maxComparisonFileMb).toBe(DEFAULT_MAX_COMPARISON_FILE_MB)
+    expect(s.maxSnippetSizeKb).toBeGreaterThan(0)
+  })
+
+  it('moves a section up and down, clamping at the ends', () => {
+    const s = useSettingsStore()
+    s.moveSection('snippets', -1)
+    expect(s.sectionOrder).toEqual(['saved', 'snippets', 'external'])
+    s.moveSection('saved', -1) // already first — no-op
+    expect(s.sectionOrder).toEqual(['saved', 'snippets', 'external'])
+    s.moveSection('saved', 1)
+    expect(s.sectionOrder).toEqual(['snippets', 'saved', 'external'])
+  })
+
+  it('persists section order across store re-creation', () => {
+    useSettingsStore().moveSection('snippets', -2)
+    setActivePinia(createPinia())
+    expect(useSettingsStore().sectionOrder).toEqual(['snippets', 'saved', 'external'])
+  })
+
+  it('repairs a corrupt or partial persisted section order', () => {
+    localStorage.setItem(
+      'diffbro.settings',
+      JSON.stringify({ sectionOrder: ['snippets', 'bogus', 'snippets'] })
+    )
+    const s = useSettingsStore()
+    // dedupe + drop unknown + append any missing, so all three always show.
+    expect([...s.sectionOrder].sort()).toEqual([...SECTIONS].sort())
+    expect(s.sectionOrder[0]).toBe('snippets')
+  })
+
+  it('stores and reconciles shelf order against the shelves that exist now', () => {
+    const s = useSettingsStore()
+    s.setShelfOrder('snippets', ['b', 'a'])
+    // A stored id that vanished is dropped; a brand-new shelf is appended.
+    expect(s.shelfOrderFor('snippets', ['a', 'b', 'c'])).toEqual(['b', 'a', 'c'])
+    expect(s.shelfOrderFor('external', ['x'])).toEqual(['x'])
+  })
+
+  it('migrates the legacy shortcut-bar dismissal flag', () => {
+    localStorage.setItem('diffbro.shortcutBarDismissed', '1')
+    expect(useSettingsStore().showShortcutBar).toBe(false)
+  })
+
+  it('clamps the size guards to their safe ranges', () => {
+    const s = useSettingsStore()
+    s.setMaxComparisonFileMb(999999)
+    expect(s.maxComparisonFileMb).toBe(MAX_COMPARISON_FILE_MB_CAP)
+    s.setMaxComparisonFileMb(0)
+    expect(s.maxComparisonFileMb).toBe(1)
+    s.setMaxSnippetSizeKb('not a number')
+    expect(s.maxSnippetSizeKb).toBeGreaterThan(0)
+    s.setMaxSnippetSizeKb(10_000_000)
+    expect(s.maxSnippetSizeKb).toBe(MAX_SNIPPET_SIZE_KB_CAP)
+  })
+
+  it('toggles the shortcut bar and persists it', () => {
+    useSettingsStore().setShowShortcutBar(false)
+    setActivePinia(createPinia())
+    expect(useSettingsStore().showShortcutBar).toBe(false)
+  })
+})

From 62a42b55f5ac60a371a56cf0d3240645e0e4c57c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 22 Jul 2026 06:20:25 +0000
Subject: [PATCH 03/10] Reorderable sidebar sections and drag-reorderable
 saved-diff categories

- Split the sidebar into self-contained SavedDiffs / External / Snippets
  sections behind a shared SectionHeader with up/down move controls; the
  section order persists in settings.json
- Saved-diff categories are now drag-reorderable, persisted per-section in
  settings.shelfOrder and reconciled against the categories that exist
- SavedDiffs.vue becomes a thin ordering container; header band styles move
  into SectionHeader so every section reads and behaves identically

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V6QHAnibiPenmyN7q3Rh4m
---
 .../src/components/ExternalDiffsSection.vue   |  60 ++++++
 src/renderer/src/components/SavedDiffs.vue    | 169 ++---------------
 .../src/components/SavedDiffsSection.vue      | 170 +++++++++++++++++
 src/renderer/src/components/SectionHeader.vue |  52 ++++++
 src/renderer/src/components/SnippetsPanel.vue |  49 +++--
 .../styles/ExternalDiffsSection.css           |  39 ++++
 .../src/components/styles/SavedDiffs.css      | 174 +-----------------
 .../components/styles/SavedDiffsSection.css   | 143 ++++++++++++++
 .../src/components/styles/SectionHeader.css   |  59 ++++++
 .../src/components/styles/SnippetsPanel.css   |  39 +---
 10 files changed, 580 insertions(+), 374 deletions(-)
 create mode 100644 src/renderer/src/components/ExternalDiffsSection.vue
 create mode 100644 src/renderer/src/components/SavedDiffsSection.vue
 create mode 100644 src/renderer/src/components/SectionHeader.vue
 create mode 100644 src/renderer/src/components/styles/ExternalDiffsSection.css
 create mode 100644 src/renderer/src/components/styles/SavedDiffsSection.css
 create mode 100644 src/renderer/src/components/styles/SectionHeader.css

diff --git a/src/renderer/src/components/ExternalDiffsSection.vue b/src/renderer/src/components/ExternalDiffsSection.vue
new file mode 100644
index 0000000..a330fd5
--- /dev/null
+++ b/src/renderer/src/components/ExternalDiffsSection.vue
@@ -0,0 +1,60 @@
+<script setup>
+// The "External diffs" sidebar section: diffs shared by someone else, each
+// signed by its sender and kept separate from your own saved diffs. A Favorites
+// shelf pins starred ones. Section move controls live in SectionHeader.
+import { computed, ref } from 'vue'
+import { useVaultStore } from '../stores/vaultStore'
+import { useDiffStore } from '../stores/diffStore'
+import SavedDiffRow from './SavedDiffRow.vue'
+import SectionHeader from './SectionHeader.vue'
+import { MOD } from '../keys'
+
+defineProps({ first: { type: Boolean, default: false } })
+
+const vault = useVaultStore()
+const diff = useDiffStore()
+
+const open = ref(true)
+const importedFavs = computed(() => vault.importedFavorites)
+const importedOthers = computed(() => vault.importedOthers)
+const hasImported = computed(() => importedFavs.value.length || importedOthers.value.length)
+</script>
+
+<template>
+  <section class="sidebar-section">
+    <SectionHeader
+      section-id="external"
+      title="External diffs"
+      :open="open"
+      :first="first"
+      @toggle="open = !open"
+    />
+    <div v-show="open" class="section-body">
+      <div class="head-actions">
+        <button
+          class="btn btn-sm btn-block"
+          :title="`Import a shared diff (${MOD}+I)`"
+          @click="diff.importShared()"
+        >
+          Import
+        </button>
+      </div>
+      <p v-if="!hasImported" class="empty">
+        Diffs shared by someone else appear here — each is signed by its sender and shown separately
+        from your own saved diffs. Press <kbd>{{ MOD }}+I</kbd> to open a sealed
+        <code>.diffbro</code> file; it expires at the same moment as the sender's copy.
+      </p>
+
+      <ul v-if="importedFavs.length" class="favorites-group">
+        <li class="fav-head">★ Favorites</li>
+        <SavedDiffRow v-for="entry in importedFavs" :key="entry.id" :entry="entry" />
+      </ul>
+
+      <ul v-if="importedOthers.length">
+        <SavedDiffRow v-for="entry in importedOthers" :key="entry.id" :entry="entry" />
+      </ul>
+    </div>
+  </section>
+</template>
+
+<style scoped src="./styles/ExternalDiffsSection.css"></style>
diff --git a/src/renderer/src/components/SavedDiffs.vue b/src/renderer/src/components/SavedDiffs.vue
index 1a84a7c..79c2068 100644
--- a/src/renderer/src/components/SavedDiffs.vue
+++ b/src/renderer/src/components/SavedDiffs.vue
@@ -1,172 +1,35 @@
 <script setup>
-import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue'
+// The sidebar shell. It owns nothing but the order of its three sections —
+// Saved diffs, External diffs, and Snippets — which the user can rearrange
+// (SectionHeader's up/down controls, persisted in settings). Each section is a
+// self-contained component; this file just renders them in the chosen order and
+// keeps the vault countdowns ticking.
+import { onMounted, onBeforeUnmount } from 'vue'
 import { useVaultStore } from '../stores/vaultStore'
-import { useDiffStore } from '../stores/diffStore'
-import SavedDiffRow from './SavedDiffRow.vue'
+import { useSettingsStore } from '../stores/settingsStore'
+import SavedDiffsSection from './SavedDiffsSection.vue'
+import ExternalDiffsSection from './ExternalDiffsSection.vue'
 import SnippetsPanel from './SnippetsPanel.vue'
-import { MOD } from '../keys'
 
 const vault = useVaultStore()
-const diff = useDiffStore()
+const settings = useSettingsStore()
 
 let timer = null
 onMounted(() => {
   vault.tick()
-  // 1 s tick: keeps the countdowns live and purges entries the moment
-  // they expire.
+  // 1 s tick: keeps the countdowns live and purges entries the moment they expire.
   timer = setInterval(() => vault.tick(), 1000)
 })
 onBeforeUnmount(() => clearInterval(timer))
-
-// Shared-in diffs split into a ★ Favorites shelf + the rest.
-const importedFavs = computed(() => vault.importedFavorites)
-const importedOthers = computed(() => vault.importedOthers)
-const hasImported = computed(() => importedFavs.value.length || importedOthers.value.length)
-
-// Top-level sections collapse; categories start expanded (track collapsed only).
-const savedOpen = ref(true)
-const externalOpen = ref(true)
-const collapsed = ref(new Set())
-const addingCategory = ref(false)
-const newCategoryName = ref('')
-
-const isExpanded = (id) => !collapsed.value.has(id)
-function toggle(id) {
-  collapsed.value.has(id) ? collapsed.value.delete(id) : collapsed.value.add(id)
-  collapsed.value = new Set(collapsed.value)
-}
-
-// Auto-expand (un-collapse) a category as soon as a diff is saved into it.
-watch(
-  () => vault.lastTouchedCategory,
-  (id) => {
-    if (id && collapsed.value.has(id)) {
-      const next = new Set(collapsed.value)
-      next.delete(id)
-      collapsed.value = next
-    }
-  }
-)
-
-function startAddCategory() {
-  addingCategory.value = true
-  newCategoryName.value = ''
-}
-function commitAddCategory() {
-  if (!addingCategory.value) return
-  addingCategory.value = false
-  if (newCategoryName.value.trim()) vault.addCategory(newCategoryName.value)
-}
-
-function deleteCategoryTitle(category) {
-  if (category.isDefault) return "The Default category can't be deleted"
-  if (vault.activeInCategory(category.id).length) return 'Delete or let its diffs expire first'
-  return 'Delete category'
-}
 </script>
 
 <template>
   <aside class="saved">
-    <div class="head section-head" @click="savedOpen = !savedOpen">
-      <span class="chev" :class="{ open: savedOpen }">▸</span>
-      <span class="section-title">Saved diffs</span>
-      <span class="lock" title="Encrypted at rest, auto-expiring">🔒</span>
-    </div>
-    <div v-show="savedOpen" class="section-body">
-      <div class="head-actions">
-        <button class="btn btn-sm btn-block" title="New category" @click="startAddCategory">
-          + New category
-        </button>
-      </div>
-
-      <div v-if="addingCategory" class="add-category">
-        <input
-          v-model="newCategoryName"
-          type="text"
-          placeholder="Category name…"
-          spellcheck="false"
-          autofocus
-          @keyup.enter="commitAddCategory"
-          @keyup.escape="addingCategory = false"
-          @blur="commitAddCategory"
-        />
-      </div>
-
-      <p v-if="!vault.active.some((e) => !e.from)" class="empty">
-        Nothing saved. Load two files and press <kbd>{{ MOD }}+S</kbd> to keep a diff around —
-        encrypted, and gone automatically after at most 24&nbsp;hours.
-      </p>
-
-      <ul v-if="vault.favoritesOwn.length" class="favorites-group">
-        <li class="fav-head">★ Favorites</li>
-        <SavedDiffRow v-for="entry in vault.favoritesOwn" :key="entry.id" :entry="entry" />
-      </ul>
-
-      <ul class="categories">
-        <li v-for="category in vault.categories" :key="category.id" class="category">
-          <div class="category-head">
-            <button class="cat-toggle" @click="toggle(category.id)">
-              <span class="chevron" :class="{ open: isExpanded(category.id) }">▸</span>
-              <span class="cat-name">{{ category.name }}</span>
-              <span class="count">{{ vault.activeInCategory(category.id).length }}</span>
-            </button>
-            <button
-              class="icon delete"
-              :disabled="!vault.canDeleteCategory(category.id)"
-              :title="deleteCategoryTitle(category)"
-              @click="vault.requestDelete('category', category.id, category.name)"
-            >
-              ×
-            </button>
-          </div>
-          <ul v-if="isExpanded(category.id)" class="diff-list">
-            <li v-if="!vault.activeInCategory(category.id).length" class="empty small">
-              No diffs yet.
-            </li>
-            <SavedDiffRow
-              v-for="entry in vault.activeInCategory(category.id)"
-              :key="entry.id"
-              :entry="entry"
-            />
-          </ul>
-        </li>
-      </ul>
-    </div>
-
-    <div class="head sub section-head" @click="externalOpen = !externalOpen">
-      <span class="chev" :class="{ open: externalOpen }">▸</span>
-      <span class="section-title">External diffs</span>
-    </div>
-    <div v-show="externalOpen" class="section-body">
-      <div class="head-actions">
-        <button
-          class="btn btn-sm btn-block"
-          :title="`Import a shared diff (${MOD}+I)`"
-          @click="diff.importShared()"
-        >
-          Import
-        </button>
-      </div>
-      <p v-if="!hasImported" class="empty">
-        Diffs shared by someone else appear here — each is signed by its sender and shown separately
-        from your own saved diffs. Press <kbd>{{ MOD }}+I</kbd> to open a sealed
-        <code>.diffbro</code> file; it expires at the same moment as the sender's copy.
-      </p>
-
-      <!-- Favorited shared-in diffs pin to their own shelf, kept inside this
-           section (not merged with your own favorites). Star only pins; expiry
-           is still bound to the sender's copy. -->
-      <ul v-if="importedFavs.length" class="favorites-group">
-        <li class="fav-head">★ Favorites</li>
-        <SavedDiffRow v-for="entry in importedFavs" :key="entry.id" :entry="entry" />
-      </ul>
-
-      <ul v-if="importedOthers.length">
-        <SavedDiffRow v-for="entry in importedOthers" :key="entry.id" :entry="entry" />
-      </ul>
-    </div>
-
-    <SnippetsPanel />
+    <template v-for="(id, i) in settings.orderedSections" :key="id">
+      <SavedDiffsSection v-if="id === 'saved'" :first="i === 0" />
+      <ExternalDiffsSection v-else-if="id === 'external'" :first="i === 0" />
+      <SnippetsPanel v-else-if="id === 'snippets'" :first="i === 0" />
+    </template>
   </aside>
 </template>
 
diff --git a/src/renderer/src/components/SavedDiffsSection.vue b/src/renderer/src/components/SavedDiffsSection.vue
new file mode 100644
index 0000000..30ecde2
--- /dev/null
+++ b/src/renderer/src/components/SavedDiffsSection.vue
@@ -0,0 +1,170 @@
+<script setup>
+// The "Saved diffs" sidebar section: a Favorites shelf plus draggable category
+// shelves, each holding your own encrypted, auto-expiring diffs. Section move
+// controls live in SectionHeader; category order is drag-reorderable and
+// persisted per-section in settings.shelfOrder.
+import { computed, ref, watch } from 'vue'
+import { useVaultStore } from '../stores/vaultStore'
+import { useSettingsStore } from '../stores/settingsStore'
+import SavedDiffRow from './SavedDiffRow.vue'
+import SectionHeader from './SectionHeader.vue'
+import { MOD } from '../keys'
+
+defineProps({ first: { type: Boolean, default: false } })
+
+const vault = useVaultStore()
+const settings = useSettingsStore()
+
+const open = ref(true)
+const collapsed = ref(new Set())
+const addingCategory = ref(false)
+const newCategoryName = ref('')
+
+// Categories shown in the user's saved order (drag-reorder below), reconciled
+// against the categories that currently exist.
+const orderedCategories = computed(() => {
+  const byId = new Map(vault.categories.map((c) => [c.id, c]))
+  return settings
+    .shelfOrderFor(
+      'saved',
+      vault.categories.map((c) => c.id)
+    )
+    .map((id) => byId.get(id))
+    .filter(Boolean)
+})
+
+const isExpanded = (id) => !collapsed.value.has(id)
+function toggle(id) {
+  collapsed.value.has(id) ? collapsed.value.delete(id) : collapsed.value.add(id)
+  collapsed.value = new Set(collapsed.value)
+}
+
+// Auto-expand a category the moment a diff is saved into it.
+watch(
+  () => vault.lastTouchedCategory,
+  (id) => {
+    if (id && collapsed.value.has(id)) {
+      const next = new Set(collapsed.value)
+      next.delete(id)
+      collapsed.value = next
+    }
+  }
+)
+
+function startAddCategory() {
+  addingCategory.value = true
+  newCategoryName.value = ''
+}
+function commitAddCategory() {
+  if (!addingCategory.value) return
+  addingCategory.value = false
+  if (newCategoryName.value.trim()) vault.addCategory(newCategoryName.value)
+}
+
+function deleteCategoryTitle(category) {
+  if (category.isDefault) return "The Default category can't be deleted"
+  if (vault.activeInCategory(category.id).length) return 'Delete or let its diffs expire first'
+  return 'Delete category'
+}
+
+// --- category drag-reorder ---
+const dragId = ref(null)
+function onDrop(targetId) {
+  const from = dragId.value
+  dragId.value = null
+  if (!from || from === targetId) return
+  const ids = orderedCategories.value.map((c) => c.id)
+  ids.splice(ids.indexOf(targetId), 0, ids.splice(ids.indexOf(from), 1)[0])
+  settings.setShelfOrder('saved', ids)
+}
+</script>
+
+<template>
+  <section class="sidebar-section">
+    <SectionHeader
+      section-id="saved"
+      title="Saved diffs"
+      :open="open"
+      :first="first"
+      @toggle="open = !open"
+    >
+      <template #actions>
+        <span class="lock" title="Encrypted at rest, auto-expiring">🔒</span>
+      </template>
+    </SectionHeader>
+
+    <div v-show="open" class="section-body">
+      <div class="head-actions">
+        <button class="btn btn-sm btn-block" title="New category" @click="startAddCategory">
+          + New category
+        </button>
+      </div>
+
+      <div v-if="addingCategory" class="add-category">
+        <input
+          v-model="newCategoryName"
+          type="text"
+          placeholder="Category name…"
+          spellcheck="false"
+          autofocus
+          @keyup.enter="commitAddCategory"
+          @keyup.escape="addingCategory = false"
+          @blur="commitAddCategory"
+        />
+      </div>
+
+      <p v-if="!vault.active.some((e) => !e.from)" class="empty">
+        Nothing saved. Load two files and press <kbd>{{ MOD }}+S</kbd> to keep a diff around —
+        encrypted, and gone automatically after at most 24&nbsp;hours.
+      </p>
+
+      <ul v-if="vault.favoritesOwn.length" class="favorites-group">
+        <li class="fav-head">★ Favorites</li>
+        <SavedDiffRow v-for="entry in vault.favoritesOwn" :key="entry.id" :entry="entry" />
+      </ul>
+
+      <ul class="categories">
+        <li
+          v-for="category in orderedCategories"
+          :key="category.id"
+          class="category"
+          :class="{ dragging: dragId === category.id }"
+          draggable="true"
+          @dragstart="dragId = category.id"
+          @dragend="dragId = null"
+          @dragover.prevent
+          @drop.prevent="onDrop(category.id)"
+        >
+          <div class="category-head">
+            <span class="grip" title="Drag to reorder">⠿</span>
+            <button class="cat-toggle" @click="toggle(category.id)">
+              <span class="chevron" :class="{ open: isExpanded(category.id) }">▸</span>
+              <span class="cat-name">{{ category.name }}</span>
+              <span class="count">{{ vault.activeInCategory(category.id).length }}</span>
+            </button>
+            <button
+              class="icon delete"
+              :disabled="!vault.canDeleteCategory(category.id)"
+              :title="deleteCategoryTitle(category)"
+              @click="vault.requestDelete('category', category.id, category.name)"
+            >
+              ×
+            </button>
+          </div>
+          <ul v-if="isExpanded(category.id)" class="diff-list">
+            <li v-if="!vault.activeInCategory(category.id).length" class="empty small">
+              No diffs yet.
+            </li>
+            <SavedDiffRow
+              v-for="entry in vault.activeInCategory(category.id)"
+              :key="entry.id"
+              :entry="entry"
+            />
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>
+
+<style scoped src="./styles/SavedDiffsSection.css"></style>
diff --git a/src/renderer/src/components/SectionHeader.vue b/src/renderer/src/components/SectionHeader.vue
new file mode 100644
index 0000000..3447128
--- /dev/null
+++ b/src/renderer/src/components/SectionHeader.vue
@@ -0,0 +1,52 @@
+<script setup>
+// The band at the top of each reorderable sidebar section: a collapse chevron,
+// the title, an optional actions slot, and up/down controls that move the whole
+// section (persisted in settings). Shared so Saved / External / Snippets read
+// and behave identically.
+import { computed } from 'vue'
+import { useSettingsStore } from '../stores/settingsStore'
+
+const props = defineProps({
+  sectionId: { type: String, required: true },
+  title: { type: String, required: true },
+  open: { type: Boolean, default: true },
+  // The topmost section sits flush and aligns its label with the file-slot row.
+  first: { type: Boolean, default: false }
+})
+defineEmits(['toggle'])
+
+const settings = useSettingsStore()
+const index = computed(() => settings.orderedSections.indexOf(props.sectionId))
+const canUp = computed(() => index.value > 0)
+const canDown = computed(
+  () => index.value > -1 && index.value < settings.orderedSections.length - 1
+)
+</script>
+
+<template>
+  <div class="head section-head" :class="{ first }" @click="$emit('toggle')">
+    <span class="chev" :class="{ open }">▸</span>
+    <span class="section-title">{{ title }}</span>
+    <slot name="actions" />
+    <span class="reorder">
+      <button
+        class="reorder-btn"
+        :disabled="!canUp"
+        title="Move section up"
+        @click.stop="settings.moveSection(sectionId, -1)"
+      >
+        ▲
+      </button>
+      <button
+        class="reorder-btn"
+        :disabled="!canDown"
+        title="Move section down"
+        @click.stop="settings.moveSection(sectionId, 1)"
+      >
+        ▼
+      </button>
+    </span>
+  </div>
+</template>
+
+<style scoped src="./styles/SectionHeader.css"></style>
diff --git a/src/renderer/src/components/SnippetsPanel.vue b/src/renderer/src/components/SnippetsPanel.vue
index 5775f2c..a66251d 100644
--- a/src/renderer/src/components/SnippetsPanel.vue
+++ b/src/renderer/src/components/SnippetsPanel.vue
@@ -9,6 +9,9 @@ import { useSnippetPreview } from '../composables/useSnippetPreview'
 import SnippetRow from './SnippetRow.vue'
 import SnippetTagBar from './SnippetTagBar.vue'
 import SnippetPreviewCard from './SnippetPreviewCard.vue'
+import SectionHeader from './SectionHeader.vue'
+
+defineProps({ first: { type: Boolean, default: false } })
 
 const store = useSnippetStore()
 
@@ -33,25 +36,31 @@ const { preview, onRowEnter, onRowLeave } = useSnippetPreview()
 </script>
 
 <template>
-  <div class="snippets-section">
-    <div class="head sub section-head" @click="sectionOpen = !sectionOpen">
-      <span class="chev" :class="{ open: sectionOpen }">▸</span>
-      <span class="section-title">Snippets</span>
-      <button
-        class="btn btn-icon"
-        title="Export all snippets to a passphrase-protected file"
-        @click.stop="store.pendingExport = { all: true }"
-      >
-        ↑
-      </button>
-      <button
-        class="btn btn-icon"
-        title="Import snippets from a file"
-        @click.stop="store.pendingImport = true"
-      >
-        ↓
-      </button>
-    </div>
+  <section class="snippets-section sidebar-section">
+    <SectionHeader
+      section-id="snippets"
+      title="Snippets"
+      :open="sectionOpen"
+      :first="first"
+      @toggle="sectionOpen = !sectionOpen"
+    >
+      <template #actions>
+        <button
+          class="btn btn-icon"
+          title="Export all snippets to a passphrase-protected file"
+          @click.stop="store.pendingExport = { all: true }"
+        >
+          ↑
+        </button>
+        <button
+          class="btn btn-icon"
+          title="Import snippets from a file"
+          @click.stop="store.pendingImport = true"
+        >
+          ↓
+        </button>
+      </template>
+    </SectionHeader>
 
     <div v-show="sectionOpen" class="section-body">
       <div class="head-actions">
@@ -128,7 +137,7 @@ const { preview, onRowEnter, onRowLeave } = useSnippetPreview()
         </ul>
       </div>
     </div>
-  </div>
+  </section>
 
   <SnippetPreviewCard v-if="preview" :preview="preview" />
 </template>
diff --git a/src/renderer/src/components/styles/ExternalDiffsSection.css b/src/renderer/src/components/styles/ExternalDiffsSection.css
new file mode 100644
index 0000000..5409fb8
--- /dev/null
+++ b/src/renderer/src/components/styles/ExternalDiffsSection.css
@@ -0,0 +1,39 @@
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.head-actions {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 8px 10px;
+}
+.empty {
+  padding: 4px 10px;
+  font-size: var(--font-md);
+  color: var(--text-dim);
+  line-height: 1.5;
+}
+.empty kbd {
+  font-size: var(--font-xs);
+  padding: 0 3px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+.empty code {
+  font-size: var(--font-sm);
+}
+.favorites-group {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.fav-head {
+  padding: 6px 10px 3px;
+  font-size: var(--font-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--favorite);
+}
diff --git a/src/renderer/src/components/styles/SavedDiffs.css b/src/renderer/src/components/styles/SavedDiffs.css
index a726cf5..0d587d5 100644
--- a/src/renderer/src/components/styles/SavedDiffs.css
+++ b/src/renderer/src/components/styles/SavedDiffs.css
@@ -7,174 +7,10 @@
   flex-direction: column;
   overflow-y: auto;
 }
-/* Section header band: a recessed strip (--bg is a step off the panel in both
-   themes) framed by hairlines, so Saved / External / Snippets read as distinct
-   blocks rather than one continuous list. */
-.head {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 9px 10px;
-  font-size: var(--font-sm);
-  font-weight: 700;
-  color: var(--text-dim);
-  text-transform: uppercase;
-  letter-spacing: 0.6px;
-  background: var(--bg);
-  border-top: 1px solid var(--border);
-  border-bottom: 1px solid var(--border);
-}
-/* The first section sits flush at the top; later ones get a gap of panel
-   background above the band to open up the seam between sections. Its label is
-   raised to line up with the Left/Right file-slot labels across the divider —
-   those sit at 10px (row padding) + 6px (slot padding) from the top. */
-.head:first-child {
-  border-top: none;
-  padding-top: 16px;
-}
-.head.sub {
+/* A gap of panel background between consecutive sections, opening up the seam
+   without depending on which section is first (order is user-controlled). The
+   selector reaches each section component's root element (Vue stamps the parent
+   scope id onto child roots). */
+.sidebar-section + .sidebar-section {
   margin-top: 12px;
 }
-.section-head {
-  cursor: pointer;
-  user-select: none;
-  gap: 8px;
-}
-.section-title {
-  flex: 1;
-}
-.chev {
-  display: inline-block;
-  font-size: var(--font-2xs);
-  color: var(--text-dim);
-  transition: transform 0.12s;
-}
-.chev.open {
-  transform: rotate(90deg);
-}
-.head-actions {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 0 10px 8px;
-}
-.add-category {
-  padding: 0 10px 8px;
-}
-.add-category input {
-  width: 100%;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--text);
-  padding: 5px 8px;
-  font-size: var(--font-md);
-}
-.add-category input:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-.empty {
-  padding: 4px 10px;
-  font-size: var(--font-md);
-  color: var(--text-dim);
-  line-height: 1.5;
-}
-.empty.small {
-  padding: 4px 10px 4px 30px;
-  font-size: var(--font-sm);
-}
-.empty kbd {
-  font-size: var(--font-xs);
-  padding: 0 3px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-}
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.category-head {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding-right: 6px;
-  border-top: 1px solid var(--border);
-}
-.cat-toggle {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  text-align: left;
-  background: none;
-  border: none;
-  color: var(--text);
-  padding: 6px 4px 6px 10px;
-  cursor: pointer;
-  font-size: var(--font-md);
-}
-.cat-toggle:hover {
-  background: var(--bg);
-}
-.chevron {
-  display: inline-block;
-  font-size: var(--font-xs);
-  color: var(--text-dim);
-  transition: transform 0.1s;
-}
-.chevron.open {
-  transform: rotate(90deg);
-}
-.cat-name {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.count {
-  font-size: var(--font-sm);
-  color: var(--text-hint);
-}
-.icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  background: none;
-  border: 1px solid transparent;
-  border-radius: var(--radius-sm);
-  color: var(--text-dim);
-  cursor: pointer;
-  font-size: var(--font-lg);
-  line-height: 1;
-  padding: 0;
-}
-.icon.delete:hover:not(:disabled) {
-  color: var(--danger-bg);
-  border-color: var(--danger-bg);
-}
-.icon:disabled {
-  opacity: 0.3;
-  cursor: default;
-}
-.favorites-group {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.fav-head {
-  padding: 6px 10px 3px;
-  font-size: var(--font-xs);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--favorite);
-}
-.empty code {
-  font-size: var(--font-sm);
-}
diff --git a/src/renderer/src/components/styles/SavedDiffsSection.css b/src/renderer/src/components/styles/SavedDiffsSection.css
new file mode 100644
index 0000000..12bc23f
--- /dev/null
+++ b/src/renderer/src/components/styles/SavedDiffsSection.css
@@ -0,0 +1,143 @@
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.lock {
+  font-size: var(--font-md);
+}
+.head-actions {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 8px 10px;
+}
+.add-category {
+  padding: 0 10px 8px;
+}
+.add-category input {
+  width: 100%;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  padding: 5px 8px;
+  font-size: var(--font-md);
+}
+.add-category input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+.empty {
+  padding: 4px 10px;
+  font-size: var(--font-md);
+  color: var(--text-dim);
+  line-height: 1.5;
+}
+.empty.small {
+  padding: 4px 10px 4px 30px;
+  font-size: var(--font-sm);
+}
+.empty kbd {
+  font-size: var(--font-xs);
+  padding: 0 3px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+.empty code {
+  font-size: var(--font-sm);
+}
+.category-head {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding-right: 6px;
+  border-top: 1px solid var(--border);
+}
+/* Drag affordance for reordering categories. */
+.grip {
+  padding-left: 8px;
+  color: var(--text-dim);
+  font-size: var(--font-sm);
+  cursor: grab;
+  opacity: 0.5;
+}
+.category-head:hover .grip {
+  opacity: 1;
+}
+.category.dragging {
+  opacity: 0.5;
+}
+.cat-toggle {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  text-align: left;
+  background: none;
+  border: none;
+  color: var(--text);
+  padding: 6px 4px 6px 4px;
+  cursor: pointer;
+  font-size: var(--font-md);
+}
+.cat-toggle:hover {
+  background: var(--bg);
+}
+.chevron {
+  display: inline-block;
+  font-size: var(--font-xs);
+  color: var(--text-dim);
+  transition: transform 0.1s;
+}
+.chevron.open {
+  transform: rotate(90deg);
+}
+.cat-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.count {
+  font-size: var(--font-sm);
+  color: var(--text-hint);
+}
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: var(--font-lg);
+  line-height: 1;
+  padding: 0;
+}
+.icon.delete:hover:not(:disabled) {
+  color: var(--danger-bg);
+  border-color: var(--danger-bg);
+}
+.icon:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+.favorites-group {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.fav-head {
+  padding: 6px 10px 3px;
+  font-size: var(--font-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--favorite);
+}
diff --git a/src/renderer/src/components/styles/SectionHeader.css b/src/renderer/src/components/styles/SectionHeader.css
new file mode 100644
index 0000000..9af9bcb
--- /dev/null
+++ b/src/renderer/src/components/styles/SectionHeader.css
@@ -0,0 +1,59 @@
+/* Section header band: a recessed strip framed by hairlines so Saved / External
+   / Snippets read as distinct blocks. Shared by every reorderable section. */
+.head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 10px;
+  font-size: var(--font-sm);
+  font-weight: 700;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  background: var(--bg);
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  user-select: none;
+}
+/* The topmost section sits flush and lifts its label to line up with the
+   Left/Right file-slot labels across the divider (10px row + 6px slot). */
+.head.first {
+  border-top: none;
+  padding-top: 16px;
+}
+.section-title {
+  flex: 1;
+}
+.chev {
+  display: inline-block;
+  font-size: var(--font-2xs);
+  color: var(--text-dim);
+  transition: transform 0.12s;
+}
+.chev.open {
+  transform: rotate(90deg);
+}
+/* Up/down section move controls — quiet until hovered. */
+.reorder {
+  display: inline-flex;
+  gap: 2px;
+}
+.reorder-btn {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: var(--font-2xs);
+  line-height: 1;
+  padding: 2px 4px;
+}
+.reorder-btn:hover:not(:disabled) {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+.reorder-btn:disabled {
+  opacity: 0.25;
+  cursor: default;
+}
diff --git a/src/renderer/src/components/styles/SnippetsPanel.css b/src/renderer/src/components/styles/SnippetsPanel.css
index 227e83e..70b9e00 100644
--- a/src/renderer/src/components/styles/SnippetsPanel.css
+++ b/src/renderer/src/components/styles/SnippetsPanel.css
@@ -1,51 +1,26 @@
 .snippets-section {
   display: flex;
   flex-direction: column;
-  /* This is the last section in the scrolling sidebar; reserve space beneath it
-     so the final snippets never sit flush against the window's bottom edge,
-     even when the list is scrolled all the way down. */
+  /* Reserve space beneath the section so the final snippets never sit flush
+     against the window's bottom edge, even scrolled all the way down (this is
+     often, but not always, the last section — order is user-controlled). */
   padding-bottom: var(--space-4);
 }
-/* Section header band — matches SavedDiffs.vue, now a collapse toggle. */
-.head {
+.head-actions {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 9px 10px;
-  font-size: var(--font-sm);
-  font-weight: 700;
-  color: var(--text-dim);
-  text-transform: uppercase;
-  letter-spacing: 0.6px;
-  background: var(--bg);
-  border-top: 1px solid var(--border);
-  border-bottom: 1px solid var(--border);
-}
-.head.sub {
-  margin-top: 12px;
-}
-.section-head {
-  cursor: pointer;
-  user-select: none;
-}
-.section-title {
-  flex: 1;
+  gap: 6px;
+  padding: 8px 10px;
 }
+/* Collapse chevron for the shelf sub-headers (the section header owns its own). */
 .chev {
   display: inline-block;
-  font-size: var(--font-2xs);
   color: var(--text-dim);
   transition: transform 0.12s;
 }
 .chev.open {
   transform: rotate(90deg);
 }
-.head-actions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 10px;
-}
 .filter {
   display: flex;
   align-items: center;

From 65035fe07c46bb5f93c4cd5daa1120e3ed88efc7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 22 Jul 2026 06:24:31 +0000
Subject: [PATCH 04/10] =?UTF-8?q?Paste=20mode:=20partial=20paste=20?=
 =?UTF-8?q?=E2=80=94=20diff=20pasted=20text=20against=20a=20loaded=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Each paste side is independently a textarea or a loaded file (drop onto the
  pane, or "load file…"), so typed text on one side can be compared against a
  real file on the other; Compare and snapshot/restore honor both
- Paste panes capture their own drops; the window-level diff drop stands down
  in paste mode
- Rework the paste layout with per-side headers and keep the Compare/Cancel
  actions centered under the two panes

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V6QHAnibiPenmyN7q3Rh4m
---
 src/renderer/src/App.vue                      |  8 +-
 src/renderer/src/components/PasteInput.vue    | 79 +++++++++++++++----
 .../src/components/styles/PasteInput.css      | 52 +++++++++++-
 src/renderer/src/stores/diffStore.js          | 52 ++++++++++--
 tests/renderer/stores/diffStore.test.js       | 34 ++++++++
 5 files changed, 199 insertions(+), 26 deletions(-)

diff --git a/src/renderer/src/App.vue b/src/renderer/src/App.vue
index a2b3969..ef71b05 100644
--- a/src/renderer/src/App.vue
+++ b/src/renderer/src/App.vue
@@ -31,7 +31,13 @@ window.addEventListener('focus', () => store.refreshFromDisk())
 // one of them is open.
 const dropSuppressed = computed(
   () =>
-    !!snippets.editingSnippet || store.showBase64Dialog || !!store.textTool || store.showCryptDialog
+    !!snippets.editingSnippet ||
+    store.showBase64Dialog ||
+    !!store.textTool ||
+    store.showCryptDialog ||
+    // Paste mode's panes capture their own file drops (partial paste), so the
+    // window-level diff drop stands down to avoid a competing overlay.
+    store.mode === 'paste'
 )
 const {
   active: dragActive,
diff --git a/src/renderer/src/components/PasteInput.vue b/src/renderer/src/components/PasteInput.vue
index bb44b03..e05c0d3 100644
--- a/src/renderer/src/components/PasteInput.vue
+++ b/src/renderer/src/components/PasteInput.vue
@@ -1,31 +1,76 @@
 <script setup>
+// Paste-compare with partial-paste support: each side is either a textarea or a
+// loaded file, independently — so pasted text on one side can be diffed against
+// a real dropped/chosen file on the other. Each pane captures its own drop so
+// the window-level diff drop never sees it.
 import { useDiffStore } from '../stores/diffStore'
+import { useFileTextDrop } from '../composables/useFileDrop'
 
 const store = useDiffStore()
+
+const leftDrop = useFileTextDrop((content, name) =>
+  store.receivePasteFile('left', { name, content })
+)
+const rightDrop = useFileTextDrop((content, name) =>
+  store.receivePasteFile('right', { name, content })
+)
 </script>
 
 <template>
   <div class="paste">
     <div class="panes">
-      <textarea
-        v-model="store.pasteLeft"
-        class="pane"
-        placeholder="Paste original text here…"
-        spellcheck="false"
-      ></textarea>
-      <textarea
-        v-model="store.pasteRight"
-        class="pane"
-        placeholder="Paste changed text here…"
-        spellcheck="false"
-      ></textarea>
+      <div
+        class="pane-col"
+        @dragover.capture.prevent.stop
+        @drop.capture.prevent.stop="leftDrop.onDropFile"
+      >
+        <div class="pane-head">
+          <span class="pane-label">Original</span>
+          <template v-if="store.pasteLeftFile">
+            <span class="file-name" :title="store.pasteLeftFile.name"
+              >📄 {{ store.pasteLeftFile.name }}</span
+            >
+            <button class="link" @click="store.clearPasteFile('left')">use text</button>
+          </template>
+          <button v-else class="link" @click="store.pastePickFile('left')">load file…</button>
+        </div>
+        <textarea
+          v-if="!store.pasteLeftFile"
+          v-model="store.pasteLeft"
+          class="pane"
+          placeholder="Paste original text here… or drop a file"
+          spellcheck="false"
+        ></textarea>
+        <pre v-else class="pane file-view">{{ store.pasteLeftFile.content }}</pre>
+      </div>
+
+      <div
+        class="pane-col"
+        @dragover.capture.prevent.stop
+        @drop.capture.prevent.stop="rightDrop.onDropFile"
+      >
+        <div class="pane-head">
+          <span class="pane-label">Changed</span>
+          <template v-if="store.pasteRightFile">
+            <span class="file-name" :title="store.pasteRightFile.name"
+              >📄 {{ store.pasteRightFile.name }}</span
+            >
+            <button class="link" @click="store.clearPasteFile('right')">use text</button>
+          </template>
+          <button v-else class="link" @click="store.pastePickFile('right')">load file…</button>
+        </div>
+        <textarea
+          v-if="!store.pasteRightFile"
+          v-model="store.pasteRight"
+          class="pane"
+          placeholder="Paste changed text here… or drop a file"
+          spellcheck="false"
+        ></textarea>
+        <pre v-else class="pane file-view">{{ store.pasteRightFile.content }}</pre>
+      </div>
     </div>
     <div class="actions">
-      <button
-        class="btn btn-primary"
-        :disabled="!store.pasteLeft && !store.pasteRight"
-        @click="store.comparePasted"
-      >
+      <button class="btn btn-primary" :disabled="!store.canSave" @click="store.comparePasted">
         Compare
       </button>
       <button class="btn btn-ghost" @click="store.togglePasteMode">Cancel</button>
diff --git a/src/renderer/src/components/styles/PasteInput.css b/src/renderer/src/components/styles/PasteInput.css
index 74749d0..2b5380f 100644
--- a/src/renderer/src/components/styles/PasteInput.css
+++ b/src/renderer/src/components/styles/PasteInput.css
@@ -11,8 +11,50 @@
   display: flex;
   gap: 10px;
 }
+/* Each side is a header (label + load/clear) stacked over its input. */
+.pane-col {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.pane-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--font-sm);
+  color: var(--text-dim);
+}
+.pane-label {
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-hint);
+}
+.file-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text);
+}
+.link {
+  margin-left: auto;
+  background: none;
+  border: none;
+  color: var(--accent);
+  cursor: pointer;
+  font-size: var(--font-sm);
+  padding: 0;
+}
+.link:hover {
+  text-decoration: underline;
+}
 .pane {
   flex: 1;
+  min-height: 0;
   resize: none;
   background: var(--bg-panel);
   border: 1px solid var(--border);
@@ -27,11 +69,17 @@
   outline: none;
   border-color: var(--accent);
 }
+/* A loaded file is shown read-only in place of the textarea. */
+.file-view {
+  margin: 0;
+  overflow: auto;
+  white-space: pre;
+}
 .actions {
   display: flex;
   gap: 10px;
+  /* Centered under the two equal-width panes, and clear of the floating
+     ShortcutBar that centers on the same bottom edge. */
   justify-content: center;
-  /* Clears the floating ShortcutBar, which is centered on the same edge —
-     without this the pill sits on top of Compare/Cancel. */
   margin-bottom: 44px;
 }
diff --git a/src/renderer/src/stores/diffStore.js b/src/renderer/src/stores/diffStore.js
index a16ccf9..fa6ce52 100644
--- a/src/renderer/src/stores/diffStore.js
+++ b/src/renderer/src/stores/diffStore.js
@@ -85,6 +85,11 @@ export const useDiffStore = defineStore('diff', {
     mode: 'files',
     pasteLeft: '',
     pasteRight: '',
+    // In paste mode each side can instead hold a dropped/loaded file
+    // ({ name, content }) — so pasted text on one side can be compared against a
+    // real file on the other ("partial paste"). null = that side is a textarea.
+    pasteLeftFile: null,
+    pasteRightFile: null,
     // { additions, deletions } from the diff editor, null before first diff
     stats: null,
     // transient user-facing message (binary file rejected, etc.)
@@ -133,8 +138,11 @@ export const useDiffStore = defineStore('diff', {
   getters: {
     ready: (s) => !!s.left && !!s.right,
     // A diff is saveable once there is anything to keep: two loaded files,
-    // or text typed/pasted into the paste panes (even before Compare).
-    canSave: (s) => (s.mode === 'paste' ? !!(s.pasteLeft || s.pasteRight) : s.ready),
+    // or text/files put into the paste panes (even before Compare).
+    canSave: (s) =>
+      s.mode === 'paste'
+        ? !!(s.pasteLeft || s.pasteRight || s.pasteLeftFile || s.pasteRightFile)
+        : s.ready,
     leftComparable: (s) => (s.left ? resolveAdapter(s.left).toComparable(s.left) : null),
     rightComparable: (s) => (s.right ? resolveAdapter(s.right).toComparable(s.right) : null),
     leftFormatHint: (s) => formatHintFor(s.left, s.dismissedFormatHint.left),
@@ -219,13 +227,39 @@ export const useDiffStore = defineStore('diff', {
       this.mode = 'files'
     },
     comparePasted() {
-      this.left = { path: null, name: 'Left (pasted)', content: this.pasteLeft }
-      this.right = { path: null, name: 'Right (pasted)', content: this.pasteRight }
+      // Each side is whichever the user provided: a loaded file, else the
+      // textarea's pasted text.
+      const l = this.pasteLeftFile ?? { name: 'Left (pasted)', content: this.pasteLeft }
+      const r = this.pasteRightFile ?? { name: 'Right (pasted)', content: this.pasteRight }
+      this.left = { path: null, name: l.name, content: l.content }
+      this.right = { path: null, name: r.name, content: r.content }
       this.mode = 'files'
     },
     togglePasteMode() {
       this.mode = this.mode === 'paste' ? 'files' : 'paste'
     },
+    // Load a file into one paste side without leaving paste mode (partial
+    // paste). `file` is a LoadedFile from the open dialog or a dropped file.
+    receivePasteFile(side, file) {
+      if (!file) return
+      if (file.error === 'binary') {
+        this.showNotice(
+          `"${file.name}" looks like a binary file — only text files can be compared.`
+        )
+        return
+      }
+      if (file.error) return
+      this[side === 'left' ? 'pasteLeftFile' : 'pasteRightFile'] = {
+        name: file.name,
+        content: file.content
+      }
+    },
+    async pastePickFile(side) {
+      this.receivePasteFile(side, await window.api.openFile(side))
+    },
+    clearPasteFile(side) {
+      this[side === 'left' ? 'pasteLeftFile' : 'pasteRightFile'] = null
+    },
     initTheme() {
       applyTheme(this.theme)
     },
@@ -281,6 +315,8 @@ export const useDiffStore = defineStore('diff', {
         right: this.right,
         pasteLeft: this.pasteLeft,
         pasteRight: this.pasteRight,
+        pasteLeftFile: this.pasteLeftFile,
+        pasteRightFile: this.pasteRightFile,
         renderSideBySide: this.renderSideBySide,
         ignoreTrimWhitespace: this.ignoreTrimWhitespace
       }
@@ -290,6 +326,8 @@ export const useDiffStore = defineStore('diff', {
       this.right = payload.right
       this.pasteLeft = payload.pasteLeft ?? ''
       this.pasteRight = payload.pasteRight ?? ''
+      this.pasteLeftFile = payload.pasteLeftFile ?? null
+      this.pasteRightFile = payload.pasteRightFile ?? null
       this.renderSideBySide = payload.renderSideBySide ?? true
       this.ignoreTrimWhitespace = payload.ignoreTrimWhitespace ?? false
       this.mode = payload.mode ?? 'files'
@@ -298,10 +336,12 @@ export const useDiffStore = defineStore('diff', {
       this.left = null
       this.right = null
       this.stats = null
-      // Also wipe paste-mode text so a cleared session never leaves the
-      // previous pasted content lingering behind.
+      // Also wipe paste-mode text and files so a cleared session never leaves
+      // the previous content lingering behind.
       this.pasteLeft = ''
       this.pasteRight = ''
+      this.pasteLeftFile = null
+      this.pasteRightFile = null
     },
     showNotice(text) {
       this.notice = text
diff --git a/tests/renderer/stores/diffStore.test.js b/tests/renderer/stores/diffStore.test.js
index fc41312..b2ddbd6 100644
--- a/tests/renderer/stores/diffStore.test.js
+++ b/tests/renderer/stores/diffStore.test.js
@@ -76,6 +76,40 @@ describe('diffStore', () => {
     expect(store.ready).toBe(true)
   })
 
+  it('partial paste: compares pasted text against a loaded file', () => {
+    const store = useDiffStore()
+    store.mode = 'paste'
+    store.pasteLeft = 'typed original'
+    store.receivePasteFile('right', { name: 'changed.txt', content: 'file body' })
+    expect(store.canSave).toBe(true)
+    store.comparePasted()
+    expect(store.mode).toBe('files')
+    expect(store.left).toMatchObject({ name: 'Left (pasted)', content: 'typed original' })
+    expect(store.right).toMatchObject({ name: 'changed.txt', content: 'file body' })
+  })
+
+  it('receivePasteFile rejects a binary file and keeps the side as a textarea', () => {
+    const store = useDiffStore()
+    store.receivePasteFile('left', { error: 'binary', name: 'blob.bin' })
+    expect(store.pasteLeftFile).toBeNull()
+    expect(store.notice).toContain('blob.bin')
+  })
+
+  it('clearPasteFile returns a paste side to its textarea', () => {
+    const store = useDiffStore()
+    store.receivePasteFile('left', { name: 'a.txt', content: 'x' })
+    expect(store.pasteLeftFile).not.toBeNull()
+    store.clearPasteFile('left')
+    expect(store.pasteLeftFile).toBeNull()
+  })
+
+  it('pastePickFile loads the chosen file into one side', async () => {
+    const store = useDiffStore()
+    window.api.openFile = async (side) => ({ name: `${side}.txt`, content: 'picked' })
+    await store.pastePickFile('right')
+    expect(store.pasteRightFile).toEqual({ name: 'right.txt', content: 'picked' })
+  })
+
   it('dropFiles loads two dropped files into left and right', async () => {
     const store = useDiffStore()
     window.api.readFile = async (path) => ({

From 1785ba619dfb553b54e3aaed13a4950a7a54fdc1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 22 Jul 2026 06:28:25 +0000
Subject: [PATCH 05/10] Centralize spacing and split colors into a dedicated
 theme file

- Move the color palette into styles/themes.css; tokens.css now holds only the
  theme-independent scale (radius/type/spacing/control heights), so a future
  color theme can be added without touching structure or alignment
- Add app-wide .section-actions / .section-inset classes and section-rhythm
  tokens; every sidebar section's action row (+ New category, Import,
  + New snippet) now draws its inset from one place instead of restating pixel
  padding, fixing the buttons that sat too close to the section header

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V6QHAnibiPenmyN7q3Rh4m
---
 .../src/components/ExternalDiffsSection.vue   |  2 +-
 .../src/components/SavedDiffsSection.vue      |  2 +-
 src/renderer/src/components/SnippetsPanel.vue |  2 +-
 .../styles/ExternalDiffsSection.css           |  6 --
 .../components/styles/SavedDiffsSection.css   |  6 --
 .../src/components/styles/SnippetsPanel.css   |  6 --
 src/renderer/src/main.js                      |  1 +
 src/renderer/src/styles/themes.css            | 59 ++++++++++++++
 src/renderer/src/styles/tokens.css            | 76 ++++---------------
 src/renderer/src/styles/ui.css                | 18 +++++
 10 files changed, 97 insertions(+), 81 deletions(-)
 create mode 100644 src/renderer/src/styles/themes.css

diff --git a/src/renderer/src/components/ExternalDiffsSection.vue b/src/renderer/src/components/ExternalDiffsSection.vue
index a330fd5..94433ca 100644
--- a/src/renderer/src/components/ExternalDiffsSection.vue
+++ b/src/renderer/src/components/ExternalDiffsSection.vue
@@ -30,7 +30,7 @@ const hasImported = computed(() => importedFavs.value.length || importedOthers.v
       @toggle="open = !open"
     />
     <div v-show="open" class="section-body">
-      <div class="head-actions">
+      <div class="section-actions">
         <button
           class="btn btn-sm btn-block"
           :title="`Import a shared diff (${MOD}+I)`"
diff --git a/src/renderer/src/components/SavedDiffsSection.vue b/src/renderer/src/components/SavedDiffsSection.vue
index 30ecde2..98f6499 100644
--- a/src/renderer/src/components/SavedDiffsSection.vue
+++ b/src/renderer/src/components/SavedDiffsSection.vue
@@ -94,7 +94,7 @@ function onDrop(targetId) {
     </SectionHeader>
 
     <div v-show="open" class="section-body">
-      <div class="head-actions">
+      <div class="section-actions">
         <button class="btn btn-sm btn-block" title="New category" @click="startAddCategory">
           + New category
         </button>
diff --git a/src/renderer/src/components/SnippetsPanel.vue b/src/renderer/src/components/SnippetsPanel.vue
index a66251d..1fbd4c5 100644
--- a/src/renderer/src/components/SnippetsPanel.vue
+++ b/src/renderer/src/components/SnippetsPanel.vue
@@ -63,7 +63,7 @@ const { preview, onRowEnter, onRowLeave } = useSnippetPreview()
     </SectionHeader>
 
     <div v-show="sectionOpen" class="section-body">
-      <div class="head-actions">
+      <div class="section-actions">
         <button
           class="btn btn-sm btn-block btn-primary"
           title="Create a new snippet"
diff --git a/src/renderer/src/components/styles/ExternalDiffsSection.css b/src/renderer/src/components/styles/ExternalDiffsSection.css
index 5409fb8..7b07acb 100644
--- a/src/renderer/src/components/styles/ExternalDiffsSection.css
+++ b/src/renderer/src/components/styles/ExternalDiffsSection.css
@@ -3,12 +3,6 @@ ul {
   margin: 0;
   padding: 0;
 }
-.head-actions {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 8px 10px;
-}
 .empty {
   padding: 4px 10px;
   font-size: var(--font-md);
diff --git a/src/renderer/src/components/styles/SavedDiffsSection.css b/src/renderer/src/components/styles/SavedDiffsSection.css
index 12bc23f..db03751 100644
--- a/src/renderer/src/components/styles/SavedDiffsSection.css
+++ b/src/renderer/src/components/styles/SavedDiffsSection.css
@@ -6,12 +6,6 @@ ul {
 .lock {
   font-size: var(--font-md);
 }
-.head-actions {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 8px 10px;
-}
 .add-category {
   padding: 0 10px 8px;
 }
diff --git a/src/renderer/src/components/styles/SnippetsPanel.css b/src/renderer/src/components/styles/SnippetsPanel.css
index 70b9e00..897dac6 100644
--- a/src/renderer/src/components/styles/SnippetsPanel.css
+++ b/src/renderer/src/components/styles/SnippetsPanel.css
@@ -6,12 +6,6 @@
      often, but not always, the last section — order is user-controlled). */
   padding-bottom: var(--space-4);
 }
-.head-actions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 10px;
-}
 /* Collapse chevron for the shelf sub-headers (the section header owns its own). */
 .chev {
   display: inline-block;
diff --git a/src/renderer/src/main.js b/src/renderer/src/main.js
index 52b8791..45ce172 100644
--- a/src/renderer/src/main.js
+++ b/src/renderer/src/main.js
@@ -3,6 +3,7 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import './monaco-setup'
 import './styles/tokens.css'
+import './styles/themes.css'
 import './styles/base.css'
 import './styles/ui.css'
 
diff --git a/src/renderer/src/styles/themes.css b/src/renderer/src/styles/themes.css
new file mode 100644
index 0000000..866b33e
--- /dev/null
+++ b/src/renderer/src/styles/themes.css
@@ -0,0 +1,59 @@
+/* Color themes. Kept separate from tokens.css on purpose: tokens.css holds the
+   theme-independent structure (spacing, radius, type, control heights) that must
+   never change between themes, while THIS file holds only the palette. To add a
+   new theme, add a `:root[data-theme='name']` block here that redefines every
+   token the default (dark) block sets — nothing structural, so alignment and
+   sizing stay identical across themes. The theme toggle stamps data-theme on
+   :root; the store persists the choice (see diffStore.applyTheme). */
+
+/* Default (dark). */
+:root {
+  --bg: #0d1117;
+  --bg-panel: #161b22;
+  --bg-hover: #21262d;
+  --border: #30363d;
+  --text: #e6edf3;
+  --text-dim: #8b949e;
+  /* between --text and --text-dim: for hint text that must stay readable */
+  --text-hint: #c3cdd7;
+  --accent: #2f81f7;
+  /* Attention-grabbing banners (format-suggestion hint, parse-error hint) —
+     deliberately more saturated than the rest of the palette. */
+  --warning-bg: #d29922;
+  --warning-border: #9a6700;
+  --warning-text: #1a1300;
+  --danger-bg: #f85149;
+  --danger-border: #da3633;
+  --danger-text: #ffffff;
+  /* "this parsed / these lines were added" green — readable on both panels. */
+  --success-text: #3fb950;
+  /* Modal scrim — the same dim in both themes, so the app behind reads as
+     inactive without the overlay changing character. */
+  --scrim: rgba(0, 0, 0, 0.5);
+  /* Favorites gold: the pinned-shelf tint and its stars. */
+  --favorite: #d29922;
+  /* Text on an accent/danger fill — white in both themes, still a token so no
+     component hardcodes it. */
+  --text-on-accent: #ffffff;
+}
+
+:root[data-theme='light'] {
+  --bg: #ffffff;
+  --bg-panel: #f6f8fa;
+  --bg-hover: #eaeef2;
+  --border: #d0d7de;
+  --text: #1f2328;
+  --text-dim: #656d76;
+  --text-hint: #454c54;
+  --accent: #0969da;
+  --warning-bg: #f0b429;
+  --warning-border: #bf8700;
+  --warning-text: #3b2900;
+  --danger-bg: #f85149;
+  --danger-border: #cf222e;
+  --danger-text: #ffffff;
+  --success-text: #1a7f37;
+  --scrim: rgba(0, 0, 0, 0.5);
+  --favorite: #bf8700;
+  --text-on-accent: #ffffff;
+}
diff --git a/src/renderer/src/styles/tokens.css b/src/renderer/src/styles/tokens.css
index 6593194..01c45e6 100644
--- a/src/renderer/src/styles/tokens.css
+++ b/src/renderer/src/styles/tokens.css
@@ -1,12 +1,9 @@
-/* Theme tokens. Every color in the app resolves through one of these — a
-   hardcoded color anywhere else breaks the light/dark switch. Dark is the
-   default; the light block is re-applied by the theme toggle stamping
-   data-theme on :root, so it must redefine every token the dark block sets. */
-
-/* Shape, size and type scale. These are theme-independent, so they live outside
-   the two color blocks — but the rule is the same: component styles pick from
-   this scale instead of inventing values, which is what keeps two buttons in
-   two panels the same size. The shared control classes are in ui.css. */
+/* Structural design tokens: the theme-INDEPENDENT scale every component builds
+   on — radius, type ramp, control heights, and the spacing rhythm. Colors live
+   in themes.css so a new color theme never touches structure or alignment.
+   A hardcoded value anywhere in components/styles is rejected by
+   scripts/check-style-tokens.mjs — add a token here instead. The shared control
+   and layout classes are in ui.css. */
 :root {
   --radius-sm: 4px;
   --radius: 6px;
@@ -25,59 +22,18 @@
   /* Control heights: sidebar/toolbar controls, then dialog buttons. */
   --control-h-sm: 26px;
   --control-h: 30px;
+  /* Spacing rhythm. Prefer these over ad-hoc pixel padding so panels and
+     buttons share one rhythm and never drift apart. */
   --space-1: 4px;
   --space-2: 6px;
   --space-3: 10px;
   --space-4: 16px;
-}
-
-:root {
-  --bg: #0d1117;
-  --bg-panel: #161b22;
-  --bg-hover: #21262d;
-  --border: #30363d;
-  --text: #e6edf3;
-  --text-dim: #8b949e;
-  /* between --text and --text-dim: for hint text that must stay readable */
-  --text-hint: #c3cdd7;
-  --accent: #2f81f7;
-  /* Attention-grabbing banners (format-suggestion hint, parse-error hint) —
-     deliberately more saturated than the rest of the palette. */
-  --warning-bg: #d29922;
-  --warning-border: #9a6700;
-  --warning-text: #1a1300;
-  --danger-bg: #f85149;
-  --danger-border: #da3633;
-  --danger-text: #ffffff;
-  /* "this parsed / these lines were added" green — readable on both panels. */
-  --success-text: #3fb950;
-  /* Modal scrim — the same dim in both themes, so the app behind reads as
-     inactive without the overlay changing character. */
-  --scrim: rgba(0, 0, 0, 0.5);
-  /* Favorites gold: the pinned-shelf tint and its stars. */
-  --favorite: #d29922;
-  /* Text on an accent/danger fill — white in both themes, still a token so no
-     component hardcodes it. */
-  --text-on-accent: #ffffff;
-}
-
-:root[data-theme='light'] {
-  --bg: #ffffff;
-  --bg-panel: #f6f8fa;
-  --bg-hover: #eaeef2;
-  --border: #d0d7de;
-  --text: #1f2328;
-  --text-dim: #656d76;
-  --text-hint: #454c54;
-  --accent: #0969da;
-  --warning-bg: #f0b429;
-  --warning-border: #bf8700;
-  --warning-text: #3b2900;
-  --danger-bg: #f85149;
-  --danger-border: #cf222e;
-  --danger-text: #ffffff;
-  --success-text: #1a7f37;
-  --scrim: rgba(0, 0, 0, 0.5);
-  --favorite: #bf8700;
-  --text-on-accent: #ffffff;
+  /* Named application rhythm, composed from the scale above. One place controls
+     the inset every sidebar section, its action row, and its body use, so a new
+     section (or a new button in one) can never end up glued to its neighbour —
+     the class is .section-actions / .section-inset in ui.css. */
+  --pad-inset-x: var(--space-3);
+  --pad-section-top: var(--space-3);
+  --pad-section-bottom: var(--space-2);
+  --gap-section: 12px;
 }
diff --git a/src/renderer/src/styles/ui.css b/src/renderer/src/styles/ui.css
index 16a1a76..066c851 100644
--- a/src/renderer/src/styles/ui.css
+++ b/src/renderer/src/styles/ui.css
@@ -87,6 +87,24 @@
   width: 100%;
 }
 
+/* --- Sidebar section rhythm ---------------------------------------------
+   App-wide spacing for the reorderable sidebar sections, so the inset around a
+   section's action row (e.g. "+ New category", "Import", "+ New snippet") is
+   controlled in one place. Adding a button or a whole new section can no longer
+   drift out of alignment — it opts into these classes instead of restating
+   pixel padding. Values come from the rhythm tokens in tokens.css. */
+.section-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--pad-section-top) var(--pad-inset-x) var(--pad-section-bottom);
+}
+/* Left/right inset that lines a section's own controls up with its action row. */
+.section-inset {
+  padding-left: var(--pad-inset-x);
+  padding-right: var(--pad-inset-x);
+}
+
 /* Solid destructive action — confirmation dialogs only, never a first resort. */
 .btn-destructive {
   background: var(--danger-bg);

From c8394bc2d16f5a5af6d32fc6744b0c015489712c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 22 Jul 2026 06:30:15 +0000
Subject: [PATCH 06/10] docs: record settings store, section reorder, search
 and paste changes

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V6QHAnibiPenmyN7q3Rh4m
---
 DEVELOPMENT_PLAN.md  | 20 ++++++++++++++++++++
 README.md            | 19 +++++++++++++++----
 docs/architecture.md |  6 ++++--
 3 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/DEVELOPMENT_PLAN.md b/DEVELOPMENT_PLAN.md
index 288d56b..700ee46 100644
--- a/DEVELOPMENT_PLAN.md
+++ b/DEVELOPMENT_PLAN.md
@@ -133,6 +133,26 @@ First run: `npm install && npm run dev`
       diagram theme paired to the app theme (dark → `dark`, light → `default`),
       re-rendered on theme switch so text never blends into the canvas
 
+## Phase 2.6 – UI/UX refinements ✅
+
+- [x] Plaintext `settings.json` store (`stores/settingsStore.js`): reorderable
+      sidebar sections, drag-reorderable saved-diff categories, shortcut-bar
+      visibility, and user-raisable comparison-file / snippet size limits with
+      safe defaults and hard ceilings (main enforces the file limit from it)
+- [x] Reorderable sidebar sections behind a shared `SectionHeader`; Saved /
+      External / Snippets each extracted into a self-contained component
+- [x] Diff search gains match-case, whole-word, and safety-limited regex
+      (`utils/searchRegex.js` refuses over-long / catastrophic patterns)
+- [x] Partial paste mode: diff pasted text against a dropped/chosen file
+- [x] Tools menu grouped per format (Base64 / JSON / XML / SQL / Text
+      Encryption); Help → Keyboard Shortcuts lists bindings for the host OS
+- [x] Categories are local-only — never offered or sent in the share flow
+- [x] Color palette split into `styles/themes.css` (structure stays in
+      `tokens.css`), plus app-wide `.section-actions` spacing so no section's
+      buttons drift out of alignment
+- [x] Mermaid "Expand" opens a full-window viewer above all dialogs (the
+      snippet editor closes first)
+
 ## Phase 3 – Packaging & distribution (~1–2 days + cert wait times)
 
 - [ ] Windows: NSIS installer via `npm run build:win`. Unsigned builds trigger
diff --git a/README.md b/README.md
index 92630e1..26d8031 100644
--- a/README.md
+++ b/README.md
@@ -59,11 +59,18 @@ Builds are **unsigned** for now (no Apple/Microsoft cert yet):
 
 - **Diff** two files or pasted text — split/inline, word-level highlights,
   syntax highlighting, live re-diff when a file changes on disk, and an in-view
-  search (plain / regex, match count, jump-to-match).
+  search with match-case, whole-word, and safety-limited regex, match count and
+  jump-to-match.
+- **Paste mode** compares two pasted snippets, or mixes the two — paste one
+  side and drop/choose a real file on the other (partial paste).
 - **Drag & drop** files onto the window (two at once builds the diff; a third
   starts over). Fixed, single window; light/dark themes; clamped zoom.
 - **Saved diffs** — AES-256-GCM encrypted at rest, auto-expiring (≤ 24 h),
-  organized into categories, favoritable.
+  organized into drag-reorderable categories, favoritable. Categories are a
+  local organizing tool and never travel with a shared diff.
+- **Rearrangeable sidebar** — reorder the Saved / External / Snippets sections
+  to taste; the order (and other preferences) persist in a plaintext
+  `settings.json`.
 - **Share** a saved diff as a sealed, signed `.diffbro` file for one recipient;
   manage named trusted keys under the **Security** menu.
 - **Snippets** — an encrypted, tagged, non-expiring text library with
@@ -71,8 +78,12 @@ Builds are **unsigned** for now (no Apple/Microsoft cert yet):
   filter + copy, and passphrase-protected export/import. **Mermaid** snippets
   render to a diagram — a live preview while editing plus a resizable
   zoom/pan viewer, themed to match the app, all offline.
-- **Tools** — Base64, and JSON / XML / SQL format+validate (Monaco-highlighted,
-  with "Add to Snippets"), plus a passphrase text Encrypt/Decrypt.
+- **Tools** — grouped by format (Base64, and JSON / XML / SQL format+validate,
+  Monaco-highlighted, with "Add to Snippets"), plus a passphrase text
+  Encrypt/Decrypt. **Help → Keyboard Shortcuts** lists every binding for your OS.
+- **Settings** — plaintext `settings.json` (data folder, shortcut-bar
+  visibility, and user-raisable comparison-file / snippet size limits with safe
+  defaults).
 - **Config backup/restore** — one passphrase-encrypted file for your keys,
   trusted hosts, snippets and settings (not diffs).
 
diff --git a/docs/architecture.md b/docs/architecture.md
index bc9a2a8..91d41ed 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -9,7 +9,7 @@ crypto, keys) lives in **main**; the **preload** exposes only a small, validated
 flowchart TB
     subgraph R["Renderer — Vue 3 (sandboxed: no Node, no Electron)"]
         ui["UI<br/>DiffViewer · Saved diffs · Snippets · Tools dialogs"]
-        stores["Pinia stores<br/>diff · vault · snippets"]
+        stores["Pinia stores<br/>diff · vault · snippets · settings"]
         adapters["Adapter registry<br/>text → { kind, … } comparable"]
         ui --> stores --> adapters
     end
@@ -54,7 +54,9 @@ flowchart TB
 - `src/main` — Electron main: window, menu, file dialogs + reads (binary/size
   detection, `chardet`/`iconv-lite` encoding), `appData.js` (the configurable
   data directory + file-backed store where diffs/snippets/keys live, so data
-  survives a reinstall), and the pure, unit-tested crypto cores: `sealing.js`
+  survives a reinstall; it also reads the renderer's plaintext `settings.json`
+  for the few limits main enforces, like the large-file threshold), and the
+  pure, unit-tested crypto cores: `sealing.js`
   (sealed diff sharing), `vaultCrypt.js` (saved-diff vault), `snippetSealing.js`
   (snippet export), `textCrypt.js` (Tools encrypt/decrypt), `configBackup.js`
   (config backup). `share.js` is the thin Electron glue.

From 3015da353e4b546aecf9dcd3abe8a06fbef0521a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 22 Jul 2026 06:48:47 +0000
Subject: [PATCH 07/10] Fix invisible diagram in the Mermaid Expand viewer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The viewer's zoom/pan .transform wrapper shrink-wrapped to 0×0, so the
diagram rendered into the DOM but collapsed to nothing (the other half of the
"Expand shows nothing" report — the first half was the editor covering it).
Give .transform a definite box (fill the stage, center its content) so the
diagram fits and scales; verified rendering in Chromium.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V6QHAnibiPenmyN7q3Rh4m
---
 .../src/components/styles/MermaidViewerDialog.css      | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/styles/MermaidViewerDialog.css b/src/renderer/src/components/styles/MermaidViewerDialog.css
index 3433b10..cc65fb5 100644
--- a/src/renderer/src/components/styles/MermaidViewerDialog.css
+++ b/src/renderer/src/components/styles/MermaidViewerDialog.css
@@ -109,9 +109,15 @@
 .transform {
   transform-origin: center center;
   transition: transform 0.04s linear;
-  max-width: 100%;
-  max-height: 100%;
+  /* Fill the stage so the diagram has a definite box to fit into: MermaidDiagram
+     sizes to 100% of this, and a shrink-wrapped parent would collapse it to
+     zero (the diagram would render into the DOM but be invisible). Zoom scales
+     this whole box; the stage clips the overflow. */
+  width: 100%;
+  height: 100%;
   display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .foot {
   display: flex;

From b8b08e4f5f1fc809805fd5f33f1172727b116b87 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 22 Jul 2026 08:30:40 +0000
Subject: [PATCH 08/10] Fix regex-search guard false-positive on quantified
 character classes

The ReDoS heuristic treated ']' like a group close, so safe patterns such as
[-+]+, [ab*]+ and [/*]+ were refused as nested quantifiers. A '*'/'+' before a
character-class close is a literal; only a quantified group ')...' can backtrack
catastrophically. Narrow the signature to ')' and cover it with a test.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V6QHAnibiPenmyN7q3Rh4m
---
 src/renderer/src/utils/searchRegex.js    | 10 ++++++----
 tests/renderer/utils/searchRegex.test.js |  7 +++++++
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/utils/searchRegex.js b/src/renderer/src/utils/searchRegex.js
index 0a26736..c0ef4b7 100644
--- a/src/renderer/src/utils/searchRegex.js
+++ b/src/renderer/src/utils/searchRegex.js
@@ -9,12 +9,14 @@
 // a search box and are the easiest lever for an accidental (or hostile) ReDoS.
 export const MAX_REGEX_LENGTH = 200
 
-// A quantifier applied to a group whose body already ends in a quantifier —
+// A quantifier applied to a GROUP whose body already ends in a quantifier —
 // e.g. (a+)+, (a*)*, (\d+){2,} — is the classic catastrophic-backtracking shape.
 // Detecting it exactly needs a parser; this signature catches the common forms
-// (inner quantifier, group close, outer quantifier) without rejecting ordinary
-// quantified groups like (abc)+.
-const NESTED_QUANTIFIER = /[*+][)\]]\s*[*+{]/
+// (inner quantifier, group close ')', outer quantifier) without rejecting
+// ordinary quantified groups like (abc)+. Only ')' counts, never ']': a '*'/'+'
+// before a character-class close is a literal, so patterns like [-+]+ or [ab*]+
+// are linear and must not be refused.
+const NESTED_QUANTIFIER = /[*+]\)\s*[*+{]/
 
 // Returns { ok: true } for a pattern that is safe to compile and run, or
 // { ok: false, error } describing why it was refused.
diff --git a/tests/renderer/utils/searchRegex.test.js b/tests/renderer/utils/searchRegex.test.js
index 610e63f..911001c 100644
--- a/tests/renderer/utils/searchRegex.test.js
+++ b/tests/renderer/utils/searchRegex.test.js
@@ -9,6 +9,13 @@ describe('checkRegex', () => {
     expect(checkRegex('[a-z]+').ok).toBe(true)
   })
 
+  it('does not mistake a quantified character class for a nested quantifier', () => {
+    // A '*'/'+' before ']' is a literal inside the class, so these are linear.
+    expect(checkRegex('[-+]+').ok).toBe(true)
+    expect(checkRegex('[ab*]+').ok).toBe(true)
+    expect(checkRegex('[/*]+').ok).toBe(true)
+  })
+
   it('rejects an empty pattern', () => {
     expect(checkRegex('')).toEqual({ ok: false, error: 'empty' })
     expect(checkRegex(null).ok).toBe(false)

From 875537ec0db66ddbb47f1c8362cc1a9902aa4d67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mindaugas=20Kasparavic=CC=8Cius?= <kasp.mindaugas@gmail.com>
Date: Wed, 22 Jul 2026 23:09:37 +0300
Subject: [PATCH 09/10] update visuals, add e2e tests

---
 .gitignore                                    |   2 +
 CLAUDE.md                                     |  50 +++++-
 DEVELOPMENT_PLAN.md                           |  23 ++-
 Makefile                                      |  14 +-
 README.md                                     |  14 +-
 docker/Dockerfile                             |   5 +
 e2e/fixtures.mjs                              |  51 ++++++
 e2e/settings.spec.mjs                         |  26 +++
 e2e/smoke.spec.mjs                            |  14 ++
 e2e/snippets.spec.mjs                         |  20 +++
 e2e/theme.spec.mjs                            |  37 ++++
 eslint.config.mjs                             |  11 ++
 package-lock.json                             |  64 +++++++
 package.json                                  |   2 +
 playwright.config.mjs                         |  23 +++
 src/main/clipboard.js                         |  24 +++
 src/main/index.js                             |  24 ++-
 src/main/menu.js                              |  39 ++++-
 src/preload/index.js                          |   6 +
 src/renderer/src/App.vue                      |  18 +-
 src/renderer/src/components/AppIcon.vue       |  56 ++++++
 src/renderer/src/components/AppToolbar.vue    |  13 +-
 src/renderer/src/components/Base64Dialog.vue  |   2 +-
 src/renderer/src/components/BaseDialog.vue    |   3 +-
 src/renderer/src/components/DiffViewer.vue    |  12 +-
 .../src/components/EncryptDecryptDialog.vue   |   2 +-
 .../src/components/ExternalDiffsSection.vue   |   3 +-
 .../components/KeyboardShortcutsDialog.vue    |   5 +-
 src/renderer/src/components/MenuBar.vue       |   3 +-
 .../src/components/MermaidViewerDialog.vue    |  19 ++-
 src/renderer/src/components/PasteInput.vue    |   5 +-
 src/renderer/src/components/SavedDiffRow.vue  |   7 +-
 .../src/components/SavedDiffsSection.vue      |  16 +-
 src/renderer/src/components/SectionHeader.vue |  11 +-
 .../src/components/SettingsDialog.vue         | 160 ++++++++++++------
 src/renderer/src/components/ShortcutBar.vue   |   3 +-
 .../src/components/SnippetEditorDialog.vue    |  11 +-
 src/renderer/src/components/SnippetRow.vue    |  29 ++--
 src/renderer/src/components/SnippetTagBar.vue |   5 +-
 src/renderer/src/components/SnippetsPanel.vue |  15 +-
 src/renderer/src/components/TagChipsField.vue |   3 +-
 .../src/components/TextToolDialog.vue         |   2 +-
 .../src/components/TrustedKeysDialog.vue      |   5 +-
 src/renderer/src/components/styles/App.css    |   7 +-
 .../src/components/styles/AppIcon.css         |   9 +
 .../src/components/styles/AppToolbar.css      |   3 +-
 .../src/components/styles/SavedDiffs.css      |  11 +-
 .../components/styles/SavedDiffsSection.css   |  31 +++-
 .../src/components/styles/SectionHeader.css   |  39 +++--
 .../src/components/styles/SettingsDialog.css  |  91 ++++++++--
 .../components/styles/SnippetEditorDialog.css |   9 +
 .../src/components/styles/SnippetRow.css      |  27 +++
 .../src/components/styles/SnippetsPanel.css   |   7 +-
 .../src/composables/useBackdropClose.js       |  20 +++
 .../src/composables/useCopyFeedback.js        |  36 ++++
 .../src/composables/useMonacoInput.js         |   3 +-
 .../src/composables/useSnippetDraft.js        |   9 +-
 src/renderer/src/icons.js                     | 114 +++++++++++++
 src/renderer/src/menus.js                     |   4 +-
 src/renderer/src/monaco-mermaid.js            | 142 ++++++++++++++++
 src/renderer/src/monaco-setup.js              |   5 +
 src/renderer/src/stores/diffStore.js          |  17 +-
 src/renderer/src/stores/settingsStore.js      |  17 +-
 src/renderer/src/stores/snippetStore.js       |  23 +++
 src/renderer/src/styles/themes.css            | 131 ++++++++++----
 src/renderer/src/styles/tokens.css            |   8 +
 src/renderer/src/styles/ui.css                |  20 +++
 src/renderer/src/utils/mermaid.js             |  11 +-
 src/renderer/src/utils/themes.js              |  49 ++++++
 .../composables/useBackdropClose.test.js      |  46 +++++
 .../composables/useCopyFeedback.test.js       |  51 ++++++
 tests/renderer/stores/diffStore.test.js       |  27 ++-
 tests/renderer/stores/settingsStore.test.js   |  10 ++
 tests/renderer/stores/snippetStore.test.js    |  25 +++
 tests/renderer/utils/mermaid.test.js          |   3 +-
 tests/renderer/utils/themes.test.js           |  41 +++++
 76 files changed, 1655 insertions(+), 248 deletions(-)
 create mode 100644 e2e/fixtures.mjs
 create mode 100644 e2e/settings.spec.mjs
 create mode 100644 e2e/smoke.spec.mjs
 create mode 100644 e2e/snippets.spec.mjs
 create mode 100644 e2e/theme.spec.mjs
 create mode 100644 playwright.config.mjs
 create mode 100644 src/main/clipboard.js
 create mode 100644 src/renderer/src/components/AppIcon.vue
 create mode 100644 src/renderer/src/components/styles/AppIcon.css
 create mode 100644 src/renderer/src/composables/useBackdropClose.js
 create mode 100644 src/renderer/src/composables/useCopyFeedback.js
 create mode 100644 src/renderer/src/icons.js
 create mode 100644 src/renderer/src/monaco-mermaid.js
 create mode 100644 src/renderer/src/utils/themes.js
 create mode 100644 tests/renderer/composables/useBackdropClose.test.js
 create mode 100644 tests/renderer/composables/useCopyFeedback.test.js
 create mode 100644 tests/renderer/utils/themes.test.js

diff --git a/.gitignore b/.gitignore
index aa06506..0c1cfb2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,8 @@ node_modules/
 build/
 dist/
 coverage/
+test-results/
+playwright-report/
 .claude/settings.local.json
 .DS_Store
 *.log
diff --git a/CLAUDE.md b/CLAUDE.md
index 8167af4..58a4d7a 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -70,6 +70,24 @@ Monaco. Roadmap lives in `DEVELOPMENT_PLAN.md` — keep its checkboxes current.
   hardcoded color, font-size or radius in `components/styles/` — add a token
   rather than a literal, or `/* token-exempt: reason */` when a literal is
   genuinely right. New UI must be checked in both themes.
+- **Alignment.** Any full-width horizontal strip (toolbar, file-slots row,
+  section header, dialog header) is a *band*: it carries `.band` and vertically
+  centres its content with flexbox. Never fake vertical alignment with top
+  padding — it drifts the instant a font size or line-height changes (that is
+  what twice broke the sidebar/file-input alignment). Bands that sit at the
+  same vertical position across the sidebar/main divider share a height so
+  their content lines up by construction: the file-slots row and EVERY sidebar
+  section header add `.band-row` (height `--band-row`), so the headers all
+  match each other and the first lines up with the file inputs. Controls
+  sharing a band row must be
+  equal-height flex-centred boxes.
+- **Icons are SVG, never Unicode glyphs.** A symbol like ◈ / ⧉ / 🔒 tofus into a
+  `[]` box on any font that lacks it, which kept happening. Every icon comes
+  from `<AppIcon name="…" />`, whose geometry lives in `src/renderer/src/icons.js`
+  (Feather/Lucide-style 24×24, sizes to 1em, inherits `currentColor`). Add a new
+  icon by adding an entry to that map — never reach for a glyph character. Text
+  glyphs used as *prose* (⌘ in a shortcut label, ↔ in a diff name, the − on the
+  deletions count) stay text; only standalone/interactive icons are SVG.
 - Every modal is a `BaseDialog` (backdrop, header, `#actions` slot, Escape,
   focus trap). Its panel is BaseDialog's, so a dialog sizes itself with the
   `width` prop — scoped CSS cannot reach into a child. `:escape-closes="false"`
@@ -98,9 +116,19 @@ Monaco. Roadmap lives in `DEVELOPMENT_PLAN.md` — keep its checkboxes current.
   in the Docker env.
 - Vitest, jsdom environment (`tests/setup.js` provides localStorage — Node's
   built-in one is broken in workers). The tree under `tests/` mirrors `src/`:
-  `tests/main/`, `tests/renderer/{stores,utils,adapters}/`. A new test goes
-  in the directory matching its subject's source path. Fixtures live in
-  `tests/data/`.
+  `tests/main/`, `tests/renderer/{stores,utils,adapters,composables}/`. A new
+  test goes in the directory matching its subject's source path. Fixtures live
+  in `tests/data/`.
+- **Interaction bugs split two ways, and each has a home — this is how the
+  recurring UI regressions get caught.** *Event logic* (does a backdrop click
+  close only when the press began on the backdrop? does Space commit a tag?
+  does Escape leave the snippet editor open?) is pulled OUT of the `.vue` file
+  into a `composables/` unit and unit-tested there — never left inline where
+  nothing exercises it. The Mermaid-viewer resize-closes bug became
+  `useBackdropClose` + `useBackdropClose.test.js`; follow that pattern for any
+  new event guard. *Layout* (alignment, sizing, overlap) can't be asserted in
+  jsdom — verify it in the Docker env with screenshots, and encode the
+  invariant as a shared class/token (see the band system) so it can't drift.
 - Every behavior change in `src/main/sealing.js`, `vaultCrypt.js`, the
   Pinia stores, or the adapters needs a test in the same change. Crypto
   code additionally needs negative tests (tamper, wrong key, expiry).
@@ -110,6 +138,17 @@ Monaco. Roadmap lives in `DEVELOPMENT_PLAN.md` — keep its checkboxes current.
 - UI-level changes are verified in the Docker test env (screenshots via
   `xdotool`/`scrot` inside the container; keyboard via `xdotool`, not the
   noVNC page — see `docker/README.md`).
+- **End-to-end** tests live in `e2e/` (Playwright driving the app's OWN
+  Electron via `_electron` — no bundled browser, no network). `make e2e`
+  builds then runs them INSIDE the up container (they need Xvfb :99, so they
+  can't use the one-off `make check`/`test` container). Each test launches its
+  own Electron against a throwaway `--user-data-dir`, so runs never touch the
+  developer's real data and never fight the single-instance lock. Reach for E2E
+  for a flow only a real launch exercises (preload/IPC round-trips, persistence
+  across relaunch, OS-clipboard writes) — the kind of bug jsdom can't see. E2E
+  is trusted-click, so `navigator.clipboard` writes there hit the deny-all
+  permission handler and fail: clipboard writes go through `window.api.copyText`
+  (main process, `src/main/clipboard.js`), never `navigator.clipboard`.
 
 ## Workflow
 
@@ -128,5 +167,10 @@ Monaco. Roadmap lives in `DEVELOPMENT_PLAN.md` — keep its checkboxes current.
   work around npm dropping them from the lock (they are transitive
   optionals of vitest's wasm toolchain) — do not remove them just because
   nothing imports them.
+- Playwright drives the app's own Electron, never a bundled browser, so its
+  ~400 MB browser download is skipped via `PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1`
+  (set in `docker/Dockerfile` before `npm ci`, and pass it when adding/updating
+  deps). Never run `playwright install` — it would pull Chromium/Firefox/WebKit
+  the suite doesn't use.
 - Update `README.md` (including the mermaid diagram) and
   `DEVELOPMENT_PLAN.md` when architecture or feature status changes.
diff --git a/DEVELOPMENT_PLAN.md b/DEVELOPMENT_PLAN.md
index 700ee46..3e9c638 100644
--- a/DEVELOPMENT_PLAN.md
+++ b/DEVELOPMENT_PLAN.md
@@ -105,9 +105,20 @@ First run: `npm install && npm run dev`
       adapters); ESLint flat config with security rules (renderer banned
       from Node/Electron imports, no v-html/eval) + Prettier;
       `npm run check` = lint + tests; CLAUDE.md encodes the guidelines.
-- [x] Light/dark theme toggle (Monaco `vs` / `vs-dark` + CSS variables on
-      `:root[data-theme]`; toolbar button + View menu + Ctrl/Cmd+D; choice
-      persisted through the durable data-dir store, so it survives a reinstall)
+- [x] End-to-end suite in `e2e/` (Playwright `_electron`, `make e2e`): drives
+      the built app in an isolated `--user-data-dir`, no bundled browser / no
+      network. Covers launch smoke, the Settings domain-pane rail, theme apply +
+      persistence across a relaunch, and the snippet copy "Copied" flash. Caught
+      a real shipping bug — `navigator.clipboard.writeText` is denied by the
+      deny-all permission handler, so all clipboard writes now go through the
+      main process (`src/main/clipboard.js`, `window.api.copyText`).
+- [x] Five selectable themes (Light default, Dark, Solar, Neon, Contrast) —
+      registry in `utils/themes.js`, palette per theme on `:root[data-theme]`,
+      Monaco/Mermaid ground keyed off `isDarkTheme`; picked in Settings →
+      Appearance (swatch previews), Ctrl/Cmd+D still flips light↔dark; choice
+      persisted through the durable data-dir store, so it survives a reinstall
+- [x] Settings split into domain panes behind a left rail (Appearance /
+      Storage / Limits) so the window stays scannable
 - [x] Re-read files on window focus (quiet re-read: no large-file prompt,
       silent skip if the file vanished; toast when the diff was reloaded)
 - [x] Window state persistence (size/position/maximized in
@@ -122,7 +133,8 @@ First run: `npm install && npm run dev`
 
 - [x] Encrypted, tagged snippet library ("quiet shelves" sidebar: ★ Favorites +
       All snippets, newest-first, collapsible tag filter that composes with
-      search, hover preview that decrypts on demand)
+      search, hover preview that decrypts on demand; copy-to-clipboard shows a
+      transient "Copied" flash at the row via unit-tested `useCopyFeedback`)
 - [x] Mermaid diagram rendering for `mermaid` snippets — lazy-loaded (dynamic
       `import`, its own build chunks; nothing added to the main bundle), runs
       **offline under the strict CSP with no `unsafe-eval`** (verified against
@@ -146,6 +158,9 @@ First run: `npm install && npm run dev`
 - [x] Partial paste mode: diff pasted text against a dropped/chosen file
 - [x] Tools menu grouped per format (Base64 / JSON / XML / SQL / Text
       Encryption); Help → Keyboard Shortcuts lists bindings for the host OS
+- [x] Help → Report an Issue confirms before leaving the offline sandbox, then
+      hands the fixed repo issue URL to the OS browser (the only outward link;
+      the URL is fixed in main, the renderer can only trigger it)
 - [x] Categories are local-only — never offered or sent in the share flow
 - [x] Color palette split into `styles/themes.css` (structure stays in
       `tokens.css`), plus app-wide `.section-actions` spacing so no section's
diff --git a/Makefile b/Makefile
index e426c5c..601078e 100644
--- a/Makefile
+++ b/Makefile
@@ -13,7 +13,7 @@ VNC_URL := http://localhost:6080/vnc.html
 RUN_NPM := docker compose run --rm --entrypoint npm $(SERVICE)
 
 .PHONY: help install test-env test-env-detached up stop down restart rebuild logs shell \
-        clean dev check test lint build package-win package-linux package-mac audit-fix brew-cask
+        clean dev check test e2e lint build package-win package-linux package-mac audit-fix brew-cask
 
 help: ## List available targets
 	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | \
@@ -83,6 +83,12 @@ check: ## Lint + tests in the container (run before declaring a task done)
 test: ## Run the test suite in the container
 	$(RUN_NPM) -- test
 
+# Unlike `check`/`test`, E2E needs the virtual display, so it runs INSIDE the
+# up container (which owns Xvfb :99) rather than a one-off `run` container.
+# `up` is a dependency so the display is guaranteed to be there first.
+e2e: up ## Build + drive the app end-to-end with Playwright in the running container
+	docker compose exec -T $(SERVICE) npm run test:e2e
+
 lint: ## Run ESLint in the container
 	$(RUN_NPM) -- run lint
 
@@ -124,10 +130,6 @@ package-mac: ## Build the macOS DMG -> dist/ (must run natively on macOS)
 		exit 1; }
 	npm run build:mac
 
-# Regenerate the Homebrew cask (packaging/homebrew/diff-bro.rb) with the current
-# version and the sha256 of the released DMG. Runs on the host (plain node, no
-# deps). By default it downloads the tagged release asset; pass a local DMG with
-# DMG=dist/Diff-Bro-macOS.dmg to hash that instead. Override the version with
-# VERSION=x.y.z. CI does this automatically on release (see release.yml).
+# Regenerate the Homebrew cask (packaging/homebrew/diff-bro.rb) with the current tag version
 brew-cask: ## Regenerate the Homebrew cask for the current (or VERSION=x.y.z) release
 	node scripts/gen-homebrew-cask.mjs $(VERSION) $(if $(DMG),--dmg $(DMG),)
diff --git a/README.md b/README.md
index 26d8031..86820a2 100644
--- a/README.md
+++ b/README.md
@@ -64,7 +64,8 @@ Builds are **unsigned** for now (no Apple/Microsoft cert yet):
 - **Paste mode** compares two pasted snippets, or mixes the two — paste one
   side and drop/choose a real file on the other (partial paste).
 - **Drag & drop** files onto the window (two at once builds the diff; a third
-  starts over). Fixed, single window; light/dark themes; clamped zoom.
+  starts over). Fixed, single window; five themes (Light, Dark, Solar, Neon,
+  Contrast) picked in Settings → Appearance; clamped zoom.
 - **Saved diffs** — AES-256-GCM encrypted at rest, auto-expiring (≤ 24 h),
   organized into drag-reorderable categories, favoritable. Categories are a
   local organizing tool and never travel with a shared diff.
@@ -81,9 +82,9 @@ Builds are **unsigned** for now (no Apple/Microsoft cert yet):
 - **Tools** — grouped by format (Base64, and JSON / XML / SQL format+validate,
   Monaco-highlighted, with "Add to Snippets"), plus a passphrase text
   Encrypt/Decrypt. **Help → Keyboard Shortcuts** lists every binding for your OS.
-- **Settings** — plaintext `settings.json` (data folder, shortcut-bar
-  visibility, and user-raisable comparison-file / snippet size limits with safe
-  defaults).
+- **Settings** — split into Appearance / Storage / Limits panes; backed by a
+  plaintext `settings.json` (theme, data folder, shortcut-bar visibility, and
+  user-raisable comparison-file / snippet size limits with safe defaults).
 - **Config backup/restore** — one passphrase-encrypted file for your keys,
   trusted hosts, snippets and settings (not diffs).
 
@@ -116,6 +117,11 @@ No local Node? The same flow runs in Docker: `make dev` (app via noVNC at
 <http://localhost:6080/vnc.html>) and `make check`. See
 [docker/README.md](docker/README.md) and `make help`.
 
+End-to-end tests (`make e2e`) drive the built app through Playwright's Electron
+integration in the Docker display env — launch smoke, Settings panes, theme
+persistence, snippet copy. No bundled browser and no network, in keeping with
+the offline guarantee.
+
 ## Docs
 
 - [Architecture](docs/architecture.md) — processes, trust boundary, directory map.
diff --git a/docker/Dockerfile b/docker/Dockerfile
index ecea95c..c9a6663 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -34,6 +34,11 @@ WORKDIR /app
 # by one fails `npm ci` under the other. One resolver everywhere.
 RUN npm install -g npm@11
 
+# The E2E suite drives the app's own Electron (playwright's `_electron`), never
+# a bundled browser — so skip Playwright's ~400 MB Chromium/Firefox/WebKit
+# download at install time. Keeps the image lean and the build offline-light.
+ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1
+
 # Install dependencies at image-build time so the node_modules volume that
 # shadows the host's (Windows) node_modules starts out populated with the
 # Linux Electron binaries.
diff --git a/e2e/fixtures.mjs b/e2e/fixtures.mjs
new file mode 100644
index 0000000..9850688
--- /dev/null
+++ b/e2e/fixtures.mjs
@@ -0,0 +1,51 @@
+import { test as base, _electron as electron, expect } from '@playwright/test'
+import { mkdtempSync, rmSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const ROOT = fileURLToPath(new URL('..', import.meta.url))
+const MAIN = join(ROOT, 'build', 'main', 'index.js')
+
+// A throwaway userData dir so a run never reads or clobbers the developer's real
+// vault/keys/snippets, and its single-instance lock never collides with a
+// Diff Bro that's already open.
+export const freshUserDataDir = () => mkdtempSync(join(tmpdir(), 'diffbro-e2e-'))
+
+// Launch the BUILT app against a given userData dir. `--user-data-dir` is a
+// Chromium switch Electron honours for app.getPath('userData'), which is what
+// makes each run's data (and its lock) isolated. Reused by the `app` fixture
+// and by tests that need to relaunch the same profile (persistence).
+export const launchApp = (userDataDir) =>
+  electron.launch({ args: [MAIN, `--user-data-dir=${userDataDir}`] })
+
+// The first window, loaded and ready to assert against.
+export async function firstReadyPage(app) {
+  const page = await app.firstWindow()
+  await page.waitForLoadState('domcontentloaded')
+  return page
+}
+
+// Fixtures for the common case: one fresh app + its window, torn down (and the
+// temp profile removed) after the test.
+export const test = base.extend({
+  app: async ({}, use) => {
+    const userDataDir = freshUserDataDir()
+    const app = await launchApp(userDataDir)
+    await use(app)
+    await app.close()
+    rmSync(userDataDir, { recursive: true, force: true })
+  },
+  page: async ({ app }, use) => {
+    await use(await firstReadyPage(app))
+  }
+})
+
+// Open Settings through the same path a user takes: the in-app File menu.
+export async function openSettings(page) {
+  await page.getByRole('button', { name: 'File', exact: true }).click()
+  await page.getByText('Settings', { exact: true }).click()
+  await expect(page.getByRole('dialog', { name: 'Settings' })).toBeVisible()
+}
+
+export { expect }
diff --git a/e2e/settings.spec.mjs b/e2e/settings.spec.mjs
new file mode 100644
index 0000000..ae77ad9
--- /dev/null
+++ b/e2e/settings.spec.mjs
@@ -0,0 +1,26 @@
+import { test, expect, openSettings } from './fixtures.mjs'
+
+// The Settings window is split into domain panes behind a left rail; only the
+// selected pane renders. This guards that the rail actually swaps panes (a
+// layout/interaction seam that used to be one long scroll).
+test.describe('Settings domain panes', () => {
+  test('opens on Appearance and switches panes from the left rail', async ({ page }) => {
+    await openSettings(page)
+
+    // Appearance is the default pane: theme swatches + the shortcut-bar toggle.
+    await expect(page.getByTitle('Use the Light theme')).toBeVisible()
+    await expect(page.getByText('Show the keyboard-shortcut bar over diffs')).toBeVisible()
+    // Other panes' content is not mounted yet.
+    await expect(page.getByRole('heading', { name: 'Data folder' })).toBeHidden()
+
+    // Storage pane.
+    await page.getByRole('button', { name: 'Storage', exact: true }).click()
+    await expect(page.getByRole('heading', { name: 'Data folder' })).toBeVisible()
+    await expect(page.getByTitle('Use the Light theme')).toBeHidden()
+
+    // Limits pane.
+    await page.getByRole('button', { name: 'Limits', exact: true }).click()
+    await expect(page.getByText('Max comparison file (MB)')).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'Data folder' })).toBeHidden()
+  })
+})
diff --git a/e2e/smoke.spec.mjs b/e2e/smoke.spec.mjs
new file mode 100644
index 0000000..6b42c8a
--- /dev/null
+++ b/e2e/smoke.spec.mjs
@@ -0,0 +1,14 @@
+import { test, expect } from './fixtures.mjs'
+
+// The launch smoke test: proves the built main + preload + renderer actually
+// boot together and paint. If window.api (preload) failed to bridge, the
+// renderer dies on mount and the empty-state text below never appears — so this
+// one assertion also guards the IPC surface being present.
+test('boots to the empty-state diff view in a single window', async ({ app, page }) => {
+  expect(app.windows()).toHaveLength(1)
+  await expect(page).toHaveTitle('Diff Bro')
+  await expect(page.getByText('Choose or drop two files to compare.')).toBeVisible()
+  // The snippets shelf renders, which only happens once the preload-backed
+  // stores have hydrated.
+  await expect(page.getByRole('button', { name: '+ New snippet' })).toBeVisible()
+})
diff --git a/e2e/snippets.spec.mjs b/e2e/snippets.spec.mjs
new file mode 100644
index 0000000..1f5692c
--- /dev/null
+++ b/e2e/snippets.spec.mjs
@@ -0,0 +1,20 @@
+import { test, expect } from './fixtures.mjs'
+
+// Copying a snippet shows a transient "Copied" flash at the row. Playwright's
+// clicks are trusted (they carry the user activation the async clipboard API
+// requires), so this exercises the real copy path end to end — the unit test
+// only covers the flash timer, not the wiring. The recurring "did the feedback
+// actually fire?" question gets a real answer here.
+test('copying a snippet flashes "Copied" and then clears', async ({ page }) => {
+  const row = page.getByText('Example — Mermaid diagram')
+  await expect(row).toBeVisible() // the seeded first-run example
+
+  // Row actions only reveal on hover; hover the name, then hit Copy.
+  await row.hover()
+  await page.getByRole('button', { name: 'Copy to clipboard' }).click()
+
+  const flash = page.getByText('Copied', { exact: true })
+  await expect(flash).toBeVisible()
+  // It fades on its own (useCopyFeedback timer), not on another interaction.
+  await expect(flash).toBeHidden()
+})
diff --git a/e2e/theme.spec.mjs b/e2e/theme.spec.mjs
new file mode 100644
index 0000000..50a4863
--- /dev/null
+++ b/e2e/theme.spec.mjs
@@ -0,0 +1,37 @@
+import { rmSync } from 'node:fs'
+import {
+  test,
+  expect,
+  launchApp,
+  freshUserDataDir,
+  firstReadyPage,
+  openSettings
+} from './fixtures.mjs'
+
+// Picking a theme must (1) apply to the document immediately and (2) survive a
+// relaunch — persistence goes through the main-process data-dir store, not just
+// in-memory state, so this drives the whole IPC round-trip. Manages its own
+// launch/relaunch against one profile instead of the per-test `app` fixture.
+test('a chosen theme applies at once and persists across a relaunch', async () => {
+  const userDataDir = freshUserDataDir()
+  try {
+    let app = await launchApp(userDataDir)
+    let page = await firstReadyPage(app)
+
+    // Light is the default ground on a fresh profile.
+    await expect(page.locator('html')).toHaveAttribute('data-theme', 'light')
+
+    await openSettings(page)
+    await page.getByTitle('Use the Neon theme').click()
+    await expect(page.locator('html')).toHaveAttribute('data-theme', 'neon')
+    await app.close()
+
+    // Relaunch the same profile: the choice was written to userData and reloads.
+    app = await launchApp(userDataDir)
+    page = await firstReadyPage(app)
+    await expect(page.locator('html')).toHaveAttribute('data-theme', 'neon')
+    await app.close()
+  } finally {
+    rmSync(userDataDir, { recursive: true, force: true })
+  }
+})
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 85de095..e78d092 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -159,5 +159,16 @@ export default [
   {
     files: ['tests/**', 'vitest.config.mjs', 'eslint.config.mjs'],
     languageOptions: { globals: { ...globals.node, ...globals.browser } }
+  },
+
+  // E2E: Playwright driver code runs in Node and launches the built Electron
+  // app; `test`/`expect` are imported. Page-evaluated callbacks reference
+  // browser globals, so allow both. A fixture that depends on no other fixture
+  // takes Playwright's mandatory `{}` first argument — that empty pattern is the
+  // framework idiom, not a mistake.
+  {
+    files: ['e2e/**', 'playwright.config.mjs'],
+    languageOptions: { globals: { ...globals.node, ...globals.browser } },
+    rules: { 'no-empty-pattern': 'off' }
   }
 ]
diff --git a/package-lock.json b/package-lock.json
index d970c50..df7f03c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "@emnapi/core": "^1.11.2",
         "@emnapi/runtime": "^1.11.2",
         "@eslint/js": "^10.0.1",
+        "@playwright/test": "^1.61.1",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vitest/coverage-v8": "^4.1.10",
         "electron": "^39.8.10",
@@ -1866,6 +1867,22 @@
         "node": ">=14.18.0"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.61.1.tgz",
+      "integrity": "sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.1.5.tgz",
@@ -7655,6 +7672,53 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
+      "integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz",
+      "integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/plist": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz",
diff --git a/package.json b/package.json
index efa8f4c..677923b 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
+    "test:e2e": "electron-vite build && playwright test",
     "lint": "eslint .",
     "check:styles": "node scripts/check-style-tokens.mjs",
     "format": "prettier --write \"src/**/*.{js,vue,css}\" \"tests/**/*.js\" \"*.mjs\"",
@@ -37,6 +38,7 @@
     "@emnapi/core": "^1.11.2",
     "@emnapi/runtime": "^1.11.2",
     "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.61.1",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitest/coverage-v8": "^4.1.10",
     "electron": "^39.8.10",
diff --git a/playwright.config.mjs b/playwright.config.mjs
new file mode 100644
index 0000000..7ca3eb1
--- /dev/null
+++ b/playwright.config.mjs
@@ -0,0 +1,23 @@
+import { defineConfig } from '@playwright/test'
+
+// End-to-end tests drive the app's OWN Electron build through Playwright's
+// `_electron` (see e2e/fixtures.mjs) — there is no web server and no bundled
+// browser, so nothing here downloads or launches Chromium/Firefox/WebKit.
+//
+// Run them in the Docker test env (`make e2e`), where a virtual display is up
+// and DIFFBRO_DOCKER applies the headless Chromium switches. Each test launches
+// its own Electron instance against a throwaway userData dir, so runs never
+// touch the developer's real keys/snippets/diffs and never fight the
+// single-instance lock of a running Diff Bro.
+export default defineConfig({
+  testDir: './e2e',
+  testMatch: /.*\.spec\.mjs$/,
+  // Every test spawns a full Electron process; serial keeps the container calm
+  // and the assertions deterministic.
+  fullyParallel: false,
+  workers: 1,
+  forbidOnly: !!process.env.CI,
+  timeout: 30_000,
+  expect: { timeout: 8_000 },
+  reporter: process.env.CI ? [['list'], ['github']] : [['list']]
+})
diff --git a/src/main/clipboard.js b/src/main/clipboard.js
new file mode 100644
index 0000000..9354420
--- /dev/null
+++ b/src/main/clipboard.js
@@ -0,0 +1,24 @@
+import { clipboard, ipcMain } from 'electron'
+
+// Writing the OS clipboard is a main-process job, exposed as window.api.copyText.
+//
+// The renderer cannot use navigator.clipboard: the deny-all permission handler
+// (security.js — never weakened, CLAUDE.md rule 1) blocks
+// clipboard-sanitized-write, so writeText() rejects with NotAllowedError. Doing
+// the write here sidesteps that without touching the permission handler, and
+// keeps OS access on the main side of the IPC boundary (rule 3). It is a
+// local-only operation — no network — so the offline guarantees are unchanged.
+//
+// Cap defensively: clipboard payloads here are already size-bounded upstream
+// (snippet / tool output), but never hand an unbounded renderer string to the OS.
+const MAX_CLIPBOARD_BYTES = 10 * 1024 * 1024
+
+export function registerClipboardIpc() {
+  ipcMain.handle('clipboard:write', (_e, text) => {
+    if (typeof text !== 'string' || Buffer.byteLength(text, 'utf8') > MAX_CLIPBOARD_BYTES) {
+      return { ok: false }
+    }
+    clipboard.writeText(text)
+    return { ok: true }
+  })
+}
diff --git a/src/main/index.js b/src/main/index.js
index 7f814f2..61223ba 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -13,6 +13,7 @@ import { createWindow } from './window'
 import { registerAppDataIpc } from './appData'
 import { installMenu, registerMenuIpc } from './menu'
 import { registerVaultIpc } from './vault'
+import { registerClipboardIpc } from './clipboard'
 import { registerFileIpc } from './files'
 import { registerTextToolsIpc } from './textTools'
 import { registerShareIpc } from './share'
@@ -21,13 +22,25 @@ import { registerSnippetIpc } from './snippets'
 // Must run before app ready, while the command line is still mutable.
 applyHeadlessSwitches()
 
-// Only one instance/window: a second launch (double-clicking the exe again,
-// or the installer's "run after install" while one is already open) hands
-// its args off here and quits instead of opening a second window.
-if (!app.requestSingleInstanceLock()) {
+// Only one instance/window. A second launch hands its args (and its version)
+// off to the running instance and quits instead of opening a second window.
+//
+// The version is how an update takes effect: with no auto-updater (offline by
+// design), a user installs a new build and launches it while the old one is
+// still running. That new launch loses the single-instance race and quits —
+// which, without the check below, would leave the STALE old UI on screen. So
+// when the incoming version differs from ours, the running instance relaunches
+// from its own path (which the installer has just replaced) to load the new
+// build, giving the user the updated app instead of the old one.
+if (!app.requestSingleInstanceLock({ version: app.getVersion() })) {
   app.quit()
 } else {
-  app.on('second-instance', () => {
+  app.on('second-instance', (_event, _argv, _cwd, additionalData) => {
+    if (additionalData?.version && additionalData.version !== app.getVersion()) {
+      app.relaunch()
+      app.exit(0)
+      return
+    }
     const win = BrowserWindow.getAllWindows()[0]
     if (!win) return
     if (win.isMinimized()) win.restore()
@@ -40,6 +53,7 @@ if (!app.requestSingleInstanceLock()) {
     installMenu()
     registerMenuIpc()
     registerVaultIpc()
+    registerClipboardIpc()
     registerFileIpc()
     registerTextToolsIpc()
     registerShareIpc()
diff --git a/src/main/menu.js b/src/main/menu.js
index ac9908f..732a925 100644
--- a/src/main/menu.js
+++ b/src/main/menu.js
@@ -1,4 +1,29 @@
-import { BrowserWindow, Menu, app, ipcMain, systemPreferences } from 'electron'
+import { BrowserWindow, Menu, app, dialog, ipcMain, shell, systemPreferences } from 'electron'
+
+// Where "Report an Issue" sends the user. The URL is fixed here in the main
+// process — the renderer can ask to open it but can never pass a URL of its own,
+// so this adds no open-any-URL surface. shell.openExternal hands the address to
+// the OS browser; the app itself still makes no network request, so the offline
+// guarantee (and the network kill switch, CSP, will-navigate block …) is intact.
+const ISSUE_URL = 'https://github.com/mindaugaskasp/diff-bro/issues/new'
+
+// Report an Issue is the one action that leaves the offline sandbox — it hands
+// the fixed URL to the OS browser, which does connect to the internet. Confirm
+// first so that departure is always the user's explicit choice, never a silent
+// side effect of a menu click.
+async function promptAndOpenIssue(win) {
+  const parent = win ?? BrowserWindow.getFocusedWindow()
+  const { response } = await dialog.showMessageBox(parent, {
+    type: 'question',
+    buttons: ['Cancel', 'Open in browser'],
+    defaultId: 1,
+    cancelId: 0,
+    title: 'Report an Issue',
+    message: 'Open the issue tracker in your browser?',
+    detail: `Diff Bro itself stays offline. This opens your web browser (which does connect to the internet) at:\n\n${ISSUE_URL}`
+  })
+  if (response === 1) shell.openExternal(ISSUE_URL)
+}
 
 // --- App menu: file actions forwarded to the renderer over IPC ---
 //
@@ -208,7 +233,11 @@ export function installMenu() {
     {
       role: 'help',
       label: 'Help',
-      submenu: [{ label: 'Keyboard Shortcuts', click: () => sendToFocused('shortcuts') }]
+      submenu: [
+        { label: 'Keyboard Shortcuts', click: () => sendToFocused('shortcuts') },
+        { type: 'separator' },
+        { label: 'Report an Issue', click: (_item, win) => promptAndOpenIssue(win) }
+      ]
     }
   ]
   Menu.setApplicationMenu(Menu.buildFromTemplate(template))
@@ -222,6 +251,12 @@ export function registerMenuIpc() {
     if (!app.isPackaged) e.sender.toggleDevTools()
   })
   ipcMain.handle('app:quit', () => app.quit())
+  // The custom menu bar (Windows/Linux) can't call shell itself. The URL is
+  // fixed above; the renderer only triggers it, never chooses it — and the
+  // confirm prompt still gates the actual browser launch.
+  ipcMain.handle('app:reportIssue', (e) =>
+    promptAndOpenIssue(BrowserWindow.fromWebContents(e.sender))
+  )
   // Report packaged state so the renderer can hide dev-only menu entries.
   ipcMain.handle('app:isPackaged', () => app.isPackaged)
 }
diff --git a/src/preload/index.js b/src/preload/index.js
index 292ea9d..3c680b7 100644
--- a/src/preload/index.js
+++ b/src/preload/index.js
@@ -62,11 +62,17 @@ contextBridge.exposeInMainWorld('api', {
   toggleDevTools: () => ipcRenderer.invoke('app:toggleDevTools'),
   isPackaged: () => ipcRenderer.invoke('app:isPackaged'),
   quit: () => ipcRenderer.invoke('app:quit'),
+  // Opens the project's "new issue" page (a fixed URL, chosen in main) in the
+  // OS browser. No URL crosses from the renderer.
+  reportIssue: () => ipcRenderer.invoke('app:reportIssue'),
   // Durable key/value store backed by files in the configurable data directory
   // (so data survives a reinstall). Loads are synchronous so the Pinia stores
   // can read their state during setup, exactly like localStorage did.
   storeLoad: (name) => ipcRenderer.sendSync('store:load', name),
   storeSave: (name, contents) => ipcRenderer.invoke('store:save', name, contents),
+  // Write text to the OS clipboard from the main process (navigator.clipboard
+  // is blocked by the deny-all permission handler; see src/main/clipboard.js).
+  copyText: (text) => ipcRenderer.invoke('clipboard:write', text),
   // Data-location settings.
   dataDirGet: () => ipcRenderer.invoke('datadir:get'),
   dataDirChoose: () => ipcRenderer.invoke('datadir:choose'),
diff --git a/src/renderer/src/App.vue b/src/renderer/src/App.vue
index ef71b05..f83f6ad 100644
--- a/src/renderer/src/App.vue
+++ b/src/renderer/src/App.vue
@@ -1,6 +1,7 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
 import { useDiffStore } from './stores/diffStore'
+import { useSettingsStore } from './stores/settingsStore'
 import { useWindowFileDrop } from './composables/useFileDrop'
 import FileSlot from './components/FileSlot.vue'
 import DiffViewer from './components/DiffViewer.vue'
@@ -16,6 +17,7 @@ import { MOD, isMac } from './keys'
 
 const store = useDiffStore()
 const snippets = useSnippetStore()
+const settings = useSettingsStore()
 
 store.initTheme()
 window.api.onMenuAction((action) => store.handleMenuAction(action))
@@ -23,6 +25,18 @@ window.api.onMenuAction((action) => store.handleMenuAction(action))
 // external edits show up without reopening anything.
 window.addEventListener('focus', () => store.refreshFromDisk())
 
+// First run: greet a brand-new, empty library with the example snippet, then
+// record the one-time decision so it is never re-seeded — and never injected
+// next to an existing user's own snippets.
+onMounted(async () => {
+  if (settings.examplesSeeded) return
+  if (snippets.entries.length === 0) {
+    const id = await snippets.seedExample()
+    if (!id) return // vault key not ready — leave the flag unset and retry next launch
+  }
+  settings.markExamplesSeeded()
+})
+
 // The sidebar is a fixed width (see SavedDiffs.vue) — deliberately not
 // resizable, so the layout stays predictable across sessions.
 
@@ -62,7 +76,7 @@ const {
     <div class="body">
       <SavedDiffs />
       <main class="content">
-        <div v-if="store.mode !== 'paste'" class="file-slots-row">
+        <div v-if="store.mode !== 'paste'" class="file-slots-row band band-row">
           <div class="slot-half">
             <FileSlot
               side="left"
diff --git a/src/renderer/src/components/AppIcon.vue b/src/renderer/src/components/AppIcon.vue
new file mode 100644
index 0000000..6a48f22
--- /dev/null
+++ b/src/renderer/src/components/AppIcon.vue
@@ -0,0 +1,56 @@
+<script setup>
+// One SVG icon from the shared set (see ../icons.js). Sizes to 1em and inherits
+// currentColor, so it drops in wherever a text glyph used to sit. Explicit
+// element tags (not <component :is>) keep every child in the SVG namespace.
+import { ICONS } from '../icons'
+
+defineProps({
+  name: { type: String, required: true },
+  // Decorative labels supply a title via the button; a standalone icon that
+  // carries meaning on its own can pass one here.
+  title: { type: String, default: '' }
+})
+</script>
+
+<template>
+  <svg
+    class="app-icon"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :aria-hidden="title ? undefined : 'true'"
+    :aria-label="title || undefined"
+    :role="title ? 'img' : undefined"
+  >
+    <template v-for="(el, i) in ICONS[name]" :key="i">
+      <path
+        v-if="el.t === 'path'"
+        :d="el.d"
+        :fill="el.fill ? 'currentColor' : undefined"
+        :stroke="el.fill ? 'none' : undefined"
+      />
+      <rect
+        v-else-if="el.t === 'rect'"
+        :x="el.x"
+        :y="el.y"
+        :width="el.width"
+        :height="el.height"
+        :rx="el.rx"
+      />
+      <circle
+        v-else-if="el.t === 'circle'"
+        :cx="el.cx"
+        :cy="el.cy"
+        :r="el.r"
+        :fill="el.fill ? 'currentColor' : undefined"
+        :stroke="el.fill ? 'none' : undefined"
+      />
+      <line v-else-if="el.t === 'line'" :x1="el.x1" :y1="el.y1" :x2="el.x2" :y2="el.y2" />
+    </template>
+  </svg>
+</template>
+
+<style scoped src="./styles/AppIcon.css"></style>
diff --git a/src/renderer/src/components/AppToolbar.vue b/src/renderer/src/components/AppToolbar.vue
index 55286ea..d4a30ee 100644
--- a/src/renderer/src/components/AppToolbar.vue
+++ b/src/renderer/src/components/AppToolbar.vue
@@ -9,7 +9,7 @@ const store = useDiffStore()
 </script>
 
 <template>
-  <header class="toolbar">
+  <header class="toolbar band">
     <span v-if="store.ready && store.stats" class="stats">
       <span class="add">+{{ store.stats.additions }}</span>
       <span class="del">−{{ store.stats.deletions }}</span>
@@ -60,17 +60,6 @@ const store = useDiffStore()
           Clear
         </button>
       </div>
-
-      <span class="divider" />
-
-      <!-- Appearance -->
-      <button
-        class="icon-btn"
-        :title="`Switch to ${store.theme === 'dark' ? 'light' : 'dark'} theme (${MOD}+D)`"
-        @click="store.toggleTheme()"
-      >
-        {{ store.theme === 'dark' ? '☀' : '🌙' }}
-      </button>
     </div>
   </header>
 </template>
diff --git a/src/renderer/src/components/Base64Dialog.vue b/src/renderer/src/components/Base64Dialog.vue
index c7ab108..cf499ba 100644
--- a/src/renderer/src/components/Base64Dialog.vue
+++ b/src/renderer/src/components/Base64Dialog.vue
@@ -42,7 +42,7 @@ function useOutputAsInput() {
 }
 
 async function copyOutput() {
-  await navigator.clipboard.writeText(output.value)
+  await window.api.copyText(output.value)
   store.showNotice('Copied to clipboard.')
 }
 
diff --git a/src/renderer/src/components/BaseDialog.vue b/src/renderer/src/components/BaseDialog.vue
index 47706f6..73916de 100644
--- a/src/renderer/src/components/BaseDialog.vue
+++ b/src/renderer/src/components/BaseDialog.vue
@@ -5,6 +5,7 @@
 // Escape closes by default. Dialogs holding unsaved input (the snippet editor)
 // pass :escape-closes="false" so a stray keypress can't discard typing.
 import { onBeforeUnmount, onMounted, ref } from 'vue'
+import AppIcon from './AppIcon.vue'
 
 const props = defineProps({
   title: { type: String, required: true },
@@ -71,7 +72,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown, true))
           aria-label="Close"
           @click="emit('close')"
         >
-          ×
+          <AppIcon name="x" />
         </button>
       </div>
       <slot />
diff --git a/src/renderer/src/components/DiffViewer.vue b/src/renderer/src/components/DiffViewer.vue
index 985af78..598a9ee 100644
--- a/src/renderer/src/components/DiffViewer.vue
+++ b/src/renderer/src/components/DiffViewer.vue
@@ -3,6 +3,8 @@ import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
 import * as monaco from 'monaco-editor'
 import { useDiffStore } from '../stores/diffStore'
 import { makeSearch } from '../composables/useDiffSearch'
+import { isDarkTheme } from '../utils/themes'
+import AppIcon from './AppIcon.vue'
 
 const store = useDiffStore()
 const container = ref(null)
@@ -41,7 +43,7 @@ function setModels() {
 
 onMounted(() => {
   editor = monaco.editor.createDiffEditor(container.value, {
-    theme: store.theme === 'light' ? 'vs' : 'vs-dark',
+    theme: isDarkTheme(store.theme) ? 'vs-dark' : 'vs',
     automaticLayout: true,
     readOnly: true,
     originalEditable: false,
@@ -85,7 +87,7 @@ watch(
 )
 watch(
   () => store.theme,
-  (theme) => monaco.editor.setTheme(theme === 'light' ? 'vs' : 'vs-dark')
+  (theme) => monaco.editor.setTheme(isDarkTheme(theme) ? 'vs-dark' : 'vs')
 )
 
 onBeforeUnmount(() => {
@@ -123,7 +125,7 @@ onBeforeUnmount(() => {
         </label>
         <label class="opt" title="Whole word">
           <input v-model="s.ref.wholeWord" type="checkbox" />
-          ⌈W⌋
+          W
         </label>
         <label class="opt" title="Regular expression (limited for safety)">
           <input v-model="s.ref.isRegex" type="checkbox" />
@@ -142,10 +144,10 @@ onBeforeUnmount(() => {
           title="Previous match"
           @click="s.ref.step(-1)"
         >
-          ‹
+          <AppIcon name="chevron-left" />
         </button>
         <button class="nav" :disabled="!s.ref.matchCount" title="Next match" @click="s.ref.step(1)">
-          ›
+          <AppIcon name="chevron-right" />
         </button>
       </div>
     </div>
diff --git a/src/renderer/src/components/EncryptDecryptDialog.vue b/src/renderer/src/components/EncryptDecryptDialog.vue
index 6b875c0..39e3275 100644
--- a/src/renderer/src/components/EncryptDecryptDialog.vue
+++ b/src/renderer/src/components/EncryptDecryptDialog.vue
@@ -60,7 +60,7 @@ function useOutputAsInput() {
 }
 
 async function copyOutput() {
-  await navigator.clipboard.writeText(output.value)
+  await window.api.copyText(output.value)
   store.showNotice('Copied to clipboard.')
 }
 
diff --git a/src/renderer/src/components/ExternalDiffsSection.vue b/src/renderer/src/components/ExternalDiffsSection.vue
index 94433ca..f0c1ea7 100644
--- a/src/renderer/src/components/ExternalDiffsSection.vue
+++ b/src/renderer/src/components/ExternalDiffsSection.vue
@@ -8,6 +8,7 @@ import { useDiffStore } from '../stores/diffStore'
 import SavedDiffRow from './SavedDiffRow.vue'
 import SectionHeader from './SectionHeader.vue'
 import { MOD } from '../keys'
+import AppIcon from './AppIcon.vue'
 
 defineProps({ first: { type: Boolean, default: false } })
 
@@ -46,7 +47,7 @@ const hasImported = computed(() => importedFavs.value.length || importedOthers.v
       </p>
 
       <ul v-if="importedFavs.length" class="favorites-group">
-        <li class="fav-head">★ Favorites</li>
+        <li class="fav-head"><AppIcon name="star-filled" /> Favorites</li>
         <SavedDiffRow v-for="entry in importedFavs" :key="entry.id" :entry="entry" />
       </ul>
 
diff --git a/src/renderer/src/components/KeyboardShortcutsDialog.vue b/src/renderer/src/components/KeyboardShortcutsDialog.vue
index 1e9c1b5..2474364 100644
--- a/src/renderer/src/components/KeyboardShortcutsDialog.vue
+++ b/src/renderer/src/components/KeyboardShortcutsDialog.vue
@@ -18,7 +18,10 @@ function close() {
 
 <template>
   <BaseDialog width="440px" title="Keyboard shortcuts" @close="close">
-    <p class="dialog-note">Shortcuts for <strong>{{ platform }}</strong>.</p>
+    <p class="dialog-note">
+      Shortcuts for <strong>{{ platform }}</strong
+      >.
+    </p>
     <div class="groups">
       <section v-for="g in groups" :key="g.group" class="group">
         <h4>{{ g.group }}</h4>
diff --git a/src/renderer/src/components/MenuBar.vue b/src/renderer/src/components/MenuBar.vue
index d8f4b36..f7bf92e 100644
--- a/src/renderer/src/components/MenuBar.vue
+++ b/src/renderer/src/components/MenuBar.vue
@@ -2,6 +2,7 @@
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { useDiffStore } from '../stores/diffStore'
 import { buildMenus } from '../menus'
+import AppIcon from './AppIcon.vue'
 
 // Themed replacement for the native File/View menu bar on Windows/Linux
 // (macOS keeps the system menu bar). Items mirror the hidden application
@@ -57,7 +58,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
             <div v-else-if="item.items" class="submenu" @mouseenter="openSub = item.label">
               <button class="item" @click="openSub = openSub === item.label ? null : item.label">
                 <span>{{ item.label }}</span>
-                <span class="arrow" aria-hidden="true">›</span>
+                <AppIcon class="arrow" name="chevron-right" />
               </button>
               <div v-if="openSub === item.label" class="dropdown flyout">
                 <button
diff --git a/src/renderer/src/components/MermaidViewerDialog.vue b/src/renderer/src/components/MermaidViewerDialog.vue
index 0e67a82..5ac0aef 100644
--- a/src/renderer/src/components/MermaidViewerDialog.vue
+++ b/src/renderer/src/components/MermaidViewerDialog.vue
@@ -5,7 +5,9 @@
 // panel itself is CSS-resizable so users can size it to the diagram.
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useDiffStore } from '../stores/diffStore'
+import { useBackdropClose } from '../composables/useBackdropClose'
 import MermaidDiagram from './MermaidDiagram.vue'
+import AppIcon from './AppIcon.vue'
 
 const diff = useDiffStore()
 const view = computed(() => diff.mermaidView) // { name, code }
@@ -60,6 +62,9 @@ function close() {
   diff.closeMermaid()
 }
 
+// Close on a backdrop click, but not when a resize drag merely releases there.
+const { onPointerDown: onBackdropDown, onClick: onBackdropClick } = useBackdropClose(close)
+
 function onKey(e) {
   if (e.key === 'Escape') close()
 }
@@ -68,19 +73,23 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey))
 </script>
 
 <template>
-  <div v-if="view" class="viewer-backdrop" @click.self="close">
+  <div v-if="view" class="viewer-backdrop" @pointerdown="onBackdropDown" @click="onBackdropClick">
     <div class="panel" :class="{ maxed }">
       <div class="head">
         <span class="title">{{ view.name || 'Diagram' }}</span>
         <div class="tools">
-          <button class="tbtn" title="Zoom out" @click="zoom(1 / 1.2)">−</button>
+          <button class="tbtn" title="Zoom out" @click="zoom(1 / 1.2)">
+            <AppIcon name="minus" />
+          </button>
           <span class="pct" @click="fit">{{ pct }}%</span>
-          <button class="tbtn" title="Zoom in" @click="zoom(1.2)">+</button>
+          <button class="tbtn" title="Zoom in" @click="zoom(1.2)"><AppIcon name="plus" /></button>
           <button class="tbtn wide" title="Fit to window" @click="fit">Fit</button>
           <button class="tbtn" :title="maxed ? 'Restore size' : 'Maximize'" @click="maxed = !maxed">
-            {{ maxed ? '❐' : '⛶' }}
+            <AppIcon :name="maxed ? 'restore' : 'maximize'" />
+          </button>
+          <button class="tbtn close" title="Close (Esc)" @click="close">
+            <AppIcon name="x" />
           </button>
-          <button class="tbtn close" title="Close (Esc)" @click="close">×</button>
         </div>
       </div>
       <div
diff --git a/src/renderer/src/components/PasteInput.vue b/src/renderer/src/components/PasteInput.vue
index e05c0d3..e806246 100644
--- a/src/renderer/src/components/PasteInput.vue
+++ b/src/renderer/src/components/PasteInput.vue
@@ -5,6 +5,7 @@
 // the window-level diff drop never sees it.
 import { useDiffStore } from '../stores/diffStore'
 import { useFileTextDrop } from '../composables/useFileDrop'
+import AppIcon from './AppIcon.vue'
 
 const store = useDiffStore()
 
@@ -28,7 +29,7 @@ const rightDrop = useFileTextDrop((content, name) =>
           <span class="pane-label">Original</span>
           <template v-if="store.pasteLeftFile">
             <span class="file-name" :title="store.pasteLeftFile.name"
-              >📄 {{ store.pasteLeftFile.name }}</span
+              ><AppIcon name="file" /> {{ store.pasteLeftFile.name }}</span
             >
             <button class="link" @click="store.clearPasteFile('left')">use text</button>
           </template>
@@ -53,7 +54,7 @@ const rightDrop = useFileTextDrop((content, name) =>
           <span class="pane-label">Changed</span>
           <template v-if="store.pasteRightFile">
             <span class="file-name" :title="store.pasteRightFile.name"
-              >📄 {{ store.pasteRightFile.name }}</span
+              ><AppIcon name="file" /> {{ store.pasteRightFile.name }}</span
             >
             <button class="link" @click="store.clearPasteFile('right')">use text</button>
           </template>
diff --git a/src/renderer/src/components/SavedDiffRow.vue b/src/renderer/src/components/SavedDiffRow.vue
index f45a318..b12179f 100644
--- a/src/renderer/src/components/SavedDiffRow.vue
+++ b/src/renderer/src/components/SavedDiffRow.vue
@@ -7,6 +7,7 @@ import { useVaultStore } from '../stores/vaultStore'
 import { useDiffStore } from '../stores/diffStore'
 import { useDataDir } from '../composables/useDataDir'
 import { shaped } from '../utils/props'
+import AppIcon from './AppIcon.vue'
 
 const props = defineProps({
   /** @type {import('vue').PropType<import('../types').VaultEntry>} */
@@ -51,7 +52,7 @@ async function open() {
       :title="entry.favorite ? 'Unfavorite' : 'Favorite (pin to top)'"
       @click="vault.toggleFavorite(entry.id)"
     >
-      {{ entry.favorite ? '★' : '☆' }}
+      <AppIcon :name="entry.favorite ? 'star-filled' : 'star'" />
     </button>
     <button class="entry" :title="title" @click="open">
       <span class="name">{{ entry.name }}</span>
@@ -66,14 +67,14 @@ async function open() {
       title="Share as sealed file"
       @click="diff.shareEntry(entry.id)"
     >
-      ↑
+      <AppIcon name="share" />
     </button>
     <button
       class="row-btn delete"
       title="Delete now"
       @click="vault.requestDelete('entry', entry.id, entry.name)"
     >
-      ×
+      <AppIcon name="x" />
     </button>
   </li>
 </template>
diff --git a/src/renderer/src/components/SavedDiffsSection.vue b/src/renderer/src/components/SavedDiffsSection.vue
index 98f6499..ebcd16d 100644
--- a/src/renderer/src/components/SavedDiffsSection.vue
+++ b/src/renderer/src/components/SavedDiffsSection.vue
@@ -9,6 +9,7 @@ import { useSettingsStore } from '../stores/settingsStore'
 import SavedDiffRow from './SavedDiffRow.vue'
 import SectionHeader from './SectionHeader.vue'
 import { MOD } from '../keys'
+import AppIcon from './AppIcon.vue'
 
 defineProps({ first: { type: Boolean, default: false } })
 
@@ -89,7 +90,7 @@ function onDrop(targetId) {
       @toggle="open = !open"
     >
       <template #actions>
-        <span class="lock" title="Encrypted at rest, auto-expiring">🔒</span>
+        <AppIcon class="lock" name="lock" title="Encrypted at rest, auto-expiring" />
       </template>
     </SectionHeader>
 
@@ -119,7 +120,7 @@ function onDrop(targetId) {
       </p>
 
       <ul v-if="vault.favoritesOwn.length" class="favorites-group">
-        <li class="fav-head">★ Favorites</li>
+        <li class="fav-head"><AppIcon name="star-filled" /> Favorites</li>
         <SavedDiffRow v-for="entry in vault.favoritesOwn" :key="entry.id" :entry="entry" />
       </ul>
 
@@ -136,9 +137,14 @@ function onDrop(targetId) {
           @drop.prevent="onDrop(category.id)"
         >
           <div class="category-head">
-            <span class="grip" title="Drag to reorder">⠿</span>
+            <AppIcon class="grip" name="grip" title="Drag to reorder" />
             <button class="cat-toggle" @click="toggle(category.id)">
-              <span class="chevron" :class="{ open: isExpanded(category.id) }">▸</span>
+              <AppIcon
+                class="chevron"
+                :class="{ open: isExpanded(category.id) }"
+                name="chevron-right"
+              />
+              <AppIcon class="folder" name="folder" />
               <span class="cat-name">{{ category.name }}</span>
               <span class="count">{{ vault.activeInCategory(category.id).length }}</span>
             </button>
@@ -148,7 +154,7 @@ function onDrop(targetId) {
               :title="deleteCategoryTitle(category)"
               @click="vault.requestDelete('category', category.id, category.name)"
             >
-              ×
+              <AppIcon name="x" />
             </button>
           </div>
           <ul v-if="isExpanded(category.id)" class="diff-list">
diff --git a/src/renderer/src/components/SectionHeader.vue b/src/renderer/src/components/SectionHeader.vue
index 3447128..9cd0dad 100644
--- a/src/renderer/src/components/SectionHeader.vue
+++ b/src/renderer/src/components/SectionHeader.vue
@@ -5,6 +5,7 @@
 // and behave identically.
 import { computed } from 'vue'
 import { useSettingsStore } from '../stores/settingsStore'
+import AppIcon from './AppIcon.vue'
 
 const props = defineProps({
   sectionId: { type: String, required: true },
@@ -24,10 +25,10 @@ const canDown = computed(
 </script>
 
 <template>
-  <div class="head section-head" :class="{ first }" @click="$emit('toggle')">
-    <span class="chev" :class="{ open }">▸</span>
+  <div class="head section-head band band-row" :class="{ first }" @click="$emit('toggle')">
+    <AppIcon class="chev" :class="{ open }" name="chevron-right" />
     <span class="section-title">{{ title }}</span>
-    <slot name="actions" />
+    <span v-if="$slots.actions" class="actions-slot"><slot name="actions" /></span>
     <span class="reorder">
       <button
         class="reorder-btn"
@@ -35,7 +36,7 @@ const canDown = computed(
         title="Move section up"
         @click.stop="settings.moveSection(sectionId, -1)"
       >
-        ▲
+        <AppIcon name="chevron-up" />
       </button>
       <button
         class="reorder-btn"
@@ -43,7 +44,7 @@ const canDown = computed(
         title="Move section down"
         @click.stop="settings.moveSection(sectionId, 1)"
       >
-        ▼
+        <AppIcon name="chevron-down" />
       </button>
     </span>
   </div>
diff --git a/src/renderer/src/components/SettingsDialog.vue b/src/renderer/src/components/SettingsDialog.vue
index 215eaa4..7542112 100644
--- a/src/renderer/src/components/SettingsDialog.vue
+++ b/src/renderer/src/components/SettingsDialog.vue
@@ -6,6 +6,7 @@ import {
   MAX_COMPARISON_FILE_MB_CAP,
   MAX_SNIPPET_SIZE_KB_CAP
 } from '../stores/settingsStore'
+import { THEMES } from '../utils/themes'
 import BaseDialog from './BaseDialog.vue'
 
 const diff = useDiffStore()
@@ -14,6 +15,15 @@ const dir = ref('')
 const isDefault = ref(true)
 const busy = ref(false)
 
+// Settings split by domain so the window stays scannable; one pane shows at a
+// time behind the left rail.
+const TABS = [
+  { id: 'appearance', label: 'Appearance' },
+  { id: 'storage', label: 'Storage' },
+  { id: 'limits', label: 'Limits' }
+]
+const tab = ref('appearance')
+
 async function refresh() {
   const res = await window.api.dataDirGet()
   dir.value = res.dir
@@ -50,63 +60,103 @@ function close() {
 </script>
 
 <template>
-  <BaseDialog width="460px" title="Settings" @close="close">
-    <section>
-      <h4>Data folder</h4>
-      <p class="dialog-note">
-        Where saved diffs, snippets, and your keys are stored. Put it in a folder you control (e.g.
-        Documents or a synced folder) so your data <strong>survives a reinstall</strong>. The folder
-        is self-contained — after reinstalling, point Diff Bro back at it to restore everything.
-      </p>
-      <div class="path">
-        <code :title="dir">{{ dir }}</code>
-        <span v-if="isDefault" class="badge">default</span>
-      </div>
-      <div class="dialog-actions">
-        <button class="btn btn-ghost" :disabled="busy" @click="reveal">Reveal</button>
-        <button class="btn btn-ghost" :disabled="busy || isDefault" @click="reset">
-          Use default
+  <BaseDialog width="580px" title="Settings" @close="close">
+    <div class="settings-body">
+      <nav class="settings-nav" aria-label="Settings sections">
+        <button
+          v-for="t in TABS"
+          :key="t.id"
+          type="button"
+          class="nav-item"
+          :class="{ active: tab === t.id }"
+          @click="tab = t.id"
+        >
+          {{ t.label }}
         </button>
-        <button class="btn btn-primary" :disabled="busy" @click="choose">Change folder…</button>
-      </div>
-      <p class="hint">Changing the folder restarts Diff Bro.</p>
-    </section>
+      </nav>
 
-    <section>
-      <h4>Interface</h4>
-      <label class="row toggle">
-        <input
-          type="checkbox"
-          :checked="settings.showShortcutBar"
-          @change="settings.setShowShortcutBar($event.target.checked)"
-        />
-        <span>Show the keyboard-shortcut bar over diffs</span>
-      </label>
-      <label class="row">
-        <span>Max comparison file (MB)</span>
-        <input
-          type="number"
-          min="1"
-          :max="MAX_COMPARISON_FILE_MB_CAP"
-          :value="settings.maxComparisonFileMb"
-          @change="settings.setMaxComparisonFileMb($event.target.value)"
-        />
-      </label>
-      <label class="row">
-        <span>Max snippet size (KB)</span>
-        <input
-          type="number"
-          min="16"
-          :max="MAX_SNIPPET_SIZE_KB_CAP"
-          :value="settings.maxSnippetSizeKb"
-          @change="settings.setMaxSnippetSizeKb($event.target.value)"
-        />
-      </label>
-      <p class="hint">
-        Higher limits let you diff or store bigger content, at the cost of speed — raise them only if
-        you need to.
-      </p>
-    </section>
+      <div class="settings-pane">
+        <section v-if="tab === 'appearance'">
+          <h4>Theme</h4>
+          <div class="theme-grid">
+            <button
+              v-for="t in THEMES"
+              :key="t.id"
+              type="button"
+              class="theme-opt"
+              :class="{ active: diff.theme === t.id }"
+              :title="`Use the ${t.label} theme`"
+              @click="diff.setTheme(t.id)"
+            >
+              <span class="swatch" :style="{ background: t.swatch.bg }">
+                <span class="dot" :style="{ background: t.swatch.accent }"></span>
+                <span class="dot" :style="{ background: t.swatch.add }"></span>
+                <span class="dot" :style="{ background: t.swatch.del }"></span>
+              </span>
+              <span>{{ t.label }}</span>
+            </button>
+          </div>
+          <label class="row toggle">
+            <input
+              type="checkbox"
+              :checked="settings.showShortcutBar"
+              @change="settings.setShowShortcutBar($event.target.checked)"
+            />
+            <span>Show the keyboard-shortcut bar over diffs</span>
+          </label>
+        </section>
+
+        <section v-else-if="tab === 'storage'">
+          <h4>Data folder</h4>
+          <p class="dialog-note">
+            Where saved diffs, snippets, and your keys are stored. Put it in a folder you control
+            (e.g. Documents or a synced folder) so your data <strong>survives a reinstall</strong>.
+            The folder is self-contained — after reinstalling, point Diff Bro back at it to restore
+            everything.
+          </p>
+          <div class="path">
+            <code :title="dir">{{ dir }}</code>
+            <span v-if="isDefault" class="badge">default</span>
+          </div>
+          <div class="dialog-actions">
+            <button class="btn btn-ghost" :disabled="busy" @click="reveal">Reveal</button>
+            <button class="btn btn-ghost" :disabled="busy || isDefault" @click="reset">
+              Use default
+            </button>
+            <button class="btn btn-primary" :disabled="busy" @click="choose">Change folder…</button>
+          </div>
+          <p class="hint">Changing the folder restarts Diff Bro.</p>
+        </section>
+
+        <section v-else>
+          <h4>Limits</h4>
+          <label class="row">
+            <span>Max comparison file (MB)</span>
+            <input
+              type="number"
+              min="1"
+              :max="MAX_COMPARISON_FILE_MB_CAP"
+              :value="settings.maxComparisonFileMb"
+              @change="settings.setMaxComparisonFileMb($event.target.value)"
+            />
+          </label>
+          <label class="row">
+            <span>Max snippet size (KB)</span>
+            <input
+              type="number"
+              min="16"
+              :max="MAX_SNIPPET_SIZE_KB_CAP"
+              :value="settings.maxSnippetSizeKb"
+              @change="settings.setMaxSnippetSizeKb($event.target.value)"
+            />
+          </label>
+          <p class="hint">
+            Higher limits let you diff or store bigger content, at the cost of speed — raise them
+            only if you need to.
+          </p>
+        </section>
+      </div>
+    </div>
 
     <template #actions>
       <button class="btn btn-ghost" @click="close">Close</button>
diff --git a/src/renderer/src/components/ShortcutBar.vue b/src/renderer/src/components/ShortcutBar.vue
index e3dd6bc..dd48ce3 100644
--- a/src/renderer/src/components/ShortcutBar.vue
+++ b/src/renderer/src/components/ShortcutBar.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { useSettingsStore } from '../stores/settingsStore'
 import { SHORTCUT_BAR } from '../utils/shortcuts'
+import AppIcon from './AppIcon.vue'
 
 // Translucent hint pill floating over the bottom of the diff area — it never
 // takes layout space and never covers the top of the content, where the diff
@@ -20,7 +21,7 @@ function dismiss() {
     <span v-for="[keys, label] in shortcuts" :key="keys" class="hint">
       <kbd>{{ keys }}</kbd> {{ label }}
     </span>
-    <button class="close" title="Hide shortcuts" @click="dismiss">×</button>
+    <button class="close" title="Hide shortcuts" @click="dismiss"><AppIcon name="x" /></button>
   </div>
 </template>
 
diff --git a/src/renderer/src/components/SnippetEditorDialog.vue b/src/renderer/src/components/SnippetEditorDialog.vue
index 3c587ee..846420f 100644
--- a/src/renderer/src/components/SnippetEditorDialog.vue
+++ b/src/renderer/src/components/SnippetEditorDialog.vue
@@ -12,6 +12,7 @@ import { useArmedAction } from '../composables/useArmedAction'
 import TagChipsField from './TagChipsField.vue'
 import MermaidDiagram from './MermaidDiagram.vue'
 import BaseDialog from './BaseDialog.vue'
+import AppIcon from './AppIcon.vue'
 
 const languages = SNIPPET_LANGUAGES
 const container = ref(null)
@@ -63,6 +64,7 @@ function saveSnippet() {
       <label class="grow">
         Name
         <input v-model="name" type="text" spellcheck="false" placeholder="Snippet name…" />
+        <span v-if="!name.trim()" class="required-hint">A snippet needs a name to save.</span>
       </label>
     </div>
     <TagChipsField ref="tagField" :initial="initialTags" />
@@ -82,6 +84,7 @@ function saveSnippet() {
       @dragover.capture.prevent.stop
       @drop.capture.prevent.stop="onDropFile"
     ></div>
+    <p v-if="!content.trim()" class="required-hint">A snippet needs content to save.</p>
     <div v-if="isMermaid" class="mmd-preview">
       <div class="mmd-preview-head">
         <span>Diagram preview</span>
@@ -92,7 +95,7 @@ function saveSnippet() {
           title="Open the full, resizable diagram viewer"
           @click="expandDiagram"
         >
-          ⤢ Expand
+          <AppIcon name="expand" /> Expand
         </button>
       </div>
       <div class="mmd-preview-body">
@@ -134,7 +137,11 @@ function saveSnippet() {
         {{ clearArmed ? 'Confirm clear' : 'Clear' }}
       </button>
       <span class="spacer" />
-      <button class="btn btn-primary" :disabled="!name.trim() || saving" @click="saveSnippet">
+      <button
+        class="btn btn-primary"
+        :disabled="!name.trim() || !content.trim() || saving"
+        @click="saveSnippet"
+      >
         Save
       </button>
       <button class="btn btn-ghost" @click="close">Cancel</button>
diff --git a/src/renderer/src/components/SnippetRow.vue b/src/renderer/src/components/SnippetRow.vue
index 963878e..e093899 100644
--- a/src/renderer/src/components/SnippetRow.vue
+++ b/src/renderer/src/components/SnippetRow.vue
@@ -3,8 +3,10 @@
 // differ only in the star's state, so the markup lives here once.
 import { useSnippetStore, languageOf } from '../stores/snippetStore'
 import { useDiffStore } from '../stores/diffStore'
+import { useCopyFeedback } from '../composables/useCopyFeedback'
 import { ago } from '../utils/relativeTime'
 import { shaped } from '../utils/props'
+import AppIcon from './AppIcon.vue'
 
 defineProps({
   /** @type {import('vue').PropType<import('../types').SnippetEntry>} */
@@ -14,16 +16,17 @@ defineProps({
 
 const store = useSnippetStore()
 const diff = useDiffStore()
+const { copied, flash } = useCopyFeedback()
 
-// Diagram snippets get a resting ◈ marker; a snippet left on Auto-detect
+// Diagram snippets get a resting diagram marker; a snippet left on Auto-detect
 // resolves through the language recorded when it was saved.
 const isDiagram = (entry) => languageOf(entry) === 'mermaid'
 
 async function copySnippet(id) {
   const content = await store.load(id)
   if (content != null) {
-    await navigator.clipboard.writeText(content)
-    diff.showNotice('Copied snippet to clipboard.')
+    await window.api.copyText(content)
+    flash()
   }
 }
 // Decrypt a Mermaid snippet and open it in the resizable diagram viewer.
@@ -35,22 +38,24 @@ async function viewDiagram(entry) {
 
 <template>
   <li class="row">
+    <Transition name="flash">
+      <span v-if="copied" class="copied-flash" aria-live="polite">Copied</span>
+    </Transition>
     <button
       class="star"
       :class="{ on: favorite }"
       :title="favorite ? 'Unfavorite' : 'Favorite (pin to top)'"
       @click="store.toggleFavorite(entry.id)"
     >
-      {{ favorite ? '★' : '☆' }}
+      <AppIcon :name="favorite ? 'star-filled' : 'star'" />
     </button>
     <button class="entry" @click="store.editingSnippet = { id: entry.id }">
-      <span
+      <AppIcon
         v-if="isDiagram(entry)"
         class="mmd"
+        name="diagram"
         title="Mermaid diagram — opens in the diagram viewer"
-        aria-label="Mermaid diagram"
-        >◈</span
-      >
+      />
       <span class="nm">{{ entry.name }}</span>
       <span class="dots">
         <span
@@ -70,15 +75,17 @@ async function viewDiagram(entry) {
         title="View diagram"
         @click="viewDiagram(entry)"
       >
-        ◈
+        <AppIcon name="diagram" />
+      </button>
+      <button class="row-btn" title="Copy to clipboard" @click="copySnippet(entry.id)">
+        <AppIcon name="copy" />
       </button>
-      <button class="row-btn" title="Copy to clipboard" @click="copySnippet(entry.id)">⧉</button>
       <button
         class="row-btn delete"
         title="Delete"
         @click="store.requestDelete('snippet', entry.id, entry.name)"
       >
-        ×
+        <AppIcon name="x" />
       </button>
     </span>
   </li>
diff --git a/src/renderer/src/components/SnippetTagBar.vue b/src/renderer/src/components/SnippetTagBar.vue
index b5fdfeb..494032b 100644
--- a/src/renderer/src/components/SnippetTagBar.vue
+++ b/src/renderer/src/components/SnippetTagBar.vue
@@ -6,6 +6,7 @@ import { useSnippetStore, TAG_PALETTE } from '../stores/snippetStore'
 import { DEFAULT_TAG } from '../composables/useSnippetFilters'
 import { arrayOfShape } from '../utils/props'
 import TagGlyph from './TagGlyph.vue'
+import AppIcon from './AppIcon.vue'
 
 const props = defineProps({
   /** @type {import('vue').PropType<import('../types').TagChip[]>} */
@@ -56,7 +57,7 @@ function exportTag() {
   <div class="tagbar" :class="{ collapsed: !open, 'has-active': active.size }">
     <div class="tagbar-head">
       <button class="tagbar-toggle" @click="open = !open">
-        <span class="chev" :class="{ open }">▸</span>
+        <AppIcon class="chev" :class="{ open }" name="chevron-right" />
         <span>Tags</span>
         <span v-if="active.size" class="active-count">· {{ active.size }} active</span>
       </button>
@@ -86,7 +87,7 @@ function exportTag() {
     <div class="manage" @click.stop>
       <div class="manage-head">
         <span>Manage tag</span>
-        <button class="dialog-close" @click="closeManage">×</button>
+        <button class="dialog-close" @click="closeManage"><AppIcon name="x" /></button>
       </div>
       <input
         v-model="renameValue"
diff --git a/src/renderer/src/components/SnippetsPanel.vue b/src/renderer/src/components/SnippetsPanel.vue
index 1fbd4c5..eeb0dc9 100644
--- a/src/renderer/src/components/SnippetsPanel.vue
+++ b/src/renderer/src/components/SnippetsPanel.vue
@@ -10,6 +10,7 @@ import SnippetRow from './SnippetRow.vue'
 import SnippetTagBar from './SnippetTagBar.vue'
 import SnippetPreviewCard from './SnippetPreviewCard.vue'
 import SectionHeader from './SectionHeader.vue'
+import AppIcon from './AppIcon.vue'
 
 defineProps({ first: { type: Boolean, default: false } })
 
@@ -50,14 +51,14 @@ const { preview, onRowEnter, onRowLeave } = useSnippetPreview()
           title="Export all snippets to a passphrase-protected file"
           @click.stop="store.pendingExport = { all: true }"
         >
-          ↑
+          <AppIcon name="arrow-up" />
         </button>
         <button
           class="btn btn-icon"
           title="Import snippets from a file"
           @click.stop="store.pendingImport = true"
         >
-          ↓
+          <AppIcon name="arrow-down" />
         </button>
       </template>
     </SectionHeader>
@@ -80,7 +81,9 @@ const { preview, onRowEnter, onRowLeave } = useSnippetPreview()
           placeholder="Filter by name or tag…"
           spellcheck="false"
         />
-        <button v-if="query.trim()" class="xbox" title="Clear search" @click="query = ''">×</button>
+        <button v-if="query.trim()" class="xbox" title="Clear search" @click="query = ''">
+          <AppIcon name="x" />
+        </button>
       </div>
 
       <p v-if="!store.entries.length" class="empty">
@@ -100,8 +103,8 @@ const { preview, onRowEnter, onRowLeave } = useSnippetPreview()
       <!-- ★ Favorites shelf -->
       <div v-if="visibleFavorites.length" class="shelf fav" :class="{ collapsed: !favOpen }">
         <button class="shelf-head" @click="favOpen = !favOpen">
-          <span class="chev" :class="{ open: favOpen }">▸</span>
-          <span class="shelf-title">★ Favorites</span>
+          <AppIcon class="chev" :class="{ open: favOpen }" name="chevron-right" />
+          <span class="shelf-title"><AppIcon name="star-filled" /> Favorites</span>
           <span class="shelf-count">{{ visibleFavorites.length }}</span>
         </button>
         <ul v-show="favOpen" class="rows">
@@ -119,7 +122,7 @@ const { preview, onRowEnter, onRowLeave } = useSnippetPreview()
       <!-- All snippets shelf (newest first) -->
       <div v-if="store.entries.length" class="shelf" :class="{ collapsed: !allOpen }">
         <button class="shelf-head" @click="allOpen = !allOpen">
-          <span class="chev" :class="{ open: allOpen }">▸</span>
+          <AppIcon class="chev" :class="{ open: allOpen }" name="chevron-right" />
           <span class="shelf-title"
             >All snippets <span class="sort-note">· newest first</span></span
           >
diff --git a/src/renderer/src/components/TagChipsField.vue b/src/renderer/src/components/TagChipsField.vue
index 12d9090..d26d896 100644
--- a/src/renderer/src/components/TagChipsField.vue
+++ b/src/renderer/src/components/TagChipsField.vue
@@ -5,6 +5,7 @@ import { reactive } from 'vue'
 import { useSnippetStore, MAX_TAGS } from '../stores/snippetStore'
 import { useTagInput } from '../composables/useTagInput'
 import TagGlyph from './TagGlyph.vue'
+import AppIcon from './AppIcon.vue'
 
 const props = defineProps({
   // Tags the snippet already carries; the field owns them from here on.
@@ -30,7 +31,7 @@ defineExpose(field)
     <div class="tagfield" @click="field.inputEl?.focus()">
       <span v-for="t in field.tags" :key="t" class="etag" :style="{ '--tc': field.colorFor(t) }">
         <TagGlyph :color="field.colorFor(t)" />{{ t }}
-        <button type="button" class="x" @click.stop="field.remove(t)">×</button>
+        <button type="button" class="x" @click.stop="field.remove(t)"><AppIcon name="x" /></button>
       </span>
       <input
         :ref="(el) => (field.inputEl = el)"
diff --git a/src/renderer/src/components/TextToolDialog.vue b/src/renderer/src/components/TextToolDialog.vue
index 9accee2..dbc2f41 100644
--- a/src/renderer/src/components/TextToolDialog.vue
+++ b/src/renderer/src/components/TextToolDialog.vue
@@ -38,7 +38,7 @@ function format() {
   if (canFormat.value) input.value = tool.value.format(input.value)
 }
 async function copy() {
-  await navigator.clipboard.writeText(input.value)
+  await window.api.copyText(input.value)
   store.showNotice('Copied to clipboard.')
 }
 function addToSnippets() {
diff --git a/src/renderer/src/components/TrustedKeysDialog.vue b/src/renderer/src/components/TrustedKeysDialog.vue
index 4fa8ca6..04961f7 100644
--- a/src/renderer/src/components/TrustedKeysDialog.vue
+++ b/src/renderer/src/components/TrustedKeysDialog.vue
@@ -2,6 +2,7 @@
 import { onMounted, ref, watch } from 'vue'
 import { useDiffStore } from '../stores/diffStore'
 import BaseDialog from './BaseDialog.vue'
+import AppIcon from './AppIcon.vue'
 
 const diff = useDiffStore()
 const keys = ref([])
@@ -75,8 +76,8 @@ function close() {
           <span v-else class="label">{{ k.label }}</span>
           <span class="fp">{{ k.fingerprint }}</span>
         </div>
-        <button class="icon" title="Rename" @click="startRename(k)">✎</button>
-        <button class="icon delete" title="Remove" @click="remove(k)">×</button>
+        <button class="icon" title="Rename" @click="startRename(k)"><AppIcon name="edit" /></button>
+        <button class="icon delete" title="Remove" @click="remove(k)"><AppIcon name="x" /></button>
       </li>
     </ul>
 
diff --git a/src/renderer/src/components/styles/App.css b/src/renderer/src/components/styles/App.css
index 1eda918..9a33304 100644
--- a/src/renderer/src/components/styles/App.css
+++ b/src/renderer/src/components/styles/App.css
@@ -3,11 +3,12 @@
   flex-direction: column;
   height: 100vh;
 }
+/* Layout + skin only — display/align/height come from .band .band-row so this
+   row and the first sidebar header stay the same height (see ui.css). Vertical
+   padding is deliberately absent: the band height centers the slots. */
 .file-slots-row {
-  display: flex;
-  align-items: center;
   gap: 12px;
-  padding: 10px 12px;
+  padding: 0 12px;
   background: var(--bg-panel);
   border-bottom: 1px solid var(--border);
 }
diff --git a/src/renderer/src/components/styles/AppIcon.css b/src/renderer/src/components/styles/AppIcon.css
new file mode 100644
index 0000000..606b7f5
--- /dev/null
+++ b/src/renderer/src/components/styles/AppIcon.css
@@ -0,0 +1,9 @@
+/* Sizes to the surrounding text/button, so an icon drops in where a glyph was
+   without extra sizing rules. Colour comes from currentColor. */
+.app-icon {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  flex-shrink: 0;
+  vertical-align: -0.125em;
+}
diff --git a/src/renderer/src/components/styles/AppToolbar.css b/src/renderer/src/components/styles/AppToolbar.css
index a0a0e68..47b6bd8 100644
--- a/src/renderer/src/components/styles/AppToolbar.css
+++ b/src/renderer/src/components/styles/AppToolbar.css
@@ -1,7 +1,6 @@
 /* Top bar (AppToolbar.vue). */
+/* A band (.band gives display/align — see ui.css); this adds only its skin. */
 .toolbar {
-  display: flex;
-  align-items: center;
   gap: 16px;
   padding: 8px 12px;
   background: var(--bg-panel);
diff --git a/src/renderer/src/components/styles/SavedDiffs.css b/src/renderer/src/components/styles/SavedDiffs.css
index 0d587d5..1388325 100644
--- a/src/renderer/src/components/styles/SavedDiffs.css
+++ b/src/renderer/src/components/styles/SavedDiffs.css
@@ -7,10 +7,7 @@
   flex-direction: column;
   overflow-y: auto;
 }
-/* A gap of panel background between consecutive sections, opening up the seam
-   without depending on which section is first (order is user-controlled). The
-   selector reaches each section component's root element (Vue stamps the parent
-   scope id onto child roots). */
-.sidebar-section + .sidebar-section {
-  margin-top: 12px;
-}
+/* Sections stack flush — each header carries a single top hairline (see
+   SectionHeader.css), so consecutive sections are separated by one line with no
+   gap. A gap here would show as panel background hanging below a collapsed
+   header, which reads as a bug. */
diff --git a/src/renderer/src/components/styles/SavedDiffsSection.css b/src/renderer/src/components/styles/SavedDiffsSection.css
index db03751..3c7c6a2 100644
--- a/src/renderer/src/components/styles/SavedDiffsSection.css
+++ b/src/renderer/src/components/styles/SavedDiffsSection.css
@@ -48,16 +48,29 @@ ul {
   padding-right: 6px;
   border-top: 1px solid var(--border);
 }
-/* Drag affordance for reordering categories. */
+/* Highlight the whole row on hover — the grip and delete controls sit inside it,
+   so hovering anywhere lights the full shelf header, not just the toggle. */
+.category-head:hover {
+  background: var(--bg);
+}
+/* Drag affordance for reordering categories — quiet until the row is hovered so
+   the folder/name reads first. */
 .grip {
   padding-left: 8px;
   color: var(--text-dim);
   font-size: var(--font-sm);
   cursor: grab;
-  opacity: 0.5;
+  opacity: 0.3;
 }
 .category-head:hover .grip {
-  opacity: 1;
+  opacity: 0.75;
+}
+/* Folder-tree treatment: an accent folder names the category as a group; the
+   bolder name sets it above the diff rows, and .diff-list draws the guide rail
+   the diffs hang off. */
+.folder {
+  color: var(--accent);
+  font-size: var(--font-md);
 }
 .category.dragging {
   opacity: 0.5;
@@ -76,9 +89,6 @@ ul {
   cursor: pointer;
   font-size: var(--font-md);
 }
-.cat-toggle:hover {
-  background: var(--bg);
-}
 .chevron {
   display: inline-block;
   font-size: var(--font-xs);
@@ -94,10 +104,19 @@ ul {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-weight: 600;
 }
 .count {
   font-size: var(--font-sm);
   color: var(--text-hint);
+  font-variant-numeric: tabular-nums;
+}
+/* The tree rail: a hairline down the left that the category's diffs indent off,
+   so they read as belonging to the folder above. */
+.diff-list {
+  margin: 2px 0 var(--space-2) 18px;
+  padding-left: 4px;
+  border-left: 1.5px solid var(--border);
 }
 .icon {
   display: inline-flex;
diff --git a/src/renderer/src/components/styles/SectionHeader.css b/src/renderer/src/components/styles/SectionHeader.css
index 9af9bcb..65f1d19 100644
--- a/src/renderer/src/components/styles/SectionHeader.css
+++ b/src/renderer/src/components/styles/SectionHeader.css
@@ -1,10 +1,16 @@
-/* Section header band: a recessed strip framed by hairlines so Saved / External
-   / Snippets read as distinct blocks. Shared by every reorderable section. */
+/* Section header band. Every header is a .band .band-row, so its height is
+   --band-row and its content is flex-centred — the headers match each other and
+   the file inputs. Padding is horizontal only; the band height owns the vertical
+   rhythm.
+
+   A single top hairline separates one section from the previous one — no
+   bottom border and no gap between sections, so a collapsed header stacks
+   cleanly against its neighbour instead of leaving a "hanging" strip of panel
+   background below it. The header's dark fill against the panel-grey body is
+   what sets it apart from its own content. */
 .head {
-  display: flex;
-  align-items: center;
   gap: 8px;
-  padding: 9px 10px;
+  padding: 0 10px;
   font-size: var(--font-sm);
   font-weight: 700;
   color: var(--text-dim);
@@ -12,15 +18,13 @@
   letter-spacing: 0.6px;
   background: var(--bg);
   border-top: 1px solid var(--border);
-  border-bottom: 1px solid var(--border);
   cursor: pointer;
   user-select: none;
 }
-/* The topmost section sits flush and lifts its label to line up with the
-   Left/Right file-slot labels across the divider (10px row + 6px slot). */
+/* The topmost section sits flush with the top of the sidebar; the shared band
+   height already lines "SAVED DIFFS" up with "Left File…" across the divider. */
 .head.first {
   border-top: none;
-  padding-top: 16px;
 }
 .section-title {
   flex: 1;
@@ -34,12 +38,25 @@
 .chev.open {
   transform: rotate(90deg);
 }
-/* Up/down section move controls — quiet until hovered. */
+/* Right-side controls (the actions slot + reorder arrows) share one centerline.
+   Each glyph is flex-centered in an equal-height box so differing glyph metrics
+   — an emoji vs the geometric arrows — can't drift off the row's center. */
+.head > .actions-slot,
 .reorder {
   display: inline-flex;
+  align-items: center;
+  height: 18px;
+  line-height: 1;
+}
+.reorder {
   gap: 2px;
 }
 .reorder-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 18px;
+  min-width: 18px;
   background: none;
   border: 1px solid transparent;
   border-radius: var(--radius-sm);
@@ -47,7 +64,7 @@
   cursor: pointer;
   font-size: var(--font-2xs);
   line-height: 1;
-  padding: 2px 4px;
+  padding: 0 2px;
 }
 .reorder-btn:hover:not(:disabled) {
   border-color: var(--accent);
diff --git a/src/renderer/src/components/styles/SettingsDialog.css b/src/renderer/src/components/styles/SettingsDialog.css
index e3a745e..caa10f4 100644
--- a/src/renderer/src/components/styles/SettingsDialog.css
+++ b/src/renderer/src/components/styles/SettingsDialog.css
@@ -1,10 +1,49 @@
-h4 {
-  margin: 0 0 6px;
+/* Left rail navigates domains; the pane shows one at a time so the window
+   stays scannable instead of one long scroll. */
+.settings-body {
+  display: flex;
+  gap: var(--space-4);
+  align-items: stretch;
+}
+.settings-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex-shrink: 0;
+  width: 128px;
+  border-right: 1px solid var(--border);
+  padding-right: var(--space-3);
+}
+.nav-item {
+  text-align: left;
+  padding: 7px 10px;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--text-dim);
+  cursor: pointer;
   font-size: var(--font-md);
 }
-.note strong {
+.nav-item:hover {
+  background: var(--bg-hover);
   color: var(--text);
 }
+.nav-item.active {
+  background: var(--bg-hover);
+  color: var(--text);
+  font-weight: 600;
+}
+/* Reserve the tallest pane's height so switching domains doesn't resize the
+   dialog under the pointer. */
+.settings-pane {
+  flex: 1;
+  min-width: 0;
+  min-height: 232px;
+}
+h4 {
+  margin: 0 0 8px;
+  font-size: var(--font-md);
+}
 .path {
   display: flex;
   align-items: center;
@@ -50,6 +89,7 @@ h4 {
 }
 .row.toggle {
   justify-content: flex-start;
+  margin-top: var(--space-3);
   cursor: pointer;
 }
 .row span {
@@ -59,12 +99,43 @@ h4 {
   width: 88px;
   text-align: right;
 }
-section + section {
-  margin-top: var(--space-4);
-}
-.footer {
+/* Theme picker — a swatch preview (ground + accent/add/remove dots) per theme. */
+.theme-grid {
   display: flex;
-  justify-content: flex-end;
-  border-top: 1px solid var(--border);
-  padding-top: 12px;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+.theme-opt {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 4px 10px 4px 5px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  cursor: pointer;
+  font-size: var(--font-md);
+}
+.theme-opt:hover {
+  border-color: var(--accent);
+}
+.theme-opt.active {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent);
+}
+.theme-opt .swatch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  width: 40px;
+  height: 20px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+}
+.theme-opt .dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
 }
diff --git a/src/renderer/src/components/styles/SnippetEditorDialog.css b/src/renderer/src/components/styles/SnippetEditorDialog.css
index 41ad9c9..88385e9 100644
--- a/src/renderer/src/components/styles/SnippetEditorDialog.css
+++ b/src/renderer/src/components/styles/SnippetEditorDialog.css
@@ -69,3 +69,12 @@
   color: var(--danger-bg);
   font-weight: 600;
 }
+/* Required-field hints (name + content) — explain why Save is disabled. */
+.required-hint {
+  margin: 0;
+  /* Line the hint up with the field's TEXT column (input border 1px + its 8px
+     inner padding), not the field's border, so it reads as part of the field. */
+  padding-left: 9px;
+  color: var(--danger-bg);
+  font-size: var(--font-sm);
+}
diff --git a/src/renderer/src/components/styles/SnippetRow.css b/src/renderer/src/components/styles/SnippetRow.css
index 54df966..f1dd47e 100644
--- a/src/renderer/src/components/styles/SnippetRow.css
+++ b/src/renderer/src/components/styles/SnippetRow.css
@@ -3,9 +3,36 @@
    that knows which shelf a row sits in. */
 /* Row presentation for SnippetRow.vue — shared by both snippet shelves. */
 .row {
+  position: relative;
   display: flex;
   align-items: center;
 }
+/* "Copied" acknowledgement over the action buttons. Anchored to the row, not
+   .rowacts, so it survives the pointer leaving (which hides .rowacts). */
+.copied-flash {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  transform: translateY(-50%);
+  padding: 1px 7px;
+  font-size: var(--font-xs);
+  font-weight: 600;
+  color: var(--text-on-accent);
+  background: var(--accent);
+  border-radius: var(--radius-sm);
+  pointer-events: none;
+}
+.flash-enter-active,
+.flash-leave-active {
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+.flash-enter-from,
+.flash-leave-to {
+  opacity: 0;
+  transform: translateY(calc(-50% + 4px));
+}
 .star {
   display: flex;
   align-items: center;
diff --git a/src/renderer/src/components/styles/SnippetsPanel.css b/src/renderer/src/components/styles/SnippetsPanel.css
index 897dac6..916e682 100644
--- a/src/renderer/src/components/styles/SnippetsPanel.css
+++ b/src/renderer/src/components/styles/SnippetsPanel.css
@@ -64,8 +64,13 @@
   list-style: none;
 }
 /* shelves */
+/* A hairline above each shelf sets the tag filter apart from the snippet lists
+   (and the shelves from each other) — the tag chips and the rows otherwise
+   blend together. */
 .shelf {
-  margin-top: 4px;
+  margin-top: var(--space-2);
+  padding-top: var(--space-2);
+  border-top: 1px solid var(--border);
 }
 .shelf-head {
   display: flex;
diff --git a/src/renderer/src/composables/useBackdropClose.js b/src/renderer/src/composables/useBackdropClose.js
new file mode 100644
index 0000000..8230c32
--- /dev/null
+++ b/src/renderer/src/composables/useBackdropClose.js
@@ -0,0 +1,20 @@
+// Close a modal when its backdrop is clicked — but ONLY when the press began on
+// the backdrop itself. A drag that starts inside the panel (a resize handle, a
+// text selection) and releases over the backdrop makes the browser fire a click
+// whose target is the backdrop, which would otherwise close the modal
+// mid-interaction (this is the "resizing closes the Mermaid viewer" bug). Wiring
+// onPointerDown + onClick to the backdrop element gates that out.
+//
+// Logic lives here, not inline in the component, so it is unit-testable without
+// mounting anything — see tests/renderer/composables/useBackdropClose.test.js.
+export function useBackdropClose(onClose) {
+  let pressedBackdrop = false
+  function onPointerDown(e) {
+    pressedBackdrop = e.target === e.currentTarget
+  }
+  function onClick(e) {
+    if (pressedBackdrop && e.target === e.currentTarget) onClose()
+    pressedBackdrop = false
+  }
+  return { onPointerDown, onClick }
+}
diff --git a/src/renderer/src/composables/useCopyFeedback.js b/src/renderer/src/composables/useCopyFeedback.js
new file mode 100644
index 0000000..79457f8
--- /dev/null
+++ b/src/renderer/src/composables/useCopyFeedback.js
@@ -0,0 +1,36 @@
+import { onScopeDispose, ref } from 'vue'
+
+// Transient "Copied" acknowledgement shown at the click. `flash()` flips
+// `copied` true on a successful copy and clears it after `duration` ms; a
+// repeat click restarts the timer rather than stacking. The timer logic lives
+// here (not inline in the row) so it stays unit-testable — the recurring class
+// of "does the flash appear/clear correctly" bug is caught in a test, not by eye.
+export function useCopyFeedback(duration = 1200) {
+  const copied = ref(false)
+  let timer = null
+
+  function clear() {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+  }
+  function flash() {
+    copied.value = true
+    clear()
+    timer = setTimeout(() => {
+      copied.value = false
+      timer = null
+    }, duration)
+  }
+  function cancel() {
+    clear()
+    copied.value = false
+  }
+
+  // A row can unmount mid-flash (filter change, delete); don't leave a timer
+  // writing to a discarded ref.
+  onScopeDispose(clear)
+
+  return { copied, flash, cancel }
+}
diff --git a/src/renderer/src/composables/useMonacoInput.js b/src/renderer/src/composables/useMonacoInput.js
index 2555432..ca3d5e3 100644
--- a/src/renderer/src/composables/useMonacoInput.js
+++ b/src/renderer/src/composables/useMonacoInput.js
@@ -1,6 +1,7 @@
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import * as monaco from 'monaco-editor'
 import { useDiffStore } from '../stores/diffStore'
+import { isDarkTheme } from '../utils/themes'
 
 // A Monaco editor bound to a `content` ref: two-way value sync, live language
 // switching, and the app theme mirrored into the editor. Callers own the ref, so
@@ -18,7 +19,7 @@ export function useMonacoInput({ container, content, language, options = {} }) {
   const ready = ref(false)
   let editor = null
 
-  const monacoTheme = () => (diff.theme === 'light' ? 'vs' : 'vs-dark')
+  const monacoTheme = () => (isDarkTheme(diff.theme) ? 'vs-dark' : 'vs')
 
   onMounted(() => {
     editor = monaco.editor.create(container.value, {
diff --git a/src/renderer/src/composables/useSnippetDraft.js b/src/renderer/src/composables/useSnippetDraft.js
index eba40f5..ac59969 100644
--- a/src/renderer/src/composables/useSnippetDraft.js
+++ b/src/renderer/src/composables/useSnippetDraft.js
@@ -65,9 +65,10 @@ export function useSnippetDraft() {
 
   // `tags` and `tagColors` come from the tag field, which owns them.
   async function save({ tags, tagColors }) {
-    // Guard against a fast double-click: the store call is async (IPC round
-    // trip), so a second click before it resolves would create a duplicate.
-    if (!name.value.trim() || saving.value) return
+    // A snippet needs both a name and content; the button is disabled without
+    // them, this guards the Enter/programmatic path. The `saving` check guards a
+    // fast double-click, whose async store call would otherwise duplicate.
+    if (!name.value.trim() || !content.value.trim() || saving.value) return
     // Keep the app stable: refuse a snippet larger than the configured limit
     // (Settings → Interface). Measured in bytes so multibyte content counts.
     const bytes = new TextEncoder().encode(content.value).length
@@ -105,7 +106,7 @@ export function useSnippetDraft() {
 
   async function copyContent() {
     if (!content.value) return
-    await navigator.clipboard.writeText(content.value)
+    await window.api.copyText(content.value)
     diff.showNotice('Copied snippet to clipboard.')
   }
 
diff --git a/src/renderer/src/icons.js b/src/renderer/src/icons.js
new file mode 100644
index 0000000..fd0a061
--- /dev/null
+++ b/src/renderer/src/icons.js
@@ -0,0 +1,114 @@
+// SVG icon geometry, Feather/Lucide-style on a 24×24 grid. Icons are drawn as
+// SVG, never as Unicode glyphs, so nothing renders as a tofu box on a font that
+// happens to lack a symbol (◈, ⧉, ⤢, ⛶ … all did). Each icon is a list of
+// primitive elements; AppIcon.vue renders them inside one shared <svg>.
+//
+// Elements: { t: 'path'|'rect'|'circle'|'line', ...attrs }. A `fill: true`
+// element is solid (stroke off); everything else is a stroked outline.
+export const ICONS = {
+  // A small flowchart — marks a Mermaid snippet and opens its viewer.
+  diagram: [
+    { t: 'rect', x: 3, y: 3, width: 8, height: 8, rx: 2 },
+    { t: 'rect', x: 13, y: 13, width: 8, height: 8, rx: 2 },
+    { t: 'path', d: 'M7 11v4a2 2 0 0 0 2 2h4' }
+  ],
+  copy: [
+    { t: 'rect', x: 9, y: 9, width: 13, height: 13, rx: 2 },
+    { t: 'path', d: 'M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1' }
+  ],
+  x: [{ t: 'path', d: 'M18 6 6 18M6 6l12 12' }],
+  star: [
+    {
+      t: 'path',
+      d: 'M12 2.5l2.9 5.88 6.49.94-4.7 4.58 1.11 6.46L12 17.9l-5.8 3.05 1.11-6.46-4.7-4.58 6.49-.94z'
+    }
+  ],
+  'star-filled': [
+    {
+      t: 'path',
+      fill: true,
+      d: 'M12 2.5l2.9 5.88 6.49.94-4.7 4.58 1.11 6.46L12 17.9l-5.8 3.05 1.11-6.46-4.7-4.58 6.49-.94z'
+    }
+  ],
+  'chevron-right': [{ t: 'path', d: 'm9 6 6 6-6 6' }],
+  'chevron-left': [{ t: 'path', d: 'm15 6-6 6 6 6' }],
+  'chevron-up': [{ t: 'path', d: 'm6 15 6-6 6 6' }],
+  'chevron-down': [{ t: 'path', d: 'm6 9 6 6 6-6' }],
+  'arrow-up': [
+    { t: 'path', d: 'M12 19V5' },
+    { t: 'path', d: 'm5 12 7-7 7 7' }
+  ],
+  'arrow-down': [
+    { t: 'path', d: 'M12 5v14' },
+    { t: 'path', d: 'm19 12-7 7-7-7' }
+  ],
+  // Diagonal share arrow (out of the box).
+  share: [
+    { t: 'path', d: 'M9 15 20 4' },
+    { t: 'path', d: 'M15 4h5v5' },
+    { t: 'path', d: 'M20 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6' }
+  ],
+  grip: [
+    { t: 'circle', cx: 9, cy: 6, r: 1.1, fill: true },
+    { t: 'circle', cx: 9, cy: 12, r: 1.1, fill: true },
+    { t: 'circle', cx: 9, cy: 18, r: 1.1, fill: true },
+    { t: 'circle', cx: 15, cy: 6, r: 1.1, fill: true },
+    { t: 'circle', cx: 15, cy: 12, r: 1.1, fill: true },
+    { t: 'circle', cx: 15, cy: 18, r: 1.1, fill: true }
+  ],
+  lock: [
+    { t: 'rect', x: 4, y: 11, width: 16, height: 10, rx: 2 },
+    { t: 'path', d: 'M8 11V7a4 4 0 0 1 8 0v4' }
+  ],
+  edit: [
+    { t: 'path', d: 'M12 20h9' },
+    { t: 'path', d: 'M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z' }
+  ],
+  sun: [
+    { t: 'circle', cx: 12, cy: 12, r: 4 },
+    { t: 'path', d: 'M12 2v2' },
+    { t: 'path', d: 'M12 20v2' },
+    { t: 'path', d: 'm4.9 4.9 1.4 1.4' },
+    { t: 'path', d: 'm17.7 17.7 1.4 1.4' },
+    { t: 'path', d: 'M2 12h2' },
+    { t: 'path', d: 'M20 12h2' },
+    { t: 'path', d: 'm6.3 17.7-1.4 1.4' },
+    { t: 'path', d: 'm19.1 4.9-1.4 1.4' }
+  ],
+  moon: [{ t: 'path', d: 'M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z' }],
+  // Arrows to the four corners — expand a panel to a larger view.
+  expand: [
+    { t: 'path', d: 'M15 3h6v6' },
+    { t: 'path', d: 'M9 21H3v-6' },
+    { t: 'path', d: 'm21 3-7 7' },
+    { t: 'path', d: 'm3 21 7-7' }
+  ],
+  maximize: [
+    { t: 'path', d: 'M8 3H5a2 2 0 0 0-2 2v3' },
+    { t: 'path', d: 'M21 8V5a2 2 0 0 0-2-2h-3' },
+    { t: 'path', d: 'M3 16v3a2 2 0 0 0 2 2h3' },
+    { t: 'path', d: 'M16 21h3a2 2 0 0 0 2-2v-3' }
+  ],
+  restore: [
+    { t: 'path', d: 'M8 3v3a2 2 0 0 1-2 2H3' },
+    { t: 'path', d: 'M21 8h-3a2 2 0 0 1-2-2V3' },
+    { t: 'path', d: 'M3 16h3a2 2 0 0 1 2 2v3' },
+    { t: 'path', d: 'M16 21v-3a2 2 0 0 1 2-2h3' }
+  ],
+  minus: [{ t: 'path', d: 'M5 12h14' }],
+  plus: [
+    { t: 'path', d: 'M5 12h14' },
+    { t: 'path', d: 'M12 5v14' }
+  ],
+  file: [
+    { t: 'path', d: 'M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z' },
+    { t: 'path', d: 'M14 2v4a2 2 0 0 0 2 2h4' }
+  ],
+  // Names a saved-diff category (folder-tree treatment in SavedDiffsSection).
+  folder: [
+    {
+      t: 'path',
+      d: 'M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z'
+    }
+  ]
+}
diff --git a/src/renderer/src/menus.js b/src/renderer/src/menus.js
index 07ed7fc..4aa0df7 100644
--- a/src/renderer/src/menus.js
+++ b/src/renderer/src/menus.js
@@ -131,7 +131,9 @@ export function buildMenus(store) {
       id: 'help',
       label: 'Help',
       items: [
-        { label: 'Keyboard Shortcuts', run: () => store.handleMenuAction('shortcuts') }
+        { label: 'Keyboard Shortcuts', run: () => store.handleMenuAction('shortcuts') },
+        { sep: true },
+        { label: 'Report an Issue', run: () => window.api.reportIssue() }
       ]
     }
   ]
diff --git a/src/renderer/src/monaco-mermaid.js b/src/renderer/src/monaco-mermaid.js
new file mode 100644
index 0000000..c570df5
--- /dev/null
+++ b/src/renderer/src/monaco-mermaid.js
@@ -0,0 +1,142 @@
+// Registers a Monaco language for Mermaid so snippet code highlights instead of
+// rendering as flat plaintext. Monaco ships no Mermaid grammar, so this is a
+// Monarch tokenizer — pragmatic, not a full parser: it colours the things that
+// carry meaning at a glance (diagram type, structural keywords, links, node
+// text, strings, comments) and lets the active vs / vs-dark theme map those
+// token types to colours, so it tracks the app's light/dark switch for free.
+import { MERMAID_KEYWORDS } from './utils/mermaid'
+
+// Structural words shared across diagram types. Not exhaustive — the ones a
+// reader scans for when reading a diagram.
+const STRUCTURE = [
+  'subgraph',
+  'end',
+  'direction',
+  'participant',
+  'actor',
+  'note',
+  'over',
+  'left',
+  'right',
+  'of',
+  'loop',
+  'alt',
+  'opt',
+  'par',
+  'and',
+  'else',
+  'rect',
+  'critical',
+  'break',
+  'activate',
+  'deactivate',
+  'class',
+  'state',
+  'title',
+  'section',
+  'click',
+  'call',
+  'link',
+  'style',
+  'classDef',
+  'linkStyle',
+  'accTitle',
+  'accDescr'
+]
+
+const DIRECTIONS = ['TB', 'TD', 'BT', 'RL', 'LR']
+
+export function registerMermaidLanguage(monaco) {
+  if (monaco.languages.getLanguages().some((l) => l.id === 'mermaid')) return
+  monaco.languages.register({ id: 'mermaid' })
+
+  monaco.languages.setLanguageConfiguration('mermaid', {
+    comments: { lineComment: '%%' },
+    brackets: [
+      ['[', ']'],
+      ['(', ')'],
+      ['{', '}']
+    ],
+    autoClosingPairs: [
+      { open: '[', close: ']' },
+      { open: '(', close: ')' },
+      { open: '{', close: '}' },
+      { open: '"', close: '"' }
+    ],
+    surroundingPairs: [
+      { open: '[', close: ']' },
+      { open: '(', close: ')' },
+      { open: '{', close: '}' },
+      { open: '"', close: '"' }
+    ]
+  })
+
+  monaco.languages.setMonarchTokensProvider('mermaid', {
+    defaultToken: '',
+    keywords: MERMAID_KEYWORDS,
+    structure: STRUCTURE,
+    directions: DIRECTIONS,
+    tokenizer: {
+      root: [
+        // %%{ init: … }%% configuration directive.
+        [/%%\{/, 'annotation', '@directive'],
+        // Line comment.
+        [/%%.*$/, 'comment'],
+
+        [/"/, 'string', '@dstring'],
+        [/'/, 'string', '@sstring'],
+
+        // Edge label between pipes: A -->|yes| B
+        [/\|[^|]*\|/, 'string'],
+
+        // Links / arrows: --> --- -.-> ==> --x o--o etc. Longest-first via the
+        // {2,} runs; leading/trailing head decorations are optional.
+        [/[<xo]?(?:-{2,}|={2,}|-\.-+|-\.|~{3,})[>xo]?/, 'operator'],
+
+        // Node shapes open a text run coloured as a string, so labels read
+        // distinctly from ids.
+        [/[[({]/, { token: '@brackets', next: '@nodeText' }],
+        [/[\])}]/, '@brackets'],
+
+        [/\d+(\.\d+)?/, 'number'],
+        [/:::|[;,:&]/, 'delimiter'],
+
+        [
+          /[A-Za-z_][\w-]*/,
+          {
+            cases: {
+              '@keywords': 'keyword',
+              '@structure': 'type',
+              '@directions': 'constant',
+              '@default': 'identifier'
+            }
+          }
+        ]
+      ],
+
+      // Text inside a node shape. Nested openers keep the depth so the matching
+      // closer returns to root, not one level too early.
+      nodeText: [
+        [/[[({]/, '@brackets', '@nodeText'],
+        [/[\])}]/, '@brackets', '@pop'],
+        [/"/, 'string', '@dstring'],
+        [/[^[\](){}"]+/, 'string']
+      ],
+
+      directive: [
+        [/\}%%/, 'annotation', '@pop'],
+        [/[^}]+/, 'annotation'],
+        [/\}/, 'annotation']
+      ],
+
+      dstring: [
+        [/[^"]+/, 'string'],
+        [/"/, 'string', '@pop']
+      ],
+      sstring: [
+        [/[^']+/, 'string'],
+        [/'/, 'string', '@pop']
+      ]
+    }
+  })
+}
diff --git a/src/renderer/src/monaco-setup.js b/src/renderer/src/monaco-setup.js
index 62cb99f..e1a70b6 100644
--- a/src/renderer/src/monaco-setup.js
+++ b/src/renderer/src/monaco-setup.js
@@ -6,6 +6,11 @@ import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
 import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+import { registerMermaidLanguage } from './monaco-mermaid'
+
+// Mermaid has no built-in Monaco grammar; register ours so snippet code
+// highlights (the 'mermaid' language id comes from utils/detectLanguage.js).
+registerMermaidLanguage(monaco)
 
 // Disable the Command Palette (F1 / Ctrl+Shift+P) across every editor: the app
 // never uses it and it exposes internal editor commands we don't want reachable
diff --git a/src/renderer/src/stores/diffStore.js b/src/renderer/src/stores/diffStore.js
index fa6ce52..f2fda81 100644
--- a/src/renderer/src/stores/diffStore.js
+++ b/src/renderer/src/stores/diffStore.js
@@ -5,6 +5,7 @@ import { useVaultStore } from './vaultStore'
 import { useSnippetStore } from './snippetStore'
 import { detectTextFormat, formatJson, formatXml } from '../utils/textFormats'
 import { loadPersisted, savePersisted } from '../persist'
+import { isDarkTheme, normalizeTheme } from '../utils/themes'
 
 const SHARE_ERRORS = {
   'not-a-share-file': 'That file is not a Diff Bro shared diff.',
@@ -107,7 +108,8 @@ export const useDiffStore = defineStore('diff', {
     // Persisted through the durable data-dir store (persist.js), same as vault
     // and snippets, so the choice survives a reinstall that wipes userData; the
     // old localStorage 'diffbro.theme' key is migrated forward automatically.
-    theme: loadPersisted('theme') === 'light' ? 'light' : 'dark',
+    // Default is Light (see utils/themes.js); an unknown stored id normalizes.
+    theme: normalizeTheme(loadPersisted('theme')),
     // entry id currently in the share dialog (null = closed)
     shareEntryId: null,
     // { key, fingerprint, label } while the drag-drop "name this trusted
@@ -270,11 +272,18 @@ export const useDiffStore = defineStore('diff', {
     closeMermaid() {
       this.mermaidView = null
     },
-    toggleTheme() {
-      this.theme = this.theme === 'dark' ? 'light' : 'dark'
+    // Select any of the named themes (Settings picker). Unknown ids fall back
+    // to the default rather than leaving the app unstyled.
+    setTheme(id) {
+      this.theme = normalizeTheme(id)
       savePersisted('theme', this.theme)
       applyTheme(this.theme)
     },
+    // Quick light/dark flip for the View menu + Ctrl+D: flips the ground, so a
+    // dark-ground theme (Dark, Neon) goes Light and a light-ground one goes Dark.
+    toggleTheme() {
+      this.setTheme(isDarkTheme(this.theme) ? 'light' : 'dark')
+    },
     // Re-read both sides from disk (quietly — no large-file prompt) so the
     // diff follows external edits. Called when the window regains focus.
     async refreshFromDisk() {
@@ -471,7 +480,7 @@ export const useDiffStore = defineStore('diff', {
       const res = await window.api.restoreConfig(passphrase)
       if (res.ok) {
         if (res.snippets) await useSnippetStore().restoreBundle(res.snippets)
-        if (res.settings?.theme && res.settings.theme !== this.theme) this.toggleTheme()
+        if (res.settings?.theme) this.setTheme(res.settings.theme)
         this.showNotice('Configuration restored — identity keys and trusted hosts are updated.')
       } else if (res.error === 'wrong-passphrase') {
         this.showNotice('Wrong passphrase, or the file is corrupted.')
diff --git a/src/renderer/src/stores/settingsStore.js b/src/renderer/src/stores/settingsStore.js
index 854df96..3ba8032 100644
--- a/src/renderer/src/stores/settingsStore.js
+++ b/src/renderer/src/stores/settingsStore.js
@@ -25,7 +25,10 @@ export const DEFAULT_SETTINGS = {
   shelfOrder: {},
   showShortcutBar: true,
   maxComparisonFileMb: DEFAULT_MAX_COMPARISON_FILE_MB,
-  maxSnippetSizeKb: DEFAULT_MAX_SNIPPET_SIZE_KB
+  maxSnippetSizeKb: DEFAULT_MAX_SNIPPET_SIZE_KB,
+  // Whether the one-time first-run example snippet decision has been made (see
+  // App.vue). Recorded for everyone once, so the example is never re-seeded.
+  examplesSeeded: false
 }
 
 const clampNumber = (value, fallback, min, max) => {
@@ -71,7 +74,8 @@ function readState() {
       DEFAULT_MAX_SNIPPET_SIZE_KB,
       16,
       MAX_SNIPPET_SIZE_KB_CAP
-    )
+    ),
+    examplesSeeded: parsed.examplesSeeded === true
   }
 }
 
@@ -91,10 +95,17 @@ export const useSettingsStore = defineStore('settings', {
           shelfOrder: this.shelfOrder,
           showShortcutBar: this.showShortcutBar,
           maxComparisonFileMb: this.maxComparisonFileMb,
-          maxSnippetSizeKb: this.maxSnippetSizeKb
+          maxSnippetSizeKb: this.maxSnippetSizeKb,
+          examplesSeeded: this.examplesSeeded
         })
       )
     },
+    // Record that the one-time first-run example decision has been made.
+    markExamplesSeeded() {
+      if (this.examplesSeeded) return
+      this.examplesSeeded = true
+      this.persist()
+    },
     // Move a section one step up or down (delta -1 / +1). No-op at the ends.
     moveSection(id, delta) {
       const order = [...this.sectionOrder]
diff --git a/src/renderer/src/stores/snippetStore.js b/src/renderer/src/stores/snippetStore.js
index 544bfbd..9341fa2 100644
--- a/src/renderer/src/stores/snippetStore.js
+++ b/src/renderer/src/stores/snippetStore.js
@@ -117,6 +117,24 @@ function readState() {
 // stay free metadata.
 const entryAad = (id, aadSalt, createdAt) => [id, aadSalt, createdAt].join('|')
 
+// Seeded once into a brand-new, empty library so a first-time user meets the
+// snippet feature with something real: a Mermaid diagram that both renders in
+// the preview and describes what snippets do. It goes through the normal add()
+// path, so it is encrypted at rest like any other snippet and can be edited or
+// deleted freely.
+export const EXAMPLE_SNIPPET = {
+  name: 'Example — Mermaid diagram',
+  language: 'mermaid',
+  tags: ['example'],
+  content: `flowchart TD
+    A[New snippet] --> B{Syntax?}
+    B -- Mermaid --> C[Live diagram preview]
+    B -- Anything else --> D[Syntax-highlighted text]
+    C --> E[Expand for a zoomable view]
+    C --> F[Encrypted at rest, like every snippet]
+    D --> F`
+}
+
 // A snippet's effective syntax. Content is encrypted at rest, so the sidebar
 // can't re-detect it — `detected` is recorded whenever the content is written
 // and stands in for a snippet left on 'auto'. Entries saved before this field
@@ -197,6 +215,11 @@ export const useSnippetStore = defineStore('snippets', {
       }
       return out
     },
+    // Add the starter snippet. Returns its id, or null if the vault key wasn't
+    // available (so the caller can leave the first-run flag unset and retry).
+    async seedExample() {
+      return this.add({ ...EXAMPLE_SNIPPET })
+    },
     // Opens the snippet editor prefilled from a Tools dialog's "Add to Snippets".
     startNewSnippetFrom(content, language) {
       this.editingSnippet = {
diff --git a/src/renderer/src/styles/themes.css b/src/renderer/src/styles/themes.css
index 866b33e..adc78a1 100644
--- a/src/renderer/src/styles/themes.css
+++ b/src/renderer/src/styles/themes.css
@@ -1,59 +1,126 @@
-/* Color themes. Kept separate from tokens.css on purpose: tokens.css holds the
+/* Colour themes. Kept separate from tokens.css on purpose: tokens.css holds the
    theme-independent structure (spacing, radius, type, control heights) that must
-   never change between themes, while THIS file holds only the palette. To add a
-   new theme, add a `:root[data-theme='name']` block here that redefines every
-   token the default (dark) block sets — nothing structural, so alignment and
-   sizing stay identical across themes. The theme toggle stamps data-theme on
-   :root; the store persists the choice (see diffStore.applyTheme). */
+   never change between themes, while THIS file holds only the palette. The theme
+   toggle stamps data-theme on :root; the store persists the choice (see
+   diffStore.applyTheme / utils/themes.js). To add a theme, add a
+   `:root[data-theme='name']` block that redefines every token below — nothing
+   structural, so alignment and sizing stay identical across themes.
 
-/* Default (dark). */
+   The DEFAULT is Light: it lives on the bare :root, so a theme id with no block
+   (or before JS runs) renders light rather than flashing dark. */
 :root {
+  --bg: #ffffff;
+  --bg-panel: #f6f8fa;
+  --bg-hover: #eaeef2;
+  --border: #d0d7de;
+  --text: #1f2328;
+  --text-dim: #656d76;
+  /* between --text and --text-dim: for hint text that must stay readable */
+  --text-hint: #454c54;
+  --accent: #0969da;
+  /* Attention-grabbing banners (format-suggestion hint, parse-error hint) —
+     deliberately more saturated than the rest of the palette. */
+  --warning-bg: #f0b429;
+  --warning-border: #bf8700;
+  --warning-text: #3b2900;
+  --danger-bg: #f85149;
+  --danger-border: #cf222e;
+  --danger-text: #ffffff;
+  /* "this parsed / these lines were added" green — readable on both panels. */
+  --success-text: #1a7f37;
+  /* Modal scrim — dims the app behind a dialog. */
+  --scrim: rgba(0, 0, 0, 0.5);
+  /* Favorites gold: the pinned-shelf tint and its stars. */
+  --favorite: #bf8700;
+  /* Text on an accent/danger fill — a token so no component hardcodes it. */
+  --text-on-accent: #ffffff;
+}
+
+/* Dark — low-glare GitHub-night. */
+:root[data-theme='dark'] {
   --bg: #0d1117;
   --bg-panel: #161b22;
   --bg-hover: #21262d;
   --border: #30363d;
   --text: #e6edf3;
   --text-dim: #8b949e;
-  /* between --text and --text-dim: for hint text that must stay readable */
   --text-hint: #c3cdd7;
   --accent: #2f81f7;
-  /* Attention-grabbing banners (format-suggestion hint, parse-error hint) —
-     deliberately more saturated than the rest of the palette. */
   --warning-bg: #d29922;
   --warning-border: #9a6700;
   --warning-text: #1a1300;
   --danger-bg: #f85149;
   --danger-border: #da3633;
   --danger-text: #ffffff;
-  /* "this parsed / these lines were added" green — readable on both panels. */
   --success-text: #3fb950;
-  /* Modal scrim — the same dim in both themes, so the app behind reads as
-     inactive without the overlay changing character. */
   --scrim: rgba(0, 0, 0, 0.5);
-  /* Favorites gold: the pinned-shelf tint and its stars. */
   --favorite: #d29922;
-  /* Text on an accent/danger fill — white in both themes, still a token so no
-     component hardcodes it. */
   --text-on-accent: #ffffff;
 }
 
-:root[data-theme='light'] {
+/* Solar — warm, high-key light; vivid orange accent, amber favourites. */
+:root[data-theme='solar'] {
+  --bg: #fffdf6;
+  --bg-panel: #fbf2dd;
+  --bg-hover: #f3e6c4;
+  --border: #e7d6ac;
+  --text: #3a2c0f;
+  --text-dim: #8a7638;
+  --text-hint: #6b5620;
+  --accent: #e8590c;
+  --warning-bg: #f59f00;
+  --warning-border: #c77800;
+  --warning-text: #3a2400;
+  --danger-bg: #e03131;
+  --danger-border: #c92a2a;
+  --danger-text: #ffffff;
+  --success-text: #2f9e44;
+  --scrim: rgba(58, 40, 12, 0.42);
+  --favorite: #f08c00;
+  --text-on-accent: #ffffff;
+}
+
+/* Neon — electric cyan and neon add/remove on deep navy. */
+:root[data-theme='neon'] {
+  --bg: #090d18;
+  --bg-panel: #111829;
+  --bg-hover: #1b2540;
+  --border: #26344f;
+  --text: #e9f2ff;
+  --text-dim: #8098c0;
+  --text-hint: #b9c9e6;
+  --accent: #22d3ee;
+  --warning-bg: #fbbf24;
+  --warning-border: #d99e00;
+  --warning-text: #1a1400;
+  --danger-bg: #fb7185;
+  --danger-border: #f43f5e;
+  --danger-text: #0b0f1a;
+  --success-text: #4ade80;
+  --scrim: rgba(0, 0, 0, 0.6);
+  --favorite: #fde047;
+  --text-on-accent: #04121a;
+}
+
+/* Contrast — maximum legibility: black on white, saturated accent, heavy
+   borders. An accessibility-grade pick. */
+:root[data-theme='contrast'] {
   --bg: #ffffff;
-  --bg-panel: #f6f8fa;
-  --bg-hover: #eaeef2;
-  --border: #d0d7de;
-  --text: #1f2328;
-  --text-dim: #656d76;
-  --text-hint: #454c54;
-  --accent: #0969da;
-  --warning-bg: #f0b429;
-  --warning-border: #bf8700;
-  --warning-text: #3b2900;
-  --danger-bg: #f85149;
-  --danger-border: #cf222e;
+  --bg-panel: #f2f2f2;
+  --bg-hover: #e2e2e2;
+  --border: #111111;
+  --text: #000000;
+  --text-dim: #333333;
+  --text-hint: #1a1a1a;
+  --accent: #1633d4;
+  --warning-bg: #ffcc00;
+  --warning-border: #b38f00;
+  --warning-text: #000000;
+  --danger-bg: #cc0000;
+  --danger-border: #990000;
   --danger-text: #ffffff;
-  --success-text: #1a7f37;
-  --scrim: rgba(0, 0, 0, 0.5);
-  --favorite: #bf8700;
+  --success-text: #05702f;
+  --scrim: rgba(0, 0, 0, 0.55);
+  --favorite: #a35c00;
   --text-on-accent: #ffffff;
 }
diff --git a/src/renderer/src/styles/tokens.css b/src/renderer/src/styles/tokens.css
index 01c45e6..d23fa72 100644
--- a/src/renderer/src/styles/tokens.css
+++ b/src/renderer/src/styles/tokens.css
@@ -22,6 +22,14 @@
   /* Control heights: sidebar/toolbar controls, then dialog buttons. */
   --control-h-sm: 26px;
   --control-h: 30px;
+  /* Vertical band rhythm. A "band" is a full-width horizontal strip (the file
+     slots row, a section header, the toolbar) that vertically centers its
+     content with flexbox — never fake-aligned with top padding. --band-row is
+     the shared height of the row bands: the file-slots row and EVERY sidebar
+     section header. One height means the first header lines up with the file
+     inputs across the divider, and all the section headers match each other.
+     See .band in ui.css. */
+  --band-row: 52px;
   /* Spacing rhythm. Prefer these over ad-hoc pixel padding so panels and
      buttons share one rhythm and never drift apart. */
   --space-1: 4px;
diff --git a/src/renderer/src/styles/ui.css b/src/renderer/src/styles/ui.css
index 066c851..594363a 100644
--- a/src/renderer/src/styles/ui.css
+++ b/src/renderer/src/styles/ui.css
@@ -7,6 +7,26 @@
    where a component really needs an override — keep those to layout (width,
    flex, margin), not to size, radius or color. */
 
+/* --- Horizontal bands ---------------------------------------------------
+   A band is any full-width strip that lays controls out in a row: the toolbar,
+   the file-slots row, every section header. The rule, app-wide: a band centers
+   its content vertically with flexbox and NEVER fakes alignment with top
+   padding — magic top-padding drifts the moment a font size or line-height
+   changes, which is exactly how the sidebar header stopped lining up with the
+   file inputs. Give a band a height (or min-height) and let `align-items:
+   center` place the content; use padding only for horizontal inset.
+
+   `.band-row` additionally pins the height to --band-row, the shared height of
+   the TOP band in each column — so the file-slots row and the first section
+   header line up across the divider by construction. */
+.band {
+  display: flex;
+  align-items: center;
+}
+.band-row {
+  min-height: var(--band-row);
+}
+
 .btn {
   display: inline-flex;
   align-items: center;
diff --git a/src/renderer/src/utils/mermaid.js b/src/renderer/src/utils/mermaid.js
index cd9b295..b64dbde 100644
--- a/src/renderer/src/utils/mermaid.js
+++ b/src/renderer/src/utils/mermaid.js
@@ -1,11 +1,12 @@
 // Pure Mermaid helpers — no `mermaid` import, so this stays unit-testable and
 // adds nothing to the bundle. The heavy library is loaded lazily elsewhere
 // (composables/useMermaid.js), only once a diagram is actually rendered.
+import { isDarkTheme } from './themes'
 
 // The leading keyword of every Mermaid diagram type we recognize for
 // auto-detection. Matched against the first non-empty, non-directive line so a
 // pasted diagram is offered the Mermaid syntax without the user picking it.
-const MERMAID_KEYWORDS = [
+export const MERMAID_KEYWORDS = [
   'flowchart',
   'graph',
   'sequenceDiagram',
@@ -85,11 +86,11 @@ export function looksLikeMermaid(text) {
   return false
 }
 
-// Diagram theme paired to the app theme (decided in project memory): the dark
-// UI gets Mermaid's dark theme, the light UI its clean default — so diagram
-// text never blends into the canvas. Callers re-render when the app theme flips.
+// Diagram theme paired to the app theme: dark-ground themes get Mermaid's dark
+// theme, light-ground ones its clean default — so diagram text never blends into
+// the canvas. Callers re-render when the app theme flips.
 export function mermaidThemeFor(appTheme) {
-  return appTheme === 'light' ? 'default' : 'dark'
+  return isDarkTheme(appTheme) ? 'dark' : 'default'
 }
 
 // Per-render DOM id. Mermaid needs a unique, CSS-selector-safe id for the
diff --git a/src/renderer/src/utils/themes.js b/src/renderer/src/utils/themes.js
new file mode 100644
index 0000000..77221cd
--- /dev/null
+++ b/src/renderer/src/utils/themes.js
@@ -0,0 +1,49 @@
+// The selectable colour themes. Pure data + helpers (no Vue/store), so the
+// store, the Monaco wiring, and the Mermaid renderer all share one source of
+// truth for what a theme is and whether it sits on a dark or light ground.
+//
+// `dark` drives the editor/diagram theme: dark-ground themes get Monaco's
+// vs-dark and Mermaid's dark theme; light-ground themes get vs / default. The
+// palette itself lives in styles/themes.css, keyed by the same id.
+// `swatch` is just for the Settings picker's preview chips.
+export const THEMES = [
+  {
+    id: 'light',
+    label: 'Light',
+    dark: false,
+    swatch: { bg: '#ffffff', accent: '#0969da', add: '#1a7f37', del: '#cf222e' }
+  },
+  {
+    id: 'dark',
+    label: 'Dark',
+    dark: true,
+    swatch: { bg: '#161b22', accent: '#2f81f7', add: '#3fb950', del: '#f85149' }
+  },
+  {
+    id: 'solar',
+    label: 'Solar',
+    dark: false,
+    swatch: { bg: '#fbf2dd', accent: '#e8590c', add: '#2f9e44', del: '#e03131' }
+  },
+  {
+    id: 'neon',
+    label: 'Neon',
+    dark: true,
+    swatch: { bg: '#111829', accent: '#22d3ee', add: '#4ade80', del: '#fb7185' }
+  },
+  {
+    id: 'contrast',
+    label: 'Contrast',
+    dark: false,
+    swatch: { bg: '#ffffff', accent: '#1633d4', add: '#05702f', del: '#c20000' }
+  }
+]
+
+export const DEFAULT_THEME = 'light'
+
+const BY_ID = new Map(THEMES.map((t) => [t.id, t]))
+
+export const isValidTheme = (id) => BY_ID.has(id)
+// Unknown/absent ids fall back to the default rather than breaking the UI.
+export const normalizeTheme = (id) => (BY_ID.has(id) ? id : DEFAULT_THEME)
+export const isDarkTheme = (id) => BY_ID.get(id)?.dark ?? false
diff --git a/tests/renderer/composables/useBackdropClose.test.js b/tests/renderer/composables/useBackdropClose.test.js
new file mode 100644
index 0000000..e085153
--- /dev/null
+++ b/tests/renderer/composables/useBackdropClose.test.js
@@ -0,0 +1,46 @@
+import { describe, expect, it, vi } from 'vitest'
+import { useBackdropClose } from '../../../src/renderer/src/composables/useBackdropClose'
+
+// A minimal event: what matters is where it started (pointerdown target) and
+// where the click landed (click target) relative to the backdrop.
+const backdrop = { id: 'backdrop' }
+const panel = { id: 'panel' }
+const ev = (target) => ({ target, currentTarget: backdrop })
+
+describe('useBackdropClose', () => {
+  it('closes when the press and the click both land on the backdrop', () => {
+    const close = vi.fn()
+    const { onPointerDown, onClick } = useBackdropClose(close)
+    onPointerDown(ev(backdrop))
+    onClick(ev(backdrop))
+    expect(close).toHaveBeenCalledTimes(1)
+  })
+
+  // The regression: a resize drag begins on the panel and releases over the
+  // backdrop, so the click target is the backdrop. It must NOT close.
+  it('does not close when a drag starts on the panel and releases on the backdrop', () => {
+    const close = vi.fn()
+    const { onPointerDown, onClick } = useBackdropClose(close)
+    onPointerDown(ev(panel)) // press began inside the panel (resize handle)
+    onClick(ev(backdrop)) // click bubbles to the backdrop after the drag
+    expect(close).not.toHaveBeenCalled()
+  })
+
+  it('does not close on a click that bubbles up from inside the panel', () => {
+    const close = vi.fn()
+    const { onPointerDown, onClick } = useBackdropClose(close)
+    onPointerDown(ev(backdrop))
+    onClick(ev(panel))
+    expect(close).not.toHaveBeenCalled()
+  })
+
+  it('re-arms each interaction: a real backdrop click still closes after a drag', () => {
+    const close = vi.fn()
+    const { onPointerDown, onClick } = useBackdropClose(close)
+    onPointerDown(ev(panel))
+    onClick(ev(backdrop)) // drag release — no close
+    onPointerDown(ev(backdrop))
+    onClick(ev(backdrop)) // deliberate backdrop click — closes
+    expect(close).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/tests/renderer/composables/useCopyFeedback.test.js b/tests/renderer/composables/useCopyFeedback.test.js
new file mode 100644
index 0000000..af5afea
--- /dev/null
+++ b/tests/renderer/composables/useCopyFeedback.test.js
@@ -0,0 +1,51 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { effectScope } from 'vue'
+import { useCopyFeedback } from '../../../src/renderer/src/composables/useCopyFeedback'
+
+describe('useCopyFeedback', () => {
+  beforeEach(() => vi.useFakeTimers())
+  afterEach(() => vi.useRealTimers())
+
+  it('flips copied true on flash and clears itself after the duration', () => {
+    const { copied, flash } = useCopyFeedback(1000)
+    expect(copied.value).toBe(false)
+    flash()
+    expect(copied.value).toBe(true)
+    vi.advanceTimersByTime(999)
+    expect(copied.value).toBe(true)
+    vi.advanceTimersByTime(1)
+    expect(copied.value).toBe(false)
+  })
+
+  it('restarts the timer on a repeat flash rather than clearing early', () => {
+    const { copied, flash } = useCopyFeedback(1000)
+    flash()
+    vi.advanceTimersByTime(800)
+    flash() // second click before the first window elapsed
+    vi.advanceTimersByTime(800) // 1600ms since first, 800ms since second
+    expect(copied.value).toBe(true)
+    vi.advanceTimersByTime(200)
+    expect(copied.value).toBe(false)
+  })
+
+  it('cancel clears the state and pending timer immediately', () => {
+    const { copied, flash, cancel } = useCopyFeedback(1000)
+    flash()
+    cancel()
+    expect(copied.value).toBe(false)
+    vi.advanceTimersByTime(1000) // the cancelled timer must not fire
+    expect(copied.value).toBe(false)
+  })
+
+  it('disposing the scope clears a pending timer so it never writes after unmount', () => {
+    const scope = effectScope()
+    let api
+    scope.run(() => {
+      api = useCopyFeedback(1000)
+      api.flash()
+    })
+    scope.stop()
+    vi.advanceTimersByTime(1000)
+    expect(api.copied.value).toBe(true) // left as-is; timer was cleared, not fired
+  })
+})
diff --git a/tests/renderer/stores/diffStore.test.js b/tests/renderer/stores/diffStore.test.js
index b2ddbd6..5cc5964 100644
--- a/tests/renderer/stores/diffStore.test.js
+++ b/tests/renderer/stores/diffStore.test.js
@@ -296,15 +296,28 @@ describe('diffStore', () => {
     expect(store.leftFormatHint).not.toBeNull() // new content, dismissal doesn't carry over
   })
 
-  it('toggleTheme flips the theme, persists it, and stamps the document', () => {
+  it('defaults to Light and toggleTheme flips the ground, persisting + stamping', () => {
     const store = useDiffStore()
+    expect(store.theme).toBe('light') // Light is the default
+    store.toggleTheme()
     expect(store.theme).toBe('dark')
+    expect(localStorage.getItem('diffbro.theme')).toBe('dark')
+    expect(document.documentElement.dataset.theme).toBe('dark')
     store.toggleTheme()
     expect(store.theme).toBe('light')
-    expect(localStorage.getItem('diffbro.theme')).toBe('light')
-    expect(document.documentElement.dataset.theme).toBe('light')
+  })
+
+  it('setTheme applies any named theme and normalizes an unknown one to Light', () => {
+    const store = useDiffStore()
+    store.setTheme('neon')
+    expect(store.theme).toBe('neon')
+    expect(document.documentElement.dataset.theme).toBe('neon')
+    expect(localStorage.getItem('diffbro.theme')).toBe('neon')
+    // Ctrl+D from a dark-ground theme flips to Light.
     store.toggleTheme()
-    expect(store.theme).toBe('dark')
+    expect(store.theme).toBe('light')
+    store.setTheme('bogus')
+    expect(store.theme).toBe('light')
   })
   it('adds a trusted key before clearing the pending state, then opens the manager', async () => {
     const store = useDiffStore()
@@ -576,12 +589,12 @@ describe('diffStore', () => {
 
   it('config restore applies the backed-up theme and distinguishes a wrong passphrase', async () => {
     const store = useDiffStore()
-    expect(store.theme).toBe('dark')
+    expect(store.theme).toBe('light')
     window.api = {
-      restoreConfig: async () => ({ ok: true, snippets: null, settings: { theme: 'light' } })
+      restoreConfig: async () => ({ ok: true, snippets: null, settings: { theme: 'neon' } })
     }
     await store.runConfigRestore('passphrase')
-    expect(store.theme).toBe('light')
+    expect(store.theme).toBe('neon')
     expect(store.notice).toContain('Configuration restored')
 
     window.api = { restoreConfig: async () => ({ error: 'wrong-passphrase' }) }
diff --git a/tests/renderer/stores/settingsStore.test.js b/tests/renderer/stores/settingsStore.test.js
index a562381..01ab28c 100644
--- a/tests/renderer/stores/settingsStore.test.js
+++ b/tests/renderer/stores/settingsStore.test.js
@@ -38,6 +38,16 @@ describe('settingsStore', () => {
     expect(useSettingsStore().sectionOrder).toEqual(['snippets', 'saved', 'external'])
   })
 
+  it('records the one-time example-seed decision and persists it', () => {
+    const s = useSettingsStore()
+    expect(s.examplesSeeded).toBe(false) // fresh install: not yet decided
+    s.markExamplesSeeded()
+    expect(s.examplesSeeded).toBe(true)
+    // survives a reload, so the example is never seeded twice
+    setActivePinia(createPinia())
+    expect(useSettingsStore().examplesSeeded).toBe(true)
+  })
+
   it('repairs a corrupt or partial persisted section order', () => {
     localStorage.setItem(
       'diffbro.settings',
diff --git a/tests/renderer/stores/snippetStore.test.js b/tests/renderer/stores/snippetStore.test.js
index 9e30da0..f106850 100644
--- a/tests/renderer/stores/snippetStore.test.js
+++ b/tests/renderer/stores/snippetStore.test.js
@@ -9,6 +9,7 @@ import { vaultDecrypt, vaultEncrypt } from '../../../src/main/vaultCrypt'
 import { createIdentityKeys } from '../../../src/main/sealing'
 import { openSnippets, sealSnippets } from '../../../src/main/snippetSealing'
 import {
+  EXAMPLE_SNIPPET,
   TAG_PALETTE,
   languageOf,
   useSnippetStore
@@ -36,6 +37,30 @@ beforeEach(() => {
   }
 })
 
+describe('snippetStore — first-run example', () => {
+  it('seeds the Mermaid example through the normal encrypted add path', async () => {
+    const store = useSnippetStore()
+    const id = await store.seedExample()
+    expect(id).toBeTruthy()
+    expect(store.entries).toHaveLength(1)
+    const [entry] = store.entries
+    expect(entry.name).toBe(EXAMPLE_SNIPPET.name)
+    expect(languageOf(entry)).toBe('mermaid')
+    // stored encrypted, decrypts back to the example content
+    const raw = localStorage.getItem('diffbro.snippets')
+    expect(raw).not.toContain('flowchart')
+    await expect(store.load(id)).resolves.toBe(EXAMPLE_SNIPPET.content)
+  })
+
+  it('reports null (and seeds nothing) when the vault key is unavailable', async () => {
+    const store = useSnippetStore()
+    window.api.vaultEncrypt = async () => ({ error: 'vault-key-unavailable' })
+    const id = await store.seedExample()
+    expect(id).toBeNull()
+    expect(store.entries).toHaveLength(0)
+  })
+})
+
 describe('snippetStore — effective language', () => {
   const DIAGRAM = 'flowchart TD\n  A --> B'
 
diff --git a/tests/renderer/utils/mermaid.test.js b/tests/renderer/utils/mermaid.test.js
index 5943cf0..34796f9 100644
--- a/tests/renderer/utils/mermaid.test.js
+++ b/tests/renderer/utils/mermaid.test.js
@@ -57,7 +57,8 @@ describe('mermaidThemeFor', () => {
   it('pairs the diagram theme to the app theme', () => {
     expect(mermaidThemeFor('light')).toBe('default')
     expect(mermaidThemeFor('dark')).toBe('dark')
-    expect(mermaidThemeFor(undefined)).toBe('dark') // dark is the default UI
+    expect(mermaidThemeFor('neon')).toBe('dark') // a dark-ground theme
+    expect(mermaidThemeFor(undefined)).toBe('default') // Light is the default ground
   })
 })
 
diff --git a/tests/renderer/utils/themes.test.js b/tests/renderer/utils/themes.test.js
new file mode 100644
index 0000000..a85765f
--- /dev/null
+++ b/tests/renderer/utils/themes.test.js
@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+import {
+  THEMES,
+  DEFAULT_THEME,
+  isValidTheme,
+  isDarkTheme,
+  normalizeTheme
+} from '../../../src/renderer/src/utils/themes'
+
+describe('themes registry', () => {
+  it('offers the five named themes, Light first and the default', () => {
+    expect(THEMES.map((t) => t.id)).toEqual(['light', 'dark', 'solar', 'neon', 'contrast'])
+    expect(DEFAULT_THEME).toBe('light')
+    expect(THEMES[0].id).toBe(DEFAULT_THEME)
+  })
+
+  it('marks each theme dark- or light-ground (drives the editor/diagram theme)', () => {
+    const dark = THEMES.filter((t) => t.dark).map((t) => t.id)
+    expect(dark).toEqual(['dark', 'neon'])
+    expect(isDarkTheme('neon')).toBe(true)
+    expect(isDarkTheme('solar')).toBe(false)
+    expect(isDarkTheme('nope')).toBe(false)
+  })
+
+  it('validates ids and normalizes unknown/absent ones to the default', () => {
+    expect(isValidTheme('contrast')).toBe(true)
+    expect(isValidTheme('midnight')).toBe(false)
+    expect(normalizeTheme('solar')).toBe('solar')
+    expect(normalizeTheme('midnight')).toBe(DEFAULT_THEME)
+    expect(normalizeTheme(undefined)).toBe(DEFAULT_THEME)
+  })
+
+  it('gives every theme a preview swatch for the picker', () => {
+    for (const t of THEMES) {
+      expect(t.label).toBeTruthy()
+      for (const k of ['bg', 'accent', 'add', 'del']) {
+        expect(t.swatch[k]).toMatch(/^#[0-9a-f]{6}$/i)
+      }
+    }
+  })
+})

From bdb7b2a08e65033f958aaa189b7c9a4a6ea00b5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mindaugas=20Kasparavic=CC=8Cius?= <kasp.mindaugas@gmail.com>
Date: Thu, 23 Jul 2026 08:55:38 +0300
Subject: [PATCH 10/10] Expand test coverage and snippet language
 auto-detection
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tests
- E2E (Playwright _electron): paste-compare diff stats, save + relaunch
  reopen (vault encrypt/decrypt round-trip), Share first-time key setup,
  Mermaid viewer + editor preview SVGs, real OS-clipboard write, on-the-fly
  category creation, and the editor's live auto-detect indicator.
- Unit: useTagInput (commit/dedupe/cap/backspace event logic) and
  useSnippetFilters (name/tag search, AND-composition, DEFAULT, favorites) —
  the previously untested composables CLAUDE.md flags as the home for this
  interaction logic.

Auto-detect
- detectSnippetLanguage now covers every offered syntax (adds YAML/K8s,
  Python, shell, PHP, JS, TS, XML, HTML, CSS, Dockerfile, Go, Rust, Java),
  ordered most-distinctive-first with anti-false-positive guards (fenced
  block is Markdown not its inner code; TS before JS; HTML-only tags before
  generic XML; code braces disqualify CSS/YAML). Best-effort — a miss lands
  on plaintext rather than mis-coloring. Positive + negative test matrix.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 DEVELOPMENT_PLAN.md                           |  19 +-
 e2e/category.spec.mjs                         |  32 +++
 e2e/clipboard.spec.mjs                        |  24 +++
 e2e/detect-language.spec.mjs                  |  26 +++
 e2e/diff.spec.mjs                             |  28 +++
 e2e/mermaid.spec.mjs                          |  38 ++++
 e2e/saved-diff.spec.mjs                       |  48 +++++
 e2e/share.spec.mjs                            |  31 +++
 src/renderer/src/utils/detectLanguage.js      | 193 ++++++++++++++++--
 .../composables/useSnippetFilters.test.js     | 147 +++++++++++++
 .../renderer/composables/useTagInput.test.js  | 121 +++++++++++
 tests/renderer/utils/detectLanguage.test.js   | 142 ++++++++++---
 12 files changed, 810 insertions(+), 39 deletions(-)
 create mode 100644 e2e/category.spec.mjs
 create mode 100644 e2e/clipboard.spec.mjs
 create mode 100644 e2e/detect-language.spec.mjs
 create mode 100644 e2e/diff.spec.mjs
 create mode 100644 e2e/mermaid.spec.mjs
 create mode 100644 e2e/saved-diff.spec.mjs
 create mode 100644 e2e/share.spec.mjs
 create mode 100644 tests/renderer/composables/useSnippetFilters.test.js
 create mode 100644 tests/renderer/composables/useTagInput.test.js

diff --git a/DEVELOPMENT_PLAN.md b/DEVELOPMENT_PLAN.md
index 3e9c638..560dc3b 100644
--- a/DEVELOPMENT_PLAN.md
+++ b/DEVELOPMENT_PLAN.md
@@ -108,9 +108,13 @@ First run: `npm install && npm run dev`
 - [x] End-to-end suite in `e2e/` (Playwright `_electron`, `make e2e`): drives
       the built app in an isolated `--user-data-dir`, no bundled browser / no
       network. Covers launch smoke, the Settings domain-pane rail, theme apply +
-      persistence across a relaunch, and the snippet copy "Copied" flash. Caught
-      a real shipping bug — `navigator.clipboard.writeText` is denied by the
-      deny-all permission handler, so all clipboard writes now go through the
+      persistence across a relaunch, the snippet copy "Copied" flash + the real
+      OS-clipboard write, paste-compare diffing with Monaco stats, saving a diff
+      and reopening it after a relaunch (the full vault encrypt→store→decrypt
+      round-trip), the Share two-step flow into first-time key setup, and Mermaid
+      rendering in both the diagram viewer and the snippet editor's live preview.
+      Caught a real shipping bug — `navigator.clipboard.writeText` is denied by
+      the deny-all permission handler, so all clipboard writes now go through the
       main process (`src/main/clipboard.js`, `window.api.copyText`).
 - [x] Five selectable themes (Light default, Dark, Solar, Neon, Contrast) —
       registry in `utils/themes.js`, palette per theme on `:root[data-theme]`,
@@ -144,6 +148,15 @@ First run: `npm install && npm run dev`
 - [x] Live preview in the snippet editor + a resizable, zoom/pan diagram viewer;
       diagram theme paired to the app theme (dark → `dark`, light → `default`),
       re-rendered on theme switch so text never blends into the canvas
+- [x] Auto-detect for the snippet editor's syntax picker
+      (`utils/detectLanguage.js`): distinctive, low-ambiguity signals for every
+      offered language (JSON, Mermaid, SQL, Markdown, YAML/K8s, Python, shell,
+      PHP, JS, TS, XML, HTML, CSS, Dockerfile, Go, Rust, Java), ordered
+      most-distinctive-first with anti-false-positive guards (a fenced block is
+      Markdown not its inner code; TS before JS; HTML-only tags before generic
+      XML; code braces disqualify CSS/YAML). Best-effort — a miss lands on
+      plaintext rather than mis-coloring. Covered by a positive-plus-negative
+      test matrix in `tests/renderer/utils/detectLanguage.test.js`.
 
 ## Phase 2.6 – UI/UX refinements ✅
 
diff --git a/e2e/category.spec.mjs b/e2e/category.spec.mjs
new file mode 100644
index 0000000..387b78d
--- /dev/null
+++ b/e2e/category.spec.mjs
@@ -0,0 +1,32 @@
+import { test, expect } from './fixtures.mjs'
+
+// Creating a category on the fly from the Save dialog is a UI seam the store
+// tests can't reach: the "+ New category…" option reveals a name field, and on
+// save the diff must file into a freshly created, auto-expanded shelf in the
+// sidebar. Uses paste-compare to make something saveable without a file dialog.
+test('saving into a new category creates its shelf and files the diff there', async ({ page }) => {
+  const CATEGORY = 'E2E work items'
+  const DIFF = 'Categorised diff'
+
+  await page.getByRole('button', { name: 'Paste text' }).click()
+  await page.getByPlaceholder('Paste original text here').fill('a')
+  await page.getByPlaceholder('Paste changed text here').fill('b')
+  await page.getByRole('button', { name: 'Compare', exact: true }).click()
+
+  await page.getByRole('button', { name: 'Save', exact: true }).click()
+  const dialog = page.getByRole('dialog', { name: 'Save diff' })
+  await dialog.getByLabel('Name', { exact: true }).fill(DIFF)
+
+  // Choosing "+ New category…" (value __new__) reveals the name field; fill it,
+  // then save. Selected by value — the option label carries an ellipsis, and the
+  // wrapping <label> is non-exact because the <select>'s option text is part of
+  // its accessible name.
+  await dialog.getByLabel('Category').selectOption('__new__')
+  await dialog.getByLabel('New category name').fill(CATEGORY)
+  await dialog.getByRole('button', { name: 'Save', exact: true }).click()
+
+  // The new shelf appears (auto-expanded) with the diff filed under it.
+  await expect(page.getByText('Saved (encrypted)')).toBeVisible()
+  await expect(page.locator('.cat-name', { hasText: CATEGORY })).toBeVisible()
+  await expect(page.getByText(DIFF)).toBeVisible()
+})
diff --git a/e2e/clipboard.spec.mjs b/e2e/clipboard.spec.mjs
new file mode 100644
index 0000000..4f5fe90
--- /dev/null
+++ b/e2e/clipboard.spec.mjs
@@ -0,0 +1,24 @@
+import { test, expect } from './fixtures.mjs'
+
+// The snippet copy test asserts the "Copied" flash fired; this asserts the
+// bytes actually landed on the OS clipboard. That is the half jsdom can never
+// see and the exact seam the deny-all permission handler broke: a renderer
+// navigator.clipboard.writeText() is rejected, so copy goes through
+// window.api.copyText -> clipboard:write (main). Reading the clipboard back
+// from the main process proves that whole round-trip, not just the timer.
+test('copying a snippet writes its content to the OS clipboard', async ({ app, page }) => {
+  const row = page.getByText('Example — Mermaid diagram')
+  await expect(row).toBeVisible() // the seeded first-run example
+
+  await row.hover()
+  await page.getByRole('button', { name: 'Copy to clipboard' }).click()
+  await expect(page.getByText('Copied', { exact: true })).toBeVisible()
+
+  // Read the real OS clipboard from the main process (the renderer can't — the
+  // permission handler blocks navigator.clipboard). The seeded snippet is a
+  // Mermaid flowchart, decrypted from the vault before the copy, so seeing its
+  // text here confirms load -> decrypt -> copyText -> clipboard end to end.
+  const clip = await app.evaluate(({ clipboard }) => clipboard.readText())
+  expect(clip).toContain('flowchart TD')
+  expect(clip).toContain('Encrypted at rest, like every snippet')
+})
diff --git a/e2e/detect-language.spec.mjs b/e2e/detect-language.spec.mjs
new file mode 100644
index 0000000..e7c5ff9
--- /dev/null
+++ b/e2e/detect-language.spec.mjs
@@ -0,0 +1,26 @@
+import { test, expect } from './fixtures.mjs'
+
+// Auto-detect drives the snippet editor's syntax indicator live as you type: on
+// 'Auto-detect', the picker shows "→ <detected>" recomputed from the Monaco
+// content. Only a real launch exercises this end to end — Monaco typing feeding
+// the detector feeding the reactive label — so this guards the wiring the unit
+// tests can't (they call the pure detector directly, never through the editor).
+test('the editor shows and updates the auto-detected syntax as you type', async ({ page }) => {
+  await page.getByRole('button', { name: '+ New snippet' }).click()
+  const dialog = page.getByRole('dialog', { name: 'New Snippet' })
+  await expect(dialog).toBeVisible()
+
+  // A blank draft detects as plaintext — the baseline the indicator starts on.
+  const detected = dialog.locator('.lang-detected')
+  await expect(detected).toHaveText('→ plaintext')
+
+  // Type a shebang (bracket-free, so Monaco's auto-closing can't perturb it):
+  // the detector reads the interpreter and the label flips to shell.
+  await dialog.locator('.editor').click()
+  await page.keyboard.type('#!/bin/bash')
+  await expect(detected).toHaveText('→ shell')
+
+  // Choosing an explicit syntax overrides auto-detect, and the "→" hint hides.
+  await dialog.getByLabel('Syntax').selectOption('python')
+  await expect(detected).toBeHidden()
+})
diff --git a/e2e/diff.spec.mjs b/e2e/diff.spec.mjs
new file mode 100644
index 0000000..9efbc1c
--- /dev/null
+++ b/e2e/diff.spec.mjs
@@ -0,0 +1,28 @@
+import { test, expect } from './fixtures.mjs'
+
+// Paste-compare is the one diff path that needs no native file dialog: type two
+// texts, hit Compare, and Monaco must diff them. This proves the renderer's
+// Monaco diff editor actually mounts, computes line changes, and reports them —
+// jsdom has no layout, so the diff editor and its onDidUpdateDiff stats can't be
+// exercised in a unit test.
+test('paste-compare diffs two texts and reports the change stats', async ({ page }) => {
+  // The empty state is what a fresh window shows; it must give way to the diff.
+  await expect(page.getByText('Choose or drop two files to compare.')).toBeVisible()
+
+  await page.getByRole('button', { name: 'Paste text' }).click()
+  await page.getByPlaceholder('Paste original text here').fill('alpha\ngamma')
+  await page.getByPlaceholder('Paste changed text here').fill('alpha\nZEBRA\ngamma')
+  await page.getByRole('button', { name: 'Compare', exact: true }).click()
+
+  // The empty state is gone and the diff editor took over.
+  await expect(page.getByText('Choose or drop two files to compare.')).toBeHidden()
+
+  // One inserted line → one addition, no deletions, surfaced in the toolbar
+  // stats (which only render once Monaco has finished a diff pass).
+  await expect(page.locator('.stats .add')).toHaveText('+1')
+  await expect(page.locator('.stats .del')).toContainText('0')
+
+  // The inserted token exists only on the changed side, so seeing it confirms
+  // Monaco painted the right model, not just that stats were computed.
+  await expect(page.getByText('ZEBRA').first()).toBeVisible()
+})
diff --git a/e2e/mermaid.spec.mjs b/e2e/mermaid.spec.mjs
new file mode 100644
index 0000000..9404543
--- /dev/null
+++ b/e2e/mermaid.spec.mjs
@@ -0,0 +1,38 @@
+import { test, expect } from './fixtures.mjs'
+
+// The seeded first-run snippet is a Mermaid diagram. Two real-launch behaviors
+// ride on it: the sidebar row opens the diagram in the resizable viewer, and the
+// snippet editor shows a live preview. Both decrypt the snippet (vault:decrypt)
+// and run Mermaid, which produces an <svg> — jsdom can't render one (no layout,
+// no getBBox), so this is the only place the "diagram actually painted" question
+// gets a real answer. A past bug shipped an invisible diagram in this very
+// viewer; these assertions keep it visible.
+test('a Mermaid snippet opens a rendered SVG in the diagram viewer', async ({ page }) => {
+  const row = page.getByText('Example — Mermaid diagram')
+  await expect(row).toBeVisible() // the seeded example
+
+  // Row actions reveal on hover; hover the name, then open the viewer.
+  await row.hover()
+  await page.getByRole('button', { name: 'View diagram' }).click()
+
+  const viewer = page.locator('.viewer-backdrop')
+  await expect(viewer).toBeVisible()
+  // Scope to the diagram host — the viewer's toolbar buttons are AppIcon <svg>s too.
+  await expect(viewer.locator('.mermaid-diagram svg').first()).toBeVisible()
+
+  // Escape closes it (the viewer's own key handler, not a BaseDialog).
+  await page.keyboard.press('Escape')
+  await expect(viewer).toBeHidden()
+})
+
+test('editing a Mermaid snippet shows a live diagram preview', async ({ page }) => {
+  await page.getByText('Example — Mermaid diagram').click()
+
+  const editor = page.getByRole('dialog', { name: 'Edit Snippet' })
+  await expect(editor).toBeVisible()
+  // The Mermaid-only preview pane renders the decrypted content as an SVG.
+  // 'Diagram preview' is exact — the Monaco content also contains the words
+  // "Live diagram preview", and the Expand button carries an AppIcon <svg>.
+  await expect(editor.getByText('Diagram preview', { exact: true })).toBeVisible()
+  await expect(editor.locator('.mmd-preview .mermaid-diagram svg').first()).toBeVisible()
+})
diff --git a/e2e/saved-diff.spec.mjs b/e2e/saved-diff.spec.mjs
new file mode 100644
index 0000000..70699ed
--- /dev/null
+++ b/e2e/saved-diff.spec.mjs
@@ -0,0 +1,48 @@
+import { rmSync } from 'node:fs'
+import { test, expect, launchApp, freshUserDataDir, firstReadyPage } from './fixtures.mjs'
+
+// Saving a diff drives the whole vault round-trip: the snapshot is AES-GCM
+// encrypted in the main process (vault:encrypt, key behind safeStorage), written
+// to the data-dir store, and must decrypt back after a relaunch (vault:decrypt)
+// to reappear in the sidebar and reopen. None of that is reachable in jsdom —
+// the key never enters the renderer. Manages its own launch/relaunch on one
+// profile, like the theme-persistence test.
+test('a saved diff persists across a relaunch and reopens', async () => {
+  const userDataDir = freshUserDataDir()
+  const NAME = 'E2E round-trip diff'
+  try {
+    let app = await launchApp(userDataDir)
+    let page = await firstReadyPage(app)
+
+    // Make something saveable via paste-compare (no file dialog needed).
+    await page.getByRole('button', { name: 'Paste text' }).click()
+    await page.getByPlaceholder('Paste original text here').fill('one\ntwo')
+    await page.getByPlaceholder('Paste changed text here').fill('one\nZULU')
+    await page.getByRole('button', { name: 'Compare', exact: true }).click()
+
+    // Save it under a known name.
+    await page.getByRole('button', { name: 'Save', exact: true }).click()
+    const dialog = page.getByRole('dialog', { name: 'Save diff' })
+    await dialog.getByLabel('Name', { exact: true }).fill(NAME)
+    await dialog.getByRole('button', { name: 'Save', exact: true }).click()
+
+    // It confirms with a toast and lands in the Saved diffs sidebar.
+    await expect(page.getByText('Saved (encrypted)')).toBeVisible()
+    await expect(page.getByText(NAME)).toBeVisible()
+    await app.close()
+
+    // Relaunch the same profile: the encrypted entry must decrypt and list.
+    app = await launchApp(userDataDir)
+    page = await firstReadyPage(app)
+    const row = page.getByText(NAME)
+    await expect(row).toBeVisible()
+
+    // Reopening restores the diff — vault:decrypt of the snapshot, then Monaco
+    // repaints the changed side (ZULU exists only on the right).
+    await row.click()
+    await expect(page.getByText('ZULU').first()).toBeVisible()
+    await app.close()
+  } finally {
+    rmSync(userDataDir, { recursive: true, force: true })
+  }
+})
diff --git a/e2e/share.spec.mjs b/e2e/share.spec.mjs
new file mode 100644
index 0000000..ba50ba0
--- /dev/null
+++ b/e2e/share.spec.mjs
@@ -0,0 +1,31 @@
+import { test, expect } from './fixtures.mjs'
+
+// Sharing seals a diff for one recipient. The full sealed-file roundtrip needs
+// native save/open dialogs and a second identity, and is already covered by the
+// crypto unit tests (sealing roundtrip/tamper/binding). What only a real launch
+// exercises — and what this guards — is the two-step share UX and the on-demand
+// identity-key creation: Share must save first (a share file needs a name and
+// expiry), then, with no trusted keys yet, drop into the one-time key-exchange
+// setup instead of a recipient picker. Rendering that dialog asks the main
+// process for this install's fingerprint, which creates its keypair in
+// safeStorage — a path jsdom can't reach.
+test('sharing with no trusted keys walks through first-time key setup', async ({ page }) => {
+  await page.getByRole('button', { name: 'Paste text' }).click()
+  await page.getByPlaceholder('Paste original text here').fill('before')
+  await page.getByPlaceholder('Paste changed text here').fill('after')
+  await page.getByRole('button', { name: 'Compare', exact: true }).click()
+
+  // Step 1: Share reuses the save dialog to name and time-box the diff.
+  await page.getByRole('button', { name: 'Share', exact: true }).click()
+  const save = page.getByRole('dialog', { name: 'Share diff — step 1 of 2: save it' })
+  await expect(save).toBeVisible()
+  await save.getByRole('button', { name: 'Next: choose recipient' }).click()
+
+  // Step 2: no trusted keys → the one-time setup, not the recipient picker.
+  const setup = page.getByRole('dialog', { name: 'Share diff — one-time setup' })
+  await expect(setup).toBeVisible()
+  // Exact: each step's heading text is a substring of its action button's label
+  // ("Add their key" vs the "Add their key…" button).
+  await expect(setup.getByText('Give them your key', { exact: true })).toBeVisible()
+  await expect(setup.getByText('Add their key', { exact: true })).toBeVisible()
+})
diff --git a/src/renderer/src/utils/detectLanguage.js b/src/renderer/src/utils/detectLanguage.js
index ad0450f..74d2c99 100644
--- a/src/renderer/src/utils/detectLanguage.js
+++ b/src/renderer/src/utils/detectLanguage.js
@@ -1,6 +1,11 @@
 // Best-effort language guess for the Snippets editor's syntax highlighting.
 // Wrong guesses only cost coloring quality, not correctness, so this is a
 // deliberately cheap heuristic rather than a real parser for every format.
+//
+// The guiding rule for every signal below: fire only on something distinctive
+// and low-ambiguity, and stay silent otherwise — a miss lands on plaintext,
+// which is neutral, whereas a false positive mis-colors a whole snippet. The
+// detectors are ordered most-distinctive-first; the first hit wins.
 import { validateJson } from './textFormats'
 import { looksLikeMermaid } from './mermaid'
 
@@ -29,29 +34,191 @@ export const SNIPPET_LANGUAGES = [
   { id: 'java', label: 'Java' }
 ]
 
+const firstLine = (t) => {
+  const nl = t.indexOf('\n')
+  return nl === -1 ? t : t.slice(0, nl)
+}
+
+// A shebang names its interpreter outright — the single highest-confidence
+// signal we have, so it is checked first.
+function detectShebang(t) {
+  const first = firstLine(t)
+  if (!first.startsWith('#!')) return null
+  if (/\bpython[\d.]*\b/.test(first)) return 'python'
+  if (/\bphp\b/.test(first)) return 'php'
+  if (/\bnode\b/.test(first)) return 'javascript'
+  // bash / sh / zsh / an unknown interpreter — still a shell script.
+  return 'shell'
+}
+
+const PHP_RE = /<\?(php\b|=)/i
+const XML_DECL_RE = /^<\?xml\b/i
+// HTML-only tags (a generic <tag> is left to the XML detector below).
+const HTML_RE =
+  /<!doctype\s+html|<html[\s>]|<(head|body|div|span|script|style|link|meta|title|section|article|nav|header|footer|main|button|form|input)\b/i
+
+function looksLikeXml(t) {
+  if (t[0] !== '<') return false
+  // A matching tag pair or a self-closing tag — i.e. real markup, not a lone `<`.
+  return /<([\w:-]+)(\s[^<>]*)?>[\s\S]*<\/\1\s*>/.test(t) || /<[\w:-]+[^<>]*\/>/.test(t)
+}
+
+const DOCKER_INSTRUCTION =
+  /^(RUN|CMD|COPY|ADD|ENV|WORKDIR|ENTRYPOINT|EXPOSE|ARG|LABEL|USER|VOLUME|HEALTHCHECK|SHELL|STOPSIGNAL|ONBUILD|MAINTAINER)\b/im
+function looksLikeDockerfile(t) {
+  const firstReal = t
+    .split('\n')
+    .map((l) => l.trim())
+    .find((l) => l && !l.startsWith('#'))
+  return !!firstReal && /^FROM\s+\S+/i.test(firstReal) && DOCKER_INSTRUCTION.test(t)
+}
+
+// Code keywords that mean "this brace block is a program, not a CSS rule".
+const NOT_CSS = /\b(function|const|let|var|interface|class|enum|import|export|return|def|func|fn|public|private|protected)\b|=>/
+const CSS_AT_RULE = /@(media|import|font-face|keyframes|supports|charset|namespace)\b/i
+const CSS_RULE = /(^|[};])\s*[*.#:@]?[\w-][^\n{}]*\{[^{}]*[\w-]+\s*:\s*[^{}]+;?\s*\}/m
+function looksLikeCss(t) {
+  if (NOT_CSS.test(t)) return false
+  return CSS_AT_RULE.test(t) || CSS_RULE.test(t)
+}
+
 const SQL_START =
   /^(SELECT|INSERT\s+INTO|UPDATE|DELETE\s+FROM|CREATE\s+(TABLE|INDEX|VIEW|DATABASE)|ALTER\s+TABLE|DROP\s+(TABLE|INDEX|VIEW|DATABASE)|WITH\s+\w+\s+AS)\b/i
 
-// Strong signals are distinctive enough alone; weak ones (a bullet list, a
-// blockquote) are common in plain text too, so two are required together.
-const MARKDOWN_STRONG = [/^#{1,6}\s+\S/m, /```/, /\[[^\]]+\]\([^)]+\)/]
+function looksLikeGo(t) {
+  if (/^package\s+\w+/m.test(t)) return true
+  return (
+    /\bfunc\s+(\(\s*\w+\s+[\w*.]+\s*\)\s*)?\w+\s*\(/.test(t) &&
+    (/:=/.test(t) || /\bimport\s+\(/.test(t) || /\bfmt\.\w+/.test(t))
+  )
+}
+
+// `fn name(` is distinctive to Rust among the offered languages.
+const RUST_RE = /\bfn\s+\w+\s*(<[^>]*>)?\s*\(/
+function looksLikeRust(t) {
+  return (
+    RUST_RE.test(t) ||
+    /\blet\s+mut\s+\w+/.test(t) ||
+    /\b(println!|panic!|vec!|format!)/.test(t) ||
+    /\buse\s+\w+::/.test(t)
+  )
+}
+
+const JAVA_DECL = /\b(public|private|protected)\s+(static\s+|final\s+|abstract\s+)*(class|interface|enum)\s+\w+/
+function looksLikeJava(t) {
+  return (
+    JAVA_DECL.test(t) ||
+    /\bimport\s+java\./.test(t) ||
+    /\bSystem\.out\.print/.test(t) ||
+    /\bpublic\s+static\s+void\s+main\s*\(/.test(t)
+  )
+}
+
+function looksLikeTypeScript(t) {
+  return (
+    /\binterface\s+\w+\s*(<[^>]*>)?\s*\{/.test(t) ||
+    /\btype\s+\w+\s*=/.test(t) ||
+    /\benum\s+\w+\s*\{/.test(t) ||
+    /\bimport\s+type\b/.test(t) ||
+    // A type annotation followed by code punctuation — not prose like "count: number of files".
+    /:\s*(string|number|boolean|any|unknown|never|void)\s*[;,)\]}=|&>]/.test(t) ||
+    /\bas\s+(const|string|number|boolean|\w+(\[\]|<[^>]*>))/.test(t) ||
+    /\b(readonly|public|private|protected)\s+\w+\s*[:?]/.test(t)
+  )
+}
+
+function looksLikePython(t) {
+  if (/^\s*(async\s+)?def\s+\w+\s*\([^)]*\)\s*(->[^:\n]+)?:/m.test(t)) return true
+  if (/^\s*class\s+\w+\s*(\([^)]*\))?\s*:/m.test(t)) return true
+  if (/\bif\s+__name__\s*==\s*['"]__main__['"]\s*:/.test(t)) return true
+  const imports = /^\s*from\s+[\w.]+\s+import\b/m.test(t) || /^\s*import\s+\w+/m.test(t)
+  return imports && /^\s*(print\s*\(|def\s|class\s|@\w+|\w+\s*=)/m.test(t)
+}
+
+function looksLikeJavaScript(t) {
+  return (
+    /\b(const|let|var)\s+[\w{[]/.test(t) ||
+    /=>/.test(t) ||
+    /\bfunction\s*\*?\s*\w*\s*\(/.test(t) ||
+    /\bconsole\.(log|error|warn|info)\s*\(/.test(t) ||
+    /\brequire\s*\(\s*['"]/.test(t) ||
+    /\bmodule\.exports\b/.test(t) ||
+    /\bexport\s+(default|const|function|class|\{)/.test(t) ||
+    /\bimport\b[^\n]*\bfrom\s+['"]/.test(t)
+  )
+}
+
+const YAML_KEY = /^[ \t]*[\w.-]+:(\s|$)/
+function looksLikeYaml(t) {
+  if (/^---\s*$/m.test(t)) return true
+  if (/^\s*(apiVersion|kind|metadata|spec|containers|replicas|selector):/m.test(t)) return true
+  if (/[{};]/.test(t)) return false // braces/semicolons ⇒ JSON/CSS/code, not YAML
+  return t.split('\n').filter((l) => YAML_KEY.test(l)).length >= 2
+}
+
+function looksLikeShell(t) {
+  return (
+    (/^\s*(if|elif)\b[^\n]*;\s*then\b/m.test(t) && /^\s*fi\b/m.test(t)) ||
+    (/^\s*for\b[^\n]*;\s*do\b/m.test(t) && /^\s*done\b/m.test(t)) ||
+    /^\s*case\s+.+\s+in\b/m.test(t) ||
+    /^\s*export\s+\w+=/m.test(t) ||
+    (/\becho\s+["'$]/.test(t) && /\$\{?\w/.test(t))
+  )
+}
+
+// Ordered most-distinctive-first; the first detector to claim the text wins.
+const DETECTORS = [
+  detectShebang,
+  (t) => (PHP_RE.test(t) ? 'php' : null),
+  (t) => (XML_DECL_RE.test(t) ? 'xml' : null),
+  (t) => (HTML_RE.test(t) ? 'html' : null),
+  (t) => (looksLikeXml(t) ? 'xml' : null),
+  (t) => (looksLikeDockerfile(t) ? 'dockerfile' : null),
+  (t) => (looksLikeCss(t) ? 'css' : null),
+  (t) => (SQL_START.test(t) ? 'sql' : null),
+  (t) => (looksLikeGo(t) ? 'go' : null),
+  (t) => (looksLikeRust(t) ? 'rust' : null),
+  (t) => (looksLikeJava(t) ? 'java' : null),
+  (t) => (looksLikeTypeScript(t) ? 'typescript' : null),
+  (t) => (looksLikePython(t) ? 'python' : null),
+  (t) => (looksLikeJavaScript(t) ? 'javascript' : null),
+  (t) => (looksLikeYaml(t) ? 'yaml' : null),
+  (t) => (looksLikeShell(t) ? 'shell' : null)
+]
+
+// A fenced code block means the document is Markdown wrapping code — checked
+// before the code detectors so the code *inside* the fence can't win.
+const MARKDOWN_FENCE = /^```/m
+// The remaining Markdown signals live after the code detectors, so a lone `#`
+// (also a comment marker in several languages) can't pre-empt a real program.
+const MARKDOWN_STRONG = [/^#{1,6}\s+\S/m, /\[[^\]]+\]\([^)]+\)/]
 const MARKDOWN_WEAK = [/^[-*+]\s+\S/m, /^\d+\.\s+\S/m, /^>\s+\S/m]
 
-export function detectSnippetLanguage(content) {
-  const trimmed = content.trim()
-  if (!trimmed) return 'plaintext'
+const isJson = (t) => (t[0] === '{' || t[0] === '[') && validateJson(t).valid
 
-  if ((trimmed[0] === '{' || trimmed[0] === '[') && validateJson(trimmed).valid) return 'json'
+// A heading or link alone is enough; the weaker list/quote signals (also common
+// in plain prose) must appear at least twice together.
+function isMarkdownProse(t) {
+  const strongHit = MARKDOWN_STRONG.some((re) => re.test(t))
+  const weakHits = MARKDOWN_WEAK.filter((re) => re.test(t)).length
+  return strongHit || weakHits >= 2
+}
+
+export function detectSnippetLanguage(content) {
+  const t = content.trim()
+  if (!t) return 'plaintext'
+  if (isJson(t)) return 'json'
 
   // Distinctive diagram keywords ('flowchart', 'sequenceDiagram', …) — checked
   // before markdown, whose ``` fences could otherwise claim a fenced diagram.
-  if (looksLikeMermaid(trimmed)) return 'mermaid'
-
-  if (SQL_START.test(trimmed)) return 'sql'
+  if (looksLikeMermaid(t)) return 'mermaid'
+  if (MARKDOWN_FENCE.test(t)) return 'markdown'
 
-  const strongHit = MARKDOWN_STRONG.some((re) => re.test(trimmed))
-  const weakHits = MARKDOWN_WEAK.filter((re) => re.test(trimmed)).length
-  if (strongHit || weakHits >= 2) return 'markdown'
+  for (const detect of DETECTORS) {
+    const lang = detect(t)
+    if (lang) return lang
+  }
 
+  if (isMarkdownProse(t)) return 'markdown'
   return 'plaintext'
 }
diff --git a/tests/renderer/composables/useSnippetFilters.test.js b/tests/renderer/composables/useSnippetFilters.test.js
new file mode 100644
index 0000000..d889092
--- /dev/null
+++ b/tests/renderer/composables/useSnippetFilters.test.js
@@ -0,0 +1,147 @@
+// The snippets sidebar's search + tag filter. Text query and tag selection
+// COMPOSE (AND), which is the whole reason the logic lives in one composable
+// instead of being re-derived per shelf — so it gets one home for its tests too.
+import { beforeEach, describe, expect, it } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+import { randomBytes } from 'crypto'
+import { vaultDecrypt, vaultEncrypt } from '../../../src/main/vaultCrypt'
+import { useSnippetStore } from '../../../src/renderer/src/stores/snippetStore'
+import {
+  DEFAULT_TAG,
+  useSnippetFilters
+} from '../../../src/renderer/src/composables/useSnippetFilters'
+
+const KEY = randomBytes(32)
+const names = (list) => list.map((e) => e.name)
+
+beforeEach(() => {
+  setActivePinia(createPinia())
+  localStorage.clear()
+  window.api = {
+    vaultEncrypt: async (p, aad) => vaultEncrypt(KEY, p, aad),
+    vaultDecrypt: async (b, aad) => vaultDecrypt(KEY, b, aad)
+  }
+})
+
+// Three snippets: two tagged 'backend' (one also 'auth'), one untagged (Default).
+async function seed() {
+  const store = useSnippetStore()
+  const auth = await store.add({
+    name: 'Auth flow',
+    content: 'x',
+    language: 'plaintext',
+    tags: ['backend', 'auth']
+  })
+  await store.add({
+    name: 'Billing report',
+    content: 'x',
+    language: 'plaintext',
+    tags: ['backend']
+  })
+  await store.add({ name: 'Scratch notes', content: 'x', language: 'plaintext', tags: [] })
+  return { store, auth }
+}
+
+describe('useSnippetFilters — text search', () => {
+  it('shows everything and reports not-filtering when the query is empty', async () => {
+    await seed()
+    const f = useSnippetFilters()
+    expect(f.filtering.value).toBe(false)
+    expect(names(f.visibleListed.value).sort()).toEqual([
+      'Auth flow',
+      'Billing report',
+      'Scratch notes'
+    ])
+  })
+
+  it('matches a snippet by name', async () => {
+    await seed()
+    const f = useSnippetFilters()
+    f.query.value = 'billing'
+    expect(f.filtering.value).toBe(true)
+    expect(names(f.visibleListed.value)).toEqual(['Billing report'])
+  })
+
+  it('matches by tag text even when the name does not contain the query', async () => {
+    await seed()
+    const f = useSnippetFilters()
+    f.query.value = 'backend' // no name contains "backend"; two carry the tag
+    expect(names(f.visibleListed.value).sort()).toEqual(['Auth flow', 'Billing report'])
+  })
+
+  it('matches untagged snippets against the word "default"', async () => {
+    await seed()
+    const f = useSnippetFilters()
+    f.query.value = 'default'
+    expect(names(f.visibleListed.value)).toEqual(['Scratch notes'])
+  })
+
+  it('anyVisible goes falsy when nothing matches', async () => {
+    await seed()
+    const f = useSnippetFilters()
+    f.query.value = 'nothing-here'
+    expect(f.anyVisible.value).toBeFalsy()
+  })
+})
+
+describe('useSnippetFilters — tag selection', () => {
+  it('AND-composes multiple selected tags', async () => {
+    await seed()
+    const f = useSnippetFilters()
+    f.toggleTag('backend')
+    expect(names(f.visibleListed.value).sort()).toEqual(['Auth flow', 'Billing report'])
+    f.toggleTag('auth') // backend AND auth
+    expect(names(f.visibleListed.value)).toEqual(['Auth flow'])
+    f.toggleTag('auth') // toggling off widens again
+    expect(names(f.visibleListed.value).sort()).toEqual(['Auth flow', 'Billing report'])
+  })
+
+  it('the DEFAULT sentinel selects only untagged snippets', async () => {
+    await seed()
+    const f = useSnippetFilters()
+    f.toggleTag(DEFAULT_TAG)
+    expect(names(f.visibleListed.value)).toEqual(['Scratch notes'])
+  })
+
+  it('a text query and a tag selection compose', async () => {
+    await seed()
+    const f = useSnippetFilters()
+    f.toggleTag('backend')
+    f.query.value = 'billing'
+    expect(names(f.visibleListed.value)).toEqual(['Billing report'])
+  })
+
+  it('clearFilters resets both the query and the tag set', async () => {
+    await seed()
+    const f = useSnippetFilters()
+    f.toggleTag('backend')
+    f.query.value = 'x'
+    f.clearFilters()
+    expect(f.filtering.value).toBe(false)
+    expect(f.activeTags.value.size).toBe(0)
+    expect(f.query.value).toBe('')
+  })
+})
+
+describe('useSnippetFilters — favorites and chips', () => {
+  it('favorited snippets move to visibleFavorites and are filtered too', async () => {
+    const { store, auth } = await seed()
+    store.toggleFavorite(auth)
+    const f = useSnippetFilters()
+    expect(names(f.visibleFavorites.value)).toEqual(['Auth flow'])
+    expect(names(f.visibleListed.value)).not.toContain('Auth flow')
+
+    f.query.value = 'billing' // the favorite no longer matches
+    expect(f.visibleFavorites.value).toHaveLength(0)
+    expect(names(f.visibleListed.value)).toEqual(['Billing report'])
+  })
+
+  it('tagChips lead with Default (its count) then the registry tags with usage counts', async () => {
+    await seed()
+    const f = useSnippetFilters()
+    const chips = f.tagChips.value
+    expect(chips[0]).toMatchObject({ name: DEFAULT_TAG, label: 'Default', count: 1 })
+    expect(chips.find((c) => c.name === 'backend').count).toBe(2)
+    expect(chips.find((c) => c.name === 'auth').count).toBe(1)
+  })
+})
diff --git a/tests/renderer/composables/useTagInput.test.js b/tests/renderer/composables/useTagInput.test.js
new file mode 100644
index 0000000..c976877
--- /dev/null
+++ b/tests/renderer/composables/useTagInput.test.js
@@ -0,0 +1,121 @@
+// The snippet editor's tag-chips field. Its event logic — what commits a tag,
+// what dedupes, the cap, Backspace-pops — is exactly the kind of interaction
+// CLAUDE.md says to pull OUT of the .vue file and unit-test here (the "does
+// Space commit a tag?" example), rather than leave inline where nothing
+// exercises it. Suggestions need the real tag registry, so the store's crypto
+// is wired through the same mock the store tests use.
+import { beforeEach, describe, expect, it } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+import { randomBytes } from 'crypto'
+import { vaultDecrypt, vaultEncrypt } from '../../../src/main/vaultCrypt'
+import { MAX_TAGS, useSnippetStore } from '../../../src/renderer/src/stores/snippetStore'
+import { useTagInput } from '../../../src/renderer/src/composables/useTagInput'
+
+const KEY = randomBytes(32)
+
+// A KeyboardEvent stub carrying only what onKey reads.
+const press = (k) => ({ key: k, preventDefault() {} })
+
+beforeEach(() => {
+  setActivePinia(createPinia())
+  localStorage.clear()
+  window.api = {
+    vaultEncrypt: async (p, aad) => vaultEncrypt(KEY, p, aad),
+    vaultDecrypt: async (b, aad) => vaultDecrypt(KEY, b, aad)
+  }
+})
+
+describe('useTagInput — committing tags', () => {
+  it('Enter, Space, and comma each commit the typed tag and clear the input', () => {
+    for (const k of ['Enter', ' ', ',']) {
+      const field = useTagInput()
+      field.input.value = 'alpha'
+      field.onKey(press(k))
+      expect(field.tags.value).toEqual(['alpha'])
+      // The tag never lingers as loose text that would be lost on save.
+      expect(field.input.value).toBe('')
+    }
+  })
+
+  it('lowercases and trims a committed tag (cleanTag)', () => {
+    const field = useTagInput()
+    field.input.value = '  Backend  '
+    field.onKey(press('Enter'))
+    expect(field.tags.value).toEqual(['backend'])
+  })
+
+  it('ignores a blank commit', () => {
+    const field = useTagInput()
+    field.input.value = '   '
+    field.onKey(press(' '))
+    expect(field.tags.value).toEqual([])
+  })
+
+  it('de-duplicates: re-committing an applied tag is a no-op but clears the input', () => {
+    const field = useTagInput(['api'])
+    field.input.value = 'api'
+    field.onKey(press('Enter'))
+    expect(field.tags.value).toEqual(['api'])
+    expect(field.input.value).toBe('')
+  })
+
+  it('caps at MAX_TAGS', () => {
+    const field = useTagInput(['a', 'b', 'c', 'd']) // 4 applied
+    field.input.value = 'e'
+    field.onKey(press('Enter')) // the 5th is allowed
+    expect(field.tags.value).toHaveLength(MAX_TAGS)
+    expect(field.canAddMore.value).toBe(false)
+
+    field.input.value = 'f'
+    field.onKey(press('Enter')) // the 6th is refused
+    expect(field.tags.value).toHaveLength(MAX_TAGS)
+    expect(field.tags.value).not.toContain('f')
+  })
+
+  it('Backspace pops the last tag only when the input is empty', () => {
+    const field = useTagInput(['one', 'two'])
+    field.onKey(press('Backspace')) // empty input → pop
+    expect(field.tags.value).toEqual(['one'])
+
+    field.input.value = 'th'
+    field.onKey(press('Backspace')) // has text → leaves the chips alone
+    expect(field.tags.value).toEqual(['one'])
+  })
+
+  it('onBlur commits pending text so leaving the field never drops it', () => {
+    const field = useTagInput()
+    field.input.value = 'draft'
+    field.onBlur()
+    expect(field.tags.value).toEqual(['draft'])
+  })
+
+  it('remove() drops a specific tag', () => {
+    const field = useTagInput(['keep', 'drop'])
+    field.remove('drop')
+    expect(field.tags.value).toEqual(['keep'])
+  })
+
+  it('gives a brand-new tag a tentative palette color, surfaced via newColors()', () => {
+    const field = useTagInput()
+    field.add('fresh')
+    // A real palette color, not the dim fallback used for unknown tags.
+    expect(field.colorFor('fresh')).toMatch(/^#/)
+    expect(field.newColors()).toHaveProperty('fresh')
+  })
+})
+
+describe('useTagInput — suggestions', () => {
+  it('suggests matching registry tags, excluding ones already applied', async () => {
+    const store = useSnippetStore()
+    await store.add({
+      name: 's1',
+      content: 'x',
+      language: 'plaintext',
+      tags: ['backend', 'billing']
+    })
+    const field = useTagInput(['backend']) // backend is already on this snippet
+    field.input.value = 'b'
+    expect(field.suggestions.value).toContain('billing')
+    expect(field.suggestions.value).not.toContain('backend')
+  })
+})
diff --git a/tests/renderer/utils/detectLanguage.test.js b/tests/renderer/utils/detectLanguage.test.js
index 57243e8..7b8581e 100644
--- a/tests/renderer/utils/detectLanguage.test.js
+++ b/tests/renderer/utils/detectLanguage.test.js
@@ -1,52 +1,148 @@
 import { describe, expect, it } from 'vitest'
 import { detectSnippetLanguage } from '../../../src/renderer/src/utils/detectLanguage'
 
+const detect = detectSnippetLanguage
+
 describe('detectSnippetLanguage', () => {
   it('returns plaintext for empty content', () => {
-    expect(detectSnippetLanguage('')).toBe('plaintext')
-    expect(detectSnippetLanguage('   ')).toBe('plaintext')
+    expect(detect('')).toBe('plaintext')
+    expect(detect('   ')).toBe('plaintext')
   })
 
   it('detects valid JSON', () => {
-    expect(detectSnippetLanguage('{"a": 1, "b": [1, 2]}')).toBe('json')
+    expect(detect('{"a": 1, "b": [1, 2]}')).toBe('json')
   })
 
   it('does not misdetect malformed JSON-shaped content as json', () => {
-    expect(detectSnippetLanguage('{a: 1,}')).not.toBe('json')
+    expect(detect('{a: 1,}')).not.toBe('json')
   })
 
   it('detects SQL by its leading keyword', () => {
-    expect(detectSnippetLanguage('SELECT * FROM users WHERE id = 1')).toBe('sql')
-    expect(detectSnippetLanguage('insert into users (id) values (1)')).toBe('sql')
-    expect(detectSnippetLanguage('CREATE TABLE users (id INT)')).toBe('sql')
-    expect(detectSnippetLanguage('with recent as (select 1) select * from recent')).toBe('sql')
+    expect(detect('SELECT * FROM users WHERE id = 1')).toBe('sql')
+    expect(detect('insert into users (id) values (1)')).toBe('sql')
+    expect(detect('CREATE TABLE users (id INT)')).toBe('sql')
+    expect(detect('with recent as (select 1) select * from recent')).toBe('sql')
   })
 
   it('does not detect sql from a keyword appearing mid-sentence', () => {
-    expect(detectSnippetLanguage('Please select the correct answer from the list below.')).not.toBe(
-      'sql'
-    )
+    expect(detect('Please select the correct answer from the list below.')).not.toBe('sql')
   })
+})
 
-  it('detects markdown from a single strong signal (heading)', () => {
-    expect(detectSnippetLanguage('# Title\n\nSome text.')).toBe('markdown')
+describe('detectSnippetLanguage — markdown', () => {
+  it('detects a heading, a link, and combined weak signals', () => {
+    expect(detect('# Title\n\nSome text.')).toBe('markdown')
+    expect(detect('See the [docs](https://example.com) for more.')).toBe('markdown')
+    expect(detect('- item one\n- item two\n1. first\n2. second')).toBe('markdown')
   })
 
-  it('detects markdown from a fenced code block', () => {
-    expect(detectSnippetLanguage('Some text\n```js\nconst x = 1\n```')).toBe('markdown')
+  it('treats a fenced code block as markdown even when it wraps real code', () => {
+    expect(detect('Some text\n```js\nconst x = 1\n```')).toBe('markdown')
+    expect(detect('Notes:\n```python\ndef f():\n    pass\n```')).toBe('markdown')
   })
 
-  it('detects markdown from two weak signals combined', () => {
-    expect(detectSnippetLanguage('- item one\n- item two\n1. first\n2. second')).toBe('markdown')
+  it('does not detect markdown from a single weak signal', () => {
+    expect(detect('- just one bullet in plain notes')).toBe('plaintext')
   })
+})
 
-  it('does not detect markdown from a single weak signal', () => {
-    expect(detectSnippetLanguage('- just one bullet in plain notes')).toBe('plaintext')
+describe('detectSnippetLanguage — shebangs', () => {
+  it('reads the interpreter from a shebang line', () => {
+    expect(detect('#!/usr/bin/env python3\nprint(1)')).toBe('python')
+    expect(detect('#!/bin/bash\nls -la')).toBe('shell')
+    expect(detect('#!/usr/bin/env node\nconsole.log(1)')).toBe('javascript')
+    expect(detect('#!/usr/bin/php\n<?php echo 1;')).toBe('php')
+    expect(detect('#!/usr/bin/env perl\nprint "hi"')).toBe('shell') // unknown ⇒ shell
+  })
+})
+
+describe('detectSnippetLanguage — markup', () => {
+  it('detects PHP by its open tag', () => {
+    expect(detect('<?php\n$x = 1;\necho $x;')).toBe('php')
+  })
+
+  it('detects an XML declaration and generic markup', () => {
+    expect(detect('<?xml version="1.0"?>\n<root/>')).toBe('xml')
+    expect(detect('<config><item>a</item></config>')).toBe('xml')
+    expect(detect('<link rel="stylesheet" href="x.css" />')).toBe('html') // HTML-only tag wins
+  })
+
+  it('detects HTML by doctype or html-only tags', () => {
+    expect(detect('<!DOCTYPE html>\n<html><body>hi</body></html>')).toBe('html')
+    expect(detect('<div class="card"><span>hi</span></div>')).toBe('html')
+  })
+})
+
+describe('detectSnippetLanguage — config formats', () => {
+  it('detects a Dockerfile from FROM plus an instruction', () => {
+    expect(detect('FROM node:20\nWORKDIR /app\nRUN npm ci')).toBe('dockerfile')
+  })
+
+  it('does not call prose starting with "from" a Dockerfile', () => {
+    expect(detect('From the top of the hill you can see the whole town.')).not.toBe('dockerfile')
+  })
+
+  it('detects CSS rules and at-rules', () => {
+    expect(detect('.card { color: red; padding: 8px; }')).toBe('css')
+    expect(detect('@media (max-width: 600px) { .card { display: none } }')).toBe('css')
+    expect(detect(':root {\n  --accent: #4c8dff;\n}')).toBe('css')
+  })
+
+  it('detects YAML / Kubernetes but not brace-laden or single-key text', () => {
+    expect(detect('name: web\nport: 8080\nreplicas: 3')).toBe('yaml')
+    expect(detect('apiVersion: v1\nkind: Pod')).toBe('yaml')
+    expect(detect('---\nfoo: bar')).toBe('yaml')
+    expect(detect('Note: this is a single line of prose.')).toBe('plaintext')
+  })
+})
+
+describe('detectSnippetLanguage — programming languages', () => {
+  it('detects Python', () => {
+    expect(detect('def add(a, b):\n    return a + b')).toBe('python')
+    expect(detect('import os\n\nif __name__ == "__main__":\n    print(os.getcwd())')).toBe('python')
+    expect(detect('class Animal:\n    pass')).toBe('python')
+  })
+
+  it('detects JavaScript', () => {
+    expect(detect('const add = (a, b) => a + b\nconsole.log(add(1, 2))')).toBe('javascript')
+    expect(detect("import { foo } from './foo'\nexport default foo")).toBe('javascript')
+    expect(detect('function greet(name) { return `hi ${name}` }')).toBe('javascript')
+  })
+
+  it('detects TypeScript by its type-level syntax, before JavaScript', () => {
+    expect(detect('interface User {\n  name: string\n  age: number\n}')).toBe('typescript')
+    expect(detect('function id(x: number): number {\n  return x\n}')).toBe('typescript')
+    expect(detect('type ID = string | number')).toBe('typescript')
+    expect(detect('enum Color {\n  Red,\n  Green\n}')).toBe('typescript')
+  })
+
+  it('detects Go', () => {
+    expect(detect('package main\n\nimport "fmt"\n\nfunc main() {\n  fmt.Println("hi")\n}')).toBe('go')
+  })
+
+  it('detects Rust', () => {
+    expect(detect('fn main() {\n    let mut x = 1;\n    println!("{}", x);\n}')).toBe('rust')
+  })
+
+  it('detects Java', () => {
+    expect(detect('public class Main {\n  public static void main(String[] a) {}\n}')).toBe('java')
+    expect(detect('import java.util.List;')).toBe('java')
+  })
+
+  it('detects shell scripts without a shebang', () => {
+    expect(detect('if [ -f x ]; then\n  echo "yes"\nfi')).toBe('shell')
+    expect(detect('for f in *.txt; do\n  echo "$f"\ndone')).toBe('shell')
+    expect(detect('export API_KEY=secret')).toBe('shell')
+  })
+})
+
+describe('detectSnippetLanguage — anti-false-positive', () => {
+  it('leaves ordinary prose as plaintext', () => {
+    expect(detect('just a normal paragraph of text with no special shape')).toBe('plaintext')
+    expect(detect('Remember to buy milk, eggs, and bread on the way home.')).toBe('plaintext')
   })
 
-  it('falls back to plaintext for ordinary text', () => {
-    expect(detectSnippetLanguage('just a normal paragraph of text with no special shape')).toBe(
-      'plaintext'
-    )
+  it('does not read a prose colon phrase as a typed annotation', () => {
+    expect(detect('Total: number of files processed today was high.')).toBe('plaintext')
   })
 })