mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-16 10:50:38 +09:00
Add routine revision history and restore flow (#5285)
## Thinking Path > - Paperclip is the control plane for autonomous AI companies. > - Routines are the scheduled/recurring work surface that keeps a company operating without manual kicks. > - Operators need routine edits to be auditable and recoverable, especially when routines control assignments, prompts, triggers, and webhook secrets. > - Documents already have revision-style safety, but routines did not have equivalent history or restore semantics. > - This pull request adds append-only routine revisions across the database, shared contracts, server routes, and board UI. > - The benefit is safer routine iteration: users can inspect history, compare changes, restore older definitions, and avoid overwriting newer edits. ## What Changed - Added `routine_revisions` storage, latest revision pointers on routines, shared types, validators, and API docs for routine revision history. - Added server service/route support for listing routine revisions, conflict-aware routine saves, and append-only restore operations. - Added a History tab on routine detail with revision preview, structured change summaries, description line diffs, dirty-edit blocking, restore confirmation, and restored webhook secret surfacing. - Extracted the line diff helper from `DocumentDiffModal` into `ui/src/lib/line-diff.ts` for reuse. - Rebased the branch onto current `public-gh/master` and renumbered the routine revision migration to `0077_unusual_karnak` after upstream `0076_useful_elektra`. - Made the `0077` routine revision migration idempotent so installs that already applied the branch-local `0076_unusual_karnak` can safely advance. - Updated the plugin SDK test harness routine fixture with the new revision fields required by the shared `Routine` contract. ## Verification - `pnpm --filter @paperclipai/db run check:migrations` passed. - `pnpm exec vitest run --project @paperclipai/shared packages/shared/src/validators/routine.test.ts` passed. - `pnpm exec vitest run --project @paperclipai/ui ui/src/lib/line-diff.test.ts ui/src/components/RoutineHistoryTab.test.tsx ui/src/lib/workspace-routines.test.ts ui/src/pages/Routines.test.tsx` passed. - `pnpm exec vitest run --project @paperclipai/server server/src/__tests__/routines-service.test.ts --pool=forks --poolOptions.forks.isolate=true` passed. - `pnpm exec vitest run --project @paperclipai/server server/src/__tests__/routines-routes.test.ts --pool=forks --poolOptions.forks.isolate=true` passed. - `pnpm --filter @paperclipai/plugin-sdk typecheck` passed after updating the SDK test harness fixture. - `pnpm --filter @paperclipai/plugin-sdk build` passed; this refreshed local generated SDK output needed by plugin example typechecks. - `pnpm -r typecheck` passed. ## Risks - Medium migration risk: this adds routine revision storage and backfills existing routines. The migration is ordered after upstream `0076` and uses `IF NOT EXISTS` / duplicate-object guards to tolerate earlier branch-local migration application. - Restore behavior intentionally appends a new revision instead of mutating history; callers expecting an in-place rollback need to follow the new latest revision pointer. - Restoring webhook triggers recreates webhook secret material, so users must copy newly surfaced secrets after restore. - Conflict-aware saves now reject stale routine edits when the client sends an older `baseRevisionId`. > 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-based coding agent, with shell/tool use in a local git worktree. Exact context-window size is not exposed in this runtime. ## 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 Screenshots: not attached in this draft PR; the new UI flow is covered by component tests listed above. --------- Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
GitHub
parent
9578dc3da7
commit
d6d7a7cea6
27 changed files with 19593 additions and 238 deletions
|
|
@ -3,6 +3,7 @@ import type {
|
|||
Routine,
|
||||
RoutineDetail,
|
||||
RoutineListItem,
|
||||
RoutineRevision,
|
||||
RoutineRun,
|
||||
RoutineRunSummary,
|
||||
RoutineTrigger,
|
||||
|
|
@ -21,6 +22,18 @@ export interface RotateRoutineTriggerResponse {
|
|||
secretMaterial: RoutineTriggerSecretMaterial;
|
||||
}
|
||||
|
||||
export interface RestoreRoutineRevisionSecretMaterial extends RoutineTriggerSecretMaterial {
|
||||
triggerId: string;
|
||||
}
|
||||
|
||||
export interface RestoreRoutineRevisionResponse {
|
||||
routine: Routine;
|
||||
revision: RoutineRevision;
|
||||
restoredFromRevisionId: string;
|
||||
restoredFromRevisionNumber: number;
|
||||
secretMaterials: RestoreRoutineRevisionSecretMaterial[];
|
||||
}
|
||||
|
||||
export const routinesApi = {
|
||||
list: (companyId: string, filters?: { projectId?: string | null }) => {
|
||||
const params = new URLSearchParams();
|
||||
|
|
@ -32,6 +45,16 @@ export const routinesApi = {
|
|||
api.post<Routine>(`/companies/${companyId}/routines`, data),
|
||||
get: (id: string) => api.get<RoutineDetail>(`/routines/${id}`),
|
||||
update: (id: string, data: Record<string, unknown>) => api.patch<Routine>(`/routines/${id}`, data),
|
||||
listRevisions: (id: string) => api.get<RoutineRevision[]>(`/routines/${id}/revisions`),
|
||||
restoreRevision: (
|
||||
id: string,
|
||||
revisionId: string,
|
||||
body: { changeSummary?: string | null } = {},
|
||||
) =>
|
||||
api.post<RestoreRoutineRevisionResponse>(
|
||||
`/routines/${id}/revisions/${revisionId}/restore`,
|
||||
body,
|
||||
),
|
||||
listRuns: (id: string, limit: number = 50) => api.get<RoutineRunSummary[]>(`/routines/${id}/runs?limit=${limit}`),
|
||||
createTrigger: (id: string, data: Record<string, unknown>) =>
|
||||
api.post<RoutineTriggerResponse>(`/routines/${id}/triggers`, data),
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { useQuery } from "@tanstack/react-query";
|
|||
import type { DocumentRevision } from "@paperclipai/shared";
|
||||
import { issuesApi } from "../api/issues";
|
||||
import { queryKeys } from "../lib/queryKeys";
|
||||
import { buildLineDiff, type DiffRow } from "../lib/line-diff";
|
||||
import { relativeTime } from "../lib/utils";
|
||||
import {
|
||||
Dialog,
|
||||
|
|
@ -27,96 +28,6 @@ function getRevisionLabel(revision: DocumentRevision) {
|
|||
return `rev ${revision.revisionNumber} — ${relativeTime(revision.createdAt)} • ${actor}`;
|
||||
}
|
||||
|
||||
type DiffRow = {
|
||||
kind: "context" | "removed" | "added";
|
||||
oldLineNumber: number | null;
|
||||
newLineNumber: number | null;
|
||||
text: string;
|
||||
};
|
||||
|
||||
function buildLineDiff(oldText: string, newText: string): DiffRow[] {
|
||||
const oldLines = oldText.split("\n");
|
||||
const newLines = newText.split("\n");
|
||||
const oldCount = oldLines.length;
|
||||
const newCount = newLines.length;
|
||||
const dp = Array.from({ length: oldCount + 1 }, () => Array<number>(newCount + 1).fill(0));
|
||||
|
||||
for (let i = oldCount - 1; i >= 0; i -= 1) {
|
||||
for (let j = newCount - 1; j >= 0; j -= 1) {
|
||||
dp[i][j] = oldLines[i] === newLines[j]
|
||||
? dp[i + 1][j + 1] + 1
|
||||
: Math.max(dp[i + 1][j], dp[i][j + 1]);
|
||||
}
|
||||
}
|
||||
|
||||
const rows: DiffRow[] = [];
|
||||
let i = 0;
|
||||
let j = 0;
|
||||
let oldLineNumber = 1;
|
||||
let newLineNumber = 1;
|
||||
|
||||
while (i < oldCount && j < newCount) {
|
||||
if (oldLines[i] === newLines[j]) {
|
||||
rows.push({
|
||||
kind: "context",
|
||||
oldLineNumber,
|
||||
newLineNumber,
|
||||
text: oldLines[i],
|
||||
});
|
||||
i += 1;
|
||||
j += 1;
|
||||
oldLineNumber += 1;
|
||||
newLineNumber += 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (dp[i + 1][j] >= dp[i][j + 1]) {
|
||||
rows.push({
|
||||
kind: "removed",
|
||||
oldLineNumber,
|
||||
newLineNumber: null,
|
||||
text: oldLines[i],
|
||||
});
|
||||
i += 1;
|
||||
oldLineNumber += 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
rows.push({
|
||||
kind: "added",
|
||||
oldLineNumber: null,
|
||||
newLineNumber,
|
||||
text: newLines[j],
|
||||
});
|
||||
j += 1;
|
||||
newLineNumber += 1;
|
||||
}
|
||||
|
||||
while (i < oldCount) {
|
||||
rows.push({
|
||||
kind: "removed",
|
||||
oldLineNumber,
|
||||
newLineNumber: null,
|
||||
text: oldLines[i],
|
||||
});
|
||||
i += 1;
|
||||
oldLineNumber += 1;
|
||||
}
|
||||
|
||||
while (j < newCount) {
|
||||
rows.push({
|
||||
kind: "added",
|
||||
oldLineNumber: null,
|
||||
newLineNumber,
|
||||
text: newLines[j],
|
||||
});
|
||||
j += 1;
|
||||
newLineNumber += 1;
|
||||
}
|
||||
|
||||
return rows;
|
||||
}
|
||||
|
||||
export function DocumentDiffModal({
|
||||
issueId,
|
||||
documentKey,
|
||||
|
|
|
|||
376
ui/src/components/RoutineHistoryTab.test.tsx
Normal file
376
ui/src/components/RoutineHistoryTab.test.tsx
Normal file
|
|
@ -0,0 +1,376 @@
|
|||
// @vitest-environment jsdom
|
||||
|
||||
import { act } from "react";
|
||||
import type { ComponentProps } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import type {
|
||||
Routine,
|
||||
RoutineRevision,
|
||||
RoutineRevisionSnapshotV1,
|
||||
} from "@paperclipai/shared";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { RoutineHistoryTab } from "./RoutineHistoryTab";
|
||||
|
||||
const mockRoutinesApi = vi.hoisted(() => ({
|
||||
listRevisions: vi.fn(),
|
||||
restoreRevision: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("../api/routines", async () => {
|
||||
const actual = await vi.importActual<Record<string, unknown>>("../api/routines");
|
||||
return {
|
||||
...actual,
|
||||
routinesApi: {
|
||||
...((actual as { routinesApi?: Record<string, unknown> }).routinesApi ?? {}),
|
||||
...mockRoutinesApi,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock("./MarkdownBody", () => ({
|
||||
MarkdownBody: ({ children }: { children: string }) => <div>{children}</div>,
|
||||
}));
|
||||
|
||||
vi.mock("@/components/ui/dialog", () => ({
|
||||
Dialog: ({ open, children }: { open: boolean; children: React.ReactNode }) =>
|
||||
open ? <div data-testid="dialog">{children}</div> : null,
|
||||
DialogContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||
DialogHeader: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||
DialogTitle: ({ children }: { children: React.ReactNode }) => <h2>{children}</h2>,
|
||||
DialogDescription: ({ children }: { children: React.ReactNode }) => <p>{children}</p>,
|
||||
DialogFooter: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||
}));
|
||||
|
||||
vi.mock("@/components/ui/button", () => ({
|
||||
Button: ({ children, onClick, type = "button", disabled, ...props }: ComponentProps<"button">) => (
|
||||
<button type={type} onClick={onClick} disabled={disabled} {...props}>
|
||||
{children}
|
||||
</button>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock("@/components/ui/input", () => ({
|
||||
Input: (props: ComponentProps<"input">) => <input {...props} />,
|
||||
}));
|
||||
|
||||
vi.mock("@/components/ui/label", () => ({
|
||||
Label: ({ children, htmlFor }: { children: React.ReactNode; htmlFor?: string }) => (
|
||||
<label htmlFor={htmlFor}>{children}</label>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock("@/components/ui/skeleton", () => ({
|
||||
Skeleton: (props: ComponentProps<"div">) => <div data-testid="skeleton" {...props} />,
|
||||
}));
|
||||
|
||||
const toastSpy = vi.fn();
|
||||
vi.mock("../context/ToastContext", () => ({
|
||||
useToastActions: () => ({ pushToast: toastSpy }),
|
||||
}));
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
|
||||
|
||||
async function flush() {
|
||||
await act(async () => {
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
});
|
||||
}
|
||||
|
||||
function snapshotV1(overrides?: Partial<RoutineRevisionSnapshotV1["routine"]>): RoutineRevisionSnapshotV1 {
|
||||
return {
|
||||
version: 1,
|
||||
routine: {
|
||||
id: "routine-1",
|
||||
companyId: "company-1",
|
||||
projectId: null,
|
||||
goalId: null,
|
||||
parentIssueId: null,
|
||||
title: "Daily standup digest",
|
||||
description: "Summarize standup notes",
|
||||
assigneeAgentId: null,
|
||||
priority: "medium",
|
||||
status: "active",
|
||||
concurrencyPolicy: "coalesce_if_active",
|
||||
catchUpPolicy: "skip_missed",
|
||||
variables: [],
|
||||
...overrides,
|
||||
},
|
||||
triggers: [],
|
||||
};
|
||||
}
|
||||
|
||||
function createRevision(overrides: Partial<RoutineRevision> = {}): RoutineRevision {
|
||||
return {
|
||||
id: overrides.id ?? "revision-1",
|
||||
companyId: "company-1",
|
||||
routineId: "routine-1",
|
||||
revisionNumber: overrides.revisionNumber ?? 1,
|
||||
title: "Daily standup digest",
|
||||
description: "Summarize standup notes",
|
||||
snapshot: overrides.snapshot ?? snapshotV1(),
|
||||
changeSummary: null,
|
||||
restoredFromRevisionId: null,
|
||||
createdByAgentId: null,
|
||||
createdByUserId: "user-1",
|
||||
createdByRunId: null,
|
||||
createdAt: new Date("2026-05-01T12:00:00.000Z"),
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
function createRoutine(overrides: Partial<Routine> = {}): Routine {
|
||||
return {
|
||||
id: "routine-1",
|
||||
companyId: "company-1",
|
||||
projectId: null,
|
||||
goalId: null,
|
||||
parentIssueId: null,
|
||||
title: "Daily standup digest",
|
||||
description: "Summarize standup notes",
|
||||
assigneeAgentId: null,
|
||||
priority: "medium",
|
||||
status: "active",
|
||||
concurrencyPolicy: "coalesce_if_active",
|
||||
catchUpPolicy: "skip_missed",
|
||||
variables: [],
|
||||
latestRevisionId: "revision-2",
|
||||
latestRevisionNumber: 2,
|
||||
createdByAgentId: null,
|
||||
createdByUserId: "user-1",
|
||||
updatedByAgentId: null,
|
||||
updatedByUserId: "user-1",
|
||||
lastTriggeredAt: null,
|
||||
lastEnqueuedAt: null,
|
||||
createdAt: new Date("2026-05-01T11:00:00.000Z"),
|
||||
updatedAt: new Date("2026-05-04T12:00:00.000Z"),
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
function makeQueryClient() {
|
||||
return new QueryClient({
|
||||
defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
|
||||
});
|
||||
}
|
||||
|
||||
describe("RoutineHistoryTab", () => {
|
||||
let container: HTMLDivElement;
|
||||
|
||||
beforeEach(() => {
|
||||
container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
vi.clearAllMocks();
|
||||
toastSpy.mockReset();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
container.remove();
|
||||
});
|
||||
|
||||
async function render(props: Partial<Parameters<typeof RoutineHistoryTab>[0]> = {}) {
|
||||
const root = createRoot(container);
|
||||
const queryClient = makeQueryClient();
|
||||
const routine = props.routine ?? createRoutine();
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<RoutineHistoryTab
|
||||
routine={routine}
|
||||
isEditDirty={false}
|
||||
dirtyFields={[]}
|
||||
onDiscardEdits={() => {}}
|
||||
onSaveEdits={() => {}}
|
||||
agents={new Map()}
|
||||
projects={new Map()}
|
||||
onRestoreSecretMaterials={() => {}}
|
||||
{...props}
|
||||
/>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flush();
|
||||
return root;
|
||||
}
|
||||
|
||||
it("shows the empty state when only the bootstrap revision exists", async () => {
|
||||
mockRoutinesApi.listRevisions.mockResolvedValue([
|
||||
createRevision({ id: "revision-1", revisionNumber: 1 }),
|
||||
]);
|
||||
await render({
|
||||
routine: createRoutine({ latestRevisionId: "revision-1", latestRevisionNumber: 1 }),
|
||||
});
|
||||
expect(container.textContent).toContain("No edits yet");
|
||||
expect(container.textContent).toContain("Revision 1 is the only history");
|
||||
});
|
||||
|
||||
it("renders the revision list with current and historical pills", async () => {
|
||||
const current = createRevision({
|
||||
id: "revision-2",
|
||||
revisionNumber: 2,
|
||||
changeSummary: "Updated routine",
|
||||
});
|
||||
const old = createRevision({
|
||||
id: "revision-1",
|
||||
revisionNumber: 1,
|
||||
changeSummary: "Created routine",
|
||||
});
|
||||
mockRoutinesApi.listRevisions.mockResolvedValue([current, old]);
|
||||
await render();
|
||||
expect(container.textContent).toContain("rev 2");
|
||||
expect(container.textContent).toContain("rev 1");
|
||||
expect(container.textContent).toContain("Current");
|
||||
});
|
||||
|
||||
it("shows the historical-preview banner with append-only copy when previewing an old revision", async () => {
|
||||
const current = createRevision({
|
||||
id: "revision-2",
|
||||
revisionNumber: 2,
|
||||
changeSummary: "Updated routine",
|
||||
});
|
||||
const old = createRevision({
|
||||
id: "revision-1",
|
||||
revisionNumber: 1,
|
||||
snapshot: snapshotV1({ status: "paused" }),
|
||||
changeSummary: "Created routine",
|
||||
});
|
||||
mockRoutinesApi.listRevisions.mockResolvedValue([current, old]);
|
||||
await render();
|
||||
const oldRow = container.querySelector(
|
||||
"[data-testid='revision-row-1']",
|
||||
) as HTMLButtonElement | null;
|
||||
expect(oldRow).not.toBeNull();
|
||||
await act(async () => {
|
||||
oldRow?.click();
|
||||
});
|
||||
await flush();
|
||||
expect(container.textContent).toContain("Viewing revision 1 (read-only)");
|
||||
expect(container.textContent).toContain(
|
||||
"Restoring this revision creates a new revision 3 with the same content. History stays append-only.",
|
||||
);
|
||||
expect(container.textContent).toContain("Status");
|
||||
expect(container.textContent).toContain("paused");
|
||||
expect(container.textContent).toContain("Restore as new revision");
|
||||
});
|
||||
|
||||
it("blocks historical preview and surfaces the conflict banner when local edits are dirty", async () => {
|
||||
const current = createRevision({ id: "revision-2", revisionNumber: 2 });
|
||||
const old = createRevision({ id: "revision-1", revisionNumber: 1 });
|
||||
mockRoutinesApi.listRevisions.mockResolvedValue([current, old]);
|
||||
await render({
|
||||
isEditDirty: true,
|
||||
dirtyFields: [{ key: "description", label: "the description" }],
|
||||
});
|
||||
expect(container.textContent).toContain("Unsaved routine edits");
|
||||
const oldRow = container.querySelector(
|
||||
"[data-testid='revision-row-1']",
|
||||
) as HTMLButtonElement | null;
|
||||
expect(oldRow?.disabled).toBe(true);
|
||||
});
|
||||
|
||||
it("calls restoreRevision and surfaces a success toast after confirming restore", async () => {
|
||||
const current = createRevision({ id: "revision-2", revisionNumber: 2 });
|
||||
const old = createRevision({ id: "revision-1", revisionNumber: 1 });
|
||||
mockRoutinesApi.listRevisions.mockResolvedValue([current, old]);
|
||||
mockRoutinesApi.restoreRevision.mockResolvedValue({
|
||||
routine: createRoutine({ latestRevisionId: "revision-3", latestRevisionNumber: 3 }),
|
||||
revision: createRevision({
|
||||
id: "revision-3",
|
||||
revisionNumber: 3,
|
||||
restoredFromRevisionId: "revision-1",
|
||||
}),
|
||||
restoredFromRevisionId: "revision-1",
|
||||
restoredFromRevisionNumber: 1,
|
||||
secretMaterials: [],
|
||||
});
|
||||
await render();
|
||||
const oldRow = container.querySelector(
|
||||
"[data-testid='revision-row-1']",
|
||||
) as HTMLButtonElement | null;
|
||||
await act(async () => {
|
||||
oldRow?.click();
|
||||
});
|
||||
await flush();
|
||||
const restoreButtons = Array.from(container.querySelectorAll("button")).filter(
|
||||
(button) => button.textContent === "Restore as new revision",
|
||||
);
|
||||
expect(restoreButtons.length).toBeGreaterThan(0);
|
||||
await act(async () => {
|
||||
restoreButtons[0].click();
|
||||
});
|
||||
await flush();
|
||||
expect(container.querySelector("[data-testid='dialog']")).not.toBeNull();
|
||||
const confirmButtons = Array.from(container.querySelectorAll("button")).filter((b) =>
|
||||
(b.textContent ?? "").includes("Restore as revision 3"),
|
||||
);
|
||||
expect(confirmButtons.length).toBeGreaterThan(0);
|
||||
await act(async () => {
|
||||
confirmButtons[0].click();
|
||||
});
|
||||
await flush();
|
||||
expect(mockRoutinesApi.restoreRevision).toHaveBeenCalledWith(
|
||||
"routine-1",
|
||||
"revision-1",
|
||||
{ changeSummary: null },
|
||||
);
|
||||
expect(toastSpy).toHaveBeenCalled();
|
||||
const successCall = toastSpy.mock.calls.find(
|
||||
(call) => call[0]?.title === "Restored revision 1 as revision 3",
|
||||
);
|
||||
expect(successCall).toBeTruthy();
|
||||
});
|
||||
|
||||
it("invokes onRestored with the restore response so the editor can rehydrate (PAP-3588)", async () => {
|
||||
const current = createRevision({ id: "revision-2", revisionNumber: 2 });
|
||||
const old = createRevision({
|
||||
id: "revision-1",
|
||||
revisionNumber: 1,
|
||||
snapshot: snapshotV1({ description: "Original description" }),
|
||||
});
|
||||
mockRoutinesApi.listRevisions.mockResolvedValue([current, old]);
|
||||
const restoredRoutine = createRoutine({
|
||||
description: "Original description",
|
||||
latestRevisionId: "revision-3",
|
||||
latestRevisionNumber: 3,
|
||||
});
|
||||
mockRoutinesApi.restoreRevision.mockResolvedValue({
|
||||
routine: restoredRoutine,
|
||||
revision: createRevision({
|
||||
id: "revision-3",
|
||||
revisionNumber: 3,
|
||||
restoredFromRevisionId: "revision-1",
|
||||
}),
|
||||
restoredFromRevisionId: "revision-1",
|
||||
restoredFromRevisionNumber: 1,
|
||||
secretMaterials: [],
|
||||
});
|
||||
const onRestored = vi.fn();
|
||||
await render({ onRestored });
|
||||
const oldRow = container.querySelector(
|
||||
"[data-testid='revision-row-1']",
|
||||
) as HTMLButtonElement | null;
|
||||
await act(async () => {
|
||||
oldRow?.click();
|
||||
});
|
||||
await flush();
|
||||
const restoreButtons = Array.from(container.querySelectorAll("button")).filter(
|
||||
(button) => button.textContent === "Restore as new revision",
|
||||
);
|
||||
await act(async () => {
|
||||
restoreButtons[0].click();
|
||||
});
|
||||
await flush();
|
||||
const confirmButtons = Array.from(container.querySelectorAll("button")).filter((b) =>
|
||||
(b.textContent ?? "").includes("Restore as revision 3"),
|
||||
);
|
||||
await act(async () => {
|
||||
confirmButtons[0].click();
|
||||
});
|
||||
await flush();
|
||||
expect(onRestored).toHaveBeenCalledTimes(1);
|
||||
const [response] = onRestored.mock.calls[0];
|
||||
expect(response.routine).toEqual(restoredRoutine);
|
||||
expect(response.revision.id).toBe("revision-3");
|
||||
});
|
||||
});
|
||||
1100
ui/src/components/RoutineHistoryTab.tsx
Normal file
1100
ui/src/components/RoutineHistoryTab.tsx
Normal file
File diff suppressed because it is too large
Load diff
26
ui/src/lib/line-diff.test.ts
Normal file
26
ui/src/lib/line-diff.test.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { describe, expect, it } from "vitest";
|
||||
import { buildLineDiff } from "./line-diff";
|
||||
|
||||
describe("buildLineDiff", () => {
|
||||
it("emits context rows when both sides are identical", () => {
|
||||
const rows = buildLineDiff("a\nb\nc", "a\nb\nc");
|
||||
expect(rows).toHaveLength(3);
|
||||
expect(rows.every((row) => row.kind === "context")).toBe(true);
|
||||
});
|
||||
|
||||
it("marks added and removed lines", () => {
|
||||
const rows = buildLineDiff("a\nb\nc", "a\nB\nc");
|
||||
const kinds = rows.map((row) => row.kind);
|
||||
expect(kinds).toContain("removed");
|
||||
expect(kinds).toContain("added");
|
||||
const removed = rows.find((row) => row.kind === "removed");
|
||||
const added = rows.find((row) => row.kind === "added");
|
||||
expect(removed?.text).toBe("b");
|
||||
expect(added?.text).toBe("B");
|
||||
});
|
||||
|
||||
it("handles empty old text as full insertion", () => {
|
||||
const rows = buildLineDiff("", "x\ny");
|
||||
expect(rows.filter((row) => row.kind === "added")).toHaveLength(2);
|
||||
});
|
||||
});
|
||||
91
ui/src/lib/line-diff.ts
Normal file
91
ui/src/lib/line-diff.ts
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
export type DiffRowKind = "context" | "removed" | "added";
|
||||
|
||||
export type DiffRow = {
|
||||
kind: DiffRowKind;
|
||||
oldLineNumber: number | null;
|
||||
newLineNumber: number | null;
|
||||
text: string;
|
||||
};
|
||||
|
||||
export function buildLineDiff(oldText: string, newText: string): DiffRow[] {
|
||||
const oldLines = oldText.split("\n");
|
||||
const newLines = newText.split("\n");
|
||||
const oldCount = oldLines.length;
|
||||
const newCount = newLines.length;
|
||||
const dp = Array.from({ length: oldCount + 1 }, () => Array<number>(newCount + 1).fill(0));
|
||||
|
||||
for (let i = oldCount - 1; i >= 0; i -= 1) {
|
||||
for (let j = newCount - 1; j >= 0; j -= 1) {
|
||||
dp[i][j] = oldLines[i] === newLines[j]
|
||||
? dp[i + 1][j + 1] + 1
|
||||
: Math.max(dp[i + 1][j], dp[i][j + 1]);
|
||||
}
|
||||
}
|
||||
|
||||
const rows: DiffRow[] = [];
|
||||
let i = 0;
|
||||
let j = 0;
|
||||
let oldLineNumber = 1;
|
||||
let newLineNumber = 1;
|
||||
|
||||
while (i < oldCount && j < newCount) {
|
||||
if (oldLines[i] === newLines[j]) {
|
||||
rows.push({
|
||||
kind: "context",
|
||||
oldLineNumber,
|
||||
newLineNumber,
|
||||
text: oldLines[i],
|
||||
});
|
||||
i += 1;
|
||||
j += 1;
|
||||
oldLineNumber += 1;
|
||||
newLineNumber += 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (dp[i + 1][j] >= dp[i][j + 1]) {
|
||||
rows.push({
|
||||
kind: "removed",
|
||||
oldLineNumber,
|
||||
newLineNumber: null,
|
||||
text: oldLines[i],
|
||||
});
|
||||
i += 1;
|
||||
oldLineNumber += 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
rows.push({
|
||||
kind: "added",
|
||||
oldLineNumber: null,
|
||||
newLineNumber,
|
||||
text: newLines[j],
|
||||
});
|
||||
j += 1;
|
||||
newLineNumber += 1;
|
||||
}
|
||||
|
||||
while (i < oldCount) {
|
||||
rows.push({
|
||||
kind: "removed",
|
||||
oldLineNumber,
|
||||
newLineNumber: null,
|
||||
text: oldLines[i],
|
||||
});
|
||||
i += 1;
|
||||
oldLineNumber += 1;
|
||||
}
|
||||
|
||||
while (j < newCount) {
|
||||
rows.push({
|
||||
kind: "added",
|
||||
oldLineNumber: null,
|
||||
newLineNumber,
|
||||
text: newLines[j],
|
||||
});
|
||||
j += 1;
|
||||
newLineNumber += 1;
|
||||
}
|
||||
|
||||
return rows;
|
||||
}
|
||||
|
|
@ -70,6 +70,7 @@ export const queryKeys = {
|
|||
["routines", companyId, filters?.projectId ?? "__all-projects__"] as const,
|
||||
detail: (id: string) => ["routines", "detail", id] as const,
|
||||
runs: (id: string) => ["routines", "runs", id] as const,
|
||||
revisions: (id: string) => ["routines", "revisions", id] as const,
|
||||
activity: (companyId: string, id: string) => ["routines", "activity", companyId, id] as const,
|
||||
},
|
||||
executionWorkspaces: {
|
||||
|
|
|
|||
|
|
@ -20,6 +20,8 @@ function createRoutine(overrides: Partial<RoutineListItem> = {}): RoutineListIte
|
|||
concurrencyPolicy: "coalesce_if_active",
|
||||
catchUpPolicy: "skip_missed",
|
||||
variables: [],
|
||||
latestRevisionId: null,
|
||||
latestRevisionNumber: 1,
|
||||
createdByAgentId: null,
|
||||
createdByUserId: null,
|
||||
updatedByAgentId: null,
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import {
|
|||
ChevronRight,
|
||||
Clock3,
|
||||
Copy,
|
||||
History as HistoryIcon,
|
||||
Play,
|
||||
RefreshCw,
|
||||
Repeat,
|
||||
|
|
@ -15,7 +16,12 @@ import {
|
|||
Webhook,
|
||||
Zap,
|
||||
} from "lucide-react";
|
||||
import { routinesApi, type RoutineTriggerResponse, type RotateRoutineTriggerResponse } from "../api/routines";
|
||||
import { ApiError } from "../api/client";
|
||||
import { routinesApi, type RoutineTriggerResponse, type RotateRoutineTriggerResponse, type RestoreRoutineRevisionResponse } from "../api/routines";
|
||||
import {
|
||||
RoutineHistoryTab,
|
||||
type RoutineHistoryDirtyFieldDescriptor,
|
||||
} from "../components/RoutineHistoryTab";
|
||||
import { heartbeatsApi } from "../api/heartbeats";
|
||||
import { LiveRunWidget } from "../components/LiveRunWidget";
|
||||
import { agentsApi } from "../api/agents";
|
||||
|
|
@ -57,13 +63,13 @@ import {
|
|||
} from "@/components/ui/select";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import type { RoutineTrigger, RoutineVariable } from "@paperclipai/shared";
|
||||
import type { RoutineDetail as RoutineDetailType, RoutineTrigger, RoutineVariable } from "@paperclipai/shared";
|
||||
|
||||
const concurrencyPolicies = ["coalesce_if_active", "always_enqueue", "skip_if_active"];
|
||||
const catchUpPolicies = ["skip_missed", "enqueue_missed_with_cap"];
|
||||
const triggerKinds = ["schedule", "webhook"];
|
||||
const signingModes = ["bearer", "hmac_sha256", "github_hmac", "none"];
|
||||
const routineTabs = ["triggers", "runs", "activity"] as const;
|
||||
const routineTabs = ["triggers", "runs", "activity", "history"] as const;
|
||||
const concurrencyPolicyDescriptions: Record<string, string> = {
|
||||
coalesce_if_active: "Keep one follow-up run queued while an active run is still working.",
|
||||
always_enqueue: "Queue every trigger occurrence, even if several runs stack up.",
|
||||
|
|
@ -85,8 +91,10 @@ type RoutineTab = (typeof routineTabs)[number];
|
|||
|
||||
type SecretMessage = {
|
||||
title: string;
|
||||
webhookUrl: string;
|
||||
webhookSecret: string;
|
||||
entries: Array<{
|
||||
webhookUrl: string;
|
||||
webhookSecret: string;
|
||||
}>;
|
||||
};
|
||||
|
||||
function autoResizeTextarea(element: HTMLTextAreaElement | null) {
|
||||
|
|
@ -279,6 +287,7 @@ export function RoutineDetail() {
|
|||
const projectSelectorRef = useRef<HTMLButtonElement | null>(null);
|
||||
const [secretMessage, setSecretMessage] = useState<SecretMessage | null>(null);
|
||||
const [advancedOpen, setAdvancedOpen] = useState(false);
|
||||
const [saveConflict, setSaveConflict] = useState(false);
|
||||
const [runVariablesOpen, setRunVariablesOpen] = useState(false);
|
||||
const [newTrigger, setNewTrigger] = useState({
|
||||
kind: "schedule",
|
||||
|
|
@ -374,19 +383,34 @@ export function RoutineDetail() {
|
|||
: null,
|
||||
[routine],
|
||||
);
|
||||
const isEditDirty = useMemo(() => {
|
||||
if (!routineDefaults) return false;
|
||||
return (
|
||||
editDraft.title !== routineDefaults.title ||
|
||||
editDraft.description !== routineDefaults.description ||
|
||||
editDraft.projectId !== routineDefaults.projectId ||
|
||||
editDraft.assigneeAgentId !== routineDefaults.assigneeAgentId ||
|
||||
editDraft.priority !== routineDefaults.priority ||
|
||||
editDraft.concurrencyPolicy !== routineDefaults.concurrencyPolicy ||
|
||||
editDraft.catchUpPolicy !== routineDefaults.catchUpPolicy ||
|
||||
JSON.stringify(editDraft.variables) !== JSON.stringify(routineDefaults.variables)
|
||||
);
|
||||
const dirtyFields = useMemo<RoutineHistoryDirtyFieldDescriptor[]>(() => {
|
||||
if (!routineDefaults) return [];
|
||||
const result: RoutineHistoryDirtyFieldDescriptor[] = [];
|
||||
if (editDraft.title !== routineDefaults.title) result.push({ key: "title", label: "the title" });
|
||||
if (editDraft.description !== routineDefaults.description) {
|
||||
result.push({ key: "description", label: "the description" });
|
||||
}
|
||||
if (editDraft.projectId !== routineDefaults.projectId) {
|
||||
result.push({ key: "projectId", label: "the project" });
|
||||
}
|
||||
if (editDraft.assigneeAgentId !== routineDefaults.assigneeAgentId) {
|
||||
result.push({ key: "assigneeAgentId", label: "the default agent" });
|
||||
}
|
||||
if (editDraft.priority !== routineDefaults.priority) {
|
||||
result.push({ key: "priority", label: "the priority" });
|
||||
}
|
||||
if (editDraft.concurrencyPolicy !== routineDefaults.concurrencyPolicy) {
|
||||
result.push({ key: "concurrencyPolicy", label: "the concurrency policy" });
|
||||
}
|
||||
if (editDraft.catchUpPolicy !== routineDefaults.catchUpPolicy) {
|
||||
result.push({ key: "catchUpPolicy", label: "the catch-up policy" });
|
||||
}
|
||||
if (JSON.stringify(editDraft.variables) !== JSON.stringify(routineDefaults.variables)) {
|
||||
result.push({ key: "variables", label: "the variables" });
|
||||
}
|
||||
return result;
|
||||
}, [editDraft, routineDefaults]);
|
||||
const isEditDirty = dirtyFields.length > 0;
|
||||
|
||||
useEffect(() => {
|
||||
if (!routine) return;
|
||||
|
|
@ -437,16 +461,32 @@ export function RoutineDetail() {
|
|||
|
||||
const saveRoutine = useMutation({
|
||||
mutationFn: () => {
|
||||
return routinesApi.update(routineId!, buildRoutineMutationPayload(editDraft));
|
||||
const payload = buildRoutineMutationPayload(editDraft);
|
||||
const baseRevisionId = routine?.latestRevisionId ?? null;
|
||||
return routinesApi.update(routineId!, {
|
||||
...payload,
|
||||
...(baseRevisionId ? { baseRevisionId } : {}),
|
||||
});
|
||||
},
|
||||
onSuccess: async () => {
|
||||
setSaveConflict(false);
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.routines.detail(routineId!) }),
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.routines.list(selectedCompanyId!) }),
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.routines.activity(selectedCompanyId!, routineId!) }),
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.routines.revisions(routineId!) }),
|
||||
]);
|
||||
},
|
||||
onError: (error) => {
|
||||
if (error instanceof ApiError && error.status === 409) {
|
||||
setSaveConflict(true);
|
||||
pushToast({
|
||||
title: "Routine changed",
|
||||
body: "Someone else updated this routine. Reload to see the latest revision.",
|
||||
tone: "warn",
|
||||
});
|
||||
return;
|
||||
}
|
||||
pushToast({
|
||||
title: "Failed to save routine",
|
||||
body: error instanceof Error ? error.message : "Paperclip could not save the routine.",
|
||||
|
|
@ -533,8 +573,10 @@ export function RoutineDetail() {
|
|||
if (result.secretMaterial) {
|
||||
setSecretMessage({
|
||||
title: "Webhook trigger created",
|
||||
webhookUrl: result.secretMaterial.webhookUrl,
|
||||
webhookSecret: result.secretMaterial.webhookSecret,
|
||||
entries: [{
|
||||
webhookUrl: result.secretMaterial.webhookUrl,
|
||||
webhookSecret: result.secretMaterial.webhookSecret,
|
||||
}],
|
||||
});
|
||||
} else {
|
||||
pushToast({
|
||||
|
|
@ -608,8 +650,10 @@ export function RoutineDetail() {
|
|||
onSuccess: async (result) => {
|
||||
setSecretMessage({
|
||||
title: "Webhook secret rotated",
|
||||
webhookUrl: result.secretMaterial.webhookUrl,
|
||||
webhookSecret: result.secretMaterial.webhookSecret,
|
||||
entries: [{
|
||||
webhookUrl: result.secretMaterial.webhookUrl,
|
||||
webhookSecret: result.secretMaterial.webhookSecret,
|
||||
}],
|
||||
});
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.routines.detail(routineId!) }),
|
||||
|
|
@ -777,19 +821,58 @@ export function RoutineDetail() {
|
|||
<p className="font-medium">{secretMessage.title}</p>
|
||||
<p className="text-xs text-muted-foreground">Save this now. Paperclip will not show the secret value again.</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Input value={secretMessage.webhookUrl} readOnly className="flex-1" />
|
||||
<Button variant="outline" size="sm" onClick={() => copySecretValue("Webhook URL", secretMessage.webhookUrl)}>
|
||||
<Copy className="h-3.5 w-3.5 mr-1" />
|
||||
URL
|
||||
</Button>
|
||||
<div className="space-y-3">
|
||||
{secretMessage.entries.map((entry, index) => (
|
||||
<div key={`${entry.webhookUrl}-${index}`} className="space-y-2">
|
||||
{secretMessage.entries.length > 1 && (
|
||||
<p className="text-xs font-medium text-muted-foreground">
|
||||
Webhook trigger {index + 1} of {secretMessage.entries.length}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
<Input value={entry.webhookUrl} readOnly className="flex-1" />
|
||||
<Button variant="outline" size="sm" onClick={() => copySecretValue("Webhook URL", entry.webhookUrl)}>
|
||||
<Copy className="h-3.5 w-3.5 mr-1" />
|
||||
URL
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input value={entry.webhookSecret} readOnly className="flex-1" />
|
||||
<Button variant="outline" size="sm" onClick={() => copySecretValue("Webhook secret", entry.webhookSecret)}>
|
||||
<Copy className="h-3.5 w-3.5 mr-1" />
|
||||
Secret
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Save conflict banner */}
|
||||
{saveConflict && (
|
||||
<div className="rounded-md border border-amber-500/30 bg-amber-500/5 px-4 py-3 text-sm">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="space-y-1">
|
||||
<p className="font-medium text-amber-200">Out of date</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
This routine changed while you were editing. Reload to merge the latest revision before
|
||||
saving again.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input value={secretMessage.webhookSecret} readOnly className="flex-1" />
|
||||
<Button variant="outline" size="sm" onClick={() => copySecretValue("Webhook secret", secretMessage.webhookSecret)}>
|
||||
<Copy className="h-3.5 w-3.5 mr-1" />
|
||||
Secret
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSaveConflict(false);
|
||||
if (routineDefaults) {
|
||||
setEditDraft(routineDefaults);
|
||||
}
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.routines.detail(routineId!) });
|
||||
}}
|
||||
>
|
||||
Reload latest
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -999,6 +1082,10 @@ export function RoutineDetail() {
|
|||
<ActivityIcon className="h-3.5 w-3.5" />
|
||||
Activity
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="history" className="gap-1.5">
|
||||
<HistoryIcon className="h-3.5 w-3.5" />
|
||||
History
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="triggers" className="space-y-4">
|
||||
|
|
@ -1138,6 +1225,63 @@ export function RoutineDetail() {
|
|||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="history">
|
||||
<RoutineHistoryTab
|
||||
routine={routine}
|
||||
isEditDirty={isEditDirty}
|
||||
dirtyFields={dirtyFields}
|
||||
onDiscardEdits={() => {
|
||||
if (routineDefaults) setEditDraft(routineDefaults);
|
||||
}}
|
||||
onSaveEdits={() => {
|
||||
if (!saveRoutine.isPending && editDraft.title.trim()) {
|
||||
saveRoutine.mutate();
|
||||
}
|
||||
}}
|
||||
agents={agentById}
|
||||
projects={projectById}
|
||||
onRestoreSecretMaterials={(response: RestoreRoutineRevisionResponse) => {
|
||||
if (response.secretMaterials.length > 0) {
|
||||
setSecretMessage({
|
||||
title: response.secretMaterials.length === 1
|
||||
? "Webhook trigger restored"
|
||||
: `${response.secretMaterials.length} webhook triggers restored`,
|
||||
entries: response.secretMaterials.map((recreated) => ({
|
||||
webhookUrl: recreated.webhookUrl,
|
||||
webhookSecret: recreated.webhookSecret,
|
||||
})),
|
||||
});
|
||||
}
|
||||
}}
|
||||
onRestored={(response: RestoreRoutineRevisionResponse) => {
|
||||
setSaveConflict(false);
|
||||
queryClient.setQueryData<RoutineDetailType | undefined>(
|
||||
queryKeys.routines.detail(routineId!),
|
||||
(prev) =>
|
||||
prev
|
||||
? {
|
||||
...prev,
|
||||
...response.routine,
|
||||
latestRevisionId: response.revision.id,
|
||||
latestRevisionNumber: response.revision.revisionNumber,
|
||||
}
|
||||
: prev,
|
||||
);
|
||||
setEditDraft({
|
||||
title: response.routine.title,
|
||||
description: response.routine.description ?? "",
|
||||
projectId: response.routine.projectId ?? "",
|
||||
assigneeAgentId: response.routine.assigneeAgentId ?? "",
|
||||
priority: response.routine.priority,
|
||||
concurrencyPolicy: response.routine.concurrencyPolicy,
|
||||
catchUpPolicy: response.routine.catchUpPolicy,
|
||||
variables: response.routine.variables,
|
||||
});
|
||||
hydratedRoutineIdRef.current = response.routine.id;
|
||||
}}
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<RoutineRunVariablesDialog
|
||||
|
|
|
|||
|
|
@ -247,6 +247,8 @@ function createRoutine(overrides: Partial<RoutineListItem>): RoutineListItem {
|
|||
concurrencyPolicy: "coalesce_if_active",
|
||||
catchUpPolicy: "skip_missed",
|
||||
variables: [],
|
||||
latestRevisionId: null,
|
||||
latestRevisionNumber: 1,
|
||||
createdByAgentId: null,
|
||||
createdByUserId: null,
|
||||
updatedByAgentId: null,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue