feat(ui): merge capabilities into team scene and add per-agent skill …

README.md

@@ -25,7 +25,7 @@ BitFun is a next-generation Agent system built around the idea of **"AI assistan
 
 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.
+Your assistant isn't confined to the desktop — it can be reached through multiple channels, such as 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.
 
@@ -117,7 +117,7 @@ The project uses a Rust + TypeScript tech stack, supporting cross-platform and m
 | **CLI** | Windows, macOS, Linux | 🚧 In Development |
 | **Server** | - | 🚧 In Development |
 | **Mobile** (Native App) | iOS, Android | 🚧 In Development |
-| **Social Platform Integration** | WeChat, Telegram, WhatsApp, Discord, etc. | 🚧 In Development |
+| **Social Platform Integration** | Telegram, WhatsApp, Discord, etc. | 🚧 In Development |
 
 
 

README.zh-CN.md

@@ -1,4 +1,4 @@
-**中文** | [English](README.md)
+**中文** | [English](README.md)
 
 <div align="center">
 
@@ -25,7 +25,7 @@ BitFun 是一个以 **"有个性、有记忆的 AI 助理"** 为核心的新一
 
 每一位用户都拥有属于自己的 Agent 助理——它记得你的习惯与偏好，拥有独特的性格设定，并随时间持续成长。在这个助理之上，BitFun 默认内置了 **Code Agent**（代码代理）与 **Cowork Agent**（桌面端工作助理）两种专业能力，并提供统一的扩展机制供用户按需定制更多 Agent 角色。
 
-你的助理不只存在于桌面——可以通过多种媒体方式联系，比如通过微信、Telegram、WhatsApp 等社交平台，都可以随时随地向它下达指令，任务在后台持续推进，你只需在方便时查看进度或给出反馈。
+你的助理不只存在于桌面——可以通过多种媒体方式联系，比如通过 Telegram、WhatsApp 等社交平台，都可以随时随地向它下达指令，任务在后台持续推进，你只需在方便时查看进度或给出反馈。
 
 以 **Rust + TypeScript** 构建，追求极致轻量与流畅的跨平台体验。
 
@@ -118,7 +118,7 @@ npm run desktop:build
 | **CLI** | Windows、macOS、Linux | 🚧 开发中 |
 | **Server** | - | 🚧 开发中 |
 | **手机端**（独立 App） | iOS、Android | 🚧 开发中 |
-| **社交平台接入** | 微信、Telegram、WhatsApp、Discord 等 | 🚧 开发中 |
+| **社交平台接入** | Telegram、WhatsApp、Discord 等 | 🚧 开发中 |
 
 
 

src/web-ui/src/app/components/SceneBar/types.ts

@@ -5,7 +5,7 @@
 import type { LucideIcon } from 'lucide-react';
 
 /** Scene tab identifier — max 3 open at a time */
-export type SceneTabId = 'welcome' | 'session' | 'terminal' | 'git' | 'settings' | 'file-viewer' | 'profile' | 'capabilities' | 'team' | 'skills';
+export type SceneTabId = 'welcome' | 'session' | 'terminal' | 'git' | 'settings' | 'file-viewer' | 'profile' | 'team' | 'skills';
 
 /** Static definition (from registry) for a scene tab type */
 export interface SceneTabDef {

src/web-ui/src/app/components/panels/content-canvas/ContentCanvas.tsx

@@ -49,7 +49,7 @@ export const ContentCanvas: React.FC<ContentCanvasProps> = ({
   const { handleCloseWithDirtyCheck, handleCloseAllWithDirtyCheck } = useTabLifecycle({ mode });
   useKeyboardShortcuts({ enabled: true, handleCloseWithDirtyCheck });
   // Panel/tab state coordinator (auto manage expand/collapse)
-  usePanelTabCoordinator({
+  const { collapsePanel } = usePanelTabCoordinator({
     autoCollapseOnEmpty: true,
     autoExpandOnTabOpen: true,
   });
@@ -89,7 +89,7 @@ export const ContentCanvas: React.FC<ContentCanvasProps> = ({
   const renderContent = () => {
     // Show empty state when primary group has no visible tabs
     if (!hasPrimaryVisibleTabs) {
-      return <EmptyState />;
+      return <EmptyState onClose={collapsePanel} />;
     }
 
     return (

src/web-ui/src/app/components/panels/content-canvas/empty-state/EmptyState.scss

@@ -4,20 +4,52 @@
 
 .canvas-empty-state {
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
+  align-items: stretch;
   width: 100%;
   height: 100%;
   background: var(--color-bg-scene);
-  padding: 40px;
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 4px 6px;
+    flex-shrink: 0;
+  }
+
+  &__close-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s;
+
+    &:hover {
+      background: var(--color-bg-hover, rgba(255, 255, 255, 0.08));
+      color: var(--color-text-primary, rgba(255, 255, 255, 0.9));
+    }
+  }
 
   &__content {
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
+    flex: 1;
     gap: 48px;
+    padding: 40px;
     max-width: 400px;
+    align-self: center;
     text-align: center;
+    width: 100%;
   }
 
   // Message

src/web-ui/src/app/components/panels/content-canvas/empty-state/EmptyState.tsx

@@ -3,19 +3,38 @@
  * Empty state display.
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { X } from 'lucide-react';
+import { Tooltip } from '@/component-library';
 import './EmptyState.scss';
 
 export interface EmptyStateProps {
-  // No callbacks needed
+  onClose?: () => void;
 }
 
-export const EmptyState: React.FC<EmptyStateProps> = () => {
+export const EmptyState: React.FC<EmptyStateProps> = ({ onClose }) => {
   const { t } = useTranslation('components');
 
+  const handleClose = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    onClose?.();
+  }, [onClose]);
+
   return (
     <div className="canvas-empty-state">
+      {onClose && (
+        <div className="canvas-empty-state__toolbar">
+          <Tooltip content={t('tabs.close')}>
+            <button
+              className="canvas-empty-state__close-btn"
+              onClick={handleClose}
+            >
+              <X size={14} />
+            </button>
+          </Tooltip>
+        </div>
+      )}
       <div className="canvas-empty-state__content">
         {/* Message */}
         <div className="canvas-empty-state__message">

src/web-ui/src/app/components/panels/content-canvas/tab-bar/Tab.scss

@@ -40,6 +40,14 @@
     }
   }
 
+  // Task-detail tabs: no italic, normal opacity regardless of preview state
+  &.is-task-detail {
+    &.is-preview .canvas-tab__title {
+      font-style: normal;
+      opacity: 1;
+    }
+  }
+
   // Pinned state
   &.is-pinned {
     .canvas-tab__title {
@@ -61,6 +69,14 @@
 
   // ==================== Child elements ====================
 
+  // Type icon (e.g. task-detail)
+  &__type-icon {
+    flex-shrink: 0;
+    color: var(--color-text-secondary, rgba(255, 255, 255, 0.5));
+    display: flex;
+    align-items: center;
+  }
+
   // Pin icon
   &__pin-icon {
     display: flex;