[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
@@ -83,7 +83,7 @@ const routine: RoutineDetailType = {
|
||||
concurrencyPolicy: "coalesce_if_active",
|
||||
catchUpPolicy: "skip_missed",
|
||||
variables,
|
||||
env: { DATABASE_URL: { kind: "secret", secretId: "secret-prod-db", version: "latest" } } as never,
|
||||
env: { DATABASE_URL: { type: "secret_ref", secretId: "secret-prod-db", version: "latest" } } as never,
|
||||
latestRevisionId: "rev-17",
|
||||
latestRevisionNumber: 17,
|
||||
createdByAgentId: null,
|
||||
@@ -104,9 +104,41 @@ const routine: RoutineDetailType = {
|
||||
};
|
||||
|
||||
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" } },
|
||||
{ id: "run-1", source: "manual", status: "succeeded", triggeredAt: new Date("2026-06-09T11:48:00Z"), failureReason: null, triggerPayload: { customer_name: "Acme", deadline: "Fri" }, trigger: { label: "manual", kind: "manual" }, linkedIssue: { id: "issue-1", identifier: "PAP-99221", title: "Weekly digest for Acme" } },
|
||||
{ id: "run-2", source: "schedule", status: "failed", triggeredAt: new Date("2026-06-08T14:00:00Z"), failureReason: "Cron timed out after 600s", triggerPayload: { customer_name: "Acme" }, trigger: { label: "schedule", kind: "schedule" }, linkedIssue: { id: "issue-2", identifier: "PAP-99220", title: "Weekly digest for Acme" } },
|
||||
{ id: "run-3", source: "schedule", status: "succeeded", triggeredAt: new Date("2026-06-07T14:00:00Z"), failureReason: null, triggerPayload: { customer_name: "Globex" }, trigger: { label: "schedule", kind: "schedule" }, linkedIssue: { id: "issue-3", identifier: "PAP-99219", title: "Weekly digest for Globex" } },
|
||||
] as never;
|
||||
|
||||
function stubSecret(id: string, name: string, latestVersion: number, referenceCount: number) {
|
||||
return {
|
||||
id,
|
||||
companyId: COMPANY_ID,
|
||||
key: name.toLowerCase(),
|
||||
name,
|
||||
provider: "paperclip",
|
||||
status: "active",
|
||||
managedMode: "managed",
|
||||
externalRef: null,
|
||||
providerConfigId: null,
|
||||
providerMetadata: null,
|
||||
latestVersion,
|
||||
description: null,
|
||||
lastResolvedAt: now,
|
||||
lastRotatedAt: null,
|
||||
deletedAt: null,
|
||||
createdByAgentId: null,
|
||||
createdByUserId: null,
|
||||
referenceCount,
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
};
|
||||
}
|
||||
|
||||
const availableSecrets = [
|
||||
stubSecret("secret-prod-db", "prod-db", 3, 5),
|
||||
stubSecret("secret-gh-token", "gh-token", 2, 4),
|
||||
stubSecret("secret-openai", "openai-key", 1, 2),
|
||||
stubSecret("secret-stripe", "stripe-key", 1, 1),
|
||||
] as never;
|
||||
|
||||
const activity = [
|
||||
@@ -172,7 +204,7 @@ function makeContext(dirty: boolean, navigate: (s: RoutineSectionKey) => void):
|
||||
secretMessage: null,
|
||||
setSecretMessage: () => {},
|
||||
copySecretValue: () => {},
|
||||
availableSecrets: [],
|
||||
availableSecrets,
|
||||
createSecret: stubMutation(),
|
||||
agents: storybookAgents,
|
||||
projects: storybookProjects,
|
||||
@@ -238,8 +270,8 @@ function RoutineCShell({ initialSection = "overview", dirty = false }: { initial
|
||||
|
||||
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 h-[900px] flex-col overflow-y-auto bg-background text-foreground">
|
||||
<header className="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">
|
||||
@@ -265,7 +297,7 @@ function RoutineCShell({ initialSection = "overview", dirty = false }: { initial
|
||||
hasLiveRun={false}
|
||||
onNavigate={setSection}
|
||||
/>
|
||||
<main className="min-w-0 flex-1 overflow-y-auto px-4 py-6 md:px-8">
|
||||
<main className="min-w-0 flex-1 px-4 pb-6 pt-10 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} />
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import { useState } from "react";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
||||
import {
|
||||
RoutineListRow,
|
||||
type RoutineListAgentSummary,
|
||||
type RoutineListProjectSummary,
|
||||
type RoutineListRowItem,
|
||||
} from "@/components/RoutineList";
|
||||
|
||||
const projectById = new Map<string, RoutineListProjectSummary>([
|
||||
["p1", { name: "Board UI", color: "#6366f1" }],
|
||||
["p2", { name: "Growth", color: "#10b981" }],
|
||||
]);
|
||||
const agentById = new Map<string, RoutineListAgentSummary>([
|
||||
["a1", { name: "CodexCoder", icon: null }],
|
||||
["a2", { name: "Digest Bot", icon: null }],
|
||||
]);
|
||||
|
||||
type Group = { key: string; label: string | null; items: RoutineListRowItem[] };
|
||||
|
||||
const GROUPS: Group[] = [
|
||||
{
|
||||
key: "p1",
|
||||
label: "Board UI",
|
||||
items: [
|
||||
{ id: "r1", title: "Weekly digest", status: "active", projectId: "p1", assigneeAgentId: "a2", lastRun: { triggeredAt: "2026-06-09T08:00:00Z", status: "succeeded" } },
|
||||
{ id: "r2", title: "Triage stale issues", status: "active", projectId: "p1", assigneeAgentId: "a1", lastRun: { triggeredAt: "2026-06-08T08:00:00Z", status: "succeeded" } },
|
||||
{ id: "r3", title: "Nightly changelog draft", status: "paused", projectId: "p1", assigneeAgentId: "a1", lastRun: null },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "p2",
|
||||
label: "Growth",
|
||||
items: [
|
||||
{ id: "r4", title: "Lead enrichment sweep", status: "active", projectId: "p2", assigneeAgentId: "a1", lastRun: { triggeredAt: "2026-06-09T06:00:00Z", status: "running" } },
|
||||
{ id: "r5", title: "Outbound follow-ups", status: "active", projectId: "p2", assigneeAgentId: "a2", lastRun: { triggeredAt: "2026-06-07T06:00:00Z", status: "failed" } },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
function GroupedList() {
|
||||
const [collapsed, setCollapsed] = useState<string[]>([]);
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl p-6">
|
||||
<div className="flex flex-col gap-3">
|
||||
{GROUPS.map((group) => {
|
||||
const isOpen = !collapsed.includes(group.key);
|
||||
return (
|
||||
<Collapsible
|
||||
key={group.key}
|
||||
open={isOpen}
|
||||
onOpenChange={(open) =>
|
||||
setCollapsed((prev) => (open ? prev.filter((k) => k !== group.key) : [...prev, group.key]))
|
||||
}
|
||||
>
|
||||
{group.label ? (
|
||||
<div className={`flex items-center gap-2 rounded-lg border border-border px-3 py-2${isOpen ? " mb-1" : ""}`}>
|
||||
<CollapsibleTrigger className="flex items-center gap-1.5">
|
||||
<ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform [[data-state=open]>&]:rotate-90" />
|
||||
<span className="text-sm font-semibold uppercase tracking-wide">{group.label}</span>
|
||||
</CollapsibleTrigger>
|
||||
<span className="text-xs text-muted-foreground">{group.items.length}</span>
|
||||
</div>
|
||||
) : null}
|
||||
<CollapsibleContent>
|
||||
{group.items.map((routine) => (
|
||||
<RoutineListRow
|
||||
key={routine.id}
|
||||
routine={routine}
|
||||
projectById={projectById}
|
||||
agentById={agentById}
|
||||
runningRoutineId={null}
|
||||
statusMutationRoutineId={null}
|
||||
href={`#${routine.id}`}
|
||||
runNowButton
|
||||
divider={false}
|
||||
onRunNow={() => {}}
|
||||
onToggleEnabled={() => {}}
|
||||
onToggleArchived={() => {}}
|
||||
/>
|
||||
))}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const meta: Meta<typeof GroupedList> = {
|
||||
title: "Product/Routines · List (grouped cards)",
|
||||
component: GroupedList,
|
||||
parameters: { layout: "fullscreen" },
|
||||
};
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof GroupedList>;
|
||||
|
||||
export const GroupedCards: Story = {};
|
||||
Reference in New Issue
Block a user