sparkecode-devtools 0.1.40 → 0.1.42

package/README.md

@@ -109,16 +109,37 @@ You can also send copy events to any endpoint:
 
 ## Controls
 
-- Click the floating button to toggle selection
+- Click the floating button to toggle selection mode
+- Click the panel icon (right side of button) to open the SparkeCode web UI
 - Drag the button to reposition
-- Press `Cmd/Ctrl+Shift+S` to toggle
+- Press `Cmd/Ctrl+Shift+S` to toggle selection mode
 - Press `Esc` to exit selection mode
 
+## Floating Web UI Panel
+
+Click the panel icon on the button to open a draggable, collapsible panel showing the full SparkeCode web interface. This lets you see the agent's responses and chat history while working on your app.
+
+- Drag the header to move the panel
+- Click the minus button to collapse
+- Click the X to close
+
+Configure the web UI URL:
+
+```bash
+# In your .env.local
+NEXT_PUBLIC_SPARKECODER_WEB_UI_URL=http://localhost:6969
+```
+
+Or via prop:
+```tsx
+<SparkeCodeSelect webUiUrl="http://localhost:6969" />
+```
+
 ## Auto-send to Agent
 
 When connected to a running Sparkecoder instance, clicking a component will:
 
-1. Show a prompt input modal
+1. Show a prompt input
 2. Let you type what you want to do with the component (e.g., "make this button red")
 3. Press Enter to send the request + component context directly to the agent
 4. The agent will start working immediately

package/next.d.ts

@@ -10,6 +10,7 @@ export interface SparkeCodeSelectConfig {
     enabled?: boolean;
     apiBase?: string | null;
     sessionId?: string | null;
+    webUiUrl?: string | null;
   };
 }
 
@@ -20,10 +21,16 @@ export interface SparkeCodeSelectProps {
   sparkecoderEnabled?: boolean;
   strategy?: 'afterInteractive' | 'lazyOnload' | 'beforeInteractive' | 'worker';
   /**
-   * Override the Sparkecoder server URL.
+   * Override the Sparkecoder server URL (API).
    * Defaults to NEXT_PUBLIC_SPARKECODER_DEV_TOOLS_SERVER_URL or SPARKECODER_DEV_TOOLS_SERVER_URL env variable.
    */
   serverUrl?: string;
+  /**
+   * Override the Sparkecoder Web UI URL.
+   * Defaults to NEXT_PUBLIC_SPARKECODER_WEB_UI_URL or SPARKECODER_WEB_UI_URL env variable.
+   * Falls back to http://localhost:6969 if not set.
+   */
+  webUiUrl?: string;
 }
 
 export function SparkeCodeSelect(props: SparkeCodeSelectProps): JSX.Element | null;

package/next.js

@@ -5,12 +5,16 @@ import { useEffect, useMemo } from 'react';
 
 const DEFAULT_SCRIPT_URL = 'https://unpkg.com/sparkecode-devtools/sparkecode-select.js';
 
-// Check for env variable to override the default Sparkecoder server URL
-// This needs to be prefixed with NEXT_PUBLIC_ to be available in the browser
+// Check for env variables to override defaults
+// These need to be prefixed with NEXT_PUBLIC_ to be available in the browser
 const ENV_SERVER_URL = typeof process !== 'undefined' 
   ? (process.env.NEXT_PUBLIC_SPARKECODER_DEV_TOOLS_SERVER_URL || process.env.SPARKECODER_DEV_TOOLS_SERVER_URL)
   : undefined;
 
