@nuraly/lumenui 0.1.0

package/dist/src/components/canvas/workflow-canvas.component.js

@@ -0,0 +1,1468 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { CanvasType, ExecutionStatus, WorkflowNodeType, TriggerConnectionState, isPersistentTriggerNode, NODE_TEMPLATES, } from './workflow-canvas.types.js';
+import { styles } from './workflow-canvas.style.js';
+import './workflow-node.component.js';
+import { ChatbotCoreController } from '../chatbot/core/chatbot-core.controller.js';
+import { ChatbotSender } from '../chatbot/chatbot.types.js';
+import { WorkflowSocketProvider } from '../chatbot/providers/workflow-socket-provider.js';
+// Templates
+import { renderPaletteTemplate, renderConfigPanelTemplate, } from './templates/index.js';
+// Base class
+import { BaseCanvasElement } from './base-canvas.component.js';
+// Utils
+import { getAllAvailableVariablesWithDynamic } from './utils/variable-resolver.js';
+// Constants
+import { WORKFLOW_NODE_WIDTH, WORKFLOW_NODE_HEIGHT, WORKFLOW_NOTE_DEFAULT_WIDTH, WORKFLOW_NOTE_DEFAULT_HEIGHT, TABLE_DEFAULT_WIDTH, TABLE_DEFAULT_HEIGHT, TABLE_MIN_WIDTH, TABLE_MIN_HEIGHT, TRIGGER_POLL_INTERVAL_MS, FRAME_DEFAULT_LABEL, } from './canvas.constants.js';
+/**
+ * Workflow canvas component for visual workflow editing
+ *
+ * @element workflow-canvas
+ * @fires workflow-changed - When workflow is modified
+ * @fires node-selected - When a node is selected
+ * @fires node-configured - When a node configuration is requested
+ */
+let WorkflowCanvasElement = class WorkflowCanvasElement extends BaseCanvasElement {
+    get executionId() {
+        return this.currentExecutionId;
+    }
+    set executionId(value) {
+        const oldValue = this.currentExecutionId;
+        this.currentExecutionId = value;
+        this.requestUpdate('executionId', oldValue);
+        if (value && value !== oldValue) {
+            this.fetchExecutionData(value);
+        }
+        else if (!value) {
+            this.nodeExecutionData.clear();
+        }
+    }
+    // ==================== Abstract Method Implementations ====================
+    normalizeNodes(nodes) {
+        return nodes.map(node => (Object.assign(Object.assign({}, node), { status: node.status
+                ? node.status.toUpperCase()
+                : undefined })));
+    }
+    getNodeDimensionsForContainment(_node) {
+        return { width: WORKFLOW_NODE_WIDTH, height: WORKFLOW_NODE_HEIGHT };
+    }
+    shouldExcludeFromContainment(node) {
+        return node.type === WorkflowNodeType.NOTE;
+    }
+    onWorkflowLoaded(value, oldValue) {
+        // Auto-open chat preview for CHAT_START nodes with alwaysOpenPlan enabled on load
+        if (!oldValue || oldValue.id !== value.id) {
+            const chatStartNode = value.nodes.find(node => { var _a; return node.type === WorkflowNodeType.CHAT_START && ((_a = node.configuration) === null || _a === void 0 ? void 0 : _a.alwaysOpenPlan) === true; });
+            if (chatStartNode && this.previewNodeId !== chatStartNode.id) {
+                this.updateComplete.then(() => {
+                    this.handleNodePreview({ detail: { node: chatStartNode } });
+                });
+            }
+        }
+    }
+    getNoteContentKey(_node) {
+        return 'noteContent';
+    }
+    getNoteSizeKeys() {
+        return { widthKey: 'noteWidth', heightKey: 'noteHeight' };
+    }
+    getDefaultNoteSize() {
+        return { width: WORKFLOW_NOTE_DEFAULT_WIDTH, height: WORKFLOW_NOTE_DEFAULT_HEIGHT };
+    }
+    getCanvasType() {
+        return this.canvasType;
+    }
+    // ==================== Hook Overrides ====================
+    onNodeMouseDownExtra(node) {
+        var _a;
+        if (node.type === WorkflowNodeType.CHAT_START &&
+            ((_a = node.configuration) === null || _a === void 0 ? void 0 : _a.alwaysOpenPlan) === true &&
+            this.previewNodeId !== node.id) {
+            this.handleNodePreview({ detail: { node } });
+        }
+    }
+    onConnected() {
+        this.addEventListener('test-workflow-request', this.handleTestWorkflowRequest);
+        this.startTriggerPollingIfNeeded();
+    }
+    onDisconnected() {
+        this.removeEventListener('test-workflow-request', this.handleTestWorkflowRequest);
+        this.cleanupChatPreview();
+        this.stopTriggerPolling();
+        this._cleanupPaletteTouchDrag();
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('workflow')) {
+            this.startTriggerPollingIfNeeded();
+        }
+    }
+    // ==================== Nodes with Statuses ====================
+    getNodesForRendering() {
+        return this.getNodesWithStatuses();
+    }
+    getNodesWithStatuses() {
+        const hasActiveExecution = Object.keys(this.nodeStatuses).length > 0;
+        return this.workflow.nodes.map(node => {
+            const activity = this.agentActivity[node.id];
+            const baseNode = Object.assign(Object.assign({}, node), { agentActivity: (activity === null || activity === void 0 ? void 0 : activity.active) ? activity : undefined });
+            if (this.nodeStatuses[node.id]) {
+                return Object.assign(Object.assign({}, baseNode), { status: this.nodeStatuses[node.id].toUpperCase() });
+            }
+            else if (hasActiveExecution) {
+                return Object.assign(Object.assign({}, baseNode), { status: undefined });
+            }
+            else {
+                return baseNode;
+            }
+        });
+    }
+    // ==================== Trigger Status Polling ====================
+    hasPersistentTriggerNodes() {
+        return this.workflow.nodes.some(n => isPersistentTriggerNode(n.type));
+    }
+    startTriggerPollingIfNeeded() {
+        if (this.hasPersistentTriggerNodes() && !this.triggerPollingInterval) {
+            this.fetchTriggerStatuses();
+            this.triggerPollingInterval = setInterval(() => this.fetchTriggerStatuses(), TRIGGER_POLL_INTERVAL_MS);
+        }
+        else if (!this.hasPersistentTriggerNodes() && this.triggerPollingInterval) {
+            this.stopTriggerPolling();
+        }
+    }
+    stopTriggerPolling() {
+        if (this.triggerPollingInterval) {
+            clearInterval(this.triggerPollingInterval);
+            this.triggerPollingInterval = null;
+        }
+    }
+    fetchTriggerStatuses() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.workflow.id)
+                return;
+            try {
+                const triggersRes = yield fetch(`/api/v1/workflows/${this.workflow.id}/trigger-defs`);
+                if (!triggersRes.ok)
+                    return;
+                const triggers = yield triggersRes.json();
+                const persistentTypes = new Set([
+                    'TELEGRAM_BOT', 'SLACK_SOCKET', 'DISCORD_BOT', 'WHATSAPP_WEBHOOK', 'CUSTOM_WEBSOCKET',
+                ]);
+                const persistentTriggers = triggers.filter(t => persistentTypes.has(t.type));
+                const statusPromises = persistentTriggers.map((trigger) => __awaiter(this, void 0, void 0, function* () {
+                    try {
+                        const statusRes = yield fetch(`/api/v1/triggers/${trigger.id}/status`);
+                        if (!statusRes.ok)
+                            return { trigger, status: null };
+                        const status = yield statusRes.json();
+                        return { trigger, status };
+                    }
+                    catch (_a) {
+                        return { trigger, status: null };
+                    }
+                }));
+                const results = yield Promise.all(statusPromises);
+                const newStatuses = new Map();
+                for (const result of results) {
+                    const { trigger, status } = result;
+                    const matchingNode = this.workflow.nodes.find(n => n.type === trigger.type);
+                    if (matchingNode) {
+                        newStatuses.set(matchingNode.id, {
+                            triggerId: trigger.id,
+                            connectionState: ((status === null || status === void 0 ? void 0 : status.connectionState) || 'DISCONNECTED'),
+                            health: status === null || status === void 0 ? void 0 : status.health,
+                            messagesReceived: status === null || status === void 0 ? void 0 : status.messagesReceived,
+                            lastMessageAt: status === null || status === void 0 ? void 0 : status.lastMessageAt,
+                            stateReason: status === null || status === void 0 ? void 0 : status.stateReason,
+                            webhookUrl: trigger.webhookUrl,
+                            inDevMode: status === null || status === void 0 ? void 0 : status.inDevMode,
+                        });
+                    }
+                }
+                this.triggerStatuses = newStatuses;
+                this.requestUpdate();
+            }
+            catch (_a) {
+                // Silently fail - trigger status is non-critical
+            }
+        });
+    }
+    activateTrigger(triggerId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                yield fetch(`/api/v1/triggers/${triggerId}/activate`, { method: 'POST' });
+            }
+            catch (_a) {
+                // Silently fail
+            }
+            yield this.fetchTriggerStatuses();
+        });
+    }
+    deactivateTrigger(triggerId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                yield fetch(`/api/v1/triggers/${triggerId}/deactivate`, { method: 'POST' });
+            }
+            catch (_a) {
+                // Silently fail
+            }
+            yield this.fetchTriggerStatuses();
+        });
+    }
+    createAndActivateTrigger(nodeType, config) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (!((_a = this.workflow) === null || _a === void 0 ? void 0 : _a.id))
+                return undefined;
+            try {
+                const createRes = yield fetch(`/api/v1/workflows/${this.workflow.id}/trigger-defs`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        name: `${nodeType} trigger`,
+                        type: nodeType,
+                        configuration: JSON.stringify(config),
+                    }),
+                });
+                if (!createRes.ok)
+                    return undefined;
+                const trigger = yield createRes.json();
+                // Activate the trigger
+                try {
+                    yield fetch(`/api/v1/triggers/${trigger.id}/activate`, { method: 'POST' });
+                }
+                catch (_b) {
+                    // Activation may fail but trigger is created
+                }
+                // Always refresh statuses so UI updates
+                yield this.fetchTriggerStatuses();
+                return trigger.id;
+            }
+            catch (_c) {
+                yield this.fetchTriggerStatuses();
+                return undefined;
+            }
+        });
+    }
+    toggleDevMode(triggerId, enable) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                yield fetch(`/api/v1/triggers/${triggerId}/dev-mode`, {
+                    method: enable ? 'POST' : 'DELETE',
+                });
+            }
+            catch (_a) {
+                // Silently fail
+            }
+            yield this.fetchTriggerStatuses();
+        });
+    }
+    // ==================== Chat Preview ====================
+    handleNodePreview(e) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const { node } = e.detail;
+            if (this.previewNodeId === node.id) {
+                this.closePreviewPanel();
+            }
+            else {
+                yield this.cleanupChatPreview();
+                this.previewNodeId = node.id;
+                if (node.type === WorkflowNodeType.CHAT_START && ((_a = this.workflow) === null || _a === void 0 ? void 0 : _a.id)) {
+                    yield this.initializeChatPreview(this.workflow.id, node.configuration);
+                }
+            }
+        });
+    }
+    initializeChatPreview(workflowId, nodeConfig) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                this.chatPreviewProvider = new WorkflowSocketProvider();
+                yield this.connectChatPreviewSocket(workflowId);
+                this.setupExecutionSocketListeners();
+                this.createChatPreviewController(nodeConfig);
+                console.log('[Canvas] Chat preview initialized for workflow:', workflowId);
+            }
+            catch (error) {
+                console.error('[Canvas] Failed to initialize chat preview:', error);
+                this.chatPreviewController = null;
+                this.chatPreviewProvider = null;
+            }
+        });
+    }
+    connectChatPreviewSocket(workflowId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const socketUrl = typeof window !== 'undefined' ? window.location.origin : 'http://localhost:8000';
+            yield this.chatPreviewProvider.connect({
+                workflowId,
+                socketUrl,
+                socketPath: '/socket.io/workflow',
+                triggerEndpoint: '/api/v1/workflows/{workflowId}/trigger/chat',
+                responseTimeout: 60000,
+                onMessage: (message) => {
+                    if (this.chatPreviewController) {
+                        this.chatPreviewController.addMessage({
+                            id: `bot-${Date.now()}`,
+                            sender: ChatbotSender.Bot,
+                            text: message,
+                            timestamp: new Date().toISOString(),
+                        });
+                    }
+                },
+            });
+        });
+    }
+    setupExecutionSocketListeners() {
+        const socket = this.chatPreviewProvider.getSocket();
+        if (!socket)
+            return;
+        socket.on('execution:started', (event) => {
+            var _a;
+            const executionId = ((_a = event.data) === null || _a === void 0 ? void 0 : _a.executionId) || event.executionId;
+            if (executionId) {
+                this.currentExecutionId = executionId;
+                this.nodeExecutionData.clear();
+            }
+            this.nodeStatuses = {};
+        });
+        socket.on('execution:node-started', (event) => {
+            var _a;
+            const nodeId = ((_a = event.data) === null || _a === void 0 ? void 0 : _a.nodeId) || event.nodeId;
+            const data = event.data || event;
+            if (nodeId) {
+                this.nodeStatuses = Object.assign(Object.assign({}, this.nodeStatuses), { [nodeId]: 'RUNNING' });
+                this.nodeExecutionData.set(nodeId, {
+                    id: data.nodeExecutionId || nodeId,
+                    nodeId,
+                    status: 'running',
+                    inputData: data.inputData,
+                    startedAt: data.startedAt || new Date().toISOString(),
+                });
+                this.requestUpdate();
+            }
+        });
+        socket.on('execution:node-completed', (event) => {
+            var _a;
+            const nodeId = ((_a = event.data) === null || _a === void 0 ? void 0 : _a.nodeId) || event.nodeId;
+            const data = event.data || event;
+            if (nodeId) {
+                this.nodeStatuses = Object.assign(Object.assign({}, this.nodeStatuses), { [nodeId]: 'COMPLETED' });
+                const existing = this.nodeExecutionData.get(nodeId) || { id: nodeId, nodeId, status: 'completed' };
+                this.nodeExecutionData.set(nodeId, Object.assign(Object.assign({}, existing), { status: 'completed', outputData: data.outputData, completedAt: data.completedAt || new Date().toISOString(), durationMs: data.durationMs }));
+                this.requestUpdate();
+            }
+        });
+        socket.on('execution:node-failed', (event) => {
+            var _a;
+            const nodeId = ((_a = event.data) === null || _a === void 0 ? void 0 : _a.nodeId) || event.nodeId;
+            const data = event.data || event;
+            if (nodeId) {
+                this.nodeStatuses = Object.assign(Object.assign({}, this.nodeStatuses), { [nodeId]: 'FAILED' });
+                const existing = this.nodeExecutionData.get(nodeId) || { id: nodeId, nodeId, status: 'failed' };
+                this.nodeExecutionData.set(nodeId, Object.assign(Object.assign({}, existing), { status: 'failed', errorMessage: data.errorMessage || data.error, completedAt: data.completedAt || new Date().toISOString(), durationMs: data.durationMs }));
+                this.requestUpdate();
+            }
+        });
+    }
+    createChatPreviewController(nodeConfig) {
+        const enableFileUpload = (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.enableFileUpload) === true;
+        console.log('[Canvas] Creating chat controller with config:', { enableFileUpload, nodeConfig });
+        this.chatPreviewController = new ChatbotCoreController({
+            provider: this.chatPreviewProvider,
+            enableFileUpload,
+            ui: {
+                onStateChange: () => {
+                    this.requestUpdate();
+                },
+            },
+        });
+    }
+    cleanupChatPreview() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.chatPreviewProvider) {
+                try {
+                    yield this.chatPreviewProvider.disconnect();
+                }
+                catch (error) {
+                    console.error('[Canvas] Error disconnecting chat preview:', error);
+                }
+                this.chatPreviewProvider = null;
+            }
+            this.chatPreviewController = null;
+        });
+    }
+    // ==================== HTTP Preview ====================
+    sendHttpPreviewRequest() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const previewNode = this.getPreviewNode();
+            if (!previewNode || !((_a = this.workflow) === null || _a === void 0 ? void 0 : _a.id))
+                return;
+            this.httpPreviewLoading = true;
+            this.httpPreviewError = '';
+            this.httpPreviewResponse = '';
+            this.nodeStatuses = {};
+            try {
+                let body;
+                try {
+                    body = JSON.parse(this.httpPreviewBody);
+                }
+                catch (_b) {
+                    throw new Error('Invalid JSON in request body');
+                }
+                const baseUrl = typeof window !== 'undefined' ? window.location.origin : 'http://localhost:8000';
+                const triggerUrl = `${baseUrl}/api/v1/workflows/${this.workflow.id}/trigger/http`;
+                console.log('[Canvas] Sending HTTP preview request:', triggerUrl, body);
+                const response = yield fetch(triggerUrl, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(body),
+                });
+                const executionIdHeader = response.headers.get('X-Execution-Id');
+                let responseData;
+                try {
+                    responseData = yield response.json();
+                }
+                catch (_c) {
+                    responseData = yield response.text();
+                }
+                if (!response.ok) {
+                    throw new Error(responseData.message || responseData || `HTTP ${response.status}`);
+                }
+                this.httpPreviewResponse = JSON.stringify({
+                    status: response.status,
+                    executionId: executionIdHeader,
+                    data: responseData,
+                }, null, 2);
+                if (executionIdHeader) {
+                    this.currentExecutionId = executionIdHeader;
+                    this.fetchExecutionData(executionIdHeader);
+                }
+            }
+            catch (error) {
+                console.error('[Canvas] HTTP preview error:', error);
+                this.httpPreviewError = error instanceof Error ? error.message : String(error);
+            }
+            finally {
+                this.httpPreviewLoading = false;
+            }
+        });
+    }
+    resetHttpPreview() {
+        this.httpPreviewBody = '{\n  \n}';
+        this.httpPreviewResponse = '';
+        this.httpPreviewError = '';
+        this.httpPreviewLoading = false;
+    }
+    closePreviewPanel() {
+        this.previewNodeId = null;
+        this.cleanupChatPreview();
+        this.resetHttpPreview();
+    }
+    handleNodeTrigger(e) {
+        const { node } = e.detail;
+        if (isPersistentTriggerNode(node.type)) {
+            const status = this.triggerStatuses.get(node.id);
+            if (status) {
+                const isActive = status.connectionState === TriggerConnectionState.CONNECTED
+                    || status.connectionState === TriggerConnectionState.CONNECTING;
+                if (isActive) {
+                    this.deactivateTrigger(status.triggerId);
+                }
+                else {
+                    this.activateTrigger(status.triggerId);
+                }
+            }
+            this.dispatchEvent(new CustomEvent('trigger-toggle', {
+                detail: { node, triggerStatus: status },
+                bubbles: true,
+                composed: true,
+            }));
+            return;
+        }
+        console.log('[Canvas] Node trigger clicked:', node.name, node.type);
+        this.dispatchEvent(new CustomEvent('workflow-trigger', {
+            detail: { node },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleNodeDblClick(e) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (this.disabled)
+                return;
+            const { node } = e.detail;
+            // For NOTE nodes, enter inline edit mode
+            if (node.type === WorkflowNodeType.NOTE) {
+                if (this.readonly)
+                    return;
+                this.editingNoteId = node.id;
+                if (this.collaborative) {
+                    this.collaborationController.broadcastTypingStart(node.id);
+                }
+                this.updateComplete.then(() => {
+                    var _a, _b;
+                    const nodeEl = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`workflow-node[data-node-id="${node.id}"]`);
+                    const textarea = (_b = nodeEl === null || nodeEl === void 0 ? void 0 : nodeEl.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.note-textarea');
+                    if (textarea) {
+                        textarea.focus();
+                        textarea.select();
+                    }
+                });
+                return;
+            }
+            // Open configuration panel
+            this.configuredNode = node;
+            // Fetch dynamic variables
+            this.loadingVariables = true;
+            this.dynamicVariables = [];
+            if ((_a = this.workflow) === null || _a === void 0 ? void 0 : _a.id) {
+                try {
+                    const vars = yield getAllAvailableVariablesWithDynamic(this.workflow, node.id, '');
+                    this.dynamicVariables = vars;
+                }
+                catch (error) {
+                    console.warn('[WorkflowCanvas] Failed to fetch dynamic variables:', error);
+                }
+                const hasNodeStatus = Object.keys(this.nodeStatuses).length > 0;
+                const hasExecutionData = this.nodeExecutionData.size > 0;
+                if (hasNodeStatus && !hasExecutionData && !this.currentExecutionId) {
+                    try {
+                        const response = yield fetch(`/api/v1/workflows/${this.workflow.id}/latest-execution`);
+                        if (response.ok) {
+                            const execution = yield response.json();
+                            if (execution === null || execution === void 0 ? void 0 : execution.id) {
+                                this.currentExecutionId = execution.id;
+                                yield this.fetchExecutionData(execution.id);
+                            }
+                        }
+                    }
+                    catch (error) {
+                        console.warn('[WorkflowCanvas] Failed to fetch latest execution:', error);
+                    }
+                }
+            }
+            this.loadingVariables = false;
+            this.dispatchEvent(new CustomEvent('node-configured', {
+                detail: { node },
+                bubbles: true,
+                composed: true,
+            }));
+        });
+    }
+    handleNoteSettings(e) {
+        const { node } = e.detail;
+        this.configuredNode = node;
+    }
+    // ==================== Execution Data ====================
+    setExecutionId(executionId) {
+        this.currentExecutionId = executionId;
+        if (!executionId) {
+            this.nodeExecutionData.clear();
+            this.requestUpdate();
+        }
+    }
+    updateNodeExecution(nodeExecution) {
+        this.nodeExecutionData.set(nodeExecution.nodeId, nodeExecution);
+        this.requestUpdate();
+    }
+    clearExecutionData() {
+        this.currentExecutionId = null;
+        this.nodeExecutionData.clear();
+        this.requestUpdate();
+    }
+    fetchExecutionData(executionId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (!executionId)
+                return;
+            try {
+                const response = yield fetch(`/api/v1/workflows/${(_a = this.workflow) === null || _a === void 0 ? void 0 : _a.id}/executions/${executionId}/nodes`);
+                if (!response.ok) {
+                    const altResponse = yield fetch(`/api/v1/executions/${executionId}/nodes`);
+                    if (!altResponse.ok) {
+                        console.warn('[WorkflowCanvas] Failed to fetch node executions');
+                        return;
+                    }
+                    const nodeExecutions = yield altResponse.json();
+                    this.processNodeExecutions(nodeExecutions);
+                    return;
+                }
+                const nodeExecutions = yield response.json();
+                this.processNodeExecutions(nodeExecutions);
+            }
+            catch (error) {
+                console.warn('[WorkflowCanvas] Failed to fetch execution data:', error);
+            }
+        });
+    }
+    processNodeExecutions(nodeExecutions) {
+        var _a;
+        this.nodeExecutionData.clear();
+        for (const nodeExec of nodeExecutions) {
+            let inputData = nodeExec.inputData;
+            let outputData = nodeExec.outputData;
+            try {
+                if (typeof inputData === 'string')
+                    inputData = JSON.parse(inputData);
+            }
+            catch ( /* keep as string */_b) { /* keep as string */ }
+            try {
+                if (typeof outputData === 'string')
+                    outputData = JSON.parse(outputData);
+            }
+            catch ( /* keep as string */_c) { /* keep as string */ }
+            this.nodeExecutionData.set(nodeExec.nodeId, {
+                id: nodeExec.id,
+                nodeId: nodeExec.nodeId,
+                status: (_a = nodeExec.status) === null || _a === void 0 ? void 0 : _a.toLowerCase(),
+                inputData,
+                outputData,
+                errorMessage: nodeExec.errorMessage,
+                startedAt: nodeExec.startedAt,
+                completedAt: nodeExec.completedAt,
+                durationMs: nodeExec.durationMs,
+            });
+        }
+        this.requestUpdate();
+    }
+    handleRetryNode(nodeId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (!this.currentExecutionId || !((_a = this.workflow) === null || _a === void 0 ? void 0 : _a.id))
+                return;
+            try {
+                const response = yield fetch(`/api/v1/workflows/${this.workflow.id}/executions/${this.currentExecutionId}/nodes/${nodeId}/retry`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                });
+                if (!response.ok) {
+                    throw new Error(`Retry failed: ${response.statusText}`);
+                }
+                this.dispatchEvent(new CustomEvent('node-retry', {
+                    detail: { executionId: this.currentExecutionId, nodeId },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+            catch (error) {
+                console.error('[WorkflowCanvas] Failed to retry node:', error);
+            }
+        });
+    }
+    handleTableResizeStart(e) {
+        const { node, event } = e.detail;
+        this.startTableResize(node, event);
+    }
+    startTableResize(node, event) {
+        const config = node.configuration || {};
+        this.tableResizeState = {
+            nodeId: node.id,
+            startX: event.clientX,
+            startY: event.clientY,
+            startWidth: config.tableWidth || TABLE_DEFAULT_WIDTH,
+            startHeight: config.tableHeight || TABLE_DEFAULT_HEIGHT,
+        };
+        document.addEventListener('mousemove', this.handleTableResizeDrag);
+        document.addEventListener('mouseup', this.stopTableResize);
+    }
+    // ==================== Palette ====================
+    handlePaletteItemDrag(e, type) {
+        var _a;
+        (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.setData('application/workflow-node-type', type);
+    }
+    _cleanupPaletteTouchDrag() {
+        document.removeEventListener('touchmove', this._handlePaletteTouchMove);
+        document.removeEventListener('touchend', this._handlePaletteTouchEnd);
+        document.removeEventListener('touchcancel', this._handlePaletteTouchEnd);
+        if (this._touchDragGhost) {
+            this._touchDragGhost.remove();
+            this._touchDragGhost = null;
+        }
+        this._touchDragType = null;
+    }
+    handlePaletteItemTouchStart(e, type) {
+        if (e.touches.length !== 1)
+            return;
+        e.preventDefault();
+        this._touchDragType = type;
+        // Create ghost element
+        const touch = e.touches[0];
+        const ghost = document.createElement('div');
+        const template = NODE_TEMPLATES.find(t => t.type === type);
+        ghost.textContent = (template === null || template === void 0 ? void 0 : template.name) || type;
+        Object.assign(ghost.style, {
+            position: 'fixed',
+            left: `${touch.clientX - 40}px`,
+            top: `${touch.clientY - 20}px`,
+            padding: '8px 16px',
+            background: (template === null || template === void 0 ? void 0 : template.color) || '#6366f1',
+            color: 'white',
+            borderRadius: '8px',
+            fontSize: '13px',
+            fontWeight: '500',
+            pointerEvents: 'none',
+            zIndex: '10000',
+            opacity: '0.9',
+            boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
+            whiteSpace: 'nowrap',
+        });
+        document.body.appendChild(ghost);
+        this._touchDragGhost = ghost;
+        // Bind move/end on document to track across the whole screen
+        document.addEventListener('touchmove', this._handlePaletteTouchMove, { passive: false });
+        document.addEventListener('touchend', this._handlePaletteTouchEnd);
+        document.addEventListener('touchcancel', this._handlePaletteTouchEnd);
+    }
+    toggleCategory(categoryId) {
+        if (this.expandedCategories.has(categoryId)) {
+            this.expandedCategories.delete(categoryId);
+        }
+        else {
+            this.expandedCategories.add(categoryId);
+        }
+        this.expandedCategories = new Set(this.expandedCategories);
+    }
+    // ==================== Render Helpers ====================
+    getPreviewNode() {
+        if (!this.previewNodeId)
+            return null;
+        return this.workflow.nodes.find(n => n.id === this.previewNodeId) || null;
+    }
+    getPreviewPanelPosition() {
+        const previewNode = this.getPreviewNode();
+        if (!previewNode)
+            return null;
+        const previewPanelWidth = 340;
+        const panelOffset = 20;
+        return {
+            x: (previewNode.position.x - previewPanelWidth - panelOffset) * this.viewport.zoom + this.viewport.panX,
+            y: previewNode.position.y * this.viewport.zoom + this.viewport.panY,
+        };
+    }
+    getAggregatedFrameStatus(containedNodes) {
+        if (containedNodes.length === 0)
+            return ExecutionStatus.IDLE;
+        let hasRunning = false;
+        let hasFailed = false;
+        let hasPending = false;
+        let hasCompleted = false;
+        for (const node of containedNodes) {
+            const status = node.status || ExecutionStatus.IDLE;
+            switch (status) {
+                case ExecutionStatus.RUNNING:
+                    hasRunning = true;
+                    break;
+                case ExecutionStatus.FAILED:
+                    hasFailed = true;
+                    break;
+                case ExecutionStatus.PENDING:
+                case ExecutionStatus.WAITING:
+                    hasPending = true;
+                    break;
+                case ExecutionStatus.COMPLETED:
+                    hasCompleted = true;
+                    break;
+            }
+        }
+        if (hasRunning)
+            return ExecutionStatus.RUNNING;
+        if (hasFailed)
+            return ExecutionStatus.FAILED;
+        if (hasPending)
+            return ExecutionStatus.PENDING;
+        if (hasCompleted)
+            return ExecutionStatus.COMPLETED;
+        return ExecutionStatus.IDLE;
+    }
+    renderCollapsedFrame(frame) {
+        const config = frame.configuration || {};
+        const collapsed = config.frameCollapsed;
+        if (!collapsed)
+            return null;
+        const label = config.frameLabel || FRAME_DEFAULT_LABEL;
+        const borderColor = config.frameBorderColor || 'rgba(99, 102, 241, 0.3)';
+        const isSelected = this.selectedNodeIds.has(frame.id);
+        const containedNodes = this.frameController.getContainedNodes(frame);
+        const previews = this.frameController.getContainedNodePreviews(frame, 5);
+        const overflowCount = containedNodes.length - 5;
+        const aggregatedPorts = this.frameController.getAggregatedPorts(frame);
+        const aggregatedStatus = this.getAggregatedFrameStatus(containedNodes);
+        const nodeStyles = {
+            left: `${frame.position.x}px`,
+            top: `${frame.position.y}px`,
+            '--node-color': borderColor.replace('0.3)', '1)').replace('rgba', 'rgb').split(',').slice(0, 3).join(',') + ')',
+        };
+        const tooltipContent = containedNodes.length === 0
+            ? 'Empty group'
+            : `Contains:\n${containedNodes.map(n => `• ${n.name}`).join('\n')}\n\nDouble-click to expand`;
+        const statusClass = aggregatedStatus !== ExecutionStatus.IDLE
+            ? `status-${aggregatedStatus.toLowerCase()}`
+            : '';
+        return html `
+      <div
+        class="collapsed-frame-node ${isSelected ? 'selected' : ''} ${statusClass}"
+        style=${styleMap(nodeStyles)}
+        data-frame-id=${frame.id}
+        data-status=${aggregatedStatus}
+        title=${tooltipContent}
+        @mousedown=${(e) => this.handleFrameMouseDown(e, frame)}
+        @dblclick=${(e) => this.handleFrameDblClick(e, frame)}
+      >
+        ${this.renderFrameStatusIndicator(aggregatedStatus)}
+        ${this.renderCollapsedFramePorts(aggregatedPorts.inputs, 'left')}
+        ${this.renderCollapsedFrameBody(frame, label, previews, overflowCount)}
+        ${this.renderCollapsedFramePorts(aggregatedPorts.outputs, 'right')}
+      </div>
+    `;
+    }
+    renderFrameStatusIndicator(status) {
+        if (status === ExecutionStatus.IDLE)
+            return null;
+        const iconMap = {
+            [ExecutionStatus.RUNNING]: 'loader',
+            [ExecutionStatus.FAILED]: 'alert-circle',
+            [ExecutionStatus.COMPLETED]: 'check-circle',
+            [ExecutionStatus.PENDING]: 'clock',
+        };
+        const iconName = iconMap[status];
+        if (!iconName)
+            return null;
+        return html `
+      <div class="frame-status-indicator status-${status.toLowerCase()}">
+        <nr-icon name=${iconName} size="small" class=${status === ExecutionStatus.RUNNING ? 'spinning' : ''}></nr-icon>
+      </div>
+    `;
+    }
+    renderCollapsedFramePorts(ports, side) {
+        if (ports.length === 0)
+            return null;
+        return html `
+      <div class="ports ports-${side}">
+        ${ports.map(port => html `
+          <div
+            class="port port-${side === 'left' ? 'input' : 'output'}"
+            data-port-id=${port.id}
+            title=${port.label || (side === 'left' ? 'Input' : 'Output')}
+          ></div>
+        `)}
+      </div>
+    `;
+    }
+    renderCollapsedFrameBody(frame, label, previews, overflowCount) {
+        return html `
+      <div class="collapsed-frame-body">
+        <div class="collapsed-frame-header">
+          <nr-icon name="layers" size="small"></nr-icon>
+          ${this.editingFrameLabelId === frame.id ? html `
+            <input
+              type="text"
+              class="collapsed-frame-title-input"
+              .value=${label}
+              @blur=${(e) => this.handleFrameLabelBlur(e, frame)}
+              @keydown=${(e) => this.handleFrameLabelKeydown(e, frame)}
+              @click=${(e) => e.stopPropagation()}
+              @mousedown=${(e) => e.stopPropagation()}
+              @dblclick=${(e) => e.stopPropagation()}
+            />
+          ` : html `
+            <span class="collapsed-frame-title">
+              ${label}
+              <nr-icon
+                name="edit-2"
+                size="small"
+                class="frame-label-edit-icon"
+                @click=${(e) => this.startEditingFrameLabel(e, frame)}
+              ></nr-icon>
+            </span>
+          `}
+        </div>
+
+        ${previews.length > 0 ? html `
+          <div class="node-icons-preview">
+            ${previews.map(preview => html `
+              <div
+                class="preview-icon"
+                style="background-color: ${preview.color}20"
+                title=${preview.name}
+              >
+                <nr-icon
+                  name=${preview.icon}
+                  size="small"
+                  style="color: ${preview.color}"
+                ></nr-icon>
+              </div>
+            `)}
+            ${overflowCount > 0 ? html `
+              <span class="overflow-count">+${overflowCount}</span>
+            ` : null}
+          </div>
+        ` : html `
+          <div class="node-icons-preview empty">
+            <span class="empty-text">Empty</span>
+          </div>
+        `}
+      </div>
+    `;
+    }
+    renderPalette() {
+        return renderPaletteTemplate({
+            showPalette: this.showPalette,
+            expandedCategories: this.expandedCategories,
+            canvasType: this.canvasType,
+            searchTerm: this.paletteSearchTerm,
+            onClose: () => {
+                this.showPalette = false;
+                this.paletteSearchTerm = '';
+            },
+            onToggleCategory: (categoryId) => this.toggleCategory(categoryId),
+            onNodeDragStart: (e, type) => this.handlePaletteItemDrag(e, type),
+            onNodeTouchStart: (e, type) => this.handlePaletteItemTouchStart(e, type),
+            onNodeDoubleClick: (type) => this.addNode(type),
+            onSearchChange: (term) => { this.paletteSearchTerm = term; },
+        });
+    }
+    renderConfigPanel() {
+        var _a, _b, _c;
+        const nodeId = (_a = this.configuredNode) === null || _a === void 0 ? void 0 : _a.id;
+        const nodeExecution = nodeId ? this.nodeExecutionData.get(nodeId) : undefined;
+        // Build trigger info/actions for persistent trigger nodes
+        let triggerInfo;
+        let triggerActions;
+        if (nodeId && this.configuredNode && isPersistentTriggerNode(this.configuredNode.type)) {
+            const ts = this.triggerStatuses.get(nodeId);
+            triggerInfo = {
+                triggerId: ts === null || ts === void 0 ? void 0 : ts.triggerId,
+                status: ts === null || ts === void 0 ? void 0 : ts.connectionState,
+                health: ts === null || ts === void 0 ? void 0 : ts.health,
+                messagesReceived: ts === null || ts === void 0 ? void 0 : ts.messagesReceived,
+                lastMessageAt: ts === null || ts === void 0 ? void 0 : ts.lastMessageAt,
+                stateReason: ts === null || ts === void 0 ? void 0 : ts.stateReason,
+                webhookUrl: ts === null || ts === void 0 ? void 0 : ts.webhookUrl,
+                inDevMode: ts === null || ts === void 0 ? void 0 : ts.inDevMode,
+            };
+            triggerActions = {
+                onActivate: (triggerId) => { void this.activateTrigger(triggerId); },
+                onDeactivate: (triggerId) => { void this.deactivateTrigger(triggerId); },
+                onCreateAndActivate: (nodeType, config) => this.createAndActivateTrigger(nodeType, config),
+                onToggleDevMode: (triggerId, enable) => { void this.toggleDevMode(triggerId, enable); },
+            };
+        }
+        return renderConfigPanelTemplate({
+            node: this.configuredNode,
+            position: this.configController.getPanelPosition(),
+            callbacks: {
+                onClose: () => this.configController.closeConfig(),
+                onUpdateName: (name) => this.configController.updateName(name),
+                onUpdateDescription: (desc) => this.configController.updateDescription(desc),
+                onUpdateConfig: (key, value) => {
+                    var _a, _b;
+                    this.configController.updateConfig(key, value);
+                    if (this.chatPreviewController &&
+                        ((_a = this.configuredNode) === null || _a === void 0 ? void 0 : _a.id) === this.previewNodeId &&
+                        ((_b = this.configuredNode) === null || _b === void 0 ? void 0 : _b.type) === WorkflowNodeType.CHAT_START) {
+                        if (key === 'enableFileUpload') {
+                            this.chatPreviewController.updateConfig({ enableFileUpload: value === true });
+                        }
+                    }
+                },
+                onRetryNode: this.currentExecutionId ? (nodeId) => { void this.handleRetryNode(nodeId); } : undefined,
+            },
+            workflowId: (_b = this.workflow) === null || _b === void 0 ? void 0 : _b.id,
+            workflow: this.workflow,
+            dynamicVariables: this.dynamicVariables,
+            loadingVariables: this.loadingVariables,
+            nodeExecution,
+            executionId: (_c = this.currentExecutionId) !== null && _c !== void 0 ? _c : undefined,
+            kvEntries: this.kvEntries,
+            onCreateKvEntry: this.onCreateKvEntry,
+            applicationId: this.applicationId,
+            databaseProvider: this.databaseProvider,
+            triggerInfo,
+            triggerActions,
+        });
+    }
+    renderDisabledOverlay() {
+        if (!this.disabled)
+            return html ``;
+        return html `
+      <div
+        class="disabled-overlay ${this.isHoveringDisabledOverlay ? 'hovering' : ''}"
+        @dblclick=${this.handleDisabledOverlayDblClick}
+        @mouseenter=${this.handleDisabledOverlayMouseEnter}
+        @mouseleave=${this.handleDisabledOverlayMouseLeave}
+      >
+        <div class="disabled-overlay-message">
+          <nr-icon name="mouse-pointer-click" size="medium"></nr-icon>
+          <span>Double click to enter preview mode</span>
+        </div>
+      </div>
+    `;
+    }
+    renderHttpPreviewPanel(previewNode, panelStyle) {
+        const config = previewNode.configuration || {};
+        const httpPath = config.httpPath || '/webhook';
+        return html `
+      <div class="chatbot-preview-panel http-preview-panel" style=${styleMap(panelStyle)} data-theme=${this.currentTheme}>
+        <div class="chatbot-preview-header">
+          <div class="chatbot-preview-title">
+            <nr-icon name="globe" size="small"></nr-icon>
+            <span>HTTP Test</span>
+          </div>
+          <button class="chatbot-preview-close" @click=${() => this.closePreviewPanel()}>
+            <nr-icon name="x" size="small"></nr-icon>
+          </button>
+        </div>
+        <div class="http-preview-content">
+          <div class="http-preview-url">
+            <span class="http-method">POST</span>
+            <span class="http-path">${httpPath}</span>
+          </div>
+          <div class="http-preview-section">
+            <label>Request Body (JSON)</label>
+            <textarea
+              class="http-request-body"
+              .value=${this.httpPreviewBody}
+              @input=${(e) => this.httpPreviewBody = e.target.value}
+              placeholder='{ "key": "value" }'
+              ?disabled=${this.httpPreviewLoading}
+            ></textarea>
+          </div>
+          <div class="http-preview-actions">
+            <button
+              class="http-send-btn"
+              @click=${() => this.sendHttpPreviewRequest()}
+              ?disabled=${this.httpPreviewLoading}
+            >
+              ${this.httpPreviewLoading ? html `
+                <nr-icon name="loader" size="small"></nr-icon>
+                <span>Sending...</span>
+              ` : html `
+                <nr-icon name="send" size="small"></nr-icon>
+                <span>Send Request</span>
+              `}
+            </button>
+          </div>
+          ${this.httpPreviewError ? html `
+            <div class="http-preview-error">
+              <nr-icon name="alert-circle" size="small"></nr-icon>
+              <span>${this.httpPreviewError}</span>
+            </div>
+          ` : ''}
+          ${this.httpPreviewResponse ? html `
+            <div class="http-preview-section">
+              <label>Response</label>
+              <pre class="http-response-body">${this.httpPreviewResponse}</pre>
+            </div>
+          ` : ''}
+        </div>
+      </div>
+    `;
+    }
+    renderChatPreviewPanel(previewNode, panelStyle) {
+        var _a, _b;
+        const config = previewNode.configuration || {};
+        const rawSuggestions = config.suggestions || [];
+        const suggestions = rawSuggestions.map((s, i) => ({
+            id: s.id || String(i),
+            text: s.text || '',
+        }));
+        const isChatStartNode = previewNode.type === WorkflowNodeType.CHAT_START;
+        const isConnected = (_b = (_a = this.chatPreviewProvider) === null || _a === void 0 ? void 0 : _a.isConnected()) !== null && _b !== void 0 ? _b : false;
+        const headerTitle = isChatStartNode ? 'Workflow Chat' : 'Chat Preview';
+        const headerIcon = isChatStartNode ? 'zap' : 'message-circle';
+        return html `
+      <div class="chatbot-preview-panel" style=${styleMap(panelStyle)} data-theme=${this.currentTheme}>
+        <div class="chatbot-preview-header">
+          <div class="chatbot-preview-title">
+            <nr-icon name=${headerIcon} size="small"></nr-icon>
+            <span>${headerTitle}</span>
+            ${isChatStartNode ? html `
+              <span class="chat-preview-status ${isConnected ? 'connected' : 'disconnected'}">
+                ${isConnected ? '● Connected' : '○ Connecting...'}
+              </span>
+            ` : ''}
+          </div>
+          <button class="chatbot-preview-close" @click=${() => this.closePreviewPanel()}>
+            <nr-icon name="x" size="small"></nr-icon>
+          </button>
+        </div>
+        <div class="chatbot-preview-content">
+          ${isChatStartNode && this.chatPreviewController ? html `
+            <nr-chatbot
+              size="small"
+              variant="default"
+              .controller=${this.chatPreviewController}
+              .suggestions=${suggestions}
+              placeholder=${config.placeholder || 'Send a message...'}
+              botName="Workflow"
+              ?showHeader=${false}
+              ?showSuggestions=${suggestions.length > 0}
+              ?enableFileUpload=${config.enableFileUpload === true}
+              loadingType="dots"
+            ></nr-chatbot>
+          ` : isChatStartNode ? html `
+            <div class="chat-preview-loading">
+              <nr-icon name="loader" size="large"></nr-icon>
+              <span>Connecting to workflow...</span>
+            </div>
+          ` : html `
+            <nr-chatbot
+              size=${config.chatbotSize || 'medium'}
+              variant=${config.chatbotVariant || 'default'}
+              .suggestions=${suggestions}
+              placeholder=${config.placeholder || 'Type a message...'}
+              botName=${config.title || 'Chat Assistant'}
+              ?showHeader=${true}
+              ?showSuggestions=${config.enableSuggestions !== false}
+              ?enableFileUpload=${config.enableFileUpload === true}
+              loadingType=${config.loadingType || 'dots'}
+            ></nr-chatbot>
+          `}
+        </div>
+      </div>
+    `;
+    }
+    renderPreviewPanel() {
+        const previewNode = this.getPreviewNode();
+        const position = this.getPreviewPanelPosition();
+        if (!previewNode || !position)
+            return html ``;
+        const panelStyle = {
+            left: `${position.x}px`,
+            top: `${position.y}px`,
+        };
+        if (previewNode.type === WorkflowNodeType.HTTP_START) {
+            return this.renderHttpPreviewPanel(previewNode, panelStyle);
+        }
+        return this.renderChatPreviewPanel(previewNode, panelStyle);
+    }
+    // ==================== Insert Panel ====================
+    handleNodeInsertRow(e) {
+        const { node } = e.detail;
+        this.insertPanelNode = node;
+        this.updateComplete.then(() => {
+            this.viewportController.updateInsertPanelPosition();
+        });
+    }
+    renderInsertPanel() {
+        var _a;
+        if (!this.insertPanelNode)
+            return nothing;
+        return html `
+      <div class="insert-panel">
+        <insert-row-panel
+          .tableName=${this.insertPanelNode.name || ((_a = this.insertPanelNode.configuration) === null || _a === void 0 ? void 0 : _a.tableName) || ''}
+          .schemaName=${this.insertPanelSchemaName}
+          .columns=${this.insertPanelColumns}
+          @close-insert-panel=${this.handleCloseInsertPanel}
+        ></insert-row-panel>
+      </div>
+    `;
+    }
+    handleCloseInsertPanel() {
+        this.insertPanelNode = null;
+    }
+    getInsertPanelElement() {
+        var _a, _b;
+        return (_b = (_a = this.insertPanel) === null || _a === void 0 ? void 0 : _a.querySelector('insert-row-panel')) !== null && _b !== void 0 ? _b : null;
+    }
+    // ==================== Constructor Override ====================
+    constructor() {
+        super();
+        // ==================== Workflow-specific Properties ====================
+        this.canvasType = CanvasType.WORKFLOW;
+        this.nodeStatuses = {};
+        this.agentActivity = {};
+        this.listenToExecutionEvents = false;
+        this.applicationId = '';
+        this.kvEntries = [];
+        // ==================== Workflow-specific State ====================
+        this.paletteSearchTerm = '';
+        this.previewNodeId = null;
+        this.isHoveringDisabledOverlay = false;
+        this.httpPreviewBody = '{\n  \n}';
+        this.httpPreviewResponse = '';
+        this.httpPreviewLoading = false;
+        this.httpPreviewError = '';
+        this.dynamicVariables = [];
+        this.loadingVariables = false;
+        this.nodeExecutionData = new Map();
+        this.currentExecutionId = null;
+        // Chatbot preview
+        this.chatPreviewController = null;
+        this.chatPreviewProvider = null;
+        // Trigger status polling
+        this.triggerStatuses = new Map();
+        this.triggerPollingInterval = null;
+        // ==================== Workflow Event Handlers ====================
+        this.handleTestWorkflowRequest = () => {
+            if (this.configuredNode) {
+                const config = this.configuredNode.configuration || {};
+                const testData = config.testFile || config.testDocument || null;
+                this.dispatchEvent(new CustomEvent('workflow-trigger', {
+                    detail: {
+                        node: this.configuredNode,
+                        startFromNode: true,
+                        testData: testData,
+                        workflow: this.workflow,
+                    },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        };
+        this.handleDisabledOverlayDblClick = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.disabled = false;
+            this.isHoveringDisabledOverlay = false;
+            this.dispatchEvent(new CustomEvent('canvas-enabled', {
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this.handleDisabledOverlayMouseEnter = () => {
+            this.isHoveringDisabledOverlay = true;
+        };
+        this.handleDisabledOverlayMouseLeave = () => {
+            this.isHoveringDisabledOverlay = false;
+        };
+        // ==================== Table Resize ====================
+        this.tableResizeState = null;
+        this.handleTableResizeDrag = (event) => {
+            if (!this.tableResizeState)
+                return;
+            const { nodeId, startX, startY, startWidth, startHeight } = this.tableResizeState;
+            const node = this.workflow.nodes.find(n => n.id === nodeId);
+            if (!node)
+                return;
+            const deltaX = (event.clientX - startX) / this.viewport.zoom;
+            const deltaY = (event.clientY - startY) / this.viewport.zoom;
+            const newWidth = Math.max(TABLE_MIN_WIDTH, startWidth + deltaX);
+            const newHeight = Math.max(TABLE_MIN_HEIGHT, startHeight + deltaY);
+            node.configuration = Object.assign(Object.assign({}, node.configuration), { tableWidth: newWidth, tableHeight: newHeight });
+            this.requestUpdate();
+        };
+        this.stopTableResize = () => {
+            if (!this.tableResizeState)
+                return;
+            this.tableResizeState = null;
+            document.removeEventListener('mousemove', this.handleTableResizeDrag);
+            document.removeEventListener('mouseup', this.stopTableResize);
+            this.dispatchWorkflowChanged();
+        };
+        // ===== Touch drag from palette (mobile) =====
+        this._touchDragType = null;
+        this._touchDragGhost = null;
+        this._handlePaletteTouchMove = (e) => {
+            if (!this._touchDragGhost)
+                return;
+            e.preventDefault();
+            const touch = e.touches[0];
+            this._touchDragGhost.style.left = `${touch.clientX - 40}px`;
+            this._touchDragGhost.style.top = `${touch.clientY - 20}px`;
+        };
+        this._handlePaletteTouchEnd = (e) => {
+            document.removeEventListener('touchmove', this._handlePaletteTouchMove);
+            document.removeEventListener('touchend', this._handlePaletteTouchEnd);
+            document.removeEventListener('touchcancel', this._handlePaletteTouchEnd);
+            // Clean up ghost
+            if (this._touchDragGhost) {
+                this._touchDragGhost.remove();
+                this._touchDragGhost = null;
+            }
+            const type = this._touchDragType;
+            this._touchDragType = null;
+            if (!type || this.disabled)
+                return;
+            // Check if touch ended over the canvas
+            const touch = e.changedTouches[0];
+            if (!touch || !this.canvasWrapper)
+                return;
+            const rect = this.canvasWrapper.getBoundingClientRect();
+            if (touch.clientX >= rect.left && touch.clientX <= rect.right &&
+                touch.clientY >= rect.top && touch.clientY <= rect.bottom) {
+                const x = (touch.clientX - rect.left - this.viewport.panX) / this.viewport.zoom;
+                const y = (touch.clientY - rect.top - this.viewport.panY) / this.viewport.zoom;
+                this.addNode(type, { x: Math.round(x / 20) * 20, y: Math.round(y / 20) * 20 });
+            }
+        };
+        this.expandedCategories = new Set([
+            'trigger', 'control', 'action', 'data', 'agent',
+            'db-tables-views', 'db-relations-constraints', 'db-indexes-queries',
+        ]);
+    }
+    // ==================== Main Render ====================
+    render() {
+        return html `
+      <div
+        class="canvas-wrapper"
+        data-theme=${this.currentTheme}
+        data-mode=${this.mode}
+        @mousedown=${this.handleCanvasMouseDown}
+        @contextmenu=${this.handleCanvasContextMenu}
+        @drop=${this.handleCanvasDrop}
+        @dragover=${this.handleCanvasDragOver}
+      >
+        <div class="canvas-grid"></div>
+
+        <div class="canvas-viewport">
+          <!-- Edges SVG layer -->
+          <svg class="edges-svg">
+            ${this.renderEdges()}
+          </svg>
+
+          <!-- Frame nodes layer (rendered behind regular nodes) -->
+          <div class="frames-layer">
+            ${this.getFrameNodes().map(frame => {
+            const config = frame.configuration || {};
+            return config.frameCollapsed
+                ? this.renderCollapsedFrame(frame)
+                : this.renderExpandedFrame(frame);
+        })}
+          </div>
+
+          <!-- Nodes layer -->
+          <div class="nodes-layer">
+            ${this.getVisibleNonFrameNodes().map(node => {
+            var _a, _b;
+            const enrichedNode = this.triggerStatuses.has(node.id)
+                ? Object.assign(Object.assign({}, node), { triggerStatus: this.triggerStatuses.get(node.id) }) : node;
+            return html `
+              <workflow-node
+                data-node-id=${node.id}
+                .node=${enrichedNode}
+                ?selected=${this.selectedNodeIds.has(node.id)}
+                ?dragging=${((_a = this.dragState) === null || _a === void 0 ? void 0 : _a.nodeId) === node.id}
+                ?editing=${this.editingNoteId === node.id}
+                .connectingPortId=${((_b = this.connectionState) === null || _b === void 0 ? void 0 : _b.sourcePortId) || null}
+                .remoteSelection=${this.collaborative
+                ? this.collaborationController.isElementSelectedByRemote(node.id)
+                : null}
+                .remoteTyping=${this.collaborative
+                ? this.collaborationController.isElementBeingTypedByRemote(node.id)
+                : null}
+                @node-mousedown=${this.handleNodeMouseDown}
+                @node-dblclick=${this.handleNodeDblClick}
+                @node-preview=${this.handleNodePreview}
+                @node-trigger=${this.handleNodeTrigger}
+                @port-mousedown=${this.handlePortMouseDown}
+                @port-mouseup=${this.handlePortMouseUp}
+                @note-content-change=${this.handleNoteContentChange}
+                @note-edit-end=${this.handleNoteEditEnd}
+                @note-resize-start=${this.handleNoteResizeStart}
+                @table-resize-start=${this.handleTableResizeStart}
+                @note-settings=${this.handleNoteSettings}
+                @node-insert-row=${this.handleNodeInsertRow}
+              ></workflow-node>
+            `;
+        })}
+          </div>
+        </div>
+
+        ${this.renderRemoteCursors()}
+        ${this.renderMarqueeBox()}
+        ${this.renderEmptyState()}
+        ${this.renderDisabledOverlay()}
+        ${this.renderPresenceBar()}
+        ${this.renderToolbar()}
+        ${this.renderPalette()}
+        ${this.renderConfigPanel()}
+        ${this.renderInsertPanel()}
+        ${this.renderPreviewPanel()}
+        ${this.renderZoomControls()}
+        ${this.renderContextMenu()}
+      </div>
+      ${this.renderChatbotPanel()}
+    `;
+    }
+};
+WorkflowCanvasElement.styles = styles;
+__decorate([
+    property({ type: String })
+], WorkflowCanvasElement.prototype, "canvasType", void 0);
+__decorate([
+    property({ type: Object })
+], WorkflowCanvasElement.prototype, "nodeStatuses", void 0);
+__decorate([
+    property({ type: Object })
+], WorkflowCanvasElement.prototype, "agentActivity", void 0);
+__decorate([
+    property({ type: Boolean })
+], WorkflowCanvasElement.prototype, "listenToExecutionEvents", void 0);
+__decorate([
+    property({ type: String })
+], WorkflowCanvasElement.prototype, "executionId", null);
+__decorate([
+    property({ attribute: false })
+], WorkflowCanvasElement.prototype, "databaseProvider", void 0);
+__decorate([
+    property({ type: String })
+], WorkflowCanvasElement.prototype, "applicationId", void 0);
+__decorate([
+    property({ attribute: false })
+], WorkflowCanvasElement.prototype, "kvEntries", void 0);
+__decorate([
+    property({ attribute: false })
+], WorkflowCanvasElement.prototype, "onCreateKvEntry", void 0);
+__decorate([
+    state()
+], WorkflowCanvasElement.prototype, "paletteSearchTerm", void 0);
+__decorate([
+    state()
+], WorkflowCanvasElement.prototype, "previewNodeId", void 0);
+__decorate([
+    state()
+], WorkflowCanvasElement.prototype, "isHoveringDisabledOverlay", void 0);
+__decorate([
+    state()
+], WorkflowCanvasElement.prototype, "httpPreviewBody", void 0);
+__decorate([
+    state()
+], WorkflowCanvasElement.prototype, "httpPreviewResponse", void 0);
+__decorate([
+    state()
+], WorkflowCanvasElement.prototype, "httpPreviewLoading", void 0);
+__decorate([
+    state()
+], WorkflowCanvasElement.prototype, "httpPreviewError", void 0);
+__decorate([
+    state()
+], WorkflowCanvasElement.prototype, "dynamicVariables", void 0);
+__decorate([
+    state()
+], WorkflowCanvasElement.prototype, "loadingVariables", void 0);
+__decorate([
+    state()
+], WorkflowCanvasElement.prototype, "nodeExecutionData", void 0);
+__decorate([
+    state()
+], WorkflowCanvasElement.prototype, "currentExecutionId", void 0);
+WorkflowCanvasElement = __decorate([
+    customElement('workflow-canvas')
+], WorkflowCanvasElement);
+export { WorkflowCanvasElement };
+//# sourceMappingURL=workflow-canvas.component.js.map