@luckydraw/cumulus 0.31.65 → 1.0.0

package/examples/web-app-agent/public/agent/panel.js

@@ -0,0 +1,369 @@
+/* The chat panel — a slim bar pinned bottom-center that grows upward into a
+   chat window. Vanilla JS, no framework, themed entirely through the app's own
+   CSS variables so it follows light/dark for free.
+
+   Mounted in its OWN root (#agent-root), a sibling of the app's DOM. Nothing
+   the app re-renders can unmount it. If you use React/Vue/Svelte, this is the
+   one piece to rewrite in your framework — the other files stay as they are.
+
+   window.AgentPanel = { init(), setState(s), confirm(req), notify(text), reset() } */
+(function () {
+  'use strict';
+  var LS_KEY = 'demoapp-agent-v1';
+  var root, barEl, winEl, logEl, inputEl, dotEl;
+  var prefs = { expanded: false, draft: '' };
+  var streaming = false;
+
+  try {
+    Object.assign(prefs, JSON.parse(localStorage.getItem(LS_KEY) || '{}'));
+  } catch {
+    /* no stored prefs, or storage unavailable — defaults stand */
+  }
+
+  function savePrefs() {
+    try {
+      localStorage.setItem(
+        LS_KEY,
+        JSON.stringify({ expanded: prefs.expanded, draft: inputEl ? inputEl.value : prefs.draft })
+      );
+    } catch {
+      /* storage full or unavailable — prefs just don't persist */
+    }
+  }
+
+  /* ---- minimal markdown (code -> link -> bold -> italic) ------------------ */
+  function esc(s) {
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+
+  function inline(s) {
+    var out = '';
+    // tokenize inline code first so nothing inside it is touched
+    s.split(/(`[^`]*`)/).forEach(function (part) {
+      if (part.charAt(0) === '`' && part.charAt(part.length - 1) === '`' && part.length > 1) {
+        out += '<code>' + esc(part.slice(1, -1)) + '</code>';
+        return;
+      }
+      var t = esc(part);
+      t = t.replace(
+        /\[([^\]]+)\]\((https?:[^)\s]+)\)/g,
+        '<a href="$2" target="_blank" rel="noopener">$1</a>'
+      );
+      t = t.replace(/\*\*([^*]+)\*\*/g, '<b>$1</b>');
+      t = t.replace(/(^|[^*])\*([^*\n]+)\*/g, '$1<i>$2</i>');
+      out += t;
+    });
+    return out;
+  }
+
+  function splitCells(line) {
+    // split on unescaped pipes only — models emit \| inside table cells
+    var cells = [],
+      cur = '';
+    for (var i = 0; i < line.length; i++) {
+      var ch = line.charAt(i);
+      if (ch === '\\' && line.charAt(i + 1) === '|') {
+        cur += '\\|';
+        i++;
+      } else if (ch === '|') {
+        cells.push(cur);
+        cur = '';
+      } else cur += ch;
+    }
+    cells.push(cur);
+    if (cells.length && !cells[0].trim()) cells.shift();
+    if (cells.length && !cells[cells.length - 1].trim()) cells.pop();
+    return cells.map(function (c) {
+      return c.trim();
+    });
+  }
+
+  function renderMarkdown(text) {
+    var lines = String(text).split('\n');
+    var html = '',
+      i = 0;
+    while (i < lines.length) {
+      var line = lines[i];
+      if (/^```/.test(line)) {
+        var code = [];
+        i++;
+        while (i < lines.length && !/^```/.test(lines[i])) code.push(lines[i++]);
+        i++;
+        html += '<pre>' + esc(code.join('\n')) + '</pre>';
+      } else if (
+        /^\s*\|.*\|/.test(line) ||
+        (/\|/.test(line) && /^\s*\|?[\s:|-]+\|?\s*$/.test(lines[i + 1] || ''))
+      ) {
+        var rows = [];
+        while (i < lines.length && /\|/.test(lines[i])) rows.push(lines[i++]);
+        if (rows.length >= 2 && /^[\s:|-]+$/.test(rows[1])) {
+          html +=
+            '<table><thead><tr>' +
+            splitCells(rows[0])
+              .map(function (c) {
+                return '<th>' + inline(c) + '</th>';
+              })
+              .join('') +
+            '</tr></thead><tbody>';
+          rows.slice(2).forEach(function (r) {
+            html +=
+              '<tr>' +
+              splitCells(r)
+                .map(function (c) {
+                  return '<td>' + inline(c) + '</td>';
+                })
+                .join('') +
+              '</tr>';
+          });
+          html += '</tbody></table>';
+        } else {
+          rows.forEach(function (r) {
+            html += '<p>' + inline(r) + '</p>';
+          });
+        }
+      } else if (/^\s*[-*] /.test(line)) {
+        html += '<ul>';
+        while (i < lines.length && /^\s*[-*] /.test(lines[i]))
+          html += '<li>' + inline(lines[i++].replace(/^\s*[-*] /, '')) + '</li>';
+        html += '</ul>';
+      } else if (/^#{1,4} /.test(line)) {
+        html += '<h4>' + inline(line.replace(/^#{1,4} /, '')) + '</h4>';
+        i++;
+      } else if (!line.trim()) {
+        i++;
+      } else {
+        var para = [];
+        while (
+          i < lines.length &&
+          lines[i].trim() &&
+          !/^(```|#{1,4} |\s*[-*] )/.test(lines[i]) &&
+          !/\|.*\|/.test(lines[i])
+        )
+          para.push(lines[i++]);
+        html += '<p>' + para.map(inline).join('<br>') + '</p>';
+      }
+    }
+    return html;
+  }
+
+  /* ---- DOM --------------------------------------------------------------- */
+  function el(tag, cls, parent) {
+    var e = document.createElement(tag);
+    if (cls) e.className = cls;
+    if (parent) parent.appendChild(e);
+    return e;
+  }
+
+  function setExpanded(on) {
+    prefs.expanded = on;
+    root.classList.toggle('open', on);
+    savePrefs();
+    if (on) {
+      inputEl.focus();
+      scrollLog();
+    }
+  }
+
+  function scrollLog() {
+    logEl.scrollTop = logEl.scrollHeight;
+  }
+
+  function addMsg(role, content, asMarkdown) {
+    var m = el('div', 'agmsg ' + role, logEl);
+    if (asMarkdown) m.innerHTML = renderMarkdown(content);
+    else m.textContent = content;
+    scrollLog();
+    return m;
+  }
+
+  function setLoading(on) {
+    // House rule: async containers expose their state so browser tests never
+    // have to guess. See RULES.md "Explicit Loading States".
+    logEl.setAttribute('data-loading', on ? 'true' : 'false');
+    logEl.setAttribute('aria-busy', on ? 'true' : 'false');
+  }
+
+  /* ---- sending ------------------------------------------------------------ */
+  function send() {
+    var text = inputEl.value.trim();
+    if (!text || streaming || !window.AgentChat || !window.AgentChat.live) return;
+    inputEl.value = '';
+    savePrefs();
+    setExpanded(true);
+    addMsg('user', text);
+
+    // A fresh describeView rides along with every turn. This is the whole
+    // reason the agent knows what the human is looking at.
+    if (window.AgentBridge) {
+      try {
+        window.AgentBridge.sendContext();
+      } catch {
+        /* bridge not mounted yet — the next context push will carry it */
+      }
+    }
+
+    streaming = true;
+    setLoading(true);
+    var activity = el('div', 'agactivity', logEl);
+    activity.textContent = 'thinking…';
+    var bubble = addMsg('assistant', '');
+    var acc = '';
+
+    window.AgentChat.send(text, {
+      onToken: function (t) {
+        acc += t;
+        bubble.textContent = acc;
+        scrollLog();
+      },
+      // Tool activity is liveness. A turn can run for minutes with no text
+      // tokens at all while the model works — show that, or it reads as hung.
+      onSegment: function (seg) {
+        if (!seg || !seg.type) return;
+        if (seg.type === 'thinking') activity.textContent = 'thinking…';
+        else if (seg.type === 'tool_use')
+          activity.textContent = '⚙ ' + (seg.name || seg.tool || 'tool') + '…';
+        else if (seg.type === 'tool_result') activity.textContent = '⚙ done, composing…';
+      },
+      onError: function (err) {
+        streaming = false;
+        setLoading(false);
+        activity.remove();
+        bubble.className = 'agmsg error';
+        bubble.textContent = '✕ ' + ((err && (err.error || err.message)) || 'agent unavailable');
+      },
+      onDone: function () {
+        streaming = false;
+        setLoading(false);
+        activity.remove();
+        bubble.innerHTML = renderMarkdown(acc);
+        scrollLog();
+      },
+    });
+  }
+
+  /* ---- public ------------------------------------------------------------- */
+  window.AgentPanel = {
+    init: function () {
+      if (root) return;
+      root = el('div', null, document.body);
+      root.id = 'agent-root';
+
+      // minimized home bar
+      barEl = el('div', 'agbar', root);
+      barEl.setAttribute('data-testid', 'agent-bar');
+      el('span', 'agstar', barEl).textContent = '✦';
+      var barInput = el('input', 'agbarin', barEl);
+      barInput.placeholder = 'Ask about your notes…';
+      barInput.setAttribute('data-testid', 'agent-bar-input');
+      barInput.addEventListener('focus', function () {
+        setExpanded(true);
+        inputEl.value = barInput.value || inputEl.value;
+        barInput.value = '';
+      });
+
+      // expanded window
+      winEl = el('div', 'agwin', root);
+      winEl.setAttribute('data-testid', 'agent-panel');
+      var head = el('div', 'aghead', winEl);
+      el('span', 'agstar', head).textContent = '✦';
+      el('span', 'agtitle', head).textContent = 'Assistant';
+      dotEl = el('span', 'agdot closed', head);
+      dotEl.title = 'bridge: connecting';
+      dotEl.setAttribute('data-testid', 'agent-bridge-state');
+      var min = el('button', 'agmin', head);
+      min.textContent = '─';
+      min.title = 'Minimize';
+      min.setAttribute('data-testid', 'agent-collapse');
+      min.onclick = function () {
+        setExpanded(false);
+      };
+
+      logEl = el('div', 'aglog', winEl);
+      logEl.setAttribute('data-testid', 'agent-log');
+      setLoading(false);
+
+      var inrow = el('div', 'aginrow', winEl);
+      inputEl = el('textarea', 'again', inrow);
+      inputEl.rows = 2;
+      inputEl.placeholder = 'Ask about your notes, or tell me what to change…';
+      inputEl.setAttribute('data-testid', 'agent-input');
+      inputEl.value = prefs.draft || '';
+      var sendBtn = el('button', 'agsend', inrow);
+      sendBtn.textContent = '↑';
+      sendBtn.title = 'Send';
+      sendBtn.setAttribute('data-testid', 'agent-send');
+      sendBtn.onclick = send;
+
+      inputEl.addEventListener('keydown', function (ev) {
+        if (ev.key === 'Enter' && !ev.shiftKey) {
+          ev.preventDefault();
+          send();
+        }
+        if (ev.key === 'Escape') setExpanded(false);
+      });
+      inputEl.addEventListener('input', savePrefs);
+
+      if (prefs.expanded) setExpanded(true);
+
+      // reload survival — the thread outlives the tab, so replay prior turns
+      if (window.AgentChat && window.AgentChat.live) {
+        window.AgentChat.history().then(function (msgs) {
+          (msgs || []).slice(-50).forEach(function (m) {
+            var role = m.role === 'user' ? 'user' : 'assistant';
+            var text = typeof m.content === 'string' ? m.content : m.text || '';
+            if (text) addMsg(role, text, role === 'assistant');
+          });
+          scrollLog();
+        });
+      }
+    },
+
+    setState: function (s) {
+      if (!dotEl) return;
+      dotEl.className = 'agdot ' + s;
+      dotEl.title = 'bridge: ' + s;
+      dotEl.setAttribute('data-state', s);
+    },
+
+    /* Export-tier confirm chip — the human in the loop. */
+    confirm: function (req) {
+      window.AgentPanel.init();
+      setExpanded(true);
+      var chip = el('div', 'agconfirm', logEl);
+      chip.setAttribute('data-testid', 'agent-confirm');
+      el('div', 'agconfirmtext', chip).textContent = req.summary || req.command + ' wants to run';
+      var row = el('div', 'agconfirmrow', chip);
+      var ok = el('button', 'agbtn primary', row);
+      ok.textContent = 'Allow';
+      ok.setAttribute('data-testid', 'agent-confirm-accept');
+      var no = el('button', 'agbtn', row);
+      no.textContent = 'Decline';
+      no.setAttribute('data-testid', 'agent-confirm-decline');
+      function settle(label) {
+        row.remove();
+        el('div', 'agconfirmdone', chip).textContent = label;
+      }
+      ok.onclick = function () {
+        settle('✓ allowed');
+        req.accept();
+      };
+      no.onclick = function () {
+        settle('✕ declined');
+        req.decline();
+      };
+      scrollLog();
+    },
+
+    notify: function (text) {
+      window.AgentPanel.init();
+      addMsg('system', text);
+    },
+
+    /* logout teardown — lets a later login re-init cleanly */
+    reset: function () {
+      if (root && root.parentElement) root.remove();
+      root = barEl = winEl = logEl = inputEl = dotEl = null;
+      streaming = false;
+    },
+  };
+})();

