@mindexec/cli 0.2.101 → 0.2.103

package/wwwroot/_content/MindExecution.Shared/js/mind-map-css3d-manager.js

@@ -29,6 +29,9 @@
     let _cssImageDisplayPumpScheduled = false;
     const CSS_VIDEO_PROXY_MAX_DEVICE_PIXEL_RATIO = 2;
     const VIDEO_PLAYBACK_INTENT_METADATA_KEY = 'VideoPlaybackIntent';
+    const CSV_TABLE_CONTENT_TYPE = 'csv-table';
+    const CSV_TABLE_MAX_RENDER_ROWS = 500;
+    const CSV_TABLE_MAX_RENDER_COLUMNS = 80;
     const REMOTE_FLEET_DISPLAY_NAME = 'Multi Desktop Monitor';
     const REMOTE_FLEET_LEGACY_DISPLAY_NAME = 'Remote Fleet Monitor';
     const _cssVideoProxyStateByVideo = new WeakMap();
@@ -53,6 +56,254 @@
     }
 
     syncMindCanvasPlatformRenderClasses();
+
+    function detectCsvDelimiter(csvText) {
+        const text = String(csvText || '');
+        const candidates = [',', '\t', ';', '|'];
+        const scores = new Map(candidates.map(candidate => [candidate, 0]));
+        let inQuotes = false;
+        let currentLine = 0;
+
+        for (let i = 0; i < text.length && currentLine < 12; i++) {
+            const ch = text[i];
+            const next = text[i + 1];
+            if (ch === '"') {
+                if (inQuotes && next === '"') {
+                    i++;
+                } else {
+                    inQuotes = !inQuotes;
+                }
+                continue;
+            }
+            if (!inQuotes && (ch === '\n' || ch === '\r')) {
+                currentLine++;
+                if (ch === '\r' && next === '\n') i++;
+                continue;
+            }
+            if (!inQuotes && scores.has(ch)) {
+                scores.set(ch, scores.get(ch) + 1);
+            }
+        }
+
+        let best = ',';
+        let bestScore = -1;
+        scores.forEach((score, delimiter) => {
+            if (score > bestScore) {
+                best = delimiter;
+                bestScore = score;
+            }
+        });
+        return best;
+    }
+
+    function parseCsvRows(csvText, options = {}) {
+        const text = String(csvText || '');
+        if (!text) {
+            return { rows: [], delimiter: options.delimiter || ',', truncatedRows: false };
+        }
+
+        const delimiter = options.delimiter || detectCsvDelimiter(text);
+        const maxRows = Math.max(1, Number(options.maxRows || 1000));
+        const maxColumns = Math.max(1, Number(options.maxColumns || 200));
+        const rows = [];
+        let row = [];
+        let cell = '';
+        let inQuotes = false;
+        let truncatedRows = false;
+
+        const pushCell = () => {
+            if (row.length < maxColumns) {
+                row.push(cell);
+            }
+            cell = '';
+        };
+
+        const pushRow = () => {
+            pushCell();
+            if (row.length > 1 || String(row[0] || '').length > 0) {
+                if (rows.length < maxRows) {
+                    rows.push(row);
+                } else {
+                    truncatedRows = true;
+                }
+            }
+            row = [];
+        };
+
+        for (let i = 0; i < text.length; i++) {
+            const ch = text[i];
+            const next = text[i + 1];
+
+            if (ch === '"') {
+                if (inQuotes && next === '"') {
+                    cell += '"';
+                    i++;
+                } else {
+                    inQuotes = !inQuotes;
+                }
+                continue;
+            }
+
+            if (!inQuotes && ch === delimiter) {
+                pushCell();
+                continue;
+            }
+
+            if (!inQuotes && (ch === '\n' || ch === '\r')) {
+                pushRow();
+                if (ch === '\r' && next === '\n') i++;
+                continue;
+            }
+
+            cell += ch;
+        }
+
+        if (cell.length > 0 || row.length > 0 || text.endsWith(delimiter)) {
+            pushRow();
+        }
+
+        return { rows, delimiter, truncatedRows };
+    }
+
+    function summarizeCsv(csvText) {
+        const parsed = parseCsvRows(csvText, {
+            maxRows: 10001,
+            maxColumns: CSV_TABLE_MAX_RENDER_COLUMNS
+        });
+        const columnCount = parsed.rows.reduce((max, row) => Math.max(max, row.length), 0);
+        return {
+            rowCount: Math.max(0, parsed.rows.length - 1),
+            columnCount,
+            delimiter: parsed.delimiter,
+            truncatedRows: parsed.truncatedRows
+        };
+    }
+
+    function compareCsvCells(a, b) {
+        const left = String(a ?? '').trim();
+        const right = String(b ?? '').trim();
+        const leftNumber = Number(left.replace(/,/g, ''));
+        const rightNumber = Number(right.replace(/,/g, ''));
+        if (left && right && Number.isFinite(leftNumber) && Number.isFinite(rightNumber)) {
+            return leftNumber - rightNumber;
+        }
+        return left.localeCompare(right, undefined, {
+            numeric: true,
+            sensitivity: 'base'
+        });
+    }
+
+    function renderCsvTableContent(responseDiv, nodeModel, csvText) {
+        if (!(responseDiv instanceof HTMLElement)) {
+            return;
+        }
+
+        responseDiv.innerHTML = '';
+        const parsed = parseCsvRows(csvText, {
+            maxRows: CSV_TABLE_MAX_RENDER_ROWS + 1,
+            maxColumns: CSV_TABLE_MAX_RENDER_COLUMNS
+        });
+        const rows = parsed.rows;
+        const columnCount = rows.reduce((max, row) => Math.max(max, row.length), 0);
+
+        if (columnCount === 0) {
+            return;
+        }
+
+        const headerRow = rows[0] || [];
+        const headers = Array.from({ length: columnCount }, (_, index) => {
+            const value = String(headerRow[index] ?? '').trim();
+            return value || `Column ${index + 1}`;
+        });
+        const dataRows = rows.slice(1).map((cells, index) => ({
+            cells,
+            originalIndex: index
+        }));
+
+        const table = document.createElement('table');
+        table.className = 'csv-table';
+        table.dataset.nodeId = nodeModel.id || nodeModel.Id || '';
+
+        const thead = document.createElement('thead');
+        const headerTr = document.createElement('tr');
+        const tbody = document.createElement('tbody');
+        let sortColumn = -1;
+        let sortDirection = 'asc';
+
+        const renderBody = () => {
+            tbody.innerHTML = '';
+            const nextRows = dataRows.slice();
+            if (sortColumn >= 0) {
+                nextRows.sort((a, b) => {
+                    const result = compareCsvCells(a.cells[sortColumn], b.cells[sortColumn]);
+                    if (result !== 0) {
+                        return sortDirection === 'asc' ? result : -result;
+                    }
+                    return a.originalIndex - b.originalIndex;
+                });
+            }
+
+            nextRows.forEach(rowData => {
+                const tr = document.createElement('tr');
+                for (let columnIndex = 0; columnIndex < columnCount; columnIndex++) {
+                    const td = document.createElement('td');
+                    td.className = 'csv-table-cell';
+                    td.textContent = String(rowData.cells[columnIndex] ?? '');
+                    tr.appendChild(td);
+                }
+                tbody.appendChild(tr);
+            });
+        };
+
+        const updateHeaderSortState = () => {
+            headerTr.querySelectorAll('.csv-table-header-button').forEach((button, index) => {
+                const active = index === sortColumn;
+                button.dataset.sort = active ? sortDirection : '';
+                button.setAttribute('aria-sort', active ? (sortDirection === 'asc' ? 'ascending' : 'descending') : 'none');
+            });
+        };
+
+        headers.forEach((header, index) => {
+            const th = document.createElement('th');
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'csv-table-header-button';
+            button.textContent = header;
+            button.dataset.columnIndex = String(index);
+            button.setAttribute('aria-sort', 'none');
+            button.addEventListener('mousedown', event => {
+                event.preventDefault();
+                event.stopPropagation();
+            });
+            button.addEventListener('click', event => {
+                event.preventDefault();
+                event.stopPropagation();
+                if (sortColumn === index) {
+                    sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
+                } else {
+                    sortColumn = index;
+                    sortDirection = 'asc';
+                }
+                updateHeaderSortState();
+                renderBody();
+            });
+            th.appendChild(button);
+            headerTr.appendChild(th);
+        });
+
+        thead.appendChild(headerTr);
+        table.appendChild(thead);
+        table.appendChild(tbody);
+        responseDiv.appendChild(table);
+        renderBody();
+    }
+
+    window.MindMapCsvTable = {
+        detectCsvDelimiter,
+        parseCsvRows,
+        summarizeCsv,
+        renderCsvTableContent
+    };
     // ▲▲▲ [Perf] ▲▲▲
 
     // ▼▼▼ [New] 기본 마크다운 스타일 주입 ▼▼▼
