groove-dev 0.26.39 → 0.27.1

package/packages/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/packages/gui/src/components/marketplace/marketplace-card.jsx

@@ -5,7 +5,7 @@ import { Badge } from '../ui/badge';
 import { fmtNum } from '../../lib/format';
 
 // Well-known integration logos via CDN (simple-icons on cdn.simpleicons.org)
-const INTEGRATION_LOGOS = {
+export const INTEGRATION_LOGOS = {
   'google-workspace': 'https://cdn.simpleicons.org/google/white',
   github:      'https://cdn.simpleicons.org/github/white',
   stripe:      'https://cdn.simpleicons.org/stripe/635BFF',
@@ -21,6 +21,24 @@ const INTEGRATION_LOGOS = {
   linear:      'https://cdn.simpleicons.org/linear/5E6AD2',
   'brave-search': 'https://cdn.simpleicons.org/brave/FB542B',
   'home-assistant': 'https://cdn.simpleicons.org/homeassistant/18BCF2',
+  sentry:      'https://cdn.simpleicons.org/sentry/362D59',
+  elevenlabs:  'https://cdn.simpleicons.org/elevenlabs/white',
+  hubspot:     'https://cdn.simpleicons.org/hubspot/FF7A59',
+  jira:        'https://cdn.simpleicons.org/jira/0052CC',
+  sendgrid:    'https://cdn.simpleicons.org/sendgrid/1A82E2',
+  resend:      'https://cdn.simpleicons.org/resend/white',
+  replicate:   'https://cdn.simpleicons.org/replicate/white',
+  vercel:      'https://cdn.simpleicons.org/vercel/white',
+  supabase:    'https://cdn.simpleicons.org/supabase/3FCF8E',
+  mixpanel:    'https://cdn.simpleicons.org/mixpanel/7856FF',
+  datadog:     'https://cdn.simpleicons.org/datadog/632CA6',
+  airtable:    'https://cdn.simpleicons.org/airtable/18BFFF',
+  zendesk:     'https://cdn.simpleicons.org/zendesk/03363D',
+  intercom:    'https://cdn.simpleicons.org/intercom/6AFDEF',
+  twilio:      'https://cdn.simpleicons.org/twilio/F22F46',
+  telnyx:      'https://cdn.simpleicons.org/telnyx/00C08B',
+  aws:         'https://cdn.simpleicons.org/amazonaws/FF9900',
+  plaid:       'https://cdn.simpleicons.org/plaid/white',
 };
 
 function ItemIcon({ item, size = 40 }) {
@@ -64,7 +82,7 @@ function ItemIcon({ item, size = 40 }) {
   );
 }
 
-export function MarketplaceCard({ item, onClick, className }) {
+export function MarketplaceCard({ item, onClick, className, statusBadge }) {
   const installed = item.installed;
 
   return (
@@ -109,11 +127,11 @@ export function MarketplaceCard({ item, onClick, className }) {
           </span>
         )}
         <span className="flex-1" />
-        {installed && (
+        {statusBadge || (installed && (
           <Badge variant="accent" className="text-2xs">
             {item._installedCount ? `${item._installedCount} active` : 'Installed'}
           </Badge>
-        )}
+        ))}
       </div>
     </button>
   );

package/packages/gui/src/lib/format.js

@@ -42,9 +42,3 @@ export function timeAgo(ts) {
   if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
   return `${Math.floor(diff / 86400)}d ago`;
 }
-
-export function formatDuration(ms) {
-  if (!ms) return '0s';
-  const s = Math.floor(ms / 1000);
-  return fmtUptime(s);
-}

package/packages/gui/src/lib/hooks/use-dashboard.js

@@ -8,6 +8,8 @@ export function useDashboard() {
   const agents = useGrooveStore((s) => s.agents);
 
   const [data, setData] = useState(null);
+  const [teamBurn, setTeamBurn] = useState([]);
+  const [memory, setMemory] = useState({ constraints: [], discoveries: [], roles: [], specializations: null });
   const [loading, setLoading] = useState(true);
   const [kpiHistory, setKpiHistory] = useState({
     tokens: [], cost: [], saved: [], efficiency: [],
@@ -21,9 +23,23 @@ export function useDashboard() {
 
     async function fetch() {
       try {
-        const d = await api.get('/dashboard');
+        const [d, teams, constraints, discoveries, chainRoles, specs] = await Promise.all([
+          api.get('/dashboard'),
+          api.get('/tokens/by-team').catch(() => ({ teams: [] })),
+          api.get('/memory/constraints').catch(() => ({ constraints: [] })),
+          api.get('/memory/discoveries?limit=20').catch(() => ({ discoveries: [] })),
+          api.get('/memory/handoff-chain').catch(() => ({ roles: [] })),
+          api.get('/memory/specializations').catch(() => ({ perAgent: {}, perProjectRole: {} })),
+        ]);
         if (!alive) return;
         setData(d);
+        setTeamBurn(teams?.teams || []);
+        setMemory({
+          constraints: constraints?.constraints || [],
+          discoveries: discoveries?.discoveries || [],
+          roles: chainRoles?.roles || [],
+          specializations: specs || { perAgent: {}, perProjectRole: {} },
+        });
         setLoading(false);
         lastFetch.current = Date.now();
 
@@ -70,5 +86,6 @@ export function useDashboard() {
     data, loading, agents, connected, kpiHistory,
     lastFetch: lastFetch.current,
     agentBreakdown, routing, rotation, adaptive, journalist, rotating,
+    teamBurn, memory,
   };
 }

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

@@ -58,8 +58,6 @@ export const useGrooveStore = create((set, get) => ({
   chatHistory: loadJSON('groove:chatHistory'),
   chatInputs: {},   // Per-agent draft input text — persists across tab switches
   tokenTimeline: {},
-  dashTelemetry: {},
-  ccChartTimeline: [],
 
   // ── Approvals ─────────────────────────────────────────────
   pendingApprovals: [],
@@ -251,25 +249,52 @@ export const useGrooveStore = create((set, get) => ({
           break;
 
         case 'rotation:start':
-          get().addToast('info', `Rotating ${msg.agentName}...`);
+          // Silent — rotation must feel seamless to the user.
+          // Visibility is available in dashboard Intel panel for curious users.
           break;
 
         case 'rotation:complete': {
-          get().addToast('success', `Rotated ${msg.agentName}`, `Saved ${msg.tokensSaved} tokens`);
-          const panel = get().detailPanel;
-          if (panel?.type === 'agent' && panel.agentId === msg.oldAgentId && msg.newAgentId) {
-            set((s) => {
-              const chatHistory = { ...s.chatHistory };
-              const tokenTimeline = { ...s.tokenTimeline };
-              const activityLog = { ...s.activityLog };
-              if (chatHistory[msg.oldAgentId]?.length) chatHistory[msg.newAgentId] = [...chatHistory[msg.oldAgentId]];
-              if (tokenTimeline[msg.oldAgentId]?.length) tokenTimeline[msg.newAgentId] = [...tokenTimeline[msg.oldAgentId]];
-              if (activityLog[msg.oldAgentId]?.length) activityLog[msg.newAgentId] = [...activityLog[msg.oldAgentId]];
+          // Silent toast — seamless infinite sessions are the whole promise.
+          // Migrate all agent-keyed state to the new ID ALWAYS, not just when
+          // the old agent's panel is open. Chat history, activity log, token
+          // timeline all carry forward so no state is orphaned.
+          if (!msg.newAgentId || !msg.oldAgentId) break;
+          set((s) => {
+            const chatHistory = { ...s.chatHistory };
+            const tokenTimeline = { ...s.tokenTimeline };
+            const activityLog = { ...s.activityLog };
+            const chatInputs = { ...s.chatInputs };
+            if (chatHistory[msg.oldAgentId]?.length) {
+              chatHistory[msg.newAgentId] = [...chatHistory[msg.oldAgentId]];
+              delete chatHistory[msg.oldAgentId];
+            }
+            if (tokenTimeline[msg.oldAgentId]?.length) {
+              tokenTimeline[msg.newAgentId] = [...tokenTimeline[msg.oldAgentId]];
+              delete tokenTimeline[msg.oldAgentId];
+            }
+            if (activityLog[msg.oldAgentId]?.length) {
+              activityLog[msg.newAgentId] = [...activityLog[msg.oldAgentId]];
+              delete activityLog[msg.oldAgentId];
+            }
+            if (chatInputs[msg.oldAgentId]) {
+              chatInputs[msg.newAgentId] = chatInputs[msg.oldAgentId];
+              delete chatInputs[msg.oldAgentId];
+            }
+            // Only redirect the detail panel if the user was actively viewing
+            // the old agent. Otherwise leave their current view alone.
+            const panel = s.detailPanel;
+            let detailPanel = panel;
+            let teamDetailPanels = s.teamDetailPanels;
+            if (panel?.type === 'agent' && panel.agentId === msg.oldAgentId) {
               const newPanel = { type: 'agent', agentId: msg.newAgentId };
+              detailPanel = newPanel;
               const tid = get().activeTeamId;
-              return { chatHistory, tokenTimeline, activityLog, detailPanel: newPanel, teamDetailPanels: { ...s.teamDetailPanels, [tid]: newPanel } };
-            });
-          }
+              teamDetailPanels = { ...s.teamDetailPanels, [tid]: newPanel };
+            }
+            // Persist the migration to localStorage so it survives a reload
+            try { localStorage.setItem('groove:chatHistory', JSON.stringify(chatHistory)); } catch {}
+            return { chatHistory, tokenTimeline, activityLog, chatInputs, detailPanel, teamDetailPanels };
+          });
           break;
         }
 

package/packages/gui/src/views/dashboard.jsx

@@ -8,6 +8,7 @@ import { TokenChart } from '../components/dashboard/token-chart';
 import { CacheRing } from '../components/dashboard/cache-ring';
 import { RoutingChart } from '../components/dashboard/routing-chart';
 import { IntelPanel } from '../components/dashboard/intel-panel';
+import { TeamBurnPanel } from '../components/dashboard/team-burn-panel';
 import { ActivityFeed } from '../components/dashboard/activity-feed';
 import { Skeleton } from '../components/ui/skeleton';
 import { HEX } from '../lib/theme-hex';
@@ -34,7 +35,7 @@ function DashboardSkeleton() {
 export default function DashboardView() {
   const {
     data, loading, agents, connected, kpiHistory, lastFetch,
-    agentBreakdown, routing, rotation, adaptive, journalist, rotating,
+    agentBreakdown, routing, rotation, adaptive, journalist, rotating, teamBurn, memory,
   } = useDashboard();
 
   const teams = useGrooveStore((s) => s.teams);
@@ -72,6 +73,7 @@ export default function DashboardView() {
     totalTurns: rawTokens.totalTurns || 0,
     agentCount: rawTokens.agentCount || 0,
     savings: rawTokens.savings || {},
+    internalOverhead: rawTokens.internalOverhead || { tokens: 0, costUsd: 0, components: {} },
   };
 
   const ioRatio = tokens.totalOutputTokens > 0 ? (tokens.totalInputTokens / tokens.totalOutputTokens).toFixed(1) : '—';
@@ -145,15 +147,20 @@ export default function DashboardView() {
           <FleetPanel agentBreakdown={agentBreakdown} rotating={rotating} teams={teams} />
         </div>
 
-        <div className="col-span-2 min-w-0 min-h-0 overflow-hidden bg-surface-1 flex flex-col border-t border-l border-border">
+        <div className="min-w-0 min-h-0 overflow-hidden bg-surface-1 flex flex-col border-t border-l border-border">
           <IntelPanel
             tokens={tokens}
             rotation={rotation}
             adaptive={adaptive}
             journalist={journalist}
             agentBreakdown={agentBreakdown}
+            memory={memory}
           />
         </div>
+
+        <div className="min-w-0 min-h-0 overflow-hidden bg-surface-1 flex flex-col border-t border-l border-border">
+          <TeamBurnPanel teams={teamBurn} />
+        </div>
       </div>
 
       <div className="flex-shrink-0 bg-surface-1 border-t border-border">

package/packages/gui/src/views/marketplace.jsx

@@ -383,15 +383,24 @@ function MyLibrary() {
   const authenticated = useGrooveStore((s) => s.marketplaceAuthenticated);
   const login = useGrooveStore((s) => s.marketplaceLogin);
   const [purchases, setPurchases] = useState([]);
-  const [installed, setInstalled] = useState([]);
+  const [installedSkills, setInstalledSkills] = useState([]);
+  const [installedIntegrations, setInstalledIntegrations] = useState([]);
   const [loading, setLoading] = useState(true);
-  const [busyId, setBusyId] = useState(null);
+  const [libraryFilter, setLibraryFilter] = useState('all');
+  const [librarySearch, setLibrarySearch] = useState('');
+  const [selectedSkill, setSelectedSkill] = useState(null);
+  const [wizardIntegration, setWizardIntegration] = useState(null);
+  const [showWizard, setShowWizard] = useState(false);
   const toast = useToast();
   const fileRef = useRef(null);
 
   const refreshInstalled = async () => {
-    const data = await api.get('/skills/installed');
-    setInstalled(Array.isArray(data) ? data : data.skills || []);
+    const [skillsData, intData] = await Promise.all([
+      api.get('/skills/installed').catch(() => []),
+      api.get('/integrations/installed').catch(() => []),
+    ]);
+    setInstalledSkills(Array.isArray(skillsData) ? skillsData : skillsData.skills || []);
+    setInstalledIntegrations(Array.isArray(intData) ? intData : intData.integrations || []);
   };
 
   useEffect(() => {
@@ -399,32 +408,14 @@ function MyLibrary() {
     Promise.all([
       authenticated ? api.get('/auth/purchases').then((d) => d.purchases || []).catch(() => []) : Promise.resolve([]),
       api.get('/skills/installed').then((d) => Array.isArray(d) ? d : d.skills || []).catch(() => []),
-    ]).then(([p, i]) => {
+      api.get('/integrations/installed').then((d) => Array.isArray(d) ? d : d.integrations || []).catch(() => []),
+    ]).then(([p, s, i]) => {
       setPurchases(p);
-      setInstalled(i);
+      setInstalledSkills(s);
+      setInstalledIntegrations(i);
     }).finally(() => setLoading(false));
   }, [authenticated]);
 
-  async function handleUpdate(s) {
-    setBusyId(s.id);
-    try {
-      await api.post(`/skills/${s.id}/update`);
-      toast.success(`${s.name || s.id} updated`);
-      await refreshInstalled();
-    } catch (err) { toast.error('Update failed', err.message); }
-    setBusyId(null);
-  }
-
-  async function handleUninstall(s) {
-    setBusyId(s.id);
-    try {
-      await api.delete(`/skills/${s.id}`);
-      toast.success(`${s.name || s.id} uninstalled`);
-      await refreshInstalled();
-    } catch (err) { toast.error('Uninstall failed', err.message); }
-    setBusyId(null);
-  }
-
   async function handleImport(e) {
     const file = e.target.files?.[0];
     if (!file) return;
@@ -440,6 +431,35 @@ function MyLibrary() {
     e.target.value = '';
   }
 
+  if (selectedSkill) {
+    return <SkillDetail skill={selectedSkill} onBack={() => setSelectedSkill(null)} />;
+  }
+
+  const searchLower = librarySearch.toLowerCase();
+  const filteredSkills = (libraryFilter === 'all' || libraryFilter === 'skills')
+    ? installedSkills.filter((s) => !searchLower || (s.name || s.id || '').toLowerCase().includes(searchLower) || (s.description || '').toLowerCase().includes(searchLower))
+    : [];
+  const filteredIntegrations = (libraryFilter === 'all' || libraryFilter === 'integrations')
+    ? installedIntegrations.filter((i) => !searchLower || (i.name || i.id || '').toLowerCase().includes(searchLower) || (i.description || '').toLowerCase().includes(searchLower))
+    : [];
+
+  const allItems = [
+    ...filteredSkills.map((s) => ({ ...s, _type: 'skill' })),
+    ...filteredIntegrations.map((i) => ({ ...i, _type: 'integration' })),
+  ];
+
+  const filters = [
+    { id: 'all', label: 'All' },
+    { id: 'skills', label: 'Skills' },
+    { id: 'integrations', label: 'Integrations' },
+  ];
+
+  const emptyMessages = {
+    all: 'No skills or integrations installed yet. Visit the Marketplace to get started.',
+    skills: 'No skills installed.',
+    integrations: 'No integrations installed.',
+  };
+
   if (loading) {
     return (
       <div className="p-5 space-y-3">
@@ -450,9 +470,28 @@ function MyLibrary() {
 
   return (
     <ScrollArea className="h-full">
-      <div className="px-5 py-4 space-y-6">
-        {/* Import button */}
-        <div className="flex items-center gap-3">
+      <div className="px-5 py-4 space-y-5">
+        {/* Search + filter pills + import */}
+        <div className="flex items-center gap-3 flex-wrap">
+          <div className="w-72">
+            <SearchBar value={librarySearch} onChange={setLibrarySearch} placeholder="Search library..." />
+          </div>
+          <div className="flex items-center gap-1">
+            {filters.map((f) => (
+              <button
+                key={f.id}
+                onClick={() => setLibraryFilter(f.id)}
+                className={`px-3 py-1.5 text-xs font-semibold font-sans rounded-full cursor-pointer select-none transition-colors ${
+                  libraryFilter === f.id
+                    ? 'bg-accent/15 text-accent border border-accent/25'
+                    : 'text-text-3 hover:text-text-1 border border-transparent hover:border-border-subtle'
+                }`}
+              >
+                {f.label}
+              </button>
+            ))}
+          </div>
+          <div className="flex-1" />
           <input ref={fileRef} type="file" accept=".md" onChange={handleImport} className="hidden" />
           <Button
             variant="secondary"
@@ -461,9 +500,9 @@ function MyLibrary() {
             className="gap-1.5"
           >
             <Upload size={13} />
-            Import .md Skill
+            Import .md
           </Button>
-          <span className="text-2xs text-text-4 font-sans">Drop a markdown skill file to install locally</span>
+          <span className="text-2xs text-text-4 font-mono flex-shrink-0">{allItems.length}</span>
         </div>
 
         {/* Purchases */}
@@ -507,53 +546,40 @@ function MyLibrary() {
           </div>
         )}
 
-        {/* Installed Skills */}
-        <div>
-          <h3 className="text-xs font-semibold text-text-2 font-sans uppercase tracking-wider mb-3 flex items-center gap-1.5">
-            <Package size={12} />
-            Installed ({installed.length})
-          </h3>
-          {installed.length === 0 ? (
-            <div className="bg-surface-1 border border-border-subtle rounded-md px-4 py-6 text-center">
-              <Download size={20} className="mx-auto text-text-4 mb-2" />
-              <p className="text-xs text-text-3 font-sans">No skills installed — browse the Skills tab or import a .md file</p>
-            </div>
-          ) : (
-            <div className="space-y-1.5">
-              {installed.map((s) => (
-                <div key={s.id} className="flex items-center gap-3 px-3 py-2.5 rounded-md bg-surface-1 border border-border-subtle group">
-                  <div className="w-8 h-8 rounded-md bg-accent/10 flex items-center justify-center text-sm flex-shrink-0">
-                    {s.icon || s.name?.[0]?.toUpperCase() || '?'}
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <div className="text-xs font-semibold text-text-0 font-sans truncate">{s.name || s.id}</div>
-                    <div className="text-2xs text-text-3 font-sans truncate">{s.description || s.category || 'local skill'}</div>
-                  </div>
-                  <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                    <button
-                      onClick={() => handleUpdate(s)}
-                      disabled={busyId === s.id}
-                      title="Pull latest version"
-                      className="p-1.5 rounded text-text-3 hover:text-accent hover:bg-accent/10 cursor-pointer transition-colors disabled:opacity-50"
-                    >
-                      <RefreshCw size={12} className={busyId === s.id ? 'animate-spin' : ''} />
-                    </button>
-                    <button
-                      onClick={() => handleUninstall(s)}
-                      disabled={busyId === s.id}
-                      title="Uninstall"
-                      className="p-1.5 rounded text-text-3 hover:text-error hover:bg-error/10 cursor-pointer transition-colors disabled:opacity-50"
-                    >
-                      <Trash2 size={12} />
-                    </button>
-                  </div>
-                  <Badge variant="accent" className="text-2xs flex-shrink-0">Installed</Badge>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
+        {/* Card grid */}
+        {allItems.length > 0 ? (
+          <div className="grid gap-3" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))' }}>
+            {allItems.map((item) => item._type === 'skill' ? (
+              <MarketplaceCard
+                key={`skill-${item.id}`}
+                item={{ ...item, installed: true }}
+                onClick={() => setSelectedSkill(item)}
+              />
+            ) : (
+              <MarketplaceCard
+                key={`int-${item.id}`}
+                item={{ ...item, installed: true }}
+                onClick={() => { setWizardIntegration(item); setShowWizard(true); }}
+                statusBadge={
+                  <Badge variant={item.configured ? 'success' : 'warning'} className="text-2xs">
+                    {item.configured ? 'Active' : 'Not configured'}
+                  </Badge>
+                }
+              />
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-16 text-text-4 font-sans text-sm">
+            {emptyMessages[libraryFilter]}
+          </div>
+        )}
       </div>
+
+      <IntegrationWizard
+        integration={wizardIntegration}
+        open={showWizard}
+        onClose={() => { setShowWizard(false); setWizardIntegration(null); refreshInstalled(); }}
+      />
     </ScrollArea>
   );
 }