@revenexx/studio-integrations 0.5.1 → 0.7.0

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

@@ -17,6 +17,7 @@ defineProps({
   runId: { type: [String, null], required: false }
 });
 const emit = defineEmits(["update:open", "view-run"]);
+const t = useIntegrationsT();
 </script>
 
 <template>
@@ -25,16 +26,16 @@ const emit = defineEmits(["update:open", "view-run"]);
          JSON <pre> scrolling INSIDE instead of blowing the dialog open. -->
     <DialogContent class="max-w-[94vw] overflow-hidden sm:max-w-4xl">
       <DialogHeader>
-        <DialogTitle>{{ mode === "async" ? "Run started" : "Run response" }}</DialogTitle>
+        <DialogTitle>{{ mode === "async" ? t("integration.runs.response.title.async") : t("integration.runs.response.title.sync") }}</DialogTitle>
         <DialogDescription class="font-mono text-sm">
-          {{ mode === "async" ? "Queued for background execution" : "Synchronous run result" }}
+          {{ mode === "async" ? t("integration.runs.response.description.async") : t("integration.runs.response.description.sync") }}
         </DialogDescription>
       </DialogHeader>
 
       <div class="min-w-0 max-w-full text-sm">
         <div v-if="loading" class="flex items-center gap-2 py-6 text-muted-foreground">
           <Loader2 :size="16" class="animate-spin" />
-          {{ mode === "async" ? "Starting\u2026" : "Running\u2026" }}
+          {{ mode === "async" ? t("integration.runs.response.loading.async") : t("integration.runs.response.loading.sync") }}
         </div>
 
         <template v-else-if="error">
@@ -43,7 +44,7 @@ const emit = defineEmits(["update:open", "view-run"]);
           </div>
           <div v-if="runId" class="mt-3 flex justify-end">
             <Button class="h-8 text-sm" @click="emit('view-run', runId)">
-              View run #{{ runId }}
+              {{ t("integration.runs.response.action.viewRunWithId", { id: runId }) }}
             </Button>
           </div>
         </template>
@@ -51,15 +52,15 @@ const emit = defineEmits(["update:open", "view-run"]);
         <template v-else-if="mode === 'async'">
           <div class="flex items-center gap-2 rounded-md border border-emerald-500/20 bg-emerald-500/5 px-3 py-2 text-emerald-700">
             <CheckCircle2 :size="15" class="shrink-0" />
-            <span v-if="runId">Run #{{ runId }} started and is executing in the background.</span>
-            <span v-else>Run started and is executing in the background.</span>
+            <span v-if="runId">{{ t("integration.runs.response.async.startedWithId", { id: runId }) }}</span>
+            <span v-else>{{ t("integration.runs.response.async.started") }}</span>
           </div>
           <div class="mt-3 flex justify-end gap-2">
             <Button variant="outline" class="h-8 text-sm" @click="emit('update:open', false)">
-              Close
+              {{ t("integration.common.action.close") }}
             </Button>
             <Button v-if="runId" class="h-8 text-sm" @click="emit('view-run', runId)">
-              View run
+              {{ t("integration.runs.response.action.viewRun") }}
             </Button>
           </div>
         </template>
@@ -70,13 +71,13 @@ const emit = defineEmits(["update:open", "view-run"]);
           >{{ JSON.stringify(response, null, 2) }}</pre>
           <div v-if="runId" class="mt-3 flex justify-end">
             <Button variant="outline" class="h-8 text-sm" @click="emit('view-run', runId)">
-              View run
+              {{ t("integration.runs.response.action.viewRun") }}
             </Button>
           </div>
         </template>
 
         <p v-else class="py-6 text-muted-foreground">
-          No response.
+          {{ t("integration.runs.response.empty") }}
         </p>
       </div>
     </DialogContent>

package/dist/runtime/components/Integrations/RunsTable.d.vue.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/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,7 +98,7 @@ 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;");
 }
@@ -133,17 +140,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 +170,7 @@ function onViewMouseDown(e) {
 }"
     @mouseenter="onHoverEnter"
     @mouseleave="onHoverLeave"
-    @dblclick.stop="startEdit"
+    @dblclick="onDoubleClick"
   >
     <!-- View mode -->
     <div
@@ -172,7 +179,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,8 +192,9 @@ function onViewMouseDown(e) {
       v-else
       ref="textareaEl"
       v-model="draft"
-      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"
-      placeholder="Write a note… (# heading, **bold**, *italic*, `code`, [link](https://…), - list)"
+      :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="t('integration.canvas.sticky.textarea.placeholder')"
       spellcheck="false"
       @blur="commitEdit"
       @keydown="onTextareaKeydown"
@@ -190,10 +202,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/TemplateCard.d.vue.ts

@@ -0,0 +1,18 @@
+import type { WorkflowTemplate } from '../../types/integrations.js';
+type __VLS_Props = {
+    template: WorkflowTemplate;
+    /** How much room the surface has. See the comment above; no default on purpose. */
+    density: 'full' | 'compact';
+    /** Given → the card is a link there. Omitted → a button that emits `select`. */
+    to?: string;
+    /** This card is the one being acted on: it says so and cannot be pressed again. */
+    busy?: boolean;
+    /** Another card on the surface is being acted on, so this one is out of reach. */
+    disabled?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;