@tianshu-ai/tianshu 0.3.0

package/plugins/workboard/dist/client.js

@@ -0,0 +1,895 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Workboard plugin - client side.
+//
+// Right-column kanban panel inside the chat shell. 3 horizontal
+// columns (todo / in-progress / done), sized for the narrow right
+// rail. Add tasks inline (Todo column), drag across columns,
+// dependency chips show 1f512 / 1f517 state.
+//
+// `WorkboardAdminPage` is kept in this file but NOT contributed via
+// the manifest - it lived as a /admin/workboard/main page in earlier
+// drafts; Yu asked to drop the admin surface for v0.2 because the
+// right-rail panel covers everything the human needs. We keep the
+// component so re-exposing it later is a one-line manifest change
+// instead of re-deriving the full editor.
+//
+// Layout follows the closed-source Tianshu TaskBoard:
+//   - 3 columns side-by-side, vertical scroll inside each column;
+//   - project chips at the top (horizontal scroller), Inbox sticks
+//     last so the user's named projects come first;
+//   - per-column `+` button opens an inline title input; Enter submits;
+//   - cards are draggable across columns (HTML5 dnd, optimistic move).
+//
+// Both surfaces hit /api/p/workboard/*.
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { AlertTriangle, Bot, CheckCircle2, ChevronDown, ChevronRight, Clock, FileText, Hammer, Kanban, Link2, Loader2, Lock, Plus, RefreshCw, ScrollText, Trash2, User, X, XCircle, Zap, } from "lucide-react";
+import { useOpenFile, } from "@tianshu/plugin-sdk/client";
+import WorkerAgentsPage from "./worker-agents-page.js";
+const API_BASE = "/api/p/workboard";
+const PROJECT_INBOX_KEY = "***";
+const BOARD_COLUMNS = [
+    { status: "ready", label: "Ready", color: "border-indigo-500/40 bg-indigo-500/5", dot: "bg-indigo-400" },
+    { status: "in_progress", label: "In progress", color: "border-amber-500/40 bg-amber-500/5", dot: "bg-amber-400 animate-pulse" },
+    { status: "done", label: "Done", color: "border-emerald-500/40 bg-emerald-500/5", dot: "bg-emerald-400" },
+];
+// `stalled` is no longer a column - it's a label that paints a
+// warning chip on the ready card. See LABELED_BADGES below.
+async function getJson(url) {
+    const r = await fetch(url, { credentials: "include" });
+    if (!r.ok)
+        throw new Error(`${r.status} ${r.statusText}`);
+    return (await r.json());
+}
+async function sendJson(url, body, method = "POST") {
+    const init = {
+        method,
+        credentials: "include",
+    };
+    if (method !== "DELETE") {
+        init.headers = { "Content-Type": "application/json" };
+        init.body = JSON.stringify(body ?? {});
+    }
+    const r = await fetch(url, init);
+    if (!r.ok) {
+        let msg = `${r.status} ${r.statusText}`;
+        try {
+            const err = (await r.json());
+            if (err.error)
+                msg += ` (${err.error})`;
+        }
+        catch {
+            /* swallow */
+        }
+        throw new Error(msg);
+    }
+    if (r.status === 204)
+        return undefined;
+    return (await r.json());
+}
+function fmtRelative(ms) {
+    if (!ms)
+        return "";
+    const diff = Date.now() - ms;
+    if (diff < 60_000)
+        return "just now";
+    if (diff < 3_600_000)
+        return `${Math.floor(diff / 60_000)}m ago`;
+    if (diff < 86_400_000)
+        return `${Math.floor(diff / 3_600_000)}h ago`;
+    return `${Math.floor(diff / 86_400_000)}d ago`;
+}
+function projectChipsFromSummary(projects, visibleStatuses) {
+    const sumFor = (p) => {
+        let n = 0;
+        if (visibleStatuses.includes("ready"))
+            n += p.ready;
+        if (visibleStatuses.includes("in_progress"))
+            n += p.inProgress;
+        if (visibleStatuses.includes("done"))
+            n += p.done;
+        return n;
+    };
+    const filtered = projects
+        .map((p) => ({ key: p.project, label: p.project, count: sumFor(p) }))
+        .filter((p) => p.count > 0);
+    // Real projects first, alphabetical. Inbox sticks at the end.
+    const real = filtered
+        .filter((p) => p.key !== PROJECT_INBOX_KEY)
+        .sort((a, b) => a.label.localeCompare(b.label));
+    const inbox = filtered.filter((p) => p.key === PROJECT_INBOX_KEY);
+    return [...real, ...inbox.map((p) => ({ ...p, label: "Inbox" }))];
+}
+function useBoardController(opts) {
+    const [tasks, setTasks] = useState(null);
+    const [projects, setProjects] = useState([]);
+    const [worker, setWorker] = useState(null);
+    const [agentNames, setAgentNames] = useState(() => new Map());
+    const [error, setError] = useState(null);
+    const [busyId, setBusyId] = useState(null);
+    const dragTaskId = useRef(null);
+    const reload = useCallback(async () => {
+        try {
+            const params = new URLSearchParams();
+            if (opts.includeArchived)
+                params.set("include_aborted", "1");
+            const url = params.toString().length === 0
+                ? `${API_BASE}/tasks`
+                : `${API_BASE}/tasks?${params.toString()}`;
+            const requests = [
+                getJson(url),
+                getJson(`${API_BASE}/projects`),
+                getJson(`${API_BASE}/agents`),
+            ];
+            if (opts.withWorker) {
+                requests.push(getJson(`${API_BASE}/workers/status`));
+            }
+            const results = await Promise.all(requests);
+            setTasks(results[0].tasks);
+            setProjects(results[1].projects);
+            const agentList = results[2].agents;
+            setAgentNames(new Map(agentList.map((a) => [a.id, a.name])));
+            if (opts.withWorker) {
+                setWorker(results[3]);
+            }
+            setError(null);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+    }, [opts.includeArchived, opts.withWorker]);
+    useEffect(() => {
+        void reload();
+        const id = window.setInterval(() => void reload(), 3000);
+        return () => window.clearInterval(id);
+    }, [reload]);
+    const moveTask = useCallback(async (id, status) => {
+        // Optimistic update so the card lands in the new column without
+        // the 3s polling lag.
+        setTasks((prev) => prev ? prev.map((t) => (t.id === id ? { ...t, status } : t)) : prev);
+        setBusyId(id);
+        try {
+            await sendJson(`${API_BASE}/tasks/${id}`, { status }, "PATCH");
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setBusyId(null);
+            await reload();
+        }
+    }, [reload]);
+    const addTaskInColumn = useCallback(async (input, status) => {
+        try {
+            const project = input.project && input.project !== PROJECT_INBOX_KEY
+                ? input.project
+                : undefined;
+            // POST /tasks is now a batch endpoint. For single-card adds
+            // (the kanban + button) we wrap into a 1-element batch and
+            // surface the per-row error if it failed.
+            const resp = await sendJson(`${API_BASE}/tasks`, {
+                tasks: [
+                    {
+                        title: input.title,
+                        status,
+                        project,
+                        priority: input.priority || 0,
+                        workerRole: input.workerRole || null,
+                        description: input.description || null,
+                    },
+                ],
+            });
+            const row = resp?.results?.[0];
+            if (row && !row.ok) {
+                throw new Error(row.error ?? "create_failed");
+            }
+            await reload();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+    }, [reload]);
+    const patchTask = useCallback(async (id, patch) => {
+        setBusyId(id);
+        try {
+            await sendJson(`${API_BASE}/tasks/${id}`, patch, "PATCH");
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setBusyId(null);
+            await reload();
+        }
+    }, [reload]);
+    const deleteTask = useCallback(async (id) => {
+        setBusyId(id);
+        try {
+            // DELETE is now a batch endpoint at POST /tasks/delete.
+            // Wrap the single-id case into a 1-element ids array so the
+            // existing modal "Delete" button keeps working unchanged.
+            const resp = await sendJson(`${API_BASE}/tasks/delete`, { ids: [id] });
+            const row = resp?.results?.[0];
+            if (row && !row.ok) {
+                throw new Error(row.error ?? "delete_failed");
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setBusyId(null);
+            await reload();
+        }
+    }, [reload]);
+    const bindDrag = useCallback(() => {
+        return {
+            onDragStart: (e, taskId) => {
+                dragTaskId.current = taskId;
+                e.dataTransfer.effectAllowed = "move";
+                e.dataTransfer.setData("text/plain", taskId);
+            },
+            onDragEnd: () => {
+                dragTaskId.current = null;
+            },
+            onDrop: (e, targetStatus) => {
+                const taskId = dragTaskId.current || e.dataTransfer.getData("text/plain");
+                if (!taskId)
+                    return;
+                const task = (tasks ?? []).find((t) => t.id === taskId);
+                if (!task || task.status === targetStatus)
+                    return;
+                void moveTask(taskId, targetStatus);
+            },
+        };
+    }, [tasks, moveTask]);
+    return {
+        tasks,
+        projects,
+        worker,
+        agentNames,
+        error,
+        busyId,
+        reload,
+        moveTask,
+        addTaskInColumn,
+        patchTask,
+        deleteTask,
+        bindDrag,
+    };
+}
+// ─── Right panel: compact kanban ─────────────────────────────────
+function WorkboardPanel(_props) {
+    const ctrl = useBoardController({ includeArchived: false, withWorker: false });
+    const [projectFilter, setProjectFilter] = useState("");
+    const visibleTasks = useMemo(() => {
+        if (!ctrl.tasks)
+            return null;
+        return projectFilter
+            ? ctrl.tasks.filter((t) => (t.project || PROJECT_INBOX_KEY) === projectFilter)
+            : ctrl.tasks;
+    }, [ctrl.tasks, projectFilter]);
+    const chips = useMemo(() => projectChipsFromSummary(ctrl.projects, ["ready", "in_progress", "done"]), [ctrl.projects]);
+    const drag = ctrl.bindDrag();
+    return (_jsxs("div", { className: "flex flex-col h-full bg-gray-950 text-gray-100", children: [_jsxs("header", { className: "flex items-center justify-between px-3 py-2 border-b border-gray-800 flex-shrink-0", children: [_jsxs("h2", { className: "flex items-center gap-1.5 font-semibold text-sm", children: [_jsx(Kanban, { className: "w-4 h-4" }), " Tasks"] }), _jsx("button", { type: "button", onClick: () => void ctrl.reload(), className: "text-[10px] uppercase tracking-wide text-gray-400 hover:text-gray-100", children: "Refresh" })] }), chips.length > 1 && (_jsx(ProjectChips, { chips: chips, active: projectFilter, onPick: setProjectFilter })), ctrl.error && (_jsx("div", { className: "px-3 py-1.5 text-[10px] bg-red-900/40 border-b border-red-800 text-red-100 flex-shrink-0", children: ctrl.error })), _jsx("div", { className: "flex-1 overflow-x-auto overflow-y-hidden", children: ctrl.tasks === null ? (_jsx("div", { className: "flex items-center justify-center text-gray-500 py-8 h-full", children: _jsx(Loader2, { className: "w-4 h-4 animate-spin" }) })) : (_jsx("div", { className: "flex gap-1.5 p-2 h-full items-stretch", children: BOARD_COLUMNS.map((col) => (_jsx(KanbanColumn, { column: col, tasks: (visibleTasks ?? [])
+                            .filter((t) => t.status === col.status)
+                            .sort((a, b) => col.status === "done"
+                            ? b.createdAt - a.createdAt
+                            : a.createdAt - b.createdAt), busyId: ctrl.busyId, compact: true, onAddTask: (input) => void ctrl.addTaskInColumn({ ...input, project: input.project ?? projectFilter }, col.status), projects: ctrl.projects, workerRoles: KNOWN_WORKER_ROLES, agentNames: ctrl.agentNames, allTasks: ctrl.tasks ?? [], onPatchTask: ctrl.patchTask, onDragStart: drag.onDragStart, onDragEnd: drag.onDragEnd, onDrop: drag.onDrop }, col.status))) })) })] }));
+}
+// ─── Admin page: full board ──────────────────────────────────────
+function WorkboardAdminPage(_props) {
+    const ctrl = useBoardController({ includeArchived: false, withWorker: true });
+    const [projectFilter, setProjectFilter] = useState("");
+    const [selected, setSelected] = useState(null);
+    // Re-sync the modal's task with the latest reload (or close it if the
+    // task was deleted out from under us).
+    useEffect(() => {
+        if (!selected || !ctrl.tasks)
+            return;
+        const fresh = ctrl.tasks.find((t) => t.id === selected.id);
+        if (!fresh) {
+            setSelected(null);
+        }
+        else if (fresh !== selected) {
+            setSelected(fresh);
+        }
+    }, [ctrl.tasks, selected]);
+    const visibleStatuses = ["ready", "in_progress", "done"];
+    const visibleTasks = useMemo(() => {
+        if (!ctrl.tasks)
+            return null;
+        const inProject = projectFilter
+            ? ctrl.tasks.filter((t) => (t.project || PROJECT_INBOX_KEY) === projectFilter)
+            : ctrl.tasks;
+        return inProject.filter((t) => visibleStatuses.includes(t.status));
+    }, [ctrl.tasks, projectFilter, visibleStatuses]);
+    const chips = useMemo(() => projectChipsFromSummary(ctrl.projects, visibleStatuses), [ctrl.projects, visibleStatuses]);
+    const renderColumns = BOARD_COLUMNS;
+    const drag = ctrl.bindDrag();
+    return (_jsxs("div", { className: "flex flex-col h-full bg-gray-950 text-gray-100", children: [_jsxs("header", { className: "px-6 py-4 border-b border-gray-800 flex-shrink-0", children: [_jsxs("h1", { className: "text-xl font-semibold flex items-center gap-2", children: [_jsx(Kanban, { className: "w-5 h-5" }), " Workboard"] }), _jsxs("p", { className: "text-xs text-gray-500 mt-1 max-w-3xl", children: ["Drag cards across columns. Click ", _jsx(Plus, { className: "inline w-3 h-3 align-text-bottom" }), " ", "on a column to add a task in place. Workers in the pool claim ready tasks and report back with a result summary.", _jsxs("span", { className: "text-gray-600", children: [" ", "v0.2 ships an echo worker (30s sleep + reflect title) so the loop is visible end-to-end; real worker roles land in follow-up PRs."] })] })] }), ctrl.error && (_jsx("div", { className: "mx-6 mt-3 px-3 py-2 rounded bg-red-900/40 border border-red-800 text-xs text-red-100 flex-shrink-0", children: ctrl.error })), chips.length > 0 && (_jsx(ProjectChips, { chips: chips, active: projectFilter, onPick: setProjectFilter, showAll: true })), _jsx(WorkerStatusRow, { snapshot: ctrl.worker, onNudge: () => void sendJson(`${API_BASE}/workers/restart`, {}) }), _jsx("div", { className: "flex-1 overflow-x-auto overflow-y-hidden", children: ctrl.tasks === null ? (_jsx("div", { className: "flex items-center text-gray-500 py-12 justify-center h-full", children: _jsx(Loader2, { className: "w-5 h-5 animate-spin" }) })) : (_jsx("div", { className: "flex gap-3 p-4 h-full items-stretch", style: { minWidth: `${renderColumns.length * 240}px` }, children: renderColumns.map((col) => (_jsx(KanbanColumn, { column: col, tasks: (visibleTasks ?? [])
+                            .filter((t) => t.status === col.status)
+                            .sort((a, b) => col.status === "done"
+                            ? b.createdAt - a.createdAt
+                            : a.createdAt - b.createdAt), busyId: ctrl.busyId, onAddTask: (input) => void ctrl.addTaskInColumn({ ...input, project: input.project ?? projectFilter }, col.status), projects: ctrl.projects, workerRoles: KNOWN_WORKER_ROLES, agentNames: ctrl.agentNames, allTasks: ctrl.tasks ?? [], onPatchTask: ctrl.patchTask, onDragStart: drag.onDragStart, onDragEnd: drag.onDragEnd, onDrop: drag.onDrop }, col.status))) })) }), selected && (_jsx(TaskModal, { task: selected, allTasks: ctrl.tasks ?? [], busy: ctrl.busyId === selected.id, onClose: () => setSelected(null), onPatch: (patch) => ctrl.patchTask(selected.id, patch), onDelete: () => ctrl.deleteTask(selected.id) }))] }));
+}
+// ─── Kanban column ───────────────────────────────────────────────
+function KanbanColumn({ column, tasks, allTasks, busyId, compact, onAddTask, onPatchTask, projects, workerRoles, agentNames, onDragStart, onDragEnd, onDrop, }) {
+    const [showAdd, setShowAdd] = useState(false);
+    const [isDragOver, setIsDragOver] = useState(false);
+    return (_jsxs("div", { className: `flex flex-col flex-1 min-w-[160px] rounded-lg border transition-colors ${isDragOver
+            ? "border-blue-500/60 bg-gray-900/80"
+            : column.color}`, onDragOver: (e) => {
+            e.preventDefault();
+            setIsDragOver(true);
+        }, onDragLeave: () => setIsDragOver(false), onDrop: (e) => {
+            e.preventDefault();
+            setIsDragOver(false);
+            onDrop(e, column.status);
+        }, children: [_jsxs("header", { className: "px-2 py-1.5 border-b border-gray-800/60 flex items-center gap-1.5 sticky top-0", children: [_jsx("span", { className: `w-2 h-2 rounded-full ${column.dot}` }), _jsx("span", { className: `${compact ? "text-[11px]" : "text-xs"} font-medium`, children: column.label }), _jsx("span", { className: `ml-auto ${compact ? "text-[10px]" : "text-[11px]"} text-gray-500`, children: tasks.length }), column.status === "ready" && (_jsx("button", { type: "button", title: "Add task", onClick: () => setShowAdd(true), className: "p-0.5 text-gray-600 hover:text-gray-200 rounded", children: _jsx(Plus, { className: "w-3 h-3" }) }))] }), _jsxs("ul", { className: "flex-1 overflow-y-auto p-1.5 space-y-1.5 min-h-[40px]", children: [tasks.map((t) => (_jsx(BoardCard, { task: t, meta: computeMeta(t, allTasks), busy: busyId === t.id, compact: compact, agentNames: agentNames, onDragStart: onDragStart, onDragEnd: onDragEnd, onPatch: onPatchTask }, t.id))), showAdd && (_jsx(AddTaskRow, { projects: projects, workerRoles: workerRoles, allTasks: allTasks, onSubmit: (input) => {
+                            onAddTask(input);
+                            setShowAdd(false);
+                        }, onCancel: () => setShowAdd(false) })), !showAdd && tasks.length === 0 && (_jsx("li", { className: `text-center text-[10px] text-gray-600 py-3 ${column.status === "ready"
+                            ? "cursor-pointer hover:text-gray-400"
+                            : ""}`, onClick: column.status === "ready" ? () => setShowAdd(true) : undefined, children: column.status === "ready"
+                            ? "empty - click to add"
+                            : "empty" }))] })] }));
+}
+function computeMeta(task, allTasks) {
+    const byId = new Map(allTasks.map((t) => [t.id, t]));
+    const deps = [];
+    const pendingDeps = [];
+    for (const id of task.dependsOn ?? []) {
+        const dep = byId.get(id);
+        if (!dep)
+            continue;
+        deps.push(dep);
+        if (dep.status !== "done")
+            pendingDeps.push(dep);
+    }
+    // A deleted prerequisite counts as unsatisfied so the card stays
+    // visibly blocked until the user re-points or removes it.
+    const missingDepCount = (task.dependsOn?.length ?? 0) - deps.length;
+    const blocked = task.status === "ready" &&
+        (pendingDeps.length > 0 || missingDepCount > 0);
+    return { deps, pendingDeps, blocked };
+}
+function BoardCard({ task, meta, busy, compact, agentNames, onDragStart, onDragEnd, onPatch, }) {
+    const [expanded, setExpanded] = useState(false);
+    const hasMore = Boolean(task.description?.trim()) ||
+        Boolean(task.resultSummary?.trim()) ||
+        meta.deps.length > 0 ||
+        // Anything with a session_id has a worker transcript worth
+        // showing — even an in-progress task with no description.
+        Boolean(task.sessionId) ||
+        task.status === "in_progress";
+    return (_jsxs("li", { draggable: true, onDragStart: (e) => {
+            // Visual feedback: dim the card while dragging.
+            e.currentTarget.style.opacity = "0.4";
+            onDragStart(e, task.id);
+        }, onDragEnd: (e) => {
+            e.currentTarget.style.opacity = "1";
+            onDragEnd();
+        }, onClick: (e) => {
+            // Don't fight click-vs-drag heuristics: only flip on real
+            // mouse clicks, not when dragstart bubbled up. The browser
+            // suppresses click after a drag, so this is mostly belt &
+            // braces - but we do swallow the event so the column-level
+            // drop handler doesn't see it.
+            e.stopPropagation();
+            if (hasMore)
+                setExpanded((v) => !v);
+        }, className: `rounded border bg-gray-900/60 hover:border-gray-700 ${meta.blocked
+            ? "border-indigo-500/40"
+            : "border-gray-800"} ${hasMore ? "cursor-pointer" : "cursor-grab"} ${busy ? "opacity-60" : ""}`, children: [_jsxs("div", { className: "px-2 py-1.5 flex items-start gap-1.5", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-1 flex-wrap", children: [_jsx("span", { className: `${compact ? "text-[11.5px]" : "text-xs"} font-medium text-gray-100 break-words`, children: task.title }), task.priority > 0 && (_jsxs("span", { className: "text-[9px] px-1 rounded bg-amber-900/50 text-amber-100", children: ["p", task.priority] })), task.workerAgentId && (_jsxs("span", { className: "text-[9px] px-1 rounded bg-indigo-900/50 text-indigo-100", title: `Assigned to ${task.workerAgentId} (slug)`, children: ["@", agentNames.get(task.workerAgentId) ?? task.workerAgentId] })), !task.workerAgentId && task.workerRole && (_jsx("span", { className: "text-[9px] px-1 rounded bg-gray-800 text-gray-400", title: "Legacy: dispatched by kind, not pinned to a slug", children: task.workerRole })), task.project && task.project !== PROJECT_INBOX_KEY && (_jsxs("span", { className: "text-[9px] px-1 rounded bg-gray-800 text-gray-400", children: ["#", task.project] })), (task.dependsOn?.length ?? 0) > 0 && (_jsxs("span", { className: `inline-flex items-center gap-0.5 text-[9px] px-1 rounded border ${meta.blocked
+                                            ? "text-indigo-200 bg-indigo-500/15 border-indigo-500/40"
+                                            : "text-gray-400 bg-gray-700/30 border-gray-700"}`, title: meta.blocked
+                                            ? `Waiting on: ${meta.pendingDeps.map((d) => d.title).join(", ")}`
+                                            : `${meta.deps.length} dependenc${meta.deps.length === 1 ? "y" : "ies"} satisfied`, children: [meta.blocked ? (_jsx(Lock, { className: "w-2.5 h-2.5" })) : (_jsx(Link2, { className: "w-2.5 h-2.5" })), meta.blocked
+                                                ? `${meta.pendingDeps.length}/${task.dependsOn.length}`
+                                                : task.dependsOn.length] }))] }), (task.labels ?? []).includes("awaiting-intervention") && (_jsxs("div", { className: "mt-1 flex items-start gap-1 rounded border border-rose-500/50 bg-rose-500/10 px-1.5 py-1 text-[10px] text-rose-200", title: task.interventionReason ?? task.failureReason ?? "", onClick: (e) => e.stopPropagation(), children: [_jsx(AlertTriangle, { className: "w-3 h-3 mt-px shrink-0" }), _jsxs("span", { className: "min-w-0 flex-1 break-words line-clamp-3", children: [_jsx("span", { className: "font-medium", children: "awaiting intervention" }), task.interventionAt
+                                                ? ` (${formatRelative(task.interventionAt)})`
+                                                : "", (task.interventionReason ?? task.failureReason)
+                                                ? `: ${task.interventionReason ?? task.failureReason}`
+                                                : ""] }), _jsx("button", { type: "button", disabled: busy, onClick: (e) => {
+                                            e.stopPropagation();
+                                            void onPatch(task.id, {
+                                                labels: (task.labels ?? []).filter((l) => l !== "awaiting-intervention" && l !== "stalled"),
+                                                attempts: 0,
+                                                failureReason: null,
+                                                interventionReason: null,
+                                                interventionAt: null,
+                                            });
+                                        }, className: "shrink-0 rounded border border-rose-500/40 px-1 py-px text-[9.5px] font-medium text-rose-100 hover:bg-rose-500/20 disabled:opacity-50", children: "Retry" })] })), (task.labels ?? []).includes("stalled") && (_jsxs("div", { className: "mt-1 flex items-start gap-1 rounded border border-orange-500/40 bg-orange-500/5 px-1.5 py-1 text-[10px] text-orange-200", title: task.failureReason ?? "", onClick: (e) => e.stopPropagation(), children: [_jsx(AlertTriangle, { className: "w-3 h-3 mt-px shrink-0" }), _jsxs("span", { className: "min-w-0 flex-1 break-words line-clamp-3", children: ["stalled", (task.attempts ?? 0) > 0 ? ` after ${task.attempts} attempts` : "", task.failureReason ? `: ${task.failureReason}` : ""] }), _jsx("button", { type: "button", disabled: busy, onClick: (e) => {
+                                            e.stopPropagation();
+                                            void onPatch(task.id, {
+                                                labels: (task.labels ?? []).filter((l) => l !== "stalled"),
+                                                attempts: 0,
+                                                failureReason: null,
+                                            });
+                                        }, className: "shrink-0 rounded border border-orange-500/40 px-1 py-px text-[9.5px] font-medium text-orange-100 hover:bg-orange-500/15 disabled:opacity-50", children: "Retry" })] })), (task.labels ?? []).includes("draft") && (_jsxs("div", { className: "mt-1 flex items-center gap-1.5", onClick: (e) => e.stopPropagation(), children: [_jsx("span", { className: "inline-block rounded border border-yellow-500/40 bg-yellow-500/5 px-1.5 py-px text-[10px] text-yellow-200", children: "draft - pool will skip" }), _jsx("button", { type: "button", disabled: busy, onClick: (e) => {
+                                            e.stopPropagation();
+                                            void onPatch(task.id, {
+                                                labels: (task.labels ?? []).filter((l) => l !== "draft"),
+                                            });
+                                        }, className: "rounded border border-yellow-500/40 px-1 py-px text-[9.5px] font-medium text-yellow-100 hover:bg-yellow-500/15 disabled:opacity-50", children: "Publish" })] })), task.description && !expanded && (_jsx("div", { className: "text-[10.5px] text-gray-400 mt-0.5 line-clamp-2 whitespace-pre-line", children: task.description })), task.resultSummary && !expanded && (_jsxs("div", { className: `${compact ? "text-[10px]" : "text-[10.5px]"} text-emerald-300/80 mt-0.5 italic line-clamp-2 whitespace-pre-line`, children: ["\u2192 ", task.resultSummary] })), _jsxs("div", { className: "text-[9.5px] text-gray-500 mt-0.5 flex items-center gap-1", children: [_jsx(Clock, { className: "w-2.5 h-2.5" }), fmtRelative(task.endedAt ?? task.startedAt ?? task.createdAt)] })] }), hasMore && (_jsx(ChevronDown, { className: `w-3 h-3 mt-0.5 text-gray-500 shrink-0 transition-transform ${expanded ? "rotate-180" : ""}` })), busy && _jsx(Loader2, { className: "w-3 h-3 animate-spin text-gray-400" })] }), expanded && (_jsxs("div", { className: "px-2 pb-2 pt-0 border-t border-gray-800/60 space-y-1.5", onClick: (e) => e.stopPropagation(), children: [task.description && (_jsx(Section, { label: "Description", children: _jsx("div", { className: "text-[10.5px] text-gray-300 whitespace-pre-line break-words max-h-48 overflow-y-auto", children: task.description }) })), task.resultSummary && (_jsx(Section, { label: "Result", children: _jsxs("div", { className: "text-[10.5px] text-emerald-300/90 italic whitespace-pre-line break-words max-h-48 overflow-y-auto", children: ["\u2192 ", task.resultSummary] }) })), task.resultFiles.length > 0 && (_jsx(Section, { label: `Files (${task.resultFiles.length})`, children: _jsx("ul", { className: "space-y-0.5", children: task.resultFiles.map((p) => (_jsx("li", { children: _jsx(DeliveryFile, { path: p }) }, p))) }) })), meta.deps.length > 0 && (_jsx(Section, { label: "Depends on", children: _jsx("ul", { className: "space-y-0.5", children: meta.deps.map((d) => (_jsxs("li", { className: "text-[10px] flex items-center gap-1", children: [d.status === "done" ? (_jsx(CheckCircle2, { className: "w-2.5 h-2.5 text-emerald-400 shrink-0" })) : (_jsx(Lock, { className: "w-2.5 h-2.5 text-indigo-400 shrink-0" })), _jsx("span", { className: `truncate ${d.status === "done"
+                                            ? "text-gray-400 line-through"
+                                            : "text-indigo-200"}`, children: d.title }), _jsx("span", { className: "ml-auto text-[9px] text-gray-600 shrink-0", children: d.status.replace("_", " ") })] }, d.id))) }) })), _jsxs("div", { className: "grid grid-cols-2 gap-x-3 gap-y-0 text-[9.5px] text-gray-500 pt-1", children: [_jsxs("div", { children: ["Created", _jsx("span", { className: "text-gray-300", children: new Date(task.createdAt).toLocaleString() })] }), task.startedAt && (_jsxs("div", { children: ["Started", _jsx("span", { className: "text-gray-300", children: new Date(task.startedAt).toLocaleString() })] })), task.endedAt && (_jsxs("div", { children: ["Ended", _jsx("span", { className: "text-gray-300", children: new Date(task.endedAt).toLocaleString() })] }))] }), _jsx(ExecutionSection, { task: task })] }))] }));
+}
+/**
+ * Trigger row that opens the worker transcript in a full dialog.
+ *
+ * The card body is too narrow for a chat-style transcript, so we
+ * render a thin button on the expanded card and pop a modal when
+ * clicked. The modal owns the polling loop — closed cards do no
+ * background work.
+ */
+function ExecutionSection({ task }) {
+    const [open, setOpen] = useState(false);
+    const showButton = task.status === "in_progress" || Boolean(task.sessionId);
+    if (!showButton)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "pt-1", children: _jsxs("button", { type: "button", onClick: (e) => {
+                        e.stopPropagation();
+                        setOpen(true);
+                    }, className: "inline-flex items-center gap-1.5 rounded border border-gray-700 px-1.5 py-0.5 text-[10px] text-gray-300 hover:border-gray-500 hover:bg-gray-800", children: [_jsx(ScrollText, { className: "w-3 h-3" }), "View transcript", task.status === "in_progress" && (_jsxs("span", { className: "flex items-center gap-1 text-amber-300", children: [_jsx("span", { className: "w-1 h-1 rounded-full bg-amber-400 animate-pulse" }), "live"] }))] }) }), open && (_jsx(ExecutionDialog, { task: task, onClose: () => setOpen(false) }))] }));
+}
+/**
+ * Modal that renders the worker session transcript.
+ *
+ * Visual model lifted from packages/web's MessageBubble:
+ *   - role=user      → right-aligned brand-tinted card
+ *   - role=assistant → left-aligned dark card; tool calls render
+ *                      as collapsible chips below
+ *   - role=tool      → not shown directly — the result is folded
+ *                      back into its calling assistant turn
+ *
+ * While `task.status === "in_progress"` the dialog polls every 3s
+ * so the user can watch the LLM type. Stops on close or terminal
+ * status. Auto-scrolls to the bottom on new entries unless the
+ * user has scrolled away (so reading old messages doesn't yank).
+ */
+function ExecutionDialog({ task, onClose, }) {
+    const [entries, setEntries] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [sessionId, setSessionId] = useState(null);
+    const scrollRef = useRef(null);
+    const stickToBottomRef = useRef(true);
+    const fetchHistory = useCallback(async () => {
+        if (!task.id)
+            return;
+        setLoading(true);
+        try {
+            const data = await getJson(`${API_BASE}/tasks/${task.id}/history`);
+            setEntries(data.entries ?? []);
+            setSessionId(data.sessionId ?? null);
+            setError(null);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [task.id]);
+    useEffect(() => {
+        void fetchHistory();
+    }, [fetchHistory]);
+    // Tail while the task is running.
+    useEffect(() => {
+        if (task.status !== "in_progress")
+            return;
+        const t = setInterval(() => void fetchHistory(), 3000);
+        return () => clearInterval(t);
+    }, [task.status, fetchHistory]);
+    // Auto-scroll to bottom on new entries when user is at bottom.
+    useEffect(() => {
+        if (!stickToBottomRef.current)
+            return;
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        el.scrollTop = el.scrollHeight;
+    }, [entries]);
+    const onScroll = (e) => {
+        const el = e.currentTarget;
+        const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
+        stickToBottomRef.current = distance < 80;
+    };
+    const merged = useMemo(() => mergeAssistantToolResults(entries ?? []), [entries]);
+    // The card itself is `<li draggable>`, so anything we render
+    // INSIDE it inherits the drag intent — selecting text would
+    // grab the whole card. Portal the dialog to document.body so
+    // it sits next to the kanban column, not under it.
+    return createPortal(_jsx("div", { className: "fixed inset-0 z-40 flex items-center justify-center bg-black/60 p-4", onClick: (e) => {
+            e.stopPropagation();
+            onClose();
+        }, 
+        // Belt + braces: even portalled, an ancestor draggable
+        // boundary on document body wouldn't apply, but if a
+        // dragstart somehow bubbles up from inside the dialog we
+        // suppress it so text selection wins.
+        onDragStart: (e) => e.stopPropagation(), children: _jsxs("div", { onClick: (e) => e.stopPropagation(), draggable: false, className: "flex h-[80vh] w-full max-w-3xl flex-col overflow-hidden rounded-lg border border-gray-800 bg-gray-950 shadow-xl", children: [_jsxs("header", { className: "flex items-center gap-2 border-b border-gray-800 px-4 py-2.5", children: [_jsx(ScrollText, { className: "h-4 w-4 text-gray-500" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-medium text-gray-100", children: task.title }), _jsxs("div", { className: "flex items-center gap-2 text-[10px] text-gray-500", children: [_jsx("span", { children: "worker transcript" }), sessionId && (_jsxs("span", { className: "font-mono text-gray-600", children: ["\u00B7 ", sessionId] })), task.status === "in_progress" && (_jsxs("span", { className: "flex items-center gap-1 text-amber-300", children: ["\u00B7", _jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse" }), "tailing"] }))] })] }), _jsx("button", { type: "button", onClick: () => void fetchHistory(), disabled: loading, className: "rounded p-1 text-gray-400 hover:bg-gray-800 hover:text-gray-200 disabled:opacity-50", title: "Refresh", children: _jsx(RefreshCw, { className: `h-3.5 w-3.5 ${loading ? "animate-spin" : ""}` }) }), _jsx("button", { type: "button", onClick: onClose, className: "rounded p-1 text-gray-400 hover:bg-gray-800 hover:text-gray-100", children: _jsx(X, { className: "h-4 w-4" }) })] }), _jsxs("div", { ref: scrollRef, onScroll: onScroll, className: "flex-1 overflow-y-auto p-4 space-y-3", children: [error && (_jsx("div", { className: "rounded border border-rose-700/40 bg-rose-950/30 px-3 py-2 text-xs text-rose-200", children: error })), entries === null && loading && (_jsx("div", { className: "text-xs italic text-gray-500", children: "Loading\u2026" })), entries !== null && merged.length === 0 && !loading && (_jsx("div", { className: "text-xs italic text-gray-500", children: task.sessionId
+                                ? "No messages yet."
+                                : "Worker hasn't started yet." })), merged.map((row) => (_jsx(ExecutionTurn, { row: row }, row.id)))] })] }) }), document.body);
+}
+/**
+ * Walk the raw chronologically-ordered entries and merge tool
+ * results back into the assistant turn that called them. Mirrors
+ * `mergeToolTurns` in packages/web but works on our flat
+ * HistoryEntry shape. Tool rows themselves are dropped from the
+ * output — the result text lives on the call's chip.
+ */
+function mergeAssistantToolResults(entries) {
+    // Index tool results by callId once.
+    const resultByCallId = new Map();
+    for (const e of entries) {
+        if (e.role === "tool" && e.toolResult?.callId) {
+            resultByCallId.set(e.toolResult.callId, e.toolResult);
+        }
+    }
+    const out = [];
+    for (const e of entries) {
+        if (e.role === "tool")
+            continue;
+        const calls = (e.toolCalls ?? []).map((tc) => ({
+            call: tc,
+            result: resultByCallId.get(tc.callId),
+        }));
+        out.push({
+            id: e.id,
+            createdAt: e.createdAt,
+            role: e.role === "user" ? "user" : e.role === "assistant" ? "assistant" : "system",
+            text: e.text,
+            calls,
+        });
+    }
+    return out;
+}
+/** One assistant / user turn rendered MessageBubble-style. */
+function ExecutionTurn({ row }) {
+    const isUser = row.role === "user";
+    return (_jsx("div", { className: isUser ? "flex justify-end" : "flex justify-start", children: _jsxs("div", { className: `flex max-w-[85%] flex-col ${isUser ? "items-end" : "items-start"}`, children: [_jsxs("div", { className: "mb-1 flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-gray-500", children: [isUser ? (_jsx(User, { className: "h-3 w-3" })) : (_jsx(Bot, { className: "h-3 w-3 text-blue-400" })), _jsx("span", { children: isUser ? "you" : row.role }), _jsx("span", { className: "text-gray-700", children: "\u00B7" }), _jsx("span", { className: "text-gray-600", children: new Date(row.createdAt).toLocaleTimeString() })] }), row.text && (_jsx("div", { className: `whitespace-pre-line break-words rounded-lg border px-3 py-2 text-[13px] leading-relaxed ${isUser
+                        ? "border-brand-400/30 bg-brand-500/10 text-gray-100"
+                        : "border-gray-800 bg-gray-900/60 text-gray-100"}`, children: row.text })), row.calls.length > 0 && (_jsx("div", { className: `mt-1.5 flex flex-col gap-1 ${isUser ? "items-end" : "items-start"}`, children: row.calls.map((c, i) => (_jsx(ToolCallChip, { ...c }, c.call.callId || `c${i}`))) }))] }) }));
+}
+/** Collapsible tool-call chip; click to reveal the result body. */
+function ToolCallChip({ call, result, }) {
+    const [expanded, setExpanded] = useState(false);
+    const running = !result;
+    const isError = !!result && result.ok === false;
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("button", { type: "button", onClick: () => !running && setExpanded((v) => !v), className: `flex select-none items-center gap-1.5 py-0.5 text-xs ${running
+                    ? "cursor-default text-gray-500"
+                    : "cursor-pointer text-gray-500 hover:text-gray-300"}`, children: [running ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin text-amber-400" })) : isError ? (_jsx(XCircle, { className: "h-3 w-3 text-rose-400/70" })) : (_jsx(CheckCircle2, { className: "h-3 w-3 text-emerald-500/60" })), _jsx("code", { className: "font-mono text-[12px] text-blue-300", children: call.toolName }), _jsx("span", { className: "font-mono text-[11px] text-gray-600", children: summariseArgsJson(call.argsJson) }), running ? (_jsx("span", { className: "text-[11px] text-gray-600", children: "running\u2026" })) : expanded ? (_jsx(ChevronDown, { className: "h-3 w-3 text-gray-600" })) : (_jsx(ChevronRight, { className: "h-3 w-3 text-gray-600" }))] }), expanded && result && (_jsx("pre", { className: `mt-1 max-h-64 max-w-2xl overflow-auto whitespace-pre-wrap break-all rounded-md border px-3 py-2 text-[11px] ${isError
+                    ? "border-rose-700/40 bg-rose-950/30 text-rose-200"
+                    : "border-gray-800/60 bg-gray-900/60 text-gray-300"}`, children: truncateText(result.text || "(empty)", 4000) }))] }));
+}
+function summariseArgsJson(argsJson) {
+    if (!argsJson)
+        return "()";
+    let parsed;
+    try {
+        parsed = JSON.parse(argsJson);
+    }
+    catch {
+        // Not JSON — just truncate.
+        return argsJson.length > 60 ? `(${argsJson.slice(0, 57)}…)` : `(${argsJson})`;
+    }
+    if (!parsed || typeof parsed !== "object")
+        return `(${argsJson})`;
+    const obj = parsed;
+    const keys = Object.keys(obj);
+    if (keys.length === 0)
+        return "()";
+    return keys
+        .slice(0, 3)
+        .map((k) => `${k}=${shortVal(obj[k])}`)
+        .join(" ");
+}
+function shortVal(v) {
+    if (typeof v === "string")
+        return v.length > 40 ? `"${v.slice(0, 37)}…"` : `"${v}"`;
+    if (typeof v === "number" || typeof v === "boolean")
+        return String(v);
+    if (v == null)
+        return String(v);
+    return JSON.stringify(v).slice(0, 40);
+}
+function truncateText(s, max) {
+    if (s.length <= max)
+        return s;
+    return s.slice(0, max - 1) + "\n…(truncated)";
+}
+function Section({ label, children, }) {
+    return (_jsxs("div", { children: [_jsx("div", { className: "text-[9px] uppercase tracking-wide text-gray-500 mb-0.5", children: label }), children] }));
+}
+/** One row of the task's `resultFiles[]`. Renders the path as a
+ *  monospace chip; clicking opens the raw file in a new tab via
+ *  the files plugin's GET /raw endpoint. The path is whatever the
+ *  worker passed to task_complete — typically a workspace-rooted
+ *  path like `/projects/<slug>/foo.py` or a `workspace:///...`
+ *  URI. We strip the URI prefix before handing it to the API.
+ *  Files outside the user's workspace will 404 from the raw
+ *  endpoint; we don't pre-validate here. */
+function DeliveryFile({ path }) {
+    const open = useOpenFile();
+    const stripped = path.replace(/^workspace:\/\/+/, "/");
+    // Display the basename in the chip and the full path in the
+    // tooltip so the row stays compact on small cards.
+    const display = stripped.split("/").filter(Boolean).pop() || stripped;
+    return (_jsxs("button", { type: "button", onClick: (e) => {
+            e.stopPropagation();
+            open(stripped);
+        }, className: "inline-flex items-center gap-1 max-w-full text-[10.5px] font-mono text-emerald-300 hover:text-emerald-200 hover:underline truncate", title: stripped, children: [_jsx(FileText, { className: "w-3 h-3 shrink-0 opacity-70" }), _jsx("span", { className: "truncate", children: display })] }));
+}
+function nextStatus(status) {
+    if (status === "ready")
+        return "in_progress";
+    if (status === "in_progress")
+        return "done";
+    return null;
+}
+/** Worker roles the UI hints at. v0.2 only ships `echo`; the four
+ *  ADR-0002 roles are listed so the autocomplete is ready when the
+ *  follow-up PRs land them. */
+const KNOWN_WORKER_ROLES = [
+    "echo",
+    "qianliyan",
+    "luban",
+    "xihe",
+    "nvwa",
+];
+function AddTaskRow({ projects, workerRoles, allTasks, onSubmit, onCancel, }) {
+    const [title, setTitle] = useState("");
+    const [description, setDescription] = useState("");
+    const [project, setProject] = useState("");
+    const [priority, setPriority] = useState(0);
+    const [workerRole, setWorkerRole] = useState("");
+    const [dependsOn, setDependsOn] = useState([]);
+    const [showMore, setShowMore] = useState(false);
+    const inputRef = useRef(null);
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+    const submit = () => {
+        const t = title.trim();
+        if (!t) {
+            onCancel();
+            return;
+        }
+        onSubmit({
+            title: t,
+            description: description.trim() || undefined,
+            project: project.trim() || undefined,
+            priority: priority || undefined,
+            workerRole: workerRole.trim() || undefined,
+            dependsOn: dependsOn.length > 0 ? dependsOn : undefined,
+        });
+    };
+    return (_jsxs("li", { className: "rounded border border-blue-500/50 bg-gray-900/70 p-1.5 space-y-1", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("input", { ref: inputRef, value: title, onChange: (e) => setTitle(e.target.value), onKeyDown: (e) => {
+                            if (e.nativeEvent.isComposing || e.keyCode === 229)
+                                return;
+                            if (e.key === "Enter" && !e.shiftKey) {
+                                e.preventDefault();
+                                submit();
+                            }
+                            else if (e.key === "Escape") {
+                                onCancel();
+                            }
+                        }, placeholder: "Task title...", className: "flex-1 min-w-0 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-[11.5px] text-gray-100 outline-none focus:border-blue-500" }), _jsx("button", { type: "button", title: showMore ? "Less" : "More fields", onClick: () => setShowMore((v) => !v), className: "p-0.5 text-gray-500 hover:text-gray-200", children: _jsx(ChevronDown, { className: `w-3 h-3 transition-transform ${showMore ? "rotate-180" : ""}` }) }), _jsx("button", { type: "button", onClick: onCancel, className: "p-0.5 text-gray-500 hover:text-gray-200", title: "Cancel", children: _jsx(X, { className: "w-3 h-3" }) })] }), showMore && (_jsxs("div", { className: "space-y-2 pt-0.5", children: [_jsx(FieldRow, { label: "Description", children: _jsx("textarea", { value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Optional notes for the worker...", rows: 2, className: "w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-[11px] text-gray-100 outline-none focus:border-blue-500 resize-y" }) }), _jsx(FieldRow, { label: "Project", children: _jsx("input", { list: "workboard-add-projects", value: project, onChange: (e) => setProject(e.target.value), placeholder: "inbox", className: "w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-[11px] text-gray-100 outline-none focus:border-blue-500" }) }), _jsxs("div", { className: "grid grid-cols-[1fr_72px] gap-2", children: [_jsx(FieldRow, { label: "Worker", children: _jsx("input", { list: "workboard-add-roles", value: workerRole, onChange: (e) => setWorkerRole(e.target.value), placeholder: "any", className: "w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-[11px] text-gray-100 outline-none focus:border-blue-500" }) }), _jsx(FieldRow, { label: "Priority", children: _jsx("input", { type: "number", value: priority, onChange: (e) => setPriority(Number(e.target.value) || 0), className: "w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-[11px] text-gray-100 outline-none focus:border-blue-500" }) })] }), _jsx(FieldRow, { label: "Depends on", children: _jsx(DependencyPicker, { value: dependsOn, onChange: setDependsOn, candidates: allTasks, project: project }) }), _jsx("datalist", { id: "workboard-add-roles", children: workerRoles.map((r) => (_jsx("option", { value: r }, r))) }), _jsx("datalist", { id: "workboard-add-projects", children: projects.map((p) => (_jsx("option", { value: p.project }, p.project))) })] })), _jsxs("div", { className: "flex items-center gap-1 pt-1", children: [_jsx("span", { className: "text-[9.5px] text-gray-600 truncate", children: showMore ? "Enter saves" : "Enter · Esc cancel" }), _jsx("button", { type: "button", onClick: submit, disabled: !title.trim(), className: "ml-auto px-2.5 py-0.5 text-[10.5px] rounded bg-blue-700 hover:bg-blue-600 text-white disabled:opacity-50 disabled:cursor-not-allowed", children: "Add" })] })] }));
+}
+function FieldRow({ label, children, }) {
+    return (_jsxs("label", { className: "block", children: [_jsx("span", { className: "block text-[9px] uppercase tracking-wide text-gray-500 mb-0.5", children: label }), children] }));
+}
+// ─── Dependency picker ───────────────────────────────────────
+//
+// Multi-select tag chips. Candidates are filtered to the same
+// project (when set) so the user doesn't have to scroll past every
+// task they own. Picking a candidate adds a chip; clicking the chip
+// removes it. The blank "select..." option in the dropdown is the
+// affordance for adding more.
+function DependencyPicker({ value, onChange, candidates, project, excludeId, }) {
+    const candidateMap = useMemo(() => new Map(candidates.map((t) => [t.id, t])), [candidates]);
+    const filtered = useMemo(() => {
+        const norm = (project ?? "").trim();
+        return candidates.filter((t) => {
+            if (t.id === excludeId)
+                return false;
+            if (value.includes(t.id))
+                return false;
+            if (!norm)
+                return true;
+            if (norm === PROJECT_INBOX_KEY)
+                return !t.project || t.project === PROJECT_INBOX_KEY;
+            return t.project === norm;
+        });
+    }, [candidates, project, value, excludeId]);
+    const remove = (id) => onChange(value.filter((x) => x !== id));
+    const add = (id) => {
+        if (!id || value.includes(id))
+            return;
+        onChange([...value, id]);
+    };
+    return (_jsxs("div", { className: "space-y-1", children: [value.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1", children: value.map((id) => {
+                    const t = candidateMap.get(id);
+                    const label = t
+                        ? t.title
+                        : `${id.slice(0, 6)}... (deleted)`;
+                    const done = t?.status === "done";
+                    return (_jsxs("span", { className: `inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded border ${done
+                            ? "text-emerald-200 bg-emerald-500/10 border-emerald-500/30"
+                            : "text-indigo-200 bg-indigo-500/15 border-indigo-500/40"}`, title: t ? `${t.status} · ${t.id}` : id, children: [done ? (_jsx(CheckCircle2, { className: "w-2.5 h-2.5" })) : (_jsx(Lock, { className: "w-2.5 h-2.5" })), _jsx("span", { className: "truncate max-w-[140px]", children: label }), _jsx("button", { type: "button", onClick: () => remove(id), className: "text-gray-400 hover:text-gray-100", title: "Remove", children: _jsx(X, { className: "w-2.5 h-2.5" }) })] }, id));
+                }) })), _jsxs("select", { value: "", onChange: (e) => {
+                    if (e.target.value) {
+                        add(e.target.value);
+                        // Reset the select so the same option can be re-picked
+                        // after a remove without page-state weirdness.
+                        e.target.value = "";
+                    }
+                }, className: "w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-[11px] text-gray-100 outline-none focus:border-blue-500", children: [_jsx("option", { value: "", children: filtered.length === 0
+                            ? value.length === 0
+                                ? "(no other tasks)"
+                                : "(no more candidates)"
+                            : "Add prerequisite..." }), filtered.map((t) => (_jsxs("option", { value: t.id, children: ["[", t.status, "] ", t.title] }, t.id)))] })] }));
+}
+// ─── Project chips strip ─────────────────────────────────────────
+function ProjectChips({ chips, active, onPick, showAll, rightExtras, }) {
+    return (_jsxs("div", { className: "flex items-center gap-1 px-2 py-1.5 border-b border-gray-800 bg-gray-950/40 overflow-x-auto scrollbar-none flex-shrink-0", children: [showAll && (_jsx(Chip, { active: !active, label: "All", count: chips.reduce((n, c) => n + c.count, 0), onClick: () => onPick("") })), chips.map((p) => (_jsx(Chip, { active: active === p.key, label: p.label, count: p.count, onClick: () => onPick(active === p.key ? "" : p.key) }, p.key || "all"))), rightExtras] }));
+}
+function Chip({ active, label, count, onClick, }) {
+    return (_jsxs("button", { onClick: onClick, className: [
+            "shrink-0 inline-flex items-center gap-1 rounded-full text-[11px] transition-colors px-2.5 py-0.5",
+            active
+                ? "bg-blue-500/20 border border-blue-400/50 text-blue-200"
+                : "text-gray-400 hover:text-gray-200 hover:bg-gray-800/60 border border-transparent",
+        ].join(" "), children: [_jsx("span", { children: label }), _jsx("span", { className: active ? "text-blue-300/80" : "text-gray-600", children: count })] }));
+}
+function WorkerStatusRow({ snapshot, onNudge, }) {
+    if (!snapshot) {
+        return (_jsx("div", { className: "px-6 py-1.5 border-b border-gray-800 text-[11px] text-gray-500 flex-shrink-0", children: "Workers: loading..." }));
+    }
+    return (_jsxs("div", { className: "px-6 py-1.5 border-b border-gray-800 text-[11px] flex items-center gap-2 text-gray-300 flex-wrap flex-shrink-0", children: [_jsx(Hammer, { className: "w-3 h-3 text-gray-500" }), _jsx("span", { className: "text-gray-500", children: "Worker types:" }), snapshot.workers.map((w) => (_jsxs("span", { title: `Type: ${w.kind}\nAgent: ${w.name}`, className: `inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] border font-mono uppercase tracking-wide ${w.busy
+                    ? "bg-blue-900/40 border-blue-700 text-blue-100"
+                    : "bg-gray-900 border-gray-700 text-gray-400"}`, children: [w.busy ? (_jsx(Loader2, { className: "w-2.5 h-2.5 animate-spin" })) : (_jsx(CheckCircle2, { className: "w-2.5 h-2.5" })), w.kind] }, w.agentId))), snapshot.running.length > 0 && (_jsxs("span", { className: "text-gray-500", children: ["running ", snapshot.running.length, " task", snapshot.running.length === 1 ? "" : "s"] })), _jsx("button", { type: "button", onClick: onNudge, className: "ml-auto text-[10px] uppercase tracking-wide text-gray-400 hover:text-gray-100", children: "Nudge pool" })] }));
+}
+// ─── Modal: full task editor (admin only) ────────────────────────
+function TaskModal({ task, allTasks, busy, onClose, onPatch, onDelete, }) {
+    const [title, setTitle] = useState(task.title);
+    const [description, setDescription] = useState(task.description || "");
+    const [project, setProject] = useState(task.project || "");
+    const [priority, setPriority] = useState(task.priority);
+    const [workerRole, setWorkerRole] = useState(task.workerRole || "");
+    const [dependsOn, setDependsOn] = useState(task.dependsOn ?? []);
+    // Re-sync local form state when the parent reloads with fresh data.
+    useEffect(() => {
+        setTitle(task.title);
+        setDescription(task.description || "");
+        setProject(task.project || "");
+        setPriority(task.priority);
+        setWorkerRole(task.workerRole || "");
+        setDependsOn(task.dependsOn ?? []);
+    }, [
+        task.id,
+        task.title,
+        task.description,
+        task.project,
+        task.priority,
+        task.workerRole,
+        task.dependsOn,
+    ]);
+    const allStatuses = ["ready", "in_progress", "done"];
+    const save = async () => {
+        await onPatch({
+            title,
+            description: description || null,
+            project: project || PROJECT_INBOX_KEY,
+            priority,
+            workerRole: workerRole.trim() || null,
+            dependsOn,
+        });
+    };
+    return (_jsx("div", { className: "fixed inset-0 bg-black/60 z-40 flex items-center justify-center p-4", onClick: onClose, children: _jsxs("div", { onClick: (e) => e.stopPropagation(), className: "w-full max-w-xl bg-gray-950 border border-gray-800 rounded-lg shadow-xl flex flex-col max-h-[80vh] overflow-hidden", children: [_jsxs("header", { className: "px-4 py-3 border-b border-gray-800 flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-[10px] uppercase text-gray-500 tracking-wide", children: "Task" }), _jsx("span", { className: "text-[10px] text-gray-600 font-mono truncate", children: task.id }), _jsx("button", { type: "button", onClick: onClose, className: "ml-auto p-1 rounded text-gray-400 hover:text-gray-100 hover:bg-gray-800", children: _jsx(X, { className: "w-4 h-4" }) })] }), task.sandboxName && (_jsxs("div", { className: "flex items-center gap-1.5", title: "Microsandbox VM bound to this task. Running while the worker is active, stopped after release (disk preserved), removed when the task is deleted.", children: [_jsx("span", { className: "text-[10px] uppercase text-gray-500 tracking-wide", children: "Sandbox" }), _jsx("code", { className: "text-[10px] text-gray-500 font-mono truncate cursor-pointer hover:text-gray-300", onClick: (e) => {
+                                        if (!task.sandboxName)
+                                            return;
+                                        void navigator.clipboard
+                                            ?.writeText(task.sandboxName)
+                                            .catch(() => { });
+                                        // Brief visual ack: bump opacity via title swap.
+                                        const t = e.currentTarget;
+                                        const orig = t.title;
+                                        t.title = "copied";
+                                        setTimeout(() => {
+                                            t.title = orig;
+                                        }, 800);
+                                    }, title: "Click to copy", children: task.sandboxName })] }))] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-3 text-xs", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-[10px] uppercase tracking-wide text-gray-500 mb-1", children: "Title" }), _jsx("input", { value: title, onChange: (e) => setTitle(e.target.value), className: "w-full px-2 py-1.5 bg-gray-900 border border-gray-700 rounded outline-none focus:border-blue-600" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[10px] uppercase tracking-wide text-gray-500 mb-1", children: "Description" }), _jsx("textarea", { value: description, onChange: (e) => setDescription(e.target.value), rows: 4, className: "w-full px-2 py-1.5 bg-gray-900 border border-gray-700 rounded outline-none focus:border-blue-600 resize-y" })] }), _jsxs("div", { className: "grid grid-cols-3 gap-2", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-[10px] uppercase tracking-wide text-gray-500 mb-1", children: "Project" }), _jsx("input", { value: project, onChange: (e) => setProject(e.target.value), placeholder: PROJECT_INBOX_KEY, className: "w-full px-2 py-1.5 bg-gray-900 border border-gray-700 rounded outline-none focus:border-blue-600" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[10px] uppercase tracking-wide text-gray-500 mb-1", children: "Priority" }), _jsx("input", { type: "number", value: priority, onChange: (e) => setPriority(Number(e.target.value) || 0), className: "w-full px-2 py-1.5 bg-gray-900 border border-gray-700 rounded outline-none focus:border-blue-600" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[10px] uppercase tracking-wide text-gray-500 mb-1", children: "Worker role" }), _jsx("input", { value: workerRole, onChange: (e) => setWorkerRole(e.target.value), placeholder: "any", className: "w-full px-2 py-1.5 bg-gray-900 border border-gray-700 rounded outline-none focus:border-blue-600" })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[10px] uppercase tracking-wide text-gray-500 mb-1", children: "Status" }), _jsx("div", { className: "flex flex-wrap gap-1", children: allStatuses.map((s) => (_jsx("button", { type: "button", disabled: busy || s === task.status, onClick: () => void onPatch({ status: s }), className: `text-[10px] px-2 py-1 rounded border ${s === task.status
+                                            ? "bg-blue-700/40 border-blue-600 text-blue-100 cursor-default"
+                                            : "border-gray-700 text-gray-400 hover:bg-gray-800 hover:text-gray-100"} disabled:cursor-not-allowed`, children: s.replace("_", " ") }, s))) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[10px] uppercase tracking-wide text-gray-500 mb-1", children: "Depends on" }), _jsx(DependencyPicker, { value: dependsOn, onChange: setDependsOn, candidates: allTasks, project: project, excludeId: task.id })] }), task.resultSummary && (_jsxs("div", { children: [_jsx("label", { className: "block text-[10px] uppercase tracking-wide text-gray-500 mb-1", children: "Result" }), _jsx("div", { className: "bg-gray-900 border border-gray-800 rounded px-2 py-1.5 text-emerald-200 italic whitespace-pre-line", children: task.resultSummary })] })), _jsxs("div", { className: "grid grid-cols-3 gap-2 text-[10px] text-gray-500 border-t border-gray-800 pt-2", children: [_jsxs("div", { children: ["Created", _jsx("div", { className: "text-gray-300", children: new Date(task.createdAt).toLocaleString() })] }), task.startedAt && (_jsxs("div", { children: ["Started", _jsx("div", { className: "text-gray-300", children: new Date(task.startedAt).toLocaleString() })] })), task.endedAt && (_jsxs("div", { children: ["Ended", _jsx("div", { className: "text-gray-300", children: new Date(task.endedAt).toLocaleString() })] }))] })] }), _jsxs("footer", { className: "px-4 py-3 border-t border-gray-800 flex items-center gap-2", children: [_jsxs("button", { type: "button", disabled: busy, onClick: () => {
+                                if (window.confirm(`Delete task "${task.title}"? This is permanent.`)) {
+                                    void onDelete();
+                                }
+                            }, className: "inline-flex items-center gap-1 px-2 py-1 text-[11px] rounded border border-red-800 text-red-200 hover:bg-red-900/30 disabled:opacity-50", children: [_jsx(Trash2, { className: "w-3 h-3" }), " Delete"] }), _jsx("button", { type: "button", onClick: onClose, className: "ml-auto px-3 py-1 text-[11px] rounded border border-gray-700 text-gray-300 hover:bg-gray-800", children: "Cancel" }), _jsx("button", { type: "button", onClick: () => void save(), disabled: busy, className: "px-3 py-1 text-[11px] rounded bg-blue-700 hover:bg-blue-600 text-white disabled:opacity-50", children: busy ? _jsx(Loader2, { className: "w-3.5 h-3.5 animate-spin" }) : "Save" })] })] }) }));
+}
+// `WorkboardAdminPage` is intentionally not in `components` - the
+// manifest's `adminPages` contribution was removed; resurrect it by
+// re-adding both at the same time.
+void WorkboardAdminPage;
+// ─── Sidebar Workers section ──────────────────────────────
+//
+// Renders the workers contributed by THIS plugin in the host
+// sidebar. v0.2 only ships the `echo` worker; future ADR-0002
+// roles (qianliyan / luban / xihe / nvwa) ship as their own
+// plugins and will append their own rows by claiming the same
+// `sidebarSections.after = "workers"` anchor.
+//
+// The header and the row chrome live here too; the host
+// `PluginSidebarSections` will stack rendered sections in order, so
+// only the FIRST plugin's section paints the "Workers" header.
+// (When more plugins arrive we will probably move the header into
+// host code; for now keeping it here keeps the contract visible.)
+function WorkersSidebarSection(_props) {
+    const [snapshot, setSnapshot] = useState(null);
+    const reload = useCallback(async () => {
+        try {
+            const r = await getJson(`${API_BASE}/workers/status`);
+            setSnapshot(r);
+        }
+        catch {
+            setSnapshot(null);
+        }
+    }, []);
+    useEffect(() => {
+        void reload();
+        const id = window.setInterval(() => void reload(), 5000);
+        return () => window.clearInterval(id);
+    }, [reload]);
+    const realWorkers = snapshot?.workers ?? [];
+    const busyCount = realWorkers.filter((w) => w.busy).length;
+    return (_jsxs("div", { className: "px-3 py-2", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(Zap, { size: 14, className: "flex-shrink-0 text-gray-600" }), _jsx("span", { className: "flex-1 text-sm font-medium text-gray-300", children: "Workers" }), _jsxs("span", { className: "rounded bg-gray-800 px-1.5 py-0.5 text-[9px] text-gray-600", children: [busyCount, "/", realWorkers.length, " busy"] })] }), _jsx("div", { className: "space-y-1.5", children: realWorkers.length === 0 ? (_jsx("div", { className: "text-[10px] text-gray-600 px-1", children: "No workers running. Toggle echo on under Settings \u2192 Plugins \u2192 Workboard." })) : (realWorkers.map((w) => (_jsx(SidebarWorkerRow, { name: w.name, kind: w.kind, busy: w.busy }, w.agentId)))) })] }));
+}
+function SidebarWorkerRow({ name, kind, busy, }) {
+    // The agent's display name (set in Settings → Plugins → Worker
+    // agents) is the primary identity - the user wants to know which
+    // configured instance this is at a glance. The worker *kind*
+    // (echo / llm / future ADR-0002 roles) is shown as a small
+    // secondary tag so two agents of the same kind stay
+    // distinguishable without making the kind dominate the row.
+    const emoji = kindEmoji(kind);
+    return (_jsxs("div", { className: "flex cursor-default items-center gap-2 rounded py-0.5 pl-1 hover:bg-gray-700/30", title: `Agent: ${name}\nWorker type: ${kind}`, children: [_jsx("span", { className: "w-5 flex-shrink-0 text-center text-base", children: emoji }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-xs font-medium text-gray-200", children: name }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "truncate rounded bg-gray-800/80 px-1 py-px font-mono text-[9px] font-semibold uppercase tracking-wide text-gray-400", children: kind }), _jsx("span", { className: `rounded px-1 py-px text-[9px] ${busy
+                                    ? "bg-blue-900/40 text-blue-100 border border-blue-700"
+                                    : "bg-gray-800/60 text-gray-600"}`, children: busy ? "busy" : "idle" })] })] })] }));
+}
+function kindEmoji(kind) {
+    if (kind === "echo")
+        return "🔁";
+    return "⚙️";
+}
+/** Compact "5m ago" / "2h ago" / "3d ago" rendering for an ms
+ *  timestamp. Used by the awaiting-intervention chip so the
+ *  operator sees how long the task has been parked at a glance.
+ *  We deliberately avoid `Intl.RelativeTimeFormat` because its
+ *  output ("5 minutes ago") is too verbose for a chip. */
+function formatRelative(ms) {
+    const delta = Math.max(0, Date.now() - ms);
+    const sec = Math.round(delta / 1000);
+    if (sec < 60)
+        return `${sec}s ago`;
+    const min = Math.round(sec / 60);
+    if (min < 60)
+        return `${min}m ago`;
+    const hr = Math.round(min / 60);
+    if (hr < 24)
+        return `${hr}h ago`;
+    const day = Math.round(hr / 24);
+    return `${day}d ago`;
+}
+const clientExports = {
+    components: {
+        WorkboardPanel: WorkboardPanel,
+        WorkersSidebarSection: WorkersSidebarSection,
+        WorkerAgentsPage: WorkerAgentsPage,
+    },
+};
+export const components = clientExports.components;
+export default clientExports;
+//# sourceMappingURL=client.js.map