fix(ui): settings error handling, dark titlebar, and activity labels

Fixes found while driving the live dev build against a real Drive backend:

settings (HIGH): a plausible out-of-range value (e.g. 100 concurrent
uploads, a 10s scan interval) BRICKED the Rules tab. The settings store
set `error = String(e)` on the structured IPC error, which stringifies to
the literal "[object Object]", and the template's v-else-if chain replaced
the ENTIRE form with it - unrecoverable until an app restart, plus an
unhandled promise rejection.
  - store now stores a stable SPEC s24 CODE (toErrorCode), never String(e)
  - the Rules form stays mounted; a rejected patch shows as an inline,
    localized banner instead of replacing the form
  - numeric fields are clamped to the backend ranges (concurrency 1..32,
    scan 30..604800, deep-verify 3600..31536000, bandwidth 1..100000, hook
    1..86400) BEFORE patching, so a typed out-of-range value is corrected
    in place and never round-trips to a backend rejection; input min/max
    aligned to match
  - all Rules commits route through a wrapper that swallows the (now-rare)
    rejection after the store records it, killing the unhandled-rejection
    Vue warning

error localization: AddSourceWizard surfaced IPC failures via
`String(e)` too (same "[object Object]"/raw-English risk); it now uses the
toErrorCode + t(`errors.${code}.long`) pattern like the rest of the app.

dark titlebar: the native window titlebar + border inherited the user's
Windows ACCENT color (a per-machine teal/blue that clashed with the
theme). Force a dark caption + neutral border + immersive dark mode via
DwmSetWindowAttribute before the first show, so the chrome always matches
Driven's dark theme. Win10 ignores the color attrs (graceful no-op).

activity labels: deep_verify_done / update_applied rendered as raw
snake_case in the Activity table + filter while upload_done showed
"Uploaded"; add the missing activity.events.* labels so every backend
event type is humanized.

All verified live in a cargo tauri dev build (CDP): 100 concurrent
uploads clamps to 32 with the form intact and no console errors; the
titlebar is dark; the event filter reads "Deep verify complete" /
"App updated". ui suite 207 + vue-tsc + eslint + prettier green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MZQh3ZfwtZsM6c5qnTuWZP

Author: pmaxhogan

src-tauri/Cargo.toml

@@ -119,6 +119,9 @@ windows-sys = { version = "0.61", features = [
     # `CreateFileW` (and the other handle-open APIs) take a `SECURITY_ATTRIBUTES`
     # pointer and are gated behind `Win32_Security` in windows-sys 0.59.
     "Win32_Security",
+    # DwmSetWindowAttribute: force a dark titlebar/border so the native window
+    # chrome matches Driven's dark theme instead of the user's Windows accent.
+    "Win32_Graphics_Dwm",
 ] }
 
 [dev-dependencies]

src-tauri/src/lib.rs

@@ -88,6 +88,59 @@ fn state_db_path(app: &tauri::AppHandle) -> anyhow::Result<PathBuf> {
     Ok(config_dir.join("driven").join("state.db"))
 }
 
