+
-
- No devices connected yet.
-
+
No devices connected yet.
)
}
diff --git a/apps/desktop/src/renderer/src/components/qr-code.tsx b/apps/desktop/src/renderer/src/components/qr-code.tsx
index 28026d49..0dd5eef6 100644
--- a/apps/desktop/src/renderer/src/components/qr-code.tsx
+++ b/apps/desktop/src/renderer/src/components/qr-code.tsx
@@ -1,7 +1,9 @@
-import { useState, useEffect, useCallback, useMemo } from 'react'
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
import { QRCodeSVG } from 'qrcode.react'
import { Button } from '@multica/ui/components/ui/button'
-import { RefreshCw, CheckCircle, Copy } from 'lucide-react'
+import { Copy, Check } from 'lucide-react'
+
+// ============ Types ============
export interface QRCodeData {
type: 'multica-connect'
@@ -16,51 +18,177 @@ export interface ConnectionQRCodeProps {
gateway: string
hubId: string
agentId: string
- /** QR code expiry time in seconds (default: 30) */
expirySeconds?: number
- /** Size of the QR code in pixels (default: 180) */
size?: number
- /** Callback when token is refreshed */
- onRefresh?: (data: QRCodeData) => void
}
-/**
- * Generate a secure random token for QR code authentication
- */
+// ============ Hooks ============
+
+/** Generate a secure random token */
function generateToken(): string {
return crypto.randomUUID()
}
/**
- * ConnectionQRCode - A QR code component for sharing Agent connection info
+ * Hook to manage QR token lifecycle
+ * - Generates token on mount
+ * - Auto-refreshes when expired
+ * - Registers token with Hub
+ */
+function useQRToken(agentId: string, expirySeconds: number) {
+ const [token, setToken] = useState(generateToken)
+ const [expiresAt, setExpiresAt] = useState(() => Date.now() + expirySeconds * 1000)
+
+ const refresh = useCallback(() => {
+ const newToken = generateToken()
+ const newExpiry = Date.now() + expirySeconds * 1000
+ setToken(newToken)
+ setExpiresAt(newExpiry)
+ window.electronAPI?.hub.registerToken(newToken, agentId, newExpiry)
+ }, [agentId, expirySeconds])
+
+ // Register initial token
+ useEffect(() => {
+ window.electronAPI?.hub.registerToken(token, agentId, expiresAt)
+ }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+ return { token, expiresAt, refresh }
+}
+
+/**
+ * Hook for countdown timer
+ * Returns remaining seconds, auto-updates every second
+ */
+function useCountdown(expiresAt: number, onExpire: () => void) {
+ const [remaining, setRemaining] = useState(() =>
+ Math.max(0, Math.ceil((expiresAt - Date.now()) / 1000))
+ )
+ const onExpireRef = useRef(onExpire)
+ onExpireRef.current = onExpire
+
+ useEffect(() => {
+ // Reset when expiresAt changes
+ setRemaining(Math.max(0, Math.ceil((expiresAt - Date.now()) / 1000)))
+
+ const id = setInterval(() => {
+ const next = Math.max(0, Math.ceil((expiresAt - Date.now()) / 1000))
+ setRemaining(next)
+ if (next === 0) onExpireRef.current()
+ }, 1000)
+
+ return () => clearInterval(id)
+ }, [expiresAt])
+
+ return remaining
+}
+
+/**
+ * Hook for clipboard copy with feedback
+ */
+function useCopyToClipboard(timeout = 2000) {
+ const [copied, setCopied] = useState(false)
+
+ const copy = useCallback(async (text: string) => {
+ try {
+ await navigator.clipboard.writeText(text)
+ setCopied(true)
+ setTimeout(() => setCopied(false), timeout)
+ return true
+ } catch {
+ return false
+ }
+ }, [timeout])
+
+ return { copied, copy }
+}
+
+// ============ Components ============
+
+/** Corner accent decoration */
+function CornerAccent({ position }: { position: 'tl' | 'tr' | 'bl' | 'br' }) {
+ const positionClasses = {
+ tl: '-top-2 -left-2 border-t-2 border-l-2 rounded-tl-lg',
+ tr: '-top-2 -right-2 border-t-2 border-r-2 rounded-tr-lg',
+ bl: '-bottom-2 -left-2 border-b-2 border-l-2 rounded-bl-lg',
+ br: '-bottom-2 -right-2 border-b-2 border-r-2 rounded-br-lg',
+ }
+
+ return (
+
+ )
+}
+
+/** QR code frame with corner accents */
+function QRCodeFrame({ children }: { children: React.ReactNode }) {
+ return (
+
+ )
+}
+
+/** Format seconds as M:SS */
+function formatTime(seconds: number): string {
+ const m = Math.floor(seconds / 60)
+ const s = seconds % 60
+ return `${m}:${s.toString().padStart(2, '0')}`
+}
+
+/** Expiry timer display */
+function ExpiryTimer({ remaining }: { remaining: number }) {
+ // Derive display state from remaining seconds (no extra state needed)
+ const isWarning = remaining > 0 && remaining < 10
+
+ return (
+
+ Expires in {formatTime(remaining)}
+
+ )
+}
+
+/** Copy link button */
+function CopyLinkButton({ url }: { url: string }) {
+ const { copied, copy } = useCopyToClipboard()
+
+ return (
+
+ )
+}
+
+// ============ Main Component ============
+
+/**
+ * ConnectionQRCode - QR code for mobile app connection
*
- * Features:
- * - Generates time-limited tokens for secure connections
- * - Countdown timer showing expiry time
- * - Refresh button to generate new token
- * - Copy link button for manual sharing
- * - Decorative corner accents for visual polish
+ * Architecture:
+ * - useQRToken: manages token generation and Hub registration
+ * - useCountdown: handles timer with auto-refresh on expiry
+ * - Pure child components for display (no state)
*/
export function ConnectionQRCode({
gateway,
hubId,
agentId,
expirySeconds = 30,
- size = 180,
- onRefresh,
+ size = 200,
}: ConnectionQRCodeProps) {
- const [token, setToken] = useState(generateToken)
- const [expiresAt, setExpiresAt] = useState(() => Date.now() + expirySeconds * 1000)
- const [remainingSeconds, setRemainingSeconds] = useState(expirySeconds)
- const [copied, setCopied] = useState(false)
+ const { token, expiresAt, refresh } = useQRToken(agentId, expirySeconds)
+ const remaining = useCountdown(expiresAt, refresh)
- // Register initial token with Hub on mount
- useEffect(() => {
- window.electronAPI?.hub.registerToken(token, agentId, expiresAt)
- // eslint-disable-next-line react-hooks/exhaustive-deps -- only on mount
- }, [])
-
- // QR code data payload
+ // Derive QR data and URL from current token (computed during render)
const qrData: QRCodeData = useMemo(
() => ({
type: 'multica-connect',
@@ -73,7 +201,6 @@ export function ConnectionQRCode({
[gateway, hubId, agentId, token, expiresAt]
)
- // URL format for the connection
const connectionUrl = useMemo(() => {
const params = new URLSearchParams({
gateway,
@@ -85,130 +212,22 @@ export function ConnectionQRCode({
return `multica://connect?${params.toString()}`
}, [gateway, hubId, agentId, token, expiresAt])
- // Refresh token handler
- const handleRefresh = useCallback(() => {
- const newToken = generateToken()
- const newExpires = Date.now() + expirySeconds * 1000
-
- setToken(newToken)
- setExpiresAt(newExpires)
- setRemainingSeconds(expirySeconds)
-
- // Register new token with Hub for verification
- window.electronAPI?.hub.registerToken(newToken, agentId, newExpires)
-
- if (onRefresh) {
- onRefresh({
- type: 'multica-connect',
- gateway,
- hubId,
- agentId,
- token: newToken,
- expires: newExpires,
- })
- }
- }, [gateway, hubId, agentId, expirySeconds, onRefresh])
-
- // Countdown timer
- useEffect(() => {
- const timer = setInterval(() => {
- const remaining = Math.max(0, Math.floor((expiresAt - Date.now()) / 1000))
- setRemainingSeconds(remaining)
-
- // Auto-refresh when expired
- if (remaining === 0) {
- handleRefresh()
- }
- }, 1000)
-
- return () => clearInterval(timer)
- }, [expiresAt, handleRefresh])
-
- // Copy link handler
- const handleCopyLink = async () => {
- try {
- await navigator.clipboard.writeText(connectionUrl)
- setCopied(true)
- setTimeout(() => setCopied(false), 2000)
- } catch (err) {
- console.error('Failed to copy link:', err)
- }
- }
-
- // Format remaining time as M:SS
- const formatTime = (seconds: number) => {
- const m = Math.floor(seconds / 60)
- const s = seconds % 60
- return `${m}:${s.toString().padStart(2, '0')}`
- }
-
- // Warning state when less than 1 minute remaining
- const isExpiringSoon = remainingSeconds < 60 && remainingSeconds > 0
- const isExpired = remainingSeconds === 0
-
return (
-
- {/* QR Code with decorative corners */}
-
- {/* Corner accents */}
-
-
-
-
+
+
+
+
- {/* QR Code */}
-
-
-
-
- {/* Expired overlay */}
- {isExpired && (
-
-
-
- )}
-
-
- {/* Info section */}
-
- {/* Expiry timer */}
-
-
- {isExpired ? 'Expired' : `Expires in ${formatTime(remainingSeconds)}`}
-
-
-
+
+
+
)
diff --git a/apps/desktop/src/renderer/src/components/skill-list.tsx b/apps/desktop/src/renderer/src/components/skill-list.tsx
index 64210948..58f573b5 100644
--- a/apps/desktop/src/renderer/src/components/skill-list.tsx
+++ b/apps/desktop/src/renderer/src/components/skill-list.tsx
@@ -1,22 +1,14 @@
import { useState } from 'react'
import { Button } from '@multica/ui/components/ui/button'
-import { Badge } from '@multica/ui/components/ui/badge'
-import { Switch } from '@multica/ui/components/ui/switch'
import {
- RotateCw,
- Loader2,
- CheckCircle,
- X,
-} from 'lucide-react'
+ Collapsible,
+ CollapsibleTrigger,
+ CollapsibleContent,
+} from '@multica/ui/components/ui/collapsible'
+import { RotateCw, Loader2, ChevronRight } from 'lucide-react'
+import { cn } from '@multica/ui/lib/utils'
import type { SkillInfo, SkillSource } from '../stores/skills'
-// Source badge colors
-const SOURCE_COLORS: Record
= {
- bundled: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
- global: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
- profile: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300',
-}
-
// Source section titles
const SOURCE_TITLES: Record = {
bundled: 'Built-in Skills',
@@ -36,23 +28,21 @@ export function SkillList({
skills,
loading,
error,
- onToggleSkill,
onRefresh,
}: SkillListProps) {
- // Track toggling state for individual skills
- const [togglingSkills, setTogglingSkills] = useState>(new Set())
+ // Track which skills are expanded
+ const [expandedSkills, setExpandedSkills] = useState>(new Set())
- const handleToggleSkill = async (skillId: string) => {
- setTogglingSkills((prev) => new Set(prev).add(skillId))
- try {
- await onToggleSkill(skillId)
- } finally {
- setTogglingSkills((prev) => {
- const next = new Set(prev)
+ const toggleSkill = (skillId: string) => {
+ setExpandedSkills((prev) => {
+ const next = new Set(prev)
+ if (next.has(skillId)) {
next.delete(skillId)
- return next
- })
- }
+ } else {
+ next.add(skillId)
+ }
+ return next
+ })
}
// Group skills by source
@@ -68,8 +58,7 @@ export function SkillList({
if (loading && skills.length === 0) {
return (
-
- Loading skills...
+
)
}
@@ -78,20 +67,20 @@ export function SkillList({
{/* Header */}
-
- {skills.filter((s) => s.enabled).length} of {skills.length} skills enabled
-
+
+ {skills.length} skill{skills.length !== 1 && 's'} available
+
@@ -110,94 +99,53 @@ export function SkillList({
if (sourceSkills.length === 0) return null
return (
-
-
-
- {SOURCE_TITLES[source]}
- ({sourceSkills.length})
-
-
- {sourceSkills.map((skill) => {
- const isToggling = togglingSkills.has(skill.id)
+
+ {/* Section header */}
+
{SOURCE_TITLES[source]}
+
+ {/* Skills card */}
+
+ {sourceSkills.map((skill, index) => {
+ const isExpanded = expandedSkills.has(skill.id)
+ const isLast = index === sourceSkills.length - 1
return (
-
toggleSkill(skill.id)}
>
- {/* Left: Name + Description */}
-
-
- {skill.name}
-
- /{skill.id}
-
-
- {skill.source}
-
-
-
- {skill.description}
-
- {skill.triggers.length > 0 && (
-
- {skill.triggers.slice(0, 3).map((trigger) => (
-
- {trigger}
-
- ))}
- {skill.triggers.length > 3 && (
-
- +{skill.triggers.length - 3} more
-
- )}
-
+
-
- {/* Center: Status */}
-
-
- {skill.enabled ? (
-
- ) : (
-
+ >
+ {skill.name}
+
+ {skill.triggers[0] || `/${skill.id}`}
+
+
+ {skill.version}
+
+
- {skill.enabled ? 'Enabled' : 'Disabled'}
-
-
-
- {isToggling && (
-
- )}
- handleToggleSkill(skill.id)}
- disabled={isToggling}
/>
-
-
+
+
+
+ {skill.description || 'No description'}
+
+
+
)
})}
@@ -207,15 +155,10 @@ export function SkillList({
{/* Empty state */}
{skills.length === 0 && !loading && (
-
-
No skills found.
+
+ No skills found.
)}
-
- {/* Note about persistence */}
-
- Changes are saved automatically. Restart Agent session to apply skill changes.
-
)
}
diff --git a/apps/desktop/src/renderer/src/components/tool-list.tsx b/apps/desktop/src/renderer/src/components/tool-list.tsx
index 9b2501fd..1417cfd8 100644
--- a/apps/desktop/src/renderer/src/components/tool-list.tsx
+++ b/apps/desktop/src/renderer/src/components/tool-list.tsx
@@ -1,18 +1,23 @@
import { useState, useMemo } from 'react'
import { Switch } from '@multica/ui/components/ui/switch'
import { Button } from '@multica/ui/components/ui/button'
+import {
+ Collapsible,
+ CollapsibleTrigger,
+ CollapsibleContent,
+} from '@multica/ui/components/ui/collapsible'
import {
RotateCw,
FolderOpen,
Code,
Globe,
Brain,
- ChevronDown,
- ChevronUp,
+ ChevronRight,
Loader2,
Clock,
Users,
} from 'lucide-react'
+import { cn } from '@multica/ui/lib/utils'
import type { ToolInfo } from '../stores/tools'
// Group display names
@@ -26,6 +31,17 @@ const GROUP_NAMES: Record
= {
other: 'Other',
}
+// Group descriptions
+const GROUP_DESCRIPTIONS: Record = {
+ fs: 'Read, write, and manage files',
+ runtime: 'Execute code and commands',
+ web: 'Fetch and interact with web content',
+ memory: 'Store and recall information',
+ subagent: 'Delegate tasks to sub-agents',
+ cron: 'Schedule recurring tasks',
+ other: 'Miscellaneous tools',
+}
+
// Group icons
const GROUP_ICONS: Record = {
fs: FolderOpen,
@@ -54,13 +70,14 @@ export function ToolList({
}: ToolListProps) {
// Compute groups from tools
const groups = useMemo(() => {
- const groupIds = [...new Set(tools.map(t => t.group))]
- return groupIds.map(id => ({
+ const groupIds = [...new Set(tools.map((t) => t.group))]
+ return groupIds.map((id) => ({
id,
name: GROUP_NAMES[id] || id,
- tools: tools.filter(t => t.group === id),
- enabledCount: tools.filter(t => t.group === id && t.enabled).length,
- totalCount: tools.filter(t => t.group === id).length,
+ description: GROUP_DESCRIPTIONS[id] || '',
+ tools: tools.filter((t) => t.group === id),
+ enabledCount: tools.filter((t) => t.group === id && t.enabled).length,
+ totalCount: tools.filter((t) => t.group === id).length,
}))
}, [tools])
@@ -100,31 +117,29 @@ export function ToolList({
if (loading && tools.length === 0) {
return (
-
- Loading tools...
+
)
}
return (
- {/* Header: Refresh button */}
-
-
+ {/* Header */}
+
+
{tools.filter((t) => t.enabled).length} of {tools.length} tools enabled
-
-
+
@@ -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..d0569e9f
--- /dev/null
+++ b/apps/desktop/src/renderer/src/pages/agent/profile.tsx
@@ -0,0 +1,354 @@
+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 [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 () => {
+ 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')
+ }
+ }, [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
+