figma-rust-mcp 2.8.4 → 2.9.5

package/plugin/ui.html

@@ -5,61 +5,74 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Figma MCP</title>
   <style>
-    /* ── DESIGN TOKENS ── */
+    /* ── GHOSTTY DESIGN SYSTEM (High-Performance Native Terminal Aesthetic) ── */
     :root {
-      --bg:          #09090f;
-      --surface-1:   #0f1117;
-      --surface-2:   #141720;
-      --surface-3:   #1a1f2e;
-      --surface-4:   #222844;
-      --border-1:    rgba(255,255,255,0.05);
-      --border-2:    rgba(255,255,255,0.10);
-      --border-3:    rgba(255,255,255,0.16);
-      --text-1:      #f0f2f8;
-      --text-2:      #8b95b0;
-      --text-3:      #4e5873;
-      --accent:      #6366f1;
-      --accent-2:    #06b6d4;
-      --green:       #22d3a0;
-      --amber:       #f59e0b;
-      --rose:        #f43f5e;
-      --violet:      #a78bfa;
-      --radius-sm:   6px;
-      --radius-md:   10px;
-      --radius-lg:   14px;
-      --transition:  0.18s cubic-bezier(.4,0,.2,1);
+      --bg:             #0d0e12;
+      --surface-base:   #12141a;
+      --surface-card:   #171922;
+      --surface-hover:  #1d202b;
+      --surface-active: #242837;
+
+      --border-subtle:  rgba(255, 255, 255, 0.07);
+      --border-light:   rgba(255, 255, 255, 0.13);
+      --border-ghost:   rgba(147, 129, 255, 0.35);
+
+      --text-primary:   #f4f4f7;
+      --text-secondary: #9aa1b2;
+      --text-muted:     #52596d;
+      --text-dim:       #363c4e;
+
+      /* Ghostty Signature Palette */
+      --ghost-lavender: #9381ff;
+      --ghost-glow:     rgba(147, 129, 255, 0.22);
+      --ghost-mint:     #34d399;
+      --ghost-mint-glow:rgba(52, 211, 153, 0.20);
+      --ghost-cyan:     #38bdf8;
+      --ghost-peach:    #ff9f68;
+      --ghost-rose:     #fb7185;
+      --ghost-amber:    #fbbf24;
+
+      --radius-xs:      4px;
+      --radius-sm:      6px;
+      --radius-md:      9px;
+      --radius-full:    9999px;
+
+      --font-ui:        -apple-system, BlinkMacSystemFont, 'Pretendard', 'Inter', 'SF Pro Text', sans-serif;
+      --font-mono:      'JetBrains Mono', 'SF Mono', 'Fira Code', Menlo, monospace;
+      --transition:     0.14s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     html, body { width: 100%; height: 100%; overflow: hidden; }
 
     body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Text', sans-serif;
+      font-family: var(--font-ui);
       background: var(--bg);
-      color: var(--text-1);
+      color: var(--text-primary);
       font-size: 11px;
-      line-height: 1.5;
+      line-height: 1.4;
       -webkit-font-smoothing: antialiased;
       user-select: none;
       display: flex;
       flex-direction: column;
     }
 
+    /* Ghostty subtle atmospheric ambient */
     body::before {
       content: '';
       position: fixed;
-      top: -80px; left: -60px;
+      top: -80px; left: -50px;
       width: 260px; height: 260px;
-      background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 70%);
+      background: radial-gradient(circle, rgba(147, 129, 255, 0.07) 0%, transparent 65%);
       pointer-events: none;
       z-index: 0;
     }
     body::after {
       content: '';
       position: fixed;
-      bottom: -60px; right: -40px;
-      width: 200px; height: 200px;
-      background: radial-gradient(circle, rgba(6,182,212,0.06) 0%, transparent 70%);
+      bottom: -60px; right: -50px;
+      width: 220px; height: 220px;
+      background: radial-gradient(circle, rgba(52, 211, 153, 0.05) 0%, transparent 65%);
       pointer-events: none;
       z-index: 0;
     }
@@ -70,339 +83,594 @@
       display: flex;
       flex-direction: column;
       height: 100%;
-      padding: 10px;
-      gap: 7px;
+      padding: 8px;
+      gap: 6px;
     }
 
-    /* HEADER */
+    /* ── HEADER (Ghostty macOS Native Window Chrome) ── */
     .header {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      background: var(--surface-1);
-      border: 1px solid var(--border-1);
+      background: var(--surface-base);
+      border: 1px solid var(--border-subtle);
       border-radius: var(--radius-md);
-      padding: 8px 10px;
+      padding: 6px 8px;
+      flex-shrink: 0;
+      box-shadow: 0 1px 2px rgba(0,0,0,0.4);
+    }
+
+    .brand { display: flex; align-items: center; gap: 7px; min-width: 0; }
+
+    .brand-logo {
+      width: 22px; height: 22px;
+      border-radius: var(--radius-xs);
+      background: linear-gradient(135deg, #7c3aed 0%, #9381ff 60%, #34d399 100%);
+      display: flex; align-items: center; justify-content: center;
+      flex-shrink: 0;
+      box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset, 0 2px 8px rgba(124, 58, 237, 0.35);
+      color: #ffffff;
+    }
+
+    .brand-info { display: flex; flex-direction: column; min-width: 0; }
+    .brand-title-row { display: flex; align-items: baseline; gap: 5px; }
+    .brand-name { font-size: 11px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1; }
+    .brand-ver { font-size: 8px; font-weight: 600; color: var(--text-muted); font-family: var(--font-mono); }
+    .brand-file {
+      font-size: 9px;
+      color: var(--text-secondary);
+      font-weight: 500;
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 140px;
+      margin-top: 1px;
+    }
+
+    .header-actions {
+      display: flex;
+      align-items: center;
+      gap: 4px;
       flex-shrink: 0;
+    }
+
+    .header-icon-btn {
+      width: 22px;
+      height: 22px;
+      padding: 0;
+      border-radius: var(--radius-xs);
+      background: var(--surface-card);
+      border: 1px solid var(--border-subtle);
+      color: var(--text-secondary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: all var(--transition);
+    }
+    .header-icon-btn:hover {
+      background: var(--surface-hover);
+      border-color: var(--border-light);
+      color: var(--text-primary);
+    }
+    .header-icon-btn:active { transform: scale(0.94); }
+    .header-icon-btn.indexing svg {
+      animation: spin 1s linear infinite;
+      color: var(--ghost-lavender);
+    }
+
+    .status-pill {
+      display: flex; align-items: center; gap: 5px;
+      background: var(--surface-card);
+      border: 1px solid var(--border-subtle);
+      border-radius: var(--radius-full);
+      padding: 2.5px 7px 2.5px 5px;
+      font-size: 9px; font-weight: 600;
+      color: var(--text-secondary);
+      transition: all var(--transition);
+      cursor: pointer;
+      font-family: var(--font-mono);
+    }
+    .status-pill:hover { border-color: var(--border-light); background: var(--surface-hover); color: var(--text-primary); }
+    .status-pill.connected { border-color: rgba(52,211,153,0.25); background: rgba(52,211,153,0.06); color: var(--ghost-mint); }
+    .status-pill.offline   { border-color: rgba(251,113,133,0.25); background: rgba(251,113,133,0.06); color: var(--ghost-rose); }
+    .status-pill.connecting { border-color: rgba(251,191,36,0.25); background: rgba(251,191,36,0.06); color: var(--ghost-amber); }
+
+    .dot {
+      width: 6px; height: 6px;
+      border-radius: 50%; flex-shrink: 0;
+      transition: all var(--transition);
+    }
+    .dot.green  { background: var(--ghost-mint); box-shadow: 0 0 0 2px rgba(52,211,153,0.2), 0 0 8px rgba(52,211,153,0.6); }
+    .dot.yellow { background: var(--ghost-amber); box-shadow: 0 0 0 2px rgba(251,191,36,0.2), 0 0 8px rgba(251,191,36,0.5); animation: pulse 1.4s ease-in-out infinite; }
+    .dot.red    { background: var(--ghost-rose); box-shadow: 0 0 0 2px rgba(251,113,133,0.2), 0 0 8px rgba(251,113,133,0.5); }
+
+    @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.85); } }
+
+    /* ── SELECTION INSPECTOR (Ghostty Split-Pane Card) ── */
+    .selection-card {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 7px;
+      background: var(--surface-card);
+      border: 1px solid var(--border-subtle);
+      border-radius: var(--radius-sm);
+      padding: 6px 8px;
+      flex-shrink: 0;
+      transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
       position: relative;
       overflow: hidden;
     }
