groove-dev 0.27.196 → 0.27.198

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

@@ -1,212 +0,0 @@
-// FSL-1.1-Apache-2.0 — see LICENSE
-import { useState, useCallback } from 'react';
-import { Plus, PanelLeftOpen } from 'lucide-react';
-import { useGrooveStore } from '../../stores/groove';
-import { cn } from '../../lib/cn';
-import { ConversationList } from './conversation-list';
-import { ChatHeader } from './chat-header';
-import { ChatMessages } from './chat-messages';
-import { ChatInput } from './chat-input';
-import { isImageModel } from './model-picker';
-
-function EmptyState({ onNewChat }) {
-  return (
-    <div className="flex-1 flex items-center justify-center">
-      <div className="text-center space-y-4">
-        <h1 className="text-lg font-semibold text-text-1 font-sans">Groove Chat</h1>
-        <p className="text-sm text-text-3 font-sans">Every provider, every model, full project context.</p>
-        <button
-          onClick={onNewChat}
-          className="inline-flex items-center gap-2 h-9 px-5 rounded-lg bg-accent/15 text-accent text-sm font-semibold font-sans hover:bg-accent/25 transition-colors cursor-pointer border border-accent/20"
-        >
-          <Plus size={14} />
-          New Chat
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export function ChatView() {
-  const conversations = useGrooveStore((s) => s.conversations);
-  const activeConversationId = useGrooveStore((s) => s.activeConversationId);
-  const conversationMessages = useGrooveStore((s) => s.conversationMessages);
-  const sendingMessage = useGrooveStore((s) => s.sendingMessage);
-  const streamingConversationId = useGrooveStore((s) => s.streamingConversationId);
-  const conversationActiveTools = useGrooveStore((s) => s.conversationActiveTools);
-  const createConversation = useGrooveStore((s) => s.createConversation);
-  const setActiveConversation = useGrooveStore((s) => s.setActiveConversation);
-  const sendChatMessage = useGrooveStore((s) => s.sendChatMessage);
-  const sendImageMessage = useGrooveStore((s) => s.sendImageMessage);
-
-  const stopChatStreaming = useGrooveStore((s) => s.stopChatStreaming);
-  const setConversationMode = useGrooveStore((s) => s.setConversationMode);
-  const setConversationModel = useGrooveStore((s) => s.setConversationModel);
-
-  const conversationRoles = useGrooveStore((s) => s.conversationRoles);
-  const setConversationRole = useGrooveStore((s) => s.setConversationRole);
-
-  const conversationReasoningEffort = useGrooveStore((s) => s.conversationReasoningEffort);
-  const setConversationReasoningEffort = useGrooveStore((s) => s.setConversationReasoningEffort);
-  const conversationVerbosity = useGrooveStore((s) => s.conversationVerbosity);
-  const setConversationVerbosity = useGrooveStore((s) => s.setConversationVerbosity);
-
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-  const [replyContext, setReplyContext] = useState(null);
-  const [modeChanging, setModeChanging] = useState(false);
-
-  const activeRole = activeConversationId ? (conversationRoles?.[activeConversationId] || 'chat') : 'chat';
-  const activeReasoningEffort = activeConversationId ? (conversationReasoningEffort?.[activeConversationId] || 'medium') : 'medium';
-  const activeVerbosity = activeConversationId ? (conversationVerbosity?.[activeConversationId] || 'medium') : 'medium';
-
-  const activeConversation = conversations.find((c) => c.id === activeConversationId) || null;
-  const isCodexProvider = activeConversation?.provider === 'codex';
-  const messages = activeConversationId ? (conversationMessages[activeConversationId] || []) : [];
-  const isStreaming = streamingConversationId === activeConversationId && sendingMessage;
-  const activeTool = activeConversationId ? (conversationActiveTools?.[activeConversationId] || null) : null;
-  const currentModelIsImage = activeConversation ? isImageModel(activeConversation.model) : false;
-
-  const handleNewChat = useCallback(async (provider, model) => {
-    try {
-      await createConversation(provider || null, model || null, 'api');
-    } catch { /* toast handles */ }
-  }, [createConversation]);
-
-  const handleModeChange = useCallback(async (mode) => {
-    if (!activeConversationId || modeChanging) return;
-    setModeChanging(true);
-    try {
-      await setConversationMode(activeConversationId, mode);
-    } finally {
-      setModeChanging(false);
-    }
-  }, [activeConversationId, setConversationMode, modeChanging]);
-
-  const handleRoleChange = useCallback((role) => {
-    if (!activeConversationId) return;
-    setConversationRole(activeConversationId, role);
-  }, [activeConversationId, setConversationRole]);
-
-  const handleSend = useCallback((text) => {
-    if (!activeConversationId) return;
-
-    if (currentModelIsImage) {
-      const prompt = replyContext
-        ? `${text} (iterating on: "${replyContext.prompt}")`
-        : text;
-      sendImageMessage(activeConversationId, prompt, { model: activeConversation.model });
-      setReplyContext(null);
-    } else {
-      sendChatMessage(activeConversationId, text);
-    }
-  }, [activeConversationId, activeConversation, currentModelIsImage, replyContext, sendChatMessage, sendImageMessage]);
-
-  const handleStop = useCallback(() => {
-    if (!activeConversation) return;
-    stopChatStreaming(activeConversationId);
-  }, [activeConversation, activeConversationId, stopChatStreaming]);
-
-  const handleModelChange = useCallback(async (selection) => {
-    if (activeConversationId) {
-      await setConversationModel(activeConversationId, selection.provider, selection.model);
-    } else {
-      await handleNewChat(selection.provider, selection.model);
-    }
-  }, [activeConversationId, setConversationModel, handleNewChat]);
-
-  const handleImageReply = useCallback((msg) => {
-    setReplyContext(msg);
-  }, []);
-
-  const handleReasoningEffortChange = useCallback((effort) => {
-    if (!activeConversationId) return;
-    setConversationReasoningEffort(activeConversationId, effort);
-  }, [activeConversationId, setConversationReasoningEffort]);
-
-  const handleVerbosityChange = useCallback((verbosity) => {
-    if (!activeConversationId) return;
-    setConversationVerbosity(activeConversationId, verbosity);
-  }, [activeConversationId, setConversationVerbosity]);
-
-  return (
-    <div className="flex h-full bg-surface-0">
-      {/* Conversation sidebar */}
-      <div className={cn(
-        'relative flex-shrink-0 border-r border-accent/12 bg-surface-1 transition-all duration-200 overflow-hidden',
-        sidebarCollapsed ? 'w-0 border-r-0' : 'w-64',
-      )}>
-        <ConversationList onNewChat={() => handleNewChat()} onCollapse={() => setSidebarCollapsed(true)} />
-      </div>
-
-      {/* Main chat area */}
-      <div className="flex-1 flex flex-col min-w-0">
-        {sidebarCollapsed && (
-          <button
-            onClick={() => setSidebarCollapsed(false)}
-            className="absolute top-3 left-2 z-10 w-7 h-7 flex items-center justify-center rounded-md text-text-3 hover:text-text-0 hover:bg-surface-3 transition-colors cursor-pointer"
-            title="Show sidebar"
-          >
-            <PanelLeftOpen size={15} />
-          </button>
-        )}
-
-        {activeConversation ? (
-          <>
-            <ChatHeader conversation={activeConversation} role={activeRole} onRoleChange={handleRoleChange} sidebarCollapsed={sidebarCollapsed} />
-            <ChatMessages
-              messages={messages}
-              isStreaming={isStreaming}
-              model={activeConversation.model}
-              mode={activeConversation.mode || 'api'}
-              onImageReply={handleImageReply}
-              role={activeRole}
-              activeTool={activeTool}
-            />
-            <ChatInput
-              onSend={handleSend}
-              onStop={handleStop}
-              sending={sendingMessage}
-              streaming={isStreaming}
-              disabled={false}
-              isImageModel={currentModelIsImage}
-              currentModel={activeConversation.model}
-              currentProvider={activeConversation.provider}
-              onModelChange={handleModelChange}
-              replyContext={replyContext}
-              onClearReply={() => setReplyContext(null)}
-              role={activeRole}
-              isCodex={isCodexProvider}
-              reasoningEffort={activeReasoningEffort}
-              onReasoningEffortChange={handleReasoningEffortChange}
-              verbosity={activeVerbosity}
-              onVerbosityChange={handleVerbosityChange}
-              mode={activeConversation?.mode || 'api'}
-              onModeChange={handleModeChange}
-              modeChanging={modeChanging}
-            />
-          </>
-        ) : (
-          <>
-            <EmptyState onNewChat={() => handleNewChat()} />
-            <ChatInput
-              onSend={(text) => {
-                handleNewChat().then(() => {
-                  setTimeout(() => {
-                    const id = useGrooveStore.getState().activeConversationId;
-                    if (id) sendChatMessage(id, text);
-                  }, 500);
-                });
-              }}
-              onStop={() => {}}
-              sending={false}
-              streaming={false}
-              disabled={false}
-              isImageModel={false}
-              currentModel={null}
-            />
-          </>
-        )}
-      </div>
-    </div>
-  );
-}

package/packages/gui/src/components/chat/conversation-list.jsx

@@ -1,163 +0,0 @@
-// FSL-1.1-Apache-2.0 — see LICENSE
-import { useMemo } from 'react';
-import { SquarePen, MessageCircle, Pin, Pencil, PinOff, Trash2, Zap, Bot, PanelLeftClose } from 'lucide-react';
-import { useGrooveStore } from '../../stores/groove';
-import { cn } from '../../lib/cn';
-import { Badge } from '../ui/badge';
-import { timeAgo } from '../../lib/format';
-import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator } from '../ui/context-menu';
-import { formatModelName } from './model-picker';
-
-function groupByDate(conversations) {
-  const now = new Date();
-  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-  const yesterday = new Date(today); yesterday.setDate(today.getDate() - 1);
-  const weekAgo = new Date(today); weekAgo.setDate(today.getDate() - 7);
-
-  const groups = { pinned: [], today: [], yesterday: [], week: [], older: [] };
-
-  for (const conv of conversations) {
-    if (conv.pinned) { groups.pinned.push(conv); continue; }
-    const d = new Date(conv.updatedAt || conv.createdAt);
-    if (d >= today) groups.today.push(conv);
-    else if (d >= yesterday) groups.yesterday.push(conv);
-    else if (d >= weekAgo) groups.week.push(conv);
-    else groups.older.push(conv);
-  }
-
-  return groups;
-}
-
-function GroupLabel({ label }) {
-  return (
-    <div className="px-3 pt-4 pb-1.5">
-      <span className="text-2xs font-semibold text-text-4 uppercase tracking-wider font-sans">{label}</span>
-    </div>
-  );
-}
-
-function ConversationItem({ conv, isActive, onSelect, onRename, onPin, onDelete }) {
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger asChild>
-        <button
-          onClick={() => onSelect(conv.id)}
-          className={cn(
-            'w-full flex items-center gap-2 px-3 py-2.5 text-left transition-colors cursor-pointer group border-b border-border-subtle/50',
-            isActive
-              ? 'text-text-0'
-              : 'text-text-2 hover:bg-surface-3/40 hover:text-text-1',
-          )}
-        >
-          <div className="flex-1 min-w-0">
-            <div className="text-xs font-medium font-sans truncate">{conv.title || 'New Chat'}</div>
-            <div className="flex items-center gap-1.5 mt-0.5">
-              {conv.mode === 'agent'
-                ? <Bot size={9} className="text-purple flex-shrink-0" />
-                : <Zap size={9} className="text-accent flex-shrink-0" />
-              }
-              {conv.model && <Badge variant="default" className="text-[8px] px-1 py-0">{formatModelName(conv.model)}</Badge>}
-              <span className="text-2xs text-text-4 font-sans">{timeAgo(conv.updatedAt || conv.createdAt)}</span>
-            </div>
-          </div>
-          {conv.pinned && <Pin size={10} className="text-accent flex-shrink-0" />}
-        </button>
-      </ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem onSelect={() => onRename(conv)}>
-          <Pencil size={12} /> Rename
-        </ContextMenuItem>
-        <ContextMenuItem onSelect={() => onPin(conv)}>
-          {conv.pinned ? <PinOff size={12} /> : <Pin size={12} />}
-          {conv.pinned ? 'Unpin' : 'Pin'}
-        </ContextMenuItem>
-        <ContextMenuSeparator />
-        <ContextMenuItem danger onSelect={() => onDelete(conv.id)}>
-          <Trash2 size={12} /> Delete
-        </ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
-  );
-}
-
-export function ConversationList({ onNewChat, onCollapse }) {
-  const conversations = useGrooveStore((s) => s.conversations);
-  const activeConversationId = useGrooveStore((s) => s.activeConversationId);
-  const setActiveConversation = useGrooveStore((s) => s.setActiveConversation);
-  const renameConversation = useGrooveStore((s) => s.renameConversation);
-  const pinConversation = useGrooveStore((s) => s.pinConversation);
-  const deleteConversation = useGrooveStore((s) => s.deleteConversation);
-
-  const groups = useMemo(() => groupByDate(conversations), [conversations]);
-
-  function handleRename(conv) {
-    const name = prompt('Rename conversation:', conv.title || '');
-    if (name && name.trim()) renameConversation(conv.id, name.trim());
-  }
-
-  function handlePin(conv) {
-    pinConversation(conv.id, !conv.pinned);
-  }
-
-  const renderGroup = (label, items) => {
-    if (items.length === 0) return null;
-    return (
-      <div key={label}>
-        <GroupLabel label={label} />
-        {items.map((conv) => (
-          <ConversationItem
-            key={conv.id}
-            conv={conv}
-            isActive={conv.id === activeConversationId}
-            onSelect={setActiveConversation}
-            onRename={handleRename}
-            onPin={handlePin}
-            onDelete={deleteConversation}
-          />
-        ))}
-      </div>
-    );
-  };
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="flex items-center justify-between px-3 pt-3 pb-2">
-        <span className="text-xs font-semibold text-text-2 font-sans">Chats</span>
-        <div className="flex items-center gap-0.5">
-          <button
-            onClick={onNewChat}
-            className="w-7 h-7 flex items-center justify-center rounded-md text-text-3 hover:text-text-0 hover:bg-surface-3 transition-colors cursor-pointer"
-            title="New chat"
-          >
-            <SquarePen size={15} />
-          </button>
-          <button
-            onClick={onCollapse}
-            className="w-7 h-7 flex items-center justify-center rounded-md text-text-3 hover:text-text-0 hover:bg-surface-3 transition-colors cursor-pointer"
-            title="Collapse sidebar"
-          >
-            <PanelLeftClose size={15} />
-          </button>
-        </div>
-      </div>
-
-      <div className="flex-1 overflow-y-auto pt-1 pb-3">
-        {conversations.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-16 text-center px-4">
-            <MessageCircle size={24} className="text-text-4 mb-3" />
-            <p className="text-xs text-text-3 font-sans">No conversations yet</p>
-            <p className="text-2xs text-text-4 font-sans mt-1">Start a new chat to begin</p>
-          </div>
-        ) : (
-          <>
-            {renderGroup('Pinned', groups.pinned)}
-            {renderGroup('Today', groups.today)}
-            {renderGroup('Yesterday', groups.yesterday)}
-            {renderGroup('Previous 7 Days', groups.week)}
-            {renderGroup('Older', groups.older)}
-          </>
-        )}
-      </div>
-    </div>
-  );
-}

