@dxos/plugin-routine 0.10.0 → 0.11.0

package/src/components/RoutineForm/RoutineForm.tsx

@@ -5,15 +5,15 @@
 import * as Schema from 'effect/Schema';
 import React, { type PropsWithChildren, useCallback, useMemo } from 'react';
 
-import { Instructions, Operation, Trigger } from '@dxos/compute';
+import { Instructions, Operation, Routine, 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 { useObject, useQuery } from '@dxos/echo-react';
+import { ToggleGroup, ToggleGroupItem, composable, composableProps, useTranslation } from '@dxos/react-ui';
 import { Form, type FormFieldMap, RefField } from '@dxos/react-ui-form';
 
 import { meta } from '#meta';
-import { Routine } from '#types';
 
+import { wireTriggers } from '../../util';
 import { InstructionsEditor } from '../InstructionsEditor';
 import { TriggerEditor } from '../TriggerEditor';
 
@@ -45,59 +45,67 @@ export type RoutineFormProps = {
  * 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.
+ *
+ * Created with `composable()` so it carries the COMPOSABLE marker and can be the child of
+ * `Panel.Content asChild` (forwards ref and merges layout props onto the scroll viewport).
  */
-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);
+export const RoutineForm = composable<HTMLDivElement, RoutineFormProps>(
+  ({ db, routine, readonly = false, onSave, onCancel, ...props }, forwardedRef) => {
+    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],
-  );
+    // Read once per routine identity; the uncontrolled form owns edits after mount.
+    const defaultValues = useMemo<Partial<GeneralForm>>(
+      () => ({ name: auto.name, description: auto.description }),
+      [routine],
+    );
 
-  return (
-    <Form.Root
-      schema={GeneralForm}
-      readonly={readonly}
-      defaultValues={defaultValues}
-      onValuesChanged={handleValuesChanged}
-      onSave={onSave}
-      onCancel={onCancel}
-    >
-      <Form.Viewport scroll>
-        <Form.Content>
-          <Form.FieldSet />
+    const handleValuesChanged = useCallback(
+      (values: Partial<GeneralForm>) => {
+        updateAuto((routine) => {
+          routine.name = values.name;
+          routine.description = values.description;
+        });
+      },
+      [updateAuto],
+    );
 
-          <Section title={t('actions.title')}>
-            <ActionEditor db={db} routine={routine} readonly={readonly} />
-          </Section>
+    // TODO(burdon): Could this be rewritten a single form with custom fields?
+    return (
+      <Form.Root
+        schema={GeneralForm}
+        readonly={readonly}
+        defaultValues={defaultValues}
+        onValuesChanged={handleValuesChanged}
+        onSave={onSave}
+        onCancel={onCancel}
+      >
+        <Form.Viewport scroll {...composableProps(props)} ref={forwardedRef}>
+          <Form.Content>
+            <Form.FieldSet />
 
-          <Section title={t('triggers.title')}>
-            <TriggerEditor db={db} routine={routine} trigger={trigger} readonly={readonly} />
-          </Section>
+            <Section title={t('actions.title')}>
+              <ActionEditor db={db} routine={routine} 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>
-  );
-};
+            {/* TODO(burdon): Support multiple triggers. */}
+            <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'>
+  <div className='flex flex-col mbs-4'>
     <Form.Label standalone label={title} />
     {children}
   </div>
@@ -111,7 +119,7 @@ const Section = ({ title, children }: PropsWithChildren<{ title: string }>) => (
  * 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.
+ * operation). `makeRoutine` establishes the owned-instructions wiring when the routine is scaffolded.
  */
 const ActionEditor = ({
   db,
@@ -139,7 +147,7 @@ const ActionEditor = ({
         routine.spec = operation ? { kind: 'runnable', runnable: operation } : undefined;
       });
       // Keep the owned trigger's `function`/`input` in sync with the new action.
-      Routine.wireTriggers(routineProp);
+      wireTriggers(routineProp);
     },
     [updateRoutine, routineProp],
   );
@@ -159,13 +167,13 @@ const ActionEditor = ({
         }
       });
       // Re-wire the owned trigger to dispatch the new action (RunInstructions vs the operation).
