feat: add accessible comment thread

[own-boldsbrain]

Summary

• implement persistent CommentThread component with @mentions, editing, deletion, and resolve controls
• add tests for comment CRUD operations and resolution filtering

Testing

• pnpm exec biome lint apps/web/components/canvas/CommentThread.tsx
• pnpm exec vitest run apps/web/components/canvas/__tests__/CommentThread.test.tsx --environment jsdom
• pnpm lint (fails: repository lint errors)

---

https://chatgpt.com/codex/tasks/task_e_68ba4fc63f3483329f4d84fa562186d2

[Copilot]

Pull Request Overview

Implements a persistent CommentThread component with full CRUD operations, @mention support, thread resolution controls, and localStorage persistence.

• Adds complete comment lifecycle management (create, read, update, delete)
• Implements @mention highlighting and thread resolution/filtering functionality
• Adds comprehensive test coverage for comment operations and thread state management

Reviewed Changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 3 comments.

File	Description
package.json	Adds testing dependencies (@testing-library/react, @testing-library/user-event, jsdom)
apps/web/components/canvas/tests/CommentThread.test.tsx	New test file covering CRUD operations and thread resolution filtering
apps/web/components/canvas/CommentThread.tsx	Complete rewrite adding persistence, editing, deletion, @mentions, and resolution controls

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

Using nanoid() in render functions creates new IDs on every render, causing unnecessary re-renders. Use the part content or index as the key instead.

Suggested change

	t.split(/(@\w+)/g).map((part) =>
	part.startsWith('@') ? (
	<span
	key={`mention-${part}-${nanoid()}`}
	className="text-blue-600"
	data-testid="mention"
	>
	{part}
	</span>
	) : (
	<span key={`text-${part}-${nanoid()}`}>{part}</span>
	t.split(/(@\w+)/g).map((part, idx) =>
	part.startsWith('@') ? (
	<span
	key={`mention-${part}-${idx}`}
	className="text-blue-600"
	data-testid="mention"
	>
	{part}
	</span>
	) : (
	<span key={`text-${part}-${idx}`}>{part}</span>

[Copilot]

Using nanoid() in render functions creates new IDs on every render, causing unnecessary re-renders. Use the part content or index as the key instead.

Suggested change

	t.split(/(@\w+)/g).map((part) =>
	part.startsWith('@') ? (
	<span
	key={`mention-${part}-${nanoid()}`}
	className="text-blue-600"
	data-testid="mention"
	>
	{part}
	</span>
	) : (
	<span key={`text-${part}-${nanoid()}`}>{part}</span>
	t.split(/(@\w+)/g).map((part, idx) =>
	part.startsWith('@') ? (
	<span
	key={`mention-${part}-${idx}`}
	className="text-blue-600"
	data-testid="mention"
	>
	{part}
	</span>
	) : (
	<span key={`text-${part}-${idx}`}>{part}</span>

[Copilot]

Extra space before the closing bracket in the className prop.

Suggested change

	<li key={c.id} className="text-sm flex gap-2" >
	<li key={c.id} className="text-sm flex gap-2">