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
2026-05-11 16:37:30 +02:00
parent 486fb88a15
commit 74cb560c41
8 changed files with 584 additions and 553 deletions
@@ -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");
+  });
 });