@revenexx/studio-integrations 1.2.0 → 1.4.0

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

@@ -21,7 +21,6 @@ const {
   getStackTrace,
   cancelRun,
   terminateRun,
-  retryRun,
   resumeRun
 } = useIntegrationsRuns();
 const DETAILS_POLL_MS = 3e3;
@@ -41,8 +40,10 @@ const detailsError = ref(null);
 const steps = ref([]);
 const stepsLoading = ref(false);
 const stepsError = ref(null);
-const stepsWithPayloads = ref(false);
 const expandedStep = ref(null);
+const payloadsLoading = ref(false);
+const payloadsError = ref(null);
+const payloadCache = ref(/* @__PURE__ */ new Map());
 const historyLoading = ref(false);
 const historyError = ref(null);
 const stackEnabled = ref(false);
@@ -82,6 +83,7 @@ const temporalWorkflowId = computed(() => pickStr(runData.value, ["temporal_work
 const temporalRunId = computed(() => pickStr(runData.value, ["temporal_run_id", "temporalRunId"]) ?? props.run.temporalRunId ?? null);
 const hasTemporal = computed(() => !!temporalWorkflowId.value && !!temporalRunId.value);
 const runResult = computed(() => pick(runData.value, ["result"]));
+const MAX_RESULT_LINKS = 50;
 const resultLinks = computed(() => {
   const out = [];
   const seen = /* @__PURE__ */ new Set();
@@ -100,7 +102,7 @@ const resultLinks = computed(() => {
     }
   };
   walk(runResult.value, []);
-  return out.slice(0, 8);
+  return out.length > MAX_RESULT_LINKS ? [] : out;
 });
 const hasResult = computed(() => runResult.value != null && (typeof runResult.value !== "object" || Object.keys(runResult.value).length > 0));
 const isTerminal = computed(() => {
@@ -303,6 +305,24 @@ async function loadDetails() {
     detailsLoading.value = false;
   }
 }
+function stepKey(st, i) {
+  return `${st.node_id}-${st.scheduled_event_id ?? i}`;
+}
+function cachedPayload(st) {
+  return st.scheduled_event_id === null ? void 0 : payloadCache.value.get(st.scheduled_event_id);
+}
+function hasPayload(st) {
+  return cachedPayload(st) !== void 0;
+}
+function withCachedPayload(st) {
+  const cached = cachedPayload(st);
+  if (!cached) return st;
+  return { ...st, input: cached.input, output: cached.output, config: cached.config, branch: cached.branch };
+}
+function openStep() {
+  if (expandedStep.value === null) return null;
+  return steps.value.find((st, i) => stepKey(st, i) === expandedStep.value) ?? null;
+}
 async function loadSteps() {
   if (!hasTemporal.value) {
     steps.value = [];
@@ -312,22 +332,55 @@ async function loadSteps() {
   stepsLoading.value = true;
   stepsError.value = null;
   try {
-    const res = await getSteps(props.run.workflowId, props.run.id, stepsWithPayloads.value);
-    steps.value = res?.steps ?? [];
+    const res = await getSteps(props.run.workflowId, props.run.id, false);
+    steps.value = (res?.steps ?? []).map(withCachedPayload);
   } catch (e) {
     stepsError.value = stepsErrMsg(e);
     steps.value = [];
   } finally {
     stepsLoading.value = false;
   }
+  void loadPayloads(false);
+}
+async function loadPayloads(opened) {
+  if (!hasTemporal.value || payloadsLoading.value) return;
+  const st = openStep();
+  if (!st) return;
+  const cached = cachedPayload(st);
+  if (cached && cached.status === st.status) return;
+  if (!cached && !opened) return;
+  const runId = props.run.id;
+  const readFor = expandedStep.value;
+  payloadsLoading.value = true;
+  payloadsError.value = null;
+  try {
+    const res = await getSteps(props.run.workflowId, runId, true);
+    if (props.run.id !== runId) return;
+    const next = new Map(payloadCache.value);
+    for (const row of res?.steps ?? []) {
+      if (row.scheduled_event_id === null) continue;
+      next.set(row.scheduled_event_id, {
+        status: row.status,
+        input: row.input,
+        output: row.output,
+        config: row.config,
+        branch: row.branch
+      });
+    }
+    payloadCache.value = next;
+    steps.value = steps.value.map(withCachedPayload);
+  } catch (e) {
+    if (props.run.id !== runId) return;
+    payloadsError.value = stepsErrMsg(e);
+  } finally {
+    if (props.run.id === runId) payloadsLoading.value = false;
+  }
+  if (expandedStep.value !== readFor) void loadPayloads(true);
 }
-function toggleStepPayloads() {
-  stepsWithPayloads.value = !stepsWithPayloads.value;
-  expandedStep.value = null;
-  void loadSteps();
-}
-function toggleStep(i) {
-  expandedStep.value = expandedStep.value === i ? null : i;
+function toggleStep(st, i) {
+  const key = stepKey(st, i);
+  expandedStep.value = expandedStep.value === key ? null : key;
+  if (expandedStep.value !== null) void loadPayloads(true);
 }
 async function loadStack() {
   stackEnabled.value = true;
@@ -422,8 +475,10 @@ function resetState() {
   detailsError.value = null;
   steps.value = [];
   stepsError.value = null;
-  stepsWithPayloads.value = false;
   expandedStep.value = null;
+  payloadsLoading.value = false;
+  payloadsError.value = null;
+  payloadCache.value = /* @__PURE__ */ new Map();
   historyError.value = null;
   timelineEvents.value = [];
   timelineDetail.value = null;
@@ -441,8 +496,6 @@ function actionLabel(a) {
       return t("integration.runs.action.cancel");
     case "terminate":
       return t("integration.runs.action.terminate");
-    case "retry":
-      return t("integration.runs.action.retry");
     case "resume":
       return t("integration.runs.action.resume");
   }
@@ -453,8 +506,6 @@ function confirmQuestion(a) {
       return t("integration.runs.confirm.cancel");
     case "terminate":
       return t("integration.runs.confirm.terminate");
-    case "retry":
-      return t("integration.runs.confirm.retry");
     case "resume":
       return t("integration.runs.confirm.resume");
   }
@@ -465,8 +516,6 @@ function actionErrorFallback(a) {
       return t("integration.runs.error.cancel");
     case "terminate":
       return t("integration.runs.error.terminate");
-    case "retry":
-      return t("integration.runs.error.retry");
     case "resume":
       return t("integration.runs.error.resume");
   }
@@ -488,6 +537,10 @@ watch(() => props.run.id, () => {
   resetState();
   void loadAll().then(startPollingIfNeeded);
 }, { immediate: true });
+watch(apiStatusRaw, (now, before) => {
+  if (!now || !before || now === before) return;
+  emit("changed");
+});
 onUnmounted(stopPolling);
 function arm(a) {
   armed.value = a;
@@ -511,15 +564,12 @@ async function confirmAction() {
       case "terminate":
         res = await terminateRun(props.run.workflowId, props.run.id);
         break;
-      case "retry":
-        res = await retryRun(props.run.workflowId, props.run.id);
-        break;
       case "resume":
         res = await resumeRun(props.run.workflowId, props.run.id);
         break;
     }
     const newId = pickStr(res, ["id"]);
-    actionNotice.value = (a === "retry" || a === "resume") && newId && newId !== String(props.run.id) ? t("integration.runs.notice.started", { id: newId }) : t("integration.runs.notice.requested", { action: actionLabel(a) });
+    actionNotice.value = a === "resume" && newId && newId !== String(props.run.id) ? t("integration.runs.notice.started", { id: newId }) : t("integration.runs.notice.requested", { action: actionLabel(a) });
     armed.value = null;
     await loadAll();
     startPollingIfNeeded();
@@ -537,7 +587,7 @@ async function confirmAction() {
     <!-- ── Details view: overview strip + result. ─────────────────────────── -->
     <template v-if="view === 'details'">
       <!-- Toolbar — only the status-gated stop/resume actions; hidden entirely
-           for a terminal run (Retry sits in the page header, data auto-polls). -->
+           for a terminal run (Run again sits in the page header, data auto-polls). -->
       <div v-if="hasActions" class="flex items-center gap-2">
         <!-- confirm step: one click arms, second confirms -->
         <template v-if="armed">
@@ -668,10 +718,6 @@ async function confirmAction() {
       <section v-if="hasTemporal" class="rounded-md border border-black/[0.06] bg-white p-4 space-y-3">
         <div class="flex items-center gap-2 border-b border-black/[0.06] pb-2">
           <h4 class="font-mono text-xs uppercase tracking-wide text-muted-foreground">{{ t("integration.runs.detail.steps.title") }}</h4>
-          <div class="flex-1" />
-          <Button variant="outline" size="sm" :disabled="stepsLoading" @click="toggleStepPayloads">
-            {{ stepsWithPayloads ? t("integration.runs.detail.steps.action.hidePayloads") : t("integration.runs.detail.steps.action.showPayloads") }}
-          </Button>
         </div>
 
         <p v-if="stepsError" class="text-rose-700">{{ stepsError }}</p>
@@ -688,7 +734,7 @@ async function confirmAction() {
             <button
               type="button"
               class="w-full flex items-center gap-3 px-3 py-2 text-left"
-              @click="toggleStep(i)"
+              @click="toggleStep(st, i)"
             >
               <Badge variant="outline" :class="['border text-xs font-medium uppercase shrink-0', runStatusClass(st.status)]">{{ runStatusLabel(st.status) }}</Badge>
               <div class="min-w-0 flex-1">
@@ -698,13 +744,13 @@ async function confirmAction() {
                 </div>
               </div>
               <span class="text-xs text-muted-foreground tabular-nums shrink-0">{{ fmtMs(st.duration_ms) }}</span>
-              <span class="text-[10px] text-muted-foreground shrink-0">{{ expandedStep === i ? "\u25BC" : "\u25B6" }}</span>
+              <span class="text-[10px] text-muted-foreground shrink-0">{{ expandedStep === stepKey(st, i) ? "\u25BC" : "\u25B6" }}</span>
             </button>
             <div v-if="st.error" class="px-3 pb-2 -mt-1">
               <div class="rounded-md border border-rose-500/20 bg-rose-500/5 px-2 py-1 text-xs text-rose-700 break-words">{{ st.error }}</div>
             </div>
-            <div v-if="expandedStep === i" class="px-3 pb-3 space-y-2">
-              <template v-if="stepsWithPayloads">
+            <div v-if="expandedStep === stepKey(st, i)" class="px-3 pb-3 space-y-2">
+              <template v-if="hasPayload(st)">
                 <div class="space-y-1">
                   <div class="text-[10px] uppercase tracking-wide text-muted-foreground">{{ t("integration.runs.detail.steps.field.input") }}</div>
                   <pre class="rounded-md bg-muted/40 p-3 text-xs overflow-x-auto max-h-40">{{ st.input === void 0 ? "\u2014" : json(st.input) }}</pre>
@@ -714,8 +760,9 @@ async function confirmAction() {
                   <pre class="rounded-md bg-muted/40 p-3 text-xs overflow-x-auto max-h-40">{{ st.output === void 0 ? "\u2014" : json(st.output) }}</pre>
                 </div>
               </template>
+              <p v-else-if="payloadsError" class="text-xs text-rose-700">{{ payloadsError }}</p>
               <p v-else class="text-xs text-muted-foreground">
-                {{ t("integration.runs.detail.steps.payloadHint") }}
+                {{ t("integration.runs.detail.steps.payloadsLoading") }}
               </p>
             </div>
           </li>

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

@@ -0,0 +1,16 @@
+import type { WorkflowStateRole, WorkflowStateVisibility } from '../../types/integrations.js';
+type __VLS_Props = {
+    open: boolean;
+    /** Fixed by the `state-ref` field that opened this. */
+    role: WorkflowStateRole;
+    /** Names the workflow already declares, so a collision is caught while typing. */
+    taken: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    declared: (namespace: string, role: WorkflowStateRole, visibility: WorkflowStateVisibility) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    onDeclared?: ((namespace: string, role: WorkflowStateRole, visibility: WorkflowStateVisibility) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,111 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@revenexx/studio";
+import { stateNamespaceErrorKey } from "../../utils/stateNamespaceName";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  role: { type: String, required: true },
+  taken: { type: Array, required: true }
+});
+const emit = defineEmits(["update:open", "declared"]);
+const t = useIntegrationsT();
+const name = ref("");
+const visibility = ref("private");
+watch(() => props.open, (isOpen) => {
+  if (!isOpen) return;
+  name.value = "";
+  visibility.value = "private";
+});
+const error = computed(() => {
+  const key = stateNamespaceErrorKey(name.value, props.taken);
+  return key ? t(key) : null;
+});
+function declare() {
+  const value = name.value.trim();
+  if (!value || error.value) return;
+  emit("declared", value, props.role, visibility.value);
+  emit("update:open", false);
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
+    <DialogContent class="max-w-[94vw] sm:max-w-lg">
+      <DialogHeader>
+        <DialogTitle>{{ t("integration.nodeConfig.state.create.title") }}</DialogTitle>
+        <DialogDescription class="text-sm">
+          {{ t("integration.nodeConfig.state.create.description", { role: t(`integration.workflows.state.role.${role}.label`) }) }}
+        </DialogDescription>
+      </DialogHeader>
+
+      <div class="space-y-3">
+        <div class="space-y-1">
+          <Label for="state-create-name" class="text-mono text-muted-foreground">
+            {{ t("integration.workflows.state.field.newName.label") }}
+          </Label>
+          <Input
+            id="state-create-name"
+            v-model="name"
+            class="h-8 bg-white font-mono text-sm"
+            :placeholder="t('integration.workflows.state.field.newName.placeholder')"
+            @keydown.enter.prevent="declare"
+          />
+          <p v-if="error" class="text-xs text-rose-600">{{ error }}</p>
+          <p class="text-xs text-muted-foreground">{{ t(`integration.workflows.state.role.${role}.hint`) }}</p>
+        </div>
+
+        <div class="space-y-1">
+          <Label for="state-create-visibility" class="text-mono text-muted-foreground">
+            {{ t("integration.workflows.state.field.visibility.label") }}
+          </Label>
+          <Select v-model="visibility">
+            <SelectTrigger
+              id="state-create-visibility"
+              :aria-label="t('integration.workflows.state.field.visibility.label')"
+              class="h-8 bg-white text-sm"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="private">
+                {{ t("integration.workflows.state.visibility.private.label") }}
+              </SelectItem>
+              <SelectItem value="shared">
+                {{ t("integration.workflows.state.visibility.shared.label") }}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+          <!-- The same consequence the workflow-level dialog states, in the same
+               place relative to the control that chooses it. -->
+          <p class="text-xs text-muted-foreground">
+            {{ t(`integration.workflows.state.visibility.${visibility}.hint`) }}
+          </p>
+        </div>
+      </div>
+
+      <DialogFooter>
+        <Button variant="outline" size="sm" class="h-8" @click="emit('update:open', false)">
+          {{ t("integration.common.action.cancel") }}
+        </Button>
+        <Button size="sm" class="h-8" :disabled="!name.trim() || !!error" @click="declare">
+          {{ t("integration.workflows.state.action.add") }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

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

@@ -0,0 +1,16 @@
+import type { WorkflowStateRole, WorkflowStateVisibility } from '../../types/integrations.js';
+type __VLS_Props = {
+    open: boolean;
+    /** Fixed by the `state-ref` field that opened this. */
+    role: WorkflowStateRole;
+    /** Names the workflow already declares, so a collision is caught while typing. */
+    taken: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    declared: (namespace: string, role: WorkflowStateRole, visibility: WorkflowStateVisibility) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    onDeclared?: ((namespace: string, role: WorkflowStateRole, visibility: WorkflowStateVisibility) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -5,10 +5,6 @@ type __VLS_Props = {
     density: 'full' | 'compact';
     /** Given → the card is a link there. Omitted → a button that emits `select`. */
     to?: string;
-    /** This card is the one being acted on: it says so and cannot be pressed again. */
-    busy?: boolean;
-    /** Another card on the surface is being acted on, so this one is out of reach. */
-    disabled?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: () => any;

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

@@ -7,9 +7,7 @@ import TemplateFlowPreview from "./TemplateFlowPreview.vue";
 const props = defineProps({
   template: { type: Object, required: true },
   density: { type: String, required: true },
-  to: { type: String, required: false },
-  busy: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false }
+  to: { type: String, required: false }
 });
 const emit = defineEmits(["select"]);
 const t = useIntegrationsT();
@@ -40,8 +38,8 @@ const chipSize = computed(() => full.value ? "px-2 py-0.5 text-xs" : "px-1.5 py-
 <template>
   <component
     :is="to ? NuxtLink : 'button'"
-    v-bind="to ? { to } : { type: 'button', disabled: disabled || busy }"
-    class="flex flex-col overflow-hidden rounded-lg border border-black/[0.06] bg-white text-left transition hover:border-black/20 hover:shadow-sm disabled:opacity-60"
+    v-bind="to ? { to } : { type: 'button' }"
+    class="flex flex-col overflow-hidden rounded-lg border border-black/[0.06] bg-white text-left transition hover:border-black/20 hover:shadow-sm"
     @click="to ? void 0 : emit('select')"
   >
     <!-- The picture: the flow this template builds, drawn from its own
@@ -87,7 +85,6 @@ const chipSize = computed(() => full.value ? "px-2 py-0.5 text-xs" : "px-1.5 py-
         <span v-if="packageLabel" :class="[CHIP, chipSize, 'bg-violet-100 text-violet-700']">{{ packageLabel }}</span>
       </div>
 
-      <Loader2 v-if="busy" :size="13" class="absolute right-1.5 top-1.5 animate-spin text-muted-foreground" />
     </div>
 
     <div class="flex min-h-0 flex-1 flex-col" :class="full ? 'p-4' : 'p-3'">

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

@@ -5,10 +5,6 @@ type __VLS_Props = {
     density: 'full' | 'compact';
     /** Given → the card is a link there. Omitted → a button that emits `select`. */
     to?: string;
-    /** This card is the one being acted on: it says so and cannot be pressed again. */
-    busy?: boolean;
-    /** Another card on the surface is being acted on, so this one is out of reach. */
-    disabled?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: () => any;

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

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    slug: string;
+};
+declare var __VLS_69: {
+    installing: any;
+};
+type __VLS_Slots = {} & {
+    secondary?: (props: typeof __VLS_69) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    installed: (id: number) => any;
+    "update:loading": (loading: boolean) => any;
+    "update:installing": (installing: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onInstalled?: ((id: number) => any) | undefined;
+    "onUpdate:loading"?: ((loading: boolean) => any) | undefined;
+    "onUpdate:installing"?: ((installing: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,198 @@
+<script setup>
+import { computed, onBeforeUnmount, reactive, ref, watch } from "vue";
+import { RefreshCircle as Loader2 } from "#solar-icons";
+import {
+  Badge,
+  Button,
+  DialogFooter,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@revenexx/studio";
+import { errorReason } from "../../utils/apiError";
+const SELECT_LATER = "__later__";
+const props = defineProps({
+  slug: { type: String, required: true }
+});
+const emit = defineEmits(["installed", "update:loading", "update:installing"]);
+const t = useIntegrationsT();
+const { get, load, fetchDetail, requirements, instantiate } = useIntegrationsTemplates();
+const { keys: secretKeys, load: loadSecrets } = useIntegrationsSecrets();
+const { ofType, load: loadCredentials } = useIntegrationsCredentials();
+const reqs = ref(null);
+const loading = ref(true);
+const installing = ref(false);
+const error = ref(null);
+const name = ref("");
+const bindings = reactive({});
+let run = 0;
+watch(() => props.slug, async (slug) => {
+  const mine = ++run;
+  loading.value = true;
+  reqs.value = null;
+  error.value = null;
+  name.value = "";
+  for (const k of Object.keys(bindings)) delete bindings[k];
+  await load();
+  if (mine !== run) return;
+  if (name.value === "") name.value = get(slug)?.name ?? "";
+  await Promise.all([fetchDetail(slug), loadCredentials(), loadSecrets()]);
+  if (mine !== run) return;
+  const answer = await requirements(slug);
+  if (mine !== run) return;
+  reqs.value = answer;
+  loading.value = false;
+}, { immediate: true });
+watch(loading, (v) => emit("update:loading", v), { immediate: true });
+watch(installing, (v) => emit("update:installing", v));
+onBeforeUnmount(() => emit("update:loading", false));
+const tpl = computed(() => get(props.slug));
+const credentialReqs = computed(() => reqs.value?.credentialTypes ?? []);
+const secretReqs = computed(() => reqs.value?.secrets ?? []);
+const secretChecks = computed(() => {
+  const fromApi = secretReqs.value;
+  if (fromApi.length) {
+    return fromApi.map((s) => ({
+      key: s.key,
+      label: s.key ?? t("integration.templates.detail.secrets.chosenAtInstall"),
+      present: s.exists || (s.key ? secretKeys.value.includes(s.key) : false)
+    }));
+  }
+  return (tpl.value?.requiredSecrets ?? []).map((key) => ({
+    key,
+    label: key,
+    present: secretKeys.value.includes(key)
+  }));
+});
+function nodesFor(usedBy) {
+  return [...new Set(usedBy.map((u) => u.nodeId))];
+}
+async function confirmInstall() {
+  installing.value = true;
+  error.value = null;
+  try {
+    const credentialBindings = {};
+    for (const [nodeId, credId] of Object.entries(bindings)) {
+      if (credId && credId !== SELECT_LATER) credentialBindings[nodeId] = credId;
+    }
+    const id = await instantiate(props.slug, {
+      name: name.value.trim(),
+      credentialBindings
+    });
+    if (!Number.isFinite(id)) throw new Error(t("integration.templates.detail.install.error.fallback"));
+    emit("installed", id);
+  } catch (e) {
+    error.value = errorReason(e, t("integration.templates.detail.install.error.fallback"));
+  } finally {
+    installing.value = false;
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div class="space-y-4 py-1 max-h-[28rem] overflow-y-auto pr-1">
+      <div class="space-y-1.5">
+        <Label for="tpl-install-name">{{ t("integration.templates.detail.install.nameLabel") }}</Label>
+        <Input id="tpl-install-name" v-model="name" class="bg-white" :placeholder="t('integration.templates.detail.install.namePlaceholder')" />
+      </div>
+
+      <div v-if="loading" class="flex items-center gap-2 py-4 text-sm text-muted-foreground">
+        <Loader2 :size="14" class="animate-spin" />
+        {{ t("integration.templates.detail.install.state.loading") }}
+      </div>
+
+      <template v-else>
+        <!-- Credentials -->
+        <div class="space-y-2">
+          <div class="text-mono text-muted-foreground border-b border-black/[0.06] pb-1.5">
+            {{ t("integration.templates.detail.credentials.title") }}
+          </div>
+          <p v-if="!credentialReqs.length" class="text-sm text-muted-foreground italic">
+            {{ t("integration.templates.detail.install.noCredentials") }}
+          </p>
+          <div v-for="req in credentialReqs" :key="req.slug" class="space-y-2">
+            <div class="flex items-center gap-2">
+              <span class="text-sm font-medium">{{ req.name ?? req.slug }}</span>
+              <Badge v-if="!req.registered" variant="outline" class="bg-rose-500/10 border-rose-500/20 text-rose-700 text-sm">
+                {{ t("integration.templates.detail.install.notRegistered") }}
+              </Badge>
+              <Badge v-else-if="!ofType(req.slug).length" variant="outline" class="bg-amber-500/10 border-amber-500/20 text-amber-700 text-sm">
+                {{ t("integration.templates.detail.install.noneYet") }}
+              </Badge>
+            </div>
+
+            <p v-if="!ofType(req.slug).length" class="rounded-md border-l-2 border-black/[0.08] bg-muted/30 px-2.5 py-1.5 text-sm text-muted-foreground">
+              {{ t("integration.templates.detail.install.noCredentialsOfType") }}
+              <NuxtLink to="/integrations/credentials" class="text-primary hover:underline">{{ t("integration.templates.detail.install.createOneLink") }}</NuxtLink>
+              {{ t("integration.templates.detail.install.orInstallLater") }}
+            </p>
+            <div v-for="nodeId in nodesFor(req.usedBy)" v-else :key="nodeId" class="space-y-1">
+              <Label :for="`tpl-cred-${nodeId}`" class="text-xs text-muted-foreground font-mono">{{ t("integration.templates.detail.install.nodeLabel", { id: nodeId }) }}</Label>
+              <Select
+                :model-value="bindings[nodeId] ?? SELECT_LATER"
+                @update:model-value="(v) => {
+  bindings[nodeId] = v ?? SELECT_LATER;
+}"
+              >
+                <SelectTrigger :id="`tpl-cred-${nodeId}`" class="bg-white">
+                  <SelectValue :placeholder="t('integration.templates.detail.install.selectLater')" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem :value="SELECT_LATER">{{ t("integration.templates.detail.install.selectLater") }}</SelectItem>
+                  <SelectItem v-for="c in ofType(req.slug)" :key="c.id" :value="c.id">
+                    {{ c.name }}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+
+        <!-- Secrets -->
+        <div v-if="secretChecks.length" class="space-y-2">
+          <div class="text-mono text-muted-foreground border-b border-black/[0.06] pb-1.5">
+            {{ t("integration.templates.detail.install.secretsHeader") }}
+          </div>
+          <p class="text-sm text-muted-foreground">
+            {{ t("integration.templates.detail.install.secretsDescription") }}
+            <NuxtLink to="/integrations/secrets" class="text-primary hover:underline">{{ t("integration.nav.item.secrets") }}</NuxtLink> {{ t("integration.templates.detail.install.secretsDescriptionSuffix") }}
+          </p>
+          <ul class="space-y-1">
+            <li
+              v-for="(s, i) in secretChecks"
+              :key="s.key ?? `dlg-secret-${i}`"
+              class="flex items-center justify-between rounded-md border border-black/[0.06] bg-muted/20 px-2 py-1 text-sm"
+            >
+              <code class="font-mono">{{ s.label }}</code>
+              <Badge variant="outline" :class="s.present ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-700 text-sm' : 'bg-amber-500/10 border-amber-500/20 text-amber-700 text-sm'">
+                {{ s.present ? t("integration.templates.detail.install.secretStored") : t("integration.templates.detail.secrets.missing") }}
+              </Badge>
+            </li>
+          </ul>
+        </div>
+      </template>
+
+      <div v-if="error" class="rounded-md bg-rose-500/10 px-3 py-2 text-sm text-rose-700">
+        {{ error }}
+      </div>
+    </div>
+
+    <DialogFooter>
+      <!-- Cancel here, back to the picker there: what the secondary control does
+           is the caller's, and only the caller knows what it goes back to. -->
+      <slot name="secondary" :installing="installing" />
+      <!-- Also closed while the step is still checking: a reader who confirmed
+           in that window would get the unwired copy the short route used to
+           produce, which is the outcome this step exists to replace. -->
+      <Button :disabled="installing || loading || !name.trim()" @click="confirmInstall">
+        <Loader2 v-if="installing" :size="14" class="mr-1 animate-spin" />
+        {{ installing ? t("integration.templates.detail.install.submitting") : t("integration.templates.detail.install.submit") }}
+      </Button>
+    </DialogFooter>
+  </div>
+</template>