@mp3wizard/figma-console-mcp 1.30.1 → 1.32.1

package/figma-desktop-bridge/ui.html

@@ -9,28 +9,63 @@
       padding: 0;
     }
 
+    /* ===== Status + log colour tokens ===== */
+    /* Dark defaults — body[data-theme] overrides below keep light/dark correct. */
+    :root {
+      --color-connected:      #44FF88;
+      --color-connected-glow: rgba(68, 255, 136, 0.5);
+      --color-waiting:        #FFB700;
+      --color-error:          #FF455B;
+      --color-idle:           #737373;
+      --log-info:             #6cf;
+      --log-success:          #6f6;
+      --log-error:            #ff8080;
+      --log-warn:             #fc0;
+    }
+
     body {
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       font-size: 11px;
       background: var(--figma-color-bg, #2c2c2c);
       color: var(--figma-color-text, rgba(255, 255, 255, 0.9));
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 6px 8px;
+      padding: 4px 12px;
       user-select: none;
     }
 
-    .bridge-status {
+    /* Visible keyboard focus for all interactive elements (WCAG 2.4.7) */
+    button:focus-visible,
+    input:focus-visible {
+      outline: 2px solid var(--figma-color-bg-brand, #0d99ff);
+      outline-offset: 1px;
+      border-radius: 3px;
+    }
+    /* Hide outline when mouse-clicking but keep it for keyboard nav */
+    button:focus:not(:focus-visible),
+    input:focus:not(:focus-visible) {
+      outline: none;
+    }
+
+    .wrap {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      width: 100%;
+    }
+
+    /* ===== Row 1 — status + CTA + icons (always visible) ===== */
+    .row-top {
       display: flex;
       align-items: center;
       gap: 6px;
-      padding: 4px 8px;
-      background: var(--figma-color-bg-secondary, #383838);
-      border: 1px solid var(--figma-color-border, #4a4a4a);
-      border-radius: 4px;
       white-space: nowrap;
+      padding-left: 4px; /* visual offset to align with Figma title bar icon */
+    }
+
+    .status-pill {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      margin-right: 3px;
     }
 
     .status-indicator {
@@ -38,21 +73,21 @@
       height: 8px;
       border-radius: 50%;
       flex-shrink: 0;
+      background: var(--color-idle);
     }
 
     .status-indicator.loading {
-      background: #f5a623;
+      background: var(--color-waiting);
       animation: pulse 1.5s ease-in-out infinite;
     }
 
     .status-indicator.active {
-      background: #18a957;
-      box-shadow: 0 0 6px rgba(24, 169, 87, 0.6);
-      animation: glow 2s ease-in-out infinite;
+      background: var(--color-connected);
+      box-shadow: 0 0 6px var(--color-connected-glow);
     }
 
     .status-indicator.error {
-      background: #f24822;
+      background: var(--color-error);
     }
 
     @keyframes pulse {
@@ -60,158 +95,457 @@
       50% { opacity: 1; }
     }
 
-    @keyframes glow {
-      0%, 100% { box-shadow: 0 0 4px rgba(24, 169, 87, 0.4); }
-      50% { box-shadow: 0 0 8px rgba(24, 169, 87, 0.8); }
+    #status-state {
+      font-weight: 700;
+      font-size: 10px;
+      letter-spacing: -0.2px;
+      text-transform: uppercase;
+      font-stretch: 75%;
+      color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.6));
     }
 
-    .status-text {
-      font-weight: 500;
-      letter-spacing: 0.2px;
+    .status-indicator.active + #status-state {
+      color: var(--color-connected);
     }
 
-    .status-text .label {
-      color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.7));
+    .status-indicator.error + #status-state {
+      color: var(--color-error);
     }
 
-    .status-text .state {
+    .cta-btn {
+      background: transparent;
       color: var(--figma-color-text, rgba(255, 255, 255, 0.9));
-      margin-left: 4px;
+      border: 1px solid var(--figma-color-border, #4a4a4a);
+      border-radius: 3px;
+      font-family: inherit;
+      font-size: 10px;
+      font-weight: 500;
+      padding: 4px;
+      cursor: pointer;
+      line-height: 1.4;
     }
 
-    /* Cloud Mode toggle */
-    .cloud-section {
-      display: none;
-      width: 100%;
+    .cta-btn:disabled {
+      opacity: 0.6;
+      cursor: default;
     }
 
-    .cloud-section.visible {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-      margin-top: 6px;
+    .cta-btn:hover {
+      background: var(--figma-color-bg-secondary, #383838);
     }
 
-    .cloud-toggle {
-      display: flex;
+    .row-top-spacer {
+      flex: 1;
+    }
+
+    .icon-btn {
+      background: transparent;
+      border: 1px solid transparent;
+      border-radius: 3px;
+      color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.6));
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      display: inline-flex;
       align-items: center;
-      gap: 3px;
+      justify-content: center;
       cursor: pointer;
-      font-size: 10px;
-      color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.5));
-      user-select: none;
-      margin-top: 2px;
+      font-family: inherit;
+      font-size: 14px;
+      line-height: 1;
     }
 
-    .cloud-toggle:hover {
+    .icon-btn:hover {
       color: var(--figma-color-text, rgba(255, 255, 255, 0.9));
+      border-color: var(--figma-color-border, #4a4a4a);
+    }
+
+    /* Borderless icon variant — hover/active change colour only, never border.
+       Applied via .icon-btn--borderless modifier class. */
+    .icon-btn--borderless,
+    .icon-btn--borderless:hover,
+    .icon-btn--borderless.active {
+      border-color: transparent !important;
+    }
+
+    /* Expand [+] / [−] glyph is text, not SVG. Bump to match visual weight of SVG siblings. */
+    #expand-btn {
+      font-size: 18px;
+      font-weight: 400;
+      line-height: 1;
     }
 
-    .cloud-toggle .chevron {
-      display: inline-block;
-      font-size: 8px;
-      transition: transform 0.15s ease;
+    .icon-btn.active,
+    .icon-btn.active:hover {
+      color: var(--figma-color-bg-brand, #0d99ff);
+      border-color: var(--figma-color-bg-brand, #0d99ff);
     }
 
-    .cloud-toggle.expanded .chevron {
-      transform: rotate(90deg);
+    .icon-btn svg {
+      width: 14px;
+      height: 14px;
     }
 
-    .cloud-input-row input {
+    /* ===== Row: cloud pairing (when cloud icon on) ===== */
+    .row {
+      display: none;
       width: 100%;
+    }
+
+    .row.visible {
+      display: flex;
+    }
+
+    .cloud-pair {
+      flex-direction: row;
+      gap: 4px;
+      align-items: stretch;
+    }
+
+    .cloud-pair input {
+      flex: 1;
+      min-width: 0;
       background: var(--figma-color-bg, #2c2c2c);
       border: 1px solid var(--figma-color-border, #4a4a4a);
       border-radius: 3px;
       color: var(--figma-color-text, rgba(255, 255, 255, 0.9));
       font-family: monospace;
-      font-size: 12px;
-      padding: 4px 6px;
+      font-size: 11px;
+      padding: 3px 5px;
       text-transform: uppercase;
-      letter-spacing: 3px;
+      letter-spacing: 2px;
       text-align: center;
       box-sizing: border-box;
     }
 
-    .cloud-input-row input::placeholder {
+    .cloud-pair input::placeholder {
       text-transform: none;
       letter-spacing: normal;
-      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-family: inherit;
       font-size: 10px;
       color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.3));
     }
 
-    .cloud-input-row button {
-      width: 100%;
+    /* Connect button only; icon-btn inside the row keeps its icon-btn styling */
+    .cloud-pair button:not(.icon-btn) {
+      flex-shrink: 0;
       background: var(--figma-color-bg-brand, #0d99ff);
       color: #fff;
       border: none;
       border-radius: 3px;
+      font-family: inherit;
       font-size: 10px;
       font-weight: 500;
-      padding: 5px 8px;
+      padding: 4px 10px;
       cursor: pointer;
     }
 
-    .cloud-input-row button:disabled {
+    .cloud-pair button:not(.icon-btn):disabled {
       opacity: 0.5;
       cursor: default;
     }
 
+    .cloud-help {
+      flex-direction: column;
+      gap: 4px;
+      padding: 6px 8px;
+      background: var(--figma-color-bg-secondary, #383838);
+      border-radius: 3px;
+      font-size: 10px;
+      line-height: 1.4;
+      color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.7));
+    }
+
+    .cloud-help p {
+      margin: 0;
+    }
+
+    body[data-theme="light"] .cloud-help {
+      background: #f0f0f0;
+      color: #555;
+    }
+
     .cloud-status {
+      display: none;
       font-size: 9px;
       color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.5));
       text-align: center;
+      padding: 2px 0;
+    }
+
+    .cloud-status:not(:empty) {
+      display: block;
     }
 
     .cloud-status.connected {
-      color: #18a957;
+      color: var(--color-connected);
     }
 
     .cloud-status.error {
-      color: #f24822;
+      color: var(--color-error);
     }
 
-    /* Light theme support */
-    @media (prefers-color-scheme: light) {
-      body {
-        background: #f5f5f5;
-        color: #333;
-      }
-      .bridge-status {
-        background: #fff;
-        border-color: #e5e5e5;
-      }
-      .status-text .label {
-        color: #666;
-      }
-      .status-text .state {
-        color: #333;
-      }
+    /* ===== Row: sub-toolbar (when [+] on) ===== */
+    .sub-toolbar {
+      align-items: center;
+      gap: 8px;
+      flex-wrap: nowrap;
+      padding-left: 4px; /* match row-top alignment with Figma title bar icon */
+    }
+
+    .sub-btn {
+      background: transparent;
+      border: none;
+      padding: 2px 0;
+      color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.6));
+      font-family: inherit;
+      font-size: 10px;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      gap: 3px;
+      white-space: nowrap;
+    }
+
+    .sub-btn:hover {
+      color: var(--figma-color-text, rgba(255, 255, 255, 0.9));
+    }
+
+    .sub-btn.active {
+      color: var(--figma-color-bg-brand, #0d99ff);
+    }
+
+    .sub-btn svg {
+      width: 11px;
+      height: 11px;
+    }
+
+    /* ===== Row: info panel ===== */
+    .info-panel {
+      flex-direction: row;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 0;
+      font-size: 10px;
+      color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.7));
+    }
+
+    .info-rows {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .info-row {
+      display: flex;
+      gap: 6px;
+      overflow: hidden;
+      align-items: center;
+    }
+
+    .info-row-label {
+      color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.5));
+      flex-shrink: 0;
+    }
+
+    .info-row-value {
+      color: var(--figma-color-text, rgba(255, 255, 255, 0.9));
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    /* ===== Row: log panel ===== */
+    .log-panel {
+      flex-direction: column;
+      gap: 0;
+      border: 1px solid var(--figma-color-border, #4a4a4a);
+      border-radius: 3px;
+      overflow: hidden;
+      background: var(--figma-color-bg, #1e1e1e);
+    }
+
+    .log-header {
+      display: flex;
+      justify-content: flex-end;
+      padding: 3px 6px;
+      font-size: 9px;
+      color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.5));
+      background: var(--figma-color-bg-secondary, #383838);
+      border-bottom: 1px solid var(--figma-color-border, #4a4a4a);
+    }
+
+    .log-entries {
+      max-height: 160px;
+      overflow-y: auto;
+      padding: 4px 6px;
+      font-family: 'SF Mono', 'Menlo', Consolas, monospace;
+      font-size: 10px;
+      line-height: 1.4;
+    }
+
+    .log-entries.errors-only .log-entry:not(.error) {
+      display: none;
+    }
+
+    .log-entry {
+      display: flex;
+      align-items: baseline;
+      gap: 5px;
+      color: var(--figma-color-text, rgba(255, 255, 255, 0.8));
+      line-height: 1.5;
+    }
+    .log-ts {
+      flex-shrink: 0;
+      opacity: 0.45;
+      font-size: 9px;
+      user-select: none;
+    }
+    .log-msg {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .log-dur {
+      display: none;
+    }
+    .log-count {
+      flex-shrink: 0;
+      opacity: 0.5;
+      font-size: 9px;
+      min-width: 18px;
+      text-align: right;
+    }
+
+    .log-entry.info   { color: var(--log-info); }
+    .log-entry.success{ color: var(--log-success); }
+    .log-entry.error  { color: var(--log-error); }
+    .log-entry.warn   { color: var(--log-warn); }
+
+    /* ===== Light theme ===== */
+    /* Theme manual override redefines the Figma-injected vars so all token
+       consumers cascade automatically. When no data-theme attribute is set,
+       Figma's themeColors:true (in code.js) controls the values natively. */
+    body[data-theme="light"] {
+      --figma-color-bg:            #ffffff;
+      --figma-color-bg-secondary:  #f5f5f5;
+      --figma-color-border:        #e5e5e5;
+      --figma-color-text:          #333333;
+      --figma-color-text-secondary: #777777;
+      --color-connected:      #16a34a;
+      --color-connected-glow: rgba(22, 163, 74, 0.45);
+      --color-waiting:        #d97706;
+      --color-error:          #ef4444;
+      --color-idle:           #6b7280;
+      --log-info:             #00639e;
+      --log-success:          #167016;
+      --log-error:            #b81e2c;
+      --log-warn:             #7a5c00;
+    }
+    body[data-theme="dark"] {
+      --figma-color-bg:            #2c2c2c;
+      --figma-color-bg-secondary:  #383838;
+      --figma-color-border:        #4a4a4a;
+      --figma-color-text:          rgba(255, 255, 255, 0.9);
+      --figma-color-text-secondary: rgba(255, 255, 255, 0.55);
+      --color-connected:      #44FF88;
+      --color-connected-glow: rgba(68, 255, 136, 0.5);
+      --color-waiting:        #FFB700;
+      --color-error:          #FF455B;
+      --color-idle:           #737373;
+      --log-info:             #6cf;
+      --log-success:          #6f6;
+      --log-error:            #ff8080;
+      --log-warn:             #fc0;
     }
   </style>
 </head>
 <body>
-  <div style="display: flex; flex-direction: column; align-items: center; width: 100%;">
-    <div class="bridge-status" id="status-container">
-      <div class="status-indicator loading" id="status-dot"></div>
-      <div class="status-text">
-        <span class="label">MCP</span>
-        <span class="state" id="status-state">connecting</span>
+  <div class="wrap">
+    <!-- Row 1 — always visible -->
+    <div class="row-top">
+      <div class="status-pill">
+        <div class="status-indicator loading" id="status-dot" aria-hidden="true"></div>
+        <span id="status-state" role="status" aria-live="polite">Connecting</span>
       </div>
+      <button class="cta-btn" id="cta-btn" onclick="toggleLocalConnection()">Pause</button>
+      <div class="row-top-spacer"></div>
+      <button class="icon-btn" id="cloud-icon" onclick="toggleCloudPair()" title="Cloud pairing" aria-label="Cloud pairing" aria-expanded="false">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+          <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/>
+        </svg>
+      </button>
+      <button class="icon-btn" id="expand-btn" onclick="toggleSubToolbar()" title="Show options" aria-label="Show options" aria-expanded="false">+</button>
     </div>
 
-    <div class="cloud-toggle" id="cloud-toggle" onclick="toggleCloudSection()">
-      <span class="chevron">▶</span> Cloud Mode
+    <!-- Cloud pairing (shown when cloud icon active) -->
+    <div class="row cloud-pair" id="cloud-pair">
+      <button class="icon-btn icon-btn--borderless cloud-info-btn" id="cloud-info-btn" onclick="toggleCloudHelp()" title="About pairing codes" aria-label="About pairing codes" aria-expanded="false" aria-controls="cloud-help">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+          <circle cx="12" cy="12" r="10"/>
+          <line x1="12" y1="16" x2="12" y2="12"/>
+          <line x1="12" y1="8" x2="12.01" y2="8"/>
+        </svg>
+      </button>
+      <input type="text" id="cloud-code" maxlength="6" placeholder="Pairing code" autocomplete="off" aria-label="Cloud pairing code" />
+      <button id="cloud-btn" onclick="cloudConnect()">Connect</button>
+    </div>
+    <div class="row cloud-help" id="cloud-help" role="region" aria-label="About pairing codes">
+      <p>Use this when Claude is on a different device from Figma.</p>
+      <p>Generate a 6-char code in Claude and paste it here.</p>
+    </div>
+    <div class="cloud-status" id="cloud-status"></div>
+
+    <!-- Sub-toolbar (shown when [+] active) -->
+    <div class="row sub-toolbar" id="sub-toolbar">
+      <button class="sub-btn" id="info-toggle" onclick="toggleInfo()" aria-expanded="false" aria-controls="info-panel">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+          <circle cx="12" cy="12" r="10"/>
+          <line x1="12" y1="16" x2="12" y2="12"/>
+          <line x1="12" y1="8" x2="12.01" y2="8"/>
+        </svg>
+        Info
+      </button>
+      <button class="sub-btn" id="log-toggle" onclick="toggleLog()" aria-expanded="false" aria-controls="log-panel">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+          <circle cx="12" cy="12" r="3"/>
+        </svg>
+        Log
+      </button>
+      <button class="icon-btn" id="errors-toggle" onclick="toggleErrorsOnly()" title="Filter errors only" aria-label="Filter errors only" aria-pressed="false" style="display:none">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
+          <line x1="12" y1="9" x2="12" y2="13"/>
+          <line x1="12" y1="17" x2="12.01" y2="17"/>
+        </svg>
+      </button>
+      <button class="icon-btn" id="copy-log-btn" onclick="copyLogToClipboard()" title="Copy log to clipboard" aria-label="Copy log to clipboard" style="display:none">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+        </svg>
+      </button>
     </div>
 
-    <div class="cloud-section" id="cloud-section">
-      <div class="cloud-input-row">
-        <input type="text" id="cloud-code" maxlength="6" placeholder="Pairing code" autocomplete="off" />
+    <!-- Info panel (shown when Info active) -->
+    <div class="row info-panel" id="info-panel">
+      <div class="info-rows">
+        <div class="info-row"><span class="info-row-label">File:</span><span class="info-row-value" id="info-file">—</span></div>
+        <div class="info-row"><span class="info-row-label">Page:</span><span class="info-row-value" id="info-page">—</span></div>
       </div>
-      <div class="cloud-input-row">
-        <button id="cloud-btn" onclick="cloudConnect()">Connect</button>
+    </div>
+
+    <!-- Log panel (shown when Show log active) -->
+    <div class="row log-panel" id="log-panel">
+      <div class="log-header">
+        <span id="log-servers">0 server(s)</span>
       </div>
-      <div class="cloud-status" id="cloud-status"></div>
+      <div class="log-entries" id="log-entries"></div>
     </div>
   </div>
 
@@ -907,6 +1241,14 @@
       // After connecting, disconnect-triggered retries have their own limit.
       var initialScanAttempts = 0;
       var MAX_INITIAL_SCANS = 3;
+      // Set true only when the user clicks Pause. Suppresses the background
+      // watchdog so a deliberate pause is not undone automatically.
+      var userPaused = false;
+      // Watchdog cadence: how often to re-probe for an MCP server while we have
+      // ZERO connections. Runs only during genuine downtime and stops the moment
+      // a server connects, so the unavoidable connection-refused console noise is
+      // bounded to periods when nothing is connected anyway.
+      var BACKGROUND_RESCAN_MS = 12000;
 
       function wsScanAndConnect() {
         if (isScanning) return;
@@ -959,13 +1301,21 @@
                 isScanning = false;
                 // Retry with backoff if no servers found, up to MAX_INITIAL_SCANS
                 if (!foundAny && activeConnections.length === 0) {
-                  initialScanAttempts++;
+                  // Fast burst on load: a couple of quick retries with backoff.
+                  // Once the burst exhausts we STOP re-arming here — the background
+                  // watchdog (BACKGROUND_RESCAN_MS) takes over and keeps probing
+                  // slowly, so a server that starts AFTER the plugin still connects
+                  // without a restart. The guard also prevents watchdog-triggered
+                  // scans from incrementing the counter or logging on every cycle.
                   if (initialScanAttempts < MAX_INITIAL_SCANS) {
-                    var delay = 3000 * initialScanAttempts; // 3s, 6s
-                    console.log('[MCP Bridge] No servers found, retry ' + initialScanAttempts + '/' + MAX_INITIAL_SCANS + ' in ' + (delay/1000) + 's');
-                    setTimeout(wsScanAndConnect, delay);
-                  } else {
-                    console.log('[MCP Bridge] No MCP servers found after ' + MAX_INITIAL_SCANS + ' scans. Restart plugin to retry.');
+                    initialScanAttempts++;
+                    if (initialScanAttempts < MAX_INITIAL_SCANS) {
+                      var delay = 3000 * initialScanAttempts; // 3s, 6s
+                      console.log('[MCP Bridge] No servers found, retry ' + initialScanAttempts + '/' + MAX_INITIAL_SCANS + ' in ' + (delay/1000) + 's');
+                      setTimeout(wsScanAndConnect, delay);
+                    } else {
+                      console.log('[MCP Bridge] No MCP server yet — watchdog will keep probing every ' + (BACKGROUND_RESCAN_MS/1000) + 's until one appears (no restart needed).');
+                    }
                   }
                 }
               }
@@ -1058,8 +1408,10 @@
             event.reason === 'Replaced by new connection' ||
             event.reason === 'Replaced by same file reconnection'
           ));
-          if (wasReplaced) {
-            console.log('[MCP Bridge] WebSocket:' + port + ': replaced by newer connection, stopping reconnect');
+          // If user paused via the Pause button, also stop auto-reconnect.
+          var wasManualPause = (event.code === 1000 && event.reason === 'Manual disconnect');
+          if (wasReplaced || wasManualPause) {
+            console.log('[MCP Bridge] WebSocket:' + port + ': stopped by ' + (wasManualPause ? 'user pause' : 'replacement'));
             return;
           }
 
@@ -1151,9 +1503,46 @@
 
       window.__wsGetActiveConnections = function() { return activeConnections; };
 
-      // Single scan on load — no periodic rescanning to avoid console spam.
-      // If no server found, retries up to MAX_INITIAL_SCANS times then stops.
-      // On disconnect, retries the specific port up to 5 times then stops.
+      window.__wsDisconnectAll = function() {
+        for (var i = 0; i < activeConnections.length; i++) {
+          try { activeConnections[i].ws.close(1000, 'Manual disconnect'); } catch (e) {}
+        }
+        activeConnections = [];
+        ws = null;
+        wsConnected = false;
+        // Reset scan state so a future Resume gets a clean retry budget.
+        isScanning = false;
+        initialScanAttempts = 0;
+        wsReconnectAttempts = 0;
+        // Deliberate user pause — keep the watchdog quiet until Resume/Reconnect.
+        userPaused = true;
+      };
+
+      window.__wsScanAndConnect = wsScanAndConnect;
+
+      // Manual (re)connect from the UI: clear any pause, refresh the retry budget
+      // so the user gets the responsive fast burst again, then scan.
+      window.__wsManualScan = function() {
+        userPaused = false;
+        initialScanAttempts = 0;
+        wsScanAndConnect();
+      };
+
+      window.__wsIsPaused = function() { return userPaused; };
+      window.__wsIsScanning = function() { return isScanning; };
+
+      // Background watchdog — the fix for "plugin opened before the MCP client
+      // started." While we hold zero connections and the user hasn't paused,
+      // keep probing at a slow cadence. A late-starting server is picked up
+      // automatically; the probing stops the instant a connection succeeds.
+      setInterval(function() {
+        if (userPaused || isScanning) return;
+        if (activeConnections.length > 0) return;
+        wsScanAndConnect();
+      }, BACKGROUND_RESCAN_MS);
+
+      // Initial scan on load (fast burst). Thereafter the watchdog above keeps
+      // probing while disconnected, and disconnect-triggered retries handle drops.
       wsScanAndConnect();
     })();
 
@@ -1163,19 +1552,502 @@
     var cloudWs = null;
     var CLOUD_RELAY_HOST = 'wss://figma-console-mcp.southleft.com';
 
-    function toggleCloudSection() {
-      var section = document.getElementById('cloud-section');
-      var toggle = document.getElementById('cloud-toggle');
-      var isExpanding = !section.classList.contains('visible');
-      section.classList.toggle('visible');
-      toggle.classList.toggle('expanded');
+    // ============================================================================
+    // 3-STAGE UI TOGGLES
+    // Stage 1: row-top (always visible)
+    // Stage 2: sub-toolbar (revealed by [+])
+    // Stage 3: log panel (revealed by Show log)
+    // Cloud pairing is an independent row triggered by the cloud icon.
+    // ============================================================================
+
+    // Fixed 240px width matches Figma right-side nav min.
+    // Height grows freely with content. If the plugin extends past Figma's
+    // visible UI, the user drags the plugin window to reveal what's clipped.
+    var PLUGIN_WIDTH = 240;
+
+    function sendResize() {
+      // Force a layout pass so measurements reflect the current visible rows.
+      void document.body.offsetHeight;
+      // Measure the inner content element + body padding. Avoids stale
+      // scrollHeight values when the iframe was previously larger.
+      var wrap = document.querySelector('.wrap');
+      if (!wrap) return;
+      var bs = window.getComputedStyle(document.body);
+      var h = wrap.offsetHeight
+            + (parseFloat(bs.paddingTop) || 0)
+            + (parseFloat(bs.paddingBottom) || 0);
+      parent.postMessage({
+        pluginMessage: { type: 'RESIZE_UI', width: PLUGIN_WIDTH, height: Math.ceil(h) }
+      }, '*');
+    }
+
+    function autoResize() {
+      sendResize(); // immediate — fires before next paint so Figma can grow upward in the same frame
+      requestAnimationFrame(function() {
+        sendResize();
+        setTimeout(sendResize, 150);
+      });
+    }
+
+    // Observe the wrap (actual content), not body, so size changes from any
+    // row toggle fire a resize whether the rows grew or shrank.
+    if (typeof ResizeObserver !== 'undefined') {
+      var _wrapObserve = function() {
+        var wrap = document.querySelector('.wrap');
+        if (wrap) { var ro = new ResizeObserver(sendResize); ro.observe(wrap); }
+      };
+      _wrapObserve();
+    }
+
+    // Initial tighten — multiple attempts at different times to defeat any
+    // residual Figma-side iframe sizing from a previous plugin state.
+    sendResize();
+    requestAnimationFrame(sendResize);
+    window.addEventListener('load', function() {
+      sendResize();
+      setTimeout(sendResize, 50);
+      setTimeout(sendResize, 200);
+      setTimeout(sendResize, 600);
+    });
+
+    function toggleRow(id, buttonId) {
+      var row = document.getElementById(id);
+      var btn = buttonId ? document.getElementById(buttonId) : null;
+      var opening = !row.classList.contains('visible');
+      row.classList.toggle('visible', opening);
+      if (btn) {
+        btn.classList.toggle('active', opening);
+        // Keep aria-expanded in sync for screen readers.
+        if (btn.hasAttribute('aria-expanded')) {
+          btn.setAttribute('aria-expanded', opening ? 'true' : 'false');
+        }
+      }
+      autoResize();
+      return opening;
+    }
+
+    function closeSubToolbarIfOpen() {
+      var sub = document.getElementById('sub-toolbar');
+      if (sub && sub.classList.contains('visible')) toggleSubToolbar();
+    }
+
+    function closeCloudPairIfOpen() {
+      var cp = document.getElementById('cloud-pair');
+      if (cp && cp.classList.contains('visible')) {
+        toggleRow('cloud-pair', 'cloud-icon');
+        // Close the help too if it was open
+        var ch = document.getElementById('cloud-help');
+        if (ch && ch.classList.contains('visible')) toggleRow('cloud-help', 'cloud-info-btn');
+      }
+    }
+
+    function toggleCloudPair() {
+      var opening = !document.getElementById('cloud-pair').classList.contains('visible');
+      if (opening) closeSubToolbarIfOpen();
+      toggleRow('cloud-pair', 'cloud-icon');
+      if (!opening) {
+        var s = document.getElementById('cloud-status');
+        if (s) { s.textContent = ''; s.className = 'cloud-status'; }
+      }
+    }
 
-      // Resize plugin window to fit content. Default width is 180px to give
-      // the status pill enough room for the "Local + Cloud" mode label.
-      var height = isExpanding ? 130 : 50;
-      parent.postMessage({ pluginMessage: { type: 'RESIZE_UI', width: 180, height: height } }, '*');
+    function toggleCloudHelp() {
+      toggleRow('cloud-help', 'cloud-info-btn');
     }
 
+    function toggleSubToolbar() {
+      var opening = !document.getElementById('sub-toolbar').classList.contains('visible');
+      if (opening) closeCloudPairIfOpen();
+      var nowOpen = toggleRow('sub-toolbar', 'expand-btn');
+      document.getElementById('expand-btn').textContent = nowOpen ? '−' : '+';
+      if (!nowOpen) {
+        // Collapse Info + Log if sub-toolbar closes
+        var info = document.getElementById('info-panel');
+        var log = document.getElementById('log-panel');
+        if (info.classList.contains('visible')) toggleInfo();
+        if (log.classList.contains('visible')) toggleLog();
+      }
+    }
+
+    function toggleInfo() {
+      var opening = !document.getElementById('info-panel').classList.contains('visible');
+      if (opening && document.getElementById('log-panel').classList.contains('visible')) {
+        // Close log first so only one panel is open at a time.
+        toggleLog();
+      }
+      toggleRow('info-panel', 'info-toggle');
+    }
+
+    function toggleLog() {
+      var logVisible = document.getElementById('log-panel').classList.contains('visible');
+      var opening = !logVisible;
+      if (opening && document.getElementById('info-panel').classList.contains('visible')) {
+        // Close info first so only one panel is open at a time.
+        toggleRow('info-panel', 'info-toggle');
+      }
+      toggleRow('log-panel', 'log-toggle');
+      // Reveal Errors + Copy buttons only when log panel is open
+      document.getElementById('errors-toggle').style.display = opening ? '' : 'none';
+      document.getElementById('copy-log-btn').style.display = opening ? '' : 'none';
+      autoResize();
+    }
+
+    function toggleErrorsOnly() {
+      var btn = document.getElementById('errors-toggle');
+      var entries = document.getElementById('log-entries');
+      var on = !btn.classList.contains('active');
+      btn.classList.toggle('active', on);
+      btn.setAttribute('aria-pressed', on ? 'true' : 'false');
+      entries.classList.toggle('errors-only', on);
+      btn.setAttribute('title', on ? 'Remove error filter' : 'Filter errors only');
+      btn.setAttribute('aria-label', on ? 'Remove error filter' : 'Filter errors only');
+    }
+
+    // Follow Figma's theme. With themeColors:true, Figma adds a "figma-light" /
+    // "figma-dark" class to <html> and updates it live when the user switches
+    // themes. We mirror that onto body[data-theme] so the status/log color
+    // tokens track Figma. Falls back to OS preference if the class is absent.
+    function applyTheme() {
+      var root = document.documentElement;
+      var theme;
+      if (root.classList.contains('figma-light')) theme = 'light';
+      else if (root.classList.contains('figma-dark')) theme = 'dark';
+      else theme = (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) ? 'light' : 'dark';
+      document.body.setAttribute('data-theme', theme);
+    }
+
+    applyTheme();
+    // React to live Figma theme switches (class changes on <html>).
+    if (window.MutationObserver) {
+      new MutationObserver(applyTheme).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+    }
+    // Fallback path: only relevant when no Figma theme class is present.
+    if (window.matchMedia) {
+      window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', applyTheme);
+    }
+
+
+    // ============================================================================
+    // STAGE 2 — LOG PANEL, INFO PANEL, CONNECTION, CLIPBOARD EXPORT
+    // ============================================================================
+
+    var PLUGIN_VERSION = 'v0.3.0';
+    var logHistory = [];
+    var logEntriesEl = null;
+    var _ctaBtn = null;
+
+    function ensureLogRefs() {
+      if (!logEntriesEl) logEntriesEl = document.getElementById('log-entries');
+      if (!_ctaBtn) _ctaBtn = document.getElementById('cta-btn');
+    }
+
+    function escHtml(s) {
+      return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+
+    function log(message, level, ts) {
+      level = level || 'info';
+      ensureLogRefs();
+      if (!logEntriesEl) return;
+
+      // Deduplicate: consecutive identical message+level bumps the count badge.
+      var last = logEntriesEl.lastElementChild;
+      if (last && last.dataset.logMsg === message && last.dataset.logLevel === level) {
+        var n = (parseInt(last.dataset.logCount, 10) || 1) + 1;
+        last.dataset.logCount = n;
+        var tsEl = last.querySelector('.log-ts');
+        var countEl = last.querySelector('.log-count');
+        if (tsEl && ts) tsEl.textContent = ts;
+        if (countEl) countEl.textContent = '×' + n;
+        return;
+      }
+
+      var entry = document.createElement('div');
+      entry.className = 'log-entry ' + level;
+      entry.dataset.logMsg = message;
+      entry.dataset.logLevel = level;
+      entry.dataset.logCount = '1';
+      entry.innerHTML =
+        '<span class="log-ts">' + escHtml(ts || '') + '</span>' +
+        '<span class="log-msg" title="' + escHtml(message) + '">' + escHtml(message) + '</span>' +
+        '<span class="log-dur"></span>' +
+        '<span class="log-count"></span>';
+      logEntriesEl.appendChild(entry);
+      logEntriesEl.scrollTop = logEntriesEl.scrollHeight;
+      while (logEntriesEl.children.length > 50) {
+        logEntriesEl.removeChild(logEntriesEl.children[0]);
+      }
+    }
+
+    function logWithHistory(message, level) {
+      level = level || 'info';
+      var now = new Date();
+      var ts = ('0' + now.getHours()).slice(-2) + ':' +
+               ('0' + now.getMinutes()).slice(-2) + ':' +
+               ('0' + now.getSeconds()).slice(-2);
+      logHistory.push({ ts: now.toISOString().replace('T', ' ').replace(/\.\d+Z/, ''), level: level, message: message });
+      log(message, level, ts);
+    }
+
+    function copyLogToClipboard() {
+      var lines = logHistory.map(function(e) {
+        var prefix = e.level === 'error' ? '[!]  ' : e.level === 'warn' ? '[WARN]  ' : '';
+        return e.ts + '  ' + prefix + e.message;
+      });
+      var text = 'Figma Desktop Bridge - Session Log\n'
+        + 'Exported: ' + new Date().toISOString() + '\n'
+        + 'Plugin: ' + PLUGIN_VERSION + '\n'
+        + '------------------------------------------------\n'
+        + lines.join('\n') + '\n';
+      var ta = document.createElement('textarea');
+      ta.value = text;
+      ta.style.position = 'fixed';
+      ta.style.opacity = '0';
+      document.body.appendChild(ta);
+      ta.select();
+      var ok = false;
+      try { ok = document.execCommand('copy'); } catch (e) {}
+      document.body.removeChild(ta);
+      if (ok) {
+        logWithHistory('Copied to pasteboard (' + logHistory.length + ' entries)', 'success');
+      } else {
+        logWithHistory('Copy failed - clipboard not available', 'error');
+      }
+    }
+
+    // Smart command summariser: turns raw message types and EXECUTE_CODE
+    // payloads into human-readable log lines.
+    var COMMAND_LABELS = {
+      'GET_FILE_INFO': 'Get file info',
+      'REFRESH_VARIABLES': 'Refresh variables',
+      'GET_LOCAL_COMPONENTS': 'Get local components',
+      'CLEAR_CONSOLE': 'Clear console',
+      'RELOAD_UI': 'Reload UI',
+      'GET_VARIABLES_DATA': 'Get variables data',
+      'RESIZE_UI': null // internal, don't log
+    };
+
+    var FIGMA_API_PATTERNS = [
+      { re: /figma\.create(\w+)/,           fn: function(m) { return 'Create ' + camelToWords(m[1]); } },
+      { re: /figma\.getNodeByIdAsync/,      fn: function()  { return 'Get node'; } },
+      { re: /figma\.setCurrentPageAsync/,   fn: function()  { return 'Switch page'; } },
+      { re: /figma\.loadFontAsync/,         fn: function()  { return 'Load font'; } },
+      { re: /figma\.loadAllPagesAsync/,     fn: function()  { return 'Load all pages'; } },
+      { re: /figma\.currentPage\.findAll/,  fn: function()  { return 'Find nodes'; } },
+      { re: /figma\.currentPage\.findOne/,  fn: function()  { return 'Find node'; } },
+      { re: /figma\.(union|subtract|intersect|flatten)\b/, fn: function(m) { return 'Boolean ' + m[1]; } },
+      { re: /\.exportAsync/,                fn: function()  { return 'Export'; } },
+      { re: /\.clone\(\)/,                  fn: function()  { return 'Clone node'; } },
+      { re: /\.remove\(\)/,                 fn: function()  { return 'Remove node'; } },
+      { re: /\.appendChild\b/,              fn: function()  { return 'Append child'; } },
+      { re: /\.insertChild\b/,              fn: function()  { return 'Insert child'; } },
+      { re: /\.resize\(/,                   fn: function()  { return 'Resize'; } },
+      { re: /\.characters\s*=/,             fn: function()  { return 'Set text'; } },
+      { re: /\.fills\s*=/,                  fn: function()  { return 'Set fills'; } },
+      { re: /\.strokes\s*=/,                fn: function()  { return 'Set strokes'; } },
+      { re: /\.effects\s*=/,                fn: function()  { return 'Set effects'; } },
+      { re: /combineAsVariants/,            fn: function()  { return 'Combine as variants'; } },
+      { re: /swapComponent/,                fn: function()  { return 'Swap component'; } }
+    ];
+
+    function camelToWords(s) {
+      return s.replace(/([a-z])([A-Z])/g, '$1 $2').toLowerCase();
+    }
+
+    function truncate(s, max) {
+      max = max || 60;
+      if (s.length <= max) return s;
+      return s.substring(0, max - 1) + '…';
+    }
+
+    function summariseCommand(type, params) {
+      if (type === 'EXECUTE_CODE' && params && params.code) {
+        var firstLine = params.code.trim().split('\n')[0].trim();
+        if (firstLine.indexOf('//') === 0) {
+          return truncate(firstLine.replace(/^\/\/\s*/, '').replace(/[—–]/g, '-'));
+        }
+        var hits = [];
+        for (var i = 0; i < FIGMA_API_PATTERNS.length; i++) {
+          var m = params.code.match(FIGMA_API_PATTERNS[i].re);
+          if (m) hits.push(FIGMA_API_PATTERNS[i].fn(m));
+        }
+        if (hits.length > 0) {
+          var unique = hits.filter(function(v, i, a) { return a.indexOf(v) === i; });
+          // Drop "Get node" when it appears alongside a more specific operation — it's just boilerplate setup
+          var meaningful = unique.length > 1
+            ? unique.filter(function(v) { return v !== 'Get node'; })
+            : unique;
+          return truncate(meaningful.join(', '));
+        }
+        // No recognisable Figma API pattern — prefix with <Code> so engineers can spot it, then show first line for context
+        var lines = params.code.split('\n');
+        for (var j = 0; j < lines.length; j++) {
+          var line = lines[j].trim();
+          if (line && line.indexOf('//') !== 0 && line.indexOf('/*') !== 0) {
+            return truncate('<Code> ' + line);
+          }
+        }
+        return '<Code>';
+      }
+      if (COMMAND_LABELS.hasOwnProperty(type)) return COMMAND_LABELS[type];
+      // Fallback: turn "RENAME_VARIABLE" into "Rename variable"
+      return type.replace(/_/g, ' ').toLowerCase().replace(/^\w/, function(c) { return c.toUpperCase(); });
+    }
+
+    // Wrap sendPluginCommand so every sent command is logged with a human summary and duration.
+    var _origSendPluginCommand = window.sendPluginCommand;
+    window.sendPluginCommand = function(type, params, timeoutMs) {
+      var summary = summariseCommand(type, params);
+      var durEntry = null;
+      var histIdx = -1;
+      if (summary) {
+        logWithHistory(summary, 'info');
+        histIdx = logHistory.length - 1;
+        ensureLogRefs();
+        durEntry = logEntriesEl ? logEntriesEl.lastElementChild : null;
+      }
+      var t0 = Date.now();
+      return _origSendPluginCommand(type, params, timeoutMs).then(
+        function(result) {
+          if (durEntry) {
+            var d = durEntry.querySelector('.log-dur');
+            if (d) d.textContent = (Date.now() - t0) + 'ms';
+            if (result && result.success === false) {
+              durEntry.className = durEntry.className.replace(/\b(info|success|warn)\b/, 'error');
+              durEntry.dataset.logLevel = 'error';
+              var m = durEntry.querySelector('.log-msg');
+              if (m && m.textContent.indexOf('[!]') !== 0) m.textContent = '[!] ' + m.textContent;
+              if (histIdx >= 0 && logHistory[histIdx]) {
+                logHistory[histIdx].level = 'error';
+              }
+            }
+          }
+          return result;
+        },
+        function(err) {
+          if (durEntry) {
+            var d = durEntry.querySelector('.log-dur');
+            if (d) d.textContent = (Date.now() - t0) + 'ms';
+            durEntry.className = durEntry.className.replace(/\b(info|success|warn)\b/, 'error');
+            durEntry.dataset.logLevel = 'error';
+            var m = durEntry.querySelector('.log-msg');
+            if (m && m.textContent.indexOf('[!]') !== 0) m.textContent = '[!] ' + m.textContent;
+            if (histIdx >= 0 && logHistory[histIdx]) {
+              logHistory[histIdx].level = 'error';
+              logHistory[histIdx].message = '[!] ' + logHistory[histIdx].message;
+            }
+          }
+          throw err;
+        }
+      );
+    };
+
+    // Populate Info panel from GET_FILE_INFO response.
+    function updateInfoPanel() {
+      _origSendPluginCommand('GET_FILE_INFO', {}).then(function(result) {
+        var info = (result && result.fileInfo) || result || {};
+        var fileEl = document.getElementById('info-file');
+        var pageEl = document.getElementById('info-page');
+        if (fileEl && info.fileName) fileEl.textContent = info.fileName;
+        if (pageEl && info.currentPage) pageEl.textContent = info.currentPage;
+        // Version is TJ's hardcoded PLUGIN_VERSION; not displayed to avoid confusion
+        // with the npm package version. Still kept in memory for audit export.
+        if (info.pluginVersion) {
+          PLUGIN_VERSION = 'v' + info.pluginVersion;
+        }
+      }).catch(function() { /* ignore */ });
+    }
+
+    // Update "N server(s)" count in log header.
+    function updateServerCount() {
+      var n = 0;
+      if (typeof window.__wsGetActiveConnections === 'function') {
+        n = window.__wsGetActiveConnections().length;
+      }
+      var el = document.getElementById('log-servers');
+      if (el) el.textContent = n + ' server(s)';
+    }
+
+    // Real TURN ON / TURN OFF: toggles the local WebSocket bridge.
+    function setCtaState(state) {
+      ensureLogRefs();
+      if (!_ctaBtn) return;
+      if (state === 'on')        { _ctaBtn.textContent = 'Pause';       _ctaBtn.disabled = false; }
+      else if (state === 'paused')   { _ctaBtn.textContent = 'Resume';      _ctaBtn.disabled = false; }
+      else if (state === 'reconnect'){ _ctaBtn.textContent = 'Reconnect';   _ctaBtn.disabled = false; }
+      else if (state === 'scanning') { _ctaBtn.textContent = 'In progress'; _ctaBtn.disabled = true; }
+    }
+
+    function toggleLocalConnection() {
+      ensureLogRefs();
+      if (!_ctaBtn) return;
+      var label = _ctaBtn.textContent;
+      if (label === 'Pause') {
+        if (typeof window.__wsDisconnectAll === 'function') window.__wsDisconnectAll();
+        setCtaState('paused');
+        updateStatus('disconnected', false, false);
+        logWithHistory('Paused', 'warn');
+      } else if (label === 'Resume' || label === 'Reconnect') {
+        setCtaState('scanning');
+        updateStatus('connecting', false, false);
+        logWithHistory((label === 'Reconnect' ? 'Reconnecting' : 'Resuming') + ', scanning ports 9223-9232', 'info');
+        if (typeof window.__wsManualScan === 'function') window.__wsManualScan();
+        else if (typeof window.__wsScanAndConnect === 'function') window.__wsScanAndConnect();
+        // Watch for connection success or scan timeout.
+        var attempts = 0;
+        var poller = setInterval(function() {
+          attempts++;
+          var n = window.__wsGetActiveConnections ? window.__wsGetActiveConnections().length : 0;
+          if (n > 0) {
+            clearInterval(poller);
+            setCtaState('on');
+            updateStatus('ready', true, false);
+          } else if (attempts > 20) { // ~10s max
+            clearInterval(poller);
+            setCtaState('paused');
+            updateStatus('error', false, true);
+            logWithHistory('Resume failed - no MCP server found', 'error');
+          }
+        }, 500);
+      }
+    }
+
+    // Keep the CTA button honest about the real connection state. The status
+    // dot is driven by Figma-side data (variables loaded); this reconciles the
+    // button with the actual number of live MCP server connections so a
+    // never-connected or dropped plugin shows a clickable "Reconnect" instead
+    // of a misleading "Pause". Skips while a scan is mid-flight (button disabled
+    // or __wsIsScanning) to avoid fighting the transient state set on click.
+    function reconcileCta() {
+      ensureLogRefs();
+      if (!_ctaBtn || _ctaBtn.disabled) return;
+      if (typeof window.__wsIsScanning === 'function' && window.__wsIsScanning()) return;
+      var n = (typeof window.__wsGetActiveConnections === 'function') ? window.__wsGetActiveConnections().length : 0;
+      var paused = (typeof window.__wsIsPaused === 'function') ? window.__wsIsPaused() : false;
+      if (paused) {
+        if (_ctaBtn.textContent !== 'Resume') setCtaState('paused');
+      } else if (n > 0) {
+        if (_ctaBtn.textContent !== 'Pause') setCtaState('on');
+      } else {
+        if (_ctaBtn.textContent !== 'Reconnect') setCtaState('reconnect');
+      }
+    }
+
+    // Periodic refresh of server count, info panel, and CTA state (cheap, <1ms).
+    setInterval(function() {
+      updateServerCount();
+      reconcileCta();
+      // Only refresh info if the panel is visible (cheap gate).
+      var info = document.getElementById('info-panel');
+      if (info && info.classList.contains('visible')) updateInfoPanel();
+    }, 2000);
+
+    // One-shot on first ready.
+    setTimeout(function() { updateServerCount(); updateInfoPanel(); }, 500);
+
+    // Size the plugin window to fit content on first paint.
+    requestAnimationFrame(autoResize);
+
     function resetCloudUI() {
       var statusEl = document.getElementById('cloud-status');
       var btn = document.getElementById('cloud-btn');