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

package/toolkit/skills/multi-task-flow/tests/ui/cards-accessibility.test.ts

@@ -0,0 +1,90 @@
+import { describe, expect, test } from "bun:test";
+import { selectionAriaLabel } from "../../web/cards";
+import { groupExecutionVisualState } from "../../web/labels";
+
+describe("dashboard card accessibility", () => {
+  test("includes the visual status in the semantic selection name", () => {
+    const labels = { running: "执行中", ready: "就绪" };
+    expect(selectionAriaLabel("任务", "部署并验证运行环境", "running", labels)).toBe("选择任务：部署并验证运行环境，状态：执行中");
+    expect(selectionAriaLabel("交付单元", "第二组：页面与验收", "ready", labels)).toBe("选择交付单元：第二组：页面与验收，状态：就绪");
+  });
+
+  test("overlays explicit coordination execution while preserving closed state", () => {
+    expect(groupExecutionVisualState("merged", "waiting")).toBe("waiting");
+    expect(groupExecutionVisualState("merged", "running")).toBe("running");
+    expect(groupExecutionVisualState("closed", "waiting")).toBe("closed");
+  });
+});
+
+test("synthetic task and unit conversations never expose native links", async () => {
+  const { createCardRenderer } = await import("../../web/cards");
+  const { createDetailContent } = await import("../../web/details-content");
+  const { createSingleDeliveryUnitLedger } = await import("../../examples/single-delivery-unit/ledger");
+  const { buildView } = await import("../../lib/view");
+  const view = buildView(createSingleDeliveryUnitLedger()) as import("../../web/model").View;
+  document.body.innerHTML = '<div id="task-list"></div><div id="group-list"></div><div id="details-summary"></div><div id="details-content"></div>';
+  const common = { getData: () => view, labels: {}, safeExternal: () => null };
+  let layout: "grid" | "board" = "grid";
+  const cards = createCardRenderer({ ...common, getLayout: () => layout, getSelectedTask: () => null, getSelectedGroup: () => null, selectTask: () => {}, selectGroup: () => {}, setKeyboardSelection: () => {}, updateTaskLayoutControls: () => {}, bindTaskHover: () => {}, bindGroupHover: () => {} });
+  const details = createDetailContent({ ...common, labelTask: () => "", time: () => "" });
+  for (const mode of ["grid", "board"] as const) {
+    layout = mode; cards.renderList(view.tasks); cards.renderGroups();
+    expect(document.querySelectorAll('a[href^="codex:"]')).toHaveLength(0);
+    expect(document.querySelector(".task-card-title[data-tooltip], .task-card-output[data-tooltip], .task-column-count[data-tooltip], [data-resource-trigger][data-tooltip]")).toBeNull();
+    expect(document.querySelectorAll('button[aria-label="示例对话（Mock）"][aria-disabled="true"][data-resource-trigger="conversation"]').length).toBeGreaterThan(0);
+  }
+  details.showTask(view.tasks[0]!);
+  expect(document.getElementById("details-content")!.textContent).toContain("示例对话（Mock）");
+  expect(document.querySelectorAll('a[href^="codex:"]')).toHaveLength(0);
+  details.showGroup(view.groups[0]!);
+  expect(document.getElementById("details-content")!.textContent).toContain("示例对话（Mock）");
+  expect(document.querySelectorAll('a[href^="codex:"]')).toHaveLength(0);
+});
+
+test("grid and board groups expose time details from their own execution facts", async () => {
+  const { createCardRenderer } = await import("../../web/cards");
+  const { createSingleDeliveryUnitLedger } = await import("../../examples/single-delivery-unit/ledger");
+  const { buildView } = await import("../../lib/view");
+  const view = buildView(createSingleDeliveryUnitLedger()) as import("../../web/model").View;
+  const group = view.groups[0]!;
+  group.started_at = "2026-11-05T01:00:00Z";
+  group.finished_at = "2026-11-05T07:00:00Z";
+  view.tasks[0]!.started_at = "2026-11-05T02:00:00Z";
+  view.tasks[0]!.finished_at = "2026-11-05T03:00:00Z";
+  document.body.innerHTML = '<div id="task-list"></div><div id="group-list"></div>';
+  let layout: "grid" | "board" = "grid";
+  const cards = createCardRenderer({ getData: () => view, labels: {}, safeExternal: () => null, getLayout: () => layout, getSelectedTask: () => null, getSelectedGroup: () => null, selectTask: () => {}, selectGroup: () => {}, setKeyboardSelection: () => {}, updateTaskLayoutControls: () => {}, bindTaskHover: () => {}, bindGroupHover: () => {} });
+  for (const mode of ["grid", "board"] as const) {
+    layout = mode; cards.renderList(view.tasks); cards.renderGroups();
+    const surface = document.querySelector(mode === "grid" ? `#group-list [data-group-id="${group.id}"]` : `#task-list > [data-group-id="${group.id}"] > .task-column-heading`)!;
+    for (const type of ["conversation", "pr", "time"]) expect(surface.querySelectorAll(`[data-resource-trigger="${type}"]`)).toHaveLength(1);
+    const time = surface.querySelector<HTMLButtonElement>('[data-resource-trigger="time"]')!;
+    expect(time.textContent).toBe("6小时");
+    time.focus();
+    expect(document.querySelector('.resource-popover[data-resource="time"]')?.textContent).toContain("6小时");
+    expect(time.getAttribute("aria-expanded")).toBe("true");
+    time.blur();
+  }
+  group.started_at = null; group.finished_at = null;
+  cards.renderList(view.tasks);
+  const missing = document.querySelector<HTMLButtonElement>(`#task-list > [data-group-id="${group.id}"] > .task-column-heading [data-resource-trigger="time"]`)!;
+  expect(missing.textContent).toBe("未知");
+  expect(missing.dataset.durationStart).toBe("");
+  missing.focus();
+  expect(document.querySelector('.resource-popover[data-resource="time"]')?.textContent).toContain("开始时间不可用");
+  expect(document.querySelector('.resource-popover[data-resource="time"] .resource-badge')?.textContent).toBe("时间未知");
+});
+
+test("task and delivery unit cards expose stable context targets and mobile triggers", async () => {
+  const { createCardRenderer } = await import("../../web/cards");
+  const { createSingleDeliveryUnitLedger } = await import("../../examples/single-delivery-unit/ledger");
+  const { buildView } = await import("../../lib/view");
+  const view = buildView(createSingleDeliveryUnitLedger()) as import("../../web/model").View;
+  document.body.innerHTML = '<div id="task-list"></div><div id="group-list"></div>';
+  const cards = createCardRenderer({ getData: () => view, labels: {}, safeExternal: () => null, getLayout: () => "grid", getSelectedTask: () => null, getSelectedGroup: () => null, selectTask: () => {}, selectGroup: () => {}, setKeyboardSelection: () => {}, updateTaskLayoutControls: () => {}, bindTaskHover: () => {}, bindGroupHover: () => {} });
+  cards.renderList(view.tasks); cards.renderGroups();
+  const task = view.tasks[0]!, group = view.groups[0]!;
+  expect(document.querySelector(`[data-context-kind="task"][data-context-id="${task.id}"]`)).toBeTruthy();
+  expect(document.querySelector(`[data-context-kind="group"][data-context-id="${group.id}"]`)).toBeTruthy();
+  expect(document.querySelector(`[data-context-trigger][data-context-kind="group"][data-context-id="${group.id}"]`)).toBeTruthy();
+});

