@frockbot/plugin-routines 0.3.45 → 0.3.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frockbot/plugin-routines",
-  "version": "0.3.45",
+  "version": "0.3.47",
   "private": false,
   "type": "module",
   "exports": {
@@ -21,7 +21,8 @@
     "./shared": "./src/shared.ts",
     "./storage-keys": "./src/storage-keys.ts",
     "./store": "./src/store.ts",
-    "./testing": "./src/testing.ts"
+    "./testing": "./src/testing.ts",
+    "./subscriptions": "./src/subscriptions.ts"
   },
   "frockbot": {
     "manifest": "./frockbot.json"
@@ -32,15 +33,16 @@
     "typecheck": "vue-tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
-    "@frockbot/client-core": "0.3.45",
-    "@frockbot/client-ui": "0.3.45",
-    "@frockbot/configuration-core": "0.3.45",
-    "@frockbot/kernel-agent-loop": "0.3.45",
-    "@frockbot/kernel-contracts": "0.3.45",
-    "@frockbot/plugin-shell": "0.3.45",
+    "@frockbot/client-core": "0.3.47",
+    "@frockbot/client-ui": "0.3.47",
+    "@frockbot/configuration-core": "0.3.47",
+    "@frockbot/kernel-agent-loop": "0.3.47",
+    "@frockbot/kernel-contracts": "0.3.47",
+    "@frockbot/plugin-shell": "0.3.47",
     "cordis": "4.0.0-rc.8",
     "croner": "10.0.1",
-    "vue": "3.5.41"
+    "vue": "3.5.41",
+    "@frockbot/connection-core": "0.3.47"
   },
   "devDependencies": {
     "@types/bun": "1.4.0",

package/src/agent.ts

@@ -1,3 +1,8 @@
+import {
+  decodeConnectionTriggerV1,
+  type ConnectionTriggerV1,
+  type ConnectionTriggerCatalogV1,
+} from "@frockbot/connection-core";
 // The Routines runtime Contribution: one tool, `routine_manage`.
 //
 // GrokBot's `update_state target=routine {create,update,pause,resume,delete}`
@@ -50,6 +55,7 @@ export interface RoutinesRuntimeHostV1 {
   botId: string;
   writer?: RoutineWriterIdentityV1;
   list(): Promise<RoutineListViewV1>;
+  listTriggers?(): Promise<ConnectionTriggerCatalogV1>;
   execute(
     command: RoutineCommandV1,
     writer: RoutineWriterV1,
@@ -63,6 +69,7 @@ export const ROUTINE_MANAGE_ACTIONS = [
   "resume",
   "delete",
   "run_now",
+  "list_triggers",
 ] as const;
 
 export type RoutineManageActionV1 = (typeof ROUTINE_MANAGE_ACTIONS)[number];
@@ -92,10 +99,28 @@ const ROUTINE_MANAGE_INPUT_SCHEMA = {
         "A five-field cron expression, or @hourly, @daily, @weekly, @monthly, or @every 15m. Optionally prefixed with CRON_TZ=<zone>. A Routine has a schedule or a webhook trigger, never both.",
     },
     trigger: {
-      type: "string",
-      enum: ["webhook"],
+      oneOf: [
+        { type: "string", enum: ["webhook"] },
+        {
+          type: "object",
+          properties: {
+            composio: {
+              type: "object",
+              properties: {
+                connectionId: { type: "string" },
+                triggerType: { type: "string" },
+                config: { type: "object" },
+              },
+              required: ["connectionId", "triggerType", "config"],
+              additionalProperties: false,
+            },
+          },
+          required: ["composio"],
+          additionalProperties: false,
+        },
+      ],
       description:
-        "Fire on a delivered webhook instead of on a clock. A Routine has a schedule or a trigger, never both.",
+        "Fire on an event from an existing connected account. Use list_triggers first to find the account, event type and configuration schema. A Routine has a schedule or a trigger, never both.",
     },
     timezone: {
       type: "string",
@@ -125,7 +150,7 @@ interface RoutineManageInputV1 {
   name?: string;
   prompt?: string;
   schedule?: string;
-  trigger?: "webhook";
+  trigger?: "webhook" | { composio: ConnectionTriggerV1 };
   timezone?: string;
   userAsked?: boolean;
 }
@@ -164,8 +189,18 @@ function decodeRoutineManageInputV1(input: unknown): RoutineManageInputV1 {
     }
     return candidate;
   };
-  if (value.trigger !== undefined && value.trigger !== "webhook") {
-    throw new RoutineDecodeError('routine_manage trigger must be "webhook"');
+  let trigger: RoutineManageInputV1["trigger"];
+  if (value.trigger === "webhook") trigger = "webhook";
+  else if (value.trigger !== undefined) {
+    if (
+      !value.trigger ||
+      typeof value.trigger !== "object" ||
+      Array.isArray(value.trigger) ||
+      Object.keys(value.trigger).some((key) => key !== "composio") ||
+      !("composio" in value.trigger)
+    )
+      throw new RoutineDecodeError("Choose a service event or webhook trigger");
+    trigger = { composio: decodeConnectionTriggerV1(value.trigger.composio) };
   }
   if (value.userAsked !== undefined && typeof value.userAsked !== "boolean") {
     throw new RoutineDecodeError("routine_manage userAsked must be a boolean");
@@ -182,7 +217,7 @@ function decodeRoutineManageInputV1(input: unknown): RoutineManageInputV1 {
     ...(optional("schedule") === undefined
       ? {}
       : { schedule: optional("schedule")! }),
-    ...(value.trigger === undefined ? {} : { trigger: "webhook" as const }),
+    ...(trigger === undefined ? {} : { trigger }),
     ...(optional("timezone") === undefined
       ? {}
       : { timezone: optional("timezone")! }),
@@ -228,7 +263,12 @@ export function routineManageCommandV1(
       ...(input.schedule === undefined ? {} : { schedule: input.schedule }),
       ...(input.trigger === undefined
         ? {}
-        : { trigger: { kind: input.trigger } }),
+        : {
+            trigger:
+              input.trigger === "webhook"
+                ? { kind: "webhook" }
+                : { kind: "connection", ...input.trigger.composio },
+          }),
       ...(input.timezone === undefined ? {} : { timezone: input.timezone }),
     });
   }
@@ -247,7 +287,12 @@ export function routineManageCommandV1(
       ...(input.schedule === undefined ? {} : { schedule: input.schedule }),
       ...(input.trigger === undefined
         ? {}
-        : { trigger: { kind: input.trigger } }),
+        : {
+            trigger:
+              input.trigger === "webhook"
+                ? { kind: "webhook" }
+                : { kind: "connection", ...input.trigger.composio },
+          }),
       ...(input.timezone === undefined ? {} : { timezone: input.timezone }),
     });
   }
