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/platforms/threads.ts

@@ -1,18 +1,36 @@
-import { ResolveError, type Media, type Post } from '../types.ts';
+import { ResolveError, type Media, type Post, type Segment } from '../types.ts';
 import { readOpenGraph } from '../browser/capture.ts';
-import { findCaption, findMetaMedia, mediaFromMetaNode, metaHeaders } from './meta-media.ts';
+import { findCaption, findMetaMedia, mediaFromMetaNode, metaHeaders, type MetaMediaNode } from './meta-media.ts';
 import { hostMatcher } from './url.ts';
 import type { PlatformSpec, ResolveContext } from './types.ts';
 
 const REFERER = 'https://www.threads.com/';
 
+/** One post as Threads ships it, alongside the media fields Instagram shares. */
+type ThreadsPost = MetaMediaNode & {
+  code?: string;
+  taken_at?: number;
+  caption?: { text?: string };
+  user?: { username?: string };
+  text_post_app_info?: {
+    reply_to_author?: { username?: string };
+  };
+};
+
+type ThreadContainer = {
+  thread_items?: Array<{ post?: ThreadsPost }>;
+};
+
 function handleFromPath(pathRest: string): string | undefined {
-  const match = /^(@[^/]+)/.exec(pathRest);
-  return match?.[1];
+  return /^(@[^/]+)/.exec(pathRest)?.[1];
+}
+
+function codeFromPath(pathRest: string): string | undefined {
+  return /\/post\/([A-Za-z0-9_-]+)/.exec(`/${pathRest}`)?.[1];
 }
 
 /** Threads ships its Relay payloads in `<script type="application/json">`
- *  tags, several dozen of them, in an order that is not worth relying on. */
+ *  tags, several dozen of them, in an order not worth relying on. */
 async function inlinePayloads(ctx: ResolveContext): Promise<unknown[]> {
   const raw = await ctx.page
     .evaluate(() =>
@@ -31,60 +49,149 @@ async function inlinePayloads(ctx: ResolveContext): Promise<unknown[]> {
   });
 }
 
