create-project-arch 1.0.0 → 1.2.0

package/templates/arch-ui/components/graph/use-auto-layout.ts

@@ -4,62 +4,62 @@ import type { Edge, Node, ReactFlowInstance } from "reactflow";
 import { ArchNodeData, NODE_HEIGHT, NODE_WIDTH } from "./graph-types";
 
 export function useAutoLayout(
-    setNodes: React.Dispatch<React.SetStateAction<Node<ArchNodeData>[]>>,
-    edges: Edge[],
-    hiddenNodeIds: Set<string>,
-    flowInstance: ReactFlowInstance<ArchNodeData, Edge> | null,
+  setNodes: React.Dispatch<React.SetStateAction<Node<ArchNodeData>[]>>,
+  edges: Edge[],
+  hiddenNodeIds: Set<string>,
+  flowInstance: ReactFlowInstance<ArchNodeData, Edge> | null,
 ) {
-    return useCallback(() => {
-        const currentViewport = flowInstance?.getViewport();
+  return useCallback(() => {
+    const currentViewport = flowInstance?.getViewport();
 
-        setNodes((currentNodes) => {
-            const graph = new dagre.graphlib.Graph();
-            graph.setDefaultEdgeLabel(() => ({}));
-            graph.setGraph({
-                rankdir: "LR",
-                nodesep: 40,
-                ranksep: 100,
-                marginx: 20,
-                marginy: 20,
-            });
+    setNodes((currentNodes) => {
+      const graph = new dagre.graphlib.Graph();
+      graph.setDefaultEdgeLabel(() => ({}));
+      graph.setGraph({
+        rankdir: "LR",
+        nodesep: 40,
+        ranksep: 100,
+        marginx: 20,
+        marginy: 20,
+      });
 
-            const visibleNodeSet = new Set(
-                currentNodes.filter((node) => !hiddenNodeIds.has(node.id)).map((node) => node.id),
-            );
-            currentNodes
-                .filter((node) => visibleNodeSet.has(node.id))
-                .forEach((node) => {
-                    graph.setNode(node.id, { width: NODE_WIDTH, height: NODE_HEIGHT });
-                });
+      const visibleNodeSet = new Set(
+        currentNodes.filter((node) => !hiddenNodeIds.has(node.id)).map((node) => node.id),
+      );
+      currentNodes
+        .filter((node) => visibleNodeSet.has(node.id))
+        .forEach((node) => {
+          graph.setNode(node.id, { width: NODE_WIDTH, height: NODE_HEIGHT });
+        });
 
-            edges
-                .filter((edge) => visibleNodeSet.has(edge.source) && visibleNodeSet.has(edge.target))
-                .forEach((edge) => {
-                    graph.setEdge(edge.source, edge.target);
-                });
+      edges
+        .filter((edge) => visibleNodeSet.has(edge.source) && visibleNodeSet.has(edge.target))
+        .forEach((edge) => {
+          graph.setEdge(edge.source, edge.target);
+        });
 
-            dagre.layout(graph);
+      dagre.layout(graph);
 
-            return currentNodes.map((node) => {
-                if (!visibleNodeSet.has(node.id)) {
-                    return node;
-                }
-                const position = graph.node(node.id) as { x: number; y: number } | undefined;
-                if (!position) {
-                    return node;
-                }
-                return {
-                    ...node,
-                    position: {
-                        x: position.x - NODE_WIDTH / 2,
-                        y: position.y - NODE_HEIGHT / 2,
-                    },
-                };
-            });
-        });
-        if (flowInstance && currentViewport) {
-            // Preserve user zoom/pan while applying new node positions.
-            flowInstance.setViewport(currentViewport, { duration: 0 });
+      return currentNodes.map((node) => {
+        if (!visibleNodeSet.has(node.id)) {
+          return node;
+        }
+        const position = graph.node(node.id) as { x: number; y: number } | undefined;
+        if (!position) {
+          return node;
         }
-    }, [edges, flowInstance, hiddenNodeIds, setNodes]);
+        return {
+          ...node,
+          position: {
+            x: position.x - NODE_WIDTH / 2,
+            y: position.y - NODE_HEIGHT / 2,
+          },
+        };
+      });
+    });
+    if (flowInstance && currentViewport) {
+      // Preserve user zoom/pan while applying new node positions.
+      flowInstance.setViewport(currentViewport, { duration: 0 });
+    }
+  }, [edges, flowInstance, hiddenNodeIds, setNodes]);
 }

package/templates/arch-ui/components/graph/use-connection-validation.ts

@@ -2,61 +2,61 @@ import { addEdge, Connection, Edge, getOutgoers, Node } from "reactflow";
 import type { ArchNodeData, GraphKind } from "./graph-types";
 
 function nodeAllowsOutgoing(kind: GraphKind): GraphKind[] {
-    switch (kind) {
-        case "decision":
-            return ["domain"];
-        case "phase":
-            return ["milestone"];
-        case "milestone":
-            return ["task"];
-        case "task":
-            return ["file", "decision"];
-        case "domain":
-            return ["file"];
-        case "file":
-        default:
-            return [];
-    }
+  switch (kind) {
+    case "decision":
+      return ["domain"];
+    case "phase":
+      return ["milestone"];
+    case "milestone":
+      return ["task"];
+    case "task":
+      return ["file", "decision"];
+    case "domain":
+      return ["file"];
+    case "file":
+    default:
+      return [];
+  }
 }
 
 export function isValidArchitectureConnection(
-    connection: Connection,
-    nodes: Node<ArchNodeData>[],
-    edges: Edge[],
+  connection: Connection,
+  nodes: Node<ArchNodeData>[],
+  edges: Edge[],
 ) {
-    if (!connection.source || !connection.target || connection.source === connection.target) {
-        return false;
-    }
+  if (!connection.source || !connection.target || connection.source === connection.target) {
+    return false;
+  }
 
-    const sourceNode = nodes.find((node) => node.id === connection.source);
-    const targetNode = nodes.find((node) => node.id === connection.target);
-    if (!sourceNode || !targetNode) {
-        return false;
-    }
+  const sourceNode = nodes.find((node) => node.id === connection.source);
+  const targetNode = nodes.find((node) => node.id === connection.target);
+  if (!sourceNode || !targetNode) {
+    return false;
+  }
 
-    const allowedTargets = nodeAllowsOutgoing(sourceNode.data.kind);
-    if (!allowedTargets.includes(targetNode.data.kind)) {
-        return false;
-    }
+  const allowedTargets = nodeAllowsOutgoing(sourceNode.data.kind);
+  if (!allowedTargets.includes(targetNode.data.kind)) {
+    return false;
+  }
 
-    const nextEdges = addEdge({ ...connection, type: "smoothstep" }, edges);
-    const hasCycle = (node: Node<ArchNodeData>, visited = new Set<string>()): boolean => {
-        if (visited.has(node.id)) {
-            return false;
-        }
-        visited.add(node.id);
+  const nextEdges = addEdge({ ...connection, type: "smoothstep" }, edges);
+  const hasCycle = (node: Node<ArchNodeData>, visited = new Set<string>()): boolean => {
+    if (visited.has(node.id)) {
+      return false;
+    }
+    visited.add(node.id);
 
-        const outgoers = getOutgoers(node, nodes, nextEdges);
-        for (const outgoer of outgoers) {
-            if (outgoer.id === connection.source) {
-                return true;
-            }
-            if (hasCycle(outgoer as Node<ArchNodeData>, visited)) {
-                return true;
-            }
-        }
-        return false;
-    };
+    const outgoers = getOutgoers(node, nodes, nextEdges);
+    for (const outgoer of outgoers) {
+      if (outgoer.id === connection.source) {
+        return true;
+      }
+      if (hasCycle(outgoer as Node<ArchNodeData>, visited)) {
+        return true;
+      }
+    }
+    return false;
+  };
 
-    return !hasCycle(targetNode);
+  return !hasCycle(targetNode);
 }

package/templates/arch-ui/components/graph/use-flow-persistence.ts

@@ -3,46 +3,46 @@ import type { Edge, Node, ReactFlowInstance } from "reactflow";
 import { ArchNodeData } from "./graph-types";
 
 export function useFlowPersistence(
-    setNodes: React.Dispatch<React.SetStateAction<Node<ArchNodeData>[]>>,
-    setEdges: React.Dispatch<React.SetStateAction<Edge[]>>,
-    setHiddenNodeIds: React.Dispatch<React.SetStateAction<Set<string>>>,
-    flowInstance: ReactFlowInstance<ArchNodeData, Edge> | null,
-    storageKey: string,
+  setNodes: React.Dispatch<React.SetStateAction<Node<ArchNodeData>[]>>,
+  setEdges: React.Dispatch<React.SetStateAction<Edge[]>>,
+  setHiddenNodeIds: React.Dispatch<React.SetStateAction<Set<string>>>,
+  flowInstance: ReactFlowInstance<ArchNodeData, Edge> | null,
+  storageKey: string,
 ) {
-    const saveFlow = useCallback(() => {
-        if (typeof window === "undefined" || !flowInstance) return;
-        const flow = flowInstance.toObject();
-        window.localStorage.setItem(
-            storageKey,
-            JSON.stringify({
-                nodes: flow.nodes,
-                edges: flow.edges,
-                viewport: flow.viewport,
-            }),
-        );
-    }, [flowInstance, storageKey]);
+  const saveFlow = useCallback(() => {
+    if (typeof window === "undefined" || !flowInstance) return;
+    const flow = flowInstance.toObject();
+    window.localStorage.setItem(
+      storageKey,
+      JSON.stringify({
+        nodes: flow.nodes,
+        edges: flow.edges,
+        viewport: flow.viewport,
+      }),
+    );
+  }, [flowInstance, storageKey]);
 
-    const restoreFlow = useCallback(() => {
-        if (typeof window === "undefined") return;
-        const payload = window.localStorage.getItem(storageKey);
-        if (!payload) return;
+  const restoreFlow = useCallback(() => {
+    if (typeof window === "undefined") return;
+    const payload = window.localStorage.getItem(storageKey);
+    if (!payload) return;
 
-        try {
-            const parsed = JSON.parse(payload) as {
-                nodes: Node<ArchNodeData>[];
-                edges: Edge[];
-                viewport?: { x: number; y: number; zoom: number };
-            };
-            setNodes(parsed.nodes);
-            setEdges(parsed.edges);
-            if (parsed.viewport && flowInstance) {
-                flowInstance.setViewport(parsed.viewport);
-            }
-            setHiddenNodeIds(new Set());
-        } catch {
-            // Ignore invalid state.
-        }
-    }, [flowInstance, setEdges, setNodes, setHiddenNodeIds, storageKey]);
+    try {
+      const parsed = JSON.parse(payload) as {
+        nodes: Node<ArchNodeData>[];
+        edges: Edge[];
+        viewport?: { x: number; y: number; zoom: number };
+      };
+      setNodes(parsed.nodes);
+      setEdges(parsed.edges);
+      if (parsed.viewport && flowInstance) {
+        flowInstance.setViewport(parsed.viewport);
+      }
+      setHiddenNodeIds(new Set());
+    } catch {
+      // Ignore invalid state.
+    }
+  }, [flowInstance, setEdges, setNodes, setHiddenNodeIds, storageKey]);
 
-    return { saveFlow, restoreFlow };
+  return { saveFlow, restoreFlow };
 }

package/templates/arch-ui/components/graph-canvas.tsx

@@ -85,17 +85,16 @@ export function GraphCanvas({
   );
   const storageKey = `arch:graph:view:${viewMode}:v1`;
 
-  const initialGraph = useMemo(
-    () => buildGraphFromDataset(data, viewMode),
-    [data, viewMode],
-  );
+  const initialGraph = useMemo(() => buildGraphFromDataset(data, viewMode), [data, viewMode]);
 
   const [nodes, setNodes, onNodesChange] = useNodesState<ArchNodeData>(initialGraph.nodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialGraph.edges);
 
   useEffect(() => {
     setNodes((currentNodes) => {
-      const currentPositions = new Map(currentNodes.map((node) => [node.id, node.position] as const));
+      const currentPositions = new Map(
+        currentNodes.map((node) => [node.id, node.position] as const),
+      );
       return initialGraph.nodes.map((node) => {
         const remembered = rememberedPositions.current.get(node.id);
         const current = currentPositions.get(node.id);
@@ -174,10 +173,7 @@ export function GraphCanvas({
           if (hiddenNodeIds.has(node.id)) return false;
           if (!viewKinds[viewMode].includes(node.data.kind)) return false;
           const typeLabel = (node.data.canonicalType ?? "").toLowerCase();
-          if (
-            typeLabel.includes("arch_folder") &&
-            !enabledFilters.includes("domains")
-          ) {
+          if (typeLabel.includes("arch_folder") && !enabledFilters.includes("domains")) {
             return false;
           }
           if (
@@ -192,10 +188,7 @@ export function GraphCanvas({
           if (typeLabel.includes("roadmap_") && !enabledFilters.includes("tasks")) {
             return false;
           }
-          if (
-            typeLabel.includes("project_folder") &&
-            !enabledFilters.includes("modules")
-          ) {
+          if (typeLabel.includes("project_folder") && !enabledFilters.includes("modules")) {
             return false;
           }
           if (
@@ -345,71 +338,92 @@ export function GraphCanvas({
       if (!inScope) return false;
       return matchesSearch(node);
     });
-  }, [edges, enabledFilters, hideCompletedTasks, hiddenNodeIds, neighborhoodIds, nodes, pinnedNodeIds, searchQuery, selectedNodeId, showExternalDependencies, viewMode]);
-  const visibleEdges = useMemo(
-    () => {
-      const allowedEdgeTypes = new Set(enabledEdgeFilters);
-      const allowedAuthorities = new Set(enabledAuthorityFilters);
-      const baseEdges = edges.filter(
-        (edge) =>
-          !hiddenNodeIds.has(edge.source) &&
-          !hiddenNodeIds.has(edge.target) &&
-          allowedEdgeTypes.has((edge.data?.edgeType as GraphEdgeFilter | undefined) ?? "dependency") &&
-          allowedAuthorities.has(
-            (edge.data?.authority as GraphEdgeAuthority | undefined) ?? "authoritative",
-          ),
-      );
-      const precedence = new Map<string, number>([
-        ["authoritative", 3],
-        ["manual", 2],
-        ["inferred", 1],
-      ]);
-      const dedupedByRelation = new Map<string, Edge>();
-      baseEdges.forEach((edge) => {
-        const key = `${edge.source}|${edge.target}|${edge.data?.edgeType ?? "dependency"}`;
-        const incomingScore = precedence.get(edge.data?.authority ?? "authoritative") ?? 0;
-        const existing = dedupedByRelation.get(key);
-        if (!existing) {
-          dedupedByRelation.set(key, edge);
-          return;
-        }
-        const existingScore = precedence.get(existing.data?.authority ?? "authoritative") ?? 0;
-        if (incomingScore > existingScore) {
-          dedupedByRelation.set(key, edge);
-        }
-      });
-      const resolvedEdges = [...dedupedByRelation.values()];
-      if (!selectedNodeId) {
-        if (viewMode === "project" && searchQuery.trim().length === 0) {
-          const visibleNodeIdSet = new Set(visibleNodes.map((node) => node.id));
-          return resolvedEdges.filter(
-            (edge) => visibleNodeIdSet.has(edge.source) && visibleNodeIdSet.has(edge.target),
-          );
-        }
-        if (viewMode === "architecture-map" && searchQuery.trim().length === 0) {
-          const visibleNodeIdSet = new Set(visibleNodes.map((node) => node.id));
-          return resolvedEdges.filter(
-            (edge) => visibleNodeIdSet.has(edge.source) && visibleNodeIdSet.has(edge.target),
-          );
-        }
-        if (viewMode === "tasks" && searchQuery.trim().length === 0) {
-          const visibleNodeIdSet = new Set(visibleNodes.map((node) => node.id));
-          return resolvedEdges.filter(
-            (edge) => visibleNodeIdSet.has(edge.source) && visibleNodeIdSet.has(edge.target),
-          );
-        }
-        if (pinnedNodeIds.size === 0) return [];
+  }, [
+    edges,
+    enabledFilters,
+    hideCompletedTasks,
+    hiddenNodeIds,
+    neighborhoodIds,
+    nodes,
+    pinnedNodeIds,
+    searchQuery,
+    selectedNodeId,
+    showExternalDependencies,
+    viewMode,
+  ]);
+  const visibleEdges = useMemo(() => {
+    const allowedEdgeTypes = new Set(enabledEdgeFilters);
+    const allowedAuthorities = new Set(enabledAuthorityFilters);
+    const baseEdges = edges.filter(
+      (edge) =>
+        !hiddenNodeIds.has(edge.source) &&
+        !hiddenNodeIds.has(edge.target) &&
+        allowedEdgeTypes.has(
+          (edge.data?.edgeType as GraphEdgeFilter | undefined) ?? "dependency",
+        ) &&
+        allowedAuthorities.has(
+          (edge.data?.authority as GraphEdgeAuthority | undefined) ?? "authoritative",
+        ),
+    );
+    const precedence = new Map<string, number>([
+      ["authoritative", 3],
+      ["manual", 2],
+      ["inferred", 1],
+    ]);
+    const dedupedByRelation = new Map<string, Edge>();
+    baseEdges.forEach((edge) => {
+      const key = `${edge.source}|${edge.target}|${edge.data?.edgeType ?? "dependency"}`;
+      const incomingScore = precedence.get(edge.data?.authority ?? "authoritative") ?? 0;
+      const existing = dedupedByRelation.get(key);
+      if (!existing) {
+        dedupedByRelation.set(key, edge);
+        return;
+      }
+      const existingScore = precedence.get(existing.data?.authority ?? "authoritative") ?? 0;
+      if (incomingScore > existingScore) {
+        dedupedByRelation.set(key, edge);
+      }
+    });
+    const resolvedEdges = [...dedupedByRelation.values()];
+    if (!selectedNodeId) {
+      if (viewMode === "project" && searchQuery.trim().length === 0) {
+        const visibleNodeIdSet = new Set(visibleNodes.map((node) => node.id));
         return resolvedEdges.filter(
-          (edge) => pinnedNodeIds.has(edge.source) && pinnedNodeIds.has(edge.target),
+          (edge) => visibleNodeIdSet.has(edge.source) && visibleNodeIdSet.has(edge.target),
         );
       }
-      const visibleNodeIdSet = new Set(visibleNodes.map((node) => node.id));
+      if (viewMode === "architecture-map" && searchQuery.trim().length === 0) {
+        const visibleNodeIdSet = new Set(visibleNodes.map((node) => node.id));
+        return resolvedEdges.filter(
+          (edge) => visibleNodeIdSet.has(edge.source) && visibleNodeIdSet.has(edge.target),
+        );
+      }
+      if (viewMode === "tasks" && searchQuery.trim().length === 0) {
+        const visibleNodeIdSet = new Set(visibleNodes.map((node) => node.id));
+        return resolvedEdges.filter(
+          (edge) => visibleNodeIdSet.has(edge.source) && visibleNodeIdSet.has(edge.target),
+        );
+      }
+      if (pinnedNodeIds.size === 0) return [];
       return resolvedEdges.filter(
-        (edge) => visibleNodeIdSet.has(edge.source) && visibleNodeIdSet.has(edge.target),
+        (edge) => pinnedNodeIds.has(edge.source) && pinnedNodeIds.has(edge.target),
       );
-    },
-    [edges, enabledAuthorityFilters, enabledEdgeFilters, hiddenNodeIds, pinnedNodeIds, searchQuery, selectedNodeId, viewMode, visibleNodes],
-  );
+    }
+    const visibleNodeIdSet = new Set(visibleNodes.map((node) => node.id));
+    return resolvedEdges.filter(
+      (edge) => visibleNodeIdSet.has(edge.source) && visibleNodeIdSet.has(edge.target),
+    );
+  }, [
+    edges,
+    enabledAuthorityFilters,
+    enabledEdgeFilters,
+    hiddenNodeIds,
+    pinnedNodeIds,
+    searchQuery,
+    selectedNodeId,
+    viewMode,
+    visibleNodes,
+  ]);
   const renderedEdges = useMemo(
     () =>
       visibleEdges.map((edge) => ({
@@ -526,7 +540,9 @@ export function GraphCanvas({
 
   function selectNodeForInspector(node: Node<ArchNodeData>) {
     const parsed = parseNodeId(node.id);
-    const hasVisibleLinks = visibleEdges.some((edge) => edge.source === node.id || edge.target === node.id);
+    const hasVisibleLinks = visibleEdges.some(
+      (edge) => edge.source === node.id || edge.target === node.id,
+    );
     const metadata = [...node.data.metadata];
     if (viewMode === "architecture-map" && !hasVisibleLinks) {
       metadata.push({