feat(ui): add agent system overview, session config settings, and sp…

README.md

@@ -17,32 +17,63 @@
 
 ## A Word Up Front
 
-In the age of AI, we believe human–machine collaboration needs a fundamentally new form of software. Today, the programming domain is the most mature starting point for that exploration.
+In the age of AI, true human–machine collaboration isn't just a ChatBox — it's a partner that knows you, accompanies you, and gets things done for you anywhere, anytime. That's where BitFun's exploration begins.
 
 ## What Is BitFun
 
-BitFun is an Agentic Development Environment (ADE). While featuring a cutting-edge Code Agent system, we are more committed to deeply exploring and defining human–machine collaboration patterns, built with Rust + TypeScript for an ultra-lightweight and fluid experience.
+BitFun is a next-generation Agent system built around the idea of **"AI assistants with personality and memory"**.
+
+Every user has their own Agent assistant — one that remembers your habits and preferences, carries a unique personality, and keeps growing over time. On top of this assistant, BitFun ships with two built-in capabilities: **Code Agent** (coding assistant) and **Cowork Agent** (knowledge work assistant), along with a unified extension mechanism to define additional Agent roles as needed.
+
+Your assistant isn't confined to the desktop — it can be reached through multiple channels, such as WeChat, Telegram, WhatsApp, and other social platforms, letting you issue instructions anytime, anywhere. Tasks keep running in the background, and you check in or give feedback whenever convenient.
+
+Built with **Rust + TypeScript** for an ultra-lightweight, fluid, cross-platform experience.
 
 ![BitFun](./png/first_screen_screenshot.png)
 
+### Agent System
 
-### Working Modes
+| Agent | Role | Core Capabilities |
+|---|---|---|
+| **Personal Assistant (WIP🚧)** (default) | Your dedicated AI companion | Long-term memory, personality settings, cross-scenario orchestration, continuous growth |
+| **Code Agent** | Coding assistant | Conversation-driven coding, multi-mode task execution, autonomous read / edit / run / verify |
+| **Cowork Agent** | Knowledge work assistant | File management, document generation, report organization, autonomous multi-step task execution |
+| **Custom Agent** | Domain specialist | Quickly define a domain-specific Agent with Markdown |
+
+### Code Agent Working Modes
+
+Code Agent is built for software development, offering multiple modes that cover the full cycle from day-to-day coding to deep debugging, with deep integration into MCP, Skills, and Rules:
 
 | Mode | Scenario | Characteristics |
 |------|----------|-----------------|
 | **Agentic** | Day-to-day coding | Conversation-driven; AI autonomously reads, edits, runs, and verifies. |
 | **Plan** | Complex tasks | Plan first, then execute; align on critical changes upfront. |
 | **Debug** | Hard problems | Instrument & trace → compare paths → root-cause analysis → verify fix. |
 | **Review** | Code review | Review code based on key repository conventions. |
----
 
+### Cowork Agent Workflow
+
+Cowork Agent is designed for everyday work, following a "clarify first, execute next, stay trackable" collaboration principle, with built-in office Skills and access to the Skill marketplace:
+
+| Skill | Trigger | Core Capabilities |
+|---|---|---|
+| **PDF** | Working with .pdf files | Read/extract text & tables, merge/split/rotate, watermark, fill forms, encrypt/decrypt, OCR scanned PDFs |
+| **DOCX** | Create or edit Word documents | Create/edit .docx, styles/TOC/headers & footers, image insertion, comments & tracked changes |
+| **XLSX** | Working with spreadsheets | Create/analyze .xlsx/.csv, formulas & formatting, financial model standards (color coding, formula validation) |
+| **PPTX** | Build presentations | Create/edit .pptx from scratch, visual design guidelines, automated visual QA |
+| **agent-browser** | Browser interaction needed | Browser automation: open pages, click/fill forms, screenshot, scrape data, web app testing |
+| **skill-creator** | Creating a custom Skill | Guides authoring new Skills to extend the Agent's domain-specific capabilities |
+| **find-skills** | Looking for ready-made capabilities | Discover and install community-contributed reusable Skills from the Skill marketplace |
+
+---
 
 ### Extensibility
 
-- **MCP Protocol**: Extend with external tools and resources via MCP servers.
+- **MCP Protocol**: Extend with external tools and resources via MCP servers; supports MCP Apps.
 - **Skills**: Markdown/script-based capability packages that teach the Agent specific tasks (auto-reads Cursor, Claude Code, Codex configs).
