From ae66186db93624cdba2b286c98093c894f7849ee Mon Sep 17 00:00:00 2001
From: Trent Nelson <trent@trent.me>
Date: Tue, 24 Mar 2026 15:07:02 -0700
Subject: [PATCH 1/5] feat(ui): add sidebar width helpers

---
 .../components/layout/sidebar-width.test.ts   | 62 +++++++++++++++++++
 .../lib/components/layout/sidebar-width.ts    | 38 ++++++++++++
 2 files changed, 100 insertions(+)
 create mode 100644 frontend/src/lib/components/layout/sidebar-width.test.ts
 create mode 100644 frontend/src/lib/components/layout/sidebar-width.ts

diff --git a/frontend/src/lib/components/layout/sidebar-width.test.ts b/frontend/src/lib/components/layout/sidebar-width.test.ts
new file mode 100644
index 00000000..4b2e5ae6
--- /dev/null
+++ b/frontend/src/lib/components/layout/sidebar-width.test.ts
@@ -0,0 +1,62 @@
+import { describe, expect, it } from "vitest";
+import {
+  SIDEBAR_CONTENT_MIN,
+  SIDEBAR_DESKTOP_BREAKPOINT,
+  SIDEBAR_WIDTH_DEFAULT,
+  SIDEBAR_WIDTH_KEY,
+  SIDEBAR_WIDTH_MIN,
+  SIDEBAR_WIDTH_STORAGE_MAX,
+  clampSidebarWidthForLayout,
+  clampStoredSidebarWidth,
+  isDesktopSidebarLayout,
+} from "./sidebar-width.js";
+
+describe("sidebar width helpers", () => {
+  it("exports the expected sidebar width constants", () => {
+    expect(SIDEBAR_WIDTH_KEY).toBe("agentsview-sidebar-width");
+    expect(SIDEBAR_WIDTH_DEFAULT).toBe(260);
+    expect(SIDEBAR_WIDTH_MIN).toBe(220);
+    expect(SIDEBAR_WIDTH_STORAGE_MAX).toBe(520);
+    expect(SIDEBAR_CONTENT_MIN).toBe(480);
+    expect(SIDEBAR_DESKTOP_BREAKPOINT).toBe(960);
+  });
+
+  it("falls back to the default for invalid stored values", () => {
+    expect(clampStoredSidebarWidth(undefined)).toBe(SIDEBAR_WIDTH_DEFAULT);
+    expect(clampStoredSidebarWidth(null)).toBe(SIDEBAR_WIDTH_DEFAULT);
+    expect(clampStoredSidebarWidth("not-a-number")).toBe(
+      SIDEBAR_WIDTH_DEFAULT,
+    );
+    expect(clampStoredSidebarWidth(Number.NaN)).toBe(SIDEBAR_WIDTH_DEFAULT);
+    expect(clampStoredSidebarWidth(Number.POSITIVE_INFINITY)).toBe(
+      SIDEBAR_WIDTH_DEFAULT,
+    );
+  });
+
+  it("clamps stored values to the supported minimum and maximum", () => {
+    expect(clampStoredSidebarWidth(100)).toBe(SIDEBAR_WIDTH_MIN);
+    expect(clampStoredSidebarWidth(260)).toBe(260);
+    expect(clampStoredSidebarWidth(999)).toBe(SIDEBAR_WIDTH_STORAGE_MAX);
+  });
+
+  it("accepts persisted numeric strings from localStorage", () => {
+    expect(clampStoredSidebarWidth("260")).toBe(260);
+    expect(clampStoredSidebarWidth("300")).toBe(300);
+    expect(clampStoredSidebarWidth("999")).toBe(SIDEBAR_WIDTH_STORAGE_MAX);
+  });
+
+  it("treats 960px and wider as desktop layout", () => {
+    expect(isDesktopSidebarLayout(959)).toBe(false);
+    expect(isDesktopSidebarLayout(960)).toBe(true);
+  });
+
+  it("never clamps the layout width below the sidebar minimum", () => {
+    expect(clampSidebarWidthForLayout(180, 650)).toBe(SIDEBAR_WIDTH_MIN);
+    expect(clampSidebarWidthForLayout(520, 650)).toBe(SIDEBAR_WIDTH_MIN);
+  });
+
+  it("limits sidebar width by the available layout width", () => {
+    expect(clampSidebarWidthForLayout(520, 700)).toBe(220);
+    expect(clampSidebarWidthForLayout(520, 900)).toBe(420);
+  });
+});
diff --git a/frontend/src/lib/components/layout/sidebar-width.ts b/frontend/src/lib/components/layout/sidebar-width.ts
new file mode 100644
index 00000000..10cfe331
--- /dev/null
+++ b/frontend/src/lib/components/layout/sidebar-width.ts
@@ -0,0 +1,38 @@
+export const SIDEBAR_WIDTH_KEY = "agentsview-sidebar-width";
+export const SIDEBAR_WIDTH_DEFAULT = 260;
+export const SIDEBAR_WIDTH_MIN = 220;
+export const SIDEBAR_WIDTH_STORAGE_MAX = 520;
+export const SIDEBAR_CONTENT_MIN = 480;
+export const SIDEBAR_DESKTOP_BREAKPOINT = 960;
+
+export function clampStoredSidebarWidth(value: unknown): number {
+  const numericValue =
+    typeof value === "string" && value.trim() !== ""
+      ? Number(value)
+      : value;
+
+  if (typeof numericValue !== "number" || !Number.isFinite(numericValue)) {
+    return SIDEBAR_WIDTH_DEFAULT;
+  }
+
+  return Math.min(
+    SIDEBAR_WIDTH_STORAGE_MAX,
+    Math.max(SIDEBAR_WIDTH_MIN, numericValue),
+  );
+}
+
+export function isDesktopSidebarLayout(viewportWidth: number): boolean {
+  return viewportWidth >= SIDEBAR_DESKTOP_BREAKPOINT;
+}
+
+export function clampSidebarWidthForLayout(
+  desiredWidth: number,
+  layoutWidth: number,
+): number {
+  const layoutMaxWidth = Math.max(
+    SIDEBAR_WIDTH_MIN,
+    Math.min(SIDEBAR_WIDTH_STORAGE_MAX, layoutWidth - SIDEBAR_CONTENT_MIN),
+  );
+
+  return Math.min(layoutMaxWidth, Math.max(SIDEBAR_WIDTH_MIN, desiredWidth));
+}

From 5746992904c2c1fe9f67f8a81a6f1b0caea1362a Mon Sep 17 00:00:00 2001
From: Trent Nelson <trent@trent.me>
Date: Tue, 24 Mar 2026 15:07:08 -0700
Subject: [PATCH 2/5] feat(ui): persist sidebar width preference

---
 frontend/src/lib/stores/ui.svelte.ts |  32 +++
 frontend/src/lib/stores/ui.test.ts   | 291 ++++++++++++++++++++++++++-
 2 files changed, 314 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/stores/ui.svelte.ts b/frontend/src/lib/stores/ui.svelte.ts
index 977e0605..c968ae98 100644
--- a/frontend/src/lib/stores/ui.svelte.ts
+++ b/frontend/src/lib/stores/ui.svelte.ts
@@ -1,3 +1,9 @@
+import {
+  SIDEBAR_WIDTH_DEFAULT,
+  SIDEBAR_WIDTH_KEY,
+  clampStoredSidebarWidth,
+} from "../components/layout/sidebar-width.js";
+
 type Theme = "light" | "dark";
 export type MessageLayout = "default" | "compact" | "stream";
 export type TranscriptMode = "normal" | "focused";
