{/* Header */}

选择任务模板

{/* Category Tabs */}

{TEMPLATE_CATEGORIES.map(cat => ( ))}

{/* Template Grid */}

{filteredTemplates.map(template => ( ))}

{/* Selected Template Params */} {selectedTemplate && (

{selectedTemplate.icon} {selectedTemplate.name}

{selectedTemplate.description}

{selectedTemplate.params.map(param => ( handleParamChange(param.key, value)} /> ))}

)}

{/* Footer */}

); } // Param Input Component function ParamInput({ param, value, error, onChange, }: { param: TaskTemplateParam; value: unknown; error?: string; onChange: (value: unknown) => void; }) { const inputClass = `w-full px-3 py-2 border rounded-lg text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white ${ error ? 'border-red-500' : 'border-gray-200 dark:border-gray-600' }`; return (

{param.label} {param.required && *} {param.type === 'select' ? ( ) : param.type === 'textarea' || param.type === 'json' ? (

onChange(e.target.value)}
          placeholder={param.placeholder}
          rows={3}
          className={inputClass}
        />
      ) : (
        <input
          type={param.type === 'url' ? 'url' : param.type === 'number' ? 'number' : 'text'}
          value={(value as string) ?? ''}
          onChange={(e) => onChange(e.target.value)}
          placeholder={param.placeholder}
          className={inputClass}
        />
      )}

{param.description && !error && (
        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{param.description}</p>
      )}
      {error && (
        <p className="text-xs text-red-500 mt-1 flex items-center gap-1">
          <AlertCircle className="w-3 h-3" />
          {error}
        </p>
      )}
    </div>
  );
}
```

- [ ] **Step 2: Commit**

```bash
git add desktop/src/components/BrowserHand/TaskTemplateModal.tsx
git commit -m "feat(browser-hand): add TaskTemplateModal component"
```

---

### Task 2.4: BrowserHandCard 主组件

**Files:**
- Create: `desktop/src/components/BrowserHand/BrowserHandCard.tsx`

- [ ] **Step 1: 创建 BrowserHandCard 组件**

```typescript
// desktop/src/components/BrowserHand/BrowserHandCard.tsx

import { useState, useEffect } from 'react';
import { Globe, Play, Camera, RefreshCw, Settings, Loader2, AlertTriangle, X } from 'lucide-react';
import { useBrowserHandStore } from '../../store/browserHandStore';
import { ScreenshotPreview } from './ScreenshotPreview';
import type { Hand } from '../../store/handStore';

interface BrowserHandCardProps {
  hand: Hand;
  onOpenSettings?: () => void;
}