-      Routine.wireTriggers(routineProp);
+      wireTriggers(routineProp);
     },
     [updateRoutine, routineProp],
   );
 
   return (
-    <div role='none' className='flex flex-col'>
+    <div className='flex flex-col'>
       {!readonly && <ActionKindToggle value={kind} onChange={handleKindChange} />}
       {kind === 'runnable' ? (
         <OperationEditor

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

@@ -17,7 +17,7 @@ const DefaultStory = ({ initial, minInterval }: { initial: ScheduleValue; minInt
   return (
     <div className='p-4 flex flex-col gap-3'>
       <Schedule.Root
-        classNames='bg-card-surface border border-separator rounded-sm p-2'
+        classNames='dx-card-surface border border-separator rounded-sm p-2'
         timezone='EDT'
         minInterval={minInterval}
         value={value}

package/src/components/Schedule/Schedule.tsx

@@ -18,14 +18,9 @@ import { mx } from '@dxos/ui-theme';
 
 import { meta } from '#meta';
 
-import {
-  MAX_MIN_INTERVAL_SECONDS,
-  clampSchedule,
-  describeCron,
-  fromCron,
-  scheduleIntervalSeconds,
-  scheduleToCron,
-} from './cron';
+import { MAX_MIN_INTERVAL_SECONDS, clampSchedule, fromCron, scheduleIntervalSeconds, scheduleToCron } from './cron';
+import { type Day, Days } from './days';
+import { describeSchedule } from './describe-schedule';
 
 //
 // Value model.
@@ -40,21 +35,11 @@ export const ScheduleKinds = [
   'monthly',
   'custom',
 ] as const;
+
 export type ScheduleKind = (typeof ScheduleKinds)[number];
 
 const isScheduleKind = (value: string): value is ScheduleKind => (ScheduleKinds as readonly string[]).includes(value);
 
-export const Days = [
-  { value: 'mon', label: 'Mon' },
-  { value: 'tue', label: 'Tue' },
-  { value: 'wed', label: 'Wed' },
-  { value: 'thu', label: 'Thu' },
-  { value: 'fri', label: 'Fri' },
-  { value: 'sat', label: 'Sat' },
-  { value: 'sun', label: 'Sun' },
-] as const;
-export type Day = (typeof Days)[number]['value'];
-
 /** Discriminated schedule value. Times are `HH:mm` (24h); `once.date` is `YYYY-MM-DDTHH:mm`. */
 export type ScheduleValue =
   // | { kind: 'once'; date?: string }
@@ -471,57 +456,3 @@ const ScheduleEditor = ({ value, onChange }: { value: ScheduleValue; onChange: (
 //
 // Summary.
 //
-
-const DAY_NAMES: Record<Day, string> = {
-  mon: 'Monday',
-  tue: 'Tuesday',
-  wed: 'Wednesday',
-  thu: 'Thursday',
-  fri: 'Friday',
-  sat: 'Saturday',
-  sun: 'Sunday',
-};
-
-/** Format a `HH:mm` (24h) time as a 12-hour clock string, e.g. `9:00 AM`. */
-const formatTime = (time: string): string => {
-  const [h, m] = time.split(':').map(Number);
-  if (Number.isNaN(h) || Number.isNaN(m)) {
-    return time;
-  }
-
-  const period = h < 12 ? 'AM' : 'PM';
-  const hour = h % 12 === 0 ? 12 : h % 12;
-  return `${hour}:${String(m).padStart(2, '0')} ${period}`;
-};
-
-const withZone = (text: string, timezone?: string): string => (timezone ? `${text} ${timezone}` : text);
-
-/** Human-readable summary of the schedule, suitable for the header. */
-// TODO(wittjosiah): Just use cronstrue for all cases?
-export const describeSchedule = (value: ScheduleValue, timezone?: string): string => {
-  switch (value.kind) {
-    // case 'once':
-    //   return value.date
-    //     ? `Runs once at ${formatTime(value.date.slice(11))} on ${value.date.slice(0, 10)}`
-    //     : 'Runs once';
-    case 'hourly':
-      return `Runs every hour at minute ${value.minute}`;
-    case 'daily':
-      return withZone(`Runs every day at ${formatTime(value.time)}`, timezone);
-    case 'weekly': {
-      const days =
-        value.days.length === 0
-          ? 'no days'
-          : value.days.length === 1
-            ? DAY_NAMES[value.days[0]]
-            : Days.filter((d) => value.days.includes(d.value))
-                .map((d) => d.label)
-                .join(', ');
-      return withZone(`Runs every ${days} at ${formatTime(value.time)}`, timezone);
-    }
-    case 'monthly':
-      return withZone(`Runs monthly on day ${value.day} at ${formatTime(value.time)}`, timezone);
-    case 'custom':
-      return withZone(describeCron(value.cron), timezone);
-  }
-};

package/src/components/Schedule/days.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// Shared by `Schedule.tsx` and `describe-schedule.ts`: a value import between those two would close a
+// runtime cycle, and react-refresh only fast-refreshes a module whose exports are all components.
+
+export const Days = [
+  { value: 'mon', label: 'Mon' },
+  { value: 'tue', label: 'Tue' },
+  { value: 'wed', label: 'Wed' },
+  { value: 'thu', label: 'Thu' },
+  { value: 'fri', label: 'Fri' },
+  { value: 'sat', label: 'Sat' },
+  { value: 'sun', label: 'Sun' },
+] as const;
+
+export type Day = (typeof Days)[number]['value'];

package/src/components/Schedule/describe-schedule.ts

@@ -0,0 +1,64 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describeCron } from './cron';
+import { type Day, Days } from './days';
+import { type ScheduleValue } from './Schedule';
+
+// Kept out of `Schedule.tsx`: react-refresh only fast-refreshes a module whose
+// exports are all components, so values exported beside them force a full page reload on
+// every edit.
+
+/** Human-readable summary of the schedule, suitable for the header. */
+// TODO(wittjosiah): Just use cronstrue for all cases?
+const DAY_NAMES: Record<Day, string> = {
+  mon: 'Monday',
+  tue: 'Tuesday',
+  wed: 'Wednesday',
+  thu: 'Thursday',
+  fri: 'Friday',
+  sat: 'Saturday',
+  sun: 'Sunday',
+};
+
+const withZone = (text: string, timezone?: string): string => (timezone ? `${text} ${timezone}` : text);
+
+const formatTime = (time: string): string => {
+  const [h, m] = time.split(':').map(Number);
+  if (Number.isNaN(h) || Number.isNaN(m)) {
+    return time;
+  }
+
+  const period = h < 12 ? 'AM' : 'PM';
+  const hour = h % 12 === 0 ? 12 : h % 12;
+  return `${hour}:${String(m).padStart(2, '0')} ${period}`;
+};
+
+export const describeSchedule = (value: ScheduleValue, timezone?: string): string => {
+  switch (value.kind) {
+    // case 'once':
+    //   return value.date
+    //     ? `Runs once at ${formatTime(value.date.slice(11))} on ${value.date.slice(0, 10)}`
+    //     : 'Runs once';
+    case 'hourly':
+      return `Runs every hour at minute ${value.minute}`;
+    case 'daily':
+      return withZone(`Runs every day at ${formatTime(value.time)}`, timezone);
+    case 'weekly': {
+      const days =
+        value.days.length === 0
+          ? 'no days'
+          : value.days.length === 1
+            ? DAY_NAMES[value.days[0]]
+            : Days.filter((d) => value.days.includes(d.value))
+                .map((d) => d.label)
+                .join(', ');
+      return withZone(`Runs every ${days} at ${formatTime(value.time)}`, timezone);
+    }
+    case 'monthly':
+      return withZone(`Runs monthly on day ${value.day} at ${formatTime(value.time)}`, timezone);
+    case 'custom':
+      return withZone(describeCron(value.cron), timezone);
+  }
+};

package/src/components/Schedule/index.ts

@@ -5,4 +5,6 @@
 export * from './cron';
 export * from './types';
 
+export * from './days';
+export * from './describe-schedule';
 export * from './Schedule';

package/src/components/TemplateEditor/TemplateEditor.stories.tsx

@@ -55,7 +55,7 @@ const DefaultStory = ({ source }: TemplateEditorProps & { source: string }) => {
     );
   });
 
-  return <TemplateEditor classNames='dx-document bg-base-surface' id={skill.id} source={skill.instructions.source} />;
+  return <TemplateEditor classNames='dx-document dx-base-surface' id={skill.id} source={skill.instructions.source} />;
 };
 
 const meta = {

package/src/components/TemplateEditor/TemplateForm.tsx

@@ -60,7 +60,7 @@ export const TemplateForm = ({ id, template, onChange }: TemplateFormProps) => {
 
   return (
     <div className='flex flex-col w-full overflow-hidden gap-4'>
-      <TemplateEditor id={id} source={template.source} classNames='bg-base-surface min-h-[120px]' />
+      <TemplateEditor id={id} source={template.source} classNames='dx-base-surface min-h-[120px]' />
 
       {(template.inputs?.length ?? 0) > 0 && (
         <div className='grid grid-cols-[10rem_10rem_1fr] gap-1 items-center'>

package/src/components/TriggerEditor/TriggerEditor.stories.tsx

@@ -6,14 +6,14 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 import { expect, userEvent, within } from 'storybook/test';
 
-import { Trigger } from '@dxos/compute';
+import { Routine, Trigger } from '@dxos/compute';
 import { Feed, Filter, Obj } from '@dxos/echo';
-import { type Space, useQuery } from '@dxos/react-client/echo';
+import { useQuery } from '@dxos/echo-react';
+import { type Space } from '@dxos/react-client/echo';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '#translations';
-import { Routine } from '#types';
 
 import { TriggerEditor } from './TriggerEditor';
 

package/src/components/TriggerEditor/TriggerEditor.tsx

@@ -5,17 +5,17 @@
 import * as Schema from 'effect/Schema';
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { Trigger } from '@dxos/compute';
+import { Routine, Trigger } from '@dxos/compute';
 import { type Database, DXN, Feed, Filter, Obj, Query, Ref, Scope, Type } from '@dxos/echo';
-import { useQuery } from '@dxos/react-client/echo';
+import { useQuery } from '@dxos/echo-react';
 import { IconButton, Input, ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { Form, type FormFieldMap, type FormFieldRendererProps, SelectField } from '@dxos/react-ui-form';
 import { ParentLabelAnnotation } from '@dxos/schema';
 import { mx } from '@dxos/ui-theme';
 
 import { meta } from '#meta';
-import { Routine } from '#types';
 
+import { wireTriggers } from '../../util';
 import {
   FrequencyDefaults,
   Schedule,
@@ -30,10 +30,8 @@ import { type TriggerKind, TriggerKindSelector } from './TriggerKindSelector';
 // A recurring trigger fires on a cron, so the one-time `once` kind is not offered here.
 const RECURRING_KINDS = ['hourly', 'daily', 'weekly', 'monthly', 'custom'] as const satisfies readonly ScheduleKind[];
 
-// The `enabled` toggle is a field of the Trigger object (sibling of `spec`), not of any spec variant. It is
-// reused from the Trigger schema (rather than redeclared) and extended onto every form member so the editor
-// surfaces it once a kind is chosen; the value is written back to `trigger.enabled`, not the spec.
-const EnabledForm = Type.getSchema(Trigger.Trigger).pipe(Schema.pick('enabled'));
+// `enabled` is extended onto every spec form so it renders inline with the kind's fields.
+const EnabledForm = Type.getSchema(Trigger.Trigger).pipe(Schema.pick('enabled', 'remote'));
 
 // Scoped trigger form, modeled as a top-level discriminated union (one member per pluggable variant) so the
 // Form renders the chosen kind's fields as one flat field set (no nested, bordered sub-fieldset). The kind
@@ -186,50 +184,51 @@ export type TriggerEditorProps = ThemedClassName<{
 
 export const TriggerEditor = ({ classNames, db, routine, trigger, readonly }: TriggerEditorProps) => {
   const { t } = useTranslation(meta.profile.key);
-  const { defaultValues, fieldMap, kind, resetNonce, handleClose, handleValuesChanged } = useTriggerForm(
-    routine,
-    trigger,
-  );
+  const { defaultValues, fieldMap, kind, reset, handleValuesChanged } = useTriggerForm(routine, trigger);
 
-  // TODO(burdon): Not persistent; need to memo
   return (
-    <Form.Root
-      // Remount when the bound trigger changes (picks up its spec) or on reset (reverts to the picker).
-      key={`${trigger?.id ?? 'new'}:${resetNonce}`}
-      schema={TriggerForm}
-      db={db}
-      readonly={readonly}
-      fieldMap={fieldMap}
-      defaultValues={defaultValues}
-      onValuesChanged={handleValuesChanged}
-    >
-      <Form.Content classNames={mx(kind && 'pb-2 bg-card-surface border border-separator rounded-xs', classNames)}>
-        {/* TODO(burdon): Generalize indented section for discriminated unions. */}
-        {(kind && (
-          <>
-            <div className='flex items-center'>
-              <Input.Root>
-                <Input.Label classNames='pl-2 grow truncate'>{t(`trigger-kind.${kind}.label`)}</Input.Label>
-              </Input.Root>
-              {!readonly && (
-                <IconButton
-                  iconOnly
-                  variant='ghost'
-                  square
-                  icon='ph--x--regular'
-                  label={t('trigger-kind.clear.label')}
-                  onClick={handleClose}
-                />
-              )}
-            </div>
-            <Form.FieldSet classNames='px-2' />
-          </>
-        )) || <Form.FieldSet />}
-
-        {/* Email triggers have no configuration; surface an explanatory note instead of an empty body. */}
-        {kind === 'email' && <p className='px-2 text-sm text-description'>{t('trigger-kind.email-note.message')}</p>}
-      </Form.Content>
-    </Form.Root>
+    <>
+      <Form.Root
+        // Remount when the bound trigger changes or its spec kind changes (including reset to no kind),
+        // so the uncontrolled form re-reads `defaultValues`; stable while editing fields within a kind.
+        key={`${trigger?.id ?? 'new'}:${trigger?.spec?.kind ?? 'none'}`}
+        schema={TriggerForm}
+        db={db}
+        readonly={readonly}
+        fieldMap={fieldMap}
+        defaultValues={defaultValues}
+        onValuesChanged={handleValuesChanged}
+      >
+        {/* TODO(burdon): Generalize Form handling (indented section) for discriminated unions. */}
+        <Form.Content classNames={mx(kind && 'pb-2 dx-card-surface border border-separator rounded-xs', classNames)}>
+          {kind ? (
+            <>
+              <div className='flex items-center'>
+                <Input.Root>
+                  <Input.Label classNames='pl-2 grow truncate'>{t(`trigger-kind.${kind}.label`)}</Input.Label>
+                </Input.Root>
+                {!readonly && (
+                  <IconButton
+                    variant='ghost'
+                    icon='ph--x--regular'
+                    iconOnly
+                    square
+                    label={t('trigger-kind.clear.label')}
+                    onClick={reset}
+                  />
+                )}
+              </div>
+              <Form.FieldSet classNames='px-2' />
+            </>
+          ) : (
+            <Form.FieldSet />
+          )}
+
+          {/* Currently, email triggers have no configuration; surface an explanatory note instead of an empty body. */}
+          {kind === 'email' && <p className='px-2 text-sm text-description'>{t('trigger-kind.email-note.message')}</p>}
+        </Form.Content>
+      </Form.Root>
+    </>
   );
 };
 
@@ -301,22 +300,25 @@ const useTriggerForm = (routine: Routine.Routine, trigger?: Trigger.Trigger) =>
     [methodOptions],
   );
 
-  // Bumping this remounts the uncontrolled Form so it re-reads `defaultValues` (used to revert to the picker).
-  const [resetNonce, setResetNonce] = useState(0);
-  // Read per trigger identity / reset; a trigger with no spec yet starts with no kind (shows the picker).
-  // `enabled` is a Trigger-level field, seeded alongside the spec-derived variant values.
+  // Seed from the trigger's current spec/enabled; a trigger with no spec starts with no kind (picker).
+  // Depend on `spec`/`enabled` (not just `trigger` identity) so an in-place clear/change recomputes the
+  // seed — the Form re-reads it on remount (keyed by `spec.kind`), reverting to the picker on reset.
   const defaultValues = useMemo<Partial<TriggerFormValues>>(
-    () => ({ ...triggerFormValues(trigger?.spec), enabled: trigger?.enabled }),
-    [trigger, resetNonce],
+    () => ({
+      ...triggerFormValues(trigger?.spec),
+      enabled: trigger?.enabled,
+      remote: trigger?.remote,
+    }),
+    [trigger, trigger?.spec, trigger?.enabled, trigger?.remote],
   );
 
   // Mirror the active kind: gates the variant picker (shown only while unset) and the variant-specific notes.
   const [kind, setKind] = useState<TriggerKind | undefined>(() => triggerFormValues(trigger?.spec).kind);
 
-  // Revert the kind selection: clear the trigger's spec and remount the Form so the picker reappears.
-  const handleClose = useCallback(() => {
+  // Revert the kind selection: clear the trigger's spec. Clearing changes `spec.kind`, which is part of
+  // the Form's `key`, so the form remounts and re-reads `defaultValues` (picker reappears) — no nonce needed.
+  const reset = useCallback(() => {
     setKind(undefined);
-    setResetNonce((nonce) => nonce + 1);
     if (trigger) {
       Obj.update(trigger, (trigger) => {
         trigger.spec = undefined;
@@ -332,11 +334,15 @@ const useTriggerForm = (routine: Routine.Routine, trigger?: Trigger.Trigger) =>
       }
 
       const spec = triggerFormSpec(values);
-      setKind(spec.kind);
+      // `triggerFormSpec` maps `values.kind` 1:1 onto `spec.kind`; use the already-narrowed form kind so
+      // the state stays typed as the selectable `TriggerKind` subset (the wider `Trigger.Spec` union now
+      // also carries the invoke-only `manual` kind, which the form never produces).
+      setKind(values.kind);
       const enabled = values.enabled === true;
-      // Edit the spec and `enabled` on the trigger; the trigger's `function` and `input` (including the
-      // instructions binding and any operation-specific bindings like `{ magazine }`) are wired once by
-      // `Routine.make`, so they are not re-derived here.
+      const remote = values.remote;
+      // Edit the spec, `enabled`, and `remote` on the trigger directly from the form values.
+      // The trigger's `function` and `input` (including the instructions binding and any operation-specific
+      // bindings like `{ magazine }`) are wired once by `makeRoutine`, so they are not re-derived here.
       if (trigger) {
         Obj.update(trigger, (trigger) => {
           // The subscription spec's QueryAST is deeply readonly while the live ECHO draft's `spec` is mutable;
@@ -344,22 +350,29 @@ const useTriggerForm = (routine: Routine.Routine, trigger?: Trigger.Trigger) =>
           // (mirrors commands/trigger/update/subscription.ts).
           trigger.spec = spec as typeof trigger.spec;
           trigger.enabled = enabled;
+          trigger.remote = remote;
         });
       } else {
-        // Defensive: the draft normally carries an owned trigger already (see `Routine.make`). If absent,
+        // Defensive: the draft normally carries an owned trigger already (see `makeRoutine`). If absent,
         // create one in memory and attach it to the routine graph — nothing is persisted until save.
-        const created = Trigger.make({ spec, enabled });
+        const created = Trigger.make({ spec, enabled, remote });
         Obj.setParent(created, routine);
         Obj.update(routine, (routine) => {
           routine.triggers.push(Ref.make(created));
         });
         // Wire the new trigger's `function`/`input` to dispatch the routine's action (RunInstructions binds the
         // owned instructions; an operation binds directly).
-        Routine.wireTriggers(routine);
+        wireTriggers(routine);
       }
     },
     [routine, trigger],
   );
 
-  return { defaultValues, fieldMap, kind, resetNonce, handleClose, handleValuesChanged };
+  return {
+    defaultValues,
+    fieldMap,
+    kind,
+    reset,
+    handleValuesChanged,
+  };
 };