-- **Agent Customization**: Quickly define specialized Agents with Markdown.
-- **Rules**: Quickly customize professional Agents via Markdown (auto-reads Cursor configs).
+- **Agent Customization**: Quickly define a specialized Agent's personality, memory scope, and capabilities with Markdown.
+- **Rules**: Project/global-level convention injection; auto-reads Cursor and other mainstream tool configs.
+- **Hooks (WIP🚧)**: Inject deterministic automation logic at key task milestones.
 
 ---
 
@@ -78,13 +109,15 @@ For more details, see the [Contributing Guide](./CONTRIBUTING.md).
 
 ## Platform Support
 
-The project uses a Rust + TypeScript tech stack, supporting cross-platform and multi-form-factor reuse.
+The project uses a Rust + TypeScript tech stack, supporting cross-platform and multi-form-factor reuse — keeping your Agent assistant always online and reachable everywhere.
+
 | Form Factor | Supported Platforms | Status |
 |-------------|---------------------|--------|
 | **Desktop** (Tauri) | Windows, macOS | ✅ Supported |
 | **CLI** | Windows, macOS, Linux | 🚧 In Development |
 | **Server** | - | 🚧 In Development |
-| **Mobile** | - | 🚧 In Development |
+| **Mobile** (Native App) | iOS, Android | 🚧 In Development |
+| **Social Platform Integration** | WeChat, Telegram, WhatsApp, Discord, etc. | 🚧 In Development |
 
 
 

README.zh-CN.md

@@ -17,32 +17,64 @@
 
 ## 写在前面的话
 
-AI时代，我们相信人机协同需要一种全新的软件形态。而当下，编程领域是这一探索最成熟的起点。
+AI 时代，真正的人机协同不是简单的ChatBox，而是一个懂你、陪你并且随时随地替你做事的伙伴。BitFun 的探索，从这里开始。
 
 ## 什么是 BitFun
 
-BitFun 是一款代理式开发环境（ADE，Agentic Development Environment），在拥有前沿Code Agent体系的同时我们更希望深度探索并定义人机协作方式，并以Rust + TypeScript希望提供极致轻巧、流畅的体验。
+BitFun 是一个以 **"有个性、有记忆的 AI 助理"** 为核心的新一代 Agent 系统。
+
+每一位用户都拥有属于自己的 Agent 助理——它记得你的习惯与偏好，拥有独特的性格设定，并随时间持续成长。在这个助理之上，BitFun 默认内置了 **Code Agent**（代码代理）与 **Cowork Agent**（桌面端工作助理）两种专业能力，并提供统一的扩展机制供用户按需定制更多 Agent 角色。
+
+你的助理不只存在于桌面——可以通过多种媒体方式联系，比如通过微信、Telegram、WhatsApp 等社交平台，都可以随时随地向它下达指令，任务在后台持续推进，你只需在方便时查看进度或给出反馈。
+
+以 **Rust + TypeScript** 构建，追求极致轻量与流畅的跨平台体验。
 
 ![BitFun](./png/first_screen_screenshot-zh-CN.png)
 
-### 工作模式
+### Agent 体系
+
+| Agent | 定位 | 核心能力 |
+|---|---|---|
+| **个人助理（WIP🚧）**（默认） | 你专属的 AI 伙伴 | 长期记忆、个性设定、跨场景调度、持续成长 |
+| **Code Agent** | 代码代理 | 对话驱动编码，多模式任务执行，自主读/改/跑/验证 |
+| **Cowork Agent** | 知识工作代理 | 文件管理、文档生成、报告整理、多步任务自主执行 |
+| **自定义 Agent** | 垂域专家 | 通过 Markdown 快速定义专属领域 Agent |
+
+### Code Agent 工作模式
+
+Code Agent 专为软件开发设计，支持多种工作模式覆盖从日常编码到疑难排查的全流程，并深度集成 MCP、Skills、Rules 等扩展体系：
 
 | 模式 | 场景 | 特点 |
 |---|---|---|
 | **Agentic** | 日常编码 | 对话驱动，AI 自主完成读/改/跑/验证 |
 | **Plan** | 复杂任务 | 先规划后执行，关键改动点提前对齐 |
 | **Debug** | 疑难问题 | 插桩取证 → 路径对比 → 根因定位 → 验证修复 |
 | **Review** | 代码审查 | 基于仓库关键规范进行代码审查 |
