Skip to content

Commit f044291

Browse files
tt-a1itt-a1i
committed
feat: add new animation and system components while updating authentication module
Added several new animation components for various system functionalities including HookEvent, PolicyDecision, MessageBus, RoutingChain, and AgentLoop animations. Also added new system components like HookSystem, PolicyEngine, ModelRouting, and AgentFramework pages. Updated QwenAuthentication to GoogleAuthentication and included additional pages such as FallbackSystem, ChatRecording, PromptRegistry, CommandLoading, PromptProcessors, and UIStateManagement. This enhances the application's architecture visualization and system component coverage.
1 parent dbe6760 commit f044291

118 files changed

Lines changed: 17501 additions & 1296 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/App.tsx‎

Lines changed: 52 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,11 @@ const SubagentConfigAnimation = lazy(() => import('./pages/SubagentConfigAnimati
7171
const HistoryCompressionAnimation = lazy(() => import('./pages/HistoryCompressionAnimation').then(m => ({ default: m.HistoryCompressionAnimation })));
7272
const StreamingToolCallParserAnimation = lazy(() => import('./pages/StreamingToolCallParserAnimation').then(m => ({ default: m.StreamingToolCallParserAnimation })));
7373
const LoopDetectionAnimation = lazy(() => import('./pages/LoopDetectionAnimation').then(m => ({ default: m.LoopDetectionAnimation })));
74+
const HookEventAnimation = lazy(() => import('./pages/HookEventAnimation').then(m => ({ default: m.HookEventAnimation })));
75+
const PolicyDecisionAnimation = lazy(() => import('./pages/PolicyDecisionAnimation').then(m => ({ default: m.PolicyDecisionAnimation })));
76+
const MessageBusAnimation = lazy(() => import('./pages/MessageBusAnimation').then(m => ({ default: m.MessageBusAnimation })));
77+
const RoutingChainAnimation = lazy(() => import('./pages/RoutingChainAnimation').then(m => ({ default: m.RoutingChainAnimation })));
78+
const AgentLoopAnimation = lazy(() => import('./pages/AgentLoopAnimation').then(m => ({ default: m.AgentLoopAnimation })));
7479
const RequestTokenizerAnimation = lazy(() => import('./pages/RequestTokenizerAnimation').then(m => ({ default: m.RequestTokenizerAnimation })));
7580
const ResultCacheAnimation = lazy(() => import('./pages/ResultCacheAnimation').then(m => ({ default: m.ResultCacheAnimation })));
7681
const TerminalSerializerAnimation = lazy(() => import('./pages/TerminalSerializerAnimation').then(m => ({ default: m.TerminalSerializerAnimation })));
@@ -125,9 +130,14 @@ const ShadowGitCheckpointAnimation = lazy(() => import('./pages/ShadowGitCheckpo
125130
const ChatRecordingAnimation = lazy(() => import('./pages/ChatRecordingAnimation'));
126131
const SubagentArchitecture = lazy(() => import('./pages/SubagentArchitecture').then(m => ({ default: m.SubagentArchitecture })));
127132
const TokenManagementStrategy = lazy(() => import('./pages/TokenManagementStrategy').then(m => ({ default: m.TokenManagementStrategy })));
133+
const HookSystem = lazy(() => import('./pages/HookSystem').then(m => ({ default: m.HookSystem })));
134+
const PolicyEngine = lazy(() => import('./pages/PolicyEngine').then(m => ({ default: m.PolicyEngine })));
135+
const MessageBus = lazy(() => import('./pages/MessageBus').then(m => ({ default: m.MessageBus })));
136+
const ModelRouting = lazy(() => import('./pages/ModelRouting').then(m => ({ default: m.ModelRouting })));
137+
const AgentFramework = lazy(() => import('./pages/AgentFramework').then(m => ({ default: m.AgentFramework })));
128138
const ContentFormatConversion = lazy(() => import('./pages/ContentFormatConversion').then(m => ({ default: m.ContentFormatConversion })));
129139
const CommandExecutionContext = lazy(() => import('./pages/CommandExecutionContext').then(m => ({ default: m.CommandExecutionContext })));
130-
const QwenAuthentication = lazy(() => import('./pages/QwenAuthentication').then(m => ({ default: m.QwenAuthentication })));
140+
const GoogleAuthentication = lazy(() => import('./pages/GoogleAuthentication').then(m => ({ default: m.GoogleAuthentication })));
131141
const StreamingResponseProcessing = lazy(() => import('./pages/StreamingResponseProcessing').then(m => ({ default: m.StreamingResponseProcessing })));
132142
const ZedIntegration = lazy(() => import('./pages/ZedIntegration').then(m => ({ default: m.ZedIntegration })));
133143
const ModelConfiguration = lazy(() => import('./pages/ModelConfiguration').then(m => ({ default: m.ModelConfiguration })));
@@ -139,6 +149,12 @@ const ShellExecutionServiceDeep = lazy(() => import('./pages/ShellExecutionServi
139149
const TokenLifecycleOverview = lazy(() => import('./pages/TokenLifecycleOverview').then(m => ({ default: m.TokenLifecycleOverview })));
140150
const ErrorRecoveryDecisionTree = lazy(() => import('./pages/ErrorRecoveryDecisionTree').then(m => ({ default: m.ErrorRecoveryDecisionTree })));
141151
const IDEIntegrationOverview = lazy(() => import('./pages/IDEIntegrationOverview').then(m => ({ default: m.IDEIntegrationOverview })));
152+
const FallbackSystem = lazy(() => import('./pages/FallbackSystem').then(m => ({ default: m.FallbackSystem })));
153+
const ChatRecording = lazy(() => import('./pages/ChatRecording').then(m => ({ default: m.ChatRecording })));
154+
const PromptRegistry = lazy(() => import('./pages/PromptRegistry').then(m => ({ default: m.PromptRegistry })));
155+
const CommandLoading = lazy(() => import('./pages/CommandLoading').then(m => ({ default: m.CommandLoading })));
156+
const PromptProcessors = lazy(() => import('./pages/PromptProcessors').then(m => ({ default: m.PromptProcessors })));
157+
const UIStateManagement = lazy(() => import('./pages/UIStateManagement').then(m => ({ default: m.UIStateManagement })));
142158

143159
// 页面加载 fallback
144160
function PageLoading() {
@@ -184,7 +200,7 @@ function App() {
184200

185201
const activeTabLabel = useMemo(() => {
186202
const item = flatNavItems.find((i) => i.id === activeTab);
187-
return item?.label ?? 'Qwen CLI';
203+
return item?.label ?? 'Gemini CLI';
188204
}, [activeTab]);
189205

190206
useEffect(() => {
@@ -299,6 +315,8 @@ function App() {
299315
return <AtCommands />;
300316
case 'memory-split':
301317
return <MemorySystemSplit />;
318+
case 'agent-framework':
319+
return <AgentFramework />;
302320
case 'subagent':
303321
return <SubagentSystem />;
304322
case 'mcp':
@@ -311,6 +329,14 @@ function App() {
311329
return <IDEIntegrationOverview />;
312330
case 'ide-diff':
313331
return <IDEDiffProtocol />;
332+
case 'hook-system':
333+
return <HookSystem />;
334+
case 'policy-engine':
335+
return <PolicyEngine />;
336+
case 'message-bus':
337+
return <MessageBus />;
338+
case 'model-routing':
339+
return <ModelRouting />;
314340
case 'approval-mode':
315341
return <ApprovalModeSystem />;
316342
case 'trusted-folders':
@@ -373,6 +399,16 @@ function App() {
373399
return <StreamingToolCallParserAnimation />;
374400
case 'loop-detection-anim':
375401
return <LoopDetectionAnimation />;
402+
case 'hook-event-anim':
403+
return <HookEventAnimation />;
404+
case 'policy-decision-anim':
405+
return <PolicyDecisionAnimation />;
406+
case 'message-bus-anim':
407+
return <MessageBusAnimation />;
408+
case 'routing-chain-anim':
409+
return <RoutingChainAnimation />;
410+
case 'agent-loop-anim':
411+
return <AgentLoopAnimation />;
376412
case 'request-tokenizer-anim':
377413
return <RequestTokenizerAnimation />;
378414
case 'result-cache-anim':
@@ -473,8 +509,8 @@ function App() {
473509
return <ContentFormatConversion />;
474510
case 'command-execution-context':
475511
return <CommandExecutionContext />;
476-
case 'qwen-authentication':
477-
return <QwenAuthentication />;
512+
case 'google-authentication':
513+
return <GoogleAuthentication />;
478514
case 'streaming-response-processing':
479515
return <StreamingResponseProcessing />;
480516
case 'zed-integration':
@@ -487,6 +523,18 @@ function App() {
487523
return <ErrorRecoveryPatterns />;
488524
case 'concurrency-patterns':
489525
return <ConcurrencyPatterns />;
526+
case 'fallback-system':
527+
return <FallbackSystem />;
528+
case 'chat-recording':
529+
return <ChatRecording />;
530+
case 'prompt-registry':
531+
return <PromptRegistry />;
532+
case 'command-loading':
533+
return <CommandLoading />;
534+
case 'prompt-processors':
535+
return <PromptProcessors />;
536+
case 'ui-state-management':
537+
return <UIStateManagement />;
490538
default:
491539
return <StartHere onNavigate={(tab) => navigateToTab(tab)} />;
492540
}

‎src/components/Sidebar.tsx‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ export function Sidebar({ activeTab, onTabChange }: SidebarProps) {
102102
<div className="flex items-center gap-2">
103103
<span className="text-[var(--terminal-green)] text-lg">▶</span>
104104
<h1 className="text-lg font-bold text-[var(--terminal-green)] font-mono tracking-tight">
105-
Qwen CLI
105+
Gemini CLI
106106
</h1>
107107
</div>
108108
<p className="text-xs text-[var(--text-muted)] mt-1 pl-6 font-mono">
@@ -271,18 +271,6 @@ export function Sidebar({ activeTab, onTabChange }: SidebarProps) {
271271
<span className="flex-1">gemini-cli</span>
272272
<span className="text-[var(--text-muted)] group-hover:text-[var(--terminal-green)] transition-colors">↗</span>
273273
</a>
274-
<a
275-
href="https://github.com/zhimanai/qwen-cli"
276-
target="_blank"
277-
rel="noopener noreferrer"
278-
className="flex items-center gap-2 px-2.5 py-2 rounded-md bg-[var(--bg-void)] border border-[var(--border-subtle)] text-[var(--text-secondary)] hover:border-[var(--amber-dim)] hover:text-[var(--amber)] transition-all duration-200 group"
279-
>
280-
<svg className="w-4 h-4 opacity-70 group-hover:opacity-100" fill="currentColor" viewBox="0 0 24 24">
281-
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
282-
</svg>
283-
<span className="flex-1">qwen-cli</span>
284-
<span className="text-[var(--text-muted)] group-hover:text-[var(--amber)] transition-colors">↗</span>
285-
</a>
286274
</div>
287275
</div>
288276
</div>

‎src/nav.ts‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,10 @@ export const navGroups: NavGroup[] = [
7777
items: [
7878
{ id: 'slash-cmd', label: '斜杠命令' },
7979
{ id: 'command-execution-context', label: '命令执行上下文', highlight: true },
80+
{ id: 'command-loading', label: '命令加载系统', highlight: true },
8081
{ id: 'custom-cmd', label: '自定义命令', highlight: true },
8182
{ id: 'shell-modes', label: 'Shell模式', highlight: true },
83+
{ id: 'prompt-processors', label: 'Prompt 处理器', highlight: true },
8284
{ id: 'at-cmd', label: '@命令' },
8385
{ id: 'memory-split', label: '记忆系统', highlight: true },
8486
],
@@ -89,16 +91,30 @@ export const navGroups: NavGroup[] = [
8991
icon: '🔌',
9092
defaultOpen: false,
9193
items: [
94+
{ id: 'agent-framework', label: 'Agent 框架', highlight: true },
9295
{ id: 'subagent', label: '子代理系统' },
9396
{ id: 'subagent-architecture', label: '子代理架构深度', highlight: true },
9497
{ id: 'mcp', label: 'MCP集成' },
98+
{ id: 'prompt-registry', label: 'Prompt 注册表', highlight: true },
9599
{ id: 'extension', label: '扩展系统' },
96100
{ id: 'ide-integration-overview', label: 'IDE集成总览', highlight: true },
97101
{ id: 'ide-integration', label: 'IDE集成详情' },
98102
{ id: 'zed-integration', label: 'Zed ACP协议', highlight: true },
99103
{ id: 'ide-diff', label: 'IDE Diff协议', highlight: true },
100104
],
101105
},
106+
{
107+
id: 'events-policy',
108+
title: '事件与策略',
109+
icon: '🎯',
110+
defaultOpen: true,
111+
items: [
112+
{ id: 'hook-system', label: 'Hook 事件系统', highlight: true },
113+
{ id: 'policy-engine', label: 'Policy 策略引擎', highlight: true },
114+
{ id: 'message-bus', label: '消息总线', highlight: true },
115+
{ id: 'model-routing', label: '模型路由', highlight: true },
116+
],
117+
},
102118
{
103119
id: 'security',
104120
title: '安全可靠',
@@ -111,6 +127,7 @@ export const navGroups: NavGroup[] = [
111127
{ id: 'sandbox', label: '沙箱系统' },
112128
{ id: 'loop-detect', label: '循环检测' },
113129
{ id: 'retry', label: '重试回退' },
130+
{ id: 'fallback-system', label: 'Fallback 降级', highlight: true },
114131
{ id: 'error', label: '错误处理' },
115132
{ id: 'error-recovery-decision-tree', label: '错误恢复决策树', highlight: true },
116133
],
@@ -123,6 +140,7 @@ export const navGroups: NavGroup[] = [
123140
items: [
124141
{ id: 'non-interactive', label: '非交互模式' },
125142
{ id: 'welcome-back', label: '会话恢复' },
143+
{ id: 'chat-recording', label: '会话录制', highlight: true },
126144
],
127145
},
128146
{
@@ -132,6 +150,7 @@ export const navGroups: NavGroup[] = [
132150
defaultOpen: false,
133151
items: [
134152
{ id: 'ui', label: 'UI渲染层' },
153+
{ id: 'ui-state-management', label: 'UI 状态管理', highlight: true },
135154
{ id: 'theme', label: '主题系统' },
136155
{ id: 'telemetry', label: '遥测系统' },
137156
],
@@ -157,6 +176,11 @@ export const navGroups: NavGroup[] = [
157176
icon: '🔬',
158177
defaultOpen: true,
159178
items: [
179+
{ id: 'hook-event-anim', label: 'Hook 事件流', highlight: true },
180+
{ id: 'policy-decision-anim', label: 'Policy 决策流', highlight: true },
181+
{ id: 'message-bus-anim', label: '消息总线流', highlight: true },
182+
{ id: 'routing-chain-anim', label: '路由策略链', highlight: true },
183+
{ id: 'agent-loop-anim', label: 'Agent 执行循环', highlight: true },
160184
{ id: 'turn-internal-anim', label: 'Turn 状态流转', highlight: true },
161185
{ id: 'format-converter-anim', label: '格式转换管道', highlight: true },
162186
{ id: 'chunk-assembly-anim', label: 'Chunk 组装', highlight: true },
@@ -222,7 +246,7 @@ export const navGroups: NavGroup[] = [
222246
{ id: 'upstream-diff', label: '上游改造总览', highlight: true },
223247
{ id: 'config', label: '配置系统' },
224248
{ id: 'auth', label: '认证流程' },
225-
{ id: 'qwen-authentication', label: 'Qwen OAuth 详解', highlight: true },
249+
{ id: 'google-authentication', label: 'Google OAuth 详解', highlight: true },
226250
{ id: 'model-configuration', label: '模型配置机制', highlight: true },
227251
{ id: 'design-tradeoffs', label: '设计权衡分析', highlight: true },
228252
{ id: 'error-recovery-patterns', label: '错误恢复模式', highlight: true },

0 commit comments

Comments
 (0)