-    .header::before {
+    .selection-card::before {
       content: '';
       position: absolute;
-      top: 0; left: 0; right: 0;
-      height: 1px;
+      top: 0; left: 0; right: 0; height: 1px;
       background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
     }
+    .selection-card.has-selection {
+      border-color: var(--border-ghost);
+      background: linear-gradient(135deg, rgba(147, 129, 255, 0.05) 0%, rgba(52, 211, 153, 0.02) 100%), var(--surface-card);
+    }
+    .selection-card.has-selection:hover {
+      border-color: rgba(147, 129, 255, 0.55);
+      background: linear-gradient(135deg, rgba(147, 129, 255, 0.09) 0%, rgba(52, 211, 153, 0.04) 100%), var(--surface-card);
+    }
 
-    .brand { display: flex; align-items: center; gap: 9px; }
+    .selection-main {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      min-width: 0;
+      flex: 1;
+      cursor: pointer;
+    }
 
-    .brand-logo {
-      width: 26px; height: 26px;
-      border-radius: 7px;
-      background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
+    .selection-icon-wrap {
+      width: 22px; height: 22px;
+      border-radius: var(--radius-xs);
+      background: var(--surface-base);
+      border: 1px solid var(--border-subtle);
       display: flex; align-items: center; justify-content: center;
       flex-shrink: 0;
-      box-shadow: 0 0 0 1px rgba(99,102,241,0.3), 0 4px 12px rgba(79,70,229,0.35);
+      color: var(--text-muted);
+      transition: all var(--transition);
+    }
+    .selection-card.has-selection .selection-icon-wrap {
+      background: rgba(147, 129, 255, 0.12);
+      border-color: rgba(147, 129, 255, 0.35);
+      color: var(--ghost-lavender);
     }
-    .brand-logo svg { display: block; }
-    .brand-info { display: flex; flex-direction: column; gap: 1px; }
-    .brand-name { font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px; color: var(--text-1); line-height: 1; }
-    .brand-file { font-size: 9px; color: var(--text-3); font-weight: 500; letter-spacing: 0.2px; line-height: 1; }
 
-    .status-pill {
-      display: flex; align-items: center; gap: 6px;
-      background: var(--surface-2);
-      border: 1px solid var(--border-1);
-      border-radius: 100px;
-      padding: 4px 10px 4px 7px;
-      font-size: 10px; font-weight: 600;
-      color: var(--text-2); letter-spacing: 0.1px;
-      transition: border-color var(--transition), background var(--transition);
+    .selection-text { display: flex; flex-direction: column; min-width: 0; }
+    .selection-name {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-primary);
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .selection-meta {
+      font-size: 9px;
+      color: var(--text-secondary);
+      font-family: var(--font-mono);
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
-    .status-pill.connected { border-color: rgba(34,211,160,0.25); background: rgba(34,211,160,0.06); }
-    .status-pill.offline   { border-color: rgba(244,63,94,0.2);   background: rgba(244,63,94,0.05);  }
 
-    .dot {
-      width: 7px; height: 7px;
-      border-radius: 50%; flex-shrink: 0;
-      transition: background var(--transition), box-shadow var(--transition);
+    .selection-actions {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex-shrink: 0;
     }
-    .dot.green  { background: var(--green);  box-shadow: 0 0 0 2px rgba(34,211,160,0.2),  0 0 8px rgba(34,211,160,0.5);  }
-    .dot.yellow { background: var(--amber);  box-shadow: 0 0 0 2px rgba(245,158,11,0.2),  0 0 8px rgba(245,158,11,0.4);  animation: blink 1.4s ease-in-out infinite; }
-    .dot.red    { background: var(--rose);   box-shadow: 0 0 0 2px rgba(244,63,94,0.2),   0 0 8px rgba(244,63,94,0.4);   }
 
-    @keyframes blink {
-      0%, 100% { opacity: 1; }
-      50%       { opacity: 0.2; }
+    .act-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      height: 22px;
+      padding: 0 6px;
+      border-radius: var(--radius-xs);
+      font-size: 8.5px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      background: var(--surface-base);
+      border: 1px solid var(--border-subtle);
+      color: var(--text-secondary);
+      cursor: pointer;
+      transition: all var(--transition);
+      letter-spacing: 0.2px;
+    }
+    .act-btn:hover {
+      background: var(--surface-hover);
+      border-color: var(--border-light);
+      color: var(--text-primary);
+    }
+    .act-btn:active { transform: scale(0.95); }
+    .act-btn.icon-only { width: 22px; padding: 0; }
+    .act-btn.badge-btn {
+      background: rgba(147, 129, 255, 0.12);
+      border-color: rgba(147, 129, 255, 0.28);
+      color: #d1c9ff;
+    }
+    .act-btn.badge-btn:hover {
+      background: rgba(147, 129, 255, 0.28);
+      border-color: rgba(147, 129, 255, 0.6);
+      color: #ffffff;
     }
 
-    /* STATS ROW */
-    .stats-row {
+    /* ── TELEMETRY SEGMENTED STATUSLINE ── */
+    .telemetry-ribbon {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
-      gap: 5px;
-      flex-shrink: 0;
-    }
-    .stats-subrow {
-      display: grid;
-      grid-template-columns: 1fr 1fr auto;
-      gap: 5px;
+      background: var(--surface-base);
+      border: 1px solid var(--border-subtle);
+      border-radius: var(--radius-sm);
+      overflow: hidden;
       flex-shrink: 0;
     }
 
-    .stat-card {
-      background: var(--surface-1);
-      border: 1px solid var(--border-1);
-      border-radius: var(--radius-sm);
-      padding: 6px 7px;
-      display: flex; flex-direction: column; gap: 2px;
-      transition: border-color var(--transition);
-    }
-    .stat-card:hover { border-color: var(--border-2); }
-
-    .stat-label {
-      font-size: 8px; font-weight: 700;
-      letter-spacing: 0.7px; text-transform: uppercase;
-      color: var(--text-3);
-    }
-    .stat-value {
-      font-size: 15px; font-weight: 800;
-      font-family: 'SF Mono', 'Fira Code', monospace;
-      line-height: 1.1;
-      display: flex; align-items: baseline; gap: 2px;
-    }
-    .stat-unit {
-      font-size: 8.5px; font-weight: 600; color: var(--text-3);
-    }
-    .stat-card.writes .stat-value { color: var(--violet); }
-    .stat-card.reads  .stat-value { color: var(--accent-2); }
-    .stat-card.errors .stat-value { color: var(--rose); }
-    .stat-card.speed  .stat-value { color: var(--green); }
-    .stat-card.memory .stat-value { color: var(--amber); }
-
-    .port-card {
-      background: var(--surface-1);
-      border: 1px solid var(--border-1);
-      border-radius: var(--radius-sm);
-      padding: 6px 9px;
-      display: flex; flex-direction: column; gap: 2px;
-      cursor: pointer;
+    .telemetry-cell {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
       justify-content: center;
-      transition: border-color var(--transition), background var(--transition);
+      padding: 4px 2px;
+      gap: 1px;
+      position: relative;
+      transition: background var(--transition);
     }
-    .port-card:hover { border-color: rgba(6,182,212,0.35); background: rgba(6,182,212,0.04); }
-    .port-label { font-size: 8px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: var(--text-3); }
-    .port-value { font-size: 12px; font-weight: 700; font-family: 'SF Mono', 'Fira Code', monospace; color: var(--accent-2); line-height: 1.1; }
+    .telemetry-cell:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      right: 0; top: 15%; bottom: 15%;
+      width: 1px;
+      background: var(--border-subtle);
+    }
+    .telemetry-cell:hover { background: rgba(255, 255, 255, 0.02); }
+
+    .telemetry-label {
+      font-size: 7.5px;
+      font-weight: 700;
+      letter-spacing: 0.6px;
+      text-transform: uppercase;
+      color: var(--text-muted);
+      font-family: var(--font-mono);
+    }
+    .telemetry-value {
+      font-size: 13px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+      display: flex;
+      align-items: baseline;
+      gap: 1.5px;
+    }
+    .telemetry-unit { font-size: 7.5px; font-weight: 600; color: var(--text-muted); }
 
-    /* TERMINAL */
+    .telemetry-cell.writes .telemetry-value { color: var(--ghost-lavender); }
+    .telemetry-cell.reads  .telemetry-value { color: var(--ghost-cyan); }
+    .telemetry-cell.speed  .telemetry-value { color: var(--ghost-mint); }
+    .telemetry-cell.ram    .telemetry-value { color: var(--ghost-peach); }
+
+    /* ── GHOSTTY STREAM CONSOLE BUFFER ── */
     .terminal-wrap {
       flex: 1; min-height: 0;
       display: flex; flex-direction: column;
-      background: var(--surface-1);
-      border: 1px solid var(--border-1);
+      background: var(--surface-base);
+      border: 1px solid var(--border-subtle);
       border-radius: var(--radius-md);
       overflow: hidden;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
     }
 
     .terminal-header {
       display: flex; align-items: center; justify-content: space-between;
-      padding: 6px 10px;
-      background: var(--surface-2);
-      border-bottom: 1px solid var(--border-1);
+      padding: 5px 7px;
+      background: rgba(255,255,255,0.02);
+      border-bottom: 1px solid var(--border-subtle);
       flex-shrink: 0;
     }
 
-    .terminal-title {
-      display: flex; align-items: center; gap: 6px;
-      font-size: 9px; font-weight: 700;
-      letter-spacing: 0.8px; text-transform: uppercase;
-      color: var(--text-3);
+    .terminal-tabs { display: flex; align-items: center; gap: 3px; }
+
+    .t-tab {
+      font-size: 8.5px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      letter-spacing: 0.2px;
+      padding: 2px 7px;
+      border-radius: var(--radius-xs);
+      color: var(--text-muted);
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      transition: all var(--transition);
     }
-    .t-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0.5; }
+    .t-tab:hover { color: var(--text-secondary); background: rgba(255,255,255,0.04); }
+    .t-tab.active { color: var(--text-primary); background: var(--surface-card); box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
+
+    .terminal-meta { display: flex; align-items: center; gap: 6px; }
 
     .event-badge {
-      font-size: 9px; font-weight: 600;
-      color: var(--text-3);
-      background: var(--surface-3);
-      border: 1px solid var(--border-1);
-      border-radius: 100px;
-      padding: 1px 7px;
+      font-size: 8px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--text-muted);
+      background: var(--surface-card);
+      border: 1px solid var(--border-subtle);
+      border-radius: var(--radius-full);
+      padding: 1px 6px;
     }
 
     .terminal-body {
       flex: 1;
-      padding: 8px 10px;
-      font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;
-      font-size: 10.5px; line-height: 1.6;
+      padding: 6px 8px;
+      font-family: var(--font-mono);
+      font-size: 9.5px;
+      line-height: 1.5;
       overflow-y: auto;
-      color: var(--text-2);
+      color: var(--text-secondary);
     }
     .terminal-body::-webkit-scrollbar { width: 3px; }
     .terminal-body::-webkit-scrollbar-track { background: transparent; }
-    .terminal-body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }
+    .terminal-body::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }
 
     .log-line {
-      display: flex; align-items: baseline; gap: 8px;
-      padding: 1px 3px; border-radius: 3px;
+      display: flex;
+      align-items: baseline;
+      gap: 6px;
+      padding: 1.5px 3px;
+      border-radius: 3px;
+      transition: background 0.1s ease;
     }
-    .log-line:hover { background: rgba(255,255,255,0.02); }
-    .log-ts { font-size: 9px; color: var(--text-3); flex-shrink: 0; letter-spacing: -0.2px; }
-    .log-msg { flex: 1; word-break: break-all; }
-    .log-line .ok   { color: var(--green); }
-    .log-line .err  { color: var(--rose); }
-    .log-line .info { color: var(--accent-2); }
+    .log-line:hover { background: rgba(255,255,255,0.03); }
+    .log-ts { font-size: 8px; color: var(--text-muted); flex-shrink: 0; letter-spacing: -0.2px; }
+    .log-prompt { color: var(--ghost-lavender); font-size: 9px; flex-shrink: 0; font-weight: 700; }
+    .log-msg { flex: 1; word-break: break-all; color: var(--text-secondary); }
+    .log-msg.ok   { color: var(--ghost-mint); }
+    .log-msg.err  { color: var(--ghost-rose); }
+    .log-msg.info { color: var(--ghost-cyan); }
 
     .terminal-empty {
       display: flex; flex-direction: column;
       align-items: center; justify-content: center;
-      height: 100%; gap: 6px; color: var(--text-3);
+      height: 100%; gap: 5px; color: var(--text-muted);
     }
-    .terminal-empty-icon { font-size: 20px; opacity: 0.4; }
-    .terminal-empty-text { font-size: 10px; opacity: 0.5; }
+    .terminal-empty-icon { font-size: 16px; opacity: 0.35; }
+    .terminal-empty-text { font-size: 9.5px; opacity: 0.6; font-family: var(--font-mono); }
 
-    /* FOOTER */
+    /* ── FOOTER ACTIONS ── */
     .footer { display: flex; gap: 6px; flex-shrink: 0; }
 
     .btn {
       display: inline-flex; align-items: center; justify-content: center;
-      gap: 5px; padding: 7px 11px;
+      gap: 6px; padding: 6px 11px;
       border-radius: var(--radius-sm);
-      font-size: 10.5px; font-weight: 600;
+      font-size: 10px; font-weight: 600;
+      font-family: var(--font-ui);
       cursor: pointer;
-      border: 1px solid var(--border-2);
-      background: var(--surface-2);
-      color: var(--text-2);
+      border: 1px solid var(--border-subtle);
+      background: var(--surface-card);
+      color: var(--text-secondary);
       transition: all var(--transition);
       letter-spacing: 0.1px;
       white-space: nowrap;
     }
-    .btn:hover { background: var(--surface-3); border-color: var(--border-3); color: var(--text-1); }
-    .btn:active { transform: scale(0.96); }
+    .btn:hover { background: var(--surface-hover); border-color: var(--border-light); color: var(--text-primary); }
+    .btn:active { transform: scale(0.97); }
 
     .btn-icon { width: 30px; height: 30px; padding: 0; flex-shrink: 0; }
 
     .btn-primary {
       flex: 1;
-      background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
-      border-color: transparent; color: #fff; font-weight: 700;
-      box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 4px 16px rgba(79,70,229,0.3);
+      background: linear-gradient(135deg, rgba(124,58,237,0.9) 0%, rgba(147,129,255,0.9) 50%, rgba(52,211,153,0.85) 100%);
+      border-color: rgba(147, 129, 255, 0.45);
+      color: #ffffff;
+      font-weight: 600;
+      box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 3px 12px rgba(124, 58, 237, 0.28);
     }
     .btn-primary:hover {
-      opacity: 0.9; border-color: transparent; color: #fff;
-      box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 6px 20px rgba(79,70,229,0.4);
+      background: linear-gradient(135deg, #7c3aed 0%, #9381ff 50%, #34d399 100%);
+      border-color: rgba(147, 129, 255, 0.7);
+      color: #ffffff;
+      box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 4px 16px rgba(124, 58, 237, 0.45);
     }
 
-    .btn-live {
-      flex: 1;
-      background: rgba(34,211,160,0.08);
-      border-color: rgba(34,211,160,0.25);
-      color: var(--green);
+    .btn-primary.indexing svg { animation: spin 1s linear infinite; }
+    @keyframes spin { 100% { transform: rotate(360deg); } }
+
+    /* ── TOAST NOTIFICATION ── */
+    .toast {
+      position: fixed;
+      bottom: 45px;
+      left: 50%;
+      transform: translateX(-50%) translateY(15px);
+      opacity: 0;
+      pointer-events: none;
+      background: rgba(18, 20, 26, 0.96);
+      border: 1px solid rgba(147, 129, 255, 0.3);
+      backdrop-filter: blur(8px);
+      box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 12px rgba(147, 129, 255, 0.2);
+      border-radius: var(--radius-full);
+      padding: 5px 12px;
+      font-size: 9.5px;
+      font-weight: 600;
+      color: var(--text-primary);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      z-index: 100;
+      transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    .toast.show {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+      pointer-events: auto;
     }
-    .btn-live:hover { background: rgba(34,211,160,0.12); border-color: rgba(34,211,160,0.4); color: var(--green); }
 
     /* RESIZE GRIP */
     .resize-grip {
       position: fixed; right: 0; bottom: 0;
-      width: 24px; height: 24px;
+      width: 18px; height: 18px;
       cursor: nwse-resize; opacity: 0.35;
-      color: var(--text-2);
+      color: var(--text-secondary);
       transition: opacity var(--transition), color var(--transition);
       z-index: 1000;
       display: flex; align-items: flex-end; justify-content: flex-end;
-      padding: 4px;
+      padding: 3px;
       touch-action: none;
     }
-    .resize-grip:hover { opacity: 1; color: var(--accent-2); }
+    .resize-grip:hover { opacity: 1; color: var(--ghost-mint); }
   </style>
 </head>
 <body>
 
   <div class="app">
 
+    <!-- ── HEADER (Ghostty macOS Native Window Chrome) ── -->
     <header class="header">
       <div class="brand">
         <div class="brand-logo">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
-            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
+          <!-- Ghostty Ghost Mascot Icon -->
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M9 10h.01M15 10h.01M12 2a8 8 0 0 0-8 8v11l3-2 3 2 2-2 2 2 3-2 3 2V10a8 8 0 0 0-8-8z"/>
           </svg>
         </div>
         <div class="brand-info">
-          <span class="brand-name">Figma MCP</span>
-          <span class="brand-file" id="session-display">READY</span>
+          <div class="brand-title-row">
+            <span class="brand-name">Figma MCP</span>
+            <span class="brand-ver">v2.8</span>
+          </div>
+          <span class="brand-file" id="doc-display" title="Active Document">Ready</span>
         </div>
       </div>
 
-      <div class="status-pill" id="status-pill">
-        <div class="dot yellow" id="dot"></div>
-        <span id="status-text">Connecting</span>
-        <span id="mode-badge" style="display:none;color:var(--text-3)">—</span>
+      <div class="header-actions">
+        <!-- Re-index Icon Button -->
+        <button class="header-icon-btn" id="reindex-btn" onclick="triggerManualReindex()" title="Sync Index (Re-index Figma canvas to MCP)">
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+            <polygon points="12 2 2 7 12 12 22 7 12 2"/>
+            <polyline points="2 17 12 22 22 17"/>
+            <polyline points="2 12 12 17 22 12"/>
+          </svg>
+        </button>
+
+        <!-- Reconnect / Probe Bridge Port Button -->
+        <button class="header-icon-btn" id="reconnect-btn" onclick="reconnect()" title="Reconnect / Probe Bridge Port">
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
+          </svg>
+        </button>
+
+        <!-- Connection Status Pill -->
+        <div class="status-pill" id="status-pill" onclick="handleStatusClick()" title="Connection Status (Click for details)">
+          <div class="dot yellow" id="dot"></div>
+          <span id="status-text">Connecting</span>
+        </div>
       </div>
     </header>
 
-    <div class="stats-row">
-      <div class="stat-card writes" title="Write Operations">
-        <span class="stat-label">Writes</span>
-        <span class="stat-value" id="write-count">0</span>
+    <!-- ── SELECTION INSPECTOR HERO CARD ── -->
+    <div class="selection-card" id="selection-card">
+      <div class="selection-main" onclick="focusSelection()" title="Click to center view on selection">
+        <div class="selection-icon-wrap" id="selection-icon">
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="9"/>
+          </svg>
+        </div>
+        <div class="selection-text">
+          <span class="selection-name" id="selection-name">No selection</span>
+          <span class="selection-meta" id="selection-meta">Document canvas root</span>
+        </div>
+      </div>
+
+      <div class="selection-actions" id="selection-actions" style="display:none;">
+        <!-- Snapshot PNG button -->
+        <button class="act-btn icon-only" id="snapshot-btn" onclick="exportSelectionImage(event)" title="📸 Copy layer PNG (2x) to clipboard">
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
+            <circle cx="12" cy="13" r="4"/>
+          </svg>
+        </button>
+
+        <!-- Focus / Center on Canvas button -->
+        <button class="act-btn icon-only" onclick="focusSelection()" title="🎯 Center view on canvas">
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"/>
+            <line x1="22" y1="12" x2="18" y2="12"/>
+            <line x1="6" y1="12" x2="2" y2="12"/>
+            <line x1="12" y1="6" x2="12" y2="2"/>
+            <line x1="12" y1="22" x2="12" y2="18"/>
+          </svg>
+        </button>
+
+        <!-- Copy Node ID badge -->
+        <button class="act-btn badge-btn" id="selection-badge" onclick="copySelectionId(event)" title="📋 Click to copy Figma Node ID">
+          FRAME
+        </button>
+      </div>
+    </div>
+
+    <!-- ── TELEMETRY SEGMENTED RIBBON ── -->
+    <div class="telemetry-ribbon">
+      <div class="telemetry-cell writes" title="Write operations executed by AI">
+        <span class="telemetry-label">Writes</span>
+        <span class="telemetry-value" id="write-count">0</span>
       </div>
-      <div class="stat-card reads" title="Read Operations">
-        <span class="stat-label">Reads</span>
-        <span class="stat-value" id="read-count">0</span>
+      <div class="telemetry-cell reads" title="Read / Inspection operations executed">
+        <span class="telemetry-label">Reads</span>
+        <span class="telemetry-value" id="read-count">0</span>
       </div>
-      <div class="stat-card speed" title="Last Request Execution Time / Speed">
-        <span class="stat-label">Speed</span>
-        <span class="stat-value"><span id="speed-display">0</span><span class="stat-unit">ms</span></span>
+      <div class="telemetry-cell speed" title="Execution latency of last request">
+        <span class="telemetry-label">Latency</span>
+        <span class="telemetry-value"><span id="speed-display">0</span><span class="telemetry-unit">ms</span></span>
       </div>
-      <div class="stat-card memory" title="Server Memory Usage (RAM RSS)">
-        <span class="stat-label">RAM</span>
-        <span class="stat-value"><span id="ram-display">3.2</span><span class="stat-unit">MB</span></span>
+      <div class="telemetry-cell ram" title="Rust MCP Server Memory (RAM RSS)">
+        <span class="telemetry-label">RAM</span>
+        <span class="telemetry-value"><span id="ram-display">3.2</span><span class="telemetry-unit">MB</span></span>
       </div>
     </div>
 
+    <!-- ── STREAM CONSOLE TERMINAL ── -->
     <section class="terminal-wrap">
       <div class="terminal-header">
-        <div class="terminal-title">
-          <div class="t-dot"></div>
-          Stream Console
+        <div class="terminal-tabs">
+          <button class="t-tab active" onclick="setLogFilter('all', this)">All</button>
+          <button class="t-tab" onclick="setLogFilter('writes', this)">Writes</button>
+          <button class="t-tab" onclick="setLogFilter('reads', this)">Reads</button>
+        </div>
+        <div class="terminal-meta">
+          <span class="event-badge" id="log-count">0 ev</span>
+          <button class="act-btn icon-only" onclick="clearLog()" title="Clear stream console" style="height:18px;width:18px;border-radius:3px;">
+            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/>
+            </svg>
+          </button>
         </div>
-        <span class="event-badge" id="log-count">0 events</span>
       </div>
       <div class="terminal-body" id="log">
         <div class="terminal-empty" id="log-empty">
           <div class="terminal-empty-icon">◌</div>
-          <div class="terminal-empty-text">Waiting for events…</div>
+          <div class="terminal-empty-text">Listening on MCP bridge…</div>
         </div>
       </div>
     </section>
 
-    <footer class="footer">
-      <button class="btn btn-icon" onclick="clearLog()" title="Clear log">
-        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/>
-        </svg>
-      </button>
-
-      <button class="btn" id="reindex-btn" onclick="triggerManualReindex()" title="Re-index Figma document to Rust memory" style="background:var(--surface-2);border:1px solid var(--border-2);color:var(--text-2);font-size:10px;padding:0 10px;gap:5px;">
-        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"/>
-        </svg>
-        <span id="reindex-btn-label">⚡ Index</span>
-      </button>
-
-      <button class="btn btn-primary" id="launch-btn" onclick="launchServer()" title="Start Figma MCP server">
-        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-          <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
-        </svg>
-        <span id="launch-btn-label">Launch Server</span>
-      </button>
-
-      <button class="btn btn-icon" onclick="reconnect()" title="Reconnect">
-        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
-        </svg>
-      </button>
-    </footer>
+  </div>
 
+  <!-- Floating Toast Component -->
+  <div class="toast" id="toast">
+    <span id="toast-icon">✓</span>
+    <span id="toast-text">Action completed</span>
   </div>
 
   <div class="resize-grip" id="resize-grip" title="Drag to resize">
@@ -427,21 +695,62 @@
     var writeCount = 0, readCount = 0, errCount = 0;
     var totalLogEvents = 0;
     var polling = true;
+    var activeLogFilter = 'all';
+
+    var logEl             = document.getElementById("log");
+    var logEmptyEl        = document.getElementById("log-empty");
+    var dotEl             = document.getElementById("dot");
+    var statusEl          = document.getElementById("status-text");
+    var statusPill        = document.getElementById("status-pill");
+    var logCountEl        = document.getElementById("log-count");
+    var docDispEl         = document.getElementById("doc-display");
+    var speedEl           = document.getElementById("speed-display");
+    var ramEl             = document.getElementById("ram-display");
+    var reindexBtn        = document.getElementById("reindex-btn");
+    var reindexBtnLabel   = document.getElementById("reindex-btn-label");
+
+    var selCardEl         = document.getElementById("selection-card");
+    var selIconEl         = document.getElementById("selection-icon");
+    var selNameEl         = document.getElementById("selection-name");
+    var selMetaEl         = document.getElementById("selection-meta");
+    var selActionsEl      = document.getElementById("selection-actions");
+    var selBadgeEl        = document.getElementById("selection-badge");
+    var snapshotBtn       = document.getElementById("snapshot-btn");
+    var toastEl           = document.getElementById("toast");
+    var toastTextEl       = document.getElementById("toast-text");
+    var toastIconEl       = document.getElementById("toast-icon");
+
+    var currentSelectionCount = 0;
+    var currentSelectionId = null;
+    var currentSelectionName = "";
+
+    function showToast(msg, icon) {
+      if (!toastEl) return;
+      if (toastTextEl) toastTextEl.textContent = msg;
+      if (toastIconEl) toastIconEl.textContent = icon || "✓";
+      toastEl.classList.add("show");
+      setTimeout(function() {
+        toastEl.classList.remove("show");
+      }, 2200);
+    }
 
-    var logEl         = document.getElementById("log");
-    var logEmptyEl    = document.getElementById("log-empty");
-    var dotEl         = document.getElementById("dot");
-    var statusEl      = document.getElementById("status-text");
-    var modeEl        = document.getElementById("mode-badge");
-    var logCountEl    = document.getElementById("log-count");
-    var sessionDispEl = document.getElementById("session-display");
-    var launchBtn     = document.getElementById("launch-btn");
-    var launchBtnLabel = document.getElementById("launch-btn-label");
-    var statusPill    = document.getElementById("status-pill");
-    var speedEl       = document.getElementById("speed-display");
-    var ramEl         = document.getElementById("ram-display");
-    var reindexBtn    = document.getElementById("reindex-btn");
-    var reindexBtnLabel = document.getElementById("reindex-btn-label");
+    function setLogFilter(filter, el) {
+      activeLogFilter = filter;
+      var tabs = document.querySelectorAll(".t-tab");
+      tabs.forEach(function(t) { t.classList.remove("active"); });
+      if (el) el.classList.add("active");
+
+      var lines = logEl.querySelectorAll(".log-line");
+      lines.forEach(function(line) {
+        if (filter === 'all') {
+          line.style.display = "flex";
+        } else if (filter === 'writes') {
+          line.style.display = line.dataset.type === 'write' ? "flex" : "none";
+        } else if (filter === 'reads') {
+          line.style.display = line.dataset.type === 'read' ? "flex" : "none";
+        }
+      });
+    }
 
     async function fetchServerStats() {
       if (!everConnected) return;
@@ -460,13 +769,42 @@
     function triggerManualReindex() {
       if (!everConnected) {
         log("Cannot index: Server is offline", "err");
+        showSetupGuide();
         return;
       }
-      if (reindexBtnLabel) reindexBtnLabel.textContent = "Indexing…";
+      if (reindexBtn) reindexBtn.classList.add("indexing");
+      showToast("Syncing canvas index…", "⚡");
       log("⚡ Manual re-index triggered…", "info");
       parent.postMessage({ pluginMessage: { type: "manual-reindex" } }, "*");
     }
 
+    function focusSelection() {
+      if (currentSelectionCount > 0) {
+        parent.postMessage({ pluginMessage: { type: "zoom-to-selection" } }, "*");
+      }
+    }
+
+    function exportSelectionImage(event) {
+      if (event) event.stopPropagation();
+      if (currentSelectionCount === 0) return;
+      if (snapshotBtn) snapshotBtn.style.opacity = "0.5";
+      parent.postMessage({ pluginMessage: { type: "export-selection-image", scale: 2 } }, "*");
+    }
+
+    function copySelectionId(event) {
+      if (event) event.stopPropagation();
+      if (!currentSelectionId) return;
+      if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(currentSelectionId).then(function() {
+          showToast("Node ID: " + currentSelectionId + " copied", "📋");
+        }).catch(function() {
+          prompt("Copy Node ID:", currentSelectionId);
+        });
+      } else {
+        prompt("Copy Node ID:", currentSelectionId);
+      }
+    }
+
     var READ_OPS = [
       "get_selection","get_design","get_page_nodes","screenshot",
       "get_styles","get_local_components","get_viewport","get_variables",
@@ -474,33 +812,22 @@
       "index_scan"
     ];
 
-    function setStatus(state, text, mode) {
-      dotEl.className = "dot " + state;
+    function setStatus(state, text) {
+      dotEl.className = "dot " + (state === "green" ? "green" : (state === "yellow" ? "yellow" : "red"));
       statusEl.textContent = text;
-      if (mode && modeEl) modeEl.textContent = mode;
 
       statusPill.className = "status-pill";
-      if (state === "green") statusPill.classList.add("connected");
-      if (state === "red")   statusPill.classList.add("offline");
-
-      if (launchBtn && launchBtnLabel) {
-        launchBtn.className = "btn";
-        if (state === "green") {
-          launchBtn.classList.add("btn-live");
-          launchBtnLabel.textContent = "● Live";
-        } else {
-          launchBtn.classList.add("btn-primary");
-          launchBtnLabel.textContent = state === "yellow" ? "Connecting…" : "Launch Server";
-        }
-      }
+      if (state === "green")  statusPill.classList.add("connected");
+      if (state === "red")    statusPill.classList.add("offline");
+      if (state === "yellow") statusPill.classList.add("connecting");
     }
 
-    function launchServer() {
-      if (wsConnected) {
-        log("Server is already running and connected!", "ok");
-        return;
+    function handleStatusClick() {
+      if (!wsConnected) {
+        showSetupGuide();
+      } else {
+        showToast("Bridge active on port " + currentPort, "⚡");
       }
-      showSetupGuide();
     }
 
     function showSetupGuide() {
@@ -511,41 +838,41 @@
       overlay.id = "setup-overlay";
       Object.assign(overlay.style, {
         position: "fixed", inset: "0",
-        background: "rgba(9,9,15,0.96)",
-        backdropFilter: "blur(4px)",
+        background: "rgba(9,10,15,0.96)",
+        backdropFilter: "blur(8px)",
         zIndex: "999",
         display: "flex", flexDirection: "column",
         alignItems: "center", justifyContent: "center",
-        padding: "18px", gap: "10px",
-        fontFamily: "-apple-system, BlinkMacSystemFont, 'Inter', sans-serif"
+        padding: "16px", gap: "10px",
+        fontFamily: "var(--font-ui)"
       });
 
       overlay.innerHTML = [
-        '<div style="width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#4f46e5,#06b6d4);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(99,102,241,0.4),0 8px 24px rgba(79,70,229,0.4);margin-bottom:2px">',
+        '<div style="width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,#4f46e5,#06b6d4);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(99,102,241,0.4),0 8px 24px rgba(79,70,229,0.4);margin-bottom:2px">',
           '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>',
         '</div>',
-        '<div style="font-size:14px;font-weight:700;color:#f0f2f8;letter-spacing:-0.2px">Start Figma MCP Server</div>',
-        '<div style="font-size:10.5px;color:#8b95b0;text-align:center;max-width:230px;line-height:1.6">Run one of these commands in your terminal:</div>',
+        '<div style="font-size:13px;font-weight:700;color:#f8fafc;letter-spacing:-0.2px">Start Figma MCP Server</div>',
+        '<div style="font-size:10px;color:#94a3b8;text-align:center;max-width:240px;line-height:1.5">Run command in your project terminal:</div>',
 
-        '<div style="width:100%;background:#0f1117;border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px">',
-          '<div style="font-size:8.5px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:#4e5873">Option A · Run once</div>',
-          '<div style="font-family:\'SF Mono\',monospace;font-size:12px;font-weight:600;color:#38bdf8;user-select:text">npx figma-mcp</div>',
+        '<div style="width:100%;background:#0f1118;border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:9px 11px;display:flex;flex-direction:column;gap:3px">',
+          '<div style="font-size:8px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:#475569">Option A · Run once</div>',
+          '<div style="font-family:\'SF Mono\',monospace;font-size:11.5px;font-weight:600;color:#38bdf8;user-select:text">npx figma-mcp</div>',
         '</div>',
 
-        '<div style="width:100%;background:#0f1117;border:1px solid rgba(34,211,160,0.15);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px">',
-          '<div style="font-size:8.5px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:#4e5873">Option B · Auto-start on login ✦ Recommended</div>',
-          '<div style="font-family:\'SF Mono\',monospace;font-size:12px;font-weight:600;color:#22d3a0;user-select:text">npx figma-mcp --install-service</div>',
-          '<div style="font-size:9px;color:#4e5873">Sets up LaunchAgent / systemd / Task Scheduler</div>',
+        '<div style="width:100%;background:#0f1118;border:1px solid rgba(16,185,129,0.2);border-radius:8px;padding:9px 11px;display:flex;flex-direction:column;gap:3px">',
+          '<div style="font-size:8px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:#475569">Option B · Auto-start ✦ Recommended</div>',
+          '<div style="font-family:\'SF Mono\',monospace;font-size:11.5px;font-weight:600;color:#10b981;user-select:text">npx figma-mcp --install-service</div>',
+          '<div style="font-size:8.5px;color:#475569">Background service for Claude / IDE</div>',
         '</div>',
 
-        '<div style="display:flex;align-items:center;gap:6px;font-size:9.5px;color:#4e5873">',
-          '<div style="width:5px;height:5px;border-radius:50%;background:#f59e0b;animation:blink 1.4s ease-in-out infinite"></div>',
+        '<div style="display:flex;align-items:center;gap:6px;font-size:9px;color:#475569">',
+          '<div style="width:5px;height:5px;border-radius:50%;background:#f59e0b;animation:pulse 1.4s ease-in-out infinite"></div>',
           'Plugin auto-connects once server is detected',
         '</div>',
 
         '<button onclick="document.getElementById(\'setup-overlay\').remove();reconnect();" style="',
-          'margin-top:4px;padding:7px 20px;border-radius:8px;border:1px solid rgba(255,255,255,0.1);',
-          'background:rgba(255,255,255,0.05);color:#8b95b0;font-size:10.5px;font-weight:600;cursor:pointer;',
+          'margin-top:4px;padding:6px 18px;border-radius:6px;border:1px solid rgba(255,255,255,0.12);',
+          'background:rgba(255,255,255,0.06);color:#f8fafc;font-size:10px;font-weight:600;cursor:pointer;',
           'font-family:inherit;letter-spacing:0.1px',
         '">Dismiss & Retry</button>'
       ].join("");
@@ -571,30 +898,46 @@
       }, 500);
     }
 
-    function log(msg, cls) {
+    function log(msg, cls, opType) {
       totalLogEvents++;
-      if (logCountEl) logCountEl.textContent = totalLogEvents + " events";
+      if (logCountEl) logCountEl.textContent = totalLogEvents + " ev";
 
       if (logEmptyEl) logEmptyEl.style.display = "none";
 
+      var wasNearBottom = (logEl.scrollHeight - logEl.clientHeight - logEl.scrollTop) <= 45;
+
       var line = document.createElement("div");
       line.className = "log-line";
+      if (opType) line.dataset.type = opType;
 
       var ts = document.createElement("span");
       ts.className = "log-ts";
       ts.textContent = new Date().toLocaleTimeString("en", { hour12: false });
 
+      var prompt = document.createElement("span");
+      prompt.className = "log-prompt";
+      prompt.textContent = "❯";
+
       var content = document.createElement("span");
       content.className = "log-msg" + (cls ? " " + cls : "");
       content.textContent = msg;
 
       line.appendChild(ts);
+      line.appendChild(prompt);
       line.appendChild(content);
+
+      if (activeLogFilter === 'writes' && opType !== 'write') {
+        line.style.display = "none";
+      } else if (activeLogFilter === 'reads' && opType !== 'read') {
+        line.style.display = "none";
+      }
+
       logEl.appendChild(line);
-      logEl.scrollTop = logEl.scrollHeight;
 
-      // Trim log buffer: remove oldest entries in one batch DOM op to avoid
-      // triggering O(N) reflows from individual removeChild calls.
+      if (wasNearBottom) {
+        logEl.scrollTop = logEl.scrollHeight;
+      }
+
       if (logEl.children.length > 90) {
         var keep = Array.from(logEl.children).slice(-70);
         logEl.replaceChildren.apply(logEl, keep);
@@ -604,11 +947,11 @@
     function clearLog() {
       logEl.innerHTML = "";
       totalLogEvents = 0;
-      if (logCountEl) logCountEl.textContent = "0 events";
+      if (logCountEl) logCountEl.textContent = "0 ev";
       var empty = document.createElement("div");
       empty.id = "log-empty";
       empty.className = "terminal-empty";
-      empty.innerHTML = '<div class="terminal-empty-icon">◌</div><div class="terminal-empty-text">Waiting for events…</div>';
+      empty.innerHTML = '<div class="terminal-empty-icon">◌</div><div class="terminal-empty-text">Listening on MCP bridge…</div>';
       logEl.appendChild(empty);
       logEmptyEl = empty;
     }
@@ -626,13 +969,11 @@
     var isLongPolling = false;
     var activeAbortController = null;
     var isFirstPoll = true;
-
     var retryTimer = null;
 
     async function initConnection() {
       if (wsConnected) return;
 
-      // 1. Instant Health Check on localhost (< 2ms)
       try {
         var res = await fetch("http://localhost:" + currentPort + "/health", { signal: AbortSignal.timeout(600) });
         if (res.ok) {
@@ -640,13 +981,12 @@
           everConnected = true;
           consecutiveErrors = 0;
           lastSuccessfulPollAt = Date.now();
-          setStatus("green", "Connected", "ready");
+          setStatus("green", "Connected");
           connectWs();
           return;
         }
       } catch(e) {}
 
-      // 2. Parallel port scan 38451-38455 — all probes fire simultaneously
       var scanPorts = [38451, 38452, 38453, 38454, 38455].filter(function(p) { return p !== currentPort; });
       try {
         var winner = await Promise.any(scanPorts.map(function(p) {
@@ -655,18 +995,15 @@
         }));
         currentPort = winner;
         BRIDGE = "http://localhost:" + winner;
-        var pDisp = document.getElementById("port-display");
-        if (pDisp) pDisp.textContent = winner;
         everConnected = true;
         consecutiveErrors = 0;
         lastSuccessfulPollAt = Date.now();
-        setStatus("green", "Connected", "ready");
+        setStatus("green", "Connected");
         connectWs();
         return;
-      } catch(_) { /* no server yet */ }
+      } catch(_) {}
 
-      // 3. If server is not yet running, schedule continuous auto-detection every 1.5s
-      setStatus("yellow", "Waiting for server…");
+      setStatus("yellow", "Waiting…");
       if (retryTimer) clearTimeout(retryTimer);
       retryTimer = setTimeout(function() {
         if (!wsConnected && polling) {
@@ -703,8 +1040,8 @@
         everConnected = true;
         if (retryTimer) clearTimeout(retryTimer);
         lastSuccessfulPollAt = Date.now();
-        setStatus("green", "Connected", "ready");
-        log("⚡ Connected to Figma MCP · port " + currentPort, "ok");
+        setStatus("green", "Connected");
+        log("Connected to Figma MCP · port " + currentPort, "ok");
 
         if (pingTimer) clearInterval(pingTimer);
         pingTimer = setInterval(function() {
@@ -720,7 +1057,8 @@
         try {
           var req = JSON.parse(event.data);
           if (req && req.operation) {
-            log("→ " + req.operation, READ_OPS.indexOf(req.operation) >= 0 ? "info" : "ok");
+            var isRead = READ_OPS.indexOf(req.operation) >= 0;
+            log("→ " + req.operation, isRead ? "info" : "ok", isRead ? "read" : "write");
             try { ws.send(JSON.stringify({ type: "ack", id: req.id })); } catch(e) {}
             dispatchToMain(req);
           }
@@ -739,7 +1077,6 @@
         if (pingTimer) clearInterval(pingTimer);
         wsConnected = false;
         if (polling) {
-          // Attempt long-poll fallback and schedule retry
           startLongPoll();
           if (retryTimer) clearTimeout(retryTimer);
           retryTimer = setTimeout(function() {
@@ -791,7 +1128,7 @@
             var body = await res.json();
             var reqs = body.requests || [];
             receivedThisRound = reqs.length;
-            setStatus("green", reqs.length ? reqs.length + " cmd" : "Connected", body.mode || "ready");
+            setStatus("green", reqs.length ? reqs.length + " cmd" : "Connected");
 
             consecutiveErrors = 0;
             everConnected = true;
@@ -799,7 +1136,8 @@
 
             for (var i = 0; i < reqs.length; i++) {
               var req = reqs[i];
-              log("→ " + req.operation, READ_OPS.indexOf(req.operation) >= 0 ? "info" : "ok");
+              var isRead = READ_OPS.indexOf(req.operation) >= 0;
+              log("→ " + req.operation, isRead ? "info" : "ok", isRead ? "read" : "write");
               dispatchToMain(req);
             }
           } catch (e) {
@@ -816,9 +1154,6 @@
             await sleep(backoff);
             continue;
           }
-          // Re-poll immediately after a round that carried work: the next op in
-          // a read chain is usually already queued, and sleeping here added
-          // POLL_MS of dead time to every single round-trip.
           if (!receivedThisRound) await sleep(POLL_MS);
         }
       } finally {
@@ -826,9 +1161,6 @@
       }
     }
 
-    // dataJson is already-serialized JSON produced by the main thread, so it is
-    // spliced into the body as-is — a multi-MB design tree is never re-encoded
-    // here. Older builds of code.js send a plain `data` object instead.
     function buildResponseBody(id, success, dataJson, error) {
       return '{"id":' + JSON.stringify(id) +
         ',"success":' + (success ? "true" : "false") +
@@ -847,7 +1179,6 @@
         } catch(e) {}
       }
 
-      // HTTP fallback
       try {
         await fetch(BRIDGE + "/response", {
           method: "POST",
@@ -881,59 +1212,86 @@
       }, 100);
     }
 
-    document.addEventListener("visibilitychange", function() {
-      if (document.visibilityState !== "visible" || !everConnected) return;
-      var idleMs = Date.now() - lastSuccessfulPollAt;
-      if (!wsConnected || consecutiveErrors > 0 || activeAbortController || idleMs > 20000) {
-        log("Focus sync (" + Math.round(idleMs / 1000) + "s)", "info");
-        reconnect();
+    function sendActivePing() {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        try {
+          ws.send(JSON.stringify({ type: "ping", active: true, sessionId: sessionId, fileName: fileName }));
+        } catch(e) {}
       }
-    });
+    }
+
+    window.addEventListener("focus", sendActivePing);
+    document.addEventListener("pointerdown", sendActivePing);
 
-    window.addEventListener("focus", function() {
+    document.addEventListener("visibilitychange", function() {
+      if (document.visibilityState !== "visible") return;
+      sendActivePing();
       if (!everConnected) return;
       var idleMs = Date.now() - lastSuccessfulPollAt;
       if (!wsConnected || consecutiveErrors > 0 || activeAbortController || idleMs > 20000) {
-        log("Window focus sync", "info");
+        log("Focus sync (" + Math.round(idleMs / 1000) + "s)", "info");
         reconnect();
       }
     });
 
-    function changePort() {
-      var input = prompt("MCP Bridge Port:", currentPort);
-      if (!input) return;
-      var newPort = parseInt(input, 10);
-      if (isNaN(newPort) || newPort < 1024 || newPort > 65535) {
-        alert("Invalid port number");
-        return;
+    function getIconForType(type) {
+      if (!type) return '<rect x="3" y="3" width="18" height="18" rx="2"/>';
+      var t = type.toUpperCase();
+      if (t === "FRAME" || t === "SECTION") {
+        return '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18M15 3v18M3 9h18M3 15h18"/>';
       }
-      setPort(newPort);
-    }
-
-    function setPort(port) {
-      currentPort = port;
-      BRIDGE = "http://localhost:" + currentPort;
-      document.getElementById("port-display").textContent = currentPort;
-      log("Port switched → " + currentPort, "info");
-      reconnect();
+      if (t === "COMPONENT" || t === "INSTANCE") {
+        return '<path d="M12 2L2 12l10 10 10-10L12 2z"/>';
+      }
+      if (t === "TEXT") {
+        return '<polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/>';
+      }
+      if (t === "GROUP") {
+        return '<rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>';
+      }
+      return '<rect x="3" y="3" width="18" height="18" rx="2"/>';
     }
 
-    async function autoDetectPort() {
-      setStatus("yellow", "Scanning…");
-      log("Scanning 38451-38460…", "info");
-      for (var p = 38451; p <= 38460; p++) {
-        try {
-          var res = await fetch("http://localhost:" + p + "/health", { signal: AbortSignal.timeout(400) });
-          if (res.ok) {
-            var data = await res.json();
-            log("Detected port " + p, "ok");
-            setPort(p);
-            return;
-          }
-        } catch(e) {}
+    function renderSelection(msg) {
+      if (!selCardEl || !selNameEl || !selMetaEl || !selBadgeEl || !selIconEl) return;
+
+      var count = msg.count || 0;
+      var list = msg.selection || [];
+      currentSelectionCount = count;
+      currentSelectionId = (count === 1 && list[0]) ? list[0].id : null;
+      currentSelectionName = (count === 1 && list[0]) ? (list[0].name || "Layer") : "";
+
+      if (count === 0) {
+        selCardEl.classList.remove("has-selection");
+        selIconEl.innerHTML = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/></svg>';
+        selNameEl.textContent = "No selection";
+        selMetaEl.textContent = msg.pageName ? "Page: " + msg.pageName : (fileName || "Canvas root");
+        if (selActionsEl) selActionsEl.style.display = "none";
+        selCardEl.title = "No layer selected in Figma canvas";
+      } else if (count === 1) {
+        var node = list[0];
+        selCardEl.classList.add("has-selection");
+        selIconEl.innerHTML = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' + getIconForType(node.type) + '</svg>';
+        selNameEl.textContent = node.name || "Untitled Node";
+
+        var metaParts = [];
+        if (node.width && node.height) metaParts.push(node.width + " × " + node.height);
+        if (msg.pageName) metaParts.push(msg.pageName);
+        selMetaEl.textContent = metaParts.length ? metaParts.join(" · ") : (node.type || "Layer");
+
+        selBadgeEl.textContent = node.type || "NODE";
+        if (selActionsEl) selActionsEl.style.display = "flex";
+        selCardEl.title = "Click to center view on: " + (node.name || "Node") + " (" + (node.type || "NODE") + " ID: " + node.id + ")";
+      } else {
+        selCardEl.classList.add("has-selection");
+        selIconEl.innerHTML = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>';
+        var names = list.slice(0, 2).map(function(n) { return n.name; }).join(", ");
+        selNameEl.textContent = count + " layers selected";
+        selMetaEl.textContent = names + (count > 2 ? " +" + (count - 2) + " more" : "");
+        selBadgeEl.textContent = count + " ITEMS";
+        if (selActionsEl) selActionsEl.style.display = "flex";
+        selCardEl.title = "Click to center view on " + count + " selected layers";
       }
-      log("Not found on 38451-38460 → Reset 38451", "err");
-      setPort(38451);
     }
 
     window.onmessage = async function(event) {
@@ -944,8 +1302,9 @@
         var prevSid = sessionId;
         sessionId = msg.sessionId || null;
         fileName = msg.fileName || null;
-        if (fileName && sessionDispEl) {
-          sessionDispEl.textContent = fileName.length > 16 ? fileName.slice(0, 14) + ".." : fileName;
+        if (fileName && docDispEl) {
+          docDispEl.textContent = fileName;
+          docDispEl.title = fileName + " (" + (sessionId || "active session") + ")";
         }
         if (sessionId) log("Linked: " + (fileName || sessionId), "info");
         if (sessionId && sessionId !== prevSid) {
@@ -955,14 +1314,53 @@
       }
 
       if (msg.type === "selection-change") {
-        if (sessionDispEl) {
-          if (msg.count === 0) {
-            sessionDispEl.textContent = fileName ? (fileName.length > 16 ? fileName.slice(0, 14) + ".." : fileName) : "READY";
-          } else if (msg.count === 1) {
-            var nName = msg.selection[0].name;
-            sessionDispEl.textContent = "Sel: " + (nName.length > 12 ? nName.slice(0, 10) + ".." : nName);
-          } else {
-            sessionDispEl.textContent = msg.count + " layers selected";
+        renderSelection(msg);
+        if (ws && ws.readyState === WebSocket.OPEN) {
+          try {
+            ws.send(JSON.stringify({
+              type: "selection-change",
+              sessionId: sessionId,
+              count: msg.count,
+              pageName: msg.pageName,
+              selection: msg.selection,
+              fullNode: msg.fullNode
+            }));
+          } catch(e) {}
+        }
+        sendActivePing();
+        return;
+      }
+
+      if (msg.type === "delta-diff") {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+          try {
+            ws.send(JSON.stringify({
+              type: "delta-diff",
+              sessionId: sessionId,
+              id: msg.id,
+              diff: msg.diff
+            }));
+          } catch(e) {}
+        }
+        return;
+      }
+
+      if (msg.type === "selection-image-exported") {
+        if (snapshotBtn) snapshotBtn.style.opacity = "1";
+        if (msg.bytes && msg.bytes.length > 0) {
+          try {
+            var blob = new Blob([new Uint8Array(msg.bytes)], { type: "image/png" });
+            if (navigator && navigator.clipboard && navigator.clipboard.write) {
+              await navigator.clipboard.write([
+                new ClipboardItem({ "image/png": blob })
+              ]);
+              showToast("PNG Copied to Clipboard (2x)", "📸");
+              log("📸 Exported PNG for " + (msg.nodeName || "node"), "ok", "read");
+            } else {
+              showToast("Image captured", "📸");
+            }
+          } catch(err) {
+            showToast("Failed to copy image", "✗");
           }
         }
         return;
@@ -990,7 +1388,9 @@
       }
 
       if (msg.type === "index-update") {
-        if (reindexBtnLabel) reindexBtnLabel.textContent = "⚡ Indexed";
+        if (reindexBtn) reindexBtn.classList.remove("indexing");
+        var elapsed = msg.startMs ? (Date.now() - msg.startMs) : 0;
+        showToast("Indexed in " + elapsed + "ms", "✓");
         if (ws && ws.readyState === WebSocket.OPEN) {
           try {
             ws.send(JSON.stringify({
@@ -1000,13 +1400,9 @@
               sessionId: msg.sessionId,
               startMs: msg.startMs
             }));
-            var nodeCount = (msg.data && msg.data.pageNodes) ? msg.data.pageNodes.length : 0;
-            log("⚡ Indexed " + (msg.fileName || "file") + " (" + (Date.now() - msg.startMs) + "ms)", "ok");
+            log("Indexed " + (msg.fileName || "canvas") + " (" + elapsed + "ms)", "ok", "read");
           } catch(e) {}
         }
-        setTimeout(function() {
-          if (reindexBtnLabel) reindexBtnLabel.textContent = "⚡ Index";
-        }, 3000);
         return;
       }
 
@@ -1023,11 +1419,10 @@
           writeCount++;
           document.getElementById("write-count").textContent = writeCount;
         }
-        log("✓ " + (msg.id ? msg.id.slice(-6) : "ok") + durationStr, "ok");
+        log("✓ " + (msg.id ? msg.id.slice(-6) : "ok") + durationStr, "ok", isRead ? "read" : "write");
       } else {
         errCount++;
-        document.getElementById("err-count").textContent = errCount;
-        log("✗ " + (msg.id ? msg.id.slice(-6) : "err") + durationStr + ": " + (msg.error || "fail"), "err");
+        log("✗ " + (msg.id ? msg.id.slice(-6) : "err") + durationStr + ": " + (msg.error || "fail"), "err", isRead ? "read" : "write");
       }
       var payloadJson = msg.dataJson !== undefined
         ? msg.dataJson
@@ -1044,7 +1439,6 @@
 
       var rafId = null;
       var lastW = 0, lastH = 0;
-      var saveTimer = null;
 
       grip.addEventListener("pointerdown", function(e) {
         e.preventDefault();