package/packages/gui/src/components/chat/model-picker.jsx

@@ -1,201 +0,0 @@
-// FSL-1.1-Apache-2.0 — see LICENSE
-import { useState, useEffect, useRef } from 'react';
-import { ChevronDown, Globe, Cpu, Zap, Sparkles, Image as ImageIcon } from 'lucide-react';
-import { useGrooveStore } from '../../stores/groove';
-import { cn } from '../../lib/cn';
-import { Badge } from '../ui/badge';
-
-export function formatModelName(id) {
-  if (!id) return '';
-  return id
-    .replace(/^claude-/, '')
-    .replace(/-(\d)/, ' $1')
-    .split('-')
-    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
-    .join(' ');
-}
-
-export const TIER_CONFIG = {
-  frontier: { label: 'Frontier', variant: 'purple', icon: Sparkles },
-  mid: { label: 'Mid', variant: 'accent', icon: Zap },
-  fast: { label: 'Fast', variant: 'success', icon: Zap },
-};
-
-export function getTier(model) {
-  const name = (model || '').toLowerCase();
-  if (name.includes('gpt-5.5') || name.includes('gpt-5.4-pro')) return 'frontier';
-  if (name.includes('gpt-5.4-mini') || name.includes('gpt-5-mini')) return 'mid';
-  if (name.includes('gpt-5.4-nano') || name.includes('gpt-5-nano')) return 'fast';
-  if (name.includes('gpt-5.4')) return 'frontier';
-  if (name.includes('opus') || name.includes('pro') || name.includes('o3') || name.includes('gpt-4o')) return 'frontier';
-  if (name.includes('sonnet') || name.includes('flash') || name.includes('o4-mini')) return 'mid';
-  return 'fast';
-}
-
-export function getContextSize(model) {
-  const name = (model || '').toLowerCase();
-  if (name.startsWith('gpt-5')) return '200k';
-  if (name.includes('opus') || name.includes('sonnet')) return '200k';
-  if (name.includes('haiku')) return '200k';
-  if (name.includes('pro')) return '1M';
-  if (name.includes('flash')) return '1M';
-  if (name.includes('o3') || name.includes('o4')) return '128k';
-  return '128k';
-}
-
-export function isImageModel(modelId) {
-  if (!modelId) return false;
-  const id = modelId.toLowerCase();
-  return id.includes('dall-e') || id.includes('imagen') || id.includes('gpt-image') || id.includes('imagine') || id.includes('nano-banana');
-}
-
-export function ModelPicker({ value, onChange, disabled }) {
-  const [open, setOpen] = useState(false);
-  const [providers, setProviders] = useState([]);
-  const fetchProviders = useGrooveStore((s) => s.fetchProviders);
-  const ref = useRef(null);
-
-  useEffect(() => {
-    fetchProviders().then((data) => {
-      if (Array.isArray(data)) setProviders(data);
-      else if (data?.providers) setProviders(data.providers);
-    }).catch(() => {});
-  }, [fetchProviders]);
-
-  useEffect(() => {
-    if (!open) return;
-    function handleClick(e) {
-      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
-    }
-    document.addEventListener('mousedown', handleClick);
-    return () => document.removeEventListener('mousedown', handleClick);
-  }, [open]);
-
-  const currentModel = value?.model || '';
-  const currentModelDisplay = currentModel ? formatModelName(currentModel) : 'Select model';
-  const currentProvider = value?.provider || '';
-  const isNetwork = currentProvider === 'groove-network';
-  const isCurrentImage = isImageModel(currentModel);
-
-  const chatModels = [];
-  const imageModels = [];
-
-  for (const provider of providers) {
-    const models = provider.models || [];
-    const chatGroup = [];
-    const imgGroup = [];
-    for (const model of models) {
-      const modelId = typeof model === 'string' ? model : model.id || model.name;
-      const modelType = typeof model === 'object' ? model.type : undefined;
-      if (modelType === 'image' || isImageModel(modelId)) {
-        imgGroup.push(model);
-      } else {
-        chatGroup.push(model);
-      }
-    }
-    if (chatGroup.length > 0) chatModels.push({ ...provider, models: chatGroup });
-    if (imgGroup.length > 0) imageModels.push({ ...provider, models: imgGroup });
-  }
-
-  function renderModelGroup(providerList, sectionLabel) {
-    if (providerList.length === 0) return null;
-    return (
-      <>
-        {sectionLabel && (
-          <div className="px-3 py-1.5 text-2xs font-semibold text-text-4 uppercase tracking-wider font-sans bg-surface-0 border-b border-border-subtle flex items-center gap-1.5">
-            {sectionLabel === 'Image Generation' && <ImageIcon size={10} className="text-purple" />}
-            {sectionLabel}
-          </div>
-        )}
-        {providerList.map((provider) => {
-          const isNetworkProvider = provider.id === 'groove-network';
-          return (
-            <div key={provider.id}>
-              <div className="px-3 py-1.5 text-2xs font-semibold text-text-3 uppercase tracking-wider font-sans bg-surface-2 border-b border-border-subtle flex items-center gap-1.5">
-                {isNetworkProvider && <Globe size={10} className="text-purple" />}
-                {provider.name || provider.id}
-              </div>
-              {provider.models.map((model) => {
-                const modelId = typeof model === 'string' ? model : model.id || model.name;
-                const modelDisplayName = typeof model === 'string' ? model : model.name || model.id;
-                const modelType = typeof model === 'object' ? model.type : undefined;
-                const isImg = modelType === 'image' || isImageModel(modelId);
-                const tier = isImg ? null : getTier(modelId);
-                const tierConfig = tier ? TIER_CONFIG[tier] : null;
-                const TierIcon = tierConfig?.icon;
-                const isActive = currentModel === modelId && currentProvider === provider.id;
-                return (
-                  <button
-                    key={modelId}
-                    onClick={() => {
-                      onChange({ provider: provider.id, model: modelId });
-                      setOpen(false);
-                    }}
-                    className={cn(
-                      'w-full flex items-center gap-2 px-3 py-2 text-left transition-colors cursor-pointer',
-                      isActive ? 'bg-accent/10 text-text-0' : 'hover:bg-surface-3 text-text-1',
-                    )}
-                  >
-                    <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="text-xs font-medium font-sans truncate">{modelDisplayName}</span>
-                      </div>
-                      {!isImg && <div className="text-2xs text-text-4 font-sans">{getContextSize(modelId)} context</div>}
-                    </div>
-                    <div className="flex items-center gap-1.5 flex-shrink-0">
-                      {isNetworkProvider && (
-                        <Badge variant="purple" className="text-[9px]">
-                          <Globe size={8} /> Decentralized
-                        </Badge>
-                      )}
-                      {isImg ? (
-                        <Badge variant="purple" className="text-[9px]">
-                          <ImageIcon size={8} /> Image
-                        </Badge>
-                      ) : tierConfig && (
-                        <Badge variant={tierConfig.variant} className="text-[9px]">
-                          <TierIcon size={8} /> {tierConfig.label}
-                        </Badge>
-                      )}
-                    </div>
-                  </button>
-                );
-              })}
-            </div>
-          );
-        })}
-      </>
-    );
-  }
-
-  return (
-    <div ref={ref} className="relative">
-      <button
-        onClick={() => !disabled && setOpen(!open)}
-        disabled={disabled}
-        className={cn(
-          'flex items-center gap-1.5 h-8 px-2.5 rounded-lg text-xs font-medium font-sans transition-colors cursor-pointer',
-          'bg-surface-4 border border-border-subtle hover:bg-surface-5',
-          'disabled:opacity-40 disabled:cursor-not-allowed',
-          isNetwork && 'border-purple/30 bg-purple/8',
-          isCurrentImage && 'border-purple/30 bg-purple/8',
-        )}
-      >
-        {isCurrentImage ? <ImageIcon size={12} className="text-purple" /> : isNetwork ? <Globe size={12} className="text-purple" /> : <Cpu size={12} className="text-text-3" />}
-        <span className={cn('max-w-[120px] truncate', isCurrentImage ? 'text-purple' : 'text-text-1')}>{currentModelDisplay}</span>
-        <ChevronDown size={12} className="text-text-4" />
-      </button>
-
-      {open && (
-        <div className="absolute top-full right-0 mt-1 w-72 max-h-80 overflow-y-auto rounded-lg border border-border bg-surface-1 shadow-xl z-50">
-          {providers.length === 0 && (
-            <div className="px-4 py-6 text-center text-xs text-text-3 font-sans">No providers available</div>
-          )}
-          {renderModelGroup(chatModels, null)}
-          {renderModelGroup(imageModels, 'Image Generation')}
-        </div>
-      )}
-    </div>
-  );
-}