@revenexx/studio-integrations 0.1.4 → 0.2.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@revenexx/studio-integrations",
   "configKey": "studioIntegrations",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

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

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    open: boolean;
+    /** Credential type slug(s) the field accepts — the dialog is scoped to these. */
+    credentialType?: string | string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    created: (credentialId: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    onCreated?: ((credentialId: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,279 @@
+<script setup>
+import { computed, reactive, ref, watch } from "vue";
+import { RefreshCircle as Loader2, TestTube as TestIcon } from "#solar-icons";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Switch,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@revenexx/studio";
+import { toast } from "vue-sonner";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  credentialType: { type: [String, Array], required: false }
+});
+const emit = defineEmits(["update:open", "created"]);
+const { create, testInline, load, oauthAuthorizeUrl } = useIntegrationsCredentials();
+const { load: loadTypes, bySlug } = useCredentialTypes();
+function loc(v) {
+  if (!v) return "";
+  if (typeof v === "string") return v;
+  const o = v;
+  return o.en ?? o.de ?? Object.values(o)[0] ?? "";
+}
+function authKindLabel(k) {
+  switch (k) {
+    case "api-key":
+      return "API Key";
+    case "oauth2-authcode":
+    case "oauth2-client-credentials":
+      return "OAuth2";
+    case "basic-auth":
+      return "Basic Auth";
+    case "static":
+      return "Static";
+    case "secret":
+      return "Secret";
+    default:
+      return k ?? "";
+  }
+}
+const allowedSlugs = computed(() => {
+  const t = props.credentialType;
+  if (!t) return [];
+  return (Array.isArray(t) ? t : [t]).map((s) => s.trim()).filter(Boolean);
+});
+const allowedTypes = computed(() => allowedSlugs.value.map((s) => bySlug(s)).filter((x) => !!x));
+const pickedType = ref(null);
+const form = reactive({ name: "", config: {} });
+const sourceActive = ref(false);
+const saving = ref(false);
+const testing = ref(false);
+const testResult = ref(null);
+function fieldsOf(t) {
+  return t?.fields ?? [];
+}
+function isOAuthAuthcode(t) {
+  return t?.auth_kind === "oauth2-authcode";
+}
+watch(() => props.open, async (o) => {
+  if (!o) return;
+  testResult.value = null;
+  sourceActive.value = false;
+  form.config = {};
+  await loadTypes();
+  if (allowedTypes.value.length === 1) {
+    pickedType.value = allowedTypes.value[0];
+    form.name = loc(pickedType.value.name);
+  } else {
+    pickedType.value = null;
+    form.name = "";
+  }
+}, { immediate: true });
+function pickType(t) {
+  pickedType.value = t;
+  form.config = {};
+  testResult.value = null;
+  sourceActive.value = false;
+  if (!form.name) form.name = loc(t.name);
+}
+function buildConfigPayload() {
+  const out = {};
+  for (const f of fieldsOf(pickedType.value)) {
+    const v = form.config[f.key];
+    if (v !== void 0 && v !== "") out[f.key] = v;
+  }
+  return out;
+}
+async function runTest() {
+  if (!pickedType.value) return;
+  testing.value = true;
+  testResult.value = null;
+  try {
+    testResult.value = await testInline(pickedType.value.slug, buildConfigPayload());
+  } finally {
+    testing.value = false;
+  }
+}
+function connect(id) {
+  return oauthAuthorizeUrl(id).then((authorizeUrl) => {
+    const popup = window.open(authorizeUrl, "oauth-connect", "width=600,height=720");
+    const onMessage = (ev) => {
+      if (ev.data?.type === "integrations-oauth-complete") {
+        window.removeEventListener("message", onMessage);
+        void load(true);
+      }
+    };
+    window.addEventListener("message", onMessage);
+    const poll = window.setInterval(() => {
+      if (popup?.closed) {
+        window.clearInterval(poll);
+        window.removeEventListener("message", onMessage);
+        void load(true);
+      }
+    }, 1e3);
+  });
+}
+async function submit() {
+  if (!pickedType.value || !form.name.trim()) return;
+  saving.value = true;
+  try {
+    const created = await create({
+      credential_type_slug: pickedType.value.slug,
+      name: form.name.trim(),
+      config: buildConfigPayload()
+    });
+    await load(true);
+    toast.success("Credential created");
+    if (isOAuthAuthcode(pickedType.value)) {
+      void connect(created.id);
+    }
+    emit("created", created.id);
+    emit("update:open", false);
+  } catch (e) {
+    toast.error(e?.message ?? "Could not create credential.");
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
+    <DialogContent class="sm:max-w-lg">
+      <DialogHeader>
+        <DialogTitle>New credential</DialogTitle>
+        <DialogDescription class="text-sm">
+          Create a credential for this node without leaving the editor.
+        </DialogDescription>
+      </DialogHeader>
+
+      <!-- Choose the type when the field accepts more than one -->
+      <div v-if="!pickedType" class="space-y-2 py-1">
+        <p v-if="!allowedTypes.length" class="text-sm text-muted-foreground">
+          No credential type available for this field.
+        </p>
+        <button
+          v-for="t in allowedTypes"
+          :key="t.slug"
+          type="button"
+          class="flex w-full items-center gap-2 rounded-lg border border-black/[0.08] p-3 text-left transition hover:border-black/20 hover:bg-muted/30"
+          @click="pickType(t)"
+        >
+          <IntegrationsCredentialLogo :type="t" :size="18" />
+          <div class="min-w-0 truncate text-sm">
+            <span class="font-semibold">{{ loc(t.name) }}</span>
+            <span class="ml-1.5 text-muted-foreground">({{ authKindLabel(t.auth_kind) }})</span>
+          </div>
+        </button>
+      </div>
+
+      <!-- Dynamic form -->
+      <div v-else class="space-y-3 py-1 max-h-[26rem] overflow-y-auto pr-1">
+        <div class="flex items-center gap-2">
+          <IntegrationsCredentialLogo :type="pickedType" :size="18" />
+          <div class="text-sm font-medium">{{ loc(pickedType.name) }}</div>
+          <button
+            v-if="allowedTypes.length > 1"
+            type="button"
+            class="ml-auto text-sm text-muted-foreground hover:text-foreground"
+            @click="pickedType = null"
+          >
+            Change type
+          </button>
+        </div>
+
+        <div class="space-y-1.5">
+          <Label for="cred-name">Name</Label>
+          <Input id="cred-name" v-model="form.name" class="bg-white" placeholder="e.g. Production key" />
+        </div>
+
+        <!-- "Use revenexx …" source picker (SFTP / Mail / API key) -->
+        <IntegrationsCredentialRevenexxSource
+          :type="pickedType"
+          @update:active="(v) => sourceActive = v"
+          @apply="(c) => Object.assign(form.config, c)"
+        />
+
+        <div v-for="f in fieldsOf(pickedType)" v-show="!sourceActive" :key="f.key" class="space-y-1.5">
+          <Label>{{ loc(f.label) }}{{ f.required ? " *" : "" }}</Label>
+          <Input
+            v-if="f.type === 'secret'"
+            :model-value="form.config[f.key] ?? ''"
+            type="password"
+            autocomplete="new-password"
+            class="bg-white"
+            @update:model-value="(v) => form.config[f.key] = v"
+          />
+          <Input
+            v-else-if="f.type === 'number'"
+            type="number"
+            :model-value="form.config[f.key] ?? ''"
+            class="bg-white"
+            @update:model-value="(v) => form.config[f.key] = v === '' ? void 0 : Number(v)"
+          />
+          <div v-else-if="f.type === 'boolean'" class="flex items-center gap-2 pt-1">
+            <Switch :model-value="Boolean(form.config[f.key])" @update:model-value="(v) => form.config[f.key] = v" />
+          </div>
+          <Select
+            v-else-if="f.type === 'select'"
+            :model-value="form.config[f.key] ?? ''"
+            @update:model-value="(v) => form.config[f.key] = v"
+          >
+            <SelectTrigger class="bg-white">
+              <SelectValue placeholder="Pick one" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
+                {{ loc(opt.label) }}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+          <Input
+            v-else
+            :model-value="form.config[f.key] ?? ''"
+            class="bg-white"
+            @update:model-value="(v) => form.config[f.key] = v"
+          />
+        </div>
+
+        <p v-if="isOAuthAuthcode(pickedType)" class="text-sm text-muted-foreground">
+          After saving, a window opens to connect with the provider.
+        </p>
+
+        <div
+          v-if="testResult"
+          class="rounded-md px-3 py-2 text-sm"
+          :class="testResult.ok ? 'bg-emerald-500/10 text-emerald-700' : 'bg-rose-500/10 text-rose-700'"
+        >
+          {{ testResult.ok ? "Connection ok." : testResult.error ?? "Connection failed." }}
+        </div>
+      </div>
+
+      <DialogFooter v-if="pickedType">
+        <div class="flex items-center gap-2">
+          <Button variant="outline" :disabled="saving || testing" @click="runTest">
+            <Loader2 v-if="testing" :size="14" class="mr-1 animate-spin" />
+            <TestIcon v-else :size="14" class="mr-1" />
+            Connect
+          </Button>
+          <Button :disabled="saving || !form.name.trim()" @click="submit">
+            <Loader2 v-if="saving" :size="14" class="mr-1 animate-spin" />
+            Save
+          </Button>
+        </div>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

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

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    open: boolean;
+    /** Credential type slug(s) the field accepts — the dialog is scoped to these. */
+    credentialType?: string | string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    created: (credentialId: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    onCreated?: ((credentialId: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,20 @@
+import type { Credential, CredentialType } from '../../types/integrations.js';
+/**
+ * Credential detail / edit view — a single scrolling page (no tabs): the
+ * connection state up top, the editable fields, then read-only metadata.
+ * Self-contained — owns update / delete / test / OAuth reconnect against the
+ * Integrations service via the shared composable.
+ */
+type __VLS_Props = {
+    open: boolean;
+    credential: Credential | null;
+    type: CredentialType | null;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    changed: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    onChanged?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,342 @@
+<script setup>
+import { computed, reactive, ref, watch } from "vue";
+import {
+  CheckCircle as CheckCircle2,
+  CloseCircle as XCircle,
+  RefreshCircle as Loader2,
+  TestTube as TestIcon,
+  TrashBinTrash as Trash2
+} from "#solar-icons";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Switch,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@revenexx/studio";
+import { toast } from "vue-sonner";
+import { credentialState, relativeTime } from "../../utils/credentialState";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  credential: { type: [Object, null], required: true },
+  type: { type: [Object, null], required: true }
+});
+const emit = defineEmits(["update:open", "changed"]);
+const { update, remove, test, oauthAuthorizeUrl, load } = useIntegrationsCredentials();
+const tab = ref("credentials");
+const tabs = [
+  { key: "credentials", label: "Credentials" },
+  { key: "details", label: "Details" }
+];
+const form = reactive({ name: "", config: {} });
+const sourceActive = ref(false);
+const saving = ref(false);
+const deleting = ref(false);
+const testing = ref(false);
+const liveTest = ref(null);
+const connecting = ref(false);
+function loc(v) {
+  if (!v) return "";
+  if (typeof v === "string") return v;
+  const o = v;
+  return o.en ?? o.de ?? Object.values(o)[0] ?? "";
+}
+const typeName = computed(() => loc(props.type?.name) || props.credential?.credential_type_slug || "");
+const isOAuthAuthcode = computed(() => props.type?.auth_kind === "oauth2-authcode");
+const state = computed(() => props.credential ? credentialState(props.credential) : null);
+function fieldsOf(t) {
+  return t?.fields ?? [];
+}
+function formatDateTime(iso) {
+  if (!iso) return "\u2014";
+  try {
+    return new Date(iso).toLocaleString();
+  } catch {
+    return String(iso);
+  }
+}
+watch(
+  () => [props.open, props.credential?.id],
+  () => {
+    if (!props.open || !props.credential) return;
+    tab.value = "credentials";
+    form.name = props.credential.name;
+    form.config = { ...props.credential.public_config ?? {} };
+    sourceActive.value = false;
+    liveTest.value = null;
+  },
+  { immediate: true }
+);
+function buildConfigPayload() {
+  const out = {};
+  for (const f of fieldsOf(props.type)) {
+    const v = form.config[f.key];
+    if (f.type === "secret" && (v === void 0 || v === "")) continue;
+    if (v !== void 0) out[f.key] = v;
+  }
+  return out;
+}
+async function runTest() {
+  if (!props.credential) return;
+  testing.value = true;
+  liveTest.value = null;
+  try {
+    liveTest.value = await test(props.credential.id);
+    await load(true);
+    emit("changed");
+  } finally {
+    testing.value = false;
+  }
+}
+async function save() {
+  if (!props.credential || !form.name.trim()) return;
+  saving.value = true;
+  try {
+    await update(props.credential.id, { name: form.name.trim(), config: buildConfigPayload() });
+    toast.success("Credential updated");
+    emit("changed");
+    emit("update:open", false);
+  } catch (e) {
+    toast.error(e?.message ?? "Could not save credential.");
+  } finally {
+    saving.value = false;
+  }
+}
+async function destroy() {
+  if (!props.credential) return;
+  if (!confirm(`Delete credential "${props.credential.name}"? Workflows referencing it will fail until re-bound.`)) return;
+  deleting.value = true;
+  try {
+    await remove(props.credential.id);
+    toast.success("Credential deleted");
+    emit("changed");
+    emit("update:open", false);
+  } catch (e) {
+    toast.error(e?.message ?? "Could not delete credential.");
+  } finally {
+    deleting.value = false;
+  }
+}
+async function connect() {
+  if (!props.credential) return;
+  connecting.value = true;
+  try {
+    const authorizeUrl = await oauthAuthorizeUrl(props.credential.id);
+    const popup = window.open(authorizeUrl, "oauth-connect", "width=600,height=720");
+    const onMessage = async (ev) => {
+      if (ev.data?.type === "integrations-oauth-complete") {
+        window.removeEventListener("message", onMessage);
+        await load(true);
+        emit("changed");
+        toast.success("Connected");
+      }
+    };
+    window.addEventListener("message", onMessage);
+    const poll = window.setInterval(async () => {
+      if (popup?.closed) {
+        window.clearInterval(poll);
+        window.removeEventListener("message", onMessage);
+        await load(true);
+        emit("changed");
+      }
+    }, 1e3);
+  } catch (e) {
+    toast.error(e?.message ?? "Could not start OAuth connect.");
+  } finally {
+    connecting.value = false;
+  }
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
+    <DialogContent class="sm:max-w-3xl">
+      <DialogHeader>
+        <div class="flex items-start gap-3">
+          <IntegrationsCredentialLogo :type="type" :size="22" />
+          <div class="min-w-0 flex-1">
+            <DialogTitle class="truncate">{{ credential?.name }}</DialogTitle>
+            <DialogDescription class="text-sm truncate">{{ typeName }}</DialogDescription>
+          </div>
+        </div>
+      </DialogHeader>
+
+      <div v-if="credential && state">
+        <!-- Standard cockpit tab bar (violet underline) -->
+        <TabBar :model-value="tab" :tabs="tabs" @update:model-value="(k) => tab = k" />
+
+        <!-- Tab 1: Credentials -->
+        <div v-if="tab === 'credentials'" class="space-y-5 max-h-[62vh] overflow-y-auto pr-1 pt-4">
+        <!-- Connection state — the headline answer: are these credentials correct? -->
+        <div class="rounded-lg border p-3" :class="state.toneClass">
+          <div class="flex items-center gap-2">
+            <CheckCircle2 v-if="state.key === 'connected'" :size="16" class="shrink-0" />
+            <XCircle v-else-if="state.key === 'failed'" :size="16" class="shrink-0" />
+            <span class="font-medium">{{ state.label }}</span>
+            <span v-if="state.at" class="text-sm opacity-70">· verified {{ relativeTime(state.at) }}</span>
+            <div class="flex-1" />
+            <Button
+              v-if="isOAuthAuthcode"
+              size="sm"
+              variant="outline"
+              class="bg-white/60"
+              :disabled="connecting"
+              @click="connect"
+            >
+              <Loader2 v-if="connecting" :size="13" class="mr-1 animate-spin" />
+              Reconnect
+            </Button>
+          </div>
+          <p v-if="state.key === 'failed' && state.message" class="mt-1 text-sm break-words opacity-90">
+            {{ state.message }}
+          </p>
+          <p v-else-if="state.key === 'untested'" class="mt-1 text-sm opacity-80">
+            Run a test to verify these credentials actually connect.
+          </p>
+        </div>
+
+        <!-- Editable fields -->
+        <div class="space-y-3">
+          <div class="space-y-1.5">
+            <Label for="detail-cred-name">Name</Label>
+            <Input id="detail-cred-name" v-model="form.name" class="bg-white" />
+          </div>
+
+          <!-- "Use revenexx …" source picker (SFTP / Mail / API key) -->
+          <IntegrationsCredentialRevenexxSource
+            :type="type"
+            @update:active="(v) => sourceActive = v"
+            @apply="(c) => Object.assign(form.config, c)"
+          />
+
+          <div v-for="f in fieldsOf(type)" v-show="!sourceActive" :key="f.key" class="space-y-1.5">
+            <Label>{{ loc(f.label) }}{{ f.required ? " *" : "" }}</Label>
+
+            <Input
+              v-if="f.type === 'secret'"
+              :model-value="form.config[f.key] ?? ''"
+              type="password"
+              autocomplete="new-password"
+              placeholder="Leave blank to keep current"
+              class="bg-white"
+              @update:model-value="(v) => form.config[f.key] = v"
+            />
+            <Input
+              v-else-if="f.type === 'number'"
+              type="number"
+              :model-value="form.config[f.key] ?? ''"
+              class="bg-white"
+              @update:model-value="(v) => form.config[f.key] = v === '' ? void 0 : Number(v)"
+            />
+            <div v-else-if="f.type === 'boolean'" class="flex items-center gap-2 pt-1">
+              <Switch :model-value="Boolean(form.config[f.key])" @update:model-value="(v) => form.config[f.key] = v" />
+            </div>
+            <Select
+              v-else-if="f.type === 'select'"
+              :model-value="form.config[f.key] ?? ''"
+              @update:model-value="(v) => form.config[f.key] = v"
+            >
+              <SelectTrigger class="bg-white">
+                <SelectValue placeholder="Pick one" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
+                  {{ loc(opt.label) }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <Input
+              v-else
+              :model-value="form.config[f.key] ?? ''"
+              class="bg-white"
+              @update:model-value="(v) => form.config[f.key] = v"
+            />
+          </div>
+
+          <!-- Live test feedback (from the test the operator just ran) -->
+          <div
+            v-if="liveTest"
+            class="rounded-md px-3 py-2 text-sm"
+            :class="liveTest.ok ? 'bg-emerald-500/10 text-emerald-700' : 'bg-rose-500/10 text-rose-700'"
+          >
+            {{ liveTest.ok ? "Connection ok." : liveTest.error ?? "Connection failed." }}
+          </div>
+
+          <div class="flex items-center gap-2 pt-1">
+            <div class="flex-1" />
+            <Button variant="outline" :disabled="testing || saving" @click="runTest">
+              <Loader2 v-if="testing" :size="14" class="mr-1 animate-spin" />
+              <TestIcon v-else :size="14" class="mr-1" />
+              Connect
+            </Button>
+            <Button :disabled="saving || !form.name.trim()" @click="save">
+              <Loader2 v-if="saving" :size="14" class="mr-1 animate-spin" />
+              Save
+            </Button>
+          </div>
+        </div>
+
+        </div>
+
+        <!-- Tab 2: Details -->
+        <div v-else class="space-y-5 max-h-[62vh] overflow-y-auto pr-1 pt-4">
+          <div class="grid grid-cols-[9rem_1fr] gap-x-4 gap-y-2 text-sm">
+            <span class="text-muted-foreground">Type</span>
+            <span>{{ typeName }}</span>
+
+            <span class="text-muted-foreground">Type slug</span>
+            <span class="font-mono text-xs">{{ credential.credential_type_slug }}</span>
+
+            <span class="text-muted-foreground">Version</span>
+            <span class="font-mono text-xs">{{ type?.version ?? "\u2014" }}</span>
+
+            <span class="text-muted-foreground">Auth kind</span>
+            <span class="font-mono text-xs">{{ type?.auth_kind ?? "\u2014" }}</span>
+
+            <span class="text-muted-foreground">Last tested</span>
+            <span class="tabular-nums">{{ formatDateTime(credential.last_test_at) }}</span>
+
+            <span class="text-muted-foreground">Credential ID</span>
+            <span class="font-mono text-xs break-all">{{ credential.id }}</span>
+
+            <span class="text-muted-foreground">Created</span>
+            <span class="tabular-nums">{{ formatDateTime(credential.created_at) }}</span>
+
+            <span class="text-muted-foreground">Updated</span>
+            <span class="tabular-nums">{{ formatDateTime(credential.updated_at) }}</span>
+          </div>
+
+          <!-- Danger zone -->
+          <div class="rounded-lg border border-rose-500/30 bg-rose-500/[0.03] p-3">
+            <div class="text-sm font-semibold text-rose-700">Danger zone</div>
+            <div class="mt-1.5 flex items-center justify-between gap-3">
+              <p class="text-sm text-muted-foreground">
+                Deleting this credential breaks any workflow that references it until it's re-bound.
+              </p>
+              <Button
+                variant="outline"
+                size="sm"
+                class="shrink-0 border-rose-500/40 text-rose-700 hover:bg-rose-500/10"
+                :disabled="deleting"
+                @click="destroy"
+              >
+                <Loader2 v-if="deleting" :size="14" class="mr-1 animate-spin" />
+                <Trash2 v-else :size="14" class="mr-1" />
+                Delete credential
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>