package/toolkit/skills/multi-task-flow/tests/ui/connection-status.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, test } from "bun:test";
+import { deriveConnectionStatus } from "../../web/model";
+
+describe("dashboard connection status", () => {
+  test("keeps an unwatched snapshot stale even while a refresh is in flight", () => {
+    expect(deriveConnectionStatus(false, false)).toBe("stale");
+    expect(deriveConnectionStatus(true, false)).toBe("stale");
+  });
+
+  test("distinguishes a healthy stream from a connection that is still opening", () => {
+    expect(deriveConnectionStatus(false, true)).toBe("connecting");
+    expect(deriveConnectionStatus(true, true)).toBe("live");
+  });
+});

package/toolkit/skills/multi-task-flow/tests/ui/conversation-control.test.ts

@@ -0,0 +1,69 @@
+import { test, expect, afterEach } from "bun:test";
+import { hasArchiveAction, renderConversationControl } from "../../web/conversation-control";
+import { createIdleArchiveExample } from "../../examples/orchestration-viewer";
+import type { Task } from "../../web/model";
+
+afterEach(() => document.body.replaceChildren());
+
+function fixture(status: string) {
+  const task = createIdleArchiveExample().ledger.tasks.find(task => task.id === "model")!;
+  return { ...task, conversation_archive: { eligible: true, reason: null }, latest_agent_output: { thread_id: task.thread_id, agent_state: "idle", stale: false }, conversation_resource: { id: "r", status, kind: "conversation", target: task.thread_id, evidence_ref: null } } as Task;
+}
+test("archive status keeps the chat bubble and click opens an actionable project popover", async () => {
+  const calls: unknown[] = [];
+  const control = renderConversationControl(fixture("closed"), async (...args) => { calls.push(args); });
+  document.body.replaceChildren(control);
+  const trigger = control.querySelector("button")!;
+  expect(trigger.querySelector('[data-lucide="message-circle"]')).not.toBeNull();
+  expect(control.querySelector(".conversation-status-badge")?.textContent).toBe("✓");
+  trigger.click();
+  const panel = control.querySelector<HTMLElement>('[role="dialog"]')!;
+  expect(panel.hidden).toBe(false);
+  expect(panel.textContent).toContain("对话已归档");
+  const action = panel.querySelector("button")!;
+  expect(action.textContent).toBe("取消归档");
+  action.click(); await Promise.resolve();
+  expect(calls).toEqual([["model", "unarchive"]]);
+});
+test("failure and unknown show distinct explanations and archive-only recovery controls", () => {
+  for (const [status, label, badge] of [["archive_failed", "重试归档", "!"], ["archive_unknown", "归档对账", "?"]]) {
+    const control = renderConversationControl(fixture(status!), () => {});
+    document.body.replaceChildren(control);
+    control.querySelector("button")!.focus();
+    expect(control.querySelector<HTMLElement>('[role="dialog"]')!.hidden).toBe(false);
+    expect(control.querySelector(".archive-action")?.textContent).toBe(label);
+    expect(control.querySelector(".conversation-status-badge")?.textContent).toBe(badge);
+    expect(control.querySelector("[title]")).toBeNull();
+  }
+});
+
+
+test("first archive needs eligibility and current idle evidence, not an existing resource", () => {
+  const task = fixture("pending");
+  task.conversation_resource = null;
+  expect(hasArchiveAction(task)).toBe(true);
+  expect(renderConversationControl(task, () => {}).querySelector(".archive-action")?.textContent).toBe("归档");
+  task.latest_agent_output!.stale = true;
+  expect(hasArchiveAction(task)).toBe(false);
+  task.latest_agent_output!.stale = false;
+  task.latest_agent_output!.agent_state = "active";
+  expect(hasArchiveAction(task)).toBe(false);
+  task.latest_agent_output!.agent_state = "idle";
+  task.conversation_archive!.eligible = false;
+  expect(hasArchiveAction(task)).toBe(false);
+});
+
+test("ineligible failure hides retry; unknown and closed retain recovery", () => {
+  for (const status of ["archive_failed", "archive_unknown", "closed", "unarchive_failed", "unarchive_unknown"]) {
+    const task = fixture(status);
+    task.conversation_archive!.eligible = false;
+    const control = renderConversationControl(task, () => {});
+    expect(control.querySelector(".archive-action") !== null).toBe(status !== "archive_failed");
+    expect(control.textContent).toContain(status === "archive_failed" ? "对话归档失败" : status === "archive_unknown" ? "对话归档结果未知" : "取消归档");
+  }
+});
+
+test("read-only views disable available actions", () => {
+  const control = renderConversationControl(fixture("closed"), () => {}, true);
+  expect(control.querySelector<HTMLButtonElement>(".archive-action")!.disabled).toBe(true);
+});

