groove-dev 0.22.31 → 0.24.0

package/packages/gui/src/components/dashboard/fleet-panel.jsx

@@ -1,64 +1,132 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { Avatar } from '../ui/avatar';
-import { Badge } from '../ui/badge';
-import { StatusDot } from '../ui/status-dot';
-import { fmtNum, fmtPct } from '../../lib/format';
+import { memo } from 'react';
+import { fmtNum, fmtDollar } from '../../lib/format';
 import { cn } from '../../lib/cn';
+import { statusColor } from '../../lib/status';
 import { ScrollArea } from '../ui/scroll-area';
 
-const STATUS_VARIANT = {
-  running: 'success', starting: 'warning', stopped: 'default',
-  crashed: 'danger', completed: 'accent', killed: 'default',
-};
+const COST_SOURCE_LABEL = { actual: 'ACT', estimated: 'EST', local: 'LOC' };
 
-export function FleetPanel({ agents }) {
-  if (!agents?.length) {
+const AgentRow = memo(function AgentRow({ agent, isRotating }) {
+  const isAlive = agent.status === 'running' || agent.status === 'starting';
+  const contextPct = Math.round((agent.contextUsage || 0) * 100);
+  const sColor = isRotating ? '#c678dd' : statusColor(agent.status);
+  const quality = agent.quality;
+  const successRate = quality?.toolSuccessRate != null ? Math.round(quality.toolSuccessRate * 100) : null;
+
+  return (
+    <div className="flex items-center gap-2 px-3 py-1.5 hover:bg-[#24282f] transition-colors">
+      {/* Status square */}
+      <span className="relative flex-shrink-0 w-[6px] h-[6px]">
+        <span className="absolute inset-0 rounded-sm" style={{ background: sColor }} />
+        {isAlive && (
+          <span
+            className="absolute inset-[-2px] rounded-sm"
+            style={{ background: sColor, opacity: 0.15, animation: 'node-pulse-bar 2s ease-in-out infinite' }}
+          />
+        )}
+      </span>
+
+      {/* Name + role/model */}
+      <div className="flex-1 min-w-0">
+        <div className="text-[11px] font-semibold text-[#e6e6e6] font-sans truncate leading-none">{agent.name}</div>
+        <div className="flex items-center gap-1 mt-0.5">
+          <span className="text-[8px] font-mono text-[#505862] uppercase tracking-wider">{agent.role}</span>
+          <span className="text-[8px] text-[#2a2e36]">/</span>
+          <span className="text-[8px] font-mono text-[#3a3f4b]">{shortModel(agent.model)}</span>
+        </div>
+      </div>
+
+      {/* Tokens + cost */}
+      <div className="text-right flex-shrink-0">
+        <div className="text-[11px] font-mono text-[#bcc2cd] tabular-nums leading-none">{fmtNum(agent.tokens || 0)}</div>
+        {(agent.costUsd || 0) > 0 && (
+          <div className="text-[8px] font-mono text-[#3a3f4b] mt-0.5">{fmtDollar(agent.costUsd)}</div>
+        )}
+      </div>
+
+      {/* Quality / tool success */}
+      {successRate != null && (
+        <span
+          className="text-[7px] font-mono font-bold uppercase px-1 py-px rounded-sm flex-shrink-0"
+          style={{
+            color: successRate >= 90 ? '#4ae168' : successRate >= 70 ? '#e5c07b' : '#e06c75',
+            background: successRate >= 90 ? 'rgba(74,225,104,0.1)' : successRate >= 70 ? 'rgba(229,192,123,0.1)' : 'rgba(224,108,117,0.1)',
+          }}
+        >
+          {successRate}%
+        </span>
+      )}
+
+      {/* Cost source badge */}
+      {agent.costSource && agent.costSource !== 'actual' && (
+        <span className="text-[7px] font-mono text-[#3a3f4b] uppercase tracking-wider flex-shrink-0">
+          {COST_SOURCE_LABEL[agent.costSource] || ''}
+        </span>
+      )}
+
+      {/* Context bar */}
+      <div className="w-12 flex-shrink-0">
+        <div className="flex items-center justify-end gap-1 mb-0.5">
+          <span className="text-[8px] font-mono text-[#505862] tabular-nums">{contextPct}%</span>
+        </div>
+        <div className="h-[2px] bg-[#1a1e25] rounded-full overflow-hidden">
+          <div
+            className="h-full rounded-full transition-all duration-700"
+            style={{
+              width: `${Math.max(contextPct, 1)}%`,
+              background: contextPct > 80 ? '#e06c75' : contextPct > 60 ? '#e5c07b' : isAlive ? '#61afef' : '#333842',
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});
+
+function shortModel(id) {
+  if (!id || id === 'auto' || id === 'default') return 'default';
+  const claude = id.match(/^claude-(opus|sonnet|haiku)-(\d+)-(\d+)/);
+  if (claude) return `${claude[1][0].toUpperCase()}${claude[1].slice(1)} ${claude[2]}.${claude[3]}`;
+  if (id.startsWith('gemini-')) return id.replace('gemini-', 'Gem ').replace('-preview', '');
+  return id.length > 12 ? id.slice(0, 12) + '...' : id;
+}
+
+const FleetPanel = memo(function FleetPanel({ agentBreakdown, rotating = [] }) {
+  if (!agentBreakdown?.length) {
     return (
-      <div className="flex-1 flex items-center justify-center text-xs text-text-4 font-sans p-4">
-        No agents running
+      <div className="flex-1 flex items-center justify-center text-[9px] text-[#3a3f4b] font-mono p-4">
+        No agents
       </div>
     );
   }
 
   // Group by team
   const teams = {};
-  for (const a of agents) {
-    const team = a.teamId || 'Ungrouped';
+  for (const a of agentBreakdown) {
+    const team = a.teamId || 'ungrouped';
     if (!teams[team]) teams[team] = [];
     teams[team].push(a);
   }
 
+  const rotatingSet = new Set(rotating);
+
   return (
     <ScrollArea className="flex-1">
-      <div className="p-3 space-y-4">
+      <div className="py-1">
         {Object.entries(teams).map(([team, members]) => (
           <div key={team}>
-            <div className="text-2xs font-semibold text-text-3 font-sans uppercase tracking-wider mb-2">{team}</div>
-            <div className="space-y-1">
-              {members.map((a) => (
-                <div key={a.id} className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-surface-5 transition-colors">
-                  <StatusDot status={a.status} size="sm" />
-                  <Avatar name={a.name} role={a.role} size="sm" />
-                  <div className="flex-1 min-w-0">
-                    <div className="text-xs text-text-0 font-sans truncate">{a.name}</div>
-                  </div>
-                  <span className="text-2xs font-mono text-text-3">{fmtNum(a.tokensUsed || 0)}</span>
-                  {/* Mini context bar */}
-                  <div className="w-10 h-1 bg-surface-0 rounded-full overflow-hidden">
-                    <div
-                      className="h-full rounded-full"
-                      style={{
-                        width: `${Math.min(a.contextUsage || 0, 100)}%`,
-                        background: (a.contextUsage || 0) >= 80 ? 'var(--color-danger)' : (a.contextUsage || 0) >= 60 ? 'var(--color-warning)' : 'var(--color-success)',
-                      }}
-                    />
-                  </div>
-                </div>
-              ))}
+            <div className="px-3 pt-2 pb-1">
+              <span className="text-[8px] font-mono text-[#3a3f4b] uppercase tracking-widest">{team}</span>
             </div>
+            {members.map((a) => (
+              <AgentRow key={a.id} agent={a} isRotating={rotatingSet.has(a.id)} />
+            ))}
           </div>
         ))}
       </div>
     </ScrollArea>
   );
-}
+});
+
+export { FleetPanel };

package/packages/gui/src/components/dashboard/header-bar.jsx

@@ -1,26 +1,45 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
+import { memo } from 'react';
 import { fmtUptime, timeAgo } from '../../lib/format';
 import { StatusDot } from '../ui/status-dot';
 import { RefreshCw } from 'lucide-react';
 
-export function DashboardHeader({ connected, runningCount, totalCount, uptime, lastFetch }) {
+const DashboardHeader = memo(function DashboardHeader({ connected, runningCount, totalCount, uptime, lastFetch, activeTeam }) {
   return (
-    <div className="flex items-center gap-4 px-4 py-2.5 bg-surface-1 border-b border-border">
-      <h2 className="text-sm font-semibold text-text-0 font-sans">Command Center</h2>
+    <div className="flex items-center gap-4 px-4 py-2 bg-surface-1 border-b border-[#262a32]">
+      <h2 className="text-[12px] font-semibold text-[#e6e6e6] font-sans tracking-wide uppercase">Command Center</h2>
+
+      {activeTeam && (
+        <>
+          <span className="text-[#2a2e36]">/</span>
+          <span className="text-[9px] font-mono text-[#505862]">{activeTeam.name}</span>
+        </>
+      )}
+
       <div className="flex-1" />
 
       {connected && (
-        <div className="flex items-center gap-4 text-2xs text-text-3 font-sans">
-          <span>{runningCount}/{totalCount} agents</span>
-          {uptime > 0 && <span>Up {fmtUptime(uptime)}</span>}
+        <div className="flex items-center gap-3.5 text-[9px] font-mono text-[#505862]">
+          <span>
+            <span className="text-[#8b929e]">{runningCount}</span>
+            <span className="text-[#3a3f4b]">/{totalCount}</span>
+            <span className="ml-1">agents</span>
+          </span>
+          {uptime > 0 && (
+            <span>Up {fmtUptime(uptime)}</span>
+          )}
           {lastFetch > 0 && (
-            <span className="flex items-center gap-1 text-text-4">
-              <RefreshCw size={10} /> {timeAgo(lastFetch)}
+            <span className="flex items-center gap-1 text-[#3a3f4b]">
+              <RefreshCw size={8} />
+              <span>{timeAgo(lastFetch)}</span>
             </span>
           )}
         </div>
       )}
+
       <StatusDot status={connected ? 'running' : 'crashed'} size="sm" />
     </div>
   );
-}
+});
+
+export { DashboardHeader };

package/packages/gui/src/components/dashboard/intel-panel.jsx

@@ -0,0 +1,269 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { memo } from 'react';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/tabs';
+import { ScrollArea } from '../ui/scroll-area';
+import { fmtNum, fmtPct, timeAgo } from '../../lib/format';
+import { cn } from '../../lib/cn';
+import { HEX } from '../../lib/theme-hex';
+import { RotateCw, Brain, Radio } from 'lucide-react';
+
+/* ── Tiny SVG sparkline for inline use ──────────────────────── */
+function TinySparkline({ data, color = HEX.accent, width = 60, height = 16 }) {
+  if (!data || data.length < 2) return <div style={{ width, height }} />;
+  const vals = Array.isArray(data[0]) ? data : data.map((d) => (typeof d === 'number' ? d : d.v));
+  const min = Math.min(...vals);
+  const max = Math.max(...vals);
+  const range = max - min || 1;
+
+  const points = vals.map((v, i) => {
+    const x = (i / (vals.length - 1)) * width;
+    const y = height - ((v - min) / range) * (height - 2) - 1;
+    return `${x},${y}`;
+  }).join(' ');
+
+  return (
+    <svg width={width} height={height} className="flex-shrink-0">
+      <polyline points={points} fill="none" stroke={color} strokeWidth="1" strokeLinejoin="round" strokeOpacity="0.6" />
+    </svg>
+  );
+}
+
+/* ── Savings bar ────────────────────────────────────────────── */
+function SavingsBar({ label, value, total, color }) {
+  const pct = total > 0 ? (value / total) * 100 : 0;
+  return (
+    <div className="space-y-0.5">
+      <div className="flex items-center justify-between text-[9px] font-mono">
+        <span className="text-[#6e7681]">{label}</span>
+        <span className="text-[#8b929e] tabular-nums">{fmtNum(value)}</span>
+      </div>
+      <div className="h-[2px] bg-[#1a1e25] rounded-full overflow-hidden">
+        <div
+          className="h-full rounded-full transition-all duration-500"
+          style={{ width: `${Math.min(pct, 100)}%`, background: color }}
+        />
+      </div>
+    </div>
+  );
+}
+
+/* ── Rotation Tab ───────────────────────────────────────────── */
+function RotationTab({ tokens, rotation }) {
+  const savings = tokens?.savings || {};
+  const totalSaved = savings.total || 0;
+  const totalUsed = tokens?.totalTokens || 0;
+  const hypothetical = totalUsed + totalSaved;
+
+  return (
+    <ScrollArea className="flex-1">
+      <div className="p-3 space-y-4">
+        {/* Big numbers */}
+        <div className="flex gap-4">
+          <div>
+            <div className="text-[8px] font-mono text-[#3a3f4b] uppercase tracking-widest mb-0.5">Rotations</div>
+            <div className="text-[18px] font-mono font-semibold text-[#bcc2cd] tabular-nums leading-none">
+              {rotation?.totalRotations || 0}
+            </div>
+          </div>
+          <div>
+            <div className="text-[8px] font-mono text-[#3a3f4b] uppercase tracking-widest mb-0.5">Saved</div>
+            <div className="text-[18px] font-mono font-semibold text-[#4ae168] tabular-nums leading-none">
+              {fmtNum(totalSaved)}
+            </div>
+            {hypothetical > 0 && (
+              <div className="text-[8px] font-mono text-[#505862] mt-0.5">
+                {fmtPct((totalSaved / hypothetical) * 100)} of total
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Savings breakdown */}
+        <div className="space-y-2">
+          <SavingsBar label="Rotation" value={savings.fromRotation || 0} total={hypothetical} color={HEX.accent} />
+          <SavingsBar label="Conflict prevention" value={savings.fromConflictPrevention || 0} total={hypothetical} color={HEX.purple} />
+          <SavingsBar label="Cold-start skip" value={savings.fromColdStartSkip || 0} total={hypothetical} color={HEX.info} />
+        </div>
+
+        {/* Rotation history */}
+        {rotation?.history?.length > 0 && (
+          <div>
+            <div className="text-[8px] font-mono text-[#3a3f4b] uppercase tracking-widest mb-1.5">Recent</div>
+            <div className="space-y-1">
+              {rotation.history.slice(-8).reverse().map((r, i) => (
+                <div key={i} className="flex items-center gap-2 text-[9px] font-mono px-2 py-1 bg-[#1a1e25] rounded">
+                  <span className="text-[#8b929e] font-medium capitalize truncate flex-1">{r.agentName || r.role}</span>
+                  <span className="text-[#505862] tabular-nums">{fmtPct((r.contextUsage || 0) * 100)}</span>
+                  <span className="text-[#3a3f4b]">{timeAgo(r.timestamp)}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </ScrollArea>
+  );
+}
+
+/* ── Adaptive Tab ───────────────────────────────────────────── */
+function AdaptiveTab({ adaptive }) {
+  if (!adaptive?.length) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-[9px] text-[#3a3f4b] font-mono p-4">
+        No adaptive profiles
+      </div>
+    );
+  }
+
+  return (
+    <ScrollArea className="flex-1">
+      <div className="p-3 space-y-3">
+        {adaptive.map((p) => (
+          <div key={p.key} className="bg-[#1a1e25] rounded px-2.5 py-2 space-y-1.5">
+            {/* Profile header */}
+            <div className="flex items-center gap-2">
+              <span className="text-[9px] font-mono text-[#8b929e] flex-1 truncate">{p.key}</span>
+              <span className="text-[10px] font-mono font-semibold text-[#bcc2cd] tabular-nums">
+                {fmtPct(p.threshold * 100)}
+              </span>
+              <span
+                className={cn(
+                  'text-[7px] font-mono font-bold uppercase px-1 py-px rounded-sm',
+                  p.converged
+                    ? 'text-[#4ae168] bg-[rgba(74,225,104,0.1)]'
+                    : 'text-[#505862] bg-[rgba(80,88,98,0.1)]',
+                )}
+              >
+                {p.converged ? 'CONV' : `${p.adjustments} adj`}
+              </span>
+            </div>
+
+            {/* Threshold drift sparkline */}
+            {p.thresholdHistory?.length > 1 && (
+              <div className="flex items-center gap-2">
+                <span className="text-[7px] font-mono text-[#3a3f4b] uppercase tracking-wider">Drift</span>
+                <TinySparkline
+                  data={p.thresholdHistory.map((h) => h.v)}
+                  color={p.converged ? HEX.success : HEX.accent}
+                  width={80}
+                  height={14}
+                />
+              </div>
+            )}
+
+            {/* Quality scores sparkline */}
+            {p.recentScores?.length > 1 && (
+              <div className="flex items-center gap-2">
+                <span className="text-[7px] font-mono text-[#3a3f4b] uppercase tracking-wider">Quality</span>
+                <TinySparkline
+                  data={p.recentScores}
+                  color={HEX.warning}
+                  width={80}
+                  height={14}
+                />
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  );
+}
+
+/* ── Journalist Tab ─────────────────────────────────────────── */
+function JournalistTab({ journalist }) {
+  if (!journalist) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-[9px] text-[#3a3f4b] font-mono p-4">
+        Journalist inactive
+      </div>
+    );
+  }
+
+  return (
+    <ScrollArea className="flex-1">
+      <div className="p-3 space-y-3">
+        {/* Status row */}
+        <div className="flex items-center gap-3">
+          <div>
+            <div className="text-[8px] font-mono text-[#3a3f4b] uppercase tracking-widest mb-0.5">Cycles</div>
+            <div className="text-[16px] font-mono font-semibold text-[#bcc2cd] tabular-nums leading-none">
+              {journalist.cycleCount || 0}
+            </div>
+          </div>
+          {journalist.lastCycleAt && (
+            <div>
+              <div className="text-[8px] font-mono text-[#3a3f4b] uppercase tracking-widest mb-0.5">Last</div>
+              <div className="text-[10px] font-mono text-[#6e7681]">{timeAgo(journalist.lastCycleAt)}</div>
+            </div>
+          )}
+          {journalist.synthesizing && (
+            <span className="text-[7px] font-mono font-bold text-[#33afbc] uppercase tracking-wider animate-pulse">
+              Synthesizing
+            </span>
+          )}
+        </div>
+
+        {/* Last summary */}
+        {journalist.lastSummary && (
+          <div>
+            <div className="text-[8px] font-mono text-[#3a3f4b] uppercase tracking-widest mb-1">Summary</div>
+            <div className="text-[9px] font-sans text-[#6e7681] leading-relaxed bg-[#1a1e25] rounded px-2.5 py-2 max-h-32 overflow-y-auto">
+              {journalist.lastSummary}
+            </div>
+          </div>
+        )}
+
+        {/* Recent history */}
+        {journalist.recentHistory?.length > 0 && (
+          <div>
+            <div className="text-[8px] font-mono text-[#3a3f4b] uppercase tracking-widest mb-1.5">History</div>
+            <div className="space-y-1">
+              {journalist.recentHistory.slice().reverse().map((h, i) => (
+                <div key={i} className="flex items-center gap-2 text-[9px] font-mono px-2 py-1 bg-[#1a1e25] rounded">
+                  <span className="text-[#505862]">#{h.cycle}</span>
+                  <span className="text-[#6e7681] flex-1 truncate">{h.agentCount} agents</span>
+                  <span className="text-[#3a3f4b]">{timeAgo(h.timestamp)}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </ScrollArea>
+  );
+}
+
+/* ── Intel Panel (main export) ──────────────────────────────── */
+const IntelPanel = memo(function IntelPanel({ tokens, rotation, adaptive, journalist }) {
+  return (
+    <Tabs defaultValue="rotation" className="flex flex-col h-full">
+      <TabsList className="flex-shrink-0 px-1 border-b border-[#262a32]">
+        <TabsTrigger value="rotation" className="text-[9px] px-2.5 py-1.5 gap-1">
+          <RotateCw size={10} />
+          Rotation
+        </TabsTrigger>
+        <TabsTrigger value="adaptive" className="text-[9px] px-2.5 py-1.5 gap-1">
+          <Brain size={10} />
+          Adaptive
+        </TabsTrigger>
+        <TabsTrigger value="journalist" className="text-[9px] px-2.5 py-1.5 gap-1">
+          <Radio size={10} />
+          Journalist
+        </TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="rotation" className="flex-1 min-h-0 overflow-hidden">
+        <RotationTab tokens={tokens} rotation={rotation} />
+      </TabsContent>
+      <TabsContent value="adaptive" className="flex-1 min-h-0 overflow-hidden">
+        <AdaptiveTab adaptive={adaptive} />
+      </TabsContent>
+      <TabsContent value="journalist" className="flex-1 min-h-0 overflow-hidden">
+        <JournalistTab journalist={journalist} />
+      </TabsContent>
+    </Tabs>
+  );
+});
+
+export { IntelPanel };

package/packages/gui/src/components/dashboard/kpi-card.jsx

@@ -1,8 +1,9 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
+import { memo } from 'react';
 import { cn } from '../../lib/cn';
 import { HEX } from '../../lib/theme-hex';
 
-function MiniSparkline({ data, color = HEX.accent, width = 80, height = 24 }) {
+function MiniSparkline({ data, color = HEX.accent, width = 72, height = 22 }) {
   if (!data || data.length < 2) return <div style={{ width, height }} />;
   const vals = data.map((d) => d.v);
   const min = Math.min(...vals);
@@ -15,31 +16,56 @@ function MiniSparkline({ data, color = HEX.accent, width = 80, height = 24 }) {
     return `${x},${y}`;
   }).join(' ');
 
+  const gradId = `kpi-${color.replace('#', '')}`;
+
   return (
     <svg width={width} height={height} className="flex-shrink-0">
       <defs>
-        <linearGradient id={`kpi-${color}`} x1="0" y1="0" x2="0" y2="1">
-          <stop offset="0%" stopColor={color} stopOpacity="0.3" />
+        <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor={color} stopOpacity="0.15" />
           <stop offset="100%" stopColor={color} stopOpacity="0" />
         </linearGradient>
       </defs>
-      <polygon points={`0,${height} ${points} ${width},${height}`} fill={`url(#kpi-${color})`} />
-      <polyline points={points} fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" />
+      <polygon points={`0,${height} ${points} ${width},${height}`} fill={`url(#${gradId})`} />
+      <polyline points={points} fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" strokeOpacity="0.7" />
     </svg>
   );
 }
 
-export function KpiCard({ label, value, sparkData, color = HEX.accent, className }) {
+const KpiCard = memo(function KpiCard({ label, value, sparkData, color = HEX.accent, className }) {
   return (
     <div className={cn(
-      'flex items-center gap-3 px-4 py-3 bg-surface-1 border-b border-border-subtle min-w-0',
+      'flex items-center gap-2.5 px-3 py-2.5 min-w-0',
+      'bg-surface-1',
       className,
     )}>
       <div className="flex-1 min-w-0">
-        <div className="text-2xs text-text-3 font-sans uppercase tracking-wider mb-0.5 truncate">{label}</div>
-        <div className="text-lg font-semibold font-mono text-text-0 tabular-nums">{value}</div>
+        <div className="text-[8px] font-mono text-[#3a3f4b] uppercase tracking-widest mb-0.5 truncate">{label}</div>
+        <div className="text-[15px] font-semibold font-mono text-[#bcc2cd] tabular-nums leading-none">{value}</div>
       </div>
       <MiniSparkline data={sparkData} color={color} />
     </div>
   );
+});
+
+export function KpiStrip({ kpis }) {
+  return (
+    <div className="flex flex-wrap" style={{ background: '#1a1e25' }}>
+      {kpis.map((kpi, i) => (
+        <KpiCard
+          key={kpi.label}
+          label={kpi.label}
+          value={kpi.value}
+          sparkData={kpi.sparkData}
+          color={kpi.color}
+          className={cn(
+            'flex-1 basis-[12.5%] min-w-[140px]',
+            'border-b border-r border-[#262a32]',
+          )}
+        />
+      ))}
+    </div>
+  );
 }
+
+export { KpiCard };