@revenexx/studio-integrations 0.6.0 → 1.0.0

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

@@ -1,16 +1,19 @@
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from "vue";
 import { Badge } from "@revenexx/studio";
-import { statusClass } from "../../utils/statusStyle";
+import { RUN_STATUS_WORDS, normalisedRunStatus, runStatusLabel, statusClass } from "../../utils/statusStyle";
+import { TRIGGER_TYPE_WORDS, triggerTypeLabel } from "../../data/integrationNodeCatalog";
 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." },
+  emptyText: { type: String, required: false },
   pagination: { type: Boolean, required: false, default: true },
   showWorkflow: { type: Boolean, required: false, default: true }
 });
 const emit = defineEmits(["changed"]);
+const t = useIntegrationsT();
 const router = useRouter();
+const emptyText = computed(() => props.emptyText ?? t("integration.runs.table.empty"));
 const now = ref(Date.now());
 let tick = null;
 onMounted(() => {
@@ -31,10 +34,10 @@ 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`;
+  if (ms < 6e4) return t("integration.common.time.secondsAgo", Math.max(1, Math.floor(ms / 1e3)));
+  if (ms < 36e5) return t("integration.common.time.minutesAgo", Math.floor(ms / 6e4));
+  if (ms < 864e5) return t("integration.common.time.hoursAgo", Math.floor(ms / 36e5));
+  return t("integration.common.time.daysAgo", Math.floor(ms / 864e5));
 }
 function formatDuration(ms) {
   if (ms == null) return "\u2014";
@@ -49,16 +52,35 @@ function liveDuration(run) {
   const end = run.finishedAt ? Date.parse(run.finishedAt) : now.value;
   return end - start;
 }
+const filterTabs = computed(() => props.pagination ? [
+  {
+    key: "status",
+    label: t("integration.runs.table.column.status"),
+    getter: (r) => normalisedRunStatus(r.status),
+    options: RUN_STATUS_WORDS.map((v) => ({ value: v, label: runStatusLabel(v) }))
+  },
+  {
+    key: "trigger",
+    label: t("integration.runs.table.column.trigger"),
+    getter: (r) => r.triggerType ?? "",
+    options: TRIGGER_TYPE_WORDS.map((v) => ({ value: v, label: triggerTypeLabel(v) }))
+  }
+] : void 0);
 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 }] : [],
+  // Sorted and searched by the word on screen, not by the raw field: a column
+  // with no `searchGetter` is searched through its `sortGetter`, so a German
+  // reader typing the status they can see has to find the row that shows it.
+  { key: "status", label: t("integration.runs.table.column.status"), width: "100px", sortable: true, sortGetter: (r) => runStatusLabel(r.status) },
+  ...props.showWorkflow ? [{ key: "workflow", label: t("integration.runs.table.column.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: "id", label: t("integration.runs.table.column.id"), width: "minmax(280px,1fr)", searchGetter: (r) => `${r.temporalRunId ?? ""} ${r.id}` },
+  // Same rule as the status column above: the word on screen is what sorts and
+  // what a search has to match.
+  { key: "trigger", label: t("integration.runs.table.column.trigger"), width: "120px", sortable: true, sortGetter: (r) => triggerTypeLabel(r.triggerType) },
+  { key: "started", label: t("integration.runs.table.column.started"), width: "120px", sortable: true, sortGetter: (r) => r.startedAt },
+  { key: "duration", label: t("integration.runs.table.column.duration"), width: "100px", sortable: true, sortGetter: (r) => r.durationMs ?? -1 },
   { key: "actions", label: "", width: "52px" }
 ]);
 </script>
@@ -69,8 +91,8 @@ const columns = computed(() => [
     :columns="columns"
     :row-key="(r) => r.id"
     :default-sort="{ column: 'started', direction: 'desc' }"
-    :search="{ placeholder: 'Search runs\u2026' }"
-    :filter="true"
+    :search="{ placeholder: t('integration.runs.table.search.placeholder') }"
+    :filter-tabs="filterTabs"
     :loading="loading"
     :pagination="pagination"
     :empty-text="emptyText"
@@ -78,7 +100,7 @@ const columns = computed(() => [
   >
     <template #cell-status="{ row: run }">
       <Badge variant="outline" :class="['border text-xs font-medium uppercase', statusClass(run.status)]">
-        {{ run.status }}
+        {{ runStatusLabel(run.status) }}
       </Badge>
     </template>
 
@@ -93,7 +115,7 @@ const columns = computed(() => [
 
     <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 }}
+        {{ triggerTypeLabel(run.triggerType) }}
       </span>
     </template>
 

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

@@ -14,7 +14,6 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
     onChanged?: (() => any) | undefined;
 }>, {
     loading: boolean;
-    emptyText: string;
     pagination: boolean;
     showWorkflow: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -5,6 +5,7 @@ import { Badge, Button, Dialog, DialogContent, DialogDescription, DialogHeader,
 import { useIntegrationsCredentials } from "../../composables/useIntegrationsCredentials";
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const emit = defineEmits(["created"]);
+const t = useIntegrationsT();
 const sftp = typeof useConsoleSftp === "function" ? useConsoleSftp() : {
   accounts: ref([]),
   loading: ref(false),
@@ -30,7 +31,7 @@ async function importAccount(account) {
   try {
     const creds = await sftp.revealPassword(tenant, account.id);
     if (!creds?.password) {
-      error.value = "Could not read the account password.";
+      error.value = t("integration.credentials.sftpImport.error.readPassword");
       return;
     }
     const created = await create({
@@ -46,7 +47,7 @@ async function importAccount(account) {
     emit("created", created.id);
     open.value = false;
   } catch (err) {
-    error.value = err instanceof Error ? err.message : "Import failed.";
+    error.value = err instanceof Error ? err.message : t("integration.credentials.sftpImport.error.importFailed");
   } finally {
     busyId.value = null;
   }
@@ -57,9 +58,9 @@ async function importAccount(account) {
   <Dialog v-model:open="open">
     <DialogContent class="sm:max-w-md">
       <DialogHeader>
-        <DialogTitle>Import platform SFTP account</DialogTitle>
+        <DialogTitle>{{ t("integration.credentials.sftpImport.title") }}</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.
+          {{ t("integration.credentials.sftpImport.description") }}
         </DialogDescription>
       </DialogHeader>
 
@@ -67,7 +68,7 @@ async function importAccount(account) {
         <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.
+        {{ t("integration.credentials.sftpImport.empty") }}
       </p>
       <div v-else class="max-h-72 space-y-1 overflow-y-auto">
         <button
@@ -82,7 +83,7 @@ async function importAccount(account) {
             <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>
+          <Badge variant="outline" class="text-xs font-medium uppercase shrink-0">{{ t("integration.credentials.sftpImport.badge.active") }}</Badge>
           <Loader2 v-if="busyId === account.id" :size="14" class="shrink-0 animate-spin text-muted-foreground" />
         </button>
       </div>
@@ -90,7 +91,7 @@ async function importAccount(account) {
       <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>
+        <Button variant="outline" size="sm" class="h-8 text-sm" @click="open = false">{{ t("integration.common.action.close") }}</Button>
       </div>
     </DialogContent>
   </Dialog>

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

@@ -1,6 +1,7 @@
 <script setup>
 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 { workflows } = useIntegrationsWorkflows();
 const { runningCount } = useIntegrationsRuns();
 const { activeCount: schedulesActive } = useIntegrationsSchedules();
@@ -10,25 +11,28 @@ const sections = computed(() => [
   {
     key: "pinned",
     items: [
-      { label: "Dashboard", to: "/integrations", icon: Home, exact: true }
+      { label: t("integration.nav.item.dashboard"), to: "/integrations", icon: Home, exact: true }
     ]
   },
   {
     key: "integrations",
-    label: "Integrations",
+    // A rail's section heading is a proper noun and stays English in every UI
+    // language. It is still a key, so the decision is written down where a
+    // translator will look for it rather than only in a review comment.
+    label: t("integration.nav.section.integrations"),
     items: [
-      { label: "Workflows", to: "/integrations/workflows", icon: Workflow, badge: workflows.value.length || null },
-      { label: "Templates", to: "/integrations/templates", icon: Layers },
-      { label: "Runs", to: "/integrations/runs", icon: Activity, badge: runningCount.value || null },
-      { label: "Schedules", to: "/integrations/schedules", icon: Clock, badge: schedulesActive.value || null },
-      { label: "Credentials", to: "/integrations/credentials", icon: Credentials, badge: credentialsTotal.value || null },
-      { label: "Secrets", to: "/integrations/secrets", icon: KeyRound, badge: secretsTotal.value || null },
-      { label: "Audit Log", to: "/integrations/audit", icon: ShieldCheck }
+      { label: t("integration.nav.item.workflows"), to: "/integrations/workflows", icon: Workflow, badge: workflows.value.length || null },
+      { 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.audit"), to: "/integrations/audit", icon: ShieldCheck }
     ]
   }
 ]);
 </script>
 
 <template>
-  <SidebarNav title="Integration Studio" :icon="Workflow" :sections="sections" minimal />
+  <SidebarNav :title="t('integration.nav.title')" :icon="Workflow" :sections="sections" minimal />
 </template>

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

@@ -11,13 +11,23 @@ import type { WorkflowSticky } from '../../types/integrations.js';
  * - NodeToolbar on hover/selection: 7-color pastel palette + delete.
  * - Hand-rolled bottom-right resize handle (no @vue-flow/node-resizer dep);
  *   size persists once on pointer-up.
+ *
+ * **Absence of the callbacks is what makes a note read-only** — the run replay and
+ * the history preview hand it none, and then it draws no toolbar, no resize handle
+ * and cannot be opened for typing (behaviour specs/sticky-notes.md AC-9). They used
+ * to be handed no-ops instead, which left every one of those affordances on screen
+ * doing nothing: a reader could not tell "not allowed here" from "broken" (PO-284).
+ * `GroupFrameView` gates its own toolbar on the same absence.
  */
 export interface StickyNodeData {
     sticky: WorkflowSticky;
-    /** Persist a partial change into the blob (editor-side, syncs + pushes). */
-    onUpdate: (patch: Partial<Pick<WorkflowSticky, 'content' | 'size' | 'color'>>) => void;
-    /** Remove this sticky from the blob (editor-side). */
-    onRemove: () => void;
+    /**
+     * Persist a partial change into the blob (editor-side, syncs + pushes).
+     * Absent on a read-only canvas — see the note above.
+     */
+    onUpdate?: (patch: Partial<Pick<WorkflowSticky, 'content' | 'size' | 'color'>>) => void;
+    /** Remove this sticky from the blob (editor-side). Absent when read-only. */
+    onRemove?: () => void;
 }
 type __VLS_Props = {
     id: string;

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

@@ -2,7 +2,7 @@
 import { computed, nextTick, ref, watch } from "vue";
 import { Position, useVueFlow } from "@vue-flow/core";
 import { NodeToolbar } from "@vue-flow/node-toolbar";
-import { Trash2 } from "lucide-vue-next";
+import { TrashBinMinimalistic as TrashBin } from "#solar-icons";
 const props = defineProps({
   id: { type: String, required: true },
   data: { type: Object, required: true },
@@ -10,20 +10,22 @@ const props = defineProps({
 });
 defineOptions({ inheritAttrs: false });
 defineEmits(["updateNodeInternals"]);
+const t = useIntegrationsT();
 const flow = useVueFlow();
 const STICKY_COLORS = [
-  { bg: "#fef3c7", border: "#fde68a", name: "Amber" },
-  { bg: "#ffedd5", border: "#fed7aa", name: "Orange" },
-  { bg: "#ffe4e6", border: "#fecdd3", name: "Rose" },
-  { bg: "#dcfce7", border: "#bbf7d0", name: "Green" },
-  { bg: "#dbeafe", border: "#bfdbfe", name: "Blue" },
-  { bg: "#ede9fe", border: "#ddd6fe", name: "Violet" },
-  { bg: "#f5f5f4", border: "#e7e5e4", name: "Gray" }
+  { bg: "#fef3c7", border: "#fde68a", nameKey: "integration.canvas.color.amber" },
+  { bg: "#ffedd5", border: "#fed7aa", nameKey: "integration.canvas.color.orange" },
+  { bg: "#ffe4e6", border: "#fecdd3", nameKey: "integration.canvas.color.rose" },
+  { bg: "#dcfce7", border: "#bbf7d0", nameKey: "integration.canvas.color.green" },
+  { bg: "#dbeafe", border: "#bfdbfe", nameKey: "integration.canvas.color.blue" },
+  { bg: "#ede9fe", border: "#ddd6fe", nameKey: "integration.canvas.color.violet" },
+  { bg: "#f5f5f4", border: "#e7e5e4", nameKey: "integration.canvas.color.gray" }
 ];
 const color = computed(() => STICKY_COLORS[props.data.sticky.color ?? 0] ?? STICKY_COLORS[0]);
+const editable = computed(() => !!props.data.onUpdate && !!props.data.onRemove);
 function pickColor(i) {
   if ((props.data.sticky.color ?? 0) === i) return;
-  props.data.onUpdate({ color: i });
+  props.data.onUpdate?.({ color: i });
 }
 const DEFAULT_WIDTH = 240;
 const DEFAULT_HEIGHT = 160;
@@ -54,13 +56,18 @@ function onResizeMove(e) {
 function onResizeEnd() {
   if (!resizing.value) return;
   resizing.value = false;
-  props.data.onUpdate({ size: { width: width.value, height: height.value } });
+  props.data.onUpdate?.({ size: { width: width.value, height: height.value } });
 }
 const editing = ref(false);
 const draft = ref("");
 const textareaEl = ref(null);
+function onDoubleClick(event) {
+  if (!editable.value) return;
+  event.stopPropagation();
+  startEdit();
+}
 function startEdit() {
-  if (editing.value) return;
+  if (!editable.value || editing.value) return;
   draft.value = props.data.sticky.content;
   editing.value = true;
   nextTick(() => textareaEl.value?.focus());
@@ -69,7 +76,7 @@ function commitEdit() {
   if (!editing.value) return;
   editing.value = false;
   if (draft.value !== props.data.sticky.content) {
-    props.data.onUpdate({ content: draft.value });
+    props.data.onUpdate?.({ content: draft.value });
   }
 }
 function onTextareaKeydown(e) {
@@ -91,26 +98,60 @@ function onHoverLeave() {
     hovered.value = false;
   }, 250);
 }
-const toolbarVisible = computed(() => !editing.value && (hovered.value || !!props.selected));
+const toolbarVisible = computed(() => editable.value && !editing.value && (hovered.value || !!props.selected));
 function escapeHtml(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 function inline(s) {
   return s.replace(/`([^`\n]+)`/g, '<code class="rounded bg-black/[0.07] px-1 py-px font-mono text-[0.85em]">$1</code>').replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" class="font-medium underline decoration-current/40 underline-offset-2 hover:decoration-current">$1</a>').replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>").replace(/(^|[^*])\*([^*\n]+)\*(?!\*)/g, "$1<em>$2</em>");
 }
+const NOTE_HEADINGS = [
+  { tag: "h2", cls: "m-0 text-base font-semibold" },
+  { tag: "h3", cls: "m-0 text-sm font-semibold" },
+  { tag: "h4", cls: "m-0 text-sm font-medium" }
+];
+const HEADING_RE = /^(#{1,3})\s+(.+)$/;
+const UL_RE = /^[-*]\s+(.+)$/;
+const OL_RE = /^(\d+)\.\s+(.+)$/;
+function renderList(tag, items) {
+  const li = items.map(({ marker, text }) => {
+    const numeric = tag === "ol" ? " tabular-nums" : "";
+    const hidden = tag === "ul" ? ' aria-hidden="true"' : "";
+    const ordinal = tag === "ol" ? ` value="${Number.parseInt(marker, 10)}"` : "";
+    return `<li${ordinal} class="flex gap-1.5"><span${hidden} class="select-none${numeric}">${marker}</span><span class="min-w-0">${text}</span></li>`;
+  }).join("");
+  return `<${tag} role="list" class="m-0 list-none p-0 pl-1">${li}</${tag}>`;
+}
 function renderMarkdownLite(src) {
-  return escapeHtml(src).split("\n").map((line) => {
-    const h = /^(#{1,3})\s+(.+)$/.exec(line);
+  const lines = escapeHtml(src).split("\n");
+  const out = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i] ?? "";
+    const h = HEADING_RE.exec(line);
     if (h) {
-      const cls = h[1].length === 1 ? "text-base font-semibold" : h[1].length === 2 ? "text-sm font-semibold" : "text-sm font-medium";
-      return `<div class="${cls}">${inline(h[2])}</div>`;
+      const { tag, cls } = NOTE_HEADINGS[(h[1] ?? "#").length - 1] ?? NOTE_HEADINGS[2];
+      out.push(`<${tag} class="${cls}">${inline(h[2] ?? "")}</${tag}>`);
+      i++;
+      continue;
     }
-    const ul = /^[-*]\s+(.+)$/.exec(line);
-    if (ul) return `<div class="flex gap-1.5 pl-1"><span class="select-none">\u2022</span><span class="min-w-0">${inline(ul[1])}</span></div>`;
-    const ol = /^(\d+)\.\s+(.+)$/.exec(line);
-    if (ol) return `<div class="flex gap-1.5 pl-1"><span class="select-none tabular-nums">${ol[1]}.</span><span class="min-w-0">${inline(ol[2])}</span></div>`;
-    return line ? `<div>${inline(line)}</div>` : "<div>&nbsp;</div>";
-  }).join("");
+    const listRe = UL_RE.test(line) ? UL_RE : OL_RE.test(line) ? OL_RE : null;
+    if (listRe) {
+      const tag = listRe === UL_RE ? "ul" : "ol";
+      const items = [];
+      while (i < lines.length) {
+        const m = listRe.exec(lines[i] ?? "");
+        if (!m) break;
+        items.push({ marker: tag === "ul" ? "\u2022" : `${m[1]}.`, text: inline(m[m.length - 1] ?? "") });
+        i++;
+      }
+      out.push(renderList(tag, items));
+      continue;
+    }
+    out.push(line ? `<div>${inline(line)}</div>` : "<div>&nbsp;</div>");
+    i++;
+  }
+  return out.join("");
 }
 const rendered = computed(() => renderMarkdownLite(props.data.sticky.content));
 function onViewMouseDown(e) {
@@ -133,17 +174,17 @@ function onViewMouseDown(e) {
         class="size-5 rounded-full border transition hover:scale-110"
         :class="(data.sticky.color ?? 0) === i ? 'ring-2 ring-black/25 ring-offset-1' : ''"
         :style="{ backgroundColor: c.bg, borderColor: c.border }"
-        :title="c.name"
+        :title="t(c.nameKey)"
         @click="pickColor(i)"
       />
       <div class="mx-0.5 h-4 w-px bg-black/10" />
       <button
         type="button"
         class="flex size-6 items-center justify-center rounded-md text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
-        title="Delete note"
-        @click="data.onRemove()"
+        :title="t('integration.canvas.sticky.action.delete')"
+        @click="data.onRemove?.()"
       >
-        <Trash2 :size="13" />
+        <TrashBin :size="13" />
       </button>
     </div>
   </NodeToolbar>
@@ -163,7 +204,7 @@ function onViewMouseDown(e) {
 }"
     @mouseenter="onHoverEnter"
     @mouseleave="onHoverLeave"
-    @dblclick.stop="startEdit"
+    @dblclick="onDoubleClick"
   >
     <!-- View mode -->
     <div
@@ -172,7 +213,11 @@ function onViewMouseDown(e) {
       @mousedown="onViewMouseDown"
     >
       <div v-if="data.sticky.content" v-html="rendered" />
-      <span v-else class="select-none text-stone-400">Double-click to edit</span>
+      <!-- The hint is an instruction, not content, so it goes with the rest of the
+           affordances: on a read-only canvas it would name the one gesture
+           `startEdit` refuses, which is the false affordance AC-9 removes rather
+           than a smaller version of it. An empty note there simply reads empty. -->
+      <span v-else-if="editable" class="select-none text-stone-400">{{ t("integration.canvas.sticky.state.emptyHint") }}</span>
     </div>
 
     <!-- Edit mode — nodrag/nowheel so typing and scrolling never drag or zoom
@@ -181,9 +226,9 @@ function onViewMouseDown(e) {
       v-else
       ref="textareaEl"
       v-model="draft"
-      aria-label="Note text"
+      :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"
-      placeholder="Write a note… (# heading, **bold**, *italic*, `code`, [link](https://…), - list)"
+      :placeholder="t('integration.canvas.sticky.textarea.placeholder')"
       spellcheck="false"
       @blur="commitEdit"
       @keydown="onTextareaKeydown"
@@ -191,10 +236,13 @@ function onViewMouseDown(e) {
       @dblclick.stop
     />
 
-    <!-- Bottom-right resize handle (hand-rolled; min 150x80) -->
+    <!-- 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. -->
     <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"
-      title="Resize"
+      :title="t('integration.canvas.sticky.action.resize')"
       @pointerdown="onResizeStart"
       @pointermove="onResizeMove"
       @pointerup="onResizeEnd"

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

@@ -11,13 +11,23 @@ import type { WorkflowSticky } from '../../types/integrations.js';
  * - NodeToolbar on hover/selection: 7-color pastel palette + delete.
  * - Hand-rolled bottom-right resize handle (no @vue-flow/node-resizer dep);
  *   size persists once on pointer-up.
+ *
+ * **Absence of the callbacks is what makes a note read-only** — the run replay and
+ * the history preview hand it none, and then it draws no toolbar, no resize handle
+ * and cannot be opened for typing (behaviour specs/sticky-notes.md AC-9). They used
+ * to be handed no-ops instead, which left every one of those affordances on screen
+ * doing nothing: a reader could not tell "not allowed here" from "broken" (PO-284).
+ * `GroupFrameView` gates its own toolbar on the same absence.
  */
 export interface StickyNodeData {
     sticky: WorkflowSticky;
-    /** Persist a partial change into the blob (editor-side, syncs + pushes). */
-    onUpdate: (patch: Partial<Pick<WorkflowSticky, 'content' | 'size' | 'color'>>) => void;
-    /** Remove this sticky from the blob (editor-side). */
-    onRemove: () => void;
+    /**
+     * Persist a partial change into the blob (editor-side, syncs + pushes).
+     * Absent on a read-only canvas — see the note above.
+     */
+    onUpdate?: (patch: Partial<Pick<WorkflowSticky, 'content' | 'size' | 'color'>>) => void;
+    /** Remove this sticky from the blob (editor-side). Absent when read-only. */
+    onRemove?: () => void;
 }
 type __VLS_Props = {
     id: string;

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

@@ -0,0 +1,50 @@
+/**
+ * One shortcut into a surface the *host* provides — Import & Export, the SFTP
+ * server, the event stream, inbound webhooks. None of the four is a page of this
+ * module: they are the cockpit's, and this card is the studio's landing page
+ * pointing at them.
+ *
+ * So the card has two states, and which one it is in is not its own decision:
+ *
+ * - **`available`** — the host has the surface. The card is a link and behaves
+ *   exactly as it did before PO-223.
+ * - **not available** — the card stays on screen, looks the same, and is a button
+ *   that explains where the surface lives instead of leading into a route the host
+ *   does not serve. Before PO-223 it was a link into nothing: in the playground
+ *   and in the standalone dev studio all four led to a 404.
+ *
+ * **Staying on screen is the point**, and it is the call the managed credential
+ * sources already made (`CredentialRevenexxSource.vue`, PO-222): a control that
+ * vanishes leaves nothing to read the explanation from, and the reader cannot tell
+ * a broken feature from one that belongs somewhere else.
+ *
+ * **No `aria-label`, on purpose** — like `TemplateCard`, the card takes its name
+ * from what it shows. The state is carried by the *role*: "Import & Export,
+ * button" instead of "link" is what says to a screen reader that this does not
+ * navigate, and it says it without announcing something no sighted reader can see
+ * (`specs/accessibility.md` AC-1 names the on-screen text as the source of a name).
+ *
+ * Who decides `available`, and why it is the router rather than a guess about the
+ * host, is `docs/host-surfaces.md`.
+ *
+ * The two branches draw the same body twice rather than sharing it: `as-child`
+ * wants a real element as its child, and the alternatives — a wrapper element
+ * around the card, or a second component for eight lines — cost either the grid
+ * layout or a file. **Keep the two bodies identical.**
+ */
+import type { Component } from 'vue';
+type __VLS_Props = {
+    /** What the surface is called, in the reader's language. */
+    label: string;
+    /** One line on what it is for. Shown in both states. */
+    hint: string;
+    icon: Component;
+    /** Where the surface lives in a host that has it. */
+    to: string;
+    /** Whether this host has it. See the comment above; no default on purpose. */
+    available: boolean;
+    /** What the popover says when it does not. */
+    note: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,55 @@
+<script setup>
+import { ArrowRight } from "#solar-icons";
+import { Popover, PopoverContent, PopoverTrigger } from "@revenexx/studio";
+defineProps({
+  label: { type: String, required: true },
+  hint: { type: String, required: true },
+  icon: { type: null, required: true },
+  to: { type: String, required: true },
+  available: { type: Boolean, required: true },
+  note: { type: String, required: true }
+});
+const CARD_CLASS = "group rounded-lg border border-black/[0.06] bg-white p-3 transition hover:border-black/20";
+</script>
+
+<template>
+  <NuxtLink v-if="available" :to="to" :class="CARD_CLASS">
+    <div class="flex items-center gap-2">
+      <span class="flex size-6 items-center justify-center rounded-md bg-slate-100 text-slate-500">
+        <component :is="icon" :size="12" />
+      </span>
+      <span class="min-w-0 flex-1 truncate text-sm font-semibold">{{ label }}</span>
+      <ArrowRight :size="11" class="text-muted-foreground transition-transform group-hover:translate-x-0.5" />
+    </div>
+    <p class="mt-2 text-sm text-muted-foreground">
+      {{ hint }}
+    </p>
+  </NuxtLink>
+
+  <Popover v-else>
+    <PopoverTrigger as-child>
+      <!-- No `id` here: `PopoverTrigger` puts reka-ui's generated `triggerId` on
+           its child and `PopoverContentImpl` points the opened dialog's
+           `aria-labelledby` at exactly that id, so the popover is named by this
+           card. Ours would replace it (reka's `Slot` merges with the child's
+           props winning) and leave the dialog naming nothing. -->
+      <button type="button" :class="[CARD_CLASS, 'w-full text-left']">
+        <div class="flex items-center gap-2">
+          <span class="flex size-6 items-center justify-center rounded-md bg-slate-100 text-slate-500">
+            <component :is="icon" :size="12" />
+          </span>
+          <span class="min-w-0 flex-1 truncate text-sm font-semibold">{{ label }}</span>
+          <ArrowRight :size="11" class="text-muted-foreground transition-transform group-hover:translate-x-0.5" />
+        </div>
+        <p class="mt-2 text-sm text-muted-foreground">
+          {{ hint }}
+        </p>
+      </button>
+    </PopoverTrigger>
+    <PopoverContent align="start" class="w-72 rounded-lg border border-black/[0.06] bg-white p-3 shadow-lg">
+      <p class="text-sm text-muted-foreground">
+        {{ note }}
+      </p>
+    </PopoverContent>
+  </Popover>
+</template>