feat(ui): routine detail page — variation C sub-sidebar layout (PAP-10732) (#7848)
## Summary Rebuilds the routine detail page as **variation C** — a sub-sidebar shell that splits the page into **ROUTINE** (Overview · Triggers · Variables · Secrets · Delivery) and **OPERATE** (Runs · Activity · History), per the engineering spec on PAP-10730. Replaces the previous 5-tab `?tab=…` layout in `ui/src/pages/RoutineDetail.tsx`. Implements PAP-10732. Design source of truth: PAP-10730 `spec` document; approved direction PAP-10709. ## What changed - **Routing** (`ui/src/App.tsx`): real sub-routes under `routines/:routineId/:section`. Bare `/routines/:id` redirects to the last-viewed section (`localStorage`) or `overview`; old `?tab=…` URLs redirect to the matching section for back-compat. Every section URL is bookmarkable. - **Shell** (`RoutineDetail.tsx`): slim 56px sticky header (title + managed-by-plugin chip + Run / Active toggle), page-local sub-sidebar, full-canvas section body, per-section sticky save bar. All routine state/mutations stay in the shell and flow to sections via a `RoutineDetailContext`. - **New components**: `RoutineSubSidebar` (+ mobile `<Select>` picker, roving keyboard nav), `RoutineSaveBar` (scoped dirty count, ⌘/Ctrl+S save, Esc-discard confirm, 409 conflict recovery with Reload / Overwrite), `RadioCard` primitive (Delivery), `RoutineTriggerCard` (extracted from the inline editor, with human-readable cron), `RoutineActivityRow` (expandable JSON), `lib/cron-readable`, and the per-section components. - **Reuse**: History mounts the existing `RoutineHistoryTab`; Variables mounts `RoutineVariablesEditor` with a provenance banner; Secrets reuses `EnvVarEditor` + the one-time reveal banner. No backend or schema changes. - **States**: per-section loading/empty/error/save-conflict and read-only strip scaffolding (§1.6). ## Testing - New unit tests: sub-sidebar navigation/active/dirty markers, save-bar dirty + ⌘S + conflict recovery, cron helper. - Existing routine tests still pass: `Routines.test.tsx`, `RoutineHistoryTab.test.tsx`, `RoutineRunVariablesDialog.test.tsx`. - `vitest run` (routine scope): **36 passed**. Production `vite build`: **green**. - Screenshots at 1440×900 + 390×844 attached to [PAP-10732](https://example.invalid) (rendered via a new Storybook story with fixture data). ## Out of scope (per spec) - `/routines` list-page redo (follow-up). - Non-owner secret-value visibility (Open Q6 — CEO escalation; built with the spec default). --------- Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
@@ -130,6 +130,7 @@ function boardRoutes() {
|
||||
) : null}
|
||||
<Route path="routines" element={<Routines />} />
|
||||
<Route path="routines/:routineId" element={<RoutineDetail />} />
|
||||
<Route path="routines/:routineId/:section" element={<RoutineDetail />} />
|
||||
<Route path="execution-workspaces/:workspaceId" element={<ExecutionWorkspaceDetail />} />
|
||||
<Route path="execution-workspaces/:workspaceId/services" element={<ExecutionWorkspaceDetail />} />
|
||||
<Route path="execution-workspaces/:workspaceId/configuration" element={<ExecutionWorkspaceDetail />} />
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
import { useState } from "react";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import type { ActivityEvent } from "@paperclipai/shared";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export type RoutineActivityEvent = Pick<ActivityEvent, "id" | "action" | "details" | "createdAt">;
|
||||
|
||||
function formatTime(value: string | Date): string {
|
||||
try {
|
||||
return new Date(value).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
|
||||
} catch {
|
||||
return String(value);
|
||||
}
|
||||
}
|
||||
|
||||
function summarizeDetails(details: Record<string, unknown> | null | undefined): string {
|
||||
if (!details) return "";
|
||||
const entries = Object.entries(details).slice(0, 3);
|
||||
return entries
|
||||
.map(([key, value]) => `${key.replaceAll("_", " ")}: ${formatDetailValue(value)}`)
|
||||
.join(" · ");
|
||||
}
|
||||
|
||||
function formatDetailValue(value: unknown): string {
|
||||
if (value === null) return "null";
|
||||
if (typeof value === "string") return value;
|
||||
if (typeof value === "number" || typeof value === "boolean") return String(value);
|
||||
if (Array.isArray(value)) return value.length === 0 ? "[]" : value.map(formatDetailValue).join(", ");
|
||||
try {
|
||||
return JSON.stringify(value);
|
||||
} catch {
|
||||
return "[unserializable]";
|
||||
}
|
||||
}
|
||||
|
||||
/** Activity log row with an expandable JSON payload (§3.7). */
|
||||
export function RoutineActivityRow({ event }: { event: RoutineActivityEvent }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const hasPayload = event.details != null && Object.keys(event.details).length > 0;
|
||||
|
||||
return (
|
||||
<div className="border-b border-border/60 last:border-b-0">
|
||||
<button
|
||||
type="button"
|
||||
disabled={!hasPayload}
|
||||
onClick={() => setExpanded((value) => !value)}
|
||||
className={cn(
|
||||
"flex w-full items-center gap-3 px-1 py-2 text-left text-xs",
|
||||
hasPayload ? "hover:bg-accent/30" : "cursor-default",
|
||||
)}
|
||||
>
|
||||
<span className="w-12 shrink-0 font-mono text-muted-foreground/70">
|
||||
{formatTime(event.createdAt)}
|
||||
</span>
|
||||
<Badge variant="outline" className="shrink-0 font-mono">
|
||||
{event.action}
|
||||
</Badge>
|
||||
<span className="min-w-0 flex-1 truncate text-muted-foreground">
|
||||
{summarizeDetails(event.details)}
|
||||
</span>
|
||||
{hasPayload ? (
|
||||
<ChevronRight
|
||||
className={cn(
|
||||
"h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform",
|
||||
expanded && "rotate-90",
|
||||
)}
|
||||
/>
|
||||
) : null}
|
||||
</button>
|
||||
{expanded && hasPayload ? (
|
||||
<pre className="mx-1 mb-2 overflow-x-auto rounded-md bg-neutral-950 p-3 font-mono text-xs text-neutral-200">
|
||||
{JSON.stringify(event.details, null, 2)}
|
||||
</pre>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import { act } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { RoutineSaveBar } from "./RoutineSaveBar";
|
||||
import type { RoutineHistoryDirtyFieldDescriptor } from "./RoutineHistoryTab";
|
||||
|
||||
let container: HTMLDivElement;
|
||||
let root: ReturnType<typeof createRoot>;
|
||||
|
||||
beforeEach(() => {
|
||||
container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
root = createRoot(container);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
act(() => root.unmount());
|
||||
container.remove();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
const DIRTY: RoutineHistoryDirtyFieldDescriptor[] = [
|
||||
{ key: "title", label: "the title" },
|
||||
{ key: "description", label: "the description" },
|
||||
];
|
||||
|
||||
function renderBar(props: Partial<React.ComponentProps<typeof RoutineSaveBar>>) {
|
||||
const handlers = {
|
||||
onSave: vi.fn(),
|
||||
onDiscard: vi.fn(),
|
||||
onReload: vi.fn(),
|
||||
};
|
||||
act(() => {
|
||||
root.render(
|
||||
<RoutineSaveBar
|
||||
dirtyFields={props.dirtyFields ?? []}
|
||||
isSaving={props.isSaving ?? false}
|
||||
saveConflict={props.saveConflict ?? false}
|
||||
onSave={props.onSave ?? handlers.onSave}
|
||||
onDiscard={props.onDiscard ?? handlers.onDiscard}
|
||||
onReload={props.onReload ?? handlers.onReload}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
return handlers;
|
||||
}
|
||||
|
||||
describe("RoutineSaveBar", () => {
|
||||
it("renders nothing when clean and no conflict", () => {
|
||||
renderBar({ dirtyFields: [] });
|
||||
expect(container.textContent).toBe("");
|
||||
});
|
||||
|
||||
it("shows the unsaved change count when dirty", () => {
|
||||
renderBar({ dirtyFields: DIRTY });
|
||||
expect(container.textContent).toContain("2 unsaved changes");
|
||||
});
|
||||
|
||||
it("invokes onSave on Cmd/Ctrl+S while dirty", () => {
|
||||
const handlers = renderBar({ dirtyFields: DIRTY });
|
||||
act(() => {
|
||||
window.dispatchEvent(new KeyboardEvent("keydown", { key: "s", metaKey: true }));
|
||||
});
|
||||
expect(handlers.onSave).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("does not invoke onSave on Cmd+S when clean", () => {
|
||||
const handlers = renderBar({ dirtyFields: [] });
|
||||
act(() => {
|
||||
window.dispatchEvent(new KeyboardEvent("keydown", { key: "s", metaKey: true }));
|
||||
});
|
||||
expect(handlers.onSave).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("surfaces the conflict recovery actions on saveConflict", () => {
|
||||
const handlers = renderBar({ dirtyFields: DIRTY, saveConflict: true });
|
||||
expect(container.textContent).toContain("Routine changed elsewhere");
|
||||
const buttons = Array.from(container.querySelectorAll("button"));
|
||||
const reload = buttons.find((button) => button.textContent?.includes("Reload latest"));
|
||||
const overwrite = buttons.find((button) => button.textContent?.includes("Overwrite anyway"));
|
||||
expect(reload).toBeTruthy();
|
||||
expect(overwrite).toBeTruthy();
|
||||
act(() => {
|
||||
reload!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
});
|
||||
expect(handlers.onReload).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,203 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { AlertTriangle, Loader2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { RoutineHistoryDirtyFieldDescriptor } from "./RoutineHistoryTab";
|
||||
|
||||
/**
|
||||
* Per-section sticky save bar (§1.4–§1.5). Hidden when clean; reveals on dirty.
|
||||
* On a 409 it swaps to the conflict-recovery surface ("Reload latest" /
|
||||
* "Overwrite anyway"). Wires ⌘/Ctrl+S → save and Esc → discard-with-confirm.
|
||||
*/
|
||||
export function RoutineSaveBar({
|
||||
dirtyFields,
|
||||
isSaving,
|
||||
saveConflict,
|
||||
onSave,
|
||||
onDiscard,
|
||||
onReload,
|
||||
disabled,
|
||||
}: {
|
||||
dirtyFields: RoutineHistoryDirtyFieldDescriptor[];
|
||||
isSaving: boolean;
|
||||
saveConflict: boolean;
|
||||
onSave: () => void;
|
||||
onDiscard: () => void;
|
||||
onReload: () => void;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
const dirtyCount = dirtyFields.length;
|
||||
const isDirty = dirtyCount > 0;
|
||||
const [confirmDiscardOpen, setConfirmDiscardOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isDirty && !saveConflict) return;
|
||||
const handler = (event: KeyboardEvent) => {
|
||||
if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
|
||||
event.preventDefault();
|
||||
if (!isSaving && !disabled) onSave();
|
||||
} else if (event.key === "Escape" && isDirty) {
|
||||
event.preventDefault();
|
||||
setConfirmDiscardOpen(true);
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", handler);
|
||||
return () => window.removeEventListener("keydown", handler);
|
||||
}, [isDirty, saveConflict, isSaving, disabled, onSave]);
|
||||
|
||||
if (!isDirty && !saveConflict) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={cn(
|
||||
"sticky bottom-0 z-10 -mx-8 mt-6 flex h-14 items-center justify-between border-t px-8 backdrop-blur",
|
||||
"motion-safe:transition-colors motion-safe:duration-200",
|
||||
"motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-2",
|
||||
saveConflict
|
||||
? "border-amber-500/30 bg-amber-500/5"
|
||||
: "border-border bg-background/95",
|
||||
)}
|
||||
>
|
||||
{saveConflict ? (
|
||||
<div className="flex items-center gap-2 text-sm text-amber-200">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<span>Routine changed elsewhere. Reload to merge.</span>
|
||||
</div>
|
||||
) : (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 text-sm text-foreground hover:text-foreground"
|
||||
>
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-amber-500" />
|
||||
<span className="font-medium">
|
||||
{dirtyCount} unsaved {dirtyCount === 1 ? "change" : "changes"}
|
||||
</span>
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent align="start" className="w-64">
|
||||
<p className="mb-2 text-xs font-medium text-muted-foreground">
|
||||
Pending changes
|
||||
</p>
|
||||
<ul className="space-y-1 text-sm">
|
||||
{dirtyFields.map((field) => (
|
||||
<li key={field.key} className="flex items-center gap-2">
|
||||
<span className="h-1 w-1 rounded-full bg-amber-500" />
|
||||
<span className="capitalize">{field.label}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{saveConflict ? (
|
||||
<>
|
||||
<Button variant="outline" size="sm" onClick={onReload}>
|
||||
Reload latest
|
||||
</Button>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
disabled={isSaving || disabled}
|
||||
onClick={onSave}
|
||||
>
|
||||
{isSaving ? <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" /> : null}
|
||||
Overwrite anyway
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
Replaces the newer revision with your local edits.
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
disabled={isSaving || disabled}
|
||||
onClick={() => setConfirmDiscardOpen(true)}
|
||||
>
|
||||
Discard
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={isSaving || disabled}
|
||||
onClick={onSave}
|
||||
>
|
||||
{isSaving ? <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" /> : null}
|
||||
Save changes
|
||||
<kbd className="ml-2 hidden rounded bg-foreground/10 px-1 text-[10px] font-medium sm:inline">
|
||||
⌘S
|
||||
</kbd>
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog open={confirmDiscardOpen} onOpenChange={setConfirmDiscardOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Discard changes?</DialogTitle>
|
||||
<DialogDescription>
|
||||
This will revert {dirtyCount} unsaved{" "}
|
||||
{dirtyCount === 1 ? "change" : "changes"} in this section.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="ghost" size="sm" onClick={() => setConfirmDiscardOpen(false)}>
|
||||
Keep editing
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
onDiscard();
|
||||
setConfirmDiscardOpen(false);
|
||||
}}
|
||||
>
|
||||
Discard changes
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/** Read-only strip for non-owners on editable sections (§1.6). */
|
||||
export function RoutineReadOnlyStrip() {
|
||||
return (
|
||||
<div className="-mx-8 mt-6 border-t border-border bg-muted/20 px-8 py-3 text-xs text-muted-foreground">
|
||||
Read-only — you don't own this routine.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import { act, type AnchorHTMLAttributes, type ReactNode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
|
||||
vi.mock("@/lib/router", () => ({
|
||||
Link: ({
|
||||
to,
|
||||
children,
|
||||
...props
|
||||
}: AnchorHTMLAttributes<HTMLAnchorElement> & { to: string; children: ReactNode; replace?: boolean }) => {
|
||||
const { replace: _replace, ...rest } = props as Record<string, unknown>;
|
||||
return (
|
||||
<a href={to} {...(rest as AnchorHTMLAttributes<HTMLAnchorElement>)}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
},
|
||||
}));
|
||||
|
||||
import { RoutineSubSidebar } from "./RoutineSubSidebar";
|
||||
import type { RoutineSectionKey } from "./routine-sections/context";
|
||||
|
||||
let container: HTMLDivElement;
|
||||
let root: ReturnType<typeof createRoot>;
|
||||
|
||||
beforeEach(() => {
|
||||
container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
root = createRoot(container);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
act(() => root.unmount());
|
||||
container.remove();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
function renderSidebar(overrides?: {
|
||||
activeSection?: RoutineSectionKey;
|
||||
dirty?: RoutineSectionKey[];
|
||||
hasLiveRun?: boolean;
|
||||
onNavigate?: (section: RoutineSectionKey) => void;
|
||||
}) {
|
||||
const dirty = new Set(overrides?.dirty ?? []);
|
||||
const onNavigate = overrides?.onNavigate ?? vi.fn();
|
||||
act(() => {
|
||||
root.render(
|
||||
<RoutineSubSidebar
|
||||
activeSection={overrides?.activeSection ?? "overview"}
|
||||
hrefFor={(section) => `/routines/r1/${section}`}
|
||||
isSectionDirty={(section) => dirty.has(section)}
|
||||
hasLiveRun={overrides?.hasLiveRun ?? false}
|
||||
onNavigate={onNavigate}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
return { onNavigate };
|
||||
}
|
||||
|
||||
describe("RoutineSubSidebar", () => {
|
||||
it("renders all eight sections grouped under ROUTINE and OPERATE", () => {
|
||||
renderSidebar();
|
||||
const links = Array.from(container.querySelectorAll("a"));
|
||||
const labels = links.map((link) => link.textContent?.trim());
|
||||
expect(labels).toEqual([
|
||||
"Overview",
|
||||
"Triggers",
|
||||
"Variables",
|
||||
"Secrets",
|
||||
"Delivery",
|
||||
"Runs",
|
||||
"Activity",
|
||||
"History",
|
||||
]);
|
||||
const groupLabels = Array.from(container.querySelectorAll("p")).map((p) => p.textContent);
|
||||
expect(groupLabels).toContain("Routine");
|
||||
expect(groupLabels).toContain("Operate");
|
||||
});
|
||||
|
||||
it("marks the active section with aria-current=page", () => {
|
||||
renderSidebar({ activeSection: "secrets" });
|
||||
const active = container.querySelector('a[aria-current="page"]');
|
||||
expect(active?.textContent?.trim()).toBe("Secrets");
|
||||
});
|
||||
|
||||
it("links each section to its section URL", () => {
|
||||
renderSidebar();
|
||||
const variables = Array.from(container.querySelectorAll("a")).find(
|
||||
(link) => link.textContent?.trim() === "Variables",
|
||||
);
|
||||
expect(variables?.getAttribute("href")).toBe("/routines/r1/variables");
|
||||
});
|
||||
|
||||
it("shows a dirty marker only on dirty editable sections", () => {
|
||||
renderSidebar({ dirty: ["overview", "delivery"] });
|
||||
const dirtyMarkers = container.querySelectorAll('[aria-label="Unsaved changes"]');
|
||||
expect(dirtyMarkers.length).toBe(2);
|
||||
});
|
||||
|
||||
it("fires onNavigate when a section is clicked", () => {
|
||||
const { onNavigate } = renderSidebar();
|
||||
const triggers = Array.from(container.querySelectorAll("a")).find(
|
||||
(link) => link.textContent?.trim() === "Triggers",
|
||||
) as HTMLAnchorElement;
|
||||
act(() => {
|
||||
triggers.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
});
|
||||
expect(onNavigate).toHaveBeenCalledWith("triggers");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,214 @@
|
||||
import { useRef } from "react";
|
||||
import {
|
||||
Activity as ActivityIcon,
|
||||
Circle,
|
||||
Clock3,
|
||||
History as HistoryIcon,
|
||||
KeyRound,
|
||||
LayoutGrid,
|
||||
Play,
|
||||
Send,
|
||||
SlidersHorizontal,
|
||||
} from "lucide-react";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import { Link } from "@/lib/router";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
ROUTINE_SECTION_KEYS,
|
||||
type RoutineSectionKey,
|
||||
} from "./routine-sections/context";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
type NavItem = {
|
||||
key: RoutineSectionKey;
|
||||
label: string;
|
||||
icon: LucideIcon;
|
||||
};
|
||||
|
||||
type NavGroup = {
|
||||
label: string;
|
||||
items: NavItem[];
|
||||
};
|
||||
|
||||
const NAV_GROUPS: NavGroup[] = [
|
||||
{
|
||||
label: "Routine",
|
||||
items: [
|
||||
{ key: "overview", label: "Overview", icon: Circle },
|
||||
{ key: "triggers", label: "Triggers", icon: Clock3 },
|
||||
{ key: "variables", label: "Variables", icon: LayoutGrid },
|
||||
{ key: "secrets", label: "Secrets", icon: KeyRound },
|
||||
{ key: "delivery", label: "Delivery", icon: Send },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Operate",
|
||||
items: [
|
||||
{ key: "runs", label: "Runs", icon: Play },
|
||||
{ key: "activity", label: "Activity", icon: ActivityIcon },
|
||||
{ key: "history", label: "History", icon: HistoryIcon },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const ALL_ITEMS: NavItem[] = NAV_GROUPS.flatMap((group) => group.items);
|
||||
|
||||
export function RoutineSubSidebar({
|
||||
activeSection,
|
||||
hrefFor,
|
||||
isSectionDirty,
|
||||
hasLiveRun,
|
||||
onNavigate,
|
||||
}: {
|
||||
activeSection: RoutineSectionKey;
|
||||
hrefFor: (section: RoutineSectionKey) => string;
|
||||
isSectionDirty: (section: RoutineSectionKey) => boolean;
|
||||
hasLiveRun: boolean;
|
||||
onNavigate: (section: RoutineSectionKey) => void;
|
||||
}) {
|
||||
const itemRefs = useRef<Array<HTMLAnchorElement | null>>([]);
|
||||
|
||||
const focusItem = (index: number) => {
|
||||
const clamped = (index + ALL_ITEMS.length) % ALL_ITEMS.length;
|
||||
itemRefs.current[clamped]?.focus();
|
||||
onNavigate(ALL_ITEMS[clamped].key);
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent, index: number) => {
|
||||
switch (event.key) {
|
||||
case "ArrowDown":
|
||||
event.preventDefault();
|
||||
focusItem(index + 1);
|
||||
break;
|
||||
case "ArrowUp":
|
||||
event.preventDefault();
|
||||
focusItem(index - 1);
|
||||
break;
|
||||
case "Home":
|
||||
event.preventDefault();
|
||||
focusItem(0);
|
||||
break;
|
||||
case "End":
|
||||
event.preventDefault();
|
||||
focusItem(ALL_ITEMS.length - 1);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
let flatIndex = -1;
|
||||
|
||||
return (
|
||||
<nav
|
||||
aria-label="Routine sections"
|
||||
className="sticky top-14 hidden max-h-[calc(100dvh-3.5rem)] w-52 shrink-0 flex-col gap-4 self-start overflow-y-auto border-r border-border bg-sidebar/30 px-3 py-4 md:flex"
|
||||
>
|
||||
{NAV_GROUPS.map((group) => (
|
||||
<div key={group.label} className="flex flex-col gap-0.5">
|
||||
<p className="px-3 py-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground/80">
|
||||
{group.label}
|
||||
</p>
|
||||
{group.items.map((item) => {
|
||||
flatIndex += 1;
|
||||
const index = flatIndex;
|
||||
const isActive = item.key === activeSection;
|
||||
const Icon = item.icon;
|
||||
const dirty = isSectionDirty(item.key);
|
||||
const showLiveDot = item.key === "runs" && hasLiveRun;
|
||||
return (
|
||||
<Link
|
||||
key={item.key}
|
||||
ref={(node) => {
|
||||
itemRefs.current[index] = node;
|
||||
}}
|
||||
to={hrefFor(item.key)}
|
||||
replace
|
||||
role="tab"
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
tabIndex={isActive ? 0 : -1}
|
||||
onKeyDown={(event) => handleKeyDown(event, index)}
|
||||
onClick={() => onNavigate(item.key)}
|
||||
className={cn(
|
||||
"flex h-9 items-center gap-2 rounded-md px-3 text-sm transition-colors motion-safe:duration-150",
|
||||
isActive
|
||||
? "bg-accent text-accent-foreground"
|
||||
: "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
<Icon className="h-3.5 w-3.5 shrink-0" />
|
||||
<span className="truncate">{item.label}</span>
|
||||
{showLiveDot ? (
|
||||
<span className="ml-auto h-1.5 w-1.5 shrink-0 rounded-full bg-blue-500 motion-safe:animate-pulse" />
|
||||
) : dirty ? (
|
||||
<span
|
||||
aria-label="Unsaved changes"
|
||||
className="ml-auto h-1.5 w-1.5 shrink-0 rounded-full bg-amber-500 ring-2 ring-background"
|
||||
/>
|
||||
) : null}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
/** Mobile section picker — collapses the sub-sidebar into a grouped `<Select>`. */
|
||||
export function RoutineSectionPicker({
|
||||
activeSection,
|
||||
onNavigate,
|
||||
isSectionDirty,
|
||||
}: {
|
||||
activeSection: RoutineSectionKey;
|
||||
onNavigate: (section: RoutineSectionKey) => void;
|
||||
isSectionDirty: (section: RoutineSectionKey) => boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className="sticky top-14 z-10 border-b border-border bg-background px-4 py-2 md:hidden">
|
||||
<Select
|
||||
value={activeSection}
|
||||
onValueChange={(value) => {
|
||||
if (ROUTINE_SECTION_KEYS.includes(value as RoutineSectionKey)) {
|
||||
onNavigate(value as RoutineSectionKey);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-11 w-full" aria-label="Routine section">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{NAV_GROUPS.map((group) => (
|
||||
<SelectGroup key={group.label}>
|
||||
<SelectLabel className="uppercase tracking-[0.12em] text-[11px]">
|
||||
{group.label}
|
||||
</SelectLabel>
|
||||
{group.items.map((item) => (
|
||||
<SelectItem key={item.key} value={item.key} className="h-11">
|
||||
<span className="flex items-center gap-2">
|
||||
<item.icon className="h-3.5 w-3.5" />
|
||||
{item.label}
|
||||
{isSectionDirty(item.key) ? (
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-amber-500" />
|
||||
) : null}
|
||||
</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { ALL_ITEMS as ROUTINE_NAV_ITEMS };
|
||||
@@ -0,0 +1,194 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Clock3, RefreshCw, Save, Trash2, Webhook, Zap } from "lucide-react";
|
||||
import type { RoutineTrigger } from "@paperclipai/shared";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { ScheduleEditor } from "./ScheduleEditor";
|
||||
import { buildRoutineTriggerPatch } from "../lib/routine-trigger-patch";
|
||||
import { describeCron } from "../lib/cron-readable";
|
||||
|
||||
const signingModes = ["bearer", "hmac_sha256", "github_hmac", "none"];
|
||||
const SIGNING_MODES_WITHOUT_REPLAY_WINDOW = new Set(["github_hmac", "none"]);
|
||||
|
||||
function getLocalTimezone(): string {
|
||||
try {
|
||||
return Intl.DateTimeFormat().resolvedOptions().timeZone;
|
||||
} catch {
|
||||
return "UTC";
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Single trigger card with its own field-edit + save state (§3.2). Extracted
|
||||
* from the previous inline `TriggerEditor` in `RoutineDetail.tsx` — same logic.
|
||||
*/
|
||||
export function RoutineTriggerCard({
|
||||
trigger,
|
||||
onSave,
|
||||
onRotate,
|
||||
onDelete,
|
||||
disabled,
|
||||
}: {
|
||||
trigger: RoutineTrigger;
|
||||
onSave: (id: string, patch: Record<string, unknown>) => void;
|
||||
onRotate: (id: string) => void;
|
||||
onDelete: (id: string) => void;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
const [draft, setDraft] = useState({
|
||||
label: trigger.label ?? "",
|
||||
cronExpression: trigger.cronExpression ?? "",
|
||||
signingMode: trigger.signingMode ?? "bearer",
|
||||
replayWindowSec: String(trigger.replayWindowSec ?? 300),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setDraft({
|
||||
label: trigger.label ?? "",
|
||||
cronExpression: trigger.cronExpression ?? "",
|
||||
signingMode: trigger.signingMode ?? "bearer",
|
||||
replayWindowSec: String(trigger.replayWindowSec ?? 300),
|
||||
});
|
||||
}, [trigger]);
|
||||
|
||||
const KindIcon =
|
||||
trigger.kind === "schedule" ? Clock3 : trigger.kind === "webhook" ? Webhook : Zap;
|
||||
const humanCron = trigger.kind === "schedule" ? describeCron(draft.cronExpression) : null;
|
||||
const lastResultOk =
|
||||
trigger.lastResult != null &&
|
||||
/succeed|success|ok|200|delivered/i.test(String(trigger.lastResult));
|
||||
|
||||
return (
|
||||
<form
|
||||
aria-label={`Trigger: ${trigger.label ?? trigger.kind}`}
|
||||
className="space-y-4 rounded-lg border border-border p-4"
|
||||
onSubmit={(event) => event.preventDefault()}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0 space-y-1">
|
||||
<div className="flex items-center gap-2 text-sm font-medium">
|
||||
<KindIcon className="h-3.5 w-3.5 shrink-0" />
|
||||
<span className="truncate">{trigger.label ?? trigger.kind}</span>
|
||||
</div>
|
||||
{humanCron ? (
|
||||
<p id={`cron-readable-${trigger.id}`} className="text-xs text-muted-foreground">
|
||||
{humanCron}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
{trigger.lastResult ? (
|
||||
<Badge variant={lastResultOk ? "secondary" : "destructive"}>
|
||||
{String(trigger.lastResult)}
|
||||
</Badge>
|
||||
) : null}
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{trigger.kind === "schedule" && trigger.nextRunAt
|
||||
? `Next: ${new Date(trigger.nextRunAt).toLocaleString()}`
|
||||
: trigger.kind === "webhook"
|
||||
? "Webhook"
|
||||
: "API"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Label</Label>
|
||||
<Input
|
||||
value={draft.label}
|
||||
disabled={disabled}
|
||||
onChange={(event) => setDraft((current) => ({ ...current, label: event.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
{trigger.kind === "schedule" && (
|
||||
<div className="space-y-1.5 md:col-span-2">
|
||||
<Label className="text-xs">Schedule</Label>
|
||||
<ScheduleEditor
|
||||
value={draft.cronExpression}
|
||||
onChange={(cronExpression) =>
|
||||
setDraft((current) => ({ ...current, cronExpression }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{trigger.kind === "webhook" && (
|
||||
<>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Signing mode</Label>
|
||||
<Select
|
||||
value={draft.signingMode}
|
||||
onValueChange={(signingMode) =>
|
||||
setDraft((current) => ({ ...current, signingMode }))
|
||||
}
|
||||
disabled={disabled}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{signingModes.map((mode) => (
|
||||
<SelectItem key={mode} value={mode}>
|
||||
{mode}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{!SIGNING_MODES_WITHOUT_REPLAY_WINDOW.has(draft.signingMode) && (
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Replay window (seconds)</Label>
|
||||
<Input
|
||||
value={draft.replayWindowSec}
|
||||
disabled={disabled}
|
||||
onChange={(event) =>
|
||||
setDraft((current) => ({ ...current, replayWindowSec: event.target.value }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!disabled && (
|
||||
<div className="flex flex-wrap items-center justify-end gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="mr-auto text-muted-foreground hover:text-destructive"
|
||||
onClick={() => onDelete(trigger.id)}
|
||||
>
|
||||
<Trash2 className="mr-1.5 h-3.5 w-3.5" />
|
||||
Delete
|
||||
</Button>
|
||||
{trigger.kind === "webhook" && (
|
||||
<Button variant="outline" size="sm" onClick={() => onRotate(trigger.id)}>
|
||||
<RefreshCw className="mr-1.5 h-3.5 w-3.5" />
|
||||
Rotate secret
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
onSave(trigger.id, buildRoutineTriggerPatch(trigger, draft, getLocalTimezone()))
|
||||
}
|
||||
>
|
||||
<Save className="mr-1.5 h-3.5 w-3.5" />
|
||||
Save trigger
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
import { createContext, useContext } from "react";
|
||||
import type { UseMutationResult } from "@tanstack/react-query";
|
||||
import type {
|
||||
CompanySecret,
|
||||
RoutineDetail as RoutineDetailType,
|
||||
RoutineEnvConfig,
|
||||
RoutineVariable,
|
||||
} from "@paperclipai/shared";
|
||||
import type { MarkdownEditorRef, MentionOption } from "../MarkdownEditor";
|
||||
import type { InlineEntityOption } from "../InlineEntitySelector";
|
||||
import type { RoutineHistoryDirtyFieldDescriptor } from "../RoutineHistoryTab";
|
||||
import type { RoutineRunDialogSubmitData } from "../RoutineRunVariablesDialog";
|
||||
import type {
|
||||
RoutineTriggerResponse,
|
||||
RotateRoutineTriggerResponse,
|
||||
} from "../../api/routines";
|
||||
import type { agentsApi } from "../../api/agents";
|
||||
import type { projectsApi } from "../../api/projects";
|
||||
import type { secretsApi } from "../../api/secrets";
|
||||
|
||||
export const ROUTINE_SECTION_KEYS = [
|
||||
"overview",
|
||||
"triggers",
|
||||
"variables",
|
||||
"secrets",
|
||||
"delivery",
|
||||
"runs",
|
||||
"activity",
|
||||
"history",
|
||||
] as const;
|
||||
|
||||
export type RoutineSectionKey = (typeof ROUTINE_SECTION_KEYS)[number];
|
||||
|
||||
/** Editable sections own a save bar; read-only (operate) sections do not. */
|
||||
export const EDITABLE_SECTIONS: RoutineSectionKey[] = [
|
||||
"overview",
|
||||
"triggers",
|
||||
"variables",
|
||||
"secrets",
|
||||
"delivery",
|
||||
];
|
||||
|
||||
/** Which dirty-field keys belong to which section (for scoped save state). */
|
||||
export const SECTION_FIELD_KEYS: Record<string, string[]> = {
|
||||
overview: ["title", "description", "projectId", "assigneeAgentId", "priority"],
|
||||
variables: ["variables"],
|
||||
secrets: ["env"],
|
||||
delivery: ["concurrencyPolicy", "catchUpPolicy"],
|
||||
};
|
||||
|
||||
export type RoutineEditDraft = {
|
||||
title: string;
|
||||
description: string;
|
||||
projectId: string;
|
||||
assigneeAgentId: string;
|
||||
priority: string;
|
||||
concurrencyPolicy: string;
|
||||
catchUpPolicy: string;
|
||||
variables: RoutineVariable[];
|
||||
env: RoutineEnvConfig | null;
|
||||
};
|
||||
|
||||
export type NewTriggerDraft = {
|
||||
kind: string;
|
||||
cronExpression: string;
|
||||
signingMode: string;
|
||||
replayWindowSec: string;
|
||||
};
|
||||
|
||||
export type SecretMessage = {
|
||||
title: string;
|
||||
entries: Array<{ webhookUrl: string; webhookSecret: string }>;
|
||||
};
|
||||
|
||||
type AgentList = Awaited<ReturnType<typeof agentsApi.list>>;
|
||||
type ProjectList = Awaited<ReturnType<typeof projectsApi.list>>;
|
||||
type SecretList = Awaited<ReturnType<typeof secretsApi.list>>;
|
||||
type RoutineRunList = Awaited<ReturnType<typeof import("../../api/routines").routinesApi.listRuns>>;
|
||||
type RoutineActivityList = Awaited<
|
||||
ReturnType<typeof import("../../api/routines").routinesApi.activity>
|
||||
>;
|
||||
|
||||
export type RoutineDetailContextValue = {
|
||||
routine: RoutineDetailType;
|
||||
routineId: string;
|
||||
companyId: string;
|
||||
|
||||
// edit state
|
||||
editDraft: RoutineEditDraft;
|
||||
setEditDraft: React.Dispatch<React.SetStateAction<RoutineEditDraft>>;
|
||||
routineDefaults: RoutineEditDraft;
|
||||
dirtyFields: RoutineHistoryDirtyFieldDescriptor[];
|
||||
isEditDirty: boolean;
|
||||
sectionDirtyFields: (section: RoutineSectionKey) => RoutineHistoryDirtyFieldDescriptor[];
|
||||
isSectionDirty: (section: RoutineSectionKey) => boolean;
|
||||
discardSection: (section: RoutineSectionKey) => void;
|
||||
|
||||
// save
|
||||
saveRoutine: UseMutationResult<unknown, unknown, void, unknown>;
|
||||
saveConflict: boolean;
|
||||
reloadLatest: () => void;
|
||||
|
||||
// header / automation
|
||||
automationEnabled: boolean;
|
||||
automationLabel: string;
|
||||
automationLabelClassName: string;
|
||||
automationToggleDisabled: boolean;
|
||||
onToggleAutomation: () => void;
|
||||
onOpenRunDialog: () => void;
|
||||
runRoutinePending: boolean;
|
||||
|
||||
// triggers
|
||||
newTrigger: NewTriggerDraft;
|
||||
setNewTrigger: React.Dispatch<React.SetStateAction<NewTriggerDraft>>;
|
||||
createTrigger: UseMutationResult<RoutineTriggerResponse, unknown, void, unknown>;
|
||||
updateTrigger: UseMutationResult<unknown, unknown, { id: string; patch: Record<string, unknown> }, unknown>;
|
||||
deleteTrigger: UseMutationResult<unknown, unknown, string, unknown>;
|
||||
rotateTrigger: UseMutationResult<RotateRoutineTriggerResponse, unknown, string, unknown>;
|
||||
|
||||
// secrets
|
||||
secretMessage: SecretMessage | null;
|
||||
setSecretMessage: (message: SecretMessage | null) => void;
|
||||
copySecretValue: (label: string, value: string) => void;
|
||||
availableSecrets: SecretList;
|
||||
createSecret: UseMutationResult<CompanySecret, unknown, { name: string; value: string }, unknown>;
|
||||
|
||||
// entities
|
||||
agents: AgentList;
|
||||
projects: ProjectList;
|
||||
agentById: Map<string, AgentList[number]>;
|
||||
projectById: Map<string, ProjectList[number]>;
|
||||
assigneeOptions: InlineEntityOption[];
|
||||
projectOptions: InlineEntityOption[];
|
||||
recentAssigneeIds: string[];
|
||||
recentProjectIds: string[];
|
||||
mentionOptions: MentionOption[];
|
||||
currentAssignee: AgentList[number] | null;
|
||||
currentProject: ProjectList[number] | null;
|
||||
|
||||
// operate data
|
||||
routineRuns: RoutineRunList | undefined;
|
||||
activity: RoutineActivityList | undefined;
|
||||
hasLiveRun: boolean;
|
||||
activeIssueId: string | undefined;
|
||||
|
||||
// refs
|
||||
titleInputRef: React.RefObject<HTMLTextAreaElement | null>;
|
||||
descriptionEditorRef: React.RefObject<MarkdownEditorRef | null>;
|
||||
assigneeSelectorRef: React.RefObject<HTMLButtonElement | null>;
|
||||
projectSelectorRef: React.RefObject<HTMLButtonElement | null>;
|
||||
|
||||
// history restore plumbing
|
||||
onHistoryRestoreSecretMaterials: (
|
||||
response: import("../../api/routines").RestoreRoutineRevisionResponse,
|
||||
) => void;
|
||||
onHistoryRestored: (
|
||||
response: import("../../api/routines").RestoreRoutineRevisionResponse,
|
||||
) => void;
|
||||
|
||||
navigateToSection: (section: RoutineSectionKey, options?: { replace?: boolean }) => void;
|
||||
};
|
||||
|
||||
export const RoutineDetailContext = createContext<RoutineDetailContextValue | null>(null);
|
||||
|
||||
export function useRoutineDetail(): RoutineDetailContextValue {
|
||||
const value = useContext(RoutineDetailContext);
|
||||
if (!value) {
|
||||
throw new Error("useRoutineDetail must be used within a RoutineDetailContext provider");
|
||||
}
|
||||
return value;
|
||||
}
|
||||
@@ -0,0 +1,564 @@
|
||||
import { useMemo } from "react";
|
||||
import {
|
||||
ArrowRight,
|
||||
Braces,
|
||||
Clock3,
|
||||
Edit3,
|
||||
KeyRound,
|
||||
Play,
|
||||
} from "lucide-react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { RadioCardGroup } from "@/components/ui/radio-card";
|
||||
import { timeAgo } from "../../lib/timeAgo";
|
||||
import { EmptyState } from "../EmptyState";
|
||||
import { InlineEntitySelector } from "../InlineEntitySelector";
|
||||
import { AgentIcon } from "../AgentIconPicker";
|
||||
import { MarkdownEditor } from "../MarkdownEditor";
|
||||
import { ScheduleEditor } from "../ScheduleEditor";
|
||||
import { RoutineVariablesEditor, RoutineVariablesHint } from "../RoutineVariablesEditor";
|
||||
import { RoutineTriggerCard } from "../RoutineTriggerCard";
|
||||
import { EnvVarEditor } from "../EnvVarEditor";
|
||||
import { useRoutineDetail } from "./context";
|
||||
import type { EnvBinding } from "@paperclipai/shared";
|
||||
|
||||
const concurrencyPolicyOptions = [
|
||||
{
|
||||
value: "coalesce_if_active",
|
||||
title: "Coalesce if active",
|
||||
description: "Keep one follow-up run queued while an active run is still working.",
|
||||
},
|
||||
{
|
||||
value: "always_enqueue",
|
||||
title: "Always enqueue",
|
||||
description: "Queue every trigger occurrence, even if several runs stack up.",
|
||||
},
|
||||
{
|
||||
value: "skip_if_active",
|
||||
title: "Skip if active",
|
||||
description: "Drop overlapping trigger occurrences while the routine is already active.",
|
||||
},
|
||||
];
|
||||
|
||||
const catchUpPolicyOptions = [
|
||||
{
|
||||
value: "skip_missed",
|
||||
title: "Skip missed",
|
||||
description: "Ignore schedule windows that were missed while paused.",
|
||||
},
|
||||
{
|
||||
value: "enqueue_missed_with_cap",
|
||||
title: "Enqueue missed with cap",
|
||||
description: "Catch up missed schedule windows in capped batches after recovery.",
|
||||
},
|
||||
];
|
||||
|
||||
const triggerKinds = ["schedule", "webhook"];
|
||||
const signingModes = ["bearer", "hmac_sha256", "github_hmac", "none"];
|
||||
const signingModeDescriptions: Record<string, string> = {
|
||||
bearer: "Expect a shared bearer token in the Authorization header.",
|
||||
hmac_sha256: "Expect an HMAC SHA-256 signature over the request using the shared secret.",
|
||||
github_hmac: "Accept GitHub-style X-Hub-Signature-256 header (HMAC over raw body, no timestamp).",
|
||||
none: "No authentication — the webhook URL itself acts as a shared secret.",
|
||||
};
|
||||
const SIGNING_MODES_WITHOUT_REPLAY_WINDOW = new Set(["github_hmac", "none"]);
|
||||
|
||||
export function OverviewSection() {
|
||||
const ctx = useRoutineDetail();
|
||||
const {
|
||||
routine,
|
||||
editDraft,
|
||||
setEditDraft,
|
||||
assigneeOptions,
|
||||
projectOptions,
|
||||
recentAssigneeIds,
|
||||
recentProjectIds,
|
||||
agentById,
|
||||
projectById,
|
||||
currentAssignee,
|
||||
currentProject,
|
||||
mentionOptions,
|
||||
assigneeSelectorRef,
|
||||
projectSelectorRef,
|
||||
descriptionEditorRef,
|
||||
routineRuns,
|
||||
activity,
|
||||
saveRoutine,
|
||||
navigateToSection,
|
||||
} = ctx;
|
||||
|
||||
const activeTriggers = routine.triggers.length;
|
||||
const nextFire = useMemo(() => {
|
||||
const upcoming = routine.triggers
|
||||
.filter((trigger) => trigger.kind === "schedule" && trigger.nextRunAt)
|
||||
.map((trigger) => new Date(trigger.nextRunAt as Date))
|
||||
.sort((a, b) => a.getTime() - b.getTime())[0];
|
||||
return upcoming ? upcoming.toLocaleString() : null;
|
||||
}, [routine.triggers]);
|
||||
const boundSecrets = editDraft.env ? Object.keys(editDraft.env).length : 0;
|
||||
const lastRun = (routineRuns ?? [])[0] ?? null;
|
||||
const recentActivity = (activity ?? []).slice(0, 5);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Assignment row */}
|
||||
<div className="overflow-x-auto overscroll-x-contain">
|
||||
<div className="inline-flex min-w-full flex-wrap items-center gap-2 text-sm text-muted-foreground sm:min-w-max sm:flex-nowrap">
|
||||
<span>For</span>
|
||||
<InlineEntitySelector
|
||||
ref={assigneeSelectorRef}
|
||||
value={editDraft.assigneeAgentId}
|
||||
options={assigneeOptions}
|
||||
recentOptionIds={recentAssigneeIds}
|
||||
placeholder="Assignee"
|
||||
noneLabel="No assignee"
|
||||
searchPlaceholder="Search assignees..."
|
||||
emptyMessage="No assignees found."
|
||||
onChange={(assigneeAgentId) =>
|
||||
setEditDraft((current) => ({ ...current, assigneeAgentId }))
|
||||
}
|
||||
onConfirm={() => {
|
||||
if (editDraft.projectId) {
|
||||
descriptionEditorRef.current?.focus();
|
||||
} else {
|
||||
projectSelectorRef.current?.focus();
|
||||
}
|
||||
}}
|
||||
renderTriggerValue={(option) =>
|
||||
option ? (
|
||||
currentAssignee ? (
|
||||
<>
|
||||
<AgentIcon icon={currentAssignee.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
<span className="truncate">{option.label}</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="truncate">{option.label}</span>
|
||||
)
|
||||
) : (
|
||||
<span className="text-muted-foreground">Assignee</span>
|
||||
)
|
||||
}
|
||||
renderOption={(option) => {
|
||||
if (!option.id) return <span className="truncate">{option.label}</span>;
|
||||
const assignee = agentById.get(option.id);
|
||||
return (
|
||||
<>
|
||||
{assignee ? (
|
||||
<AgentIcon icon={assignee.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
) : null}
|
||||
<span className="truncate">{option.label}</span>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<span>in</span>
|
||||
<InlineEntitySelector
|
||||
ref={projectSelectorRef}
|
||||
value={editDraft.projectId}
|
||||
options={projectOptions}
|
||||
recentOptionIds={recentProjectIds}
|
||||
placeholder="Project"
|
||||
noneLabel="No project"
|
||||
searchPlaceholder="Search projects..."
|
||||
emptyMessage="No projects found."
|
||||
onChange={(projectId) => setEditDraft((current) => ({ ...current, projectId }))}
|
||||
onConfirm={() => descriptionEditorRef.current?.focus()}
|
||||
renderTriggerValue={(option) =>
|
||||
option && currentProject ? (
|
||||
<>
|
||||
<span
|
||||
className="h-3.5 w-3.5 shrink-0 rounded-sm"
|
||||
style={{ backgroundColor: currentProject.color ?? "#64748b" }}
|
||||
/>
|
||||
<span className="truncate">{option.label}</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="text-muted-foreground">Project</span>
|
||||
)
|
||||
}
|
||||
renderOption={(option) => {
|
||||
if (!option.id) return <span className="truncate">{option.label}</span>;
|
||||
const project = projectById.get(option.id);
|
||||
return (
|
||||
<>
|
||||
<span
|
||||
className="h-3.5 w-3.5 shrink-0 rounded-sm"
|
||||
style={{ backgroundColor: project?.color ?? "#64748b" }}
|
||||
/>
|
||||
<span className="truncate">{option.label}</span>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!routine.assigneeAgentId ? (
|
||||
<div className="rounded-lg border border-amber-500/30 bg-amber-500/5 p-4 text-sm text-amber-900 dark:text-amber-200">
|
||||
Default agent required. This routine can stay as a draft and still run manually, but
|
||||
automation stays paused until you assign a default agent.
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Instructions */}
|
||||
<MarkdownEditor
|
||||
ref={descriptionEditorRef}
|
||||
value={editDraft.description}
|
||||
onChange={(description) => setEditDraft((current) => ({ ...current, description }))}
|
||||
placeholder="Add instructions..."
|
||||
bordered={false}
|
||||
contentClassName="min-h-[120px] text-[15px] leading-7"
|
||||
mentions={mentionOptions}
|
||||
onSubmit={() => {
|
||||
if (!saveRoutine.isPending && editDraft.title.trim()) {
|
||||
saveRoutine.mutate();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Variables peek */}
|
||||
<div className="space-y-3">
|
||||
<RoutineVariablesHint />
|
||||
<RoutineVariablesEditor
|
||||
title={editDraft.title}
|
||||
description={editDraft.description}
|
||||
value={editDraft.variables}
|
||||
onChange={(variables) => setEditDraft((current) => ({ ...current, variables }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Summary cards */}
|
||||
<div className="grid gap-3 sm:grid-cols-3">
|
||||
<SummaryCard
|
||||
icon={Clock3}
|
||||
label="Triggers"
|
||||
value={activeTriggers === 0 ? "None" : `${activeTriggers} active`}
|
||||
hint={nextFire ? `Next fire ${nextFire}` : "No schedule"}
|
||||
to={() => navigateToSection("triggers")}
|
||||
ariaLabel={`${activeTriggers} triggers. Open triggers.`}
|
||||
/>
|
||||
<SummaryCard
|
||||
icon={KeyRound}
|
||||
label="Secrets"
|
||||
value={boundSecrets === 0 ? "None" : `${boundSecrets} bound`}
|
||||
hint="Manage bound secrets"
|
||||
to={() => navigateToSection("secrets")}
|
||||
ariaLabel={`${boundSecrets} secrets bound. Open secrets.`}
|
||||
/>
|
||||
<SummaryCard
|
||||
icon={Play}
|
||||
label="Last run"
|
||||
value={lastRun ? lastRun.status.replaceAll("_", " ") : "No runs"}
|
||||
hint={lastRun ? timeAgo(lastRun.triggeredAt) : "Trigger a run"}
|
||||
to={() => navigateToSection("runs")}
|
||||
ariaLabel={lastRun ? `Last run ${lastRun.status}. Open runs.` : "No runs. Open runs."}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Recent activity */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Recent activity
|
||||
</p>
|
||||
{recentActivity.length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground">No activity yet.</p>
|
||||
) : (
|
||||
<div className="divide-y divide-border/60">
|
||||
{recentActivity.map((event) => (
|
||||
<div key={event.id} className="flex items-center gap-2 py-1.5 text-xs">
|
||||
<Badge variant="outline" className="shrink-0 font-mono">
|
||||
{event.action}
|
||||
</Badge>
|
||||
<span className="min-w-0 flex-1 truncate text-muted-foreground">
|
||||
{event.details && Object.keys(event.details).length > 0
|
||||
? Object.keys(event.details).slice(0, 3).join(" · ")
|
||||
: ""}
|
||||
</span>
|
||||
<span className="shrink-0 text-muted-foreground/60">{timeAgo(event.createdAt)}</span>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigateToSection("activity")}
|
||||
className="flex items-center gap-1 pt-2 text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
View all activity <ArrowRight className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SummaryCard({
|
||||
icon: Icon,
|
||||
label,
|
||||
value,
|
||||
hint,
|
||||
to,
|
||||
ariaLabel,
|
||||
}: {
|
||||
icon: typeof Clock3;
|
||||
label: string;
|
||||
value: string;
|
||||
hint: string;
|
||||
to: () => void;
|
||||
ariaLabel: string;
|
||||
}) {
|
||||
return (
|
||||
<button type="button" onClick={to} aria-label={ariaLabel} className="text-left">
|
||||
<Card className="gap-2 p-4 transition-colors hover:border-border hover:bg-accent/30">
|
||||
<CardContent className="space-y-1 p-0">
|
||||
<div className="flex items-center gap-1.5 text-xs uppercase tracking-wide text-muted-foreground">
|
||||
<Icon className="h-3.5 w-3.5" />
|
||||
{label}
|
||||
<ArrowRight className="ml-auto h-3.5 w-3.5 text-muted-foreground/60" />
|
||||
</div>
|
||||
<p className="text-lg font-semibold">{value}</p>
|
||||
<p className="text-xs text-muted-foreground">{hint}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function TriggersSection() {
|
||||
const ctx = useRoutineDetail();
|
||||
const { routine, newTrigger, setNewTrigger, createTrigger, updateTrigger, deleteTrigger, rotateTrigger } = ctx;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Add trigger form */}
|
||||
<div className="space-y-3 rounded-lg border border-border p-4">
|
||||
<p className="text-sm font-medium">Add trigger</p>
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Kind</Label>
|
||||
<Select
|
||||
value={newTrigger.kind}
|
||||
onValueChange={(kind) => setNewTrigger((current) => ({ ...current, kind }))}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{triggerKinds.map((kind) => (
|
||||
<SelectItem key={kind} value={kind} disabled={kind === "webhook"}>
|
||||
{kind}
|
||||
{kind === "webhook" ? " — COMING SOON" : ""}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{newTrigger.kind === "schedule" && (
|
||||
<div className="space-y-1.5 md:col-span-2">
|
||||
<Label className="text-xs">Schedule</Label>
|
||||
<ScheduleEditor
|
||||
value={newTrigger.cronExpression}
|
||||
onChange={(cronExpression) =>
|
||||
setNewTrigger((current) => ({ ...current, cronExpression }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{newTrigger.kind === "webhook" && (
|
||||
<>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Signing mode</Label>
|
||||
<Select
|
||||
value={newTrigger.signingMode}
|
||||
onValueChange={(signingMode) =>
|
||||
setNewTrigger((current) => ({ ...current, signingMode }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{signingModes.map((mode) => (
|
||||
<SelectItem key={mode} value={mode}>
|
||||
{mode}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{signingModeDescriptions[newTrigger.signingMode]}
|
||||
</p>
|
||||
</div>
|
||||
{!SIGNING_MODES_WITHOUT_REPLAY_WINDOW.has(newTrigger.signingMode) && (
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Replay window (seconds)</Label>
|
||||
<Input
|
||||
value={newTrigger.replayWindowSec}
|
||||
onChange={(event) =>
|
||||
setNewTrigger((current) => ({ ...current, replayWindowSec: event.target.value }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center justify-end">
|
||||
<Button size="sm" onClick={() => createTrigger.mutate()} disabled={createTrigger.isPending}>
|
||||
{createTrigger.isPending ? "Adding..." : "Add trigger"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Existing triggers */}
|
||||
{routine.triggers.length === 0 ? (
|
||||
<EmptyState icon={Clock3} message="No triggers yet." />
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{routine.triggers.map((trigger) => (
|
||||
<RoutineTriggerCard
|
||||
key={trigger.id}
|
||||
trigger={trigger}
|
||||
onSave={(id, patch) => updateTrigger.mutate({ id, patch })}
|
||||
onRotate={(id) => rotateTrigger.mutate(id)}
|
||||
onDelete={(id) => deleteTrigger.mutate(id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function VariablesSection() {
|
||||
const ctx = useRoutineDetail();
|
||||
const { editDraft, setEditDraft, navigateToSection } = ctx;
|
||||
const hasVariables = editDraft.variables.length > 0;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3 rounded-md border border-border bg-muted/20 px-4 py-3 text-xs">
|
||||
<span className="flex-1 text-muted-foreground">
|
||||
Variables are auto-detected from <code className="font-mono">{"{{placeholders}}"}</code> in
|
||||
the title & instructions. The variable name is read-only — rename by editing the
|
||||
placeholder.
|
||||
</span>
|
||||
<Button variant="secondary" size="sm" onClick={() => navigateToSection("overview")}>
|
||||
<Edit3 className="mr-1.5 h-3.5 w-3.5" />
|
||||
Edit instructions
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{hasVariables ? (
|
||||
<RoutineVariablesEditor
|
||||
title={editDraft.title}
|
||||
description={editDraft.description}
|
||||
value={editDraft.variables}
|
||||
onChange={(variables) => setEditDraft((current) => ({ ...current, variables }))}
|
||||
/>
|
||||
) : (
|
||||
<EmptyState
|
||||
icon={Braces}
|
||||
message="No variables yet. Add a {{placeholder}} in the title or instructions to create one."
|
||||
action="Edit instructions"
|
||||
onAction={() => navigateToSection("overview")}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function SecretsSection() {
|
||||
const ctx = useRoutineDetail();
|
||||
const { editDraft, setEditDraft, availableSecrets, createSecret, secretMessage, copySecretValue } = ctx;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-md border border-border bg-muted/20 px-4 py-3 text-xs text-muted-foreground">
|
||||
Routine secrets apply to every task this routine creates. They override matching keys in
|
||||
project and agent env. <span className="font-mono">PAPERCLIP_*</span> names are reserved.
|
||||
</div>
|
||||
|
||||
{secretMessage ? (
|
||||
<div className="space-y-3 rounded-lg border border-blue-500/30 bg-blue-500/5 p-4 text-sm">
|
||||
<div>
|
||||
<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-3">
|
||||
{secretMessage.entries.map((entry, index) => (
|
||||
<div key={`${entry.webhookUrl}-${index}`} className="space-y-2">
|
||||
<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)}>
|
||||
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)}>
|
||||
Secret
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<EnvVarEditor
|
||||
value={(editDraft.env ?? {}) as Record<string, EnvBinding>}
|
||||
secrets={availableSecrets}
|
||||
onCreateSecret={async (name, value) => createSecret.mutateAsync({ name, value })}
|
||||
onChange={(env) => setEditDraft((current) => ({ ...current, env: env ?? null }))}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DeliverySection() {
|
||||
const ctx = useRoutineDetail();
|
||||
const { editDraft, setEditDraft } = ctx;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
|
||||
Concurrency
|
||||
</p>
|
||||
<RadioCardGroup
|
||||
ariaLabel="Concurrency policy"
|
||||
value={editDraft.concurrencyPolicy}
|
||||
onValueChange={(concurrencyPolicy) =>
|
||||
setEditDraft((current) => ({ ...current, concurrencyPolicy }))
|
||||
}
|
||||
options={concurrencyPolicyOptions}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
|
||||
Catch-up
|
||||
</p>
|
||||
<RadioCardGroup
|
||||
ariaLabel="Catch-up policy"
|
||||
value={editDraft.catchUpPolicy}
|
||||
onValueChange={(catchUpPolicy) =>
|
||||
setEditDraft((current) => ({ ...current, catchUpPolicy }))
|
||||
}
|
||||
options={catchUpPolicyOptions}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
import { useMemo } from "react";
|
||||
import { Activity as ActivityIcon, Play } from "lucide-react";
|
||||
import { Link } from "@/lib/router";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { timeAgo } from "../../lib/timeAgo";
|
||||
import { EmptyState } from "../EmptyState";
|
||||
import { LiveRunWidget } from "../LiveRunWidget";
|
||||
import { RoutineHistoryTab } from "../RoutineHistoryTab";
|
||||
import { RoutineActivityRow } from "../RoutineActivityRow";
|
||||
import { useRoutineDetail } from "./context";
|
||||
|
||||
export function RunsSection() {
|
||||
const ctx = useRoutineDetail();
|
||||
const { routine, routineRuns, hasLiveRun, activeIssueId, onOpenRunDialog } = ctx;
|
||||
const runs = routineRuns ?? [];
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{hasLiveRun && activeIssueId ? (
|
||||
<LiveRunWidget issueId={activeIssueId} companyId={routine.companyId} />
|
||||
) : null}
|
||||
{runs.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={Play}
|
||||
message="No runs yet. Trigger a run from the header or wait for the schedule."
|
||||
action="Run now"
|
||||
onAction={onOpenRunDialog}
|
||||
/>
|
||||
) : (
|
||||
<div className="divide-y divide-border rounded-lg border border-border">
|
||||
{runs.map((run) => (
|
||||
<div key={run.id} className="flex items-center justify-between px-3 py-2 text-sm">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<Badge variant="outline" className="shrink-0">
|
||||
{run.source}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant={run.status === "failed" ? "destructive" : "secondary"}
|
||||
className="shrink-0"
|
||||
>
|
||||
{run.status.replaceAll("_", " ")}
|
||||
</Badge>
|
||||
{run.trigger ? (
|
||||
<span className="truncate text-muted-foreground">
|
||||
{run.trigger.label ?? run.trigger.kind}
|
||||
</span>
|
||||
) : null}
|
||||
{run.linkedIssue ? (
|
||||
<Link
|
||||
to={`/issues/${run.linkedIssue.identifier ?? run.linkedIssue.id}`}
|
||||
className="truncate text-muted-foreground hover:underline"
|
||||
>
|
||||
{run.linkedIssue.identifier ?? run.linkedIssue.id.slice(0, 8)}
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
<span className="ml-2 shrink-0 text-xs text-muted-foreground">
|
||||
{timeAgo(run.triggeredAt)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ActivitySection() {
|
||||
const ctx = useRoutineDetail();
|
||||
const { activity } = ctx;
|
||||
const events = activity ?? [];
|
||||
|
||||
const groups = useMemo(() => {
|
||||
const byDay = new Map<string, typeof events>();
|
||||
for (const event of events) {
|
||||
let label = "Earlier";
|
||||
try {
|
||||
label = new Date(event.createdAt).toLocaleDateString(undefined, {
|
||||
weekday: "short",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
} catch {
|
||||
/* keep fallback label */
|
||||
}
|
||||
const bucket = byDay.get(label) ?? [];
|
||||
bucket.push(event);
|
||||
byDay.set(label, bucket);
|
||||
}
|
||||
return Array.from(byDay.entries());
|
||||
}, [events]);
|
||||
|
||||
if (events.length === 0) {
|
||||
return <EmptyState icon={ActivityIcon} message="No activity yet." />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{groups.map(([day, dayEvents]) => (
|
||||
<div key={day}>
|
||||
<div className="sticky top-0 bg-background py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
{day}
|
||||
</div>
|
||||
<div>
|
||||
{dayEvents.map((event) => (
|
||||
<RoutineActivityRow key={event.id} event={event} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function HistorySection() {
|
||||
const ctx = useRoutineDetail();
|
||||
const {
|
||||
routine,
|
||||
isEditDirty,
|
||||
dirtyFields,
|
||||
routineDefaults,
|
||||
setEditDraft,
|
||||
saveRoutine,
|
||||
agentById,
|
||||
projectById,
|
||||
availableSecrets,
|
||||
onHistoryRestoreSecretMaterials,
|
||||
onHistoryRestored,
|
||||
} = ctx;
|
||||
|
||||
return (
|
||||
<RoutineHistoryTab
|
||||
routine={routine}
|
||||
isEditDirty={isEditDirty}
|
||||
dirtyFields={dirtyFields}
|
||||
onDiscardEdits={() => setEditDraft(routineDefaults)}
|
||||
onSaveEdits={() => {
|
||||
if (!saveRoutine.isPending && routine.title.trim()) {
|
||||
saveRoutine.mutate();
|
||||
}
|
||||
}}
|
||||
agents={agentById}
|
||||
projects={projectById}
|
||||
secrets={availableSecrets}
|
||||
onRestoreSecretMaterials={onHistoryRestoreSecretMaterials}
|
||||
onRestored={onHistoryRestored}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import * as React from "react";
|
||||
import { Check } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export type RadioCardOption = {
|
||||
value: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* Selectable card primitive — a labelled `<button aria-pressed>` with a
|
||||
* ring-on-selected treatment. Used by the routine Delivery section (§3.5) and
|
||||
* reusable for onboarding / adapter pickers. Render several inside a
|
||||
* `<RadioCardGroup>` for roving keyboard nav.
|
||||
*/
|
||||
export function RadioCard({
|
||||
selected,
|
||||
title,
|
||||
description,
|
||||
className,
|
||||
...props
|
||||
}: {
|
||||
selected: boolean;
|
||||
title: string;
|
||||
description?: string;
|
||||
} & Omit<React.ComponentProps<"button">, "title">) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={selected}
|
||||
data-state={selected ? "checked" : "unchecked"}
|
||||
className={cn(
|
||||
"group relative flex w-full flex-col items-start gap-1 rounded-md border px-4 py-3 text-left transition-colors",
|
||||
"motion-safe:transition-[border-color,background-color] motion-safe:duration-150",
|
||||
selected
|
||||
? "border-primary bg-primary/5 ring-1 ring-primary"
|
||||
: "border-border hover:border-border hover:bg-accent/40",
|
||||
"disabled:cursor-not-allowed disabled:opacity-60",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="flex w-full items-center justify-between gap-2">
|
||||
<span className="text-sm font-medium">{title}</span>
|
||||
{selected ? <Check className="h-4 w-4 shrink-0 text-primary" /> : null}
|
||||
</div>
|
||||
{description ? (
|
||||
<span className="text-xs text-muted-foreground">{description}</span>
|
||||
) : null}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function RadioCardGroup({
|
||||
value,
|
||||
onValueChange,
|
||||
options,
|
||||
ariaLabel,
|
||||
disabled,
|
||||
className,
|
||||
}: {
|
||||
value: string;
|
||||
onValueChange: (value: string) => void;
|
||||
options: RadioCardOption[];
|
||||
ariaLabel: string;
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
}) {
|
||||
const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
if (disabled) return;
|
||||
const idx = options.findIndex((option) => option.value === value);
|
||||
if (idx === -1) return;
|
||||
let nextIdx: number | null = null;
|
||||
if (event.key === "ArrowDown" || event.key === "ArrowRight") {
|
||||
nextIdx = (idx + 1) % options.length;
|
||||
} else if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
|
||||
nextIdx = (idx - 1 + options.length) % options.length;
|
||||
}
|
||||
if (nextIdx !== null) {
|
||||
event.preventDefault();
|
||||
onValueChange(options[nextIdx].value);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
role="radiogroup"
|
||||
aria-label={ariaLabel}
|
||||
className={cn("grid gap-2", className)}
|
||||
onKeyDown={handleKeyDown}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<RadioCard
|
||||
key={option.value}
|
||||
selected={option.value === value}
|
||||
title={option.title}
|
||||
description={option.description}
|
||||
disabled={disabled}
|
||||
tabIndex={option.value === value ? 0 : -1}
|
||||
onClick={() => onValueChange(option.value)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { describeCron } from "./cron-readable";
|
||||
|
||||
describe("describeCron", () => {
|
||||
it("describes a daily time", () => {
|
||||
expect(describeCron("0 14 * * *")).toBe("Every day at 14:00");
|
||||
});
|
||||
|
||||
it("describes every-weekday", () => {
|
||||
expect(describeCron("0 14 * * 1-5")).toBe("Every weekday at 14:00");
|
||||
});
|
||||
|
||||
it("describes a single day-of-week", () => {
|
||||
expect(describeCron("30 9 * * 1")).toBe("Every Monday at 09:30");
|
||||
});
|
||||
|
||||
it("describes every N minutes", () => {
|
||||
expect(describeCron("*/15 * * * *")).toBe("Every 15 minutes");
|
||||
});
|
||||
|
||||
it("describes hourly on a minute", () => {
|
||||
expect(describeCron("5 * * * *")).toBe("Every hour at :05");
|
||||
});
|
||||
|
||||
it("returns null for empty or unparseable input", () => {
|
||||
expect(describeCron("")).toBeNull();
|
||||
expect(describeCron(undefined)).toBeNull();
|
||||
expect(describeCron("not a cron")).toBeNull();
|
||||
expect(describeCron("1 2 3")).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,79 @@
|
||||
/**
|
||||
* Tiny best-effort cron → plain-English helper for the routine Triggers section.
|
||||
* Not a full cron parser: it covers the common shapes Paperclip schedule triggers
|
||||
* produce (every N minutes/hours, daily at HH:MM, weekday/weekend, day-of-week).
|
||||
* Falls back to the raw expression when it can't confidently describe it.
|
||||
*/
|
||||
|
||||
const DOW_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
|
||||
|
||||
function pad2(value: number): string {
|
||||
return value.toString().padStart(2, "0");
|
||||
}
|
||||
|
||||
function describeTime(minute: string, hour: string): string | null {
|
||||
const m = Number(minute);
|
||||
const h = Number(hour);
|
||||
if (!Number.isInteger(m) || !Number.isInteger(h)) return null;
|
||||
if (m < 0 || m > 59 || h < 0 || h > 23) return null;
|
||||
return `${pad2(h)}:${pad2(m)}`;
|
||||
}
|
||||
|
||||
function describeDayOfWeek(dow: string): string | null {
|
||||
if (dow === "*" || dow === "?") return "every day";
|
||||
if (dow === "1-5") return "every weekday";
|
||||
if (dow === "0,6" || dow === "6,0" || dow === "0,7") return "every weekend";
|
||||
const parts = dow.split(",").map((part) => part.trim());
|
||||
const names = parts.map((part) => {
|
||||
const n = Number(part);
|
||||
if (!Number.isInteger(n)) return null;
|
||||
return DOW_NAMES[n % 7];
|
||||
});
|
||||
if (names.some((name) => name === null)) return null;
|
||||
if (names.length === 1) return `every ${names[0]}`;
|
||||
return `every ${names.slice(0, -1).join(", ")} and ${names[names.length - 1]}`;
|
||||
}
|
||||
|
||||
export function describeCron(expression: string | null | undefined): string | null {
|
||||
if (!expression) return null;
|
||||
const trimmed = expression.trim();
|
||||
const fields = trimmed.split(/\s+/);
|
||||
// Standard 5-field cron: minute hour day-of-month month day-of-week
|
||||
if (fields.length !== 5) return null;
|
||||
const [minute, hour, dom, month, dow] = fields;
|
||||
|
||||
// Every N minutes
|
||||
const everyMinutes = minute.match(/^\*\/(\d+)$/);
|
||||
if (everyMinutes && hour === "*" && dom === "*" && month === "*" && dow === "*") {
|
||||
return `Every ${everyMinutes[1]} minutes`;
|
||||
}
|
||||
|
||||
// Every N hours, on the minute
|
||||
const everyHours = hour.match(/^\*\/(\d+)$/);
|
||||
if (everyHours && /^\d+$/.test(minute) && dom === "*" && month === "*" && dow === "*") {
|
||||
return `Every ${everyHours[1]} hours at :${pad2(Number(minute))}`;
|
||||
}
|
||||
|
||||
// Hourly
|
||||
if (/^\d+$/.test(minute) && hour === "*" && dom === "*" && month === "*" && dow === "*") {
|
||||
return `Every hour at :${pad2(Number(minute))}`;
|
||||
}
|
||||
|
||||
// Daily / weekly at a fixed time
|
||||
if (/^\d+$/.test(minute) && /^\d+$/.test(hour) && month === "*") {
|
||||
const time = describeTime(minute, hour);
|
||||
if (!time) return null;
|
||||
if (dom === "*" && (dow === "*" || dow === "?")) {
|
||||
return `Every day at ${time}`;
|
||||
}
|
||||
if (dom === "*") {
|
||||
const dowText = describeDayOfWeek(dow);
|
||||
if (dowText) return `${dowText[0].toUpperCase()}${dowText.slice(1)} at ${time}`;
|
||||
}
|
||||
if (/^\d+$/.test(dom) && (dow === "*" || dow === "?")) {
|
||||
return `Day ${dom} of every month at ${time}`;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
+441
-897
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,309 @@
|
||||
import { useMemo, useRef, useState, type ReactNode } from "react";
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import { Sparkles } from "lucide-react";
|
||||
import type {
|
||||
RoutineDetail as RoutineDetailType,
|
||||
RoutineTrigger,
|
||||
RoutineVariable,
|
||||
} from "@paperclipai/shared";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { RunButton } from "@/components/AgentActionButtons";
|
||||
import { ToggleSwitch } from "@/components/ui/toggle-switch";
|
||||
import { RoutineSubSidebar, RoutineSectionPicker } from "@/components/RoutineSubSidebar";
|
||||
import { RoutineSaveBar } from "@/components/RoutineSaveBar";
|
||||
import {
|
||||
EDITABLE_SECTIONS,
|
||||
RoutineDetailContext,
|
||||
type RoutineDetailContextValue,
|
||||
type RoutineEditDraft,
|
||||
type RoutineSectionKey,
|
||||
} from "@/components/routine-sections/context";
|
||||
import {
|
||||
OverviewSection,
|
||||
TriggersSection,
|
||||
VariablesSection,
|
||||
SecretsSection,
|
||||
DeliverySection,
|
||||
} from "@/components/routine-sections/editable-sections";
|
||||
import {
|
||||
RunsSection,
|
||||
ActivitySection,
|
||||
} from "@/components/routine-sections/operate-sections";
|
||||
import { storybookAgents, storybookProjects } from "../fixtures/paperclipData";
|
||||
|
||||
const COMPANY_ID = "company-storybook";
|
||||
const ROUTINE_ID = "routine-storybook";
|
||||
|
||||
const now = new Date("2026-06-09T12:00:00Z");
|
||||
|
||||
const variables: RoutineVariable[] = [
|
||||
{ name: "customer_name", label: "Customer name", type: "text", defaultValue: "Acme", required: true, options: [] },
|
||||
{ name: "deadline", label: "Deadline", type: "text", defaultValue: null, required: false, options: [] },
|
||||
];
|
||||
|
||||
const triggers: RoutineTrigger[] = [
|
||||
{
|
||||
id: "trigger-schedule",
|
||||
companyId: COMPANY_ID,
|
||||
routineId: ROUTINE_ID,
|
||||
kind: "schedule",
|
||||
label: "schedule",
|
||||
enabled: true,
|
||||
cronExpression: "0 14 * * 1-5",
|
||||
timezone: "UTC",
|
||||
nextRunAt: new Date("2026-06-09T14:00:00Z"),
|
||||
lastFiredAt: new Date("2026-06-08T14:00:00Z"),
|
||||
publicId: null,
|
||||
secretId: null,
|
||||
signingMode: null,
|
||||
replayWindowSec: null,
|
||||
lastRotatedAt: null,
|
||||
lastResult: "succeeded",
|
||||
createdByAgentId: null,
|
||||
createdByUserId: null,
|
||||
updatedByAgentId: null,
|
||||
updatedByUserId: null,
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
},
|
||||
];
|
||||
|
||||
const routine: RoutineDetailType = {
|
||||
id: ROUTINE_ID,
|
||||
companyId: COMPANY_ID,
|
||||
projectId: storybookProjects[0]?.id ?? null,
|
||||
goalId: null,
|
||||
parentIssueId: null,
|
||||
title: "Send the weekly digest to {{customer_name}}",
|
||||
description:
|
||||
"Compile last week's shipped work and email a digest to {{customer_name}} by {{deadline}}.\n\nKeep it to five bullets.",
|
||||
assigneeAgentId: storybookAgents[0]?.id ?? null,
|
||||
priority: "medium",
|
||||
status: "active",
|
||||
concurrencyPolicy: "coalesce_if_active",
|
||||
catchUpPolicy: "skip_missed",
|
||||
variables,
|
||||
env: { DATABASE_URL: { kind: "secret", secretId: "secret-prod-db", version: "latest" } } as never,
|
||||
latestRevisionId: "rev-17",
|
||||
latestRevisionNumber: 17,
|
||||
createdByAgentId: null,
|
||||
createdByUserId: null,
|
||||
updatedByAgentId: null,
|
||||
updatedByUserId: null,
|
||||
lastTriggeredAt: new Date("2026-06-08T14:00:00Z"),
|
||||
lastEnqueuedAt: null,
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
managedByPlugin: null,
|
||||
project: null,
|
||||
assignee: null,
|
||||
parentIssue: null,
|
||||
triggers,
|
||||
recentRuns: [],
|
||||
activeIssue: null,
|
||||
};
|
||||
|
||||
const routineRuns = [
|
||||
{ id: "run-1", source: "manual", status: "succeeded", triggeredAt: new Date("2026-06-09T11:48:00Z"), trigger: { label: "manual", kind: "manual" }, linkedIssue: { id: "issue-1", identifier: "PAP-99221" } },
|
||||
{ id: "run-2", source: "schedule", status: "failed", triggeredAt: new Date("2026-06-08T14:00:00Z"), trigger: { label: "schedule", kind: "schedule" }, linkedIssue: { id: "issue-2", identifier: "PAP-99220" } },
|
||||
{ id: "run-3", source: "schedule", status: "succeeded", triggeredAt: new Date("2026-06-07T14:00:00Z"), trigger: { label: "schedule", kind: "schedule" }, linkedIssue: { id: "issue-3", identifier: "PAP-99219" } },
|
||||
] as never;
|
||||
|
||||
const activity = [
|
||||
{ id: "act-1", action: "trigger.fired", details: { trigger: "schedule", run: "PAP-99221" }, createdAt: new Date("2026-06-09T14:02:00Z") },
|
||||
{ id: "act-2", action: "routine.updated", details: { fields: ["instructions", "variables"] }, createdAt: new Date("2026-06-09T13:55:00Z") },
|
||||
{ id: "act-3", action: "run.completed", details: { issue: "PAP-99220", status: "failed" }, createdAt: new Date("2026-06-08T23:01:00Z") },
|
||||
] as never;
|
||||
|
||||
function stubMutation(overrides?: Record<string, unknown>) {
|
||||
return {
|
||||
isPending: false,
|
||||
mutate: () => {},
|
||||
mutateAsync: async () => ({}),
|
||||
...overrides,
|
||||
} as never;
|
||||
}
|
||||
|
||||
function makeContext(dirty: boolean, navigate: (s: RoutineSectionKey) => void): RoutineDetailContextValue {
|
||||
const defaults: RoutineEditDraft = {
|
||||
title: routine.title,
|
||||
description: routine.description ?? "",
|
||||
projectId: routine.projectId ?? "",
|
||||
assigneeAgentId: routine.assigneeAgentId ?? "",
|
||||
priority: routine.priority,
|
||||
concurrencyPolicy: routine.concurrencyPolicy,
|
||||
catchUpPolicy: routine.catchUpPolicy,
|
||||
variables: routine.variables,
|
||||
env: routine.env ?? null,
|
||||
};
|
||||
const editDraft: RoutineEditDraft = dirty
|
||||
? { ...defaults, description: `${defaults.description}\n\nAlways CC the account owner.` }
|
||||
: defaults;
|
||||
const dirtyFields = dirty ? [{ key: "description", label: "the description" }] : [];
|
||||
|
||||
return {
|
||||
routine,
|
||||
routineId: ROUTINE_ID,
|
||||
companyId: COMPANY_ID,
|
||||
editDraft,
|
||||
setEditDraft: () => {},
|
||||
routineDefaults: defaults,
|
||||
dirtyFields,
|
||||
isEditDirty: dirty,
|
||||
sectionDirtyFields: (s) => (s === "overview" ? dirtyFields : []),
|
||||
isSectionDirty: (s) => dirty && s === "overview",
|
||||
discardSection: () => {},
|
||||
saveRoutine: stubMutation(),
|
||||
saveConflict: false,
|
||||
reloadLatest: () => {},
|
||||
automationEnabled: true,
|
||||
automationLabel: "Active",
|
||||
automationLabelClassName: "text-emerald-400",
|
||||
automationToggleDisabled: false,
|
||||
onToggleAutomation: () => {},
|
||||
onOpenRunDialog: () => {},
|
||||
runRoutinePending: false,
|
||||
newTrigger: { kind: "schedule", cronExpression: "0 14 * * 1-5", signingMode: "bearer", replayWindowSec: "300" },
|
||||
setNewTrigger: () => {},
|
||||
createTrigger: stubMutation(),
|
||||
updateTrigger: stubMutation(),
|
||||
deleteTrigger: stubMutation(),
|
||||
rotateTrigger: stubMutation(),
|
||||
secretMessage: null,
|
||||
setSecretMessage: () => {},
|
||||
copySecretValue: () => {},
|
||||
availableSecrets: [],
|
||||
createSecret: stubMutation(),
|
||||
agents: storybookAgents,
|
||||
projects: storybookProjects,
|
||||
agentById: new Map(storybookAgents.map((a) => [a.id, a])),
|
||||
projectById: new Map(storybookProjects.map((p) => [p.id, p])),
|
||||
assigneeOptions: storybookAgents.map((a) => ({ id: a.id, label: a.name, searchText: a.name })),
|
||||
projectOptions: storybookProjects.map((p) => ({ id: p.id, label: p.name, searchText: p.name })),
|
||||
recentAssigneeIds: [],
|
||||
recentProjectIds: [],
|
||||
mentionOptions: [],
|
||||
currentAssignee: storybookAgents[0] ?? null,
|
||||
currentProject: storybookProjects[0] ?? null,
|
||||
routineRuns,
|
||||
activity,
|
||||
hasLiveRun: false,
|
||||
activeIssueId: undefined,
|
||||
titleInputRef: { current: null },
|
||||
descriptionEditorRef: { current: null },
|
||||
assigneeSelectorRef: { current: null },
|
||||
projectSelectorRef: { current: null },
|
||||
onHistoryRestoreSecretMaterials: () => {},
|
||||
onHistoryRestored: () => {},
|
||||
navigateToSection: navigate,
|
||||
} as RoutineDetailContextValue;
|
||||
}
|
||||
|
||||
const SECTION_TITLES: Record<RoutineSectionKey, string> = {
|
||||
overview: "Overview",
|
||||
triggers: "Triggers",
|
||||
variables: "Variables",
|
||||
secrets: "Secrets",
|
||||
delivery: "Delivery",
|
||||
runs: "Runs",
|
||||
activity: "Activity",
|
||||
history: "History",
|
||||
};
|
||||
|
||||
function SectionBody({ section }: { section: RoutineSectionKey }) {
|
||||
switch (section) {
|
||||
case "overview":
|
||||
return <OverviewSection />;
|
||||
case "triggers":
|
||||
return <TriggersSection />;
|
||||
case "variables":
|
||||
return <VariablesSection />;
|
||||
case "secrets":
|
||||
return <SecretsSection />;
|
||||
case "delivery":
|
||||
return <DeliverySection />;
|
||||
case "runs":
|
||||
return <RunsSection />;
|
||||
case "activity":
|
||||
return <ActivitySection />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function RoutineCShell({ initialSection = "overview", dirty = false }: { initialSection?: RoutineSectionKey; dirty?: boolean }) {
|
||||
const [section, setSection] = useState<RoutineSectionKey>(initialSection);
|
||||
const ctx = useMemo(() => makeContext(dirty, setSection), [dirty]);
|
||||
const isEditable = EDITABLE_SECTIONS.includes(section);
|
||||
|
||||
return (
|
||||
<RoutineDetailContext.Provider value={ctx}>
|
||||
<div className="flex h-[900px] flex-col bg-background text-foreground">
|
||||
<header className="sticky top-0 z-20 flex h-14 shrink-0 items-center gap-3 border-b border-border bg-background px-6">
|
||||
<div className="flex min-w-0 flex-1 items-center gap-3">
|
||||
<span className="truncate text-base font-semibold">{routine.title}</span>
|
||||
<Badge variant="outline" className="hidden shrink-0 gap-1.5 text-xs text-muted-foreground sm:inline-flex">
|
||||
<Sparkles className="h-3 w-3" /> Digest Bot
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="ml-auto flex shrink-0 items-center gap-3">
|
||||
<RunButton onClick={() => {}} />
|
||||
<div className="flex items-center gap-2">
|
||||
<ToggleSwitch size="default" checked onCheckedChange={() => {}} aria-label="Toggle automation" />
|
||||
<span className="text-sm font-medium text-emerald-400">Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<RoutineSectionPicker activeSection={section} onNavigate={setSection} isSectionDirty={ctx.isSectionDirty} />
|
||||
|
||||
<div className="flex min-h-0 flex-1">
|
||||
<RoutineSubSidebar
|
||||
activeSection={section}
|
||||
hrefFor={(s) => `#${s}`}
|
||||
isSectionDirty={ctx.isSectionDirty}
|
||||
hasLiveRun={false}
|
||||
onNavigate={setSection}
|
||||
/>
|
||||
<main className="min-w-0 flex-1 overflow-y-auto px-4 py-6 md:px-8">
|
||||
<section className={isEditable ? "mx-auto w-full max-w-3xl" : "w-full"}>
|
||||
<h2 className="mb-4 text-lg font-semibold">{SECTION_TITLES[section]}</h2>
|
||||
<SectionBody section={section} />
|
||||
{isEditable ? (
|
||||
<RoutineSaveBar
|
||||
dirtyFields={ctx.sectionDirtyFields(section)}
|
||||
isSaving={false}
|
||||
saveConflict={false}
|
||||
onSave={() => {}}
|
||||
onDiscard={() => {}}
|
||||
onReload={() => {}}
|
||||
/>
|
||||
) : null}
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</RoutineDetailContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
const meta: Meta<typeof RoutineCShell> = {
|
||||
title: "Product/Routines · Detail (variation C)",
|
||||
component: RoutineCShell,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
a11y: { test: "off" },
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof RoutineCShell>;
|
||||
|
||||
export const Overview: Story = { args: { initialSection: "overview", dirty: true } };
|
||||
export const Triggers: Story = { args: { initialSection: "triggers" } };
|
||||
export const Variables: Story = { args: { initialSection: "variables" } };
|
||||
export const Secrets: Story = { args: { initialSection: "secrets" } };
|
||||
export const Delivery: Story = { args: { initialSection: "delivery" } };
|
||||
export const Runs: Story = { args: { initialSection: "runs" } };
|
||||
export const Activity: Story = { args: { initialSection: "activity" } };
|
||||
Reference in New Issue
Block a user