@humanclaw/humanclaw 1.0.1 → 1.1.0

package/dist/index.js

@@ -368,6 +368,246 @@ function dispatchJob(request, db2) {
   return { ...job, tasks };
 }
 
+// src/llm/claude.ts
+var ClaudeProvider = class {
+  apiKey;
+  model;
+  constructor(apiKey, model) {
+    this.apiKey = apiKey;
+    this.model = model || "claude-sonnet-4-20250514";
+  }
+  async complete(request) {
+    const systemMessages = request.messages.filter((m) => m.role === "system");
+    const nonSystemMessages = request.messages.filter((m) => m.role !== "system");
+    const body = {
+      model: this.model,
+      max_tokens: request.max_tokens || 4096,
+      messages: nonSystemMessages.map((m) => ({ role: m.role, content: m.content }))
+    };
+    if (request.temperature !== void 0) {
+      body.temperature = request.temperature;
+    }
+    if (systemMessages.length > 0) {
+      body.system = systemMessages.map((m) => m.content).join("\n\n");
+    }
+    const response = await fetch("https://api.anthropic.com/v1/messages", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": this.apiKey,
+        "anthropic-version": "2023-06-01"
+      },
+      body: JSON.stringify(body)
+    });
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Claude API error (${response.status}): ${errorText}`);
+    }
+    const data = await response.json();
+    const textBlock = data.content.find((c) => c.type === "text");
+    if (!textBlock) {
+      throw new Error("Claude API returned no text content");
+    }
+    return { content: textBlock.text };
+  }
+};
+
+// src/llm/openai.ts
+var OpenAIProvider = class {
+  apiKey;
+  model;
+  constructor(apiKey, model) {
+    this.apiKey = apiKey;
+    this.model = model || "gpt-4o";
+  }
+  async complete(request) {
+    const body = {
+      model: this.model,
+      max_tokens: request.max_tokens || 4096,
+      messages: request.messages.map((m) => ({ role: m.role, content: m.content }))
+    };
+    if (request.temperature !== void 0) {
+      body.temperature = request.temperature;
+    }
+    const response = await fetch("https://api.openai.com/v1/chat/completions", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Authorization": `Bearer ${this.apiKey}`
+      },
+      body: JSON.stringify(body)
+    });
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`OpenAI API error (${response.status}): ${errorText}`);
+    }
+    const data = await response.json();
+    const content = data.choices[0]?.message?.content;
+    if (!content) {
+      throw new Error("OpenAI API returned no content");
+    }
+    return { content };
+  }
+};
+
+// src/llm/index.ts
+function getLlmConfig() {
+  const provider = process.env.HUMANCLAW_LLM_PROVIDER || "claude";
+  const apiKey = process.env.HUMANCLAW_LLM_API_KEY || "";
+  const model = process.env.HUMANCLAW_LLM_MODEL;
+  if (!apiKey) {
+    throw new Error(
+      "\u672A\u914D\u7F6E LLM API Key\u3002\u8BF7\u8BBE\u7F6E\u73AF\u5883\u53D8\u91CF HUMANCLAW_LLM_API_KEY\u3002\n\u4F8B\u5982: export HUMANCLAW_LLM_API_KEY=sk-..."
+    );
+  }
+  if (provider !== "claude" && provider !== "openai") {
+    throw new Error(`\u4E0D\u652F\u6301\u7684 LLM \u63D0\u4F9B\u5546: ${provider}\u3002\u652F\u6301: claude, openai`);
+  }
+  return { provider, apiKey, model };
+}
+function createLlmProvider(config) {
+  const cfg = config || getLlmConfig();
+  switch (cfg.provider) {
+    case "claude":
+      return new ClaudeProvider(cfg.apiKey, cfg.model);
+    case "openai":
+      return new OpenAIProvider(cfg.apiKey, cfg.model);
+  }
+}
+
+// src/services/planner.ts
+function buildSystemPrompt() {
+  return `\u4F60\u662F HumanClaw \u4EFB\u52A1\u7F16\u6392\u89C4\u5212\u5668\u3002\u4F60\u7684\u5DE5\u4F5C\u662F\u5C06\u7528\u6237\u7684\u9700\u6C42\u62C6\u89E3\u4E3A\u53EF\u4EE5\u5206\u53D1\u7ED9\u7269\u7406\u8282\u70B9\uFF08\u771F\u5B9E\u4EBA\u7C7B\uFF09\u6267\u884C\u7684\u72EC\u7ACB\u5B50\u4EFB\u52A1\u3002
+
+\u89C4\u5219\uFF1A
+1. \u5C06\u9700\u6C42\u62C6\u89E3\u4E3A\u6241\u5E73\u7684\u3001\u65E0\u4F9D\u8D56\u7684\u5B50\u4EFB\u52A1\u5217\u8868\uFF08\u6BCF\u4E2A\u4EFB\u52A1\u53EF\u4EE5\u72EC\u7ACB\u6267\u884C\uFF09
+2. \u6839\u636E\u6BCF\u4E2A Agent \u7684\u6280\u80FD\uFF08capabilities\uFF09\u548C\u5F53\u524D\u8D1F\u8F7D\u6765\u5339\u914D\u5206\u914D
+3. \u4E3A\u6BCF\u4E2A\u4EFB\u52A1\u751F\u6210\u4E00\u6BB5\u300C\u8BDD\u672F\u300D\u2014\u2014 \u8FD9\u662F\u76F4\u63A5\u53D1\u7ED9\u8BE5\u4EBA\u7C7B\u6267\u884C\u8005\u7684\u4EFB\u52A1\u8BF4\u660E\uFF0C\u8BED\u6C14\u81EA\u7136\u3001\u6E05\u6670\u3001\u4E13\u4E1A\uFF0C\u5305\u542B\u5177\u4F53\u7684\u4EA4\u4ED8\u7269\u8981\u6C42
+4. \u6839\u636E\u4EFB\u52A1\u590D\u6742\u5EA6\u8BBE\u7F6E\u5408\u7406\u7684\u622A\u6B62\u65F6\u95F4\uFF08\u76F8\u5BF9\u4E8E\u5F53\u524D\u65F6\u95F4\uFF09
+5. \u6BCF\u4E2A Agent \u6700\u591A\u5206\u914D\u4E00\u4E2A\u4EFB\u52A1\uFF08\u9664\u975E\u4EBA\u624B\u4E0D\u591F\uFF09
+
+\u4F60\u5FC5\u987B\u4E25\u683C\u8F93\u51FA\u4EE5\u4E0B JSON \u683C\u5F0F\uFF08\u4E0D\u8981\u8F93\u51FA\u4EFB\u4F55\u5176\u4ED6\u5185\u5BB9\uFF09\uFF1A
+
+\`\`\`json
+[
+  {
+    "assignee_id": "agent\u7684ID",
+    "assignee_name": "agent\u7684\u540D\u5B57",
+    "todo_description": "\u7B80\u77ED\u7684\u4EFB\u52A1\u6807\u9898/\u63CF\u8FF0",
+    "briefing": "\u8BDD\u672F\uFF1A\u8BE6\u7EC6\u7684\u4EFB\u52A1\u8BF4\u660E\uFF0C\u5305\u62EC\u76EE\u6807\u3001\u4EA4\u4ED8\u7269\u8981\u6C42\u3001\u6CE8\u610F\u4E8B\u9879\u3002\u8BED\u6C14\u50CF\u4E00\u4E2A\u9760\u8C31\u7684\u9879\u76EE\u7ECF\u7406\u5728\u7ED9\u7EC4\u5458\u5206\u914D\u4EFB\u52A1\u3002",
+    "deadline": "ISO 8601 \u65F6\u95F4"
+  }
+]
+\`\`\``;
+}
+function buildUserPrompt(prompt, agents) {
+  const now = /* @__PURE__ */ new Date();
+  const agentList = agents.map((a) => {
+    const load = a.active_task_count > 0 ? `\u5F53\u524D\u6709 ${a.active_task_count} \u4E2A\u8FDB\u884C\u4E2D\u7684\u4EFB\u52A1` : "\u5F53\u524D\u7A7A\u95F2";
+    const speed = a.avg_delivery_hours !== null ? `\u5E73\u5747\u4EA4\u4ED8\u65F6\u95F4 ${a.avg_delivery_hours}h` : "\u6682\u65E0\u5386\u53F2\u6570\u636E";
+    return `- ${a.name} (ID: ${a.agent_id})  \u6280\u80FD: [${a.capabilities.join(", ")}]  ${load}  ${speed}`;
+  }).join("\n");
+  return `\u5F53\u524D\u65F6\u95F4: ${now.toISOString()}
+
+\u53EF\u7528\u7684\u7269\u7406\u8282\u70B9\uFF1A
+${agentList}
+
+\u9700\u6C42\uFF1A
+${prompt}
+
+\u8BF7\u6839\u636E\u4EE5\u4E0A\u4FE1\u606F\u62C6\u89E3\u4EFB\u52A1\u5E76\u5206\u914D\u3002\u8F93\u51FA JSON \u6570\u7EC4\u3002`;
+}
+function extractJson(raw) {
+  const codeBlockMatch = raw.match(/```(?:json)?\s*\n?([\s\S]*?)\n?\s*```/);
+  if (codeBlockMatch) {
+    return codeBlockMatch[1].trim();
+  }
+  const arrayMatch = raw.match(/\[[\s\S]*\]/);
+  if (arrayMatch) {
+    return arrayMatch[0];
+  }
+  return raw.trim();
+}
+function validatePlannedTasks(parsed, validAgentIds, agents) {
+  if (!Array.isArray(parsed)) {
+    throw new Error("LLM \u8FD4\u56DE\u7684\u4E0D\u662F\u6709\u6548\u7684\u4EFB\u52A1\u6570\u7EC4");
+  }
+  if (parsed.length === 0) {
+    throw new Error("LLM \u672A\u751F\u6210\u4EFB\u4F55\u4EFB\u52A1");
+  }
+  return parsed.map((item, i) => {
+    if (!item.todo_description || typeof item.todo_description !== "string") {
+      throw new Error(`\u4EFB\u52A1 ${i + 1} \u7F3A\u5C11 todo_description`);
+    }
+    if (!item.briefing || typeof item.briefing !== "string") {
+      throw new Error(`\u4EFB\u52A1 ${i + 1} \u7F3A\u5C11 briefing (\u8BDD\u672F)`);
+    }
+    let assigneeId = String(item.assignee_id || "");
+    let assigneeName = String(item.assignee_name || "");
+    if (!validAgentIds.has(assigneeId)) {
+      const fallback = agents[0];
+      if (fallback) {
+        assigneeId = fallback.agent_id;
+        assigneeName = fallback.name;
+      }
+    }
+    let deadline = String(item.deadline || "");
+    if (!deadline || isNaN(Date.parse(deadline))) {
+      deadline = new Date(Date.now() + 24 * 60 * 60 * 1e3).toISOString();
+    }
+    return {
+      assignee_id: assigneeId,
+      assignee_name: assigneeName,
+      todo_description: String(item.todo_description),
+      briefing: String(item.briefing),
+      deadline
+    };
+  });
+}
+async function planJob(request, provider, db2) {
+  const conn = db2 ?? getDb();
+  const allAgents = listAgentsWithMetrics(conn);
+  let agents;
+  if (request.agent_ids && request.agent_ids.length > 0) {
+    agents = allAgents.filter((a) => request.agent_ids.includes(a.agent_id));
+    if (agents.length === 0) {
+      throw new Error("\u6307\u5B9A\u7684 Agent \u5747\u4E0D\u5B58\u5728");
+    }
+  } else {
+    agents = allAgents.filter((a) => a.status === "IDLE");
+    if (agents.length === 0) {
+      agents = allAgents.filter((a) => a.status !== "OFFLINE" && a.status !== "OOM");
+    }
+    if (agents.length === 0) {
+      throw new Error("\u6CA1\u6709\u53EF\u7528\u7684\u7269\u7406\u8282\u70B9\u3002\u8BF7\u5148\u5728\u78B3\u57FA\u7B97\u529B\u6C60\u4E2D\u6DFB\u52A0\u8282\u70B9\u3002");
+    }
+  }
+  const llm = provider ?? createLlmProvider();
+  const systemPrompt = buildSystemPrompt();
+  const userPrompt = buildUserPrompt(request.prompt, agents);
+  const response = await llm.complete({
+    messages: [
+      { role: "system", content: systemPrompt },
+      { role: "user", content: userPrompt }
+    ],
+    temperature: 0.3,
+    max_tokens: 4096
+  });
+  const jsonStr = extractJson(response.content);
+  let parsed;
+  try {
+    parsed = JSON.parse(jsonStr);
+  } catch {
+    throw new Error("AI \u8FD4\u56DE\u7684\u5185\u5BB9\u65E0\u6CD5\u89E3\u6790\u4E3A JSON\uFF0C\u8BF7\u91CD\u8BD5");
+  }
+  const validIds = new Set(agents.map((a) => a.agent_id));
+  const plannedTasks = validatePlannedTasks(parsed, validIds, agents);
+  return {
+    original_prompt: request.prompt,
+    planned_tasks: plannedTasks
+  };
+}
+
 // src/routes/jobs.ts
 var router2 = Router2();
 router2.post("/create", (req, res) => {
@@ -399,6 +639,21 @@ router2.get("/active", (_req, res) => {
   const jobs = listActiveJobs();
   res.json({ jobs });
 });
+router2.post("/plan", async (req, res) => {
+  const body = req.body;
+  if (!body.prompt || typeof body.prompt !== "string") {
+    res.status(400).json({ error: "prompt is required" });
+    return;
+  }
+  try {
+    const plan = await planJob(body);
+    res.json(plan);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Unknown error";
+    const status = message.includes("API Key") || message.includes("API key") ? 503 : 400;
+    res.status(status).json({ error: message });
+  }
+});
 router2.get("/:job_id", (req, res) => {
   const { job_id } = req.params;
   const job = getJobWithTasks(job_id);
@@ -572,133 +827,254 @@ function getDashboardHtml() {
 <head>
 <meta charset="UTF-8"/>
 <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
-<title>HumanClaw - Async Physical Node Orchestration</title>
+<title>HumanClaw - \u5F02\u6B65\u7269\u7406\u8282\u70B9\u7F16\u6392</title>
 <style>
-:root{--bg:#0a0a0f;--surface:#14141f;--surface-hover:#1a1a2e;--border:#2a2a3e;--text:#e0e0e8;--text-dim:#8888a0;--accent:#00d4ff;--green:#22c55e;--yellow:#eab308;--red:#ef4444;--purple:#a855f7;--font-mono:'JetBrains Mono','Fira Code',monospace;--font-sans:'Inter',-apple-system,sans-serif}
+:root{--bg:#0f1117;--surface:#1a1d27;--surface-hover:#242836;--border:#2e3346;--text:#e2e4ed;--text-dim:#7b8196;--accent:#00d4ff;--accent-dim:rgba(0,212,255,.12);--green:#22c55e;--yellow:#eab308;--red:#ef4444;--purple:#a855f7;--font-mono:'SF Mono','JetBrains Mono','Fira Code',monospace;--font-sans:-apple-system,'Inter','Segoe UI',sans-serif;--radius:10px}
 *{margin:0;padding:0;box-sizing:border-box}
-body{background:var(--bg);color:var(--text);font-family:var(--font-sans);min-height:100vh}
-header{padding:24px 32px 8px;border-bottom:1px solid var(--border)}
-header h1{font-family:var(--font-mono);font-size:24px;color:var(--accent);letter-spacing:2px}
-.subtitle{color:var(--text-dim);font-size:13px;margin-top:4px}
-nav{display:flex;gap:0;border-bottom:1px solid var(--border);padding:0 32px}
-.tab{background:none;border:none;color:var(--text-dim);padding:12px 20px;font-size:14px;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;font-family:var(--font-sans)}
-.tab:hover{color:var(--text)}
+body{background:var(--bg);color:var(--text);font-family:var(--font-sans);min-height:100vh;line-height:1.5}
+header{padding:20px 32px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px}
+header h1{font-family:var(--font-mono);font-size:22px;color:var(--accent);letter-spacing:1.5px}
+.subtitle{color:var(--text-dim);font-size:12px;border-left:1px solid var(--border);padding-left:14px}
+nav{display:flex;border-bottom:1px solid var(--border);padding:0 32px;gap:4px}
+.tab{background:none;border:none;color:var(--text-dim);padding:12px 18px;font-size:13px;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;font-family:var(--font-sans);font-weight:500}
+.tab:hover{color:var(--text);background:var(--surface)}
 .tab.active{color:var(--accent);border-bottom-color:var(--accent)}
-main{padding:24px 32px}
+main{padding:24px 32px;max-width:1200px}
 .panel{display:none}.panel.active{display:block}
-.fleet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
-.agent-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px;transition:border-color .2s}
-.agent-card:hover{border-color:var(--accent)}
-.agent-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
-.status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
-.status-dot.IDLE{background:var(--green);box-shadow:0 0 8px var(--green)}
-.status-dot.BUSY{background:var(--yellow);box-shadow:0 0 8px var(--yellow)}
-.status-dot.OFFLINE{background:var(--red);box-shadow:0 0 8px var(--red)}
-.status-dot.OOM{background:var(--purple);box-shadow:0 0 8px var(--purple)}
-.agent-name{font-weight:600;font-size:16px}
-.agent-id{color:var(--text-dim);font-family:var(--font-mono);font-size:12px}
-.agent-caps{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
-.cap-tag{background:var(--surface-hover);border:1px solid var(--border);border-radius:4px;padding:2px 8px;font-size:12px;color:var(--accent)}
-.agent-metrics{margin-top:12px;font-size:12px;color:var(--text-dim)}
-.job-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px;margin-bottom:16px}
-.job-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
-.job-title{font-weight:600;font-size:15px}
-.job-id{font-family:var(--font-mono);font-size:12px;color:var(--text-dim)}
-.progress-bar{background:var(--surface-hover);border-radius:4px;height:6px;margin:8px 0 16px;overflow:hidden}
-.progress-fill{background:var(--accent);height:100%;border-radius:4px;transition:width .3s ease}
-.progress-label{font-size:12px;color:var(--text-dim);margin-bottom:4px}
-.kanban{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
-.kanban-lane{min-height:60px}
-.lane-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;padding-bottom:4px;border-bottom:2px solid var(--border)}
-.lane-title.dispatched{color:var(--yellow);border-color:var(--yellow)}
-.lane-title.overdue{color:var(--red);border-color:var(--red)}
-.lane-title.resolved{color:var(--green);border-color:var(--green)}
-.task-card{background:var(--surface-hover);border:1px solid var(--border);border-radius:6px;padding:10px 12px;margin-bottom:8px;font-size:13px}
-.task-trace{font-family:var(--font-mono);font-size:11px;color:var(--accent);margin-bottom:4px}
-.task-desc{color:var(--text);margin-bottom:4px}
-.task-meta{font-size:11px;color:var(--text-dim)}
-.terminal-section{max-width:640px}
-.terminal-section h2{font-size:16px;margin-bottom:16px;color:var(--accent);font-family:var(--font-mono)}
-.form-group{margin-bottom:16px}
-.form-group label{display:block;font-size:13px;color:var(--text-dim);margin-bottom:6px}
-.form-group input,.form-group textarea{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:10px 14px;color:var(--text);font-size:14px;font-family:var(--font-mono);outline:none;transition:border-color .2s}
-.form-group input:focus,.form-group textarea:focus{border-color:var(--accent)}
-.form-group textarea{min-height:120px;resize:vertical}
-.btn-group{display:flex;gap:12px;margin-top:20px}
-.btn{padding:10px 24px;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .2s}
-.btn:hover{opacity:.85}
-.btn:disabled{opacity:.5;cursor:not-allowed}
+/* Cards */
+.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:border-color .15s}
+.card:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
+.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:16px}
+/* Agent Card */
+.agent-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
+.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
+.dot.IDLE{background:var(--green);box-shadow:0 0 8px var(--green)}.dot.BUSY{background:var(--yellow);box-shadow:0 0 8px var(--yellow)}.dot.OFFLINE{background:var(--red);box-shadow:0 0 6px var(--red)}.dot.OOM{background:var(--purple);box-shadow:0 0 8px var(--purple)}
+.agent-name{font-weight:600;font-size:15px}
+.agent-id{color:var(--text-dim);font-family:var(--font-mono);font-size:11px;margin-bottom:8px}
+.caps{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
+.cap{background:var(--accent-dim);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:4px;padding:1px 8px;font-size:11px;color:var(--accent)}
+.agent-meta{margin-top:10px;font-size:11px;color:var(--text-dim);display:flex;gap:12px}
+.agent-actions{margin-top:12px;display:flex;gap:6px}
+.agent-actions select{background:var(--surface-hover);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:4px 8px;font-size:11px;cursor:pointer;outline:none}
+.agent-actions button{background:var(--red);color:#fff;border:none;border-radius:6px;padding:4px 10px;font-size:11px;cursor:pointer}
+.agent-actions button:hover{opacity:.8}
+/* Stats Bar */
+.stats{display:flex;gap:12px;flex-wrap:wrap}
+.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 22px;text-align:center;min-width:90px}
+.stat-val{font-size:28px;font-weight:700;font-family:var(--font-mono)}
+.stat-lbl{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-top:2px}
+/* Forms */
+.form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-top:16px;max-width:620px}
+.form-card h3{font-size:15px;color:var(--accent);font-family:var(--font-mono);margin-bottom:16px}
+.fg{margin-bottom:14px}
+.fg label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:5px;font-weight:500}
+.fg input,.fg textarea,.fg select{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text);font-size:13px;font-family:var(--font-sans);outline:none;transition:border-color .15s}
+.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--accent)}
+.fg textarea{min-height:80px;resize:vertical;font-family:var(--font-mono);font-size:12px}
+.fg .hint{font-size:11px;color:var(--text-dim);margin-top:4px}
+.btn{padding:10px 22px;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
+.btn:hover{opacity:.85;transform:translateY(-1px)}
+.btn:active{transform:translateY(0)}
+.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
 .btn-primary{background:var(--accent);color:var(--bg)}
+.btn-green{background:var(--green);color:#fff}
 .btn-danger{background:var(--red);color:#fff}
-.toast{position:fixed;bottom:24px;right:24px;padding:12px 20px;border-radius:8px;font-size:14px;z-index:1000;animation:slide-in .3s ease}
-.toast.success{background:var(--green);color:#fff}
-.toast.error{background:var(--red);color:#fff}
-@keyframes slide-in{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
-.empty{color:var(--text-dim);text-align:center;padding:40px 0;font-size:14px}
-.fleet-summary{display:flex;gap:16px;margin-bottom:20px}
-.summary-item{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px 20px;text-align:center}
-.summary-value{font-size:24px;font-weight:700;font-family:var(--font-mono)}
-.summary-label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-top:2px}
+.btn-ghost{background:transparent;color:var(--accent);border:1px solid var(--border)}
+.btn-ghost:hover{background:var(--accent-dim)}
+.btn-sm{padding:6px 14px;font-size:12px}
+.btn-group{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
+/* Section header */
+.section-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
+.section-hd h2{font-size:16px;font-weight:600}
+/* Job card */
+.job-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-top:14px}
+.job-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
+.job-title{font-weight:600;font-size:14px}
+.job-id{font-family:var(--font-mono);font-size:11px;color:var(--text-dim)}
+.pbar-wrap{margin:6px 0 14px}
+.pbar-label{font-size:11px;color:var(--text-dim);margin-bottom:4px}
+.pbar{background:var(--surface-hover);border-radius:4px;height:6px;overflow:hidden}
+.pbar-fill{background:var(--accent);height:100%;border-radius:4px;transition:width .3s}
+.kanban{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
+.lane{min-height:40px}
+.lane-hd{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;padding-bottom:4px;border-bottom:2px solid var(--border)}
+.lane-hd.y{color:var(--yellow);border-color:var(--yellow)}.lane-hd.r{color:var(--red);border-color:var(--red)}.lane-hd.g{color:var(--green);border-color:var(--green)}
+.tcard{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px 10px;margin-bottom:6px;font-size:12px}
+.tcard-trace{font-family:var(--font-mono);font-size:10px;color:var(--accent);margin-bottom:3px}
+.tcard-meta{font-size:10px;color:var(--text-dim);margin-top:3px}
+/* Toast */
+.toast{position:fixed;bottom:24px;right:24px;padding:12px 20px;border-radius:8px;font-size:13px;z-index:9999;animation:slide-up .25s ease;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.4)}
+.toast.ok{background:var(--green);color:#fff}.toast.err{background:var(--red);color:#fff}
+@keyframes slide-up{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
+/* Empty state */
+.empty-state{text-align:center;padding:48px 20px;color:var(--text-dim)}
+.empty-state .icon{font-size:48px;margin-bottom:12px;opacity:.6}
+.empty-state p{font-size:14px;margin-bottom:16px;max-width:360px;margin-left:auto;margin-right:auto;line-height:1.6}
+/* Modal/Overlay */
+.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding-top:60px;animation:fade-in .15s ease}
+.overlay .form-card{max-width:620px;width:100%;max-height:85vh;overflow-y:auto;margin:0}
+@keyframes fade-in{from{opacity:0}to{opacity:1}}
+/* Agent chips for AI planning */
+.chip-bar{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
+.chip-filter{background:var(--surface-hover);color:var(--text-dim);border:1px solid var(--border);border-radius:14px;padding:3px 12px;font-size:11px;cursor:pointer;transition:all .15s}
+.chip-filter.active{background:var(--accent-dim);color:var(--accent);border-color:var(--accent)}
+.agent-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
+.achip{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:12px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:6px;user-select:none}
+.achip:hover{border-color:var(--text-dim)}
+.achip.selected{border-color:var(--accent);background:var(--accent-dim)}
+.achip .adot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
+.achip .adot.IDLE{background:var(--green)}.achip .adot.BUSY{background:var(--yellow)}.achip .adot.OFFLINE{background:var(--red)}.achip .adot.OOM{background:var(--purple)}
+/* Plan preview cards */
+.plan-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px}
+.plan-card-hd{display:flex;align-items:center;gap:8px;margin-bottom:8px}
+.plan-card-hd .adot{width:8px;height:8px;border-radius:50%}
+.plan-card-agent{font-weight:600;font-size:13px}
+.plan-card-agentid{font-family:var(--font-mono);font-size:10px;color:var(--text-dim)}
+.plan-card-desc{font-size:13px;margin-bottom:10px;font-weight:500}
+.briefing-box{background:var(--surface);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;padding:10px 14px;font-size:12px;line-height:1.6;color:var(--text);margin-bottom:8px;position:relative}
+.briefing-label{font-size:10px;color:var(--accent);font-weight:600;margin-bottom:4px;font-family:var(--font-mono)}
+.briefing-copy{position:absolute;top:8px;right:8px;background:var(--surface-hover);border:1px solid var(--border);color:var(--text-dim);border-radius:4px;padding:2px 8px;font-size:10px;cursor:pointer}
+.briefing-copy:hover{color:var(--accent);border-color:var(--accent)}
+.plan-card-dl{font-size:11px;color:var(--text-dim);font-family:var(--font-mono)}
+/* Spinner */
+.spinner-wrap{text-align:center;padding:40px 20px}
+.spinner{display:inline-block;width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+.spinner-text{color:var(--text-dim);font-size:13px;margin-top:12px}
+/* Manual task row */
+.task-row{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:14px;margin-bottom:10px;position:relative}
+.task-row .remove-task{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--red);cursor:pointer;font-size:16px;line-height:1}
+.task-row .fg{margin-bottom:10px}
+.task-row .fg:last-child{margin-bottom:0}
 </style>
 </head>
 <body>
 <header>
   <h1>HumanClaw</h1>
-  <p class="subtitle">Async Physical Node Orchestration Framework</p>
+  <span class="subtitle">\u5F02\u6B65\u7269\u7406\u8282\u70B9\u7F16\u6392\u6846\u67B6</span>
 </header>
 <nav>
-  <button class="tab active" data-panel="fleet">Carbon Compute Pool</button>
-  <button class="tab" data-panel="pipeline">Task Pipeline</button>
-  <button class="tab" data-panel="terminal">I/O Terminal</button>
+  <button class="tab active" data-panel="fleet">\u78B3\u57FA\u7B97\u529B\u6C60</button>
+  <button class="tab" data-panel="pipeline">\u7F16\u6392\u5927\u76D8</button>
+  <button class="tab" data-panel="terminal">I/O \u7EC8\u7AEF</button>
 </nav>
 <main>
   <section id="fleet" class="panel active"></section>
   <section id="pipeline" class="panel"></section>
   <section id="terminal" class="panel"></section>
 </main>
+
 <script>
 const API='/api/v1';
 function esc(s){const d=document.createElement('div');d.textContent=s;return d.innerHTML}
+function toast(msg,ok){
+  document.querySelectorAll('.toast').forEach(t=>t.remove());
+  const t=document.createElement('div');t.className='toast '+(ok?'ok':'err');t.textContent=msg;document.body.appendChild(t);
+  setTimeout(()=>t.remove(),3500);
+}
+let cachedAgents=[];
+let currentPlan=null;
+let selectedAgentIds=new Set();
 
-// \u2500\u2500\u2500 Fleet \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// FLEET
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
 async function loadFleet(el){
-  el.innerHTML='<div class="empty">Loading...</div>';
+  el.innerHTML='<div class="empty-state"><p>\u52A0\u8F7D\u4E2D...</p></div>';
   try{
     const r=await fetch(API+'/nodes/status');
     const d=await r.json();
-    let h='<div class="fleet-summary">';
-    h+='<div class="summary-item"><div class="summary-value">'+d.total+'</div><div class="summary-label">Total</div></div>';
-    h+='<div class="summary-item"><div class="summary-value" style="color:var(--green)">'+d.idle+'</div><div class="summary-label">Idle</div></div>';
-    h+='<div class="summary-item"><div class="summary-value" style="color:var(--yellow)">'+d.busy+'</div><div class="summary-label">Busy</div></div>';
-    h+='<div class="summary-item"><div class="summary-value" style="color:var(--red)">'+d.offline+'</div><div class="summary-label">Offline</div></div>';
-    h+='<div class="summary-item"><div class="summary-value" style="color:var(--purple)">'+d.oom+'</div><div class="summary-label">OOM</div></div>';
+    cachedAgents=d.agents||[];
+    let h='<div class="section-hd"><h2>\u78B3\u57FA\u7B97\u529B\u6C60</h2><button class="btn btn-primary btn-sm" onclick="showAddAgent()">+ \u6DFB\u52A0\u8282\u70B9</button></div>';
+    h+='<div class="stats">';
+    h+='<div class="stat"><div class="stat-val">'+d.total+'</div><div class="stat-lbl">\u603B\u8BA1</div></div>';
+    h+='<div class="stat"><div class="stat-val" style="color:var(--green)">'+d.idle+'</div><div class="stat-lbl">\u7A7A\u95F2</div></div>';
+    h+='<div class="stat"><div class="stat-val" style="color:var(--yellow)">'+d.busy+'</div><div class="stat-lbl">\u5FD9\u788C</div></div>';
+    h+='<div class="stat"><div class="stat-val" style="color:var(--red)">'+d.offline+'</div><div class="stat-lbl">\u79BB\u7EBF</div></div>';
+    h+='<div class="stat"><div class="stat-val" style="color:var(--purple)">'+d.oom+'</div><div class="stat-lbl">\u5D29\u6E83</div></div>';
     h+='</div>';
-    if(!d.agents.length){el.innerHTML=h+'<div class="empty">No physical nodes registered. Use CLI: humanclaw agent add</div>';return}
-    h+='<div class="fleet-grid">';
+    if(!d.agents.length){
+      h+='<div class="empty-state" style="margin-top:32px"><div class="icon">\u{1F464}</div><p>\u8FD8\u6CA1\u6709\u7269\u7406\u8282\u70B9\u3002\u70B9\u51FB\u4E0A\u65B9\u300C+ \u6DFB\u52A0\u8282\u70B9\u300D\u6CE8\u518C\u4F60\u7684\u7B2C\u4E00\u4E2A\u78B3\u57FA\u7B97\u529B\u5355\u5143\u3002</p></div>';
+      el.innerHTML=h;return;
+    }
+    h+='<div class="grid">';
     for(const a of d.agents){
-      h+='<div class="agent-card"><div class="agent-header"><span class="status-dot '+a.status+'"></span><span class="agent-name">'+esc(a.name)+'</span></div>';
-      h+='<div class="agent-id">'+a.agent_id+'</div><div class="agent-caps">';
-      for(const c of a.capabilities)h+='<span class="cap-tag">'+esc(c)+'</span>';
-      h+='</div><div class="agent-metrics">Active tasks: '+a.active_task_count;
-      if(a.avg_delivery_hours!==null)h+=' | Avg delivery: '+a.avg_delivery_hours+'h';
+      h+='<div class="card"><div class="agent-header"><span class="dot '+a.status+'"></span><span class="agent-name">'+esc(a.name)+'</span></div>';
+      h+='<div class="agent-id">'+a.agent_id+'</div>';
+      h+='<div class="caps">';for(const c of a.capabilities)h+='<span class="cap">'+esc(c)+'</span>';h+='</div>';
+      h+='<div class="agent-meta"><span>\u4EFB\u52A1: '+a.active_task_count+'</span>';
+      if(a.avg_delivery_hours!==null)h+='<span>\u5E73\u5747\u4EA4\u4ED8: '+a.avg_delivery_hours+'h</span>';
+      h+='</div>';
+      h+='<div class="agent-actions">';
+      h+='<select onchange="changeStatus(\\''+a.agent_id+'\\',this.value)">';
+      for(const s of ['IDLE','BUSY','OFFLINE','OOM'])h+='<option'+(s===a.status?' selected':'')+'>'+s+'</option>';
+      h+='</select>';
+      h+='<button onclick="deleteAgent(\\''+a.agent_id+'\\')">\u5220\u9664</button>';
       h+='</div></div>';
     }
     h+='</div>';
     el.innerHTML=h;
-  }catch{el.innerHTML='<div class="empty">Failed to load fleet data</div>'}
+  }catch(e){el.innerHTML='<div class="empty-state"><p>\u52A0\u8F7D\u5931\u8D25: '+e.message+'</p></div>'}
 }
+window.showAddAgent=function(){
+  const ov=document.createElement('div');ov.className='overlay';ov.id='overlay';
+  ov.addEventListener('click',e=>{if(e.target===ov)ov.remove()});
+  ov.innerHTML='<div class="form-card"><h3>+ \u6DFB\u52A0\u7269\u7406\u8282\u70B9</h3>'
+    +'<div class="fg"><label>\u8282\u70B9\u540D\u79F0</label><input id="aa-name" placeholder="\u4F8B: \u524D\u7AEF\u8001\u674E"/></div>'
+    +'<div class="fg"><label>\u6280\u80FD\u6807\u7B7E</label><input id="aa-caps" placeholder="\u4F8B: UI/UX, \u524D\u7AEF\u5F00\u53D1, \u6297\u538B\u80FD\u529B\u5F3A"/><div class="hint">\u591A\u4E2A\u6807\u7B7E\u7528\u9017\u53F7\u5206\u9694</div></div>'
+    +'<div class="btn-group"><button class="btn btn-primary" onclick="submitAgent()">\u6CE8\u518C\u8282\u70B9</button><button class="btn btn-ghost" onclick="document.getElementById(\\'overlay\\').remove()">\u53D6\u6D88</button></div></div>';
+  document.body.appendChild(ov);
+  document.getElementById('aa-name').focus();
+};
+window.submitAgent=async function(){
+  const name=document.getElementById('aa-name').value.trim();
+  const caps=document.getElementById('aa-caps').value.trim();
+  if(!name){toast('\u8BF7\u8F93\u5165\u8282\u70B9\u540D\u79F0',false);return}
+  if(!caps){toast('\u8BF7\u8F93\u5165\u81F3\u5C11\u4E00\u4E2A\u6280\u80FD\u6807\u7B7E',false);return}
+  try{
+    const r=await fetch(API+'/nodes',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name,capabilities:caps.split(',').map(s=>s.trim()).filter(Boolean)})});
+    const d=await r.json();
+    if(!r.ok){toast(d.error||'\u6CE8\u518C\u5931\u8D25',false);return}
+    toast('\u8282\u70B9 '+d.agent_id+' \u6CE8\u518C\u6210\u529F\uFF01',true);
+    document.getElementById('overlay').remove();
+    load('fleet');
+  }catch{toast('\u7F51\u7EDC\u9519\u8BEF',false)}
+};
+window.changeStatus=async function(id,status){
+  try{
+    const r=await fetch(API+'/nodes/'+id+'/status',{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify({status})});
+    if(!r.ok){const d=await r.json();toast(d.error||'\u66F4\u65B0\u5931\u8D25',false);return}
+    toast('\u72B6\u6001\u5DF2\u66F4\u65B0',true);
+  }catch{toast('\u7F51\u7EDC\u9519\u8BEF',false)}
+};
+window.deleteAgent=async function(id){
+  if(!confirm('\u786E\u5B9A\u5220\u9664\u8282\u70B9 '+id+'\uFF1F'))return;
+  try{
+    const r=await fetch(API+'/nodes/'+id,{method:'DELETE'});
+    if(!r.ok){const d=await r.json();toast(d.error||'\u5220\u9664\u5931\u8D25',false);return}
+    toast('\u8282\u70B9\u5DF2\u5220\u9664',true);load('fleet');
+  }catch{toast('\u7F51\u7EDC\u9519\u8BEF',false)}
+};
 
-// \u2500\u2500\u2500 Pipeline \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-function taskCard(t){
-  return '<div class="task-card"><div class="task-trace">'+t.trace_id+'</div><div class="task-desc">'+esc(t.todo_description)+'</div><div class="task-meta">Assignee: '+t.assignee_id+' | Deadline: '+new Date(t.deadline).toLocaleString()+'</div></div>';
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// PIPELINE
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+function tcard(t){
+  return '<div class="tcard"><div class="tcard-trace">'+t.trace_id+'</div><div>'+esc(t.todo_description)+'</div><div class="tcard-meta">'+t.assignee_id+' | '+new Date(t.deadline).toLocaleString()+'</div></div>';
 }
 async function loadPipeline(el){
-  el.innerHTML='<div class="empty">Loading...</div>';
+  el.innerHTML='<div class="empty-state"><p>\u52A0\u8F7D\u4E2D...</p></div>';
   try{
+    try{const ar=await fetch(API+'/nodes/status');const ad=await ar.json();cachedAgents=ad.agents||[]}catch{}
     const r=await fetch(API+'/jobs/active');
     const d=await r.json();
-    if(!d.jobs.length){el.innerHTML='<div class="empty">No active jobs. Create one via the API or CLI.</div>';return}
-    let h='';
+    let h='<div class="section-hd"><h2>\u5F02\u6B65\u7F16\u6392\u5927\u76D8</h2><button class="btn btn-primary btn-sm" onclick="showCreateJob()">+ \u521B\u5EFA\u4EFB\u52A1</button></div>';
+    if(!d.jobs.length){
+      h+='<div class="empty-state" style="margin-top:32px"><div class="icon">\u{1F4CB}</div><p>\u6682\u65E0\u8FDB\u884C\u4E2D\u7684\u4EFB\u52A1\u3002\u70B9\u51FB\u4E0A\u65B9\u300C+ \u521B\u5EFA\u4EFB\u52A1\u300D\uFF0C\u8F93\u5165\u9700\u6C42\u540E AI \u81EA\u52A8\u89C4\u5212\u5206\u53D1\u3002';
+      if(!cachedAgents.length)h+='<br/><br/>\u26A0\uFE0F \u9700\u8981\u5148\u5728\u300C\u78B3\u57FA\u7B97\u529B\u6C60\u300D\u4E2D\u6DFB\u52A0\u7269\u7406\u8282\u70B9\u3002';
+      h+='</p></div>';
+      el.innerHTML=h;return;
+    }
     for(const j of d.jobs){
       const res=j.tasks.filter(t=>t.status==='RESOLVED').length;
       const tot=j.tasks.length;
@@ -706,55 +1082,234 @@ async function loadPipeline(el){
       const dispatched=j.tasks.filter(t=>t.status==='DISPATCHED'||t.status==='PENDING');
       const overdue=j.tasks.filter(t=>t.status==='OVERDUE');
       const done=j.tasks.filter(t=>t.status==='RESOLVED');
-      h+='<div class="job-card"><div class="job-header"><span class="job-title">'+esc(j.original_prompt)+'</span><span class="job-id">'+j.job_id+'</span></div>';
-      h+='<div class="progress-label">'+res+'/'+tot+' completed ('+pct+'%)</div>';
-      h+='<div class="progress-bar"><div class="progress-fill" style="width:'+pct+'%"></div></div>';
-      h+='<div class="kanban"><div class="kanban-lane"><div class="lane-title dispatched">Dispatched ('+dispatched.length+')</div>'+dispatched.map(taskCard).join('')+'</div>';
-      h+='<div class="kanban-lane"><div class="lane-title overdue">Overdue ('+overdue.length+')</div>'+overdue.map(taskCard).join('')+'</div>';
-      h+='<div class="kanban-lane"><div class="lane-title resolved">Resolved ('+done.length+')</div>'+done.map(taskCard).join('')+'</div></div></div>';
+      h+='<div class="job-card"><div class="job-hd"><span class="job-title">'+esc(j.original_prompt)+'</span><span class="job-id">'+j.job_id+'</span></div>';
+      h+='<div class="pbar-wrap"><div class="pbar-label">'+res+'/'+tot+' \u5DF2\u5B8C\u6210 ('+pct+'%)</div><div class="pbar"><div class="pbar-fill" style="width:'+pct+'%"></div></div></div>';
+      if(pct===100)h+='<div style="margin-bottom:12px"><button class="btn btn-green btn-sm" onclick="syncJob(\\''+j.job_id+'\\')">\u805A\u5408\u5E76\u540C\u6B65\u5230 OpenClaw</button></div>';
+      h+='<div class="kanban"><div class="lane"><div class="lane-hd y">\u5DF2\u5206\u53D1 ('+dispatched.length+')</div>'+dispatched.map(tcard).join('')+'</div>';
+      h+='<div class="lane"><div class="lane-hd r">\u5DF2\u8D85\u65F6 ('+overdue.length+')</div>'+overdue.map(tcard).join('')+'</div>';
+      h+='<div class="lane"><div class="lane-hd g">\u5DF2\u4EA4\u4ED8 ('+done.length+')</div>'+done.map(tcard).join('')+'</div></div></div>';
     }
     el.innerHTML=h;
-  }catch{el.innerHTML='<div class="empty">Failed to load pipeline data</div>'}
+  }catch(e){el.innerHTML='<div class="empty-state"><p>\u52A0\u8F7D\u5931\u8D25: '+e.message+'</p></div>'}
 }
 
-// \u2500\u2500\u2500 Terminal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-function showToast(msg,type){
-  const old=document.querySelector('.toast');if(old)old.remove();
-  const t=document.createElement('div');t.className='toast '+type;t.textContent=msg;document.body.appendChild(t);
-  setTimeout(()=>t.remove(),3000);
+// \u2500\u2500\u2500 AI Planning Flow \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+window.showCreateJob=function(){
+  if(!cachedAgents.length){toast('\u8BF7\u5148\u5728\u300C\u78B3\u57FA\u7B97\u529B\u6C60\u300D\u4E2D\u6DFB\u52A0\u81F3\u5C11\u4E00\u4E2A\u7269\u7406\u8282\u70B9',false);return}
+  currentPlan=null;
+  // Pre-select all IDLE agents
+  selectedAgentIds=new Set(cachedAgents.filter(a=>a.status==='IDLE').map(a=>a.agent_id));
+  const ov=document.createElement('div');ov.className='overlay';ov.id='overlay';
+  ov.addEventListener('click',e=>{if(e.target===ov)ov.remove()});
+  renderPlanStep1(ov);
+  document.body.appendChild(ov);
+};
+
+function renderPlanStep1(ov){
+  let chipFilter='all';
+  function renderChips(filter){
+    chipFilter=filter;
+    const filtered=filter==='idle'?cachedAgents.filter(a=>a.status==='IDLE'):cachedAgents;
+    let ch='<div class="chip-bar">';
+    ch+='<span class="chip-filter'+(filter==='all'?' active':'')+'" onclick="window._filterChips(\\'all\\')">\u5168\u90E8</span>';
+    ch+='<span class="chip-filter'+(filter==='idle'?' active':'')+'" onclick="window._filterChips(\\'idle\\')">\u4EC5\u7A7A\u95F2</span>';
+    ch+='</div>';
+    ch+='<div class="agent-chips">';
+    for(const a of filtered){
+      const sel=selectedAgentIds.has(a.agent_id);
+      ch+='<div class="achip'+(sel?' selected':'')+'" onclick="window._toggleChip(\\''+a.agent_id+'\\')">';
+      ch+='<span class="adot '+a.status+'"></span>';
+      ch+=esc(a.name);
+      ch+='</div>';
+    }
+    ch+='</div>';
+    return ch;
+  }
+  window._filterChips=function(f){
+    chipFilter=f;
+    const el=document.getElementById('agent-chip-area');
+    if(el)el.innerHTML=renderChips(f);
+  };
+  window._toggleChip=function(id){
+    if(selectedAgentIds.has(id))selectedAgentIds.delete(id);
+    else selectedAgentIds.add(id);
+    const el=document.getElementById('agent-chip-area');
+    if(el)el.innerHTML=renderChips(chipFilter);
+  };
+
+  ov.innerHTML='<div class="form-card"><h3>AI \u667A\u80FD\u89C4\u5212</h3>'
+    +'<div class="fg"><label>\u8F93\u5165\u4F60\u7684\u9700\u6C42</label><textarea id="plan-prompt" rows="3" placeholder="\u4F8B: \u5B8C\u6210\u9996\u9875\u91CD\u6784\uFF0C\u5305\u62EC\u5BFC\u822A\u680F\u3001\u5185\u5BB9\u533A\u548C\u9875\u811A\u7684\u54CD\u5E94\u5F0F\u6539\u7248" style="font-family:var(--font-sans);font-size:13px"></textarea></div>'
+    +'<div class="fg"><label>\u9009\u62E9\u53C2\u4E0E\u7684\u7269\u7406\u8282\u70B9 <span style="color:var(--text-dim);font-weight:400">(\u9ED8\u8BA4\u9009\u4E2D\u7A7A\u95F2\u8282\u70B9)</span></label>'
+    +'<div id="agent-chip-area">'+renderChips('all')+'</div></div>'
+    +'<div class="fg"><label>OpenClaw \u56DE\u8C03\u5730\u5740 <span style="color:var(--text-dim);font-weight:400">(\u53EF\u9009)</span></label><input id="plan-callback" placeholder="https://..."/></div>'
+    +'<div class="btn-group">'
+    +'<button class="btn btn-primary" onclick="planWithAI()">AI \u89C4\u5212</button>'
+    +'<button class="btn btn-ghost" onclick="showManualCreate()">\u624B\u52A8\u521B\u5EFA</button>'
+    +'<button class="btn btn-ghost" onclick="document.getElementById(\\'overlay\\').remove()">\u53D6\u6D88</button>'
+    +'</div></div>';
+  setTimeout(()=>{const ta=document.getElementById('plan-prompt');if(ta)ta.focus()},50);
+};
+
+window.planWithAI=async function(){
+  const prompt=document.getElementById('plan-prompt').value.trim();
+  const callback=document.getElementById('plan-callback')?.value.trim()||'';
+  if(!prompt){toast('\u8BF7\u8F93\u5165\u9700\u6C42\u63CF\u8FF0',false);return}
+  if(selectedAgentIds.size===0){toast('\u8BF7\u81F3\u5C11\u9009\u62E9\u4E00\u4E2A\u7269\u7406\u8282\u70B9',false);return}
+
+  const ov=document.getElementById('overlay');
+  const fc=ov.querySelector('.form-card');
+  fc.innerHTML='<h3>AI \u667A\u80FD\u89C4\u5212</h3><div class="spinner-wrap"><div class="spinner"></div><div class="spinner-text">AI \u6B63\u5728\u5206\u6790\u9700\u6C42\u3001\u5339\u914D\u8282\u70B9\u3001\u751F\u6210\u8BDD\u672F...</div></div>';
+
+  try{
+    const r=await fetch(API+'/jobs/plan',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({prompt,agent_ids:Array.from(selectedAgentIds)})});
+    const d=await r.json();
+    if(!r.ok){
+      toast(d.error||'\u89C4\u5212\u5931\u8D25',false);
+      renderPlanStep1(ov);
+      return;
+    }
+    currentPlan={...d,openclaw_callback:callback};
+    renderPlanStep2(ov);
+  }catch(e){
+    toast('\u7F51\u7EDC\u9519\u8BEF: '+e.message,false);
+    renderPlanStep1(ov);
+  }
+};
+
+function renderPlanStep2(ov){
+  const p=currentPlan;
+  let h='<h3>\u89C4\u5212\u9884\u89C8</h3>';
+  h+='<div style="font-size:12px;color:var(--text-dim);margin-bottom:14px">\u9700\u6C42: '+esc(p.original_prompt)+'</div>';
+  for(let i=0;i<p.planned_tasks.length;i++){
+    const t=p.planned_tasks[i];
+    const agent=cachedAgents.find(a=>a.agent_id===t.assignee_id);
+    const status=agent?agent.status:'IDLE';
+    h+='<div class="plan-card">';
+    h+='<div class="plan-card-hd"><span class="adot '+status+'"></span><span class="plan-card-agent">'+esc(t.assignee_name)+'</span><span class="plan-card-agentid">'+t.assignee_id+'</span></div>';
+    h+='<div class="plan-card-desc">'+esc(t.todo_description)+'</div>';
+    h+='<div class="briefing-box"><div class="briefing-label">\u8BDD\u672F (\u53EF\u76F4\u63A5\u53D1\u7ED9 TA)</div><button class="briefing-copy" onclick="window._copyBriefing('+i+')">\u590D\u5236</button>'+esc(t.briefing)+'</div>';
+    h+='<div class="plan-card-dl">\u622A\u6B62: '+new Date(t.deadline).toLocaleString()+'</div>';
+    h+='</div>';
+  }
+  h+='<div class="btn-group">';
+  h+='<button class="btn btn-green" onclick="dispatchPlan()">\u786E\u8BA4\u5206\u53D1</button>';
+  h+='<button class="btn btn-ghost" onclick="renderPlanStep1(document.getElementById(\\'overlay\\'))">\u91CD\u65B0\u89C4\u5212</button>';
+  h+='<button class="btn btn-ghost" onclick="document.getElementById(\\'overlay\\').remove()">\u53D6\u6D88</button>';
+  h+='</div>';
+  ov.querySelector('.form-card').innerHTML=h;
 }