----
 
 
+### Cowork Agent 工作方式
+
+Cowork Agent 专为日常工作设计，遵循"先澄清、再执行、可追踪"的协作原则，内置多个常用办公Skill，并对接skill市场：
+
+| Skill | 触发场景 | 核心能力 |
+|---|---|---|
+| **PDF** | 处理 .pdf 文件 | 读取/提取文本与表格、合并/拆分/旋转、添加水印、填写表单、加密解密、OCR 扫描版 |
+| **DOCX** | 创建或编辑 Word 文档 | 创建/编辑 .docx、样式/目录/页眉页脚、插入图片、批注与追踪修订 |
+| **XLSX** | 处理电子表格 | 创建/分析 .xlsx/.csv，公式与格式化，财务模型规范（颜色编码、公式校验） |
+| **PPTX** | 制作演示文稿 | 从零创建/编辑 .pptx，视觉设计规范，自动 QA 视觉检查 |
+| **agent-browser** | 需要操控网页 | 浏览器自动化：打开网页、点击/填表、截图、抓取数据、Web 测试 |
+| **skill-creator** | 创建自定义 Skill | 引导创作新 Skill，扩展 Agent 的专业能力范围 |
+| **find-skills** | 寻找现成能力包 | 从 Skill 市场发现并安装社区贡献的可复用 Skill |
+
+---
 
 ### 扩展能力
 
-- **MCP 协议**：通过 MCP 服务器扩展外部工具与资源
-- **Skills**：Markdown/脚本等能力包，教 Agent 完成特定任务（自动读取Cursor、Claude Code、Codex等配置）
-- **Agent 自定义**：通过 Markdown 快速自定义专业 Agent
-- **Rules**：通过 Markdown 快速自定义专业 Agent（自动读取Cursor配置）
+- **MCP 协议**：通过 MCP 服务器扩展外部工具与资源，支持MCP APP
+- **Skills**：Markdown/脚本等能力包，教 Agent 完成特定任务（自动读取 Cursor、Claude Code、Codex 等配置）
+- **Agent 自定义**：通过 Markdown 快速定义专属 Agent 的性格、记忆与能力范围
+- **Rules**：项目/全局级规范注入，自动读取 Cursor 等主流工具配置
+- **Hooks（WIP🚧）**：在任务关键节点注入确定性自动化逻辑
 
 ---
 
@@ -78,13 +110,15 @@ npm run desktop:build
 
 ## 平台支持
 
-项目采用 Rust + TypeScript 技术栈，支持跨平台和多形态复用。
+项目采用 Rust + TypeScript 技术栈，支持跨平台和多形态复用，确保你的 Agent 助理随时在线、随处可达。
+
 | 形态 | 支持平台 | 状态 |
 |------|----------|------|
-| **Desktop**（Tauri） | Windows、macOS| ✅ 已支持 |
+| **Desktop**（Tauri） | Windows、macOS | ✅ 已支持 |
 | **CLI** | Windows、macOS、Linux | 🚧 开发中 |
 | **Server** | - | 🚧 开发中 |
-| **手机端** | - | 🚧 开发中 |
+| **手机端**（独立 App） | iOS、Android | 🚧 开发中 |
+| **社交平台接入** | 微信、Telegram、WhatsApp、Discord 等 | 🚧 开发中 |
 
 
 

src/web-ui/src/app/components/NavPanel/MainNav.tsx

@@ -11,7 +11,7 @@
  * the outer Grid accordion handles the actual height collapse.
  */
 
-import React, { useCallback, useState, useMemo } from 'react';
+import React, { useCallback, useState, useMemo, useEffect } from 'react';
 import { Plus } from 'lucide-react';
 import { useApp } from '../../hooks/useApp';
 import { useSceneManager } from '../../hooks/useSceneManager';
@@ -33,7 +33,10 @@ import SkillsSection from './sections/skills/SkillsSection';
 import WorkspaceHeader from './components/WorkspaceHeader';
 import { useSceneStore } from '../../stores/sceneStore';
 import { flowChatManager } from '@/flow_chat/services/FlowChatManager';
+import { configManager } from '@/infrastructure/config/services/ConfigManager';
 import { createLogger } from '@/shared/utils/logger';
+
+const DEFAULT_MODE_CONFIG_KEY = 'app.session_config.default_mode';
 import './NavPanel.scss';
 
 const log = createLogger('MainNav');
