npm - create-project-arch - Versions diffs - 1.0.0 - Mend

create-project-arch 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (90) hide show

package/README.md +58 -0
package/dist/cli.js +232 -0
package/dist/cli.test.js +8 -0
package/package.json +29 -0
package/templates/arch-ui/.arch/edges/decision_to_domain.json +4 -0
package/templates/arch-ui/.arch/edges/milestone_to_task.json +4 -0
package/templates/arch-ui/.arch/edges/task_to_decision.json +4 -0
package/templates/arch-ui/.arch/edges/task_to_module.json +4 -0
package/templates/arch-ui/.arch/graph.json +17 -0
package/templates/arch-ui/.arch/nodes/decisions.json +4 -0
package/templates/arch-ui/.arch/nodes/domains.json +4 -0
package/templates/arch-ui/.arch/nodes/milestones.json +4 -0
package/templates/arch-ui/.arch/nodes/modules.json +4 -0
package/templates/arch-ui/.arch/nodes/tasks.json +4 -0
package/templates/arch-ui/app/api/architecture/map/route.ts +13 -0
package/templates/arch-ui/app/api/decisions/route.ts +23 -0
package/templates/arch-ui/app/api/domain-docs/route.ts +89 -0
package/templates/arch-ui/app/api/domains/route.ts +10 -0
package/templates/arch-ui/app/api/graph/route.ts +16 -0
package/templates/arch-ui/app/api/health/route.ts +44 -0
package/templates/arch-ui/app/api/node-files/route.ts +173 -0
package/templates/arch-ui/app/api/phases/route.ts +10 -0
package/templates/arch-ui/app/api/route.ts +22 -0
package/templates/arch-ui/app/api/search/route.ts +56 -0
package/templates/arch-ui/app/api/task-doc/[taskId]/route.ts +60 -0
package/templates/arch-ui/app/api/tasks/route.ts +36 -0
package/templates/arch-ui/app/api/trace/file/route.ts +40 -0
package/templates/arch-ui/app/api/trace/task/[taskId]/route.ts +12 -0
package/templates/arch-ui/app/architecture/page.tsx +5 -0
package/templates/arch-ui/app/globals.css +240 -0
package/templates/arch-ui/app/health/page.tsx +48 -0
package/templates/arch-ui/app/layout.tsx +19 -0
package/templates/arch-ui/app/page.tsx +5 -0
package/templates/arch-ui/app/work/page.tsx +265 -0
package/templates/arch-ui/components/app-shell.tsx +171 -0
package/templates/arch-ui/components/error-boundary.tsx +53 -0
package/templates/arch-ui/components/graph/arch-node.tsx +77 -0
package/templates/arch-ui/components/graph/build-graph-from-dataset.ts +196 -0
package/templates/arch-ui/components/graph/build-initial-graph.ts +245 -0
package/templates/arch-ui/components/graph/graph-context-menu.tsx +84 -0
package/templates/arch-ui/components/graph/graph-doc-panel.tsx +46 -0
package/templates/arch-ui/components/graph/graph-types.ts +82 -0
package/templates/arch-ui/components/graph/use-auto-layout.ts +65 -0
package/templates/arch-ui/components/graph/use-connection-validation.ts +62 -0
package/templates/arch-ui/components/graph/use-flow-persistence.ts +48 -0
package/templates/arch-ui/components/graph-canvas.tsx +670 -0
package/templates/arch-ui/components/health-panel.tsx +49 -0
package/templates/arch-ui/components/inspector-context.tsx +35 -0
package/templates/arch-ui/components/inspector.tsx +895 -0
package/templates/arch-ui/components/markdown-viewer.tsx +74 -0
package/templates/arch-ui/components/sidebar.tsx +531 -0
package/templates/arch-ui/components/topbar.tsx +187 -0
package/templates/arch-ui/components/work-table.tsx +57 -0
package/templates/arch-ui/components/workspace-context.tsx +274 -0
package/templates/arch-ui/eslint.config.js +2 -0
package/templates/arch-ui/global.d.ts +1 -0
package/templates/arch-ui/lib/api.ts +93 -0
package/templates/arch-ui/lib/arch-model.ts +113 -0
package/templates/arch-ui/lib/graph-dataset.ts +756 -0
package/templates/arch-ui/lib/graph-schema.ts +408 -0
package/templates/arch-ui/lib/project-root.ts +52 -0
package/templates/arch-ui/lib/types.ts +116 -0
package/templates/arch-ui/next-env.d.ts +6 -0
package/templates/arch-ui/next.config.js +17 -0
package/templates/arch-ui/package.json +38 -0
package/templates/arch-ui/postcss.config.mjs +6 -0
package/templates/arch-ui/tailwind.config.ts +11 -0
package/templates/arch-ui/tsconfig.json +21 -0
package/templates/ui-package/eslint.config.mjs +4 -0
package/templates/ui-package/package.json +26 -0
package/templates/ui-package/src/accordion.tsx +10 -0
package/templates/ui-package/src/badge.tsx +12 -0
package/templates/ui-package/src/button.tsx +32 -0
package/templates/ui-package/src/card.tsx +22 -0
package/templates/ui-package/src/code.tsx +6 -0
package/templates/ui-package/src/command.tsx +18 -0
package/templates/ui-package/src/dialog.tsx +6 -0
package/templates/ui-package/src/dropdown-menu.tsx +10 -0
package/templates/ui-package/src/input.tsx +6 -0
package/templates/ui-package/src/navigation-menu.tsx +6 -0
package/templates/ui-package/src/scroll-area.tsx +6 -0
package/templates/ui-package/src/select.tsx +6 -0
package/templates/ui-package/src/separator.tsx +6 -0
package/templates/ui-package/src/sheet.tsx +6 -0
package/templates/ui-package/src/skeleton.tsx +6 -0
package/templates/ui-package/src/table.tsx +26 -0
package/templates/ui-package/src/tabs.tsx +14 -0
package/templates/ui-package/src/toggle-group.tsx +10 -0
package/templates/ui-package/src/utils.ts +3 -0
package/templates/ui-package/tsconfig.json +10 -0

