@dxos/plugin-routine 0.0.0

package/src/components/TemplateEditor/extensions/handlebars-extension.ts

@@ -0,0 +1,274 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import {
+  type CompletionContext,
+  type CompletionResult,
+  autocompletion,
+  completionKeymap,
+} from '@codemirror/autocomplete';
+import { type Extension, RangeSetBuilder } from '@codemirror/state';
+import {
+  Decoration,
+  type DecorationSet,
+  type EditorView,
+  ViewPlugin,
+  type ViewUpdate,
+  WidgetType,
+  keymap,
+} from '@codemirror/view';
+
+import { Domino, mx } from '@dxos/ui';
+
+export type HandlebarsOptions = {};
+
+/**
+ * Simple Handlebars plugin for CodeMirror.
+ * Supports:
+ * - Comments: {{! comment }}
+ * - Commands: {{#command}} {{/command}}
+ * - Variables: {{var}}
+ * - Commands with variables: {{#each items}} {{/each}}
+ */
+export const handlebars = (_: HandlebarsOptions = {}): Extension => {
+  return [
+    handlebarsHighlightPlugin,
+    autocompletion({
+      activateOnTyping: true,
+      aboveCursor: true,
+      closeOnBlur: true,
+      override: [handlebarsCompletions],
+    }),
+    keymap.of(completionKeymap),
+  ];
+};
+
+const regex = {
+  // {{! comment }}
+  comment: /\{\{!\s*[^}]*\}\}/g,
+
+  // {{var}}
+  brackets: /\{\{[^}]*\}\}/g,
+
+  // {{#command}} {{/command}}
+  command: /\{\{[#/]([^}]+)\}\}/g,
+
+  // {{var}}
+  var: /\{\{(?!\s*!)(\w[^}]*)\}\}/g,
+
+  // @echo://space/id or @dxn:nsid
+  dxn: /@?(?:echo:\/{1,3}[\w/]+|dxn:[\w.-]+)/g,
+
+  // example.com/path/xxx
+  url: /[\w.-]+\.[\w.-]+\/[\w/]+/g,
+};
+
+const tagPadding = 'mx-0.5 px-1 rounded-xs';
+
+/**
+ * ViewPlugin that decorates Handlebars syntax.
+ */
+const handlebarsHighlightPlugin = ViewPlugin.fromClass(
+  class {
+    decorations: DecorationSet;
+
+    constructor(view: EditorView) {
+      this.decorations = this.buildDecorations(view);
+    }
+
+    update(update: ViewUpdate) {
+      if (update.docChanged || update.viewportChanged || update.selectionSet) {
+        this.decorations = this.buildDecorations(update.view);
+      }
+    }
+
+    // NOTE: Decorations may clash with other extensions (e.g., markdown).
+    buildDecorations(view: EditorView) {
+      const selection = view.state.selection.main;
+      const decorations: Array<{
+        from: number;
+        to: number;
+        decoration: Decoration;
+      }> = [];
+
+      for (const { from, to } of view.visibleRanges) {
+        const text = view.state.doc.sliceString(from, to);
+
+        // Match DXN.
+        {
+          let match;
+          while ((match = regex.dxn.exec(text)) !== null) {
+            const start = from + match.index;
+            const end = start + match[0].length;
+            // Only show widget if selection doesn't overlap with the match range.
+            const overlaps = selection.to > start && selection.from <= end;
+            if (!overlaps) {
+              decorations.push({
+                from: start,
+                to: end,
+                decoration: Decoration.widget({
+                  widget: new DXNWidget(match[0]),
+                }),
+              });
+            }
+          }
+        }
+
+        // Match URLs.
+        {
+          let match;
+          while ((match = regex.url.exec(text)) !== null) {
+            const start = from + match.index;
+            const end = start + match[0].length;
+            decorations.push({
+              from: start,
+              to: end,
+              decoration: Decoration.mark({
+                class: mx('dx-tag--blue', tagPadding),
+              }),
+            });
+          }
+        }
+
+        // Match brackets: {{ and }}.
+        {
+          let match;
+          while ((match = regex.brackets.exec(text)) !== null) {
+            const start = from + match.index;
+            const end = start + match[0].length;
+            decorations.push({
+              from: start,
+              to: end,
+              decoration: Decoration.mark({ class: 'text-subdued' }),
+            });
+          }
+        }
+
+        // Match commands: {{#command}} and {{/command}}.
+        {
+          let match;
+          while ((match = regex.command.exec(text)) !== null) {
+            const start = from + match.index + 2;
+            let end = start + match[0].length - 4;
+            const text = view.state.doc.sliceString(start, end);
+            const parts = text.split(/\s+/);
+            if (parts.length > 1) {
+              const idx = start + parts[0].length;
+              decorations.push({
+                from: idx,
+                to: end,
+                decoration: Decoration.mark({ class: 'text-green-text' }),
+              });
+              end = idx;
+            }
+            decorations.push({
+              from: start,
+              to: end,
+              decoration: Decoration.mark({ class: 'text-blue-text' }),
+            });
+          }
+        }
+
+        // Match variables: {{var}}.
+        {
+          let match;
+          while ((match = regex.var.exec(text)) !== null) {
+            const start = from + match.index + 2;
+            const end = start + match[0].length - 4;
+            decorations.push({
+              from: start,
+              to: end,
+              decoration: Decoration.mark({ class: 'text-green-text' }),
+            });
+          }
+        }
+      }
+
+      // Sort decorations by position to satisfy RangeSetBuilder requirements.
+      decorations.sort((a, b) => a.from - b.from || a.to - b.to);
+
+      // Add sorted decorations to builder.
+      const builder = new RangeSetBuilder<Decoration>();
+      for (const { from, to, decoration } of decorations) {
+        builder.add(from, to, decoration);
+      }
+
+      return builder.finish();
+    }
+  },
+  {
+    decorations: (v) => v.decorations,
+  },
+);
+
+class DXNWidget extends WidgetType {
+  constructor(private readonly _identifier: string) {
+    super();
+  }
+
+  override ignoreEvent() {
+    return false;
+  }
+
+  override eq(other: this) {
+    return this._identifier === other._identifier;
+  }
+
+  override toDOM() {
+    const text = this._identifier
+      .split(':')
+      .map((part) => {
+        const len = 16;
+        const plen = 4;
+        if (part.length > len) {
+          return `[${part.slice(0, plen)}…${part.slice(-plen)}]`;
+        }
+        return part;
+      })
+      .join(':');
+    return Domino.of('span').classNames(mx('font-mono dx-tag--blue', tagPadding)).text(text).root;
+  }
+}
+
+// TODO(burdon): Pass in variables.
+const variables = ['this'];
+const commands = ['this', 'each', 'if', 'unless', 'with'];
+
+/**
+ * Provides completions for Handlebars variables.
+ */
+function handlebarsCompletions(context: CompletionContext): CompletionResult | null {
+  const match = context.matchBefore(/\{\{[^}]*/);
+  if (!match || match.from === match.to) {
+    return null;
+  }
+
+  let type = 'variable';
+  let text = match.text.slice(2);
+  let from = match.from + 2;
+  let matches = [];
+  if (text.startsWith('#') || text.startsWith('/')) {
+    const idx = text.lastIndexOf(' ');
+    if (idx !== -1) {
+      type = 'variable';
+      matches = variables;
+      text = text.slice(idx + 1);
+      from += idx + 1;
+    } else {
+      type = 'command';
+      text = text.slice(1);
+      matches = commands;
+      from += 1;
+    }
+  } else {
+    type = 'variable';
+    matches = variables;
+  }
+
+  const options = matches.filter((name) => name.startsWith(text)).map((name) => ({ type, label: name }));
+  return {
+    from,
+    options,
+  };
+}

package/src/components/TemplateEditor/extensions/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './handlebars-extension';
+export * from './xml-extension';

package/src/components/TemplateEditor/extensions/xml-extension.ts

@@ -0,0 +1,64 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { type Extension, RangeSetBuilder } from '@codemirror/state';
+import { Decoration, type DecorationSet, type EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+
+export type XmlOptions = {};
+
+/**
+ * XML decorator plugin for CodeMirror.
+ * Decorates XML tags with monospace font using the XML language grammar.
+ */
+export const xmlDecorator = (_: XmlOptions = {}): Extension => {
+  return [xmlDecoratorPlugin];
+};
+
+/**
+ * ViewPlugin that decorates XML tags using syntax tree.
+ */
+const xmlDecoratorPlugin = ViewPlugin.fromClass(
+  class {
+    decorations: DecorationSet;
+
+    constructor(view: EditorView) {
+      this.decorations = this.buildDecorations(view);
+    }
+
+    update(update: ViewUpdate) {
+      if (update.docChanged || update.viewportChanged) {
+        this.decorations = this.buildDecorations(update.view);
+      }
+    }
+
+    buildDecorations(view: EditorView) {
+      const builder = new RangeSetBuilder<Decoration>();
+
+      for (const { from, to } of view.visibleRanges) {
+        syntaxTree(view.state).iterate({
+          from,
+          to,
+          enter: (node) => {
+            // Decorate XML elements (opening tags, closing tags, self-closing tags).
+            if (
+              node.name === 'HTMLTag' ||
+              node.name === 'OpenTag' ||
+              node.name === 'CloseTag' ||
+              node.name === 'SelfClosingTag' ||
+              node.name === 'Element'
+            ) {
+              builder.add(node.from, node.to, Decoration.mark({ class: 'font-mono text-subdued' }));
+            }
+          },
+        });
+      }
+
+      return builder.finish();
+    }
+  },
+  {
+    decorations: (v) => v.decorations,
+  },
+);

package/src/components/TemplateEditor/index.ts

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

package/src/components/TemplateEditor/types.tsx

@@ -0,0 +1,28 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+// TODO(burdon): Factor out (shared with backend). core/chain (@dxos/chain).
+// TODO(burdon): Agent/plan-and-execute (with tools). Create design doc/ontology of sequence/agent.
+
+export type Step = {
+  id: string;
+};
+
+export type Variable = {
+  name: string;
+  type: 'value' | 'function' | 'query' | 'retriever' | 'pass-through';
+};
+
+export type Prompt = Step & {
+  title?: string;
+  description?: string;
+  template: string;
+  variables: Variable[];
+};
+
+export type Sequence = Step & {
+  runnable: Step[];
+};
+
+export type Chain = {};

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

@@ -0,0 +1,122 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+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 { Feed, Filter, Obj } from '@dxos/echo';
+import { type Space, useQuery } 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';
+
+// Exposes the live automation to the play function so it can assert the primary trigger's spec kind.
+const DEBUG_SYMBOL = Symbol.for('dxos.test.triggerEditor');
+
+const DefaultStory = () => {
+  const { space } = useClientStory();
+  const [automation] = useQuery(space?.db, Filter.type(Routine.Routine));
+  const [trigger] = useQuery(space?.db, Filter.type(Trigger.Trigger));
+  if (space?.db && automation && typeof window !== 'undefined') {
+    (window as any)[DEBUG_SYMBOL] = { automation };
+  }
+  if (!space || !automation) {
+    return <Loading />;
+  }
+
+  return <TriggerEditor classNames='p-2' db={space.db} routine={automation} trigger={trigger} />;
+};
+
+const withSeededSpace = (seed: (space: Space) => void) =>
+  withClientProvider({
+    createIdentity: true,
+    createSpace: true,
+    types: [Routine.Routine, Trigger.Trigger, Feed.Feed],
+    onCreateSpace: async ({ space }) => seed(space),
+  });
+
+const meta = {
+  title: 'plugins/plugin-routine/components/TriggerEditor',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** No trigger yet: the editor shows the variant picker (nothing selected). */
+export const Empty: Story = {
+  decorators: [
+    withSeededSpace((space) => {
+      space.db.add(Routine.make({ name: 'Morning Report', triggers: [] }));
+    }),
+  ],
+};
+
+// Reads the automation's primary trigger spec kind. `Routine.triggers` is typed `Ref.Ref(Obj.Unknown)`,
+// so the target is narrowed before reading its spec.
+const primaryTriggerKind = (): string | undefined => {
+  const automation = (window as any)[DEBUG_SYMBOL]?.automation as Routine.Routine | undefined;
+  const target = automation?.triggers?.[0]?.target;
+  return target && Obj.instanceOf(Trigger.Trigger, target) ? target.spec?.kind : undefined;
+};
+
+// The spec is written via Obj.update on the next tick, so poll until it settles.
+const waitForKind = async (expected: string | undefined): Promise<void> => {
+  for (let attempt = 0; attempt < 100; attempt++) {
+    if (primaryTriggerKind() === expected) {
+      return;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 50));
+  }
+  throw new Error(`expected spec.kind=${expected}, got ${primaryTriggerKind()}`);
+};
+
+/**
+ * Builds a play story that drives the picker to create a trigger of a single kind: selecting the card creates
+ * the automation's primary trigger with that kind's spec, asserted to round-trip to the expected `spec.kind`.
+ * `name` regex anchors the card's title (its accessible name also includes the description).
+ */
+const createKindStory = (kind: Trigger.Spec['kind'], name: RegExp): Story => ({
+  decorators: [
+    withSeededSpace((space) => {
+      space.db.add(Routine.make({ name: 'Morning Report', triggers: [] }));
+    }),
+  ],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const card = await canvas.findByRole('option', { name }, { timeout: 10_000 });
+    await userEvent.click(card);
+    await waitForKind(kind);
+    await expect(primaryTriggerKind()).toBe(kind);
+  },
+});
+
+/** Create a Schedule (timer) trigger via the picker. */
+export const CreateScheduleTrigger: Story = createKindStory('timer', /^Schedule/);
+
+/** Create a Feed trigger via the picker. */
+export const CreateFeedTrigger: Story = createKindStory('feed', /^Feed/);
+
+/** Create a Query (subscription) trigger via the picker. */
+export const CreateQueryTrigger: Story = createKindStory('subscription', /^Query/);
+
+// Webhook and Email kinds are gated off in `TriggerKindSelector` (disabled options), so the picker cannot
+// create them; these stories are excluded from the CI test run (`tags: ['!test']`) until the kinds are enabled.
+
+/** Create a Webhook trigger via the picker. */
+export const CreateWebhookTrigger: Story = { ...createKindStory('webhook', /^Webhook/), tags: ['!test'] };
+
+/** Create an Email trigger via the picker. */
+export const CreateEmailTrigger: Story = { ...createKindStory('email', /^Email/), tags: ['!test'] };