@revenexx/studio-integrations 0.1.0

package/dist/runtime/pages/integrations/runs.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { ClockCircle as Clock, Play, LinkRound as Webhook } from "#solar-icons";
+import { Badge } from "@revenexx/studio";
+import RunDetailDialog from "../../components/Integrations/RunDetailDialog.vue";
+import { statusClass } from "../../utils/statusStyle";
+useHead({ title: "Runs \xB7 Integration Studio" });
+const { runs, load } = useIntegrationsRuns();
+onMounted(() => {
+  void load();
+});
+const detailOpen = ref(false);
+const selectedRun = ref(null);
+function openRun(r) {
+  selectedRun.value = r;
+  detailOpen.value = true;
+}
+function triggerIcon(type) {
+  return type === "schedule" ? Clock : type === "webhook" ? Webhook : Play;
+}
+function formatRelative(iso) {
+  if (!iso) return "\u2014";
+  const ms = Date.now() - new Date(iso).getTime();
+  if (ms < 6e4) return `${Math.max(1, Math.floor(ms / 1e3))}s ago`;
+  if (ms < 36e5) return `${Math.floor(ms / 6e4)}m ago`;
+  if (ms < 864e5) return `${Math.floor(ms / 36e5)}h ago`;
+  return `${Math.floor(ms / 864e5)}d ago`;
+}
+function formatDuration(ms) {
+  if (ms == null) return "\u2014";
+  if (ms < 1e3) return `${ms}ms`;
+  if (ms < 6e4) return `${(ms / 1e3).toFixed(2)}s`;
+  return `${(ms / 6e4).toFixed(1)}m`;
+}
+const columns = [
+  { key: "status", label: "Status", width: "100px", sortable: true, sortGetter: (r) => r.status },
+  { key: "workflow", label: "Workflow", sortable: true, sortGetter: (r) => r.workflowName.toLowerCase(), searchGetter: (r) => `${r.workflowName} ${r.id}` },
+  { key: "trigger", label: "Trigger", width: "120px", sortable: true, sortGetter: (r) => r.triggerType },
+  { key: "started", label: "Started", width: "120px", sortable: true, sortGetter: (r) => r.startedAt },
+  { key: "duration", label: "Duration", width: "100px", sortable: true, sortGetter: (r) => r.durationMs ?? -1 },
+  { key: "steps", label: "Steps", width: "80px", sortable: true, sortGetter: (r) => r.steps.length }
+];
+</script>
+
+<template>
+  <IntegrationsLayout>
+    <PageHeader
+      title="Runs"
+      description="Execution history across every workflow — sourced from Temporal."
+    />
+
+    <div class="p-4">
+      <DataTable
+        :data="runs"
+        :columns="columns"
+        :row-key="(r) => r.id"
+        :default-sort="{ column: 'started', direction: 'desc' }"
+        :search="{ placeholder: 'Search runs\u2026' }"
+        :filter="true"
+        empty-text="No runs yet — kick off a workflow to populate this view."
+        @row-click="(r) => openRun(r)"
+      >
+        <template #cell-status="{ row: run }">
+          <Badge variant="outline" :class="['text-sm border', statusClass(run.status)]">
+            {{ run.status }}
+          </Badge>
+        </template>
+
+        <template #cell-workflow="{ row: run }">
+          <div class="min-w-0">
+            <div class="font-medium text-sm truncate">{{ run.workflowName }}</div>
+            <div class="font-mono text-sm text-muted-foreground truncate">{{ run.id }}</div>
+          </div>
+        </template>
+
+        <template #cell-trigger="{ row: run }">
+          <div class="flex items-center gap-1 text-sm text-muted-foreground">
+            <component :is="triggerIcon(run.triggerType)" :size="11" />
+            {{ run.triggerType }}
+          </div>
+        </template>
+
+        <template #cell-started="{ row: run }">
+          <span class="text-sm text-muted-foreground tabular-nums">{{ formatRelative(run.startedAt) }}</span>
+        </template>
+
+        <template #cell-duration="{ row: run }">
+          <span class="text-sm tabular-nums">{{ formatDuration(run.durationMs) }}</span>
+        </template>
+
+        <template #cell-steps="{ row: run }">
+          <span class="text-sm text-muted-foreground tabular-nums">
+            {{ run.steps.filter((s) => s.status === "succeeded").length }} / {{ run.steps.length }}
+          </span>
+        </template>
+      </DataTable>
+    </div>
+
+    <RunDetailDialog v-model:open="detailOpen" :run="selectedRun" />
+  </IntegrationsLayout>
+</template>

