yaml-flow 2.6.1 → 2.8.0

package/browser/ingest-board.js

@@ -0,0 +1,296 @@
+// ingest-board.js — Ingest Board: a LiveCard Board type for batch ingest UIs
+//
+// Pure component. Zero I/O (no fetch, no EventSource, no polling).
+// All side-effects delegated to host via callbacks.
+//
+// API:
+//   const ib = IngestBoard.create(containerEl, opts)
+//
+//   ib.setBatches(batches)               — rebuild board from batch array
+//   ib.getChat(boardId)                  — get chat element API for a card
+//   ib.getFileUpload(boardId)            — get file-upload element API for a card
+//   ib.getActions(boardId)               — get actions element API for a card
+//   ib.showChatModal(boardId, messages)  — open Bootstrap modal with chat history
+//   ib.destroy()
+//
+// Required opts:
+//   onSend(boardId, { text, files })     — host handles: upload files + message → call getChat().appendMessage() with results
+//   onConfirm(boardId)                   — host handles: POST confirm → SSE → update board
+//   onDiscard(boardId)                   — host handles: POST discard → call ib.setBatches()
+//
+// Optional opts:
+//   onViewChat(boardId)                  — host handles: fetch chat → call ib.showChatModal()
+//   onRefresh()                          — host handles: fetch batches → call ib.setBatches()
+//   compact         — smaller card columns (default: false)
+//   engine          — existing LiveCard engine (one is created if omitted)
+//   markdown        — markdown renderer fn
+//   sanitize        — HTML sanitizer fn
+
+// eslint-disable-next-line no-unused-vars
+var IngestBoard = (function () {
+  'use strict';
+
+  function create(containerEl, opts) {
+    opts = opts || {};
+    if (!opts.onSend)    throw new Error('IngestBoard: opts.onSend is required');
+    if (!opts.onConfirm) throw new Error('IngestBoard: opts.onConfirm is required');
+    if (!opts.onDiscard) throw new Error('IngestBoard: opts.onDiscard is required');
+
+    const compact     = opts.compact || false;
+    const onSend      = opts.onSend;
+    const onConfirm   = opts.onConfirm;
+    const onDiscard   = opts.onDiscard;
+    const onViewChat  = opts.onViewChat || null;
+    const onRefresh   = opts.onRefresh || null;
+    const mdFn        = opts.markdown || (typeof marked   !== 'undefined' ? function (t) { return marked.parse(t); } : null);
+    const sanFn       = opts.sanitize || (typeof DOMPurify !== 'undefined' ? function (h) { return DOMPurify.sanitize(h); } : null);
+
+    let board = null;
+    const nodes = {};  // id → node
+
+    // ---- Engine ----
+
+    const engine = opts.engine || LiveCard.init({
+      resolve:      function (id) { return nodes[id]; },
+      onPatch:      function () {},
+      onPatchState: function () {},
+      onRefresh:    onRefresh || function () {},
+      onAction:     handleAction,
+      markdown:     mdFn,
+      sanitize:     sanFn,
+    });
+
+    // ---- Action dispatcher (pure — delegates to host callbacks) ----
+
+    function handleAction(nodeId, actionType, payload) {
+      if (actionType === 'chat-send') {
+        // For the "new" card, boardId is null until host creates one
+        var boardId = nodeId === '__new__' ? null : nodeId;
+        onSend(boardId, { text: payload.text, files: payload.files });
+      } else if (actionType === 'action') {
+        if (payload.buttonId === 'confirm') onConfirm(nodeId);
+        else if (payload.buttonId === 'discard') onDiscard(nodeId);
+        else if (payload.buttonId === 'view-chat' && onViewChat) onViewChat(nodeId);
+      }
+    }
+
+    // ---- Node builders ----
+
+    function buildActiveNode(batch) {
+      return {
+        id: batch.id,
+        type: 'card',
+        meta: { title: batch.id, tags: [batch.status === 'open-items' ? 'open-items' : 'ready'] },
+        state: {
+          status: batch.processing ? 'loading' : 'fresh',
+          messages: batch.chat || [],
+          files: batch.files || [],
+          batchStatus: batch.status,
+        },
+        view: {
+          elements: [
+            {
+              id: 'chat',
+              kind: 'chat',
+              data: { bind: 'state.messages', fileAttach: true, placeholder: 'Add files or type a message...' }
+            },
+            {
+              id: 'actions',
+              kind: 'actions',
+              data: {
+                buttons: [
+                  { id: 'confirm', label: 'Confirm & Merge', style: 'success', disabled: batch.status !== 'ready' || !!batch.processing },
+                  { id: 'discard', label: 'Discard', style: 'outline-danger' }
+                ]
+              }
+            }
+          ],
+          layout: { board: { col: compact ? 6 : 8, order: 0 } },
+          features: { refresh: false }
+        }
+      };
+    }
+
+    function buildCompletedNode(batch, order) {
+      var elements = [];
+
+      if (batch.files && batch.files.length) {
+        elements.push({
+          id: 'files',
+          kind: 'file-upload',
+          data: { bind: 'state.files', upload: false }
+        });
+      }
+
+      if (batch.summary) {
+        elements.push({
+          id: 'summary',
+          kind: 'text',
+          data: { bind: 'state.summary', style: 'muted' }
+        });
+      }
+
+      if (batch.chatCount > 0 && onViewChat) {
+        elements.push({
+          id: 'card-actions',
+          kind: 'actions',
+          data: { buttons: [{ id: 'view-chat', label: '\uD83D\uDCAC ' + batch.chatCount + ' message(s)', style: 'outline-secondary' }] }
+        });
+      }
+
+      return {
+        id: batch.id,
+        type: 'card',
+        meta: { title: batch.id, tags: ['confirmed'] },
+        state: {
+          status: 'fresh',
+          files: batch.files || [],
+          summary: batch.summary || '',
+        },
+        view: {
+          elements: elements,
+          layout: { board: { col: compact ? 6 : 4, order: order } },
+          features: { refresh: false }
+        }
+      };
+    }
+
+    function buildNewNode() {
+      return {
+        id: '__new__',
+        type: 'card',
+        meta: { title: 'New Batch', tags: ['new'] },
+        state: { status: 'fresh', messages: [] },
+        view: {
+          elements: [
+            {
+              id: 'chat',
+              kind: 'chat',
+              data: { bind: 'state.messages', fileAttach: true, placeholder: 'Add files or type a message...' }
+            }
+          ],
+          layout: { board: { col: compact ? 6 : 8, order: -1 } },
+          features: { refresh: false }
+        }
+      };
+    }
+
+    // ---- setBatches — rebuild the board from data ----
+
+    function setBatches(batches) {
+      Object.keys(nodes).forEach(function (k) { delete nodes[k]; });
+
+      var hasActive = batches.some(function (b) { return b.status === 'ready' || b.status === 'open-items'; });
+      var allNodes = [];
+
+      if (!hasActive) {
+        var nn = buildNewNode();
+        nodes.__new__ = nn;
+        allNodes.push(nn);
+      }
+
+      var order = 1;
+      batches.forEach(function (b) {
+        var isActive = b.status === 'ready' || b.status === 'open-items';
+        var n = isActive ? buildActiveNode(b) : buildCompletedNode(b, order++);
+        nodes[b.id] = n;
+        allNodes.push(n);
+      });
+
+      if (board) board.destroy();
+      board = LiveCard.Board(engine, containerEl, {
+        nodes: allNodes,
+        mode: 'board',
+        showNotes: false,
+        showChat: false,
+      });
+    }
+
+    // ---- Element accessors (host uses these to push data in) ----
+
+    function getChat(boardId) {
+      var el = engine.getElement(boardId, 'chat');
+      return el && el._chat || null;
+    }
+
+    function getFileUpload(boardId) {
+      var el = engine.getElement(boardId, 'files');
+      return el && el._fileUpload || null;
+    }
+
+    function getActions(boardId) {
+      var el = engine.getElement(boardId, 'actions') || engine.getElement(boardId, 'card-actions');
+      return el && el._actions || null;
+    }
+
+    // ---- Chat modal (pure — caller passes messages) ----
+
+    function showChatModal(boardId, messages) {
+      var existing = document.getElementById('lc-chat-modal');
+      if (existing) existing.remove();
+      var bd = document.querySelector('.modal-backdrop');
+      if (bd) bd.remove();
+
+      var _e = function (t) { var d = document.createElement('div'); d.textContent = t; return d.innerHTML; };
+
+      var wrap = document.createElement('div');
+      wrap.innerHTML =
+        '<div class="modal fade" id="lc-chat-modal" tabindex="-1">' +
+          '<div class="modal-dialog modal-dialog-scrollable">' +
+            '<div class="modal-content">' +
+              '<div class="modal-header">' +
+                '<h6 class="modal-title">' + _e(boardId) + '</h6>' +
+                '<button type="button" class="btn-close" data-bs-dismiss="modal"></button>' +
+              '</div>' +
+              '<div class="modal-body"><div class="lc-chat-body" id="lc-chat-modal-body" style="max-height:none"></div></div>' +
+            '</div>' +
+          '</div>' +
+        '</div>';
+      document.body.appendChild(wrap.firstElementChild);
+
+      var bodyEl = document.getElementById('lc-chat-modal-body');
+      messages.forEach(function (msg) {
+        var bub = document.createElement('div');
+        var rc = msg.role === 'user' ? 'lc-chat-bubble-user'
+          : msg.role === 'assistant' ? 'lc-chat-bubble-assistant'
+          : 'lc-chat-bubble-system';
+        bub.className = 'lc-chat-bubble ' + rc;
+        if (msg.role === 'assistant' && mdFn) {
+          var html = mdFn(msg.text);
+          if (sanFn) html = sanFn(html);
+          bub.innerHTML = html;
+        } else {
+          bub.textContent = msg.text;
+        }
+        bodyEl.appendChild(bub);
+      });
+
+      var modal = new bootstrap.Modal(document.getElementById('lc-chat-modal'));
+      modal.show();
+      document.getElementById('lc-chat-modal').addEventListener('hidden.bs.modal', function () {
+        document.getElementById('lc-chat-modal').remove();
+      });
+    }
+
+    // ---- Lifecycle ----
+
+    function destroy() {
+      if (board) board.destroy();
+      board = null;
+      Object.keys(nodes).forEach(function (k) { delete nodes[k]; });
+    }
+
+    return {
+      setBatches:    setBatches,
+      getChat:       getChat,
+      getFileUpload: getFileUpload,
+      getActions:    getActions,
+      showChatModal: showChatModal,
+      destroy:       destroy,
+      get engine()   { return engine; },
+      get board()    { return board; },
+    };
+  }
+
+  return { create: create };
+})();