package/templates/arch-ui/app/health/page.tsx ADDED Viewed

@@ -0,0 +1,48 @@
+"use client";
+import { Card, CardContent, CardHeader, CardTitle } from "@repo/ui/card";
+import { useEffect, useState } from "react";
+import { HealthPanel } from "../../components/health-panel";
+import { useInspector } from "../../components/inspector-context";
+import { getHealth } from "../../lib/api";
+import { CheckData } from "../../lib/types";
+export default function HealthPage() {
+  const [data, setData] = useState<CheckData | null>(null);
+  const { setSelection } = useInspector();
+  useEffect(() => {
+    void getHealth().then(setData);
+  }, []);
+  return (
+    <div className="grid gap-3">
+      <Card>
+        <CardHeader>
+          <CardTitle>Architecture Health</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {data ? (
+            <HealthPanel
+              health={data}
+              onInspect={(label, status) =>
+                setSelection({
+                  type: "health",
+                  title: label,
+                  metadata: [
+                    { label: "Status", value: status },
+                    { label: "Errors", value: String(data.errors.length) },
+                    { label: "Warnings", value: String(data.warnings.length) },
+                  ],
+                  links: [...data.errors, ...data.warnings],
+                })
+              }
+            />
+          ) : (
+            <p>Loading health checks...</p>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/templates/arch-ui/app/layout.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import "./globals.css";
+import { AppShell } from "../components/app-shell";
+export const metadata = {
+  title: "Architecture Control Surface",
+  description: "Architecture graph and traceability UI",
+};
+export const dynamic = "force-dynamic";
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body className="h-dvh overflow-hidden">
+        <AppShell>{children}</AppShell>
+      </body>
+    </html>
+  );
+}

package/templates/arch-ui/app/page.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+export default function Page() {
+  redirect("/work?view=architecture");
+}

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

@@ -0,0 +1,265 @@
+"use client";
+import { Card, CardContent, CardHeader, CardTitle } from "@repo/ui/card";
+import { Input } from "@repo/ui/input";
+import { Select } from "@repo/ui/select";
+import { Tabs, TabsList, TabsTrigger } from "@repo/ui/tabs";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import { GraphCanvas } from "../../components/graph-canvas";
+import { GraphEdgeFilter } from "../../components/graph/graph-types";
+import { useInspector } from "../../components/inspector-context";
+import { WorkTable } from "../../components/work-table";
+import { useWorkspace } from "../../components/workspace-context";
+import { getGraphDataset, getPhases, getTasks } from "../../lib/api";
+import { GraphDatasetResponse, GraphValidationData, TaskNode } from "../../lib/types";
+const defaultFilters = ["domains", "modules", "tasks", "decisions"] as Array<
+  "domains" | "modules" | "tasks" | "decisions"
+>;
+export default function WorkPage() {
+  const [phases, setPhases] = useState<Array<{ id: string; active: boolean }>>([]);
+  const [tasks, setTasks] = useState<TaskNode[]>([]);
+  const [graphData, setGraphData] = useState<GraphDatasetResponse["dataset"] | null>(null);
+  const [graphValidation, setGraphValidation] = useState<GraphValidationData | null>(null);
+  const [loadErrors, setLoadErrors] = useState<string[]>([]);
+  const [phase, setPhase] = useState("all");
+  const [query, setQuery] = useState("");
+  const { setSelection } = useInspector();
+  const { filters, setHopDepth } = useWorkspace();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  useEffect(() => {
+    let cancelled = false;
+    void Promise.allSettled([getPhases(), getTasks(), getGraphDataset()]).then((results) => {
+      if (cancelled) return;
+      const [phaseResult, taskResult, graphResult] = results;
+      const errors: string[] = [];
+      if (phaseResult.status === "fulfilled") {
+        setPhases(phaseResult.value);
+      } else {
+        setPhases([]);
+        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"}`);
+      }
+      if (graphResult.status === "fulfilled") {
+        setGraphData(graphResult.value.dataset);
+        setGraphValidation(graphResult.value.validation);
+        if (!graphResult.value.validation.valid) {
+          errors.push(
+            ...graphResult.value.validation.errors.map((issue) => `Graph schema error: ${issue.message}`),
+          );
+        }
+      } else {
+        setGraphData(null);
+        setGraphValidation(null);
+        errors.push(
+          `Graph unavailable: ${
+            graphResult.reason instanceof Error ? graphResult.reason.message : "Unknown error"
+          }`,
+        );
+      }
+      setLoadErrors(errors);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  const viewParam = searchParams.get("view");
+  const view = viewParam === "project" ? "project" : viewParam === "architecture" ? "architecture" : "tasks";
+  const milestones = useMemo(() => {
+    const milestoneSet = new Set<string>();
+    for (const task of tasks) {
+      if (phase !== "all" && !task.milestone.startsWith(`${phase}/`)) continue;
+      milestoneSet.add(task.milestone);
+    }
+    return [...milestoneSet];
+  }, [tasks, phase]);
+  const filteredTasks = useMemo(() => {
+    return tasks.filter((task) => {
+      const inPhase = phase === "all" || task.milestone.startsWith(`${phase}/`);
+      if (!inPhase) return false;
+      if (!query) return true;
+      const q = query.toLowerCase();
+      return task.id.toLowerCase().includes(q) || task.title.toLowerCase().includes(q);
+    });
+  }, [phase, query, tasks]);
+  const activeFilters = useMemo(
+    () => defaultFilters.filter((filter) => filters.nodeTypes[filter]),
+    [filters.nodeTypes],
+  );
+  const activeEdgeFilters = useMemo(
+    () =>
+      (Object.entries(filters.edgeTypes) as Array<[keyof typeof filters.edgeTypes, boolean]>)
+        .filter(([, enabled]) => enabled)
+        .map(([filter]) => filter as GraphEdgeFilter),
+    [filters.edgeTypes],
+  );
+  const activeAuthorityFilters = useMemo(
+    () =>
+      (Object.entries(filters.authorityTypes) as Array<
+        [keyof typeof filters.authorityTypes, boolean]
+      >)
+        .filter(([, enabled]) => enabled)
+        .map(([filter]) => filter),
+    [filters.authorityTypes],
+  );
+  return (
+    <div className="grid gap-3">
+      {loadErrors.length > 0 ? (
+        <div className="rounded-xl border border-amber-700 bg-amber-950/60 p-3 text-sm text-amber-200">
+          {loadErrors.map((message) => (
+            <p key={message}>{message}</p>
+          ))}
+        </div>
+      ) : null}
+      <Card>
+        <CardHeader>
+          <CardTitle>Work Views</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Tabs>
+            <TabsList>
+              <TabsTrigger
+                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" : ""}
+                onClick={() => router.push("/work?view=tasks")}
+              >
+                Tasks
+              </TabsTrigger>
+              <TabsTrigger
+                className={view === "project" ? "border border-blue-700 bg-slate-800 text-slate-100" : ""}
+                onClick={() => router.push("/work?view=project")}
+              >
+                Project
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </CardContent>
+      </Card>
+      {graphValidation && graphValidation.errors.length > 0 ? (
+        <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>
+          ))}
+        </div>
+      ) : graphData ? (
+        <GraphCanvas
+          data={graphData}
+          viewMode={view === "project" ? "project" : view === "architecture" ? "architecture-map" : "tasks"}
+          enabledFilters={activeFilters}
+          enabledEdgeFilters={activeEdgeFilters}
+          enabledAuthorityFilters={activeAuthorityFilters}
+          hopDepth={filters.hopDepth}
+          onHopDepthChange={setHopDepth}
+          showExternalDependencies={filters.showExternalDependencies}
+          hideCompletedTasks={filters.hideCompletedTasks}
+          onNodeSelect={(node) =>
+            setSelection({
+              type: node.type as "domain" | "decision" | "phase" | "milestone" | "task" | "file" | "health",
+              title: node.title,
+              id: node.id,
+              metadata: node.metadata,
+              markdown: node.markdown,
+            })
+          }
+        />
+      ) : (
+        <div className="rounded-xl border border-slate-700 bg-slate-900/90 p-3">
+          Loading graph...
+        </div>
+      )}
+      {graphValidation && graphValidation.warnings.length > 0 ? (
+        <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>
+          ))}
+        </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>
+          <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>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,171 @@
+"use client";
+import { MouseEvent as ReactMouseEvent, ReactNode, useEffect, useMemo, useState } from "react";
+import { ErrorBoundary } from "./error-boundary";
+import { InspectorPanel } from "./inspector";
+import { InspectorProvider } from "./inspector-context";
+import { Sidebar } from "./sidebar";
+import { Topbar } from "./topbar";
+import { useWorkspace, WorkspaceProvider } from "./workspace-context";
+function AppShellContent({ children }: { children: ReactNode }) {
+  const collapsedLeftWidth = 56;
+  const collapsedRightWidth = 120;
+  const minMainWidth = 420;
+  const minExpandedLeftWidth = 220;
+  const minExpandedRightWidth = 320;
+  const resizerWidth = 4;
+  const {
+    leftCollapsed,
+    rightCollapsed,
+    leftWidth,
+    rightWidth,
+    setLeftCollapsed,
+    setRightCollapsed,
+    setLeftWidth,
+    setRightWidth,
+    resetLayout,
+  } = useWorkspace();
+  const [viewportWidth, setViewportWidth] = useState(0);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const update = () => setViewportWidth(window.innerWidth);
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, []);
+  useEffect(() => {
+    function onKeyDown(event: KeyboardEvent) {
+      if (!(event.metaKey || event.ctrlKey)) return;
+      const key = event.key.toLowerCase();
+      if (key === "b") {
+        event.preventDefault();
+        setLeftCollapsed(!leftCollapsed);
+        return;
+      }
+      if (key === "i") {
+        event.preventDefault();
+        setRightCollapsed(!rightCollapsed);
+        return;
+      }
+      if (key === "0") {
+        event.preventDefault();
+        resetLayout();
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [
+    leftCollapsed,
+    resetLayout,
+    rightCollapsed,
+    setLeftCollapsed,
+    setRightCollapsed,
+  ]);
+  const shellStyle = useMemo(() => {
+    const leftResizer = leftCollapsed ? 0 : resizerWidth;
+    const rightResizer = rightCollapsed ? 0 : resizerWidth;
+    let effectiveLeft = leftCollapsed ? collapsedLeftWidth : leftWidth;
+    let effectiveRight = rightCollapsed ? collapsedRightWidth : rightWidth;
+    if (viewportWidth > 0) {
+      const maxSideBudget = Math.max(0, viewportWidth - minMainWidth - leftResizer - rightResizer);
+      let overflow = effectiveLeft + effectiveRight - maxSideBudget;
+      if (overflow > 0 && !rightCollapsed) {
+        const reducible = Math.max(0, effectiveRight - minExpandedRightWidth);
+        const reduction = Math.min(reducible, overflow);
+        effectiveRight -= reduction;
+        overflow -= reduction;
+      }
+      if (overflow > 0 && !leftCollapsed) {
+        const reducible = Math.max(0, effectiveLeft - minExpandedLeftWidth);
+        const reduction = Math.min(reducible, overflow);
+        effectiveLeft -= reduction;
+      }
+    }
+    return {
+      gridTemplateColumns: `${effectiveLeft}px ${leftResizer}px minmax(0, 1fr) ${rightResizer}px ${effectiveRight}px`,
+    };
+  }, [leftCollapsed, leftWidth, rightCollapsed, rightWidth, viewportWidth]);
+  function startResize(side: "left" | "right", event: ReactMouseEvent<HTMLDivElement>) {
+    event.preventDefault();
+    const startX = event.clientX;
+    const startWidth = side === "left" ? leftWidth : rightWidth;
+    function onMove(moveEvent: MouseEvent) {
+      const delta = moveEvent.clientX - startX;
+      if (side === "left") {
+        setLeftWidth(startWidth + delta);
+      } else {
+        setRightWidth(startWidth - delta);
+      }
+    }
+    function onUp() {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    }
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  }
+  return (
+    <div className="grid h-dvh min-h-0 overflow-hidden" style={shellStyle}>
+      <Sidebar />
+      <div
+        className={
+          leftCollapsed
+            ? "w-0 pointer-events-none"
+            : "w-1 cursor-col-resize bg-transparent hover:bg-slate-600"
+        }
+        onMouseDown={(event) => {
+          if (!leftCollapsed) startResize("left", event);
+        }}
+        role="separator"
+        aria-orientation="vertical"
+        aria-label="Resize sidebar"
+      />
+      <div className="grid min-h-0 min-w-0 grid-rows-[64px_1fr]">
+        <Topbar projectName="testProjectV2" />
+        <main className="min-h-0 overflow-auto p-4">
+          <ErrorBoundary>{children}</ErrorBoundary>
+        </main>
+      </div>
+      <div
+        className={
+          rightCollapsed
+            ? "w-0 pointer-events-none"
+            : "w-1 cursor-col-resize bg-transparent hover:bg-slate-600"
+        }
+        onMouseDown={(event) => {
+          if (!rightCollapsed) startResize("right", event);
+        }}
+        role="separator"
+        aria-orientation="vertical"
+        aria-label="Resize inspector"
+      />
+      <ErrorBoundary>
+        <InspectorPanel />
+      </ErrorBoundary>
+    </div>
+  );
+}
+export function AppShell({ children }: { children: ReactNode }) {
+  return (
+    <WorkspaceProvider>
+      <InspectorProvider>
+        <AppShellContent>{children}</AppShellContent>
+      </InspectorProvider>
+    </WorkspaceProvider>
+  );
+}

package/templates/arch-ui/components/error-boundary.tsx ADDED Viewed

@@ -0,0 +1,53 @@
+"use client";
+import { Component, type ReactNode } from "react";
+type ErrorBoundaryProps = {
+  children: ReactNode;
+  fallback?: ReactNode;
+};
+type ErrorBoundaryState = {
+  hasError: boolean;
+  error: Error | null;
+};
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+  override render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return (
+        <div className="rounded-xl border border-slate-600 bg-slate-900/90 p-6 text-center">
+          <h3 className="mb-2">Something went wrong</h3>
+          <p className="mb-3 text-slate-400">
+            A component encountered an error. This does not affect other panels.
+          </p>
+          <pre className="inline-block max-w-[80%] whitespace-pre-wrap rounded-md border border-slate-600 bg-slate-950 px-2 py-1 font-mono text-xs">
+            {this.state.error?.message ?? "Unknown error"}
+          </pre>
+          <div className="mt-4">
+            <button
+              className="rounded-lg border border-slate-600 px-3 py-2 text-sm"
+              type="button"
+              onClick={() => this.setState({ hasError: false, error: null })}
+            >
+              Try Again
+            </button>
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}

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

@@ -0,0 +1,77 @@
+"use client";
+import { Badge } from "@repo/ui/badge";
+import { Handle, NodeProps, NodeToolbar, Position, useStore } from "reactflow";
+import type { ArchNodeData } from "./graph-types";
+export function ArchNode({ data, selected }: NodeProps<ArchNodeData>) {
+  const zoom = useStore((state) => state.transform[2]);
+  const detailLevel = zoom < 0.85 ? 0 : zoom < 1.1 ? 1 : 2;
+  const titleStyle =
+    detailLevel === 0
+      ? {
+          whiteSpace: "nowrap" as const,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+        }
+      : detailLevel === 1
+        ? {
+            display: "-webkit-box",
+            WebkitBoxOrient: "vertical" as const,
+            WebkitLineClamp: 2,
+            overflow: "hidden",
+            lineHeight: "1.2",
+          }
+        : {
+            whiteSpace: "normal" as const,
+            lineHeight: "1.25",
+          };
+  const toneClass =
+    data.tone === "domain"
+      ? "bg-blue-900/90"
+      : data.tone === "decision"
+        ? "bg-violet-900/90"
+        : data.tone === "phase"
+          ? "bg-green-900/90"
+          : data.tone === "task"
+            ? "bg-amber-900/90"
+            : "bg-slate-700";
+  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}`}>
+      <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" />
+      <div className="mb-1 text-[13px] font-semibold" style={titleStyle}>
+        {data.label}
+      </div>
+      {detailLevel > 0 && data.subtitle ? (
+        <div className="mb-1.5 text-xs leading-tight text-slate-300">{data.subtitle}</div>
+      ) : null}
+      {data.metadata.length > 0 ? (
+        <div
+          className="text-[11px] leading-tight text-slate-400"
+          style={{
+            whiteSpace: detailLevel === 2 ? ("normal" as const) : ("nowrap" as const),
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          }}
+        >
+          {data.metadata
+            .slice(0, metadataPreviewCount)
+            .map((item) => `${item.label}: ${item.value}`)
+            .join(" · ")}
+        </div>
+      ) : null}
+      <Handle type="source" position={Position.Right} className="!h-2 !w-2 !border !border-slate-900 !bg-slate-200" />
+    </div>
+  );
+}
+export const nodeTypes = { archNode: ArchNode };