@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,752 @@
+/**
+ * @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;
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { PortType, ExecutionStatus, TriggerConnectionState, NODE_COLORS, NODE_ICONS, isAgentNode, isNoteNode, WorkflowNodeType, DbDesignerNodeType, } from './workflow-canvas.types.js';
+import { styles } from './workflow-node.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import '../icon/icon.component.js';
+import '../button/button.component.js';
+/**
+ * Workflow node component for displaying individual nodes in the canvas
+ *
+ * @element workflow-node
+ * @fires node-mousedown - When node is clicked for dragging
+ * @fires port-mousedown - When a port is clicked to start connection
+ * @fires port-mouseup - When mouse is released on a port
+ * @fires node-dblclick - When node is double-clicked for editing
+ * @fires node-preview - When preview button is clicked (for chatbot nodes)
+ * @fires node-trigger - When trigger button is clicked (for start nodes)
+ */
+let WorkflowNodeElement = class WorkflowNodeElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.selected = false;
+        this.dragging = false;
+        this.connectingPortId = null;
+        this.editing = false;
+        this.remoteSelection = null;
+        this.remoteTyping = null;
+        this.hoveredPort = null;
+    }
+    updated(changedProperties) {
+        var _a;
+        super.updated(changedProperties);
+        // Focus textarea when entering edit mode
+        if (changedProperties.has('editing') && this.editing) {
+            const textarea = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.note-textarea');
+            if (textarea) {
+                textarea.focus();
+            }
+        }
+    }
+    getNodeColor() {
+        var _a;
+        return ((_a = this.node.metadata) === null || _a === void 0 ? void 0 : _a.color) || NODE_COLORS[this.node.type] || '#3b82f6';
+    }
+    getNodeIcon() {
+        var _a;
+        return ((_a = this.node.metadata) === null || _a === void 0 ? void 0 : _a.icon) || NODE_ICONS[this.node.type] || 'box';
+    }
+    handleNodeMouseDown(e) {
+        if (e.target.classList.contains('port'))
+            return;
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent('node-mousedown', {
+            detail: { node: this.node, event: e },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleNodeDblClick(e) {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent('node-dblclick', {
+            detail: { node: this.node },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleInsertClick(e) {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent('node-insert-row', {
+            detail: { node: this.node },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handlePreviewClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent('node-preview', {
+            detail: { node: this.node },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    isChatbotNode() {
+        return this.node.type === WorkflowNodeType.CHATBOT ||
+            this.node.type === WorkflowNodeType.CHAT_START;
+    }
+    hasPreviewPanel() {
+        return this.isChatbotNode() ||
+            this.node.type === WorkflowNodeType.HTTP_START;
+    }
+    isStartNode() {
+        return this.node.type === WorkflowNodeType.START;
+    }
+    isDbTableNode() {
+        return this.node.type === DbDesignerNodeType.TABLE;
+    }
+    isUiTableNode() {
+        return this.node.type === WorkflowNodeType.UI_TABLE;
+    }
+    isNoteNode() {
+        return isNoteNode(this.node.type);
+    }
+    getNoteFontSize() {
+        var _a;
+        const fontSize = ((_a = this.node.configuration) === null || _a === void 0 ? void 0 : _a.noteFontSize) || 'medium';
+        switch (fontSize) {
+            case 'small': return '12px';
+            case 'large': return '16px';
+            default: return '14px';
+        }
+    }
+    /**
+     * Render a Note node - sticky note style annotation
+     */
+    renderNoteNode() {
+        const config = this.node.configuration || {};
+        const bgColor = config.noteBackgroundColor || '#fef08a';
+        const textColor = config.noteTextColor || '#713f12';
+        const content = config.noteContent || 'Add your note here...';
+        const showBorder = config.noteShowBorder || false;
+        const noteWidth = config.noteWidth || 200;
+        const noteHeight = config.noteHeight || 100;
+        const containerClasses = {
+            'node-container': true,
+            'note-node': true,
+            selected: this.selected,
+            dragging: this.dragging,
+            editing: this.editing,
+        };
+        const containerStyles = {
+            '--note-bg': bgColor,
+            '--note-text': textColor,
+            left: `${this.node.position.x}px`,
+            top: `${this.node.position.y}px`,
+        };
+        const noteStyles = {
+            backgroundColor: bgColor,
+            color: textColor,
+            fontSize: this.getNoteFontSize(),
+            border: showBorder ? `1px solid ${textColor}30` : 'none',
+            width: `${noteWidth}px`,
+            minHeight: `${noteHeight}px`,
+        };
+        return html `
+      <div
+        class=${classMap(containerClasses)}
+        style=${styleMap(containerStyles)}
+        data-theme=${this.currentTheme}
+        @mousedown=${this.handleNodeMouseDown}
+        @dblclick=${this.handleNodeDblClick}
+      >
+        <div class="note-content" style=${styleMap(noteStyles)}>
+          ${this.editing ? html `
+            <textarea
+              class="note-textarea"
+              .value=${content}
+              @blur=${this.handleNoteBlur}
+              @keydown=${this.handleNoteKeydown}
+              @mousedown=${(e) => e.stopPropagation()}
+              @dblclick=${(e) => e.stopPropagation()}
+              style="color: ${textColor}; font-size: ${this.getNoteFontSize()};"
+            ></textarea>
+          ` : html `
+            <span class="note-text">${content}</span>
+          `}
+        </div>
+        <!-- Settings button -->
+        <button
+          class="note-settings-btn"
+          title="Note settings"
+          @click=${this.handleNoteSettingsClick}
+          @mousedown=${(e) => e.stopPropagation()}
+        >
+          <nr-icon name="settings" size="small"></nr-icon>
+        </button>
+        <!-- Resize handle -->
+        ${this.selected ? html `
+          <div
+            class="note-resize-handle"
+            @mousedown=${this.handleNoteResizeStart}
+          ></div>
+        ` : nothing}
+      </div>
+    `;
+    }
+    handleNoteBlur(e) {
+        const textarea = e.target;
+        this.dispatchEvent(new CustomEvent('note-content-change', {
+            detail: { node: this.node, content: textarea.value },
+            bubbles: true,
+            composed: true,
+        }));
+        this.dispatchEvent(new CustomEvent('note-edit-end', {
+            detail: { node: this.node },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleNoteKeydown(e) {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            this.dispatchEvent(new CustomEvent('note-edit-end', {
+                detail: { node: this.node },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
+    handleNoteResizeStart(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent('note-resize-start', {
+            detail: { node: this.node, event: e },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleNoteSettingsClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        // Dispatch the same event as double-click to open config panel
+        // but use a specific event for note settings
+        this.dispatchEvent(new CustomEvent('note-settings', {
+            detail: { node: this.node },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    getTriggerStateLabel() {
+        var _a, _b;
+        const state = (_a = this.node.triggerStatus) === null || _a === void 0 ? void 0 : _a.connectionState;
+        switch (state) {
+            case TriggerConnectionState.CONNECTED: return 'Connected';
+            case TriggerConnectionState.CONNECTING: return 'Connecting...';
+            case TriggerConnectionState.DISCONNECTED: return 'Disconnected';
+            case TriggerConnectionState.PAUSED: return 'Paused';
+            case TriggerConnectionState.HANDOFF_PENDING: return 'Handing off...';
+            case TriggerConnectionState.ERROR:
+                return ((_b = this.node.triggerStatus) === null || _b === void 0 ? void 0 : _b.stateReason)
+                    ? `Error: ${this.node.triggerStatus.stateReason}`
+                    : 'Error';
+            default: return 'Unknown';
+        }
+    }
+    renderTriggerStatus() {
+        const ts = this.node.triggerStatus;
+        if (!ts)
+            return nothing;
+        const dotClass = ts.connectionState.toLowerCase();
+        return html `
+      <div class="trigger-status">
+        <span class="trigger-status-dot ${dotClass}"></span>
+        <span class="trigger-status-text">${this.getTriggerStateLabel()}</span>
+        ${ts.connectionState === TriggerConnectionState.CONNECTED && ts.messagesReceived != null ? html `
+          <span class="trigger-msg-count">${ts.messagesReceived} msgs</span>
+        ` : nothing}
+      </div>
+    `;
+    }
+    handleTriggerClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent('node-trigger', {
+            detail: { node: this.node },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /**
+     * Get the icon for a column type
+     */
+    getColumnTypeIcon(type) {
+        const typeLower = type.toLowerCase();
+        if (typeLower.includes('int') || typeLower.includes('serial') || typeLower.includes('numeric') || typeLower.includes('decimal') || typeLower.includes('float') || typeLower.includes('double')) {
+            return 'hash';
+        }
+        if (typeLower.includes('date') || typeLower.includes('time')) {
+            return 'calendar';
+        }
+        if (typeLower.includes('bool')) {
+            return 'toggle-left';
+        }
+        if (typeLower.includes('json') || typeLower.includes('array')) {
+            return 'braces';
+        }
+        if (typeLower.includes('text') || typeLower.includes('varchar') || typeLower.includes('char')) {
+            return 'type';
+        }
+        if (typeLower.includes('blob') || typeLower.includes('binary')) {
+            return 'file';
+        }
+        return 'minus';
+    }
+    /**
+     * Render a DB Table node in ERD style
+     */
+    renderDbTableNode() {
+        const nodeColor = this.getNodeColor();
+        const status = this.node.status || ExecutionStatus.IDLE;
+        const config = this.node.configuration || {};
+        const columns = config.columns || [];
+        const primaryKey = config.primaryKey;
+        const containerClasses = {
+            'node-container': true,
+            'db-table-node': true,
+            selected: this.selected,
+            dragging: this.dragging,
+            [`status-${status.toLowerCase()}`]: true,
+        };
+        const containerStyles = {
+            '--node-accent': nodeColor,
+            left: `${this.node.position.x}px`,
+            top: `${this.node.position.y}px`,
+        };
+        return html `
+      <div
+        class=${classMap(containerClasses)}
+        style=${styleMap(containerStyles)}
+        data-theme=${this.currentTheme}
+        @mousedown=${this.handleNodeMouseDown}
+        @dblclick=${this.handleNodeDblClick}
+      >
+        <div class="db-table-header" style="background: ${nodeColor}">
+          <span class="db-table-name">${this.node.name || config.tableName || 'Table'}</span>
+          <button
+            class="db-table-insert-btn"
+            title="Insert row"
+            @click=${this.handleInsertClick}
+            @mousedown=${(e) => e.stopPropagation()}
+          >+</button>
+        </div>
+
+        <div class="db-table-columns">
+          ${columns.length === 0 ? html `
+            <div class="db-table-empty">No columns defined</div>
+          ` : columns.map(column => html `
+            <div class="db-table-column ${column.name === primaryKey ? 'primary-key' : ''}">
+              ${column.name === primaryKey ? html `
+                <nr-icon name="key" size="small" class="column-key-icon"></nr-icon>
+              ` : html `
+                <nr-icon name=${this.getColumnTypeIcon(column.type)} size="small" class="column-type-icon"></nr-icon>
+              `}
+              <span class="column-name">${column.name}</span>
+              ${column.nullable === false ? html `
+                <span class="column-required">*</span>
+              ` : nothing}
+            </div>
+          `)}
+        </div>
+
+        ${status !== ExecutionStatus.IDLE ? html `
+          <div class="node-status">
+            <span class="status-dot ${status.toLowerCase()}"></span>
+            <span class="status-text">${this.getStatusText()}</span>
+          </div>
+        ` : nothing}
+
+        <div class="ports-container">
+          ${this.node.ports.inputs.map((port, i) => this.renderPort(port, true, i, this.node.ports.inputs.length))}
+          ${this.node.ports.outputs.map((port, i) => this.renderPort(port, false, i, this.node.ports.outputs.length))}
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Render a UI Table node - shows configured columns on the canvas
+     */
+    renderUiTableNode() {
+        const nodeColor = this.getNodeColor();
+        const status = this.node.status || ExecutionStatus.IDLE;
+        const config = this.node.configuration || {};
+        const userColumns = config.tableColumns || [];
+        // Dummy data shown when no columns are configured
+        const dummyColumns = [
+            { name: 'ID', key: 'id' },
+            { name: 'Name', key: 'name' },
+            { name: 'Email', key: 'email' },
+            { name: 'Status', key: 'status' },
+        ];
+        const dummyRows = [
+            { id: '1', name: 'Alice', email: 'alice@demo.io', status: 'Active' },
+            { id: '2', name: 'Bob', email: 'bob@demo.io', status: 'Pending' },
+            { id: '3', name: 'Carol', email: 'carol@demo.io', status: 'Active' },
+        ];
+        const hasUserColumns = userColumns.length > 0;
+        const displayColumns = hasUserColumns ? userColumns : dummyColumns;
+        const containerClasses = {
+            'node-container': true,
+            'ui-table-node': true,
+            selected: this.selected,
+            dragging: this.dragging,
+            [`status-${status.toLowerCase()}`]: true,
+        };
+        const tableWidth = config.tableWidth || 320;
+        const tableHeight = config.tableHeight || 200;
+        const containerStyles = {
+            '--node-accent': nodeColor,
+            left: `${this.node.position.x}px`,
+            top: `${this.node.position.y}px`,
+            width: `${tableWidth}px`,
+            height: `${tableHeight}px`,
+        };
+        return html `
+      <div
+        class=${classMap(containerClasses)}
+        style=${styleMap(containerStyles)}
+        data-theme=${this.currentTheme}
+        @mousedown=${this.handleNodeMouseDown}
+        @dblclick=${this.handleNodeDblClick}
+      >
+        <div class="ui-table-header" style="background: ${nodeColor}">
+          <nr-icon name="table" size="small" style="color: white;"></nr-icon>
+          <span class="ui-table-name">${this.node.name || 'Table'}</span>
+        </div>
+
+        <div class="ui-table-grid ${!hasUserColumns ? 'placeholder' : ''}">
+          <!-- Column headers -->
+          <div class="ui-table-row ui-table-head-row">
+            ${displayColumns.map(col => html `
+              <div class="ui-table-cell ui-table-head-cell">${col.name || col.key}</div>
+            `)}
+          </div>
+          <!-- Data rows (dummy when no columns configured) -->
+          ${(!hasUserColumns ? dummyRows : [{}, {}, {}]).map(row => html `
+            <div class="ui-table-row">
+              ${displayColumns.map(col => html `
+                <div class="ui-table-cell">${!hasUserColumns ? row[col.key] || '—' : '—'}</div>
+              `)}
+            </div>
+          `)}
+        </div>
+
+        ${!hasUserColumns ? html `
+          <div class="ui-table-hint">Sample data — configure columns to customize</div>
+        ` : nothing}
+
+        ${status !== ExecutionStatus.IDLE ? html `
+          <div class="node-status">
+            <span class="status-dot ${status.toLowerCase()}"></span>
+            <span class="status-text">${this.getStatusText()}</span>
+          </div>
+        ` : nothing}
+
+        <div class="ports-container">
+          ${this.node.ports.inputs.map((port, i) => this.renderPort(port, true, i, this.node.ports.inputs.length))}
+          ${this.node.ports.outputs.map((port, i) => this.renderPort(port, false, i, this.node.ports.outputs.length))}
+        </div>
+
+        <!-- Resize handle -->
+        ${this.selected ? html `
+          <div
+            class="ui-table-resize-handle"
+            @mousedown=${this.handleUiTableResizeStart}
+          ></div>
+        ` : nothing}
+      </div>
+    `;
+    }
+    handleUiTableResizeStart(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent('table-resize-start', {
+            detail: { node: this.node, event: e },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handlePortMouseDown(e, port, isInput) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent('port-mousedown', {
+            detail: { node: this.node, port, isInput, event: e },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handlePortMouseUp(e, port, isInput) {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent('port-mouseup', {
+            detail: { node: this.node, port, isInput, event: e },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handlePortMouseEnter(portId) {
+        this.hoveredPort = portId;
+    }
+    handlePortMouseLeave() {
+        this.hoveredPort = null;
+    }
+    getPortClasses(port, isInput) {
+        return {
+            port: true,
+            input: isInput,
+            output: !isInput,
+            'conditional-true': port.type === PortType.CONDITIONAL_TRUE,
+            'conditional-false': port.type === PortType.CONDITIONAL_FALSE,
+            'conditional-default': port.type === PortType.CONDITIONAL_DEFAULT,
+            error: port.type === PortType.ERROR,
+            connecting: this.connectingPortId === port.id,
+            compatible: this.connectingPortId !== null && this.connectingPortId !== port.id,
+        };
+    }
+    getStatusText() {
+        var _a;
+        return ((_a = this.node.status) === null || _a === void 0 ? void 0 : _a.toLowerCase().replace('_', ' ')) || 'idle';
+    }
+    renderPort(port, isInput, index, total) {
+        // Position ports vertically centered in the node
+        // Node height is approximately 80px (header 40px + body ~40px)
+        const nodeHeight = 80;
+        const portSize = 10;
+        const portSpacing = 20; // Space between multiple ports
+        // Calculate vertical center position
+        const totalPortsHeight = (total - 1) * portSpacing;
+        const startY = (nodeHeight - totalPortsHeight) / 2;
+        const topOffset = startY + (index * portSpacing) - (portSize / 2);
+        const style = {
+            top: `${topOffset}px`,
+        };
+        return html `
+      <div
+        class=${classMap(this.getPortClasses(port, isInput))}
+        style=${styleMap(style)}
+        @mousedown=${(e) => this.handlePortMouseDown(e, port, isInput)}
+        @mouseup=${(e) => this.handlePortMouseUp(e, port, isInput)}
+        @mouseenter=${() => this.handlePortMouseEnter(port.id)}
+        @mouseleave=${() => this.handlePortMouseLeave()}
+        data-port-id=${port.id}
+        data-node-id=${this.node.id}
+        title=${port.label || port.id}
+      >
+        ${this.hoveredPort === port.id && port.label ? html `
+          <span class="port-label ${isInput ? 'input' : 'output'}">${port.label}</span>
+        ` : nothing}
+      </div>
+    `;
+    }
+    renderConfigPort(port, index, total) {
+        // Position config ports evenly spaced along the bottom using percentages
+        const portSpacing = 45; // Space between ports in px (wider for labels)
+        // Center the group of ports, offset each by index
+        const leftPercent = 50; // Center point
+        const offsetFromCenter = (index - (total - 1) / 2) * portSpacing;
+        const style = {
+            left: `calc(${leftPercent}% + ${offsetFromCenter}px - 5px)`,
+        };
+        const classes = {
+            port: true,
+            config: true,
+            connecting: this.connectingPortId === port.id,
+            compatible: this.connectingPortId !== null && this.connectingPortId !== port.id,
+        };
+        return html `
+      <div
+        class=${classMap(classes)}
+        style=${styleMap(style)}
+        @mousedown=${(e) => this.handlePortMouseDown(e, port, true)}
+        @mouseup=${(e) => this.handlePortMouseUp(e, port, true)}
+        @mouseenter=${() => this.handlePortMouseEnter(port.id)}
+        @mouseleave=${() => this.handlePortMouseLeave()}
+        data-port-id=${port.id}
+        data-node-id=${this.node.id}
+        title=${port.label || port.id}
+      >
+        ${port.label ? html `
+          <span class="port-label config">${port.label}</span>
+        ` : nothing}
+      </div>
+    `;
+    }
+    renderRemoteOverlays() {
+        return html `
+      ${this.remoteSelection ? html `
+        <div
+          class="remote-selection-ring"
+          style="border-color: ${this.remoteSelection.color};"
+        ></div>
+      ` : nothing}
+      ${this.remoteTyping ? html `
+        <div
+          class="remote-typing-indicator"
+          style="color: ${this.remoteTyping.color};"
+        >
+          ${this.remoteTyping.username} is typing...
+        </div>
+      ` : nothing}
+    `;
+    }
+    wrapWithRemoteOverlays(content) {
+        if (this.remoteSelection || this.remoteTyping) {
+            return html `
+        <div class="remote-overlay-wrapper" style="position: relative;">
+          ${content}
+          ${this.renderRemoteOverlays()}
+        </div>
+      `;
+        }
+        return content;
+    }
+    render() {
+        var _a, _b, _c;
+        // Use special rendering for DB Table nodes
+        if (this.isDbTableNode()) {
+            return this.wrapWithRemoteOverlays(this.renderDbTableNode());
+        }
+        // Use special rendering for UI Table nodes
+        if (this.isUiTableNode()) {
+            return this.wrapWithRemoteOverlays(this.renderUiTableNode());
+        }
+        // Use special rendering for Note nodes
+        if (this.isNoteNode()) {
+            return this.wrapWithRemoteOverlays(this.renderNoteNode());
+        }
+        const nodeColor = this.getNodeColor();
+        const nodeIcon = this.getNodeIcon();
+        const isAgent = isAgentNode(this.node.type);
+        const hasPreview = this.hasPreviewPanel();
+        const isStart = this.isStartNode();
+        const status = this.node.status || ExecutionStatus.IDLE;
+        const containerClasses = {
+            'node-container': true,
+            selected: this.selected,
+            dragging: this.dragging,
+            'remote-selected': !!this.remoteSelection,
+            [`status-${status.toLowerCase()}`]: true,
+        };
+        const containerStyles = {
+            '--node-accent': nodeColor,
+            left: `${this.node.position.x}px`,
+            top: `${this.node.position.y}px`,
+        };
+        const nodeContent = html `
+      <div
+        class=${classMap(containerClasses)}
+        style=${styleMap(containerStyles)}
+        data-theme=${this.currentTheme}
+        @mousedown=${this.handleNodeMouseDown}
+        @dblclick=${this.handleNodeDblClick}
+      >
+        <div class="node-header">
+          <div class="node-icon" style="background: ${nodeColor}">
+            <nr-icon name=${nodeIcon} size="small"></nr-icon>
+          </div>
+          <span class="node-title">${this.node.name}</span>
+          ${isAgent ? html `
+            <span class="node-type-badge agent">AI</span>
+          ` : nothing}
+        </div>
+
+        <div class="node-body">
+          ${((_a = this.node.metadata) === null || _a === void 0 ? void 0 : _a.description) ? html `
+            <div class="node-description">${this.node.metadata.description}</div>
+          ` : nothing}
+          ${isStart ? html `
+            <nr-button
+              size="small"
+              variant="ghost"
+              @click=${this.handleTriggerClick}
+              @mousedown=${(e) => e.stopPropagation()}
+              title="Trigger workflow"
+            >
+              <nr-icon slot="prefix" name="play" size="small"></nr-icon>
+              Trigger
+            </nr-button>
+          ` : nothing}
+          ${hasPreview ? html `
+            <nr-button
+              size="small"
+              variant="ghost"
+              @click=${this.handlePreviewClick}
+              @mousedown=${(e) => e.stopPropagation()}
+              title="Test workflow"
+            >
+              <nr-icon slot="prefix" name="eye" size="small"></nr-icon>
+              Test
+            </nr-button>
+          ` : nothing}
+        </div>
+
+        ${((_b = this.node.agentActivity) === null || _b === void 0 ? void 0 : _b.active) ? html `
+          <div class="node-status">
+            <span class="status-dot ${this.node.agentActivity.type === 'llm' ? 'thinking' : 'tool'}"></span>
+            <span class="status-text">${this.node.agentActivity.type === 'llm' ? 'Thinking' : this.node.agentActivity.name || 'Tool'}</span>
+          </div>
+        ` : status !== ExecutionStatus.IDLE ? html `
+          <div class="node-status">
+            <span class="status-dot ${status.toLowerCase()}"></span>
+            <span class="status-text">${this.getStatusText()}</span>
+          </div>
+        ` : nothing}
+
+        ${this.renderTriggerStatus()}
+
+        ${this.node.error ? html `
+          <div class="node-error">${this.node.error}</div>
+        ` : nothing}
+
+        <div class="ports-container">
+          ${this.node.ports.inputs.map((port, i) => this.renderPort(port, true, i, this.node.ports.inputs.length))}
+          ${this.node.ports.outputs.map((port, i) => this.renderPort(port, false, i, this.node.ports.outputs.length))}
+          ${(_c = this.node.ports.configs) === null || _c === void 0 ? void 0 : _c.map((port, i) => this.renderConfigPort(port, i, this.node.ports.configs.length))}
+        </div>
+      </div>
+    `;
+        return this.wrapWithRemoteOverlays(nodeContent);
+    }
+};
+WorkflowNodeElement.styles = styles;
+__decorate([
+    property({ type: Object })
+], WorkflowNodeElement.prototype, "node", void 0);
+__decorate([
+    property({ type: Boolean })
+], WorkflowNodeElement.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], WorkflowNodeElement.prototype, "dragging", void 0);
+__decorate([
+    property({ type: String })
+], WorkflowNodeElement.prototype, "connectingPortId", void 0);
+__decorate([
+    property({ type: Boolean })
+], WorkflowNodeElement.prototype, "editing", void 0);
+__decorate([
+    property({ type: Object })
+], WorkflowNodeElement.prototype, "remoteSelection", void 0);
+__decorate([
+    property({ type: Object })
+], WorkflowNodeElement.prototype, "remoteTyping", void 0);
+__decorate([
+    state()
+], WorkflowNodeElement.prototype, "hoveredPort", void 0);
+WorkflowNodeElement = __decorate([
+    customElement('workflow-node')
+], WorkflowNodeElement);
+export { WorkflowNodeElement };
+//# sourceMappingURL=workflow-node.component.js.map