From 54b755f1ceea27af5a417e3f2bc9e2571cf21e8f Mon Sep 17 00:00:00 2001
From: broisnischal <neeswebservice@gmail.com>
Date: Thu, 4 Jun 2026 21:36:38 +0545
Subject: [PATCH 1/8] feat::revamp redesign

---
 package-lock.json                   | 17 ++------
 src-tauri/Cargo.lock                | 24 ++++++++++++
 src-tauri/Cargo.toml                |  1 +
 src-tauri/src/lib.rs                | 14 +++++++
 src/lib/components/DataTable.svelte | 61 +++++++++++++++++------------
 src/lib/stores/settings.js          | 31 ++++++++++++---
 6 files changed, 104 insertions(+), 44 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d76de961..e2ee83c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "db-studio",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "db-studio",
-      "version": "0.3.1",
+      "version": "0.3.3",
       "dependencies": {
         "@dagrejs/dagre": "^3.0.0",
         "@fontsource-variable/geist": "^5.2.9",
@@ -97,7 +97,6 @@
       "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@emnapi/wasi-threads": "1.2.1",
         "tslib": "^2.4.0"
@@ -109,7 +108,6 @@
       "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -205,7 +203,6 @@
       "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.1.tgz",
       "integrity": "sha512-6IedsVWXyq4P9Tj+TxuU8WGWM70hYLl12nbYU8jkikVpa6WXapFazPUcHUMDMoWftIDE2ILDkFFte6W2nFCkRQ==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@swc/helpers": "^0.5.0"
       }
@@ -1652,7 +1649,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1832,7 +1828,6 @@
       "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.33.4.tgz",
       "integrity": "sha512-HIN5Pmd9MrX9BkV7tDwnOcEJCSFvCpc8X97h3f508J6I5FsqAY65wKOCvgH2CuP42CaahWaz4tuh32SOOIH7ww==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10"
       }
@@ -2242,7 +2237,6 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -3343,7 +3337,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3652,7 +3645,6 @@
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.55.9.tgz",
       "integrity": "sha512-fTjjT8cHLDwigcu2j3pv7Jq04LklXevPB8uBgyHNiTXv+RMNvVnrjS4UEYrLMkhuq1vpCodHjiW+z/95SDs/fg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jridgewell/remapping": "^2.3.4",
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -3742,7 +3734,6 @@
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
       "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/dcastil"
