diff --git a/components/board/BoardCanvas.module.css b/components/board/BoardCanvas.module.css
index 193b1112..af8ddc56 100644
--- a/components/board/BoardCanvas.module.css
+++ b/components/board/BoardCanvas.module.css
@@ -380,43 +380,6 @@
 }
 
 /* Context menu - matching ContextMenu.module.css */
-.context_menu {
-    display: flex;
-    flex-direction: column;
-    width: 220px;
-    z-index: 1000;
-    position: fixed;
-    padding-block: 6px;
-    overflow-y: auto;
-    border-radius: 12px;
-    background-color: var(--context-menu-bg);
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
-}
-
-.context_menu_item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-
-    padding-block: 6px;
-    padding-inline: 12px;
-    font-size: 14px;
-    cursor: pointer;
-}
-
-.context_menu_item:hover {
-    background-color: var(--context-menu-item-hover);
-}
-
-.context_menu_item_disabled {
-    opacity: 0.45;
-    cursor: default;
-}
-
-.context_menu_item_disabled:hover {
-    background-color: transparent;
-}
-
 /* Recording indicator: a pill in the top toolbar row, right of the zoom controls. */
 .recording_indicator {
     position: absolute;
@@ -474,33 +437,6 @@
     background-color: #d33b40;
 }
 
