@revenexx/studio-integrations 3.7.1 → 3.8.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @revenexx/studio-integrations
 
+## 3.8.1
+
+### Patch Changes
+
+- f5c169c: The insert and delete buttons on a connection, and the corners a sticky note and a group frame are resized by, are now at least 24 pixels on screen at every zoom level. They used to shrink with the canvas: a workflow of eighteen steps opens at 58 %, and there they measured 14, 11.6 and 9.3 pixels. The connection's buttons now keep their size on screen, as the node's toolbar already did. The resize corners look the same as before, and the area that reacts to the pointer reaches outward past the note or frame, so a bigger target covers none of the content. The pencil and the note badge on a node card are not changed here.
+
+## 3.8.0
+
+### Minor Changes
+
+- 0933441: A trigger kind is named in the reader's language wherever the studio shows one — "Zeitplan", "Manuell" in German, "Schedule", "Manual" in English. The workflows list, the trigger card on the canvas, the template miniature and the origin of a missed run used to print the platform's own word ("schedule", "Trigger · manual") in every language. The workflows list's Mode column and its filter now use the same word as the workflow's header: "Async", "Sync" and "Caller decides" in English, "Asynchron", "Synchron" and "Aufrufer entscheidet" in German, where the list used to show "async", "sync" and "caller" (in German "Aufrufer"). The filter's option names change with it, which is why this is a minor. The list sorts both columns by the word it shows. The three `integration.workflows.table.mode.*` message keys are gone; the list reads `integration.editor.executionMode.*`.
+
+### Patch Changes
+
+- 78b99ec: A setting whose options the platform resolves is no longer held back by a setting it depends on that the node does not require. That setting is sent with the question when it is filled in, and left out when it is empty — so SOAP Request's operation list reads a WSDL behind a login with the chosen credential, and a public WSDL still without one. A setting the node requires still holds the list back and says so.
+- b3001f3: When the browser refuses to open the window for connecting a credential at the provider — a pop-up blocker, a hardened profile — the studio now says so and says what to do: "The browser blocked the window for signing in at the provider. Allow pop-ups for this site, then try again." Before, Connect and Reconnect did nothing visible in the credentials list, a credential's detail view, and the New-credential dialog straight after saving. The New-credential dialog now also reports an authorisation address the service could not hand back, which it used to drop silently. New message key `integration.credentials.error.popupBlocked`.
+- a3bbf46: The badges beside Workflows, Runs, Schedules, Credentials and Secrets in the navigation now show the tenant's counts — the same figure on every page — instead of the length of whatever the last page loaded. They are read from the Integrations service's new `GET /v1/summary`, which a host's own sidebar can read too through `useIntegrationsSummary()`.
+- 8e21845: Typing into a setting whose options come from the platform now narrows its list or says that nothing matches, instead of showing every option again, and puts the option whose code or name starts with what was typed first. While the answer to a typed term is awaited the options stay where they are and cannot be chosen, and the field shows that it is asking, so a click no longer lands on the option below the one aimed at.
+- 9e773ec: A workflow opens, and *Fit* and *Tidy up* fit it, into the part of the canvas that *Add node*, the Map and the control pane leave free, wherever each is docked or floated, so no step lands under a panel where it cannot be clicked; a panel collapsed to its pill takes no room (PO-660). The view a workflow opens on used to avoid only the control pane.
+- 5861e33: A run started from the editor that fails now says so in the run dialog: instead of a green "Run started" confirmation and "The run returned nothing", it shows that the run failed, the step it failed at (named as on the canvas) and the cause, with "View run" for the details. This holds for both the waiting and the immediate mode.
+
 ## 3.7.1
 
 ### Patch Changes

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@revenexx/studio-integrations",
   "configKey": "studioIntegrations",
-  "version": "3.7.1",
+  "version": "3.8.1",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

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