@@ -3771,8 +3762,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.0.tgz",
       "integrity": "sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/tapable": {
       "version": "2.3.3",
@@ -3960,7 +3950,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.14.tgz",
       "integrity": "sha512-s4BJJ+5y1pYL6Otw51FHhVJQhPnuRinKig64g/1+EUNaJsd3gCKdD31IPFvswUgW9/60QT9oFHbZHbQK5imcxw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 61092aee..4fdca7d1 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -97,6 +97,7 @@ dependencies = [
  "objc2",
  "objc2-app-kit",
  "objc2-quartz-core",
+ "objc2-web-kit",
  "reqwest 0.12.28",
  "rust_decimal",
  "serde",
@@ -2924,6 +2925,16 @@ dependencies = [
  "objc2-core-foundation",
 ]
 
+[[package]]
+name = "objc2-javascript-core"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2a1e6550c4caed348956ce3370c9ffeca70bb1dbed4fa96112e7c6170e074586"
+dependencies = [
+ "objc2",
+ "objc2-core-foundation",
+]
+
 [[package]]
 name = "objc2-metal"
 version = "0.3.2"
@@ -2964,6 +2975,17 @@ dependencies = [
  "objc2-metal",
 ]
 
+[[package]]
+name = "objc2-security"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "709fe137109bd1e8b5a99390f77a7d8b2961dafc1a1c5db8f2e60329ad6d895a"
+dependencies = [
+ "bitflags 2.11.1",
+ "objc2",
+ "objc2-core-foundation",
+]
+
 [[package]]
 name = "objc2-ui-kit"
 version = "0.3.2"
@@ -3007,6 +3029,8 @@ dependencies = [
  "objc2-app-kit",
  "objc2-core-foundation",
  "objc2-foundation",
+ "objc2-javascript-core",
+ "objc2-security",
 ]
 
 [[package]]
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 98a0597c..c0f2c560 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -48,6 +48,7 @@ getrandom = "0.2"
 objc2 = "0.6"
 objc2-app-kit = { version = "0.3", features = ["NSWindow", "NSView", "objc2-quartz-core"] }
 objc2-quartz-core = { version = "0.3", features = ["CALayer"] }
+objc2-web-kit = { version = "0.3", features = ["WKWebView"] }
 
 [profile.release]
 strip = true
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 52747208..1c73a7fb 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -70,6 +70,10 @@ pub fn run() {
             // keep disabled in release. The toggle_devtools command also exposes
             // them on demand via F12.
             .devtools(cfg!(debug_assertions))
+            // The app implements its own canvas-table zoom; disable Tauri's injected
+            // Ctrl/Cmd+wheel webview polyfill (macOS/Linux) so pinch near column
+            // resize handles doesn't magnify the whole webview.
+            .zoom_hotkeys_enabled(false)
             .on_navigation(|url| {
                 let scheme = url.scheme();
                 if matches!(scheme, "tauri" | "ipc") {
@@ -101,6 +105,16 @@ pub fn run() {
                         }
                     }
                 }
+
+                // Disable WKWebView trackpad pinch magnification — the canvas table
+                // has its own zoom and pinch during column resize was blowing up the view.
+                let _ = window.with_webview(|webview| unsafe {
+                    use objc2_web_kit::WKWebView;
+                    let view: &WKWebView = &*webview.inner().cast();
+                    view.setAllowsMagnification(false);
+                    view.setMagnification(1.0);
+                    view.setPageZoom(1.0);
+                });
             }
 
             if cfg!(debug_assertions) {
diff --git a/src/lib/components/DataTable.svelte b/src/lib/components/DataTable.svelte
index e6cfe398..4b6a6e30 100644
--- a/src/lib/components/DataTable.svelte
+++ b/src/lib/components/DataTable.svelte
@@ -2301,40 +2301,48 @@
     }
   }
 
-  // Master effect — sizes the canvas backing store (DPR-aware) and repaints.
-  // Doing both here, and never reading+writing the same signal, keeps it a pure
-  // sink: it tracks every input that affects the grid and writes no reactive
-  // state, so it can't loop.
-  $effect(() => {
-    void rows; void columns; void columnWidths
-    void pinnedColumns; void hiddenColumns; void selected; void focusedRow
-    void focusedCol; void editingCell; void pendingEdits; void expandedRows
-    void rowSort; void _scrollTop; void _scrollLeft; void _viewportWidth
-    void _viewportHeight; void hoveredRow; void hoveredColName; void _resizeHoverCol
-    void resizingColName; void newRowDrafts; void insertSaving; void colMeta
-    void geom; void rowTops; void _redrawToken; void foreignKeys; void indexes
-    void _colCache; void expandedRowHeights; void fkSubview; void virtualRelCols; void VIRTUAL_COL_W
-    // Read the zoom store directly so this effect re-runs the moment any tab changes zoom.
-    void zoomState.value; void canvasZoom
-
+  /** Size the canvas backing store (DPR-aware). Always sync CSS px size so macOS
+   *  WebKit can't display a stale CSS box over a mismatched bitmap (blurry zoom). */
+  function syncCanvasSurface() {
     const canvas = canvasEl
     const probe = colorProbe
-    if (!canvas || !probe) return
+    if (!canvas || !probe) return false
     if (!_readColor) _readColor = createColorReader(probe)
+    const cssW = Math.max(1, Math.round(_viewportWidth))
+    const cssH = Math.max(1, Math.round(_viewportHeight))
     const dpr = Math.min(window.devicePixelRatio || 1, 2)
-    const bw = Math.max(1, Math.round(_viewportWidth * dpr))
-    const bh = Math.max(1, Math.round(_viewportHeight * dpr))
+    const bw = Math.max(1, Math.round(cssW * dpr))
+    const bh = Math.max(1, Math.round(cssH * dpr))
+    canvas.style.width = cssW + 'px'
+    canvas.style.height = cssH + 'px'
     // Only touch canvas.width/height when it actually changes — assigning clears
     // the canvas, and we want to avoid a redundant clear on every repaint.
     if (canvas.width !== bw || canvas.height !== bh) {
       canvas.width = bw
       canvas.height = bh
-      canvas.style.width = _viewportWidth + 'px'
-      canvas.style.height = _viewportHeight + 'px'
     }
     _ctx = canvas.getContext('2d')
     if (_ctx) _ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
-    draw()
+    return !!_ctx
+  }
+
+  // Layout / sizing effect — resize the backing store when geometry or viewport changes.
+  $effect(() => {
+    void rows; void columns; void columnWidths
+    void pinnedColumns; void hiddenColumns; void selected; void focusedRow
+    void focusedCol; void editingCell; void pendingEdits; void expandedRows
+    void rowSort; void _scrollTop; void _scrollLeft; void _viewportWidth
+    void _viewportHeight; void newRowDrafts; void insertSaving; void colMeta
+    void geom; void rowTops; void _redrawToken; void foreignKeys; void indexes
+    void _colCache; void expandedRowHeights; void fkSubview; void virtualRelCols; void VIRTUAL_COL_W
+    void zoomState.value; void canvasZoom
+    if (syncCanvasSurface()) draw()
+  })
+
+  // Hover / affordance repaint — pointer moves must not re-touch canvas dimensions.
+  $effect(() => {
+    void hoveredRow; void hoveredColName; void _resizeHoverCol; void resizingColName
+    if (_ctx) draw()
   })
 
   // ── Canvas pointer interaction ──────────────────────────────────────────
@@ -2575,17 +2583,21 @@
   // Ctrl/Cmd+Scroll → zoom the canvas. Must use { passive: false } so preventDefault
   // works — Svelte's onwheel directive registers a passive listener by default which
   // can't call preventDefault, causing the browser to intercept the event first.
+  // Capture phase so we run after the window-level webview guard (preventDefault only)
+  // but before the browser applies native magnification.
   $effect(() => {
     const el = tableContainer
     if (!el) return
     function onWheel(/** @type {WheelEvent} */ e) {
       if (!e.ctrlKey && !e.metaKey) return
+      // Trackpad pinch / scroll while grabbing a column edge is not zoom intent.
+      if (resizingColName || _resizeHoverCol) return
       e.preventDefault()
       e.stopPropagation()
       adjustZoom(e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP)
     }
-    el.addEventListener('wheel', onWheel, { passive: false })
-    return () => el.removeEventListener('wheel', onWheel)
+    el.addEventListener('wheel', onWheel, { capture: true, passive: false })
+    return () => el.removeEventListener('wheel', onWheel, { capture: true })
   })
 
   function onCanvasContextMenu(/** @type {MouseEvent} */ e, /** @type {((e: MouseEvent) => void) | undefined} */ bitsOpen) {
@@ -2652,6 +2664,7 @@
         <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
         <div
           bind:this={tableContainer}
+          data-canvas-table=""
           {...props}
           tabindex={-1}
           class={cn(
diff --git a/src/lib/stores/settings.js b/src/lib/stores/settings.js
index 40e60c6f..294237ab 100644
--- a/src/lib/stores/settings.js
+++ b/src/lib/stores/settings.js
@@ -152,12 +152,27 @@ function handleZoomKeydown(e) {
 
 /** Block Tauri webview zoom (Ctrl/Cmd + wheel) when hotkeys are enabled in the shell. */
 function handleZoomWheel(e) {
-  if (e.ctrlKey || e.metaKey) {
-    // Let mermaid diagrams handle their own Ctrl+scroll zoom
-    if (/** @type {Element} */ (e.target)?.closest?.('.mermaid-canvas')) return
-    e.preventDefault()
-    e.stopPropagation()
-  }
+  if (!(e.ctrlKey || e.metaKey)) return
+  // Let mermaid diagrams handle their own Ctrl+scroll zoom
+  if (/** @type {Element} */ (e.target)?.closest?.('.mermaid-canvas')) return
+  // Always block native webview magnification (macOS pinch / Tauri polyfill).
+  e.preventDefault()
+  // Canvas DataTable owns Ctrl/Cmd+scroll inside the grid — let that listener run.
+  if (/** @type {Element} */ (e.target)?.closest?.('[data-canvas-table]')) return
+  e.stopPropagation()
+}
+
+/**
+ * Block macOS WebKit (WKWebView) native trackpad pinch-magnification.
+ * Unlike Chromium, WebKit does NOT surface pinch as ctrl+wheel — it fires
+ * non-standard `gesture*` events and magnifies the whole page. Stray finger
+ * movement (e.g. while dragging a column resize handle) then zooms the view.
+ * @param {Event} e
+ */
+function handleZoomGesture(e) {
+  // Let mermaid diagrams handle their own gesture zoom.
+  if (/** @type {Element} */ (e.target)?.closest?.('.mermaid-canvas')) return
+  e.preventDefault()
 }
 
 /** Register Ctrl/Cmd +/-/0 zoom shortcuts (capture phase, works in inputs). */
@@ -166,6 +181,10 @@ export function installZoomShortcuts() {
   zoomListenerInstalled = true
   window.addEventListener('keydown', handleZoomKeydown, true)
   window.addEventListener('wheel', handleZoomWheel, { capture: true, passive: false })
+  // WebKit-only pinch magnification (macOS). No-op on Chromium.
+  window.addEventListener('gesturestart', handleZoomGesture, { capture: true, passive: false })
+  window.addEventListener('gesturechange', handleZoomGesture, { capture: true, passive: false })
+  window.addEventListener('gestureend', handleZoomGesture, { capture: true, passive: false })
 }
 
 /** @param {Partial<AppSettings>} patch */

From 43b2b90a24365a9d7d7546a18922e63f1df9d04c Mon Sep 17 00:00:00 2001
From: broisnischal <neeswebservice@gmail.com>
Date: Fri, 5 Jun 2026 08:21:17 +0545
Subject: [PATCH 2/8] feat::fixing canvas table zooming

---
 docs/canvas-zoom-resize-fix.md         | 119 ++++++++
 src-tauri/src/lib.rs                   |  13 +-
 src/lib/canvas-table.js                |  14 +
 src/lib/components/DataTable.svelte    | 367 ++++++++++++++++---------
 src/lib/components/StudioShell.svelte  |   2 +-
 src/lib/components/TitleBar.svelte     |  13 +-
 src/lib/components/UpdateDialog.svelte |   2 +-
 src/lib/stores/canvas-zoom.svelte.js   |  34 +--
 src/lib/stores/settings.js             |  50 +++-
 src/main.js                            |  44 ++-
 10 files changed, 481 insertions(+), 177 deletions(-)
 create mode 100644 docs/canvas-zoom-resize-fix.md

diff --git a/docs/canvas-zoom-resize-fix.md b/docs/canvas-zoom-resize-fix.md
new file mode 100644
index 00000000..06165e91
--- /dev/null
+++ b/docs/canvas-zoom-resize-fix.md
@@ -0,0 +1,119 @@
+# Fix: Canvas table magnifies/blurs on macOS resize-handle hover
+
+**Status:** Resolved
+**Platform:** macOS (WKWebView) — Windows/Linux unaffected
+**Area:** `DataTable.svelte` canvas grid, app zoom, Tauri webview
+
+## Symptom
+
+Hovering or dragging a column resize handle made the **table alone** look huge
+and blurry, while the sidebar and the rest of the UI stayed at normal size.
+
+The mismatch was the key tell:
+
+- The sidebar/UI scale via CSS (`--app-font-size`, derived from `--app-zoom`).
+- The table is a `<canvas>`. When it ballooned independently and looked
+  **blurry** (not crisp), a bitmap was being scaled by a layer *above* the app,
+  not the app's own renderer.
+
+## Root cause
+
+It was **WebKit page-zoom**, not the app's canvas zoom and not pinch
+magnification. The diagnostic (`window.__zoomDiag()` while the table looked
+wrong) confirmed it:
+
+- `visualViewport.scale` stayed at **1** (so not pinch magnification)
+- `devicePixelRatio` **jumped** (the signature of page-zoom)
+- macOS Accessibility → Zoom was **off** (so not a system setting)
+
+Two contributing paths fed it:
+
+1. **Tauri's injected zoom polyfill.** When `zoom_hotkeys_enabled` is on, Tauri
+   injects a script that listens on the **legacy `mousewheel` event** (not the
+   standard `wheel` event) and calls `set_webview_zoom` whenever the scroll has
+   `ctrlKey` set. On macOS a trackpad **pinch arrives as `ctrl`+wheel**, so a
+   stray finger movement near a resize handle page-zoomed the whole webview.
+   Earlier fixes only blocked `wheel`, which this polyfill never uses.
+
+2. **A separate, persisted canvas zoom.** `db-studio:canvas-zoom` in
+   `localStorage` could drift independently of the app's `settings.zoom`, so the
+   grid could stay "zoomed" across sessions while the sidebar did not.
+
+Because the resize hit-test lived **on the canvas header**, the pinch landed on
+the canvas and triggered page-zoom before any JS guard could intervene.
+
+## The fix
+
+### 1. Column resize moved off the canvas to a DOM overlay
+`src/lib/components/DataTable.svelte`
+
+- Resize handles are now absolutely-positioned `<div>`s (a sticky overlay at
+  `z-index: 2`) sitting on each column's right edge, derived from `geom`.
+- The canvas no longer hit-tests or handles header resize pointer events.
+- Each handle has `pointer-events: auto`, `touch-none`, shows `col-resize`, and
+  swallows `wheel` / `mousewheel` / `gesture*` while resetting webview zoom.
+
+### 2. Wheel/pinch zoom disabled app-wide — zoom is keyboard-only
+`src/lib/stores/settings.js`
+
+- Global **capture-phase** listeners on `wheel`, `mousewheel`, and the WebKit
+  `gesturestart`/`gesturechange`/`gestureend` events call
+  `preventDefault()` + `stopImmediatePropagation()` (beats Tauri's polyfill),
+  then `resetWebviewZoom()`.
+- Zoom is now driven **only** by `Cmd/Ctrl + = / - / 0`.
+- `resetWebviewZoom()` snaps the native page-zoom back to `1` via
+  `getCurrentWebview().setZoom(1)`.
+
+### 3. App zoom is the single source of truth
+`src/lib/stores/canvas-zoom.svelte.js`, `src/lib/stores/settings.js`
+
+- Removed the independent `db-studio:canvas-zoom` persistence. `zoomState` is
+  now a plain mirror of `settings.zoom`; `applySettings()` is the only writer.
+- `applySettings()` clears the legacy `db-studio:canvas-zoom` key and calls
+  `resetWebviewZoom()` on every apply.
+
+### 4. devicePixelRatio watchdog
+`src/main.js`
+
+- On launch and on every `visualViewport`/`window` resize, if
+  `visualViewport.scale !== 1` **or** `devicePixelRatio` drifts from baseline,
+  call `resetWebviewZoom()` and re-baseline (so a genuine monitor/DPI change
+  isn't fought). `window.__zoomDiag()` remains as a console probe.
+
+### 5. Native webview zoom disabled at the source
+`src-tauri/src/lib.rs`, `src-tauri/Cargo.toml`
+
+- `.zoom_hotkeys_enabled(false)` — stops Tauri from injecting the `mousewheel`
+  zoom polyfill at all.
+- macOS `with_webview`: `setAllowsMagnification(false)`, `setMagnification(1.0)`,
+  `setPageZoom(1.0)` via `objc2-web-kit`.
+
+## Files touched
+
+- `src/lib/components/DataTable.svelte` — DOM resize handles, canvas no longer
+  resizes columns, dpr re-sync of the backing store.
+- `src/lib/stores/settings.js` — keyboard-only zoom, global wheel/pinch blockers,
+  `resetWebviewZoom()`.
+- `src/lib/stores/canvas-zoom.svelte.js` — `zoomState` mirrors app zoom only.
+- `src/main.js` — launch reset + dpr watchdog + `__zoomDiag()`.
+- `src-tauri/src/lib.rs` — `zoom_hotkeys_enabled(false)`, WKWebView zoom off.
+- `src-tauri/Cargo.toml` — `objc2-web-kit` dependency.
+
+## How to verify
+
+A **full restart** is required (`npm run tauri`) because Rust changes don't hot-reload.
+
+1. If the table is still large from a previous session, press **Cmd+0**.
+2. Hover/drag a column resize edge — cursor shows `col-resize`, table size does
+   **not** change, no blur.
+3. Pinch near a resize handle — nothing balloons.
+4. **Cmd + =** / **Cmd + -** zoom the **whole app** (sidebar + table together).
+5. Optional: run `__zoomDiag()` in DevTools — `devicePixelRatio` should stay put.
+
+## Notes
+
+- Tauri page-zoom listens on `mousewheel`, **not** `wheel`. Blocking only `wheel`
+  is insufficient on macOS.
+- Page-zoom raises `devicePixelRatio` with `visualViewport.scale === 1`; pinch
+  magnification raises `visualViewport.scale`. They are distinct and need
+  different handling.
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 1c73a7fb..f81e9e8a 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -70,9 +70,11 @@ pub fn run() {
             // keep disabled in release. The toggle_devtools command also exposes
             // them on demand via F12.
             .devtools(cfg!(debug_assertions))
-            // The app implements its own canvas-table zoom; disable Tauri's injected
-            // Ctrl/Cmd+wheel webview polyfill (macOS/Linux) so pinch near column
-            // resize handles doesn't magnify the whole webview.
+            // The app implements its own CSS-based zoom; disable Tauri's injected
+            // zoom polyfill. On macOS/Linux that polyfill attaches a `mousewheel`
+            // (legacy event) listener that calls set_webview_zoom on ctrl+scroll —
+            // a stray trackpad pinch near a column resize handle would then page-zoom
+            // the whole webview (devicePixelRatio jumps, canvas renders blurry).
             .zoom_hotkeys_enabled(false)
             .on_navigation(|url| {
                 let scheme = url.scheme();
@@ -106,8 +108,9 @@ pub fn run() {
                     }
                 }
 
-                // Disable WKWebView trackpad pinch magnification — the canvas table
-                // has its own zoom and pinch during column resize was blowing up the view.
+                // Defensive: disable every native WKWebView zoom path. App zoom is
+                // CSS-based (--app-zoom); stray pinch near column resize handles
+                // must never page-zoom the webview (devicePixelRatio drift → blur).
                 let _ = window.with_webview(|webview| unsafe {
                     use objc2_web_kit::WKWebView;
                     let view: &WKWebView = &*webview.inner().cast();
diff --git a/src/lib/canvas-table.js b/src/lib/canvas-table.js
index f9c08054..b987c755 100644
--- a/src/lib/canvas-table.js
+++ b/src/lib/canvas-table.js
@@ -47,12 +47,26 @@ export function createColorReader(probe) {
   };
 }
 
+// Memoize results — (colour, alpha) combos are few and stable, but this runs in
+// the per-frame draw loop, so caching avoids repeated regex parsing on scroll.
+/** @type {Map<string, string>} */
+const _alphaCache = new Map();
+
 /**
  * Apply an alpha to a CSS colour string regardless of notation (rgb/rgba/hsl,
  * functional space-separated, oklch/oklab/color(), or hex). Returns a string
  * the canvas understands.
  */
 export function withAlpha(/** @type {string} */ color, /** @type {number} */ a) {
+  const key = color + "@" + a;
+  const cached = _alphaCache.get(key);
+  if (cached !== undefined) return cached;
+  const out = _computeAlpha(color, a);
+  _alphaCache.set(key, out);
+  return out;
+}
+
+function _computeAlpha(/** @type {string} */ color, /** @type {number} */ a) {
   const c = color.trim();
   const fnMatch = c.match(/^([a-z]+)\((.*)\)$/i);
   if (fnMatch) {
diff --git a/src/lib/components/DataTable.svelte b/src/lib/components/DataTable.svelte
index 4b6a6e30..dd6f5968 100644
--- a/src/lib/components/DataTable.svelte
+++ b/src/lib/components/DataTable.svelte
@@ -1,11 +1,9 @@
 <script>
   import { tick, onDestroy, untrack } from "svelte";
-  import {
-    zoomState, adjustZoom, resetZoom, ZOOM_STEP,
-  } from '$lib/stores/canvas-zoom.svelte.js'
-
-  // Local derived so all $derived layout constants track it reactively.
-  const canvasZoom = $derived(zoomState.value)
+  import { zoomState } from '$lib/stores/canvas-zoom.svelte.js'
+  // Zoom is driven through the app-level settings so the canvas scales together
+  // with the rest of the UI (applySettings mirrors the app zoom into zoomState).
+  import { increaseZoom, decreaseZoom, resetZoom } from '$lib/stores/settings.js'
   import { toast } from "svelte-sonner";
   import { Checkbox } from "$lib/components/ui/checkbox/index.js";
   import * as ContextMenu from "$lib/components/ui/context-menu/index.js";
@@ -93,12 +91,14 @@
     computeColumnGeometry,
     colDrawnX,
     colAtX,
-    resizeColAtX,
     computeRowTops,
     rowAtContentY,
     rowIndexAtY,
   } from "$lib/canvas-table.js";
 
+  // Local derived so all $derived layout constants track it reactively.
+  const canvasZoom = $derived(zoomState.value)
+
   let {
     columns = [],
     rows = [],
@@ -252,11 +252,12 @@
 
 
   // ── Canvas zoom ────────────────────────────────────────────────────────────
-  // canvasZoom / adjustZoom / resetZoom come from the shared store so ALL open
-  // DataTable tabs zoom together and the level persists across sessions.
+  // canvasZoom mirrors the app zoom: applySettings() writes the app zoom into the
+  // shared zoomState store, so all open tabs zoom together with the rest of the UI
+  // and the level persists via app settings.
 
   // All layout constants scale with canvasZoom so the entire canvas zooms together.
-  const ROW_HEIGHT = $derived(Math.round(36 * canvasZoom))
+  const ROW_HEIGHT = $derived(Math.round(32 * canvasZoom))
 
   let _scrollTop = $state(0)
   // Start high so the first paint covers any reasonable screen height before the
@@ -264,7 +265,7 @@
   let _viewportHeight = $state(1200)
 
   // ── Canvas rendering ──────────────────────────────────────────────────────
-  const HEADER_H = $derived(Math.round(40 * canvasZoom))
+  const HEADER_H = $derived(Math.round(34 * canvasZoom))
   const GUTTER_EXPAND_W = $derived(Math.round(38 * canvasZoom))
   const GUTTER_SELECT_W = $derived(Math.round(42 * canvasZoom))
   /** @type {HTMLCanvasElement | null} */
@@ -282,6 +283,9 @@
   let _resizeHoverCol = $state(/** @type {string | null} */ (null))
   /** Swallow the click that fires right after a resize-drag pointerup. */
   let _suppressNextClick = false
+  /** Synchronous wheel-zoom guard — updated in pointer handlers so the wheel
+   *  listener never reads stale $state through a closed-over $effect closure. */
+  const _zoomGuard = { block: false, resizing: false }
   /** Right-click target kind, so one ContextMenu can show header vs body items. */
   let contextIsHeader = $state(false)
   let contextHeaderCol = $state("")
@@ -1263,6 +1267,18 @@
   /** Total scrollable content height incl. header + insert slot + body. */
   const contentHeight = $derived(HEADER_H + insertRowOffset + (rowTops[rows.length] ?? 0))
 
+  /** Viewport-visible column resize handles (DOM overlay — not on the canvas). */
+  const resizeHandles = $derived.by(() => {
+    /** @type {{ name: string, x: number }[]} */
+    const out = []
+    for (const col of geom.cols) {
+      const x = colDrawnX(col, geom, _scrollLeft) + col.w
+      if (x < gutterWidth - 6 || x > _viewportWidth + 6) continue
+      out.push({ name: col.name, x })
+    }
+    return out
+  })
+
   /** Document-space y of a body row's top (0 = top of the sizer). */
   function rowDocTop(/** @type {number} */ idx) {
     return HEADER_H + insertRowOffset + (rowTops[idx] ?? idx * ROW_HEIGHT)
@@ -1389,6 +1405,8 @@
   /** @param {string} colName */
   function startColumnResize(colName) {
     resizingColName = colName;
+    _zoomGuard.resizing = true
+    _zoomGuard.block = true
     resizeStartWidth = columnWidths[colName] ?? defaultColumnWidth("");
   }
 
@@ -1422,6 +1440,8 @@
       if (columnWidthsKey) saveColumnWidths(columnWidthsKey, columnWidths);
     }
     resizingColName = null;
+    _zoomGuard.resizing = false
+    _zoomGuard.block = false
   }
 
   /** Cycle sort: none → asc → desc → none */
@@ -1474,7 +1494,7 @@
   // restores exactly what the user had open in each table.
   /** @type {Map<string, { expandedRows: Set<number>, fkSubview: typeof fkSubview }>} */
   const _tabExpandCache = new Map()
-  let _lastTabKey = columnWidthsKey ?? ''
+  let _lastTabKey = $state(columnWidthsKey ?? '')
 
   $effect(() => {
     const newKey = columnWidthsKey ?? ''
@@ -1638,10 +1658,10 @@
 
   /** @param {KeyboardEvent} e */
   function handleTableKeydown(e) {
-    // Ctrl/Cmd + / - / 0: zoom the canvas table
+    // Ctrl/Cmd + / - / 0: zoom the whole app (canvas scales in lockstep).
     if ((e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey) {
-      if (e.key === '=' || e.key === '+') { e.preventDefault(); adjustZoom(ZOOM_STEP); return }
-      if (e.key === '-')                  { e.preventDefault(); adjustZoom(-ZOOM_STEP); return }
+      if (e.key === '=' || e.key === '+') { e.preventDefault(); increaseZoom(); return }
+      if (e.key === '-')                  { e.preventDefault(); decreaseZoom(); return }
       if (e.key === '0')                  { e.preventDefault(); resetZoom(); return }
     }
 
@@ -1814,14 +1834,43 @@
   }
 
   // ── Canvas drawing ─────────────────────────────────────────────────────────
-  const CELL_PAD_X = $derived(Math.round(16 * canvasZoom))
+  const CELL_PAD_X = $derived(Math.round(12 * canvasZoom))
   const ICON_HIT = $derived(Math.round(24 * canvasZoom))
 
+  // Cached glyph advance for the active ctx.font. Every table font is monospace,
+  // so text width is O(1) (charCount × advance). This replaces the per-cell
+  // measureText() binary search that was the main scroll-framerate bottleneck.
+  // Re-measured automatically whenever ctx.font changes (zoom / cell vs header).
+  let _glyphW = 0
+  let _glyphFont = ''
+  function _syncGlyphW(/** @type {CanvasRenderingContext2D} */ ctx) {
+    if (ctx.font === _glyphFont) return
+    const a = ctx.measureText('i').width
+    const b = ctx.measureText('W').width
+    _glyphW = Math.abs(a - b) < 0.1 ? b : 0 // 0 ⇒ not monospace → fall back to measureText
+    _glyphFont = ctx.font
+  }
+
+  /** Width of `str` under the active font (O(1) for monospace). */
+  function textWidth(/** @type {CanvasRenderingContext2D} */ ctx, /** @type {string} */ str) {
+    _syncGlyphW(ctx)
+    return _glyphW > 0 ? str.length * _glyphW : ctx.measureText(str).width
+  }
+
   /** Truncate `text` to fit `maxW` px under the current ctx.font, adding `…`. */
   function truncText(ctx, text, maxW) {
     if (maxW <= 0) return ''
+    const len = text.length
+    if (len === 0) return text
+    _syncGlyphW(ctx)
+    if (_glyphW > 0) {
+      if (len * _glyphW <= maxW) return text
+      const maxChars = Math.floor(maxW / _glyphW)
+      return maxChars <= 1 ? (maxChars === 1 ? '…' : '') : text.slice(0, maxChars - 1) + '…'
+    }
+    // Proportional fallback (non-monospace fonts only).
     if (ctx.measureText(text).width <= maxW) return text
-    let lo = 0, hi = text.length
+    let lo = 0, hi = len
     while (lo < hi) {
       const mid = (lo + hi + 1) >> 1
       if (ctx.measureText(text.slice(0, mid) + '…').width <= maxW) lo = mid
@@ -1845,25 +1894,13 @@
     const ctx = _ctx
     const read = _readColor
     if (!ctx || !read || !canvasEl || !colorProbe) return
+    // Fonts are measured off the live DOM probe, so they already reflect the
+    // app zoom (.text-ui-* sizes resolve against --app-font-size). The layout
+    // constants (ROW_HEIGHT, HEADER_H, …) scale by the same canvasZoom factor,
+    // so text and geometry stay proportional with the rest of the UI. Do NOT
+    // multiply the probe fonts by canvasZoom again — that double-scales them.
     if (!_fonts) _fonts = readFonts(colorProbe)
 
-    // Scale fonts for the current zoom level.
-    // We temporarily swap _fonts so all drawing helpers pick up the right sizes
-    // without needing extra parameters.
-    const _baseFonts = _fonts
-    if (canvasZoom !== 1.0 && _baseFonts) {
-      const cpx = Math.max(8, Math.round(_baseFonts.cellPx * canvasZoom))
-      const tpx = Math.max(7, Math.round(_baseFonts.typePx * canvasZoom))
-      _fonts = {
-        family: _baseFonts.family,
-        cellPx: cpx,
-        typePx: tpx,
-        cell:   `${cpx}px ${_baseFonts.family}`,
-        type:   `${tpx}px ${_baseFonts.family}`,
-        header: `530 ${cpx}px ${_baseFonts.family}`,
-      }
-    }
-
     const W = _viewportWidth
     const H = _viewportHeight
     const n = rows.length
@@ -1892,6 +1929,12 @@
     const usedW = Math.max(0, Math.min(W, geom.totalWidth - _scrollLeft))
     const navName = focusedCol !== null ? navigableColumns[focusedCol]?.name : null
 
+    // Frozen left region (gutter + pinned columns). Non-pinned grid separators
+    // behind it are skipped in the batched grid pass so they don't draw over the
+    // opaque pinned/gutter fills.
+    let frozenW = gutterWidth
+    for (const col of geom.cols) if (col.pinned) frozenW += col.w
+
     // ── Body ─────────────────────────────────────────────────────────────
     ctx.save()
     ctx.beginPath()
@@ -1907,7 +1950,7 @@
       if (ry + ROW_HEIGHT <= HEADER_H) continue
       drawBodyRow(ctx, i, ry, {
         cFg, cText, cMuted, cGrid, cMutedBg, cRing, cAccent, cPanel, usedW, navName,
-        AMBER, BLUE_FG, cPrimary,
+        AMBER, BLUE_FG, cPrimary, frozenW,
       })
     }
     ctx.restore()
@@ -1917,9 +1960,6 @@
       W, cPanel, cFg, cMuted, cGrid, cBorder, cMutedBg, cAccent, cPrimary, cRing,
       AMBER, AMBER_FG, BLUE_FG, usedW,
     })
-
-    // Restore base fonts (the zoom-scaled copy was only for this draw pass).
-    _fonts = _baseFonts
   }
 
   /** @param {CanvasRenderingContext2D} ctx */
@@ -1983,7 +2023,7 @@
 
       const maxLabelW = VIRTUAL_COL_W - 28
       const labelTxt = truncText(ctx, vc.label, maxLabelW)
-      const textW = ctx.measureText(labelTxt).width
+      const textW = textWidth(ctx, labelTxt)
       const bW = textW + bPadX * 2
       const bX = cellX + (VIRTUAL_COL_W - bW) / 2
       const bY = ry + (rh - bH) / 2
@@ -2002,18 +2042,47 @@
       ctx.fillStyle = isActive ? c.cPrimary : withAlpha(c.cFg, 0.7)
       ctx.textBaseline = 'middle'; ctx.textAlign = 'center'
       ctx.fillText(labelTxt, bX + bW / 2, ry + rh / 2 + 0.5)
-
-      // Right column border (vertical)
-      ctx.strokeStyle = c.cGrid; ctx.lineWidth = 1
-      ctx.beginPath(); ctx.moveTo(cellX + VIRTUAL_COL_W - 0.5, ry); ctx.lineTo(cellX + VIRTUAL_COL_W - 0.5, ry + rh); ctx.stroke()
     }
 
-    // Bottom grid line — drawn LAST so it sits on top of all cell fills (real + virtual).
+    // ── Batched grid pass ───────────────────────────────────────────────────
+    // All separators (column edges, virtual edges, gutter, bottom row line) are
+    // collected into ONE path and stroked once — instead of a beginPath/stroke
+    // per cell. This collapses ~(cols+3) draw-call flushes per row down to one,
+    // the single biggest scroll-perf win alongside O(1) text measurement.
+    const vw = _viewportWidth
+    const frozenW = c.frozenW ?? gutterWidth
     ctx.strokeStyle = c.cGrid
     ctx.lineWidth = 1
     ctx.beginPath()
-    ctx.moveTo(0, ry + rh - 0.5)
-    ctx.lineTo(_viewportWidth, ry + rh - 0.5)
+    // Non-pinned column separators (skip ones hidden behind the frozen region).
+    for (const col of geom.cols) {
+      if (col.pinned) continue
+      const dx = col.contentX - _scrollLeft
+      if (dx + col.w <= 0 || dx >= vw) continue
+      const ex = dx + col.w - 0.5
+      if (ex <= frozenW) continue
+      ctx.moveTo(ex, ry); ctx.lineTo(ex, ry + rh)
+    }
+    // Virtual relationship column separators.
+    for (let vi = 0; vi < virtualRelCols.length; vi++) {
+      const ex = geom.totalWidth + vi * VIRTUAL_COL_W - _scrollLeft + VIRTUAL_COL_W - 0.5
+      if (ex <= frozenW || ex >= vw) continue
+      ctx.moveTo(ex, ry); ctx.lineTo(ex, ry + rh)
+    }
+    // Pinned column separators (frozen, drawn on top of their fills).
+    for (const col of geom.cols) {
+      if (!col.pinned) continue
+      const ex = colDrawnX(col, geom, _scrollLeft) + col.w - 0.5
+      if (ex <= 0 || ex >= vw) continue
+      ctx.moveTo(ex, ry); ctx.lineTo(ex, ry + rh)
+    }
+    // Gutter separator (scrolls with content).
+    if (gutterWidth > 0) {
+      const gex = gutterWidth - _scrollLeft - 0.5
+      if (gex > 0 && gex < vw) { ctx.moveTo(gex, ry); ctx.lineTo(gex, ry + rh) }
+    }
+    // Bottom row line.
+    ctx.moveTo(0, ry + rh - 0.5); ctx.lineTo(vw, ry + rh - 0.5)
     ctx.stroke()
   }
 
@@ -2051,10 +2120,7 @@
       ctx.strokeRect(cellX + 1, ry + 1, w - 2, rh - 2)
     }
 
-    // Vertical grid separator at right edge.
-    ctx.strokeStyle = c.cGrid
-    ctx.lineWidth = 1
-    ctx.beginPath(); ctx.moveTo(cellX + w - 0.5, ry); ctx.lineTo(cellX + w - 0.5, ry + rh); ctx.stroke()
+    // (Vertical grid separators are batched once per row in drawBodyRow.)
 
     // Dirty inset marker.
     if (isDirty && !editing) {
@@ -2076,7 +2142,7 @@
     // Right-side content widths (sequential, no overlap).
     const hoverW = isHover ? ICON_HIT + (canExpand ? ICON_HIT : 0) : 0
     const fkW = (activeFk && rowHover) ? 20 : 0
-    const jsonW = isJson ? 36 : 0
+    const jsonW = isJson ? Math.round(36 * canvasZoom) : 0
     const rightReserve = 4 + hoverW + fkW + jsonW  // 4 = right margin
     const textMaxW = w - CELL_PAD_X * 2 - rightReserve
 
@@ -2105,18 +2171,19 @@
       rx -= 20
     }
 
-    // 3. JSON pill.
+    // 3. JSON pill — scale with canvasZoom so it stays proportional to the grid.
     if (isJson) {
-      const pillW = 30, pillH = 13
+      const pillW = Math.round(30 * canvasZoom), pillH = Math.round(13 * canvasZoom)
       const px = rx - 2 - pillW
       const py = ry + (rh - pillH) / 2
+      const pillFontPx = Math.max(8, Math.round(9 * canvasZoom))
       ctx.fillStyle = withAlpha(c.cMutedBg, 0.5)
-      roundRect(ctx, px, py, pillW, pillH, 2.5); ctx.fill()
+      roundRect(ctx, px, py, pillW, pillH, 2.5 * canvasZoom); ctx.fill()
       ctx.fillStyle = c.cMuted
-      ctx.font = `600 9px ${_fonts.family}`
+      ctx.font = `600 ${pillFontPx}px ${_fonts.family}`
       ctx.textAlign = 'left'
-      ctx.fillText('JSON', px + 8, py + pillH / 2 + 0.5)
-      drawIcon(ctx, 'braces', px + 1.5, py + 2.5, 8, c.cMuted, 2.2)
+      ctx.fillText('JSON', px + Math.round(8 * canvasZoom), py + pillH / 2 + 0.5)
+      drawIcon(ctx, 'braces', px + 1.5 * canvasZoom, py + 2.5 * canvasZoom, Math.round(8 * canvasZoom), c.cMuted, 2.2)
     }
 
     // Focused-cell outline — bright primary border.
@@ -2149,9 +2216,7 @@
         { border: c.cMuted, fill: c.cPrimary, mark: c.cPanel })
       gx += GUTTER_SELECT_W
     }
-    ctx.strokeStyle = c.cGrid
-    ctx.lineWidth = 1
-    ctx.beginPath(); ctx.moveTo(offsetX + gutterWidth - 0.5, ry); ctx.lineTo(offsetX + gutterWidth - 0.5, ry + rh); ctx.stroke()
+    // (Gutter separator is batched once per row in drawBodyRow.)
   }
 
   /** @param {CanvasRenderingContext2D} ctx */
@@ -2249,12 +2314,12 @@
     ctx.textBaseline = 'middle'
     ctx.textAlign = 'left'
 
+    // Relational indicators only (primary + foreign key). Uniqueness/index were
+    // dropped from the header to cut clutter — they still surface in the inspector.
     const badges = []
     if (meta) {
       if (meta.pk) badges.push({ letter: 'K', bg: withAlpha(c.AMBER, 0.15), fg: c.AMBER_FG })
       if (meta.fk) badges.push({ letter: 'F', bg: 'rgba(59,130,246,0.12)', fg: c.BLUE_FG })
-      if (meta.unique && !meta.pk) badges.push({ letter: 'U', bg: withAlpha(c.cMutedBg, 0.6), fg: withAlpha(c.cMuted, 0.7) })
-      if (meta.indexed) badges.push({ letter: 'I', bg: withAlpha(c.cMutedBg, 0.6), fg: withAlpha(c.cMuted, 0.6) })
     }
     const badgeW = badges.length * 16
 
@@ -2264,25 +2329,21 @@
     const nameMaxW = w - CELL_PAD_X - sortReserve - badgeW - 8
     const name = truncText(ctx, col.name, Math.max(0, nameMaxW))
     ctx.fillText(name, x + CELL_PAD_X, cy + 0.5)
-    let tx = x + CELL_PAD_X + ctx.measureText(name).width + 7
+    let tx = x + CELL_PAD_X + textWidth(ctx, name) + 7
 
-    // Badges.
+    // Key badges.
     for (const b of badges) {
       drawBadge(ctx, tx, cy - 6.5, 13, { bg: b.bg, fg: b.fg, letter: b.letter ?? '', dot: b.dot })
       tx += 16
     }
 
-    // Inline datatype with separator dot — only if there's comfortable room.
-    const typeGap = badges.length ? 5 : 3
-    const typeStartX = tx + typeGap
+    // Inline datatype — muted, no dot separator (cleaner), only when there's room.
+    const typeStartX = tx + (badges.length ? 4 : 2)
     const typeRoom = x + w - sortReserve - 4 - typeStartX
-    if (typeRoom > 28 && col.dataType) {
+    if (typeRoom > 24 && col.dataType) {
       ctx.font = _fonts.type
-      ctx.fillStyle = withAlpha(c.cMuted, 0.3)
-      ctx.fillText('·', typeStartX, cy + 0.5)
-      const dotW = ctx.measureText('· ').width
-      ctx.fillStyle = withAlpha(c.cMuted, 0.7)
-      ctx.fillText(truncText(ctx, col.dataType, typeRoom - dotW), typeStartX + dotW, cy + 0.5)
+      ctx.fillStyle = withAlpha(c.cMuted, 0.5)
+      ctx.fillText(truncText(ctx, col.dataType, typeRoom), typeStartX, cy + 0.5)
     }
 
     // Sort indicator — Lucide icons.
@@ -2326,6 +2387,19 @@
     return !!_ctx
   }
 
+  // rAF-batched paint — coalesces bursts of scroll/state changes into a single
+  // draw per animation frame so high-frequency trackpad scroll (up to 120Hz on
+  // ProMotion) never queues multiple synchronous repaints and tears/janks.
+  let _drawRafId = 0
+  function scheduleDraw() {
+    if (_drawRafId) return
+    _drawRafId = requestAnimationFrame(() => {
+      _drawRafId = 0
+      if (_ctx) draw()
+    })
+  }
+  onDestroy(() => { if (_drawRafId) cancelAnimationFrame(_drawRafId) })
+
   // Layout / sizing effect — resize the backing store when geometry or viewport changes.
   $effect(() => {
     void rows; void columns; void columnWidths
@@ -2336,13 +2410,13 @@
     void geom; void rowTops; void _redrawToken; void foreignKeys; void indexes
     void _colCache; void expandedRowHeights; void fkSubview; void virtualRelCols; void VIRTUAL_COL_W
     void zoomState.value; void canvasZoom
-    if (syncCanvasSurface()) draw()
+    if (syncCanvasSurface()) scheduleDraw()
   })
 
   // Hover / affordance repaint — pointer moves must not re-touch canvas dimensions.
   $effect(() => {
     void hoveredRow; void hoveredColName; void _resizeHoverCol; void resizingColName
-    if (_ctx) draw()
+    if (_ctx) scheduleDraw()
   })
 
   // ── Canvas pointer interaction ──────────────────────────────────────────
@@ -2423,7 +2497,6 @@
       case 'header-expand-all': collapseAllRows(); return
       case 'header-select-all': toggleAll(!allSelected); return
       case 'header': {
-        if (resizeColAtX(x, geom, _scrollLeft, 5, 0)) return // resize edge — handled on pointerdown
         handleHeaderSort(t.col.name)
         return
       }
@@ -2513,13 +2586,20 @@
     if (t.kind === 'cell') tryFollowForeignKey(/** @type {number} */ (t.idx), /** @type {number} */ (t.actualIdx), e)
   }
 
-  function onCanvasPointerDown(/** @type {PointerEvent} */ e) {
+  /** Swallow pinch/scroll zoom on resize handles; reset stray webview page-zoom. */
+  function blockPointerZoom(/** @type {Event} */ e) {
+    e.preventDefault()
+    e.stopPropagation()
+    void import('@tauri-apps/api/webview')
+      .then(({ getCurrentWebview }) => getCurrentWebview().setZoom(1))
+      .catch(() => {})
+  }
+
+  /** @param {PointerEvent} e @param {string} colName */
+  function onResizeHandleDown(e, colName) {
     if (e.button !== 0) return
-    const { x, y } = canvasXY(e)
-    if (y >= HEADER_H) return
-    const colName = resizeColAtX(x, geom, _scrollLeft, 5, 0)
-    if (!colName) return
     e.preventDefault()
+    e.stopPropagation()
     startColumnResize(colName)
     const startX = e.clientX
     const move = (/** @type {PointerEvent} */ ev) => applyColumnResize(ev.clientX - startX)
@@ -2527,8 +2607,6 @@
       window.removeEventListener('pointermove', move)
       window.removeEventListener('pointerup', up)
       endColumnResize()
-      // The pointerup is followed by a synthetic click on the canvas; swallow it
-      // so a drag that collapsed/resized a column doesn't also sort/restore it.
       _suppressNextClick = true
       setTimeout(() => { _suppressNextClick = false }, 0)
     }
@@ -2536,12 +2614,35 @@
     window.addEventListener('pointerup', up)
   }
 
+  /** @param {string} colName */
+  function onResizeHandleEnter(colName) {
+    _resizeHoverCol = colName
+    _zoomGuard.block = true
+    void import('@tauri-apps/api/webview')
+      .then(({ getCurrentWebview }) => getCurrentWebview().setZoom(1))
+      .catch(() => {})
+  }
+
+  function onResizeHandleLeave() {
+    if (!resizingColName) {
+      _resizeHoverCol = null
+      _zoomGuard.block = false
+    }
+  }
+
+  function onCanvasPointerDown(/** @type {PointerEvent} */ e) {
+    if (e.button !== 0) return
+    const { y } = canvasXY(e)
+    // Header resize is handled by the DOM overlay — canvas only handles body.
+    if (y < HEADER_H) return
+  }
+
   function onCanvasPointerMove(/** @type {PointerEvent} */ e) {
     const { x, y } = canvasXY(e)
     if (resizingColName) return
     if (y < HEADER_H) {
-      const rc = resizeColAtX(x, geom, _scrollLeft, 5, 0)
-      _resizeHoverCol = rc
+      _resizeHoverCol = null
+      _zoomGuard.block = false
       const cx = x + _scrollLeft
       const hit = cx >= gutterWidth ? colAtX(x, geom, _scrollLeft, 0) : null
       hoveredRow = null
@@ -2549,6 +2650,7 @@
       return
     }
     _resizeHoverCol = null
+    _zoomGuard.block = false
     // Check virtual rel columns first (they are to the right of real columns)
     if (y >= HEADER_H && virtualRelCols.length > 0) {
       const cx = x + _scrollLeft
@@ -2578,26 +2680,26 @@
     hoveredRow = null
     hoveredColName = null
     _resizeHoverCol = null
+    _zoomGuard.block = false
   }
 
-  // Ctrl/Cmd+Scroll → zoom the canvas. Must use { passive: false } so preventDefault
-  // works — Svelte's onwheel directive registers a passive listener by default which
-  // can't call preventDefault, causing the browser to intercept the event first.
-  // Capture phase so we run after the window-level webview guard (preventDefault only)
-  // but before the browser applies native magnification.
+  // Re-sync canvas backing store when devicePixelRatio changes (stray webview
+  // page-zoom on macOS). Without this the CSS box and bitmap can drift → blur.
   $effect(() => {
-    const el = tableContainer
-    if (!el) return
-    function onWheel(/** @type {WheelEvent} */ e) {
-      if (!e.ctrlKey && !e.metaKey) return
-      // Trackpad pinch / scroll while grabbing a column edge is not zoom intent.
-      if (resizingColName || _resizeHoverCol) return
-      e.preventDefault()
-      e.stopPropagation()
-      adjustZoom(e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP)
+    if (!tableContainer) return
+    let lastDpr = window.devicePixelRatio
+    const resync = () => {
+      const dpr = window.devicePixelRatio
+      if (dpr === lastDpr) return
+      lastDpr = dpr
+      if (syncCanvasSurface()) scheduleDraw()
+    }
+    window.addEventListener('resize', resync)
+    window.visualViewport?.addEventListener('resize', resync)
+    return () => {
+      window.removeEventListener('resize', resync)
+      window.visualViewport?.removeEventListener('resize', resync)
     }
-    el.addEventListener('wheel', onWheel, { capture: true, passive: false })
-    return () => el.removeEventListener('wheel', onWheel, { capture: true })
   })
 
   function onCanvasContextMenu(/** @type {MouseEvent} */ e, /** @type {((e: MouseEvent) => void) | undefined} */ bitsOpen) {
@@ -2670,38 +2772,23 @@
           class={cn(
             "app-scroll relative overflow-auto bg-panel select-none outline-none [scrollbar-gutter:stable] [contain:layout] [overflow-anchor:none]",
             embedded ? "max-h-80" : "min-h-0 flex-1",
-            (resizingColName || _resizeHoverCol) && "cursor-col-resize",
+            resizingColName && "cursor-col-resize",
           )}
           oncontextmenu={(e) => onCanvasContextMenu(e, bitsContextMenu)}
           onscroll={onContainerScroll}
           onkeydown={handleTableKeydown}
           onwheel={(e) => {
-            // Without Shift: treat all wheel events as vertical.
-            // Horizontal table scroll only when Shift is explicitly held.
-            // This prevents trackpad horizontal-bias from hijacking page scroll.
-            if (!e.shiftKey && Math.abs(e.deltaY) >= Math.abs(e.deltaX)) {
-              // Vertical-dominant scroll without Shift — let it bubble up to
-              // the parent (AI chat / page scroll) and prevent the table from
-              // consuming it as horizontal scroll.
+            // Shift+wheel → horizontal scroll (maps a mouse wheel's vertical
+            // delta onto the X axis). Everything else — vertical, trackpad,
+            // diagonal — is left to the browser so macOS momentum/inertia and
+            // edge overscroll-chaining to the parent stay buttery smooth.
+            if (e.shiftKey) {
               const tc = tableContainer
-              if (!tc) return
-              const atTop = tc.scrollTop === 0
-              const atBottom = tc.scrollTop + tc.clientHeight >= tc.scrollHeight - 1
-              if (e.deltaY < 0 && atTop || e.deltaY > 0 && atBottom) {
-                // Already at the vertical limit — let the outer container scroll
-                return
+              if (tc && (e.deltaY || e.deltaX)) {
+                e.preventDefault()
+                tc.scrollLeft += e.deltaY || e.deltaX
               }
-              // Otherwise scroll this container vertically (the default behavior)
-              // and stop horizontal scrolling.
-              e.preventDefault()
-              tc.scrollTop += e.deltaY
-            } else if (e.shiftKey) {
-              // Shift+scroll: horizontal scrolling within the table
-              e.preventDefault()
-              const tc = tableContainer
-              if (tc) tc.scrollLeft += e.deltaY || e.deltaX
             }
-            // Pure horizontal gesture (deltaX dominant, no shift) — allow native
           }}
           onfocusin={() => { isTableFocused = true; }}
           onfocusout={(e) => {
@@ -2728,7 +2815,7 @@
               <canvas
                 bind:this={canvasEl}
                 class="block"
-                style="cursor:{resizingColName || _resizeHoverCol ? 'col-resize' : 'default'}"
+                style="cursor:default"
                 onclick={onCanvasClick}
                 ondblclick={onCanvasDblClick}
                 onauxclick={onCanvasAuxClick}
@@ -2738,6 +2825,33 @@
               ></canvas>
             </div>
 
+            <!-- Column resize handles: DOM overlay so header edge interaction never
+                 hits the canvas (macOS trackpad pinch on canvas was page-zooming
+                 the webview and making the grid look huge/blurry). -->
+            <div
+              class="sticky top-0 z-[2] pointer-events-none"
+              style="height:{HEADER_H}px; width:{_viewportWidth}px"
+              aria-hidden="true"
+            >
+              {#each resizeHandles as h (h.name)}
+                <div
+                  role="separator"
+                  aria-orientation="vertical"
+                  aria-label="Resize column {h.name}"
+                  class="absolute top-0 h-full w-2.5 -translate-x-1/2 cursor-col-resize pointer-events-auto touch-none"
+                  style="left:{h.x}px"
+                  onpointerdown={(e) => onResizeHandleDown(e, h.name)}
+                  onpointerenter={() => onResizeHandleEnter(h.name)}
+                  onpointerleave={onResizeHandleLeave}
+                  onwheel={blockPointerZoom}
+                  onmousewheel={blockPointerZoom}
+                  ongesturestart={blockPointerZoom}
+                  ongesturechange={blockPointerZoom}
+                  ongestureend={blockPointerZoom}
+                ></div>
+              {/each}
+            </div>
+
             <!-- Sizer: establishes the scroll range; DOM overlays are positioned
                  within it in content coordinates. -->
             <div
@@ -2747,6 +2861,7 @@
               <!-- Inline insert-row form -->
               {#if newRowDrafts}
                 <div
+                  role="none"
                   class="absolute left-0 z-20 flex border-b border-border/30 bg-emerald-500/[0.04] ring-1 ring-inset ring-emerald-500/20"
                   style="top:{HEADER_H}px; height:{ROW_HEIGHT}px; width:{geom.totalWidth}px"
                   onkeydown={onNewRowKeydown}
diff --git a/src/lib/components/StudioShell.svelte b/src/lib/components/StudioShell.svelte
index e221add5..637577b3 100644
--- a/src/lib/components/StudioShell.svelte
+++ b/src/lib/components/StudioShell.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount, onDestroy, untrack } from 'svelte'
+  import { onMount, onDestroy, untrack, tick } from 'svelte'
   import Database from '@lucide/svelte/icons/database'
   import Terminal from '@lucide/svelte/icons/terminal'
   import Table2 from '@lucide/svelte/icons/table-2'
diff --git a/src/lib/components/TitleBar.svelte b/src/lib/components/TitleBar.svelte
index ddb25024..ff373018 100644
--- a/src/lib/components/TitleBar.svelte
+++ b/src/lib/components/TitleBar.svelte
@@ -42,7 +42,18 @@
     const p = win.listen('tauri://resize', async () => {
       [maximized, fullscreen] = await Promise.all([win.isMaximized(), win.isFullscreen()])
     })
-    return () => { p.then(fn => fn()).catch(() => {}) }
+
+    // After minimize/restore, WebKit's pointer hit-testing tree can become stale,
+    // making buttons unresponsive. Briefly toggling pointer-events forces a rebuild.
+    const pFocus = win.listen('tauri://focus', () => {
+      document.documentElement.style.pointerEvents = 'none'
+      requestAnimationFrame(() => { document.documentElement.style.pointerEvents = '' })
+    })
+
+    return () => {
+      p.then(fn => fn()).catch(() => {})
+      pFocus.then(fn => fn()).catch(() => {})
+    }
   })
 
   async function winClose()            { try { await getCurrentWindow().close()                    } catch {} }
diff --git a/src/lib/components/UpdateDialog.svelte b/src/lib/components/UpdateDialog.svelte
index d52834d0..51e3fc74 100644
--- a/src/lib/components/UpdateDialog.svelte
+++ b/src/lib/components/UpdateDialog.svelte
@@ -166,8 +166,8 @@
 {#if visible}
   {#if status === 'available'}
     <!-- Full-screen modal for update available -->
-    <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
     <div
+      role="none"
       class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
       onclick={(e) => e.target === e.currentTarget && (dismissed = true)}
     >
diff --git a/src/lib/stores/canvas-zoom.svelte.js b/src/lib/stores/canvas-zoom.svelte.js
index 1da316cc..fbe71613 100644
--- a/src/lib/stores/canvas-zoom.svelte.js
+++ b/src/lib/stores/canvas-zoom.svelte.js
@@ -1,31 +1,9 @@
-// Shared canvas-table zoom — module-level reactive object so ALL open DataTable
-// tabs zoom together in real time and the level persists across sessions.
+// Shared canvas-table zoom — mirrors app settings zoom only. Do NOT persist a
+// separate localStorage key; that caused the table to balloon independently of
+// the sidebar (stale db-studio:canvas-zoom from accidental pinch near resize handles).
+
 export const ZOOM_MIN = 0.5
 export const ZOOM_MAX = 2.5
-export const ZOOM_STEP = 0.1
-
-function load() {
-  try {
-    const v = parseFloat(localStorage.getItem('db-studio:canvas-zoom') ?? '1')
-    return Number.isFinite(v) ? Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, v)) : 1.0
-  } catch { return 1.0 }
-}
-
-function save(v) {
-  try { localStorage.setItem('db-studio:canvas-zoom', String(v)) } catch {}
-}
-
-// Export an object — mutating .value is allowed; reassigning the binding is not.
-export const zoomState = $state({ value: load() })
-
-export function adjustZoom(delta) {
-  zoomState.value = Math.round(
-    Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, zoomState.value + delta)) * 10
-  ) / 10
-  save(zoomState.value)
-}
 
-export function resetZoom() {
-  zoomState.value = 1.0
-  save(1.0)
-}
+/** Reactive mirror of app zoom — applySettings() is the single writer. */
+export const zoomState = $state({ value: 1.0 })
diff --git a/src/lib/stores/settings.js b/src/lib/stores/settings.js
index 294237ab..eeff6008 100644
--- a/src/lib/stores/settings.js
+++ b/src/lib/stores/settings.js
@@ -6,6 +6,7 @@ import {
   THEME_IDS,
   normalizeThemeId,
 } from '$lib/themes/registry.js'
+import { zoomState, ZOOM_MIN, ZOOM_MAX } from '$lib/stores/canvas-zoom.svelte.js'
 
 const STORAGE_KEY = 'db-studio:settings'
 
@@ -110,6 +111,23 @@ export function applySettings(settings) {
   isCurrentThemeDark.set(dark)
   root.style.setProperty('--app-zoom', String(zoom))
   root.style.setProperty('--app-font-size', `${Math.round(14 * zoom)}px`)
+
+  // Keep the canvas-table zoom in lockstep with the app zoom so Cmd +/-/0 (and
+  // the zoom buttons) scale the grid alongside the rest of the UI. The canvas
+  // renderer reads zoomState directly and repaints on change.
+  // Drop the legacy per-table key — it drifted from settings.zoom and made only
+  // the grid look huge/blurry while the sidebar stayed at normal scale.
+  try { localStorage.removeItem('db-studio:canvas-zoom') } catch {}
+  const canvasZoom = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, zoom))
+  if (zoomState.value !== canvasZoom) zoomState.value = canvasZoom
+  resetWebviewZoom()
+}
+
+/** Snap native webview page-zoom back to 1 (macOS pinch / Tauri polyfill leak). */
+export function resetWebviewZoom() {
+  void import('@tauri-apps/api/webview')
+    .then(({ getCurrentWebview }) => getCurrentWebview().setZoom(1))
+    .catch(() => {})
 }
 
 let zoomListenerInstalled = false
@@ -150,37 +168,41 @@ function handleZoomKeydown(e) {
 
 }
 
-/** Block Tauri webview zoom (Ctrl/Cmd + wheel) when hotkeys are enabled in the shell. */
-function handleZoomWheel(e) {
-  if (!(e.ctrlKey || e.metaKey)) return
-  // Let mermaid diagrams handle their own Ctrl+scroll zoom
+/**
+ * Block every Ctrl/Cmd + scroll zoom path. Zoom is keyboard-only (Cmd +/-/0).
+ * macOS trackpad pinch arrives as ctrl+wheel near column resize handles and
+ * page-zooms the webview (devicePixelRatio drift → canvas looks huge/blurry
+ * while the sidebar, scaled via --app-font-size, stays normal).
+ * @param {Event} e
+ */
+function blockNativeScrollZoom(e) {
+  const we = /** @type {WheelEvent} */ (e)
+  if (!(we.ctrlKey || we.metaKey)) return
+  // Let mermaid diagrams handle their own Ctrl+scroll zoom.
   if (/** @type {Element} */ (e.target)?.closest?.('.mermaid-canvas')) return
-  // Always block native webview magnification (macOS pinch / Tauri polyfill).
   e.preventDefault()
-  // Canvas DataTable owns Ctrl/Cmd+scroll inside the grid — let that listener run.
-  if (/** @type {Element} */ (e.target)?.closest?.('[data-canvas-table]')) return
-  e.stopPropagation()
+  e.stopImmediatePropagation()
+  resetWebviewZoom()
 }
 
 /**
  * Block macOS WebKit (WKWebView) native trackpad pinch-magnification.
- * Unlike Chromium, WebKit does NOT surface pinch as ctrl+wheel — it fires
- * non-standard `gesture*` events and magnifies the whole page. Stray finger
- * movement (e.g. while dragging a column resize handle) then zooms the view.
  * @param {Event} e
  */
 function handleZoomGesture(e) {
-  // Let mermaid diagrams handle their own gesture zoom.
   if (/** @type {Element} */ (e.target)?.closest?.('.mermaid-canvas')) return
   e.preventDefault()
+  e.stopImmediatePropagation()
+  resetWebviewZoom()
 }
 
-/** Register Ctrl/Cmd +/-/0 zoom shortcuts (capture phase, works in inputs). */
 export function installZoomShortcuts() {
   if (zoomListenerInstalled || typeof window === 'undefined') return
   zoomListenerInstalled = true
   window.addEventListener('keydown', handleZoomKeydown, true)
-  window.addEventListener('wheel', handleZoomWheel, { capture: true, passive: false })
+  window.addEventListener('wheel', blockNativeScrollZoom, { capture: true, passive: false })
+  // Legacy event — Tauri's zoom polyfill listens on this, not `wheel`.
+  window.addEventListener('mousewheel', blockNativeScrollZoom, { capture: true, passive: false })
   // WebKit-only pinch magnification (macOS). No-op on Chromium.
   window.addEventListener('gesturestart', handleZoomGesture, { capture: true, passive: false })
   window.addEventListener('gesturechange', handleZoomGesture, { capture: true, passive: false })
diff --git a/src/main.js b/src/main.js
index 6306fa24..940fd864 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,10 +1,52 @@
 import { mount } from 'svelte'
 import './app.css'
 import App from './App.svelte'
-import { applySettings, installZoomShortcuts, loadSettings } from '$lib/stores/settings.js'
+import { applySettings, installZoomShortcuts, loadSettings, resetWebviewZoom } from '$lib/stores/settings.js'
 
 applySettings(loadSettings())
 installZoomShortcuts()
+resetWebviewZoom()
+
+// ── Zoom watchdog ────────────────────────────────────────────────────────────
+// Final safety net against any stray webview zoom that slips past the event
+// blockers in settings.js. Two distinct symptoms, both reset to 1:
+//   • visualViewport.scale > 1  → WKWebView pinch magnification
+//   • devicePixelRatio drift    → page zoom (Tauri's set_webview_zoom polyfill);
+//                                 this is the one that made the canvas look
+//                                 blurrily magnified near resize handles.
+// The app's own zoom is CSS-based (--app-zoom) and never touches devicePixelRatio,
+// so any drift here is unwanted. After a reset we re-baseline so a genuine
+// monitor/DPI change (e.g. moving to another display) isn't fought.
+if (window.visualViewport) {
+  const vv = window.visualViewport
+  let baselineDpr = window.devicePixelRatio
+  let resetting = false
+
+  const enforceNoZoom = () => {
+    if (resetting) return
+    const scaled = vv.scale !== 1
+    const dprDrift = Math.abs(window.devicePixelRatio - baselineDpr) > 0.001
+    if (!scaled && !dprDrift) return
+    resetting = true
+    resetWebviewZoom()
+    requestAnimationFrame(() => {
+      baselineDpr = window.devicePixelRatio
+      resetting = false
+    })
+  }
+
+  vv.addEventListener('resize', enforceNoZoom)
+  window.addEventListener('resize', enforceNoZoom)
+}
+
+// Quick console probe: run `__zoomDiag()` in DevTools *while the canvas looks
+// magnified*. scale > 1 ⇒ webview pinch zoom. scale == 1 with a raised
+// devicePixelRatio ⇒ page zoom. Both are now blocked + auto-reset.
+window.__zoomDiag = () =>
+  console.log('[zoomDiag]', {
+    visualViewportScale: window.visualViewport?.scale,
+    devicePixelRatio: window.devicePixelRatio,
+  })
 
 // ── Native-app feel ────────────────────────────────────────────────────────
 // Disable browser right-click context menu everywhere.

From 711cc16b2d41f51d929c66792fa20619075c095d Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 5 Jun 2026 12:45:20 +0545
Subject: [PATCH 3/8] fix::bugfixes

---
 package-lock.json                         | 13 ++++++++-
 src/lib/components/DataTable.svelte       | 34 ++++++++++++-----------
 src/lib/components/RowExpandViewer.svelte |  2 +-
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e2ee83c2..f61ae2a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -97,6 +97,7 @@
       "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@emnapi/wasi-threads": "1.2.1",
         "tslib": "^2.4.0"
@@ -108,6 +109,7 @@
       "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -203,6 +205,7 @@
       "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.1.tgz",
       "integrity": "sha512-6IedsVWXyq4P9Tj+TxuU8WGWM70hYLl12nbYU8jkikVpa6WXapFazPUcHUMDMoWftIDE2ILDkFFte6W2nFCkRQ==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@swc/helpers": "^0.5.0"
       }
@@ -1649,6 +1652,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1828,6 +1832,7 @@
       "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.33.4.tgz",
       "integrity": "sha512-HIN5Pmd9MrX9BkV7tDwnOcEJCSFvCpc8X97h3f508J6I5FsqAY65wKOCvgH2CuP42CaahWaz4tuh32SOOIH7ww==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10"
       }
@@ -2237,6 +2242,7 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
+      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -3337,6 +3343,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3645,6 +3652,7 @@
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.55.9.tgz",
       "integrity": "sha512-fTjjT8cHLDwigcu2j3pv7Jq04LklXevPB8uBgyHNiTXv+RMNvVnrjS4UEYrLMkhuq1vpCodHjiW+z/95SDs/fg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jridgewell/remapping": "^2.3.4",
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -3734,6 +3742,7 @@
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
       "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/dcastil"
@@ -3762,7 +3771,8 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.0.tgz",
       "integrity": "sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tapable": {
       "version": "2.3.3",
@@ -3950,6 +3960,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.14.tgz",
       "integrity": "sha512-s4BJJ+5y1pYL6Otw51FHhVJQhPnuRinKig64g/1+EUNaJsd3gCKdD31IPFvswUgW9/60QT9oFHbZHbQK5imcxw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",
diff --git a/src/lib/components/DataTable.svelte b/src/lib/components/DataTable.svelte
index dd6f5968..5865a94f 100644
--- a/src/lib/components/DataTable.svelte
+++ b/src/lib/components/DataTable.svelte
@@ -257,7 +257,7 @@
   // and the level persists via app settings.
 
   // All layout constants scale with canvasZoom so the entire canvas zooms together.
-  const ROW_HEIGHT = $derived(Math.round(32 * canvasZoom))
+  const ROW_HEIGHT = $derived(Math.round(24 * canvasZoom))
 
   let _scrollTop = $state(0)
   // Start high so the first paint covers any reasonable screen height before the
@@ -265,9 +265,9 @@
   let _viewportHeight = $state(1200)
 
   // ── Canvas rendering ──────────────────────────────────────────────────────
-  const HEADER_H = $derived(Math.round(34 * canvasZoom))
-  const GUTTER_EXPAND_W = $derived(Math.round(38 * canvasZoom))
-  const GUTTER_SELECT_W = $derived(Math.round(42 * canvasZoom))
+  const HEADER_H = $derived(Math.round(30 * canvasZoom))
+  const GUTTER_EXPAND_W = $derived(Math.round(32 * canvasZoom))
+  const GUTTER_SELECT_W = $derived(Math.round(36 * canvasZoom))
   /** @type {HTMLCanvasElement | null} */
   let canvasEl = $state(null)
   /** @type {HTMLSpanElement | null} */
@@ -318,7 +318,7 @@
       const h = node.offsetHeight
       // Ignore tiny heights that just reflect the loading/toolbar-only state —
       // keep the current allocation until real content settles.
-      if (h >= 48 && expandedRowHeights.get(rowIdx) !== h) {
+      if (h >= 40 && expandedRowHeights.get(rowIdx) !== h) {
         expandedRowHeights = new Map(expandedRowHeights).set(rowIdx, h)
       }
     }
@@ -1263,9 +1263,9 @@
   // FK sub-view is a zero-cost overlay — it does NOT push rows down and is NOT
   // included in rowTops. This eliminates the fkSubviewHeight→_mergedHeights→rowTops
   // reactive chain that caused lag every time the panel opened or changed height.
-  const rowTops = $derived(computeRowTops(rows.length, expandedRows, 320, ROW_HEIGHT, expandedRowHeights))
-  /** Total scrollable content height incl. header + insert slot + body. */
-  const contentHeight = $derived(HEADER_H + insertRowOffset + (rowTops[rows.length] ?? 0))
+  const rowTops = $derived(computeRowTops(rows.length, expandedRows, 280, ROW_HEIGHT, expandedRowHeights))
+  /** Total scrollable content height incl. header + insert slot + body + 2-row bottom margin. */
+  const contentHeight = $derived(HEADER_H + insertRowOffset + (rowTops[rows.length] ?? 0) + ROW_HEIGHT * 2)
 
   /** Viewport-visible column resize handles (DOM overlay — not on the canvas). */
   const resizeHandles = $derived.by(() => {
@@ -1600,8 +1600,8 @@
       const cs = getComputedStyle(probe)
       return { px: parseFloat(cs.fontSize) || 13, family: cs.fontFamily }
     }
-    const cell = measure('font-mono text-ui-sm')
-    const type = measure('font-mono text-ui-2xs')
+    const cell = measure('font-mono text-ui-xs')
+    const type = measure('font-mono text-ui-3xs')
     probe.className = prevClass
     return {
       family: cell.family,
@@ -1834,7 +1834,7 @@
   }
 
   // ── Canvas drawing ─────────────────────────────────────────────────────────
-  const CELL_PAD_X = $derived(Math.round(12 * canvasZoom))
+  const CELL_PAD_X = $derived(Math.round(10 * canvasZoom))
   const ICON_HIT = $derived(Math.round(24 * canvasZoom))
 
   // Cached glyph advance for the active ctx.font. Every table font is monospace,
@@ -2827,10 +2827,12 @@
 
             <!-- Column resize handles: DOM overlay so header edge interaction never
                  hits the canvas (macOS trackpad pinch on canvas was page-zooming
-                 the webview and making the grid look huge/blurry). -->
+                 the webview and making the grid look huge/blurry).
+                 height:0 + overflow:visible keeps this out of flow so it does NOT
+                 push the sizer down (which would mis-align all DOM overlays). -->
             <div
               class="sticky top-0 z-[2] pointer-events-none"
-              style="height:{HEADER_H}px; width:{_viewportWidth}px"
+              style="height:0; overflow:visible; width:{_viewportWidth}px"
               aria-hidden="true"
             >
               {#each resizeHandles as h (h.name)}
@@ -2838,8 +2840,8 @@
                   role="separator"
                   aria-orientation="vertical"
                   aria-label="Resize column {h.name}"
-                  class="absolute top-0 h-full w-2.5 -translate-x-1/2 cursor-col-resize pointer-events-auto touch-none"
-                  style="left:{h.x}px"
+                  class="absolute top-0 w-2.5 -translate-x-1/2 cursor-col-resize pointer-events-auto touch-none"
+                  style="left:{h.x}px; height:{HEADER_H}px"
                   onpointerdown={(e) => onResizeHandleDown(e, h.name)}
                   onpointerenter={() => onResizeHandleEnter(h.name)}
                   onpointerleave={onResizeHandleLeave}
@@ -2980,7 +2982,7 @@
                 {#if rows[exIdx] !== undefined}
                   <div
                     class="absolute z-10"
-                    style="top:{rowDocTop(exIdx) + ROW_HEIGHT}px; left:{gutterWidth}px; width:{Math.max(geom.totalWidth - gutterWidth, _viewportWidth - gutterWidth)}px"
+                    style="top:{rowDocTop(exIdx) + ROW_HEIGHT}px; left:0; width:{_viewportWidth}px; transform:translateX({_scrollLeft}px); will-change:transform"
                     use:trackExpandHeight={exIdx}
                   >
                     <RowExpandViewer record={rowToRecord(columns, rows[exIdx])} rowLabel={"row " + (exIdx + 1)} />
diff --git a/src/lib/components/RowExpandViewer.svelte b/src/lib/components/RowExpandViewer.svelte
index 11506287..0c046315 100644
--- a/src/lib/components/RowExpandViewer.svelte
+++ b/src/lib/components/RowExpandViewer.svelte
@@ -206,7 +206,7 @@
   <div
     bind:this={rootEl}
     data-studio-selectable="text"
-    class="px-5 py-4"
+    class="px-5 py-2"
     oncontextmenu={handleContextMenu}
   >
     {#if !html}

From 74d8733d5cd8c24c3938ce1564a41798b7bdc302 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 5 Jun 2026 15:02:29 +0545
Subject: [PATCH 4/8] fix::bugfixes

---
 src/lib/components/CommandPalette.svelte      |  44 ++++++-
 src/lib/components/DataTable.svelte           | 124 ++++++++++++------
 src/lib/components/SqlConsole.svelte          |   2 +-
 src/lib/components/StudioShell.svelte         |  13 ++
 src/lib/components/TableToolbar.svelte        |  27 ++++
 .../ui/command/command-dialog.svelte          |   4 +-
 .../ui/command/command-input.svelte           |   2 +-
 7 files changed, 166 insertions(+), 50 deletions(-)

diff --git a/src/lib/components/CommandPalette.svelte b/src/lib/components/CommandPalette.svelte
index 11c6eeb6..f3b91709 100644
--- a/src/lib/components/CommandPalette.svelte
+++ b/src/lib/components/CommandPalette.svelte
@@ -134,16 +134,49 @@
   // smooth even with thousands of tables.
   let paletteSearch = $state('')
   const TABLES_PAGE_CAP = 100
+
+  /**
+   * Substring score: exact > starts-with > contains. No fuzzy scattered-char matching.
+   * @param {string} name
+   * @param {string} query
+   * @returns {number}
+   */
+  function filterScore(name, query) {
+    if (!query) return 1
+    const n = name.toLowerCase()
+    const q = query.toLowerCase()
+    if (n === q) return 1000
+    if (n.startsWith(q)) return 900
+    const sub = n.indexOf(q)
+    return sub !== -1 ? 800 - sub : 0
+  }
+
   /** @param {{ name: string }[]} list */
   function filterAndCap(list) {
     const q = paletteSearch.trim().toLowerCase()
-    const matched = q ? list.filter((t) => t.name.toLowerCase().includes(q)) : list
-    return { items: matched.slice(0, TABLES_PAGE_CAP), total: matched.length }
+    if (!q) return { items: list.slice(0, TABLES_PAGE_CAP), total: list.length }
+    const scored = list
+      .map((t) => ({ t, s: filterScore(t.name, q) }))
+      .filter((x) => x.s > 0)
+      .sort((a, b) => b.s - a.s)
+    return { items: scored.slice(0, TABLES_PAGE_CAP).map((x) => x.t), total: scored.length }
   }
-  const tablesPageRegular = $derived(filterAndCap(regularTables))
-  const tablesPageViews   = $derived(filterAndCap(viewTables))
+
+  const tablesPageRegular  = $derived(filterAndCap(regularTables))
+  const tablesPageViews    = $derived(filterAndCap(viewTables))
   const tablesPageMatViews = $derived(filterAndCap(matViewTables))
 
+  // On tables page: shouldFilter=false so bits-ui skips its sort/filter pass entirely
+  // (no CSS `order` reordering, no keyboard-nav interference). We pre-filter in JS.
+  // On root page: bits-ui filters with a plain substring check against item value strings.
+  const shouldFilter = $derived(page !== 'tables')
+
+  /** @type {(value: string, search: string) => number} */
+  const commandFilter = (value, search) => {
+    if (!search) return 1
+    return value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0
+  }
+
   /** @param {() => void} action */
   function run(action) {
     open = false
@@ -173,6 +206,8 @@
 
 <Command.Dialog
   bind:open
+  filter={commandFilter}
+  shouldFilter={shouldFilter}
   title="Command menu"
   description="Search tables, schemas, and commands"
   class="w-[min(540px,calc(100vw-2rem))] sm:max-w-none"
@@ -185,6 +220,7 @@
     <div class="flex flex-col" onkeydown={handleKeydown}>
       <Command.Input
         bind:value={paletteSearch}
+        oninput={(/** @type {Event} */ e) => { paletteSearch = /** @type {HTMLInputElement} */ (e.currentTarget).value }}
         placeholder={
           page === 'root' ? 'Search tables, schemas, commands…'
           : page === 'tables' ? 'Search tables and views…'
diff --git a/src/lib/components/DataTable.svelte b/src/lib/components/DataTable.svelte
index 5865a94f..86393259 100644
--- a/src/lib/components/DataTable.svelte
+++ b/src/lib/components/DataTable.svelte
@@ -1207,8 +1207,11 @@
   // ── Virtual relationship columns (reverse FK / one-to-many) ─────────────────
   // One per unique fromTable, max 8. Shown as badge columns to the right of real data.
   const MAX_VIRTUAL_COLS = 5
+  /** User-overridden logical width for all virtual rel columns (null = auto-computed). */
+  let virtualColWidthOverride = $state(/** @type {number | null} */ (null))
   // Width adapts to the longest label (7px/char estimate + padding), clamped 110–180px
   const VIRTUAL_COL_W = $derived.by(() => {
+    if (virtualColWidthOverride !== null) return Math.round(virtualColWidthOverride * canvasZoom)
     if (!virtualRelCols.length) return Math.round(300 * canvasZoom)
     const maxChars = Math.max(...virtualRelCols.map(v => v.label.length))
     const base = Math.min(380, Math.max(300, maxChars * 10 + 60))
@@ -1221,7 +1224,9 @@
     for (const fk of incomingForeignKeys) {
       if (seen.has(fk.fromTable)) continue
       seen.add(fk.fromTable)
-      result.push({ ...fk, label: (fk.fromSchema && fk.fromSchema !== schema) ? `${fk.fromSchema}.${fk.fromTable}` : fk.fromTable })
+      const label = (fk.fromSchema && fk.fromSchema !== schema) ? `${fk.fromSchema}.${fk.fromTable}` : fk.fromTable
+      if (hiddenColumns.has(`__vrel:${label}`)) continue
+      result.push({ ...fk, label })
       if (result.length >= MAX_VIRTUAL_COLS) break
     }
     return result
@@ -1276,6 +1281,12 @@
       if (x < gutterWidth - 6 || x > _viewportWidth + 6) continue
       out.push({ name: col.name, x })
     }
+    // Virtual rel column resize handles (right edge of each virtual col)
+    for (let vi = 0; vi < virtualRelCols.length; vi++) {
+      const x = geom.totalWidth + (vi + 1) * VIRTUAL_COL_W - _scrollLeft
+      if (x < gutterWidth - 6 || x > _viewportWidth + 6) continue
+      out.push({ name: `__vrel__${vi}`, x })
+    }
     return out
   })
 
@@ -1407,7 +1418,11 @@
     resizingColName = colName;
     _zoomGuard.resizing = true
     _zoomGuard.block = true
-    resizeStartWidth = columnWidths[colName] ?? defaultColumnWidth("");
+    if (colName.startsWith('__vrel__')) {
+      resizeStartWidth = virtualColWidthOverride ?? Math.round(VIRTUAL_COL_W / canvasZoom)
+    } else {
+      resizeStartWidth = columnWidths[colName] ?? defaultColumnWidth("")
+    }
   }
 
   // Batch column resize updates to animation frames — pointermove can fire at
@@ -1424,7 +1439,11 @@
     _resizeRafId = requestAnimationFrame(() => {
       _resizeRafId = 0;
       if (!resizingColName) return;
-      columnWidths = { ...columnWidths, [resizingColName]: _pendingResizeWidth };
+      if (resizingColName.startsWith('__vrel__')) {
+        virtualColWidthOverride = _pendingResizeWidth;
+      } else {
+        columnWidths = { ...columnWidths, [resizingColName]: _pendingResizeWidth };
+      }
     });
   }
 
@@ -1433,10 +1452,14 @@
       cancelAnimationFrame(_resizeRafId);
       _resizeRafId = 0;
       if (resizingColName) {
-        columnWidths = { ...columnWidths, [resizingColName]: _pendingResizeWidth };
+        if (resizingColName.startsWith('__vrel__')) {
+          virtualColWidthOverride = _pendingResizeWidth;
+        } else {
+          columnWidths = { ...columnWidths, [resizingColName]: _pendingResizeWidth };
+        }
       }
     }
-    if (resizingColName) {
+    if (resizingColName && !resizingColName.startsWith('__vrel__')) {
       if (columnWidthsKey) saveColumnWidths(columnWidthsKey, columnWidths);
     }
     resizingColName = null;
@@ -2014,32 +2037,34 @@
       const isVHov = hoveredRow === idx && hoveredColName === `__vrel__${vi}`
       if (!_fonts) return
 
-      // Badge font: 1px smaller than cell text for a compact chip feel
+      // Badge: compact tag style — no border at rest, border on hover/active
       const badgeFontPx = Math.max(10, _fonts.cellPx - 1)
-      const bPadX = 9
-      const bH = Math.round(badgeFontPx * 1.65)
-      const bR = bH / 2
+      const bPadX = 8
+      const bH = Math.round(badgeFontPx * 1.55)
+      const bR = 3
       ctx.font = `500 ${badgeFontPx}px ${_fonts.family}`
 
-      const maxLabelW = VIRTUAL_COL_W - 28
+      const maxLabelW = VIRTUAL_COL_W - 24
       const labelTxt = truncText(ctx, vc.label, maxLabelW)
       const textW = textWidth(ctx, labelTxt)
-      const bW = textW + bPadX * 2
+      const bW = Math.min(textW + bPadX * 2, VIRTUAL_COL_W - 16)
       const bX = cellX + (VIRTUAL_COL_W - bW) / 2
       const bY = ry + (rh - bH) / 2
 
-      if (isActive) { ctx.fillStyle = withAlpha(c.cPrimary, 0.06); ctx.fillRect(cellX, ry, VIRTUAL_COL_W, rh) }
+      if (isActive) { ctx.fillStyle = withAlpha(c.cPrimary, 0.05); ctx.fillRect(cellX, ry, VIRTUAL_COL_W, rh) }
 
       ctx.fillStyle = isActive
-        ? withAlpha(c.cPrimary, 0.14)
-        : isVHov ? withAlpha(c.cMutedBg, 0.5) : withAlpha(c.cMutedBg, 0.28)
+        ? withAlpha(c.cPrimary, 0.15)
+        : isVHov ? withAlpha(c.cMutedBg, 0.55) : withAlpha(c.cMutedBg, 0.2)
       roundRect(ctx, bX, bY, bW, bH, bR); ctx.fill()
 
-      ctx.strokeStyle = isActive ? withAlpha(c.cPrimary, 0.5) : withAlpha(c.cMuted, 0.3)
-      ctx.lineWidth = 1
-      roundRect(ctx, bX + 0.5, bY + 0.5, bW - 1, bH - 1, bR); ctx.stroke()
+      if (isActive || isVHov) {
+        ctx.strokeStyle = isActive ? withAlpha(c.cPrimary, 0.45) : withAlpha(c.cMuted, 0.22)
+        ctx.lineWidth = 1
+        roundRect(ctx, bX + 0.5, bY + 0.5, bW - 1, bH - 1, bR); ctx.stroke()
+      }
 
-      ctx.fillStyle = isActive ? c.cPrimary : withAlpha(c.cFg, 0.7)
+      ctx.fillStyle = isActive ? c.cPrimary : withAlpha(c.cFg, 0.6)
       ctx.textBaseline = 'middle'; ctx.textAlign = 'center'
       ctx.fillText(labelTxt, bX + bW / 2, ry + rh / 2 + 0.5)
     }
@@ -2264,10 +2289,12 @@
     // Virtual relationship column headers
     for (let vi = 0; vi < virtualRelCols.length; vi++) {
       const vc = virtualRelCols[vi]
+      const vrelKey = `__vrel__${vi}`
       const x = geom.totalWidth + vi * VIRTUAL_COL_W - _scrollLeft
       if (x + VIRTUAL_COL_W <= 0 || x >= c.W) continue
+      ctx.fillStyle = withAlpha(c.cMutedBg, resizingColName === vrelKey ? 0.25 : 0.1)
+      ctx.fillRect(x, 0, VIRTUAL_COL_W, HEADER_H)
       if (vi === 0) {
-        ctx.fillStyle = withAlpha(c.cMutedBg, 0.1); ctx.fillRect(x, 0, VIRTUAL_COL_W, HEADER_H)
         ctx.strokeStyle = withAlpha(c.cPrimary, 0.25); ctx.lineWidth = 2
         ctx.beginPath(); ctx.moveTo(x + 1, 4); ctx.lineTo(x + 1, HEADER_H - 4); ctx.stroke()
       }
@@ -2276,8 +2303,13 @@
       if (!_fonts) continue
       ctx.font = _fonts.header; ctx.fillStyle = withAlpha(c.cMuted, 0.6)
       ctx.textAlign = 'left'; ctx.textBaseline = 'middle'
-      // Use smaller side padding (8px) so long names fit more fully
       ctx.fillText(truncText(ctx, vc.label, VIRTUAL_COL_W - 16), x + 8, HEADER_H / 2 + 0.5)
+      // Resize edge affordance (matches regular column behaviour)
+      if (_resizeHoverCol === vrelKey || resizingColName === vrelKey) {
+        ctx.strokeStyle = withAlpha(c.cPrimary, 0.7)
+        ctx.lineWidth = 2
+        ctx.beginPath(); ctx.moveTo(x + VIRTUAL_COL_W - 1, 5); ctx.lineTo(x + VIRTUAL_COL_W - 1, HEADER_H - 5); ctx.stroke()
+      }
     }
 
     // Header bottom border.
@@ -2806,25 +2838,24 @@
             style="position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;pointer-events:none"
           ></span>
 
-          {#if visibleColumns.length > 0}
-            <!-- Canvas layer: a 0-height sticky wrapper placed BEFORE the sizer
-                 so its natural flow position is the top-left; sticky then pins
-                 the viewport-sized canvas there while the sizer below provides
-                 the scroll range. The canvas overflows the 0-height box. -->
-            <div style="position:sticky;top:0;left:0;width:0;height:0;z-index:1;overflow:visible">
-              <canvas
-                bind:this={canvasEl}
-                class="block"
-                style="cursor:default"
-                onclick={onCanvasClick}
-                ondblclick={onCanvasDblClick}
-                onauxclick={onCanvasAuxClick}
-                onpointerdown={onCanvasPointerDown}
-                onpointermove={onCanvasPointerMove}
-                onpointerleave={onCanvasPointerLeave}
-              ></canvas>
-            </div>
+          <!-- Canvas: always mounted so the 2D context survives table navigation
+               (each mount creates a new GPU-tracked context; keeping it alive
+               across table switches eliminates the accumulation shown in DevTools). -->
+          <div style="position:sticky;top:0;left:0;width:0;height:0;z-index:1;overflow:visible">
+            <canvas
+              bind:this={canvasEl}
+              class="block"
+              style="cursor:default"
+              onclick={onCanvasClick}
+              ondblclick={onCanvasDblClick}
+              onauxclick={onCanvasAuxClick}
+              onpointerdown={onCanvasPointerDown}
+              onpointermove={onCanvasPointerMove}
+              onpointerleave={onCanvasPointerLeave}
+            ></canvas>
+          </div>
 
+          {#if visibleColumns.length > 0}
             <!-- Column resize handles: DOM overlay so header edge interaction never
                  hits the canvas (macOS trackpad pinch on canvas was page-zooming
                  the webview and making the grid look huge/blurry).
@@ -2839,7 +2870,7 @@
                 <div
                   role="separator"
                   aria-orientation="vertical"
-                  aria-label="Resize column {h.name}"
+                  aria-label="Resize {h.name.startsWith('__vrel__') ? 'relationship column' : `column ${h.name}`}"
                   class="absolute top-0 w-2.5 -translate-x-1/2 cursor-col-resize pointer-events-auto touch-none"
                   style="left:{h.x}px; height:{HEADER_H}px"
                   onpointerdown={(e) => onResizeHandleDown(e, h.name)}
@@ -2991,13 +3022,19 @@
               {/each}
 
               <!-- FK sub-view panel — spans full viewport width (including gutter area).
-                   Only horizontal wheel events are stopped so the main table can still
-                   scroll vertically when the pointer is over the sub-view. -->
+                   Outer div is absolute for vertical position; left:0/right:0 gives it
+                   the full scrollable width so the inner sticky child has room to stick.
+                   Inner div uses position:sticky;left:0 to stay at the viewport left
+                   edge on horizontal scroll — no transform or will-change needed,
+                   which avoids the forced compositing layer that caused scroll lag. -->
               {#if fkSubview !== null && rows[fkSubview.rowIdx] !== undefined}
                 {@const fkIdx = fkSubview.rowIdx}
                 <div
-                  class="absolute z-20"
-                  style="top:{rowDocTop(fkIdx) + ROW_HEIGHT}px; left:0; width:{_viewportWidth}px; transform:translateX({_scrollLeft}px); will-change:transform"
+                  class="absolute z-20 left-0 right-0"
+                  style="top:{rowDocTop(fkIdx) + ROW_HEIGHT}px"
+                >
+                <div
+                  style="position:sticky; left:0; width:{_viewportWidth}px"
                   onwheel={(e) => { if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) e.stopPropagation() }}
                 >
                   <FkSubviewPanel
@@ -3017,6 +3054,7 @@
                     }}
                   />
                 </div>
+                </div>
               {/if}
 
               <!-- Active inline cell editor -->
diff --git a/src/lib/components/SqlConsole.svelte b/src/lib/components/SqlConsole.svelte
index d51a2326..1a036d39 100644
--- a/src/lib/components/SqlConsole.svelte
+++ b/src/lib/components/SqlConsole.svelte
@@ -603,7 +603,7 @@
       class="absolute inset-0"
       {schemaHints}
       {onmodk}
-      onmodenter={onmodenter ?? handleRun}
+      onmodenter={handleRun}
       onmodr={handleRun}
       onmods={openSaveDialog}
       {onmodi}
diff --git a/src/lib/components/StudioShell.svelte b/src/lib/components/StudioShell.svelte
index 637577b3..4e9dadf2 100644
--- a/src/lib/components/StudioShell.svelte
+++ b/src/lib/components/StudioShell.svelte
@@ -333,6 +333,18 @@
   const incomingForeignKeys = $derived(
     (activeSchema && activeTable) ? (incomingFkCache.get(`${activeSchema}.${activeTable}`) ?? []) : []
   )
+  /** Virtual rel column labels for the toolbar columns dropdown. Mirrors DataTable's virtualRelCols. */
+  const virtualRelColumnsForToolbar = $derived.by(() => {
+    const seen = new Set()
+    const result = []
+    for (const fk of incomingForeignKeys) {
+      if (seen.has(fk.fromTable)) continue
+      seen.add(fk.fromTable)
+      result.push({ label: (fk.fromSchema && fk.fromSchema !== activeSchema) ? `${fk.fromSchema}.${fk.fromTable}` : fk.fromTable })
+      if (result.length >= 5) break
+    }
+    return result
+  })
   let rows = $state([])
   let savingCell = $state(false)
   let deletingRows = $state(false)
@@ -3155,6 +3167,7 @@
             onaddrow={() => dtBeginInsertRow?.()}
             readonly={tableReadonly}
             {hiddenColumns}
+            virtualRelColumns={virtualRelColumnsForToolbar}
             onhiddencolumnschange={(next) => {
               hiddenColumns = next
               if (activeTable) saveHiddenCols(persistConnectionId, activeSchema, activeTable, next)
diff --git a/src/lib/components/TableToolbar.svelte b/src/lib/components/TableToolbar.svelte
index 7d86a65e..90636490 100644
--- a/src/lib/components/TableToolbar.svelte
+++ b/src/lib/components/TableToolbar.svelte
@@ -15,6 +15,7 @@
   import Columns3 from "@lucide/svelte/icons/columns-3";
   import Eye from "@lucide/svelte/icons/eye";
   import EyeOff from "@lucide/svelte/icons/eye-off";
+  import Link2 from "@lucide/svelte/icons/link-2";
   import Search from "@lucide/svelte/icons/search";
   import X from "@lucide/svelte/icons/x";
   import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
@@ -71,6 +72,8 @@
     hiddenColumns = new Set(),
     /** @type {(next: Set<string>) => void} */
     onhiddencolumnschange = () => {},
+    /** Virtual FK relationship columns (reverse FK badge cols) to show in the hide/show dropdown. */
+    virtualRelColumns = /** @type {Array<{ label: string }>} */ ([]),
     filterBarOpen = $bindable(false),
     /** @type {'data' | 'structure'} */
     tableViewMode = $bindable("data"),
@@ -551,6 +554,30 @@
                   >
                 </button>
               {/each}
+              {#if virtualRelColumns.length > 0}
+                <div class="my-0.5 h-px bg-border/30"></div>
+                {#each virtualRelColumns as vc (vc.label)}
+                  {@const vcKey = `__vrel:${vc.label}`}
+                  {@const hidden = hiddenColumns.has(vcKey)}
+                  <button
+                    type="button"
+                    class="flex w-full items-center gap-1.5 rounded-[2px] px-1.5 py-1 text-left text-ui-xs hover:bg-accent hover:text-foreground"
+                    onclick={() => {
+                      const next = new Set(hiddenColumns);
+                      if (next.has(vcKey)) next.delete(vcKey); else next.add(vcKey);
+                      onhiddencolumnschange(next);
+                    }}
+                  >
+                    {#if hidden}
+                      <EyeOff class="size-3 shrink-0 text-muted-foreground" />
+                    {:else}
+                      <Link2 class="size-3 shrink-0 text-primary/60" />
+                    {/if}
+                    <span class={cn("truncate", hidden && "text-muted-foreground")}>{vc.label}</span>
+                    <span class="ml-auto shrink-0 text-ui-2xs text-muted-foreground/35">rel</span>
+                  </button>
+                {/each}
+              {/if}
             </div>
           </DropdownMenu.Content>
         </DropdownMenu.Root>
diff --git a/src/lib/components/ui/command/command-dialog.svelte b/src/lib/components/ui/command/command-dialog.svelte
index 9ac5a78b..c8106164 100644
--- a/src/lib/components/ui/command/command-dialog.svelte
+++ b/src/lib/components/ui/command/command-dialog.svelte
@@ -12,6 +12,8 @@
 		showCloseButton = false,
 		portalProps,
 		children,
+		filter = undefined,
+		shouldFilter = undefined,
 		class: className,
 		...restProps
 	} = $props();
@@ -30,6 +32,6 @@
 		{showCloseButton}
 		{portalProps}
 	>
-		<Command {...restProps} bind:value bind:ref {children} />
+		<Command filter={filter} shouldFilter={shouldFilter} {...restProps} bind:value bind:ref {children} />
 	</Dialog.Content>
 </Dialog.Root>
diff --git a/src/lib/components/ui/command/command-input.svelte b/src/lib/components/ui/command/command-input.svelte
index 5c48e185..07c3e522 100644
--- a/src/lib/components/ui/command/command-input.svelte
+++ b/src/lib/components/ui/command/command-input.svelte
@@ -15,7 +15,7 @@
 <div data-slot="command-input-wrapper" class="flex items-center gap-3 border-b border-border/25 px-4 py-3">
 	<SearchIcon class="size-[15px] shrink-0 text-muted-foreground/35" />
 	<CommandPrimitive.Input
-		{value}
+		bind:value
 		data-slot="command-input"
 		class={cn("", className)}
 		{...restProps}

From 3a49dc36aaae1c7403e20a8e524533420ba32ecc Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 5 Jun 2026 16:09:09 +0545
Subject: [PATCH 5/8] refactor: rename project from DB Studio to Stroke across
 all files

---
 CHANGELOG.md                               |   2 +-
 CLAUDE.md                                  |   4 +-
 package-lock.json                          |   4 +-
 package.json                               |   2 +-
 src-tauri/src/cloudflare.rs                |  14 +-
 src-tauri/src/copilot.rs                   |   4 +-
 src-tauri/src/db/backup.rs                 |   2 +-
 src-tauri/src/db/connection.rs             |   5 +-
 src-tauri/src/docker.rs                    |   2 +-
 src-tauri/src/lib.rs                       |   6 +-
 src-tauri/src/license.rs                   |   2 +-
 src-tauri/src/mcp/server.rs                |   6 +-
 src-tauri/src/mcp/tools.rs                 |   8 +-
 src-tauri/src/metrics.rs                   |   4 +-
 src-tauri/tauri.conf.json                  |   4 +-
 src/lib/ai.js                              |   6 +-
 src/lib/cloudflare.js                      |   2 +-
 src/lib/components/AboutDialog.svelte      |   4 +-
 src/lib/components/AiChat.svelte           |   2 +-
 src/lib/components/AiSidebar.svelte        |   4 +-
 src/lib/components/CloudflareLogin.svelte  |   4 +-
 src/lib/components/CommandPalette.svelte   |   2 +-
 src/lib/components/ConnectionModal.svelte  |  59 +--
 src/lib/components/DataTable.svelte        |   2 +-
 src/lib/components/JsonCellLightbox.svelte |   4 +-
 src/lib/components/JsonViewer.svelte       |   4 +-
 src/lib/components/JsonViewerPage.svelte   |   4 +-
 src/lib/components/LicenseGate.svelte      |   2 +-
 src/lib/components/McpPanel.svelte         |  12 +-
 src/lib/components/Onboarding.svelte       |   8 +-
 src/lib/components/OrmRunner.svelte        |   4 +-
 src/lib/components/ReleaseNotesPage.svelte | 210 +++++++++++
 src/lib/components/SecuritySqlModal.svelte |   4 +-
 src/lib/components/SettingsDialog.svelte   |   2 +-
 src/lib/components/Sidebar.svelte          |   6 +-
 src/lib/components/SqlEditor.svelte        |   6 +-
 src/lib/components/StudioShell.svelte      |  16 +-
 src/lib/components/UpdateDialog.svelte     | 394 ++++++++++-----------
 src/lib/components/ui/sonner/sonner.css    |  69 ++++
 src/lib/components/ui/sonner/sonner.svelte |  73 +---
 src/lib/monaco-themes.js                   |   2 +-
 src/lib/stores/ai-chat-params.js           |   2 +-
 src/lib/stores/ai-settings.js              |   6 +-
 src/lib/stores/ai-skills.js                |   2 +-
 src/lib/stores/canvas-zoom.svelte.js       |   2 +-
 src/lib/stores/connections.js              |   4 +-
 src/lib/stores/dashboards.js               |   8 +-
 src/lib/stores/layout.js                   |   2 +-
 src/lib/stores/recent-tabs.js              |   2 +-
 src/lib/stores/saved-charts.js             |   6 +-
 src/lib/stores/saved-diagrams.js           |   2 +-
 src/lib/stores/settings.js                 |   8 +-
 src/lib/stores/studio-db.js                |   2 +-
 src/lib/stores/table-column-widths.js      |   2 +-
 src/lib/themes/registry.js                 |   2 +-
 55 files changed, 606 insertions(+), 418 deletions(-)
 create mode 100644 src/lib/components/ReleaseNotesPage.svelte
 create mode 100644 src/lib/components/ui/sonner/sonner.css

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a30233ea..5bceb070 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Changelog
 
-All notable changes to DB Studio are listed here, newest first.
+All notable changes to Stroke are listed here, newest first.
 
 ---
 
diff --git a/CLAUDE.md b/CLAUDE.md
index 79e58c29..7760f991 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,11 +1,11 @@
-# CLAUDE.md - DB Studio Project Guide
+# CLAUDE.md - Stroke Project Guide
 
 This file is the source of truth for AI agents working in this repository.
 Use it to keep changes consistent with the current architecture and UI patterns.
 
 ## 1) Project snapshot
 
-DB Studio is a Tauri desktop app for database work:
+Stroke is a Tauri desktop app for database work:
 
 - connect to PostgreSQL, SQLite, Cloudflare D1, and MySQL flows in UI
 - browse schemas/tables and row counts
diff --git a/package-lock.json b/package-lock.json
index f61ae2a0..718dc451 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "db-studio",
+  "name": "stroke",
   "version": "0.3.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "db-studio",
+      "name": "stroke",
       "version": "0.3.3",
       "dependencies": {
         "@dagrejs/dagre": "^3.0.0",
diff --git a/package.json b/package.json
index 49289cdb..02f3714d 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "db-studio",
+  "name": "stroke",
   "private": true,
   "version": "0.3.3",
   "type": "module",
diff --git a/src-tauri/src/cloudflare.rs b/src-tauri/src/cloudflare.rs
index d9749f5a..c4dfb47f 100644
--- a/src-tauri/src/cloudflare.rs
+++ b/src-tauri/src/cloudflare.rs
@@ -1,5 +1,5 @@
 /*!
- * Cloudflare OAuth 2.0 + PKCE flow for DB Studio.
+ * Cloudflare OAuth 2.0 + PKCE flow for Stroke.
  *
  * Uses the same public client_id as the Wrangler CLI — Cloudflare's official
  * developer tool — which accepts localhost redirect URIs for desktop apps.
@@ -49,7 +49,7 @@ static CF_CLIENT: OnceLock<reqwest::Client> = OnceLock::new();
 fn http() -> &'static reqwest::Client {
     CF_CLIENT.get_or_init(|| {
         reqwest::Client::builder()
-            .user_agent("db-studio/1.0")
+            .user_agent("stroke/1.0")
             .tcp_keepalive(std::time::Duration::from_secs(60))
             .pool_max_idle_per_host(4)
             .build()
@@ -108,7 +108,7 @@ async fn bind_callback_listener() -> Result<(TcpListener, String), String> {
     }
     Err(format!(
         "Could not bind to any of the pre-registered callback ports ({}-{}). \
-         Close other Wrangler or DB Studio processes and try again.",
+         Close other Wrangler or Stroke processes and try again.",
         CF_CALLBACK_PORTS[0],
         CF_CALLBACK_PORTS[CF_CALLBACK_PORTS.len() - 1]
     ))
@@ -121,24 +121,24 @@ async fn await_oauth_callback(
 ) -> Result<String, String> {
     let success_html = r#"<!DOCTYPE html>
 <html lang="en">
-<head><meta charset="UTF-8"><title>DB Studio — authorized</title>
+<head><meta charset="UTF-8"><title>Stroke — authorized</title>
 <style>body{font-family:system-ui,sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0;background:#0d0d0d;color:#eee}
 .card{text-align:center;padding:48px;border-radius:16px;border:1px solid #333;background:#111}
 h2{color:#22c55e;margin-bottom:12px}p{color:#888;margin:0}</style></head>
 <body><div class="card">
 <h2>Authorization successful</h2>
-<p>You can close this tab and return to DB Studio.</p>
+<p>You can close this tab and return to Stroke.</p>
 </div></body></html>"#;
 
     let error_html = r#"<!DOCTYPE html>
 <html lang="en">
-<head><meta charset="UTF-8"><title>DB Studio — error</title>
+<head><meta charset="UTF-8"><title>Stroke — error</title>
 <style>body{font-family:system-ui,sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0;background:#0d0d0d;color:#eee}
 .card{text-align:center;padding:48px;border-radius:16px;border:1px solid #4b1c1c;background:#1a0f0f}
 h2{color:#ef4444;margin-bottom:12px}p{color:#888;margin:0}</style></head>
 <body><div class="card">
 <h2>Authorization failed</h2>
-<p>You can close this tab and try again in DB Studio.</p>
+<p>You can close this tab and try again in Stroke.</p>
 </div></body></html>"#;
 
     let send_html = |html: &str| -> String {
diff --git a/src-tauri/src/copilot.rs b/src-tauri/src/copilot.rs
index fdd10edb..bc0acfe3 100644
--- a/src-tauri/src/copilot.rs
+++ b/src-tauri/src/copilot.rs
@@ -13,7 +13,7 @@ static COPILOT_CLIENT: OnceLock<reqwest::Client> = OnceLock::new();
 fn http_client() -> &'static reqwest::Client {
     COPILOT_CLIENT.get_or_init(|| {
         reqwest::Client::builder()
-            .user_agent("db-studio/1.0")
+            .user_agent("stroke/1.0")
             .tcp_keepalive(std::time::Duration::from_secs(60))
             .pool_max_idle_per_host(4)
             .build()
@@ -147,7 +147,7 @@ pub async fn copilot_get_copilot_token(oauth_token: String) -> Result<CopilotTok
         .get("https://api.github.com/copilot_internal/v2/token")
         .header("Authorization", format!("Bearer {}", oauth_token))
         .header("Accept", "application/json")
-        .header("User-Agent", "db-studio/1.0")
+        .header("User-Agent", "stroke/1.0")
         .send()
         .await
         .map_err(|e| format!("Network error: {e}"))?;
diff --git a/src-tauri/src/db/backup.rs b/src-tauri/src/db/backup.rs
index fddf8283..7dd8c641 100644
--- a/src-tauri/src/db/backup.rs
+++ b/src-tauri/src/db/backup.rs
@@ -116,7 +116,7 @@ pub async fn backup_import(
 fn backup_header(engine: &str, schema: Option<&str>) -> String {
     let schema_line = schema.map_or_else(String::new, |s| format!("-- Schema   : {s}\n"));
     format!(
-        "-- DB Studio Backup\n-- Engine   : {engine}\n{schema_line}-- Restore  : execute this file against a {engine} database\n\n"
+        "-- Stroke Backup\n-- Engine   : {engine}\n{schema_line}-- Restore  : execute this file against a {engine} database\n\n"
     )
 }
 
diff --git a/src-tauri/src/db/connection.rs b/src-tauri/src/db/connection.rs
index 6c2d1ef0..d3ee7202 100644
--- a/src-tauri/src/db/connection.rs
+++ b/src-tauri/src/db/connection.rs
@@ -200,10 +200,11 @@ async fn open_pg(config: &PgConfig) -> Result<PgPool, String> {
         // halving this cuts FD and memory hold-time without affecting responsiveness.
         .idle_timeout(std::time::Duration::from_secs(30))
         .max_lifetime(std::time::Duration::from_secs(300))
-        // Kill runaway queries automatically so they don't pin connections forever.
+        // Kill truly runaway queries. 10 min covers bulk inserts / migrations while
+        // still bounding accidental full-table scans that would pin a connection.
         .after_connect(|conn, _meta| {
             Box::pin(async move {
-                sqlx::query("SET statement_timeout = '30s'")
+                sqlx::query("SET statement_timeout = '10min'")
                     .execute(&mut *conn)
                     .await?;
                 Ok(())
diff --git a/src-tauri/src/docker.rs b/src-tauri/src/docker.rs
index 577e0404..0cefe778 100644
--- a/src-tauri/src/docker.rs
+++ b/src-tauri/src/docker.rs
@@ -129,7 +129,7 @@ pub async fn docker_run_db(
         .duration_since(std::time::UNIX_EPOCH)
         .unwrap_or_default()
         .as_secs();
-    let container_name = format!("db-studio-{db_type}-{ts}");
+    let container_name = format!("stroke-{db_type}-{ts}");
     let port_map = format!("{host_port}:{cont_port}");
 
     // ── Pull ──────────────────────────────────────────────────────────────────
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index f81e9e8a..3ba21585 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -30,9 +30,9 @@ pub fn run() {
         // setups (2× displays) and can cause rendering panics on Wayland compositors.
     }
 
-    // Set a human-readable process title so the app shows as "db-studio" in
+    // Set a human-readable process title so the app shows as "stroke" in
     // htop / ps / /proc — makes it easy to identify among WebKit helper processes.
-    let _ = metrics::set_process_title("db-studio".into());
+    let _ = metrics::set_process_title("stroke".into());
     // Create the shared connection Arc — both DbState and McpState point to the same lock.
     let db_conn: Arc<Mutex<Option<ActiveConnection>>> = Arc::new(Mutex::new(None));
     let db_state = DbState { conn: Arc::clone(&db_conn) };
@@ -53,7 +53,7 @@ pub fn run() {
                 "main",
                 tauri::WebviewUrl::App("/".into()),
             )
-            .title("DB Studio")
+            .title("Stroke")
             .inner_size(1280.0, 800.0)
             .min_inner_size(960.0, 600.0)
             .resizable(true)
diff --git a/src-tauri/src/license.rs b/src-tauri/src/license.rs
index ef31cd5f..aeef2361 100644
--- a/src-tauri/src/license.rs
+++ b/src-tauri/src/license.rs
@@ -39,7 +39,7 @@ const TRIAL_FILE: &str = ".trial";
 // Note: revocation only takes effect after the user installs the update.
 // For immediate remote revocation you'll need the server endpoint (coming later).
 const REVOKED_KEY_HASHES: &[&str] = &[
-    // "aabbcc..." — example: paste hash here, one per line
+    "ed13c9edc3bea01c6f82a415a10b21f85b85f829004f473cb78e8cd10056059f", // nischal.dahal@aitc.ai pro (revoked 2026-06-05)
 ];
 
 // ── Data types ────────────────────────────────────────────────────────────────
diff --git a/src-tauri/src/mcp/server.rs b/src-tauri/src/mcp/server.rs
index 0d2a39d4..d6d2ee94 100644
--- a/src-tauri/src/mcp/server.rs
+++ b/src-tauri/src/mcp/server.rs
@@ -153,7 +153,7 @@ async fn dispatch(
         "initialize" => Ok(json!({
             "protocolVersion": "2024-11-05",
             "capabilities": { "tools": {} },
-            "serverInfo": { "name": "DB Studio", "version": env!("CARGO_PKG_VERSION") }
+            "serverInfo": { "name": "Stroke", "version": env!("CARGO_PKG_VERSION") }
         })),
 
         "ping" => Ok(json!({})),
@@ -180,7 +180,7 @@ async fn dispatch(
                 if !tools::is_read_only_sql(sql) {
                     return Err(
                         "Read-only mode is enabled. Only SELECT queries are permitted. \
-                         Disable read-only mode in DB Studio's MCP settings to run write operations."
+                         Disable read-only mode in Stroke's MCP settings to run write operations."
                             .to_string(),
                     );
                 }
@@ -191,7 +191,7 @@ async fn dispatch(
                 .lock()
                 .map_err(|e| e.to_string())?
                 .clone()
-                .ok_or("Not connected to a database. Call list_databases to see available connections and ask the user to select one in DB Studio.")?;
+                .ok_or("Not connected to a database. Call list_databases to see available connections and ask the user to select one in Stroke.")?;
             let text = tools::call_tool(&conn, name, &args).await?;
             Ok(json!({ "content": [{ "type": "text", "text": text }] }))
         }
diff --git a/src-tauri/src/mcp/tools.rs b/src-tauri/src/mcp/tools.rs
index febbbc96..8f0deb4d 100644
--- a/src-tauri/src/mcp/tools.rs
+++ b/src-tauri/src/mcp/tools.rs
@@ -10,7 +10,7 @@ pub fn tool_list() -> Value {
     json!([
         {
             "name": "list_databases",
-            "description": "List all saved database connections and show which one is currently active. Call this at the start of a session when the user hasn't specified a database, or when you need to know what databases are available. If multiple databases exist, ask the user which one to use and instruct them to switch in DB Studio.",
+            "description": "List all saved database connections and show which one is currently active. Call this at the start of a session when the user hasn't specified a database, or when you need to know what databases are available. If multiple databases exist, ask the user which one to use and instruct them to switch in Stroke.",
             "inputSchema": {
                 "type": "object",
                 "properties": {}
@@ -131,9 +131,9 @@ pub fn call_meta_tool(
                 "active_id": active_id,
                 "active_name": active_name,
                 "note": if connections.len() > 1 {
-                    "Multiple databases available. To switch, open DB Studio and connect to the desired database. Then retry your request."
+                    "Multiple databases available. To switch, open Stroke and connect to the desired database. Then retry your request."
                 } else if connections.is_empty() {
-                    "No saved connections found. Open DB Studio and add a connection first."
+                    "No saved connections found. Open Stroke and add a connection first."
                 } else {
                     "One database configured."
                 }
@@ -157,7 +157,7 @@ pub fn call_meta_tool(
                 }
                 None => Ok(json!({
                     "connected": false,
-                    "note": "No database is currently connected. Open DB Studio and connect to a database, then retry."
+                    "note": "No database is currently connected. Open Stroke and connect to a database, then retry."
                 }).to_string()),
             }
         }
diff --git a/src-tauri/src/metrics.rs b/src-tauri/src/metrics.rs
index b0a3c1b1..05ce7100 100644
--- a/src-tauri/src/metrics.rs
+++ b/src-tauri/src/metrics.rs
@@ -1,5 +1,5 @@
 /*!
-Process naming and runtime metrics for DB Studio.
+Process naming and runtime metrics for Stroke.
 
 Exposes two Tauri commands:
   - `set_process_title`  — renames the process so it shows up as a recognisable
@@ -32,7 +32,7 @@ fn sys() -> &'static Mutex<System> {
 #[derive(Debug, Serialize, Clone)]
 #[serde(rename_all = "camelCase")]
 pub struct AppMetrics {
-    /// OS process ID of this DB Studio process.
+    /// OS process ID of this Stroke process.
     pub pid: u32,
     /// Resident Set Size in bytes — actual physical RAM in use.
     pub rss_bytes: u64,
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index b247af33..5dd65d8d 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,8 +1,8 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
-  "productName": "db-studio",
+  "productName": "Stroke",
   "version": "0.3.3",
-  "identifier": "com.broisnischal.studio",
+  "identifier": "com.broisnischal.stroke",
   "build": {
     "frontendDist": "../dist",
     "devUrl": "http://localhost:8080",
diff --git a/src/lib/ai.js b/src/lib/ai.js
index 06badb7b..cad7b26f 100644
--- a/src/lib/ai.js
+++ b/src/lib/ai.js
@@ -910,7 +910,7 @@ Only use mermaid code blocks inside explanatory prose (e.g. "here's the syntax:
 - 2–5 words, title-case, descriptive. Examples: "User Order Flow", "E-Commerce ERD", "Auth Sequence", "Order State Machine", "Product Hierarchy"
 - Reflect the subject, not the diagram type ("Users & Orders" not "ER Diagram")
 
-Always output diagrams in a \`\`\`mermaid code block — they render interactively in DB Studio.
+Always output diagrams in a \`\`\`mermaid code block — they render interactively in Stroke.
 
 ### Entity-Relationship Diagrams (ERD)
 \`\`\`mermaid
@@ -1352,7 +1352,7 @@ SELECT * FROM information_schema.COLUMNS WHERE TABLE_SCHEMA = DATABASE() ORDER B
       (ctx.userSkills ?? []).map((s) => `### ${s.name}\n${s.content}`).join('\n\n')
     : ''
 
-  return `You are an expert ${DB_LABEL[dbType] ?? 'SQL'} database assistant embedded in DB Studio — a database GUI.
+  return `You are an expert ${DB_LABEL[dbType] ?? 'SQL'} database assistant embedded in Stroke — a database GUI.
 Your job: help users explore, query, analyse, and visualise their database through tool calls and clear explanations.
 
 === DATABASE ===
@@ -1380,7 +1380,7 @@ ${otherTablesSection}
 2. Never mix formats: if outputting a chart call \`render_chart\`, if outputting a diagram call \`render_diagram\`, if explaining use prose.
 3. Always use fenced code blocks with language names: \`\`\`sql, \`\`\`json, \`\`\`mermaid, etc.
 4. Prose responses: max 4 short paragraphs. Use **bold** for key terms.
-5. Errors from tool calls: wrap in <error>message here</error> tags.
+5. Errors from tool calls: acknowledge briefly in plain text (1 sentence), then either retry with a corrected query or ask the user for clarification. Do not repeat the raw error verbatim.
 6. For destructive operations (DELETE, DROP, TRUNCATE): first write a ONE-LINE human description in <confirm>what will be affected</confirm> (e.g. <confirm>This will permanently delete all inactive users from the users table</confirm>), then show the SQL in a fenced sql code block separately. NEVER put SQL code inside <confirm> tags — only short plain-text descriptions go there. The system already prompts users before executing destructive SQL.
 7. If you lack enough context to answer accurately, say exactly: "I don't have enough context for that. Please provide [specific thing needed]."
 8. NEVER mention library names, package names, or technical implementation details in your responses. Just use the tools and produce results silently.
diff --git a/src/lib/cloudflare.js b/src/lib/cloudflare.js
index 05c247b8..daa6331a 100644
--- a/src/lib/cloudflare.js
+++ b/src/lib/cloudflare.js
@@ -1,5 +1,5 @@
 /**
- * Cloudflare OAuth token management for DB Studio.
+ * Cloudflare OAuth token management for Stroke.
  *
  * Auth is backed by the Rust cloudflare module which:
  *  1. Runs a local HTTP callback server
diff --git a/src/lib/components/AboutDialog.svelte b/src/lib/components/AboutDialog.svelte
index 3cc87cb2..06e2108c 100644
--- a/src/lib/components/AboutDialog.svelte
+++ b/src/lib/components/AboutDialog.svelte
@@ -56,7 +56,7 @@
         <Database class="size-7 text-primary" />
       </div>
       <div>
-        <h2 class="text-lg font-semibold text-foreground tracking-tight">DB Studio</h2>
+        <h2 class="text-lg font-semibold text-foreground tracking-tight">Stroke</h2>
         <p class="text-xs text-muted-foreground mt-0.5">Database management, reimagined</p>
       </div>
       <div class="inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-background px-3 py-1 text-[11px] font-mono text-muted-foreground">
@@ -183,7 +183,7 @@
 
     <!-- Footer links -->
     <div class="flex items-center justify-between border-t border-border/60 px-6 py-3">
-      <p class="text-[10px] text-muted-foreground/50">© 2025 DB Studio</p>
+      <p class="text-[10px] text-muted-foreground/50">© 2025 Stroke</p>
       <div class="flex items-center gap-3">
         <a
           href="https://github.com/broisnischal/db-studio"
diff --git a/src/lib/components/AiChat.svelte b/src/lib/components/AiChat.svelte
index ff63e4bd..3e4b8695 100644
--- a/src/lib/components/AiChat.svelte
+++ b/src/lib/components/AiChat.svelte
@@ -1199,7 +1199,7 @@
   });
 
   // ── AI sidebar visibility (persisted) ─────────────────────────────────────
-  const AI_SIDEBAR_KEY = "db-studio:ai-sidebar-open";
+  const AI_SIDEBAR_KEY = "stroke:ai-sidebar-open";
 
   function loadSidebarPref() {
     try {
diff --git a/src/lib/components/AiSidebar.svelte b/src/lib/components/AiSidebar.svelte
index 6d920d3e..1646c26d 100644
--- a/src/lib/components/AiSidebar.svelte
+++ b/src/lib/components/AiSidebar.svelte
@@ -786,9 +786,7 @@
                   </div>
 
                 {:else if part.type === 'error'}
-                  <div class="flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/6 px-3 py-2 text-ui-xs text-destructive">
-                    <AlertTriangle class="mt-0.5 size-3.5 shrink-0" /><span>{part.content}</span>
-                  </div>
+                  <p class="text-ui-xs text-muted-foreground/70">{part.content}</p>
 
                 {:else if part.type === 'confirm_prompt'}
                   <div class="flex items-start gap-2 rounded-lg border border-amber-500/30 bg-amber-500/6 px-3 py-2 text-ui-xs text-amber-600 dark:text-amber-400">
diff --git a/src/lib/components/CloudflareLogin.svelte b/src/lib/components/CloudflareLogin.svelte
index ddbd3545..bed041c1 100644
--- a/src/lib/components/CloudflareLogin.svelte
+++ b/src/lib/components/CloudflareLogin.svelte
@@ -131,7 +131,7 @@
       </div>
       <div>
         <p class="text-sm font-medium text-foreground">Connect with Cloudflare</p>
-        <p class="mt-0.5 text-[11px] text-muted-foreground">Authorize DB Studio to access your D1 databases.</p>
+        <p class="mt-0.5 text-[11px] text-muted-foreground">Authorize Stroke to access your D1 databases.</p>
       </div>
       <button
         type="button"
@@ -152,7 +152,7 @@
       <Loader2 class="size-6 animate-spin text-amber-500" />
       <div>
         <p class="text-sm font-medium text-foreground">Browser opened</p>
-        <p class="mt-0.5 text-[11px] text-muted-foreground">Authorize DB Studio in the Cloudflare page, then return here.</p>
+        <p class="mt-0.5 text-[11px] text-muted-foreground">Authorize Stroke in the Cloudflare page, then return here.</p>
       </div>
       <p class="text-[10px] text-muted-foreground/40">Waiting… (5 min timeout)</p>
     </div>
diff --git a/src/lib/components/CommandPalette.svelte b/src/lib/components/CommandPalette.svelte
index f3b91709..690886d6 100644
--- a/src/lib/components/CommandPalette.svelte
+++ b/src/lib/components/CommandPalette.svelte
@@ -397,7 +397,7 @@
               </Command.Item>
               <Command.Item value="about license version info app" onSelect={() => run(onopenabout)}>
                 <Info class="size-4 shrink-0 opacity-60" />
-                <span data-slot="command-label" class="truncate">About DB Studio</span>
+                <span data-slot="command-label" class="truncate">About Stroke</span>
               </Command.Item>
               <Command.Item value="check for updates upgrade version" onSelect={() => run(oncheckupdate)}>
                 <ArrowDownToLine class="size-4 shrink-0 opacity-60" />
diff --git a/src/lib/components/ConnectionModal.svelte b/src/lib/components/ConnectionModal.svelte
index cb0e2927..11c76baa 100644
--- a/src/lib/components/ConnectionModal.svelte
+++ b/src/lib/components/ConnectionModal.svelte
@@ -279,9 +279,10 @@
     d1Databases = []; d1SelectedAccountId = ''; d1DbLoadPhase = 'idle'
   }
 
-  const lbl = 'mb-1.5 block text-[10px] font-semibold uppercase tracking-[0.07em] text-muted-foreground/50'
-  const inp = 'h-8 w-full border-border/25 bg-muted/[0.4] text-sm placeholder:text-muted-foreground/30 focus-visible:border-border/50 focus-visible:ring-0'
-  const divider = 'border-t border-border/25 my-0.5'
+  const lbl = 'mb-1.5 block text-[11px] font-medium uppercase tracking-[0.06em] text-muted-foreground/80'
+  const inp = 'h-9 w-full border-border/50 bg-muted/40 text-sm text-foreground placeholder:text-muted-foreground/40 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30'
+  const inpNum = inp + ' [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none'
+  const divider = 'border-t border-border/30 my-0.5'
 
   async function pickSqliteFile() {
     try {
@@ -321,7 +322,7 @@
 
         <div class="shrink-0 px-4 py-4">
           <p class="text-[15px] font-semibold tracking-tight text-foreground">Connect</p>
-          <p class="mt-0.5 text-[11px] text-muted-foreground/50">Select or add a connection</p>
+          <p class="mt-0.5 text-[11px] text-muted-foreground/70">Select or add a connection</p>
         </div>
 
         <ScrollArea class="min-h-0 flex-1 px-1.5 pb-3">
@@ -342,7 +343,7 @@
           </button>
 
           {#if saved.length > 0}
-            <p class="px-3 pb-1.5 pt-4 text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground/30">
+            <p class="px-3 pb-1.5 pt-4 text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground/55">
               Recent
             </p>
             {#each saved as conn (conn.id)}
@@ -364,10 +365,10 @@
                   <div class="flex items-center gap-1.5">
                     <p class="min-w-0 truncate text-[13px] font-medium leading-none text-foreground">{conn.name}</p>
                     {#if conn.id === lastId}
-                      <span class="shrink-0 text-[9px] font-semibold uppercase tracking-wider text-muted-foreground/30">last</span>
+                      <span class="shrink-0 rounded bg-muted px-1 py-px text-[9px] font-semibold uppercase tracking-wider text-muted-foreground/70">last</span>
                     {/if}
                   </div>
-                  <p class="mt-0.5 truncate font-mono text-[10px] text-muted-foreground/40">{connDetail(conn)}</p>
+                  <p class="mt-0.5 truncate font-mono text-[10px] text-muted-foreground/55">{connDetail(conn)}</p>
                 </div>
 
                 <div class="hidden shrink-0 items-center gap-1 group-hover:flex">
@@ -387,9 +388,9 @@
             {/each}
 
           {:else}
-            <div class="mx-1 mt-2 flex flex-col items-center gap-2 rounded-xl border border-dashed border-border/20 px-3 py-8 text-center">
-              <Clock class="size-4 text-muted-foreground/20" />
-              <p class="text-[11px] text-muted-foreground/30">No saved connections</p>
+            <div class="mx-1 mt-2 flex flex-col items-center gap-2 rounded-xl border border-dashed border-border/40 px-3 py-8 text-center">
+              <Clock class="size-4 text-muted-foreground/40" />
+              <p class="text-[11px] text-muted-foreground/55">No saved connections</p>
             </div>
           {/if}
         </ScrollArea>
@@ -408,7 +409,7 @@
                 value={dbType}
                 onValueChange={(v) => v && switchDriver(v)}
               >
-                <Select.Trigger class="h-9 w-full border-border/25 bg-muted/[0.4] text-sm hover:border-border/40 hover:bg-muted/50 focus:border-border/50 focus:ring-0">
+                <Select.Trigger class="h-9 w-full border-border/50 bg-muted/40 text-sm hover:border-border/70 hover:bg-muted/50 focus:border-ring focus:ring-2 focus:ring-ring/30">
                   <div class="flex items-center gap-2">
                     {@render dicon(dbType, 'size-[14px]')}
                     <span class="text-foreground">{activeDriver.label}</span>
@@ -444,7 +445,7 @@
             <!-- Connection name -->
             <div>
               <label for="cn-name" class={lbl}>Connection name</label>
-              <Input id="cn-name" bind:value={name} class="h-9 w-full border-border/20 bg-transparent text-[15px] font-medium placeholder:text-muted-foreground/20 focus-visible:border-border/40 focus-visible:ring-0" />
+              <Input id="cn-name" bind:value={name} class="h-9 w-full border-border/50 bg-muted/40 text-sm font-medium text-foreground placeholder:text-muted-foreground/40 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30" />
             </div>
 
             <!-- ════ PostgreSQL ════════════════════════════════════ -->
@@ -458,12 +459,12 @@
                 <div class="flex gap-2">
                   <Input id="cn-uri" bind:value={connectionUri}
                     placeholder="postgresql://user:pass@host:5432/db"
-                    class="h-8 flex-1 border-border/25 bg-muted/[0.4] font-mono text-xs placeholder:text-muted-foreground/30 focus-visible:border-border/50 focus-visible:ring-0"
+                    class="h-9 flex-1 border-border/50 bg-muted/40 font-mono text-xs text-foreground placeholder:text-muted-foreground/40 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30"
                     onpaste={() => requestAnimationFrame(applyConnectionUri)}
                     onkeydown={(e) => e.key === 'Enter' && (e.preventDefault(), applyConnectionUri())}
                   />
                   <button type="button"
-                    class="h-8 shrink-0 rounded-lg bg-muted/40 px-3.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground disabled:opacity-40"
+                    class="h-9 shrink-0 rounded-lg border border-border/50 bg-muted/40 px-4 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground disabled:opacity-40"
                     onclick={applyConnectionUri} disabled={!connectionUri.trim()}>Parse</button>
                 </div>
                 {#if uriHint}
@@ -482,14 +483,14 @@
               <div class={divider}></div>
 
               <!-- Host + Port -->
-              <div class="grid grid-cols-[1fr_80px] gap-3">
+              <div class="grid grid-cols-[1fr_104px] gap-3">
                 <div>
                   <label for="cn-host" class={lbl}>Host</label>
                   <Input id="cn-host" bind:value={host} class={inp} />
                 </div>
                 <div>
                   <label for="cn-port" class={lbl}>Port</label>
-                  <Input id="cn-port" bind:value={port} type="number" class={inp} />
+                  <Input id="cn-port" bind:value={port} type="text" inputmode="numeric" class={inpNum} />
                 </div>
               </div>
 
@@ -526,14 +527,14 @@
 
               <div class={divider}></div>
 
-              <div class="grid grid-cols-[1fr_80px] gap-3">
+              <div class="grid grid-cols-[1fr_104px] gap-3">
                 <div>
                   <label for="cn-mysql-host" class={lbl}>Host</label>
                   <Input id="cn-mysql-host" bind:value={host} class={inp} />
                 </div>
                 <div>
                   <label for="cn-mysql-port" class={lbl}>Port</label>
-                  <Input id="cn-mysql-port" bind:value={port} type="number" class={inp} />
+                  <Input id="cn-mysql-port" bind:value={port} type="text" inputmode="numeric" class={inpNum} />
                 </div>
               </div>
 
@@ -573,10 +574,10 @@
                 <div class="flex gap-2">
                   <Input id="cn-path" bind:value={filePath}
                     placeholder="/path/to/database.db"
-                    class="h-8 flex-1 border-border/25 bg-muted/[0.4] font-mono text-sm placeholder:text-muted-foreground/30 focus-visible:border-border/50 focus-visible:ring-0" />
+                    class="h-9 flex-1 border-border/50 bg-muted/40 font-mono text-sm text-foreground placeholder:text-muted-foreground/40 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30" />
                   <button
                     type="button"
-                    class="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-lg bg-muted/40 px-3 text-[11px] text-muted-foreground/60 transition-colors hover:bg-muted/70 hover:text-foreground"
+                    class="inline-flex h-9 shrink-0 items-center gap-1.5 rounded-lg border border-border/50 bg-muted/40 px-3.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground"
                     onclick={pickSqliteFile}
                     title="Browse for file"
                   >
@@ -584,7 +585,7 @@
                     Browse
                   </button>
                 </div>
-                <p class="mt-1.5 text-[11px] text-muted-foreground/40">
+                <p class="mt-1.5 text-[11px] text-muted-foreground/60">
                   Absolute path to a <code class="font-mono">.db</code> or <code class="font-mono">.sqlite</code> file
                 </p>
               </div>
@@ -611,8 +612,8 @@
                 <label for="cn-libsql-url" class={lbl}>Database URL</label>
                 <Input id="cn-libsql-url" bind:value={libsqlUrl}
                   placeholder="libsql://your-db.turso.io"
-                  class="h-8 w-full border-border/25 bg-muted/[0.4] font-mono text-sm placeholder:text-muted-foreground/30 focus-visible:border-border/50 focus-visible:ring-0" />
-                <p class="mt-1.5 text-[11px] text-muted-foreground/40">
+                  class="h-9 w-full border-border/50 bg-muted/40 font-mono text-sm text-foreground placeholder:text-muted-foreground/40 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30" />
+                <p class="mt-1.5 text-[11px] text-muted-foreground/60">
                   Accepts <code class="font-mono">libsql://</code>, <code class="font-mono">https://</code>, or <code class="font-mono">http://localhost:PORT</code>
                 </p>
               </div>
@@ -623,7 +624,7 @@
                 </label>
                 <Input id="cn-libsql-token" bind:value={libsqlToken} type="password"
                   placeholder="eyJhbGciOiJFZERTQSJ9…"
-                  class="h-8 w-full border-border/25 bg-muted/[0.4] font-mono text-sm placeholder:text-muted-foreground/30 focus-visible:border-border/50 focus-visible:ring-0" />
+                  class="h-9 w-full border-border/50 bg-muted/40 font-mono text-sm text-foreground placeholder:text-muted-foreground/40 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30" />
               </div>
 
             <!-- ════ Cloudflare D1 ═════════════════════════════════ -->
@@ -650,11 +651,11 @@
                   <div class="grid grid-cols-2 gap-3">
                     <div>
                       <label for="cn-d1-account" class={lbl}>Account ID</label>
-                      <Input id="cn-d1-account" bind:value={accountId} placeholder="abcdef1234…" class="h-8 w-full border-border/25 bg-muted/[0.4] font-mono text-xs placeholder:text-muted-foreground/30 focus-visible:border-border/50 focus-visible:ring-0" />
+                      <Input id="cn-d1-account" bind:value={accountId} placeholder="abcdef1234…" class="h-9 w-full border-border/50 bg-muted/40 font-mono text-xs text-foreground placeholder:text-muted-foreground/40 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30" />
                     </div>
                     <div>
                       <label for="cn-d1-dbid" class={lbl}>Database ID</label>
-                      <Input id="cn-d1-dbid" bind:value={databaseId} placeholder="xxxxxxxx-xxxx-…" class="h-8 w-full border-border/25 bg-muted/[0.4] font-mono text-xs placeholder:text-muted-foreground/30 focus-visible:border-border/50 focus-visible:ring-0" />
+                      <Input id="cn-d1-dbid" bind:value={databaseId} placeholder="xxxxxxxx-xxxx-…" class="h-9 w-full border-border/50 bg-muted/40 font-mono text-xs text-foreground placeholder:text-muted-foreground/40 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30" />
                     </div>
                   </div>
                   <div>
@@ -691,21 +692,21 @@
             <div>
               {#if editingId}
                 <button type="button"
-                  class="text-xs text-muted-foreground/30 transition-colors hover:text-muted-foreground"
+                  class="text-xs text-muted-foreground/60 transition-colors hover:text-foreground"
                   onclick={() => resetForm(null)}>Clear form</button>
               {/if}
             </div>
             <div class="flex items-center gap-2">
               {#if canTest}
                 <button type="button"
-                  class="inline-flex h-8 items-center gap-1.5 rounded-lg px-4 text-sm text-muted-foreground/60 transition-colors hover:bg-muted/40 hover:text-foreground disabled:opacity-40"
+                  class="inline-flex h-9 items-center gap-1.5 rounded-lg border border-border/50 px-4 text-sm text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground disabled:opacity-40"
                   onclick={handleTest} disabled={isBusy}
                 >
                   {#if testing}<Loader2 class="size-3.5 animate-spin" />Testing…{:else}Test connection{/if}
                 </button>
               {/if}
               <button type="button"
-                class="inline-flex h-8 items-center gap-1.5 rounded-lg bg-foreground px-5 text-sm font-medium text-background transition-colors hover:bg-foreground/85 disabled:opacity-50"
+                class="inline-flex h-9 items-center gap-1.5 rounded-lg bg-foreground px-5 text-sm font-medium text-background transition-colors hover:bg-foreground/85 disabled:opacity-50"
                 onclick={handleConnect} disabled={isBusy || dbType === 'bigquery'}
               >
                 {#if connecting === (editingId ?? '__new__')}
diff --git a/src/lib/components/DataTable.svelte b/src/lib/components/DataTable.svelte
index 86393259..4fc53819 100644
--- a/src/lib/components/DataTable.svelte
+++ b/src/lib/components/DataTable.svelte
@@ -1517,7 +1517,7 @@
   // restores exactly what the user had open in each table.
   /** @type {Map<string, { expandedRows: Set<number>, fkSubview: typeof fkSubview }>} */
   const _tabExpandCache = new Map()
-  let _lastTabKey = $state(columnWidthsKey ?? '')
+  let _lastTabKey = $state(untrack(() => columnWidthsKey ?? ''))
 
   $effect(() => {
     const newKey = columnWidthsKey ?? ''
diff --git a/src/lib/components/JsonCellLightbox.svelte b/src/lib/components/JsonCellLightbox.svelte
index 58748a7c..cfcaf034 100644
--- a/src/lib/components/JsonCellLightbox.svelte
+++ b/src/lib/components/JsonCellLightbox.svelte
@@ -5,7 +5,7 @@
   import CheckCheck from '@lucide/svelte/icons/check-check'
   import Braces from '@lucide/svelte/icons/braces'
   import * as monaco from 'monaco-editor'
-  import { defineDbStudioMonacoThemes, monacoThemeId, readEditorFontOptions } from '$lib/monaco-themes.js'
+  import { defineStrokeMonacoThemes, monacoThemeId, readEditorFontOptions } from '$lib/monaco-themes.js'
   import { normalizeThemeId } from '$lib/themes/registry.js'
 
   /**
@@ -45,7 +45,7 @@
     const el = container
     if (!el) return
 
-    defineDbStudioMonacoThemes()
+    defineStrokeMonacoThemes()
     const { fontSize, lineHeight } = readEditorFontOptions()
 
     const ed = monaco.editor.create(el, {
diff --git a/src/lib/components/JsonViewer.svelte b/src/lib/components/JsonViewer.svelte
index 410240d2..8ec2defc 100644
--- a/src/lib/components/JsonViewer.svelte
+++ b/src/lib/components/JsonViewer.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount } from 'svelte'
   import * as monaco from 'monaco-editor'
-  import { defineDbStudioMonacoThemes, monacoThemeId, readEditorFontOptions } from '$lib/monaco-themes.js'
+  import { defineStrokeMonacoThemes, monacoThemeId, readEditorFontOptions } from '$lib/monaco-themes.js'
   import { normalizeThemeId } from '$lib/themes/registry.js'
   import Table2 from '@lucide/svelte/icons/table-2'
   import Copy from '@lucide/svelte/icons/copy'
@@ -95,7 +95,7 @@
   }
 
   onMount(() => {
-    defineDbStudioMonacoThemes()
+    defineStrokeMonacoThemes()
     if (!container) return
 
     const { fontSize, lineHeight } = readEditorFontOptions()
diff --git a/src/lib/components/JsonViewerPage.svelte b/src/lib/components/JsonViewerPage.svelte
index 161ee4d3..993a138b 100644
--- a/src/lib/components/JsonViewerPage.svelte
+++ b/src/lib/components/JsonViewerPage.svelte
@@ -2,7 +2,7 @@
   import { onMount, tick, untrack } from 'svelte'
   import * as monaco from 'monaco-editor'
   import { configureMonacoWorkers } from '$lib/monaco-env.js'
-  import { defineDbStudioMonacoThemes, monacoThemeId, readEditorFontOptions } from '$lib/monaco-themes.js'
+  import { defineStrokeMonacoThemes, monacoThemeId, readEditorFontOptions } from '$lib/monaco-themes.js'
   import { normalizeThemeId } from '$lib/themes/registry.js'
   import ResizeHandle from './ResizeHandle.svelte'
   import { loadLayout, saveLayout } from '$lib/stores/layout.js'
@@ -250,7 +250,7 @@
 
   onMount(() => {
     configureMonacoWorkers()
-    defineDbStudioMonacoThemes()
+    defineStrokeMonacoThemes()
     if (!inputContainer || !resultContainer) return
 
     const { fontSize, lineHeight } = readEditorFontOptions()
diff --git a/src/lib/components/LicenseGate.svelte b/src/lib/components/LicenseGate.svelte
index 764650ff..06f3205e 100644
--- a/src/lib/components/LicenseGate.svelte
+++ b/src/lib/components/LicenseGate.svelte
@@ -60,7 +60,7 @@
           <Database class="size-7 text-primary" />
         </div>
         <div class="flex flex-col gap-1">
-          <h1 class="text-2xl font-bold tracking-tight text-foreground">DB Studio</h1>
+          <h1 class="text-2xl font-bold tracking-tight text-foreground">Stroke</h1>
           <p class="text-sm text-muted-foreground">Your trial has ended. Activate a license to continue.</p>
         </div>
       </div>
diff --git a/src/lib/components/McpPanel.svelte b/src/lib/components/McpPanel.svelte
index e393d6a0..20822e87 100644
--- a/src/lib/components/McpPanel.svelte
+++ b/src/lib/components/McpPanel.svelte
@@ -25,7 +25,7 @@
   // Read-only mode — persisted to localStorage
   let readOnly = $state(
     typeof localStorage !== 'undefined'
-      ? localStorage.getItem('db-studio:mcp-readonly') === 'true'
+      ? localStorage.getItem('stroke:mcp-readonly') === 'true'
       : false
   );
 
@@ -49,7 +49,7 @@
   async function toggleReadOnly() {
     readOnly = !readOnly;
     if (typeof localStorage !== 'undefined')
-      localStorage.setItem('db-studio:mcp-readonly', String(readOnly));
+      localStorage.setItem('stroke:mcp-readonly', String(readOnly));
     try { await mcpSetReadonly(readOnly) } catch {}
   }
 
@@ -58,17 +58,17 @@
     if (open) mcpSetReadonly(readOnly).catch(() => {})
   })
 
-  const claudeConfig  = $derived(status ? JSON.stringify({ mcpServers: { "db-studio": { url: status.url, headers: { Authorization: `Bearer ${status.token}` } } } }, null, 2) : '')
+  const claudeConfig  = $derived(status ? JSON.stringify({ mcpServers: { "stroke": { url: status.url, headers: { Authorization: `Bearer ${status.token}` } } } }, null, 2) : '')
   const cursorConfig  = $derived(claudeConfig)
-  const vscodeConfig  = $derived(status ? JSON.stringify({ servers: { "db-studio": { type: "http", url: status.url, headers: { Authorization: `Bearer ${status.token}` } } } }, null, 2) : '')
+  const vscodeConfig  = $derived(status ? JSON.stringify({ servers: { "stroke": { type: "http", url: status.url, headers: { Authorization: `Bearer ${status.token}` } } } }, null, 2) : '')
 
   const cursorInstallUrl = $derived.by(() => {
     if (!status) return ''
-    return `cursor://anysphere.cursor-deeplink/mcp/install?name=db-studio&config=${btoa(JSON.stringify({ url: status.url, headers: { Authorization: `Bearer ${status.token}` } }))}`
+    return `cursor://anysphere.cursor-deeplink/mcp/install?name=stroke&config=${btoa(JSON.stringify({ url: status.url, headers: { Authorization: `Bearer ${status.token}` } }))}`
   })
   const vscodeInstallUrl = $derived.by(() => {
     if (!status) return ''
-    return `vscode:mcp/install?${encodeURIComponent(JSON.stringify({ name: 'db-studio', type: 'http', url: status.url, headers: { Authorization: `Bearer ${status.token}` } }))}`
+    return `vscode:mcp/install?${encodeURIComponent(JSON.stringify({ name: 'stroke', type: 'http', url: status.url, headers: { Authorization: `Bearer ${status.token}` } }))}`
   })
   const vscodeInsidersUrl = $derived.by(() => {
     if (!status) return ''
diff --git a/src/lib/components/Onboarding.svelte b/src/lib/components/Onboarding.svelte
index 1d51707a..f29deee7 100644
--- a/src/lib/components/Onboarding.svelte
+++ b/src/lib/components/Onboarding.svelte
@@ -15,7 +15,7 @@
   let step = $state(1)
   let prev = $state(0)
   const TOTAL = 3
-  const KEY = 'db-studio:onboarded'
+  const KEY = 'stroke:onboarded'
 
   const forward = $derived(step >= prev)
 
@@ -56,7 +56,7 @@
       <div class="flex items-center gap-2.5">
         <!-- Logo placeholder: swap Database icon for <img src="/logo.svg" class="h-6" /> -->
         <Database class="size-5 text-primary" />
-        <span class="text-sm font-semibold text-foreground">DB Studio</span>
+        <span class="text-sm font-semibold text-foreground">Stroke</span>
       </div>
 
       <!-- Step dots -->
@@ -99,14 +99,14 @@
               <div class="logo-icon relative flex items-center justify-center">
                 <div class="absolute size-40 rounded-full" style="background: radial-gradient(circle, hsl(var(--primary)/0.15) 0%, transparent 70%); filter: blur(24px);"></div>
                 <div class="relative flex size-20 items-center justify-center rounded-2xl border border-primary/20 bg-primary/10">
-                  <!-- Swap for: <img src="/logo.svg" alt="DB Studio" class="size-12" /> -->
+                  <!-- Swap for: <img src="/logo.svg" alt="Stroke" class="size-12" /> -->
                   <Database class="size-9 text-primary" />
                 </div>
               </div>
 
               <div class="flex flex-col gap-4">
                 <h1 class="text-4xl font-bold tracking-tight text-foreground">
-                  Welcome to DB Studio
+                  Welcome to Stroke
                 </h1>
                 <p class="text-base leading-relaxed text-muted-foreground">
                   The developer's database client. Connect to any database,<br />
diff --git a/src/lib/components/OrmRunner.svelte b/src/lib/components/OrmRunner.svelte
index 8677f553..38b0987f 100644
--- a/src/lib/components/OrmRunner.svelte
+++ b/src/lib/components/OrmRunner.svelte
@@ -3,7 +3,7 @@
   import * as monaco from "monaco-editor";
   import { configureMonacoWorkers } from "$lib/monaco-env.js";
   import {
-    defineDbStudioMonacoThemes,
+    defineStrokeMonacoThemes,
     monacoThemeId,
     readEditorFontOptions,
   } from "$lib/monaco-themes.js";
@@ -433,7 +433,7 @@
 
   onMount(() => {
     configureMonacoWorkers();
-    defineDbStudioMonacoThemes();
+    defineStrokeMonacoThemes();
 
     if (!code.trim()) code = defaultCode();
 
diff --git a/src/lib/components/ReleaseNotesPage.svelte b/src/lib/components/ReleaseNotesPage.svelte
new file mode 100644
index 00000000..22da085a
--- /dev/null
+++ b/src/lib/components/ReleaseNotesPage.svelte
@@ -0,0 +1,210 @@
+<script>
+  import { cn } from '$lib/utils.js'
+  import Sparkles    from '@lucide/svelte/icons/sparkles'
+  import Bug         from '@lucide/svelte/icons/bug'
+  import Wrench      from '@lucide/svelte/icons/wrench'
+  import ArrowRight  from '@lucide/svelte/icons/arrow-right'
+  import ChevronLeft from '@lucide/svelte/icons/chevron-left'
+  import Download    from '@lucide/svelte/icons/download'
+  import RefreshCw   from '@lucide/svelte/icons/refresh-cw'
+  import Loader2     from '@lucide/svelte/icons/loader-2'
+  import AlertCircle from '@lucide/svelte/icons/alert-circle'
+
+  /**
+   * @typedef {{ title: string, type: 'feature'|'fix'|'change'|'other', items: string[] }} ChangeSection
+   */
+
+  let {
+    version     = '',
+    /** @type {ChangeSection[]} */
+    changelog   = [],
+    releaseNotes = '',
+    /** @type {'available'|'downloading'|'done'|'error'} */
+    status      = 'available',
+    progress    = 0,
+    downloadedBytes = 0,
+    totalBytes  = 0,
+    errorMsg    = '',
+    oninstall   = () => {},
+    onrestart   = () => {},
+    onclose     = () => {},
+  } = $props()
+
+  /** @param {number} bytes */
+  function fmt(bytes) {
+    if (bytes < 1024)       return `${bytes} B`
+    if (bytes < 1024*1024)  return `${(bytes/1024).toFixed(1)} KB`
+    return `${(bytes/(1024*1024)).toFixed(1)} MB`
+  }
+
+  /**
+   * Render inline markdown: **bold** and `code`.
+   * Content comes from our own CHANGELOG, so @html is safe here.
+   * @param {string} text
+   */
+  function renderInline(text) {
+    return text
+      .replace(/\*\*(.*?)\*\*/g, '<strong class="font-semibold text-foreground/90">$1</strong>')
+      .replace(/`(.*?)`/g, '<code class="rounded bg-muted/50 px-1 py-0.5 font-mono text-[10px]">$1</code>')
+  }
+
+  const GROUP_META = {
+    feature: { label: 'New Features',  Icon: Sparkles,   color: 'text-emerald-500', border: 'border-emerald-500/20', bg: 'bg-emerald-500/5' },
+    fix:     { label: 'Bug Fixes',     Icon: Bug,         color: 'text-orange-400',  border: 'border-orange-400/20',  bg: 'bg-orange-400/5'  },
+    change:  { label: 'Improvements',  Icon: Wrench,      color: 'text-blue-400',    border: 'border-blue-400/20',    bg: 'bg-blue-400/5'    },
+    other:   { label: 'Changes',       Icon: ArrowRight,  color: 'text-muted-foreground', border: 'border-border/30', bg: 'bg-muted/5'       },
+  }
+
+  const grouped = $derived.by(() => {
+    /** @type {Record<string, ChangeSection[]>} */
+    const map = {}
+    for (const s of changelog) {
+      if (!map[s.type]) map[s.type] = []
+      map[s.type].push(s)
+    }
+    return /** @type {Array<'feature'|'fix'|'change'|'other'>} */ (['feature', 'fix', 'change', 'other'])
+      .filter(t => map[t]?.length)
+      .map(t => ({ type: t, meta: GROUP_META[t], sections: map[t] }))
+  })
+</script>
+
+<div class="fixed inset-0 z-50 flex flex-col bg-background">
+
+  <!-- ── Header ─────────────────────────────────────────────────── -->
+  <div class="flex shrink-0 items-center border-b border-border/50 px-4 py-3">
+    <button
+      type="button"
+      onclick={onclose}
+      class="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
+    >
+      <ChevronLeft class="size-3.5" />
+      Back
+    </button>
+    <span class="flex-1 text-center text-xs font-medium text-foreground/50">Release Notes</span>
+    <span class="w-[60px] text-right font-mono text-xs text-muted-foreground/50">v{version}</span>
+  </div>
+
+  <!-- ── Scrollable body ────────────────────────────────────────── -->
+  <div class="min-h-0 flex-1 overflow-y-auto">
+    <div class="mx-auto max-w-xl px-6 pb-10 pt-8">
+
+      <!-- Hero -->
+      <div class="mb-8 flex items-center gap-3.5">
+        <div class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/10">
+          <Sparkles class="size-4.5 text-primary" />
+        </div>
+        <div>
+          <h1 class="text-lg font-semibold leading-tight text-foreground">What's New</h1>
+          <p class="font-mono text-xs text-muted-foreground">Stroke v{version}</p>
+        </div>
+      </div>
+
+      <!-- Changelog sections -->
+      {#if grouped.length > 0}
+        <div class="flex flex-col gap-8">
+          {#each grouped as group (group.type)}
+            <div>
+              <!-- Group heading -->
+              <div class="mb-3 flex items-center gap-1.5">
+                <group.meta.Icon class={cn('size-3.5', group.meta.color)} />
+                <span class={cn('text-[11px] font-semibold uppercase tracking-widest', group.meta.color)}>
+                  {group.meta.label}
+                </span>
+              </div>
+
+              <!-- Sub-sections -->
+              <div class="flex flex-col gap-2">
+                {#each group.sections as section (section.title)}
+                  <div class={cn('overflow-hidden rounded-lg border', group.meta.border, group.meta.bg)}>
+                    <div class={cn('border-b px-3 py-1.5', group.meta.border)}>
+                      <span class="text-[11px] font-medium text-foreground/65">{section.title}</span>
+                    </div>
+                    <ul class="divide-y divide-border/10">
+                      {#each section.items as item}
+                        <li class="flex gap-2 px-3 py-2">
+                          <span class="mt-1.5 size-1 shrink-0 rounded-full bg-muted-foreground/30"></span>
+                          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                          <span class="min-w-0 text-xs leading-relaxed text-muted-foreground">{@html renderInline(item)}</span>
+                        </li>
+                      {/each}
+                    </ul>
+                  </div>
+                {/each}
+              </div>
+            </div>
+          {/each}
+        </div>
+
+      {:else if releaseNotes?.trim()}
+        <!-- Fallback: raw notes when parser produces nothing -->
+        <div class="rounded-lg border border-border/30 bg-muted/5 px-4 py-4">
+          <pre class="whitespace-pre-wrap text-xs leading-relaxed text-muted-foreground">{releaseNotes}</pre>
+        </div>
+
+      {:else}
+        <div class="rounded-lg border border-border/25 bg-muted/5 py-8 text-center">
+          <p class="text-xs text-muted-foreground/50">No release notes available for this version.</p>
+          <p class="mt-1 text-[11px] text-muted-foreground/35">Check the GitHub releases page for details.</p>
+        </div>
+      {/if}
+
+    </div>
+  </div>
+
+  <!-- ── Footer action bar ─────────────────────────────────────── -->
+  <div class="shrink-0 border-t border-border/50 bg-background/95 px-5 py-3.5">
+
+    {#if status === 'available'}
+      <div class="flex items-center gap-2.5">
+        <button
+          type="button"
+          onclick={onclose}
+          class="flex-1 rounded-lg border border-border px-4 py-2 text-center text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+        >
+          Later
+        </button>
+        <button
+          type="button"
+          onclick={oninstall}
+          class="flex flex-[2] items-center justify-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-xs font-medium text-primary-foreground hover:opacity-90"
+        >
+          <Download class="size-3.5" />
+          Install Stroke {version}
+        </button>
+      </div>
+
+    {:else if status === 'downloading'}
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center justify-between text-[11px] text-muted-foreground">
+          <span class="flex items-center gap-1.5">
+            <Loader2 class="size-3 shrink-0 animate-spin" />
+            Downloading update…
+          </span>
+          <span class="font-mono tabular-nums">
+            {totalBytes > 0 ? `${fmt(downloadedBytes)} / ${fmt(totalBytes)}` : `${progress}%`}
+          </span>
+        </div>
+        <div class="h-1 w-full overflow-hidden rounded-full bg-muted">
+          <div class="h-full rounded-full bg-primary transition-all duration-150" style="width:{progress}%"></div>
+        </div>
+      </div>
+
+    {:else if status === 'done'}
+      <button
+        type="button"
+        onclick={onrestart}
+        class="flex w-full items-center justify-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-xs font-medium text-primary-foreground hover:opacity-90"
+      >
+        <RefreshCw class="size-3.5" />
+        Restart to apply update
+      </button>
+
+    {:else if status === 'error'}
+      <div class="flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2">
+        <AlertCircle class="mt-0.5 size-3.5 shrink-0 text-destructive" />
+        <p class="font-mono text-[11px] text-destructive">{errorMsg || 'Update failed. Please try again.'}</p>
+      </div>
+    {/if}
+
+  </div>
+</div>
diff --git a/src/lib/components/SecuritySqlModal.svelte b/src/lib/components/SecuritySqlModal.svelte
index 4dfe5d44..db171073 100644
--- a/src/lib/components/SecuritySqlModal.svelte
+++ b/src/lib/components/SecuritySqlModal.svelte
@@ -4,7 +4,7 @@
   import { configureMonacoWorkers } from '$lib/monaco-env.js'
   import { registerMonacoSqlFormatter } from '$lib/format-sql.js'
   import {
-    defineDbStudioMonacoThemes,
+    defineStrokeMonacoThemes,
     monacoThemeId,
     readEditorFontOptions,
   } from '$lib/monaco-themes.js'
@@ -32,7 +32,7 @@
 
   onMount(() => {
     configureMonacoWorkers()
-    defineDbStudioMonacoThemes()
+    defineStrokeMonacoThemes()
     registerMonacoSqlFormatter(monaco)
     if (!container) return
 
diff --git a/src/lib/components/SettingsDialog.svelte b/src/lib/components/SettingsDialog.svelte
index 1a692b9f..d954826d 100644
--- a/src/lib/components/SettingsDialog.svelte
+++ b/src/lib/components/SettingsDialog.svelte
@@ -244,7 +244,7 @@
           class="flex w-full items-center justify-between gap-2 px-3 py-2.5 text-left text-xs text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground"
           onclick={() => { open = false; onopenabout() }}
         >
-          <span>About DB Studio</span>
+          <span>About Stroke</span>
           <ChevronRight class="size-3.5 shrink-0 opacity-60" />
         </button>
       </div>
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
index f5bb1f6c..a0f79d6b 100644
--- a/src/lib/components/Sidebar.svelte
+++ b/src/lib/components/Sidebar.svelte
@@ -74,7 +74,7 @@
   );
 
   // Section open/collapsed state — persisted across sidebar toggles
-  const SIDEBAR_EXPAND_KEY = 'db-studio:sidebar-sections'
+  const SIDEBAR_EXPAND_KEY = 'stroke:sidebar-sections'
   function loadSidebarSections() {
     try {
       const raw = localStorage.getItem(SIDEBAR_EXPAND_KEY)
@@ -100,7 +100,7 @@
   $effect(() => { saveSidebarSection('matViews', matViewsOpen) })
 
   // ── Pinned tables ─────────────────────────────────────────────────────────
-  const PINNED_KEY = 'db-studio:pinned-tables'
+  const PINNED_KEY = 'stroke:pinned-tables'
 
   function loadPinnedAll() {
     try {
@@ -136,7 +136,7 @@
   }
 
   // ── Display preferences ───────────────────────────────────────────────────
-  const DISPLAY_PREFS_KEY = 'db-studio:sidebar-display'
+  const DISPLAY_PREFS_KEY = 'stroke:sidebar-display'
   function loadDisplayPrefs() {
     try {
       const raw = localStorage.getItem(DISPLAY_PREFS_KEY)
diff --git a/src/lib/components/SqlEditor.svelte b/src/lib/components/SqlEditor.svelte
index 32872d28..391f60be 100644
--- a/src/lib/components/SqlEditor.svelte
+++ b/src/lib/components/SqlEditor.svelte
@@ -5,7 +5,7 @@
   import { registerMonacoSqlFormatter } from '$lib/format-sql.js'
   import { registerMonacoSqlCompletion } from '$lib/monaco-sql-complete.js'
   import {
-    defineDbStudioMonacoThemes,
+    defineStrokeMonacoThemes,
     monacoThemeId,
     readEditorFontOptions,
   } from '$lib/monaco-themes.js'
@@ -70,7 +70,7 @@
     }, { capture: true, passive: false })
     // Still register the action so it appears in Monaco's command palette (F1)
     ed.addAction({
-      id: 'db-studio.run-query',
+      id: 'stroke.run-query',
       label: 'Run Query',
       run: () => run(onmodenter),
     })
@@ -102,7 +102,7 @@
 
   onMount(() => {
     configureMonacoWorkers()
-    defineDbStudioMonacoThemes()
+    defineStrokeMonacoThemes()
     registerMonacoSqlFormatter(monaco)
     registerMonacoSqlCompletion(monaco, () => schemaHints)
     if (!container) return
diff --git a/src/lib/components/StudioShell.svelte b/src/lib/components/StudioShell.svelte
index 4e9dadf2..7f751143 100644
--- a/src/lib/components/StudioShell.svelte
+++ b/src/lib/components/StudioShell.svelte
@@ -181,9 +181,9 @@
     if (map.size > COLUMNS_CACHE_MAX) map.delete(/** @type {string} */ (map.keys().next().value))
   }
 
-  const ONBOARDING_KEY = 'db-studio:onboarded'
-  const SAMPLE_SEEDED_KEY = 'db-studio:sample-seeded'
-  const SAMPLE_DB_ID = 'db-studio:sample-sqlite'
+  const ONBOARDING_KEY = 'stroke:onboarded'
+  const SAMPLE_SEEDED_KEY = 'stroke:sample-seeded'
+  const SAMPLE_DB_ID = 'stroke:sample-sqlite'
   let showOnboarding = $state(false)
 
   // Dev-only: Alt+Shift+O resets and re-shows the onboarding. Dead code in prod.
@@ -265,12 +265,12 @@
   let loadingTables = $state(false)
 
   // AI Mode — full-screen chat, hides sidebar and tabs
-  function loadAiMode() { try { return localStorage.getItem('db-studio:ai-mode') === '1' } catch { return false } }
-  function saveAiMode(v) { try { localStorage.setItem('db-studio:ai-mode', v ? '1' : '0') } catch {} }
+  function loadAiMode() { try { return localStorage.getItem('stroke:ai-mode') === '1' } catch { return false } }
+  function saveAiMode(v) { try { localStorage.setItem('stroke:ai-mode', v ? '1' : '0') } catch {} }
 
   // Hidden columns — persisted per connection+schema+table
   /** @param {string} connId @param {string} schema @param {string} table */
-  function hiddenColsKey(connId, schema, table) { return `db-studio:hidden-cols:${connId}:${schema}.${table}` }
+  function hiddenColsKey(connId, schema, table) { return `stroke:hidden-cols:${connId}:${schema}.${table}` }
   /** @param {string} connId @param {string} schema @param {string} table @returns {Set<string>} */
   function loadHiddenCols(connId, schema, table) {
     try { const v = localStorage.getItem(hiddenColsKey(connId, schema, table)); if (v) return new Set(JSON.parse(v)) } catch {}
@@ -503,7 +503,7 @@
     void mcpUpdateConnections(savedConnections, activeConnectionId || null)
   })
 
-  const QUERY_HISTORY_OPEN_KEY = 'db-studio:query-history-open'
+  const QUERY_HISTORY_OPEN_KEY = 'stroke:query-history-open'
   function loadQueryHistoryPref() {
     try {
       return localStorage.getItem(QUERY_HISTORY_OPEN_KEY) === '1'
@@ -2805,7 +2805,7 @@
           <Database class="size-6 text-muted-foreground" />
         </div>
         <div class="flex flex-col gap-1">
-          <h1 class="text-base font-medium">DB Studio</h1>
+          <h1 class="text-base font-medium">Stroke</h1>
           <p class="max-w-sm text-ui text-muted-foreground">
             Connect to PostgreSQL to browse schemas and table data.
           </p>
diff --git a/src/lib/components/UpdateDialog.svelte b/src/lib/components/UpdateDialog.svelte
index 51e3fc74..320c4988 100644
--- a/src/lib/components/UpdateDialog.svelte
+++ b/src/lib/components/UpdateDialog.svelte
@@ -1,41 +1,40 @@
 <script>
-  import { onMount } from 'svelte'
-  import { check } from '@tauri-apps/plugin-updater'
-  import { invoke } from '@tauri-apps/api/core'
-  import { cn } from '$lib/utils.js'
-  import Download from '@lucide/svelte/icons/download'
-  import RefreshCw from '@lucide/svelte/icons/refresh-cw'
-  import X from '@lucide/svelte/icons/x'
-  import CheckCircle2 from '@lucide/svelte/icons/check-circle-2'
-  import AlertCircle from '@lucide/svelte/icons/alert-circle'
-  import Loader2 from '@lucide/svelte/icons/loader-2'
-  import Sparkles from '@lucide/svelte/icons/sparkles'
-  import Bug from '@lucide/svelte/icons/bug'
-  import Wrench from '@lucide/svelte/icons/wrench'
-  import ArrowRight from '@lucide/svelte/icons/arrow-right'
+  import { onMount }     from 'svelte'
+  import { check }       from '@tauri-apps/plugin-updater'
+  import { invoke }      from '@tauri-apps/api/core'
+  import Download        from '@lucide/svelte/icons/download'
+  import RefreshCw       from '@lucide/svelte/icons/refresh-cw'
+  import X               from '@lucide/svelte/icons/x'
+  import CheckCircle2    from '@lucide/svelte/icons/check-circle-2'
+  import AlertCircle     from '@lucide/svelte/icons/alert-circle'
+  import Loader2         from '@lucide/svelte/icons/loader-2'
+  import Sparkles        from '@lucide/svelte/icons/sparkles'
+  import ScrollText      from '@lucide/svelte/icons/scroll-text'
+  import ReleaseNotesPage from './ReleaseNotesPage.svelte'
 
   let {
     onupdatefound = /** @type {() => void} */ (() => {}),
   } = $props()
 
   /** @type {'idle'|'available'|'downloading'|'done'|'error'|'up-to-date'} */
-  let status = $state('idle')
-  let updateVersion = $state('')
-  let releaseNotes = $state('')
-  let progress = $state(0)
+  let status          = $state('idle')
+  let updateVersion   = $state('')
+  let releaseNotes    = $state('')
+  let progress        = $state(0)
   let downloadedBytes = $state(0)
-  let totalBytes = $state(0)
-  let errorMsg = $state('')
+  let totalBytes      = $state(0)
+  let errorMsg        = $state('')
   /** @type {import('@tauri-apps/plugin-updater').Update | null} */
-  let pendingUpdate = $state(null)
+  let pendingUpdate   = $state(null)
+  let dismissed       = $state(false)
+  let checking        = $state(false)
+  let releasePage     = $state(false)
 
-  let dismissed = $state(false)
-  let checking = $state(false)
-
-  /** Call this to manually trigger an update check (e.g. from the command palette). */
+  /** Manually trigger an update check (e.g. from the command palette). */
   export async function checkNow() {
     if (checking || status === 'downloading') return
     dismissed = false
+    releasePage = false
     checking = true
     await checkForUpdate()
     if (status === 'idle') status = 'up-to-date'
@@ -43,60 +42,75 @@
   }
 
   const visible = $derived(
-    !dismissed &&
-      (status === 'available' ||
-        status === 'downloading' ||
-        status === 'done' ||
-        status === 'error' ||
-        status === 'up-to-date' ||
-        checking),
+    !dismissed && !releasePage &&
+    (status === 'available' ||
+     status === 'downloading' ||
+     status === 'done' ||
+     status === 'error' ||
+     status === 'up-to-date' ||
+     checking),
   )
 
+  /** @param {number} bytes */
   function fmt(bytes) {
-    if (bytes < 1024) return `${bytes} B`
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+    if (bytes < 1024)      return `${bytes} B`
+    if (bytes < 1024*1024) return `${(bytes/1024).toFixed(1)} KB`
+    return `${(bytes/(1024*1024)).toFixed(1)} MB`
   }
 
   /**
    * Parse markdown release notes into typed sections.
-   * Handles GitHub-style `## Heading` + `- item` lists.
+   * Handles GitHub-style `### Section` + `#### Category` + `- item` lists.
+   * Sub-sections inherit their parent section type so "Canvas Table" under
+   * "New Features" correctly gets type='feature'.
    * @param {string} markdown
    * @returns {{ title: string; type: 'feature'|'fix'|'change'|'other'; items: string[] }[]}
    */
   function parseChangelog(markdown) {
     if (!markdown?.trim()) return []
     const lines = markdown.split('\n')
-    /** @type {{ title: string; type: 'feature'|'fix'|'change'|'other'; items: string[] }[]} */
-    const sections = []
+    /** @type {'feature'|'fix'|'change'|'other'} */
+    let currentType = 'other'
     /** @type {{ title: string; type: 'feature'|'fix'|'change'|'other'; items: string[] } | null} */
     let current = null
+    /** @type {{ title: string; type: 'feature'|'fix'|'change'|'other'; items: string[] }[]} */
+    const sections = []
 
     for (const line of lines) {
       const trimmed = line.trim()
+
       if (/^#{1,3}\s/.test(trimmed)) {
+        // Top-level section (## or ###) — determines the type inherited by sub-sections
         const title = trimmed.replace(/^#+\s*/, '').trim()
         const lower = title.toLowerCase()
-        /** @type {'feature'|'fix'|'change'|'other'} */
-        const type =
-          /feat|feature|add|new|what.?s new|✨|🚀|⭐|🆕/.test(lower)
-            ? 'feature'
-            : /fix|bug|patch|issue|🐛|🔧|🩹/.test(lower)
-              ? 'fix'
-              : /change|improve|update|refactor|perf|♻️|💄|🔄|⚡/.test(lower)
-                ? 'change'
-                : 'other'
-        current = { title, type, items: [] }
+        currentType =
+          /feat|feature|add|new|what.?s new|✨|🚀|⭐|🆕/.test(lower) ? 'feature'
+          : /fix|bug|patch|issue|🐛|🔧|🩹/.test(lower)               ? 'fix'
+          : /change|improve|update|refactor|perf|♻️|💄|🔄|⚡/.test(lower) ? 'change'
+          : 'other'
+        // Only create a section for the top-level heading if it collects items directly
+        current = { title, type: currentType, items: [] }
+        sections.push(current)
+
+      } else if (/^#{4,}\s/.test(trimmed)) {
+        // Sub-section (#### Category) — inherits parent type
+        const title = trimmed.replace(/^#+\s*/, '').trim()
+        current = { title, type: currentType, items: [] }
         sections.push(current)
-      } else if (/^[-*•]\s/.test(trimmed) && current) {
-        // strip leading marker and any trailing PR/commit refs like "(#123)"
+
+      } else if (/^[-*•]\s/.test(trimmed)) {
+        if (!current) {
+          current = { title: 'Changes', type: 'other', items: [] }
+          sections.push(current)
+        }
         const item = trimmed
           .replace(/^[-*•]\s*/, '')
           .replace(/\s*\(#\d+\)\s*$/, '')
           .trim()
         if (item) current.items.push(item)
-      } else if (trimmed && current && current.items.length === 0 && !/^#{1,3}\s/.test(trimmed)) {
-        // treat a non-empty non-header line before any bullets as a description item
+
+      } else if (trimmed && current && current.items.length === 0 && !/^#+/.test(trimmed)) {
+        // Plain text before any bullet — treat as a description item
         current.items.push(trimmed)
       }
     }
@@ -122,7 +136,7 @@
       console.info('[updater] update available:', update.version)
       pendingUpdate = update
       updateVersion = update.version
-      releaseNotes = update.body ?? ''
+      releaseNotes  = update.body ?? ''
       status = 'available'
       onupdatefound()
     } catch (e) {
@@ -136,6 +150,7 @@
 
   async function install() {
     if (!pendingUpdate) return
+    dismissed = false   // ensure toast / release-notes footer stays visible
     status = 'downloading'
     progress = 0
     downloadedBytes = 0
@@ -163,182 +178,147 @@
   }
 </script>
 
+<!-- ── Release Notes full-page overlay ──────────────────────────── -->
+{#if releasePage}
+  <ReleaseNotesPage
+    version={updateVersion}
+    {changelog}
+    {releaseNotes}
+    {status}
+    {progress}
+    {downloadedBytes}
+    {totalBytes}
+    {errorMsg}
+    oninstall={() => void install()}
+    onrestart={() => void restart()}
+    onclose={() => (releasePage = false)}
+  />
+{/if}
+
+<!-- ── Compact corner toast (all non-page states) ────────────────── -->
 {#if visible}
-  {#if status === 'available'}
-    <!-- Full-screen modal for update available -->
-    <div
-      role="none"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
-      onclick={(e) => e.target === e.currentTarget && (dismissed = true)}
-    >
-      <div
-        class="relative flex max-h-[85vh] w-full max-w-lg flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-2xl shadow-black/30"
-        role="dialog"
-        aria-label="Update available"
-        aria-modal="true"
-      >
-        <!-- header -->
-        <div class="flex shrink-0 items-start gap-3 border-b border-border px-5 py-4">
-          <div class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10">
-            <Sparkles class="size-4 text-primary" />
-          </div>
-          <div class="min-w-0 flex-1">
-            <p class="text-sm font-semibold text-foreground">DB Studio {updateVersion} is ready</p>
-            <p class="mt-0.5 text-xs text-muted-foreground">A new version is available to install</p>
-          </div>
+  <div
+    class="fixed bottom-4 right-4 z-50 w-[22rem] overflow-hidden rounded-xl border border-border bg-card shadow-lg shadow-black/10"
+    role="dialog"
+    aria-label="Application update"
+  >
+    <!-- header row -->
+    <div class="flex items-center gap-2.5 border-b border-border px-4 py-3">
+      {#if status === 'done' || status === 'up-to-date'}
+        <CheckCircle2 class="size-4 shrink-0 text-green-500" />
+      {:else if status === 'error'}
+        <AlertCircle class="size-4 shrink-0 text-destructive" />
+      {:else if checking}
+        <Loader2 class="size-4 shrink-0 animate-spin text-primary/70" />
+      {:else if status === 'available'}
+        <Sparkles class="size-4 shrink-0 text-primary" />
+      {:else}
+        <Download class="size-4 shrink-0 text-primary/70" />
+      {/if}
+
+      <span class="flex-1 text-ui-sm font-medium text-foreground">
+        {#if checking}
+          Checking for updates…
+        {:else if status === 'available'}
+          Stroke {updateVersion} available
+        {:else if status === 'downloading'}
+          Downloading update…
+        {:else if status === 'done'}
+          Ready to install
+        {:else if status === 'error'}
+          Update failed
+        {:else if status === 'up-to-date'}
+          Up to date
+        {/if}
+      </span>
+
+      {#if status !== 'downloading'}
+        <button
+          type="button"
+          onclick={() => (dismissed = true)}
+          class="inline-flex size-5 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
+          aria-label="Dismiss"
+        >
+          <X class="size-3" />
+        </button>
+      {/if}
+    </div>
+
+    <!-- body -->
+    <div class="px-4 py-3 text-ui-sm">
+
+      {#if status === 'available'}
+        <p class="mb-3 text-xs text-muted-foreground">A new version is ready to install.</p>
+        <div class="flex gap-2">
+          <button
+            type="button"
+            onclick={() => (releasePage = true)}
+            class="flex flex-1 items-center justify-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          >
+            <ScrollText class="size-3.5" />
+            Release Notes
+          </button>
           <button
             type="button"
-            onclick={() => (dismissed = true)}
-            class="inline-flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
-            aria-label="Dismiss"
+            onclick={() => void install()}
+            class="flex flex-1 items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90"
           >
-            <X class="size-3.5" />
+            <Download class="size-3.5" />
+            Install
           </button>
         </div>
 
-        <!-- changelog body -->
-        {#if changelog.length > 0}
-          <div class="min-h-0 flex-1 overflow-y-auto px-5 py-4">
-            <p class="mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">What's new</p>
-            <div class="flex flex-col gap-4">
-              {#each changelog as section}
-                <div>
-                  <div class="mb-1.5 flex items-center gap-1.5">
-                    {#if section.type === 'feature'}
-                      <Sparkles class="size-3.5 text-emerald-500" />
-                    {:else if section.type === 'fix'}
-                      <Bug class="size-3.5 text-orange-500" />
-                    {:else if section.type === 'change'}
-                      <Wrench class="size-3.5 text-blue-500" />
-                    {:else}
-                      <ArrowRight class="size-3.5 text-muted-foreground" />
-                    {/if}
-                    <span class="text-xs font-semibold
-                      {section.type === 'feature' ? 'text-emerald-500' :
-                       section.type === 'fix' ? 'text-orange-500' :
-                       section.type === 'change' ? 'text-blue-500' :
-                       'text-muted-foreground'}"
-                    >{section.title}</span>
-                  </div>
-                  <ul class="ml-5 flex flex-col gap-1">
-                    {#each section.items as item}
-                      <li class="flex gap-2 text-xs text-muted-foreground">
-                        <span class="mt-1.5 size-1 shrink-0 rounded-full bg-border"></span>
-                        <span>{item}</span>
-                      </li>
-                    {/each}
-                  </ul>
-                </div>
-              {/each}
-            </div>
+      {:else if status === 'downloading'}
+        <div class="flex flex-col gap-2">
+          <div class="flex items-center justify-between text-ui-xs text-muted-foreground">
+            <span>{totalBytes > 0 ? `${fmt(downloadedBytes)} / ${fmt(totalBytes)}` : 'Downloading…'}</span>
+            <span class="font-mono tabular-nums">{progress}%</span>
           </div>
-        {:else if releaseNotes}
-          <div class="min-h-0 flex-1 overflow-y-auto px-5 py-4">
-            <p class="mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">Release notes</p>
-            <p class="whitespace-pre-wrap text-xs text-muted-foreground">{releaseNotes}</p>
+          <div class="h-1.5 w-full overflow-hidden rounded-full bg-muted">
+            <div
+              class="h-full rounded-full bg-primary transition-all duration-150"
+              style="width:{progress}%"
+            ></div>
           </div>
-        {:else}
-          <div class="px-5 py-4">
-            <p class="text-xs text-muted-foreground">No release notes available for this version.</p>
-          </div>
-        {/if}
+          <p class="text-ui-xs text-muted-foreground">
+            Stroke <span class="font-mono font-medium text-foreground">{updateVersion}</span>
+          </p>
+        </div>
 
-        <!-- footer actions -->
-        <div class="shrink-0 border-t border-border px-5 py-3">
-          <div class="flex gap-2">
-            <button
-              type="button"
-              onclick={() => (dismissed = true)}
-              class="flex-1 rounded-lg border border-border px-4 py-2 text-center text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
-            >
-              Later
-            </button>
+      {:else if status === 'done'}
+        <p class="mb-3 text-muted-foreground">
+          Version <span class="font-mono font-medium text-foreground">{updateVersion}</span> downloaded. Restart to apply.
+        </p>
+        <div class="flex gap-2">
+          {#if changelog.length > 0}
             <button
               type="button"
-              onclick={() => void install()}
-              class="flex flex-1 items-center justify-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-xs font-medium text-primary-foreground hover:opacity-90"
+              onclick={() => (releasePage = true)}
+              class="flex flex-1 items-center justify-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
             >
-              <Download class="size-3.5" />
-              Install update
+              <ScrollText class="size-3.5" />
+              What's New
             </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  {:else}
-    <!-- Compact corner toast for all other states -->
-    <div
-      class="fixed bottom-4 right-4 z-50 w-80 overflow-hidden rounded-xl border border-border bg-card shadow-lg shadow-black/10"
-      role="dialog"
-      aria-label="Application update"
-    >
-      <!-- header -->
-      <div class="flex items-center gap-2.5 border-b border-border px-4 py-3">
-        {#if status === 'done' || status === 'up-to-date'}
-          <CheckCircle2 class="size-4 shrink-0 text-green-500" />
-        {:else if status === 'error'}
-          <AlertCircle class="size-4 shrink-0 text-destructive" />
-        {:else if checking}
-          <Loader2 class="size-4 shrink-0 animate-spin text-primary/70" />
-        {:else}
-          <Download class="size-4 shrink-0 text-primary/70" />
-        {/if}
-        <span class="flex-1 text-ui-sm font-medium text-foreground">
-          {#if checking}Checking for updates…{:else if status === 'downloading'}Downloading update…{:else if status === 'done'}Ready to install{:else if status === 'error'}Update failed{:else if status === 'up-to-date'}Up to date{/if}
-        </span>
-        {#if status !== 'downloading'}
-          <button
-            type="button"
-            onclick={() => (dismissed = true)}
-            class="inline-flex size-5 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
-            aria-label="Dismiss"
-          >
-            <X class="size-3" />
-          </button>
-        {/if}
-      </div>
-
-      <!-- body -->
-      <div class="px-4 py-3 text-ui-sm">
-        {#if status === 'downloading'}
-          <div class="flex flex-col gap-2">
-            <div class="flex items-center justify-between text-ui-xs text-muted-foreground">
-              <span>{totalBytes > 0 ? `${fmt(downloadedBytes)} / ${fmt(totalBytes)}` : 'Downloading…'}</span>
-              <span>{progress}%</span>
-            </div>
-            <div class="h-1.5 w-full overflow-hidden rounded-full bg-muted">
-              <div
-                class="h-full rounded-full bg-primary transition-all duration-150"
-                style="width: {progress}%"
-              ></div>
-            </div>
-            <p class="text-ui-xs text-muted-foreground">
-              DB Studio <span class="font-mono font-medium text-foreground">{updateVersion}</span>
-            </p>
-          </div>
-
-        {:else if status === 'done'}
-          <p class="text-muted-foreground">
-            Version <span class="font-mono font-medium text-foreground">{updateVersion}</span> downloaded. Restart to apply.
-          </p>
+          {/if}
           <button
             type="button"
             onclick={() => void restart()}
-            class="mt-3 flex w-full items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-ui-xs font-medium text-primary-foreground hover:opacity-90"
+            class="flex flex-1 items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90"
           >
             <RefreshCw class="size-3" />
             Restart now
           </button>
+        </div>
 
-        {:else if status === 'error'}
-          <p class="font-mono text-ui-xs text-destructive">{errorMsg}</p>
+      {:else if status === 'error'}
+        <p class="font-mono text-ui-xs text-destructive">{errorMsg}</p>
+
+      {:else if status === 'up-to-date' || checking}
+        <p class="text-muted-foreground">
+          {checking ? 'Checking GitHub for a newer release…' : "You're on the latest version."}
+        </p>
+      {/if}
 
-        {:else if status === 'up-to-date' || checking}
-          <p class="text-muted-foreground">
-            {checking ? 'Checking GitHub for a newer release…' : "You're on the latest version."}
-          </p>
-        {/if}
-      </div>
     </div>
-  {/if}
+  </div>
 {/if}
diff --git a/src/lib/components/ui/sonner/sonner.css b/src/lib/components/ui/sonner/sonner.css
new file mode 100644
index 00000000..d36ea383
--- /dev/null
+++ b/src/lib/components/ui/sonner/sonner.css
@@ -0,0 +1,69 @@
+.studio-toast-root {
+  position: fixed;
+  z-index: 999999999;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+  pointer-events: none;
+}
+
+/* Anchor toaster inside host so clear-all + stack share one column */
+.studio-toast-root .studio-toaster[data-sonner-toaster] {
+  position: relative !important;
+  top: auto !important;
+  right: auto !important;
+  bottom: auto !important;
+  left: auto !important;
+  width: 100% !important;
+  transform: none !important;
+  margin: 0;
+}
+
+/* No slide/fade-in-up — appear in place; stack motion only */
+.studio-toaster [data-sonner-toast] {
+  --y: translateY(0) !important;
+  transition:
+    transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 200ms ease,
+    height 400ms cubic-bezier(0.22, 1, 0.36, 1),
+    box-shadow 200ms ease !important;
+}
+
+.studio-toaster [data-sonner-toast]:not([data-mounted='true']) {
+  opacity: 0;
+}
+
+.studio-toaster [data-sonner-toast][data-mounted='true'] {
+  opacity: 1;
+}
+
+.studio-toaster [data-sonner-toast][data-removed='true'][data-swipe-out='false'] {
+  --y: translateY(0) !important;
+  opacity: 0 !important;
+}
+
+/* Collapsed stack: cards peek behind the front toast */
+.studio-toaster[data-expanded='false'] [data-sonner-toast][data-front='false'] {
+  opacity: 0.9;
+}
+
+.studio-toaster[data-expanded='true'] [data-sonner-toast] {
+  opacity: 1;
+}
+
+/* Hide description element when empty so no ghost space below title-only toasts */
+.studio-toaster [data-description]:empty {
+  display: none;
+}
+
+/* Center icon + close button vertically when there is no description */
+.studio-toaster [data-sonner-toast]:not(:has([data-description]:not(:empty))) {
+  align-items: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .studio-toaster [data-sonner-toast] {
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/src/lib/components/ui/sonner/sonner.svelte b/src/lib/components/ui/sonner/sonner.svelte
index 5df44646..8830aa64 100644
--- a/src/lib/components/ui/sonner/sonner.svelte
+++ b/src/lib/components/ui/sonner/sonner.svelte
@@ -1,4 +1,5 @@
 <script>
+  import './sonner.css'
   import CircleCheck from '@lucide/svelte/icons/circle-check'
   import Info from '@lucide/svelte/icons/info'
   import Loader2 from '@lucide/svelte/icons/loader-2'
@@ -155,75 +156,3 @@
     {/snippet}
   </Sonner>
 </section>
-
-<style>
-  .studio-toast-root {
-    position: fixed;
-    z-index: 999999999;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    gap: 8px;
-    pointer-events: none;
-  }
-
-  /* Anchor toaster inside host so clear-all + stack share one column */
-  :global(.studio-toast-root .studio-toaster[data-sonner-toaster]) {
-    position: relative !important;
-    top: auto !important;
-    right: auto !important;
-    bottom: auto !important;
-    left: auto !important;
-    width: 100% !important;
-    transform: none !important;
-    margin: 0;
-  }
-
-  /* No slide/fade-in-up — appear in place; stack motion only */
-  :global(.studio-toaster [data-sonner-toast]) {
-    --y: translateY(0) !important;
-    transition:
-      transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
-      opacity 200ms ease,
-      height 400ms cubic-bezier(0.22, 1, 0.36, 1),
-      box-shadow 200ms ease !important;
-  }
-
-  :global(.studio-toaster [data-sonner-toast]:not([data-mounted='true'])) {
-    opacity: 0;
-  }
-
-  :global(.studio-toaster [data-sonner-toast][data-mounted='true']) {
-    opacity: 1;
-  }
-
-  :global(.studio-toaster [data-sonner-toast][data-removed='true'][data-swipe-out='false']) {
-    --y: translateY(0) !important;
-    opacity: 0 !important;
-  }
-
-  /* Collapsed stack: cards peek behind the front toast */
-  :global(.studio-toaster[data-expanded='false'] [data-sonner-toast][data-front='false']) {
-    opacity: 0.9;
-  }
-
-  :global(.studio-toaster[data-expanded='true'] [data-sonner-toast]) {
-    opacity: 1;
-  }
-
-  /* Hide description element when empty so no ghost space below title-only toasts */
-  :global(.studio-toaster [data-description]:empty) {
-    display: none;
-  }
-
-  /* Center icon + close button vertically when there is no description */
-  :global(.studio-toaster [data-sonner-toast]:not(:has([data-description]:not(:empty)))) {
-    align-items: center;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    :global(.studio-toaster [data-sonner-toast]) {
-      transition-duration: 0.01ms !important;
-    }
-  }
-</style>
diff --git a/src/lib/monaco-themes.js b/src/lib/monaco-themes.js
index 4d5c615d..d7358623 100644
--- a/src/lib/monaco-themes.js
+++ b/src/lib/monaco-themes.js
@@ -5,7 +5,7 @@ import { monacoThemeName, THEME_IDS, getThemeDefinition } from '$lib/themes/regi
 let defined = false
 
 /** Register one Monaco theme per app theme id. */
-export function defineDbStudioMonacoThemes() {
+export function defineStrokeMonacoThemes() {
   if (defined) return
   defined = true
 
diff --git a/src/lib/stores/ai-chat-params.js b/src/lib/stores/ai-chat-params.js
index b2832a25..abb018c7 100644
--- a/src/lib/stores/ai-chat-params.js
+++ b/src/lib/stores/ai-chat-params.js
@@ -1,6 +1,6 @@
 import { writable, get } from 'svelte/store'
 
-const KEY = 'db-studio:ai-chat-params'
+const KEY = 'stroke:ai-chat-params'
 
 /**
  * @typedef {{
diff --git a/src/lib/stores/ai-settings.js b/src/lib/stores/ai-settings.js
index bb6a8abf..c5d21388 100644
--- a/src/lib/stores/ai-settings.js
+++ b/src/lib/stores/ai-settings.js
@@ -80,9 +80,9 @@ export const PROVIDER_MODELS = {
 
 // ── Storage keys ─────────────────────────────────────────────────────────────
 
-const PROFILES_KEY = 'db-studio:ai-profiles'
-const ACTIVE_KEY   = 'db-studio:ai-active-profile'
-const LEGACY_KEY   = 'db-studio:ai-settings'
+const PROFILES_KEY = 'stroke:ai-profiles'
+const ACTIVE_KEY   = 'stroke:ai-active-profile'
+const LEGACY_KEY   = 'stroke:ai-settings'
 
 // ── Default profile ──────────────────────────────────────────────────────────
 
diff --git a/src/lib/stores/ai-skills.js b/src/lib/stores/ai-skills.js
index 7b2deaf9..d2ff2101 100644
--- a/src/lib/stores/ai-skills.js
+++ b/src/lib/stores/ai-skills.js
@@ -1,4 +1,4 @@
-const SKILLS_KEY = 'db-studio:ai-skills'
+const SKILLS_KEY = 'stroke:ai-skills'
 
 /**
  * @typedef {{ id: string, name: string, description: string, content: string }} AiSkill
diff --git a/src/lib/stores/canvas-zoom.svelte.js b/src/lib/stores/canvas-zoom.svelte.js
index fbe71613..d41e12cf 100644
--- a/src/lib/stores/canvas-zoom.svelte.js
+++ b/src/lib/stores/canvas-zoom.svelte.js
@@ -1,6 +1,6 @@
 // Shared canvas-table zoom — mirrors app settings zoom only. Do NOT persist a
 // separate localStorage key; that caused the table to balloon independently of
-// the sidebar (stale db-studio:canvas-zoom from accidental pinch near resize handles).
+// the sidebar (stale stroke:canvas-zoom from accidental pinch near resize handles).
 
 export const ZOOM_MIN = 0.5
 export const ZOOM_MAX = 2.5
diff --git a/src/lib/stores/connections.js b/src/lib/stores/connections.js
index ae0f52bf..bd7a972e 100644
--- a/src/lib/stores/connections.js
+++ b/src/lib/stores/connections.js
@@ -1,5 +1,5 @@
-const STORAGE_KEY = 'db-studio:connections'
-const LAST_ID_KEY  = 'db-studio:last-connection-id'
+const STORAGE_KEY = 'stroke:connections'
+const LAST_ID_KEY  = 'stroke:last-connection-id'
 
 /**
  * @typedef {'postgres' | 'sqlite' | 'd1'} DbType
diff --git a/src/lib/stores/dashboards.js b/src/lib/stores/dashboards.js
index e8b9ae74..a2d08b1e 100644
--- a/src/lib/stores/dashboards.js
+++ b/src/lib/stores/dashboards.js
@@ -16,8 +16,8 @@ import { writable } from 'svelte/store'
  * }} Dashboard
  */
 
-const KEY = (id) => id ? `db-studio:dashboards:${id}` : 'db-studio:dashboards'
-const ACTIVE_KEY = (id) => id ? `db-studio:active-dashboard:${id}` : 'db-studio:active-dashboard'
+const KEY = (id) => id ? `stroke:dashboards:${id}` : 'stroke:dashboards'
+const ACTIVE_KEY = (id) => id ? `stroke:active-dashboard:${id}` : 'stroke:active-dashboard'
 
 // Tracks the currently active connection scope
 let _connId = ''
@@ -29,7 +29,7 @@ function loadDashboards(connectionId) {
     const specific = JSON.parse(localStorage.getItem(KEY(connectionId)) ?? 'null')
     if (Array.isArray(specific)) return specific
     // One-time migration: load from legacy global key
-    const global_ = JSON.parse(localStorage.getItem('db-studio:dashboards') ?? '[]')
+    const global_ = JSON.parse(localStorage.getItem('stroke:dashboards') ?? '[]')
     return Array.isArray(global_) ? global_ : []
   } catch { return [] }
 }
@@ -39,7 +39,7 @@ function loadActiveId(connectionId) {
   if (!connectionId) return null
   try {
     return localStorage.getItem(ACTIVE_KEY(connectionId))
-      ?? localStorage.getItem('db-studio:active-dashboard')
+      ?? localStorage.getItem('stroke:active-dashboard')
   } catch { return null }
 }
 
diff --git a/src/lib/stores/layout.js b/src/lib/stores/layout.js
index e7f87ed5..8f5be6ea 100644
--- a/src/lib/stores/layout.js
+++ b/src/lib/stores/layout.js
@@ -1,4 +1,4 @@
-const STORAGE_KEY = 'db-studio:layout'
+const STORAGE_KEY = 'stroke:layout'
 
 /** @typedef {'normal' | 'json'} InspectorView */
 
diff --git a/src/lib/stores/recent-tabs.js b/src/lib/stores/recent-tabs.js
index de60ded4..eebf0657 100644
--- a/src/lib/stores/recent-tabs.js
+++ b/src/lib/stores/recent-tabs.js
@@ -6,7 +6,7 @@ const MAX = 10
 
 /** @param {string} connectionId */
 function storageKey(connectionId) {
-  return `db-studio:recent-tabs:${connectionId}`
+  return `stroke:recent-tabs:${connectionId}`
 }
 
 /**
diff --git a/src/lib/stores/saved-charts.js b/src/lib/stores/saved-charts.js
index 333bd274..b8270925 100644
--- a/src/lib/stores/saved-charts.js
+++ b/src/lib/stores/saved-charts.js
@@ -25,8 +25,8 @@ import { writable } from 'svelte/store'
  * }} SavedChart
  */
 
-const CHARTS_KEY = (id) => id ? `db-studio:saved-charts:${id}` : 'db-studio:saved-charts'
-const GROUPS_KEY = (id) => id ? `db-studio:chart-groups:${id}` : 'db-studio:chart-groups'
+const CHARTS_KEY = (id) => id ? `stroke:saved-charts:${id}` : 'stroke:saved-charts'
+const GROUPS_KEY = (id) => id ? `stroke:chart-groups:${id}` : 'stroke:chart-groups'
 
 // Tracks the currently active connection scope
 let _connId = ''
@@ -43,7 +43,7 @@ function loadCharts(connectionId) {
     const specific = JSON.parse(localStorage.getItem(CHARTS_KEY(connectionId)) ?? 'null')
     if (Array.isArray(specific)) return specific
     // One-time migration: filter matching charts from the legacy global key
-    const global_ = JSON.parse(localStorage.getItem('db-studio:saved-charts') ?? '[]')
+    const global_ = JSON.parse(localStorage.getItem('stroke:saved-charts') ?? '[]')
     return Array.isArray(global_) ? global_.filter(c => c.connectionId === connectionId) : []
   } catch { return [] }
 }
diff --git a/src/lib/stores/saved-diagrams.js b/src/lib/stores/saved-diagrams.js
index 97811eb7..434561c9 100644
--- a/src/lib/stores/saved-diagrams.js
+++ b/src/lib/stores/saved-diagrams.js
@@ -2,7 +2,7 @@ import { writable } from 'svelte/store'
 
 /** @typedef {{ id: string, name: string, code: string, group: string, createdAt: number, updatedAt: number }} SavedDiagram */
 
-const KEY = (id) => id ? `db-studio:saved-diagrams:${id}` : 'db-studio:saved-diagrams'
+const KEY = (id) => id ? `stroke:saved-diagrams:${id}` : 'stroke:saved-diagrams'
 
 function load(connId) {
   if (!connId) return []
diff --git a/src/lib/stores/settings.js b/src/lib/stores/settings.js
index eeff6008..00f95ca0 100644
--- a/src/lib/stores/settings.js
+++ b/src/lib/stores/settings.js
@@ -8,7 +8,7 @@ import {
 } from '$lib/themes/registry.js'
 import { zoomState, ZOOM_MIN, ZOOM_MAX } from '$lib/stores/canvas-zoom.svelte.js'
 
-const STORAGE_KEY = 'db-studio:settings'
+const STORAGE_KEY = 'stroke:settings'
 
 /** @typedef {import('$lib/themes/registry.js').ThemeId} ThemeId */
 /** @typedef {{ theme: ThemeId, zoom: number, mcpAutoStart: boolean }} AppSettings */
@@ -27,8 +27,8 @@ export const DEFAULT_SETTINGS = {
 /** Reactive app theme id (synced by applySettings). */
 export const appThemeId = writable(/** @type {ThemeId} */ (DEFAULT_THEME_ID))
 
-const LAST_DARK_KEY  = 'db-studio:last-dark-theme'
-const LAST_LIGHT_KEY = 'db-studio:last-light-theme'
+const LAST_DARK_KEY  = 'stroke:last-dark-theme'
+const LAST_LIGHT_KEY = 'stroke:last-light-theme'
 
 /** @param {ThemeId} id */
 function saveLastForMode(id) {
@@ -117,7 +117,7 @@ export function applySettings(settings) {
   // renderer reads zoomState directly and repaints on change.
   // Drop the legacy per-table key — it drifted from settings.zoom and made only
   // the grid look huge/blurry while the sidebar stayed at normal scale.
-  try { localStorage.removeItem('db-studio:canvas-zoom') } catch {}
+  try { localStorage.removeItem('stroke:canvas-zoom') } catch {}
   const canvasZoom = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, zoom))
   if (zoomState.value !== canvasZoom) zoomState.value = canvasZoom
   resetWebviewZoom()
diff --git a/src/lib/stores/studio-db.js b/src/lib/stores/studio-db.js
index c6fd915f..a57310d8 100644
--- a/src/lib/stores/studio-db.js
+++ b/src/lib/stores/studio-db.js
@@ -1,6 +1,6 @@
 import { openDB } from 'idb'
 
-export const DB_NAME = 'db-studio'
+export const DB_NAME = 'stroke'
 export const DB_VERSION = 2
 
 export const STORES = {
diff --git a/src/lib/stores/table-column-widths.js b/src/lib/stores/table-column-widths.js
index 8ce83a1a..aae01e09 100644
--- a/src/lib/stores/table-column-widths.js
+++ b/src/lib/stores/table-column-widths.js
@@ -1,4 +1,4 @@
-const STORAGE_KEY = 'db-studio:column-widths'
+const STORAGE_KEY = 'stroke:column-widths'
 
 /** @type {Record<string, Record<string, number>> | null} */
 let _cache = null
diff --git a/src/lib/themes/registry.js b/src/lib/themes/registry.js
index 6a2e9928..342fcf12 100644
--- a/src/lib/themes/registry.js
+++ b/src/lib/themes/registry.js
@@ -345,7 +345,7 @@ export function shikiThemeId(id) {
 
 /** @param {ThemeId} id */
 export function monacoThemeName(id) {
-  return `db-studio-${id}`
+  return `stroke-${id}`
 }
 
 /** @param {ThemeId} id */

From 9843f8aae8300fa01409022f54527640601a12a0 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 5 Jun 2026 16:33:19 +0545
Subject: [PATCH 6/8] fix::a lot changed since

---
 .github/workflows/release.yml          | 128 +++++++++++++++++--------
 AGENT.md                               |   6 +-
 README.md                              |  40 ++++----
 packaging/aur/discerns/PKGBUILD        |   4 +-
 src-tauri/src/license.rs               |   2 +-
 src-tauri/tauri.conf.json              |   7 +-
 src/lib/components/AboutDialog.svelte  |   4 +-
 src/lib/components/LicenseGate.svelte  |   8 +-
 src/lib/components/StudioShell.svelte  |  19 +++-
 src/lib/components/TableToolbar.svelte |   7 +-
 10 files changed, 147 insertions(+), 78 deletions(-)

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 0a684b7b..40293787 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -1,4 +1,4 @@
-# Build DB Studio for Linux, Windows, and macOS and publish to GitHub Releases.
+# Build Stroke for Linux, Windows, and macOS and publish to GitHub Releases.
 #
 # Create a release:
 #   git tag v0.1.0
@@ -66,10 +66,10 @@ jobs:
           ### Install
 
           **macOS**
-          - Apple Silicon: \`db-studio_*_aarch64.dmg\`
-          - Intel Mac: \`db-studio_*_x64.dmg\`
+          - Apple Silicon: \`stroke_*_aarch64.dmg\`
+          - Intel Mac: \`stroke_*_x64.dmg\`
 
-          > **"damaged and can't be opened"?** Run once: \`xattr -cr /Applications/db-studio.app\`
+          > **"damaged and can't be opened"?** Run once: \`xattr -cr /Applications/Stroke.app\`
 
           **Linux:** \`.deb\` · \`.rpm\` · \`.AppImage\` · \`.pkg.tar.zst\` (Arch)
 
@@ -79,7 +79,7 @@ jobs:
           EOF
 
           gh release create "$TAG" \
-            --title "DB Studio $TAG" \
+            --title "Stroke $TAG" \
             --target "$SHA" \
             --notes-file /tmp/notes.md \
             $PRERELEASE
@@ -132,12 +132,64 @@ jobs:
 
       - run: npm ci
 
+      # ── macOS: set proper signing identity when cert secret is present ────────
+      - name: Configure macOS code signing
+        if: startsWith(matrix.name, 'macos')
+        env:
+          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
+        run: |
+          if [ -z "$APPLE_SIGNING_IDENTITY" ]; then
+            echo "APPLE_SIGNING_IDENTITY not set — keeping ad-hoc signing"
+          else
+            node -e "
+              const fs = require('fs');
+              const cfg = JSON.parse(fs.readFileSync('src-tauri/tauri.conf.json', 'utf8'));
+              cfg.bundle.macOS.signingIdentity = process.env.APPLE_SIGNING_IDENTITY;
+              fs.writeFileSync('src-tauri/tauri.conf.json', JSON.stringify(cfg, null, 2));
+              console.log('Signing identity set to:', process.env.APPLE_SIGNING_IDENTITY);
+            "
+          fi
+
+      # ── Windows: import PFX into cert store, patch config with thumbprint ─────
+      - name: Import Windows signing certificate
+        if: matrix.name == 'windows'
+        shell: pwsh
+        env:
+          WINDOWS_CERTIFICATE: ${{ secrets.WINDOWS_CERTIFICATE }}
+          WINDOWS_CERTIFICATE_PWD: ${{ secrets.WINDOWS_CERTIFICATE_PWD }}
+        run: |
+          if (-not $env:WINDOWS_CERTIFICATE) {
+            Write-Host "WINDOWS_CERTIFICATE not set — skipping Windows signing"
+            exit 0
+          }
+          $certBytes = [System.Convert]::FromBase64String($env:WINDOWS_CERTIFICATE)
+          $certPath  = Join-Path $env:TEMP "signing.pfx"
+          [System.IO.File]::WriteAllBytes($certPath, $certBytes)
+          $secPwd = ConvertTo-SecureString -String $env:WINDOWS_CERTIFICATE_PWD -Force -AsPlainText
+          $cert   = Import-PfxCertificate -FilePath $certPath -CertStoreLocation Cert:\CurrentUser\My -Password $secPwd
+          Remove-Item $certPath -Force
+
+          $env:WIN_CERT_THUMB = $cert.Thumbprint
+          node -e "
+            const fs = require('fs');
+            const cfg = JSON.parse(fs.readFileSync('src-tauri/tauri.conf.json', 'utf8'));
+            cfg.bundle.windows.certificateThumbprint = process.env.WIN_CERT_THUMB;
+            fs.writeFileSync('src-tauri/tauri.conf.json', JSON.stringify(cfg, null, 2));
+            console.log('Certificate thumbprint set:', process.env.WIN_CERT_THUMB);
+          "
+
       - name: Build
         run: npx tauri build ${{ matrix.args }}
         env:
           TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
           NO_STRIP: ${{ matrix.name == 'linux' && '1' || '' }}
+          # macOS code signing + notarization (Tauri auto-imports APPLE_CERTIFICATE)
+          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
+          APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
 
       # ── macOS aarch64 ───────────────────────────────────────────────────────
       - name: Upload macOS aarch64 artifacts
@@ -153,16 +205,16 @@ jobs:
           DIR="src-tauri/target/aarch64-apple-darwin/release/bundle"
 
           pushd "$DIR/macos"
-          tar czf "db-studio.app.tar.gz" "db-studio.app"
+          tar czf "Stroke.app.tar.gz" "Stroke.app"
           popd
-          npx tauri signer sign "$DIR/macos/db-studio.app.tar.gz"
+          npx tauri signer sign "$DIR/macos/Stroke.app.tar.gz"
 
-          cp "$DIR/macos/db-studio.app.tar.gz"     db-studio_aarch64.app.tar.gz
-          cp "$DIR/macos/db-studio.app.tar.gz.sig" updater.sig
+          cp "$DIR/macos/Stroke.app.tar.gz"     stroke_aarch64.app.tar.gz
+          cp "$DIR/macos/Stroke.app.tar.gz.sig" updater.sig
 
           gh release upload "$TAG" \
-            "$DIR/dmg/db-studio_${VERSION}_aarch64.dmg" \
-            db-studio_aarch64.app.tar.gz \
+            "$DIR/dmg/stroke_${VERSION}_aarch64.dmg" \
+            stroke_aarch64.app.tar.gz \
             --clobber
 
       # ── macOS x64 ───────────────────────────────────────────────────────────
@@ -179,16 +231,16 @@ jobs:
           DIR="src-tauri/target/x86_64-apple-darwin/release/bundle"
 
           pushd "$DIR/macos"
-          tar czf "db-studio.app.tar.gz" "db-studio.app"
+          tar czf "Stroke.app.tar.gz" "Stroke.app"
           popd
-          npx tauri signer sign "$DIR/macos/db-studio.app.tar.gz"
+          npx tauri signer sign "$DIR/macos/Stroke.app.tar.gz"
 
-          cp "$DIR/macos/db-studio.app.tar.gz"     db-studio_x64.app.tar.gz
-          cp "$DIR/macos/db-studio.app.tar.gz.sig" updater.sig
+          cp "$DIR/macos/Stroke.app.tar.gz"     stroke_x64.app.tar.gz
+          cp "$DIR/macos/Stroke.app.tar.gz.sig" updater.sig
 
           gh release upload "$TAG" \
-            "$DIR/dmg/db-studio_${VERSION}_x64.dmg" \
-            db-studio_x64.app.tar.gz \
+            "$DIR/dmg/stroke_${VERSION}_x64.dmg" \
+            stroke_x64.app.tar.gz \
             --clobber
 
       # ── Linux ───────────────────────────────────────────────────────────────
@@ -205,18 +257,18 @@ jobs:
           DIR="src-tauri/target/release/bundle"
 
           pushd "$DIR/appimage"
-          tar czf "db-studio_${VERSION}_amd64.AppImage.tar.gz" "db-studio_${VERSION}_amd64.AppImage"
+          tar czf "stroke_${VERSION}_amd64.AppImage.tar.gz" "stroke_${VERSION}_amd64.AppImage"
           popd
-          npx tauri signer sign "$DIR/appimage/db-studio_${VERSION}_amd64.AppImage.tar.gz"
+          npx tauri signer sign "$DIR/appimage/stroke_${VERSION}_amd64.AppImage.tar.gz"
 
-          cp "$DIR/appimage/db-studio_${VERSION}_amd64.AppImage.tar.gz"     db-studio_amd64.AppImage.tar.gz
-          cp "$DIR/appimage/db-studio_${VERSION}_amd64.AppImage.tar.gz.sig" updater.sig
+          cp "$DIR/appimage/stroke_${VERSION}_amd64.AppImage.tar.gz"     stroke_amd64.AppImage.tar.gz
+          cp "$DIR/appimage/stroke_${VERSION}_amd64.AppImage.tar.gz.sig" updater.sig
 
           gh release upload "$TAG" \
-            "$DIR/deb/db-studio_${VERSION}_amd64.deb" \
-            "$DIR/rpm/db-studio-${VERSION}-1.x86_64.rpm" \
-            "$DIR/appimage/db-studio_${VERSION}_amd64.AppImage" \
-            db-studio_amd64.AppImage.tar.gz \
+            "$DIR/deb/stroke_${VERSION}_amd64.deb" \
+            "$DIR/rpm/stroke-${VERSION}-1.x86_64.rpm" \
+            "$DIR/appimage/stroke_${VERSION}_amd64.AppImage" \
+            stroke_amd64.AppImage.tar.gz \
             --clobber
 
       # ── Windows ─────────────────────────────────────────────────────────────
@@ -232,8 +284,8 @@ jobs:
           $version = (Get-Content src-tauri/tauri.conf.json | ConvertFrom-Json).version
           $dir     = "src-tauri/target/release/bundle"
 
-          $exe = "$dir/nsis/db-studio_${version}_x64-setup.exe"
-          $zip = "$dir/nsis/db-studio_${version}_x64-setup.nsis.zip"
+          $exe = "$dir/nsis/stroke_${version}_x64-setup.exe"
+          $zip = "$dir/nsis/stroke_${version}_x64-setup.nsis.zip"
 
           # Use NoCompression (Store = method 0) — universally supported by every
           # ZIP implementation including Tauri's zip crate.
@@ -264,13 +316,13 @@ jobs:
 
           npx tauri signer sign $zip
 
-          Copy-Item $zip       "db-studio_x64-setup.nsis.zip"
+          Copy-Item $zip       "stroke_x64-setup.nsis.zip"
           Copy-Item "$zip.sig" "updater.sig"
 
           gh release upload "$env:TAG" `
-            "$dir/msi/db-studio_${version}_x64_en-US.msi" `
-            "$dir/nsis/db-studio_${version}_x64-setup.exe" `
-            "db-studio_x64-setup.nsis.zip" `
+            "$dir/msi/stroke_${version}_x64_en-US.msi" `
+            "$dir/nsis/stroke_${version}_x64-setup.exe" `
+            "stroke_x64-setup.nsis.zip" `
             --clobber
 
       - name: Save updater sig as artifact
@@ -342,7 +394,7 @@ jobs:
         run: |
           VERSION=$(node -p "require('./src-tauri/tauri.conf.json').version")
           gh release upload "$TAG" \
-            "src-tauri/target/release/bundle/pacman/db-studio-${VERSION}-1-x86_64.pkg.tar.zst" \
+            "src-tauri/target/release/bundle/pacman/stroke-${VERSION}-1-x86_64.pkg.tar.zst" \
             --clobber
 
 # ── 3. Combine signatures into latest.json ───────────────────────────────────
@@ -362,7 +414,7 @@ jobs:
           TAG: ${{ env.RELEASE_TAG }}
         run: |
           export VERSION=$(node -p "require('./src-tauri/tauri.conf.json').version")
-          export BASE="https://github.com/broisnischal/studio/releases/download/${TAG}"
+          export BASE="https://github.com/broisnischal/stroke/releases/download/${TAG}"
 
           node - <<'JSEOF'
           const fs = require('fs')
@@ -393,12 +445,12 @@ jobs:
             else console.warn(`⚠  no sig at ${sigFile} — skipping ${key}`)
           }
 
-          add('darwin-aarch64', 'sig-macos-aarch64/updater.sig', `${BASE}/db-studio_aarch64.app.tar.gz`)
-          add('darwin-x86_64',  'sig-macos-x64/updater.sig',     `${BASE}/db-studio_x64.app.tar.gz`)
-          add('linux-x86_64',   'sig-linux/updater.sig',         `${BASE}/db-studio_amd64.AppImage.tar.gz`)
-          add('windows-x86_64', 'sig-windows/updater.sig',       `${BASE}/db-studio_x64-setup.nsis.zip`)
+          add('darwin-aarch64', 'sig-macos-aarch64/updater.sig', `${BASE}/stroke_aarch64.app.tar.gz`)
+          add('darwin-x86_64',  'sig-macos-x64/updater.sig',     `${BASE}/stroke_x64.app.tar.gz`)
+          add('linux-x86_64',   'sig-linux/updater.sig',         `${BASE}/stroke_amd64.AppImage.tar.gz`)
+          add('windows-x86_64', 'sig-windows/updater.sig',       `${BASE}/stroke_x64-setup.nsis.zip`)
 
-          const notes = extractChangelog(VERSION) || `See https://github.com/broisnischal/studio/releases/tag/v${VERSION}`
+          const notes = extractChangelog(VERSION) || `See https://github.com/broisnischal/stroke/releases/tag/v${VERSION}`
 
           const out = {
             version: VERSION,
diff --git a/AGENT.md b/AGENT.md
index 1507bc59..07e63bad 100644
--- a/AGENT.md
+++ b/AGENT.md
@@ -1,10 +1,10 @@
-# AGENT.md — DB Studio
+# AGENT.md — Stroke
 
 Instructions for AI agents working in this repository. Read this file before making changes.
 
 ## Project overview
 
-**DB Studio** is a desktop database management app (Drizzle Studio–style) built with:
+**Stroke** is a desktop database management app (Drizzle Studio–style) built with:
 
 | Layer | Stack |
 |-------|--------|
@@ -175,7 +175,7 @@ Workflow: `.github/workflows/release.yml`
 | Tag push | `git tag v0.1.0 && git push origin v0.1.0` |
 | Manual | Actions → **Release** → Run workflow (set tag, e.g. `v0.1.0`) |
 
-Builds **Linux** (`.deb`, `.AppImage`) on `ubuntu-22.04` and **Windows** (`.msi`) on `windows-latest`, then uploads assets to [GitHub Releases](https://github.com/broisnischal/studio/releases).
+Builds **Linux** (`.deb`, `.AppImage`) on `ubuntu-22.04` and **Windows** (`.msi`) on `windows-latest`, then uploads assets to [GitHub Releases](https://github.com/broisnischal/stroke/releases).
 
 Local build:
 
diff --git a/README.md b/README.md
index 448a15cf..fbc30c0b 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# DB Studio
+# Stroke
 
 A desktop database client for PostgreSQL, SQLite, and Cloudflare D1. Browse tables, run SQL, edit rows inline, and connect AI tools directly to your database through a built-in MCP server.
 
@@ -10,16 +10,16 @@ Go to the [Releases](../../releases) page and grab the installer for your platfo
 
 | Platform | File |
 |----------|------|
-| macOS (Apple Silicon) | `db-studio_x.x.x_aarch64.dmg` |
-| macOS (Intel) | `db-studio_x.x.x_x64.dmg` |
-| Windows | `db-studio_x.x.x_x64-setup.exe` |
-| Linux (Debian/Ubuntu) | `db-studio_x.x.x_amd64.deb` |
-| Linux (AppImage) | `db-studio_x.x.x_amd64.AppImage` |
+| macOS (Apple Silicon) | `stroke_x.x.x_aarch64.dmg` |
+| macOS (Intel) | `stroke_x.x.x_x64.dmg` |
+| Windows | `stroke_x.x.x_x64-setup.exe` |
+| Linux (Debian/Ubuntu) | `stroke_x.x.x_amd64.deb` |
+| Linux (AppImage) | `stroke_x.x.x_amd64.AppImage` |
 
 ### macOS
 
 1. Open the `.dmg` file.
-2. Drag **db-studio** into your Applications folder.
+2. Drag **Stroke** into your Applications folder.
 3. On first launch, right-click → Open if macOS shows an unverified developer warning.
 
 ### Windows
@@ -29,15 +29,15 @@ Run the `.exe` installer and follow the prompts. No additional dependencies need
 ### Linux (Debian/Ubuntu)
 
 ```bash
-sudo dpkg -i db-studio_*_amd64.deb
+sudo dpkg -i stroke_*_amd64.deb
 ```
 
-Then launch from your application menu or run `db-studio` in a terminal.
+Then launch from your application menu or run `stroke` in a terminal.
 
 ### Linux (Arch)
 
 ```bash
-./db-studio_*_amd64.AppImage
+./stroke_*_amd64.AppImage
 ```
 
 Or build from source (see [Build from Source](#build-from-source) below).
@@ -46,7 +46,7 @@ Or build from source (see [Build from Source](#build-from-source) below).
 
 ## Connecting to a Database
 
-When you open DB Studio you'll see the connection screen. Choose your database type and fill in the details.
+When you open Stroke you'll see the connection screen. Choose your database type and fill in the details.
 
 ### PostgreSQL
 
@@ -71,7 +71,7 @@ Enter your Cloudflare **Account ID**, **Database ID**, and **API Token** from th
 
 ---
 
-Saved connections are stored locally on your machine. You can save as many connections as you like and switch between them at any time. DB Studio reopens your last-used connection automatically on the next launch.
+Saved connections are stored locally on your machine. You can save as many connections as you like and switch between them at any time. Stroke reopens your last-used connection automatically on the next launch.
 
 ---
 
@@ -100,7 +100,7 @@ Filters combine with AND logic. Sorting and filters work together.
 
 ### Inline Cell Editing
 
-Double-click any cell to edit it in place. DB Studio knows the column type:
+Double-click any cell to edit it in place. Stroke knows the column type:
 
 - Text, numbers, and booleans each get the right input
 - Enum columns show a dropdown of valid values
@@ -113,7 +113,7 @@ Changes are saved to the database immediately when you confirm.
 
 ### Insert Rows
 
-Click **Insert row** to open the insert form. Every column is listed with its data type and whether it's required. DB Studio pre-fills sensible defaults:
+Click **Insert row** to open the insert form. Every column is listed with its data type and whether it's required. Stroke pre-fills sensible defaults:
 
 - Auto-increment and identity columns are skipped automatically
 - `created_at` / `updated_at` style columns get the current timestamp
@@ -137,7 +137,7 @@ The inspector panel is resizable and its state persists between sessions.
 
 ### Foreign Key Navigation
 
-When a column is a foreign key, DB Studio detects the relationship and lets you click the cell value to jump to the referenced table with the matching filter already applied.
+When a column is a foreign key, Stroke detects the relationship and lets you click the cell value to jump to the referenced table with the matching filter already applied.
 
 ### Index Browser
 
@@ -180,11 +180,11 @@ Configure any OpenAI-compatible API (OpenAI, Mistral, Ollama, etc.) in Settings
 
 ### AI SQL Suggestions
 
-In the SQL editor, DB Studio can suggest relevant queries for the table you're viewing — common filters, joins to related tables, aggregations, and more. Click a suggestion to insert it into the editor.
+In the SQL editor, Stroke can suggest relevant queries for the table you're viewing — common filters, joins to related tables, aggregations, and more. Click a suggestion to insert it into the editor.
 
 ### MCP Server (Connect AI Tools)
 
-DB Studio includes a built-in **Model Context Protocol (MCP) server** that exposes your connected database to AI tools like Claude Desktop, Cursor, and any other MCP-compatible client.
+Stroke includes a built-in **Model Context Protocol (MCP) server** that exposes your connected database to AI tools like Claude Desktop, Cursor, and any other MCP-compatible client.
 
 1. Open **Settings → MCP Server**
 2. Click **Start** — the server starts on port `39847` (or the next available port)
@@ -211,8 +211,8 @@ The server uses bearer token authentication. The token is stable across restarts
 You'll need [Node.js](https://nodejs.org) (v18+) and the [Rust toolchain](https://rustup.rs).
 
 ```bash
-git clone https://github.com/broisnischal/studio
-cd studio
+git clone https://github.com/broisnischal/stroke
+cd stroke
 npm install
 npm run tauri dev
 ```
@@ -239,4 +239,4 @@ npm run tauri:build:arch
 
 ## Reporting Issues
 
-Found a bug or want to request a feature? Open an issue at [github.com/broisnischal/studio/issues](https://github.com/broisnischal/studio/issues).
+Found a bug or want to request a feature? Open an issue at [github.com/broisnischal/stroke/issues](https://github.com/broisnischal/stroke/issues).
diff --git a/packaging/aur/discerns/PKGBUILD b/packaging/aur/discerns/PKGBUILD
index fe56a54d..0b6411b3 100644
--- a/packaging/aur/discerns/PKGBUILD
+++ b/packaging/aur/discerns/PKGBUILD
@@ -3,12 +3,12 @@ pkgver=0.1.22
 pkgrel=4
 pkgdesc="Cross-database desktop studio built with Tauri"
 arch=('x86_64')
-url="https://github.com/broisnischal/studio"
+url="https://github.com/broisnischal/stroke"
 license=('custom')
 depends=('fuse2')
 options=(!strip)
 
-source=("${pkgname}-${pkgver}.AppImage::https://github.com/broisnischal/studio/releases/download/v${pkgver}/db-studio_${pkgver}_amd64.AppImage")
+source=("${pkgname}-${pkgver}.AppImage::https://github.com/broisnischal/stroke/releases/download/v${pkgver}/stroke_${pkgver}_amd64.AppImage")
 sha256sums=('7214b7bd75519a191898b7f124c4667f358bef61b65f6b43b34baa06e51cf10d')
 
 package() {
diff --git a/src-tauri/src/license.rs b/src-tauri/src/license.rs
index aeef2361..c7592dea 100644
--- a/src-tauri/src/license.rs
+++ b/src-tauri/src/license.rs
@@ -39,7 +39,7 @@ const TRIAL_FILE: &str = ".trial";
 // Note: revocation only takes effect after the user installs the update.
 // For immediate remote revocation you'll need the server endpoint (coming later).
 const REVOKED_KEY_HASHES: &[&str] = &[
-    "ed13c9edc3bea01c6f82a415a10b21f85b85f829004f473cb78e8cd10056059f", // nischal.dahal@aitc.ai pro (revoked 2026-06-05)
+    "ed13c9edc3bea01c6f82a415a10b21f85b85f829004f473cb78e8cd10056059f", // revoked 2026-06-05 (case: LIC-REV-2026-06-05-01)
 ];
 
 // ── Data types ────────────────────────────────────────────────────────────────
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 5dd65d8d..b1e24252 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -19,7 +19,7 @@
     "updater": {
       "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDlGMjlCQUIyQjA3Qjg4MjYKUldRbWlIdXdzcm9wbnlqVXRHc3lwWHRWdHVkdmFoMjZhM1lQZ3BnM1Ird0hlYXBxZWo5b1dLV3QK",
       "endpoints": [
-        "https://github.com/broisnischal/studio/releases/latest/download/latest.json"
+        "https://github.com/broisnischal/stroke/releases/latest/download/latest.json"
       ],
       "dialog": false
     }
@@ -37,6 +37,11 @@
     "macOS": {
       "signingIdentity": "-"
     },
+    "windows": {
+      "certificateThumbprint": null,
+      "digestAlgorithm": "sha256",
+      "timestampUrl": "http://timestamp.digicert.com"
+    },
     "android": {
       "debugApplicationIdSuffix": ".debug"
     }
diff --git a/src/lib/components/AboutDialog.svelte b/src/lib/components/AboutDialog.svelte
index 06e2108c..293b91a9 100644
--- a/src/lib/components/AboutDialog.svelte
+++ b/src/lib/components/AboutDialog.svelte
@@ -186,7 +186,7 @@
       <p class="text-[10px] text-muted-foreground/50">© 2025 Stroke</p>
       <div class="flex items-center gap-3">
         <a
-          href="https://github.com/broisnischal/db-studio"
+          href="https://github.com/broisnischal/stroke"
           target="_blank"
           rel="noopener noreferrer"
           class="inline-flex items-center gap-1 text-[11px] text-muted-foreground/60 transition-colors hover:text-foreground"
@@ -198,7 +198,7 @@
           GitHub
         </a>
         <a
-          href="https://dbstudio.app"
+          href="https://stroke.app"
           target="_blank"
           rel="noopener noreferrer"
           class="inline-flex items-center gap-1 text-[11px] text-muted-foreground/60 transition-colors hover:text-foreground"
diff --git a/src/lib/components/LicenseGate.svelte b/src/lib/components/LicenseGate.svelte
index 06f3205e..af2c518a 100644
--- a/src/lib/components/LicenseGate.svelte
+++ b/src/lib/components/LicenseGate.svelte
@@ -92,12 +92,12 @@
       <p class="text-center text-xs text-muted-foreground/50">
         No license yet? &nbsp;
         <a
-          href="https://dbstudio.app"
+          href="https://stroke.app"
           target="_blank"
           rel="noopener noreferrer"
           class="font-medium text-primary/80 underline-offset-2 transition-opacity hover:opacity-70 hover:underline"
         >
-          Get one at dbstudio.app →
+          Get one at stroke.app →
         </a>
       </p>
     </div>
@@ -166,8 +166,8 @@
         <div class="border-t border-border/60 px-5 py-3">
           <p class="text-xs text-muted-foreground/50">
             No license?
-            <a href="https://dbstudio.app" target="_blank" rel="noopener noreferrer"
-               class="text-primary/70 underline-offset-2 hover:underline">dbstudio.app →</a>
+            <a href="https://stroke.app" target="_blank" rel="noopener noreferrer"
+               class="text-primary/70 underline-offset-2 hover:underline">stroke.app →</a>
           </p>
         </div>
       </Dialog.Content>
diff --git a/src/lib/components/StudioShell.svelte b/src/lib/components/StudioShell.svelte
index 7f751143..91ffeba6 100644
--- a/src/lib/components/StudioShell.svelte
+++ b/src/lib/components/StudioShell.svelte
@@ -333,18 +333,27 @@
   const incomingForeignKeys = $derived(
     (activeSchema && activeTable) ? (incomingFkCache.get(`${activeSchema}.${activeTable}`) ?? []) : []
   )
-  /** Virtual rel column labels for the toolbar columns dropdown. Mirrors DataTable's virtualRelCols. */
+  /** Virtual rel column labels for the toolbar columns dropdown.
+   *  Must enumerate ALL incoming FK tables — no cap — so every rel column
+   *  the DataTable can ever render is always reachable in the show/hide panel.
+   *  (DataTable caps visible columns at MAX_VIRTUAL_COLS=5 but fills that
+   *   quota from whatever isn't hidden, so capping here makes it impossible
+   *   to hide the "overflow" tables that get promoted into view.) */
   const virtualRelColumnsForToolbar = $derived.by(() => {
     const seen = new Set()
     const result = []
     for (const fk of incomingForeignKeys) {
-      if (seen.has(fk.fromTable)) continue
-      seen.add(fk.fromTable)
-      result.push({ label: (fk.fromSchema && fk.fromSchema !== activeSchema) ? `${fk.fromSchema}.${fk.fromTable}` : fk.fromTable })
-      if (result.length >= 5) break
+      const label =
+        (fk.fromSchema && fk.fromSchema !== activeSchema)
+          ? `${fk.fromSchema}.${fk.fromTable}`
+          : fk.fromTable
+      if (seen.has(label)) continue
+      seen.add(label)
+      result.push({ label })
     }
     return result
   })
+  
   let rows = $state([])
   let savingCell = $state(false)
   let deletingRows = $state(false)
diff --git a/src/lib/components/TableToolbar.svelte b/src/lib/components/TableToolbar.svelte
index 90636490..96b5adc5 100644
--- a/src/lib/components/TableToolbar.svelte
+++ b/src/lib/components/TableToolbar.svelte
@@ -527,7 +527,10 @@
                     showAllColumns();
                   } else {
                     onhiddencolumnschange(
-                      new Set(columns.slice(1).map((c) => c.name)),
+                      new Set([
+                        ...columns.slice(1).map((c) => c.name),
+                        ...virtualRelColumns.map((vc) => `__vrel:${vc.label}`),
+                      ]),
                     );
                   }
                 }}
@@ -574,7 +577,7 @@
                       <Link2 class="size-3 shrink-0 text-primary/60" />
                     {/if}
                     <span class={cn("truncate", hidden && "text-muted-foreground")}>{vc.label}</span>
-                    <span class="ml-auto shrink-0 text-ui-2xs text-muted-foreground/35">rel</span>
+                    <span class={cn("ml-auto shrink-0 text-ui-2xs", hidden ? "text-muted-foreground/20" : "text-muted-foreground/35")}>rel</span>
                   </button>
                 {/each}
               {/if}

From 7a8aeb00aaebcae0f68a45cb12f6e2b85801b310 Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 5 Jun 2026 16:36:55 +0545
Subject: [PATCH 7/8] fix::a lot changed since

---
 .github/workflows/auto-release.yml | 111 +++++++++++++++++++++++++++++
 1 file changed, 111 insertions(+)
 create mode 100644 .github/workflows/auto-release.yml

diff --git a/.github/workflows/auto-release.yml b/.github/workflows/auto-release.yml
new file mode 100644
index 00000000..3c3982f1
--- /dev/null
+++ b/.github/workflows/auto-release.yml
@@ -0,0 +1,111 @@
+# Triggered when a PR is merged into master.
+#
+# Label the PR with one of:
+#   release:patch  →  0.0.x  (bug fixes)
+#   release:minor  →  0.x.0  (new features, backwards-compatible)
+#   release:major  →  x.0.0  (breaking changes)
+#
+# The workflow will:
+#   1. Bump the version in tauri.conf.json + package.json
+#   2. Commit the bump directly to master
+#   3. Push a vX.Y.Z tag → triggers release.yml to build and publish
+
+name: Auto Release
+
+on:
+  pull_request:
+    types: [closed]
+    branches: [master]
+
+permissions:
+  contents: write
+
+jobs:
+  auto-release:
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          # Fetch full history so the version-bump commit can be pushed
+          fetch-depth: 0
+          # Use the default GITHUB_TOKEN — requires "contents: write" above.
+          # If master has branch protection that blocks bot pushes, replace
+          # with a PAT stored in secrets.RELEASE_TOKEN.
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      # ── 1. Determine bump type from PR labels ─────────────────────────────
+      - name: Resolve bump type
+        id: bump
+        run: |
+          LABELS='${{ toJson(github.event.pull_request.labels.*.name) }}'
+          echo "PR labels: $LABELS"
+
+          if   echo "$LABELS" | grep -q '"release:major"'; then echo "type=major" >> "$GITHUB_OUTPUT"
+          elif echo "$LABELS" | grep -q '"release:minor"'; then echo "type=minor" >> "$GITHUB_OUTPUT"
+          elif echo "$LABELS" | grep -q '"release:patch"'; then echo "type=patch" >> "$GITHUB_OUTPUT"
+          else
+            echo "type=skip" >> "$GITHUB_OUTPUT"
+            echo "No release:* label found — skipping release."
+          fi
+
+      # ── 2. Bump version in tauri.conf.json + package.json ─────────────────
+      - name: Bump version
+        if: steps.bump.outputs.type != 'skip'
+        id: version
+        env:
+          BUMP_TYPE: ${{ steps.bump.outputs.type }}
+        run: |
+          node - <<'EOF'
+          const fs   = require('fs')
+          const bump = process.env.BUMP_TYPE
+
+          // ── tauri.conf.json ──────────────────────────────────────────────
+          const cfgPath = 'src-tauri/tauri.conf.json'
+          const cfg     = JSON.parse(fs.readFileSync(cfgPath, 'utf8'))
+          const [maj, min, pat] = cfg.version.split('.').map(Number)
+
+          const next =
+            bump === 'major' ? `${maj + 1}.0.0` :
+            bump === 'minor' ? `${maj}.${min + 1}.0` :
+                               `${maj}.${min}.${pat + 1}`
+
+          cfg.version = next
+          fs.writeFileSync(cfgPath, JSON.stringify(cfg, null, 2) + '\n')
+          console.log(`tauri.conf.json: ${cfg.version.split('.').slice(0,-1).join('.')+'.'+pat} → ${next}`)
+
+          // ── package.json ─────────────────────────────────────────────────
+          const pkgPath = 'package.json'
+          const pkg     = JSON.parse(fs.readFileSync(pkgPath, 'utf8'))
+          pkg.version   = next
+          fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n')
+          console.log(`package.json: bumped to ${next}`)
+
+          // ── Expose to subsequent steps ───────────────────────────────────
+          fs.appendFileSync(process.env.GITHUB_OUTPUT, `new_version=${next}\n`)
+          EOF
+
+      # ── 3. Commit bump, tag, and push ─────────────────────────────────────
+      - name: Commit and tag
+        if: steps.bump.outputs.type != 'skip'
+        env:
+          NEW_TAG: v${{ steps.version.outputs.new_version }}
+        run: |
+          git config user.name  "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+
+          git add src-tauri/tauri.conf.json package.json
+          git commit -m "chore: bump version to ${{ steps.version.outputs.new_version }}"
+
+          git tag "$NEW_TAG"
+
+          # Push commit + tag together; the tag push triggers release.yml
+          git push origin master
+          git push origin "$NEW_TAG"
+
+          echo "✅ Tagged $NEW_TAG — release.yml will now build and publish."

From 3537a7017deed271087b1b0069560a065aae884f Mon Sep 17 00:00:00 2001
From: broisnischal <info@nischal-dahal.com.np>
Date: Fri, 5 Jun 2026 17:10:49 +0545
Subject: [PATCH 8/8] fix::a lot changed since

---
 .changeset/README.md                 |  37 ++++
 .changeset/improvements-and-fixes.md |  17 ++
 .github/workflows/auto-release.yml   | 114 ++++++++++---
 .github/workflows/release.yml        |  67 +-------
 .gitignore                           |   5 +
 README.md                            | 244 ++++++++-------------------
 src-tauri/tauri.conf.json            |   2 +-
 7 files changed, 230 insertions(+), 256 deletions(-)
 create mode 100644 .changeset/README.md
 create mode 100644 .changeset/improvements-and-fixes.md

diff --git a/.changeset/README.md b/.changeset/README.md
new file mode 100644
index 00000000..edee078c
--- /dev/null
+++ b/.changeset/README.md
@@ -0,0 +1,37 @@
+# Changesets
+
+Add a `.md` file here in any PR that has user-visible changes.
+Name it anything — `my-feature.md`, `fix-datatable.md`, etc.
+
+When the PR is merged with a `release:*` label, `auto-release.yml`
+folds all changeset files into `CHANGELOG.md` under the new version
+and deletes the files.
+
+## Format
+
+Use the same headings as CHANGELOG.md:
+
+```markdown
+### New Features
+
+#### Canvas Table
+- **Feature name** — What it does and why it's useful
+
+#### SQL Editor
+- **Another feature** — Description
+
+### Bug Fixes
+- Fixed something that was broken
+
+### Changes
+- Removed or changed behaviour
+```
+
+Supported top-level headings (case-insensitive):
+- `### New Features`  — shows as ✨ New Features in the app
+- `### Bug Fixes`     — shows as 🐛 Bug Fixes
+- `### Changes`       — shows as 🔧 Improvements
+
+Sub-sections (`####`) are optional but group items nicely in the release notes page.
+
+If a PR has no user-visible changes (docs, CI, refactors), skip the changeset file.
diff --git a/.changeset/improvements-and-fixes.md b/.changeset/improvements-and-fixes.md
new file mode 100644
index 00000000..a73c070f
--- /dev/null
+++ b/.changeset/improvements-and-fixes.md
@@ -0,0 +1,17 @@
+### New Features
+
+#### Release Pipeline
+
+- **In-app release notes** — the update dialog now shows a structured release notes page with ✨ New Features, 🐛 Bug Fixes, and 🔧 Improvements sections parsed from the changelog
+- **Code signing** — builds are now signed on macOS (Developer ID + notarization) and Windows (certificate thumbprint via cert store) in CI
+
+### Bug Fixes
+- Fixed rel columns remaining visible in the canvas after being hidden from the columns panel — the toolbar was capped at showing 5 rel entries, so hiding all 5 caused DataTable to promote the next batch of FK tables into view with no way to hide them
+- Fixed the `rel` badge not dimming visually when a relationship column is toggled to hidden in the columns panel
+- Fixed the "Hide all" button in the columns panel not including relationship columns — clicking Hide now hides both regular and rel columns together
+
+### Changes
+- Renamed app references from **DB Studio** to **Stroke** across all files, workflows, and documentation
+- Updated domain from `dbstudio.app` to `stroke.app` in license gate and about dialog
+- Updated GitHub repo references from `broisnischal/studio` to `broisnischal/stroke` in updater endpoint, release workflow, and README
+- Updated macOS bundle artifact name from `db-studio.app` to `Stroke.app` and all installer filenames from `db-studio_*` to `stroke_*` to match the `productName` in tauri config
diff --git a/.github/workflows/auto-release.yml b/.github/workflows/auto-release.yml
index 3c3982f1..11c08d88 100644
--- a/.github/workflows/auto-release.yml
+++ b/.github/workflows/auto-release.yml
@@ -7,8 +7,9 @@
 #
 # The workflow will:
 #   1. Bump the version in tauri.conf.json + package.json
-#   2. Commit the bump directly to master
-#   3. Push a vX.Y.Z tag → triggers release.yml to build and publish
+#   2. Fold .changeset/*.md files into CHANGELOG.md under the new version
+#   3. Commit the bump + changelog to master
+#   4. Push tag vX.Y.Z  →  triggers release.yml to build and publish
 
 name: Auto Release
 
@@ -28,11 +29,9 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          # Fetch full history so the version-bump commit can be pushed
           fetch-depth: 0
-          # Use the default GITHUB_TOKEN — requires "contents: write" above.
-          # If master has branch protection that blocks bot pushes, replace
-          # with a PAT stored in secrets.RELEASE_TOKEN.
+          # If master has branch protection that blocks the default bot token,
+          # replace with: token: ${{ secrets.RELEASE_TOKEN }}
           token: ${{ secrets.GITHUB_TOKEN }}
 
       - uses: actions/setup-node@v4
@@ -51,21 +50,24 @@ jobs:
           elif echo "$LABELS" | grep -q '"release:patch"'; then echo "type=patch" >> "$GITHUB_OUTPUT"
           else
             echo "type=skip" >> "$GITHUB_OUTPUT"
-            echo "No release:* label found — skipping release."
+            echo "No release:* label — skipping release."
           fi
 
-      # ── 2. Bump version in tauri.conf.json + package.json ─────────────────
-      - name: Bump version
+      # ── 2. Bump versions + fold changesets into CHANGELOG.md ──────────────
+      - name: Bump version and update changelog
         if: steps.bump.outputs.type != 'skip'
         id: version
         env:
           BUMP_TYPE: ${{ steps.bump.outputs.type }}
+          PR_TITLE: ${{ github.event.pull_request.title }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
         run: |
           node - <<'EOF'
           const fs   = require('fs')
+          const path = require('path')
           const bump = process.env.BUMP_TYPE
 
-          // ── tauri.conf.json ──────────────────────────────────────────────
+          // ── Compute new version ──────────────────────────────────────────
           const cfgPath = 'src-tauri/tauri.conf.json'
           const cfg     = JSON.parse(fs.readFileSync(cfgPath, 'utf8'))
           const [maj, min, pat] = cfg.version.split('.').map(Number)
@@ -75,22 +77,96 @@ jobs:
             bump === 'minor' ? `${maj}.${min + 1}.0` :
                                `${maj}.${min}.${pat + 1}`
 
+          // ── Update tauri.conf.json ───────────────────────────────────────
           cfg.version = next
           fs.writeFileSync(cfgPath, JSON.stringify(cfg, null, 2) + '\n')
-          console.log(`tauri.conf.json: ${cfg.version.split('.').slice(0,-1).join('.')+'.'+pat} → ${next}`)
 
-          // ── package.json ─────────────────────────────────────────────────
+          // ── Update package.json ──────────────────────────────────────────
           const pkgPath = 'package.json'
           const pkg     = JSON.parse(fs.readFileSync(pkgPath, 'utf8'))
           pkg.version   = next
           fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n')
-          console.log(`package.json: bumped to ${next}`)
 
-          // ── Expose to subsequent steps ───────────────────────────────────
+          // ── Collect .changeset/*.md files ────────────────────────────────
+          const csDir = '.changeset'
+          const files = fs.existsSync(csDir)
+            ? fs.readdirSync(csDir).filter(f => f.endsWith('.md') && f !== 'README.md')
+            : []
+
+          // sections: { 'New Features': { '#### Canvas Table': ['- item'] } }
+          /** @type {Record<string, Record<string, string[]>>} */
+          const sections = {}
+
+          for (const file of files) {
+            const content = fs.readFileSync(path.join(csDir, file), 'utf8')
+            let h3 = null
+            let h4 = null
+
+            for (const line of content.split('\n')) {
+              const t = line.trim()
+              if (t.startsWith('### ')) {
+                h3 = t.slice(4).trim()
+                if (!sections[h3]) sections[h3] = {}
+                h4 = null
+              } else if (t.startsWith('#### ')) {
+                h4 = t   // keep full "#### Foo"
+                if (h3 && !sections[h3][h4]) sections[h3][h4] = []
+              } else if (/^[-*]\s/.test(t) && h3) {
+                const key = h4 ?? '__top__'
+                if (!sections[h3][key]) sections[h3][key] = []
+                sections[h3][key].push(t)
+              }
+            }
+          }
+
+          // ── Build the new CHANGELOG entry ────────────────────────────────
+          const today    = new Date().toISOString().slice(0, 10)
+          const order    = ['New Features', 'Bug Fixes', 'Changes']
+          const allKeys  = [...new Set([...order, ...Object.keys(sections)])]
+          let entry      = `## [${next}] - ${today}\n`
+          let hasContent = false
+
+          for (const heading of allKeys) {
+            if (!sections[heading] || Object.keys(sections[heading]).length === 0) continue
+            hasContent = true
+            entry += `\n### ${heading}\n`
+
+            // Top-level bullets (no sub-section)
+            const top = sections[heading]['__top__'] ?? []
+            for (const item of top) entry += `${item}\n`
+
+            // Sub-sections
+            for (const [sub, items] of Object.entries(sections[heading])) {
+              if (sub === '__top__') continue
+              entry += `\n${sub}\n`
+              for (const item of items) entry += `${item}\n`
+            }
+          }
+
+          if (!hasContent) {
+            // No changeset files — generate a minimal entry from PR title
+            const pr = process.env.PR_TITLE || 'No changelog provided'
+            const num = process.env.PR_NUMBER
+            entry += `\n### Changes\n- ${pr}${num ? ` (#${num})` : ''}\n`
+          }
+
+          // ── Inject at top of CHANGELOG.md (after the "---" separator) ───
+          const clPath = 'CHANGELOG.md'
+          const cl     = fs.existsSync(clPath) ? fs.readFileSync(clPath, 'utf8') : '# Changelog\n\n---\n'
+          const sep    = '---\n'
+          const idx    = cl.indexOf(sep)
+          const before = idx !== -1 ? cl.slice(0, idx + sep.length) : cl
+          const after  = idx !== -1 ? cl.slice(idx + sep.length)    : ''
+          fs.writeFileSync(clPath, `${before}\n${entry}\n${after}`)
+
+          // ── Delete consumed changeset files ──────────────────────────────
+          for (const file of files) fs.unlinkSync(path.join(csDir, file))
+
+          console.log(`v${next} — merged ${files.length} changeset(s)`)
           fs.appendFileSync(process.env.GITHUB_OUTPUT, `new_version=${next}\n`)
           EOF
 
-      # ── 3. Commit bump, tag, and push ─────────────────────────────────────
+      # ── 3. Commit everything and push the release tag ─────────────────────
       - name: Commit and tag
         if: steps.bump.outputs.type != 'skip'
         env:
@@ -99,13 +175,11 @@ jobs:
           git config user.name  "github-actions[bot]"
           git config user.email "github-actions[bot]@users.noreply.github.com"
 
-          git add src-tauri/tauri.conf.json package.json
-          git commit -m "chore: bump version to ${{ steps.version.outputs.new_version }}"
+          git add src-tauri/tauri.conf.json package.json CHANGELOG.md .changeset/
+          git commit -m "chore: release ${{ steps.version.outputs.new_version }}"
 
           git tag "$NEW_TAG"
-
-          # Push commit + tag together; the tag push triggers release.yml
           git push origin master
           git push origin "$NEW_TAG"
 
-          echo "✅ Tagged $NEW_TAG — release.yml will now build and publish."
+          echo "✅ $NEW_TAG pushed — release.yml will now build and publish."
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 40293787..62d47074 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -71,7 +71,7 @@ jobs:
 
           > **"damaged and can't be opened"?** Run once: \`xattr -cr /Applications/Stroke.app\`
 
-          **Linux:** \`.deb\` · \`.rpm\` · \`.AppImage\` · \`.pkg.tar.zst\` (Arch)
+          **Linux:** \`.deb\` · \`.rpm\` · \`.AppImage\`
 
           **Windows:** \`.exe\` NSIS setup (recommended) · \`.msi\`
 
@@ -332,71 +332,6 @@ jobs:
           path: updater.sig
           if-no-files-found: warn
 
-  build-arch:
-    needs: create-release
-    runs-on: ubuntu-latest
-    name: build-linux-arch
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 22
-          cache: npm
-
-      - run: npm ci
-
-      - name: Build pacman package inside Arch container
-        env:
-          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
-          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
-        run: |
-          docker run --rm \
-            --volume "$GITHUB_WORKSPACE:/workspace" \
-            --workdir /workspace \
-            --env TAURI_SIGNING_PRIVATE_KEY \
-            --env TAURI_SIGNING_PRIVATE_KEY_PASSWORD \
-            --env NO_STRIP=1 \
-            archlinux/archlinux:latest \
-            bash -uec '
-              # Refresh package database and install build dependencies
-              pacman -Syu --noconfirm
-              pacman -S --noconfirm --needed \
-                base-devel \
-                nodejs \
-                npm \
-                rustup \
-                webkit2gtk-4.1 \
-                libayatana-appindicator \
-                librsvg \
-                patchelf
-
-              # makepkg refuses to run as root; patch the check — safe in CI containers.
-              sed -i "s/if (( EUID == 0 ))/if (( 0 ))/" /usr/bin/makepkg
-
-              # Set up stable Rust toolchain.
-              # The Arch rustup package does not create ~/.cargo/env (that is only
-              # produced by the rustup.rs installer script).  Export the bin path directly.
-              rustup toolchain install stable --no-self-update
-              rustup default stable
-              export PATH="$HOME/.cargo/bin:$PATH"
-
-              # node_modules were already installed on the host via "npm ci";
-              # the workspace is bind-mounted so they are available here.
-              npx tauri build --bundles pacman
-            '
-
-      - name: Upload pacman artifact
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          TAG: ${{ env.RELEASE_TAG }}
-        run: |
-          VERSION=$(node -p "require('./src-tauri/tauri.conf.json').version")
-          gh release upload "$TAG" \
-            "src-tauri/target/release/bundle/pacman/stroke-${VERSION}-1-x86_64.pkg.tar.zst" \
-            --clobber
-
 # ── 3. Combine signatures into latest.json ───────────────────────────────────
   publish-updater-json:
     needs: build
diff --git a/.gitignore b/.gitignore
index c5027684..cd745596 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,3 +29,8 @@ packaging/aur/discerns/src/
 packaging/aur/discerns/pkg/
 packaging/aur/discerns/*.pkg.tar.zst
 packaging/aur/discerns/*.tar.zstlogs/
+
+# Local secrets — never commit
+.env
+.env.local
+.env.*.local
diff --git a/README.md b/README.md
index fbc30c0b..578fde83 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,52 @@
+<div align="center">
+
 # Stroke
 
-A desktop database client for PostgreSQL, SQLite, and Cloudflare D1. Browse tables, run SQL, edit rows inline, and connect AI tools directly to your database through a built-in MCP server.
+**A fast, modern desktop database client.**
+
+Connect to PostgreSQL, MySQL, SQLite, Turso/LibSQL, and Cloudflare D1 — browse schemas, edit data inline, write SQL, visualize, and let AI tools talk to your database through a built-in MCP server.
+
+[Download](#install) · [Features](#features) · [Build from source](#build-from-source) · [Website](https://stroke.app)
+
+</div>
+
+---
+
+## Supported databases
+
+| Database | Notes |
+|----------|-------|
+| **PostgreSQL** | Full schema, enums, sequences, triggers, indexes |
+| **MySQL** | Standard host/port connections |
+| **SQLite** | Local file or `:memory:` |
+| **Turso / LibSQL** | Serverless SQLite at the edge |
+| **Cloudflare D1** | Connect via OAuth or API token |
+
+---
+
+## Features
+
+- **Schema explorer** — tables, views, materialized views, and foreign tables with live row counts, plus an index browser.
+- **Data grid** — paginated browsing, resizable columns (saved per table), column show/hide, multi-column sort, full-text search, and a visual filter builder.
+- **Inline editing** — type-aware editors for text, numbers, booleans, enums, dates, UUIDs, and JSON. Insert and delete rows with smart defaults.
+- **Row inspector** — view any row in formatted, JSON, or preview mode.
+- **Foreign keys** — click a value to jump to the referenced table with the filter applied.
+- **SQL console** — Monaco editor with syntax highlighting, schema-aware autocomplete, formatting, execution time, and CSV/JSON export.
+- **Query history & saved queries** — every query is saved automatically; bookmark the ones you keep.
+- **Schema diagrams** — auto-generated ERDs of your tables and relationships.
+- **Charts & dashboards** — turn query results into charts and pin them to a dashboard.
+- **ORM runner** — run and preview ORM-style queries.
+- **Docker launch** — spin up a local Postgres or MySQL container in one click.
+- **Backup & restore** — export and import your data.
+- **AI chat** — an assistant with direct access to your database that runs queries, explains schemas, generates SQL, and renders diagrams (works with any OpenAI-compatible API).
+- **MCP server** — expose your database to Claude, Cursor, and other MCP clients (see below).
+- **Command palette** — `Cmd/Ctrl+K` to jump anywhere instantly.
 
 ---
 
-## Download
+## Install
 
-Go to the [Releases](../../releases) page and grab the installer for your platform:
+Grab the installer for your platform from the [Releases](https://github.com/broisnischal/stroke/releases) page.
 
 | Platform | File |
 |----------|------|
@@ -16,183 +56,53 @@ Go to the [Releases](../../releases) page and grab the installer for your platfo
 | Linux (Debian/Ubuntu) | `stroke_x.x.x_amd64.deb` |
 | Linux (AppImage) | `stroke_x.x.x_amd64.AppImage` |
 
-### macOS
-
-1. Open the `.dmg` file.
-2. Drag **Stroke** into your Applications folder.
-3. On first launch, right-click → Open if macOS shows an unverified developer warning.
+**macOS** — open the `.dmg`, drag **Stroke** to Applications. On first launch, right-click → Open if you see an unverified developer warning.
 
-### Windows
+**Windows** — run the `.exe` installer and follow the prompts.
 
-Run the `.exe` installer and follow the prompts. No additional dependencies needed.
-
-### Linux (Debian/Ubuntu)
+**Linux (Debian/Ubuntu)**
 
 ```bash
 sudo dpkg -i stroke_*_amd64.deb
 ```
 
-Then launch from your application menu or run `stroke` in a terminal.
-
-### Linux (Arch)
+**Linux (AppImage)**
 
 ```bash
+chmod +x stroke_*_amd64.AppImage
 ./stroke_*_amd64.AppImage
 ```
 
-Or build from source (see [Build from Source](#build-from-source) below).
-
 ---
 
-## Connecting to a Database
-
-When you open Stroke you'll see the connection screen. Choose your database type and fill in the details.
+## Connecting
 
-### PostgreSQL
+Pick a database type on the connection screen and fill in the details. Hit **Test connection** to verify, then **Connect**.
 
-| Field | Default |
-|-------|---------|
-| Host | `127.0.0.1` |
-| Port | `5432` |
-| Database | `postgres` |
-| User | `postgres` |
-| Password | _(your password)_ |
-| SSL | off |
+- **PostgreSQL / MySQL** — host, port, database, user, password (optional SSL). You can also paste a full connection string and click **Parse**.
+- **SQLite** — point to a `.db`/`.sqlite` file, or use an in-memory database.
+- **Turso / LibSQL** — enter the database URL and (optionally) an auth token.
+- **Cloudflare D1** — sign in with Cloudflare, or enter Account ID, Database ID, and an API token manually.
 
-Click **Test Connection** to verify before saving.
-
-### SQLite
-
-Enter the file path to your `.db` or `.sqlite` file. Use `:memory:` for an in-memory database.
-
-### Cloudflare D1
-
-Enter your Cloudflare **Account ID**, **Database ID**, and **API Token** from the Cloudflare dashboard.
+Connections are saved locally, and Stroke reopens your last one on launch.
 
 ---
 
-Saved connections are stored locally on your machine. You can save as many connections as you like and switch between them at any time. Stroke reopens your last-used connection automatically on the next launch.
-
----
-
-## Features
-
-### Schema Explorer
-
-The left sidebar lists every schema in your database. Expand a schema to see all its tables, views, materialized views, and foreign tables — each showing a live row count. Use the search box to filter by name, or press **Cmd/Ctrl+K** to open the command palette and jump to any table instantly.
-
-### Table Data Grid
-
-Click any table to open a paginated data grid. You can:
-
-- Page through rows in steps of 25, 50, 100, 250, or up to 1,000 rows per page
-- See total row count and current page position
-- Resize columns by dragging their headers — widths are saved per table
-- Hide or show individual columns from the toolbar
-- Sort by any column (ascending or descending) by clicking its header
-
-### Filtering & Search
-
-- **Search bar** — searches across all columns using a case-insensitive match
-- **Filter builder** — add one or more column filters with operators: `equals`, `not equal`, `contains`, `does not contain`, `starts with`, `ends with`, `greater than`, `greater or equal`, `less than`, `less or equal`, `is null`, `is not null`
-
-Filters combine with AND logic. Sorting and filters work together.
-
-### Inline Cell Editing
-
-Double-click any cell to edit it in place. Stroke knows the column type:
+## AI & MCP server
 
-- Text, numbers, and booleans each get the right input
-- Enum columns show a dropdown of valid values
-- Timestamp and date columns use a date/time picker
-- UUID columns can be edited or regenerated
-- JSON/JSONB columns are editable as text
-- Binary (bytea) columns are display-only
+Configure any OpenAI-compatible provider (OpenAI, Mistral, Ollama, …) in **Settings** with a base URL, model, and API key to enable AI chat and SQL suggestions.
 
-Changes are saved to the database immediately when you confirm.
+To connect external AI tools, Stroke ships a built-in **Model Context Protocol** server:
 
-### Insert Rows
+1. Open **Settings → MCP Server**.
+2. Click **Start**.
+3. Copy the one-click config for Claude or Cursor into your tool's config.
 
-Click **Insert row** to open the insert form. Every column is listed with its data type and whether it's required. Stroke pre-fills sensible defaults:
+The server uses a stable bearer token, so you only configure it once.
 
-- Auto-increment and identity columns are skipped automatically
-- `created_at` / `updated_at` style columns get the current timestamp
-- UUID and CUID ID columns get a generated value
-- Enum columns show a dropdown
-- All NOT NULL columns with no default are marked as required
-
-### Delete Rows
-
-Select one or more rows using the checkboxes on the left, then click **Delete** in the toolbar. Single-row deletion is also available through the row context menu. Bulk deletes show a confirmation prompt.
-
-### Row Inspector
-
-Click any row to open the inspector panel on the right. It shows every column value in a readable layout. Switch between three views:
-
-- **Normal** — formatted values, one per line
-- **JSON** — the full row as a JSON object
-- **Preview** — large cell content or URL detection with external link opening
-
-The inspector panel is resizable and its state persists between sessions.
-
-### Foreign Key Navigation
-
-When a column is a foreign key, Stroke detects the relationship and lets you click the cell value to jump to the referenced table with the matching filter already applied.
-
-### Index Browser
-
-Open the **Indexes** tab in the schema explorer to see every index on your tables — including the type (B-tree, Hash, GIN, GIST, BRIN), the indexed columns, and whether it's unique or a primary key.
-
-### SQL Console
-
-Press **Cmd/Ctrl+Shift+S** or open the SQL tab to get a full SQL editor:
-
-- Syntax highlighting and schema-aware autocomplete
-- Format your query automatically
-- Run with **Cmd/Ctrl+Enter**
-- See execution time and row count after each query
-- Results appear in a table below — up to 5,000 rows, with a 30-second timeout to protect your connection
-- Export results as CSV or JSON
-
-### Query History & Saved Queries
-
-Every query you execute is automatically saved to history. You can re-run any past query, or bookmark it as a saved query to keep it permanently. Both are accessible from the sidebar and the command palette.
-
-### Data Export
-
-From either the table grid or the SQL results panel, export data as:
-
-- **CSV** — properly quoted and escaped
-- **JSON** — formatted array of objects
-
-On desktop a native save dialog opens. On web it falls back to a browser download.
-
-### AI Chat
-
-Open the AI tab (**Cmd/Ctrl+Shift+A**) to chat with an AI assistant that has direct access to your database. The AI can:
-
-- Run queries and return real data in its answers
-- Describe any table's schema
-- Generate and explain SQL
-- Render Mermaid diagrams and formatted Markdown
-
-Configure any OpenAI-compatible API (OpenAI, Mistral, Ollama, etc.) in Settings by entering your base URL, model name, and API key.
-
-### AI SQL Suggestions
-
-In the SQL editor, Stroke can suggest relevant queries for the table you're viewing — common filters, joins to related tables, aggregations, and more. Click a suggestion to insert it into the editor.
-
-### MCP Server (Connect AI Tools)
-
-Stroke includes a built-in **Model Context Protocol (MCP) server** that exposes your connected database to AI tools like Claude Desktop, Cursor, and any other MCP-compatible client.
-
-1. Open **Settings → MCP Server**
-2. Click **Start** — the server starts on port `39847` (or the next available port)
-3. Copy the one-click config snippet for Claude or Cursor and paste it into your AI tool's config file
-
-The server uses bearer token authentication. The token is stable across restarts so you only need to configure your AI tool once.
+---
 
-### Keyboard Shortcuts
+## Keyboard shortcuts
 
 | Shortcut | Action |
 |----------|--------|
@@ -201,35 +111,30 @@ The server uses bearer token authentication. The token is stable across restarts
 | `Cmd/Ctrl+Shift+S` | SQL console |
 | `Cmd/Ctrl+Shift+A` | AI chat |
 | `Cmd/Ctrl+Enter` | Run SQL query |
-| `Cmd/Ctrl+?` | Show all shortcuts |
 | `Cmd/Ctrl+⌥+←/→` | Switch tabs |
+| `Cmd/Ctrl+?` | Show all shortcuts |
 
 ---
 
-## Build from Source
+## Build from source
 
-You'll need [Node.js](https://nodejs.org) (v18+) and the [Rust toolchain](https://rustup.rs).
+Requires [Node.js](https://nodejs.org) 18+ and the [Rust toolchain](https://rustup.rs).
 
 ```bash
 git clone https://github.com/broisnischal/stroke
 cd stroke
 npm install
-npm run tauri dev
-```
-
-To build a release binary:
-
-```bash
-npm run tauri build
+npm run tauri        # run in dev
+npm run tauri:build  # build a release binary
 ```
 
-**Arch Linux note:** The AppImage step can fail due to a linker incompatibility. Build only the `.deb` to avoid it:
+**Arch Linux** — the AppImage step can fail due to a linker quirk. Build only the `.deb`:
 
 ```bash
-npm run tauri build -- --bundles deb
+npm run tauri:build -- --bundles deb
 ```
 
-Or use the included script that sets the right flag for AppImage on Arch:
+…or use the included helper for AppImage on Arch:
 
 ```bash
 npm run tauri:build:arch
@@ -237,6 +142,7 @@ npm run tauri:build:arch
 
 ---
 
-## Reporting Issues
+## Issues
 
-Found a bug or want to request a feature? Open an issue at [github.com/broisnischal/stroke/issues](https://github.com/broisnischal/stroke/issues).
+Found a bug or have a feature request? Open an issue at
+[github.com/broisnischal/stroke/issues](https://github.com/broisnischal/stroke/issues).
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index b1e24252..7d0d41cb 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -17,7 +17,7 @@
   },
   "plugins": {
     "updater": {
-      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDlGMjlCQUIyQjA3Qjg4MjYKUldRbWlIdXdzcm9wbnlqVXRHc3lwWHRWdHVkdmFoMjZhM1lQZ3BnM1Ird0hlYXBxZWo5b1dLV3QK",
+      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDQyN0M0REY4NTUzODY4MDMKUldSQ2ZFMzRWVGhvQXlscG91dDk5MDdSbTBobWFvMjFDbFcyVTl6NDE5NEYweHNHS29hUVpQR04K",
       "endpoints": [
         "https://github.com/broisnischal/stroke/releases/latest/download/latest.json"
       ],