@revenexx/studio-integrations 0.1.3 → 0.2.0

package/dist/runtime/components/Integrations/DeadLettersPanel.vue

@@ -0,0 +1,151 @@
+<script setup>
+import { onMounted, ref, watch } from "vue";
+import { RefreshCircle as Loader2, Refresh as ReplayIcon, TrashBinMinimalistic as Trash2 } from "#solar-icons";
+import { Badge, Button } from "@revenexx/studio";
+import { toast } from "vue-sonner";
+const props = defineProps({
+  workflowId: { type: Number, required: true }
+});
+const { list, replay, discard } = useIntegrationsDeadLetters();
+const PER_PAGE = 25;
+const items = ref([]);
+const loading = ref(false);
+const error = ref(null);
+const page = ref(1);
+const total = ref(0);
+const lastPage = ref(1);
+const busyId = ref(null);
+async function load(p = page.value) {
+  loading.value = true;
+  error.value = null;
+  try {
+    const res = await list(props.workflowId, { page: p, perPage: PER_PAGE });
+    items.value = res.items;
+    total.value = res.total;
+    lastPage.value = res.lastPage;
+    page.value = res.page;
+  } catch (e) {
+    error.value = e?.message ?? "Could not load dead letters.";
+  } finally {
+    loading.value = false;
+  }
+}
+function goPage(p) {
+  const next = Math.min(Math.max(1, p), lastPage.value);
+  if (next !== page.value) void load(next);
+}
+onMounted(() => void load(1));
+watch(() => props.workflowId, () => void load(1));
+async function onReplay(dl) {
+  busyId.value = dl.id;
+  try {
+    const res = await replay(dl.id);
+    const newId = res && typeof res === "object" && "id" in res ? String(res.id) : null;
+    toast.success(newId ? `Replayed \u2014 started run #${newId}` : "Replayed");
+    await load();
+  } catch (e) {
+    toast.error(e?.message ?? "Could not replay.");
+  } finally {
+    busyId.value = null;
+  }
+}
+async function onDiscard(dl) {
+  busyId.value = dl.id;
+  try {
+    await discard(dl.id);
+    toast.success("Discarded");
+    await load();
+  } catch (e) {
+    toast.error(e?.message ?? "Could not discard.");
+  } finally {
+    busyId.value = null;
+  }
+}
+function statusClass(status) {
+  if (status === "pending") return "bg-amber-500/15 text-amber-700 border-amber-500/25";
+  if (status === "replayed") return "bg-emerald-500/15 text-emerald-700 border-emerald-500/25";
+  return "bg-slate-500/15 text-slate-600 border-slate-500/20";
+}
+function fmt(iso) {
+  if (!iso) return "\u2014";
+  try {
+    return new Date(iso).toLocaleString();
+  } catch {
+    return iso;
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div class="flex items-center justify-between">
+      <div>
+        <h3 class="text-sm font-semibold">Missed runs</h3>
+        <p class="mt-0.5 text-sm text-muted-foreground">
+          Triggers that fired while this workflow couldn't run (bundle building or failed). Replay starts a fresh run from the captured payload.
+        </p>
+      </div>
+      <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="loading" @click="() => load()">
+        <Loader2 v-if="loading" :size="12" class="animate-spin" />
+        Refresh
+      </Button>
+    </div>
+
+    <div v-if="error" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
+      {{ error }}
+    </div>
+
+    <div v-if="loading && !items.length">
+      <div class="rounded-lg border border-black/[0.06] bg-white divide-y divide-black/[0.04]">
+        <div v-for="n in 4" :key="`sk-${n}`" class="flex items-start gap-3 px-3 py-3">
+          <div class="h-5 w-16 shrink-0 rounded bg-black/[0.07] animate-pulse" />
+          <div class="min-w-0 flex-1 space-y-2">
+            <div class="h-3 w-1/3 rounded bg-black/[0.07] animate-pulse" />
+            <div class="h-3 w-2/3 rounded bg-black/[0.05] animate-pulse" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else-if="!items.length" class="rounded-lg border border-black/[0.06] bg-white p-6 text-center text-sm text-muted-foreground">
+      No missed runs. Every trigger firing made it into a run.
+    </div>
+
+    <div v-else class="rounded-lg border border-black/[0.06] bg-white divide-y divide-black/[0.04]">
+      <div
+        v-for="dl in items"
+        :key="dl.id"
+        class="flex items-start gap-3 px-3 py-2.5"
+      >
+        <Badge variant="outline" :class="['border text-xs font-medium uppercase shrink-0 mt-0.5', statusClass(dl.status)]">{{ dl.status }}</Badge>
+        <div class="min-w-0 flex-1">
+          <div class="text-sm break-words">{{ dl.reason || "No reason recorded." }}</div>
+          <div class="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground font-mono">
+            <span>#{{ dl.id }}</span>
+            <span v-if="dl.source">{{ dl.source }}</span>
+            <span v-if="dl.trigger_handle">↳ {{ dl.trigger_handle }}</span>
+            <span>{{ fmt(dl.created_at) }}</span>
+          </div>
+        </div>
+        <div v-if="dl.status === 'pending'" class="flex shrink-0 items-center gap-1">
+          <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="busyId === dl.id" @click="onReplay(dl)">
+            <Loader2 v-if="busyId === dl.id" :size="12" class="animate-spin" />
+            <ReplayIcon v-else :size="12" />
+            Replay
+          </Button>
+          <Button variant="ghost" size="sm" class="h-7 text-sm text-rose-600 hover:bg-rose-500/10" :disabled="busyId === dl.id" @click="onDiscard(dl)">
+            <Trash2 :size="12" />
+            Discard
+          </Button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="lastPage > 1" class="flex items-center justify-between text-sm text-muted-foreground">
+      <span class="tabular-nums">Page {{ page }} / {{ lastPage }} · {{ total }} total</span>
+      <div class="flex gap-2">
+        <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="page <= 1 || loading" @click="goPage(page - 1)">← Newer</Button>
+        <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="page >= lastPage || loading" @click="goPage(page + 1)">Older →</Button>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Integrations/DeadLettersPanel.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    workflowId: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Integrations/EditorTip.d.vue.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    label: string;
+    /** e.g. 'mod+enter', 'shift+alt+t', 'v', '1'. Omit for label-only tips. */
+    shortcut?: string;
+};
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Integrations/EditorTip.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { computed } from "vue";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@revenexx/studio";
+const props = defineProps({
+  label: { type: String, required: true },
+  shortcut: { type: String, required: false }
+});
+const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform ?? "");
+const keys = computed(() => {
+  if (!props.shortcut) return "";
+  const out = [];
+  for (const raw of props.shortcut.split("+")) {
+    const t = raw.toLowerCase();
+    if (t === "mod") out.push(isMac ? "\u2318" : "Ctrl");
+    else if (t === "shift") out.push("\u21E7");
+    else if (t === "alt") out.push(isMac ? "\u2325" : "Alt");
+    else if (t === "enter") out.push("\u21B5");
+    else if (t === "escape") out.push("Esc");
+    else out.push(t.toUpperCase());
+  }
+  return isMac ? out.join("") : out.join("+");
+});
+</script>
+
+<template>
+  <Tooltip :delay-duration="250">
+    <TooltipTrigger as-child>
+      <slot />
+    </TooltipTrigger>
+    <TooltipContent
+      side="top"
+      :side-offset="8"
+      class="editor-tip flex items-center gap-1.5 rounded-md border border-black/[0.06] bg-white px-2 py-1 text-xs text-foreground shadow-md"
+    >
+      <span>{{ label }}</span>
+      <kbd
+        v-if="keys"
+        class="rounded border border-black/[0.08] bg-muted/60 px-1 py-px font-mono text-[10px] tabular-nums text-muted-foreground"
+      >{{ keys }}</kbd>
+    </TooltipContent>
+  </Tooltip>
+</template>
+
+<style>
+.editor-tip svg{display:none!important}
+</style>

