@flowdrop/flowdrop 1.11.0 → 1.13.0

package/dist/components/playground/Playground.svelte.d.ts

@@ -1,29 +1,16 @@
 import type { Workflow } from '../../types/index.js';
 import type { EndpointConfig } from '../../config/endpoints.js';
 import type { PlaygroundMode, PlaygroundConfig } from '../../types/playground.js';
-/**
- * Component props
- */
 interface Props {
-    /** Target workflow ID */
     workflowId: string;
-    /** Pre-loaded workflow (optional, will be fetched if not provided) */
     workflow?: Workflow;
-    /** Display mode: embedded (panel) or standalone (page) */
     mode?: PlaygroundMode;
-    /** Resume a specific session */
     initialSessionId?: string;
-    /** API endpoint configuration */
     endpointConfig?: EndpointConfig;
-    /** Playground configuration options */
     config?: PlaygroundConfig;
-    /** Callback when playground is closed (for embedded mode) */
     onClose?: () => void;
-    /** Callback to toggle the pipeline panel (if undefined, toggle button is hidden) */
     onTogglePanel?: () => void;
-    /** Whether the pipeline panel is currently open (for toggle button active state) */
     isPipelinePanelOpen?: boolean;
-    /** When provided, session switches and creation navigate to a URL instead of mutating store state */
     onSessionNavigate?: (sessionId: string) => void;
 }
 declare const Playground: import("svelte").Component<Props, {}, "">;

package/dist/components/playground/PlaygroundStudio.svelte

@@ -1,48 +1,5 @@
-<!--
-  PlaygroundStudio Component
-
-  Drop-in embeddable split-pane layout: PipelinePanel (left, resizable) + Playground
-  chat (right). Provides the same integrated experience as the FlowDrop demo app with a
-  single import and zero layout glue code.
-
-  @example Basic usage — workflow fetched automatically
-  ```svelte
-  <script>
-    import { PlaygroundStudio, createEndpointConfig } from '@flowdrop/flowdrop/playground';
-    import '@flowdrop/flowdrop/styles';
-  </script>
-
-  <PlaygroundStudio
-    workflowId="wf-123"
-    endpointConfig={createEndpointConfig('/api/flowdrop')}
-  />
-  ```
-
-  @example With pre-loaded workflow and URL-based session routing
-  ```svelte
-  <script>
-    import { PlaygroundStudio, createEndpointConfig } from '@flowdrop/flowdrop/playground';
-
-    let { data } = $props();          // workflow from server load
-    let sessionId = $derived($page.params.sessionId);
-
-    function handleSessionNavigate(id) {
-      goto(`/playground/${id}`);
-    }
-  </script>
-
-  <PlaygroundStudio
-    workflowId={data.workflow.id}
-    workflow={data.workflow}
-    endpointConfig={createEndpointConfig('/api/flowdrop')}
-    initialSessionId={sessionId}
-    onSessionNavigate={handleSessionNavigate}
-  />
-  ```
--->
-
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import { onMount, untrack } from 'svelte';
   import Icon from '@iconify/svelte';
   import Playground from './Playground.svelte';
   import PipelinePanel from './PipelinePanel.svelte';
@@ -57,7 +14,7 @@
   } from '../../stores/playgroundStore.svelte.js';
   import { setEndpointConfig, workflowApi } from '../../services/api.js';
   import { logger } from '../../utils/logger.js';
-  import type { Workflow } from '../../types/index.js';
+  import type { Workflow, PipelineViewDef } from '../../types/index.js';
   import type { EndpointConfig } from '../../config/endpoints.js';
   import type { PlaygroundConfig, PlaygroundMode } from '../../types/playground.js';
 
@@ -84,6 +41,8 @@
     onSessionNavigate?: (sessionId: string) => void;
     /** Called when the playground is closed (embedded / modal mode) */
     onClose?: () => void;
+    /** Additional pipeline views injected by the consumer */
+    extraPipelineViews?: PipelineViewDef[];
   }
 
   let {
@@ -98,19 +57,18 @@
     initialPipelineWidth = 500,
     onSessionNavigate,
     onClose,
+    extraPipelineViews = [],
   }: Props = $props();
 
