@dxos/plugin-routine 0.0.0

package/src/components/MasterDetail/MasterDetail.stories.tsx

@@ -0,0 +1,100 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Atom } from '@effect-atom/atom-react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
+import React, { useState } from 'react';
+
+import { Panel, ScrollArea } from '@dxos/react-ui';
+import { Form } from '@dxos/react-ui-form';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { MasterDetail, type MasterDetailIcon } from './MasterDetail';
+
+type Row = { id: string; label: string };
+
+const ROWS: Row[] = [
+  { id: '1', label: 'Daily digest' },
+  { id: '2', label: 'Sync inbox' },
+  { id: '3', label: 'Weekly report' },
+];
+
+const DetailSchema = Schema.Struct({
+  name: Schema.String.annotations({ title: 'Name' }),
+  description: Schema.optional(Schema.String).annotations({ title: 'Description' }),
+});
+
+// Mirrors RoutineForm's gutter (Form.Viewport owns a `Column.Root` gutter); used to check list/detail alignment.
+const MockDetail = ({ row }: { row: Row }) => (
+  <Form.Root schema={DetailSchema} values={{ name: row.label, description: '' }}>
+    <Form.Viewport>
+      <Form.Content>
+        <Form.FieldSet />
+      </Form.Content>
+    </Form.Viewport>
+  </Form.Root>
+);
+
+const getIcon = (_get: Atom.Context): MasterDetailIcon => ({ icon: 'ph--lightning--regular' });
+
+const DefaultStory = () => {
+  const [selectedId, setSelectedId] = useState<string | undefined>('1');
+  const selected = ROWS.find((row) => row.id === selectedId);
+
+  return (
+    <Panel.Root>
+      <Panel.Content asChild className='pt-trim-md'>
+        <ScrollArea.Root orientation='vertical'>
+          <ScrollArea.Viewport>
+            <MasterDetail<Row>
+              classNames='dx-document'
+              items={ROWS}
+              selectedId={selectedId}
+              onSelect={setSelectedId}
+              getLabel={(_get, row) => row.label}
+              getIcon={getIcon}
+              detail={selected ? <MockDetail row={selected} /> : null}
+              emptyLabel='No items'
+            />
+          </ScrollArea.Viewport>
+        </ScrollArea.Root>
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-routine/components/MasterDetail',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: { layout: 'fullscreen', translations },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Empty: Story = {
+  render: () => (
+    <Panel.Root>
+      <Panel.Content asChild className='pt-trim-md'>
+        <ScrollArea.Root orientation='vertical'>
+          <ScrollArea.Viewport>
+            <MasterDetail<Row>
+              classNames='dx-document'
+              items={[]}
+              getLabel={(_get, row) => row.label}
+              emptyLabel='No items'
+            />
+          </ScrollArea.Viewport>
+        </ScrollArea.Root>
+      </Panel.Content>
+    </Panel.Root>
+  ),
+};

package/src/components/MasterDetail/MasterDetail.tsx

@@ -0,0 +1,175 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
+import React, { type ReactNode, useMemo } from 'react';
+
+import { Column, Icon, IconBlock, IconButton, type ThemedClassName, Tooltip, useTranslation } from '@dxos/react-ui';
+import { Empty, OrderedList } from '@dxos/react-ui-list';
+import { type ActionGraphProps, Menu, useMenuBuilder } from '@dxos/react-ui-menu';
+import { getStyles } from '@dxos/ui-theme';
+
+import { meta } from '#meta';
+
+// Prototype master-detail layout, candidate to push down into @dxos/react-ui-list as a reusable
+// component. Presentation-only: a selectable list (master) on top of a single detail pane, with an
+// optional empty state. The parent owns the detail content (the selected item's form, a draft form,
+// etc.) and the selection state.
+
+export type MasterDetailRecord = { id: string };
+
+/** A row's leading icon: same shape as {@link Obj.getIcon} — a Phosphor icon name and an optional hue. */
+export type MasterDetailIcon = { icon: string; hue?: string };
+
+/** A row's trailing adornment: a status icon with a tooltip label (e.g. a 'detached' warning badge). */
+export type MasterDetailAdornment = { icon: string; label: string };
+
+const EMPTY_MENU: ActionGraphProps = { nodes: [], edges: [] };
+
+export type MasterDetailProps<T extends MasterDetailRecord> = ThemedClassName<{
+  items: readonly T[];
+  /** Currently highlighted row; `undefined` clears the selection (e.g. while a draft is active). */
+  selectedId?: string;
+  onSelect?: (id: string | undefined) => void;
+  /**
+   * Build the row's label reactively. Run inside an atom so it can subscribe to the item's state via `get`
+   * (e.g. the object's name) and update live when it changes.
+   */
+  getLabel: (get: Atom.Context, item: T) => string;
+  /**
+   * Build the row's leading icon reactively. Run inside an atom so it can subscribe to the item's state via
+   * `get` (e.g. colour the icon by an `enabled` flag); returns the icon name and optional colour classes.
+   */
+  getIcon?: (get: Atom.Context, item: T) => MasterDetailIcon | undefined;
+  /**
+   * Build the row's trailing adornment reactively (e.g. a status badge). Run inside an atom so it can subscribe
+   * to the item's state via `get`; returns a Phosphor icon name and a tooltip label, or `undefined` for none.
+   */
+  getAdornment?: (get: Atom.Context, item: T) => MasterDetailAdornment | undefined;
+  /**
+   * Build the per-row overflow (three-dots) menu. Run inside each row's `useMenuBuilder`, so it should
+   * subscribe to that item's reactive state via `get` (e.g. an `enabled` flag) — the menu then updates live
+   * without re-rendering the whole list.
+   */
+  getMenu?: (get: Atom.Context, item: T) => ActionGraphProps;
+  /** Message shown when there are no items. */
+  emptyLabel?: string;
+  /** Detail pane content (selected item's form, draft form, …); rendered below the list. */
+  detail?: ReactNode;
+}>;
+
+/** Selectable master list (with an optional per-row overflow menu) above a parent-supplied detail pane. */
+export const MasterDetail = <T extends MasterDetailRecord>({
+  classNames,
+  items,
+  selectedId,
+  onSelect,
+  getLabel,
+  getIcon,
+  getAdornment,
+  getMenu,
+  emptyLabel,
+  detail,
+}: MasterDetailProps<T>) => {
+  // The gutter is owned by a `Column.Root` (not an ad-hoc wrapper) so the list aligns to the surface's
+  // column system: rows and their selection highlight sit in the centre track (`Column.Center`), matching
+  // the inset of the detail's form. The detail bleeds the full width since its own `Form` owns its gutter.
+  return (
+    <Column.Root gutter='sm' classNames={classNames}>
+      <Column.Center>
+        {(items.length === 0 && <Empty label={emptyLabel} />) || (
+          <OrderedList.Root<T> items={items}>
+            {({ items }) => (
+              <OrderedList.Content>
+                {items.map((item) => (
+                  <MasterDetailRow
+                    key={item.id}
+                    item={item}
+                    selected={item.id === selectedId}
+                    getLabel={getLabel}
+                    getIcon={getIcon}
+                    getAdornment={getAdornment}
+                    getMenu={getMenu}
+                    onSelect={onSelect}
+                  />
+                ))}
+              </OrderedList.Content>
+            )}
+          </OrderedList.Root>
+        )}
+      </Column.Center>
+
+      <div className='col-span-full pt-trim-md'>{detail}</div>
+    </Column.Root>
+  );
+};
+
+type MasterDetailRowProps<T extends MasterDetailRecord> = {
+  item: T;
+  selected: boolean;
+  getLabel: (get: Atom.Context, item: T) => string;
+  getIcon?: (get: Atom.Context, item: T) => MasterDetailIcon | undefined;
+  getAdornment?: (get: Atom.Context, item: T) => MasterDetailAdornment | undefined;
+  getMenu?: (get: Atom.Context, item: T) => ActionGraphProps;
+  onSelect?: (id: string | undefined) => void;
+};
+
+const MasterDetailRow = <T extends MasterDetailRecord>({
+  item,
+  selected,
+  getLabel,
+  getIcon,
+  getAdornment,
+  getMenu,
+  onSelect,
+}: MasterDetailRowProps<T>) => {
+  const { t } = useTranslation(meta.profile.key);
+  // Resolve the label, icon, adornment, and actions reactively per row — each subscribes (via `get`) only to
+  // this item's state, so a change (rename, toggling enabled) updates just this row.
+  const label = useAtomValue(useMemo(() => Atom.make((get) => getLabel(get, item)), [getLabel, item]));
+  const icon = useAtomValue(useMemo(() => Atom.make((get) => getIcon?.(get, item)), [getIcon, item]));
+  const adornment = useAtomValue(useMemo(() => Atom.make((get) => getAdornment?.(get, item)), [getAdornment, item]));
+  const menu = useMenuBuilder((get) => getMenu?.(get, item) ?? EMPTY_MENU, [getMenu, item]);
+
+  return (
+    <OrderedList.Item
+      id={item.id}
+      item={item}
+      canDrag={false}
+      hover
+      selected={selected}
+      classNames='flex items-center cursor-pointer p-1'
+      onClick={() => onSelect?.(selected ? undefined : item.id)}
+    >
+      {icon && (
+        <IconBlock>
+          <Icon icon={icon.icon} classNames={icon.hue ? getStyles(icon.hue).text : undefined} />
+        </IconBlock>
+      )}
+      <span className='grow truncate'>{label}</span>
+      {adornment && (
+        <Tooltip.Provider>
+          <Tooltip.Trigger asChild side='bottom' content={adornment.label}>
+            <Icon icon={adornment.icon} />
+          </Tooltip.Trigger>
+        </Tooltip.Provider>
+      )}
+      {getMenu && (
+        <Menu.Root {...menu}>
+          <Menu.Trigger asChild>
+            <IconButton
+              iconOnly
+              variant='ghost'
+              icon='ph--dots-three-vertical--regular'
+              label={t('routine-actions.label')}
+              // Open the menu without toggling row selection.
+              onClick={(event) => event.stopPropagation()}
+            />
+          </Menu.Trigger>
+          <Menu.Content />
+        </Menu.Root>
+      )}
+    </OrderedList.Item>
+  );
+};

package/src/components/MasterDetail/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './MasterDetail';

package/src/components/RoutineForm/RoutineForm.tsx

@@ -0,0 +1,293 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import React, { type PropsWithChildren, useCallback, useMemo } from 'react';
+
+import { Instructions, Operation, Trigger } from '@dxos/compute';
+import { type Database, DXN, Entity, Filter, Obj, Query, Ref, Scope, Type } from '@dxos/echo';
+import { useObject, useQuery } from '@dxos/react-client/echo';
+import { ToggleGroup, ToggleGroupItem, useTranslation } from '@dxos/react-ui';
+import { Form, type FormFieldMap, RefField } from '@dxos/react-ui-form';
+
+import { meta } from '#meta';
+import { Routine } from '#types';
+
+import { InstructionsEditor } from '../InstructionsEditor';
+import { TriggerEditor } from '../TriggerEditor';
+
+//
+// Main (general) form — the outer form; actions and triggers are sub-forms within its content.
+//
+
+// Pick the editable general fields from the Routine schema rather than redeclaring them.
+const GeneralForm = Type.getSchema(Routine.Routine).pipe(Schema.pick('name', 'description'));
+type GeneralForm = Schema.Schema.Type<typeof GeneralForm>;
+
+export type RoutineFormProps = {
+  db: Database.Database;
+  routine: Routine.Routine;
+  /** Render the form for display only (e.g. an enabled routine, locked until disabled). */
+  readonly?: boolean;
+  /** Commit the edit session; when set, the form renders a Save/Cancel action row (the companion's create flow). */
+  onSave?: () => void;
+  /** Discard the edit session. */
+  onCancel?: () => void;
+};
+
+/**
+ * Composite routine form: the general fields (name + description) are the outer {@link Form},
+ * with the Actions and Triggers sections rendered as sub-forms inside its content:
+ * - Actions — Operation/Instructions variants chosen via a button group (single action; `spec` isn't an array).
+ * - Triggers — the {@link TriggerEditor}.
+ *
+ * The sub-forms read and autosave the routine's owned instructions and primary trigger directly off the
+ * `routine` graph (live editing); `readonly` displays them without edit affordances. The optional Save/Cancel
+ * row is used only by the companion's create-from-template flow.
+ */
+export const RoutineForm = ({ db, routine, readonly = false, onSave, onCancel }: RoutineFormProps) => {
+  const { t } = useTranslation(meta.profile.key);
+  const [auto, updateAuto] = useObject(routine);
+  const trigger = usePrimaryTrigger(routine);
+
+  // Read once per routine identity; the uncontrolled form owns edits after mount.
+  const defaultValues = useMemo<Partial<GeneralForm>>(
+    () => ({ name: auto.name, description: auto.description }),
+    [routine],
+  );
+  const handleValuesChanged = useCallback(
+    (values: Partial<GeneralForm>) => {
+      updateAuto((routine) => {
+        routine.name = values.name;
+        routine.description = values.description;
+      });
+    },
+    [updateAuto],
+  );
+
+  return (
+    <Form.Root
+      schema={GeneralForm}
+      readonly={readonly}
+      defaultValues={defaultValues}
+      onValuesChanged={handleValuesChanged}
+      onSave={onSave}
+      onCancel={onCancel}
+    >
+      <Form.Viewport scroll>
+        <Form.Content>
+          <Form.FieldSet />
+
+          <Section title={t('actions.title')}>
+            <ActionEditor db={db} routine={routine} readonly={readonly} />
+          </Section>
+
+          <Section title={t('triggers.title')}>
+            <TriggerEditor db={db} routine={routine} trigger={trigger} readonly={readonly} />
+          </Section>
+
+          {/* Save/Cancel for the edit session (the sub-forms autosave to the in-memory clones as they change). */}
+          {onSave && <Form.Actions />}
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
+  );
+};
+
+/** Lightweight labelled grouping for a sub-form (no `Settings` chrome). */
+const Section = ({ title, children }: PropsWithChildren<{ title: string }>) => (
+  <div role='none' className='flex flex-col mbs-4'>
+    <Form.Label standalone label={title} />
+    {children}
+  </div>
+);
+
+//
+// Actions
+//
+
+/**
+ * Single action: an Operation (the routine's `spec.runnable`) or an owned Instructions edited inline. The
+ * action kind is derived from the routine's `spec` — an absent spec means "operation, none chosen yet" (a
+ * scaffolded routine always carries an instructions spec, so the only way to clear it is switching to an
+ * operation). `Routine.make` establishes the owned-instructions wiring when the routine is scaffolded.
+ */
+const ActionEditor = ({
+  db,
+  routine: routineProp,
+  readonly,
+}: {
+  db: Database.Database;
+  routine: Routine.Routine;
+  readonly?: boolean;
+}) => {
+  const operations = useOperations(db);
+  const [routine, updateRoutine] = useObject(routineProp);
+
+  // Classification is read off `spec.kind` (no dereference); the owned instructions object is then resolved in
+  // place to hand to the editor (an owned ref is always locally resolvable, and the parent `useObject` re-renders
+  // this when `spec` changes). An absent spec means "runnable, none chosen yet" — a scaffolded routine always
+  // carries an instructions spec, so the only way to clear it is switching to a runnable action.
+  const kind = routine.spec?.kind ?? 'runnable';
+  const operationRef = Routine.runnableRef(routine);
+  const instructions = Routine.instructionsRef(routine)?.target;
+
+  const handleOperationChange = useCallback(
+    (operation?: Ref.Ref<Operation.PersistentOperation>) => {
+      updateRoutine((routine) => {
+        routine.spec = operation ? { kind: 'runnable', runnable: operation } : undefined;
+      });
+      // Keep the owned trigger's `function`/`input` in sync with the new action.
+      Routine.wireTriggers(routineProp);
+    },
+    [updateRoutine, routineProp],
+  );
+
+  const handleKindChange = useCallback(
+    (next: Routine.Kind) => {
+      updateRoutine((routine) => {
+        if (next === 'runnable') {
+          // Switch to an operation action; the operation is chosen via the picker below. A previously-owned
+          // instructions stays parented to the routine (cascade-deleted with it) but is no longer the action.
+          routine.spec = undefined;
+        } else if (routine.spec?.kind !== 'instructions') {
+          // Seed an owned instructions action (the executing operation is the implicit RunInstructions).
+          const instructions = Instructions.make({});
+          Obj.setParent(instructions, routine);
+          routine.spec = { kind: 'instructions', instructions: Ref.make(instructions) };
+        }
+      });
+      // Re-wire the owned trigger to dispatch the new action (RunInstructions vs the operation).
+      Routine.wireTriggers(routineProp);
+    },
+    [updateRoutine, routineProp],
+  );
+
+  return (
+    <div role='none' className='flex flex-col'>
+      {!readonly && <ActionKindToggle value={kind} onChange={handleKindChange} />}
+      {kind === 'runnable' ? (
+        <OperationEditor
+          db={db}
+          operations={operations}
+          operation={operationRef}
+          onChange={handleOperationChange}
+          readonly={readonly}
+        />
+      ) : instructions ? (
+        <InstructionsEditor db={db} instructions={instructions} readonly={readonly} />
+      ) : null}
+    </div>
+  );
+};
+
+const ActionKindToggle = ({ value, onChange }: { value: Routine.Kind; onChange: (kind: Routine.Kind) => void }) => {
+  const { t } = useTranslation(meta.profile.key);
+  return (
+    // `type='single'` emits `''` when the selected item is clicked again (toggled off); ignore that and any
+    // other non-kind value so it can't fall through and overwrite the current action.
+    <ToggleGroup
+      type='single'
+      value={value}
+      onValueChange={(next) => {
+        if (next === 'instructions' || next === 'runnable') {
+          onChange(next);
+        }
+      }}
+    >
+      <ToggleGroupItem value='instructions'>{t('action-kind.instructions.label')}</ToggleGroupItem>
+      <ToggleGroupItem value='runnable'>{t('action-kind.operation.label')}</ToggleGroupItem>
+    </ToggleGroup>
+  );
+};
+
+const OperationActionForm = Schema.Struct({
+  operation: Ref.Ref(Operation.PersistentOperation).pipe(Schema.annotations({ title: 'Operation' }), Schema.optional),
+});
+type OperationActionValues = Schema.Schema.Type<typeof OperationActionForm>;
+
+// Operation picker options: surface each operation's registry key (plugin/id) as the option's secondary
+// line and sort by name. The `id` derivation mirrors the RefField default so a selected operation ref
+// still matches its option.
+const getOperationOptions = (results: Entity.Any[]): { id: string; label: string; description?: string }[] =>
+  results
+    // Hide internal operations: only operations annotated visible are user-bindable as trigger actions.
+    .filter((operation) => !Obj.instanceOf(Operation.PersistentOperation, operation) || Operation.isVisible(operation))
+    .map((operation) => {
+      const id = Entity.getURI(operation, { prefer: 'named' });
+      const name = Entity.getLabel(operation) ?? id;
+      const key = Obj.instanceOf(Operation.PersistentOperation, operation) ? Operation.getKey(operation) : undefined;
+      return { id, label: name, description: key };
+    })
+    .sort((left, right) => left.label.localeCompare(right.label));
+
+/** Sub-form: ref picker for an Operation. Draws options from the queried operation set (space + registry). */
+const OperationEditor = ({
+  db,
+  operations,
+  operation,
+  onChange,
+  readonly,
+}: {
+  db: Database.Database;
+  operations: ReturnType<typeof useOperations>;
+  operation?: Ref.Ref<Operation.PersistentOperation>;
+  onChange?: (operation?: Ref.Ref<Operation.PersistentOperation>) => void;
+  readonly?: boolean;
+}) => {
+  const fieldMap = useMemo<FormFieldMap>(
+    () => ({
+      operation: (props) => (
+        <RefField {...props} db={db} useResults={() => operations} getOptions={getOperationOptions} />
+      ),
+    }),
+    [db, operations],
+  );
+  const defaultValues = useMemo<Partial<OperationActionValues>>(() => ({ operation }), [operation]);
+  const handleValuesChanged = useCallback(
+    (values: Partial<OperationActionValues>) => onChange?.(values.operation),
+    [onChange],
+  );
+
+  return (
+    <Form.Root
+      schema={OperationActionForm}
+      db={db}
+      readonly={readonly}
+      defaultValues={defaultValues}
+      fieldMap={fieldMap}
+      onValuesChanged={handleValuesChanged}
+    >
+      <Form.FieldSet />
+    </Form.Root>
+  );
+};
+
+//
+// Hooks
+//
+
+/** Operations available to bind as an action (space-resident plus registry / plugin-provided). */
+const useOperations = (db: Database.Database) =>
+  useQuery(
+    db,
+    Query.select(Filter.type(DXN.make(Type.getTypename(Operation.PersistentOperation)))).from(
+      Scope.space(),
+      Scope.registry(),
+    ),
+  );
+
+/** Subscribe to the routine and derive its primary (first) trigger. */
+const usePrimaryTrigger = (routine: Routine.Routine): Trigger.Trigger | undefined => {
+  const [snapshot] = useObject(routine);
+  return useMemo(() => {
+    for (const ref of snapshot.triggers) {
+      const target = ref.target;
+      if (Obj.instanceOf(Trigger.Trigger, target)) {
+        return target;
+      }
+    }
+    return undefined;
+  }, [snapshot.triggers]);
+};

package/src/components/RoutineForm/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './RoutineForm';

package/src/components/Schedule/Schedule.stories.tsx

@@ -0,0 +1,73 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { Schedule, type ScheduleValue } from './Schedule';
+
+const DefaultStory = ({ initial, minInterval }: { initial: ScheduleValue; minInterval?: number }) => {
+  const [value, setValue] = useState<ScheduleValue>(initial);
+
+  return (
+    <div className='p-4 flex flex-col gap-3'>
+      <Schedule.Root
+        classNames='bg-card-surface border border-separator rounded-sm p-2'
+        timezone='EDT'
+        minInterval={minInterval}
+        value={value}
+        onValueChange={setValue}
+      >
+        <Schedule.Header />
+        <Schedule.Kind />
+        <Schedule.Body />
+      </Schedule.Root>
+      <div className='flex flex-col gap-1'>
+        <p className='text-xs text-subdued'>Value</p>
+        <pre className='font-mono text-sm bg-base-surface rounded p-2 whitespace-pre-wrap'>
+          {JSON.stringify(value, null, 2)}
+        </pre>
+      </div>
+    </div>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-routine/components/Schedule',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Weekly: Story = {
+  args: { initial: { kind: 'weekly', time: '09:00', days: ['mon'] } },
+};
+
+export const Hourly: Story = {
+  args: { initial: { kind: 'hourly', minute: 0 } },
+};
+
+export const Monthly: Story = {
+  args: { initial: { kind: 'monthly', day: 1, time: '09:00' } },
+};
+
+export const Custom: Story = {
+  args: { initial: { kind: 'custom', cron: '0 9 * * MON-FRI' } },
+};
+
+// A 5-minute minimum clamps a too-frequent custom cron (`* * * * *` -> `*/5 * * * *`).
+export const MinInterval: Story = {
+  args: { initial: { kind: 'custom', cron: '* * * * *' }, minInterval: 300 },
+};