@revenexx/studio-integrations 0.1.0

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

@@ -0,0 +1,82 @@
+<script setup>
+import { computed } from "vue";
+import { Handle, Position, useVueFlow } from "@vue-flow/core";
+import { NodeToolbar } from "@vue-flow/node-toolbar";
+import { ClockCircle as Clock, Play, TrashBinMinimalistic as Trash2, LinkRound as Webhook, Bolt } from "#solar-icons";
+const props = defineProps({
+  id: { type: String, required: true },
+  data: { type: Object, required: true },
+  selected: { type: Boolean, required: false }
+});
+defineOptions({ inheritAttrs: false });
+defineEmits(["updateNodeInternals"]);
+const icon = computed(() => {
+  return props.data.type === "schedule" ? Clock : props.data.type === "webhook" ? Webhook : props.data.type === "event" ? Bolt : Play;
+});
+const subtitle = computed(() => {
+  const c = props.data.config;
+  if (props.data.type === "schedule") return c.cron ?? "no cron set";
+  if (props.data.type === "webhook") return `${c.method ?? "POST"} ${c.path ?? "/"}`;
+  if (props.data.type === "event") return c.event_type ? `on ${c.event_type}` : "no event set";
+  return "On demand";
+});
+const title = computed(() => {
+  const n = props.data.name;
+  if (!n) return props.data.type.charAt(0).toUpperCase() + props.data.type.slice(1);
+  return typeof n === "string" ? n : Object.values(n)[0];
+});
+const flow = useVueFlow();
+function remove() {
+  flow.removeNodes([props.id]);
+}
+const SIDES = ["top", "right", "bottom", "left"];
+function sideToPosition(s) {
+  return s === "top" ? Position.Top : s === "right" ? Position.Right : s === "bottom" ? Position.Bottom : Position.Left;
+}
+</script>
+
+<template>
+  <NodeToolbar :position="Position.Top" :offset="36" class="flex items-center gap-1 rounded-md border border-black/[0.08] bg-white px-1 py-1 shadow-md">
+    <button
+      type="button"
+      class="flex h-6 items-center gap-1 rounded px-1.5 text-sm text-rose-600 hover:bg-rose-50"
+      title="Delete"
+      @click="remove"
+    >
+      <Trash2 :size="11" />
+    </button>
+  </NodeToolbar>
+
+  <div
+    class="w-[200px] rounded-lg border-2 bg-gradient-to-br from-emerald-50 to-white transition-all duration-150"
+    :class="selected ? 'border-emerald-500 shadow-[0_0_0_2px_rgba(16,185,129,0.18)]' : 'border-emerald-400/40 shadow-sm hover:shadow-md hover:border-emerald-500/60'"
+  >
+    <div class="flex items-center gap-2 px-3 py-2">
+      <span class="flex size-7 items-center justify-center rounded-md bg-emerald-500 text-white shadow-sm">
+        <component :is="icon" :size="14" :stroke-width="2.5" />
+      </span>
+      <div class="min-w-0">
+        <div class="text-sm font-semibold text-foreground leading-tight truncate">
+          {{ title }}
+        </div>
+        <div class="text-sm text-muted-foreground/80 truncate font-mono">
+          {{ subtitle }}
+        </div>
+      </div>
+    </div>
+    <div class="border-t border-emerald-500/15 bg-emerald-500/[0.04] rounded-b-md px-3 py-1 text-mono text-emerald-700/80 font-semibold">
+      Trigger · {{ data.type }}
+    </div>
+  </div>
+
+  <!-- Output handles on all 4 sides. The blob's `from.output` stays
+       "default"; the side suffix is stripped on persist. -->
+  <Handle
+    v-for="side in SIDES"
+    :id="`default__${side}`"
+    :key="side"
+    type="source"
+    :position="sideToPosition(side)"
+    class="!size-2 !rounded-full !border-2 !border-white !bg-emerald-500 opacity-80 transition-all hover:!size-2.5 hover:!bg-emerald-600 hover:opacity-100"
+  />
+</template>

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