package/toolkit/skills/multi-task-flow/tests/ui/detail-surface.test.ts

@@ -0,0 +1,245 @@
+import { beforeEach, describe, expect, test } from "bun:test";
+import { getByText } from "@testing-library/dom";
+import { applyDetailSurface, type DetailSurfaceElements } from "../../web/detail-surface";
+import { firstVisibleElement, focusAfterRerender } from "../../web/focus";
+import { canShowHoverPreview, detailsPanelFits, isDetailInteraction, resolveDetailSurface, selectedObjectFocusSelector, supportsHoverInput } from "../../web/interaction-policy";
+
+let elements: DetailSurfaceElements;
+
+beforeEach(() => {
+  document.body.innerHTML = `
+    <header id="app-header"><button>主题</button></header>
+    <section class="workspace">
+      <main id="background-content"></main>
+      <div class="details-slot" hidden><aside id="details" aria-hidden="true"><div id="details-content">已选详情</div></aside></div>
+      <div id="details-backdrop" hidden></div>
+    </section>
+    <div id="hover-preview" hidden></div>
+    <button id="close-details">关闭</button>
+  `;
+  elements = {
+    workspace: document.querySelector(".workspace")!,
+    background: [document.querySelector("#app-header")!, document.querySelector("#background-content")!],
+    details: document.querySelector("#details")!,
+    detailsBackdrop: document.querySelector("#details-backdrop")!,
+    hoverPreview: document.querySelector("#hover-preview")!,
+    closeDetails: document.querySelector("#close-details")!,
+  };
+});
+
+describe("dashboard detail surface DOM", () => {
+  test("does not reserve a detail column before an object is selected", () => {
+    const surface = resolveDetailSurface({ selected: false, detailOpen: false, hoverCapable: true, detailPanelViewport: true });
+    applyDetailSurface(elements, surface, true);
+
+    expect(surface).toBe("none");
+    expect(elements.details.hidden).toBe(true);
+    expect(elements.details.closest<HTMLElement>(".details-slot")?.hidden).toBe(true);
+    expect(elements.workspace.classList.contains("has-details")).toBe(false);
+    expect(canShowHoverPreview({ selected: false, detailOpen: false, hoverCapable: true, detailPanelViewport: true })).toBe(true);
+  });
+
+  test("opens the wide inspector only for an explicitly selected object", () => {
+    const surface = resolveDetailSurface({ selected: true, detailOpen: true, hoverCapable: true, detailPanelViewport: true });
+    applyDetailSurface(elements, surface, true);
+
+    expect(surface).toBe("desktop-inspector");
+    expect(elements.details.hidden).toBe(false);
+    expect(elements.details.closest<HTMLElement>(".details-slot")?.hidden).toBe(false);
+    expect(elements.workspace.classList.contains("has-details")).toBe(true);
+  });
+
+  test("uses an overlay inspector when the panel would shrink the canvas", () => {
+    const surface = resolveDetailSurface({ selected: true, detailOpen: true, hoverCapable: true, drawerViewport: false });
+    applyDetailSurface(elements, surface, false);
+
+    expect(surface).toBe("overlay-inspector");
+    expect(elements.details.hidden).toBe(false);
+    expect(elements.details.classList.contains("open")).toBe(true);
+    expect(elements.detailsBackdrop.hidden).toBe(false);
+    expect(elements.workspace.classList.contains("has-overlay-selection")).toBe(true);
+  });
+
+  test("uses a fixed inspector on the intermediate viewport only after selection", () => {
+    expect(resolveDetailSurface({ selected: false, detailOpen: false, hoverCapable: true, detailPanelViewport: true })).toBe("none");
+
+    const surface = resolveDetailSurface({ selected: true, detailOpen: true, hoverCapable: true, detailPanelViewport: true });
+    applyDetailSurface(elements, surface, true);
+
+    expect(surface).toBe("desktop-inspector");
+    expect(elements.details.hidden).toBe(false);
+    expect(elements.workspace.classList.contains("has-details")).toBe(true);
+    expect(elements.detailsBackdrop.hidden).toBe(true);
+  });
+
+  test("does not allow a hover preview beside an open desktop inspector", () => {
+    expect(canShowHoverPreview({ selected: true, detailOpen: true, hoverCapable: true, detailPanelViewport: true })).toBe(false);
+    expect(canShowHoverPreview({ selected: false, detailOpen: false, hoverCapable: true, detailPanelViewport: true })).toBe(true);
+    expect(canShowHoverPreview({ selected: true, detailOpen: true, hoverCapable: true, detailPanelViewport: false })).toBe(false);
+  });
+
+  test("uses the canvas width for the detail panel threshold", () => {
+    expect(detailsPanelFits(1356)).toBe(true);
+    expect(detailsPanelFits(1355)).toBe(false);
+  });
+
+  test("keeps a touch-selected object in the narrow drawer surface", () => {
+    expect(resolveDetailSurface({ selected: true, detailOpen: true, hoverCapable: false, drawerViewport: true })).toBe("drawer");
+  });
+
+  test("uses the active pointer type on a hybrid touch device", () => {
+    expect(supportsHoverInput({ anyHover: true, anyFinePointer: true })).toBe(true);
+    expect(supportsHoverInput({ anyHover: true, anyFinePointer: true, pointerType: "mouse" })).toBe(true);
+    expect(supportsHoverInput({ anyHover: true, anyFinePointer: true, pointerType: "touch" })).toBe(false);
+    expect(supportsHoverInput({ anyHover: true, anyFinePointer: true, pointerType: "pen" })).toBe(false);
+    expect(supportsHoverInput({ anyHover: false, anyFinePointer: true })).toBe(false);
+    expect(supportsHoverInput({ anyHover: true, anyFinePointer: false })).toBe(false);
+  });
+
+  test("switches from a touch drawer to one mouse hover surface", () => {
+    applyDetailSurface(elements, "drawer", false);
+    elements.hoverPreview.hidden = false;
+    elements.hoverPreview.classList.add("is-visible");
+
+    applyDetailSurface(elements, "hover-preview", false);
+
+    expect(elements.details.hidden).toBe(true);
+    expect(elements.details.classList.contains("open")).toBe(false);
+    expect(elements.detailsBackdrop.hidden).toBe(true);
+    expect(elements.hoverPreview.hidden).toBe(false);
+    expect(elements.hoverPreview.classList.contains("is-visible")).toBe(true);
+  });
+
+  test("keeps keyboard-selected details in one surface", () => {
+    expect(resolveDetailSurface({ selected: true, detailOpen: true, hoverCapable: true, keyboardSelection: true, drawerViewport: true })).toBe("drawer");
+    expect(canShowHoverPreview({ selected: true, detailOpen: true, hoverCapable: true, keyboardSelection: true })).toBe(false);
+  });
+
+  test("keeps accessible graph selection inside the detail interaction boundary", () => {
+    const graphA11y = document.createElement("div");
+    graphA11y.id = "graph-a11y";
+    const button = document.createElement("button");
+    graphA11y.append(button);
+    document.body.append(graphA11y);
+
+    expect(isDetailInteraction(button)).toBe(true);
+    expect(isDetailInteraction(document.createElement("div"))).toBe(false);
+  });
+
+  test("keeps only the selected object's desktop inspector visible", () => {
+    elements.hoverPreview.hidden = false;
+    elements.hoverPreview.classList.add("is-visible");
+    applyDetailSurface(elements, "desktop-inspector", true);
+
+    expect(elements.details.hidden).toBe(false);
+    expect(elements.workspace.classList.contains("has-details")).toBe(true);
+    expect(elements.hoverPreview.hidden).toBe(true);
+    expect(elements.hoverPreview.classList.contains("is-visible")).toBe(false);
+    expect(getByText(elements.details, "已选详情")).toBeTruthy();
+  });
+
+  test("moves focus into the desktop inspector when details open", async () => {
+    applyDetailSurface(elements, "desktop-inspector", true, true);
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(document.activeElement).toBe(elements.details);
+  });
+
+  test("opens a touch drawer with a backdrop and no hover surface", async () => {
+    elements.hoverPreview.hidden = false;
+    applyDetailSurface(elements, "drawer", false, true);
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(elements.details.hidden).toBe(false);
+    expect(elements.details.classList.contains("open")).toBe(true);
+    expect(elements.details.getAttribute("aria-hidden")).toBe("false");
+    expect(elements.details.getAttribute("aria-modal")).toBe("false");
+    expect(elements.details.getAttribute("role")).toBe("dialog");
+    expect(elements.detailsBackdrop.hidden).toBe(false);
+    expect(elements.hoverPreview.hidden).toBe(true);
+    expect(elements.workspace.classList.contains("has-drawer-selection")).toBe(true);
+    expect(document.querySelector("#background-content")?.hasAttribute("inert")).toBe(false);
+    expect(document.querySelector("#background-content")?.getAttribute("aria-hidden")).toBeNull();
+    expect(document.querySelector("#app-header")?.hasAttribute("inert")).toBe(false);
+    expect(document.activeElement).toBe(elements.closeDetails!);
+  });
+
+  test("closes every transient surface without changing selected detail content", () => {
+    elements.hoverPreview.hidden = false;
+    elements.hoverPreview.classList.add("is-visible");
+    applyDetailSurface(elements, "none", false);
+
+    expect(elements.details.classList.contains("open")).toBe(false);
+    expect(elements.detailsBackdrop.hidden).toBe(true);
+    expect(elements.hoverPreview.hidden).toBe(true);
+    expect(getByText(elements.details, "已选详情")).toBeTruthy();
+  });
+
+  test("restores focus to the selected object's action button after a list rerender", () => {
+    document.body.insertAdjacentHTML("beforeend", `
+      <article data-task-id="deploy"><button class="task-card-select">部署并验证</button></article>
+      <article data-group-id="core"><button class="task-card-select">第一组</button></article>
+    `);
+
+    const taskButton = document.querySelector<HTMLElement>(selectedObjectFocusSelector({ kind: "task", id: "deploy" })!);
+    const groupButton = document.querySelector<HTMLElement>(selectedObjectFocusSelector({ kind: "group", id: "core" })!);
+
+    expect(taskButton?.textContent).toBe("部署并验证");
+    expect(groupButton?.textContent).toBe("第一组");
+    document.body.insertAdjacentHTML("beforeend", `<article data-group-id="board"><button class="task-column-select">看板组</button></article>`);
+    expect(document.querySelector<HTMLElement>(selectedObjectFocusSelector({ kind: "group", id: "board" })!)?.textContent).toBe("看板组");
+    expect(selectedObjectFocusSelector(null)).toBeNull();
+  });
+
+  test("falls back to a stable control when a rerender removes the prior focus target", () => {
+    const selected = document.createElement("button");
+    const fallback = document.createElement("input");
+    document.body.append(selected, fallback);
+    selected.focus();
+    selected.remove();
+
+    focusAfterRerender(selected, fallback);
+
+    expect(document.activeElement).toBe(fallback);
+  });
+
+  test("does not restore focus to the document body", () => {
+    const fallback = document.createElement("button");
+    document.body.append(fallback);
+    focusAfterRerender(document.body, fallback);
+    expect(document.activeElement).toBe(fallback);
+  });
+
+  test("does not focus a control inside a hidden ancestor", () => {
+    const hiddenSection = document.createElement("section");
+    hiddenSection.hidden = true;
+    const hiddenButton = document.createElement("button");
+    const fallback = document.createElement("button");
+    hiddenSection.append(hiddenButton);
+    document.body.append(hiddenSection, fallback);
+
+    focusAfterRerender(hiddenButton, fallback);
+
+    expect(document.activeElement).toBe(fallback);
+  });
+
+  test("skips hidden focus targets when selecting a visible list fallback", () => {
+    document.body.innerHTML += `
+      <section hidden><button class="task-card-select" id="hidden-task">隐藏任务</button></section>
+      <section><button class="task-card-select" id="visible-task">可见任务</button></section>
+    `;
+
+    expect(firstVisibleElement(document, ".task-card-select")?.id).toBe("visible-task");
+  });
+
+  test("returns menu focus to the trigger after the option is dismissed", () => {
+    const trigger = document.createElement("button");
+    const option = document.createElement("button");
+    document.body.append(trigger, option);
+    option.focus();
+
+    focusAfterRerender(trigger, trigger);
+
+    expect(document.activeElement).toBe(trigger);
+  });
+});