@@ -138,86 +153,83 @@ export function ToolList({
)}
{/* Tool groups */}
-
- {groups.map((group) => {
- const isExpanded = expandedGroups.has(group.id)
- const GroupIcon = GROUP_ICONS[group.id] || Code
+ {groups.map((group) => {
+ const isExpanded = expandedGroups.has(group.id)
+ const GroupIcon = GROUP_ICONS[group.id] || Code
- return (
-
- {/* Group header */}
-
)
diff --git a/apps/desktop/src/renderer/src/pages/agent/profile.tsx b/apps/desktop/src/renderer/src/pages/agent/profile.tsx
new file mode 100644
index 00000000..63211676
--- /dev/null
+++ b/apps/desktop/src/renderer/src/pages/agent/profile.tsx
@@ -0,0 +1,358 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { Button } from '@multica/ui/components/ui/button'
+import { Input } from '@multica/ui/components/ui/input'
+import { Textarea } from '@multica/ui/components/ui/textarea'
+import {
+ Combobox,
+ ComboboxInput,
+ ComboboxContent,
+ ComboboxList,
+ ComboboxItem,
+ ComboboxEmpty,
+} from '@multica/ui/components/ui/combobox'
+import {
+ Loader2,
+ Check,
+ AlertCircle,
+ ChevronDown,
+} from 'lucide-react'
+import { ApiKeyDialog } from '../../components/api-key-dialog'
+import { OAuthDialog } from '../../components/oauth-dialog'
+import { useProviderStore } from '../../stores/provider'
+import { toast } from '@multica/ui/components/ui/sonner'
+import { cn } from '@multica/ui/lib/utils'
+
+export default function ProfilePage() {
+ const { providers, current, setProvider, refresh, loading: providerLoading } = useProviderStore()
+
+ const [profileLoading, setProfileLoading] = useState(true)
+ const [saving, setSaving] = useState(false)
+ const [name, setName] = useState('')
+ const [userContent, setUserContent] = useState('')
+ const [hasChanges, setHasChanges] = useState(false)
+ const [originalName, setOriginalName] = useState('')
+ const [originalUserContent, setOriginalUserContent] = useState('')
+
+ const [providerDropdownOpen, setProviderDropdownOpen] = useState(false)
+ const [switching, setSwitching] = useState(false)
+ const [apiKeyDialogOpen, setApiKeyDialogOpen] = useState(false)
+ const [oauthDialogOpen, setOauthDialogOpen] = useState(false)
+ const [selectedProvider, setSelectedProvider] = useState<{
+ id: string
+ name: string
+ authMethod: 'api-key' | 'oauth'
+ loginCommand?: string
+ } | null>(null)
+ const dropdownRef = useRef
(null)
+
+
+ useEffect(() => {
+ loadProfile()
+ }, [])
+
+ useEffect(() => {
+ setHasChanges(name !== originalName || userContent !== originalUserContent)
+ }, [name, userContent, originalName, originalUserContent])
+
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+ setProviderDropdownOpen(false)
+ }
+ }
+ if (providerDropdownOpen) {
+ document.addEventListener('mousedown', handleClickOutside)
+ }
+ return () => document.removeEventListener('mousedown', handleClickOutside)
+ }, [providerDropdownOpen])
+
+ const loadProfile = async () => {
+ setProfileLoading(true)
+ try {
+ const data = await window.electronAPI.profile.get()
+ const loadedName = data.name ?? ''
+ const loadedUserContent = data.userContent ?? ''
+ setName(loadedName)
+ setUserContent(loadedUserContent)
+ setOriginalName(loadedName)
+ setOriginalUserContent(loadedUserContent)
+ } catch (err) {
+ console.error('Failed to load profile:', err)
+ toast.error('Failed to load profile')
+ } finally {
+ setProfileLoading(false)
+ }
+ }
+
+ const handleSaveProfile = useCallback(async () => {
+ setSaving(true)
+ try {
+ await window.electronAPI.profile.updateName(name)
+ await window.electronAPI.profile.updateUser(userContent)
+ setOriginalName(name)
+ setOriginalUserContent(userContent)
+ setHasChanges(false)
+ toast.success('Profile saved')
+ } catch (err) {
+ console.error('Failed to save profile:', err)
+ toast.error('Failed to save profile')
+ } finally {
+ setSaving(false)
+ }
+ }, [name, userContent])
+
+ // Keep ref to latest save function
+ const saveRef = useRef(handleSaveProfile)
+ saveRef.current = handleSaveProfile
+
+ // Show/hide persistent toast for unsaved changes
+ useEffect(() => {
+ const toastId = 'unsaved-changes'
+ if (hasChanges) {
+ toast('Unsaved changes', {
+ id: toastId,
+ duration: Infinity,
+ action: {
+ label: 'Save',
+ onClick: () => saveRef.current()
+ }
+ })
+ } else {
+ toast.dismiss(toastId)
+ }
+ }, [hasChanges])
+
+ const handleProviderClick = async (p: typeof providers[0]) => {
+ if (!p.available) {
+ setSelectedProvider({
+ id: p.id,
+ name: p.name,
+ authMethod: p.authMethod,
+ loginCommand: p.loginCommand,
+ })
+ setProviderDropdownOpen(false)
+ if (p.authMethod === 'oauth') {
+ setOauthDialogOpen(true)
+ } else {
+ setApiKeyDialogOpen(true)
+ }
+ return
+ }
+ setSwitching(true)
+ setProviderDropdownOpen(false)
+ const result = await setProvider(p.id)
+ setSwitching(false)
+ if (!result.ok) {
+ toast.error('Failed to switch provider')
+ }
+ }
+
+ const handleModelSelect = async (model: string) => {
+ if (!model || model === current?.model || !current?.provider) return
+ setSwitching(true)
+ const result = await setProvider(current.provider, model)
+ setSwitching(false)
+ if (!result.ok) {
+ toast.error('Failed to switch model')
+ }
+ }
+
+ if (profileLoading || providerLoading) {
+ return (
+
+
+
+ )
+ }
+
+ const currentProvider = providers.find(p => p.id === current?.provider)
+
+ return (
+
+
+ {/* Page Header */}
+
+
Profile
+
+ Configure your agent's identity and the model that powers it.
+
+
+
+ {/* Model Section */}
+
+
+
Model
+
AI model for your agent
+
+ {/* Provider Row */}
+
+
+
Provider
+
LLM API connection
+
+
+
+
+ {providerDropdownOpen && (
+
+ {providers.map((p) => (
+
+ ))}
+
+ )}
+
+
+
+ {/* Model Row - with Combobox */}
+ {currentProvider && (
+
+
+
Model
+
Select or enter model ID
+
+
{
+ if (value) handleModelSelect(value)
+ }}
+ disabled={switching}
+ >
+
+
+ No models found
+
+ {(model) => (
+
+ {model}
+
+ )}
+
+
+
+
+ )}
+
+ Select a provider and add your API key to enable your agent.
+
+ )}
+
+
+ {/* Identity Section */}
+
+
+
Identity
+
How your agent presents itself
+
+
+
+
Agent Name
+
Personalize interactions
+
+
setName(e.target.value)}
+ placeholder="My Assistant"
+ className="h-8 w-48 text-sm"
+ />
+
+
+
+ {/* Personalization Section */}
+
+
+
Personalization
+
Help the agent understand you better
+