npm - groove-dev - Versions diffs - 0.27.15 → 0.27.18 - Mend

groove-dev 0.27.15 → 0.27.18

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 (172) hide show

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

@@ -2,15 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob: https:; connect-src 'self' ws://localhost:* ws://127.0.0.1:* http://localhost:* http://127.0.0.1:*; font-src 'self' data:; object-src 'none'; base-uri 'self'; frame-ancestors 'none';">
     <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-zdzOLAZM.js"></script>
+    <script type="module" crossorigin src="/assets/index-D3rvwTHD.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-BE6lYcd7.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-Bg6_D2xK.css">
   </head>
   <body>
     <div id="root"></div>

package/packages/gui/index.html CHANGED Viewed

@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob: https:; connect-src 'self' ws://localhost:* ws://127.0.0.1:* http://localhost:* http://127.0.0.1:*; font-src 'self' data:; object-src 'none'; base-uri 'self'; frame-ancestors 'none';">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <title>Groove GUI</title>

package/packages/gui/src/app.css CHANGED Viewed

@@ -201,6 +201,13 @@ html {
   filter: drop-shadow(0 0 4px rgba(97, 175, 239, 0.4));
 }
+/* ── Onboarding Wizard ───────────────────────────────────── */
+@keyframes wizard-checkmark {
+  0% { stroke-dashoffset: 24; }
+  100% { stroke-dashoffset: 0; }
+}
 /* ── Electron Desktop App ────────────────────────────────── */
 .electron-drag {

package/packages/gui/src/app.jsx CHANGED Viewed

@@ -1,9 +1,12 @@
 // GROOVE GUI v2 — App Root
 // FSL-1.1-Apache-2.0 — see LICENSE
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useGrooveStore } from './stores/groove';
 import { AppShell } from './components/layout/app-shell';
+import { SetupWizard } from './components/onboarding/setup-wizard';
+import { useKeyboard } from './lib/hooks/use-keyboard';
+import { UpgradeModal } from './components/pro/upgrade-modal';
 // Views
 import AgentsView from './views/agents';
@@ -13,6 +16,8 @@ import MarketplaceView from './views/marketplace';
 import TeamsView from './views/teams';
 import SettingsView from './views/settings';
 import ModelsView from './views/models';
+import FederationView from './views/federation';
+import ToysView from './views/toys';
 // Agent components
 import { AgentPanel } from './components/agents/agent-panel';
@@ -57,8 +62,10 @@ function ViewRouter() {
     case 'editor':      content = <EditorView />;      break;
     case 'dashboard':   content = <DashboardView />;   break;
     case 'marketplace': content = <MarketplaceView />; break;
+    case 'toys':        content = <ToysView />;        break;
     case 'teams':       content = <TeamsView />;       break;
     case 'models':      content = <ModelsView />;      break;
+    case 'federation':  content = <FederationView />;  break;
     case 'settings':    content = <SettingsView />;    break;
     default:            content = <AgentsView />;
   }
@@ -100,25 +107,45 @@ export default function App() {
   const connect = useGrooveStore((s) => s.connect);
   const hydrated = useGrooveStore((s) => s.hydrated);
   const tunneled = useGrooveStore((s) => s.tunneled);
+  const onboardingComplete = useGrooveStore((s) => s.onboardingComplete);
   useEffect(() => { connect(); }, [connect]);
   useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    const instance = params.get('instance');
-    if (instance) {
-      document.title = `${instance} — Groove`;
-    } else if (tunneled) {
-      document.title = 'Remote — Groove';
-    } else {
-      document.title = 'Groove';
+    async function setTitle() {
+      if (window.groove?.getInstanceInfo) {
+        const info = await window.groove.getInstanceInfo();
+        if (info?.name) {
+          document.title = `${info.name} — Groove`;
+          return;
+        }
+      }
+      const params = new URLSearchParams(window.location.search);
+      const instance = params.get('instance');
+      if (instance) {
+        const sanitized = instance.replace(/[\x00-\x1F]/g, '').slice(0, 50);
+        document.title = `${sanitized} — Groove`;
+      } else if (tunneled) {
+        document.title = 'Remote — Groove';
+      } else {
+        document.title = 'Groove';
+      }
     }
+    setTitle();
   }, [tunneled]);
+  const openFolderShortcuts = useMemo(() =>
+    window.groove?.openFolder
+      ? [{ key: 'o', meta: true, handler: () => window.groove.openFolder() }]
+      : [],
+  []);
+  useKeyboard(openFolderShortcuts);
   if (!hydrated) return <LoadingScreen />;
   return (
     <ErrorBoundary>
-      <ViewRouter />
+      {onboardingComplete ? <ViewRouter /> : <SetupWizard />}
+      <UpgradeModal />
     </ErrorBoundary>
   );
 }

