groove-dev 0.27.141 → 0.27.142

package/node_modules/@groove-dev/gui/src/components/toys/toy-card.jsx

@@ -1,78 +0,0 @@
-// FSL-1.1-Apache-2.0 — see LICENSE
-import { Card } from '../ui/card';
-import { Badge } from '../ui/badge';
-import * as Icons from 'lucide-react';
-
-const DIFFICULTY_VARIANT = {
-  beginner: 'success',
-  intermediate: 'warning',
-  advanced: 'danger',
-};
-
-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 ToyCard({ toy, onClick }) {
-  const Icon = resolveIcon(toy.icon);
-
-  return (
-    <Card
-      hover
-      className="group flex flex-col p-4 gap-3 transition-all duration-150 hover:scale-[1.02] hover:shadow-lg hover:shadow-black/20"
-      onClick={() => onClick(toy)}
-    >
-      {/* Icon + name + category */}
-      <div className="flex items-start gap-3">
-        <div className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 bg-accent/10 border border-accent/20 text-accent">
-          <Icon size={20} />
-        </div>
-        <div className="flex-1 min-w-0 pt-0.5">
-          <h3 className="text-sm font-semibold text-text-0 font-sans truncate pr-1">{toy.name}</h3>
-        </div>
-        <Badge variant="default" className="flex-shrink-0 mt-0.5">
-          {toy.category}
-        </Badge>
-      </div>
-
-      {/* Description — 2 lines max */}
-      <p className="text-xs text-text-2 font-sans leading-relaxed line-clamp-2">{toy.description}</p>
-
-      {/* Bottom badges */}
-      <div className="flex items-center gap-1.5 mt-auto flex-wrap">
-        {toy.custom && (
-          <Badge variant="accent">Custom</Badge>
-        )}
-        <Badge variant={DIFFICULTY_VARIANT[toy.difficulty] || 'default'}>
-          {toy.difficulty || 'beginner'}
-        </Badge>
-        <Badge variant={toy.authType === 'none' ? 'success' : 'warning'}>
-          {toy.authType === 'none' ? 'No Key Required' : 'API Key Required'}
-        </Badge>
-      </div>
-    </Card>
-  );
-}
-
-export function ToyCardSkeleton() {
-  return (
-    <Card className="p-4 space-y-3">
-      <div className="flex items-start gap-3">
-        <div className="w-10 h-10 rounded-lg bg-surface-4 animate-pulse" />
-        <div className="flex-1 space-y-2 pt-1">
-          <div className="h-3.5 w-24 bg-surface-4 rounded animate-pulse" />
-        </div>
-      </div>
-      <div className="space-y-1.5">
-        <div className="h-3 w-full bg-surface-4 rounded animate-pulse" />
-        <div className="h-3 w-3/4 bg-surface-4 rounded animate-pulse" />
-      </div>
-      <div className="flex gap-1.5">
-        <div className="h-5 w-16 bg-surface-4 rounded animate-pulse" />
-        <div className="h-5 w-24 bg-surface-4 rounded animate-pulse" />
-      </div>
-    </Card>
-  );
-}

package/node_modules/@groove-dev/gui/src/components/toys/toy-creator.jsx

@@ -1,144 +0,0 @@
-// 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/node_modules/@groove-dev/gui/src/components/toys/toy-launcher.jsx

@@ -1,187 +0,0 @@
-// 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/node_modules/@groove-dev/gui/src/views/toys.jsx

@@ -1,162 +0,0 @@
-// FSL-1.1-Apache-2.0 — see LICENSE
-import { useState, useEffect, useCallback } from 'react';
-import { ScrollArea } from '../components/ui/scroll-area';
-import { Badge } from '../components/ui/badge';
-import { useGrooveStore } from '../stores/groove';
-import { api } from '../lib/api';
-import { ToyCard, ToyCardSkeleton } from '../components/toys/toy-card';
-import { ToyLauncher } from '../components/toys/toy-launcher';
-import { ToyCreator } from '../components/toys/toy-creator';
-import { Gamepad2, Search, Rocket, Plus } from 'lucide-react';
-
-const CATEGORIES = ['All', 'Space', 'Weather', 'Finance', 'Fun', 'Maps', 'Data'];
-
-export default function ToysView() {
-  const [toys, setToys] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [search, setSearch] = useState('');
-  const [category, setCategory] = useState('All');
-  const [selectedToy, setSelectedToy] = useState(null);
-  const [creatorOpen, setCreatorOpen] = useState(false);
-  const teams = useGrooveStore((s) => s.teams);
-
-  const fetchToys = useCallback(() => {
-    setLoading(true);
-    api.get('/toys')
-      .then((d) => setToys(d.toys || d.items || (Array.isArray(d) ? d : [])))
-      .catch(() => setToys([]))
-      .finally(() => setLoading(false));
-  }, []);
-
-  useEffect(() => { fetchToys(); }, [fetchToys]);
-
-  const searchLower = search.toLowerCase();
-  const filtered = toys.filter((t) => {
-    if (category !== 'All' && t.category?.toLowerCase() !== category.toLowerCase()) return false;
-    if (searchLower && !t.name?.toLowerCase().includes(searchLower) && !t.description?.toLowerCase().includes(searchLower)) return false;
-    return true;
-  });
-
-  const recentToyTeams = (teams || []).filter((t) => (t.name || '').startsWith('Toy:'));
-
-  return (
-    <div className="flex flex-col h-full">
-      {/* Header */}
-      <div className="flex-shrink-0 px-5 pt-5 pb-4">
-        <div className="flex items-center gap-2.5 mb-1">
-          <Gamepad2 size={18} className="text-accent" />
-          <h1 className="text-lg font-bold text-text-0 font-sans">Toys</h1>
-          <div className="flex-1" />
-          <button
-            onClick={() => setCreatorOpen(true)}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold font-sans rounded-full cursor-pointer select-none transition-colors bg-accent/15 text-accent border border-accent/25 hover:bg-accent/25"
-          >
-            <Plus size={13} />
-            New
-          </button>
-        </div>
-        <p className="text-xs text-text-3 font-sans">Plug in an API and start building</p>
-      </div>
-
-      {/* Search + category bar */}
-      <div className="flex-shrink-0 px-5 pb-4 space-y-3">
-        {/* Search */}
-        <div className="relative w-full max-w-sm">
-          <Search size={13} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-text-4" />
-          <input
-            type="text"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            placeholder="Search toys..."
-            className="w-full bg-surface-1 border border-border-subtle rounded pl-8 pr-3 py-1.5 text-xs text-text-0 font-sans placeholder:text-text-4 focus:outline-none focus:border-accent/50"
-          />
-        </div>
-
-        {/* Categories */}
-        <div className="flex items-center gap-1.5 flex-wrap">
-          {CATEGORIES.map((cat) => (
-            <button
-              key={cat}
-              onClick={() => setCategory(cat)}
-              className={`px-3 py-1.5 text-xs font-semibold font-sans rounded-full cursor-pointer select-none transition-colors ${
-                category === cat
-                  ? 'bg-accent/15 text-accent border border-accent/25'
-                  : 'text-text-3 hover:text-text-1 border border-transparent hover:border-border-subtle'
-              }`}
-            >
-              {cat}
-            </button>
-          ))}
-          <div className="flex-1" />
-          <span className="text-2xs text-text-4 font-mono">{filtered.length}</span>
-        </div>
-      </div>
-
-      {/* Content */}
-      <ScrollArea className="flex-1 min-h-0">
-        <div className="px-5 pt-1 pb-5">
-          {/* Grid */}
-          <div className="grid gap-3 grid-cols-[repeat(auto-fill,minmax(260px,1fr))]">
-            {loading
-              ? Array.from({ length: 6 }).map((_, i) => <ToyCardSkeleton key={i} />)
-              : <>
-                  {filtered.map((t) => <ToyCard key={t.id} toy={t} onClick={setSelectedToy} />)}
-                  <button
-                    onClick={() => setCreatorOpen(true)}
-                    className="flex flex-col items-center justify-center gap-2 p-4 rounded-xl border-2 border-dashed border-border-subtle text-text-4 hover:text-accent hover:border-accent/30 hover:bg-accent/5 transition-colors cursor-pointer min-h-[140px]"
-                  >
-                    <Plus size={20} />
-                    <span className="text-xs font-semibold font-sans">Add API</span>
-                  </button>
-                </>
-            }
-          </div>
-
-          {!loading && filtered.length === 0 && (
-            <div className="text-center py-16 text-text-4 font-sans text-sm">
-              No toys found. Try a different search or category.
-            </div>
-          )}
-
-          {/* Recent Toys */}
-          {recentToyTeams.length > 0 && (
-            <div className="mt-8">
-              <h3 className="text-xs font-semibold text-text-2 font-sans uppercase tracking-wider mb-3 flex items-center gap-1.5">
-                <Rocket size={12} />
-                Recent Toys ({recentToyTeams.length})
-              </h3>
-              <div className="space-y-1.5">
-                {recentToyTeams.map((team) => (
-                  <div key={team.id} className="flex items-center gap-3 px-3 py-2.5 rounded-md bg-surface-1 border border-border-subtle">
-                    <div className="w-8 h-8 rounded-md bg-accent/10 flex items-center justify-center flex-shrink-0">
-                      <Gamepad2 size={14} className="text-accent" />
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <div className="text-xs font-semibold text-text-0 font-sans truncate">{team.name}</div>
-                      <div className="text-2xs text-text-4 font-sans">{team.agents?.length || 0} agents</div>
-                    </div>
-                    <Badge variant="accent">Active</Badge>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-      </ScrollArea>
-
-      {/* Launcher sheet */}
-      <ToyLauncher
-        toy={selectedToy}
-        open={!!selectedToy}
-        onClose={() => setSelectedToy(null)}
-      />
-
-      {/* Creator sheet */}
-      <ToyCreator
-        open={creatorOpen}
-        onClose={() => setCreatorOpen(false)}
-        onCreated={() => fetchToys()}
-      />
-    </div>
-  );
-}