export function BrowserHandCard({ hand, onOpenSettings }: BrowserHandCardProps) {
  const {
    execution,
    logs,
    error,
    openTemplateModal,
    clearError,
    stopExecution,
  } = useBrowserHandStore();

const [showLogs, setShowLogs] = useState(false);

const isRunning = execution.isRunning;
  const hasError = !!error;

return (
    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
      {/* Header */}
      <div className="flex items-start justify-between gap-3 p-4 border-b border-gray-100 dark:border-gray-700">
        <div className="flex items-center gap-2 min-w-0">
          <span className="text-xl flex-shrink-0">🌐</span>
          <div className="min-w-0">
            <h3 className="font-medium text-gray-900 dark:text-white truncate">Browser Hand</h3>
            <p className="text-xs text-gray-500 dark:text-gray-400">浏览器自动化能力</p>
          </div>
        </div>
        <StatusBadge isRunning={isRunning} hasError={hasError} />
      </div>

{/* Screenshot Preview */}
      <div className="p-4 border-b border-gray-100 dark:border-gray-700">
        <ScreenshotPreview
          base64={execution.lastScreenshot}
          isLoading={isRunning && !execution.lastScreenshot}
        />
      </div>

{/* Status Info */}
      {(isRunning || execution.currentUrl) && (
        <div className="px-4 py-2 bg-gray-50 dark:bg-gray-900 text-xs space-y-1">
          {execution.currentUrl && (
            <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
              <Globe className="w-3 h-3 flex-shrink-0" />
              <span className="truncate">{execution.currentUrl}</span>
            </div>
          )}
          {isRunning && (
            <div className="flex items-center gap-2">
              <span className="text-gray-600 dark:text-gray-400">{execution.currentAction}</span>
              <div className="flex-1 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                <div
                  className="h-full bg-blue-500 transition-all duration-300"
                  style={{ width: `${execution.progress}%` }}
                />
              </div>
              <span className="text-gray-500 dark:text-gray-500 w-8 text-right">{execution.progress}%</span>
            </div>
          )}
        </div>
      )}

{/* Error Display */}
      {hasError && (
        <div className="px-4 py-2 bg-red-50 dark:bg-red-900/20 border-b border-red-100 dark:border-red-900/30">
          <div className="flex items-start gap-2">
            <AlertTriangle className="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5" />
            <p className="text-xs text-red-600 dark:text-red-400 flex-1">{error}</p>
            <button onClick={clearError} className="text-red-400 hover:text-red-600">
              <X className="w-3 h-3" />
            </button>
          </div>
        </div>
      )}

{/* Actions */}
      <div className="flex items-center gap-2 p-4">
        {isRunning ? (
          <button
            onClick={stopExecution}
            className="flex-1 px-3 py-2 text-sm bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 rounded-lg hover:bg-red-200 dark:hover:bg-red-900/50 flex items-center justify-center gap-2"
          >
            <X className="w-4 h-4" />
            停止任务
          </button>
        ) : (
          <>
            <button
              onClick={openTemplateModal}
              className="flex-1 px-3 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center gap-2"
            >
              <Play className="w-4 h-4" />
              执行任务
            </button>
            <button
              onClick={() => setShowLogs(!showLogs)}
              className="px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
              title="查看日志"
            >
              📋
            </button>
            {onOpenSettings && (
              <button
                onClick={onOpenSettings}
                className="px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
                title="设置"
              >
                <Settings className="w-4 h-4" />
              </button>
            )}
          </>
        )}
      </div>

{/* Logs Panel */}
      {showLogs && (
        <div className="border-t border-gray-200 dark:border-gray-700 max-h-48 overflow-y-auto">
          <div className="p-2 text-xs font-medium text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-900">
            操作日志 ({logs.length})
          </div>
          <div className="p-2 space-y-1 text-xs font-mono">
            {logs.length === 0 ? (
              <p className="text-gray-400 dark:text-gray-500">暂无日志</p>
            ) : (
              logs.map(log => (
                <LogEntry key={log.id} log={log} />
              ))
            )}
          </div>
        </div>
      )}
    </div>
  );
}

// Status Badge
function StatusBadge({ isRunning, hasError }: { isRunning: boolean; hasError: boolean }) {
  if (hasError) {
    return (
      <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400">
        <span className="w-1.5 h-1.5 rounded-full bg-red-500" />
        错误
      </span>
    );
  }
  if (isRunning) {
    return (
      <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
        <Loader2 className="w-3 h-3 animate-spin" />
        运行中
      </span>
    );
  }
  return (
    <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
      <span className="w-1.5 h-1.5 rounded-full bg-green-500" />
      就绪
    </span>
  );
}

// Log Entry
function LogEntry({ log }: { log: { level: string; timestamp: string; message: string } }) {
  const levelColors: Record<string, string> = {
    info: 'text-blue-600 dark:text-blue-400',
    warn: 'text-yellow-600 dark:text-yellow-400',
    error: 'text-red-600 dark:text-red-400',
    action: 'text-green-600 dark:text-green-400',
  };

const time = new Date(log.timestamp).toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  });

