2b:null 2c:["$","title",null,{"children":"Untitled | Tom Larkworthy | Observable"}] 31:T488d,cc_chat = { var statusColors = { connected: '#22c55e', connecting: '#f59e0b', pairing: '#f59e0b', disconnected: '#ef4444' }; 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: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: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 = '

Setup guide

' + '

In Claude Code, install the plugin:
' + '/plugin marketplace add tomlarkworthy/lopecode-plugin
' + '/plugin install lopecode-channel@lopecode-plugins
Restart Claude Code with the channel enabled:
' + 'claude --dangerously-load-development-channels plugin:lopecode-channel@lopecode-plugins
' + 'Without this flag Claude can still drive the notebook, but this chat box reaches nobody.
Ask Claude for a pairing token, then paste it above

' + '

From npm instead of the plugin: ' + 'claude mcp add lopecode -- npx -y @lopecode/channel, then start with ' + '--dangerously-load-development-channels server:lopecode.

'; var container = document.createElement('div'); container.append(row, guide); return container; } function renderChat() { var messagesDiv = document.createElement('div'); messagesDiv.className = 'cc-messages'; messagesDiv.style.cssText = 'flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;'; var pendingAttachments = []; var attachmentsDiv = document.createElement('div'); attachmentsDiv.className = 'cc-attachments'; attachmentsDiv.style.cssText = 'display:none;padding:4px 12px;gap:6px;flex-wrap:wrap;border-top:1px solid var(--theme-foreground-faint);'; function updateAttachmentsUI() { attachmentsDiv.innerHTML = ''; if (pendingAttachments.length === 0) { attachmentsDiv.style.display = 'none'; return; } attachmentsDiv.style.display = 'flex'; for (var i = 0; i < pendingAttachments.length; i++) { (function (idx) { var att = pendingAttachments[idx]; var thumb = document.createElement('div'); thumb.style.cssText = 'position:relative;display:inline-block;'; var img = document.createElement('img'); img.src = att.dataUrl; img.style.cssText = 'height:48px;border-radius:6px;border:1px solid var(--theme-foreground-faint);'; var removeBtn = document.createElement('button'); removeBtn.textContent = '\xD7'; removeBtn.style.cssText = 'position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;border:none;background:#ef4444;color:white;font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;'; removeBtn.onclick = function () { pendingAttachments.splice(idx, 1); updateAttachmentsUI(); }; thumb.append(img, removeBtn); attachmentsDiv.appendChild(thumb); }(i)); } } var textarea = document.createElement('textarea'); textarea.className = 'cc-input'; textarea.placeholder = 'Message Claude... (paste screenshots here)'; textarea.rows = 2; 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);'; textarea.addEventListener('paste', function (e) { var items = e.clipboardData && e.clipboardData.items; if (!items) return; for (var i = 0; i < items.length; i++) { if (items[i].type.indexOf('image/') === 0) { e.preventDefault(); var file = items[i].getAsFile(); if (!file) continue; var reader = new FileReader(); reader.onload = function (ev) { pendingAttachments.push({ dataUrl: ev.target.result, name: 'screenshot-' + Date.now() + '.png', type: file.type }); updateAttachmentsUI(); }; reader.readAsDataURL(file); break; } } }); var sendBtn = document.createElement('button'); sendBtn.textContent = 'Send'; 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(); if (!text && pendingAttachments.length === 0 || !cc_ws.ws) return; var attachments = pendingAttachments.slice(); var msgContent = text || (attachments.length > 0 ? '(screenshot)' : ''); var msgs = cc_messages.value.concat([{ role: 'user', content: msgContent, attachments: attachments.length > 0 ? attachments : undefined, timestamp: Date.now() }]); cc_messages.value = msgs; cc_messages.dispatchEvent(new Event('input')); var payload = { type: 'message', content: text || '' }; if (attachments.length > 0) { payload.attachments = attachments.map(function (a) { return { dataUrl: a.dataUrl, name: a.name, type: a.type }; }); } cc_ws.ws.send(JSON.stringify(payload)); textarea.value = ''; pendingAttachments = []; updateAttachmentsUI(); } sendBtn.onclick = sendMessage; textarea.addEventListener('keydown', function (e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } }); var inputRow = document.createElement('div'); inputRow.style.cssText = 'display:flex;gap:8px;padding:12px;align-items:flex-end;border-top:1px solid var(--theme-foreground-faint);'; inputRow.append(textarea, viewof voiceEnabled, sendBtn); // Activity status bar — shows latest Claude activity var activityBar = document.createElement('div'); activityBar.className = 'cc-activity-bar'; activityBar.style.cssText = 'padding:4px 12px;font-size:11px;font-family:var(--monospace, monospace);color:var(--theme-foreground-muted, #888);background:var(--theme-background-alt, #f8f8f8);border-bottom:1px solid var(--theme-foreground-faint, #eee);min-height:20px;display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;'; activityBar.title = 'Click to expand activity log'; var activityIcon = document.createElement('span'); activityIcon.textContent = '\u23F3'; // hourglass activityIcon.style.cssText = 'flex-shrink:0;'; var activityText = document.createElement('span'); activityText.style.cssText = 'overflow:hidden;text-overflow:ellipsis;flex:1;'; activityText.textContent = 'Waiting for activity\u2026'; activityBar.append(activityIcon, activityText); // Expandable activity log var activityLog = document.createElement('div'); activityLog.className = 'cc-activity-log'; activityLog.style.cssText = 'display:none;max-height:120px;overflow-y:auto;padding:4px 12px;font-size:11px;font-family:var(--monospace, monospace);color:var(--theme-foreground-muted, #888);background:var(--theme-background-alt, #f8f8f8);border-bottom:1px solid var(--theme-foreground-faint, #eee);line-height:1.6;'; activityBar.addEventListener('click', function () { activityLog.style.display = activityLog.style.display === 'none' ? 'block' : 'none'; }); function updateActivity() { var items = cc_activity.value; if (items.length === 0) return; var latest = items[items.length - 1]; // Update icon based on activity type if (latest.tool_name === 'thinking') { activityIcon.textContent = '\uD83E\uDDE0'; // brain } else if (latest.tool_name === 'text') { activityIcon.textContent = '\uD83D\uDCAC'; // speech bubble } else { activityIcon.textContent = '\uD83D\uDD27'; // wrench } activityText.textContent = latest.content; // Update the log activityLog.innerHTML = ''; for (var a = 0; a < items.length; a++) { var logLine = document.createElement('div'); var ts = new Date(items[a].timestamp); var timeStr = ts.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }); logLine.textContent = timeStr + ' ' + items[a].content; logLine.style.opacity = String(0.5 + 0.5 * (a / items.length)); activityLog.appendChild(logLine); } activityLog.scrollTop = activityLog.scrollHeight; } var container = document.createElement('div'); container.className = 'cc-chat-view'; container.style.cssText = 'display:flex;flex-direction:column;height:100%;'; container.append(activityBar, activityLog, messagesDiv, attachmentsDiv, inputRow); function updateMessages() { messagesDiv.innerHTML = ''; var msgs = cc_messages.value; var i = 0; while (i < msgs.length) { var msg = msgs[i]; if (msg.role === 'tool') { // Skip tool messages in chat — they're shown in the activity bar i++; continue; } if (msg.role === 'side') { // Side-comment: Claude's CLI text, shown as subtle italic bubble var sideBubble = document.createElement('div'); sideBubble.className = 'cc-msg cc-msg-side'; sideBubble.style.cssText = 'max-width:85%;padding:8px 14px;border-radius:10px;font-size:13px;line-height:1.5;align-self:flex-start;background:transparent;color:var(--theme-foreground-muted, #888);font-style:italic;border-left:2px solid var(--theme-foreground-faint, #ccc);margin:3px 0;'; sideBubble.textContent = msg.content; messagesDiv.appendChild(sideBubble); i++; 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: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; if (msg.attachments && msg.attachments.length > 0) { var attRow = document.createElement('div'); attRow.style.cssText = 'display:flex;gap:4px;margin-top:6px;flex-wrap:wrap;'; for (var k = 0; k < msg.attachments.length; k++) { var attImg = document.createElement('img'); attImg.src = msg.attachments[k].dataUrl; attImg.style.cssText = 'max-height:80px;border-radius:4px;border:1px solid rgba(255,255,255,0.3);'; attRow.appendChild(attImg); } bubble.appendChild(attRow); } } else { try { var rendered = md([msg.content]); if (rendered instanceof Node) { bubble.appendChild(rendered); } else { bubble.textContent = msg.content; } } catch (e) { bubble.textContent = msg.content; } } messagesDiv.appendChild(bubble); i++; } messagesDiv.scrollTop = messagesDiv.scrollHeight; } updateMessages(); updateActivity(); container._updateMessages = updateMessages; container._updateActivity = updateActivity; return container; } var isConnected = cc_status.value === 'connected'; var wrapper = document.createElement('div'); wrapper.className = 'cc-chat'; 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 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;'; var statusText = document.createElement('span'); statusText.className = 'cc-status-text'; statusBar.append(statusDot, statusText); var body = document.createElement('div'); body.className = 'cc-body'; body.style.cssText = 'flex:1;overflow:hidden;display:flex;flex-direction:column;'; wrapper.append(statusBar, body); var chatView = null; function render() { var status = cc_status.value || 'disconnected'; var connected = status === 'connected'; statusDot.style.background = statusColors[status] || '#ef4444'; statusText.textContent = connected ? 'Connected to Claude Code' : status === 'connecting' || status === 'pairing' ? 'Connecting...' : 'Not connected'; wrapper.style.height = connected ? '400px' : ''; body.innerHTML = ''; if (connected) { chatView = renderChat(); body.appendChild(chatView); } else { chatView = null; body.appendChild(renderConnect()); } } render(); var lastStatus = cc_status.value; var lastMsgCount = cc_messages.value.length; var lastActivityCount = cc_activity.value.length; var pollInterval = setInterval(function () { if (cc_status.value !== lastStatus) { lastStatus = cc_status.value; render(); } if (cc_messages.value.length !== lastMsgCount) { lastMsgCount = cc_messages.value.length; if (chatView && chatView._updateMessages) chatView._updateMessages(); } if (cc_activity.value.length !== lastActivityCount) { lastActivityCount = cc_activity.value.length; if (chatView && chatView._updateActivity) chatView._updateActivity(); } }, 200); var originalRemove = wrapper.remove.bind(wrapper); wrapper.remove = function () { clearInterval(pollInterval); originalRemove(); }; return wrapper; }32:T489,cc_doc_overview = md`## Claude Code Pairing Bridges a lopecode notebook to Claude Code via WebSocket. \`\`\` Claude Code CLI ←MCP→ Channel Server ←WS→ This Module (browser) \`\`\` **Cell groups** (in dependency order): 1. **UI** — \`cc_chat\` (main interface), \`cc_watch_table\` (variable inspector) 2. **State** — \`cc_config\`, \`cc_notebook_id\`, \`cc_activity\`, \`cc_status\`, \`cc_messages\`, \`cc_watches\`, \`cc_module\`, \`voiceEnabled\` 3. **Module lookup** — \`cc_find_module\` resolves module names via \`runtime.mains\` 4. **Serialization** — \`cc_serialize_value\` (safe value→string for transport) 5. **Variable watcher** — \`cc_watchers\` observes variables, debounces & sends updates 6. **Command handlers** — \`cc_handle_*\` (one per MCP tool) 7. **Command dispatch** — \`cc_command_handlers\` routes action→handler 8. **WebSocket** — \`cc_ws\` manages connect/pair/auto-reconnect and message dispatch 9. **Side effects** — \`cc_change_forwarder\` streams cell edits, \`cc_voice\` optional speech I/O 10. **Imports** — \`currentModules\`, \`exportToHTML\`, \`compile\`, \`history\`, runtime-sdk helpers`33:T1b3d,cc_watchers = function () { var watchers = new Map(); var sendFn = null; function setSend(fn) { sendFn = fn; if (fn) watchers.forEach(function (w) { w.reset(); }); } function watchVariable(runtime, name, moduleName) { var key = (moduleName || 'main') + ':' + name; if (watchers.has(key)) return { ok: true, result: { already_watching: true, key: key } }; var targetModule = moduleName ? cc_find_module(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 resolvedModule = targetVar._module && targetVar._module._name || 'main'; var debounceTimer = null; var latestValue = undefined; var latestError = undefined; var received = false; var lastSent = null; function arrayDelta(value) { if (!Array.isArray(value) || !lastSent || !lastSent.items) return null; var prev = lastSent.items; if (prev.length > value.length) return null; for (var i = 0; i < prev.length; i++) if (prev[i] !== value[i]) return null; return { from: prev.length, length: value.length }; } function flush() { debounceTimer = null; var delta = latestError ? null : arrayDelta(latestValue); var serialized = latestError ? 'Error: ' + (latestError.message || String(latestError)) : cc_serialize_value(delta ? latestValue.slice(delta.from) : latestValue, 2000); if (lastSent && (delta ? delta.from === delta.length : lastSent.serialized === serialized)) return; lastSent = { serialized: delta ? null : serialized, items: !latestError && Array.isArray(latestValue) ? latestValue.slice() : null }; var shown = (delta ? '[+' + (delta.length - delta.from) + ' @' + delta.from + '] ' : '') + serialized; var now = new Date().toLocaleTimeString(); 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 === resolvedModule || watches[i].module == null)) { watches[i] = { name: name, module: resolvedModule, value: shown.slice(0, 200), updated: now }; found = true; break; } } if (!found) watches.push({ name: name, module: resolvedModule, value: shown.slice(0, 200), updated: now }); viewof cc_watches.value = watches; viewof cc_watches.dispatchEvent(new Event('input')); if (sendFn) { var msg = { type: 'variable-update', name: name, module: resolvedModule }; if (latestError) { msg.error = latestError.message || String(latestError); } else { msg.value = serialized; if (delta) msg.delta = delta; } sendFn(msg); } } function scheduleUpdate(value, error) { received = true; latestValue = value; latestError = error; if (!debounceTimer) { flush(); } else { clearTimeout(debounceTimer); } debounceTimer = setTimeout(flush, 1000); } var cancel = observe(targetVar, { fulfilled: function (value) { scheduleUpdate(value, null); }, rejected: function (error) { scheduleUpdate(null, error); } }, { invalidation: invalidation }); watchers.set(key, { reset: function () { lastSent = null; if (received) scheduleUpdate(latestValue, latestError); }, dispose: function () { if (debounceTimer) clearTimeout(debounceTimer); cancel(); var watches = viewof cc_watches.value.filter(function (w) { return !(w.name === name && w.module === resolvedModule); }); viewof cc_watches.value = watches; viewof cc_watches.dispatchEvent(new Event('input')); watchers.delete(key); } }); return { ok: true, result: { watching: true, key: key } }; }); } function unwatchVariable(name, moduleName) { var key = (moduleName || 'main') + ':' + name; var watcher = watchers.get(key); if (!watcher) return { ok: false, error: 'Not watching: ' + key }; watcher.dispose(); return { ok: true, result: { unwatched: true, key: key } }; } function unwatchAll() { var keys = Array.from(watchers.keys()); for (var i = 0; i < keys.length; i++) { watchers.get(keys[i]).dispose(); } return { ok: true, result: { unwatched_all: true, count: keys.length } }; } return { watchVariable: watchVariable, unwatchVariable: unwatchVariable, unwatchAll: unwatchAll, setSend: setSend }; }()34:T55f,cc_handle_define_variable = function handleDefineVariable(cmd, runtime) { var name = cmd.params.name; var definition = cmd.params.definition; var inputs = cmd.params.inputs || []; var moduleName = cmd.params.module; var mod = cc_find_module(runtime, moduleName); if (!mod) return { ok: false, error: 'Module not found: ' + (moduleName || 'default') }; var ojs_observer = window.__ojs_observer || null; 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 = mod._scope.get(name); if (existingVar) { existingVar.define(name, inputs, fn); } else { mod.variable(ojs_observer ? ojs_observer(name) : {}).define(name, inputs, fn); } cc_watchers.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 }; }); }35:T87b,cc_handle_define_cell = function handleDefineCell(cmd, runtime) { var source = cmd.params.source; var moduleName = cmd.params.module; var mod = cc_find_module(runtime, moduleName); if (!mod) return { ok: false, error: 'Module not found: ' + (moduleName || 'default') }; var ojs_observer = window.__ojs_observer || null; 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); if (cellName && !cellName.startsWith('module ')) { cc_watchers.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 }; } }36:T604,cc_handle_list_cells = { return function handleListCells(cmd, runtime) { var moduleName = cmd.params.module; var maxLen = cmd.params.maxDefinitionLength; var targetModule = cc_find_module(runtime, moduleName); if (!targetModule) { return { ok: false, error: 'Module not found: ' + (moduleName || 'default') }; } var cells = []; // Iterate the runtime's full variable Set so anonymous cells (markdown, // tests, broken cells) are visible. Display order matches runtime._variables // iteration order — preserve it (no sort). for (var v of runtime._variables) { if (v._module !== targetModule) continue; var defStr = ''; try { var raw = String(v._definition); defStr = maxLen === 0 ? raw : raw.slice(0, maxLen || 2000); } catch (e) { } cells.push({ pid: v.pid || null, name: v._name || null, 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 }); } return { ok: true, result: cells }; }; }37:T1b02,cc_handle_run_tests = { return function handleRunTests(cmd, runtime) { var filter = cmd.params.filter; var timeout = cmd.params.timeout || 30000; return new Promise(function (outerResolve) { // Find actual runtime with _computeNow var actualRuntime = null; for (var v of runtime._variables) { if (v._module && v._module._runtime && v._module._runtime._computeNow) { actualRuntime = v._module._runtime; break; } } if (!actualRuntime) { outerResolve({ ok: false, error: 'Could not find actual runtime' }); return; } var moduleNames = new Map(); for (var v2 of runtime._variables) { if (v2._module && !moduleNames.has(v2._module)) { var modName = v2._module._name || (v2._name && v2._name.startsWith('module ') ? v2._name : null); if (modName) moduleNames.set(v2._module, modName); } } var testVars = []; for (var variable of runtime._variables) { var name = variable._name; if (typeof name === 'string' && name.startsWith('test_')) { if (filter) { var moduleName = moduleNames.get(variable._module) || ''; if (!name.includes(filter) && !moduleName.includes(filter)) continue; } testVars.push(variable); } } if (testVars.length === 0) { outerResolve({ ok: false, error: 'No test variables found' }); return; } var results = new Map(); var pendingPromises = []; for (var vi = 0; vi < testVars.length; vi++) { (function (v3) { var tName = v3._name; var tModuleName = moduleNames.get(v3._module) || 'main'; var fullName = tModuleName + '#' + tName; var p = new Promise(function (resolve) { var timeoutId = setTimeout(function () { results.set(fullName, { state: 'timeout', name: tName, module: tModuleName }); resolve(); }, timeout); if (v3._value !== undefined) { clearTimeout(timeoutId); results.set(fullName, { state: 'passed', name: tName, module: tModuleName, value: String(v3._value).slice(0, 200) }); resolve(); return; } if (v3._error !== undefined) { clearTimeout(timeoutId); results.set(fullName, { state: 'failed', name: tName, module: tModuleName, error: v3._error && v3._error.message || String(v3._error) }); resolve(); return; } if (!v3._reachable) { v3._reachable = true; actualRuntime._dirty.add(v3); } var oldObserver = v3._observer; v3._observer = { fulfilled: function (value) { clearTimeout(timeoutId); results.set(fullName, { state: 'passed', name: tName, module: tModuleName, value: value === undefined ? 'undefined' : String(value).slice(0, 200) }); resolve(); if (oldObserver && oldObserver.fulfilled) oldObserver.fulfilled(value); }, rejected: function (error) { clearTimeout(timeoutId); results.set(fullName, { state: 'failed', name: tName, module: tModuleName, error: error && error.message || String(error) }); resolve(); if (oldObserver && oldObserver.rejected) oldObserver.rejected(error); }, pending: function () { if (oldObserver && oldObserver.pending) oldObserver.pending(); } }; }); pendingPromises.push(p); }(testVars[vi])); } actualRuntime._computeNow(); Promise.race([ Promise.all(pendingPromises), new Promise(function (r) { setTimeout(r, timeout + 5000); }) ]).then(function () { var tests = Array.from(results.values()); var passed = tests.filter(function (t) { return t.state === 'passed'; }).length; var failed = tests.filter(function (t) { return t.state === 'failed'; }).length; var timeoutCount = tests.filter(function (t) { return t.state === 'timeout'; }).length; outerResolve({ ok: true, result: { tests: tests, summary: { total: tests.length, passed: passed, failed: failed, timeout: timeoutCount } } }); }); }); }; }38:T580,cc_handle_call_tool = { return async function cc_handle_call_tool(cmd) { var name = cmd.params && cmd.params.name; var args = cmd.params && cmd.params.arguments || {}; if (!name) return { ok: false, error: 'Missing tool name' }; var tools = viewof mcpTools && viewof mcpTools.value; if (!tools) return { ok: false, error: 'No dynamic tools registered' }; var tool = tools.get(name); if (!tool) return { ok: false, error: 'Unknown dynamic tool: ' + name }; try { var result = await tool.handler(args); // Process auto-watch side-channel: handlers can return {watches: [{name, module}]} if (result && result.watches && cc_watchers) { var rt = window.__ojs_runtime || runtime; result.watches.forEach(function (w) { cc_watchers.watchVariable(rt, w.name, w.module || null); }); delete result.watches; } return { ok: true, result: result }; } catch (e) { return { ok: false, error: e.message || String(e) }; } }; }39:T58e,cc_command_handlers = function handleCommand(cmd) { var rt = window.__ojs_runtime || runtime; if (!rt) return { ok: false, error: 'Runtime not found' }; var handlers = { 'get-variable': cc_handle_get_variable, 'define-variable': cc_handle_define_variable, 'define-cell': cc_handle_define_cell, 'delete-variable': cc_handle_delete_variable, 'delete-cell': cc_handle_delete_cell, 'update-cell': cc_handle_update_cell, 'list-variables': cc_handle_list_variables, 'list-cells': cc_handle_list_cells, 'run-tests': cc_handle_run_tests, 'create-module': cc_handle_create_module, 'delete-module': cc_handle_delete_module, 'eval': cc_handle_eval, 'fork': cc_handle_fork, 'export-module': cc_handle_export_module, 'watch': cc_handle_watch, 'unwatch': cc_handle_unwatch, 'call-tool': cc_handle_call_tool, 'unwatch-all': function () { return cc_handle_unwatch.__watchers_ref ? cc_handle_unwatch.__watchers_ref.unwatchAll() : { ok: false, error: 'unwatchAll not available' }; } }; var handler = handlers[cmd.action]; if (!handler) return { ok: false, error: 'Unknown action: ' + cmd.action }; return handler(cmd, rt); }3a:T1fdc,cc_ws = function () { var port = cc_config.port, host = cc_config.host; var ws = null; var paired = false; function connect(token) { if (ws) { ws.close(); ws = null; } if (token) { try { window.sessionStorage.setItem('lopecode_cc_token', token); } catch (e) { } var hash = location.hash || '#'; if (/[&?]cc=/.test(hash)) { hash = hash.replace(/([&?])cc=[^&]*/, '$1cc=' + token); } else { hash += (hash.length > 1 ? '&' : '') + 'cc=' + token; } try { window.history.replaceState(null, '', hash); } catch (e) { } } var connectPort = port; if (token) { var parts = token.match(/^LOPE-(\d+)-[A-Z0-9]+$/); if (parts) connectPort = parseInt(parts[1], 10); } cc_status.value = 'connecting'; cc_status.dispatchEvent(new Event('input')); ws = new WebSocket('ws://' + host + ':' + connectPort + '/ws'); ws.onopen = function () { if (token) { cc_status.value = 'pairing'; cc_status.dispatchEvent(new Event('input')); var toolDescriptors = []; var _mcpToolsVal = viewof mcpTools && viewof mcpTools.value; if (_mcpToolsVal && _mcpToolsVal.size > 0) { _mcpToolsVal.forEach(function (t, name) { toolDescriptors.push({ name: name, description: t.description, inputSchema: t.inputSchema }); }); } ws.send(JSON.stringify({ type: 'pair', token: token, url: cc_notebook_id, title: document.title || 'Untitled', tools: toolDescriptors })); } }; ws.onmessage = function (event) { var msg; try { msg = JSON.parse(event.data); } catch (e) { return; } switch (msg.type) { case 'paired': paired = true; cc_status.value = 'connected'; cc_status.dispatchEvent(new Event('input')); // Provide send callback to watchers cc_watchers.setSend(function (m) { if (paired && ws) ws.send(JSON.stringify(m)); }); var modules = []; var rt = window.__ojs_runtime; if (rt) { var seen = new Set(); for (var v of rt._variables) { var name = v._module && v._module._name; if (name && !seen.has(name)) { seen.add(name); modules.push(name); } } } ws.send(JSON.stringify({ type: 'notebook-info', url: cc_notebook_id, title: document.title, modules: modules, hash: location.hash })); // Set up watches from cc_watches var rt2 = window.__ojs_runtime; if (rt2) { var initialWatches = viewof cc_watches.value || []; for (var i = 0; i < initialWatches.length; i++) { cc_watchers.watchVariable(rt2, initialWatches[i].name, initialWatches[i].module); } } break; case 'pair-failed': paired = false; cc_status.value = 'disconnected'; cc_status.dispatchEvent(new Event('input')); break; case 'reply': var msgs = cc_messages.value.concat([{ role: 'assistant', content: msg.markdown, timestamp: Date.now() }]); cc_messages.value = msgs; cc_messages.dispatchEvent(new Event('input')); break; case 'tool-activity': // Update the activity status bar (not the chat messages) var activityEntry = { tool_name: msg.tool_name, content: msg.summary, timestamp: msg.timestamp || Date.now() }; cc_activity.value = cc_activity.value.concat([activityEntry]).slice(-20); cc_activity.dispatchEvent(new Event('input')); break; case 'command': Promise.resolve(cc_command_handlers(msg)).then(function (result) { ws.send(JSON.stringify({ type: 'command-result', id: msg.id, ok: result.ok, result: result.result, error: result.error })); }).catch(function (e) { ws.send(JSON.stringify({ type: 'command-result', id: msg.id, ok: false, error: e.message })); }); break; case 'assistant-text': // Side-comment: Claude's CLI text output from session log var sideMsg = cc_messages.value.concat([{ role: 'side', content: msg.text, timestamp: msg.timestamp || Date.now() }]); cc_messages.value = sideMsg; cc_messages.dispatchEvent(new Event('input')); break; } }; ws.onclose = function () { paired = false; cc_watchers.setSend(null); cc_status.value = 'disconnected'; cc_status.dispatchEvent(new Event('input')); ws = null; }; ws.onerror = function () { }; } // Auto-connect: check hash param first, then sessionStorage fallback (function autoConnect() { var token = null; var hash = location.hash || ''; var match = hash.match(/[&?]cc=(LOPE-[A-Z0-9-]+)/); if (match) { token = match[1]; } if (!token) { try { token = window.sessionStorage.getItem('lopecode_cc_token'); } catch (e) { } } if (token) { setTimeout(function () { connect(token); }, 500); } }()); invalidation.then(function () { cc_watchers.setSend(null); if (ws) { ws.close(); ws = null; } }); return { connect: connect, get paired() { return paired; }, get ws() { return ws; } }; }()3b:T788,cc_change_forwarder = function () { // depends on the viewof element, not the value: history is mutated in // place and re-dispatched, so a value dependency re-runs this cell on // every edit and the high-water mark never advances past "initial" var highWaterMark = (viewof history.value || []).length; var timer = null; function flush() { timer = null; var history = viewof history.value; if (!Array.isArray(history)) return; if (!cc_ws.paired || !cc_ws.ws || history.length <= highWaterMark) { highWaterMark = history.length; 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 = history.length; cc_ws.ws.send(JSON.stringify({ type: 'cell-change', changes: newEntries })); } function onInput() { if (timer) clearTimeout(timer); timer = setTimeout(flush, 1000); } function onStatus() { // a new consumer starts from now; boot-time entries are not edits if (cc_status.value === 'connected') highWaterMark = (viewof history.value || []).length; } viewof history.addEventListener('input', onInput); cc_status.addEventListener('input', onStatus); invalidation.then(function () { viewof history.removeEventListener('input', onInput); cc_status.removeEventListener('input', onStatus); if (timer) clearTimeout(timer); }); return 'change forwarder active'; }()3c:T14b9,cc_voice = { return function () { if (!voiceEnabled) return 'voice: disabled'; var SR = window.SpeechRecognition || window.webkitSpeechRecognition; var recognition = null; var synth = window.speechSynthesis; var active = true; var muteUntil = 0; var lastUnmuteTime = 0; var lastSpokenCount = 0; var pendingUtterances = 0; function isMuted() { return Date.now() < muteUntil; } function getTextarea() { var chatEl = document.querySelector('.cc-chat'); return chatEl ? chatEl.querySelector('.cc-input') : null; } function getMessagesDiv() { var chatEl = document.querySelector('.cc-chat'); return chatEl ? chatEl.querySelector('.cc-messages') : null; } function startRecognition() { if (!SR || recognition) return; var rec = new SR(); recognition = rec; rec.continuous = true; rec.interimResults = true; rec.lang = 'en-US'; rec.onresult = function (e) { var textarea = getTextarea(); if (!textarea || isMuted()) { if (textarea) textarea.value = ''; return; } var transcript = ''; var isFinal = false; for (var i = e.resultIndex; i < e.results.length; i++) { transcript += e.results[i][0].transcript; if (e.results[i].isFinal) isFinal = true; } if (isFinal && Date.now() - lastUnmuteTime < 2000) { textarea.value = ''; return; } textarea.value = transcript; if (isFinal && transcript.trim()) { textarea.value = '\uD83C\uDFA4 ' + transcript.trim(); textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })); textarea.value = ''; } }; rec.onend = function () { if (rec !== recognition) return; recognition = null; if (active) setTimeout(function () { if (active) startRecognition(); }, 100); }; rec.onerror = function (e) { if (e.error === 'not-allowed') { active = false; } }; try { rec.start(); } catch (e) { recognition = null; } } function speakText(text) { pendingUtterances++; muteUntil = Date.now() + 600000; var textarea = getTextarea(); if (textarea) textarea.value = ''; var utter = new SpeechSynthesisUtterance(text); utter.rate = 1.1; utter.onend = function () { pendingUtterances--; if (pendingUtterances <= 0) { pendingUtterances = 0; muteUntil = Date.now() + 2000; lastUnmuteTime = Date.now() + 2000; } var textarea = getTextarea(); if (textarea) textarea.value = ''; }; utter.onerror = function () { pendingUtterances--; if (pendingUtterances <= 0) { pendingUtterances = 0; muteUntil = Date.now() + 2000; lastUnmuteTime = Date.now() + 2000; } }; synth.speak(utter); } function stopAll() { active = false; pendingUtterances = 0; muteUntil = 0; if (recognition) { try { recognition.abort(); } catch (e) { } recognition = null; } synth.cancel(); } // Initialize: count existing messages so we don't speak old ones var messagesDiv = getMessagesDiv(); lastSpokenCount = messagesDiv ? messagesDiv.querySelectorAll('.cc-msg-assistant').length : 0; startRecognition(); var pollId = setInterval(function () { if (!active) return; var messagesDiv = getMessagesDiv(); if (!messagesDiv) return; var bubbles = messagesDiv.querySelectorAll('.cc-msg-assistant'); if (bubbles.length > lastSpokenCount) { for (var i = lastSpokenCount; i < bubbles.length; i++) { speakText(bubbles[i].textContent.replace(/\n{2,}/g, '. ')); } lastSpokenCount = bubbles.length; } }, 500); invalidation.then(function () { stopAll(); clearInterval(pollId); }); return 'voice active'; }(); }3d:T563,cc_handle_delete_cell = function handleDeleteCell(cmd, runtime) { var pid = cmd.params.pid; var name = cmd.params.name; var moduleName = cmd.params.module; if (!pid && !name) { return { ok: false, error: 'delete_cell: requires pid or name' }; } var targetMod = null; if (moduleName) { targetMod = cc_find_module(runtime, moduleName); if (!targetMod) return { ok: false, error: 'Module not found: ' + moduleName }; } var found = null; for (var v of runtime._variables) { if (targetMod && v._module !== targetMod) continue; var match = pid && v.pid === pid || name && v._name === name; if (match) { found = v; break; } } if (!found) { return { ok: false, error: 'Cell not found (pid: ' + (pid || '-') + ', name: ' + (name || '-') + ')' }; } try { var info = { pid: found.pid || null, name: found._name || null }; found.delete(); return { ok: true, result: { deleted: info } }; } catch (e) { return { ok: false, error: 'delete failed: ' + (e.message || String(e)) }; } }3e:Ta2e,cc_handle_update_cell = function handleUpdateCell(cmd, runtime) { var pid = cmd.params.pid; var name = cmd.params.name; var source = cmd.params.source; var moduleName = cmd.params.module; if (!pid && !name) return { ok: false, error: 'update_cell: requires pid or name' }; if (!source) return { ok: false, error: 'update_cell: source required' }; var targetMod = null; if (moduleName) { targetMod = cc_find_module(runtime, moduleName); if (!targetMod) return { ok: false, error: 'Module not found: ' + moduleName }; } var found = null; for (var v of runtime._variables) { if (targetMod && v._module !== targetMod) continue; if (pid && v.pid === pid || name && v._name === name) { found = v; break; } } if (!found) { return { ok: false, error: 'Cell not found (pid: ' + (pid || '-') + ', name: ' + (name || '-') + ')' }; } var foundMod = found._module; try { var compiled = compile(source); if (!compiled || compiled.length === 0) { return { ok: false, error: 'Compilation returned no definitions' }; } if (compiled.length > 1) { return { ok: false, error: 'update_cell: source compiled to ' + compiled.length + ' variables; use define_cell for viewof/mutable or multi-cell source' }; } var cellDef = compiled[0]; var definitions = [cellDef._definition]; return realize(definitions, runtime).then(function (fns) { var fn = fns[0]; var newName = cellDef._name; var newInputs = cellDef._inputs || []; found.define(newName, newInputs, fn); return { ok: true, result: { updated: { pid: found.pid || null, name: newName || null }, module: foundMod && foundMod._name || 'main' } }; }).catch(function (e) { return { ok: false, error: 'update-cell realize failed: ' + e.message }; }); } catch (e) { return { ok: false, error: 'update-cell compile failed: ' + e.message }; } }3f:T5fb,cc_handle_export_module = function handleExportModule(cmd, runtime) { var moduleName = cmd.params.module; if (!moduleName) return { ok: false, error: 'export_module: module name required' }; if (typeof exportToHTML !== 'function') { return { ok: false, error: 'exportToHTML not available. Does this notebook include @tomlarkworthy/exporter-3?' }; } return Promise.resolve(exportToHTML({ mains: runtime.mains })).then(function (result) { var html = typeof result === 'string' ? result : result.source; if (!html || typeof html !== 'string') { return { ok: false, error: 'Export returned no HTML source' }; } var escName = moduleName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); var re = new RegExp(']*\\bid="' + escName + '"[^>]*>([\\s\\S]*?)'); var m = html.match(re); if (!m) { return { ok: false, error: 'Module