sparkecode-devtools 0.1.38 → 0.1.40

package/README.md

@@ -74,6 +74,27 @@ Optional overrides:
 </script>
 ```
 
+## Environment variable (Next.js)
+
+You can set the Sparkecoder server URL via environment variable instead of passing it as a prop:
+
+```bash
+# In your .env.local
+NEXT_PUBLIC_SPARKECODER_DEV_TOOLS_SERVER_URL=http://192.168.1.100:3141
+```
+
+This is useful when your Sparkecoder server is running on a different machine or port.
+
+The component checks for:
+1. `NEXT_PUBLIC_SPARKECODER_DEV_TOOLS_SERVER_URL` (client-side accessible)
+2. `SPARKECODER_DEV_TOOLS_SERVER_URL` (server-side only, for SSR)
+
+You can also pass `serverUrl` as a prop to override:
+
+```tsx
+<SparkeCodeSelect serverUrl="http://192.168.1.100:3141" />
+```
+
 ## Webhook (custom)
 
 You can also send copy events to any endpoint:
@@ -92,3 +113,15 @@ You can also send copy events to any endpoint:
 - Drag the button to reposition
 - Press `Cmd/Ctrl+Shift+S` to toggle
 - Press `Esc` to exit selection mode
+
+## Auto-send to Agent
+
+When connected to a running Sparkecoder instance, clicking a component will:
+
+1. Show a prompt input modal
+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
+
+If you leave the prompt empty and press Enter, it sends just the component context.
+Press Esc or click outside to cancel.

package/next.d.ts

@@ -19,6 +19,11 @@ export interface SparkeCodeSelectProps {
   config?: SparkeCodeSelectConfig;
   sparkecoderEnabled?: boolean;
   strategy?: 'afterInteractive' | 'lazyOnload' | 'beforeInteractive' | 'worker';
+  /**
+   * Override the Sparkecoder server URL.
+   * Defaults to NEXT_PUBLIC_SPARKECODER_DEV_TOOLS_SERVER_URL or SPARKECODER_DEV_TOOLS_SERVER_URL env variable.
+   */
+  serverUrl?: string;
 }
 
 export function SparkeCodeSelect(props: SparkeCodeSelectProps): JSX.Element | null;

package/next.js

@@ -5,20 +5,29 @@ 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
+const ENV_SERVER_URL = typeof process !== 'undefined' 
+  ? (process.env.NEXT_PUBLIC_SPARKECODER_DEV_TOOLS_SERVER_URL || process.env.SPARKECODER_DEV_TOOLS_SERVER_URL)
+  : undefined;
+
 export function SparkeCodeSelect({
   enabled = process.env.NODE_ENV !== 'production',
   scriptUrl = DEFAULT_SCRIPT_URL,
   config,
   sparkecoderEnabled = true,
   strategy = 'afterInteractive',
+  serverUrl = ENV_SERVER_URL,
 }) {
   const mergedConfig = useMemo(() => ({
     ...(config || {}),
     sparkecoder: {
       enabled: sparkecoderEnabled,
+      // Use serverUrl prop, which defaults to env variable if set
+      ...(serverUrl ? { apiBase: serverUrl } : {}),
       ...(config && config.sparkecoder ? config.sparkecoder : {}),
     },
-  }), [config, sparkecoderEnabled]);
+  }), [config, sparkecoderEnabled, serverUrl]);
 
   useEffect(() => {
     if (!enabled) return;

package/package.json

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

package/sparkecode-select.js

@@ -333,6 +333,27 @@
     }
   }
 
+  async function runAgentWithPrompt(promptText) {
+    const connection = await ensureSparkecoderConnection();
+    if (!connection) return false;
+
+    try {
+      // Post to agents run endpoint to actually run the agent
+      const res = await fetch(
+        `${connection.apiBase}/agents/${connection.sessionId}/run`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ prompt: promptText }),
+        }
+      );
+      return res.ok;
+    } catch (e) {
+      console.warn('[SparkeCode] Failed to run agent:', e.message);
+      return false;
+    }
+  }
+
   // Heartbeat interval ID
   let heartbeatIntervalId = null;
   let lastHeartbeatPath = null;
@@ -691,6 +712,175 @@
     }, 1500);
   }
 
+  // ============================================
+  // Prompt Input (Spotlight-style)
+  // ============================================
+
+  let promptBar = null;
+  let promptBackdrop = null;
+  let pendingComponentContent = null;
+  let pendingComponentInfo = null;
+
+  function createPromptBar() {
+    if (promptBar) return;
+
+    // Backdrop
+    promptBackdrop = document.createElement('div');
+    promptBackdrop.id = 'sparkecode-backdrop';
+    promptBackdrop.style.cssText = `
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.5);
+      z-index: 1000002;
+      opacity: 0;
+      transition: opacity 0.15s ease;
+      display: none;
+    `;
+    promptBackdrop.addEventListener('click', hidePromptBar);
+    document.body.appendChild(promptBackdrop);
+
+    // Main bar
+    promptBar = document.createElement('div');
+    promptBar.id = 'sparkecode-prompt-modal';
+    promptBar.style.cssText = `
+      position: fixed;
+      top: 20%;
+      left: 50%;
+      transform: translateX(-50%) scale(0.95);
+      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);
+      display: none;
+      opacity: 0;
+      transition: all 0.15s ease;
+      width: 500px;
+      max-width: calc(100vw - 32px);
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      overflow: hidden;
+    `;
+
+    // Component tag (top bar)
+    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);
+      font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+      font-size: 13px;
+      color: ${config.primaryColor};
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    `;
+    promptBar.appendChild(tag);
+
+    // Input
+    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.style.cssText = `
+      width: 100%;
+      background: transparent;
+      border: none;
+      padding: 16px;
+      color: ${config.textColor};
+      font-size: 16px;
+      outline: none;
+    `;
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        submitPrompt();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        hidePromptBar();
+      }
+    });
+    promptBar.appendChild(input);
+
+    document.body.appendChild(promptBar);
+  }
+
+  function showPromptBar(componentContent, componentInfo) {
+    createPromptBar();
+    
+    pendingComponentContent = componentContent;
+    pendingComponentInfo = componentInfo;
+
+    // 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;`;
+    }
+
+    const input = document.getElementById('sparkecode-prompt-input');
+    if (input) input.value = '';
+
+    promptBackdrop.style.display = 'block';
+    promptBar.style.display = 'block';
+    
+    requestAnimationFrame(() => {
+      promptBackdrop.style.opacity = '1';
+      promptBar.style.opacity = '1';
+      promptBar.style.transform = 'translateX(-50%) scale(1)';
+      if (input) input.focus();
+    });
+  }
+
+  function hidePromptBar() {
+    if (!promptBar) return;
+    
+    promptBackdrop.style.opacity = '0';
+    promptBar.style.opacity = '0';
+    promptBar.style.transform = 'translateX(-50%) scale(0.95)';
+    
+    setTimeout(() => {
+      if (promptBackdrop) promptBackdrop.style.display = 'none';
+      if (promptBar) promptBar.style.display = 'none';
+    }, 150);
+
+    pendingComponentContent = null;
+    pendingComponentInfo = null;
+  }
+
+  async function submitPrompt() {
+    const input = document.getElementById('sparkecode-prompt-input');
+    const userMessage = input?.value?.trim() || '';
+    
+    if (!pendingComponentContent) {
+      hidePromptBar();
+      return;
+    }
+
+    // Build prompt: user message first (if any), then component context
+    let fullPrompt = userMessage 
+      ? `${userMessage}\n\n---\n\n${pendingComponentContent}`
+      : pendingComponentContent;
+
+    hidePromptBar();
+    showToast('Sending...');
+
+    const success = await runAgentWithPrompt(fullPrompt);
+    
+    if (success) {
+      showToast('Sent ✓');
+    } else {
+      await copyToClipboard(fullPrompt);
+      showToast('Copied (no connection)');
+    }
+
+    sendWebhook('prompt-sent', {
+      component: pendingComponentInfo?.name,
+      fileName: pendingComponentInfo?.fileName,
+      hasUserMessage: !!userMessage,
+      success,
+    });
+  }
+
   // ============================================
   // Event Handlers
   // ============================================
