Added 1B, 2 and added bootstrap again for site

src/app/globals.css

@@ -10,3 +10,32 @@ body {
 .table td select.form-select-sm {
   min-width: 8rem;
 }
+
+.circuit-tree-table .section-row td {
+  background: #e9eef8;
+  border-top: 2px solid #c6d3ea;
+  font-weight: 600;
+}
+
+.circuit-tree-table .summary-row td {
+  background: #f5f8fd;
+  font-weight: 600;
+}
+
+.circuit-tree-table .device-row td {
+  background: #ffffff;
+}
+
+.circuit-tree-table .reserve-row td {
+  background: #fff8e8;
+}
+
+.circuit-tree-table .placeholder-row td {
+  background: #f7f7f7;
+  color: #6c757d;
+  font-style: italic;
+}
+
+.circuit-tree-table .indented-cell {
+  padding-left: 1.5rem;
+}

src/app/projects/[projectId]/circuit-lists/[circuitListId]/tree/page.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { CircuitTreePreview } from "../../../../../../frontend/components/circuit-tree-preview";
+
+export default function CircuitTreePreviewPage() {
+  const params = useParams<{ projectId: string; circuitListId: string }>();
+  const projectId = params.projectId;
+  const circuitListId = params.circuitListId;
+
+  return (
+    <main className="container py-4">
+      <div className="d-flex justify-content-between align-items-center mb-3">
+        <div>
+          <h1 className="h4 mb-1">Circuit Tree Preview</h1>
+          <p className="text-secondary mb-0">
+            Read-only preview of section blocks, circuits and device rows.
+          </p>
+        </div>
+        <Link
+          href={`/projects/${projectId}/circuit-lists`}
+          className="btn btn-outline-secondary btn-sm"
+        >
+          Back to legacy editor
+        </Link>
+      </div>
+
+      <CircuitTreePreview projectId={projectId} circuitListId={circuitListId} />
+    </main>
+  );
+}
+