+/// Force a dark titlebar + window border on Windows so the native chrome matches
+/// Driven's dark theme. Without this the caption + border inherit the user's
+/// Windows ACCENT color ("show accent color on title bars and window borders"),
+/// which renders the chrome in an arbitrary per-machine color that clashes with
+/// the teal/dark UI. We set immersive dark mode (light caption text/buttons) plus
+/// a near-black caption and a subtle neutral border via the DWM window attributes.
+/// Win10 ignores the color attributes (graceful no-op); Win11 honors them. Applied
+/// before the first `show()` so there is no flash of accent-colored chrome.
+#[cfg(windows)]
+fn apply_dark_titlebar(window: &tauri::WebviewWindow) {
+    use std::mem::size_of;
+    use windows_sys::Win32::Foundation::HWND;
+    use windows_sys::Win32::Graphics::Dwm::DwmSetWindowAttribute;
+
+    // DWMWINDOWATTRIBUTE values (windows-sys takes the attribute as a u32).
+    // Spelled out as literals so we depend only on DwmSetWindowAttribute, not the
+    // constant set.
+    const DWMWA_USE_IMMERSIVE_DARK_MODE: u32 = 20;
+    const DWMWA_BORDER_COLOR: u32 = 34;
+    const DWMWA_CAPTION_COLOR: u32 = 35;
+
+    let hwnd = match window.hwnd() {
+        Ok(h) => h.0 as isize as HWND,
+        Err(_) => return,
+    };
+    // COLORREF byte order is 0x00BBGGRR.
+    let caption: u32 = 0x000b_0909; // #09090b (zinc-950) - the app's dark surface
+    let border: u32 = 0x0046_3f3f; // #3f3f46 (zinc-700) - a subtle neutral edge
+    let dark: i32 = 1; // BOOL TRUE -> light caption text + window buttons
+    // SAFETY: hwnd is a live top-level window handle for the duration of the call;
+    // each pointer references a stack value valid across the synchronous call.
+    unsafe {
+        DwmSetWindowAttribute(
+            hwnd,
+            DWMWA_USE_IMMERSIVE_DARK_MODE,
+            (&dark as *const i32).cast(),
+            size_of::<i32>() as u32,
+        );
+        DwmSetWindowAttribute(
+            hwnd,
+            DWMWA_CAPTION_COLOR,
+            (&caption as *const u32).cast(),
+            size_of::<u32>() as u32,
+        );
+        DwmSetWindowAttribute(
+            hwnd,
+            DWMWA_BORDER_COLOR,
+            (&border as *const u32).cast(),
+            size_of::<u32>() as u32,
+        );
+    }
+}
+
 /// Show + focus the main window (a normal launch, a tray/dock click, or a
 /// second-launch surface). No-op if the window is not present.
 fn show_main_window(app: &tauri::AppHandle) {
@@ -461,6 +514,13 @@ pub fn run() {
                 }
             }
 
+            // Force a dark titlebar/border (Windows) BEFORE the first show so the
+            // native chrome never flashes the user's clashing Windows accent color.
+            #[cfg(windows)]
+            if let Some(window) = app.get_webview_window(MAIN_WINDOW) {
+                apply_dark_titlebar(&window);
+            }
+
             // SPEC s13 / s20: the main window is declared hidden in
             // tauri.conf.json. Show it for a normal launch; keep it hidden
             // (tray-only) when started with --minimized (e.g. from autostart

ui/src/__tests__/activity-event-label.test.ts

@@ -22,6 +22,11 @@ describe("activityEventLabel (R1-P2-3)", () => {
     expect(label("scan_done")).toBe("Scan complete");
     expect(label("paused")).toBe("Paused");
     expect(label("local.unicode_collision")).toBe("Name collision");
+    // Every backend-emitted event type must be humanized - not shown as the raw
+    // snake_case code (the inconsistency: deep_verify_done / update_applied used
+    // to render raw in the table + filter while upload_done showed "Uploaded").
+    expect(label("deep_verify_done")).toBe("Deep verify complete");
+    expect(label("update_applied")).toBe("App updated");
   });
 
   it("falls back to errors.<code>.short for error/skip code event types", () => {

ui/src/__tests__/settings-components.test.ts

@@ -761,6 +761,61 @@ describe("Settings Rules tab", () => {
     });
   });
 
