groove-dev 0.27.75 → 0.27.77

package/node_modules/@groove-dev/gui/src/components/preview/preview-workspace.jsx

@@ -1,6 +1,6 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useState, useRef, useCallback, useEffect } from 'react';
-import { Send, Paperclip, MonitorX, Loader2 } from 'lucide-react';
+import { Send, Paperclip, MonitorX, Loader2, MessageCircle, Camera, RefreshCw } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
 import { timeAgo } from '../../lib/format';
@@ -137,9 +137,24 @@ function PreviewChat() {
       <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-4 space-y-4">
         {previewChat.length === 0 && (
           <div className="flex items-center justify-center h-full">
-            <p className="text-sm text-text-3 font-sans text-center">
-              Describe changes and they'll be routed to the team planner
-            </p>
+            <div className="max-w-xs w-full px-5 py-5 bg-surface-1 border border-border-subtle rounded-xl text-center">
+              <MessageCircle size={24} className="mx-auto text-accent mb-3" />
+              <h3 className="text-sm font-semibold text-text-0 font-sans mb-3">Preview is live!</h3>
+              <ul className="text-left space-y-2 text-2xs text-text-2 font-sans">
+                <li className="flex gap-2">
+                  <Send size={11} className="text-text-3 mt-0.5 flex-shrink-0" />
+                  <span>Type a message to request changes — your feedback goes to the team planner who routes it to the right agent</span>
+                </li>
+                <li className="flex gap-2">
+                  <Camera size={11} className="text-text-3 mt-0.5 flex-shrink-0" />
+                  <span>Use the camera icon to screenshot a specific area and annotate it</span>
+                </li>
+                <li className="flex gap-2">
+                  <RefreshCw size={11} className="text-text-3 mt-0.5 flex-shrink-0" />
+                  <span>Changes auto-refresh via hot module reload</span>
+                </li>
+              </ul>
+            </div>
           </div>
         )}
         {previewChat.map((msg, i) => (

package/node_modules/@groove-dev/gui/src/components/preview/screenshot-overlay.jsx

@@ -1,6 +1,6 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useState, useRef, useCallback, useEffect } from 'react';
-import { Send, X } from 'lucide-react';
+import { Send, X, Loader2 } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
 
 export function ScreenshotOverlay({ iframeRef }) {
@@ -11,8 +11,9 @@ export function ScreenshotOverlay({ iframeRef }) {
   const [dragging, setDragging] = useState(false);
   const [start, setStart] = useState(null);
   const [end, setEnd] = useState(null);
-  const [captured, setCaptured] = useState(null); // { base64, rect }
+  const [captured, setCaptured] = useState(null); // { base64, rect, loading }
   const [comment, setComment] = useState('');
+  const [flashRect, setFlashRect] = useState(null);
 
   const handleMouseDown = useCallback((e) => {
     if (captured) return;
@@ -48,9 +49,37 @@ export function ScreenshotOverlay({ iframeRef }) {
       return;
     }
 
+    setCaptured({ base64: null, rect: selRect, loading: true });
+
+    function finishCapture(base64) {
+      setCaptured({ base64, rect: selRect, loading: false });
+      setFlashRect(selRect);
+      setTimeout(() => setFlashRect(null), 600);
+    }
+
+    function drawPlaceholder() {
+      const canvas = document.createElement('canvas');
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = selRect.w * dpr;
+      canvas.height = selRect.h * dpr;
+      const ctx = canvas.getContext('2d');
+      ctx.scale(dpr, dpr);
+      ctx.fillStyle = '#1e2127';
+      ctx.fillRect(0, 0, selRect.w, selRect.h);
+      ctx.strokeStyle = '#3e4451';
+      ctx.lineWidth = 1;
+      ctx.strokeRect(4, 4, selRect.w - 8, selRect.h - 8);
+      ctx.fillStyle = '#6e7681';
+      ctx.font = '12px Inter, sans-serif';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(`${Math.round(selRect.w)} × ${Math.round(selRect.h)}`, selRect.w / 2, selRect.h / 2);
+      return canvas.toDataURL('image/png');
+    }
+
     try {
       const iframe = iframeRef.current;
-      if (!iframe) { setStart(null); setEnd(null); return; }
+      if (!iframe) { finishCapture(drawPlaceholder()); return; }
 
       const canvas = document.createElement('canvas');
       const dpr = window.devicePixelRatio || 1;
@@ -59,53 +88,25 @@ export function ScreenshotOverlay({ iframeRef }) {
       const ctx = canvas.getContext('2d');
       ctx.scale(dpr, dpr);
 
-      // Same-origin proxy iframe — serialize DOM to SVG foreignObject for capture
-      const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
-      if (iframeDoc) {
-        const serializer = new XMLSerializer();
-        const html = serializer.serializeToString(iframeDoc.documentElement);
-        const iframeRect = iframe.getBoundingClientRect();
-        const overlayRect = overlayRef.current.getBoundingClientRect();
-        const offsetX = selRect.x - (iframeRect.left - overlayRect.left);
-        const offsetY = selRect.y - (iframeRect.top - overlayRect.top);
-
-        const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="${selRect.w}" height="${selRect.h}">
-          <foreignObject x="${-offsetX}" y="${-offsetY}" width="${iframeRect.width}" height="${iframeRect.height}">
-            ${html}
-          </foreignObject>
-        </svg>`;
-        const blob = new Blob([svgStr], { type: 'image/svg+xml;charset=utf-8' });
-        const url = URL.createObjectURL(blob);
-        const img = new Image();
-        img.onload = () => {
-          ctx.drawImage(img, 0, 0, selRect.w, selRect.h);
-          URL.revokeObjectURL(url);
-          setCaptured({ base64: canvas.toDataURL('image/png'), rect: selRect });
-        };
-        img.onerror = () => {
-          URL.revokeObjectURL(url);
-          // Fallback: region placeholder
-          ctx.fillStyle = '#1e2127';
-          ctx.fillRect(0, 0, selRect.w, selRect.h);
-          ctx.fillStyle = '#6e7681';
-          ctx.font = '12px Inter, sans-serif';
-          ctx.textAlign = 'center';
-          ctx.fillText(`Region ${Math.round(selRect.w)}×${Math.round(selRect.h)}`, selRect.w / 2, selRect.h / 2);
-          setCaptured({ base64: canvas.toDataURL('image/png'), rect: selRect });
-        };
-        img.src = url;
-      } else {
-        ctx.fillStyle = '#1e2127';
-        ctx.fillRect(0, 0, selRect.w, selRect.h);
-        ctx.fillStyle = '#6e7681';
-        ctx.font = '12px Inter, sans-serif';
-        ctx.textAlign = 'center';
-        ctx.fillText(`Region ${Math.round(selRect.w)}×${Math.round(selRect.h)}`, selRect.w / 2, selRect.h / 2);
-        setCaptured({ base64: canvas.toDataURL('image/png'), rect: selRect });
+      const iframeRect = iframe.getBoundingClientRect();
+      const overlayRect = overlayRef.current.getBoundingClientRect();
+      const offsetX = selRect.x - (iframeRect.left - overlayRect.left);
+      const offsetY = selRect.y - (iframeRect.top - overlayRect.top);
+
+      try {
+        ctx.drawImage(iframe, -offsetX * dpr, -offsetY * dpr, iframeRect.width * dpr, iframeRect.height * dpr, 0, 0, selRect.w, selRect.h);
+        const testPixel = ctx.getImageData(0, 0, 1, 1).data;
+        if (testPixel[0] === 0 && testPixel[1] === 0 && testPixel[2] === 0 && testPixel[3] === 0) {
+          throw new Error('blank');
+        }
+        finishCapture(canvas.toDataURL('image/png'));
+      } catch {
+        finishCapture(drawPlaceholder());
       }
     } catch {
       setStart(null);
       setEnd(null);
+      setCaptured(null);
     }
   }, [dragging, start, end, iframeRef]);
 
@@ -118,7 +119,7 @@ export function ScreenshotOverlay({ iframeRef }) {
   }, [toggleScreenshotMode]);
 
   function handleSubmit() {
-    if (!captured) return;
+    if (!captured || captured.loading) return;
     iteratePreview(comment || 'See screenshot', captured.base64);
     toggleScreenshotMode();
   }
@@ -130,6 +131,19 @@ export function ScreenshotOverlay({ iframeRef }) {
     height: Math.abs(end.y - start.y),
   } : null;
 
+  const popoverPosition = useCallback((rect) => {
+    if (!rect || !overlayRef.current) return {};
+    const overlayH = overlayRef.current.clientHeight;
+    const overlayW = overlayRef.current.clientWidth;
+    const spaceBelow = overlayH - (rect.y + rect.h + 8);
+    const popoverH = 200;
+    const placeAbove = spaceBelow < popoverH && rect.y > popoverH;
+    return {
+      left: Math.max(8, Math.min(rect.x, overlayW - 300)),
+      top: placeAbove ? rect.y - popoverH - 8 : rect.y + rect.h + 8,
+    };
+  }, []);
+
   return (
     <div
       ref={overlayRef}
@@ -150,21 +164,40 @@ export function ScreenshotOverlay({ iframeRef }) {
         />
       )}
 
+      {/* Capture flash */}
+      {flashRect && (
+        <div
+          className="absolute pointer-events-none animate-capture-flash rounded"
+          style={{ left: flashRect.x, top: flashRect.y, width: flashRect.w, height: flashRect.h }}
+        />
+      )}
+
+      {/* Captured selection outline */}
+      {captured && (
+        <div
+          className="absolute border-2 border-accent rounded pointer-events-none"
+          style={{ left: captured.rect.x, top: captured.rect.y, width: captured.rect.w, height: captured.rect.h }}
+        />
+      )}
+
       {/* Capture popover */}
       {captured && (
         <div
           className="absolute z-40 w-72 bg-surface-2 border border-border rounded-lg shadow-2xl animate-chat-fade-in"
-          style={{
-            left: Math.min(captured.rect.x, overlayRef.current?.clientWidth - 300 || 0),
-            top: captured.rect.y + captured.rect.h + 8,
-          }}
+          style={popoverPosition(captured.rect)}
         >
           <div className="p-3 border-b border-border-subtle">
-            <img
-              src={captured.base64}
-              alt="Screenshot"
-              className="w-full h-auto rounded border border-border-subtle max-h-32 object-contain bg-surface-0"
-            />
+            {captured.loading ? (
+              <div className="w-full h-24 rounded border border-border-subtle bg-surface-0 flex items-center justify-center">
+                <Loader2 size={20} className="text-accent animate-spin" />
+              </div>
+            ) : (
+              <img
+                src={captured.base64}
+                alt="Screenshot"
+                className="w-full h-auto rounded border border-border-subtle max-h-32 object-contain bg-surface-0"
+              />
+            )}
           </div>
           <div className="p-3 flex items-center gap-2">
             <input
@@ -178,7 +211,8 @@ export function ScreenshotOverlay({ iframeRef }) {
             />
             <button
               onClick={handleSubmit}
-              className="w-8 h-8 flex items-center justify-center rounded-md bg-accent/15 text-accent hover:bg-accent/25 transition-colors cursor-pointer"
+              disabled={captured.loading}
+              className="w-8 h-8 flex items-center justify-center rounded-md bg-accent/15 text-accent hover:bg-accent/25 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
             >
               <Send size={14} />
             </button>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "groove-dev",
-  "version": "0.27.75",
+  "version": "0.27.77",
   "description": "Open-source agent orchestration layer — the AI company OS. Local model agent engine (GGUF/Ollama/llama-server), HuggingFace model browser, MCP integrations (Slack, Gmail, Stripe, 15+), agent scheduling (cron), business roles (CMO, CFO, EA). GUI dashboard, multi-agent coordination, zero cold-start, infinite sessions. Works with Claude Code, Codex, Gemini CLI, Ollama, any local model.",
   "license": "FSL-1.1-Apache-2.0",
   "author": "Groove Dev <hello@groovedev.ai> (https://groovedev.ai)",

package/packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groove-dev/cli",
-  "version": "0.27.75",
+  "version": "0.27.77",
   "description": "GROOVE CLI — manage AI coding agents from your terminal",
   "license": "FSL-1.1-Apache-2.0",
   "type": "module",

package/packages/daemon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groove-dev/daemon",
-  "version": "0.27.75",
+  "version": "0.27.77",
   "description": "GROOVE daemon — agent orchestration engine",
   "license": "FSL-1.1-Apache-2.0",
   "type": "module",

package/packages/daemon/src/preview.js

@@ -168,6 +168,20 @@ export class PreviewService {
     if (!command) {
       return Promise.resolve({ launched: false, reason: 'no_command' });
     }
+    // If command references an npm script, verify it exists in package.json
+    const npmRunMatch = command.match(/npm\s+run\s+(\S+)/);
+    if (npmRunMatch) {
+      const scriptName = npmRunMatch[1];
+      const pkgPath = resolve(baseDir, 'package.json');
+      try {
+        const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'));
+        if (!pkg.scripts || !pkg.scripts[scriptName]) {
+          return Promise.resolve({ launched: false, reason: 'no_dev_script' });
+        }
+      } catch {
+        return Promise.resolve({ launched: false, reason: 'no_dev_script' });
+      }
+    }
     const urlPattern = preview.urlPattern
       ? new RegExp(preview.urlPattern)
       : /https?:\/\/(localhost|127\.0\.0\.1|0\.0\.0\.0):\d+/;

package/packages/daemon/src/process.js

@@ -114,6 +114,9 @@ CRITICAL — NEVER DO THESE:
 - NEVER kill the daemon process. No "kill <pid>", "pkill groove", "killall node", etc.
 - NEVER run "./promote.sh", "./promote-local.sh", or any publish/deploy script.
 - NEVER start long-running dev servers (vite dev, npm start, next dev, etc.).
+- NEVER use 'git add -f' or 'git add --force' to bypass .gitignore. If a file is gitignored, it should stay gitignored. Only stage files that git tracks normally. If .gitignore prevents staging, report it in your output — do NOT force-add.
+- NEVER use 'git push --force' or 'git push -f'. Force-pushing can destroy shared history.
+- NEVER modify .gitignore to include files that were previously excluded.
 
 Restarting the daemon destroys ALL other agents currently running in other teams. Verification is done via "npm run build" and "npm test", which exit cleanly. If code changes require a daemon restart to take effect, report that in your output so the user can restart manually — do NOT do it yourself.
 
@@ -1161,7 +1164,7 @@ For normal file edits within your scope, proceed without review.
     const workingDir = plan.workingDir;
     preview.launch(teamId, workingDir, plan.preview).then((result) => {
       if (!result.launched) {
-        const intentionalSkips = new Set(['no_preview', 'cli', 'none']);
+        const intentionalSkips = new Set(['no_preview', 'cli', 'none', 'no_command', 'no_dev_script']);
         if (intentionalSkips.has(result.reason)) {
           console.log(`[Groove] Preview for team ${teamId} intentionally skipped: ${result.reason}`);
           return;