npm - groove-dev - Versions diffs - 0.27.8 → 0.27.11 - Mend

groove-dev 0.27.8 → 0.27.11

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

package/node_modules/@groove-dev/gui/dist/index.html CHANGED Viewed

@@ -5,12 +5,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-DiCjVtQL.js"></script>
+    <script type="module" crossorigin src="/assets/index-zdzOLAZM.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-CwmR3-HY.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-BE6lYcd7.css">
   </head>
   <body>
     <div id="root"></div>

package/node_modules/@groove-dev/gui/src/app.css CHANGED Viewed

@@ -201,6 +201,20 @@ html {
   filter: drop-shadow(0 0 4px rgba(97, 175, 239, 0.4));
 }
+/* ── Electron Desktop App ────────────────────────────────── */
+.electron-drag {
+  -webkit-app-region: drag;
+}
+.electron-no-drag-children button,
+.electron-no-drag-children input,
+.electron-no-drag-children a,
+.electron-no-drag-children kbd,
+.electron-no-drag-children select {
+  -webkit-app-region: no-drag;
+}
 /* ── React Flow Overrides ─────────────────────────────────── */
 /* Suppress node fly-in animation — nodes appear in position instantly */

package/node_modules/@groove-dev/gui/src/app.jsx CHANGED Viewed