package/dist/runtime/components/Integrations/EditorTip.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    label: string;
+    /** e.g. 'mod+enter', 'shift+alt+t', 'v', '1'. Omit for label-only tips. */
+    shortcut?: string;
+};
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Integrations/EventTypeCombobox.d.vue.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    modelValue: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Integrations/EventTypeCombobox.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { Input } from "@revenexx/studio";
+const props = defineProps({
+  modelValue: { type: String, required: true }
+});
+const emit = defineEmits(["update:modelValue"]);
+const catalog = useDefinedEvents();
+onMounted(() => {
+  void catalog.load();
+});
+const focused = ref(false);
+const options = computed(() => {
+  const out = /* @__PURE__ */ new Map();
+  for (const e of catalog.emits.value) out.set(e.topic, { topic: e.topic, source: e.app });
+  for (const t of catalog.listens.value) {
+    if (!out.has(t)) out.set(t, { topic: t, source: null });
+  }
+  return [...out.values()].sort((a, b) => a.topic.localeCompare(b.topic));
+});
+const filtered = computed(() => {
+  const q = (props.modelValue ?? "").trim().toLowerCase();
+  const list = q ? options.value.filter((o) => o.topic.toLowerCase().includes(q)) : options.value;
+  return list.slice(0, 40);
+});
+const open = computed(() => focused.value && (filtered.value.length > 0 || catalog.loading.value));
+function pick(topic) {
+  emit("update:modelValue", topic);
+  focused.value = false;
+}
+</script>
+
+<template>
+  <div class="relative">
+    <Input
+      :model-value="modelValue"
+      placeholder="customer.created"
+      class="h-8 text-sm bg-white font-mono"
+      @update:model-value="(v) => emit('update:modelValue', String(v))"
+      @focus="focused = true"
+      @blur="focused = false"
+    />
+    <div
+      v-if="open"
+      class="absolute left-0 right-0 top-full z-30 mt-1 max-h-56 overflow-y-auto rounded-md border border-black/[0.08] bg-white py-1 shadow-md"
+    >
+      <div v-if="catalog.loading.value && !filtered.length" class="px-2.5 py-1.5 text-sm text-muted-foreground">
+        Loading event catalog…
+      </div>
+      <button
+        v-for="o in filtered"
+        :key="o.topic"
+        type="button"
+        class="flex w-full items-center gap-2 px-2.5 py-1.5 text-left hover:bg-muted/50"
+        @mousedown.prevent="pick(o.topic)"
+      >
+        <code class="min-w-0 flex-1 truncate font-mono text-[13px]">{{ o.topic }}</code>
+        <span v-if="o.source" class="shrink-0 rounded-full bg-slate-100 px-1.5 py-px text-[11px] font-medium uppercase text-slate-700">
+          {{ o.source }}
+        </span>
+      </button>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Integrations/EventTypeCombobox.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    modelValue: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Integrations/ExpressionInput.d.vue.ts