package/examples/web-app-agent/public/app.js

@@ -0,0 +1,250 @@
+/* The demo app itself — a notes list in localStorage.
+   Nothing here is agent-specific EXCEPT window.HostApp and the login flow that
+   fetches the agent config.
+
+   window.HostApp is the adapter: the app's own actions, exposed as functions.
+   The command registry calls these, never the DOM. That is what keeps
+   validation, persistence, and re-render working identically whether a human
+   or the model is driving — and it means your commands survive a UI rewrite. */
+(function () {
+  'use strict';
+
+  var STORE = 'demoapp.notes';
+  var state = { notes: [], filter: '' };
+
+  function load() {
+    try {
+      var raw = JSON.parse(localStorage.getItem(STORE) || 'null');
+      if (raw && Array.isArray(raw.notes)) state.notes = raw.notes;
+    } catch {
+      /* nothing stored, or storage unavailable — seed the demo notes below */
+    }
+    if (!state.notes.length) {
+      state.notes = [
+        {
+          id: 1,
+          text: 'Read the README in this folder',
+          done: false,
+          created: new Date().toISOString(),
+        },
+        {
+          id: 2,
+          text: 'Ask the assistant what is on this list',
+          done: false,
+          created: new Date().toISOString(),
+        },
+        {
+          id: 3,
+          text: 'Set up the gateway namespace',
+          done: true,
+          created: new Date().toISOString(),
+        },
+      ];
+    }
+  }
+
+  function persist() {
+    try {
+      localStorage.setItem(STORE, JSON.stringify({ notes: state.notes }));
+    } catch {
+      /* storage full or unavailable — notes stay in memory for this session */
+    }
+  }
+
+  function nextId() {
+    return (
+      state.notes.reduce(function (m, n) {
+        return Math.max(m, n.id);
+      }, 0) + 1
+    );
+  }
+
+  function visibleNotes() {
+    var f = state.filter.trim().toLowerCase();
+    if (!f) return state.notes.slice();
+    return state.notes.filter(function (n) {
+      return n.text.toLowerCase().indexOf(f) >= 0;
+    });
+  }
+
+  /* ---- render ------------------------------------------------------------- */
+  function render() {
+    var list = document.getElementById('note-list');
+    if (!list) return;
+    var notes = visibleNotes();
+    list.innerHTML = '';
+    if (!notes.length) {
+      var empty = document.createElement('li');
+      empty.className = 'empty';
+      empty.textContent = state.filter ? 'No notes match "' + state.filter + '".' : 'No notes yet.';
+      empty.setAttribute('data-testid', 'note-list-empty');
+      list.appendChild(empty);
+      return;
+    }
+    notes.forEach(function (n) {
+      var li = document.createElement('li');
+      if (n.done) li.className = 'done';
+      li.setAttribute('data-testid', 'note-' + n.id);
+
+      var box = document.createElement('input');
+      box.type = 'checkbox';
+      box.checked = !!n.done;
+      box.setAttribute('data-testid', 'note-toggle-' + n.id);
+      box.onchange = function () {
+        HostApp.setDone(n.id, box.checked);
+      };
+
+      var text = document.createElement('span');
+      text.className = 'text';
+      text.textContent = n.text;
+
+      var id = document.createElement('span');
+      id.className = 'id';
+      id.textContent = '#' + n.id;
+
+      li.appendChild(box);
+      li.appendChild(text);
+      li.appendChild(id);
+      list.appendChild(li);
+    });
+  }
+
+  /* ---- the adapter the agent drives --------------------------------------- */
+  var HostApp = {
+    getState: function () {
+      return { notes: state.notes.slice(), filter: state.filter };
+    },
+
+    visibleNotes: visibleNotes,
+
+    setFilter: function (text) {
+      state.filter = String(text || '');
+      var box = document.getElementById('filter');
+      if (box) box.value = state.filter;
+      render();
+      return state.filter;
+    },
+
+    createNote: function (text) {
+      var note = {
+        id: nextId(),
+        text: String(text),
+        done: false,
+        created: new Date().toISOString(),
+      };
+      state.notes.push(note);
+      persist();
+      render();
+      return note;
+    },
+
+    setDone: function (id, done) {
+      var note = state.notes.find(function (n) {
+        return n.id === Number(id);
+      });
+      if (!note) return null;
+      note.done = !!done;
+      persist();
+      render();
+      return note;
+    },
+
+    deleteAllDone: function () {
+      var before = state.notes.length;
+      state.notes = state.notes.filter(function (n) {
+        return !n.done;
+      });
+      persist();
+      render();
+      return before - state.notes.length;
+    },
+  };
+  window.HostApp = HostApp;
+
+  /* ---- login + agent config ----------------------------------------------- */
+  async function startAgent() {
+    // 404 = no key configured on the server; the app simply runs agent-dark.
+    var resp = await fetch('/api/agent-config');
+    if (!resp.ok) {
+      console.info('[agent] not configured (' + resp.status + ') — running without the assistant');
+      return;
+    }
+    window.__AGENT_CONFIG__ = await resp.json();
+    if (window.AgentStart) window.AgentStart();
+  }
+
+  function showApp() {
+    document.getElementById('login').hidden = true;
+    document.getElementById('app').hidden = false;
+    render();
+    startAgent();
+  }
+
+  function wire() {
+    load();
+
+    document.getElementById('login-submit').onclick = async function () {
+      var pw = document.getElementById('password').value;
+      var err = document.getElementById('login-error');
+      err.textContent = '';
+      var resp = await fetch('/api/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ password: pw }),
+      });
+      if (!resp.ok) {
+        err.textContent = 'Wrong password.';
+        return;
+      }
+      showApp();
+    };
+
+    document.getElementById('password').addEventListener('keydown', function (ev) {
+      if (ev.key === 'Enter') document.getElementById('login-submit').click();
+    });
+
+    document.getElementById('logout').onclick = async function () {
+      await fetch('/api/logout', { method: 'POST' });
+      if (window.AgentStop) window.AgentStop();
+      document.getElementById('app').hidden = true;
+      document.getElementById('login').hidden = false;
+    };
+
+    document.getElementById('add-note').onclick = function () {
+      var box = document.getElementById('new-note');
+      var text = box.value.trim();
+      if (!text) return;
+      HostApp.createNote(text);
+      box.value = '';
+    };
+
+    document.getElementById('new-note').addEventListener('keydown', function (ev) {
+      if (ev.key === 'Enter') document.getElementById('add-note').click();
+    });
+
+    document.getElementById('filter').addEventListener('input', function (ev) {
+      HostApp.setFilter(ev.target.value);
+    });
+
+    document.getElementById('clear-filter').onclick = function () {
+      HostApp.setFilter('');
+    };
+
+    // A live session survives reload. Ask the session probe, not the key
+    // endpoint: probing the key endpoint while logged out is a 401, which the
+    // browser reports as a console error on every visit by an anonymous user.
+    fetch('/api/session')
+      .then(function (r) {
+        return r.json();
+      })
+      .then(function (s) {
+        if (s.authenticated) showApp();
+      })
+      .catch(function () {
+        /* server unreachable — stay on the login screen */
+      });
+  }
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', wire);
+  else wire();
+})();