[codex] Polish routine layout follow-ups (#7858)
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work > - Routines are the recurring-work surface that lets a company keep operating without a human manually kicking off every task > - The base routine detail Variation C shell already landed in #7848, but the follow-up branch still had polish work for scheduling, section ergonomics, and the list layout > - Operators need routine edit screens to explain trigger behavior clearly, keep long detail pages usable on mobile/touch devices, and make grouped routine lists easier to scan > - This pull request rebases the remaining branch work onto current `master`, drops the duplicate commits already merged through #7848, and keeps only the new routine UI follow-ups > - The benefit is a cleaner routines workflow without reopening the already-merged shell work or carrying unrelated lockfile, workflow, or screenshot changes ## Linked Issues or Issue Description Refs #7848 Feature follow-up: polish the routines UI after the Variation C routine-detail shell landed. Problem / motivation: - Routine trigger configuration needs clearer previews for manual, schedule, API, and webhook execution modes. - Routine detail sections need better responsive spacing and touch ergonomics. - The routines list grouping should scan like grouped records instead of a table with heavy row dividers. - The routine tests need a React 19-compatible render helper so the focused routine suite can run in this workspace. Proposed solution: - Add cron-fire preview helpers and routine-run display helpers with focused tests. - Expand the routine editable and operate sections with richer trigger, variable, run, activity, and history presentation. - Adjust the routine detail shell and sub-sidebar spacing for mobile/touch layout. - Update grouped routine list presentation to use bordered group headers with borderless rows. - Switch affected routine tests to the repo's `flushSync` render-helper pattern. Alternatives considered: - Leaving the duplicate pre-#7848 commits in the branch would recreate conflicts and make the PR review much larger than the remaining change. - Keeping grouped routine rows inside one bordered table was simpler, but made the grouping hierarchy less legible. Roadmap alignment: - ROADMAP.md lists Scheduled Routines as a core shipped capability and Output/Enforced Outcomes as ongoing priorities. This is polish on that existing routines capability, not a new roadmap-level feature. ## What Changed - Added routine scheduling preview helpers and tests for cron/manual/API/webhook fire-policy display. - Added routine run display helpers and tests for deduped trigger labels and run-row subtitles. - Polished routine detail sections, including trigger summaries, operate views, and env/variable editing ergonomics. - Adjusted routine detail page and sub-sidebar spacing so the title/header area is less pinned and touch layouts center better. - Reworked the routines list grouped layout so group headers are bordered cards and routine rows are borderless inside each group. - Added Storybook coverage for the routines list grouped layout and updated the existing routine detail story. - Repaired routine tests to use `flushSync` helpers compatible with the installed React 19 runtime. ## Verification - `pnpm exec vitest run ui/src/lib/cron-fires.test.ts ui/src/lib/routine-run-display.test.ts ui/src/pages/Routines.test.tsx ui/src/components/RoutineSubSidebar.test.tsx ui/src/components/RoutineSaveBar.test.tsx` - Result: 5 test files passed, 37 tests passed. - Confirmed the rebased PR diff does not include `pnpm-lock.yaml`, `.github/workflows/*`, or committed screenshots. - Confirmed `origin/master` is an ancestor of the pushed branch head after rebase. ## Risks - Medium UI risk: this touches the routine detail and routine list surfaces, so visual regressions are possible in edge cases not covered by the focused tests. - Low data risk: no schema, migration, server API, or lockfile changes are included. - Review note: the branch intentionally force-pushed after rebasing because the original first three commits were already merged through #7848. > 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 runtime, with repository shell/tool access. Exact hosted runtime model identifier and context-window size were not exposed in the execution environment. ## 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 searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [ ] 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] All Paperclip CI gates are green - [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Dotta
@@ -1,11 +1,35 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import type { CompanySecret, EnvBinding, SecretVersionSelector } from "@paperclipai/shared";
|
||||
import { AlertCircle, X } from "lucide-react";
|
||||
import { AlertCircle, KeyRound, X } from "lucide-react";
|
||||
import { cn } from "../lib/utils";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
const inputClass =
|
||||
"w-full rounded-md border border-border px-2.5 py-1.5 bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40";
|
||||
|
||||
// shadcn Select trigger sized to line up with the mono inputs above.
|
||||
const selectTriggerClass =
|
||||
"h-[34px] min-h-[34px] rounded-md border-border bg-transparent px-2.5 text-sm font-mono shadow-none";
|
||||
|
||||
/** Radix Select forbids empty-string item values; use a sentinel for "unset". */
|
||||
const SECRET_UNSET = "__unset__";
|
||||
|
||||
/** Suggest an env-var-style KEY from a secret name (UPPER_SNAKE). */
|
||||
function envKeyFromSecretName(name: string): string {
|
||||
return name
|
||||
.trim()
|
||||
.toUpperCase()
|
||||
.replace(/[^A-Z0-9_]+/g, "_")
|
||||
.replace(/^_+|_+$/g, "")
|
||||
.slice(0, 64);
|
||||
}
|
||||
|
||||
type Row = {
|
||||
key: string;
|
||||
source: "plain" | "secret";
|
||||
@@ -69,11 +93,17 @@ export function EnvVarEditor({
|
||||
secrets,
|
||||
onCreateSecret,
|
||||
onChange,
|
||||
recentlyUsedSecrets,
|
||||
}: {
|
||||
value: Record<string, EnvBinding>;
|
||||
secrets: CompanySecret[];
|
||||
onCreateSecret: (name: string, value: string) => Promise<CompanySecret>;
|
||||
onChange: (env: Record<string, EnvBinding> | undefined) => void;
|
||||
/**
|
||||
* Optional project-scoped secrets to surface as one-tap "quick bind" chips
|
||||
* below the editor (§3.4). Already-bound secrets are filtered out.
|
||||
*/
|
||||
recentlyUsedSecrets?: CompanySecret[];
|
||||
}) {
|
||||
const [rows, setRows] = useState<Row[]>(() => toRows(value));
|
||||
const [sealError, setSealError] = useState<string | null>(null);
|
||||
@@ -140,6 +170,26 @@ export function EnvVarEditor({
|
||||
emit(next);
|
||||
}
|
||||
|
||||
function bindRecentSecret(secret: CompanySecret) {
|
||||
// Fill the trailing empty row (or append one) with this secret bound.
|
||||
const next = rows.map((row) => ({ ...row }));
|
||||
const trailing = next[next.length - 1];
|
||||
let target: Row;
|
||||
if (trailing && !trailing.key && !trailing.plainValue && !trailing.secretId) {
|
||||
target = trailing;
|
||||
} else {
|
||||
target = emptyRow();
|
||||
next.push(target);
|
||||
}
|
||||
target.source = "secret";
|
||||
target.secretId = secret.id;
|
||||
target.version = "latest";
|
||||
if (!target.key) target.key = envKeyFromSecretName(secret.name);
|
||||
next.push(emptyRow());
|
||||
setRows(next);
|
||||
emit(next);
|
||||
}
|
||||
|
||||
function defaultSecretName(key: string) {
|
||||
return key
|
||||
.trim()
|
||||
@@ -185,62 +235,86 @@ export function EnvVarEditor({
|
||||
value={row.key}
|
||||
onChange={(event) => updateRow(index, { key: event.target.value })}
|
||||
/>
|
||||
<select
|
||||
className={cn(inputClass, "flex-[1] bg-background")}
|
||||
<Select
|
||||
value={row.source}
|
||||
onChange={(event) =>
|
||||
onValueChange={(next) =>
|
||||
updateRow(index, {
|
||||
source: event.target.value === "secret" ? "secret" : "plain",
|
||||
...(event.target.value === "plain" ? { secretId: "" } : {}),
|
||||
source: next === "secret" ? "secret" : "plain",
|
||||
...(next === "plain" ? { secretId: "" } : {}),
|
||||
})
|
||||
}
|
||||
>
|
||||
<option value="plain">Plain</option>
|
||||
<option value="secret">Secret</option>
|
||||
</select>
|
||||
<SelectTrigger className={cn(selectTriggerClass, "flex-[1]")} aria-label="Binding mode">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="plain">Plain</SelectItem>
|
||||
<SelectItem value="secret">Secret</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{row.source === "secret" ? (
|
||||
<>
|
||||
<select
|
||||
className={cn(inputClass, "flex-[3] bg-background", row.secretId && !secrets.some((s) => s.id === row.secretId) && "border-destructive text-destructive")}
|
||||
value={row.secretId}
|
||||
onChange={(event) => updateRow(index, { secretId: event.target.value })}
|
||||
<Select
|
||||
value={row.secretId || SECRET_UNSET}
|
||||
onValueChange={(next) =>
|
||||
updateRow(index, { secretId: next === SECRET_UNSET ? "" : next })
|
||||
}
|
||||
>
|
||||
<option value="">Select secret...</option>
|
||||
{row.secretId && !secrets.some((s) => s.id === row.secretId) ? (
|
||||
<option value={row.secretId}>Missing ({row.secretId.slice(0, 8)}…)</option>
|
||||
) : null}
|
||||
{secrets.map((secret) => (
|
||||
<option key={secret.id} value={secret.id}>
|
||||
{secret.name}
|
||||
{secret.status !== "active" ? ` (${secret.status})` : ""}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
className={cn(inputClass, "flex-[1] bg-background")}
|
||||
<SelectTrigger
|
||||
aria-label="Secret"
|
||||
className={cn(
|
||||
selectTriggerClass,
|
||||
"flex-[3]",
|
||||
row.secretId &&
|
||||
!secrets.some((s) => s.id === row.secretId) &&
|
||||
"border-destructive text-destructive",
|
||||
)}
|
||||
>
|
||||
<SelectValue placeholder="Select secret..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{row.secretId && !secrets.some((s) => s.id === row.secretId) ? (
|
||||
<SelectItem value={row.secretId}>
|
||||
Missing ({row.secretId.slice(0, 8)}…)
|
||||
</SelectItem>
|
||||
) : null}
|
||||
{secrets.map((secret) => (
|
||||
<SelectItem key={secret.id} value={secret.id}>
|
||||
{secret.name}
|
||||
{secret.status !== "active" ? ` (${secret.status})` : ""}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select
|
||||
value={row.version === "latest" ? "latest" : String(row.version)}
|
||||
onChange={(event) => {
|
||||
const raw = event.target.value;
|
||||
updateRow(index, { version: raw === "latest" ? "latest" : Number.parseInt(raw, 10) });
|
||||
}}
|
||||
onValueChange={(raw) =>
|
||||
updateRow(index, {
|
||||
version: raw === "latest" ? "latest" : Number.parseInt(raw, 10),
|
||||
})
|
||||
}
|
||||
disabled={!row.secretId}
|
||||
aria-label="Version"
|
||||
>
|
||||
<option value="latest">latest</option>
|
||||
{(() => {
|
||||
const selected = secrets.find((s) => s.id === row.secretId);
|
||||
if (!selected) return null;
|
||||
return Array.from({ length: Math.max(0, selected.latestVersion) }, (_, idx) => {
|
||||
const version = selected.latestVersion - idx;
|
||||
if (version <= 0) return null;
|
||||
return (
|
||||
<option key={version} value={version}>
|
||||
v{version}
|
||||
</option>
|
||||
);
|
||||
});
|
||||
})()}
|
||||
</select>
|
||||
<SelectTrigger className={cn(selectTriggerClass, "flex-[1]")} aria-label="Version">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="latest">latest</SelectItem>
|
||||
{(() => {
|
||||
const selected = secrets.find((s) => s.id === row.secretId);
|
||||
if (!selected) return null;
|
||||
return Array.from({ length: Math.max(0, selected.latestVersion) }, (_, idx) => {
|
||||
const version = selected.latestVersion - idx;
|
||||
if (version <= 0) return null;
|
||||
return (
|
||||
<SelectItem key={version} value={String(version)}>
|
||||
v{version}
|
||||
</SelectItem>
|
||||
);
|
||||
});
|
||||
})()}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center rounded-md border border-border px-2 py-0.5 text-xs text-muted-foreground hover:bg-accent/50 transition-colors shrink-0"
|
||||
@@ -284,6 +358,34 @@ export function EnvVarEditor({
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{(() => {
|
||||
const boundIds = new Set(
|
||||
rows.filter((row) => row.source === "secret" && row.secretId).map((row) => row.secretId),
|
||||
);
|
||||
const quick = (recentlyUsedSecrets ?? [])
|
||||
.filter((secret) => secret.status === "active" && !boundIds.has(secret.id))
|
||||
.slice(0, 8);
|
||||
if (quick.length === 0) return null;
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-1.5 pt-0.5">
|
||||
<span className="inline-flex items-center gap-1 text-[11px] text-muted-foreground/70">
|
||||
<KeyRound className="h-3 w-3" />
|
||||
Recently used:
|
||||
</span>
|
||||
{quick.map((secret) => (
|
||||
<button
|
||||
key={secret.id}
|
||||
type="button"
|
||||
onClick={() => bindRecentSecret(secret)}
|
||||
className="inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 font-mono text-[11px] text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
|
||||
title={`Bind ${secret.name}`}
|
||||
>
|
||||
+ {secret.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
{sealError && <p className="text-[11px] text-destructive">{sealError}</p>}
|
||||
{(() => {
|
||||
const issues: { key: string; reason: string }[] = [];
|
||||
|
||||
@@ -63,6 +63,7 @@ export function RoutineListRow<TRoutine extends RoutineListRowItem>({
|
||||
disableRunNow = false,
|
||||
disableToggle = false,
|
||||
hideArchiveAction = false,
|
||||
divider = true,
|
||||
onRunNow,
|
||||
onToggleEnabled,
|
||||
onToggleArchived,
|
||||
@@ -80,6 +81,8 @@ export function RoutineListRow<TRoutine extends RoutineListRowItem>({
|
||||
disableRunNow?: boolean;
|
||||
disableToggle?: boolean;
|
||||
hideArchiveAction?: boolean;
|
||||
/** Render a bottom divider between consecutive rows. Off when the group is its own card. */
|
||||
divider?: boolean;
|
||||
onRunNow: (routine: TRoutine) => void;
|
||||
onToggleEnabled: (routine: TRoutine, enabled: boolean) => void;
|
||||
onToggleArchived?: (routine: TRoutine) => void;
|
||||
@@ -95,7 +98,9 @@ export function RoutineListRow<TRoutine extends RoutineListRowItem>({
|
||||
return (
|
||||
<Link
|
||||
to={href}
|
||||
className="group flex flex-col gap-3 border-b border-border px-3 py-3 transition-colors hover:bg-accent/50 last:border-b-0 sm:flex-row sm:items-center no-underline text-inherit"
|
||||
className={`group flex flex-col gap-3 px-3 py-3 transition-colors hover:bg-accent/50 sm:flex-row sm:items-center no-underline text-inherit${
|
||||
divider ? " border-b border-border last:border-b-0" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="min-w-0 flex-1 space-y-1.5">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
|
||||
@@ -1,11 +1,16 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import { act } from "react";
|
||||
import type React from "react";
|
||||
import { flushSync } from "react-dom";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { RoutineSaveBar } from "./RoutineSaveBar";
|
||||
import type { RoutineHistoryDirtyFieldDescriptor } from "./RoutineHistoryTab";
|
||||
|
||||
function act(callback: () => void) {
|
||||
flushSync(callback);
|
||||
}
|
||||
|
||||
let container: HTMLDivElement;
|
||||
let root: ReturnType<typeof createRoot>;
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import { act, type AnchorHTMLAttributes, type ReactNode } from "react";
|
||||
import type { AnchorHTMLAttributes, ReactNode } from "react";
|
||||
import { flushSync } from "react-dom";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
|
||||
@@ -22,6 +23,10 @@ vi.mock("@/lib/router", () => ({
|
||||
import { RoutineSubSidebar } from "./RoutineSubSidebar";
|
||||
import type { RoutineSectionKey } from "./routine-sections/context";
|
||||
|
||||
function act(callback: () => void) {
|
||||
flushSync(callback);
|
||||
}
|
||||
|
||||
let container: HTMLDivElement;
|
||||
let root: ReturnType<typeof createRoot>;
|
||||
|
||||
|
||||
@@ -110,7 +110,7 @@ export function RoutineSubSidebar({
|
||||
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"
|
||||
className="sticky top-0 hidden max-h-[100dvh] 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">
|
||||
@@ -174,7 +174,7 @@ export function RoutineSectionPicker({
|
||||
isSectionDirty: (section: RoutineSectionKey) => boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className="sticky top-14 z-10 border-b border-border bg-background px-4 py-2 md:hidden">
|
||||
<div className="sticky top-0 z-10 border-b border-border bg-background px-4 py-2 md:hidden">
|
||||
<Select
|
||||
value={activeSection}
|
||||
onValueChange={(value) => {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useMemo } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import {
|
||||
ArrowRight,
|
||||
Braces,
|
||||
@@ -6,6 +6,8 @@ import {
|
||||
Edit3,
|
||||
KeyRound,
|
||||
Play,
|
||||
Plus,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
@@ -20,6 +22,8 @@ import {
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { RadioCardGroup } from "@/components/ui/radio-card";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { nextCronFires, previewFirePolicies } from "../../lib/cron-fires";
|
||||
import { timeAgo } from "../../lib/timeAgo";
|
||||
import { EmptyState } from "../EmptyState";
|
||||
import { InlineEntitySelector } from "../InlineEntitySelector";
|
||||
@@ -30,7 +34,7 @@ import { RoutineVariablesEditor, RoutineVariablesHint } from "../RoutineVariable
|
||||
import { RoutineTriggerCard } from "../RoutineTriggerCard";
|
||||
import { EnvVarEditor } from "../EnvVarEditor";
|
||||
import { useRoutineDetail } from "./context";
|
||||
import type { EnvBinding } from "@paperclipai/shared";
|
||||
import type { EnvBinding, RoutineDetail as RoutineDetailType } from "@paperclipai/shared";
|
||||
|
||||
const concurrencyPolicyOptions = [
|
||||
{
|
||||
@@ -336,10 +340,39 @@ function SummaryCard({
|
||||
export function TriggersSection() {
|
||||
const ctx = useRoutineDetail();
|
||||
const { routine, newTrigger, setNewTrigger, createTrigger, updateTrigger, deleteTrigger, rotateTrigger } = ctx;
|
||||
const [addOpen, setAddOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Add trigger form */}
|
||||
{/* Add-trigger drawer header (§3.2) */}
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm font-medium text-muted-foreground">
|
||||
{routine.triggers.length === 0
|
||||
? "No triggers yet"
|
||||
: `${routine.triggers.length} trigger${routine.triggers.length === 1 ? "" : "s"}`}
|
||||
</p>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={addOpen ? "secondary" : "default"}
|
||||
onClick={() => setAddOpen((open) => !open)}
|
||||
aria-expanded={addOpen}
|
||||
>
|
||||
{addOpen ? (
|
||||
<>
|
||||
<X className="mr-1.5 h-3.5 w-3.5" />
|
||||
Cancel
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Plus className="mr-1.5 h-3.5 w-3.5" />
|
||||
New trigger
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Add trigger form — expand-on-click drawer */}
|
||||
{addOpen ? (
|
||||
<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">
|
||||
@@ -412,16 +445,29 @@ export function TriggersSection() {
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center justify-end">
|
||||
<Button size="sm" onClick={() => createTrigger.mutate()} disabled={createTrigger.isPending}>
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<Button size="sm" variant="ghost" onClick={() => setAddOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => createTrigger.mutate(undefined, { onSuccess: () => setAddOpen(false) })}
|
||||
disabled={createTrigger.isPending}
|
||||
>
|
||||
{createTrigger.isPending ? "Adding..." : "Add trigger"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Existing triggers */}
|
||||
{routine.triggers.length === 0 ? (
|
||||
<EmptyState icon={Clock3} message="No triggers yet." />
|
||||
<EmptyState
|
||||
icon={Clock3}
|
||||
message="No triggers yet."
|
||||
action="Add a schedule"
|
||||
onAction={() => setAddOpen(true)}
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{routine.triggers.map((trigger) => (
|
||||
@@ -481,6 +527,21 @@ export function SecretsSection() {
|
||||
const ctx = useRoutineDetail();
|
||||
const { editDraft, setEditDraft, availableSecrets, createSecret, secretMessage, copySecretValue } = ctx;
|
||||
|
||||
// Project/company-scoped secrets that already see real usage, surfaced as
|
||||
// quick-bind chips (§3.4). Ranked by reference count then recency.
|
||||
const recentlyUsedSecrets = useMemo(
|
||||
() =>
|
||||
[...availableSecrets]
|
||||
.filter((secret) => secret.status === "active")
|
||||
.sort((a, b) => {
|
||||
const refDelta = (b.referenceCount ?? 0) - (a.referenceCount ?? 0);
|
||||
if (refDelta !== 0) return refDelta;
|
||||
return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
|
||||
})
|
||||
.slice(0, 8),
|
||||
[availableSecrets],
|
||||
);
|
||||
|
||||
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">
|
||||
@@ -520,6 +581,7 @@ export function SecretsSection() {
|
||||
<EnvVarEditor
|
||||
value={(editDraft.env ?? {}) as Record<string, EnvBinding>}
|
||||
secrets={availableSecrets}
|
||||
recentlyUsedSecrets={recentlyUsedSecrets}
|
||||
onCreateSecret={async (name, value) => createSecret.mutateAsync({ name, value })}
|
||||
onChange={(env) => setEditDraft((current) => ({ ...current, env: env ?? null }))}
|
||||
/>
|
||||
@@ -529,7 +591,7 @@ export function SecretsSection() {
|
||||
|
||||
export function DeliverySection() {
|
||||
const ctx = useRoutineDetail();
|
||||
const { editDraft, setEditDraft } = ctx;
|
||||
const { editDraft, setEditDraft, routine } = ctx;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
@@ -559,6 +621,102 @@ export function DeliverySection() {
|
||||
options={catchUpPolicyOptions}
|
||||
/>
|
||||
</div>
|
||||
<NextFiresPreview
|
||||
triggers={routine.triggers}
|
||||
concurrencyPolicy={editDraft.concurrencyPolicy}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const dispositionToneClass: Record<string, string> = {
|
||||
queued: "text-emerald-600 dark:text-emerald-400",
|
||||
coalesced: "text-amber-600 dark:text-amber-400",
|
||||
skipped: "text-muted-foreground",
|
||||
};
|
||||
|
||||
/**
|
||||
* "Next 5 fires" preview (§3.5) — the strongest "what does this policy mean?"
|
||||
* surface. Picks the soonest-firing schedule trigger, computes its next fires
|
||||
* client-side, and annotates each with how the chosen concurrency policy would
|
||||
* treat it.
|
||||
*/
|
||||
function NextFiresPreview({
|
||||
triggers,
|
||||
concurrencyPolicy,
|
||||
}: {
|
||||
triggers: RoutineDetailType["triggers"];
|
||||
concurrencyPolicy: string;
|
||||
}) {
|
||||
const preview = useMemo(() => {
|
||||
const schedule = triggers
|
||||
.filter((trigger) => trigger.kind === "schedule" && trigger.enabled && trigger.cronExpression)
|
||||
.map((trigger) => {
|
||||
const fires = nextCronFires(trigger.cronExpression, 5, {
|
||||
timeZone: trigger.timezone ?? "UTC",
|
||||
});
|
||||
return { trigger, fires };
|
||||
})
|
||||
.filter((entry) => entry.fires.length > 0)
|
||||
.sort((a, b) => a.fires[0]!.getTime() - b.fires[0]!.getTime())[0];
|
||||
if (!schedule) return null;
|
||||
return {
|
||||
timeZone: schedule.trigger.timezone ?? "UTC",
|
||||
entries: previewFirePolicies(schedule.fires, concurrencyPolicy),
|
||||
};
|
||||
}, [triggers, concurrencyPolicy]);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
|
||||
Next 5 fires
|
||||
</p>
|
||||
{preview ? (
|
||||
<>
|
||||
<div className="space-y-1.5 rounded-lg border border-border p-3 font-mono text-xs">
|
||||
{preview.entries.map((entry, index) => (
|
||||
<div key={index} className="flex items-center gap-2">
|
||||
<span className="text-muted-foreground/40">·</span>
|
||||
<span className="tabular-nums">{formatFireTime(entry.at, preview.timeZone)}</span>
|
||||
<ArrowRight className="h-3 w-3 shrink-0 text-muted-foreground/50" />
|
||||
<span className={cn("font-medium", dispositionToneClass[entry.disposition])}>
|
||||
{entry.label}
|
||||
</span>
|
||||
{entry.note ? (
|
||||
<span className="truncate text-muted-foreground/60">({entry.note})</span>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground/60">
|
||||
Preview assumes the previous run is still in flight when the next fires. Times shown in{" "}
|
||||
{preview.timeZone}.
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<p className="rounded-lg border border-dashed border-border p-3 text-xs text-muted-foreground">
|
||||
No enabled schedule trigger to preview. Add a schedule in Triggers to see how this policy
|
||||
treats upcoming fires.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatFireTime(date: Date, timeZone: string): string {
|
||||
try {
|
||||
return new Intl.DateTimeFormat(undefined, {
|
||||
timeZone,
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
hourCycle: "h23",
|
||||
})
|
||||
.format(date)
|
||||
.replace(",", "");
|
||||
} catch {
|
||||
return date.toISOString();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,24 +1,90 @@
|
||||
import { useMemo } from "react";
|
||||
import { Activity as ActivityIcon, Play } from "lucide-react";
|
||||
import { Link } from "@/lib/router";
|
||||
import { useMemo, useState } from "react";
|
||||
import { Activity as ActivityIcon, Play, SlidersHorizontal } from "lucide-react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { timeAgo } from "../../lib/timeAgo";
|
||||
import { runRowSubtitle, dedupedTriggerLabel } from "../../lib/routine-run-display";
|
||||
import { EmptyState } from "../EmptyState";
|
||||
import { EntityRow } from "../EntityRow";
|
||||
import { FilterBar, type FilterValue } from "../FilterBar";
|
||||
import { LiveRunWidget } from "../LiveRunWidget";
|
||||
import { RoutineHistoryTab } from "../RoutineHistoryTab";
|
||||
import { RoutineActivityRow } from "../RoutineActivityRow";
|
||||
import { useRoutineDetail } from "./context";
|
||||
|
||||
const DATE_WINDOW_OPTIONS: { value: string; label: string; ms: number | null }[] = [
|
||||
{ value: "any", label: "Any time", ms: null },
|
||||
{ value: "24h", label: "Last 24h", ms: 24 * 60 * 60 * 1000 },
|
||||
{ value: "7d", label: "Last 7d", ms: 7 * 24 * 60 * 60 * 1000 },
|
||||
{ value: "30d", label: "Last 30d", ms: 30 * 24 * 60 * 60 * 1000 },
|
||||
];
|
||||
|
||||
export function RunsSection() {
|
||||
const ctx = useRoutineDetail();
|
||||
const { routine, routineRuns, hasLiveRun, activeIssueId, onOpenRunDialog } = ctx;
|
||||
const runs = routineRuns ?? [];
|
||||
const runs = useMemo(() => routineRuns ?? [], [routineRuns]);
|
||||
|
||||
const [sourceFilter, setSourceFilter] = useState("any");
|
||||
const [statusFilter, setStatusFilter] = useState("any");
|
||||
const [dateFilter, setDateFilter] = useState("any");
|
||||
|
||||
const sourceOptions = useMemo(
|
||||
() => [...new Set(runs.map((run) => run.source))].sort(),
|
||||
[runs],
|
||||
);
|
||||
const statusOptions = useMemo(
|
||||
() => [...new Set(runs.map((run) => run.status))].sort(),
|
||||
[runs],
|
||||
);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const windowMs = DATE_WINDOW_OPTIONS.find((option) => option.value === dateFilter)?.ms ?? null;
|
||||
const cutoff = windowMs == null ? null : Date.now() - windowMs;
|
||||
return runs.filter((run) => {
|
||||
if (sourceFilter !== "any" && run.source !== sourceFilter) return false;
|
||||
if (statusFilter !== "any" && run.status !== statusFilter) return false;
|
||||
if (cutoff != null && new Date(run.triggeredAt).getTime() < cutoff) return false;
|
||||
return true;
|
||||
});
|
||||
}, [runs, sourceFilter, statusFilter, dateFilter]);
|
||||
|
||||
const activeFilters = useMemo<FilterValue[]>(() => {
|
||||
const list: FilterValue[] = [];
|
||||
if (sourceFilter !== "any") list.push({ key: "source", label: "Source", value: sourceFilter });
|
||||
if (statusFilter !== "any") {
|
||||
list.push({ key: "status", label: "Status", value: statusFilter.replaceAll("_", " ") });
|
||||
}
|
||||
if (dateFilter !== "any") {
|
||||
const label = DATE_WINDOW_OPTIONS.find((option) => option.value === dateFilter)?.label ?? dateFilter;
|
||||
list.push({ key: "date", label: "Date", value: label });
|
||||
}
|
||||
return list;
|
||||
}, [sourceFilter, statusFilter, dateFilter]);
|
||||
|
||||
function clearFilters() {
|
||||
setSourceFilter("any");
|
||||
setStatusFilter("any");
|
||||
setDateFilter("any");
|
||||
}
|
||||
|
||||
function removeFilter(key: string) {
|
||||
if (key === "source") setSourceFilter("any");
|
||||
if (key === "status") setStatusFilter("any");
|
||||
if (key === "date") setDateFilter("any");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{hasLiveRun && activeIssueId ? (
|
||||
<LiveRunWidget issueId={activeIssueId} companyId={routine.companyId} />
|
||||
) : null}
|
||||
|
||||
{runs.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={Play}
|
||||
@@ -27,39 +93,105 @@ export function RunsSection() {
|
||||
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>
|
||||
<>
|
||||
{/* Filter chips row (§3.6) */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Select value={sourceFilter} onValueChange={setSourceFilter}>
|
||||
<SelectTrigger size="sm" className="h-8 w-auto gap-1.5 text-xs" aria-label="Filter by source">
|
||||
<span className="text-muted-foreground">Source:</span>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="any">any</SelectItem>
|
||||
{sourceOptions.map((source) => (
|
||||
<SelectItem key={source} value={source}>
|
||||
{source}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger size="sm" className="h-8 w-auto gap-1.5 text-xs" aria-label="Filter by status">
|
||||
<span className="text-muted-foreground">Status:</span>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="any">any</SelectItem>
|
||||
{statusOptions.map((status) => (
|
||||
<SelectItem key={status} value={status}>
|
||||
{status.replaceAll("_", " ")}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={dateFilter} onValueChange={setDateFilter}>
|
||||
<SelectTrigger size="sm" className="h-8 w-auto gap-1.5 text-xs" aria-label="Filter by date">
|
||||
<span className="text-muted-foreground">Date:</span>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{DATE_WINDOW_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<FilterBar filters={activeFilters} onRemove={removeFilter} onClear={clearFilters} />
|
||||
</div>
|
||||
|
||||
{filtered.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={SlidersHorizontal}
|
||||
message="No runs match these filters."
|
||||
action="Clear filters"
|
||||
onAction={clearFilters}
|
||||
/>
|
||||
) : (
|
||||
<div className="rounded-lg border border-border">
|
||||
{filtered.map((run) => {
|
||||
const label = dedupedTriggerLabel(run.trigger);
|
||||
const title = run.linkedIssue?.title ?? label ?? "Run";
|
||||
return (
|
||||
<EntityRow
|
||||
key={run.id}
|
||||
leading={
|
||||
<>
|
||||
<Badge variant="outline" className="shrink-0">
|
||||
{run.source}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant={run.status === "failed" ? "destructive" : "secondary"}
|
||||
className="shrink-0"
|
||||
>
|
||||
{run.status.replaceAll("_", " ")}
|
||||
</Badge>
|
||||
</>
|
||||
}
|
||||
identifier={
|
||||
run.linkedIssue
|
||||
? run.linkedIssue.identifier ?? run.linkedIssue.id.slice(0, 8)
|
||||
: undefined
|
||||
}
|
||||
title={title}
|
||||
subtitle={runRowSubtitle(run, routine.variables)}
|
||||
reserveSubtitleSpace
|
||||
trailing={
|
||||
<span className="text-xs text-muted-foreground">{timeAgo(run.triggeredAt)}</span>
|
||||
}
|
||||
to={
|
||||
run.linkedIssue
|
||||
? `/issues/${run.linkedIssue.identifier ?? run.linkedIssue.id}`
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user