@@ -137,7 +137,9 @@ async function submit() {
     await load(true);
     toast.success(t("integration.credentials.toast.created"));
     if (isOAuthAuthcode(pickedType.value)) {
-      void connect(created.id);
+      connect(created.id).catch((e) => {
+        toast.error(errorReason(e, t("integration.credentials.error.oauthConnect")));
+      });
     }
     emit("created", created.id);
     emit("update:open", false);

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

@@ -7,6 +7,7 @@ import LoadingAnnouncement from "./LoadingAnnouncement.vue";
 import { deadLetterStatusClass, deadLetterStatusLabel } from "../../utils/statusStyle";
 import { errorReason } from "../../utils/apiError";
 import { formatDateTime } from "../../utils/formatDateTime";
+import { triggerTypeLabel } from "../../data/integrationNodeCatalog";
 const props = defineProps({
   workflowId: { type: Number, required: true }
 });
@@ -122,7 +123,7 @@ async function onDiscard(dl) {
           <div class="text-sm break-words">{{ dl.reason || t("integration.deadLetters.reason.fallback") }}</div>
           <div class="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground font-mono">
             <span>#{{ dl.id }}</span>
-            <span v-if="dl.source">{{ dl.source }}</span>
+            <span v-if="dl.source">{{ triggerTypeLabel(dl.source) }}</span>
             <span v-if="dl.trigger_handle">↳ {{ dl.trigger_handle }}</span>
             <span>{{ formatDateTime(dl.created_at) }}</span>
           </div>

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

@@ -6,6 +6,7 @@ import { ChevronsDownUp, ChevronsUpDown, Ungroup } from "lucide-vue-next";
 import { TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import { inputHandleId, outputHandleId } from "../../data/handleId";
 import { resolveDisplayName } from "../../utils/localize";
+import { useCanvasTarget } from "../../composables/useCanvasTarget";
 const props = defineProps({
   id: { type: String, required: true },
   data: { type: Object, required: true },
@@ -65,6 +66,8 @@ const resizing = ref(false);
 const liveW = ref(0);
 const liveH = ref(0);
 let resizeStart = { x: 0, y: 0, w: 0, h: 0 };
+const RESIZE_CORNER = 20;
+const resizeTarget = useCanvasTarget(RESIZE_CORNER);
 const frameW = computed(() => resizing.value ? liveW.value : props.data.rect.width);
 const frameH = computed(() => resizing.value ? liveH.value : props.data.rect.height);
 function onResizeStart(e) {
@@ -215,18 +218,26 @@ function onResizeEnd() {
       <!-- Bottom-right resize handle (editable frames only). -->
       <div
         v-if="editable"
-        class="nodrag pointer-events-auto absolute bottom-0 right-0 flex size-5 cursor-se-resize items-end justify-end p-1"
-        :style="{ color: color.chip }"
+        class="nodrag pointer-events-auto absolute cursor-se-resize"
+        :style="{
+  color: color.chip,
+  width: `${resizeTarget}px`,
+  height: `${resizeTarget}px`,
+  right: `${RESIZE_CORNER - resizeTarget}px`,
+  bottom: `${RESIZE_CORNER - resizeTarget}px`
+}"
         :title="t('integration.canvas.group.action.resize')"
         @pointerdown="onResizeStart"
         @pointermove="onResizeMove"
         @pointerup="onResizeEnd"
         @pointercancel="onResizeEnd"
       >
-        <svg viewBox="0 0 8 8" class="size-2.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round">
-          <path d="M7 1 1 7" />
-          <path d="M7 4.5 4.5 7" />
-        </svg>
+        <div class="flex size-5 items-end justify-end p-1">
+          <svg viewBox="0 0 8 8" class="size-2.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round">
+            <path d="M7 1 1 7" />
+            <path d="M7 4.5 4.5 7" />
+          </svg>
+        </div>
       </div>
     </div>
   </div>

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

@@ -1,9 +1,11 @@
 <script setup>
 import { computed, nextTick, ref, watch } from "vue";
 import { isVersionExecutable } from "../../data/integrationNodeCatalog";
-import { ChevronDown } from "lucide-vue-next";
+import { ChevronDown, LoaderCircle } from "lucide-vue-next";
 import { Input } from "@revenexx/studio";
+import { optionalDependencies } from "../../composables/useNodeConfigResolve";
 import { resolveLocalized } from "../../utils/localize";
+import { narrowOptions } from "../../utils/optionSearch";
 const props = defineProps({
   slug: { type: String, required: true },
   version: { type: String, required: true },
@@ -23,6 +25,7 @@ const q = useNodeConfigResolve({
   target: () => props.field.key,
   config: () => props.config,
   dependsOn: () => props.field.dependsOn,
+  optional: () => optionalDependencies(props.field.dependsOn, props.siblingFields),
   search: () => focused.value ? search.value : ""
 });
 const unsatisfiedLabels = computed(() => q.unsatisfied.value.map((key) => {
@@ -72,13 +75,10 @@ function onComboClick() {
   listDismissed.value = false;
 }
 const visibleOptions = computed(() => {
-  const term = search.value.trim().toLowerCase();
-  if (!focused.value || !term) return options.value;
-  const hits = options.value.filter(
-    (o) => (resolveLocalized(o.label) || "").toLowerCase().includes(term) || String(o.value).toLowerCase().includes(term)
-  );
-  return hits.length ? hits : options.value;
+  if (!focused.value) return options.value;
+  return narrowOptions(options.value, search.value, (o) => resolveLocalized(o.label) || "", (o) => String(o.value));
 });
+const answerPending = computed(() => listOpen.value && q.isPending.value);
 function onComboFocus() {
   search.value = "";
   listDismissed.value = false;
@@ -88,6 +88,7 @@ function onComboBlur() {
   focused.value = false;
 }
 function pick(value) {
+  if (answerPending.value) return;
   emit("update:modelValue", value);
   search.value = "";
   focused.value = false;
@@ -126,8 +127,10 @@ function toggleMulti(optValue) {
       <p class="mt-1 text-sm text-amber-600">{{ t("integration.nodeConfig.dynamicField.gated", { keys: unsatisfiedLabels.join(", ") }) }}</p>
     </template>
 
-    <!-- first load: no data yet -->
-    <template v-else-if="q.isFetching.value && options.length === 0">
+    <!-- first load: no answer yet. Not "no options": a search that found nothing
+         empties the list too, and swapping the field out then would take the focus
+         from an operator correcting their term (AC-13) -->
+    <template v-else-if="q.isFetching.value && !q.hasData.value">
       <div :class="disabledControlClass">{{ t("integration.nodeConfig.dynamicField.resolving") }}</div>
     </template>
 
@@ -198,26 +201,43 @@ function toggleMulti(optValue) {
           @keydown.down="onComboArrowDown"
           @blur="onComboBlur"
         />
-        <ChevronDown :size="14" class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+        <!-- waiting is shown in the field, not as a row of the list: a row that
+             comes and goes moves every option under the pointer (AC-14) -->
+        <LoaderCircle
+          v-if="answerPending"
+          :size="14"
+          role="status"
+          :aria-label="search ? t('integration.nodeConfig.dynamicField.searching') : t('integration.nodeConfig.dynamicField.resolving')"
+          class="absolute right-2 top-1/2 -translate-y-1/2 animate-spin text-muted-foreground"
+        />
+        <ChevronDown v-else :size="14" class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
         <div
           v-if="listOpen"
+          :aria-busy="answerPending"
           class="absolute left-0 right-0 top-full z-30 mt-1 max-h-56 overflow-y-auto rounded-md border border-black/[0.08] bg-white py-1 shadow-md"
         >
-          <div v-if="q.isFetching.value" class="px-2.5 py-1.5 text-sm text-muted-foreground">
-            {{ search ? t("integration.nodeConfig.dynamicField.searching") : t("integration.nodeConfig.dynamicField.resolving") }}
-          </div>
           <button
             v-for="opt in visibleOptions"
             :key="String(opt.value)"
             type="button"
-            class="flex w-full items-center px-2.5 py-1.5 text-left text-sm hover:bg-muted/50"
-            :class="String(opt.value) === currentValue ? 'bg-emerald-500/10 text-emerald-800' : ''"
+            :aria-disabled="answerPending || void 0"
+            class="flex w-full items-center px-2.5 py-1.5 text-left text-sm"
+            :class="[
+  String(opt.value) === currentValue ? 'bg-emerald-500/10 text-emerald-800' : '',
+  answerPending ? 'cursor-wait opacity-60' : 'hover:bg-muted/50'
+]"
             @mousedown.prevent="pick(String(opt.value))"
           >
             <span class="min-w-0 truncate">{{ resolveLocalized(opt.label) || String(opt.value) }}</span>
           </button>
-          <div v-if="!q.isFetching.value && visibleOptions.length === 0" class="px-2.5 py-1.5 text-sm text-muted-foreground">
-            {{ search ? t("integration.nodeConfig.dynamicField.noMatch", { query: search }) : t("integration.nodeConfig.dynamicField.empty") }}
+          <!-- with nothing to show, the one row says why: still asking, or nothing matches -->
+          <div v-if="visibleOptions.length === 0" class="px-2.5 py-1.5 text-sm text-muted-foreground">
+            <template v-if="answerPending">
+              {{ search ? t("integration.nodeConfig.dynamicField.searching") : t("integration.nodeConfig.dynamicField.resolving") }}
+            </template>
+            <template v-else>
+              {{ search.trim() ? t("integration.nodeConfig.dynamicField.noMatch", { query: search.trim() }) : t("integration.nodeConfig.dynamicField.empty") }}
+            </template>
           </div>
         </div>
       </div>

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

@@ -7,6 +7,8 @@ type __VLS_Props = {
     staticKeys: string[];
     secretKeys: string[];
     depth?: number;
+    /** The settings beside this one, so an optional `dependsOn` does not gate (IN-80). */
+    siblingFields?: ConfigField[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     set: (key: string, value: unknown) => any;

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

@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import { Button } from "@revenexx/studio";
 import { IntegrationsApiError } from "../../utils/apiError";
+import { optionalDependencies } from "../../composables/useNodeConfigResolve";
 import { resolveLocalized } from "../../utils/localize";
 import { applyingFields, staleKeys } from "../../utils/settingCondition";
 const props = defineProps({
@@ -11,7 +12,8 @@ const props = defineProps({
   config: { type: Object, required: true },
   staticKeys: { type: Array, required: true },
   secretKeys: { type: Array, required: true },
-  depth: { type: Number, required: false }
+  depth: { type: Number, required: false },
+  siblingFields: { type: Array, required: false }
 });
 const emit = defineEmits(["set"]);
 const t = useIntegrationsT();
@@ -22,7 +24,8 @@ const q = useNodeConfigResolve({
   version: () => props.version,
   target: () => "*",
   config: () => props.config,
-  dependsOn: () => props.field.dependsOn
+  dependsOn: () => props.field.dependsOn,
+  optional: () => optionalDependencies(props.field.dependsOn, props.siblingFields)
 });
 const resolvedFields = computed(() => q.data.value?.fields ?? []);
 const applyingResolvedFields = computed(() => applyingFields(resolvedFields.value, props.config));

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

@@ -7,6 +7,8 @@ type __VLS_Props = {
     staticKeys: string[];
     secretKeys: string[];
     depth?: number;
+    /** The settings beside this one, so an optional `dependsOn` does not gate (IN-80). */
+    siblingFields?: ConfigField[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     set: (key: string, value: unknown) => any;

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

@@ -594,6 +594,7 @@ function setArrayItemField(index, fieldKey, v) {
       :static-keys="staticKeys ?? []"
       :secret-keys="secretKeys"
       :depth="depth ?? 0"
+      :sibling-fields="siblingFields"
       @set="(k, v) => emit('set', k, v)"
     />
 

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

@@ -1,4 +1,5 @@
 import type { RunOutput } from '../../utils/runOutputs.js';
+import { type RunFailure } from '../../utils/runFailure.js';
 /**
  * Result surface for a manual run, sync and async alike.
  *
@@ -44,6 +45,11 @@ type __VLS_Props = {
      * which has the status code; `error` alone cannot tell the two apart.
      */
     refused?: boolean;
+    /**
+     * Why the run failed — the step, named as the canvas names it, and the cause —
+     * as far as the page has found out. Read only for a run that failed (PO-690).
+     */
+    failure?: RunFailure | null;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (args_0: boolean) => any;

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

@@ -12,6 +12,7 @@ import {
 import { formatDuration } from "../../utils/formatDuration";
 import { runStatusClass, runStatusLabel } from "../../utils/statusStyle";
 import { isTerminalRun } from "../../utils/runEnvelope";
+import { isFailedRun } from "../../utils/runFailure";
 const props = defineProps({
   open: { type: Boolean, required: true },
   loading: { type: Boolean, required: false },
@@ -22,7 +23,8 @@ const props = defineProps({
   following: { type: Boolean, required: false },
   error: { type: [String, null], required: false },
   runId: { type: [String, null], required: false },
-  refused: { type: Boolean, required: false }
+  refused: { type: Boolean, required: false },
+  failure: { type: [Object, null], required: false }
 });
 const emit = defineEmits(["update:open", "view-run"]);
 const t = useIntegrationsT();
@@ -40,6 +42,8 @@ const ended = computed(() => {
   if (props.mode !== "async") return true;
   return isTerminalRun(props.run);
 });
+const failed = computed(() => ended.value && isFailedRun(props.run));
+const cancelled = computed(() => ["cancelled", "canceled"].includes(status.value.toLowerCase()));
 const returnedNothing = computed(() => props.result == null || typeof props.result === "object" && !Array.isArray(props.result) && !Object.keys(props.result).length);
 const refused = computed(() => !props.loading && !!props.refused);
 const unconfirmed = computed(() => !props.loading && !refused.value && props.mode === "async" && !!props.error && !runNumber.value);
@@ -94,8 +98,16 @@ function pretty(value) {
           >
             {{ error }}
           </DialogDescription>
-          <div v-else class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-rose-700">
-            {{ error }}
+          <div v-else role="alert" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-rose-700">
+            <p>{{ error }}</p>
+            <!-- A waiting run the engine failed ships the run, so it exists and has
+                 a failed step and a reason like any other (PO-690). -->
+            <p v-if="runId && failure?.step" class="mt-1">
+              {{ t("integration.runs.response.failure.step", { step: failure.step }) }}
+            </p>
+            <p v-if="runId && failure?.cause" class="mt-1 whitespace-pre-wrap break-words">
+              {{ failure.cause }}
+            </p>
           </div>
           <div v-if="runId" class="mt-3 flex justify-end">
             <Button class="h-8 text-sm" @click="emit('view-run', runId)">
@@ -107,8 +119,25 @@ function pretty(value) {
         <template v-else>
           <!-- The confirmation an async press earns: the run exists and is named,
                whatever the studio manages to read back about it afterwards. -->
+          <!-- A run that failed says so in place of the confirmation, rather than
+               beside it: green "started" above red "failed" is two answers (PO-690). -->
+          <div
+            v-if="failed"
+            role="alert"
+            class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-rose-700"
+          >
+            <p class="font-medium">
+              {{ runNumber ? t("integration.runs.response.failure.runWithId", { id: runNumber }) : t("integration.runs.response.failure.run") }}
+            </p>
+            <p v-if="failure?.step" class="mt-1">
+              {{ t("integration.runs.response.failure.step", { step: failure.step }) }}
+            </p>
+            <p v-if="failure?.cause" class="mt-1 whitespace-pre-wrap break-words">
+              {{ failure.cause }}
+            </p>
+          </div>
           <div
-            v-if="mode === 'async'"
+            v-else-if="mode === 'async'"
             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" />
@@ -148,7 +177,9 @@ function pretty(value) {
           <!-- Nothing at all where the run has not ended: the studio has stopped
                looking, which is not the same as the run having finished, and the
                confirmation and the status line above already say where it stands. -->
-          <template v-else-if="ended">
+          <!-- A failed run has said why above; "returned nothing" under it would read
+               as the explanation, and a `null` result printed whole as the answer. -->
+          <template v-else-if="ended && !failed && !cancelled">
             <p v-if="returnedNothing" class="mt-3 py-3 text-muted-foreground">
               {{ t("integration.runs.response.nothingReturned") }}
             </p>

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

@@ -1,4 +1,5 @@
 import type { RunOutput } from '../../utils/runOutputs.js';
+import { type RunFailure } from '../../utils/runFailure.js';
 /**
  * Result surface for a manual run, sync and async alike.
  *
@@ -44,6 +45,11 @@ type __VLS_Props = {
      * which has the status code; `error` alone cannot tell the two apart.
      */
     refused?: boolean;
+    /**
+     * Why the run failed — the step, named as the canvas names it, and the cause —
+     * as far as the page has found out. Read only for a run that failed (PO-690).
+     */
+    failure?: RunFailure | null;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (args_0: boolean) => any;

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

@@ -1,12 +1,29 @@
 <script setup>
+import { computed, onMounted, watch } from "vue";
 import { Pulse as Activity, ClockCircle as Clock, Home, Key as KeyRound, Layers, ShieldCheck, ShieldKeyhole as Credentials, Programming as Workflow } from "#solar-icons";
 import SidebarNav from "@revenexx/studio-shared/components/Shared/SidebarNav.vue";
 const t = useIntegrationsT();
+const route = useRoute();
+const { summary, load: loadSummary } = useIntegrationsSummary();
+onMounted(loadSummary);
+watch(() => route.path, () => {
+  void loadSummary();
+});
 const { workflows } = useIntegrationsWorkflows();
 const { runningCount } = useIntegrationsRuns();
 const { activeCount: schedulesActive } = useIntegrationsSchedules();
 const { total: credentialsTotal } = useIntegrationsCredentials();
 const { total: secretsTotal } = useIntegrationsSecrets();
+const { tenant } = useIntegrationsApi();
+watch(
+  () => [tenant.value, workflows.value.length, runningCount.value, schedulesActive.value, credentialsTotal.value, secretsTotal.value],
+  () => {
+    void loadSummary();
+  }
+);
+function badge(count) {
+  return count || null;
+}
 const sections = computed(() => [
   {
     key: "pinned",
@@ -21,12 +38,12 @@ const sections = computed(() => [
     // translator will look for it rather than only in a review comment.
     label: t("integration.nav.section.integrations"),
     items: [
-      { label: t("integration.nav.item.workflows"), to: "/integrations/workflows", icon: Workflow, badge: workflows.value.length || null },
+      { label: t("integration.nav.item.workflows"), to: "/integrations/workflows", icon: Workflow, badge: badge(summary.value?.workflows) },
       { label: t("integration.nav.item.templates"), to: "/integrations/templates", icon: Layers },
-      { label: t("integration.nav.item.runs"), to: "/integrations/runs", icon: Activity, badge: runningCount.value || null },
-      { label: t("integration.nav.item.schedules"), to: "/integrations/schedules", icon: Clock, badge: schedulesActive.value || null },
-      { label: t("integration.nav.item.credentials"), to: "/integrations/credentials", icon: Credentials, badge: credentialsTotal.value || null },
-      { label: t("integration.nav.item.secrets"), to: "/integrations/secrets", icon: KeyRound, badge: secretsTotal.value || null },
+      { label: t("integration.nav.item.runs"), to: "/integrations/runs", icon: Activity, badge: badge(summary.value?.runsInFlight) },
+      { label: t("integration.nav.item.schedules"), to: "/integrations/schedules", icon: Clock, badge: badge(summary.value?.schedulesActive) },
+      { label: t("integration.nav.item.credentials"), to: "/integrations/credentials", icon: Credentials, badge: badge(summary.value?.credentials) },
+      { label: t("integration.nav.item.secrets"), to: "/integrations/secrets", icon: KeyRound, badge: badge(summary.value?.secrets) },
       { label: t("integration.nav.item.audit"), to: "/integrations/audit", icon: ShieldCheck }
     ]
   }

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

@@ -3,6 +3,7 @@ import { computed, nextTick, ref, watch } from "vue";
 import { Position, useVueFlow } from "@vue-flow/core";
 import { NodeToolbar } from "@vue-flow/node-toolbar";
 import { TrashBinMinimalistic as TrashBin } from "#solar-icons";
+import { useCanvasTarget } from "../../composables/useCanvasTarget";
 const props = defineProps({
   id: { type: String, required: true },
   data: { type: Object, required: true },
@@ -34,6 +35,8 @@ const MIN_HEIGHT = 80;
 const width = ref(props.data.sticky.size?.width ?? DEFAULT_WIDTH);
 const height = ref(props.data.sticky.size?.height ?? DEFAULT_HEIGHT);
 const resizing = ref(false);
+const RESIZE_CORNER = 16;
+const resizeTarget = useCanvasTarget(RESIZE_CORNER);
 watch(() => props.data.sticky.size, (s) => {
   if (resizing.value) return;
   width.value = s?.width ?? DEFAULT_WIDTH;
@@ -191,7 +194,7 @@ function onViewMouseDown(e) {
 
   <!-- Card -->
   <div
-    class="relative flex flex-col overflow-hidden rounded-lg border text-sm leading-snug text-stone-700 shadow-sm"
+    class="relative flex flex-col rounded-lg border text-sm leading-snug text-stone-700 shadow-sm"
     :class="[
   selected ? 'ring-2 ring-emerald-400/60' : '',
   editing ? '' : 'cursor-grab active:cursor-grabbing'
@@ -209,7 +212,7 @@ function onViewMouseDown(e) {
     <!-- View mode -->
     <div
       v-if="!editing"
-      class="h-full w-full overflow-hidden whitespace-pre-wrap break-words px-3 py-2"
+      class="h-full w-full overflow-hidden rounded-[inherit] whitespace-pre-wrap break-words px-3 py-2"
       @mousedown="onViewMouseDown"
     >
       <!-- eslint-disable-next-line vue/no-v-html -- renderMarkdownLite escapes the note before it adds a tag -->
@@ -228,7 +231,7 @@ function onViewMouseDown(e) {
       ref="textareaEl"
       v-model="draft"
       :aria-label="t('integration.canvas.sticky.textarea.aria')"
-      class="nodrag nowheel h-full w-full resize-none bg-transparent px-3 py-2 text-sm leading-snug text-stone-700 outline-none placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-500/40"
+      class="nodrag nowheel h-full w-full resize-none rounded-[inherit] bg-transparent px-3 py-2 text-sm leading-snug text-stone-700 outline-none placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-500/40"
       :placeholder="t('integration.canvas.sticky.textarea.placeholder')"
       spellcheck="false"
       @blur="commitEdit"
@@ -239,20 +242,30 @@ function onViewMouseDown(e) {
 
     <!-- Bottom-right resize handle (hand-rolled; min 150x80). Gone on a
          read-only canvas: a handle that cannot resize is the same lie as a bin
-         that cannot delete. -->
+         that cannot delete. The hit area reaches past the note's corner (see
+         `resizeTarget`) — which is why the card no longer clips its overflow —
+         and the drawn corner sits in its top-left, exactly where it always sat. -->
     <div
       v-if="editable"
-      class="nodrag absolute bottom-0 right-0 flex size-4 cursor-se-resize items-end justify-end p-0.5 text-stone-400/80"
+      class="nodrag absolute cursor-se-resize"
+      :style="{
+  width: `${resizeTarget}px`,
+  height: `${resizeTarget}px`,
+  right: `${RESIZE_CORNER - resizeTarget}px`,
+  bottom: `${RESIZE_CORNER - resizeTarget}px`
+}"
       :title="t('integration.canvas.sticky.action.resize')"
       @pointerdown="onResizeStart"
       @pointermove="onResizeMove"
       @pointerup="onResizeEnd"
       @pointercancel="onResizeEnd"
     >
-      <svg viewBox="0 0 8 8" class="size-2.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round">
-        <path d="M7 1 1 7" />
-        <path d="M7 4.5 4.5 7" />
-      </svg>
+      <div class="flex size-4 items-end justify-end p-0.5 text-stone-400/80">
+        <svg viewBox="0 0 8 8" class="size-2.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round">
+          <path d="M7 1 1 7" />
+          <path d="M7 4.5 4.5 7" />
+        </svg>
+      </div>
     </div>
   </div>
 </template>

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

@@ -2,7 +2,7 @@
 import { computed, onMounted } from "vue";
 import { nodeIcon } from "../../data/nodeIcons";
 import { triggerGlyph } from "../../data/triggerGlyphs";
-import { findManifest, NODE_CATEGORIES, TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
+import { findManifest, NODE_CATEGORIES, TRIGGER_TEMPLATES, triggerTypeLabel } from "../../data/integrationNodeCatalog";
 import { resolveLocalized } from "../../utils/localize";
 import { describeCron } from "../../utils/schedule";
 import IntegrationsNodeMark from "./NodeMark.vue";
@@ -38,7 +38,7 @@ const boxes = computed(() => {
       y: pos.y,
       w: TRIG_W,
       h: TRIG_H,
-      label: typeof t2.name === "string" && t2.name || t2.type.charAt(0).toUpperCase() + t2.type.slice(1),
+      label: typeof t2.name === "string" && t2.name || triggerTypeLabel(t2.type),
       subtitle,
       type: t2.type,
       manifest: null,
@@ -175,7 +175,7 @@ const bounds = computed(() => {
             </div>
           </div>
           <div class="rounded-b-md border-t border-emerald-500/15 bg-emerald-500/[0.04] px-3 py-1 text-mono font-semibold text-emerald-700/80">
-            {{ t("integration.templates.preview.triggerLabel") }} · {{ b.type }}
+            {{ t("integration.templates.preview.triggerLabel") }} · {{ triggerTypeLabel(b.type) }}
           </div>
         </div>
 

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

@@ -92,6 +92,7 @@ function onHoverLeave() {
   }, 200);
 }
 const toolsVisible = computed(() => edgeActions !== null && !props.data?.replay && (hovered.value || isSelected.value));
+const unzoom = computed(() => 1 / (flow.viewport.value.zoom || 1));
 function removeEdge() {
   flow.removeEdges([props.id]);
 }
@@ -128,7 +129,7 @@ function spliceNode() {
     <div
       class="absolute pointer-events-none select-none rounded-md border px-1.5 py-0.5 text-mono shadow-sm"
       :style="{
-  transform: `translate(-50%, -50%) translate(${path[1]}px, ${path[2] - (toolsVisible ? 16 : 0)}px)`,
+  transform: `translate(-50%, -50%) translate(${path[1]}px, ${path[2] - (toolsVisible ? 16 * unzoom : 0)}px)`,
   color: color.label,
   background: color.bg,
   borderColor: color.stroke + '55'
@@ -142,7 +143,7 @@ function spliceNode() {
   <EdgeLabelRenderer v-if="toolsVisible">
     <div
       class="absolute z-20 flex items-center gap-0.5 rounded-md border border-black/[0.08] bg-white p-0.5 shadow-md"
-      :style="{ transform: `translate(-50%, -50%) translate(${path[1]}px, ${path[2] + (props.data?.label ? 14 : 0)}px)`, pointerEvents: 'all' }"
+      :style="{ transform: `translate(-50%, -50%) translate(${path[1]}px, ${path[2] + (props.data?.label ? 14 * unzoom : 0)}px) scale(${unzoom})`, pointerEvents: 'all' }"
       @mouseenter="onHoverEnter"
       @mouseleave="onHoverLeave"
     >