-  // svelte-ignore state_referenced_locally
   let resolvedWorkflow = $state<Workflow | null>(workflowProp ?? null);
-  // svelte-ignore state_referenced_locally
   let workflowLoading = $state(workflowProp === undefined);
   let workflowError = $state<string | null>(null);
 
   let splitEl = $state<HTMLElement | null>(null);
-  // svelte-ignore state_referenced_locally
   let pipelineWidth = $state(initialPipelineWidth);
   let isResizing = $state(false);
   let containerWidth = $state(0);
+  let dragContainerLeft = 0;
 
   $effect(() => {
     if (!splitEl) return;
@@ -121,6 +79,12 @@
     return () => observer.disconnect();
   });
 
+  $effect(() => {
+    if (containerWidth > 0) {
+      pipelineWidth = clampPipelineWidth(untrack(() => pipelineWidth));
+    }
+  });
+
   onMount(() => {
     pipelinePanelActions.init();
     if (initialPipelineOpen !== undefined) {
@@ -153,23 +117,36 @@
     }
   }
 
+  function clampPipelineWidth(w: number): number {
+    if (!containerWidth) return Math.max(w, 0);
+    return Math.min(Math.max(w, containerWidth - minChatWidth), containerWidth * 0.75);
+  }
+
   function handleResizerPointerDown(e: PointerEvent) {
+    if (splitEl) dragContainerLeft = splitEl.getBoundingClientRect().left;
     isResizing = true;
     (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
   }
 
   function handleResizerPointerMove(e: PointerEvent) {
-    if (!isResizing || !splitEl) return;
-    const rect = splitEl.getBoundingClientRect();
-    pipelineWidth = Math.min(
-      Math.max(e.clientX - rect.left, rect.width - minChatWidth),
-      rect.width * 0.75
-    );
+    if (!isResizing) return;
+    pipelineWidth = clampPipelineWidth(e.clientX - dragContainerLeft);
   }
 
   function handleResizerPointerUp() {
     isResizing = false;
   }
+
+  function handleResizerKeyDown(e: KeyboardEvent) {
+    const step = e.shiftKey ? 50 : 20;
+    if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      pipelineWidth = clampPipelineWidth(pipelineWidth - step);
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      pipelineWidth = clampPipelineWidth(pipelineWidth + step);
+    }
+  }
 </script>
 
 <div class="playground-studio" class:playground-studio--resizing={isResizing} style="--playground-studio-min-chat-width: {minChatWidth}px">
@@ -179,6 +156,15 @@
       {@const executions = getCurrentSession()?.executions ?? []}
 
       <div class="playground-studio__pipeline" style="width: {pipelineWidth}px;">
+        <button
+          type="button"
+          class="playground-studio__back-to-chat"
+          aria-label="Back to chat"
+          onclick={pipelinePanelActions.toggle}
+        >
+          <Icon icon="mdi:arrow-left" aria-hidden="true" />
+          <span>Back to chat</span>
+        </button>
         <PipelinePanel
           pipelineId={activeId}
           workflow={resolvedWorkflow}
@@ -188,10 +174,10 @@
           latestExecutionId={getLatestExecutionId()}
           onSelectExecution={(id) => playgroundActions.pinExecution(id)}
           refreshTrigger={getPipelineRefreshTrigger()}
+          extraViews={extraPipelineViews}
         />
       </div>
 
-      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
       <div
         class="playground-studio__resizer"
         class:playground-studio__resizer--active={isResizing}
@@ -200,11 +186,13 @@
         aria-valuenow={Math.round(pipelineWidth)}
         aria-valuemin={0}
         aria-valuemax={Math.round(containerWidth * 0.75)}
+        aria-label="Resize pipeline panel"
         tabindex="0"
         onpointerdown={handleResizerPointerDown}
         onpointermove={handleResizerPointerMove}
         onpointerup={handleResizerPointerUp}
         onpointercancel={handleResizerPointerUp}
+        onkeydown={handleResizerKeyDown}
       >
         <div class="playground-studio__resizer-handle"></div>
       </div>
@@ -271,12 +259,17 @@
     overflow: hidden;
   }
 
