@lopecode/channel 0.1.3 → 0.1.5

package/claude-code-pairing-module.js

@@ -23,15 +23,23 @@ const _cc_messages = function _cc_messages(Inputs){return(
 )};
 
 const _cc_watches = function _cc_watches(Inputs){return(
-  Inputs.input([])
+  Inputs.input([
+    { name: "hash", module: null },
+    { name: "currentModules", module: null }
+  ])
+)};
+
+const _cc_module = function _cc_module(thisModule){return(
+  thisModule()
 )};
 
-const _cc_ws = function _cc_ws(cc_config, cc_notebook_id, cc_status, cc_messages, viewof_cc_watches, summarizeJS, observe, realize, runtime, invalidation){return(
+const _cc_ws = function _cc_ws(cc_config, cc_notebook_id, cc_status, cc_messages, viewof_cc_watches, summarizeJS, observe, realize, compile, createModule, deleteModule, lookupVariable, exportToHTML, cc_module, runtime, invalidation){return(
 (function() {
   var port = cc_config.port, host = cc_config.host;
   var ws = null;
   var paired = false;
-
+  // Cache the observer factory (used by lopepage to render cells)
+  var ojs_observer = window.__ojs_observer || null;
 
   function serializeValue(value, maxLen) {
     maxLen = maxLen || 500;
@@ -79,22 +87,21 @@ const _cc_ws = function _cc_ws(cc_config, cc_notebook_id, cc_status, cc_messages
         var name = cmd.params.name;
         var moduleName = cmd.params.module;
         var targetModule = findModule(runtime, moduleName);
-        for (var v of runtime._variables) {
-          if (v._name === name && (!targetModule || v._module === targetModule)) {
-            return {
-              ok: true,
-              result: {
-                name: v._name,
-                hasValue: v._value !== undefined,
-                hasError: v._error !== undefined,
-                value: serializeValue(v._value),
-                error: v._error ? v._error.message : undefined,
-                reachable: v._reachable
-              }
-            };
-          }
-        }
-        return { ok: false, error: "Variable not found: " + name };
+        if (!targetModule) return { ok: false, error: "Module not found: " + (moduleName || "default") };
+        return lookupVariable(name, targetModule).then(function(v) {
+          if (!v) return { ok: false, error: "Variable not found: " + name };
+          return {
+            ok: true,
+            result: {
+              name: v._name,
+              hasValue: v._value !== undefined,
+              hasError: v._error !== undefined,
+              value: serializeValue(v._value),
+              error: v._error ? v._error.message : undefined,
+              reachable: v._reachable
+            }
+          };
+        });
       }
 
       case "define-variable": {
@@ -102,61 +109,95 @@ const _cc_ws = function _cc_ws(cc_config, cc_notebook_id, cc_status, cc_messages
         var definition = cmd.params.definition;
         var inputs = cmd.params.inputs || [];
         var moduleName = cmd.params.module;
-        var mod = runtime.mains && runtime.mains.get(moduleName);
-        if (!mod && runtime.mains) {
-          for (var entry of runtime.mains) {
-            if (!FRAMEWORK_MODULES.has(entry[0])) { mod = entry[1]; break; }
-          }
-        }
+        var mod = findModule(runtime, moduleName);
         if (!mod) return { ok: false, error: "Module not found: " + (moduleName || "default") };
 
         return realize([definition], runtime).then(function(results) {
           var fn = results[0];
           if (typeof fn !== "function") return { ok: false, error: "Definition must evaluate to a function" };
 
-          var existingVar = null;
-          for (var v of runtime._variables) {
-            if (v._name === name && v._module === mod) { existingVar = v; break; }
-          }
-
+          // Use module._scope to check for existing variable
+          var existingVar = mod._scope.get(name);
           if (existingVar) {
             existingVar.define(name, inputs, fn);
           } else {
-            var obsFactory = null;
-            for (var v of runtime._variables) {
-              if (v._name === "__ojs_observer" && typeof v._value === "function") { obsFactory = v._value; break; }
-            }
-            mod.variable(obsFactory ? obsFactory(name) : {}).define(name, inputs, fn);
+            mod.variable(ojs_observer ? ojs_observer(name) : {}).define(name, inputs, fn);
           }
+          // Auto-watch the defined variable so the result arrives reactively
+          watchVariable(runtime, name, moduleName || null);
           return { ok: true, result: { success: true, name: name, module: moduleName || "default" } };
         }).catch(function(e) {
           return { ok: false, error: "define failed: " + e.message };
         });
       }
 
+      case "define-cell": {
+        var source = cmd.params.source;
+        var moduleName = cmd.params.module;
+        var mod = findModule(runtime, moduleName);
+        if (!mod) return { ok: false, error: "Module not found: " + (moduleName || "default") };
+
+        try {
+          var compiled = compile(source);
+          if (!compiled || compiled.length === 0) return { ok: false, error: "Compilation returned no definitions" };
+
+          var definitions = [];
+          for (var ci = 0; ci < compiled.length; ci++) {
+            definitions.push(compiled[ci]._definition);
+          }
+
+          return realize(definitions, runtime).then(function(fns) {
+            var defined = [];
+            for (var di = 0; di < compiled.length; di++) {
+              var cellDef = compiled[di];
+              var fn = fns[di];
+              var cellName = cellDef._name;
+              var cellInputs = cellDef._inputs || [];
+
+              var existingVar = mod._scope.get(cellName);
+              if (existingVar) {
+                existingVar.define(cellName, cellInputs, fn);
+              } else {
+                mod.variable(ojs_observer ? ojs_observer(cellName) : {}).define(cellName, cellInputs, fn);
+              }
+              defined.push(cellName);
+
+              // Auto-watch non-internal variables
+              if (cellName && !cellName.startsWith("module ")) {
+                watchVariable(runtime, cellName, moduleName || null);
+              }
+            }
+            return { ok: true, result: { success: true, defined: defined, module: moduleName || "default" } };
+          }).catch(function(e) {
+            return { ok: false, error: "define-cell realize failed: " + e.message };
+          });
+        } catch (e) {
+          return { ok: false, error: "define-cell compile failed: " + e.message };
+        }
+      }
+
       case "delete-variable": {
         var name = cmd.params.name;
         var moduleName = cmd.params.module;
         var targetModule = findModule(runtime, moduleName);
         if (!targetModule) return { ok: false, error: "Module not found: " + (moduleName || "main") };
-        for (var v of runtime._variables) {
-          if (v._name === name && v._module === targetModule) {
-            v.delete();
-            return { ok: true, result: { success: true, name: name, module: targetModule._name || "main" } };
-          }
-        }
-        return { ok: false, error: "Variable not found: " + name + " in module " + (moduleName || "main") };
+        return lookupVariable(name, targetModule).then(function(v) {
+          if (!v) return { ok: false, error: "Variable not found: " + name + " in module " + (moduleName || "main") };
+          v.delete();
+          return { ok: true, result: { success: true, name: name, module: targetModule._name || "main" } };
+        });
       }
 
       case "list-variables": {
         var moduleName = cmd.params.module;
         var targetModule = findModule(runtime, moduleName);
+        if (!targetModule) return { ok: false, error: "Module not found: " + (moduleName || "default") };
+        // Use module._scope instead of scanning runtime._variables
         var variables = [];
-        for (var v of runtime._variables) {
-          if (!v._name) continue;
-          if (targetModule && v._module !== targetModule) continue;
+        for (var entry of targetModule._scope) {
+          var v = entry[1];
           variables.push({
-            name: v._name,
+            name: entry[0],
             module: (v._module && v._module._name) || "main",
             hasValue: v._value !== undefined,
             hasError: v._error !== undefined,
@@ -167,12 +208,56 @@ const _cc_ws = function _cc_ws(cc_config, cc_notebook_id, cc_status, cc_messages
         return { ok: true, result: variables };
       }
 
+      case "list-cells": {
+        var moduleName = cmd.params.module;
+        var targetModule = findModule(runtime, moduleName);
+        if (!targetModule) return { ok: false, error: "Module not found: " + (moduleName || "default") };
+        var cells = [];
+        for (var entry of targetModule._scope) {
+          var v = entry[1];
+          var defStr = "";
+          try { defStr = String(v._definition).slice(0, 300); } catch(e) {}
+          cells.push({
+            name: entry[0],
+            inputs: (v._inputs || []).map(function(inp) { return inp._name || "?"; }),
+            definition: defStr,
+            hasValue: v._value !== undefined,
+            hasError: v._error !== undefined,
+            error: v._error ? (v._error.message || String(v._error)) : undefined
+          });
+        }
+        cells.sort(function(a, b) { return a.name.localeCompare(b.name); });
+        return { ok: true, result: cells };
+      }
+
       case "run-tests": {
         var filter = cmd.params.filter;
         var timeout = cmd.params.timeout || 30000;
         return runTests(runtime, filter, timeout);
       }
 
+      case "create-module": {
+        var moduleName = cmd.params.name;
+        if (!moduleName) return { ok: false, error: "Module name is required" };
+        try {
+          createModule(moduleName, runtime);
+          return { ok: true, result: { success: true, name: moduleName } };
+        } catch (e) {
+          return { ok: false, error: e.message };
+        }
+      }
+
+      case "delete-module": {
+        var moduleName = cmd.params.name;
+        if (!moduleName) return { ok: false, error: "Module name is required" };
+        try {
+          deleteModule(moduleName, runtime);
+          return { ok: true, result: { success: true, name: moduleName } };
+        } catch (e) {
+          return { ok: false, error: e.message };
+        }
+      }
+
       case "eval": {
         var code = cmd.params.code;
         try {
@@ -184,7 +269,7 @@ const _cc_ws = function _cc_ws(cc_config, cc_notebook_id, cc_status, cc_messages
       }
 
       case "fork": {
-        return handleFork(runtime);
+        return handleFork();
       }
 
       case "watch": {
@@ -302,17 +387,14 @@ const _cc_ws = function _cc_ws(cc_config, cc_notebook_id, cc_status, cc_messages
     var key = (moduleName || "main") + ":" + name;
     if (watchers.has(key)) return { ok: true, result: { already_watching: true, key: key } };
 
-    var targetModule = findModule(runtime, moduleName);
-    var targetVar = null;
-    for (var v of runtime._variables) {
-      if (v._name === name && (!targetModule || v._module === targetModule)) {
-        targetVar = v;
-        break;
-      }
-    }
+    // Use findModule for named modules, cc_module (thisModule) for unqualified lookups
+    var targetModule = moduleName ? findModule(runtime, moduleName) : cc_module;
+    if (!targetModule) return Promise.resolve({ ok: false, error: "Module not found: " + (moduleName || "default") });
+
+    return lookupVariable(name, targetModule).then(function(targetVar) {
     if (!targetVar) return { ok: false, error: "Variable not found: " + name };
 
-    var moduleName = (targetVar._module && targetVar._module._name) || "main";
+    var resolvedModule = (targetVar._module && targetVar._module._name) || "main";
     var debounceTimer = null;
     var latestValue = undefined;
     var latestError = undefined;
@@ -328,19 +410,19 @@ const _cc_ws = function _cc_ws(cc_config, cc_notebook_id, cc_status, cc_messages
       var watches = viewof_cc_watches.value.slice();
       var found = false;
       for (var i = 0; i < watches.length; i++) {
-        if (watches[i].name === name && watches[i].module === moduleName) {
-          watches[i] = { name: name, module: moduleName, value: serialized.slice(0, 200), updated: now };
+        if (watches[i].name === name && (watches[i].module === resolvedModule || watches[i].module == null)) {
+          watches[i] = { name: name, module: resolvedModule, value: serialized.slice(0, 200), updated: now };
           found = true;
           break;
         }
       }
-      if (!found) watches.push({ name: name, module: moduleName, value: serialized.slice(0, 200), updated: now });
+      if (!found) watches.push({ name: name, module: resolvedModule, value: serialized.slice(0, 200), updated: now });
       viewof_cc_watches.value = watches;
       viewof_cc_watches.dispatchEvent(new Event("input"));
 
       // Send over WebSocket if connected
       if (!paired || !ws) return;
-      var msg = { type: "variable-update", name: name, module: moduleName };
+      var msg = { type: "variable-update", name: name, module: resolvedModule };
       if (latestError) { msg.error = latestError.message || String(latestError); }
       else { msg.value = serialized; }
       ws.send(JSON.stringify(msg));
@@ -370,7 +452,7 @@ const _cc_ws = function _cc_ws(cc_config, cc_notebook_id, cc_status, cc_messages
         cancel();
         // Remove from watches table
         var watches = viewof_cc_watches.value.filter(function(w) {
-          return !(w.name === name && w.module === moduleName);
+          return !(w.name === name && w.module === resolvedModule);
         });
         viewof_cc_watches.value = watches;
         viewof_cc_watches.dispatchEvent(new Event("input"));
@@ -379,6 +461,7 @@ const _cc_ws = function _cc_ws(cc_config, cc_notebook_id, cc_status, cc_messages
     });
 
     return { ok: true, result: { watching: true, key: key } };
+    }); // close lookupVariable.then
   }
 
   function unwatchVariable(name, moduleName) {
@@ -397,30 +480,30 @@ const _cc_ws = function _cc_ws(cc_config, cc_notebook_id, cc_status, cc_messages
     return { ok: true, result: { unwatched_all: true, count: keys.length } };
   }
 
-  function handleFork(runtime) {
-    return new Promise(function(resolve) {
-      for (var v of runtime._variables) {
-        if ((v._name === "_exportToHTML" || v._name === "exportToHTML") && typeof v._value === "function") {
-          try {
-            Promise.resolve(v._value()).then(function(html) {
-              resolve({ ok: true, result: { html: html } });
-            }).catch(function(e) {
-              resolve({ ok: false, error: "Export failed: " + e.message });
-            });
-            return;
-          } catch (e) {
-            resolve({ ok: false, error: "Export failed: " + e.message });
-            return;
-          }
-        }
+  function handleFork() {
+    if (typeof exportToHTML !== "function") {
+      return { ok: false, error: "exportToHTML not available. Does this notebook include @tomlarkworthy/exporter-2?" };
+    }
+    return Promise.resolve(exportToHTML({ mains: runtime.mains })).then(function(result) {
+      // exportToHTML returns { source: string, report: object }
+      var html = typeof result === "string" ? result : result.source;
+      if (!html || typeof html !== "string") {
+        return { ok: false, error: "Export returned no HTML source" };
       }
-      resolve({ ok: false, error: "_exportToHTML not found. Does this notebook include @tomlarkworthy/exporter-2?" });
+      return { ok: true, result: { html: html } };
+    }).catch(function(e) {
+      return { ok: false, error: "Export failed: " + e.message };
     });
   }
 
   function connect(token) {
     if (ws) { ws.close(); ws = null; }
 
+    // Persist token for reconnection across reloads
+    if (token) {
+      try { sessionStorage.setItem("lopecode_cc_token", token); } catch(e) {}
+    }
+
     // Parse port from token format LOPE-PORT-XXXX
     var connectPort = port;
     if (token) {
@@ -472,11 +555,13 @@ const _cc_ws = function _cc_ws(cc_config, cc_notebook_id, cc_status, cc_messages
             hash: location.hash
           }));
 
-          // Auto-watch default variables
+          // Set up watches from cc_watches (initialized with defaults via dependency resolution)
           var runtime2 = window.__ojs_runtime;
           if (runtime2) {
-            watchVariable(runtime2, "hash", null);
-            watchVariable(runtime2, "currentModules", null);
+            var initialWatches = viewof_cc_watches.value || [];
+            for (var i = 0; i < initialWatches.length; i++) {
+              watchVariable(runtime2, initialWatches[i].name, initialWatches[i].module);
+            }
           }
           break;
 
@@ -496,6 +581,17 @@ const _cc_ws = function _cc_ws(cc_config, cc_notebook_id, cc_status, cc_messages
           cc_messages.dispatchEvent(new Event("input"));
           break;
 
+        case "tool-activity":
+          var msgs2 = cc_messages.value.concat([{
+            role: "tool",
+            tool_name: msg.tool_name,
+            content: msg.summary,
+            timestamp: msg.timestamp || Date.now()
+          }]);
+          cc_messages.value = msgs2;
+          cc_messages.dispatchEvent(new Event("input"));
+          break;
+
         case "command":
           Promise.resolve(handleCommand(msg)).then(function(result) {
             ws.send(JSON.stringify({
@@ -527,13 +623,23 @@ const _cc_ws = function _cc_ws(cc_config, cc_notebook_id, cc_status, cc_messages
     ws.onerror = function() {};
   }
 
-  // Auto-connect if cc=TOKEN is in the hash fragment
-  // Hash format: #view=R100(...)&cc=LOPE-PORT-XXXX
+  // Auto-connect: check hash param first, then sessionStorage fallback
   (function autoConnect() {
+    var token = null;
+
+    // 1. Check &cc=TOKEN in hash
     var hash = location.hash || "";
     var match = hash.match(/[&?]cc=(LOPE-[A-Z0-9-]+)/);
     if (match) {
-      var token = match[1];
+      token = match[1];
+    }
+
+    // 2. Fallback to sessionStorage (survives reloads even if hash is mangled)
+    if (!token) {
+      try { token = sessionStorage.getItem("lopecode_cc_token"); } catch(e) {}
+    }
+
+    if (token) {
       // Small delay to let the WebSocket server be ready
       setTimeout(function() { connect(token); }, 500);
     }
@@ -555,38 +661,31 @@ const _cc_watch_table = function _cc_watch_table(cc_watches, Inputs){return(
   })
 )};
 
-const _cc_change_forwarder = function _cc_change_forwarder(cc_ws, invalidation){return(
+const _cc_change_forwarder = function _cc_change_forwarder(cc_ws, history, invalidation){return(
 (function() {
   var highWaterMark = 0;
   var initializing = true;
 
   var interval = setInterval(function() {
     if (!cc_ws.paired || !cc_ws.ws) return;
-    var runtime = window.__ojs_runtime;
-    if (!runtime) return;
+    if (!history || !Array.isArray(history)) return;
 
-    for (var v of runtime._variables) {
-      if (v._name === "history" && v._value && Array.isArray(v._value)) {
-        var history = v._value;
-        var total = history.length;
+    var total = history.length;
 
-        if (initializing) { highWaterMark = total; initializing = false; return; }
-        if (total <= highWaterMark) return;
+    if (initializing) { highWaterMark = total; initializing = false; return; }
+    if (total <= highWaterMark) return;
 
-        var newEntries = history.slice(highWaterMark).map(function(e) {
-          return {
-            t: e.t, op: e.op, module: e.module, _name: e._name,
-            _inputs: e._inputs,
-            _definition: typeof e._definition === "function"
-              ? e._definition.toString().slice(0, 500)
-              : String(e._definition || "").slice(0, 500)
-          };
-        });
-        highWaterMark = total;
-        cc_ws.ws.send(JSON.stringify({ type: "cell-change", changes: newEntries }));
-        break;
-      }
-    }
+    var newEntries = history.slice(highWaterMark).map(function(e) {
+      return {
+        t: e.t, op: e.op, module: e.module, _name: e._name,
+        _inputs: e._inputs,
+        _definition: typeof e._definition === "function"
+          ? e._definition.toString().slice(0, 500)
+          : String(e._definition || "").slice(0, 500)
+      };
+    });
+    highWaterMark = total;
+    cc_ws.ws.send(JSON.stringify({ type: "cell-change", changes: newEntries }));
   }, 1000);
 
   invalidation.then(function() { clearInterval(interval); });
@@ -603,39 +702,41 @@ const _cc_chat = function _cc_chat(cc_messages, cc_status, cc_ws, md, htl, Input
     disconnected: "#ef4444"
   };
 
-  function renderSetup() {
+  function renderConnect() {
+    var row = document.createElement("div");
+    row.style.cssText = "display:flex;gap:8px;justify-content:center;align-items:center;padding:16px;";
+
     var tokenInput = document.createElement("input");
     tokenInput.type = "text";
     tokenInput.placeholder = "LOPE-XXXX";
-    tokenInput.style.cssText = "font-family:monospace;font-size:16px;padding:8px 12px;border:2px solid #d1d5db;border-radius:6px;width:140px;text-transform:uppercase;letter-spacing:2px;";
+    tokenInput.style.cssText = "font-family:var(--monospace, monospace);font-size:16px;padding:8px 12px;border:2px solid var(--theme-foreground-faint);border-radius:6px;width:140px;text-transform:uppercase;letter-spacing:2px;background:var(--theme-background-a);color:var(--theme-foreground);";
 
     var connectBtn = document.createElement("button");
     connectBtn.textContent = "Connect";
-    connectBtn.style.cssText = "padding:8px 20px;background:#2563eb;color:white;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;";
+    connectBtn.style.cssText = "padding:8px 20px;background:var(--theme-foreground);color:var(--theme-background-a);border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;";
     connectBtn.onclick = function() {
       var token = tokenInput.value.trim();
       if (token) cc_ws.connect(token);
     };
-
     tokenInput.addEventListener("keydown", function(e) {
       if (e.key === "Enter") connectBtn.click();
     });
 
+    row.append(tokenInput, connectBtn);
+
+    var guide = document.createElement("details");
+    guide.style.cssText = "padding:0 16px 16px;font-size:13px;color:var(--theme-foreground);";
+    guide.innerHTML = '<summary style="cursor:pointer;font-weight:600;font-size:14px;">Setup guide</summary>' +
+      '<ol style="margin:8px 0 0;padding-left:20px;line-height:1.8;">' +
+      '<li>Install <a href="https://bun.sh" target="_blank">Bun</a> if needed, then:<br>' +
+      '<code style="background:var(--theme-background-alt);padding:2px 6px;border-radius:3px;font-size:12px;">bun install -g @lopecode/channel</code><br>' +
+      '<code style="background:var(--theme-background-alt);padding:2px 6px;border-radius:3px;font-size:12px;">claude mcp add lopecode bunx @lopecode/channel</code></li>' +
+      '<li>Start Claude Code:<br><code style="background:var(--theme-background-alt);padding:2px 6px;border-radius:3px;font-size:12px;">claude --dangerously-load-development-channels server:lopecode</code></li>' +
+      '<li>Ask Claude for a pairing token, then paste it above</li>' +
+      '</ol>';
+
     var container = document.createElement("div");
-    container.className = "cc-setup";
-    container.innerHTML = '<div style="padding:24px;max-width:400px;margin:0 auto;text-align:center;">' +
-      '<div style="font-size:24px;margin-bottom:8px;">Claude Channel</div>' +
-      '<p style="color:#6b7280;margin-bottom:20px;font-size:14px;">Connect to Claude Code to chat with Claude from this notebook.</p>' +
-      '<div style="text-align:left;background:#f3f4f6;padding:16px;border-radius:8px;margin-bottom:20px;font-size:13px;">' +
-      '<div style="font-weight:600;margin-bottom:8px;">Setup:</div>' +
-      '<ol style="margin:0;padding-left:20px;line-height:1.8;">' +
-      '<li>Start Claude with the channel flag:<br><code style="background:#e5e7eb;padding:2px 6px;border-radius:3px;font-size:12px;">claude --dangerously-load-development-channels server:lopecode</code></li>' +
-      '<li>Copy the pairing token from the terminal</li>' +
-      '<li>Paste it below and click Connect</li>' +
-      '</ol></div>' +
-      '<div style="display:flex;gap:8px;justify-content:center;align-items:center;" class="cc-token-row"></div>' +
-      '</div>';
-    container.querySelector(".cc-token-row").append(tokenInput, connectBtn);
+    container.append(row, guide);
     return container;
   }
 
@@ -648,11 +749,11 @@ const _cc_chat = function _cc_chat(cc_messages, cc_status, cc_ws, md, htl, Input
     textarea.className = "cc-input";
     textarea.placeholder = "Message Claude...";
     textarea.rows = 2;
-    textarea.style.cssText = "width:100%;box-sizing:border-box;resize:none;border:1px solid #d1d5db;border-radius:8px;padding:10px 12px;font-family:inherit;font-size:14px;outline:none;";
+    textarea.style.cssText = "width:100%;box-sizing:border-box;resize:none;border:1px solid var(--theme-foreground-faint);border-radius:8px;padding:10px 12px;font-family:inherit;font-size:14px;outline:none;background:var(--theme-background-a);color:var(--theme-foreground);";
 
     var sendBtn = document.createElement("button");
     sendBtn.textContent = "Send";
-    sendBtn.style.cssText = "padding:8px 16px;background:#2563eb;color:white;border:none;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;margin-left:auto;";
+    sendBtn.style.cssText = "padding:8px 16px;background:var(--theme-foreground);color:var(--theme-background-a);border:none;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;margin-left:auto;";
 
     function sendMessage() {
       var text = textarea.value.trim();
@@ -670,7 +771,7 @@ const _cc_chat = function _cc_chat(cc_messages, cc_status, cc_ws, md, htl, Input
     });
 
     var inputRow = document.createElement("div");
-    inputRow.style.cssText = "display:flex;gap:8px;padding:12px;align-items:flex-end;border-top:1px solid #e5e7eb;";
+    inputRow.style.cssText = "display:flex;gap:8px;padding:12px;align-items:flex-end;border-top:1px solid var(--theme-foreground-faint);";
     inputRow.append(textarea, sendBtn);
 
     var container = document.createElement("div");
@@ -680,15 +781,47 @@ const _cc_chat = function _cc_chat(cc_messages, cc_status, cc_ws, md, htl, Input
 
     function updateMessages() {
       messagesDiv.innerHTML = "";
-      for (var i = 0; i < cc_messages.value.length; i++) {
-        var msg = cc_messages.value[i];
+      var msgs = cc_messages.value;
+      var i = 0;
+      while (i < msgs.length) {
+        var msg = msgs[i];
+
+        // Group consecutive tool messages into a collapsible block
+        if (msg.role === "tool") {
+          var toolGroup = [];
+          while (i < msgs.length && msgs[i].role === "tool") {
+            toolGroup.push(msgs[i]);
+            i++;
+          }
+          var details = document.createElement("details");
+          details.style.cssText = "max-width:90%;align-self:flex-start;font-size:12px;opacity:0.85;margin:2px 0;";
+          var summary = document.createElement("summary");
+          summary.style.cssText = "cursor:pointer;padding:4px 10px;border-radius:8px;" +
+            "background:var(--theme-background-alt, #f0f0f0);color:var(--theme-foreground, #333);" +
+            "font-family:var(--monospace, monospace);border-left:2px solid var(--theme-foreground-faint, #ccc);list-style:inside;font-size:12px;";
+          summary.textContent = toolGroup.length === 1
+            ? "\u{1F527} " + toolGroup[0].content
+            : "\u{1F527} " + toolGroup.length + " tool calls \u2014 " + toolGroup[toolGroup.length - 1].content;
+          details.appendChild(summary);
+          var list = document.createElement("div");
+          list.style.cssText = "padding:4px 10px 4px 20px;font-family:var(--monospace, monospace);color:var(--theme-foreground, #333);line-height:1.6;font-size:11px;";
+          for (var j = 0; j < toolGroup.length; j++) {
+            var line = document.createElement("div");
+            line.textContent = toolGroup[j].content;
+            list.appendChild(line);
+          }
+          details.appendChild(list);
+          messagesDiv.appendChild(details);
+          continue;
+        }
+
         var bubble = document.createElement("div");
         bubble.className = "cc-msg cc-msg-" + msg.role;
         var isUser = msg.role === "user";
         bubble.style.cssText = "max-width:80%;padding:10px 14px;border-radius:12px;font-size:14px;line-height:1.5;" +
           (isUser
-            ? "align-self:flex-end;background:#2563eb;color:white;border-bottom-right-radius:4px;"
-            : "align-self:flex-start;background:#f3f4f6;color:#1f2937;border-bottom-left-radius:4px;");
+            ? "align-self:flex-end;background:var(--theme-foreground);color:var(--theme-background-a);border-bottom-right-radius:4px;"
+            : "align-self:flex-start;background:var(--theme-background-b);color:var(--theme-foreground);border-bottom-left-radius:4px;");
 
         if (isUser) {
           bubble.textContent = msg.content;
@@ -700,6 +833,7 @@ const _cc_chat = function _cc_chat(cc_messages, cc_status, cc_ws, md, htl, Input
           } catch(e) { bubble.textContent = msg.content; }
         }
         messagesDiv.appendChild(bubble);
+        i++;
       }
       messagesDiv.scrollTop = messagesDiv.scrollHeight;
     }
@@ -709,13 +843,16 @@ const _cc_chat = function _cc_chat(cc_messages, cc_status, cc_ws, md, htl, Input
     return container;
   }
 
+  var isConnected = (cc_status.value === "connected");
+
   var wrapper = document.createElement("div");
   wrapper.className = "cc-chat";
-  wrapper.style.cssText = "border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;height:400px;display:flex;flex-direction:column;background:white;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;";
+  wrapper.style.cssText = "border:1px solid var(--theme-foreground-faint);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;background:var(--theme-background-a);font-family:inherit;" +
+    (isConnected ? "height:400px;" : "");
 
   var statusBar = document.createElement("div");
   statusBar.className = "cc-status-bar";
-  statusBar.style.cssText = "display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid #e5e7eb;font-size:12px;color:#6b7280;background:#fafafa;";
+  statusBar.style.cssText = "display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--theme-foreground-faint);font-size:12px;color:var(--theme-foreground-faint);background:var(--theme-background-b);";
 
   var statusDot = document.createElement("span");
   statusDot.style.cssText = "width:8px;height:8px;border-radius:50%;display:inline-block;";
@@ -735,18 +872,21 @@ const _cc_chat = function _cc_chat(cc_messages, cc_status, cc_ws, md, htl, Input
 
   function render() {
     var status = cc_status.value || "disconnected";
+    var connected = (status === "connected");
     statusDot.style.background = statusColors[status] || "#ef4444";
-    statusText.textContent = status === "connected" ? "Connected to Claude Code"
+    statusText.textContent = connected ? "Connected to Claude Code"
       : (status === "connecting" || status === "pairing") ? "Connecting..."
       : "Not connected";
 
+    wrapper.style.height = connected ? "400px" : "";
+
     body.innerHTML = "";
-    if (status === "connected") {
+    if (connected) {
       chatView = renderChat();
       body.appendChild(chatView);
     } else {
       chatView = null;
-      body.appendChild(renderSetup());
+      body.appendChild(renderConnect());
     }
   }
 
@@ -788,18 +928,31 @@ export default function define(runtime, observer) {
   $def("_cc_messages", "cc_messages", ["Inputs"], _cc_messages);
   $def("_cc_watches", "viewof cc_watches", ["Inputs"], _cc_watches);
   main.variable().define("cc_watches", ["Generators", "viewof cc_watches"], (G, v) => G.input(v));
-  $def("_cc_ws", "cc_ws", ["cc_config","cc_notebook_id","cc_status","cc_messages","viewof cc_watches","summarizeJS","observe","realize","runtime","invalidation"], _cc_ws);
-  $def("_cc_change_forwarder", "cc_change_forwarder", ["cc_ws","invalidation"], _cc_change_forwarder);
+  $def("_cc_module", "viewof cc_module", ["thisModule"], _cc_module);
+  main.variable().define("cc_module", ["Generators", "viewof cc_module"], (G, v) => G.input(v));
+  $def("_cc_ws", "cc_ws", ["cc_config","cc_notebook_id","cc_status","cc_messages","viewof cc_watches","summarizeJS","observe","realize","compile","createModule","deleteModule","lookupVariable","exportToHTML","cc_module","runtime","invalidation"], _cc_ws);
+  $def("_cc_change_forwarder", "cc_change_forwarder", ["cc_ws","history","invalidation"], _cc_change_forwarder);
 
   // Imports
   main.define("module @tomlarkworthy/module-map", async () => runtime.module((await import("/@tomlarkworthy/module-map.js?v=4")).default));
   main.define("currentModules", ["module @tomlarkworthy/module-map", "@variable"], (_, v) => v.import("currentModules", _));
   main.define("moduleMap", ["module @tomlarkworthy/module-map", "@variable"], (_, v) => v.import("moduleMap", _));
+  main.define("module @tomlarkworthy/exporter-2", async () => runtime.module((await import("/@tomlarkworthy/exporter-2.js?v=4")).default));
+  main.define("exportToHTML", ["module @tomlarkworthy/exporter-2", "@variable"], (_, v) => v.import("exportToHTML", _));
+  main.define("module @tomlarkworthy/observablejs-toolchain", async () => runtime.module((await import("/@tomlarkworthy/observablejs-toolchain.js?v=4")).default));
+  main.define("compile", ["module @tomlarkworthy/observablejs-toolchain", "@variable"], (_, v) => v.import("compile", _));
+  main.define("module @tomlarkworthy/local-change-history", async () => runtime.module((await import("/@tomlarkworthy/local-change-history.js?v=4")).default));
+  main.define("viewof history", ["module @tomlarkworthy/local-change-history", "@variable"], (_, v) => v.import("viewof history", _));
+  main.define("history", ["Generators", "viewof history"], (G, v) => G.input(v));
   main.define("module @tomlarkworthy/runtime-sdk", async () => runtime.module((await import("/@tomlarkworthy/runtime-sdk.js?v=4")).default));
   main.define("viewof runtime_variables", ["module @tomlarkworthy/runtime-sdk", "@variable"], (_, v) => v.import("viewof runtime_variables", _));
   main.define("runtime_variables", ["module @tomlarkworthy/runtime-sdk", "@variable"], (_, v) => v.import("runtime_variables", _));
   main.define("observe", ["module @tomlarkworthy/runtime-sdk", "@variable"], (_, v) => v.import("observe", _));
   main.define("realize", ["module @tomlarkworthy/runtime-sdk", "@variable"], (_, v) => v.import("realize", _));
+  main.define("createModule", ["module @tomlarkworthy/runtime-sdk", "@variable"], (_, v) => v.import("createModule", _));
+  main.define("deleteModule", ["module @tomlarkworthy/runtime-sdk", "@variable"], (_, v) => v.import("deleteModule", _));
+  main.define("lookupVariable", ["module @tomlarkworthy/runtime-sdk", "@variable"], (_, v) => v.import("lookupVariable", _));
+  main.define("thisModule", ["module @tomlarkworthy/runtime-sdk", "@variable"], (_, v) => v.import("thisModule", _));
   main.define("runtime", ["module @tomlarkworthy/runtime-sdk", "@variable"], (_, v) => v.import("runtime", _));
   main.define("module d/57d79353bac56631@44", async () => runtime.module((await import("/d/57d79353bac56631@44.js?v=4")).default));
   main.define("hash", ["module d/57d79353bac56631@44", "@variable"], (_, v) => v.import("hash", _));