create-project-arch 1.1.0 → 1.2.0

package/templates/arch-ui/.arch/edges/task_to_decision.json

@@ -1,4 +1,3 @@
 {
   "edges": []
 }
-

package/templates/arch-ui/.arch/edges/task_to_module.json

@@ -1,4 +1,3 @@
 {
   "edges": []
 }
-

package/templates/arch-ui/.arch/graph.json

@@ -14,4 +14,3 @@
     "milestone_to_task": 0
   }
 }
-

package/templates/arch-ui/.arch/nodes/decisions.json

@@ -1,4 +1,3 @@
 {
   "decisions": []
 }
-

package/templates/arch-ui/.arch/nodes/domains.json

@@ -1,4 +1,3 @@
 {
   "domains": []
 }
-

package/templates/arch-ui/.arch/nodes/milestones.json

@@ -1,4 +1,3 @@
 {
   "milestones": []
 }
-

package/templates/arch-ui/.arch/nodes/modules.json

@@ -1,4 +1,3 @@
 {
   "modules": []
 }
-

package/templates/arch-ui/.arch/nodes/tasks.json

@@ -1,4 +1,3 @@
 {
   "tasks": []
 }
-

package/templates/arch-ui/app/api/health/route.ts

@@ -9,12 +9,13 @@ export const runtime = "nodejs";
 export async function GET() {
   const root = getProjectRoot();
   process.env.PROJECT_ROOT = root;
-  const [checkResult, architectureMap] = await Promise.all([check.checkRun(), readArchitectureMap(root)]);
+  const [checkResult, architectureMap] = await Promise.all([
+    check.checkRun(),
+    readArchitectureMap(root),
+  ]);
   const { validation } = await buildValidatedGraphDataset(root, architectureMap);
 
-  const graphErrors = validation.errors.map(
-    (issue) => `[graph:${issue.ruleId}] ${issue.message}`,
-  );
+  const graphErrors = validation.errors.map((issue) => `[graph:${issue.ruleId}] ${issue.message}`);
   const graphWarnings = validation.warnings.map(
     (issue) => `[graph:${issue.ruleId}] ${issue.message}`,
   );

package/templates/arch-ui/app/api/node-files/route.ts

@@ -132,7 +132,12 @@ async function resolveFilesForNode(root: string, type: NodeType, id: string): Pr
     const [phase] = id.split("/");
     if (!phase || !isSafeSegment(phase)) return [];
     const phaseDir = path.join(root, "roadmap", "phases", phase);
-    return collectFiles(phaseDir, root, new Set(["milestones", "tasks", "node_modules", ".git"]), 2);
+    return collectFiles(
+      phaseDir,
+      root,
+      new Set(["milestones", "tasks", "node_modules", ".git"]),
+      2,
+    );
   }
 
   const [phase, milestone] = id.split("/");

package/templates/arch-ui/app/api/search/route.ts

@@ -53,4 +53,3 @@ export async function GET(request: NextRequest) {
     results: results.slice(0, 30),
   });
 }
-

package/templates/arch-ui/app/work/page.tsx

