@loomhelm/multi-task-flow 0.0.0-stage → 0.2.6

package/toolkit/skills/multi-task-flow/web/atomic-graph-view.tsx

@@ -0,0 +1,158 @@
+import React, { memo, useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { BaseEdge, EdgeLabelRenderer, Handle, MarkerType, Position, ReactFlow, type Edge, type EdgeProps, type Node, type NodeProps, type ReactFlowInstance } from "@xyflow/react";
+import type { AtomicEdge, AtomicNode } from "../lib/atomic-orchestration";
+import { layoutProjection, type Direction, type GraphLayout } from "./graph-layout";
+import { accessibleNodeLabel, highlightAccessibleSelection, renderAccessibleNodes, type GraphContext } from "./graph";
+import { projectAtomicGraph } from "./graph-projection";
+import type { GraphProjection, GraphProjectionNode } from "./graph-projection";
+
+type AtomicCardData = { title: string; kind: string; state: string; scope: string; color: string; direction: Direction; nodeId: string; taskId: string | null; evidence: string[]; blocker: string | null; acceptanceCount: number };
+
+const AtomicCard = memo(function AtomicCard({ data }: NodeProps) {
+  const value = data as unknown as AtomicCardData;
+  return <div className="dependency-card atomic-dependency-card" data-context-kind={value.taskId ? "task" : undefined} data-context-id={value.taskId ?? value.nodeId}>
+    <div className="dependency-card-meta"><span>{value.kind}</span><span>{value.state}</span></div>
+    <div className="dependency-card-title">{value.title}</div>
+    <div className="atomic-dependency-scope">{value.scope}</div>
+    <div className="atomic-dependency-facts">验收 {value.acceptanceCount} · 证据 {value.evidence.length}{value.blocker ? ` · 阻塞：${value.blocker}` : ""}</div>
+    <Handle id="source" type="source" position={value.direction === "DOWN" ? Position.Bottom : Position.Right} />
+    <Handle id="target" type="target" position={value.direction === "DOWN" ? Position.Top : Position.Left} />
+  </div>;
+});
+
+const AtomicRoutedEdge = memo(function AtomicRoutedEdge(props: EdgeProps) {
+  const label = String(props.data?.requires ?? "");
+  return <><BaseEdge id={props.id} path={String(props.data?.path ?? "")} markerEnd={props.markerEnd} style={props.style} interactionWidth={16} />{label ? <EdgeLabelRenderer><div className="atomic-dependency-edge-label" style={{ transform: `translate(-50%, -50%) translate(${props.labelX}px,${props.labelY}px)` }}>{label}</div></EdgeLabelRenderer> : null}</>;
+});
+
+const nodeTypes = { card: AtomicCard };
+const edgeTypes = { routed: AtomicRoutedEdge };
+
+function atomicProjection(nodes: readonly AtomicNode[], edges: readonly AtomicEdge[]): GraphProjection {
+  const projected = projectAtomicGraph(nodes, edges);
+  const projectionNodes: GraphProjectionNode[] = projected.nodes.map((node) => {
+    const source = nodes.find((candidate) => candidate.id === node.id);
+    const scope = source?.kind === "work" || source?.kind === "milestone" ? source.scope : undefined;
+    const taskId = scope?.kind === "task" ? scope.task_id : null;
+    const nodeKind = source?.kind === "milestone" ? "milestone" : taskId ? "task" : "other";
+    return {
+      id: node.id,
+      parentId: null,
+      nodeKind,
+      sourceNodeId: node.id,
+      refId: nodeKind === "task" ? taskId : nodeKind === "milestone" ? node.id : null,
+      groupId: scope?.kind === "task" ? scope.delivery_unit_id : scope?.kind === "delivery_unit" ? scope.delivery_unit_id : null,
+      plannedGroupId: scope?.kind === "task" ? scope.delivery_unit_id : scope?.kind === "delivery_unit" ? scope.delivery_unit_id : null,
+      taskKind: source?.kind === "work" ? source.activity_type : null,
+      state: node.status,
+      stateLabel: node.status,
+      stateIcon: null,
+      title: node.title,
+      graphLabel: node.title,
+      fullLabel: `${node.kind}：${node.title}；范围：${node.scope}；状态：${node.status}；验收条件：${node.acceptance_count}；证据：${node.evidence.length}${node.blocker ? `；阻塞：${node.blocker}` : ""}`,
+      evidence: node.evidence,
+      blocker: node.blocker,
+      acceptance_count: node.acceptance_count,
+    };
+  });
+  const projectionEdges = projected.edges.map((edge) => ({
+    id: edge.id,
+    source: edge.source,
+    target: edge.target,
+    crossGroup: "no" as const,
+    paths: [{ requires: [edge.requires], sourceEdgeIds: [edge.id], boundaryNodeIds: [] }],
+  }));
+  return { nodes: projectionNodes, edges: projectionEdges, boundaryDependencies: [], warnings: [] };
+}
+
+export function createAtomicGraphController(context: GraphContext) {
+  const container = context.element("atomic-graph");
+  const root = createRoot(container);
+  let projection: GraphProjection | null = null;
+  let layout: GraphLayout | null = null;
+  let instance: ReactFlowInstance | null = null;
+  let direction: Direction = "RIGHT";
+  let generation = 0;
+  let pending = false;
+  let signature = "";
+  let latestNodes: readonly AtomicNode[] = [];
+  let latestEdges: readonly AtomicEdge[] = [];
+  let update: (() => void) | null = null;
+
+  function Surface() {
+    const [, refresh] = useState(0);
+    useEffect(() => { update = () => refresh((value) => value + 1); return () => { update = null; }; }, []);
+    const selected = context.getSelected();
+    const nodes: Node[] = (layout?.nodes ?? []).map((placed) => {
+      const node = placed.node;
+      const taskId = node.nodeKind === "task" ? node.refId : null;
+      return {
+        id: node.id,
+        type: "card",
+        position: { x: placed.x, y: placed.y },
+        width: placed.width,
+        height: placed.height,
+        draggable: false,
+        selectable: true,
+        selected: taskId ? selected.task === taskId : node.nodeKind === "milestone" && selected.milestone === node.id,
+        style: { width: placed.width, height: placed.height },
+        data: {
+          title: node.title,
+          kind: node.nodeKind === "milestone" ? "里程碑" : "原子任务",
+          state: node.stateLabel ?? "",
+          scope: node.groupId ? `交付单元 ${node.groupId}` : "设计阶段",
+          color: node.state ? context.stateColor(node.state) : context.css("--accent", "#5889c4"),
+          direction,
+          nodeId: node.id,
+          taskId,
+          evidence: node.evidence ?? [],
+          blocker: node.blocker ?? null,
+          acceptanceCount: node.acceptance_count ?? 0,
+        },
+      };
+    });
+    const edges: Edge[] = (layout?.edges ?? []).map((edge) => ({
+      id: edge.id,
+      source: edge.source,
+      target: edge.target,
+      type: "routed",
+      sourceHandle: "source",
+      targetHandle: "target",
+      data: { path: edge.path, requires: edge.paths.flatMap((path) => path.requires).join("、") },
+      markerEnd: { type: MarkerType.ArrowClosed, width: 16, height: 16, color: context.css("--muted", "#789096") },
+      style: { stroke: context.css("--muted", "#789096"), strokeWidth: 1.5 },
+    }));
+    return <>
+      <div className="dependency-layout-tools"><span>原子任务 → 后续原子任务 · 条件连线</span><label>排列方向 <select value={direction} onChange={(event) => { direction = event.target.value as Direction; signature = ""; render(latestNodes, latestEdges); }}><option value="DOWN">从上到下</option><option value="RIGHT">从左到右</option></select></label><button onClick={() => { instance?.setViewport({ x: 24, y: 24, zoom: 1 }); context.setZoom(1); }}>100% 阅读</button></div>
+      <ReactFlow className="atomic-react-flow" nodes={nodes} edges={edges} nodeTypes={nodeTypes} edgeTypes={edgeTypes} onInit={(value) => { instance = value; }} deleteKeyCode={null} nodesConnectable={false} nodesDraggable={false} elementsSelectable zoomOnScroll={false} zoomOnPinch panOnScroll panOnDrag preventScrolling={false} minZoom={0.15} maxZoom={2.5} onMoveEnd={(_, value) => context.setZoom(Math.round(value.zoom * 100) / 100)} onNodeClick={(_, node) => { const item = projection?.nodes.find((candidate) => candidate.id === node.id); if (!item) return; if (item.nodeKind === "task" && item.refId) context.selectTask(item.refId); else if (item.nodeKind === "milestone") context.selectMilestone(item.id); }} onNodeMouseEnter={(event, node) => { const item = projection?.nodes.find((candidate) => candidate.id === node.id); const view = context.getData(); if (!item?.refId || item.nodeKind !== "task" || !view) return; const task = view.tasks.find((candidate) => candidate.id === item.refId); if (task) context.showHoverPreview(context.taskPreview(task), (event.currentTarget as HTMLElement).getBoundingClientRect()); }} onNodeMouseLeave={context.hideHoverPreview} proOptions={{ hideAttribution: false }} />
+      {pending ? <span className="dependency-layout-pending" role="status">正在计算布局…</span> : null}
+    </>;
+  }
+
+  root.render(<Surface />);
+
+  function render(nodes: readonly AtomicNode[], edges: readonly AtomicEdge[]) {
+    latestNodes = nodes;
+    latestEdges = edges;
+    projection = atomicProjection(nodes, edges);
+    renderAccessibleNodes(projection, context);
+    const key = JSON.stringify([direction, projection.nodes.map((node) => [node.id, node.title]), projection.edges.map((edge) => [edge.id, edge.source, edge.target])]);
+    if (key === signature) { highlightAccessibleSelection(projection, context); update?.(); return; }
+    signature = key;
+    const serial = ++generation;
+    pending = true;
+    update?.();
+    layoutProjection(projection, direction).then((result) => {
+      if (serial !== generation) return;
+      layout = result;
+      pending = false;
+      container.style.height = `${Math.max(420, result.height + 80)}px`;
+      update?.();
+      requestAnimationFrame(() => { if (serial !== generation) return; instance?.setViewport({ x: Math.max(24, (container.clientWidth - result.width) / 2), y: 24, zoom: 1 }); context.setZoom(1); highlightAccessibleSelection(projection, context); });
+    }).catch(() => { if (serial !== generation) return; pending = false; update?.(); });
+  }
+
+  function highlightSelection() { highlightAccessibleSelection(projection, context); update?.(); }
+  return { render, highlightSelection, zoomIn: () => instance?.zoomIn(), zoomOut: () => instance?.zoomOut(), fit: () => instance?.fitView({ padding: 0.08 }) };
+}

package/toolkit/skills/multi-task-flow/web/cards.ts

@@ -0,0 +1,268 @@
+import { hasConversationControl, renderConversationControl, type ArchiveAction } from "./conversation-control";
+import { bindPRStatus } from "./pr-status";
+import { attachResourcePopover, closeResourcePopover, type ResourceSource } from "./resource-popover";
+import { initialOutput } from "./agent-output";
+import { conversationUrl } from "./links";
+import { formatDuration } from "./time";
+import { groupExecutionVisualState, stateIconName } from "./labels";
+import { renderTaskOutput } from "./preview-content";
+import type { Group, Task, View } from "./model";
+import type { TaskLayout } from "./view-state";
+
+type CardContext = {
+  archiveConversation?: ArchiveAction;
+  getData: () => View | null;
+  getLayout: () => TaskLayout;
+  getSelectedTask: () => string | null;
+  getSelectedGroup: () => string | null;
+  labels: Record<string, string>;
+  safeExternal: (url: string | null) => string | null;
+  selectTask: (id: string) => void;
+  selectGroup: (id: string) => void;
+  setKeyboardSelection: () => void;
+  updateTaskLayoutControls: () => void;
+  bindTaskHover: (target: HTMLElement, task: Task) => void;
+  bindGroupHover: (target: HTMLElement, group: Group) => void;
+  openContextMenu?: (kind: "task" | "group", id: string, target: HTMLElement) => void;
+};
+
+export function selectionAriaLabel(kind: "任务" | "交付单元", title: string, state: string, labels: Record<string, string>): string {
+  return `选择${kind}：${title}，状态：${labels[state] ?? state}`;
+}
+
+const element = <T extends HTMLElement>(id: string): T => document.getElementById(id) as T;
+
+function text(tag: string, value: string, ...classNames: string[]): HTMLElement {
+  const node = document.createElement(tag);
+  node.className = classNames.join(" ");
+  node.textContent = value;
+  return node;
+}
+
+function statusIcon(state: string, ready = false): HTMLElement {
+  const normalized = ready && state === "planned" ? "ready" : state;
+  const wrapper = text("span", "", "task-row-status-icon");
+  wrapper.dataset.state = normalized;
+  wrapper.setAttribute("aria-hidden", "true");
+  const icon = document.createElement("i");
+  icon.dataset.lucide = stateIconName(state, ready);
+  wrapper.append(icon);
+  return wrapper;
+}
+
+function groupVisualState(group: Group): string {
+  return groupExecutionVisualState(group.state, group.coordination_execution?.state);
+}
+
+export function groupAtomProgress(group: Group): string {
+  const atoms = group.atoms ?? [];
+  if (!atoms.length) return "未配置原子任务";
+  const waiting = group.coordination_execution?.state === "waiting" ? group.coordination_execution.waiting_for_task_ids.length ? " · 等待贡献任务" : " · 等待中" : "";
+  const completed = atoms.filter((atom) => atom.status === "completed").length;
+  if (atoms.every((atom) => atom.status === "planned")) return `0/${atoms.length} · 待开始${waiting}`;
+  const current = atoms.find((atom) => atom.status === "running" || atom.status === "blocked") ?? atoms[completed];
+  if (completed === atoms.length) return `${atoms.length}/${atoms.length} · 已完成`;
+  if (!current) return `0/${atoms.length} · 待开始`;
+  const index = atoms.indexOf(current) + 1;
+  const suffix = current.status === "blocked" ? " · 阻塞" : waiting;
+  return `${index}/${atoms.length} · ${current.title}${suffix}`;
+}
+
+function iconLink(label: string, iconName: string, url: string, external = false): HTMLAnchorElement {
+  const anchor = document.createElement("a");
+  anchor.className = "resource-action icon-button";
+  anchor.href = url;
+  anchor.setAttribute("aria-label", label);
+  if (external) anchor.rel = "noopener noreferrer";
+  const icon = document.createElement("i");
+  icon.dataset.lucide = iconName;
+  anchor.append(icon);
+  anchor.addEventListener("click", (event) => event.stopPropagation());
+  return anchor;
+}
+
+function iconAction(label: string, iconName: string, url: string | null, external = false): HTMLElement {
+  if (url) return iconLink(label, iconName, url, external);
+  if (label.startsWith("打开") && iconName === "message-circle") label = "示例对话（Mock）";
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "resource-action icon-button";
+  button.setAttribute("aria-disabled", "true");
+  button.setAttribute("aria-label", label);
+  const icon = document.createElement("i");
+  icon.dataset.lucide = iconName;
+  button.append(icon);
+  return button;
+}
+
+function durationValue(start: string | null, end: string | null): HTMLElement {
+  const value = text("button", formatDuration(start, end), "task-card-duration");
+  value.setAttribute("type", "button");
+  value.dataset.durationStart = start ?? "";
+  value.dataset.durationEnd = end ?? "";
+  return value;
+}
+
+function resources(actions: HTMLElement, meta: HTMLElement | null, kind: "task" | "group", id: string, context: CardContext): void {
+  const view = context.getData(); if (!view) return;
+  const task = view.tasks.find(t => t.id === id), group = view.groups.find(g => g.id === id);
+  const thread = kind === "task" ? task?.thread_id ?? null : group?.delivery_unit_kind === "bootstrap" ? view.orchestration.owner_thread_id ?? null : group?.agent_thread_id ?? null;
+  const source: ResourceSource = { kind, id, view, thread, output: () => kind === "task" ? task?.latest_agent_output : group?.latest_agent_output, start: kind === "task" ? task?.started_at ?? null : group?.started_at ?? null, end: kind === "task" ? task?.finished_at ?? null : group?.finished_at ?? null };
+  const triggers = actions.children;
+  if (triggers[0] && !(triggers[0] as HTMLElement).classList.contains("conversation-control")) attachResourcePopover(triggers[0] as HTMLElement, "conversation", source);
+  if (triggers[1]) {
+    const prTrigger = triggers[1] as HTMLElement;
+    attachResourcePopover(prTrigger, "pr", source);
+    const prUrl = kind === "task" ? task?.pr?.url : group?.parent_pr?.url;
+    if (prUrl) bindPRStatus(prTrigger, kind, id, prUrl);
+  }
+  const time = meta?.firstElementChild as HTMLElement | null;
+  if (time) attachResourcePopover(time, "time", source);
+}
+
+function taskCard(task: Task, context: CardContext): HTMLElement {
+  const card = document.createElement("article");
+  card.className = "task-card";
+  card.dataset.taskId = task.id;
+  card.dataset.contextTask = task.id;
+  card.dataset.contextKind = "task";
+  card.dataset.contextId = task.id;
+  card.setAttribute("role", "listitem");
+  card.setAttribute("aria-current", String(context.getSelectedTask() === task.id));
+  const head = text("div", "", "task-card-head");
+  const select = document.createElement("button");
+  select.type = "button";
+  select.className = "task-card-select";
+  select.setAttribute("aria-label", selectionAriaLabel("任务", task.title, task.is_ready && task.state === "planned" ? "ready" : task.state, context.labels));
+  select.setAttribute("aria-pressed", String(context.getSelectedTask() === task.id));
+  select.append(statusIcon(task.state, task.is_ready), text("span", task.title, "task-card-title"));
+  select.addEventListener("click", (event) => { event.stopPropagation(); if (event.detail === 0) context.setKeyboardSelection(); context.selectTask(task.id); });
+  head.append(select);
+  const actions = text("div", "", "task-card-actions");
+  if (hasConversationControl(task)) {
+    actions.append(renderConversationControl(task, context.archiveConversation, context.getData()?.profile_read_only === true));
+  } else actions.append(iconAction(task.thread_id ? task.state === "agent_idle" ? "Agent 已停止工作，打开任务对话" : "打开任务对话" : "任务对话尚未创建", "message-circle", task.thread_id ? conversationUrl(task.thread_id) : null));
+  const pr = context.safeExternal(task.pr?.url ?? null);
+  actions.append(iconAction(pr ? "打开任务 PR" : "任务 PR 尚未创建", "git-pull-request", pr, true));
+  const more = iconAction("更多任务操作", "ellipsis", null);
+  more.classList.add("context-menu-mobile-trigger");
+  more.removeAttribute("aria-disabled");
+  more.dataset.contextTrigger = "true"; more.dataset.contextKind = "task"; more.dataset.contextId = task.id;
+  more.addEventListener("click", event => { event.stopPropagation(); context.openContextMenu?.("task", task.id, more); });
+  actions.append(more);
+  head.append(actions);
+  const meta = text("div", "", "task-card-meta");
+  meta.append(durationValue(task.started_at, task.finished_at));
+  resources(actions, meta, "task", task.id, context);
+  card.append(head, meta, renderTaskOutput(task.latest_output, task.latest_agent_output ?? initialOutput(task.thread_id), task.id));
+  card.addEventListener("click", (event) => { if ((event.target as HTMLElement).closest("a, button")) return; context.selectTask(task.id); });
+  context.bindTaskHover(card, task);
+  return card;
+}
+
+function groupCard(group: Group, context: CardContext): HTMLElement {
+  const data = context.getData();
+  if (!data) throw new Error("Group view data is unavailable");
+  const card = document.createElement("article");
+  card.className = "task-card group-card";
+  card.dataset.groupId = group.id;
+  card.dataset.contextKind = "group";
+  card.dataset.contextId = group.id;
+  card.setAttribute("role", "listitem");
+  card.setAttribute("aria-current", String(context.getSelectedGroup() === group.id));
+  const head = text("div", "", "task-card-head");
+  const select = document.createElement("button");
+  select.type = "button";
+  select.className = "task-card-select";
+  const visualState = groupVisualState(group);
+  select.setAttribute("aria-label", selectionAriaLabel("交付单元", group.title, visualState, context.labels));
+  select.setAttribute("aria-pressed", String(context.getSelectedGroup() === group.id));
+  select.append(statusIcon(visualState), text("span", group.title, "task-card-title"));
+  select.addEventListener("click", (event) => { event.stopPropagation(); if (event.detail === 0) context.setKeyboardSelection(); context.selectGroup(group.id); });
+  head.append(select);
+  const actions = text("div", "", "task-card-actions");
+  actions.append(iconAction(group.delivery_unit_kind === "bootstrap" ? "主对话负责首个交付单元" : group.agent_thread_id ? "打开交付单元对话" : "交付单元对话尚未创建", "message-circle", (group.delivery_unit_kind === "bootstrap" ? data.orchestration.owner_thread_id : group.agent_thread_id) ? conversationUrl((group.delivery_unit_kind === "bootstrap" ? data.orchestration.owner_thread_id : group.agent_thread_id)!) : null));
+  const pr = context.safeExternal(group.parent_pr?.url ?? null);
+  actions.append(iconAction(pr ? "打开交付单元 PR" : "交付单元 PR 尚未创建", "git-pull-request", pr, true));
+  const more = iconAction("更多交付单元操作", "ellipsis", null);
+  more.classList.add("context-menu-mobile-trigger");
+  more.removeAttribute("aria-disabled");
+  more.dataset.contextTrigger = "true"; more.dataset.contextKind = "group"; more.dataset.contextId = group.id;
+  more.addEventListener("click", event => { event.stopPropagation(); context.openContextMenu?.("group", group.id, more); });
+  actions.append(more);
+  head.append(actions);
+  const groupTasks = data.tasks.filter((task) => task.group_id === group.id);
+  const range = { start: group.started_at ?? null, end: group.finished_at ?? null };
+  const meta = text("div", "", "task-card-meta");
+  meta.append(durationValue(range.start, range.end));
+  const summary = text("p", `${group.delivery_unit_kind === "bootstrap" ? "引导交付单元" : "普通交付单元"} · ${groupAtomProgress(group)}`, "task-card-summary", "group-card-summary");
+  resources(actions, meta, "group", group.id, context);
+  card.append(head, meta, summary);
+  card.addEventListener("click", (event) => { if ((event.target as HTMLElement).closest("a, button")) return; context.selectGroup(group.id); });
+  context.bindGroupHover(card, group);
+  return card;
+}
+
+export function createCardRenderer(context: CardContext): { renderList: (tasks: Task[]) => void; renderGroups: () => void } {
+  const renderList = (tasks: Task[]): void => {
+    closeResourcePopover();
+    const list = element<HTMLElement>("task-list");
+    list.replaceChildren();
+    list.className = `task-list task-cards task-layout-${context.getLayout()}`;
+    context.updateTaskLayoutControls();
+    if (!tasks.length) { list.append(text("div", "暂无匹配任务", "details-empty")); return; }
+    if (context.getLayout() === "grid") { for (const task of tasks) list.append(taskCard(task, context)); return; }
+    const data = context.getData();
+    if (!data) return;
+    for (const group of data.groups) {
+      const groupTasks = tasks.filter((task) => task.group_id === group.id);
+      if (!groupTasks.length) continue;
+      const column = text("section", "", "task-column");
+      column.dataset.groupId = group.id;
+      column.setAttribute("role", "listitem");
+      column.setAttribute("aria-current", String(context.getSelectedGroup() === group.id));
+      const heading = text("div", "", "task-column-heading");
+      heading.dataset.contextKind = "group";
+      heading.dataset.contextId = group.id;
+      const select = document.createElement("button");
+      select.type = "button";
+      select.className = "task-column-select";
+      const visualState = groupVisualState(group);
+      select.setAttribute("aria-label", selectionAriaLabel("交付单元", group.title, visualState, context.labels));
+      select.setAttribute("aria-pressed", String(context.getSelectedGroup() === group.id));
+      select.append(statusIcon(visualState), text("span", group.title, "task-column-title"));
+      select.addEventListener("click", (event) => { if (event.detail === 0) context.setKeyboardSelection(); context.selectGroup(group.id); });
+      const actions = text("div", "", "task-column-actions");
+      actions.append(iconAction(group.delivery_unit_kind === "bootstrap" ? "主对话负责首个交付单元" : group.agent_thread_id ? "打开交付单元对话" : "交付单元对话尚未创建", "message-circle", (group.delivery_unit_kind === "bootstrap" ? data.orchestration.owner_thread_id : group.agent_thread_id) ? conversationUrl((group.delivery_unit_kind === "bootstrap" ? data.orchestration.owner_thread_id : group.agent_thread_id)!) : null));
+      const pr = context.safeExternal(group.parent_pr?.url ?? null);
+      actions.append(iconAction(pr ? "打开交付单元 PR" : "交付单元 PR 尚未创建", "git-pull-request", pr, true));
+      const more = iconAction("更多交付单元操作", "ellipsis", null);
+      more.classList.add("context-menu-mobile-trigger");
+      more.removeAttribute("aria-disabled");
+      more.dataset.contextTrigger = "true"; more.dataset.contextKind = "group"; more.dataset.contextId = group.id;
+      more.addEventListener("click", event => { event.stopPropagation(); context.openContextMenu?.("group", group.id, more); });
+      actions.append(more);
+      const progress = text("span", groupAtomProgress(group), "task-column-count");
+      const meta = text("div", "", "task-card-meta task-column-time");
+      meta.append(durationValue(group.started_at ?? null, group.finished_at ?? null));
+      resources(actions, meta, "group", group.id, context);
+      heading.append(select, progress, actions, meta);
+      const cards = text("div", "", "task-column-list");
+      cards.setAttribute("role", "list");
+      for (const task of groupTasks) cards.append(taskCard(task, context));
+      context.bindGroupHover(heading, group);
+      column.append(heading, cards);
+      list.append(column);
+    }
+  };
+  const renderGroups = (): void => {
+    const data = context.getData();
+    if (!data) return;
+    closeResourcePopover();
+    const list = element<HTMLElement>("group-list");
+    list.replaceChildren();
+    list.className = "task-list task-cards group-cards";
+    for (const group of data.groups) list.append(groupCard(group, context));
+  };
+  return { renderList, renderGroups };
+}

package/toolkit/skills/multi-task-flow/web/conversation-control.ts

@@ -0,0 +1,77 @@
+import { attachTooltip } from "./tooltip";
+import { conversationUrl } from "./links";
+import type { Task } from "./model";
+
+export type ArchiveAction = (taskId: string, action?: "archive" | "unarchive") => void | Promise<void>;
+export function canArchiveConversation(task: Task): boolean {
+  const output = task.latest_agent_output;
+  return task.conversation_archive?.eligible === true && !!task.thread_id &&
+    output?.thread_id === task.thread_id && output.agent_state === "idle" && !output.stale;
+}
+export function hasArchiveAction(task: Task): boolean {
+  const status = task.conversation_resource?.status;
+  return status === "closed" || !!status?.startsWith("unarchive_") || status === "archive_unknown" || canArchiveConversation(task);
+}
+export function hasConversationControl(task: Task): boolean {
+  return hasArchiveAction(task) || !!task.conversation_resource;
+}
+export function archivePresentation(task: Task) {
+  const resource = task.conversation_resource;
+  const status = resource?.status;
+  const restoring = status?.startsWith("unarchive_");
+  const unknown = status === "archive_unknown" || status === "unarchive_unknown";
+  const failed = status === "archive_failed" || status === "unarchive_failed";
+  const closed = status === "closed";
+  const manual = status === "active" && resource?.archive_policy === "manual";
+  return {
+    label: closed ? "对话已归档" : restoring ? unknown ? "取消归档结果未知" : "取消归档失败" : unknown ? "对话归档结果未知" : failed ? "对话归档失败" : manual ? "对话已取消归档" : canArchiveConversation(task) ? "可以归档" : "等待归档",
+    badge: unknown ? "?" : failed ? "!" : closed ? "✓" : manual ? "↩" : "…",
+    tone: unknown || failed ? "warning" : closed ? "archived" : "active",
+    description: resource?.error ?? (closed ? "任务已结束，对话已成功归档。可取消归档以恢复到对话列表。" : manual ? "对话已恢复到对话列表；保留手动状态，不会再次自动归档。" : "对话归档尚未完成。"),
+    action: closed || restoring ? "unarchive" as const : "archive" as const,
+    actionLabel: closed ? "取消归档" : restoring ? unknown ? "取消归档对账" : "重试取消归档" : unknown ? "归档对账" : failed ? "重试归档" : "归档",
+    actionIcon: closed || restoring ? "archive-restore" : unknown ? "refresh-cw" : "archive",
+  };
+}
+export function renderArchiveAction(task: Task, execute?: ArchiveAction, readOnly = false): HTMLButtonElement {
+  const state = archivePresentation(task);
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "detail-action archive-action";
+  const icon = document.createElement("i"); icon.dataset.lucide = state.actionIcon; icon.setAttribute("aria-hidden", "true");
+  button.append(icon, document.createTextNode(state.actionLabel));
+  button.disabled = !execute || readOnly || !hasArchiveAction(task);
+  button.addEventListener("click", async event => {
+    event.stopPropagation();
+    if (!execute || readOnly || !hasArchiveAction(task)) return;
+    button.disabled = true;
+    try { await execute?.(task.id, state.action); }
+    finally { button.disabled = !execute || readOnly || !hasArchiveAction(task); }
+  });
+  return button;
+}
+export function renderConversationControl(task: Task, execute?: ArchiveAction, readOnly = false): HTMLElement {
+  const state = archivePresentation(task);
+  const wrapper = document.createElement("span"); wrapper.className = "conversation-control";
+  const trigger = document.createElement("button"); trigger.type = "button";
+  trigger.className = `resource-action icon-button conversation-status conversation-status-${state.tone}`;
+  const bubble = document.createElement("i"); bubble.dataset.lucide = "message-circle"; bubble.setAttribute("aria-hidden", "true");
+  const badge = document.createElement("span"); badge.className = "conversation-status-badge"; badge.textContent = state.badge; badge.setAttribute("aria-hidden", "true");
+  trigger.append(bubble, badge);
+  const content = document.createElement("div"); content.className = "conversation-popover";
+  const heading = document.createElement("strong"); heading.textContent = state.label;
+  const description = document.createElement("p"); description.textContent = state.description;
+  content.append(heading, description);
+  if (task.conversation_resource?.last_attempt_at) {
+    const attempt = document.createElement("p"); attempt.textContent = `最近尝试：${new Date(task.conversation_resource.last_attempt_at).toLocaleString("zh-CN")}`; content.append(attempt);
+  }
+  const actions = document.createElement("div"); actions.className = "conversation-popover-actions";
+  if (hasArchiveAction(task)) actions.append(renderArchiveAction(task, execute, readOnly));
+  if (task.thread_id) {
+    const open = document.createElement("a"); open.href = conversationUrl(task.thread_id); open.textContent = "打开对话"; actions.append(open);
+  }
+  content.append(actions);
+  const popover = attachTooltip(trigger, content, state.label, { interactive: true });
+  wrapper.append(trigger, popover);
+  return wrapper;
+}

package/toolkit/skills/multi-task-flow/web/dependency-tooltip.ts

@@ -0,0 +1,43 @@
+import { attachTooltip } from "./tooltip";
+import { renderStatusRow } from "./status-row";
+
+export type DependencyTooltipItem = {
+  name: string;
+  state: string;
+  status?: string;
+  completedAt?: string | null | undefined;
+};
+
+export function renderDependencyTooltip(items: DependencyTooltipItem[], label: string): HTMLElement {
+  const wrapper = document.createElement("span");
+  wrapper.className = "dependency-tooltip-wrap";
+  const trigger = document.createElement("button");
+  trigger.type = "button";
+  trigger.className = "dependency-tooltip-trigger";
+  trigger.textContent = label;
+  wrapper.append(trigger, attachDependencyTooltip(trigger, items, label));
+  return wrapper;
+}
+
+export function attachDependencyTooltip(trigger: HTMLElement, items: DependencyTooltipItem[], label: string): HTMLElement {
+  const content = document.createElement("div");
+  if (!items.length) {
+    content.className = "dependency-tooltip-empty";
+    content.textContent = "无依赖";
+  } else {
+    const list = document.createElement("ul");
+    for (const item of items) {
+      const row = document.createElement("li");
+      row.append(renderStatusRow({ name: item.name, status: item.status ?? "unknown", completedAt: item.completedAt }));
+      if (item.state) {
+        const description = document.createElement("span");
+        description.className = "dependency-tooltip-state";
+        description.textContent = item.state;
+        row.append(description);
+      }
+      list.append(row);
+    }
+    content.append(list);
+  }
+  return attachTooltip(trigger, content, label);
+}

package/toolkit/skills/multi-task-flow/web/detail-surface.ts

@@ -0,0 +1,74 @@
+import type { DetailSurface } from "./interaction-policy";
+
+export type DetailSurfaceElements = {
+  workspace: HTMLElement;
+  background: HTMLElement[];
+  details: HTMLElement;
+  detailsBackdrop: HTMLElement;
+  hoverPreview: HTMLElement;
+  closeDetails?: HTMLElement;
+};
+
+export function applyDetailSurface(elements: DetailSurfaceElements, surface: DetailSurface, detailPanelViewport: boolean, focus = false): void {
+  const detailVisible = surface === "desktop-inspector" || surface === "overlay-inspector" || surface === "drawer";
+  const drawer = surface === "drawer";
+  const overlay = surface === "overlay-inspector";
+  const backgroundElements = [...elements.background, ...[...elements.workspace.children]
+    .filter((child) => child !== elements.details && child !== elements.detailsBackdrop)
+    .map((child) => child as HTMLElement)];
+  for (const background of new Set(backgroundElements)) {
+    // A temporary surface must not block selection. Clicking another semantic
+    // task or group updates this same surface instead of opening a second one.
+    background.removeAttribute("inert");
+    background.removeAttribute("aria-hidden");
+  }
+  elements.workspace.classList.toggle("has-details", detailPanelViewport && surface === "desktop-inspector");
+  elements.workspace.classList.toggle("has-overlay-selection", overlay);
+  elements.workspace.classList.toggle("has-drawer-selection", drawer);
+  const slot = elements.details.closest<HTMLElement>(".details-slot");
+  if (slot) slot.hidden = !detailVisible;
+  elements.details.hidden = !detailVisible;
+  elements.details.classList.toggle("open", drawer || overlay);
+  elements.details.setAttribute("aria-hidden", String(!detailVisible));
+  elements.details.setAttribute("aria-modal", "false");
+  if (drawer || overlay) elements.details.setAttribute("role", "dialog"); else elements.details.removeAttribute("role");
+  elements.detailsBackdrop.hidden = !(drawer || overlay);
+  if (surface !== "hover-preview") {
+    elements.hoverPreview.classList.remove("is-visible");
+    elements.hoverPreview.hidden = true;
+  }
+  if (focus) window.setTimeout(() => {
+    if (drawer || overlay) elements.closeDetails?.focus({ preventScroll: true });
+    else if (surface === "desktop-inspector") elements.details.focus({ preventScroll: true });
+  }, 0);
+}
+
+// Keep the reserved grid column while the inspector follows the viewport.
+export function installDetailViewport(details: HTMLElement): void {
+  const slot = details.closest<HTMLElement>(".details-slot")!;
+  const topbar = document.querySelector<HTMLElement>(".topbar");
+  const workspace = details.closest<HTMLElement>(".workspace");
+  const update = (): void => {
+    if (details.hidden || window.innerWidth < 768) return;
+    const bounds = slot.getBoundingClientRect();
+    // Start below the overview, then pin to the viewport as the workspace scrolls.
+    const top = Math.min(Math.max(16, (workspace?.getBoundingClientRect().top ?? 16), (topbar?.getBoundingClientRect().bottom ?? 0) + 16), Math.max(16, window.innerHeight - 160));
+    details.style.setProperty("--details-left", `${bounds.left}px`);
+    details.style.setProperty("--details-width", `${bounds.width}px`);
+    details.style.setProperty("--details-top", `${top}px`);
+  };
+  let scheduled = false;
+  const schedule = (): void => {
+    if (scheduled) return;
+    scheduled = true;
+    window.requestAnimationFrame(() => { scheduled = false; update(); });
+  };
+  const resizeObserver = new ResizeObserver(schedule);
+  resizeObserver.observe(slot);
+  if (workspace) resizeObserver.observe(workspace);
+  if (topbar) resizeObserver.observe(topbar);
+  new MutationObserver(update).observe(details, { attributes: true, attributeFilter: ["hidden", "class"] });
+  window.addEventListener("scroll", schedule, { passive: true });
+  window.addEventListener("resize", schedule);
+  update();
+}