groove-dev 0.27.14 → 0.27.17

package/packages/gui/src/components/toys/toy-creator.jsx

@@ -0,0 +1,144 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState } from 'react';
+import { Sheet, SheetContent } from '../ui/sheet';
+import { Button } from '../ui/button';
+import { ScrollArea } from '../ui/scroll-area';
+import { api } from '../../lib/api';
+import { useToast } from '../../lib/hooks/use-toast';
+import { Globe, Loader2, Sparkles, Link2 } from 'lucide-react';
+
+const STEPS = {
+  input: 'input',
+  researching: 'researching',
+};
+
+export function ToyCreator({ open, onClose, onCreated }) {
+  const [url, setUrl] = useState('');
+  const [name, setName] = useState('');
+  const [step, setStep] = useState(STEPS.input);
+  const toast = useToast();
+
+  function reset() {
+    setUrl('');
+    setName('');
+    setStep(STEPS.input);
+  }
+
+  function handleClose() {
+    if (step === STEPS.researching) return;
+    reset();
+    onClose();
+  }
+
+  async function handleCreate() {
+    const trimmed = url.trim();
+    if (!trimmed) {
+      toast.warning('URL required', 'Paste an API documentation or reference URL.');
+      return;
+    }
+
+    setStep(STEPS.researching);
+    try {
+      const toy = await api.post('/toys', {
+        docsUrl: trimmed,
+        name: name.trim() || undefined,
+      });
+      toast.success('Toy created', `${toy.name || 'New toy'} is ready to launch.`);
+      onCreated?.(toy);
+      reset();
+      onClose();
+    } catch (err) {
+      toast.error('Research failed', err.message);
+      setStep(STEPS.input);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={(v) => !v && handleClose()}>
+      <SheetContent title="New Toy" width={440}>
+        <ScrollArea className="h-[calc(100%-65px)]">
+          <div className="px-5 py-4 space-y-5">
+            {step === STEPS.input && (
+              <>
+                <div className="flex items-start gap-3 p-3 rounded-lg bg-accent/5 border border-accent/10">
+                  <Sparkles size={16} className="text-accent mt-0.5 flex-shrink-0" />
+                  <p className="text-xs text-text-2 font-sans leading-relaxed">
+                    Paste a docs URL and Groove's AI will research the API — endpoints, auth, data structures, rate limits — and build a reusable toy card you can launch anytime.
+                  </p>
+                </div>
+
+                <div>
+                  <h4 className="text-xs font-semibold text-text-3 font-sans uppercase tracking-wider mb-1.5">
+                    API Docs URL
+                  </h4>
+                  <div className="relative">
+                    <Link2 size={13} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-text-4" />
+                    <input
+                      type="url"
+                      value={url}
+                      onChange={(e) => setUrl(e.target.value)}
+                      placeholder="https://api.example.com/docs"
+                      className="w-full bg-surface-3 border border-border-subtle rounded pl-8 pr-3 py-2 text-xs text-text-0 font-mono placeholder:text-text-4 focus:outline-none focus:border-accent/50"
+                      onKeyDown={(e) => e.key === 'Enter' && handleCreate()}
+                      autoFocus
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <h4 className="text-xs font-semibold text-text-3 font-sans uppercase tracking-wider mb-1.5">
+                    Name <span className="text-text-4 normal-case tracking-normal">(optional)</span>
+                  </h4>
+                  <input
+                    type="text"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="Auto-detected from docs"
+                    className="w-full bg-surface-3 border border-border-subtle rounded px-3 py-2 text-xs text-text-0 font-sans placeholder:text-text-4 focus:outline-none focus:border-accent/50"
+                    onKeyDown={(e) => e.key === 'Enter' && handleCreate()}
+                  />
+                </div>
+              </>
+            )}
+
+            {step === STEPS.researching && (
+              <div className="flex flex-col items-center justify-center py-12 gap-4">
+                <div className="w-14 h-14 rounded-xl bg-accent/10 border border-accent/20 flex items-center justify-center">
+                  <Globe size={24} className="text-accent animate-pulse" />
+                </div>
+                <div className="text-center space-y-1.5">
+                  <p className="text-sm font-semibold text-text-0 font-sans">Researching API...</p>
+                  <p className="text-xs text-text-3 font-sans max-w-[260px]">
+                    Reading documentation, mapping endpoints, and building your toy card. This takes 15–30 seconds.
+                  </p>
+                </div>
+                <Loader2 size={16} className="text-accent animate-spin" />
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+
+        <div className="px-5 py-3 border-t border-border-subtle bg-surface-1">
+          {step === STEPS.input && (
+            <Button
+              variant="primary"
+              size="lg"
+              className="w-full gap-2"
+              onClick={handleCreate}
+              disabled={!url.trim()}
+            >
+              <Sparkles size={14} />
+              Research & Create
+            </Button>
+          )}
+          {step === STEPS.researching && (
+            <Button variant="ghost" size="lg" className="w-full" disabled>
+              <Loader2 size={14} className="animate-spin mr-2" />
+              AI is analyzing...
+            </Button>
+          )}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/packages/gui/src/components/toys/toy-launcher.jsx

@@ -0,0 +1,187 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState } from 'react';
+import { Sheet, SheetContent } from '../ui/sheet';
+import { Button } from '../ui/button';
+import { Badge } from '../ui/badge';
+import { ScrollArea } from '../ui/scroll-area';
+import { api } from '../../lib/api';
+import { useToast } from '../../lib/hooks/use-toast';
+import { useGrooveStore } from '../../stores/groove';
+import { ExternalLink, Eye, EyeOff, Rocket, Loader2 } from 'lucide-react';
+import * as Icons from 'lucide-react';
+
+function resolveIcon(name) {
+  if (!name) return Icons.Box;
+  const pascal = name.replace(/(^|-)(\w)/g, (_, __, c) => c.toUpperCase());
+  return Icons[pascal] || Icons[name] || Icons.Box;
+}
+
+export function ToyLauncher({ toy, open, onClose }) {
+  const [apiKey, setApiKey] = useState('');
+  const [showKey, setShowKey] = useState(false);
+  const [selectedPrompt, setSelectedPrompt] = useState(null);
+  const [launching, setLaunching] = useState(false);
+  const toast = useToast();
+  const setActiveView = useGrooveStore((s) => s.setActiveView);
+
+  if (!toy) return null;
+  const Icon = resolveIcon(toy.icon);
+  const needsKey = toy.authType !== 'none';
+
+  async function handleLaunch() {
+    if (needsKey && !apiKey.trim()) {
+      toast.warning('API key required', `${toy.name} needs an API key to work.`);
+      return;
+    }
+    setLaunching(true);
+    try {
+      await api.post(`/toys/${toy.id}/launch`, {
+        apiKey: needsKey ? apiKey.trim() : undefined,
+        starterPrompt: selectedPrompt || undefined,
+      });
+      toast.success(`${toy.name} launched`, 'Team is spinning up — switching to agents view.');
+      setActiveView('agents');
+      onClose();
+    } catch (err) {
+      toast.error('Launch failed', err.message);
+    }
+    setLaunching(false);
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={(v) => !v && onClose()}>
+      <SheetContent title={toy.name} width={440}>
+        <ScrollArea className="h-[calc(100%-65px)]">
+          <div className="px-5 py-4 space-y-5">
+            {/* Header */}
+            <div className="flex items-start gap-3">
+              <div className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0 bg-accent/10 border border-accent/20 text-accent">
+                <Icon size={24} />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <Badge variant={toy.authType === 'none' ? 'success' : 'warning'}>
+                    {toy.authType === 'none' ? 'Free' : 'Key Required'}
+                  </Badge>
+                  <Badge variant="default">{toy.category}</Badge>
+                </div>
+                <p className="text-xs text-text-2 font-sans leading-relaxed mt-2">{toy.description}</p>
+              </div>
+            </div>
+
+            {/* Base URL */}
+            {toy.baseUrl && (
+              <div>
+                <h4 className="text-xs font-semibold text-text-3 font-sans uppercase tracking-wider mb-1.5">Base URL</h4>
+                <code className="text-xs text-accent font-mono bg-surface-3 px-2.5 py-1.5 rounded block truncate">
+                  {toy.baseUrl}
+                </code>
+              </div>
+            )}
+
+            {/* Sample Endpoints */}
+            {toy.sampleEndpoints?.length > 0 && (
+              <div>
+                <h4 className="text-xs font-semibold text-text-3 font-sans uppercase tracking-wider mb-1.5">Endpoints</h4>
+                <div className="space-y-1">
+                  {toy.sampleEndpoints.map((ep, i) => {
+                    const str = typeof ep === 'string' ? ep : `${ep.method || 'GET'} ${ep.path || ''}`;
+                    const spaceIdx = str.indexOf(' ');
+                    const method = spaceIdx > 0 ? str.slice(0, spaceIdx) : 'GET';
+                    const path = spaceIdx > 0 ? str.slice(spaceIdx + 1) : str;
+                    return (
+                      <div key={i} className="flex items-center gap-2 text-xs font-mono text-text-2 bg-surface-3 px-2.5 py-1.5 rounded">
+                        <Badge variant="accent" className="text-[9px] px-1 py-0">{method}</Badge>
+                        <span className="truncate">{path}</span>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+
+            {/* Starter Ideas */}
+            {toy.starterPrompts?.length > 0 && (
+              <div>
+                <h4 className="text-xs font-semibold text-text-3 font-sans uppercase tracking-wider mb-1.5">Starter Ideas</h4>
+                <div className="flex flex-wrap gap-1.5">
+                  {toy.starterPrompts.map((prompt, i) => (
+                    <button
+                      key={i}
+                      onClick={() => setSelectedPrompt(selectedPrompt === prompt ? null : prompt)}
+                      className={`px-3 py-1.5 text-xs font-sans rounded-full cursor-pointer select-none transition-colors border ${
+                        selectedPrompt === prompt
+                          ? 'bg-accent/15 text-accent border-accent/25'
+                          : 'text-text-2 bg-surface-3 border-border-subtle hover:text-text-0 hover:border-border'
+                      }`}
+                    >
+                      {prompt}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* API Key Input */}
+            {needsKey && (
+              <div>
+                <h4 className="text-xs font-semibold text-text-3 font-sans uppercase tracking-wider mb-1.5">API Key</h4>
+                <div className="relative">
+                  <input
+                    type={showKey ? 'text' : 'password'}
+                    value={apiKey}
+                    onChange={(e) => setApiKey(e.target.value)}
+                    placeholder={`Enter your ${toy.name} API key`}
+                    className="w-full bg-surface-3 border border-border-subtle rounded px-3 py-2 text-xs text-text-0 font-mono placeholder:text-text-4 focus:outline-none focus:border-accent/50 pr-9"
+                  />
+                  <button
+                    onClick={() => setShowKey(!showKey)}
+                    className="absolute right-2 top-1/2 -translate-y-1/2 text-text-4 hover:text-text-1 cursor-pointer bg-transparent border-0 p-0.5"
+                  >
+                    {showKey ? <EyeOff size={14} /> : <Eye size={14} />}
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {/* Docs link */}
+            {toy.docsUrl && (
+              <a
+                href={toy.docsUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1.5 text-xs text-accent font-sans hover:underline"
+              >
+                <ExternalLink size={12} />
+                View Documentation
+              </a>
+            )}
+          </div>
+        </ScrollArea>
+
+        {/* Footer — sticky launch button */}
+        <div className="px-5 py-3 border-t border-border-subtle bg-surface-1">
+          <Button
+            variant="primary"
+            size="lg"
+            className="w-full gap-2"
+            onClick={handleLaunch}
+            disabled={launching || (needsKey && !apiKey.trim())}
+          >
+            {launching ? (
+              <>
+                <Loader2 size={14} className="animate-spin" />
+                Launching...
+              </>
+            ) : (
+              <>
+                <Rocket size={14} />
+                Launch Team
+              </>
+            )}
+          </Button>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/packages/gui/src/components/ui/toast.jsx

@@ -52,8 +52,8 @@ function ToastItem({ toast }) {
       exit={{ opacity: 0, x: 80, scale: 0.95 }}
       transition={{ duration: 0.2 }}
       className={cn(
-        'w-80 rounded-md border border-border bg-surface-1 shadow-xl',
-        'border-l-4 flex items-center gap-3 px-4 py-3',
+        'w-80 border border-border bg-surface-1 shadow-xl',
+        'border-l-2 flex items-center gap-3 px-4 py-3',
         BORDER_COLORS[toast.type],
       )}
     >

package/packages/gui/src/lib/electron.js

@@ -16,6 +16,21 @@ export function openExternal(url) {
   }
 }
 
+export async function selectFolder(options = {}) {
+  if (window.groove?.folders?.select) {
+    return window.groove.folders.select(options);
+  }
+  return null;
+}
+
+export async function setProjectDir(dir) {
+  if (window.groove?.folders?.setProjectDir) {
+    return window.groove.folders.setProjectDir(dir);
+  }
+  const { api } = await import('./api.js');
+  return api.post('/project-dir', { dir });
+}
+
 export const electronAuth = {
   login: () => window.groove?.auth?.login(),
   logout: () => window.groove?.auth?.logout(),

package/packages/gui/src/lib/format.js

@@ -3,6 +3,7 @@
 
 export function fmtNum(n) {
   if (n == null || isNaN(n)) return '0';
+  if (n >= 1_000_000_000) return (n / 1_000_000_000).toFixed(1).replace(/\.0$/, '') + 'B';
   if (n >= 1_000_000) return (n / 1_000_000).toFixed(1).replace(/\.0$/, '') + 'M';
   if (n >= 1_000) return (n / 1_000).toFixed(1).replace(/\.0$/, '') + 'k';
   return Math.round(n).toLocaleString();