diff --git a/docs/content/docs/plugins/comments.mdx b/docs/content/docs/plugins/comments.mdx
index 2152e626..58eaff82 100644
--- a/docs/content/docs/plugins/comments.mdx
+++ b/docs/content/docs/plugins/comments.mdx
@@ -274,6 +274,7 @@ import { CommentThread } from "@btst/stack/plugins/comments/client/components"
 | `currentUserId` | `string` | — | Authenticated user ID — enables edit/delete/pending badge |
 | `loginHref` | `string` | — | Login page URL shown to unauthenticated users |
 | `pageSize` | `number` | — | Comments per page. Falls back to `defaultCommentPageSize` from overrides, then 100. A "Load more" button appears when there are additional pages. |
+| `sort` | `"asc" \| "desc"` | — | Sort direction for top-level comments by `createdAt`. Defaults to `defaultCommentSort` from overrides, then `"desc"` (newest first). Replies inside each thread always render chronologically and are unaffected. |
 | `components.Input` | `ComponentType` | — | Custom input component (default: `<textarea>`) |
 | `components.Renderer` | `ComponentType` | — | Custom renderer for comment body (default: `<p>`) |
 
@@ -528,6 +529,7 @@ Configure the comments plugin behavior from your layout:
 | `currentUserId` | `string \| (() => string \| undefined \| Promise<string \| undefined>)` | Authenticated user's ID — used by the User Comments page. Supports async functions for session-based resolution. |
 | `loginHref` | `string` | Login route used by comment UIs when user is unauthenticated. |
 | `defaultCommentPageSize` | `number` | Default number of top-level comments per page for all `CommentThread` instances. Overridden per-instance by the `pageSize` prop. Defaults to `100` when not set. |
+| `defaultCommentSort` | `"asc" \| "desc"` | Default sort direction for top-level comments in all `CommentThread` instances. Overridden per-instance by the `sort` prop. Defaults to `"desc"` (newest first). |
 | `allowPosting` | `boolean` | Hide/show comment form and reply actions globally in `CommentThread` instances (defaults to `true`). |
 | `allowEditing` | `boolean` | Hide/show edit affordances globally in `CommentThread` instances (defaults to `true`). |
 | `resourceLinks` | `Record<string, (id: string) => string>` | Per-resource-type URL builders for linking comments back to their resource on the User Comments page (e.g. `{ "blog-post": (slug) => "/pages/blog/" + slug }`). The plugin appends `#comments` automatically so the page scrolls to the thread. |
