LIVE 模式可直接在辦公室對專案派發任務

摘要：
與 claude-office 同功能:點選專案 agent 輸入任務,監看伺服器在該專案
cwd spawn headless session(codex exec --full-auto),過程即時可視。

根本原因：
實況模式原本只能唯讀觀察 rollout,無法從辦公室驅動真實 Codex 執行。

影響：
watcher 新增 POST /task(Origin 白名單 5173/5182、每專案排隊上限 3、
15 分鐘逾時);--full-auto 允許 AI 在專案內改檔案,僅限 localhost 使用。

修法：
- server/watch.mjs:launchTask 用 codex exec --full-auto --skip-git-repo-check -
  (prompt 走 stdin),resume 由該專案最新 rollout 檔名取 sessionId;
  新生 rollout 檔從頭 tail(born-now)
- live.ts:dispatchTask() + task_accepted/task_done;SidePanel TaskComposer

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

README.md

@@ -41,6 +41,21 @@ npm run watch      # http://localhost:5181/events (SSE)
 
 注意:監看伺服器會讀取本機的 Codex 對話記錄,**只綁 127.0.0.1、不要對外開放**。
 
+### 在辦公室下任務(LIVE 模式)
+
+點選任一專案 agent,側邊面板會出現任務輸入框 —「🚀 派發任務」會透過
+`POST /task` 讓監看伺服器在該專案目錄 spawn 一個 headless session:
+
+```
+codex exec --full-auto --skip-git-repo-check -   # prompt 由 stdin 傳入
+```
+
+- 勾「續上次 session」= `codex exec resume <該專案最新 sessionId>`
+- 執行過程即時演在辦公室裡,結束時事件紀錄顯示 🏁(失敗會顯示 ⚠️ 與 stderr 摘要)
+- 同專案同時只跑一個任務,其餘排隊(上限 3);單一任務 15 分鐘逾時
+- 安全:`/task` 僅接受 localhost 來源 + Origin 白名單(5173/5182),
+  `--full-auto` 允許 AI 在該專案內改檔案跑指令 — **請理解風險後再用**
+
 ## PM2 部署
 
 ```bash

server/watch.mjs

@@ -12,6 +12,7 @@
  */
 import { createServer } from "node:http";
 import { createReadStream, promises as fs } from "node:fs";
+import { spawn } from "node:child_process";
 import { homedir } from "node:os";
 import path from "node:path";
 
@@ -19,6 +20,16 @@ const PORT = Number(process.env.PORT || 5181);
 const POLL_MS = 1500;
 const ACTIVE_WINDOW_DAYS = 7;
 
+/** Origins allowed to dispatch tasks (browser CSRF guard; server is localhost-only). */
+const ALLOWED_ORIGINS = new Set([
+  "http://localhost:5173",
+  "http://127.0.0.1:5173",
+  "http://localhost:5182",
+  "http://127.0.0.1:5182",
+]);
+const TASK_TIMEOUT_MS = 15 * 60_000;
+const MAX_QUEUE = 3;
+
 const SESSIONS_ROOT = path.join(homedir(), ".codex", "sessions");
 
 /** slug → { slug, name, cwd, lastActivity } */
@@ -175,8 +186,10 @@ async function pollOnce(initial) {
 
     let tail = tails.get(full);
     if (!tail) {
-      // First sighting: skip history, only follow new appends.
+      // Initial scan: skip history. Files born while we're running
-      tail = { offset: stat.size, remainder: "", cwd: null, slug: null };
+      // (e.g. a freshly dispatched task session) are read from the top.
+      const bornNow = !initial && Date.now() - stat.mtimeMs < 120_000;
+      tail = { offset: bornNow ? 0 : stat.size, remainder: "", cwd: null, slug: null, file: full, mtime: stat.mtimeMs };
       tails.set(full, tail);
       const cwd = await sniffCwd(full, stat.size);
       if (cwd) {
@@ -187,8 +200,9 @@ async function pollOnce(initial) {
           if (initial) proj.lastActivity = stat.mtimeMs;
         }
       }
-      continue;
+      if (!bornNow) continue;
     }
+    tail.mtime = stat.mtimeMs;
 
     if (stat.size < tail.offset) {
       tail.offset = stat.size;
@@ -207,6 +221,150 @@ async function pollOnce(initial) {
   }
 }
 
+/* ── task dispatch: turn the watcher into a tiny gateway ── */
+
+/** slug → { child, startedAt, queue: [{prompt, resume}] } */
+const taskRuns = new Map();
+
+/** Newest rollout for this project → session id (uuid in the filename), for resume. */
+function newestSessionId(slug) {
+  let best = null;
+  let bestM = 0;
+  for (const tail of tails.values()) {
+    if (tail.slug === slug && tail.mtime > bestM) {
+      bestM = tail.mtime;
+      best = tail.file;
+    }
+  }
+  if (!best) return null;
+  const m = path.basename(best).match(/([0-9a-fA-F]{8}-[0-9a-fA-F-]{27,})\.jsonl$/);
+  return m ? m[1] : null;
+}
+
+function launchTask(slug, prompt, resume) {
+  const proj = projects.get(slug);
+  if (!proj?.cwd) return;
+
+  const args = ["exec"];
+  if (resume) {
+    const sessionId = newestSessionId(slug);
+    if (sessionId) args.push("resume", sessionId);
+  }
+  args.push("--full-auto", "--skip-git-repo-check", "-");
+
+  // Prompt goes through stdin ("-") — never through shell arguments.
+  const child = spawn("codex", args, {
+    cwd: proj.cwd,
+    shell: true,
+    stdio: ["pipe", "ignore", "pipe"],
+    windowsHide: true,
+  });
+  const run = { child, startedAt: Date.now(), queue: taskRuns.get(slug)?.queue ?? [] };
+  taskRuns.set(slug, run);
+
+  let stderrTail = "";
+  child.stderr.on("data", (c) => {
+    stderrTail = (stderrTail + c.toString("utf8")).slice(-400);
+  });
+  child.stdin.write(prompt);
+  child.stdin.end();
+
+  const killer = setTimeout(() => child.kill(), TASK_TIMEOUT_MS);
+  broadcast({ type: "task_accepted", slug, resume: Boolean(resume) });
+
+  child.on("close", (code) => {
+    clearTimeout(killer);
+    broadcast({
+      type: "task_done",
+      slug,
+      code,
+      error: code === 0 ? undefined : stderrTail.trim().slice(-200) || undefined,
+    });
+    const next = run.queue.shift();
+    if (next) {
+      launchTask(slug, next.prompt, next.resume);
+    } else {
+      taskRuns.delete(slug);
+    }
+  });
+  child.on("error", (err) => {
+    clearTimeout(killer);
+    taskRuns.delete(slug);
+    broadcast({ type: "task_done", slug, code: -1, error: String(err).slice(0, 200) });
+  });
+}
+
+function corsFor(req) {
+  const origin = req.headers.origin;
+  if (origin && ALLOWED_ORIGINS.has(origin)) {
+    return {
+      "Access-Control-Allow-Origin": origin,
+      "Access-Control-Allow-Headers": "content-type",
+      "Access-Control-Allow-Methods": "POST, OPTIONS",
+      Vary: "Origin",
+    };
+  }
+  return {};
+}
+
+function readBody(req, limit = 100_000) {
+  return new Promise((resolve, reject) => {
+    let size = 0;
+    const chunks = [];
+    req.on("data", (c) => {
+      size += c.length;
+      if (size > limit) {
+        reject(new Error("too large"));
+        req.destroy();
+        return;
+      }
+      chunks.push(c);
+    });
+    req.on("end", () => resolve(Buffer.concat(chunks).toString("utf8")));
+    req.on("error", reject);
+  });
+}
+
+async function handleTaskRequest(req, res) {
+  const cors = corsFor(req);
+  if (req.method === "OPTIONS") {
+    res.writeHead(Object.keys(cors).length ? 204 : 403, cors);
+    res.end();
+    return;
+  }
+  if (!Object.keys(cors).length) {
+    res.writeHead(403, { "Content-Type": "application/json" });
+    res.end(JSON.stringify({ ok: false, error: "origin not allowed" }));
+    return;
+  }
+  const fail = (status, error) => {
+    res.writeHead(status, { ...cors, "Content-Type": "application/json" });
+    res.end(JSON.stringify({ ok: false, error }));
+  };
+  try {
+    const body = JSON.parse(await readBody(req));
+    const slug = String(body.slug ?? "");
+    const prompt = String(body.prompt ?? "").trim();
+    const resume = Boolean(body.resume);
+    if (!projects.has(slug)) return fail(404, "unknown project");
+    if (!prompt || prompt.length > 8000) return fail(400, "prompt must be 1–8000 chars");
+
+    const running = taskRuns.get(slug);
+    if (running) {
+      if (running.queue.length >= MAX_QUEUE) return fail(429, "queue full");
+      running.queue.push({ prompt, resume });
+      res.writeHead(202, { ...cors, "Content-Type": "application/json" });
+      res.end(JSON.stringify({ ok: true, queued: running.queue.length }));
+      return;
+    }
+    launchTask(slug, prompt, resume);
+    res.writeHead(200, { ...cors, "Content-Type": "application/json" });
+    res.end(JSON.stringify({ ok: true, queued: 0 }));
+  } catch {
+    fail(400, "bad request");
+  }
+}
+
 function snapshot() {
   return {
     type: "snapshot",
@@ -218,6 +376,10 @@ function snapshot() {
 }
 
 const server = createServer((req, res) => {
+  if (req.url === "/task") {
+    handleTaskRequest(req, res);
+    return;
+  }
   if (req.url === "/events") {
     res.writeHead(200, {
       "Content-Type": "text/event-stream",

src/components/SidePanel.tsx

@@ -1,11 +1,59 @@
+import { useState } from "react";
 import { STATUS_COLORS, STATUS_LABELS } from "@/lib/constants";
 import { generateAppearance } from "@/lib/appearance";
 import { useOfficeStore } from "@/store/office-store";
 import { getDirector } from "@/sim/runtime";
+import { dispatchTask } from "@/gateway/live";
 import { Pawn } from "./Pawn";
 
 const ROLE_LABELS = { lead: "Lead Agent", agent: "Agent", subagent: "Subagent" } as const;
 
+/** LIVE mode: dispatch a real headless task to this project via the watcher. */
+function TaskComposer({ agentId }: { agentId: string }) {
+  const [prompt, setPrompt] = useState("");
+  const [resume, setResume] = useState(false);
+  const [sending, setSending] = useState(false);
+
+  const send = async () => {
+    const text = prompt.trim();
+    if (!text || sending) return;
+    setSending(true);
+    const result = await dispatchTask(agentId, text, resume);
+    setSending(false);
+    if (result.ok) {
+      setPrompt("");
+      if (result.queued) {
+        useOfficeStore.getState().addEvent("⏳", `任務已排隊(第 ${result.queued} 位)`);
+      }
+    } else {
+      useOfficeStore.getState().addEvent("⚠️", `派發失敗:${result.error ?? "未知錯誤"}`);
+    }
+  };
+
+  return (
+    <div className="task-composer">
+      <textarea
+        value={prompt}
+        onChange={(e) => setPrompt(e.target.value)}
+        placeholder="輸入要派發的任務,將以 headless session 在該專案執行…"
+        rows={3}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) send();
+        }}
+      />
+      <div className="task-composer-row">
+        <label>
+          <input type="checkbox" checked={resume} onChange={(e) => setResume(e.target.checked)} />
+          續上次 session
+        </label>
+        <button className="btn assign-btn" onClick={send} disabled={sending || !prompt.trim()}>
+          {sending ? "派發中…" : "🚀 派發任務"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
 export function SidePanel() {
   const selectedAgentId = useOfficeStore((s) => s.selectedAgentId);
   const agent = useOfficeStore((s) => (s.selectedAgentId ? s.agents.get(s.selectedAgentId) : undefined));
@@ -98,6 +146,8 @@ export function SidePanel() {
               📋 指派任務
             </button>
           )}
+
+          {agent.role !== "subagent" && mode === "live" && <TaskComposer agentId={agent.id} />}
         </div>
       ) : (
         <div className="panel-hint">

src/gateway/live.ts

@@ -2,7 +2,8 @@ import { useOfficeStore } from "@/store/office-store";
 import { DESK_SLOTS, HOT_DESK_SLOTS } from "@/lib/positions";
 import { ENTRANCE } from "@/lib/constants";
 
-const SSE_URL = "http://localhost:5181/events";
+const WATCH_ORIGIN = "http://localhost:5181";
+const SSE_URL = `${WATCH_ORIGIN}/events`;
 
 /** Status decay: how long a live status persists without fresh events. */
 const SPEAK_TTL = 8_000;
@@ -139,6 +140,45 @@ function onEvent(e: MessageEvent) {
       endSub(ev.subId as string);
       bump(id);
       break;
+    case "task_accepted": {
+      const agent = S().agents.get(id);
+      if (!agent) break;
+      S().setStatus(id, "thinking");
+      S().addEvent("📨", `已派發任務給 ${agent.name}${ev.resume ? "(續上次 session)" : ""}`);
+      bump(id);
+      break;
+    }
+    case "task_done": {
+      const agent = S().agents.get(id);
+      if (!agent) break;
+      if (ev.code === 0) {
+        S().addEvent("🏁", `${agent.name} 的任務行程結束`);
+      } else {
+        S().setStatus(id, "error");
+        S().addEvent("⚠️", `${agent.name} 任務失敗:${(ev.error as string) ?? `exit ${ev.code}`}`);
+      }
+      bump(id);
+      break;
+    }
+  }
+}
+
+/** Dispatch a real headless task to a project via the watcher. */
+export async function dispatchTask(
+  agentId: string,
+  prompt: string,
+  resume: boolean,
+): Promise<{ ok: boolean; error?: string; queued?: number }> {
+  const slug = agentId.replace(/^proj-/, "");
+  try {
+    const res = await fetch(`${WATCH_ORIGIN}/task`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ slug, prompt, resume }),
+    });
+    return (await res.json()) as { ok: boolean; error?: string; queued?: number };
+  } catch {
+    return { ok: false, error: "無法連線監看伺服器 (npm run watch)" };
   }
 }
 

src/styles.css

@@ -348,6 +348,55 @@
   border-color: transparent;
 }
 
+.task-composer {
+  margin-top: 14px;
+}
+
+.task-composer textarea {
+  width: 100%;
+  resize: vertical;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 10px;
+}
+
+.task-composer textarea:focus {
+  outline: none;
+  border-color: var(--terracotta);
+}
+
+.task-composer-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.task-composer-row label {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  color: var(--text-dim);
+  cursor: pointer;
+}
+
+.task-composer-row .assign-btn {
+  width: auto;
+  margin-top: 0;
+}
+
+.task-composer-row .assign-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
 .panel-hint {
   padding: 20px 16px;
   border-bottom: 1px solid var(--border);