groove-dev 0.27.86 → 0.27.88

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

@@ -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>
 

package/test/doomsday-clock/index.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Doomsday Clock</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Nosifer&family=Special+Elite&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="particles">
+    <span class="particle"></span>
+    <span class="particle"></span>
+    <span class="particle"></span>
+    <span class="particle"></span>
+    <span class="particle"></span>
+    <span class="particle"></span>
+    <span class="particle"></span>
+    <span class="particle"></span>
+  </div>
+
+  <main class="container">
+    <p class="tagline" id="tagline">TIME IS RUNNING OUT</p>
+
+    <div class="clock-ring">
+      <div class="glow"></div>
+      <div class="countdown" id="countdown">
+        <div class="unit">
+          <span class="digit" id="days">00</span>
+          <span class="label">Days</span>
+        </div>
+        <div class="separator">:</div>
+        <div class="unit">
+          <span class="digit" id="hours">00</span>
+          <span class="label">Hours</span>
+        </div>
+        <div class="separator">:</div>
+        <div class="unit">
+          <span class="digit" id="minutes">00</span>
+          <span class="label">Minutes</span>
+        </div>
+        <div class="separator">:</div>
+        <div class="unit">
+          <span class="digit" id="seconds">00</span>
+          <span class="label">Seconds</span>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <script src="script.js"></script>
+</body>
+</html>

package/test/doomsday-clock/script.js

@@ -0,0 +1,66 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+(function () {
+  var STORAGE_KEY = 'doomsday-target';
+  var FIVE_DAYS_MS = 5 * 24 * 60 * 60 * 1000;
+
+  var daysEl = document.getElementById('days');
+  var hoursEl = document.getElementById('hours');
+  var minutesEl = document.getElementById('minutes');
+  var secondsEl = document.getElementById('seconds');
+  var taglineEl = document.getElementById('tagline');
+
+  var target = localStorage.getItem(STORAGE_KEY);
+  if (!target) {
+    target = Date.now() + FIVE_DAYS_MS;
+    localStorage.setItem(STORAGE_KEY, target);
+  } else {
+    target = Number(target);
+  }
+
+  var done = false;
+
+  function pad(n) {
+    return n < 10 ? '0' + n : String(n);
+  }
+
+  function tick() {
+    if (done) return;
+
+    var remaining = target - Date.now();
+
+    if (remaining <= 0) {
+      done = true;
+      daysEl.textContent = '00';
+      hoursEl.textContent = '00';
+      minutesEl.textContent = '00';
+      secondsEl.textContent = '00';
+
+      taglineEl.textContent = 'IT IS DONE';
+      taglineEl.classList.add('done');
+
+      document.querySelectorAll('.digit').forEach(function (el) {
+        el.classList.add('stopped');
+      });
+      document.querySelectorAll('.separator').forEach(function (el) {
+        el.classList.add('stopped');
+      });
+
+      document.body.classList.add('flash');
+      return;
+    }
+
+    var totalSeconds = Math.floor(remaining / 1000);
+    var d = Math.floor(totalSeconds / 86400);
+    var h = Math.floor((totalSeconds % 86400) / 3600);
+    var m = Math.floor((totalSeconds % 3600) / 60);
+    var s = totalSeconds % 60;
+
+    daysEl.textContent = pad(d);
+    hoursEl.textContent = pad(h);
+    minutesEl.textContent = pad(m);
+    secondsEl.textContent = pad(s);
+  }
+
+  tick();
+  setInterval(tick, 1000);
+})();

package/test/doomsday-clock/style.css

