mirror of
https://github.com/multica-ai/multica.git
synced 2026-07-23 01:59:24 +02:00
Merge pull request #3 from multica-ai/feature/component-detail-optimization
Feature/component detail optimization
This commit is contained in:
Naiyuan Qing
@@ -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",
|
||||
|
||||
26
pnpm-lock.yaml
generated
26
pnpm-lock.yaml
generated
@@ -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: {}
|
||||
|
||||
@@ -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 (
|
||||
<div className="flex h-screen flex-col bg-[var(--color-background)] text-[var(--color-text)]">
|
||||
<div className="flex h-screen flex-col bg-background text-foreground">
|
||||
{/* Error banner */}
|
||||
{error && (
|
||||
<div className="flex items-center justify-between bg-red-600 px-4 py-2 text-sm text-white">
|
||||
@@ -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 {
|
||||
</main>
|
||||
</SidebarProvider>
|
||||
|
||||
{/* New session dialog */}
|
||||
<Dialog open={showNewSession} onOpenChange={setShowNewSession}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>New Session</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-muted-foreground">
|
||||
Working Directory
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
value={newSessionCwd}
|
||||
onChange={(e) => setNewSessionCwd(e.target.value)}
|
||||
placeholder="Select a directory..."
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') handleCreateSession()
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={async () => {
|
||||
const dir = await window.electronAPI.selectDirectory()
|
||||
if (dir) setNewSessionCwd(dir)
|
||||
}}
|
||||
>
|
||||
Browse...
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="ghost" onClick={() => setShowNewSession(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleCreateSession} disabled={!newSessionCwd.trim()}>
|
||||
Create
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Settings dialog */}
|
||||
<Settings
|
||||
isOpen={showSettings}
|
||||
onClose={() => setShowSettings(false)}
|
||||
defaultAgentId={selectedAgentId}
|
||||
onSetDefaultAgent={setSelectedAgentId}
|
||||
{/* Global modals */}
|
||||
<Modals
|
||||
defaultAgentId={defaultAgentId}
|
||||
onSetDefaultAgent={setDefaultAgentId}
|
||||
onCreateSession={handleCreateSession}
|
||||
onDeleteSession={deleteSession}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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)}
|
||||
>
|
||||
<Tooltip open={isHovered}>
|
||||
<Tooltip delayDuration={600}>
|
||||
<TooltipTrigger asChild>
|
||||
<SidebarMenuButton
|
||||
isActive={isActive}
|
||||
onClick={onSelect}
|
||||
className={cn(
|
||||
"h-auto py-2 transition-colors duration-150",
|
||||
// Hover weaker than active
|
||||
"hover:bg-accent/50",
|
||||
isActive && "bg-accent"
|
||||
"hover:bg-sidebar-accent/50",
|
||||
isActive && "bg-sidebar-accent"
|
||||
)}
|
||||
>
|
||||
{/* Status indicator */}
|
||||
<span
|
||||
className={cn(
|
||||
"h-2 w-2 flex-shrink-0 rounded-full transition-colors",
|
||||
session.status === 'active' && "bg-green-500",
|
||||
session.status === 'error' && "bg-red-500",
|
||||
session.status !== 'active' && session.status !== 'error' && "bg-muted-foreground/40"
|
||||
)}
|
||||
/>
|
||||
{/* Error indicator - only show on error */}
|
||||
{session.status === 'error' && (
|
||||
<span className="h-2 w-2 flex-shrink-0 rounded-full bg-red-500" />
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
<div className="min-w-0 flex-1">
|
||||
@@ -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<MulticaSession | null>(null)
|
||||
|
||||
const handleConfirmDelete = () => {
|
||||
if (deleteSession) {
|
||||
onDelete(deleteSession.id)
|
||||
setDeleteSession(null)
|
||||
}
|
||||
}
|
||||
const openModal = useModalStore((s) => s.openModal)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Sidebar>
|
||||
{/* Header - just for traffic lights spacing */}
|
||||
<SidebarHeader className="titlebar-drag-region h-11 pl-20" />
|
||||
<Sidebar>
|
||||
{/* Header - just for traffic lights spacing */}
|
||||
<SidebarHeader className="titlebar-drag-region h-11 pl-20" />
|
||||
|
||||
<SidebarContent className="px-2">
|
||||
{/* New task button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start gap-2"
|
||||
onClick={onNewSession}
|
||||
>
|
||||
<Plus className="h-4 w-4 text-primary" />
|
||||
New task
|
||||
</Button>
|
||||
<SidebarContent className="px-2">
|
||||
{/* New task button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start gap-2"
|
||||
onClick={onNewSession}
|
||||
>
|
||||
<Plus className="h-4 w-4 text-primary" />
|
||||
New task
|
||||
</Button>
|
||||
|
||||
{/* Recent label */}
|
||||
<p className="px-2 py-2 text-xs text-muted-foreground/60">Recent</p>
|
||||
{/* Recent label */}
|
||||
<p className="px-2 py-2 text-xs text-muted-foreground/60">Recent</p>
|
||||
|
||||
{/* Session list */}
|
||||
<SessionList
|
||||
sessions={sessions}
|
||||
currentSessionId={currentSessionId}
|
||||
onSelect={onSelect}
|
||||
onDeleteRequest={setDeleteSession}
|
||||
/>
|
||||
</SidebarContent>
|
||||
</Sidebar>
|
||||
{/* Session list */}
|
||||
<SessionList
|
||||
sessions={sessions}
|
||||
currentSessionId={currentSessionId}
|
||||
onSelect={onSelect}
|
||||
onDeleteRequest={(session) => openModal('deleteSession', session)}
|
||||
/>
|
||||
</SidebarContent>
|
||||
|
||||
{/* Delete confirmation dialog */}
|
||||
<Dialog open={!!deleteSession} onOpenChange={(open) => !open && setDeleteSession(null)}>
|
||||
<DialogContent className="max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Delete Task</DialogTitle>
|
||||
<DialogDescription>
|
||||
Are you sure you want to delete "{deleteSession && getSessionTitle(deleteSession)}"? This action cannot be undone.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="ghost" onClick={() => setDeleteSession(null)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={handleConfirmDelete}>
|
||||
Delete
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
<SidebarFooter className="px-2 pb-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => openModal('settings')}
|
||||
className="w-full justify-center gap-2"
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
Setting
|
||||
</Button>
|
||||
</SidebarFooter>
|
||||
</Sidebar>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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
|
||||
<div className="flex flex-1 items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="mb-2 text-3xl font-bold">Multica</h1>
|
||||
<p className="mb-4 text-[var(--color-text-muted)]">
|
||||
<p className="mb-4 text-muted-foreground">
|
||||
{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 && (
|
||||
<div className="flex items-center gap-2 text-[var(--color-text-muted)]">
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<LoadingDots />
|
||||
<span className="text-sm">Agent is thinking...</span>
|
||||
</div>
|
||||
@@ -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 (
|
||||
<div className="flex justify-end">
|
||||
<div className="max-w-[85%] rounded-lg bg-[var(--color-surface)] px-4 py-3 text-sm">
|
||||
<div className="max-w-[85%] rounded-lg bg-muted px-4 py-3 text-sm">
|
||||
{message.content}
|
||||
</div>
|
||||
</div>
|
||||
@@ -237,7 +229,7 @@ function MessageBubble({ message }: MessageBubbleProps) {
|
||||
|
||||
{/* Tool calls */}
|
||||
{message.toolCalls.map((tc) => (
|
||||
<ToolCallLine key={tc.id} toolCall={tc} />
|
||||
<ToolCallItem key={tc.id} toolCall={tc} />
|
||||
))}
|
||||
|
||||
{/* Text content with markdown */}
|
||||
@@ -257,33 +249,33 @@ function MessageBubble({ message }: MessageBubbleProps) {
|
||||
const isBlock = className?.includes('language-')
|
||||
if (isBlock) {
|
||||
return (
|
||||
<code className="block bg-[var(--color-surface)] rounded-lg p-3 text-xs font-mono overflow-x-auto">
|
||||
<code className="block bg-muted rounded-lg p-3 text-xs font-mono overflow-x-auto">
|
||||
{children}
|
||||
</code>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<code className="bg-[var(--color-surface)] rounded px-1.5 py-0.5 text-xs font-mono">
|
||||
<code className="bg-muted rounded px-1.5 py-0.5 text-xs font-mono">
|
||||
{children}
|
||||
</code>
|
||||
)
|
||||
},
|
||||
pre: ({ children }) => (
|
||||
<pre className="bg-[var(--color-surface)] rounded-lg p-3 mb-3 overflow-x-auto text-xs">
|
||||
<pre className="bg-muted rounded-lg p-3 mb-3 overflow-x-auto text-xs">
|
||||
{children}
|
||||
</pre>
|
||||
),
|
||||
a: ({ href, children }) => (
|
||||
<a href={href} className="text-[var(--color-accent)] hover:underline" target="_blank" rel="noopener noreferrer">
|
||||
<a href={href} className="text-primary hover:underline" target="_blank" rel="noopener noreferrer">
|
||||
{children}
|
||||
</a>
|
||||
),
|
||||
blockquote: ({ children }) => (
|
||||
<blockquote className="border-l-2 border-[var(--color-border)] pl-3 italic text-[var(--color-text-muted)]">
|
||||
<blockquote className="border-l-2 border-border pl-3 italic text-muted-foreground">
|
||||
{children}
|
||||
</blockquote>
|
||||
),
|
||||
hr: () => <hr className="border-[var(--color-border)] my-4" />,
|
||||
hr: () => <hr className="border-border my-4" />,
|
||||
strong: ({ children }) => <strong className="font-semibold">{children}</strong>,
|
||||
em: ({ children }) => <em className="italic">{children}</em>,
|
||||
}}
|
||||
@@ -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 (
|
||||
<div className={`flex items-center gap-2 text-sm ${isFailed ? 'text-red-400' : 'text-[var(--color-text-muted)]'}`}>
|
||||
{/* Icon */}
|
||||
<span className="w-4 text-center font-mono opacity-60">{icon}</span>
|
||||
|
||||
{/* Action */}
|
||||
<span>{action}</span>
|
||||
|
||||
{/* Detail in code pill */}
|
||||
{detail && (
|
||||
<span className="rounded bg-[var(--color-surface)] px-2 py-0.5 font-mono text-xs truncate max-w-[300px]">
|
||||
{detail}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Running indicator */}
|
||||
{isRunning && <LoadingDots />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
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 (
|
||||
<span className="inline-flex gap-1">
|
||||
|
||||
@@ -52,7 +52,7 @@ export function MessageInput({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="border-t border-[var(--color-border)] p-4">
|
||||
<div className="border-t border-border p-4">
|
||||
<div className="mx-auto flex max-w-3xl gap-2">
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
@@ -62,7 +62,7 @@ export function MessageInput({
|
||||
placeholder={disabled ? 'Select or create a session first' : placeholder}
|
||||
disabled={disabled}
|
||||
rows={1}
|
||||
className="flex-1 resize-none rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-2 text-[var(--color-text)] outline-none placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-primary)] disabled:cursor-not-allowed disabled:opacity-50"
|
||||
className="flex-1 resize-none rounded-lg border border-border bg-muted px-4 py-2 text-foreground outline-none placeholder:text-muted-foreground focus:border-primary disabled:cursor-not-allowed disabled:opacity-50"
|
||||
/>
|
||||
|
||||
{isProcessing ? (
|
||||
@@ -77,7 +77,7 @@ export function MessageInput({
|
||||
</div>
|
||||
|
||||
{/* Hint */}
|
||||
<div className="mx-auto mt-1 max-w-3xl text-center text-xs text-[var(--color-text-muted)]">
|
||||
<div className="mx-auto mt-1 max-w-3xl text-center text-xs text-muted-foreground">
|
||||
Press Enter to send, Shift+Enter for new line
|
||||
</div>
|
||||
</div>
|
||||
|
||||
189
src/renderer/src/components/Modals.tsx
Normal file
189
src/renderer/src/components/Modals.tsx
Normal file
@@ -0,0 +1,189 @@
|
||||
/**
|
||||
* Global modals registry
|
||||
* All app modals are rendered here and controlled via modalStore
|
||||
*/
|
||||
import { useState } from 'react'
|
||||
import { useModalStore, useModal } from '../stores/modalStore'
|
||||
import { Settings } from './Settings'
|
||||
import type { MulticaSession } from '../../../shared/types'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
|
||||
interface ModalsProps {
|
||||
// Settings props
|
||||
defaultAgentId: string
|
||||
onSetDefaultAgent: (agentId: string) => void
|
||||
// NewSession props
|
||||
onCreateSession: (cwd: string) => Promise<void>
|
||||
// DeleteSession props
|
||||
onDeleteSession: (sessionId: string) => void
|
||||
}
|
||||
|
||||
export function Modals({
|
||||
defaultAgentId,
|
||||
onSetDefaultAgent,
|
||||
onCreateSession,
|
||||
onDeleteSession,
|
||||
}: ModalsProps) {
|
||||
const closeModal = useModalStore((s) => s.closeModal)
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsModal
|
||||
defaultAgentId={defaultAgentId}
|
||||
onSetDefaultAgent={onSetDefaultAgent}
|
||||
onClose={() => closeModal('settings')}
|
||||
/>
|
||||
<NewSessionModal
|
||||
onCreateSession={onCreateSession}
|
||||
onClose={() => closeModal('newSession')}
|
||||
/>
|
||||
<DeleteSessionModal
|
||||
onDeleteSession={onDeleteSession}
|
||||
onClose={() => closeModal('deleteSession')}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
// Settings Modal
|
||||
interface SettingsModalProps {
|
||||
defaultAgentId: string
|
||||
onSetDefaultAgent: (agentId: string) => void
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
function SettingsModal({ defaultAgentId, onSetDefaultAgent, onClose }: SettingsModalProps) {
|
||||
const { isOpen } = useModal('settings')
|
||||
|
||||
return (
|
||||
<Settings
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
defaultAgentId={defaultAgentId}
|
||||
onSetDefaultAgent={onSetDefaultAgent}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// New Session Modal
|
||||
interface NewSessionModalProps {
|
||||
onCreateSession: (cwd: string) => Promise<void>
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
function NewSessionModal({ onCreateSession, onClose }: NewSessionModalProps) {
|
||||
const { isOpen } = useModal('newSession')
|
||||
const [cwd, setCwd] = useState('')
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!cwd.trim()) return
|
||||
await onCreateSession(cwd.trim())
|
||||
setCwd('')
|
||||
onClose()
|
||||
}
|
||||
|
||||
const handleOpenChange = (open: boolean) => {
|
||||
if (!open) {
|
||||
setCwd('')
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={handleOpenChange}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>New Session</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-muted-foreground">Working Directory</label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
value={cwd}
|
||||
onChange={(e) => setCwd(e.target.value)}
|
||||
placeholder="Select a directory..."
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') handleCreate()
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={async () => {
|
||||
const dir = await window.electronAPI.selectDirectory()
|
||||
if (dir) setCwd(dir)
|
||||
}}
|
||||
>
|
||||
Browse...
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="ghost" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleCreate} disabled={!cwd.trim()}>
|
||||
Create
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
// Delete Session Modal
|
||||
interface DeleteSessionModalProps {
|
||||
onDeleteSession: (sessionId: string) => void
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
function DeleteSessionModal({ onDeleteSession, onClose }: DeleteSessionModalProps) {
|
||||
const { isOpen, data: session } = useModal('deleteSession')
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (session) {
|
||||
onDeleteSession(session.id)
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
|
||||
const getSessionTitle = (s: MulticaSession): string => {
|
||||
if (s.title) return s.title
|
||||
const parts = s.workingDirectory.split('/')
|
||||
return parts[parts.length - 1] || s.workingDirectory
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent className="max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Delete Task</DialogTitle>
|
||||
<DialogDescription>
|
||||
Are you sure you want to delete "{session && getSessionTitle(session)}"? This action
|
||||
cannot be undone.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="ghost" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={handleConfirm}>
|
||||
Delete
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
/**
|
||||
* Agent setup / Settings component
|
||||
* Using shadcn/ui components
|
||||
* Settings component - simplified agent selector
|
||||
* Using Linear-style design: minimal UI, direct interactions
|
||||
*/
|
||||
import { useState, useEffect } from 'react'
|
||||
import type { AgentCheckResult } from '../../../shared/electron-api'
|
||||
@@ -10,13 +10,10 @@ import {
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Sun, Moon, Monitor, Check, Loader2, RefreshCw } from 'lucide-react'
|
||||
import { Sun, Moon, Monitor, ChevronRight, ChevronDown, Loader2 } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface SettingsProps {
|
||||
isOpen: boolean
|
||||
@@ -25,28 +22,18 @@ interface SettingsProps {
|
||||
onSetDefaultAgent: (agentId: string) => void
|
||||
}
|
||||
|
||||
// Agent icons mapping
|
||||
const AGENT_ICONS: Record<string, string> = {
|
||||
'claude-code': '◉',
|
||||
opencode: '⌘',
|
||||
codex: '◈',
|
||||
gemini: '✦',
|
||||
}
|
||||
|
||||
type ThemeMode = 'light' | 'dark' | 'system'
|
||||
|
||||
export function Settings({ isOpen, onClose, defaultAgentId, onSetDefaultAgent }: SettingsProps) {
|
||||
const [agents, setAgents] = useState<AgentCheckResult[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [selectedAgent, setSelectedAgent] = useState<string>(defaultAgentId)
|
||||
const { mode, setMode } = useTheme()
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setSelectedAgent(defaultAgentId)
|
||||
loadAgents()
|
||||
}
|
||||
}, [isOpen, defaultAgentId])
|
||||
}, [isOpen])
|
||||
|
||||
async function loadAgents() {
|
||||
setLoading(true)
|
||||
@@ -60,20 +47,18 @@ export function Settings({ isOpen, onClose, defaultAgentId, onSetDefaultAgent }:
|
||||
}
|
||||
}
|
||||
|
||||
function handleDone() {
|
||||
if (selectedAgent !== defaultAgentId) {
|
||||
onSetDefaultAgent(selectedAgent)
|
||||
// Direct selection - Linear style, no confirm button needed
|
||||
function handleSelectAgent(agentId: string) {
|
||||
if (agentId !== defaultAgentId) {
|
||||
onSetDefaultAgent(agentId)
|
||||
}
|
||||
onClose()
|
||||
}
|
||||
|
||||
const installedCount = agents.filter(a => a.installed).length
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent className="max-w-md max-h-[90vh] overflow-y-auto">
|
||||
<DialogContent className="sm:max-w-5xl h-[85vh] max-h-[85vh] overflow-y-auto content-start">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-2xl">Settings</DialogTitle>
|
||||
<DialogTitle>Settings</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Appearance Section */}
|
||||
@@ -83,141 +68,134 @@ export function Settings({ isOpen, onClose, defaultAgentId, onSetDefaultAgent }:
|
||||
type="single"
|
||||
value={mode}
|
||||
onValueChange={(value) => value && setMode(value as ThemeMode)}
|
||||
className="w-full"
|
||||
>
|
||||
<ToggleGroupItem value="light" className="flex-1 gap-2">
|
||||
<ToggleGroupItem value="light" className="gap-2">
|
||||
<Sun className="h-4 w-4" />
|
||||
Light
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem value="dark" className="flex-1 gap-2">
|
||||
<ToggleGroupItem value="dark" className="gap-2">
|
||||
<Moon className="h-4 w-4" />
|
||||
Dark
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem value="system" className="flex-1 gap-2">
|
||||
<ToggleGroupItem value="system" className="gap-2">
|
||||
<Monitor className="h-4 w-4" />
|
||||
System
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
|
||||
{/* Separator */}
|
||||
<div className="border-t" />
|
||||
|
||||
{/* Agent Section */}
|
||||
<div className="space-y-3">
|
||||
<h2 className="text-sm font-medium text-muted-foreground">Default Agent</h2>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Select the default agent for new sessions. Each session runs its own agent process.
|
||||
</p>
|
||||
<h2 className="text-sm font-medium text-muted-foreground">AI Agent</h2>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
<div className="flex items-center justify-center py-4">
|
||||
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-1">
|
||||
{agents.map((agent) => (
|
||||
<AgentCard
|
||||
<AgentItem
|
||||
key={agent.id}
|
||||
agent={agent}
|
||||
isSelected={agent.id === selectedAgent}
|
||||
onSelect={() => agent.installed && setSelectedAgent(agent.id)}
|
||||
isSelected={agent.id === defaultAgentId}
|
||||
onSelect={handleSelectAgent}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<DialogFooter className="flex-row items-center justify-between border-t pt-4 sm:justify-between">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={loadAgents}
|
||||
disabled={loading}
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
Refresh
|
||||
</Button>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button variant="ghost" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleDone}
|
||||
disabled={!selectedAgent || installedCount === 0}
|
||||
>
|
||||
Done
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
interface AgentCardProps {
|
||||
interface AgentItemProps {
|
||||
agent: AgentCheckResult
|
||||
isSelected: boolean
|
||||
onSelect: () => void
|
||||
onSelect: (agentId: string) => void
|
||||
}
|
||||
|
||||
function AgentCard({ agent, isSelected, onSelect }: AgentCardProps) {
|
||||
const icon = AGENT_ICONS[agent.id] || '◇'
|
||||
function AgentItem({ agent, isSelected, onSelect }: AgentItemProps) {
|
||||
const [expanded, setExpanded] = useState(false)
|
||||
|
||||
const status = !agent.installed ? 'setup'
|
||||
: isSelected ? 'selected'
|
||||
: 'ready'
|
||||
|
||||
// Click row to expand/collapse only
|
||||
const handleRowClick = () => {
|
||||
setExpanded(!expanded)
|
||||
}
|
||||
|
||||
const handleSelectClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
onSelect(agent.id)
|
||||
}
|
||||
|
||||
return (
|
||||
<Card
|
||||
onClick={onSelect}
|
||||
className={`flex-row items-start gap-4 p-4 cursor-pointer transition-all ${
|
||||
!agent.installed
|
||||
? 'opacity-50 cursor-not-allowed'
|
||||
: isSelected
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'hover:border-muted-foreground'
|
||||
}`}
|
||||
<div
|
||||
className={cn(
|
||||
'rounded-md transition-colors duration-150 text-secondary-foreground hover:bg-muted/50 hover:text-foreground',
|
||||
status === 'selected' && 'bg-muted text-foreground',
|
||||
status === 'setup' && 'opacity-60 hover:opacity-100'
|
||||
)}
|
||||
>
|
||||
{/* Icon */}
|
||||
<div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-muted text-lg">
|
||||
{icon}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">{agent.name}</span>
|
||||
{agent.installed && (
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
<Check className="h-3 w-3" />
|
||||
installed
|
||||
</Badge>
|
||||
{/* Main row - click to expand */}
|
||||
<div
|
||||
className="flex items-center gap-2 px-3 py-2 cursor-pointer"
|
||||
onClick={handleRowClick}
|
||||
>
|
||||
<span className="p-0.5 text-muted-foreground">
|
||||
{expanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-0.5 text-sm text-muted-foreground">
|
||||
{getAgentDescription(agent.id)}
|
||||
</p>
|
||||
{!agent.installed && agent.installHint && (
|
||||
<p className="mt-2 font-mono text-xs text-muted-foreground">
|
||||
{agent.installHint}
|
||||
</p>
|
||||
</span>
|
||||
|
||||
<span className="flex-1 font-medium text-sm">{agent.name}</span>
|
||||
|
||||
{/* Right side: status or button */}
|
||||
{status === 'selected' ? (
|
||||
<span className="text-xs text-green-600">Default</span>
|
||||
) : status === 'ready' ? (
|
||||
<button
|
||||
onClick={handleSelectClick}
|
||||
className="text-xs px-2 py-0.5 rounded bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
|
||||
>
|
||||
Use
|
||||
</button>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">Setup required</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Selection indicator */}
|
||||
<div className={`flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border-2 transition-colors ${
|
||||
isSelected
|
||||
? 'border-primary bg-primary'
|
||||
: 'border-muted-foreground/30'
|
||||
}`}>
|
||||
{isSelected && <Check className="h-3 w-3 text-primary-foreground" />}
|
||||
</div>
|
||||
</Card>
|
||||
{/* Expanded content */}
|
||||
{expanded && (
|
||||
<div className="pl-9 pr-3 pb-2 text-sm text-muted-foreground">
|
||||
{status === 'setup' && agent.installHint ? (
|
||||
<p className="text-xs">
|
||||
To install, run in Terminal: <code className="font-mono bg-muted px-1 py-0.5 rounded">{agent.installHint}</code>
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-xs">{getAgentDescription(agent.id)}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function getAgentDescription(agentId: string): string {
|
||||
const descriptions: Record<string, string> = {
|
||||
'claude-code': 'Anthropic\'s Claude Code via ACP',
|
||||
opencode: 'Terminal-based coding assistant',
|
||||
codex: 'OpenAI\'s Codex CLI via ACP',
|
||||
gemini: 'Google\'s Gemini CLI agent',
|
||||
'claude-code': 'Best for complex reasoning tasks. By Anthropic.',
|
||||
opencode: 'Fast and lightweight. Open source.',
|
||||
codex: 'OpenAI\'s code assistant. By OpenAI.',
|
||||
gemini: 'Google\'s AI assistant. By Google.',
|
||||
}
|
||||
return descriptions[agentId] || 'Coding assistant'
|
||||
return descriptions[agentId] || 'AI coding assistant'
|
||||
}
|
||||
|
||||
@@ -2,23 +2,19 @@
|
||||
* Status bar component - shows session info and running status
|
||||
*/
|
||||
import type { MulticaSession } from '../../../shared/types'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { SidebarTrigger, useSidebar } from '@/components/ui/sidebar'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Settings } from 'lucide-react'
|
||||
|
||||
interface StatusBarProps {
|
||||
runningSessionsCount: number
|
||||
currentSession: MulticaSession | null
|
||||
isCurrentSessionRunning: boolean
|
||||
onOpenSettings: () => void
|
||||
}
|
||||
|
||||
export function StatusBar({
|
||||
runningSessionsCount,
|
||||
currentSession,
|
||||
isCurrentSessionRunning,
|
||||
onOpenSettings,
|
||||
}: StatusBarProps) {
|
||||
const { state, isMobile } = useSidebar()
|
||||
|
||||
@@ -38,25 +34,21 @@ export function StatusBar({
|
||||
<span className="text-sm font-medium">
|
||||
{currentSession.title || currentSession.workingDirectory.split('/').pop()}
|
||||
</span>
|
||||
<span className="text-xs text-[var(--color-text-muted)]">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{currentSession.workingDirectory}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="text-sm text-[var(--color-text-muted)]">No session selected</span>
|
||||
<span className="text-sm text-muted-foreground">No session selected</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right: Status + Settings */}
|
||||
{/* Right: Status */}
|
||||
<div className="titlebar-no-drag flex items-center gap-3">
|
||||
<SessionStatusBadge
|
||||
isRunning={isCurrentSessionRunning}
|
||||
runningCount={runningSessionsCount}
|
||||
/>
|
||||
|
||||
<Button variant="ghost" size="icon-sm" onClick={onOpenSettings} title="Settings">
|
||||
<Settings className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@@ -78,7 +70,7 @@ function SessionStatusBadge({ isRunning, runningCount }: SessionStatusBadgeProps
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`h-2 w-2 rounded-full ${dotColor}`} />
|
||||
<span className="text-xs text-[var(--color-text-muted)]">{text}</span>
|
||||
<span className="text-xs text-muted-foreground">{text}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
135
src/renderer/src/components/ToolCallItem.tsx
Normal file
135
src/renderer/src/components/ToolCallItem.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
/**
|
||||
* Tool call item component - displays tool calls with expandable details
|
||||
*/
|
||||
import { useState } from 'react'
|
||||
import { ChevronRight } from 'lucide-react'
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
export interface ToolCall {
|
||||
id: string
|
||||
title: string
|
||||
status: string
|
||||
kind?: string
|
||||
input?: string
|
||||
output?: string
|
||||
}
|
||||
|
||||
// Status dot component - displays tool call status with color and animation
|
||||
function StatusDot({ status }: { status: string }) {
|
||||
const statusStyles: Record<string, string> = {
|
||||
pending: 'bg-[var(--tool-pending)]',
|
||||
running: 'bg-[var(--tool-running)] animate-[glow-pulse_2s_ease-in-out_infinite]',
|
||||
in_progress: 'bg-[var(--tool-running)] animate-[glow-pulse_2s_ease-in-out_infinite]',
|
||||
completed: 'bg-[var(--tool-success)]',
|
||||
failed: 'bg-[var(--tool-error)]',
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
'h-1.5 w-1.5 rounded-full flex-shrink-0',
|
||||
statusStyles[status] || statusStyles.pending
|
||||
)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// Tool call details - shows input and output separated by a line
|
||||
function ToolCallDetails({ toolCall }: { toolCall: ToolCall }) {
|
||||
return (
|
||||
<div className="ml-4 mt-1 mb-2 bg-muted/50 rounded-md p-2">
|
||||
{/* Input */}
|
||||
{toolCall.input && (
|
||||
<div className="overflow-auto max-h-[120px]">
|
||||
<pre className="text-xs font-mono text-muted-foreground whitespace-pre-wrap break-all">
|
||||
{formatJson(toolCall.input)}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Separator */}
|
||||
{toolCall.input && toolCall.output && (
|
||||
<div className="my-1.5 border-t border-border/40" />
|
||||
)}
|
||||
|
||||
{/* Output */}
|
||||
{toolCall.output && (
|
||||
<div className="overflow-auto max-h-[160px]">
|
||||
<pre className="text-xs font-mono text-muted-foreground/70 whitespace-pre-wrap break-all">
|
||||
{toolCall.output}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Format JSON string for display
|
||||
function formatJson(input: string): string {
|
||||
try {
|
||||
const parsed = JSON.parse(input)
|
||||
return JSON.stringify(parsed, null, 2)
|
||||
} catch {
|
||||
return input
|
||||
}
|
||||
}
|
||||
|
||||
// Tool call item - expandable display with input/output details
|
||||
export function ToolCallItem({ toolCall }: { toolCall: ToolCall }) {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
const hasDetails = toolCall.input || toolCall.output
|
||||
const isFailed = toolCall.status === 'failed'
|
||||
const kind = toolCall.kind || 'tool'
|
||||
|
||||
return (
|
||||
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
|
||||
<CollapsibleTrigger
|
||||
className={cn(
|
||||
'group flex w-full items-center gap-2 rounded px-1.5 py-0.5',
|
||||
'text-sm transition-colors duration-100',
|
||||
'hover:bg-muted/20',
|
||||
hasDetails && 'cursor-pointer',
|
||||
!hasDetails && 'cursor-default'
|
||||
)}
|
||||
disabled={!hasDetails}
|
||||
>
|
||||
{/* Status dot */}
|
||||
<StatusDot status={toolCall.status} />
|
||||
|
||||
{/* Kind */}
|
||||
<span className={cn(
|
||||
'text-secondary-foreground',
|
||||
isFailed && 'text-[var(--tool-error)]'
|
||||
)}>
|
||||
{kind}
|
||||
</span>
|
||||
|
||||
{/* Title (file path etc) - truncate */}
|
||||
{toolCall.title && (
|
||||
<span className="truncate max-w-[400px] text-muted-foreground text-xs">
|
||||
{toolCall.title}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Expand indicator */}
|
||||
{hasDetails && (
|
||||
<ChevronRight
|
||||
className={cn(
|
||||
'ml-auto h-3 w-3 text-muted-foreground/40 transition-all duration-150',
|
||||
'opacity-0 group-hover:opacity-100',
|
||||
isOpen && 'rotate-90 opacity-100'
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</CollapsibleTrigger>
|
||||
|
||||
{hasDetails && (
|
||||
<CollapsibleContent className="overflow-hidden">
|
||||
<ToolCallDetails toolCall={toolCall} />
|
||||
</CollapsibleContent>
|
||||
)}
|
||||
</Collapsible>
|
||||
)
|
||||
}
|
||||
57
src/renderer/src/stores/modalStore.ts
Normal file
57
src/renderer/src/stores/modalStore.ts
Normal file
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* Global modal state management using Zustand
|
||||
*/
|
||||
import { create } from 'zustand'
|
||||
import type { MulticaSession } from '../../../shared/types'
|
||||
|
||||
// Modal types
|
||||
export type ModalType = 'settings' | 'newSession' | 'deleteSession'
|
||||
|
||||
// Modal data types
|
||||
interface ModalDataMap {
|
||||
settings: undefined
|
||||
newSession: undefined
|
||||
deleteSession: MulticaSession
|
||||
}
|
||||
|
||||
interface ModalState<T extends ModalType> {
|
||||
isOpen: boolean
|
||||
data?: ModalDataMap[T]
|
||||
}
|
||||
|
||||
interface ModalStore {
|
||||
modals: {
|
||||
[K in ModalType]: ModalState<K>
|
||||
}
|
||||
openModal: <T extends ModalType>(type: T, data?: ModalDataMap[T]) => void
|
||||
closeModal: (type: ModalType) => void
|
||||
}
|
||||
|
||||
export const useModalStore = create<ModalStore>((set) => ({
|
||||
modals: {
|
||||
settings: { isOpen: false },
|
||||
newSession: { isOpen: false },
|
||||
deleteSession: { isOpen: false },
|
||||
},
|
||||
openModal: (type, data) =>
|
||||
set((state) => ({
|
||||
modals: {
|
||||
...state.modals,
|
||||
[type]: { isOpen: true, data },
|
||||
},
|
||||
})),
|
||||
closeModal: (type) =>
|
||||
set((state) => ({
|
||||
modals: {
|
||||
...state.modals,
|
||||
[type]: { isOpen: false, data: undefined },
|
||||
},
|
||||
})),
|
||||
}))
|
||||
|
||||
// Convenience selectors
|
||||
export const useModal = <T extends ModalType>(type: T) =>
|
||||
useModalStore((state) => state.modals[type] as ModalState<T>)
|
||||
|
||||
export const useOpenModal = () => useModalStore((state) => state.openModal)
|
||||
export const useCloseModal = () => useModalStore((state) => state.closeModal)
|
||||
@@ -3,45 +3,12 @@
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/* Dark theme (default) */
|
||||
:root,
|
||||
.dark {
|
||||
--color-primary: #292929;
|
||||
--color-primary-dark: #363636;
|
||||
--color-primary-text: #ffffff;
|
||||
--color-accent: #22c55e;
|
||||
--color-accent-muted: rgba(34, 197, 94, 0.15);
|
||||
--color-background: #0f0f0f;
|
||||
--color-surface: #1a1a1a;
|
||||
--color-surface-hover: #252525;
|
||||
--color-border: #2e2e2e;
|
||||
--color-text: #ffffff;
|
||||
--color-text-muted: #a1a1aa;
|
||||
}
|
||||
|
||||
/* Light theme */
|
||||
.light {
|
||||
--color-primary: #f5f5f5;
|
||||
--color-primary-dark: #e5e5e5;
|
||||
--color-primary-text: #171717;
|
||||
--color-accent: #16a34a;
|
||||
--color-accent-muted: rgba(22, 163, 74, 0.1);
|
||||
--color-background: #ffffff;
|
||||
--color-surface: #f5f5f5;
|
||||
--color-surface-hover: #e5e5e5;
|
||||
--color-border: #e5e5e5;
|
||||
--color-text: #171717;
|
||||
--color-text-muted: #525252;
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family:
|
||||
-apple-system,
|
||||
@@ -73,12 +40,12 @@ body {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-border);
|
||||
background-color: var(--border);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--color-text-muted);
|
||||
background-color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
@@ -155,6 +122,12 @@ body {
|
||||
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--sidebar-border: oklch(0.92 0.004 286.32);
|
||||
--sidebar-ring: oklch(0.705 0.015 286.067);
|
||||
|
||||
/* Tool call status colors */
|
||||
--tool-pending: oklch(0.55 0.05 250);
|
||||
--tool-running: oklch(0.6 0.18 250);
|
||||
--tool-success: oklch(0.72 0.12 145);
|
||||
--tool-error: oklch(0.65 0.2 25);
|
||||
}
|
||||
|
||||
.dark {
|
||||
@@ -189,6 +162,12 @@ body {
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.552 0.016 285.938);
|
||||
|
||||
/* Tool call status colors */
|
||||
--tool-pending: oklch(0.5 0.08 250);
|
||||
--tool-running: oklch(0.65 0.2 250);
|
||||
--tool-success: oklch(0.65 0.15 145);
|
||||
--tool-error: oklch(0.7 0.2 22);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -199,3 +178,13 @@ body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tool call status glow animation */
|
||||
@keyframes glow-pulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 0 var(--tool-running);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 3px oklch(0.6 0.2 250 / 0);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user