[austinpickett]

What

Adds Cron Blueprints to the desktop GUI. The desktop app had a Cron jobs panel but no Blueprints tab, so the parameterized automation templates the dashboard offers were unreachable there (parity matrix: Dashboard=Y, GUI=N). This closes that gap.

Changes

• Jobs/Blueprints segmented toggle in the cron panel header; the header now always renders so Blueprints is reachable even with zero jobs.
• BlueprintsPanel (apps/desktop/src/app/cron/blueprints.tsx): fetches the catalog from the existing GET /api/cron/blueprints, one card per template with an inline typed form (time / enum / weekdays / text slots). Submitting POSTs to /api/cron/blueprints/instantiate, which fills the slots and creates a real cron job via the same create_job path as a hand-written one. The created job is merged into the shared $cronJobs atom so the Jobs tab and sidebar reflect it immediately.
• API clients getAutomationBlueprints() / instantiateAutomationBlueprint() in hermes.ts (profile-scoped, matching the sibling cron endpoints) plus the AutomationBlueprint / AutomationBlueprintField types.
• i18n: cron.tabs.* and cron.blueprints.* added to the canonical Translations interface (i18n/types.ts) and all four locales (en/ja/zh/zh-hant).
• Unit test for the pure initialBlueprintValues helper.

Backend already served both endpoints; this is desktop frontend only. No backend or schema changes.

Testing