+window.renderPlanStep1=renderPlanStep1;
+
+window._copyBriefing=function(i){
+  const text=currentPlan.planned_tasks[i].briefing;
+  navigator.clipboard.writeText(text).then(()=>toast('\u8BDD\u672F\u5DF2\u590D\u5236',true)).catch(()=>toast('\u590D\u5236\u5931\u8D25',false));
+};
+
+window.dispatchPlan=async function(){
+  const p=currentPlan;
+  const tasks=p.planned_tasks.map(t=>({assignee_id:t.assignee_id,todo_description:t.todo_description,deadline:t.deadline}));
+  try{
+    const r=await fetch(API+'/jobs/create',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({original_prompt:p.original_prompt,openclaw_callback:p.openclaw_callback||'',tasks})});
+    const d=await r.json();
+    if(!r.ok){toast(d.error||'\u5206\u53D1\u5931\u8D25',false);return}
+    toast('\u4EFB\u52A1\u5DF2\u5206\u53D1\uFF01Job: '+d.job_id,true);
+    document.getElementById('overlay').remove();
+    load('pipeline');
+  }catch{toast('\u7F51\u7EDC\u9519\u8BEF',false)}
+};
+
+// \u2500\u2500\u2500 Manual creation (fallback) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+window.showManualCreate=function(){
+  const ov=document.getElementById('overlay');
+  const optionsHtml=cachedAgents.map(a=>'<option value="'+a.agent_id+'">'+esc(a.name)+' ('+a.agent_id+')</option>').join('');
+  const tomorrow=new Date(Date.now()+86400000).toISOString().slice(0,16);
+  ov.querySelector('.form-card').innerHTML='<h3>\u624B\u52A8\u521B\u5EFA\u4EFB\u52A1</h3>'
+    +'<div class="fg"><label>\u4EFB\u52A1\u63CF\u8FF0 (\u539F\u59CB\u9700\u6C42)</label><input id="cj-prompt" placeholder="\u4F8B: \u5B8C\u6210\u9996\u9875\u6539\u7248"/></div>'
+    +'<div class="fg"><label>OpenClaw \u56DE\u8C03\u5730\u5740 (\u53EF\u9009)</label><input id="cj-callback" placeholder="https://..."/></div>'
+    +'<div style="margin-bottom:10px;display:flex;justify-content:space-between;align-items:center"><label style="font-size:13px;font-weight:600;color:var(--text)">\u5B50\u4EFB\u52A1\u5217\u8868</label><button class="btn btn-ghost btn-sm" onclick="addTaskRow()">+ \u6DFB\u52A0\u5B50\u4EFB\u52A1</button></div>'
+    +'<div id="task-rows"><div class="task-row"><div class="fg"><label>\u6307\u6D3E\u8282\u70B9</label><select class="tr-agent">'+optionsHtml+'</select></div><div class="fg"><label>\u4EFB\u52A1\u63CF\u8FF0</label><input class="tr-desc" placeholder="\u5177\u4F53\u8981\u505A\u4EC0\u4E48..."/></div><div class="fg"><label>\u622A\u6B62\u65F6\u95F4</label><input class="tr-deadline" type="datetime-local" value="'+tomorrow+'"/></div></div></div>'
+    +'<div class="btn-group"><button class="btn btn-primary" onclick="submitJob()">\u521B\u5EFA\u5E76\u5206\u53D1</button><button class="btn btn-ghost" onclick="renderPlanStep1(document.getElementById(\\'overlay\\'))">\u8FD4\u56DE AI \u89C4\u5212</button><button class="btn btn-ghost" onclick="document.getElementById(\\'overlay\\').remove()">\u53D6\u6D88</button></div>';
+};
+window.addTaskRow=function(){
+  const optionsHtml=cachedAgents.map(a=>'<option value="'+a.agent_id+'">'+esc(a.name)+' ('+a.agent_id+')</option>').join('');
+  const tomorrow=new Date(Date.now()+86400000).toISOString().slice(0,16);
+  const row=document.createElement('div');row.className='task-row';
+  row.innerHTML='<button class="remove-task" onclick="this.parentElement.remove()">&times;</button>'
+    +'<div class="fg"><label>\u6307\u6D3E\u8282\u70B9</label><select class="tr-agent">'+optionsHtml+'</select></div>'
+    +'<div class="fg"><label>\u4EFB\u52A1\u63CF\u8FF0</label><input class="tr-desc" placeholder="\u5177\u4F53\u8981\u505A\u4EC0\u4E48..."/></div>'
+    +'<div class="fg"><label>\u622A\u6B62\u65F6\u95F4</label><input class="tr-deadline" type="datetime-local" value="'+tomorrow+'"/></div>';
+  document.getElementById('task-rows').appendChild(row);
+};
+window.submitJob=async function(){
+  const prompt=document.getElementById('cj-prompt').value.trim();
+  const callback=document.getElementById('cj-callback').value.trim();
+  if(!prompt){toast('\u8BF7\u8F93\u5165\u4EFB\u52A1\u63CF\u8FF0',false);return}
+  const rows=document.querySelectorAll('.task-row');
+  const tasks=[];
+  for(const row of rows){
+    const aid=row.querySelector('.tr-agent').value;
+    const desc=row.querySelector('.tr-desc').value.trim();
+    const dl=row.querySelector('.tr-deadline').value;
+    if(!desc){toast('\u6BCF\u4E2A\u5B50\u4EFB\u52A1\u90FD\u9700\u8981\u586B\u5199\u63CF\u8FF0',false);return}
+    tasks.push({assignee_id:aid,todo_description:desc,deadline:new Date(dl).toISOString()});
+  }
+  if(!tasks.length){toast('\u81F3\u5C11\u6DFB\u52A0\u4E00\u4E2A\u5B50\u4EFB\u52A1',false);return}
+  try{
+    const r=await fetch(API+'/jobs/create',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({original_prompt:prompt,openclaw_callback:callback,tasks})});
+    const d=await r.json();
+    if(!r.ok){toast(d.error||'\u521B\u5EFA\u5931\u8D25',false);return}
+    toast('\u4EFB\u52A1\u5DF2\u521B\u5EFA\u5E76\u5206\u53D1\uFF01Job: '+d.job_id,true);
+    document.getElementById('overlay').remove();
+    load('pipeline');
+  }catch{toast('\u7F51\u7EDC\u9519\u8BEF',false)}
+};
+window.syncJob=async function(jobId){
+  try{
+    const r=await fetch(API+'/jobs/'+jobId+'/sync',{method:'POST'});
+    const d=await r.json();
+    if(!r.ok){toast(d.error||'\u540C\u6B65\u5931\u8D25',false);return}
+    toast('\u805A\u5408\u5B8C\u6210\uFF01'+d.sync.message,true);
+  }catch{toast('\u7F51\u7EDC\u9519\u8BEF',false)}
+};
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// TERMINAL
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
 function loadTerminal(el){
-  el.innerHTML='<div class="terminal-section"><h2>&gt; I/O Resolution Terminal</h2>'
-    +'<div class="form-group"><label for="trace-id">Trace ID</label><input type="text" id="trace-id" placeholder="e.g. TK-9527"/></div>'
-    +'<div class="form-group"><label for="result-text">Delivery Payload (text)</label><textarea id="result-text" placeholder="Paste the worker\\'s deliverable, summary, or code here..."></textarea></div>'
-    +'<div class="btn-group"><button class="btn btn-primary" id="btn-submit">Submit &amp; Resume</button><button class="btn btn-danger" id="btn-reject">Reject &amp; Retry</button></div></div>';
-  document.getElementById('btn-submit').addEventListener('click',async()=>{
-    const tid=document.getElementById('trace-id').value.trim();
-    const txt=document.getElementById('result-text').value.trim();
-    if(!tid){showToast('Trace ID is required','error');return}
-    if(!txt){showToast('Delivery payload is required','error');return}
-    try{
-      const r=await fetch(API+'/tasks/resume',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({trace_id:tid,result_data:{text:txt}})});
-      const d=await r.json();
-      if(!r.ok){showToast(d.error||'Failed','error');return}
-      showToast(d.job_complete?'Task resolved! Job complete.':'Task '+tid+' resolved.','success');
-      document.getElementById('trace-id').value='';document.getElementById('result-text').value='';
-    }catch{showToast('Network error','error')}
-  });
-  document.getElementById('btn-reject').addEventListener('click',async()=>{
-    const tid=document.getElementById('trace-id').value.trim();
-    if(!tid){showToast('Trace ID is required','error');return}
-    try{
-      const r=await fetch(API+'/tasks/reject',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({trace_id:tid})});
-      const d=await r.json();
-      if(!r.ok){showToast(d.error||'Failed','error');return}
-      showToast('Task '+tid+' rejected and deadline extended.','success');
-      document.getElementById('trace-id').value='';document.getElementById('result-text').value='';
-    }catch{showToast('Network error','error')}
-  });
+  el.innerHTML='<div class="section-hd"><h2>I/O \u4EA4\u4ED8\u7EC8\u7AEF</h2></div>'
+    +'<div class="form-card" style="margin-top:12px"><h3>> \u63D0\u4EA4\u7269\u7406\u8282\u70B9\u4EA7\u51FA</h3>'
+    +'<div class="fg"><label>Trace ID (\u8FFD\u8E2A\u7801)</label><input id="t-tid" placeholder="\u4F8B: TK-9527"/></div>'
+    +'<div class="fg"><label>\u4EA4\u4ED8\u8F7D\u8377</label><textarea id="t-payload" placeholder="\u7C98\u8D34\u4EA4\u4ED8\u7269\u5185\u5BB9\u3001\u5DE5\u4F5C\u6C47\u62A5\u6216\u4EE3\u7801..."></textarea></div>'
+    +'<div class="btn-group"><button class="btn btn-primary" onclick="doResume()">\u63D0\u4EA4\u5E76\u6062\u590D (Resume)</button><button class="btn btn-danger" onclick="doReject()">\u6253\u56DE\u91CD\u505A (Reject)</button></div></div>';
 }
