@lopecode/channel 0.1.3 → 0.1.4

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, createModule, deleteModule, lookupVariable, 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,32 +109,22 @@ 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 };
@@ -139,24 +136,23 @@ const _cc_ws = function _cc_ws(cc_config, cc_notebook_id, cc_status, cc_messages
         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,
@@ -173,6 +169,28 @@ const _cc_ws = function _cc_ws(cc_config, cc_notebook_id, cc_status, cc_messages
         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 {
@@ -302,17 +320,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 +343,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 +385,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 +394,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) {
@@ -421,6 +437,11 @@ const _cc_ws = function _cc_ws(cc_config, cc_notebook_id, cc_status, cc_messages
   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 +493,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 +519,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 +561,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);
     }
@@ -603,39 +647,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 to connect, or paste a pairing token 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 +694,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 +716,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 +726,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 +778,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 +788,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 +817,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,7 +873,9 @@ 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_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","createModule","deleteModule","lookupVariable","cc_module","runtime","invalidation"], _cc_ws);
   $def("_cc_change_forwarder", "cc_change_forwarder", ["cc_ws","invalidation"], _cc_change_forwarder);
 
   // Imports
@@ -800,6 +887,10 @@ export default function define(runtime, observer) {
   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", _));

package/lopecode-channel.ts

@@ -90,6 +90,7 @@ Variable updates (when watching):
 
 - reply: Send markdown to notebook chat
 - get_variable / define_variable / delete_variable / list_variables: Interact with runtime
+- create_module / delete_module: Create or remove modules (registered in runtime.mains, visible in moduleMap)
 - watch_variable / unwatch_variable: Subscribe to reactive variable updates
 - run_tests: Run test_* variables
 - eval_code: Evaluate JS in browser context
@@ -250,6 +251,30 @@ mcp.setRequestHandler(ListToolsRequestSchema, async () => ({
         },
       },
     },
+    {
+      name: "create_module",
+      description: "Create a new empty module in the runtime. The module is registered in runtime.mains so it appears in moduleMap/currentModules.",
+      inputSchema: {
+        type: "object",
+        properties: {
+          notebook_id: { type: "string" },
+          name: { type: "string", description: "Module name, e.g. '@tomlarkworthy/my-module'" },
+        },
+        required: ["name"],
+      },
+    },
+    {
+      name: "delete_module",
+      description: "Delete a module and all its variables from the runtime.",
+      inputSchema: {
+        type: "object",
+        properties: {
+          notebook_id: { type: "string" },
+          name: { type: "string", description: "Module name to delete" },
+        },
+        required: ["name"],
+      },
+    },
     {
       name: "watch_variable",
       description: "Subscribe to reactive updates for a variable. Changes are pushed as notifications.",
@@ -345,6 +370,14 @@ mcp.setRequestHandler(CallToolRequestSchema, async (req) => {
         timeout = 120000;
         params = { suffix: args.suffix || null };
         break;
+      case "create_module":
+        action = "create-module";
+        params = { name: args.name };
+        break;
+      case "delete_module":
+        action = "delete-module";
+        params = { name: args.name };
+        break;
       case "watch_variable":
         action = "watch";
         params = { name: args.name, module: args.module || null };
@@ -544,7 +577,7 @@ await mcp.connect(new StdioServerTransport());
 const server = Bun.serve({
   port: REQUESTED_PORT,
   hostname: "127.0.0.1",
-  fetch(req, server) {
+  async fetch(req, server) {
     const url = new URL(req.url);
     if (url.pathname === "/ws") {
       if (server.upgrade(req)) return;
@@ -556,6 +589,51 @@ const server = Bun.serve({
         pending: pendingConnections.size,
       }), { headers: { "content-type": "application/json" } });
     }
+
+    // Tool activity endpoint — receives PostToolUse hook data and broadcasts to notebooks
+    if (url.pathname === "/tool-activity" && req.method === "POST") {
+      try {
+        const body = await req.json();
+        const toolName = body.tool_name || "unknown";
+        const toolInput = body.tool_input || {};
+        const toolResponse = body.tool_response;
+
+        // Build a compact summary for the chat widget
+        let summary = toolName;
+        if (toolName === "Read" && toolInput.file_path) {
+          summary = `Read ${toolInput.file_path}`;
+        } else if (toolName === "Edit" && toolInput.file_path) {
+          summary = `Edit ${toolInput.file_path}`;
+        } else if (toolName === "Write" && toolInput.file_path) {
+          summary = `Write ${toolInput.file_path}`;
+        } else if (toolName === "Bash" && toolInput.command) {
+          summary = `$ ${toolInput.command.slice(0, 120)}`;
+        } else if (toolName === "Grep" && toolInput.pattern) {
+          summary = `Grep "${toolInput.pattern}"`;
+        } else if (toolName === "Glob" && toolInput.pattern) {
+          summary = `Glob "${toolInput.pattern}"`;
+        } else if (toolName === "Agent" && toolInput.description) {
+          summary = `Agent: ${toolInput.description}`;
+        } else if (toolName.startsWith("mcp__lopecode__")) {
+          // Our own MCP tools — skip broadcasting to avoid echo
+          return new Response("ok", { status: 200 });
+        }
+
+        // Broadcast to all paired notebooks
+        const msg = JSON.stringify({
+          type: "tool-activity",
+          tool_name: toolName,
+          summary,
+          timestamp: Date.now(),
+        });
+        for (const ws of pairedConnections.values()) {
+          ws.send(msg);
+        }
+        return new Response("ok", { status: 200 });
+      } catch (e) {
+        return new Response("bad request", { status: 400 });
+      }
+    }
     if (url.pathname === "/") {
       const notebookUrl = `https://tomlarkworthy.github.io/lopecode/notebooks/@tomlarkworthy_blank-notebook.html#view=R100(S50(@tomlarkworthy/blank-notebook),S25(@tomlarkworthy/module-selection),S25(@tomlarkworthy/claude-code-pairing))&cc=${PAIRING_TOKEN}`;
       return new Response(null, {
@@ -576,5 +654,11 @@ const server = Bun.serve({
 
 PORT = server.port; // read actual port (important when REQUESTED_PORT is 0)
 PAIRING_TOKEN = generateToken();
+
+// Write port file so hooks can find us
+const portFilePath = join(import.meta.dir, ".lopecode-port");
+await Bun.write(portFilePath, String(PORT));
+process.on("exit", () => { try { require("fs").unlinkSync(portFilePath); } catch {} });
+
 process.stderr.write(`lopecode-channel: pairing token: ${PAIRING_TOKEN}\n`);
 process.stderr.write(`lopecode-channel: WebSocket server on ws://127.0.0.1:${PORT}/ws\n`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lopecode/channel",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Pair program with Claude inside Lopecode notebooks. MCP server bridging browser notebooks and Claude Code.",
   "type": "module",
   "bin": {
@@ -10,7 +10,7 @@
   "files": [
     "lopecode-channel.ts",
     "claude-code-pairing-module.js",
-    "inject-module.js"
+    "sync-module.ts"
   ],
   "keywords": [
     "mcp",

package/sync-module.ts

@@ -0,0 +1,262 @@
+#!/usr/bin/env bun
+/**
+ * Syncs a module between files. Works with .js module files and .html notebook files.
+ *
+ * Usage:
+ *   bun tools/channel/sync-module.ts --module @author/name --source src --target dest.html
+ *   bun tools/channel/sync-module.ts --module @author/name --source src --target dest.html --watch
+ *
+ * Source can be:
+ *   - A .js file containing the module's define() function
+ *   - A .html notebook file containing a <script id="@author/name"> block
+ *
+ * If source is a .js file that doesn't exist, extracts the module from target first,
+ * creating the .js file as a starting point for editing.
+ *
+ * Target must be an .html notebook file.
+ *
+ * This:
+ * 1. Reads module content from source (.js file or .html <script> block)
+ * 2. If the module <script> already exists in target, replaces its content (upsert)
+ * 3. If not, inserts it before the bootloader marker
+ * 4. Ensures the module is in bootconf.json mains
+ * 5. Updates the hash URL to include the module in the layout
+ */
+
+import { readFileSync, writeFileSync, existsSync, watch } from "fs";
+import { resolve, extname } from "path";
+
+function parseArgs() {
+  const args = process.argv.slice(2);
+  let moduleName = "";
+  let sourcePath = "";
+  let targetPath = "";
+  let watchMode = false;
+
+  for (let i = 0; i < args.length; i++) {
+    switch (args[i]) {
+      case "--module":
+        moduleName = args[++i];
+        break;
+      case "--source":
+        sourcePath = args[++i];
+        break;
+      case "--target":
+        targetPath = args[++i];
+        break;
+      case "--watch":
+        watchMode = true;
+        break;
+    }
+  }
+
+  if (!moduleName || !sourcePath || !targetPath) {
+    console.error(
+      "Usage: bun tools/channel/sync-module.ts --module <@author/name> --source <file> --target <notebook.html> [--watch]"
+    );
+    process.exit(1);
+  }
+
+  return {
+    moduleName,
+    sourcePath: resolve(sourcePath),
+    targetPath: resolve(targetPath),
+    watchMode,
+  };
+}
+
+function extractModuleFromHtml(html: string, moduleId: string): string | null {
+  const escaped = moduleId.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const pattern = new RegExp(
+    `<script\\s+id="${escaped}"[^>]*>[\\s\\S]*?</script>`
+  );
+  const m = html.match(pattern);
+  return m ? m[0] : null;
+}
+
+function extractModuleContent(html: string, moduleId: string): string | null {
+  const escaped = moduleId.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const pattern = new RegExp(
+    `<script\\s+id="${escaped}"[^>]*>([\\s\\S]*?)</script>`
+  );
+  const m = html.match(pattern);
+  return m ? m[1].replace(/^\n/, "").replace(/\n$/, "") : null;
+}
+
+function readModuleSource(
+  sourcePath: string,
+  moduleId: string
+): { content: string; isJs: boolean } {
+  const ext = extname(sourcePath).toLowerCase();
+
+  if (ext === ".js" || ext === ".ts") {
+    return { content: readFileSync(sourcePath, "utf8"), isJs: true };
+  } else if (ext === ".html") {
+    const html = readFileSync(sourcePath, "utf8");
+    const content = extractModuleContent(html, moduleId);
+    if (!content) {
+      console.error(
+        `Module ${moduleId} not found in ${sourcePath}`
+      );
+      process.exit(1);
+    }
+    return { content, isJs: false };
+  } else {
+    console.error(`Unsupported source file type: ${ext}`);
+    process.exit(1);
+  }
+}
+
+function inject(
+  sourcePath: string,
+  targetPath: string,
+  moduleId: string
+): void {
+  let html = readFileSync(targetPath, "utf8");
+  const { content, isJs } = readModuleSource(sourcePath, moduleId);
+
+  // Build the script block
+  const scriptBlock = `<script id="${moduleId}"\n  type="text/plain"\n  data-mime="application/javascript"\n>\n${content}\n</script>`;
+
+  // Check if module already exists in target
+  const escaped = moduleId.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const scriptPattern = new RegExp(
+    `<script\\s+id="${escaped}"[^>]*>[\\s\\S]*?</script>`
+  );
+  const existing = html.match(scriptPattern);
+
+  if (existing) {
+    // Replace in-place using string replacement (preserves backslashes)
+    html = html.replace(existing[0], scriptBlock);
+    console.log(`Updated existing ${moduleId} module`);
+  } else {
+    // Insert before bootloader
+    const bootconfMarker = "<!-- Bootloader -->";
+    const bootconfIdx = html.lastIndexOf(bootconfMarker);
+    if (bootconfIdx === -1) {
+      console.error("Could not find '<!-- Bootloader -->' marker in HTML");
+      process.exit(1);
+    }
+    html = html.slice(0, bootconfIdx) + scriptBlock + "\n\n" + html.slice(bootconfIdx);
+    console.log(`Inserted new ${moduleId} module`);
+  }
+
+  // Ensure module is in bootconf.json mains
+  html = ensureBootconf(html, moduleId);
+
+  writeFileSync(targetPath, html);
+  const size = (html.length / 1024 / 1024).toFixed(2);
+  console.log(`Wrote ${targetPath} (${size} MB)`);
+}
+
+function ensureBootconf(html: string, moduleId: string): string {
+  const bootconfPattern = 'id="bootconf.json"';
+  let bootconfScriptStart = html.lastIndexOf(bootconfPattern);
+  if (bootconfScriptStart === -1) {
+    console.warn("Could not find bootconf.json — skipping mains/hash update");
+    return html;
+  }
+
+  const next200 = html.substring(
+    bootconfScriptStart,
+    bootconfScriptStart + 200
+  );
+  if (!next200.includes("application/json")) {
+    console.warn(
+      "Found bootconf.json but it's not application/json — skipping"
+    );
+    return html;
+  }
+
+  const bootconfContentStart = html.indexOf(">", bootconfScriptStart) + 1;
+  const bootconfContentEnd = html.indexOf("</script>", bootconfContentStart);
+  const bootconfContent = html.slice(bootconfContentStart, bootconfContentEnd);
+
+  try {
+    const bootconf = JSON.parse(bootconfContent);
+
+    // Add to mains if missing
+    if (!bootconf.mains.includes(moduleId)) {
+      bootconf.mains.push(moduleId);
+    }
+
+    // Update hash to include module in layout
+    const currentHash: string = bootconf.hash || "";
+    if (!currentHash.includes(moduleId.split("/").pop()!)) {
+      const modulePattern = /S(\d+)\(([^)]+)\)/g;
+      const moduleRefs: { weight: number; module: string }[] = [];
+      let m;
+      while ((m = modulePattern.exec(currentHash)) !== null) {
+        moduleRefs.push({ weight: parseInt(m[1]), module: m[2] });
+      }
+
+      if (moduleRefs.length > 0) {
+        const totalWeight = moduleRefs.reduce((sum, r) => sum + r.weight, 0);
+        const scaled = moduleRefs.map((r) => ({
+          weight: Math.round((r.weight / totalWeight) * 75),
+          module: r.module,
+        }));
+        scaled.push({ weight: 25, module: moduleId });
+        const parts = scaled
+          .map((r) => `S${r.weight}(${r.module})`)
+          .join(",");
+        bootconf.hash = `#view=R100(${parts})`;
+      } else {
+        bootconf.hash = `#view=R100(S75(@tomlarkworthy/debugger),S25(${moduleId}))`;
+      }
+    }
+
+    const newBootconfContent =
+      "\n" + JSON.stringify(bootconf, null, 2) + "\n";
+    html =
+      html.slice(0, bootconfContentStart) +
+      newBootconfContent +
+      html.slice(bootconfContentEnd);
+  } catch (e: any) {
+    console.warn("Failed to parse bootconf.json:", e.message);
+  }
+
+  return html;
+}
+
+function extractToJs(targetPath: string, moduleId: string, jsPath: string): void {
+  const html = readFileSync(targetPath, "utf8");
+  const content = extractModuleContent(html, moduleId);
+  if (!content) {
+    console.error(`Module ${moduleId} not found in ${targetPath} — cannot extract`);
+    process.exit(1);
+  }
+  writeFileSync(jsPath, content);
+  console.log(`Extracted ${moduleId} from ${targetPath} → ${jsPath}`);
+}
+
+// CLI
+const { moduleName, sourcePath, targetPath, watchMode } = parseArgs();
+
+// If source is .js and doesn't exist, extract from target first
+const sourceExt = extname(sourcePath).toLowerCase();
+if ((sourceExt === ".js" || sourceExt === ".ts") && !existsSync(sourcePath)) {
+  console.log(`Source ${sourcePath} not found — extracting from target`);
+  extractToJs(targetPath, moduleName, sourcePath);
+}
+
+// Initial injection
+inject(sourcePath, targetPath, moduleName);
+
+if (watchMode) {
+  console.log(`Watching ${sourcePath} for changes...`);
+  let debounce: ReturnType<typeof setTimeout> | null = null;
+  watch(sourcePath, () => {
+    if (debounce) clearTimeout(debounce);
+    debounce = setTimeout(() => {
+      console.log(
+        `\n${new Date().toLocaleTimeString()} — source changed, re-injecting...`
+      );
+      try {
+        inject(sourcePath, targetPath, moduleName);
+      } catch (e: any) {
+        console.error("Injection failed:", e.message);
+      }
+    }, 200);
+  });
+}

package/inject-module.js

@@ -1,131 +0,0 @@
-#!/usr/bin/env node
-/**
- * Injects the @tomlarkworthy/claude-code-pairing module into a lopecode notebook HTML.
- *
- * Usage: node tools/channel/inject-module.js <input.html> <output.html>
- *
- * This:
- * 1. Reads the source notebook HTML
- * 2. Inserts the claude-code-pairing module as a <script> block before the bootloader
- * 3. Adds "@tomlarkworthy/claude-code-pairing" to bootconf.json mains
- * 4. Updates the hash URL to include the channel module in the layout
- * 5. Writes the result to output.html
- */
-
-import { readFileSync, writeFileSync } from "fs";
-import { resolve } from "path";
-
-const [,, inputPath, outputPath] = process.argv;
-
-if (!inputPath || !outputPath) {
-  console.error("Usage: node tools/channel/inject-module.js <input.html> <output.html>");
-  process.exit(1);
-}
-
-const html = readFileSync(resolve(inputPath), "utf8");
-const moduleSource = readFileSync(resolve(import.meta.dirname, "claude-code-pairing-module.js"), "utf8");
-
-// 1. Find the bootconf.json script and insert our module before it
-const bootconfMarker = '<!-- Bootloader -->';
-const bootconfIdx = html.lastIndexOf(bootconfMarker);
-if (bootconfIdx === -1) {
-  console.error("Could not find '<!-- Bootloader -->' marker in HTML");
-  process.exit(1);
-}
-
-const moduleScript = `
-<script id="@tomlarkworthy/claude-code-pairing"
-  type="text/plain"
-  data-mime="application/javascript"
->
-${moduleSource}
-</script>
-
-`;
-
-let result = html.slice(0, bootconfIdx) + moduleScript + html.slice(bootconfIdx);
-
-// 2. Find the actual bootconf.json script block
-//    Look for the specific pattern: <script id="bootconf.json" with type="text/plain" and data-mime="application/json"
-//    Use lastIndexOf to skip templates embedded in exporter modules
-const bootconfPattern = 'id="bootconf.json" \n        type="text/plain"\n        data-mime="application/json"';
-let bootconfScriptStart = result.lastIndexOf(bootconfPattern);
-if (bootconfScriptStart === -1) {
-  // Try alternative formatting
-  bootconfScriptStart = result.lastIndexOf('id="bootconf.json"');
-  // Verify it's followed by data-mime="application/json"
-  const next200 = result.substring(bootconfScriptStart, bootconfScriptStart + 200);
-  if (!next200.includes('application/json')) {
-    console.error("Could not find bootconf.json with application/json mime type");
-    process.exit(1);
-  }
-}
-if (bootconfScriptStart === -1) {
-  console.error("Could not find bootconf.json script block");
-  process.exit(1);
-}
-const bootconfContentStart = result.indexOf('>', bootconfScriptStart) + 1;
-const bootconfContentEnd = result.indexOf('</script>', bootconfContentStart);
-let bootconfContent = result.slice(bootconfContentStart, bootconfContentEnd);
-
-// Parse the JSON-like content
-try {
-  const bootconf = JSON.parse(bootconfContent);
-
-  // Add claude-code-pairing to mains
-  if (!bootconf.mains.includes("@tomlarkworthy/claude-code-pairing")) {
-    bootconf.mains.push("@tomlarkworthy/claude-code-pairing");
-  }
-
-  // Update hash to include claude-code-pairing in layout
-  // Lopepage only supports flat R(S,S,...) — no nesting
-  // Extract existing module references and add ours as a new panel
-  const currentHash = bootconf.hash || "";
-  if (!currentHash.includes("claude-code-pairing")) {
-    // Parse existing modules from hash like R100(S70(@mod1),S30(@mod2))
-    const moduleRefs = [];
-    const modulePattern = /S(\d+)\(([^)]+)\)/g;
-    let m;
-    while ((m = modulePattern.exec(currentHash)) !== null) {
-      moduleRefs.push({ weight: parseInt(m[1]), module: m[2] });
-    }
-
-    if (moduleRefs.length > 0) {
-      // Scale existing weights to 75% and add claude-code-pairing at 25%
-      const totalWeight = moduleRefs.reduce((sum, r) => sum + r.weight, 0);
-      const scaled = moduleRefs.map(r => ({
-        weight: Math.round((r.weight / totalWeight) * 75),
-        module: r.module,
-      }));
-      scaled.push({ weight: 25, module: "@tomlarkworthy/claude-code-pairing" });
-      const parts = scaled.map(r => `S${r.weight}(${r.module})`).join(",");
-      bootconf.hash = `#view=R100(${parts})`;
-    } else {
-      // Simple fallback
-      bootconf.hash = "#view=R100(S75(@tomlarkworthy/debugger),S25(@tomlarkworthy/claude-code-pairing))";
-    }
-  }
-
-  const newBootconfContent = "\n" + JSON.stringify(bootconf, null, 2) + "\n";
-  result = result.slice(0, bootconfContentStart) + newBootconfContent + result.slice(bootconfContentEnd);
-} catch (e) {
-  console.error("Failed to parse bootconf.json:", e.message);
-  console.error("Content:", bootconfContent.slice(0, 200));
-  process.exit(1);
-}
-
-// 4. Update the title
-const titleRegex = /<title>[^<]*<\/title>/;
-const titleMatch = result.match(titleRegex);
-if (titleMatch) {
-  const currentTitle = titleMatch[0].replace(/<\/?title>/g, "");
-  if (!currentTitle.includes("claude-channel")) {
-    result = result.replace(titleRegex, `<title>${currentTitle} + claude-channel</title>`);
-  }
-}
-
-writeFileSync(resolve(outputPath), result);
-const inputSize = (html.length / 1024 / 1024).toFixed(2);
-const outputSize = (result.length / 1024 / 1024).toFixed(2);
-console.log(`Injected @tomlarkworthy/claude-code-pairing into ${outputPath}`);
-console.log(`Input: ${inputSize} MB → Output: ${outputSize} MB`);