New usable editor

src/app/globals.css

@@ -39,3 +39,121 @@ body {
 .circuit-tree-table .indented-cell {
   padding-left: 1.5rem;
 }
+
+.tree-editor-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.tree-grid-wrap {
+  overflow: auto;
+  border: 1px solid #d9dee8;
+  background: #fff;
+}
+
+.tree-grid {
+  width: max-content;
+  min-width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+
+.tree-grid th,
+.tree-grid td {
+  border: 1px solid #e4e9f2;
+  padding: 0.35rem 0.5rem;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.tree-grid th {
+  background: #f4f7fb;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.tree-grid .num {
+  text-align: right;
+}
+
+.tree-grid .section-row td {
+  background: #e8eef8;
+  font-weight: 600;
+}
+
+.tree-grid .summary-row td {
+  background: #f3f7fd;
+}
+
+.tree-grid .device-row td:first-child {
+  color: #6b7280;
+}
+
+.tree-grid .reserve-row td {
+  background: #fff8e7;
+}
+
+.tree-grid .placeholder-row td {
+  background: #f7f7f7;
+  color: #6b7280;
+  font-style: italic;
+}
+
+.tree-grid .cell-editable {
+  cursor: text;
+}
+
+.tree-grid .cell-selected {
+  outline: 2px solid #4c7dd9;
+  outline-offset: -2px;
+}
+
+.tree-grid input {
+  width: 100%;
+  min-width: 5rem;
+  border: 1px solid #9fb6e0;
+  border-radius: 2px;
+  padding: 0.2rem 0.3rem;
+}
+
+.tree-grid .action-cell {
+  display: flex;
+  gap: 0.3rem;
+}
+
+.tree-grid .action-cell button {
+  border: 1px solid #c4cddc;
+  background: #fff;
+  padding: 0.2rem 0.45rem;
+  border-radius: 3px;
+  font-size: 0.78rem;
+}
+
+.notice {
+  padding: 0.5rem 0.75rem;
+  border-radius: 4px;
+  border: 1px solid transparent;
+}
+
+.notice.info {
+  background: #ebf3ff;
+  border-color: #bad1f7;
+}
+
+.notice.error {
+  background: #fdecec;
+  border-color: #f5b5b5;
+}
+
+.notice.muted {
+  background: #f6f6f6;
+  border-color: #e4e4e4;
+}
+
+.todo-hint {
+  color: #6b7280;
+  font-size: 0.8rem;
+  margin: 0;
+}

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

@@ -0,0 +1,33 @@
+"use client";
+
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { CircuitTreeEditor } from "../../../../../../frontend/components/circuit-tree-editor";
+
+export default function CircuitTreeEditPage() {
+  const params = useParams<{ projectId: string; circuitListId: string }>();
+
+  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 Editor</h1>
+          <p className="text-secondary mb-0">Basic editing for the circuit-first model.</p>
+        </div>
+        <div className="d-flex gap-2">
+          <Link
+            href={`/projects/${params.projectId}/circuit-lists/${params.circuitListId}/tree`}
+            className="btn btn-outline-secondary btn-sm"
+          >
+            Read-only tree
+          </Link>
+          <Link href={`/projects/${params.projectId}/circuit-lists`} className="btn btn-outline-secondary btn-sm">
+            Legacy editor
+          </Link>
+        </div>
+      </div>
+      <CircuitTreeEditor projectId={params.projectId} circuitListId={params.circuitListId} />
+    </main>
+  );
+}
+

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

@@ -18,6 +18,12 @@ export default function CircuitTreePreviewPage() {
             Read-only preview of section blocks, circuits and device rows.
           </p>
         </div>
+        <Link
+          href={`/projects/${projectId}/circuit-lists/${circuitListId}/tree-edit`}
+          className="btn btn-outline-primary btn-sm"
+        >
+          Open editor
+        </Link>
         <Link
           href={`/projects/${projectId}/circuit-lists`}
           className="btn btn-outline-secondary btn-sm"
@@ -30,4 +36,3 @@ export default function CircuitTreePreviewPage() {
     </main>
   );
 }
-