+window.doResume=async function(){
+  const tid=document.getElementById('t-tid').value.trim();
+  const payload=document.getElementById('t-payload').value.trim();
+  if(!tid){toast('\u8BF7\u8F93\u5165 Trace ID',false);return}
+  if(!payload){toast('\u8BF7\u8F93\u5165\u4EA4\u4ED8\u8F7D\u8377',false);return}
+  try{
+    const r=await fetch(API+'/tasks/resume',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({trace_id:tid,result_data:{text:payload}})});
+    const d=await r.json();
+    if(!r.ok){toast(d.error||'\u63D0\u4EA4\u5931\u8D25',false);return}
+    toast(d.job_complete?'\u4EFB\u52A1\u5DF2\u4EA4\u4ED8\uFF01Job \u5DF2\u5168\u90E8\u5B8C\u6210\uFF0C\u53EF\u4EE5\u805A\u5408\u540C\u6B65\u3002':'\u4EFB\u52A1 '+tid+' \u5DF2\u4EA4\u4ED8\u3002',true);
+    document.getElementById('t-tid').value='';document.getElementById('t-payload').value='';
+  }catch{toast('\u7F51\u7EDC\u9519\u8BEF',false)}
+};
+window.doReject=async function(){
+  const tid=document.getElementById('t-tid').value.trim();
+  if(!tid){toast('\u8BF7\u8F93\u5165 Trace ID',false);return}
+  try{
+    const r=await fetch(API+'/tasks/reject',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({trace_id:tid})});
+    const d=await r.json();
+    if(!r.ok){toast(d.error||'\u64CD\u4F5C\u5931\u8D25',false);return}
+    toast('\u4EFB\u52A1 '+tid+' \u5DF2\u6253\u56DE\uFF0C\u622A\u6B62\u65F6\u95F4\u5DF2\u5EF6\u957F 24 \u5C0F\u65F6\u3002',true);
+    document.getElementById('t-tid').value='';document.getElementById('t-payload').value='';
+  }catch{toast('\u7F51\u7EDC\u9519\u8BEF',false)}
+};
 
