npm - groove-dev - Versions diffs - 0.27.30 → 0.27.33 - Mend

groove-dev 0.27.30 → 0.27.33

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

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

@@ -6,12 +6,12 @@
     <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-PxWmJjcJ.js"></script>
+    <script type="module" crossorigin src="/assets/index-BoU6IhQI.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-BwNjgBny.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-BnLiWvrh.css">
   </head>
   <body>
     <div id="root"></div>

package/packages/gui/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@groove-dev/gui",
-  "version": "0.27.30",
+  "version": "0.27.33",
   "description": "GROOVE GUI — visual agent control plane",
   "license": "FSL-1.1-Apache-2.0",
   "type": "module",

package/packages/gui/src/components/layout/app-shell.jsx CHANGED Viewed

@@ -13,6 +13,7 @@ import { DetailPanel } from './detail-panel';
 import { CommandPalette } from './command-palette';
 import { ApprovalModal } from '../ui/approval-modal';
 import { QuickConnect } from '../settings/quick-connect';
+import { ProjectPicker } from './project-picker';
 import { TeamTabBar } from '../../views/agents';
 export function AppShell({ children, detailContent, terminalContent }) {
@@ -117,6 +118,7 @@ export function AppShell({ children, detailContent, terminalContent }) {
         <CommandPalette />
         <QuickConnect />
+        <ProjectPicker />
         <ApprovalModal />
         <ToastContainer />
       </div>

package/packages/gui/src/components/layout/breadcrumb-bar.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useState, useEffect, useRef } from 'react';
-import { Search, ChevronRight, LogIn, LogOut, User, ExternalLink, BookOpen, ChevronDown } from 'lucide-react';
+import { Search, ChevronRight, LogIn, LogOut, User, ExternalLink, BookOpen, ChevronDown, FolderOpen } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { useGrooveStore } from '../../stores/groove';
 import { isElectron, getPlatform } from '../../lib/electron';
@@ -130,10 +130,13 @@ const VIEW_LABELS = {
 export function BreadcrumbBar({
   activeView,
   connected,
+  tunneled,
   daemonHost,
   editorActiveFile,
   onOpenCommandPalette,
 }) {
+  const projectDir = useGrooveStore((s) => s.projectDir);
+  const toggleProjectPicker = useGrooveStore((s) => s.toggleProjectPicker);
   const crumbs = ['Groove', VIEW_LABELS[activeView] || activeView];
   if (activeView === 'editor' && editorActiveFile) {
     crumbs.push(editorActiveFile.split('/').pop());
@@ -182,6 +185,18 @@ export function BreadcrumbBar({
         </span>
       )}
+      {/* Project dir badge — remote sessions, clickable to change */}
+      {tunneled && projectDir && (
+        <button
+          onClick={toggleProjectPicker}
+          className="flex items-center gap-1 text-2xs font-mono font-medium text-text-2 bg-surface-5 px-1.5 py-0.5 rounded flex-shrink-0 hover:bg-surface-4 hover:text-text-0 transition-colors cursor-pointer"
+          title={projectDir}
+        >
+          <FolderOpen size={11} />
+          {projectDir.split('/').pop() || '/'}
+        </button>
+      )}
       <div className="flex-1 min-w-4" />
       {/* Breadcrumbs */}

package/packages/gui/src/components/layout/project-picker.jsx ADDED Viewed

@@ -0,0 +1,127 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { FolderBrowser } from '../agents/folder-browser';
+import { cn } from '../../lib/cn';
+import {
+  FolderOpen, FolderClosed, Clock, ChevronRight, Plus, Monitor,
+} from 'lucide-react';
+function formatTimeAgo(iso) {
+  if (!iso) return '';
+  const diff = Date.now() - new Date(iso).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+export function ProjectPicker() {
+  const show = useGrooveStore((s) => s.showProjectPicker);
+  const recentProjects = useGrooveStore((s) => s.recentProjects);
+  const setProjectDir = useGrooveStore((s) => s.setProjectDir);
+  const [browserOpen, setBrowserOpen] = useState(false);
+  const [loading, setLoading] = useState(null);
+  if (!show) return null;
+  async function handleSelect(path) {
+    setLoading(path);
+    try {
+      await setProjectDir(path);
+    } catch {
+      setLoading(null);
+    }
+  }
+  async function handleBrowseSelect(path) {
+    setBrowserOpen(false);
+    await handleSelect(path);
+  }
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-surface-0/90 backdrop-blur-sm">
+      <div className="w-full max-w-lg mx-4">
+        {/* Header */}
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-accent/10 mb-4">
+            <Monitor size={28} className="text-accent" />
+          </div>
+          <h1 className="text-xl font-semibold text-text-0 mb-1">Open a project</h1>
+          <p className="text-sm text-text-3">Select a working directory for this session</p>
+        </div>
+        {/* Recent projects */}
+        {recentProjects.length > 0 && (
+          <div className="mb-4">
+            <div className="flex items-center gap-2 mb-2 px-1">
+              <Clock size={13} className="text-text-4" />
+              <span className="text-xs font-medium text-text-3 uppercase tracking-wider">Recent</span>
+            </div>
+            <div className="bg-surface-2 rounded-xl border border-border overflow-hidden">
+              {recentProjects.map((project, i) => (
+                <button
+                  key={project.path}
+                  onClick={() => handleSelect(project.path)}
+                  disabled={loading !== null}
+                  className={cn(
+                    'w-full flex items-center gap-3 px-4 py-3 text-left cursor-pointer',
+                    'hover:bg-surface-4 transition-colors',
+                    'disabled:opacity-50 disabled:cursor-wait',
+                    i < recentProjects.length - 1 && 'border-b border-border-subtle',
+                  )}
+                >
+                  <FolderClosed size={18} className="text-warning flex-shrink-0" />
+                  <div className="flex-1 min-w-0">
+                    <div className="text-sm font-medium text-text-0 truncate">{project.name}</div>
+                    <div className="text-xs text-text-3 font-mono truncate">{project.path}</div>
+                  </div>
+                  <div className="flex items-center gap-2 flex-shrink-0">
+                    {project.openedAt && (
+                      <span className="text-[11px] text-text-4">{formatTimeAgo(project.openedAt)}</span>
+                    )}
+                    {loading === project.path ? (
+                      <div className="w-4 h-4 border-2 border-accent border-t-transparent rounded-full animate-spin" />
+                    ) : (
+                      <ChevronRight size={14} className="text-text-4" />
+                    )}
+                  </div>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+        {/* Open folder button */}
+        <button
+          onClick={() => setBrowserOpen(true)}
+          disabled={loading !== null}
+          className={cn(
+            'w-full flex items-center gap-3 px-4 py-3.5 rounded-xl cursor-pointer',
+            'bg-surface-2 border border-border border-dashed',
+            'hover:bg-surface-4 hover:border-accent/30 transition-colors',
+            'disabled:opacity-50 disabled:cursor-wait',
+          )}
+        >
+          <div className="flex items-center justify-center w-9 h-9 rounded-lg bg-accent/10">
+            <Plus size={18} className="text-accent" />
+          </div>
+          <div className="text-left">
+            <div className="text-sm font-medium text-text-0">Open Folder</div>
+            <div className="text-xs text-text-3">Browse the filesystem</div>
+          </div>
+        </button>
+        <FolderBrowser
+          open={browserOpen}
+          onOpenChange={setBrowserOpen}
+          currentPath="/home"
+          onSelect={handleBrowseSelect}
+        />
+      </div>
+    </div>
+  );
+}

package/packages/gui/src/components/settings/quick-connect.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -17,6 +17,7 @@ export function QuickConnect() {
   const addToast = useGrooveStore((s) => s.addToast);
   const [connectingId, setConnectingId] = useState(null);
   const [showWizard, setShowWizard] = useState(false);
+  const wizardTunnelId = useRef(null);
   if (!open) return null;
@@ -25,7 +26,9 @@ export function QuickConnect() {
     try {
       await useGrooveStore.getState().connectTunnel(id);
       toggle();
-    } catch {}
+    } catch (err) {
+      addToast('error', 'Connection failed', err?.message || 'Unknown error');
+    }
     setConnectingId(null);
   }
@@ -81,24 +84,28 @@ export function QuickConnect() {
             <SSHWizard
               server={null}
               onSave={async (data) => {
-                if (data.id) {
-                  await useGrooveStore.getState().updateTunnel(data.id, data);
+                const existingId = data.id || wizardTunnelId.current;
+                if (existingId) {
+                  await useGrooveStore.getState().updateTunnel(existingId, data);
+                  addToast('success', 'Server updated');
                 } else {
-                  await useGrooveStore.getState().saveTunnel(data);
+                  const result = await useGrooveStore.getState().saveTunnel(data);
+                  if (result?.id) wizardTunnelId.current = result.id;
+                  addToast('success', 'Server added');
                 }
-                addToast('success', data.id ? 'Server updated' : 'Server added');
               }}
               onTest={() => {
-                const tunnels = useGrooveStore.getState().savedTunnels;
-                const last = tunnels[tunnels.length - 1];
-                if (last?.id) return useGrooveStore.getState().testTunnel(last.id);
+                const id = wizardTunnelId.current;
+                if (id) return useGrooveStore.getState().testTunnel(id);
               }}
               onConnect={() => {
-                const tunnels = useGrooveStore.getState().savedTunnels;
-                const last = tunnels[tunnels.length - 1];
-                if (last?.id) return useGrooveStore.getState().connectTunnel(last.id);
+                const id = wizardTunnelId.current;
+                if (id) return useGrooveStore.getState().connectTunnel(id);
+              }}
+              onCancel={() => {
+                wizardTunnelId.current = null;
+                setShowWizard(false);
               }}
-              onCancel={() => setShowWizard(false)}
             />
           ) : (
             <>
@@ -112,7 +119,7 @@ export function QuickConnect() {
                     <Button
                       variant="primary"
                       size="sm"
-                      onClick={() => setShowWizard(true)}
+                      onClick={() => { wizardTunnelId.current = null; setShowWizard(true); }}
                       className="h-8 text-xs gap-1.5 mt-3"
                     >
                       <Plus size={12} /> Add Connection
@@ -157,7 +164,7 @@ export function QuickConnect() {
               {/* Footer with Add button */}
               <div className="px-4 py-2.5 border-t border-border-subtle">
                 <button
-                  onClick={() => setShowWizard(true)}
+                  onClick={() => { wizardTunnelId.current = null; setShowWizard(true); }}
                   className="flex items-center gap-1.5 text-2xs text-accent hover:text-accent/80 font-sans font-medium cursor-pointer transition-colors"
                 >
                   <Plus size={10} /> Add new connection

package/packages/gui/src/stores/groove.js CHANGED Viewed

@@ -107,6 +107,11 @@ export const useGrooveStore = create((set, get) => ({
   // ── Toasts ────────────────────────────────────────────────
   toasts: [],
+  // ── Project Directory ───────────────────────────────────────
+  projectDir: null,
+  recentProjects: [],
+  showProjectPicker: false,
   // ── Tunnels ────────────────────────────────────────────────
   savedTunnels: [],
   activeTunnelId: null,
@@ -140,9 +145,11 @@ export const useGrooveStore = create((set, get) => ({
         const updates = {};
         if (s.host && s.host !== '127.0.0.1') updates.daemonHost = s.host;
         const browserPort = window.location.port || '80';
-        if (String(s.port) !== browserPort) updates.tunneled = true;
+        const isTunneled = String(s.port) !== browserPort;
+        if (isTunneled) updates.tunneled = true;
         if (s.version) updates.version = s.version;
         if (Object.keys(updates).length > 0) set(updates);
+        if (isTunneled) get().fetchProjectDir();
       }).catch(() => {});
       get().fetchTeams();
       get().fetchApprovals();
@@ -502,6 +509,10 @@ export const useGrooveStore = create((set, get) => ({
           }));
           break;
+        case 'project-dir:changed':
+          set({ projectDir: msg.data?.projectDir, showProjectPicker: false });
+          break;
         case 'tunnel.connected':
           set({ activeTunnelId: msg.data?.id || null });
           get().fetchTunnels();
@@ -1034,6 +1045,33 @@ export const useGrooveStore = create((set, get) => ({
     get().fetchImportedRepos();
   },
+  // ── Project Directory ────────────────────────────────────
+  async fetchProjectDir() {
+    try {
+      const data = await api.get('/project-dir');
+      const isHome = /^\/home\/[^/]+$/.test(data.projectDir) || data.projectDir === '/root';
+      set({
+        projectDir: data.projectDir,
+        recentProjects: data.recentProjects || [],
+        showProjectPicker: isHome || (data.recentProjects || []).length === 0,
+      });
+    } catch {}
+  },
+  async setProjectDir(path) {
+    const data = await api.post('/project-dir', { path });
+    set({
+      projectDir: data.projectDir,
+      recentProjects: data.recentProjects || [],
+      showProjectPicker: false,
+    });
+  },
+  toggleProjectPicker() {
+    set((s) => ({ showProjectPicker: !s.showProjectPicker }));
+  },
   // ── Tunnels ──────────────────────────────────────────────
   async fetchTunnels() {
@@ -1068,7 +1106,6 @@ export const useGrooveStore = create((set, get) => ({
     const result = await api.post(`/tunnels/${encodeURIComponent(id)}/connect`);
     set({ activeTunnelId: id });
     get().fetchTunnels();
-    if (result.url) window.open(result.url, '_blank');
     return result;
   },