@@ -698,7 +888,6 @@
   function isValidElement(element) {
     if (!element || !isInDOM(element)) return false;
     if (element.id?.startsWith('sparkecode-')) return false;
-    if (element.closest('#sparkecode-button')) return false;
     if (element === document.body || element === document.documentElement) return false;
     try {
       const style = getComputedStyle(element);
@@ -729,7 +918,7 @@
 
   async function handleClick(e) {
     if (!isActive) return;
-    if (e.target.closest('#sparkecode-button')) return;
+    if (e.target.id?.startsWith('sparkecode-') || e.target.closest('[id^="sparkecode-"]')) return;
     
     e.preventDefault();
     e.stopPropagation();
@@ -738,10 +927,7 @@
     if (!element) return;
 
     const content = generateContent(element);
-    await copyToClipboard(content);
-    
     const info = getComponentInfo(element);
-    showToast(`Copied <${info?.name || 'Component'}>`);
     
     // Flash effect
     if (hoverBox) {
@@ -760,9 +946,19 @@
       page: getPagePath(),
     });
 
+    // If Sparkecoder is enabled and connected, show the prompt bar
     if (config.sparkecoder?.enabled) {
-      sendToSparkecoder(content).catch(() => {});
+      const connection = await ensureSparkecoderConnection();
+      if (connection) {
+        deactivate();
+        showPromptBar(content, info);
+        return;
+      }
     }
+
+    // Fallback: just copy to clipboard
+    await copyToClipboard(content);
+    showToast(`Copied <${info?.name || 'Component'}>`);
   }
 
   function handleKeyDown(e) {
@@ -775,9 +971,13 @@
       return;
     }
 
-    if (isActive && e.key === 'Escape') {
+    if (e.key === 'Escape') {
       e.preventDefault();
-      deactivate();
+      if (promptBar && promptBar.style.display !== 'none') {
+        hidePromptBar();
+      } else if (isActive) {
+        deactivate();
+      }
     }
   }
 
@@ -891,7 +1091,7 @@
     getComponentInfo,
     getComponentStack,
     
-    version: '1.0.0',
+    version: '1.1.0',
   };
 
   if (typeof window !== 'undefined') {