-  /* Pipeline pane — explicit width set via inline style */
+  /* Pipeline pane — explicit width driven by JS; clamping keeps it in bounds */
   .playground-studio__pipeline {
-    min-width: calc(100% - var(--playground-studio-min-chat-width));
-    max-width: 75%;
     overflow: hidden;
     flex-shrink: 0;
+    position: relative;
+  }
+
+  /* Mobile-only "back to chat" affordance. Hidden on wider viewports where
+     the ControlPanel's pipeline toggle remains reachable. */
+  .playground-studio__back-to-chat {
+    display: none;
   }
 
   /* Drag handle between the two panes */
@@ -351,9 +344,6 @@
   }
 
   @keyframes studio-spin {
-    from {
-      transform: rotate(0deg);
-    }
     to {
       transform: rotate(360deg);
     }
@@ -401,4 +391,66 @@
   .playground-studio__retry-btn:hover {
     background-color: var(--fd-primary-hover);
   }
+
+  /* ============================================================
+     Mobile layout (< 768px)
+     Switch from side-by-side panes to one-at-a-time fullscreen.
+     The pipeline panel, when open, covers the chat. Users toggle
+     between them via the pipeline panel button. The resizer is
+     hidden — at this width there's nothing to resize.
+     ============================================================ */
+  @media (max-width: 768px) {
+    .playground-studio__pipeline {
+      /* Override the JS-driven width — take the whole row */
+      width: 100% !important;
+      flex: 1 1 auto;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .playground-studio__resizer {
+      display: none;
+    }
+
+    /* When pipeline is open (chat is NOT solo), hide chat to give the
+       pipeline the full viewport. When pipeline closes, chat goes back
+       to full-width via the existing --solo class. */
+    .playground-studio__chat:not(.playground-studio__chat--solo) {
+      display: none;
+    }
+
+    .playground-studio__back-to-chat {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--fd-space-2xs);
+      align-self: flex-start;
+      margin: var(--fd-space-xs);
+      padding: var(--fd-space-2xs) var(--fd-space-md);
+      min-height: 2.5rem;
+      font-size: var(--fd-text-sm);
+      font-weight: 500;
+      font-family: inherit;
+      color: var(--fd-foreground);
+      background-color: var(--fd-card);
+      border: 1px solid var(--fd-border);
+      border-radius: var(--fd-radius-md);
+      cursor: pointer;
+      transition: background-color var(--fd-transition-fast);
+    }
+
+    .playground-studio__back-to-chat:hover {
+      background-color: var(--fd-muted);
+    }
+
+    .playground-studio__back-to-chat:focus-visible {
+      outline: 2px solid var(--fd-ring);
+      outline-offset: 2px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .playground-studio__back-to-chat {
+      transition: none;
+    }
+  }
 </style>

package/dist/components/playground/PlaygroundStudio.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Workflow } from '../../types/index.js';
+import type { Workflow, PipelineViewDef } from '../../types/index.js';
 import type { EndpointConfig } from '../../config/endpoints.js';
 import type { PlaygroundConfig, PlaygroundMode } from '../../types/playground.js';
 interface Props {
@@ -24,6 +24,8 @@ interface Props {
     onSessionNavigate?: (sessionId: string) => void;
     /** Called when the playground is closed (embedded / modal mode) */
     onClose?: () => void;
+    /** Additional pipeline views injected by the consumer */
+    extraPipelineViews?: PipelineViewDef[];
 }
 declare const PlaygroundStudio: import("svelte").Component<Props, {}, "">;
 type PlaygroundStudio = ReturnType<typeof PlaygroundStudio>;

package/dist/components/playground/messageDisplay.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Shared formatters / icon maps / label resolver for the message layout
+ * components. Pure functions only — i18n strings come in via the `roles`
+ * argument; the helper has no runtime dependency on the messages context.
+ */
+import type { PlaygroundMessage, PlaygroundMessageLevel, PlaygroundMessageRole } from '../../types/playground.js';
+import type { Messages } from '../../messages/types.js';
+export type RoleLabels = Messages['playground']['roles'];
+export declare function formatTimestamp(timestamp: string): string;
+export declare function formatDuration(ms: number): string;
+export declare function getLogLevelIcon(level: PlaygroundMessageLevel | undefined): string;
+export declare function getRoleIcon(role: PlaygroundMessageRole): string;
+/**
+ * Localised author label. Backend-supplied overrides win:
+ *   - user → metadata.userName (display name)
+ *   - log  → metadata.nodeLabel (human-readable node label)
+ * Anything else returns the role's i18n default.
+ */
+export declare function getRoleLabel(message: Pick<PlaygroundMessage, 'role' | 'metadata'>, roles: RoleLabels): string;

package/dist/components/playground/messageDisplay.js

@@ -0,0 +1,62 @@
+/**
+ * Shared formatters / icon maps / label resolver for the message layout
+ * components. Pure functions only — i18n strings come in via the `roles`
+ * argument; the helper has no runtime dependency on the messages context.
+ */
+export function formatTimestamp(timestamp) {
+    return new Date(timestamp).toLocaleTimeString('en-US', {
+        hour12: false,
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+    });
+}
+export function formatDuration(ms) {
+    return ms < 1000 ? `${ms}ms` : `${(ms / 1000).toFixed(2)}s`;
+}
+export function getLogLevelIcon(level) {
+    switch (level) {
+        case 'error':
+            return 'mdi:alert-circle';
+        case 'warning':
+            return 'mdi:alert';
+        case 'debug':
+            return 'mdi:bug';
+        default:
+            return 'mdi:information';
+    }
+}
+export function getRoleIcon(role) {
+    switch (role) {
+        case 'user':
+            return 'mdi:account';
+        case 'assistant':
+            return 'mdi:robot';
+        case 'system':
+            return 'mdi:cog';
+        case 'log':
+            return 'mdi:console';
+        default:
+            return 'mdi:message';
+    }
+}
+/**
+ * Localised author label. Backend-supplied overrides win:
+ *   - user → metadata.userName (display name)
+ *   - log  → metadata.nodeLabel (human-readable node label)
+ * Anything else returns the role's i18n default.
+ */
+export function getRoleLabel(message, roles) {
+    switch (message.role) {
+        case 'user':
+            return message.metadata?.userName ?? roles.you;
+        case 'assistant':
+            return roles.assistant;
+        case 'system':
+            return roles.system;
+        case 'log':
+            return message.metadata?.nodeLabel ?? roles.log;
+        default:
+            return roles.message;
+    }
+}

package/dist/components/playground/pipelineViewUtils.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { EndpointConfig } from '../../config/endpoints.js';
+import type { NodeExecutionStatus, KanbanColumnDef } from '../../types/index.js';
+export type NodeStatus = NodeExecutionStatus;
+export interface NodeStatusData {
+    status: string;
+    last_executed?: string | null;
+    execution_time?: number | null;
+    error?: string | null;
+}
+export declare function resolveStatus(raw: NodeStatusData | undefined): NodeStatus;
+/**
+ * Creates a reactive pipeline data fetcher.
+ * `endpointConfig` is used once to construct the API client — it must be stable.
+ * `getPipelineId` is called on every fetch so pipeline ID changes are picked up.
+ */
+export declare function createPipelineDataFetcher(getPipelineId: () => string, endpointConfig: EndpointConfig): {
+    readonly nodeStatusMap: Record<string, NodeStatusData>;
+    readonly kanbanConfig: KanbanColumnDef[] | null;
+    readonly isLoading: boolean;
+    readonly isError: boolean;
+    fetchData: () => Promise<void>;
+};

package/dist/components/playground/pipelineViewUtils.svelte.js

@@ -0,0 +1,77 @@
+import { EnhancedFlowDropApiClient } from '../../api/enhanced-client.js';
+import { logger } from '../../utils/logger.js';
+const KNOWN_STATUSES = new Set([
+    'idle', 'pending', 'running', 'paused', 'interrupted',
+    'completed', 'skipped', 'failed', 'cancelled'
+]);
+export function resolveStatus(raw) {
+    if (!raw)
+        return 'pending';
+    const s = raw.status || 'pending';
+    if (!KNOWN_STATUSES.has(s)) {
+        logger.warn(`[FlowDrop] Unknown node status from server: "${s}" — falling back to "pending"`);
+        return 'pending';
+    }
+    return s;
+}
+/**
+ * Creates a reactive pipeline data fetcher.
+ * `endpointConfig` is used once to construct the API client — it must be stable.
+ * `getPipelineId` is called on every fetch so pipeline ID changes are picked up.
+ */
+export function createPipelineDataFetcher(getPipelineId, endpointConfig) {
+    const client = new EnhancedFlowDropApiClient(endpointConfig);
+    let nodeStatusMap = $state({});
+    let kanbanConfig = $state(null);
+    let isLoading = $state(false);
+    let isError = $state(false);
+    async function fetchData() {
+        try {
+            isLoading = true;
+            isError = false;
+            const data = await client.getPipelineData(getPipelineId());
+            const map = {};
+            for (const [nodeId, info] of Object.entries(data.node_statuses)) {
+                map[nodeId] = {
+                    status: info.status,
+                    last_executed: info.last_executed,
+                    execution_time: info.execution_time,
+                    error: info.error,
+                };
+            }
+            nodeStatusMap = map;
+            if (data.kanban_config?.columns) {
+                // Server sends statuses as string[]; trust the server and cast at this
+                // boundary. resolveStatus() handles unknown values at read time.
+                kanbanConfig = data.kanban_config.columns.map((col) => ({
+                    key: col.key,
+                    label: col.label,
+                    statuses: col.statuses,
+                    icon: col.icon,
+                    color: col.color,
+                }));
+            }
+        }
+        catch {
+            isError = true;
+        }
+        finally {
+            isLoading = false;
+        }
+    }
+    return {
+        get nodeStatusMap() {
+            return nodeStatusMap;
+        },
+        get kanbanConfig() {
+            return kanbanConfig;
+        },
+        get isLoading() {
+            return isLoading;
+        },
+        get isError() {
+            return isError;
+        },
+        fetchData
+    };
+}

package/dist/form/autocomplete.d.ts

@@ -0,0 +1 @@
+export { default as FormAutocomplete } from '../components/form/FormAutocomplete.svelte';

package/dist/form/autocomplete.js

@@ -0,0 +1 @@
+export { default as FormAutocomplete } from '../components/form/FormAutocomplete.svelte';

package/dist/form/index.d.ts

@@ -75,3 +75,20 @@ export type { FieldSchema, FieldType, FieldFormat, FieldOption, OneOfItem, Schem
 export { isFieldOptionArray, isOneOfArray, normalizeOptions, oneOfToOptions, getSchemaOptions } from '../components/form/types.js';
 export { fieldComponentRegistry, hiddenFieldMatcher, checkboxGroupMatcher, enumSelectMatcher, textareaMatcher, rangeMatcher, textFieldMatcher, numberFieldMatcher, toggleMatcher, selectOptionsMatcher, arrayMatcher } from './fieldRegistry.js';
 export type { FieldComponentProps, FieldMatcher, FieldMatcherRegistration, FieldComponent, FieldComponentRegistration } from './fieldRegistry.js';
+/**
+ * Use with Svelte's `getContext` inside custom field components registered
+ * via `fieldComponentRegistry` to read sibling form field values.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { getContext } from 'svelte';
+ *   import { FORM_VALUES_KEY, type FormValuesGetter } from '@flowdrop/flowdrop/form';
+ *
+ *   const getFormValues = getContext<FormValuesGetter | undefined>(FORM_VALUES_KEY);
+ *   const account = $derived(getFormValues?.()['account']);
+ * </script>
+ * ```
+ */
+export declare const FORM_VALUES_KEY: "flowdrop:getFormValues";
+export type FormValuesGetter = () => Record<string, unknown>;

package/dist/form/index.js

@@ -89,3 +89,22 @@ export {
 fieldComponentRegistry, 
 // Built-in matchers for custom components
 hiddenFieldMatcher, checkboxGroupMatcher, enumSelectMatcher, textareaMatcher, rangeMatcher, textFieldMatcher, numberFieldMatcher, toggleMatcher, selectOptionsMatcher, arrayMatcher } from './fieldRegistry.js';
+// ============================================================================
+// Context keys (for custom field components)
+// ============================================================================
+/**
+ * Use with Svelte's `getContext` inside custom field components registered
+ * via `fieldComponentRegistry` to read sibling form field values.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { getContext } from 'svelte';
+ *   import { FORM_VALUES_KEY, type FormValuesGetter } from '@flowdrop/flowdrop/form';
+ *
+ *   const getFormValues = getContext<FormValuesGetter | undefined>(FORM_VALUES_KEY);
+ *   const account = $derived(getFormValues?.()['account']);
+ * </script>
+ * ```
+ */
+export const FORM_VALUES_KEY = 'flowdrop:getFormValues';

package/dist/messages/defaults.d.ts

@@ -310,6 +310,11 @@ export declare const defaultMessages: {
             }) => string;
             readonly executionDuration: "Execution duration";
         };
+        readonly messageAnnotations: {
+            readonly hierarchyOf: ({ path }: {
+                path: string;
+            }) => string;
+        };
         readonly sessions: {
             readonly header: "Sessions";
             readonly newSession: "New Session";
@@ -328,6 +333,30 @@ export declare const defaultMessages: {
                 n: number;
             }) => string;
         };