diff --git a/e2e/tests/smoke.comments.spec.ts b/e2e/tests/smoke.comments.spec.ts
index d783401c..21be9c1c 100644
--- a/e2e/tests/smoke.comments.spec.ts
+++ b/e2e/tests/smoke.comments.spec.ts
@@ -77,15 +77,17 @@ async function testLoadMoreComments(
 	const thread = page.locator('[data-testid="comment-thread"]');
 	await expect(thread).toBeVisible({ timeout: 8000 });
 
-	// First page of comments should be visible (comments are asc-sorted by date)
-	for (let i = 1; i <= pageSize; i++) {
+	// First page of comments should be visible. CommentThread defaults to
+	// `sort: "desc"` (newest first), and comments are created sequentially
+	// 1..totalCount, so the highest-numbered comments appear on page 1.
+	for (let i = totalCount; i > totalCount - pageSize; i--) {
 		await expect(
 			page.getByText(`${bodyPrefix} ${i}`, { exact: true }),
 		).toBeVisible({ timeout: 5000 });
 	}
 
-	// Comments beyond the first page must NOT be visible yet
-	for (let i = pageSize + 1; i <= totalCount; i++) {
+	// Older comments (those that fall on subsequent pages) must NOT be visible yet
+	for (let i = totalCount - pageSize; i >= 1; i--) {
 		await expect(
 			page.getByText(`${bodyPrefix} ${i}`, { exact: true }),
 		).not.toBeVisible();
diff --git a/packages/stack/package.json b/packages/stack/package.json
index e8f48e6d..ea61bf74 100644
--- a/packages/stack/package.json
+++ b/packages/stack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@btst/stack",
-  "version": "2.11.8",
+  "version": "2.12.0",
   "description": "A composable, plugin-based library for building full-stack applications.",
   "repository": {
     "type": "git",
diff --git a/packages/stack/registry/btst-comments.json b/packages/stack/registry/btst-comments.json
index 77135544..214200f8 100644
--- a/packages/stack/registry/btst-comments.json
+++ b/packages/stack/registry/btst-comments.json
@@ -54,7 +54,7 @@
     {
       "path": "btst/comments/client/components/comment-thread.tsx",
       "type": "registry:component",
-      "content": "\"use client\";\n\nimport { useEffect, useState, type ComponentType } from \"react\";\nimport { WhenVisible } from \"@/components/ui/when-visible\";\nimport {\n\tAvatar,\n\tAvatarFallback,\n\tAvatarImage,\n} from \"@/components/ui/avatar\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Separator } from \"@/components/ui/separator\";\nimport {\n\tHeart,\n\tMessageSquare,\n\tPencil,\n\tX,\n\tLogIn,\n\tChevronDown,\n\tChevronUp,\n} from \"lucide-react\";\nimport { formatDistanceToNow } from \"date-fns\";\nimport type { SerializedComment } from \"../../types\";\nimport { getInitials } from \"../utils\";\nimport { CommentForm } from \"./comment-form\";\nimport {\n\tuseComments,\n\tuseInfiniteComments,\n\tusePostComment,\n\tuseUpdateComment,\n\tuseDeleteComment,\n\tuseToggleLike,\n} from \"@btst/stack/plugins/comments/client/hooks\";\nimport {\n\tCOMMENTS_LOCALIZATION,\n\ttype CommentsLocalization,\n} from \"../localization\";\nimport { usePluginOverrides } from \"@btst/stack/context\";\nimport type { CommentsPluginOverrides } from \"../overrides\";\n\n/** Custom input component props */\nexport interface CommentInputProps {\n\tvalue: string;\n\tonChange: (value: string) => void;\n\tdisabled?: boolean;\n\tplaceholder?: string;\n}\n\n/** Custom renderer component props */\nexport interface CommentRendererProps {\n\tbody: string;\n}\n\n/** Override slot for custom input + renderer */\nexport interface CommentComponents {\n\tInput?: ComponentType<CommentInputProps>;\n\tRenderer?: ComponentType<CommentRendererProps>;\n}\n\nexport interface CommentThreadProps {\n\t/** The resource this thread is attached to (e.g. post slug, task ID) */\n\tresourceId: string;\n\t/** Discriminates resources across plugins (e.g. \"blog-post\", \"kanban-task\") */\n\tresourceType: string;\n\t/** Base URL for API calls */\n\tapiBaseURL: string;\n\t/** Path where the API is mounted */\n\tapiBasePath: string;\n\t/** Currently authenticated user ID. Omit for read-only / unauthenticated. */\n\tcurrentUserId?: string;\n\t/**\n\t * URL to redirect unauthenticated users to.\n\t * When provided and currentUserId is absent, shows a \"Please login to comment\" prompt.\n\t */\n\tloginHref?: string;\n\t/** Optional HTTP headers for API calls (e.g. forwarding cookies) */\n\theaders?: HeadersInit;\n\t/** Swap in custom Input / Renderer components */\n\tcomponents?: CommentComponents;\n\t/** Optional className applied to the root wrapper */\n\tclassName?: string;\n\t/** Localization strings — defaults to English */\n\tlocalization?: Partial<CommentsLocalization>;\n\t/**\n\t * Number of top-level comments to load per page.\n\t * Clicking \"Load more\" fetches the next page. Default: 10.\n\t */\n\tpageSize?: number;\n\t/**\n\t * When false, the comment form and reply buttons are hidden.\n\t * Overrides the global `allowPosting` from `CommentsPluginOverrides`.\n\t * Defaults to true.\n\t */\n\tallowPosting?: boolean;\n\t/**\n\t * When false, the edit button is hidden on comment cards.\n\t * Overrides the global `allowEditing` from `CommentsPluginOverrides`.\n\t * Defaults to true.\n\t */\n\tallowEditing?: boolean;\n}\n\nconst DEFAULT_RENDERER: ComponentType<CommentRendererProps> = ({ body }) => (\n\t<p className=\"text-sm whitespace-pre-wrap wrap-break-word\">{body}</p>\n);\n\n// ─── Comment Card ─────────────────────────────────────────────────────────────\n\nfunction CommentCard({\n\tcomment,\n\tcurrentUserId,\n\tapiBaseURL,\n\tapiBasePath,\n\tresourceId,\n\tresourceType,\n\theaders,\n\tcomponents,\n\tloc,\n\tinfiniteKey,\n\tonReplyClick,\n\tallowPosting,\n\tallowEditing,\n}: {\n\tcomment: SerializedComment;\n\tcurrentUserId?: string;\n\tapiBaseURL: string;\n\tapiBasePath: string;\n\tresourceId: string;\n\tresourceType: string;\n\theaders?: HeadersInit;\n\tcomponents?: CommentComponents;\n\tloc: CommentsLocalization;\n\t/** Infinite thread query key — pass for top-level comments so like optimistic\n\t *  updates target the correct InfiniteData cache entry. */\n\tinfiniteKey?: readonly unknown[];\n\tonReplyClick: (parentId: string) => void;\n\tallowPosting: boolean;\n\tallowEditing: boolean;\n}) {\n\tconst [isEditing, setIsEditing] = useState(false);\n\tconst Renderer = components?.Renderer ?? DEFAULT_RENDERER;\n\n\tconst config = { apiBaseURL, apiBasePath, headers };\n\n\tconst updateMutation = useUpdateComment(config);\n\tconst deleteMutation = useDeleteComment(config);\n\tconst toggleLikeMutation = useToggleLike(config, {\n\t\tresourceId,\n\t\tresourceType,\n\t\tparentId: comment.parentId,\n\t\tcurrentUserId,\n\t\tinfiniteKey,\n\t});\n\n\tconst isOwn = currentUserId && comment.authorId === currentUserId;\n\tconst isPending = comment.status === \"pending\";\n\tconst isApproved = comment.status === \"approved\";\n\n\tconst handleEdit = async (body: string) => {\n\t\tawait updateMutation.mutateAsync({ id: comment.id, body });\n\t\tsetIsEditing(false);\n\t};\n\n\tconst handleDelete = async () => {\n\t\tif (!window.confirm(loc.COMMENTS_DELETE_CONFIRM)) return;\n\t\tawait deleteMutation.mutateAsync(comment.id);\n\t};\n\n\tconst handleLike = () => {\n\t\tif (!currentUserId) return;\n\t\ttoggleLikeMutation.mutate({\n\t\t\tcommentId: comment.id,\n\t\t\tauthorId: currentUserId,\n\t\t});\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"flex gap-3 py-3\"\n\t\t\tdata-testid=\"comment-card\"\n\t\t\tdata-comment-id={comment.id}\n\t\t>\n\t\t\t<Avatar className=\"h-8 w-8 shrink-0 mt-0.5\">\n\t\t\t\t{comment.resolvedAvatarUrl && (\n\t\t\t\t\t<AvatarImage\n\t\t\t\t\t\tsrc={comment.resolvedAvatarUrl}\n\t\t\t\t\t\talt={comment.resolvedAuthorName}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<AvatarFallback className=\"text-xs\">\n\t\t\t\t\t{getInitials(comment.resolvedAuthorName)}\n\t\t\t\t</AvatarFallback>\n\t\t\t</Avatar>\n\n\t\t\t<div className=\"flex-1 min-w-0\">\n\t\t\t\t<div className=\"flex flex-wrap items-center gap-2 mb-1\">\n\t\t\t\t\t<span className=\"text-sm font-medium\">\n\t\t\t\t\t\t{comment.resolvedAuthorName}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span className=\"text-xs text-muted-foreground\">\n\t\t\t\t\t\t{formatDistanceToNow(new Date(comment.createdAt), {\n\t\t\t\t\t\t\taddSuffix: true,\n\t\t\t\t\t\t})}\n\t\t\t\t\t</span>\n\t\t\t\t\t{comment.editedAt && (\n\t\t\t\t\t\t<span className=\"text-xs text-muted-foreground italic\">\n\t\t\t\t\t\t\t{loc.COMMENTS_EDITED_BADGE}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t\t{isPending && isOwn && (\n\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tclassName=\"text-xs\"\n\t\t\t\t\t\t\tdata-testid=\"pending-badge\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{loc.COMMENTS_PENDING_BADGE}\n\t\t\t\t\t\t</Badge>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{isEditing ? (\n\t\t\t\t\t<CommentForm\n\t\t\t\t\t\tauthorId={currentUserId ?? \"\"}\n\t\t\t\t\t\tinitialBody={comment.body}\n\t\t\t\t\t\tsubmitLabel={loc.COMMENTS_SAVE_EDIT}\n\t\t\t\t\t\tInputComponent={components?.Input}\n\t\t\t\t\t\tlocalization={loc}\n\t\t\t\t\t\tonSubmit={handleEdit}\n\t\t\t\t\t\tonCancel={() => setIsEditing(false)}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<Renderer body={comment.body} />\n\t\t\t\t)}\n\n\t\t\t\t{!isEditing && (\n\t\t\t\t\t<div className=\"flex items-center gap-1 mt-2\">\n\t\t\t\t\t\t{currentUserId && isApproved && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\tclassName=\"h-7 px-2 text-xs gap-1\"\n\t\t\t\t\t\t\t\tonClick={handleLike}\n\t\t\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\t\t\tcomment.isLikedByCurrentUser\n\t\t\t\t\t\t\t\t\t\t? loc.COMMENTS_UNLIKE_ARIA\n\t\t\t\t\t\t\t\t\t\t: loc.COMMENTS_LIKE_ARIA\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tdata-testid=\"like-button\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Heart\n\t\t\t\t\t\t\t\t\tclassName={`h-3.5 w-3.5 ${comment.isLikedByCurrentUser ? \"fill-current text-red-500\" : \"\"}`}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{comment.likes > 0 && (\n\t\t\t\t\t\t\t\t\t<span data-testid=\"like-count\">{comment.likes}</span>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{allowPosting &&\n\t\t\t\t\t\t\tcurrentUserId &&\n\t\t\t\t\t\t\t!comment.parentId &&\n\t\t\t\t\t\t\tisApproved && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\tclassName=\"h-7 px-2 text-xs\"\n\t\t\t\t\t\t\t\t\tonClick={() => onReplyClick(comment.id)}\n\t\t\t\t\t\t\t\t\tdata-testid=\"reply-button\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<MessageSquare className=\"h-3.5 w-3.5 mr-1\" />\n\t\t\t\t\t\t\t\t\t{loc.COMMENTS_REPLY_BUTTON}\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{isOwn && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{allowEditing && isApproved && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"h-7 px-2 text-xs\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => setIsEditing(true)}\n\t\t\t\t\t\t\t\t\t\tdata-testid=\"edit-button\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Pencil className=\"h-3.5 w-3.5 mr-1\" />\n\t\t\t\t\t\t\t\t\t\t{loc.COMMENTS_EDIT_BUTTON}\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\tclassName=\"h-7 px-2 text-xs text-destructive hover:text-destructive\"\n\t\t\t\t\t\t\t\t\tonClick={handleDelete}\n\t\t\t\t\t\t\t\t\tdisabled={deleteMutation.isPending}\n\t\t\t\t\t\t\t\t\tdata-testid=\"delete-button\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<X className=\"h-3.5 w-3.5 mr-1\" />\n\t\t\t\t\t\t\t\t\t{loc.COMMENTS_DELETE_BUTTON}\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\n// ─── Thread Inner (handles data) ──────────────────────────────────────────────\n\nconst DEFAULT_PAGE_SIZE = 100;\nconst REPLIES_PAGE_SIZE = 20;\nconst OPTIMISTIC_ID_PREFIX = \"optimistic-\";\n\nfunction CommentThreadInner({\n\tresourceId,\n\tresourceType,\n\tapiBaseURL,\n\tapiBasePath,\n\tcurrentUserId,\n\tloginHref,\n\theaders,\n\tcomponents,\n\tlocalization: localizationProp,\n\tpageSize: pageSizeProp,\n\tallowPosting: allowPostingProp,\n\tallowEditing: allowEditingProp,\n}: CommentThreadProps) {\n\tconst overrides = usePluginOverrides<\n\t\tCommentsPluginOverrides,\n\t\tPartial<CommentsPluginOverrides>\n\t>(\"comments\", {});\n\tconst pageSize =\n\t\tpageSizeProp ?? overrides.defaultCommentPageSize ?? DEFAULT_PAGE_SIZE;\n\tconst allowPosting = allowPostingProp ?? overrides.allowPosting ?? true;\n\tconst allowEditing = allowEditingProp ?? overrides.allowEditing ?? true;\n\tconst loc = { ...COMMENTS_LOCALIZATION, ...localizationProp };\n\tconst [replyingTo, setReplyingTo] = useState<string | null>(null);\n\tconst [expandedReplies, setExpandedReplies] = useState<Set<string>>(\n\t\tnew Set(),\n\t);\n\tconst [replyOffsets, setReplyOffsets] = useState<Record<string, number>>({});\n\n\tconst config = { apiBaseURL, apiBasePath, headers };\n\n\tconst {\n\t\tcomments,\n\t\ttotal,\n\t\tisLoading,\n\t\tloadMore,\n\t\thasMore,\n\t\tisLoadingMore,\n\t\tqueryKey: threadQueryKey,\n\t} = useInfiniteComments(config, {\n\t\tresourceId,\n\t\tresourceType,\n\t\tstatus: \"approved\",\n\t\tparentId: null,\n\t\tcurrentUserId,\n\t\tpageSize,\n\t});\n\n\tconst postMutation = usePostComment(config, {\n\t\tresourceId,\n\t\tresourceType,\n\t\tcurrentUserId,\n\t\tinfiniteKey: threadQueryKey,\n\t\tpageSize,\n\t});\n\n\tconst handlePost = async (body: string) => {\n\t\tif (!currentUserId) return;\n\t\tawait postMutation.mutateAsync({\n\t\t\tbody,\n\t\t\tparentId: null,\n\t\t});\n\t};\n\n\tconst handleReply = async (body: string, parentId: string) => {\n\t\tif (!currentUserId) return;\n\t\tawait postMutation.mutateAsync({\n\t\t\tbody,\n\t\t\tparentId,\n\t\t\tlimit: REPLIES_PAGE_SIZE,\n\t\t\toffset: replyOffsets[parentId] ?? 0,\n\t\t});\n\t\tsetReplyingTo(null);\n\t\tsetExpandedReplies((prev) => new Set(prev).add(parentId));\n\t};\n\n\treturn (\n\t\t<div className=\"space-y-1\" data-testid=\"comment-thread\">\n\t\t\t<div className=\"flex items-center gap-2 mb-4\">\n\t\t\t\t<MessageSquare className=\"h-5 w-5 text-muted-foreground\" />\n\t\t\t\t<h3 className=\"font-semibold text-sm\">\n\t\t\t\t\t{total === 0 ? loc.COMMENTS_TITLE : `${total} ${loc.COMMENTS_TITLE}`}\n\t\t\t\t</h3>\n\t\t\t</div>\n\n\t\t\t{isLoading && (\n\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t{[1, 2].map((i) => (\n\t\t\t\t\t\t<div key={i} className=\"flex gap-3 py-3 animate-pulse\">\n\t\t\t\t\t\t\t<div className=\"h-8 w-8 rounded-full bg-muted shrink-0\" />\n\t\t\t\t\t\t\t<div className=\"flex-1 space-y-2\">\n\t\t\t\t\t\t\t\t<div className=\"h-3 w-24 rounded bg-muted\" />\n\t\t\t\t\t\t\t\t<div className=\"h-3 w-full rounded bg-muted\" />\n\t\t\t\t\t\t\t\t<div className=\"h-3 w-3/4 rounded bg-muted\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{!isLoading && comments.length > 0 && (\n\t\t\t\t<div className=\"divide-y divide-border\">\n\t\t\t\t\t{comments.map((comment) => (\n\t\t\t\t\t\t<div key={comment.id}>\n\t\t\t\t\t\t\t<CommentCard\n\t\t\t\t\t\t\t\tcomment={comment}\n\t\t\t\t\t\t\t\tcurrentUserId={currentUserId}\n\t\t\t\t\t\t\t\tapiBaseURL={apiBaseURL}\n\t\t\t\t\t\t\t\tapiBasePath={apiBasePath}\n\t\t\t\t\t\t\t\tresourceId={resourceId}\n\t\t\t\t\t\t\t\tresourceType={resourceType}\n\t\t\t\t\t\t\t\theaders={headers}\n\t\t\t\t\t\t\t\tcomponents={components}\n\t\t\t\t\t\t\t\tloc={loc}\n\t\t\t\t\t\t\t\tinfiniteKey={threadQueryKey}\n\t\t\t\t\t\t\t\tonReplyClick={(parentId) => {\n\t\t\t\t\t\t\t\t\tsetReplyingTo(replyingTo === parentId ? null : parentId);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tallowPosting={allowPosting}\n\t\t\t\t\t\t\t\tallowEditing={allowEditing}\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t{/* Replies */}\n\t\t\t\t\t\t\t<RepliesSection\n\t\t\t\t\t\t\t\tparentId={comment.id}\n\t\t\t\t\t\t\t\tresourceId={resourceId}\n\t\t\t\t\t\t\t\tresourceType={resourceType}\n\t\t\t\t\t\t\t\tapiBaseURL={apiBaseURL}\n\t\t\t\t\t\t\t\tapiBasePath={apiBasePath}\n\t\t\t\t\t\t\t\tcurrentUserId={currentUserId}\n\t\t\t\t\t\t\t\theaders={headers}\n\t\t\t\t\t\t\t\tcomponents={components}\n\t\t\t\t\t\t\t\tloc={loc}\n\t\t\t\t\t\t\t\texpanded={expandedReplies.has(comment.id)}\n\t\t\t\t\t\t\t\treplyCount={comment.replyCount}\n\t\t\t\t\t\t\t\tonToggle={() => {\n\t\t\t\t\t\t\t\t\tconst isExpanded = expandedReplies.has(comment.id);\n\t\t\t\t\t\t\t\t\tif (!isExpanded) {\n\t\t\t\t\t\t\t\t\t\tsetReplyOffsets((prev) => {\n\t\t\t\t\t\t\t\t\t\t\tif ((prev[comment.id] ?? 0) === 0) return prev;\n\t\t\t\t\t\t\t\t\t\t\treturn { ...prev, [comment.id]: 0 };\n\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tsetExpandedReplies((prev) => {\n\t\t\t\t\t\t\t\t\t\tconst next = new Set(prev);\n\t\t\t\t\t\t\t\t\t\tnext.has(comment.id)\n\t\t\t\t\t\t\t\t\t\t\t? next.delete(comment.id)\n\t\t\t\t\t\t\t\t\t\t\t: next.add(comment.id);\n\t\t\t\t\t\t\t\t\t\treturn next;\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonOffsetChange={(offset) => {\n\t\t\t\t\t\t\t\t\tsetReplyOffsets((prev) => {\n\t\t\t\t\t\t\t\t\t\tif (prev[comment.id] === offset) return prev;\n\t\t\t\t\t\t\t\t\t\treturn { ...prev, [comment.id]: offset };\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tallowEditing={allowEditing}\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t{allowPosting && replyingTo === comment.id && currentUserId && (\n\t\t\t\t\t\t\t\t<div className=\"pl-11 pb-3\">\n\t\t\t\t\t\t\t\t\t<CommentForm\n\t\t\t\t\t\t\t\t\t\tauthorId={currentUserId}\n\t\t\t\t\t\t\t\t\t\tparentId={comment.id}\n\t\t\t\t\t\t\t\t\t\tsubmitLabel={loc.COMMENTS_FORM_POST_REPLY}\n\t\t\t\t\t\t\t\t\t\tInputComponent={components?.Input}\n\t\t\t\t\t\t\t\t\t\tlocalization={loc}\n\t\t\t\t\t\t\t\t\t\tonSubmit={(body) => handleReply(body, comment.id)}\n\t\t\t\t\t\t\t\t\t\tonCancel={() => setReplyingTo(null)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{!isLoading && comments.length === 0 && (\n\t\t\t\t<p className=\"text-sm text-muted-foreground py-4 text-center\">\n\t\t\t\t\t{loc.COMMENTS_EMPTY}\n\t\t\t\t</p>\n\t\t\t)}\n\n\t\t\t{hasMore && (\n\t\t\t\t<div className=\"flex justify-center pt-2\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\tonClick={() => loadMore()}\n\t\t\t\t\t\tdisabled={isLoadingMore}\n\t\t\t\t\t\tdata-testid=\"load-more-comments\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{isLoadingMore ? loc.COMMENTS_LOADING_MORE : loc.COMMENTS_LOAD_MORE}\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{allowPosting && (\n\t\t\t\t<>\n\t\t\t\t\t<Separator className=\"my-4\" />\n\n\t\t\t\t\t{currentUserId ? (\n\t\t\t\t\t\t<div data-testid=\"comment-form-wrapper\">\n\t\t\t\t\t\t\t<CommentForm\n\t\t\t\t\t\t\t\tauthorId={currentUserId}\n\t\t\t\t\t\t\t\tsubmitLabel={loc.COMMENTS_FORM_POST_COMMENT}\n\t\t\t\t\t\t\t\tInputComponent={components?.Input}\n\t\t\t\t\t\t\t\tlocalization={loc}\n\t\t\t\t\t\t\t\tonSubmit={handlePost}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"flex flex-col items-center gap-3 py-6 text-center border rounded-lg bg-muted/30\"\n\t\t\t\t\t\t\tdata-testid=\"login-prompt\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<LogIn className=\"h-6 w-6 text-muted-foreground\" />\n\t\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t{loc.COMMENTS_LOGIN_PROMPT}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t{loginHref && (\n\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\thref={loginHref}\n\t\t\t\t\t\t\t\t\tclassName=\"inline-flex items-center gap-1 text-sm font-medium text-primary underline underline-offset-4\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"login-link\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{loc.COMMENTS_LOGIN_LINK}\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\n// ─── Replies Section ───────────────────────────────────────────────────────────\n\nfunction RepliesSection({\n\tparentId,\n\tresourceId,\n\tresourceType,\n\tapiBaseURL,\n\tapiBasePath,\n\tcurrentUserId,\n\theaders,\n\tcomponents,\n\tloc,\n\texpanded,\n\treplyCount,\n\tonToggle,\n\tonOffsetChange,\n\tallowEditing,\n}: {\n\tparentId: string;\n\tresourceId: string;\n\tresourceType: string;\n\tapiBaseURL: string;\n\tapiBasePath: string;\n\tcurrentUserId?: string;\n\theaders?: HeadersInit;\n\tcomponents?: CommentComponents;\n\tloc: CommentsLocalization;\n\texpanded: boolean;\n\t/** Pre-computed from the parent comment — avoids an extra fetch on mount. */\n\treplyCount: number;\n\tonToggle: () => void;\n\tonOffsetChange: (offset: number) => void;\n\tallowEditing: boolean;\n}) {\n\tconst config = { apiBaseURL, apiBasePath, headers };\n\tconst [replyOffset, setReplyOffset] = useState(0);\n\tconst [loadedReplies, setLoadedReplies] = useState<SerializedComment[]>([]);\n\t// Only fetch reply bodies once the section is expanded.\n\tconst {\n\t\tcomments: repliesPage,\n\t\ttotal: repliesTotal,\n\t\tisFetching: isFetchingReplies,\n\t} = useComments(\n\t\tconfig,\n\t\t{\n\t\t\tresourceId,\n\t\t\tresourceType,\n\t\t\tparentId,\n\t\t\tstatus: \"approved\",\n\t\t\tcurrentUserId,\n\t\t\tlimit: REPLIES_PAGE_SIZE,\n\t\t\toffset: replyOffset,\n\t\t},\n\t\t{ enabled: expanded },\n\t);\n\n\tuseEffect(() => {\n\t\tif (expanded) {\n\t\t\tsetReplyOffset(0);\n\t\t\tsetLoadedReplies([]);\n\t\t}\n\t}, [expanded, parentId]);\n\n\tuseEffect(() => {\n\t\tonOffsetChange(replyOffset);\n\t}, [onOffsetChange, replyOffset]);\n\n\tuseEffect(() => {\n\t\tif (!expanded) return;\n\t\tsetLoadedReplies((prev) => {\n\t\t\tconst byId = new Map(prev.map((item) => [item.id, item]));\n\t\t\tfor (const reply of repliesPage) {\n\t\t\t\tbyId.set(reply.id, reply);\n\t\t\t}\n\n\t\t\t// Reconcile optimistic replies once the real server reply arrives with\n\t\t\t// a different id. Without this, both entries can persist in local state\n\t\t\t// until the section is collapsed and re-opened.\n\t\t\tconst currentPageIds = new Set(repliesPage.map((reply) => reply.id));\n\t\t\tconst currentPageRealReplies = repliesPage.filter(\n\t\t\t\t(reply) => !reply.id.startsWith(OPTIMISTIC_ID_PREFIX),\n\t\t\t);\n\n\t\t\treturn Array.from(byId.values()).filter((reply) => {\n\t\t\t\tif (!reply.id.startsWith(OPTIMISTIC_ID_PREFIX)) return true;\n\t\t\t\t// Keep optimistic items still present in the current cache page.\n\t\t\t\tif (currentPageIds.has(reply.id)) return true;\n\t\t\t\t// Drop stale optimistic rows that have been replaced by a real reply.\n\t\t\t\treturn !currentPageRealReplies.some(\n\t\t\t\t\t(realReply) =>\n\t\t\t\t\t\trealReply.parentId === reply.parentId &&\n\t\t\t\t\t\trealReply.authorId === reply.authorId &&\n\t\t\t\t\t\trealReply.body === reply.body,\n\t\t\t\t);\n\t\t\t});\n\t\t});\n\t}, [expanded, repliesPage]);\n\n\t// Hide when there are no known replies — but keep rendered when already\n\t// expanded so a freshly-posted first reply (which increments replyCount\n\t// only after the server responds) stays visible in the same session.\n\tif (replyCount === 0 && !expanded) return null;\n\n\t// Prefer the fetched count (accurate after optimistic inserts); fall back to\n\t// the server-provided replyCount before the fetch completes.\n\tconst displayCount = expanded\n\t\t? loadedReplies.length || replyCount\n\t\t: replyCount;\n\tconst effectiveReplyTotal = repliesTotal || replyCount;\n\tconst hasMoreReplies = loadedReplies.length < effectiveReplyTotal;\n\n\treturn (\n\t\t<div className=\"pl-11\">\n\t\t\t{/* Toggle button — always at the top so collapse is reachable without scrolling */}\n\t\t\t<Button\n\t\t\t\tvariant=\"ghost\"\n\t\t\t\tsize=\"sm\"\n\t\t\t\tclassName=\"h-7 px-2 text-xs mb-1\"\n\t\t\t\tonClick={onToggle}\n\t\t\t\tdata-testid={expanded ? \"hide-replies-button\" : \"show-replies-button\"}\n\t\t\t>\n\t\t\t\t{expanded ? (\n\t\t\t\t\t<ChevronUp className=\"h-3 w-3 mr-1\" />\n\t\t\t\t) : (\n\t\t\t\t\t<ChevronDown className=\"h-3 w-3 mr-1\" />\n\t\t\t\t)}\n\t\t\t\t{expanded\n\t\t\t\t\t? loc.COMMENTS_HIDE_REPLIES\n\t\t\t\t\t: `${displayCount} ${displayCount === 1 ? loc.COMMENTS_REPLIES_SINGULAR : loc.COMMENTS_REPLIES_PLURAL}`}\n\t\t\t</Button>\n\t\t\t{expanded && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"border-l-2 border-border pl-3 space-y-0\"\n\t\t\t\t\tdata-testid=\"replies-list\"\n\t\t\t\t>\n\t\t\t\t\t{loadedReplies.map((reply) => (\n\t\t\t\t\t\t<CommentCard\n\t\t\t\t\t\t\tkey={reply.id}\n\t\t\t\t\t\t\tcomment={reply}\n\t\t\t\t\t\t\tcurrentUserId={currentUserId}\n\t\t\t\t\t\t\tapiBaseURL={apiBaseURL}\n\t\t\t\t\t\t\tapiBasePath={apiBasePath}\n\t\t\t\t\t\t\tresourceId={resourceId}\n\t\t\t\t\t\t\tresourceType={resourceType}\n\t\t\t\t\t\t\theaders={headers}\n\t\t\t\t\t\t\tcomponents={components}\n\t\t\t\t\t\t\tloc={loc}\n\t\t\t\t\t\t\tonReplyClick={() => {}} // No nested replies in v1\n\t\t\t\t\t\t\tallowPosting={false}\n\t\t\t\t\t\t\tallowEditing={allowEditing}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t\t{hasMoreReplies && (\n\t\t\t\t\t\t<div className=\"py-2\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\tclassName=\"h-7 px-2 text-xs\"\n\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\tsetReplyOffset((prev) => prev + REPLIES_PAGE_SIZE)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tdisabled={isFetchingReplies}\n\t\t\t\t\t\t\t\tdata-testid=\"load-more-replies\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{isFetchingReplies\n\t\t\t\t\t\t\t\t\t? loc.COMMENTS_LOADING_MORE\n\t\t\t\t\t\t\t\t\t: loc.COMMENTS_LOAD_MORE}\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\n// ─── Public export: lazy-mounts on scroll into view ───────────────────────────\n\n/**\n * Embeddable threaded comment section.\n *\n * Lazy-mounts when the component scrolls into the viewport (via WhenVisible).\n * Requires `currentUserId` to allow posting; shows a \"Please login\" prompt otherwise.\n *\n * @example\n * ```tsx\n * <CommentThread\n *   resourceId={post.slug}\n *   resourceType=\"blog-post\"\n *   apiBaseURL=\"https://example.com\"\n *   apiBasePath=\"/api/data\"\n *   currentUserId={session?.userId}\n *   loginHref=\"/login\"\n * />\n * ```\n */\nfunction CommentThreadSkeleton() {\n\treturn (\n\t\t<div className=\"space-y-1\">\n\t\t\t{/* Header */}\n\t\t\t<div className=\"flex items-center gap-2 mb-4\">\n\t\t\t\t<div className=\"h-5 w-5 rounded bg-muted animate-pulse\" />\n\t\t\t\t<div className=\"h-4 w-24 rounded bg-muted animate-pulse\" />\n\t\t\t</div>\n\n\t\t\t{/* Comment rows */}\n\t\t\t{[1, 2, 3].map((i) => (\n\t\t\t\t<div key={i} className=\"flex gap-3 py-3\">\n\t\t\t\t\t<div className=\"h-8 w-8 rounded-full bg-muted shrink-0 mt-0.5 animate-pulse\" />\n\t\t\t\t\t<div className=\"flex-1 space-y-2\">\n\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t<div className=\"h-3 w-20 rounded bg-muted animate-pulse\" />\n\t\t\t\t\t\t\t<div className=\"h-3 w-14 rounded bg-muted animate-pulse\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"h-3 w-full rounded bg-muted animate-pulse\" />\n\t\t\t\t\t\t<div className=\"h-3 w-4/5 rounded bg-muted animate-pulse\" />\n\t\t\t\t\t\t<div className=\"flex gap-1 mt-1\">\n\t\t\t\t\t\t\t<div className=\"h-7 w-12 rounded bg-muted animate-pulse\" />\n\t\t\t\t\t\t\t<div className=\"h-7 w-14 rounded bg-muted animate-pulse\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t))}\n\n\t\t\t{/* Separator */}\n\t\t\t<div className=\"h-px w-full bg-muted my-4\" />\n\n\t\t\t{/* Textarea placeholder */}\n\t\t\t<div className=\"space-y-2\">\n\t\t\t\t<div className=\"h-20 w-full rounded-md border bg-muted animate-pulse\" />\n\t\t\t\t<div className=\"flex justify-end\">\n\t\t\t\t\t<div className=\"h-9 w-28 rounded-md bg-muted animate-pulse\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport function CommentThread(props: CommentThreadProps) {\n\treturn (\n\t\t<div id=\"comments\" className={props.className}>\n\t\t\t<WhenVisible fallback={<CommentThreadSkeleton />} rootMargin=\"300px\">\n\t\t\t\t<CommentThreadInner {...props} />\n\t\t\t</WhenVisible>\n\t\t</div>\n\t);\n}\n",
+      "content": "\"use client\";\n\nimport { useEffect, useState, type ComponentType } from \"react\";\nimport { WhenVisible } from \"@/components/ui/when-visible\";\nimport {\n\tAvatar,\n\tAvatarFallback,\n\tAvatarImage,\n} from \"@/components/ui/avatar\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Separator } from \"@/components/ui/separator\";\nimport {\n\tHeart,\n\tMessageSquare,\n\tPencil,\n\tX,\n\tLogIn,\n\tChevronDown,\n\tChevronUp,\n} from \"lucide-react\";\nimport { formatDistanceToNow } from \"date-fns\";\nimport type { SerializedComment } from \"../../types\";\nimport { getInitials } from \"../utils\";\nimport { CommentForm } from \"./comment-form\";\nimport {\n\tuseComments,\n\tuseInfiniteComments,\n\tusePostComment,\n\tuseUpdateComment,\n\tuseDeleteComment,\n\tuseToggleLike,\n} from \"@btst/stack/plugins/comments/client/hooks\";\nimport {\n\tCOMMENTS_LOCALIZATION,\n\ttype CommentsLocalization,\n} from \"../localization\";\nimport { usePluginOverrides } from \"@btst/stack/context\";\nimport type { CommentsPluginOverrides } from \"../overrides\";\n\n/** Custom input component props */\nexport interface CommentInputProps {\n\tvalue: string;\n\tonChange: (value: string) => void;\n\tdisabled?: boolean;\n\tplaceholder?: string;\n}\n\n/** Custom renderer component props */\nexport interface CommentRendererProps {\n\tbody: string;\n}\n\n/** Override slot for custom input + renderer */\nexport interface CommentComponents {\n\tInput?: ComponentType<CommentInputProps>;\n\tRenderer?: ComponentType<CommentRendererProps>;\n}\n\nexport interface CommentThreadProps {\n\t/** The resource this thread is attached to (e.g. post slug, task ID) */\n\tresourceId: string;\n\t/** Discriminates resources across plugins (e.g. \"blog-post\", \"kanban-task\") */\n\tresourceType: string;\n\t/** Base URL for API calls */\n\tapiBaseURL: string;\n\t/** Path where the API is mounted */\n\tapiBasePath: string;\n\t/** Currently authenticated user ID. Omit for read-only / unauthenticated. */\n\tcurrentUserId?: string;\n\t/**\n\t * URL to redirect unauthenticated users to.\n\t * When provided and currentUserId is absent, shows a \"Please login to comment\" prompt.\n\t */\n\tloginHref?: string;\n\t/** Optional HTTP headers for API calls (e.g. forwarding cookies) */\n\theaders?: HeadersInit;\n\t/** Swap in custom Input / Renderer components */\n\tcomponents?: CommentComponents;\n\t/** Optional className applied to the root wrapper */\n\tclassName?: string;\n\t/** Localization strings — defaults to English */\n\tlocalization?: Partial<CommentsLocalization>;\n\t/**\n\t * Number of top-level comments to load per page.\n\t * Clicking \"Load more\" fetches the next page. Default: 10.\n\t */\n\tpageSize?: number;\n\t/**\n\t * When false, the comment form and reply buttons are hidden.\n\t * Overrides the global `allowPosting` from `CommentsPluginOverrides`.\n\t * Defaults to true.\n\t */\n\tallowPosting?: boolean;\n\t/**\n\t * When false, the edit button is hidden on comment cards.\n\t * Overrides the global `allowEditing` from `CommentsPluginOverrides`.\n\t * Defaults to true.\n\t */\n\tallowEditing?: boolean;\n\t/**\n\t * Sort direction for top-level comments by `createdAt`.\n\t * - `\"desc\"` (default): newest first.\n\t * - `\"asc\"`: oldest first.\n\t *\n\t * Replies inside each thread always render chronologically (oldest → newest)\n\t * and are unaffected by this prop.\n\t *\n\t * Overrides the global `defaultCommentSort` from `CommentsPluginOverrides`.\n\t */\n\tsort?: \"asc\" | \"desc\";\n}\n\nconst DEFAULT_RENDERER: ComponentType<CommentRendererProps> = ({ body }) => (\n\t<p className=\"text-sm whitespace-pre-wrap wrap-break-word\">{body}</p>\n);\n\n// ─── Comment Card ─────────────────────────────────────────────────────────────\n\nfunction CommentCard({\n\tcomment,\n\tcurrentUserId,\n\tapiBaseURL,\n\tapiBasePath,\n\tresourceId,\n\tresourceType,\n\theaders,\n\tcomponents,\n\tloc,\n\tinfiniteKey,\n\tonReplyClick,\n\tallowPosting,\n\tallowEditing,\n}: {\n\tcomment: SerializedComment;\n\tcurrentUserId?: string;\n\tapiBaseURL: string;\n\tapiBasePath: string;\n\tresourceId: string;\n\tresourceType: string;\n\theaders?: HeadersInit;\n\tcomponents?: CommentComponents;\n\tloc: CommentsLocalization;\n\t/** Infinite thread query key — pass for top-level comments so like optimistic\n\t *  updates target the correct InfiniteData cache entry. */\n\tinfiniteKey?: readonly unknown[];\n\tonReplyClick: (parentId: string) => void;\n\tallowPosting: boolean;\n\tallowEditing: boolean;\n}) {\n\tconst [isEditing, setIsEditing] = useState(false);\n\tconst Renderer = components?.Renderer ?? DEFAULT_RENDERER;\n\n\tconst config = { apiBaseURL, apiBasePath, headers };\n\n\tconst updateMutation = useUpdateComment(config);\n\tconst deleteMutation = useDeleteComment(config);\n\tconst toggleLikeMutation = useToggleLike(config, {\n\t\tresourceId,\n\t\tresourceType,\n\t\tparentId: comment.parentId,\n\t\tcurrentUserId,\n\t\tinfiniteKey,\n\t});\n\n\tconst isOwn = currentUserId && comment.authorId === currentUserId;\n\tconst isPending = comment.status === \"pending\";\n\tconst isApproved = comment.status === \"approved\";\n\n\tconst handleEdit = async (body: string) => {\n\t\tawait updateMutation.mutateAsync({ id: comment.id, body });\n\t\tsetIsEditing(false);\n\t};\n\n\tconst handleDelete = async () => {\n\t\tif (!window.confirm(loc.COMMENTS_DELETE_CONFIRM)) return;\n\t\tawait deleteMutation.mutateAsync(comment.id);\n\t};\n\n\tconst handleLike = () => {\n\t\tif (!currentUserId) return;\n\t\ttoggleLikeMutation.mutate({\n\t\t\tcommentId: comment.id,\n\t\t\tauthorId: currentUserId,\n\t\t});\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"flex gap-3 py-3\"\n\t\t\tdata-testid=\"comment-card\"\n\t\t\tdata-comment-id={comment.id}\n\t\t>\n\t\t\t<Avatar className=\"h-8 w-8 shrink-0 mt-0.5\">\n\t\t\t\t{comment.resolvedAvatarUrl && (\n\t\t\t\t\t<AvatarImage\n\t\t\t\t\t\tsrc={comment.resolvedAvatarUrl}\n\t\t\t\t\t\talt={comment.resolvedAuthorName}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<AvatarFallback className=\"text-xs\">\n\t\t\t\t\t{getInitials(comment.resolvedAuthorName)}\n\t\t\t\t</AvatarFallback>\n\t\t\t</Avatar>\n\n\t\t\t<div className=\"flex-1 min-w-0\">\n\t\t\t\t<div className=\"flex flex-wrap items-center gap-2 mb-1\">\n\t\t\t\t\t<span className=\"text-sm font-medium\">\n\t\t\t\t\t\t{comment.resolvedAuthorName}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span className=\"text-xs text-muted-foreground\">\n\t\t\t\t\t\t{formatDistanceToNow(new Date(comment.createdAt), {\n\t\t\t\t\t\t\taddSuffix: true,\n\t\t\t\t\t\t})}\n\t\t\t\t\t</span>\n\t\t\t\t\t{comment.editedAt && (\n\t\t\t\t\t\t<span className=\"text-xs text-muted-foreground italic\">\n\t\t\t\t\t\t\t{loc.COMMENTS_EDITED_BADGE}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t\t{isPending && isOwn && (\n\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tclassName=\"text-xs\"\n\t\t\t\t\t\t\tdata-testid=\"pending-badge\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{loc.COMMENTS_PENDING_BADGE}\n\t\t\t\t\t\t</Badge>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{isEditing ? (\n\t\t\t\t\t<CommentForm\n\t\t\t\t\t\tauthorId={currentUserId ?? \"\"}\n\t\t\t\t\t\tinitialBody={comment.body}\n\t\t\t\t\t\tsubmitLabel={loc.COMMENTS_SAVE_EDIT}\n\t\t\t\t\t\tInputComponent={components?.Input}\n\t\t\t\t\t\tlocalization={loc}\n\t\t\t\t\t\tonSubmit={handleEdit}\n\t\t\t\t\t\tonCancel={() => setIsEditing(false)}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<Renderer body={comment.body} />\n\t\t\t\t)}\n\n\t\t\t\t{!isEditing && (\n\t\t\t\t\t<div className=\"flex items-center gap-1 mt-2\">\n\t\t\t\t\t\t{currentUserId && isApproved && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\tclassName=\"h-7 px-2 text-xs gap-1\"\n\t\t\t\t\t\t\t\tonClick={handleLike}\n\t\t\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\t\t\tcomment.isLikedByCurrentUser\n\t\t\t\t\t\t\t\t\t\t? loc.COMMENTS_UNLIKE_ARIA\n\t\t\t\t\t\t\t\t\t\t: loc.COMMENTS_LIKE_ARIA\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tdata-testid=\"like-button\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Heart\n\t\t\t\t\t\t\t\t\tclassName={`h-3.5 w-3.5 ${comment.isLikedByCurrentUser ? \"fill-current text-red-500\" : \"\"}`}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{comment.likes > 0 && (\n\t\t\t\t\t\t\t\t\t<span data-testid=\"like-count\">{comment.likes}</span>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{allowPosting &&\n\t\t\t\t\t\t\tcurrentUserId &&\n\t\t\t\t\t\t\t!comment.parentId &&\n\t\t\t\t\t\t\tisApproved && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\tclassName=\"h-7 px-2 text-xs\"\n\t\t\t\t\t\t\t\t\tonClick={() => onReplyClick(comment.id)}\n\t\t\t\t\t\t\t\t\tdata-testid=\"reply-button\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<MessageSquare className=\"h-3.5 w-3.5 mr-1\" />\n\t\t\t\t\t\t\t\t\t{loc.COMMENTS_REPLY_BUTTON}\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{isOwn && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{allowEditing && isApproved && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"h-7 px-2 text-xs\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => setIsEditing(true)}\n\t\t\t\t\t\t\t\t\t\tdata-testid=\"edit-button\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Pencil className=\"h-3.5 w-3.5 mr-1\" />\n\t\t\t\t\t\t\t\t\t\t{loc.COMMENTS_EDIT_BUTTON}\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\tclassName=\"h-7 px-2 text-xs text-destructive hover:text-destructive\"\n\t\t\t\t\t\t\t\t\tonClick={handleDelete}\n\t\t\t\t\t\t\t\t\tdisabled={deleteMutation.isPending}\n\t\t\t\t\t\t\t\t\tdata-testid=\"delete-button\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<X className=\"h-3.5 w-3.5 mr-1\" />\n\t\t\t\t\t\t\t\t\t{loc.COMMENTS_DELETE_BUTTON}\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\n// ─── Thread Inner (handles data) ──────────────────────────────────────────────\n\nconst DEFAULT_PAGE_SIZE = 100;\nconst REPLIES_PAGE_SIZE = 20;\nconst OPTIMISTIC_ID_PREFIX = \"optimistic-\";\n\nfunction CommentThreadInner({\n\tresourceId,\n\tresourceType,\n\tapiBaseURL,\n\tapiBasePath,\n\tcurrentUserId,\n\tloginHref,\n\theaders,\n\tcomponents,\n\tlocalization: localizationProp,\n\tpageSize: pageSizeProp,\n\tallowPosting: allowPostingProp,\n\tallowEditing: allowEditingProp,\n\tsort: sortProp,\n}: CommentThreadProps) {\n\tconst overrides = usePluginOverrides<\n\t\tCommentsPluginOverrides,\n\t\tPartial<CommentsPluginOverrides>\n\t>(\"comments\", {});\n\tconst pageSize =\n\t\tpageSizeProp ?? overrides.defaultCommentPageSize ?? DEFAULT_PAGE_SIZE;\n\tconst allowPosting = allowPostingProp ?? overrides.allowPosting ?? true;\n\tconst allowEditing = allowEditingProp ?? overrides.allowEditing ?? true;\n\tconst sort = sortProp ?? overrides.defaultCommentSort ?? \"desc\";\n\tconst loc = { ...COMMENTS_LOCALIZATION, ...localizationProp };\n\tconst [replyingTo, setReplyingTo] = useState<string | null>(null);\n\tconst [expandedReplies, setExpandedReplies] = useState<Set<string>>(\n\t\tnew Set(),\n\t);\n\tconst [replyOffsets, setReplyOffsets] = useState<Record<string, number>>({});\n\n\tconst config = { apiBaseURL, apiBasePath, headers };\n\n\tconst {\n\t\tcomments,\n\t\ttotal,\n\t\tisLoading,\n\t\tloadMore,\n\t\thasMore,\n\t\tisLoadingMore,\n\t\tqueryKey: threadQueryKey,\n\t} = useInfiniteComments(config, {\n\t\tresourceId,\n\t\tresourceType,\n\t\tstatus: \"approved\",\n\t\tparentId: null,\n\t\tcurrentUserId,\n\t\tsort,\n\t\tpageSize,\n\t});\n\n\tconst postMutation = usePostComment(config, {\n\t\tresourceId,\n\t\tresourceType,\n\t\tcurrentUserId,\n\t\tinfiniteKey: threadQueryKey,\n\t\tpageSize,\n\t\tsort,\n\t});\n\n\tconst handlePost = async (body: string) => {\n\t\tif (!currentUserId) return;\n\t\tawait postMutation.mutateAsync({\n\t\t\tbody,\n\t\t\tparentId: null,\n\t\t});\n\t};\n\n\tconst handleReply = async (body: string, parentId: string) => {\n\t\tif (!currentUserId) return;\n\t\tawait postMutation.mutateAsync({\n\t\t\tbody,\n\t\t\tparentId,\n\t\t\tlimit: REPLIES_PAGE_SIZE,\n\t\t\toffset: replyOffsets[parentId] ?? 0,\n\t\t});\n\t\tsetReplyingTo(null);\n\t\tsetExpandedReplies((prev) => new Set(prev).add(parentId));\n\t};\n\n\treturn (\n\t\t<div className=\"space-y-1\" data-testid=\"comment-thread\">\n\t\t\t<div className=\"flex items-center gap-2 mb-4\">\n\t\t\t\t<MessageSquare className=\"h-5 w-5 text-muted-foreground\" />\n\t\t\t\t<h3 className=\"font-semibold text-sm\">\n\t\t\t\t\t{total === 0 ? loc.COMMENTS_TITLE : `${total} ${loc.COMMENTS_TITLE}`}\n\t\t\t\t</h3>\n\t\t\t</div>\n\n\t\t\t{isLoading && (\n\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t{[1, 2].map((i) => (\n\t\t\t\t\t\t<div key={i} className=\"flex gap-3 py-3 animate-pulse\">\n\t\t\t\t\t\t\t<div className=\"h-8 w-8 rounded-full bg-muted shrink-0\" />\n\t\t\t\t\t\t\t<div className=\"flex-1 space-y-2\">\n\t\t\t\t\t\t\t\t<div className=\"h-3 w-24 rounded bg-muted\" />\n\t\t\t\t\t\t\t\t<div className=\"h-3 w-full rounded bg-muted\" />\n\t\t\t\t\t\t\t\t<div className=\"h-3 w-3/4 rounded bg-muted\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{!isLoading && comments.length > 0 && (\n\t\t\t\t<div className=\"divide-y divide-border\">\n\t\t\t\t\t{comments.map((comment) => (\n\t\t\t\t\t\t<div key={comment.id}>\n\t\t\t\t\t\t\t<CommentCard\n\t\t\t\t\t\t\t\tcomment={comment}\n\t\t\t\t\t\t\t\tcurrentUserId={currentUserId}\n\t\t\t\t\t\t\t\tapiBaseURL={apiBaseURL}\n\t\t\t\t\t\t\t\tapiBasePath={apiBasePath}\n\t\t\t\t\t\t\t\tresourceId={resourceId}\n\t\t\t\t\t\t\t\tresourceType={resourceType}\n\t\t\t\t\t\t\t\theaders={headers}\n\t\t\t\t\t\t\t\tcomponents={components}\n\t\t\t\t\t\t\t\tloc={loc}\n\t\t\t\t\t\t\t\tinfiniteKey={threadQueryKey}\n\t\t\t\t\t\t\t\tonReplyClick={(parentId) => {\n\t\t\t\t\t\t\t\t\tsetReplyingTo(replyingTo === parentId ? null : parentId);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tallowPosting={allowPosting}\n\t\t\t\t\t\t\t\tallowEditing={allowEditing}\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t{/* Replies */}\n\t\t\t\t\t\t\t<RepliesSection\n\t\t\t\t\t\t\t\tparentId={comment.id}\n\t\t\t\t\t\t\t\tresourceId={resourceId}\n\t\t\t\t\t\t\t\tresourceType={resourceType}\n\t\t\t\t\t\t\t\tapiBaseURL={apiBaseURL}\n\t\t\t\t\t\t\t\tapiBasePath={apiBasePath}\n\t\t\t\t\t\t\t\tcurrentUserId={currentUserId}\n\t\t\t\t\t\t\t\theaders={headers}\n\t\t\t\t\t\t\t\tcomponents={components}\n\t\t\t\t\t\t\t\tloc={loc}\n\t\t\t\t\t\t\t\texpanded={expandedReplies.has(comment.id)}\n\t\t\t\t\t\t\t\treplyCount={comment.replyCount}\n\t\t\t\t\t\t\t\tonToggle={() => {\n\t\t\t\t\t\t\t\t\tconst isExpanded = expandedReplies.has(comment.id);\n\t\t\t\t\t\t\t\t\tif (!isExpanded) {\n\t\t\t\t\t\t\t\t\t\tsetReplyOffsets((prev) => {\n\t\t\t\t\t\t\t\t\t\t\tif ((prev[comment.id] ?? 0) === 0) return prev;\n\t\t\t\t\t\t\t\t\t\t\treturn { ...prev, [comment.id]: 0 };\n\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tsetExpandedReplies((prev) => {\n\t\t\t\t\t\t\t\t\t\tconst next = new Set(prev);\n\t\t\t\t\t\t\t\t\t\tnext.has(comment.id)\n\t\t\t\t\t\t\t\t\t\t\t? next.delete(comment.id)\n\t\t\t\t\t\t\t\t\t\t\t: next.add(comment.id);\n\t\t\t\t\t\t\t\t\t\treturn next;\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonOffsetChange={(offset) => {\n\t\t\t\t\t\t\t\t\tsetReplyOffsets((prev) => {\n\t\t\t\t\t\t\t\t\t\tif (prev[comment.id] === offset) return prev;\n\t\t\t\t\t\t\t\t\t\treturn { ...prev, [comment.id]: offset };\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tallowEditing={allowEditing}\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t{allowPosting && replyingTo === comment.id && currentUserId && (\n\t\t\t\t\t\t\t\t<div className=\"pl-11 pb-3\">\n\t\t\t\t\t\t\t\t\t<CommentForm\n\t\t\t\t\t\t\t\t\t\tauthorId={currentUserId}\n\t\t\t\t\t\t\t\t\t\tparentId={comment.id}\n\t\t\t\t\t\t\t\t\t\tsubmitLabel={loc.COMMENTS_FORM_POST_REPLY}\n\t\t\t\t\t\t\t\t\t\tInputComponent={components?.Input}\n\t\t\t\t\t\t\t\t\t\tlocalization={loc}\n\t\t\t\t\t\t\t\t\t\tonSubmit={(body) => handleReply(body, comment.id)}\n\t\t\t\t\t\t\t\t\t\tonCancel={() => setReplyingTo(null)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{!isLoading && comments.length === 0 && (\n\t\t\t\t<p className=\"text-sm text-muted-foreground py-4 text-center\">\n\t\t\t\t\t{loc.COMMENTS_EMPTY}\n\t\t\t\t</p>\n\t\t\t)}\n\n\t\t\t{hasMore && (\n\t\t\t\t<div className=\"flex justify-center pt-2\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\tonClick={() => loadMore()}\n\t\t\t\t\t\tdisabled={isLoadingMore}\n\t\t\t\t\t\tdata-testid=\"load-more-comments\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{isLoadingMore ? loc.COMMENTS_LOADING_MORE : loc.COMMENTS_LOAD_MORE}\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{allowPosting && (\n\t\t\t\t<>\n\t\t\t\t\t<Separator className=\"my-4\" />\n\n\t\t\t\t\t{currentUserId ? (\n\t\t\t\t\t\t<div data-testid=\"comment-form-wrapper\">\n\t\t\t\t\t\t\t<CommentForm\n\t\t\t\t\t\t\t\tauthorId={currentUserId}\n\t\t\t\t\t\t\t\tsubmitLabel={loc.COMMENTS_FORM_POST_COMMENT}\n\t\t\t\t\t\t\t\tInputComponent={components?.Input}\n\t\t\t\t\t\t\t\tlocalization={loc}\n\t\t\t\t\t\t\t\tonSubmit={handlePost}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"flex flex-col items-center gap-3 py-6 text-center border rounded-lg bg-muted/30\"\n\t\t\t\t\t\t\tdata-testid=\"login-prompt\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<LogIn className=\"h-6 w-6 text-muted-foreground\" />\n\t\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t{loc.COMMENTS_LOGIN_PROMPT}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t{loginHref && (\n\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\thref={loginHref}\n\t\t\t\t\t\t\t\t\tclassName=\"inline-flex items-center gap-1 text-sm font-medium text-primary underline underline-offset-4\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"login-link\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{loc.COMMENTS_LOGIN_LINK}\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\n// ─── Replies Section ───────────────────────────────────────────────────────────\n\nfunction RepliesSection({\n\tparentId,\n\tresourceId,\n\tresourceType,\n\tapiBaseURL,\n\tapiBasePath,\n\tcurrentUserId,\n\theaders,\n\tcomponents,\n\tloc,\n\texpanded,\n\treplyCount,\n\tonToggle,\n\tonOffsetChange,\n\tallowEditing,\n}: {\n\tparentId: string;\n\tresourceId: string;\n\tresourceType: string;\n\tapiBaseURL: string;\n\tapiBasePath: string;\n\tcurrentUserId?: string;\n\theaders?: HeadersInit;\n\tcomponents?: CommentComponents;\n\tloc: CommentsLocalization;\n\texpanded: boolean;\n\t/** Pre-computed from the parent comment — avoids an extra fetch on mount. */\n\treplyCount: number;\n\tonToggle: () => void;\n\tonOffsetChange: (offset: number) => void;\n\tallowEditing: boolean;\n}) {\n\tconst config = { apiBaseURL, apiBasePath, headers };\n\tconst [replyOffset, setReplyOffset] = useState(0);\n\tconst [loadedReplies, setLoadedReplies] = useState<SerializedComment[]>([]);\n\t// Only fetch reply bodies once the section is expanded.\n\tconst {\n\t\tcomments: repliesPage,\n\t\ttotal: repliesTotal,\n\t\tisFetching: isFetchingReplies,\n\t} = useComments(\n\t\tconfig,\n\t\t{\n\t\t\tresourceId,\n\t\t\tresourceType,\n\t\t\tparentId,\n\t\t\tstatus: \"approved\",\n\t\t\tcurrentUserId,\n\t\t\tlimit: REPLIES_PAGE_SIZE,\n\t\t\toffset: replyOffset,\n\t\t},\n\t\t{ enabled: expanded },\n\t);\n\n\tuseEffect(() => {\n\t\tif (expanded) {\n\t\t\tsetReplyOffset(0);\n\t\t\tsetLoadedReplies([]);\n\t\t}\n\t}, [expanded, parentId]);\n\n\tuseEffect(() => {\n\t\tonOffsetChange(replyOffset);\n\t}, [onOffsetChange, replyOffset]);\n\n\tuseEffect(() => {\n\t\tif (!expanded) return;\n\t\tsetLoadedReplies((prev) => {\n\t\t\tconst byId = new Map(prev.map((item) => [item.id, item]));\n\t\t\tfor (const reply of repliesPage) {\n\t\t\t\tbyId.set(reply.id, reply);\n\t\t\t}\n\n\t\t\t// Reconcile optimistic replies once the real server reply arrives with\n\t\t\t// a different id. Without this, both entries can persist in local state\n\t\t\t// until the section is collapsed and re-opened.\n\t\t\tconst currentPageIds = new Set(repliesPage.map((reply) => reply.id));\n\t\t\tconst currentPageRealReplies = repliesPage.filter(\n\t\t\t\t(reply) => !reply.id.startsWith(OPTIMISTIC_ID_PREFIX),\n\t\t\t);\n\n\t\t\treturn Array.from(byId.values()).filter((reply) => {\n\t\t\t\tif (!reply.id.startsWith(OPTIMISTIC_ID_PREFIX)) return true;\n\t\t\t\t// Keep optimistic items still present in the current cache page.\n\t\t\t\tif (currentPageIds.has(reply.id)) return true;\n\t\t\t\t// Drop stale optimistic rows that have been replaced by a real reply.\n\t\t\t\treturn !currentPageRealReplies.some(\n\t\t\t\t\t(realReply) =>\n\t\t\t\t\t\trealReply.parentId === reply.parentId &&\n\t\t\t\t\t\trealReply.authorId === reply.authorId &&\n\t\t\t\t\t\trealReply.body === reply.body,\n\t\t\t\t);\n\t\t\t});\n\t\t});\n\t}, [expanded, repliesPage]);\n\n\t// Hide when there are no known replies — but keep rendered when already\n\t// expanded so a freshly-posted first reply (which increments replyCount\n\t// only after the server responds) stays visible in the same session.\n\tif (replyCount === 0 && !expanded) return null;\n\n\t// Prefer the fetched count (accurate after optimistic inserts); fall back to\n\t// the server-provided replyCount before the fetch completes.\n\tconst displayCount = expanded\n\t\t? loadedReplies.length || replyCount\n\t\t: replyCount;\n\tconst effectiveReplyTotal = repliesTotal || replyCount;\n\tconst hasMoreReplies = loadedReplies.length < effectiveReplyTotal;\n\n\treturn (\n\t\t<div className=\"pl-11\">\n\t\t\t{/* Toggle button — always at the top so collapse is reachable without scrolling */}\n\t\t\t<Button\n\t\t\t\tvariant=\"ghost\"\n\t\t\t\tsize=\"sm\"\n\t\t\t\tclassName=\"h-7 px-2 text-xs mb-1\"\n\t\t\t\tonClick={onToggle}\n\t\t\t\tdata-testid={expanded ? \"hide-replies-button\" : \"show-replies-button\"}\n\t\t\t>\n\t\t\t\t{expanded ? (\n\t\t\t\t\t<ChevronUp className=\"h-3 w-3 mr-1\" />\n\t\t\t\t) : (\n\t\t\t\t\t<ChevronDown className=\"h-3 w-3 mr-1\" />\n\t\t\t\t)}\n\t\t\t\t{expanded\n\t\t\t\t\t? loc.COMMENTS_HIDE_REPLIES\n\t\t\t\t\t: `${displayCount} ${displayCount === 1 ? loc.COMMENTS_REPLIES_SINGULAR : loc.COMMENTS_REPLIES_PLURAL}`}\n\t\t\t</Button>\n\t\t\t{expanded && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"border-l-2 border-border pl-3 space-y-0\"\n\t\t\t\t\tdata-testid=\"replies-list\"\n\t\t\t\t>\n\t\t\t\t\t{loadedReplies.map((reply) => (\n\t\t\t\t\t\t<CommentCard\n\t\t\t\t\t\t\tkey={reply.id}\n\t\t\t\t\t\t\tcomment={reply}\n\t\t\t\t\t\t\tcurrentUserId={currentUserId}\n\t\t\t\t\t\t\tapiBaseURL={apiBaseURL}\n\t\t\t\t\t\t\tapiBasePath={apiBasePath}\n\t\t\t\t\t\t\tresourceId={resourceId}\n\t\t\t\t\t\t\tresourceType={resourceType}\n\t\t\t\t\t\t\theaders={headers}\n\t\t\t\t\t\t\tcomponents={components}\n\t\t\t\t\t\t\tloc={loc}\n\t\t\t\t\t\t\tonReplyClick={() => {}} // No nested replies in v1\n\t\t\t\t\t\t\tallowPosting={false}\n\t\t\t\t\t\t\tallowEditing={allowEditing}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t\t{hasMoreReplies && (\n\t\t\t\t\t\t<div className=\"py-2\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\tclassName=\"h-7 px-2 text-xs\"\n\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\tsetReplyOffset((prev) => prev + REPLIES_PAGE_SIZE)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tdisabled={isFetchingReplies}\n\t\t\t\t\t\t\t\tdata-testid=\"load-more-replies\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{isFetchingReplies\n\t\t\t\t\t\t\t\t\t? loc.COMMENTS_LOADING_MORE\n\t\t\t\t\t\t\t\t\t: loc.COMMENTS_LOAD_MORE}\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\n// ─── Public export: lazy-mounts on scroll into view ───────────────────────────\n\n/**\n * Embeddable threaded comment section.\n *\n * Lazy-mounts when the component scrolls into the viewport (via WhenVisible).\n * Requires `currentUserId` to allow posting; shows a \"Please login\" prompt otherwise.\n *\n * @example\n * ```tsx\n * <CommentThread\n *   resourceId={post.slug}\n *   resourceType=\"blog-post\"\n *   apiBaseURL=\"https://example.com\"\n *   apiBasePath=\"/api/data\"\n *   currentUserId={session?.userId}\n *   loginHref=\"/login\"\n * />\n * ```\n */\nfunction CommentThreadSkeleton() {\n\treturn (\n\t\t<div className=\"space-y-1\">\n\t\t\t{/* Header */}\n\t\t\t<div className=\"flex items-center gap-2 mb-4\">\n\t\t\t\t<div className=\"h-5 w-5 rounded bg-muted animate-pulse\" />\n\t\t\t\t<div className=\"h-4 w-24 rounded bg-muted animate-pulse\" />\n\t\t\t</div>\n\n\t\t\t{/* Comment rows */}\n\t\t\t{[1, 2, 3].map((i) => (\n\t\t\t\t<div key={i} className=\"flex gap-3 py-3\">\n\t\t\t\t\t<div className=\"h-8 w-8 rounded-full bg-muted shrink-0 mt-0.5 animate-pulse\" />\n\t\t\t\t\t<div className=\"flex-1 space-y-2\">\n\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t<div className=\"h-3 w-20 rounded bg-muted animate-pulse\" />\n\t\t\t\t\t\t\t<div className=\"h-3 w-14 rounded bg-muted animate-pulse\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"h-3 w-full rounded bg-muted animate-pulse\" />\n\t\t\t\t\t\t<div className=\"h-3 w-4/5 rounded bg-muted animate-pulse\" />\n\t\t\t\t\t\t<div className=\"flex gap-1 mt-1\">\n\t\t\t\t\t\t\t<div className=\"h-7 w-12 rounded bg-muted animate-pulse\" />\n\t\t\t\t\t\t\t<div className=\"h-7 w-14 rounded bg-muted animate-pulse\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t))}\n\n\t\t\t{/* Separator */}\n\t\t\t<div className=\"h-px w-full bg-muted my-4\" />\n\n\t\t\t{/* Textarea placeholder */}\n\t\t\t<div className=\"space-y-2\">\n\t\t\t\t<div className=\"h-20 w-full rounded-md border bg-muted animate-pulse\" />\n\t\t\t\t<div className=\"flex justify-end\">\n\t\t\t\t\t<div className=\"h-9 w-28 rounded-md bg-muted animate-pulse\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport function CommentThread(props: CommentThreadProps) {\n\treturn (\n\t\t<div id=\"comments\" className={props.className}>\n\t\t\t<WhenVisible fallback={<CommentThreadSkeleton />} rootMargin=\"300px\">\n\t\t\t\t<CommentThreadInner {...props} />\n\t\t\t</WhenVisible>\n\t\t</div>\n\t);\n}\n",
       "target": "src/components/btst/comments/client/components/comment-thread.tsx"
     },
     {
@@ -132,7 +132,7 @@
     {
       "path": "btst/comments/client/overrides.ts",
       "type": "registry:lib",
-      "content": "/**\n * Context passed to lifecycle hooks\n */\nexport interface RouteContext {\n\t/** Current route path */\n\tpath: string;\n\t/** Route parameters (e.g., { resourceId: \"my-post\", resourceType: \"blog-post\" }) */\n\tparams?: Record<string, string>;\n\t/** Whether rendering on server (true) or client (false) */\n\tisSSR: boolean;\n\t/** Additional context properties */\n\t[key: string]: unknown;\n}\n\nimport type { CommentsLocalization } from \"./localization\";\n\n/**\n * Overridable configuration and hooks for the Comments plugin.\n *\n * Provide these in the layout wrapping your pages via `PluginOverridesProvider`.\n */\nexport interface CommentsPluginOverrides {\n\t/**\n\t * Localization strings for all Comments plugin UI.\n\t * Defaults to English when not provided.\n\t */\n\tlocalization?: Partial<CommentsLocalization>;\n\t/**\n\t * Base URL for API calls (e.g., \"https://example.com\")\n\t */\n\tapiBaseURL: string;\n\n\t/**\n\t * Path where the API is mounted (e.g., \"/api/data\")\n\t */\n\tapiBasePath: string;\n\n\t/**\n\t * Optional headers for authenticated API calls (e.g., forwarding cookies)\n\t */\n\theaders?: Record<string, string>;\n\n\t/**\n\t * Whether to show the \"Powered by BTST\" attribution on plugin pages.\n\t * Defaults to true.\n\t */\n\tshowAttribution?: boolean;\n\n\t/**\n\t * The ID of the currently authenticated user.\n\t *\n\t * Used by the User Comments page and the per-resource comments admin view to\n\t * scope the comment list to the current user and to enable posting.\n\t * Can be a static string or an async function (useful when the user ID must\n\t * be resolved from a session cookie at render time).\n\t *\n\t * When absent both pages show a \"Please log in\" prompt.\n\t */\n\tcurrentUserId?:\n\t\t| string\n\t\t| (() => string | undefined | Promise<string | undefined>);\n\n\t/**\n\t * URL to redirect unauthenticated users to when they try to post a comment.\n\t *\n\t * Forwarded to every embedded `CommentThread` (including the one on the\n\t * per-resource admin comments view). When absent no login link is shown.\n\t */\n\tloginHref?: string;\n\n\t/**\n\t * Default number of top-level comments to load per page in `CommentThread`.\n\t * Can be overridden per-instance via the `pageSize` prop.\n\t * Defaults to 100 when not set.\n\t */\n\tdefaultCommentPageSize?: number;\n\n\t/**\n\t * When false, the comment form and reply buttons are hidden in all\n\t * `CommentThread` instances. Users can still read existing comments.\n\t * Defaults to true.\n\t *\n\t * Can be overridden per-instance via the `allowPosting` prop on `CommentThread`.\n\t */\n\tallowPosting?: boolean;\n\n\t/**\n\t * When false, the edit button is hidden on all comment cards in all\n\t * `CommentThread` instances.\n\t * Defaults to true.\n\t *\n\t * Can be overridden per-instance via the `allowEditing` prop on `CommentThread`.\n\t */\n\tallowEditing?: boolean;\n\n\t/**\n\t * Per-resource-type URL builders used to link each comment back to its\n\t * original resource on the User Comments page.\n\t *\n\t * @example\n\t * ```ts\n\t * resourceLinks: {\n\t *   \"blog-post\": (slug) => `/pages/blog/${slug}`,\n\t *   \"kanban-task\": (id) => `/pages/kanban?task=${id}`,\n\t * }\n\t * ```\n\t *\n\t * When a resource type has no entry the ID is shown as plain text.\n\t */\n\tresourceLinks?: Record<string, (id: string) => string>;\n\n\t// ============ Access Control Hooks ============\n\n\t/**\n\t * Called before the moderation dashboard page is rendered.\n\t * Return false to block rendering (e.g., redirect to login or show 403).\n\t * @param context - Route context\n\t */\n\tonBeforeModerationPageRendered?: (context: RouteContext) => boolean;\n\n\t/**\n\t * Called before the per-resource comments page is rendered.\n\t * Return false to block rendering (e.g., for authorization).\n\t * @param resourceType - The type of resource (e.g., \"blog-post\")\n\t * @param resourceId - The ID of the resource\n\t * @param context - Route context\n\t */\n\tonBeforeResourceCommentsRendered?: (\n\t\tresourceType: string,\n\t\tresourceId: string,\n\t\tcontext: RouteContext,\n\t) => boolean;\n\n\t/**\n\t * Called before the User Comments page is rendered.\n\t * Throw to block rendering (e.g., when the user is not authenticated).\n\t * @param context - Route context\n\t */\n\tonBeforeUserCommentsPageRendered?: (context: RouteContext) => boolean | void;\n\n\t// ============ Lifecycle Hooks ============\n\n\t/**\n\t * Called when a route is rendered.\n\t * @param routeName - Name of the route (e.g., 'moderation', 'resourceComments')\n\t * @param context - Route context\n\t */\n\tonRouteRender?: (\n\t\trouteName: string,\n\t\tcontext: RouteContext,\n\t) => void | Promise<void>;\n\n\t/**\n\t * Called when a route encounters an error.\n\t * @param routeName - Name of the route\n\t * @param error - The error that occurred\n\t * @param context - Route context\n\t */\n\tonRouteError?: (\n\t\trouteName: string,\n\t\terror: Error,\n\t\tcontext: RouteContext,\n\t) => void | Promise<void>;\n}\n",
+      "content": "/**\n * Context passed to lifecycle hooks\n */\nexport interface RouteContext {\n\t/** Current route path */\n\tpath: string;\n\t/** Route parameters (e.g., { resourceId: \"my-post\", resourceType: \"blog-post\" }) */\n\tparams?: Record<string, string>;\n\t/** Whether rendering on server (true) or client (false) */\n\tisSSR: boolean;\n\t/** Additional context properties */\n\t[key: string]: unknown;\n}\n\nimport type { CommentsLocalization } from \"./localization\";\n\n/**\n * Overridable configuration and hooks for the Comments plugin.\n *\n * Provide these in the layout wrapping your pages via `PluginOverridesProvider`.\n */\nexport interface CommentsPluginOverrides {\n\t/**\n\t * Localization strings for all Comments plugin UI.\n\t * Defaults to English when not provided.\n\t */\n\tlocalization?: Partial<CommentsLocalization>;\n\t/**\n\t * Base URL for API calls (e.g., \"https://example.com\")\n\t */\n\tapiBaseURL: string;\n\n\t/**\n\t * Path where the API is mounted (e.g., \"/api/data\")\n\t */\n\tapiBasePath: string;\n\n\t/**\n\t * Optional headers for authenticated API calls (e.g., forwarding cookies)\n\t */\n\theaders?: Record<string, string>;\n\n\t/**\n\t * Whether to show the \"Powered by BTST\" attribution on plugin pages.\n\t * Defaults to true.\n\t */\n\tshowAttribution?: boolean;\n\n\t/**\n\t * The ID of the currently authenticated user.\n\t *\n\t * Used by the User Comments page and the per-resource comments admin view to\n\t * scope the comment list to the current user and to enable posting.\n\t * Can be a static string or an async function (useful when the user ID must\n\t * be resolved from a session cookie at render time).\n\t *\n\t * When absent both pages show a \"Please log in\" prompt.\n\t */\n\tcurrentUserId?:\n\t\t| string\n\t\t| (() => string | undefined | Promise<string | undefined>);\n\n\t/**\n\t * URL to redirect unauthenticated users to when they try to post a comment.\n\t *\n\t * Forwarded to every embedded `CommentThread` (including the one on the\n\t * per-resource admin comments view). When absent no login link is shown.\n\t */\n\tloginHref?: string;\n\n\t/**\n\t * Default number of top-level comments to load per page in `CommentThread`.\n\t * Can be overridden per-instance via the `pageSize` prop.\n\t * Defaults to 100 when not set.\n\t */\n\tdefaultCommentPageSize?: number;\n\n\t/**\n\t * Default sort direction (by `createdAt`) for top-level comments in\n\t * `CommentThread`.\n\t * - `\"desc\"` (default): newest comments first.\n\t * - `\"asc\"`: oldest comments first.\n\t *\n\t * Can be overridden per-instance via the `sort` prop on `CommentThread`.\n\t */\n\tdefaultCommentSort?: \"asc\" | \"desc\";\n\n\t/**\n\t * When false, the comment form and reply buttons are hidden in all\n\t * `CommentThread` instances. Users can still read existing comments.\n\t * Defaults to true.\n\t *\n\t * Can be overridden per-instance via the `allowPosting` prop on `CommentThread`.\n\t */\n\tallowPosting?: boolean;\n\n\t/**\n\t * When false, the edit button is hidden on all comment cards in all\n\t * `CommentThread` instances.\n\t * Defaults to true.\n\t *\n\t * Can be overridden per-instance via the `allowEditing` prop on `CommentThread`.\n\t */\n\tallowEditing?: boolean;\n\n\t/**\n\t * Per-resource-type URL builders used to link each comment back to its\n\t * original resource on the User Comments page.\n\t *\n\t * @example\n\t * ```ts\n\t * resourceLinks: {\n\t *   \"blog-post\": (slug) => `/pages/blog/${slug}`,\n\t *   \"kanban-task\": (id) => `/pages/kanban?task=${id}`,\n\t * }\n\t * ```\n\t *\n\t * When a resource type has no entry the ID is shown as plain text.\n\t */\n\tresourceLinks?: Record<string, (id: string) => string>;\n\n\t// ============ Access Control Hooks ============\n\n\t/**\n\t * Called before the moderation dashboard page is rendered.\n\t * Return false to block rendering (e.g., redirect to login or show 403).\n\t * @param context - Route context\n\t */\n\tonBeforeModerationPageRendered?: (context: RouteContext) => boolean;\n\n\t/**\n\t * Called before the per-resource comments page is rendered.\n\t * Return false to block rendering (e.g., for authorization).\n\t * @param resourceType - The type of resource (e.g., \"blog-post\")\n\t * @param resourceId - The ID of the resource\n\t * @param context - Route context\n\t */\n\tonBeforeResourceCommentsRendered?: (\n\t\tresourceType: string,\n\t\tresourceId: string,\n\t\tcontext: RouteContext,\n\t) => boolean;\n\n\t/**\n\t * Called before the User Comments page is rendered.\n\t * Throw to block rendering (e.g., when the user is not authenticated).\n\t * @param context - Route context\n\t */\n\tonBeforeUserCommentsPageRendered?: (context: RouteContext) => boolean | void;\n\n\t// ============ Lifecycle Hooks ============\n\n\t/**\n\t * Called when a route is rendered.\n\t * @param routeName - Name of the route (e.g., 'moderation', 'resourceComments')\n\t * @param context - Route context\n\t */\n\tonRouteRender?: (\n\t\trouteName: string,\n\t\tcontext: RouteContext,\n\t) => void | Promise<void>;\n\n\t/**\n\t * Called when a route encounters an error.\n\t * @param routeName - Name of the route\n\t * @param error - The error that occurred\n\t * @param context - Route context\n\t */\n\tonRouteError?: (\n\t\trouteName: string,\n\t\terror: Error,\n\t\tcontext: RouteContext,\n\t) => void | Promise<void>;\n}\n",
       "target": "src/components/btst/comments/client/overrides.ts"
     },
     {
diff --git a/packages/stack/src/plugins/comments/api/query-key-defs.ts b/packages/stack/src/plugins/comments/api/query-key-defs.ts
index f1c4378e..1d609cb4 100644
--- a/packages/stack/src/plugins/comments/api/query-key-defs.ts
+++ b/packages/stack/src/plugins/comments/api/query-key-defs.ts
@@ -71,6 +71,7 @@ export interface CommentsThreadDiscriminator {
 	parentId: string | null | undefined;
 	status: string | undefined;
 	currentUserId: string | undefined;
+	sort: string | undefined;
 	limit: number;
 }
 
@@ -80,6 +81,7 @@ export function commentsThreadDiscriminator(params?: {
 	parentId?: string | null;
 	status?: string;
 	currentUserId?: string;
+	sort?: string;
 	limit?: number;
 }): CommentsThreadDiscriminator {
 	return {
@@ -88,6 +90,7 @@ export function commentsThreadDiscriminator(params?: {
 		parentId: params?.parentId,
 		status: params?.status,
 		currentUserId: params?.currentUserId,
+		sort: params?.sort,
 		limit: params?.limit ?? 20,
 	};
 }
@@ -128,7 +131,7 @@ export const COMMENTS_QUERY_KEYS = {
 
 	/**
 	 * Key for the infinite thread query (top-level comments, load-more).
-	 * Full key: ["commentsThread", "list", { resourceId, resourceType, parentId, status, currentUserId, limit }]
+	 * Full key: ["commentsThread", "list", { resourceId, resourceType, parentId, status, currentUserId, sort, limit }]
 	 * Offset is excluded — it is driven by `pageParam`, not baked into the key.
 	 */
 	commentsThread: (params?: {
@@ -137,6 +140,7 @@ export const COMMENTS_QUERY_KEYS = {
 		parentId?: string | null;
 		status?: string;
 		currentUserId?: string;
+		sort?: string;
 		limit?: number;
 	}) =>
 		["commentsThread", "list", commentsThreadDiscriminator(params)] as const,
diff --git a/packages/stack/src/plugins/comments/client/components/comment-thread.tsx b/packages/stack/src/plugins/comments/client/components/comment-thread.tsx
index ddca9433..f324c4c3 100644
--- a/packages/stack/src/plugins/comments/client/components/comment-thread.tsx
+++ b/packages/stack/src/plugins/comments/client/components/comment-thread.tsx
@@ -98,6 +98,17 @@ export interface CommentThreadProps {
 	 * Defaults to true.
 	 */
 	allowEditing?: boolean;
+	/**
+	 * Sort direction for top-level comments by `createdAt`.
+	 * - `"desc"` (default): newest first.
+	 * - `"asc"`: oldest first.
+	 *
+	 * Replies inside each thread always render chronologically (oldest → newest)
+	 * and are unaffected by this prop.
+	 *
+	 * Overrides the global `defaultCommentSort` from `CommentsPluginOverrides`.
+	 */
+	sort?: "asc" | "desc";
 }
 
 const DEFAULT_RENDERER: ComponentType<CommentRendererProps> = ({ body }) => (
@@ -325,6 +336,7 @@ function CommentThreadInner({
 	pageSize: pageSizeProp,
 	allowPosting: allowPostingProp,
 	allowEditing: allowEditingProp,
+	sort: sortProp,
 }: CommentThreadProps) {
 	const overrides = usePluginOverrides<
 		CommentsPluginOverrides,
@@ -334,6 +346,7 @@ function CommentThreadInner({
 		pageSizeProp ?? overrides.defaultCommentPageSize ?? DEFAULT_PAGE_SIZE;
 	const allowPosting = allowPostingProp ?? overrides.allowPosting ?? true;
 	const allowEditing = allowEditingProp ?? overrides.allowEditing ?? true;
+	const sort = sortProp ?? overrides.defaultCommentSort ?? "desc";
 	const loc = { ...COMMENTS_LOCALIZATION, ...localizationProp };
 	const [replyingTo, setReplyingTo] = useState<string | null>(null);
 	const [expandedReplies, setExpandedReplies] = useState<Set<string>>(
@@ -357,6 +370,7 @@ function CommentThreadInner({
 		status: "approved",
 		parentId: null,
 		currentUserId,
+		sort,
 		pageSize,
 	});
 
@@ -366,6 +380,7 @@ function CommentThreadInner({
 		currentUserId,
 		infiniteKey: threadQueryKey,
 		pageSize,
+		sort,
 	});
 
 	const handlePost = async (body: string) => {
diff --git a/packages/stack/src/plugins/comments/client/hooks/use-comments.tsx b/packages/stack/src/plugins/comments/client/hooks/use-comments.tsx
index a2779ee0..2a3e1e16 100644
--- a/packages/stack/src/plugins/comments/client/hooks/use-comments.tsx
+++ b/packages/stack/src/plugins/comments/client/hooks/use-comments.tsx
@@ -164,6 +164,11 @@ export function useInfiniteComments(
 		parentId?: string | null;
 		status?: "pending" | "approved" | "spam";
 		currentUserId?: string;
+		/**
+		 * Sort direction by `createdAt`. Default: `"asc"` (oldest first) — matches
+		 * the server-side default. Pass `"desc"` for newest-first threads.
+		 */
+		sort?: "asc" | "desc";
 		pageSize?: number;
 	},
 	options?: { enabled?: boolean },
@@ -178,6 +183,7 @@ export function useInfiniteComments(
 		parentId: params.parentId ?? null,
 		status: params.status,
 		currentUserId: params.currentUserId,
+		sort: params.sort,
 		limit: pageSize,
 	});
 
@@ -266,6 +272,17 @@ export function usePostComment(
 		 * `nextOffset` from `lastPage.limit` instead of a hardcoded fallback.
 		 */
 		pageSize?: number;
+		/**
+		 * Sort direction of the surrounding infinite thread.
+		 * - `"asc"` (default): newest comments belong on the LAST page → optimistic
+		 *   item is appended to `pages[last].items`.
+		 * - `"desc"`: newest comments belong on the FIRST page → optimistic item
+		 *   is prepended to `pages[0].items`.
+		 *
+		 * Must match the `sort` passed to `useInfiniteComments` so the optimistic
+		 * item appears in the same position the server will place it.
+		 */
+		sort?: "asc" | "desc";
 	},
 ) {
 	const queryClient = useQueryClient();
@@ -350,6 +367,7 @@ export function usePostComment(
 				const previous =
 					queryClient.getQueryData<InfiniteData<CommentListResult>>(listKey);
 
+				const isDesc = params.sort === "desc";
 				queryClient.setQueryData<InfiniteData<CommentListResult>>(
 					listKey,
 					(old) => {
@@ -366,16 +384,21 @@ export function usePostComment(
 								pageParams: [0],
 							};
 						}
-						const lastIdx = old.pages.length - 1;
+						// For asc (oldest-first) threads the new comment lives at the end →
+						// append to the last page. For desc (newest-first) threads it lives
+						// at the top → prepend to the first page.
+						const targetIdx = isDesc ? 0 : old.pages.length - 1;
 						return {
 							...old,
 							// Increment `total` on every page so the header count (which reads
 							// pages[0].total) stays in sync even after multiple pages are loaded.
 							pages: old.pages.map((page, idx) =>
-								idx === lastIdx
+								idx === targetIdx
 									? {
 											...page,
-											items: [...page.items, optimistic],
+											items: isDesc
+												? [optimistic, ...page.items]
+												: [...page.items, optimistic],
 											total: page.total + 1,
 										}
 									: { ...page, total: page.total + 1 },
diff --git a/packages/stack/src/plugins/comments/client/overrides.ts b/packages/stack/src/plugins/comments/client/overrides.ts
index dbd82e3e..badf5557 100644
--- a/packages/stack/src/plugins/comments/client/overrides.ts
+++ b/packages/stack/src/plugins/comments/client/overrides.ts
@@ -75,6 +75,16 @@ export interface CommentsPluginOverrides {
 	 */
 	defaultCommentPageSize?: number;
 
+	/**
+	 * Default sort direction (by `createdAt`) for top-level comments in
+	 * `CommentThread`.
+	 * - `"desc"` (default): newest comments first.
+	 * - `"asc"`: oldest comments first.
+	 *
+	 * Can be overridden per-instance via the `sort` prop on `CommentThread`.
+	 */
+	defaultCommentSort?: "asc" | "desc";
+
 	/**
 	 * When false, the comment form and reply buttons are hidden in all
 	 * `CommentThread` instances. Users can still read existing comments.
diff --git a/packages/stack/src/plugins/comments/query-keys.ts b/packages/stack/src/plugins/comments/query-keys.ts
index d5c5c4ed..3ffd2b14 100644
--- a/packages/stack/src/plugins/comments/query-keys.ts
+++ b/packages/stack/src/plugins/comments/query-keys.ts
@@ -142,6 +142,7 @@ function createCommentsThreadQueries(
 			parentId?: string | null;
 			status?: "pending" | "approved" | "spam";
 			currentUserId?: string;
+			sort?: "asc" | "desc";
 			limit?: number;
 		}) => ({
 			// Offset is excluded from the key — it is driven by pageParam.
@@ -162,6 +163,7 @@ function createCommentsThreadQueries(
 						// The server resolves the caller's identity server-side via the
 						// resolveCurrentUserId hook. It is still included in the queryKey
 						// above for client-side cache segregation.
+						sort: params?.sort,
 						limit: params?.limit ?? 20,
 						offset: pageParam ?? 0,
 					},