From 71444dac718ac535013bb6eb65a1596b3845c696 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Mon, 11 May 2026 13:06:30 -0500
Subject: [PATCH] Revert "fix(ui): improve routine properties panel and history
 UX (#5703)"

This reverts commit 74cb560c41305ac3283067d1ec8d3060ffdc28cb.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/PropertiesPanel.tsx         |  62 +-
 .../components/ResizableSidebarPane.test.tsx  | 143 ----
 ui/src/components/ResizableSidebarPane.tsx    | 130 +--
 ui/src/components/RoutineHistoryTab.test.tsx  |   2 -
 ui/src/components/RoutineHistoryTab.tsx       | 748 ++++++++++++------
 ui/src/components/ScrollToBottom.tsx          |   2 +-
 ui/src/context/PanelContext.tsx               |  24 +-
 ui/src/pages/RoutineDetail.tsx                |  26 +-
 8 files changed, 553 insertions(+), 584 deletions(-)

diff --git a/ui/src/components/PropertiesPanel.tsx b/ui/src/components/PropertiesPanel.tsx
index 75c09474538..c289a3126ea 100644
--- a/ui/src/components/PropertiesPanel.tsx
+++ b/ui/src/components/PropertiesPanel.tsx
@@ -1,59 +1,29 @@
 import { X } from "lucide-react";
 import { usePanel } from "../context/PanelContext";
 import { Button } from "@/components/ui/button";
-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";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 export function PropertiesPanel() {
-  const { panelContent, panelLayout, panelVisible, setPanelVisible } = usePanel();
+  const { panelContent, 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 className="hidden md:flex border-l border-border bg-card shrink-0 h-full">
-      <ResizableSidebarPane
-        // Remount when the layout key changes so the stored width is re-read fresh.
-        key={storageKey}
-        open={panelVisible}
-        resizable
-        side="right"
-        storageKey={storageKey}
-        defaultWidth={defaultWidth}
-        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>
+    <aside
+      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"
+      style={{ width: panelVisible ? 320 : 0, opacity: panelVisible ? 1 : 0 }}
+    >
+      <div className="w-80 flex-1 flex flex-col min-w-[320px] 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)}>
+            <X className="h-4 w-4" />
+          </Button>
         </div>
-      </ResizableSidebarPane>
+        <ScrollArea className="flex-1">
+          <div className="p-4">{panelContent}</div>
+        </ScrollArea>
+      </div>
     </aside>
   );
 }
diff --git a/ui/src/components/ResizableSidebarPane.test.tsx b/ui/src/components/ResizableSidebarPane.test.tsx
index deb904ec44e..cb635d81035 100644
--- a/ui/src/components/ResizableSidebarPane.test.tsx
+++ b/ui/src/components/ResizableSidebarPane.test.tsx
@@ -17,10 +17,8 @@ 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);
@@ -33,8 +31,6 @@ describe("ResizableSidebarPane", () => {
     });
     container.remove();
     window.localStorage.clear();
-    document.documentElement.style.removeProperty("--test-sidebar-width");
-    setInnerWidth(originalInnerWidth);
   });
 
   function pane() {
@@ -45,14 +41,6 @@ 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");
 
@@ -130,135 +118,4 @@ 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");
-  });
 });
