@revenexx/studio-integrations 0.1.0

package/dist/runtime/pages/integrations/workflows/[id].vue

@@ -0,0 +1,326 @@
+<script setup>
+import { computed, onMounted, ref, watch } from "vue";
+import { ArrowLeft, ClockCircle as Clock, History as HistoryIcon, RefreshCircle as Loader2, SidebarMinimalistic as PanelLeftOpen, Pause, Play, Diskette as Save, LinkRound as Webhook } from "#solar-icons";
+import { Button } from "@revenexx/studio";
+import WorkflowEditor from "../../../components/Integrations/WorkflowEditor.vue";
+const route = useRoute();
+const router = useRouter();
+const { workflows, get, update, toggleActive } = useIntegrationsWorkflows();
+const { focused, toggle: toggleFocus, autoEnable } = useIntegrationsFocus();
+autoEnable();
+const id = computed(() => Number(route.params.id));
+const workflow = computed(() => workflows.value.find((w) => w.id === id.value) ?? null);
+useHead({ title: () => `${workflow.value?.name ?? "Workflow"} \xB7 Revenexx Cockpit` });
+const tab = ref("editor");
+const tabs = [
+  { key: "editor", label: "Editor" },
+  { key: "runs", label: "Runs" },
+  { key: "triggers", label: "Triggers" },
+  { key: "variables", label: "Variables" },
+  { key: "settings", label: "Settings" },
+  { key: "history", label: "History" }
+];
+const dirtyBlob = ref(null);
+const isDirty = computed(() => dirtyBlob.value !== null);
+const saving = ref(false);
+const saveError = ref(null);
+const { load: loadCredentials, needsReauth } = useIntegrationsCredentials();
+onMounted(() => {
+  void loadCredentials();
+});
+const reauthCredentials = computed(() => {
+  const blob = JSON.stringify(dirtyBlob.value ?? workflow.value?.blob ?? {});
+  return needsReauth.value.filter((c) => blob.includes(c.id));
+});
+watch(id, async () => {
+  const w = await get(id.value);
+  if (!w) await router.push("/integrations/workflows");
+  dirtyBlob.value = null;
+}, { immediate: true });
+function onChange(blob) {
+  dirtyBlob.value = blob;
+}
+const togglingTrigger = ref(null);
+async function toggleTrigger(trg) {
+  if (!workflow.value) return;
+  togglingTrigger.value = trg.id;
+  saveError.value = null;
+  trg.active = !trg.active;
+  try {
+    await update(workflow.value.id, {
+      name: workflow.value.name,
+      description: workflow.value.description,
+      blob: workflow.value.blob,
+      active: workflow.value.active,
+      executionMode: workflow.value.execution_mode
+    });
+  } catch (e) {
+    trg.active = !trg.active;
+    saveError.value = e.message || "Could not update the trigger.";
+  } finally {
+    togglingTrigger.value = null;
+  }
+}
+const { trigger: triggerRun } = useIntegrationsRuns();
+const running = ref(false);
+const runResult = ref(null);
+const runError = ref(null);
+async function runNow() {
+  if (!workflow.value) return;
+  running.value = true;
+  runError.value = null;
+  runResult.value = null;
+  try {
+    runResult.value = await triggerRun(workflow.value.id, {});
+  } catch (e) {
+    runError.value = e.message || "Could not start the run.";
+  } finally {
+    running.value = false;
+  }
+}
+async function save() {
+  if (!workflow.value || !dirtyBlob.value) return;
+  saving.value = true;
+  saveError.value = null;
+  try {
+    await update(workflow.value.id, {
+      name: workflow.value.name,
+      description: workflow.value.description,
+      blob: dirtyBlob.value,
+      active: workflow.value.active,
+      executionMode: workflow.value.execution_mode
+    });
+    dirtyBlob.value = null;
+  } catch (e) {
+    saveError.value = e.message || "Save failed.";
+  } finally {
+    saving.value = false;
+  }
+}
+function formatDateTime(iso) {
+  if (!iso) return "\u2014";
+  try {
+    return new Date(iso).toLocaleString();
+  } catch {
+    return iso;
+  }
+}
+</script>
+
+<template>
+  <IntegrationsLayout>
+    <!-- Detail surface uses a flex-col so the editor tab can claim the
+         remaining height below the page header. -->
+    <div class="flex h-full flex-col">
+      <template v-if="workflow">
+        <PageHeader
+        :title="workflow.name"
+      >
+        <template #actions>
+          <span v-if="isDirty" class="text-sm text-amber-600">Unsaved changes</span>
+          <Button
+            variant="ghost"
+            size="icon"
+            class="size-7"
+            :title="focused ? 'Show studio sidebar' : 'Hide studio sidebar'"
+            @click="toggleFocus"
+          >
+            <PanelLeftOpen :size="14" :class="focused ? '' : 'rotate-180'" />
+          </Button>
+          <Button variant="outline" class="h-7 text-sm" @click="toggleActive(workflow.id)">
+            <component :is="workflow.active ? Pause : Play" :size="12" />
+            {{ workflow.active ? "Pause" : "Activate" }}
+          </Button>
+          <Button class="h-7 text-sm" :disabled="!isDirty || saving" @click="save">
+            <Loader2 v-if="saving" :size="12" class="animate-spin" />
+            <Save v-else :size="12" />
+            {{ saving ? "Saving\u2026" : "Save" }}
+          </Button>
+          <NuxtLink to="/integrations/workflows">
+            <Button variant="ghost" class="h-7 text-sm">
+              <ArrowLeft :size="12" />
+              Workflows
+            </Button>
+          </NuxtLink>
+        </template>
+
+      </PageHeader>
+
+      <TabBar v-model="tab" :tabs="tabs" class="shrink-0 px-4" />
+
+      <div v-if="saveError" class="border-b border-rose-500/20 bg-rose-500/5 px-4 py-2 text-sm text-rose-700">
+        {{ saveError }}
+      </div>
+
+      <div v-if="reauthCredentials.length" class="border-b border-amber-500/20 bg-amber-500/5 px-4 py-2 text-sm text-amber-800">
+        {{ reauthCredentials.length }} credential{{ reauthCredentials.length === 1 ? "" : "s" }} used here
+        need{{ reauthCredentials.length === 1 ? "s" : "" }} reconnecting
+        ({{ reauthCredentials.map((c) => c.name).join(", ") }}) —
+        <NuxtLink to="/integrations/credentials" class="font-medium underline">
+          fix in Credentials
+        </NuxtLink>.
+      </div>
+
+      <!-- Editor tab — fills the remaining height inside the panel via
+           the flex wrapper in the studio layout. -->
+      <div v-if="tab === 'editor'" class="flex-1 min-h-0">
+        <WorkflowEditor :workflow="workflow" @change="onChange" />
+      </div>
+
+      <!-- Runs — trigger a run now; full run list lives on the Runs page. -->
+      <div v-else-if="tab === 'runs'" class="p-6 space-y-3">
+        <div class="rounded-lg border border-black/[0.06] bg-white p-4 flex items-center justify-between gap-3">
+          <div>
+            <h3 class="text-sm font-semibold">
+              Run this workflow
+            </h3>
+            <p class="mt-0.5 text-sm text-muted-foreground">
+              Triggers a manual run via the API. See all executions on the Runs page.
+            </p>
+          </div>
+          <Button :disabled="running" class="h-8 text-sm" @click="runNow">
+            <Loader2 v-if="running" :size="14" class="animate-spin" />
+            <Play v-else :size="14" />
+            {{ running ? "Starting\u2026" : "Run now" }}
+          </Button>
+        </div>
+        <div v-if="runError" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
+          {{ runError }}
+        </div>
+        <pre v-if="runResult" class="overflow-auto rounded-lg border border-black/[0.06] bg-slate-50 p-3 text-xs">{{ runResult }}</pre>
+      </div>
+
+      <!-- Triggers tab — list of all triggers with sync to webhooks page -->
+      <div v-else-if="tab === 'triggers'" class="p-6 space-y-3">
+        <div
+          v-for="trg in workflow.blob.triggers"
+          :key="trg.id"
+          class="rounded-lg border border-black/[0.06] bg-white p-3 flex items-center gap-3"
+        >
+          <component
+            :is="trg.type === 'schedule' ? Clock : trg.type === 'webhook' ? Webhook : Play"
+            :size="18"
+            class="text-emerald-600"
+          />
+          <div class="flex-1 min-w-0">
+            <div class="text-sm font-medium">
+              {{ trg.type === "schedule" ? "Schedule" : trg.type === "webhook" ? "Webhook" : "Manual" }}
+            </div>
+            <div class="text-sm text-muted-foreground truncate font-mono">
+              <template v-if="trg.type === 'schedule'">
+                cron: {{ trg.config.cron }} ({{ trg.config.timezone ?? "UTC" }})
+              </template>
+              <template v-else-if="trg.type === 'webhook'">
+                {{ trg.config.method }} {{ trg.config.path }}
+              </template>
+              <template v-else>on demand</template>
+            </div>
+          </div>
+          <div class="flex shrink-0 items-center gap-2">
+            <span class="text-xs" :class="trg.active ? 'text-emerald-600' : 'text-muted-foreground'">
+              {{ trg.active ? "Active" : "Inactive" }}
+            </span>
+            <button
+              type="button"
+              :disabled="togglingTrigger === trg.id"
+              class="relative inline-flex h-5 w-9 items-center rounded-full transition-colors disabled:opacity-50"
+              :class="trg.active ? 'bg-emerald-500' : 'bg-slate-300'"
+              :aria-pressed="trg.active"
+              :title="trg.active ? 'Deactivate trigger' : 'Activate trigger'"
+              @click="toggleTrigger(trg)"
+            >
+              <span
+                class="inline-block size-4 transform rounded-full bg-white shadow transition-transform"
+                :class="trg.active ? 'translate-x-[18px]' : 'translate-x-0.5'"
+              />
+            </button>
+          </div>
+        </div>
+        <p class="text-xs text-muted-foreground">
+          A workflow run needs at least one <span class="font-medium">active</span> trigger.
+        </p>
+      </div>
+
+      <!-- Variables tab -->
+      <div v-else-if="tab === 'variables'" class="p-6">
+        <div v-if="!Object.keys(workflow.blob.variables ?? {}).length" class="rounded-lg border border-black/[0.06] bg-white p-6 text-center text-sm text-muted-foreground">
+          No variables defined for this workflow.
+        </div>
+        <div v-else class="rounded-lg border border-black/[0.06] bg-white">
+          <div class="grid grid-cols-[1fr_120px_1fr] gap-2 border-b border-black/[0.06] px-3 py-2 text-mono text-muted-foreground">
+            <div>Key</div>
+            <div>Type</div>
+            <div>Default</div>
+          </div>
+          <div
+            v-for="(v, key) in workflow.blob.variables ?? {}"
+            :key="key"
+            class="grid grid-cols-[1fr_120px_1fr] gap-2 border-b border-black/[0.04] px-3 py-2 text-sm last:border-b-0"
+          >
+            <div class="font-mono">
+              {{ key }}
+            </div>
+            <div class="text-muted-foreground">
+              {{ v.type }}
+            </div>
+            <div class="font-mono truncate">
+              {{ JSON.stringify(v.default) }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Settings -->
+      <div v-else-if="tab === 'settings'" class="p-6 space-y-4 text-sm">
+        <div class="rounded-lg border border-black/[0.06] bg-white p-4 space-y-2">
+          <div class="text-mono text-muted-foreground">
+            Metadata
+          </div>
+          <div class="grid grid-cols-[120px_1fr] gap-y-2 gap-x-3 text-sm">
+            <div class="text-muted-foreground">
+              ID
+            </div><div class="font-mono">
+              {{ workflow.id }}
+            </div>
+            <div class="text-muted-foreground">
+              Definition
+            </div><div class="font-mono">
+              {{ workflow.blob_definition_version }}
+            </div>
+            <div class="text-muted-foreground">
+              Revision
+            </div><div class="font-mono">
+              r{{ workflow.revision }}
+            </div>
+            <div class="text-muted-foreground">
+              Created
+            </div><div>{{ formatDateTime(workflow.created_at) }}</div>
+            <div class="text-muted-foreground">
+              Updated
+            </div><div>{{ formatDateTime(workflow.updated_at) }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- History -->
+      <div v-else-if="tab === 'history'" class="p-6">
+        <div class="rounded-lg border border-black/[0.06] bg-white p-6 text-center">
+          <div class="flex size-12 items-center justify-center rounded-full bg-slate-100 text-slate-500 mb-3 mx-auto">
+            <HistoryIcon :size="22" />
+          </div>
+          <h3 class="text-sm font-semibold">
+            {{ workflow.revision }} revision{{ workflow.revision === 1 ? "" : "s" }}
+          </h3>
+          <p class="mt-1 text-sm text-muted-foreground max-w-md mx-auto">
+            Every save that changes the blob bumps the revision and snapshots the previous one. Once history endpoints land you'll be able to diff and roll back from here.
+          </p>
+        </div>
+        </div>
+      </template>
+
+      <div v-else class="p-12 text-center text-sm text-muted-foreground">
+        Loading…
+      </div>
+    </div>
+  </IntegrationsLayout>
+</template>

package/dist/runtime/pages/integrations/workflows/[id].vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/pages/integrations/workflows/index.d.vue.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/pages/integrations/workflows/index.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { AddCircle as Plus } from "#solar-icons";
+import { Button } from "@revenexx/studio";
+import WorkflowsTable from "../../../components/Integrations/WorkflowsTable.vue";
+useHead({ title: "Workflows \xB7 Revenexx Cockpit" });
+const { workflows, load } = useIntegrationsWorkflows();
+onMounted(() => {
+  void load();
+});
+</script>
+
+<template>
+  <IntegrationsLayout>
+    <PageHeader
+      title="Workflows"
+    >
+      <template #actions>
+        <NuxtLink to="/integrations/workflows/new">
+          <Button class="h-7 text-sm">
+            <Plus :size="14" />
+            New workflow
+          </Button>
+        </NuxtLink>
+      </template>
+    </PageHeader>
+
+    <div class="p-4">
+      <WorkflowsTable :workflows="workflows" />
+    </div>
+  </IntegrationsLayout>
+</template>

package/dist/runtime/pages/integrations/workflows/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/pages/integrations/workflows/new.d.vue.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/pages/integrations/workflows/new.vue

@@ -0,0 +1,153 @@
+<script setup>
+import { ref } from "vue";
+import { ArrowLeft, ClockCircle as Clock, RefreshCircle as Loader2, Play, LinkRound as Webhook } from "#solar-icons";
+import { Button, Input, Label, Textarea } from "@revenexx/studio";
+useHead({ title: "New workflow \xB7 Revenexx Cockpit" });
+const router = useRouter();
+const { create } = useIntegrationsWorkflows();
+const name = ref("");
+const description = ref("");
+const triggerType = ref("manual");
+const executionMode = ref("async_only");
+const submitting = ref(false);
+const error = ref(null);
+const executionModes = [
+  { key: "async_only", label: "Async only", hint: "Always queued." },
+  { key: "sync_only", label: "Sync only", hint: "Waits for the result." },
+  { key: "caller_decides", label: "Caller decides", hint: "The request chooses." }
+];
+const triggerOptions = [
+  { key: "manual", label: "Manual", hint: "Run on demand from the editor or API.", icon: Play, tile: "bg-slate-100 text-slate-500" },
+  { key: "schedule", label: "Schedule", hint: "Cron-based recurring execution.", icon: Clock, tile: "bg-slate-100 text-slate-500" },
+  { key: "webhook", label: "Webhook", hint: "Trigger from an inbound HTTP call.", icon: Webhook, tile: "bg-slate-100 text-slate-500" }
+];
+async function submit() {
+  if (!name.value.trim()) {
+    error.value = "Name is required.";
+    return;
+  }
+  submitting.value = true;
+  error.value = null;
+  try {
+    const handle = globalThis.crypto?.randomUUID?.() ?? `trg-${Date.now()}`;
+    const config = triggerType.value === "schedule" ? { cron: "0 * * * *", timezone: "Europe/Berlin" } : triggerType.value === "webhook" ? { path: "/incoming", method: "POST" } : {};
+    const blob = {
+      nodeManifestVersion: "v0-draft",
+      name: name.value.trim(),
+      description: description.value.trim() || void 0,
+      triggers: [{ id: handle, type: triggerType.value, active: true, config }],
+      nodes: [],
+      edges: []
+    };
+    const created = await create({
+      name: name.value.trim(),
+      description: description.value.trim() || null,
+      blob,
+      active: false,
+      executionMode: executionMode.value
+    });
+    await router.push(`/integrations/workflows/${created.id}`);
+  } catch (e) {
+    error.value = e.message || "Could not create the workflow.";
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>
+
+<template>
+  <IntegrationsLayout>
+    <PageHeader
+      title="New workflow"
+      description="Give your workflow a name, pick a trigger, and you'll land in the editor."
+    >
+      <template #actions>
+        <NuxtLink to="/integrations/workflows">
+          <Button variant="outline" class="h-7 text-sm">
+            <ArrowLeft :size="14" />
+            Back
+          </Button>
+        </NuxtLink>
+      </template>
+    </PageHeader>
+
+    <form class=" p-6 space-y-6" @submit.prevent="submit">
+      <div class="space-y-1.5">
+        <Label for="wf-name">Name</Label>
+        <Input id="wf-name" v-model="name" placeholder="Sync orders nightly" class="bg-white" />
+      </div>
+
+      <div class="space-y-1.5">
+        <Label for="wf-desc">Description</Label>
+        <Textarea
+          id="wf-desc"
+          v-model="description"
+          rows="3"
+          placeholder="Optional — what this workflow does and why it exists."
+          class="bg-white"
+        />
+      </div>
+
+      <div class="space-y-2">
+        <Label>Trigger</Label>
+        <div class="grid gap-2 sm:grid-cols-3">
+          <button
+            v-for="opt in triggerOptions"
+            :key="opt.key"
+            type="button"
+            class="rounded-lg border border-black/[0.06] bg-white p-3 text-left transition hover:border-black/20 hover:shadow-sm"
+            :class="triggerType === opt.key ? 'ring-2 ring-emerald-500/40 border-emerald-500/30' : ''"
+            @click="triggerType = opt.key"
+          >
+            <span class="flex size-7 items-center justify-center rounded-md mb-2" :class="opt.tile">
+              <component :is="opt.icon" :size="14" :stroke-width="2.25" />
+            </span>
+            <div class="text-sm font-medium">
+              {{ opt.label }}
+            </div>
+            <p class="mt-0.5 text-sm text-muted-foreground">
+              {{ opt.hint }}
+            </p>
+          </button>
+        </div>
+      </div>
+
+      <div class="space-y-2">
+        <Label>Execution mode</Label>
+        <div class="grid gap-2 sm:grid-cols-3">
+          <button
+            v-for="opt in executionModes"
+            :key="opt.key"
+            type="button"
+            class="rounded-lg border border-black/[0.06] bg-white p-3 text-left transition hover:border-black/20 hover:shadow-sm"
+            :class="executionMode === opt.key ? 'ring-2 ring-emerald-500/40 border-emerald-500/30' : ''"
+            @click="executionMode = opt.key"
+          >
+            <div class="text-sm font-medium">
+              {{ opt.label }}
+            </div>
+            <p class="mt-0.5 text-sm text-muted-foreground">
+              {{ opt.hint }}
+            </p>
+          </button>
+        </div>
+      </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 class="flex gap-2 pt-2">
+        <Button type="submit" :disabled="submitting" class="h-8 text-sm">
+          <Loader2 v-if="submitting" :size="14" class="animate-spin" />
+          {{ submitting ? "Creating\u2026" : "Create and open editor" }}
+        </Button>
+        <NuxtLink to="/integrations/workflows">
+          <Button type="button" variant="outline" class="h-8 text-sm">
+            Cancel
+          </Button>
+        </NuxtLink>
+      </div>
+    </form>
+  </IntegrationsLayout>
+</template>

package/dist/runtime/pages/integrations/workflows/new.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;