return (
    <div className="flex items-start gap-2">
      <span className="text-gray-400 dark:text-gray-500 flex-shrink-0">{time}</span>
      <span className={levelColors[log.level] || 'text-gray-600 dark:text-gray-400'}>[{log.level}]</span>
      <span className="text-gray-700 dark:text-gray-300">{log.message}</span>
    </div>
  );
}
```

- [ ] **Step 2: Commit**

```bash
git add desktop/src/components/BrowserHand/BrowserHandCard.tsx
git commit -m "feat(browser-hand): add BrowserHandCard main component"
```

---

## Chunk 3: 集成

### Task 3.1: 集成到 HandsPanel

**Files:**
- Modify: `desktop/src/components/HandsPanel.tsx`

- [ ] **Step 1: 修改 HandsPanel 导入 BrowserHandCard**

在文件顶部添加导入：

```typescript
import { BrowserHandCard, TaskTemplateModal } from './BrowserHand';
```

- [ ] **Step 2: 修改 HandsPanel 检测 Browser Hand**

在 `HandsPanel` 组件内添加检测函数：

```typescript
// 在 HandsPanel 组件内
const isBrowserHand = (hand: Hand) =>
  hand.id === 'browser' ||
  hand.name?.toLowerCase().includes('browser') ||
  hand.name === 'Browser Hand';
```

- [ ] **Step 3: 修改渲染逻辑**

找到渲染 HandCard 的位置，修改为条件渲染：

```typescript
// 找到 <div className="grid gap-3"> 部分
<div className="grid gap-3">
  {hands.map((hand) =>
    isBrowserHand(hand) ? (
      <BrowserHandCard key={hand.id} hand={hand} />
    ) : (
      <HandCard
        key={hand.id}
        hand={hand}
        onDetails={handleDetails}
        onActivate={handleActivate}
        isActivating={activatingHandId === hand.id}
      />
    )
  )}
</div>
```

- [ ] **Step 4: 添加 TaskTemplateModal**

在组件末尾（HandDetailsModal 之后）添加：

```typescript
// 在 return 的最后
<TaskTemplateModal
  isOpen={useBrowserHandStore.getState().isTemplateModalOpen}
  onClose={() => useBrowserHandStore.getState().closeTemplateModal()}
/>
```

- [ ] **Step 5: 添加 store 导入**

```typescript
import { useBrowserHandStore } from '../store/browserHandStore';
```

- [ ] **Step 6: Commit**

```bash
git add desktop/src/components/HandsPanel.tsx
git commit -m "feat(browser-hand): integrate BrowserHandCard into HandsPanel"
```

---

### Task 3.2: Store 注册

**Files:**
- Modify: `desktop/src/store/index.ts`

- [ ] **Step 1: 导出 browserHandStore**

```typescript
export { useBrowserHandStore } from './browserHandStore';
```

- [ ] **Step 2: Commit**

```bash
git add desktop/src/store/index.ts
git commit -m "feat(browser-hand): export browserHandStore from index"
```

---

## Chunk 4: 测试

### Task 4.1: Store 单元测试

**Files:**
- Create: `tests/desktop/browserHandStore.test.ts`

- [ ] **Step 1: 创建测试文件**

```typescript
// tests/desktop/browserHandStore.test.ts

import { describe, it, expect, beforeEach, vi } from 'vitest';

// Mock browser-client
vi.mock('../../desktop/src/lib/browser-client', () => ({
  default: class MockBrowser {
    start = vi.fn().mockResolvedValue(undefined);
    close = vi.fn().mockResolvedValue(undefined);
    goto = vi.fn().mockResolvedValue(undefined);
    screenshot = vi.fn().mockResolvedValue({ base64: 'mock-base64' });
    url = vi.fn().mockResolvedValue('https://example.com');
    type = vi.fn().mockResolvedValue(undefined);
    click = vi.fn().mockResolvedValue(undefined);
    wait = vi.fn().mockResolvedValue(undefined);
    $$ = vi.fn().mockResolvedValue([]);
    source = vi.fn().mockResolvedValue('<html></html>');
  },
  createSession: vi.fn().mockResolvedValue({ session_id: 'test-session' }),
  closeSession: vi.fn().mockResolvedValue(undefined),
  listSessions: vi.fn().mockResolvedValue([]),
  navigate: vi.fn().mockResolvedValue({ url: null, title: null }),
  screenshot: vi.fn().mockResolvedValue({ base64: 'test', format: 'png' }),
}));