@@ -295,7 +340,7 @@ export function createRoutineManageTool(
     // video roles. See `@frockbot/plugin-subagents` `SUBAGENT_TOOL_REACH_V1`.
     admission: { subagentRoles: ["executor"] },
     description: [
-      "Create, edit, pause, resume, delete, or immediately run one of your own Routines.",
+      "Create, edit, pause, resume, delete, or immediately run one of your own Routines. Use list_triggers to list events and configuration schemas on the User’s existing connected accounts.",
       "A Routine is a standing instruction that fires on a schedule or on a delivered webhook,",
       `as its own Turn rather than inside this conversation. Names are at most ${ROUTINE_NAME_MAX_LENGTH}`,
       `characters and prompts at most ${ROUTINE_PROMPT_MAX_LENGTH}.`,
@@ -322,6 +367,13 @@ export function createRoutineManageTool(
       let command: RoutineCommandV1;
       try {
         decoded = decodeRoutineManageInputV1(input);
+        if (decoded.action === "list_triggers")
+          return {
+            content: JSON.stringify(
+              (await host.listTriggers?.()) ?? { schemaVersion: 1, items: [] },
+            ),
+            isError: false,
+          };
         command = routineManageCommandV1(decoded, {
           botId: host.botId,
           commandId: routineToolCommandIdV1(context.effectId),
@@ -374,7 +426,9 @@ export function createRoutineManageTool(
       const routine = receipt.routine;
       const timing = routine.schedule
         ? `schedule ${routine.schedule} (${routine.timezone})`
-        : "webhook trigger";
+        : routine.trigger?.kind === "connection"
+          ? (routine.eventName ?? "a service event")
+          : "webhook trigger";
       return {
         content: [
           `Routine "${routine.name}" (${routine.routineId}) is ${

package/src/backend.ts

@@ -1,3 +1,7 @@
+import {
+  decodeConnectionTriggerCatalogV1,
+  type ConnectionTriggerCatalogV1,
+} from "@frockbot/connection-core";
 // The Routines gateway Contribution: the authenticated HTTP surface.
 //
 // Three routes, all Bot-scoped and all beside `/api/bots/:id/settings`:
@@ -73,6 +77,10 @@ export interface RoutinesGatewayHost {
     },
   ): Promise<RoutineHookDeliveryReceiptV1>;
   listRoutines(userId: string, botId: string): Promise<RoutineListViewV1>;
+  listTriggers?(
+    userId: string,
+    botId: string,
+  ): Promise<ConnectionTriggerCatalogV1>;
   executeRoutineCommand(
     userId: string,
     botId: string,
@@ -117,6 +125,7 @@ export interface RoutinesBackendRouteContribution {
 }
 
 const ROUTINES = /^\/api\/bots\/([^/]+)\/routines$/;
+const ROUTINE_TRIGGERS = /^\/api\/bots\/([^/]+)\/routines\/triggers$/;
 const ROUTINE_INBOX = /^\/api\/bots\/([^/]+)\/routines\/inbox$/;
 const ROUTINE_RUNS = /^\/api\/bots\/([^/]+)\/routines\/([^/]+)\/runs$/;
 const ROUTINE_HOOK = /^\/api\/bots\/([^/]+)\/routines\/([^/]+)\/hook$/;
@@ -270,16 +279,31 @@ export function createRoutinesBackendContribution(
     packageId: "routines",
     async route(request, url, context) {
       if (!context.userId) return undefined;
+      const triggers = ROUTINE_TRIGGERS.exec(url.pathname);
       const list = ROUTINES.exec(url.pathname);
       const inbox = ROUTINE_INBOX.exec(url.pathname);
       const runs = ROUTINE_RUNS.exec(url.pathname);
       const run = ROUTINE_RUN.exec(url.pathname);
-      if (!list && !inbox && !runs && !run) return undefined;
+      if (!triggers && !list && !inbox && !runs && !run) return undefined;
       if ([...url.searchParams.keys()].length > 0) {
         return jsonError(400, "Routine routes take no query parameters");
       }
       try {
-        const botId = pathSegment((list ?? inbox ?? runs ?? run)![1]!);
+        const botId = pathSegment(
+          (triggers ?? list ?? inbox ?? runs ?? run)![1]!,
+        );
+        if (triggers) {
+          if (request.method !== "GET")
+            return jsonError(405, "method not allowed");
+          return Response.json(
+            decodeConnectionTriggerCatalogV1(
+              (await host.listTriggers?.(context.userId, botId)) ?? {
+                schemaVersion: 1,
+                items: [],
+              },
+            ),
+          );
+        }
         if (run) {
           if (request.method !== "GET") {
             return jsonError(405, "method not allowed");

package/src/client/RoutinesSection.vue

@@ -18,7 +18,8 @@ import {
 } from "@frockbot/client-core";
 import { frockBotWebDataKey } from "@frockbot/plugin-shell/shared";
 import { settingsLinkV1 } from "@frockbot/plugin-shell/settings-links";
-import { computed, inject, reactive, ref, watch } from "vue";
+import { computed, inject, reactive, ref, toRaw, watch } from "vue";
+import { triggerObject } from "@frockbot/connection-core";
 import type { RoutineViewV1 } from "../shared.js";
 import { routinesStateKey } from "./state.js";
 
@@ -56,11 +57,83 @@ const form = reactive({
   routineId: undefined as string | undefined,
   name: "",
   prompt: "",
-  timing: "schedule" as "schedule" | "webhook",
+  timing: "schedule" as "schedule" | "webhook" | "connection",
   schedule: "",
+  connectionId: "",
+  triggerType: "",
+  config: {} as Record<string, unknown>,
   timezone: "UTC",
 });
 
+const accounts = computed(() => [
+  ...new Map(
+    (routines.value.triggers ?? []).map((item) => [item.connectionId, item]),
+  ).values(),
+]);
+const events = computed(() =>
+  (routines.value.triggers ?? []).filter(
+    (item) => item.connectionId === form.connectionId,
+  ),
+);
+const selectedEvent = computed(() =>
+  events.value.find((item) => item.triggerType === form.triggerType),
+);
+const eventFields = computed(() => {
+  const schema = selectedEvent.value?.configSchema;
+  if (!schema || !triggerObject(schema.properties)) return [];
+  return Object.entries(schema.properties).flatMap(([key, value]) =>
+    triggerObject(value)
+      ? [
+          {
+            key,
+            label: (typeof value.title === "string" ? value.title : key)
+              .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+              .replaceAll("_", " ")
+              .replace(/^./, (letter) => letter.toUpperCase()),
+            hint:
+              typeof value.description === "string"
+                ? value.description
+                : undefined,
+            type: value.type,
+            options: Array.isArray(value.enum)
+              ? value.enum.filter(
+                  (item): item is string => typeof item === "string",
+                )
+              : [],
+            required:
+              Array.isArray(schema.required) && schema.required.includes(key),
+          },
+        ]
+      : [],
+  );
+});
+function selectEvent(): void {
+  form.config = {};
+  const properties = selectedEvent.value?.configSchema.properties;
+  if (triggerObject(properties))
+    for (const [key, value] of Object.entries(properties)) {
+      if (triggerObject(value) && value.default !== undefined)
+        form.config[key] = structuredClone(toRaw(value.default));
+    }
+}
+function selectAccount(): void {
+  form.triggerType = events.value[0]?.triggerType ?? "";
+  selectEvent();
+}
+function eventState(routine: RoutineViewV1): string {
+  return (
+    {
+      active: "Listening",
+      starting: "Starting…",
+      paused: "Paused",
+      missing: "Listening stopped — edit and save to restart",
+      failed: "Could not start listening — review the event settings",
+      unavailable: "Connection unavailable — check Connectors",
+    }[routine.eventStatus ?? "unavailable"] ??
+    "Connection unavailable — check Connectors"
+  );
+}
+
 /**
  * The reason the last save was refused, held beside the form rather than in
  * the section header. The header sits above every Routine card, so on a Bot
@@ -125,7 +198,9 @@ async function copyHook(): Promise<void> {
 function summary(routine: RoutineViewV1): string {
   return routine.schedule
     ? `${routine.schedule} · ${routine.timezone}`
-    : "Webhook trigger";
+    : routine.trigger?.kind === "connection"
+      ? (routine.eventName ?? "Connected account event")
+      : "Webhook trigger";
 }
 
 /** A durable moment, read in the Routine's own zone — the one it fires on. */
@@ -134,10 +209,13 @@ function moment(routine: RoutineViewV1, iso: string): string {
 }
 
 function startCreate(): void {
+  if (botId.value) void routines.value.load(botId.value);
   form.routineId = undefined;
   form.name = "";
   form.prompt = "";
   form.timing = "schedule";
+  form.connectionId = accounts.value[0]?.connectionId ?? "";
+  selectAccount();
   form.schedule = "0 9 * * *";
   // The reader's own zone, not UTC: a schedule is almost always meant in the
   // day the person writing it is living in, and the Bot picks the same when it
@@ -151,7 +229,16 @@ function startEdit(routine: RoutineViewV1): void {
   form.routineId = routine.routineId;
   form.name = routine.name;
   form.prompt = routine.prompt;
-  form.timing = routine.schedule ? "schedule" : "webhook";
+  form.timing = routine.schedule
+    ? "schedule"
+    : routine.trigger?.kind === "connection"
+      ? "connection"
+      : "webhook";
+  if (routine.trigger?.kind === "connection") {
+    form.connectionId = routine.trigger.connectionId;
+    form.triggerType = routine.trigger.triggerType;
+    form.config = structuredClone(toRaw(routine.trigger.config));
+  }
   form.schedule = routine.schedule ?? "";
   form.timezone = routine.timezone;
   saveError.value = undefined;
@@ -163,13 +250,46 @@ async function submit(): Promise<void> {
   if (!id) return;
   saveError.value = undefined;
   try {
+    if (form.timing === "connection" && !selectedEvent.value)
+      throw new Error("Choose an available account and event");
+    const config = Object.fromEntries(
+      Object.entries(form.config).filter(
+        ([, value]) => value !== "" && value !== undefined,
+      ),
+    );
+    for (const field of eventFields.value) {
+      if (field.required && config[field.key] === undefined)
+        throw new Error(`Enter ${field.label.toLowerCase()}`);
+      if (
+        config[field.key] !== undefined &&
+        (field.type === "array" || field.type === "object") &&
+        typeof config[field.key] === "string"
+      ) {
+        try {
+          config[field.key] = JSON.parse(String(config[field.key]));
+        } catch {
+          throw new Error(
+            `Check ${field.label.toLowerCase()}: enter valid JSON`,
+          );
+        }
+      }
+    }
     await routines.value.save(id, {
       ...(form.routineId ? { routineId: form.routineId } : {}),
       name: form.name.trim(),
       prompt: form.prompt.trim(),
       ...(form.timing === "schedule"
         ? { schedule: form.schedule.trim() }
-        : { trigger: { kind: "webhook" as const } }),
+        : form.timing === "connection"
+          ? {
+              trigger: {
+                kind: "connection" as const,
+                connectionId: form.connectionId,
+                triggerType: form.triggerType,
+                config,
+              },
+            }
+          : { trigger: { kind: "webhook" as const } }),
       timezone: form.timezone.trim(),
     });
     formOpen.value = false;
@@ -185,7 +305,9 @@ async function submit(): Promise<void> {
     saveError.value =
       serverRefusalMessageV1(error) ??
       routines.value.error ??
-      presentClientFailureV1(error, "save the Routine");
+      (error instanceof Error
+        ? error.message
+        : presentClientFailureV1(error, "save the Routine"));
   }
 }
 
@@ -232,8 +354,8 @@ async function toggleLog(routineId: string): Promise<void> {
       <span class="routines__intro">
         <strong>Routines</strong>
         <small>
-          Standing instructions this Bot runs on a schedule, or when a webhook
-          fires.
+          Standing instructions this Bot runs on a schedule or when something
+          happens.
         </small>
       </span>
       <UiButton type="button" :disabled="!botId" @click="startCreate">
@@ -291,6 +413,13 @@ async function toggleLog(routineId: string): Promise<void> {
           </UiButton>
         </div>
       </div>
+      <p
+        v-if="routine.trigger?.kind === 'connection'"
+        class="routines__note"
+        role="status"
+      >
+        {{ eventState(routine) }}
+      </p>
       <dl class="routine-card__facts">
         <div>
           <dt>Next run</dt>
@@ -301,7 +430,7 @@ async function toggleLog(routineId: string): Promise<void> {
             <template v-else>—</template>
           </dd>
         </div>
-        <div v-if="routine.trigger">
+        <div v-if="routine.trigger?.kind === 'webhook'">
           <dt>Webhook key</dt>
           <dd>
             {{
@@ -354,7 +483,7 @@ async function toggleLog(routineId: string): Promise<void> {
           Run now
         </UiButton>
         <UiButton
-          v-if="routine.trigger"
+          v-if="routine.trigger?.kind === 'webhook'"
           type="button"
           :disabled="routines.busy"
           @click="botId && routines.rotateKey(botId, routine.routineId)"
@@ -362,7 +491,7 @@ async function toggleLog(routineId: string): Promise<void> {
           {{ routine.hookKeyVersion ? "Rotate key" : "Mint key" }}
         </UiButton>
         <UiButton
-          v-if="routine.trigger && routine.hookKeyVersion"
+          v-if="routine.trigger?.kind === 'webhook' && routine.hookKeyVersion"
           type="button"
           :disabled="routines.busy"
           @click="botId && routines.revokeKey(botId, routine.routineId)"
@@ -469,7 +598,111 @@ async function toggleLog(routineId: string): Promise<void> {
           <input v-model="form.timing" type="radio" value="webhook" />
           <span>A webhook</span>
         </label>
+        <label>
+          <input v-model="form.timing" type="radio" value="connection" />
+          <span>An event in a connected account</span>
+        </label>
       </fieldset>
+      <template v-if="form.timing === 'connection'">
+        <p
+          v-if="routines.triggerError"
+          class="routine-form__error"
+          role="alert"
+        >
+          {{ routines.triggerError }}
+        </p>
+        <p v-else-if="!accounts.length" class="routines__note">
+          No events are available for your connected accounts yet.
+        </p>
+        <template v-else>
+          <UiField label="Account">
+            <select v-model="form.connectionId" @change="selectAccount">
+              <option disabled value="">Choose an account</option>
+              <option
+                v-for="account in accounts"
+                :key="account.connectionId"
+                :value="account.connectionId"
+              >
+                {{ account.connectorName }} · {{ account.accountName }}
+              </option>
+            </select>
+          </UiField>
+          <UiField label="When" :hint="selectedEvent?.description">
+            <select v-model="form.triggerType" @change="selectEvent">
+              <option disabled value="">Choose an event</option>
+              <option
+                v-for="event in events"
+                :key="event.triggerType"
+                :value="event.triggerType"
+              >
+                {{ event.name }}
+              </option>
+            </select>
+          </UiField>
+          <details
+            v-if="eventFields.length"
+            :key="form.triggerType"
+            class="routine-form__options"
+            :open="eventFields.some((field) => field.required)"
+          >
+            <summary>Event options</summary>
+            <UiField
+              v-for="field in eventFields"
+              :key="field.key"
+              :label="field.label"
+              :hint="field.hint"
+            >
+              <select
+                v-if="field.options.length"
+                v-model="form.config[field.key]"
+                :required="field.required"
+              >
+                <option v-if="!field.required" value="">Any</option>
+                <option
+                  v-for="option in field.options"
+                  :key="option"
+                  :value="option"
+                >
+                  {{ option }}
+                </option>
+              </select>
+              <input
+                v-else-if="field.type === 'boolean'"
+                v-model="form.config[field.key]"
+                type="checkbox"
+              />
+              <input
+                v-else-if="field.type === 'number' || field.type === 'integer'"
+                v-model.number="form.config[field.key]"
+                type="number"
+                :step="field.type === 'integer' ? 1 : 'any'"
+                :required="field.required"
+              />
+              <textarea
+                v-else-if="field.type === 'array' || field.type === 'object'"
+                :value="
+                  typeof form.config[field.key] === 'string'
+                    ? String(form.config[field.key])
+                    : JSON.stringify(form.config[field.key], null, 2)
+                "
+                @input="
+                  form.config[field.key] = (
+                    $event.target as HTMLTextAreaElement
+                  ).value
+                "
+                :required="field.required"
+                rows="3"
+              />
+              <input
+                v-else
+                v-model="form.config[field.key]"
+                :required="field.required"
+                maxlength="8000"
+              />
+            </UiField>
+          </details>
+        </template>
+      </template>
       <UiField
         v-if="form.timing === 'schedule'"
         label="Schedule"
@@ -493,7 +726,7 @@ async function toggleLog(routineId: string): Promise<void> {
       >
         {{ scheduleError }}
       </p>
-      <p v-else class="routines__note">
+      <p v-if="form.timing === 'webhook'" class="routines__note">
         A delivery key is minted when the Routine is saved, and shown once.
       </p>
       <UiField label="Time zone">
@@ -754,7 +987,8 @@ async function toggleLog(routineId: string): Promise<void> {
 
 .routine-form__timing {
   display: flex;
-  gap: 12px;
+  flex-direction: column;
+  gap: 8px;
   border: 0;
   margin: 0;
   padding: 0;
@@ -773,4 +1007,23 @@ async function toggleLog(routineId: string): Promise<void> {
   align-items: center;
   gap: 6px;
 }
+
+.routine-form__options {
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+}
+
+.routine-form__options summary {
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.routine-form__options :deep(.ui-field) {
+  margin-top: 12px;
+}
+
+.routine-form__options input[type="checkbox"] {
+  width: auto;
+  align-self: flex-start;
+}
 </style>

package/src/client/RoutinesSummary.vue

@@ -63,7 +63,9 @@ watch(
       <li v-for="routine in rows" :key="routine.routineId">
         <span>
           <strong>{{ routine.name }}</strong>
-          <small>{{ routine.schedule ?? "Webhook" }}</small>
+          <small>{{
+            routine.schedule ?? routine.eventName ?? "Webhook"
+          }}</small>
         </span>
         <small>{{ routine.enabled ? "On" : "Paused" }}</small>
       </li>