@@ -0,0 +1,19 @@
+import type { WorkflowVariable } from '../../types/integrations.js';
+type UpstreamOutput = {
+    nodeId: string;
+    nodeName?: string;
+    output: string;
+    fields?: string[];
+};
+type __VLS_Props = {
+    modelValue: unknown;
+    placeholder?: string;
+    variables?: Record<string, WorkflowVariable>;
+    upstreamOutputs?: UpstreamOutput[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Integrations/ExpressionInput.vue

@@ -0,0 +1,236 @@
+<script setup>
+import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { Editor, EditorContent } from "@tiptap/vue-3";
+import { Node } from "@tiptap/core";
+import Document from "@tiptap/extension-document";
+import Paragraph from "@tiptap/extension-paragraph";
+import Text from "@tiptap/extension-text";
+import History from "@tiptap/extension-history";
+import { resolveExpressionText } from "../../data/nodeRunData";
+import { EXPR_TOKEN_NODE, docToText, hasRawTokenText, textToDoc } from "../../data/expressionEditor";
+const props = defineProps({
+  modelValue: { type: null, required: true },
+  placeholder: { type: String, required: false },
+  variables: { type: Object, required: false },
+  upstreamOutputs: { type: Array, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const text = computed(() => String(props.modelValue ?? ""));
+const OPEN = "${{ ";
+const CLOSE = " }}";
+function tok(inner) {
+  return OPEN + inner + CLOSE;
+}
+const triggerLabel = "{ }";
+const nodeNames = inject("integrationsNodeNames", null);
+function pillLabel(expr) {
+  const path = expr.split(".");
+  if (path[0] === "nodes" && path[2] === "outputs") {
+    const name = nodeNames?.value[path[1] ?? ""] ?? path[1] ?? "";
+    const rest = path.slice(3).filter((seg, i) => !(i === 0 && seg === "default")).join(".");
+    return rest ? name + " \xB7 " + rest : name;
+  }
+  if (path[0] === "trigger" && path[1] === "payload") {
+    const rest = path.slice(2).join(".");
+    return rest ? "Trigger \xB7 " + rest : "Trigger payload";
+  }
+  if (path[0] === "vars") return "Variable \xB7 " + path.slice(1).join(".");
+  if (path[0] === "in") {
+    const rest = path.slice(1).join(".");
+    return rest ? "Input \xB7 " + rest : "Input payload";
+  }
+  return expr;
+}
+function tokenLabel(token) {
+  const inner = token.replace(/^\$\{\{\s*/, "").replace(/\s*\}\}$/, "");
+  return pillLabel(inner);
+}
+const ExprToken = Node.create({
+  name: EXPR_TOKEN_NODE,
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: true,
+  addAttributes() {
+    return { token: { default: "" } };
+  },
+  parseHTML() {
+    return [{
+      tag: "span[data-expr-token]",
+      getAttrs: (el) => ({ token: el.getAttribute("data-expr-token") ?? "" })
+    }];
+  },
+  renderHTML({ node }) {
+    return ["span", { "data-expr-token": String(node.attrs.token) }, String(node.attrs.token)];
+  },
+  addNodeView() {
+    return ({ node }) => {
+      const dom = document.createElement("span");
+      dom.className = "expr-pill";
+      dom.textContent = tokenLabel(String(node.attrs.token));
+      dom.title = String(node.attrs.token);
+      return { dom };
+    };
+  }
+});
+const editor = new Editor({
+  extensions: [Document, Paragraph, Text, History, ExprToken],
+  content: textToDoc(text.value),
+  editorProps: {
+    // Single line: swallow Enter (paragraph splits would break the field).
+    handleKeyDown: (_view, event) => event.key === "Enter" && !event.isComposing
+  },
+  onUpdate({ editor: ed }) {
+    const json = ed.getJSON();
+    let raw = docToText(json);
+    if (hasRawTokenText(json)) {
+      ed.commands.setContent(textToDoc(raw));
+      raw = docToText(ed.getJSON());
+    }
+    if (raw !== text.value) emit("update:modelValue", raw);
+  },
+  onFocus() {
+    if (insertHandler) insertHandler.value = insertToken;
+    if (hasSuggestions.value) open.value = true;
+  }
+});
+onBeforeUnmount(() => {
+  if (insertHandler?.value === insertToken) insertHandler.value = null;
+  editor.destroy();
+});
+watch(text, (t) => {
+  if (docToText(editor.getJSON()) !== t) {
+    editor.commands.setContent(textToDoc(t));
+  }
+});
+function insertToken(expr) {
+  if (editor.isDestroyed) return;
+  editor.chain().focus().insertContent({ type: EXPR_TOKEN_NODE, attrs: { token: expr } }).run();
+}
+const insertHandler = inject("integrationsExpressionInsert", null);
+const sampleContext = inject("integrationsSampleContext", null);
+const preview = computed(() => {
+  if (!sampleContext) return null;
+  return resolveExpressionText(text.value, sampleContext.value);
+});
+const sections = computed(() => {
+  const out = [];
+  const vars = props.variables ?? {};
+  const varItems = Object.keys(vars).map((key) => ({
+    label: key,
+    expr: tok("vars." + key)
+  }));
+  if (varItems.length) out.push({ heading: "VARIABLES", items: varItems });
+  const upstream = props.upstreamOutputs ?? [];
+  const nodeItems = upstream.flatMap((u) => {
+    const base = "nodes." + u.nodeId + ".outputs." + u.output;
+    const rows = [{
+      label: (u.nodeName || u.nodeId) + " \u2192 " + u.output,
+      expr: tok(base)
+    }];
+    for (const f of u.fields ?? []) {
+      rows.push({ label: (u.nodeName || u.nodeId) + " \u2192 " + u.output + "." + f, expr: tok(base + "." + f) });
+    }
+    return rows;
+  });
+  if (nodeItems.length) out.push({ heading: "NODE OUTPUTS", items: nodeItems });
+  const primary = upstream[0];
+  const inItems = [{ label: "input payload", expr: tok("in") }];
+  for (const f of primary?.fields ?? []) {
+    inItems.push({ label: "input." + f, expr: tok("in." + f) });
+  }
+  out.push({ heading: "INPUT", items: inItems });
+  return out;
+});
+const hasSuggestions = computed(() => sections.value.some((s) => s.items.length > 0));
+const open = ref(false);
+const wrapRef = ref(null);
+function toggle() {
+  if (!open.value && !hasSuggestions.value) return;
+  open.value = !open.value;
+}
+function onFocusOut(e) {
+  if (wrapRef.value && e.relatedTarget instanceof globalThis.Node && wrapRef.value.contains(e.relatedTarget)) return;
+  open.value = false;
+}
+function onKeydown(e) {
+  if (e.key === "Escape" && open.value) {
+    e.stopPropagation();
+    e.preventDefault();
+    open.value = false;
+  }
+}
+function onDocMousedown(e) {
+  if (wrapRef.value && !wrapRef.value.contains(e.target)) open.value = false;
+}
+onMounted(() => document.addEventListener("mousedown", onDocMousedown));
+onBeforeUnmount(() => document.removeEventListener("mousedown", onDocMousedown));
+function insert(expr) {
+  insertToken(expr);
+  open.value = false;
+}
+</script>
+
+<template>
+  <div ref="wrapRef" class="relative" @focusout="onFocusOut">
+    <div class="flex items-center gap-1">
+      <div class="expr-editor relative h-8 min-w-0 flex-1 overflow-hidden rounded-md border border-black/[0.08] bg-white px-2 font-mono text-sm transition focus-within:border-black/[0.16]">
+        <span
+          v-if="!text"
+          class="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 truncate text-muted-foreground/60"
+        >{{ placeholder }}</span>
+        <EditorContent :editor="editor" class="h-full" @keydown="onKeydown" />
+      </div>
+      <button
+        type="button"
+        title="Insert expression"
+        class="flex h-8 shrink-0 items-center rounded-md border border-black/[0.08] bg-white px-1.5 font-mono text-sm text-muted-foreground transition hover:text-foreground hover:bg-muted/30"
+        :class="open ? 'ring-2 ring-emerald-500/40' : ''"
+        @mousedown.prevent="toggle"
+      >
+        {{ triggerLabel }}
+      </button>
+    </div>
+
+    <p
+      v-if="preview"
+      class="mt-1 flex min-w-0 items-baseline gap-1 text-[11px]"
+      :title="preview.misses ? 'Parts of this expression have no sample data yet' : preview.resolved"
+    >
+      <span class="shrink-0 text-muted-foreground">→</span>
+      <span class="min-w-0 truncate font-mono" :class="preview.misses ? 'text-amber-600' : 'text-emerald-700'">{{ preview.resolved }}</span>
+    </p>
+
+    <div
+      v-if="open && hasSuggestions"
+      class="absolute right-0 top-full z-50 mt-1 max-h-64 w-72 overflow-y-auto rounded-md border border-black/[0.08] bg-white py-1 text-sm shadow-lg"
+    >
+      <template v-for="section in sections" :key="section.heading">
+        <div
+          v-if="section.items.length"
+          class="px-2 pb-0.5 pt-1.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground"
+        >
+          {{ section.heading }}
+        </div>
+        <button
+          v-for="item in section.items"
+          :key="item.expr"
+          type="button"
+          class="block w-full px-2 py-1 text-left transition hover:bg-muted/50"
+          @mousedown.prevent="insert(item.expr)"
+        >
+          <div class="truncate text-muted-foreground">
+            {{ item.label }}
+          </div>
+          <div class="truncate font-mono text-emerald-700">
+            {{ item.expr }}
+          </div>
+        </button>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style>
+.expr-editor .ProseMirror{align-items:center;display:flex;height:100%;outline:none;overflow-x:auto;scrollbar-width:none}.expr-editor .ProseMirror p{line-height:30px;margin:0;white-space:pre}.expr-pill{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);border-radius:6px;color:#047857;display:inline-block;font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;line-height:18px;margin:0 1px;padding:0 6px;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:baseline;white-space:nowrap}.expr-pill.ProseMirror-selectednode{outline:2px solid rgba(16,185,129,.5)}
+</style>

package/dist/runtime/components/Integrations/ExpressionInput.vue.d.ts

@@ -0,0 +1,19 @@
+import type { WorkflowVariable } from '../../types/integrations.js';
+type UpstreamOutput = {
+    nodeId: string;
+    nodeName?: string;
+    output: string;
+    fields?: string[];
+};
+type __VLS_Props = {
+    modelValue: unknown;
+    placeholder?: string;
+    variables?: Record<string, WorkflowVariable>;
+    upstreamOutputs?: UpstreamOutput[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Integrations/GroupFrameView.d.vue.ts

@@ -0,0 +1,28 @@
+import type { WorkflowGroup } from '../../types/integrations.js';
+interface GroupNodeData {
+    group: WorkflowGroup;
+    /** Derived frame size (expanded mode). */
+    rect: {
+        width: number;
+        height: number;
+    };
+    memberCount: number;
+    /** Absent in read-only previews — no toolbar, no editing. */
+    actions?: {
+        rename: (label: string) => void;
+        setColor: (i: number) => void;
+        toggleCollapse: () => void;
+        ungroup: () => void;
+        resize: (size: {
+            width: number;
+            height: number;
+        }) => void;
+    };
+}
+type __VLS_Props = {
+    id: string;
+    data: GroupNodeData;
+    selected?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;