package/browser/live-cards.js

@@ -51,10 +51,25 @@ var LiveCard = (function () {
       .lc-todo-item:last-child { border-bottom:none; }
       .lc-notes-preview { min-height:80px; }
       .lc-source-pill { display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 0.75rem; border-radius:2rem; font-size:0.8rem; background:var(--bs-light,#f8f9fa); border:1px solid var(--bs-border-color,#dee2e6); }
+      .lc-dropzone { border:2px dashed var(--bs-border-color,#dee2e6); border-radius:.5rem; padding:1.5rem; text-align:center; cursor:pointer; transition:border-color .15s,background .15s; }
+      .lc-dropzone:hover { border-color:var(--bs-primary,#0d6efd); }
+      .lc-dropzone.lc-drag-over { border-color:var(--bs-primary,#0d6efd); background:rgba(13,110,253,.05); }
+      .lc-dropzone.lc-disabled { pointer-events:none; opacity:.5; }
+      .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-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-input-bar { display:flex; gap:.25rem; align-items:center; }
+      .lc-chat-processing { display:flex; align-items:center; gap:.5rem; padding:.25rem .5rem; color:var(--bs-secondary,#6c757d); font-size:.8rem; }
       @media (max-width:576px) {
         .lc-metric-value { font-size:1.5rem; }
         .lc-chart-wrap { min-height:150px; }
         .lc-chat-msg { max-width:95%; }
+        .lc-chat-body { max-height:200px; }
+        .lc-chat-bubble { max-width:95%; }
       }
     `;
     document.head.appendChild(s);
@@ -150,6 +165,7 @@ var LiveCard = (function () {
       markdown:     config.markdown     || null,
       sanitize:     config.sanitize     || null,
       chartLib:     config.chartLib     || null,
+      onAction:     config.onAction     || function () {},
     };
 
     const _cleanup = {};   // nodeId → { ac, timers, charts, unsubs }
@@ -671,6 +687,276 @@ var LiveCard = (function () {
       el.innerHTML = `<pre class="small mb-0">${_esc(JSON.stringify(data, null, 2))}</pre>`;
     }
 
+    // ---- file-upload ----
+
+    function _renderFileUpload(data, el, elemDef, node) {
+      const cleanup = _getCleanup(node.id);
+      const signal = cleanup.ac.signal;
+      const ed = elemDef.data || {};
+      const uploaded = Array.isArray(data) ? data : [];
+      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()));
+      const multiple = ed.multiple !== false;
+      const placeholder = ed.placeholder || 'Drop files here or click to browse';
+      const uid = 'lc-fu-' + (elemDef.id || Math.random().toString(36).slice(2, 8));
+
+      let stagedFiles = el._stagedFiles || [];
+      el._stagedFiles = stagedFiles;
+
+      let h = '';
+
+      // Drop zone
+      if (showUpload) {
+        h += `<div class="lc-dropzone mb-2" id="${uid}-dz">`;
+        h += '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="text-muted mb-1"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>';
+        h += `<div class="small text-muted">${_esc(placeholder)}</div>`;
+        h += `<input type="file" id="${uid}-fi" class="d-none"${multiple ? ' multiple' : ''} accept="${accept.join(',')}">`;
+        h += '</div>';
+        h += `<div id="${uid}-staged"></div>`;
+      }
+
+      // Uploaded files list
+      if (uploaded.length) {
+        h += '<div class="lc-uploaded-files">';
+        uploaded.forEach(f => {
+          const name = typeof f === 'string' ? f : (f.name || '');
+          const url = typeof f === 'string' ? null : f.url;
+          h += '<div class="d-flex align-items-center gap-1 small mb-1">';
+          h += '<svg width="12" height="12" 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>';
+          if (url) h += `<a href="${_esc(url)}" class="text-truncate" target="_blank" download>${_esc(name)}</a>`;
+          else h += `<span class="text-truncate">${_esc(name)}</span>`;
+          h += '</div>';
+        });
+        h += '</div>';
+      }
+
+      if (!showUpload && !uploaded.length) {
+        h = `<p class="text-muted small">${_esc(ed.placeholder || 'No files')}</p>`;
+      }
+
+      el.innerHTML = h;
+
+      if (!showUpload) {
+        el._fileUpload = { getFiles: () => [], clear: () => {} };
+        return;
+      }
+
+      const dz = document.getElementById(uid + '-dz');
+      const fi = document.getElementById(uid + '-fi');
+      const stagedEl = document.getElementById(uid + '-staged');
+      if (!dz) return;
+
+      function addFiles(fileList) {
+        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);
+        }
+        renderStaged();
+        cfg.onPatchState(node.id, { _stagedFiles: stagedFiles.map(f => ({ name: f.name, size: f.size })) });
+      }
+
+      function renderStaged() {
+        if (!stagedFiles.length) { stagedEl.innerHTML = ''; return; }
+        let sh = '';
+        stagedFiles.forEach((f, i) => {
+          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>`;
+          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);
+            el._stagedFiles = stagedFiles;
+            renderStaged();
+          }, { signal });
+        });
+      }
+
+      dz.addEventListener('click', () => fi.click(), { signal });
+      dz.addEventListener('dragover', e => { e.preventDefault(); dz.classList.add('lc-drag-over'); }, { signal });
+      dz.addEventListener('dragleave', () => dz.classList.remove('lc-drag-over'), { signal });
+      dz.addEventListener('drop', e => { e.preventDefault(); dz.classList.remove('lc-drag-over'); addFiles(e.dataTransfer.files); }, { signal });
+      fi.addEventListener('change', e => { addFiles(e.target.files); e.target.value = ''; }, { signal });
+
+      renderStaged();
+
+      el._fileUpload = {
+        getFiles: () => stagedFiles,
+        clear: () => { stagedFiles = []; el._stagedFiles = []; renderStaged(); },
+        disable: () => { dz.classList.add('lc-disabled'); fi.disabled = true; },
+        enable: () => { dz.classList.remove('lc-disabled'); fi.disabled = false; },
+      };
+    }
+
+    // ---- chat (element kind) ----
+
+    function _renderChatEl(data, el, elemDef, node) {
+      const cleanup = _getCleanup(node.id);
+      const signal = cleanup.ac.signal;
+      const ed = elemDef.data || {};
+      const messages = Array.isArray(data) ? data : [];
+      const placeholder = ed.placeholder || 'Type a message...';
+      const canAttach = ed.fileAttach === true;
+      const accept = ed.fileAccept || ['.txt','.csv','.md','.json','.html','.xml','.pdf','.xlsx','.docx','.pptx','.png','.jpg','.jpeg'];
+      const uid = 'lc-ch-' + (elemDef.id || Math.random().toString(36).slice(2, 8));
+
+      let h = '<div class="lc-chat-el">';
+      h += `<div class="lc-chat-body" id="${uid}-body"></div>`;
+      h += '<div class="lc-chat-input-bar">';
+      if (canAttach) {
+        h += `<input type="file" id="${uid}-fi" class="d-none" multiple accept="${accept.join(',')}">`;
+        h += `<button class="btn btn-sm btn-outline-secondary" id="${uid}-attach" title="Attach files" type="button">`;
+        h += '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>';
+        h += '</button>';
+      }
+      h += `<input type="text" class="form-control form-control-sm flex-grow-1" id="${uid}-input" placeholder="${_esc(placeholder)}">`;
+      h += `<button class="btn btn-sm btn-outline-primary" id="${uid}-send" type="button">`;
+      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>';
+      if (canAttach) h += `<div id="${uid}-staged" class="mt-1"></div>`;
+      h += '</div>';
+
+      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;
+
+      let stagedFiles = [];
+
+      function appendMsg(msg) {
+        const bub = document.createElement('div');
+        const roleClass = msg.role === 'user' ? 'lc-chat-bubble-user'
+          : msg.role === 'assistant' ? 'lc-chat-bubble-assistant'
+          : 'lc-chat-bubble-system';
+        bub.className = 'lc-chat-bubble ' + roleClass;
+        if (msg.role === 'assistant') {
+          bub.innerHTML = _renderMd(msg.text || '');
+        } else {
+          bub.textContent = msg.text || '';
+        }
+        if (msg.files && msg.files.length) {
+          const fDiv = document.createElement('div');
+          fDiv.className = 'small mt-1';
+          msg.files.forEach(f => {
+            const name = typeof f === 'string' ? f : f.name;
+            fDiv.innerHTML += '\uD83D\uDCCE ' + _esc(name) + '<br>';
+          });
+          bub.appendChild(fDiv);
+        }
+        body.appendChild(bub);
+      }
+
+      messages.forEach(appendMsg);
+      body.scrollTop = body.scrollHeight;
+
+      function renderStaged() {
+        if (!stagedEl) return;
+        if (!stagedFiles.length) { stagedEl.innerHTML = ''; return; }
+        stagedEl.innerHTML = stagedFiles.map((f, i) =>
+          `<div class="d-flex align-items-center gap-1 small"><span>\uD83D\uDCCE ${_esc(f.name)}</span><button class="btn btn-sm btn-link text-danger p-0 lc-rm-cs" data-idx="${i}">&times;</button></div>`
+        ).join('');
+        stagedEl.querySelectorAll('.lc-rm-cs').forEach(btn => {
+          btn.addEventListener('click', () => { stagedFiles.splice(parseInt(btn.dataset.idx), 1); renderStaged(); }, { signal });
+        });
+      }
+
+      if (attachBtn && fileInput) {
+        const acceptS = new Set(accept.map(x => x.toLowerCase()));
+        attachBtn.addEventListener('click', () => fileInput.click(), { signal });
+        fileInput.addEventListener('change', e => {
+          for (const f of e.target.files) {
+            const ext = '.' + f.name.split('.').pop().toLowerCase();
+            if (acceptS.has(ext) && !stagedFiles.find(s => s.name === f.name)) stagedFiles.push(f);
+          }
+          e.target.value = '';
+          renderStaged();
+        }, { signal });
+      }
+
+      function doSend() {
+        const text = input.value.trim();
+        if (!text && !stagedFiles.length) return;
+        const msg = { role: 'user', text: text || '' };
+        if (stagedFiles.length) msg.files = stagedFiles.map(f => ({ name: f.name, size: f.size }));
+        appendMsg(msg);
+        body.scrollTop = body.scrollHeight;
+        input.value = '';
+        const filesToSend = stagedFiles.slice();
+        stagedFiles = [];
+        renderStaged();
+        cfg.onAction(node.id, 'chat-send', { text: msg.text, files: filesToSend, elemId: elemDef.id });
+      }
+
+      sendBtn.addEventListener('click', doSend, { signal });
+      input.addEventListener('keydown', e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); doSend(); } }, { signal });
+
+      el._chat = {
+        appendMessage: (role, text, files) => { appendMsg({ role, text, files }); body.scrollTop = body.scrollHeight; },
+        showProcessing: (text) => {
+          let ind = body.querySelector('.lc-chat-processing');
+          if (!ind) {
+            ind = document.createElement('div');
+            ind.className = 'lc-chat-processing';
+            ind.innerHTML = '<span class="spinner-border spinner-border-sm"></span><span class="small">Processing...</span>';
+            body.appendChild(ind);
+          }
+          if (text) ind.querySelector('.small').textContent = text;
+          body.scrollTop = body.scrollHeight;
+        },
+        removeProcessing: () => { const ind = body.querySelector('.lc-chat-processing'); if (ind) ind.remove(); },
+        disable: () => { input.disabled = true; sendBtn.disabled = true; if (attachBtn) attachBtn.disabled = true; },
+        enable: () => { input.disabled = false; sendBtn.disabled = false; if (attachBtn) attachBtn.disabled = false; },
+      };
+    }
+
+    // ---- actions ----
+
+    function _renderActions(data, el, elemDef, node) {
+      const cleanup = _getCleanup(node.id);
+      const signal = cleanup.ac.signal;
+      const ed = elemDef.data || {};
+      const buttons = ed.buttons || (Array.isArray(data) ? data : []);
+      if (!buttons.length) { el.innerHTML = ''; return; }
+
+      let h = '<div class="d-flex gap-2 flex-wrap">';
+      buttons.forEach(btn => {
+        const style = btn.style || 'outline-secondary';
+        const size = btn.size || 'sm';
+        const dis = typeof btn.disabled === 'string' ? _resolveBind(node, btn.disabled) : btn.disabled;
+        h += `<button class="btn btn-${_esc(style)} btn-${size}" data-action-id="${_esc(btn.id)}"${dis ? ' disabled' : ''}>`;
+        h += _esc(btn.label || btn.id);
+        h += '</button>';
+      });
+      h += '</div>';
+      el.innerHTML = h;
+
+      el.querySelectorAll('[data-action-id]').forEach(btnEl => {
+        btnEl.addEventListener('click', () => {
+          cfg.onAction(node.id, 'action', { buttonId: btnEl.dataset.actionId, elemId: elemDef.id });
+        }, { signal });
+      });
+
+      el._actions = {
+        setDisabled: (buttonId, disabled) => {
+          const b = el.querySelector(`[data-action-id="${buttonId}"]`);
+          if (b) b.disabled = disabled;
+        },
+        setLabel: (buttonId, label) => {
+          const b = el.querySelector(`[data-action-id="${buttonId}"]`);
+          if (b) b.textContent = label;
+        },
+      };
+    }
+
     // ---- Register built-in renderers ----
 
     _renderers.table     = _renderTable;
@@ -687,6 +973,9 @@ var LiveCard = (function () {
     _renderers.text      = _renderText;
     _renderers.markdown  = _renderMarkdown;
     _renderers.custom    = _renderCustom;
+    _renderers['file-upload'] = _renderFileUpload;
+    _renderers['chat']        = _renderChatEl;
+    _renderers.actions        = _renderActions;
 
     // ===========================================================================
     // _renderElements — render all view.elements for a card node
@@ -696,6 +985,8 @@ var LiveCard = (function () {
       const view = node.view;
       if (!view || !Array.isArray(view.elements)) { containerEl.innerHTML = ''; return; }
 
+      if (_nodeEls[node.id]) _nodeEls[node.id].elements = {};
+
       const container = document.createElement('div');
       container.className = 'row g-2';
 
@@ -729,6 +1020,8 @@ var LiveCard = (function () {
           inner.innerHTML = `<div class="text-danger small">Render error: ${_esc(e.message)}</div>`;
         }
 
+        if (elemDef.id && _nodeEls[node.id]) _nodeEls[node.id].elements[elemDef.id] = inner;
+
         container.appendChild(col);
       });
 
@@ -929,6 +1222,15 @@ var LiveCard = (function () {
       chatEl.scrollTop = chatEl.scrollHeight;
     }
 
+    // ===========================================================================
+    // Element access
+    // ===========================================================================
+
+    function getElement(nodeId, elemId) {
+      const info = _nodeEls[nodeId];
+      return (info && info.elements && info.elements[elemId]) || null;
+    }
+
     // ===========================================================================
     // Return engine
     // ===========================================================================
@@ -941,6 +1243,7 @@ var LiveCard = (function () {
       notify,
       subscribe,
       appendChatMessage,
+      getElement,
       registerRenderer(name, fn) { _renderers[name] = fn; },
       renderers: _renderers,
     };