feat: complete Phase 1-3 architecture optimization

Phase 1 - Security:
- Add AES-GCM encryption for localStorage fallback
- Enforce WSS protocol for non-localhost WebSocket connections
- Add URL sanitization to prevent XSS in markdown links

Phase 2 - Domain Reorganization:
- Create Intelligence Domain with Valtio store and caching
- Add unified intelligence-client for Rust backend integration
- Migrate from legacy agent-memory, heartbeat, reflection modules

Phase 3 - Core Optimization:
- Add virtual scrolling for ChatArea with react-window
- Implement LRU cache with TTL for intelligence operations
- Add message virtualization utilities

Additional:
- Add OpenFang compatibility test suite
- Update E2E test fixtures
- Add audit logging infrastructure
- Update project documentation and plans

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
iven
2026-03-21 22:11:50 +08:00
parent 815c56326b
commit ce562e8bfc
36 changed files with 5241 additions and 201 deletions

View File

@@ -0,0 +1,248 @@
/**
* OpenFang 真实响应数据模板
*
* 用于 E2E 测试的 OpenFang API 响应数据模板。
* 基于 OpenFang Gateway Protocol v3 规范。
*/
export const openFangResponses = {
health: {
status: 'ok',
version: '0.4.0',
uptime: 3600,
},
status: {
status: 'running',
version: '0.4.0',
agents_count: 1,
active_sessions: 2,
},
agents: [
{
id: 'agent-default-001',
name: 'Default Agent',
state: 'Running',
model: 'qwen3.5-plus',
provider: 'bailian',
created_at: '2026-01-01T00:00:00Z',
},
],
agent: {
id: 'agent-default-001',
name: 'Default Agent',
state: 'Running',
model: 'qwen3.5-plus',
provider: 'bailian',
config: {
temperature: 0.7,
max_tokens: 4096,
},
},
models: [
{ id: 'qwen3.5-plus', name: 'Qwen 3.5 Plus', provider: 'bailian' },
{ id: 'qwen3-72b', name: 'Qwen 3 72B', provider: 'bailian' },
{ id: 'deepseek-v3', name: 'DeepSeek V3', provider: 'deepseek' },
],
hands: {
hands: [
{
id: 'hand-browser-001',
name: 'Browser',
description: '浏览器自动化能力包',
status: 'idle',
requirements_met: true,
category: 'productivity',
icon: '🌐',
tool_count: 15,
},
{
id: 'hand-collector-001',
name: 'Collector',
description: '数据收集聚合能力包',
status: 'idle',
requirements_met: true,
category: 'data',
icon: '📊',
tool_count: 8,
},
{
id: 'hand-researcher-001',
name: 'Researcher',
description: '深度研究能力包',
status: 'idle',
requirements_met: true,
category: 'research',
icon: '🔬',
tool_count: 12,
},
],
},
hand: {
id: 'hand-browser-001',
name: 'Browser',
description: '浏览器自动化能力包',
status: 'idle',
requirements_met: true,
category: 'productivity',
icon: '🌐',
provider: 'bailian',
model: 'qwen3.5-plus',
tools: ['navigate', 'click', 'type', 'screenshot', 'extract'],
metrics: ['pages_visited', 'actions_taken', 'time_saved'],
requirements: [
{ description: 'Playwright installed', met: true },
{ description: 'Browser binaries available', met: true },
],
},
handActivation: {
instance_id: 'run-browser-001',
status: 'running',
},
handRuns: {
runs: [
{
runId: 'run-browser-001',
status: 'completed',
started_at: '2026-01-01T10:00:00Z',
completed_at: '2026-01-01T10:05:00Z',
result: { pages_visited: 5, actions_taken: 23 },
},
],
},
workflows: {
workflows: [
{
id: 'wf-001',
name: 'Daily Report',
description: '每日报告生成工作流',
steps: 3,
status: 'idle',
created_at: '2026-01-01T00:00:00Z',
},
],
},
workflow: {
id: 'wf-001',
name: 'Daily Report',
description: '每日报告生成工作流',
steps: [
{ id: 'step-1', name: 'Collect Data', handName: 'Collector', params: {} },
{ id: 'step-2', name: 'Analyze', handName: 'Researcher', params: {} },
{ id: 'step-3', name: 'Generate Report', handName: 'Browser', params: {} },
],
status: 'idle',
},
sessions: {
sessions: [
{
id: 'session-001',
agent_id: 'agent-default-001',
created_at: '2026-01-01T00:00:00Z',
message_count: 10,
},
],
},
config: {
data_dir: '/Users/user/.openfang',
default_model: 'qwen3.5-plus',
log_level: 'info',
},
quickConfig: {
default_model: 'qwen3.5-plus',
default_provider: 'bailian',
temperature: 0.7,
max_tokens: 4096,
},
channels: {
channels: [
{ id: 'ch-001', name: 'Default', provider: 'bailian', model: 'qwen3.5-plus', enabled: true },
],
},
skills: {
skills: [
{ id: 'skill-001', name: 'Code Review', description: '代码审查技能', enabled: true },
{ id: 'skill-002', name: 'Translation', description: '翻译技能', enabled: true },
],
},
triggers: {
triggers: [
{ id: 'trigger-001', name: 'Daily Trigger', type: 'schedule', enabled: true },
],
},
auditLogs: {
logs: [
{
id: 'audit-001',
timestamp: '2026-01-01T10:00:00Z',
action: 'hand.trigger',
actor: 'user',
result: 'success',
details: { hand: 'Browser', runId: 'run-001' },
},
],
},
securityStatus: {
encrypted_storage: true,
audit_logging: true,
device_pairing: 'paired',
last_security_check: '2026-01-01T00:00:00Z',
},
scheduledTasks: {
tasks: [
{ id: 'task-001', name: 'Daily Report', enabled: true, schedule: '0 9 * * *' },
],
},
};
export const streamEvents = {
textDelta: (content: string) => ({ type: 'text_delta', content }),
phaseDone: { type: 'phase', phase: 'done' },
phaseTyping: { type: 'phase', phase: 'typing' },
toolCall: (tool: string, input: unknown) => ({ type: 'tool_call', tool, input }),
toolResult: (tool: string, output: unknown) => ({ type: 'tool_result', tool, output }),
hand: (name: string, status: string, result?: unknown) => ({ type: 'hand', hand_name: name, hand_status: status, hand_result: result }),
error: (code: string, message: string) => ({ type: 'error', code, message }),
connected: { type: 'connected', session_id: 'session-001' },
agentsUpdated: { type: 'agents_updated', agents: ['agent-001'] },
};
export const gatewayFrames = {
request: (id: number, method: string, params: unknown) => ({
type: 'req',
id,
method,
params,
}),
response: (id: number, result: unknown) => ({
type: 'res',
id,
result,
}),
event: (event: unknown) => ({
type: 'event',
event,
}),
pong: (id: number) => ({
type: 'pong',
id,
}),
};

