@revenexx/studio-integrations 0.1.3 → 0.2.0

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

@@ -0,0 +1,14 @@
+import type { WorkflowRun } from '../../types/integrations.js';
+type __VLS_Props = {
+    run: WorkflowRun;
+    /** Which surface renders: the overview or the steps+history timeline. */
+    view?: 'details' | 'timeline';
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    changed: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChanged?: (() => any) | undefined;
+}>, {
+    view: "details" | "timeline";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,13 @@
+import type { WorkflowBlob } from '../../types/integrations.js';
+type __VLS_Props = {
+    blob: Pick<WorkflowBlob, 'nodes'>;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,175 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { Paperclip, TrashBinMinimalistic as Trash2 } from "#solar-icons";
+import { Input, Switch, Textarea } from "@revenexx/studio";
+import { buildPayload, payloadFieldsFromBlob, splitPayload } from "../../data/payloadForm";
+const props = defineProps({
+  blob: { type: Object, required: true }
+});
+const model = defineModel({ type: String, ...{ default: "{}" } });
+const fields = computed(() => payloadFieldsFromBlob(props.blob));
+const textValues = ref({});
+const files = ref({});
+const extras = ref({});
+const parseNote = ref(null);
+const expert = ref(fields.value.length === 0);
+function parseModel() {
+  try {
+    const parsed = JSON.parse(model.value || "{}");
+    return parsed !== null && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : {};
+  } catch {
+    return null;
+  }
+}
+function hydrateForm() {
+  const payload = parseModel();
+  if (payload === null) return false;
+  const split = splitPayload(fields.value, payload);
+  textValues.value = split.textValues;
+  files.value = split.files;
+  extras.value = split.extras;
+  return true;
+}
+function serialize() {
+  model.value = JSON.stringify(buildPayload(fields.value, textValues.value, files.value, extras.value), null, 2);
+}
+hydrateForm();
+watch([textValues, files], () => {
+  if (!expert.value) serialize();
+}, { deep: true });
+function toggleExpert(on) {
+  if (on) {
+    serialize();
+    expert.value = true;
+    parseNote.value = null;
+    return;
+  }
+  if (!hydrateForm()) {
+    parseNote.value = "The JSON does not parse \u2014 fix it before switching back to the form.";
+    return;
+  }
+  parseNote.value = null;
+  expert.value = false;
+}
+const WARN_BYTES = 25 * 1024 * 1024;
+const dragOver = ref(null);
+function attach(path, file) {
+  const reader = new FileReader();
+  reader.onload = () => {
+    const url = String(reader.result ?? "");
+    const data = url.slice(url.indexOf(",") + 1);
+    files.value = {
+      ...files.value,
+      [path]: {
+        data,
+        filename: file.name,
+        contentType: file.type || "application/octet-stream",
+        size: file.size
+      }
+    };
+  };
+  reader.readAsDataURL(file);
+}
+function onPick(path, ev) {
+  const file = ev.target.files?.[0];
+  if (file) attach(path, file);
+  ev.target.value = "";
+}
+function onDrop(path, ev) {
+  dragOver.value = null;
+  const file = ev.dataTransfer?.files?.[0];
+  if (file) attach(path, file);
+}
+function detach(path) {
+  files.value = { ...files.value, [path]: null };
+}
+function prettyBytes(n) {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / 1024 / 1024).toFixed(1)} MB`;
+}
+</script>
+
+<template>
+  <div class="space-y-2">
+    <div v-if="fields.length" class="flex items-center justify-between">
+      <span class="text-xs font-medium text-muted-foreground">
+        {{ expert ? "Trigger payload (JSON)" : "Trigger payload" }}
+      </span>
+      <label class="flex items-center gap-1.5 text-xs text-muted-foreground">
+        <Switch :model-value="expert" @update:model-value="toggleExpert" />
+        Expert (JSON)
+      </label>
+    </div>
+    <label v-else class="text-xs font-medium text-muted-foreground">Trigger payload (JSON)</label>
+
+    <!-- ── Form mode: fields derived from the blob's payload references ──── -->
+    <div v-if="!expert && fields.length" class="space-y-3">
+      <div v-for="field in fields" :key="`${field.kind}:${field.path}`" class="space-y-1">
+        <label class="text-xs font-medium">{{ field.label }}</label>
+
+        <template v-if="field.kind === 'file'">
+          <div
+            v-if="!files[field.path]"
+            class="relative flex items-center justify-center gap-2 rounded-md border border-dashed px-3 py-5 text-sm text-muted-foreground transition"
+            :class="dragOver === field.path ? 'border-emerald-500/60 bg-emerald-500/5 text-emerald-700' : 'border-black/[0.12] hover:border-black/25'"
+            @dragover.prevent="dragOver = field.path"
+            @dragleave="dragOver = null"
+            @drop.prevent="onDrop(field.path, $event)"
+          >
+            <Paperclip :size="14" />
+            Drop a file here or click to choose
+            <input
+              type="file"
+              class="absolute inset-0 cursor-pointer opacity-0"
+              @change="onPick(field.path, $event)"
+            >
+          </div>
+          <div v-else class="flex items-center gap-2 rounded-md border border-black/[0.08] bg-muted/30 px-2.5 py-1.5 text-sm">
+            <Paperclip :size="13" class="shrink-0 text-muted-foreground" />
+            <span class="min-w-0 flex-1 truncate">{{ files[field.path].filename }}</span>
+            <span class="shrink-0 text-xs text-muted-foreground">{{ prettyBytes(files[field.path].size) }}</span>
+            <button
+              type="button"
+              class="flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground transition hover:bg-muted/60 hover:text-rose-600"
+              title="Remove file"
+              @click="detach(field.path)"
+            >
+              <Trash2 :size="13" />
+            </button>
+          </div>
+          <p v-if="files[field.path] && files[field.path].size > WARN_BYTES" class="text-xs text-amber-700">
+            Large file — payloads beyond ~25 MB can exceed the workflow bus limits. Prefer the SFTP or IO routes for big files.
+          </p>
+        </template>
+
+        <template v-else>
+          <Input
+            :model-value="textValues[field.path] ?? ''"
+            class="h-8 text-sm"
+            :placeholder="`\${{ trigger.payload.${field.path} }}`"
+            @update:model-value="(v) => {
+  textValues = { ...textValues, [field.path]: String(v) };
+}"
+          />
+        </template>
+      </div>
+      <p v-if="Object.keys(extras).length" class="text-xs text-muted-foreground">
+        Additional payload keys from the expert view are kept: {{ Object.keys(extras).join(", ") }}
+      </p>
+    </div>
+
+    <!-- ── Expert mode: the raw JSON ─────────────────────────────────────── -->
+    <template v-else>
+      <Textarea
+        v-model="model"
+        :rows="8"
+        spellcheck="false"
+        class="font-mono text-xs"
+        placeholder="{}"
+      />
+    </template>
+
+    <p v-if="parseNote" class="text-xs text-rose-600">{{ parseNote }}</p>
+  </div>
+</template>

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

@@ -0,0 +1,13 @@
+import type { WorkflowBlob } from '../../types/integrations.js';
+type __VLS_Props = {
+    blob: Pick<WorkflowBlob, 'nodes'>;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,27 @@
+/**
+ * Result surface for a manual run, sync and async alike. The parent opens it
+ * in a loading state, awaits the trigger, then feeds through the outcome:
+ *
+ *  - sync:  the run's response body (JSON) or a mapped error (timeout /
+ *           failed run). A failed 422 ships the run object, so `runId` lets
+ *           the operator jump straight into the run detail.
+ *  - async: a started confirmation with the fresh run's number — the visible
+ *           counterpart to the fire-and-forget POST.
+ */
+type __VLS_Props = {
+    open: boolean;
+    loading?: boolean;
+    mode?: 'sync' | 'async';
+    response?: unknown;
+    error?: string | null;
+    /** The run behind this result (sync failure / async start) for deep-linking. */
+    runId?: string | null;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    "view-run": (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    "onView-run"?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,84 @@
+<script setup>
+import { CheckCircle as CheckCircle2, RefreshCircle as Loader2 } from "#solar-icons";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "@revenexx/studio";
+defineProps({
+  open: { type: Boolean, required: true },
+  loading: { type: Boolean, required: false },
+  mode: { type: String, required: false },
+  response: { type: null, required: false },
+  error: { type: [String, null], required: false },
+  runId: { type: [String, null], required: false }
+});
+const emit = defineEmits(["update:open", "view-run"]);
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
+    <!-- Wide result surface — but hard-capped: min-w-0 down the tree keeps the
+         JSON <pre> scrolling INSIDE instead of blowing the dialog open. -->
+    <DialogContent class="max-w-[94vw] overflow-hidden sm:max-w-4xl">
+      <DialogHeader>
+        <DialogTitle>{{ mode === "async" ? "Run started" : "Run response" }}</DialogTitle>
+        <DialogDescription class="font-mono text-sm">
+          {{ mode === "async" ? "Queued for background execution" : "Synchronous run result" }}
+        </DialogDescription>
+      </DialogHeader>
+
+      <div class="min-w-0 max-w-full text-sm">
+        <div v-if="loading" class="flex items-center gap-2 py-6 text-muted-foreground">
+          <Loader2 :size="16" class="animate-spin" />
+          {{ mode === "async" ? "Starting\u2026" : "Running\u2026" }}
+        </div>
+
+        <template v-else-if="error">
+          <div class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-rose-700">
+            {{ error }}
+          </div>
+          <div v-if="runId" class="mt-3 flex justify-end">
+            <Button class="h-8 text-sm" @click="emit('view-run', runId)">
+              View run #{{ runId }}
+            </Button>
+          </div>
+        </template>
+
+        <template v-else-if="mode === 'async'">
+          <div class="flex items-center gap-2 rounded-md border border-emerald-500/20 bg-emerald-500/5 px-3 py-2 text-emerald-700">
+            <CheckCircle2 :size="15" class="shrink-0" />
+            <span v-if="runId">Run #{{ runId }} started and is executing in the background.</span>
+            <span v-else>Run started and is executing in the background.</span>
+          </div>
+          <div class="mt-3 flex justify-end gap-2">
+            <Button variant="outline" class="h-8 text-sm" @click="emit('update:open', false)">
+              Close
+            </Button>
+            <Button v-if="runId" class="h-8 text-sm" @click="emit('view-run', runId)">
+              View run
+            </Button>
+          </div>
+        </template>
+
+        <template v-else-if="response !== void 0 && response !== null">
+          <pre
+            class="max-h-[66vh] w-full min-w-0 max-w-full overflow-auto rounded-md border border-black/[0.06] bg-slate-50 p-3 text-xs"
+          >{{ JSON.stringify(response, null, 2) }}</pre>
+          <div v-if="runId" class="mt-3 flex justify-end">
+            <Button variant="outline" class="h-8 text-sm" @click="emit('view-run', runId)">
+              View run
+            </Button>
+          </div>
+        </template>
+
+        <p v-else class="py-6 text-muted-foreground">
+          No response.
+        </p>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>

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

@@ -0,0 +1,27 @@
+/**
+ * Result surface for a manual run, sync and async alike. The parent opens it
+ * in a loading state, awaits the trigger, then feeds through the outcome:
+ *
+ *  - sync:  the run's response body (JSON) or a mapped error (timeout /
+ *           failed run). A failed 422 ships the run object, so `runId` lets
+ *           the operator jump straight into the run detail.
+ *  - async: a started confirmation with the fresh run's number — the visible
+ *           counterpart to the fire-and-forget POST.
+ */
+type __VLS_Props = {
+    open: boolean;
+    loading?: boolean;
+    mode?: 'sync' | 'async';
+    response?: unknown;
+    error?: string | null;
+    /** The run behind this result (sync failure / async start) for deep-linking. */
+    runId?: string | null;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    "view-run": (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    "onView-run"?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,21 @@
+import type { WorkflowRun } from '../../types/integrations.js';
+type __VLS_Props = {
+    runs: WorkflowRun[];
+    loading?: boolean;
+    emptyText?: string;
+    /** false when the owning list pages server-side (workflow Runs tab). */
+    pagination?: boolean;
+    /** false inside a workflow — the context makes the column redundant. */
+    showWorkflow?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    changed: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChanged?: (() => any) | undefined;
+}>, {
+    loading: boolean;
+    emptyText: string;
+    pagination: boolean;
+    showWorkflow: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,114 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { Badge } from "@revenexx/studio";
+import { statusClass } from "../../utils/statusStyle";
+const props = defineProps({
+  runs: { type: Array, required: true },
+  loading: { type: Boolean, required: false, default: false },
+  emptyText: { type: String, required: false, default: "No runs yet \u2014 kick off a workflow to populate this view." },
+  pagination: { type: Boolean, required: false, default: true },
+  showWorkflow: { type: Boolean, required: false, default: true }
+});
+const emit = defineEmits(["changed"]);
+const router = useRouter();
+const now = ref(Date.now());
+let tick = null;
+onMounted(() => {
+  tick = setInterval(() => {
+    now.value = Date.now();
+  }, 3e3);
+});
+onUnmounted(() => {
+  if (tick) {
+    clearInterval(tick);
+    tick = null;
+  }
+});
+function openRun(r) {
+  void router.push({ path: `/integrations/workflows/${r.workflowId}`, query: { run: r.id } });
+}
+function formatRelative(iso) {
+  if (!iso) return "\u2014";
+  const ms = Date.now() - new Date(iso).getTime();
+  if (Number.isNaN(ms)) return "\u2014";
+  if (ms < 6e4) return `${Math.max(1, Math.floor(ms / 1e3))}s ago`;
+  if (ms < 36e5) return `${Math.floor(ms / 6e4)}m ago`;
+  if (ms < 864e5) return `${Math.floor(ms / 36e5)}h ago`;
+  return `${Math.floor(ms / 864e5)}d ago`;
+}
+function formatDuration(ms) {
+  if (ms == null) return "\u2014";
+  if (ms < 1e3) return `${ms}ms`;
+  if (ms < 6e4) return `${(ms / 1e3).toFixed(2)}s`;
+  return `${(ms / 6e4).toFixed(1)}m`;
+}
+function liveDuration(run) {
+  if (!run.startedAt) return null;
+  const start = Date.parse(run.startedAt);
+  if (Number.isNaN(start)) return null;
+  const end = run.finishedAt ? Date.parse(run.finishedAt) : now.value;
+  return end - start;
+}
+const columns = computed(() => [
+  { key: "status", label: "Status", width: "100px", sortable: true, sortGetter: (r) => r.status },
+  ...props.showWorkflow ? [{ key: "workflow", label: "Workflow", sortable: true, sortGetter: (r) => r.workflowName.toLowerCase(), searchGetter: (r) => r.workflowName }] : [],
+  // Fixed floor wide enough for a full UUID, flexible above it — header and
+  // body rows are separate grids, so a content-sized track (max-content)
+  // would misalign them. The flex share also lets the table fill the width.
+  { key: "id", label: "ID", width: "minmax(280px,1fr)", searchGetter: (r) => `${r.temporalRunId ?? ""} ${r.id}` },
+  { key: "trigger", label: "Trigger", width: "120px", sortable: true, sortGetter: (r) => r.triggerType },
+  { key: "started", label: "Started", width: "120px", sortable: true, sortGetter: (r) => r.startedAt },
+  { key: "duration", label: "Duration", width: "100px", sortable: true, sortGetter: (r) => r.durationMs ?? -1 },
+  { key: "actions", label: "", width: "52px" }
+]);
+</script>
+
+<template>
+  <DataTable
+    :data="runs"
+    :columns="columns"
+    :row-key="(r) => r.id"
+    :default-sort="{ column: 'started', direction: 'desc' }"
+    :search="{ placeholder: 'Search runs\u2026' }"
+    :filter="true"
+    :loading="loading"
+    :pagination="pagination"
+    :empty-text="emptyText"
+    @row-click="(r) => openRun(r)"
+  >
+    <template #cell-status="{ row: run }">
+      <Badge variant="outline" :class="['border text-xs font-medium uppercase', statusClass(run.status)]">
+        {{ run.status }}
+      </Badge>
+    </template>
+
+    <template #cell-workflow="{ row: run }">
+      <div class="font-medium text-sm truncate">{{ run.workflowName }}</div>
+    </template>
+
+    <template #cell-id="{ row: run }">
+      <span v-if="run.temporalRunId" class="font-mono text-xs whitespace-nowrap">{{ run.temporalRunId }}</span>
+      <span v-else class="text-xs text-muted-foreground">—</span>
+    </template>
+
+    <template #cell-trigger="{ row: run }">
+      <span class="inline-flex items-center whitespace-nowrap rounded-md border border-black/[0.06] bg-muted/50 px-1.5 py-0.5 text-xs font-medium uppercase text-muted-foreground">
+        {{ run.triggerType }}
+      </span>
+    </template>
+
+    <template #cell-started="{ row: run }">
+      <span class="text-sm text-muted-foreground tabular-nums">{{ formatRelative(run.startedAt) }}</span>
+    </template>
+
+    <template #cell-duration="{ row: run }">
+      <span class="text-sm tabular-nums">{{ formatDuration(liveDuration(run)) }}</span>
+    </template>
+
+    <template #cell-actions="{ row: run }">
+      <div class="flex justify-end">
+        <IntegrationsRunActionsMenu :run="run" @changed="emit('changed')" />
+      </div>
+    </template>
+  </DataTable>
+</template>

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

@@ -0,0 +1,21 @@
+import type { WorkflowRun } from '../../types/integrations.js';
+type __VLS_Props = {
+    runs: WorkflowRun[];
+    loading?: boolean;
+    emptyText?: string;
+    /** false when the owning list pages server-side (workflow Runs tab). */
+    pagination?: boolean;
+    /** false inside a workflow — the context makes the column redundant. */
+    showWorkflow?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    changed: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChanged?: (() => any) | undefined;
+}>, {
+    loading: boolean;
+    emptyText: string;
+    pagination: boolean;
+    showWorkflow: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,11 @@
+type __VLS_PublicProps = {
+    'open'?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    created: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onCreated?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,91 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { RefreshCircle as Loader2 } from "#solar-icons";
+import { Badge, Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@revenexx/studio";
+import { useIntegrationsCredentials } from "../../composables/useIntegrationsCredentials";
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const emit = defineEmits(["created"]);
+const sftp = useConsoleSftp();
+const { create } = useIntegrationsCredentials();
+const busyId = ref(null);
+const error = ref(null);
+watch(open, (o) => {
+  if (o) {
+    error.value = null;
+    void sftp.load();
+  }
+});
+const activeAccounts = computed(() => sftp.accounts.value.filter((a) => a.status === "active" && a.login_username));
+async function importAccount(account) {
+  const tenant = sftp.activeTenantSlug.value;
+  if (!tenant || !account.login_username) return;
+  busyId.value = account.id;
+  error.value = null;
+  try {
+    const creds = await sftp.revealPassword(tenant, account.id);
+    if (!creds?.password) {
+      error.value = "Could not read the account password.";
+      return;
+    }
+    const created = await create({
+      credential_type_slug: "revenexx:sftp",
+      name: `Platform SFTP \xB7 ${account.login_username}`,
+      config: {
+        host: creds.server ?? account.server ?? "",
+        port: 22,
+        username: creds.username ?? account.login_username,
+        password: creds.password
+      }
+    });
+    emit("created", created.id);
+    open.value = false;
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : "Import failed.";
+  } finally {
+    busyId.value = null;
+  }
+}
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogContent class="sm:max-w-md">
+      <DialogHeader>
+        <DialogTitle>Import platform SFTP account</DialogTitle>
+        <DialogDescription class="text-sm">
+          Creates an SFTP credential from a managed platform account — host, username and password are copied once. Later password changes must be re-imported.
+        </DialogDescription>
+      </DialogHeader>
+
+      <div v-if="sftp.loading.value && !activeAccounts.length" class="space-y-2">
+        <div v-for="n in 3" :key="`sk-${n}`" class="h-9 rounded-md bg-black/[0.07] animate-pulse" />
+      </div>
+      <p v-else-if="!activeAccounts.length" class="py-4 text-center text-sm text-muted-foreground">
+        No active platform SFTP accounts. Create one under Integration Studio → SFTP first.
+      </p>
+      <div v-else class="max-h-72 space-y-1 overflow-y-auto">
+        <button
+          v-for="account in activeAccounts"
+          :key="account.id"
+          type="button"
+          class="flex w-full items-center gap-2 rounded-md border border-black/[0.06] bg-white px-2.5 py-2 text-left transition hover:border-black/20"
+          :disabled="busyId !== null"
+          @click="importAccount(account)"
+        >
+          <span class="min-w-0 flex-1">
+            <span class="block truncate font-mono text-sm">{{ account.login_username }}</span>
+            <span class="block truncate text-xs text-muted-foreground">{{ account.home_directory ?? account.server ?? "" }}</span>
+          </span>
+          <Badge variant="outline" class="text-xs font-medium uppercase shrink-0">Active</Badge>
+          <Loader2 v-if="busyId === account.id" :size="14" class="shrink-0 animate-spin text-muted-foreground" />
+        </button>
+      </div>
+
+      <p v-if="error" class="text-sm text-rose-600">{{ error }}</p>
+
+      <div class="flex justify-end">
+        <Button variant="outline" size="sm" class="h-8 text-sm" @click="open = false">Close</Button>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>

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

@@ -0,0 +1,11 @@
+type __VLS_PublicProps = {
+    'open'?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    created: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onCreated?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,5 +1,6 @@
 <script setup>
 import { Pulse as Activity, ClockCircle as Clock, Home, Key as KeyRound, ShieldCheck, ShieldKeyhole as Credentials, Programming as Workflow } from "#solar-icons";
+import SidebarNav from "@revenexx/studio-shared/components/Shared/SidebarNav.vue";
 const { workflows } = useIntegrationsWorkflows();
 const { runningCount } = useIntegrationsRuns();
 const { activeCount: schedulesActive } = useIntegrationsSchedules();