groove-dev 0.27.196 → 0.27.197

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

@@ -1,198 +0,0 @@
-// FSL-1.1-Apache-2.0 — see LICENSE
-import { useState, useRef, useEffect } from 'react';
-import { Pencil, Pin, PinOff, Trash2, Hash, MoreHorizontal, ChevronDown, X } from 'lucide-react';
-import { useGrooveStore } from '../../stores/groove';
-import { fmtNum } from '../../lib/format';
-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' },
-  { id: 'devops', label: 'DevOps', desc: 'CI/CD, infra, deployment' },
-  { id: 'security', label: 'Security', desc: 'Audits, vulnerabilities' },
-  { id: 'database', label: 'Database', desc: 'Schema, migrations, queries' },
-  { id: 'testing', label: 'Testing', desc: 'Tests, coverage, QA' },
-  { id: 'docs', label: 'Docs', desc: 'Documentation, guides' },
-  { id: 'cmo', label: 'CMO', desc: 'Marketing, content, growth' },
-  { id: 'cfo', label: 'CFO', desc: 'Finance, metrics, forecasting' },
-  { id: 'ea', label: 'EA', desc: 'Executive assistant' },
-  { id: 'analyst', label: 'Analyst', desc: 'Data analysis, insights' },
-  { id: 'creative', label: 'Writer', desc: 'Copy, articles, proposals' },
-  { id: 'support', label: 'Support', desc: 'Customer support, FAQs' },
-];
-
-export function ChatHeader({ conversation, role, onRoleChange, sidebarCollapsed }) {
-  const renameConversation = useGrooveStore((s) => s.renameConversation);
-  const pinConversation = useGrooveStore((s) => s.pinConversation);
-  const deleteConversation = useGrooveStore((s) => s.deleteConversation);
-
-  const [editing, setEditing] = useState(false);
-  const [title, setTitle] = useState(conversation.title || '');
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [roleMenuOpen, setRoleMenuOpen] = useState(false);
-  const inputRef = useRef(null);
-  const menuRef = useRef(null);
-  const roleMenuRef = useRef(null);
-
-  useEffect(() => {
-    setTitle(conversation.title || '');
-    setEditing(false);
-  }, [conversation.id, conversation.title]);
-
-  useEffect(() => {
-    if (editing && inputRef.current) inputRef.current.focus();
-  }, [editing]);
-
-  useEffect(() => {
-    if (!menuOpen) return;
-    function handleClick(e) {
-      if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false);
-    }
-    document.addEventListener('mousedown', handleClick);
-    return () => document.removeEventListener('mousedown', handleClick);
-  }, [menuOpen]);
-
-  useEffect(() => {
-    if (!roleMenuOpen) return;
-    function handleClick(e) {
-      if (roleMenuRef.current && !roleMenuRef.current.contains(e.target)) setRoleMenuOpen(false);
-    }
-    document.addEventListener('mousedown', handleClick);
-    return () => document.removeEventListener('mousedown', handleClick);
-  }, [roleMenuOpen]);
-
-  function handleRename() {
-    const trimmed = title.trim();
-    if (trimmed && trimmed !== conversation.title) {
-      renameConversation(conversation.id, trimmed);
-    } else {
-      setTitle(conversation.title || '');
-    }
-    setEditing(false);
-  }
-
-  const agent = useGrooveStore((s) => s.agents.find((a) => a.id === conversation.agentId));
-  const tokens = agent?.tokensUsed || 0;
-
-  return (
-    <div className={cn("h-12 flex items-center gap-3 border-b border-border-subtle bg-surface-0/80 flex-shrink-0", sidebarCollapsed ? 'pl-10 pr-4' : 'px-4')}>
-      <Hash size={14} className="text-text-4 flex-shrink-0" />
-
-      {editing ? (
-        <input
-          ref={inputRef}
-          value={title}
-          onChange={(e) => setTitle(e.target.value)}
-          onKeyDown={(e) => { if (e.key === 'Enter') handleRename(); if (e.key === 'Escape') { setTitle(conversation.title || ''); setEditing(false); } }}
-          onBlur={handleRename}
-          className="flex-1 min-w-0 bg-transparent text-sm font-semibold text-text-0 font-sans outline-none border-b border-accent"
-          maxLength={100}
-        />
-      ) : (
-        <button
-          onClick={() => setEditing(true)}
-          className="flex-1 min-w-0 text-left text-sm font-semibold text-text-0 font-sans truncate hover:text-accent transition-colors cursor-pointer"
-        >
-          {conversation.title || 'New Chat'}
-        </button>
-      )}
-
-      <div className="w-px h-5 bg-border-subtle" />
-
-      <div className="flex items-center gap-2 flex-shrink-0">
-        <div ref={roleMenuRef} className="relative">
-          <button
-            onClick={() => setRoleMenuOpen(!roleMenuOpen)}
-            className={cn(
-              'flex items-center gap-1.5 h-7 px-2.5 rounded-lg text-2xs font-semibold font-sans transition-colors cursor-pointer border',
-              role
-                ? 'border-current/20'
-                : 'bg-surface-3 border-border-subtle text-text-3 hover:text-text-1',
-            )}
-            style={role ? { background: roleColor(role).bg, color: roleColor(role).text, borderColor: `${roleColor(role).border}33` } : undefined}
-          >
-            {role ? CHAT_ROLES.find((r) => r.id === role)?.label || role : 'Role'}
-            {role ? (
-              <X
-                size={10}
-                className="opacity-60 hover:opacity-100"
-                onClick={(e) => { e.stopPropagation(); onRoleChange?.(null); }}
-              />
-            ) : (
-              <ChevronDown size={10} />
-            )}
-          </button>
-          {roleMenuOpen && (
-            <div className="absolute left-0 top-full mt-1 w-56 rounded-lg border border-border bg-surface-1 shadow-xl z-50 py-1 max-h-72 overflow-y-auto">
-              {CHAT_ROLES.map((r) => {
-                const rc = roleColor(r.id);
-                const active = role === r.id;
-                return (
-                  <button
-                    key={r.id}
-                    onClick={() => { onRoleChange?.(r.id); setRoleMenuOpen(false); }}
-                    className={cn(
-                      'w-full flex items-center gap-2.5 px-3 py-2 text-left hover:bg-surface-3 cursor-pointer transition-colors',
-                      active && 'bg-surface-3',
-                    )}
-                  >
-                    <span
-                      className="w-2 h-2 rounded-full flex-shrink-0"
-                      style={{ background: rc.text }}
-                    />
-                    <div className="flex-1 min-w-0">
-                      <div className="text-xs font-semibold font-sans text-text-0">{r.label}</div>
-                      <div className="text-2xs text-text-3 font-sans">{r.desc}</div>
-                    </div>
-                    {active && <span className="text-2xs text-accent font-mono">active</span>}
-                  </button>
-                );
-              })}
-            </div>
-          )}
-        </div>
-
-        {tokens > 0 && (
-          <span className="text-2xs text-text-3 font-mono tabular-nums">{fmtNum(tokens)} tok</span>
-        )}
-
-        <div ref={menuRef} className="relative">
-          <button
-            onClick={() => setMenuOpen(!menuOpen)}
-            className="w-7 h-7 flex items-center justify-center rounded-md text-text-3 hover:text-text-1 hover:bg-surface-3 transition-colors cursor-pointer"
-          >
-            <MoreHorizontal size={14} />
-          </button>
-          {menuOpen && (
-            <div className="absolute right-0 top-full mt-1 w-40 rounded-md border border-border bg-surface-1 shadow-xl z-50 py-1">
-              <button
-                onClick={() => { setEditing(true); setMenuOpen(false); }}
-                className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-text-1 hover:bg-surface-5 cursor-pointer font-sans"
-              >
-                <Pencil size={12} /> Rename
-              </button>
-              <button
-                onClick={() => { pinConversation(conversation.id, !conversation.pinned); setMenuOpen(false); }}
-                className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-text-1 hover:bg-surface-5 cursor-pointer font-sans"
-              >
-                {conversation.pinned ? <PinOff size={12} /> : <Pin size={12} />}
-                {conversation.pinned ? 'Unpin' : 'Pin'}
-              </button>
-              <div className="h-px my-1 bg-border-subtle" />
-              <button
-                onClick={() => { deleteConversation(conversation.id); setMenuOpen(false); }}
-                className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-danger hover:bg-danger/10 cursor-pointer font-sans"
-              >
-                <Trash2 size={12} /> Delete
-              </button>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,367 +0,0 @@
-// FSL-1.1-Apache-2.0 — see LICENSE
-import { useState, useRef, useEffect, useCallback } from 'react';
-import { SendHorizontal, Loader2, Square, Paperclip, Image as ImageIcon, Zap, Bot, GripHorizontal, ChevronUp } from 'lucide-react';
-import { cn } from '../../lib/cn';
-import { formatModelName, isImageModel as checkImageModel, getTier, getContextSize, TIER_CONFIG } from './model-picker';
-import { useGrooveStore } from '../../stores/groove';
-import { Badge } from '../ui/badge';
-
-const EFFORT_OPTIONS = [
-  { value: 'none', label: 'None' },
-  { value: 'low', label: 'Low' },
-  { value: 'medium', label: 'Med' },
-  { value: 'high', label: 'High' },
-  { value: 'xhigh', label: 'XHigh' },
-];
-
-const VERBOSITY_OPTIONS = [
-  { value: 'low', label: 'Concise' },
-  { value: 'medium', label: 'Normal' },
-];
-
-export function ChatInput({ onSend, onStop, sending, streaming, disabled, isImageModel, currentModel, currentProvider, onModelChange, replyContext, onClearReply, role, isCodex, reasoningEffort, onReasoningEffortChange, verbosity, onVerbosityChange, mode, onModeChange, modeChanging }) {
-  const [input, setInput] = useState('');
-  const [inputHeight, setInputHeight] = useState(88);
-  const [modelPickerOpen, setModelPickerOpen] = useState(false);
-  const textareaRef = useRef(null);
-  const fileInputRef = useRef(null);
-  const modelPickerRef = useRef(null);
-
-  const [providers, setProviders] = useState([]);
-  const fetchProviders = useGrooveStore((s) => s.fetchProviders);
-
-  useEffect(() => {
-    fetchProviders().then((data) => {
-      if (Array.isArray(data)) setProviders(data);
-      else if (data?.providers) setProviders(data.providers);
-    }).catch(() => {});
-  }, [fetchProviders]);
-
-  useEffect(() => {
-    if (!disabled && textareaRef.current) textareaRef.current.focus();
-  }, [disabled]);
-
-  useEffect(() => {
-    if (!modelPickerOpen) return;
-    function handleClick(e) {
-      if (modelPickerRef.current && !modelPickerRef.current.contains(e.target)) setModelPickerOpen(false);
-    }
-    document.addEventListener('mousedown', handleClick);
-    return () => document.removeEventListener('mousedown', handleClick);
-  }, [modelPickerOpen]);
-
-  function handleSend() {
-    const text = input.trim();
-    if (!text || sending || disabled) return;
-    onSend(text);
-    setInput('');
-  }
-
-  function onKeyDown(e) {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  }
-
-  function handleFileSelect(e) {
-    const files = Array.from(e.target.files || []);
-    if (files.length === 0) return;
-    const pathList = files.map((f) => f.name).join(', ');
-    setInput((prev) => prev + (prev ? '\n' : '') + `[Attached: ${pathList}]`);
-    e.target.value = '';
-  }
-
-  const onDragStart = useCallback((e) => {
-    e.preventDefault();
-    const startY = e.clientY;
-    const startH = inputHeight;
-    const onMove = (ev) => setInputHeight(Math.min(Math.max(56, startH - (ev.clientY - startY)), 400));
-    const onUp = () => {
-      window.removeEventListener('mousemove', onMove);
-      window.removeEventListener('mouseup', onUp);
-    };
-    window.addEventListener('mousemove', onMove);
-    window.addEventListener('mouseup', onUp);
-  }, [inputHeight]);
-
-  const isActive = streaming || sending;
-  const canSend = input.trim() && !sending && !disabled;
-  const currentMode = mode || 'api';
-
-  const placeholder = disabled
-    ? 'Select a model to start chatting...'
-    : isImageModel
-      ? 'Describe the image you want to generate...'
-      : role
-        ? `Ask your ${role}...`
-        : 'Send a message...';
-
-  return (
-    <div className="px-4 pb-3">
-      <div
-        onMouseDown={onDragStart}
-        className="flex items-center justify-center h-5 cursor-row-resize group"
-      >
-        <GripHorizontal size={12} className="text-text-4 group-hover:text-text-2 transition-colors" />
-      </div>
-
-      {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="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-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-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-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' : 'text-text-3 hover:text-text-1',
-              )}
-              title="Lightweight — fast and cheap, no tools"
-            >
-              <Zap size={10} /> Chat
-            </button>
-            <button
-              onClick={() => onModeChange?.('agent')}
-              disabled={modeChanging}
-              className={cn(
-                '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' : 'text-text-3 hover:text-text-1',
-              )}
-              title="Full agent — tools, files, session resume"
-            >
-              <Bot size={10} /> Agent
-            </button>
-          </div>
-
-          <div ref={modelPickerRef} className="relative">
-            <button
-              onClick={() => setModelPickerOpen(!modelPickerOpen)}
-              className={cn(
-                'flex items-center gap-1 h-5 px-2 rounded text-2xs font-mono transition-colors cursor-pointer',
-                isImageModel
-                  ? 'bg-purple/8 text-purple hover:bg-purple/15'
-                  : 'text-text-3 hover:text-text-1 hover:bg-surface-3',
-              )}
-            >
-              {isImageModel && <ImageIcon size={9} />}
-              <span className="max-w-[120px] truncate">{currentModel ? formatModelName(currentModel) : 'Select model'}</span>
-              <ChevronUp size={10} className="text-text-4 flex-shrink-0" />
-            </button>
-
-            {modelPickerOpen && (() => {
-              const chatProviders = [];
-              const imageProviders = [];
-              for (const provider of providers) {
-                const models = provider.models || [];
-                const chat = [];
-                const img = [];
-                for (const m of models) {
-                  const mid = typeof m === 'string' ? m : m.id || m.name;
-                  const mtype = typeof m === 'object' ? m.type : undefined;
-                  if (mtype === 'image' || checkImageModel(mid)) img.push(m);
-                  else chat.push(m);
-                }
-                if (chat.length) chatProviders.push({ ...provider, models: chat });
-                if (img.length) imageProviders.push({ ...provider, models: img });
-              }
-
-              const renderModel = (provider, model) => {
-                const modelId = typeof model === 'string' ? model : model.id || model.name;
-                const modelName = typeof model === 'string' ? model : model.name || model.id;
-                const mtype = typeof model === 'object' ? model.type : undefined;
-                const isImg = mtype === 'image' || checkImageModel(modelId);
-                const tier = isImg ? null : getTier(modelId);
-                const tierCfg = tier ? TIER_CONFIG[tier] : null;
-                const TierIcon = tierCfg?.icon;
-                const isActive = currentModel === modelId && currentProvider === provider.id;
-                return (
-                  <button
-                    key={modelId}
-                    onClick={() => {
-                      onModelChange?.({ provider: provider.id, model: modelId });
-                      setModelPickerOpen(false);
-                    }}
-                    className={cn(
-                      'w-full flex items-center gap-3 px-3.5 py-2.5 text-left transition-colors cursor-pointer',
-                      isActive ? 'bg-accent/10' : 'hover:bg-surface-3',
-                    )}
-                  >
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-1.5">
-                        {isImg && <ImageIcon size={11} className="text-purple flex-shrink-0" />}
-                        <span className={cn('text-xs font-medium font-sans truncate', isActive ? 'text-accent' : 'text-text-0')}>{modelName}</span>
-                      </div>
-                      {!isImg && (
-                        <div className="text-2xs text-text-4 font-sans mt-0.5">{getContextSize(modelId)} context</div>
-                      )}
-                    </div>
-                    <div className="flex items-center gap-1.5 flex-shrink-0">
-                      {isImg ? (
-                        <Badge variant="purple" className="text-[9px]">
-                          <ImageIcon size={8} /> Image
-                        </Badge>
-                      ) : tierCfg && (
-                        <Badge variant={tierCfg.variant} className="text-[9px]">
-                          <TierIcon size={8} /> {tierCfg.label}
-                        </Badge>
-                      )}
-                    </div>
-                  </button>
-                );
-              };
-
-              return (
-                <div className="absolute bottom-full left-0 mb-1.5 w-80 max-h-[60vh] overflow-y-auto rounded-xl border border-border bg-surface-1 shadow-2xl z-50">
-                  {providers.length === 0 && (
-                    <div className="px-4 py-8 text-center text-xs text-text-3 font-sans">No providers available</div>
-                  )}
-                  {chatProviders.map((provider) => (
-                    <div key={provider.id}>
-                      <div className="px-3.5 py-2 text-2xs font-semibold text-text-3 uppercase tracking-wider font-sans bg-surface-2/80 border-b border-border-subtle sticky top-0 backdrop-blur-sm">
-                        {provider.name || provider.id}
-                      </div>
-                      {provider.models.map((m) => renderModel(provider, m))}
-                    </div>
-                  ))}
-                  {imageProviders.length > 0 && (
-                    <>
-                      <div className="px-3.5 py-2 text-2xs font-semibold text-text-4 uppercase tracking-wider font-sans bg-surface-0 border-y border-border-subtle flex items-center gap-1.5 sticky top-0 backdrop-blur-sm">
-                        <ImageIcon size={10} className="text-purple" />
-                        Image Generation
-                      </div>
-                      {imageProviders.map((provider) => (
-                        <div key={`img-${provider.id}`}>
-                          <div className="px-3.5 py-2 text-2xs font-semibold text-text-3 uppercase tracking-wider font-sans bg-surface-2/80 border-b border-border-subtle">
-                            {provider.name || provider.id}
-                          </div>
-                          {provider.models.map((m) => renderModel(provider, m))}
-                        </div>
-                      ))}
-                    </>
-                  )}
-                </div>
-              );
-            })()}
-          </div>
-
-          {isCodex && (
-            <>
-              <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-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',
-                    )}
-                    title={`Reasoning: ${opt.label}`}
-                  >
-                    {opt.label}
-                  </button>
-                ))}
-              </div>
-
-              <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-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',
-                    )}
-                    title={`Verbosity: ${opt.label}`}
-                  >
-                    {opt.label}
-                  </button>
-                ))}
-              </div>
-            </>
-          )}
-
-          <div className="flex-1" />
-
-          {isActive ? (
-            <button
-              onClick={onStop}
-              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>
-          ) : (
-            <button
-              onClick={handleSend}
-              disabled={!canSend}
-              className={cn(
-                '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={15} className="animate-spin" /> : <SendHorizontal size={15} />}
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}