package/dist/runtime/pages/integrations/runs.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/schedules.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/schedules.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { ClockCircle as Clock, Globus as Globe } from "#solar-icons";
+import { Badge } from "@revenexx/studio";
+useHead({ title: "Schedules \xB7 Integration Studio" });
+const router = useRouter();
+const { entries, activeCount, load } = useIntegrationsSchedules();
+onMounted(() => {
+  void load();
+});
+function describeCron(cron) {
+  const parts = cron.split(/\s+/);
+  if (parts.length !== 5) return cron;
+  const [m, h, dom, mon, dow] = parts;
+  if (cron === "0 * * * *") return "every hour";
+  if (m === "0" && /^\d+$/.test(h ?? "") && dom === "*" && mon === "*" && dow === "*") return `daily at ${h?.padStart(2, "0")}:00`;
+  if (m === "0" && h === "0" && dom === "*" && mon === "*" && dow === "*") return "daily at midnight";
+  if (dom !== "*" && mon === "*") return `on day ${dom} of each month`;
+  if (dow !== "*" && dow !== "?") return `weekly on ${dow}`;
+  return cron;
+}
+function formatRelative(iso) {
+  if (!iso) return "\u2014";
+  const ms = new Date(iso).getTime() - Date.now();
+  if (Math.abs(ms) < 6e4) return ms > 0 ? "in <1m" : "just now";
+  if (Math.abs(ms) < 36e5) {
+    const mins = Math.round(Math.abs(ms) / 6e4);
+    return ms > 0 ? `in ${mins}m` : `${mins}m ago`;
+  }
+  if (Math.abs(ms) < 864e5) {
+    const hrs = Math.round(Math.abs(ms) / 36e5);
+    return ms > 0 ? `in ${hrs}h` : `${hrs}h ago`;
+  }
+  return new Date(iso).toLocaleString(void 0, { month: "short", day: "2-digit", hour: "2-digit", minute: "2-digit" });
+}
+const columns = [
+  { key: "workflow", label: "Workflow", sortable: true, sortGetter: (e) => e.workflowName.toLowerCase(), searchGetter: (e) => `${e.workflowName} ${e.cron} ${e.timezone}` },
+  { key: "cron", label: "Cron", width: "180px", sortable: true, sortGetter: (e) => e.cron },
+  { key: "timezone", label: "Timezone", width: "140px", sortable: true, sortGetter: (e) => e.timezone },
+  { key: "nextRun", label: "Next run", width: "140px", sortable: true, sortGetter: (e) => e.nextRunAt ?? "" },
+  { key: "lastRun", label: "Last run", width: "140px", sortable: true, sortGetter: (e) => e.lastRunAt ?? "" },
+  { key: "status", label: "Status", width: "80px", sortable: true, sortGetter: (e) => e.active ? "live" : "paused" }
+];
+</script>
+
+<template>
+  <IntegrationsLayout>
+    <PageHeader
+      title="Schedules"
+      description="Every cron-driven trigger across your workflows. Click a row to open the workflow."
+    >
+      <template #actions>
+        <span class="text-sm text-muted-foreground">
+          <strong class="text-foreground">{{ activeCount }}</strong> active
+        </span>
+      </template>
+    </PageHeader>
+
+    <div class="p-4">
+      <DataTable
+        :data="entries"
+        :columns="columns"
+        :row-key="(e2) => e2.id"
+        :default-sort="{ column: 'nextRun', direction: 'asc' }"
+        :search="{ placeholder: 'Search by workflow, cron, timezone\u2026' }"
+        :filter="true"
+        empty-text="No schedules yet. Add a schedule trigger to any workflow."
+        @row-click="(e2) => router.push(`/integrations/workflows/${e2.workflowId}`)"
+      >
+        <template #cell-workflow="{ row: e }">
+          <div class="flex items-center gap-2 min-w-0">
+            <div class="flex size-7 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-500">
+              <Clock :size="14" />
+            </div>
+            <div class="min-w-0">
+              <div class="font-medium text-sm truncate">{{ e.workflowName }}</div>
+              <div class="text-sm text-muted-foreground truncate">{{ describeCron(e.cron) }}</div>
+            </div>
+          </div>
+        </template>
+
+        <template #cell-cron="{ row: e }">
+          <code class="font-mono text-sm truncate">{{ e.cron }}</code>
+        </template>
+
+        <template #cell-timezone="{ row: e }">
+          <div class="flex items-center gap-1 text-sm text-muted-foreground">
+            <Globe :size="11" />
+            {{ e.timezone }}
+          </div>
+        </template>
+
+        <template #cell-nextRun="{ row: e }">
+          <span class="text-sm tabular-nums">{{ formatRelative(e.nextRunAt) }}</span>
+        </template>
+
+        <template #cell-lastRun="{ row: e }">
+          <span class="text-sm tabular-nums text-muted-foreground">{{ formatRelative(e.lastRunAt) }}</span>
+        </template>
+
+        <template #cell-status="{ row: e }">
+          <Badge v-if="e.active" variant="outline" class="bg-emerald-500/10 border-emerald-500/20 text-emerald-700 text-sm">
+            live
+          </Badge>
+          <Badge v-else variant="outline" class="text-sm">
+            paused
+          </Badge>
+        </template>
+      </DataTable>
+    </div>
+  </IntegrationsLayout>
+</template>

