npm - groove-dev - Versions diffs - 0.27.86 → 0.27.87 - Mend

groove-dev 0.27.86 → 0.27.87

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (507) hide show

package/packages/gui/dist/index.html CHANGED Viewed

@@ -6,12 +6,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <title>Groove GUI</title>
-    <script type="module" crossorigin src="/assets/index-BbDDgazC.js"></script>
+    <script type="module" crossorigin src="/assets/index-C5e7KVGN.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/vendor-C0HXlhrU.js">
     <link rel="modulepreload" crossorigin href="/assets/reactflow-BQPfi37R.js">
     <link rel="modulepreload" crossorigin href="/assets/codemirror-BBL3i_JW.js">
     <link rel="modulepreload" crossorigin href="/assets/xterm--7_ns2zW.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-fhMxiPGp.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-BCQY8ojz.css">
   </head>
   <body>
     <div id="root"></div>

package/packages/gui/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@groove-dev/gui",
-  "version": "0.27.86",
+  "version": "0.27.87",
   "description": "GROOVE GUI — visual agent control plane",
   "license": "FSL-1.1-Apache-2.0",
   "type": "module",
@@ -38,6 +38,7 @@
     "@xyflow/react": "^12.0.0",
     "clsx": "^2.1.1",
     "framer-motion": "^12.38.0",
+    "html2canvas": "^1.4.1",
     "lucide-react": "^1.7.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/packages/gui/src/components/preview/preview-workspace.jsx CHANGED Viewed

@@ -224,7 +224,7 @@ const DEVICE_WIDTHS = {
   mobile: '375px',
 };
