synabun 2.0.10 → 2.1.0

package/neural-interface/lib/mcp-profile-servers.js

@@ -1,120 +0,0 @@
-/**
- * Pure logic for which external MCP servers a profile grants to a runtime,
- * and the write-guard applied to runtimes that bypass permission prompts.
- *
- * Kept free of filesystem access so the reconciliation rules — which decide
- * whether a user's de-selection survives a restart — can be tested directly.
- */
-
-function asObject(value) {
-  return value && typeof value === 'object' && !Array.isArray(value) ? value : {};
-}
-
-function builtinNames(registry) {
-  return new Set(
-    Object.entries(asObject(asObject(registry).servers))
-      .filter(([, info]) => asObject(info).builtin)
-      .map(([name]) => name)
-  );
-}
-
-/**
- * External servers the given profile (default: the active one) grants.
- * Builtins are excluded — runtimes inject SynaBun separately with their own pins.
- */
-export function selectProfileServerNames(registry, profileName) {
-  const reg = asObject(registry);
-  const servers = asObject(reg.servers);
-  const profile = asObject(asObject(reg.profiles)[profileName || reg.activeProfile]);
-  if (!Array.isArray(profile.servers)) return [];
-  const builtins = builtinNames(reg);
-  return profile.servers.filter(name => servers[name] && !builtins.has(name));
-}
-
-/**
- * Startup reconciliation. Mutates `registry` in place; returns true if anything changed.
- *
- * `profileDefaults.knownServers` is the migration marker. On the first run under this
- * scheme we only record the servers that already exist, so a server the user removed in
- * the External Servers grid stays removed. Afterwards, only genuinely new servers are
- * auto-assigned, and only when `autoAddNewServers` is on. Builtins are pruned from
- * every profile's list because runtimes never read them from there.
- */
-export function reconcileProfileServers(registry) {
-  const reg = asObject(registry);
-  let changed = false;
-
-  if (!reg.profileDefaults) {
-    reg.profileDefaults = { autoAddNewServers: true, excludeProfiles: ['core'] };
-    changed = true;
-  }
-  const defaults = reg.profileDefaults;
-  const exclude = new Set(defaults.excludeProfiles || []);
-  const builtins = builtinNames(reg);
-  const assignable = Object.keys(asObject(reg.servers)).filter(name => !builtins.has(name));
-  const seeded = Array.isArray(defaults.knownServers);
-  const known = new Set(seeded ? defaults.knownServers : assignable);
-
-  for (const [profileName, rawProfile] of Object.entries(asObject(reg.profiles))) {
-    const profile = asObject(rawProfile);
-    if (!Array.isArray(profile.servers)) { profile.servers = []; changed = true; }
-    const pruned = profile.servers.filter(name => !builtins.has(name));
-    if (pruned.length !== profile.servers.length) { profile.servers = pruned; changed = true; }
-    if (exclude.has(profileName) || !defaults.autoAddNewServers) continue;
-    for (const serverName of assignable) {
-      if (known.has(serverName)) continue;
-      if (!profile.servers.includes(serverName)) {
-        profile.servers.push(serverName);
-        changed = true;
-      }
-    }
-  }
-
-  const nextKnown = assignable.slice().sort();
-  if (!seeded || nextKnown.join(' ') !== defaults.knownServers.slice().sort().join(' ')) {
-    defaults.knownServers = nextKnown;
-    changed = true;
-  }
-  return changed;
-}
-
-/**
- * Tools that mutate ad state or spend budget, keyed by MCP server name.
- *
- * FleetView agents run with `--permission-mode bypassPermissions`, so the read-only
- * allowlist in .claude/settings.json does not apply to them. These are pushed as
- * `--disallowedTools` instead: agents keep full read/reporting access, while anything
- * that creates, edits, activates, or deletes stays with a human.
- */
-export const MCP_SERVER_WRITE_TOOLS = {
-  'meta-ads': [
-    'ads_create_campaign', 'ads_create_ad_set', 'ads_create_ad', 'ads_create_creative',
-    'ads_update_entity', 'ads_activate_entity', 'ads_boost_ig_post',
-    'ads_create_custom_audience', 'ads_update_custom_audience',
-    'ads_update_custom_audience_users', 'ads_delete_custom_audience',
-    'ads_catalog_create', 'ads_catalog_update_catalog',
-    'ads_catalog_product_create', 'ads_catalog_update_product', 'ads_catalog_delete_product',
-    'ads_catalog_create_product_set', 'ads_catalog_update_product_set', 'ads_catalog_product_set_delete',
-    'ads_catalog_create_product_feed', 'ads_catalog_update_product_feed',
-    'ads_catalog_create_product_feed_upload_session', 'ads_catalog_product_feed_delete',
-    'ads_catalog_create_feed_rule', 'ads_catalog_product_feed_delete_rule',
-    'ads_catalog_event_source_connect', 'ads_catalog_event_source_disconnect',
-    'ads_pixel_event_create', 'ads_pixel_event_update', 'ads_pixel_event_delete',
-    'ads_pixel_parameter_create', 'ads_pixel_parameter_update', 'ads_pixel_parameter_delete',
-    'ads_experiment_abtest_create_test', 'ads_experiment_abtest_update_test',
-    'ads_experiment_lift_create_test',
-  ],
-};
-
-/** Fully-qualified deny list for whichever servers an agent's --mcp-config actually grants. */
-export function buildAgentDisallowedTools(mcpConfigJson) {
-  let serverNames = [];
-  try {
-    serverNames = Object.keys(asObject(JSON.parse(mcpConfigJson || '{}')).mcpServers || {});
-  } catch { return []; }
-  const deny = [];
-  for (const server of serverNames) {
-    for (const tool of MCP_SERVER_WRITE_TOOLS[server] || []) deny.push(`mcp__${server}__${tool}`);
-  }
-  return deny;
-}

