refactor(desktop): consolidate app on docked client

2026-07-25 19:51:12 +08:00
parent 8e15c06148
commit 1e1718caee
38 changed files with 2024 additions and 7513 deletions
--- a/apps/desktop/src/App.tsx
+++ b/apps/desktop/src/App.tsx
@@ -0,0 +1,427 @@
+import { useEffect, useRef, useState } from 'react'
+import { Alert, Avatar, Button, Empty, Input, Message, Modal, Select, Spin, Tag, Typography } from '@arco-design/web-react'
+import {
+  IconApps, IconArrowLeft, IconArrowRight, IconCheckCircle, IconClockCircle,
+  IconFile, IconFolder, IconPlus, IconRefresh, IconRobot, IconSearch, IconSettings,
+} from '@arco-design/web-react/icon'
+import {
+  ApiError, checkServerConnection, createAISession, createCron, createProject, createTask, fetchAISessions, fetchExperts,
+  fetchProjects, fetchWorkspace, login, updateTask, uploadSource,
+  type AISession, type ApiSession, type Expert, type Project, type Workspace,
+} from './api'
+
+const { Text, Title } = Typography
+type View = 'home' | 'tasks' | 'notes' | 'ai' | 'more'
+type DockSide = 'left' | 'right'
+type Action = 'project' | 'task' | 'cron' | null
+type ConnectionStatus = 'checking' | 'online' | 'offline'
+
+const navItems: Array<{ id: View; label: string; icon: React.ReactNode }> = [
+  { id: 'home', label: '项目', icon: <IconApps /> },
+  { id: 'tasks', label: '计划', icon: <IconCheckCircle /> },
+  { id: 'notes', label: '资料', icon: <IconFile /> },
+  { id: 'ai', label: 'AI', icon: <IconRobot /> },
+  { id: 'more', label: '更多', icon: <IconSettings /> },
+]
+
+export function App() {
+  const [session, setSession] = useState<ApiSession | null>(() => readStoredSession())
+  const [projects, setProjects] = useState<Project[]>([])
+  const [projectId, setProjectId] = useState('')
+  const [workspace, setWorkspace] = useState<Workspace | null>(null)
+  const [experts, setExperts] = useState<Expert[]>([])
+  const [aiSessions, setAISessions] = useState<AISession[]>([])
+  const [view, setView] = useState<View>('home')
+  const [dockSide, setDockSide] = useState<DockSide>(() => {
+    if ('__TAURI_INTERNALS__' in window) return 'right'
+    return localStorage.getItem('senlin-mini-dock') === 'left' ? 'left' : 'right'
+  })
+  const [loading, setLoading] = useState(Boolean(session))
+  const [error, setError] = useState('')
+  const [action, setAction] = useState<Action>(null)
+  const refreshGeneration = useRef(0)
+
+  useEffect(() => {
+    document.documentElement.dataset.dock = dockSide
+    localStorage.setItem('senlin-mini-dock', dockSide)
+    void moveDesktopWindow(dockSide)
+  }, [dockSide])
+
+  useEffect(() => {
+    if (!session) return
+    let cancelled = false
+    setLoading(true)
+    void fetchProjects(session)
+      .then((items) => {
+        if (cancelled) return
+        setProjects(items)
+        setProjectId((current) => items.some((item) => item.id === current) ? current : items[0]?.id ?? '')
+      })
+      .catch((requestError) => !cancelled && setError(errorMessage(requestError)))
+      .finally(() => !cancelled && setLoading(false))
+    return () => { cancelled = true }
+  }, [session])
+
+  useEffect(() => {
+    if (!session || !projectId) return
+    void refreshProject(session, projectId)
+  }, [projectId, session])
+
+  async function refreshProject(activeSession = session, activeProject = projectId) {
+    if (!activeSession || !activeProject) return
+    const generation = ++refreshGeneration.current
+    setLoading(true)
+    setError('')
+    try {
+      const [nextWorkspace, nextExperts, nextSessions] = await Promise.all([
+        fetchWorkspace(activeSession, activeProject),
+        experts.length ? Promise.resolve(experts) : fetchExperts(activeSession),
+        fetchAISessions(activeSession, activeProject),
+      ])
+      if (generation !== refreshGeneration.current) return
+      setWorkspace(nextWorkspace)
+      setExperts(nextExperts)
+      setAISessions(nextSessions)
+    } catch (requestError) {
+      if (generation === refreshGeneration.current) setError(errorMessage(requestError))
+    } finally {
+      if (generation === refreshGeneration.current) setLoading(false)
+    }
+  }
+
+  async function dock(side: DockSide) {
+    setDockSide(side)
+  }
+
+  if (!session) return <Login onLogin={(next) => { localStorage.setItem('senlin-mini-session', JSON.stringify(next)); setSession(next) }} />
+
+  const activeProject = projects.find((project) => project.id === projectId) ?? projects[0]
+  const content = !workspace || !activeProject
+    ? <Empty description="还没有项目，点击右上角新建" />
+    : renderView(view, {
+        session, workspace, experts, aiSessions,
+        refresh: () => refreshProject(),
+        openAction: setAction,
+      })
+
+  return (
+    <div className="mini-shell">
+      <header className="mini-header" data-tauri-drag-region>
+        <div className="mini-brand" data-tauri-drag-region>
+          <img src="/senlinai-icon.svg" alt="" />
+          <span>森林AI</span>
+          <Tag size="small" color="arcoblue">App 1.0</Tag>
+        </div>
+        <div className="window-actions">
+          <Button aria-label="停靠左侧" className={dockSide === 'left' ? 'active' : ''} type="text" size="mini" icon={<IconArrowLeft />} onClick={() => void dock('left')} />
+          <Button aria-label="停靠右侧" className={dockSide === 'right' ? 'active' : ''} type="text" size="mini" icon={<IconArrowRight />} onClick={() => void dock('right')} />
+        </div>
+      </header>
+
+      <div className="project-switcher">
+        <Select
+          value={projectId || undefined}
+          placeholder="选择项目"
+          onChange={setProjectId}
+          triggerElement={() => (
+            <button className="project-trigger">
+              <Avatar size={26} style={{ background: activeProject?.background || '#165DFF' }}>{projectMark(activeProject)}</Avatar>
+              <span>{activeProject?.name || '选择项目'}</span>
+              <small>{activeProject?.identifier || ''}</small>
+            </button>
+          )}
+        >
+          {projects.map((project) => <Select.Option key={project.id} value={project.id}>{project.name}</Select.Option>)}
+        </Select>
+        <Button aria-label="刷新" type="text" shape="circle" icon={<IconRefresh />} loading={loading} onClick={() => void refreshProject()} />
+        <Button aria-label="新建项目" type="text" shape="circle" icon={<IconPlus />} onClick={() => setAction('project')} />
+      </div>
+
+      <nav className="mini-nav" aria-label="主要导航">
+        {navItems.map((item) => (
+          <button className={view === item.id ? 'active' : ''} key={item.id} onClick={() => setView(item.id)}>
+            {item.icon}<span>{item.label}</span>
+          </button>
+        ))}
+      </nav>
+
+      {error ? <Alert className="mini-alert" type="error" content={error} closable onClose={() => setError('')} /> : null}
+      <main className="mini-content"><Spin loading={loading} block>{content}</Spin></main>
+
+      <footer className="mini-footer">
+        <span><i /> 服务已连接</span>
+        <button onClick={() => { localStorage.removeItem('senlin-mini-session'); setSession(null); setWorkspace(null) }}>退出登录</button>
+      </footer>
+
+      <ActionModal
+        action={action}
+        workspace={workspace}
+        onClose={() => setAction(null)}
+        onProject={async (name) => {
+          const project = await createProject(session, name)
+          const next = await fetchProjects(session)
+          setProjects(next)
+          setProjectId(project.id)
+        }}
+        onTask={async (title, tag) => {
+          if (!projectId) return
+          await createTask(session, projectId, title, tag)
+          await refreshProject()
+        }}
+        onCron={async (title, schedule) => {
+          if (!projectId) return
+          await createCron(session, projectId, title, schedule)
+          await refreshProject()
+        }}
+      />
+    </div>
+  )
+}
+
+function renderView(view: View, props: ViewProps) {
+  if (view === 'tasks') return <TasksView {...props} />
+  if (view === 'notes') return <NotesView {...props} />
+  if (view === 'ai') return <AIView {...props} />
+  if (view === 'more') return <MoreView {...props} />
+  return <HomeView {...props} />
+}
+
+type ViewProps = {
+  session: ApiSession
+  workspace: Workspace
+  experts: Expert[]
+  aiSessions: AISession[]
+  refresh: () => void | Promise<void>
+  openAction: (action: Action) => void
+}
+
+function HomeView({ workspace, openAction }: ViewProps) {
+  const pending = workspace.tasks.filter((task) => !task.completed)
+  return (
+    <section className="mini-page home-view">
+      <div className="page-intro">
+        <Text type="secondary">当前项目</Text>
+        <Title heading={4}>{workspace.project.name}</Title>
+        <p>{workspace.project.description || '把计划、资料与 AI 会话放进同一个项目上下文。'}</p>
+      </div>
+      <div className="metric-grid">
+        <Metric value={pending.length} label="待办计划" color="blue" />
+        <Metric value={workspace.notesSources.length} label="笔记资料" color="green" />
+        <Metric value={workspace.aiSessions.length} label="AI 会话" color="purple" />
+        <Metric value={workspace.cronPlans.length} label="计划任务" color="orange" />
+      </div>
+      <div className="section-title"><strong>快速操作</strong></div>
+      <div className="quick-actions">
+        <button onClick={() => openAction('task')}><IconPlus /><span><b>新建计划</b><small>快速记录下一步</small></span></button>
+        <button onClick={() => openAction('cron')}><IconClockCircle /><span><b>计划任务</b><small>添加周期安排</small></span></button>
+      </div>
+      <div className="section-title"><strong>接下来</strong><Tag color="arcoblue">{pending.length}</Tag></div>
+      <div className="compact-list">
+        {pending.slice(0, 4).map((task) => <div key={task.id}><IconCheckCircle /><span><b>{task.title}</b><small>{task.tag || '未分类'}</small></span></div>)}
+        {!pending.length && <Empty description="当前没有未完成计划" />}
+      </div>
+    </section>
+  )
+}
+
+function Metric({ value, label, color }: { value: number; label: string; color: string }) {
+  return <div className={`metric ${color}`}><strong>{value}</strong><span>{label}</span></div>
+}
+
+function TasksView({ session, workspace, refresh, openAction }: ViewProps) {
+  const [tag, setTag] = useState('全部')
+  const tags = workspace.tags.filter((item) => item.name !== '全部' && item.name !== 'all')
+  const tasks = tag === '全部' ? workspace.tasks : workspace.tasks.filter((task) => task.tag === tag)
+  return (
+    <section className="mini-page">
+      <div className="page-title"><div><Title heading={5}>工作计划</Title><Text type="secondary">轻点圆圈即可更新状态</Text></div><Button type="primary" size="small" icon={<IconPlus />} onClick={() => openAction('task')}>新建</Button></div>
+      <div className="filter-strip">
+        {['全部', ...tags.map((item) => item.name)].map((item) => <button className={tag === item ? 'active' : ''} key={item} onClick={() => setTag(item)}>{item}</button>)}
+      </div>
+      <div className="sticky-list">
+        {tasks.map((task) => (
+          <article className={task.completed ? 'task-note completed' : 'task-note'} key={task.id}>
+            <button className="task-check" aria-label={task.completed ? '恢复计划' : '完成计划'} onClick={async () => { await updateTask(session, workspace.project.id, task); await refresh() }}><IconCheckCircle /></button>
+            <div><strong>{task.title}</strong><p>{task.summary || '暂无说明'}</p><span>{task.tag || '未分类'} · {task.createdAt}</span></div>
+          </article>
+        ))}
+        {!tasks.length && <Empty description="当前筛选下没有计划" />}
+      </div>
+    </section>
+  )
+}
+
+function NotesView({ session, workspace, refresh }: ViewProps) {
+  const fileInput = useRef<HTMLInputElement>(null)
+  return (
+    <section className="mini-page">
+      <div className="page-title"><div><Title heading={5}>笔记资料</Title><Text type="secondary">项目资料随手可取</Text></div><Button type="primary" size="small" icon={<IconPlus />} onClick={() => fileInput.current?.click()}>上传</Button></div>
+      <input className="hidden-file" ref={fileInput} type="file" onChange={async (event) => { const file = event.target.files?.[0]; if (!file) return; await uploadSource(session, workspace.project.id, file); await refresh(); event.target.value = '' }} />
+      <div className="note-grid">
+        {workspace.notesSources.map((note, index) => <article className={`source-note tone-${index % 4}`} key={note.id}><IconFile /><strong>{note.title}</strong><p>{note.source || note.kind}</p><span>{note.tag || '资料'} · {note.updatedAt}</span></article>)}
+        {!workspace.notesSources.length && <Empty description="还没有笔记或资料" />}
+      </div>
+    </section>
+  )
+}
+
+function AIView({ session, workspace, experts, aiSessions, refresh }: ViewProps) {
+  const [query, setQuery] = useState('')
+  const [category, setCategory] = useState('全部')
+  const [expertId, setExpertId] = useState('')
+  const [prompt, setPrompt] = useState('')
+  const [sending, setSending] = useState(false)
+  const categories = [...new Set(experts.map((expert) => expert.categoryName))]
+  const visible = experts.filter((expert) => (category === '全部' || expert.categoryName === category) && `${expert.name}${expert.description}`.toLowerCase().includes(query.toLowerCase()))
+  const selected = experts.find((expert) => expert.id === expertId)
+  return (
+    <section className="mini-page ai-view">
+      <div className="page-title"><div><Title heading={5}>AI 会话</Title><Text type="secondary">先选择专家，再开始会话</Text></div><Tag color="purple">{experts.length} 位</Tag></div>
+      <Input prefix={<IconSearch />} value={query} onChange={setQuery} allowClear placeholder="搜索专家" />
+      <div className="filter-strip">
+        {['全部', ...categories].map((item) => <button className={category === item ? 'active' : ''} key={item} onClick={() => setCategory(item)}>{item}</button>)}
+      </div>
+      <div className="expert-strip">
+        {visible.slice(0, 30).map((expert) => <button className={expertId === expert.id ? 'active' : ''} key={expert.id} onClick={() => setExpertId(expert.id)}><i style={{ background: expert.color }}>{expert.emoji}</i><span><b>{expert.name}</b><small>{expert.categoryName}</small></span></button>)}
+      </div>
+      <div className="mini-composer">
+        <div className="selected-expert">{selected ? <><i style={{ background: selected.color }}>{selected.emoji}</i><span><b>{selected.name}</b><small>{selected.description}</small></span></> : <Text type="secondary">选择一位专家进行会话</Text>}</div>
+        <Input.TextArea value={prompt} onChange={setPrompt} autoSize={{ minRows: 3, maxRows: 6 }} placeholder={selected ? `向${selected.name}发送消息` : '请先选择专家'} />
+        <Button type="primary" long loading={sending} disabled={!selected || !prompt.trim()} onClick={async () => { if (!selected) return; setSending(true); try { await createAISession(session, workspace.project.id, selected.id, prompt.trim()); setPrompt(''); await refresh() } finally { setSending(false) } }}>开始会话</Button>
+      </div>
+      <div className="section-title"><strong>最近会话</strong></div>
+      <div className="session-list">{aiSessions.slice(0, 5).map((item) => <div key={item.id}><i style={{ background: item.expert?.color }}>{item.expert?.emoji || '🤖'}</i><span><b>{item.title}</b><small>{item.expert?.name || '森林AI'}</small></span></div>)}</div>
+    </section>
+  )
+}
+
+function MoreView({ workspace, openAction }: ViewProps) {
+  return (
+    <section className="mini-page">
+      <div className="page-title"><div><Title heading={5}>更多</Title><Text type="secondary">项目周期安排与客户端信息</Text></div><Button size="small" icon={<IconPlus />} onClick={() => openAction('cron')}>计划任务</Button></div>
+      <div className="settings-card"><strong>计划任务</strong>{workspace.cronPlans.map((plan) => <div key={plan.id}><IconClockCircle /><span><b>{plan.title}</b><small>{plan.schedule} · {plan.enabled ? '已启用' : '已停用'}</small></span></div>)}{!workspace.cronPlans.length && <Text type="secondary">暂无周期计划</Text>}</div>
+      <div className="settings-card"><strong>停靠说明</strong><p>顶部箭头可将桌面窗口停靠至当前屏幕左侧或右侧。Web 模式会记住布局偏好，桌面模式会同时移动实际窗口。</p></div>
+      <div className="settings-card version-card"><img src="/senlinai-icon.svg" alt="" /><span><b>森林AI App</b><small>v1.0 · 停靠客户端</small></span></div>
+    </section>
+  )
+}
+
+function Login({ onLogin }: { onLogin: (session: ApiSession) => void }) {
+  const [server, setServer] = useState('http://localhost:9150')
+  const [email, setEmail] = useState('demo@senlin.ai')
+  const [password, setPassword] = useState('password123')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [connection, setConnection] = useState<ConnectionStatus>('checking')
+
+  useEffect(() => {
+    const controller = new AbortController()
+    const timer = window.setTimeout(() => void checkConnection(controller.signal), 300)
+    return () => {
+      controller.abort()
+      window.clearTimeout(timer)
+    }
+  }, [server])
+
+  async function checkConnection(signal?: AbortSignal) {
+    setConnection('checking')
+    try {
+      const online = await checkServerConnection(server, signal)
+      if (!signal?.aborted) setConnection(online ? 'online' : 'offline')
+    } catch (requestError) {
+      if (!(requestError instanceof DOMException && requestError.name === 'AbortError')) setConnection('offline')
+    }
+  }
+
+  async function submitLogin() {
+    if (loading) return
+    setLoading(true)
+    setError('')
+    try {
+      onLogin(await login(server, email.trim(), password))
+    } catch (requestError) {
+      setError(errorMessage(requestError))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="mini-login">
+      <form className="login-note" onSubmit={(event) => { event.preventDefault(); void submitLogin() }}>
+        <img src="/senlinai-icon.svg" alt="" />
+        <Title heading={3}>森林AI App</Title>
+        <Text type="secondary">停靠在屏幕一侧，随时记录与推进项目</Text>
+        <label>服务器地址<Input value={server} onChange={setServer} /></label>
+        <div className={`mini-connection ${connection}`} role="status">
+          <i />
+          <strong>{connection === 'checking' ? '正在检查' : connection === 'online' ? '连接正常' : '连接异常'}</strong>
+          <button type="button" onClick={() => void checkConnection()}>{connection === 'checking' ? '检查中' : '重新检查'}</button>
+        </div>
+        <label>邮箱<Input value={email} onChange={setEmail} /></label>
+        <label>密码<Input.Password value={password} onChange={setPassword} /></label>
+        {error ? <Alert type="error" content={error} /> : null}
+        <Button type="primary" htmlType="submit" long loading={loading}>连接工作台</Button>
+        <small>v1.0 完整版</small>
+      </form>
+    </div>
+  )
+}
+
+function ActionModal({ action, workspace, onClose, onProject, onTask, onCron }: {
+  action: Action
+  workspace: Workspace | null
+  onClose: () => void
+  onProject: (name: string) => Promise<void>
+  onTask: (title: string, tag: string) => Promise<void>
+  onCron: (title: string, schedule: string) => Promise<void>
+}) {
+  const [title, setTitle] = useState('')
+  const [tag, setTag] = useState('')
+  const [schedule, setSchedule] = useState('0 9 * * 1-5')
+  const [loading, setLoading] = useState(false)
+  useEffect(() => { if (action) { setTitle(''); setTag(''); setSchedule('0 9 * * 1-5') } }, [action])
+  const labels = action === 'project' ? ['新建项目', '项目名称'] : action === 'task' ? ['新建计划', '计划标题'] : ['新建计划任务', '任务名称']
+  return (
+    <Modal className="mini-modal" visible={Boolean(action)} title={labels[0]} onCancel={onClose} footer={null} unmountOnExit>
+      <div className="mini-form">
+        <label>{labels[1]}<Input autoFocus value={title} onChange={setTitle} /></label>
+        {action === 'task' ? <label>标签<Select value={tag || undefined} placeholder="可选" onChange={setTag}>{workspace?.tags.filter((item) => item.name !== 'all' && item.name !== '全部').map((item) => <Select.Option key={item.id} value={item.name}>{item.name}</Select.Option>)}</Select></label> : null}
+        {action === 'cron' ? <label>Cron 表达式<Input value={schedule} onChange={setSchedule} /></label> : null}
+        <Button type="primary" long loading={loading} disabled={!title.trim()} onClick={async () => { setLoading(true); try { if (action === 'project') await onProject(title.trim()); if (action === 'task') await onTask(title.trim(), tag); if (action === 'cron') await onCron(title.trim(), schedule.trim()); onClose() } catch (requestError) { Message.error(errorMessage(requestError)) } finally { setLoading(false) } }}>保存</Button>
+      </div>
+    </Modal>
+  )
+}
+
+function readStoredSession(): ApiSession | null {
+  try {
+    const value = JSON.parse(localStorage.getItem('senlin-mini-session') || 'null') as ApiSession | null
+    return value?.baseUrl && value?.token ? value : null
+  } catch {
+    return null
+  }
+}
+
+function projectMark(project?: Project) {
+  if (!project) return <IconFolder />
+  if (project.icon && !['folder', 'project'].includes(project.icon)) return project.icon
+  const chars = Array.from(project.name.trim())
+  const chinese = chars.some((char) => /[\u3400-\u9fff]/.test(char))
+  return chars.slice(0, chinese ? 2 : 4).join('').toUpperCase()
+}
+
+function errorMessage(error: unknown) {
+  if (error instanceof ApiError || error instanceof Error) return error.message
+  return '操作失败，请稍后重试'
+}
+
+async function moveDesktopWindow(side: DockSide) {
+  if (!('__TAURI_INTERNALS__' in window)) return
+  try {
+    const { invoke } = await import('@tauri-apps/api/core')
+    await invoke('dock_window', { side })
+  } catch (requestError) {
+    Message.warning(errorMessage(requestError))
+  }
+}
--- a/apps/desktop/src/api.ts
+++ b/apps/desktop/src/api.ts
@@ -0,0 +1,214 @@
+export type ApiSession = { baseUrl: string; token: string }
+
+export type Project = {
+  id: string
+  name: string
+  identifier: string
+  icon: string
+  background: string
+  description: string
+}
+
+export type WorkspaceTask = {
+  id: string
+  projectId: string
+  title: string
+  summary: string
+  completed: boolean
+  owner: string
+  due: string | null
+  createdAt: string
+  completedAt: string | null
+  tagId: string | null
+  tag: string
+}
+
+export type NoteSource = {
+  id: string
+  projectId: string
+  kind: string
+  title: string
+  updatedAt: string
+  tag: string
+  source: string
+}
+
+export type CronPlan = {
+  id: string
+  projectId: string
+  title: string
+  schedule: string
+  nextRun: string | null
+  enabled: boolean
+  lastResult: string
+  owner: string
+}
+
+export type Workspace = {
+  project: Project & { initials: string; unreadCount: number }
+  tags: Array<{ id: string; name: string }>
+  tasks: WorkspaceTask[]
+  notesSources: NoteSource[]
+  aiSessions: Array<{ id: string; projectId: string; title: string; summary: string; updatedAt: string; references: string[] }>
+  cronPlans: CronPlan[]
+}
+
+export type Expert = {
+  id: string
+  slug: string
+  category: string
+  categoryName: string
+  name: string
+  description: string
+  emoji: string
+  color: string
+}
+
+export type AISession = {
+  id: string
+  projectId: string
+  title: string
+  context: string
+  status: string
+  expert: Expert | null
+  createdAt: string
+  updatedAt: string
+}
+
+export class ApiError extends Error {
+  constructor(public status: number, public code: string, message: string) {
+    super(message)
+    this.name = 'ApiError'
+  }
+}
+
+let baseUrl = normalizeBaseUrl(import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:9150')
+
+export function configureApi(value: string) {
+  baseUrl = normalizeBaseUrl(value)
+}
+
+export async function login(server: string, email: string, password: string): Promise<ApiSession> {
+  configureApi(server)
+  const response = await request<{ token: string }>('/api/v1/auth/login', { method: 'POST', body: { email, password } })
+  return { baseUrl, token: response.token }
+}
+
+export async function checkServerConnection(server: string, signal?: AbortSignal) {
+  try {
+    const response = await fetch(`${normalizeBaseUrl(server)}/api/v1/status`, { signal })
+    if (!response.ok) return false
+    const payload = await response.json() as { timestamp?: unknown }
+    return typeof payload.timestamp === 'string'
+  } catch (error) {
+    if (error instanceof DOMException && error.name === 'AbortError') throw error
+    return false
+  }
+}
+
+export async function fetchProjects(session: ApiSession) {
+  useSessionBase(session)
+  return request<Project[]>('/api/v1/projects', { token: session.token })
+}
+
+export async function fetchWorkspace(session: ApiSession, projectId: string) {
+  useSessionBase(session)
+  return request<Workspace>(`/api/v1/projects/${projectId}/workspace`, { token: session.token })
+}
+
+export async function createProject(session: ApiSession, name: string) {
+  useSessionBase(session)
+  const identifier = `${slugify(name) || 'project'}-${Date.now().toString(36)}`
+  return request<Project>('/api/v1/projects', {
+    method: 'POST', token: session.token,
+    body: { name, identifier, icon: 'folder', background: '#165DFF', description: '' },
+  })
+}
+
+export async function createTask(session: ApiSession, projectId: string, title: string, tag?: string) {
+  useSessionBase(session)
+  return request(`/api/v1/projects/${projectId}/tasks`, {
+    method: 'POST', token: session.token, body: { title, description: '', status: 'open', tag },
+  })
+}
+
+export async function updateTask(session: ApiSession, projectId: string, task: WorkspaceTask) {
+  useSessionBase(session)
+  return request(`/api/v1/projects/${projectId}/tasks/${task.id}`, {
+    method: 'PATCH', token: session.token,
+    body: { title: task.title, description: task.summary, completed: !task.completed, tag: task.tag },
+  })
+}
+
+export async function uploadSource(session: ApiSession, projectId: string, file: File) {
+  useSessionBase(session)
+  const body = new FormData()
+  body.append('file', file)
+  body.append('title', file.name)
+  return request(`/api/v1/projects/${projectId}/sources`, { method: 'POST', token: session.token, body })
+}
+
+export async function createCron(session: ApiSession, projectId: string, title: string, schedule: string) {
+  useSessionBase(session)
+  return request(`/api/v1/projects/${projectId}/cron-plans`, {
+    method: 'POST', token: session.token, body: { title, schedule, enabled: true },
+  })
+}
+
+export async function fetchExperts(session: ApiSession) {
+  useSessionBase(session)
+  return request<Expert[]>('/api/v1/ai-experts', { token: session.token })
+}
+
+export async function fetchAISessions(session: ApiSession, projectId: string) {
+  useSessionBase(session)
+  return request<AISession[]>(`/api/v1/projects/${projectId}/ai-sessions`, { token: session.token })
+}
+
+export async function createAISession(session: ApiSession, projectId: string, expertId: string, context: string) {
+  useSessionBase(session)
+  return request<AISession>(`/api/v1/projects/${projectId}/ai-sessions`, {
+    method: 'POST', token: session.token,
+    body: { title: Array.from(context).slice(0, 36).join(''), context, expertId },
+  })
+}
+
+type RequestOptions = { method?: string; token?: string; body?: unknown; signal?: AbortSignal }
+
+async function request<T>(path: string, options: RequestOptions = {}): Promise<T> {
+  const isForm = options.body instanceof FormData
+  let response: Response
+  try {
+    response = await fetch(`${baseUrl}${path}`, {
+      method: options.method ?? 'GET',
+      headers: {
+        ...(!isForm && options.body !== undefined ? { 'Content-Type': 'application/json' } : {}),
+        ...(options.token ? { Authorization: `Bearer ${options.token}` } : {}),
+      },
+      body: options.body === undefined ? undefined : isForm ? options.body as FormData : JSON.stringify(options.body),
+      signal: options.signal,
+    })
+  } catch {
+    throw new ApiError(0, 'network_error', '无法连接服务器，请检查地址和网络')
+  }
+  if (!response.ok) {
+    const payload = await response.json().catch(() => null) as { error?: { code?: string; message?: string } } | null
+    throw new ApiError(response.status, payload?.error?.code ?? 'request_failed', payload?.error?.message ?? '请求失败，请稍后重试')
+  }
+  if (response.status === 204) return undefined as T
+  return response.json() as Promise<T>
+}
+
+function useSessionBase(session: ApiSession) {
+  baseUrl = normalizeBaseUrl(session.baseUrl)
+}
+
+function normalizeBaseUrl(value: string) {
+  const normalized = value.trim().replace(/\/+$/, '')
+  if (!normalized || /^https?:\/\//i.test(normalized)) return normalized
+  return `http://${normalized}`
+}
+
+function slugify(value: string) {
+  return value.toLowerCase().trim().replace(/[^a-z0-9\u4e00-\u9fa5]+/g, '-').replace(/^-|-$/g, '')
+}
--- a/apps/desktop/src/main.tsx
+++ b/apps/desktop/src/main.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { ConfigProvider } from '@arco-design/web-react'
+import '@arco-design/web-react/dist/css/arco.css'
+import { App } from './App'
+import './styles.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <ConfigProvider>
+      <App />
+    </ConfigProvider>
+  </React.StrictMode>,
+)
--- a/apps/desktop/src/styles.css
+++ b/apps/desktop/src/styles.css
@@ -0,0 +1,249 @@
+:root {
+  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
+  color: #1d2129;
+  background: #e8edf4;
+  font-synthesis: none;
+  --blue: #165dff;
+  --line: #e5e8ef;
+  --muted: #86909c;
+  --panel: #fff;
+  --canvas: #f5f7fa;
+}
+
+* { box-sizing: border-box; }
+html, body, #root { width: 100%; min-width: 320px; height: 100%; margin: 0; }
+body { overflow: hidden; background: #e8edf4; }
+button, input, textarea { font: inherit; }
+button { color: inherit; }
+
+.mini-shell {
+  width: min(100%, 440px);
+  height: 100vh;
+  display: grid;
+  grid-template-rows: 44px 50px 58px minmax(0, 1fr) 28px;
+  overflow: hidden;
+  background: var(--canvas);
+  border: 1px solid rgba(78, 89, 105, 0.18);
+  box-shadow: 0 20px 60px rgba(29, 33, 41, 0.18);
+}
+
+html[data-dock="right"] .mini-shell { margin-left: auto; }
+html[data-dock="left"] .mini-shell { margin-right: auto; }
+
+.mini-header,
+.project-switcher,
+.mini-nav,
+.mini-footer {
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.mini-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px 0 12px;
+  border-bottom: 1px solid var(--line);
+  user-select: none;
+}
+
+.mini-brand,
+.window-actions,
+.project-trigger,
+.mini-footer,
+.section-title,
+.page-title,
+.selected-expert,
+.session-list > div,
+.settings-card > div,
+.version-card {
+  display: flex;
+  align-items: center;
+}
+
+.mini-brand { gap: 7px; font-weight: 800; }
+.mini-brand img { width: 25px; height: 25px; }
+.mini-brand .arco-tag { margin-left: 2px; }
+.window-actions { gap: 2px; }
+.window-actions .arco-btn { color: #6b778c; }
+.window-actions .active { color: var(--blue); background: #edf3ff; }
+
+.project-switcher {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 32px 32px;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--line);
+}
+
+.project-switcher > .arco-select { width: 100%; }
+.project-trigger {
+  width: 100%;
+  min-width: 0;
+  height: 36px;
+  gap: 8px;
+  border: 0;
+  border-radius: 9px;
+  background: transparent;
+  padding: 3px 6px;
+  text-align: left;
+  cursor: pointer;
+}
+.project-trigger:hover { background: #f2f5fa; }
+.project-trigger > span:nth-of-type(1) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
+.project-trigger small { margin-left: auto; color: var(--muted); font-size: 10px; }
+
+.mini-nav {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  border-bottom: 1px solid var(--line);
+}
+.mini-nav button {
+  position: relative;
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 2px;
+  border: 0;
+  background: transparent;
+  color: #6b778c;
+  cursor: pointer;
+  font-size: 11px;
+}
+.mini-nav button::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 2px; border-radius: 99px; background: transparent; }
+.mini-nav svg { font-size: 18px; }
+.mini-nav button:hover,
+.mini-nav button.active { color: var(--blue); background: linear-gradient(180deg, transparent, #f3f7ff); }
+.mini-nav button.active::after { background: var(--blue); }
+
+.mini-alert { position: fixed; z-index: 30; top: 102px; left: 50%; width: min(388px, calc(100% - 24px)); transform: translateX(-50%); }
+.mini-content { min-height: 0; overflow: hidden; }
+.mini-content > .arco-spin { width: 100%; height: 100%; }
+.mini-content > .arco-spin > .arco-spin-children { height: 100%; }
+.mini-page { height: 100%; overflow-x: hidden; overflow-y: auto; padding: 14px 14px 24px; scrollbar-width: thin; scrollbar-color: #c9cdd4 transparent; }
+
+.mini-footer { justify-content: space-between; padding: 0 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
+.mini-footer span { display: inline-flex; align-items: center; gap: 5px; }
+.mini-footer i { width: 6px; height: 6px; border-radius: 50%; background: #00b42a; box-shadow: 0 0 0 2px #e8ffea; }
+.mini-footer button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; }
+
+.page-intro {
+  position: relative;
+  overflow: hidden;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #165dff, #6aa1ff);
+  color: white;
+  padding: 18px;
+  box-shadow: 0 12px 28px rgba(22, 93, 255, 0.2);
+}
+.page-intro::after { content: ""; position: absolute; width: 130px; height: 130px; right: -45px; top: -52px; border: 24px solid rgba(255,255,255,.1); border-radius: 50%; }
+.page-intro .arco-typography { color: rgba(255,255,255,.78); }
+.page-intro h4 { margin: 4px 0 5px; color: white; }
+.page-intro p { position: relative; z-index: 1; margin: 0; color: rgba(255,255,255,.86); font-size: 12px; line-height: 1.6; }
+
+.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
+.metric { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 12px; background: white; padding: 12px; }
+.metric strong { font-size: 22px; }
+.metric span { color: var(--muted); font-size: 11px; }
+.metric.blue strong { color: #165dff; }.metric.green strong { color: #00b42a; }.metric.purple strong { color: #722ed1; }.metric.orange strong { color: #ff7d00; }
+
+.section-title { justify-content: space-between; gap: 8px; margin: 18px 2px 9px; font-size: 13px; }
+.quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
+.quick-actions button { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: white; padding: 12px; text-align: left; cursor: pointer; }
+.quick-actions button:hover { border-color: #94bfff; box-shadow: 0 5px 16px rgba(22,93,255,.1); }
+.quick-actions svg { color: var(--blue); font-size: 20px; }
+.quick-actions span, .compact-list span, .session-list span, .settings-card span { min-width: 0; display: grid; gap: 2px; }
+.quick-actions small, .compact-list small, .session-list small, .settings-card small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
+
+.compact-list { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: white; }
+.compact-list > div { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 9px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #f0f1f4; }
+.compact-list > div:last-child { border-bottom: 0; }
+.compact-list svg { color: var(--blue); }
+
+.page-title { justify-content: space-between; gap: 10px; margin-bottom: 13px; }
+.page-title h5 { margin: 0 0 2px; }
+.page-title .arco-typography { font-size: 11px; }
+.filter-strip { display: flex; gap: 6px; overflow-x: auto; margin: 10px 0 12px; padding-bottom: 2px; scrollbar-width: none; }
+.filter-strip button { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--muted); padding: 4px 10px; cursor: pointer; font-size: 11px; }
+.filter-strip button.active { border-color: #8eb7ff; background: #edf3ff; color: var(--blue); }
+
+.sticky-list, .note-grid { display: grid; gap: 9px; }
+.task-note { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 9px; border: 1px solid #eadfac; border-radius: 4px 13px 13px 13px; background: #fffbea; padding: 13px 12px 12px 9px; box-shadow: 0 4px 14px rgba(78, 89, 105, .08); }
+.task-note:nth-child(3n+2) { border-color: #cde5d7; background: #f0fff5; }
+.task-note:nth-child(3n+3) { border-color: #d7def4; background: #f2f5ff; }
+.task-note.completed { opacity: .64; }
+.task-note.completed strong { text-decoration: line-through; }
+.task-check { width: 27px; height: 27px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.8); color: #8b9aab; cursor: pointer; }
+.task-note:not(.completed) .task-check:hover, .task-note.completed .task-check { color: #00b42a; }
+.task-note strong { font-size: 13px; }
+.task-note p { margin: 5px 0; color: #4e5969; font-size: 11px; line-height: 1.5; }
+.task-note span { color: var(--muted); font-size: 10px; }
+
+.hidden-file { display: none; }
+.note-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
+.source-note { min-height: 135px; display: flex; flex-direction: column; border: 1px solid #eadfac; border-radius: 4px 14px 14px 14px; background: #fff9d8; padding: 13px; }
+.source-note.tone-1 { background: #eaf8ff; border-color: #c7e6f5; }.source-note.tone-2 { background: #f3edff; border-color: #ded0f7; }.source-note.tone-3 { background: #edfff3; border-color: #caead4; }
+.source-note svg { color: #ff9a2e; font-size: 18px; }
+.source-note strong { margin-top: 9px; font-size: 12px; }
+.source-note p { flex: 1; margin: 5px 0; color: #4e5969; font-size: 10px; }
+.source-note span { color: var(--muted); font-size: 9px; }
+
+.ai-view > .arco-input-wrapper { border-radius: 10px; }
+.expert-strip { max-height: 210px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; overflow-y: auto; padding: 1px; }
+.expert-strip button { min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; background: white; padding: 8px; text-align: left; cursor: pointer; }
+.expert-strip button.active { border-color: #75a8ff; background: #f2f6ff; box-shadow: 0 0 0 1px #c8dcff; }
+.expert-strip i, .selected-expert i, .session-list i { display: grid; place-items: center; border-radius: 9px; color: white; font-style: normal; }
+.expert-strip i { width: 34px; height: 34px; font-size: 17px; }
+.expert-strip span { min-width: 0; display: grid; }
+.expert-strip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
+.expert-strip small { color: var(--muted); font-size: 9px; }
+
+.mini-composer { display: grid; gap: 8px; margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; background: white; padding: 11px; box-shadow: 0 7px 22px rgba(29,33,41,.08); }
+.selected-expert { min-height: 38px; gap: 9px; }
+.selected-expert i { width: 36px; height: 36px; flex: 0 0 36px; }
+.selected-expert span { min-width: 0; display: grid; }
+.selected-expert b { font-size: 12px; }
+.selected-expert small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
+.mini-composer .arco-textarea-wrapper { border-radius: 9px; background: #f6f7f9; }
+.session-list { display: grid; gap: 7px; }
+.session-list > div { gap: 9px; border: 1px solid var(--line); border-radius: 10px; background: white; padding: 9px; }
+.session-list i { width: 31px; height: 31px; }
+
+.settings-card { display: grid; gap: 10px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 13px; background: white; padding: 13px; }
+.settings-card > strong { font-size: 13px; }
+.settings-card > div { gap: 9px; border-top: 1px solid #f0f1f4; padding-top: 9px; }
+.settings-card svg { color: var(--blue); }
+.settings-card p { margin: 0; color: #4e5969; font-size: 11px; line-height: 1.65; }
+.version-card { grid-template-columns: 34px minmax(0,1fr); }
+.version-card img { width: 34px; }
+
+.mini-login { width: 100%; height: 100%; display: grid; place-items: center; overflow: auto; padding: 22px; background: linear-gradient(160deg, #edf4ff 0%, #e6ebf2 52%, #dce4ef 100%); }
+.login-note { width: min(360px, 100%); display: grid; justify-items: stretch; gap: 13px; border: 1px solid rgba(255,255,255,.85); border-radius: 4px 22px 22px 22px; background: #fffbea; padding: 26px 22px 20px; box-shadow: 0 24px 60px rgba(29,33,41,.16); }
+.login-note > img { width: 52px; }
+.login-note h3 { margin: 0; }
+.login-note label, .mini-form label { display: grid; gap: 5px; color: #4e5969; font-size: 11px; }
+.login-note .arco-input-wrapper, .mini-form .arco-input-wrapper { border-radius: 9px; background: rgba(255,255,255,.82); }
+.login-note > small { color: var(--muted); text-align: center; }
+.mini-connection { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; margin-top: -5px; border: 1px solid #bedaff; border-radius: 9px; background: #f2f8ff; padding: 8px 10px; color: #165dff; font-size: 11px; }
+.mini-connection > i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
+.mini-connection > strong { font-weight: 600; }
+.mini-connection > button { border: 0; background: transparent; padding: 0; color: inherit; cursor: pointer; font-size: 11px; }
+.mini-connection.online { border-color: #7be188; background: #f0fff4; color: #168a2f; }
+.mini-connection.offline { border-color: #f53f3f; background: #fff2f0; color: #d91d35; }
+
+.mini-modal .arco-modal { width: min(380px, calc(100vw - 24px)); }
+.mini-modal .arco-modal-content { border-radius: 15px; }
+.mini-form { display: grid; gap: 13px; }
+.mini-form .arco-select { width: 100%; }
+
+@media (min-width: 700px) {
+  body { display: flex; }
+  html[data-dock="right"] body { justify-content: flex-end; }
+  html[data-dock="left"] body { justify-content: flex-start; }
+}
+
+@media (max-width: 359px) {
+  .mini-shell { border: 0; }
+  .mini-brand .arco-tag { display: none; }
+  .note-grid, .expert-strip { grid-template-columns: 1fr; }
+}
--- a/apps/desktop/src/vite-env.d.ts
+++ b/apps/desktop/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />