feat: improve phase 6

Author: gustavotoyota

docs/RESTART_PLAN.md

@@ -1,7 +1,7 @@
 # DeepNotes — Restart (greenfield) plan — v4
 
 > **Last updated:** 2026-05-30  
-> **Status:** Phase 0 foundation complete. Phase 1 spatial checklist complete. **Phase 2 backend parity verified.** **Phase 3 collab wire parity complete.** **Phase 4 SPA routing + lint complete.** **Phase 5 spatial canvas MVP core interactions complete (create, move, resize, delete notes; Shift+click arrows; mouse + touch pan/zoom).** **Phase 6 in progress: selection system complete (click, multi-select, box select, select all, active element); arrow click-to-select + deletion; note color + z-index rendering; grid background verified.**  
+> **Status:** Phase 0 foundation complete. Phase 1 spatial checklist complete. **Phase 2 backend parity verified.** **Phase 3 collab wire parity complete.** **Phase 4 SPA routing + lint complete.** **Phase 5 spatial canvas MVP core interactions complete (create, move, resize, delete notes; Shift+click arrows; mouse + touch pan/zoom).** **Phase 6 in progress: selection system complete (click, multi-select, box select, select all, active element); arrow click-to-select + deletion; note color + z-index rendering; grid background verified; container children schema, model, page tracking, and rendering complete; drag-into-container pending.**  
 > **This document replaces all prior restart plan versions.** If a prior statement conflicts with this one, this version wins.  
 > **Analyzed:** 2026-05-30 — additional gaps identified in §0.2–0.4, §3, §4, §6–8. Collab protocol gap and routing/product-model divergence newly documented.
 
@@ -25,7 +25,7 @@
 | **Page management UI** | `apps/web/src/features/pages/*` | Partial | Bump, favorite, recent, snapshots, soft-delete, restore, purge, move, path breadcrumb. |
 | **Rich-text editor** | `apps/web/src/features/pages/PageEditorTiptapCard.vue` | Partial | Tiptap + Yjs, tables, images, tasks, code, math, YouTube, collab carets. |
 | **Marketing site** | `apps/marketing/` | Done | `vite-ssg` placeholder. |
-| **Spatial / world canvas** | `apps/web/src/features/spatial/*` | **In progress** | Drag-to-move notes, double-click create, arrows rendered, page-level Yjs doc wired. Tiptap editors inside notes, resize, arrow creation UI, containers pending. |
+| **Spatial / world canvas** | `apps/web/src/features/spatial/*` | **In progress** | Drag-to-move notes, double-click create, arrows rendered, page-level Yjs doc wired. Tiptap editors inside notes, resize, arrow creation UI, container schema/model/rendering complete; drag-into-container pending. |
 | **Collab pagination** | `GET /api/pages/:pid/collab-updates` | Done | `?sinceIndex=` + `?limit=` (default 100, max 500). Client loops. |
 | **Playwright E2E** | `apps/web/playwright.config.ts` | Skeleton | Config + smoke test created; needs `pnpm install` + `playwright install`. |
 

new-deepnotes/apps/web/src/features/spatial/DisplayNote.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import * as Y from "yjs";
+
+import DisplayNote from "./DisplayNote.vue";
+import { useNoteModel } from "./note-model";
+import { addNoteToPage, createPageYDoc } from "@deepnotes/collab-wire";
+
+function createNoteModel(ydoc: Y.Doc, id: string, opts?: { containerEnabled?: boolean }) {
+  const noteMap = addNoteToPage(ydoc, id);
+  if (opts?.containerEnabled) {
+    const containerMap = noteMap.get("container") as Y.Map<unknown>;
+    containerMap.set("enabled", true);
+  }
+  return useNoteModel(noteMap);
+}
+
+describe("DisplayNote", () => {
+  it("renders a single note without children", () => {
+    const ydoc = createPageYDoc();
+    const model = createNoteModel(ydoc, "note-1");
+
+    const wrapper = mount(DisplayNote, {
+      props: { model, zoom: 1 },
+    });
+
+    expect(wrapper.findAll('[data-testid="display-note"]')).toHaveLength(1);
+  });
+
+  it("renders child notes when container is enabled", () => {
+    const ydoc = createPageYDoc();
+    const parentModel = createNoteModel(ydoc, "parent", { containerEnabled: true });
+    const childModel = createNoteModel(ydoc, "child-1");
+
+    const wrapper = mount(DisplayNote, {
+      props: { model: parentModel, zoom: 1, childModels: [childModel] },
+    });
+
+    const notes = wrapper.findAll('[data-testid="display-note"]');
+    expect(notes).toHaveLength(2);
+  });
+
+  it("does not render children when container is disabled", () => {
+    const ydoc = createPageYDoc();
+    const parentModel = createNoteModel(ydoc, "parent", { containerEnabled: false });
+    const childModel = createNoteModel(ydoc, "child-1");
+
+    const wrapper = mount(DisplayNote, {
+      props: { model: parentModel, zoom: 1, childModels: [childModel] },
+    });
+
+    expect(wrapper.findAll('[data-testid="display-note"]')).toHaveLength(1);
+  });
+});