+        readonly executionConsole: {
+            readonly header: "Execution";
+            readonly noExecutionTitle: "No execution yet";
+            readonly noExecutionText: "Create or select a session below, then run your workflow to see execution output here.";
+            readonly readyTitle: "Ready to run";
+            readonly readyText: "Use the controls below to start the workflow. Output and interactive prompts will appear here.";
+            readonly newSession: "New session";
+        };
+        readonly controlPanel: {
+            readonly sessionsLabel: "Sessions";
+            readonly noSession: "No session";
+            readonly switchSession: "Switch session";
+            readonly newSession: "New session";
+            readonly pipeline: "Pipeline";
+            readonly showPipeline: "Show pipeline";
+            readonly hidePipeline: "Hide pipeline";
+            readonly refresh: "Refresh";
+            readonly refreshTitle: "Refresh status";
+            readonly logs: "Logs";
+            readonly showLogs: "Show log messages";
+            readonly hideLogs: "Hide log messages";
+            readonly deleteSession: "Delete session";
+            readonly messageStreamLabel: "Execution output";
+        };
     };
     readonly nodes: {
         readonly notes: {

package/dist/messages/defaults.js

@@ -288,6 +288,12 @@ export const defaultMessages = {
             nodeId: ({ id }) => `Node ID: ${id}`,
             executionDuration: 'Execution duration'
         },
+        // ARIA labels for message annotations. The hierarchy trail names the
+        // actual path so AT users hear "From: ForEach Loop / Greeter" rather
+        // than a generic "hierarchy".
+        messageAnnotations: {
+            hierarchyOf: ({ path }) => `From: ${path}`
+        },
         sessions: {
             header: 'Sessions',
             newSession: 'New Session',
@@ -300,6 +306,30 @@ export const defaultMessages = {
             minutesAgo: ({ n }) => `${n}m ago`,
             hoursAgo: ({ n }) => `${n}h ago`,
             daysAgo: ({ n }) => `${n}d ago`
+        },
+        executionConsole: {
+            header: 'Execution',
+            noExecutionTitle: 'No execution yet',
+            noExecutionText: 'Create or select a session below, then run your workflow to see execution output here.',
+            readyTitle: 'Ready to run',
+            readyText: 'Use the controls below to start the workflow. Output and interactive prompts will appear here.',
+            newSession: 'New session'
+        },
+        controlPanel: {
+            sessionsLabel: 'Sessions',
+            noSession: 'No session',
+            switchSession: 'Switch session',
+            newSession: 'New session',
+            pipeline: 'Pipeline',
+            showPipeline: 'Show pipeline',
+            hidePipeline: 'Hide pipeline',
+            refresh: 'Refresh',
+            refreshTitle: 'Refresh status',
+            logs: 'Logs',
+            showLogs: 'Show log messages',
+            hideLogs: 'Hide log messages',
+            deleteSession: 'Delete session',
+            messageStreamLabel: 'Execution output'
         }
     },
     nodes: {