groove-dev 0.26.38 → 0.27.0

package/node_modules/@groove-dev/gui/src/components/dashboard/kpi-card.jsx

@@ -2,6 +2,8 @@
 import { memo } from 'react';
 import { cn } from '../../lib/cn';
 import { HEX } from '../../lib/theme-hex';
+import { Tooltip } from '../ui/tooltip';
+import { HelpCircle } from 'lucide-react';
 
 function MiniSparkline({ data, color = HEX.accent, width = 72, height = 22 }) {
   if (!data || data.length < 2) return <div style={{ width, height }} />;
@@ -32,7 +34,7 @@ function MiniSparkline({ data, color = HEX.accent, width = 72, height = 22 }) {
   );
 }
 
-const KpiCard = memo(function KpiCard({ label, value, sparkData, color = HEX.accent, className }) {
+const KpiCard = memo(function KpiCard({ label, value, sparkData, color = HEX.accent, hint, className }) {
   return (
     <div className={cn(
       'flex items-center gap-2.5 px-3 py-2.5 min-w-0',
@@ -40,7 +42,14 @@ const KpiCard = memo(function KpiCard({ label, value, sparkData, color = HEX.acc
       className,
     )}>
       <div className="flex-1 min-w-0">
-        <div className="text-2xs font-mono text-text-3 uppercase tracking-wider mb-0.5 truncate">{label}</div>
+        <div className="text-2xs font-mono text-text-3 uppercase tracking-wider mb-0.5 truncate flex items-center gap-1">
+          {label}
+          {hint && (
+            <Tooltip content={<span className="max-w-[220px] block leading-relaxed">{hint}</span>} side="bottom">
+              <HelpCircle size={10} className="text-text-4 hover:text-text-2 cursor-help flex-shrink-0 transition-colors" />
+            </Tooltip>
+          )}
+        </div>
         <div className="text-base font-semibold font-mono text-text-0 tabular-nums leading-none">{value}</div>
       </div>
       <MiniSparkline data={sparkData} color={color} />
@@ -58,6 +67,7 @@ export function KpiStrip({ kpis }) {
           value={kpi.value}
           sparkData={kpi.sparkData}
           color={kpi.color}
+          hint={kpi.hint}
           className={cn(
             'flex-1 basis-[12.5%] min-w-[140px]',
             'border-b border-r border-border',

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

@@ -0,0 +1,55 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { memo } from 'react';
+import { fmtNum, fmtDollar } from '../../lib/format';
+import { HEX } from '../../lib/theme-hex';
+import { ScrollArea } from '../ui/scroll-area';
+
+export const TeamBurnPanel = memo(function TeamBurnPanel({ teams = [] }) {
+  const totalTokens = teams.reduce((s, t) => s + (t.totalTokens || 0), 0);
+  const maxTokens = teams.reduce((m, t) => Math.max(m, t.totalTokens || 0), 0);
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="px-3 pt-2.5 pb-1 flex-shrink-0 flex items-center justify-between">
+        <span className="text-2xs font-mono text-text-3 uppercase tracking-widest">Team Burn</span>
+        <span className="text-2xs font-mono text-text-3">{fmtNum(totalTokens)} total</span>
+      </div>
+      <ScrollArea className="flex-1 min-h-0">
+        {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">
+            {teams.map((t) => {
+              const pct = maxTokens > 0 ? (t.totalTokens / maxTokens) * 100 : 0;
+              return (
+                <div key={t.teamId} className="space-y-1">
+                  <div className="flex items-center justify-between gap-2 min-w-0">
+                    <div className="flex items-center gap-1.5 min-w-0">
+                      <span className="text-xs font-semibold text-text-0 font-sans truncate">{t.teamName}</span>
+                      {t.isDefault && (
+                        <span className="text-[9px] font-mono text-text-3 uppercase tracking-wider">default</span>
+                      )}
+                      <span className="text-2xs font-mono text-text-3 flex-shrink-0">
+                        {t.agentCount} {t.agentCount === 1 ? 'agent' : 'agents'}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 flex-shrink-0 font-mono text-2xs">
+                      <span className="text-text-1">{fmtNum(t.totalTokens)}</span>
+                      <span className="text-text-3">{fmtDollar(t.totalCostUsd)}</span>
+                    </div>
+                  </div>
+                  <div className="h-0.5 bg-surface-2 rounded-sm overflow-hidden">
+                    <div
+                      className="h-full rounded-sm transition-all"
+                      style={{ width: `${pct}%`, background: HEX.accent }}
+                    />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </ScrollArea>
+    </div>
+  );
+});

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

@@ -1,12 +1,12 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { Network, Code2, BarChart3, Puzzle, Users, Box, Newspaper, Settings } from 'lucide-react';
+import { Network, Code2, ChartSpline, Puzzle, Users, Box, Newspaper, Settings } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { Tooltip } from '../ui/tooltip';
 
 const NAV_ITEMS = [
   { id: 'agents',      icon: Network,   label: 'Agents' },
   { id: 'editor',      icon: Code2,     label: 'Editor' },
-  { id: 'dashboard',   icon: BarChart3,  label: 'Dashboard' },
+  { id: 'dashboard',   icon: ChartSpline, label: 'Dashboard' },
   { id: 'marketplace', icon: Puzzle,     label: 'Marketplace' },
   { id: 'models',      icon: Box,       label: 'Models' },
   { id: 'teams',       icon: Users,     label: 'Teams' },
@@ -51,7 +51,7 @@ export function ActivityBar({ activeView, detailPanel, onNavigate, onTogglePanel
           return (
             <Tooltip key={item.id} content={item.label} side="right">
               <button
-                onClick={() => item.panel ? onTogglePanel(item.id) : onNavigate(item.nav ? item.id : item.id)}
+                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',
                   isActive

package/node_modules/@groove-dev/gui/src/components/layout/app-shell.jsx

@@ -9,6 +9,7 @@ import { BreadcrumbBar } from './breadcrumb-bar';
 import { StatusBar } from './status-bar';
 import { DetailPanel } from './detail-panel';
 import { CommandPalette } from './command-palette';
+import { TeamTabBar } from '../../views/agents';
 
 export function AppShell({ children, detailContent, terminalContent }) {
   const activeView = useGrooveStore((s) => s.activeView);
@@ -75,28 +76,32 @@ export function AppShell({ children, detailContent, terminalContent }) {
             }}
           />
 
-          {/* Center: main content + terminal */}
+          {/* Content area (right of activity bar) */}
           <div className="flex-1 flex flex-col min-w-0 min-h-0">
-            {/* Main content — collapses when terminal is maximized */}
-            {!(terminalVisible && terminalFullHeight) && (
-              <main className="flex-1 min-h-0 overflow-hidden relative">
-                {children}
-              </main>
-            )}
+            {activeView === 'agents' && <TeamTabBar />}
 
-            {/* Terminal — self-contained with its own panel, tabs, controls */}
-            {terminalContent}
-          </div>
+            <div className="flex-1 flex min-h-0">
+              {/* Center: main content + terminal */}
+              <div className="flex-1 flex flex-col min-w-0 min-h-0">
+                {!(terminalVisible && terminalFullHeight) && (
+                  <main className="flex-1 min-h-0 overflow-hidden relative">
+                    {children}
+                  </main>
+                )}
+                {terminalContent}
+              </div>
 
-          {showDetail && (
-            <DetailPanel
-              width={detailPanelWidth}
-              onWidthChange={setDetailPanelWidth}
-              onClose={closeDetail}
-            >
-              {detailContent}
-            </DetailPanel>
-          )}
+              {showDetail && (
+                <DetailPanel
+                  width={detailPanelWidth}
+                  onWidthChange={setDetailPanelWidth}
+                  onClose={closeDetail}
+                >
+                  {detailContent}
+                </DetailPanel>
+              )}
+            </div>
+          </div>
         </div>
 
         <StatusBar

package/node_modules/@groove-dev/gui/src/components/layout/command-palette.jsx

@@ -2,7 +2,7 @@
 import { useState, useEffect, useRef, useMemo } from 'react';
 import { useGrooveStore } from '../../stores/groove';
 import {
-  Network, Code2, BarChart3, Puzzle, Users, Plus,
+  Network, Code2, ChartSpline, Puzzle, Users, Plus,
   RotateCw, Skull, MessageSquare, Terminal, Newspaper,
   Search,
 } from 'lucide-react';
@@ -12,7 +12,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 const STATIC_COMMANDS = [
   { id: 'nav:agents',      label: 'Go to Agents',      icon: Network,    category: 'Navigation', action: (s) => { s.setActiveView('agents'); } },
   { id: 'nav:editor',      label: 'Go to Editor',      icon: Code2,      category: 'Navigation', action: (s) => { s.setActiveView('editor'); } },
-  { id: 'nav:dashboard',   label: 'Go to Dashboard',   icon: BarChart3,  category: 'Navigation', action: (s) => { s.setActiveView('dashboard'); } },
+  { id: 'nav:dashboard',   label: 'Go to Dashboard',   icon: ChartSpline, category: 'Navigation', action: (s) => { s.setActiveView('dashboard'); } },
   { id: 'nav:marketplace', label: 'Go to Marketplace', icon: Puzzle,     category: 'Navigation', action: (s) => { s.setActiveView('marketplace'); } },
   { id: 'nav:teams',       label: 'Go to Teams',       icon: Users,      category: 'Navigation', action: (s) => { s.setActiveView('teams'); } },
   { id: 'action:spawn',    label: 'Spawn Agent',       icon: Plus,       category: 'Actions',    action: (s) => { s.openDetail({ type: 'spawn' }); } },