-.context_menu_colors {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    padding: 10px 12px;
-    border-bottom: 1px solid var(--separator);
-}
-
-.context_menu_color_swatch {
-    width: 20px;
-    height: 20px;
-    border: 2px solid transparent;
-    border-radius: 50%;
-    cursor: pointer;
-    transition:
-        transform 0.15s ease,
-        border-color 0.15s ease;
-}
-
-.context_menu_color_swatch:hover {
-    transform: scale(1.15);
-}
-
-.context_menu_color_swatch_active {
-    border-color: white;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
-}
 
 /* Zoom controls - styled like the panel switcher buttons (secondary pill, no
    border, secondary-hover on hover) and sitting in the same top toolbar row,
diff --git a/components/board/BoardCanvas.tsx b/components/board/BoardCanvas.tsx
index 267a5041..e9598ab1 100644
--- a/components/board/BoardCanvas.tsx
+++ b/components/board/BoardCanvas.tsx
@@ -2,8 +2,14 @@
 
 import { useContext, useRef, useState, useCallback, useEffect, useMemo } from "react";
 import { ProjectContext } from "@src/context/ProjectContext";
+import { UserContext } from "@src/context/UserContext";
 import { BoardCardData, BoardArrowData } from "@src/lib/project/project-state";
 import BoardCard from "./BoardCard";
+import {
+    ContextMenuItem,
+    ContextMenuSeparator,
+    ContextMenuColorRow,
+} from "@components/utils/ContextMenu";
 import styles from "./BoardCanvas.module.css";
 import { v7 as uuidv7 } from "uuid";
 import { Trash2, Plus, Minus, Copy, ListTree, Mic, Square } from "lucide-react";
@@ -34,27 +40,10 @@ function formatRecordingTime(seconds: number): string {
     return `${m}:${s.toString().padStart(2, "0")}`;
 }
 
-interface CardContextMenuState {
-    position: { x: number; y: number };
-    card: BoardCardData;
-}
-
-interface ArrowContextMenuState {
-    position: { x: number; y: number };
-    arrow: BoardArrowData;
-}
-
-interface CanvasContextMenuState {
-    /** Viewport position for placing the menu. */
-    position: { x: number; y: number };
-    /** Canvas-space coords where a new card should be created. */
-    canvasX: number;
-    canvasY: number;
-}
-
-const BoardCanvas = ({ isVisible, docId }: { isVisible: boolean; docId: string }) => {
+const BoardCanvas =({ isVisible, docId }: { isVisible: boolean; docId: string }) => {
     const { projectId, repository, isYjsReady, isReadOnly, boardFocusCardId, setBoardFocusCardId } =
         useContext(ProjectContext);
+    const { updateContextMenu } = useContext(UserContext);
     const t = useTranslations("board");
     const projectState = repository?.getState();
     const containerRef = useRef<HTMLDivElement>(null);
@@ -67,19 +56,11 @@ const BoardCanvas = ({ isVisible, docId }: { isVisible: boolean; docId: string }
     const [isPanning, setIsPanning] = useState(false);
     const [isDraggingFile, setIsDraggingFile] = useState(false);
     const [isSnapping, setIsSnapping] = useState(true);
-    const [cardContextMenu, setCardContextMenu] = useState<CardContextMenuState | null>(null);
-    const [arrowContextMenu, setArrowContextMenu] = useState<ArrowContextMenuState | null>(null);
-    const [canvasContextMenu, setCanvasContextMenu] = useState<CanvasContextMenuState | null>(null);
     const recorder = useAudioRecorder();
     const [prevIsVisible, setPrevIsVisible] = useState(isVisible);
     if (prevIsVisible !== isVisible) {
         setPrevIsVisible(isVisible);
-        if (!isVisible) {
-            setIsSnapping(true);
-            if (cardContextMenu) setCardContextMenu(null);
-            if (arrowContextMenu) setArrowContextMenu(null);
-            if (canvasContextMenu) setCanvasContextMenu(null);
-        }
+        if (!isVisible) setIsSnapping(true);
     }
     const [isCameraReady, setIsCameraReady] = useState(false);
     const [connectingFrom, setConnectingFrom] = useState<{ cardId: string; side: string } | null>(
@@ -263,22 +244,6 @@ const BoardCanvas = ({ isVisible, docId }: { isVisible: boolean; docId: string }
         };
     }, [isVisible]);
 
-    // Close context menus on click anywhere
-    useEffect(() => {
-        if (!isVisible) return;
-
-        const handleClick = () => {
-            if (cardContextMenu) setCardContextMenu(null);
-            if (arrowContextMenu) setArrowContextMenu(null);
-            if (canvasContextMenu) setCanvasContextMenu(null);
-        };
-
-        window.addEventListener("click", handleClick);
-        return () => {
-            window.removeEventListener("click", handleClick);
-        };
-    }, [cardContextMenu, arrowContextMenu, canvasContextMenu, isVisible]);
-
     // Panning with middle-click
     const handlePanMouseDown = useCallback(
         (e: React.MouseEvent) => {
@@ -302,7 +267,7 @@ const BoardCanvas = ({ isVisible, docId }: { isVisible: boolean; docId: string }
             if (e.button !== 0) return;
             if ((e.target as HTMLElement).closest(`.${styles.card}`)) return;
             if ((e.target as HTMLElement).closest(`.${styles.zoom_controls}`)) return;
-            if ((e.target as HTMLElement).closest(`.${styles.context_menu}`)) return;
+            if ((e.target as HTMLElement).closest("[data-context-menu]")) return;
 
             const container = containerRef.current;
             if (!container) return;
@@ -628,70 +593,41 @@ const BoardCanvas = ({ isVisible, docId }: { isVisible: boolean; docId: string }
         [isReadOnly, projectId, offset, scale, saveCards],
     );
 
-    // Right-clicking empty canvas opens a menu (create card / record audio).
-    // Cards and arrows have their own menus, so bail when the click landed on one.
-    const handleCanvasContextMenu = useCallback(
-        (e: React.MouseEvent) => {
-            if (isReadOnly) return;
-            const target = e.target as HTMLElement;
-            if (
-                target.closest(`.${styles.card}`) ||
-                target.closest(`.${styles.arrow_group}`) ||
-                target.closest(`.${styles.context_menu}`) ||
-                target.closest(`.${styles.zoom_controls}`)
-            )
-                return;
+    // Create a text card at the given canvas-space coords (from the canvas menu).
+    const handleCreateCard = useCallback(
+        (x: number, y: number) => {
+            setSelectedCardIds(new Set());
 
-            const container = containerRef.current;
-            if (!container) return;
-            const rect = container.getBoundingClientRect();
-            e.preventDefault();
-            setCardContextMenu(null);
-            setArrowContextMenu(null);
-            setCanvasContextMenu({
-                // Match the card/arrow menus: positioned with raw viewport coords.
-                position: { x: e.clientX, y: e.clientY },
-                canvasX: (e.clientX - rect.left - offset.x) / scale,
-                canvasY: (e.clientY - rect.top - offset.y) / scale,
-            });
+            const newCard: BoardCardData = {
+                id: uuidv7(),
+                title: "",
+                description: "",
+                color: randomCardColor(),
+                x: isSnapping ? Math.round(x / GRID_SIZE) * GRID_SIZE : x,
+                y: isSnapping ? Math.round(y / GRID_SIZE) * GRID_SIZE : y,
+                width: 450,
+                height: 280,
+            };
+
+            const newCards = [...cardsRef.current, newCard];
+            setCards(newCards);
+            saveCards(newCards);
         },
-        [isReadOnly, offset, scale],
+        [isSnapping, saveCards],
     );
 
-    // Create a text card at the spot the canvas menu was opened.
-    const handleCreateCard = useCallback(() => {
-        if (!canvasContextMenu) return;
-        const { canvasX: x, canvasY: y } = canvasContextMenu;
-        setCanvasContextMenu(null);
-        setSelectedCardIds(new Set());
-
-        const newCard: BoardCardData = {
-            id: uuidv7(),
-            title: "",
-            description: "",
-            color: randomCardColor(),
-            x: isSnapping ? Math.round(x / GRID_SIZE) * GRID_SIZE : x,
-            y: isSnapping ? Math.round(y / GRID_SIZE) * GRID_SIZE : y,
-            width: 450,
-            height: 280,
-        };
-
-        const newCards = [...cardsRef.current, newCard];
-        setCards(newCards);
-        saveCards(newCards);
-    }, [canvasContextMenu, isSnapping, saveCards]);
-
-    // Begin recording from the canvas menu; remember where to drop the card.
-    const handleStartRecording = useCallback(async () => {
-        if (!canvasContextMenu) return;
-        recordCoords.current = { x: canvasContextMenu.canvasX, y: canvasContextMenu.canvasY };
-        setCanvasContextMenu(null);
-        try {
-            await recorder.start();
-        } catch (err) {
-            console.error("[BoardCanvas] Microphone access failed:", err);
-        }
-    }, [canvasContextMenu, recorder]);
+    // Begin recording; remember where to drop the resulting card.
+    const handleStartRecording = useCallback(
+        async (x: number, y: number) => {
+            recordCoords.current = { x, y };
+            try {
+                await recorder.start();
+            } catch (err) {
+                console.error("[BoardCanvas] Microphone access failed:", err);
+            }
+        },
+        [recorder],
+    );
 
     // Stop recording, store the clip as an asset, and drop an audio card.
     const handleStopRecording = useCallback(async () => {
@@ -720,6 +656,49 @@ const BoardCanvas = ({ isVisible, docId }: { isVisible: boolean; docId: string }
         }
     }, [recorder, projectId, saveCards]);
 
+    // Right-clicking empty canvas opens a menu (create card / record audio).
+    // Cards and arrows have their own menus, so bail when the click landed on one.
+    const handleCanvasContextMenu = useCallback(
+        (e: React.MouseEvent) => {
+            if (isReadOnly) return;
+            const target = e.target as HTMLElement;
+            if (
+                target.closest(`.${styles.card}`) ||
+                target.closest(`.${styles.arrow_group}`) ||
+                target.closest("[data-context-menu]") ||
+                target.closest(`.${styles.zoom_controls}`)
+            )
+                return;
+
+            const container = containerRef.current;
+            if (!container) return;
+            const rect = container.getBoundingClientRect();
+            e.preventDefault();
+            const canvasX = (e.clientX - rect.left - offset.x) / scale;
+            const canvasY = (e.clientY - rect.top - offset.y) / scale;
+            updateContextMenu({
+                position: { x: e.clientX, y: e.clientY },
+                content: (
+                    <>
+                        <ContextMenuItem
+                            icon={Plus}
+                            text={t("createCard")}
+                            action={() => handleCreateCard(canvasX, canvasY)}
+                        />
+                        <ContextMenuItem
+                            icon={Mic}
+                            text={t("recordAudio")}
+                            action={() => handleStartRecording(canvasX, canvasY)}
+                            disabled={!recorder.isSupported}
+                            title={recorder.isSupported ? undefined : t("audioUnsupported")}
+                        />
+                    </>
+                ),
+            });
+        },
+        [isReadOnly, offset, scale, updateContextMenu, t, handleCreateCard, handleStartRecording, recorder.isSupported],
+    );
+
     // Update card (with multi-drag support)
     const handleUpdateCard = useCallback(
         (updatedCard: BoardCardData) => {
@@ -766,7 +745,6 @@ const BoardCanvas = ({ isVisible, docId }: { isVisible: boolean; docId: string }
             const newArrows = arrows.filter((a) => a.fromCardId !== id && a.toCardId !== id);
             setArrows(newArrows);
             saveArrows(newArrows);
-            setCardContextMenu(null);
             // Deleting an image card may orphan its asset — reconcile (debounced).
             if (projectId && projectState) scheduleAssetGc(projectId, projectState);
         },
@@ -779,7 +757,6 @@ const BoardCanvas = ({ isVisible, docId }: { isVisible: boolean; docId: string }
             const newCards = cards.map((c) => (c.id === id ? { ...c, color } : c));
             setCards(newCards);
             saveCards(newCards);
-            setCardContextMenu(null);
         },
         [cards, saveCards],
     );
@@ -796,7 +773,6 @@ const BoardCanvas = ({ isVisible, docId }: { isVisible: boolean; docId: string }
             const newCards = [...cards, newCard];
             setCards(newCards);
             saveCards(newCards);
-            setCardContextMenu(null);
         },
         [cards, saveCards],
     );
@@ -813,40 +789,81 @@ const BoardCanvas = ({ isVisible, docId }: { isVisible: boolean; docId: string }
                 color: card.color,
                 parentId: null,
             });
-            setCardContextMenu(null);
         },
         [repository, docId],
     );
 
-    // Context menu for card
-    const handleCardContextMenu = useCallback((e: React.MouseEvent, card: BoardCardData) => {
-        setCardContextMenu({
-            position: { x: e.clientX, y: e.clientY },
-            card,
-        });
-    }, []);
-
-    // Context menu for arrow
-    const handleArrowContextMenu = useCallback((e: React.MouseEvent, arrow: BoardArrowData) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setArrowContextMenu({
-            position: { x: e.clientX, y: e.clientY },
-            arrow,
-        });
-    }, []);
-
     // Delete arrow
     const handleDeleteArrow = useCallback(
         (id: string) => {
             const newArrows = arrows.filter((a) => a.id !== id);
             setArrows(newArrows);
             saveArrows(newArrows);
-            setArrowContextMenu(null);
         },
         [arrows, saveArrows],
     );
 
+    // Open the shared context-menu host for a card.
+    const handleCardContextMenu = useCallback(
+        (e: React.MouseEvent, card: BoardCardData) => {
+            updateContextMenu({
+                position: { x: e.clientX, y: e.clientY },
+                content: (
+                    <>
+                        {/* Color applies to text + audio notes; image cards have none. */}
+                        {card.type !== "image" && (
+                            <>
+                                <ContextMenuColorRow
+                                    colors={DEFAULT_ITEM_COLORS}
+                                    selected={card.color}
+                                    onSelect={(color) => handleChangeCardColor(card.id, color)}
+                                />
+                                <ContextMenuSeparator />
+                            </>
+                        )}
+                        <ContextMenuItem
+                            icon={Copy}
+                            text={t("duplicate")}
+                            action={() => handleDuplicateCard(card)}
+                        />
+                        {(card.type ?? "text") === "text" && (
+                            <ContextMenuItem
+                                icon={ListTree}
+                                text={t("sendToOutline")}
+                                action={() => handleSendToOutline(card)}
+                            />
+                        )}
+                        <ContextMenuItem
+                            icon={Trash2}
+                            text={t("delete")}
+                            action={() => handleDeleteCard(card.id)}
+                        />
+                    </>
+                ),
+            });
+        },
+        [updateContextMenu, t, handleChangeCardColor, handleDuplicateCard, handleSendToOutline, handleDeleteCard],
+    );
+
+    // Open the shared context-menu host for an arrow.
+    const handleArrowContextMenu = useCallback(
+        (e: React.MouseEvent, arrow: BoardArrowData) => {
+            e.preventDefault();
+            e.stopPropagation();
+            updateContextMenu({
+                position: { x: e.clientX, y: e.clientY },
+                content: (
+                    <ContextMenuItem
+                        icon={Trash2}
+                        text={t("delete")}
+                        action={() => handleDeleteArrow(arrow.id)}
+                    />
+                ),
+            });
+        },
+        [updateContextMenu, t, handleDeleteArrow],
+    );
+
     // Get connection point position for a card
     const getConnectionPoint = useCallback(
         (card: BoardCardData, side: "top" | "right" | "bottom" | "left") => {
@@ -1189,80 +1206,6 @@ const BoardCanvas = ({ isVisible, docId }: { isVisible: boolean; docId: string }
                     )}
                 </div>
 
-                {/* Card Context Menu */}
-                {cardContextMenu && (
-                    <div
-                        className={styles.context_menu}
-                        style={{
-                            top: cardContextMenu.position.y,
-                            left: cardContextMenu.position.x,
-                        }}
-                    >
-                        {/* Color applies to text + audio notes; image cards have none. */}
-                        {cardContextMenu.card.type !== "image" && (
-                            <div className={styles.context_menu_colors}>
-                                {DEFAULT_ITEM_COLORS.map((color) => (
-                                    <button
-                                        key={color}
-                                        className={`${styles.context_menu_color_swatch} ${cardContextMenu.card.color === color ? styles.context_menu_color_swatch_active : ""}`}
-                                        style={{ backgroundColor: color }}
-                                        onClick={() =>
-                                            handleChangeCardColor(cardContextMenu.card.id, color)
-                                        }
-                                    />
-                                ))}
-                            </div>
-                        )}
-                        <div
-                            className={styles.context_menu_item}
-                            onClick={() => handleDuplicateCard(cardContextMenu.card)}
-                        >
-                            <Copy size={16} />
-                            <p className="unselectable">{t("duplicate")}</p>
-                        </div>
-                        {(cardContextMenu.card.type ?? "text") === "text" && (
-                            <div
-                                className={styles.context_menu_item}
-                                onClick={() => handleSendToOutline(cardContextMenu.card)}
-                            >
-                                <ListTree size={16} />
-                                <p className="unselectable">{t("sendToOutline")}</p>
-                            </div>
-                        )}
-                        <div
-                            className={styles.context_menu_item}
-                            onClick={() => handleDeleteCard(cardContextMenu.card.id)}
-                        >
-                            <Trash2 size={16} />
-                            <p className="unselectable">{t("delete")}</p>
-                        </div>
-                    </div>
-                )}
-
-                {/* Canvas Context Menu (empty-area right-click) */}
-                {canvasContextMenu && (
-                    <div
-                        className={styles.context_menu}
-                        style={{
-                            top: canvasContextMenu.position.y,
-                            left: canvasContextMenu.position.x,
-                        }}
-                    >
-                        <div className={styles.context_menu_item} onClick={handleCreateCard}>
-                            <Plus size={16} />
-                            <p className="unselectable">{t("createCard")}</p>
-                        </div>
-                        <div
-                            className={`${styles.context_menu_item} ${recorder.isSupported ? "" : styles.context_menu_item_disabled}`}
-                            title={recorder.isSupported ? undefined : t("audioUnsupported")}
-                            onClick={recorder.isSupported ? handleStartRecording : undefined}
-                        >
-                            <Mic size={16} />
-                            <p className="unselectable">{t("recordAudio")}</p>
-                        </div>
-                    </div>
-                )}
-
                 {/* Recording indicator */}
                 {recorder.isRecording && (
                     <div className={styles.recording_indicator}>
@@ -1277,25 +1220,6 @@ const BoardCanvas = ({ isVisible, docId }: { isVisible: boolean; docId: string }
                     </div>
                 )}
 
-                {/* Arrow Context Menu */}
-                {arrowContextMenu && (
-                    <div
-                        className={styles.context_menu}
-                        style={{
-                            top: arrowContextMenu.position.y,
-                            left: arrowContextMenu.position.x,
-                        }}
-                    >
-                        <div
-                            className={styles.context_menu_item}
-                            onClick={() => handleDeleteArrow(arrowContextMenu.arrow.id)}
-                        >
-                            <Trash2 size={16} />
-                            <p className="unselectable">{t("delete")}</p>
-                        </div>
-                    </div>
-                )}
-
                 <div className={styles.zoom_controls}>
                     <button className={styles.zoom_btn} onClick={() => zoomFromCenter(false)}>
                         <Minus size={14} />
diff --git a/components/editor/CommentCard.module.css b/components/editor/CommentCard.module.css
index 936f0265..3ee7951f 100644
--- a/components/editor/CommentCard.module.css
+++ b/components/editor/CommentCard.module.css
@@ -1,35 +1,43 @@
 .comment_card {
-    width: 250px;
-    background-color: var(--editor-sidebar);
-    border-radius: 12px;
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
-    padding: 10px 12px;
+    width: 100%;
+    background-color: var(--editor-style-bg);
+    border-radius: 10px;
+    padding: 8px 10px;
     cursor: default;
     border: 1px solid var(--separator);
-    z-index: 50;
-    transition: box-shadow 0.2s ease, border-color 0.2s ease;
-}
-
-.comment_card_active {
-    border-color: rgba(255, 213, 0, 0.5);
+    box-sizing: border-box;
 }
 
 .comment_header {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 8px;
+    min-height: 22px;
     margin-bottom: 6px;
 }
 
+.comment_meta {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    min-width: 0;
+}
+
 .comment_author {
     font-size: 13px;
     font-weight: 600;
     color: var(--text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .comment_time {
     font-size: 11px;
     color: var(--text-secondary);
+    white-space: nowrap;
+    flex-shrink: 0;
 }
 
 .comment_text {
@@ -40,24 +48,31 @@
     word-wrap: break-word;
 }
 
+/* Icon actions sit in the header, hidden until the card is hovered/focused so
+   the resting thread stays uncluttered while Delete et al. remain one hover away. */
 .comment_actions {
     display: flex;
-    gap: 4px;
-    justify-content: flex-end;
-    border-top: 1px solid var(--separator);
-    padding-top: 8px;
+    gap: 2px;
+    align-items: center;
+    flex-shrink: 0;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+}
+
+.comment_card:hover .comment_actions,
+.comment_card:focus-within .comment_actions {
+    opacity: 1;
 }
 
 .comment_btn {
     display: flex;
     align-items: center;
-    gap: 4px;
-    padding: 4px 8px;
+    justify-content: center;
+    padding: 3px;
     border: none;
-    border-radius: 8px;
-    font-size: 13px;
+    border-radius: 6px;
     cursor: pointer;
-    background-color: var(--editor-style-bg);
+    background-color: transparent;
     color: var(--text-secondary);
     transition: background-color 0.15s ease, color 0.15s ease;
 }
@@ -151,16 +166,40 @@
 .reply {
     padding: 6px 8px;
     border-radius: 8px;
-    background-color: var(--editor-style-bg);
+    background-color: var(--editor-sidebar);
+    border: 1px solid var(--separator);
 }
 
 .reply_header {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 8px;
+    min-height: 20px;
     margin-bottom: 2px;
 }
 
+.reply_meta {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+}
+
+/* Per-reply icon actions, revealed when that reply is hovered/focused. */
+.reply_actions {
+    display: flex;
+    gap: 2px;
+    align-items: center;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+}
+
+.reply:hover .reply_actions,
+.reply:focus-within .reply_actions {
+    opacity: 1;
+}
+
 .reply_text {
     font-size: 13px;
     color: var(--text);
@@ -177,6 +216,8 @@
 
 .reply_input {
     flex: 1;
+    width: 100%;
+    box-sizing: border-box;
     padding: 5px 8px;
     border: 1px solid var(--separator);
     border-radius: 8px;
diff --git a/components/editor/CommentCard.tsx b/components/editor/CommentCard.tsx
new file mode 100644
index 00000000..3328863c
--- /dev/null
+++ b/components/editor/CommentCard.tsx
@@ -0,0 +1,297 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Comment, CommentReply } from "@src/lib/utils/types";
+import { Check, Pencil, Send, Trash2 } from "lucide-react";
+import { useFormatTimestamp } from "@src/lib/utils/hooks";
+import styles from "./CommentCard.module.css";
+
+// -------------------------------- //
+//          Reply bubble            //
+// -------------------------------- //
+
+type ReplyBubbleProps = {
+    reply: CommentReply;
+    onSave: (text: string) => void;
+    onDelete: () => void;
+};
+
+const ReplyBubble = ({ reply, onSave, onDelete }: ReplyBubbleProps) => {
+    const [isEditing, setIsEditing] = useState(false);
+    const [draft, setDraft] = useState(reply.text);
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const formatTimestamp = useFormatTimestamp();
+
+    useEffect(() => {
+        if (isEditing && textareaRef.current) textareaRef.current.focus({ preventScroll: true });
+    }, [isEditing]);
+
+    const handleSave = () => {
+        const trimmed = draft.trim();
+        if (!trimmed) return;
+        onSave(trimmed);
+        setIsEditing(false);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            handleSave();
+        }
+        if (e.key === "Escape") {
+            e.preventDefault();
+            setDraft(reply.text);
+            setIsEditing(false);
+        }
+        e.stopPropagation();
+    };
+
+    return (
+        <div className={styles.reply}>
+            <div className={styles.reply_header}>
+                <span className={styles.comment_author}>{reply.author}</span>
+                <div className={styles.reply_meta}>
+                    <span className={styles.comment_time}>{formatTimestamp(reply.createdAt)}</span>
+                    {!isEditing && (
+                        <div className={styles.reply_actions}>
+                            <button
+                                className={styles.comment_btn}
+                                onClick={() => setIsEditing(true)}
+                                title="Edit"
+                                aria-label="Edit reply"
+                            >
+                                <Pencil size={13} />
+                            </button>
+                            <button
+                                className={`${styles.comment_btn} ${styles.comment_btn_danger}`}
+                                onClick={onDelete}
+                                title="Delete"
+                                aria-label="Delete reply"
+                            >
+                                <Trash2 size={13} />
+                            </button>
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {isEditing ? (
+                <>
+                    <textarea
+                        ref={textareaRef}
+                        className={styles.reply_input}
+                        value={draft}
+                        onChange={(e) => setDraft(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        rows={2}
+                    />
+                    <div className={styles.comment_submit_row}>
+                        <button
+                            className={styles.comment_cancel_btn}
+                            onClick={() => {
+                                setDraft(reply.text);
+                                setIsEditing(false);
+                            }}
+                        >
+                            Cancel
+                        </button>
+                        <button className={styles.comment_submit_btn} onClick={handleSave}>
+                            Save
+                        </button>
+                    </div>
+                </>
+            ) : (
+                <div className={styles.reply_text}>{reply.text}</div>
+            )}
+        </div>
+    );
+};
+
+// -------------------------------- //
+//          Comment card            //
+// -------------------------------- //
+
+export type CommentCardProps = {
+    comment: Comment;
+    onUpdate: (data: Partial<Comment>) => void;
+    onDelete: () => void;
+    onResolve: () => void;
+    onReply: (text: string) => void;
+};
+
+/**
+ * A single comment within a node's discussion thread: author/time header with
+ * resolve/edit/delete actions, the comment body (editable for new or in-edit
+ * comments), its replies (each individually editable/deletable), and a reply
+ * input.
+ */
+const CommentCard = ({ comment, onUpdate, onDelete, onResolve, onReply }: CommentCardProps) => {
+    const isNew = comment.text === "";
+    const [isEditing, setIsEditing] = useState(isNew);
+    const [draft, setDraft] = useState(comment.text);
+    const [replyDraft, setReplyDraft] = useState("");
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const formatTimestamp = useFormatTimestamp();
+
+    const replies = comment.replies ?? [];
+
+    useEffect(() => {
+        if (isEditing && textareaRef.current) {
+            textareaRef.current.focus({ preventScroll: true });
+        }
+    }, [isEditing]);
+
+    const handleSubmit = () => {
+        const trimmed = draft.trim();
+        if (!trimmed) {
+            if (isNew) onDelete();
+            return;
+        }
+        onUpdate({ text: trimmed });
+        setIsEditing(false);
+    };
+
+    const handleCancel = () => {
+        if (isNew) {
+            onDelete();
+        } else {
+            setDraft(comment.text);
+            setIsEditing(false);
+        }
+    };
+
+    const handleReplySubmit = () => {
+        const trimmed = replyDraft.trim();
+        if (!trimmed) return;
+        onReply(trimmed);
+        setReplyDraft("");
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            handleSubmit();
+        }
+        if (e.key === "Escape") {
+            e.preventDefault();
+            handleCancel();
+        }
+        e.stopPropagation();
+    };
+
+    const handleReplyKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            handleReplySubmit();
+        }
+        e.stopPropagation();
+    };
+
+    const editReply = (replyId: string, text: string) => {
+        onUpdate({ replies: replies.map((r) => (r.id === replyId ? { ...r, text } : r)) });
+    };
+
+    const deleteReply = (replyId: string) => {
+        onUpdate({ replies: replies.filter((r) => r.id !== replyId) });
+    };
+
+    return (
+        <div className={styles.comment_card}>
+            <div className={styles.comment_header}>
+                <div className={styles.comment_meta}>
+                    <span className={styles.comment_author}>{comment.author}</span>
+                    <span className={styles.comment_time}>{formatTimestamp(comment.createdAt)}</span>
+                </div>
+
+                {/* Icon actions, revealed on card hover/focus (see CSS). */}
+                {!isEditing && (
+                    <div className={styles.comment_actions}>
+                        <button
+                            className={`${styles.comment_btn} ${styles.comment_btn_resolve}`}
+                            onClick={onResolve}
+                            title="Resolve"
+                            aria-label="Resolve"
+                        >
+                            <Check size={14} />
+                        </button>
+                        <button
+                            className={styles.comment_btn}
+                            onClick={() => setIsEditing(true)}
+                            title="Edit"
+                            aria-label="Edit"
+                        >
+                            <Pencil size={14} />
+                        </button>
+                        <button
+                            className={`${styles.comment_btn} ${styles.comment_btn_danger}`}
+                            onClick={onDelete}
+                            title="Delete"
+                            aria-label="Delete"
+                        >
+                            <Trash2 size={14} />
+                        </button>
+                    </div>
+                )}
+            </div>
+
+            {isEditing ? (
+                <>
+                    <textarea
+                        ref={textareaRef}
+                        className={styles.comment_input}
+                        value={draft}
+                        onChange={(e) => setDraft(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        placeholder="Write a comment..."
+                    />
+                    <div className={styles.comment_submit_row}>
+                        <button className={styles.comment_cancel_btn} onClick={handleCancel}>
+                            Cancel
+                        </button>
+                        <button className={styles.comment_submit_btn} onClick={handleSubmit}>
+                            Save
+                        </button>
+                    </div>
+                </>
+            ) : (
+                <>
+                    <div className={styles.comment_text}>{comment.text}</div>
+
+                    {replies.length > 0 && (
+                        <div className={styles.replies}>
+                            {replies.map((r) => (
+                                <ReplyBubble
+                                    key={r.id}
+                                    reply={r}
+                                    onSave={(text) => editReply(r.id, text)}
+                                    onDelete={() => deleteReply(r.id)}
+                                />
+                            ))}
+                        </div>
+                    )}
+
+                    <div className={styles.reply_input_row}>
+                        <textarea
+                            className={styles.reply_input}
+                            value={replyDraft}
+                            onChange={(e) => setReplyDraft(e.target.value)}
+                            onKeyDown={handleReplyKeyDown}
+                            placeholder="Reply..."
+                            rows={1}
+                        />
+                        <button
+                            className={styles.reply_send_btn}
+                            onClick={handleReplySubmit}
+                            disabled={!replyDraft.trim()}
+                            title="Send reply"
+                        >
+                            <Send size={14} />
+                        </button>
+                    </div>
+                </>
+            )}
+        </div>
+    );
+};
+
+export default CommentCard;
diff --git a/components/editor/CommentCards.tsx b/components/editor/CommentCards.tsx
deleted file mode 100644
index 6071f4ab..00000000
--- a/components/editor/CommentCards.tsx
+++ /dev/null
@@ -1,453 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useRef, useState, useMemo } from "react";
-import { Comment, CommentReply } from "@src/lib/utils/types";
-import { Send, Trash2, X } from "lucide-react";
-import { useFormatTimestamp, useUser } from "@src/lib/utils/hooks";
-import { getCommentPositions } from "@src/lib/screenplay/extensions/comment-highlight-extension";
-import { useViewContext } from "@src/context/ViewContext";
-import { Editor } from "@tiptap/react";
-import { Transaction } from "@tiptap/pm/state";
-import styles from "./CommentCard.module.css";
-
-// -------------------------------- //
-//          Reply bubble            //
-// -------------------------------- //
-
-const ReplyBubble = ({ reply }: { reply: CommentReply }) => {
-    const formatTimestamp = useFormatTimestamp();
-    return (
-        <div className={styles.reply}>
-            <div className={styles.reply_header}>
-                <span className={styles.comment_author}>{reply.author}</span>
-                <span className={styles.comment_time}>{formatTimestamp(reply.createdAt)}</span>
-            </div>
-            <div className={styles.reply_text}>{reply.text}</div>
-        </div>
-    );
-};
-
-// -------------------------------- //
-//          Comment card             //
-// -------------------------------- //
-
-type CommentCardProps = {
-    comment: Comment;
-    isActive: boolean;
-    onActivate: () => void;
-    onDeactivate: () => void;
-    onSave: (text: string) => void;
-    onDelete: () => void;
-    onReply: (text: string) => void;
-};
-
-const CommentCard = ({ comment, isActive, onActivate, onDeactivate, onSave, onDelete, onReply }: CommentCardProps) => {
-    const isNew = comment.text === "";
-    const [isEditing, setIsEditing] = useState(isNew);
-    const [draft, setDraft] = useState(comment.text);
-    const [replyDraft, setReplyDraft] = useState("");
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
-    const formatTimestamp = useFormatTimestamp();
-
-    useEffect(() => {
-        if (isEditing && textareaRef.current) {
-            textareaRef.current.focus({ preventScroll: true });
-        }
-    }, [isEditing]);
-
-    const handleSubmit = () => {
-        const trimmed = draft.trim();
-        if (!trimmed) {
-            if (isNew) onDelete();
-            return;
-        }
-        onSave(trimmed);
-        setIsEditing(false);
-        onDeactivate();
-    };
-
-    const handleCancel = () => {
-        if (isNew) {
-            onDelete();
-        } else {
-            setDraft(comment.text);
-            setIsEditing(false);
-        }
-    };
-
-    const handleReplySubmit = () => {
-        const trimmed = replyDraft.trim();
-        if (!trimmed) return;
-        onReply(trimmed);
-        setReplyDraft("");
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
-            e.preventDefault();
-            handleSubmit();
-        }
-        if (e.key === "Escape") {
-            e.preventDefault();
-            handleCancel();
-        }
-        e.stopPropagation();
-    };
-
-    const handleReplyKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
-            e.preventDefault();
-            handleReplySubmit();
-        }
-        e.stopPropagation();
-    };
-
-    const replies = comment.replies ?? [];
-
-    // Compact card for non-active comments
-    if (!isActive && !isNew) {
-        return (
-            <div className={styles.comment_card} onMouseDown={(e) => e.stopPropagation()} onClick={(e) => { e.stopPropagation(); onActivate(); }}>
-                <div className={styles.comment_header}>
-                    <span className={styles.comment_author}>{comment.author}</span>
-                    <span className={styles.comment_time}>{formatTimestamp(comment.createdAt)}</span>
-                </div>
-                <div className={styles.comment_text}>{comment.text}</div>
-                {replies.length > 0 && (
-                    <div className={styles.comment_reply_count}>
-                        {replies.length} {replies.length === 1 ? "reply" : "replies"}
-                    </div>
-                )}
-            </div>
-        );
-    }
-
-    return (
-        <div className={`${styles.comment_card} ${styles.comment_card_active}`} onMouseDown={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}>
-            {/* Original comment */}
-            <div className={styles.comment_header}>
-                <span className={styles.comment_author}>{comment.author}</span>
-                <span className={styles.comment_time}>{formatTimestamp(comment.createdAt)}</span>
-            </div>
-
-            {isEditing ? (
-                <>
-                    <textarea
-                        ref={textareaRef}
-                        className={styles.comment_input}
-                        value={draft}
-                        onChange={(e) => setDraft(e.target.value)}
-                        onKeyDown={handleKeyDown}
-                        placeholder="Write a comment..."
-                    />
-                    <div className={styles.comment_submit_row}>
-                        <button className={styles.comment_cancel_btn} onClick={(e) => { e.stopPropagation(); handleCancel(); }}>
-                            Cancel
-                        </button>
-                        <button className={styles.comment_submit_btn} onClick={(e) => { e.stopPropagation(); handleSubmit(); }}>
-                            Save
-                        </button>
-                    </div>
-                </>
-            ) : (
-                <>
-                    <div className={styles.comment_text}>{comment.text}</div>
-
-                    {/* Replies */}
-                    {replies.length > 0 && (
-                        <div className={styles.replies}>
-                            {replies.map((r) => (
-                                <ReplyBubble key={r.id} reply={r} />
-                            ))}
-                        </div>
-                    )}
-
-                    {/* Reply input */}
-                    <div className={styles.reply_input_row}>
-                        <textarea
-                            className={styles.reply_input}
-                            value={replyDraft}
-                            onChange={(e) => setReplyDraft(e.target.value)}
-                            onKeyDown={handleReplyKeyDown}
-                            placeholder="Reply..."
-                            rows={1}
-                        />
-                        <button
-                            className={styles.reply_send_btn}
-                            onClick={(e) => { e.stopPropagation(); handleReplySubmit(); }}
-                            disabled={!replyDraft.trim()}
-                            title="Send reply"
-                        >
-                            <Send size={14} />
-                        </button>
-                    </div>
-
-                    {/* Actions: Cancel + Delete */}
-                    <div className={styles.comment_actions}>
-                        <button className={styles.comment_btn} onClick={(e) => { e.stopPropagation(); onDeactivate(); }} title="Cancel">
-                            <X size={14} /> Cancel
-                        </button>
-                        <button className={`${styles.comment_btn} ${styles.comment_btn_danger}`} onClick={(e) => { e.stopPropagation(); onDelete(); }} title="Delete">
-                            <Trash2 size={14} /> Delete
-                        </button>
-                    </div>
-                </>
-            )}
-        </div>
-    );
-};
-
-// -------------------------------- //
-//       Comment cards container     //
-// -------------------------------- //
-
-const CARD_GAP = 8;
-
-type ActiveLine = {
-    x1: number;
-    y1: number;
-    x2: number;
-    y2: number;
-    svgHeight: number;
-};
-
-export interface CommentCardsProps {
-    editor: Editor | null;
-    comments: Comment[];
-    activeCommentId: string | null;
-    setActiveCommentId: (id: string | null) => void;
-    onUpdateComment: (id: string, data: Partial<Comment>) => void;
-    onDeleteComment: (id: string) => void;
-    onAddReply: (commentId: string, text: string, author: string) => void;
-}
-
-const CommentCards = ({
-    editor,
-    comments,
-    activeCommentId,
-    setActiveCommentId,
-    onUpdateComment,
-    onDeleteComment,
-    onAddReply,
-}: CommentCardsProps) => {
-    const { user } = useUser();
-    const { showComments } = useViewContext();
-    const cardRefs = useRef<Map<string, HTMLDivElement>>(new Map());
-    const [activeLine, setActiveLine] = useState<ActiveLine | null>(null);
-
-    // Performance: RAF debouncing refs to prevent layout thrashing
-    const transactionDebounceRef = useRef<number | null>(null);
-    const resizeThrottleRef = useRef<number | null>(null);
-
-    const unresolvedComments = useMemo(
-        () => comments.filter((c) => !c.resolved),
-        [comments],
-    );
-
-    // Centralized positioning: iterate sorted cards, push down to avoid overlap.
-    // Reads positions from comment marks in the document.
-    const positionCards = useCallback(() => {
-        if (!editor || editor.isDestroyed || !editor.view?.dom || !showComments) return;
-
-        const editorDom = editor.view.dom;
-        const scrollContainer = editorDom.closest("[class*='container']") as HTMLElement | null;
-        if (!scrollContainer) return;
-
-        const containerRect = scrollContainer.getBoundingClientRect();
-        const editorRect = editorDom.getBoundingClientRect();
-        const CARD_WIDTH = 250;
-        const idealLeft = editorRect.right - containerRect.left + 12;
-        const maxLeft = containerRect.width - CARD_WIDTH - 8;
-        const left = Math.min(idealLeft, Math.max(0, maxLeft));
-        const markPositions = getCommentPositions(editor);
-
-        // Sort comments by their position in the document
-        const sorted = [...unresolvedComments]
-            .filter((c) => markPositions.has(c.id))
-            .sort((a, b) => (markPositions.get(a.id)!.from - markPositions.get(b.id)!.from));
-
-        let nextAvailableTop = 0;
-
-        for (const comment of sorted) {
-            const el = cardRefs.current.get(comment.id);
-            if (!el) continue;
-
-            const from = markPositions.get(comment.id)!.from;
-
-            try {
-                const coords = editor.view.coordsAtPos(from);
-                const idealTop = coords.top - containerRect.top + scrollContainer.scrollTop;
-                const top = Math.max(idealTop, nextAvailableTop);
-
-                el.style.top = `${top}px`;
-                el.style.left = `${left}px`;
-
-                nextAvailableTop = top + el.offsetHeight + CARD_GAP;
-            } catch {
-                // Position out of range
-            }
-        }
-
-    }, [editor, unresolvedComments, showComments]);
-
-    // Position on mount and when comments change
-    useEffect(() => {
-        positionCards();
-    }, [positionCards]);
-
-    // Reposition on document changes, window resize, and container resize (zen mode, split view, etc.)
-    useEffect(() => {
-        if (!editor || editor.isDestroyed || !showComments) return;
-
-        // Performance: Debounce transaction handler to prevent layout thrashing during typing
-        const handleTransaction = ({ transaction }: { transaction: Transaction }) => {
-            if (!transaction.docChanged) return;
-            if (transactionDebounceRef.current !== null) {
-                cancelAnimationFrame(transactionDebounceRef.current);
-            }
-            transactionDebounceRef.current = requestAnimationFrame(() => {
-                transactionDebounceRef.current = null;
-                positionCards();
-            });
-        };
-        editor.on("transaction", handleTransaction);
-        window.addEventListener("resize", positionCards);
-
-        const editorDom = editor.view?.dom;
-        const scrollContainer = editorDom?.closest("[class*='container']") as HTMLElement | null;
-        let resizeObserver: ResizeObserver | undefined;
-        if (scrollContainer) {
-            // Performance: Throttle ResizeObserver to once per animation frame
-            resizeObserver = new ResizeObserver(() => {
-                if (resizeThrottleRef.current !== null) return;
-                resizeThrottleRef.current = requestAnimationFrame(() => {
-                    resizeThrottleRef.current = null;
-                    positionCards();
-                });
-            });
-            resizeObserver.observe(scrollContainer);
-        }
-
-        return () => {
-            editor.off("transaction", handleTransaction);
-            window.removeEventListener("resize", positionCards);
-            resizeObserver?.disconnect();
-            // Cleanup pending animation frames
-            if (transactionDebounceRef.current !== null) {
-                cancelAnimationFrame(transactionDebounceRef.current);
-            }
-            if (resizeThrottleRef.current !== null) {
-                cancelAnimationFrame(resizeThrottleRef.current);
-            }
-        };
-    }, [editor, positionCards, showComments]);
-
-    // Reposition after active card changes (expanded height differs from compact)
-    // Also compute the connecting line for the active comment
-    useEffect(() => {
-        if (!showComments) {
-            requestAnimationFrame(() => setActiveLine(null));
-            return;
-        }
-
-        requestAnimationFrame(() => {
-            positionCards();
-
-            // Compute connecting line only for active comment
-            if (!activeCommentId || !editor || editor.isDestroyed || !editor.view?.dom) {
-                setActiveLine(null);
-                return;
-            }
-
-            const el = cardRefs.current.get(activeCommentId);
-            if (!el) { setActiveLine(null); return; }
-
-            const markPositions = getCommentPositions(editor);
-            const range = markPositions.get(activeCommentId);
-            if (!range) { setActiveLine(null); return; }
-
-            const editorDom = editor.view.dom;
-            const scrollContainer = editorDom.closest("[class*='container']") as HTMLElement | null;
-            if (!scrollContainer) { setActiveLine(null); return; }
-
-            try {
-                const containerRect = scrollContainer.getBoundingClientRect();
-                const fromCoords = editor.view.coordsAtPos(range.from);
-                const toCoords = editor.view.coordsAtPos(range.to);
-                const lineHeight = fromCoords.bottom - fromCoords.top;
-
-                setActiveLine({
-                    x1: toCoords.right - containerRect.left,
-                    y1: fromCoords.top - containerRect.top + scrollContainer.scrollTop + lineHeight / 2,
-                    x2: parseFloat(el.style.left),
-                    y2: parseFloat(el.style.top) + el.offsetHeight / 2,
-                    svgHeight: scrollContainer.scrollHeight,
-                });
-            } catch {
-                setActiveLine(null);
-            }
-        });
-    }, [activeCommentId, positionCards, editor, showComments]);
-
-    const setCardRef = useCallback((id: string, el: HTMLDivElement | null) => {
-        if (el) cardRefs.current.set(id, el);
-        else cardRefs.current.delete(id);
-    }, []);
-
-    if (!showComments || unresolvedComments.length === 0) return null;
-
-    return (
-        <>
-            {activeLine && (
-                <svg
-                    style={{
-                        position: "absolute",
-                        top: 0,
-                        left: 0,
-                        width: "100%",
-                        height: activeLine.svgHeight,
-                        pointerEvents: "none",
-                        zIndex: 9,
-                    }}
-                >
-                    <path
-                        d={`M ${activeLine.x1} ${activeLine.y1} C ${(activeLine.x1 + activeLine.x2) / 2} ${activeLine.y1}, ${(activeLine.x1 + activeLine.x2) / 2} ${activeLine.y2}, ${activeLine.x2} ${activeLine.y2}`}
-                        stroke="rgba(255, 213, 0, 0.4)"
-                        strokeWidth={1.5}
-                        fill="none"
-                    />
-                </svg>
-            )}
-            {unresolvedComments.map((comment) => {
-                const isActive = comment.id === activeCommentId;
-                return (
-                    <div
-                        key={comment.id}
-                        ref={(el) => setCardRef(comment.id, el)}
-                        style={{ position: "absolute", zIndex: isActive ? 11 : 10 }}
-                    >
-                        <CommentCard
-                            comment={comment}
-                            isActive={isActive}
-                            onActivate={() => setActiveCommentId(comment.id)}
-                            onDeactivate={() => setActiveCommentId(null)}
-                            onSave={(text: string) => {
-                                onUpdateComment(comment.id, { text });
-                            }}
-                            onDelete={() => {
-                                editor?.commands.unsetComment(comment.id);
-                                onDeleteComment(comment.id);
-                                setActiveCommentId(null);
-                            }}
-                            onReply={(text: string) => {
-                                onAddReply(comment.id, text, user?.username || "Anonymous");
-                            }}
-                        />
-                    </div>
-                );
-            })}
-        </>
-    );
-};
-
-export default CommentCards;
diff --git a/components/editor/CommentGutter.module.css b/components/editor/CommentGutter.module.css
new file mode 100644
index 00000000..0703ab68
--- /dev/null
+++ b/components/editor/CommentGutter.module.css
@@ -0,0 +1,126 @@
+/* ---- Margin comment icon ---- */
+
+.gutter_icon {
+    position: absolute;
+    z-index: 10;
+
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    height: 22px;
+    min-width: 22px;
+    padding: 0 4px;
+
+    border: 1px solid var(--separator);
+    border-radius: 6px 6px 6px 2px;
+    background-color: var(--editor-sidebar);
+    color: var(--text-secondary);
+    cursor: pointer;
+
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+    transition:
+        color 0.15s ease,
+        background-color 0.15s ease,
+        border-color 0.15s ease;
+}
+
+.gutter_icon:hover {
+    color: var(--text);
+    background-color: var(--editor-sidebar-hover);
+    border-color: rgba(255, 213, 0, 0.6);
+}
+
+.gutter_icon_active {
+    color: var(--text);
+    border-color: rgba(255, 213, 0, 0.8);
+    background-color: var(--editor-sidebar-hover);
+}
+
+.gutter_count {
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1;
+}
+
+/* ---- Discussion thread popover ---- */
+
+.thread {
+    position: absolute;
+    z-index: 12;
+
+    display: flex;
+    flex-direction: column;
+    max-height: 60vh;
+
+    background-color: var(--editor-sidebar);
+    border: 1px solid var(--separator);
+    border-radius: 12px;
+    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
+    overflow: hidden;
+}
+
+.thread_header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--separator);
+}
+
+.thread_title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text);
+}
+
+.thread_close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px;
+    border: none;
+    border-radius: 6px;
+    background-color: transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition:
+        background-color 0.15s ease,
+        color 0.15s ease;
+}
+
+.thread_close:hover {
+    background-color: var(--editor-style-bg-hover);
+    color: var(--text);
+}
+
+.thread_body {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 8px;
+    overflow-y: auto;
+}
+
+.thread_add {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    margin: 0 8px 8px;
+    padding: 6px;
+
+    border: 1px dashed var(--separator);
+    border-radius: 8px;
+    background-color: transparent;
+    color: var(--text-secondary);
+    font-size: 13px;
+    cursor: pointer;
+    transition:
+        background-color 0.15s ease,
+        color 0.15s ease;
+}
+
+.thread_add:hover {
+    background-color: var(--editor-style-bg-hover);
+    color: var(--text);
+}
diff --git a/components/editor/CommentGutter.tsx b/components/editor/CommentGutter.tsx
new file mode 100644
index 00000000..862e7ccf
--- /dev/null
+++ b/components/editor/CommentGutter.tsx
@@ -0,0 +1,227 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Editor } from "@tiptap/react";
+import { Transaction } from "@tiptap/pm/state";
+import { MessageSquare, Plus, X } from "lucide-react";
+import { Comment } from "@src/lib/utils/types";
+import { getNodePositions } from "@src/lib/screenplay/comment-anchors";
+import { useUser } from "@src/lib/utils/hooks";
+import { useViewContext } from "@src/context/ViewContext";
+import CommentCard from "./CommentCard";
+import styles from "./CommentGutter.module.css";
+
+const ICON_SIZE = 22;
+const GUTTER_INSET = 20; // px from the page's left edge
+const POPOVER_WIDTH = 320;
+const POPOVER_GAP = 10;
+
+type IconPos = { nodeId: string; top: number; left: number; count: number };
+
+export interface CommentGutterProps {
+    editor: Editor | null;
+    comments: Comment[];
+    activeNodeId: string | null;
+    setActiveNodeId: (id: string | null) => void;
+    /** Create a new empty comment anchored to the node and keep its thread open. */
+    onAddComment: (nodeId: string) => void;
+    onUpdateComment: (id: string, data: Partial<Comment>) => void;
+    onDeleteComment: (id: string) => void;
+    onResolveComment: (id: string) => void;
+    onAddReply: (commentId: string, text: string, author: string) => void;
+}
+
+/**
+ * Renders a comment icon in the editor's left margin for every node that has an
+ * unresolved discussion. Clicking an icon opens that node's discussion thread in
+ * a popover anchored next to the icon.
+ */
+const CommentGutter = ({
+    editor,
+    comments,
+    activeNodeId,
+    setActiveNodeId,
+    onAddComment,
+    onUpdateComment,
+    onDeleteComment,
+    onResolveComment,
+    onAddReply,
+}: CommentGutterProps) => {
+    const { user } = useUser();
+    const { showComments } = useViewContext();
+    const [icons, setIcons] = useState<IconPos[]>([]);
+
+    // RAF handles to avoid layout thrashing on rapid transactions / resizes.
+    const txDebounceRef = useRef<number | null>(null);
+    const resizeThrottleRef = useRef<number | null>(null);
+
+    // Unresolved comments grouped by their anchor node, in document order is
+    // applied later via the computed icon tops.
+    const commentsByNode = useMemo(() => {
+        const map = new Map<string, Comment[]>();
+        for (const c of comments) {
+            if (c.resolved) continue;
+            const list = map.get(c.nodeId);
+            if (list) list.push(c);
+            else map.set(c.nodeId, [c]);
+        }
+        // Keep each thread chronological.
+        for (const list of map.values()) list.sort((a, b) => a.createdAt - b.createdAt);
+        return map;
+    }, [comments]);
+
+    const computePositions = useCallback(() => {
+        if (!editor || editor.isDestroyed || !editor.view?.dom || !showComments) {
+            setIcons([]);
+            return;
+        }
+
+        const editorDom = editor.view.dom;
+        const scrollContainer = editorDom.closest("[class*='container']") as HTMLElement | null;
+        if (!scrollContainer) return;
+
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const editorRect = editorDom.getBoundingClientRect();
+        const left = editorRect.left - containerRect.left + GUTTER_INSET;
+
+        const nodePositions = getNodePositions(editor);
+        const next: IconPos[] = [];
+
+        for (const [nodeId, list] of commentsByNode) {
+            const pos = nodePositions.get(nodeId);
+            if (!pos) continue; // node was deleted — orphaned comment, no icon
+            try {
+                const coords = editor.view.coordsAtPos(pos.from);
+                const top = coords.top - containerRect.top + scrollContainer.scrollTop;
+                next.push({ nodeId, top, left, count: list.length });
+            } catch {
+                // Position out of range
+            }
+        }
+
+        next.sort((a, b) => a.top - b.top);
+        setIcons(next);
+    }, [editor, commentsByNode, showComments]);
+
+    // Recompute on mount and whenever the comment set changes. Deferred to the
+    // next frame so the editor DOM is laid out before we measure positions.
+    useEffect(() => {
+        const raf = requestAnimationFrame(computePositions);
+        return () => cancelAnimationFrame(raf);
+    }, [computePositions]);
+
+    // Recompute on document edits and container/window resizes.
+    useEffect(() => {
+        if (!editor || editor.isDestroyed || !showComments) return;
+
+        const handleTransaction = ({ transaction }: { transaction: Transaction }) => {
+            if (!transaction.docChanged) return;
+            if (txDebounceRef.current !== null) cancelAnimationFrame(txDebounceRef.current);
+            txDebounceRef.current = requestAnimationFrame(() => {
+                txDebounceRef.current = null;
+                computePositions();
+            });
+        };
+        editor.on("transaction", handleTransaction);
+        window.addEventListener("resize", computePositions);
+
+        const scrollContainer = editor.view?.dom.closest("[class*='container']") as HTMLElement | null;
+        let resizeObserver: ResizeObserver | undefined;
+        if (scrollContainer) {
+            resizeObserver = new ResizeObserver(() => {
+                if (resizeThrottleRef.current !== null) return;
+                resizeThrottleRef.current = requestAnimationFrame(() => {
+                    resizeThrottleRef.current = null;
+                    computePositions();
+                });
+            });
+            resizeObserver.observe(scrollContainer);
+        }
+
+        return () => {
+            editor.off("transaction", handleTransaction);
+            window.removeEventListener("resize", computePositions);
+            resizeObserver?.disconnect();
+            if (txDebounceRef.current !== null) cancelAnimationFrame(txDebounceRef.current);
+            if (resizeThrottleRef.current !== null) cancelAnimationFrame(resizeThrottleRef.current);
+        };
+    }, [editor, computePositions, showComments]);
+
+    if (!showComments || icons.length === 0) return null;
+
+    const activeIcon = activeNodeId ? icons.find((i) => i.nodeId === activeNodeId) : undefined;
+    const activeComments = activeNodeId ? commentsByNode.get(activeNodeId) ?? [] : [];
+
+    // Anchor the popover to the right of its icon, clamped to the scroll container.
+    let popoverLeft = 0;
+    if (activeIcon) {
+        const scrollContainer = editor?.view?.dom.closest("[class*='container']") as HTMLElement | null;
+        const containerWidth = scrollContainer?.clientWidth ?? 0;
+        const ideal = activeIcon.left + ICON_SIZE + POPOVER_GAP;
+        const maxLeft = Math.max(8, containerWidth - POPOVER_WIDTH - 8);
+        popoverLeft = Math.min(ideal, maxLeft);
+    }
+
+    return (
+        <>
+            {icons.map((icon) => {
+                const isActive = icon.nodeId === activeNodeId;
+                return (
+                    <button
+                        key={icon.nodeId}
+                        className={`${styles.gutter_icon} ${isActive ? styles.gutter_icon_active : ""}`}
+                        style={{ top: icon.top, left: icon.left }}
+                        onMouseDown={(e) => e.stopPropagation()}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            setActiveNodeId(isActive ? null : icon.nodeId);
+                        }}
+                        title={icon.count > 1 ? `${icon.count} comments` : "1 comment"}
+                    >
+                        <MessageSquare size={13} />
+                        {icon.count > 1 && <span className={styles.gutter_count}>{icon.count}</span>}
+                    </button>
+                );
+            })}
+
+            {activeIcon && (
+                <div
+                    className={styles.thread}
+                    style={{ top: activeIcon.top, left: popoverLeft, width: POPOVER_WIDTH }}
+                    onMouseDown={(e) => e.stopPropagation()}
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    <div className={styles.thread_header}>
+                        <span className={styles.thread_title}>Discussion</span>
+                        <button
+                            className={styles.thread_close}
+                            onClick={() => setActiveNodeId(null)}
+                            title="Close"
+                        >
+                            <X size={14} />
+                        </button>
+                    </div>
+
+                    <div className={styles.thread_body}>
+                        {activeComments.map((comment) => (
+                            <CommentCard
+                                key={comment.id}
+                                comment={comment}
+                                onUpdate={(data) => onUpdateComment(comment.id, data)}
+                                onResolve={() => onResolveComment(comment.id)}
+                                onDelete={() => onDeleteComment(comment.id)}
+                                onReply={(text) => onAddReply(comment.id, text, user?.username || "Anonymous")}
+                            />
+                        ))}
+                    </div>
+
+                    <button className={styles.thread_add} onClick={() => onAddComment(activeNodeId!)}>
+                        <Plus size={14} /> Add comment
+                    </button>
+                </div>
+            )}
+        </>
+    );
+};
+
+export default CommentGutter;
diff --git a/components/editor/DocumentEditorPanel.tsx b/components/editor/DocumentEditorPanel.tsx
index 0ebdd658..29235393 100644
--- a/components/editor/DocumentEditorPanel.tsx
+++ b/components/editor/DocumentEditorPanel.tsx
@@ -17,13 +17,14 @@ import { useViewContext } from "@src/context/ViewContext";
 import { ContextMenuType } from "@components/editor/sidebar/ContextMenu";
 import { UserContext } from "@src/context/UserContext";
 import { useUser } from "@src/lib/utils/hooks";