@@ -0,0 +1,315 @@
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background: #0a0a0a;
+  color: #e0d8c8;
+  font-family: 'Special Elite', cursive;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+}
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-size: 128px 128px;
+  opacity: 0.04;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.container {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3rem;
+}
+
+.tagline {
+  font-family: 'Special Elite', cursive;
+  font-size: 1.4rem;
+  letter-spacing: 0.5em;
+  text-transform: uppercase;
+  color: #cc0000;
+  text-shadow: 0 0 20px rgba(204, 0, 0, 0.5);
+  animation: taglinePulse 4s ease-in-out infinite;
+}
+
+@keyframes taglinePulse {
+  0%, 100% { opacity: 0.7; }
+  50% { opacity: 1; }
+}
+
+.clock-ring {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem;
+}
+
+.clock-ring::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 3px dashed rgba(139, 0, 0, 0.4);
+  border-radius: 50%;
+  animation: ringRotate 60s linear infinite;
+}
+
+.clock-ring::after {
+  content: '';
+  position: absolute;
+  inset: 10px;
+  border: 2px dotted rgba(139, 0, 0, 0.25);
+  border-radius: 50%;
+  animation: ringRotate 45s linear infinite reverse;
+}
+
+@keyframes ringRotate {
+  to { transform: rotate(360deg); }
+}
+
+.glow {
+  position: absolute;
+  width: 400px;
+  height: 400px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(139, 0, 0, 0.3) 0%, rgba(139, 0, 0, 0) 70%);
+  animation: glowPulse 3s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@keyframes glowPulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.6;
+  }
+  50% {
+    transform: scale(1.15);
+    opacity: 1;
+  }
+}
+
+.countdown {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  position: relative;
+  z-index: 2;
+}
+
+.unit {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.digit {
+  font-family: 'Nosifer', system-ui;
+  font-size: 5rem;
+  color: #cc0000;
+  text-shadow:
+    0 0 10px rgba(204, 0, 0, 0.6),
+    0 0 40px rgba(139, 0, 0, 0.3);
+  line-height: 1;
+  min-width: 2.4ch;
+  text-align: center;
+  animation: flicker 0.15s infinite;
+}
+
+@keyframes flicker {
+  0% {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+  20% {
+    opacity: 0.85;
+    transform: translate(-1px, 0);
+  }
+  40% {
+    opacity: 1;
+    transform: translate(1px, 0);
+  }
+  60% {
+    opacity: 0.9;
+    transform: translate(0, 1px);
+  }
+  80% {
+    opacity: 1;
+    transform: translate(1px, -1px);
+  }
+  100% {
+    opacity: 0.95;
+    transform: translate(-1px, 0);
+  }
+}
+
+.separator {
+  font-family: 'Nosifer', system-ui;
+  font-size: 4rem;
+  color: #8b0000;
+  line-height: 1;
+  padding-bottom: 1.5rem;
+  animation: flicker 0.15s infinite;
+}
+
+.label {
+  font-family: 'Special Elite', cursive;
+  font-size: 0.85rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: #e0d8c8;
+  opacity: 0.6;
+}
+
+/* Particles */
+.particles {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.particle {
+  position: absolute;
+  width: 3px;
+  height: 3px;
+  background: rgba(139, 0, 0, 0.5);
+  border-radius: 50%;
+  animation: float linear infinite;
+}
+
+.particle:nth-child(1) { left: 10%; animation-duration: 12s; animation-delay: 0s; }
+.particle:nth-child(2) { left: 25%; animation-duration: 10s; animation-delay: -2s; }
+.particle:nth-child(3) { left: 40%; animation-duration: 14s; animation-delay: -4s; }
+.particle:nth-child(4) { left: 55%; animation-duration: 11s; animation-delay: -1s; }
+.particle:nth-child(5) { left: 70%; animation-duration: 13s; animation-delay: -3s; }
+.particle:nth-child(6) { left: 85%; animation-duration: 9s;  animation-delay: -5s; }
+.particle:nth-child(7) { left: 15%; animation-duration: 15s; animation-delay: -7s; }
+.particle:nth-child(8) { left: 60%; animation-duration: 11s; animation-delay: -6s; }
+
+@keyframes float {
+  0% {
+    transform: translateY(100vh) scale(0);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 0.3;
+  }
+  100% {
+    transform: translateY(-10vh) scale(1);
+    opacity: 0;
+  }
+}
+
+/* Flash effect when timer ends */
+.flash {
+  animation: screenFlash 0.6s ease-out;
+}
+
+@keyframes screenFlash {
+  0% { background: #8b0000; }
+  100% { background: #0a0a0a; }
+}
+
+/* Stopped state */
+.digit.stopped {
+  animation: none;
+  opacity: 0.5;
+}
+
+.separator.stopped {
+  animation: none;
+  opacity: 0.5;
+}
+
+.tagline.done {
+  color: #e0d8c8;
+  text-shadow: 0 0 20px rgba(224, 216, 200, 0.3);
+  animation: none;
+  opacity: 1;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .digit {
+    font-size: 2.8rem;
+  }
+
+  .separator {
+    font-size: 2.2rem;
+    padding-bottom: 1rem;
+  }
+
+  .label {
+    font-size: 0.65rem;
+  }
+
+  .tagline {
+    font-size: 0.9rem;
+    letter-spacing: 0.3em;
+  }
+
+  .clock-ring {
+    padding: 2.5rem;
+  }
+
+  .glow {
+    width: 280px;
+    height: 280px;
+  }
+}
+
+@media (max-width: 420px) {
+  .digit {
+    font-size: 1.8rem;
+    min-width: 2ch;
+  }
+
+  .separator {
+    font-size: 1.4rem;
+    padding-bottom: 0.8rem;
+  }
+
+  .countdown {
+    gap: 0.2rem;
+  }
+
+  .label {
+    font-size: 0.55rem;
+  }
+
+  .tagline {
+    font-size: 0.75rem;
+    letter-spacing: 0.2em;
+    padding: 0 1rem;
+    text-align: center;
+  }
+
+  .clock-ring {
+    padding: 2rem;
+  }
+
+  .glow {
+    width: 220px;
+    height: 220px;
+  }
+}