new-deepnotes/apps/web/src/features/spatial/DisplayNote.vue

@@ -6,6 +6,7 @@ const props = defineProps<{
   model: NoteModel;
   zoom: number;
   selected?: boolean;
+  childModels?: NoteModel[];
 }>();
 
 const emit = defineEmits<{
@@ -192,5 +193,20 @@ function onResizePointerUp(e: PointerEvent) {
       @pointerup="onResizePointerUp"
       @pointercancel="onResizePointerUp"
     />
+
+    <!-- container children -->
+    <template v-if="model.container.enabled.value && childModels?.length">
+      <div
+        class="border-border pointer-events-none absolute inset-x-0 bottom-0 border-t"
+        style="top: 3rem"
+      >
+        <DisplayNote
+          v-for="(child, idx) in childModels"
+          :key="idx"
+          :model="child"
+          :zoom="zoom"
+        />
+      </div>
+    </template>
   </div>
 </template>

new-deepnotes/apps/web/src/features/spatial/SpatialPageView.vue

@@ -19,8 +19,15 @@ const canvasRef = ref<{
   rootEl: HTMLElement | null;
 } | null>(null);
 
-const { noteList, arrowList, createNoteAt, deleteNote, deleteArrow, createArrow } =
-  useSpatialPage(props.ydoc);
+const {
+  noteList,
+  rootNoteList,
+  arrowList,
+  createNoteAt,
+  deleteNote,
+  deleteArrow,
+  createArrow,
+} = useSpatialPage(props.ydoc);
 
 const selection = useSpatialSelection();
 
@@ -33,7 +40,7 @@ const noteById = computed(() => {
 });
 
 const notesByZIndex = computed(() => {
-  return [...noteList.value].sort(
+  return [...rootNoteList.value].sort(
     (a, b) => a.model.zIndex.value - b.model.zIndex.value,
   );
 });
@@ -149,7 +156,7 @@ function finalizeBoxSelect() {
   const boxW = Math.max(w1.x, w2.x) - boxX;
   const boxH = Math.max(w1.y, w2.y) - boxY;
 
-  for (const note of noteList.value) {
+  for (const note of rootNoteList.value) {
     const nx = note.model.pos.value.x;
     const ny = note.model.pos.value.y;
     const nwStr = note.model.width.value.expanded;
@@ -190,7 +197,7 @@ function onKeyDown(e: KeyboardEvent) {
 
   if (e.key === "a" && (e.ctrlKey || e.metaKey)) {
     e.preventDefault();
-    selection.selectAll(noteList.value.map((n) => n.id));
+    selection.selectAll(rootNoteList.value.map((n) => n.id));
     return;
   }
 }
@@ -236,6 +243,11 @@ onUnmounted(() => {
           :model="note.model"
           :zoom="canvasRef?.zoom ?? 1"
           :selected="selection.isSelected(note.id)"
+          :child-models="
+            note.model.container.children.value
+              .map((childId) => noteById.get(childId))
+              .filter((m): m is NonNullable<typeof m> => m !== undefined)
+          "
           @select="selection.select(note.id, 'note')"
           @toggle="selection.toggle(note.id, 'note')"
           @shift-click="

new-deepnotes/apps/web/src/features/spatial/note-model.ts

@@ -7,6 +7,7 @@ import {
   useYMapNumber,
   useYMapString,
   useYMapValue,
+  useYArrayValues,
 } from "./yjs-reactivity";
 
 export type NoteModel = ReturnType<typeof useNoteModel>;
@@ -78,6 +79,8 @@ export function useNoteModel(noteMap: Y.Map<unknown>) {
     "forceColorInheritance",
     false,
   );
+  const containerChildrenArr = containerMap.get("children") as Y.Array<string>;
+  const containerChildren = useYArrayValues<string>(containerChildrenArr);
 
   // --- collapsing ---
   const collapsingMap = noteMap.get(
@@ -134,6 +137,7 @@ export function useNoteModel(noteMap: Y.Map<unknown>) {
       wrapChildren: containerWrapChildren,
       stretchChildren: containerStretchChildren,
       forceColorInheritance: containerForceColorInheritance,
+      children: containerChildren,
     },
     collapsing: {
       enabled: collapsingEnabled,

new-deepnotes/apps/web/src/features/spatial/useSpatialPage.test.ts

@@ -67,4 +67,44 @@ describe("useSpatialPage", () => {
     posMap.set("x", 99);
     expect(model.pos.value).toEqual({ x: 99, y: 20 });
   });
+
+  it("adds a child to a container", () => {
+    const ydoc = createPageYDoc();
+    const page = useSpatialPage(ydoc);
+
+    const containerId = page.createNoteAt(0, 0);
+    const childId = page.createNoteAt(50, 50);
+
+    page.addChildToContainer(containerId, childId);
+    expect(page.parentOf.value.get(childId)).toBe(containerId);
+    expect(page.rootNoteList.value.map((n) => n.id)).not.toContain(childId);
+  });
+
+  it("removes a child from a container", () => {
+    const ydoc = createPageYDoc();
+    const page = useSpatialPage(ydoc);
+
+    const containerId = page.createNoteAt(0, 0);
+    const childId = page.createNoteAt(50, 50);
+
+    page.addChildToContainer(containerId, childId);
+    page.removeChildFromContainer(containerId, childId);
+
+    expect(page.parentOf.value.has(childId)).toBe(false);
+    expect(page.rootNoteList.value.map((n) => n.id)).toContain(childId);
+  });
+
+  it("deletes container children recursively", () => {
+    const ydoc = createPageYDoc();
+    const page = useSpatialPage(ydoc);
+
+    const containerId = page.createNoteAt(0, 0);
+    const childId = page.createNoteAt(50, 50);
+
+    page.addChildToContainer(containerId, childId);
+    page.deleteNote(containerId);
+
+    expect(page.noteList.value.map((n) => n.id)).not.toContain(containerId);
+    expect(page.noteList.value.map((n) => n.id)).not.toContain(childId);
+  });
 });

new-deepnotes/apps/web/src/features/spatial/useSpatialPage.ts

@@ -92,7 +92,59 @@ export function useSpatialPage(ydoc: Y.Doc) {
     return id;
   }
 
+  // --- container parent tracking ---
+  const parentOf = computed(() => {
+    const map = new Map<string, string>();
+    for (const { id, model } of noteList.value) {
+      for (const childId of model.container.children.value) {
+        map.set(childId, id);
+      }
+    }
+    return map;
+  });
+
+  const rootNoteList = computed(() =>
+    noteList.value.filter((n) => !parentOf.value.has(n.id)),
+  );
+
+  function addChildToContainer(containerId: string, childId: string) {
+    const containerNote = notesMap.get(containerId);
+    if (!containerNote) return;
+    const containerMap = containerNote.get(
+      YPAGE_NOTE_KEY.container,
+    ) as Y.Map<unknown>;
+    const childrenArr = containerMap.get("children") as Y.Array<string>;
+    if (!childrenArr.toArray().includes(childId)) {
+      childrenArr.push([childId]);
+    }
+  }
+
+  function removeChildFromContainer(containerId: string, childId: string) {
+    const containerNote = notesMap.get(containerId);
+    if (!containerNote) return;
+    const containerMap = containerNote.get(
+      YPAGE_NOTE_KEY.container,
+    ) as Y.Map<unknown>;
+    const childrenArr = containerMap.get("children") as Y.Array<string>;
+    const idx = childrenArr.toArray().indexOf(childId);
+    if (idx >= 0) {
+      childrenArr.delete(idx, 1);
+    }
+  }
+
   function deleteNote(noteId: string) {
+    // Remove from parent container if nested
+    const parentId = parentOf.value.get(noteId);
+    if (parentId) {
+      removeChildFromContainer(parentId, noteId);
+    }
+    // Delete children recursively
+    const model = noteModels.get(noteId);
+    if (model) {
+      for (const childId of [...model.container.children.value]) {
+        deleteNote(childId);
+      }
+    }
     removeNoteFromPage(ydoc, noteId);
     noteModels.delete(noteId);
     refreshNoteIds();
@@ -118,10 +170,14 @@ export function useSpatialPage(ydoc: Y.Doc) {
   return {
     noteIds,
     noteList,
+    rootNoteList,
     arrowList,
+    parentOf,
     createNoteAt,
     deleteNote,
     deleteArrow,
     createArrow,
+    addChildToContainer,
+    removeChildFromContainer,
   };
 }

new-deepnotes/packages/collab-wire/src/page-doc-schema.test.ts

@@ -69,6 +69,7 @@ describe("page-doc-schema", () => {
     expect(container.get("wrapChildren")).toBe(false);
     expect(container.get("stretchChildren")).toBe(true);
     expect(container.get("forceColorInheritance")).toBe(false);
+    expect(container.get("children")).toBeInstanceOf(Y.Array);
 
     const collapsing = note.get(YPAGE_NOTE_KEY.collapsing) as Y.Map<boolean>;
     expect(collapsing.get("enabled")).toBe(false);

new-deepnotes/packages/collab-wire/src/page-doc-schema.ts

@@ -43,6 +43,7 @@ export const YPAGE_NOTE_KEY = {
   createdAt: "createdAt",
   editedAt: "editedAt",
   movedAt: "movedAt",
+  containerChildren: "containerChildren",
 } as const;
 
 export const YPAGE_ARROW_KEY = {
@@ -113,6 +114,7 @@ function createDefaultContainer(): Y.Map<unknown> {
   m.set("wrapChildren", false);
   m.set("stretchChildren", true);
   m.set("forceColorInheritance", false);
+  m.set("children", new Y.Array<string>());
   return m;
 }