@webmcp-auto-ui/ui 2.5.26 → 2.5.28

package/src/widgets/notebook/left-pane.ts

@@ -0,0 +1,249 @@
+// @ts-nocheck
+// ---------------------------------------------------------------------------
+// Left pane — collapsible resource browser (Chrome-bookmarks-style).
+// Lists recipes + tools per connected MCP server.
+// Click opens the appropriate viewer modal (recipe / tool).
+// Collapsed by default.
+// ---------------------------------------------------------------------------
+
+import { callToolViaPostMessage } from '@webmcp-auto-ui/core';
+import { openRecipeViewerModal, openToolViewerModal, type ImportedRecipe } from './import-modals.js';
+import type { NotebookCell, NotebookState, DataServerDescriptor } from './shared.js';
+
+export interface LeftPaneHandlers {
+  /** Called when the user injects one or more cells from a recipe/tool viewer. */
+  onInjectCells: (cells: NotebookCell[]) => void;
+}
+
+export interface LeftPaneHandle {
+  root: HTMLElement;
+  setServers(servers: DataServerDescriptor[]): void;
+  toggle(open?: boolean): void;
+  destroy(): void;
+}
+
+/**
+ * Mount a left pane inside `host`. The pane is collapsed by default;
+ * click the handle to expand. Returns a handle the widget can use to
+ * feed updated server lists or toggle programmatically.
+ */
+export function mountLeftPane(
+  host: HTMLElement,
+  state: NotebookState,
+  initialServers: DataServerDescriptor[],
+  handlers: LeftPaneHandlers,
+): LeftPaneHandle {
+  injectLeftPaneStyles();
+
+  const root = document.createElement('aside');
+  root.className = 'nb-lp';
+  root.innerHTML = `
+    <button type="button" class="nb-lp-handle" aria-label="Toggle resources" title="Resources">
+      <span class="nb-lp-handle-icon">▸</span>
+      <span class="nb-lp-handle-label">Resources</span>
+    </button>
+    <div class="nb-lp-body" hidden>
+      <header class="nb-lp-head">
+        <span class="nb-lp-title">Resources</span>
+        <button type="button" class="nb-lp-close" aria-label="Close">×</button>
+      </header>
+      <div class="nb-lp-servers" data-role="servers"></div>
+    </div>
+  `;
+  host.appendChild(root);
+
+  const handle = root.querySelector('.nb-lp-handle') as HTMLElement;
+  const body = root.querySelector('.nb-lp-body') as HTMLElement;
+  const closeBtn = root.querySelector('.nb-lp-close') as HTMLElement;
+  const serversEl = root.querySelector('[data-role="servers"]') as HTMLElement;
+
+  let servers: DataServerDescriptor[] = initialServers ?? [];
+  // Recipe-body cache per serverName/name key
+  const recipeBodyCache = new Map<string, string>();
+
+  function render() {
+    serversEl.innerHTML = '';
+    if (!servers.length) {
+      serversEl.innerHTML = '<div class="nb-lp-empty">No servers connected.</div>';
+      return;
+    }
+    for (const srv of servers) {
+      const section = document.createElement('section');
+      section.className = 'nb-lp-srv';
+      section.innerHTML = `
+        <header class="nb-lp-srv-head">
+          <span class="nb-lp-srv-dot"></span>
+          <span class="nb-lp-srv-name">${escapeHtml(srv.name)}</span>
+          <span class="nb-lp-srv-meta">${(srv.recipes?.length ?? 0)} recipes · ${(srv.tools?.length ?? 0)} tools</span>
+        </header>
+        <div class="nb-lp-srv-groups">
+          ${srv.recipes?.length ? `
+            <details class="nb-lp-group" open>
+              <summary>📜 Recipes (${srv.recipes.length})</summary>
+              <ul class="nb-lp-list" data-role="recipes"></ul>
+            </details>
+          ` : ''}
+          ${srv.tools?.length ? `
+            <details class="nb-lp-group">
+              <summary>⚙ Tools (${srv.tools.length})</summary>
+              <ul class="nb-lp-list" data-role="tools"></ul>
+            </details>
+          ` : ''}
+        </div>
+      `;
+      const recList = section.querySelector('[data-role="recipes"]') as HTMLElement | null;
+      if (recList && srv.recipes) {
+        for (const r of srv.recipes) {
+          const li = document.createElement('li');
+          li.className = 'nb-lp-item';
+          li.innerHTML = `
+            <span class="nb-lp-item-name">${escapeHtml(r.name)}</span>
+            ${r.description ? `<span class="nb-lp-item-desc">${escapeHtml(r.description)}</span>` : ''}
+          `;
+          li.addEventListener('click', () => onRecipeClick(srv, r));
+          recList.appendChild(li);
+        }
+      }
+      const toolList = section.querySelector('[data-role="tools"]') as HTMLElement | null;
+      if (toolList && srv.tools) {
+        for (const t of srv.tools) {
+          const li = document.createElement('li');
+          li.className = 'nb-lp-item';
+          li.innerHTML = `
+            <span class="nb-lp-item-name nb-lp-tool">${escapeHtml(t.name)}</span>
+            ${t.description ? `<span class="nb-lp-item-desc">${escapeHtml(t.description)}</span>` : ''}
+          `;
+          li.addEventListener('click', () => onToolClick(srv, t));
+          toolList.appendChild(li);
+        }
+      }
+      serversEl.appendChild(section);
+    }
+  }
+
+  async function onRecipeClick(srv: DataServerDescriptor, r: { name: string; description?: string; body?: string }) {
+    const imported: ImportedRecipe = {
+      name: r.name,
+      description: r.description,
+      body: r.body,
+      serverName: srv.name,
+      originalName: r.name,
+    };
+    const key = srv.name + ':' + r.name;
+    if (!imported.body && recipeBodyCache.has(key)) {
+      imported.body = recipeBodyCache.get(key);
+    }
+    if (!imported.body) {
+      try {
+        const res: any = await callToolViaPostMessage(`${srv.name}_get_recipe`, { name: r.name, id: r.name });
+        const text = res?.content?.find?.((c: any) => c.type === 'text')?.text;
+        if (text) {
+          let body = text;
+          try {
+            const parsed = JSON.parse(text);
+            if (parsed && typeof parsed === 'object' && typeof parsed.content === 'string') body = parsed.content;
+          } catch { /* not JSON */ }
+          imported.body = body;
+          recipeBodyCache.set(key, body);
+        }
+      } catch { /* pass empty body to viewer */ }
+    }
+    openRecipeViewerModal(imported, (cell) => handlers.onInjectCells([cell]));
+  }
+
+  function onToolClick(srv: DataServerDescriptor, t: { name: string; description?: string; inputSchema?: unknown }) {
+    openToolViewerModal({ ...t, serverName: srv.name }, (cells) => handlers.onInjectCells(cells));
+  }
+
+  handle.addEventListener('click', () => toggle());
+  closeBtn.addEventListener('click', () => toggle(false));
+
+  function toggle(open?: boolean) {
+    const nextOpen = typeof open === 'boolean' ? open : !!body.hidden;
+    body.hidden = !nextOpen;
+    root.classList.toggle('nb-lp-open', nextOpen);
+    (root.querySelector('.nb-lp-handle-icon') as HTMLElement).textContent = nextOpen ? '◂' : '▸';
+  }
+
+  render();
+
+  return {
+    root,
+    setServers(next) {
+      servers = next ?? [];
+      render();
+    },
+    toggle,
+    destroy() {
+      root.remove();
+    },
+  };
+}
+
+function escapeHtml(s: string): string {
+  return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+function injectLeftPaneStyles() {
+  if (document.getElementById('nb-lp-styles')) return;
+  const s = document.createElement('style');
+  s.id = 'nb-lp-styles';
+  s.textContent = `
+    .nb-lp {
+      position: relative; display: flex; flex-direction: row; flex-shrink: 0;
+      font-family: var(--font-sans, system-ui); font-size: 12px;
+      color: var(--color-text1, #111);
+    }
+    .nb-lp-handle {
+      writing-mode: vertical-rl; transform: rotate(180deg);
+      background: var(--color-surface2, #f4f4f5);
+      border: 1px solid var(--color-border, #e4e4e7); border-radius: 6px;
+      padding: 10px 5px; cursor: pointer;
+      display: flex; align-items: center; gap: 6px;
+      height: fit-content; font-size: 11px; color: var(--color-text2, #666);
+      align-self: flex-start; margin-top: 12px; margin-right: 4px;
+    }
+    .nb-lp-handle:hover { background: var(--color-surface3, #eeeef0); }
+    .nb-lp-handle-icon { font-size: 10px; }
+    .nb-lp.nb-lp-open .nb-lp-handle { display: none; }
+    .nb-lp-body[hidden] { display: none !important; }
+    .nb-lp-body {
+      width: 260px; border-right: 1px solid var(--color-border, #e4e4e7);
+      background: var(--color-surface, #fff);
+      display: flex; flex-direction: column; max-height: 100%; overflow: hidden;
+    }
+    .nb-lp-head {
+      display: flex; align-items: center; padding: 10px 12px;
+      border-bottom: 1px solid var(--color-border, #e4e4e7);
+    }
+    .nb-lp-title { flex: 1; font-weight: 600; font-size: 12px; }
+    .nb-lp-close { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--color-text2, #666); }
+    .nb-lp-servers { overflow-y: auto; padding: 8px 10px 12px; flex: 1; }
+    .nb-lp-srv { margin-bottom: 10px; }
+    .nb-lp-srv-head {
+      display: flex; align-items: center; gap: 6px;
+      padding: 6px 2px; font-size: 11px; color: var(--color-text2, #666);
+    }
+    .nb-lp-srv-dot {
+      width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent, #6a55ff);
+      flex-shrink: 0;
+    }
+    .nb-lp-srv-name { font-weight: 600; color: var(--color-text1, #111); }
+    .nb-lp-srv-meta { margin-left: auto; font-family: monospace; font-size: 10.5px; }
+    .nb-lp-group > summary {
+      cursor: pointer; padding: 4px 2px; font-size: 11px;
+      color: var(--color-text2, #666); font-family: monospace;
+    }
+    .nb-lp-list { list-style: none; padding: 0 0 0 6px; margin: 2px 0 6px; }
+    .nb-lp-item {
+      padding: 5px 8px; border-radius: 4px; cursor: pointer;
+      display: flex; flex-direction: column; gap: 2px;
+    }
+    .nb-lp-item:hover { background: var(--color-surface2, #f4f4f5); }
+    .nb-lp-item-name { font-size: 12px; }
+    .nb-lp-tool { font-family: monospace; }
+    .nb-lp-item-desc { font-size: 10.5px; color: var(--color-text2, #666); }
+    .nb-lp-empty { padding: 12px; font-size: 11px; color: var(--color-text2, #666); text-align: center; }
+  `;
+  document.head.appendChild(s);
+}

package/src/widgets/notebook/prose.ts

@@ -0,0 +1,280 @@
+// @ts-nocheck
+// ---------------------------------------------------------------------------
+// Lightweight markdown renderer + allowlist sanitizer for notebook prose cells.
+// Also: renderMarkdownWithInjectButtons — used by recipe viewer modal.
+// No external dependencies.
+// ---------------------------------------------------------------------------
+
+const BLOCK_TAGS = new Set(['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'blockquote', 'pre', 'hr', 'br']);
+const INLINE_TAGS = new Set(['strong', 'em', 'code', 'a', 'mark', 's', 'u']);
+const ALLOWED_TAGS = new Set([...BLOCK_TAGS, ...INLINE_TAGS]);
+const ALLOWED_ATTRS_BY_TAG: Record<string, Set<string>> = {
+  a: new Set(['href', 'title', 'target', 'rel']),
+};
+
+function escapeHtml(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+
+/**
+ * Scan and wrap `*italic*` segments. Avoids the lookbehind regex (Safari < 16.4)
+ * and avoids consuming the preceding char (the previous regex did, which broke
+ * `*a* *b*` since the space between them was eaten by the first match).
+ * A `*` is treated as an italic delimiter only when it is NOT part of a `**`
+ * sequence (bold has already been replaced, so any remaining `**` is leftover).
+ */
+function scanItalic(s: string): string {
+  let out = '';
+  let i = 0;
+  while (i < s.length) {
+    const ch = s[i];
+    if (ch === '*' && s[i + 1] !== '*' && (i === 0 || s[i - 1] !== '*')) {
+      // Look for closing `*` on the same line, with non-empty content
+      let j = i + 1;
+      while (j < s.length && s[j] !== '*' && s[j] !== '\n') j++;
+      if (j < s.length && s[j] === '*' && j > i + 1 && s[j + 1] !== '*') {
+        out += `<em>${s.slice(i + 1, j)}</em>`;
+        i = j + 1;
+        continue;
+      }
+    }
+    out += ch;
+    i++;
+  }
+  return out;
+}
+
+function renderInline(s: string): string {
+  // Escape first, then re-apply allowed inline constructs
+  let out = escapeHtml(s);
+  // inline code `...`
+  out = out.replace(/`([^`\n]+)`/g, (_m, g1) => `<code>${g1}</code>`);
+  // bold **...**
+  out = out.replace(/\*\*([^\*\n]+)\*\*/g, (_m, g1) => `<strong>${g1}</strong>`);
+  // italic *...* — manual scan avoids consuming the leading char (which broke
+  // patterns like `*a* *b*` when the previous regex used [^\*] as a guard).
+  out = scanItalic(out);
+  // links [text](href)
+  out = out.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_m, text, href) => {
+    const safeHref = /^https?:\/\//i.test(href) ? href : (href.startsWith('/') || href.startsWith('#') ? href : '#');
+    return `<a href="${safeHref}" target="_blank" rel="noopener noreferrer">${text}</a>`;
+  });
+  // marks ==...==
+  out = out.replace(/==([^=\n]+)==/g, (_m, g1) => `<mark>${g1}</mark>`);
+  return out;
+}
+
+/**
+ * Render markdown to a sanitized HTML string. Handles headings, paragraphs,
+ * fenced code blocks, unordered lists, ordered lists, blockquotes, hr.
+ * Not a full MD spec — covers the ~90% used in notebook prose cells.
+ */
+export function renderProse(content: string): string {
+  if (!content) return '';
+  const lines = content.replace(/\r\n/g, '\n').split('\n');
+  const out: string[] = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // Fenced code block
+    if (/^```/.test(line)) {
+      const lang = line.replace(/^```/, '').trim();
+      const code: string[] = [];
+      i++;
+      while (i < lines.length && !/^```/.test(lines[i])) {
+        code.push(lines[i]);
+        i++;
+      }
+      i++; // skip closing fence
+      const cls = lang ? ` class="language-${escapeHtml(lang)}"` : '';
+      out.push(`<pre><code${cls}>${escapeHtml(code.join('\n'))}</code></pre>`);
+      continue;
+    }
+
+    // Heading
+    const mH = /^(#{1,6})\s+(.*)$/.exec(line);
+    if (mH) {
+      const level = mH[1].length;
+      out.push(`<h${level}>${renderInline(mH[2])}</h${level}>`);
+      i++;
+      continue;
+    }
+
+    // Horizontal rule
+    if (/^---+\s*$/.test(line) || /^\*\*\*+\s*$/.test(line)) {
+      out.push('<hr/>');
+      i++;
+      continue;
+    }
+
+    // Unordered list
+    if (/^[-*+]\s+/.test(line)) {
+      const items: string[] = [];
+      while (i < lines.length && /^[-*+]\s+/.test(lines[i])) {
+        items.push(lines[i].replace(/^[-*+]\s+/, ''));
+        i++;
+      }
+      out.push('<ul>' + items.map((t) => `<li>${renderInline(t)}</li>`).join('') + '</ul>');
+      continue;
+    }
+
+    // Ordered list
+    if (/^\d+\.\s+/.test(line)) {
+      const items: string[] = [];
+      while (i < lines.length && /^\d+\.\s+/.test(lines[i])) {
+        items.push(lines[i].replace(/^\d+\.\s+/, ''));
+        i++;
+      }
+      out.push('<ol>' + items.map((t) => `<li>${renderInline(t)}</li>`).join('') + '</ol>');
+      continue;
+    }
+
+    // Blockquote
+    if (/^>\s?/.test(line)) {
+      const quote: string[] = [];
+      while (i < lines.length && /^>\s?/.test(lines[i])) {
+        quote.push(lines[i].replace(/^>\s?/, ''));
+        i++;
+      }
+      out.push(`<blockquote>${renderInline(quote.join(' '))}</blockquote>`);
+      continue;
+    }
+
+    // Blank → paragraph break
+    if (/^\s*$/.test(line)) {
+      i++;
+      continue;
+    }
+
+    // Paragraph: gather contiguous non-empty lines
+    const para: string[] = [];
+    while (i < lines.length && !/^\s*$/.test(lines[i]) && !/^(#{1,6}\s|```|[-*+]\s|\d+\.\s|>\s?|---+\s*$)/.test(lines[i])) {
+      para.push(lines[i]);
+      i++;
+    }
+    out.push(`<p>${renderInline(para.join(' '))}</p>`);
+  }
+
+  return sanitize(out.join('\n'));
+}
+
+/**
+ * Final sanitization pass: allowlist tags + attrs, strip javascript: hrefs and on* handlers.
+ */
+function sanitize(html: string): string {
+  if (typeof document === 'undefined') return html;
+  const tpl = document.createElement('template');
+  tpl.innerHTML = html;
+  walk(tpl.content);
+  return tpl.innerHTML;
+}
+
+function walk(node: Node): void {
+  const children = Array.from(node.childNodes);
+  for (const child of children) {
+    if (child.nodeType === 1) {
+      const el = child as Element;
+      const tag = el.tagName.toLowerCase();
+      if (!ALLOWED_TAGS.has(tag)) {
+        // Unwrap disallowed tags (keep text)
+        while (el.firstChild) node.insertBefore(el.firstChild, el);
+        node.removeChild(el);
+        continue;
+      }
+      const allowedAttrs = ALLOWED_ATTRS_BY_TAG[tag] ?? new Set<string>();
+      for (const attr of Array.from(el.attributes)) {
+        if (!allowedAttrs.has(attr.name)) {
+          el.removeAttribute(attr.name);
+          continue;
+        }
+        if (attr.name === 'href' && /^\s*javascript:/i.test(attr.value)) {
+          el.removeAttribute(attr.name);
+        }
+      }
+      walk(el);
+    } else if (child.nodeType !== 3 && child.nodeType !== 8) {
+      // Remove anything that's not element / text / comment
+      node.removeChild(child);
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Renderer with inject buttons — used by recipe viewer modal.
+// Each fenced code block gets an "↳ inject" button next to it.
+// ---------------------------------------------------------------------------
+
+export interface InjectFenceEvent {
+  lang: string;
+  content: string;
+}
+
+/**
+ * Render markdown into a container. Each fenced code block is rendered with
+ * an "↳ inject" button; clicking it calls onInject({lang, content}).
+ * Returns a cleanup function.
+ */
+export function renderMarkdownWithInjectButtons(
+  body: string,
+  onInject: (e: InjectFenceEvent) => void,
+): { root: HTMLElement; destroy: () => void } {
+  const root = document.createElement('div');
+  root.className = 'nb-md-render';
+
+  const lines = (body || '').replace(/\r\n/g, '\n').split('\n');
+  const buf: string[] = [];
+  let i = 0;
+  const cleanups: Array<() => void> = [];
+
+  const flushProse = () => {
+    if (buf.length) {
+      const chunk = buf.join('\n');
+      const p = document.createElement('div');
+      p.innerHTML = renderProse(chunk);
+      root.appendChild(p);
+      buf.length = 0;
+    }
+  };
+
+  while (i < lines.length) {
+    const line = lines[i];
+    if (/^```/.test(line)) {
+      flushProse();
+      const lang = line.replace(/^```/, '').trim().toLowerCase() || 'text';
+      const code: string[] = [];
+      i++;
+      while (i < lines.length && !/^```/.test(lines[i])) {
+        code.push(lines[i]);
+        i++;
+      }
+      i++; // closing fence
+      const content = code.join('\n');
+
+      const block = document.createElement('div');
+      block.className = 'nb-md-fence';
+      block.innerHTML = `
+        <div class="nb-md-fence-head">
+          <span class="nb-md-fence-lang">${escapeHtml(lang)}</span>
+          <button type="button" class="nb-md-fence-inject">↳ inject</button>
+        </div>
+        <pre><code class="language-${escapeHtml(lang)}">${escapeHtml(content)}</code></pre>
+      `;
+      const btn = block.querySelector('.nb-md-fence-inject') as HTMLButtonElement;
+      const handler = () => onInject({ lang, content });
+      btn.addEventListener('click', handler);
+      cleanups.push(() => btn.removeEventListener('click', handler));
+      root.appendChild(block);
+      continue;
+    }
+    buf.push(line);
+    i++;
+  }
+  flushProse();
+
+  return {
+    root,
+    destroy: () => cleanups.forEach((f) => f()),
+  };
+}