@axiom-lattice/core 2.1.37 → 2.1.38

package/dist/index.js

@@ -109,6 +109,7 @@ __export(index_exports, {
   createQueryTablesListTool: () => createQueryTablesListTool,
   createTeamMiddleware: () => createTeamMiddleware,
   createTeammateTools: () => createTeammateTools,
+  createWidgetMiddleware: () => createWidgetMiddleware,
   decrypt: () => decrypt,
   describeCronExpression: () => describeCronExpression,
   embeddingsLatticeManager: () => embeddingsLatticeManager,
@@ -829,11 +830,11 @@ var ToolLatticeManager = class _ToolLatticeManager extends BaseLatticeManager {
    * @param key Lattice键名
    * @param tool 已有的StructuredTool实例
    */
-  registerExistingTool(key, tool48) {
+  registerExistingTool(key, tool50) {
     const config = {
-      name: tool48.name,
-      description: tool48.description,
-      schema: tool48.schema,
+      name: tool50.name,
+      description: tool50.description,
+      schema: tool50.schema,
       // StructuredTool的schema已经是Zod兼容的
       needUserApprove: false
       // MCP工具默认不需要用户批准
@@ -841,7 +842,7 @@ var ToolLatticeManager = class _ToolLatticeManager extends BaseLatticeManager {
     const toolLattice = {
       key,
       config,
-      client: tool48
+      client: tool50
     };
     this.register(key, toolLattice);
   }
@@ -867,7 +868,7 @@ var ToolLatticeManager = class _ToolLatticeManager extends BaseLatticeManager {
 };
 var toolLatticeManager = ToolLatticeManager.getInstance();
 var registerToolLattice = (key, config, executor) => toolLatticeManager.registerLattice(key, config, executor);
-var registerExistingTool = (key, tool48) => toolLatticeManager.registerExistingTool(key, tool48);
+var registerExistingTool = (key, tool50) => toolLatticeManager.registerExistingTool(key, tool50);
 var getToolLattice = (key) => toolLatticeManager.getToolLattice(key);
 var getToolDefinition = (key) => toolLatticeManager.getToolDefinition(key);
 var getToolClient = (key) => toolLatticeManager.getToolClient(key);
@@ -4811,7 +4812,7 @@ var createReactAgentSchema = (schema) => {
 };
 
 // src/agent_lattice/builders/ReActAgentGraphBuilder.ts
-var import_langchain48 = require("langchain");
+var import_langchain51 = require("langchain");
 
 // src/deep_agent_new/backends/sandboxFiles.ts
 var import_sandbox2 = require("@agent-infra/sandbox");
@@ -8373,6 +8374,896 @@ function createAskUserClarifyMiddleware() {
   });
 }
 
+// src/middlewares/widgetMiddleware.ts
+var import_langchain50 = require("langchain");
+
+// src/tool_lattice/widget/loadGuidelines.ts
+var import_langchain48 = require("langchain");
+var import_zod47 = require("zod");
+
+// src/middlewares/guidelines/index.ts
+var CORE = `# Imagine \u2014 Visual Creation Suite
+
+## Modules
+Call load_guidelines again with the modules parameter to load detailed guidance:
+- \`diagram\` \u2014 SVG flowcharts, structural diagrams, illustrative diagrams
+- \`mockup\` \u2014 UI mockups, forms, cards, dashboards
+- \`interactive\` \u2014 interactive explainers with controls
+- \`chart\` \u2014 charts and data analysis (includes Chart.js)
+- \`art\` \u2014 illustration and generative art
+Pick the closest fit. The module includes all relevant design guidance.
+
+**Complexity budget \u2014 hard limits:**
+- Box subtitles: \u22645 words. Detail goes in click-through (\`sendPrompt\`) or the prose below \u2014 not the box.
+- Colors: \u22642 ramps per diagram. If colors encode meaning (states, tiers), add a 1-line legend. Otherwise use one neutral ramp.
+- Horizontal tier: \u22644 boxes at full width (~140px each). 5+ boxes \u2192 shrink to \u2264110px OR wrap to 2 rows OR split into overview + detail diagrams.
+
+If you catch yourself writing "click to learn more" in prose, the diagram itself must ACTUALLY be sparse. Don't promise brevity then front-load everything.
+
+You create rich visual content \u2014 SVG diagrams/illustrations and HTML interactive widgets \u2014 that renders inline in conversation. The best output feels like a natural extension of the chat.
+
+## Core Design System
+
+These rules apply to ALL use cases.
+
+### Philosophy
+- **Seamless**: Users shouldn't notice where claude.ai ends and your widget begins.
+- **Flat**: No gradients, mesh backgrounds, noise textures, or decorative effects. Clean flat surfaces.
+- **Compact**: Show the essential inline. Explain the rest in text.
+- **Text goes in your response, visuals go in the tool** \u2014 All explanatory text, descriptions, introductions, and summaries must be written as normal response text OUTSIDE the tool call. The tool output should contain ONLY the visual element (diagram, chart, interactive widget). Never put paragraphs of explanation, section headings, or descriptive prose inside the HTML/SVG. If the user asks "explain X", write the explanation in your response and use the tool only for the visual that accompanies it. The user's font settings only apply to your response text, not to text inside the widget.
+
+### Streaming
+Output streams token-by-token. Structure code so useful content appears early.
+- **HTML**: \`<style>\` (short) \u2192 content HTML \u2192 \`<script>\` last.
+- **SVG**: \`<defs>\` (markers) \u2192 visual elements immediately.
+- Prefer inline \`style="..."\` over \`<style>\` blocks \u2014 inputs/controls must look correct mid-stream.
+- Keep \`<style>\` under ~15 lines. Interactive widgets with inputs and sliders need more style rules \u2014 that's fine, but don't bloat with decorative CSS.
+- Gradients, shadows, and blur flash during streaming DOM diffs. Use solid flat fills instead.
+
+### Rules
+- No \`<!-- comments -->\` or \`/* comments */\` (waste tokens, break streaming)
+- No font-size below 11px
+- No emoji \u2014 use CSS shapes or SVG paths
+- No gradients, drop shadows, blur, glow, or neon effects
+- No dark/colored backgrounds on outer containers (transparent only \u2014 host provides the bg)
+- **Typography**: The default font is Anthropic Sans. For the rare editorial/blockquote moment, use \`font-family: var(--font-serif)\`.
+- **Headings**: h1 = 22px, h2 = 18px, h3 = 16px \u2014 all \`font-weight: 500\`. Heading color is pre-set to \`var(--color-text-primary)\` \u2014 don't override it. Body text = 16px, weight 400, \`line-height: 1.7\`. **Two weights only: 400 regular, 500 bold.** Never use 600 or 700 \u2014 they look heavy against the host UI.
+- **Sentence case** always. Never Title Case, never ALL CAPS. This applies everywhere including SVG text labels and diagram headings.
+- **No mid-sentence bolding**, including in your response text around the tool call. Entity names, class names, function names go in \`code style\` not **bold**. Bold is for headings and labels only.
+- The widget container is \`display: block; width: 100%\`. Your HTML fills it naturally \u2014 no wrapper div needed. Just start with your content directly. If you want vertical breathing room, add \`padding: 1rem 0\` on your first element.
+- Never use \`position: fixed\` \u2014 the iframe viewport sizes itself to your in-flow content height, so fixed-positioned elements (modals, overlays, tooltips) collapse it to \`min-height: 100px\`. For modal/overlay mockups: wrap everything in a normal-flow \`<div style="min-height: 400px; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center;">\` and put the modal inside \u2014 it's a faux viewport that actually contributes layout height.
+- No DOCTYPE, \`<html>\`, \`<head>\`, or \`<body>\` \u2014 just content fragments.
+- When placing text on a colored background (badges, pills, cards, tags), use the darkest shade from that same color family for the text \u2014 never plain black or generic gray.
+- **Corners**: use \`border-radius: var(--border-radius-md)\` (or \`-lg\` for cards) in HTML. In SVG, \`rx="4"\` is the default \u2014 larger values make pills, use only when you mean a pill.
+- **No rounded corners on single-sided borders** \u2014 if using \`border-left\` or \`border-top\` accents, set \`border-radius: 0\`. Rounded corners only work with full borders on all sides.
+- **No titles or prose inside the tool output** \u2014 see Philosophy above.
+- **Icon sizing**: When using emoji or inline SVG icons, explicitly set \`font-size: 16px\` for emoji or \`width: 16px; height: 16px\` for SVG icons. Never let icons inherit the container's font size \u2014 they will render too large. For larger decorative icons, use 24px max.
+- No tabs, carousels, or \`display: none\` sections during streaming \u2014 hidden content streams invisibly. Show all content stacked vertically. (Post-streaming JS-driven steppers are fine \u2014 see Illustrative/Interactive sections.)
+- No nested scrolling \u2014 auto-fit height.
+- Scripts execute after streaming \u2014 load libraries via \`<script src="https://cdnjs.cloudflare.com/ajax/libs/...">\` (UMD globals), then use the global in a plain \`<script>\` that follows.
+- **CDN allowlist (CSP-enforced)**: external resources may ONLY load from \`cdnjs.cloudflare.com\`, \`esm.sh\`, \`cdn.jsdelivr.net\`, \`unpkg.com\`. All other origins are blocked by the sandbox \u2014 the request silently fails.
+
+### CSS Variables
+**Backgrounds**: \`--color-background-primary\` (white), \`-secondary\` (surfaces), \`-tertiary\` (page bg), \`-info\`, \`-danger\`, \`-success\`, \`-warning\`
+**Text**: \`--color-text-primary\` (black), \`-secondary\` (muted), \`-tertiary\` (hints), \`-info\`, \`-danger\`, \`-success\`, \`-warning\`
+**Borders**: \`--color-border-tertiary\` (0.15\u03B1, default), \`-secondary\` (0.3\u03B1, hover), \`-primary\` (0.4\u03B1), semantic \`-info/-danger/-success/-warning\`
+**Typography**: \`--font-sans\`, \`--font-serif\`, \`--font-mono\`
+**Layout**: \`--border-radius-md\` (8px), \`--border-radius-lg\` (12px \u2014 preferred for most components), \`--border-radius-xl\` (16px)
+All auto-adapt to light/dark mode. For custom colors in HTML, use CSS variables.
+
+**Dark mode is mandatory** \u2014 every color must work in both modes:
+- In SVG: use the pre-built color classes (\`c-blue\`, \`c-teal\`, \`c-amber\`, etc.) for colored nodes \u2014 they handle light/dark mode automatically. Never write \`<style>\` blocks for colors.
+- In SVG: every \`<text>\` element needs a class (\`t\`, \`ts\`, \`th\`) \u2014 never omit fill or use \`fill="inherit"\`. Inside a \`c-{color}\` parent, text classes auto-adjust to the ramp.
+- In HTML: always use CSS variables (--color-text-primary, --color-text-secondary) for text. Never hardcode colors like color: #333 \u2014 invisible in dark mode.
+- Mental test: if the background were near-black, would every text element still be readable?
+
+### sendPrompt(text)
+A global function that sends a message to chat as if the user typed it. Use it when the user's next step benefits from Claude thinking. Handle filtering, sorting, toggling, and calculations in JS instead.
+
+### Links
+\`<a href="https://...">\` just works \u2014 clicks are intercepted and open the host's link-confirmation dialog. Or call \`openLink(url)\` directly.
+
+## When nothing fits
+Pick the closest use case below and adapt. When nothing fits cleanly:
+- Default to editorial layout if the content is explanatory
+- Default to card layout if the content is a bounded object
+- All core design system rules still apply
+- Use \`sendPrompt()\` for any action that benefits from Claude thinking`;
+var ART_AND_ILLUSTRATION = `## Art and illustration
+*"Draw me a sunset" / "Create a geometric pattern"*
+
+Use \`imagine_svg\`. Same technical rules (viewBox, safe area) but the aesthetic is different:
+- Fill the canvas \u2014 art should feel rich, not sparse
+- Bold colors: mix \`--color-text-*\` categories for variety (info blue, success green, warning amber)
+- Art is the one place custom \`<style>\` color blocks are fine \u2014 freestyle colors, \`prefers-color-scheme\` for dark mode variants if you want them
+- Layer overlapping opaque shapes for depth
+- Organic forms with \`<path>\` curves, \`<ellipse>\`, \`<circle>\`
+- Texture via repetition (parallel lines, dots, hatching) not raster effects
+- Geometric patterns with \`<g transform="rotate()">\` for radial symmetry`;
+var CHARTS_CHART_JS = `## Charts (Chart.js)
+\`\`\`html
+<div style="position: relative; width: 100%; height: 300px;">
+  <canvas id="myChart"></canvas>
+</div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" onload="initChart()"></script>
+<script>
+  function initChart() {
+    new Chart(document.getElementById('myChart'), {
+      type: 'bar',
+      data: { labels: ['Q1','Q2','Q3','Q4'], datasets: [{ label: 'Revenue', data: [12,19,8,15] }] },
+      options: { responsive: true, maintainAspectRatio: false }
+    });
+  }
+  if (window.Chart) initChart();
+</script>
+\`\`\`
+
+**Chart.js rules**:
+- Canvas cannot resolve CSS variables. Use hardcoded hex or Chart.js defaults.
+- Wrap \`<canvas>\` in \`<div>\` with explicit \`height\` and \`position: relative\`.
+- **Canvas sizing**: set height ONLY on the wrapper div, never on the canvas element itself. Use position: relative on the wrapper and responsive: true, maintainAspectRatio: false in Chart.js options. Never set CSS height directly on canvas \u2014 this causes wrong dimensions, especially for horizontal bar charts.
+- For horizontal bar charts: wrapper div height should be at least (number_of_bars * 40) + 80 pixels.
+- Load UMD build via \`<script src="https://cdnjs.cloudflare.com/ajax/libs/...">\` \u2014 sets \`window.Chart\` global. Follow with plain \`<script>\` (no \`type="module"\`).
+- **Script load ordering**: CDN scripts may not be loaded when the next \`<script>\` runs (especially during streaming). Always use \`onload="initChart()"\` on the CDN script tag, define your chart init in a named function, and add \`if (window.Chart) initChart();\` as a fallback at the end of your inline script. This guarantees charts render regardless of load order.
+- Multiple charts: use unique IDs (\`myChart1\`, \`myChart2\`). Each gets its own canvas+div pair.
+- For bubble and scatter charts: bubble radii extend past their center points, so points near axis boundaries get clipped. Pad the scale range \u2014 set \`scales.y.min\` and \`scales.y.max\` ~10% beyond your data range (same for x). Or use \`layout: { padding: 20 }\` as a blunt fallback.
+- Chart.js auto-skips x-axis labels when they'd overlap. If you have \u226412 categories and need all labels visible (waterfall, monthly series), set \`scales.x.ticks: { autoSkip: false, maxRotation: 45 }\` \u2014 missing labels make bars unidentifiable.
+
+**Number formatting**: negative values are \`-$5M\` not \`$-5M\` \u2014 sign before currency symbol. Use a formatter: \`(v) => (v < 0 ? '-' : '') + '$' + Math.abs(v) + 'M'\`.
+
+**Legends** \u2014 always disable Chart.js default and build custom HTML. The default uses round dots and no values; custom HTML gives small squares, tight spacing, and percentages:
+
+\`\`\`js
+plugins: { legend: { display: false } }
+\`\`\`
+
+\`\`\`html
+<div style="display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; font-size: 12px; color: var(--color-text-secondary);">
+  <span style="display: flex; align-items: center; gap: 4px;"><span style="width: 10px; height: 10px; border-radius: 2px; background: #3266ad;"></span>Chrome 65%</span>
+  <span style="display: flex; align-items: center; gap: 4px;"><span style="width: 10px; height: 10px; border-radius: 2px; background: #73726c;"></span>Safari 18%</span>
+</div>
+\`\`\`
+
+Include the value/percentage in each label when the data is categorical (pie, donut, single-series bar). Position the legend above the chart (\`margin-bottom\`) or below (\`margin-top\`) \u2014 not inside the canvas.
+
+**Dashboard layout** \u2014 wrap summary numbers in metric cards (see UI fragment) above the chart. Chart canvas flows below without a card wrapper. Use \`sendPrompt()\` for drill-down: \`sendPrompt('Break down Q4 by region')\`.`;
+var COLOR_PALETTE = `## Color palette
+
+9 color ramps, each with 7 stops from lightest to darkest. 50 = lightest fill, 100-200 = light fills, 400 = mid tones, 600 = strong/border, 800-900 = text on light fills.
+
+| Class | Ramp | 50 (lightest) | 100 | 200 | 400 | 600 | 800 | 900 (darkest) |
+|-------|------|------|-----|-----|-----|-----|-----|------|
+| \`c-purple\` | Purple | #EEEDFE | #CECBF6 | #AFA9EC | #7F77DD | #534AB7 | #3C3489 | #26215C |
+| \`c-teal\` | Teal | #E1F5EE | #9FE1CB | #5DCAA5 | #1D9E75 | #0F6E56 | #085041 | #04342C |
+| \`c-coral\` | Coral | #FAECE7 | #F5C4B3 | #F0997B | #D85A30 | #993C1D | #712B13 | #4A1B0C |
+| \`c-pink\` | Pink | #FBEAF0 | #F4C0D1 | #ED93B1 | #D4537E | #993556 | #72243E | #4B1528 |
+| \`c-gray\` | Gray | #F1EFE8 | #D3D1C7 | #B4B2A9 | #888780 | #5F5E5A | #444441 | #2C2C2A |
+| \`c-blue\` | Blue | #E6F1FB | #B5D4F4 | #85B7EB | #378ADD | #185FA5 | #0C447C | #042C53 |
+| \`c-green\` | Green | #EAF3DE | #C0DD97 | #97C459 | #639922 | #3B6D11 | #27500A | #173404 |
+| \`c-amber\` | Amber | #FAEEDA | #FAC775 | #EF9F27 | #BA7517 | #854F0B | #633806 | #412402 |
+| \`c-red\` | Red | #FCEBEB | #F7C1C1 | #F09595 | #E24B4A | #A32D2D | #791F1F | #501313 |
+
+**How to assign colors**: Color should encode meaning, not sequence. Don't cycle through colors like a rainbow (step 1 = blue, step 2 = amber, step 3 = red...). Instead:
+- Group nodes by **category** \u2014 all nodes of the same type share one color. E.g. in a vaccine diagram: all immune cells = purple, all pathogens = coral, all outcomes = teal.
+- For illustrative diagrams, map colors to **physical properties** \u2014 warm ramps for heat/energy, cool for cold/calm, green for organic, gray for structural/inert.
+- Use **gray for neutral/structural** nodes (start, end, generic steps).
+- Use **2-3 colors per diagram**, not 6+. More colors = more visual noise. A diagram with gray + purple + teal is cleaner than one using every ramp.
+- **Prefer purple, teal, coral, pink** for general diagram categories. Reserve blue, green, amber, and red for cases where the node genuinely represents an informational, success, warning, or error concept \u2014 those colors carry strong semantic connotations from UI conventions. (Exception: illustrative diagrams may use blue/amber/red freely when they map to physical properties like temperature or pressure.)
+
+**Text on colored backgrounds:** Always use the 800 or 900 stop from the same ramp as the fill. Never use black, gray, or --color-text-primary on colored fills. **When a box has both a title and a subtitle, they must be two different stops** \u2014 title darker (800 in light mode, 100 in dark), subtitle lighter (600 in light, 200 in dark). Same stop for both reads flat; the weight difference alone isn't enough. For example, text on Blue 50 (#E6F1FB) must use Blue 800 (#0C447C) or 900 (#042C53), not black. This applies to SVG text elements inside colored rects, and to HTML badges, pills, and labels with colored backgrounds.
+
+**Light/dark mode quick pick** \u2014 use only stops from the table, never off-table hex values:
+- **Light mode**: 50 fill + 600 stroke + **800 title / 600 subtitle**
+- **Dark mode**: 800 fill + 200 stroke + **100 title / 200 subtitle**
+- Apply \`c-{ramp}\` to a \`<g>\` wrapping shape+text, or directly to a \`<rect>\`/\`<circle>\`/\`<ellipse>\`. Never to \`<path>\` \u2014 paths don't get ramp fill. For colored connector strokes use inline \`stroke="#..."\` (any mid-ramp hex works in both modes). Dark mode is automatic for ramp classes. Available: c-gray, c-blue, c-red, c-amber, c-green, c-teal, c-purple, c-coral, c-pink.
+
+For status/semantic meaning in UI (success, warning, danger) use CSS variables. For categorical coloring in both diagrams and UI, use these ramps.`;
+var DIAGRAM_TYPES = `## Diagram types
+*"Explain how compound interest works" / "How does a process scheduler work"*
+
+**Two rules that cause most diagram failures \u2014 check these before writing each arrow and each box:**
+1. **Arrow intersection check**: before writing any \`<line>\` or \`<path>\`, trace its coordinates against every box you've already placed. If the line crosses any rect's interior (not just its source/target), it will visibly slash through that box \u2014 use an L-shaped \`<path>\` detour instead. This applies to arrows crossing labels too.
+2. **Box width from longest label**: before writing a \`<rect>\`, find its longest child text (usually the subtitle). \`rect_width = max(title_chars \xD7 8, subtitle_chars \xD7 7) + 24\`. A 100px-wide box holds at most a 10-char subtitle. If your subtitle is "Files, APIs, streams" (20 chars), the box needs 164px minimum \u2014 100px will visibly overflow.
+
+**Tier packing:** Compute total width BEFORE placing. Example \u2014 4 pub/sub consumer boxes:
+- WRONG: x=40,160,260,360 w=160 \u2192 40-60px overlaps (4\xD7160=640 > 480 available)
+- RIGHT: x=50,200,350,500 w=130 gap=20 \u2192 fits (4\xD7130 + 3\xD720 = 580 \u2264 590 safe width; right edge at 630 \u2264 640)
+Work bottom-up for trees: size leaf tier first, parent width \u2265 sum of children.
+
+**Diagrams are the hardest use case** \u2014 they have the highest failure rate due to precise coordinate math. Common mistakes: viewBox too small (content clipped), arrows through unrelated boxes, labels on arrow lines, text past viewBox edges. For illustrative diagrams, also watch for: shapes extending outside the viewBox, overlapping labels that obscure the drawing, and color choices that don't map intuitively to the physical properties being shown. Double-check coordinates before finalizing.
+
+Use \`imagine_svg\` for diagrams. The widget automatically wraps SVG output in a card.
+
+**Pick the right diagram type.** The decision is about *intent*, not subject matter. Ask: is the user trying to *document* this, or *understand* it?
+
+**Reference diagrams** \u2014 the user wants a map they can point at. Precision matters more than feeling. Boxes, labels, arrows, containment. These are the diagrams you'd find in documentation.
+- **Flowchart** \u2014 steps in sequence, decisions branching, data transforming. Good for: approval workflows, request lifecycles, build pipelines, "what happens when I click submit". Trigger phrases: *"walk me through the process"*, *"what are the steps"*, *"what's the flow"*.
+- **Structural diagram** \u2014 things inside other things. Good for: file systems (blocks in inodes in partitions), VPC/subnet/instance, "what's inside a cell". Trigger phrases: *"what's the architecture"*, *"how is this organised"*, *"where does X live"*.
+
+**Intuition diagrams** \u2014 the user wants to *feel* how something works. The goal isn't a correct map, it's the right mental model. These should look nothing like a flowchart. The subject doesn't need a physical form \u2014 it needs a *visual metaphor*.
+- **Illustrative diagram** \u2014 draw the mechanism. Physical things get cross-sections (water heaters, engines, lungs). Abstract things get spatial metaphors: an LLM is a stack of layers with tokens lighting up as attention weights, gradient descent is a ball rolling down a loss surface, a hash table is a row of buckets with items falling into them, TCP is two people passing numbered envelopes. Good for: ML concepts (transformers, attention, backprop, embeddings), physics intuition, CS fundamentals (pointers, recursion, the call stack), anything where the breakthrough is *seeing* it rather than *reading* it. Trigger phrases: *"how does X actually work"*, *"explain X"*, *"I don't get X"*, *"give me an intuition for X"*.
+
+**Route on the verb, not the noun.** Same subject, different diagram depending on what was asked:
+
+| User says | Type | What to draw |
+|---|---|---|
+| "how do LLMs work" | **Illustrative** | Token row, stacked layer slabs, attention threads glowing warm between tokens. Go interactive if you can. |
+| "transformer architecture" | Structural | Labelled boxes: embedding, attention heads, FFN, layer norm. |
+| "how does attention work" | **Illustrative** | One query token, a fan of lines to every key, line opacity = weight. |
+| "how does gradient descent work" | **Illustrative** | Contour surface, a ball, a trail of steps. Slider for learning rate. |
+| "what are the training steps" | Flowchart | Forward \u2192 loss \u2192 backward \u2192 update. Boxes and arrows. |
+| "how does TCP work" | **Illustrative** | Two endpoints, numbered packets in flight, an ACK returning. |
+| "TCP handshake sequence" | Flowchart | SYN \u2192 SYN-ACK \u2192 ACK. Three boxes. |
+| "explain the Krebs cycle" / "how does the event loop work" | **HTML stepper** | Click through stages. Never a ring. |
+| "how does a hash map work" | **Illustrative** | Key falling through a funnel into one of N buckets. |
+| "draw the database schema" / "show me the ERD" | **mermaid.js** | \`erDiagram\` syntax. Not SVG. |
+
+The illustrative route is the default for *"how does X work"* with no further qualification. It is the more ambitious choice \u2014 don't chicken out into a flowchart because it feels safer. Claude draws these well.
+
+Don't mix families in one diagram. If you need both, draw the intuition version first (build the mental model), then the reference version (fill in the precise labels) as a second tool call with prose between.
+
+**For complex topics, use multiple SVG calls** \u2014 break the explanation into a series of smaller diagrams rather than one dense diagram. Each SVG streams in with its own animation and card, creating a visual narrative the user can follow step by step.
+
+**Always add prose between diagrams** \u2014 never stack multiple SVG calls back-to-back without text. Between each SVG, write a short paragraph (in your normal response text, outside the tool call) that explains what the next diagram shows and connects it to the previous one.
+
+**Promise only what you deliver** \u2014 if your response text says "here are three diagrams", you must include all three tool calls. Never promise a follow-up diagram and omit it. If you can only fit one diagram, adjust your text to match. One complete diagram is better than three promised and one delivered.
+
+#### Flowchart
+
+For sequential processes, cause-and-effect, decision trees.
+
+**Planning**: Size boxes to fit their text generously. At 14px sans-serif, each character is ~8px wide \u2014 a label like "Load Balancer" (13 chars) needs a rect at least 140px wide. When in doubt, make boxes wider and leave more space between them. Cramped diagrams are the most common failure mode.
+
+**Special characters are wider**: Chemical formulas (C\u2086H\u2081\u2082O\u2086), math notation (\u2211, \u222B, \u221A), subscripts/superscripts via <tspan> with dy/baseline-shift, and Unicode symbols all render wider than plain Latin characters. For labels containing formulas or special notation, add 30-50% extra width to your estimate. When in doubt, make the box wider \u2014 overflow looks worse than extra padding.
+
+**Spacing**: 60px minimum between boxes, 24px padding inside boxes, 12px between text and edges. Leave 10px gap between arrowheads and box edges. Two-line boxes (title + subtitle) need at least 56px height with 22px between the lines.
+
+**Vertical text placement**: Every \`<text>\` inside a box needs \`dominant-baseline="central"\`, with y set to the *centre* of the slot it sits in. Without it SVG treats y as the baseline, the glyph body sits ~4px higher than you intended, and the descenders land on the line below. Formula: for text centred in a rect at (x, y, w, h), use \`<text x={x+w/2} y={y+h/2} text-anchor="middle" dominant-baseline="central">\`. For a row inside a multi-row box, y is the centre of *that row*, not of the whole box.
+
+**Layout**: Prefer single-direction flows (all top-down or all left-right). Keep diagrams simple \u2014 max 4-5 nodes per diagram. The widget is narrow (~680px) so complex layouts break.
+
+**When the prompt itself is over budget**: if the user lists 6+ components ("draw me auth, products, orders, payments, gateway, queue"), don't draw all of them in one pass \u2014 you'll get overlapping boxes and arrows through text, every time. Decompose: (1) a stripped overview with the boxes only and at most one or two arrows showing the main flow \u2014 no fan-outs, no N-to-N meshes; (2) then one diagram per interesting sub-flow ("here's what happens when an order is placed", "here's the auth handshake"), each with 3-4 nodes and room to breathe. Count the nouns before you draw. The user asked for completeness \u2014 give it to them across several diagrams, not crammed into one.
+
+**Cycles don't get drawn as rings.** If the last stage feeds back into the first (Krebs cycle, event loop, GC mark-and-sweep, TCP retransmit), your instinct is to place the stages around a circle. Don't. Every spacing rule in this spec is Cartesian \u2014 there is no collision check for "input box orbits outside stage box on a ring". You will get satellite boxes overlapping the stages they feed, labels sitting on the dashed circle, and tangential arrows that point nowhere. The ring is decoration; the loop is conveyed by the return arrow.
+
+Build a stepper in \`imagine_html\`. One panel per stage, dots or pills showing position (\u25CF \u25CB \u25CB), Next wraps from the last stage back to the first \u2014 that's the loop. Each panel owns its inputs and products: an event loop's pending callbacks live *inside* the Poll panel, not floating next to a box on a ring. Nothing collides because nothing shares the canvas. Only fall back to a linear SVG (stages in a row, curved \`<path>\` return arrow) when there's one input and one output total and no per-stage detail to show.
+
+**Feedback loops in linear flows:** Don't draw a physical arrow traversing the layout (it fights the flow direction and clips edges). Instead:
+- Small \`\u21BB\` glyph + text near the cycle point: \`<text>\u21BB returns to start</text>\`
+- Or restructure the whole diagram as a circle if the cycle IS the point
+
+**Arrows:** A line from A to B must not cross any other box or label. If the direct path crosses something, route around with an L-bend: \`<path d="M x1 y1 L x1 ymid L x2 ymid L x2 y2"/>\`. Place arrow labels in clear space, not on the midpoint.
+
+Keep all nodes the same height when they have the same content type (e.g. all single-line boxes = 44px, all two-line boxes = 56px).
+
+**Flowchart components** \u2014 use these patterns consistently:
+
+*Single-line node* (44px tall): title only. The \`c-blue\` class sets fill, stroke, and text colors for both light and dark mode automatically \u2014 no \`<style>\` block needed.
+\`\`\`svg
+<g class="node c-blue" onclick="sendPrompt('Tell me more about T-cells')">
+  <rect x="100" y="20" width="180" height="44" rx="8" stroke-width="0.5"/>
+  <text class="th" x="190" y="42" text-anchor="middle" dominant-baseline="central">T-cells</text>
+</g>
+\`\`\`
+
+*Two-line node* (56px tall): bold title + muted subtitle.
+\`\`\`svg
+<g class="node c-blue" onclick="sendPrompt('Tell me more about dendritic cells')">
+  <rect x="100" y="20" width="200" height="56" rx="8" stroke-width="0.5"/>
+  <text class="th" x="200" y="38" text-anchor="middle" dominant-baseline="central">Dendritic cells</text>
+  <text class="ts" x="200" y="56" text-anchor="middle" dominant-baseline="central">Detect foreign antigens</text>
+</g>
+\`\`\`
+
+*Connector* (no label \u2014 meaning is clear from source + target):
+\`\`\`svg
+<line x1="200" y1="76" x2="200" y2="120" class="arr" marker-end="url(#arrow)"/>
+\`\`\`
+
+*Neutral node* (gray, for start/end/generic steps): use \`class="box"\` for auto-themed fill/stroke, and default text classes.
+
+Make all nodes clickable by default \u2014 wrap in \`<g class="node" onclick="sendPrompt('...')">\`. The hover effect is built in.
+
+#### Structural diagram
+
+For concepts where physical or logical containment matters \u2014 things inside other things.
+
+**When to use**: The explanation depends on *where* processes happen. Examples: how a cell works (organelles inside a cell), how a file system works (blocks inside inodes inside partitions), how a building's HVAC works (ducts inside floors inside a building), how a CPU cache hierarchy works (L1 inside core, L2 shared).
+
+**Core idea**: Large rounded rects are containers. Smaller rects inside them are regions or sub-structures. Text labels describe what happens in each region. Arrows show flow between regions or from external inputs/outputs.
+
+**Container rules**:
+- Outermost container: large rounded rect, rx=20-24, lightest fill (50 stop), 0.5px stroke (600 stop). Label at top-left inside, 14px bold.
+- Inner regions: medium rounded rects, rx=8-12, next shade fill (100-200 stop). Use a different color ramp if the region is semantically different from its parent.
+- 20px minimum padding inside every container \u2014 text and inner regions must not touch the container edges.
+- Max 2-3 nesting levels. Deeper nesting gets unreadable at 680px width.
+
+**Layout**:
+- Place inner regions side by side within the container, with 16px+ gap between them.
+- External inputs (sunlight, water, data, requests) sit outside the container with arrows pointing in.
+- External outputs sit outside with arrows pointing out.
+- Keep external labels short \u2014 one word or a short phrase. Details go in the prose between diagrams.
+
+**What goes inside regions**: Text only \u2014 the region name (14px bold) and a short description of what happens there (12px). Don't put flowchart-style boxes inside regions. Don't draw illustrations or icons inside.
+
+**Structural container example** (library branch with two side-by-side regions, an internal labeled arrow, and an external input). ViewBox 700x320, horizontal layout, color classes handle both light and dark mode \u2014 no \`<style>\` block:
+\`\`\`svg
+<defs>
+  <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+    <path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </marker>
+</defs>
+<!-- Outer container -->
+<g class="c-green">
+  <rect x="120" y="30" width="560" height="260" rx="20" stroke-width="0.5"/>
+  <text class="th" x="400" y="62" text-anchor="middle">Library branch</text>
+  <text class="ts" x="400" y="80" text-anchor="middle">Main floor</text>
+</g>
+<!-- Inner: Circulation desk -->
+<g class="c-teal">
+  <rect x="150" y="100" width="220" height="160" rx="12" stroke-width="0.5"/>
+  <text class="th" x="260" y="130" text-anchor="middle">Circulation desk</text>
+  <text class="ts" x="260" y="148" text-anchor="middle">Checkouts, returns</text>
+</g>
+<!-- Inner: Reading room -->
+<g class="c-amber">
+  <rect x="450" y="100" width="210" height="160" rx="12" stroke-width="0.5"/>
+  <text class="th" x="555" y="130" text-anchor="middle">Reading room</text>
+  <text class="ts" x="555" y="148" text-anchor="middle">Seating, reference</text>
+</g>
+<!-- Arrow between inner boxes with label -->
+<text class="ts" x="410" y="175" text-anchor="middle">Books</text>
+<line x1="370" y1="185" x2="448" y2="185" class="arr" marker-end="url(#arrow)"/>
+<!-- External input: New acq. \u2014 text vertically aligned with arrow -->
+<text class="ts" x="40" y="185" text-anchor="middle">New acq.</text>
+<line x1="75" y1="185" x2="118" y2="185" class="arr" marker-end="url(#arrow)"/>
+\`\`\`
+
+**Color in structural diagrams**: Nested regions need distinct ramps \u2014 \`c-{ramp}\` classes resolve to fixed fill/stroke stops, so the same class on parent and child gives identical fills and flattens the hierarchy. Pick a *related* ramp for inner structures (e.g. Green for the library envelope, Teal for the circulation desk inside it) and a *contrasting* ramp for a region that does something functionally different (e.g. Amber for the reading room). This keeps the diagram scannable \u2014 you can see at a glance which parts are related.
+
+**Database schemas / ERDs \u2014 use mermaid.js, not SVG.** A schema table is a header plus N field rows plus typed columns plus crow's-foot connectors. That is a text-layout problem and hand-placing it in SVG fails the same way every time. mermaid.js \`erDiagram\` does layout, cardinality, and connector routing for free. ERDs only; everything else stays in SVG.
+
+\`\`\`
+erDiagram
+  USERS ||--o{ POSTS : writes
+  POSTS ||--o{ COMMENTS : has
+  USERS {
+    uuid id PK
+    string email
+    timestamp created_at
+  }
+  POSTS {
+    uuid id PK
+    uuid user_id FK
+    string title
+  }
+\`\`\`
+
+Use \`imagine_html\` for ERDs. Import and initialize in a \`<script type="module">\`. The host CSS re-styles mermaid's output to match the design system \u2014 keep the init block exactly as shown (fontFamily + fontSize are used for layout measurement; deviate and text clips). After rendering, replace sharp-cornered entity \`<path>\` elements with rounded \`<rect rx="8">\` to match the design system, and strip borders from attribute rows (only the outer container and header row keep visible borders \u2014 alternating fill colors separate the rows):
+\`\`\`html
+<style>
+#erd svg.erDiagram .divider path { stroke-opacity: 0.5; }
+#erd svg.erDiagram .row-rect-odd path,
+#erd svg.erDiagram .row-rect-odd rect,
+#erd svg.erDiagram .row-rect-even path,
+#erd svg.erDiagram .row-rect-even rect { stroke: none !important; }
+</style>
+<div id="erd"></div>
+<script type="module">
+import mermaid from 'https://esm.sh/mermaid@11/dist/mermaid.esm.min.mjs';
+const dark = matchMedia('(prefers-color-scheme: dark)').matches;
+await document.fonts.ready;
+mermaid.initialize({
+  startOnLoad: false,
+  theme: 'base',
+  fontFamily: '"Anthropic Sans", sans-serif',
+  themeVariables: {
+    darkMode: dark,
+    fontSize: '13px',
+    fontFamily: '"Anthropic Sans", sans-serif',
+    lineColor: dark ? '#9c9a92' : '#73726c',
+    textColor: dark ? '#c2c0b6' : '#3d3d3a',
+  },
+});
+const { svg } = await mermaid.render('erd-svg', \`erDiagram
+  USERS ||--o{ POSTS : writes
+  POSTS ||--o{ COMMENTS : has\`);
+document.getElementById('erd').innerHTML = svg;
+
+// Round only the outermost entity box corners (not internal row stripes)
+document.querySelectorAll('#erd svg.erDiagram .node').forEach(node => {
+  const firstPath = node.querySelector('path[d]');
+  if (!firstPath) return;
+  const d = firstPath.getAttribute('d');
+  const nums = d.match(/-?[\\d.]+/g)?.map(Number);
+  if (!nums || nums.length < 8) return;
+  const xs = [nums[0], nums[2], nums[4], nums[6]];
+  const ys = [nums[1], nums[3], nums[5], nums[7]];
+  const x = Math.min(...xs), y = Math.min(...ys);
+  const w = Math.max(...xs) - x, h = Math.max(...ys) - y;
+  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+  rect.setAttribute('x', x); rect.setAttribute('y', y);
+  rect.setAttribute('width', w); rect.setAttribute('height', h);
+  rect.setAttribute('rx', '8');
+  for (const a of ['fill', 'stroke', 'stroke-width', 'class', 'style']) {
+    if (firstPath.hasAttribute(a)) rect.setAttribute(a, firstPath.getAttribute(a));
+  }
+  firstPath.replaceWith(rect);
+});
+
+// Strip borders from attribute rows (mermaid v11: .row-rect-odd / .row-rect-even)
+document.querySelectorAll('#erd svg.erDiagram .row-rect-odd path, #erd svg.erDiagram .row-rect-even path').forEach(p => {
+  p.setAttribute('stroke', 'none');
+});
+</script>
+\`\`\`
+
+Works identically for \`classDiagram\` \u2014 swap the diagram source; init stays the same.
+
+#### Illustrative diagram
+
+For building *intuition*. The subject might be physical (an engine, a lung) or completely abstract (attention, recursion, gradient descent) \u2014 what matters is that a spatial drawing conveys the mechanism better than labelled boxes would. These are the diagrams that make someone go "oh, *that's* what it's doing."
+
+**Two flavours, same rules:**
+- **Physical subjects** get drawn as simplified versions of themselves. Cross-sections, cutaways, schematics. A water heater is a tank with a burner underneath. A lung is a branching tree in a cavity. You're drawing *the thing*, stylised.
+- **Abstract subjects** get drawn as *spatial metaphors*. You're inventing a shape for something that doesn't have one \u2014 but the shape should make the mechanism obvious. A transformer is a stack of horizontal slabs with a bright thread of attention connecting tokens across layers. A hash function is a funnel scattering items into a row of buckets. The call stack is literally a stack of frames growing and shrinking. Embeddings are dots clustering in space. The metaphor *is* the explanation.
+
+This is the most ambitious diagram type and the one Claude is best at. Lean into it. Use colour for intensity (a hot attention weight glows amber, a cold one stays gray). Use repetition for scale (many small circles = many parameters).
+
+**Prefer interactive over static.** A static cross-section is a good answer; a cross-section you can *operate* is a great one. The decision rule: if the real-world system has a control, give the diagram that control. A water heater has a thermostat \u2014 so give the user a slider that shifts the hot/cold boundary, a toggle that fires the burner and animates convection currents. An LLM has input tokens \u2014 let the user click one and watch the attention weights re-fan. A cache has a hit rate \u2014 let them drag it and watch latency change. Reach for \`imagine_html\` with inline SVG first; only fall back to static \`imagine_svg\` when there's genuinely nothing to twiddle.
+
+**When NOT to use**: The user is asking for a *reference*, not an *intuition*. "What are the components of a transformer" wants labelled boxes \u2014 that's a structural diagram. "Walk me through our CI pipeline" wants sequential steps \u2014 that's a flowchart. Also skip this when the metaphor would be arbitrary rather than revealing: drawing "the cloud" as a cloud shape or "microservices" as little houses doesn't teach anything about how they work. If the drawing doesn't make the *mechanism* clearer, don't draw it.
+
+**Fidelity ceiling**: These are schematics, not illustrations. Every shape should read at a glance. If a \`<path>\` needs more than ~6 segments to draw, simplify it. A tank is a rounded rect, not a B\xE9zier portrait of a tank. A flame is three triangles, not a fire. Recognisable silhouette beats accurate contour every time \u2014 if you find yourself carefully tracing an outline, you're overshooting.
+
+**Core principle**: Draw the mechanism, not a diagram *about* the mechanism. Spatial arrangement carries the meaning; labels annotate. A good illustrative diagram works with the labels removed.
+
+**What changes from flowchart/structural rules**:
+
+- **Shapes are freeform.** Use \`<path>\`, \`<ellipse>\`, \`<circle>\`, \`<polygon>\`, and curved lines to represent real forms. A water tank is a tall rect with rounded bottom. A heart valve is a pair of curved paths. A circuit trace is a thin polyline. You are not limited to rounded rects.
+- **Layout follows the subject's geometry**, not a grid. If the thing is tall and narrow (a water heater, a thermometer), the diagram is tall and narrow. If it's wide and flat (a PCB, a geological cross-section), the diagram is wide. Let the subject dictate proportions within the 680px viewBox width.
+- **Color encodes intensity**, not category. For physical subjects: warm ramps (amber, coral, red) = heat/energy/pressure, cool ramps (blue, teal) = cold/calm, gray = inert structure. For abstract subjects: warm = active/high-weight/attended-to, cool or gray = dormant/low-weight/ignored. A user should be able to glance at the diagram and see *where the action is* without reading a single label.
+- **Layering and overlap are encouraged \u2014 for shapes.** Unlike flowcharts where boxes must never overlap, illustrative diagrams can layer shapes for depth \u2014 a pipe entering a tank, attention lines fanning through layers, insulation wrapping a chamber. Use z-ordering (later in source = on top) deliberately.
+- **Text is the exception \u2014 never let a stroke cross it.** The overlap permission is for shapes only. Every label needs 8px of clear air between its baseline/cap-height and the nearest stroke. Don't solve this with a background rect \u2014 solve it by *placing the text somewhere else*. Labels go in the quiet regions: above the drawing, below it, in the margin with a leader line, or in the gap between two fans of lines. If there is no quiet region, the drawing is too dense \u2014 remove something or split into two diagrams.
+- **Small shape-based indicators are allowed** when they communicate physical state. Triangles for flames. Circles for bubbles or particles. Wavy lines for steam or heat radiation. Parallel lines for vibration. These aren't decoration \u2014 they tell the user what's happening physically. Keep them simple: basic SVG primitives, not detailed illustrations.
+- **One gradient per diagram is permitted** \u2014 the only exception to the global no-gradients rule \u2014 and only to show a *continuous* physical property across a region (temperature stratification in a tank, pressure drop along a pipe, concentration in a solution). It must be a single \`<linearGradient>\` between exactly two stops from the same colour ramp. No radial gradients, no multi-stop fades, no gradient-as-aesthetic. If two stacked flat-fill rects communicate the same thing, do that instead.
+- **Animation is permitted for interactive HTML versions.** Use CSS \`@keyframes\` animating only \`transform\` and \`opacity\`. Keep loops under ~2s, and wrap every animation in \`@media (prefers-reduced-motion: no-preference)\` so it's opt-out by default. Animations should show how the system *behaves* \u2014 convection current, rotation, flow \u2014 not just move for the sake of moving. No physics engines or heavy libraries.
+
+All core rules still apply (viewBox 680px, dark mode mandatory, 14/12px text, pre-built classes, arrow marker, clickable nodes).
+
+**Label placement**:
+- Place labels *outside* the drawn object when possible, with a thin leader line (0.5px dashed, \`var(--t)\` stroke) pointing to the relevant part. This keeps the illustration uncluttered.
+- For large internal zones (like temperature regions in a tank), labels can sit inside if there's ample clear space \u2014 minimum 20px from any edge.
+- External labels sit in the margin area or above/below the object. **Pick one side for labels and put them all there** \u2014 at 680px wide you don't have room for a drawing *and* label columns on both sides. Reserve at least 140px of horizontal margin on the label side. Labels on the left are the ones that clip: \`text-anchor="end"\` extends leftward from x, and with multi-line callouts it's very easy to blow past x=0 without noticing. Default to right-side labels with \`text-anchor="start"\` unless the subject's geometry forces otherwise. Use \`class="ts"\` (12px) for callouts, \`class="th"\` (14px medium) for major component names.
+
+**Composition approach**:
+1. Start with the main object's silhouette \u2014 the largest shape, centered in the viewBox.
+2. Add internal structure: chambers, pipes, membranes, mechanical parts.
+3. Add external connections: pipes entering/exiting, arrows showing flow direction, labels for inputs and outputs.
+4. Add state indicators last: color fills showing temperature/pressure/concentration, small animated elements showing movement or energy.
+5. Leave generous whitespace around the object for labels \u2014 don't crowd annotations against the viewBox edges.
+
+**Static vs interactive**: Static cutaways and cross-sections work best as pure \`imagine_svg\`. If the diagram benefits from controls \u2014 a slider that changes a temperature zone, buttons toggling between operating states, live readouts \u2014 use \`imagine_html\` with inline SVG for the drawing and HTML controls around it.
+
+**Illustrative diagram example** \u2014 interactive water heater cross-section with vivid physical-realism colors, animated convection currents, and controls. Uses \`imagine_html\` with inline SVG: a thermostat slider shifts the hot/cold gradient boundary, a heating toggle animates flames on/off and transitions convection to paused. viewBox is 680x560; tank occupies x=180..440, leaving 140px+ of right margin for labels. Smooth convection paths use \`stroke-dasharray:5 5\` at ~1.6s for a gentle flow feel. A warm-glow overlay on the hot zone pulses subtly when heating is on. Flame shapes use warm gradient fills and clean opacity transitions. Labels sit along the right margin with leader lines.
+\`\`\`html
+<style>
+  @keyframes conv { to { stroke-dashoffset: -20; } }
+  @keyframes flicker { 0%,100%{opacity:1} 50%{opacity:.82} }
+  @keyframes glow { 0%,100%{opacity:.3} 50%{opacity:.6} }
+  .conv { stroke-dasharray:5 5; animation: conv var(--dur,1.6s) linear infinite; transition: opacity .5s; }
+  .conv.off { opacity:0; animation-play-state:paused; }
+  #flames path { transition: opacity .5s; }
+  #flames.off path { opacity:0; animation:none; }
+  #flames path:nth-child(odd)  { animation: flicker .6s ease-in-out infinite; }
+  #flames path:nth-child(even) { animation: flicker .8s ease-in-out infinite .15s; }
+  #warm-glow { animation: glow 3s ease-in-out infinite; transition: opacity .5s; }
+  #warm-glow.off { opacity:0; animation:none; }
+  .toggle-track { position:relative;width:32px;height:18px;background:var(--color-border-secondary);border-radius:9px;transition:background .2s;display:inline-block; }
+  .toggle-track:has(input:checked) { background:var(--color-text-info); }
+  #heat-toggle:checked + span { transform:translateX(14px); }
+</style>
+<svg width="100%" viewBox="0 0 680 560">
+  <defs>
+    <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></marker>
+    <linearGradient id="tg" x1="0" y1="0" x2="0" y2="1">
+      <stop id="gh" offset="40%" stop-color="#E8593C" stop-opacity="0.45"/>
+      <stop id="gc" offset="40%" stop-color="#3B8BD4" stop-opacity="0.4"/>
+    </linearGradient>
+    <linearGradient id="fg1" x1="0" y1="1" x2="0" y2="0"><stop offset="0%" stop-color="#E85D24"/><stop offset="60%" stop-color="#F2A623"/><stop offset="100%" stop-color="#FCDE5A"/></linearGradient>
+    <linearGradient id="fg2" x1="0" y1="1" x2="0" y2="0"><stop offset="0%" stop-color="#D14520"/><stop offset="50%" stop-color="#EF8B2C"/><stop offset="100%" stop-color="#F9CB42"/></linearGradient>
+    <linearGradient id="pipe-h" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#D05538" stop-opacity=".25"/><stop offset="100%" stop-color="#D05538" stop-opacity=".08"/></linearGradient>
+    <linearGradient id="pipe-c" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#3B8BD4" stop-opacity=".25"/><stop offset="100%" stop-color="#3B8BD4" stop-opacity=".08"/></linearGradient>
+    <clipPath id="tc"><rect x="180" y="55" width="260" height="390" rx="14"/></clipPath>
+  </defs>
+  <!-- Tank fill -->
+  <g clip-path="url(#tc)"><rect x="180" y="55" width="260" height="390" fill="url(#tg)"/></g>
+  <!-- Warm glow overlay (pulses when heating) -->
+  <g clip-path="url(#tc)"><rect id="warm-glow" x="180" y="55" width="260" height="160" fill="#E8593C" opacity=".3"/></g>
+  <!-- Tank shell (double stroke for solidity) -->
+  <rect x="180" y="55" width="260" height="390" rx="14" fill="none" stroke="var(--t)" stroke-width="2.5" opacity=".25"/>
+  <rect x="180" y="55" width="260" height="390" rx="14" fill="none" stroke="var(--t)" stroke-width="1"/>
+  <!-- Hot pipe out (top right) -->
+  <rect x="370" y="14" width="16" height="50" rx="4" fill="url(#pipe-h)"/>
+  <path d="M378 14V55" stroke="var(--t)" stroke-width="3" stroke-linecap="round" fill="none"/>
+  <!-- Cold pipe in + dip tube (top left) -->
+  <rect x="234" y="14" width="16" height="50" rx="4" fill="url(#pipe-c)"/>
+  <path d="M242 14V55" stroke="var(--t)" stroke-width="3" stroke-linecap="round" fill="none"/>
+  <path d="M242 55V395" stroke="var(--t)" stroke-width="2.5" stroke-linecap="round" fill="none" opacity=".5"/>
+  <!-- Convection currents (curved paths at different speeds) -->
+  <path class="conv" style="--dur:1.6s" fill="none" stroke="#D05538" stroke-width="1" opacity=".5" d="M350 380C355 320,365 240,358 140Q355 110,340 100"/>
+  <path class="conv" style="--dur:2.1s" fill="none" stroke="#C04828" stroke-width=".8" opacity=".35" d="M300 390C308 340,320 260,315 170Q312 130,298 115"/>
+  <path class="conv" style="--dur:2.6s" fill="none" stroke="#B05535" stroke-width=".7" opacity=".3" d="M380 370C382 310,388 230,382 150Q378 120,365 110"/>
+  <!-- Burner bar -->
+  <rect x="188" y="454" width="244" height="5" rx="2" fill="var(--t)" opacity=".6"/>
+  <rect x="220" y="462" width="180" height="6" rx="3" fill="var(--t)" opacity=".3"/>
+  <!-- Flames (gradient-filled organic shapes) -->
+  <g id="flames">
+    <path d="M240,454Q248,430 252,438Q256,424 260,454Z" fill="url(#fg1)"/>
+    <path d="M278,454Q285,426 290,434Q295,418 300,454Z" fill="url(#fg2)"/>
+    <path d="M320,454Q328,428 333,436Q338,420 342,454Z" fill="url(#fg1)"/>
+    <path d="M360,454Q367,430 371,438Q375,422 380,454Z" fill="url(#fg2)"/>
+    <path d="M398,454Q404,434 408,440Q412,428 416,454Z" fill="url(#fg1)"/>
+  </g>
+  <!-- Labels (right margin) -->
+  <g class="node" onclick="sendPrompt('How does hot water exit the tank?')">
+    <line class="leader" x1="386" y1="34" x2="468" y2="70"/><circle cx="386" cy="34" r="2" fill="var(--t)"/>
+    <text class="ts" x="474" y="74">Hot water outlet</text></g>
+  <g class="node" onclick="sendPrompt('How does the cold water inlet work?')">
+    <line class="leader" x1="250" y1="34" x2="468" y2="140"/><circle cx="250" cy="34" r="2" fill="var(--t)"/>
+    <text class="ts" x="474" y="144">Cold water inlet</text></g>
+  <g class="node" onclick="sendPrompt('What does the dip tube do?')">
+    <line class="leader" x1="250" y1="260" x2="468" y2="220"/><circle cx="250" cy="260" r="2" fill="var(--t)"/>
+    <text class="ts" x="474" y="224">Dip tube</text></g>
+  <g class="node" onclick="sendPrompt('What does the thermostat control?')">
+    <line class="leader" x1="440" y1="250" x2="468" y2="300"/><circle cx="440" cy="250" r="2" fill="var(--t)"/>
+    <text class="ts" x="474" y="304">Thermostat</text></g>
+  <g class="node" onclick="sendPrompt('What material is the tank made of?')">
+    <line class="leader" x1="440" y1="380" x2="468" y2="380"/><circle cx="440" cy="380" r="2" fill="var(--t)"/>
+    <text class="ts" x="474" y="384">Tank wall</text></g>
+  <g class="node" onclick="sendPrompt('How does the gas burner heat water?')">
+    <line class="leader" x1="432" y1="454" x2="468" y2="454"/><circle cx="432" cy="454" r="2" fill="var(--t)"/>
+    <text class="ts" x="474" y="458">Heating element</text></g>
+</svg>
+<div style="display:flex;align-items:center;gap:16px;margin:12px 0 0;font-size:13px;color:var(--color-text-secondary)">
+  <label style="display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none">
+    <span class="toggle-track">
+      <input type="checkbox" id="heat-toggle" checked onchange="toggleHeat(this.checked)" style="position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;margin:0">
+      <span style="position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .2s;pointer-events:none"></span>
+    </span>
+    Heating
+  </label>
+  <span>Thermostat</span>
+  <input type="range" id="temp-slider" min="10" max="90" value="40" style="flex:1" oninput="setTemp(this.value)">
+  <span id="temp-label" style="min-width:36px;text-align:right">40%</span>
+</div>
+<script>
+function setTemp(v) {
+  document.getElementById('gh').setAttribute('offset', v+'%');
+  document.getElementById('gc').setAttribute('offset', v+'%');
+  document.getElementById('temp-label').textContent = v+'%';
+}
+function toggleHeat(on) {
+  document.getElementById('flames').classList.toggle('off', !on);
+  document.getElementById('warm-glow').classList.toggle('off', !on);
+  document.querySelectorAll('.conv').forEach(p => p.classList.toggle('off', !on));
+}
+</script>
+\`\`\`
+
+**Illustrative example \u2014 abstract subject** (attention in a transformer). Same rules, no physical object. A row of tokens at the bottom, one query token highlighted, weight-scaled lines fanning to every other token. Caption sits below the fan \u2014 clear of every stroke \u2014 not inside it.
+\`\`\`svg
+<rect class="c-purple" x="60" y="40"  width="560" height="26" rx="6" stroke-width="0.5"/>
+<rect class="c-purple" x="60" y="80"  width="560" height="26" rx="6" stroke-width="0.5"/>
+<rect class="c-purple" x="60" y="120" width="560" height="26" rx="6" stroke-width="0.5"/>
+<text class="ts" x="72" y="57" >Layer 3</text>
+<text class="ts" x="72" y="97" >Layer 2</text>
+<text class="ts" x="72" y="137">Layer 1</text>
+
+<line stroke="#EF9F27" stroke-linecap="round" x1="340" y1="230" x2="116" y2="146" stroke-width="1"   opacity="0.25"/>
+<line stroke="#EF9F27" stroke-linecap="round" x1="340" y1="230" x2="228" y2="146" stroke-width="1.5" opacity="0.4"/>
+<line stroke="#EF9F27" stroke-linecap="round" x1="340" y1="230" x2="340" y2="146" stroke-width="4"   opacity="1.0"/>
+<line stroke="#EF9F27" stroke-linecap="round" x1="340" y1="230" x2="452" y2="146" stroke-width="2.5" opacity="0.7"/>
+<line stroke="#EF9F27" stroke-linecap="round" x1="340" y1="230" x2="564" y2="146" stroke-width="1"   opacity="0.2"/>
+
+<g class="node" onclick="sendPrompt('What do the attention weights mean?')">
+  <rect class="c-gray"  x="80"  y="230" width="72" height="36" rx="6" stroke-width="0.5"/>
+  <rect class="c-gray"  x="192" y="230" width="72" height="36" rx="6" stroke-width="0.5"/>
+  <rect class="c-amber" x="304" y="230" width="72" height="36" rx="6" stroke-width="1"/>
+  <rect class="c-gray"  x="416" y="230" width="72" height="36" rx="6" stroke-width="0.5"/>
+  <rect class="c-gray"  x="528" y="230" width="72" height="36" rx="6" stroke-width="0.5"/>
+  <text class="ts" x="116" y="252" text-anchor="middle">the</text>
+  <text class="ts" x="228" y="252" text-anchor="middle">cat</text>
+  <text class="th" x="340" y="252" text-anchor="middle">sat</text>
+  <text class="ts" x="452" y="252" text-anchor="middle">on</text>
+  <text class="ts" x="564" y="252" text-anchor="middle">the</text>
+</g>
+
+<text class="ts" x="340" y="300" text-anchor="middle">Line thickness = attention weight from "sat" to each token</text>
+\`\`\`
+
+Note what's *not* here: no boxes labelled "multi-head attention", no arrows labelled "Q/K/V". Those belong in the structural diagram. This one is about the *feeling* of attention \u2014 one token looking at every other token with varying intensity.
+
+These are starting points, not ceilings. For the water heater: add a thermostat slider, animate the convection current, toggle heating vs standby. For the attention diagram: let the user click any token to become the query, scrub through layers, animate the weights settling. The goal is always to *show* how the thing works, not just *label* it.`;
+var SVG_SETUP = `## SVG setup
+
+**ViewBox safety checklist** \u2014 before finalizing any SVG, verify:
+1. Find your lowest element: max(y + height) across all rects, max(y) across all text baselines.
+2. Set viewBox height = that value + 40px buffer.
+3. Find your rightmost element: max(x + width) across all rects. All content must stay within x=0 to x=680.
+4. For text with text-anchor="end", the text extends LEFT from x. If x=118 and text is 200px wide, it starts at x=-82 \u2014 outside the viewBox. Increase x or use text-anchor="start".
+5. Never use negative x or y coordinates. The viewBox starts at 0,0.
+6. Flowcharts/structural only: for every pair of boxes in the same row, check that the left box's (x + width) is less than the right box's x by at least 20px. If four 160px boxes plus three 20px gaps sum to more than 640px, the row doesn't fit \u2014 shrink the boxes or cut the subtitles, don't let them overlap.
+
+**SVG setup**: \`<svg width="100%" viewBox="0 0 680 H">\` \u2014 680px wide, flexible height. Set H to fit content tightly \u2014 the last element's bottom edge + 40px padding. Don't leave excess empty space below the content. Safe area: x=40 to x=640, y=40 to y=(H-40). Background transparent. **Do not wrap the SVG in a container \`<div>\` with a background color** \u2014 the widget host already provides the card container and background. Output the raw \`<svg>\` element directly.
+
+**The 680 in viewBox is load-bearing \u2014 do not change it.** It matches the widget container width so SVG coordinate units render 1:1 with CSS pixels. With \`width="100%"\`, the browser scales the entire coordinate space to fit the container: \`viewBox="0 0 480 H"\` in a 680px container scales everything by 680/480 = 1.42\xD7, so your \`class="th"\` 14px text renders at ~20px. The font calibration table below and all "text fits in box" math assume 1:1. If your diagram content is naturally narrow, **keep viewBox width at 680 and center the content** (e.g. content spans x=180..500) \u2014 do not shrink the viewBox to hug the content. This applies equally to inline SVGs inside \`imagine_html\` steppers and widgets: same \`viewBox="0 0 680 H"\`, same 1:1 guarantee.
+
+**viewBox height:** After layout, find max_y (bottom-most point of any shape, including text baselines + 4px descent). Set viewBox height = max_y + 20. Don't guess.
+
+**text-anchor='end' at x<60 is risky** \u2014 the longest label will extend left past x=0. Use text-anchor='start' and right-align the column instead, or check: label_chars \xD7 8 < anchor_x.
+
+**One SVG per tool call** \u2014 each call must contain exactly one <svg> element. Never leave an abandoned or partial SVG in the output. If your first attempt has problems, replace it entirely \u2014 do not append a corrected version after the broken one.
+
+**Style rules for all diagrams**:
+- Every \`<text>\` element must carry one of the pre-built classes (\`t\`, \`ts\`, \`th\`). An unclassed \`<text>\` inherits the default sans font, which is the tell that you forgot the class.
+- Use only two font sizes: 14px for node/region labels (class="t" or "th"), 12px for subtitles, descriptions, and arrow labels (class="ts"). No other sizes.
+- No decorative step numbers, large numbering, or oversized headings outside boxes.
+- No icons or illustrations inside boxes \u2014 text only. (Exception: illustrative diagrams may use simple shape-based indicators inside drawn objects \u2014 see below.)
+- Sentence case on all labels.
+
+**Font size calibration for diagram text labels** - Here's csv table to give you better sense of the Anthropic Sans font rendering width:
+\`\`\`csv
+text, chars length, font-weight, font-size, rendered width
+Authentication Service, chars: 22, font-weight: 500, font-size: 14px, width: 167px
+Background Job Processor, chars: 24, font-weight: 500, font-size: 14px, width: 201px
+Detects and validates incoming tokens, chars: 37, font-weight: 400, font-size: 14px, width: 279px
+forwards request to, chars: 19, font-weight: 400, font-size: 12px, width: 123px
+\u30C7\u30FC\u30BF\u30D9\u30FC\u30B9\u30B5\u30FC\u30D0\u30FC\u63A5\u7D9A, chars: 12, font-weight: 400, font-size: 14px, width: 181px
+\`\`\`
+
+Before placing text in a box, check: does (text width + 2\xD7padding) fit the container?
+
+**SVG \`<text>\` never auto-wraps.** Every line break needs an explicit \`<tspan x="..." dy="1.2em">\`. If your subtitle is long enough to need wrapping, it's too long \u2014 shorten it (see complexity budget).
+
+**Example check**: You want to put "Glucose (C\u2086H\u2081\u2082O\u2086)" in a rounded rect. The text is 20 characters at 14px \u2248 180px wide. Add 2\xD724px padding = 228px minimum box width. If your rect is only 160px wide, the text WILL overflow \u2014 either shorten the label (e.g. just "Glucose") or widen the box. Subscript characters like \u2086 and \u2081\u2082 still take horizontal space \u2014 count them.
+
+**Pre-built classes** (already loaded in SVG widget):
+- \`class="t"\` = sans 14px primary, \`class="ts"\` = sans 12px secondary, \`class="th"\` = sans 14px medium (500)
+- \`class="box"\` = neutral rect (bg-secondary fill, border stroke)
+- \`class="node"\` = clickable group with hover effect (cursor pointer, slight dim on hover)
+- \`class="arr"\` = arrow line (1.5px, open chevron head)
+- \`class="leader"\` = dashed leader line (tertiary stroke, 0.5px, dashed)
+- \`class="c-{ramp}"\` = colored node (c-blue, c-teal, c-amber, c-green, c-red, c-purple, c-coral, c-pink, c-gray). Apply to \`<g>\` or shape element (rect/circle/ellipse), NOT to paths. Sets fill+stroke on shapes, auto-adjusts child \`t\`/\`ts\`/\`th\`, dark mode automatic.
+
+**c-{ramp} nesting:** These classes use direct-child selectors (\`>\`). Nest a \`<g>\` inside a \`<g class="c-blue">\` and the inner shapes become grandchildren \u2014 they lose the fill and render BLACK (SVG default). Put \`c-*\` on the innermost group holding the shapes, or on the shapes directly. If you need click handlers, put \`onclick\` on the \`c-*\` group itself, not a wrapper.
+
+- Short aliases: \`var(--p)\`, \`var(--s)\`, \`var(--t)\`, \`var(--bg2)\`, \`var(--b)\`
+- Arrow marker: always include this \`<defs>\` at the start of every SVG:
+  \`<defs><marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></marker></defs>\`
+  Then use \`marker-end="url(#arrow)"\` on lines. The head uses \`context-stroke\`, so it inherits the colour of whichever line it sits on \u2014 a dashed green line gets a green head, a grey line gets a grey head. Never a colour mismatch. Do not add filters, patterns, or extra markers to \`<defs>\`. Illustrative diagrams may add a single \`<clipPath>\` or \`<linearGradient>\` (see Illustrative section).
+
+**Minimize standalone labels.** Every \`<text>\` element must be inside a box (title or \u22645-word subtitle) or in the legend. Arrow labels are usually unnecessary \u2014 if the arrow's meaning isn't obvious from its source + target, put it in the box subtitle or in prose below. Labels floating in space collide with things and are ambiguous.
+
+**Stroke width:** Use 0.5px strokes for diagram borders and edges \u2014 not 1px or 2px. Thin strokes feel more refined.
+
+**Connector paths need \`fill="none"\`.** SVG defaults to \`fill: black\` \u2014 a curved connector without \`fill="none"\` renders as a huge black shape instead of a clean line. Every \`<path>\` or \`<polyline>\` used as a connector/arrow MUST have \`fill="none"\`. Only set fill on shapes meant to be filled (rects, circles, polygons).
+
+**Rect rounding:** \`rx="4"\` for subtle corners. \`rx="8"\` max for emphasized rounding. \`rx\` \u2265 half the height = pill shape \u2014 deliberate only.
+
+**Schematic containers use dashed rects with a label.** Don't draw literal shapes (organelle ovals, cloud outlines, server tower icons) \u2014 the diagram is a schema, not an illustration. A dashed \`<rect>\` labeled "Reactor vessel" reads cleaner than an \`<ellipse>\` that clips content.
+
+**Lines stop at component edges.** When a line meets a component (wire into a bulb, edge into a node), draw it as segments that stop at the boundary \u2014 never draw through and rely on a fill to hide the line. The background color is not guaranteed; any occluding fill is a coupling. Compute the stop/start coordinates from the component's position and size.
+
+**Physical-color scenes (sky, water, grass, skin, materials):** Use ALL hardcoded hex \u2014 never mix with \`c-*\` theme classes. The scene should not invert in dark mode. If you need a dark variant, provide it explicitly with \`@media (prefers-color-scheme: dark)\` \u2014 this is the one place that's allowed. Mixing hardcoded backgrounds with theme-responsive \`c-*\` foreground breaks: half inverts, half doesn't.
+
+**No rotated text**. \`<defs>\` may contain the arrow marker, a \`<clipPath>\`, and \u2014 in illustrative diagrams only \u2014 a single \`<linearGradient>\`. Nothing else: no filters, no patterns, no extra markers.`;
+var UI_COMPONENTS = `## UI components
+
+### Aesthetic
+Flat, clean, white surfaces. Minimal 0.5px borders. Generous whitespace. No gradients, no shadows (except functional focus rings). Everything should feel native to claude.ai \u2014 like it belongs on the page, not embedded from somewhere else.
+
+### Tokens
+- Borders: always \`0.5px solid var(--color-border-tertiary)\` (or \`-secondary\` for emphasis)
+- Corner radius: \`var(--border-radius-md)\` for most elements, \`var(--border-radius-lg)\` for cards
+- Cards: white bg (\`var(--color-background-primary)\`), 0.5px border, radius-lg, padding 1rem 1.25rem
+- Form elements (input, select, textarea, button, range slider) are pre-styled \u2014 write bare tags. Text inputs are 36px with hover/focus built in; range sliders have 4px track + 18px thumb; buttons have outline style with hover/active. Only add inline styles to override (e.g., different width).
+- Buttons: pre-styled with transparent bg, 0.5px border-secondary, hover bg-secondary, active scale(0.98). If it triggers sendPrompt, append a \u2197 arrow.
+- **Round every displayed number.** JS float math leaks artifacts \u2014 \`0.1 + 0.2\` gives \`0.30000000000000004\`, \`7 * 1.1\` gives \`7.700000000000001\`. Any number that reaches the screen (slider readouts, stat card values, axis labels, data-point labels, tooltips, computed totals) must go through \`Math.round()\`, \`.toFixed(n)\`, or \`Intl.NumberFormat\`. Pick the precision that makes sense for the context \u2014 integers for counts, 1\u20132 decimals for percentages, \`toLocaleString()\` for currency. For range sliders, also set \`step="1"\` (or step="0.1" etc.) so the input itself emits round values.
+- Spacing: use rem for vertical rhythm (1rem, 1.5rem, 2rem), px for component-internal gaps (8px, 12px, 16px)
+- Box-shadows: none, except \`box-shadow: 0 0 0 Npx\` focus rings on inputs
+
+### Metric cards
+For summary numbers (revenue, count, percentage) \u2014 surface card with muted 13px label above, 24px/500 number below. \`background: var(--color-background-secondary)\`, no border, \`border-radius: var(--border-radius-md)\`, padding 1rem. Use in grids of 2-4 with \`gap: 12px\`. Distinct from raised cards (which have white bg + border).
+
+### Layout
+- Editorial (explanatory content): no card wrapper, prose flows naturally
+- Card (bounded objects like a contact record, receipt): single raised card wraps the whole thing
+- Don't put tables here \u2014 output them as markdown in your response text
+
+**Grid overflow:** \`grid-template-columns: 1fr\` has \`min-width: auto\` by default \u2014 children with large min-content push the column past the container. Use \`minmax(0, 1fr)\` to clamp.
+
+**Table overflow:** Tables with many columns auto-expand past \`width: 100%\` if cell contents exceed it. In constrained layouts (\u2264700px), use \`table-layout: fixed\` and set explicit column widths, or reduce columns, or allow horizontal scroll on a wrapper.
+
+### Mockup presentation
+Contained mockups \u2014 mobile screens, chat threads, single cards, modals, small UI components \u2014 should sit on a background surface (\`var(--color-background-secondary)\` container with \`border-radius: var(--border-radius-lg)\` and padding, or a device frame) so they don't float naked on the widget canvas. Full-width mockups like dashboards, settings pages, or data tables that naturally fill the viewport do not need an extra wrapper.
+
+### 1. Interactive explainer \u2014 learn how something works
+*"Explain how compound interest works" / "Teach me about sorting algorithms"*
+
+Use \`imagine_html\` for the interactive controls \u2014 sliders, buttons, live state displays, charts. Keep prose explanations in your normal response text (outside the tool call), not embedded in the HTML. No card wrapper. Whitespace is the container.
+
+\`\`\`html
+<div style="display: flex; align-items: center; gap: 12px; margin: 0 0 1.5rem;">
+  <label style="font-size: 14px; color: var(--color-text-secondary);">Years</label>
+  <input type="range" min="1" max="40" value="20" id="years" style="flex: 1;" />
+  <span style="font-size: 14px; font-weight: 500; min-width: 24px;" id="years-out">20</span>
+</div>
+
+<div style="display: flex; align-items: baseline; gap: 8px; margin: 0 0 1.5rem;">
+  <span style="font-size: 14px; color: var(--color-text-secondary);">\xA31,000 \u2192</span>
+  <span style="font-size: 24px; font-weight: 500;" id="result">\xA33,870</span>
+</div>
+
+<div style="margin: 2rem 0; position: relative; height: 240px;">
+  <canvas id="chart"></canvas>
+</div>
+\`\`\`
+
+Use \`sendPrompt()\` to let users ask follow-ups: \`sendPrompt('What if I increase the rate to 10%?')\`
+
+### 2. Compare options \u2014 decision making
+*"Compare pricing and features of these products" / "Help me choose between React and Vue"*
+
+Use \`imagine_html\`. Side-by-side card grid for options. Highlight differences with semantic colors. Interactive elements for filtering or weighting.
+
+- Use \`repeat(auto-fit, minmax(160px, 1fr))\` for responsive columns
+- Each option in a card. Use badges for key differentiators.
+- Add \`sendPrompt()\` buttons: \`sendPrompt('Tell me more about the Pro plan')\`
+- Don't put comparison tables inside this tool \u2014 output them as regular markdown tables in your response text instead. The tool is for the visual card grid only.
+- When one option is recommended or "most popular", accent its card with \`border: 2px solid var(--color-border-info)\` only (2px is deliberate \u2014 the only exception to the 0.5px rule, used to accent featured items) \u2014 keep the same background and border as the other cards. Add a small badge (e.g. "Most popular") above or inside the card header using \`background: var(--color-background-info); color: var(--color-text-info); font-size: 12px; padding: 4px 12px; border-radius: var(--border-radius-md)\`.
+
+### 3. Data record \u2014 bounded UI object
+*"Show me a Salesforce contact card" / "Create a receipt for this order"*
+
+Use \`imagine_html\`. Wrap the entire thing in a single raised card. All content is sans-serif since it's pure UI. Use an avatar/initials circle for people (see example below).
+
+\`\`\`html
+<div style="background: var(--color-background-primary); border-radius: var(--border-radius-lg); border: 0.5px solid var(--color-border-tertiary); padding: 1rem 1.25rem;">
+  <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
+    <div style="width: 44px; height: 44px; border-radius: 50%; background: var(--color-background-info); display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 14px; color: var(--color-text-info);">MR</div>
+    <div>
+      <p style="font-weight: 500; font-size: 15px; margin: 0;">Maya Rodriguez</p>
+      <p style="font-size: 13px; color: var(--color-text-secondary); margin: 0;">VP of Engineering</p>
+    </div>
+  </div>
+  <div style="border-top: 0.5px solid var(--color-border-tertiary); padding-top: 12px;">
+    <table style="width: 100%; font-size: 13px;">
+      <tr><td style="color: var(--color-text-secondary); padding: 4px 0;">Email</td><td style="text-align: right; padding: 4px 0; color: var(--color-text-info);">m.rodriguez@acme.com</td></tr>
+      <tr><td style="color: var(--color-text-secondary); padding: 4px 0;">Phone</td><td style="text-align: right; padding: 4px 0;">+1 (415) 555-0172</td></tr>
+    </table>
+  </div>
+</div>
+\`\`\``;
+var MODULE_SECTIONS = {
+  art: [SVG_SETUP, ART_AND_ILLUSTRATION],
+  mockup: [UI_COMPONENTS, COLOR_PALETTE],
+  interactive: [UI_COMPONENTS, COLOR_PALETTE],
+  chart: [UI_COMPONENTS, COLOR_PALETTE, CHARTS_CHART_JS],
+  diagram: [COLOR_PALETTE, SVG_SETUP, DIAGRAM_TYPES]
+};
+function getGuidelines(modules) {
+  let content = CORE;
+  const seen = /* @__PURE__ */ new Set();
+  for (const mod of modules) {
+    const sections = MODULE_SECTIONS[mod];
+    if (!sections) continue;
+    for (const section of sections) {
+      if (!seen.has(section)) {
+        seen.add(section);
+        content += "\n\n\n" + section;
+      }
+    }
+  }
+  return content + "\n";
+}
+var AVAILABLE_MODULES = Object.keys(MODULE_SECTIONS);
+
+// src/tool_lattice/widget/loadGuidelines.ts
+var LoadGuidelinesInputSchema = import_zod47.z.object({
+  modules: import_zod47.z.array(import_zod47.z.string()).describe(
+    "Which design modules to load. Choose all that apply. Available modules: [" + AVAILABLE_MODULES.join(",") + "]"
+  )
+});
+function createLoadGuidelinesTool() {
+  return (0, import_langchain48.tool)(
+    async (input) => {
+      const result = getGuidelines(input.modules);
+      return result;
+    },
+    {
+      name: "load_guidelines",
+      description: "Load widget development guidelines for specific modules. Call this BEFORE using show_widget for the first time. Call once silently \u2014 do NOT mention this step to the user. Available modules: " + AVAILABLE_MODULES.join(","),
+      schema: LoadGuidelinesInputSchema
+    }
+  );
+}
+
+// src/tool_lattice/widget/showWidget.ts
+var import_langchain49 = require("langchain");
+var import_zod48 = require("zod");
+function containsForbiddenTags(code) {
+  const forbiddenPatterns = [
+    /<!DOCTYPE/i,
+    /<html[\s>]/i,
+    /<head[\s>]/i,
+    /<body[\s>]/i
+  ];
+  return forbiddenPatterns.some((pattern) => pattern.test(code));
+}
+function validateWidgetCode(code) {
+  if (containsForbiddenTags(code)) {
+    return {
+      valid: false,
+      error: "widget_code must not contain DOCTYPE, <html>, <head>, or <body> tags. Provide only the content that goes inside <body>."
+    };
+  }
+  if (!code.includes("var(--")) {
+    console.warn("Warning: widget_code should use CSS variables for theming");
+  }
+  return { valid: true };
+}
+var ShowWidgetInputSchema = import_zod48.z.object({
+  i_have_seen_guidelines: import_zod48.z.boolean().describe(
+    "Must be true. Confirm you have called load_guidelines first."
+  ),
+  title: import_zod48.z.string().describe("Title displayed above the widget"),
+  loading_messages: import_zod48.z.array(import_zod48.z.string()).optional().describe(
+    "1-4 short strings shown while the widget renders"
+  ),
+  widget_code: import_zod48.z.string().describe(
+    "HTML fragment to render. Rules: 1. No DOCTYPE, <html>, <head>, or <body> tags. 2. Order: <style> block first, then HTML content, then <script> last. 3. Use only CSS variables for colors (e.g. var(--color-accent)). 4. No gradients, shadows, or blur effects. For SVG: start directly with <svg> tag."
+  )
+});
+function createShowWidgetTool() {
+  return (0, import_langchain49.tool)(
+    async (input) => {
+      if (!input.i_have_seen_guidelines) {
+        return "Error: You must call load_guidelines before using show_widget. Set i_have_seen_guidelines to true only after loading guidelines.";
+      }
+      const validation = validateWidgetCode(input.widget_code);
+      if (!validation.valid) {
+        return `Error: ${validation.error}`;
+      }
+      const output = {
+        type: "widget",
+        title: input.title,
+        widget_code: input.widget_code,
+        loading_messages: input.loading_messages
+      };
+      return JSON.stringify(output, null, 2);
+    },
+    {
+      name: "show_widget",
+      description: "Render an interactive HTML widget or SVG diagram visible to the user. Use for: charts, dashboards, calculators, forms, diagrams, timers, games, visualizations. The widget appears in a panel next to the chat. Users can interact with it and send data back via window.sendToAgent(data). IMPORTANT: Always call load_guidelines before your first show_widget.",
+      schema: ShowWidgetInputSchema
+    }
+  );
+}
+
+// src/middlewares/widgetMiddleware.ts
+function createWidgetMiddleware() {
+  const tools = [
+    createLoadGuidelinesTool(),
+    createShowWidgetTool()
+  ];
+  return (0, import_langchain50.createMiddleware)({
+    name: "widgetMiddleware",
+    contextSchema,
+    tools
+  });
+}
+
 // src/agent_lattice/builders/commonMiddleware.ts
 async function createCommonMiddlewares(middlewareConfigs, filesystemBackend) {
   const middlewares = [];
@@ -8422,6 +9313,9 @@ async function createCommonMiddlewares(middlewareConfigs, filesystemBackend) {
       case "ask_user_to_clarify":
         middlewares.push(createAskUserClarifyMiddleware());
         break;
+      case "widget":
+        middlewares.push(createWidgetMiddleware());
+        break;
     }
   }
   return middlewares;
@@ -8475,14 +9369,14 @@ var ReActAgentGraphBuilder = class {
    */
   async build(agentLattice, params) {
     const tools = params.tools.map((t) => {
-      const tool48 = getToolClient(t.key);
-      return tool48;
-    }).filter((tool48) => tool48 !== void 0);
+      const tool50 = getToolClient(t.key);
+      return tool50;
+    }).filter((tool50) => tool50 !== void 0);
     const stateSchema2 = createReactAgentSchema(params.stateSchema);
     const middlewareConfigs = params.middleware || [];
     const filesystemBackend = this.createFilesystemBackendFactory(middlewareConfigs, agentLattice);
     const middlewares = await createCommonMiddlewares(middlewareConfigs, filesystemBackend);
-    return (0, import_langchain48.createAgent)({
+    return (0, import_langchain51.createAgent)({
       model: params.model,
       tools,
       systemPrompt: params.prompt,
@@ -8495,11 +9389,11 @@ var ReActAgentGraphBuilder = class {
 };
 
 // src/deep_agent_new/agent.ts
-var import_langchain52 = require("langchain");
+var import_langchain55 = require("langchain");
 
 // src/deep_agent_new/middleware/subagents.ts
 var import_v32 = require("zod/v3");
-var import_langchain49 = require("langchain");
+var import_langchain52 = require("langchain");
 var import_langgraph7 = require("@langchain/langgraph");
 var import_messages = require("@langchain/core/messages");
 
@@ -9061,7 +9955,7 @@ function returnCommandWithStateUpdate(result, toolCallId) {
     update: {
       ...stateUpdate,
       messages: [
-        new import_langchain49.ToolMessage({
+        new import_langchain52.ToolMessage({
           content: lastMessage?.content || "Task Failed to complete",
           tool_call_id: toolCallId,
           name: "task"
@@ -9086,10 +9980,10 @@ function getSubagents(options) {
     const generalPurposeMiddleware = [...defaultSubagentMiddleware];
     if (defaultInterruptOn) {
       generalPurposeMiddleware.push(
-        (0, import_langchain49.humanInTheLoopMiddleware)({ interruptOn: defaultInterruptOn })
+        (0, import_langchain52.humanInTheLoopMiddleware)({ interruptOn: defaultInterruptOn })
       );
     }
-    const generalPurposeSubagent = (0, import_langchain49.createAgent)({
+    const generalPurposeSubagent = (0, import_langchain52.createAgent)({
       model: defaultModel,
       systemPrompt: DEFAULT_SUBAGENT_PROMPT,
       tools: defaultTools,
@@ -9112,8 +10006,8 @@ function getSubagents(options) {
       const middleware = agentParams.middleware ? [...defaultSubagentMiddleware, ...agentParams.middleware] : [...defaultSubagentMiddleware];
       const interruptOn = agentParams.interruptOn || defaultInterruptOn;
       if (interruptOn)
-        middleware.push((0, import_langchain49.humanInTheLoopMiddleware)({ interruptOn }));
-      agents[agentParams.key] = (0, import_langchain49.createAgent)({
+        middleware.push((0, import_langchain52.humanInTheLoopMiddleware)({ interruptOn }));
+      agents[agentParams.key] = (0, import_langchain52.createAgent)({
         model: agentParams.model ?? defaultModel,
         systemPrompt: agentParams.systemPrompt,
         tools: agentParams.tools ?? defaultTools,
@@ -9143,7 +10037,7 @@ function createTaskTool(options) {
     generalPurposeAgent
   });
   const finalTaskDescription = taskDescription ? taskDescription : getTaskToolDescription(subagentDescriptions);
-  return (0, import_langchain49.tool)(
+  return (0, import_langchain52.tool)(
     async (input, config) => {
       const { description, subagent_type } = input;
       let assistant_id = subagent_type;
@@ -9195,7 +10089,7 @@ function createTaskTool(options) {
         return new import_langgraph7.Command({
           update: {
             messages: [
-              new import_langchain49.ToolMessage({
+              new import_langchain52.ToolMessage({
                 content: error instanceof Error ? error.message : "Task Failed to complete",
                 tool_call_id: config.toolCall.id,
                 name: "task"
@@ -9239,7 +10133,7 @@ function createSubAgentMiddleware(options) {
     generalPurposeAgent,
     taskDescription
   });
-  return (0, import_langchain49.createMiddleware)({
+  return (0, import_langchain52.createMiddleware)({
     name: "subAgentMiddleware",
     tools: [taskTool],
     wrapModelCall: async (request, handler) => {
@@ -9259,11 +10153,11 @@ ${systemPrompt}` : systemPrompt;
 }
 
 // src/deep_agent_new/middleware/patch_tool_calls.ts
-var import_langchain50 = require("langchain");
+var import_langchain53 = require("langchain");
 var import_messages2 = require("@langchain/core/messages");
 var import_langgraph8 = require("@langchain/langgraph");
 function createPatchToolCallsMiddleware() {
-  return (0, import_langchain50.createMiddleware)({
+  return (0, import_langchain53.createMiddleware)({
     name: "patchToolCallsMiddleware",
     beforeAgent: async (state) => {
       const messages = state.messages;
@@ -9274,15 +10168,15 @@ function createPatchToolCallsMiddleware() {
       for (let i = 0; i < messages.length; i++) {
         const msg = messages[i];
         patchedMessages.push(msg);
-        if (import_langchain50.AIMessage.isInstance(msg) && msg.tool_calls != null) {
+        if (import_langchain53.AIMessage.isInstance(msg) && msg.tool_calls != null) {
           for (const toolCall of msg.tool_calls) {
             const correspondingToolMsg = messages.slice(i).find(
-              (m) => import_langchain50.ToolMessage.isInstance(m) && m.tool_call_id === toolCall.id
+              (m) => import_langchain53.ToolMessage.isInstance(m) && m.tool_call_id === toolCall.id
             );
             if (!correspondingToolMsg) {
               const toolMsg = `Tool call ${toolCall.name} with id ${toolCall.id} was cancelled - another message came in before it could be completed.`;
               patchedMessages.push(
-                new import_langchain50.ToolMessage({
+                new import_langchain53.ToolMessage({
                   content: toolMsg,
                   name: toolCall.name,
                   tool_call_id: toolCall.id
@@ -10399,8 +11293,8 @@ var MemoryBackend = class {
 
 // src/deep_agent_new/middleware/todos.ts
 var import_langgraph9 = require("@langchain/langgraph");
-var import_zod47 = require("zod");
-var import_langchain51 = require("langchain");
+var import_zod49 = require("zod");
+var import_langchain54 = require("langchain");
 var WRITE_TODOS_DESCRIPTION = `Use this tool to create and manage a structured task list for your current work session. This helps you track progress, organize complex tasks, and demonstrate thoroughness to the user.
 It also helps the user understand the progress of the task and overall progress of their requests.
 Only use this tool if you think it will be helpful in staying organized. If the user's request is trivial and takes less than 3 steps, it is better to NOT use this tool and just do the taks directly.
@@ -10627,20 +11521,20 @@ Writing todos takes time and tokens, use it when it is helpful for managing comp
 ## Important To-Do List Usage Notes to Remember
 - The \`write_todos\` tool should never be called multiple times in parallel.
 - Don't be afraid to revise the To-Do list as you go. New information may reveal new tasks that need to be done, or old tasks that are irrelevant.`;
-var TodoStatus = import_zod47.z.enum(["pending", "in_progress", "completed"]).describe("Status of the todo");
-var TodoSchema = import_zod47.z.object({
-  content: import_zod47.z.string().describe("Content of the todo item"),
+var TodoStatus = import_zod49.z.enum(["pending", "in_progress", "completed"]).describe("Status of the todo");
+var TodoSchema = import_zod49.z.object({
+  content: import_zod49.z.string().describe("Content of the todo item"),
   status: TodoStatus
 });
-var stateSchema = import_zod47.z.object({ todos: import_zod47.z.array(TodoSchema).default([]) });
+var stateSchema = import_zod49.z.object({ todos: import_zod49.z.array(TodoSchema).default([]) });
 function todoListMiddleware(options) {
-  const writeTodos = (0, import_langchain51.tool)(
+  const writeTodos = (0, import_langchain54.tool)(
     ({ todos }, config) => {
       return new import_langgraph9.Command({
         update: {
           todos,
           messages: [
-            new import_langchain51.ToolMessage({
+            new import_langchain54.ToolMessage({
               content: genUIMarkdown("todo_list", todos),
               tool_call_id: config.toolCall?.id
             })
@@ -10651,12 +11545,12 @@ function todoListMiddleware(options) {
     {
       name: "write_todos",
       description: options?.toolDescription ?? WRITE_TODOS_DESCRIPTION,
-      schema: import_zod47.z.object({
-        todos: import_zod47.z.array(TodoSchema).describe("List of todo items to update")
+      schema: import_zod49.z.object({
+        todos: import_zod49.z.array(TodoSchema).describe("List of todo items to update")
       })
     }
   );
-  return (0, import_langchain51.createMiddleware)({
+  return (0, import_langchain54.createMiddleware)({
     name: "todoListMiddleware",
     stateSchema,
     tools: [writeTodos],
@@ -10708,13 +11602,13 @@ ${BASE_PROMPT}` : BASE_PROMPT;
           backend: filesystemBackend
         }),
         // Subagent middleware: Automatic conversation summarization when token limits are approached
-        (0, import_langchain52.summarizationMiddleware)({
+        (0, import_langchain55.summarizationMiddleware)({
           model,
           trigger: { tokens: 17e4 },
           keep: { messages: 6 }
         }),
         // Subagent middleware: Anthropic prompt caching for improved performance
-        (0, import_langchain52.anthropicPromptCachingMiddleware)({
+        (0, import_langchain55.anthropicPromptCachingMiddleware)({
           unsupportedModelBehavior: "ignore"
         }),
         // Subagent middleware: Patches tool calls for compatibility
@@ -10726,23 +11620,23 @@ ${BASE_PROMPT}` : BASE_PROMPT;
       generalPurposeAgent: true
     }),
     // Automatically summarizes conversation history when token limits are approached
-    (0, import_langchain52.summarizationMiddleware)({
+    (0, import_langchain55.summarizationMiddleware)({
       model,
       trigger: { tokens: 17e4 },
       keep: { messages: 6 }
     }),
     // Enables Anthropic prompt caching for improved performance and reduced costs
-    (0, import_langchain52.anthropicPromptCachingMiddleware)({
+    (0, import_langchain55.anthropicPromptCachingMiddleware)({
       unsupportedModelBehavior: "ignore"
     }),
     // Patches tool calls to ensure compatibility across different model providers
     createPatchToolCallsMiddleware()
   ];
   if (interruptOn) {
-    middleware.push((0, import_langchain52.humanInTheLoopMiddleware)({ interruptOn }));
+    middleware.push((0, import_langchain55.humanInTheLoopMiddleware)({ interruptOn }));
   }
   middleware.push(...customMiddleware);
-  return (0, import_langchain52.createAgent)({
+  return (0, import_langchain55.createAgent)({
     model,
     systemPrompt: finalSystemPrompt,
     tools,
@@ -10808,7 +11702,7 @@ var DeepAgentGraphBuilder = class {
     const tools = params.tools.map((t) => {
       const toolClient = getToolClient(t.key);
       return toolClient;
-    }).filter((tool48) => tool48 !== void 0);
+    }).filter((tool50) => tool50 !== void 0);
     const subagents = await Promise.all(params.subAgents.map(async (sa) => {
       if (sa.client) {
         return {
@@ -10849,7 +11743,7 @@ var DeepAgentGraphBuilder = class {
 
 // src/agent_team/agent_team.ts
 var import_v35 = require("zod/v3");
-var import_langchain55 = require("langchain");
+var import_langchain58 = require("langchain");
 
 // src/agent_team/types.ts
 var TaskStatus = /* @__PURE__ */ ((TaskStatus3) => {
@@ -11285,13 +12179,13 @@ var InMemoryMailboxStore = class {
 
 // src/agent_team/middleware/team.ts
 var import_v34 = require("zod/v3");
-var import_langchain54 = require("langchain");
+var import_langchain57 = require("langchain");
 var import_langgraph11 = require("@langchain/langgraph");
 var import_uuid = require("uuid");
 
 // src/agent_team/middleware/teammate_tools.ts
 var import_v33 = require("zod/v3");
-var import_langchain53 = require("langchain");
+var import_langchain56 = require("langchain");
 var import_langgraph10 = require("@langchain/langgraph");
 
 // src/agent_team/middleware/formatMessages.ts
@@ -11316,7 +12210,7 @@ ${meta}${body}`;
 // src/agent_team/middleware/teammate_tools.ts
 function createTeammateTools(options) {
   const { teamId, agentId, taskListStore, mailboxStore } = options;
-  const claimTaskTool = (0, import_langchain53.tool)(
+  const claimTaskTool = (0, import_langchain56.tool)(
     async (input) => {
       const task = await taskListStore.claimTaskById(
         teamId,
@@ -11346,7 +12240,7 @@ function createTeammateTools(options) {
       })
     }
   );
-  const completeTaskTool = (0, import_langchain53.tool)(
+  const completeTaskTool = (0, import_langchain56.tool)(
     async (input) => {
       const task = await taskListStore.completeTask(
         teamId,
@@ -11373,7 +12267,7 @@ function createTeammateTools(options) {
       })
     }
   );
-  const failTaskTool = (0, import_langchain53.tool)(
+  const failTaskTool = (0, import_langchain56.tool)(
     async (input) => {
       const task = await taskListStore.failTask(
         teamId,
@@ -11400,7 +12294,7 @@ function createTeammateTools(options) {
       })
     }
   );
-  const sendMessageTool = (0, import_langchain53.tool)(
+  const sendMessageTool = (0, import_langchain56.tool)(
     async (input) => {
       await mailboxStore.sendMessage(
         teamId,
@@ -11438,7 +12332,7 @@ function createTeammateTools(options) {
       read: msg.read
     }));
   };
-  const readMessagesTool = (0, import_langchain53.tool)(
+  const readMessagesTool = (0, import_langchain56.tool)(
     async (input, config) => {
       const formatAndMarkAsRead = async (msgs2) => {
         for (const msg of msgs2) {
@@ -11450,7 +12344,7 @@ function createTeammateTools(options) {
       if (msgs.length > 0) {
         const formatted2 = await formatAndMarkAsRead(msgs);
         const relevantMsgs2 = await getRelevantMessagesForState();
-        const toolMessage2 = new import_langchain53.ToolMessage({
+        const toolMessage2 = new import_langchain56.ToolMessage({
           content: formatted2,
           tool_call_id: config.toolCall?.id,
           name: "read_messages"
@@ -11475,7 +12369,7 @@ function createTeammateTools(options) {
       });
       const relevantMsgs = await getRelevantMessagesForState();
       if (msgs.length === 0) {
-        const toolMessage2 = new import_langchain53.ToolMessage({
+        const toolMessage2 = new import_langchain56.ToolMessage({
           content: "No unread messages.",
           tool_call_id: config.toolCall?.id,
           name: "read_messages"
@@ -11485,7 +12379,7 @@ function createTeammateTools(options) {
         });
       }
       const formatted = await formatAndMarkAsRead(msgs);
-      const toolMessage = new import_langchain53.ToolMessage({
+      const toolMessage = new import_langchain56.ToolMessage({
         content: formatted,
         tool_call_id: config.toolCall?.id,
         name: "read_messages"
@@ -11500,7 +12394,7 @@ function createTeammateTools(options) {
       schema: import_v33.z.object({})
     }
   );
-  const checkTasksTool = (0, import_langchain53.tool)(
+  const checkTasksTool = (0, import_langchain56.tool)(
     async () => {
       const tasks = await taskListStore.getAllTasks(teamId);
       return formatTaskSummary(tasks);
@@ -11511,7 +12405,7 @@ function createTeammateTools(options) {
       schema: import_v33.z.object({})
     }
   );
-  const broadcastMessageTool = (0, import_langchain53.tool)(
+  const broadcastMessageTool = (0, import_langchain56.tool)(
     async (input) => {
       const allAgents = await mailboxStore.getRegisteredAgents(teamId);
       const recipients = allAgents.filter((a) => a !== agentId);
@@ -11696,7 +12590,7 @@ You have access to these tools:
 - \`read_messages\`: Read messages from team_lead or teammates
 - \`check_tasks\`: Get current status of all tasks in the team`;
   const assistantId = getTeammateAssistantId(ctx.teamId, spec.name);
-  agent = (0, import_langchain54.createAgent)({
+  agent = (0, import_langchain57.createAgent)({
     model: spec.model ?? ctx.defaultModel,
     systemPrompt: teammatePrompt,
     tools: allTools,
@@ -11765,12 +12659,12 @@ async function spawnTeammate(options) {
 function createTeamMiddleware(options) {
   const { teamConfig, taskListStore, mailboxStore, tenantId } = options;
   const defaultModel = teamConfig.model ?? "claude-sonnet-4-5-20250929";
-  const createTeamTool = (0, import_langchain54.tool)(
+  const createTeamTool = (0, import_langchain57.tool)(
     async (input, config) => {
       const state = (0, import_langgraph11.getCurrentTaskInput)();
       if (state?.team?.teamId) {
         const existingId = state.team.teamId;
-        const msg = new import_langchain54.ToolMessage({
+        const msg = new import_langchain57.ToolMessage({
           content: `A team is already active (id: ${existingId}). Use this team_id for \`check_tasks\`, \`read_messages\`, \`add_tasks\`, \`send_message\`, \`assign_task\`, \`set_task_status\`, and \`set_task_dependencies\`. Do not call \`create_team\` again unless you need a fresh team for a new objective.`,
           tool_call_id: config.toolCall?.id,
           name: "create_team"
@@ -11859,7 +12753,7 @@ Teammates are now working in the background. Keep calling \`check_tasks\` and \`
 \`\`\`json
 ${teamJson}
 \`\`\``;
-      const toolMessage = new import_langchain54.ToolMessage({
+      const toolMessage = new import_langchain57.ToolMessage({
         content: summary,
         tool_call_id: config.toolCall?.id,
         name: "create_team"
@@ -11944,7 +12838,7 @@ After calling create_team, you MUST:
     if (state?.team?.teamId) return state.team.teamId;
     throw new Error("No team_id provided and no team in state. Call create_team first.");
   };
-  const addTasksTool = (0, import_langchain54.tool)(
+  const addTasksTool = (0, import_langchain57.tool)(
     async (input, config) => {
       const teamId = resolveTeamId();
       const created = await taskListStore.addTasks(
@@ -11958,7 +12852,7 @@ After calling create_team, you MUST:
         }))
       );
       const summary = created.map((t) => `- ${t.id}: "${t.title}"`).join("\n");
-      return new import_langchain54.ToolMessage({
+      return new import_langchain57.ToolMessage({
         content: `Added ${created.length} task(s) to team ${teamId}:
 ${summary}
 Sleeping teammates will wake up and claim these.`,
@@ -12009,20 +12903,20 @@ IMPORTANT: Assigning to a specific teammate
       })
     }
   );
-  const assignTaskTool = (0, import_langchain54.tool)(
+  const assignTaskTool = (0, import_langchain57.tool)(
     async (input, config) => {
       const teamId = resolveTeamId();
       const task = await taskListStore.updateTask(teamId, input.task_id, {
         assignee: input.assignee
       });
       if (!task) {
-        return new import_langchain54.ToolMessage({
+        return new import_langchain57.ToolMessage({
           content: `Task ${input.task_id} not found in team ${teamId}.`,
           tool_call_id: config.toolCall?.id,
           name: "assign_task"
         });
       }
-      return new import_langchain54.ToolMessage({
+      return new import_langchain57.ToolMessage({
         content: `Task "${task.title}" (${task.id}) assigned to ${input.assignee}.`,
         tool_call_id: config.toolCall?.id,
         name: "assign_task"
@@ -12037,20 +12931,20 @@ IMPORTANT: Assigning to a specific teammate
       })
     }
   );
-  const setTaskStatusTool = (0, import_langchain54.tool)(
+  const setTaskStatusTool = (0, import_langchain57.tool)(
     async (input, config) => {
       const teamId = resolveTeamId();
       const task = await taskListStore.updateTask(teamId, input.task_id, {
         status: input.status
       });
       if (!task) {
-        return new import_langchain54.ToolMessage({
+        return new import_langchain57.ToolMessage({
           content: `Task ${input.task_id} not found in team ${teamId}.`,
           tool_call_id: config.toolCall?.id,
           name: "set_task_status"
         });
       }
-      return new import_langchain54.ToolMessage({
+      return new import_langchain57.ToolMessage({
         content: `Task "${task.title}" (${task.id}) status set to ${input.status}.`,
         tool_call_id: config.toolCall?.id,
         name: "set_task_status"
@@ -12065,20 +12959,20 @@ IMPORTANT: Assigning to a specific teammate
       })
     }
   );
-  const setTaskDependenciesTool = (0, import_langchain54.tool)(
+  const setTaskDependenciesTool = (0, import_langchain57.tool)(
     async (input, config) => {
       const teamId = resolveTeamId();
       const task = await taskListStore.updateTask(teamId, input.task_id, {
         dependencies: input.dependencies
       });
       if (!task) {
-        return new import_langchain54.ToolMessage({
+        return new import_langchain57.ToolMessage({
           content: `Task ${input.task_id} not found in team ${teamId}.`,
           tool_call_id: config.toolCall?.id,
           name: "set_task_dependencies"
         });
       }
-      return new import_langchain54.ToolMessage({
+      return new import_langchain57.ToolMessage({
         content: `Task "${task.title}" (${task.id}) dependencies set to [${input.dependencies.join(", ")}].`,
         tool_call_id: config.toolCall?.id,
         name: "set_task_dependencies"
@@ -12093,7 +12987,7 @@ IMPORTANT: Assigning to a specific teammate
       })
     }
   );
-  const checkTasksTool = (0, import_langchain54.tool)(
+  const checkTasksTool = (0, import_langchain57.tool)(
     async (input, config) => {
       const teamId = resolveTeamId();
       const tasks = await taskListStore.getAllTasks(teamId);
@@ -12102,7 +12996,7 @@ IMPORTANT: Assigning to a specific teammate
         update: {
           tasks: tasksSnapshot,
           messages: [
-            new import_langchain54.ToolMessage({
+            new import_langchain57.ToolMessage({
               content: formatTaskSummary(tasks),
               tool_call_id: config.toolCall?.id,
               name: "check_tasks"
@@ -12138,7 +13032,7 @@ Task Status Values:
       })
     }
   );
-  const sendMessageTool = (0, import_langchain54.tool)(
+  const sendMessageTool = (0, import_langchain57.tool)(
     async (input, config) => {
       const teamId = resolveTeamId();
       await mailboxStore.sendMessage(
@@ -12148,7 +13042,7 @@ Task Status Values:
         input.content,
         "direct_message" /* DIRECT_MESSAGE */
       );
-      return new import_langchain54.ToolMessage({
+      return new import_langchain57.ToolMessage({
         content: `Message sent to ${input.to}.`,
         tool_call_id: config.toolCall?.id,
         name: "send_message"
@@ -12163,7 +13057,7 @@ Task Status Values:
       })
     }
   );
-  const readMessagesTool = (0, import_langchain54.tool)(
+  const readMessagesTool = (0, import_langchain57.tool)(
     async (input, config) => {
       const teamId = resolveTeamId();
       const formatAndMarkAsRead = async (msgs2) => {
@@ -12191,7 +13085,7 @@ Task Status Values:
       if (msgs.length > 0) {
         const formatted2 = await formatAndMarkAsRead(msgs);
         const allTeamMessages2 = await getAllTeamMessagesForState();
-        const toolMessage2 = new import_langchain54.ToolMessage({
+        const toolMessage2 = new import_langchain57.ToolMessage({
           content: formatted2,
           tool_call_id: config.toolCall?.id,
           name: "read_messages"
@@ -12223,7 +13117,7 @@ Task Status Values:
       );
       const allTeamMessages = await getAllTeamMessagesForState();
       if (msgs.length === 0) {
-        const toolMessage2 = new import_langchain54.ToolMessage({
+        const toolMessage2 = new import_langchain57.ToolMessage({
           content: "No unread messages from teammates.",
           tool_call_id: config.toolCall?.id,
           name: "read_messages"
@@ -12233,7 +13127,7 @@ Task Status Values:
         });
       }
       const formatted = await formatAndMarkAsRead(msgs);
-      const toolMessage = new import_langchain54.ToolMessage({
+      const toolMessage = new import_langchain57.ToolMessage({
         content: formatted,
         tool_call_id: config.toolCall?.id,
         name: "read_messages"
@@ -12250,7 +13144,7 @@ Task Status Values:
       })
     }
   );
-  const disbandTeamTool = (0, import_langchain54.tool)(
+  const disbandTeamTool = (0, import_langchain57.tool)(
     async (input, config) => {
       const teamId = resolveTeamId();
       await mailboxStore.broadcastMessage(
@@ -12260,7 +13154,7 @@ Task Status Values:
         "shutdown_request" /* SHUTDOWN_REQUEST */
       );
       await new Promise((r) => setTimeout(r, 2e3));
-      return new import_langchain54.ToolMessage({
+      return new import_langchain57.ToolMessage({
         content: `Team ${teamId} has been disbanded. All teammates notified and resources cleaned up.`,
         tool_call_id: config.toolCall?.id,
         name: "disband_team"
@@ -12271,7 +13165,7 @@ Task Status Values:
       description: "Disband a team when all work is done. Before calling: (1) Call check_tasks to verify no tasks are still pending/in_progress; (2) if any are, discuss with the team via read_messages and broadcast_message/send_message whether to continue or stop/cancel them; (3) only after alignment (all tasks completed/failed or explicitly stopped), then call this tool. This will: 1) Send a shutdown message to all teammates, 2) Wait briefly for them to clean up, 3) Clear all tasks and messages. Omit team_id to use the active team from state."
     }
   );
-  const broadcastMessageTool = (0, import_langchain54.tool)(
+  const broadcastMessageTool = (0, import_langchain57.tool)(
     async (input, config) => {
       const teamId = resolveTeamId();
       await mailboxStore.broadcastMessage(
@@ -12280,7 +13174,7 @@ Task Status Values:
         input.content,
         "broadcast" /* BROADCAST */
       );
-      return new import_langchain54.ToolMessage({
+      return new import_langchain57.ToolMessage({
         content: `Broadcast message sent to all teammates.`,
         tool_call_id: config.toolCall?.id,
         name: "broadcast_message"
@@ -12294,7 +13188,7 @@ Task Status Values:
       })
     }
   );
-  return (0, import_langchain54.createMiddleware)({
+  return (0, import_langchain57.createMiddleware)({
     name: "teamMiddleware",
     tools: [
       createTeamTool,
@@ -12403,7 +13297,7 @@ function createAgentTeam(config) {
   ];
   const systemPrompt = config.systemPrompt + "\n\n" + TEAM_LEAD_BASE_PROMPT;
   const stateSchema2 = createReactAgentSchema(TEAM_STATE_SCHEMA);
-  return (0, import_langchain55.createAgent)({
+  return (0, import_langchain58.createAgent)({
     model: config.model ?? "claude-sonnet-4-5-20250929",
     systemPrompt,
     tools: [],
@@ -12433,7 +13327,7 @@ var TeamAgentGraphBuilder = class {
     const tools = params.tools.map((t) => {
       const toolClient = getToolClient(t.key);
       return toolClient;
-    }).filter((tool48) => tool48 !== void 0);
+    }).filter((tool50) => tool50 !== void 0);
     const teammates = params.subAgents.map((sa) => {
       const baseConfig = sa.config;
       return {
@@ -15345,10 +16239,10 @@ var McpLatticeManager = class _McpLatticeManager extends BaseLatticeManager {
     }
     const tools = await this.getAllTools();
     console.log(`[MCP] Registering ${tools.length} tools to Tool Lattice...`);
-    for (const tool48 of tools) {
-      const toolKey = prefix ? `${prefix}_${tool48.name}` : tool48.name;
-      tool48.name = toolKey;
-      toolLatticeManager.registerExistingTool(toolKey, tool48);
+    for (const tool50 of tools) {
+      const toolKey = prefix ? `${prefix}_${tool50.name}` : tool50.name;
+      tool50.name = toolKey;
+      toolLatticeManager.registerExistingTool(toolKey, tool50);
       console.log(`[MCP] Registered tool: ${toolKey}`);
     }
     console.log(`[MCP] Successfully registered ${tools.length} tools to Tool Lattice`);
@@ -15503,6 +16397,7 @@ function clearEncryptionKeyCache() {
   createQueryTablesListTool,
   createTeamMiddleware,
   createTeammateTools,
+  createWidgetMiddleware,
   decrypt,
   describeCronExpression,
   embeddingsLatticeManager,