@@ -0,0 +1,8 @@
+import type { WorkflowTrigger } from '../../types/integrations.js';
+type __VLS_Props = {
+    id: string;
+    data: WorkflowTrigger;
+    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;

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

@@ -0,0 +1,6 @@
+import type { Workflow as WorkflowResource } from '../../types/integrations.js';
+type __VLS_Props = {
+    workflows: WorkflowResource[];
+};
+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/WorkflowsTable.vue

@@ -0,0 +1,268 @@
+<script setup>
+import { ClockCircle as Clock, Globus as Globe, RefreshCircle as Loader2, MenuDots as MoreHorizontal, Pause, Play, TrashBinMinimalistic as Trash2, LinkRound as Webhook, Programming as Workflow, Bolt } from "#solar-icons";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  Badge,
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "@revenexx/studio";
+defineProps({
+  workflows: { type: Array, required: true }
+});
+const router = useRouter();
+const { remove, toggleActive } = useIntegrationsWorkflows();
+const { runs, load: loadRuns, list: listRuns } = useIntegrationsRuns();
+onMounted(() => {
+  void loadRuns();
+});
+function lastRunFor(id) {
+  void runs.value.length;
+  return listRuns({ workflowId: id })[0] ?? null;
+}
+function runBadge(status) {
+  switch (status) {
+    case "succeeded":
+      return { label: "Success", class: "bg-emerald-500/15 text-emerald-700 border-emerald-500/20" };
+    case "failed":
+      return { label: "Failed", class: "bg-rose-500/15 text-rose-700 border-rose-500/20" };
+    case "running":
+      return { label: "Running", class: "bg-sky-500/15 text-sky-700 border-sky-500/20" };
+    case "queued":
+      return { label: "Queued", class: "bg-amber-500/10 text-amber-700 border-amber-500/20" };
+    case "cancelled":
+      return { label: "Cancelled", class: "bg-slate-100 text-slate-700 border-slate-200" };
+  }
+}
+const pendingDelete = ref(null);
+const deleting = ref(false);
+function askDelete(wf) {
+  pendingDelete.value = wf;
+}
+async function confirmDelete() {
+  const wf = pendingDelete.value;
+  if (!wf) return;
+  deleting.value = true;
+  try {
+    await remove(wf.id);
+    pendingDelete.value = null;
+  } finally {
+    deleting.value = false;
+  }
+}
+function triggerIcon(type) {
+  return type === "schedule" ? Clock : type === "webhook" ? Webhook : type === "event" ? Bolt : Play;
+}
+function statusBadge(wf) {
+  if (!wf.active) return { label: "Paused", class: "bg-slate-100 text-slate-700 border-slate-200" };
+  if (wf.revision === 0) return { label: "Draft", class: "bg-amber-500/10 text-amber-700 border-amber-500/20" };
+  return { label: "Active", class: "bg-emerald-500/10 text-emerald-700 border-emerald-500/20" };
+}
+function formatDateTime(iso) {
+  if (!iso) return "\u2014";
+  try {
+    return new Date(iso).toLocaleString(void 0, {
+      month: "short",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  } catch {
+    return iso;
+  }
+}
+const columns = [
+  {
+    key: "name",
+    label: "Name",
+    sortable: true,
+    sortGetter: (w) => w.name.toLowerCase(),
+    searchGetter: (w) => `${w.name} ${w.description ?? ""}`
+  },
+  {
+    key: "status",
+    label: "Status",
+    width: "100px",
+    sortable: true,
+    sortGetter: (w) => w.active ? w.revision === 0 ? "draft" : "active" : "paused"
+  },
+  {
+    key: "triggers",
+    label: "Triggers",
+    width: "140px",
+    sortable: true,
+    sortGetter: (w) => w.blob.triggers.map((t) => t.type).join(",")
+  },
+  {
+    key: "nodes",
+    label: "Nodes",
+    width: "100px",
+    sortable: true,
+    sortGetter: (w) => w.blob.nodes.length
+  },
+  {
+    key: "revision",
+    label: "Revision",
+    width: "100px",
+    sortable: true,
+    sortGetter: (w) => w.revision
+  },
+  {
+    key: "lastRun",
+    label: "Last run",
+    width: "150px",
+    sortable: true,
+    sortGetter: (w) => lastRunFor(w.id)?.startedAt ?? ""
+  },
+  {
+    key: "updated",
+    label: "Updated",
+    width: "120px",
+    sortable: true,
+    sortGetter: (w) => w.updated_at ?? ""
+  },
+  {
+    key: "actions",
+    label: "",
+    width: "40px",
+    toggleable: false
+  }
+];
+</script>
+
+<template>
+  <DataTable
+    :data="workflows"
+    :columns="columns"
+    :row-key="(wf2) => wf2.id"
+    :default-sort="{ column: 'updated', direction: 'desc' }"
+    :search="{ placeholder: 'Search workflows\u2026' }"
+    :filter="true"
+    empty-text="No workflows yet."
+    @row-click="(wf2) => router.push(`/integrations/workflows/${wf2.id}`)"
+  >
+    <!-- Name (icon + title + description) -->
+    <template #cell-name="{ row: wf }">
+      <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">
+          <Workflow :size="14" />
+        </div>
+        <div class="flex flex-col min-w-0">
+          <span class="font-medium text-sm truncate">{{ wf.name }}</span>
+          <span v-if="wf.description" class="text-sm text-muted-foreground truncate">{{ wf.description }}</span>
+        </div>
+      </div>
+    </template>
+
+    <template #cell-status="{ row: wf }">
+      <Badge variant="outline" :class="['text-sm border', statusBadge(wf).class]">
+        {{ statusBadge(wf).label }}
+      </Badge>
+    </template>
+
+    <template #cell-triggers="{ row: wf }">
+      <div class="flex items-center gap-1 text-sm text-muted-foreground">
+        <span
+          v-for="t in wf.blob.triggers"
+          :key="t.id"
+          class="inline-flex items-center gap-1 rounded-md bg-muted/60 px-1.5 py-0.5"
+        >
+          <component :is="triggerIcon(t.type)" :size="11" />
+          {{ t.type }}
+        </span>
+      </div>
+    </template>
+
+    <template #cell-nodes="{ row: wf }">
+      <span class="text-sm text-muted-foreground tabular-nums">
+        {{ wf.blob.nodes.length }} node<span v-if="wf.blob.nodes.length !== 1">s</span>
+      </span>
+    </template>
+
+    <template #cell-revision="{ row: wf }">
+      <span class="text-sm text-muted-foreground tabular-nums">r{{ wf.revision }}</span>
+    </template>
+
+    <template #cell-lastRun="{ row: wf }">
+      <div v-if="lastRunFor(wf.id)" class="flex items-center gap-2 min-w-0">
+        <Badge variant="outline" :class="['text-sm border shrink-0', runBadge(lastRunFor(wf.id).status).class]">
+          {{ runBadge(lastRunFor(wf.id).status).label }}
+        </Badge>
+        <span class="text-sm tabular-nums text-muted-foreground truncate">
+          {{ formatDateTime(lastRunFor(wf.id).startedAt) }}
+        </span>
+      </div>
+      <span v-else class="text-sm text-muted-foreground">—</span>
+    </template>
+
+    <template #cell-updated="{ row: wf }">
+      <span class="text-sm tabular-nums text-muted-foreground truncate">
+        {{ formatDateTime(wf.updated_at) }}
+      </span>
+    </template>
+
+    <template #cell-actions="{ row: wf }">
+      <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 @select="router.push(`/integrations/workflows/${wf.id}`)">
+              <Globe :size="14" /> Open editor
+            </DropdownMenuItem>
+            <DropdownMenuItem @select="toggleActive(wf.id)">
+              <component :is="wf.active ? Pause : Play" :size="14" />
+              {{ wf.active ? "Pause" : "Activate" }}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              class="text-destructive focus:text-destructive"
+              @select="askDelete(wf)"
+            >
+              <Trash2 :size="14" /> Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </template>
+  </DataTable>
+
+  <AlertDialog :open="!!pendingDelete" @update:open="(v) => {
+  if (!v) pendingDelete = null;
+}">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Delete workflow?</AlertDialogTitle>
+        <AlertDialogDescription>
+          <span v-if="pendingDelete">
+            <span class="font-medium text-foreground">{{ pendingDelete.name }}</span>
+            and all its revision history will be permanently deleted.
+          </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>
+</template>

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

@@ -0,0 +1,6 @@
+import type { Workflow as WorkflowResource } from '../../types/integrations.js';
+type __VLS_Props = {
+    workflows: WorkflowResource[];
+};
+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/workflowLayout.d.ts

@@ -0,0 +1,17 @@
+import type { Edge as VFEdge, Node as VFNode } from '@vue-flow/core';
+/**
+ * Pure layout helper. Takes the current Vue Flow nodes + edges, runs them
+ * through dagre with horizontal direction (LR), and returns a new array
+ * of nodes with updated `position`. Edges are unchanged.
+ *
+ * Dagre's coordinates are center-based; Vue Flow expects top-left origin,
+ * so we offset by half the node size on each axis. Sizes default to a
+ * comfortable card width — the canvas re-fits after applying.
+ */
+export declare function layoutWorkflowNodes(nodes: VFNode[], edges: VFEdge[], options?: {
+    direction?: 'LR' | 'TB';
+    nodeWidth?: number;
+    nodeHeight?: number;
+    rankSeparation?: number;
+    nodeSeparation?: number;
+}): VFNode[];

package/dist/runtime/components/Integrations/workflowLayout.js

@@ -0,0 +1,29 @@
+import dagre from "@dagrejs/dagre";
+export function layoutWorkflowNodes(nodes, edges, options = {}) {
+  const dir = options.direction ?? "LR";
+  const nodeWidth = options.nodeWidth ?? 260;
+  const nodeHeight = options.nodeHeight ?? 120;
+  const ranksep = options.rankSeparation ?? 90;
+  const nodesep = options.nodeSeparation ?? 40;
+  const g = new dagre.graphlib.Graph();
+  g.setDefaultEdgeLabel(() => ({}));
+  g.setGraph({ rankdir: dir, ranksep, nodesep, marginx: 20, marginy: 20 });
+  for (const n of nodes) {
+    g.setNode(n.id, { width: nodeWidth, height: nodeHeight });
+  }
+  for (const e of edges) {
+    g.setEdge(e.source, e.target);
+  }
+  dagre.layout(g);
+  return nodes.map((n) => {
+    const laid = g.node(n.id);
+    if (!laid) return n;
+    return {
+      ...n,
+      position: {
+        x: laid.x - nodeWidth / 2,
+        y: laid.y - nodeHeight / 2
+      }
+    };
+  });
+}

package/dist/runtime/composables/integrationsApi.d.ts

@@ -0,0 +1,13 @@
+export declare class IntegrationsApiError extends Error {
+    status: number;
+    body: unknown;
+    constructor(status: number, body: unknown, message: string);
+}
+export declare function useIntegrationsApi(): {
+    baseUrl: import("vue").ComputedRef<string>;
+    get: <T>(path: string) => Promise<T>;
+    post: <T>(path: string, body?: unknown) => Promise<T>;
+    put: <T>(path: string, body?: unknown) => Promise<T>;
+    patch: <T>(path: string, body?: unknown) => Promise<T>;
+    del: <T>(path: string) => Promise<T>;
+};

package/dist/runtime/composables/integrationsApi.js

@@ -0,0 +1,55 @@
+import { computed } from "vue";
+export class IntegrationsApiError extends Error {
+  constructor(status, body, message) {
+    super(message);
+    this.status = status;
+    this.body = body;
+    this.name = "IntegrationsApiError";
+  }
+}
+export function useIntegrationsApi() {
+  const config = useRuntimeConfig();
+  const { getToken } = usePlatformAuth();
+  const { slug: onlyTenantSlug, load: loadTenants } = usePlatformTenant();
+  const baseUrl = computed(
+    () => config.public.integrationsApi ?? "https://integrations.revenexx.com/api/v1"
+  );
+  async function buildHeaders(extra = {}) {
+    const token = await getToken();
+    if (!token) throw new IntegrationsApiError(401, null, "Not signed in.");
+    if (!onlyTenantSlug.value) await loadTenants();
+    const headers = {
+      Accept: "application/json",
+      Authorization: `Bearer ${token}`,
+      ...extra
+    };
+    if (onlyTenantSlug.value) headers["X-Tenant-Id"] = onlyTenantSlug.value;
+    return headers;
+  }
+  function url(path) {
+    return `${baseUrl.value.replace(/\/$/, "")}${path.startsWith("/") ? path : `/${path}`}`;
+  }
+  async function request(method, path, body) {
+    const headers = await buildHeaders(body !== void 0 ? { "Content-Type": "application/json" } : {});
+    try {
+      return await $fetch(url(path), {
+        method,
+        headers,
+        body: body !== void 0 ? body : void 0
+      });
+    } catch (err) {
+      const fe = err;
+      const data = fe?.response?._data;
+      const detail = data?.message ?? fe?.message ?? "Integrations request failed";
+      throw new IntegrationsApiError(fe?.response?.status ?? 0, data, detail);
+    }
+  }
+  return {
+    baseUrl,
+    get: (path) => request("GET", path),
+    post: (path, body) => request("POST", path, body ?? {}),
+    put: (path, body) => request("PUT", path, body ?? {}),
+    patch: (path, body) => request("PATCH", path, body ?? {}),
+    del: (path) => request("DELETE", path)
+  };
+}

package/dist/runtime/composables/useCredentialTypes.d.ts

@@ -0,0 +1,19 @@
+import type { CredentialType } from '../types/integrations.js';
+/**
+ * Global credential-type catalogue, backed by the Integrations service
+ * (`/api/v1/credential-types`). These drive the dynamic credential forms
+ * (descriptor `fields[]` + `auth_kind`). Not tenant-scoped, but fetched with
+ * the tenant-scoped client like everything else.
+ *
+ *   GET /credential-types          → list latest versions
+ *   GET /credential-types/{slug}   → single type
+ */
+export declare function useCredentialTypes(): {
+    types: any;
+    loading: any;
+    error: any;
+    loaded: any;
+    load: (force?: boolean) => Promise<CredentialType[]>;
+    bySlug: (slug: string) => CredentialType | null;
+    get: (slug: string) => Promise<CredentialType | null>;
+};

package/dist/runtime/composables/useCredentialTypes.js

@@ -0,0 +1,47 @@
+import { IntegrationsApiError, useIntegrationsApi } from "./integrationsApi.js";
+export function useCredentialTypes() {
+  const types = useState("integrations.credentialTypes", () => []);
+  const loading = useState("integrations.credentialTypes.loading", () => false);
+  const error = useState("integrations.credentialTypes.error", () => null);
+  const loaded = useState("integrations.credentialTypes.loaded", () => false);
+  const api = useIntegrationsApi();
+  function normalize(res) {
+    const obj = res;
+    if (Array.isArray(obj)) return obj;
+    if (Array.isArray(obj?.data)) return obj.data;
+    return [];
+  }
+  function captureError(e, fallback) {
+    if (e instanceof IntegrationsApiError) return e.message;
+    return e?.message ?? fallback;
+  }
+  async function load(force = false) {
+    if (loading.value) return types.value;
+    if (loaded.value && !force) return types.value;
+    loading.value = true;
+    error.value = null;
+    try {
+      types.value = normalize(await api.get("/credential-types"));
+      loaded.value = true;
+    } catch (e) {
+      error.value = captureError(e, "Could not load credential types.");
+    } finally {
+      loading.value = false;
+    }
+    return types.value;
+  }
+  function bySlug(slug) {
+    return types.value.find((t) => t.slug === slug) ?? null;
+  }
+  async function get(slug) {
+    const cached = bySlug(slug);
+    if (cached) return cached;
+    try {
+      const res = await api.get(`/credential-types/${encodeURIComponent(slug)}`);
+      return res?.data ?? res ?? null;
+    } catch {
+      return null;
+    }
+  }
+  return { types, loading, error, loaded, load, bySlug, get };
+}

package/dist/runtime/composables/useIntegrationsAudit.d.ts

@@ -0,0 +1,26 @@
+export type AuditResourceType = 'credential' | 'secret' | 'workflow' | 'trigger' | 'workflow_run';
+export type AuditAction = 'create' | 'update' | 'delete' | 'run.started' | 'run.finished' | 'run.failed';
+export interface AuditEntry {
+    id: number;
+    org_id?: string;
+    tenant_id?: string;
+    actor_sub?: string | null;
+    action: string;
+    resource_type: string;
+    resource_id?: string;
+    metadata?: Record<string, unknown> | null;
+    created_at: string;
+}
+export interface AuditFilters {
+    sub?: string;
+    resource_type?: string;
+    action?: string;
+}
+export declare function useIntegrationsAudit(): {
+    entries: any;
+    loading: any;
+    error: any;
+    hasMore: any;
+    load: (filters?: AuditFilters, append?: boolean) => Promise<void>;
+    loadMore: (filters?: AuditFilters) => Promise<void>;
+};

package/dist/runtime/composables/useIntegrationsAudit.js

@@ -0,0 +1,39 @@
+import { IntegrationsApiError, useIntegrationsApi } from "./integrationsApi.js";
+export function useIntegrationsAudit() {
+  const api = useIntegrationsApi();
+  const entries = useState("int.audit.entries", () => []);
+  const nextCursor = useState("int.audit.cursor", () => null);
+  const loading = useState("int.audit.loading", () => false);
+  const error = useState("int.audit.error", () => null);
+  function qs(filters, cursor) {
+    const p = new URLSearchParams();
+    if (filters.sub) p.set("sub", filters.sub);
+    if (filters.resource_type) p.set("resource_type", filters.resource_type);
+    if (filters.action) p.set("action", filters.action);
+    p.set("limit", "50");
+    if (cursor) p.set("cursor", cursor);
+    return p.toString();
+  }
+  async function load(filters = {}, append = false) {
+    if (loading.value) return;
+    loading.value = true;
+    error.value = null;
+    try {
+      const res = await api.get(
+        `/audit-logs?${qs(filters, append ? nextCursor.value : null)}`
+      );
+      const data = res.data ?? [];
+      entries.value = append ? [...entries.value, ...data] : data;
+      nextCursor.value = res.meta?.next_cursor ?? null;
+    } catch (e) {
+      error.value = e instanceof IntegrationsApiError ? e.message : e?.message ?? "Could not load the audit log.";
+    } finally {
+      loading.value = false;
+    }
+  }
+  function loadMore(filters = {}) {
+    return nextCursor.value ? load(filters, true) : Promise.resolve();
+  }
+  const hasMore = computed(() => !!nextCursor.value);
+  return { entries, loading, error, hasMore, load, loadMore };
+}

package/dist/runtime/composables/useIntegrationsCredentials.d.ts

@@ -0,0 +1,43 @@
+import type { Credential } from '../types/integrations.js';
+/**
+ * Typed, per-tenant credential instances, backed by the Integrations service
+ * (`/api/v1/credentials`). Secret field values are NEVER returned — the list
+ * carries `public_config` (non-secret fields) + `status` only.
+ *
+ *   GET    /credentials[?type=slug]      → list
+ *   POST   /credentials                  → create { credential_type_slug, name, config }
+ *   GET    /credentials/{id}             → show (masked)
+ *   PATCH  /credentials/{id}             → update { name?, config? } (blank secret = keep)
+ *   DELETE /credentials/{id}             → remove
+ *   POST   /credentials/test             → inline test { credential_type_slug, config }
+ *   POST   /credentials/{id}/test        → test saved instance
+ *   POST   /credentials/{id}/oauth/authorize-url → { authorize_url, state }
+ */
+export interface CredentialTestResult {
+    ok: boolean;
+    error?: string;
+}
+export declare function useIntegrationsCredentials(): {
+    credentials: any;
+    loading: any;
+    error: any;
+    loaded: any;
+    total: import("vue").ComputedRef<any>;
+    needsReauth: import("vue").ComputedRef<any>;
+    load: (force?: boolean) => Promise<Credential[]>;
+    ofType: (slug: string) => Credential[];
+    get: (id: string) => Promise<Credential>;
+    create: (input: {
+        credential_type_slug: string;
+        name: string;
+        config: Record<string, unknown>;
+    }) => Promise<Credential>;
+    update: (id: string, input: {
+        name?: string;
+        config?: Record<string, unknown>;
+    }) => Promise<Credential>;
+    remove: (id: string) => Promise<void>;
+    testInline: (credentialTypeSlug: string, config: Record<string, unknown>) => Promise<CredentialTestResult>;
+    test: (id: string) => Promise<CredentialTestResult>;
+    oauthAuthorizeUrl: (id: string) => Promise<string>;
+};