fix(ui): improve routine properties panel and history UX (#5703)

## Thinking Path

> - Paperclip orchestrates AI agents for zero-human companies.
> - Routines are the recurring-work surface where operators configure
schedules, executions, activity, and revision history.
> - The routine detail view uses a contextual right properties panel for
triggers, runs, activity, and history.
> - That panel was too cramped for routine workflows: the routine header
could collapse at constrained widths, and revision previews/comparisons
were trying to live inside the same narrow panel.
> - This pull request makes the routine properties panel wider and
responsive without changing the default panel behavior for other pages.
> - It also moves routine revision viewing and comparison into focused
dialogs so history stays usable instead of rendering dense revision
content inside the right panel.
> - The benefit is a cleaner routine workflow: triggers remain
scannable, the main routine stays readable, and revisions can be
inspected, compared, and restored without fighting the sidebar width.

## What Changed

- Added optional per-panel layout options for storage key, default
width, min/max width, and compact viewport behavior.
- Set the routine properties panel to use its own 400px default width
and persistence key, while compacting to 320px on narrower viewports.
- Made the shared resizable sidebar support right-side panes, custom
width bounds, compact max width, and keyboard resizing.
- Fixed the routine detail header so title text and action controls
remain readable beside the properties panel at constrained widths.
- Reworked routine history so selecting a revision opens a read-only
snapshot dialog instead of trying to render the whole revision inside
the right panel.
- Added a side-by-side current-vs-selected revision comparison dialog
with clearer diff markers for structured fields, triggers, and
variables.
- Added focused tests for the resizable pane and routine history
behavior.

## Verification

- `pnpm vitest run ui/src/components/RoutineHistoryTab.test.tsx
ui/src/components/ResizableSidebarPane.test.tsx`
- `pnpm --filter @paperclipai/ui typecheck`
- `pnpm -r typecheck`
- `git diff --check`
- Browser E2E in TestCo at `http://localhost:3100/TES/dashboard`:
  - created and edited a routine
  - added, edited, toggled, and deleted schedule triggers
  - paused automation
  - ran the routine and stopped the live run
- verified runs, activity, history, snapshot dialog, compare mode,
restore confirmation, routine list, recent runs, row actions, panel
close/reopen, and constrained-width layout

### Screenshots

#### Trigger Panel Width

| Before | After |
| --- | --- |
| <img width="1741" height="1289" alt="triggers-before"
src="https://github.com/user-attachments/assets/2a391769-c355-4219-8da3-d1ea18698430"
/> | <img width="1742" height="1288" alt="triggers-after"
src="https://github.com/user-attachments/assets/9e818978-283c-49a3-9401-879be550c67b"
/> |

#### History Panel

Before, selecting a revision attempted to show dense revision content
inside the already narrow right panel. After, history remains a compact
list and revision details open separately.

| Before | After |
| --- | --- |
| <img width="1739" height="1289" alt="history-before"
src="https://github.com/user-attachments/assets/eaea4f3d-bb65-4af6-b67f-3ba3026fe0c9"
/> | <img width="1741" height="1290" alt="history-after"
src="https://github.com/user-attachments/assets/4c139238-8494-4438-89e1-4277d05bc3aa"
/> |

#### Revision Snapshot

The selected revision now opens in a dedicated read-only dialog instead
of crowding the properties panel.

<img width="1740" height="1289" alt="revision-single"
src="https://github.com/user-attachments/assets/f930f50f-7016-434b-bd81-d8d97304c528"
/>

#### Revision Compare

Historical revisions can be compared side-by-side with the current
revision, including changed structured fields and trigger differences.

<img width="1740" height="1287" alt="revision-compare"
src="https://github.com/user-attachments/assets/5640201e-de4f-446b-8941-1b0f140c56d7"
/>

## Risks

- Low to moderate UI risk: the shared resizable pane API gained optional
layout parameters, but existing callers keep the previous defaults.
- Routine history now uses dialogs for revision viewing and comparison,
so reviewers should confirm the new workflow feels right for restore and
compare.
- Routine panel width now persists under a routine-specific key, so
previous global properties panel width preferences do not carry into
routines.

> For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and
discuss it in `#dev` before opening the PR. Feature PRs that overlap
with planned core work may need to be redirected — check the roadmap
first. See `CONTRIBUTING.md`.

## Model Used

- OpenAI Codex, GPT-5 coding agent in Codex Desktop, tool-enabled with
local shell, git, and in-app browser automation. Context window size was
not exposed in this session.

## Checklist

- [x] I have included a thinking path that traces from project context
to this change
- [x] I have specified the model used (with version and capability
details)
- [x] I have checked ROADMAP.md and confirmed this PR does not duplicate
planned core work
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [x] If this change affects the UI, I have included before/after
screenshots
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] I will address all Greptile and reviewer comments before
requesting merge

ui/src/components/PropertiesPanel.tsx

@@ -1,29 +1,59 @@
 import { X } from "lucide-react";
 import { usePanel } from "../context/PanelContext";
 import { Button } from "@/components/ui/button";
-import { ScrollArea } from "@/components/ui/scroll-area";
+import { ResizableSidebarPane } from "./ResizableSidebarPane";
+
+const PROPERTIES_PANEL_DEFAULT = 320;
+const PROPERTIES_PANEL_MIN = 320;
+const PROPERTIES_PANEL_MAX = 640;
+const PROPERTIES_PANEL_STORAGE_KEY = "paperclip.properties.width";
 
 export function PropertiesPanel() {
-  const { panelContent, panelVisible, setPanelVisible } = usePanel();
+  const { panelContent, panelLayout, panelVisible, setPanelVisible } = usePanel();
 
   if (!panelContent) return null;
 
+  const storageKey = panelLayout.storageKey ?? PROPERTIES_PANEL_STORAGE_KEY;
+  const defaultWidth = panelLayout.defaultWidth ?? PROPERTIES_PANEL_DEFAULT;
+  const minWidth = panelLayout.minWidth ?? PROPERTIES_PANEL_MIN;
+  const maxWidth = panelLayout.maxWidth ?? PROPERTIES_PANEL_MAX;
+  const compactBelowViewport = panelLayout.compactBelowViewport;
+  const compactMaxWidth = panelLayout.compactMaxWidth;
+
   return (
-    <aside
+    <aside className="hidden md:flex border-l border-border bg-card shrink-0 h-full">
-      className="hidden md:flex border-l border-border bg-card flex-col shrink-0 overflow-hidden transition-[width,opacity] duration-200 ease-in-out h-full"
+      <ResizableSidebarPane
-      style={{ width: panelVisible ? 320 : 0, opacity: panelVisible ? 1 : 0 }}
+        // Remount when the layout key changes so the stored width is re-read fresh.
-    >
+        key={storageKey}
-      <div className="w-80 flex-1 flex flex-col min-w-[320px] min-h-0">
+        open={panelVisible}
-        <div className="flex items-center justify-between px-4 py-2 border-b border-border">
+        resizable
-          <span className="text-sm font-medium">Properties</span>
+        side="right"
-          <Button variant="ghost" size="icon-xs" onClick={() => setPanelVisible(false)}>
+        storageKey={storageKey}
-            <X className="h-4 w-4" />
+        defaultWidth={defaultWidth}
-          </Button>
+        minWidth={minWidth}
+        maxWidth={maxWidth}
+        compactBelowViewport={compactBelowViewport}
+        compactMaxWidth={compactMaxWidth}
+        widthVariable="--properties-panel-width"
+        className="h-full"
+      >
+        <div className="flex h-full w-full flex-col min-h-0">
+          <div className="flex items-center justify-between px-4 py-2 border-b border-border">
+            <span className="text-sm font-medium">Properties</span>
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              onClick={() => setPanelVisible(false)}
+              aria-label="Close properties panel"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+          <div className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden">
+            <div className="p-4 min-w-0">{panelContent}</div>
+          </div>
         </div>
-        <ScrollArea className="flex-1">
+      </ResizableSidebarPane>
-          <div className="p-4">{panelContent}</div>
-        </ScrollArea>
-      </div>
     </aside>
   );
 }