+  it("clamps out-of-range numeric inputs to the backend range before patching", async () => {
+    // Regression: a plausible out-of-range value (100 concurrent uploads, a 10s
+    // scan interval) must be clamped client-side so it never round-trips to a
+    // backend rejection - that rejection used to brick the entire Rules form.
+    invokeMock.mockImplementation((cmd: string, args: unknown) => {
+      if (cmd === "get_settings") return Promise.resolve(makeSettings());
+      if (cmd === "update_settings") {
+        const patch = (args as { patch: Record<string, unknown> }).patch;
+        return Promise.resolve(makeSettings(patch as Partial<SettingsDto>));
+      }
+      return Promise.resolve(undefined);
+    });
+    const wrapper = mount(Settings, { props: { tab: "rules" }, global: globalMountOptions });
+    await flushPromises();
+    const nums = wrapper.get('[data-testid="rules-form"]').findAll('input[type="number"]');
+    // Order in the form: [bandwidth, concurrent, scan, deepVerify, hook].
+    await nums[1].setValue("100"); // concurrent uploads, backend max 32
+    await nums[1].trigger("change");
+    await flushPromises();
+    expect(invokeMock).toHaveBeenCalledWith("update_settings", {
+      patch: { global: { defaultConcurrentUploads: 32 } },
+    });
+    await nums[2].setValue("10"); // scan interval, backend min 30
+    await nums[2].trigger("change");
+    await flushPromises();
+    expect(invokeMock).toHaveBeenCalledWith("update_settings", {
+      patch: { global: { scanIntervalSecs: 30 } },
+    });
+  });
+
+  it("keeps the Rules form visible with a localized banner when a patch is rejected", async () => {
+    // Regression: a rejected patch must NOT replace the whole form with the raw
+    // error ("[object Object]") and brick the page. The form stays mounted and an
+    // inline, localized error banner appears so the user can correct the value.
+    invokeMock.mockImplementation((cmd: string) => {
+      if (cmd === "get_settings") return Promise.resolve(makeSettings());
+      if (cmd === "update_settings")
+        return Promise.reject({ code: "internal.invalid_input", message: "out of range" });
+      return Promise.resolve(undefined);
+    });
+    const wrapper = mount(Settings, { props: { tab: "rules" }, global: globalMountOptions });
+    await flushPromises();
+    // Any commit that patches: toggle "pause on battery".
+    const battery = wrapper.get('[data-testid="rules-form"]').findAll('input[type="checkbox"]')[0];
+    await battery.setValue(false);
+    await battery.trigger("change");
+    await flushPromises();
+    // The form is STILL mounted (not bricked) ...
+    expect(wrapper.find('[data-testid="rules-form"]').exists()).toBe(true);
+    // ... and a localized banner shows the error - never "[object Object]".
+    const banner = wrapper.get('[data-testid="rules-error"]');
+    expect(banner.text().length).toBeGreaterThan(0);
+    expect(banner.text()).not.toContain("[object Object]");
+  });
+
   it("changes the Windows VSS mode when the windows settings group is present", async () => {
     invokeMock.mockImplementation((cmd: string, args: unknown) => {
       if (cmd === "get_settings") return Promise.resolve(makeSettings());

ui/src/__tests__/settings-stores.test.ts

@@ -275,11 +275,23 @@ describe("settings store", () => {
     expect(store.settings?.global.skipOnBattery).toBe(false);
   });
 
-  it("patch surfaces the error and rethrows", async () => {
+  it("patch surfaces the stable error CODE (not String(e)) and rethrows", async () => {
+    // Regression: the store must store the SPEC s24 code via toErrorCode, never
+    // String(e) - a structured `{ code, message }` error stringifies to the
+    // literal "[object Object]", which used to render straight into the Rules tab.
     const store = useSettingsStore();
-    invokeMock.mockRejectedValueOnce(new Error("write failed"));
-    await expect(store.patch({ updater: { channel: "dev" } })).rejects.toThrow("write failed");
-    expect(store.error).toContain("write failed");
+    invokeMock.mockRejectedValueOnce({ code: "internal.invalid_input", message: "out of range" });
+    await expect(store.patch({ updater: { channel: "dev" } })).rejects.toMatchObject({
+      code: "internal.invalid_input",
+    });
+    expect(store.errorCode).toBe("internal.invalid_input");
+  });
+
+  it("patch falls back to internal.bug for a code-less error", async () => {
+    const store = useSettingsStore();
+    invokeMock.mockRejectedValueOnce(new Error("boom"));
+    await expect(store.patch({ updater: { channel: "dev" } })).rejects.toThrow("boom");
+    expect(store.errorCode).toBe("internal.bug");
   });
 
   it("setTelemetryEnabled calls set_telemetry_enabled and updates the snapshot (R2-P1-1)", async () => {
@@ -303,10 +315,10 @@ describe("settings store", () => {
     });
   });
 
-  it("setTelemetryEnabled surfaces the error and rethrows", async () => {
+  it("setTelemetryEnabled surfaces the error code and rethrows", async () => {
     const store = useSettingsStore();
-    invokeMock.mockRejectedValueOnce(new Error("toggle failed"));
-    await expect(store.setTelemetryEnabled(false)).rejects.toThrow("toggle failed");
-    expect(store.error).toContain("toggle failed");
+    invokeMock.mockRejectedValueOnce({ code: "internal.bug", message: "toggle failed" });
+    await expect(store.setTelemetryEnabled(false)).rejects.toMatchObject({ code: "internal.bug" });
+    expect(store.errorCode).toBe("internal.bug");
   });
 });

ui/src/components/AddSourceWizard.vue

@@ -82,11 +82,13 @@ const pendingRecoveryAck = ref(false);
 const preview = ref<ExclusionPreview | null>(null);
 const previewLoading = ref(false);
 const submitting = ref(false);
-const errorMessage = ref<string | null>(null);
-// R8-P2-1: the recovery reveal/ack error on the reveal step as a stable SPEC s24
-// CODE (not a raw String(e), which renders a Tauri structured error as
-// `[object Object]` and can leak backend English). The reveal step localizes it
-// via t(`errors.${code}.long`).
+// The wizard's general error as a stable SPEC s24 CODE (not a raw String(e),
+// which renders a Tauri structured `{ code, message }` error as the literal
+// "[object Object]" and can leak backend English). The template localizes it via
+// t(`errors.${code}.long`).
+const errorCode = ref<string | null>(null);
+// R8-P2-1: the recovery reveal/ack error on the reveal step, same stable-code
+// treatment, localized on the reveal step.
 const revealErrorCode = ref<string | null>(null);
 
 const includePatterns = computed(() => splitPatterns(includePatternsText.value));
@@ -146,7 +148,7 @@ function reset(): void {
   createdSource.value = null;
   pendingRecoveryAck.value = false;
   preview.value = null;
-  errorMessage.value = null;
+  errorCode.value = null;
   revealErrorCode.value = null;
   submitting.value = false;
 }
@@ -156,7 +158,7 @@ function close(): void {
 }
 
 async function chooseLocalFolder(): Promise<void> {
-  errorMessage.value = null;
+  errorCode.value = null;
   try {
     // C1: the BACKEND owns the folder dialog and returns { path, token }. We
     // never accept a typed path - only this dialog result + its token.
@@ -170,15 +172,15 @@ async function chooseLocalFolder(): Promise<void> {
 
 /** Surface a Drive-picker failure on the wizard's shared error line. */
 function onDrivePickerError(e: unknown): void {
-  errorMessage.value = String(e);
+  errorCode.value = toErrorCode(e);
 }
 
 async function loadPreview(): Promise<void> {
   // R1-P1-2: preview by the backend-minted dialog TOKEN (not a raw path). The
   // token is peeked non-consumingly, so add_source still gets its single use.
   if (localPathToken.value === null) return;
   previewLoading.value = true;
-  errorMessage.value = null;
+  errorCode.value = null;
   try {
     preview.value = await ipc.previewExclusions({
       localPathToken: localPathToken.value,
@@ -187,7 +189,7 @@ async function loadPreview(): Promise<void> {
       excludePatterns: excludePatterns.value,
     });
   } catch (e) {
-    errorMessage.value = String(e);
+    errorCode.value = toErrorCode(e);
   } finally {
     previewLoading.value = false;
   }
@@ -217,7 +219,7 @@ async function confirm(): Promise<void> {
     return;
   }
   submitting.value = true;
-  errorMessage.value = null;
+  errorCode.value = null;
   try {
     const displayName = localPath.value.split(/[\\/]/).filter(Boolean).pop();
     const result = await sources.add({
@@ -250,7 +252,7 @@ async function confirm(): Promise<void> {
       close();
     }
   } catch (e) {
-    errorMessage.value = String(e);
+    errorCode.value = toErrorCode(e);
   } finally {
     submitting.value = false;
   }
@@ -497,8 +499,8 @@ defineExpose({ start });
         </p>
       </div>
 
-      <p v-if="errorMessage" class="text-sm text-red-600">
-        {{ errorMessage }}
+      <p v-if="errorCode" class="text-sm text-red-600" role="alert">
+        {{ t(`errors.${errorCode}.long`) }}
       </p>
 
       <div class="flex justify-between gap-2">

ui/src/locales/en-US.json

@@ -313,6 +313,8 @@
       "upload_done": "Uploaded",
       "trash_done": "Removed",
       "scan_done": "Scan complete",
+      "deep_verify_done": "Deep verify complete",
+      "update_applied": "App updated",
       "paused": "Paused",
       "error": "Error",
       "local.unicode_collision": "Name collision",

ui/src/stores/settings.ts

@@ -2,6 +2,7 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 
 import * as ipc from "../ipc/commands";
+import { toErrorCode } from "../ipc/errors";
 import type { SettingsDto, SettingsPatch } from "../ipc/types";
 
 // Settings store (SPEC s11.6, s22; DESIGN s8.2 Rules + About tabs). Holds the
@@ -10,29 +11,36 @@ import type { SettingsDto, SettingsPatch } from "../ipc/types";
 // snapshot with the authoritative result the backend returns (so derived /
 // clamped values - e.g. an out-of-range concurrent-uploads override - reflect
 // what was actually stored).
+//
+// Errors are stored as the stable SPEC s24 CODE (via toErrorCode), never
+// `String(e)`: a Tauri structured `{ code, message }` error stringifies to the
+// literal "[object Object]", which a previous version rendered straight into the
+// Rules tab - so a rejected value showed "[object Object]" AND (via the template's
+// v-else-if chain) hid the entire form until an app restart. The view localizes
+// the code via t(`errors.${code}.long`) and keeps the form visible.
 export const useSettingsStore = defineStore("settings", () => {
   const settings = ref<SettingsDto | null>(null);
   const loading = ref(false);
-  const error = ref<string | null>(null);
+  const errorCode = ref<string | null>(null);
 
   async function refresh(): Promise<void> {
     loading.value = true;
-    error.value = null;
+    errorCode.value = null;
     try {
       settings.value = await ipc.getSettings();
     } catch (e) {
-      error.value = String(e);
+      errorCode.value = toErrorCode(e);
     } finally {
       loading.value = false;
     }
   }
 
   async function patch(p: SettingsPatch): Promise<void> {
-    error.value = null;
+    errorCode.value = null;
     try {
       settings.value = await ipc.updateSettings(p);
     } catch (e) {
-      error.value = String(e);
+      errorCode.value = toErrorCode(e);
       throw e;
     }
   }
@@ -45,7 +53,7 @@ export const useSettingsStore = defineStore("settings", () => {
   // backend also routes update_settings' telemetry branch through the same
   // cancel-preserving path, so either route is safe; this is the explicit one.)
   async function setTelemetryEnabled(enabled: boolean): Promise<void> {
-    error.value = null;
+    errorCode.value = null;
     try {
       await ipc.setTelemetryEnabled(enabled);
       if (settings.value) {
@@ -54,10 +62,10 @@ export const useSettingsStore = defineStore("settings", () => {
         await refresh();
       }
     } catch (e) {
-      error.value = String(e);
+      errorCode.value = toErrorCode(e);
       throw e;
     }
   }
 
-  return { settings, loading, error, refresh, patch, setTelemetryEnabled };
+  return { settings, loading, errorCode, refresh, patch, setTelemetryEnabled };
 });