-import CommentCards from "@components/editor/CommentCards";
+import CommentGutter from "@components/editor/CommentGutter";
 import Loading from "@components/utils/Loading";
 
-import { TextSelection } from "@tiptap/pm/state";
+import { TextSelection, Transaction } from "@tiptap/pm/state";
 import { EditorView } from "@tiptap/pm/view";
 import { DocumentEditorConfig } from "@src/lib/editor/document-editor-config";
 import { useDocumentComments } from "@src/lib/editor/use-document-comments";
+import { getNodeIdAtPos, transactionDeletesNode } from "@src/lib/screenplay/comment-anchors";
 import { useDocumentEditor } from "@src/lib/editor/use-document-editor";
 import type { SuggestionData } from "@components/editor/SuggestionMenu";
 
@@ -80,7 +81,7 @@ const DocumentEditorPanel = ({
         repository,
     } = projectCtx;
     const { settings } = useSettings();
-    const { isEndlessScroll, showComments } = useViewContext();
+    const { isEndlessScroll } = useViewContext();
     const { user } = useUser();
 
     const [isEditorReady, setIsEditorReady] = useState(false);
@@ -114,7 +115,6 @@ const DocumentEditorPanel = ({
         setSelectedStyles,
         updateSuggestions,
         updateSuggestionsData: updateSuggestionData,
-        setActiveCommentId: commentOps.setActiveCommentId,
         userKeybinds: keybinds,
         globalContext,
         setSelectedTitlePageElement,
@@ -157,6 +157,53 @@ const DocumentEditorPanel = ({
         }
     }, [editor, isYjsReady]);
 
+    // ---- Orphaned comment cleanup ----
+    // Comments anchor to a node's data-id. When that node is deleted the comment
+    // is orphaned (no gutter icon, unreachable), so prune it from the project.
+    const pruneOrphanedComments = useCallback(() => {
+        if (!editor || editor.isDestroyed || isReadOnly || !config.features.comments) return;
+
+        const liveIds = new Set<string>();
+        editor.state.doc.descendants((node) => {
+            const id = node.attrs?.["data-id"];
+            if (typeof id === "string") liveIds.add(id);
+        });
+        // Don't prune before the document has synced — an empty doc would
+        // otherwise wipe every comment.
+        if (liveIds.size === 0) return;
+
+        for (const comment of commentOps.comments) {
+            if (comment.nodeId && !liveIds.has(comment.nodeId)) {
+                commentOps.deleteComment(comment.id);
+            }
+        }
+    }, [editor, isReadOnly, config.features.comments, commentOps]);
+
+    const pruneRef = useRef(pruneOrphanedComments);
+    useEffect(() => {
+        pruneRef.current = pruneOrphanedComments;
+    }, [pruneOrphanedComments]);
+
+    useEffect(() => {
+        if (!editor || editor.isDestroyed || !config.features.comments) return;
+
+        let debounce: ReturnType<typeof setTimeout> | null = null;
+        const schedule = () => {
+            if (debounce) clearTimeout(debounce);
+            debounce = setTimeout(() => pruneRef.current(), 600);
+        };
+        // Only prune when a transaction actually removes a node — never on typing.
+        const onTransaction = ({ transaction }: { transaction: Transaction }) => {
+            if (transactionDeletesNode(transaction)) schedule();
+        };
+
+        editor.on("transaction", onTransaction);
+        return () => {
+            editor.off("transaction", onTransaction);
+            if (debounce) clearTimeout(debounce);
+        };
+    }, [editor, config.features.comments]);
+
     // ---- CSS variable application (screenplay only) ----
     useEffect(() => {
         if (!editor || editor.isDestroyed || !editor.view?.dom) return;
@@ -474,6 +521,22 @@ const DocumentEditorPanel = ({
         return () => removeEventListener("keydown", pressedKeyEvent);
     }, [isVisible, config.type, editor]);
 
+    // Create a new empty comment anchored to a node and open its thread.
+    const addCommentToNode = useCallback(
+        (nodeId: string) => {
+            commentOps.addComment({
+                nodeId,
+                text: "",
+                author: user?.username || "Anonymous",
+                createdAt: Date.now(),
+                resolved: false,
+                replies: [],
+            });
+            commentOps.setActiveNodeId(nodeId);
+        },
+        [commentOps, user],
+    );
+
     // ---- Context menu ----
     const onEditorContextMenu = useCallback(
         (e: React.MouseEvent) => {
@@ -528,18 +591,11 @@ const DocumentEditorPanel = ({
                 }
             }
 
-            const onAddComment = () => {
-                if (!editor) return;
-                const commentId = commentOps.addComment({
-                    text: "",
-                    author: user?.username || "Anonymous",
-                    createdAt: Date.now(),
-                    resolved: false,
-                    replies: [],
-                });
-                editor.chain().setTextSelection({ from, to }).setComment(commentId).run();
-                commentOps.setActiveCommentId(commentId);
-            };
+            // Comments anchor to the node under the caret, not a text range.
+            const commentNodeId = getNodeIdAtPos(editor.state, from);
+            const onAddComment = commentNodeId
+                ? () => addCommentToNode(commentNodeId)
+                : undefined;
 
             updateContextMenu({
                 type: ContextMenuType.EditorContextMenu,
@@ -547,12 +603,12 @@ const DocumentEditorPanel = ({
                 typeSpecificProps: { from, to, onAddComment, spellError, nodePos, nodeClass, outlineScene },
             });
         },
-        [editor, updateContextMenu, commentOps, user, config.features.shelving, config.documentId],
+        [editor, updateContextMenu, addCommentToNode, config.features.shelving, config.documentId],
     );
 
-    // Clear active comment on mousedown
+    // Clear the open discussion when clicking elsewhere in the editor.
     const handleContainerMouseDown = useCallback(() => {
-        commentOps.setActiveCommentId(null);
+        commentOps.setActiveNodeId(null);
     }, [commentOps]);
 
     const onScroll = (e: React.UIEvent<HTMLDivElement>) => {
@@ -579,7 +635,7 @@ const DocumentEditorPanel = ({
     return (
         <div className={`${styles.editor_panel} ${isEditorReady ? styles.visible : styles.hidden}`}>
             <div
-                className={`${styles.container} ${!showComments ? "hide-comments" : ""}`}
+                className={styles.container}
                 onScroll={onScroll}
                 onMouseDown={handleContainerMouseDown}
                 onFocus={() => setFocusedEditorType(focusType)}
@@ -612,13 +668,15 @@ const DocumentEditorPanel = ({
                     </div>
                 </div>
                 {config.features.comments && (
-                    <CommentCards
+                    <CommentGutter
                         editor={editor}
                         comments={commentOps.comments}
-                        activeCommentId={commentOps.activeCommentId}
-                        setActiveCommentId={commentOps.setActiveCommentId}
+                        activeNodeId={commentOps.activeNodeId}
+                        setActiveNodeId={commentOps.setActiveNodeId}
+                        onAddComment={addCommentToNode}
                         onUpdateComment={(id, data) => commentOps.updateComment(id, data)}
                         onDeleteComment={(id) => commentOps.deleteComment(id)}
+                        onResolveComment={(id) => commentOps.resolveComment(id)}
                         onAddReply={(commentId, text, author) =>
                             commentOps.addReply(commentId, { text, author, createdAt: Date.now() })
                         }
diff --git a/components/editor/outline/OutlineItem.module.css b/components/editor/outline/OutlineItem.module.css
index cceb06b9..6b514b69 100644
--- a/components/editor/outline/OutlineItem.module.css
+++ b/components/editor/outline/OutlineItem.module.css
@@ -1,23 +1,17 @@
 .block {
     position: relative;
     display: flex;
-    flex-direction: row;
     align-items: stretch;
-    gap: 10px;
     box-sizing: border-box;
-    padding: 10px 12px;
-    border: 1px solid var(--separator);
-    border-radius: 8px;
-    background-color: var(--main-bg);
+    /* Board-card look: a full-color strip on the left and a tinted body, driven
+       by `--card-color` (set inline from the element's color). */
+    background-color: color-mix(in srgb, var(--card-color, white) 20%, white);
     cursor: pointer;
-    transition:
-        background-color 0.12s ease,
-        border-color 0.12s ease;
-    overflow: hidden;
+    transition: background-color 0.12s ease;
 }
 
 .block:hover {
-    background-color: var(--editor-sidebar-hover);
+    background-color: color-mix(in srgb, var(--card-color, white) 20%, #ececec);
 }
 
 .block_missing {
@@ -25,43 +19,51 @@
 }
 
 /* Drop indicators */
-.block_drop_into {
-    background-color: var(--editor-style-bg-hover);
-    box-shadow: inset 0 0 0 2px var(--tertiary-hover);
+.block_drop_into::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border: 2px solid var(--tertiary-hover);
+    pointer-events: none;
+    z-index: 1;
 }
 
 .block_drop_before::before,
 .block_drop_after::after {
     content: "";
     position: absolute;
-    left: 4px;
-    right: 4px;
+    left: 0;
+    right: 0;
     height: 2px;
     background-color: var(--tertiary-hover);
     pointer-events: none;
+    z-index: 1;
 }
 
 .block_drop_before::before {
-    top: -4px;
+    top: 0;
 }
 
 .block_drop_after::after {
-    bottom: -4px;
+    bottom: 0;
 }
 
-.color_bar {
+/* Full-color strip (board card header); stretches to full height. */
+.color_strip {
     flex-shrink: 0;
-    width: 4px;
-    border-radius: 2px;
-    align-self: stretch;
+    width: 8px;
+    background-color: var(--card-color, var(--tertiary));
 }
 
+/* Body (board card body) — transparent so the block's tint and drop highlights
+   show through. */
 .body {
     flex: 1;
     min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 3px;
+    padding: 9px 12px;
 }
 
 .title_row {
@@ -74,7 +76,7 @@
 
 .type_icon {
     flex-shrink: 0;
-    color: var(--secondary-text);
+    color: #64748b;
 }
 
 .title {
@@ -82,7 +84,7 @@
     min-width: 0;
     font-size: 13px;
     font-weight: 600;
-    color: var(--primary-text);
+    color: var(--board-card-body-text);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -99,8 +101,8 @@
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.03em;
-    color: var(--secondary-text);
-    background-color: var(--editor-style-bg-hover);
+    color: #64748b;
+    background-color: rgba(0, 0, 0, 0.06);
 }
 
 .remove_btn {
@@ -112,7 +114,7 @@
     border: none;
     border-radius: 4px;
     background: none;
-    color: var(--secondary-text);
+    color: #64748b;
     cursor: pointer;
     opacity: 0;
     transition:
@@ -125,14 +127,14 @@
 }
 
 .remove_btn:hover {
-    background-color: var(--editor-style-bg-hover);
-    color: var(--primary-text);
+    background-color: rgba(0, 0, 0, 0.06);
+    color: var(--board-card-body-text);
 }
 
 .preview {
     margin: 0;
     font-size: 12px;
-    color: var(--secondary-text);
+    color: #64748b;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
diff --git a/components/editor/outline/OutlineItem.tsx b/components/editor/outline/OutlineItem.tsx
index 41255365..a811655f 100644
--- a/components/editor/outline/OutlineItem.tsx
+++ b/components/editor/outline/OutlineItem.tsx
@@ -81,7 +81,10 @@ const OutlineItem = ({
             <div style={{ paddingLeft: depth * INDENT }}>
                 <div
                     className={blockClass}
-                    style={{ opacity: draggingId === node.id ? 0.4 : 1 }}
+                    style={{
+                        opacity: draggingId === node.id ? 0.4 : 1,
+                        ...(r.color ? { "--card-color": r.color } : {}),
+                    } as React.CSSProperties}
                     onClick={() => onNavigate(node)}
                     draggable
                     onDragStart={(e) => {
@@ -96,9 +99,7 @@ const OutlineItem = ({
                     }}
                     onDragEnd={onDragEnd}
                 >
-                    {isCard && node.color && (
-                        <span className={styles.color_bar} style={{ backgroundColor: node.color }} />
-                    )}
+                    <div className={styles.color_strip} />
                     <div className={styles.body}>
                         <div className={styles.title_row}>
                             {!isCard && <Film size={14} className={styles.type_icon} />}
diff --git a/components/editor/outline/OutlineView.module.css b/components/editor/outline/OutlineView.module.css
index 33758909..679f5e2e 100644
--- a/components/editor/outline/OutlineView.module.css
+++ b/components/editor/outline/OutlineView.module.css
@@ -19,9 +19,9 @@
 .outline_list {
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    gap: 0;
     width: 100%;
-    max-width: 760px;
+    max-width: 580px;
     margin: 0 auto;
     padding: 16px;
     box-sizing: border-box;
diff --git a/components/editor/sidebar/CommentSidebarItem.tsx b/components/editor/sidebar/CommentSidebarItem.tsx
index a8d3efc3..0b52d64b 100644
--- a/components/editor/sidebar/CommentSidebarItem.tsx
+++ b/components/editor/sidebar/CommentSidebarItem.tsx
@@ -3,7 +3,7 @@
 import { memo, useCallback, useContext } from "react";
 import { ProjectContext } from "@src/context/ProjectContext";
 import { Comment } from "@src/lib/utils/types";
-import { getCommentPositions } from "@src/lib/screenplay/extensions/comment-highlight-extension";
+import { getNodePositions } from "@src/lib/screenplay/comment-anchors";
 import { focusOnPosition } from "@src/lib/screenplay/editor";
 import { join } from "@src/lib/utils/misc";
 import nav_item from "./SidebarItem.module.css";
@@ -19,12 +19,12 @@ const CommentSidebarItem = memo(({ comment, isActive, onActivate }: CommentSideb
 
     const handleDoubleClick = useCallback(() => {
         if (!editor) return;
-        const positions = getCommentPositions(editor);
-        const pos = positions.get(comment.id);
+        const positions = getNodePositions(editor);
+        const pos = positions.get(comment.nodeId);
         if (pos) {
             focusOnPosition(editor, pos.from);
         }
-    }, [comment.id, editor]);
+    }, [comment.nodeId, editor]);
 
     const handleClick = useCallback(() => {
         onActivate();
diff --git a/components/editor/sidebar/CommentSidebarView.tsx b/components/editor/sidebar/CommentSidebarView.tsx
index ff6ae066..e6cf15c8 100644
--- a/components/editor/sidebar/CommentSidebarView.tsx
+++ b/components/editor/sidebar/CommentSidebarView.tsx
@@ -25,7 +25,7 @@ const CommentSidebarView = () => {
         [projectState],
     );
 
-    const { comments, activeCommentId, setActiveCommentId } = useDocumentComments(commentsMap, repository);
+    const { comments, activeNodeId, setActiveNodeId } = useDocumentComments(commentsMap, repository);
 
     const unresolvedComments = useMemo(() => comments.filter((c) => !c.resolved), [comments]);
 
@@ -41,8 +41,8 @@ const CommentSidebarView = () => {
                         <CommentSidebarItem
                             key={comment.id}
                             comment={comment}
-                            isActive={activeCommentId === comment.id}
-                            onActivate={() => setActiveCommentId(comment.id)}
+                            isActive={activeNodeId === comment.nodeId}
+                            onActivate={() => setActiveNodeId(comment.nodeId)}
                         />
                     ))
                 ) : (
diff --git a/components/editor/sidebar/ContextMenu.module.css b/components/editor/sidebar/ContextMenu.module.css
index 3911f80a..416fd195 100644
--- a/components/editor/sidebar/ContextMenu.module.css
+++ b/components/editor/sidebar/ContextMenu.module.css
@@ -1,89 +1,5 @@
-.menu {
-    display: flex;
-    flex-direction: column;
-    width: 220px;
-
-    z-index: 100;
-    position: fixed;
-    padding-block: 6px;
-    overflow-y: auto;
-    border-radius: 12px;
-    background-color: var(--context-menu-bg);
-    border: 1px solid var(--separator);
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
-}
-
-.menu_item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-
-    padding-block: 6px;
-    padding-inline: 12px;
-
-    font-size: 14px;
-    cursor: pointer;
-}
-
-.menu_item:hover {
-    background-color: var(--context-menu-item-hover);
-}
-
-.menu_item_disabled {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-
-    padding-block: 6px;
-    padding-inline: 12px;
-
-    font-size: 14px;
-    cursor: default;
-    opacity: 0.4;
-}
-
-.menu_item_icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    flex-shrink: 0;
-}
-
-.menu_separator {
-    height: 1px;
-    background-color: var(--separator);
-    margin: 2px 0;
-}
-
-/* Right-click color picker (document tree items) */
-.colors {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    padding: 10px 12px;
-}
-
-.color_swatch {
-    width: 20px;
-    height: 20px;
-    padding: 0;
-    border: 2px solid transparent;
-    border-radius: 50%;
-    cursor: pointer;
-    transition:
-        transform 0.15s ease,
-        border-color 0.15s ease;
-}
-
-.color_swatch:hover {
-    transform: scale(1.15);
-}
-
-.color_swatch_active {
-    border-color: var(--primary-text);
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
-}
+/* Editor-specific context-menu pieces. The shared menu surface, items,
+   separator, and color row live in components/utils/ContextMenu. */
 
 .suggestion_item {
     display: flex;
@@ -91,7 +7,8 @@
     gap: 10px;
 
     padding-block: 6px;
-    padding-inline: 12px;
+    padding-inline: 6px;
+    border-radius: 6px;
 
     font-size: 14px;
     font-weight: 600;
@@ -108,7 +25,7 @@
     align-items: center;
 
     padding-block: 6px;
-    padding-inline: 12px;
+    padding-inline: 6px;
 
     font-size: 13px;
     color: var(--secondary-text);
diff --git a/components/editor/sidebar/ContextMenu.tsx b/components/editor/sidebar/ContextMenu.tsx
index b2ffe784..429883b4 100644
--- a/components/editor/sidebar/ContextMenu.tsx
+++ b/components/editor/sidebar/ContextMenu.tsx
@@ -1,12 +1,17 @@
 "use client";
 
-import { useContext, useEffect, useState } from "react";
+import { ReactNode, useContext, useEffect, useState } from "react";
 import { UserContext } from "@src/context/UserContext";
 import { useSpellcheck } from "@src/context/SpellcheckContext";
 import { refreshSpellcheck } from "@src/lib/spellcheck/spellcheck-extension";
 import { Scene } from "@src/lib/screenplay/scenes";
 
 import context from "./ContextMenu.module.css";
+import {
+    ContextMenu as ContextMenuSurface,
+    ContextMenuItem,
+    ContextMenuSeparator,
+} from "@components/utils/ContextMenu";
 import { CharacterData, deleteCharacter } from "@src/lib/screenplay/characters";
 import { LocationData, deleteLocation } from "@src/lib/screenplay/locations";
 import { isTauri } from "@tauri-apps/api/core";
@@ -26,7 +31,6 @@ import {
     Highlighter,
     ListTree,
     Loader2,
-    LucideIcon,
     MessageSquarePlus,
     Pencil,
     Scissors,
@@ -43,11 +47,18 @@ import { MAIN_SCREENPLAY_REF } from "@src/lib/project/project-state";
 /*     Context menu     */
 /* ==================== */
 
-export type ContextMenuProps = {
-    type: ContextMenuType;
-    position: { x: number; y: number };
-    typeSpecificProps: unknown;
-};
+export type ContextMenuProps =
+    | {
+          type: ContextMenuType;
+          position: { x: number; y: number };
+          typeSpecificProps: unknown;
+      }
+    | {
+          /** Pre-rendered content for menus not driven by the editor type switch
+           *  (board cards, document tree). */
+          content: ReactNode;
+          position: { x: number; y: number };
+      };
 
 export const enum ContextMenuType {
     SceneList,
@@ -63,13 +74,6 @@ export const enum ContextMenuType {
     EditorContextMenu,
 }
 
-type ContextMenuItemProps = {
-    text: string;
-    action: () => void;
-    icon?: LucideIcon;
-    disabled?: boolean;
-};
-
 type SubMenuProps<T> = { props: T };
 
 const openWebSearch = async (text: string) => {
@@ -92,15 +96,6 @@ const readClipboardText = async (): Promise<string> => {
     return navigator.clipboard.readText();
 };
 
-export const ContextMenuItem = ({ text, action, icon: Icon, disabled }: ContextMenuItemProps) => {
-    return (
-        <div onClick={disabled ? undefined : action} className={disabled ? context.menu_item_disabled : context.menu_item}>
-            <span className={context.menu_item_icon}>{Icon && <Icon size={16} />}</span>
-            <p className="unselectable">{text}</p>
-        </div>
-    );
-};
-
 /* ========================== */
 /*     Scene context menu     */
 /* ========================== */
@@ -154,7 +149,7 @@ const SceneItemMenu = ({ props }: SubMenuProps<SceneContextProps>) => {
             />
             {!isReadOnly && (
                 <>
-                    <div className={context.menu_separator} />
+                    <ContextMenuSeparator />
                     {scene.id && (
                         <ContextMenuItem
                             text={t("sendToOutline")}
@@ -209,7 +204,7 @@ const CharacterItemMenu = ({ props }: SubMenuProps<CharacterContextProps>) => {
                         text={t("paste")}
                         action={() => pasteText(projectCtx.editor!, character.name)}
                     />
-                    <div className={context.menu_separator} />
+                    <ContextMenuSeparator />
                 </>
             )}
             <ContextMenuItem
@@ -307,7 +302,7 @@ const EditorSelectionMenu = ({ props }: SubMenuProps<EditorSelectionContextProps
             )}
             {hasSelection && (
                 <>
-                    <div className={context.menu_separator} />
+                    <ContextMenuSeparator />
                     {!isReadOnly && (
                         <ContextMenuItem text={t("addComment")} icon={MessageSquarePlus} action={onAddComment} />
                     )}
@@ -392,7 +387,7 @@ const SpellcheckMenu = ({ props }: SubMenuProps<SpellcheckContextProps>) => {
                     <p className="unselectable">{s}</p>
                 </div>
             ))}
-            {displaySuggestions !== null && displaySuggestions.length > 0 && <div className={context.menu_separator} />}
+            {displaySuggestions !== null && displaySuggestions.length > 0 && <ContextMenuSeparator />}
             <ContextMenuItem text={t("addToDictionary")} icon={BookPlus} action={handleAddToDictionary} />
         </>
     );
@@ -492,7 +487,8 @@ const ShelveNodeMenu = ({ props }: SubMenuProps<{ pos: number; nodeClass: string
 export type EditorContextMenuProps = {
     from: number;
     to: number;
-    onAddComment: () => void;
+    /** Present when the caret sits on a node a comment can anchor to. */
+    onAddComment?: () => void;
     spellError?: { word: string; from: number; to: number };
     nodePos?: number;
     nodeClass?: string;
@@ -670,7 +666,7 @@ const EditorContextMenu = ({ props }: SubMenuProps<EditorContextMenuProps>) => {
                     {!isReadOnly && (
                         <ContextMenuItem text={t("addToDictionary")} icon={BookPlus} action={handleAddToDictionary} />
                     )}
-                    <div className={context.menu_separator} />
+                    <ContextMenuSeparator />
                 </>
             )}
 
@@ -681,21 +677,23 @@ const EditorContextMenu = ({ props }: SubMenuProps<EditorContextMenuProps>) => {
             <ContextMenuItem text={t("copy")} action={handleCopy} disabled={!hasSelection} />
             {!isReadOnly && <ContextMenuItem text={t("paste")} action={handlePaste} />}
 
-            {/* Selection actions — only when there's a selection and no spellcheck error */}
-            {hasSelection && !spellError && (
+            {/* Comment on the node at the caret + search a selection on the web */}
+            {!spellError && ((onAddComment && !isReadOnly) || hasSelection) && (
                 <>
-                    <div className={context.menu_separator} />
-                    {!isReadOnly && (
+                    <ContextMenuSeparator />
+                    {!isReadOnly && onAddComment && (
                         <ContextMenuItem text={t("addComment")} icon={MessageSquarePlus} action={onAddComment} />
                     )}
-                    <ContextMenuItem text={t("searchOnWeb")} action={handleSearchOnWeb} />
+                    {hasSelection && (
+                        <ContextMenuItem text={t("searchOnWeb")} action={handleSearchOnWeb} />
+                    )}
                 </>
             )}
 
             {/* Node actions — shelve and optional dual dialogue */}
             {isShelvable && !isReadOnly && (
                 <>
-                    <div className={context.menu_separator} />
+                    <ContextMenuSeparator />
                     <ContextMenuItem
                         text={
                             nodeClass === ScreenplayElement.Scene
@@ -722,7 +720,7 @@ const EditorContextMenu = ({ props }: SubMenuProps<EditorContextMenuProps>) => {
             {/* Send a scene heading to the Outline */}
             {outlineScene && !isReadOnly && (
                 <>
-                    <div className={context.menu_separator} />
+                    <ContextMenuSeparator />
                     <ContextMenuItem text={t("sendToOutline")} icon={ListTree} action={handleSendToOutline} />
                 </>
             )}
@@ -730,7 +728,7 @@ const EditorContextMenu = ({ props }: SubMenuProps<EditorContextMenuProps>) => {
             {/* Production: Omit / Unomit on a locked scene heading */}
             {sceneInfo && !isReadOnly && (
                 <>
-                    <div className={context.menu_separator} />
+                    <ContextMenuSeparator />
                     {sceneInfo.isOmitted ? (
                         <ContextMenuItem
                             text={t("unomitScene")}
@@ -751,6 +749,7 @@ const EditorContextMenu = ({ props }: SubMenuProps<EditorContextMenuProps>) => {
 };
 
 const renderContextMenu = (contextMenu: ContextMenuProps) => {
+    if ("content" in contextMenu) return contextMenu.content;
     switch (contextMenu.type) {
         case ContextMenuType.SceneList:
             return <SceneListMenu />;
@@ -792,9 +791,16 @@ const ContextMenu = () => {
     useEffect(() => {
         if (!contextMenu) return;
         const prevent = (e: WheelEvent) => e.preventDefault();
+        const onKey = (e: KeyboardEvent) => {
+            if (e.key === "Escape") updateContextMenu(undefined);
+        };
         document.addEventListener("wheel", prevent, { passive: false });
-        return () => document.removeEventListener("wheel", prevent);
-    }, [contextMenu]);
+        document.addEventListener("keydown", onKey);
+        return () => {
+            document.removeEventListener("wheel", prevent);
+            document.removeEventListener("keydown", onKey);
+        };
+    }, [contextMenu, updateContextMenu]);
 
     useEffect(() => {
         updateContextMenu(undefined);
@@ -803,15 +809,9 @@ const ContextMenu = () => {
     if (!contextMenu) return null;
 
     return (
-        <div
-            className={context.menu}
-            style={{
-                top: contextMenu.position.y,
-                left: contextMenu.position.x,
-            }}
-        >
+        <ContextMenuSurface position={contextMenu.position}>
             {renderContextMenu(contextMenu)}
-        </div>
+        </ContextMenuSurface>
     );
 };
 
diff --git a/components/editor/sidebar/DocumentTreeSidebarView.tsx b/components/editor/sidebar/DocumentTreeSidebarView.tsx
index 656d6f4c..d0ed1be4 100644
--- a/components/editor/sidebar/DocumentTreeSidebarView.tsx
+++ b/components/editor/sidebar/DocumentTreeSidebarView.tsx
@@ -1,25 +1,28 @@
 "use client";
 
-import { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { useCallback, useContext, useMemo, useState } from "react";
 import { useTranslations } from "next-intl";
 import { ProjectContext } from "@src/context/ProjectContext";
+import { UserContext } from "@src/context/UserContext";
 import { useViewContext } from "@src/context/ViewContext";
 import { DocumentNode } from "@src/lib/project/project-state";
 import { DEFAULT_ITEM_COLORS } from "@src/lib/utils/colors";
 import { join } from "@src/lib/utils/misc";
 import { FilePlus, FolderPlus, FolderTree, LayoutDashboard, Pencil, Trash2 } from "lucide-react";
 import DocumentTreeItem, { DropPosition } from "./DocumentTreeItem";
-import { ContextMenuItem } from "./ContextMenu";
+import {
+    ContextMenuItem,
+    ContextMenuSeparator,
+    ContextMenuColorRow,
+} from "@components/utils/ContextMenu";
 
 import form from "./../../utils/Form.module.css";
 import sidebar_nav from "./EditorSidebarNavigation.module.css";
-import context from "./ContextMenu.module.css";
-
-type MenuState = { x: number; y: number; node: DocumentNode | null };
 
 const DocumentTreeSidebarView = () => {
     const t = useTranslations("editorSidebar");
     const { documents, repository } = useContext(ProjectContext);
+    const { updateContextMenu } = useContext(UserContext);
     const { setSideDocument, closeDocument, primaryDocId, secondaryDocId } = useViewContext();
 
     // Documents currently open in a panel — highlighted in the tree.
@@ -32,8 +35,7 @@ const DocumentTreeSidebarView = () => {
     const [draggingId, setDraggingId] = useState<string | null>(null);
     const [dropTarget, setDropTarget] = useState<{ id: string; pos: DropPosition } | null>(null);
 
-    // Right-click menu + inline edit state (lifted here so the menu can drive it).
-    const [menu, setMenu] = useState<MenuState | null>(null);
+    // Inline edit state (lifted here so the right-click menu can drive it).
     const [renamingId, setRenamingId] = useState<string | null>(null);
     const [confirmingDeleteId, setConfirmingDeleteId] = useState<string | null>(null);
 
@@ -118,35 +120,71 @@ const DocumentTreeSidebarView = () => {
         (id: string, color: string) => {
             const current = documents[id]?.color;
             repository?.setDocumentColor(id, current === color ? undefined : color);
-            setMenu(null);
         },
         [repository, documents],
     );
 
     // ---- Right-click menu ----
-    const openMenu = useCallback((node: DocumentNode | null, e: React.MouseEvent) => {
-        e.preventDefault();
-        setMenu({ x: e.clientX, y: e.clientY, node });
-    }, []);
-
-    // Close the menu on any left-click, scroll, resize, or Escape.
-    useEffect(() => {
-        if (!menu) return;
-        const close = () => setMenu(null);
-        const onKey = (e: KeyboardEvent) => {
-            if (e.key === "Escape") setMenu(null);
-        };
-        window.addEventListener("click", close);
-        window.addEventListener("resize", close);
-        window.addEventListener("scroll", close, true);
-        window.addEventListener("keydown", onKey);
-        return () => {
-            window.removeEventListener("click", close);
-            window.removeEventListener("resize", close);
-            window.removeEventListener("scroll", close, true);
-            window.removeEventListener("keydown", onKey);
-        };
-    }, [menu]);
+    // Opens the shared single context-menu host with this node's actions.
+    const openMenu = useCallback(
+        (node: DocumentNode | null, e: React.MouseEvent) => {
+            e.preventDefault();
+            const left = Math.min(e.clientX, window.innerWidth - 230);
+            const top = Math.min(e.clientY, window.innerHeight - 220);
+            // Where create actions should put new nodes: inside a right-clicked
+            // folder, otherwise at the root.
+            const parentId = node?.type === "folder" ? node.id : null;
+            const showCreate = !node || node.type === "folder";
+            const showEdit = !!node;
+            updateContextMenu({
+                position: { x: left, y: top },
+                content: (
+                    <>
+                        {showCreate && (
+                            <>
+                                <ContextMenuItem
+                                    text={t("newDocument")}
+                                    icon={FilePlus}
+                                    action={() => createInside(parentId, "editor")}
+                                />
+                                <ContextMenuItem
+                                    text={t("newFolder")}
+                                    icon={FolderPlus}
+                                    action={() => createInside(parentId, "folder")}
+                                />
+                                <ContextMenuItem
+                                    text={t("newBoard")}
+                                    icon={LayoutDashboard}
+                                    action={() => createInside(parentId, "board")}
+                                />
+                            </>
+                        )}
+                        {showCreate && showEdit && <ContextMenuSeparator />}
+                        {showEdit && node && (
+                            <>
+                                <ContextMenuColorRow
+                                    colors={DEFAULT_ITEM_COLORS}
+                                    selected={node.color}
+                                    onSelect={(color) => setColor(node.id, color)}
+                                />
+                                <ContextMenuItem
+                                    text={t("rename")}
+                                    icon={Pencil}
+                                    action={() => setRenamingId(node.id)}
+                                />
+                                <ContextMenuItem
+                                    text={t("delete")}
+                                    icon={Trash2}
+                                    action={() => setConfirmingDeleteId(node.id)}
+                                />
+                            </>
+                        )}
+                    </>
+                ),
+            });
+        },
+        [updateContextMenu, t, createInside, setColor],
+    );
 
     // ---- Drag & drop ----
     const onDragStart = useCallback((id: string) => setDraggingId(id), []);
@@ -197,74 +235,6 @@ const DocumentTreeSidebarView = () => {
         repository.moveDocument(dragId, null, appendOrder(null, dragId));
     }, [draggingId, repository, appendOrder, resetDrag]);
 
-    const renderMenu = () => {
-        if (!menu) return null;
-        const node = menu.node;
-        const left = Math.min(menu.x, window.innerWidth - 230);
-        const top = Math.min(menu.y, window.innerHeight - 220);
-        // Where create actions should put new nodes: inside a right-clicked
-        // folder, otherwise at the root.
-        const parentId = node?.type === "folder" ? node.id : null;
-        const showCreate = !node || node.type === "folder";
-        const showEdit = !!node;
-
-        return (
-            <div
-                className={context.menu}
-                style={{ top, left }}
-                onContextMenu={(e) => e.preventDefault()}
-            >
-                {showCreate && (
-                    <>
-                        <ContextMenuItem
-                            text={t("newDocument")}
-                            icon={FilePlus}
-                            action={() => createInside(parentId, "editor")}
-                        />
-                        <ContextMenuItem
-                            text={t("newFolder")}
-                            icon={FolderPlus}
-                            action={() => createInside(parentId, "folder")}
-                        />
-                        <ContextMenuItem
-                            text={t("newBoard")}
-                            icon={LayoutDashboard}
-                            action={() => createInside(parentId, "board")}
-                        />
-                    </>
-                )}
-                {showCreate && showEdit && <div className={context.menu_separator} />}
-                {showEdit && node && (
-                    <>
-                        <div className={context.colors}>
-                            {DEFAULT_ITEM_COLORS.map((color) => (
-                                <button
-                                    key={color}
-                                    className={join(
-                                        context.color_swatch,
-                                        node.color === color ? context.color_swatch_active : "",
-                                    )}
-                                    style={{ backgroundColor: color }}
-                                    onClick={() => setColor(node.id, color)}
-                                />
-                            ))}
-                        </div>
-                        <ContextMenuItem
-                            text={t("rename")}
-                            icon={Pencil}
-                            action={() => setRenamingId(node.id)}
-                        />
-                        <ContextMenuItem
-                            text={t("delete")}
-                            icon={Trash2}
-                            action={() => setConfirmingDeleteId(node.id)}
-                        />
-                    </>
-                )}
-            </div>
-        );
-    };
-
     return (
         <>
             <div className={sidebar_nav.list_header}>
@@ -340,7 +310,6 @@ const DocumentTreeSidebarView = () => {
                     </div>
                 )}
             </div>
-            {renderMenu()}
         </>
     );
 };
diff --git a/components/navbar/ProjectNavbar.tsx b/components/navbar/ProjectNavbar.tsx
index 3d9e8edb..30e519e3 100644
--- a/components/navbar/ProjectNavbar.tsx
+++ b/components/navbar/ProjectNavbar.tsx
@@ -8,7 +8,6 @@ import { redirectHome } from "@src/lib/utils/redirects";
 
 import { ProjectContext } from "@src/context/ProjectContext";
 import { UserContext } from "@src/context/UserContext";
-import { useViewContext } from "@src/context/ViewContext";
 import debounce from "debounce";
 import { editProject } from "@src/lib/utils/requests";
 import { join } from "@src/lib/utils/misc";
@@ -108,7 +107,6 @@ const ProjectNavbar = () => {
     const projectId = useProjectIdFromUrl();
 
     const t = useTranslations("navbar");
-    const viewContext = useViewContext();
 
     useEffect(() => {
         if (!projectId) {
@@ -131,8 +129,6 @@ const ProjectNavbar = () => {
     const canUploadToCloud = !membership && !!user && isPro && !!projectId && isLocalOnly === true;
 
     const isInProject = !!projectId;
-    const hasScreenplay = viewContext.visiblePanels.includes("screenplay");
-    const hasTitlePage = viewContext.visiblePanels.includes("title");
 
     const deferredTitleUpdate = useMemo(
         () =>
@@ -276,8 +272,9 @@ const ProjectNavbar = () => {
                     </div>
                 )}
             </nav>
-            {/* Center - Format dropdown */}
-            {isInProject && projectId && (hasScreenplay || hasTitlePage) && (
+            {/* Center - Format dropdown (always visible in a project, regardless
+                of which panel is open) */}
+            {isInProject && projectId && (
                 <div className={navbar.center}>
                     <div className={navbar.navbar_island}>
                         <ScreenplayFormatDropdown />
@@ -289,7 +286,7 @@ const ProjectNavbar = () => {
             {/* Right side - Collaborators + Search + Settings */}
             <div className={navbar.right_btns}>
                 {isInProject && <CollaboratorsDisplay />}
-                {hasScreenplay && <ScreenplaySearch />}
+                {isInProject && <ScreenplaySearch />}
                 <div
                     className={`${navBtn.button} ${isAnalyticsOpen ? navBtn.active : ""}`}
                     onClick={() => setIsAnalyticsOpen(true)}
diff --git a/components/navbar/ScreenplaySearch.tsx b/components/navbar/ScreenplaySearch.tsx
index b6337444..0d2fa15a 100644
--- a/components/navbar/ScreenplaySearch.tsx
+++ b/components/navbar/ScreenplaySearch.tsx
@@ -38,7 +38,9 @@ const ScreenplaySearch = () => {
     };
 
     const {
-        editor,
+        // Search is scoped to the focused panel; `editor` here is the active
+        // search target (main screenplay, or the focused draft / tree document).
+        activeSearchEditor: editor,
         searchTerm,
         setSearchTerm,
         searchFilters,
@@ -72,6 +74,12 @@ const ScreenplaySearch = () => {
         }
     }, [isOpen]);
 
+    // When the search target switches panels (focus moved), the new document's
+    // matches are a different set — reset navigation so the index stays in range.
+    useEffect(() => {
+        setCurrentSearchIndex(0);
+    }, [editor, setCurrentSearchIndex]);
+
     const handleOpen = useCallback(() => {
         setIsOpen(true);
     }, []);
diff --git a/components/project/EditorFooter.module.css b/components/project/EditorFooter.module.css
index 10d619cf..4d717ff3 100644
--- a/components/project/EditorFooter.module.css
+++ b/components/project/EditorFooter.module.css
@@ -3,7 +3,7 @@
 .bubble_right {
     position: absolute;
     bottom: 20px;
-    right: 16px;
+    right: 30px;
     z-index: 6;
     display: flex;
     align-items: center;
diff --git a/components/utils/ContextMenu.module.css b/components/utils/ContextMenu.module.css
new file mode 100644
index 00000000..80714f99
--- /dev/null
+++ b/components/utils/ContextMenu.module.css
@@ -0,0 +1,89 @@
+.menu {
+    display: flex;
+    flex-direction: column;
+    width: 220px;
+
+    z-index: 1000;
+    position: fixed;
+    padding-block: 6px;
+    /* Horizontal padding so hovered items inset from the menu's left/right edges. */
+    padding-inline: 6px;
+    overflow-y: auto;
+    border-radius: 12px;
+    background-color: var(--context-menu-bg);
+    border: 1px solid var(--separator);
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+}
+
+.menu_item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    padding-block: 6px;
+    padding-inline: 6px;
+    border-radius: 6px;
+
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.menu_item:hover {
+    background-color: var(--context-menu-item-hover);
+}
+
+.menu_item_disabled {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    padding-block: 6px;
+    padding-inline: 6px;
+
+    font-size: 14px;
+    cursor: default;
+    opacity: 0.4;
+}
+
+.menu_item_icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    flex-shrink: 0;
+}
+
+.menu_separator {
+    height: 1px;
+    background-color: var(--separator);
+    margin: 2px 0;
+}
+
+/* Inline color-picker row. */
+.colors {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    padding: 10px 6px;
+}
+
+.color_swatch {
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: 2px solid transparent;
+    border-radius: 50%;
+    cursor: pointer;
+    transition:
+        transform 0.15s ease,
+        border-color 0.15s ease;
+}
+
+.color_swatch:hover {
+    transform: scale(1.15);
+}
+
+.color_swatch_active {
+    border-color: var(--primary-text);
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
+}
diff --git a/components/utils/ContextMenu.tsx b/components/utils/ContextMenu.tsx
new file mode 100644
index 00000000..2cd207a0
--- /dev/null
+++ b/components/utils/ContextMenu.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { ReactNode } from "react";
+import { LucideIcon } from "lucide-react";
+import { join } from "@src/lib/utils/misc";
+
+import styles from "./ContextMenu.module.css";
+
+export interface MenuPosition {
+    x: number;
+    y: number;
+}
+
+interface ContextMenuProps {
+    /** Viewport coordinates — the menu is fixed-positioned. */
+    position: MenuPosition;
+    /** Extra class names on the menu container. */
+    className?: string;
+    children: ReactNode;
+}
+
+/**
+ * Positioned context-menu surface. Renders a fixed panel at `position` and tags
+ * it with `data-context-menu` so canvas / outside-click handlers can detect
+ * clicks that land inside a menu without depending on hashed CSS-module names.
+ *
+ * This is purely presentational — it's mounted by the single context-menu host
+ * (see editor/sidebar/ContextMenu), which owns the open state, so only one menu
+ * is ever rendered.
+ */
+export const ContextMenu = ({ position, className, children }: ContextMenuProps) => (
+    <div
+        data-context-menu
+        className={className ? `${styles.menu} ${className}` : styles.menu}
+        style={{ top: position.y, left: position.x }}
+        // Right-clicking within a menu shouldn't open the native browser menu.
+        onContextMenu={(e) => e.preventDefault()}
+    >
+        {children}
+    </div>
+);
+
+interface ContextMenuItemProps {
+    text: string;
+    action: () => void;
+    icon?: LucideIcon;
+    disabled?: boolean;
+    /** Native tooltip — handy for explaining why a disabled item is disabled. */
+    title?: string;
+}
+
+export const ContextMenuItem = ({ text, action, icon: Icon, disabled, title }: ContextMenuItemProps) => (
+    <div
+        onClick={disabled ? undefined : action}
+        className={disabled ? styles.menu_item_disabled : styles.menu_item}
+        title={title}
+    >
+        <span className={styles.menu_item_icon}>{Icon && <Icon size={16} />}</span>
+        <p className="unselectable">{text}</p>
+    </div>
+);
+
+export const ContextMenuSeparator = () => <div className={styles.menu_separator} />;
+
+interface ContextMenuColorRowProps {
+    colors: string[];
+    /** The currently-selected color (gets a highlighted swatch). */
+    selected?: string;
+    onSelect: (color: string) => void;
+}
+
+export const ContextMenuColorRow = ({ colors, selected, onSelect }: ContextMenuColorRowProps) => (
+    <div className={styles.colors}>
+        {colors.map((color) => (
+            <button
+                key={color}
+                className={join(styles.color_swatch, selected === color ? styles.color_swatch_active : "")}
+                style={{ backgroundColor: color }}
+                onClick={() => onSelect(color)}
+            />
+        ))}
+    </div>
+);
diff --git a/src/app/projects/layout.tsx b/src/app/projects/layout.tsx
index f2813698..71fe422f 100644
--- a/src/app/projects/layout.tsx
+++ b/src/app/projects/layout.tsx
@@ -4,7 +4,7 @@ import Loading from "@components/utils/Loading";
 import DashboardModal from "@components/dashboard/DashboardModal";
 import ProjectUnavailableDialog from "@components/projects/ProjectUnavailableDialog";
 import ProjectMigrationErrorDialog from "@components/projects/ProjectMigrationErrorDialog";
-import { redirect, useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { ProjectProvider, useProjectReady } from "@src/context/ProjectContext";
 import { ViewProvider } from "@src/context/ViewContext";
 import { useProjectMembership, useSettings } from "@src/lib/utils/hooks";
@@ -51,12 +51,29 @@ interface ProjectLayoutInnerProps {
 }
 
 const ProjectLayoutInner = ({ children }: ProjectLayoutInnerProps) => {
+    const router = useRouter();
     const { status } = useProjectReady();
     const { membership, isLoading: isMembershipLoading, isLocalOnly: isBrowserLocalOnly } = useProjectMembership();
 
     // Desktop (Tauri) and browser local-only projects skip the cloud membership requirement.
     const isLocalAccess = isTauri() || isBrowserLocalOnly;
 
+    // Resolved to: web user with no cloud membership opening a project that
+    // isn't available locally → they have no access and must leave.
+    const isTerminalError = status.kind === "needs-update" || status.kind === "unavailable";
+    const isResolving = status.kind === "loading" || (!isLocalAccess && isMembershipLoading);
+    const mustRedirect = !isTerminalError && !isResolving && !isLocalAccess && !membership;
+
+    // Navigate from an effect, never with redirect() during render. Throwing
+    // NEXT_REDIRECT mid-render tore down the project session before the async
+    // navigation committed; React then remounted this subtree (projectId is
+    // still in the URL), re-fired /api/users + cloud-token, and threw again —
+    // an endless 401 loop in production. router.replace runs once, after the
+    // session has mounted cleanly, and stops once projectId leaves the URL.
+    useEffect(() => {
+        if (mustRedirect) router.replace("/projects");
+    }, [mustRedirect, router]);
+
     // Surface terminal error states first so the user always gets a clear message,
     // before any redirect or loading gating runs.
     if (status.kind === "needs-update") {
@@ -68,14 +85,11 @@ const ProjectLayoutInner = ({ children }: ProjectLayoutInnerProps) => {
     if (status.kind === "unavailable") {
         return <ProjectUnavailableDialog />;
     }
-    // Wait for local data and (for cloud projects) for membership to resolve.
-    if (status.kind === "loading" || (!isLocalAccess && isMembershipLoading)) {
+    // Wait for local data and (for cloud projects) for membership to resolve;
+    // also hold here while the redirect effect navigates away.
+    if (isResolving || mustRedirect) {
         return <Loading />;
     }
-    // On web, redirect if no cloud membership and not a local project.
-    if (!isLocalAccess && !membership) {
-        redirect("/projects");
-    }
 
     return (
         <ViewProvider>
diff --git a/src/context/ProjectContext.tsx b/src/context/ProjectContext.tsx
index 3d28f118..7cfc8058 100644
--- a/src/context/ProjectContext.tsx
+++ b/src/context/ProjectContext.tsx
@@ -135,6 +135,9 @@ export interface ProjectContextType {
     setCurrentSearchIndex: (index: number) => void;
     searchMatches: SearchMatch[];
     setSearchMatches: (matches: SearchMatch[]) => void;
+    /** Editor that search/replace targets: the focused screenplay-type editor
+     *  (draft or tree document), falling back to the main screenplay. */
+    activeSearchEditor: Editor | null;
 
     // Project metadata (for title page placeholders)
     projectTitle: string;
@@ -247,6 +250,7 @@ const defaultContextValue: ProjectContextType = {
     setCurrentSearchIndex: () => {},
     searchMatches: [],
     setSearchMatches: () => {},
+    activeSearchEditor: null,
     // Project metadata defaults
     projectTitle: "",
     setProjectTitle: () => {},
@@ -923,6 +927,17 @@ export const ProjectProvider = ({ children, projectId }: ProjectProviderProps) =
         setFocusedEditorTypeState(type);
     }, []);
 
+    // Scope search to the focused screenplay-type editor. `focusedEditorType`
+    // flips on every editor focus change, so it gates *when* we re-resolve, while
+    // `isFocused` picks the concrete editor — disambiguating a draft from a tree
+    // document, which both report "draft". Falls back to the main screenplay.
+    const activeSearchEditor = useMemo(
+        () => [editor, draftEditor, documentEditor].find((e) => e?.isFocused) ?? editor,
+        // focusedEditorType is the intentional re-resolve trigger (not read directly).
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [focusedEditorType, editor, draftEditor, documentEditor],
+    );
+
     const contextValue = useMemo<ProjectContextType>(
         () => ({
             projectId,
@@ -983,6 +998,7 @@ export const ProjectProvider = ({ children, projectId }: ProjectProviderProps) =
             setCurrentSearchIndex,
             searchMatches,
             setSearchMatches,
+            activeSearchEditor,
             projectTitle,
             setProjectTitle,
             projectAuthor,
@@ -1064,6 +1080,7 @@ export const ProjectProvider = ({ children, projectId }: ProjectProviderProps) =
             setCurrentSearchIndex,
             searchMatches,
             setSearchMatches,
+            activeSearchEditor,
             projectTitle,
             setProjectTitle,
             projectAuthor,
diff --git a/src/lib/document-tree/document-tree-config.ts b/src/lib/document-tree/document-tree-config.ts
index 61d8dac8..8f34338e 100644
--- a/src/lib/document-tree/document-tree-config.ts
+++ b/src/lib/document-tree/document-tree-config.ts
@@ -17,7 +17,7 @@ export function createDocumentTreeConfig(docId: string): DocumentEditorConfig {
             comments: false,
             shelving: false,
             characterHighlights: false,
-            searchHighlights: false,
+            searchHighlights: true,
             sceneBookmarks: false,
             sceneLocking: false,
             nodeIdDedup: true,
diff --git a/src/lib/editor/document-editor-config.ts b/src/lib/editor/document-editor-config.ts
index 9c512b3d..40d14faf 100644
--- a/src/lib/editor/document-editor-config.ts
+++ b/src/lib/editor/document-editor-config.ts
@@ -8,7 +8,7 @@ import { TITLEPAGE_BASE_EXTENSIONS } from "@src/lib/titlepage/editor";
 export type PaginationMode = "screenplay" | "titlepage";
 
 export interface DocumentEditorFeatures {
-    /** Whether comments are enabled (CommentMark, CommentCards). */
+    /** Whether comments are enabled (node-anchored comments + margin gutter). */
     comments: boolean;
     /** Whether right-click "Shelve" actions are available (always false until shelf phase). */
     shelving: boolean;
@@ -68,7 +68,7 @@ export interface DocumentEditorConfig {
 export const SCREENPLAY_EDITOR_CONFIG: DocumentEditorConfig = {
     type: "screenplay",
     documentId: MAIN_SCREENPLAY_REF,
-    baseExtensions: BASE_EXTENSIONS,  // CommentMark added dynamically by hook when features.comments=true
+    baseExtensions: BASE_EXTENSIONS,
     getFragment: (s) => s.screenplayFragment(),
     getCommentsMap: (s) => s.comments(),
     features: {
diff --git a/src/lib/editor/use-document-comments.ts b/src/lib/editor/use-document-comments.ts
index de33ea11..540a9ae5 100644
--- a/src/lib/editor/use-document-comments.ts
+++ b/src/lib/editor/use-document-comments.ts
@@ -7,8 +7,9 @@ import type { ProjectRepository } from "@src/lib/project/project-repository";
 
 export interface DocumentCommentOps {
     comments: Comment[];
-    activeCommentId: string | null;
-    setActiveCommentId: (id: string | null) => void;
+    /** data-id of the node whose discussion is currently open, or null. */
+    activeNodeId: string | null;
+    setActiveNodeId: (id: string | null) => void;
     addComment: (partial: Omit<Comment, "id">) => string;
     updateComment: (id: string, data: Partial<Comment>) => void;
     deleteComment: (id: string) => void;
@@ -24,7 +25,7 @@ export const useDocumentComments = (
     commentsMap: Y.Map<Comment> | null | undefined,
     repository: ProjectRepository | null,
 ): DocumentCommentOps => {
-    const [activeCommentId, setActiveCommentId] = useState<string | null>(null);
+    const [activeNodeId, setActiveNodeId] = useState<string | null>(null);
 
     // Refs so CRUD callbacks do not need to be recreated on every map/repo change
     const mapRef = useRef(commentsMap);
@@ -89,8 +90,8 @@ export const useDocumentComments = (
 
     return {
         comments,
-        activeCommentId,
-        setActiveCommentId,
+        activeNodeId,
+        setActiveNodeId,
         addComment,
         updateComment,
         deleteComment,
diff --git a/src/lib/editor/use-document-editor.ts b/src/lib/editor/use-document-editor.ts
index 1f582e9b..d9face08 100644
--- a/src/lib/editor/use-document-editor.ts
+++ b/src/lib/editor/use-document-editor.ts
@@ -33,7 +33,6 @@ import {
 } from "@src/lib/screenplay/extensions/scene-locking-extension";
 import { computeAbsorbedPageTokens, SCENE_OMIT_UNDO_ORIGIN } from "@src/lib/screenplay/scene-locking";
 import { createNodeIdDedupExtension } from "@src/lib/screenplay/extensions/node-id-dedup-extension";
-import { CommentMark } from "@src/lib/screenplay/extensions/comment-highlight-extension";
 import { createSpellcheckExtension, refreshSpellcheck } from "@src/lib/spellcheck/spellcheck-extension";
 import { useSpellcheck } from "@src/context/SpellcheckContext";
 import { getActiveTitlePageElement } from "@src/lib/titlepage/editor";
@@ -46,8 +45,6 @@ export interface DocumentEditorCallbacks {
     setSelectedStyles?: (style: Style) => void;
     updateSuggestions?: (suggestions: string[]) => void;
     updateSuggestionsData?: (data: SuggestionData) => void;
-    /** Per-document: wired from useDocumentComments */
-    setActiveCommentId?: (id: string | null) => void;
     userKeybinds?: Record<string, string>;
     globalContext?: { toggleFocusMode: () => void; saveProject: () => void };
     // Title-type callbacks
@@ -74,6 +71,7 @@ export const useDocumentEditor = (config: DocumentEditorConfig, callbacks: Docum
         searchFilters,
         currentSearchIndex,
         setSearchMatches,
+        activeSearchEditor,
         contdLabel,
         moreLabel,
         sceneLocking,
@@ -174,6 +172,7 @@ export const useDocumentEditor = (config: DocumentEditorConfig, callbacks: Docum
         searchFilters,
         currentSearchIndex,
         setSearchMatches,
+        activeSearchEditor,
         sceneLocking,
         sceneNumberingStyle,
         skippedSceneLetters,
@@ -193,6 +192,7 @@ export const useDocumentEditor = (config: DocumentEditorConfig, callbacks: Docum
     ext.searchFilters = searchFilters;
     ext.currentSearchIndex = currentSearchIndex;
     ext.setSearchMatches = setSearchMatches;
+    ext.activeSearchEditor = activeSearchEditor;
     ext.sceneLocking = sceneLocking;
     ext.sceneNumberingStyle = sceneNumberingStyle;
     ext.skippedSceneLetters = skippedSceneLetters;
@@ -283,14 +283,6 @@ export const useDocumentEditor = (config: DocumentEditorConfig, callbacks: Docum
           })
         : null;
 
-    const commentMarkExtension = features.comments
-        ? CommentMark.configure({
-              onCommentActivated: (commentId: string | null) => {
-                  ext.callbacks.setActiveCommentId?.(commentId);
-              },
-          })
-        : null;
-
     const spellcheckExtension = features.spellcheck
         ? createSpellcheckExtension({
               getWorker: () => ext.spellWorker,
@@ -307,6 +299,7 @@ export const useDocumentEditor = (config: DocumentEditorConfig, callbacks: Docum
               onMatchesFound: (matches: SearchMatch[]) => {
                   ext.setSearchMatches(matches);
               },
+              getActiveEditor: () => ext.activeSearchEditor,
           })
         : null;
 
@@ -317,9 +310,6 @@ export const useDocumentEditor = (config: DocumentEditorConfig, callbacks: Docum
             extensions: [
                 ...config.baseExtensions,
 
-                // Comment mark (screenplay only, requires configured callback)
-                ...(commentMarkExtension ? [commentMarkExtension] : []),
-
                 // Collaborative editing
                 ...(projectState && isYjsReady
                     ? [
@@ -641,12 +631,14 @@ export const useDocumentEditor = (config: DocumentEditorConfig, callbacks: Docum
         }
     }, [editor, pageLocking, persistentPages, skippedSceneLetters, config.features.paginationMode]);
 
-    // Refresh search highlights
+    // Refresh search highlights. `activeSearchEditor` is a dependency so that when
+    // focus moves between panels, the newly-active editor recomputes/reports its
+    // matches and the de-activated one clears its highlights.
     useEffect(() => {
         if (editor && features.searchHighlights) {
             refreshSearchHighlights(editor);
         }
-    }, [editor, searchTerm, searchFilters, currentSearchIndex, features.searchHighlights]);
+    }, [editor, searchTerm, searchFilters, currentSearchIndex, activeSearchEditor, features.searchHighlights]);
 
     // Refresh spellcheck when worker becomes ready or language changes
     useEffect(() => {
diff --git a/src/lib/screenplay/comment-anchors.ts b/src/lib/screenplay/comment-anchors.ts
new file mode 100644
index 00000000..fa63371c
--- /dev/null
+++ b/src/lib/screenplay/comment-anchors.ts
@@ -0,0 +1,78 @@
+import { Editor } from "@tiptap/core";
+import { EditorState, Transaction } from "@tiptap/pm/state";
+
+export type NodePosition = { from: number; to: number };
+
+/**
+ * Scan the document for block nodes and return a map of node `data-id` to its
+ * position range. Comments are anchored to nodes by `data-id`, so this lets the
+ * gutter and sidebar resolve a comment's on-screen location from its `nodeId`.
+ * The first occurrence of each id wins (ids are unique in a well-formed doc).
+ */
+export const getNodePositions = (editor: Editor | null): Map<string, NodePosition> => {
+    const positions = new Map<string, NodePosition>();
+    if (!editor || editor.isDestroyed) return positions;
+
+    editor.state.doc.descendants((node, pos) => {
+        const id = node.attrs?.["data-id"] as string | undefined;
+        if (id && !positions.has(id)) {
+            positions.set(id, { from: pos + 1, to: pos + node.nodeSize - 1 });
+        }
+    });
+
+    return positions;
+};
+
+/**
+ * Whether a transaction removed at least one anchorable block node — i.e. a node
+ * with a `data-id` that was wholly deleted (not merely edited or moved). Used to
+ * gate orphaned-comment pruning so it never runs on ordinary typing/insertions.
+ */
+export const transactionDeletesNode = (tr: Transaction): boolean => {
+    if (!tr.docChanged) return false;
+
+    // Ids of block nodes wholly contained in a removed range.
+    const removed = new Set<string>();
+    tr.steps.forEach((step, i) => {
+        const oldDoc = tr.docs[i];
+        if (!oldDoc) return;
+        step.getMap().forEach((oldStart, oldEnd) => {
+            if (oldEnd <= oldStart) return; // pure insertion — nothing removed
+            oldDoc.nodesBetween(oldStart, oldEnd, (node, pos) => {
+                const id = node.attrs?.["data-id"];
+                if (typeof id === "string" && pos >= oldStart && pos + node.nodeSize <= oldEnd) {
+                    removed.add(id);
+                }
+            });
+        });
+    });
+    if (removed.size === 0) return false;
+
+    // Confirm at least one candidate is truly gone from the result (not moved).
+    const live = new Set<string>();
+    tr.doc.descendants((node) => {
+        const id = node.attrs?.["data-id"];
+        if (typeof id === "string") live.add(id);
+    });
+    for (const id of removed) {
+        if (!live.has(id)) return true;
+    }
+    return false;
+};
+
+/**
+ * Resolve the `data-id` of the nearest block ancestor at the given position.
+ * Used when creating a comment so it anchors to the node under the caret.
+ */
+export const getNodeIdAtPos = (state: EditorState, pos: number): string | null => {
+    try {
+        const $pos = state.doc.resolve(pos);
+        for (let d = $pos.depth; d >= 0; d--) {
+            const id = $pos.node(d).attrs?.["data-id"] as string | undefined;
+            if (id) return id;
+        }
+    } catch {
+        // Position out of range
+    }
+    return null;
+};
diff --git a/src/lib/screenplay/editor.ts b/src/lib/screenplay/editor.ts
index 6c2fc7e9..126524e8 100644
--- a/src/lib/screenplay/editor.ts
+++ b/src/lib/screenplay/editor.ts
@@ -9,7 +9,6 @@ import { ScreenplayNodes, ScriptioBold, ScriptioItalic, ScriptioUnderline, gener
 import { Placeholder } from "./extensions/placeholder-extension";
 import { PAGE_SIZES } from "./extensions/pagination-extension";
 import { ContdExtension } from "./extensions/contd-extension";
-import { CommentMark } from "./extensions/comment-highlight-extension";
 import { FountainExtension } from "./extensions/fountain-extension";
 
 export const applyMarkToggle = (editor: Editor, style: Style) => {
@@ -164,4 +163,4 @@ export const BASE_EXTENSIONS = [
     }),
 ];
 
-export const ScreenplaySchema = getSchema([...BASE_EXTENSIONS, CommentMark]);
+export const ScreenplaySchema = getSchema([...BASE_EXTENSIONS]);
diff --git a/src/lib/screenplay/extensions/comment-highlight-extension.ts b/src/lib/screenplay/extensions/comment-highlight-extension.ts
deleted file mode 100644
index 26afea59..00000000
--- a/src/lib/screenplay/extensions/comment-highlight-extension.ts
+++ /dev/null
@@ -1,219 +0,0 @@
-import { Editor, Mark, mergeAttributes } from "@tiptap/core";
-import { Mark as PMMark, Node } from "@tiptap/pm/model";
-import { Plugin, PluginKey } from "@tiptap/pm/state";
-import { Decoration, DecorationSet } from "@tiptap/pm/view";
-import { timeApply } from "./apply-timing";
-
-declare module "@tiptap/core" {
-    interface Commands<ReturnType> {
-        comment: {
-            setComment: (commentId: string) => ReturnType;
-            unsetComment: (commentId: string) => ReturnType;
-        };
-    }
-}
-
-export type CommentOptions = {
-    HTMLAttributes: Record<string, unknown>;
-    onCommentActivated: (commentId: string | null) => void;
-};
-
-export type CommentStorage = {
-    activeCommentId: string | null;
-};
-
-const activeCommentPluginKey = new PluginKey("activeCommentHighlight");
-
-export const CommentMark = Mark.create<CommentOptions, CommentStorage>({
-    name: "comment",
-    keepOnSplit: false,
-
-    addOptions() {
-        return {
-            HTMLAttributes: {},
-            onCommentActivated: () => {},
-        };
-    },
-
-    addAttributes() {
-        return {
-            commentId: {
-                default: null,
-                parseHTML: (el: HTMLElement) => el.getAttribute("data-comment-id"),
-                renderHTML: (attrs) => ({
-                    "data-comment-id": attrs.commentId,
-                }),
-            },
-        };
-    },
-
-    parseHTML() {
-        return [
-            {
-                tag: "span[data-comment-id]",
-                getAttrs: (el) => {
-                    const id = (el as HTMLElement).getAttribute("data-comment-id")?.trim();
-                    return id ? null : false;
-                },
-            },
-        ];
-    },
-
-    renderHTML({ HTMLAttributes }) {
-        return [
-            "span",
-            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-                class: "comment-highlight",
-            }),
-            0,
-        ];
-    },
-
-    onSelectionUpdate() {
-        const { $from } = this.editor.state.selection;
-        const marks = $from.marks();
-        const commentMark = marks.find((mark) => mark.type.name === "comment");
-        const newId = commentMark?.attrs.commentId || null;
-
-        if (newId !== this.storage.activeCommentId) {
-            this.storage.activeCommentId = newId;
-            this.options.onCommentActivated(newId);
-            // Dispatch a transaction to update decorations only when active comment changes
-            this.editor.view.dispatch(this.editor.state.tr.setMeta("activeCommentChanged", newId));
-        }
-    },
-
-    addStorage() {
-        return {
-            activeCommentId: null,
-        };
-    },
-
-    addCommands() {
-        return {
-            setComment:
-                (commentId: string) =>
-                ({ commands }) => {
-                    if (!commentId) return false;
-                    return commands.setMark("comment", { commentId });
-                },
-
-            unsetComment:
-                (commentId: string) =>
-                ({ tr, dispatch }) => {
-                    if (!commentId) return false;
-
-                    const marksToRemove: { mark: PMMark; from: number; to: number }[] = [];
-
-                    tr.doc.descendants((node, pos) => {
-                        const commentMark = node.marks.find(
-                            (mark) => mark.type.name === "comment" && mark.attrs.commentId === commentId,
-                        );
-                        if (commentMark) {
-                            marksToRemove.push({
-                                mark: commentMark,
-                                from: pos,
-                                to: pos + node.nodeSize,
-                            });
-                        }
-                    });
-
-                    marksToRemove.forEach(({ mark, from, to }) => {
-                        tr.removeMark(from, to, mark);
-                    });
-
-                    if (dispatch) dispatch(tr);
-                    return true;
-                },
-        };
-    },
-
-    addProseMirrorPlugins() {
-        const extensionStorage = this.storage;
-
-        /**
-         * Compute decorations for the active comment.
-         * Only called when activeCommentId changes or document changes.
-         */
-        function computeActiveCommentDecorations(doc: Node, activeId: string | null): DecorationSet {
-            if (!activeId) return DecorationSet.empty;
-
-            const decorations: Decoration[] = [];
-
-            doc.descendants((node: Node, pos: number) => {
-                const commentMark = node.marks.find(
-                    (mark: PMMark) => mark.type.name === "comment" && mark.attrs.commentId === activeId,
-                );
-                if (commentMark) {
-                    decorations.push(
-                        Decoration.inline(pos, pos + node.nodeSize, {
-                            class: "comment-highlight-active",
-                        }),
-                    );
-                }
-            });
-
-            return DecorationSet.create(doc, decorations);
-        }
-
-        return [
-            new Plugin({
-                key: activeCommentPluginKey,
-                state: {
-                    init(_, { doc }) {
-                        return computeActiveCommentDecorations(doc, extensionStorage.activeCommentId);
-                    },
-                    apply: timeApply("comment-highlight", (tr, oldDecorations, _oldState, newState) => {
-                        // Only recompute when active comment changes
-                        const activeCommentChanged = tr.getMeta("activeCommentChanged");
-                        if (activeCommentChanged !== undefined) {
-                            return computeActiveCommentDecorations(newState.doc, extensionStorage.activeCommentId);
-                        }
-                        // For document changes, just remap positions (O(log n))
-                        // Comment marks don't change from simple text edits
-                        if (tr.docChanged) {
-                            return oldDecorations.map(tr.mapping, newState.doc);
-                        }
-                        return oldDecorations;
-                    }),
-                },
-                props: {
-                    decorations(state) {
-                        return this.getState(state);
-                    },
-                },
-            }),
-        ];
-    },
-});
-
-/**
- * Scan the document for comment marks and return their positions.
- * Returns a Map of commentId -> { from, to } with the full range of each comment.
- */
-export const getCommentPositions = (editor: Editor): Map<string, { from: number; to: number }> => {
-    if (!editor || editor.isDestroyed) return new Map();
-
-    const positions = new Map<string, { from: number; to: number }>();
-
-    editor.state.doc.descendants((node, pos) => {
-        const commentMark = node.marks.find((mark) => mark.type.name === "comment");
-        if (!commentMark) return;
-
-        const id = commentMark.attrs.commentId;
-        const existing = positions.get(id);
-        const nodeEnd = pos + node.nodeSize;
-
-        if (existing) {
-            // Extend range to include this node
-            positions.set(id, {
-                from: Math.min(existing.from, pos),
-                to: Math.max(existing.to, nodeEnd),
-            });
-        } else {
-            positions.set(id, { from: pos, to: nodeEnd });
-        }
-    });
-
-    return positions;
-};
diff --git a/src/lib/screenplay/extensions/search-highlight-extension.ts b/src/lib/screenplay/extensions/search-highlight-extension.ts
index ee6c5c03..95cd849e 100644
--- a/src/lib/screenplay/extensions/search-highlight-extension.ts
+++ b/src/lib/screenplay/extensions/search-highlight-extension.ts
@@ -18,6 +18,13 @@ type SearchHighlightConfig = {
     getEnabledFilters: () => Set<ScreenplayElement>;
     getCurrentMatchIndex: () => number;
     onMatchesFound: (matches: SearchMatch[]) => void;
+    /**
+     * Returns the editor search currently targets. Optional: when provided, this
+     * instance only highlights and reports matches while it belongs to the active
+     * editor, so search is scoped to the focused panel and several open editors
+     * don't clobber the single shared match list. Omitted → always active.
+     */
+    getActiveEditor?: () => Editor | null;
 };
 
 /**
@@ -191,7 +198,7 @@ function applyCurrentMatchClass(
 }
 
 export const createSearchHighlightExtension = (config: SearchHighlightConfig) => {
-    const { getSearchTerm, getEnabledFilters, getCurrentMatchIndex, onMatchesFound } = config;
+    const { getSearchTerm, getEnabledFilters, getCurrentMatchIndex, onMatchesFound, getActiveEditor } = config;
 
     // Track previous state to avoid unnecessary updates
     let previousMatchCount = 0;
@@ -203,11 +210,18 @@ export const createSearchHighlightExtension = (config: SearchHighlightConfig) =>
         name: "searchHighlight",
 
         addProseMirrorPlugins() {
+            // `this.editor` is the instance this extension is bound to. Search is
+            // scoped to the focused editor: only the active instance highlights
+            // and reports matches (see getActiveEditor above).
+            const ownEditor = this.editor;
+            const isActive = () => !getActiveEditor || getActiveEditor() === ownEditor;
+
             return [
                 new Plugin({
                     key: searchHighlightPluginKey,
                     state: {
                         init(_, { doc }) {
+                            if (!isActive()) return DecorationSet.empty;
                             const searchTerm = getSearchTerm();
                             const result = computeSearchDecorations(
                                 doc,
@@ -222,6 +236,18 @@ export const createSearchHighlightExtension = (config: SearchHighlightConfig) =>
                             return result.decorations;
                         },
                         apply: timeApply("search-highlight", (tr, oldDecorations, _oldState, newState) => {
+                            // Not the active search editor: render nothing and don't report
+                            // matches (the active editor owns the shared match list). Reset
+                            // bookkeeping so re-activation recomputes from scratch.
+                            if (!isActive()) {
+                                if (previousSearchTerm !== "" || previousMatchCount !== 0 || cachedMatches.length !== 0) {
+                                    previousSearchTerm = "";
+                                    previousMatchCount = 0;
+                                    cachedMatches = [];
+                                }
+                                return DecorationSet.empty;
+                            }
+
                             const searchTerm = getSearchTerm();
 
                             // Fast path: no search term and wasn't searching before
diff --git a/src/lib/shelf/shelf-editor-config.ts b/src/lib/shelf/shelf-editor-config.ts
index a4e23b99..aea2f2a3 100644
--- a/src/lib/shelf/shelf-editor-config.ts
+++ b/src/lib/shelf/shelf-editor-config.ts
@@ -11,7 +11,7 @@ export function createShelfEditorConfig(nodeId: string, versionId: string): Docu
             comments: false,
             shelving: false,
             characterHighlights: false,
-            searchHighlights: false,
+            searchHighlights: true,
             sceneBookmarks: false,
             sceneLocking: false,
             nodeIdDedup: true,
diff --git a/src/lib/utils/types.ts b/src/lib/utils/types.ts
index f313c9cb..7422f98e 100644
--- a/src/lib/utils/types.ts
+++ b/src/lib/utils/types.ts
@@ -88,6 +88,8 @@ export type CommentReply = {
 
 export type Comment = {
     id: string;
+    /** data-id of the screenplay node this comment is anchored to. */
+    nodeId: string;
     text: string;
     author: string;
     createdAt: number;
diff --git a/src/tests/benchmarks/comment-highlight.bench.ts b/src/tests/benchmarks/comment-highlight.bench.ts
deleted file mode 100644
index 49e25991..00000000
--- a/src/tests/benchmarks/comment-highlight.bench.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { JSONContent } from "@tiptap/core";
-import { BASE_EXTENSIONS, SCREENPLAY_FORMATS } from "@src/lib/screenplay/editor";
-import { ScriptioPagination } from "@src/lib/screenplay/extensions/pagination-extension";
-import { createNodeIdDedupExtension } from "@src/lib/screenplay/extensions/node-id-dedup-extension";
-import { CommentMark } from "@src/lib/screenplay/extensions/comment-highlight-extension";
-import { createTestEditor } from "../helpers/editor-factory";
-import { pluginBenchSuite } from "../helpers/bench-suite";
-
-function makeEditor(content: JSONContent[]) {
-    return createTestEditor(
-        [
-            ...BASE_EXTENSIONS,
-            ScriptioPagination.configure({
-                pageGap: 20,
-                headerRight: `<p class="page-number" style="margin-top: 50px;">{page}.</p>`,
-                customHeader: {
-                    1: {
-                        headerLeft: "",
-                        headerRight: `<p class="page-number" style="margin-top: 50px;"></p>`,
-                    },
-                },
-                footerRight: "",
-                ...SCREENPLAY_FORMATS.LETTER,
-            }),
-            createNodeIdDedupExtension({ duplicatePersistentScene: () => {} }),
-            CommentMark.configure({
-                onCommentActivated: () => {},
-            }),
-        ],
-        content,
-    );
-}
-
-pluginBenchSuite("comment-highlight — apply() timing", makeEditor);
diff --git a/src/tests/project/scriptio-roundtrip.test.ts b/src/tests/project/scriptio-roundtrip.test.ts
index ff715a2c..86251522 100644
--- a/src/tests/project/scriptio-roundtrip.test.ts
+++ b/src/tests/project/scriptio-roundtrip.test.ts
@@ -46,7 +46,7 @@ function buildPopulatedProject(): ProjectState {
         repo.setPageSize("A4" as never);
         repo.setSceneLocking(true);
         repo.setSkippedSceneLetters(["I", "O", "Q"]);
-        repo.addComment({ content: "note", resolved: false } as never);
+        repo.addComment({ nodeId: "b1", text: "note", author: "Ada", createdAt: 0, resolved: false, replies: [] });
         ydoc.dictionary().set("zoetrope", true);
     });
 
diff --git a/styles/scriptio.css b/styles/scriptio.css
index 8ceaf8bd..018e189d 100644
--- a/styles/scriptio.css
+++ b/styles/scriptio.css
@@ -485,26 +485,6 @@
         text-decoration-skip-ink: none;
     }
 
-    /* Comment highlighting */
-    .hide-comments .comment-highlight,
-    .hide-comments .comment-highlight-active {
-        background-color: transparent !important;
-        border-bottom: none !important;
-        cursor: text !important;
-    }
-
-    .comment-highlight {
-        background-color: rgba(255, 213, 0, 0.2);
-        border-bottom: 2px solid rgba(255, 213, 0, 0.5);
-        cursor: pointer;
-        border-radius: 2px;
-    }
-
-    .comment-highlight-active {
-        background-color: rgba(255, 213, 0, 0.4);
-        border-bottom-color: rgba(255, 213, 0, 0.8);
-    }
-
     /* Scene bookmark marker (widget decoration inserted by scene-bookmark-extension) */
     .scene-bookmark-marker {
         position: absolute;