@revenexx/studio-integrations 0.7.0 → 1.0.0

package/dist/runtime/pages/integrations/templates/[slug].vue

@@ -1,7 +1,8 @@
 <script setup>
 import { computed, reactive, ref } from "vue";
 import { marked } from "marked";
-import { AltArrowRight as Chevron, Bolt as Zap, CheckCircle as CheckCircle2, ClockCircle as Clock, Global as Webhook, Key, Play, RefreshCircle as Loader2, Shield as ShieldAlert, User } from "#solar-icons";
+import { AltArrowRight as Chevron, CheckCircle as CheckCircle2, Key, RefreshCircle as Loader2, Shield as ShieldAlert, User } from "#solar-icons";
+import { triggerGlyph as glyphForTrigger } from "../../../data/triggerGlyphs";
 import {
   Badge,
   Button,
@@ -90,7 +91,6 @@ function firstSentence(text) {
   const idx = text.indexOf(". ");
   return idx === -1 ? text : text.slice(0, idx + 1);
 }
-const TRIGGER_ICON = { schedule: Clock, webhook: Webhook, manual: Play, event: Zap };
 const triggerChips = computed(() => (tpl.value?.blob.triggers ?? []).map((trig) => {
   let label = trig.type.charAt(0).toUpperCase() + trig.type.slice(1);
   if (trig.type === "schedule" && trig.config?.cron) {
@@ -99,7 +99,7 @@ const triggerChips = computed(() => (tpl.value?.blob.triggers ?? []).map((trig)
   }
   if (trig.type === "webhook" && trig.config?.path) label = `${t("integration.templates.trigger.webhook")} \xB7 ${trig.config.path}`;
   if (trig.type === "manual") label = t("integration.templates.trigger.manual");
-  return { key: trig.id, icon: TRIGGER_ICON[trig.type] ?? Zap, label };
+  return { key: trig.id, icon: glyphForTrigger(trig.type), label };
 }));
 const variables = computed(() => Object.entries(tpl.value?.blob.variables ?? {}).map(([key, v]) => ({
   key,
@@ -206,8 +206,16 @@ function levelDot(level) {
       </PageHeader>
 
       <div class="p-4 space-y-4">
-        <!-- Hero: the live workflow preview on the editor's dotted canvas -->
-        <div class="relative overflow-hidden rounded-lg border border-black/[0.06] bg-slate-50/70 [background-image:radial-gradient(circle,rgba(15,23,42,0.07)_1px,transparent_1px)] [background-size:14px_14px]">
+        <!-- Hero: the live workflow preview on the editor's dotted canvas.
+             Named like the two panels below it, with `aria-label` because it
+             carries no heading to point at: it was the largest thing on the page
+             and the only one with no name at all, which also left it the one
+             surface drawing the miniature that nothing could address (PO-247). -->
+        <div
+          role="region"
+          :aria-label="t('integration.templates.detail.flow.ariaLabel')"
+          class="relative overflow-hidden rounded-lg border border-black/[0.06] bg-slate-50/70 [background-image:radial-gradient(circle,rgba(15,23,42,0.07)_1px,transparent_1px)] [background-size:14px_14px]"
+        >
           <TemplateFlowPreview v-if="tpl.detailLoaded" :blob="tpl.blob" :height="400" class="px-4" />
           <div v-else class="flex h-[400px] items-center justify-center">
             <Loader2 :size="18" class="animate-spin text-muted-foreground/50" />

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

@@ -1,8 +1,9 @@
 <script setup>
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
-import { AltArrowLeft as ArrowLeft, AltArrowRight as Chevron, Copy as CopyIcon, Pause as PauseIcon, RefreshCircle as Loader2, Play, Refresh as RetryIcon, Diskette as Save, SidebarMinimalistic as RailIcon } from "#solar-icons";
+import { AltArrowLeft as ArrowLeft, AltArrowRight as Chevron, Copy as CopyIcon, RefreshCircle as Loader2, Play, Refresh as RetryIcon, Diskette as Save, SidebarMinimalistic as RailIcon } from "#solar-icons";
 import {
   AlertDialog,
+  AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogFooter,
@@ -20,6 +21,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
+  Switch,
   Textarea
 } from "@revenexx/studio";
 import WorkflowEditor from "../../../components/Integrations/WorkflowEditor.vue";
@@ -41,7 +43,6 @@ const router = useRouter();
 const { workflows, get, update, toggleActive } = useIntegrationsWorkflows();
 const id = computed(() => Number(route.params.id));
 const workflow = computed(() => workflows.value.find((w) => w.id === id.value) ?? null);
-useHead({ title: () => t("integration.editor.head.title", { name: workflow.value?.name ?? t("integration.editor.head.untitled") }) });
 const tab = ref("editor");
 const tabs = computed(() => [
   { key: "editor", label: t("integration.editor.tab.editor") },
@@ -49,8 +50,39 @@ const tabs = computed(() => [
   { key: "runs", label: t("integration.editor.tab.runs") },
   { key: "dead-letters", label: t("integration.editor.tab.deadLetters") }
 ]);
-const dirtyBlob = ref(null);
-const isDirty = computed(() => dirtyBlob.value !== null);
+const draft = ref(null);
+const isDirty = computed(() => draft.value !== null);
+function draftFrom() {
+  if (draft.value) return draft.value;
+  const w = workflow.value;
+  if (!w) return null;
+  return {
+    name: w.name,
+    description: w.description ?? null,
+    executionMode: w.execution_mode ?? "async_only",
+    tags: [...w.blob.tags ?? []],
+    icon: w.blob.icon ?? null,
+    blob: JSON.parse(JSON.stringify(w.blob))
+  };
+}
+function payloadBlob(d) {
+  const blob = JSON.parse(JSON.stringify(d.blob));
+  blob.name = d.name;
+  if (d.description) blob.description = d.description;
+  else delete blob.description;
+  if (d.tags.length) blob.tags = [...d.tags];
+  else delete blob.tags;
+  if (d.icon) blob.icon = d.icon;
+  else delete blob.icon;
+  return blob;
+}
+const shownName = computed(() => draft.value?.name ?? workflow.value?.name ?? "");
+const draftedMode = computed(() => draft.value?.executionMode ?? workflow.value?.execution_mode ?? "async_only");
+const shownIcon = computed(() => draft.value ? draft.value.icon : workflow.value?.blob.icon ?? null);
+const shownTags = computed(() => draft.value ? draft.value.tags : [...workflow.value?.blob.tags ?? []]);
+const shownDescription = computed(() => (draft.value ? draft.value.description : workflow.value?.description) ?? "");
+const shownBlob = computed(() => draft.value?.blob ?? workflow.value?.blob ?? null);
+useHead({ title: () => t("integration.editor.head.title", { name: shownName.value || t("integration.editor.head.untitled") }) });
 const saving = ref(false);
 const saveError = ref(null);
 const validationWarnings = computed(() => workflow.value?.warnings);
@@ -76,7 +108,7 @@ onMounted(() => {
   void loadCredentials();
 });
 const reauthCredentials = computed(() => {
-  const blob = JSON.stringify(dirtyBlob.value ?? workflow.value?.blob ?? {});
+  const blob = JSON.stringify(shownBlob.value ?? {});
   return needsReauth.value.filter((c) => blob.includes(c.id));
 });
 const buildWorking = computed(() => workflow.value?.buildStatus === "building" || workflow.value?.buildStatus === "pending");
@@ -123,29 +155,67 @@ const buildNotice = computed(() => {
 });
 watch(id, async () => {
   const w = await get(id.value);
-  if (!w) await router.push("/integrations/workflows");
-  dirtyBlob.value = null;
+  if (!w) await leaveTo("/integrations/workflows");
+  draft.value = null;
   warningsExpanded.value = false;
   if (tab.value === "runs") void loadRuns(1);
 }, { immediate: true });
 function onChange(blob) {
-  dirtyBlob.value = blob;
+  const d = draftFrom();
+  if (d) draft.value = { ...d, blob };
 }
 const editorResetKey = ref(0);
 function discardChanges() {
-  dirtyBlob.value = null;
+  draft.value = null;
   editorResetKey.value++;
 }
+const leaveOpen = ref(false);
+let leaveDecision = null;
+function askBeforeLeaving() {
+  leaveOpen.value = true;
+  return new Promise((resolve) => {
+    leaveDecision = resolve;
+  });
+}
+function answerLeave(leave) {
+  leaveOpen.value = false;
+  leaveDecision?.(leave);
+  leaveDecision = null;
+}
+let leavingOnPurpose = false;
+async function leaveTo(path) {
+  leavingOnPurpose = true;
+  try {
+    await router.push(path);
+  } finally {
+    leavingOnPurpose = false;
+  }
+}
+async function guardTheDraft(to, from) {
+  if (to.path === from.path) return true;
+  if (leavingOnPurpose) return true;
+  if (!isDirty.value) return true;
+  return await askBeforeLeaving();
+}
+onBeforeRouteLeave(guardTheDraft);
+onBeforeRouteUpdate(guardTheDraft);
+function warnBeforeUnload(e) {
+  if (!isDirty.value) return;
+  e.preventDefault();
+  e.returnValue = "unsaved";
+}
+onMounted(() => window.addEventListener("beforeunload", warnBeforeUnload));
+onUnmounted(() => window.removeEventListener("beforeunload", warnBeforeUnload));
 const duplicateOpen = ref(false);
 const duplicateTarget = computed(() => workflow.value ? { id: workflow.value.id, name: workflow.value.name } : null);
 async function onDuplicated(copy) {
   toast.success(t("integration.editor.toast.duplicated", { name: copy.name }));
-  await router.push(`/integrations/workflows/${copy.id}`);
+  await leaveTo(`/integrations/workflows/${copy.id}`);
 }
 async function onRevisionRestored() {
   if (!workflow.value) return;
   await get(workflow.value.id);
-  dirtyBlob.value = null;
+  draft.value = null;
 }
 const { trigger: triggerRun, loadForWorkflow, fetchRun, retryRun } = useIntegrationsRuns();
 const running = ref(false);
@@ -250,7 +320,7 @@ async function run(mode) {
     void loadRuns(1);
   }
 }
-const payloadDriven = computed(() => payloadFieldsFromBlob(dirtyBlob.value ?? workflow.value?.blob ?? { nodes: [] }).length > 0);
+const payloadDriven = computed(() => payloadFieldsFromBlob(shownBlob.value ?? { nodes: [] }).length > 0);
 async function runFromEditor() {
   if (!workflow.value) return;
   if (payloadDriven.value) {
@@ -462,72 +532,32 @@ const EXECUTION_MODES = computed(() => [
   { value: "sync_only", label: t("integration.editor.executionMode.sync.label"), hint: t("integration.editor.executionMode.sync.hint") },
   { value: "caller_decides", label: t("integration.editor.executionMode.callerDecides.label"), hint: t("integration.editor.executionMode.callerDecides.hint") }
 ]);
-const executionModeDraft = ref("async_only");
-watch(workflow, (w) => {
-  if (w) executionModeDraft.value = w.execution_mode ?? "async_only";
-}, { immediate: true });
-const savingMode = ref(false);
 function modeLabel(m) {
   return m === "sync_only" ? t("integration.editor.executionMode.sync.short") : m === "caller_decides" ? t("integration.editor.executionMode.callerDecides.label") : t("integration.editor.executionMode.async.short");
 }
-async function saveExecutionMode(mode) {
-  if (!workflow.value || mode === workflow.value.execution_mode) return;
-  const prev = workflow.value.execution_mode ?? "async_only";
-  executionModeDraft.value = mode;
-  savingMode.value = true;
-  saveError.value = null;
-  try {
-    await update(workflow.value.id, {
-      name: workflow.value.name,
-      description: workflow.value.description,
-      blob: workflow.value.blob,
-      active: workflow.value.active,
-      executionMode: mode
-    });
-    await get(workflow.value.id);
-  } catch (e) {
-    executionModeDraft.value = prev;
-    saveError.value = e.message || t("integration.editor.executionMode.error.generic");
-  } finally {
-    savingMode.value = false;
-  }
-}
-const savingMeta = ref(false);
 const tagSuggestions = computed(() => {
   const all = /* @__PURE__ */ new Set();
   for (const wf of workflows.value) for (const t2 of wf.blob.tags ?? []) all.add(t2);
   return [...all].sort();
 });
-async function saveWorkflowMeta(meta) {
-  if (!workflow.value) return;
-  savingMeta.value = true;
-  saveError.value = null;
-  try {
-    const blob = JSON.parse(JSON.stringify(dirtyBlob.value ?? workflow.value.blob));
-    blob.name = meta.name;
-    if (meta.description) blob.description = meta.description;
-    else delete blob.description;
-    if (meta.tags.length) blob.tags = [...meta.tags];
-    else delete blob.tags;
-    if (meta.icon) blob.icon = meta.icon;
-    else delete blob.icon;
-    await update(workflow.value.id, {
-      name: meta.name,
-      description: meta.description || null,
-      blob,
-      active: workflow.value.active,
-      executionMode: workflow.value.execution_mode
-    });
-    await get(workflow.value.id);
-    dirtyBlob.value = null;
-    toast.success(t("integration.editor.appearance.toast.saved"));
-  } catch (e) {
-    const msg = e.message || t("integration.editor.appearance.error.generic");
-    saveError.value = msg;
-    toast.error(msg);
-  } finally {
-    savingMeta.value = false;
-  }
+const settingsValues = computed(() => ({
+  name: shownName.value,
+  description: shownDescription.value,
+  tags: [...shownTags.value],
+  icon: shownIcon.value,
+  executionMode: draftedMode.value
+}));
+function applySettings(values) {
+  const d = draftFrom();
+  if (!d) return;
+  draft.value = {
+    ...d,
+    name: values.name,
+    description: values.description || null,
+    executionMode: values.executionMode,
+    tags: [...values.tags],
+    icon: values.icon
+  };
 }
 async function onToggleActive() {
   const wf = workflow.value;
@@ -549,18 +579,19 @@ async function onToggleActive() {
   }
 }
 async function save() {
-  if (!workflow.value || !dirtyBlob.value) return;
+  const d = draft.value;
+  if (!workflow.value || !d) return;
   saving.value = true;
   saveError.value = null;
   try {
     await update(workflow.value.id, {
-      name: workflow.value.name,
-      description: workflow.value.description,
-      blob: dirtyBlob.value,
+      name: d.name,
+      description: d.description,
+      blob: payloadBlob(d),
       active: workflow.value.active,
-      executionMode: workflow.value.execution_mode
+      executionMode: d.executionMode
     });
-    dirtyBlob.value = null;
+    draft.value = null;
   } catch (e) {
     const issues = apiValidationIssues(e);
     if (issues.length && workflow.value.active) {
@@ -579,21 +610,22 @@ async function save() {
   }
 }
 async function confirmDeactivate() {
-  if (!workflow.value || !dirtyBlob.value) {
+  const d = draft.value;
+  if (!workflow.value || !d) {
     deactivationOpen.value = false;
     return;
   }
   saving.value = true;
   try {
     await update(workflow.value.id, {
-      name: workflow.value.name,
-      description: workflow.value.description,
-      blob: dirtyBlob.value,
+      name: d.name,
+      description: d.description,
+      blob: payloadBlob(d),
       active: false,
-      executionMode: workflow.value.execution_mode
+      executionMode: d.executionMode
     });
     await get(workflow.value.id);
-    dirtyBlob.value = null;
+    draft.value = null;
     deactivationOpen.value = false;
     toast.success(t("integration.editor.deactivate.toast.savedPaused"));
   } catch (e) {
@@ -619,7 +651,7 @@ function formatDateTime(iso) {
          remaining height below the page header. -->
     <div class="flex h-full flex-col">
       <template v-if="workflow">
-        <PageHeader :title="workflow.name">
+        <PageHeader :title="shownName">
         <template #title>
           <span class="inline-flex min-w-0 items-center gap-1.5">
             <NuxtLink to="/integrations/workflows" class="font-normal text-muted-foreground/80 transition-colors hover:text-primary">{{ t("integration.editor.breadcrumb.workflows") }}</NuxtLink>
@@ -627,7 +659,7 @@ function formatDateTime(iso) {
             <!-- Run open: the breadcrumb extends — name and Runs become crumbs
                  back into the workflow surface. -->
             <template v-if="openRunId">
-              <button type="button" class="truncate font-normal text-muted-foreground/80 transition-colors hover:text-primary" @click="closeRun('editor')">{{ workflow.name }}</button>
+              <button type="button" class="truncate font-normal text-muted-foreground/80 transition-colors hover:text-primary" @click="closeRun('editor')">{{ shownName }}</button>
               <Chevron :size="15" weight="Outline" class="text-muted-foreground/50" />
               <button type="button" class="font-normal text-muted-foreground/80 transition-colors hover:text-primary" @click="closeRun('runs')">{{ t("integration.editor.breadcrumb.runs") }}</button>
               <Chevron :size="15" weight="Outline" class="text-muted-foreground/50" />
@@ -637,9 +669,15 @@ function formatDateTime(iso) {
             </template>
             <template v-else>
               <span class="flex size-7 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-500">
-                <WorkflowIconView :icon="workflow.blob.icon" :size="16" />
+                <WorkflowIconView :icon="shownIcon" :size="16" />
               </span>
-              <span class="truncate">{{ workflow.name }}</span>
+              <span class="truncate">{{ shownName }}</span>
+              <!-- The SAVED mode, beside a drafted name, and the difference is not an
+                   oversight. A name changes nothing about what happens when Run is
+                   pressed, so the header may show what the operator just entered. The
+                   dispatch mode decides what a run does — and a run goes to the
+                   workflow the platform holds, not to the draft. A badge following the
+                   draft would read SYNC over a button that fires an async run. -->
               <Badge variant="outline" class="ml-1.5 border text-xs font-medium uppercase text-muted-foreground" :title="t('integration.editor.header.executionMode.title', { mode: modeLabel(workflow.execution_mode) })">
                 {{ modeLabel(workflow.execution_mode) }}
               </Badge>
@@ -707,17 +745,37 @@ function formatDateTime(iso) {
               <Save v-else :size="12" />
               {{ saving ? t("integration.editor.action.save.saving") : t("integration.editor.action.save.label") }}
             </Button>
-            <Button
-              :variant="workflow.active ? 'outline' : 'default'"
-              class="h-7 text-sm"
-              :class="workflow.active ? 'text-amber-700 hover:text-amber-800' : 'bg-emerald-600 text-white hover:bg-emerald-700'"
-              :disabled="!workflow.active && isInvalid"
+            <!-- Activation is a standing state, not a transport control. The play
+                 symbol belongs to Run, 600 px away in the canvas's control pane,
+                 where pressing it makes one thing happen now; arming a workflow's
+                 triggers looks like nothing happening at all. So this states the
+                 state in the words the workflows list uses — Active, Paused — and
+                 the switch beside it is the flip (PO-254).
+
+                 The blocked reason has two homes because a disabled control shows
+                 no native tooltip in Chrome: the title sits on the wrapper, which
+                 is not disabled, and `aria-describedby` puts the same sentence on
+                 the switch for anyone who never hovers. Sighted users also have
+                 the amber banner directly below, which says it at length. -->
+            <div
+              class="flex h-7 items-center gap-2 rounded-md border border-black/[0.08] px-2"
               :title="workflow.active ? t('integration.editor.action.pause.title') : isInvalid ? t('integration.editor.action.activate.title.invalid', validationWarnings?.length ?? 0) : t('integration.editor.action.activate.title')"
-              @click="onToggleActive"
             >
-              <component :is="workflow.active ? PauseIcon : Play" :size="12" />
-              {{ workflow.active ? t("integration.editor.action.pause.label") : t("integration.editor.action.activate.label") }}
-            </Button>
+              <Switch
+                :aria-label="t('integration.editor.action.state.label')"
+                :aria-describedby="!workflow.active && isInvalid ? 'wf-activation-blocked' : void 0"
+                class="data-[state=checked]:bg-emerald-600 data-[state=unchecked]:bg-slate-300"
+                :model-value="workflow.active"
+                :disabled="!workflow.active && isInvalid"
+                @update:model-value="onToggleActive"
+              />
+              <span class="text-sm" :class="workflow.active ? 'font-medium text-emerald-700' : 'text-muted-foreground'">
+                {{ workflow.active ? t("integration.workflows.table.status.lifecycle.active") : t("integration.workflows.table.status.lifecycle.paused") }}
+              </span>
+              <span v-if="!workflow.active && isInvalid" id="wf-activation-blocked" class="sr-only">
+                {{ t("integration.editor.action.activate.title.invalid", validationWarnings?.length ?? 0) }}
+              </span>
+            </div>
           </template>
         </template>
 
@@ -739,8 +797,8 @@ function formatDateTime(iso) {
       </div>
 
       <!-- Manifest validation (PO-186): an inactive workflow with warnings can't
-           be activated. The banner names what's incomplete; the Activate button
-           stays disabled until the next save recomputes an empty warnings set.
+           be activated. The banner names what's incomplete; the header's state
+           switch stays blocked until the next save recomputes an empty warnings set.
            Amber (not red) — the work is saved fine, it just isn't runnable yet.
            One line per NODE, listing its fields (PO-209): the messages behind
            them ride along as the line's title, and the line leads to the node. -->
@@ -823,9 +881,10 @@ function formatDateTime(iso) {
           :key="editorResetKey"
           ref="editorRef"
           :workflow="workflow"
+          :draft="draft?.blob ?? null"
           :run-busy="running || syncLoading || waitingForBuild"
           :run-waiting="waitingForBuild"
-          :overlay-open="settingsOpen || duplicateOpen || syncOpen || runPayloadOpen || deactivationOpen"
+          :overlay-open="settingsOpen || duplicateOpen || syncOpen || runPayloadOpen || deactivationOpen || leaveOpen"
           @change="onChange"
           @run="runFromEditor"
           @toggle-active="onToggleActive"
@@ -870,7 +929,7 @@ function formatDateTime(iso) {
 
       <!-- History — n8n-style: read-only canvas preview + revision list. -->
       <div v-else-if="tab === 'history'" class="flex-1 min-h-0">
-        <WorkflowHistoryPanel :workflow="workflow" @restored="onRevisionRestored" />
+        <WorkflowHistoryPanel :workflow="workflow" :draft-pending="isDirty" @restored="onRevisionRestored" />
       </div>
       </template>
 
@@ -971,16 +1030,46 @@ function formatDateTime(iso) {
       v-model:open="settingsOpen"
       :workflow="workflow"
       :modes="EXECUTION_MODES"
-      :mode-draft="executionModeDraft"
-      :saving-mode="savingMode"
-      :saving-meta="savingMeta"
+      :current="settingsValues"
       :tag-suggestions="tagSuggestions"
-      @change-mode="(m) => saveExecutionMode(m)"
-      @save-meta="saveWorkflowMeta"
+      @apply="applySettings"
     />
 
     <WorkflowDuplicateDialog v-model:open="duplicateOpen" :workflow="duplicateTarget" @duplicated="onDuplicated" />
 
+    <!-- Leaving the workflow with unsaved work.
+         Staying is the default in the only sense that decides anything: it holds the
+         focus when the dialog opens, so Enter or Space keeps the work. That is what
+         `AlertDialogCancel` is for — the dialog focuses its cancel element, and with
+         none declared it focuses the first tabbable button instead, which was
+         "Discard and leave". A breadcrumb click followed by Enter then threw away the
+         afternoon this dialog exists to protect.
+         `as-child` so the studio's own Button is that element rather than a second one
+         beside it. Escape means the same thing, through `update:open`; a click beside
+         the dialog does nothing at all, which an alert dialog is entitled to. -->
+    <AlertDialog :open="leaveOpen" @update:open="(v) => {
+  if (!v) answerLeave(false);
+}">
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{{ t("integration.editor.leave.dialog.title") }}</AlertDialogTitle>
+          <AlertDialogDescription>
+            {{ t("integration.editor.leave.dialog.description") }}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <Button variant="outline" @click="answerLeave(true)">
+            {{ t("integration.editor.leave.dialog.discard") }}
+          </Button>
+          <AlertDialogCancel as-child>
+            <Button @click="answerLeave(false)">
+              {{ t("integration.editor.leave.dialog.stay") }}
+            </Button>
+          </AlertDialogCancel>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+
     <!-- Active-save blocked by manifest validation: keep the work by saving it
          as paused. Cancelling persists nothing (the 422 already rolled back). -->
     <AlertDialog :open="deactivationOpen" @update:open="(v) => {

package/dist/runtime/types/integrations.d.ts

@@ -318,7 +318,24 @@ export interface NodeManifest {
         title?: LocalizedString;
         category?: string;
     }>;
-    input: NodeManifestInput;
+    /**
+     * The named ports a node accepts data on, keyed by port name — the mirror of
+     * `outputs`.
+     *
+     * **A node that accepts nothing arrives as `[]`, not `{}`**, which is why the
+     * empty array is in the type: the service encodes an empty PHP array as a JSON
+     * array, so the empty case is a different JSON *type* from the populated one. It
+     * is `never[]` rather than `NodeManifestInput[]` because a *populated* array is
+     * not a shape the service produces and not one anything here would read — only
+     * `[]` is real. Read the key through `inputPortsForManifest`, which handles both
+     * forms once.
+     *
+     * **Optional here, required there.** Every published manifest carries it — the
+     * service's schema lists it among the required keys — but the studio also builds
+     * manifest objects in tests and has to tolerate one that predates a field or
+     * omits it, so the type does not claim more than the studio can rely on.
+     */
+    inputs?: Record<string, NodeManifestInput> | never[];
     /** Empty marks a terminal node (PO-201): the run ends there, so the canvas
      *  draws no output handle and no edge may leave it. */
     outputs: NodeManifestOutput[];
@@ -328,6 +345,13 @@ export interface NodeManifest {
         name: string;
         label: string | null;
     };
+    /**
+     * Whether this version's code was built and can therefore be executed
+     * (editor-side enrichment from `GET /nodes`; not manifest data). Absent means
+     * an API that does not report it — treated as executable, so an older host
+     * does not make every node disappear.
+     */
+    __hasBundle?: boolean;
 }
 export interface SecretRecord {
     key: string;

package/dist/runtime/utils/cockpitSources.d.ts

@@ -40,9 +40,18 @@
  * That is measured, not read off the regex: unimport's own `injectImports`, run
  * over this file, injects all five — and over the same file with the declarations
  * rewritten as `declare function`, injects nothing. Repeat it that way if the
- * spelling ever has to change. Nothing stands guard over it automatically, because
- * a test would mean this repository taking a dependency on a build tool it does
- * not otherwise use, to assert that tool's behaviour rather than its own.
+ * spelling ever has to change.
+ *
+ * **Since PO-271 something does stand guard over it, incidentally rather than by
+ * design.** The end-to-end suite runs against a host that auto-imports the same five
+ * names (`playground/app/composables/cockpitFakes.ts`), so the injection has to work
+ * *there* for `specs/credential-managed-source.md` AC-2 to pass at all: rewrite these
+ * as `declare function`, and unimport skips the injection in the playground exactly
+ * as it would in the cockpit, all five names are undefined, the panel disables
+ * itself, and AC-2 goes red. AC-1 would stay green, which is why this is worth
+ * writing down — the half of the spec that is about a host *without* the sources
+ * cannot see the difference. There is still no test asserting the build tool's
+ * behaviour directly, and there deliberately is not one.
  */
 /**
  * The shapes this module uses.
@@ -148,6 +157,16 @@ export interface CockpitMailCredential {
  * says nothing about why. `null` is what the caller turns into "the managed
  * sources are unavailable here", with the manual fields left in place.
  *
+ * **This is not a test for being inside a cockpit, and PO-223 learned that the hard
+ * way.** The dashboard read `!== null` as "am I in a cockpit" for its four shortcuts
+ * into host-owned surfaces, and the standalone dev studio answered yes: it provides
+ * all five names as inert stand-ins on purpose
+ * (`integrations/studio-ui/app/composables/consoleStubs.ts`) so that the managed
+ * credential panels render their empty states rather than nothing. What this answers
+ * is whether the five names are in scope — exactly what the managed sources need to
+ * know, and nothing beyond it. A caller asking anything else has to ask its own
+ * question; that dashboard now asks the router.
+ *
  * Must be called from a component's setup, like the composables it calls.
  */
 export declare function cockpitSources(): CockpitSources | null;

package/dist/runtime/utils/credentialState.d.ts

@@ -16,7 +16,12 @@ export interface CredentialStateInfo {
     label: string;
     /** Badge/pill classes for this state. */
     toneClass: string;
-    /** Failure detail, when the state is `failed`. */
+    /**
+     * What the last test said, whether it passed or failed. A credential type that
+     * reached something can name it — which host, which environment, which plan —
+     * and that is exactly what an operator cannot see anywhere else once a node
+     * stops asking them to configure it.
+     */
     message?: string | null;
     /** When the underlying result was recorded (ISO). */
     at?: string | null;

package/dist/runtime/utils/credentialState.js

@@ -23,7 +23,7 @@ export function credentialState(c) {
     return { key: "needs_reauth", label: t(MESSAGE_KEY.needs_reauth), toneClass: TONE.needs_reauth, at: c.last_test_at };
   }
   if (c.last_test_ok === true) {
-    return { key: "connected", label: t(MESSAGE_KEY.connected), toneClass: TONE.connected, at: c.last_test_at };
+    return { key: "connected", label: t(MESSAGE_KEY.connected), toneClass: TONE.connected, message: c.last_test_message, at: c.last_test_at };
   }
   if (c.last_test_ok === false) {
     return { key: "failed", label: t(MESSAGE_KEY.failed), toneClass: TONE.failed, message: c.last_test_message, at: c.last_test_at };