Add zoom controls and fix Tauri desktop dev navigation (#135)

## Summary

- Add frontend zoom controls for the Tauri desktop build
(Cmd+/Cmd-/Cmd+0 hotkeys and status bar buttons)
- Fix Tauri navigation guard race that caused the app to open in Chrome
instead of the webview

## Changes

**Zoom controls** (`b8eded7`):
- Add `zoomLevel` state to UIStore with localStorage persistence and CSS
`zoom` property application
- Handle Cmd+=, Cmd+-, Cmd+0 in the keyboard shortcut handler
- Add `[-] 100% [+]` controls to the status bar (click percentage to
reset)
- Zoom steps: 67%, 75%, 80%, 90%, 100%, 110%, 125%, 150%, 175%, 200%

**Tauri navigation fix** (`a6d1329`):
- Switch the backend redirect from
`window.eval("window.location.replace(...)")` to Tauri's native
`window.navigate()` API

**Review fixes** (`9ad264f`):
- Gate zoom controls, keyboard shortcuts, and CSS zoom effect behind
desktop detection (`?desktop` query param) so browser builds keep native
Cmd+/- zoom
- Tighten navigation guard to only allow the known sidecar port on
`127.0.0.1` instead of any localhost port — reads `backend_port` from
`SidecarState` at navigation time

## Test plan

- [ ] Run `make desktop-dev` and verify the app loads inside the Tauri
window (not Chrome)
- [ ] Press Cmd+= / Cmd+- to zoom in/out; verify the UI scales
- [ ] Press Cmd+0 to reset zoom to 100%
- [ ] Click the `[-]` / `[+]` / percentage buttons in the status bar
- [ ] Verify zoom level persists across app restarts
- [ ] Verify the `?` shortcuts modal lists the zoom shortcuts
- [ ] Open the web build (not desktop) and verify Cmd+/- uses native
browser zoom, no zoom controls in status bar
- [ ] Run `make test` to verify Go tests pass
- [ ] Run `cargo test` in `desktop/src-tauri/` to verify Rust tests pass

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: wesm

desktop/package.json

@@ -5,11 +5,11 @@
   "type": "module",
   "scripts": {
     "prepare-sidecar": "bash ./scripts/prepare-sidecar.sh",
-    "tauri:dev": "npm run prepare-sidecar && tauri dev",
-    "tauri:build": "npm run prepare-sidecar && tauri build",
-    "tauri:build:macos-app": "npm run prepare-sidecar && tauri build --bundles app",
-    "tauri:build:macos-dmg": "npm run prepare-sidecar && tauri build --bundles dmg",
-    "tauri:build:windows": "npm run prepare-sidecar && tauri build --bundles nsis",
+    "tauri:dev": "npm run prepare-sidecar && bash ./scripts/run-tauri.sh dev",
+    "tauri:build": "npm run prepare-sidecar && bash ./scripts/run-tauri.sh build",
+    "tauri:build:macos-app": "npm run prepare-sidecar && bash ./scripts/run-tauri.sh build --bundles app",
+    "tauri:build:macos-dmg": "npm run prepare-sidecar && bash ./scripts/run-tauri.sh build --bundles dmg",
+    "tauri:build:windows": "npm run prepare-sidecar && bash ./scripts/run-tauri.sh build --bundles nsis",
     "tauri": "tauri"
   },
   "devDependencies": {

desktop/scripts/prepare-sidecar.sh

@@ -108,6 +108,11 @@ patch_tauri_version() {
     return 0
   fi
   local conf="$TAURI_DIR/src-tauri/tauri.conf.json"
+  # Save original only if not already saved (handles re-run
+  # after a previous failure left the backup behind).
+  if [ ! -f "$conf.orig" ]; then
+    cp "$conf" "$conf.orig"
+  fi
   sed -i.bak \
     "s/\"version\": \"[^\"]*\"/\"version\": \"$semver\"/" \
     "$conf"

desktop/scripts/run-tauri.sh

@@ -0,0 +1,19 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+# Wrapper that restores tauri.conf.json after `tauri` exits,
+# undoing the version patch applied by prepare-sidecar.sh.
+# Uses the .orig backup instead of git checkout to preserve
+# any pre-existing uncommitted edits.
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+CONF="$SCRIPT_DIR/../src-tauri/tauri.conf.json"
+
+cleanup() {
+  if [ -f "$CONF.orig" ]; then
+    mv "$CONF.orig" "$CONF"
+  fi
+}
+trap cleanup EXIT INT TERM
+
+tauri "$@"

desktop/src-tauri/.gitignore

@@ -7,3 +7,6 @@
 # Generated by Tauri
 # will have schema files for capabilities auto-completion
 /gen/schemas
+
+# Backup created by prepare-sidecar.sh version patching
+tauri.conf.json.orig

desktop/src-tauri/src/lib.rs

@@ -120,11 +120,10 @@ fn init_navigation_guard_plugin<R: tauri::Runtime>() -> tauri::plugin::TauriPlug
         .on_navigation(|webview, url| {
             let backend_port = webview
                 .app_handle()
-                .state::<SidecarState>()
-                .backend_port
-                .lock()
-                .ok()
-                .and_then(|guard| *guard);
+                .try_state::<SidecarState>()
+                .and_then(|state| {
+                    state.backend_port.lock().ok().and_then(|g| *g)
+                });
             if is_allowed_navigation_url(url, backend_port) {
                 return true;
             }
@@ -151,13 +150,15 @@ fn is_allowed_navigation_url(url: &Url, backend_port: Option<u16>) -> bool {
     if url.scheme() == "tauri" && url.host_str() == Some("localhost") {
         return true;
     }
-    if url.scheme() != "http" || url.host_str() != Some(HOST) {
-        return false;
+    // Only allow navigation to the known sidecar port on
+    // localhost. Rejects all localhost URLs when the sidecar
+    // port is not yet known.
+    if let Some(port) = backend_port {
+        return url.scheme() == "http"
+            && url.host_str() == Some(HOST)
+            && url.port() == Some(port);
     }
-    matches!(
-        (url.port(), backend_port),
-        (Some(navigated_port), Some(sidecar_port)) if navigated_port == sidecar_port
-    )
+    false
 }
 
 fn is_allowed_external_open_url(url: &Url) -> bool {
@@ -531,13 +532,22 @@ fn redirect_when_ready(window: WebviewWindow, port: u16) {
 
     thread::spawn(move || {
         if wait_for_server(port, READY_TIMEOUT) {
-            let script = format!("window.location.replace({target_url:?});");
-            let _ = window.eval(&script);
+            match Url::parse(target_url.as_str()) {
+                Ok(url) => {
+                    if let Err(err) = window.navigate(url) {
+                        eprintln!("[agentsview] navigate failed: {err}");
+                    }
+                }
+                Err(err) => {
+                    eprintln!("[agentsview] invalid redirect URL: {err}");
+                }
+            }
             return;
         }
 
         let _ = window.eval(
-            "document.getElementById('status').textContent = 'AgentsView backend did not start within 30 seconds.';",
+            "document.getElementById('status').textContent = \
+             'AgentsView backend did not start within 30 seconds.';",
         );
     });
 }
@@ -903,12 +913,17 @@ mod tests {
     fn is_allowed_navigation_url_allows_local_only() {
         let tauri_url = Url::parse("tauri://localhost/index.html").expect("valid tauri url");
         assert!(is_allowed_navigation_url(&tauri_url, None));
+        assert!(is_allowed_navigation_url(&tauri_url, Some(18080)));
 
         let local_backend = Url::parse("http://127.0.0.1:18080/").expect("valid localhost url");
         assert!(is_allowed_navigation_url(&local_backend, Some(18080)));
-        assert!(!is_allowed_navigation_url(&local_backend, Some(19090)));
+
+        // Reject when port is unknown
         assert!(!is_allowed_navigation_url(&local_backend, None));
 
+        // Reject when port doesn't match
+        assert!(!is_allowed_navigation_url(&local_backend, Some(9999)));
+
         let remote = Url::parse("https://example.com/").expect("valid remote url");
         assert!(!is_allowed_navigation_url(&remote, Some(18080)));
 

frontend/src/lib/components/layout/StatusBar.svelte

@@ -3,6 +3,9 @@
   import { ui } from "../../stores/ui.svelte.js";
   import { formatNumber, formatRelativeTime } from "../../utils/format.js";
 
+  const isMac = navigator.platform.toUpperCase().includes("MAC");
+  const mod = isMac ? "Cmd" : "Ctrl";
+
   let progressText = $derived.by(() => {
     if (!sync.syncing || !sync.progress) return null;
     const p = sync.progress;
@@ -31,6 +34,34 @@
   </div>
 
   <div class="status-right">
+    {#if sync.isDesktop}
+      <div class="zoom-controls">
+        <button
+          class="zoom-btn"
+          onclick={() => ui.zoomOut()}
+          disabled={ui.zoomLevel <= 67}
+          title="Zoom out ({mod}+-)"
+        >
+          &minus;
+        </button>
+        <button
+          class="zoom-level"
+          onclick={() => ui.resetZoom()}
+          title="Reset zoom ({mod}+0)"
+        >
+          {ui.zoomLevel}%
+        </button>
+        <button
+          class="zoom-btn"
+          onclick={() => ui.zoomIn()}
+          disabled={ui.zoomLevel >= 200}
+          title="Zoom in ({mod}++)"
+        >
+          +
+        </button>
+      </div>
+      <span class="sep">&middot;</span>
+    {/if}
     {#if sync.updateAvailable && !sync.isDesktop}
       <button
         class="update-available"
@@ -137,4 +168,43 @@
   .version:hover {
     color: var(--text-secondary);
   }
+
+  .zoom-controls {
+    display: flex;
+    align-items: center;
+    gap: 1px;
+  }
+
+  .zoom-btn {
+    width: 18px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--text-muted);
+    border-radius: var(--radius-sm);
+    line-height: 1;
+  }
+
+  .zoom-btn:hover:not(:disabled) {
+    background: var(--bg-surface-hover);
+    color: var(--text-primary);
+  }
+
+  .zoom-level {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--text-muted);
+    padding: 0 2px;
+    min-width: 32px;
+    text-align: center;
+    border-radius: var(--radius-sm);
+  }
+
+  .zoom-level:hover {
+    background: var(--bg-surface-hover);
+    color: var(--text-secondary);
+  }
 </style>

frontend/src/lib/components/modals/ShortcutsModal.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
   import { ui } from "../../stores/ui.svelte.js";
+  import { sync } from "../../stores/sync.svelte.js";
 
-  const shortcuts = [
-    { key: "Cmd+K", action: "Open command palette" },
+  const isMac = navigator.platform.toUpperCase().includes("MAC");
+  const mod = isMac ? "Cmd" : "Ctrl";
+
+  const baseShortcuts = [
+    { key: `${mod}+K`, action: "Open command palette" },
     { key: "Esc", action: "Close palette / modal" },
     { key: "j / \u2193", action: "Next message" },
     { key: "k / \u2191", action: "Previous message" },
@@ -18,6 +22,16 @@
     { key: "?", action: "Show this modal" },
   ];
 
+  const zoomShortcuts = [
+    { key: `${mod}++`, action: "Zoom in" },
+    { key: `${mod}+-`, action: "Zoom out" },
+    { key: `${mod}+0`, action: "Reset zoom" },
+  ];
+
+  const shortcuts = sync.isDesktop
+    ? [...baseShortcuts, ...zoomShortcuts]
+    : baseShortcuts;
+
   function handleOverlayClick(e: MouseEvent) {
     if (
       (e.target as HTMLElement).classList.contains(

frontend/src/lib/stores/ui.svelte.ts

@@ -47,6 +47,32 @@ function readBlockFilters(): Set<BlockType> {
 }
 
 const LAYOUT_KEY = "agentsview-message-layout";
+const ZOOM_KEY = "agentsview-zoom-level";
+
+const IS_DESKTOP =
+  typeof window !== "undefined" &&
+  new URLSearchParams(window.location.search).has(
+    "desktop",
+  );
+
+const ZOOM_STEPS = [
+  67, 75, 80, 90, 100, 110, 125, 150, 175, 200,
+];
+const ZOOM_DEFAULT = 100;
+
+function readStoredZoom(): number {
+  if (!IS_DESKTOP) return ZOOM_DEFAULT;
+  try {
+    const raw = localStorage?.getItem(ZOOM_KEY);
+    if (raw) {
+      const val = Number(raw);
+      if (ZOOM_STEPS.includes(val)) return val;
+    }
+  } catch {
+    // ignore
+  }
+  return ZOOM_DEFAULT;
+}
 const VALID_LAYOUTS: MessageLayout[] = [
   "default",
   "compact",
@@ -87,6 +113,8 @@ class UIStore {
   pendingScrollOrdinal: number | null = $state(null);
   pendingScrollSession: string | null = $state(null);
 
+  zoomLevel: number = $state(readStoredZoom());
+
   /** Set of block types currently visible. */
   visibleBlocks: Set<BlockType> = $state(readBlockFilters());
 
@@ -118,6 +146,23 @@ class UIStore {
           // ignore
         }
       });
+
+      $effect(() => {
+        if (!IS_DESKTOP) return;
+        // "zoom" is non-standard but supported in WebKit/Chromium
+        (
+          document.documentElement.style as unknown as
+            Record<string, string>
+        ).zoom = String(this.zoomLevel / 100);
+        try {
+          localStorage?.setItem(
+            ZOOM_KEY,
+            String(this.zoomLevel),
+          );
+        } catch {
+          // ignore
+        }
+      });
     });
 
     // Allow parent windows to control theme via postMessage
@@ -216,6 +261,24 @@ class UIStore {
     this.pendingScrollSession = sessionId ?? null;
   }
 
+  zoomIn() {
+    const idx = ZOOM_STEPS.indexOf(this.zoomLevel);
+    if (idx < ZOOM_STEPS.length - 1) {
+      this.zoomLevel = ZOOM_STEPS[idx + 1]!;
+    }
+  }
+
+  zoomOut() {
+    const idx = ZOOM_STEPS.indexOf(this.zoomLevel);
+    if (idx > 0) {
+      this.zoomLevel = ZOOM_STEPS[idx - 1]!;
+    }
+  }
+
+  resetZoom() {
+    this.zoomLevel = ZOOM_DEFAULT;
+  }
+
   closeAll() {
     this.activeModal = null;
   }

frontend/src/lib/utils/keyboard.ts

@@ -55,6 +55,25 @@ export function registerShortcuts(
       return;
     }
 
+    // Zoom: Cmd+= / Cmd+- / Cmd+0 (desktop only)
+    if (sync.isDesktop) {
+      if (meta && (e.key === "=" || e.key === "+")) {
+        e.preventDefault();
+        ui.zoomIn();
+        return;
+      }
+      if (meta && e.key === "-") {
+        e.preventDefault();
+        ui.zoomOut();
+        return;
+      }
+      if (meta && e.key === "0") {
+        e.preventDefault();
+        ui.resetZoom();
+        return;
+      }
+    }
+
     // Esc — always works
     if (e.key === "Escape") {
       handleEscape();