groove-dev 0.27.75 → 0.27.78

package/packages/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/packages/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/packages/gui/src/stores/groove.js

@@ -122,6 +122,10 @@ export const useGrooveStore = create((set, get) => ({
   networkWallet: { connected: false, address: null, balance: '0.00', token: 'GROOVE', chain: 'base-l2' },
   networkEarnings: { today: 0, thisWeek: 0, allTime: 0, history: [] },
 
+  // ── Training Data ──────────────────────────────────────────
+  trainingOptIn: false,
+  trainingStats: null,
+
   // ── Marketplace Auth ───────────────────────────────────────
   marketplaceUser: null,        // { id, displayName, avatar, ... } or null
   marketplaceAuthenticated: false,
@@ -197,6 +201,7 @@ export const useGrooveStore = create((set, get) => ({
       get().fetchTunnels();
       get().fetchBetaStatus();
       get().fetchNetworkInstallStatus();
+      get().fetchTrainingStatus();
       if (!get().onboardingComplete) get().fetchOnboardingStatus();
       if (window.groove?.auth?.onSubscriptionStatus) {
         window.groove.auth.onSubscriptionStatus((data) => {
@@ -853,6 +858,14 @@ export const useGrooveStore = create((set, get) => ({
           break;
         }
 
+        case 'training:status': {
+          set({
+            trainingOptIn: msg.data?.optedIn ?? false,
+            trainingStats: msg.data,
+          });
+          break;
+        }
+
         case 'config:updated':
           get().fetchBetaStatus();
           get().fetchNetworkInstallStatus();
@@ -2320,6 +2333,25 @@ export const useGrooveStore = create((set, get) => ({
     }
   },
 
+  // ── Training Data ─────────────────────────────────────────
+
+  async setTrainingOptIn(enabled) {
+    try {
+      await api.post('/training/opt-in', { enabled });
+      set({ trainingOptIn: enabled });
+      if (!enabled) set({ trainingStats: null });
+    } catch (e) {
+      get().addToast('error', 'Failed to update training preference');
+    }
+  },
+
+  async fetchTrainingStatus() {
+    try {
+      const data = await api.get('/training/status');
+      set({ trainingOptIn: data.optedIn, trainingStats: data });
+    } catch { /* endpoint may not exist on older daemons */ }
+  },
+
   // ── Network (Early Access) ────────────────────────────────
 
   async fetchBetaStatus() {

package/packages/gui/src/views/settings.jsx

@@ -13,10 +13,11 @@ import { Sheet, SheetContent } from '../components/ui/sheet';
 import { api } from '../lib/api';
 import { cn } from '../lib/cn';
 import { fmtUptime } from '../lib/format';
+import { Dialog, DialogContent } from '../components/ui/dialog';
 import {
   Key, Eye, EyeOff, Check, Cpu, Download, Loader2, RefreshCw, Terminal, Copy,
   FolderOpen, FolderSearch, Users, Gauge, ChevronRight,
-  ShieldCheck, Settings, Lock,
+  ShieldCheck, Settings, Lock, Database, Shield,
   Newspaper, Radio, Send, MessageSquare, MessageCircle,
   Plus, Trash2, Plug, PlugZap, TestTube, X, HelpCircle, ExternalLink,
 } from 'lucide-react';
@@ -1304,6 +1305,168 @@ function AddGatewayCard({ existingTypes, onAdd }) {
   );
 }
 
+/* ── Training Data Section ────────────────────────────────── */
+
+function TrainingDataSection() {
+  const trainingOptIn = useGrooveStore((s) => s.trainingOptIn);
+  const trainingStats = useGrooveStore((s) => s.trainingStats);
+  const setTrainingOptIn = useGrooveStore((s) => s.setTrainingOptIn);
+  const fetchTrainingStatus = useGrooveStore((s) => s.fetchTrainingStatus);
+  const addToast = useGrooveStore((s) => s.addToast);
+  const [consentOpen, setConsentOpen] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
+  useEffect(() => { fetchTrainingStatus(); }, []);
+
+  function handleToggle(next) {
+    if (next) {
+      setConsentOpen(true);
+    } else {
+      setTrainingOptIn(false);
+    }
+  }
+
+  async function handleAgree() {
+    await setTrainingOptIn(true);
+    setConsentOpen(false);
+  }
+
+  async function handleDelete() {
+    setDeleting(true);
+    try {
+      await api.post('/training/opt-in/delete');
+      useGrooveStore.setState({ trainingOptIn: false, trainingStats: null });
+      addToast('info', 'Training data deleted');
+      setDeleteOpen(false);
+    } catch (err) {
+      addToast('error', 'Failed to delete data', err.message);
+    } finally {
+      setDeleting(false);
+    }
+  }
+
+  const sessions = trainingStats?.sessionsCaptured ?? 0;
+  const envelopes = trainingStats?.envelopesSent ?? 0;
+  const active = trainingStats?.captureActive ?? false;
+
+  return (
+    <div>
+      <div className="flex items-center gap-2 mb-2.5 px-0.5">
+        <span className="text-2xs font-semibold text-text-3 font-sans uppercase tracking-wider">Training Data</span>
+        <div className="flex-1 h-px bg-border-subtle" />
+      </div>
+
+      {/* Opt-in card */}
+      <div className="rounded-lg border border-border-subtle bg-surface-1 px-4 py-3.5 max-w-md space-y-3">
+        <div className="flex items-center gap-2.5">
+          <div className="w-6 h-6 rounded bg-accent/8 flex items-center justify-center flex-shrink-0">
+            <Database size={12} className="text-accent" />
+          </div>
+          <div className="flex-1">
+            <div className="text-[13px] font-medium text-text-0 font-sans leading-tight">Share Usage Data</div>
+            <div className="text-2xs text-text-4 font-sans leading-relaxed mt-0.5">
+              Contribute anonymized session data to train Groove&apos;s MoE models. All data is PII-scrubbed before leaving your machine.
+            </div>
+          </div>
+          <Toggle value={trainingOptIn} onChange={handleToggle} />
+        </div>
+
+        {/* Stats panel — only when opted in */}
+        {trainingOptIn && (
+          <div className="border-t border-border-subtle pt-3 space-y-2.5">
+            {sessions === 0 && envelopes === 0 ? (
+              <div className="text-2xs text-text-3 font-sans">
+                No data captured yet — stats will appear after your first agent session.
+              </div>
+            ) : (
+              <div className="flex items-center gap-4">
+                <div>
+                  <div className="text-2xs text-text-2 font-sans">Sessions</div>
+                  <div className="text-sm font-semibold text-text-0 font-mono">{sessions}</div>
+                </div>
+                <div>
+                  <div className="text-2xs text-text-2 font-sans">Envelopes</div>
+                  <div className="text-sm font-semibold text-text-0 font-mono">{envelopes}</div>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <StatusDot status={active ? 'running' : 'crashed'} size="sm" />
+                  <span className="text-2xs text-text-2 font-sans">{active ? 'Capturing' : 'Idle'}</span>
+                </div>
+              </div>
+            )}
+
+            {/* Delete data */}
+            <div>
+              <Button variant="ghost" size="sm" onClick={() => setDeleteOpen(true)} className="h-7 text-2xs text-danger hover:text-danger gap-1.5">
+                <Trash2 size={10} />
+                Delete My Data
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Consent dialog */}
+      <Dialog open={consentOpen} onOpenChange={setConsentOpen}>
+        <DialogContent title="Data Collection Consent" description="Review what data is collected and how it is used.">
+          <div className="px-5 py-4 space-y-3">
+            <div className="space-y-2.5 text-xs text-text-1 font-sans leading-relaxed">
+              <div className="flex items-start gap-2.5">
+                <Database size={13} className="text-accent flex-shrink-0 mt-0.5" />
+                <div><span className="font-semibold text-text-0">What is collected:</span> Agent session trajectories — thoughts, tool calls, observations, and outcomes.</div>
+              </div>
+              <div className="flex items-start gap-2.5">
+                <Cpu size={13} className="text-accent flex-shrink-0 mt-0.5" />
+                <div><span className="font-semibold text-text-0">How it is used:</span> Training MoE expert models that become Groove agents.</div>
+              </div>
+              <div className="flex items-start gap-2.5">
+                <Shield size={13} className="text-accent flex-shrink-0 mt-0.5" />
+                <div><span className="font-semibold text-text-0">PII protection:</span> 13 categories of sensitive data (emails, API keys, file paths, etc.) are automatically scrubbed before transmission.</div>
+              </div>
+              <div className="flex items-start gap-2.5">
+                <Settings size={13} className="text-accent flex-shrink-0 mt-0.5" />
+                <div><span className="font-semibold text-text-0">Opt out anytime:</span> Toggle the setting OFF to stop collection immediately.</div>
+              </div>
+              <div className="flex items-start gap-2.5">
+                <Trash2 size={13} className="text-danger flex-shrink-0 mt-0.5" />
+                <div><span className="font-semibold text-text-0">Delete data:</span> Permanently delete all previously collected data at any time.</div>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center gap-2 px-5 py-4 border-t border-border-subtle">
+            <Button variant="primary" size="sm" onClick={handleAgree} className="flex-1 h-8 text-xs">
+              I Agree — Start Contributing
+            </Button>
+            <Button variant="ghost" size="sm" onClick={() => setConsentOpen(false)} className="h-8 text-xs px-3">
+              Cancel
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete confirmation dialog */}
+      <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <DialogContent title="Delete Training Data" description="Confirm permanent deletion of all collected training data.">
+          <div className="px-5 py-4">
+            <p className="text-xs text-text-1 font-sans leading-relaxed">
+              This will permanently delete all your collected training data and opt you out. This cannot be undone.
+            </p>
+          </div>
+          <div className="flex items-center gap-2 px-5 py-4 border-t border-border-subtle">
+            <Button variant="danger" size="sm" onClick={handleDelete} disabled={deleting} className="flex-1 h-8 text-xs">
+              {deleting ? 'Deleting...' : 'Delete All Data'}
+            </Button>
+            <Button variant="ghost" size="sm" onClick={() => setDeleteOpen(false)} className="h-8 text-xs px-3">
+              Cancel
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
 /* ── Early Access Section ─────────────────────────────────── */
 
 function EarlyAccessSection() {
@@ -1619,6 +1782,9 @@ export default function SettingsView() {
           {/* ═══════ EARLY ACCESS ═══════ */}
           <EarlyAccessSection />
 
+          {/* ═══════ TRAINING DATA ═══════ */}
+          <TrainingDataSection />
+
         </div>
       </ScrollArea>