@lovett/ui 0.0.11 → 0.2.0

package/src/thread/comment-body.tsx

@@ -0,0 +1,148 @@
+/**
+ * CommentBody — the stored markdown, rendered.
+ *
+ * ADR-147 D7 and D11.
+ *
+ * SECURITY, stated once and permanently: `rehype-raw` is NEVER enabled on this
+ * surface, and no `rehypePlugins` are passed at all. `react-markdown` does not
+ * execute raw HTML unless it is turned on, so the safe state is the default
+ * state and this file's job is to not leave it. Comment bodies are user input
+ * and will quote LLM output; the repo has zero `rehype-*` packages and zero
+ * `dangerouslySetInnerHTML`, and this decision protects that rather than
+ * repairing it. Adding either here is a security change requiring its own ADR.
+ *
+ * MENTIONS (D11) are ordinary markdown links with a scheme:
+ *
+ *     @[Marcus Webb](user:usr_9f2)     @[Slice B migration](task_item:tit_44a)
+ *
+ * Two things follow that are easy to get wrong:
+ *
+ *   • `react-markdown`'s default `urlTransform` drops any protocol it does not
+ *     recognise, so `user:usr_9f2` would silently become `href=""` and the
+ *     mention would render as inert text. The transform below preserves
+ *     exactly the three mention schemes and hands everything else to the
+ *     default sanitiser unchanged — the allowlist is the point; widening it is
+ *     how `javascript:` gets back in.
+ *   • The component map comes from the existing `MarkdownRenderer`
+ *     (`markdownComponents`) rather than being rewritten. `MarkdownRenderer`
+ *     itself takes no component overrides, so a mention-aware surface has to
+ *     drive `ReactMarkdown` with that same map plus one `a` override; forking
+ *     the map is what puts two markdown looks in one product. The remark
+ *     plugin list (`markdownRemarkPlugins` — GFM plus ADR-148 D13's underline)
+ *     is shared the same way, so the two surfaces cannot parse differently.
+ */
+
+import type { AnchorHTMLAttributes, ImgHTMLAttributes, ReactNode } from 'react'
+import ReactMarkdown, { defaultUrlTransform } from 'react-markdown'
+import { markdownComponents, markdownRemarkPlugins } from '../markdown'
+import { cn } from '../lib/utils'
+
+const MENTION_SCHEMES = ['user', 'task_item', 'task_board'] as const
+export type MentionTargetType = (typeof MENTION_SCHEMES)[number]
+
+export interface MentionTarget {
+  readonly type: MentionTargetType
+  readonly id: string
+}
+
+const MENTION_PATTERN = new RegExp(`^(${MENTION_SCHEMES.join('|')}):(.+)$`)
+
+/** Narrows without a cast — the scheme list is the allowlist, in one place. */
+function isMentionScheme(value: string): value is MentionTargetType {
+  return MENTION_SCHEMES.some((scheme) => scheme === value)
+}
+
+/** Parse `user:usr_9f2` into a target. Returns null for anything else. */
+export function parseMentionHref(href: string | undefined): MentionTarget | null {
+  if (href === undefined) return null
+  const match = MENTION_PATTERN.exec(href)
+  if (match === null) return null
+  const type = match[1]
+  const id = match[2]
+  if (type === undefined || id === undefined) return null
+  if (!isMentionScheme(type)) return null
+  return { type, id }
+}
+
+function urlTransform(value: string): string {
+  return parseMentionHref(value) === null ? defaultUrlTransform(value) : value
+}
+
+export interface CommentBodyProps {
+  readonly bodyMd: string
+  /** Called when a mention chip is activated. Omitted renders an inert chip. */
+  readonly onSelectMention?: ((target: MentionTarget) => void) | undefined
+  readonly className?: string | undefined
+}
+
+export function CommentBody({ bodyMd, onSelectMention, className }: CommentBodyProps) {
+  const components = {
+    ...markdownComponents,
+    // Paragraph spacing inside a comment is tighter than the document default
+    // the shared map assumes — a comment is a remark, not an article.
+    p: ({ children }: { children?: ReactNode }) => (
+      <p className="mb-[var(--space-2)] leading-[1.55] last:mb-0" style={{ color: 'rgb(var(--foreground))' }}>
+        {children}
+      </p>
+    ),
+    // Images are outside the composer's subset — ADR-148 D3: "images-by-markdown
+    // out; ADR-151 owns attachments" — but `![alt](url)` is still typeable. It
+    // renders as its alt text and nothing else: no `<img>`, so no request to a
+    // user-supplied URL and no empty-`src` element when the transform strips a
+    // dangerous one. ADR-151: this is the entry to revisit when attachments land.
+    img: ({ alt }: ImgHTMLAttributes<HTMLImageElement>) =>
+      alt === undefined || alt === '' ? null : <span>{alt}</span>,
+    a: ({ href, children }: AnchorHTMLAttributes<HTMLAnchorElement>) => {
+      const mention = parseMentionHref(href)
+      if (mention === null) {
+        return (
+          <a
+            href={href}
+            className="underline-offset-2 hover:underline"
+            style={{ color: 'rgb(var(--accent-ink))' }}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {children}
+          </a>
+        )
+      }
+      const interactive = onSelectMention !== undefined
+      const Tag = interactive ? 'button' : 'span'
+      return (
+        <Tag
+          {...(interactive ? { type: 'button' as const, onClick: () => { onSelectMention(mention) } } : {})}
+          className={cn(
+            'inline-flex items-center align-baseline text-[12.5px] font-semibold',
+            'transition-[background-color,border-color] duration-[var(--dur-fast)] ease-[var(--ease-out)]',
+            'motion-reduce:transition-none',
+            'border border-[rgb(var(--border))] bg-[rgb(var(--surface-inset))] text-[rgb(var(--accent-ink))]',
+            interactive &&
+              'hover:border-[rgb(var(--accent))] hover:bg-[rgb(var(--surface-hover))] focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]',
+          )}
+          style={{
+            borderRadius: 'var(--radius-sm)',
+            paddingInline: 'var(--space-1)',
+          }}
+        >
+          {children}
+        </Tag>
+      )
+    },
+  }
+
+  return (
+    <div
+      className={cn('text-[13px]', className)}
+      style={{ color: 'rgb(var(--foreground))' }}
+    >
+      <ReactMarkdown
+        components={components}
+        remarkPlugins={markdownRemarkPlugins}
+        urlTransform={urlTransform}
+      >
+        {bodyMd}
+      </ReactMarkdown>
+    </div>
+  )
+}