-async function fromOpenGraph(ctx: ResolveContext): Promise<{ media: Media[]; text?: string }> {
-  const og = await readOpenGraph(ctx.page);
-  const fetchHeaders = metaHeaders(REFERER);
+/** Every post the page shipped, from the thread containers it renders. */
+export function collectPosts(root: unknown): ThreadsPost[] {
+  const seen = new Set<unknown>();
+  const queue: unknown[] = [root];
+  const posts: ThreadsPost[] = [];
 
-  if (og['og:video']) {
-    return {
-      media: [{
-        kind: 'video',
-        url: og['og:video'],
-        fetchHeaders,
-        ...(og['og:image'] ? { poster: { url: og['og:image'], fetchHeaders } } : {}),
-      }],
-      ...(og['og:description'] ? { text: og['og:description'] } : {}),
-    };
+  for (let i = 0; i < queue.length; i += 1) {
+    const value = queue[i];
+    if (value === null || typeof value !== 'object' || seen.has(value)) continue;
+    seen.add(value);
+
+    if (Array.isArray(value)) {
+      queue.push(...value);
+      continue;
+    }
+
+    const record = value as Record<string, unknown>;
+    const items = (record as ThreadContainer).thread_items;
+    if (Array.isArray(items)) {
+      for (const item of items) {
+        if (item?.post?.code) posts.push(item.post);
+      }
+    }
+    queue.push(...Object.values(record));
   }
 
+  return posts;
+}
+
+/**
+ * The author's own chain, and nothing else.
+ *
+ * The page carries three kinds of post: the linked one, the author's
+ * follow-ups, and a pile of other people's replies and recommendations. A
+ * follow-up is the author replying to themselves, which is exactly what
+ * `reply_to_author` distinguishes — someone else replying to the same post
+ * carries the same field with a different name on it.
+ */
+export function selfThread(posts: ThreadsPost[], anchorCode: string | undefined): ThreadsPost[] {
+  const anchor = anchorCode ? posts.find((p) => p.code === anchorCode) : undefined;
+  const author = anchor?.user?.username;
+  if (!anchor || !author) return [];
+
+  // Same author, oldest first. Everyone else is a reply or a recommendation.
+  const mine = [...new Map(
+    posts.filter((p) => p.user?.username === author && p.code).map((p) => [p.code, p]),
+  ).values()].sort((a, b) => (a.taken_at ?? 0) - (b.taken_at ?? 0));
+
+  const at = mine.findIndex((p) => p.code === anchor.code);
+  if (at === -1) return [anchor];
+
+  // A post continues the one before it when it is the author replying to
+  // themselves. Walk out from the anchor in both directions for as long as
+  // that holds: the link may point at the middle of a thread, and the first
+  // post of a thread is not a reply to anything, so it can only be reached
+  // backwards from the one that answers it.
+  const continues = (post: ThreadsPost | undefined): boolean =>
+    post?.text_post_app_info?.reply_to_author?.username === author;
+
+  let first = at;
+  while (first > 0 && continues(mine[first])) first -= 1;
+
+  let last = at;
+  while (last + 1 < mine.length && continues(mine[last + 1])) last += 1;
+
+  return mine.slice(first, last + 1);
+}
+
+function segmentOf(post: ThreadsPost, isAnchor: boolean): Segment {
   return {
-    media: og['og:image'] ? [{ kind: 'image', url: og['og:image'], fetchHeaders }] : [],
-    ...(og['og:description'] ? { text: og['og:description'] } : {}),
+    ...(post.caption?.text ? { text: post.caption.text } : {}),
+    media: mediaFromMetaNode(post, REFERER),
+    ...(post.taken_at ? { postedAt: new Date(post.taken_at * 1000).toISOString() } : {}),
+    ...(isAnchor ? { isAnchor: true } : {}),
   };
 }
 
+/** The floor, when the structured payload is not there to be read. */
+async function fromOpenGraph(ctx: ResolveContext): Promise<Segment | undefined> {
+  const og = await readOpenGraph(ctx.page);
+  const fetchHeaders = metaHeaders(REFERER);
+  const media: Media[] = [];
+
+  if (og['og:video']) {
+    media.push({
+      kind: 'video',
+      url: og['og:video'],
+      fetchHeaders,
+      ...(og['og:image'] ? { poster: { url: og['og:image'], fetchHeaders } } : {}),
+    });
+  } else if (og['og:image']) {
+    media.push({ kind: 'image', url: og['og:image'], fetchHeaders });
+  }
+
+  const text = og['og:description'];
+  if (media.length === 0 && !text) return undefined;
+  return { media, ...(text ? { text } : {}), isAnchor: true };
+}
+
 async function resolve(ctx: ResolveContext): Promise<Post> {
   const { page, originalUrl, pathRest } = ctx;
 
   await page.goto(originalUrl, { waitUntil: 'domcontentloaded' });
 
   const payloads = await inlinePayloads(ctx);
-  const node = findMetaMedia(payloads);
+  const chain = selfThread(collectPosts(payloads), codeFromPath(pathRest));
 
-  let media = node ? mediaFromMetaNode(node, REFERER) : [];
-  let text = findCaption(payloads);
+  let segments: Segment[] = chain.map((post) =>
+    segmentOf(post, post.code === codeFromPath(pathRest)),
+  );
 
-  if (media.length === 0 || !text) {
-    const og = await fromOpenGraph(ctx);
-    if (media.length === 0) media = og.media;
-    text ??= og.text;
+  if (segments.length === 0) {
+    // No thread containers. Fall back to whatever single post is readable.
+    const node = findMetaMedia(payloads);
+    const caption = findCaption(payloads);
+    if (node ?? caption) {
+      segments = [{
+        media: node ? mediaFromMetaNode(node, REFERER) : [],
+        ...(caption ? { text: caption } : {}),
+        isAnchor: true,
+      }];
+    }
   }
 
-  // A Threads post is often only words, so unlike the others an empty media
-  // list is a perfectly good result — but nothing at all is a failure.
-  if (media.length === 0 && !text) {
+  if (segments.length === 0) {
+    const og = await fromOpenGraph(ctx);
+    if (og) segments = [og];
+  }
+
+  // A Threads post is often only words, so empty media is a fine result --
+  // but nothing at all is a failure.
+  if (segments.length === 0) {
     throw new ResolveError('Threads returned nothing for that URL', 'threads', originalUrl);
   }
 
-  const handle = handleFromPath(pathRest) ?? '@threads';
+  const handle = chain[0]?.user?.username ?? handleFromPath(pathRest)?.slice(1) ?? 'threads';
   return {
     platform: 'threads',
     platformLabel: 'Threads',
     originalUrl,
-    author: { handle },
-    ...(text ? { text } : {}),
+    author: { handle: `@${handle}` },
     textPosition: 'above',
-    media,
+    segments,
   };
 }