-// \u2500\u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// TABS & INIT
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
 const tabs=document.querySelectorAll('.tab');
 const panels=document.querySelectorAll('.panel');
 function load(id){
@@ -775,7 +1330,7 @@ load('fleet');
 setInterval(()=>{
   const a=document.querySelector('.tab.active');
   if(a&&a.dataset.panel!=='terminal')load(a.dataset.panel);
-},10000);
+},15000);
 </script>
 </body>
 </html>`;
@@ -911,5 +1466,78 @@ program.command("status").description("Show active jobs overview").action(() =>
     console.log();
   }
 });
+program.command("plan").description("AI-powered task planning from natural language").argument("[prompt]", "What you want to get done").option("--agents <ids>", "Comma-separated agent IDs (default: all IDLE)").option("--dispatch", "Automatically dispatch after planning").action(async (promptArg, opts) => {
+  const db2 = getDb();
+  initSchema(db2);
+  p.intro(chalk.bgCyan(" AI \u667A\u80FD\u89C4\u5212 "));
+  let prompt = promptArg;
+  if (!prompt) {
+    const input = await p.text({
+      message: "\u8F93\u5165\u4F60\u7684\u9700\u6C42:",
+      placeholder: "\u4F8B: \u5B8C\u6210\u9996\u9875\u91CD\u6784\uFF0C\u5305\u62EC\u5BFC\u822A\u680F\u548C\u5185\u5BB9\u533A\u7684\u54CD\u5E94\u5F0F\u6539\u7248",
+      validate: (v) => !v ? "\u9700\u6C42\u63CF\u8FF0\u4E0D\u80FD\u4E3A\u7A7A" : void 0
+    });
+    if (p.isCancel(input)) {
+      p.cancel("\u5DF2\u53D6\u6D88");
+      process.exit(0);
+    }
+    prompt = input;
+  }
+  const agentIds = opts?.agents?.split(",").map((s) => s.trim()).filter(Boolean);
+  const spin = p.spinner();
+  spin.start("AI \u6B63\u5728\u5206\u6790\u9700\u6C42\u3001\u5339\u914D\u8282\u70B9\u3001\u751F\u6210\u8BDD\u672F...");
+  try {
+    const plan = await planJob({ prompt, agent_ids: agentIds }, void 0, db2);
+    spin.stop("\u89C4\u5212\u5B8C\u6210\uFF01");
+    console.log(chalk.bold(`
+  \u9700\u6C42: ${chalk.white(plan.original_prompt)}
+`));
+    for (const task of plan.planned_tasks) {
+      console.log(chalk.cyan(`  \u250C\u2500 ${chalk.bold(task.assignee_name)} (${chalk.dim(task.assignee_id)})`));
+      console.log(chalk.cyan("  \u2502") + `  \u4EFB\u52A1: ${task.todo_description}`);
+      console.log(chalk.cyan("  \u2502") + `  \u8BDD\u672F: ${chalk.italic(task.briefing)}`);
+      console.log(chalk.cyan("  \u2502") + `  \u622A\u6B62: ${new Date(task.deadline).toLocaleString()}`);
+      console.log(chalk.cyan("  \u2514\u2500"));
+      console.log();
+    }
+    if (opts?.dispatch) {
+      const tasks = plan.planned_tasks.map((t) => ({
+        assignee_id: t.assignee_id,
+        todo_description: t.todo_description,
+        deadline: t.deadline
+      }));
+      const job = dispatchJob({
+        original_prompt: plan.original_prompt,
+        openclaw_callback: "",
+        tasks
+      }, db2);
+      p.outro(`${chalk.green("\u5DF2\u5206\u53D1\uFF01")} Job: ${chalk.bold(job.job_id)}`);
+    } else {
+      const confirm2 = await p.confirm({
+        message: "\u786E\u8BA4\u5206\u53D1\u8FD9\u4E9B\u4EFB\u52A1\uFF1F"
+      });
+      if (p.isCancel(confirm2) || !confirm2) {
+        p.outro(chalk.dim("\u5DF2\u53D6\u6D88\u5206\u53D1"));
+        process.exit(0);
+      }
+      const tasks = plan.planned_tasks.map((t) => ({
+        assignee_id: t.assignee_id,
+        todo_description: t.todo_description,
+        deadline: t.deadline
+      }));
+      const job = dispatchJob({
+        original_prompt: plan.original_prompt,
+        openclaw_callback: "",
+        tasks
+      }, db2);
+      p.outro(`${chalk.green("\u5DF2\u5206\u53D1\uFF01")} Job: ${chalk.bold(job.job_id)}`);
+    }
+  } catch (error) {
+    spin.stop("\u89C4\u5212\u5931\u8D25");
+    const message = error instanceof Error ? error.message : "Unknown error";
+    p.outro(chalk.red(message));
+    process.exit(1);
+  }
+});
 program.parse();
 //# sourceMappingURL=index.js.map