View File

@@ -0,0 +1,243 @@
/**
* OpenFang API 端点兼容性测试
*
* 验证 ZCLAW 前端与 OpenFang 后端的 REST API 兼容性。
*/
import { test, expect, Page } from '@playwright/test';
import { openFangResponses } from '../fixtures/openfang-responses';
const BASE_URL = 'http://localhost:1420';
async function setupMockAPI(page: Page) {
await page.route('**/api/health', async route => {
await route.fulfill({ json: openFangResponses.health });
});
await page.route('**/api/status', async route => {
await route.fulfill({ json: openFangResponses.status });
});
await page.route('**/api/agents', async route => {
if (route.request().method() === 'GET') {
await route.fulfill({ json: openFangResponses.agents });
} else if (route.request().method() === 'POST') {
await route.fulfill({ json: { clone: { id: 'new-agent-001', name: 'New Agent' } } });
}
});
await page.route('**/api/agents/*', async route => {
await route.fulfill({ json: openFangResponses.agent });
});
await page.route('**/api/models', async route => {
await route.fulfill({ json: openFangResponses.models });
});
await page.route('**/api/hands', async route => {
await route.fulfill({ json: openFangResponses.hands });
});
await page.route('**/api/hands/*', async route => {
if (route.request().method() === 'GET') {
await route.fulfill({ json: openFangResponses.hand });
} else if (route.request().url().includes('/activate')) {
await route.fulfill({ json: openFangResponses.handActivation });
}
});
await page.route('**/api/workflows', async route => {
await route.fulfill({ json: openFangResponses.workflows });
});
await page.route('**/api/workflows/*', async route => {
await route.fulfill({ json: openFangResponses.workflow });
});
await page.route('**/api/sessions', async route => {
await route.fulfill({ json: openFangResponses.sessions });
});
await page.route('**/api/config', async route => {
await route.fulfill({ json: openFangResponses.config });
});
await page.route('**/api/channels', async route => {
await route.fulfill({ json: openFangResponses.channels });
});
await page.route('**/api/skills', async route => {
await route.fulfill({ json: openFangResponses.skills });
});
}
test.describe('OpenFang API 端点兼容性测试', () => {
test.describe('API-01: Health 端点', () => {
test('应返回正确的健康状态', async ({ page }) => {
await setupMockAPI(page);
const response = await page.evaluate(async () => {
const res = await fetch('/api/health');
return res.json();
});
expect(response.status).toBe('ok');
expect(response.version).toBeDefined();
});
});
test.describe('API-02: Agents 端点', () => {
test('应返回 Agent 列表', async ({ page }) => {
await setupMockAPI(page);
const response = await page.evaluate(async () => {
const res = await fetch('/api/agents');
return res.json();
});
expect(Array.isArray(response)).toBe(true);
expect(response[0]).toHaveProperty('id');
expect(response[0]).toHaveProperty('name');
expect(response[0]).toHaveProperty('state');
});
});
test.describe('API-03: Create Agent 端点', () => {
test('应创建新 Agent', async ({ page }) => {
await setupMockAPI(page);
const response = await page.evaluate(async () => {
const res = await fetch('/api/agents', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'Test Agent', model: 'qwen3.5-plus' }),
});
return res.json();
});
expect(response.clone).toHaveProperty('id');
expect(response.clone).toHaveProperty('name');
});
});
test.describe('API-04: Hands 端点', () => {
test('应返回 Hands 列表', async ({ page }) => {
await setupMockAPI(page);
const response = await page.evaluate(async () => {
const res = await fetch('/api/hands');
return res.json();
});
expect(response).toHaveProperty('hands');
expect(Array.isArray(response.hands)).toBe(true);
});
});
test.describe('API-05: Hand Activation 端点', () => {
test('应激活 Hand 并返回 instance_id', async ({ page }) => {
await setupMockAPI(page);
const response = await page.evaluate(async () => {
const res = await fetch('/api/hands/Browser/activate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({}),
});
return res.json();
});
expect(response).toHaveProperty('instance_id');
expect(response).toHaveProperty('status');
});
});
test.describe('API-06: Workflows 端点', () => {
test('应返回工作流列表', async ({ page }) => {
await setupMockAPI(page);
const response = await page.evaluate(async () => {
const res = await fetch('/api/workflows');
return res.json();
});
expect(response).toHaveProperty('workflows');
expect(Array.isArray(response.workflows)).toBe(true);
});
});
test.describe('API-07: Sessions 端点', () => {
test('应返回会话列表', async ({ page }) => {
await setupMockAPI(page);
const response = await page.evaluate(async () => {
const res = await fetch('/api/sessions');
return res.json();
});
expect(response).toHaveProperty('sessions');
expect(Array.isArray(response.sessions)).toBe(true);
});
});
test.describe('API-08: Models 端点', () => {
test('应返回模型列表', async ({ page }) => {
await setupMockAPI(page);
const response = await page.evaluate(async () => {
const res = await fetch('/api/models');
return res.json();
});
expect(Array.isArray(response)).toBe(true);
expect(response[0]).toHaveProperty('id');
expect(response[0]).toHaveProperty('name');
expect(response[0]).toHaveProperty('provider');
});
});
test.describe('API-09: Config 端点', () => {
test('应返回配置信息', async ({ page }) => {
await setupMockAPI(page);
const response = await page.evaluate(async () => {
const res = await fetch('/api/config');
return res.json();
});
expect(response).toHaveProperty('data_dir');
expect(response).toHaveProperty('default_model');
});
});
test.describe('API-10: Channels 端点', () => {
test('应返回通道列表', async ({ page }) => {
await setupMockAPI(page);
const response = await page.evaluate(async () => {
const res = await fetch('/api/channels');
return res.json();
});
expect(response).toHaveProperty('channels');
expect(Array.isArray(response.channels)).toBe(true);
});
});
test.describe('API-11: Skills 端点', () => {
test('应返回技能列表', async ({ page }) => {
await setupMockAPI(page);
const response = await page.evaluate(async () => {
const res = await fetch('/api/skills');
return res.json();
});
expect(response).toHaveProperty('skills');
expect(Array.isArray(response.skills)).toBe(true);
});
});
test.describe('API-12: Error Handling', () => {
test('应正确处理 404 错误', async ({ page }) => {
await page.route('**/api/nonexistent', async route => {
await route.fulfill({ status: 404, json: { error: 'Not found' } });
});
const response = await page.evaluate(async () => {
const res = await fetch('/api/nonexistent');
return { status: res.status, body: await res.json() };
});
expect(response.status).toBe(404);
});
test('应正确处理 500 错误', async ({ page }) => {
await page.route('**/api/error', async route => {
await route.fulfill({ status: 500, json: { error: 'Internal server error' } });
});
const response = await page.evaluate(async () => {
const res = await fetch('/api/error');
return { status: res.status, body: await res.json() };
});
expect(response.status).toBe(500);
});
});
});

