ui.html

<style>
  :root {
    color-scheme: light dark;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: Inter, "SF Pro Text", -apple-system, sans-serif;
    font-size: 12px;
    color: #1e1e1e;
    background: #fff;
  }
  .tabs {
    display: flex;
    border-bottom: 1px solid #e6e6e6;
    overflow-x: auto;
  }
  .tab {
    flex: 1;
    min-width: 66px;
    padding: 10px 0;
    text-align: center;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 500;
    color: #6b6b6b;
    border-bottom: 2px solid transparent;
  }
  .tab.active {
    color: #18a0fb;
    border-bottom-color: #18a0fb;
  }
  .panel { display: none; padding: 12px; }
  .panel.active { display: block; }
  .node-name {
    font-weight: 600;
    margin-bottom: 8px;
    word-break: break-all;
  }
  .warning {
    background: #fff4e5;
    color: #92610a;
    border: 1px solid #ffdca0;
    border-radius: 4px;
    padding: 6px 8px;
    margin-bottom: 8px;
    font-size: 11px;
  }
  pre.code-block {
    background: #f5f5f5;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 10px;
    font-family: "SF Mono", Menlo, monospace;
    font-size: 11px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 380px;
    overflow-y: auto;
    margin: 0 0 8px 0;
  }
  .copy-btn {
    background: #18a0fb;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 11px;
    cursor: pointer;
  }
  .copy-btn:hover { background: #0d8ce0; }
  .copy-btn:disabled { background: #b8e0fd; cursor: default; }
  .empty-state {
    padding: 40px 16px;
    text-align: center;
    color: #8c8c8c;
  }
  .select-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-bottom: 1px solid #e6e6e6;
  }
  .select-row select {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    font-size: 11px;
    background: #fff;
    color: inherit;
  }
  .responsive-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
  }
  .responsive-toggle input { cursor: pointer; }
  .hint {
    color: #8c8c8c;
    font-size: 10px;
    margin: -4px 0 8px 0;
  }
  .status-ok { color: #1a7f37; }
  .status-error { color: #b3261e; }
  .debug-send-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid #e6e6e6;
  }
  .subtabs {
    display: flex;
    border-bottom: 1px solid #e6e6e6;
    margin: -12px -12px 12px -12px;
  }
  .subtab {
    flex: 1;
    padding: 8px 0;
    text-align: center;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 11px;
    font-weight: 500;
    color: #6b6b6b;
    border-bottom: 2px solid transparent;
  }
  .subtab.active {
    color: #18a0fb;
    border-bottom-color: #18a0fb;
  }
  .subpanel { display: none; }
  .subpanel.active { display: block; }
  .preview-label {
    font-weight: 600;
    font-size: 11px;
    margin: 8px 0 4px 0;
  }
  /* Window that crops the Figma export down to the node's own box — the export
     itself also covers any shadow/stroke that overhangs it. */
  .preview-figma-wrap {
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    background: repeating-conic-gradient(#e6e6e6 0% 25%, #fff 0% 50%) 50% / 16px 16px;
  }
  .preview-figma-img {
    display: block;
    transform-origin: top left;
  }
  .preview-iframe-wrap {
    overflow: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    /* Same checkerboard as the Figma image above, so a node with transparency
       is compared against an identical backdrop instead of plain white. */
    background: repeating-conic-gradient(#e6e6e6 0% 25%, #fff 0% 50%) 50% / 16px 16px;
  }
  .preview-render-host {
    transform-origin: top left;
    display: block;
  }
  .system-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 10px;
  }
  .system-stat, .system-card {
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 8px;
  }
  .system-stat strong {
    display: block;
    font-size: 17px;
    line-height: 20px;
  }
  .system-title {
    font-weight: 600;
    margin: 10px 0 6px;
  }
  .font-list, .component-list {
    display: grid;
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
  }
  .system-card-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }
  .system-card-name { font-weight: 600; }
  .system-card-meta {
    color: #8c8c8c;
    font-size: 10px;
    margin-top: 3px;
    word-break: break-word;
  }
  .font-status {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 2px 6px;
    font-size: 9px;
  }
  .font-status.available { background: #dcfce7; color: #166534; }
  .font-status.missing { background: #fee2e2; color: #991b1b; }
  .font-status.unknown { background: #f3f4f6; color: #6b7280; }
  .design-export-row {
    display: flex;
    gap: 6px;
    margin: 10px 0 6px;
  }
  .design-export-row select {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    background: #fff;
    color: inherit;
    font-size: 11px;
  }
  @media (prefers-color-scheme: dark) {
    body { background: #2c2c2c; color: #eaeaea; }
    .tabs { border-bottom-color: #444; }
    .tab { color: #9a9a9a; }
    .subtabs { border-bottom-color: #444; }
    .subtab { color: #9a9a9a; }
    pre.code-block { background: #1e1e1e; border-color: #444; color: #eaeaea; }
    .select-row { border-bottom-color: #444; }
    .select-row select { background: #1e1e1e; border-color: #444; color: #eaeaea; }
    .warning { background: #3a2e12; color: #f0c060; border-color: #5a4720; }
    .status-ok { color: #4ade80; }
    .status-error { color: #ff8f85; }
    .preview-figma-img { border-color: #444; }
    .preview-iframe-wrap { border-color: #444; }
    .debug-send-row { border-bottom-color: #444; }
    .system-stat, .system-card, .design-export-row select { border-color: #444; }
    .design-export-row select { background: #1e1e1e; }
    .font-status.available { background: #173b24; color: #86efac; }
    .font-status.missing { background: #451a1a; color: #fca5a5; }
    .font-status.unknown { background: #374151; color: #d1d5db; }
  }
</style>

<div class="tabs">
  <button class="tab active" data-tab="css">CSS</button>
  <button class="tab" data-tab="flutter">Flutter</button>
  <button class="tab" data-tab="html">HTML</button>
  <button class="tab" data-tab="design">Design System</button>
  <button class="tab" data-tab="preview">Preview</button>
  <button class="tab" data-tab="prototype">Prototype</button>
  <button class="tab" data-tab="settings">Settings</button>
</div>

<!-- Only shown for a multi-selection: CSS/Flutter/HTML/Preview are per-layer, so
     the picker chooses which one those tabs are showing. The Design System tab
     always covers the whole selection. -->
<div id="selection-row" class="select-row" style="display:none;">
  <select id="node-select"></select>
  <span id="selection-note" class="hint" style="margin:0;"></span>
</div>

<!-- Second, opt-in output alongside the fixed-pixel one above — never
     replaces it. Only affects CSS/Flutter/HTML text; Preview always shows the
     fixed-pixel render since it's compared against a fixed-size Figma export. -->
<div id="responsive-row" class="select-row" style="display:none;">
  <label class="responsive-toggle">
    <input type="checkbox" id="responsive-toggle" />
    Responsive (fluid)
  </label>
  <span class="hint" style="margin:0;">Uses Figma's own Fill/Hug/Constraints — not a guessed breakpoint.</span>
</div>

<div id="asset-mode-row" class="select-row" style="display:none;">
  <label class="responsive-toggle">
    <input type="checkbox" id="exclude-base64-toggle" />
    External image paths
  </label>
  <span class="hint" style="margin:0;">Keeps Base64 out of copied code; download the image files before using it.</span>
</div>

<!-- Fixed-geometry-only opt-in — see inlineSvgHtml in code.js. Ignored while
     Responsive is on, since that variant was never computed for it. -->
<div id="inline-svg-row" class="select-row" style="display:none;">
  <label class="responsive-toggle">
    <input type="checkbox" id="inline-svg-toggle" />
    Inline SVG icons
  </label>
  <span class="hint" style="margin:0;">
    Flattened vector icons become real, inspectable &lt;svg&gt; markup instead of a background image.
  </span>
</div>

<div id="empty-state" class="empty-state">Select an element on the canvas to inspect it.</div>

<div id="panels" style="display:none">
  <div class="panel active" id="panel-css">
    <div class="node-name" id="css-node-name"></div>
    <div class="hint">Full node tree — one CSS rule per generated parent and child element.</div>
    <div id="css-warnings"></div>
    <pre class="code-block" id="css-output"></pre>
    <button class="copy-btn" data-copy="css-output">Copy CSS</button>
  </div>

  <div class="panel" id="panel-flutter">
    <div class="node-name" id="flutter-node-name"></div>
    <pre class="code-block" id="flutter-output"></pre>
    <button class="copy-btn" data-copy="flutter-output">Copy Dart</button>
    <button class="copy-btn" id="flutter-assets-btn" style="display:none;">Download images + copy code</button>
    <div id="flutter-assets-hint" class="hint" style="display:none;">
      Downloads each image as a real file, then copies the code above with Image.asset('assets/...') paths instead of
      inline data — your browser may ask to allow multiple downloads.
    </div>
    <div id="flutter-pubspec-wrap" style="display:none;">
      <div class="system-title">pubspec.yaml additions</div>
      <pre class="code-block" id="flutter-pubspec-output"></pre>
      <button class="copy-btn" data-copy="flutter-pubspec-output">Copy pubspec snippet</button>
    </div>
  </div>

  <div class="panel" id="panel-html">
    <div class="node-name" id="html-node-name"></div>
    <div class="hint">Full node tree, recursively — one &lt;div&gt;/&lt;p&gt; per node plus a matching &lt;style&gt; block.</div>
    <pre class="code-block" id="html-output"></pre>
    <button class="copy-btn" data-copy="html-output">Copy HTML</button>
    <button class="copy-btn" id="html-assets-btn" style="display:none;">Download images + copy code</button>
    <div id="html-assets-hint" class="hint" style="display:none;">
      Downloads each image as a real file, then copies the code above with assets/... paths instead of inline data —
      your browser may ask to allow multiple downloads.
    </div>
  </div>

  <div class="panel" id="panel-design">
    <div class="node-name" id="design-node-name"></div>
    <div class="hint">Everything selected, combined. Variables and styles are read from Figma by name; values are only inferred where a layer has none bound.</div>
    <div id="design-summary" class="system-summary"></div>
    <div id="design-coverage" class="hint"></div>

    <div class="system-title">Figma variables</div>
    <div id="design-variables" class="component-list"></div>

    <div class="system-title">Figma styles</div>
    <div id="design-styles" class="component-list"></div>

    <div class="system-title">Components</div>
    <div id="design-component-library" class="component-list"></div>

    <div class="system-title">Fonts</div>
    <div id="design-fonts" class="font-list"></div>

    <div class="system-title">Token usage per layer</div>
    <div id="design-components" class="component-list"></div>

    <div class="design-export-row">
      <select id="design-export-format">
        <option value="css">CSS variables + tokens</option>
        <option value="flutter">Flutter theme + pubspec</option>
        <option value="components">Component scaffolds (Dart)</option>
        <option value="json">Design tokens JSON</option>
      </select>
      <button class="copy-btn" data-copy="design-output">Copy</button>
    </div>
    <pre class="code-block" id="design-output"></pre>
  </div>

  <div class="panel" id="panel-preview">
    <div class="node-name" id="preview-node-name"></div>
    <div class="hint">Real Figma render (ground truth) vs. the generated HTML rendered live — for spotting layout drift without leaving the plugin.</div>

    <div class="preview-label">Figma</div>
    <div id="preview-figma-wrap" class="preview-figma-wrap">
      <img id="preview-figma-img" class="preview-figma-img" />
    </div>
    <div id="preview-figma-missing" class="hint" style="display:none;">Preview export failed for this selection.</div>

    <div class="preview-label">Generated HTML (live)</div>
    <div id="preview-iframe-wrap" class="preview-iframe-wrap">
      <div id="preview-render-host" class="preview-render-host"></div>
    </div>
  </div>

  <div class="panel" id="panel-prototype">
    <div class="node-name">Prototype</div>
    <div class="hint">
      Bundles every top-level frame in the current selection into one clickable HTML file — Navigate/Overlay
      reactions become real click/hover behavior, and Smart Animate transitions tween matching layers by name.
    </div>
    <div id="prototype-empty" class="hint">Select 2 or more frames to build a prototype.</div>
    <div id="prototype-warnings"></div>
    <div id="prototype-iframe-wrap" class="preview-iframe-wrap" style="display:none;">
      <div id="prototype-render-host" class="preview-render-host"></div>
    </div>
    <pre class="code-block" id="prototype-output" style="display:none;"></pre>
    <button class="copy-btn" data-copy="prototype-output" id="prototype-copy-btn" style="display:none;">
      Copy HTML
    </button>
  </div>
</div>

<!-- Outside #panels on purpose: unlike the per-selection tabs above, Settings
     has to stay reachable with nothing selected. -->
<div class="panel" id="panel-settings">
  <div class="subtabs">
    <button class="subtab active" data-subtab="debug">Debug Connect</button>
    <button class="subtab" data-subtab="mcp">MCP Connect</button>
  </div>

  <div class="subpanel active" id="subpanel-debug">
    <div class="hint" style="margin-top:0;">
      Streams every selection (including the exported preview PNG) to a local debug server for filing bug reports.
      Off by default — see README.md for how to start <code>.debug-server/debug-server.py</code>.
    </div>
    <div id="debug-send-row" class="debug-send-row" style="padding:0; border-bottom:none;">
      <button class="copy-btn" id="debug-connect-btn">Connect</button>
      <span id="debug-send-status" class="hint" style="margin:0;">Not connected — every selection stays local until you connect.</span>
    </div>
  </div>

  <div class="subpanel" id="subpanel-mcp">
    <div class="hint" style="margin-top:0;">
      Runs a local MCP server so an AI client (e.g. Claude Desktop) can pull whatever it needs from the current Figma
      selection: generated CSS/HTML/Dart (fixed-pixel and responsive), design tokens, the clickable prototype bundle,
      and real asset/preview PNG files written straight to disk — enough to build the whole thing, not just read it.
      Requires Python 3 on your machine — off by default, and no data leaves it.
    </div>
    <div class="node-name" style="margin-bottom:4px;">1. Get the script</div>
    <div class="hint">
      Copy or download <code>mcp_server.py</code>, save it anywhere, then run once in a terminal (a virtual
      environment avoids the "externally-managed-environment" error plain <code>pip install</code> hits on modern
      macOS/Homebrew Python):
    </div>
    <pre class="code-block" id="mcp-setup-cmd">python3 -m venv venv
source venv/bin/activate
python3 -m ensurepip --upgrade
pip install mcp websockets
python3 mcp_server.py</pre>
    <button class="copy-btn" data-copy="mcp-setup-cmd">Copy commands</button>
    <div class="hint">
      The <code>ensurepip</code> line is only needed if <code>pip install</code> errors with
      <code>command not found: pip</code> (some Python builds don't bootstrap pip into a new venv automatically) —
      skip it if <code>pip --version</code> already works. If <code>ensurepip</code> itself then fails too (some
      Homebrew Python builds strip pip's bundled installer wheel), fall back to
      <code>curl -sS https://bootstrap.pypa.io/get-pip.py -o get-pip.py &amp;&amp; python3 get-pip.py</code> instead,
      then retry <code>pip install mcp websockets</code>. Next time, just
      <code>source venv/bin/activate &amp;&amp; python3 mcp_server.py</code> — no need to reinstall. In step 3's
      MCP client config, point <code>command</code> at this venv's own <code>venv/bin/python3</code>, not the
      system one.
    </div>
    <pre class="code-block" id="mcp-server-code" style="max-height:160px;">#!/usr/bin/env python3
"""Local MCP server for the FigmaToCode plugin.

Bridges an MCP client (e.g. Claude Desktop) to whatever is currently
selected in Figma. The FigmaToCode plugin's Settings &gt; MCP Connect panel
pushes the live selection to this process over a WebSocket; this script
re-exposes the last snapshot it received as MCP tools over stdio, and can
write real files (code, decoded image assets, the ground-truth preview PNG)
to disk — something the plugin's own browser-sandboxed UI can't do itself.

Setup:
    pip install mcp websockets
    python3 mcp_server.py

Then, in Figma: FigmaToCode &gt; Settings &gt; MCP Connect &gt; Connect.
And point your MCP client at this script over stdio, e.g. in Claude
Desktop's claude_desktop_config.json:
    "figma-to-code": {
      "command": "python3",
      "args": ["/absolute/path/to/mcp_server.py"]
    }
"""

import asyncio
import base64
import json
import os
import tempfile
import threading

import websockets

# mcp 2.x renamed FastMCP to MCPServer (different import path, same .tool()/
# .run() shape used below) — support whichever the user's `pip install mcp`
# actually resolved to instead of pinning a version.
try:
    from mcp.server.fastmcp import FastMCP as MCPServer
except ImportError:
    from mcp.server.mcpserver import MCPServer

WS_PORT = 8788

# The most recent selection and whole-page-scan payloads pushed by the
# plugin's ui.html over the WebSocket below. Only one Figma tab is ever
# expected to connect at a time, so a single shared value per kind (not a
# per-connection cache) is enough.
_latest_selection = None
_latest_page_overview = None

# Opening several editor windows on this project each spawns its own
# mcp_server.py (one per MCP client instance), and every one of them tries
# to bind WS_PORT for the Figma plugin to talk to — only the first can win
# that race. Rather than have the rest crash on "address already in use",
# whichever one is left holding the port writes every payload it receives
# here; the others poll this file instead of running their own server, so
# every window's MCP tools stay populated regardless of which process the
# plugin actually connects to. Local temp dir only, single-user trust model
# — same as the "only ever accepts connections from localhost" bridge below.
_SHARED_STATE_PATH = os.path.join(tempfile.gettempdir(), "figma-to-code-mcp-bridge-state.json")
_LEADER_RETRY_SECONDS = 5


async def _handle_plugin_connection(websocket):
    global _latest_selection, _latest_page_overview
    async for message in websocket:
        try:
            payload = json.loads(message)
        except ValueError:
            continue
        if payload.get("type") == "pageOverview":
            _latest_page_overview = payload
        else:
            _latest_selection = payload
        _write_shared_state()


def _write_shared_state():
    # Only ever called from the single process that currently holds
    # WS_PORT, so a plain write-then-replace (no locking) is enough; the
    # temp suffix plus os.replace keeps a concurrent reader from ever
    # seeing a half-written file.
    tmp_path = f"{_SHARED_STATE_PATH}.tmp-{os.getpid()}"
    with open(tmp_path, "w") as f:
        json.dump({"selection": _latest_selection, "pageOverview": _latest_page_overview}, f)
    os.replace(tmp_path, _SHARED_STATE_PATH)


def _read_shared_state():
    global _latest_selection, _latest_page_overview
    try:
        with open(_SHARED_STATE_PATH) as f:
            state = json.load(f)
    except (OSError, ValueError):
        return
    if state.get("selection") is not None:
        _latest_selection = state["selection"]
    if state.get("pageOverview") is not None:
        _latest_page_overview = state["pageOverview"]


def _run_websocket_bridge():
    # Own event loop in a background thread so it never blocks the MCP
    # server's stdio event loop started from __main__ below.
    async def main():
        while True:
            try:
                # websockets' 1 MiB default max_size drops any selection whose
                # payload (preview PNG + per-node CSS/HTML/Dart + image assets,
                # all base64) runs bigger than that — trivially easy with just
                # a couple of image-heavy layers selected. Unbounded is fine
                # here: this only ever accepts connections from localhost.
                async with websockets.serve(_handle_plugin_connection, "localhost", WS_PORT, max_size=None):
                    # Winning the bind makes this process the leader for as
                    # long as it stays alive.
                    await asyncio.Future()
            except OSError:
                # A sibling mcp_server.py (another open window) already owns
                # WS_PORT. Don't crash — fall back to polling its shared
                # state so this process's tools stay populated, and keep
                # retrying the bind in case that sibling exits, so leadership
                # (and direct plugin data) fails over automatically.
                _read_shared_state()
                await asyncio.sleep(_LEADER_RETRY_SECONDS)

    asyncio.run(main())


# Read by the MCP client as up-front, standing context for this whole
# server — unlike a tool docstring, which the client only sees once it has
# already decided to call that tool. Without this, a client with no other
# signal tends to fall back to asking the user for a screenshot or a written
# description instead of calling these tools, even though the *exact* code,
# layout data, and real assets are one tool call away.
INSTRUCTIONS = """\
This server gives you the live selection from a Figma plugin (FigmaToCode) — \
real generated code, design tokens, and image assets, not a picture to \
reverse-engineer. If you're about to ask the user for a screenshot, a design \
description, or "what should this look like" — stop and call \
list_selected_nodes() first. If it returns nodes, use this server instead of \
guessing.

Planning across a whole app (multiple screens), not just one selection: \
call list_page_screens() first. It's the closest thing to a screenshot of \
the whole file without pulling one — every top-level frame's name, position \
and size, grouped by Figma Section where the designer used one (a \
Section's name is usually the flow/feature it groups, e.g. "Onboarding" or \
"Checkout"). Use it to decide what exists, how screens relate spatially, \
and what order to tackle them in, before following the per-selection \
workflow below for whichever one you pick. Unlike the selection tools, this \
requires the user to have clicked Settings &gt; MCP Connect &gt; Scan page at \
least once — it isn't sent automatically, since it exposes the file's whole \
structure rather than just what's selected.

Standard workflow:
1. list_selected_nodes() — see what's selected, by index.
2. get_node_metadata(index) — width/height/warnings. Compare width/height \
against common device viewports (e.g. ~375-430 wide, ~700-930 tall) to tell \
a full-screen layout from an isolated component/card — a node sized like a \
phone screen should become the screen's root container, not something \
nested inside one.
3. get_design_tokens() / get_design_export(format) — pull real colors, \
type scale, and spacing before inventing any values of your own.
4. export_node(index, output_dir, output) or export_selection(output_dir, \
output) — write ready-to-use code plus a real assets/ folder (images \
already rewritten to real file paths, never left as inline base64) and a \
preview.png. Prefer this over get_node_code when you're actually building \
something, not just inspecting. get_selection_code(indices, output) is the \
lighter-weight option for inspecting several layers at once without writing \
files — it still strips inline base64 to an assets/ placeholder path, so it \
stays safe to use even with a small context window.
5. get_prototype_html() — when 2+ frames were selected together, this is \
the ground truth for navigation between screens (which reactions/links go \
where) — use it instead of guessing screen flow, and to see which layers \
Figma's own prototype keeps fixed across screens (a strong signal for a \
persistent bottom navigation bar or header).

Things Figma's fixed-pixel export does NOT encode, so infer them instead of \
copying pixels blindly:
- Scrolling: nothing marks a layer as scrollable. A tall stack of content \
inside a phone-sized frame almost always means the frame's body scrolls \
and any nav bar / tab bar pinned to the same edge across every screen in \
get_prototype_html should stay fixed (position: sticky/fixed) instead of \
scrolling with it.
- Full-bleed vs. centered: a node whose width/height matches a device \
viewport should fill the screen (100vw/100dvh or equivalent); don't leave \
it boxed in a fixed-pixel container sized to the Figma frame.
- Responsive: request output="responsive_css"/"responsive_html"/\
"responsive_dart" from get_node_code (or export_node/export_selection with \
a *_dart output for Flutter) for a fluid, Fill/Hug/Constraints-based layout \
instead of the fixed-pixel default — use this whenever the target is a real \
app/site meant to run at more than one exact size, not a pixel-perfect \
match of the Figma canvas.

The rule for everything visual — theme, color, type, spacing, reusable \
components, assets — is: it comes from Figma via these tools, always, on \
both web and mobile. Never invent a color/font-size/spacing value, and \
never hand-roll a component Figma already defines once and reuses. \
Everything else (business logic, state, data fetching, routing beyond what \
get_prototype_html encodes, backend integration) is normal engineering \
judgment — this server has no opinion on it.

Theme, once, shared by every platform you're building for:
- Call get_design_tokens() and get_design_export() for the *whole* \
selection before writing any component, not per-node — a theme built once \
and imported everywhere keeps web and mobile visually identical, instead of \
each screen/component silently drifting from the last.
- get_design_export(format="css") → CSS custom properties, for a web \
target (or feed those values into your own Tailwind config / styled-\
components theme / CSS-in-JS tokens object — same values, whichever your \
stack uses). get_design_export(format="flutter") → a ThemeData + pubspec \
font snippet, for a Flutter/mobile target. Same underlying tokens, just two \
renderings — use both if you're building both platforms from one selection.
- Afterwards, every hex color, font-size, and spacing value in the code you \
write should trace back to one of these tokens (a CSS var / Theme property \
/ Dart constant) — not a bare literal typed by hand. If a value doesn't \
appear in get_design_tokens() at all, that's a real signal it's a one-off \
override, not a token — keep it inline rather than inventing a fake token \
for it.

Reusable components:
- get_design_tokens()["componentLibrary"] lists every Figma component used \
in the selection with a usageCount. usageCount &gt; 1 means: build it once (a \
React/Vue/web component, a Flutter widget — whatever your stack's reuse \
unit is) and reuse it everywhere it appears, instead of copy-pasting the \
markup/widget tree at each occurrence.
- get_design_export(format="components") returns ready-made Dart widget \
scaffolds for that same component library — a starting point for the \
Flutter side; port the same componentization to whatever you're building \
for web instead of re-deriving it from scratch.

Assets, on every platform: always go through export_node/export_selection \
(never ship get_node_code's raw output as-is if it contains images) so \
every image lands as a real file under assets/ with the code already \
pointing at it — never inline base64 in anything you actually ship.

Verify before calling it done, every time:
1. Compare your result against the ground-truth render: export_node/\
export_selection already writes preview.png; open it (or save_preview_image \
for a single layer) and check your generated UI actually matches it — \
layout, spacing, colors — not just "looks plausible".
2. Re-check for stray hardcoded values: grep the code you wrote for hex \
colors / raw px-or-pt sizes that aren't one of get_design_tokens()'s \
values — anything left over either belongs in the theme or is a genuine \
one-off, decide which, don't leave it unexamined.
3. Confirm no leftover inline base64 made it into shipped code — only \
export_node/export_selection's rewritten output, never get_node_code's raw \
html/dart, should end up in a component that uses images.
4. Re-read get_node_metadata(index).warnings for every node you used and \
either address what they flag (a flattened layer, a missing font, etc.) or \
consciously decide it doesn't matter here — don't silently drop them.
"""

mcp = MCPServer("figma-to-code", instructions=INSTRUCTIONS)


def _selection_or_raise():
    if not _latest_selection or not _latest_selection.get("nodes"):
        raise ValueError(
            "No selection available yet. In Figma, open the FigmaToCode plugin, "
            "select a layer, and toggle Settings &gt; MCP Connect &gt; Connect."
        )
    return _latest_selection


def _node_or_raise(index: int) -&gt; dict:
    nodes = _selection_or_raise()["nodes"]
    if index &lt; 0 or index &gt;= len(nodes):
        raise ValueError(f"index {index} out of range: selection has {len(nodes)} node(s)")
    return nodes[index]


# code/output keys, by the `output` string a caller passes in.
_CODE_FIELDS = {
    "css": lambda n: "\n".join(f"{key}: {value};" for key, value in n["css"].items()),
    "html": lambda n: n["html"],
    "dart": lambda n: n["dart"],
    "inline_svg_html": lambda n: n["inlineSvgHtml"],
    "responsive_css": lambda n: "\n".join(f"{key}: {value};" for key, value in n["responsive"]["css"].items()),
    "responsive_html": lambda n: n["responsive"]["html"],
    "responsive_dart": lambda n: n["responsive"]["dart"],
}

# Per-output asset lists and the file extension code should be saved under.
_ASSET_FIELDS = {"html": "htmlAssets", "inline_svg_html": "htmlAssets", "dart": "dartAssets"}
_FILE_EXT = {
    "css": "css",
    "html": "html",
    "dart": "dart",
    "inline_svg_html": "html",
    "responsive_css": "css",
    "responsive_html": "html",
    "responsive_dart": "dart",
}


def _safe_dir(output_dir: str) -&gt; str:
    path = os.path.abspath(os.path.expanduser(output_dir))
    os.makedirs(path, exist_ok=True)
    return path


def _get_assets(node: dict, output: str) -&gt; list:
    key = _ASSET_FIELDS.get(output)
    return node.get(key, []) if key else []


def _write_assets(assets: list, assets_dir: str) -&gt; list:
    if not assets:
        return []
    os.makedirs(assets_dir, exist_ok=True)
    written = []
    for asset in assets:
        # basename() strips any accidental path segments out of a filename
        # that ultimately came from a Figma layer name.
        filename = os.path.basename(asset["filename"])
        file_path = os.path.join(assets_dir, filename)
        with open(file_path, "wb") as f:
            f.write(base64.b64decode(asset["base64"]))
        written.append(file_path)
    return written


# Mirrors rewriteHtmlWithAssetPaths/rewriteDartWithAssetPaths in ui.html
# exactly, so code exported here matches what the plugin's own "Download
# images + copy code" button produces — real files, not inline base64. The
# data URI (or, for Dart, the whole Image.memory/MemoryImage call) is unique
# per asset, so a literal string replace is exact and needs no regex.
def _rewrite_html_with_asset_paths(html: str, assets: list) -&gt; str:
    result = html
    for asset in assets:
        result = result.replace(asset["dataUri"], f"assets/{asset['filename']}")
    return result


def _rewrite_dart_with_asset_paths(dart: str, assets: list) -&gt; str:
    result = dart
    for asset in assets:
        if asset.get("fillOnly"):
            old_provider = f"MemoryImage(base64Decode('{asset['base64']}'))"
            new_provider = f"AssetImage('assets/{asset['filename']}')"
            result = result.replace(old_provider, new_provider)
            continue
        old_call = (
            f"Image.memory(base64Decode('{asset['base64']}'), width: {asset['width']}, "
            f"height: {asset['height']}, fit: BoxFit.fill, gaplessPlayback: true)"
        )
        new_call = (
            f"Image.asset('assets/{asset['filename']}', width: {asset['width']}, "
            f"height: {asset['height']}, fit: BoxFit.fill)"
        )
        result = result.replace(old_call, new_call)
    if "base64Decode(" not in result:
        result = result.replace("import 'dart:convert';\n", "")
    return result


def _rewrite_code_with_asset_paths(code: str, output: str, assets: list) -&gt; str:
    if output == "dart":
        return _rewrite_dart_with_asset_paths(code, assets)
    return _rewrite_html_with_asset_paths(code, assets)


@mcp.tool()
def list_page_screens() -&gt; dict:
    """Return a lightweight map of every top-level frame on the current
    Figma page, grouped by Figma Section where the designer used one — name,
    position (x/y), size (width/height), and visibility only, no generated
    code. Use this before diving into any one screen, to see how many
    screens the whole app has, which ones are grouped together (a Section's
    name is usually the flow/feature it groups), and how they're laid out on
    the canvas. Requires the user to have clicked Settings &gt; MCP Connect &gt;
    Scan page at least once — it isn't pushed automatically like the
    selection is, since it exposes the file's whole structure rather than
    just what's selected."""
    if not _latest_page_overview:
        raise ValueError(
            "No page overview yet. In Figma, open the FigmaToCode plugin and "
            "click Settings &gt; MCP Connect &gt; Scan page."
        )
    return {
        "pageName": _latest_page_overview["pageName"],
        "sections": _latest_page_overview["sections"],
        "ungroupedScreens": _latest_page_overview["ungroupedScreens"],
    }


@mcp.tool()
def list_selected_nodes() -&gt; list:
    """List every currently-selected layer's index, name, and type. Call this
    first to see what's selected before calling other tools by index."""
    selection = _selection_or_raise()
    return [
        {"index": i, "name": node["nodeName"], "type": node["nodeType"]}
        for i, node in enumerate(selection["nodes"])
    ]


@mcp.tool()
def get_node_metadata(index: int = 0) -&gt; dict:
    """Return a selected layer's size and any generation warnings, without the
    full generated code — use this to reason about layout before pulling code."""
    node = _node_or_raise(index)
    return {
        "nodeId": node["nodeId"],
        "nodeName": node["nodeName"],
        "nodeType": node["nodeType"],
        "width": node["width"],
        "height": node["height"],
        "warnings": node["warnings"],
    }


@mcp.tool()
def get_node_code(index: int = 0, output: str = "css") -&gt; str:
    """Return generated code for one selected layer. `output` is one of: css,
    html, dart, inline_svg_html, responsive_css, responsive_html,
    responsive_dart. `index` picks which selected layer (see
    list_selected_nodes). The non-responsive variants match the fixed-pixel
    size captured from Figma; the responsive_* variants are the fluid,
    Fill/Hug/Constraints-based layout instead."""
    node = _node_or_raise(index)
    getter = _CODE_FIELDS.get(output)
    if getter is None:
        raise ValueError(f"output must be one of: {', '.join(_CODE_FIELDS)}")
    return getter(node)


@mcp.tool()
def get_selection_code(indices: list = None, output: str = "html") -&gt; list:
    """Return generated code for several (or, by default, all) selected
    layers in one call, with any image assets replaced by an
    `assets/&lt;filename&gt;` placeholder path instead of inline base64 — safe to
    use with a low-context client, unlike raw get_node_code on an
    image-heavy selection. Each result also lists the assets that code
    references (filename + mimeType, no bytes); fetch the real files
    afterward with export_node_assets or export_node if you need them.
    `output` accepts the same values as get_node_code. `indices` (default:
    every selected node) picks which layers to include — see
    list_selected_nodes."""
    nodes = _selection_or_raise()["nodes"]
    if indices is None:
        indices = list(range(len(nodes)))
    if output not in _CODE_FIELDS:
        raise ValueError(f"output must be one of: {', '.join(_CODE_FIELDS)}")
    getter = _CODE_FIELDS[output]
    # Responsive variants reuse the same top-level asset lists as their
    # fixed-pixel counterpart — ui.html's own copy/download buttons do the
    # same lookup (see rewriteHtmlWithAssetPaths call sites).
    asset_key = _ASSET_FIELDS.get(output.replace("responsive_", "", 1))
    results = []
    for i in indices:
        node = _node_or_raise(i)
        code = getter(node)
        assets = node.get(asset_key, []) if asset_key else []
        if assets:
            code = _rewrite_code_with_asset_paths(code, "dart" if "dart" in output else "html", assets)
        results.append({
            "index": i,
            "name": node["nodeName"],
            "code": code,
            "assets": [{"filename": a["filename"], "mimeType": a["mimeType"]} for a in assets],
        })
    return results


@mcp.tool()
def list_node_assets(index: int = 0, output: str = "html") -&gt; list:
    """List the image assets a selected layer's generated code references
    (filename + MIME type, no image bytes) — use export_node_assets to
    actually save them as files."""
    node = _node_or_raise(index)
    key = _ASSET_FIELDS.get(output)
    if key is None:
        raise ValueError(f"output must be one of: {', '.join(sorted(set(_ASSET_FIELDS)))}")
    return [{"filename": a["filename"], "mimeType": a["mimeType"]} for a in node.get(key, [])]


@mcp.tool()
def export_node_assets(index: int, output_dir: str, output: str = "html") -&gt; list:
    """Decode a selected layer's image assets and write them as real files
    under output_dir (created if missing). Returns the absolute paths written."""
    node = _node_or_raise(index)
    return _write_assets(_get_assets(node, output), _safe_dir(output_dir))


@mcp.tool()
def export_node(index: int, output_dir: str, output: str = "html") -&gt; dict:
    """Export one selected layer as a ready-to-use folder under output_dir:
    a code file (html or dart) with every image it uses already rewritten to
    point at real files in an assets/ subfolder — not left as inline base64 —
    plus preview.png, the ground-truth Figma render. Use this for "pull this
    one component, images and all" requests; use export_selection instead for
    the whole current selection at once."""
    node = _node_or_raise(index)
    if output not in ("html", "dart"):
        raise ValueError("output must be 'html' or 'dart'")
    node_dir = _safe_dir(output_dir)
    assets = _get_assets(node, output)
    code = _rewrite_code_with_asset_paths(node[output], output, assets)
    code_path = os.path.join(node_dir, f"code.{_FILE_EXT[output]}")
    with open(code_path, "w") as f:
        f.write(code)
    written_assets = _write_assets(assets, os.path.join(node_dir, "assets"))
    preview_path = None
    if node.get("previewImage"):
        _, _, b64 = node["previewImage"].partition(",")
        preview_path = os.path.join(node_dir, "preview.png")
        with open(preview_path, "wb") as f:
            f.write(base64.b64decode(b64))
    return {"code": code_path, "assets": written_assets, "preview": preview_path}


@mcp.tool()
def save_preview_image(index: int, output_dir: str, filename: str = "preview.png") -&gt; str:
    """Save the ground-truth Figma render (the same PNG the plugin's Preview
    tab compares generated code against) for a selected layer to output_dir.
    Returns the absolute path written."""
    node = _node_or_raise(index)
    uri = node.get("previewImage")
    if not uri:
        raise ValueError("This node has no preview image (export may have failed).")
    _, _, b64 = uri.partition(",")
    path = os.path.join(_safe_dir(output_dir), os.path.basename(filename))
    with open(path, "wb") as f:
        f.write(base64.b64decode(b64))
    return path


@mcp.tool()
def get_design_tokens() -&gt; dict:
    """Return the raw design system collected from the current selection:
    Figma variables, styles, colors, gradients, typography, radii, shadows,
    spacing, fonts, and the component library — everything needed to build a
    consistent theme, not just one layer's code."""
    selection = _selection_or_raise()
    ds = selection["designSystem"]
    return {k: v for k, v in ds.items() if k != "exports"}


@mcp.tool()
def get_design_export(format: str = "css") -&gt; str:
    """Return a ready-to-use export built from the current selection's design
    system. `format` is one of: css (CSS custom properties + token rules),
    flutter (ThemeData + pubspec font snippet), components (Dart component
    scaffolds), json (design tokens as JSON)."""
    selection = _selection_or_raise()
    exports = selection["designSystem"]["exports"]
    if format not in exports:
        raise ValueError(f"format must be one of: {', '.join(exports)}")
    return exports[format]


@mcp.tool()
def get_prototype_html() -&gt; str:
    """Return the bundled, clickable multi-frame HTML prototype (Navigate/
    Overlay reactions become real click/hover behavior, Smart Animate
    transitions tween matching layers) — only available when 2+ top-level
    frames were selected together in Figma."""
    selection = _selection_or_raise()
    prototype = selection.get("prototype")
    if not prototype or not prototype.get("html"):
        raise ValueError(
            "No prototype available — select 2 or more top-level frames together in Figma "
            "(with MCP Connect on) and try again."
        )
    return prototype["html"]


@mcp.tool()
def export_selection(output_dir: str, output: str = "html") -&gt; dict:
    """One-shot export of the entire current selection to real files under
    output_dir: one subfolder per selected layer (code + assets/ + preview.png
    — see export_node), plus the design tokens export and prototype.html if
    the selection qualifies for one. `output` is 'html' or 'dart'. This is the
    fastest way to pull a whole selection down to build from — call
    list_selected_nodes first if you only want one specific layer, via
    export_node instead."""
    selection = _selection_or_raise()
    root = _safe_dir(output_dir)
    written = {"root": root, "nodes": [], "designTokens": None, "prototype": None}

    for i, node in enumerate(selection["nodes"]):
        node_dir = os.path.join(root, f"{i:02d}_{node['nodeName'] or 'node'}")
        node_export = export_node(i, node_dir, output)
        written["nodes"].append({"name": node["nodeName"], **node_export})

    tokens_format = "flutter" if output == "dart" else "css"
    tokens_ext = "dart" if tokens_format == "flutter" else "css"
    tokens_path = os.path.join(root, f"design-tokens.{tokens_ext}")
    with open(tokens_path, "w") as f:
        f.write(selection["designSystem"]["exports"][tokens_format])
    written["designTokens"] = tokens_path

    prototype = selection.get("prototype")
    if prototype and prototype.get("html"):
        prototype_path = os.path.join(root, "prototype.html")
        with open(prototype_path, "w") as f:
            f.write(prototype["html"])
        written["prototype"] = prototype_path

    return written


if __name__ == "__main__":
    threading.Thread(target=_run_websocket_bridge, daemon=True).start()
    mcp.run(transport="stdio")
</pre>
    <button class="copy-btn" data-copy="mcp-server-code">Copy mcp_server.py</button>
    <button class="copy-btn" id="mcp-download-btn">Download mcp_server.py</button>

    <div class="node-name" style="margin:12px 0 4px;">2. Connect this plugin to it</div>
    <div id="mcp-connect-row" class="debug-send-row" style="padding:0; border-bottom:none;">
      <button class="copy-btn" id="mcp-connect-btn">Connect</button>
      <span id="mcp-connect-status" class="hint" style="margin:0;">Not connected — start mcp_server.py first, then Connect.</span>
    </div>

    <div class="node-name" style="margin:12px 0 4px;">3. Point your MCP client at it</div>
    <div class="hint">Add it to your MCP client's config (stdio transport), e.g. Claude Desktop's <code>claude_desktop_config.json</code>, using the absolute path where you saved the script.</div>

    <div class="node-name" style="margin:12px 0 4px;">Optional: share the whole page, not just a selection</div>
    <div id="mcp-scan-row" class="debug-send-row" style="padding:0; border-bottom:none;">
      <button class="copy-btn" id="mcp-scan-btn">Scan page</button>
      <span id="mcp-scan-status" class="hint" style="margin:0;">Not scanned yet.</span>
    </div>
    <div class="hint">Sends a lightweight map of every top-level frame on the current page — name, position, size, and which Figma Section (if any) groups it — so an MCP client can plan across a whole app before diving into one screen. Never sent automatically like a selection is; click this each time the page's frames change.</div>
  </div>
</div>

<script>
  // The whole selection message, plus which of its layers the per-layer tabs are
  // currently showing.
  let currentSelection = null;
  // The last whole-page scan (see mcp-scan-btn below), independent of currentSelection.
  let currentPageOverview = null;
  let activeIndex = 0;

  function activePayload() {
    if (!currentSelection || !currentSelection.nodes || currentSelection.nodes.length === 0) return null;
    return currentSelection.nodes[Math.min(activeIndex, currentSelection.nodes.length - 1)] || null;
  }

  // Settings has to stay reachable with nothing selected, unlike the other
  // (per-selection) tabs — so the empty-state placeholder is suppressed
  // while it's active instead of being tied to #panels' own visibility.
  function isSettingsActive() {
    const activeTab = document.querySelector('.tab.active');
    return !!activeTab && activeTab.dataset.tab === 'settings';
  }

  function syncEmptyState() {
    document.getElementById('empty-state').style.display =
      !isSettingsActive() && !currentSelection ? 'block' : 'none';
  }

  document.querySelectorAll('.tab').forEach((tab) => {
    tab.addEventListener('click', () => {
      document.querySelectorAll('.tab').forEach((t) => t.classList.remove('active'));
      document.querySelectorAll('.panel').forEach((p) => p.classList.remove('active'));
      tab.classList.add('active');
      document.getElementById('panel-' + tab.dataset.tab).classList.add('active');
      syncEmptyState();
    });
  });

  document.querySelectorAll('.subtab').forEach((subtab) => {
    subtab.addEventListener('click', () => {
      document.querySelectorAll('.subtab').forEach((t) => t.classList.remove('active'));
      document.querySelectorAll('.subpanel').forEach((p) => p.classList.remove('active'));
      subtab.classList.add('active');
      document.getElementById('subpanel-' + subtab.dataset.subtab).classList.add('active');
    });
  });

  function copyText(text) {
    // Figma's plugin UI iframe doesn't grant the clipboard-write permission
    // navigator.clipboard needs. The fallback must run synchronously during the
    // click gesture; trying the async API first can leave the old clipboard in
    // place by the time its rejection arrives.
    return copyViaExecCommand(text).catch(() => {
      if (navigator.clipboard && navigator.clipboard.writeText) {
        return navigator.clipboard.writeText(text);
      }
      throw new Error('Clipboard access is unavailable');
    });
  }

  function copyViaExecCommand(text) {
    return new Promise((resolve, reject) => {
      const textarea = document.createElement('textarea');
      textarea.value = text;
      textarea.style.position = 'fixed';
      textarea.style.left = '-9999px';
      document.body.appendChild(textarea);
      textarea.focus();
      textarea.select();
      let ok = false;
      try {
        ok = document.execCommand('copy');
      } catch (e) {
        ok = false;
      }
      document.body.removeChild(textarea);
      ok ? resolve() : reject(new Error('execCommand copy failed'));
    });
  }

  document.querySelectorAll('.copy-btn[data-copy]').forEach((btn) => {
    btn.addEventListener('click', () => {
      const target = document.getElementById(btn.dataset.copy);
      const text = target.textContent;
      copyText(text)
        .then(() => {
          const original = btn.textContent;
          btn.textContent = 'Copied!';
          setTimeout(() => (btn.textContent = original), 1200);
        })
        .catch(() => {
          const original = btn.textContent;
          btn.textContent = 'Copy failed';
          setTimeout(() => (btn.textContent = original), 1200);
        });
    });
  });

  function formatCss(css) {
    return Object.keys(css)
      .map((key) => `  ${key}: ${css[key]};`)
      .join('\n');
  }

  function cssFromGeneratedHtml(html) {
    const open = html.lastIndexOf('\n<style>\n');
    const close = html.lastIndexOf('\n</style>');
    if (open === -1 || close <= open) return null;
    return html.slice(open + '\n<style>\n'.length, close);
  }

  function render(message) {
    currentSelection = message;
    activeIndex = 0;
    document.getElementById('panels').style.display = 'block';
    syncEmptyState();
    document.getElementById('responsive-row').style.display = 'flex';
    document.getElementById('asset-mode-row').style.display = 'flex';
    document.getElementById('inline-svg-row').style.display = 'flex';
    if (debugConnected) sendDebugPayload(message);
    if (mcpConnected) sendMcpPayload(message);

    renderSelectionPicker(message);
    renderDesignSystem(message.designSystem);
    renderActiveNode();
    renderPrototype(message);
  }

  // Whole-selection level, like the Design System tab — not per-layer like
  // CSS/Flutter/HTML/Preview, since the bundle only exists once ≥2 top-level
  // frames are selected together (see generatePrototypeBundle in code.js).
  function renderPrototype(message) {
    const empty = document.getElementById('prototype-empty');
    const wrap = document.getElementById('prototype-iframe-wrap');
    const output = document.getElementById('prototype-output');
    const copyBtn = document.getElementById('prototype-copy-btn');
    const warningsEl = document.getElementById('prototype-warnings');
    const bundle = message.prototype;

    warningsEl.innerHTML = '';
    if (!bundle) {
      empty.style.display = 'block';
      wrap.style.display = 'none';
      output.style.display = 'none';
      copyBtn.style.display = 'none';
      return;
    }

    empty.style.display = 'none';
    wrap.style.display = 'block';
    output.style.display = 'block';
    copyBtn.style.display = 'inline-block';
    output.textContent = bundle.html;
    (bundle.warnings || []).forEach((w) => {
      const div = document.createElement('div');
      div.className = 'warning';
      div.textContent = w;
      warningsEl.appendChild(div);
    });

    // Same CSP constraint as renderPreview: nested <iframe> is blocked, so this
    // renders into a shadow root instead. Unlike renderPreview's static markup,
    // this bundle ships a <script> for click/hover navigation — script elements
    // set via innerHTML are inert, so each one is recreated to actually run.
    const host = document.getElementById('prototype-render-host');
    if (!host.shadowRoot) host.attachShadow({ mode: 'open' });
    host.shadowRoot.innerHTML = bundle.html;
    // The bundled script queries `window.__figmaPrototypeRoot` instead of the
    // global `document` — from inside a shadow root, document.querySelectorAll
    // can't see these elements at all, so every listener would silently attach
    // to nothing. Set it right before each script (re-)runs synchronously;
    // it's read into a closure variable immediately, so clearing it after is safe.
    window.__figmaPrototypeRoot = host.shadowRoot;
    host.shadowRoot.querySelectorAll('script').forEach((oldScript) => {
      const newScript = document.createElement('script');
      newScript.textContent = oldScript.textContent;
      oldScript.replaceWith(newScript);
    });
    delete window.__figmaPrototypeRoot;
  }

  function renderSelectionPicker(message) {
    const row = document.getElementById('selection-row');
    const select = document.getElementById('node-select');
    const note = document.getElementById('selection-note');
    const nodes = message.nodes || [];

    if (message.selectionCount <= 1) {
      row.style.display = 'none';
      select.innerHTML = '';
      return;
    }

    row.style.display = 'flex';
    select.innerHTML = '';
    nodes.forEach((payload, index) => {
      const option = document.createElement('option');
      option.value = String(index);
      option.textContent = `${index + 1}/${nodes.length} · ${payload.nodeName}`;
      select.appendChild(option);
    });
    select.value = '0';
    note.textContent = message.skippedCount
      ? `+${message.skippedCount} more in the design system only`
      : `${message.selectionCount} layers selected`;
  }

  document.getElementById('node-select').addEventListener('change', (event) => {
    activeIndex = Number(event.target.value) || 0;
    renderActiveNode();
  });

  // Purely client-side — both variants already came in on the same message,
  // so flipping this never needs to ask the plugin thread for anything.
  let responsiveMode = false;
  document.getElementById('responsive-toggle').addEventListener('change', (event) => {
    responsiveMode = event.target.checked;
    renderActiveNode();
  });

  let excludeBase64 = false;
  document.getElementById('exclude-base64-toggle').addEventListener('change', (event) => {
    excludeBase64 = event.target.checked;
    renderActiveNode();
  });

  // Fixed-geometry-only opt-in (see inlineSvgHtml in code.js) — no variant was
  // ever computed for the fluid/responsive geometry, so this is simply
  // ignored while Responsive is checked rather than showing nothing.
  let inlineSvgMode = false;
  document.getElementById('inline-svg-toggle').addEventListener('change', (event) => {
    inlineSvgMode = event.target.checked;
    renderActiveNode();
  });

  function renderActiveNode() {
    const payload = activePayload();
    if (!payload) return;
    const source = { ...(responsiveMode && payload.responsive ? payload.responsive : payload) };
    if (inlineSvgMode && !responsiveMode && payload.inlineSvgHtml) source.html = payload.inlineSvgHtml;
    const htmlCode = excludeBase64
      ? rewriteHtmlWithAssetPaths(source.html, payload.htmlAssets || [])
      : source.html;
    const dartCode = excludeBase64
      ? rewriteDartWithAssetPaths(source.dart, payload.dartAssets || [])
      : source.dart;

    document.getElementById('css-node-name').textContent = payload.nodeName;
    document.getElementById('flutter-node-name').textContent = payload.nodeName;
    document.getElementById('html-node-name').textContent = payload.nodeName;
    document.getElementById('design-node-name').textContent =
      currentSelection.designSystem ? currentSelection.designSystem.name : payload.nodeName;
    document.getElementById('preview-node-name').textContent = payload.nodeName;

    // Preview always compares against the fixed-pixel render — a fluid layout
    // has no single "correct" size to hold the Figma export up against.
    renderPreview(payload);

    const warningsEl = document.getElementById('css-warnings');
    warningsEl.innerHTML = '';
    (payload.warnings || []).forEach((w) => {
      const div = document.createElement('div');
      div.className = 'warning';
      div.textContent = w;
      warningsEl.appendChild(div);
    });

    document.getElementById('css-output').textContent =
      cssFromGeneratedHtml(htmlCode) ||
      '.' + safeSelector(payload.nodeName) + ' {\n' + formatCss(source.css) + '\n}';
    document.getElementById('flutter-output').textContent = dartCode;
    document.getElementById('html-output').textContent = htmlCode;

    renderAssetControls(payload);
  }

  // ---------- Asset pipeline: real files instead of inline base64 ----------
  // A one-shot export action (not a live toggle like Responsive) — only
  // matters when the user is about to actually use the code, not while
  // browsing tabs. Every asset is already on the payload as {filename,
  // base64/dataUri, mimeType, ...}; everything below is pure client-side
  // string rewriting + a Blob download, no round trip to the plugin thread.

  function renderAssetControls(payload) {
    const htmlAssets = payload.htmlAssets || [];
    const dartAssets = payload.dartAssets || [];

    document.getElementById('html-assets-btn').style.display = htmlAssets.length > 0 ? 'inline-block' : 'none';
    document.getElementById('html-assets-hint').style.display = htmlAssets.length > 0 ? 'block' : 'none';

    document.getElementById('flutter-assets-btn').style.display = dartAssets.length > 0 ? 'inline-block' : 'none';
    document.getElementById('flutter-assets-hint').style.display = dartAssets.length > 0 ? 'block' : 'none';
    document.getElementById('flutter-pubspec-wrap').style.display = dartAssets.length > 0 ? 'block' : 'none';
    document.getElementById('flutter-pubspec-output').textContent = buildPubspecSnippet(dartAssets);
  }

  function buildPubspecSnippet(assetsManifest) {
    if (assetsManifest.length === 0) return '';
    const lines = ['flutter:', '  assets:'];
    assetsManifest.forEach((asset) => lines.push(`    - assets/${asset.filename}`));
    return lines.join('\n');
  }

  function downloadBase64File(filename, base64, mimeType) {
    const binary = atob(base64);
    const bytes = new Uint8Array(binary.length);
    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
    const blob = new Blob([bytes], { type: mimeType });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    // Give the browser a moment to actually start the download before the
    // object URL backing it disappears.
    setTimeout(() => URL.revokeObjectURL(url), 2000);
  }

  // The data URI is unique per asset, so a literal split/join is exact and
  // sidesteps regex-escaping a base64 blob.
  function rewriteHtmlWithAssetPaths(html, assetsManifest) {
    let result = html;
    assetsManifest.forEach((asset) => {
      result = result.split(asset.dataUri).join(`assets/${asset.filename}`);
    });
    return result;
  }

  // Reconstructs the exact `Image.memory(...)` call generateDartForNode
  // produces for this asset (same base64/width/height it was built from) and
  // swaps it for the Image.asset(...) equivalent — same idea as the HTML
  // rewrite, just a bigger substring since Dart needs the whole call replaced,
  // not only the encoded value.
  function rewriteDartWithAssetPaths(dart, assetsManifest) {
    let result = dart;
    assetsManifest.forEach((asset) => {
      if (asset.fillOnly) {
        const oldProvider = `MemoryImage(base64Decode('${asset.base64}'))`;
        const newProvider = `AssetImage('assets/${asset.filename}')`;
        result = result.split(oldProvider).join(newProvider);
        return;
      }
      const oldCall =
        `Image.memory(base64Decode('${asset.base64}'), width: ${asset.width}, height: ${asset.height}, ` +
        'fit: BoxFit.fill, gaplessPlayback: true)';
      const newCall = `Image.asset('assets/${asset.filename}', width: ${asset.width}, height: ${asset.height}, fit: BoxFit.fill)`;
      result = result.split(oldCall).join(newCall);
    });
    if (!result.includes('base64Decode(')) {
      result = result.replace("import 'dart:convert';\n", '');
    }
    return result;
  }

  async function exportAssetsAndCopy(assetsManifest, text, rewriteFn, btn) {
    const original = btn.textContent;
    btn.disabled = true;
    btn.textContent = 'Downloading...';
    for (let i = 0; i < assetsManifest.length; i++) {
      downloadBase64File(assetsManifest[i].filename, assetsManifest[i].base64, assetsManifest[i].mimeType);
      // Firing every download in the same tick makes some browsers silently
      // drop all but the first — a small stagger keeps each one landing.
      if (i < assetsManifest.length - 1) await new Promise((resolve) => setTimeout(resolve, 150));
    }
    try {
      await copyText(rewriteFn(text, assetsManifest));
      btn.textContent = `Downloaded ${assetsManifest.length} + copied!`;
    } catch (e) {
      btn.textContent = 'Downloaded, but copy failed';
    }
    setTimeout(() => {
      btn.textContent = original;
      btn.disabled = false;
    }, 1800);
  }

  document.getElementById('html-assets-btn').addEventListener('click', () => {
    const payload = activePayload();
    if (!payload) return;
    const source = responsiveMode && payload.responsive ? payload.responsive : payload;
    exportAssetsAndCopy(
      payload.htmlAssets || [],
      source.html,
      rewriteHtmlWithAssetPaths,
      document.getElementById('html-assets-btn')
    );
  });

  document.getElementById('flutter-assets-btn').addEventListener('click', () => {
    const payload = activePayload();
    if (!payload) return;
    const source = responsiveMode && payload.responsive ? payload.responsive : payload;
    exportAssetsAndCopy(
      payload.dartAssets || [],
      source.dart,
      rewriteDartWithAssetPaths,
      document.getElementById('flutter-assets-btn')
    );
  });

  // Small card: bold name on top, muted detail underneath, optional pill on the right.
  function systemCard(name, meta, badge) {
    const card = document.createElement('div');
    card.className = 'system-card';
    const row = document.createElement('div');
    row.className = 'system-card-row';
    const content = document.createElement('div');
    const nameEl = document.createElement('div');
    nameEl.className = 'system-card-name';
    nameEl.textContent = name;
    content.appendChild(nameEl);
    if (meta) {
      const metaEl = document.createElement('div');
      metaEl.className = 'system-card-meta';
      metaEl.textContent = meta;
      content.appendChild(metaEl);
    }
    row.appendChild(content);
    if (badge) {
      const badgeEl = document.createElement('span');
      badgeEl.className = 'font-status ' + (badge.tone || 'unknown');
      badgeEl.textContent = badge.text;
      row.appendChild(badgeEl);
    }
    card.appendChild(row);
    return card;
  }

  function renderEmptyNote(container, text) {
    const empty = document.createElement('div');
    empty.className = 'system-card-meta';
    empty.textContent = text;
    container.appendChild(empty);
  }

  function variableValueSummary(variable) {
    return variable.modeValues
      .map((mode) => {
        const value = mode.aliasToken ? `→ ${mode.alias}` : String(mode.value);
        return variable.modeValues.length > 1 ? `${mode.modeName}: ${value}` : value;
      })
      .join(' · ');
  }

  function renderDesignSystem(system) {
    const summary = document.getElementById('design-summary');
    const fontsEl = document.getElementById('design-fonts');
    const componentsEl = document.getElementById('design-components');
    const variablesEl = document.getElementById('design-variables');
    const stylesEl = document.getElementById('design-styles');
    const libraryEl = document.getElementById('design-component-library');
    const coverageEl = document.getElementById('design-coverage');
    summary.innerHTML = '';
    fontsEl.innerHTML = '';
    componentsEl.innerHTML = '';
    variablesEl.innerHTML = '';
    stylesEl.innerHTML = '';
    libraryEl.innerHTML = '';

    const variables = (system && system.variables) || [];
    const styles = (system && system.styles) || [];
    const library = (system && system.componentLibrary) || [];
    const coverage = (system && system.coverage) || null;

    coverageEl.textContent = coverage
      ? `${coverage.bound}/${coverage.total} tokens (${coverage.ratio}%) come from a Figma variable or style — the rest were inferred from raw values.`
      : '';

    if (variables.length === 0) {
      renderEmptyNote(variablesEl, 'No bound variables in this selection — token names below are inferred from values.');
    } else {
      variables.forEach((variable) => {
        variablesEl.appendChild(
          systemCard(
            variable.name,
            `--${variable.token} · ${variableValueSummary(variable)}${variable.collection ? ` · ${variable.collection}` : ''}`,
            { text: `${variable.usageCount}×`, tone: 'available' }
          )
        );
      });
    }

    if (styles.length === 0) {
      renderEmptyNote(stylesEl, 'No Figma styles applied in this selection.');
    } else {
      styles.forEach((style) => {
        stylesEl.appendChild(
          systemCard(style.name, `${style.roles.join(', ')} · --${style.token}`, {
            text: `${style.usageCount}×`,
            tone: 'available',
          })
        );
      });
    }

    if (library.length === 0) {
      renderEmptyNote(libraryEl, 'No component instances in this selection.');
    } else {
      library.forEach((component) => {
        const axes = Object.keys(component.variantAxes).map(
          (axis) => `${axis}=${component.variantAxes[axis].join('|')}`
        );
        const props = Object.keys(component.properties).filter((name) => !(name in component.variantAxes));
        const meta = [axes.join(', '), props.length ? `props: ${props.join(', ')}` : '']
          .filter(Boolean)
          .join(' · ');
        libraryEl.appendChild(
          systemCard(component.name, meta || 'No variants or properties', {
            text: `${component.usageCount}×`,
            tone: component.remote ? 'available' : 'unknown',
          })
        );
      });
    }

    [
      ['Variables', variables.length],
      ['Styles', styles.length],
      ['Components', library.length],
      ['Fonts', (system && system.fonts.length) || 0],
      ['Type styles', (system && system.typography.length) || 0],
      ['Colors', (system && system.colors.length) || 0],
    ].forEach(([label, value]) => {
      const card = document.createElement('div');
      card.className = 'system-stat';
      const strong = document.createElement('strong');
      strong.textContent = value;
      const text = document.createElement('span');
      text.textContent = label;
      card.appendChild(strong);
      card.appendChild(text);
      summary.appendChild(card);
    });

    if (!system || system.fonts.length === 0) {
      const empty = document.createElement('div');
      empty.className = 'system-card-meta';
      empty.textContent = 'No text fonts found in this selection.';
      fontsEl.appendChild(empty);
    } else {
      system.fonts.forEach((font) => {
        const card = document.createElement('div');
        card.className = 'system-card';
        const row = document.createElement('div');
        row.className = 'system-card-row';
        const content = document.createElement('div');
        const name = document.createElement('div');
        name.className = 'system-card-name';
        name.textContent = font.family;
        const meta = document.createElement('div');
        meta.className = 'system-card-meta';
        meta.textContent = font.styles
          .map((style) => `${style.figmaStyle} · ${style.weight}${style.fontStyle !== 'normal' ? ' · italic' : ''}`)
          .join(', ');
        content.appendChild(name);
        content.appendChild(meta);

        const status = document.createElement('span');
        status.className =
          'font-status ' + (font.available === true ? 'available' : font.available === false ? 'missing' : 'unknown');
        status.textContent = font.available === true ? 'Available' : font.available === false ? 'Missing' : 'Unknown';
        row.appendChild(content);
        row.appendChild(status);
        card.appendChild(row);
        fontsEl.appendChild(card);
      });
    }

    const mapped = (system && system.components) || [];
    if (mapped.length === 0) {
      const empty = document.createElement('div');
      empty.className = 'system-card-meta';
      empty.textContent = 'No component token usage found.';
      componentsEl.appendChild(empty);
    } else {
      mapped.forEach((component) => {
        const card = document.createElement('div');
        card.className = 'system-card';
        const name = document.createElement('div');
        name.className = 'system-card-name';
        name.textContent = component.nodeName;
        const meta = document.createElement('div');
        meta.className = 'system-card-meta';
        const tokens = component.typography.concat(component.colors);
        meta.textContent = tokens.length ? tokens.join(' · ') : 'No mapped tokens';
        card.appendChild(name);
        card.appendChild(meta);
        componentsEl.appendChild(card);
      });
    }
    updateDesignExport();
  }

  function updateDesignExport() {
    const format = document.getElementById('design-export-format').value;
    const exports = currentSelection && currentSelection.designSystem && currentSelection.designSystem.exports;
    document.getElementById('design-output').textContent = (exports && exports[format]) || '';
  }

  document.getElementById('design-export-format').addEventListener('change', updateDesignExport);

  function renderPreview(payload) {
    const img = document.getElementById('preview-figma-img');
    const figmaWrap = document.getElementById('preview-figma-wrap');
    const missingMsg = document.getElementById('preview-figma-missing');
    if (payload.previewImage) {
      img.src = payload.previewImage;
      img.style.display = 'block';
      figmaWrap.style.display = 'block';
      missingMsg.style.display = 'none';
    } else {
      img.removeAttribute('src');
      figmaWrap.style.display = 'none';
      missingMsg.style.display = 'block';
    }

    // Figma's plugin UI iframe blocks nested iframes via CSP (frame-src), so
    // a <iframe srcdoc> here just renders blank with no visible error. Shadow
    // DOM sidesteps that entirely — it's plain DOM in the same document, just
    // style-encapsulated so the generated CSS's generic class names (.text,
    // .icon, ...) can't clash with this page's own styles in either direction.
    const host = document.getElementById('preview-render-host');
    const wrap = document.getElementById('preview-iframe-wrap');
    const nodeWidth = payload.width || 1;
    const nodeHeight = payload.height || 1;

    if (!host.shadowRoot) host.attachShadow({ mode: 'open' });
    host.shadowRoot.innerHTML = payload.html;
    host.style.width = `${nodeWidth}px`;
    host.style.height = `${nodeHeight}px`;

    // Scale both panes by the same factor to fit the panel width, once it's
    // actually laid out (immediately after unhiding the panel, clientWidth is
    // still 0).
    requestAnimationFrame(() => {
      const containerWidth = wrap.parentElement.clientWidth || nodeWidth;
      const scale = Math.min(1, containerWidth / nodeWidth);

      host.style.transform = `scale(${scale})`;
      wrap.style.width = `${nodeWidth * scale}px`;
      wrap.style.height = `${nodeHeight * scale}px`;

      // Crop the export back to the node box and match the same scale, so the
      // two panes show the identical region at the identical size.
      const crop = payload.previewCrop;
      if (payload.previewImage && crop) {
        const px = scale / crop.scale;
        img.style.width = `${crop.imageWidth * px}px`;
        img.style.height = `${crop.imageHeight * px}px`;
        img.style.marginLeft = `${-crop.offsetX * px}px`;
        img.style.marginTop = `${-crop.offsetY * px}px`;
        figmaWrap.style.width = `${nodeWidth * scale}px`;
        figmaWrap.style.height = `${nodeHeight * scale}px`;
      } else if (payload.previewImage) {
        // No crop info (older payload / node without bounds) — show it whole.
        img.style.width = `${nodeWidth * scale}px`;
        img.style.height = 'auto';
        img.style.marginLeft = '0';
        img.style.marginTop = '0';
        figmaWrap.style.width = `${nodeWidth * scale}px`;
        figmaWrap.style.height = 'auto';
      }
    });
  }

  function safeSelector(name) {
    let base = (name || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
    if (!base) base = 'element';
    if (/^[0-9]/.test(base)) base = `n-${base}`;
    return base;
  }

  // `message` is only ever passed for the 'error' case below — every other
  // caller keeps today's plain "select something" copy. Previously any
  // exception anywhere in buildSelectionPayload (a bug in the newest,
  // least-tested code as much as an old one) surfaced as this same blank
  // state with zero indication of what broke or why — showing the real
  // message here doesn't change the (already-broken) behavior for anything
  // that already worked, it just stops it from being silent.
  function showEmpty(message) {
    currentSelection = null;
    activeIndex = 0;
    document.getElementById('empty-state').textContent =
      message || 'Select an element on the canvas to inspect it.';
    document.getElementById('panels').style.display = 'none';
    syncEmptyState();
    document.getElementById('selection-row').style.display = 'none';
    document.getElementById('responsive-row').style.display = 'none';
    document.getElementById('asset-mode-row').style.display = 'none';
    document.getElementById('inline-svg-row').style.display = 'none';
    renderPrototype({ prototype: null });
  }

  // Once connected, every new selection (render() call) gets pushed to the
  // local debug server automatically — no per-selection click needed.
  let debugConnected = false;

  async function sendDebugPayload(payload) {
    const status = document.getElementById('debug-send-status');
    status.className = 'hint';
    status.textContent = 'Sending...';
    try {
      const res = await fetch('http://localhost:8787/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (!res.ok) throw new Error('HTTP ' + res.status);
      status.className = 'hint status-ok';
      const label =
        payload.selectionCount > 1 ? `${payload.selectionCount} layers` : `"${payload.nodeName}"`;
      status.textContent = `Connected — sent ${label} ✓`;
    } catch (err) {
      status.className = 'hint status-error';
      status.textContent = 'Send failed — is the debug server running? ' + (err && err.message ? err.message : err);
    }
  }

  document.getElementById('debug-connect-btn').addEventListener('click', () => {
    const btn = document.getElementById('debug-connect-btn');
    const status = document.getElementById('debug-send-status');
    debugConnected = !debugConnected;
    btn.textContent = debugConnected ? 'Disconnect' : 'Connect';
    if (debugConnected) {
      status.className = 'hint status-ok';
      status.textContent = 'Connected — selections will auto-send.';
      if (currentSelection) sendDebugPayload(currentSelection);
    } else {
      status.className = 'hint';
      status.textContent = 'Not connected — every selection stays local until you connect.';
    }
  });

  function downloadTextFile(filename, text, mimeType) {
    const blob = new Blob([text], { type: mimeType || 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    setTimeout(() => {
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    }, 0);
  }

  document.getElementById('mcp-download-btn').addEventListener('click', () => {
    downloadTextFile(
      'mcp_server.py',
      document.getElementById('mcp-server-code').textContent,
      'text/x-python'
    );
  });

  // Same push-on-selection-change idea as the debug connect above, but over a
  // long-lived WebSocket instead of one-shot fetches — mcp_server.py needs a
  // persistent connection so its MCP tools can be called (from Claude, say)
  // at any time and read whatever was most recently pushed, not just at the
  // moment a selection happened to change.
  let mcpConnected = false;
  let mcpSocket = null;

  function mcpSetStatus(cssClass, text) {
    const status = document.getElementById('mcp-connect-status');
    status.className = 'hint' + (cssClass ? ' ' + cssClass : '');
    status.textContent = text;
  }

  function sendMcpPayload(payload) {
    if (!mcpSocket || mcpSocket.readyState !== WebSocket.OPEN) return;
    mcpSocket.send(JSON.stringify(payload));
    const label = payload.type === 'pageOverview'
      ? `page overview ("${payload.pageName}")`
      : payload.selectionCount > 1 ? `${payload.selectionCount} layers` : `"${payload.nodeName}"`;
    mcpSetStatus('status-ok', `Connected — sent ${label} ✓`);
  }

  function mcpConnect() {
    try {
      mcpSocket = new WebSocket('ws://localhost:8788');
    } catch (err) {
      mcpSetStatus('status-error', 'Connect failed: ' + (err && err.message ? err.message : err));
      return;
    }
    mcpSocket.onopen = () => {
      mcpSetStatus('status-ok', 'Connected — selections will auto-send.');
      if (currentSelection) sendMcpPayload(currentSelection);
      if (currentPageOverview) sendMcpPayload(currentPageOverview);
    };
    mcpSocket.onclose = () => {
      if (mcpConnected) mcpSetStatus('status-error', 'Disconnected — is mcp_server.py still running?');
    };
    mcpSocket.onerror = () => {
      mcpSetStatus('status-error', 'Connect failed — is mcp_server.py running on port 8788?');
    };
  }

  document.getElementById('mcp-connect-btn').addEventListener('click', () => {
    const btn = document.getElementById('mcp-connect-btn');
    mcpConnected = !mcpConnected;
    btn.textContent = mcpConnected ? 'Disconnect' : 'Connect';
    if (mcpConnected) {
      mcpSetStatus('', 'Connecting...');
      mcpConnect();
    } else {
      if (mcpSocket) {
        mcpSocket.close();
        mcpSocket = null;
      }
      mcpSetStatus('', 'Not connected — start mcp_server.py first, then Connect.');
    }
  });

  function mcpSetScanStatus(cssClass, text) {
    const status = document.getElementById('mcp-scan-status');
    status.className = 'hint' + (cssClass ? ' ' + cssClass : '');
    status.textContent = text;
  }

  document.getElementById('mcp-scan-btn').addEventListener('click', () => {
    mcpSetScanStatus('', 'Scanning...');
    parent.postMessage({ pluginMessage: { type: 'scan-page' } }, '*');
  });

  window.onmessage = (event) => {
    const msg = event.data.pluginMessage;
    if (!msg) return;
    if (msg.type === 'empty') {
      showEmpty();
    } else if (msg.type === 'selection') {
      render(msg);
    } else if (msg.type === 'error') {
      showEmpty('Something went wrong building this selection: ' + msg.message);
    } else if (msg.type === 'pageOverview') {
      currentPageOverview = msg;
      const screenCount = msg.sections.reduce((n, s) => n + s.screens.length, 0) + msg.ungroupedScreens.length;
      mcpSetScanStatus('status-ok', `Scanned "${msg.pageName}" — ${screenCount} screen(s) in ${msg.sections.length} section(s) ✓`);
      if (mcpConnected) sendMcpPayload(msg);
    } else if (msg.type === 'pageOverviewError') {
      mcpSetScanStatus('status-error', 'Scan failed: ' + msg.message);
    }
  };

</script>