@revenexx/studio-integrations 1.2.0 → 1.3.0

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

@@ -0,0 +1,21 @@
+import type { WorkflowNode } from '../../types/integrations.js';
+type __VLS_Props = {
+    node: WorkflowNode | null;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    'open'?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    move: (payload: {
+        version: string;
+        config: Record<string, unknown>;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onMove?: ((payload: {
+        version: string;
+        config: Record<string, unknown>;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,133 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  Button
+} from "@revenexx/studio";
+import { executableVersionsOf, findManifest, newestExecutableVersion } from "../../data/integrationNodeCatalog";
+import { planVersionMove } from "../../data/nodeVersionMove";
+import { resolveLocalized } from "../../utils/localize";
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const props = defineProps({
+  node: { type: [Object, null], required: true }
+});
+const emit = defineEmits(["move"]);
+const t = useIntegrationsT();
+const versions = computed(() => props.node ? executableVersionsOf(props.node.nodeSlug) : []);
+const target = ref("");
+watch(open, (isOpen) => {
+  if (!isOpen || !props.node) return;
+  const newest = newestExecutableVersion(props.node.nodeSlug);
+  target.value = newest && newest !== props.node.nodeVersion ? newest : props.node.nodeVersion;
+});
+const plan = computed(() => {
+  const n = props.node;
+  if (!n) return null;
+  return planVersionMove(
+    findManifestExact(n.nodeSlug, n.nodeVersion),
+    findManifestExact(n.nodeSlug, target.value),
+    n.config
+  );
+});
+function findManifestExact(slug, version) {
+  const m = findManifest(slug, version);
+  return m && m.version === version ? m : null;
+}
+const unchanged = computed(() => !props.node || target.value === props.node.nodeVersion);
+function labelOf(entry) {
+  return resolveLocalized(entry.field?.label) || entry.key;
+}
+function confirm() {
+  const p = plan.value;
+  if (!props.node || !p || unchanged.value) return;
+  emit("move", { version: target.value, config: p.nextConfig });
+  open.value = false;
+}
+</script>
+
+<template>
+  <AlertDialog :open="open" @update:open="(v) => {
+  if (!v) open = false;
+}">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>{{ t("integration.nodeInspector.version.move.title") }}</AlertDialogTitle>
+        <AlertDialogDescription>
+          {{ t("integration.nodeInspector.version.move.description") }}
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+
+      <div v-if="props.node && plan" class="space-y-3 text-sm">
+        <div class="flex items-center gap-2">
+          <span class="tabular-nums text-muted-foreground">v{{ props.node.nodeVersion }}</span>
+          <span aria-hidden="true">→</span>
+          <select
+            v-model="target"
+            class="rounded border border-black/10 bg-white px-1.5 py-0.5 tabular-nums"
+            :aria-label="t('integration.nodeInspector.version.move.targetAria')"
+          >
+            <option v-for="m in versions" :key="m.version" :value="m.version">
+              v{{ m.version }}
+            </option>
+          </select>
+        </div>
+
+        <!-- A version the catalogue no longer carries cannot be compared against,
+             so the lists below are what arrives rather than what was checked. Said
+             once, here, instead of marking every setting as suspect. -->
+        <p v-if="!plan.comparable" class="text-amber-600">
+          {{ t("integration.nodeInspector.version.move.notComparable", { version: props.node.nodeVersion }) }}
+        </p>
+
+        <p v-if="unchanged" class="text-muted-foreground">
+          {{ t("integration.nodeInspector.version.move.same") }}
+        </p>
+
+        <template v-else>
+          <p v-if="plan.lossless" class="text-muted-foreground">
+            {{ t("integration.nodeInspector.version.move.lossless") }}
+          </p>
+
+          <div v-if="plan.dropped.length">
+            <p class="font-medium">{{ t("integration.nodeInspector.version.move.dropped") }}</p>
+            <ul class="mt-0.5 list-disc pl-5 text-muted-foreground">
+              <li v-for="e in plan.dropped" :key="e.key">
+                {{ labelOf(e) }}
+                <!-- The key, where it is not already the whole label. A setting no
+                     version declares any more has nothing but its key to go by, and
+                     printing that twice reads as a bug rather than as precision. -->
+                <span v-if="labelOf(e) !== e.key" class="text-xs">({{ e.key }})</span>
+              </li>
+            </ul>
+          </div>
+
+          <div v-if="plan.review.length">
+            <p class="font-medium">{{ t("integration.nodeInspector.version.move.review") }}</p>
+            <ul class="mt-0.5 list-disc pl-5 text-muted-foreground">
+              <li v-for="e in plan.review" :key="e.key">
+                {{ labelOf(e) }}
+                <span class="text-xs">
+                  ({{ e.reason === "nowRequired" ? t("integration.nodeInspector.version.move.reason.nowRequired") : t("integration.nodeInspector.version.move.reason.changed") }})
+                </span>
+              </li>
+            </ul>
+          </div>
+        </template>
+      </div>
+
+      <AlertDialogFooter>
+        <Button variant="outline" @click="open = false">
+          {{ t("integration.common.action.cancel") }}
+        </Button>
+        <Button :disabled="unchanged" @click="confirm">
+          {{ t("integration.nodeInspector.version.move.confirm") }}
+        </Button>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>

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

@@ -0,0 +1,21 @@
+import type { WorkflowNode } from '../../types/integrations.js';
+type __VLS_Props = {
+    node: WorkflowNode | null;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    'open'?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    move: (payload: {
+        version: string;
+        config: Record<string, unknown>;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onMove?: ((payload: {
+        version: string;
+        config: Record<string, unknown>;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

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

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

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

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

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

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

@@ -28,7 +28,7 @@ import {
   DropdownMenuTrigger,
   TooltipProvider
 } from "@revenexx/studio";
-import { Braces, EllipsisVertical, GripVertical, Group as GroupIcon, Hand, Map as MapIcon, Minus, MousePointer2, Plus, Settings2, StickyNote } from "lucide-vue-next";
+import { Braces, Database, EllipsisVertical, GripVertical, Group as GroupIcon, Hand, Map as MapIcon, Minus, MousePointer2, Plus, Settings2, StickyNote } from "lucide-vue-next";
 import "@vue-flow/core/dist/style.css";
 import "@vue-flow/core/dist/theme-default.css";
 import "@vue-flow/minimap/dist/style.css";
@@ -40,6 +40,7 @@ import WorkflowTriggerView from "./WorkflowTriggerView.vue";
 import StickyNoteView from "./StickyNoteView.vue";
 import GroupFrameView from "./GroupFrameView.vue";
 import WorkflowContextMenu, {} from "./WorkflowContextMenu.vue";
+import WorkflowStateNamespacesDialog from "./WorkflowStateNamespacesDialog.vue";
 import WorkflowVariablesDialog from "./WorkflowVariablesDialog.vue";
 import { useCanvasShortcuts } from "../../composables/useCanvasShortcuts";
 import { usePaletteLayout } from "../../composables/usePaletteLayout";
@@ -570,6 +571,18 @@ function updateSticky(id, patch) {
   push();
 }
 const variablesOpen = ref(false);
+const stateOpen = ref(false);
+const stateCount = computed(() => (blob.value.state ?? []).length);
+function updateStateNamespaces(next) {
+  blob.value.state = next.length ? next : void 0;
+  push();
+}
+function declareStateNamespace(namespace, role, visibility) {
+  const declared = blob.value.state ?? [];
+  if (declared.some((n) => n.namespace === namespace)) return;
+  blob.value.state = [...declared, { namespace, role, visibility }];
+  push();
+}
 const variableCount = computed(() => Object.keys(blob.value.variables ?? {}).length);
 function updateVariables(next) {
   blob.value.variables = Object.keys(next).length ? next : void 0;
@@ -1290,7 +1303,7 @@ function onConfigOpenAutoFocus(event) {
   event.preventDefault();
   event.target?.focus();
 }
-const canvasHasKeyboard = computed(() => !lightboxOpen.value && !variablesOpen.value && !props.overlayOpen);
+const canvasHasKeyboard = computed(() => !lightboxOpen.value && !variablesOpen.value && !stateOpen.value && !props.overlayOpen);
 const singleSelected = computed(() => flow.getSelectedNodes.value.length === 1 ? flow.getSelectedNodes.value[0] : null);
 useCanvasShortcuts(() => ({
   "enter": {
@@ -1335,6 +1348,9 @@ useCanvasShortcuts(() => ({
   "shift+v": () => {
     variablesOpen.value = true;
   },
+  "shift+t": () => {
+    stateOpen.value = true;
+  },
   "shift+alt+s": () => emit("openSettings"),
   "-": () => {
     void flow.zoomOut({ duration: 150 });
@@ -1739,6 +1755,17 @@ const edgeTypes = {
               <span v-if="variableCount" class="rounded-lg bg-muted px-1.5 text-xs tabular-nums text-muted-foreground">{{ variableCount }}</span>
             </button>
           </IntegrationsEditorTip>
+          <IntegrationsEditorTip :label="t('integration.editor.tool.state.tooltip')" shortcut="shift+t">
+            <button
+              type="button"
+              class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
+              @click="stateOpen = true"
+            >
+              <Database :size="13" />
+              {{ t("integration.editor.tool.state.label") }}
+              <span v-if="stateCount" class="rounded-lg bg-muted px-1.5 text-xs tabular-nums text-muted-foreground">{{ stateCount }}</span>
+            </button>
+          </IntegrationsEditorTip>
           <IntegrationsEditorTip :label="t('integration.editor.tool.settings.tooltip')" shortcut="shift+alt+s">
             <button
               type="button"
@@ -1838,6 +1865,14 @@ const edgeTypes = {
       </div>
     </div>
 
+    <!-- State namespaces lightbox (control-pane entry) — what this workflow may
+         remember between runs. -->
+    <WorkflowStateNamespacesDialog
+      v-model:open="stateOpen"
+      :state="blob.state ?? []"
+      @update:state="updateStateNamespaces"
+    />
+
     <!-- Workflow variables lightbox (control-pane entry). -->
     <WorkflowVariablesDialog
       v-model:open="variablesOpen"
@@ -1876,6 +1911,7 @@ const edgeTypes = {
           :selection="selection"
           :secret-keys="secretKeys"
           :variables="blob.variables"
+          :state-namespaces="blob.state ?? []"
           :upstream-outputs="selectedUpstreamOutputs"
           :autofocus-name="renameIntent"
           :nodes="blob.nodes"
@@ -1891,6 +1927,7 @@ const edgeTypes = {
   selectedId = id;
   renameIntent = false;
 }"
+          @declare-state="declareStateNamespace"
         />
       </DialogContent>
     </Dialog>

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

@@ -0,0 +1,13 @@
+import type { WorkflowStateNamespace } from '../../types/integrations.js';
+type __VLS_Props = {
+    open: boolean;
+    state: WorkflowStateNamespace[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    "update:state": (next: WorkflowStateNamespace[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    "onUpdate:state"?: ((next: WorkflowStateNamespace[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,216 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { AddCircle as Plus, TrashBinMinimalistic as TrashBin } from "#solar-icons";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@revenexx/studio";
+import { deepClone } from "../../utils/deepClone";
+import { stateNamespaceErrorKey } from "../../utils/stateNamespaceName";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  state: { type: Array, required: true }
+});
+const emit = defineEmits(["update:open", "update:state"]);
+const t = useIntegrationsT();
+const ROLES = ["mapping", "cursor", "dedupe", "digest"];
+const working = ref([]);
+watch(() => props.open, (isOpen) => {
+  if (!isOpen) return;
+  working.value = deepClone(props.state ?? []);
+  newName.value = "";
+  newRole.value = "mapping";
+  newVisibility.value = "private";
+});
+const changed = computed(() => JSON.stringify(working.value) !== JSON.stringify(props.state ?? []));
+function applyAndClose() {
+  if (changed.value) emit("update:state", working.value);
+  emit("update:open", false);
+}
+function setVisibility(index, visibility) {
+  const next = [...working.value];
+  const row = next[index];
+  if (!row) return;
+  next[index] = { ...row, visibility };
+  working.value = next;
+}
+function removeNamespace(index) {
+  working.value = working.value.filter((_, i) => i !== index);
+}
+const newName = ref("");
+const newRole = ref("mapping");
+const newVisibility = ref("private");
+const newNameError = computed(() => {
+  const key = stateNamespaceErrorKey(newName.value, working.value.map((n) => n.namespace));
+  return key ? t(key) : null;
+});
+function addNamespace() {
+  const namespace = newName.value.trim();
+  if (!namespace || newNameError.value) return;
+  working.value = [...working.value, { namespace, role: newRole.value, visibility: newVisibility.value }];
+  newName.value = "";
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
+    <DialogContent class="max-w-[94vw] sm:max-w-3xl">
+      <DialogHeader>
+        <DialogTitle>{{ t("integration.workflows.state.dialog.title") }}</DialogTitle>
+        <DialogDescription class="text-sm">
+          {{ t("integration.workflows.state.dialog.description") }}
+        </DialogDescription>
+      </DialogHeader>
+
+      <div class="max-h-[62vh] space-y-3 overflow-y-auto pr-1">
+        <p v-if="!working.length" class="rounded-lg border border-dashed border-black/[0.12] px-4 py-6 text-center text-sm text-muted-foreground">
+          {{ t("integration.workflows.state.empty") }}
+        </p>
+
+        <div
+          v-for="(row, index) in working"
+          :key="row.namespace"
+          role="group"
+          :aria-label="t('integration.workflows.state.row.aria', { namespace: row.namespace })"
+          class="rounded-lg border border-black/[0.06] bg-white p-3"
+        >
+          <div class="flex items-center gap-2">
+            <code class="min-w-0 truncate font-mono text-sm font-semibold">{{ row.namespace }}</code>
+            <!-- The role is stated, not offered: entries written under one
+                 meaning cannot be re-read under another (specs AC-3). -->
+            <span class="shrink-0 rounded-lg bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
+              {{ t(`integration.workflows.state.role.${row.role}.label`) }}
+            </span>
+            <div class="flex-1" />
+            <button
+              type="button"
+              class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
+              :title="t('integration.workflows.state.action.remove')"
+              @click="removeNamespace(index)"
+            >
+              <TrashBin :size="13" />
+            </button>
+          </div>
+
+          <p class="mt-1 text-xs text-muted-foreground">
+            {{ t(`integration.workflows.state.role.${row.role}.hint`) }}
+            {{ t("integration.workflows.state.role.fixed") }}
+          </p>
+
+          <div class="mt-2 grid gap-2 sm:grid-cols-[10rem_1fr]">
+            <div class="space-y-1">
+              <Label :for="`state-${row.namespace}-visibility`" class="text-mono text-muted-foreground">
+                {{ t("integration.workflows.state.field.visibility.label") }}
+              </Label>
+              <Select
+                :model-value="row.visibility ?? 'private'"
+                @update:model-value="(v) => setVisibility(index, String(v))"
+              >
+                <SelectTrigger
+                  :id="`state-${row.namespace}-visibility`"
+                  :aria-label="t('integration.workflows.state.field.visibility.label')"
+                  class="h-8 bg-white text-sm"
+                >
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="private">
+                    {{ t("integration.workflows.state.visibility.private.label") }}
+                  </SelectItem>
+                  <SelectItem value="shared">
+                    {{ t("integration.workflows.state.visibility.shared.label") }}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <!-- What the choice costs, beside the choice — a shared namespace is
+                 written by every workflow in the tenant and outlives this one
+                 (specs AC-4). -->
+            <p class="self-end pb-1 text-xs text-muted-foreground">
+              {{ t(`integration.workflows.state.visibility.${row.visibility ?? "private"}.hint`) }}
+            </p>
+          </div>
+
+          <p class="mt-2 text-xs text-muted-foreground">
+            {{ t("integration.workflows.state.action.remove.hint") }}
+          </p>
+        </div>
+
+        <div class="rounded-lg border border-black/[0.06] bg-muted/30 p-3">
+          <Label for="state-new-name" class="text-mono text-muted-foreground">
+            {{ t("integration.workflows.state.field.newName.label") }}
+          </Label>
+          <div class="mt-1 grid gap-2 sm:grid-cols-[1fr_10rem_10rem_auto]">
+            <Input
+              id="state-new-name"
+              v-model="newName"
+              class="h-8 bg-white font-mono text-sm"
+              :placeholder="t('integration.workflows.state.field.newName.placeholder')"
+              @keydown.enter.prevent="addNamespace"
+            />
+            <!-- The role IS chosen here, and only here — the positive half of
+                 AC-3, without which "no role control on a row" proves nothing. -->
+            <Select v-model="newRole">
+              <SelectTrigger
+                id="state-new-role"
+                :aria-label="t('integration.workflows.state.field.newRole.label')"
+                class="h-8 bg-white text-sm"
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem v-for="role in ROLES" :key="role" :value="role">
+                  {{ t(`integration.workflows.state.role.${role}.label`) }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <Select v-model="newVisibility">
+              <SelectTrigger
+                id="state-new-visibility"
+                :aria-label="t('integration.workflows.state.field.newVisibility.label')"
+                class="h-8 bg-white text-sm"
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="private">
+                  {{ t("integration.workflows.state.visibility.private.label") }}
+                </SelectItem>
+                <SelectItem value="shared">
+                  {{ t("integration.workflows.state.visibility.shared.label") }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <Button size="sm" class="h-8" :disabled="!newName.trim() || !!newNameError" @click="addNamespace">
+              <Plus :size="14" class="mr-1" />
+              {{ t("integration.workflows.state.action.add") }}
+            </Button>
+          </div>
+          <p v-if="newNameError" class="mt-1 text-xs text-rose-600">{{ newNameError }}</p>
+          <p class="mt-1 text-xs text-muted-foreground">{{ t(`integration.workflows.state.role.${newRole}.hint`) }}</p>
+        </div>
+      </div>
+
+      <DialogFooter>
+        <Button variant="outline" size="sm" class="h-8" @click="emit('update:open', false)">
+          {{ t("integration.common.action.cancel") }}
+        </Button>
+        <Button size="sm" class="h-8" @click="applyAndClose">
+          {{ t("integration.workflows.state.action.done") }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

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

@@ -0,0 +1,13 @@
+import type { WorkflowStateNamespace } from '../../types/integrations.js';
+type __VLS_Props = {
+    open: boolean;
+    state: WorkflowStateNamespace[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    "update:state": (next: WorkflowStateNamespace[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    "onUpdate:state"?: ((next: WorkflowStateNamespace[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;