@@ -126,6 +132,16 @@ function readStoredTranscriptMode(): TranscriptMode {
   return "normal";
 }
 
+function readStoredSidebarWidth(): number {
+  try {
+    return clampStoredSidebarWidth(
+      localStorage?.getItem(SIDEBAR_WIDTH_KEY),
+    );
+  } catch {
+    return SIDEBAR_WIDTH_DEFAULT;
+  }
+}
+
 class UIStore {
   theme: Theme = $state(readStoredTheme() || "light");
   sortNewestFirst: boolean = $state(false);
@@ -133,6 +149,7 @@ class UIStore {
   transcriptMode: TranscriptMode = $state(
     readStoredTranscriptMode(),
   );
+  sidebarWidth: number = $state(readStoredSidebarWidth());
   activeModal: ModalType = $state(null);
   selectedOrdinal: number | null = $state(null);
   pendingScrollOrdinal: number | null = $state(null);
@@ -186,6 +203,17 @@ class UIStore {
         }
       });
 
+      $effect(() => {
+        try {
+          localStorage?.setItem(
+            SIDEBAR_WIDTH_KEY,
+            String(this.sidebarWidth),
+          );
+        } catch {
+          // ignore
+        }
+      });
+
       $effect(() => {
         if (!IS_DESKTOP) return;
         // "zoom" is non-standard but supported in WebKit/Chromium
@@ -306,6 +334,10 @@ class UIStore {
     this.transcriptMode = mode;
   }
 
+  setSidebarWidth(width: number) {
+    this.sidebarWidth = clampStoredSidebarWidth(width);
+  }
+
   selectOrdinal(ordinal: number) {
     this.selectedOrdinal = ordinal;
   }
diff --git a/frontend/src/lib/stores/ui.test.ts b/frontend/src/lib/stores/ui.test.ts
index 9fd240ca..9c1a6909 100644
--- a/frontend/src/lib/stores/ui.test.ts
+++ b/frontend/src/lib/stores/ui.test.ts
@@ -5,6 +5,13 @@ import {
   vi,
   beforeEach,
 } from "vitest";
+import { tick } from "svelte";
+import {
+  SIDEBAR_WIDTH_DEFAULT,
+  SIDEBAR_WIDTH_KEY,
+  SIDEBAR_WIDTH_MIN,
+  SIDEBAR_WIDTH_STORAGE_MAX,
+} from "../components/layout/sidebar-width.js";
 import { ui } from "./ui.svelte.js";
 
 describe("UIStore", () => {
@@ -173,6 +180,241 @@ describe("UIStore", () => {
     });
   });
 
+  describe("sidebar width", () => {
+    it("defaults to the helper default when storage is empty", async () => {
+      const original = globalThis.localStorage;
+      const getItem = vi.fn(() => null);
+      const setItem = vi.fn();
+
+      Object.defineProperty(globalThis, "localStorage", {
+        value: { getItem, setItem },
+        writable: true,
+        configurable: true,
+      });
+
+      try {
+        // @ts-expect-error -- query string busts module cache
+        const mod = await import("./ui.svelte.js?sidebarWidthEmpty");
+        expect(getItem.mock.calls).toContainEqual([
+          SIDEBAR_WIDTH_KEY,
+        ]);
+        expect(mod.ui.sidebarWidth).toBe(SIDEBAR_WIDTH_DEFAULT);
+      } finally {
+        Object.defineProperty(globalThis, "localStorage", {
+          value: original,
+          writable: true,
+          configurable: true,
+        });
+      }
+    });
+
+    it("reads and clamps stored widths including stored strings", async () => {
+      const original = globalThis.localStorage;
+
+      try {
+        Object.defineProperty(globalThis, "localStorage", {
+          value: {
+            getItem: vi.fn((key: string) =>
+              key === SIDEBAR_WIDTH_KEY
+                ? String(SIDEBAR_WIDTH_MIN - 50)
+                : null,
+            ),
+            setItem: vi.fn(),
+          },
+          writable: true,
+          configurable: true,
+        });
+        // @ts-expect-error -- query string busts module cache
+        const minMod = await import("./ui.svelte.js?sidebarWidthStoredMin");
+
+        Object.defineProperty(globalThis, "localStorage", {
+          value: {
+            getItem: vi.fn((key: string) =>
+              key === SIDEBAR_WIDTH_KEY
+                ? String(SIDEBAR_WIDTH_STORAGE_MAX + 50)
+                : null,
+            ),
+            setItem: vi.fn(),
+          },
+          writable: true,
+          configurable: true,
+        });
+        // @ts-expect-error -- query string busts module cache
+        const maxMod = await import("./ui.svelte.js?sidebarWidthStoredMax");
+
+        Object.defineProperty(globalThis, "localStorage", {
+          value: {
+            getItem: vi.fn((key: string) =>
+              key === SIDEBAR_WIDTH_KEY ? "300" : null,
+            ),
+            setItem: vi.fn(),
+          },
+          writable: true,
+          configurable: true,
+        });
+        // @ts-expect-error -- query string busts module cache
+        const stringMod = await import("./ui.svelte.js?sidebarWidthStoredString");
+
+        expect(minMod.ui.sidebarWidth).toBe(SIDEBAR_WIDTH_MIN);
+        expect(maxMod.ui.sidebarWidth).toBe(
+          SIDEBAR_WIDTH_STORAGE_MAX,
+        );
+        expect(stringMod.ui.sidebarWidth).toBe(300);
+      } finally {
+        Object.defineProperty(globalThis, "localStorage", {
+          value: original,
+          writable: true,
+          configurable: true,
+        });
+      }
+    });
+
+    it("persists clamped widths through setSidebarWidth", async () => {
+      const original = globalThis.localStorage;
+      const setItem = vi.fn();
+
+      Object.defineProperty(globalThis, "localStorage", {
+        value: {
+          getItem: vi.fn(() => null),
+          setItem,
+        },
+        writable: true,
+        configurable: true,
+      });
+
+      try {
+        // @ts-expect-error -- query string busts module cache
+        const mod = await import("./ui.svelte.js?sidebarWidthPersist");
+        setItem.mockClear();
+
+        mod.ui.setSidebarWidth(SIDEBAR_WIDTH_MIN - 10);
+        await tick();
+        expect(mod.ui.sidebarWidth).toBe(SIDEBAR_WIDTH_MIN);
+        expect(setItem).toHaveBeenCalledTimes(1);
+        expect(setItem).toHaveBeenLastCalledWith(
+          SIDEBAR_WIDTH_KEY,
+          String(SIDEBAR_WIDTH_MIN),
+        );
+
+        setItem.mockClear();
+        mod.ui.setSidebarWidth(SIDEBAR_WIDTH_STORAGE_MAX + 10);
+        await tick();
+        expect(mod.ui.sidebarWidth).toBe(
+          SIDEBAR_WIDTH_STORAGE_MAX,
+        );
+        expect(setItem).toHaveBeenCalledTimes(1);
+        expect(setItem).toHaveBeenLastCalledWith(
+          SIDEBAR_WIDTH_KEY,
+          String(SIDEBAR_WIDTH_STORAGE_MAX),
+        );
+      } finally {
+        Object.defineProperty(globalThis, "localStorage", {
+          value: original,
+          writable: true,
+          configurable: true,
+        });
+      }
+    });
+
+    it("survives when localStorage.getItem is unavailable", async () => {
+      const original = globalThis.localStorage;
+
+      Object.defineProperty(globalThis, "localStorage", {
+        value: {
+          setItem: vi.fn(),
+        },
+        writable: true,
+        configurable: true,
+      });
+
+      try {
+        // @ts-expect-error -- query string busts module cache
+        const mod = await import("./ui.svelte.js?sidebarWidthNoGetItem");
+        expect(mod.ui.sidebarWidth).toBe(SIDEBAR_WIDTH_DEFAULT);
+      } finally {
+        Object.defineProperty(globalThis, "localStorage", {
+          value: original,
+          writable: true,
+          configurable: true,
+        });
+      }
+    });
+
+    it("survives when localStorage.setItem is unavailable", async () => {
+      const original = globalThis.localStorage;
+
+      Object.defineProperty(globalThis, "localStorage", {
+        value: {
+          getItem: vi.fn(() => String(SIDEBAR_WIDTH_DEFAULT + 10)),
+        },
+        writable: true,
+        configurable: true,
+      });
+
+      try {
+        // @ts-expect-error -- query string busts module cache
+        const mod = await import("./ui.svelte.js?sidebarWidthNoSetItem");
+        expect(mod.ui.sidebarWidth).toBe(SIDEBAR_WIDTH_DEFAULT + 10);
+        expect(() =>
+          mod.ui.setSidebarWidth(SIDEBAR_WIDTH_DEFAULT + 20),
+        ).not.toThrow();
+        expect(mod.ui.sidebarWidth).toBe(SIDEBAR_WIDTH_DEFAULT + 20);
+      } finally {
+        Object.defineProperty(globalThis, "localStorage", {
+          value: original,
+          writable: true,
+          configurable: true,
+        });
+      }
+    });
+
+    it("survives when localStorage is null", async () => {
+      const original = globalThis.localStorage;
+
+      Object.defineProperty(globalThis, "localStorage", {
+        value: null,
+        writable: true,
+        configurable: true,
+      });
+
+      try {
+        // @ts-expect-error -- query string busts module cache
+        const mod = await import("./ui.svelte.js?sidebarWidthNullStorage");
+        expect(mod.ui.sidebarWidth).toBe(SIDEBAR_WIDTH_DEFAULT);
+        expect(() =>
+          mod.ui.setSidebarWidth(SIDEBAR_WIDTH_DEFAULT + 15),
+        ).not.toThrow();
+      } finally {
+        Object.defineProperty(globalThis, "localStorage", {
+          value: original,
+          writable: true,
+          configurable: true,
+        });
+      }
+    });
+
+    it("survives when localStorage is undefined", async () => {
+      const original = globalThis.localStorage;
+      // @ts-expect-error -- deliberately removing localStorage
+      delete globalThis.localStorage;
+
+      try {
+        // @ts-expect-error -- query string busts module cache
+        const mod = await import("./ui.svelte.js?sidebarWidthNoStorage");
+        expect(mod.ui.sidebarWidth).toBe(SIDEBAR_WIDTH_DEFAULT);
+        expect(() =>
+          mod.ui.setSidebarWidth(SIDEBAR_WIDTH_DEFAULT + 25),
+        ).not.toThrow();
+      } finally {
+        Object.defineProperty(globalThis, "localStorage", {
+          value: original,
+          writable: true,
+          configurable: true,
+        });
+      }
+    });
+  });
+
   describe("postMessage theme control", () => {
     it("should change theme on valid theme:set message", () => {
       ui.theme = "light";
@@ -373,19 +615,50 @@ describe("UIStore", () => {
     });
 
     it("should persist transcript mode changes", async () => {
-      ui.setTranscriptMode("focused");
-      await Promise.resolve();
-      expect(localStorage.getItem("agentsview-transcript-mode")).toBe(
-        "focused",
-      );
+      const original = globalThis.localStorage;
+      const setItem = vi.fn();
+      const getItem = vi.fn(() => null);
+
+      Object.defineProperty(globalThis, "localStorage", {
+        value: { getItem, setItem },
+        writable: true,
+        configurable: true,
+      });
+
+      try {
+        // @ts-expect-error -- cache bust for fresh UIStore
+        const mod = await import("./ui.svelte.js?persistTranscriptMode");
+        setItem.mockClear();
+        mod.ui.setTranscriptMode("focused");
+        await Promise.resolve();
+        expect(setItem).toHaveBeenLastCalledWith(
+          "agentsview-transcript-mode",
+          "focused",
+        );
+      } finally {
+        Object.defineProperty(globalThis, "localStorage", {
+          value: original,
+          writable: true,
+          configurable: true,
+        });
+      }
     });
 
     it("should fall back to normal for invalid stored transcript mode", async () => {
       const original = globalThis.localStorage;
-      localStorage.setItem(
-        "agentsview-transcript-mode",
-        "detailed",
-      );
+
+      Object.defineProperty(globalThis, "localStorage", {
+        value: {
+          getItem: vi.fn((key: string) =>
+            key === "agentsview-transcript-mode"
+              ? "detailed"
+              : null,
+          ),
+          setItem: vi.fn(),
+        },
+        writable: true,
+        configurable: true,
+      });
       try {
         // @ts-expect-error -- cache bust for fresh UIStore
         const mod = await import("./ui.svelte.js?badTranscriptMode");

From c4c2a0d8c23ef6f3a7d55db7d0bdcfae6b9cdd3d Mon Sep 17 00:00:00 2001
From: Trent Nelson <trent@trent.me>
Date: Tue, 24 Mar 2026 15:07:13 -0700
Subject: [PATCH 3/5] feat(ui): add resizable session sidebar

---
 .../layout/ThreeColumnLayout.svelte           | 351 ++++++++-
 .../layout/ThreeColumnLayout.test.ts          | 700 ++++++++++++++++++
 2 files changed, 1043 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/lib/components/layout/ThreeColumnLayout.test.ts

diff --git a/frontend/src/lib/components/layout/ThreeColumnLayout.svelte b/frontend/src/lib/components/layout/ThreeColumnLayout.svelte
index 5c3acd6b..847e7e96 100644
--- a/frontend/src/lib/components/layout/ThreeColumnLayout.svelte
+++ b/frontend/src/lib/components/layout/ThreeColumnLayout.svelte
@@ -1,5 +1,13 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import {
+    SIDEBAR_DESKTOP_BREAKPOINT,
+    SIDEBAR_WIDTH_DEFAULT,
+    SIDEBAR_WIDTH_MIN,
+    SIDEBAR_WIDTH_STORAGE_MAX,
+    clampSidebarWidthForLayout,
+    isDesktopSidebarLayout,
+  } from "./sidebar-width.js";
   import { ui } from "../../stores/ui.svelte.js";
   import { router } from "../../stores/router.svelte.js";
   import type { Route } from "../../stores/router.svelte.js";
@@ -10,7 +18,50 @@
     content: Snippet;
   }
 
+  const RESIZE_HANDLE_WIDTH = 12;
+  const SIDEBAR_BORDER_WIDTH = 1;
+
   let { sidebar, content }: Props = $props();
+  let layoutElement = $state<HTMLElement | null>(null);
+  let resizeHandleElement = $state<HTMLElement | null>(null);
+  let layoutWidth = $state<number | null>(null);
+  let viewportWidth = $state(
+    typeof window === "undefined"
+      ? SIDEBAR_DESKTOP_BREAKPOINT
+      : window.innerWidth,
+  );
+  let isResizing = $state(false);
+  let dragState = $state<{
+    startX: number;
+    startWidth: number;
+  } | null>(null);
+  let didDragMove = $state(false);
+  let activePointerId = $state<number | null>(null);
+
+  const isDesktop = $derived(
+    isDesktopSidebarLayout(viewportWidth),
+  );
+  const currentLayoutWidth = $derived(
+    layoutWidth ?? viewportWidth,
+  );
+  const clampedLayoutWidth = $derived(
+    isDesktop
+      ? Math.max(
+          0,
+          currentLayoutWidth -
+            RESIZE_HANDLE_WIDTH -
+            SIDEBAR_BORDER_WIDTH,
+        )
+      : currentLayoutWidth,
+  );
+  const sidebarWidth = $derived(
+    isDesktop
+      ? clampSidebarWidthForLayout(
+          ui.sidebarWidth,
+          clampedLayoutWidth,
+        )
+      : SIDEBAR_WIDTH_DEFAULT,
+  );
 
   function handleBackdropClick() {
     ui.closeSidebar();
@@ -21,19 +72,227 @@
       sessions.deselectSession();
     }
     router.navigate(route);
-    // Close sidebar for full-page routes; keep open for sessions
-    // so the user can select from the list.
     if (route !== "sessions") {
       ui.closeSidebar();
     }
   }
+
+  function measureLayoutWidth(): number {
+    const measuredWidth =
+      layoutElement?.getBoundingClientRect().width ??
+      layoutElement?.clientWidth ??
+      viewportWidth;
+
+    const nextLayoutWidth =
+      measuredWidth > 0 ? measuredWidth : viewportWidth;
+
+    layoutWidth = nextLayoutWidth;
+    return nextLayoutWidth;
+  }
+
+  function updateSidebarWidth(clientX: number) {
+    if (!dragState) return;
+
+    const desiredWidth =
+      dragState.startWidth + (clientX - dragState.startX);
+    const clampedWidth = clampSidebarWidthForLayout(
+      desiredWidth,
+      Math.max(
+        0,
+        measureLayoutWidth() -
+          RESIZE_HANDLE_WIDTH -
+          SIDEBAR_BORDER_WIDTH,
+      ),
+    );
+
+    if (clampedWidth === sidebarWidth) return;
+    ui.setSidebarWidth(clampedWidth);
+  }
+
+  function isActiveDragPointer(event: PointerEvent) {
+    return (
+      activePointerId === null ||
+      event.pointerId === activePointerId
+    );
+  }
+
+  function stopResizing() {
+    if (
+      resizeHandleElement &&
+      activePointerId !== null &&
+      typeof resizeHandleElement.releasePointerCapture ===
+        "function"
+    ) {
+      try {
+        resizeHandleElement.releasePointerCapture(
+          activePointerId,
+        );
+      } catch {
+        // Ignore release failures when capture is absent.
+      }
+    }
+
+    if (typeof window !== "undefined") {
+      window.removeEventListener(
+        "pointermove",
+        handlePointerMove,
+      );
+      window.removeEventListener(
+        "pointerup",
+        handlePointerUp,
+      );
+      window.removeEventListener(
+        "pointercancel",
+        handlePointerCancel,
+      );
+    }
+
+    isResizing = false;
+    dragState = null;
+    didDragMove = false;
+    activePointerId = null;
+  }
+
+  function handlePointerMove(event: PointerEvent) {
+    if (!dragState) return;
+    if (!isActiveDragPointer(event)) return;
+
+    if (event.buttons === 0) {
+      stopResizing();
+      return;
+    }
+
+    const hasMoved =
+      didDragMove || event.clientX !== dragState.startX;
+    if (!hasMoved) return;
+
+    event.preventDefault();
+    didDragMove = true;
+    updateSidebarWidth(event.clientX);
+  }
+
+  function handlePointerUp(event: PointerEvent) {
+    if (!dragState || !isActiveDragPointer(event)) return;
+
+    if (didDragMove) {
+      updateSidebarWidth(event.clientX);
+    }
+
+    stopResizing();
+  }
+
+  function handlePointerCancel(event: PointerEvent) {
+    if (!dragState || !isActiveDragPointer(event)) return;
+    stopResizing();
+  }
+
+  function handlePointerDown(event: PointerEvent) {
+    if (!isDesktop || !ui.sidebarOpen || dragState || event.button !== 0) {
+      return;
+    }
+
+    event.preventDefault();
+    dragState = {
+      startX: event.clientX,
+      startWidth: sidebarWidth,
+    };
+    didDragMove = false;
+    activePointerId =
+      typeof event.pointerId === "number"
+        ? event.pointerId
+        : null;
+    isResizing = true;
+
+    if (
+      resizeHandleElement &&
+      activePointerId !== null &&
+      typeof resizeHandleElement.setPointerCapture ===
+        "function"
+    ) {
+      try {
+        resizeHandleElement.setPointerCapture(
+          activePointerId,
+        );
+      } catch {
+        // Ignore capture failures and keep window listeners as fallback.
+      }
+    }
+
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointercancel", handlePointerCancel);
+  }
+
+  $effect(() => {
+    if (!layoutElement) return;
+    viewportWidth;
+    measureLayoutWidth();
+  });
+
+  $effect(() => {
+    if (
+      !layoutElement ||
+      typeof ResizeObserver === "undefined"
+    ) {
+      return;
+    }
+
+    const observer = new ResizeObserver(() => {
+      measureLayoutWidth();
+    });
+    observer.observe(layoutElement);
+
+    return () => {
+      observer.disconnect();
+    };
+  });
+
+  $effect(() => {
+    return () => {
+      stopResizing();
+    };
+  });
+
+  $effect(() => {
+    if (!isDesktop && isResizing) {
+      stopResizing();
+    }
+  });
+
+  $effect(() => {
+    if (typeof document === "undefined") return;
+
+    document.body.classList.toggle(
+      "sidebar-resizing",
+      isResizing,
+    );
+
+    return () => {
+      document.body.classList.remove("sidebar-resizing");
+    };
+  });
 </script>
 
-<div class="layout">
-  {#if ui.sidebarOpen}
-    <button class="sidebar-backdrop" aria-label="Close sidebar" onclick={handleBackdropClick}></button>
+<svelte:window bind:innerWidth={viewportWidth} />
+
+<div
+  class="layout"
+  class:is-resizing={isResizing}
+  bind:this={layoutElement}
+>
+  {#if ui.isMobileViewport && ui.sidebarOpen}
+    <button
+      class="sidebar-backdrop"
+      aria-label="Close sidebar"
+      onclick={handleBackdropClick}
+    ></button>
   {/if}
-  <aside class="sidebar" class:open={ui.sidebarOpen}>
+
+  <aside
+    class="sidebar"
+    class:open={ui.sidebarOpen}
+    style:width={isDesktop ? `${sidebarWidth}px` : undefined}
+  >
     <nav class="mobile-nav">
       <button
         class="mobile-nav-btn"
@@ -80,6 +339,23 @@
     </nav>
     {@render sidebar()}
   </aside>
+
+  {#if isDesktop && ui.sidebarOpen}
+    <div
+      class="resize-handle"
+      bind:this={resizeHandleElement}
+      data-testid="sidebar-resize-handle"
+      role="separator"
+      aria-label="Resize sidebar"
+      aria-orientation="vertical"
+      aria-valuemin={SIDEBAR_WIDTH_MIN}
+      aria-valuemax={SIDEBAR_WIDTH_STORAGE_MAX}
+      aria-valuenow={sidebarWidth}
+      onpointerdown={handlePointerDown}
+      style:width={`${RESIZE_HANDLE_WIDTH}px`}
+    ></div>
+  {/if}
+
   <main class="content">
     {@render content()}
   </main>
@@ -88,7 +364,9 @@
 <style>
   .layout {
     display: flex;
-    height: calc(100vh - var(--header-height, 40px) - var(--status-bar-height, 24px));
+    height: calc(
+      100vh - var(--header-height, 40px) - var(--status-bar-height, 24px)
+    );
     overflow: hidden;
     position: relative;
   }
@@ -107,6 +385,53 @@
     display: none;
   }
 
+  .resize-handle {
+    position: relative;
+    flex-shrink: 0;
+    cursor: col-resize;
+    touch-action: none;
+    transition: background-color 120ms ease;
+  }
+
+  .resize-handle::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: 1px;
+    background: var(--border-default);
+    transform: translateX(-50%);
+  }
+
+  .resize-handle::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 3px;
+    height: 52px;
+    border-radius: 999px;
+    background: var(--text-muted);
+    opacity: 0.6;
+    transform: translate(-50%, -50%);
+    transition: opacity 120ms ease;
+  }
+
+  .resize-handle:hover,
+  .layout.is-resizing .resize-handle {
+    background: color-mix(
+      in srgb,
+      var(--accent-blue) 10%,
+      transparent
+    );
+  }
+
+  .resize-handle:hover::after,
+  .layout.is-resizing .resize-handle::after {
+    opacity: 1;
+  }
+
   .content {
     flex: 1;
     min-width: 0;
@@ -125,6 +450,12 @@
     display: none;
   }
 
+  :global(body.sidebar-resizing) {
+    cursor: col-resize;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
   @media (max-width: 767px) {
     .sidebar {
       position: fixed;
@@ -179,7 +510,11 @@
 
     .mobile-nav-btn.active {
       color: var(--accent-blue);
-      background: color-mix(in srgb, var(--accent-blue) 8%, transparent);
+      background: color-mix(
+        in srgb,
+        var(--accent-blue) 8%,
+        transparent
+      );
     }
   }
 </style>
diff --git a/frontend/src/lib/components/layout/ThreeColumnLayout.test.ts b/frontend/src/lib/components/layout/ThreeColumnLayout.test.ts
new file mode 100644
index 00000000..a1127df6
--- /dev/null
+++ b/frontend/src/lib/components/layout/ThreeColumnLayout.test.ts
@@ -0,0 +1,700 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  createRawSnippet,
+  mount,
+  tick,
+  unmount,
+} from "svelte";
+// @ts-ignore
+import ThreeColumnLayout from "./ThreeColumnLayout.svelte";
+import {
+  SIDEBAR_DESKTOP_BREAKPOINT,
+  SIDEBAR_WIDTH_DEFAULT,
+  SIDEBAR_WIDTH_MIN,
+  SIDEBAR_WIDTH_STORAGE_MAX,
+  clampSidebarWidthForLayout,
+} from "./sidebar-width.js";
+import { ui } from "../../stores/ui.svelte.js";
+
+const sidebarSnippet = createRawSnippet(() => ({
+  render: () => '<div data-testid="sidebar-slot">Sidebar</div>',
+}));
+
+const contentSnippet = createRawSnippet(() => ({
+  render: () => '<div data-testid="content-slot">Content</div>',
+}));
+
+const RESIZE_HANDLE_WIDTH = 12;
+const SIDEBAR_BORDER_WIDTH = 1;
+
+let component: ReturnType<typeof mount> | undefined;
+let restoreMeasuredLayoutWidth:
+  | (() => void)
+  | undefined;
+
+function setViewportWidth(width: number) {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    writable: true,
+    value: width,
+  });
+  window.dispatchEvent(new Event("resize"));
+}
+
+function renderLayout() {
+  component = mount(ThreeColumnLayout, {
+    target: document.body,
+    props: {
+      sidebar: sidebarSnippet,
+      content: contentSnippet,
+    },
+  });
+  return component;
+}
+
+function getLayout() {
+  const layout = document.querySelector<HTMLElement>(".layout");
+  expect(layout).not.toBeNull();
+  return layout!;
+}
+
+function getSidebar() {
+  const sidebar = document.querySelector<HTMLElement>(".sidebar");
+  expect(sidebar).not.toBeNull();
+  return sidebar!;
+}
+
+function getHandle() {
+  return document.querySelector<HTMLElement>(
+    '[data-testid="sidebar-resize-handle"]',
+  );
+}
+
+function getClampedSidebarWidthForLayout(
+  desiredWidth: number,
+  layoutWidth: number,
+) {
+  return clampSidebarWidthForLayout(
+    desiredWidth,
+    layoutWidth -
+      RESIZE_HANDLE_WIDTH -
+      SIDEBAR_BORDER_WIDTH,
+  );
+}
+
+function mockLayoutWidth(width: number) {
+  const layout = getLayout();
+
+  Object.defineProperty(layout, "getBoundingClientRect", {
+    configurable: true,
+    value: () => ({
+      width,
+      height: 0,
+      top: 0,
+      right: width,
+      bottom: 0,
+      left: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    }),
+  });
+}
+
+function mockLayoutWidthOnRender(width: number) {
+  const original =
+    HTMLElement.prototype.getBoundingClientRect;
+
+  Object.defineProperty(
+    HTMLElement.prototype,
+    "getBoundingClientRect",
+    {
+      configurable: true,
+      value: function () {
+        if (
+          this instanceof HTMLElement &&
+          this.classList.contains("layout")
+        ) {
+          return {
+            width,
+            height: 0,
+            top: 0,
+            right: width,
+            bottom: 0,
+            left: 0,
+            x: 0,
+            y: 0,
+            toJSON: () => ({}),
+          };
+        }
+
+        return original.call(this);
+      },
+    },
+  );
+
+  restoreMeasuredLayoutWidth = () => {
+    Object.defineProperty(
+      HTMLElement.prototype,
+      "getBoundingClientRect",
+      {
+        configurable: true,
+        value: original,
+      },
+    );
+    restoreMeasuredLayoutWidth = undefined;
+  };
+}
+
+function createPointerMouseEvent(
+  type: string,
+  options: {
+    clientX: number;
+    buttons?: number;
+    pointerId: number;
+  },
+) {
+  const event = new MouseEvent(type, {
+    bubbles: true,
+    clientX: options.clientX,
+    buttons: options.buttons,
+  });
+
+  Object.defineProperty(event, "pointerId", {
+    configurable: true,
+    value: options.pointerId,
+  });
+
+  return event;
+}
+
+async function dragHandle(startX: number, endX: number) {
+  const handle = getHandle();
+  expect(handle).not.toBeNull();
+
+  handle!.dispatchEvent(
+    new MouseEvent("pointerdown", {
+      bubbles: true,
+      clientX: startX,
+    }),
+  );
+  window.dispatchEvent(
+    new MouseEvent("pointermove", {
+      bubbles: true,
+      clientX: endX,
+      buttons: 1,
+    }),
+  );
+  await tick();
+  window.dispatchEvent(
+    new MouseEvent("pointerup", {
+      bubbles: true,
+      clientX: endX,
+    }),
+  );
+  await tick();
+}
+
+afterEach(() => {
+  if (component) {
+    unmount(component);
+    component = undefined;
+  }
+
+  document.body.className = "";
+  document.body.innerHTML = "";
+  restoreMeasuredLayoutWidth?.();
+  ui.setSidebarWidth(SIDEBAR_WIDTH_DEFAULT);
+  setViewportWidth(SIDEBAR_DESKTOP_BREAKPOINT);
+});
+
+describe("ThreeColumnLayout", () => {
+  it("renders handle on desktop layouts", async () => {
+    setViewportWidth(SIDEBAR_DESKTOP_BREAKPOINT);
+    ui.setSidebarWidth(320);
+
+    renderLayout();
+    await tick();
+
+    expect(getHandle()).not.toBeNull();
+    expect(getSidebar().style.width).toBe("320px");
+  });
+
+  it("hides handle below breakpoint", async () => {
+    setViewportWidth(SIDEBAR_DESKTOP_BREAKPOINT - 1);
+    ui.setSidebarWidth(360);
+
+    renderLayout();
+    await tick();
+
+    expect(getHandle()).toBeNull();
+    expect(getSidebar().style.width).toBe("");
+  });
+
+  it("renders a clamped width on mount while preserving the stored preference", async () => {
+    const layoutWidth = 760;
+    const expectedWidth =
+      getClampedSidebarWidthForLayout(
+        SIDEBAR_WIDTH_STORAGE_MAX,
+        layoutWidth,
+      );
+
+    setViewportWidth(1280);
+    ui.setSidebarWidth(SIDEBAR_WIDTH_STORAGE_MAX);
+    mockLayoutWidthOnRender(layoutWidth);
+
+    renderLayout();
+    await tick();
+
+    expect(getSidebar().style.width).toBe(
+      `${expectedWidth}px`,
+    );
+    expect(ui.sidebarWidth).toBe(
+      SIDEBAR_WIDTH_STORAGE_MAX,
+    );
+  });
+
+  it("dragging updates ui.sidebarWidth", async () => {
+    setViewportWidth(1280);
+    ui.setSidebarWidth(SIDEBAR_WIDTH_DEFAULT);
+
+    renderLayout();
+    await tick();
+
+    mockLayoutWidth(1280);
+
+    const layout = getLayout();
+    const handle = getHandle();
+    expect(handle).not.toBeNull();
+
+    handle!.dispatchEvent(
+      new MouseEvent("pointerdown", {
+        bubbles: true,
+        clientX: SIDEBAR_WIDTH_DEFAULT,
+      }),
+    );
+    window.dispatchEvent(
+      new MouseEvent("pointermove", {
+        bubbles: true,
+        clientX: SIDEBAR_WIDTH_DEFAULT + 80,
+        buttons: 1,
+      }),
+    );
+    await tick();
+
+    expect(ui.sidebarWidth).toBe(SIDEBAR_WIDTH_DEFAULT + 80);
+    expect(getSidebar().style.width).toBe(
+      `${SIDEBAR_WIDTH_DEFAULT + 80}px`,
+    );
+    expect(layout.classList.contains("is-resizing")).toBe(true);
+    expect(document.body.classList.contains("sidebar-resizing")).toBe(
+      true,
+    );
+
+    window.dispatchEvent(
+      new MouseEvent("pointerup", {
+        bubbles: true,
+        clientX: SIDEBAR_WIDTH_DEFAULT + 80,
+      }),
+    );
+    await tick();
+
+    expect(layout.classList.contains("is-resizing")).toBe(false);
+    expect(document.body.classList.contains("sidebar-resizing")).toBe(
+      false,
+    );
+  });
+
+  it("dragging clamps to the computed minimum/max using mocked layout width", async () => {
+    const layoutWidth = 760;
+
+    setViewportWidth(1280);
+    ui.setSidebarWidth(SIDEBAR_WIDTH_DEFAULT);
+
+    renderLayout();
+    await tick();
+
+    mockLayoutWidth(layoutWidth);
+
+    await dragHandle(
+      SIDEBAR_WIDTH_DEFAULT,
+      SIDEBAR_WIDTH_DEFAULT + 240,
+    );
+
+    expect(ui.sidebarWidth).toBe(
+      getClampedSidebarWidthForLayout(
+        SIDEBAR_WIDTH_DEFAULT + 240,
+        layoutWidth,
+      ),
+    );
+
+    await dragHandle(280, -200);
+
+    expect(ui.sidebarWidth).toBe(
+      getClampedSidebarWidthForLayout(
+        SIDEBAR_WIDTH_MIN - 420,
+        layoutWidth,
+      ),
+    );
+  });
+
+  it("does not persist a clamped width for a click without drag movement", async () => {
+    const layoutWidth = 700;
+    const expectedWidth =
+      getClampedSidebarWidthForLayout(
+        SIDEBAR_WIDTH_STORAGE_MAX,
+        layoutWidth,
+      );
+
+    setViewportWidth(1280);
+    ui.setSidebarWidth(SIDEBAR_WIDTH_STORAGE_MAX);
+    mockLayoutWidthOnRender(layoutWidth);
+
+    renderLayout();
+    await tick();
+
+    const handle = getHandle();
+    expect(handle).not.toBeNull();
+
+    handle!.dispatchEvent(
+      new MouseEvent("pointerdown", {
+        bubbles: true,
+        clientX: expectedWidth,
+      }),
+    );
+    window.dispatchEvent(
+      new MouseEvent("pointerup", {
+        bubbles: true,
+        clientX: expectedWidth,
+      }),
+    );
+    await tick();
+
+    expect(getSidebar().style.width).toBe(
+      `${expectedWidth}px`,
+    );
+    expect(ui.sidebarWidth).toBe(
+      SIDEBAR_WIDTH_STORAGE_MAX,
+    );
+  });
+
+  it("preserves the stored preferred width when a drag stays inside the same clamp", async () => {
+    const layoutWidth = 760;
+    const expectedWidth =
+      getClampedSidebarWidthForLayout(
+        SIDEBAR_WIDTH_STORAGE_MAX,
+        layoutWidth,
+      );
+
+    setViewportWidth(1280);
+    ui.setSidebarWidth(SIDEBAR_WIDTH_STORAGE_MAX);
+    mockLayoutWidthOnRender(layoutWidth);
+
+    renderLayout();
+    await tick();
+
+    const handle = getHandle();
+    expect(handle).not.toBeNull();
+
+    handle!.dispatchEvent(
+      new MouseEvent("pointerdown", {
+        bubbles: true,
+        clientX: expectedWidth,
+      }),
+    );
+    window.dispatchEvent(
+      new MouseEvent("pointermove", {
+        bubbles: true,
+        clientX: expectedWidth + 120,
+        buttons: 1,
+      }),
+    );
+    await tick();
+    window.dispatchEvent(
+      new MouseEvent("pointerup", {
+        bubbles: true,
+        clientX: expectedWidth + 120,
+      }),
+    );
+    await tick();
+
+    expect(getSidebar().style.width).toBe(
+      `${expectedWidth}px`,
+    );
+    expect(ui.sidebarWidth).toBe(
+      SIDEBAR_WIDTH_STORAGE_MAX,
+    );
+  });
+
+  it("accounts for the resize handle gutter when clamping near the content minimum", async () => {
+    const layoutWidth = 1000;
+    const expectedWidth =
+      getClampedSidebarWidthForLayout(
+        SIDEBAR_WIDTH_STORAGE_MAX,
+        layoutWidth,
+      );
+
+    setViewportWidth(1280);
+    ui.setSidebarWidth(SIDEBAR_WIDTH_STORAGE_MAX);
+    mockLayoutWidthOnRender(layoutWidth);
+
+    renderLayout();
+    await tick();
+
+    expect(getSidebar().style.width).toBe(
+      `${expectedWidth}px`,
+    );
+    expect(
+      layoutWidth -
+        expectedWidth -
+        RESIZE_HANDLE_WIDTH -
+        SIDEBAR_BORDER_WIDTH,
+    ).toBe(480);
+  });
+
+  it("ignores non-primary mouse buttons on the resize handle", async () => {
+    setViewportWidth(1280);
+    ui.setSidebarWidth(SIDEBAR_WIDTH_DEFAULT);
+
+    renderLayout();
+    await tick();
+
+    mockLayoutWidth(1280);
+
+    const handle = getHandle();
+    const layout = getLayout();
+    expect(handle).not.toBeNull();
+
+    handle!.dispatchEvent(
+      new MouseEvent("pointerdown", {
+        bubbles: true,
+        button: 2,
+        buttons: 2,
+        clientX: SIDEBAR_WIDTH_DEFAULT,
+      }),
+    );
+    window.dispatchEvent(
+      new MouseEvent("pointermove", {
+        bubbles: true,
+        button: 2,
+        buttons: 2,
+        clientX: SIDEBAR_WIDTH_DEFAULT + 100,
+      }),
+    );
+    await tick();
+
+    expect(ui.sidebarWidth).toBe(SIDEBAR_WIDTH_DEFAULT);
+    expect(layout.classList.contains("is-resizing")).toBe(false);
+    expect(document.body.classList.contains("sidebar-resizing")).toBe(
+      false,
+    );
+  });
+
+  it("stops an active drag when a later pointermove reports no buttons pressed", async () => {
+    setViewportWidth(1280);
+    ui.setSidebarWidth(SIDEBAR_WIDTH_DEFAULT);
+
+    renderLayout();
+    await tick();
+
+    mockLayoutWidth(1280);
+
+    const layout = getLayout();
+    const handle = getHandle();
+    expect(handle).not.toBeNull();
+
+    handle!.dispatchEvent(
+      new MouseEvent("pointerdown", {
+        bubbles: true,
+        clientX: SIDEBAR_WIDTH_DEFAULT,
+      }),
+    );
+    window.dispatchEvent(
+      new MouseEvent("pointermove", {
+        bubbles: true,
+        clientX: SIDEBAR_WIDTH_DEFAULT + 60,
+        buttons: 1,
+      }),
+    );
+    await tick();
+
+    expect(ui.sidebarWidth).toBe(
+      SIDEBAR_WIDTH_DEFAULT + 60,
+    );
+    expect(layout.classList.contains("is-resizing")).toBe(true);
+    expect(document.body.classList.contains("sidebar-resizing")).toBe(
+      true,
+    );
+
+    window.dispatchEvent(
+      new MouseEvent("pointermove", {
+        bubbles: true,
+        clientX: SIDEBAR_WIDTH_DEFAULT + 120,
+        buttons: 0,
+      }),
+    );
+    await tick();
+
+    expect(ui.sidebarWidth).toBe(
+      SIDEBAR_WIDTH_DEFAULT + 60,
+    );
+    expect(layout.classList.contains("is-resizing")).toBe(false);
+    expect(document.body.classList.contains("sidebar-resizing")).toBe(
+      false,
+    );
+
+    window.dispatchEvent(
+      new MouseEvent("pointermove", {
+        bubbles: true,
+        clientX: SIDEBAR_WIDTH_DEFAULT + 180,
+        buttons: 0,
+      }),
+    );
+    await tick();
+
+    expect(ui.sidebarWidth).toBe(
+      SIDEBAR_WIDTH_DEFAULT + 60,
+    );
+    expect(layout.classList.contains("is-resizing")).toBe(false);
+    expect(document.body.classList.contains("sidebar-resizing")).toBe(
+      false,
+    );
+  });
+
+  it("ignores non-owning pointer events while resizing", async () => {
+    setViewportWidth(1280);
+    ui.setSidebarWidth(SIDEBAR_WIDTH_DEFAULT);
+
+    renderLayout();
+    await tick();
+
+    mockLayoutWidth(1280);
+
+    const layout = getLayout();
+    const handle = getHandle();
+    expect(handle).not.toBeNull();
+
+    handle!.dispatchEvent(
+      createPointerMouseEvent("pointerdown", {
+        clientX: SIDEBAR_WIDTH_DEFAULT,
+        pointerId: 1,
+      }),
+    );
+    window.dispatchEvent(
+      createPointerMouseEvent("pointermove", {
+        clientX: SIDEBAR_WIDTH_DEFAULT + 60,
+        buttons: 1,
+        pointerId: 1,
+      }),
+    );
+    await tick();
+
+    expect(ui.sidebarWidth).toBe(
+      SIDEBAR_WIDTH_DEFAULT + 60,
+    );
+    expect(layout.classList.contains("is-resizing")).toBe(true);
+    expect(document.body.classList.contains("sidebar-resizing")).toBe(
+      true,
+    );
+
+    window.dispatchEvent(
+      createPointerMouseEvent("pointermove", {
+        clientX: SIDEBAR_WIDTH_DEFAULT + 180,
+        buttons: 1,
+        pointerId: 2,
+      }),
+    );
+    window.dispatchEvent(
+      createPointerMouseEvent("pointerup", {
+        clientX: SIDEBAR_WIDTH_DEFAULT + 180,
+        pointerId: 2,
+      }),
+    );
+    window.dispatchEvent(
+      createPointerMouseEvent("pointercancel", {
+        clientX: SIDEBAR_WIDTH_DEFAULT + 180,
+        pointerId: 2,
+      }),
+    );
+    await tick();
+
+    expect(ui.sidebarWidth).toBe(
+      SIDEBAR_WIDTH_DEFAULT + 60,
+    );
+    expect(layout.classList.contains("is-resizing")).toBe(true);
+    expect(document.body.classList.contains("sidebar-resizing")).toBe(
+      true,
+    );
+
+    window.dispatchEvent(
+      createPointerMouseEvent("pointerup", {
+        clientX: SIDEBAR_WIDTH_DEFAULT + 60,
+        pointerId: 1,
+      }),
+    );
+    await tick();
+
+    expect(layout.classList.contains("is-resizing")).toBe(false);
+    expect(document.body.classList.contains("sidebar-resizing")).toBe(
+      false,
+    );
+    expect(ui.sidebarWidth).toBe(
+      SIDEBAR_WIDTH_DEFAULT + 60,
+    );
+  });
+
+  it("cleans up active drag listeners and body state on unmount", async () => {
+    setViewportWidth(1280);
+    ui.setSidebarWidth(SIDEBAR_WIDTH_DEFAULT);
+
+    renderLayout();
+    await tick();
+
+    mockLayoutWidth(1280);
+
+    const handle = getHandle();
+    expect(handle).not.toBeNull();
+
+    handle!.dispatchEvent(
+      new MouseEvent("pointerdown", {
+        bubbles: true,
+        clientX: SIDEBAR_WIDTH_DEFAULT,
+      }),
+    );
+    await tick();
+
+    expect(document.body.classList.contains("sidebar-resizing")).toBe(
+      true,
+    );
+
+    unmount(component!);
+    component = undefined;
+    await tick();
+
+    expect(document.body.classList.contains("sidebar-resizing")).toBe(
+      false,
+    );
+
+    window.dispatchEvent(
+      new MouseEvent("pointermove", {
+        bubbles: true,
+        clientX: SIDEBAR_WIDTH_DEFAULT + 120,
+      }),
+    );
+    window.dispatchEvent(
+      new MouseEvent("pointerup", {
+        bubbles: true,
+        clientX: SIDEBAR_WIDTH_DEFAULT + 120,
+      }),
+    );
+    await tick();
+
+    expect(ui.sidebarWidth).toBe(
+      SIDEBAR_WIDTH_DEFAULT,
+    );
+    expect(document.body.classList.contains("sidebar-resizing")).toBe(
+      false,
+    );
+  });
+});

From 0345afc51ea0da72fed18fff1096b2f30e821934 Mon Sep 17 00:00:00 2001
From: Trent Nelson <trent@trent.me>
Date: Tue, 24 Mar 2026 17:59:09 -0700
Subject: [PATCH 4/5] fix(ui): stop resize when sidebar closes

---
 .../layout/ThreeColumnLayout.svelte           |  2 +-
 .../layout/ThreeColumnLayout.test.ts          | 58 +++++++++++++++++++
 2 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/layout/ThreeColumnLayout.svelte b/frontend/src/lib/components/layout/ThreeColumnLayout.svelte
index 847e7e96..628c4340 100644
--- a/frontend/src/lib/components/layout/ThreeColumnLayout.svelte
+++ b/frontend/src/lib/components/layout/ThreeColumnLayout.svelte
@@ -254,7 +254,7 @@
   });
 
   $effect(() => {
-    if (!isDesktop && isResizing) {
+    if ((!isDesktop || !ui.sidebarOpen) && isResizing) {
       stopResizing();
     }
   });
diff --git a/frontend/src/lib/components/layout/ThreeColumnLayout.test.ts b/frontend/src/lib/components/layout/ThreeColumnLayout.test.ts
index a1127df6..62a51c9c 100644
--- a/frontend/src/lib/components/layout/ThreeColumnLayout.test.ts
+++ b/frontend/src/lib/components/layout/ThreeColumnLayout.test.ts
@@ -205,6 +205,8 @@ afterEach(() => {
   document.body.className = "";
   document.body.innerHTML = "";
   restoreMeasuredLayoutWidth?.();
+  ui.sidebarOpen = true;
+  ui.isMobileViewport = false;
   ui.setSidebarWidth(SIDEBAR_WIDTH_DEFAULT);
   setViewportWidth(SIDEBAR_DESKTOP_BREAKPOINT);
 });
@@ -491,6 +493,62 @@ describe("ThreeColumnLayout", () => {
     );
   });
 
+  it("stops an active resize when the sidebar closes mid-drag", async () => {
+    setViewportWidth(1280);
+    ui.sidebarOpen = true;
+    ui.setSidebarWidth(SIDEBAR_WIDTH_DEFAULT);
+
+    renderLayout();
+    await tick();
+
+    mockLayoutWidth(1280);
+
+    const layout = getLayout();
+    const handle = getHandle();
+    expect(handle).not.toBeNull();
+
+    handle!.dispatchEvent(
+      new MouseEvent("pointerdown", {
+        bubbles: true,
+        clientX: SIDEBAR_WIDTH_DEFAULT,
+      }),
+    );
+    window.dispatchEvent(
+      new MouseEvent("pointermove", {
+        bubbles: true,
+        clientX: SIDEBAR_WIDTH_DEFAULT + 60,
+        buttons: 1,
+      }),
+    );
+    await tick();
+
+    expect(layout.classList.contains("is-resizing")).toBe(true);
+    expect(document.body.classList.contains("sidebar-resizing")).toBe(
+      true,
+    );
+
+    ui.sidebarOpen = false;
+    await tick();
+
+    expect(getHandle()).toBeNull();
+    expect(layout.classList.contains("is-resizing")).toBe(false);
+    expect(document.body.classList.contains("sidebar-resizing")).toBe(
+      false,
+    );
+
+    const widthAfterClose = ui.sidebarWidth;
+    window.dispatchEvent(
+      new MouseEvent("pointermove", {
+        bubbles: true,
+        clientX: SIDEBAR_WIDTH_DEFAULT + 140,
+        buttons: 1,
+      }),
+    );
+    await tick();
+
+    expect(ui.sidebarWidth).toBe(widthAfterClose);
+  });
+
   it("stops an active drag when a later pointermove reports no buttons pressed", async () => {
     setViewportWidth(1280);
     ui.setSidebarWidth(SIDEBAR_WIDTH_DEFAULT);

From cfb764c91bcaa86c9ccb501912c9194aee7b0412 Mon Sep 17 00:00:00 2001
From: Trent Nelson <trent@trent.me>
Date: Tue, 24 Mar 2026 18:48:33 -0700
Subject: [PATCH 5/5] fix(ui): align sidebar resize breakpoint

---
 .../layout/ThreeColumnLayout.test.ts          | 21 ++++++++++++++++++-
 .../components/layout/sidebar-width.test.ts   |  8 +++----
 .../lib/components/layout/sidebar-width.ts    |  2 +-
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/layout/ThreeColumnLayout.test.ts b/frontend/src/lib/components/layout/ThreeColumnLayout.test.ts
index 62a51c9c..eb49ff3e 100644
--- a/frontend/src/lib/components/layout/ThreeColumnLayout.test.ts
+++ b/frontend/src/lib/components/layout/ThreeColumnLayout.test.ts
@@ -212,8 +212,27 @@ afterEach(() => {
 });
 
 describe("ThreeColumnLayout", () => {
+  it("renders the resize handle at the 768px layout breakpoint", async () => {
+    const expectedWidth = getClampedSidebarWidthForLayout(
+      320,
+      768,
+    );
+
+    setViewportWidth(768);
+    ui.sidebarOpen = true;
+    ui.setSidebarWidth(320);
+
+    renderLayout();
+    await tick();
+
+    expect(getHandle()).not.toBeNull();
+    expect(getSidebar().style.width).toBe(
+      `${expectedWidth}px`,
+    );
+  });
+
   it("renders handle on desktop layouts", async () => {
-    setViewportWidth(SIDEBAR_DESKTOP_BREAKPOINT);
+    setViewportWidth(1280);
     ui.setSidebarWidth(320);
 
     renderLayout();
diff --git a/frontend/src/lib/components/layout/sidebar-width.test.ts b/frontend/src/lib/components/layout/sidebar-width.test.ts
index 4b2e5ae6..5a6009aa 100644
--- a/frontend/src/lib/components/layout/sidebar-width.test.ts
+++ b/frontend/src/lib/components/layout/sidebar-width.test.ts
@@ -18,7 +18,7 @@ describe("sidebar width helpers", () => {
     expect(SIDEBAR_WIDTH_MIN).toBe(220);
     expect(SIDEBAR_WIDTH_STORAGE_MAX).toBe(520);
     expect(SIDEBAR_CONTENT_MIN).toBe(480);
-    expect(SIDEBAR_DESKTOP_BREAKPOINT).toBe(960);
+    expect(SIDEBAR_DESKTOP_BREAKPOINT).toBe(768);
   });
 
   it("falls back to the default for invalid stored values", () => {
@@ -45,9 +45,9 @@ describe("sidebar width helpers", () => {
     expect(clampStoredSidebarWidth("999")).toBe(SIDEBAR_WIDTH_STORAGE_MAX);
   });
 
-  it("treats 960px and wider as desktop layout", () => {
-    expect(isDesktopSidebarLayout(959)).toBe(false);
-    expect(isDesktopSidebarLayout(960)).toBe(true);
+  it("treats 768px and wider as desktop layout", () => {
+    expect(isDesktopSidebarLayout(767)).toBe(false);
+    expect(isDesktopSidebarLayout(768)).toBe(true);
   });
 
   it("never clamps the layout width below the sidebar minimum", () => {
diff --git a/frontend/src/lib/components/layout/sidebar-width.ts b/frontend/src/lib/components/layout/sidebar-width.ts
index 10cfe331..cb05c8f8 100644
--- a/frontend/src/lib/components/layout/sidebar-width.ts
+++ b/frontend/src/lib/components/layout/sidebar-width.ts
@@ -3,7 +3,7 @@ export const SIDEBAR_WIDTH_DEFAULT = 260;
 export const SIDEBAR_WIDTH_MIN = 220;
 export const SIDEBAR_WIDTH_STORAGE_MAX = 520;
 export const SIDEBAR_CONTENT_MIN = 480;
-export const SIDEBAR_DESKTOP_BREAKPOINT = 960;
+export const SIDEBAR_DESKTOP_BREAKPOINT = 768;
 
 export function clampStoredSidebarWidth(value: unknown): number {
   const numericValue =