ui/src/components/ResizableSidebarPane.test.tsx

@@ -17,8 +17,10 @@ function pointerEvent(type: string, clientX: number) {
 describe("ResizableSidebarPane", () => {
   let container: HTMLDivElement;
   let root: Root;
+  let originalInnerWidth: number;
 
   beforeEach(() => {
+    originalInnerWidth = window.innerWidth;
     window.localStorage.clear();
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -31,6 +33,8 @@ describe("ResizableSidebarPane", () => {
     });
     container.remove();
     window.localStorage.clear();
+    document.documentElement.style.removeProperty("--test-sidebar-width");
+    setInnerWidth(originalInnerWidth);
   });
 
   function pane() {
@@ -41,6 +45,14 @@ describe("ResizableSidebarPane", () => {
     return container.querySelector('[role="separator"]') as HTMLDivElement | null;
   }
 
+  function setInnerWidth(width: number) {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: width,
+    });
+  }
+
   it("uses a persisted width when open", () => {
     window.localStorage.setItem("test.sidebar.width", "320");
 
@@ -118,4 +130,135 @@ describe("ResizableSidebarPane", () => {
     expect(handle()).toBeNull();
     expect(pane().style.width).toBe("240px");
   });
+
+  it("supports custom defaults and bounds", () => {
+    act(() => {
+      root.render(
+        <ResizableSidebarPane
+          open
+          resizable
+          storageKey="test.properties.width"
+          defaultWidth={400}
+          minWidth={320}
+          maxWidth={640}
+        >
+          <div>Properties</div>
+        </ResizableSidebarPane>,
+      );
+    });
+
+    expect(pane().style.width).toBe("400px");
+    expect(handle()?.getAttribute("aria-valuemin")).toBe("320");
+    expect(handle()?.getAttribute("aria-valuemax")).toBe("640");
+  });
+
+  it("uses right-side drag and keyboard semantics", () => {
+    act(() => {
+      root.render(
+        <ResizableSidebarPane
+          open
+          resizable
+          side="right"
+          storageKey="test.properties.width"
+          defaultWidth={400}
+          minWidth={320}
+          maxWidth={640}
+        >
+          <div>Properties</div>
+        </ResizableSidebarPane>,
+      );
+    });
+
+    const separator = handle();
+    expect(separator).not.toBeNull();
+    separator!.setPointerCapture = vi.fn();
+
+    act(() => {
+      separator!.dispatchEvent(pointerEvent("pointerdown", 400));
+      separator!.dispatchEvent(pointerEvent("pointermove", 360));
+      separator!.dispatchEvent(pointerEvent("pointerup", 360));
+    });
+
+    expect(pane().style.width).toBe("440px");
+    expect(window.localStorage.getItem("test.properties.width")).toBe("440");
+
+    act(() => {
+      separator?.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true }));
+    });
+
+    expect(pane().style.width).toBe("456px");
+    expect(window.localStorage.getItem("test.properties.width")).toBe("456");
+  });
+
+  it("exposes the visible width as a CSS variable", () => {
+    act(() => {
+      root.render(
+        <ResizableSidebarPane
+          open
+          resizable
+          storageKey="test.properties.width"
+          defaultWidth={400}
+          minWidth={320}
+          maxWidth={640}
+          widthVariable="--test-sidebar-width"
+        >
+          <div>Properties</div>
+        </ResizableSidebarPane>,
+      );
+    });
+
+    expect(document.documentElement.style.getPropertyValue("--test-sidebar-width")).toBe("400px");
+
+    act(() => {
+      root.render(
+        <ResizableSidebarPane
+          open={false}
+          resizable
+          storageKey="test.properties.width"
+          defaultWidth={400}
+          minWidth={320}
+          maxWidth={640}
+          widthVariable="--test-sidebar-width"
+        >
+          <div>Properties</div>
+        </ResizableSidebarPane>,
+      );
+    });
+
+    expect(document.documentElement.style.getPropertyValue("--test-sidebar-width")).toBe("0px");
+  });
+
+  it("clamps to compact width below the configured viewport without overwriting the stored wide width", () => {
+    window.localStorage.setItem("test.properties.width", "520");
+    setInnerWidth(900);
+
+    act(() => {
+      root.render(
+        <ResizableSidebarPane
+          open
+          resizable
+          storageKey="test.properties.width"
+          defaultWidth={400}
+          minWidth={320}
+          maxWidth={640}
+          compactBelowViewport={1024}
+          compactMaxWidth={320}
+        >
+          <div>Properties</div>
+        </ResizableSidebarPane>,
+      );
+    });
+
+    expect(pane().style.width).toBe("320px");
+    expect(handle()).toBeNull();
+    expect(window.localStorage.getItem("test.properties.width")).toBe("520");
+
+    act(() => {
+      setInnerWidth(1200);
+      window.dispatchEvent(new Event("resize"));
+    });
+
+    expect(pane().style.width).toBe("520px");
+    expect(handle()?.getAttribute("aria-valuemax")).toBe("640");
+  });
 });

ui/src/components/ResizableSidebarPane.tsx

@@ -15,29 +15,29 @@ const MIN_SIDEBAR_WIDTH = 208;
 const MAX_SIDEBAR_WIDTH = 420;
 const SIDEBAR_WIDTH_STEP = 16;
 
