@loomhelm/multi-task-flow 0.2.1 → 0.2.7

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/graph-layout.ts

@@ -1,5 +1,5 @@
 import ELK, { type ElkNode, type ElkExtendedEdge } from 'elkjs/lib/elk.bundled.js';
-import type { GraphProjection, GraphProjectionNode } from './graph-projection';
+import type { GraphDependencyPath, GraphProjection, GraphProjectionNode } from './graph-projection';
 
 export const CARD_WIDTH = 184;
 export const CARD_HEIGHT = 76;
@@ -14,7 +14,7 @@ export function cardSize(title: string): {width:number;height:number} {
 }
 export type Direction = 'DOWN' | 'RIGHT';
 export type PlacedNode = { node: GraphProjectionNode; x: number; y: number; width: number; height: number };
-export type RoutedEdge = { id: string; source: string; target: string; path: string };
+export type RoutedEdge = { id: string; source: string; target: string; path: string; paths: GraphDependencyPath[] };
 export type GraphLayout = { nodes: PlacedNode[]; edges: RoutedEdge[]; width: number; height: number };
 const elk = new ELK();
 
@@ -74,7 +74,7 @@ export async function layoutProjection(projection: GraphProjection, direction: D
         return points.map((p, i) => `${i ? 'L' : 'M'} ${p.x + origin.x} ${p.y + origin.y}`).join(' ');
       }).join(' ');
       if (!path) throw new Error(`No route for dependency ${e.id}`);
-      routed.push({ id: e.id, source: edge.source, target: edge.target, path });
+      routed.push({ id: e.id, source: edge.source, target: edge.target, path, paths: edge.paths });
     }
     for (const child of container.children ?? []) {
       const px = x + (child.x ?? 0), py = y + (child.y ?? 0);

package/toolkit/skills/multi-task-flow/web/graph-projection.ts

@@ -1,5 +1,6 @@
 import type { Node, Task, View } from "./model";
 import { stateIconName, stateLabel, type StateIconName } from "./labels";
+import type { AtomicEdge, AtomicNode } from "../lib/atomic-orchestration";
 
 export const HIDDEN_BOUNDARY_KINDS = new Set(["main_start", "main_end", "group_start", "group_end"]);
 
@@ -39,6 +40,9 @@ export type GraphProjectionNode = {
   title: string;
   graphLabel: string;
   fullLabel: string;
+  evidence?: string[];
+  blocker?: string | null;
+  acceptance_count?: number;
 };
 
 export type GraphDependencyPath = {
@@ -69,6 +73,33 @@ export type GraphProjection = {
   warnings: string[];
 };
 
+export type AtomicGraphProjectionNode = {
+  id: string;
+  kind: "work" | "milestone";
+  title: string;
+  scope: string;
+  status: string;
+  evidence: string[];
+  blocker: string | null;
+  acceptance_count: number;
+};
+
+export type AtomicGraphProjection = {
+  nodes: AtomicGraphProjectionNode[];
+  edges: { id: string; source: string; target: string; requires: string }[];
+};
+
+export function projectAtomicGraph(nodes: readonly AtomicNode[], edges: readonly AtomicEdge[]): AtomicGraphProjection {
+  return {
+    nodes: nodes.map((node) => {
+      if (node.kind === "milestone") return { id: node.id, kind: "milestone", title: node.title, scope: node.scope ? "milestone" : "design", status: node.state, evidence: [], blocker: null, acceptance_count: node.acceptance.length };
+      const scope = !node.scope ? "design" : node.scope.kind === "task" ? `task:${node.scope.task_id} / delivery-unit:${node.scope.delivery_unit_id}` : `delivery-unit:${node.scope.delivery_unit_id}`;
+      return { id: node.id, kind: "work", title: node.title, scope, status: node.state, evidence: node.result?.evidence_refs ?? node.runtime?.evidence_refs ?? [], blocker: node.blocker?.message ?? null, acceptance_count: node.acceptance.length };
+    }),
+    edges: edges.map((edge) => ({ id: edge.id, source: edge.from_node_id, target: edge.to_node_id, requires: edge.requires.kind })),
+  };
+}
+
 export function fitGraphLabel(value: string, limit: { lines: number; columns: number }): string {
   const normalized = value.replace(/\s+/g, " ").trim();
   const capacity = limit.lines * limit.columns;

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

@@ -68,5 +68,5 @@ export function createGraphController(context: GraphContext, calculateLayout = l
       requestAnimationFrame(()=>{if(serial!==generation)return;if(!viewportInitialized){instance?.setViewport({x:Math.max(24,(container.clientWidth-result.width)/2),y:24,zoom:1});context.setZoom(1);viewportInitialized=true;} highlightSelection();});
     }).catch(e=>{if(serial!==generation)return;pending=false;error=`依赖图布局失败：${e instanceof Error?e.message:String(e)}`;signature='';update?.();});
   }
-  return {render,highlightSelection,zoomIn:()=>instance?.zoomIn(),zoomOut:()=>instance?.zoomOut(),fit:()=>instance?.fitView({padding:0.08}),rankDir:()=>direction==='DOWN'?'TB':'LR',projection:()=>projection};
+  return {render,reset:()=>{container.replaceChildren();root.render(<Surface/>);},highlightSelection,zoomIn:()=>instance?.zoomIn(),zoomOut:()=>instance?.zoomOut(),fit:()=>instance?.fitView({padding:0.08}),rankDir:()=>direction==='DOWN'?'TB':'LR',projection:()=>projection};
 }

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