+const ENV_WEB_UI_URL = typeof process !== 'undefined'
+  ? (process.env.NEXT_PUBLIC_SPARKECODER_WEB_UI_URL || process.env.SPARKECODER_WEB_UI_URL)
+  : undefined;
+
 export function SparkeCodeSelect({
   enabled = process.env.NODE_ENV !== 'production',
   scriptUrl = DEFAULT_SCRIPT_URL,
@@ -18,16 +22,18 @@ export function SparkeCodeSelect({
   sparkecoderEnabled = true,
   strategy = 'afterInteractive',
   serverUrl = ENV_SERVER_URL,
+  webUiUrl = ENV_WEB_UI_URL,
 }) {
   const mergedConfig = useMemo(() => ({
     ...(config || {}),
     sparkecoder: {
       enabled: sparkecoderEnabled,
-      // Use serverUrl prop, which defaults to env variable if set
+      // Use props which default to env variables if set
       ...(serverUrl ? { apiBase: serverUrl } : {}),
+      ...(webUiUrl ? { webUiUrl } : {}),
       ...(config && config.sparkecoder ? config.sparkecoder : {}),
     },
-  }), [config, sparkecoderEnabled, serverUrl]);
+  }), [config, sparkecoderEnabled, serverUrl, webUiUrl]);
 
   useEffect(() => {
     if (!enabled) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkecode-devtools",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "description": "Sparkecode Dev Tools for selecting and sharing components.",
   "type": "module",
   "main": "sparkecode-select.js",

package/sparkecode-select.js

@@ -14,14 +14,18 @@
   
   const DEFAULT_CONFIG = {
     webhookUrl: null,
-    primaryColor: '#8b5cf6',
-    successColor: '#10b981',
-    bgColor: '#1e1e2e',
-    textColor: '#ffffff',
+    // Colors matched to SparkeCoder web dark theme
+    primaryColor: '#91AEFF',   // Focus Blue 200
+    successColor: '#10B981',   // Tests green
+    bgColor: '#171717',        // Card background
+    borderColor: 'rgba(255, 255, 255, 0.1)',
+    textColor: '#FAFAFA',      // Foreground
+    mutedColor: '#A3A3A3',     // Muted foreground
     sparkecoder: {
       enabled: false,
       apiBase: null,
       sessionId: null,
+      webUiUrl: null,  // Web UI URL (default: http://localhost:6969)
     },
   };
 
@@ -335,7 +339,7 @@
 
   async function runAgentWithPrompt(promptText) {
     const connection = await ensureSparkecoderConnection();
-    if (!connection) return false;
+    if (!connection) return { success: false };
 
     try {
       // Post to agents run endpoint to actually run the agent
@@ -347,10 +351,13 @@
           body: JSON.stringify({ prompt: promptText }),
         }
       );
-      return res.ok;
+      if (res.ok) {
+        return { success: true, sessionId: connection.sessionId };
+      }
+      return { success: false };
     } catch (e) {
       console.warn('[SparkeCode] Failed to run agent:', e.message);
-      return false;
+      return { success: false };
     }
   }
 
