yaml-flow 4.0.0 → 5.1.0

package/browser/live-cards.js

@@ -1,7 +1,7 @@
 // live-cards.js — LiveCards v3: Node-based Board/Canvas engine
 //
-// Schema: Each node has { id, state } required; all else optional.
-//   id, meta, state, requires, provides, sources, compute, view
+// Schema: Each node has { id } required; all else optional.
+//   id, meta, card_data, requires, provides, sources, compute, view
 //   Nodes with view render as cards; nodes with sources but no view render as source pills in canvas.
 //   compute[] — ordered array of { bindTo, expr } JSONata steps → writes to node.computed_values (ephemeral)
 //   sources[] — open objects: only bindTo + outputFile matter to the engine; all other fields are
@@ -14,7 +14,7 @@
 // Uses CardCompute (card-compute.js) for declarative compute expressions.
 //
 // API:
-//   const engine = LiveCard.init({ resolve, onPatch, onPatchState, onRefresh, onChat, markdown, sanitize, chartLib });
+//   const engine = LiveCard.init({ resolve, onPatch, onPatchState, onRefresh, onAction, getChatMessages, markdown, sanitize, chartLib });
 //   engine.render(node, el, opts?)     — render a card node into a DOM element
 //   engine.update(nodeId, patch)       — in-place update (status, re-render)
 //   engine.destroy(nodeId)             — tear down one node
