From 015a0bb3b8e0f605e3612dd80981da7420a6f112 Mon Sep 17 00:00:00 2001
From: Wentao <jwt625@gmail.com>
Date: Sun, 15 Feb 2026 14:48:26 -0800
Subject: [PATCH 1/3] feat(comments): add threaded conversations with
 soft-delete

---
 DevLog/DevLog-006-01-Comment-Conversations.md |  49 ++
 src/components/comments/CommentPanel.svelte   | 471 +++++++++++++++---
 src/components/viewer/ViewerCanvas.svelte     |   7 +-
 src/lib/collaboration/CommentSync.ts          |  17 +
 src/lib/collaboration/types.ts                |  10 +-
 src/lib/viewer/ViewerCommentController.ts     |   5 +
 src/stores/commentStore.ts                    | 117 ++++-
 7 files changed, 574 insertions(+), 102 deletions(-)
 create mode 100644 DevLog/DevLog-006-01-Comment-Conversations.md

diff --git a/DevLog/DevLog-006-01-Comment-Conversations.md b/DevLog/DevLog-006-01-Comment-Conversations.md
new file mode 100644
index 0000000..e705b0a
--- /dev/null
+++ b/DevLog/DevLog-006-01-Comment-Conversations.md
@@ -0,0 +1,49 @@
+# DevLog-006-01: Comment Conversations (Threaded Replies)
+
+**Date**: 2026-02-15  
+**Status**: In Progress  
+**Scope**: Implement conversation-style comments with arbitrary-depth replies, soft delete, host thread delete, and fold/unfold controls.
+
+## Requirements (Confirmed)
+
+1. Arbitrary-depth replies (forum-style).
+2. No new canvas bubbles for replies (root bubble only).
+3. Soft delete for comments; host can delete whole thread.
+4. Single permission toggle controls both comments and replies.
+5. Oldest-first ordering in threads.
+6. Viewer comments enabled by default.
+
+## Plan
+
+- [x] Extend `Comment` model for threads (`parentId`, `rootId`, `deleted`, `deletedAt`).
+- [x] Add normalization for backward compatibility with existing comments.
+- [x] Add update/soft-delete primitives in `commentStore` and `CommentSync`.
+- [x] Update `ViewerCommentController` to create thread-capable root comments.
+- [x] Refactor `CommentPanel` to threaded tree view with:
+  - reply composer
+  - per-comment fold/unfold
+  - soft delete
+  - host delete thread
+- [x] Keep reply comments out of canvas bubbles (root bubbles only).
+- [x] Validate with `pnpm check` and `pnpm test --run`.
+
+## Progress Log
+
+### 2026-02-15 14:44
+
+- Created DevLog and locked final behavior to the user-confirmed decisions above.
+- Next: implement model + sync/store compatibility layer.
+
+### 2026-02-15 15:20
+
+- Implemented threaded conversation panel:
+  - Oldest-first thread traversal.
+  - Arbitrary-depth replies with inline composer.
+  - Per-comment fold/unfold of descendants.
+  - Soft-delete comment action (author or host).
+  - Host-only "Delete Thread" action (soft-deletes all descendants in same root thread).
+- Updated host permissions copy to clarify one toggle controls comment + reply rights.
+- Updated canvas bubble rendering to root comments only (`parentId === null`) so replies do not spawn new bubbles.
+- Validation complete:
+  - `pnpm check`: 0 errors, 0 warnings
+  - `pnpm test --run`: 109/109 passing
diff --git a/src/components/comments/CommentPanel.svelte b/src/components/comments/CommentPanel.svelte
index c7fd271..b592ac9 100644
--- a/src/components/comments/CommentPanel.svelte
+++ b/src/components/comments/CommentPanel.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 import { onDestroy, onMount } from "svelte";
+import type { Comment } from "../../lib/collaboration/types";
 import { formatTimestamp } from "../../lib/comments/utils";
+import { generateUUID } from "../../lib/utils/uuid";
 import { collaborationStore } from "../../stores/collaborationStore";
 import { commentStore } from "../../stores/commentStore";
 import { getPanelZIndex, panelZIndexStore } from "../../stores/panelZIndexStore";
@@ -10,10 +12,19 @@ interface Props {
 	onRecenterViewport?: (worldX: number, worldY: number) => void;
 }
 
+interface ThreadRow {
+	comment: Comment;
+	depth: number;
+	childCount: number;
+	descendantCount: number;
+}
+
 const { visible = false, onRecenterViewport }: Props = $props();
 
 const zIndex = getPanelZIndex("comments");
 const STORAGE_KEY = "comment-panel-state";
+const MAX_COMMENTS = 100;
+const MAX_COMMENT_CHARS = 1000;
 
 // Panel state
 let isCollapsed = $state(false);
@@ -30,19 +41,125 @@ const comments = $derived($commentStore.comments);
 const permissions = $derived($commentStore.permissions);
 const isInSession = $derived($collaborationStore.isInSession);
 const isHost = $derived($collaborationStore.isHost);