@@ -44,14 +44,18 @@ export default function WorkPage() {
         setPhases(phaseResult.value);
       } else {
         setPhases([]);
-        errors.push(`Phases unavailable: ${phaseResult.reason instanceof Error ? phaseResult.reason.message : "Unknown error"}`);
+        errors.push(
+          `Phases unavailable: ${phaseResult.reason instanceof Error ? phaseResult.reason.message : "Unknown error"}`,
+        );
       }
 
       if (taskResult.status === "fulfilled") {
         setTasks(taskResult.value.tasks);
       } else {
         setTasks([]);
-        errors.push(`Tasks unavailable: ${taskResult.reason instanceof Error ? taskResult.reason.message : "Unknown error"}`);
+        errors.push(
+          `Tasks unavailable: ${taskResult.reason instanceof Error ? taskResult.reason.message : "Unknown error"}`,
+        );
       }
 
       if (graphResult.status === "fulfilled") {
@@ -59,7 +63,9 @@ export default function WorkPage() {
         setGraphValidation(graphResult.value.validation);
         if (!graphResult.value.validation.valid) {
           errors.push(
-            ...graphResult.value.validation.errors.map((issue) => `Graph schema error: ${issue.message}`),
+            ...graphResult.value.validation.errors.map(
+              (issue) => `Graph schema error: ${issue.message}`,
+            ),
           );
         }
       } else {
@@ -81,7 +87,8 @@ export default function WorkPage() {
   }, []);
 
   const viewParam = searchParams.get("view");
-  const view = viewParam === "project" ? "project" : viewParam === "architecture" ? "architecture" : "tasks";
+  const view =
+    viewParam === "project" ? "project" : viewParam === "architecture" ? "architecture" : "tasks";
 
   const milestones = useMemo(() => {
     const milestoneSet = new Set<string>();
@@ -115,9 +122,11 @@ export default function WorkPage() {
   );
   const activeAuthorityFilters = useMemo(
     () =>
-      (Object.entries(filters.authorityTypes) as Array<
-        [keyof typeof filters.authorityTypes, boolean]
-      >)
+      (
+        Object.entries(filters.authorityTypes) as Array<
+          [keyof typeof filters.authorityTypes, boolean]
+        >
+      )
         .filter(([, enabled]) => enabled)
         .map(([filter]) => filter),
     [filters.authorityTypes],
@@ -140,19 +149,27 @@ export default function WorkPage() {
           <Tabs>
             <TabsList>
               <TabsTrigger
-                className={view === "architecture" ? "border border-blue-700 bg-slate-800 text-slate-100" : ""}
+                className={
+                  view === "architecture"
+                    ? "border border-blue-700 bg-slate-800 text-slate-100"
+                    : ""
+                }
                 onClick={() => router.push("/work?view=architecture")}
               >
                 Architecture
               </TabsTrigger>
               <TabsTrigger
-                className={view === "tasks" ? "border border-blue-700 bg-slate-800 text-slate-100" : ""}
+                className={
+                  view === "tasks" ? "border border-blue-700 bg-slate-800 text-slate-100" : ""
+                }
                 onClick={() => router.push("/work?view=tasks")}
               >
                 Tasks
               </TabsTrigger>
               <TabsTrigger
-                className={view === "project" ? "border border-blue-700 bg-slate-800 text-slate-100" : ""}
+                className={
+                  view === "project" ? "border border-blue-700 bg-slate-800 text-slate-100" : ""
+                }
                 onClick={() => router.push("/work?view=project")}
               >
                 Project
@@ -166,13 +183,17 @@ export default function WorkPage() {
         <div className="rounded-xl border border-red-700 bg-red-950/60 p-3 text-sm text-red-200">
           <p className="font-medium">Graph activation blocked by schema validation errors.</p>
           {graphValidation.errors.map((issue, index) => (
-            <p key={`${issue.ruleId}:${index}`}>[{issue.ruleId}] {issue.message}</p>
+            <p key={`${issue.ruleId}:${index}`}>
+              [{issue.ruleId}] {issue.message}
+            </p>
           ))}
         </div>
       ) : graphData ? (
         <GraphCanvas
           data={graphData}
-          viewMode={view === "project" ? "project" : view === "architecture" ? "architecture-map" : "tasks"}
+          viewMode={
+            view === "project" ? "project" : view === "architecture" ? "architecture-map" : "tasks"
+          }
           enabledFilters={activeFilters}
           enabledEdgeFilters={activeEdgeFilters}
           enabledAuthorityFilters={activeAuthorityFilters}
@@ -182,7 +203,14 @@ export default function WorkPage() {
           hideCompletedTasks={filters.hideCompletedTasks}
           onNodeSelect={(node) =>
             setSelection({
-              type: node.type as "domain" | "decision" | "phase" | "milestone" | "task" | "file" | "health",
+              type: node.type as
+                | "domain"
+                | "decision"
+                | "phase"
+                | "milestone"
+                | "task"
+                | "file"
+                | "health",
               title: node.title,
               id: node.id,
               metadata: node.metadata,
@@ -199,66 +227,68 @@ export default function WorkPage() {
         <div className="rounded-xl border border-amber-700 bg-amber-950/60 p-3 text-sm text-amber-200">
           <p className="font-medium">Graph warnings</p>
           {graphValidation.warnings.map((issue, index) => (
-            <p key={`${issue.ruleId}:${index}`}>[{issue.ruleId}] {issue.message}</p>
+            <p key={`${issue.ruleId}:${index}`}>
+              [{issue.ruleId}] {issue.message}
+            </p>
           ))}
         </div>
       ) : null}
 
       {view !== "architecture" ? (
-      <Card>
-        <CardHeader>
-          <CardTitle>Roadmap Work</CardTitle>
-        </CardHeader>
-        <CardContent className="grid gap-2">
-          <div className="flex flex-wrap gap-2">
-            <Select value={phase} onChange={(event) => setPhase(event.target.value)}>
-              <option value="all">All phases</option>
-              {phases.map((item) => (
-                <option key={item.id} value={item.id}>
-                  {item.id} {item.active ? "(active)" : ""}
-                </option>
-              ))}
-            </Select>
-            <Input
-              placeholder="Search task..."
-              value={query}
-              onChange={(event) => setQuery(event.target.value)}
-            />
-          </div>
+        <Card>
+          <CardHeader>
+            <CardTitle>Roadmap Work</CardTitle>
+          </CardHeader>
+          <CardContent className="grid gap-2">
+            <div className="flex flex-wrap gap-2">
+              <Select value={phase} onChange={(event) => setPhase(event.target.value)}>
+                <option value="all">All phases</option>
+                {phases.map((item) => (
+                  <option key={item.id} value={item.id}>
+                    {item.id} {item.active ? "(active)" : ""}
+                  </option>
+                ))}
+              </Select>
+              <Input
+                placeholder="Search task..."
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+              />
+            </div>
 
-          <div className="grid gap-1 text-slate-400">
-            {milestones.map((milestone) => (
-              <span key={milestone}>{milestone}</span>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
+            <div className="grid gap-1 text-slate-400">
+              {milestones.map((milestone) => (
+                <span key={milestone}>{milestone}</span>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
       ) : null}
 
       {view !== "architecture" ? (
-      <Card>
-        <CardHeader>
-          <CardTitle>Tasks</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <WorkTable
-            tasks={filteredTasks}
-            onSelectTask={(task) =>
-              setSelection({
-                type: "task",
-                title: task.title,
-                id: task.id,
-                metadata: [
-                  { label: "Phase", value: task.milestone.split("/")[0] ?? "unknown" },
-                  { label: "Milestone", value: task.milestone },
-                  { label: "Status", value: task.lane },
-                  { label: "Domain", value: task.domain ?? "foundation" },
-                ],
-              })
-            }
-          />
-        </CardContent>
-      </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Tasks</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <WorkTable
+              tasks={filteredTasks}
+              onSelectTask={(task) =>
+                setSelection({
+                  type: "task",
+                  title: task.title,
+                  id: task.id,
+                  metadata: [
+                    { label: "Phase", value: task.milestone.split("/")[0] ?? "unknown" },
+                    { label: "Milestone", value: task.milestone },
+                    { label: "Status", value: task.lane },
+                    { label: "Domain", value: task.domain ?? "foundation" },
+                  ],
+                })
+              }
+            />
+          </CardContent>
+        </Card>
       ) : null}
     </div>
   );

package/templates/arch-ui/components/app-shell.tsx

@@ -57,13 +57,7 @@ function AppShellContent({ children }: { children: ReactNode }) {
     }
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
-  }, [
-    leftCollapsed,
-    resetLayout,
-    rightCollapsed,
-    setLeftCollapsed,
-    setRightCollapsed,
-  ]);
+  }, [leftCollapsed, resetLayout, rightCollapsed, setLeftCollapsed, setRightCollapsed]);
 
   const shellStyle = useMemo(() => {
     const leftResizer = leftCollapsed ? 0 : resizerWidth;

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

@@ -40,14 +40,20 @@ export function ArchNode({ data, selected }: NodeProps<ArchNodeData>) {
   const metadataPreviewCount = detailLevel === 0 ? 1 : detailLevel === 1 ? 2 : 4;
 
   return (
-    <div className={`w-[280px] rounded-xl border border-slate-600 px-2.5 py-2 text-slate-100 shadow ${toneClass}`}>
+    <div
+      className={`w-[280px] rounded-xl border border-slate-600 px-2.5 py-2 text-slate-100 shadow ${toneClass}`}
+    >
       <NodeToolbar isVisible={selected} position={Position.Top}>
         <div className="flex items-center gap-2 rounded-md border border-slate-600 bg-slate-950 px-2 py-1">
           <Badge variant="secondary">{data.kind}</Badge>
           <span className="text-xs text-slate-400">drag, connect</span>
         </div>
       </NodeToolbar>
-      <Handle type="target" position={Position.Left} className="!h-2 !w-2 !border !border-slate-900 !bg-slate-200" />
+      <Handle
+        type="target"
+        position={Position.Left}
+        className="!h-2 !w-2 !border !border-slate-900 !bg-slate-200"
+      />
       <div className="mb-1 text-[13px] font-semibold" style={titleStyle}>
         {data.label}
       </div>
@@ -69,7 +75,11 @@ export function ArchNode({ data, selected }: NodeProps<ArchNodeData>) {
             .join(" · ")}
         </div>
       ) : null}
-      <Handle type="source" position={Position.Right} className="!h-2 !w-2 !border !border-slate-900 !bg-slate-200" />
+      <Handle
+        type="source"
+        position={Position.Right}
+        className="!h-2 !w-2 !border !border-slate-900 !bg-slate-200"
+      />
     </div>
   );
 }

package/templates/arch-ui/components/graph/build-graph-from-dataset.ts

@@ -103,7 +103,10 @@ function estimateNodeWidth(node: GraphDataset["nodes"][number]): number {
     const normalized = Array.isArray(value) ? value.join(", ") : String(value);
     return `${key}: ${normalized}`;
   });
-  const metadataWidth = metadataStrings.reduce((max, value) => Math.max(max, value.length * 6.8), 0);
+  const metadataWidth = metadataStrings.reduce(
+    (max, value) => Math.max(max, value.length * 6.8),
+    0,
+  );
   const estimated = base + Math.max(titleWidth, subtitleWidth, metadataWidth) * 0.58;
   return Math.max(240, Math.min(estimated, 760));
 }
@@ -136,7 +139,8 @@ export function buildGraphFromDataset(
     columnX.set(column, cursorX);
     const currentWidth = columnMaxWidth.get(column) ?? 260;
     const nextColumn = columns[index + 1];
-    const nextWidth = nextColumn === undefined ? currentWidth : (columnMaxWidth.get(nextColumn) ?? 260);
+    const nextWidth =
+      nextColumn === undefined ? currentWidth : (columnMaxWidth.get(nextColumn) ?? 260);
     const adaptiveGap = Math.max(
       MIN_HORIZONTAL_GAP,
       Math.round(Math.max(currentWidth, nextWidth) * 0.24),