@revenexx/studio-integrations 2.0.0 → 2.2.0

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

@@ -22,13 +22,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Switch,
-  Textarea
+  Switch
 } from "@revenexx/studio";
 import { deepClone } from "../../../utils/deepClone";
 import WorkflowEditor from "../../../components/Integrations/WorkflowEditor.vue";
@@ -37,6 +31,9 @@ import WorkflowRunReplayPanel from "../../../components/Integrations/WorkflowRun
 import WorkflowSettingsDialog from "../../../components/Integrations/WorkflowSettingsDialog.vue";
 import WorkflowDeleteDialog from "../../../components/Integrations/WorkflowDeleteDialog.vue";
 import WorkflowDuplicateDialog from "../../../components/Integrations/WorkflowDuplicateDialog.vue";
+import WorkflowExportDialog from "../../../components/Integrations/WorkflowExportDialog.vue";
+import { useWorkflowFile } from "../../../composables/useWorkflowFile";
+import { parseWorkflowFile } from "../../../utils/workflowFile";
 import RunsTable from "../../../components/Integrations/RunsTable.vue";
 import RunDetailPanel from "../../../components/Integrations/RunDetailPanel.vue";
 import { toast } from "vue-sonner";
@@ -232,6 +229,41 @@ async function onDuplicated(copy) {
   toast.success(t("integration.editor.toast.duplicated", { name: copy.name }));
   await leaveTo(`/integrations/workflows/${copy.id}`);
 }
+const exporter = ref(null);
+const { planOverwrite } = useWorkflowFile();
+const importInput = ref(null);
+const importPlan = ref(null);
+const importOpen = ref(false);
+async function onImportPicked(event) {
+  const input = event.target;
+  const picked = input.files?.[0];
+  input.value = "";
+  if (!picked || !workflow.value) return;
+  const parsed = parseWorkflowFile(await picked.text());
+  if (!parsed.ok) {
+    toast.error(t(`integration.workflowFile.refused.${parsed.reason}`));
+    return;
+  }
+  let plan;
+  try {
+    plan = await planOverwrite(workflow.value, parsed.file);
+  } catch {
+    toast.error(t("integration.workflowFile.import.planError"));
+    return;
+  }
+  importPlan.value = { ...plan, executionMode: parsed.file.workflow.executionMode, active: workflow.value.active, dirty: isDirty.value };
+  importOpen.value = true;
+}
+function confirmImport() {
+  const plan = importPlan.value;
+  importOpen.value = false;
+  draft.value = null;
+  const base = draftFrom();
+  if (!plan || !base) return;
+  draft.value = { ...base, executionMode: plan.executionMode, blob: plan.blob };
+  editorResetKey.value++;
+  toast.success(t("integration.workflowFile.overwrite.toast"));
+}
 const deleteOpen = ref(false);
 const deleteTarget = ref(null);
 function askDelete() {
@@ -756,14 +788,6 @@ async function confirmDeactivate() {
     saving.value = false;
   }
 }
-function formatDateTime(iso) {
-  if (!iso) return "\u2014";
-  try {
-    return new Date(iso).toLocaleString();
-  } catch {
-    return iso;
-  }
-}
 </script>
 
 <template>