View File

@@ -0,0 +1,109 @@
/**
* OpenFang 协议兼容性测试
*
* 验证 ZCLAW 前端与 OpenFang 后端的协议兼容性。
*/
import { test, expect } from '@playwright/test';
import { openFangResponses, streamEvents, gatewayFrames } from '../fixtures/openfang-responses';
const BASE_URL = 'http://localhost:1420';
test.describe('OpenFang 协议兼容性测试', () => {
test.describe('PROTO-01: 流事件类型解析', () => {
test('应正确解析 text_delta 事件', () => {
const event = streamEvents.textDelta('Hello World');
expect(event.type).toBe('text_delta');
expect(event.content).toBe('Hello World');
});
test('应正确解析 phase 事件', () => {
const doneEvent = streamEvents.phaseDone;
expect(doneEvent.type).toBe('phase');
expect(doneEvent.phase).toBe('done');
});
test('应正确解析 tool_call 和 tool_result 事件', () => {
const toolCall = streamEvents.toolCall('search', { query: 'test' });
expect(toolCall.type).toBe('tool_call');
expect(toolCall.tool).toBe('search');
const toolResult = streamEvents.toolResult('search', { results: [] });
expect(toolResult.type).toBe('tool_result');
});
test('应正确解析 hand 事件', () => {
const handEvent = streamEvents.hand('Browser', 'completed', { pages: 5 });
expect(handEvent.type).toBe('hand');
expect(handEvent.hand_name).toBe('Browser');
expect(handEvent.hand_status).toBe('completed');
});
test('应正确解析 error 事件', () => {
const errorEvent = streamEvents.error('TIMEOUT', 'Request timed out');
expect(errorEvent.type).toBe('error');
expect(errorEvent.code).toBe('TIMEOUT');
});
});
test.describe('PROTO-02: Gateway 帧格式兼容', () => {
test('应正确构造请求帧', () => {
const frame = gatewayFrames.request(1, 'chat', { message: 'Hello' });
expect(frame.type).toBe('req');
expect(frame.id).toBe(1);
expect(frame.method).toBe('chat');
});
test('应正确构造响应帧', () => {
const frame = gatewayFrames.response(1, { status: 'ok' });
expect(frame.type).toBe('res');
expect(frame.id).toBe(1);
});
test('应正确构造事件帧', () => {
const frame = gatewayFrames.event({ type: 'text_delta', content: 'test' });
expect(frame.type).toBe('event');
});
test('应正确构造 pong 帧', () => {
const frame = gatewayFrames.pong(1);
expect(frame.type).toBe('pong');
expect(frame.id).toBe(1);
});
});
test.describe('PROTO-03: 连接状态管理', () => {
const validStates = ['disconnected', 'connecting', 'handshaking', 'connected', 'reconnecting'];
test('连接状态应为有效值', () => {
validStates.forEach(state => {
expect(['disconnected', 'connecting', 'handshaking', 'connected', 'reconnecting']).toContain(state);
});
});
});
test.describe('PROTO-04: 心跳机制', () => {
test('心跳帧格式正确', () => {
const pingFrame = { type: 'ping' };
expect(pingFrame.type).toBe('ping');
});
test('pong 响应格式正确', () => {
const pongFrame = gatewayFrames.pong(1);
expect(pongFrame.type).toBe('pong');
});
});
test.describe('PROTO-05: 设备认证流程', () => {
test('设备认证响应格式', () => {
const authResponse = {
status: 'authenticated',
device_id: 'device-001',
token: 'jwt-token-here',
};
expect(authResponse.status).toBe('authenticated');
expect(authResponse.device_id).toBeDefined();
});
});
});