package/neural-interface/public/shared/ui-tutorial-draw.js

@@ -1,311 +0,0 @@
-// ═══════════════════════════════════════════
-// TUTORIAL DRAWING ENGINE
-// ═══════════════════════════════════════════
-//
-// Hand-drawn SVG primitives for the workspace tour, in the style of the
-// whiteboard. Zero knowledge of tutorial steps — pure drawing utilities.
-//
-// Core techniques:
-// - Catmull-Rom spline interpolation for smooth, organic curves
-// - Seeded PRNG for deterministic wobble (same seed = same wobble every time)
-// - SVG stroke-dashoffset transitions for the stroke-by-stroke "draw-in"
-//
-// Every primitive takes { duration, delay } in ms and returns { destroy }.
-// A duration of 0 (or prefers-reduced-motion) renders the finished stroke.
-
-const SVG_NS = 'http://www.w3.org/2000/svg';
-const EASE = 'cubic-bezier(0.2, 0, 0, 1)';
-
-/** Seeded random for consistent wobble per seed string. */
-export function seededRand(seed) {
-  let h = 0;
-  for (let i = 0; i < seed.length; i++) {
-    h = ((h << 5) - h + seed.charCodeAt(i)) | 0;
-  }
-  return () => {
-    h = (h * 16807 + 0) % 2147483647;
-    return (h & 0x7fffffff) / 2147483647;
-  };
-}
-
-/** Convert points to a smooth SVG path using Catmull-Rom → cubic bezier (open path). */
-export function pointsToSmoothPath(pts) {
-  if (pts.length === 0) return '';
-  if (pts.length === 1) return `M ${pts[0][0]} ${pts[0][1]}`;
-  if (pts.length === 2) return `M ${pts[0][0]} ${pts[0][1]} L ${pts[1][0]} ${pts[1][1]}`;
-
-  let d = `M ${pts[0][0]} ${pts[0][1]}`;
-  for (let i = 0; i < pts.length - 1; i++) {
-    const p0 = pts[Math.max(0, i - 1)];
-    const p1 = pts[i];
-    const p2 = pts[Math.min(pts.length - 1, i + 1)];
-    const p3 = pts[Math.min(pts.length - 1, i + 2)];
-    // 1/6 is the uniform Catmull-Rom tangent: evenly spaced points on a circle stay a circle.
-    const cp1x = p1[0] + (p2[0] - p0[0]) / 6;
-    const cp1y = p1[1] + (p2[1] - p0[1]) / 6;
-    const cp2x = p2[0] - (p3[0] - p1[0]) / 6;
-    const cp2y = p2[1] - (p3[1] - p1[1]) / 6;
-    d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2[0]} ${p2[1]}`;
-  }
-  return d;
-}
-
-// ═══════════════════════════════════════════
-// SVG HELPERS
-// ═══════════════════════════════════════════
-
-const instant = (duration) => duration <= 0 || window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-
-function createSvgPath(container, d, color, strokeWidth = 2) {
-  const path = document.createElementNS(SVG_NS, 'path');
-  path.setAttribute('d', d);
-  path.setAttribute('fill', 'none');
-  path.setAttribute('stroke', color);
-  path.setAttribute('stroke-width', String(strokeWidth));
-  path.setAttribute('stroke-linecap', 'round');
-  path.setAttribute('stroke-linejoin', 'round');
-  container.appendChild(path);
-  return path;
-}
-
-function animateStrokeDash(path, duration, delay) {
-  if (instant(duration)) return;
-  const length = path.getTotalLength();
-  path.style.strokeDasharray = String(length);
-  path.style.strokeDashoffset = String(length);
-  // Committing the start value makes the transition run from it.
-  path.getBoundingClientRect();
-  path.style.transition = `stroke-dashoffset ${duration}ms ${EASE} ${delay}ms`;
-  path.style.strokeDashoffset = '0';
-}
-
-// ═══════════════════════════════════════════
-// OUTLINE (around a target or the note)
-// ═══════════════════════════════════════════
-
-/** An ellipse inscribed in the rect, with a tail that overshoots the start. */
-function ringPath(rect, j) {
-  const cx = rect.left + rect.width / 2, cy = rect.top + rect.height / 2;
-  const rx = rect.width / 2, ry = rect.height / 2;
-  const pts = [], n = 16, total = Math.PI * 2 + 0.5;
-  for (let i = 0; i <= n; i++) {
-    const a = -2.2 + (i / n) * total;
-    // The tail drifts outwards, the way a pen leaves a circle.
-    const drift = i === n ? 3 : i === n - 1 ? 1.5 : 0;
-    pts.push([cx + Math.cos(a) * (rx + j() + drift), cy + Math.sin(a) * (ry + j() + drift)]);
-  }
-  return pointsToSmoothPath(pts);
-}
-
-/** A rounded rectangle, clockwise from the top edge: bowed sides, soft corners, closing past the start. */
-function boxPath(rect, radius, j) {
-  const { left: x1, top: y1, right: x2, bottom: y2 } = rect;
-  const r = Math.max(2, Math.min(radius, rect.width / 2, rect.height / 2));
-  const sx = x1 + r + Math.min(18, (rect.width - 2 * r) / 2);
-  let d = `M ${sx} ${y1 + j()}`, px = sx, py = y1;
-  const side = (bx, by) => {
-    const steps = Math.max(1, Math.round(Math.hypot(bx - px, by - py) / 110));
-    const ax = px, ay = py;
-    for (let i = 1; i <= steps; i++) {
-      const ex = ax + (bx - ax) * i / steps + (i < steps ? j() : 0);
-      const ey = ay + (by - ay) * i / steps + (i < steps ? j() : 0);
-      d += ` Q ${(px + ex) / 2 + j()} ${(py + ey) / 2 + j()} ${ex} ${ey}`;
-      px = ex; py = ey;
-    }
-  };
-  const corner = (cx, cy, ex, ey) => { d += ` Q ${cx + j()} ${cy + j()} ${ex} ${ey}`; px = ex; py = ey; };
-  side(x2 - r, y1); corner(x2, y1, x2, y1 + r);
-  side(x2, y2 - r); corner(x2, y2, x2 - r, y2);
-  side(x1 + r, y2); corner(x1, y2, x1, y2 - r);
-  side(x1, y1 + r); corner(x1, y1, x1 + r, y1 - 1);
-  // Close past the start, a little above the first stroke.
-  const tail = Math.min(sx + 22, x2 - r);
-  return `${d} Q ${(px + tail) / 2} ${y1 - 1.5 + j()} ${tail} ${y1 - 2.5}`;
-}
-
-/**
- * Draw a hand-drawn outline on a rect: a ring for compact targets, a rounded box otherwise.
- * @param {SVGElement} svg
- * @param {{left,top,right,bottom,width,height}} rect - where the stroke runs (padding included)
- * @param {Object} config - { shape: 'ring'|'box', color, strokeWidth, radius, wobble, wobbleSeed, duration, delay }
- * @returns {{ destroy: Function }}
- */
-export function createOutline(svg, rect, config) {
-  const {
-    shape = 'box',
-    color = 'rgba(255,255,255,0.3)',
-    strokeWidth = 2,
-    radius = 12,
-    wobble = 1.6,
-    wobbleSeed = 'outline',
-    duration = 250,
-    delay = 0,
-  } = config;
-
-  const rand = seededRand(wobbleSeed);
-  const j = () => (rand() - 0.5) * wobble;
-  const path = createSvgPath(svg, shape === 'ring' ? ringPath(rect, j) : boxPath(rect, radius, j), color, strokeWidth);
-  animateStrokeDash(path, duration, delay);
-
-  return {
-    elements: [path],
-    destroy() { path.remove(); },
-  };
-}
-
-// ═══════════════════════════════════════════
-// ANIMATED ARROW
-// ═══════════════════════════════════════════
-
-/**
- * Draw a hand-drawn animated arrow from point A to point B.
- * @param {SVGElement} svg - Container SVG element
- * @param {Object} config - { from:{x,y}, to:{x,y}, color, wobbleSeed, duration, delay, arrowheadSize }
- * @returns {{ destroy: Function }}
- */
-export function createAnimatedArrow(svg, config) {
-  const {
-    from, to,
-    color = 'rgba(255,255,255,0.35)',
-    wobbleSeed = 'arrow',
-    duration = 250,
-    delay = 0,
-    arrowheadSize = 12,
-    strokeWidth = 2,
-  } = config;
-
-  const rand = seededRand(wobbleSeed);
-  const dx = to.x - from.x;
-  const dy = to.y - from.y;
-  const dist = Math.hypot(dx, dy);
-  const perpAngle = Math.atan2(dy, dx) + Math.PI / 2;
-
-  // Control point: gentle perpendicular offset, capped so long arrows stay tight
-  const arcAmount = Math.min(dist * (0.12 + rand() * 0.1), 40) * (rand() < 0.5 ? -1 : 1);
-  const cpX = (from.x + to.x) / 2 + Math.cos(perpAngle) * arcAmount;
-  const cpY = (from.y + to.y) / 2 + Math.sin(perpAngle) * arcAmount;
-
-  // Quadratic bezier — clean, predictable arc
-  const bodyPath = createSvgPath(svg, `M ${from.x} ${from.y} Q ${cpX} ${cpY} ${to.x} ${to.y}`, color, strokeWidth);
-  animateStrokeDash(bodyPath, duration, delay);
-
-  // Arrowhead: two strokes at the tip, along the direction the arrow arrives in
-  const endAngle = Math.atan2(to.y - cpY, to.x - cpX);
-  const s = Math.min(arrowheadSize, Math.max(6, dist / 3));
-  const spread = 0.5;
-  const head = createSvgPath(svg,
-    `M ${to.x - Math.cos(endAngle - spread) * s} ${to.y - Math.sin(endAngle - spread) * s}`
-    + ` L ${to.x} ${to.y}`
-    + ` L ${to.x - Math.cos(endAngle + spread) * s} ${to.y - Math.sin(endAngle + spread) * s}`, color, strokeWidth);
-  animateStrokeDash(head, Math.min(duration, 120), delay + duration);
-
-  return {
-    elements: [bodyPath, head],
-    destroy() { bodyPath.remove(); head.remove(); },
-  };
-}
-
-// ═══════════════════════════════════════════
-// HAND-DRAWN UNDERLINE
-// ═══════════════════════════════════════════
-
-/**
- * Draw a wavy hand-drawn underline beneath a rect.
- * @param {SVGElement} svg
- * @param {{left,bottom,width}} rect
- * @param {Object} config - { color, wobbleSeed, duration, delay, offset }
- * @returns {{ destroy: Function }}
- */
-export function createHandDrawnUnderline(svg, rect, config) {
-  const {
-    color = 'rgba(255,255,255,0.3)',
-    wobbleSeed = 'underline',
-    duration = 200,
-    delay = 0,
-    offset = 4,
-  } = config;
-
-  const rand = seededRand(wobbleSeed);
-  const j = () => (rand() - 0.5) * 3;
-
-  const y = rect.bottom + offset;
-  const pts = [];
-  const segments = 5;
-  for (let i = 0; i <= segments; i++) {
-    pts.push([rect.left + rect.width * (i / segments) + j(), y + j()]);
-  }
-
-  const path = createSvgPath(svg, pointsToSmoothPath(pts), color, 2);
-  animateStrokeDash(path, duration, delay);
-
-  return {
-    elements: [path],
-    destroy() { path.remove(); },
-  };
-}
-
-// ═══════════════════════════════════════════
-// DOODLE LIBRARY
-// ═══════════════════════════════════════════
-
-const DOODLE_LIBRARY = {
-  sparkle: {
-    paths: [
-      // 4-pointed star
-      'M 20 4 Q 21 18 36 20 Q 21 22 20 36 Q 19 22 4 20 Q 19 18 20 4',
-      // Small dots around
-      'M 10 8 L 10.5 8.5',
-      'M 30 32 L 30.5 32.5',
-    ],
-  },
-  checkmark: {
-    paths: [
-      'M 6 18 Q 10 22 14 26 Q 20 14 30 8',
-    ],
-  },
-  alert: {
-    paths: [
-      // Triangle outline
-      'M 20 5 L 36 33 L 4 33 Z',
-      // Exclamation line and dot
-      'M 20 14 L 20 23',
-      'M 20 28 L 20.3 28.3',
-    ],
-  },
-};
-
-/**
- * Render a pre-defined SVG doodle (40×40 box) with stroke-dashoffset draw-in.
- * @param {SVGElement} svg
- * @param {string} doodleId - Key into DOODLE_LIBRARY
- * @param {Object} config - { x, y, scale, color, duration, delay }
- * @returns {{ destroy: Function }}
- */
-export function createDoodle(svg, doodleId, config) {
-  const doodle = DOODLE_LIBRARY[doodleId];
-  if (!doodle) return { elements: [], destroy() {} };
-
-  const {
-    x = 0, y = 0,
-    scale = 1,
-    color = 'rgba(255,255,255,0.3)',
-    duration = 200,
-    delay = 0,
-  } = config;
-
-  const g = document.createElementNS(SVG_NS, 'g');
-  g.setAttribute('transform', `translate(${x}, ${y}) scale(${scale})`);
-  svg.appendChild(g);
-
-  const elements = [g];
-  doodle.paths.forEach((pathD, i) => {
-    const path = createSvgPath(g, pathD, color, 2 / scale);
-    animateStrokeDash(path, duration, delay + i * 80);
-    elements.push(path);
-  });
-
-  return {
-    elements,
-    destroy() { g.remove(); },
-  };
-}

package/skills/leonardo/SKILL.md

@@ -1,168 +0,0 @@
----
-name: leonardo
-description: "Master Media Prompter — expert AI image & video creation via Leonardo.ai (100% browser-based)"
-argument-hint: "[video|image|quick <prompt>] or leave blank for guided creation"
----
-
-# Leonardo — Master Media Prompter (Browser Edition)
-
-You are an expert AI media prompter specializing in Leonardo.ai. The user has invoked `/leonardo`.
-
-**Input**: $ARGUMENTS
-
-**Base directory**: This skill's base directory is shown above as "Base directory for this skill". Store it as `$SKILL_DIR` — you'll need it to load module files.
-
-## How This Works
-
-This is a **100% browser-based** workflow. Leonardo.ai runs in SynaBun's headed browser. You configure everything through the browser UI — no API key needed.
-
-**Your tools:**
-- `leonardo_browser_navigate` — go to image/video/library pages
-- `leonardo_browser_generate` — fill prompt + click Generate
-- `leonardo_browser_download` — screenshot the current page
-- Generic browser tools (`browser_click`, `browser_fill`, `browser_snapshot`, `browser_screenshot`, `browser_evaluate`, `browser_press`, `browser_wait`) — configure ALL settings in the UI
-
-**Critical workflow:** Always configure settings (model, style, dimensions, etc.) BEFORE calling `leonardo_browser_generate`. The generate tool only fills the prompt and clicks Generate — it does NOT set any other options.
-
-## Runtime Compatibility
-
-- **Interactive choice prompt** means an interactive option card the user clicks — not plain text choices.
-  - **Claude Code (REQUIRED path):** `AskUserQuestion` is a deferred tool — its schema is not loaded by default. Before the first prompt in this skill, call `ToolSearch` with query `select:AskUserQuestion` to load it, then call `AskUserQuestion` with 2-4 options. NEVER write the choices as plain text — the sidepanel will render text as static markdown, not an interactive card.
-  - **OpenCode (REQUIRED path):** call the native `question` tool — the sidepanel renders it as an interactive card via the `/question.asked` event. NEVER write the choices as plain text.
-  - **Codex (REQUIRED path):** call `request_user_input` — the sidepanel renders it as an interactive card. NEVER write the choices as plain text.
-  - **Other runtimes:** only when no interactive tool exists, fall back to a concise plain-text multiple-choice question and wait for the user's reply.
-- **Load/read a module file** means: use whatever local file-reading mechanism exists in the current runtime. Do not depend on a tool literally being named `Read`.
-
----
-
-## Step 1 — Route or Quick Mode
-
-Parse `$ARGUMENTS` to determine the path:
-
-**Quick mode** (power users — skip questionnaire):
-- If args start with `quick` → extract the rest as a raw prompt. Jump to **Step 3: Execute** with defaults (Auto model, 1:1 dimensions for images, Motion 2.0 Fast for video).
-- `quick video <prompt>` → video defaults.
-- `quick image <prompt>` → image defaults.
-
-**Direct routing** (skip the menu):
-- `video` or `vid` → set `$TOPIC` to remaining text, jump to **Step 2a: Video Prompter**.
-- `image` or `img` or `photo` → set `$TOPIC` to remaining text, jump to **Step 2b: Image Prompter**.
-- `upscale` → jump to **Step 2c: Upscale**.
-
-**Interactive menu** (args empty or unrecognized):
-
-Use an interactive choice prompt with options:
-
-- **Create Video** — "Expert-guided video creation with full control over models, motion, styles, and prompt engineering"
-- **Create Image** — "Expert-guided image creation with model selection, style presets, dimensions, and prompt engineering"
-- **Quick Generate** — "Skip the questionnaire — just describe what you want and I'll handle the rest"
-- **Browse Library** — "View your recent Leonardo.ai generations"
-
----
-
-## Step 2a — Video Prompter
-
-Load/read the video prompter module:
-```
-Load/read $SKILL_DIR/modules/video-prompter.md
-```
-Follow that module's instructions completely. It will guide you through a comprehensive questionnaire using interactive choice prompts, covering: concept, model selection, motion controls, motion elements, style stacking (Vibe + Lighting + Color Theme), dimensions, prompt enhancement, negative prompt, and more. When the module produces final parameters, proceed to **Step 3: Execute**.
-
----
-
-## Step 2b — Image Prompter
-
-Load/read the image prompter module:
-```
-Load/read $SKILL_DIR/modules/image-prompter.md
-```
-Follow that module's instructions completely. It will guide you through a comprehensive questionnaire using interactive choice prompts, covering: concept, model selection, style preset, dimensions, number of images, and prompt engineering. When the module produces final parameters, proceed to **Step 3: Execute**.
-
----
-
-## Step 2c — Upscale
-
-1. Navigate to the upscaler page:
-   ```
-   leonardo_browser_navigate page: "upscaler"
-   ```
-2. Use `browser_snapshot` to see the upscaler UI.
-3. Ask the user to provide the image (they can upload or select from library).
-4. Use `browser_click` and `browser_fill` to configure upscale settings.
-5. Click the upscale button.
-
----
-
-## Step 3 — Execute (Browser Workflow)
-
-You now have a complete set of parameters from the prompter module. Execute them through the browser:
-
-### 3a. Navigate to the correct page
-```
-leonardo_browser_navigate page: "image"   # or "video"
-```
-
-### 3b. Wait for page to load, then take a snapshot
-```
-browser_wait loadState: "load" timeout: 10000
-browser_snapshot
-```
-
-### 3c. Configure ALL settings in the UI
-
-Load/read the browser guide module for detailed UI navigation instructions:
-```
-Load/read $SKILL_DIR/modules/browser-guide.md
-```
-
-Follow the browser guide to set each parameter via `browser_click`, `browser_fill`, `browser_evaluate`, etc. The guide maps every setting to its UI element.
-
-### 3c-ii. Upload reference images (if any)
-
-If the prompter module set `$REFERENCE_TYPE` and `$REFERENCE_PATHS` (or `$START_FRAME` / `$END_FRAME` for video):
-
-```
-leonardo_browser_reference type: "$REFERENCE_TYPE" filePaths: ["$PATH1", "$PATH2"] autoClear: true
-```
-
-This opens the reference panel, selects the correct reference type, uploads the image(s), and auto-clears them from the SynaBun image store. Use `browser_snapshot` after to verify the reference is applied.
-
-### 3d. Present summary to user before generating
-
-Show the user what you're about to generate:
-```
-Generating [type]...
-Prompt: "[the engineered prompt]"
-Model: [selected model]
-[Style/Dimensions/Motion controls if applicable]
-[Reference: $REFERENCE_TYPE with N image(s) — if applicable]
-```
-
-### 3e. Fill prompt and generate
-```
-leonardo_browser_generate prompt: "[engineered prompt]" type: "[image|video]"
-```
-
-### 3f. Monitor generation
-
-Wait for generation to complete:
-```
-browser_wait timeout: 10000
-browser_screenshot
-```
-
-Show the user the results and offer follow-up actions via an interactive choice prompt:
-
-- **Generate Again** — "Same settings, new generation"
-- **Modify & Regenerate** — "Tweak the prompt or settings"
-- **Upscale** — "Upscale this result" (images only)
-- **Animate** — "Turn this image into a video" (images only — navigate to video page with image as start frame)
-- **Download** — "Download the generated content"
-- **Done** — "Finished"
-
-If **Generate Again** → click Generate again (settings persist).
-If **Modify & Regenerate** → ask what to change, update settings in browser, re-generate.
-If **Upscale** → navigate to upscaler page with the image.
-If **Animate** → navigate to video page, use "Add Image Guidance" to set the image as start frame.
-If **Download** → click the download button on the generation.
-If **Done** → end.