Show the author's own chain on Bluesky and Threads

People write in chains on both, and a link into one arrives pointing at a
single post out of several. Showing only that post loses the thing that was
being said. Other people's replies are a different matter: they are a
conversation rather than the thing that was shared, and on a busy post there
are hundreds of them.

A Post is now a list of Segments instead of one body. Most platforms produce
exactly one and say so through oneSegment(); the two that thread produce the
whole chain, with isAnchor marking the post that was actually linked, which
need not be the first.

Bluesky walks parent upward and the author's own replies downward, stopping at
the first post by anyone else. That needs depth and parentHeight on
getPostThread, which drags the entire reply tree along -- a few hundred KB on a
popular post -- because there is no way to ask the API for one author's branch.

Threads is harder to read. The page ships the linked post, the author's
follow-ups, other people's replies and a pile of unrelated recommendations, all
as flat thread_items containers with no nesting to go on. What separates a
follow-up from a stranger's reply is that a follow-up is the author replying to
themselves; a reply from someone else carries the same reply_to_author with a
different name on it. The first post of a chain replies to nothing at all, so
it is reachable only by walking backwards from the post that answers it -- a
test caught that, when linking the second post of a thread returned just the
one post.

Fixtures for both are real captures. The Bluesky one keeps two of every level's
outside replies rather than pruning them away, because a filter is only worth
testing against the thing it is supposed to exclude.

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01BGkRmLfiWuJHx6tQ12EELY

src/render/post.ts

@@ -1,6 +1,6 @@
 import { proxyUrlFor } from '../media/registry.ts';
-import type { Media, Post } from '../types.ts';
-import { html, type Raw } from './html.ts';
+import { anchorOf, type Media, type Post, type Segment } from '../types.ts';
+import { html, raw, type Raw } from './html.ts';
 import { badge, layout, originalUrlBlock } from './layout.ts';
 import { linkify } from './text.ts';
 
@@ -54,14 +54,14 @@ function renderMedia(media: Media[]): Raw {
   </section>`;
 }
 
-function renderText(post: Post): Raw {
-  if (!post.text) return html``;
-  return html`<div class="text">${linkify(post.text, post.platform)}</div>`;
+function renderText(segment: Segment, post: Post): Raw {
+  if (!segment.text) return html``;
+  return html`<div class="text">${linkify(segment.text, post.platform)}</div>`;
 }
 
-function renderWhen(post: Post): Raw {
-  if (!post.postedAt) return html``;
-  const date = new Date(post.postedAt);
+function renderWhen(postedAt: string | undefined): Raw {
+  if (!postedAt) return html``;
+  const date = new Date(postedAt);
   if (Number.isNaN(date.getTime())) return html``;
   return html`<time datetime="${date.toISOString()}">${date.toLocaleString('en-CA', {
     dateStyle: 'medium',
@@ -69,11 +69,31 @@ function renderWhen(post: Post): Raw {
   })}</time>`;
 }
 
+/**
+ * One post in the chain. When there is only one, the wrapper is invisible;
+ * when there are several, each is separated and the one that was actually
+ * linked is marked, since it may not be the first.
+ */
+function renderSegment(segment: Segment, post: Post, threaded: boolean): Raw {
+  const above = post.textPosition === 'above';
+  return html`<section class="segment" ${threaded && segment.isAnchor ? raw('data-anchor="true"') : ''}>
+    ${threaded && segment.isAnchor
+      ? html`<p class="segment__mark">the post you followed</p>`
+      : ''}
+    ${above ? renderText(segment, post) : ''}
+    ${renderMedia(segment.media)}
+    ${above ? '' : renderText(segment, post)}
+  </section>`;
+}
+
 export function renderPost(post: Post): string {
   const avatar = post.author.avatar ? proxyUrlFor(post.author.avatar) : undefined;
-  const above = post.textPosition === 'above';
+  const threaded = post.segments.length > 1;
+  const anchor = anchorOf(post);
 
-  const body = html`<article class="post" data-platform="${post.platform}">
+  const body = html`<article class="post" data-platform="${post.platform}" ${
+    threaded ? raw(`data-segments="${post.segments.length}"`) : ''
+  }>
     <header class="post__head">
       ${badge(post.platform, post.platformLabel)}
       <div class="who">
@@ -85,12 +105,10 @@ export function renderPost(post: Post): string {
       </div>
     </header>
 
-    ${above ? renderText(post) : ''}
-    ${renderMedia(post.media)}
-    ${above ? '' : renderText(post)}
+    ${post.segments.map((segment) => renderSegment(segment, post, threaded))}
 
     <footer class="post__foot">
-      ${renderWhen(post)}
+      ${renderWhen(anchor?.postedAt)}
       ${originalUrlBlock(post.originalUrl, post.platformLabel)}
     </footer>
   </article>`;