-function clampSidebarWidth(width: number) {
+function clampSidebarWidth(width: number, min: number, max: number) {
-  return Math.min(MAX_SIDEBAR_WIDTH, Math.max(MIN_SIDEBAR_WIDTH, width));
+  return Math.min(max, Math.max(min, width));
 }
 
-function readStoredSidebarWidth(storageKey: string) {
+function readStoredSidebarWidth(storageKey: string, fallback: number, min: number, max: number) {
-  if (typeof window === "undefined") return DEFAULT_SIDEBAR_WIDTH;
+  if (typeof window === "undefined") return fallback;
 
   try {
     const stored = window.localStorage.getItem(storageKey);
-    if (!stored) return DEFAULT_SIDEBAR_WIDTH;
+    if (!stored) return fallback;
     const parsed = Number.parseInt(stored, 10);
-    if (!Number.isFinite(parsed)) return DEFAULT_SIDEBAR_WIDTH;
+    if (!Number.isFinite(parsed)) return fallback;
-    return clampSidebarWidth(parsed);
+    return clampSidebarWidth(parsed, min, max);
   } catch {
-    return DEFAULT_SIDEBAR_WIDTH;
+    return fallback;
   }
 }
 
-function writeStoredSidebarWidth(storageKey: string, width: number) {
+function writeStoredSidebarWidth(storageKey: string, width: number, min: number, max: number) {
   if (typeof window === "undefined") return;
 
   try {
-    window.localStorage.setItem(storageKey, String(clampSidebarWidth(width)));
+    window.localStorage.setItem(storageKey, String(clampSidebarWidth(width, min, max)));
   } catch {
     // Storage can be unavailable in private contexts; resizing should still work.
   }
@@ -49,25 +49,68 @@ type ResizableSidebarPaneProps = {
   resizable?: boolean;
   storageKey?: string;
   className?: string;
+  /** Which side of the viewport this pane sits on. Determines handle position and drag direction. */
+  side?: "left" | "right";
+  defaultWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  /** Below this viewport width, clamp the pane to compactMaxWidth. */
+  compactBelowViewport?: number;
+  compactMaxWidth?: number;
+  /** Optional CSS custom property name to expose the live pane width on :root (e.g. "--properties-panel-width"). */
+  widthVariable?: string;
 };
 
+function readViewportWidth() {
+  if (typeof window === "undefined") return Number.POSITIVE_INFINITY;
+  return window.innerWidth;
+}
+
 export function ResizableSidebarPane({
   children,
   open,
   resizable = false,
   storageKey = "paperclip.sidebar.width",
   className,
+  side = "left",
+  defaultWidth = DEFAULT_SIDEBAR_WIDTH,
+  minWidth = MIN_SIDEBAR_WIDTH,
+  maxWidth = MAX_SIDEBAR_WIDTH,
+  compactBelowViewport,
+  compactMaxWidth,
+  widthVariable,
 }: ResizableSidebarPaneProps) {
-  const [width, setWidth] = useState(() => readStoredSidebarWidth(storageKey));
+  const [viewportWidth, setViewportWidth] = useState(readViewportWidth);
+  const compactModeActive =
+    compactBelowViewport !== undefined
+    && compactMaxWidth !== undefined
+    && viewportWidth < compactBelowViewport;
+  const effectiveMaxWidth =
+    compactModeActive
+      ? Math.max(minWidth, Math.min(maxWidth, compactMaxWidth))
+      : maxWidth;
+  const canResizeAtCurrentViewport = effectiveMaxWidth > minWidth;
+  const fallbackWidth = clampSidebarWidth(defaultWidth, minWidth, effectiveMaxWidth);
+  const [width, setWidth] = useState(() =>
+    readStoredSidebarWidth(storageKey, fallbackWidth, minWidth, effectiveMaxWidth),
+  );
   const [isResizing, setIsResizing] = useState(false);
   const widthRef = useRef(width);
   const dragState = useRef<{ startX: number; startWidth: number } | null>(null);
 
   useEffect(() => {
-    const storedWidth = readStoredSidebarWidth(storageKey);
+    if (typeof window === "undefined") return;
+
+    const handleResize = () => setViewportWidth(window.innerWidth);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  useEffect(() => {
+    const storedWidth = readStoredSidebarWidth(storageKey, fallbackWidth, minWidth, effectiveMaxWidth);
     widthRef.current = storedWidth;
     setWidth(storedWidth);
-  }, [storageKey]);
+  }, [storageKey, fallbackWidth, minWidth, effectiveMaxWidth]);
 
   const visibleWidth = open ? width : 0;
   const paneStyle = useMemo(
@@ -75,14 +118,25 @@ export function ResizableSidebarPane({
     [visibleWidth],
   );
 
+  useEffect(() => {
+    if (!widthVariable || typeof document === "undefined") return;
+    const root = document.documentElement;
+    root.style.setProperty(widthVariable, `${visibleWidth}px`);
+    return () => {
+      root.style.removeProperty(widthVariable);
+    };
+  }, [widthVariable, visibleWidth]);
+
   const commitWidth = useCallback(
     (nextWidth: number) => {
-      const clamped = clampSidebarWidth(nextWidth);
+      const clamped = clampSidebarWidth(nextWidth, minWidth, effectiveMaxWidth);
       widthRef.current = clamped;
       setWidth(clamped);
-      writeStoredSidebarWidth(storageKey, clamped);
+      if (!compactModeActive) {
+        writeStoredSidebarWidth(storageKey, clamped, minWidth, maxWidth);
+      }
     },
-    [storageKey],
+    [storageKey, minWidth, maxWidth, effectiveMaxWidth, compactModeActive],
   );
 
   const handlePointerDown = useCallback(
@@ -101,12 +155,15 @@ export function ResizableSidebarPane({
     (event: PointerEvent<HTMLDivElement>) => {
       if (!dragState.current) return;
 
-      const nextWidth = dragState.current.startWidth + event.clientX - dragState.current.startX;
+      const delta = event.clientX - dragState.current.startX;
-      const clamped = clampSidebarWidth(nextWidth);
+      // For a right-side pane the handle is on the left edge, so dragging left increases width.
+      const directional = side === "right" ? -delta : delta;
+      const nextWidth = dragState.current.startWidth + directional;
+      const clamped = clampSidebarWidth(nextWidth, minWidth, effectiveMaxWidth);
       widthRef.current = clamped;
       setWidth(clamped);
     },
-    [],
+    [side, minWidth, effectiveMaxWidth],
   );
 
   const endResize = useCallback(() => {
@@ -114,28 +171,34 @@ export function ResizableSidebarPane({
 
     dragState.current = null;
     setIsResizing(false);
-    writeStoredSidebarWidth(storageKey, widthRef.current);
+    if (!compactModeActive) {
-  }, [storageKey]);
+      writeStoredSidebarWidth(storageKey, widthRef.current, minWidth, maxWidth);
+    }
+  }, [storageKey, minWidth, maxWidth, compactModeActive]);
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLDivElement>) => {
-      if (!open || !resizable) return;
+      if (!open || !resizable || !canResizeAtCurrentViewport) return;
 
-      if (event.key === "ArrowLeft") {
+      // Match drag semantics: on a right-side pane, ArrowLeft grows the pane.
-        event.preventDefault();
+      const growKey = side === "right" ? "ArrowLeft" : "ArrowRight";
-        commitWidth(width - SIDEBAR_WIDTH_STEP);
+      const shrinkKey = side === "right" ? "ArrowRight" : "ArrowLeft";
-      } else if (event.key === "ArrowRight") {
+
+      if (event.key === growKey) {
         event.preventDefault();
         commitWidth(width + SIDEBAR_WIDTH_STEP);
+      } else if (event.key === shrinkKey) {
+        event.preventDefault();
+        commitWidth(width - SIDEBAR_WIDTH_STEP);
       } else if (event.key === "Home") {
         event.preventDefault();
-        commitWidth(MIN_SIDEBAR_WIDTH);
+        commitWidth(minWidth);
       } else if (event.key === "End") {
         event.preventDefault();
-        commitWidth(MAX_SIDEBAR_WIDTH);
+        commitWidth(effectiveMaxWidth);
       }
     },
-    [commitWidth, open, resizable, width],
+    [commitWidth, open, resizable, side, width, minWidth, effectiveMaxWidth, canResizeAtCurrentViewport],
   );
 
   return (
@@ -148,17 +211,18 @@ export function ResizableSidebarPane({
       style={paneStyle}
     >
       {children}
-      {resizable && open ? (
+      {resizable && open && canResizeAtCurrentViewport ? (
         <div
           role="separator"
           aria-label="Resize sidebar"
           aria-orientation="vertical"
-          aria-valuemin={MIN_SIDEBAR_WIDTH}
+          aria-valuemin={minWidth}
-          aria-valuemax={MAX_SIDEBAR_WIDTH}
+          aria-valuemax={effectiveMaxWidth}
           aria-valuenow={width}
           tabIndex={0}
           className={cn(
-            "absolute inset-y-0 right-0 z-20 w-3 cursor-col-resize touch-none outline-none",
+            "absolute inset-y-0 z-20 w-3 cursor-col-resize touch-none outline-none",
+            side === "right" ? "left-0" : "right-0",
             "before:absolute before:inset-y-0 before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-transparent before:transition-colors",
             "hover:before:bg-border focus-visible:before:bg-ring",
             isResizing && "before:bg-ring",

ui/src/components/RoutineHistoryTab.test.tsx

@@ -301,6 +301,8 @@ describe("RoutineHistoryTab", () => {
     });
     await flush();
     expect(container.querySelector("[data-testid='dialog']")).not.toBeNull();
+    expect(container.textContent).not.toContain("Viewing revision 1 (read-only)");
+    expect(container.textContent).toContain("Restore revision 1?");
     const confirmButtons = Array.from(container.querySelectorAll("button")).filter((b) =>
       (b.textContent ?? "").includes("Restore as revision 3"),
     );

ui/src/components/RoutineHistoryTab.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { History as HistoryIcon, RotateCcw, Search } from "lucide-react";
+import { History as HistoryIcon, RotateCcw } from "lucide-react";
 import type {
   Routine,
   RoutineRevision,
@@ -13,7 +13,6 @@ import {
 } from "../api/routines";
 import { ApiError } from "../api/client";
 import { queryKeys } from "../lib/queryKeys";
-import { buildLineDiff, type DiffRow } from "../lib/line-diff";
 import { relativeTime } from "../lib/utils";
 import { useToastActions } from "../context/ToastContext";
 import { Button } from "@/components/ui/button";
@@ -65,10 +64,11 @@ export function RoutineHistoryTab({
   const queryClient = useQueryClient();
   const { pushToast } = useToastActions();
   const [selectedRevisionId, setSelectedRevisionId] = useState<string | null>(null);
+  const [snapshotOpen, setSnapshotOpen] = useState(false);
+  const [compareOn, setCompareOn] = useState(false);
   const [highlightedRevisionId, setHighlightedRevisionId] = useState<string | null>(null);
   const [showOlder, setShowOlder] = useState(false);
   const [confirmOpen, setConfirmOpen] = useState(false);
-  const [diffOpen, setDiffOpen] = useState(false);
   const [restoreSummary, setRestoreSummary] = useState("");
 
   const revisionsQuery = useQuery({
@@ -86,12 +86,6 @@ export function RoutineHistoryTab({
     [sortedRevisions, routine.latestRevisionId],
   );
 
-  useEffect(() => {
-    if (selectedRevisionId === null && currentRevision) {
-      setSelectedRevisionId(currentRevision.id);
-    }
-  }, [currentRevision, selectedRevisionId]);
-
   const selectedRevision = useMemo(
     () => sortedRevisions.find((r) => r.id === selectedRevisionId) ?? null,
     [sortedRevisions, selectedRevisionId],
@@ -120,6 +114,8 @@ export function RoutineHistoryTab({
       onRestoreSecretMaterials(data);
       onRestored?.(data);
       setConfirmOpen(false);
+      setSnapshotOpen(false);
+      setCompareOn(false);
       setRestoreSummary("");
       setSelectedRevisionId(data.revision.id);
       setHighlightedRevisionId(data.revision.id);
@@ -150,15 +146,15 @@ export function RoutineHistoryTab({
   const handleSelectRevision = (revisionId: string) => {
     if (isEditDirty) return;
     setSelectedRevisionId(revisionId);
-  };
+    setCompareOn(false);
-
+    setSnapshotOpen(true);
-  const handleReturnToCurrent = () => {
-    if (currentRevision) setSelectedRevisionId(currentRevision.id);
   };
 
   const openRestoreConfirm = () => {
     if (!selectedRevision || !isHistoricalSelected) return;
     setRestoreSummary("");
+    setSnapshotOpen(false);
+    setCompareOn(false);
     setConfirmOpen(true);
   };
 
@@ -172,7 +168,7 @@ export function RoutineHistoryTab({
 
   if (revisionsQuery.isLoading) {
     return (
-      <div className="grid gap-5 md:grid-cols-[300px_minmax(0,1fr)]">
+      <div className="grid gap-5">
         <div className="space-y-2">
           {Array.from({ length: 5 }).map((_, idx) => (
             <Skeleton key={idx} className="h-10 w-full" />
@@ -204,64 +200,55 @@ export function RoutineHistoryTab({
   const onlyBootstrapRevision = revisions.length <= 1;
 
   return (
-    <div className="grid gap-5 md:grid-cols-[300px_minmax(0,1fr)]">
+    <div className="grid gap-5">
-      <RevisionList
+      {isEditDirty && (
-        revisions={visibleRevisions}
+        <ConflictBanner
-        latestRevisionId={routine.latestRevisionId}
+          dirtyFields={dirtyFields}
-        selectedRevisionId={selectedRevisionId}
+          onDiscard={onDiscardEdits}
-        highlightedRevisionId={highlightedRevisionId}
+          onSave={onSaveEdits}
-        isEditDirty={isEditDirty}
+        />
-        totalRevisions={sortedRevisions.length}
+      )}
-        onSelect={handleSelectRevision}
+      {!isEditDirty && onlyBootstrapRevision ? (
-        onShowOlder={() => setShowOlder(true)}
+        <div className="space-y-2">
-        showOlder={showOlder}
+          <EmptyState icon={HistoryIcon} message="No edits yet" />
-      />
+          <p className="text-center text-xs text-muted-foreground">
-      <div className="space-y-4 min-w-0">
+            Revision 1 is the only history this routine has. Saving an edit creates the first
-        {isEditDirty && (
+            additional revision.
-          <ConflictBanner
+          </p>
-            dirtyFields={dirtyFields}
+        </div>
-            onDiscard={onDiscardEdits}
+      ) : (
-            onSave={onSaveEdits}
+        <RevisionList
-          />
+          revisions={visibleRevisions}
-        )}
+          latestRevisionId={routine.latestRevisionId}
-        {!isEditDirty && onlyBootstrapRevision ? (
+          selectedRevisionId={selectedRevisionId}
-          <div className="space-y-2">
+          highlightedRevisionId={highlightedRevisionId}
-            <EmptyState
+          isEditDirty={isEditDirty}
-              icon={HistoryIcon}
+          totalRevisions={sortedRevisions.length}
-              message="No edits yet"
+          onSelect={handleSelectRevision}
-            />
+          onShowOlder={() => setShowOlder(true)}
-            <p className="text-center text-xs text-muted-foreground">
+          showOlder={showOlder}
-              Revision 1 is the only history this routine has. Saving an edit creates the first
+        />
-              additional revision.
+      )}
-            </p>
+
-          </div>
+      {selectedRevision && (
-        ) : (
+        <RevisionSnapshotDialog
-          selectedRevision && (
+          open={snapshotOpen}
-            <>
+          onOpenChange={(next) => {
-              {isHistoricalSelected && currentRevision && (
+            setSnapshotOpen(next);
-                <HistoricalPreviewBanner
+            if (!next) setCompareOn(false);
-                  revisionNumber={selectedRevision.revisionNumber}
+          }}
-                  nextRevisionNumber={currentRevision.revisionNumber + 1}
+          revision={selectedRevision}
-                  onReturn={handleReturnToCurrent}
+          currentRevision={currentRevision}
-                  onRestore={openRestoreConfirm}
+          isHistorical={isHistoricalSelected}
-                  pending={restoreMutation.isPending}
+          compareOn={compareOn}
-                />
+          onCompareToggle={setCompareOn}
-              )}
+          agents={agents}
-              <RevisionPreview
+          projects={projects}
-                revision={selectedRevision}
+          onRestore={openRestoreConfirm}
-                currentRevision={currentRevision}
+          restorePending={restoreMutation.isPending}
-                isHistorical={isHistoricalSelected}
+          highlighted={highlightedRevisionId === selectedRevision.id}
-                agents={agents}
+        />
-                projects={projects}
+      )}
-                onCompare={() => setDiffOpen(true)}
-                onRestore={openRestoreConfirm}
-                restorePending={restoreMutation.isPending}
-                highlighted={highlightedRevisionId === selectedRevision.id}
-              />
-            </>
-          )
-        )}
-      </div>
 
       {selectedRevision && currentRevision && (
         <RestoreConfirmDialog
@@ -279,67 +266,149 @@ export function RoutineHistoryTab({
           )}
         />
       )}
-
-      {currentRevision && selectedRevision && (
-        <RoutineRevisionDiffModal
-          open={diffOpen}
-          onOpenChange={setDiffOpen}
-          revisions={sortedRevisions}
-          initialOldRevisionId={selectedRevision.id}
-          initialNewRevisionId={currentRevision.id}
-          agents={agents}
-          projects={projects}
-          onRestore={(rev) => {
-            setSelectedRevisionId(rev.id);
-            setDiffOpen(false);
-            setRestoreSummary("");
-            setConfirmOpen(true);
-          }}
-        />
-      )}
     </div>
   );
 }
 
-function HistoricalPreviewBanner({
+function RevisionSnapshotDialog({
-  revisionNumber,
+  open,
-  nextRevisionNumber,
+  onOpenChange,
-  onReturn,
+  revision,
+  currentRevision,
+  isHistorical,
+  compareOn,
+  onCompareToggle,
+  agents,
+  projects,
   onRestore,
-  pending,
+  restorePending,
+  highlighted,
 }: {
-  revisionNumber: number;
+  open: boolean;
-  nextRevisionNumber: number;
+  onOpenChange: (open: boolean) => void;
-  onReturn: () => void;
+  revision: RoutineRevision;
+  currentRevision: RoutineRevision | null;
+  isHistorical: boolean;
+  compareOn: boolean;
+  onCompareToggle: (next: boolean) => void;
+  agents: AgentLookup;
+  projects: ProjectLookup;
   onRestore: () => void;
-  pending: boolean;
+  restorePending: boolean;
+  highlighted: boolean;
 }) {
+  const showCompare = compareOn && !!currentRevision && isHistorical;
   return (
-    <div className="rounded-md border border-amber-500/30 bg-amber-500/5 px-4 py-3">
+    <Dialog open={open} onOpenChange={onOpenChange}>
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+      <DialogContent
-        <div className="space-y-1">
+        className={`${
-          <p className="text-sm font-medium text-amber-200">
+          showCompare ? "!max-w-[95%]" : "!max-w-[90%]"
-            Viewing revision {revisionNumber} (read-only)
+        } w-full max-h-[85vh] overflow-hidden flex flex-col`}
-          </p>
+      >
-          <p className="text-xs text-muted-foreground">
+        <DialogHeader>
-            Restoring this revision creates a new revision {nextRevisionNumber} with the same content.
+          <div className="flex flex-wrap items-center justify-between gap-3 pr-8">
-            History stays append-only.
+            <DialogTitle>
-          </p>
+              {isHistorical
+                ? `Viewing revision ${revision.revisionNumber} (read-only)`
+                : `Revision ${revision.revisionNumber} (current)`}
+            </DialogTitle>
+            {isHistorical && currentRevision && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onCompareToggle(!compareOn)}
+              >
+                {compareOn ? "Hide current" : "Compare with current"}
+              </Button>
+            )}
+          </div>
+          {isHistorical && currentRevision && (
+            <DialogDescription>
+              Restoring this revision creates a new revision {currentRevision.revisionNumber + 1}{" "}
+              with the same content. History stays append-only.
+            </DialogDescription>
+          )}
+        </DialogHeader>
+        <div className="overflow-auto flex-1">
+          {showCompare && currentRevision ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-3 min-w-0">
+                <ColumnLabel
+                  tone="amber"
+                  title={`rev ${revision.revisionNumber} (selected)`}
+                />
+                <RevisionPreview
+                  revision={revision}
+                  currentRevision={currentRevision}
+                  agents={agents}
+                  projects={projects}
+                  highlighted={highlighted}
+                />
+              </div>
+              <div className="space-y-3 min-w-0">
+                <ColumnLabel
+                  tone="emerald"
+                  title={`rev ${currentRevision.revisionNumber} (current)`}
+                />
+                <RevisionPreview
+                  revision={currentRevision}
+                  currentRevision={revision}
+                  agents={agents}
+                  projects={projects}
+                  highlighted={false}
+                />
+              </div>
+            </div>
+          ) : (
+            <RevisionPreview
+              revision={revision}
+              currentRevision={currentRevision}
+              agents={agents}
+              projects={projects}
+              highlighted={highlighted}
+            />
+          )}
         </div>
-        <div className="flex flex-wrap items-center gap-2">
+        <DialogFooter className="justify-between sm:justify-between">
-          <Button variant="outline" size="sm" onClick={onReturn} disabled={pending}>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={restorePending}>
-            Return to current
+            Close
           </Button>
-          <Button size="sm" onClick={onRestore} disabled={pending}>
+          {isHistorical && (
-            <RotateCcw className="mr-1.5 h-3.5 w-3.5" />
+            <Button onClick={onRestore} disabled={restorePending}>
-            Restore as new revision
+              <RotateCcw className="mr-1.5 h-3.5 w-3.5" />
-          </Button>
+              Restore as new revision
-        </div>
+            </Button>
-      </div>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function DiffPill({ kind }: { kind: "differs" | "only-here" }) {
+  const label = kind === "differs" ? "differs" : "only here";
+  return (
+    <span className="ml-1 rounded-full border border-amber-400 bg-amber-300 px-1.5 text-[10px] font-medium uppercase tracking-[0.12em] text-amber-950">
+      {label}
+    </span>
+  );
+}
+
+function ColumnLabel({ tone, title }: { tone: "amber" | "emerald"; title: string }) {
+  const cls =
+    tone === "amber"
+      ? "border-amber-400 bg-amber-300 text-amber-950"
+      : "border-emerald-400 bg-emerald-300 text-emerald-950";
+  return (
+    <div
+      className={`rounded-md border px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.16em] ${cls}`}
+    >
+      {title}
     </div>
   );
 }
 
+
 function ConflictBanner({
   dirtyFields,
   onDiscard,
@@ -355,7 +424,7 @@ function ConflictBanner({
   const fieldsText = formatDirtyFieldList(labels);
   return (
     <div className="rounded-md border border-amber-500/30 bg-amber-500/5 px-4 py-3">
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+      <div className="flex flex-col gap-3">
         <div className="space-y-1">
           <p className="text-sm font-medium text-amber-200">Unsaved routine edits</p>
           <p className="text-xs text-muted-foreground">
@@ -472,31 +541,30 @@ function RevisionList({
 function RevisionPreview({
   revision,
   currentRevision,
-  isHistorical,
   agents,
   projects,
-  onCompare,
-  onRestore,
-  restorePending,
   highlighted,
 }: {
   revision: RoutineRevision;
   currentRevision: RoutineRevision | null;
-  isHistorical: boolean;
   agents: AgentLookup;
   projects: ProjectLookup;
-  onCompare: () => void;
-  onRestore: () => void;
-  restorePending: boolean;
   highlighted: boolean;
 }) {
   const snapshot = revision.snapshot.routine;
   const triggers = revision.snapshot.triggers;
   const currentSnapshot = currentRevision?.snapshot.routine ?? null;
-  const restoreLabel = isHistorical ? "Restore this revision" : "Restore this revision";
+  const otherTriggers = currentRevision?.snapshot.triggers ?? [];
+  const otherTriggerById = new Map(otherTriggers.map((t) => [t.id, t]));
+  const otherVariableByName = new Map(
+    (currentSnapshot?.variables ?? []).map((v) => [v.name, v]),
+  );
   const cardWrapper = `rounded-md border transition-colors duration-1000 ${
     highlighted ? "border-emerald-500/40 bg-emerald-500/10" : "border-border"
   }`;
+  const descriptionDiffers =
+    !!currentSnapshot &&
+    (currentSnapshot.description ?? "") !== (snapshot.description ?? "");
 
   const fieldRows: Array<{ key: string; label: string; value: string; differs: boolean }> = [
     {
@@ -543,33 +611,29 @@ function RevisionPreview({
     },
   ];
 
+  const triggerStatus = (trigger: RoutineRevisionSnapshotTriggerV1): "same" | "differs" | "only-here" => {
+    if (!currentRevision) return "same";
+    const other = otherTriggerById.get(trigger.id);
+    if (!other) return "only-here";
+    return JSON.stringify(other) === JSON.stringify(trigger) ? "same" : "differs";
+  };
+
+  const variableStatus = (variable: RoutineVariable): "same" | "differs" | "only-here" => {
+    if (!currentRevision) return "same";
+    const other = otherVariableByName.get(variable.name);
+    if (!other) return "only-here";
+    return JSON.stringify(other) === JSON.stringify(variable) ? "same" : "differs";
+  };
+
   return (
     <div className="space-y-4">
       <header className={`${cardWrapper} p-4 space-y-2`}>
-        <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="space-y-1 min-w-0">
-          <div className="space-y-1 min-w-0">
+          <p className="text-sm font-medium">rev {revision.revisionNumber}</p>
-            <p className="text-sm font-medium">rev {revision.revisionNumber}</p>
+          <p className="text-xs text-muted-foreground truncate">
-            <p className="text-xs text-muted-foreground truncate">
+            Saved {relativeTime(revision.createdAt)} by {getActorLabel(revision)}
-              Saved {relativeTime(revision.createdAt)} by {getActorLabel(revision)}
+            {revision.changeSummary ? ` · ${revision.changeSummary}` : ""}
-              {revision.changeSummary ? ` · ${revision.changeSummary}` : ""}
+          </p>
-            </p>
-          </div>
-          <div className="flex flex-wrap items-center gap-2">
-            <Button variant="outline" size="sm" onClick={onCompare}>
-              <Search className="mr-1.5 h-3.5 w-3.5" />
-              Compare with current
-            </Button>
-            <Button
-              size="sm"
-              onClick={onRestore}
-              disabled={!isHistorical || restorePending}
-              aria-label={restoreLabel}
-              className={!isHistorical ? "text-muted-foreground/60" : undefined}
-            >
-              <RotateCcw className="mr-1.5 h-3.5 w-3.5" />
-              {restoreLabel}
-            </Button>
-          </div>
         </div>
       </header>
 
@@ -577,17 +641,13 @@ function RevisionPreview({
         <p className="pb-2 text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
           Structured fields
         </p>
-        <div className="grid gap-3 md:grid-cols-2 divide-y md:divide-y-0 divide-border">
+        <div className="grid gap-3 divide-y divide-border">
           {fieldRows.map((row) => (
             <div key={row.key} className="space-y-1 p-2">
               <p className="text-[11px] uppercase tracking-wide text-muted-foreground">{row.label}</p>
               <p className="text-sm">
                 {row.value || <span className="text-muted-foreground">—</span>}
-                {row.differs && (
+                {row.differs && <DiffPill kind="differs" />}
-                  <span className="ml-2 rounded-full border border-amber-500/40 bg-amber-500/10 px-1.5 text-[10px] uppercase tracking-[0.12em] text-amber-200">
-                    differs from current
-                  </span>
-                )}
               </p>
             </div>
           ))}
@@ -595,9 +655,12 @@ function RevisionPreview({
       </div>
 
       <div className={`${cardWrapper} p-3 space-y-2`}>
-        <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+        <div className="flex items-center gap-2">
-          Description
+          <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
-        </p>
+            Description
+          </p>
+          {descriptionDiffers && <DiffPill kind="differs" />}
+        </div>
         <div className="rounded-md bg-background/40 p-3 text-sm leading-7">
           {snapshot.description ? (
             <MarkdownBody>{snapshot.description}</MarkdownBody>
@@ -615,22 +678,26 @@ function RevisionPreview({
           <p className="text-sm text-muted-foreground">No triggers in this revision.</p>
         ) : (
           <ul className="divide-y divide-border">
-            {triggers.map((trigger) => (
+            {triggers.map((trigger) => {
-              <li key={trigger.id} className="py-2 flex flex-wrap items-center gap-2 text-sm">
+              const status = triggerStatus(trigger);
-                <span className="rounded-full border border-border px-2 py-0.5 text-[10px] uppercase tracking-[0.12em] text-muted-foreground">
+              return (
-                  {trigger.kind}
+                <li key={trigger.id} className="py-2 flex flex-wrap items-center gap-2 text-sm">
-                </span>
+                  <span className="rounded-full border border-border px-2 py-0.5 text-[10px] uppercase tracking-[0.12em] text-muted-foreground">
-                <span className="font-medium">{trigger.label ?? trigger.kind}</span>
+                    {trigger.kind}
-                <span className="text-xs text-muted-foreground">
+                  </span>
-                  {summarizeTriggerSnapshot(trigger)}
+                  <span className="font-medium">{trigger.label ?? trigger.kind}</span>
-                </span>
+                  <span className="text-xs text-muted-foreground">
-                <span
+                    {summarizeTriggerSnapshot(trigger)}
-                  className={`ml-auto text-xs ${trigger.enabled ? "text-emerald-400" : "text-muted-foreground"}`}
+                  </span>
-                >
+                  {status !== "same" && <DiffPill kind={status} />}
-                  {trigger.enabled ? "enabled" : "disabled"}
+                  <span
-                </span>
+                    className={`ml-auto text-xs ${trigger.enabled ? "text-emerald-400" : "text-muted-foreground"}`}
-              </li>
+                  >
-            ))}
+                    {trigger.enabled ? "enabled" : "disabled"}
+                  </span>
+                </li>
+              );
+            })}
           </ul>
         )}
         <p className="text-xs text-muted-foreground">
@@ -645,14 +712,18 @@ function RevisionPreview({
             Variables ({snapshot.variables.length})
           </p>
           <ul className="divide-y divide-border">
-            {snapshot.variables.map((variable) => (
+            {snapshot.variables.map((variable) => {
-              <li key={variable.name} className="py-2 flex items-center justify-between text-sm">
+              const status = variableStatus(variable);
-                <span className="font-mono text-xs">{variable.name}</span>
+              return (
-                <span className="text-xs text-muted-foreground">
+                <li key={variable.name} className="py-2 flex flex-wrap items-center gap-2 text-sm">
-                  default: {formatVariableDefault(variable)}
+                  <span className="font-mono text-xs">{variable.name}</span>
-                </span>
+                  <span className="text-xs text-muted-foreground">
-              </li>
+                    default: {formatVariableDefault(variable)}
-            ))}
+                  </span>
+                  {status !== "same" && <DiffPill kind={status} />}
+                </li>
+              );
+            })}
           </ul>
         </div>
       )}
@@ -735,213 +806,6 @@ function RestoreConfirmDialog({
   );
 }
 
-function RoutineRevisionDiffModal({
-  open,
-  onOpenChange,
-  revisions,
-  initialOldRevisionId,
-  initialNewRevisionId,
-  agents,
-  projects,
-  onRestore,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  revisions: RoutineRevision[];
-  initialOldRevisionId: string;
-  initialNewRevisionId: string;
-  agents: AgentLookup;
-  projects: ProjectLookup;
-  onRestore: (revision: RoutineRevision) => void;
-}) {
-  const [leftId, setLeftId] = useState<string>(initialOldRevisionId);
-  const [rightId, setRightId] = useState<string>(initialNewRevisionId);
-
-  useEffect(() => {
-    if (open) {
-      setLeftId(initialOldRevisionId);
-      setRightId(initialNewRevisionId);
-    }
-  }, [open, initialOldRevisionId, initialNewRevisionId]);
-
-  const left = revisions.find((r) => r.id === leftId) ?? null;
-  const right = revisions.find((r) => r.id === rightId) ?? null;
-  const fieldChanges = useMemo(
-    () => (left && right ? computeFieldChanges(left, right, agents, projects) : []),
-    [left, right, agents, projects],
-  );
-  const descriptionDiff = useMemo<DiffRow[]>(
-    () => (left && right
-      ? buildLineDiff(left.snapshot.routine.description ?? "", right.snapshot.routine.description ?? "")
-      : []),
-    [left, right],
-  );
-  const newest = revisions[0] ?? null;
-  const leftIsHistorical = !!left && !!newest && left.id !== newest.id;
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="!max-w-[90%] w-full max-h-[85vh] overflow-hidden flex flex-col">
-        <DialogHeader>
-          <DialogTitle>Compare routine revisions</DialogTitle>
-        </DialogHeader>
-        <div className="flex flex-wrap items-center gap-3">
-          <RevisionPicker
-            label="Old"
-            value={leftId}
-            onChange={setLeftId}
-            revisions={revisions}
-            tone="red"
-          />
-          <RevisionPicker
-            label="New"
-            value={rightId}
-            onChange={setRightId}
-            revisions={revisions}
-            tone="green"
-          />
-        </div>
-        <div className="overflow-auto flex-1 space-y-4">
-          <section className="space-y-2">
-            <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
-              Field changes
-            </p>
-            {fieldChanges.length === 0 ? (
-              <p className="text-sm text-muted-foreground">No structural field changes.</p>
-            ) : (
-              <table className="w-full text-sm border border-border rounded-md overflow-hidden">
-                <thead>
-                  <tr className="text-xs uppercase tracking-wide bg-muted/30 text-muted-foreground">
-                    <th className="px-3 py-2 text-left">Field</th>
-                    <th className="px-3 py-2 text-left">Old value</th>
-                    <th className="px-3 py-2 text-left">New value</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {fieldChanges.map((change) => (
-                    <tr key={change.field} className="border-t border-border/60">
-                      <td className="px-3 py-2 align-top text-xs font-medium">{change.field}</td>
-                      <td className="px-3 py-2 align-top text-xs text-red-300">
-                        {change.oldValue ?? "—"}
-                      </td>
-                      <td className="px-3 py-2 align-top text-xs text-emerald-300">
-                        {change.newValue ?? "—"}
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            )}
-          </section>
-          <section className="space-y-2">
-            <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
-              Description diff
-            </p>
-            <DiffTable rows={descriptionDiff} />
-          </section>
-        </div>
-        <DialogFooter className="justify-between sm:justify-between">
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Close
-          </Button>
-          {leftIsHistorical && left && (
-            <Button onClick={() => onRestore(left)}>
-              <RotateCcw className="mr-1.5 h-3.5 w-3.5" />
-              Restore rev {left.revisionNumber} as new revision
-            </Button>
-          )}
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function RevisionPicker({
-  label,
-  value,
-  onChange,
-  revisions,
-  tone,
-}: {
-  label: string;
-  value: string;
-  onChange: (id: string) => void;
-  revisions: RoutineRevision[];
-  tone: "red" | "green";
-}) {
-  const toneClass = tone === "red"
-    ? "border-red-500/30 bg-red-500/10 text-red-300"
-    : "border-green-500/30 bg-green-500/10 text-green-300";
-  return (
-    <div className="flex items-center gap-2">
-      <span
-        className={`rounded-full border px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider ${toneClass}`}
-      >
-        {label}
-      </span>
-      <select
-        value={value}
-        onChange={(event) => onChange(event.target.value)}
-        className="h-8 min-w-[12rem] rounded-md border border-border/60 bg-background px-2 text-xs"
-      >
-        {revisions.map((revision) => (
-          <option key={revision.id} value={revision.id}>
-            rev {revision.revisionNumber} — {relativeTime(revision.createdAt)}
-            {revision.changeSummary ? ` • ${revision.changeSummary}` : ""}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-}
-
-function DiffTable({ rows }: { rows: DiffRow[] }) {
-  if (rows.length === 0) {
-    return <p className="text-sm text-muted-foreground">No description on either revision.</p>;
-  }
-  if (rows.every((row) => row.kind === "context")) {
-    return <p className="text-sm text-muted-foreground">Descriptions are identical.</p>;
-  }
-  const lineClassesByKind: Record<DiffRow["kind"], string> = {
-    context: "bg-transparent",
-    removed: "bg-red-500/10 text-red-100",
-    added: "bg-green-500/10 text-green-100",
-  };
-  const markerByKind: Record<DiffRow["kind"], string> = {
-    context: " ",
-    removed: "-",
-    added: "+",
-  };
-  return (
-    <div className="rounded-md border border-border text-xs font-mono leading-6 overflow-hidden">
-      <div className="grid grid-cols-[56px_56px_24px_minmax(0,1fr)] border-b border-border/60 bg-muted/30 px-3 py-2 text-[11px] uppercase tracking-wide text-muted-foreground">
-        <span>Old</span>
-        <span>New</span>
-        <span />
-        <span>Content</span>
-      </div>
-      {rows.map((row, index) => (
-        <div
-          key={`${row.kind}-${index}-${row.oldLineNumber ?? "x"}-${row.newLineNumber ?? "x"}`}
-          className={`grid grid-cols-[56px_56px_24px_minmax(0,1fr)] gap-0 border-b border-border/30 px-3 ${lineClassesByKind[row.kind]}`}
-        >
-          <span className="select-none border-r border-border/30 pr-3 text-right text-muted-foreground">
-            {row.oldLineNumber ?? ""}
-          </span>
-          <span className="select-none border-r border-border/30 px-3 text-right text-muted-foreground">
-            {row.newLineNumber ?? ""}
-          </span>
-          <span className="select-none px-3 text-center text-muted-foreground">
-            {markerByKind[row.kind]}
-          </span>
-          <pre className="overflow-x-auto whitespace-pre-wrap break-words px-3 py-0 text-inherit">
-            {row.text.length > 0 ? row.text : " "}
-          </pre>
-        </div>
-      ))}
-    </div>
-  );
-}
 
 function getActorLabel(revision: RoutineRevision): string {
   if (revision.createdByUserId) return "board";
@@ -992,104 +856,6 @@ function collectWebhookTriggerDifferences(
     .map((trigger) => trigger.label ?? "webhook");
 }
 
-function describeSnapshotField(value: unknown): string {
-  if (value == null) return "—";
-  if (typeof value === "string") return value;
-  return JSON.stringify(value);
-}
-
-function computeFieldChanges(
-  left: RoutineRevision,
-  right: RoutineRevision,
-  agents: AgentLookup,
-  projects: ProjectLookup,
-): Array<{ field: string; oldValue: string | null; newValue: string | null }> {
-  const oldRoutine = left.snapshot.routine;
-  const newRoutine = right.snapshot.routine;
-  const changes: Array<{ field: string; oldValue: string | null; newValue: string | null }> = [];
-  const compareScalar = (
-    _field: string,
-    label: string,
-    oldVal: unknown,
-    newVal: unknown,
-    transform: (value: unknown) => string = describeSnapshotField,
-  ) => {
-    if (JSON.stringify(oldVal) !== JSON.stringify(newVal)) {
-      changes.push({ field: label, oldValue: transform(oldVal), newValue: transform(newVal) });
-    }
-  };
-  compareScalar("title", "Title", oldRoutine.title, newRoutine.title);
-  compareScalar("priority", "Priority", oldRoutine.priority, newRoutine.priority);
-  compareScalar(
-    "assigneeAgentId",
-    "Default agent",
-    resolveAgentName(oldRoutine.assigneeAgentId, agents),
-    resolveAgentName(newRoutine.assigneeAgentId, agents),
-  );
-  compareScalar(
-    "projectId",
-    "Project",
-    resolveProjectName(oldRoutine.projectId, projects),
-    resolveProjectName(newRoutine.projectId, projects),
-  );
-  compareScalar("concurrencyPolicy", "Concurrency", oldRoutine.concurrencyPolicy, newRoutine.concurrencyPolicy);
-  compareScalar("catchUpPolicy", "Catch-up", oldRoutine.catchUpPolicy, newRoutine.catchUpPolicy);
-  compareScalar("status", "Status", oldRoutine.status, newRoutine.status);
-  if (JSON.stringify(oldRoutine.variables) !== JSON.stringify(newRoutine.variables)) {
-    changes.push({
-      field: "Variables",
-      oldValue: summarizeVariables(oldRoutine.variables),
-      newValue: summarizeVariables(newRoutine.variables),
-    });
-  }
-  compareTriggers(left.snapshot.triggers, right.snapshot.triggers, changes);
-  return changes;
-}
-
-function summarizeVariables(variables: RoutineVariable[]): string {
-  if (variables.length === 0) return "(none)";
-  return variables
-    .map((variable) => `${variable.name}=${formatVariableDefault(variable)}`)
-    .join(", ");
-}
-
-function compareTriggers(
-  oldTriggers: RoutineRevisionSnapshotTriggerV1[],
-  newTriggers: RoutineRevisionSnapshotTriggerV1[],
-  changes: Array<{ field: string; oldValue: string | null; newValue: string | null }>,
-) {
-  const byId = new Map<string, { old?: RoutineRevisionSnapshotTriggerV1; next?: RoutineRevisionSnapshotTriggerV1 }>();
-  for (const trigger of oldTriggers) byId.set(trigger.id, { old: trigger });
-  for (const trigger of newTriggers) {
-    const existing = byId.get(trigger.id) ?? {};
-    byId.set(trigger.id, { ...existing, next: trigger });
-  }
-  for (const [, pair] of byId) {
-    if (pair.old && !pair.next) {
-      changes.push({
-        field: `Trigger removed (${pair.old.label ?? pair.old.kind})`,
-        oldValue: summarizeTriggerSnapshot(pair.old),
-        newValue: null,
-      });
-    } else if (!pair.old && pair.next) {
-      changes.push({
-        field: `Trigger added (${pair.next.label ?? pair.next.kind})`,
-        oldValue: null,
-        newValue: summarizeTriggerSnapshot(pair.next),
-      });
-    } else if (pair.old && pair.next) {
-      const oldSummary = summarizeTriggerSnapshot(pair.old);
-      const newSummary = summarizeTriggerSnapshot(pair.next);
-      if (oldSummary !== newSummary || pair.old.enabled !== pair.next.enabled) {
-        changes.push({
-          field: `Trigger ${pair.next.label ?? pair.next.kind}`,
-          oldValue: `${oldSummary} (${pair.old.enabled ? "enabled" : "disabled"})`,
-          newValue: `${newSummary} (${pair.next.enabled ? "enabled" : "disabled"})`,
-        });
-      }
-    }
-  }
-}
 
 export function isUpdateConflictError(error: unknown): error is ApiError {
   return error instanceof ApiError && error.status === 409;

ui/src/components/ScrollToBottom.tsx

@@ -75,7 +75,7 @@ export function ScrollToBottom() {
       onClick={scroll}
       className={cn(
         "fixed bottom-[calc(1.5rem+5rem+env(safe-area-inset-bottom))] right-6 z-40 flex h-9 w-9 items-center justify-center rounded-full border border-border bg-background shadow-md hover:bg-accent transition-[background-color,right] duration-200 md:bottom-6",
-        panelVisible && panelContent && "md:right-[calc(320px+1.5rem)]",
+        panelVisible && panelContent && "md:right-[calc(var(--properties-panel-width,320px)+1.5rem)]",
       )}
       aria-label="Scroll to bottom"
     >

ui/src/context/PanelContext.tsx

@@ -2,10 +2,23 @@ import { createContext, useCallback, useContext, useState, type ReactNode } from
 
 const STORAGE_KEY = "paperclip:panel-visible";
 
+export interface PanelLayoutOptions {
+  /** localStorage key under which the user's preferred panel width is saved. */
+  storageKey?: string;
+  /** Width applied when no stored value exists. */
+  defaultWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  /** Below this viewport width, clamp the panel to compactMaxWidth. */
+  compactBelowViewport?: number;
+  compactMaxWidth?: number;
+}
+
 interface PanelContextValue {
   panelContent: ReactNode | null;
+  panelLayout: PanelLayoutOptions;
   panelVisible: boolean;
-  openPanel: (content: ReactNode) => void;
+  openPanel: (content: ReactNode, layout?: PanelLayoutOptions) => void;
   closePanel: () => void;
   setPanelVisible: (visible: boolean) => void;
   togglePanelVisible: () => void;
@@ -30,16 +43,21 @@ function writePreference(visible: boolean) {
   }
 }
 
+const EMPTY_LAYOUT: PanelLayoutOptions = {};
+
 export function PanelProvider({ children }: { children: ReactNode }) {
   const [panelContent, setPanelContent] = useState<ReactNode | null>(null);
+  const [panelLayout, setPanelLayout] = useState<PanelLayoutOptions>(EMPTY_LAYOUT);
   const [panelVisible, setPanelVisibleState] = useState(readPreference);
 
-  const openPanel = useCallback((content: ReactNode) => {
+  const openPanel = useCallback((content: ReactNode, layout?: PanelLayoutOptions) => {
     setPanelContent(content);
+    setPanelLayout(layout ?? EMPTY_LAYOUT);
   }, []);
 
   const closePanel = useCallback(() => {
     setPanelContent(null);
+    setPanelLayout(EMPTY_LAYOUT);
   }, []);
 
   const setPanelVisible = useCallback((visible: boolean) => {
@@ -57,7 +75,7 @@ export function PanelProvider({ children }: { children: ReactNode }) {
 
   return (
     <PanelContext.Provider
-      value={{ panelContent, panelVisible, openPanel, closePanel, setPanelVisible, togglePanelVisible }}
+      value={{ panelContent, panelLayout, panelVisible, openPanel, closePanel, setPanelVisible, togglePanelVisible }}
     >
       {children}
     </PanelContext.Provider>

ui/src/pages/RoutineDetail.tsx

@@ -591,22 +591,22 @@ export function RoutineDetail() {
   const activityTabsPanel = useMemo(() => {
     if (!routine) return null;
     return (
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-3">
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-3 min-w-0">
-        <TabsList variant="line" className="w-full justify-start gap-1">
+        <TabsList variant="line" className="w-full justify-start gap-1 overflow-x-auto">
-          <TabsTrigger value="triggers" className="gap-1.5">
+          <TabsTrigger value="triggers" className="gap-1.5 flex-none px-2">
             <Clock3 className="h-3.5 w-3.5" />
             Triggers
           </TabsTrigger>
-          <TabsTrigger value="runs" className="gap-1.5">
+          <TabsTrigger value="runs" className="gap-1.5 flex-none px-2">
             <Play className="h-3.5 w-3.5" />
             Runs
             {hasLiveRun && <span className="h-2 w-2 rounded-full bg-blue-500 animate-pulse" />}
           </TabsTrigger>
-          <TabsTrigger value="activity" className="gap-1.5">
+          <TabsTrigger value="activity" className="gap-1.5 flex-none px-2">
             <ActivityIcon className="h-3.5 w-3.5" />
             Activity
           </TabsTrigger>
-          <TabsTrigger value="history" className="gap-1.5">
+          <TabsTrigger value="history" className="gap-1.5 flex-none px-2">
             <HistoryIcon className="h-3.5 w-3.5" />
             History
           </TabsTrigger>
@@ -815,7 +815,14 @@ export function RoutineDetail() {
       closePanel();
       return;
     }
-    openPanel(activityTabsPanel);
+    openPanel(activityTabsPanel, {
+      storageKey: "paperclip.properties.width.routines",
+      defaultWidth: 400,
+      minWidth: 320,
+      maxWidth: 640,
+      compactBelowViewport: 1024,
+      compactMaxWidth: 320,
+    });
     return () => closePanel();
   }, [activityTabsPanel, closePanel, openPanel]);
 
@@ -854,7 +861,7 @@ export function RoutineDetail() {
   return (
     <div className="max-w-2xl space-y-6">
       {/* Header: editable title + actions */}
-      <div className="flex items-start gap-4">
+      <div className="flex flex-col items-stretch gap-3 min-[1120px]:flex-row min-[1120px]:items-start min-[1120px]:gap-4">
         <div className="min-w-0 flex-1 space-y-2">
           <textarea
             ref={titleInputRef}
@@ -893,7 +900,7 @@ export function RoutineDetail() {
             </Badge>
           ) : null}
         </div>
-        <div className="flex shrink-0 items-center gap-3 pt-1">
+        <div className="flex w-full shrink-0 flex-wrap items-center gap-3 pt-1 min-[1120px]:w-auto min-[1120px]:flex-nowrap">
           <RunButton
             onClick={() => {
               setRunVariablesOpen(true);
@@ -928,6 +935,7 @@ export function RoutineDetail() {
               panelVisible ? "opacity-0 pointer-events-none w-0 overflow-hidden" : "opacity-100",
             )}
             onClick={() => setPanelVisible(true)}
+            aria-label="Show triggers, runs and activity"
             title="Show triggers, runs and activity"
           >
             <SlidersHorizontal className="h-4 w-4" />