feat(ui): Phase 8 UI/UX optimization and system documentation update

## Sidebar Enhancement
- Change tabs to icon + small label layout for better space utilization
- Add Teams tab with team collaboration entry point

## Settings Page Improvements
- Connect theme toggle to gatewayStore.saveQuickConfig for persistence
- Remove OpenFang backend download section, simplify UI
- Add time range filter to UsageStats (7d/30d/all)
- Add stat cards with icons (sessions, messages, input/output tokens)
- Add token usage overview bar chart
- Add 8 ZCLAW system skill definitions with categories

## Bug Fixes
- Fix ChannelList duplicate content with deduplication logic
- Integrate CreateTriggerModal in TriggersPanel
- Add independent SecurityStatusPanel with 12 default enabled layers
- Change workflow view to use SchedulerPanel as unified entry

## New Components
- CreateTriggerModal: Event trigger creation modal
- HandApprovalModal: Hand approval workflow dialog
- HandParamsForm: Enhanced Hand parameter form
- SecurityLayersPanel: 16-layer security status display

## Architecture
- Add TOML config parsing support (toml-utils.ts, config-parser.ts)
- Add request timeout and retry mechanism (request-helper.ts)
- Add secure token storage (secure-storage.ts, secure_storage.rs)

## Tests
- Add unit tests for config-parser, toml-utils, request-helper
- Add team-client and teamStore tests

## Documentation
- Update SYSTEM_ANALYSIS.md with Phase 8 completion
- UI completion: 100% (30/30 components)
- API coverage: 93% (63/68 endpoints)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

desktop/src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Settings } from 'lucide-react';
+import { Settings, Users, Bot, GitBranch, MessageSquare } from 'lucide-react';
 import { CloneManager } from './CloneManager';
 import { HandList } from './HandList';
 import { TaskList } from './TaskList';
@@ -19,11 +19,11 @@ interface SidebarProps {
 
 type Tab = 'clones' | 'hands' | 'workflow' | 'team';
 
-const TABS: { key: Tab; label: string; mainView?: MainViewType }[] = [
-  { key: 'clones', label: '分身' },
-  { key: 'hands', label: 'HANDS', mainView: 'hands' },
-  { key: 'workflow', label: 'Workflow', mainView: 'workflow' },
-  { key: 'team', label: 'Team', mainView: 'team' },
+const TABS: { key: Tab; label: string; icon: React.ComponentType<{ className?: string }>; mainView?: MainViewType }[] = [
+  { key: 'clones', label: '分身', icon: Bot },
+  { key: 'hands', label: 'Hands', icon: MessageSquare, mainView: 'hands' },
+  { key: 'workflow', label: '工作流', icon: GitBranch, mainView: 'workflow' },
+  { key: 'team', label: '团队', icon: Users, mainView: 'team' },
 ];
 
 export function Sidebar({
@@ -54,19 +54,21 @@ export function Sidebar({
 
   return (
     <aside className="w-64 bg-gray-50 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 flex flex-col flex-shrink-0">
-      {/* 顶部标签 */}
+      {/* 顶部标签 - 使用图标 */}
       <div className="flex border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
-        {TABS.map(({ key, label }) => (
+        {TABS.map(({ key, label, icon: Icon }) => (
           <button
             key={key}
-            className={`flex-1 py-3 px-4 text-xs font-medium transition-colors ${
+            title={label}
+            className={`flex-1 py-2.5 px-2 text-xs font-medium transition-colors flex flex-col items-center gap-0.5 ${
               activeTab === key
-                ? 'text-gray-900 dark:text-white border-b-2 border-blue-500'
-                : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
+                ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+                : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700/50'
             }`}
             onClick={() => handleTabClick(key, TABS.find(t => t.key === key)?.mainView)}
           >
-            {label}
+            <Icon className="w-4 h-4" />
+            <span className="text-[10px]">{label}</span>
           </button>
         ))}
       </div>