@@ -773,40 +797,40 @@ function formatDateTime(iso) {
     <div class="flex h-full flex-col">
       <template v-if="workflow">
         <PageHeader :title="shownName">
-        <template #title>
-          <span class="flex min-w-0 items-center gap-1.5">
-            <NuxtLink to="/integrations/workflows" class="shrink-0 font-normal text-muted-foreground/80 transition-colors hover:text-primary">{{ t("integration.editor.breadcrumb.workflows") }}</NuxtLink>
-            <Chevron :size="15" weight="Outline" class="shrink-0 text-muted-foreground/50" />
-            <!-- 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" :title="shownName" @click="closeRun('editor')">{{ shownName }}</button>
+          <template #title>
+            <span class="flex min-w-0 items-center gap-1.5">
+              <NuxtLink to="/integrations/workflows" class="shrink-0 font-normal text-muted-foreground/80 transition-colors hover:text-primary">{{ t("integration.editor.breadcrumb.workflows") }}</NuxtLink>
               <Chevron :size="15" weight="Outline" class="shrink-0 text-muted-foreground/50" />
-              <button type="button" class="shrink-0 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="shrink-0 text-muted-foreground/50" />
-              <!-- The Temporal run id IS the run's identity; the internal
+              <!-- 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" :title="shownName" @click="closeRun('editor')">{{ shownName }}</button>
+                <Chevron :size="15" weight="Outline" class="shrink-0 text-muted-foreground/50" />
+                <button type="button" class="shrink-0 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="shrink-0 text-muted-foreground/50" />
+                <!-- The Temporal run id IS the run's identity; the internal
                    number only fills in until the run is handed off. -->
-              <span class="shrink-0 font-mono">{{ openRun?.temporalRunId ?? t("integration.editor.breadcrumb.runNumber", { id: openRunId }) }}</span>
-            </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="shownIcon" :size="16" />
-              </span>
-              <span class="truncate" :title="shownName">{{ shownName }}</span>
-              <!-- The SAVED mode, beside a drafted name, and the difference is not an
+                <span class="shrink-0 font-mono">{{ openRun?.temporalRunId ?? t("integration.editor.breadcrumb.runNumber", { id: openRunId }) }}</span>
+              </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="shownIcon" :size="16" />
+                </span>
+                <span class="truncate" :title="shownName">{{ 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 shrink-0 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>
-            </template>
-          </span>
-        </template>
-        <template #actions>
-          <!-- Folding the rail away, and getting it back (PO-273). It reads as
+                <Badge variant="outline" class="ml-1.5 shrink-0 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>
+              </template>
+            </span>
+          </template>
+          <template #actions>
+            <!-- Folding the rail away, and getting it back (PO-273). It reads as
                chrome rather than as an action on this workflow, so the natural
                place was ahead of the breadcrumb — but the shell's `#title` slot
                *is* the `<h1>`'s content, and a control inside the heading makes
@@ -826,43 +850,43 @@ function formatDateTime(iso) {
                Icon-only, so it carries the same name as before to a screen reader
                and to a test. Rendered only where the canvas fills the page, the
                one surface it acts on. -->
-          <Button
-            v-if="canvasFillsPage"
-            variant="ghost"
-            size="sm"
-            class="h-7 shrink-0 gap-1.5 text-sm font-normal text-muted-foreground hover:text-primary"
-            :class="railFolded ? 'px-2' : 'w-7 px-0'"
-            :aria-label="railFolded ? void 0 : t('integration.nav.action.hide')"
-            :title="railFolded ? t('integration.nav.action.show.title') : t('integration.nav.action.hide.title')"
-            @click="toggleRail"
-          >
-            <RailIcon :size="15" />
-            <template v-if="railFolded">{{ t("integration.nav.action.show") }}</template>
-          </Button>
-
-          <!-- Run open: run-scoped actions replace the workflow Save. -->
-          <template v-if="openRunId">
-            <Button v-if="canRetryOpenRun" variant="outline" class="h-7 text-sm" :disabled="retryBusy" :title="t('integration.editor.action.retry.title')" @click="retryOpenRun">
-              <Loader2 v-if="retryBusy" :size="12" class="animate-spin" />
-              <RetryIcon v-else :size="12" />
-              {{ t("integration.editor.action.retry") }}
-            </Button>
-            <Button class="h-7 text-sm" @click="closeRun('editor')">
-              <ArrowLeft :size="12" />
-              {{ t("integration.editor.action.backToWorkflow") }}
-            </Button>
-          </template>
-          <template v-else>
-            <span
-              v-if="buildWorking"
-              class="inline-flex h-7 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md border border-sky-500/25 bg-sky-500/10 px-2.5 text-sm text-sky-700"
-              :title="buildNotice?.text"
+            <Button
+              v-if="canvasFillsPage"
+              variant="ghost"
+              size="sm"
+              class="h-7 shrink-0 gap-1.5 text-sm font-normal text-muted-foreground hover:text-primary"
+              :class="railFolded ? 'px-2' : 'w-7 px-0'"
+              :aria-label="railFolded ? void 0 : t('integration.nav.action.hide')"
+              :title="railFolded ? t('integration.nav.action.show.title') : t('integration.nav.action.hide.title')"
+              @click="toggleRail"
             >
-              <Loader2 :size="12" class="animate-spin" />
-              {{ workflow.buildStatus === "building" ? t("integration.editor.build.chip.building") : t("integration.editor.build.chip.queued") }}
-            </span>
-            <span v-if="isDirty" class="shrink-0 whitespace-nowrap text-sm text-amber-600">{{ t("integration.editor.status.unsavedChanges") }}</span>
-            <!-- What is done to the WORKFLOW, as opposed to the draft in front
+              <RailIcon :size="15" />
+              <template v-if="railFolded">{{ t("integration.nav.action.show") }}</template>
+            </Button>
+
+            <!-- Run open: run-scoped actions replace the workflow Save. -->
+            <template v-if="openRunId">
+              <Button v-if="canRetryOpenRun" variant="outline" class="h-7 text-sm" :disabled="retryBusy" :title="t('integration.editor.action.retry.title')" @click="retryOpenRun">
+                <Loader2 v-if="retryBusy" :size="12" class="animate-spin" />
+                <RetryIcon v-else :size="12" />
+                {{ t("integration.editor.action.retry") }}
+              </Button>
+              <Button class="h-7 text-sm" @click="closeRun('editor')">
+                <ArrowLeft :size="12" />
+                {{ t("integration.editor.action.backToWorkflow") }}
+              </Button>
+            </template>
+            <template v-else>
+              <span
+                v-if="buildWorking"
+                class="inline-flex h-7 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md border border-sky-500/25 bg-sky-500/10 px-2.5 text-sm text-sky-700"
+                :title="buildNotice?.text"
+              >
+                <Loader2 :size="12" class="animate-spin" />
+                {{ workflow.buildStatus === "building" ? t("integration.editor.build.chip.building") : t("integration.editor.build.chip.queued") }}
+              </span>
+              <span v-if="isDirty" class="shrink-0 whitespace-nowrap text-sm text-amber-600">{{ t("integration.editor.status.unsavedChanges") }}</span>
+              <!-- What is done to the WORKFLOW, as opposed to the draft in front
                  of it: the buttons beside this menu discard and save an
                  afternoon's work, and these two make and unmake the thing that
                  work belongs to. Two reasons they are a menu rather than two more
@@ -871,33 +895,39 @@ function formatDateTime(iso) {
                  Duplicate that stayed a button reads as an oversight rather than
                  as a grouping — the menu only holds together while it holds both.
                  Icon-only, so it carries a name of its own. -->
-            <DropdownMenu>
-              <DropdownMenuTrigger as-child>
-                <Button variant="outline" size="icon" class="size-7" :disabled="saving" :aria-label="t('integration.editor.action.more.aria')">
-                  <MoreHorizontal :size="12" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuLabel>{{ t("integration.editor.action.more.label") }}</DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem @select="duplicateOpen = true">
-                  {{ t("integration.editor.action.duplicate.label") }}
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem class="text-destructive focus:text-destructive" @select="askDelete">
-                  {{ t("integration.common.action.delete") }}
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-            <Button variant="outline" class="h-7 text-sm" :disabled="!isDirty || saving" :title="t('integration.editor.action.discard.title')" @click="discardChanges">
-              {{ t("integration.editor.action.discard.label") }}
-            </Button>
-            <Button class="h-7 text-sm" :disabled="!isDirty || saving" @click="save">
-              <Loader2 v-if="saving" :size="12" class="animate-spin" />
-              <Save v-else :size="12" />
-              {{ saving ? t("integration.editor.action.save.saving") : t("integration.editor.action.save.label") }}
-            </Button>
-            <!-- Activation is a standing state, not a transport control. The play
+              <DropdownMenu>
+                <DropdownMenuTrigger as-child>
+                  <Button variant="outline" size="icon" class="size-7" :disabled="saving" :aria-label="t('integration.editor.action.more.aria')">
+                    <MoreHorizontal :size="12" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuLabel>{{ t("integration.editor.action.more.label") }}</DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem @select="duplicateOpen = true">
+                    {{ t("integration.editor.action.duplicate.label") }}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem @select="exporter?.start(workflow.id)">
+                    {{ t("integration.workflowFile.action.export") }}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem @select="importInput?.click()">
+                    {{ t("integration.workflowFile.action.import") }}
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem class="text-destructive focus:text-destructive" @select="askDelete">
+                    {{ t("integration.common.action.delete") }}
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+              <Button variant="outline" class="h-7 text-sm" :disabled="!isDirty || saving" :title="t('integration.editor.action.discard.title')" @click="discardChanges">
+                {{ t("integration.editor.action.discard.label") }}
+              </Button>
+              <Button class="h-7 text-sm" :disabled="!isDirty || saving" @click="save">
+                <Loader2 v-if="saving" :size="12" class="animate-spin" />
+                <Save v-else :size="12" />
+                {{ saving ? t("integration.editor.action.save.saving") : t("integration.editor.action.save.label") }}
+              </Button>
+              <!-- 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
@@ -909,180 +939,180 @@ function formatDateTime(iso) {
                  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')"
-            >
-              <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>
+              <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')"
+              >
+                <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>
-        </template>
 
-      </PageHeader>
+        </PageHeader>
 
-      <TabBar v-if="!openRunId" v-model="tab" :tabs="tabs" class="shrink-0 px-4" />
-      <TabBar v-else v-model="runView" :tabs="runViews" class="shrink-0 px-4" />
+        <TabBar v-if="!openRunId" v-model="tab" :tabs="tabs" class="shrink-0 px-4" />
+        <TabBar v-else v-model="runView" :tabs="runViews" class="shrink-0 px-4" />
 
-      <div v-if="saveError" class="border-b border-rose-500/20 bg-rose-500/5 px-4 py-2 text-sm text-rose-700">
-        {{ saveError }}
-      </div>
+        <div v-if="saveError" class="border-b border-rose-500/20 bg-rose-500/5 px-4 py-2 text-sm text-rose-700">
+          {{ saveError }}
+        </div>
 
-      <div v-if="reauthCredentials.length" class="border-b border-amber-500/20 bg-amber-500/5 px-4 py-2 text-sm text-amber-800">
-        {{ t("integration.editor.reauth.banner", reauthCredentials.length) }}
-        ({{ reauthCredentials.map((c) => c.name).join(", ") }}) —
-        <NuxtLink to="/integrations/credentials" class="font-medium underline">
-          {{ t("integration.editor.reauth.action.fix") }}
-        </NuxtLink>.
-      </div>
+        <div v-if="reauthCredentials.length" class="border-b border-amber-500/20 bg-amber-500/5 px-4 py-2 text-sm text-amber-800">
+          {{ t("integration.editor.reauth.banner", reauthCredentials.length) }}
+          ({{ reauthCredentials.map((c) => c.name).join(", ") }}) —
+          <NuxtLink to="/integrations/credentials" class="font-medium underline">
+            {{ t("integration.editor.reauth.action.fix") }}
+          </NuxtLink>.
+        </div>
 
-      <!-- Manifest validation (PO-186): an inactive workflow with warnings can't
+        <!-- Manifest validation (PO-186): an inactive workflow with warnings can't
            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. -->
-      <div
-        v-if="!openRunId && !workflow.active && isInvalid"
-        class="border-b border-amber-500/20 bg-amber-500/5 px-4 py-2 text-sm text-amber-800"
-      >
-        <p class="font-medium">
-          {{ t("integration.editor.validation.banner.title", { summary: warningSummary }) }}
-        </p>
-        <ul
-          class="mt-1 space-y-0.5"
-          :class="warningsExpanded ? 'max-h-36 overflow-y-auto pr-1' : ''"
+        <div
+          v-if="!openRunId && !workflow.active && isInvalid"
+          class="border-b border-amber-500/20 bg-amber-500/5 px-4 py-2 text-sm text-amber-800"
         >
-          <li
-            v-for="(g, i) in warningsExpanded ? warningGroups : warningGroups.slice(0, WARN_COLLAPSED)"
-            :key="`${g.nodeId ?? 'unattributed'}-${i}`"
-            class="flex gap-1.5"
+          <p class="font-medium">
+            {{ t("integration.editor.validation.banner.title", { summary: warningSummary }) }}
+          </p>
+          <ul
+            class="mt-1 space-y-0.5"
+            :class="warningsExpanded ? 'max-h-36 overflow-y-auto pr-1' : ''"
           >
-            <span class="select-none text-amber-500">•</span>
-            <!-- Attributed to a node: the whole line jumps there and opens its
-                 settings. Otherwise there is nowhere to go — state the finding. -->
-            <button
-              v-if="g.nodeId"
-              type="button"
-              class="text-left underline decoration-amber-700/30 underline-offset-2 hover:decoration-amber-800"
-              :title="g.messages.join('\n')"
-              :aria-label="t('integration.editor.validation.node.ariaFix', g.fields.length, { label: g.label })"
-              @click="revealNode(g.nodeId)"
+            <li
+              v-for="(g, i) in warningsExpanded ? warningGroups : warningGroups.slice(0, WARN_COLLAPSED)"
+              :key="`${g.nodeId ?? 'unattributed'}-${i}`"
+              class="flex gap-1.5"
             >
-              <span class="font-medium">{{ g.label }}</span> — {{ g.fields.join(", ") }}
-            </button>
-            <span v-else>{{ g.messages.join(" ") }}</span>
-          </li>
-          <li v-if="!warningsExpanded && warningGroups.length > WARN_COLLAPSED" class="pl-3">
-            <button type="button" class="text-amber-700/90 underline underline-offset-2 hover:text-amber-900" @click="warningsExpanded = true">
-              {{ t("integration.editor.validation.banner.more", { n: warningGroups.length - WARN_COLLAPSED }) }}
-            </button>
-          </li>
-        </ul>
-      </div>
+              <span class="select-none text-amber-500">•</span>
+              <!-- Attributed to a node: the whole line jumps there and opens its
+                 settings. Otherwise there is nowhere to go — state the finding. -->
+              <button
+                v-if="g.nodeId"
+                type="button"
+                class="text-left underline decoration-amber-700/30 underline-offset-2 hover:decoration-amber-800"
+                :title="g.messages.join('\n')"
+                :aria-label="t('integration.editor.validation.node.ariaFix', g.fields.length, { label: g.label })"
+                @click="revealNode(g.nodeId)"
+              >
+                <span class="font-medium">{{ g.label }}</span> — {{ g.fields.join(", ") }}
+              </button>
+              <span v-else>{{ g.messages.join(" ") }}</span>
+            </li>
+            <li v-if="!warningsExpanded && warningGroups.length > WARN_COLLAPSED" class="pl-3">
+              <button type="button" class="text-amber-700/90 underline underline-offset-2 hover:text-amber-900" @click="warningsExpanded = true">
+                {{ t("integration.editor.validation.banner.more", { n: warningGroups.length - WARN_COLLAPSED }) }}
+              </button>
+            </li>
+          </ul>
+        </div>
 
-      <!-- Only the FAILED build state banners (its message matters); the
+        <!-- Only the FAILED build state banners (its message matters); the
            working states live as the header chip — and inside a run the
            workflow's build state is noise, so nothing shows at all. -->
-      <div
-        v-if="!openRunId && buildNotice && buildNotice.tone === 'error'"
-        class="border-b border-rose-500/20 bg-rose-500/5 px-4 py-2 text-sm text-rose-700"
-      >
-        {{ buildNotice.text }}
-      </div>
+        <div
+          v-if="!openRunId && buildNotice && buildNotice.tone === 'error'"
+          class="border-b border-rose-500/20 bg-rose-500/5 px-4 py-2 text-sm text-rose-700"
+        >
+          {{ buildNotice.text }}
+        </div>
 
-      <!-- Nested run detail — overview/timeline panel or Replay canvas. -->
-      <template v-if="openRunId">
-        <div v-if="runView !== 'replay'" class="flex-1 overflow-y-auto p-4">
-          <div class="w-full">
-            <RunDetailPanel v-if="openRun" :run="openRun" :view="runView" @changed="loadOpenRun" />
-            <div v-else-if="openRunError" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
-              {{ openRunError }}
-            </div>
-            <div v-else class="flex items-center gap-2 p-12 text-sm text-muted-foreground">
-              <Loader2 :size="16" class="animate-spin" /> {{ t("integration.editor.run.loading") }}
+        <!-- Nested run detail — overview/timeline panel or Replay canvas. -->
+        <template v-if="openRunId">
+          <div v-if="runView !== 'replay'" class="flex-1 overflow-y-auto p-4">
+            <div class="w-full">
+              <RunDetailPanel v-if="openRun" :run="openRun" :view="runView" :nodes="workflow?.blob?.nodes ?? []" @changed="loadOpenRun" />
+              <div v-else-if="openRunError" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
+                {{ openRunError }}
+              </div>
+              <div v-else class="flex items-center gap-2 p-12 text-sm text-muted-foreground">
+                <Loader2 :size="16" class="animate-spin" /> {{ t("integration.editor.run.loading") }}
+              </div>
             </div>
           </div>
-        </div>
-        <div v-else class="min-h-0 flex-1">
-          <WorkflowRunReplayPanel :workflow="workflow" :initial-run-id="openRunId" />
-        </div>
-      </template>
+          <div v-else class="min-h-0 flex-1">
+            <WorkflowRunReplayPanel :workflow="workflow" :initial-run-id="openRunId" />
+          </div>
+        </template>
 
-      <!-- Editor tab — fills the remaining height inside the panel via
+        <!-- Editor tab — fills the remaining height inside the panel via
            the flex wrapper in the studio layout.
 
            overlay-open: every lightbox this page owns renders as a sibling of
            the tabs, so the editor stays mounted underneath one and would keep
            its keyboard shortcuts live (Delete deleting the selected node behind
            the dialog — PO-208). Add new page-level dialogs to this list. -->
-      <div v-else-if="tab === 'editor'" class="flex-1 min-h-0">
-        <WorkflowEditor
-          :key="editorResetKey"
-          ref="editorRef"
-          :workflow="workflow"
-          :draft="draft?.blob ?? null"
-          :run-busy="running || syncLoading || waitingForBuild"
-          :run-waiting="waitingForBuild"
-          :overlay-open="settingsOpen || duplicateOpen || deleteOpen || syncOpen || runPayloadOpen || deactivationOpen || leaveOpen"
-          @change="onChange"
-          @run="runFromEditor"
-          @toggle-active="onToggleActive"
-          @open-settings="settingsOpen = true"
-        />
-      </div>
+        <div v-else-if="tab === 'editor'" class="flex-1 min-h-0">
+          <WorkflowEditor
+            :key="editorResetKey"
+            ref="editorRef"
+            :workflow="workflow"
+            :draft="draft?.blob ?? null"
+            :run-busy="running || syncLoading || waitingForBuild"
+            :run-waiting="waitingForBuild"
+            :overlay-open="settingsOpen || duplicateOpen || importOpen || !!exporter?.open || deleteOpen || syncOpen || runPayloadOpen || deactivationOpen || leaveOpen"
+            @change="onChange"
+            @run="runFromEditor"
+            @toggle-active="onToggleActive"
+            @open-settings="settingsOpen = true"
+          />
+        </div>
 
-      <!-- Runs — this workflow's full execution history. Manual runs start
+        <!-- Runs — this workflow's full execution history. Manual runs start
            from the editor's Run button, through the run dialog. -->
-      <div v-else-if="tab === 'runs'" class="p-4 space-y-4 overflow-y-auto">
-        <div v-if="runsError" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
-          {{ runsError }}
-        </div>
+        <div v-else-if="tab === 'runs'" class="p-4 space-y-4 overflow-y-auto">
+          <div v-if="runsError" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
+            {{ runsError }}
+          </div>
 
-        <RunsTable
-          :runs="wfRuns"
-          :loading="runsLoading"
-          :pagination="false"
-          :show-workflow="false"
-          :empty-text="t('integration.editor.runs.empty')"
-          @changed="() => loadRuns()"
-        />
+          <RunsTable
+            :runs="wfRuns"
+            :loading="runsLoading"
+            :pagination="false"
+            :show-workflow="false"
+            :empty-text="t('integration.editor.runs.empty')"
+            @changed="() => loadRuns()"
+          />
 
-        <!-- Server pagination — the endpoint pages, so the whole history is reachable. -->
-        <div v-if="runsLastPage > 1 || runsTotal > wfRuns.length" class="flex items-center justify-between text-sm text-muted-foreground">
-          <span class="tabular-nums">{{ t("integration.editor.runs.pagination.page", { page: runsPage, lastPage: runsLastPage }) }} · {{ t("integration.editor.runs.pagination.count", runsTotal) }}</span>
-          <div class="flex gap-2">
-            <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="runsWanted <= 1 || runsLoading" @click="goRunsPage(runsWanted - 1)">
-              {{ t("integration.editor.runs.pagination.newer") }}
-            </Button>
-            <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="runsWanted >= runsLastPage || runsLoading" @click="goRunsPage(runsWanted + 1)">
-              {{ t("integration.editor.runs.pagination.older") }}
-            </Button>
+          <!-- Server pagination — the endpoint pages, so the whole history is reachable. -->
+          <div v-if="runsLastPage > 1 || runsTotal > wfRuns.length" class="flex items-center justify-between text-sm text-muted-foreground">
+            <span class="tabular-nums">{{ t("integration.editor.runs.pagination.page", { page: runsPage, lastPage: runsLastPage }) }} · {{ t("integration.editor.runs.pagination.count", runsTotal) }}</span>
+            <div class="flex gap-2">
+              <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="runsWanted <= 1 || runsLoading" @click="goRunsPage(runsWanted - 1)">
+                {{ t("integration.editor.runs.pagination.newer") }}
+              </Button>
+              <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="runsWanted >= runsLastPage || runsLoading" @click="goRunsPage(runsWanted + 1)">
+                {{ t("integration.editor.runs.pagination.older") }}
+              </Button>
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- Dead letters — triggers that never produced a run -->
-      <div v-else-if="tab === 'dead-letters'" class="p-6 overflow-y-auto">
-        <IntegrationsDeadLettersPanel :workflow-id="workflow.id" />
-      </div>
+        <!-- Dead letters — triggers that never produced a run -->
+        <div v-else-if="tab === 'dead-letters'" class="p-6 overflow-y-auto">
+          <IntegrationsDeadLettersPanel :workflow-id="workflow.id" />
+        </div>
 
-      <!-- History — n8n-style: read-only canvas preview + revision list. -->
-      <div v-else-if="tab === 'history'" class="flex-1 min-h-0">
-        <WorkflowHistoryPanel :workflow="workflow" :draft-pending="isDirty" @restored="onRevisionRestored" />
-      </div>
+        <!-- History — n8n-style: read-only canvas preview + revision list. -->
+        <div v-else-if="tab === 'history'" class="flex-1 min-h-0">
+          <WorkflowHistoryPanel :workflow="workflow" :draft-pending="isDirty" @restored="onRevisionRestored" />
+        </div>
       </template>
 
       <div v-else class="p-12 text-center text-sm text-muted-foreground">
@@ -1197,6 +1227,56 @@ function formatDateTime(iso) {
 
     <WorkflowDuplicateDialog v-model:open="duplicateOpen" :workflow="duplicateTarget" @duplicated="onDuplicated" />
 
+    <WorkflowExportDialog ref="exporter" />
+
+    <!-- The menu item opens the browser's own file picker; this input is only its
+         carrier, and it carries a name so it is not an unnamed control. -->
+    <input
+      ref="importInput"
+      type="file"
+      accept=".json,application/json"
+      class="hidden"
+      :aria-label="t('integration.workflowFile.field.file')"
+      @change="onImportPicked"
+    >
+
+    <!-- Importing over this workflow. Says how much goes, that the credentials have
+         to be chosen again, and — where it applies — that the running version keeps
+         running and that unsaved work is thrown away. -->
+    <AlertDialog :open="importOpen" @update:open="(v) => {
+  if (!v) importOpen = false;
+}">
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{{ t("integration.workflowFile.overwrite.title") }}</AlertDialogTitle>
+          <AlertDialogDescription v-if="importPlan && workflow">
+            {{ t("integration.workflowFile.overwrite.description", {
+  name: workflow.name,
+  current: t("integration.workflowFile.count.both", {
+    nodes: t("integration.workflowFile.count.nodes", importPlan.replaced.nodes),
+    triggers: t("integration.workflowFile.count.triggers", importPlan.replaced.triggers)
+  }),
+  incoming: t("integration.workflowFile.count.both", {
+    nodes: t("integration.workflowFile.count.nodes", importPlan.incoming.nodes),
+    triggers: t("integration.workflowFile.count.triggers", importPlan.incoming.triggers)
+  })
+}) }}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <ul class="space-y-1 text-sm text-muted-foreground">
+          <li>{{ t("integration.workflowFile.overwrite.save") }}</li>
+          <li v-if="importPlan?.active" class="text-amber-700">{{ t("integration.workflowFile.overwrite.active") }}</li>
+          <li v-if="importPlan?.dirty" class="text-amber-700">{{ t("integration.workflowFile.overwrite.draft") }}</li>
+        </ul>
+        <AlertDialogFooter>
+          <AlertDialogCancel as-child>
+            <Button variant="outline">{{ t("integration.common.action.cancel") }}</Button>
+          </AlertDialogCancel>
+          <Button @click="confirmImport">{{ t("integration.workflowFile.overwrite.confirm") }}</Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+
     <!-- 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