mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-16 02:40:39 +09:00
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
GitHub
parent
486fb88a15
commit
74cb560c41
8 changed files with 584 additions and 553 deletions
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue