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>

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);