@@ -184,6 +187,21 @@ const MainNav: React.FC<MainNavProps> = ({
 
   const sessionMode = useSessionModeStore(s => s.mode);
 
+  const [defaultSessionMode, setDefaultSessionMode] = useState<'code' | 'cowork'>('code');
+
+  useEffect(() => {
+    configManager.getConfig<'code' | 'cowork'>(DEFAULT_MODE_CONFIG_KEY).then(mode => {
+      if (mode === 'code' || mode === 'cowork') setDefaultSessionMode(mode);
+    }).catch(() => {});
+
+    const unwatch = configManager.watch(DEFAULT_MODE_CONFIG_KEY, () => {
+      configManager.getConfig<'code' | 'cowork'>(DEFAULT_MODE_CONFIG_KEY).then(mode => {
+        if (mode === 'code' || mode === 'cowork') setDefaultSessionMode(mode);
+      }).catch(() => {});
+    });
+    return () => unwatch();
+  }, []);
+
   const handleCreateSession = useCallback(async () => {
     openScene('session');
     switchLeftPanelTab('sessions');
@@ -253,7 +271,7 @@ const MainNav: React.FC<MainNavProps> = ({
                               isOpen={isOpen}
                               onClick={() => handleItemClick(tab, item)}
                               actionIcon={tab === 'sessions' ? Plus : undefined}
-                              actionTitle={tab === 'sessions' ? t('nav.sessions.newSession') : undefined}
+                              actionTitle={tab === 'sessions' ? (defaultSessionMode === 'cowork' ? t('nav.sessions.newCoworkSession') : t('nav.sessions.newCodeSession')) : undefined}
                               onActionClick={tab === 'sessions' ? handleCreateSession : undefined}
                             />
                           </div>

src/web-ui/src/app/components/NavPanel/components/NavItem.tsx

@@ -63,7 +63,7 @@ const NavItem: React.FC<NavItemProps> = ({
     onActionClick?.();
   };
 
-  const button = (
+  return (
     <button
       type="button"
       className={[
@@ -124,14 +124,6 @@ const NavItem: React.FC<NavItemProps> = ({
       )}
     </button>
   );
-
-  const tooltipText = tooltipContent || displayLabel;
-
-  return (
-    <Tooltip content={tooltipText} placement="right" followCursor>
-      {button}
-    </Tooltip>
-  );
 };
 
 export default NavItem;

src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss

@@ -28,7 +28,8 @@
   &__inline-action {
     display: flex;
     align-items: center;
-    gap: 5px;
+    justify-content: center;
+    gap: 4px;
     height: 24px;
     padding: 0 $size-gap-1;
     border: 1px dashed var(--border-subtle);
@@ -43,70 +44,24 @@
                 background $motion-fast $easing-standard,
                 border-color $motion-fast $easing-standard;
 
-    &:hover {
-      color: var(--color-primary);
-      background: color-mix(in srgb, var(--color-primary) 8%, transparent);
-      border-color: var(--color-primary);
-    }
-
     svg { flex-shrink: 0; }
 
     span {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-  }
 
-  // Mode chips container
-  &__mode-switcher {
-    display: flex;
-    align-items: center;
-    gap: 3px;
-    flex-shrink: 0;
-  }
-
-  // Individual mode chip with bouncy spring animation
-  &__mode-chip {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    border: none;
-    background: none;
-    cursor: pointer;
-    flex-shrink: 0;
-    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
-                color $motion-fast $easing-standard,
-                background $motion-fast $easing-standard;
-
-    &.is-active {
-      order: -1;
-      transform: scale(1);
-      color: var(--color-accent-500);
-      background: var(--color-accent-200);
-    }
-
-    &:not(.is-active) {
-      transform: scale(0.78);
-      color: var(--color-text-muted);
-      background: none;
-    }
-
-    &:hover:not(.is-active) {
-      transform: scale(0.88);
-      color: var(--color-text-secondary);
-      background: var(--element-bg-soft);
-    }
-
-    &:active {
-      transform: scale(0.92);
+    &.is-code:hover {
+      color: var(--color-primary);
+      background: color-mix(in srgb, var(--color-primary) 8%, transparent);
+      border-color: var(--color-primary);
     }
 
-    &.is-placeholder:not(.is-active) {
-      opacity: 0.55;
+    &.is-cowork:hover {
+      color: var(--color-accent-500);
+      background: color-mix(in srgb, var(--color-accent-500) 8%, transparent);
+      border-color: var(--color-accent-500);
     }
   }