tsc -p . --noEmit is clean for all changed files locally. Full lint + vitest to be run in CI / on a machine with a native-matching install (the WSL /mnt/c dev environment can't complete a usable npm install).

[github-actions]

૮ >ﻌ< ა ci review

_{ran on 530ac4a}

ℹ️ Info

Desktop E2E visual evidence · View test artifacts · View job

1 visual diff.

_{inline evidence upload failed.}

Failed to upload diff-665a0833239e-onboarding-overlay-diff.png with gh image (exit code 1): Error uploading /home/runner/work/_temp/e2e-evidence/diff-665a0833239e-onboarding-overlay-diff.png: step 0 (get upload token): uploadToken not found on repo page — do you have write access to NousResearch/hermes-agent? (or, if NousResearch enforces SAML SSO, authorize at https://github.com/orgs/NousResearch/sso)

[OutThisLife]

Approve. Verified against the backend: getAutomationBlueprints/instantiateAutomationBlueprint hit real routes (GET /api/cron/blueprints, POST /api/cron/blueprints/instantiate?profile=), the AutomationBlueprint/Field types mirror blueprint_catalog_entry, and instantiate creates a real job via the same create_job path. Real parity gap with the dashboard's AutomationBlueprints.tsx.

The origin→local deliver remap (the shared catalog defaults to a dashboard-only origin target desktop lacks) is the right call and is unit-tested; the created job is merged into the shared $cronJobs atom so Jobs/sidebar update immediately. Full i18n + types.

Advances #67144.

[OutThisLife]

Code's approved — one UI consistency pass before it lands. Each of these pages currently draws its items its own way (the cron Jobs tab, this Blueprints tab, and the Webhooks PR each differ), and we already have the item pattern set elsewhere. This PR is much closer than the webhooks one — it already uses PanelPill, PanelEmpty, PageLoader, useQuery, and the shared Select/Input/Button — so just a couple of things:

• Card container. BlueprintCard is a bespoke <div className=\"rounded-md bg-foreground/5 p-3\">. The token's right, but it's a third item shape living inside the same Panel as the Jobs list. If the app has a card idiom the dashboard's AutomationBlueprints already uses, mirror that; otherwise at least keep it visually in the Panel family rather than a standalone card look.

• Form fields. The inline form uses raw <label> + <Input> rows. There's a shared field primitive in app/settings/primitives.tsx (ListRow) used by settings/messaging — reuse it so the slot form matches the rest of the app's forms.

The origin→local deliver handling and the merge-into-$cronJobs behavior are all good — this is purely about the item/form chrome matching the neighboring surfaces.

[OutThisLife]

Logic's good, requesting changes on the UI layer to match the neighboring surfaces — details in my comment above: the bespoke BlueprintCard container (a third item shape inside the same Panel) and the raw <label>+<Input> rows vs. the shared ListRow field primitive.

[austinpickett]

Both addressed in 81e8d0f.

• Card container: dropped the standalone bg-foreground/5 for bg-(--ui-bg-quinary), the shared in-panel grouping token the cron editor already uses, so the cards read as Panel family. The dashboard's Card/CardContent is its own web UI lib and does not exist in the desktop app, so I matched the desktop's in-surface grouping instead of porting it.
• Form fields: the slot form now uses the shared ListRow from settings/primitives (label + help on the left, control on the right, stacks in a narrow pane), same as settings/messaging.

No behavior change. typecheck clean, blueprint tests green.

[OutThisLife]

Re-reviewed — both addressed. The blueprint slot form now uses the shared ListRow primitive (label + help left, control right) so it matches the settings/messaging forms, and the card sits in the Panel family via the shared bg-(--ui-bg-quinary) grouping token instead of a bespoke card look. PanelPill/PanelEmpty/PageLoader/useQuery were already right, and the origin→local deliver handling + merge-into-$cronJobs are intact. CI green. Good to go.

[OutThisLife]

Ran the merged build with seeded data and looked at the Blueprints tab directly — the form fields moved to ListRow, but the card + form flow still doesn't match the app. A few things:

1. Card should be the shared card primitive. The card hand-rolls rounded-md bg-(--ui-bg-quinary) p-3 — no border, no hover, its own radius/padding. Every other card surface in the app (theme picker, pet picker, gateway/profile cards, marketplace, pet-generate) uses selectableCardClass() from lib/selectable-card.ts, which is rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) hover:bg-(--chrome-action-hover). That mismatch (borderless rounded-md vs bordered rounded-lg) is why the padding/weight reads differently from the rest of the UI. Use selectableCardClass({ prominent: true }) and let the caller own padding to match the neighbors (p-2).

2. Drop the "Set up" accordion and the divider — put the form in the dialog this panel already uses. The expand-in-place form (with the border-t border-border/60 divider) isn't a pattern used anywhere else. This exact panel already has the canonical "fill parameters → create a cron job" component: CronEditorDialog (opened by manual New cron), and the sibling Webhooks PR puts its create form in a Dialog too. A blueprint card should just open that dialog pre-filled with the blueprint's slots on click. That removes the "Set up" toggle, removes the inline divider, and makes blueprint creation look/behave like every other create form in the app.

3. PanelBody misuse (minor). PanelBody is the master/detail flex-row container; the blueprints tab puts a single column in it and then re-declares its own scroller (flex flex-col gap-2 overflow-y-auto pr-1). Render the gallery column directly (or via PanelDetail) rather than nesting a scroller inside the master/detail row.

The logic (origin→local deliver, merge into $cronJobs, react-query) is all fine — this is the presentation layer still going its own way on the card + form.

[OutThisLife]

Fuller pass on apps/desktop/src/app/cron/blueprints.tsx against the cron page's own patterns and apps/desktop/DESIGN.md. Logic (origin->local, desktopDeliverOptions, merge into $cronJobs, react-query) is fine — this is the card/form presentation still diverging.

1. Card isn't the shared card primitive. BlueprintCard uses <div className="rounded-md bg-(--ui-bg-quinary) p-3"> — no border, rounded-md, its own padding. Every card surface (theme/pet/gateway/profile/marketplace) uses selectableCardClass() from lib/selectable-card.ts (rounded-lg border border-(--ui-stroke-tertiary) ... hover:bg-(--chrome-action-hover)). DESIGN.md Principle 5: "Variants and sizes own padding, radius, color, chrome. Call sites pass a variant/size, not className overrides that re-specify those."

2. Drop the "Set up"/"Cancel" accordion — use the dialog this panel already has. The canonical "fill parameters -> create a cron job" form is CronEditorDialog (opened by manual New cron): a Dialog (max-w-lg) with Field/FieldHint, grid gap-4, and a DialogFooter. A blueprint card should open that same dialog pre-filled with the blueprint's slots on click, not expand an inline form behind a toggle.

3. Remove the border-t border-border/60 divider. This is a direct DESIGN.md violation twice over:

   • Principle 1 (Flat, not boxed): "No divider borders inside a panel. Group with whitespace and a single hairline." The rows section repeats it: "No dividers between rows unless the list genuinely needs them; prefer spacing." The mt-3 gap already separates the form.
   • Principle 4 (Tokens, not literals): even where an in-panel hairline is warranted, DESIGN.md names --ui-stroke-tertiary as "the default in-panel divider / list hairline." border-border/60 is a raw opacity literal; the checklist wants "zero raw colors."

4. Use Field/FieldHint, not ListRow, for the slots. The peer cron editor lays fields out with Field (label above the control, grid gap-1.5). The blueprint form uses ListRow (label left / control right) with a <label> smuggled into the title. In the dialog, match the editor's Field.

5. Buttons are ad hoc. variant={open ? 'ghost' : 'outline'} toggling plus a bare <Button type="submit">. The editor uses DialogFooter with an outline Cancel + default submit. Once this is a dialog, adopt that footer.

6. Error rendering diverges. Blueprint shows a plain <p className="text-xs text-destructive">. The editor renders errors in the shared block (flex items-start gap-2 rounded-md bg-destructive/10 px-3 py-2 text-xs text-destructive + AlertTriangle). Reuse that.

7. PanelBody misuse. In index.tsx the blueprints tab renders <PanelBody><BlueprintsPanel/></PanelBody>, and BlueprintsPanel returns its own flex ... overflow-y-auto pr-1. PanelBody is the master/detail flex-row (gap-4/gap-5, flex-row when wide); a single gallery column nested in it inherits row layout it doesn't use, and re-invents PanelDetail's scroller with different padding (pr-1 vs pl-1 pr-2, gap-2 vs space-y-4). Render the gallery as a plain scroll region (or PanelDetail) rather than inside PanelBody.

8. Nit: line ~235 has a literal \u2014 inside a // comment (renders as backslash-u-2014, not an em-dash). Use a real character.

Net: dropping the divider and moving the form into the cron editor dialog resolves 2, 3, 4, 5, and 6 at once.

Superseded by the consolidated review below.

[austinpickett]

Reworked in 62ab52e. The blueprint UI now reuses the app's canonical pieces instead of a bespoke surface.

Key move: generalized CronEditorDialog with a blueprint mode rather than reusing it as-is. A blueprint can't share the raw-cron submit path (it fills typed slots server-side via instantiateAutomationBlueprint, which renders prompt+schedule), so EditorState now carries the blueprint + target profile, the dialog renders the slots with the same Field/FieldHint/DialogFooter/error-block chrome as manual New cron, and submit routes to instantiate. One dialog, one editor state machine. That resolves 2, 3, 4, 5, and 6 together, as you called out.

Point by point:

1. Card: selectableCardClass({ prominent: true }), caller owns padding (p-2), whole card is a button.
2. Accordion gone: cards open the shared dialog pre-filled on click.
3. Divider gone (no more border-t border-border/60).
4. Slots use Field/FieldHint, matching the editor.
5. DialogFooter with outline Cancel + default submit.
6. Errors use the shared bg-destructive/10 + AlertTriangle block.
7. Gallery renders via PanelDetail, not PanelBody.
8. Dropped the stray \u2014 literal.

i18n: dropped the now-unused blueprints.setUp/cancel, added blueprints.dialogDesc across en/ja/zh/zh-hant + types. Logic (origin->local, desktopDeliverOptions, merge into $cronJobs) unchanged and still unit-tested. typecheck + eslint + vitest green.

[OutThisLife]

Re-reviewed at 530ac4a with the same magnifying glass — all eight points are addressed, and cleanly:

• Card is now a selectableCardClass({ prominent: true }) button (no bespoke rounded-md div, no override chrome).
• The inline "Set up" accordion and the border-t divider are gone; a card click opens the shared CronEditorDialog via the new mode: 'blueprint'.
• Slots render with Field/FieldHint, errors use the shared rounded-md bg-destructive/10 ... AlertTriangle block, and the footer is the standard DialogFooter (outline Cancel + submit) — identical to the manual editor.
• PanelBody misuse fixed (BlueprintsPanel returns PanelDetail, rendered directly).
• The \u2014 comment literal is a real em-dash now.

Nice extras beyond the review: the shared DeliverSelect (backend-sourced targets for both dialogs) and the generic Select-in-Dialog dismissal fix (DialogPortalContainerContext + usePopoverPortalContainer, with repro + dialog tests) — that's the correct app-wide fix, not a one-off.

LGTM.