@@ -458,79 +465,139 @@
   function createFloatingButton() {
     floatingButton = document.createElement('div');
     floatingButton.id = 'sparkecode-button';
-    floatingButton.innerHTML = `<span style="font-weight: 600; font-size: 13px;">SparkeCode Select</span>`;
     floatingButton.style.cssText = `
       position: fixed;
       top: ${buttonPos.y}px;
       left: ${buttonPos.x}px;
-      height: 40px;
-      padding: 0 16px;
-      background: ${config.primaryColor};
-      border-radius: 10px;
+      height: 32px;
+      background: ${config.bgColor};
+      border: 1px solid ${config.borderColor};
+      border-radius: 6px;
       display: flex;
       align-items: center;
-      justify-content: center;
-      cursor: grab;
       z-index: 999998;
-      box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
-      transition: box-shadow 0.2s, background 0.2s;
-      color: white;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+      transition: all 0.15s ease;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       user-select: none;
+      overflow: hidden;
+    `;
+
+    // Main button area (select toggle)
+    const mainBtn = document.createElement('div');
+    mainBtn.id = 'sparkecode-button-main';
+    mainBtn.innerHTML = `
+      <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" style="flex-shrink: 0;">
+        <path d="M3 1.5L3 12.5L6.5 9L10 14L12 13L8.5 8L13 7.5L3 1.5Z"/>
+      </svg>
+      <span style="font-weight: 500; font-size: 12px;">SparkeCode Select</span>
+    `;
+    mainBtn.style.cssText = `
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 0 10px;
+      height: 100%;
+      cursor: grab;
+      color: ${config.primaryColor};
+    `;
+    mainBtn.title = 'Click to toggle select mode • Drag to move';
+
+    // Expand button (show web UI)
+    const expandBtn = document.createElement('div');
+    expandBtn.id = 'sparkecode-button-expand';
+    expandBtn.innerHTML = `
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <rect x="3" y="3" width="18" height="18" rx="2"/>
+        <path d="M9 3v18"/>
+      </svg>
+    `;
+    expandBtn.style.cssText = `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 100%;
+      cursor: pointer;
+      color: ${config.mutedColor};
+      border-left: 1px solid ${config.borderColor};
+      transition: background 0.15s, color 0.15s;
     `;
-    floatingButton.title = 'Drag to move • Click to toggle';
+    expandBtn.title = 'Open SparkeCode panel';
+    expandBtn.addEventListener('mouseenter', () => {
+      expandBtn.style.background = 'rgba(255,255,255,0.05)';
+      expandBtn.style.color = config.primaryColor;
+    });
+    expandBtn.addEventListener('mouseleave', () => {
+      expandBtn.style.background = 'transparent';
+      expandBtn.style.color = config.mutedColor;
+    });
+    expandBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      if (isWebFrameVisible()) {
+        hideWebFrame();
+      } else {
+        showWebFrame();
+      }
+    });
+
+    floatingButton.appendChild(mainBtn);
+    floatingButton.appendChild(expandBtn);
     
