@flowdrop/flowdrop 1.6.0 → 1.8.0

package/README.md

@@ -131,6 +131,16 @@ const app = await mountFlowDropApp(container, {
 });
 ```
 
+## Customising messages
+
+Every user-facing string flows through a typed `Messages` tree. Pass a callback to override any subset:
+
+```svelte
+<FlowDrop messages={() => ({ form: { schema: { save: 'Apply' } } })} />
+```
+
+Wire the callback to your i18n library (paraglide-js, sveltekit-i18n, etc.) — locale changes propagate automatically. See the [i18n & Custom Messages guide](https://docs.flowdrop.io/guides/i18n) for the full shape and a paraglide-js worked example.
+
 ## Sub-Module Exports
 
 FlowDrop provides tree-shakeable sub-module exports so you can import only what you need:

package/dist/components/App.svelte

@@ -57,13 +57,16 @@
   import { getUiSettings, updateSettings } from '../stores/settingsStore.svelte.js';
   import {
     initializePortCompatibility,
-    getPortCompatibilityChecker
+    getPortCompatibilityChecker,
+    isPortCompatibilityInitialized
   } from '../utils/connections.js';
   import { DEFAULT_PORT_CONFIG } from '../config/defaultPortConfig.js';
   import { workflowFormatRegistry } from '../registry/workflowFormatRegistry.js';
   import { logger } from '../utils/logger.js';
   import { validateWorkflowData } from '../utils/validation.js';
   import type { SettingsCategory } from '../types/settings.js';
+  import { defaultMessages, mergeMessages, setMessages } from '../messages/index.js';
+  import type { MessagesOverride } from '../messages/index.js';
 
   /**
    * Configuration props for runtime customization
@@ -121,6 +124,20 @@
     showSettingsResetButton?: boolean;
     /** Pluggable swap strategies — instance-scoped, checked in order */
     swapStrategies?: SwapStrategy[];
+    /** Additional JSON Schema properties to show in the Workflow Settings panel. Values are persisted in workflow.config. */
+    workflowSettingsSchema?: ConfigSchema;
+    /**
+     * Override user-facing strings. Pass either a partial of the `Messages`
+     * tree directly, or a callback that returns one. Missing keys fall through
+     * to English defaults.
+     *
+     * For static overrides, a value is fine: `messages={{ common: { save: 'Apply' } }}`.
+     * For reactive overrides driven by an i18n library (paraglide, etc.),
+     * either form works — Svelte 5's prop reactivity propagates locale changes.
+     * The callback form is useful when your translations live behind a
+     * function call you'd rather not invoke unless the prop is actually read.
+     */
+    messages?: MessagesOverride | (() => MessagesOverride);
   }
 
   let {
@@ -146,12 +163,75 @@
     settingsCategories,
     showSettingsSyncButton,
     showSettingsResetButton,
-    swapStrategies
+    swapStrategies,
+    workflowSettingsSchema,
+    messages: messagesOverride
   }: Props = $props();
 
   // svelte-ignore state_referenced_locally — feature flags don't change at runtime
   const features = mergeFeatures(propFeatures);
 
+  // Messages: merge consumer overrides over defaults; expose via context as a
+  // getter so consumer-side reactivity (e.g. paraglide-js locale switches)
+  // propagates into every child without a subscription. Accepts either a
+  // value or a callback — normalize here so the rest of the component sees
+  // the merged tree directly.
+  let mergedMessages = $derived(
+    mergeMessages(
+      defaultMessages,
+      typeof messagesOverride === 'function' ? messagesOverride() : messagesOverride
+    )
+  );
+  // setContext must run during component init (synchronously, not in $effect)
+  // — Svelte enforces that. The context value is a getter that closes over
+  // the live $derived, so child components always read the current tree.
+  setMessages(() => mergedMessages);
+
+  // Default navbar primary actions — used when no `navbarActions` prop is supplied.
+  // Derived so the labels track locale changes.
+  const defaultPrimaryActions = $derived([
+    {
+      label: mergedMessages.navigation.save,
+      href: '#save',
+      icon: 'heroicons:document-arrow-down',
+      variant: 'primary' as const,
+      onclick: (e: Event) => {
+        e.preventDefault();
+        saveWorkflow();
+      }
+    },
+    {
+      label: mergedMessages.navigation.export,
+      href: '#export',
+      icon: 'heroicons:arrow-down-tray',
+      variant: 'outline' as const,
+      onclick: (e: Event) => {
+        e.preventDefault();
+        exportWorkflow();
+      }
+    },
+    {
+      label: mergedMessages.navigation.import,
+      href: '#import',
+      icon: 'heroicons:arrow-up-tray',
+      variant: 'outline' as const,
+      onclick: (e: Event) => {
+        e.preventDefault();
+        fileInputRef?.click();
+      }
+    },
+    {
+      label: mergedMessages.navigation.workflowSettings,
+      href: '#settings',
+      icon: 'heroicons:cog-6-tooth',
+      variant: 'outline' as const,
+      onclick: (e: Event) => {
+        e.preventDefault();
+        toggleWorkflowSettings();
+      }
+    }
+  ]);
+
   // Theme system — resolve named theme or custom object, inject CSS tokens from skin
   // Explicit prop wins; falls back to user's persisted theme preference from settings
   let resolvedTheme = $derived(resolveTheme(themeProp ?? getUiSettings().theme));
@@ -223,39 +303,60 @@
   let swapTargetMetadata = $state<NodeMetadata | null>(null);
   let swapInteractiveState = $state<InteractiveSwapState | null>(null);
 
+  // Built-in workflow settings field names — consumer schemas must not reuse these.
+  const WORKFLOW_SETTINGS_RESERVED = new Set(['name', 'description', 'format']);
+
   // Workflow configuration schema (derived to pick up dynamic format options)
-  let workflowConfigSchema: ConfigSchema = $derived({
-    type: 'object' as const,
-    properties: {
-      name: {
-        type: 'string',
-        title: 'Workflow Name',
-        description: 'The name of the workflow',
-        default: ''
-      },
-      description: {
-        type: 'string',
-        title: 'Description',
-        description: 'A description of the workflow',
-        format: 'multiline',
-        default: ''
+  let workflowConfigSchema: ConfigSchema = $derived.by(() => {
+    const extraProps = Object.fromEntries(
+      Object.entries(workflowSettingsSchema?.properties ?? {}).filter(([k]) => {
+        if (WORKFLOW_SETTINGS_RESERVED.has(k)) {
+          logger.warn(
+            `workflowSettingsSchema: property "${k}" is reserved and will be ignored. Choose a different key.`
+          );
+          return false;
+        }
+        return true;
+      })
+    );
+    const extraRequired = (workflowSettingsSchema?.required ?? []).filter(
+      (k) => !WORKFLOW_SETTINGS_RESERVED.has(k)
+    );
+    return {
+      type: 'object' as const,
+      properties: {
+        name: {
+          type: 'string',
+          title: 'Workflow Name',
+          description: 'The name of the workflow',
+          default: ''
+        },
+        description: {
+          type: 'string',
+          title: 'Description',
+          description: 'A description of the workflow',
+          format: 'multiline',
+          default: ''
+        },
+        format: {
+          type: 'string',
+          title: 'Workflow Format',
+          description: 'The specification format for this workflow',
+          oneOf: workflowFormatRegistry.getOneOfOptions(),
+          default: 'flowdrop'
+        },
+        ...extraProps
       },
-      format: {
-        type: 'string',
-        title: 'Workflow Format',
-        description: 'The specification format for this workflow',
-        oneOf: workflowFormatRegistry.getOneOfOptions(),
-        default: 'flowdrop'
-      }
-    },
-    required: ['name']
+      required: ['name', ...extraRequired]
+    };
   });
 
   // Workflow configuration values
   let workflowConfigValues = $derived({
     name: getWorkflowName() || '',
     description: getWorkflowStore()?.description || '',
-    format: getWorkflowStore()?.metadata?.format || 'flowdrop'
+    format: getWorkflowStore()?.metadata?.format || 'flowdrop',
+    ...(getWorkflowStore()?.config ?? {})
   });
 
   // Get the current node from the workflow store
@@ -727,7 +828,10 @@
 
         // Ensure port compatibility checker is initialized (needed for proximity connect, etc.)
         // mountFlowDropApp initializes this before mounting, but SvelteKit routes need it here.
-        initializePortCompatibility(DEFAULT_PORT_CONFIG);
+        // Only initialize with defaults if not already set — preserves custom port configs.
+        if (!isPortCompatibilityInitialized()) {
+          initializePortCompatibility(DEFAULT_PORT_CONFIG);
+        }
 
         await fetchNodeTypes();
 
@@ -922,50 +1026,7 @@
     {#snippet header()}
       <Navbar
         title={breadcrumbTitle}
-        primaryActions={navbarActions.length > 0
-          ? navbarActions
-          : [
-              {
-                label: 'Save',
-                href: '#save',
-                icon: 'heroicons:document-arrow-down',
-                variant: 'primary',
-                onclick: (e) => {
-                  e.preventDefault();
-                  saveWorkflow();
-                }
-              },
-              {
-                label: 'Export',
-                href: '#export',
-                icon: 'heroicons:arrow-down-tray',
-                variant: 'outline',
-                onclick: (e) => {
-                  e.preventDefault();
-                  exportWorkflow();
-                }
-              },
-              {
-                label: 'Import',
-                href: '#import',
-                icon: 'heroicons:arrow-up-tray',
-                variant: 'outline',
-                onclick: (e) => {
-                  e.preventDefault();
-                  fileInputRef?.click();
-                }
-              },
-              {
-                label: 'Workflow Settings',
-                href: '#settings',
-                icon: 'heroicons:cog-6-tooth',
-                variant: 'outline',
-                onclick: (e) => {
-                  e.preventDefault();
-                  toggleWorkflowSettings();
-                }
-              }
-            ]}
+        primaryActions={navbarActions.length > 0 ? navbarActions : defaultPrimaryActions}
         showStatus={true}
         {showSettings}
         {settingsCategories}
@@ -1014,7 +1075,7 @@
         />
       {:else if isWorkflowSettingsOpen}
         <ConfigPanel
-          title="Workflow Settings"
+          title={mergedMessages.navigation.workflowSettingsPanelTitle}
           id={getWorkflowStore()?.id}
           details={[
             {
@@ -1026,7 +1087,7 @@
               value: String(getWorkflowStore()?.edges?.length ?? 0)
             }
           ]}
-          configTitle="Settings"
+          configTitle={mergedMessages.navigation.workflowSettingsPanelSubtitle}
           onClose={() => (isWorkflowSettingsOpen = false)}
         >
           <ConfigForm
@@ -1055,13 +1116,16 @@
                   }
                 }
 
+                // Extract built-in fields; everything else belongs in workflow.config
+                const { name, description, format: _format, ...customConfig } = config;
                 workflowActions.batchUpdate({
-                  name: config.name as string,
-                  description: config.description as string | undefined,
+                  name: name as string,
+                  description: description as string | undefined,
                   metadata: {
                     ...wf.metadata,
                     format: newFormat
-                  }
+                  },
+                  ...(workflowSettingsSchema && { config: customConfig as Record<string, unknown> })
                 });
               }
             }}
@@ -1072,7 +1136,8 @@
         <ConfigPanel
           title={currentNode.data.label}
           id={currentNode.id}
-          description={currentNode.data.metadata?.description || 'Node configuration'}
+          description={currentNode.data.metadata?.description ||
+            mergedMessages.navigation.nodeConfigDescription}
           details={[
             {
               label: 'Type',
@@ -1129,7 +1194,7 @@
       {/if}
     {/snippet}
 
-    <!-- Bottom Panel: Tabbed Console / AI Chat -->
+    <!-- Bottom Panel: Tabbed Console / AI Assistant -->
     {#snippet bottomPanel()}
       <div class="bottom-panel-tabs">
         <div class="bottom-panel-tabs__bar">
@@ -1139,7 +1204,7 @@
               : ''}"
             onclick={() => updateSettings({ ui: { bottomPanelTab: 'console' } })}
           >
-            Console
+            {mergedMessages.navigation.bottomPanel.console}
           </button>
           <button
             class="bottom-panel-tabs__tab {getUiSettings().bottomPanelTab === 'chat'
@@ -1147,7 +1212,7 @@
               : ''}"
             onclick={() => updateSettings({ ui: { bottomPanelTab: 'chat' } })}
           >
-            AI Chat
+            {mergedMessages.navigation.bottomPanel.chat}
           </button>
         </div>
         <div class="bottom-panel-tabs__content">
@@ -1232,15 +1297,19 @@
       onclick={handleCanvasClick}
       onkeydown={(e) => e.key === 'Escape' && closeConfigSidebar()}
       role="region"
-      aria-label="Workflow canvas"
+      aria-label={mergedMessages.layout.workflowCanvas}
     >
       <!-- Floating sidebar toggle — always visible on the canvas top-left -->
       {#if !disableSidebar}
         <button
           class="flowdrop-sidebar-fab"
           onclick={toggleSidebar}
-          aria-label={isSidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-          title={isSidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          aria-label={isSidebarCollapsed
+            ? mergedMessages.layout.expandSidebar
+            : mergedMessages.layout.collapseSidebar}
+          title={isSidebarCollapsed
+            ? mergedMessages.layout.expandSidebar
+            : mergedMessages.layout.collapseSidebar}
         >
           <Icon icon={isSidebarCollapsed ? 'mdi:menu' : 'mdi:menu-open'} />
         </button>

package/dist/components/App.svelte.d.ts

@@ -1,10 +1,11 @@
-import type { NodeMetadata, Workflow } from '../types/index.js';
+import type { NodeMetadata, Workflow, ConfigSchema } from '../types/index.js';
 import type { SwapStrategy } from '../utils/nodeSwap.js';
 import type { EndpointConfig } from '../config/endpoints.js';
 import type { AuthProvider } from '../types/auth.js';
 import type { FlowDropEventHandlers, FlowDropFeatures } from '../types/events.js';
 import type { FlowDropTheme, FlowDropThemeName } from '../types/theme.js';
 import type { SettingsCategory } from '../types/settings.js';
+import type { MessagesOverride } from '../messages/index.js';
 /**
  * Configuration props for runtime customization
  */
@@ -61,6 +62,20 @@ interface Props {
     showSettingsResetButton?: boolean;
     /** Pluggable swap strategies — instance-scoped, checked in order */
     swapStrategies?: SwapStrategy[];
+    /** Additional JSON Schema properties to show in the Workflow Settings panel. Values are persisted in workflow.config. */
+    workflowSettingsSchema?: ConfigSchema;
+    /**
+     * Override user-facing strings. Pass either a partial of the `Messages`
+     * tree directly, or a callback that returns one. Missing keys fall through
+     * to English defaults.
+     *
+     * For static overrides, a value is fine: `messages={{ common: { save: 'Apply' } }}`.
+     * For reactive overrides driven by an i18n library (paraglide, etc.),
+     * either form works — Svelte 5's prop reactivity propagates locale changes.
+     * The callback form is useful when your translations live behind a
+     * function call you'd rather not invoke unless the prop is actually read.
+     */
+    messages?: MessagesOverride | (() => MessagesOverride);
 }
 declare const App: import("svelte").Component<Props, {}, "">;
 type App = ReturnType<typeof App>;

package/dist/components/ConfigModal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { ConfigSchema, ConfigValues } from '../types';
   import ConfigForm from './ConfigForm.svelte';
+  import { m } from '../messages/index.js';
 
   interface Props {
     isOpen: boolean;
@@ -60,7 +61,7 @@
           type="button"
           class="config-modal__close-btn"
           onclick={handleClose}
-          aria-label="Close configuration modal"
+          aria-label={m().navigation.closeConfigModal}
         >
           <span aria-hidden="true">×</span>
         </button>

package/dist/components/ConfigPanel.svelte

@@ -11,6 +11,7 @@
   import Icon from '@iconify/svelte';
   import ReadOnlyDetails from './ReadOnlyDetails.svelte';
   import { getUiSettings } from '../stores/settingsStore.svelte.js';
+  import { m } from '../messages/index.js';
 
   /**
    * A single detail item with label and value
@@ -70,13 +71,13 @@
         <button
           class="config-panel__action-btn"
           onclick={onSwap}
-          aria-label="Swap node"
+          aria-label={m().layout.swapNode}
           title="Swap node type"
         >
           <Icon icon="heroicons:arrows-right-left" />
         </button>
       {/if}
-      <button class="config-panel__close" onclick={onClose} aria-label="Close panel"> × </button>
+      <button class="config-panel__close" onclick={onClose} aria-label={m().layout.closeConfigPanel}> × </button>
     </div>
   </div>
 

package/dist/components/FlowDropZone.svelte

@@ -7,6 +7,7 @@
 <script lang="ts">
   import { useSvelteFlow } from '@xyflow/svelte';
   import type { Snippet } from 'svelte';
+  import { m } from '../messages/index.js';
 
   interface Props {
     ondrop: (nodeTypeData: string, position: { x: number; y: number }) => void;
@@ -68,7 +69,7 @@
 <div
   class="flow-drop-zone"
   role="application"
-  aria-label="Workflow canvas"
+  aria-label={m().layout.workflowCanvas}
   ondragover={handleDragOver}
   ondrop={handleDrop}
 >

package/dist/components/LogsSidebar.svelte

@@ -8,6 +8,7 @@
 <script lang="ts">
   import Icon from '@iconify/svelte';
   import type { WorkflowNode as WorkflowNodeType } from '../types/index.js';
+  import { m } from '../messages/index.js';
 
   interface LogEntry {
     timestamp: string;
@@ -163,7 +164,7 @@
   class="logs-sidebar"
   class:logs-sidebar--open={props.isOpen}
   role="dialog"
-  aria-label="Execution logs sidebar"
+  aria-label={m().layout.executionLogs}
   aria-modal="true"
   tabindex="-1"
   onkeydown={handleKeydown}
@@ -189,7 +190,7 @@
       class="logs-sidebar__close-btn"
       onclick={handleClose}
       title="Close logs sidebar (Esc)"
-      aria-label="Close logs sidebar"
+      aria-label={m().layout.closeLogsSidebar}
     >
       <Icon icon="mdi:close" />
     </button>

package/dist/components/Navbar.svelte

@@ -11,6 +11,7 @@
   import Logo from './Logo.svelte';
   import SettingsModal from './SettingsModal.svelte';
   import type { SettingsCategory } from '../types/settings.js';
+  import { m } from '../messages/index.js';
 
   interface NavbarAction {
     label: string;
@@ -64,6 +65,9 @@
   // Settings modal state
   let isSettingsOpen = $state(false);
 
+  // Hoist the navigation branch — six reads in the template.
+  const nav = $derived(m().navigation);
+
   // Close dropdown when clicking outside
   function handleClickOutside(event: MouseEvent) {
     const target = event.target as HTMLElement;
@@ -90,8 +94,8 @@
           <Logo />
         </div>
         <div>
-          <h1 class="flowdrop-text--logo flowdrop-font--bold">FlowDrop</h1>
-          <p class="flowdrop-text--tagline flowdrop-text--gray">Visual Workflow Manager</p>
+          <h1 class="flowdrop-text--logo flowdrop-font--bold">{nav.appName}</h1>
+          <p class="flowdrop-text--tagline flowdrop-text--gray">{nav.tagline}</p>
         </div>
       </div>
     </div>
@@ -104,7 +108,7 @@
         <div class="flowdrop-navbar__status-container">
           <div class="flowdrop-navbar__status">
             <div class="flowdrop-navbar__status-indicator"></div>
-            <span class="flowdrop-navbar__status-text">Connected</span>
+            <span class="flowdrop-navbar__status-text">{nav.connected}</span>
           </div>
         </div>
       {/if}
@@ -112,7 +116,7 @@
       <!-- Title or Breadcrumbs on bottom -->
       {#if breadcrumbs.length > 0}
         <div class="flowdrop-navbar__breadcrumb-container">
-          <nav class="flowdrop-navbar__breadcrumb" aria-label="Breadcrumb">
+          <nav class="flowdrop-navbar__breadcrumb" aria-label={nav.breadcrumbAriaLabel}>
             <ol class="flowdrop-navbar__breadcrumb-list">
               {#each breadcrumbs as breadcrumb, index (index)}
                 <li class="flowdrop-navbar__breadcrumb-item">
@@ -241,8 +245,8 @@
       <button
         class="flowdrop-navbar__settings-btn"
         onclick={() => (isSettingsOpen = true)}
-        title="Settings"
-        aria-label="Open settings"
+        title={nav.settingsTitle}
+        aria-label={nav.settingsAriaLabel}
       >
         <Icon icon="mdi:cog" />
       </button>

package/dist/components/NodeSidebar.svelte

@@ -13,6 +13,7 @@
   import { getCategoryLabel } from '../stores/categoriesStore.svelte.js';
   import { getUiSettings } from '../stores/settingsStore.svelte.js';
   import { extractConfigDefaults } from '../utils/nodeIds.js';
+  import { m } from '../messages/index.js';
 
   interface Props {
     nodes: NodeMetadata[];
@@ -168,7 +169,7 @@
   class:flowdrop-sidebar--collapsed={isCollapsed}
   class:flowdrop-sidebar--compact={getUiSettings().compactMode}
   style:width="{isCollapsed ? 0 : getUiSettings().sidebarWidth}px"
-  aria-label="Components sidebar"
+  aria-label={m().layout.componentsSidebar}
 >
   <!-- Search Section — visibility controlled by --fd-sidebar-search-display -->
   <div class="flowdrop-sidebar__search">
@@ -176,13 +177,13 @@
       <div class="flowdrop-join__item flowdrop-flex--1">
         <input
           type="text"
-          placeholder="Search components..."
+          placeholder={m().layout.searchComponents}
           class="flowdrop-input flowdrop-join__item flowdrop-w--full"
           bind:value={searchInput}
           oninput={handleSearchChange}
         />
       </div>
-      <button class="flowdrop-btn flowdrop-join__item" aria-label="Search components">
+      <button class="flowdrop-btn flowdrop-join__item" aria-label={m().layout.searchComponents}>
         <Icon icon="mdi:magnify" class="flowdrop-icon" />
       </button>
     </div>

package/dist/components/NodeStatusOverlay.svelte

@@ -17,6 +17,7 @@
     formatExecutionDuration,
     formatLastExecuted
   } from '../utils/nodeStatus.js';
+  import { m } from '../messages/index.js';
 
   interface Props {
     nodeId?: string;
@@ -79,6 +80,9 @@
   let shouldShow = $derived(
     executionInfo.status !== 'idle' || executionInfo.executionCount > 0 || executionInfo.isExecuting
   );
+
+  // Hoist the overlay branch — seven reads in the template.
+  const overlay = $derived(m().status.overlay);
 </script>
 
 {#if shouldShow}
@@ -98,9 +102,12 @@
 		"
     onmouseenter={() => (isHovered = true)}
     onmouseleave={() => (isHovered = false)}
-    title="{getStatusLabel(executionInfo.status)} - Executed {executionInfo.executionCount} times"
+    title={overlay.tooltip({
+      status: getStatusLabel(executionInfo.status),
+      count: executionInfo.executionCount
+    })}
     role="status"
-    aria-label="Node execution status: {getStatusLabel(executionInfo.status)}"
+    aria-label={overlay.ariaLabel({ status: getStatusLabel(executionInfo.status) })}
   >
     <!-- Status Display: [icon] [label] -->
     <div
@@ -130,18 +137,18 @@
     {#if showDetails && isHovered}
       <div class="node-status-overlay__details">
         <div class="node-status-overlay__detail-item">
-          <span class="node-status-overlay__detail-label">Status:</span>
+          <span class="node-status-overlay__detail-label">{overlay.statusLabel}</span>
           <span class="node-status-overlay__detail-value"
             >{getStatusLabel(executionInfo.status)}</span
           >
         </div>
         <div class="node-status-overlay__detail-item">
-          <span class="node-status-overlay__detail-label">Executions:</span>
+          <span class="node-status-overlay__detail-label">{overlay.executionsLabel}</span>
           <span class="node-status-overlay__detail-value">{executionInfo.executionCount}</span>
         </div>
         {#if executionInfo.lastExecuted}
           <div class="node-status-overlay__detail-item">
-            <span class="node-status-overlay__detail-label">Last Run:</span>
+            <span class="node-status-overlay__detail-label">{overlay.lastRunLabel}</span>
             <span class="node-status-overlay__detail-value"
               >{formatLastExecuted(executionInfo.lastExecuted)}</span
             >
@@ -149,7 +156,7 @@
         {/if}
         {#if executionInfo.lastExecutionDuration}
           <div class="node-status-overlay__detail-item">
-            <span class="node-status-overlay__detail-label">Duration:</span>
+            <span class="node-status-overlay__detail-label">{overlay.durationLabel}</span>
             <span class="node-status-overlay__detail-value"
               >{formatExecutionDuration(executionInfo.lastExecutionDuration)}</span
             >
@@ -157,7 +164,7 @@
         {/if}
         {#if executionInfo.lastError}
           <div class="node-status-overlay__detail-item node-status-overlay__detail-item--error">
-            <span class="node-status-overlay__detail-label">Error:</span>
+            <span class="node-status-overlay__detail-label">{overlay.errorLabel}</span>
             <span class="node-status-overlay__detail-value">{executionInfo.lastError}</span>
           </div>
         {/if}