@@ -52,6 +52,9 @@ function dependencyLabels(projection: GraphProjection, nodeId: string, direction
 export function accessibleNodeLabel(node: GraphProjectionNode, projection: GraphProjection): string {
   const parts = [`${nodeKindLabel(node)}：${node.title}`];
   if (node.stateLabel) parts.push(`状态：${node.stateLabel}`);
+  if (node.acceptance_count !== undefined) parts.push(`验收条件：${node.acceptance_count}`);
+  if (node.evidence?.length) parts.push(`证据：${node.evidence.length}`);
+  if (node.blocker) parts.push(`阻塞：${node.blocker}`);
   const incoming = dependencyLabels(projection, node.id, "incoming");
   const outgoing = dependencyLabels(projection, node.id, "outgoing");
   if (incoming.length) parts.push(`前驱：${incoming.join("；")}`);

package/toolkit/skills/multi-task-flow/web/index.html

@@ -37,15 +37,17 @@
       <section class="overview" aria-label="任务概览">
         <div id="summary" class="summary" aria-live="polite"></div>
       </section>
-      <section class="workspace" aria-label="编排视图">
+      <section id="workspace" class="workspace" aria-label="编排视图">
         <div class="workspace-main">
           <div class="workspace-view">
             <div class="view-header">
             <div class="view-heading"><span class="view-meta">observability</span><span id="view-context" class="view-context">运行视图</span><span id="view-count" class="view-count"></span></div>
             <div class="tabs" role="tablist" aria-label="视图">
-              <button id="tab-graph" type="button" role="tab" aria-selected="true" aria-controls="graph-view" data-tab="graph">依赖图</button>
+              <button id="tab-graph" type="button" role="tab" aria-selected="true" aria-controls="graph-view" data-tab="graph">任务与交付单元依赖</button>
+              <button id="tab-atomic" type="button" role="tab" aria-selected="false" aria-controls="graph-view" data-tab="atomic">原子任务依赖</button>
               <button id="tab-planned" type="button" role="tab" aria-selected="false" aria-controls="planned-view" data-tab="planned">理论安排</button>
               <button id="tab-actual" type="button" role="tab" aria-selected="false" aria-controls="actual-view" data-tab="actual">实际进度</button>
+              <button id="tab-tasks" type="button" role="tab" aria-selected="false" aria-controls="tasks-view" data-tab="tasks">任务</button>
             </div>
             <label class="search input"><i data-lucide="search" aria-hidden="true"></i><span class="sr-only">搜索任务</span><input id="search" type="search" placeholder="搜索任务"></label>
             </div>
@@ -71,11 +73,11 @@
             <div id="plan-state" class="notice plan-state" aria-label="计划与运行状态" hidden></div>
             <div id="plan-warning" class="notice notice-warning" role="status" hidden></div>
             <div id="load-error" class="notice notice-error" role="alert" hidden></div>
-            <div id="graph-view" class="canvas-view" role="tabpanel" aria-labelledby="tab-graph"><div id="graph-projection-warning" class="notice notice-warning" role="status" hidden></div><div id="graph" aria-label="任务依赖图"></div><div id="graph-a11y" class="graph-a11y" role="list" aria-label="依赖图节点列表"></div><div id="graph-empty" class="empty" hidden>暂无任务</div></div>
+            <div id="graph-view" class="canvas-view" role="tabpanel" aria-labelledby="tab-graph"><div id="graph-projection-warning" class="notice notice-warning" role="status" hidden></div><div id="graph" aria-label="任务依赖图"></div><div id="atomic-graph" aria-label="原子任务依赖图" hidden></div><div id="graph-a11y" class="graph-a11y" role="list" aria-label="依赖图节点列表"></div><div id="graph-empty" class="empty" hidden>暂无任务</div></div>
             <div id="planned-view" class="timeline-view" role="tabpanel" aria-labelledby="tab-planned" hidden><div id="planned-timeline"></div><div class="axis-timezone"></div><div id="planned-unknown" class="unknown"></div></div>
             <div id="actual-view" class="timeline-view" role="tabpanel" aria-labelledby="tab-actual" hidden><div id="actual-timeline"></div><div class="axis-timezone"></div><div id="actual-unknown" class="unknown"></div></div>
           </div>
-          <div class="workspace-tasks">
+          <div id="tasks-view" class="workspace-tasks" role="tabpanel" aria-labelledby="tab-tasks" hidden>
             <section id="group-section" class="task-list-section" aria-labelledby="group-heading"><div class="section-heading"><h2 id="group-heading">交付单元</h2></div><div id="group-list" class="task-list" role="list"></div></section>
             <section id="task-section" class="task-list-section" aria-labelledby="task-heading"><div class="section-heading"><h2 id="task-heading">任务</h2><div class="section-heading-actions"><span id="task-count" class="section-count"></span><div id="task-layout-switch" class="layout-switch" role="group" aria-label="对象布局"><button id="task-layout-board" type="button" class="icon-button layout-option" aria-label="看板布局" aria-describedby="task-layout-board-tooltip" aria-pressed="true"><i data-lucide="columns-3"></i><span id="task-layout-board-tooltip" class="layout-tooltip" role="tooltip">看板布局：按交付单元分列展示任务</span></button><button id="task-layout-grid" type="button" class="icon-button layout-option" aria-label="网格布局" aria-describedby="task-layout-grid-tooltip" aria-pressed="false"><i data-lucide="layout-grid"></i><span id="task-layout-grid-tooltip" class="layout-tooltip" role="tooltip">网格布局：平铺展示任务</span></button></div></div></div><div id="task-list" class="task-list" role="list"></div></section>
           </div>

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

@@ -3,7 +3,7 @@ export const TASK_KIND_LABELS: Record<string, string> = {
   release: "发布 release",
   deployment: "部署 deployment",
   verification: "验证 verification",
-  coordination: "协调 coordination",
+  coordination: "协调（历史兼容） coordination (legacy)",
   development: "贡献 contribution（旧账本）",
   other: "协调 coordination（旧账本）",
   milestone: "里程碑 milestone",

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

@@ -193,6 +193,8 @@ export type View = {
   nodes: Node[];
   edges: Edge[];
   atomic_edges?: { id: string; from_atom_id: string; to_atom_id: string }[];
+  atomic_nodes?: { kind: string; id: string; title: string; state: string; scope?: { kind: string; task_id?: string; delivery_unit_id: string } }[];
+  canonical_atomic_edges?: { id: string; from_node_id: string; to_node_id: string; requires: { kind: string } }[];
   planned_intervals: { node_id: string; start: string | null; end: string | null; start_offset_minutes?: number | null; end_offset_minutes?: number | null }[];
   actual_intervals: { task_id: string; group_id: string; state: string; start: string; end: string | null }[];
   actual_milestones: { node_id: string; occurred_at: string | null }[];

package/toolkit/skills/multi-task-flow/web/view-state.ts

@@ -1,9 +1,11 @@
-export type DashboardTab = "graph" | "planned" | "actual";
+export type DashboardTab = "graph" | "atomic" | "planned" | "actual" | "tasks";
+export type GraphMode = "aggregate" | "atomic";
 export type TaskLayout = "board" | "grid";
 export type Selection = { kind: "task" | "group" | "milestone"; id: string };
 
 export type ViewState = {
   tab: DashboardTab;
+  graphMode: GraphMode;
   layout: TaskLayout;
   query: string;
   group: string;
@@ -21,13 +23,14 @@ export type ViewState = {
 };
 
 export const DEFAULT_VIEW_STATE: ViewState = {
-  tab: "graph", layout: "board", query: "", group: "", state: "", kind: "", plan: null,
+  tab: "graph", graphMode: "aggregate", layout: "board", query: "", group: "", state: "", kind: "", plan: null,
   selected: null, atom: null, detail: false, zoom: 1, plannedStart: null, plannedEnd: null,
   actualStart: null, actualEnd: null,
 };
 
 const idPattern = /^[A-Za-z0-9][A-Za-z0-9_.-]{0,127}$/;
-const tabs = new Set<DashboardTab>(["graph", "planned", "actual"]);
+const tabs = new Set<DashboardTab>(["graph", "atomic", "planned", "actual", "tasks"]);
+const graphModes = new Set<GraphMode>(["aggregate", "atomic"]);
 const taskLayouts = new Set<TaskLayout>(["board", "grid"]);
 
 export function defaultTaskLayout(groupCount: number): TaskLayout {
@@ -90,13 +93,15 @@ export function parseViewState(search: string, validation: ViewStateValidation =
   const params = new URLSearchParams(search.startsWith("?") ? search.slice(1) : search);
   const rawZoom = Number(params.get("zoom"));
   const zoom = Number.isFinite(rawZoom) && rawZoom >= zoomBounds.min && rawZoom <= zoomBounds.max ? Math.round(rawZoom * 100) / 100 : DEFAULT_VIEW_STATE.zoom;
-  const tab = tabs.has(params.get("tab") as DashboardTab) ? params.get("tab") as DashboardTab : DEFAULT_VIEW_STATE.tab;
+  const graphMode = graphModes.has(params.get("graph") as GraphMode) ? params.get("graph") as GraphMode : DEFAULT_VIEW_STATE.graphMode;
+  const requestedTab = tabs.has(params.get("tab") as DashboardTab) ? params.get("tab") as DashboardTab : DEFAULT_VIEW_STATE.tab;
+  const tab = requestedTab === "graph" && graphMode === "atomic" ? "atomic" : requestedTab;
   const layout = taskLayouts.has(params.get("layout") as TaskLayout) ? params.get("layout") as TaskLayout : defaultTaskLayout(validation.groups?.size ?? 0);
   const selected = parseSelection(params.get("selected"), validation);
   const [plannedStart, plannedEnd] = validDateRange(params.get("plannedStart"), params.get("plannedEnd"));
   const [actualStart, actualEnd] = validDateRange(params.get("actualStart"), params.get("actualEnd"));
   return {
-    tab,
+    tab, graphMode,
     layout,
     query: (params.get("q") ?? "").slice(0, 200),
     group: validValue(params.get("group"), validation.groups),
@@ -132,6 +137,7 @@ export function sanitizeViewState(state: ViewState, validation: ViewStateValidat
   const selected = state.selected && parseSelection(`${state.selected.kind}:${state.selected.id}`, validation);
   return {
     ...state,
+    graphMode: graphModes.has(state.graphMode) ? state.graphMode : DEFAULT_VIEW_STATE.graphMode,
     layout: taskLayouts.has(state.layout) ? state.layout : DEFAULT_VIEW_STATE.layout,
     group: validValue(state.group, validation.groups),
     state: validValue(state.state, validation.states),
@@ -146,6 +152,7 @@ export function sanitizeViewState(state: ViewState, validation: ViewStateValidat
 export function serializeViewState(state: ViewState, defaultPlan: string | null = null, defaultTab: DashboardTab = DEFAULT_VIEW_STATE.tab, defaultLayout: TaskLayout = DEFAULT_VIEW_STATE.layout): string {
   const params = new URLSearchParams();
   if (state.tab !== defaultTab) params.set("tab", state.tab);
+  if (state.graphMode !== DEFAULT_VIEW_STATE.graphMode && state.tab !== "atomic") params.set("graph", state.graphMode);
   if (state.layout !== defaultLayout) params.set("layout", state.layout);
   if (state.query) params.set("q", state.query);
   if (state.group) params.set("group", state.group);

package/toolkit/skills/node_modules/@img/colour/LICENSE.md

@@ -0,0 +1,82 @@
+# Licensing
+
+## color
+
+Copyright (c) 2012 Heather Arthur
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+## color-convert
+
+Copyright (c) 2011-2016 Heather Arthur <fayearthur@gmail.com>.
+Copyright (c) 2016-2021 Josh Junon <josh@junon.me>.
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+## color-string
+
+Copyright (c) 2011 Heather Arthur <fayearthur@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+## color-name
+
+The MIT License (MIT)
+Copyright (c) 2015 Dmitry Ivanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/toolkit/skills/node_modules/@img/colour/README.md

@@ -0,0 +1,15 @@
+# `@img/colour`
+
+The latest version of the
+[color](https://www.npmjs.com/package/color)
+package is now ESM-only,
+however some JavaScript runtimes do not yet support this,
+which includes versions of Node.js prior to 20.19.0.
+
+This package converts the `color` package and its dependencies,
+all of which are MIT-licensed, to CommonJS.
+
+- [color](https://www.npmjs.com/package/color)
+- [color-convert](https://www.npmjs.com/package/color-convert)
+- [color-string](https://www.npmjs.com/package/color-string)
+- [color-name](https://www.npmjs.com/package/color-name)