feat(web): integrate Claude LLM streaming with markdown rendering

- Add Anthropic SDK with DeepSeek-compatible API config
- Streaming tool-use loop in WebSocket chat handler
- GitHub-style markdown rendering with markdown-it
- Tool status indicators and thinking states in chat UI
- Fix Tailwind content path and CSS border utility

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

web/server/agent/index.ts

@@ -1,4 +1,43 @@
+import Anthropic from '@anthropic-ai/sdk';
 import { tools, ToolDefinition } from './tools';
+import { getDb } from '../db';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const PROJECT_ROOT = path.resolve(__dirname, '..', '..', '..', '..');
+
+function getAnthropicClient(): Anthropic {
+  const configRow = getDb().prepare('SELECT value FROM configs WHERE key = ?').get('api_keys') as { value: string } | undefined;
+  let apiKey = process.env.ANTHROPIC_API_KEY || '';
+  let baseURL: string | undefined;
+
+  if (configRow) {
+    try {
+      const cfg = JSON.parse(configRow.value);
+      if (cfg.ANTHROPIC_AUTH_TOKEN) apiKey = cfg.ANTHROPIC_AUTH_TOKEN;
+      if (cfg.ANTHROPIC_BASE_URL) baseURL = cfg.ANTHROPIC_BASE_URL;
+    } catch {}
+  }
+
+  return new Anthropic({
+    apiKey,
+    baseURL,
+  });
+}
+
+function getModel(): string {
+  const configRow = getDb().prepare('SELECT value FROM configs WHERE key = ?').get('api_keys') as { value: string } | undefined;
+  if (configRow) {
+    try {
+      const cfg = JSON.parse(configRow.value);
+      if (cfg.ANTHROPIC_MODEL) return cfg.ANTHROPIC_MODEL;
+    } catch {}
+  }
+  return process.env.ANTHROPIC_MODEL || 'claude-sonnet-4-6';
+}
 
 export class VideoAgent {
   private tools: ToolDefinition[];
@@ -7,11 +46,11 @@ export class VideoAgent {
     this.tools = tools;
   }
 
-  getToolDefinitions() {
+  getAnthropicTools(): Anthropic.Tool[] {
     return this.tools.map((t) => ({
       name: t.name,
       description: t.description,
-      parameters: t.parameters,
+      input_schema: t.input_schema,
     }));
   }
 
@@ -21,18 +60,60 @@ export class VideoAgent {
     return tool.execute(params);
   }
 
-  getSystemPrompt(accountContext?: string): string {
-    return `你是美图 Agent，帮助用户进行短视频创作。
+  getSystemPrompt(): string {
+    // Dynamically list accounts
+    const accountsDir = path.join(PROJECT_ROOT, 'accounts');
+    let accountList = '暂无账号';
+    if (fs.existsSync(accountsDir)) {
+      const dirs = fs.readdirSync(accountsDir, { withFileTypes: true })
+        .filter((d) => d.isDirectory() && !d.name.startsWith('_') && !d.name.startsWith('.'));
+      if (dirs.length > 0) {
+        accountList = dirs.map((d) => {
+          const configPath = path.join(accountsDir, d.name, 'account.json');
+          if (fs.existsSync(configPath)) {
+            const cfg = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
+            return `- ${d.name}: ${cfg.description || '无描述'} (生图:${cfg.imageModel}, 视频:${cfg.videoModel}, 画幅:${cfg.defaultFormat})`;
+          }
+          return `- ${d.name}`;
+        }).join('\n');
+      }
+    }
 
-可用账号：${accountContext || '暂无'}
+    return `你是美图 Agent，一个专业的短视频创作助手。你可以帮助用户完成从创意到成片的完整流程。
 
-你可以：
-1. 帮用户创建新账号
-2. 查看和管理已有账号
-3. 执行视频创作 pipeline（分镜→生图→生视频→TTS→成片）
-4. 管理提示词模板
+## 当前可用账号
+${accountList}
 
-用户想创作视频时，一步步引导他们完成流程。`;
+## 你的能力
+1. **查看账号** - 使用 list_accounts 列出所有可用账号及其配置
+2. **创建账号** - 使用 create_account 创建新的短视频账号，配置生图/视频模型、画幅等
+3. **查看账号配置** - 使用 get_account_config 获取账号详细配置
+4. **查看 Pipeline 进度** - 使用 pipeline_status 检查创作进度
+5. **执行创作阶段** - 使用 run_pipeline_phase 执行 pipeline 阶段
+
+## 视频创作流程
+1. 确认用户意图（A.幻灯片视频 / B.AI视频）
+2. 选择/创建账号
+3. 规划分镜脚本
+4. 生成图片（images 阶段）
+5. 生成视频片段（videos 阶段，仅 B 模式）
+6. 配音（tts 阶段）
+7. 成片组装（assemble 阶段）
+
+## 行为准则
+- 用中文回复，友好、专业
+- 在用户不清楚时主动询问：成片类型、账号选择、素材来源、画幅等
+- 执行 pipeline 前确认 manifest 路径
+- 如果用户只是闲聊，就闲聊。如果用户想做视频，引导完成流程
+- 不要编造账号或文件路径，使用工具获取真实信息`;
+  }
+
+  getClient(): Anthropic {
+    return getAnthropicClient();
+  }
+
+  getModel(): string {
+    return getModel();
   }
 }