-
-// Get userId - in solo mode, use localStorage userId
-const userId = $derived(
-	isInSession ? $collaborationStore.userId : localStorage.getItem("gdsjam_userId") || "",
+const sessionManager = $derived($collaborationStore.sessionManager);
+const currentUserId = $derived(
+	isInSession ? ($collaborationStore.userId ?? "") : localStorage.getItem("gdsjam_userId") || "",
 );
 
-// Sort comments chronologically (newest first)
+// Timestamp display mode
+let showAbsoluteTime = $state(false);
+
+// Thread UI state
+let collapsedCommentIds = $state<Set<string>>(new Set());
+let replyingToCommentId = $state<string | null>(null);
+let replyDraft = $state("");
+
 const sortedComments = $derived(
-	Array.from(comments.values()).sort((a, b) => b.createdAt - a.createdAt),
+	Array.from(comments.values()).sort((a, b) => a.createdAt - b.createdAt),
 );
 
-// Timestamp display mode
-let showAbsoluteTime = $state(false);
+const childrenByParentId = $derived(
+	(() => {
+		const children = new Map<string, Comment[]>();
+		for (const comment of sortedComments) {
+			if (!comment.parentId) continue;
+			const existing = children.get(comment.parentId) ?? [];
+			existing.push(comment);
+			children.set(comment.parentId, existing);
+		}
+		return children;
+	})(),
+);
+
+const descendantCountById = $derived(
+	(() => {
+		const memo = new Map<string, number>();
+		const countDescendants = (commentId: string): number => {
+			const cached = memo.get(commentId);
+			if (cached !== undefined) return cached;
+			const children = childrenByParentId.get(commentId) ?? [];
+			let total = children.length;
+			for (const child of children) {
+				total += countDescendants(child.id);
+			}
+			memo.set(commentId, total);
+			return total;
+		};
+
+		for (const comment of sortedComments) {
+			countDescendants(comment.id);
+		}
+		return memo;
+	})(),
+);
+
+const threadRows = $derived(
+	(() => {
+		const rows: ThreadRow[] = [];
+		const roots = sortedComments.filter((comment) => comment.parentId === null);
+
+		const walk = (comment: Comment, depth: number) => {
+			const childCount = (childrenByParentId.get(comment.id) ?? []).length;
+			rows.push({
+				comment,
+				depth,
+				childCount,
+				descendantCount: descendantCountById.get(comment.id) ?? 0,
+			});
+
+			if (collapsedCommentIds.has(comment.id)) return;
+			for (const child of childrenByParentId.get(comment.id) ?? []) {
+				walk(child, depth + 1);
+			}
+		};
+
+		for (const root of roots) {
+			walk(root, 0);
+		}
+
+		return rows;
+	})(),
+);
+
+function getCurrentUserInfo(): { userId: string; authorName: string; authorColor: string } | null {
+	if (isInSession) {
+		const userId = currentUserId;
+		if (!userId) return null;
+		const currentUser = $collaborationStore.connectedUsers.find((u) => u.id === userId);
+		return {
+			userId,
+			authorName: currentUser?.displayName || "Anonymous",
+			authorColor: currentUser?.color || "#888888",
+		};
+	}
+
+	let userId = localStorage.getItem("gdsjam_userId");
+	if (!userId) {
+		userId = generateUUID();
+		localStorage.setItem("gdsjam_userId", userId);
+	}
+
+	return {
+		userId,
+		authorName: "You",
+		authorColor: "#4ECDC4",
+	};
+}
+
+function canCurrentUserComment(): boolean {
+	if (!isInSession) return true;
+	if (isHost) return true;
+	return permissions.viewersCanComment;
+}
+
+function getCommentSync() {
+	return sessionManager?.getCommentSync() ?? null;
+}
+
+function syncUpdatedComment(comment: Comment): void {
+	if (!isInSession) return;
+	getCommentSync()?.updateComment(comment);
+}
 
 function loadState() {
 	try {
@@ -177,49 +294,74 @@ function handleTouchEnd(e: TouchEvent) {
 	handlePointerEnd(touch.clientX, touch.clientY);
 }
 
-// Comment actions
-function handleDeleteComment(commentId: string) {
+function toggleFold(commentId: string): void {
+	const next = new Set(collapsedCommentIds);
+	if (next.has(commentId)) {
+		next.delete(commentId);
+	} else {
+		next.add(commentId);
+	}
+	collapsedCommentIds = next;
+}
+
+function handleSoftDeleteComment(commentId: string): void {
 	const comment = comments.get(commentId);
-	if (!comment) return;
+	if (!comment || comment.deleted) return;
 
-	// Check if confirmation is needed (>140 characters)
 	const needsConfirmation = comment.content.length > 140;
-
-	if (needsConfirmation) {
-		if (!confirm("Delete this comment? This action cannot be undone.")) {
-			return;
-		}
+	if (needsConfirmation && !confirm("Delete this comment?")) {
+		return;
 	}
 
-	commentStore.deleteComment(commentId);
+	const deletedAt = Date.now();
+	const updatedComment: Comment = {
+		...comment,
+		content: "[deleted]",
+		deleted: true,
+		deletedAt,
+		editedAt: deletedAt,
+	};
 
-	// Sync to Y.js if in collaboration mode
-	if (isInSession) {
-		const sessionManager = $collaborationStore.sessionManager;
-		const commentSync = sessionManager?.getCommentSync();
-		if (commentSync) {
-			commentSync.deleteComment(commentId);
-		}
+	commentStore.updateComment(updatedComment, isInSession);
+	syncUpdatedComment(updatedComment);
+}
+
+function handleDeleteThread(rootId: string): void {
+	if (!isHost) return;
+	if (!confirm("Delete this whole thread?")) return;
+
+	for (const comment of comments.values()) {
+		if (comment.rootId !== rootId || comment.deleted) continue;
+		const deletedAt = Date.now();
+		const updatedComment: Comment = {
+			...comment,
+			content: "[deleted]",
+			deleted: true,
+			deletedAt,
+			editedAt: deletedAt,
+		};
+		commentStore.updateComment(updatedComment, isInSession);
+		syncUpdatedComment(updatedComment);
 	}
 }
 
 function handleClearAll() {
-	if (!confirm("Clear all comments? This action cannot be undone.")) {
+	if (!confirm("Soft-delete all comments?")) {
 		return;
 	}
 
-	// Delete all comments
 	for (const comment of comments.values()) {
-		commentStore.deleteComment(comment.id);
-
-		// Sync to Y.js if in collaboration mode
-		if (isInSession) {
-			const sessionManager = $collaborationStore.sessionManager;
-			const commentSync = sessionManager?.getCommentSync();
-			if (commentSync) {
-				commentSync.deleteComment(comment.id);
-			}
-		}
+		if (comment.deleted) continue;
+		const deletedAt = Date.now();
+		const updatedComment: Comment = {
+			...comment,
+			content: "[deleted]",
+			deleted: true,
+			deletedAt,
+			editedAt: deletedAt,
+		};
+		commentStore.updateComment(updatedComment, isInSession);
+		syncUpdatedComment(updatedComment);
 	}
 }
 
@@ -229,11 +371,7 @@ function handleToggleViewerComments() {
 
 	// Sync to Y.js if in collaboration mode
 	if (isInSession) {
-		const sessionManager = $collaborationStore.sessionManager;
-		const commentSync = sessionManager?.getCommentSync();
-		if (commentSync) {
-			commentSync.updatePermissions({ ...permissions, viewersCanComment: newValue });
-		}
+		getCommentSync()?.updatePermissions({ ...permissions, viewersCanComment: newValue });
 	}
 }
 
@@ -241,6 +379,73 @@ function handleRecenterViewport(worldX: number, worldY: number) {
 	onRecenterViewport?.(worldX, worldY);
 }
 
+function startReply(commentId: string): void {
+	if (!canCurrentUserComment()) {
+		commentStore.showToast("Commenting is disabled by the host");
+		return;
+	}
+	replyingToCommentId = commentId;
+	replyDraft = "";
+}
+
+function cancelReply(): void {
+	replyingToCommentId = null;
+	replyDraft = "";
+}
+
+function submitReply(parentComment: Comment): void {
+	const trimmed = replyDraft.trim();
+	if (!trimmed) return;
+	if (trimmed.length > MAX_COMMENT_CHARS) {
+		commentStore.showToast(`Comment is too long (${MAX_COMMENT_CHARS} character max)`);
+		return;
+	}
+	if (comments.size >= MAX_COMMENTS) {
+		commentStore.showToast("Comment limit reached (100 comments maximum)");
+		return;
+	}
+
+	const userInfo = getCurrentUserInfo();
+	if (!userInfo) return;
+
+	if (isInSession) {
+		if (!isHost && !permissions.viewersCanComment) {
+			commentStore.showToast("Commenting is disabled by the host");
+			return;
+		}
+		if (!commentStore.checkRateLimit(userInfo.userId, isHost)) {
+			const rateLimit = isHost ? "10 seconds" : "1 minute";
+			commentStore.showToast(
+				`Please wait before posting another comment (${rateLimit} rate limit)`,
+			);
+			return;
+		}
+	}
+
+	const replyComment: Comment = {
+		id: generateUUID(),
+		authorId: userInfo.userId,
+		authorName: userInfo.authorName,
+		authorColor: userInfo.authorColor,
+		content: trimmed,
+		worldX: parentComment.worldX,
+		worldY: parentComment.worldY,
+		createdAt: Date.now(),
+		editedAt: null,
+		parentId: parentComment.id,
+		rootId: parentComment.rootId,
+		deleted: false,
+		deletedAt: null,
+	};
+
+	commentStore.addComment(replyComment, isInSession);
+	if (isInSession) {
+		getCommentSync()?.addComment(replyComment);
+	}
+
+	cancelReply();
+}
+
 onMount(() => {
 	loadState();
 	initDefaultPosition();
@@ -284,45 +489,54 @@ onDestroy(() => {
 						<button
 							class="control-btn"
 							onclick={handleToggleViewerComments}
-							title={permissions.viewersCanComment ? "Disable viewer comments" : "Enable viewer comments"}
+							title={permissions.viewersCanComment ? "Disable viewer comments and replies" : "Enable viewer comments and replies"}
 						>
 							<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 								{#if permissions.viewersCanComment}
-									<!-- Unlocked icon -->
 									<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
 									<path d="M7 11V7a5 5 0 0 1 9.9-1"></path>
 								{:else}
-									<!-- Locked icon -->
 									<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
 									<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
 								{/if}
 							</svg>
-							{permissions.viewersCanComment ? "Viewers Can Comment" : "Viewers Cannot Comment"}
+							{permissions.viewersCanComment ? "Viewers Can Comment/Reply" : "Viewers Cannot Comment/Reply"}
 						</button>
 						<button
 							class="control-btn danger"
 							onclick={handleClearAll}
 							disabled={sortedComments.length === 0}
-							title="Clear all comments"
+							title="Soft-delete all comments"
 						>
 							<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 								<polyline points="3 6 5 6 21 6"></polyline>
 								<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
 							</svg>
-							Clear All
+							Soft Delete All
 						</button>
 					</div>
 				{/if}
 
-				<!-- Comment list -->
 				<div class="comment-list">
 					{#if sortedComments.length === 0}
 						<div class="empty-state">No comments yet</div>
 					{:else}
-						{#each sortedComments as comment (comment.id)}
-							<div class="comment-item">
+						{#each threadRows as row (row.comment.id)}
+							{@const comment = row.comment}
+							<div class="comment-item" style="margin-left: {Math.min(row.depth, 10) * 14}px;">
 								<div class="comment-header">
-									<span class="author" style="color: {comment.authorColor}">{comment.authorName}</span>
+									<div class="header-left">
+										{#if row.childCount > 0}
+											<button
+												class="fold-btn"
+												onclick={() => toggleFold(comment.id)}
+												title={collapsedCommentIds.has(comment.id) ? "Unfold replies" : "Fold replies"}
+											>
+												{collapsedCommentIds.has(comment.id) ? "+" : "-"}
+											</button>
+										{/if}
+										<span class="author" style="color: {comment.authorColor}">{comment.authorName}</span>
+									</div>
 									<span
 										class="timestamp"
 										onclick={() => { showAbsoluteTime = !showAbsoluteTime; }}
@@ -334,12 +548,14 @@ onDestroy(() => {
 										{formatTimestamp(comment.createdAt, showAbsoluteTime ? "absolute" : "relative")}
 									</span>
 								</div>
-								<div class="comment-text">{comment.content}</div>
+
+								<div class="comment-text" class:deleted={comment.deleted}>{comment.content}</div>
+
 								<div class="comment-actions">
 									<button
 										class="action-btn"
 										onclick={() => handleRecenterViewport(comment.worldX, comment.worldY)}
-										title="Recenter viewport to this comment"
+										title="Recenter viewport to this thread anchor"
 									>
 										<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 											<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
@@ -347,20 +563,60 @@ onDestroy(() => {
 										</svg>
 										Go to
 									</button>
-									{#if isHost || comment.authorId === userId}
+
+									<button
+										class="action-btn"
+										onclick={() => startReply(comment.id)}
+										disabled={!canCurrentUserComment()}
+										title={canCurrentUserComment() ? "Reply to this comment" : "Replies are disabled by host"}
+									>
+										Reply
+									</button>
+
+									{#if row.descendantCount > 0}
+										<span class="thread-meta">{row.descendantCount} replies</span>
+									{/if}
+
+									{#if isHost || comment.authorId === currentUserId}
 										<button
 											class="action-btn delete"
-											onclick={() => handleDeleteComment(comment.id)}
-											title="Delete comment"
+											onclick={() => handleSoftDeleteComment(comment.id)}
+											disabled={comment.deleted}
+											title="Soft-delete comment"
 										>
-											<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-												<polyline points="3 6 5 6 21 6"></polyline>
-												<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-											</svg>
 											Delete
 										</button>
 									{/if}
+
+									{#if isHost && comment.parentId === null}
+										<button
+											class="action-btn danger"
+											onclick={() => handleDeleteThread(comment.rootId)}
+											title="Host: soft-delete whole thread"
+										>
+											Delete Thread
+										</button>
+									{/if}
 								</div>
+
+								{#if replyingToCommentId === comment.id}
+									<div class="reply-composer">
+										<textarea
+											bind:value={replyDraft}
+											maxlength={MAX_COMMENT_CHARS}
+											placeholder="Write a reply..."
+											rows="3"
+										></textarea>
+										<div class="reply-actions">
+											<button class="action-btn" onclick={() => submitReply(comment)}>
+												Post Reply
+											</button>
+											<button class="action-btn" onclick={cancelReply}>
+												Cancel
+											</button>
+										</div>
+									</div>
+								{/if}
 							</div>
 						{/each}
 					{/if}
@@ -384,7 +640,6 @@ onDestroy(() => {
 	font-family: monospace;
 	font-size: 12px;
 	color: #ccc;
-	/* NO ANIMATIONS */
 	transition: none;
 }
 
@@ -413,7 +668,6 @@ onDestroy(() => {
 	width: 16px;
 	height: 16px;
 	color: #ccc;
-	/* NO ANIMATIONS */
 	transition: none;
 }
 
@@ -451,7 +705,6 @@ onDestroy(() => {
 	display: flex;
 	align-items: center;
 	gap: 6px;
-	/* NO ANIMATIONS */
 	transition: none;
 }
 
@@ -507,6 +760,25 @@ onDestroy(() => {
 	margin-bottom: 6px;
 }
 
+.header-left {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	min-width: 0;
+}
+
+.fold-btn {
+	width: 18px;
+	height: 18px;
+	padding: 0;
+	background: rgba(50, 50, 50, 0.9);
+	border: 1px solid #555;
+	border-radius: 2px;
+	color: #ccc;
+	font-size: 11px;
+	cursor: pointer;
+}
+
 .author {
 	font-size: 11px;
 	font-weight: 600;
@@ -533,9 +805,22 @@ onDestroy(() => {
 	margin-bottom: 8px;
 }
 
+.comment-text.deleted {
+	color: #777;
+	font-style: italic;
+}
+
 .comment-actions {
 	display: flex;
 	gap: 8px;
+	flex-wrap: wrap;
+}
+
+.thread-meta {
+	display: inline-flex;
+	align-items: center;
+	color: #888;
+	font-size: 10px;
 }
 
 .action-btn {
@@ -549,32 +834,66 @@ onDestroy(() => {
 	display: flex;
 	align-items: center;
 	gap: 4px;
-	/* NO ANIMATIONS */
 	transition: none;
 }
 
-.action-btn:hover {
+.action-btn:hover:not(:disabled) {
 	background: rgba(60, 60, 60, 0.8);
 	border-color: #555;
 	color: #ccc;
 }
 
+.action-btn:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
 .action-btn.delete {
-	background: rgba(180, 50, 50, 0.2);
-	border-color: rgba(255, 100, 100, 0.2);
+	background: rgba(120, 40, 40, 0.35);
+	border-color: rgba(255, 100, 100, 0.25);
 }
 
-.action-btn.delete:hover {
-	background: rgba(200, 60, 60, 0.4);
-	border-color: rgba(255, 100, 100, 0.4);
+.action-btn.danger {
+	background: rgba(140, 45, 45, 0.45);
+	border-color: rgba(255, 110, 110, 0.35);
 }
 
-.btn-icon {
-	width: 14px;
-	height: 14px;
-	flex-shrink: 0;
+.reply-composer {
+	margin-top: 8px;
+	padding-top: 8px;
+	border-top: 1px solid #333;
 }
-</style>
 
+.reply-composer textarea {
+	width: 100%;
+	resize: vertical;
+	min-height: 56px;
+	background: rgba(10, 10, 10, 0.9);
+	border: 1px solid #444;
+	border-radius: 3px;
+	color: #ccc;
+	font-family: monospace;
+	font-size: 11px;
+	padding: 6px;
+	box-sizing: border-box;
+}
+
+.reply-actions {
+	display: flex;
+	gap: 8px;
+	margin-top: 6px;
+}
 
+.btn-icon {
+	width: 12px;
+	height: 12px;
+	flex-shrink: 0;
+}
 
+@media (max-width: 1023px) {
+	.comment-panel {
+		width: min(320px, calc(100vw - 32px));
+		max-height: calc(100vh - 120px);
+	}
+}
+</style>
diff --git a/src/components/viewer/ViewerCanvas.svelte b/src/components/viewer/ViewerCanvas.svelte
index 1131c33..41a697c 100644
--- a/src/components/viewer/ViewerCanvas.svelte
+++ b/src/components/viewer/ViewerCanvas.svelte
@@ -74,6 +74,9 @@ let commentPanelVisible = $state(false);
 const comments = $derived($commentStore.comments);
 const allCommentsVisible = $derived($commentStore.allCommentsVisible);
 const commentPermissions = $derived($commentStore.permissions);
+const rootComments = $derived(
+	Array.from(comments.values()).filter((comment) => comment.parentId === null),
+);
 // Track viewport changes to trigger comment bubble position updates
 let viewportVersion = $state(0);
 
@@ -173,7 +176,7 @@ $effect(() => {
 						| undefined;
 
 					const permissions = commentPermissions || {
-						viewersCanComment: false,
+						viewersCanComment: true,
 						viewerRateLimit: 60000, // 1 minute
 						hostRateLimit: 10000, // 10 seconds
 					};
@@ -821,7 +824,7 @@ function toggleMinimap() {
 
 	<!-- Comment bubbles -->
 	{#if allCommentsVisible && renderer}
-		{#each Array.from(comments.values()) as comment (`${comment.id}-${viewportVersion}`)}
+		{#each rootComments as comment (`${comment.id}-${viewportVersion}`)}
 			{@const screenPos = worldToScreen(comment.worldX, comment.worldY)}
 			{#if screenPos}
 				<CommentBubble
diff --git a/src/lib/collaboration/CommentSync.ts b/src/lib/collaboration/CommentSync.ts
index 1a27ff8..2f3eff6 100644
--- a/src/lib/collaboration/CommentSync.ts
+++ b/src/lib/collaboration/CommentSync.ts
@@ -138,6 +138,23 @@ export class CommentSync {
 		this.commentsArray.push([comment]);
 	}
 
+	/**
+	 * Update an existing comment in the shared array.
+	 */
+	updateComment(comment: Comment): void {
+		if (!this.commentsArray) {
+			console.error("[CommentSync] Cannot update comment - not initialized");
+			return;
+		}
+
+		const comments = this.commentsArray.toArray();
+		const index = comments.findIndex((c) => c.id === comment.id);
+		if (index !== -1) {
+			this.commentsArray.delete(index, 1);
+			this.commentsArray.insert(index, [comment]);
+		}
+	}
+
 	/**
 	 * Delete a comment from the shared array
 	 */
diff --git a/src/lib/collaboration/types.ts b/src/lib/collaboration/types.ts
index d1a100d..376a31d 100644
--- a/src/lib/collaboration/types.ts
+++ b/src/lib/collaboration/types.ts
@@ -172,13 +172,21 @@ export interface Comment {
 	createdAt: number;
 	/** Last edit timestamp (milliseconds since epoch, null if never edited) */
 	editedAt: number | null;
+	/** Parent comment ID (null for root comments) */
+	parentId: string | null;
+	/** Root thread comment ID (same as id for root comments) */
+	rootId: string;
+	/** Soft-delete flag */
+	deleted: boolean;
+	/** Soft-delete timestamp (null if not deleted) */
+	deletedAt: number | null;
 }
 
 /**
  * Comment permissions for collaboration sessions (Issue #49)
  */
 export interface CommentPermissions {
-	/** Whether viewers can create comments (default: false) */
+	/** Whether viewers can create comments (default: true) */
 	viewersCanComment: boolean;
 	/** Rate limit for viewers (comments per minute, default: 1) */
 	viewerRateLimit: number;
diff --git a/src/lib/viewer/ViewerCommentController.ts b/src/lib/viewer/ViewerCommentController.ts
index 249976b..0b0e94c 100644
--- a/src/lib/viewer/ViewerCommentController.ts
+++ b/src/lib/viewer/ViewerCommentController.ts
@@ -146,7 +146,12 @@ export class ViewerCommentController {
 			worldY: pendingPosition.worldY,
 			createdAt: Date.now(),
 			editedAt: null,
+			parentId: null,
+			rootId: "",
+			deleted: false,
+			deletedAt: null,
 		};
+		comment.rootId = comment.id;
 
 		this.callbacks.addComment(comment, isInSession);
 		if (isInSession) {
diff --git a/src/stores/commentStore.ts b/src/stores/commentStore.ts
index 9576972..61742eb 100644
--- a/src/stores/commentStore.ts
+++ b/src/stores/commentStore.ts
@@ -20,7 +20,7 @@ import type {
 
 const STORAGE_KEY_PREFIX = "gdsjam_comments_";
 const DEFAULT_PERMISSIONS: CommentPermissions = {
-	viewersCanComment: false,
+	viewersCanComment: true,
 	viewerRateLimit: 1, // 1 comment per minute
 	hostRateLimit: 1, // 1 comment per 10 seconds
 };
@@ -28,6 +28,30 @@ const TOAST_DURATION_MS = 3000; // 3 seconds
 
 let toastTimeout: ReturnType<typeof setTimeout> | null = null;
 
+function normalizeComment(raw: Comment): Comment {
+	const parentId = raw.parentId ?? null;
+	const rootId = raw.rootId ?? raw.id;
+	return {
+		...raw,
+		parentId,
+		rootId,
+		deleted: raw.deleted ?? false,
+		deletedAt: raw.deletedAt ?? null,
+	};
+}
+
+function toPersistableComments(
+	comments: Map<string, CommentWithDisplayState>,
+): Map<string, Comment> {
+	return new Map(
+		Array.from(comments.entries()).map(([id, c]) => {
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
+			const { displayState, ...commentData } = c;
+			return [id, commentData as Comment];
+		}),
+	);
+}
+
 /**
  * Create the comment store
  */
@@ -120,7 +144,10 @@ function createCommentStore() {
 				const commentsArray: Comment[] = JSON.parse(stored);
 				// Add default display state when loading
 				const commentsMap = new Map(
-					commentsArray.map((c) => [c.id, { ...c, displayState: "preview" as const }]),
+					commentsArray.map((c) => {
+						const normalized = normalizeComment(c);
+						return [normalized.id, { ...normalized, displayState: "preview" as const }] as const;
+					}),
 				);
 
 				update((state) => ({
@@ -155,17 +182,18 @@ function createCommentStore() {
 
 				// Merge Y.js comments with existing local state
 				for (const comment of comments) {
-					const existingComment = state.comments.get(comment.id);
+					const normalized = normalizeComment(comment);
+					const existingComment = state.comments.get(normalized.id);
 					if (existingComment) {
 						// Preserve display state for existing comments
-						newCommentsMap.set(comment.id, {
-							...comment,
+						newCommentsMap.set(normalized.id, {
+							...normalized,
 							displayState: existingComment.displayState,
 						});
 					} else {
 						// New comment - default to preview state
-						newCommentsMap.set(comment.id, {
-							...comment,
+						newCommentsMap.set(normalized.id, {
+							...normalized,
 							displayState: "preview" as const,
 						});
 					}
@@ -219,22 +247,17 @@ function createCommentStore() {
 		addComment: (comment: Comment, isCollaboration: boolean = false) => {
 			update((state) => {
 				const newComments = new Map(state.comments);
+				const normalized = normalizeComment(comment);
 				// Add default display state
 				const commentWithState: CommentWithDisplayState = {
-					...comment,
+					...normalized,
 					displayState: "preview",
 				};
-				newComments.set(comment.id, commentWithState);
+				newComments.set(normalized.id, commentWithState);
 
 				// Save to localStorage if solo mode (without displayState)
 				if (!isCollaboration && state.fileIdentifier) {
-					const commentsForStorage = new Map(
-						Array.from(newComments.entries()).map(([id, c]) => {
-							// eslint-disable-next-line @typescript-eslint/no-unused-vars
-							const { displayState, ...commentData } = c;
-							return [id, commentData as Comment];
-						}),
-					);
+					const commentsForStorage = toPersistableComments(newComments);
 					commentStore.saveToLocalStorage(state.fileIdentifier, commentsForStorage);
 				}
 
@@ -255,13 +278,7 @@ function createCommentStore() {
 
 				// Save to localStorage if solo mode (without displayState)
 				if (!isCollaboration && state.fileIdentifier) {
-					const commentsForStorage = new Map(
-						Array.from(newComments.entries()).map(([id, c]) => {
-							// eslint-disable-next-line @typescript-eslint/no-unused-vars
-							const { displayState, ...commentData } = c;
-							return [id, commentData as Comment];
-						}),
-					);
+					const commentsForStorage = toPersistableComments(newComments);
 					commentStore.saveToLocalStorage(state.fileIdentifier, commentsForStorage);
 				}
 
@@ -272,6 +289,60 @@ function createCommentStore() {
 			});
 		},
 
+		/**
+		 * Update a comment (for thread operations / edits / soft delete sync)
+		 */
+		updateComment: (comment: Comment, isCollaboration: boolean = false) => {
+			update((state) => {
+				const existing = state.comments.get(comment.id);
+				if (!existing) return state;
+
+				const normalized = normalizeComment(comment);
+				const newComments = new Map(state.comments);
+				newComments.set(normalized.id, {
+					...normalized,
+					displayState: existing.displayState,
+				});
+
+				if (!isCollaboration && state.fileIdentifier) {
+					commentStore.saveToLocalStorage(state.fileIdentifier, toPersistableComments(newComments));
+				}
+
+				return {
+					...state,
+					comments: newComments,
+				};
+			});
+		},
+
+		/**
+		 * Soft-delete a single comment by ID.
+		 */
+		softDeleteComment: (commentId: string, isCollaboration: boolean = false) => {
+			update((state) => {
+				const existing = state.comments.get(commentId);
+				if (!existing || existing.deleted) return state;
+
+				const newComments = new Map(state.comments);
+				newComments.set(commentId, {
+					...existing,
+					content: "[deleted]",
+					deleted: true,
+					deletedAt: Date.now(),
+					editedAt: Date.now(),
+				});
+
+				if (!isCollaboration && state.fileIdentifier) {
+					commentStore.saveToLocalStorage(state.fileIdentifier, toPersistableComments(newComments));
+				}
+
+				return {
+					...state,
+					comments: newComments,
+				};
+			});
+		},
+
 		/**
 		 * Update comment display state (local UI only, not persisted)
 		 */

From 5ffa811656f1d04ca97c3ca01be9c1de3860537f Mon Sep 17 00:00:00 2001
From: Wentao <jwt625@gmail.com>
Date: Sun, 15 Feb 2026 14:50:13 -0800
Subject: [PATCH 2/3] docs(devlog): include rollout checklist updates

---
 ...-00-Viewer-Stability-and-Refactor-Fixes.md | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/DevLog/DevLog-006-00-Viewer-Stability-and-Refactor-Fixes.md b/DevLog/DevLog-006-00-Viewer-Stability-and-Refactor-Fixes.md
index 56a5829..f74cbd4 100644
--- a/DevLog/DevLog-006-00-Viewer-Stability-and-Refactor-Fixes.md
+++ b/DevLog/DevLog-006-00-Viewer-Stability-and-Refactor-Fixes.md
@@ -122,3 +122,35 @@
 - No raw secret values, real tokens, passwords, private keys, or credential strings are present.
 - Mentions of environment variables (`AUTH_TOKEN`, `API_TOKEN_SECRET`, `TURN_SHARED_SECRET`, `VITE_TURN_PASSWORD`) are generic configuration identifiers only.
 - Commit hashes included are public git identifiers, not sensitive data.
+
+
+# Server rollout + manual QA
+
+## Server steps
+1. SSH in and go to repo.
+2. `git fetch origin`
+3. `git checkout refactor-viewer-stability`
+4. `git pull --ff-only origin refactor-viewer-stability`
+5. Install deps:
+   - root: `pnpm install --frozen-lockfile`
+   - server: `cd server && pnpm install --frozen-lockfile && cd ..`
+6. Ensure `server/.env` has:
+   - `AUTH_TOKEN`
+   - `API_TOKEN_SECRET`
+   - `TURN_SHARED_SECRET` (must match coturn `static-auth-secret`)
+7. Restart server (`server/stop.sh` then `server/start.sh`, or your process manager).
+8. Confirm logs show API token + TURN credential routes enabled.
+
+## Manual tests still needed
+1. Two real clients (different networks): host/join, file sync, viewport sync.
+2. TURN fallback: verify collaboration still works under restrictive NAT/firewall.
+3. Token expiry: wait past TTL, then upload/download/execute again.
+4. Restart resilience: restart server during active session and verify recovery.
+5. Cross-browser check: Chrome + Safari/Firefox collaboration sanity.
+6. Production config sanity: no long-lived frontend file token dependency.
+
+## Optional quick checks
+- `pnpm check`
+- `pnpm test --run`
+- `curl -X POST /api/auth/token` works
+- `curl /api/turn-credentials` works with issued token

From 48602255508ec12db29fcaa1d96858defcb2201a Mon Sep 17 00:00:00 2001
From: Wentao <jwt625@gmail.com>
Date: Sun, 15 Feb 2026 15:13:57 -0800
Subject: [PATCH 3/3] fix(viewer): allow spaces in comment inputs

---
 DevLog/DevLog-006-01-Comment-Conversations.md | 6 ++++++
 src/lib/renderer/controls/MouseController.ts  | 8 ++++++++
 2 files changed, 14 insertions(+)

diff --git a/DevLog/DevLog-006-01-Comment-Conversations.md b/DevLog/DevLog-006-01-Comment-Conversations.md
index e705b0a..b44f5eb 100644
--- a/DevLog/DevLog-006-01-Comment-Conversations.md
+++ b/DevLog/DevLog-006-01-Comment-Conversations.md
@@ -47,3 +47,9 @@
 - Validation complete:
   - `pnpm check`: 0 errors, 0 warnings
   - `pnpm test --run`: 109/109 passing
+
+### 2026-02-15 15:37
+
+- Fixed global `Space` interception conflict in viewer pan controls:
+  - `MouseController` now ignores `Space` keydown when the focused target is `INPUT`, `TEXTAREA`, or `contenteditable`.
+  - This allows normal typing (including spaces) in the threaded comment reply textarea while keeping `Space+Drag` panning behavior elsewhere.
diff --git a/src/lib/renderer/controls/MouseController.ts b/src/lib/renderer/controls/MouseController.ts
index ef327e5..00934ad 100644
--- a/src/lib/renderer/controls/MouseController.ts
+++ b/src/lib/renderer/controls/MouseController.ts
@@ -71,6 +71,14 @@ export class MouseController {
 
 	private onKeyDown(e: KeyboardEvent): void {
 		if (e.code === "Space") {
+			const target = e.target as HTMLElement | null;
+			const isTextInput =
+				target?.tagName === "INPUT" ||
+				target?.tagName === "TEXTAREA" ||
+				target?.isContentEditable === true;
+			if (isTextInput) {
+				return;
+			}
 			this.isSpacePressed = true;
 			e.preventDefault();
 		}