groove-dev 0.27.143 → 0.27.145

package/packages/gui/src/components/chat/chat-header.jsx

@@ -8,6 +8,8 @@ import { cn } from '../../lib/cn';
 import { roleColor } from '../../lib/status';
 
 const CHAT_ROLES = [
+  { id: 'chat', label: 'Chat', desc: 'General conversation' },
+  { id: 'research', label: 'Research Assistant', desc: 'Explore ideas, web search' },
   { id: 'fullstack', label: 'Fullstack', desc: 'End-to-end engineering' },
   { id: 'backend', label: 'Backend', desc: 'APIs, services, databases' },
   { id: 'frontend', label: 'Frontend', desc: 'UI, components, styling' },

package/packages/gui/src/components/chat/chat-input.jsx

@@ -1,6 +1,6 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useState, useRef, useEffect, useCallback } from 'react';
-import { Send, Loader2, Square, Paperclip, Image as ImageIcon, Zap, Bot, GripHorizontal } from 'lucide-react';
+import { SendHorizontal, Loader2, Square, Paperclip, Image as ImageIcon, Zap, Bot, GripHorizontal } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { formatModelName } from './model-picker';
 
@@ -19,7 +19,7 @@ const VERBOSITY_OPTIONS = [
 
 export function ChatInput({ onSend, onStop, sending, streaming, disabled, isImageModel, currentModel, replyContext, onClearReply, role, isCodex, reasoningEffort, onReasoningEffortChange, verbosity, onVerbosityChange, mode, onModeChange, modeChanging }) {
   const [input, setInput] = useState('');
-  const [inputHeight, setInputHeight] = useState(40);
+  const [inputHeight, setInputHeight] = useState(88);
   const textareaRef = useRef(null);
   const fileInputRef = useRef(null);
 
@@ -32,7 +32,6 @@ export function ChatInput({ onSend, onStop, sending, streaming, disabled, isImag
     if (!text || sending || disabled) return;
     onSend(text);
     setInput('');
-    setInputHeight(40);
   }
 
   function onKeyDown(e) {
@@ -54,7 +53,7 @@ export function ChatInput({ onSend, onStop, sending, streaming, disabled, isImag
     e.preventDefault();
     const startY = e.clientY;
     const startH = inputHeight;
-    const onMove = (ev) => setInputHeight(Math.min(Math.max(40, startH - (ev.clientY - startY)), 400));
+    const onMove = (ev) => setInputHeight(Math.min(Math.max(56, startH - (ev.clientY - startY)), 400));
     const onUp = () => {
       window.removeEventListener('mousemove', onMove);
       window.removeEventListener('mouseup', onUp);
@@ -76,95 +75,97 @@ export function ChatInput({ onSend, onStop, sending, streaming, disabled, isImag
         : 'Send a message...';
 
   return (
-    <div className="border-t border-border-subtle bg-surface-1">
+    <div className="px-4 pb-3">
       <div
         onMouseDown={onDragStart}
-        className="flex items-center justify-center h-3 cursor-row-resize hover:bg-surface-3/50 transition-colors group"
+        className="flex items-center justify-center h-5 cursor-row-resize group"
       >
-        <GripHorizontal size={10} className="text-text-4 group-hover:text-text-2 transition-colors" />
+        <GripHorizontal size={12} className="text-text-4 group-hover:text-text-2 transition-colors" />
       </div>
 
-      <div className="px-4 pb-3">
-        {replyContext && (
-          <div className="flex items-center gap-2 mb-2 px-3 py-2 rounded-lg bg-accent/5 border border-accent/15">
-            <ImageIcon size={12} className="text-accent flex-shrink-0" />
-            <span className="flex-1 text-2xs text-text-2 font-sans truncate">Iterating: &quot;{replyContext.prompt}&quot;</span>
-            <button onClick={onClearReply} className="text-text-4 hover:text-text-1 cursor-pointer flex-shrink-0">
-              <Square size={10} />
-            </button>
-          </div>
-        )}
-
-        <textarea
-          ref={textareaRef}
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          onKeyDown={onKeyDown}
-          placeholder={placeholder}
-          disabled={disabled}
-          rows={1}
-          style={{ height: inputHeight }}
-          className={cn(
-            'w-full resize-none rounded-xl px-4 py-2.5 text-sm',
-            'bg-surface-0 border text-text-0 font-sans',
-            'placeholder:text-text-4',
-            'focus:outline-none focus:ring-1',
-            'border-border focus:ring-accent/40',
-            'disabled:opacity-50 disabled:cursor-not-allowed',
-          )}
+      {replyContext && (
+        <div className="flex items-center gap-2 mb-2 px-3 py-2 rounded-lg bg-accent/5 border border-accent/15">
+          <ImageIcon size={12} className="text-accent flex-shrink-0" />
+          <span className="flex-1 text-2xs text-text-2 font-sans truncate">Iterating: &quot;{replyContext.prompt}&quot;</span>
+          <button onClick={onClearReply} className="text-text-4 hover:text-text-1 cursor-pointer flex-shrink-0">
+            <Square size={10} />
+          </button>
+        </div>
+      )}
+
+      <div className="flex flex-col rounded-lg border border-border-subtle bg-surface-0 transition-colors overflow-hidden focus-within:border-text-4/40">
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          accept=".pdf,.png,.jpg,.jpeg,.gif,.svg,.csv,.txt,.md,.json,.yaml,.yml,.docx,.pptx,.xlsx"
+          onChange={handleFileSelect}
+          className="hidden"
         />
 
-        <div className="flex items-center gap-2 mt-2">
-          <input
-            ref={fileInputRef}
-            type="file"
-            multiple
-            accept=".pdf,.png,.jpg,.jpeg,.gif,.svg,.csv,.txt,.md,.json,.yaml,.yml,.docx,.pptx,.xlsx"
-            onChange={handleFileSelect}
-            className="hidden"
+        <div className="px-1">
+          <textarea
+            ref={textareaRef}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={onKeyDown}
+            placeholder={placeholder}
+            disabled={disabled}
+            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: inputHeight }}
           />
+        </div>
+
+        <div className="flex items-center gap-1.5 px-1.5 pb-1.5 pt-0.5">
           <button
             onClick={() => fileInputRef.current?.click()}
             disabled={disabled}
-            className="w-8 h-8 flex items-center justify-center rounded-lg text-text-4 hover:text-text-1 hover:bg-surface-3 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed flex-shrink-0"
+            className="w-7 h-7 flex items-center justify-center rounded-md text-text-4 hover:text-text-1 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
             title="Attach file"
           >
             <Paperclip size={14} />
           </button>
 
-          <div className="flex items-center h-7 rounded-lg bg-surface-3 border border-border-subtle p-0.5">
+          <div className="flex items-center h-6 rounded-md bg-surface-3 border border-border-subtle p-0.5">
             <button
               onClick={() => onModeChange?.('api')}
               disabled={modeChanging}
               className={cn(
-                'flex items-center gap-1 h-6 px-2 rounded-md text-2xs font-semibold font-sans transition-colors cursor-pointer',
+                'flex items-center gap-1 h-5 px-2 rounded text-2xs font-semibold font-sans transition-colors cursor-pointer',
                 'disabled:opacity-50 disabled:cursor-not-allowed',
-                currentMode === 'api' ? 'bg-accent/15 text-accent border border-accent/25' : 'text-text-3 hover:text-text-1',
+                currentMode === 'api' ? 'bg-accent/15 text-accent' : 'text-text-3 hover:text-text-1',
               )}
               title="Lightweight — fast and cheap, no tools"
             >
-              <Zap size={11} /> Chat
+              <Zap size={10} /> Chat
             </button>
             <button
               onClick={() => onModeChange?.('agent')}
               disabled={modeChanging}
               className={cn(
-                'flex items-center gap-1 h-6 px-2 rounded-md text-2xs font-semibold font-sans transition-colors cursor-pointer',
+                'flex items-center gap-1 h-5 px-2 rounded text-2xs font-semibold font-sans transition-colors cursor-pointer',
                 'disabled:opacity-50 disabled:cursor-not-allowed',
-                currentMode === 'agent' ? 'bg-purple/15 text-purple border border-purple/25' : 'text-text-3 hover:text-text-1',
+                currentMode === 'agent' ? 'bg-purple/15 text-purple' : 'text-text-3 hover:text-text-1',
               )}
               title="Full agent — tools, files, session resume"
             >
-              <Bot size={11} /> Agent
+              <Bot size={10} /> Agent
             </button>
           </div>
 
           {currentModel && (
             <div className={cn(
-              'flex items-center gap-1 h-6 px-2 rounded-md text-2xs font-mono border',
+              'flex items-center gap-1 h-5 px-2 rounded text-2xs font-mono',
               isImageModel
-                ? 'bg-purple/8 border-purple/20 text-purple'
-                : 'bg-surface-3 border-border-subtle text-text-3',
+                ? 'bg-purple/8 text-purple'
+                : 'text-text-3',
             )}>
               {isImageModel && <ImageIcon size={9} />}
               <span className="max-w-[80px] truncate">{formatModelName(currentModel)}</span>
@@ -173,13 +174,13 @@ export function ChatInput({ onSend, onStop, sending, streaming, disabled, isImag
 
           {isCodex && (
             <>
-              <div className="flex items-center h-6 rounded-md bg-surface-3 border border-border-subtle p-0.5">
+              <div className="flex items-center h-5 rounded bg-surface-3 border border-border-subtle p-0.5">
                 {EFFORT_OPTIONS.map((opt) => (
                   <button
                     key={opt.value}
                     onClick={() => onReasoningEffortChange?.(opt.value)}
                     className={cn(
-                      'h-5 px-1.5 rounded text-2xs font-semibold font-sans transition-colors cursor-pointer',
+                      'h-4 px-1.5 rounded text-2xs font-semibold font-sans transition-colors cursor-pointer',
                       reasoningEffort === opt.value
                         ? 'bg-accent/15 text-accent'
                         : 'text-text-4 hover:text-text-1',
@@ -191,13 +192,13 @@ export function ChatInput({ onSend, onStop, sending, streaming, disabled, isImag
                 ))}
               </div>
 
-              <div className="flex items-center h-6 rounded-md bg-surface-3 border border-border-subtle p-0.5">
+              <div className="flex items-center h-5 rounded bg-surface-3 border border-border-subtle p-0.5">
                 {VERBOSITY_OPTIONS.map((opt) => (
                   <button
                     key={opt.value}
                     onClick={() => onVerbosityChange?.(opt.value)}
                     className={cn(
-                      'h-5 px-1.5 rounded text-2xs font-semibold font-sans transition-colors cursor-pointer',
+                      'h-4 px-1.5 rounded text-2xs font-semibold font-sans transition-colors cursor-pointer',
                       verbosity === opt.value
                         ? 'bg-accent/15 text-accent'
                         : 'text-text-4 hover:text-text-1',
@@ -216,24 +217,25 @@ export function ChatInput({ onSend, onStop, sending, streaming, disabled, isImag
           {isActive ? (
             <button
               onClick={onStop}
-              className="w-8 h-8 flex items-center justify-center rounded-lg bg-danger/80 text-white hover:bg-danger transition-all cursor-pointer shadow-lg shadow-danger/20 flex-shrink-0"
               title="Stop generation"
+              className="group w-7 h-7 flex items-center justify-center rounded-md transition-colors cursor-pointer"
             >
-              <Square size={14} fill="currentColor" />
+              <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>
           ) : (
             <button
               onClick={handleSend}
               disabled={!canSend}
               className={cn(
-                'w-8 h-8 flex items-center justify-center rounded-lg transition-all cursor-pointer flex-shrink-0',
-                'disabled:opacity-20 disabled:cursor-not-allowed',
-                canSend
-                  ? 'bg-accent/15 text-accent hover:bg-accent/25 border border-accent/25'
-                  : 'bg-surface-4 text-text-4',
+                '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',
               )}
             >
-              {sending ? <Loader2 size={14} className="animate-spin" /> : <Send size={14} />}
+              {sending ? <Loader2 size={15} className="animate-spin" /> : <SendHorizontal size={15} />}
             </button>
           )}
         </div>

package/packages/gui/src/components/chat/chat-view.jsx

@@ -37,7 +37,7 @@ export function ChatView() {
   const setActiveConversation = useGrooveStore((s) => s.setActiveConversation);
   const sendChatMessage = useGrooveStore((s) => s.sendChatMessage);
   const sendImageMessage = useGrooveStore((s) => s.sendImageMessage);
-  const stopAgent = useGrooveStore((s) => s.stopAgent);
+
   const stopChatStreaming = useGrooveStore((s) => s.stopChatStreaming);
   const setConversationMode = useGrooveStore((s) => s.setConversationMode);
   const setConversationModel = useGrooveStore((s) => s.setConversationModel);
@@ -54,7 +54,7 @@ export function ChatView() {
   const [replyContext, setReplyContext] = useState(null);
   const [modeChanging, setModeChanging] = useState(false);
 
-  const activeRole = activeConversationId ? (conversationRoles?.[activeConversationId] || null) : null;
+  const activeRole = activeConversationId ? (conversationRoles?.[activeConversationId] || 'chat') : 'chat';
   const activeReasoningEffort = activeConversationId ? (conversationReasoningEffort?.[activeConversationId] || 'medium') : 'medium';
   const activeVerbosity = activeConversationId ? (conversationVerbosity?.[activeConversationId] || 'medium') : 'medium';
 
@@ -101,12 +101,8 @@ export function ChatView() {
 
   const handleStop = useCallback(() => {
     if (!activeConversation) return;
-    if (activeConversation.mode === 'agent' && activeConversation.agentId) {
-      stopAgent(activeConversation.agentId);
-    } else {
-      stopChatStreaming(activeConversationId);
-    }
-  }, [activeConversation, activeConversationId, stopAgent, stopChatStreaming]);
+    stopChatStreaming(activeConversationId);
+  }, [activeConversation, activeConversationId, stopChatStreaming]);
 
   const handleModelChange = useCallback(async (selection) => {
     if (activeConversationId) {

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>