groove-dev 0.27.55 → 0.27.57

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

@@ -0,0 +1,165 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useCallback } from 'react';
+import { MessageCircle, Plus, Sparkles, Zap } 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';
+
+function EmptyState({ onNewChat }) {
+  return (
+    <div className="flex-1 flex items-center justify-center">
+      <div className="max-w-md w-full text-center space-y-8 px-8">
+        <div className="relative mx-auto w-20 h-20">
+          <div className="absolute inset-0 rounded-full bg-accent/8 animate-pulse" />
+          <div className="absolute inset-1 rounded-full bg-surface-3 border border-border-subtle flex items-center justify-center shadow-lg shadow-accent/5">
+            <MessageCircle size={32} className="text-accent" />
+          </div>
+        </div>
+
+        <div className="space-y-3">
+          <h1 className="text-2xl font-bold text-text-0 font-sans tracking-tight">Groove Chat</h1>
+          <p className="text-sm text-text-2 font-sans max-w-sm mx-auto leading-relaxed">
+            A command center disguised as a conversation. Every provider, every model, full project context.
+          </p>
+        </div>
+
+        <button
+          onClick={onNewChat}
+          className="inline-flex items-center gap-2 h-10 px-6 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={16} />
+          New Chat
+        </button>
+
+        <div className="grid grid-cols-2 gap-3 max-w-sm mx-auto">
+          <div className="flex items-center gap-2 p-3 rounded-lg bg-surface-3 border border-border-subtle">
+            <Sparkles size={14} className="text-purple flex-shrink-0" />
+            <span className="text-2xs text-text-2 font-sans">Multi-model routing</span>
+          </div>
+          <div className="flex items-center gap-2 p-3 rounded-lg bg-surface-3 border border-border-subtle">
+            <Zap size={14} className="text-warning flex-shrink-0" />
+            <span className="text-2xs text-text-2 font-sans">Streaming responses</span>
+          </div>
+        </div>
+
+        <p className="text-xs text-text-4 font-sans">
+          <kbd className="font-mono bg-surface-4 px-1.5 py-0.5 rounded text-text-3">Cmd+Shift+N</kbd>
+          <span className="mx-1.5">new chat</span>
+        </p>
+      </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 createConversation = useGrooveStore((s) => s.createConversation);
+  const setActiveConversation = useGrooveStore((s) => s.setActiveConversation);
+  const sendChatMessage = useGrooveStore((s) => s.sendChatMessage);
+  const stopAgent = useGrooveStore((s) => s.stopAgent);
+  const stopChatStreaming = useGrooveStore((s) => s.stopChatStreaming);
+  const setConversationMode = useGrooveStore((s) => s.setConversationMode);
+
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+
+  const activeConversation = conversations.find((c) => c.id === activeConversationId) || null;
+  const messages = activeConversationId ? (conversationMessages[activeConversationId] || []) : [];
+  const isStreaming = streamingConversationId === activeConversationId && sendingMessage;
+
+  const handleNewChat = useCallback(async (provider, model) => {
+    const p = provider || 'claude-code';
+    const m = model || 'claude-sonnet-4-6';
+    try {
+      await createConversation(p, m, 'api');
+    } catch { /* toast handles */ }
+  }, [createConversation]);
+
+  const handleModeChange = useCallback((mode) => {
+    if (!activeConversationId) return;
+    setConversationMode(activeConversationId, mode);
+  }, [activeConversationId, setConversationMode]);
+
+  const handleSend = useCallback((text) => {
+    if (!activeConversationId) return;
+    sendChatMessage(activeConversationId, text);
+  }, [activeConversationId, sendChatMessage]);
+
+  const handleStop = useCallback(() => {
+    if (!activeConversation) return;
+    if (activeConversation.mode === 'agent' && activeConversation.agentId) {
+      stopAgent(activeConversation.agentId);
+    } else {
+      stopChatStreaming(activeConversationId);
+    }
+  }, [activeConversation, activeConversationId, stopAgent, stopChatStreaming]);
+
+  const handleModelChange = useCallback(async (selection) => {
+    if (activeConversationId) {
+      // TODO: Update conversation model via API
+    } else {
+      await handleNewChat(selection.provider, selection.model);
+    }
+  }, [activeConversationId, handleNewChat]);
+
+  const currentModel = activeConversation
+    ? { provider: activeConversation.provider, model: activeConversation.model }
+    : null;
+
+  return (
+    <div className="flex h-full bg-surface-2">
+      {/* Conversation sidebar */}
+      <div className={cn(
+        'flex-shrink-0 border-r border-border bg-surface-1 transition-all duration-200 overflow-hidden',
+        sidebarCollapsed ? 'w-0' : 'w-64',
+      )}>
+        <ConversationList onNewChat={() => handleNewChat()} />
+      </div>
+
+      {/* Main chat area */}
+      <div className="flex-1 flex flex-col min-w-0">
+        {activeConversation ? (
+          <>
+            <ChatHeader conversation={activeConversation} model={currentModel} onModelChange={handleModelChange} onModeChange={handleModeChange} />
+            <ChatMessages
+              messages={messages}
+              isStreaming={isStreaming}
+              model={activeConversation.model}
+            />
+            <ChatInput
+              onSend={handleSend}
+              onStop={handleStop}
+              sending={sendingMessage}
+              streaming={isStreaming}
+              disabled={false}
+            />
+          </>
+        ) : (
+          <>
+            <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}
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/node_modules/@groove-dev/gui/src/components/chat/conversation-list.jsx

@@ -0,0 +1,154 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useMemo } from 'react';
+import { Plus, MessageCircle, Pin, Pencil, PinOff, Trash2, Zap, Bot } 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 text-left rounded-md transition-colors cursor-pointer group',
+            isActive
+              ? 'bg-accent/10 text-text-0'
+              : 'text-text-2 hover:bg-surface-4 hover:text-text-1',
+          )}
+        >
+          <MessageCircle size={13} className={cn('flex-shrink-0', isActive ? 'text-accent' : 'text-text-4 group-hover:text-text-3')} />
+          <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 }) {
+  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-1 overflow-y-auto px-1.5 pt-3 pb-3 space-y-0.5">
+        {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 className="p-3 border-t border-border-subtle">
+        <button
+          onClick={onNewChat}
+          className="w-full flex items-center justify-center gap-2 h-9 rounded-lg bg-accent/15 text-accent text-xs font-semibold font-sans hover:bg-accent/25 transition-colors cursor-pointer border border-accent/20"
+        >
+          <Plus size={14} />
+          New Chat
+        </button>
+      </div>
+    </div>
+  );
+}

