@humanclaw/humanclaw 1.0.2 → 1.1.1

package/dist/index.js

@@ -67,6 +67,11 @@ function initSchema(db2) {
     CREATE INDEX IF NOT EXISTS idx_tasks_job_id ON tasks(job_id);
     CREATE INDEX IF NOT EXISTS idx_tasks_assignee_id ON tasks(assignee_id);
     CREATE INDEX IF NOT EXISTS idx_tasks_status ON tasks(status);
+
+    CREATE TABLE IF NOT EXISTS config (
+      key   TEXT PRIMARY KEY,
+      value TEXT NOT NULL
+    );
   `);
 }
 
@@ -368,6 +373,264 @@ 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/models/config.ts
+function getConfig(key, db2) {
+  const conn = db2 ?? getDb();
+  const row = conn.prepare("SELECT value FROM config WHERE key = ?").get(key);
+  return row?.value;
+}
+function setConfig(key, value, db2) {
+  const conn = db2 ?? getDb();
+  conn.prepare("INSERT OR REPLACE INTO config (key, value) VALUES (?, ?)").run(key, value);
+}
+function deleteConfig(key, db2) {
+  const conn = db2 ?? getDb();
+  conn.prepare("DELETE FROM config WHERE key = ?").run(key);
+}
+
+// src/llm/index.ts
+function getLlmConfig() {
+  const dbProvider = getConfig("llm_provider");
+  const dbApiKey = getConfig("llm_api_key");
+  const dbModel = getConfig("llm_model");
+  const provider = dbProvider || process.env.HUMANCLAW_LLM_PROVIDER || "claude";
+  const apiKey = dbApiKey || process.env.HUMANCLAW_LLM_API_KEY || "";
+  const model = dbModel || process.env.HUMANCLAW_LLM_MODEL;
+  if (!apiKey) {
+    throw new Error(
+      "\u672A\u914D\u7F6E LLM API Key\u3002\u8BF7\u5728 Dashboard \u8BBE\u7F6E\u4E2D\u914D\u7F6E\uFF0C\u6216\u8BBE\u7F6E\u73AF\u5883\u53D8\u91CF HUMANCLAW_LLM_API_KEY\u3002"
+    );
+  }
+  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: model || void 0 };
+}
+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 +662,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);
@@ -565,6 +843,49 @@ router4.post("/:job_id/sync", async (req, res) => {
 });
 var sync_default = router4;
 
+// src/routes/config.ts
+import { Router as Router5 } from "express";
+var router5 = Router5();
+router5.get("/", (_req, res) => {
+  const provider = getConfig("llm_provider") || process.env.HUMANCLAW_LLM_PROVIDER || "claude";
+  const apiKey = getConfig("llm_api_key") || process.env.HUMANCLAW_LLM_API_KEY || "";
+  const model = getConfig("llm_model") || process.env.HUMANCLAW_LLM_MODEL || "";
+  const keySource = getConfig("llm_api_key") ? "dashboard" : process.env.HUMANCLAW_LLM_API_KEY ? "env" : "none";
+  res.json({
+    provider,
+    api_key_set: apiKey.length > 0,
+    api_key_masked: apiKey ? apiKey.slice(0, 8) + "..." + apiKey.slice(-4) : "",
+    api_key_source: keySource,
+    model
+  });
+});
+router5.put("/", (req, res) => {
+  const { provider, api_key, model } = req.body;
+  if (provider !== void 0) {
+    if (provider !== "claude" && provider !== "openai") {
+      res.status(400).json({ error: "\u4E0D\u652F\u6301\u7684\u63D0\u4F9B\u5546\uFF0C\u652F\u6301: claude, openai" });
+      return;
+    }
+    setConfig("llm_provider", provider);
+  }
+  if (api_key !== void 0) {
+    if (api_key === "") {
+      deleteConfig("llm_api_key");
+    } else {
+      setConfig("llm_api_key", api_key);
+    }
+  }
+  if (model !== void 0) {
+    if (model === "") {
+      deleteConfig("llm_model");
+    } else {
+      setConfig("llm_model", model);
+    }
+  }
+  res.json({ ok: true });
+});
+var config_default = router5;
+
 // src/dashboard.ts
 function getDashboardHtml() {
   return `<!DOCTYPE html>
@@ -580,17 +901,20 @@ body{background:var(--bg);color:var(--text);font-family:var(--font-sans);min-hei
 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}
+.hdr-spacer{flex:1}
+.gear-btn{background:none;border:1px solid var(--border);color:var(--text-dim);width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .15s}
+.gear-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}
 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;max-width:1200px}
 .panel{display:none}.panel.active{display:block}