@@ -98,11 +349,118 @@
             .markdown-body a:hover { text-decoration: underline; }
             .markdown-body img { max-width: 100%; box-sizing: content-box; background-color: #fff; }
             .markdown-body table { border-spacing: 0; border-collapse: collapse; width: 100%; margin-bottom: 1em; }
-            .markdown-body table th, .markdown-body table td { padding: 6px 13px; border: 1px solid #dfe2e5; }
-            .markdown-body table th { font-weight: 600; background-color: #f6f8fa; }
-            .markdown-body hr { height: 0.25em; padding: 0; margin: 24px 0; background-color: #e1e4e8; border: 0; }
-            /* Force list markers to be visible */
-            .markdown-body ul li { list-style-type: disc; }
+            .markdown-body table th, .markdown-body table td { padding: 6px 13px; border: 1px solid #dfe2e5; }
+            .markdown-body table th { font-weight: 600; background-color: #f6f8fa; }
+            .markdown-body hr { height: 0.25em; padding: 0; margin: 24px 0; background-color: #e1e4e8; border: 0; }
+            .map-node-csv-table {
+                border: 1px solid rgba(203, 213, 225, 0.92);
+                box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
+            }
+            .csv-table-scroll {
+                width: 100%;
+                height: 100%;
+                flex: 1 1 auto;
+                min-height: 0;
+                overflow: auto;
+                background: #ffffff;
+                border: 1px solid rgba(226, 232, 240, 0.96);
+                border-radius: 6px;
+                box-sizing: border-box;
+                scrollbar-width: thin;
+                scrollbar-color: rgba(100, 116, 139, 0.36) transparent;
+                pointer-events: auto;
+                padding-right: 0 !important;
+                user-select: text;
+                -webkit-user-select: text;
+            }
+            .csv-table-scroll::-webkit-scrollbar {
+                width: 8px;
+                height: 8px;
+            }
+            .csv-table-scroll::-webkit-scrollbar-thumb {
+                background: rgba(100, 116, 139, 0.34);
+                border-radius: 999px;
+            }
+            .csv-table-scroll:hover::-webkit-scrollbar-thumb {
+                background: rgba(71, 85, 105, 0.48);
+            }
+            .csv-table {
+                width: max-content;
+                min-width: 100%;
+                border-collapse: separate;
+                border-spacing: 0;
+                color: #111827;
+                font-size: 12px;
+                line-height: 1.45;
+            }
+            .csv-table th {
+                position: sticky;
+                top: 0;
+                z-index: 2;
+                padding: 0;
+                border-bottom: 1px solid #cbd5e1;
+                border-right: 1px solid #e2e8f0;
+                background: #f8fafc;
+                text-align: left;
+                white-space: nowrap;
+            }
+            .csv-table th:last-child,
+            .csv-table td:last-child {
+                border-right: 0;
+            }
+            .csv-table-header-button {
+                width: 100%;
+                min-width: 88px;
+                border: 0;
+                background: transparent;
+                color: #334155;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                gap: 10px;
+                padding: 8px 10px;
+                font: inherit;
+                font-weight: 700;
+                text-align: left;
+                white-space: nowrap;
+            }
+            .csv-table-header-button::after {
+                content: "";
+                width: 0;
+                height: 0;
+                border-left: 4px solid transparent;
+                border-right: 4px solid transparent;
+                opacity: 0.38;
+            }
+            .csv-table-header-button[data-sort="asc"]::after {
+                border-bottom: 6px solid #2563eb;
+                opacity: 1;
+            }
+            .csv-table-header-button[data-sort="desc"]::after {
+                border-top: 6px solid #2563eb;
+                opacity: 1;
+            }
+            .csv-table-header-button:hover,
+            .csv-table-header-button:focus-visible {
+                background: #eef2ff;
+                outline: none;
+            }
+            .csv-table td {
+                max-width: 280px;
+                padding: 7px 10px;
+                border-right: 1px solid #eef2f7;
+                border-bottom: 1px solid #eef2f7;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                background: #ffffff;
+            }
+            .csv-table tr:nth-child(even) td {
+                background: #fbfdff;
+            }
+            /* Force list markers to be visible */
+            .markdown-body ul li { list-style-type: disc; }
             .markdown-body ol li { list-style-type: decimal; }
             
             /* ▼▼▼ [NEW] 슬림 스크롤바 스타일 - 모든 텍스트/노트/코드 영역 (Razor + JS 동적노드 전체) ▼▼▼ */
@@ -3514,14 +3872,15 @@
     const CSS3D_WRAPPER_WEBKIT_TRANSITION = '-webkit-box-shadow .22s ease, -webkit-filter .22s ease';
     const TEXT_OVERLAY_SUPPORTED_TYPES = new Set(['text', 'markdown', 'note', 'code', 'memo']);
     const TEXT_SELECTION_OVERLAY_SUPPORTED_TYPES = new Set(['text', 'markdown']);
-    const TEXT_INTERACTION_SCROLLABLE_SELECTORS = '.node-response, .note-content, .markdown-body, .prose, .note-textarea, .code-body, .code-content, .pdf-content, .text-content, .file-content, .map-node-memo__body, .map-node-memo__body-view, .map-node-memo__agent-plan-body, .map-node-memo__agent-console-body, pre, code';
-    const TEXT_INTERACTION_CONTENT_SELECTORS = '.node-response, .code-body, .text-content, .markdown-body, .prose';
+    const TEXT_INTERACTION_SCROLLABLE_SELECTORS = '.node-response, .note-content, .markdown-body, .prose, .note-textarea, .code-body, .code-content, .csv-table-scroll, .csv-table-scroll *, .pdf-content, .text-content, .file-content, .map-node-memo__body, .map-node-memo__body-view, .map-node-memo__agent-plan-body, .map-node-memo__agent-console-body, pre, code';
+    const TEXT_INTERACTION_CONTENT_SELECTORS = '.node-response, .code-body, .text-content, .markdown-body, .prose, .csv-table-scroll, .csv-table-cell';
     const TEXT_OVERLAY_SCROLL_SYNC_SELECTORS = [
         '.node-response',
         '.note-content',
         '.markdown-body',
         '.prose',
         '.code-body',
+        '.csv-table-scroll',
         '.note-textarea',
         '.map-node-memo__body',
         '.map-node-memo__body-view',
@@ -3625,7 +3984,7 @@
         }
 
         const contentType = String(nodeModel?.contentType ?? nodeModel?.ContentType ?? '').trim().toLowerCase();
-        return ['memo', 'note', 'text', 'markdown', 'code', 'embed', 'pdf', 'image', 'video'].includes(contentType);
+        return ['memo', 'note', 'text', 'markdown', 'code', CSV_TABLE_CONTENT_TYPE, 'embed', 'pdf', 'image', 'video'].includes(contentType);
     }
 
     function isAgentStyledMemoNode(nodeModel) {
@@ -13278,7 +13637,10 @@
             frameUrl: source,
             receivedAt: String(readRemoteFleetObjectField(frame, 'receivedAt', 'ReceivedAt', '') || '').trim(),
             capturedAt: String(readRemoteFleetObjectField(frame, 'capturedAt', 'CapturedAt', '') || '').trim(),
-            streamId: String(readRemoteFleetObjectField(frame, 'streamId', 'StreamId', '') || '').trim()
+            streamId: String(readRemoteFleetObjectField(frame, 'streamId', 'StreamId', '') || '').trim(),
+            contentHash: String(readRemoteFleetObjectField(frame, 'contentHash', 'ContentHash', '') || '').trim(),
+            captureMs: Number(readRemoteFleetObjectField(frame, 'captureMs', 'CaptureMs', 0)) || 0,
+            sameContentStreak: Number(readRemoteFleetObjectField(frame, 'sameContentStreak', 'SameContentStreak', 0)) || 0
         };
     }
 
@@ -13551,7 +13913,10 @@
             frameUrl: String(frame?.frameUrl || '').trim(),
             receivedAt: String(frame?.receivedAt || '').trim(),
             capturedAt: String(frame?.capturedAt || '').trim(),
-            streamId: String(frame?.streamId || '').trim()
+            streamId: String(frame?.streamId || '').trim(),
+            contentHash: String(frame?.contentHash || '').trim(),
+            captureMs: Number(frame?.captureMs || 0) || 0,
+            sameContentStreak: Number(frame?.sameContentStreak || 0) || 0
         };
     }
 
@@ -13643,6 +14008,9 @@
         preview.dataset.remoteFleetFrameSeq = String(nextSeq || 0);
         preview.dataset.remoteFleetFrameUrl = frame.frameUrl;
         preview.dataset.remoteFleetFrameAt = frame.receivedAt || frame.capturedAt || '';
+        preview.dataset.remoteFleetFrameHash = frame.contentHash || '';
+        preview.dataset.remoteFleetFrameCaptureMs = String(Number(frame.captureMs || 0) || 0);
+        preview.dataset.remoteFleetFrameSameContentStreak = String(Number(frame.sameContentStreak || 0) || 0);
 
         const placeholder = preview.querySelector('[data-remote-fleet-screen-placeholder="true"]');
         if (placeholder) {
@@ -13679,6 +14047,9 @@
         image.dataset.remoteFleetFrameKind = frame.kind;
         image.dataset.remoteFleetFrameSeq = String(nextSeq || 0);
         image.dataset.remoteFleetFrameUrl = frame.frameUrl;
+        image.dataset.remoteFleetFrameHash = frame.contentHash || '';
+        image.dataset.remoteFleetFrameCaptureMs = String(Number(frame.captureMs || 0) || 0);
+        image.dataset.remoteFleetFrameSameContentStreak = String(Number(frame.sameContentStreak || 0) || 0);
         image.loading = frame.kind === 'thumbnail' ? 'lazy' : 'eager';
         image.style.display = 'block';
         if (image.src !== frame.frameUrl) {
@@ -13879,6 +14250,36 @@
     }
 
     function applyRemoteFleetFramePatchToPreview(preview, frame) {
+        if (String(frame?.kind || '').toLowerCase() === 'live') {
+            if (!preview || !isRemoteFleetFrameNewerForPreview(preview, frame, false)) {
+                return false;
+            }
+
+            const image = ensureRemoteFleetFrameImage(preview, frame);
+            if (!image) {
+                return false;
+            }
+
+            preview._remoteFleetPendingFrame = null;
+            delete preview.dataset.remoteFleetPendingFrameKind;
+            delete preview.dataset.remoteFleetPendingFrameSeq;
+            delete preview.dataset.remoteFleetPendingFrameUrl;
+
+            const committed = commitRemoteFleetFrameToPreview(preview, image, cloneRemoteFleetFramePatch(frame));
+            if (committed) {
+                window.RuntimeTrace?.emit?.('remote.frame.uiPatched', {
+                    count: 1,
+                    kind: frame.kind,
+                    seq: frame.frameSeq,
+                    surface: 'img-direct-live',
+                    contentHash: frame.contentHash || '',
+                    sameContentStreak: Number(frame.sameContentStreak || 0) || 0,
+                    captureMs: Number(frame.captureMs || 0) || 0
+                });
+            }
+            return committed;
+        }
+
         return queueRemoteFleetFramePaint(preview, frame);
     }
 
@@ -19154,7 +19555,8 @@
         const hasContent = !!(`${content}`.trim());
         const defaultPrompts = ['Note', 'Pasted Text', '에이전트 메모'];
         const shouldShowPrompt = !!prompt && !defaultPrompts.includes(prompt);
-        const isTextualCardNode = ['note', 'code', 'text', 'markdown'].includes(contentTypeLower);
+        const isCsvTableNode = contentTypeLower === CSV_TABLE_CONTENT_TYPE;
+        const isTextualCardNode = ['note', 'code', 'text', 'markdown', CSV_TABLE_CONTENT_TYPE].includes(contentTypeLower);
         const copyablePromptText = getCopyablePromptText(nodeModel, prompt);
         const shouldShowPromptCopyButton = contentTypeLower === 'note' && shouldShowPrompt && !!copyablePromptText;
         ensurePromptCopyDelegation();
@@ -19167,7 +19569,7 @@
         // [Fix] Add 'map-node-note' class for Note nodes so interactions module recognizes them
         const isNoteNode = contentTypeLower === 'note';
         const isCodeClassNode = contentTypeLower === 'code';
-        container.className = `map-node css3d-dynamic-node${isImageNode ? ' map-node-image-container' : ''}${isEmbedNode ? ' map-node-embed' : ''}${isNoteNode ? ' map-node-note' : ''}${isCodeClassNode ? ' map-node-code' : ''}${isAgentNode ? ' map-node-agent' : ''}`;
+        container.className = `map-node css3d-dynamic-node${isImageNode ? ' map-node-image-container' : ''}${isEmbedNode ? ' map-node-embed' : ''}${isNoteNode ? ' map-node-note' : ''}${isCodeClassNode ? ' map-node-code' : ''}${isCsvTableNode ? ' map-node-csv-table' : ''}${isAgentNode ? ' map-node-agent' : ''}`;
         container.dataset.nodeId = nodeModel.id;
         container.style.cssText = `
             width: ${width}px;
@@ -19175,7 +19577,7 @@
             background: ${isMediaNode ? 'transparent' : 'white'};
             ${isMediaNode ? 'border: 0; outline: 0;' : ''}
             border-radius: 0px;
-            padding: ${isMediaNode ? '0' : (isCodeClassNode ? '12px 8px 12px 14px' : (isTextualCardNode ? '12px 8px 12px 14px' : '12px 4px 12px 12px'))};
+            padding: ${isMediaNode ? '0' : (isCsvTableNode ? '10px' : (isCodeClassNode ? '12px 8px 12px 14px' : (isTextualCardNode ? '12px 8px 12px 14px' : '12px 4px 12px 12px')))};
             box-sizing: border-box;
             overflow: hidden;
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -19285,7 +19687,23 @@
         // Variable isNoteNode declared above
         const isMarkdownType = ['text', 'markdown'].includes(contentTypeLower); // Removed 'note'
 
-        if (isCodeNode) {
+        if (isCsvTableNode) {
+            responseDiv.className = 'node-response csv-table-scroll';
+            responseDiv.style.cssText = `
+                width: 100%;
+                height: 100%;
+                flex: 1 1 auto;
+                min-height: 0;
+                overflow: auto;
+                pointer-events: auto;
+                box-sizing: border-box;
+                user-select: text;
+                -webkit-user-select: text;
+            `;
+            responseDiv.dataset.src = content;
+            responseDiv.dataset.nodeId = nodeModel.id;
+            renderCsvTableContent(responseDiv, nodeModel, content);
+        } else if (isCodeNode) {
             responseDiv.className = 'node-response code-body';
             // ▼▼▼ [FIX] 슬림 스크롤바 인라인 스타일 추가 ▼▼▼
             responseDiv.style.cssText = `
@@ -19559,6 +19977,7 @@
             || contentTypeLower === 'markdown'
             || contentTypeLower === 'note'
             || contentTypeLower === 'memo'
+            || contentTypeLower === CSV_TABLE_CONTENT_TYPE
             || contentTypeLower === 'templatelauncher'
             || contentTypeLower === 'image'
             || contentTypeLower === 'video'
@@ -19572,7 +19991,7 @@
             // text/markdown type has no Blazor template, so create dynamically.
             // [FIX] 'note' type also falls back to dynamic creation if not found (or if we force dynamic for consistent MD)
             // But usually 'note' comes from Razor. If missing, we create it.
-            const dynamicTypes = ['text', 'markdown', 'code', 'note', 'memo', 'templatelauncher', 'image', 'video', 'embed'];
+            const dynamicTypes = ['text', 'markdown', 'code', 'note', 'memo', CSV_TABLE_CONTENT_TYPE, 'templatelauncher', 'image', 'video', 'embed'];
 
             if (remoteFleetMonitor || dynamicTypes.includes(contentTypeLower)) {
                 log(`[MindMapCss3DManager] Creating dynamic DOM element for ${visualContentTypeLower || contentTypeLower} node ${nodeModel.id}`);
@@ -19724,7 +20143,7 @@
                 && !isRemoteFleetMonitorNode(nodeModel);
             // Enable pointer events for scrollable content so user can scroll/select text
             const scrollables = clonedElement.querySelectorAll(
-                '.node-response, .note-content, .markdown-body, .prose, .note-textarea, textarea, [id^="node-response-"], [id^="node-textarea-"], .code-body, .text-content, .embed-content, .embed-card, .embed-card *, .embed-action, .embed-play-button, .node-prompt-copy-button, .node-prompt-copy-button *, iframe, .map-node-memo__title, .map-node-memo__body, .map-node-memo__icon-button, .map-node-memo__icon-popover, .map-node-memo__icon-option, .map-node-memo__agent-role-select, .map-node-memo__agent-role-select-button, .map-node-memo__agent-role-menu, .map-node-memo__agent-role-option, .map-node-memo__agent-action, .map-node-memo__agent-plan-panel, .map-node-memo__agent-plan-body, .map-node-memo__agent-plan-body *, .map-node-memo__agent-console-panel, .map-node-memo__agent-console-body, .map-node-memo__agent-console-resize, .map-node-memo__agent-console-resize *, .map-node-memo__agent-result-link, .map-node-template-card, .map-node-template-card *, [data-template-card-interactive="true"]'
+                '.node-response, .note-content, .markdown-body, .prose, .note-textarea, textarea, [id^="node-response-"], [id^="node-textarea-"], .code-body, .text-content, .csv-table-scroll, .csv-table-scroll *, .csv-table-header-button, .embed-content, .embed-card, .embed-card *, .embed-action, .embed-play-button, .node-prompt-copy-button, .node-prompt-copy-button *, iframe, .map-node-memo__title, .map-node-memo__body, .map-node-memo__icon-button, .map-node-memo__icon-popover, .map-node-memo__icon-option, .map-node-memo__agent-role-select, .map-node-memo__agent-role-select-button, .map-node-memo__agent-role-menu, .map-node-memo__agent-role-option, .map-node-memo__agent-action, .map-node-memo__agent-plan-panel, .map-node-memo__agent-plan-body, .map-node-memo__agent-plan-body *, .map-node-memo__agent-console-panel, .map-node-memo__agent-console-body, .map-node-memo__agent-console-resize, .map-node-memo__agent-console-resize *, .map-node-memo__agent-result-link, .map-node-template-card, .map-node-template-card *, [data-template-card-interactive="true"]'
             );
             scrollables.forEach(el => {
                 el.style.pointerEvents = 'auto';
@@ -19732,7 +20151,7 @@
                     el.style.userSelect = 'none';
                     el.style.webkitUserSelect = 'none';
                     el.style.cursor = 'ns-resize';
-                } else if (el.matches('.embed-action, .embed-play-button, .embed-card, .embed-card *, .node-prompt-copy-button, .node-prompt-copy-button *, iframe, .map-node-memo__icon-button, .map-node-memo__icon-popover, .map-node-memo__icon-option, .map-node-memo__agent-role-select, .map-node-memo__agent-role-select-button, .map-node-memo__agent-role-menu, .map-node-memo__agent-role-option, .map-node-memo__agent-action, .map-node-memo__agent-result-link, .template-card__option, .template-card__generate')) {
+                } else if (el.matches('.csv-table-header-button, .embed-action, .embed-play-button, .embed-card, .embed-card *, .node-prompt-copy-button, .node-prompt-copy-button *, iframe, .map-node-memo__icon-button, .map-node-memo__icon-popover, .map-node-memo__icon-option, .map-node-memo__agent-role-select, .map-node-memo__agent-role-select-button, .map-node-memo__agent-role-menu, .map-node-memo__agent-role-option, .map-node-memo__agent-action, .map-node-memo__agent-result-link, .template-card__option, .template-card__generate')) {
                     el.style.userSelect = 'none';
                     el.style.webkitUserSelect = 'none';
                     el.style.cursor = 'pointer';
@@ -20197,8 +20616,16 @@
         if (responseEl) {
             responseEl.style.display = (isLoading && !hasContent) ? 'none' : '';
             const isCodeNode = contentTypeLower === 'code';
-
-            if (isCodeNode) {
+            const isCsvTableNode = contentTypeLower === CSV_TABLE_CONTENT_TYPE;
+
+            if (isCsvTableNode) {
+                if (!responseEl.classList.contains('csv-table-scroll')) {
+                    responseEl.className = 'node-response csv-table-scroll';
+                }
+                responseEl.dataset.src = content || '';
+                responseEl.dataset.nodeId = nodeModel.id || nodeModel.Id || '';
+                renderCsvTableContent(responseEl, nodeModel, content);
+            } else if (isCodeNode) {
                 renderCodeBodyContent(responseEl, content);
             } else {
                 // Unified Markdown Rendering with Caching