diff --git a/package.json b/package.json index b86b2bc697..6c045b72d9 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,8 @@ "clsx": "^2.1.1", "lucide-react": "^0.562.0", "react-markdown": "^10.1.0", - "tailwind-merge": "^3.4.0" + "tailwind-merge": "^3.4.0", + "zustand": "^5.0.10" }, "devDependencies": { "@electron-toolkit/eslint-config-prettier": "^3.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7736c156e1..741ea3025e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -53,6 +53,9 @@ importers: tailwind-merge: specifier: ^3.4.0 version: 3.4.0 + zustand: + specifier: ^5.0.10 + version: 5.0.10(@types/react@19.2.8)(react@19.2.3) devDependencies: '@electron-toolkit/eslint-config-prettier': specifier: ^3.0.0 @@ -3735,6 +3738,24 @@ packages: zod@4.3.5: resolution: {integrity: sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g==} + zustand@5.0.10: + resolution: {integrity: sha512-U1AiltS1O9hSy3rul+Ub82ut2fqIAefiSuwECWt6jlMVUGejvf+5omLcRBSzqbRagSM3hQZbtzdeRc6QVScXTg==} + engines: {node: '>=12.20.0'} + peerDependencies: + '@types/react': '>=18.0.0' + immer: '>=9.0.6' + react: '>=18.0.0' + use-sync-external-store: '>=1.2.0' + peerDependenciesMeta: + '@types/react': + optional: true + immer: + optional: true + react: + optional: true + use-sync-external-store: + optional: true + zwitch@2.0.4: resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} @@ -7793,4 +7814,9 @@ snapshots: zod@4.3.5: {} + zustand@5.0.10(@types/react@19.2.8)(react@19.2.3): + optionalDependencies: + '@types/react': 19.2.8 + react: 19.2.3 + zwitch@2.0.4: {} diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index c71c20251d..f26683ca72 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -1,21 +1,14 @@ /** * Main App component */ -import { useState, useEffect } from 'react' +import { useEffect, useState } from 'react' import { useApp } from './hooks/useApp' -import { ChatView, MessageInput, StatusBar, Settings } from './components' +import { ChatView, MessageInput, StatusBar } from './components' import { AppSidebar } from './components/AppSidebar' +import { Modals } from './components/Modals' import { ThemeProvider } from './contexts/ThemeContext' import { SidebarProvider } from '@/components/ui/sidebar' -import { - Dialog, - DialogContent, - DialogHeader, - DialogTitle, - DialogFooter, -} from '@/components/ui/dialog' -import { Button } from '@/components/ui/button' -import { Input } from '@/components/ui/input' +import { useModalStore } from './stores/modalStore' function AppContent(): React.JSX.Element { const { @@ -36,34 +29,25 @@ function AppContent(): React.JSX.Element { clearError, } = useApp() - // New session dialog state - const [showNewSession, setShowNewSession] = useState(false) - const [newSessionCwd, setNewSessionCwd] = useState('') - const [selectedAgentId, setSelectedAgentId] = useState('opencode') + const openModal = useModalStore((s) => s.openModal) - // Settings dialog state - const [showSettings, setShowSettings] = useState(false) + // Default agent for new sessions + const [defaultAgentId, setDefaultAgentId] = useState('opencode') // Auto-show new session dialog when no sessions exist useEffect(() => { if (!currentSession && sessions.length === 0) { - setNewSessionCwd('') - setShowNewSession(true) + openModal('newSession') } - }, [currentSession, sessions.length]) + }, [currentSession, sessions.length, openModal]) const handleNewSession = () => { - setNewSessionCwd('') - setShowNewSession(true) + openModal('newSession') } - const handleCreateSession = async () => { - if (!newSessionCwd.trim()) return - - // Create session with selected agent (agent starts automatically) - await createSession(newSessionCwd.trim(), selectedAgentId) - setShowNewSession(false) - setNewSessionCwd('') + const handleCreateSession = async (cwd: string) => { + // Create session with default agent (agent starts automatically) + await createSession(cwd, defaultAgentId) } const handleSelectSession = async (sessionId: string) => { @@ -77,7 +61,7 @@ function AppContent(): React.JSX.Element { : false return ( -
+
{/* Error banner */} {error && (
@@ -95,7 +79,6 @@ function AppContent(): React.JSX.Element { sessions={sessions} currentSessionId={currentSession?.id ?? null} onSelect={handleSelectSession} - onDelete={deleteSession} onNewSession={handleNewSession} /> @@ -106,7 +89,6 @@ function AppContent(): React.JSX.Element { runningSessionsCount={runningSessionsStatus.runningSessions} currentSession={currentSession} isCurrentSessionRunning={isCurrentSessionRunning} - onOpenSettings={() => setShowSettings(true)} /> {/* Chat view */} @@ -127,57 +109,12 @@ function AppContent(): React.JSX.Element { - {/* New session dialog */} - - - - New Session - - -
-
- -
- setNewSessionCwd(e.target.value)} - placeholder="Select a directory..." - onKeyDown={(e) => { - if (e.key === 'Enter') handleCreateSession() - }} - /> - -
-
-
- - - - - - - - - {/* Settings dialog */} - setShowSettings(false)} - defaultAgentId={selectedAgentId} - onSetDefaultAgent={setSelectedAgentId} + {/* Global modals */} +
) diff --git a/src/renderer/src/assets/base.css b/src/renderer/src/assets/base.css deleted file mode 100644 index 5ed6406a34..0000000000 --- a/src/renderer/src/assets/base.css +++ /dev/null @@ -1,67 +0,0 @@ -:root { - --ev-c-white: #ffffff; - --ev-c-white-soft: #f8f8f8; - --ev-c-white-mute: #f2f2f2; - - --ev-c-black: #1b1b1f; - --ev-c-black-soft: #222222; - --ev-c-black-mute: #282828; - - --ev-c-gray-1: #515c67; - --ev-c-gray-2: #414853; - --ev-c-gray-3: #32363f; - - --ev-c-text-1: rgba(255, 255, 245, 0.86); - --ev-c-text-2: rgba(235, 235, 245, 0.6); - --ev-c-text-3: rgba(235, 235, 245, 0.38); - - --ev-button-alt-border: transparent; - --ev-button-alt-text: var(--ev-c-text-1); - --ev-button-alt-bg: var(--ev-c-gray-3); - --ev-button-alt-hover-border: transparent; - --ev-button-alt-hover-text: var(--ev-c-text-1); - --ev-button-alt-hover-bg: var(--ev-c-gray-2); -} - -:root { - --color-background: var(--ev-c-black); - --color-background-soft: var(--ev-c-black-soft); - --color-background-mute: var(--ev-c-black-mute); - - --color-text: var(--ev-c-text-1); -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - font-weight: normal; -} - -ul { - list-style: none; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - line-height: 1.6; - font-family: - Inter, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css deleted file mode 100644 index 0179fc4c27..0000000000 --- a/src/renderer/src/assets/main.css +++ /dev/null @@ -1,171 +0,0 @@ -@import './base.css'; - -body { - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - background-image: url('./wavy-lines.svg'); - background-size: cover; - user-select: none; -} - -code { - font-weight: 600; - padding: 3px 5px; - border-radius: 2px; - background-color: var(--color-background-mute); - font-family: - ui-monospace, - SFMono-Regular, - SF Mono, - Menlo, - Consolas, - Liberation Mono, - monospace; - font-size: 85%; -} - -#root { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - margin-bottom: 80px; -} - -.logo { - margin-bottom: 20px; - -webkit-user-drag: none; - height: 128px; - width: 128px; - will-change: filter; - transition: filter 300ms; -} - -.logo:hover { - filter: drop-shadow(0 0 1.2em #6988e6aa); -} - -.creator { - font-size: 14px; - line-height: 16px; - color: var(--ev-c-text-2); - font-weight: 600; - margin-bottom: 10px; -} - -.text { - font-size: 28px; - color: var(--ev-c-text-1); - font-weight: 700; - line-height: 32px; - text-align: center; - margin: 0 10px; - padding: 16px 0; -} - -.tip { - font-size: 16px; - line-height: 24px; - color: var(--ev-c-text-2); - font-weight: 600; -} - -.react { - background: -webkit-linear-gradient(315deg, #087ea4 55%, #7c93ee); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - font-weight: 700; -} - -.ts { - background: -webkit-linear-gradient(315deg, #3178c6 45%, #f0dc4e); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - font-weight: 700; -} - -.actions { - display: flex; - padding-top: 32px; - margin: -6px; - flex-wrap: wrap; - justify-content: flex-start; -} - -.action { - flex-shrink: 0; - padding: 6px; -} - -.action a { - cursor: pointer; - text-decoration: none; - display: inline-block; - border: 1px solid transparent; - text-align: center; - font-weight: 600; - white-space: nowrap; - border-radius: 20px; - padding: 0 20px; - line-height: 38px; - font-size: 14px; - border-color: var(--ev-button-alt-border); - color: var(--ev-button-alt-text); - background-color: var(--ev-button-alt-bg); -} - -.action a:hover { - border-color: var(--ev-button-alt-hover-border); - color: var(--ev-button-alt-hover-text); - background-color: var(--ev-button-alt-hover-bg); -} - -.versions { - position: absolute; - bottom: 30px; - margin: 0 auto; - padding: 15px 0; - font-family: 'Menlo', 'Lucida Console', monospace; - display: inline-flex; - overflow: hidden; - align-items: center; - border-radius: 22px; - background-color: #202127; - backdrop-filter: blur(24px); -} - -.versions li { - display: block; - float: left; - border-right: 1px solid var(--ev-c-gray-1); - padding: 0 20px; - font-size: 14px; - line-height: 14px; - opacity: 0.8; - &:last-child { - border: none; - } -} - -@media (max-width: 720px) { - .text { - font-size: 20px; - } -} - -@media (max-width: 620px) { - .versions { - display: none; - } -} - -@media (max-width: 350px) { - .tip, - .actions { - display: none; - } -} diff --git a/src/renderer/src/components/AppSidebar.tsx b/src/renderer/src/components/AppSidebar.tsx index 63b5060f2b..007e718450 100644 --- a/src/renderer/src/components/AppSidebar.tsx +++ b/src/renderer/src/components/AppSidebar.tsx @@ -6,33 +6,26 @@ import type { MulticaSession } from '../../../shared/types' import { Sidebar, SidebarContent, + SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from '@/components/ui/sidebar' import { Button } from '@/components/ui/button' -import { - Dialog, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, -} from '@/components/ui/dialog' import { Tooltip, TooltipContent, TooltipTrigger, } from '@/components/ui/tooltip' import { cn } from '@/lib/utils' -import { Plus, Trash2 } from 'lucide-react' +import { Plus, Settings, Trash2 } from 'lucide-react' +import { useModalStore } from '../stores/modalStore' interface AppSidebarProps { sessions: MulticaSession[] currentSessionId: string | null onSelect: (sessionId: string) => void - onDelete: (sessionId: string) => void onNewSession: () => void } @@ -73,27 +66,21 @@ function SessionItem({ session, isActive, onSelect, onDelete }: SessionItemProps onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > - + - {/* Status indicator */} - + {/* Error indicator - only show on error */} + {session.status === 'error' && ( + + )} {/* Content */}
@@ -110,7 +97,7 @@ function SessionItem({ session, isActive, onSelect, onDelete }: SessionItemProps }} className={cn( "flex-shrink-0 rounded p-1 transition-opacity duration-150", - "hover:bg-accent/12 active:bg-accent/16", + "hover:bg-muted active:bg-muted", isHovered ? "opacity-50 hover:opacity-100" : "opacity-0" )} > @@ -162,67 +149,49 @@ export function AppSidebar({ sessions, currentSessionId, onSelect, - onDelete, onNewSession, }: AppSidebarProps) { - const [deleteSession, setDeleteSession] = useState(null) - - const handleConfirmDelete = () => { - if (deleteSession) { - onDelete(deleteSession.id) - setDeleteSession(null) - } - } + const openModal = useModalStore((s) => s.openModal) return ( - <> - - {/* Header - just for traffic lights spacing */} - + + {/* Header - just for traffic lights spacing */} + - - {/* New task button */} - + + {/* New task button */} + - {/* Recent label */} -

Recent

+ {/* Recent label */} +

Recent

- {/* Session list */} - - - + {/* Session list */} + openModal('deleteSession', session)} + /> + - {/* Delete confirmation dialog */} - !open && setDeleteSession(null)}> - - - Delete Task - - Are you sure you want to delete "{deleteSession && getSessionTitle(deleteSession)}"? This action cannot be undone. - - - - - - - - - + + + + ) } diff --git a/src/renderer/src/components/ChatView.tsx b/src/renderer/src/components/ChatView.tsx index a7358ccbb5..edd726c4ac 100644 --- a/src/renderer/src/components/ChatView.tsx +++ b/src/renderer/src/components/ChatView.tsx @@ -7,6 +7,7 @@ import type { StoredSessionUpdate } from '../../../shared/types' import { Button } from '@/components/ui/button' import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible' import { ChevronDown } from 'lucide-react' +import { ToolCallItem, type ToolCall } from './ToolCallItem' interface ChatViewProps { updates: StoredSessionUpdate[] @@ -31,7 +32,7 @@ export function ChatView({ updates, isProcessing, hasSession, onNewSession }: Ch

Multica

-

+

{hasSession ? 'Start a conversation with your coding agent' : 'Create a session to start chatting'} @@ -54,7 +55,7 @@ export function ChatView({ updates, isProcessing, hasSession, onNewSession }: Ch ))} {isProcessing && ( -

+
Agent is thinking...
@@ -73,15 +74,6 @@ interface Message { toolCalls: ToolCall[] } -interface ToolCall { - id: string - title: string - status: string - kind?: string - input?: string - output?: string -} - function groupUpdatesIntoMessages(updates: StoredSessionUpdate[]): Message[] { const messages: Message[] = [] let currentAssistantContent = '' @@ -220,7 +212,7 @@ function MessageBubble({ message }: MessageBubbleProps) { if (isUser) { return (
-
+
{message.content}
@@ -237,7 +229,7 @@ function MessageBubble({ message }: MessageBubbleProps) { {/* Tool calls */} {message.toolCalls.map((tc) => ( - + ))} {/* Text content with markdown */} @@ -257,33 +249,33 @@ function MessageBubble({ message }: MessageBubbleProps) { const isBlock = className?.includes('language-') if (isBlock) { return ( - + {children} ) } return ( - + {children} ) }, pre: ({ children }) => ( - 
+                
                   {children}
                 

               ),
               a: ({ href, children }) => (
-                
+                
                   {children}
                 
               ),
               blockquote: ({ children }) => (
-                

+                

                   {children}
                 

               ),
-              hr: () => 
,
+              hr: () => 
,
               strong: ({ children }) => {children},
               em: ({ children }) => {children},
             }}
@@ -369,157 +361,6 @@ function ThoughtBlock({ text }: { text: string }) {
   )
 }
 
-// Tool call line - inline display
-function ToolCallLine({ toolCall }: { toolCall: ToolCall }) {
-  const { icon, action, detail } = parseToolCall(toolCall)
-
-  const isRunning = toolCall.status === 'running' || toolCall.status === 'in_progress' || toolCall.status === 'pending'
-  const isFailed = toolCall.status === 'failed'
-
-  return (
-    

-      {/* Icon */}
-      {icon}
-
-      {/* Action */}
-      {action}
-
-      {/* Detail in code pill */}
-      {detail && (
-        
-          {detail}
-        
-      )}
-
-      {/* Running indicator */}
-      {isRunning && }
-    

-  )
-}
-
-interface ParsedToolCall {
-  icon: string
-  action: string
-  detail?: string
-}
-
-function parseToolCall(toolCall: ToolCall): ParsedToolCall {
-  const title = toolCall.title?.toLowerCase() || ''
-  const kind = toolCall.kind?.toLowerCase() || ''
-
-  // Try to extract file path from input
-  let filePath: string | undefined
-  if (toolCall.input) {
-    try {
-      const parsed = JSON.parse(toolCall.input)
-      filePath = parsed.file_path || parsed.path || parsed.filePath || parsed.pattern
-    } catch {
-      // Not JSON, might be a direct path
-      if (toolCall.input.startsWith('/') || toolCall.input.includes('.')) {
-        filePath = toolCall.input.split('\n')[0].trim()
-      }
-    }
-  }
-
-  // Determine icon and action based on kind/title
-  if (kind === 'search' || title.includes('glob') || title.includes('search') || title.includes('grep')) {
-    return {
-      icon: '◎',
-      action: title.includes('glob') ? 'Search files' : 'Search',
-      detail: filePath || extractPathFromTitle(toolCall.title),
-    }
-  }
-
-  if (title.includes('list') || title.startsWith('ls')) {
-    return {
-      icon: '▤',
-      action: 'List',
-      detail: extractPathFromTitle(toolCall.title),
-    }
-  }
-
-  if (title.includes('read')) {
-    return {
-      icon: '◔',
-      action: 'Read',
-      detail: filePath || extractPathFromTitle(toolCall.title),
-    }
-  }
-
-  if (title.includes('write') || title.includes('create')) {
-    // Try to get line count from output
-    let lineCount = ''
-    if (toolCall.output) {
-      const lines = toolCall.output.split('\n').length
-      if (lines > 1) lineCount = `${lines} lines`
-    }
-    return {
-      icon: '▤',
-      action: lineCount ? `Write ${lineCount}` : 'Write',
-      detail: filePath || extractPathFromTitle(toolCall.title),
-    }
-  }
-
-  if (title.includes('edit') || title.includes('replace')) {
-    return {
-      icon: '✎',
-      action: 'Edit',
-      detail: filePath || extractPathFromTitle(toolCall.title),
-    }
-  }
-
-  if (title.startsWith('run') || kind === 'bash' || kind === 'shell') {
-    const cmd = extractCommandFromTitle(toolCall.title)
-    return {
-      icon: '>_',
-      action: getCommandDescription(toolCall.title),
-      detail: cmd,
-    }
-  }
-
-  // Default
-  return {
-    icon: '◇',
-    action: toolCall.title || toolCall.kind || 'Tool',
-    detail: filePath,
-  }
-}
-
-function extractPathFromTitle(title?: string): string | undefined {
-  if (!title) return undefined
-  // Look for path-like strings
-  const match = title.match(/\/[\w\-./]+/)
-  return match ? match[0] : undefined
-}
-
-function extractCommandFromTitle(title?: string): string | undefined {
-  if (!title) return undefined
-  // Remove "Run " prefix and get the command
-  if (title.toLowerCase().startsWith('run ')) {
-    const cmd = title.slice(4).trim()
-    // Truncate if too long
-    return cmd.length > 50 ? cmd.slice(0, 47) + '...' : cmd
-  }
-  return undefined
-}
-
-function getCommandDescription(title?: string): string {
-  if (!title) return 'Run command'
-  const lower = title.toLowerCase()
-
-  if (lower.includes('mkdir')) return 'Create directory'
-  if (lower.includes('rm ')) return 'Remove'
-  if (lower.includes('mv ')) return 'Move'
-  if (lower.includes('cp ')) return 'Copy'
-  if (lower.includes('npm') || lower.includes('pnpm') || lower.includes('yarn')) return 'Package manager'
-  if (lower.includes('git')) return 'Git'
-  if (lower.includes('python')) return 'Run Python'
-  if (lower.includes('node')) return 'Run Node'
-  if (lower.includes('perl')) return 'Run Perl'
-
-  return 'Run command'
-}
-
 function LoadingDots() {
   return (
     
diff --git a/src/renderer/src/components/MessageInput.tsx b/src/renderer/src/components/MessageInput.tsx
index 558e8732b1..14dbc4ddae 100644
--- a/src/renderer/src/components/MessageInput.tsx
+++ b/src/renderer/src/components/MessageInput.tsx
@@ -52,7 +52,7 @@ export function MessageInput({
   }
 
   return (
-    

+