@@ -64,12 +64,27 @@ var LiveCard = (function () {
       .lc-staged-file { display:flex; align-items:center; gap:.5rem; padding:.125rem 0; }
       .lc-chat-el { display:flex; flex-direction:column; }
       .lc-chat-body { flex:1; overflow-y:auto; max-height:300px; padding:.25rem; }
-      .lc-chat-bubble { padding:.375rem .625rem; margin:.25rem 0; border-radius:.75rem; max-width:85%; word-wrap:break-word; font-size:.875rem; }
+      .lc-chat-bubble { padding:.5rem .75rem; margin:.375rem 0; border-radius:.75rem; max-width:85%; word-wrap:break-word; font-size:.875rem; line-height:1.4; }
       .lc-chat-bubble-user { background:var(--bs-primary-bg-subtle,#cfe2ff); margin-left:auto; }
       .lc-chat-bubble-assistant { background:var(--bs-light,#f8f9fa); }
       .lc-chat-bubble-system { background:transparent; color:var(--bs-secondary,#6c757d); font-style:italic; text-align:center; max-width:100%; font-size:.8rem; }
+      .lc-chat-bubble-pending { opacity:.85; }
+      .lc-chat-bubble-pending .spinner-border { width:.75rem; height:.75rem; margin-left:.4rem; border-width:.12em; vertical-align:middle; }
       .lc-chat-input-bar { display:flex; gap:.25rem; align-items:center; }
+      .lc-chat-modal-input-row { display:flex; align-items:center; gap:.375rem; }
+      .lc-chat-modal-input-row .form-control { min-width:0; }
+      .lc-chat-modal-input-row textarea.form-control { resize:none; overflow-y:hidden; min-height:38px; max-height:120px; }
       .lc-chat-processing { display:flex; align-items:center; gap:.5rem; padding:.25rem .5rem; color:var(--bs-secondary,#6c757d); font-size:.8rem; }
+      .lc-chat-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:12000; display:none; align-items:center; justify-content:center; padding:1rem; }
+      .lc-chat-modal-backdrop.lc-open { display:flex; }
+      .lc-chat-modal-backdrop .modal-dialog { max-height:90vh; }
+      .lc-chat-modal-backdrop .modal-content { display:flex; flex-direction:column; max-height:90vh; }
+      .lc-chat-modal-backdrop .modal-body { overflow-y:auto; flex:1; min-height:200px; padding:1rem; }
+      .lc-files-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:11950; display:none; align-items:center; justify-content:center; padding:1rem; }
+      .lc-files-modal-backdrop.lc-open { display:flex; }
+      .lc-files-modal-backdrop .modal-dialog { max-height:90vh; }
+      .lc-files-modal-backdrop .modal-content { display:flex; flex-direction:column; max-height:90vh; }
+      .lc-files-modal-backdrop .modal-body { overflow-y:auto; flex:1; min-height:200px; padding:1rem; }
       @media (max-width:576px) {
         .lc-metric-value { font-size:1.5rem; }
         .lc-chart-wrap { min-height:150px; }
@@ -179,12 +194,42 @@ var LiveCard = (function () {
       sanitize:     config.sanitize     || null,
       chartLib:     config.chartLib     || null,
       onAction:     config.onAction     || function () {},
+      getChatMessages: config.getChatMessages || null,
     };
 
     const _cleanup = {};   // nodeId → { ac, timers, charts, unsubs }
     const _subs = {};      // nodeId → Set<callback>
     const _renderers = {}; // kind → fn
     const _nodeEls = {};   // nodeId → { container, resultEl, uid }
+    const _chatModal = {
+      backdrop: null,
+      title: null,
+      body: null,
+      input: null,
+      fileInput: null,
+      staged: null,
+      sendBtn: null,
+      attachBtn: null,
+      closeBtn: null,
+      currentNodeId: null,
+      stagedFiles: [],
+      loading: false,
+    };
+    const _filesModal = {
+      backdrop: null,
+      title: null,
+      body: null,
+      staged: null,
+      fileInput: null,
+      dropzone: null,
+      uploadBtn: null,
+      attachBtn: null,
+      closeBtn: null,
+      currentNodeId: null,
+      stagedFiles: [],
+      pollingTimer: null,
+      loading: false,
+    };
 
     // ---- Helpers ----
 
@@ -199,17 +244,466 @@ var LiveCard = (function () {
       return _cleanup[id];
     }
 
-    function _runCompute(node) {
-      if (!node.compute || !node.compute.length) return Promise.resolve();
-      if (typeof CardCompute === 'undefined') return Promise.resolve();
-      return CardCompute.run(node).catch(function (e) {
-        console.error('LiveCard compute error', node.id, e);
+    function _runCompute() {
+      // Runtime payload is authoritative; UI never recomputes derived values.
+      return Promise.resolve();
+    }
+
+    function _ensureChatModal() {
+      if (_chatModal.backdrop) return;
+
+      const backdrop = document.createElement('div');
+      backdrop.className = 'lc-chat-modal-backdrop';
+      backdrop.innerHTML = '' +
+        '<div class="modal-dialog modal-lg modal-dialog-centered" role="dialog" aria-modal="true" aria-label="Card chat">' +
+        '  <div class="modal-content bg-white">' +
+        '    <div class="modal-header border-bottom p-3 d-flex align-items-center justify-content-between">' +
+        '      <h5 class="modal-title lc-chat-modal-title">Chat</h5>' +
+        '      <button type="button" class="btn btn-sm btn-outline-secondary" data-lc-chat-close aria-label="Close"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>' +
+        '    </div>' +
+        '    <div class="modal-body bg-light" data-lc-chat-body></div>' +
+        '    <div class="modal-footer flex-column align-items-stretch border-top p-3 gap-3">' +
+        '      <div data-lc-chat-staged class="small w-100"></div>' +
+        '      <input type="file" class="d-none" data-lc-chat-file multiple>' +
+        '      <div class="lc-chat-modal-input-row mt-2">' +
+        '        <button type="button" class="btn btn-sm btn-outline-secondary" data-lc-chat-attach title="Attach files" aria-label="Attach files">' +
+        '          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>' +
+        '        </button>' +
+        '        <textarea class="form-control" data-lc-chat-input rows="1" placeholder="Type a message..."></textarea>' +
+        '        <button type="button" class="btn btn-sm btn-primary" data-lc-chat-send aria-label="Send">' +
+        '          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>' +
+        '        </button>' +
+        '      </div>' +
+        '    </div>' +
+        '  </div>' +
+        '</div>';
+
+      document.body.appendChild(backdrop);
+      _chatModal.backdrop = backdrop;
+      _chatModal.title = backdrop.querySelector('.lc-chat-modal-title');
+      _chatModal.body = backdrop.querySelector('[data-lc-chat-body]');
+      _chatModal.input = backdrop.querySelector('[data-lc-chat-input]');
+      _chatModal.fileInput = backdrop.querySelector('[data-lc-chat-file]');
+      _chatModal.staged = backdrop.querySelector('[data-lc-chat-staged]');
+      _chatModal.sendBtn = backdrop.querySelector('[data-lc-chat-send]');
+      _chatModal.attachBtn = backdrop.querySelector('[data-lc-chat-attach]');
+      _chatModal.closeBtn = backdrop.querySelector('[data-lc-chat-close]');
+
+      function resizeChatInput() {
+        if (!_chatModal.input) return;
+        _chatModal.input.style.height = 'auto';
+        _chatModal.input.style.height = Math.min(_chatModal.input.scrollHeight, 120) + 'px';
+      }
+
+      const close = function () {
+        _chatModal.currentNodeId = null;
+        _chatModal.stagedFiles = [];
+        _chatModal.staged.innerHTML = '';
+        _chatModal.input.value = '';
+        resizeChatInput();
+        _chatModal.backdrop.classList.remove('lc-open');
+      };
+
+      function renderStagedFiles() {
+        if (!_chatModal.stagedFiles.length) {
+          _chatModal.staged.innerHTML = '';
+          return;
+        }
+        _chatModal.staged.innerHTML = _chatModal.stagedFiles.map(function (f, i) {
+          return '<span class="badge text-bg-light border me-1 mb-1">' + _esc(f.name || 'file') +
+            ' <button type="button" class="btn btn-sm btn-link text-danger p-0 ms-1" data-lc-rm-file="' + i + '">&times;</button></span>';
+        }).join('');
+        _chatModal.staged.querySelectorAll('[data-lc-rm-file]').forEach(function (btn) {
+          btn.addEventListener('click', function () {
+            const idx = parseInt(btn.getAttribute('data-lc-rm-file') || '-1', 10);
+            if (idx >= 0) _chatModal.stagedFiles.splice(idx, 1);
+            renderStagedFiles();
+          });
+        });
+      }
+
+      async function sendMessage() {
+        if (_chatModal.loading || !_chatModal.currentNodeId) return;
+        const nodeId = _chatModal.currentNodeId;
+        const text = (_chatModal.input.value || '').trim();
+        const files = _chatModal.stagedFiles.slice();
+        if (!text && !files.length) return;
+
+        _chatModal.loading = true;
+        _chatModal.sendBtn.disabled = true;
+        _chatModal.attachBtn.disabled = true;
+
+        _appendPendingModalChatMessage(text);
+
+        _chatModal.input.value = '';
+        _chatModal.stagedFiles = [];
+        resizeChatInput();
+        renderStagedFiles();
+
+        try {
+          await Promise.resolve(cfg.onAction(nodeId, 'chat-send', { text, files }));
+        } catch (err) {
+          _clearPendingModalChatMessages();
+          _appendModalChatMessage('system', 'Failed to send message: ' + String((err && err.message) || err), []);
+        } finally {
+          _chatModal.loading = false;
+          _chatModal.sendBtn.disabled = false;
+          _chatModal.attachBtn.disabled = false;
+        }
+      }
+
+      _chatModal.closeBtn.addEventListener('click', close);
+      backdrop.addEventListener('click', function (evt) {
+        if (evt.target === backdrop) close();
+      });
+      _chatModal.attachBtn.addEventListener('click', function () {
+        _chatModal.fileInput.click();
+      });
+      _chatModal.fileInput.addEventListener('change', function (evt) {
+        const files = evt.target && evt.target.files ? Array.from(evt.target.files) : [];
+        for (const f of files) {
+          if (!_chatModal.stagedFiles.find(function (x) { return x.name === f.name && x.size === f.size && x.lastModified === f.lastModified; })) {
+            _chatModal.stagedFiles.push(f);
+          }
+        }
+        evt.target.value = '';
+        renderStagedFiles();
+      });
+      _chatModal.sendBtn.addEventListener('click', sendMessage);
+      _chatModal.input.addEventListener('input', resizeChatInput);
+      _chatModal.input.addEventListener('keydown', function (evt) {
+        if (evt.key === 'Enter' && !evt.shiftKey) {
+          evt.preventDefault();
+          sendMessage();
+        }
+      });
+      resizeChatInput();
+      document.addEventListener('keydown', function (evt) {
+        if (evt.key === 'Escape' && _chatModal.backdrop && _chatModal.backdrop.classList.contains('lc-open')) close();
+      });
+    }
+
+    function _normalizeChatMessages(rawMessages) {
+      const list = Array.isArray(rawMessages) ? rawMessages : [];
+      return list.map(function (msg) {
+        if (!msg || typeof msg !== 'object') return null;
+        const role = typeof msg.role === 'string' ? msg.role : 'system';
+        const text = typeof msg.text === 'string'
+          ? msg.text
+          : (typeof msg.message === 'string' ? msg.message : '');
+        const files = Array.isArray(msg.files) ? msg.files : [];
+        return { role: role.toLowerCase(), text, files };
+      }).filter(Boolean);
+    }
+
+    function _appendModalChatMessage(role, text, files) {
+      _ensureChatModal();
+      if (!_chatModal.body) return;
+
+      const bubble = document.createElement('div');
+      const normalizedRole = role === 'user' || role === 'assistant' ? role : 'system';
+      const roleClass = normalizedRole === 'user'
+        ? 'lc-chat-bubble-user'
+        : (normalizedRole === 'assistant' ? 'lc-chat-bubble-assistant' : 'lc-chat-bubble-system');
+      bubble.className = 'lc-chat-bubble ' + roleClass;
+      bubble.textContent = text || '';
+
+      if (Array.isArray(files) && files.length) {
+        const meta = document.createElement('div');
+        meta.className = 'lc-chat-inline-meta';
+        meta.textContent = files.map(function (f) {
+          if (!f) return 'file';
+          return typeof f === 'string' ? f : (f.name || 'file');
+        }).join(', ');
+        bubble.appendChild(meta);
+      }
+
+      _chatModal.body.appendChild(bubble);
+      _chatModal.body.scrollTop = _chatModal.body.scrollHeight;
+    }
+
+    function _appendPendingModalChatMessage(text) {
+      _ensureChatModal();
+      if (!_chatModal.body) return;
+
+      const bubble = document.createElement('div');
+      bubble.className = 'lc-chat-bubble lc-chat-bubble-user lc-chat-bubble-pending';
+      bubble.setAttribute('data-lc-chat-pending', '1');
+      bubble.textContent = text || '';
+
+      const spinner = document.createElement('span');
+      spinner.className = 'spinner-border spinner-border-sm';
+      spinner.setAttribute('role', 'status');
+      spinner.setAttribute('aria-label', 'Sending');
+      bubble.appendChild(spinner);
+
+      _chatModal.body.appendChild(bubble);
+      _chatModal.body.scrollTop = _chatModal.body.scrollHeight;
+    }
+
+    function _clearPendingModalChatMessages() {
+      if (!_chatModal.body) return;
+      _chatModal.body.querySelectorAll('[data-lc-chat-pending="1"]').forEach(function (el) {
+        if (el && el.parentNode) el.parentNode.removeChild(el);
       });
     }
 
+    async function _refreshModalChatHistory(nodeId) {
+      if (_chatModal.currentNodeId !== nodeId) return;
+
+      const node = cfg.resolve(nodeId);
+      let messages = [];
+      if (typeof cfg.getChatMessages === 'function') {
+        try {
+          messages = await Promise.resolve(cfg.getChatMessages(nodeId));
+        } catch {
+          messages = [];
+        }
+      } else if (node && node.card_data && Array.isArray(node.card_data.messages)) {
+        messages = node.card_data.messages;
+      }
+
+      const normalized = _normalizeChatMessages(messages);
+      _chatModal.body.innerHTML = '';
+      if (!normalized.length) {
+        _chatModal.body.innerHTML = '<div class="text-muted small">No messages yet.</div>';
+        return;
+      }
+      normalized.forEach(function (m) { _appendModalChatMessage(m.role, m.text, m.files); });
+    }
+
+    async function openChatModal(nodeId) {
+      _ensureChatModal();
+      const node = cfg.resolve(nodeId);
+      if (!node) return;
+      const title = (node.card && node.card.meta && node.card.meta.title) || node.id;
+      _chatModal.currentNodeId = nodeId;
+      _chatModal.title.textContent = 'Chat: ' + title;
+      _chatModal.body.innerHTML = '<div class="text-muted small">Loading...</div>';
+      _chatModal.backdrop.classList.add('lc-open');
+
+      // Disable input controls when card_data.features.chat.disabled is true
+      const chatDisabled = !!(node.card_data && node.card_data.features && node.card_data.features.chat && node.card_data.features.chat.disabled);
+      _chatModal.input.disabled = chatDisabled;
+      _chatModal.attachBtn.disabled = chatDisabled;
+      _chatModal.sendBtn.disabled = chatDisabled;
+      _chatModal.input.placeholder = chatDisabled ? 'Chat is disabled for this card.' : 'Type a message...';
+
+      if (!chatDisabled) _chatModal.input.focus();
+      await _refreshModalChatHistory(nodeId);
+    }
+
+    function _ensureFilesModal() {
+      if (_filesModal.backdrop) return;
+
+      const backdrop = document.createElement('div');
+      backdrop.className = 'lc-files-modal-backdrop';
+      backdrop.innerHTML = '' +
+        '<div class="modal-dialog modal-lg modal-dialog-centered" role="dialog" aria-modal="true" aria-label="Card files">' +
+        '  <div class="modal-content bg-white">' +
+        '    <div class="modal-header border-bottom p-3 d-flex align-items-center justify-content-between">' +
+        '      <h5 class="modal-title lc-files-modal-title">Files</h5>' +
+        '      <button type="button" class="btn btn-sm btn-outline-secondary" data-lc-files-close aria-label="Close"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>' +
+        '    </div>' +
+        '    <div class="modal-body bg-light" data-lc-files-body></div>' +
+        '    <div class="modal-footer flex-column align-items-stretch border-top p-3 gap-3">' +
+        '      <div class="lc-dropzone border-2 border-dashed p-4 text-center cursor-pointer rounded" data-lc-files-dz>' +
+        '        <div class="small text-muted mb-2">Drop files here or click to browse</div>' +
+        '        <input type="file" class="d-none" data-lc-files-input multiple>' +
+        '      </div>' +
+        '      <div data-lc-files-staged class="small w-100 d-flex flex-wrap gap-2"></div>' +
+        '      <div class="d-flex justify-content-end gap-2 w-100">' +
+        '        <button type="button" class="btn btn-sm btn-outline-secondary" data-lc-files-attach>Select files</button>' +
+        '        <button type="button" class="btn btn-sm btn-primary" data-lc-files-upload>Upload</button>' +
+        '      </div>' +
+        '    </div>' +
+        '  </div>' +
+        '</div>';
+
+      document.body.appendChild(backdrop);
+      _filesModal.backdrop = backdrop;
+      _filesModal.title = backdrop.querySelector('.lc-files-modal-title');
+      _filesModal.body = backdrop.querySelector('[data-lc-files-body]');
+      _filesModal.staged = backdrop.querySelector('[data-lc-files-staged]');
+      _filesModal.fileInput = backdrop.querySelector('[data-lc-files-input]');
+      _filesModal.dropzone = backdrop.querySelector('[data-lc-files-dz]');
+      _filesModal.uploadBtn = backdrop.querySelector('[data-lc-files-upload]');
+      _filesModal.attachBtn = backdrop.querySelector('[data-lc-files-attach]');
+      _filesModal.closeBtn = backdrop.querySelector('[data-lc-files-close]');
+
+      const close = function () {
+        _filesModal.currentNodeId = null;
+        _filesModal.stagedFiles = [];
+        _filesModal.staged.innerHTML = '';
+        _filesModal.backdrop.classList.remove('lc-open');
+        if (_filesModal.pollingTimer) {
+          clearInterval(_filesModal.pollingTimer);
+          _filesModal.pollingTimer = null;
+        }
+      };
+
+      function renderStagedFiles() {
+        if (!_filesModal.stagedFiles.length) {
+          _filesModal.staged.innerHTML = '';
+          return;
+        }
+        _filesModal.staged.innerHTML = _filesModal.stagedFiles.map(function (f, i) {
+          return '<span class="badge text-bg-light border me-1 mb-1">' + _esc(f.name || 'file') +
+            ' <button type="button" class="btn btn-sm btn-link text-danger p-0 ms-1" data-lc-files-rm="' + i + '">&times;</button></span>';
+        }).join('');
+        _filesModal.staged.querySelectorAll('[data-lc-files-rm]').forEach(function (btn) {
+          btn.addEventListener('click', function () {
+            const idx = parseInt(btn.getAttribute('data-lc-files-rm') || '-1', 10);
+            if (idx >= 0) _filesModal.stagedFiles.splice(idx, 1);
+            renderStagedFiles();
+          });
+        });
+      }
+
+      function addFiles(fileList) {
+        const files = Array.from(fileList || []);
+        for (const f of files) {
+          if (!_filesModal.stagedFiles.find(function (x) { return x.name === f.name && x.size === f.size && x.lastModified === f.lastModified; })) {
+            _filesModal.stagedFiles.push(f);
+          }
+        }
+        renderStagedFiles();
+      }
+
+      async function uploadFiles() {
+        if (_filesModal.loading || !_filesModal.currentNodeId || !_filesModal.stagedFiles.length) return;
+        const nodeId = _filesModal.currentNodeId;
+        const files = _filesModal.stagedFiles.slice();
+        _filesModal.loading = true;
+        _filesModal.uploadBtn.disabled = true;
+        _filesModal.attachBtn.disabled = true;
+        _filesModal.dropzone.classList.add('lc-disabled');
+
+        try {
+          await Promise.resolve(cfg.onAction(nodeId, 'file-upload', { files }));
+          _filesModal.stagedFiles = [];
+          renderStagedFiles();
+          _refreshFilesModalList(nodeId);
+        } catch (err) {
+          _filesModal.staged.innerHTML = '<span class="text-danger">Upload failed: ' + _esc(String((err && err.message) || err)) + '</span>';
+        } finally {
+          _filesModal.loading = false;
+          _filesModal.uploadBtn.disabled = false;
+          _filesModal.attachBtn.disabled = false;
+          _filesModal.dropzone.classList.remove('lc-disabled');
+        }
+      }
+
+      _filesModal.closeBtn.addEventListener('click', close);
+      backdrop.addEventListener('click', function (evt) {
+        if (evt.target === backdrop) close();
+      });
+      _filesModal.attachBtn.addEventListener('click', function () {
+        _filesModal.fileInput.click();
+      });
+      _filesModal.fileInput.addEventListener('change', function (evt) {
+        addFiles(evt.target && evt.target.files ? evt.target.files : []);
+        evt.target.value = '';
+      });
+      _filesModal.uploadBtn.addEventListener('click', uploadFiles);
+      _filesModal.dropzone.addEventListener('click', function () {
+        if (!_filesModal.loading) _filesModal.fileInput.click();
+      });
+      _filesModal.dropzone.addEventListener('dragover', function (evt) {
+        evt.preventDefault();
+        _filesModal.dropzone.classList.add('lc-drag-over');
+      });
+      _filesModal.dropzone.addEventListener('dragleave', function () {
+        _filesModal.dropzone.classList.remove('lc-drag-over');
+      });
+      _filesModal.dropzone.addEventListener('drop', function (evt) {
+        evt.preventDefault();
+        _filesModal.dropzone.classList.remove('lc-drag-over');
+        addFiles(evt.dataTransfer && evt.dataTransfer.files ? evt.dataTransfer.files : []);
+      });
+      document.addEventListener('keydown', function (evt) {
+        if (evt.key === 'Escape' && _filesModal.backdrop && _filesModal.backdrop.classList.contains('lc-open')) close();
+      });
+    }
+
+    function _currentNodeFiles(nodeId) {
+      const node = cfg.resolve(nodeId);
+      const files = node && node.card_data && Array.isArray(node.card_data.files) ? node.card_data.files : [];
+      return files.filter(Boolean);
+    }
+
+    function _refreshFilesModalList(nodeId) {
+      if (_filesModal.currentNodeId !== nodeId) return;
+      const files = _currentNodeFiles(nodeId);
+      if (!files.length) {
+        _filesModal.body.innerHTML = '<div class="alert alert-light border small mb-0">No files uploaded yet.</div>';
+        return;
+      }
+
+      let h = '<div class="list-group list-group-flush">';
+      files.forEach(function (f, idx) {
+        const fileName = f && (f.name || f.stored_name) ? (f.name || f.stored_name) : 'file';
+        const sizeText = f && typeof f.size === 'number' ? ('size: ' + f.size + ' bytes') : '';
+        const stored = f && f.stored_name ? String(f.stored_name) : '';
+        const dl = stored
+          ? '/api/example-board/server/cards/' + encodeURIComponent(nodeId) + '/files/' + idx + '?sn=' + encodeURIComponent(stored)
+          : null;
+        h += '<div class="list-group-item d-flex align-items-center justify-content-between gap-2">';
+        h += '<div class="text-truncate"><div class="small fw-medium">' + _esc(fileName) + '</div>';
+        h += '<div class="small text-muted">' + _esc(sizeText) + '</div></div>';
+        if (dl) {
+          h += '<a class="btn btn-sm btn-outline-secondary flex-shrink-0" href="' + dl + '">Download</a>';
+        }
+        h += '</div>';
+      });
+      h += '</div>';
+      _filesModal.body.innerHTML = h;
+    }
+
+    function openFilesModal(nodeId) {
+      _ensureFilesModal();
+      const node = cfg.resolve(nodeId);
+      if (!node) return;
+
+      const title = (node.card && node.card.meta && node.card.meta.title) || node.id;
+      _filesModal.currentNodeId = nodeId;
+      _filesModal.title.textContent = 'Files: ' + title;
+      _filesModal.backdrop.classList.add('lc-open');
+
+      // Disable upload controls when card_data.features.files.disabled is true
+      const filesDisabled = !!(node.card_data && node.card_data.features && node.card_data.features.files && node.card_data.features.files.disabled);
+      _filesModal.dropzone.classList.toggle('lc-disabled', filesDisabled);
+      _filesModal.attachBtn.disabled = filesDisabled;
+      _filesModal.uploadBtn.disabled = filesDisabled;
+      _filesModal.fileInput.disabled = filesDisabled;
+
+      _refreshFilesModalList(nodeId);
+
+      if (_filesModal.pollingTimer) clearInterval(_filesModal.pollingTimer);
+      _filesModal.pollingTimer = setInterval(function () {
+        _refreshFilesModalList(nodeId);
+      }, 1000);
+    }
+
     function _resolveBind(node, bind) {
-      if (!bind) return undefined;
-      return _deepGet(node, bind);
+      if (!bind || typeof bind !== 'string') return undefined;
+      const parts = _pathParts(bind);
+      if (!parts.length) return undefined;
+
+      const root = parts[0];
+      const rest = parts.slice(1).join('.');
+      const ns = {
+        card: node && node.card ? node.card : {},
+        card_data: node && node.card_data ? node.card_data : {},
+        fetched_sources: node && node.fetched_sources ? node.fetched_sources : {},
+        requires: node && node.requires ? node.requires : {},
+        computed_values: node && node.computed_values ? node.computed_values : {},
+        runtime_state: node && node.runtime_state ? node.runtime_state : {},
+        data_objects: node && node.data_objects ? node.data_objects : {},
+      };
+
+      if (!Object.prototype.hasOwnProperty.call(ns, root)) return undefined;
+      return rest ? _deepGet(ns[root], rest) : ns[root];
     }
 
     // ---- Pub/sub ----
@@ -226,7 +720,7 @@ var LiveCard = (function () {
     }
 
     function _autoSubscribe(node) {
-      const requires = node.requires || [];
+      const requires = (node && node.card && Array.isArray(node.card.requires)) ? node.card.requires : [];
       if (!requires.length) return;
       const cleanup = _getCleanup(node.id);
       cleanup.unsubs = requires.map(upId => subscribe(upId, () => {
@@ -234,10 +728,8 @@ var LiveCard = (function () {
         if (!info || !info.resultEl) return;
         const updated = cfg.resolve(node.id);
         if (!updated) return;
-        _runCompute(updated).then(function () {
-          _renderElements(updated, info.resultEl);
-          notify(node.id);
-        });
+        _renderElements(updated, info.resultEl);
+        notify(node.id);
       }));
     }
 
@@ -678,7 +1170,30 @@ var LiveCard = (function () {
 
     function _renderText(data, el, elemDef) {
       const ed = elemDef.data || {};
+      const format = ed.format || 'default';
       const style = ed.style || 'default';
+
+      // Handle file-links format
+      if (format === 'file-links') {
+        if (!Array.isArray(data) || data.length === 0) {
+          el.innerHTML = '<div class="text-muted small">No files uploaded</div>';
+          return;
+        }
+        const htmlParts = [];
+        data.forEach((file, idx) => {
+          if (!file || !file.stored_name) return;
+          const name = file.name || file.stored_name;
+          const cardId = elemDef.data && elemDef.data.cardId ? elemDef.data.cardId : 'unknown';
+          const downloadUrl = `/api/example-board/server/cards/${encodeURIComponent(cardId)}/files/${idx}?sn=${encodeURIComponent(file.stored_name)}`;
+          const size = file.size ? ` (${Math.round(file.size / 1024)}KB)` : '';
+          htmlParts.push(`<div class="mb-2"><a href="${downloadUrl}" class="btn btn-sm btn-outline-secondary">${_esc(name)}${_esc(size)}</a></div>`);
+        });
+        const html = htmlParts.join('');
+        el.innerHTML = html;
+        return;
+      }
+
+      // Default text rendering
       const tag = style === 'heading' ? 'h4' : 'div';
       const cls = style === 'muted' ? 'text-muted small' : (style === 'heading' ? 'fw-bold' : 'small');
       el.innerHTML = `<${tag} class="${cls}">${_esc(data != null ? String(data) : '')}</${tag}>`;
@@ -708,6 +1223,7 @@ var LiveCard = (function () {
       const signal = cleanup.ac.signal;
       const ed = elemDef.data || {};
       const uploaded = Array.isArray(data) ? data : [];
+      const showUploadedList = ed.showUploadedList === true;
       const showUpload = ed.upload !== false;
       const accept = ed.accept || ['.txt','.csv','.md','.json','.html','.xml','.pdf','.xlsx','.docx','.pptx','.png','.jpg','.jpeg'];
       const acceptSet = new Set(accept.map(e => e.toLowerCase()));
@@ -717,6 +1233,12 @@ var LiveCard = (function () {
 
       let stagedFiles = el._stagedFiles || [];
       el._stagedFiles = stagedFiles;
+      let uploadStatus = el._uploadStatus || {};
+      el._uploadStatus = uploadStatus;
+
+      function keyForFile(f) {
+        return `${f.name}::${f.size}::${f.lastModified || 0}`;
+      }
 
       let h = '';
 
@@ -731,7 +1253,7 @@ var LiveCard = (function () {
       }
 
       // Uploaded files list
-      if (uploaded.length) {
+      if (showUploadedList && uploaded.length) {
         h += '<div class="lc-uploaded-files">';
         uploaded.forEach(f => {
           const name = typeof f === 'string' ? f : (f.name || '');
@@ -756,36 +1278,68 @@ var LiveCard = (function () {
         return;
       }
 
-      const dz = document.getElementById(uid + '-dz');
-      const fi = document.getElementById(uid + '-fi');
-      const stagedEl = document.getElementById(uid + '-staged');
+      const dz = el.querySelector('#' + uid + '-dz');
+      const fi = el.querySelector('#' + uid + '-fi');
+      const stagedEl = el.querySelector('#' + uid + '-staged');
       if (!dz) return;
 
       function addFiles(fileList) {
+        const newlyAdded = [];
         for (const f of fileList) {
           const ext = '.' + f.name.split('.').pop().toLowerCase();
           if (!acceptSet.has(ext)) continue;
-          if (!stagedFiles.find(s => s.name === f.name)) stagedFiles.push(f);
+          if (!stagedFiles.find(s => s.name === f.name)) {
+            stagedFiles.push(f);
+            newlyAdded.push(f);
+            uploadStatus[keyForFile(f)] = 'uploading';
+          }
         }
         renderStaged();
-        cfg.onPatchState(node.id, { _stagedFiles: stagedFiles.map(f => ({ name: f.name, size: f.size })) });
+
+        // Server demos can upload real file blobs immediately via onAction.
+        if (newlyAdded.length && typeof cfg.onAction === 'function') {
+          Promise.resolve(cfg.onAction(node.id, 'file-upload', { files: newlyAdded, elemId: elemDef.id }))
+            .then(() => {
+              const uploadedKeys = new Set(newlyAdded.map(keyForFile));
+              stagedFiles = stagedFiles.filter((f) => !uploadedKeys.has(keyForFile(f)));
+              el._stagedFiles = stagedFiles;
+              newlyAdded.forEach((f) => { delete uploadStatus[keyForFile(f)]; });
+              el._uploadStatus = uploadStatus;
+              renderStaged();
+            })
+            .catch(() => {
+              newlyAdded.forEach((f) => { uploadStatus[keyForFile(f)] = 'error'; });
+              el._uploadStatus = uploadStatus;
+              renderStaged();
+            });
+        }
       }
 
       function renderStaged() {
         if (!stagedFiles.length) { stagedEl.innerHTML = ''; return; }
         let sh = '';
         stagedFiles.forEach((f, i) => {
+          const status = uploadStatus[keyForFile(f)] || 'ready';
           sh += '<div class="lc-staged-file">';
           sh += '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>';
           sh += `<span class="small flex-grow-1 text-truncate">${_esc(f.name)}</span>`;
+          if (status === 'uploading') {
+            sh += '<span class="spinner-border spinner-border-sm text-secondary me-1" role="status" aria-label="Uploading"></span>';
+          } else if (status === 'error') {
+            sh += '<span class="badge bg-danger-subtle text-danger border border-danger-subtle me-1">Failed</span>';
+          }
           sh += `<button class="btn btn-sm btn-link text-danger p-0 lc-rm-staged" data-idx="${i}">&times;</button>`;
           sh += '</div>';
         });
         stagedEl.innerHTML = sh;
         stagedEl.querySelectorAll('.lc-rm-staged').forEach(btn => {
           btn.addEventListener('click', () => {
-            stagedFiles.splice(parseInt(btn.dataset.idx), 1);
+            const idx = parseInt(btn.dataset.idx);
+            const f = stagedFiles[idx];
+            if (f) delete uploadStatus[keyForFile(f)];
+            stagedFiles.splice(idx, 1);
             el._stagedFiles = stagedFiles;
+            el._uploadStatus = uploadStatus;
             renderStaged();
           }, { signal });
         });
@@ -801,7 +1355,7 @@ var LiveCard = (function () {
 
       el._fileUpload = {
         getFiles: () => stagedFiles,
-        clear: () => { stagedFiles = []; el._stagedFiles = []; renderStaged(); },
+        clear: () => { stagedFiles = []; uploadStatus = {}; el._stagedFiles = []; el._uploadStatus = {}; renderStaged(); },
         disable: () => { dz.classList.add('lc-disabled'); fi.disabled = true; },
         enable: () => { dz.classList.remove('lc-disabled'); fi.disabled = false; },
       };
@@ -837,12 +1391,12 @@ var LiveCard = (function () {
 
       el.innerHTML = h;
 
-      const body = document.getElementById(uid + '-body');
-      const input = document.getElementById(uid + '-input');
-      const sendBtn = document.getElementById(uid + '-send');
-      const attachBtn = canAttach ? document.getElementById(uid + '-attach') : null;
-      const fileInput = canAttach ? document.getElementById(uid + '-fi') : null;
-      const stagedEl = canAttach ? document.getElementById(uid + '-staged') : null;
+      const body = el.querySelector('#' + uid + '-body');
+      const input = el.querySelector('#' + uid + '-input');
+      const sendBtn = el.querySelector('#' + uid + '-send');
+      const attachBtn = canAttach ? el.querySelector('#' + uid + '-attach') : null;
+      const fileInput = canAttach ? el.querySelector('#' + uid + '-fi') : null;
+      const stagedEl = canAttach ? el.querySelector('#' + uid + '-staged') : null;
 
       let stagedFiles = [];
 
@@ -996,7 +1550,7 @@ var LiveCard = (function () {
     // ===========================================================================
 
     function _renderElements(node, containerEl) {
-      const view = node.view;
+      const view = node && node.card ? node.card.view : null;
       if (!view || !Array.isArray(view.elements)) { containerEl.innerHTML = ''; return; }
 
       if (_nodeEls[node.id]) _nodeEls[node.id].elements = {};
@@ -1054,7 +1608,7 @@ var LiveCard = (function () {
       const cleanup = _getCleanup(node.id);
       const signal = cleanup.ac.signal;
       const uid = 'lc-' + (node.id || 'x');
-      const features = (node.view && node.view.features) || {};
+      const features = (node.card && node.card.view && node.card.view.features) || {};
 
       // Run compute async before populating elements
       // (compute is triggered in the else branch below after DOM is ready)
@@ -1063,18 +1617,31 @@ var LiveCard = (function () {
 
       // Header bar: status dot + time-ago + refresh button
       const showRefresh = features.refresh !== false && cfg.onRefresh;
-      h += `<div class="d-flex align-items-center gap-2 mb-2">`;
-      h += _statusDot(node.state && node.state.status);
-      h += `<span class="text-muted small">${_timeAgo(node.state && node.state.lastRun)}</span>`;
-      if (node.state && node.state.status === 'error' && node.state.error) {
-        h += `<span class="badge bg-danger small" title="${_esc(node.state.error)}">Error</span>`;
+      h += `<div class="d-flex align-items-center gap-1 mb-2">`;
+      h += _statusDot(node.card_data && node.card_data.status);
+      h += `<span class="text-muted small">${_timeAgo(node.card_data && node.card_data.lastRun)}</span>`;
+      if (node.card_data && node.card_data.status === 'error' && node.card_data.error) {
+        h += `<span class="badge bg-danger small" title="${_esc(node.card_data.error)}">Error</span>`;
       }
+      h += '<div class="d-flex align-items-center gap-1 ms-auto">';
+      const filesCount = (node && node.card_data && Array.isArray(node.card_data.files)) ? node.card_data.files.length : 0;
+      // Files icon button (paperclip)
+      h += `<button class="btn btn-sm btn-outline-secondary d-inline-flex align-items-center" id="${uid}-files-open" title="${filesCount > 0 ? 'Files (' + filesCount + ')' : 'Files'}">`;
+      h += '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>';
+      if (filesCount > 0) h += `<span class="ms-1 small" aria-label="${filesCount} files">${filesCount}</span>`;
+      h += '</button>';
+      // Chat icon button (speech bubble)
+      h += `<button class="btn btn-sm btn-outline-secondary" id="${uid}-chat-open" title="Chat">`;
+      h += '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>';
+      h += '</button>';
+      // Refresh icon button
       if (showRefresh) {
-        h += `<button class="btn btn-sm btn-outline-secondary ms-auto" id="${uid}-refresh" title="Refresh">`;
+        h += `<button class="btn btn-sm btn-outline-secondary" id="${uid}-refresh" title="Refresh">`;
         h += '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg>';
         h += '</button>';
       }
       h += '</div>';
+      h += '</div>';
 
       // Elements area
       h += `<div class="lc-result" id="${uid}-result"></div>`;
@@ -1082,18 +1649,7 @@ var LiveCard = (function () {
       // Notes section (feature toggle)
       if (features.notes && opts.showNotes !== false) {
         h += `<details class="mt-2"><summary class="small fw-medium">Notes</summary>`;
-        h += `<textarea class="form-control form-control-sm mt-1" id="${uid}-notes" rows="3" placeholder="Add notes...">${_esc((node.state && node.state._notes) || '')}</textarea></details>`;
-      }
-
-      // Chat section (feature toggle)
-      if (features.chat && cfg.onChat && opts.showChat !== false) {
-        h += `<details class="mt-2"><summary class="small fw-medium">Chat</summary>`;
-        h += `<div class="lc-chat-messages" id="${uid}-chat"></div>`;
-        h += `<div class="input-group input-group-sm mt-1">`;
-        h += `<input type="text" class="form-control" id="${uid}-chatInput" placeholder="Ask about this card...">`;
-        h += `<button class="btn btn-outline-primary" id="${uid}-chatSend">`;
-        h += '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>';
-        h += '</button></div></details>';
+        h += `<textarea class="form-control form-control-sm mt-1" id="${uid}-notes" rows="3" placeholder="Add notes...">${_esc((node.card_data && node.card_data._notes) || '')}</textarea></details>`;
       }
 
       h += '</div>';
@@ -1103,10 +1659,10 @@ var LiveCard = (function () {
       const resultEl = document.getElementById(uid + '-result');
       _nodeEls[node.id] = { container: containerEl, resultEl, uid };
 
-      if (node.state && node.state.status === 'loading') {
+      if (node.card_data && node.card_data.status === 'loading') {
         resultEl.innerHTML = '<div class="d-flex align-items-center gap-2"><span class="spinner-border spinner-border-sm text-muted"></span><span class="text-muted small">Loading…</span></div>';
-      } else if (node.state && node.state.status === 'error' && node.state.error) {
-        resultEl.innerHTML = `<div class="text-danger small fw-semibold">Refresh failed</div><pre class="text-muted small mt-1" style="white-space:pre-wrap">${_esc(node.state.error)}</pre>`;
+      } else if (node.card_data && node.card_data.status === 'error' && node.card_data.error) {
+        resultEl.innerHTML = `<div class="text-danger small fw-semibold">Refresh failed</div><pre class="text-muted small mt-1" style="white-space:pre-wrap">${_esc(node.card_data.error)}</pre>`;
       } else {
         _runCompute(node).then(function () { _renderElements(node, resultEl); });
       }
@@ -1121,6 +1677,22 @@ var LiveCard = (function () {
         }, { signal });
       }
 
+      const chatBtn = document.getElementById(uid + '-chat-open');
+      if (chatBtn) {
+        chatBtn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          openChatModal(node.id);
+        }, { signal });
+      }
+
+      const filesBtn = document.getElementById(uid + '-files-open');
+      if (filesBtn) {
+        filesBtn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          openFilesModal(node.id);
+        }, { signal });
+      }
+
       // ---- Wire notes ----
       const notesEl = document.getElementById(uid + '-notes');
       if (notesEl) {
@@ -1128,31 +1700,14 @@ var LiveCard = (function () {
         notesEl.addEventListener('input', () => {
           clearTimeout(nTimer);
           nTimer = setTimeout(() => {
-            if (!node.state) node.state = {};
-            node.state._notes = notesEl.value;
+            if (!node.card_data) node.card_data = {};
+            node.card_data._notes = notesEl.value;
             cfg.onPatch(node.id, { _notes: notesEl.value });
           }, 800);
           cleanup.timers.push(nTimer);
         }, { signal });
       }
 
-      // ---- Wire chat ----
-      const chatInput = document.getElementById(uid + '-chatInput');
-      const chatSend = document.getElementById(uid + '-chatSend');
-      if (chatInput && chatSend && cfg.onChat) {
-        const send = () => {
-          const msg = chatInput.value.trim();
-          if (!msg) return;
-          chatInput.value = '';
-          appendChatMessage(node.id, 'user', msg);
-          cfg.onChat(node.id, msg);
-        };
-        chatSend.addEventListener('click', send, { signal });
-        chatInput.addEventListener('keydown', e => {
-          if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
-        }, { signal });
-      }
-
       _autoSubscribe(node);
     }
 
@@ -1182,18 +1737,31 @@ var LiveCard = (function () {
         if (ts) ts.textContent = _timeAgo(patch.lastRun);
       }
 
-      // Merge into node state
+      // Merge into node card_data
       const node = cfg.resolve(nodeId);
       if (!node) return;
-      if (!node.state) node.state = {};
-      if (patch.status) node.state.status = patch.status;
-      if (patch.lastRun) node.state.lastRun = patch.lastRun;
-      if (patch.error !== undefined) node.state.error = patch.error;
+      if (!node.card_data) node.card_data = {};
+      if (patch.status) node.card_data.status = patch.status;
+      if (patch.lastRun) node.card_data.lastRun = patch.lastRun;
+      if (patch.error !== undefined) node.card_data.error = patch.error;
+      if (patch.files !== undefined) node.card_data.files = Array.isArray(patch.files) ? patch.files : [];
+
+      // Keep files count inline inside the files button in the header.
+      const filesBtn = document.getElementById(info.uid + '-files-open');
+      const fileCount = Array.isArray(node.card_data.files) ? node.card_data.files.length : 0;
+      if (filesBtn) {
+        filesBtn.title = fileCount > 0 ? ('Files (' + fileCount + ')') : 'Files';
+        filesBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>' + (fileCount > 0 ? ('<span class="ms-1 small" aria-label="' + fileCount + ' files">' + fileCount + '</span>') : '');
+      }
+
+      // Remove legacy external count label if present from older renders.
+      const filesCountEl = document.getElementById(info.uid + '-files-count');
+      if (filesCountEl && filesCountEl.parentNode) filesCountEl.parentNode.removeChild(filesCountEl);
 
-      if (node.state.status === 'loading') {
+      if (node.card_data.status === 'loading') {
         info.resultEl.innerHTML = '<div class="d-flex align-items-center gap-2"><span class="spinner-border spinner-border-sm text-muted"></span><span class="text-muted small">Loading…</span></div>';
-      } else if (node.state.status === 'error' && node.state.error) {
-        info.resultEl.innerHTML = `<div class="text-danger small fw-semibold">Refresh failed</div><pre class="text-muted small mt-1" style="white-space:pre-wrap">${_esc(node.state.error)}</pre>`;
+      } else if (node.card_data.status === 'error' && node.card_data.error) {
+        info.resultEl.innerHTML = `<div class="text-danger small fw-semibold">Refresh failed</div><pre class="text-muted small mt-1" style="white-space:pre-wrap">${_esc(node.card_data.error)}</pre>`;
       } else {
         _runCompute(node).then(function () { _renderElements(node, info.resultEl); });
       }
@@ -1224,15 +1792,21 @@ var LiveCard = (function () {
     // ===========================================================================
 
     function appendChatMessage(nodeId, role, text) {
-      const info = _nodeEls[nodeId];
-      if (!info) return;
-      const chatEl = info.container.querySelector('.lc-chat-messages');
-      if (!chatEl) return;
-      const msg = document.createElement('div');
-      msg.className = `lc-chat-msg small ${role === 'user' ? 'lc-chat-user' : 'lc-chat-assistant'}`;
-      msg.innerHTML = role === 'assistant' ? _renderMd(text) : _esc(text);
-      chatEl.appendChild(msg);
-      chatEl.scrollTop = chatEl.scrollHeight;
+      if (_chatModal.currentNodeId !== nodeId) return;
+      _appendModalChatMessage(role, text, []);
+    }
+
+    function refreshOpenChatModal() {
+      const nodeId = _chatModal.currentNodeId;
+      if (!nodeId || !_chatModal.backdrop || !_chatModal.backdrop.classList.contains('lc-open')) return;
+      _refreshModalChatHistory(nodeId).catch(function () {});
+    }
+
+    function onServerSseEvent() {
+      const nodeId = _chatModal.currentNodeId;
+      if (!nodeId || !_chatModal.backdrop || !_chatModal.backdrop.classList.contains('lc-open')) return;
+      _clearPendingModalChatMessages();
+      _refreshModalChatHistory(nodeId).catch(function () {});
     }
 
     // ===========================================================================
@@ -1256,6 +1830,10 @@ var LiveCard = (function () {
       notify,
       subscribe,
       appendChatMessage,
+      refreshOpenChatModal,
+      onServerSseEvent,
+      openChatModal,
+      openFilesModal,
       getElement,
       registerRenderer(name, fn) { _renderers[name] = fn; },
       renderers: _renderers,
@@ -1269,6 +1847,7 @@ var LiveCard = (function () {
   function Board(engine, containerEl, opts) {
     opts = opts || {};
     const mode = { current: opts.mode || 'board' };
+    const devMode = { current: opts.devMode || false };
     const nodeList = [];
     const nodeMap = {};        // id → { node, colEl, bodyEl }
     const _positions = {};     // id → { x, y, w, h } for canvas mode
@@ -1342,7 +1921,8 @@ var LiveCard = (function () {
     // ---- Helpers ----
 
     function _colWidth(node) {
-      if (node.view && node.view.layout && node.view.layout.board && node.view.layout.board.col) return node.view.layout.board.col;
+      const view = node && node.card ? node.card.view : null;
+      if (view && view.layout && view.layout.board && view.layout.board.col) return view.layout.board.col;
       return defaultCol;
     }
 
@@ -1352,8 +1932,8 @@ var LiveCard = (function () {
         if (_positions[node.id]) return; // already set
         if (explicit[node.id]) {
           _positions[node.id] = Object.assign({}, explicit[node.id]);
-        } else if (node.view && node.view.layout && node.view.layout.canvas && node.view.layout.canvas.x != null) {
-          _positions[node.id] = Object.assign({}, node.view.layout.canvas);
+        } else if (node.card && node.card.view && node.card.view.layout && node.card.view.layout.canvas && node.card.view.layout.canvas.x != null) {
+          _positions[node.id] = Object.assign({}, node.card.view.layout.canvas);
         } else {
           const col = (i % 4);
           const row = Math.floor(i / 4);
@@ -1363,7 +1943,142 @@ var LiveCard = (function () {
     }
 
     function _getRequires(node) {
-      return node.requires || [];
+      return (node && node.card && Array.isArray(node.card.requires)) ? node.card.requires : [];
+    }
+
+    function _showCardInspector(node) {
+      const modal = document.createElement('div');
+      modal.className = 'modal d-block';
+      modal.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; display: flex; align-items: center; justify-content: center;';
+
+      const dialog = document.createElement('div');
+      dialog.className = 'modal-dialog';
+      dialog.style.cssText = 'width: 92%; max-width: 980px; max-height: 88vh; overflow: auto;';
+
+      const content = document.createElement('div');
+      content.className = 'modal-content';
+
+      const header = document.createElement('div');
+      header.className = 'modal-header';
+      header.innerHTML = `<h5 class="modal-title">Card Inspector: ${_esc((node.card && node.card.meta && node.card.meta.title) || node.id)}</h5><button type="button" class="btn-close" aria-label="Close"></button>`;
+
+      const closeModal = function () { modal.remove(); };
+      header.querySelector('.btn-close').addEventListener('click', closeModal);
+
+      const body = document.createElement('div');
+      body.className = 'modal-body';
+      body.style.cssText = 'max-height: 64vh; overflow-y: auto;';
+
+      const cardSection = document.createElement('div');
+      cardSection.className = 'mb-4';
+      cardSection.innerHTML = '<h6 class="fw-semibold mb-2">Card Object (Editable)</h6>';
+
+      const editableCardObject = JSON.parse(JSON.stringify((node && node.card) ? node.card : {}));
+
+      const editor = document.createElement('textarea');
+      editor.className = 'form-control form-control-sm font-monospace';
+      editor.rows = 16;
+      editor.style.whiteSpace = 'pre';
+      editor.value = JSON.stringify(editableCardObject, null, 2);
+
+      const editorHint = document.createElement('div');
+      editorHint.className = 'small text-muted mt-2';
+      editorHint.textContent = 'Edit JSON and click Submit to apply updates to this card.';
+
+      const editorError = document.createElement('div');
+      editorError.className = 'small text-danger mt-1 d-none';
+
+      const submitBtn = document.createElement('button');
+      submitBtn.type = 'button';
+      submitBtn.className = 'btn btn-primary btn-sm mb-2';
+      submitBtn.textContent = 'Submit';
+
+      cardSection.appendChild(submitBtn);
+      cardSection.appendChild(editor);
+      cardSection.appendChild(editorHint);
+      cardSection.appendChild(editorError);
+      body.appendChild(cardSection);
+
+      const computedSection = document.createElement('div');
+      computedSection.className = 'mb-4';
+      computedSection.innerHTML = '<h6 class="fw-semibold mb-2">Computed Values (Read-only)</h6>';
+      const computedValues = node.computed_values || {};
+      computedSection.innerHTML += `<pre style="background: #f5f5f5; padding: 10px; border-radius: 4px; overflow-x: auto; font-size: 12px; white-space: pre-wrap; word-wrap: break-word;">${_esc(JSON.stringify(computedValues, null, 2))}</pre>`;
+      body.appendChild(computedSection);
+
+      const sourcesSection = document.createElement('div');
+      sourcesSection.className = 'mb-4';
+      sourcesSection.innerHTML = '<h6 class="fw-semibold mb-2">Fetched Sources (Read-only)</h6>';
+      const sourcesData = node.fetched_sources || {};
+      sourcesSection.innerHTML += `<pre style="background: #f5f5f5; padding: 10px; border-radius: 4px; overflow-x: auto; font-size: 12px; white-space: pre-wrap; word-wrap: break-word;">${_esc(JSON.stringify(sourcesData, null, 2))}</pre>`;
+      body.appendChild(sourcesSection);
+
+      const requiresSection = document.createElement('div');
+      requiresSection.className = 'mb-4';
+      requiresSection.innerHTML = '<h6 class="fw-semibold mb-2">Requires (Read-only)</h6>';
+      const requiresData = node.requires || {};
+      requiresSection.innerHTML += `<pre style="background: #f5f5f5; padding: 10px; border-radius: 4px; overflow-x: auto; font-size: 12px; white-space: pre-wrap; word-wrap: break-word;">${_esc(JSON.stringify(requiresData, null, 2))}</pre>`;
+      body.appendChild(requiresSection);
+
+      const stateSection = document.createElement('div');
+      stateSection.className = 'mb-2';
+      stateSection.innerHTML = '<h6 class="fw-semibold mb-2">Runtime Status (Read-only)</h6>';
+      const runtimeState = { status: node.card_data && node.card_data.status, lastRun: node.card_data && node.card_data.lastRun, error: node.card_data && node.card_data.error };
+      stateSection.innerHTML += `<pre style="background: #f5f5f5; padding: 10px; border-radius: 4px; overflow-x: auto; font-size: 12px; white-space: pre-wrap; word-wrap: break-word;">${_esc(JSON.stringify(runtimeState, null, 2))}</pre>`;
+      body.appendChild(stateSection);
+
+      const footer = document.createElement('div');
+      footer.className = 'modal-footer';
+      const closeBtn = document.createElement('button');
+      closeBtn.type = 'button';
+      closeBtn.className = 'btn btn-secondary';
+      closeBtn.textContent = 'Close';
+      closeBtn.addEventListener('click', closeModal);
+
+      submitBtn.addEventListener('click', function () {
+        editorError.classList.add('d-none');
+        editorError.textContent = '';
+        try {
+          const parsed = JSON.parse(editor.value);
+          if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+            throw new Error('Card Object must be a JSON object.');
+          }
+          if (parsed.id && parsed.id !== node.id) {
+            throw new Error('Changing card id is not supported in the inspector.');
+          }
+
+          const fixedId = node.id;
+          const preservedRuntime = {
+            card_data: node.card_data,
+            fetched_sources: node.fetched_sources,
+            requires: node.requires,
+            computed_values: node.computed_values,
+            runtime_state: node.runtime_state,
+            data_objects: node.data_objects,
+          };
+          node.card = parsed;
+          node.id = fixedId;
+          Object.assign(node, preservedRuntime);
+
+          engine.notify(node.id, { inspector: 'card-object-updated' });
+          _render();
+
+          submitBtn.textContent = '✓ Saved';
+          setTimeout(function () { submitBtn.textContent = 'Submit'; }, 1200);
+          closeModal();
+        } catch (err) {
+          editorError.textContent = 'Invalid JSON: ' + String((err && err.message) || err);
+          editorError.classList.remove('d-none');
+        }
+      });
+
+      footer.appendChild(closeBtn);
+      content.appendChild(header);
+      content.appendChild(body);
+      content.appendChild(footer);
+      dialog.appendChild(content);
+      modal.appendChild(dialog);
+      document.body.appendChild(modal);
     }
 
     function _buildCardWrapper(node) {
@@ -1371,16 +2086,32 @@ var LiveCard = (function () {
       wrap.className = 'card shadow-sm h-100';
       const header = document.createElement('div');
       header.className = 'card-header d-flex align-items-center gap-2 py-2';
-      const title = (node.meta && node.meta.title) || node.id;
-      const tags = (node.meta && node.meta.tags) || [];
+      const card = node && node.card ? node.card : {};
+      const title = (card.meta && card.meta.title) || node.id;
+      const tags = (card.meta && card.meta.tags) || [];
       let badgeHtml = '';
-      if ((node.sources && node.sources.length) && !node.view) {
-        var src = node.sources[0] || {};
+      if ((card.sources && card.sources.length) && !card.view) {
+        var src = card.sources[0] || {};
         badgeHtml = '<span class="badge bg-info text-dark ms-auto">' + _esc(src.kind || 'source') + '</span>';
       } else if (tags.length) {
         badgeHtml = tags.map(t => '<span class="badge bg-secondary ms-1">' + _esc(t) + '</span>').join('');
       }
       header.innerHTML = '<strong class="small">' + _esc(title) + '</strong>' + badgeHtml;
+      
+      // Add dev mode code icon button if devMode is enabled
+      if (devMode.current) {
+        const codeBtn = document.createElement('button');
+        codeBtn.className = 'btn btn-sm btn-outline-secondary';
+        codeBtn.style.cssText = 'padding: 2px 6px; margin-left: auto;';
+        codeBtn.innerHTML = '&lt;/&gt;';
+        codeBtn.title = 'Inspect card data';
+        codeBtn.addEventListener('click', function(e) {
+          e.stopPropagation();
+          _showCardInspector(node);
+        });
+        header.appendChild(codeBtn);
+      }
+      
       const body = document.createElement('div');
       body.className = 'card-body p-2';
       wrap.appendChild(header);
@@ -1391,9 +2122,10 @@ var LiveCard = (function () {
     function _buildSourcePill(node) {
       const el = document.createElement('div');
       el.className = 'lc-source-node';
-      const status = (node.state && node.state.status) || 'fresh';
-      const title = (node.meta && node.meta.title) || node.id;
-      const kind = (node.sources && node.sources[0] && node.sources[0].kind) || 'source';
+      const status = (node.card_data && node.card_data.status) || 'fresh';
+      const card = node && node.card ? node.card : {};
+      const title = (card.meta && card.meta.title) || node.id;
+      const kind = (card.sources && card.sources[0] && card.sources[0].kind) || 'source';
       el.innerHTML = `<div class="lc-source-pill shadow-sm">
         ${_statusDot(status)}
         <span class="fw-medium">${_esc(title)}</span>
@@ -1410,10 +2142,10 @@ var LiveCard = (function () {
       gridEl.innerHTML = '';
 
       // Only card nodes in board mode, sorted by order
-      const cards = nodeList.filter(n => n.view).slice();
+      const cards = nodeList.filter(n => n.card && n.card.view).slice();
       cards.sort((a, b) => {
-        const ao = (a.view && a.view.layout && a.view.layout.board && a.view.layout.board.order) || 0;
-        const bo = (b.view && b.view.layout && b.view.layout.board && b.view.layout.board.order) || 0;
+        const ao = (a.card && a.card.view && a.card.view.layout && a.card.view.layout.board && a.card.view.layout.board.order) || 0;
+        const bo = (b.card && b.card.view && b.card.view.layout && b.card.view.layout.board && b.card.view.layout.board.order) || 0;
         return ao - bo;
       });
 
@@ -1491,11 +2223,11 @@ var LiveCard = (function () {
         el.style.left = x + 'px'; el.style.top = y + 'px';
         // Persist
         _positions[node.id] = Object.assign(_positions[node.id] || {}, { x, y });
-        if (node.view) {
-          if (!node.view.layout) node.view.layout = {};
-          if (!node.view.layout.canvas) node.view.layout.canvas = {};
-          node.view.layout.canvas.x = x;
-          node.view.layout.canvas.y = y;
+        if (node.card && node.card.view) {
+          if (!node.card.view.layout) node.card.view.layout = {};
+          if (!node.card.view.layout.canvas) node.card.view.layout.canvas = {};
+          node.card.view.layout.canvas.x = x;
+          node.card.view.layout.canvas.y = y;
         }
         engine.notify(node.id);
         _drawEdges();
@@ -1513,7 +2245,7 @@ var LiveCard = (function () {
       nodeList.forEach(node => {
         const pos = _positions[node.id] || { x: 0, y: 0 };
 
-        if (!node.view && (node.sources && node.sources.length)) {
+        if ((!node.card || !node.card.view) && (node.card && node.card.sources && node.card.sources.length)) {
           const el = _buildSourcePill(node);
           el.dataset.nodeId = node.id;
           el.style.left = pos.x + 'px';
@@ -1660,6 +2392,11 @@ var LiveCard = (function () {
       _render();
     }
 
+    function setDevMode(flag) {
+      devMode.current = !!flag;
+      _render();
+    }
+
     function destroy() {
       ac.abort();
       engine.destroyAll();
@@ -1682,9 +2419,11 @@ var LiveCard = (function () {
       refresh,
       clear,
       setMode,
+      setDevMode,
       autoLayout,
       destroy,
       get mode() { return mode.current; },
+      get devMode() { return devMode.current; },
       get nodes() { return nodeList.slice(); },
       get engine() { return engine; },
     };