highperfocused/multica
1
0
Fork 0
mirror of https://github.com/multica-ai/multica.git synced 2026-07-15 14:19:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add zustand modal store and clean up theme variables

Browse Source 
- Add zustand for global modal state management
- Create modalStore with settings/newSession/deleteSession modals
- Create Modals.tsx component for centralized modal rendering
- Move Settings button to sidebar footer
- Clean up old --color-* CSS variables, use shadcn standard variables
- Delete unused base.css and main.css files
- Update components to use Tailwind classes (bg-background, text-foreground, etc.)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Naiyuan Qing
2026-01-14 16:45:40 +08:00
parent 780e25908f
commit 71ab27d02a
13 changed files with 353 additions and 455 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@@ -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
View File

@@ -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: {}

96
src/renderer/src/App.tsx
View File

@@ -1,21 +1,14 @@
/**
* Main App component
*/
import { useState, useEffect } from 'react'
import { useEffect } 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 {
@@ -39,37 +32,25 @@ function AppContent(): React.JSX.Element {
clearError,
} = useApp()
// New session dialog state
const [showNewSession, setShowNewSession] = useState(false)
const [newSessionCwd, setNewSessionCwd] = useState('')
// Settings dialog state
const [showSettings, setShowSettings] = useState(false)
const openModal = useModalStore((s) => s.openModal)
// Auto-show new session dialog when agent is running but no session
useEffect(() => {
if (agentStatus.state === 'running' && !currentSession && sessions.length === 0) {
setNewSessionCwd('')
setShowNewSession(true)
openModal('newSession')
}
}, [agentStatus.state, currentSession, sessions.length])
}, [agentStatus.state, currentSession, sessions.length, openModal])
const handleNewSession = () => {
setNewSessionCwd('')
setShowNewSession(true)
openModal('newSession')
}
const handleCreateSession = async () => {
if (!newSessionCwd.trim()) return
const handleCreateSession = async (cwd: string) => {
// Ensure agent is running
if (agentStatus.state !== 'running') {
await startAgent('opencode')
}
await createSession(newSessionCwd.trim())
setShowNewSession(false)
setNewSessionCwd('')
await createSession(cwd)
}
const handleSelectSession = async (sessionId: string) => {
@@ -84,7 +65,7 @@ function AppContent(): React.JSX.Element {
}
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">
@@ -102,7 +83,6 @@ function AppContent(): React.JSX.Element {
sessions={sessions}
currentSessionId={currentSession?.id ?? null}
onSelect={handleSelectSession}
onDelete={deleteSession}
onNewSession={handleNewSession}
/>
@@ -114,7 +94,6 @@ function AppContent(): React.JSX.Element {
currentSession={currentSession}
onStartAgent={() => startAgent('opencode')}
onStopAgent={stopAgent}
onOpenSettings={() => setShowSettings(true)}
/>
{/* Chat view */}
@@ -135,57 +114,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)}
{/* Global modals */}
<Modals
currentAgentId={agentStatus.state === 'running' ? agentStatus.agentId : null}
onSwitchAgent={switchAgent}
onCreateSession={handleCreateSession}
onDeleteSession={deleteSession}
/>
</div>
)

67
src/renderer/src/assets/base.css
View File

@@ -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;
}

171
src/renderer/src/assets/main.css
View File

@@ -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;
}
}

119
src/renderer/src/components/AppSidebar.tsx
View File

@@ -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"
)}
>
{/* 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">
@@ -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>
)
}

22
src/renderer/src/components/ChatView.tsx
View File

@@ -31,7 +31,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 +54,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>
@@ -220,7 +220,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>
@@ -257,33 +257,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>,
}}
@@ -377,7 +377,7 @@ function ToolCallLine({ toolCall }: { toolCall: ToolCall }) {
const isFailed = toolCall.status === 'failed'
return (
<div className={`flex items-center gap-2 text-sm ${isFailed ? 'text-red-400' : 'text-[var(--color-text-muted)]'}`}>
<div className={`flex items-center gap-2 text-sm ${isFailed ? 'text-red-400' : 'text-muted-foreground'}`}>
{/* Icon */}
<span className="w-4 text-center font-mono opacity-60">{icon}</span>
@@ -386,7 +386,7 @@ function ToolCallLine({ toolCall }: { toolCall: ToolCall }) {
{/* 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]">
<span className="rounded bg-muted px-2 py-0.5 font-mono text-xs truncate max-w-[300px]">
{detail}
</span>
)}

6
src/renderer/src/components/MessageInput.tsx
View File

@@ -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
View 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
currentAgentId: string | null
onSwitchAgent: (agentId: string) => Promise<void>
// NewSession props
onCreateSession: (cwd: string) => Promise<void>
// DeleteSession props
onDeleteSession: (sessionId: string) => void
}
export function Modals({
currentAgentId,
onSwitchAgent,
onCreateSession,
onDeleteSession,
}: ModalsProps) {
const closeModal = useModalStore((s) => s.closeModal)
return (
<>
<SettingsModal
currentAgentId={currentAgentId}
onSwitchAgent={onSwitchAgent}
onClose={() => closeModal('settings')}
/>
<NewSessionModal
onCreateSession={onCreateSession}
onClose={() => closeModal('newSession')}
/>
<DeleteSessionModal
onDeleteSession={onDeleteSession}
onClose={() => closeModal('deleteSession')}
/>
</>
)
}
// Settings Modal
interface SettingsModalProps {
currentAgentId: string | null
onSwitchAgent: (agentId: string) => Promise<void>
onClose: () => void
}
function SettingsModal({ currentAgentId, onSwitchAgent, onClose }: SettingsModalProps) {
const { isOpen } = useModal('settings')
return (
<Settings
isOpen={isOpen}
onClose={onClose}
currentAgentId={currentAgentId}
onSwitchAgent={onSwitchAgent}
/>
)
}
// 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>
)
}

2
src/renderer/src/components/Settings.tsx
View File

@@ -93,7 +93,7 @@ export function Settings({ isOpen, onClose, currentAgentId, onSwitchAgent }: Set
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-[95vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="text-2xl">Settings</DialogTitle>
</DialogHeader>

13
src/renderer/src/components/StatusBar.tsx
View File

@@ -5,14 +5,12 @@ import type { AgentStatus, 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 {
agentStatus: AgentStatus
currentSession: MulticaSession | null
onStartAgent: () => void
onStopAgent: () => void
onOpenSettings: () => void
}
export function StatusBar({
@@ -20,7 +18,6 @@ export function StatusBar({
currentSession,
onStartAgent,
onStopAgent,
onOpenSettings,
}: StatusBarProps) {
const { state, isMobile } = useSidebar()
@@ -40,12 +37,12 @@ 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>
@@ -62,10 +59,6 @@ export function StatusBar({
Stop
</Button>
) : null}
<Button variant="ghost" size="icon-sm" onClick={onOpenSettings} title="Settings">
<Settings className="h-4 w-4" />
</Button>
</div>
</div>
)
@@ -101,7 +94,7 @@ function AgentStatusBadge({ status }: AgentStatusBadgeProps) {
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>
)
}

57
src/renderer/src/stores/modalStore.ts Normal file
View 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)

37
src/renderer/src/styles/index.css
View File

@@ -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 {