diff --git a/ui/src/components/ResizableSidebarPane.tsx b/ui/src/components/ResizableSidebarPane.tsx
index 8c66bca5e2b..09f9c70a1f1 100644
--- a/ui/src/components/ResizableSidebarPane.tsx
+++ b/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, min: number, max: number) {
-  return Math.min(max, Math.max(min, width));
+function clampSidebarWidth(width: number) {
+  return Math.min(MAX_SIDEBAR_WIDTH, Math.max(MIN_SIDEBAR_WIDTH, width));
 }
 
-function readStoredSidebarWidth(storageKey: string, fallback: number, min: number, max: number) {
-  if (typeof window === "undefined") return fallback;
+function readStoredSidebarWidth(storageKey: string) {
+  if (typeof window === "undefined") return DEFAULT_SIDEBAR_WIDTH;
 
   try {
     const stored = window.localStorage.getItem(storageKey);
-    if (!stored) return fallback;
+    if (!stored) return DEFAULT_SIDEBAR_WIDTH;
     const parsed = Number.parseInt(stored, 10);
-    if (!Number.isFinite(parsed)) return fallback;
-    return clampSidebarWidth(parsed, min, max);
+    if (!Number.isFinite(parsed)) return DEFAULT_SIDEBAR_WIDTH;
+    return clampSidebarWidth(parsed);
   } catch {
-    return fallback;
+    return DEFAULT_SIDEBAR_WIDTH;
   }
 }
 
-function writeStoredSidebarWidth(storageKey: string, width: number, min: number, max: number) {
+function writeStoredSidebarWidth(storageKey: string, width: number) {
   if (typeof window === "undefined") return;
 
   try {
-    window.localStorage.setItem(storageKey, String(clampSidebarWidth(width, min, max)));
+    window.localStorage.setItem(storageKey, String(clampSidebarWidth(width)));
   } catch {
     // Storage can be unavailable in private contexts; resizing should still work.
   }
@@ -49,68 +49,25 @@ 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 [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 [width, setWidth] = useState(() => readStoredSidebarWidth(storageKey));
   const [isResizing, setIsResizing] = useState(false);
   const widthRef = useRef(width);
   const dragState = useRef<{ startX: number; startWidth: number } | null>(null);
 
   useEffect(() => {
-    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);
+    const storedWidth = readStoredSidebarWidth(storageKey);
     widthRef.current = storedWidth;
     setWidth(storedWidth);
-  }, [storageKey, fallbackWidth, minWidth, effectiveMaxWidth]);
+  }, [storageKey]);
 
   const visibleWidth = open ? width : 0;
   const paneStyle = useMemo(
@@ -118,25 +75,14 @@ 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, minWidth, effectiveMaxWidth);
+      const clamped = clampSidebarWidth(nextWidth);
       widthRef.current = clamped;
       setWidth(clamped);
-      if (!compactModeActive) {
-        writeStoredSidebarWidth(storageKey, clamped, minWidth, maxWidth);
-      }
+      writeStoredSidebarWidth(storageKey, clamped);
     },
-    [storageKey, minWidth, maxWidth, effectiveMaxWidth, compactModeActive],
+    [storageKey],
   );
 
   const handlePointerDown = useCallback(
@@ -155,15 +101,12 @@ export function ResizableSidebarPane({
     (event: PointerEvent<HTMLDivElement>) => {
       if (!dragState.current) return;
 
-      const delta = event.clientX - dragState.current.startX;
-      // 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);
+      const nextWidth = dragState.current.startWidth + event.clientX - dragState.current.startX;
+      const clamped = clampSidebarWidth(nextWidth);
       widthRef.current = clamped;
       setWidth(clamped);
     },
-    [side, minWidth, effectiveMaxWidth],
+    [],
   );
 
   const endResize = useCallback(() => {
@@ -171,34 +114,28 @@ export function ResizableSidebarPane({
 
     dragState.current = null;
     setIsResizing(false);
-    if (!compactModeActive) {
-      writeStoredSidebarWidth(storageKey, widthRef.current, minWidth, maxWidth);
-    }
-  }, [storageKey, minWidth, maxWidth, compactModeActive]);
+    writeStoredSidebarWidth(storageKey, widthRef.current);
+  }, [storageKey]);
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLDivElement>) => {
-      if (!open || !resizable || !canResizeAtCurrentViewport) return;
+      if (!open || !resizable) return;
 
-      // Match drag semantics: on a right-side pane, ArrowLeft grows the pane.
-      const growKey = side === "right" ? "ArrowLeft" : "ArrowRight";
-      const shrinkKey = side === "right" ? "ArrowRight" : "ArrowLeft";
-
-      if (event.key === growKey) {
-        event.preventDefault();
-        commitWidth(width + SIDEBAR_WIDTH_STEP);
-      } else if (event.key === shrinkKey) {
+      if (event.key === "ArrowLeft") {
         event.preventDefault();
         commitWidth(width - SIDEBAR_WIDTH_STEP);
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        commitWidth(width + SIDEBAR_WIDTH_STEP);
       } else if (event.key === "Home") {
         event.preventDefault();
-        commitWidth(minWidth);
+        commitWidth(MIN_SIDEBAR_WIDTH);
       } else if (event.key === "End") {
         event.preventDefault();
-        commitWidth(effectiveMaxWidth);
+        commitWidth(MAX_SIDEBAR_WIDTH);
       }
     },
-    [commitWidth, open, resizable, side, width, minWidth, effectiveMaxWidth, canResizeAtCurrentViewport],
+    [commitWidth, open, resizable, width],
   );
 
   return (
@@ -211,18 +148,17 @@ export function ResizableSidebarPane({
       style={paneStyle}
     >
       {children}
-      {resizable && open && canResizeAtCurrentViewport ? (
+      {resizable && open ? (
         <div
           role="separator"
           aria-label="Resize sidebar"
           aria-orientation="vertical"
-          aria-valuemin={minWidth}
-          aria-valuemax={effectiveMaxWidth}
+          aria-valuemin={MIN_SIDEBAR_WIDTH}
+          aria-valuemax={MAX_SIDEBAR_WIDTH}
           aria-valuenow={width}
           tabIndex={0}
           className={cn(
-            "absolute inset-y-0 z-20 w-3 cursor-col-resize touch-none outline-none",
-            side === "right" ? "left-0" : "right-0",
+            "absolute inset-y-0 right-0 z-20 w-3 cursor-col-resize touch-none outline-none",
             "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",
diff --git a/ui/src/components/RoutineHistoryTab.test.tsx b/ui/src/components/RoutineHistoryTab.test.tsx
index 8457f035581..56dd9c80171 100644
--- a/ui/src/components/RoutineHistoryTab.test.tsx
+++ b/ui/src/components/RoutineHistoryTab.test.tsx
@@ -301,8 +301,6 @@ 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"),
     );
diff --git a/ui/src/components/RoutineHistoryTab.tsx b/ui/src/components/RoutineHistoryTab.tsx
index d30522e72b4..0bae27142b7 100644
--- a/ui/src/components/RoutineHistoryTab.tsx
+++ b/ui/src/components/RoutineHistoryTab.tsx
@@ -1,6 +1,6 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { History as HistoryIcon, RotateCcw } from "lucide-react";
+import { History as HistoryIcon, RotateCcw, Search } from "lucide-react";
 import type {
   Routine,
   RoutineRevision,
@@ -13,6 +13,7 @@ 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";
@@ -64,11 +65,10 @@ 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,6 +86,12 @@ 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],
@@ -114,8 +120,6 @@ export function RoutineHistoryTab({
       onRestoreSecretMaterials(data);
       onRestored?.(data);
       setConfirmOpen(false);
-      setSnapshotOpen(false);
-      setCompareOn(false);
       setRestoreSummary("");
       setSelectedRevisionId(data.revision.id);
       setHighlightedRevisionId(data.revision.id);
@@ -146,15 +150,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);
   };
 
@@ -168,7 +172,7 @@ export function RoutineHistoryTab({
 
   if (revisionsQuery.isLoading) {
     return (
-      <div className="grid gap-5">
+      <div className="grid gap-5 md:grid-cols-[300px_minmax(0,1fr)]">
         <div className="space-y-2">
           {Array.from({ length: 5 }).map((_, idx) => (
             <Skeleton key={idx} className="h-10 w-full" />
@@ -200,55 +204,64 @@ export function RoutineHistoryTab({
   const onlyBootstrapRevision = revisions.length <= 1;
 
   return (
-    <div className="grid gap-5">
-      {isEditDirty && (
-        <ConflictBanner
-          dirtyFields={dirtyFields}
-          onDiscard={onDiscardEdits}
-          onSave={onSaveEdits}
-        />
-      )}
-      {!isEditDirty && onlyBootstrapRevision ? (
-        <div className="space-y-2">
-          <EmptyState icon={HistoryIcon} message="No edits yet" />
-          <p className="text-center text-xs text-muted-foreground">
-            Revision 1 is the only history this routine has. Saving an edit creates the first
-            additional revision.
-          </p>
-        </div>
-      ) : (
-        <RevisionList
-          revisions={visibleRevisions}
-          latestRevisionId={routine.latestRevisionId}
-          selectedRevisionId={selectedRevisionId}
-          highlightedRevisionId={highlightedRevisionId}
-          isEditDirty={isEditDirty}
-          totalRevisions={sortedRevisions.length}
-          onSelect={handleSelectRevision}
-          onShowOlder={() => setShowOlder(true)}
-          showOlder={showOlder}
-        />
-      )}
-
-      {selectedRevision && (
-        <RevisionSnapshotDialog
-          open={snapshotOpen}
-          onOpenChange={(next) => {
-            setSnapshotOpen(next);
-            if (!next) setCompareOn(false);
-          }}
-          revision={selectedRevision}
-          currentRevision={currentRevision}
-          isHistorical={isHistoricalSelected}
-          compareOn={compareOn}
-          onCompareToggle={setCompareOn}
-          agents={agents}
-          projects={projects}
-          onRestore={openRestoreConfirm}
-          restorePending={restoreMutation.isPending}
-          highlighted={highlightedRevisionId === selectedRevision.id}
-        />
-      )}
+    <div className="grid gap-5 md:grid-cols-[300px_minmax(0,1fr)]">
+      <RevisionList
+        revisions={visibleRevisions}
+        latestRevisionId={routine.latestRevisionId}
+        selectedRevisionId={selectedRevisionId}
+        highlightedRevisionId={highlightedRevisionId}
+        isEditDirty={isEditDirty}
+        totalRevisions={sortedRevisions.length}
+        onSelect={handleSelectRevision}
+        onShowOlder={() => setShowOlder(true)}
+        showOlder={showOlder}
+      />
+      <div className="space-y-4 min-w-0">
+        {isEditDirty && (
+          <ConflictBanner
+            dirtyFields={dirtyFields}
+            onDiscard={onDiscardEdits}
+            onSave={onSaveEdits}
+          />
+        )}
+        {!isEditDirty && onlyBootstrapRevision ? (
+          <div className="space-y-2">
+            <EmptyState
+              icon={HistoryIcon}
+              message="No edits yet"
+            />
+            <p className="text-center text-xs text-muted-foreground">
+              Revision 1 is the only history this routine has. Saving an edit creates the first
+              additional revision.
+            </p>
+          </div>
+        ) : (
+          selectedRevision && (
+            <>
+              {isHistoricalSelected && currentRevision && (
+                <HistoricalPreviewBanner
+                  revisionNumber={selectedRevision.revisionNumber}
+                  nextRevisionNumber={currentRevision.revisionNumber + 1}
+                  onReturn={handleReturnToCurrent}
+                  onRestore={openRestoreConfirm}
+                  pending={restoreMutation.isPending}
+                />
+              )}
+              <RevisionPreview
+                revision={selectedRevision}
+                currentRevision={currentRevision}
+                isHistorical={isHistoricalSelected}
+                agents={agents}
+                projects={projects}
+                onCompare={() => setDiffOpen(true)}
+                onRestore={openRestoreConfirm}
+                restorePending={restoreMutation.isPending}
+                highlighted={highlightedRevisionId === selectedRevision.id}
+              />
+            </>
+          )
+        )}
+      </div>
 
       {selectedRevision && currentRevision && (
         <RestoreConfirmDialog
@@ -266,149 +279,67 @@ 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 RevisionSnapshotDialog({
-  open,
-  onOpenChange,
-  revision,
-  currentRevision,
-  isHistorical,
-  compareOn,
-  onCompareToggle,
-  agents,
-  projects,
+function HistoricalPreviewBanner({
+  revisionNumber,
+  nextRevisionNumber,
+  onReturn,
   onRestore,
-  restorePending,
-  highlighted,
+  pending,
 }: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  revision: RoutineRevision;
-  currentRevision: RoutineRevision | null;
-  isHistorical: boolean;
-  compareOn: boolean;
-  onCompareToggle: (next: boolean) => void;
-  agents: AgentLookup;
-  projects: ProjectLookup;
+  revisionNumber: number;
+  nextRevisionNumber: number;
+  onReturn: () => void;
   onRestore: () => void;
-  restorePending: boolean;
-  highlighted: boolean;
+  pending: boolean;
 }) {
-  const showCompare = compareOn && !!currentRevision && isHistorical;
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        className={`${
-          showCompare ? "!max-w-[95%]" : "!max-w-[90%]"
-        } w-full max-h-[85vh] overflow-hidden flex flex-col`}
-      >
-        <DialogHeader>
-          <div className="flex flex-wrap items-center justify-between gap-3 pr-8">
-            <DialogTitle>
-              {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 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="space-y-1">
+          <p className="text-sm font-medium text-amber-200">
+            Viewing revision {revisionNumber} (read-only)
+          </p>
+          <p className="text-xs text-muted-foreground">
+            Restoring this revision creates a new revision {nextRevisionNumber} with the same content.
+            History stays append-only.
+          </p>
         </div>
-        <DialogFooter className="justify-between sm:justify-between">
-          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={restorePending}>
-            Close
+        <div className="flex flex-wrap items-center gap-2">
+          <Button variant="outline" size="sm" onClick={onReturn} disabled={pending}>
+            Return to current
           </Button>
-          {isHistorical && (
-            <Button onClick={onRestore} disabled={restorePending}>
-              <RotateCcw className="mr-1.5 h-3.5 w-3.5" />
-              Restore as new revision
-            </Button>
-          )}
-        </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}
+          <Button size="sm" onClick={onRestore} disabled={pending}>
+            <RotateCcw className="mr-1.5 h-3.5 w-3.5" />
+            Restore as new revision
+          </Button>
+        </div>
+      </div>
     </div>
   );
 }
 
-
 function ConflictBanner({
   dirtyFields,
   onDiscard,
@@ -424,7 +355,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">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <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">
@@ -541,30 +472,31 @@ 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 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 restoreLabel = isHistorical ? "Restore this revision" : "Restore this revision";
   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 }> = [
     {
@@ -611,29 +543,33 @@ 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="space-y-1 min-w-0">
-          <p className="text-sm font-medium">rev {revision.revisionNumber}</p>
-          <p className="text-xs text-muted-foreground truncate">
-            Saved {relativeTime(revision.createdAt)} by {getActorLabel(revision)}
-            {revision.changeSummary ? ` · ${revision.changeSummary}` : ""}
-          </p>
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div className="space-y-1 min-w-0">
+            <p className="text-sm font-medium">rev {revision.revisionNumber}</p>
+            <p className="text-xs text-muted-foreground truncate">
+              Saved {relativeTime(revision.createdAt)} by {getActorLabel(revision)}
+              {revision.changeSummary ? ` · ${revision.changeSummary}` : ""}
+            </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>
 
@@ -641,13 +577,17 @@ 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 divide-y divide-border">
+        <div className="grid gap-3 md:grid-cols-2 divide-y md:divide-y-0 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 && <DiffPill kind="differs" />}
+                {row.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>
           ))}
@@ -655,12 +595,9 @@ function RevisionPreview({
       </div>
 
       <div className={`${cardWrapper} p-3 space-y-2`}>
-        <div className="flex items-center gap-2">
-          <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
-            Description
-          </p>
-          {descriptionDiffers && <DiffPill kind="differs" />}
-        </div>
+        <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+          Description
+        </p>
         <div className="rounded-md bg-background/40 p-3 text-sm leading-7">
           {snapshot.description ? (
             <MarkdownBody>{snapshot.description}</MarkdownBody>
@@ -678,26 +615,22 @@ function RevisionPreview({
           <p className="text-sm text-muted-foreground">No triggers in this revision.</p>
         ) : (
           <ul className="divide-y divide-border">
-            {triggers.map((trigger) => {
-              const status = triggerStatus(trigger);
-              return (
-                <li key={trigger.id} className="py-2 flex flex-wrap items-center gap-2 text-sm">
-                  <span className="rounded-full border border-border px-2 py-0.5 text-[10px] uppercase tracking-[0.12em] text-muted-foreground">
-                    {trigger.kind}
-                  </span>
-                  <span className="font-medium">{trigger.label ?? trigger.kind}</span>
-                  <span className="text-xs text-muted-foreground">
-                    {summarizeTriggerSnapshot(trigger)}
-                  </span>
-                  {status !== "same" && <DiffPill kind={status} />}
-                  <span
-                    className={`ml-auto text-xs ${trigger.enabled ? "text-emerald-400" : "text-muted-foreground"}`}
-                  >
-                    {trigger.enabled ? "enabled" : "disabled"}
-                  </span>
-                </li>
-              );
-            })}
+            {triggers.map((trigger) => (
+              <li key={trigger.id} className="py-2 flex flex-wrap items-center gap-2 text-sm">
+                <span className="rounded-full border border-border px-2 py-0.5 text-[10px] uppercase tracking-[0.12em] text-muted-foreground">
+                  {trigger.kind}
+                </span>
+                <span className="font-medium">{trigger.label ?? trigger.kind}</span>
+                <span className="text-xs text-muted-foreground">
+                  {summarizeTriggerSnapshot(trigger)}
+                </span>
+                <span
+                  className={`ml-auto text-xs ${trigger.enabled ? "text-emerald-400" : "text-muted-foreground"}`}
+                >
+                  {trigger.enabled ? "enabled" : "disabled"}
+                </span>
+              </li>
+            ))}
           </ul>
         )}
         <p className="text-xs text-muted-foreground">
@@ -712,18 +645,14 @@ function RevisionPreview({
             Variables ({snapshot.variables.length})
           </p>
           <ul className="divide-y divide-border">
-            {snapshot.variables.map((variable) => {
-              const status = variableStatus(variable);
-              return (
-                <li key={variable.name} className="py-2 flex flex-wrap items-center gap-2 text-sm">
-                  <span className="font-mono text-xs">{variable.name}</span>
-                  <span className="text-xs text-muted-foreground">
-                    default: {formatVariableDefault(variable)}
-                  </span>
-                  {status !== "same" && <DiffPill kind={status} />}
-                </li>
-              );
-            })}
+            {snapshot.variables.map((variable) => (
+              <li key={variable.name} className="py-2 flex items-center justify-between text-sm">
+                <span className="font-mono text-xs">{variable.name}</span>
+                <span className="text-xs text-muted-foreground">
+                  default: {formatVariableDefault(variable)}
+                </span>
+              </li>
+            ))}
           </ul>
         </div>
       )}
@@ -806,6 +735,213 @@ 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";
@@ -856,6 +992,104 @@ 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;
diff --git a/ui/src/components/ScrollToBottom.tsx b/ui/src/components/ScrollToBottom.tsx
index 45c06981f8b..793e85a0432 100644
--- a/ui/src/components/ScrollToBottom.tsx
+++ b/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(var(--properties-panel-width,320px)+1.5rem)]",
+        panelVisible && panelContent && "md:right-[calc(320px+1.5rem)]",
       )}
       aria-label="Scroll to bottom"
     >
diff --git a/ui/src/context/PanelContext.tsx b/ui/src/context/PanelContext.tsx
index 38eca0e9cda..a29fbbb43d6 100644
--- a/ui/src/context/PanelContext.tsx
+++ b/ui/src/context/PanelContext.tsx
@@ -2,23 +2,10 @@ 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, layout?: PanelLayoutOptions) => void;
+  openPanel: (content: ReactNode) => void;
   closePanel: () => void;
   setPanelVisible: (visible: boolean) => void;
   togglePanelVisible: () => void;
@@ -43,21 +30,16 @@ 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, layout?: PanelLayoutOptions) => {
+  const openPanel = useCallback((content: ReactNode) => {
     setPanelContent(content);
-    setPanelLayout(layout ?? EMPTY_LAYOUT);
   }, []);
 
   const closePanel = useCallback(() => {
     setPanelContent(null);
-    setPanelLayout(EMPTY_LAYOUT);
   }, []);
 
   const setPanelVisible = useCallback((visible: boolean) => {
@@ -75,7 +57,7 @@ export function PanelProvider({ children }: { children: ReactNode }) {
 
   return (
     <PanelContext.Provider
-      value={{ panelContent, panelLayout, panelVisible, openPanel, closePanel, setPanelVisible, togglePanelVisible }}
+      value={{ panelContent, panelVisible, openPanel, closePanel, setPanelVisible, togglePanelVisible }}
     >
       {children}
     </PanelContext.Provider>
diff --git a/ui/src/pages/RoutineDetail.tsx b/ui/src/pages/RoutineDetail.tsx
index 2d809f639a1..076bf518951 100644
--- a/ui/src/pages/RoutineDetail.tsx
+++ b/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 min-w-0">
-        <TabsList variant="line" className="w-full justify-start gap-1 overflow-x-auto">
-          <TabsTrigger value="triggers" className="gap-1.5 flex-none px-2">
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-3">
+        <TabsList variant="line" className="w-full justify-start gap-1">
+          <TabsTrigger value="triggers" className="gap-1.5">
             <Clock3 className="h-3.5 w-3.5" />
             Triggers
           </TabsTrigger>
-          <TabsTrigger value="runs" className="gap-1.5 flex-none px-2">
+          <TabsTrigger value="runs" className="gap-1.5">
             <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 flex-none px-2">
+          <TabsTrigger value="activity" className="gap-1.5">
             <ActivityIcon className="h-3.5 w-3.5" />
             Activity
           </TabsTrigger>
-          <TabsTrigger value="history" className="gap-1.5 flex-none px-2">
+          <TabsTrigger value="history" className="gap-1.5">
             <HistoryIcon className="h-3.5 w-3.5" />
             History
           </TabsTrigger>
@@ -815,14 +815,7 @@ export function RoutineDetail() {
       closePanel();
       return;
     }
-    openPanel(activityTabsPanel, {
-      storageKey: "paperclip.properties.width.routines",
-      defaultWidth: 400,
-      minWidth: 320,
-      maxWidth: 640,
-      compactBelowViewport: 1024,
-      compactMaxWidth: 320,
-    });
+    openPanel(activityTabsPanel);
     return () => closePanel();
   }, [activityTabsPanel, closePanel, openPanel]);
 
@@ -861,7 +854,7 @@ export function RoutineDetail() {
   return (
     <div className="max-w-2xl space-y-6">
       {/* Header: editable title + actions */}
-      <div className="flex flex-col items-stretch gap-3 min-[1120px]:flex-row min-[1120px]:items-start min-[1120px]:gap-4">
+      <div className="flex items-start gap-4">
         <div className="min-w-0 flex-1 space-y-2">
           <textarea
             ref={titleInputRef}
@@ -900,7 +893,7 @@ export function RoutineDetail() {
             </Badge>
           ) : null}
         </div>
-        <div className="flex w-full shrink-0 flex-wrap items-center gap-3 pt-1 min-[1120px]:w-auto min-[1120px]:flex-nowrap">
+        <div className="flex shrink-0 items-center gap-3 pt-1">
           <RunButton
             onClick={() => {
               setRunVariablesOpen(true);
@@ -935,7 +928,6 @@ 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" />