package/node_modules/@groove-dev/gui/src/components/chat/model-picker.jsx

@@ -0,0 +1,143 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useEffect, useRef } from 'react';
+import { ChevronDown, Globe, Cpu, Zap, Sparkles } 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(' ');
+}
+
+const TIER_CONFIG = {
+  frontier: { label: 'Frontier', variant: 'purple', icon: Sparkles },
+  mid: { label: 'Mid', variant: 'accent', icon: Zap },
+  fast: { label: 'Fast', variant: 'success', icon: Zap },
+};
+
+function getTier(model) {
+  const name = (model || '').toLowerCase();
+  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';
+}
+
+function getContextSize(model) {
+  const name = (model || '').toLowerCase();
+  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 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';
+
+  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',
+        )}
+      >
+        {isNetwork ? <Globe size={12} className="text-purple" /> : <Cpu size={12} className="text-text-3" />}
+        <span className="text-text-1 max-w-[120px] truncate">{currentModelDisplay}</span>
+        <ChevronDown size={12} className="text-text-4" />
+      </button>
+
+      {open && (
+        <div className="absolute top-full left-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>
+          )}
+          {providers.map((provider) => {
+            const models = provider.models || [];
+            if (models.length === 0) return null;
+            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>
+                {models.map((model) => {
+                  const modelId = typeof model === 'string' ? model : model.id || model.name;
+                  const modelDisplayName = typeof model === 'string' ? model : model.name || model.id;
+                  const tier = getTier(modelId);
+                  const tierConfig = TIER_CONFIG[tier];
+                  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="text-xs font-medium font-sans truncate">{modelDisplayName}</div>
+                        <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>
+                        )}
+                        <Badge variant={tierConfig.variant} className="text-[9px]">
+                          <TierIcon size={8} /> {tierConfig.label}
+                        </Badge>
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/node_modules/@groove-dev/gui/src/components/layout/activity-bar.jsx

@@ -1,5 +1,5 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { Network, Code2, ChartSpline, Puzzle, Gamepad2, Users, Box, Newspaper, Settings, Globe } from 'lucide-react';
+import { Network, Code2, ChartSpline, Puzzle, Gamepad2, Users, Box, Newspaper, Settings, Globe, MessageCircle } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { Tooltip } from '../ui/tooltip';
 import { useGrooveStore } from '../../stores/groove';
@@ -13,6 +13,7 @@ const BASE_NAV_ITEMS = [
   { id: 'toys',        icon: Gamepad2,  label: 'Toys' },
   { id: 'models',      icon: Box,       label: 'Models' },
   { id: 'teams',       icon: Users,     label: 'Teams' },
+  { id: 'chat',        icon: MessageCircle, label: 'Chat' },
 ];
 
 const NETWORK_NAV_ITEM = { id: 'network', icon: Globe, label: 'Network' };