-
-
- );
-}
-
-document.addEventListener("DOMContentLoaded", () => {
- ReactModal.setAppElement(
- document.querySelector("div.wrapper") as HTMLElement
- );
-
- const $ = (window as any).$;
- let root: Root | null = null;
-
- $("#id_collab_notes").on("shown.bs.tab", () => {
- if (root !== null) return;
- root = createRoot(document.getElementById("collab_notes_container")!);
- root.render(
-
-
-
+
+
+
+ );
+}
diff --git a/javascript/src/frontend/collab_forms/forms/project_collabnotes/CreateModal.tsx b/javascript/src/frontend/collab_forms/forms/project_collabnotes/CreateModal.tsx
new file mode 100644
index 000000000..b6444c991
--- /dev/null
+++ b/javascript/src/frontend/collab_forms/forms/project_collabnotes/CreateModal.tsx
@@ -0,0 +1,115 @@
+import { useState } from "react";
+import ReactModal from "react-modal";
+
+interface CreateModalProps {
+ isOpen: boolean;
+ type: "note" | "folder";
+ onClose: () => void;
+ onCreate: (title: string) => void;
+}
+
+const OVERLAY_STYLE: ReactModal.Styles = {
+ overlay: {
+ position: "fixed",
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ zIndex: 1050,
+ },
+ content: {
+ position: "relative",
+ inset: "auto",
+ border: "none",
+ background: "none",
+ padding: 0,
+ maxWidth: "500px",
+ width: "100%",
+ },
+};
+
+export default function CreateModal({
+ isOpen,
+ type,
+ onClose,
+ onCreate,
+}: CreateModalProps) {
+ const [title, setTitle] = useState("");
+ const [isSubmitting, setIsSubmitting] = useState(false);
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ if (!title.trim()) return;
+
+ setIsSubmitting(true);
+ try {
+ await onCreate(title.trim());
+ setTitle("");
+ onClose();
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ const handleClose = () => {
+ setTitle("");
+ onClose();
+ };
+
+ return (
+
+
+
+
+
+ + Create New {type === "folder" ? "Folder" : "Note"} +
+ +
+
+
+
+ + + Confirm Delete +
+ +
+
+ + Are you sure you want to delete {itemTitle ? ( + <>the {typeLabel} "{itemTitle}" + ) : ( + <>this {typeLabel} + )}? +
+ {isFolder && ( ++ + This will also delete all notes and subfolders inside. +
+ )} ++ This action cannot be undone. +
+
+
+
+
+ setShowDeleteOverlay(true)}
+ onMouseLeave={() => setShowDeleteOverlay(false)}
+ style={{ position: "relative", marginBottom: "1rem" }}
+ >
+ 
+ {showDeleteOverlay && (
+
+ );
+}
diff --git a/javascript/src/frontend/collab_forms/forms/project_collabnotes/ImageFieldPlaceholder.tsx b/javascript/src/frontend/collab_forms/forms/project_collabnotes/ImageFieldPlaceholder.tsx
new file mode 100644
index 000000000..f1e40423e
--- /dev/null
+++ b/javascript/src/frontend/collab_forms/forms/project_collabnotes/ImageFieldPlaceholder.tsx
@@ -0,0 +1,118 @@
+import { useRef, useState, useCallback, useEffect } from "react";
+
+interface ImageFieldPlaceholderProps {
+ onUpload: (file: File) => void;
+ uploading: boolean;
+}
+
+export default function ImageFieldPlaceholder({
+ onUpload,
+ uploading,
+}: ImageFieldPlaceholderProps) {
+ const fileInputRef = useRef
+
+
+ )}
+
+ {uploading ? (
+ <>
+
+ Uploading...
+
+ ) : (
+ <>
+
+
+ {dragActive ? "Drop image here" : "Paste, drag-drop, or click to upload"}
+
+
+ PNG, JPG, GIF, WebP (max 10 MB)
+
+
+ )}
+
+
+ );
+}
diff --git a/javascript/src/frontend/collab_forms/forms/project_collabnotes/NoteEditor.tsx b/javascript/src/frontend/collab_forms/forms/project_collabnotes/NoteEditor.tsx
new file mode 100644
index 000000000..1770897e5
--- /dev/null
+++ b/javascript/src/frontend/collab_forms/forms/project_collabnotes/NoteEditor.tsx
@@ -0,0 +1,301 @@
+import { useEffect, useState, useCallback } from "react";
+import {
+ DndContext,
+ closestCenter,
+ KeyboardSensor,
+ PointerSensor,
+ useSensor,
+ useSensors,
+ DragEndEvent,
+} from "@dnd-kit/core";
+import {
+ arrayMove,
+ SortableContext,
+ sortableKeyboardCoordinates,
+ verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import * as Y from "yjs";
+import {
+ ConnectionStatus,
+ usePageConnection,
+} from "../../connection";
+import NoteFieldEditor from "./NoteFieldEditor";
+import AddFieldToolbar from "./AddFieldToolbar";
+import DeleteConfirmModal from "./DeleteConfirmModal";
+import { useFieldMutations } from "./hooks/useFieldMutations";
+import { useImageUpload } from "./hooks/useImageUpload";
+import type { NoteField } from "./types";
+
+interface NoteEditorProps {
+ noteId: number;
+}
+
+/**
+ * NoteEditor derives fields directly from the Yjs document via observeDeep.
+ * The Yjs meta.fields Y.Array is the single source of truth for field state.
+ * React state is updated only via Yjs observation callbacks.
+ */
+export default function NoteEditor({ noteId }: NoteEditorProps) {
+ const { provider, status, connected } = usePageConnection({
+ model: "project_collab_note",
+ id: noteId.toString(),
+ });
+
+ const [fields, setFields] = useState
+
+ f.id)}
+ strategy={verticalListSortingStrategy}
+ >
+ {fields.map((field) => (
+ requestDeleteField(field)}
+ onUploadImage={handleUploadToField}
+ uploadingFieldId={uploadingFieldId}
+ />
+ ))}
+
+
+
+ {fields.length === 0 && connected && (
+
+ );
+}
diff --git a/javascript/src/frontend/collab_forms/forms/project_collabnotes/NoteFieldEditor.tsx b/javascript/src/frontend/collab_forms/forms/project_collabnotes/NoteFieldEditor.tsx
new file mode 100644
index 000000000..8a1eafaee
--- /dev/null
+++ b/javascript/src/frontend/collab_forms/forms/project_collabnotes/NoteFieldEditor.tsx
@@ -0,0 +1,87 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import RichTextEditor from "../../rich_text_editor";
+import ImageField from "./ImageField";
+import type { NoteField } from "./types";
+import type { HocuspocusProvider } from "@hocuspocus/provider";
+
+interface NoteFieldEditorProps {
+ field: NoteField;
+ provider: HocuspocusProvider;
+ connected: boolean;
+ onDelete: () => void;
+ onUploadImage?: (fieldId: string, file: File) => void;
+ uploadingFieldId?: string | null;
+}
+
+export default function NoteFieldEditor({
+ field,
+ provider,
+ connected,
+ onDelete,
+ onUploadImage,
+ uploadingFieldId,
+}: NoteFieldEditorProps) {
+ const {
+ attributes,
+ listeners,
+ setNodeRef,
+ transform,
+ transition,
+ isDragging,
+ } = useSortable({
+ id: field.id,
+ data: { type: "field", field },
+ });
+
+ const style = {
+ transform: CSS.Transform.toString(transform),
+ transition,
+ opacity: isDragging ? 0.5 : 1,
+ };
+
+ return (
+
+ {error}
+
+ )}
+
+
+ No fields yet. Add a text field or image above to get started.
+
+ )}
+
+
+ onUploadImage(field.id, file) : undefined
+ }
+ uploading={uploadingFieldId === field.id}
+ />
+ )}
+
+ );
+}
diff --git a/javascript/src/frontend/collab_forms/forms/project_collabnotes/NoteTreeView.tsx b/javascript/src/frontend/collab_forms/forms/project_collabnotes/NoteTreeView.tsx
new file mode 100644
index 000000000..6d88a6de0
--- /dev/null
+++ b/javascript/src/frontend/collab_forms/forms/project_collabnotes/NoteTreeView.tsx
@@ -0,0 +1,331 @@
+import { useState, useMemo, useCallback } from "react";
+import {
+ DndContext,
+ DragOverlay,
+ pointerWithin,
+ KeyboardSensor,
+ PointerSensor,
+ useSensor,
+ useSensors,
+ useDroppable,
+} from "@dnd-kit/core";
+import {
+ SortableContext,
+ sortableKeyboardCoordinates,
+ verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { useNoteMutations } from "./hooks/useNoteMutations";
+import { useTreeDnd } from "./hooks/useTreeDnd";
+import { useTreeSync } from "./hooks/useTreeSync";
+import SortableTreeItem from "./SortableTreeItem";
+import TreeItem from "./TreeItem";
+import CreateModal from "./CreateModal";
+import DeleteConfirmModal from "./DeleteConfirmModal";
+import type { NoteTreeNode, FlatNote } from "./types";
+import "./tree.css";
+
+interface NoteTreeViewProps {
+ projectId: number;
+ selectedId: number | null;
+ onSelect: (id: number | null) => void;
+}
+
+export default function NoteTreeView({
+ projectId,
+ selectedId,
+ onSelect,
+}: NoteTreeViewProps) {
+ const {
+ tree,
+ flatNodes,
+ loading,
+ addNode,
+ removeNodes,
+ updateNode,
+ } = useTreeSync({ projectId });
+
+ const { createNote, createFolder, deleteNote, renameNote, moveNote } =
+ useNoteMutations();
+
+ const [showCreateModal, setShowCreateModal] = useState(false);
+ const [createType, setCreateType] = useState<"note" | "folder">("note");
+ const [createParentId, setCreateParentId] = useState
+
+
+
+ {field.fieldType === "rich_text" ? "Text" : "Image"}
+
+
+ {field.fieldType === "rich_text" ? (
+
+
+ ) : (
+
+
+ Loading notes...
+
+ );
+ }
+
+ return (
+
+
+
+ {activeItem && (
+
+
+
+ setShowCreateModal(false)}
+ onCreate={handleCreate}
+ />
+
+
+ );
+}
+
+function TreeDropSentinel({ id }: { id: string }) {
+ const { setNodeRef, isOver } = useDroppable({ id });
+ return (
+
+ );
+}
diff --git a/javascript/src/frontend/collab_forms/forms/project_collabnotes/SortableTreeItem.tsx b/javascript/src/frontend/collab_forms/forms/project_collabnotes/SortableTreeItem.tsx
new file mode 100644
index 000000000..98996e373
--- /dev/null
+++ b/javascript/src/frontend/collab_forms/forms/project_collabnotes/SortableTreeItem.tsx
@@ -0,0 +1,74 @@
+import { useSortable } from "@dnd-kit/sortable";
+import TreeItem from "./TreeItem";
+import { NoteTreeNode, DropPosition, DragState } from "./types";
+
+interface SortableTreeItemProps {
+ item: NoteTreeNode;
+ depth: number;
+ selectedId: number | null;
+ onSelect: (id: number | null) => void;
+ onRequestDelete: (item: NoteTreeNode) => void;
+ onRename: (id: number, title: string) => void;
+ onCreateChild: (parentId: number, type: "note" | "folder") => void;
+ dragState: DragState;
+}
+
+export default function SortableTreeItem({
+ item,
+ depth,
+ selectedId,
+ onSelect,
+ onRequestDelete,
+ onRename,
+ onCreateChild,
+ dragState,
+}: SortableTreeItemProps) {
+ const {
+ attributes,
+ listeners,
+ setNodeRef,
+ isDragging,
+ } = useSortable({ id: item.id });
+
+ const style = { opacity: isDragging ? 0 : 1 };
+
+ const isDropTarget = dragState.overId === item.id;
+ const dropPosition: DropPosition | null = isDropTarget
+ ? dragState.dropPosition
+ : null;
+
+ const renderChildren = (children: NoteTreeNode[], childDepth: number) => {
+ return children.map((child) => (
+
+
+
+
+
+
+
+
+
+
+
+
+ {tree.map((item) => (
+
+
+ No notes yet. Create one using the buttons above.
+
+ )}
+
+ {}}
+ onRequestDelete={() => {}}
+ onRename={() => {}}
+ onCreateChild={() => {}}
+ />
+
+ )}
+
+
+ );
+}
diff --git a/javascript/src/frontend/collab_forms/forms/project_collabnotes/TreeItem.tsx b/javascript/src/frontend/collab_forms/forms/project_collabnotes/TreeItem.tsx
new file mode 100644
index 000000000..6bf1aec25
--- /dev/null
+++ b/javascript/src/frontend/collab_forms/forms/project_collabnotes/TreeItem.tsx
@@ -0,0 +1,203 @@
+import { useState } from "react";
+import { NoteTreeNode, DropPosition } from "./types";
+
+interface TreeItemProps {
+ item: NoteTreeNode;
+ depth: number;
+ selectedId: number | null;
+ onSelect: (id: number | null) => void;
+ onRequestDelete: (item: NoteTreeNode) => void;
+ onRename: (id: number, title: string) => void;
+ onCreateChild: (parentId: number, type: "note" | "folder") => void;
+ isDragging?: boolean;
+ dropPosition?: DropPosition | null;
+ dragHandleProps?: Record
+
+ );
+}
diff --git a/javascript/src/frontend/collab_forms/forms/project_collabnotes/hooks/useFieldMutations.ts b/javascript/src/frontend/collab_forms/forms/project_collabnotes/hooks/useFieldMutations.ts
new file mode 100644
index 000000000..9451f6d35
--- /dev/null
+++ b/javascript/src/frontend/collab_forms/forms/project_collabnotes/hooks/useFieldMutations.ts
@@ -0,0 +1,162 @@
+import { useCallback } from "react";
+
+const CREATE_RICH_TEXT_FIELD_MUTATION = `
+ mutation CreateRichTextField($noteId: bigint!, $position: Int!) {
+ insert_projectCollabNoteField_one(object: {
+ noteId: $noteId,
+ fieldType: "rich_text",
+ content: "",
+ position: $position
+ }) {
+ id
+ position
+ }
+ }
+`;
+
+const CREATE_IMAGE_FIELD_MUTATION = `
+ mutation CreateImageField($noteId: bigint!, $position: Int!) {
+ insert_projectCollabNoteField_one(object: {
+ noteId: $noteId,
+ fieldType: "image",
+ content: "",
+ position: $position
+ }) {
+ id
+ position
+ }
+ }
+`;
+
+const DELETE_FIELD_MUTATION = `
+ mutation DeleteProjectCollabNoteField($id: bigint!) {
+ delete_projectCollabNoteField_by_pk(id: $id) {
+ id
+ }
+ }
+`;
+
+function buildReorderMutation(
+ fields: Array<{ id: string; position: number }>
+): { query: string; variables: Record
+
+ 0} expanded={expanded} />
+
+
+
+ { e.stopPropagation(); onCreateChild(item.id, "note"); setExpanded(true); }}
+ onAddFolder={(e) => { e.stopPropagation(); onCreateChild(item.id, "folder"); setExpanded(true); }}
+ onRename={(e) => { e.stopPropagation(); setRenameValue(item.title); setIsRenaming(true); }}
+ onDelete={(e) => { e.stopPropagation(); onRequestDelete(item); }}
+ />
+ )}
+
+
+ {isFolder && expanded && item.children.length > 0 && (
+
+ {renderChildren
+ ? renderChildren(item.children, depth + 1)
+ : item.children.map((child) => (
+
+ )}
+
+
+ );
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+ ReactModal.setAppElement(
+ document.querySelector("div.wrapper") as HTMLElement
+ );
+
+ const $ = (window as any).$;
+ let root: Root | null = null;
+
+ $("#id_collab_notes").on("shown.bs.tab", () => {
+ if (root !== null) return;
+ root = createRoot(document.getElementById("collab_notes_container")!);
+ root.render(
+
+
+
+
+ {selectedNoteId ? (
+
+
+
+ ) : (
+
+
+ )}
+
+
+
+ Select a note to edit, or create a new one.
+Ran subdomain enumeration against acme.example.com. Found 14 subdomains.
"}, + {"title": "OSINT Findings", "type": "note", "content": "LinkedIn reveals 3 IT admins. Password policy doc leaked on Pastebin (expired).
"}, + ]}, + {"title": "Exploitation", "type": "folder", "children": [ + {"title": "Initial Access", "type": "note", "content": "Phishing payload delivered via macro-enabled doc. User jane.doe clicked.
"}, + {"title": "Lateral Movement", "type": "note", "content": "Used Pass-the-Hash from workstation WS-042 to reach DC01.
"}, + ]}, + {"title": "Meeting Notes", "type": "note", "content": "Kickoff call 2026-03-17. Client wants focus on AD attack paths.
"}, + ], + }, + ], + }, + { + "name": "Globex Industries", + "short_name": "GLOBEX", + "codename": "NIGHTSHADE", + "contacts": [ + ("Hank Scorpio", "hank@globex.example.com", "CEO", "555-0200"), + ], + "projects": [ + { + "codename": "SHADOW NEXUS", + "project_type": pt_webapp, + "lead": "bob", + "operators": ["charlie"], + "start": date.today() - timedelta(days=7), + "end": date.today() + timedelta(days=23), + "scopes": ["https://portal.globex.example.com", "https://api.globex.example.com/v2"], + "targets": ["Customer Portal", "REST API v2", "Admin Panel"], + "notes_tree": [ + {"title": "API Testing", "type": "folder", "children": [ + {"title": "Authentication Bypass", "type": "note", "content": "JWT validation can be bypassed by setting alg=none. Critical finding.
"}, + {"title": "IDOR on /users endpoint", "type": "note", "content": "Changing user_id in request allows access to other users' data.
"}, + ]}, + {"title": "Portal XSS", "type": "note", "content": "Stored XSS in profile bio field. Payload: <img src=x onerror=alert(1)>
No DoS. No production DB modification. Physical access authorized M-F 8am-6pm only.
"}, + {"title": "C2 Infrastructure", "type": "note", "content": "Cobalt Strike teamserver on AWS. Redirector chain: CloudFront → Nginx → TS.
"}, + ]}, + {"title": "Execution Log", "type": "folder", "children": []}, + ], + }, + ], + }, + ] + + for cdata in clients_data: + client, created = Client.objects.get_or_create( + name=cdata["name"], + defaults={"short_name": cdata["short_name"], "codename": cdata["codename"]}, + ) + print(f"\n{'Created' if created else 'Exists'} client: {client.name}") + + for cname, cemail, ctitle, cphone in cdata["contacts"]: + ClientContact.objects.get_or_create( + client=client, + email=cemail, + defaults={"name": cname, "job_title": ctitle, "phone": cphone}, + ) + + for user in users.values(): + ClientInvite.objects.get_or_create(client=client, user=user) + + for pdata in cdata["projects"]: + proj, proj_created = Project.objects.get_or_create( + codename=pdata["codename"], + defaults={ + "client": client, + "project_type": pdata["project_type"], + "start_date": pdata["start"], + "end_date": pdata["end"], + "complete": False, + }, + ) + print(f" {'Created' if proj_created else 'Exists'} project: {proj.codename}") + + lead_user = users[pdata["lead"]] + ProjectAssignment.objects.get_or_create( + project=proj, operator=lead_user, + defaults={"role": role_lead, "start_date": pdata["start"], "end_date": pdata["end"]}, + ) + for op_name in pdata["operators"]: + ProjectAssignment.objects.get_or_create( + project=proj, operator=users[op_name], + defaults={"role": role_operator, "start_date": pdata["start"], "end_date": pdata["end"]}, + ) + + ProjectInvite.objects.get_or_create(project=proj, user=users["manager"]) + + for scope_name in pdata["scopes"]: + ProjectScope.objects.get_or_create( + project=proj, name=scope_name, + defaults={"scope": scope_name}, + ) + + for target_name in pdata["targets"]: + ProjectTarget.objects.get_or_create(project=proj, hostname=target_name) + + if proj_created: + create_notes_tree(pdata["notes_tree"], proj) + + +users = seed_users() +seed_clients(users) + +print("\n" + "=" * 60) +print("SEED DATA COMPLETE") +print("=" * 60) +print(f"Users: {User.objects.count()} (login with TestPass123!)") +print(f"Clients: {Client.objects.count()}") +print(f"Projects: {Project.objects.count()}") +print(f"Collab Notes: {ProjectCollabNote.objects.count()}") +print(f"Collab Note Fields: {ProjectCollabNoteField.objects.count()}") +print("=" * 60)