@webmcp-auto-ui/agent 2.5.27 → 2.5.29

package/src/notebook-widgets/editorial.ts

@@ -1,348 +0,0 @@
-// @ts-nocheck
-// ---------------------------------------------------------------------------
-// notebook-editorial — publication-ready layout (observable-like)
-// Serif prose + cells in a single ordered list, all drag-and-droppable together.
-// Cells alternate freely: md (prose paragraph) / sql / js cells share the flow.
-// ---------------------------------------------------------------------------
-
-import {
-  createState, injectStyles, mountRunControls, mountHistoryPanel,
-  setupDnD, deleteCellWithConfirm, restoreCellFromSnapshot, addCell,
-  autosize, openShareModal, registerHistoryObserver,
-  buildServersButton,
-  type NotebookState, type NotebookCell,
-} from './shared.js';
-
-export async function render(container: HTMLElement, data: Record<string, unknown>): Promise<() => void> {
-  injectStyles();
-  injectLayoutStyles();
-
-  const state: NotebookState = createState({
-    id: data.id as string,
-    title: data.title as string ?? 'Untitled notebook',
-    mode: (data.mode as any) ?? 'edit',
-    cells: data.cells as any,
-  });
-  const kicker: string = (data.kicker as string) ?? 'untitled';
-  const forkId: string = (data.forkId as string) ?? (state.id.slice(0, 4) + '·' + state.id.slice(4, 8));
-
-  container.classList.add('nb-root');
-  container.classList.toggle('nb-view-mode', state.mode === 'view');
-
-  container.innerHTML = `
-    <div class="nbe-shell">
-      <div class="nbe-kicker">
-        <span class="nbe-kicker-label">${escapeHtml(kicker)}</span>
-        <div class="nb-mode-switch" style="margin-left:auto;">
-          <button class="nb-mode-edit nb-on">edit</button>
-          <button class="nb-mode-view">view</button>
-        </div>
-        <button class="nb-btn nbe-history-btn">⟲ history</button>
-        <span class="nbe-servers-slot"></span>
-      </div>
-      <input class="nbe-title nb-ed-title" value="${escapeAttr(state.title)}">
-      <div class="nb-history-panel nbe-history-panel"></div>
-      <div class="nbe-cells"></div>
-      <div class="nbe-footer">
-        <button class="nb-btn nb-add-cell" data-add="md">+ prose</button>
-        <button class="nb-btn nb-add-cell" data-add="sql">+ sql</button>
-        <button class="nb-btn nb-add-cell" data-add="js">+ chart</button>
-        <span class="nbe-fork nbe-share-btn">share · ${escapeHtml(forkId)}</span>
-      </div>
-    </div>`;
-
-  const shell = container.querySelector('.nbe-shell') as HTMLElement;
-  const cellsEl = shell.querySelector('.nbe-cells') as HTMLElement;
-  const historyPanel = shell.querySelector('.nbe-history-panel') as HTMLElement;
-
-  function renderCells() {
-    cellsEl.innerHTML = '';
-    state.cells.forEach((cell) => cellsEl.appendChild(renderCell(cell, state, rerender)));
-  }
-
-  function rerender() {
-    mountHistoryPanel(historyPanel, state, (snap) => { restoreCellFromSnapshot(state, snap); rerender(); });
-    renderCells();
-  }
-
-  shell.querySelectorAll<HTMLElement>('[data-add]').forEach((btn) => {
-    btn.addEventListener('click', () => {
-      const type = btn.dataset.add as any;
-      addCell(state, type);
-      rerender();
-    });
-  });
-  (shell.querySelector('.nbe-history-btn') as HTMLElement).addEventListener('click', () => {
-    historyPanel.classList.toggle('nb-open');
-  });
-  (shell.querySelector('.nbe-share-btn') as HTMLElement).addEventListener('click', () => {
-    openShareModal(state, (fmt) => console.log('[notebook-editorial] share as', fmt, state));
-  });
-  (shell.querySelector('.nbe-title') as HTMLInputElement).addEventListener('input', (e) => {
-    state.title = (e.target as HTMLInputElement).value;
-  });
-  const editBtn = shell.querySelector('.nb-mode-edit') as HTMLElement;
-  const viewBtn = shell.querySelector('.nb-mode-view') as HTMLElement;
-  editBtn.addEventListener('click', () => {
-    state.mode = 'edit';
-    container.classList.remove('nb-view-mode');
-    editBtn.classList.add('nb-on'); viewBtn.classList.remove('nb-on');
-  });
-  viewBtn.addEventListener('click', () => {
-    state.mode = 'view';
-    container.classList.add('nb-view-mode');
-    viewBtn.classList.add('nb-on'); editBtn.classList.remove('nb-on');
-  });
-
-  buildServersButton(state, shell.querySelector('.nbe-servers-slot') as HTMLElement, data, rerender);
-
-  setupDnD(cellsEl, state, rerender);
-  const unsubHistory = registerHistoryObserver(() => mountHistoryPanel(historyPanel, state, (snap) => { restoreCellFromSnapshot(state, snap); rerender(); }));
-
-  rerender();
-  return () => { unsubHistory(); };
-}
-
-// Unified cell rendering: prose (md) and code (sql/js) both live in the same flow.
-function renderCell(cell: NotebookCell, state: NotebookState, rerender: () => void): HTMLElement {
-  const wrap = document.createElement('div');
-  wrap.className = 'nb-cell-wrapper nbe-cell';
-  wrap.dataset.id = cell.id;
-
-  const handle = document.createElement('span');
-  handle.className = 'nb-drag-handle nbe-handle';
-  handle.draggable = true;
-  handle.textContent = '⋮⋮';
-  wrap.appendChild(handle);
-
-  const del = document.createElement('button');
-  del.className = 'nb-icon-btn nb-danger nbe-del-abs';
-  del.textContent = '✕';
-  del.addEventListener('click', () =>
-    deleteCellWithConfirm(state, cell, (c) => c.type === 'md' ? 'prose paragraph' : `${c.type} cell`, rerender)
-  );
-  wrap.appendChild(del);
-
-  if (cell.type === 'md') {
-    const p = document.createElement('div');
-    p.className = 'nbe-prose';
-    p.contentEditable = 'true';
-    p.innerHTML = cell.content;
-    p.addEventListener('input', () => { cell.content = p.innerHTML; });
-    wrap.appendChild(p);
-    return wrap;
-  }
-
-  // Code cell: header with run controls FIRST, then code body, then optional output.
-  const codeCell = document.createElement('div');
-  codeCell.className = 'nb-code-cell nbe-code-cell';
-
-  const head = document.createElement('div');
-  head.className = 'nbe-cell-head';
-  head.innerHTML = `
-    <span class="nbe-run-controls"></span>
-    <span class="nbe-type-${cell.type}">${cell.type}</span>
-    <span class="nbe-meta-info">${cell.lastMs != null ? cell.lastMs + 'ms' : ''}</span>
-    <div class="nbe-actions">
-      <button class="nb-icon-btn nb-toggle-src">${cell.hideSource ? '▸ src' : '◂ src'}</button>
-      <button class="nb-icon-btn nb-toggle-res">${cell.hideResult ? '▸ res' : '◂ res'}</button>
-    </div>`;
-  codeCell.appendChild(head);
-  mountRunControls(head.querySelector('.nbe-run-controls') as HTMLElement, cell, wrap, rerender);
-
-  const body = document.createElement('div');
-  body.className = 'nbe-code-body' + (cell.hideSource ? ' nbe-hidden' : '');
-  const ta = document.createElement('textarea');
-  ta.className = 'nb-code-edit';
-  ta.value = cell.content;
-  ta.rows = 1;
-  ta.spellcheck = false;
-  ta.addEventListener('input', () => { cell.content = ta.value; autosize(ta); cell.status = 'stale'; });
-  body.appendChild(ta);
-  codeCell.appendChild(body);
-  setTimeout(() => autosize(ta), 0);
-
-  if (cell.type === 'js' && !cell.hideResult) {
-    const chart = document.createElement('div');
-    chart.className = 'nbe-chart';
-    chart.innerHTML = `
-      <div class="nbe-col"><span class="nbe-val">42</span><div class="nbe-bar" style="height:100%"></div></div>
-      <div class="nbe-col"><span class="nbe-val">29</span><div class="nbe-bar" style="height:69%;opacity:.84"></div></div>
-      <div class="nbe-col"><span class="nbe-val">22</span><div class="nbe-bar" style="height:53%;opacity:.7"></div></div>
-      <div class="nbe-col"><span class="nbe-val">9</span><div class="nbe-bar" style="height:22%;opacity:.56"></div></div>`;
-    codeCell.appendChild(chart);
-    const axis = document.createElement('div');
-    axis.className = 'nbe-chart-axis';
-    axis.innerHTML = '<span>A</span><span>B</span><span>C</span><span>D</span>';
-    codeCell.appendChild(axis);
-  } else if (cell.type === 'sql' && !cell.hideResult) {
-    const res = document.createElement('div');
-    res.className = 'nbe-sql-result';
-    res.innerHTML = `
-      <table>
-        <tr><td>row_1</td><td>42</td></tr>
-        <tr><td>row_2</td><td>29</td></tr>
-        <tr><td>row_3</td><td>22</td></tr>
-        <tr><td>row_4</td><td>9</td></tr>
-      </table>`;
-    codeCell.appendChild(res);
-  }
-
-  wrap.appendChild(codeCell);
-
-  (head.querySelector('.nb-toggle-src') as HTMLElement).addEventListener('click', () => { cell.hideSource = !cell.hideSource; rerender(); });
-  (head.querySelector('.nb-toggle-res') as HTMLElement).addEventListener('click', () => { cell.hideResult = !cell.hideResult; rerender(); });
-
-  return wrap;
-}
-
-function escapeHtml(s: string): string {
-  return (s ?? '').replace(/[&<>"']/g, (c) => ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c]!));
-}
-function escapeAttr(s: string): string {
-  return (s ?? '').replace(/"/g, '&quot;');
-}
-
-function injectLayoutStyles(): void {
-  if (document.getElementById('nbe-styles')) return;
-  const style = document.createElement('style');
-  style.id = 'nbe-styles';
-  style.textContent = `
-.nbe-shell {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 36px 44px;
-}
-.nbe-kicker {
-  display: flex; align-items: center; gap: 8px;
-  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
-  font-size: 11px; color: var(--color-text2);
-  letter-spacing: 0.1em; text-transform: uppercase;
-  margin-bottom: 14px;
-}
-.nbe-kicker-label { flex: 0 0 auto; }
-.nbe-title {
-  font-family: 'EB Garamond', Georgia, serif;
-  font-size: 30px; font-weight: 500;
-  margin: 0 0 12px;
-  letter-spacing: -0.01em; line-height: 1.2;
-  background: transparent; border: none; outline: none;
-  color: var(--color-text1);
-  width: 100%; padding: 2px 4px; border-radius: 3px;
-}
-.nbe-title:focus { background: var(--color-bg); }
-.nbe-history-panel { margin: 0 0 14px; }
-
-.nbe-cells { display: flex; flex-direction: column; gap: 14px; }
-.nbe-cell { position: relative; padding-left: 28px; }
-.nbe-handle { position: absolute; left: 0; top: 6px; }
-.nbe-del-abs {
-  position: absolute; top: 4px; right: 4px;
-  opacity: 0; transition: opacity 0.15s;
-}
-.nbe-cell:hover .nbe-del-abs { opacity: 0.5; }
-.nbe-del-abs:hover { opacity: 1 !important; }
-
-.nbe-prose {
-  font-family: 'EB Garamond', Georgia, serif;
-  font-size: 17px; line-height: 1.7;
-  color: var(--color-text1);
-  max-width: 620px;
-  outline: none;
-  padding: 2px 4px;
-  border-radius: 3px;
-  border: 1px dashed transparent;
-}
-.nbe-prose:focus { border-color: var(--color-border); background: var(--color-bg); }
-.nbe-prose code {
-  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
-  font-size: 14px;
-  background: var(--color-surface2);
-  padding: 1px 6px; border-radius: 3px;
-  color: var(--color-accent);
-}
-.nbe-prose mark {
-  background: rgba(240,160,80,0.18);
-  color: var(--color-amber);
-  padding: 0 4px; border-radius: 2px;
-}
-
-.nbe-code-cell {
-  background: var(--color-surface2);
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  overflow: hidden;
-}
-.nbe-cell-head {
-  display: flex; align-items: center; gap: 8px;
-  padding: 7px 12px;
-  border-bottom: 1px solid var(--color-border);
-  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
-  font-size: 10px; color: var(--color-text2);
-  letter-spacing: 0.06em;
-}
-.nbe-type-sql { color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.08em; }
-.nbe-type-js { color: var(--color-teal); text-transform: uppercase; letter-spacing: 0.08em; }
-.nbe-meta-info { margin-right: auto; }
-.nbe-actions { display: flex; gap: 4px; }
-.nbe-code-body { padding: 14px 16px; }
-.nbe-hidden { display: none !important; }
-
-.nbe-sql-result {
-  background: var(--color-bg);
-  padding: 10px 16px;
-  border-top: 1px solid var(--color-border);
-}
-.nbe-sql-result table {
-  width: 100%; border-collapse: collapse;
-  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
-  font-size: 12px; font-variant-numeric: tabular-nums;
-}
-.nbe-sql-result table td { padding: 3px 0; color: var(--color-text1); }
-.nbe-sql-result table td:first-child { color: var(--color-text2); }
-.nbe-sql-result table td:last-child { text-align: right; }
-
-.nbe-chart {
-  display: flex; align-items: flex-end; gap: 14px;
-  height: 180px;
-  padding: 16px;
-  border-top: 1px solid var(--color-border);
-  background: var(--color-bg);
-}
-.nbe-col {
-  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
-  height: 100%; justify-content: flex-end;
-}
-.nbe-val {
-  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
-  font-size: 11px; color: var(--color-text2);
-  font-variant-numeric: tabular-nums;
-}
-.nbe-bar { width: 100%; background: var(--color-accent); border-radius: 2px 2px 0 0; }
-.nbe-chart-axis {
-  display: flex; gap: 14px;
-  padding: 6px 16px 10px;
-  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
-  font-size: 11px; color: var(--color-text2);
-  text-transform: uppercase; letter-spacing: 0.08em;
-  background: var(--color-bg);
-}
-.nbe-chart-axis span { flex: 1; text-align: center; }
-
-.nbe-footer {
-  display: flex; gap: 8px;
-  padding-top: 16px; margin-top: 24px;
-  border-top: 1px solid var(--color-border);
-  align-items: center;
-}
-.nbe-fork {
-  margin-left: auto;
-  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
-  font-size: 11px; color: var(--color-text2);
-  cursor: pointer;
-}
-.nbe-fork:hover { color: var(--color-accent); }
-`;
-  document.head.appendChild(style);
-}

package/src/notebook-widgets/recipes/compact.md

@@ -1,104 +0,0 @@
----
-widget: notebook-compact
-description: Reactive minimalist notebook with a left gutter showing cell types and named outputs. Cells chain via variable names (→ rows, → df) and display fresh/stale status. Minimal chrome, ideal for quick data exploration.
-schema:
-  type: object
-  properties:
-    id:
-      type: string
-      description: Unique notebook identifier (for save/share via hyperskill)
-    title:
-      type: string
-      description: Notebook title
-    mode:
-      type: string
-      enum: [edit, view]
-      description: edit allows run/edit/reorder; view hides all controls for read-only display
-    cells:
-      type: array
-      description: Ordered list of cells (markdown, sql, js)
-      items:
-        type: object
-        required: [type, content]
-        properties:
-          type:
-            type: string
-            enum: [md, sql, js]
-          content:
-            type: string
-            description: Cell source (markdown text or code)
-          name:
-            type: string
-            description: Optional cell name
-          varname:
-            type: string
-            description: Named output variable (code cells only), displayed as → varname
-          hideSource:
-            type: boolean
-          hideResult:
-            type: boolean
----
-
-## When to use
-
-Use `notebook-compact` when the user wants to explore data quickly with a minimal, reactive interface. Ideal for:
-- Iterative SQL / JS exploration where output variables feed each other
-- Quick prototyping where chrome should fade into the background
-- Hackathon playgrounds where users expect a familiar "type, see, share" flow
-- Situations where the reactive dataflow (fresh/stale status) helps the user reason about stale results
-
-Prefer over `notebook-workspace` when there is no multi-source concern and no publish/dashboard end goal.
-Prefer over `notebook-document` when collaboration and comments are not central.
-Prefer over `notebook-editorial` when the result is a working session, not a publication.
-
-## How to use
-
-1. **Create the widget** with a title and 2–4 seed cells:
-   ```
-   widget_display({name: "notebook-compact", params: {
-     title: "Exploration",
-     cells: [
-       {type: "md", content: "### Quick look\n\nLet's inspect the data."},
-       {type: "sql", content: "select * from source limit 10", varname: "rows"},
-       {type: "js", content: "console.table(rows)"}
-     ]
-   }})
-   ```
-
-2. **Name outputs** (varname) on the SQL/JS cells so the gutter displays `→ varname` and downstream cells can reference them.
-
-3. **Start markdown cells with a heading** (`### Title`) — the first line renders larger and gives the cell an anchor.
-
-4. **Let the user iterate** — they can add cells with `+ md / + sql / + js`, reorder via the drag handle, toggle source/result, and run cells with the green pill button.
-
-## Notes
-
-- The Run button lives at the left of each cell's title row, right after the type label.
-- Stop (red pill) appears while running, with a live elapsed timer.
-- After a run, Run becomes the replay button (same green pill, re-click to re-run).
-- Deletions prompt a confirmation modal and are recorded in the history panel; they can be restored from there.
-- `mode: "view"` hides all controls (run, delete, drag, add), making the notebook read-only.
-
-## Integration with connected data servers
-
-If a MCP **data** server is connected (e.g. `tricoteuses`, `metmuseum`), BEFORE seeding cells:
-
-1. Call `{server}_list_recipes()` or `{server}_search_recipes(query)` to find recipes that match the user's intent.
-2. Call `{server}_list_tools()` to see available tables/endpoints.
-3. For each high-signal recipe or table, seed ONE cell that demonstrates it: an SQL `SELECT ... LIMIT 10`, a `run_script` call, or a short markdown note.
-4. Pass the server metadata via the `servers:` param so the UI can render the server menu modal:
-
-   ```ts
-   widget_display({
-     name: 'notebook-compact',
-     params: {
-       title: '...',
-       cells: [...],
-       servers: [{ name: 'tricoteuses', url: 'https://...', kind: 'data' }]
-     }
-   })
-   ```
-
-If NO data server is connected, seed generic markdown-only cells that explain the notebook's purpose and invite the user to connect an MCP server.
-
-**Filter rule**: only include MCP *data* servers (`kind: 'data'`) in `servers:`. Do NOT include WebMCP UI servers like `autoui` — they don't expose queryable data and would clutter the menu.

package/src/notebook-widgets/recipes/document.md

@@ -1,100 +0,0 @@
----
-widget: notebook-document
-description: Collaborative notebook styled as a shared document. Avatars of editors at the top, inline highlights in prose, optional margin comments next to cells. Minimal cell chrome, reads as a report with conversation around it.
-schema:
-  type: object
-  properties:
-    id:
-      type: string
-    title:
-      type: string
-    mode:
-      type: string
-      enum: [edit, view]
-    cells:
-      type: array
-      items:
-        type: object
-        required: [type, content]
-        properties:
-          type:
-            type: string
-            enum: [md, sql, js]
-          content:
-            type: string
-            description: For md cells, HTML is supported (use <mark> for inline highlights).
-          hideSource:
-            type: boolean
-          hideResult:
-            type: boolean
-          comment:
-            type: object
-            description: Optional margin comment attached to a code cell
-            properties:
-              who:
-                type: string
-              when:
-                type: string
-                description: Relative time shown as-is (e.g. "2m", "just now")
-              body:
-                type: string
----
-
-## When to use
-
-Use `notebook-document` when the notebook is meant to be read and discussed by a team:
-- Shared analyses where colleagues leave margin comments on specific cells
-- Onboarding guides, knowledge docs, incident retros
-- Any context where the notebook should feel like a Google Doc / Notion page, not a developer tool
-
-Prose cells can contain `<mark>` highlights inline to draw attention to a sentence, and code cells can carry an optional margin comment object showing who commented and when.
-
-## How to use
-
-1. **Create with prose-heavy seed content** and inline highlights for emphasis:
-   ```
-   widget_display({name: "notebook-document", params: {
-     title: "Weekly review",
-     cells: [
-       {type: "md", content: "Here is this week's summary. <mark>Pay attention to this metric.</mark> More context follows."},
-       {type: "sql", content: "select ...", comment: {who: "reviewer", when: "2m", body: "Can we filter X here?"}},
-       {type: "js", content: "// visualization"}
-     ]
-   }})
-   ```
-
-2. **Attach comments to code cells** by adding a `comment` object. The cell row splits into two columns (cell + comment) only when a comment exists.
-
-3. **Keep prose short** — the layout punishes walls of text. Break them into several markdown cells with their own handles.
-
-## Notes
-
-- Every cell (prose or code) has its own drag handle for reordering.
-- Comments can only be attached to code cells at creation time in the current widget version; prose cells do not carry comments.
-- `<mark>` inside markdown renders with an amber tint; use sparingly.
-- The footer shows an "invite · share" link that opens the share modal.
-- Like the other notebook widgets, `mode: "view"` removes all editing and running controls.
-
-## Integration with connected data servers
-
-When a MCP **data** server is connected (for instance `tricoteuses` or `metmuseum`), the document should open on real material rather than empty placeholders. Before seeding cells, the agent takes a short discovery pass:
-
-1. It calls `{server}_list_recipes()` or `{server}_search_recipes(query)` to locate recipes aligned with the user's topic.
-2. It calls `{server}_list_tools()` to learn which tables and endpoints the server exposes.
-3. For each relevant recipe or table, it seeds a single cell that grounds the document — a short SQL `SELECT ... LIMIT 10`, a `run_script` call, or a prose cell that introduces what the data shows. A margin `comment` on a code cell is a natural way to flag an open question for collaborators.
-4. It passes the server metadata through the `servers:` param so the share/connect affordances know what is in play:
-
-   ```ts
-   widget_display({
-     name: 'notebook-document',
-     params: {
-       title: '...',
-       cells: [...],
-       servers: [{ name: 'tricoteuses', url: 'https://...', kind: 'data' }]
-     }
-   })
-   ```
-
-When no data server is connected, seed a prose-only skeleton that frames the discussion and invites the reader (or a colleague) to link an MCP server.
-
-**Filter rule**: only MCP *data* servers (`kind: 'data'`) appear in `servers:`. WebMCP UI servers such as `autoui` are excluded — they carry no queryable data and would clutter the collaborative view.

package/src/notebook-widgets/recipes/editorial.md

@@ -1,104 +0,0 @@
----
-widget: notebook-editorial
-description: Publication-ready notebook with serif prose and inline cells, all drag-and-droppable in a single ordered flow. Inspired by Observable — cells can be prose paragraphs, sql queries, or js charts, mixed freely in any order to build an article-like narrative.
-schema:
-  type: object
-  properties:
-    id:
-      type: string
-    title:
-      type: string
-    mode:
-      type: string
-      enum: [edit, view]
-    kicker:
-      type: string
-      description: Small uppercase label above the title (e.g. "analysis", "memo", "brief"). Defaults to "untitled".
-    forkId:
-      type: string
-      description: Short identifier shown in the footer next to "share" (e.g. "4c7a·9f21"). Defaults to a slice of the notebook id.
-    cells:
-      type: array
-      description: Mixed flow of prose and code cells. All share the same ordering and can be reordered together.
-      items:
-        type: object
-        required: [type, content]
-        properties:
-          type:
-            type: string
-            enum: [md, sql, js]
-            description: md = prose paragraph, sql = query cell with table output, js = code cell with chart output
-          content:
-            type: string
-          hideSource:
-            type: boolean
-          hideResult:
-            type: boolean
----
-
-## When to use
-
-Use `notebook-editorial` when the notebook is meant to be published or shared as a finished artifact:
-- Research memos with code appendices visible on demand
-- Blog-style writeups mixing narrative and runnable code
-- Final deliverables where prose leads and code supports
-
-The distinguishing feature: prose paragraphs and code cells share a single ordered list, both drag-and-droppable with the same handle. This lets users rearrange the story freely without thinking about "sections".
-
-## How to use
-
-1. **Start with prose-first seed content** and intersperse code cells:
-   ```
-   widget_display({name: "notebook-editorial", params: {
-     title: "Q3 observations",
-     kicker: "memo",
-     cells: [
-       {type: "md", content: "This memo covers the highlights of last quarter."},
-       {type: "md", content: "We first look at revenue, then at churn."},
-       {type: "sql", content: "select * from source limit 10"},
-       {type: "md", content: "The table above suggests..."},
-       {type: "js", content: "// render a chart"}
-     ]
-   }})
-   ```
-
-2. **Use prose paragraphs as transitions** between code blocks. The layout emphasizes reading flow.
-
-3. **Code cells render their result in the editorial style**:
-   - SQL cells show a minimal mono-spaced table
-   - JS cells show a chart area with labeled bars
-
-4. **Reorder cells freely** — the user can drag a prose paragraph from the bottom to the top, or swap a chart and its introduction, all via the same handle.
-
-## Notes
-
-- The serif font (EB Garamond, with Georgia fallback) applies only to prose content inside this widget — it signals "publication" the moment the user sees it.
-- The kicker above the title ("analysis", "memo", "internal") is editorial shorthand; keep it short.
-- The footer shows `share · forkId`, which is clickable to open the share modal.
-- Run / Stop controls are at the left of each code cell's header, same as the other notebook layouts.
-- Unlike the other widgets, `notebook-editorial` does not separate prose and code into different flows — they are the same flow in one list.
-
-## Integration with connected data servers
-
-An editorial piece earns its weight when the prose is anchored to real material. If a MCP **data** server is connected (say `tricoteuses` or `metmuseum`), the agent should — before composing the memo — go and see what the server has to offer:
-
-1. Call `{server}_list_recipes()` or `{server}_search_recipes(query)` to find recipes that speak to the subject at hand.
-2. Call `{server}_list_tools()` to survey the available tables and endpoints.
-3. For each recipe or table worth citing, seed one cell that lets the reader touch the evidence — a modest SQL `SELECT ... LIMIT 10`, a `run_script` call, or a prose paragraph that introduces the figure to come. Let prose and code alternate; the editorial flow is built for exactly that.
-4. Pass the server metadata through the `servers:` param so the footer's share affordance and the connect modal reflect the provenance of the piece:
-
-   ```ts
-   widget_display({
-     name: 'notebook-editorial',
-     params: {
-       title: '...',
-       kicker: 'memo',
-       cells: [...],
-       servers: [{ name: 'tricoteuses', url: 'https://...', kind: 'data' }]
-     }
-   })
-   ```
-
-When no data server is connected, seed a prose-first skeleton that stakes out the argument and gently invites the reader to connect an MCP server so the memo can take on flesh.
-
-**Filter rule**: only MCP *data* servers (`kind: 'data'`) belong in `servers:`. WebMCP UI servers like `autoui` are kept out — they hold no queryable material and have no place in the editorial masthead.