groove-dev 0.27.142 → 0.27.144

package/packages/gui/src/components/dashboard/activity-feed.jsx

@@ -13,11 +13,11 @@ const ICONS = {
 };
 
 const ICON_COLORS = {
-  spawn: 'text-accent',
-  complete: 'text-success',
+  spawn: 'text-text-2',
+  complete: 'text-text-2',
   crash: 'text-danger',
   kill: 'text-text-3',
-  rotate: 'text-purple',
+  rotate: 'text-text-2',
   error: 'text-danger',
 };
 

package/packages/gui/src/components/dashboard/cache-ring.jsx

@@ -1,6 +1,6 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useRef, useEffect, memo } from 'react';
-import { HEX } from '../../lib/theme-hex';
+import { HEX, hexAlpha } from '../../lib/theme-hex';
 import { fmtNum } from '../../lib/format';
 
 const CacheRing = memo(function CacheRing({ cacheRead = 0, cacheCreation = 0, totalInput = 0, size = 140 }) {
@@ -47,7 +47,7 @@ const CacheRing = memo(function CacheRing({ cacheRead = 0, cacheCreation = 0, to
         const segEnd = startAngle + sweep * readPct;
         ctx.beginPath();
         ctx.arc(cx, cy, radius, startAngle, segEnd);
-        ctx.strokeStyle = HEX.accent;
+        ctx.strokeStyle = HEX.text0;
         ctx.lineWidth = strokeWidth;
         ctx.lineCap = 'round';
         ctx.stroke();
@@ -58,7 +58,7 @@ const CacheRing = memo(function CacheRing({ cacheRead = 0, cacheCreation = 0, to
         const segEnd = segStart + sweep * createPct;
         ctx.beginPath();
         ctx.arc(cx, cy, radius, segStart, segEnd);
-        ctx.strokeStyle = HEX.purple;
+        ctx.strokeStyle = HEX.text3;
         ctx.lineWidth = strokeWidth;
         ctx.lineCap = 'butt';
         ctx.stroke();
@@ -85,8 +85,8 @@ const CacheRing = memo(function CacheRing({ cacheRead = 0, cacheCreation = 0, to
         style={{ width: size, height: size }}
       />
       <div className="w-full mt-3 space-y-1.5 max-w-[160px]">
-        <StatRow color={HEX.accent} label="Read" value={fmtNum(cacheRead)} />
-        <StatRow color={HEX.purple} label="Create" value={fmtNum(cacheCreation)} />
+        <StatRow color={HEX.text0} label="Read" value={fmtNum(cacheRead)} />
+        <StatRow color={HEX.text3} label="Create" value={fmtNum(cacheCreation)} />
         <StatRow color={HEX.surface5} label="Miss" value={fmtNum(Math.max(totalInput - cacheRead - cacheCreation, 0))} />
       </div>
     </div>

package/packages/gui/src/components/dashboard/context-gauges.jsx

@@ -8,10 +8,8 @@ const RADIUS = (SIZE - STROKE) / 2;
 const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 const START_ANGLE = -90;
 
-function gaugeColor(pct) {
-  if (pct > 80) return HEX.danger;
-  if (pct > 60) return HEX.warning;
-  return HEX.success;
+function gaugeColor() {
+  return HEX.text1;
 }
 
 function MiniGauge({ name, pct, threshold }) {
@@ -44,7 +42,7 @@ function MiniGauge({ name, pct, threshold }) {
             fill="none" strokeWidth={1}
             strokeLinecap="butt"
             style={{
-              stroke: HEX.purple,
+              stroke: HEX.text3,
               strokeDasharray: `1 ${CIRCUMFERENCE - 1}`,
               strokeDashoffset: -(threshold / 100) * CIRCUMFERENCE,
             }}
@@ -68,11 +66,11 @@ function MiniGauge({ name, pct, threshold }) {
 function FleetSummary({ zones }) {
   return (
     <div className="flex items-center gap-2 text-2xs font-mono">
-      <span className="text-success">{zones.healthy}</span>
+      <span className="text-text-2">{zones.healthy}</span>
       <span className="text-text-4">/</span>
-      <span className="text-warning">{zones.warning}</span>
+      <span className="text-text-2">{zones.warning}</span>
       <span className="text-text-4">/</span>
-      <span className="text-danger">{zones.critical}</span>
+      <span className="text-text-2">{zones.critical}</span>
     </div>
   );
 }

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

@@ -20,15 +20,15 @@ function shortModel(id) {
 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 sColor = isRotating ? HEX.accent : statusColor(agent.status);
   const quality = agent.quality;
   const successRate = quality?.toolSuccessRate != null ? Math.round(quality.toolSuccessRate * 100) : null;
   const thresholdPct = agent.rotationThreshold ? Math.round(agent.rotationThreshold * 100) : null;
   const rc = roleColor(agent.role);
-  const barColor = contextPct > 80 ? HEX.danger : contextPct > 60 ? HEX.warning : HEX.accent;
+  const barColor = HEX.text1;
 
   return (
-    <div className="px-3 pl-6 py-2 hover:bg-[rgba(51,175,188,0.06)] transition-colors space-y-1.5">
+    <div className="px-3 pl-6 py-2 hover:bg-surface-4 transition-colors space-y-1.5">
       {/* Top row */}
       <div className="flex items-center gap-2 min-w-0">
         {/* Status dot */}
@@ -64,13 +64,7 @@ const AgentRow = memo(function AgentRow({ agent, isRotating }) {
 
         {/* Quality badge */}
         {successRate != null && (
-          <span
-            className="text-2xs font-mono font-bold 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)',
-            }}
-          >
+          <span className="text-2xs font-mono font-bold px-1 py-px rounded-sm flex-shrink-0 text-text-1 bg-surface-4">
             {successRate}%
           </span>
         )}
@@ -95,7 +89,7 @@ const AgentRow = memo(function AgentRow({ agent, isRotating }) {
       <div className="flex items-center gap-2">
         <div
           className="relative flex-1 h-0.5 rounded-sm overflow-visible"
-          style={{ background: hexAlpha(HEX.accent, 0.12) }}
+          style={{ background: hexAlpha(HEX.text4, 0.2) }}
         >
           <div
             className="absolute inset-y-0 left-0 rounded-sm transition-all duration-700"
@@ -104,7 +98,7 @@ const AgentRow = memo(function AgentRow({ agent, isRotating }) {
           {thresholdPct && (
             <div
               className="absolute top-[-1px] w-px h-[4px]"
-              style={{ left: `${thresholdPct}%`, background: HEX.purple }}
+              style={{ left: `${thresholdPct}%`, background: HEX.text3 }}
               title={`Rotation at ${thresholdPct}%`}
             />
           )}
@@ -126,7 +120,7 @@ function TeamSection({ team, members, rotatingSet }) {
     <div>
       <button
         onClick={() => setExpanded((e) => !e)}
-        className="w-full flex items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-[rgba(51,175,188,0.08)] bg-[rgba(51,175,188,0.05)]"
+        className="w-full flex items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-surface-4 bg-surface-3"
         style={{ borderLeft: isActive ? `2px solid ${HEX.accent}` : '2px solid transparent' }}
       >
         {expanded
@@ -142,7 +136,7 @@ function TeamSection({ team, members, rotatingSet }) {
         )}
         <span
           className="text-2xs font-mono tabular-nums flex-shrink-0 ml-1.5"
-          style={{ color: isActive ? HEX.accent : undefined }}
+          style={{ color: isActive ? HEX.text1 : undefined }}
         >
           {runningCount}/{members.length}
         </span>