forked from farhoodlabs/paperclip
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
This commit is contained in:
Aron Prins
@@ -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
|
||||
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>
|
||||
<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>
|
||||
</div>
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="p-4">{panelContent}</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</ResizableSidebarPane>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -15,29 +15,29 @@ const MIN_SIDEBAR_WIDTH = 208;
|
||||
const MAX_SIDEBAR_WIDTH = 420;
|
||||
const SIDEBAR_WIDTH_STEP = 16;
|
||||
|
||||
function clampSidebarWidth(width: number) {
|
||||
return Math.min(MAX_SIDEBAR_WIDTH, Math.max(MIN_SIDEBAR_WIDTH, width));
|
||||
function clampSidebarWidth(width: number, min: number, max: number) {
|
||||
return Math.min(max, Math.max(min, width));
|
||||
}
|
||||
|
||||
function readStoredSidebarWidth(storageKey: string) {
|
||||
if (typeof window === "undefined") return DEFAULT_SIDEBAR_WIDTH;
|
||||
function readStoredSidebarWidth(storageKey: string, fallback: number, min: number, max: number) {
|
||||
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;
|
||||
return clampSidebarWidth(parsed);
|
||||
if (!Number.isFinite(parsed)) return fallback;
|
||||
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 clamped = clampSidebarWidth(nextWidth);
|
||||
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);
|
||||
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);
|
||||
}, [storageKey]);
|
||||
if (!compactModeActive) {
|
||||
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") {
|
||||
event.preventDefault();
|
||||
commitWidth(width - SIDEBAR_WIDTH_STEP);
|
||||
} else if (event.key === "ArrowRight") {
|
||||
// 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) {
|
||||
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-valuemax={MAX_SIDEBAR_WIDTH}
|
||||
aria-valuemin={minWidth}
|
||||
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",
|
||||
|
||||
@@ -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"),
|
||||
);
|
||||
|
||||
@@ -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);
|
||||
};
|
||||
|
||||
const handleReturnToCurrent = () => {
|
||||
if (currentRevision) setSelectedRevisionId(currentRevision.id);
|
||||
setCompareOn(false);
|
||||
setSnapshotOpen(true);
|
||||
};
|
||||
|
||||
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)]">
|
||||
<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>
|
||||
<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}
|
||||
/>
|
||||
)}
|
||||
|
||||
{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({
|
||||
revisionNumber,
|
||||
nextRevisionNumber,
|
||||
onReturn,
|
||||
function RevisionSnapshotDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
revision,
|
||||
currentRevision,
|
||||
isHistorical,
|
||||
compareOn,
|
||||
onCompareToggle,
|
||||
agents,
|
||||
projects,
|
||||
onRestore,
|
||||
pending,
|
||||
restorePending,
|
||||
highlighted,
|
||||
}: {
|
||||
revisionNumber: number;
|
||||
nextRevisionNumber: number;
|
||||
onReturn: () => void;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => 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">
|
||||
<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>
|
||||
<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>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={onReturn} disabled={pending}>
|
||||
Return to current
|
||||
<DialogFooter className="justify-between sm:justify-between">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={restorePending}>
|
||||
Close
|
||||
</Button>
|
||||
<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>
|
||||
{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}
|
||||
</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">
|
||||
<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 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>
|
||||
</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 && (
|
||||
<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>
|
||||
)}
|
||||
{row.differs && <DiffPill kind="differs" />}
|
||||
</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">
|
||||
Description
|
||||
</p>
|
||||
<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>
|
||||
<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) => (
|
||||
<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>
|
||||
))}
|
||||
{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>
|
||||
);
|
||||
})}
|
||||
</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) => (
|
||||
<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>
|
||||
))}
|
||||
{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>
|
||||
);
|
||||
})}
|
||||
</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;
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -591,22 +591,22 @@ export function RoutineDetail() {
|
||||
const activityTabsPanel = useMemo(() => {
|
||||
if (!routine) return null;
|
||||
return (
|
||||
<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">
|
||||
<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">
|
||||
<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" />
|
||||
|
||||
Reference in New Issue
Block a user