@proflandrigan/shards 1.1.0

package/src/ui/js/markdown.js

@@ -0,0 +1,114 @@
+// ═══════════════════════════════════════════════════════════════
+// Markdown renderer (marked.js v4 + custom code highlighting)
+// ═══════════════════════════════════════════════════════════════
+
+(function initMarked() {
+  var renderer = new marked.Renderer();
+
+  renderer.code = function(code, lang) {
+    var highlighted = highlightCode(esc(code), lang || '');
+    return '<div class="code-block-wrapper"><button class="copy-code-btn" onclick="copyCodeBlock(this)">Copy</button><pre><code>' + highlighted + '</code></pre></div>';
+  };
+
+  marked.setOptions({
+    gfm: true,
+    breaks: false,
+    renderer: renderer
+  });
+})();
+
+function renderMarkdown(md) {
+  if (!md) return '';
+  return marked.parse(md);
+}
+
+// ═══════════════════════════════════════════════════════════════
+// Syntax highlighting
+// ═══════════════════════════════════════════════════════════════
+
+function highlightCode(escapedCode, lang) {
+  if (!lang) return escapedCode;
+  switch (lang.toLowerCase()) {
+    case 'python': case 'py': return hlPython(escapedCode);
+    case 'sql': return hlSQL(escapedCode);
+    case 'javascript': case 'js': case 'typescript': case 'ts': return hlJS(escapedCode);
+    case 'json': return hlJSON(escapedCode);
+    case 'yaml': case 'yml': return hlYAML(escapedCode);
+    default: return escapedCode;
+  }
+}
+
+// Single-pass tokenizer: comments/strings claim their full regions first, then
+// keywords and numbers match only in the remaining unclaimed code. Avoids later
+// regexes matching inside HTML produced by earlier ones (e.g. `class` keyword
+// matching inside `<span class="cmt">`).
+function hlPython(code) {
+  var kws = 'def|class|import|from|return|if|elif|else|for|while|in|not|and|or|with|as|try|except|finally|raise|pass|break|continue|lambda|yield|global|nonlocal|del|assert|True|False|None|async|await|is|print';
+  var pattern = new RegExp(
+    '(#[^\\n]*)' +
+    '|("""[\\s\\S]*?"""|\'\'\'[\\s\\S]*?\'\'\'|"[^"\\\\]*(?:\\\\.[^"\\\\]*)*"|\'[^\'\\\\]*(?:\\\\.[^\'\\\\]*)*\')' +
+    '|\\b(' + kws + ')\\b' +
+    '|\\b(\\d+\\.?\\d*)\\b',
+    'g'
+  );
+  return code.replace(pattern, function(m, cmt, str, kw, num) {
+    if (cmt) return '<span class="cmt">' + cmt + '</span>';
+    if (str) return '<span class="str">' + str + '</span>';
+    if (kw)  return '<span class="kw">' + kw + '</span>';
+    if (num) return '<span class="num">' + num + '</span>';
+    return m;
+  });
+}
+
+function hlSQL(code) {
+  var kws = 'SELECT|FROM|WHERE|JOIN|LEFT|RIGHT|INNER|OUTER|FULL|ON|GROUP|BY|ORDER|HAVING|LIMIT|OFFSET|INSERT|INTO|VALUES|UPDATE|SET|DELETE|CREATE|TABLE|DROP|ALTER|ADD|COLUMN|INDEX|VIEW|WITH|AS|AND|OR|NOT|IN|IS|NULL|LIKE|BETWEEN|EXISTS|DISTINCT|COUNT|SUM|AVG|MIN|MAX|CASE|WHEN|THEN|ELSE|END|UNION|ALL|OVER|PARTITION|ROW_NUMBER|RANK|DENSE_RANK|COALESCE|CAST|DATE|TIMESTAMP';
+  var pattern = new RegExp(
+    '(--[^\\n]*)' +
+    '|(\'(?:[^\'\\\\]|\\\\.)*\')' +
+    '|\\b(' + kws + ')\\b' +
+    '|\\b(\\d+\\.?\\d*)\\b',
+    'gi'
+  );
+  return code.replace(pattern, function(m, cmt, str, kw, num) {
+    if (cmt) return '<span class="cmt">' + cmt + '</span>';
+    if (str) return '<span class="str">' + str + '</span>';
+    if (kw)  return '<span class="kw">' + kw.toUpperCase() + '</span>';
+    if (num) return '<span class="num">' + num + '</span>';
+    return m;
+  });
+}
+
+function hlJS(code) {
+  var kws = 'const|let|var|function|return|if|else|for|while|do|class|extends|import|export|default|from|new|this|typeof|instanceof|in|of|try|catch|finally|throw|async|await|true|false|null|undefined|break|continue|switch|case|delete|void|yield|interface|type|enum|static|get|set';
+  var pattern = new RegExp(
+    '(\\/\\/[^\\n]*)' +
+    '|("(?:[^"\\\\]|\\\\.)*"|\'(?:[^\'\\\\]|\\\\.)*\'|`(?:[^`\\\\]|\\\\.)*`)' +
+    '|\\b(' + kws + ')\\b' +
+    '|\\b(\\d+\\.?\\d*)\\b',
+    'g'
+  );
+  return code.replace(pattern, function(m, cmt, str, kw, num) {
+    if (cmt) return '<span class="cmt">' + cmt + '</span>';
+    if (str) return '<span class="str">' + str + '</span>';
+    if (kw)  return '<span class="kw">' + kw + '</span>';
+    if (num) return '<span class="num">' + num + '</span>';
+    return m;
+  });
+}
+
+function hlJSON(code) {
+  return code
+    .replace(/("(?:[^"\\]|\\.)*")(\s*:)/g, '<span class="attr">$1</span>$2')
+    .replace(/:\s*("(?:[^"\\]|\\.)*")/g, ': <span class="str">$1</span>')
+    .replace(/:\s*(\d+\.?\d*(?:[eE][+-]?\d+)?)/g, ': <span class="num">$1</span>')
+    .replace(/:\s*(true|false|null)/g, ': <span class="kw">$1</span>');
+}
+
+function hlYAML(code) {
+  return code.split('\n').map(function(line) {
+    if (/^\s*#/.test(line)) return '<span class="cmt">' + line + '</span>';
+    var m = line.match(/^(\s*\S[^:]*:)(.*)/);
+    if (m) return '<span class="attr">' + m[1] + '</span><span class="str">' + m[2] + '</span>';
+    return line;
+  }).join('\n');
+}

package/src/ui/js/monaco.js

@@ -0,0 +1,164 @@
+// ═══════════════════════════════════════════════════════════════
+// Monaco Editor loader
+// ═══════════════════════════════════════════════════════════════
+
+function loadMonaco() {
+  if (monacoLoadPromise) return monacoLoadPromise;
+  monacoLoadPromise = new Promise(function(resolve, reject) {
+    if (monacoLoaded) { resolve(window.monaco); return; }
+    if (monacoFailed) { reject(new Error('Monaco load failed previously')); return; }
+
+    var script = document.createElement('script');
+    script.src = 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs/loader.js';
+    script.onload = function() {
+      window.require.config({
+        paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs' }
+      });
+      window.require(['vs/editor/editor.main'], function() {
+        monacoLoaded = true;
+        defineShardsDarkTheme();
+        if (typeof registerCodeIntelProviders === 'function') {
+          registerCodeIntelProviders();
+        }
+        resolve(window.monaco);
+      });
+    };
+    script.onerror = function() {
+      monacoFailed = true;
+      reject(new Error('Monaco CDN load failed'));
+    };
+    // Timeout fallback
+    setTimeout(function() {
+      if (!monacoLoaded) {
+        monacoFailed = true;
+        reject(new Error('Monaco load timeout'));
+      }
+    }, 15000);
+    document.head.appendChild(script);
+  });
+  return monacoLoadPromise;
+}
+
+function defineShardsDarkTheme() {
+  monaco.editor.defineTheme('shards-dark', {
+    base: 'vs-dark',
+    inherit: true,
+    rules: [
+      { token: 'keyword', foreground: 'c678dd' },
+      { token: 'string', foreground: '98c379' },
+      { token: 'number', foreground: 'd19a66' },
+      { token: 'comment', foreground: '4a5060', fontStyle: 'italic' },
+      { token: 'type', foreground: '61afef' },
+      { token: 'function', foreground: '61afef' },
+      { token: 'variable', foreground: 'b0b0c4' },
+      { token: 'operator', foreground: '56b6c2' },
+      { token: 'delimiter', foreground: '808098' },
+      { token: 'tag', foreground: 'e06c75' },
+      { token: 'attribute.name', foreground: 'd19a66' },
+      { token: 'attribute.value', foreground: '98c379' },
+    ],
+    colors: {
+      'editor.background': '#0a0a16',
+      'editor.foreground': '#b0b0c4',
+      'editor.lineHighlightBackground': '#0e0e1e',
+      'editor.selectionBackground': '#1a1a3a',
+      'editorCursor.foreground': '#5080e0',
+      'editorLineNumber.foreground': '#2a2a44',
+      'editorLineNumber.activeForeground': '#4a4a68',
+      'editor.inactiveSelectionBackground': '#141428',
+      'editorIndentGuide.background': '#141420',
+      'editorWhitespace.foreground': '#1a1a2c',
+      'scrollbarSlider.background': '#1a1a2c80',
+      'scrollbarSlider.hoverBackground': '#25254080',
+    },
+  });
+  monaco.editor.defineTheme('shards-light', {
+    base: 'vs',
+    inherit: true,
+    rules: [
+      { token: 'keyword', foreground: '8b2fc9' },
+      { token: 'string', foreground: '248a3d' },
+      { token: 'number', foreground: 'b05000' },
+      { token: 'comment', foreground: '8e8e93', fontStyle: 'italic' },
+      { token: 'type', foreground: '2560c4' },
+      { token: 'function', foreground: '2560c4' },
+      { token: 'variable', foreground: '333333' },
+      { token: 'operator', foreground: '1a7a7a' },
+      { token: 'delimiter', foreground: '666666' },
+      { token: 'tag', foreground: 'c23030' },
+      { token: 'attribute.name', foreground: 'b05000' },
+      { token: 'attribute.value', foreground: '248a3d' },
+    ],
+    colors: {
+      'editor.background': '#f5f5f8',
+      'editor.foreground': '#333333',
+      'editor.lineHighlightBackground': '#f0f0f4',
+      'editor.selectionBackground': '#c5cae9',
+      'editorCursor.foreground': '#4a80e0',
+      'editorLineNumber.foreground': '#bbbbbb',
+      'editorLineNumber.activeForeground': '#888888',
+      'editor.inactiveSelectionBackground': '#dde4f4',
+      'editorIndentGuide.background': '#e0e0e0',
+      'editorWhitespace.foreground': '#d0d0d0',
+      'scrollbarSlider.background': '#cccccc80',
+      'scrollbarSlider.hoverBackground': '#aaaaaa80',
+    },
+  });
+}
+
+function currentMonacoTheme() {
+  return document.documentElement.getAttribute('data-theme') === 'light' ? 'shards-light' : 'shards-dark';
+}
+
+function disposeMonacoInstance() {
+  if (activeMonacoInstance) {
+    activeMonacoInstance.dispose();
+    activeMonacoInstance = null;
+  }
+}
+
+function disposeNotebookCellMonaco() {
+  if (activeNotebookCellMonaco) {
+    // Save current value before disposing
+    var key = getCurrentFileKey();
+    if (key && openFiles[key] && openFiles[key].notebookData && activeNotebookCellIdx !== null) {
+      var cell = openFiles[key].notebookData.cells[activeNotebookCellIdx];
+      if (cell) {
+        cell.source = activeNotebookCellMonaco.getValue();
+        if (cell.cell_type === 'markdown') {
+          cell.editing = false;
+          // Update DOM directly to show rendered markdown without a full re-render
+          var inputEl = document.querySelector('[data-cell-input="' + activeNotebookCellIdx + '"]');
+          if (inputEl) {
+            inputEl.innerHTML = '<div class="file-rendered">' + renderMarkdown(cell.source) + '</div>';
+          }
+        }
+      }
+    }
+    activeNotebookCellMonaco.dispose();
+    activeNotebookCellMonaco = null;
+    activeNotebookCellIdx = null;
+  }
+}
+
+function createMonacoEditor(container, options) {
+  return monaco.editor.create(container, {
+    theme: currentMonacoTheme(),
+    minimap: { enabled: false },
+    scrollBeyondLastLine: false,
+    automaticLayout: true,
+    fontSize: 13,
+    fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace",
+    lineHeight: 20,
+    renderLineHighlight: 'line',
+    scrollbar: { verticalScrollbarSize: 5, horizontalScrollbarSize: 5 },
+    overviewRulerLanes: 0,
+    hideCursorInOverviewRuler: true,
+    overviewRulerBorder: false,
+    padding: { top: 8, bottom: 8 },
+    quickSuggestions: true,
+    parameterHints: { enabled: true },
+    gotoLocation: { multiple: 'peek', multipleDefinitions: 'peek', multipleReferences: 'peek' },
+    ...options,
+  });
+}

package/src/ui/js/notebook-walkthrough.js

@@ -0,0 +1,272 @@
+// ═══════════════════════════════════════════════════════════════
+// Notebook Walkthrough Panel
+// ═══════════════════════════════════════════════════════════════
+// Interactive cell-by-cell notebook walkthrough driven by an agent
+// (Data Scientist, ML Engineer, or Syn). The agent owns the kernel
+// and the .ipynb file on disk; this panel renders the current state
+// from a watched JSON file (.shards/notebook-walkthrough.json) and
+// dispatches user actions back to the agent as chat messages prefixed
+// with [NOTEBOOK-WALKTHROUGH].
+//
+// The renderer signature matches the other panel renderers in panels.js:
+// renderNotebookWalkthrough(container, panel)
+// where panel.rawData is the parsed walkthrough state JSON.
+
+function cleanupNotebookWalkthrough(panel) {
+  // No long-lived editor instances or Plotly charts to dispose.
+  // The state is rebuilt from rawData on every render.
+  panel._nwState = panel._nwState || {};
+}
+
+function renderNotebookWalkthrough(container, panel) {
+  var d = panel.rawData;
+  if (!d) {
+    container.innerHTML = '<div class="nw-empty">No walkthrough data yet. The agent will push state once the kernel is started.</div>';
+    return;
+  }
+
+  // Preserve view-only state (e.g. which cell is expanded for editing) across
+  // re-renders. The agent owns the source-of-truth state JSON.
+  panel._nwState = panel._nwState || { editingCellIdx: null, editBuffer: '' };
+  var view = panel._nwState;
+  var pid = panel.panelId;
+
+  var cells = (d.cells || []);
+  var current = (typeof d.currentCellIndex === 'number') ? d.currentCellIndex : 0;
+
+  // ── Scroll preservation ──
+  // The whole container's innerHTML is rewritten on every state update, so the
+  // inner .nw-cells scroll position resets to 0. Capture it before rebuilding
+  // and restore it after — unless the current cell index changed (Next cell,
+  // jump, etc.), in which case scroll the new current cell into view.
+  var prevScrollTop = 0;
+  var prevCellsEl = container.querySelector('.nw-cells');
+  if (prevCellsEl) prevScrollTop = prevCellsEl.scrollTop;
+  var prevCurrent = (typeof view.lastRenderedCurrentIndex === 'number')
+    ? view.lastRenderedCurrentIndex : null;
+  var indexChanged = prevCurrent !== null && prevCurrent !== current;
+  var status = d.status || 'ready';
+  var nbPath = d.notebookPath || '';
+  var nbBaseName = nbPath ? nbPath.split('/').pop() : '(no notebook)';
+  var staleCount = 0;
+  for (var ci = 0; ci < cells.length; ci++) { if (cells[ci] && cells[ci].stale) staleCount++; }
+
+  var html = '<div class="notebook-walkthrough" data-panel-id="' + esc(pid) + '">';
+
+  // ── Status strip ──
+  html += '<div class="nw-status-strip">';
+  html += '<div class="nw-strip-left">';
+  html += '<span class="nw-nb-name" title="' + esc(nbPath) + '">' + esc(nbBaseName) + '</span>';
+  html += '<span class="nw-cell-counter">Cell ' + (current + 1) + ' / ' + cells.length + '</span>';
+  html += '<span class="nw-status-badge nw-status-' + esc(status) + '">' + esc(status) + '</span>';
+  if (staleCount > 0) {
+    html += '<span class="nw-stale-count" title="' + staleCount + ' cell(s) are stale (ancestors changed)">' + staleCount + ' stale</span>';
+  }
+  html += '</div>';
+  html += '<div class="nw-strip-right">';
+  html += '<button class="nw-strip-btn" data-nw-action="send-command" data-nw-command="Restart kernel" title="Restart kernel">Restart</button>';
+  html += '<button class="nw-strip-btn" data-nw-action="send-command" data-nw-command="Restart &amp; run all" title="Restart the kernel and run every cell top-to-bottom (reproducibility check)">Run All</button>';
+  html += '<button class="nw-strip-btn" data-nw-action="send-command" data-nw-command="End walkthrough" title="End walkthrough">End</button>';
+  html += '</div>';
+  html += '</div>';
+
+  // ── Cells ──
+  html += '<div class="nw-cells">';
+  for (var i = 0; i < cells.length; i++) {
+    var c = cells[i] || {};
+    var rawCell = (d.notebookCells && d.notebookCells[i]) ? d.notebookCells[i] : null;
+    html += renderWalkthroughCell(pid, i, c, rawCell, current, view);
+  }
+  html += '</div>';
+
+  // ── Empty notebook fallback ──
+  if (cells.length === 0) {
+    html += '<div class="nw-empty">Notebook has no cells.</div>';
+  }
+
+  html += '</div>';
+  container.innerHTML = html;
+
+  // Wire up button click handlers (replaces inline onclicks so that pids or
+  // commands containing apostrophes don't break the HTML attribute parser).
+  container.querySelectorAll('[data-nw-action]').forEach(function(el) {
+    el.addEventListener('click', function(ev) {
+      var action = el.getAttribute('data-nw-action');
+      if (action === 'send-command') {
+        nwSendCommand(pid, el.getAttribute('data-nw-command'));
+      } else if (action === 'prompt-question') {
+        nwPromptQuestion(pid, parseInt(el.getAttribute('data-cell-idx'), 10));
+      } else if (action === 'prompt-insert') {
+        nwPromptInsert(pid, parseInt(el.getAttribute('data-cell-idx'), 10));
+      } else if (action === 'confirm-delete') {
+        nwConfirmDelete(pid, parseInt(el.getAttribute('data-cell-idx'), 10));
+      } else if (action === 'toggle-edit') {
+        nwToggleEdit(pid, parseInt(el.getAttribute('data-cell-idx'), 10));
+      } else if (action === 'apply-edit') {
+        nwApplyEdit(pid, parseInt(el.getAttribute('data-cell-idx'), 10));
+      }
+    });
+  });
+
+  // ── Restore scroll / focus the current cell ──
+  var newCellsEl = container.querySelector('.nw-cells');
+  if (newCellsEl) {
+    if (indexChanged) {
+      var target = newCellsEl.querySelector('[data-cell-idx="' + current + '"]');
+      if (target) {
+        // scrollIntoView is relative to the nearest scrollable ancestor —
+        // .nw-cells. Center the cell so the user sees it and a bit of context
+        // above and below.
+        try {
+          target.scrollIntoView({ block: 'center', behavior: 'auto' });
+        } catch (e) {
+          // Older browsers: fallback to math.
+          var rect = target.getBoundingClientRect();
+          var parentRect = newCellsEl.getBoundingClientRect();
+          newCellsEl.scrollTop += (rect.top - parentRect.top) - (parentRect.height - rect.height) / 2;
+        }
+      }
+    } else {
+      newCellsEl.scrollTop = prevScrollTop;
+    }
+  }
+  view.lastRenderedCurrentIndex = current;
+}
+
+function renderWalkthroughCell(pid, idx, cellState, rawCell, current, view) {
+  var isCurrent = idx === current;
+  var isEditing = view && view.editingCellIdx === idx;
+  var stale = !!cellState.stale;
+  var executed = !!cellState.executed;
+  var cellType = cellState.type || (rawCell ? rawCell.cell_type : 'code');
+  var cls = 'nw-cell';
+  if (isCurrent) cls += ' nw-cell-current';
+  if (stale) cls += ' nw-cell-stale';
+  if (executed) cls += ' nw-cell-executed';
+
+  var html = '<div class="' + cls + '" data-cell-idx="' + idx + '">';
+
+  // Header strip per cell (index + type + status badges + action row)
+  html += '<div class="nw-cell-header">';
+  html += '<span class="nw-cell-idx">[' + idx + ']</span>';
+  html += '<span class="nw-cell-type ' + esc(cellType) + '">' + esc(cellType) + '</span>';
+  if (executed && !stale) html += '<span class="nw-cell-flag nw-flag-ok">ran</span>';
+  if (stale) html += '<span class="nw-cell-flag nw-flag-stale">stale</span>';
+  if (isCurrent) html += '<span class="nw-cell-flag nw-flag-current">current</span>';
+
+  // Action row
+  html += '<div class="nw-cell-actions">';
+  if (cellType === 'code') {
+    html += '<button class="nw-act-btn nw-act-run" data-nw-action="send-command" data-nw-command="Run cell ' + idx + '" title="Run cell">Run</button>';
+  }
+  html += '<button class="nw-act-btn" data-nw-action="send-command" data-nw-command="Re-explain cell ' + idx + '" title="Ask agent to re-explain">Explain</button>';
+  html += '<button class="nw-act-btn" data-nw-action="prompt-question" data-cell-idx="' + idx + '" title="Ask a question about this cell">Ask</button>';
+  if (cellType === 'code') {
+    html += '<button class="nw-act-btn" data-nw-action="toggle-edit" data-cell-idx="' + idx + '" title="Edit cell source">' + (isEditing ? 'Cancel' : 'Edit') + '</button>';
+  }
+  html += '<button class="nw-act-btn" data-nw-action="prompt-insert" data-cell-idx="' + idx + '" title="Insert a new cell after this one">Insert</button>';
+  html += '<button class="nw-act-btn nw-act-delete" data-nw-action="confirm-delete" data-cell-idx="' + idx + '" title="Delete this cell">Delete</button>';
+  if (stale) {
+    html += '<button class="nw-act-btn nw-act-rerun" data-nw-action="send-command" data-nw-command="Re-run from cell ' + idx + '" title="Re-run this cell and all downstream stale cells">Re-run from here</button>';
+  }
+  html += '</div>';
+  html += '</div>';
+
+  // Body — code/markdown source + outputs (or Monaco editor in edit mode)
+  html += '<div class="nw-cell-body">';
+  if (isEditing) {
+    var src = (rawCell && (Array.isArray(rawCell.source) ? rawCell.source.join('') : rawCell.source)) || '';
+    html += '<textarea class="nw-edit-textarea" id="nw-edit-' + esc(pid) + '-' + idx + '">' + esc(src) + '</textarea>';
+    html += '<div class="nw-edit-actions">';
+    html += '<button class="nw-act-btn nw-act-primary" data-nw-action="apply-edit" data-cell-idx="' + idx + '">Apply &amp; Re-run</button>';
+    html += '<button class="nw-act-btn" data-nw-action="toggle-edit" data-cell-idx="' + idx + '">Cancel</button>';
+    html += '</div>';
+  } else if (rawCell && typeof renderStaticCellHtml === 'function') {
+    var staticCell = {
+      cell_type: rawCell.cell_type || cellType,
+      source: Array.isArray(rawCell.source) ? rawCell.source.join('') : (rawCell.source || ''),
+      outputs: rawCell.outputs || [],
+    };
+    html += renderStaticCellHtml(staticCell);
+  } else {
+    html += '<div class="nw-cell-no-source">(source unavailable — agent has not yet pushed cell snapshots)</div>';
+  }
+
+  // Last explanation/output summary if present
+  if (cellState.outputSummary) {
+    html += '<div class="nw-output-summary"><strong>Last result:</strong> ' + esc(cellState.outputSummary) + '</div>';
+  }
+  if (cellState.explanation) {
+    html += '<div class="nw-explanation"><strong>Explanation:</strong> ' + esc(cellState.explanation) + '</div>';
+  }
+  if (cellState.lastRunAt) {
+    html += '<div class="nw-last-run">ran ' + esc(cellState.lastRunAt) + '</div>';
+  }
+
+  html += '</div>';
+  html += '</div>';
+  return html;
+}
+
+// ─── Action dispatchers ──────────────────────────────────────────────────────
+// All actions become chat messages prefixed [NOTEBOOK-WALKTHROUGH] sent via
+// /chat/send to the active session — same pattern as the Prompt Lab.
+
+function nwSendCommand(panelId, commandText) {
+  var msg = '[NOTEBOOK-WALKTHROUGH] ' + commandText;
+  var sessionId = activeSessionId;
+  if (typeof authFetch !== 'function') return;
+  authFetch('/chat/send', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ message: msg, sessionId: sessionId }),
+  }).catch(function() {});
+}
+
+function nwPromptQuestion(panelId, idx) {
+  var q = window.prompt('Question about cell ' + idx + ':', '');
+  if (!q) return;
+  nwSendCommand(panelId, 'Question on cell ' + idx + ': ' + q);
+}
+
+function nwPromptInsert(panelId, idx) {
+  var typeAns = window.prompt('Insert what kind of cell after [' + idx + ']? Type "code" or "markdown":', 'code');
+  if (!typeAns) return;
+  typeAns = String(typeAns).trim().toLowerCase();
+  if (typeAns !== 'code' && typeAns !== 'markdown') return;
+  var content = window.prompt('Cell content (you can also leave blank and ask the agent to fill it in):', '');
+  if (content === null) return;
+  // Encode newlines so the chat protocol stays single-line-friendly. Agent
+  // will decode \n on receipt.
+  var encoded = content.replace(/\r\n?/g, '\n').replace(/\n/g, '\\n');
+  nwSendCommand(panelId, 'Insert cell after ' + idx + ' (' + typeAns + '): ' + encoded);
+}
+
+function nwConfirmDelete(panelId, idx) {
+  if (!window.confirm('Delete cell ' + idx + '? Downstream cells may go stale.')) return;
+  nwSendCommand(panelId, 'Delete cell ' + idx);
+}
+
+function nwToggleEdit(panelId, idx) {
+  var p = openPanels[panelId];
+  if (!p) return;
+  p._nwState = p._nwState || { editingCellIdx: null };
+  if (p._nwState.editingCellIdx === idx) {
+    p._nwState.editingCellIdx = null;
+  } else {
+    p._nwState.editingCellIdx = idx;
+  }
+  var container = document.getElementById('file-rendered-view');
+  if (container) renderNotebookWalkthrough(container, p);
+}
+
+function nwApplyEdit(panelId, idx) {
+  var ta = document.getElementById('nw-edit-' + panelId + '-' + idx);
+  if (!ta) return;
+  var newSrc = ta.value || '';
+  var encoded = newSrc.replace(/\r\n?/g, '\n').replace(/\n/g, '\\n');
+  // Reset edit-mode view state before re-render
+  var p = openPanels[panelId];
+  if (p && p._nwState) p._nwState.editingCellIdx = null;
+  nwSendCommand(panelId, 'Edit cell ' + idx + ': ' + encoded);
+}