groove-dev 0.27.143 → 0.27.145

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

@@ -5,7 +5,7 @@ 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 }) {
+function MiniSparkline({ data, color = HEX.text3, 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);
@@ -34,7 +34,7 @@ function MiniSparkline({ data, color = HEX.accent, width = 72, height = 22 }) {
   );
 }
 
-const KpiCard = memo(function KpiCard({ label, value, sparkData, color = HEX.accent, hint, className }) {
+const KpiCard = memo(function KpiCard({ label, value, sparkData, color = HEX.text3, hint, className }) {
   return (
     <div className={cn(
       'flex items-center gap-2.5 px-3 py-2.5 min-w-0',
@@ -59,7 +59,7 @@ const KpiCard = memo(function KpiCard({ label, value, sparkData, color = HEX.acc
 
 export function KpiStrip({ kpis }) {
   return (
-    <div className="flex flex-wrap border-b border-border" style={{ background: 'var(--color-surface-0)' }}>
+    <div className="flex flex-wrap border-b border-border bg-surface-0">
       {kpis.map((kpi) => (
         <KpiCard
           key={kpi.label}

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

@@ -1,9 +1,9 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { memo } from 'react';
-import { HEX } from '../../lib/theme-hex';
+import { HEX, hexAlpha } from '../../lib/theme-hex';
 import { fmtNum, fmtPct } from '../../lib/format';
 
-const TIER_COLORS = { heavy: HEX.danger, medium: HEX.warning, light: HEX.success };
+const TIER_COLORS = { heavy: HEX.text0, medium: HEX.text2, light: HEX.text4 };
 const TIER_LABELS = { heavy: 'Heavy', medium: 'Medium', light: 'Light' };
 
 const DONUT_SIZE = 80;
@@ -126,7 +126,7 @@ const RoutingChart = memo(function RoutingChart({ routing, agentBreakdown }) {
                   <div className="h-0.5 bg-surface-4 rounded-sm overflow-hidden">
                     <div
                       className="h-full rounded-sm transition-all duration-500"
-                      style={{ width: `${Math.max(barPct, 2)}%`, background: HEX.accent }}
+                      style={{ width: `${Math.max(barPct, 2)}%`, background: HEX.text2 }}
                     />
                   </div>
                 </div>

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

@@ -41,7 +41,7 @@ export const TeamBurnPanel = memo(function TeamBurnPanel({ teams = [] }) {
                   <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 }}
+                      style={{ width: `${pct}%`, background: HEX.text3 }}
                     />
                   </div>
                 </div>

package/node_modules/@groove-dev/gui/src/components/dashboard/token-chart.jsx

@@ -144,7 +144,7 @@ const TokenChart = memo(function TokenChart({ data }) {
     const hasCacheData = caches.some((c) => c > 0);
     if (hasCacheData) {
       ctx.beginPath();
-      ctx.strokeStyle = hexAlpha(HEX.info, 0.45);
+      ctx.strokeStyle = hexAlpha(HEX.text2, 0.5);
       ctx.lineWidth = 1;
       ctx.lineJoin = 'round';
       ctx.setLineDash([2, 3]);
@@ -164,7 +164,7 @@ const TokenChart = memo(function TokenChart({ data }) {
     const ly = 14;
 
     if (hasCacheData) {
-      ctx.fillStyle = hexAlpha(HEX.info, 0.5);
+      ctx.fillStyle = hexAlpha(HEX.text2, 0.5);
       ctx.fillText('Cache %', rx, ly);
       rx -= ctx.measureText('Cache %').width + 4;
       ctx.beginPath(); ctx.arc(rx, ly - 3, 2.5, 0, Math.PI * 2); ctx.fill();
@@ -203,8 +203,8 @@ const TokenChart = memo(function TokenChart({ data }) {
       // Tooltip
       const lines = [
         { label: 'Burn', value: `${fmtNum(d.burnRate)}/m`, color: HEX.accent },
-        { label: 'Cache', value: fmtPct(d.cacheHitRate * 100), color: HEX.info },
-        { label: 'Agents', value: `${d.running}/${d.agents}`, color: HEX.text2 },
+        { label: 'Cache', value: fmtPct(d.cacheHitRate * 100), color: HEX.text2 },
+        { label: 'Agents', value: `${d.running}/${d.agents}`, color: HEX.text3 },
       ];
       const tooltipW = 104;
       const tooltipH = lines.length * 16 + 12;

package/node_modules/@groove-dev/gui/src/components/lab/chat-playground.jsx

@@ -5,7 +5,7 @@ import { ScrollArea } from '../ui/scroll-area';
 import { Button } from '../ui/button';
 import { Tooltip } from '../ui/tooltip';
 import { cn } from '../../lib/cn';
-import { Send, Plus, ChevronDown, Square, Clock, Zap, Bot } from 'lucide-react';
+import { SendHorizontal, Plus, ChevronDown, Clock, Zap, Bot } from 'lucide-react';
 
 function MessageMetrics({ metrics }) {
   if (!metrics) return null;
@@ -217,44 +217,52 @@ export function ChatPlayground() {
 
       {/* Input */}
       <div className="flex-shrink-0 px-4 py-3">
-        <div className="flex items-end gap-2 bg-surface-1 border border-border-subtle rounded-md p-1.5 focus-within:border-accent/30 transition-colors">
-          <textarea
-            ref={inputRef}
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder={!activeRuntime ? 'Select a runtime first' : !activeModel ? 'Select a model first' : 'Type a message...'}
-            disabled={!activeRuntime || !activeModel}
-            rows={1}
-            className={cn(
-              'flex-1 resize-none bg-transparent px-2 py-1.5',
-              'text-xs text-text-0 font-sans placeholder:text-text-4',
-              'focus:outline-none',
-              'disabled:opacity-40 disabled:cursor-not-allowed',
-              'min-h-[28px] max-h-32',
+        <div className="flex flex-col rounded-lg border border-border-subtle bg-surface-0 transition-colors overflow-hidden focus-within:border-text-4/40">
+          <div className="px-1">
+            <textarea
+              ref={inputRef}
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={!activeRuntime ? 'Select a runtime first' : !activeModel ? 'Select a model first' : 'Type a message...'}
+              disabled={!activeRuntime || !activeModel}
+              rows={1}
+              className={cn(
+                'w-full resize-none px-3 py-2.5 text-[13px]',
+                'bg-transparent font-sans text-text-0',
+                'placeholder:text-text-4',
+                'focus:outline-none',
+                'disabled:opacity-40 disabled:cursor-not-allowed',
+              )}
+              style={{ height: 88 }}
+            />
+          </div>
+          <div className="flex items-center gap-1 px-1.5 pb-1.5 pt-0.5">
+            <div className="flex-1" />
+            {streaming && (
+              <button
+                onClick={() => useGrooveStore.getState().stopLabInference()}
+                title="Stop generation"
+                className="group w-7 h-7 flex items-center justify-center rounded-md transition-colors cursor-pointer"
+              >
+                <span className="relative flex items-center justify-center w-3.5 h-3.5">
+                  <span className="absolute inset-0 rounded-full bg-accent/30 group-hover:bg-red-500/30 animate-ping [animation-duration:2s] transition-colors" />
+                  <span className="relative w-2.5 h-2.5 rounded-full bg-accent group-hover:bg-red-500 transition-colors" />
+                </span>
+              </button>
             )}
-            style={{ height: 'auto', overflowY: input.split('\n').length > 4 ? 'auto' : 'hidden' }}
-            onInput={(e) => { e.target.style.height = 'auto'; e.target.style.height = `${Math.min(e.target.scrollHeight, 128)}px`; }}
-          />
-          {streaming ? (
-            <button
-              onClick={() => useGrooveStore.getState().stopLabInference()}
-              className="flex-shrink-0 w-7 h-7 flex items-center justify-center rounded-sm bg-danger/15 text-danger hover:bg-danger/25 transition-colors cursor-pointer"
-            >
-              <Square size={12} />
-            </button>
-          ) : (
             <button
               disabled={!canSend}
               onClick={handleSend}
               className={cn(
-                'flex-shrink-0 w-7 h-7 flex items-center justify-center rounded-sm transition-colors cursor-pointer',
-                canSend ? 'bg-accent text-surface-0 hover:bg-accent/90' : 'bg-surface-3 text-text-4 cursor-not-allowed',
+                'w-7 h-7 flex items-center justify-center rounded-md transition-colors cursor-pointer',
+                'disabled:opacity-15 disabled:cursor-not-allowed',
+                canSend ? 'text-text-0 hover:text-text-1' : 'text-text-4',
               )}
             >
-              <Send size={12} />
+              <SendHorizontal size={15} />
             </button>
-          )}
+          </div>
         </div>
       </div>
     </div>