@@ -99,8 +99,21 @@ function LoadingScreen() {
 export default function App() {
   const connect = useGrooveStore((s) => s.connect);
   const hydrated = useGrooveStore((s) => s.hydrated);
+  const tunneled = useGrooveStore((s) => s.tunneled);
   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';
+    }
+  }, [tunneled]);
   if (!hydrated) return <LoadingScreen />;
   return (

package/node_modules/@groove-dev/gui/src/components/agents/agent-config.jsx CHANGED Viewed

@@ -5,7 +5,7 @@ import {
   Gauge, FolderSearch, Key, Check, Eye, EyeOff,
   AlertCircle, Layers, Activity,
   RotateCw, Skull, Copy, Trash2,
-  Sparkles, Calendar, Plug,
+  Sparkles, Calendar, Plug, MessageCircle, Save, GitBranch,
 } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
 import { Badge } from '../ui/badge';
@@ -156,15 +156,21 @@ export function AgentConfig({ agent }) {
   const [expandedProvider, setExpandedProvider] = useState(null);
   const [routingMode, setRoutingMode] = useState(agent.routingMode || 'auto');
   const [installedSkills, setInstalledSkills] = useState([]);
+  const [importedRepos, setImportedRepos] = useState([]);
   const [scheduleUnit, setScheduleUnit] = useState('hr');
   const [scheduleCount, setScheduleCount] = useState('1');
   const [scheduling, setScheduling] = useState(false);
+  const [personalityContent, setPersonalityContent] = useState('');
+  const [personalityLoaded, setPersonalityLoaded] = useState(false);
+  const [personalities, setPersonalities] = useState([]);
+  const [savingPersonality, setSavingPersonality] = useState(false);
   const isAlive = agent.status === 'running' || agent.status === 'starting';
   useEffect(() => {
     loadProviders();
     api.get('/skills/installed').then((data) => setInstalledSkills(Array.isArray(data) ? data : data.skills || [])).catch(() => {});
+    api.get('/repos/imported').then((data) => setImportedRepos((Array.isArray(data) ? data : []).filter((r) => r.status === 'active'))).catch(() => {});
     function onChanged() { loadProviders(); }
     window.addEventListener('groove:providers-changed', onChanged);
     return () => window.removeEventListener('groove:providers-changed', onChanged);
@@ -181,6 +187,20 @@ export function AgentConfig({ agent }) {
     }).catch(() => {});
   }, [agent.id, agent.model]);
+  useEffect(() => {
+    setPersonalityLoaded(false);
+    api.get(`/personalities/${agent.name}`).then((data) => {
+      setPersonalityContent(data?.content || '');
+      setPersonalityLoaded(true);
+    }).catch(() => {
+      setPersonalityContent('');
+      setPersonalityLoaded(true);
+    });
+    api.get('/personalities').then((data) => {
+      setPersonalities(Array.isArray(data) ? data : data.personalities || []);
+    }).catch(() => {});
+  }, [agent.id, agent.name]);
   const currentProvider = providers.find((p) => p.id === agent.provider);
   async function handleModelSwap(providerId, modelId) {
@@ -612,6 +632,60 @@ export function AgentConfig({ agent }) {
         </div>
       </ConfigSection>
+      {/* ── Repos ─────────────────────────────────────────── */}
+      {importedRepos.length > 0 && (
+        <ConfigSection label="Repos" icon={GitBranch} description="Attach imported repos so this agent knows where they are.">
+          <div className="flex flex-wrap gap-1.5">
+            {(agent.repos || []).map((importId) => {
+              const repo = importedRepos.find((r) => r.id === importId);
+              return (
+                <Badge key={importId} variant="accent" className="font-mono text-xs gap-1.5 px-2.5 py-1">
+                  {repo?.name || importId}
+                  <button
+                    onClick={async () => {
+                      try {
+                        await api.delete(`/agents/${agent.id}/repos/${importId}`);
+                        addToast('success', `Detached ${repo?.name || importId}`);
+                      } catch (err) { addToast('error', 'Detach failed', err.message); }
+                    }}
+                    className="hover:text-danger cursor-pointer"
+                  >
+                    <X size={10} />
+                  </button>
+                </Badge>
+              );
+            })}
+            {importedRepos.filter((r) => !(agent.repos || []).includes(r.id)).length > 0 && (
+              <div className="relative group">
+                <button className="w-7 h-7 flex items-center justify-center rounded-md bg-surface-4 border border-border-subtle text-text-3 hover:text-accent cursor-pointer transition-colors">
+                  <Plus size={12} />
+                </button>
+                <div className="absolute top-full left-0 mt-1 z-20 hidden group-hover:block bg-surface-2 border border-border-subtle rounded-lg shadow-xl py-1 min-w-[200px]">
+                  {importedRepos.filter((r) => !(agent.repos || []).includes(r.id)).map((repo) => (
+                    <button
+                      key={repo.id}
+                      onClick={async () => {
+                        try {
+                          await api.post(`/agents/${agent.id}/repos/${repo.id}`);
+                          addToast('success', `Attached ${repo.name || repo.id}`);
+                        } catch (err) { addToast('error', 'Attach failed', err.message); }
+                      }}
+                      className="w-full text-left px-3 py-1.5 text-xs font-sans text-text-1 hover:bg-surface-4 cursor-pointer transition-colors"
+                    >
+                      <div className="font-semibold">{repo.name || repo.repo}</div>
+                      <div className="text-2xs text-text-4 font-mono truncate">{repo.clonedTo}</div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+            {(agent.repos || []).length === 0 && (
+              <span className="text-2xs text-text-4 font-sans">No repos attached — import one from the Marketplace</span>
+            )}
+          </div>
+        </ConfigSection>
+      )}
       {/* ── Schedule ──────────────────────────────────────── */}
       <ConfigSection label="Schedule" icon={Calendar} description="Run this agent on a recurring schedule.">
         <div className="flex items-center gap-2">
@@ -686,6 +760,61 @@ export function AgentConfig({ agent }) {
         </div>
       </ConfigSection>
+      {/* ── Personality ──────────────────────────────────── */}
+      <ConfigSection label="Personality" icon={MessageCircle} description="Injected into every prompt. Changes apply on next spawn or rotation.">
+        <textarea
+          value={personalityContent}
+          onChange={(e) => setPersonalityContent(e.target.value)}
+          placeholder={personalityLoaded ? 'Describe this agent\'s personality, tone, and behavior...' : 'Loading...'}
+          rows={4}
+          className="w-full min-h-[4rem] max-h-[10rem] resize-y bg-surface-0 border border-border-subtle rounded-md p-2 text-xs font-mono text-text-1 placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent"
+        />
+        <div className="flex items-center gap-2">
+          <Button
+            variant="primary"
+            size="sm"
+            disabled={savingPersonality}
+            onClick={async () => {
+              setSavingPersonality(true);
+              try {
+                await api.put(`/personalities/${agent.name}`, { content: personalityContent });
+                addToast('success', 'Personality saved');
+              } catch (err) {
+                addToast('error', 'Save failed', err.message);
+              }
+              setSavingPersonality(false);
+            }}
+            className="h-7 px-3 text-2xs gap-1"
+          >
+            <Save size={10} />
+            {savingPersonality ? 'Saving...' : 'Save'}
+          </Button>
+          {personalities.length > 0 && (
+            <div className="relative">
+              <select
+                value=""
+                onChange={(e) => {
+                  if (!e.target.value) return;
+                  const p = personalities.find((x) => (x.name || x) === e.target.value);
+                  if (p) {
+                    api.get(`/personalities/${p.name || p}`).then((data) => {
+                      if (data?.content) setPersonalityContent(data.content);
+                    }).catch(() => {});
+                  }
+                }}
+                className="h-7 px-2 pr-7 text-2xs rounded-md bg-surface-1 border border-border-subtle text-text-2 font-sans appearance-none cursor-pointer focus:outline-none focus:ring-1 focus:ring-accent"
+              >
+                <option value="">Clone from...</option>
+                {personalities.filter((p) => (p.name || p) !== agent.name).map((p) => (
+                  <option key={p.name || p} value={p.name || p}>{p.name || p}</option>
+                ))}
+              </select>
+              <ChevronDown size={10} className="absolute right-2 top-1/2 -translate-y-1/2 text-text-4 pointer-events-none" />
+            </div>
+          )}
+        </div>
+      </ConfigSection>
       {/* ── Original Prompt ────────────────────────────────── */}
       {agent.prompt && (
         <ConfigSection label="Original Prompt" icon={Activity}>

package/node_modules/@groove-dev/gui/src/components/agents/agent-feed.jsx CHANGED Viewed

@@ -369,9 +369,9 @@ function StreamingBar({ agent }) {
       <div className="flex items-center gap-3 flex-shrink-0">
         <span className="text-[10px] text-text-4 font-mono">{fmtTokens(agent.tokensUsed)}</span>
         <div className="flex items-center gap-1.5">
-          <div className="w-14 h-1 rounded-full bg-surface-4 overflow-hidden">
+          <div className="w-14 h-0.5 rounded-sm bg-surface-4 overflow-hidden">
             <div
-              className="h-full rounded-full transition-all duration-500"
+              className="h-full rounded-sm transition-all duration-500"
               style={{
                 width: `${ctxPct}%`,
                 background: ctxPct >= 75 ? 'var(--color-danger)' : ctxPct >= 50 ? 'var(--color-warning)' : 'var(--color-accent)',

package/node_modules/@groove-dev/gui/src/components/agents/agent-mdfiles.jsx CHANGED Viewed

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 import { api } from '../../lib/api';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
-import { FileText, Save, X, RefreshCw, ChevronLeft } from 'lucide-react';
+import { FileText, Save, X, RefreshCw, ChevronLeft, Plus } from 'lucide-react';
 export function AgentMdFiles({ agent }) {
   const addToast = useGrooveStore((s) => s.addToast);
@@ -13,6 +13,8 @@ export function AgentMdFiles({ agent }) {
   const [content, setContent] = useState('');
   const [original, setOriginal] = useState('');
   const [saving, setSaving] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [newFileName, setNewFileName] = useState('');
   async function fetchFiles() {
     try {
@@ -48,6 +50,20 @@ export function AgentMdFiles({ agent }) {
     setSaving(false);
   }
+  async function createFile() {
+    const name = newFileName.trim();
+    if (!name) return;
+    try {
+      await api.post(`/agents/${agent.id}/mdfiles/create`, { name });
+      setNewFileName('');
+      setCreating(false);
+      addToast('success', `Created ${name}.md`);
+      fetchFiles();
+    } catch (err) {
+      addToast('error', 'Create failed', err.message);
+    }
+  }
   const isDirty = content !== original;
   // File list view
@@ -57,6 +73,9 @@ export function AgentMdFiles({ agent }) {
         <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border-subtle">
           <FileText size={12} className="text-text-3" />
           <span className="text-2xs font-semibold text-text-2 font-sans uppercase tracking-wider flex-1">Markdown Files</span>
+          <button onClick={() => setCreating(true)} className="p-1 text-text-4 hover:text-accent cursor-pointer" title="Create file">
+            <Plus size={12} />
+          </button>
           <button onClick={fetchFiles} className="p-1 text-text-4 hover:text-text-1 cursor-pointer">
             <RefreshCw size={11} />
           </button>
@@ -68,6 +87,23 @@ export function AgentMdFiles({ agent }) {
           </div>
         )}
+        {creating && (
+          <div className="flex items-center gap-1.5 px-4 py-2 border-b border-border-subtle bg-surface-0">
+            <FileText size={11} className="text-accent flex-shrink-0" />
+            <input
+              autoFocus
+              value={newFileName}
+              onChange={(e) => setNewFileName(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter') createFile(); if (e.key === 'Escape') { setCreating(false); setNewFileName(''); } }}
+              placeholder="filename"
+              className="flex-1 bg-transparent text-xs text-text-0 font-mono outline-none placeholder:text-text-4"
+            />
+            <span className="text-[10px] text-text-4 font-mono">.md</span>
+            <button onClick={createFile} className="p-0.5 text-accent hover:text-accent/80 cursor-pointer"><Save size={11} /></button>
+            <button onClick={() => { setCreating(false); setNewFileName(''); }} className="p-0.5 text-text-4 hover:text-text-1 cursor-pointer"><X size={11} /></button>
+          </div>
+        )}
         <div className="flex-1 overflow-y-auto">
           {files.length === 0 ? (
             <div className="flex flex-col items-center justify-center h-full text-center px-4">
@@ -91,6 +127,12 @@ export function AgentMdFiles({ agent }) {
                   <span className="text-[10px] text-text-4 font-mono flex-shrink-0">
                     {f.size > 1024 ? `${(f.size / 1024).toFixed(1)}K` : `${f.size}B`}
                   </span>
+                  {f.source === 'personality' && (
+                    <span className="text-[9px] font-mono text-purple bg-purple/10 px-1 py-px rounded flex-shrink-0">personality</span>
+                  )}
+                  {f.source === 'user' && (
+                    <span className="text-[9px] font-mono text-accent bg-accent/10 px-1 py-px rounded flex-shrink-0">custom</span>
+                  )}
                 </button>
               ))}
             </div>

package/node_modules/@groove-dev/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,
+  Sparkles, X, Search, AlertTriangle, Plug, MessageCircle, GitBranch,
 } from 'lucide-react';
 import { api } from '../../lib/api';
 import { Dialog, DialogContent } from '../ui/dialog';
@@ -53,6 +53,7 @@ const INTEGRATION_LOGOS = {
 };
 const ROLE_PRESETS = [
+  { id: 'chat',      label: 'Chat',       desc: 'Companion, assistant, conversation', icon: MessageCircle, tier: 'Medium' },
   { id: 'planner',   label: 'Planner',    desc: 'Plans the team and tasks',       icon: Rocket,     tier: 'Heavy' },
   { id: 'backend',   label: 'Backend',    desc: 'APIs, services, databases',       icon: Server,     tier: 'Medium' },
   { id: 'frontend',  label: 'Frontend',   desc: 'UI, components, styling',         icon: Monitor,    tier: 'Medium' },
@@ -103,6 +104,13 @@ export function SpawnWizard() {
   const [integrationModalOpen, setIntegrationModalOpen] = useState(false);
   const [integrationSearch, setIntegrationSearch] = useState('');
   const [integrationApproval, setIntegrationApproval] = useState('manual');
+  const [importedRepos, setImportedRepos] = useState([]);
+  const [selectedRepos, setSelectedRepos] = useState([]);
+  const [repoModalOpen, setRepoModalOpen] = useState(false);
+  const [repoSearch, setRepoSearch] = useState('');
+  const [personalities, setPersonalities] = useState([]);
+  const [selectedPersonality, setSelectedPersonality] = useState('');
+  const [showAdvanced, setShowAdvanced] = useState(false);
   const [spawning, setSpawning] = useState(false);
   useEffect(() => {
@@ -124,10 +132,19 @@ export function SpawnWizard() {
       api.get('/integrations/installed').then((data) => {
         setInstalledIntegrations(Array.isArray(data) ? data : []);
       }).catch(() => {});
+      api.get('/repos/imported').then((data) => {
+        setImportedRepos((Array.isArray(data) ? data : []).filter((r) => r.status === 'active'));
+      }).catch(() => {});
+      api.get('/personalities').then((data) => {
+        setPersonalities(Array.isArray(data) ? data : data.personalities || []);
+      }).catch(() => {});
       setRole(''); setCustomRole(''); setName(''); setProvider(''); setModel(''); setPrompt('');
       setSelectedSkills([]);
       setSelectedIntegrations([]);
       setIntegrationApproval('manual');
+      setSelectedRepos([]);
+      setSelectedPersonality('');
+      setShowAdvanced(false);
     }
   }, [open, fetchProviders]);
@@ -149,6 +166,8 @@ export function SpawnWizard() {
         ...(selectedSkills.length > 0 && { skills: selectedSkills }),
         ...(selectedIntegrations.length > 0 && { integrations: selectedIntegrations }),
         ...(selectedIntegrations.length > 0 && { integrationApproval }),
+        ...(selectedRepos.length > 0 && { repos: selectedRepos }),
+        ...(selectedPersonality && { personality: selectedPersonality }),
       };
       await spawnAgent(config);
       closeDetail();
@@ -539,6 +558,127 @@ export function SpawnWizard() {
                   </div>
                 )}
+                {/* Repos */}
+                {importedRepos.length > 0 && (
+                  <div className="space-y-1.5">
+                    <label className="text-xs font-medium text-text-2 font-sans">Repos</label>
+                    <div className="flex flex-wrap items-center gap-1.5">
+                      {selectedRepos.map((importId) => {
+                        const repo = importedRepos.find((r) => r.id === importId);
+                        return (
+                          <span
+                            key={importId}
+                            className="inline-flex items-center gap-1 px-2 py-1 rounded bg-accent/12 text-accent border border-accent/25 text-2xs font-sans"
+                          >
+                            <GitBranch size={9} />
+                            {repo?.name || importId}
+                            <button
+                              onClick={() => setSelectedRepos((prev) => prev.filter((r) => r !== importId))}
+                              className="ml-0.5 hover:text-text-0 cursor-pointer"
+                            >
+                              <X size={9} />
+                            </button>
+                          </span>
+                        );
+                      })}
+                      <button
+                        onClick={() => { setRepoModalOpen(true); setRepoSearch(''); }}
+                        className={cn(
+                          'inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-2xs font-sans transition-colors cursor-pointer',
+                          'bg-surface-0 text-text-2 border border-border-subtle hover:border-border hover:text-text-0',
+                        )}
+                      >
+                        <GitBranch size={10} />
+                        {selectedRepos.length > 0 ? 'Add repo' : 'Attach repo'}
+                      </button>
+                    </div>
+                  </div>
+                )}
+                {/* Repo picker modal */}
+                <Dialog open={repoModalOpen} onOpenChange={setRepoModalOpen}>
+                  <DialogContent title="Select Repository" className="max-w-sm">
+                    <div className="space-y-3 p-4">
+                      {importedRepos.length > 1 && (
+                        <div className="relative">
+                          <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-text-4" />
+                          <input
+                            value={repoSearch}
+                            onChange={(e) => setRepoSearch(e.target.value)}
+                            placeholder="Search repos..."
+                            autoFocus
+                            className="w-full h-8 pl-8 pr-3 text-xs rounded-md bg-surface-0 border border-border text-text-0 font-sans focus:outline-none focus:ring-1 focus:ring-accent"
+                          />
+                        </div>
+                      )}
+                      <div className="max-h-64 overflow-y-auto space-y-1">
+                        {importedRepos
+                          .filter((r) => {
+                            if (!repoSearch) return true;
+                            const q = repoSearch.toLowerCase();
+                            return (r.name || r.repo || r.id).toLowerCase().includes(q);
+                          })
+                          .map((repo) => {
+                            const active = selectedRepos.includes(repo.id);
+                            return (
+                              <button
+                                key={repo.id}
+                                onClick={() => {
+                                  setSelectedRepos((prev) =>
+                                    active ? prev.filter((r) => r !== repo.id) : [...prev, repo.id]
+                                  );
+                                }}
+                                className={cn(
+                                  'w-full flex items-center gap-2.5 px-3 py-2 rounded-md text-left transition-colors cursor-pointer',
+                                  active
+                                    ? 'bg-accent/10 border border-accent/25'
+                                    : 'hover:bg-surface-3 border border-transparent',
+                                )}
+                              >
+                                <GitBranch size={12} className={active ? 'text-accent' : 'text-text-3'} />
+                                <div className="flex-1 min-w-0">
+                                  <div className="text-xs font-semibold text-text-0 font-sans truncate">{repo.name || repo.repo}</div>
+                                  <div className="text-2xs text-text-4 font-mono truncate">{repo.clonedTo}</div>
+                                </div>
+                                {active && <CheckMark />}
+                              </button>
+                            );
+                          })}
+                      </div>
+                    </div>
+                  </DialogContent>
+                </Dialog>
+                {/* Personality — shown for chat role, or via Advanced toggle for others */}
+                {(role === 'chat' || showAdvanced) && (
+                  <div className="space-y-1.5">
+                    <label className="text-xs font-medium text-text-2 font-sans">Personality</label>
+                    <div className="relative">
+                      <select
+                        value={selectedPersonality}
+                        onChange={(e) => setSelectedPersonality(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="">None (blank)</option>
+                        {personalities.map((p) => (
+                          <option key={p.name || p} value={p.name || p}>{p.name || p}</option>
+                        ))}
+                      </select>
+                      <ChevronDown size={14} className="absolute right-2 top-1/2 -translate-y-1/2 text-text-3 pointer-events-none" />
+                    </div>
+                    <p className="text-2xs text-text-4 font-sans">Personality is injected into every prompt for this agent.</p>
+                  </div>
+                )}
+                {role !== 'chat' && !showAdvanced && (
+                  <button
+                    onClick={() => setShowAdvanced(true)}
+                    className="text-2xs text-text-3 hover:text-accent font-sans transition-colors cursor-pointer"
+                  >
+                    + Advanced options
+                  </button>
+                )}
               </div>
             )}
           </div>

package/node_modules/@groove-dev/gui/src/components/dashboard/fleet-panel.jsx CHANGED Viewed

@@ -94,16 +94,16 @@ const AgentRow = memo(function AgentRow({ agent, isRotating }) {
       {/* Context bar */}
       <div className="flex items-center gap-2">
         <div
-          className="relative flex-1 h-[4px] rounded-full overflow-visible"
+          className="relative flex-1 h-0.5 rounded-sm overflow-visible"
           style={{ background: hexAlpha(HEX.accent, 0.12) }}
         >
           <div
-            className="absolute inset-y-0 left-0 rounded-full transition-all duration-700"
+            className="absolute inset-y-0 left-0 rounded-sm transition-all duration-700"
             style={{ width: `${Math.max(contextPct, 1)}%`, background: barColor }}
           />
           {thresholdPct && (
             <div
-              className="absolute top-[-2px] w-px h-[8px]"
+              className="absolute top-[-1px] w-px h-[4px]"
               style={{ left: `${thresholdPct}%`, background: HEX.purple }}
               title={`Rotation at ${thresholdPct}%`}
             />

package/node_modules/@groove-dev/gui/src/components/dashboard/intel-panel.jsx CHANGED Viewed

@@ -61,8 +61,8 @@ function QualityBar({ score }) {
   const pct = Math.max(0, Math.min(100, score || 0));
   const color = qualityColor(score);
   return (
-    <div className="h-1 rounded-full overflow-hidden flex-1" style={{ background: 'rgba(51,175,188,0.08)' }}>
-      <div className="h-full rounded-full transition-all duration-700" style={{ width: `${pct}%`, background: color }} />
+    <div className="h-0.5 rounded-sm overflow-hidden flex-1" style={{ background: 'rgba(51,175,188,0.08)' }}>
+      <div className="h-full rounded-sm transition-all duration-700" style={{ width: `${pct}%`, background: color }} />
     </div>
   );
 }
@@ -81,9 +81,9 @@ function ProgressBar({ label, value, total, color }) {
           <span className="text-2xs font-mono text-text-3 tabular-nums w-10 text-right">{fmtNum(value)}</span>
         </div>
       </div>
-      <div className="h-[7px] rounded-full overflow-hidden" style={{ background: 'rgba(51,175,188,0.08)' }}>
+      <div className="h-0.5 rounded-sm overflow-hidden" style={{ background: 'rgba(51,175,188,0.08)' }}>
         <div
-          className="h-full rounded-full transition-all duration-500"
+          className="h-full rounded-sm transition-all duration-500"
           style={{ width: `${Math.min(pct, 100)}%`, background: color }}
         />
       </div>

package/node_modules/@groove-dev/gui/src/components/dashboard/routing-chart.jsx CHANGED Viewed

@@ -34,7 +34,7 @@ const RoutingChart = memo(function RoutingChart({ routing, agentBreakdown }) {
             <span className="text-2xs font-mono text-text-4 ml-auto tabular-nums">{fmtNum(total)} decisions</span>
           </div>
           {/* Stacked horizontal bar */}
-          <div className="h-[6px] bg-surface-4 rounded-full overflow-hidden flex">
+          <div className="h-0.5 bg-surface-2 rounded-sm overflow-hidden flex">
             {tiers.map((tier) => {
               const count = byTier[tier] || 0;
               if (count === 0) return null;
@@ -86,9 +86,9 @@ const RoutingChart = memo(function RoutingChart({ routing, agentBreakdown }) {
                     <span className="text-2xs font-mono text-text-3 tabular-nums">{usage.agents} agent{usage.agents !== 1 ? 's' : ''}</span>
                     <span className="text-xs font-mono text-text-1 tabular-nums">{fmtNum(usage.tokens)}</span>
                   </div>
-                  <div className="h-[3px] bg-surface-4 rounded-full overflow-hidden">
+                  <div className="h-0.5 bg-surface-4 rounded-sm overflow-hidden">
                     <div
-                      className="h-full rounded-full transition-all duration-500"
+                      className="h-full rounded-sm transition-all duration-500"
                       style={{ width: `${Math.max(barPct, 2)}%`, background: HEX.accent }}
                     />
                   </div>

package/node_modules/@groove-dev/gui/src/components/dashboard/team-burn-panel.jsx CHANGED Viewed

@@ -18,7 +18,7 @@ export const TeamBurnPanel = memo(function TeamBurnPanel({ teams = [] }) {
         {teams.length === 0 ? (
           <div className="px-3 py-6 text-center text-xs text-text-3 font-mono">No team activity yet</div>
         ) : (
-          <div className="px-3 pb-2 space-y-1.5">
+          <div className="px-3 py-3 space-y-3">
             {teams.map((t) => {
               const pct = maxTokens > 0 ? (t.totalTokens / maxTokens) * 100 : 0;
               return (

package/node_modules/@groove-dev/gui/src/components/layout/activity-bar.jsx CHANGED Viewed

@@ -27,13 +27,13 @@ export function ActivityBar({ activeView, detailPanel, onNavigate, onTogglePanel
             <button
               onClick={() => onNavigate(item.id)}
               className={cn(
-                'w-10 h-10 flex items-center justify-center rounded-md transition-colors cursor-pointer',
+                'w-8 h-8 flex items-center justify-center rounded-md transition-colors cursor-pointer',
                 activeView === item.id
                   ? 'text-text-0 bg-surface-5'
                   : 'text-text-3 hover:text-text-1 hover:bg-surface-4',
               )}
             >
-              <item.icon size={20} strokeWidth={activeView === item.id ? 2 : 1.5} />
+              <item.icon size={16} strokeWidth={activeView === item.id ? 2 : 1.5} />
             </button>
           </Tooltip>
         ))}
@@ -53,13 +53,13 @@ export function ActivityBar({ activeView, detailPanel, onNavigate, onTogglePanel
               <button
                 onClick={() => item.panel ? onTogglePanel(item.id) : onNavigate(item.id)}
                 className={cn(
-                  'w-10 h-10 flex items-center justify-center rounded-md transition-colors cursor-pointer',
+                  'w-8 h-8 flex items-center justify-center rounded-md transition-colors cursor-pointer',
                   isActive
                     ? 'text-text-0 bg-surface-5'
                     : 'text-text-3 hover:text-text-1 hover:bg-surface-4',
                 )}
               >
-                <item.icon size={20} strokeWidth={isActive ? 2 : 1.5} />
+                <item.icon size={16} strokeWidth={isActive ? 2 : 1.5} />
               </button>
             </Tooltip>
           );