package/dist/runtime/pages/integrations/schedules.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/secrets.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/secrets.vue

@@ -0,0 +1,248 @@
+<script setup>
+import { Eye, EyeClosed as EyeOff, Key as KeyRound, RefreshCircle as Loader2, MenuDots as MoreHorizontal, AddCircle as Plus, TrashBinMinimalistic as Trash2 } from "#solar-icons";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Input,
+  Label
+} from "@revenexx/studio";
+useHead({ title: "Secrets \xB7 Revenexx Cockpit" });
+const { secrets, loading, error, isValidKey, upsert, remove, load } = useIntegrationsSecrets();
+onMounted(() => {
+  void load();
+});
+const createOpen = ref(false);
+const newKey = ref("");
+const newValue = ref("");
+const showValue = ref(false);
+const saving = ref(false);
+const formError = ref(null);
+function openCreate() {
+  newKey.value = "";
+  newValue.value = "";
+  showValue.value = false;
+  formError.value = null;
+  createOpen.value = true;
+}
+async function submitCreate() {
+  const key = newKey.value.trim();
+  if (!isValidKey(key)) {
+    formError.value = "Key must match ^[A-Z0-9_]+$ (uppercase letters, digits, underscores).";
+    return;
+  }
+  if (!newValue.value) {
+    formError.value = "Value is required.";
+    return;
+  }
+  saving.value = true;
+  try {
+    await upsert(key, newValue.value);
+    createOpen.value = false;
+  } catch (e) {
+    formError.value = e.message;
+  } finally {
+    saving.value = false;
+  }
+}
+const pendingDelete = ref(null);
+const deleting = ref(false);
+async function confirmDelete() {
+  if (!pendingDelete.value) return;
+  deleting.value = true;
+  await remove(pendingDelete.value.key);
+  deleting.value = false;
+  pendingDelete.value = null;
+}
+function formatDateTime(iso) {
+  if (!iso) return "\u2014";
+  try {
+    return new Date(iso).toLocaleString(void 0, { month: "short", day: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" });
+  } catch {
+    return iso;
+  }
+}
+const columns = [
+  { key: "key", label: "Key", sortable: true, sortGetter: (s) => s.key.toLowerCase() },
+  { key: "created", label: "Created", width: "160px", sortable: true, sortGetter: (s) => s.created_at },
+  { key: "updated", label: "Updated", width: "160px", sortable: true, sortGetter: (s) => s.updated_at },
+  { key: "actions", label: "", width: "40px", toggleable: false }
+];
+</script>
+
+<template>
+  <IntegrationsLayout>
+    <PageHeader
+      title="Secrets"
+      description="Per-tenant encrypted key/value store. Values are encrypted at rest and never returned by the API."
+    >
+      <template #actions>
+        <Dialog v-model:open="createOpen">
+          <DialogTrigger as-child>
+            <Button class="h-7 text-sm" @click="openCreate">
+              <Plus :size="14" />
+              New secret
+            </Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Create a secret</DialogTitle>
+              <DialogDescription class="text-sm">
+                Once stored, the value is encrypted with AES-256-GCM and never echoed back. You can overwrite it later, but to read it you have to know it.
+              </DialogDescription>
+            </DialogHeader>
+
+            <div class="space-y-4 py-2">
+              <div class="space-y-1.5">
+                <Label for="sec-key">Key</Label>
+                <Input
+                  id="sec-key"
+                  v-model="newKey"
+                  placeholder="STRIPE_API_KEY"
+                  class="font-mono bg-white"
+                  autocomplete="off"
+                />
+                <p class="text-sm text-muted-foreground">
+                  Pattern: <code class="font-mono">^[A-Z0-9_]+$</code>
+                </p>
+              </div>
+              <div class="space-y-1.5">
+                <Label for="sec-value">Value</Label>
+                <div class="relative">
+                  <Input
+                    id="sec-value"
+                    v-model="newValue"
+                    :type="showValue ? 'text' : 'password'"
+                    class="font-mono bg-white pr-9"
+                    autocomplete="off"
+                  />
+                  <button
+                    type="button"
+                    class="absolute right-1 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded text-muted-foreground hover:text-foreground"
+                    @click="showValue = !showValue"
+                  >
+                    <component :is="showValue ? EyeOff : Eye" :size="14" />
+                  </button>
+                </div>
+              </div>
+
+              <div v-if="formError" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
+                {{ formError }}
+              </div>
+            </div>
+
+            <DialogFooter>
+              <Button variant="outline" :disabled="saving" @click="createOpen = false">
+                Cancel
+              </Button>
+              <Button :disabled="saving" @click="submitCreate">
+                <Loader2 v-if="saving" :size="14" class="animate-spin" />
+                {{ saving ? "Saving\u2026" : "Save" }}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </template>
+    </PageHeader>
+
+    <div class="p-4">
+      <div v-if="error" class="mb-3 rounded-lg border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
+        {{ error }}
+      </div>
+      <div v-if="loading && !secrets.length" class="flex items-center gap-2 px-1 py-3 text-sm text-muted-foreground">
+        <Loader2 :size="14" class="animate-spin" /> Loading secrets…
+      </div>
+      <DataTable
+        :data="secrets"
+        :columns="columns"
+        :row-key="(s2) => s2.key"
+        :default-sort="{ column: 'key', direction: 'asc' }"
+        :search="{ placeholder: 'Search keys\u2026' }"
+        :filter="true"
+        empty-text="No secrets yet."
+      >
+        <template #cell-key="{ row: s }">
+          <div class="flex items-center gap-2 min-w-0">
+            <div class="flex size-7 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-500">
+              <KeyRound :size="14" />
+            </div>
+            <div class="min-w-0">
+              <div class="font-mono text-sm truncate">{{ s.key }}</div>
+              <div class="text-sm text-muted-foreground">Value masked — write-only</div>
+            </div>
+          </div>
+        </template>
+
+        <template #cell-created="{ row: s }">
+          <span class="text-sm tabular-nums text-muted-foreground">{{ formatDateTime(s.created_at) }}</span>
+        </template>
+
+        <template #cell-updated="{ row: s }">
+          <span class="text-sm tabular-nums text-muted-foreground">{{ formatDateTime(s.updated_at) }}</span>
+        </template>
+
+        <template #cell-actions="{ row: s }">
+          <div @click.stop>
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <Button variant="ghost" size="icon" class="size-7">
+                  <MoreHorizontal :size="14" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem class="text-destructive focus:text-destructive" @select="pendingDelete = s">
+                  <Trash2 :size="14" />
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </template>
+      </DataTable>
+    </div>
+
+    <AlertDialog :open="!!pendingDelete" @update:open="(v) => {
+  if (!v) pendingDelete = null;
+}">
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete secret?</AlertDialogTitle>
+          <AlertDialogDescription>
+            <span v-if="pendingDelete">
+              <span class="font-mono font-medium text-foreground">{{ pendingDelete.key }}</span>
+              will be permanently removed. Workflows that reference it will break the next time they run.
+            </span>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <Button variant="outline" :disabled="deleting" @click="pendingDelete = null">
+            Cancel
+          </Button>
+          <Button class="bg-destructive text-white hover:bg-destructive/90" :disabled="deleting" @click="confirmDelete">
+            <Loader2 v-if="deleting" :size="14" class="animate-spin" />
+            {{ deleting ? "Deleting\u2026" : "Delete" }}
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  </IntegrationsLayout>
+</template>

package/dist/runtime/pages/integrations/secrets.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/[id].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;