@webmcp-auto-ui/ui 2.5.28 → 2.5.29

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

@@ -1,124 +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. Named outputs are injected into the scope of every JS cell executed after them; if a downstream cell's code mentions `varname` (word-boundary match), it is flagged **stale** whenever the upstream cell re-runs, so the user sees what needs replaying.
-
-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).
-- **SQL cells** are dispatched to the first matching `*_query_sql` tool on the connected MCP data server (auto-detected).
-- **JS cells** execute on the main thread via `new Function(...)` with upstream named outputs injected as scope — `console.log` / `console.table` results are captured and rendered inline. Note: there is no worker isolation yet, so a `while (true)` loop or other synchronous blocker will freeze the UI thread.
-- 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.
-
-## Left pane — connected data servers
-
-When one or more MCP data servers are connected, a collapsible **left pane** (bookmark-bar styling, collapsed by default) lists their recipes and tools. Clicking any recipe opens it in a viewer modal; each fenced code block inside the recipe has a `↳ inject` button that drops the snippet into the notebook as a new cell.
-
-Two toolbar buttons flank this pane:
-
-- **`+ md`** — 3-tab modal (New / File / URL) to create a markdown cell from scratch, a local `.md` file, or a remote URL.
-- **`+ recipe`** — 3-tab modal (Browser / File / URL) to import a recipe from a connected server, a local `.recipe.md` file, or a URL.
-
-## Share & publish
-
-The `share` button offers **four formats**:
-
-- **Hyperskill link** — copies both the canonical Hyperskill URL and a short domain-scoped URL (`?n=<token>`). Opens at `nb.hyperskills.net` (read-only public viewer) when mode is `view`.
-- **Markdown** — downloads a `.md` file with the notebook content.
-- **PNG** — snapshots the rendered notebook to an image.
-- **JSON** — exports the full widget state for programmatic reuse.
-
-## 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 and populate the left pane:
-
-   ```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/widgets/notebook/recipes/document.md

@@ -1,139 +0,0 @@
----
-widget: notebook-document
-description: Collaborative notebook styled as a shared document. Optional editor avatars at the top (opt-in), inline highlights in prose, optional margin comments next to cells (editable + threaded replies). 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]
-    presence:
-      type: array
-      description: Optional list of editors to display as avatars at the top (opt-in). When absent or empty, no presence indicator is rendered.
-      items:
-        type: object
-        properties:
-          name:
-            type: string
-          color:
-            type: string
-    cells:
-      type: array
-      items:
-        type: object
-        required: [type, content]
-        properties:
-          type:
-            type: string
-            enum: [md, sql, js]
-          content:
-            type: string
-            description: For md cells, markdown is rendered and sanitized (use <mark> for inline highlights).
-          hideSource:
-            type: boolean
-          hideResult:
-            type: boolean
-          comment:
-            type: object
-            description: Optional margin comment attached to a code cell. Editable after creation; supports replies.
-            properties:
-              who:
-                type: string
-              when:
-                type: string
-                description: ISO timestamp or relative label. Relative time is recomputed from lastEditAt at render.
-              body:
-                type: string
-              replies:
-                type: array
-                items:
-                  type: object
-                  properties:
-                    who: {type: string}
-                    when: {type: string}
-                    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 — comments are editable after creation and support threaded replies via a `+ reply` button.
-
-## 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. Comments can be edited inline after creation, and replies can be threaded under them via `+ reply`.
-
-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.
-- Prose cells are rendered via an HTML-sanitizing markdown pipeline — `<mark>` is preserved, script/style and other dangerous tags are stripped (XSS closed).
-- `<mark>` inside markdown renders with an amber tint; use sparingly.
-- **Presence is opt-in**: the row of editor avatars and the "X editors online" label appear **only** when the `presence` param is explicitly provided with at least one entry. Without `presence`, nothing is rendered — no fake collaborators.
-- A timestamp under the title reads `edited Xs ago`, computed in real time from the notebook's last edit.
-- The footer shows a single `share` link that opens the share modal. (Live invite/collaboration is not available in this build.)
-- **SQL cells** dispatch to the connected MCP server's `*_query_sql` tool (auto-detected). **JS cells** run in an isolated Web Worker with upstream named outputs in scope.
-- Like the other notebook widgets, `mode: "view"` removes all editing and running controls.
-
-## Left pane — resources from connected servers
-
-A collapsible **left pane** (bookmark-bar styling, collapsed by default) lists recipes and tools exposed by connected MCP data servers. Clicking any recipe opens a viewer modal; fenced code blocks expose a `↳ inject` button that drops the snippet in as a new cell.
-
-Two toolbar buttons flank this pane:
-
-- **`+ md`** — 3-tab modal (New / File / URL) to create a markdown cell from scratch, a local `.md` file, or a URL.
-- **`+ recipe`** — 3-tab modal (Browser / File / URL) to import a recipe from a connected server, a local `.recipe.md` file, or a URL.
-
-## Share
-
-The `share` button offers **four formats**:
-
-- **Hyperskill link** — copies both the canonical Hyperskill URL and a short domain-scoped URL (`?n=<token>`). The read-only public viewer lives at `nb.hyperskills.net`.
-- **Markdown** — downloads a `.md` file.
-- **PNG** — snapshots the rendered document.
-- **JSON** — exports full widget state.
-
-## 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 affordance and the left pane reflect 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/widgets/notebook/recipes/workspace.md

@@ -1,119 +0,0 @@
----
-widget: notebook-workspace
-description: Dense analyst workspace with a header bar (title, draft/published tag, run all, publish) and a left sidebar listing data sources and cells for navigation. Cells display their name, execution time, and row counts. Targets data-team workflows with a publishable deliverable.
-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
-          name:
-            type: string
-            description: Cell name shown in sidebar navigation (e.g. "intro", "sql_sales", "plot")
-          hideSource:
-            type: boolean
-          hideResult:
-            type: boolean
----
-
-## When to use
-
-Use `notebook-workspace` for analyst-oriented work that needs:
-- Multi-cell analyses with named, navigable cells (sidebar)
-- A clear separation between the editing context and a publishable "app" view
-- A data source reference permanently visible (even as placeholder: "no source connected")
-- Team workflows where "run all" and "publish" are distinct actions
-
-This layout is more enterprise-flavoured than `notebook-compact`. Prefer it when the user is building something to hand off, not just exploring.
-
-## How to use
-
-1. **Create with named cells** so the sidebar navigation is meaningful:
-   ```
-   widget_display({name: "notebook-workspace", params: {
-     title: "My analysis",
-     cells: [
-       {type: "md", name: "intro", content: "What we are investigating."},
-       {type: "sql", name: "fetch_rows", content: "select * from source limit 100"},
-       {type: "js", name: "visualize", content: "// chart the rows"}
-     ]
-   }})
-   ```
-
-2. **The sidebar shows** data sources (when connected) and the numbered list of cells. Clicking a cell item scrolls to it and focuses its textarea for immediate editing.
-
-3. **The header has** `run all` / `share` / `publish` buttons.
-   - **`run all`** sequentially executes every non-markdown cell from top to bottom.
-   - **`publish`** is the primary (accent-coloured) CTA — it flips the notebook to `mode: 'view'`, tags it `published` (from `draft`), and emits a Hyperskill share link automatically.
-   - The **title** is editable inline in the header and persists across reloads via localStorage.
-
-## Notes
-
-- Cells are added via buttons in the sidebar (not in the header).
-- Run controls (green/red pill) sit at the left of each cell's header, right after the drag handle.
-- Each cell head can be renamed inline in the sidebar (click the "N · name" item).
-- The sidebar under "sources" shows a placeholder when no MCP source is connected. Each source row is clickable: a `connect via mcp…` entry opens the servers modal so the user can hook one up without leaving the notebook.
-- **SQL cells** dispatch to the connected MCP server's `*_query_sql` tool (auto-detected).
-- **JS cells** execute in an isolated Web Worker with upstream named outputs injected as scope.
-
-## Left pane — resources from connected servers
-
-A collapsible **left pane** (bookmark-bar styling, collapsed by default) lists recipes and tools exposed by connected MCP data servers. Clicking any recipe opens a viewer modal; each fenced code block inside exposes a `↳ inject` button that drops the snippet into the notebook as a new cell.
-
-Two toolbar buttons flank this pane:
-
-- **`+ md`** — 3-tab modal (New / File / URL) to create a markdown cell from scratch, from a local `.md` file, or from a URL.
-- **`+ recipe`** — 3-tab modal (Browser / File / URL) to import a recipe from a connected server, a local `.recipe.md` file, or a URL.
-
-## Share & publish
-
-The `share` button offers **four formats**:
-
-- **Hyperskill link** — copies both the canonical Hyperskill URL and a short domain-scoped URL (`?n=<token>`). The published view is served read-only at `nb.hyperskills.net`.
-- **Markdown** — downloads a `.md` file with the notebook content.
-- **PNG** — snapshots the rendered notebook.
-- **JSON** — exports full widget state.
-
-`publish` wraps these: it sets `mode: 'view'`, tags the notebook `published`, and copies the Hyperskill link in one gesture — the canonical way to hand off a finished analysis.
-
-## Integration with connected data servers
-
-If a MCP **data** server is currently connected (the user has linked one, e.g. `tricoteuses`, `metmuseum`), BEFORE seeding cells the agent MUST:
-
-1. Call `{server}_list_recipes()` or `{server}_search_recipes(query)` to discover data recipes relevant to the user's intent.
-2. Call `{server}_list_tools()` to see available tables and endpoints.
-3. For each high-signal recipe or table, seed ONE named cell that demonstrates it — typical shapes:
-   - an SQL `SELECT ... LIMIT 10` with a meaningful cell name (e.g. `fetch_amendments`)
-   - a `run_script` invocation for recipes requiring code
-   - a short markdown cell describing the recipe and its parameters
-4. Pass the server metadata via the `servers:` param so the sidebar "sources" section, the left pane, and the server menu modal render correctly:
-
-   ```ts
-   widget_display({
-     name: 'notebook-workspace',
-     params: {
-       title: '...',
-       cells: [...],
-       servers: [{ name: 'tricoteuses', url: 'https://...', kind: 'data' }]
-     }
-   })
-   ```
-
-If NO data server is connected, seed generic markdown-only cells that describe the intended analysis and invite the user to connect an MCP server — this matches the "no source connected" sidebar placeholder.
-
-**Filter rule**: only MCP *data* servers (`kind: 'data'`) belong in `servers:`. Do NOT include WebMCP UI servers such as `autoui` — they expose no queryable data and would clutter the sources sidebar.