-    // Drag handling
-    floatingButton.addEventListener('mousedown', startDrag);
-    floatingButton.addEventListener('touchstart', startDrag, { passive: false });
+    // Drag handling - only on main button area
+    mainBtn.addEventListener('mousedown', startDrag);
+    mainBtn.addEventListener('touchstart', startDrag, { passive: false });
     
     document.body.appendChild(floatingButton);
   }
 
   function startDrag(e) {
-    if (e.target.closest('#sparkecode-button')) {
-      const clientX = e.touches ? e.touches[0].clientX : e.clientX;
-      const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+    // Only handle drag on main button, not expand
+    if (e.target.closest('#sparkecode-button-expand')) return;
+    
+    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+    
+    dragOffset.x = clientX - buttonPos.x;
+    dragOffset.y = clientY - buttonPos.y;
+    isDragging = false;
+    
+    const startX = clientX;
+    const startY = clientY;
+    const mainBtn = document.getElementById('sparkecode-button-main');
+    
+    const onMove = (e) => {
+      const moveX = e.touches ? e.touches[0].clientX : e.clientX;
+      const moveY = e.touches ? e.touches[0].clientY : e.clientY;
       
-      dragOffset.x = clientX - buttonPos.x;
-      dragOffset.y = clientY - buttonPos.y;
-      isDragging = false;
+      // Only start dragging if moved more than 5px
+      if (!isDragging && (Math.abs(moveX - startX) > 5 || Math.abs(moveY - startY) > 5)) {
+        isDragging = true;
+        if (mainBtn) mainBtn.style.cursor = 'grabbing';
+      }
       
-      const startX = clientX;
-      const startY = clientY;
+      if (isDragging) {
+        e.preventDefault();
+        buttonPos.x = Math.max(0, Math.min(window.innerWidth - 200, moveX - dragOffset.x));
+        buttonPos.y = Math.max(0, Math.min(window.innerHeight - 50, moveY - dragOffset.y));
+        floatingButton.style.left = buttonPos.x + 'px';
+        floatingButton.style.top = buttonPos.y + 'px';
+      }
+    };
+    
+    const onUp = () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      document.removeEventListener('touchmove', onMove);
+      document.removeEventListener('touchend', onUp);
       
-      const onMove = (e) => {
-        const moveX = e.touches ? e.touches[0].clientX : e.clientX;
-        const moveY = e.touches ? e.touches[0].clientY : e.clientY;
-        
-        // Only start dragging if moved more than 5px
-        if (!isDragging && (Math.abs(moveX - startX) > 5 || Math.abs(moveY - startY) > 5)) {
-          isDragging = true;
-          floatingButton.style.cursor = 'grabbing';
-        }
-        
-        if (isDragging) {
-          e.preventDefault();
-          buttonPos.x = Math.max(0, Math.min(window.innerWidth - 200, moveX - dragOffset.x));
-          buttonPos.y = Math.max(0, Math.min(window.innerHeight - 50, moveY - dragOffset.y));
-          floatingButton.style.left = buttonPos.x + 'px';
-          floatingButton.style.top = buttonPos.y + 'px';
-        }
-      };
+      if (mainBtn) mainBtn.style.cursor = 'grab';
       
-      const onUp = () => {
-        document.removeEventListener('mousemove', onMove);
-        document.removeEventListener('mouseup', onUp);
-        document.removeEventListener('touchmove', onMove);
-        document.removeEventListener('touchend', onUp);
-        
-        floatingButton.style.cursor = 'grab';
-        
-        // If not dragging, it was a click
-        if (!isDragging) {
-          toggleActive();
-        }
-        isDragging = false;
+      // If not dragging, it was a click - toggle select mode
+      if (!isDragging) {
+        toggleActive();
+      }
+      isDragging = false;
       };
       
       document.addEventListener('mousemove', onMove);
@@ -685,17 +752,18 @@
       bottom: 20px;
       left: 50%;
       transform: translateX(-50%) translateY(10px);
-      background: ${config.successColor};
-      color: white;
-      padding: 12px 24px;
-      border-radius: 10px;
+      background: ${config.bgColor};
+      color: ${config.textColor};
+      padding: 10px 20px;
+      border-radius: 8px;
+      border: 1px solid ${config.borderColor};
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      font-size: 14px;
-      font-weight: 600;
+      font-size: 13px;
+      font-weight: 500;
       z-index: 1000002;
       opacity: 0;
-      transition: all 0.2s ease;
-      box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
+      transition: all 0.15s ease;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
     `;
     toast.textContent = message;
     document.body.appendChild(toast);
@@ -746,16 +814,16 @@
       position: fixed;
       top: 20%;
       left: 50%;
-      transform: translateX(-50%) scale(0.95);
+      transform: translateX(-50%) scale(0.98);
       background: ${config.bgColor};
       border-radius: 12px;
       z-index: 1000003;
-      box-shadow: 0 16px 70px rgba(0,0,0,0.5);
-      border: 1px solid rgba(255,255,255,0.1);
+      box-shadow: 0 24px 80px rgba(0,0,0,0.6);
+      border: 1px solid ${config.borderColor};
       display: none;
       opacity: 0;
       transition: all 0.15s ease;
-      width: 500px;
+      width: 480px;
       max-width: calc(100vw - 32px);
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       overflow: hidden;
@@ -765,15 +833,14 @@
     const tag = document.createElement('div');
     tag.id = 'sparkecode-prompt-tag';
     tag.style.cssText = `
-      padding: 10px 16px;
-      background: rgba(139, 92, 246, 0.1);
-      border-bottom: 1px solid rgba(255,255,255,0.05);
+      padding: 12px 16px;
+      border-bottom: 1px solid ${config.borderColor};
       font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
-      font-size: 13px;
-      color: ${config.primaryColor};
+      font-size: 12px;
+      color: ${config.mutedColor};
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: 6px;
     `;
     promptBar.appendChild(tag);
 
@@ -781,16 +848,18 @@
     const input = document.createElement('input');
     input.id = 'sparkecode-prompt-input';
     input.type = 'text';
-    input.placeholder = 'What do you want to do? (Enter to send, Esc to cancel)';
+    input.placeholder = 'What do you want to do?';
     input.style.cssText = `
       width: 100%;
       background: transparent;
       border: none;
-      padding: 16px;
+      padding: 14px 16px;
       color: ${config.textColor};
-      font-size: 16px;
+      font-size: 15px;
       outline: none;
     `;
+    input.setAttribute('autocomplete', 'off');
+    input.setAttribute('spellcheck', 'false');
     input.addEventListener('keydown', (e) => {
       if (e.key === 'Enter') {
         e.preventDefault();
@@ -814,7 +883,7 @@
     // Update tag
     const tag = document.getElementById('sparkecode-prompt-tag');
     if (tag && componentInfo) {
-      tag.innerHTML = `<span style="opacity: 0.6;">Selected:</span> &lt;${componentInfo.name}&gt;`;
+      tag.innerHTML = `<span style="color: ${config.primaryColor};">&lt;${componentInfo.name}&gt;</span>`;
     }
 
     const input = document.getElementById('sparkecode-prompt-input');
@@ -864,10 +933,15 @@
     hidePromptBar();
     showToast('Sending...');
 
-    const success = await runAgentWithPrompt(fullPrompt);
+    const result = await runAgentWithPrompt(fullPrompt);
     
-    if (success) {
+    if (result.success) {
       showToast('Sent ✓');
+      // Auto-show the web frame to see the agent working
+      if (result.sessionId) {
+        sparkecoderState.sessionId = result.sessionId;
+        showWebFrame();
+      }
     } else {
       await copyToClipboard(fullPrompt);
       showToast('Copied (no connection)');
@@ -877,10 +951,284 @@
       component: pendingComponentInfo?.name,
       fileName: pendingComponentInfo?.fileName,
       hasUserMessage: !!userMessage,
-      success,
+      success: result.success,
     });
   }
 
+  // ============================================
+  // Floating Web UI Frame
+  // ============================================
+
+  const DEFAULT_WEB_UI_URL = 'http://localhost:6969';
+  let webFrame = null;
+  let webFrameCollapsed = false;
+  let webFramePos = { x: window.innerWidth - 420, y: 60 };
+  let webFrameSize = { width: 400, height: 600 };
+  let isWebFrameDragging = false;
+  let webFrameDragOffset = { x: 0, y: 0 };
+
+  function getWebUiUrl() {
+    return config.sparkecoder?.webUiUrl || DEFAULT_WEB_UI_URL;
+  }
+
+  function createWebFrame() {
+    if (webFrame) return;
+
+    webFrame = document.createElement('div');
+    webFrame.id = 'sparkecode-webframe';
+    webFrame.style.cssText = `
+      position: fixed;
+      top: ${webFramePos.y}px;
+      right: 16px;
+      width: ${webFrameSize.width}px;
+      height: ${webFrameSize.height}px;
+      background: ${config.bgColor};
+      border: 1px solid ${config.borderColor};
+      border-radius: 12px;
+      z-index: 999997;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      opacity: 0;
+      transform: scale(0.95) translateY(10px);
+      transition: opacity 0.2s ease, transform 0.2s ease;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    `;
+
+    // Header
+    const header = document.createElement('div');
+    header.id = 'sparkecode-webframe-header';
+    header.style.cssText = `
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 12px;
+      background: rgba(255,255,255,0.03);
+      border-bottom: 1px solid ${config.borderColor};
+      cursor: grab;
+      user-select: none;
+    `;
+
+    const title = document.createElement('div');
+    title.style.cssText = `
+      font-size: 12px;
+      font-weight: 500;
+      color: ${config.mutedColor};
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    `;
+    title.innerHTML = `
+      <svg width="12" height="12" viewBox="0 0 16 16" fill="${config.primaryColor}">
+        <path d="M3 1.5L3 12.5L6.5 9L10 14L12 13L8.5 8L13 7.5L3 1.5Z"/>
+      </svg>
+      <span>SparkeCode</span>
+    `;
+
+    const buttons = document.createElement('div');
+    buttons.style.cssText = `display: flex; gap: 6px;`;
+
+    // Collapse button
+    const collapseBtn = document.createElement('button');
+    collapseBtn.id = 'sparkecode-webframe-collapse';
+    collapseBtn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/></svg>`;
+    collapseBtn.style.cssText = `
+      width: 24px;
+      height: 24px;
+      border: none;
+      background: transparent;
+      color: ${config.mutedColor};
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.15s;
+    `;
+    collapseBtn.addEventListener('mouseenter', () => collapseBtn.style.background = 'rgba(255,255,255,0.1)');
+    collapseBtn.addEventListener('mouseleave', () => collapseBtn.style.background = 'transparent');
+    collapseBtn.addEventListener('click', toggleWebFrameCollapse);
+
+    // Close button
+    const closeBtn = document.createElement('button');
+    closeBtn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>`;
+    closeBtn.style.cssText = `
+      width: 24px;
+      height: 24px;
+      border: none;
+      background: transparent;
+      color: ${config.mutedColor};
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.15s;
+    `;
+    closeBtn.addEventListener('mouseenter', () => closeBtn.style.background = 'rgba(255,255,255,0.1)');
+    closeBtn.addEventListener('mouseleave', () => closeBtn.style.background = 'transparent');
+    closeBtn.addEventListener('click', hideWebFrame);
+
+    buttons.appendChild(collapseBtn);
+    buttons.appendChild(closeBtn);
+    header.appendChild(title);
+    header.appendChild(buttons);
+
+    // Drag handling for header
+    header.addEventListener('mousedown', startWebFrameDrag);
+
+    // Iframe container
+    const iframeContainer = document.createElement('div');
+    iframeContainer.id = 'sparkecode-webframe-content';
+    iframeContainer.style.cssText = `
+      flex: 1;
+      overflow: hidden;
+      background: #0A0A0A;
+    `;
+
+    // Loading state
+    const loading = document.createElement('div');
+    loading.id = 'sparkecode-webframe-loading';
+    loading.style.cssText = `
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: ${config.mutedColor};
+      font-size: 13px;
+    `;
+    loading.textContent = 'Loading...';
+    iframeContainer.appendChild(loading);
+
+    // Iframe
+    const iframe = document.createElement('iframe');
+    iframe.id = 'sparkecode-webframe-iframe';
+    iframe.style.cssText = `
+      width: 100%;
+      height: 100%;
+      border: none;
+      opacity: 0;
+      transition: opacity 0.2s;
+    `;
+    iframe.addEventListener('load', () => {
+      loading.style.display = 'none';
+      iframe.style.opacity = '1';
+    });
+    iframeContainer.appendChild(iframe);
+
+    webFrame.appendChild(header);
+    webFrame.appendChild(iframeContainer);
+    document.body.appendChild(webFrame);
+  }
+
+  function startWebFrameDrag(e) {
+    if (e.target.closest('button')) return;
+    
+    isWebFrameDragging = true;
+    const rect = webFrame.getBoundingClientRect();
+    webFrameDragOffset.x = e.clientX - rect.left;
+    webFrameDragOffset.y = e.clientY - rect.top;
+    
+    const header = document.getElementById('sparkecode-webframe-header');
+    if (header) header.style.cursor = 'grabbing';
+
+    const onMove = (e) => {
+      if (!isWebFrameDragging) return;
+      const x = Math.max(0, Math.min(window.innerWidth - webFrameSize.width, e.clientX - webFrameDragOffset.x));
+      const y = Math.max(0, Math.min(window.innerHeight - 100, e.clientY - webFrameDragOffset.y));
+      webFrame.style.left = x + 'px';
+      webFrame.style.right = 'auto';
+      webFrame.style.top = y + 'px';
+      webFramePos = { x, y };
+    };
+
+    const onUp = () => {
+      isWebFrameDragging = false;
+      const header = document.getElementById('sparkecode-webframe-header');
+      if (header) header.style.cursor = 'grab';
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  }
+
+  function showWebFrame() {
+    createWebFrame();
+    
+    const iframe = document.getElementById('sparkecode-webframe-iframe');
+    const loading = document.getElementById('sparkecode-webframe-loading');
+    
+    // Build embed URL with session ID
+    let url = getWebUiUrl();
+    if (sparkecoderState.sessionId) {
+      url += `/embed/${sparkecoderState.sessionId}`;
+    } else {
+      url += '/embed';
+    }
+    
+    if (iframe && iframe.src !== url) {
+      if (loading) loading.style.display = 'flex';
+      iframe.style.opacity = '0';
+      iframe.src = url;
+    }
+
+    webFrame.style.display = 'flex';
+    webFrameCollapsed = false;
+    updateWebFrameSize();
+    
+    requestAnimationFrame(() => {
+      webFrame.style.opacity = '1';
+      webFrame.style.transform = 'scale(1) translateY(0)';
+    });
+  }
+
+  function hideWebFrame() {
+    if (!webFrame) return;
+    
+    webFrame.style.opacity = '0';
+    webFrame.style.transform = 'scale(0.95) translateY(10px)';
+    
+    setTimeout(() => {
+      if (webFrame) webFrame.style.display = 'none';
+      // Clear iframe to stop any running content
+      const iframe = document.getElementById('sparkecode-webframe-iframe');
+      if (iframe) iframe.src = 'about:blank';
+    }, 200);
+  }
+
+  function toggleWebFrameCollapse() {
+    webFrameCollapsed = !webFrameCollapsed;
+    updateWebFrameSize();
+    
+    const collapseBtn = document.getElementById('sparkecode-webframe-collapse');
+    if (collapseBtn) {
+      collapseBtn.innerHTML = webFrameCollapsed
+        ? `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>`
+        : `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/></svg>`;
+    }
+  }
+
+  function updateWebFrameSize() {
+    if (!webFrame) return;
+    
+    const content = document.getElementById('sparkecode-webframe-content');
+    if (webFrameCollapsed) {
+      webFrame.style.height = '44px';
+      if (content) content.style.display = 'none';
+    } else {
+      webFrame.style.height = webFrameSize.height + 'px';
+      if (content) content.style.display = 'block';
+    }
+  }
+
+  function isWebFrameVisible() {
+    return webFrame && webFrame.style.display !== 'none' && webFrame.style.opacity !== '0';
+  }
+
   // ============================================
   // Event Handlers
   // ============================================
@@ -946,12 +1294,18 @@
       page: getPagePath(),
     });
 
-    // If Sparkecoder is enabled and connected, show the prompt bar
+    // If Sparkecoder is enabled and connected, open embed with context
     if (config.sparkecoder?.enabled) {
       const connection = await ensureSparkecoderConnection();
       if (connection) {
         deactivate();
-        showPromptBar(content, info);
+        
+        // Send component context to pending-input so it appears in the embed's input
+        await sendToSparkecoder(content);
+        showToast(`Selected <${info?.name || 'Component'}>`);
+        
+        // Open the embed panel
+        showWebFrame();
         return;
       }
     }
@@ -1004,8 +1358,9 @@
     createOverlay();
     
     if (floatingButton) {
-      floatingButton.style.background = config.successColor;
-      floatingButton.style.boxShadow = '0 4px 20px rgba(16, 185, 129, 0.4)';
+      floatingButton.style.background = config.primaryColor;
+      floatingButton.style.color = '#171717';
+      floatingButton.style.borderColor = config.primaryColor;
     }
     
     document.addEventListener('mousemove', handleMouseMove, true);
@@ -1025,8 +1380,9 @@
     removeOverlay();
     
     if (floatingButton) {
-      floatingButton.style.background = config.primaryColor;
-      floatingButton.style.boxShadow = '0 4px 20px rgba(139, 92, 246, 0.4)';
+      floatingButton.style.background = config.bgColor;
+      floatingButton.style.color = config.primaryColor;
+      floatingButton.style.borderColor = config.borderColor;
     }
     
     document.removeEventListener('mousemove', handleMouseMove, true);