UI improve

README.md

@@ -1,28 +1,38 @@
 <div align="center">
 
+<img src="assets/logo-rounded.png" width="150" height="150" alt="Persona Agent" />
+
 # Persona Agent
 
 **你的本地 AI Agent 工作站**
 
 创建和管理多个 AI Agent，赋予它们工具、技能和性格，让它们帮你完成任务。
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+![Platform](https://img.shields.io/badge/Platform-macOS%20%7C%20Windows-informational)
+[![Release](https://img.shields.io/github/v/release/Code-MonkeyZhang/persona-agent?include_prereleases)](https://github.com/Code-MonkeyZhang/persona-agent/releases)
 
 </div>
 
-<!-- ![Persona Agent 主界面](./docs/screenshot-main.png) -->
+## 截图
 
-## 它能做什么
+![主界面](assets/screenshot-main.jpg)
 
-Persona Agent 让你在本地创建多个 AI Agent，每个有独立的角色设定、模型配置和会话历史。你可以用一个 Agent 做编程助手，另一个做写作顾问，互不干扰。Agent 可以调用内置工具来执行命令、读写文件，也可以通过 MCP 协议连接外部工具服务器扩展能力，还可以加载 Skill 来获得专业知识。
+![Agent 形象](assets/screenshot-companion.jpg)
 
-对话支持流式输出和完整的 Markdown 渲染，代码块一键复制，Agent 的推理过程和工具调用细节都可以展开查看。如果你想换一种氛围，可以打开伴侣模式：全屏展示角色立绘，Agent 会根据对话自动切换表情，配合语音合成朗读回复。
+<!-- ![Agent 设置](assets/screenshot-agent-settings.jpg) -->
 
-内置 Cloudflare Tunnel，一键把本地服务暴露到公网，从手机或其它设备远程访问你的 Agent。
+<!-- ![模型配置](assets/screenshot-model-config.jpg) -->
 
-**支持的模型供应商：** OpenAI、Anthropic、Google、DeepSeek、MiniMax、xAI、Groq、Mistral、OpenRouter、Cerebras、Fireworks 等 17+ 家。每个 Agent 独立配置默认模型，每个会话可以临时切换。
+## 核心功能
 
-**跨平台：** macOS（Apple Silicon / Intel）、Windows x64。下载安装包即可使用，无需安装任何运行时。
+- **多 Agent 管理** — 创建多个独立 Agent，每个有自己的角色设定、模型配置和会话历史，互不干扰
+- **17+ 模型供应商** — OpenAI、Anthropic、Google、DeepSeek、MiniMax、xAI、Groq、Mistral、OpenRouter、Cerebras、Fireworks 等，每个 Agent 独立配置默认模型，每个会话可以临时切换
+- **工具调用** — 内置工具（执行命令、读写文件），MCP 协议连接外部工具服务器，Skill 加载获得专业知识
+- **流式对话** — 完整 Markdown 渲染，代码块一键复制，推理过程和工具调用细节可展开查看
+- **Agent 形象** — 全屏展示角色立绘，Agent 根据对话自动切换表情，配合语音合成朗读回复
+- **远程访问** — 内置 Cloudflare Tunnel，一键把本地服务暴露到公网，从手机或其它设备远程访问
+- **跨平台** — macOS（Apple Silicon / Intel）、Windows x64，下载即用，无需安装运行时
 
 ## 下载安装
 

packages/desktop/README.md

@@ -1,71 +1,110 @@
-# Animus Desktop
+# Persona Desktop
 
-A modern Electron desktop application for Animus.
+Persona Agent 的跨平台桌面客户端。内嵌后端二进制，下载安装包后无需任何配置即可使用。
 
-## Tech Stack
+## 技术栈
 
-- **Core**: Electron 28 + React 18 + TypeScript 5.3
-- **Build Tool**: electron-vite 2.0
-- **UI**: Tailwind CSS 3.4
-- **State Management**: Zustand 4.5
+- **框架**: Electron 28 + React 18 + TypeScript 5.3
+- **构建工具**: electron-vite 2.0
+- **UI**: Tailwind CSS 3.4 + Radix UI
+- **状态管理**: Zustand 4.5
 - **Markdown**: react-markdown 10 + remark-gfm + rehype-highlight
+- **虚拟列表**: react-virtuoso
 
-## Prerequisites
+## 核心功能
 
-- Node.js 18+
-- npm or yarn
+### Agent 管理
 
-## Development
+- 创建、编辑、删除多个 Agent，每个有独立的角色设定和模型配置
+- Agent 头像自定义，支持上传 pose 表情和背景图
+- 左侧 Agent 列表一键切换
+
+### 流式对话
+
+- SSE 流式输出，实时渲染 Markdown（表格、代码块高亮、LaTeX）
+- 代码块一键复制，Agent 推理过程和工具调用可折叠查看
+- 会话历史管理，支持创建、重命名、删除会话
+
+### 伴侣模式
+
+- 全屏展示角色立绘，背景图随 Agent 配置切换
+- Agent 根据对话自动切换表情（pose）
+- 语音合成朗读回复（MiniMax TTS）
+
+### MCP & Skills
+
+- 通过 MCP 协议连接外部工具服务器扩展 Agent 能力
+- 加载 Skill 赋予 Agent 专业知识
+- 设置中心统一管理 MCP 服务和 Skills
+
+### 模型供应商
+
+支持 OpenAI、Anthropic、Google、DeepSeek、MiniMax、xAI、Groq、Mistral、OpenRouter、Cerebras、Fireworks 等 17+ 家供应商。每个 Agent 独立配置默认模型，每个会话可以临时切换。
+
+### 其他
+
+- Cloudflare Tunnel 一键内网穿透，远程访问 Agent
+- 自动启动内嵌的后端二进制，用户无需手动管理进程
+- 支持 macOS（Apple Silicon / Intel）和 Windows x64
+
+## 开发
 
 ```bash
-# Install dependencies
-npm install
+# 安装依赖
+cd packages/server && bun install
+cd packages/desktop && npm install
 
-# Start development server
+# 开发模式（自动编译 server + 启动 Electron）
 npm run dev
 
-# Type check
-npm run typecheck
-
-# Build for production
+# 仅构建前端
 npm run build
 
-# Preview production build
-npm run preview
+# 构建安装包
+npm run dist           # 当前平台
+npm run dist:mac       # macOS (dmg)
+npm run dist:win       # Windows (nsis)
 ```
 
-## Project Structure
+其他命令：
+
+```bash
+npm run typecheck      # 类型检查
+npm run test           # 单元测试 (Vitest)
+```
+
+## 项目结构
 
 ```
 desktop/
 ├── src/
-│   ├── main/           # Electron main process
-│   ├── preload/        # Preload scripts
-│   └── renderer/       # React renderer process
-│       ├── components/ # React components
-│       ├── stores/     # Zustand stores
-│       ├── lib/        # Utilities and API
-│       └── types/      # TypeScript types
-├── out/                # Build output
-├── resources/          # App resources
-└── electron.vite.config.ts
+│   ├── main/              # Electron 主进程
+│   │   ├── index.ts       # 应用入口，窗口创建、进程管理
+│   │   ├── server-manager.ts  # 后端进程生命周期管理
+│   │   └── store/         # electron-store 持久化配置
+│   ├── preload/           # 预加载脚本
+│   └── renderer/          # React 前端
+│       ├── components/    # UI 组件
+│       │   ├── AgentSidebar.tsx      # Agent 列表侧边栏
+│       │   ├── AgentEditor.tsx       # Agent 编辑器
+│       │   ├── MessageList.tsx       # 消息列表（虚拟滚动）
+│       │   ├── CompanionPanel.tsx    # 伴侣模式全屏面板
+│       │   ├── SettingsPage.tsx      # 设置中心（5 个 Tab）
+│       │   ├── ModelSelector.tsx     # 模型选择器
+│       │   └── ...
+│       ├── stores/        # Zustand 状态管理
+│       ├── lib/           # API 请求、工具函数
+│       └── types/         # TypeScript 类型定义
+├── build/                 # 图标等构建资源
+├── resources/             # 种子数据（默认 Agent）
+├── electron.vite.config.ts
+└── electron-builder.yml
 ```
 
-## Features (Phase 0)
-
-- ✅ Basic Electron app setup
-- ✅ React + TypeScript configuration
-- ✅ Tailwind CSS integration
-- ✅ Connection to Animus server
-- ✅ Real-time streaming chat (SSE)
-- ✅ Message display (user/assistant/thinking/tooluse)
-- ✅ Auto-scroll to latest messages
-- ✅ Connection status indicator
-
-## Connection
+## 与 Server 的关系
 
-The app connects to the Animus server at `http://localhost:3847`.
+Desktop 的安装包内嵌了编译好的 Persona Agent Server 二进制。启动时主进程自动在后台拉起 Server，无需用户手动操作。开发模式下从项目构建产物加载 Server。
 
 ## License
 
-MIT
+[MIT](../../LICENSE)

packages/desktop/package.json

@@ -29,6 +29,7 @@
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^1.1.1",

packages/desktop/src/renderer/App.tsx

@@ -3,15 +3,15 @@
  * @description Electron前端渲染进程根组件
  *
  * 根据 viewStore.currentView 决定渲染哪个视图：
- * - 'settings' → 设置页面（SettingsPage）
- * - 'chat'     → 主界面（WebSocketProvider + AppContent）
+ * - 'settings'     → 设置页面（SettingsPage）
+ * - 'agent-editor' → Agent 编辑页面（AgentEditor）
+ * - 'chat'         → 主界面（WebSocketProvider + AppContent）
  *
  * AppContent 是主界面的核心，包含：
  * - AgentSidebar：左侧 Agent 列表
  * - SessionSidebar：会话列表
  * - MessageList：消息展示
  * - InputBox：输入框
- * - AgentEditor：Agent 编辑弹窗
  */
 import { useEffect, useRef, useState } from 'react';
 import { Header } from './components/Header';
@@ -39,8 +39,6 @@ import { logger } from './lib/logger';
 function AppContent() {
   /* 状态定义 */
 
-  const [agentEditorOpen, setAgentEditorOpen] = useState(false); // Agent编辑弹窗是否打开 TODO: 如果要修改Agent编辑页面, 这个地方要改
-  const [editingAgentId, setEditingAgentId] = useState<string | null>(null);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const pendingProviderRef = useRef<string | undefined>();
   const messageListRef = useRef<MessageListRef>(null);
@@ -68,22 +66,7 @@ function AppContent() {
   const { providers, loadProviders } = useProviderStore();
   const companionVisible = useCompanionStore((s) => s.visible);
   const currentView = useViewStore((s) => s.currentView);
-
-  /* 定义Agent弹窗的操作 */
-  /**
-   * 打开 Agent 编辑弹窗，传入 null 表示新建，传入 id 表示编辑已有 Agent
-   * @param agentId - 要编辑的 Agent ID，null 时为新建模式
-   */
-  const handleOpenAgentEditor = (agentId: string | null) => {
-    setEditingAgentId(agentId);
-    setAgentEditorOpen(true);
-  };
-
-  /** 关闭 Agent 编辑弹窗并清空编辑状态 */
-  const handleCloseAgentEditor = () => {
-    setAgentEditorOpen(false);
-    setEditingAgentId(null);
-  };
+  const editingAgentId = useViewStore((s) => s.editingAgentId);
 
   /**
    * 删除指定 Agent
@@ -224,14 +207,18 @@ function AppContent() {
 
   return (
     <div className="h-full flex bg-white">
-      <AgentSidebar
-        connectionStatus={connectionStatus}
-        onOpenAgentEditor={handleOpenAgentEditor}
-      />
+      <AgentSidebar connectionStatus={connectionStatus} />
       {currentView === 'settings' ? (
         <div className="flex-1 flex flex-col min-h-0 min-w-0">
           <SettingsPage />
         </div>
+      ) : currentView === 'agent-editor' ? (
+        <div className="flex-1 flex flex-col min-h-0 min-w-0">
+          <AgentEditor
+            editingAgentId={editingAgentId}
+            onDelete={handleDeleteAgent}
+          />
+        </div>
       ) : (
         <>
           <SessionSidebar
@@ -277,12 +264,6 @@ function AppContent() {
           </div>
         </>
       )}
-      <AgentEditor
-        isOpen={agentEditorOpen}
-        editingAgentId={editingAgentId}
-        onClose={handleCloseAgentEditor}
-        onDelete={handleDeleteAgent}
-      />
       <ToastContainer />
     </div>
   );