groove-dev 0.27.143 → 0.27.145

package/node_modules/@groove-dev/gui/src/views/marketplace.jsx

@@ -19,10 +19,12 @@ import { IntegrationWizard, GoogleWorkspaceWizard } from '../components/marketpl
 import { RepoImport } from '../components/marketplace/repo-import';
 import { RepoCard } from '../components/marketplace/repo-card';
 import { RepoNukeDialog } from '../components/marketplace/repo-nuke-dialog';
+import { Dialog, DialogContent } from '../components/ui/dialog';
+import { Input } from '../components/ui/input';
 import {
-  ChevronLeft, Plug, LogIn,
+  ChevronLeft, Plug, LogIn, Plus,
   Upload, Package, Download, ShoppingBag, RefreshCw, Trash2,
-  GitBranch,
+  GitBranch, Users, Loader2,
 } from 'lucide-react';
 
 // ── Skill Detail ─────────────────────────────────────────
@@ -211,7 +213,178 @@ function SkillDetail({ skill, onBack }) {
   );
 }
 
-// ── Skills Browse ────────────────────────────────────────
+// ── New Integration Wizard ───────────────────────────────
+function NewIntegrationWizard({ open, onClose }) {
+  const [teamMode, setTeamMode] = useState('new');
+  const [teamName, setTeamName] = useState('');
+  const [selectedTeamId, setSelectedTeamId] = useState('');
+  const [name, setName] = useState('');
+  const [docsUrl, setDocsUrl] = useState('');
+  const [apiKey, setApiKey] = useState('');
+  const [spawning, setSpawning] = useState(false);
+
+  const teams = useGrooveStore((s) => s.teams);
+  const activeTeamId = useGrooveStore((s) => s.activeTeamId);
+  const createTeam = useGrooveStore((s) => s.createTeam);
+  const spawnAgent = useGrooveStore((s) => s.spawnAgent);
+  const setActiveView = useGrooveStore((s) => s.setActiveView);
+  const selectAgent = useGrooveStore((s) => s.selectAgent);
+  const toast = useToast();
+
+  useEffect(() => {
+    if (open) {
+      setTeamMode('new');
+      setTeamName('');
+      setSelectedTeamId(activeTeamId || '');
+      setName('');
+      setDocsUrl('');
+      setApiKey('');
+      setSpawning(false);
+    }
+  }, [open, activeTeamId]);
+
+  async function handleGo() {
+    if (!name.trim()) return;
+    setSpawning(true);
+    try {
+      let teamId;
+      if (teamMode === 'new') {
+        const team = await createTeam(teamName.trim() || name.trim());
+        teamId = team.id;
+      } else {
+        teamId = selectedTeamId;
+      }
+
+      const lines = [
+        `The user wants to integrate the **${name.trim()}** API into their project.`,
+        '',
+      ];
+      if (docsUrl.trim()) lines.push(`**API Documentation:** ${docsUrl.trim()}`);
+      if (apiKey.trim()) lines.push(`**API Key:** The user has provided an API key. Store it securely using environment variables — never hardcode it.`);
+      lines.push(
+        '',
+        'Start by:',
+        '1. Reviewing the API documentation to understand available endpoints and authentication',
+        '2. Asking the user what they want to build with this API',
+        '3. Setting up the necessary configuration and authentication',
+        '4. Building the integration together',
+        '',
+        'Ask the user about their project and how they\'d like to use this API.',
+      );
+
+      const prompt = lines.join('\n');
+      const agent = await spawnAgent({ role: 'fullstack', prompt, teamId });
+
+      if (apiKey.trim()) {
+        await api.post(`/agents/${agent.id}/instruct`, {
+          message: `Here is the API key for ${name.trim()}: \`${apiKey.trim()}\`\n\nStore this in a .env file as an environment variable. Do not commit it to git.`,
+        }).catch(() => {});
+      }
+
+      setActiveView('agents');
+      selectAgent(agent.id);
+      onClose();
+    } catch (err) {
+      toast('error', 'Failed to start integration', err.message);
+      setSpawning(false);
+    }
+  }
+
+  const canGo = name.trim() && (teamMode === 'new' || selectedTeamId);
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent title="New Integration" description="Set up a custom API integration">
+        <div className="px-5 py-4 flex flex-col gap-4">
+          <Input
+            label="Integration name"
+            placeholder="e.g. NASA APOD, Stripe, Twilio…"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            autoFocus
+          />
+
+          <Input
+            label="Documentation URL"
+            placeholder="https://api.example.com/docs"
+            value={docsUrl}
+            onChange={(e) => setDocsUrl(e.target.value)}
+          />
+
+          <Input
+            label="API key (optional)"
+            placeholder="sk-..."
+            value={apiKey}
+            onChange={(e) => setApiKey(e.target.value)}
+            mono
+            type="password"
+          />
+
+          {/* Team selection */}
+          <div className="flex flex-col gap-2">
+            <span className="text-xs font-medium text-text-2 font-sans">Team</span>
+            <div className="flex gap-2">
+              <button
+                onClick={() => setTeamMode('new')}
+                className={`flex-1 flex items-center justify-center gap-1.5 px-3 py-2 rounded-md text-xs font-medium font-sans border transition-colors cursor-pointer ${
+                  teamMode === 'new'
+                    ? 'border-accent bg-accent/10 text-accent'
+                    : 'border-border bg-surface-0 text-text-2 hover:border-accent/50'
+                }`}
+              >
+                <Plus size={12} />
+                New team
+              </button>
+              <button
+                onClick={() => setTeamMode('existing')}
+                className={`flex-1 flex items-center justify-center gap-1.5 px-3 py-2 rounded-md text-xs font-medium font-sans border transition-colors cursor-pointer ${
+                  teamMode === 'existing'
+                    ? 'border-accent bg-accent/10 text-accent'
+                    : 'border-border bg-surface-0 text-text-2 hover:border-accent/50'
+                }`}
+              >
+                <Users size={12} />
+                Existing team
+              </button>
+            </div>
+
+            {teamMode === 'new' ? (
+              <Input
+                placeholder={name ? name.trim() : 'Team name (defaults to integration name)'}
+                value={teamName}
+                onChange={(e) => setTeamName(e.target.value)}
+              />
+            ) : (
+              <select
+                value={selectedTeamId}
+                onChange={(e) => setSelectedTeamId(e.target.value)}
+                className="h-8 w-full rounded-md px-3 text-sm font-sans bg-surface-1 border border-border text-text-0 focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent cursor-pointer"
+              >
+                <option value="">Select a team…</option>
+                {teams.map((t) => (
+                  <option key={t.id} value={t.id}>{t.name}</option>
+                ))}
+              </select>
+            )}
+          </div>
+
+          <Button
+            onClick={handleGo}
+            disabled={!canGo || spawning}
+            className="w-full mt-1"
+          >
+            {spawning ? (
+              <><Loader2 size={14} className="animate-spin" /> Setting up…</>
+            ) : (
+              'Go'
+            )}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 // ── Integrations Browse ──────────────────────────────────
 const GOOGLE_IDS = new Set(['gmail', 'google-calendar', 'google-drive', 'google-docs', 'google-sheets', 'google-slides']);
 
@@ -222,6 +395,7 @@ function IntegrationsBrowse() {
   const [selectedIntegration, setSelectedIntegration] = useState(null);
   const [showWizard, setShowWizard] = useState(false);
   const [showGoogleWizard, setShowGoogleWizard] = useState(false);
+  const [showNewWizard, setShowNewWizard] = useState(false);
 
   const fetchItems = () => {
     setLoading(true);
@@ -261,6 +435,15 @@ function IntegrationsBrowse() {
             <SearchBar value={search} onChange={setSearch} placeholder="Search integrations..." />
           </div>
           <div className="flex-1" />
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setShowNewWizard(true)}
+            className="gap-1 text-xs"
+          >
+            <Plus size={13} />
+            New
+          </Button>
           <span className="text-2xs text-text-4 font-mono flex-shrink-0">
             {otherItems.length + (googleItems.length > 0 ? 1 : 0)}
           </span>
@@ -312,6 +495,11 @@ function IntegrationsBrowse() {
         open={showGoogleWizard}
         onClose={() => { setShowGoogleWizard(false); fetchItems(); }}
       />
+
+      <NewIntegrationWizard
+        open={showNewWizard}
+        onClose={() => setShowNewWizard(false)}
+      />
     </ScrollArea>
   );
 }

package/node_modules/@groove-dev/gui/src/views/model-lab.jsx

@@ -4,7 +4,7 @@ import { useGrooveStore } from '../stores/groove';
 import { ScrollArea } from '../components/ui/scroll-area';
 import { Tooltip } from '../components/ui/tooltip';
 import { Combobox } from '../components/ui/combobox';
-import { RuntimeConfig, LaunchModel } from '../components/lab/runtime-config';
+import { RuntimeSection } from '../components/lab/runtime-config';
 import { ParameterPanel } from '../components/lab/parameter-panel';
 import { SystemPromptEditor } from '../components/lab/system-prompt-editor';
 import { ChatPlayground } from '../components/lab/chat-playground';
@@ -12,7 +12,7 @@ import { LabAssistant } from '../components/lab/lab-assistant';
 import { MetricsPanel } from '../components/lab/metrics-panel';
 import { PresetManager } from '../components/lab/preset-manager';
 import { cn } from '../lib/cn';
-import { FlaskConical, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Box } from 'lucide-react';
+import { FlaskConical, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Box, ChevronRight } from 'lucide-react';
 
 const LEFT_DEFAULT = 280;
 const LEFT_MIN = 220;
@@ -21,17 +21,63 @@ const RIGHT_DEFAULT = 240;
 const RIGHT_MIN = 200;
 const RIGHT_MAX = 360;
 
+export function SidebarSection({ label, action, children, className, collapsible = false, defaultOpen = true }) {
+  const [open, setOpen] = useState(defaultOpen);
+  const isOpen = collapsible ? open : true;
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      {label && (
+        <div className="flex items-center justify-between h-6">
+          {collapsible ? (
+            <button
+              onClick={() => setOpen(!open)}
+              className="flex items-center gap-1.5 cursor-pointer group"
+            >
+              <ChevronRight
+                size={10}
+                className={cn(
+                  'text-text-4 transition-transform duration-150 flex-shrink-0',
+                  isOpen && 'rotate-90',
+                )}
+              />
+              <span className="text-[10px] font-semibold font-sans text-text-3 uppercase tracking-widest group-hover:text-text-2 transition-colors">{label}</span>
+            </button>
+          ) : (
+            <span className="text-[10px] font-semibold font-sans text-text-3 uppercase tracking-widest">{label}</span>
+          )}
+          {isOpen && action}
+        </div>
+      )}
+      {isOpen && children}
+    </div>
+  );
+}
+
 function ModelSelector() {
   const models = useGrooveStore((s) => s.labModels);
+  const runtimes = useGrooveStore((s) => s.labRuntimes);
   const activeRuntime = useGrooveStore((s) => s.labActiveRuntime);
   const activeModel = useGrooveStore((s) => s.labActiveModel);
   const setActiveModel = useGrooveStore((s) => s.setLabActiveModel);
 
   if (!activeRuntime) return null;
 
+  const rt = runtimes.find((r) => r.id === activeRuntime);
+  const online = rt?.status === 'connected';
+
+  if (!online) {
+    return (
+      <SidebarSection label="Model">
+        <p className="text-2xs text-text-4 font-sans">Start the runtime to select a model</p>
+      </SidebarSection>
+    );
+  }
+
+  if (models.length <= 1 && activeModel) return null;
+
   return (
-    <div className="space-y-1.5">
-      <span className="text-2xs font-semibold font-sans text-text-3 uppercase tracking-wider">Model</span>
+    <SidebarSection label="Model">
       <Combobox
         value={activeModel || ''}
         onChange={setActiveModel}
@@ -45,10 +91,7 @@ function ModelSelector() {
           </div>
         )}
       />
-      {!activeModel && models.length === 0 && (
-        <p className="text-2xs text-text-4 font-sans px-1">No models discovered — type a model name or test the runtime</p>
-      )}
-    </div>
+    </SidebarSection>
   );
 }
 
@@ -163,7 +206,7 @@ export default function ModelLabView() {
           style={leftCollapsed ? undefined : { width: leftWidth }}
         >
           <div className="h-full flex flex-col">
-            <div className="flex-shrink-0 flex items-center justify-between px-4 h-10">
+            <div className="flex-shrink-0 flex items-center justify-between px-4 h-10 border-b border-border-subtle">
               <div className="flex items-center gap-2">
                 <FlaskConical size={13} className="text-accent" />
                 <span className="text-xs font-semibold font-sans text-text-1">Model Lab</span>
@@ -171,9 +214,8 @@ export default function ModelLabView() {
               <PanelToggle collapsed={false} onClick={() => setLeftCollapsed(true)} side="left" />
             </div>
             <ScrollArea className="flex-1 min-h-0">
-              <div className="px-4 pb-4 space-y-5 divide-y divide-border-subtle [&>*]:pt-5 [&>*:first-child]:pt-0">
-                <LaunchModel />
-                <RuntimeConfig />
+              <div className="px-4 py-4 space-y-6">
+                <RuntimeSection />
                 <ModelSelector />
                 <ParameterPanel />
                 <PresetManager />