package/packages/gui/src/components/agents/agent-chat.jsx CHANGED Viewed

@@ -105,7 +105,6 @@ export function AgentChat({ agent }) {
   const chatHistory = useGrooveStore((s) => s.chatHistory[agent.id]) || EMPTY;
   const activityLog = useGrooveStore((s) => s.activityLog[agent.id]) || EMPTY;
   const instructAgent = useGrooveStore((s) => s.instructAgent);
-  const queryAgent = useGrooveStore((s) => s.queryAgent);
   const isThinking = useGrooveStore((s) => s.thinkingAgents?.has(agent.id));
   const storeInput = useGrooveStore((s) => s.chatInputs[agent.id] || '');
@@ -143,11 +142,7 @@ export function AgentChat({ agent }) {
     setAttachedFiles([]);
     setSending(true);
     try {
-      if (text.startsWith('?')) {
-        await queryAgent(agent.id, text.slice(1).trim());
-      } else {
-        await instructAgent(agent.id, text);
-      }
+      await instructAgent(agent.id, text);
     } catch { /* toast handles */ }
     setSending(false);
     inputRef.current?.focus();
@@ -160,7 +155,6 @@ export function AgentChat({ agent }) {
     }
   }
-  const isQuery = input.startsWith('?');
   const isAlive = agent.status === 'running' || agent.status === 'starting';
   // Build merged timeline
@@ -183,7 +177,7 @@ export function AgentChat({ agent }) {
             </p>
             <p className="text-xs text-text-3 font-sans mt-1 max-w-[240px]">
               {isAlive
-                ? 'Send an instruction to guide this agent, or prefix with ? to query without disrupting its work.'
+                ? 'Send a message to guide this agent. Use the stop button to interrupt.'
                 : 'Reply to continue the conversation — a new session starts with full context.'}
             </p>
           </div>
@@ -200,14 +194,11 @@ export function AgentChat({ agent }) {
       <div className="border-t border-border-subtle px-4 py-3 bg-surface-1">
         {/* Mode indicator */}
         <div className="flex items-center gap-2 mb-2">
-          <span className={cn(
-            'text-2xs font-semibold font-sans px-2 py-0.5 rounded-full',
-            isQuery ? 'bg-info/12 text-info' : 'bg-accent/12 text-accent',
-          )}>
-            {isQuery ? 'Query' : isAlive ? 'Instruct' : 'Continue'}
+          <span className="text-2xs font-semibold font-sans px-2 py-0.5 rounded-full bg-accent/12 text-accent">
+            {isAlive ? 'Instruct' : 'Continue'}
           </span>
           <span className="text-2xs text-text-4 font-sans">
-            {isQuery ? 'Read-only question — agent keeps running' : isAlive ? 'Guides the agent\'s next action' : 'Resumes with full context'}
+            {isAlive ? 'Message goes directly to this agent' : 'Resumes with full context'}
           </span>
         </div>
@@ -233,7 +224,7 @@ export function AgentChat({ agent }) {
             value={input}
             onChange={(e) => setInput(e.target.value)}
             onKeyDown={onKeyDown}
-            placeholder={isAlive ? 'Instruct agent... (? to query)' : 'Continue conversation...'}
+            placeholder={isAlive ? 'Instruct this agent...' : 'Continue conversation...'}
             rows={1}
             className={cn(
               'flex-1 resize-y rounded-xl px-4 py-2.5 text-sm',
@@ -241,10 +232,10 @@ export function AgentChat({ agent }) {
               'placeholder:text-text-4',
               'focus:outline-none focus:ring-1',
               'min-h-[40px]',
-              isQuery ? 'border-info/30 focus:ring-info/40' : 'border-border focus:ring-accent/40',
+              'border-border focus:ring-accent/40',
             )}
           />
-          {isThinking ? (
+          {isAlive && (
             <button
               onClick={() => useGrooveStore.getState().stopAgent(agent.id)}
               title="Stop agent"
@@ -252,21 +243,20 @@ export function AgentChat({ agent }) {
             >
               <Square size={14} fill="currentColor" />
             </button>
-          ) : (
-            <button
-              onClick={handleSend}
-              disabled={!input.trim() || sending}
-              className={cn(
-                'w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer',
-                'disabled:opacity-20 disabled:cursor-not-allowed',
-                input.trim()
-                  ? 'bg-accent text-surface-0 hover:bg-accent/90 shadow-lg shadow-accent/20'
-                  : 'bg-surface-4 text-text-4',
-              )}
-            >
-              {sending ? <Loader2 size={16} className="animate-spin" /> : <Send size={16} />}
-            </button>
           )}
+          <button
+            onClick={handleSend}
+            disabled={!input.trim() || sending}
+            className={cn(
+              'w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer',
+              'disabled:opacity-20 disabled:cursor-not-allowed',
+              input.trim()
+                ? 'bg-accent/15 text-accent hover:bg-accent/25 border border-accent/25'
+                : 'bg-surface-4 text-text-4',
+            )}
+          >
+            {sending ? <Loader2 size={16} className="animate-spin" /> : <Send size={16} />}
+          </button>
         </div>
       </div>
     </div>

package/packages/gui/src/components/agents/agent-config.jsx CHANGED Viewed

@@ -79,7 +79,7 @@ function AgentActions({ agent }) {
   async function handleKill() {
     if (!confirmKill) { setConfirmKill(true); setTimeout(() => setConfirmKill(false), 3000); return; }
     setLoading('kill');
-    try { await killAgent(agent.id); closeDetail(); } catch {}
+    try { await killAgent(agent.id, !isAlive); closeDetail(); } catch {}
     setLoading(null);
     setConfirmKill(false);
   }
@@ -189,13 +189,18 @@ export function AgentConfig({ agent }) {
   useEffect(() => {
     setPersonalityLoaded(false);
-    api.get(`/personalities/${agent.name}`).then((data) => {
-      setPersonalityContent(data?.content || '');
-      setPersonalityLoaded(true);
-    }).catch(() => {
+    if (agent.personality) {
+      api.get(`/personalities/${agent.name}`).then((data) => {
+        setPersonalityContent(data?.content || '');
+        setPersonalityLoaded(true);
+      }).catch(() => {
+        setPersonalityContent('');
+        setPersonalityLoaded(true);
+      });
+    } else {
       setPersonalityContent('');
       setPersonalityLoaded(true);
-    });
+    }
     api.get('/personalities').then((data) => {
       setPersonalities(Array.isArray(data) ? data : data.personalities || []);
     }).catch(() => {});

package/packages/gui/src/components/agents/agent-feed.jsx CHANGED Viewed

@@ -755,8 +755,8 @@ export function AgentFeed({ agent }) {
                 'disabled:opacity-15 disabled:cursor-not-allowed',
                 input.trim()
                   ? mode === 'query'
-                    ? 'bg-info text-white hover:bg-info/85'
-                    : 'bg-accent text-white hover:bg-accent/85'
+                    ? 'bg-info/15 text-info hover:bg-info/25 border border-info/25'
+                    : 'bg-accent/15 text-accent hover:bg-accent/25 border border-accent/25'
                   : 'bg-transparent text-text-4',
               )}
             >

package/packages/gui/src/components/agents/spawn-wizard.jsx CHANGED Viewed

@@ -11,7 +11,7 @@ import {
   Server, Monitor, Code2, TestTube, Cloud, FileText,
   Shield, Database, Megaphone, Calculator, UserCheck,
   Headphones, BarChart3, Rocket, ChevronDown, Pen, Presentation,
-  Sparkles, X, Search, AlertTriangle, Plug, MessageCircle, GitBranch,
+  Sparkles, X, Search, AlertTriangle, Plug, MessageCircle, GitBranch, Globe,
 } from 'lucide-react';
 import { api } from '../../lib/api';
 import { Dialog, DialogContent } from '../ui/dialog';
@@ -70,6 +70,7 @@ const ROLE_PRESETS = [
   { id: 'analyst',   label: 'Analyst',    desc: 'Data analysis, insights',         icon: BarChart3,  tier: 'Medium' },
   { id: 'creative',  label: 'Writer',     desc: 'Copy, articles, proposals',       icon: Pen,        tier: 'Heavy',  skillHint: true },
   { id: 'slides',    label: 'Slides',     desc: 'Pitch decks, presentations',      icon: Presentation, tier: 'Heavy', skillHint: true },
+  { id: 'ambassador', label: 'Ambassador', desc: 'Bridge to federated server',     icon: Globe,        tier: 'Light' },
 ];
 function CheckMark() {
@@ -112,6 +113,8 @@ export function SpawnWizard() {
   const [selectedPersonality, setSelectedPersonality] = useState('');
   const [showAdvanced, setShowAdvanced] = useState(false);
   const [spawning, setSpawning] = useState(false);
+  const [selectedPeerId, setSelectedPeerId] = useState('');
+  const federation = useGrooveStore((s) => s.federation);
   useEffect(() => {
     if (open) {
@@ -144,6 +147,7 @@ export function SpawnWizard() {
       setIntegrationApproval('manual');
       setSelectedRepos([]);
       setSelectedPersonality('');
+      setSelectedPeerId('');
       setShowAdvanced(false);
     }
   }, [open, fetchProviders]);
@@ -168,6 +172,7 @@ export function SpawnWizard() {
         ...(selectedIntegrations.length > 0 && { integrationApproval }),
         ...(selectedRepos.length > 0 && { repos: selectedRepos }),
         ...(selectedPersonality && { personality: selectedPersonality }),
+        ...(selectedRole === 'ambassador' && selectedPeerId && { peerId: selectedPeerId }),
       };
       await spawnAgent(config);
       closeDetail();
@@ -232,6 +237,42 @@ export function SpawnWizard() {
               </div>
             </div>
+            {/* Ambassador server picker */}
+            {selectedRole === 'ambassador' && (() => {
+              const eligible = federation.whitelist.filter((e) => typeof e === 'object' && (e.status === 'mutual' || e.status === 'connected'));
+              if (eligible.length === 0) {
+                return (
+                  <div className="rounded-lg border border-dashed border-border-subtle bg-surface-1/50 px-4 py-4 text-center">
+                    <Globe size={18} className="text-text-4 mx-auto mb-1.5" />
+                    <p className="text-2xs text-text-3 font-sans mb-2">No federated servers connected. Add one in the Federation view.</p>
+                    <Button variant="ghost" size="sm" className="text-2xs text-accent" onClick={() => { closeDetail(); useGrooveStore.getState().setActiveView('federation'); }}>
+                      Go to Federation
+                    </Button>
+                  </div>
+                );
+              }
+              return (
+                <div>
+                  <label className="text-xs font-semibold text-text-2 font-sans uppercase tracking-wider block mb-2">
+                    Target Server
+                  </label>
+                  <div className="relative">
+                    <select
+                      value={selectedPeerId}
+                      onChange={(e) => setSelectedPeerId(e.target.value)}
+                      className="w-full h-8 px-3 pr-8 text-sm rounded-md bg-surface-1 border border-border text-text-0 font-sans appearance-none cursor-pointer focus:outline-none focus:ring-1 focus:ring-accent"
+                    >
+                      <option value="">Select a server...</option>
+                      {eligible.map((e) => (
+                        <option key={e.ip} value={e.ip}>{e.name || `${e.ip}:${e.port || 31415}`}</option>
+                      ))}
+                    </select>
+                    <ChevronDown size={14} className="absolute right-2 top-1/2 -translate-y-1/2 text-text-3 pointer-events-none" />
+                  </div>
+                </div>
+              );
+            })()}
             {/* Section 2: Configuration */}
             {selectedRole && (
               <div className="space-y-4">

package/packages/gui/src/components/editor/breadcrumbs.jsx ADDED Viewed

@@ -0,0 +1,30 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { ChevronRight } from 'lucide-react';
+export function Breadcrumbs({ path }) {
+  if (!path) return null;
+  const segments = path.split('/').filter(Boolean);
+  return (
+    <div className="flex items-center h-7 px-3 bg-surface-2 border-b border-border-subtle text-2xs font-sans text-text-3 overflow-hidden flex-shrink-0 select-none">
+      {segments.map((segment, i) => {
+        const isLast = i === segments.length - 1;
+        return (
+          <span key={i} className="flex items-center min-w-0">
+            {i > 0 && <ChevronRight size={10} className="mx-0.5 flex-shrink-0 text-text-4" />}
+            <span
+              className={
+                isLast
+                  ? 'text-text-1 font-medium truncate'
+                  : 'hover:text-text-1 cursor-pointer truncate transition-colors'
+              }
+            >
+              {segment}
+            </span>
+          </span>
+        );
+      })}
+    </div>
+  );
+}

package/packages/gui/src/components/editor/code-editor.jsx CHANGED Viewed

@@ -34,16 +34,41 @@ const grooveTheme = EditorView.theme({
   '.cm-activeLineGutter': { backgroundColor: '#2c313a' },
   '.cm-activeLine': { backgroundColor: 'rgba(44, 49, 58, 0.5)' },
   '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': { backgroundColor: 'rgba(51, 175, 188, 0.15)' },
+  // Search panel styling
+  '.cm-panels': { backgroundColor: '#24282f', borderBottom: '1px solid #3e4451' },
+  '.cm-panels.cm-panels-top': { borderBottom: '1px solid #3e4451' },
+  '.cm-panels.cm-panels-bottom': { borderTop: '1px solid #3e4451' },
+  '.cm-search': { padding: '6px 8px', gap: '4px', fontFamily: 'var(--font-sans)', fontSize: '12px', display: 'flex', flexWrap: 'wrap', alignItems: 'center' },
+  '.cm-search label': { display: 'flex', alignItems: 'center', gap: '4px', color: '#8b929e', fontSize: '11px' },
+  '.cm-search input, .cm-search .cm-textfield': {
+    backgroundColor: '#1a1e25', border: '1px solid #2c313a', borderRadius: '4px', color: '#e6e6e6',
+    padding: '2px 6px', fontSize: '12px', fontFamily: 'var(--font-mono)', outline: 'none',
+  },
+  '.cm-search input:focus, .cm-search .cm-textfield:focus': { borderColor: '#33afbc' },
+  '.cm-search .cm-button, .cm-button': {
+    backgroundColor: '#2c313a', border: '1px solid #3e4451', borderRadius: '4px', color: '#bcc2cd',
+    padding: '2px 8px', fontSize: '11px', fontFamily: 'var(--font-sans)', cursor: 'pointer',
+    backgroundImage: 'none',
+  },
+  '.cm-search .cm-button:hover, .cm-button:hover': { backgroundColor: '#333842', color: '#e6e6e6' },
+  '.cm-search .cm-button:active': { backgroundColor: '#3a3f4b' },
+  '.cm-search br': { display: 'none' },
+  '.cm-panel.cm-search [name=close]': { color: '#6e7681', cursor: 'pointer', padding: '0 4px' },
+  '.cm-panel.cm-search [name=close]:hover': { color: '#e6e6e6' },
+  '.cm-searchMatch': { backgroundColor: 'rgba(51, 175, 188, 0.2)', outline: '1px solid rgba(51, 175, 188, 0.4)' },
+  '.cm-searchMatch-selected': { backgroundColor: 'rgba(51, 175, 188, 0.35)' },
 }, { dark: true });
-export function CodeEditor({ content, language, onChange, onSave }) {
+export function CodeEditor({ content, language, onChange, onSave, onCursorChange, viewRef: externalViewRef }) {
   const containerRef = useRef(null);
   const viewRef = useRef(null);
   const langCompartment = useRef(new Compartment());
   const onChangeRef = useRef(onChange);
   const onSaveRef = useRef(onSave);
+  const onCursorChangeRef = useRef(onCursorChange);
   onChangeRef.current = onChange;
   onSaveRef.current = onSave;
+  onCursorChangeRef.current = onCursorChange;
   useEffect(() => {
     if (!containerRef.current) return;
@@ -74,14 +99,20 @@ export function CodeEditor({ content, language, onChange, onSave }) {
           if (update.docChanged) {
             onChangeRef.current?.(update.state.doc.toString());
           }
+          if (update.selectionSet || update.docChanged) {
+            const pos = update.state.selection.main.head;
+            const line = update.state.doc.lineAt(pos);
+            onCursorChangeRef.current?.({ line: line.number, col: pos - line.from + 1 });
+          }
         }),
       ],
     });
     const view = new EditorView({ state, parent: containerRef.current });
     viewRef.current = view;
+    if (externalViewRef) externalViewRef.current = view;
-    return () => { view.destroy(); viewRef.current = null; };
+    return () => { view.destroy(); viewRef.current = null; if (externalViewRef) externalViewRef.current = null; };
   }, []); // mount once
   // Update content when file changes externally

package/packages/gui/src/components/editor/editor-status-bar.jsx ADDED Viewed

@@ -0,0 +1,26 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+const LANG_LABELS = {
+  javascript: 'JavaScript',
+  typescript: 'TypeScript',
+  css: 'CSS',
+  html: 'HTML',
+  json: 'JSON',
+  markdown: 'Markdown',
+  python: 'Python',
+};
+export function EditorStatusBar({ cursorPos, language }) {
+  return (
+    <div className="flex items-center justify-between h-6 px-3 bg-surface-1 border-t border-border-subtle text-2xs font-sans text-text-3 flex-shrink-0 select-none">
+      <div className="flex items-center gap-3">
+        <span>Ln {cursorPos.line}, Col {cursorPos.col}</span>
+      </div>
+      <div className="flex items-center gap-3">
+        <span className="cursor-default">{LANG_LABELS[language] || language || 'Plain Text'}</span>
+        <span>Spaces: 2</span>
+        <span>UTF-8</span>
+      </div>
+    </div>
+  );
+}