-/* \u2500\u2500\u2500 Cards \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 */
+/* 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}
-/* \u2500\u2500\u2500 Agent Card \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 */
+/* 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)}
@@ -603,13 +927,13 @@ main{padding:24px 32px;max-width:1200px}
 .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}
-/* \u2500\u2500\u2500 Stats Bar \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 */
+/* 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}
-/* \u2500\u2500\u2500 Forms \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 */
-.form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-top:16px;max-width:560px}
+/* 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}
@@ -620,17 +944,18 @@ main{padding:24px 32px;max-width:1200px}
 .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}
 .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}
-/* \u2500\u2500\u2500 Section header \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 */
+.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}
-/* \u2500\u2500\u2500 Job card \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 */
+/* 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}
@@ -646,30 +971,58 @@ main{padding:24px 32px;max-width:1200px}
 .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}
-/* \u2500\u2500\u2500 Task Row in Job Form \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-.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}
-.task-row-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
-/* \u2500\u2500\u2500 Toast \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 */
+/* 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}}
-/* \u2500\u2500\u2500 Empty state \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 */
+/* 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}
-/* \u2500\u2500\u2500 Modal/Overlay \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 */
-.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:80px;animation:fade-in .15s ease}
-.overlay .form-card{max-width:520px;width:100%;max-height:80vh;overflow-y:auto;margin:0}
+/* 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>
   <span class="subtitle">\u5F02\u6B65\u7269\u7406\u8282\u70B9\u7F16\u6392\u6846\u67B6</span>
+  <span class="hdr-spacer"></span>
+  <button class="gear-btn" onclick="showSettings()" title="\u8BBE\u7F6E">&#9881;</button>
 </header>
 <nav>
   <button class="tab active" data-panel="fleet">\u78B3\u57FA\u7B97\u529B\u6C60</button>
@@ -691,6 +1044,8 @@ function toast(msg,ok){
   setTimeout(()=>t.remove(),3500);
 }
 let cachedAgents=[];
+let currentPlan=null;
+let selectedAgentIds=new Set();
 
 // \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
@@ -781,13 +1136,12 @@ function tcard(t){
 async function loadPipeline(el){
   el.innerHTML='<div class="empty-state"><p>\u52A0\u8F7D\u4E2D...</p></div>';
   try{
-    // refresh agents cache
     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();
     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\u5F00\u59CB\u4F60\u7684\u7B2C\u4E00\u6B21\u7269\u7406\u7F16\u6392\u3002';
+      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;
@@ -809,19 +1163,143 @@ async function loadPipeline(el){
     el.innerHTML=h;
   }catch(e){el.innerHTML='<div class="empty-state"><p>\u52A0\u8F7D\u5931\u8D25: '+e.message+'</p></div>'}
 }
+
+// \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.innerHTML='<div class="form-card"><h3>+ \u521B\u5EFA\u7F16\u6392\u4EFB\u52A1</h3>'
+  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" data-idx="0"><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="document.getElementById(\\'overlay\\').remove()">\u53D6\u6D88</button></div></div>';
-  document.body.appendChild(ov);
+    +'<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('');
@@ -900,6 +1378,50 @@ window.doReject=async function(){
   }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
+// SETTINGS
+// \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
+window.showSettings=async 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>LLM \u8BBE\u7F6E</h3><div class="spinner-wrap"><div class="spinner"></div></div></div>';
+  document.body.appendChild(ov);
+
+  try{
+    const r=await fetch(API+'/config');
+    const cfg=await r.json();
+    const fc=ov.querySelector('.form-card');
+    let statusHtml='';
+    if(cfg.api_key_set){
+      const src=cfg.api_key_source==='dashboard'?'Dashboard \u914D\u7F6E':'\u73AF\u5883\u53D8\u91CF';
+      statusHtml='<div style="background:var(--accent-dim);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:12px"><span style="color:var(--green)">&#10003;</span> API Key \u5DF2\u914D\u7F6E <span style="color:var(--text-dim)">('+esc(cfg.api_key_masked)+' | \u6765\u6E90: '+src+')</span></div>';
+    }else{
+      statusHtml='<div style="background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:12px;color:var(--red)">&#9888; \u672A\u914D\u7F6E API Key\uFF0CAI \u89C4\u5212\u529F\u80FD\u4E0D\u53EF\u7528</div>';
+    }
+    fc.innerHTML='<h3>LLM \u8BBE\u7F6E</h3>'+statusHtml
+      +'<div class="fg"><label>\u63D0\u4F9B\u5546</label><select id="cfg-provider"><option value="claude"'+(cfg.provider==='claude'?' selected':'')+'>Claude (Anthropic)</option><option value="openai"'+(cfg.provider==='openai'?' selected':'')+'>OpenAI</option></select></div>'
+      +'<div class="fg"><label>API Key</label><input id="cfg-key" type="password" placeholder="'+(cfg.api_key_set?'\u5DF2\u914D\u7F6E\uFF0C\u7559\u7A7A\u5219\u4E0D\u4FEE\u6539':'\u8F93\u5165\u4F60\u7684 API Key...')+'"/><div class="hint">Claude: sk-ant-... | OpenAI: sk-...</div></div>'
+      +'<div class="fg"><label>\u6A21\u578B <span style="color:var(--text-dim);font-weight:400">(\u53EF\u9009\uFF0C\u7559\u7A7A\u7528\u9ED8\u8BA4)</span></label><input id="cfg-model" value="'+esc(cfg.model||'')+'" placeholder="\u4F8B: claude-sonnet-4-20250514 / gpt-4o"/></div>'
+      +'<div class="btn-group"><button class="btn btn-primary" onclick="saveSettings()">\u4FDD\u5B58</button><button class="btn btn-ghost" onclick="document.getElementById(\\'overlay\\').remove()">\u53D6\u6D88</button></div>';
+  }catch{
+    ov.querySelector('.form-card').innerHTML='<h3>LLM \u8BBE\u7F6E</h3><p style="color:var(--red)">\u52A0\u8F7D\u914D\u7F6E\u5931\u8D25</p>';
+  }
+};
+window.saveSettings=async function(){
+  const provider=document.getElementById('cfg-provider').value;
+  const apiKey=document.getElementById('cfg-key').value.trim();
+  const model=document.getElementById('cfg-model').value.trim();
+  const body={provider};
+  if(apiKey)body.api_key=apiKey;
+  body.model=model;
+  try{
+    const r=await fetch(API+'/config',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
+    if(!r.ok){const d=await r.json();toast(d.error||'\u4FDD\u5B58\u5931\u8D25',false);return}
+    toast('\u8BBE\u7F6E\u5DF2\u4FDD\u5B58',true);
+    document.getElementById('overlay').remove();
+  }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
 // 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
@@ -940,6 +1462,7 @@ function createServer(port = 2026) {
   app.use("/api/v1/jobs", jobs_default);
   app.use("/api/v1/tasks", tasks_default);
   app.use("/api/v1/jobs", sync_default);
+  app.use("/api/v1/config", config_default);
   const dashboardHtml = getDashboardHtml();
   app.get("/", (_req, res) => {
     res.type("html").send(dashboardHtml);
@@ -1059,5 +1582,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