describe('browserHandStore', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

it('should have initial state', async () => {
    const { useBrowserHandStore } = await import('../../desktop/src/store/browserHandStore');
    const state = useBrowserHandStore.getState();

expect(state.execution.isRunning).toBe(false);
    expect(state.logs).toEqual([]);
    expect(state.templates.length).toBeGreaterThan(0);
    expect(state.isTemplateModalOpen).toBe(false);
    expect(state.error).toBeNull();
  });

it('should open and close template modal', async () => {
    const { useBrowserHandStore } = await import('../../desktop/src/store/browserHandStore');
    const store = useBrowserHandStore.getState();

store.openTemplateModal();
    expect(useBrowserHandStore.getState().isTemplateModalOpen).toBe(true);

store.closeTemplateModal();
    expect(useBrowserHandStore.getState().isTemplateModalOpen).toBe(false);
  });

it('should add logs', async () => {
    const { useBrowserHandStore } = await import('../../desktop/src/store/browserHandStore');
    const store = useBrowserHandStore.getState();

store.addLog({ level: 'info', message: 'Test log' });
    const logs = useBrowserHandStore.getState().logs;

expect(logs.length).toBe(1);
    expect(logs[0].message).toBe('Test log');
    expect(logs[0].level).toBe('info');
  });

it('should clear logs', async () => {
    const { useBrowserHandStore } = await import('../../desktop/src/store/browserHandStore');
    const store = useBrowserHandStore.getState();

store.addLog({ level: 'info', message: 'Test' });
    store.clearLogs();

expect(useBrowserHandStore.getState().logs).toEqual([]);
  });

it('should update execution state', async () => {
    const { useBrowserHandStore } = await import('../../desktop/src/store/browserHandStore');
    const store = useBrowserHandStore.getState();

store.updateExecutionState({ currentAction: 'Testing', progress: 50 });
    const execution = useBrowserHandStore.getState().execution;

expect(execution.currentAction).toBe('Testing');
    expect(execution.progress).toBe(50);
  });

it('should get template by id', async () => {
    const { useBrowserHandStore } = await import('../../desktop/src/store/browserHandStore');
    const store = useBrowserHandStore.getState();

const template = store.getTemplate('basic_navigate_screenshot');
    expect(template).toBeDefined();
    expect(template?.name).toBe('打开网页并截图');
  });

it('should return undefined for unknown template', async () => {
    const { useBrowserHandStore } = await import('../../desktop/src/store/browserHandStore');
    const store = useBrowserHandStore.getState();

const template = store.getTemplate('unknown_template');
    expect(template).toBeUndefined();
  });
});
```

- [ ] **Step 2: Run tests**

```bash
cd desktop && pnpm vitest run tests/desktop/browserHandStore.test.ts
```

Expected: All tests pass

- [ ] **Step 3: Commit**

```bash
git add tests/desktop/browserHandStore.test.ts
git commit -m "test(browser-hand): add browserHandStore unit tests"
```

---

### Task 4.2: 最终验证

- [ ] **Step 1: TypeScript 检查**

```bash
cd desktop && pnpm tsc --noEmit
```

- [ ] **Step 2: 运行所有测试**

```bash
cd desktop && pnpm vitest run
```

- [ ] **Step 3: 构建检查**

```bash
cd desktop/src-tauri && cargo check
```

- [ ] **Step 4: Final commit**

```bash
git add -A
git commit -m "feat(browser-hand): complete Browser Hand UI integration

- Add browserHandStore for state management
- Add 9 task templates (basic, scraping, automation)
- Add BrowserHandCard with screenshot preview
- Add TaskTemplateModal for task selection
- Integrate into HandsPanel
- Add unit tests

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

---

## 完成检查清单

- [ ] 所有文件已创建
- [ ] TypeScript 编译通过
- [ ] 测试通过
- [ ] 集成到 HandsPanel
- [ ] 可以打开模板选择器
- [ ] 可以执行基础任务模板