-export function PreviewWorkspace() {
+export function PreviewWorkspace({ embedded = false }) {
   const previewState = useGrooveStore((s) => s.previewState);
   const iframeRef = useRef(null);
   const [iframeKey, setIframeKey] = useState(0);
@@ -269,10 +269,11 @@ export function PreviewWorkspace() {
         </div>
       </div>
-      {/* Right pane: chat */}
-      <div className="flex-[2] min-w-[280px] max-w-[480px] border-l border-border md:max-w-none md:flex-[2]">
-        <PreviewChat />
-      </div>
+      {!embedded && (
+        <div className="flex-[2] min-w-[280px] max-w-[480px] border-l border-border md:max-w-none md:flex-[2]">
+          <PreviewChat />
+        </div>
+      )}
     </div>
   );
 }

package/packages/gui/src/components/preview/screenshot-overlay.jsx CHANGED Viewed

@@ -2,6 +2,7 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { Send, X, Loader2 } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
+import html2canvas from 'html2canvas';
 export function ScreenshotOverlay({ iframeRef }) {
   const toggleScreenshotMode = useGrooveStore((s) => s.toggleScreenshotMode);
@@ -77,37 +78,48 @@ export function ScreenshotOverlay({ iframeRef }) {
       return canvas.toDataURL('image/png');
     }
-    try {
-      const iframe = iframeRef.current;
-      if (!iframe) { finishCapture(drawPlaceholder()); return; }
+    const iframe = iframeRef.current;
+    if (!iframe) { finishCapture(drawPlaceholder()); return; }
-      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);
+    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 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);
-    }
+    let iframeBody;
+    try {
+      iframeBody = iframe.contentDocument?.body || iframe.contentWindow?.document?.body;
+    } catch { /* cross-origin fallback */ }
+    if (!iframeBody) { finishCapture(drawPlaceholder()); return; }
+    html2canvas(iframeBody, {
+      width: iframeRect.width,
+      height: iframeRect.height,
+      windowWidth: iframeRect.width,
+      windowHeight: iframeRect.height,
+      x: 0,
+      y: 0,
+      useCORS: true,
+      logging: false,
+    }).then((fullCanvas) => {
+      const dpr = window.devicePixelRatio || 1;
+      const cropCanvas = document.createElement('canvas');
+      cropCanvas.width = selRect.w * dpr;
+      cropCanvas.height = selRect.h * dpr;
+      const ctx = cropCanvas.getContext('2d');
+      ctx.drawImage(
+        fullCanvas,
+        offsetX * (fullCanvas.width / iframeRect.width),
+        offsetY * (fullCanvas.height / iframeRect.height),
+        selRect.w * (fullCanvas.width / iframeRect.width),
+        selRect.h * (fullCanvas.height / iframeRect.height),
+        0, 0, cropCanvas.width, cropCanvas.height,
+      );
+      finishCapture(cropCanvas.toDataURL('image/png'));
+    }).catch(() => {
+      finishCapture(drawPlaceholder());
+    });
   }, [dragging, start, end, iframeRef]);
   useEffect(() => {

package/packages/gui/src/stores/groove.js CHANGED Viewed

@@ -58,6 +58,7 @@ export const useGrooveStore = create((set, get) => ({
   // ── Preview ───────────────────────────────────────────────
   previewState: { url: null, teamId: null, kind: null, deviceSize: 'desktop', screenshotMode: false },
+  showPreviewInAgents: false,
   previewChat: [],
   previewIterating: false,
@@ -1187,14 +1188,17 @@ export const useGrooveStore = create((set, get) => ({
   // ── Preview ──────────────────────────────────────────────
   openPreview(url, teamId, kind) {
-    set({ previewState: { url, teamId, kind, deviceSize: 'desktop', screenshotMode: false }, previewChat: [], activeView: 'preview' });
+    set({ previewState: { url, teamId, kind, deviceSize: 'desktop', screenshotMode: false }, previewChat: [], showPreviewInAgents: true });
   },
   closePreview() {
     const { previewState } = get();
     if (previewState.teamId) {
       api.delete(`/preview/${previewState.teamId}`).catch(() => {});
     }
-    set({ previewState: { url: null, teamId: null, kind: null, deviceSize: 'desktop', screenshotMode: false }, previewChat: [], previewIterating: false, activeView: 'agents' });
+    set({ previewState: { url: null, teamId: null, kind: null, deviceSize: 'desktop', screenshotMode: false }, previewChat: [], previewIterating: false, showPreviewInAgents: false, activeView: 'agents' });
+  },
+  togglePreviewInAgents() {
+    set((s) => ({ showPreviewInAgents: !s.showPreviewInAgents }));
   },
   setPreviewDevice(size) {
     set((s) => ({ previewState: { ...s.previewState, deviceSize: size } }));

package/packages/gui/src/views/agents.jsx CHANGED Viewed

@@ -10,7 +10,8 @@ import { RootNode } from '../components/agents/root-node';
 import { cn } from '../lib/cn';
 import { Button } from '../components/ui/button';
 import { Badge } from '../components/ui/badge';
-import { Plus, Users, Zap, X, Check, Rocket, Server, Monitor, Code2, TestTube, Shield, Pencil, Copy, Trash2, ChevronDown, ChevronLeft, ChevronRight, FolderOpen, Radio } from 'lucide-react';
+import { Plus, Users, Zap, X, Check, Rocket, Server, Monitor, Code2, TestTube, Shield, Pencil, Copy, Trash2, ChevronDown, ChevronLeft, ChevronRight, FolderOpen, Radio, Eye } from 'lucide-react';
+import { PreviewWorkspace } from '../components/preview/preview-workspace';
 import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator } from '../components/ui/context-menu';
 const NODE_TYPES = { agentNode: AgentNode, rootNode: RootNode };
@@ -795,6 +796,9 @@ export default function AgentsView() {
   const selectAgent = useGrooveStore((s) => s.selectAgent);
   const recommendedTeam = useGrooveStore((s) => s.recommendedTeam);
   const checkRecommendedTeam = useGrooveStore((s) => s.checkRecommendedTeam);
+  const showPreviewInAgents = useGrooveStore((s) => s.showPreviewInAgents);
+  const previewState = useGrooveStore((s) => s.previewState);
+  const togglePreviewInAgents = useGrooveStore((s) => s.togglePreviewInAgents);
   // Poll for recommended team while a planner is running
   useEffect(() => {
@@ -845,6 +849,8 @@ export default function AgentsView() {
           </div>
         ) : teamAgents.length === 0 ? (
           <EmptyState onPlanner={launchPlanner} onSpawn={() => openDetail({ type: 'spawn' })} />
+        ) : showPreviewInAgents && previewState.url ? (
+          <PreviewWorkspace embedded />
         ) : (
           <ReactFlowProvider key={activeTeamId}>
             <AgentTreeInner />
@@ -861,6 +867,14 @@ export default function AgentsView() {
           Spawn
         </button>
       )}
+      {!isLoading && teamAgents.length > 0 && previewState.url && (
+        <button
+          onClick={togglePreviewInAgents}
+          className="absolute bottom-4 right-4 z-40 flex items-center gap-1.5 h-8 px-4 rounded-md bg-info/15 text-info text-xs font-semibold font-sans hover:bg-info/25 transition-colors cursor-pointer select-none shadow-lg shadow-black/10"
+        >
+          {showPreviewInAgents ? <><Users size={14} /> Team</> : <><Eye size={14} /> Preview</>}
+        </button>
+      )}
     </div>
   );
 }

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

@@ -14,12 +14,14 @@ import { api } from '../lib/api';
 import { cn } from '../lib/cn';
 import { fmtUptime } from '../lib/format';
 import { Dialog, DialogContent } from '../components/ui/dialog';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 import {
   Key, Eye, EyeOff, Check, Cpu, Download, Loader2, RefreshCw, Terminal, Copy,
   FolderOpen, FolderSearch, Users, Gauge, ChevronRight,
   ShieldCheck, Settings, Lock, Database, Shield,
   Newspaper, Radio, Send, MessageSquare, MessageCircle,
   Plus, Trash2, Plug, PlugZap, TestTube, X, HelpCircle, ExternalLink,
+  Sparkles, Share2, Gift,
 } from 'lucide-react';
 /* ── Toggle ────────────────────────────────────────────────── */
@@ -1409,39 +1411,115 @@ function TrainingDataSection() {
       {/* 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>
+        <DialogContent className="max-w-2xl" description="Review how your data helps build open source AI">
+          {/* 1. Hero Section */}
+          <div className="relative bg-gradient-to-br from-accent/5 to-transparent px-6 pt-8 pb-6 text-center">
+            <DialogPrimitive.Close className="absolute top-3 right-3 p-1.5 rounded-md text-text-3 hover:text-text-0 hover:bg-surface-5 transition-colors">
+              <X size={16} />
+            </DialogPrimitive.Close>
+            <div className="flex justify-center mb-3">
+              <div className="w-14 h-14 rounded-xl bg-accent/10 flex items-center justify-center">
+                <Sparkles size={32} className="text-accent" />
               </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>
+            <DialogPrimitive.Title className="text-xl font-bold text-text-0 font-sans">Help Build Open Source Intelligence</DialogPrimitive.Title>
+            <p className="text-sm text-text-2 font-sans mt-2 max-w-md mx-auto">
+              Your usage data trains a free, local MoE model that every Groove user gets to use — including you.
+            </p>
+          </div>
+          {/* 2. Value Proposition */}
+          <div className="px-6 pt-5 pb-1">
+            <div className="grid grid-cols-3 gap-3">
+              {[
+                { icon: Share2, title: 'You Share', desc: 'Anonymized agent session data: tool calls, error patterns, task flows' },
+                { icon: Cpu, title: 'We Train', desc: 'A Groove-specific Mixture of Experts model built on real multi-agent workflows' },
+                { icon: Gift, title: 'Everyone Wins', desc: 'Free, local, open source model for all Groove users. More data = smarter agents' },
+              ].map(({ icon: Icon, title, desc }) => (
+                <div key={title} className="rounded-lg border border-border-subtle bg-surface-2/50 p-3 text-center">
+                  <div className="flex justify-center mb-2">
+                    <Icon size={18} className="text-accent" />
+                  </div>
+                  <div className="text-xs font-semibold text-text-0 font-sans mb-1">{title}</div>
+                  <div className="text-2xs text-text-2 font-sans leading-relaxed">{desc}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+          {/* 3. What We Collect */}
+          <div className="px-6 pt-4">
+            <div className="text-xs font-semibold uppercase text-text-3 tracking-wider font-sans mb-2.5">What We Collect</div>
+            <div className="space-y-1.5">
+              {[
+                'Agent tool calling patterns',
+                'Error and recovery sequences',
+                'Task complexity and coordination events',
+                'Model and provider usage metadata',
+                'Session duration and outcomes',
+              ].map((item) => (
+                <div key={item} className="flex items-center gap-2">
+                  <Check size={12} className="text-accent flex-shrink-0" />
+                  <span className="text-xs text-text-1 font-sans">{item}</span>
+                </div>
+              ))}
+            </div>
+            <p className="text-xs text-text-0 font-sans font-medium mt-3">
+              That&apos;s it. Groove orchestration data only.
+            </p>
+          </div>
+          {/* 4. What We Never Collect */}
+          <div className="px-6 pt-4">
+            <div className="rounded-lg border border-border-subtle bg-surface-2/30 p-4">
+              <div className="flex items-center gap-2 mb-2.5">
+                <Shield size={14} className="text-text-2" />
+                <span className="text-xs font-semibold uppercase text-text-3 tracking-wider font-sans">What We Never Collect</span>
               </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 className="space-y-1.5">
+                {[
+                  'Your source code or file contents',
+                  'API keys, passwords, or credentials',
+                  'Personal information — emails, names, file paths',
+                  'Anything that could identify your IP or projects',
+                ].map((item) => (
+                  <div key={item} className="flex items-center gap-2">
+                    <X size={12} className="text-danger flex-shrink-0" />
+                    <span className="text-xs text-text-1 font-sans">{item}</span>
+                  </div>
+                ))}
               </div>
+              <p className="text-xs text-text-0 font-sans font-medium mt-3">
+                13 categories of PII are automatically scrubbed before any data leaves your machine.
+              </p>
             </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
+          {/* 5. Mission Statement */}
+          <div className="px-6 pt-4">
+            <div className="border-l-2 border-accent/30 pl-3">
+              <p className="text-xs text-text-3 italic leading-relaxed font-sans">
+                We believe in open source, decentralized intelligence. Not walled gardens. Not data hoarding. Every contribution makes the model better for everyone. We need your help to get there.
+              </p>
+            </div>
+          </div>
+          {/* 6. CTA Section */}
+          <div className="border-t border-border-subtle mt-5 pt-4 pb-1 px-6">
+            <Button variant="primary" size="sm" onClick={handleAgree} className="w-full h-10 text-sm font-semibold">
+              Join the Movement — Start Contributing
             </Button>
+            <div className="text-center mt-2.5">
+              <button onClick={() => setConsentOpen(false)} className="text-xs text-text-3 hover:text-text-1 transition-colors font-sans cursor-pointer">
+                Not now
+              </button>
+            </div>
+            <p className="text-center text-2xs text-text-4 font-sans mt-2 mb-1">
+              You can opt out and delete your data anytime in Settings
+            </p>
           </div>
         </DialogContent>
       </Dialog>