package/src/thread/comment-tree.ts

@@ -0,0 +1,182 @@
+/**
+ * comment-tree — a flat comment list becomes a reply tree.
+ *
+ * Ported from `@lovett/community-ui`'s `internal/comment-tree.ts`, with the
+ * D4 correction. The shape contract is unchanged and worth restating: a
+ * consumer with NO threading data (every `parentId` undefined) gets every
+ * comment back as a childless top-level node — the same flat list it put in —
+ * and a consumer with real reply-to data gets full nesting, from the same
+ * input shape. Nothing has to know in advance which kind of thread it has.
+ *
+ * WHAT CHANGED FROM THE REFERENCE (ADR-147 D4)
+ *
+ * The reference re-parents an orphan to top level, unconditionally:
+ *
+ *     // An unmatched parentId (parent not present in this list — deleted, or
+ *     // simply not fetched) falls back to top-level rather than being dropped.
+ *
+ * Those two cases are not the same case.
+ *
+ *   • "not fetched" — the parent row is genuinely absent (pagination, a
+ *     filtered view). Rendering the reply at top level is the least-wrong
+ *     thing available, but it is a LIE unless it is labelled, so we flag it
+ *     with `orphanedParentId` and the UI says "in reply to a comment that
+ *     isn't shown".
+ *
+ *   • "deleted" — the parent is a TOMBSTONE, and a tombstone is a row that is
+ *     still there (`deleted_at` set, body blanked on read). It matches by id
+ *     like any other parent, so its children stay nested under it. If deletion
+ *     ever dropped the row instead, this builder would silently move replies
+ *     out from under what they were replying to and reshape the conversation.
+ *
+ * A cycle (a.parent = b, b.parent = a — only reachable through corrupt data,
+ * but a stack overflow is not an acceptable response to corrupt data) is
+ * treated as the orphan case rather than followed.
+ */
+
+import type { CommentNode, ThreadComment, ThreadSort } from './types'
+
+interface MutableNode extends ThreadComment {
+  replies: MutableNode[]
+  depth: number
+  orphanedParentId: string | null
+}
+
+/**
+ * Walk up from `parentId`; report whether the chain reaches `childId`.
+ * Bounded by the map size so a pre-existing cycle above us cannot spin.
+ */
+function createsCycle(
+  byId: ReadonlyMap<string, MutableNode>,
+  parentId: string,
+  childId: string,
+): boolean {
+  let cursor: string | null = parentId
+  let steps = 0
+  while (cursor !== null) {
+    if (cursor === childId) return true
+    // Budget blown: the chain is longer than the whole list, which is only
+    // possible if it loops. Treat it as a cycle rather than keep walking.
+    if (steps > byId.size) return true
+    const node: MutableNode | undefined = byId.get(cursor)
+    if (node === undefined) return false
+    cursor = node.parentId ?? null
+    steps += 1
+  }
+  // The chain terminated at a real root. No cycle.
+  return false
+}
+
+function assignDepth(node: MutableNode, depth: number): void {
+  node.depth = depth
+  for (const reply of node.replies) assignDepth(reply, depth + 1)
+}
+
+/** Group a flat comment list into the reply tree the recursive renderer needs. */
+export function buildCommentTree(
+  comments: readonly ThreadComment[],
+): readonly CommentNode[] {
+  const byId = new Map<string, MutableNode>()
+  for (const comment of comments) {
+    byId.set(comment.id, {
+      ...comment,
+      replies: [],
+      depth: 0,
+      orphanedParentId: null,
+    })
+  }
+
+  const roots: MutableNode[] = []
+  for (const comment of comments) {
+    const node = byId.get(comment.id)
+    if (node === undefined) continue
+
+    const parentId = comment.parentId ?? null
+    if (parentId === null) {
+      roots.push(node)
+      continue
+    }
+
+    const parent = byId.get(parentId)
+    if (parent === undefined || createsCycle(byId, parentId, comment.id)) {
+      // D4: absent parent, or corrupt data. Never dropped, never silently
+      // promoted — surfaced at top level AND flagged.
+      node.orphanedParentId = parentId
+      roots.push(node)
+      continue
+    }
+
+    parent.replies.push(node)
+  }
+
+  for (const root of roots) assignDepth(root, 0)
+  return roots
+}
+
+/** Total nodes in the forest, including every nested reply. */
+export function countCommentTree(nodes: readonly CommentNode[]): number {
+  return nodes.reduce((n, node) => n + 1 + countCommentTree(node.replies), 0)
+}
+
+/** Replies below this node, at every depth. Excludes the node itself. */
+export function countDescendants(node: CommentNode): number {
+  return countCommentTree(node.replies)
+}
+
+/**
+ * The engagement figure `top` ranks by: the explicit vote score when the
+ * surface uses votes, otherwise the sum of reaction counts.
+ */
+export function engagementScore(node: CommentNode): number {
+  if (node.score !== undefined) return node.score
+  return (node.reactions ?? []).reduce((n, r) => n + r.count, 0)
+}
+
+/** Undelivered comments sort last under `top`, so a retry stays where it was typed. */
+function isUndelivered(node: CommentNode): boolean {
+  return node.state === 'pending' || node.state === 'failed'
+}
+
+function byCreatedAtAsc(a: CommentNode, b: CommentNode): number {
+  return a.createdAt - b.createdAt || a.id.localeCompare(b.id)
+}
+
+function byTop(a: CommentNode, b: CommentNode): number {
+  return (
+    Number(isUndelivered(a)) - Number(isUndelivered(b)) ||
+    Number(b.pinned ?? false) - Number(a.pinned ?? false) ||
+    engagementScore(b) - engagementScore(a) ||
+    byCreatedAtAsc(a, b)
+  )
+}
+
+function byNewest(a: CommentNode, b: CommentNode): number {
+  return b.createdAt - a.createdAt || b.id.localeCompare(a.id)
+}
+
+function sortReplies(nodes: readonly CommentNode[]): readonly CommentNode[] {
+  // Replies are ALWAYS chronological, whichever sort the roots use.
+  //
+  // A decision ADR-147 did not make, recorded here: Reddit re-sorts every
+  // level, which turns a nested exchange into a pile of non-sequiturs under
+  // "new" — the reply lands above the line it answers. Roots are a LIST and
+  // want ranking; a reply chain is a CONVERSATION and wants order. Ranking
+  // therefore applies to roots only.
+  return [...nodes]
+    .sort(byCreatedAtAsc)
+    .map((node) => ({ ...node, replies: sortReplies(node.replies) }))
+}
+
+/**
+ * Sort the roots by the chosen order; every reply level stays chronological.
+ * Deterministic: every comparator falls through to a stable id tie-break, so
+ * the same input always produces the same order (CLAUDE.md §7).
+ */
+export function sortCommentTree(
+  roots: readonly CommentNode[],
+  sort: ThreadSort,
+): readonly CommentNode[] {
+  return [...roots]
+    .sort(sort === 'top' ? byTop : byNewest)
+    .map((node) => ({ ...node, replies: sortReplies(node.replies) }))
+}